fix: Attempted to fix some issues with floating and drag box

frontend/src/components/FloatingBox.vue

@@ -20,10 +20,12 @@ const {
 	setInitialBox,
 	onDragBox,
 	resetBoxPosition,
-	onWindowResizeDragBox
+	onWindowResizeDragBox,
+	onDragBoxUpdate
 } = useDragBox();
-let debounceTimeout;
-let shown = false;
+const saveDebounceTimeout = ref();
+const resizeDebounceTimeout = ref();
+const shown = ref(false);
 
 onMounted(async () => {
 	let initial = {
@@ -35,7 +37,7 @@ onMounted(async () => {
 	if (props.id !== null && localStorage[`box:${props.id}`]) {
 		const json = JSON.parse(localStorage.getItem(`box:${props.id}`));
 		initial = { ...initial, ...json };
-		shown = json.shown;
+		shown.value = json.shown;
 	} else {
 		initial.top =
 			props.initial === "align-bottom"
@@ -47,34 +49,43 @@ onMounted(async () => {
 });
 
 const saveBox = () => {
-	if (props.id === null) return;
-	localStorage.setItem(
-		`box:${props.id}`,
-		JSON.stringify({
-			height: dragBox.height,
-			width: dragBox.width,
-			top: dragBox.top,
-			left: dragBox.left,
-			shown
-		})
-	);
-	setInitialBox({
-		top:
-			props.initial === "align-bottom"
-				? Math.max(document.body.clientHeight - 10 - dragBox.height, 0)
-				: 10,
-		left: 10
-	});
+	if (saveDebounceTimeout.value) clearTimeout(saveDebounceTimeout.value);
+
+	saveDebounceTimeout.value = setTimeout(() => {
+		if (props.id === null) return;
+		localStorage.setItem(
+			`box:${props.id}`,
+			JSON.stringify({
+				height: dragBox.value.height,
+				width: dragBox.value.width,
+				top: dragBox.value.top,
+				left: dragBox.value.left,
+				shown: shown.value
+			})
+		);
+		setInitialBox({
+			top:
+				props.initial === "align-bottom"
+					? Math.max(
+							document.body.clientHeight -
+								10 -
+								dragBox.value.height,
+							0
+					  )
+					: 10,
+			left: 10
+		});
+	}, 50);
 };
 
 const setBoxDimensions = (width, height) => {
-	dragBox.height = Math.min(
+	dragBox.value.height = Math.min(
 		Math.max(height, props.minHeight),
 		props.maxHeight,
 		document.body.clientHeight
 	);
 
-	dragBox.width = Math.min(
+	dragBox.value.width = Math.min(
 		Math.max(width, props.minWidth),
 		props.maxWidth,
 		document.body.clientWidth
@@ -104,7 +115,7 @@ const onResizeBox = e => {
 };
 
 const toggleBox = () => {
-	shown = !shown;
+	shown.value = !shown.value;
 	saveBox();
 };
 
@@ -115,11 +126,11 @@ const resetBox = () => {
 };
 
 const onWindowResize = () => {
-	if (debounceTimeout) clearTimeout(debounceTimeout);
+	if (resizeDebounceTimeout.value) clearTimeout(resizeDebounceTimeout.value);
 
-	debounceTimeout = setTimeout(() => {
+	resizeDebounceTimeout.value = setTimeout(() => {
 		onWindowResizeDragBox();
-		const { width, height } = dragBox;
+		const { width, height } = dragBox.value;
 		setBoxDimensions(width + 0, height + 0);
 		saveBox();
 	}, 50);
@@ -128,13 +139,13 @@ const onWindowResize = () => {
 onWindowResize();
 window.addEventListener("resize", onWindowResize);
 
-// const onDragBoxUpdate = () => {
-// 	onWindowResize();
-// };
+onDragBoxUpdate.value = () => {
+	onWindowResize();
+};
 
 onUnmounted(() => {
 	window.removeEventListener("resize", onWindowResize);
-	if (debounceTimeout) clearTimeout(debounceTimeout);
+	if (resizeDebounceTimeout.value) clearTimeout(resizeDebounceTimeout.value);
 });
 
 defineExpose({

frontend/src/components/useDragBox.js

@@ -1,8 +1,8 @@
 // WIP
-import { onUnmounted } from "vue";
+import { ref, onUnmounted } from "vue";
 
 export default () => {
-	let dragBox = {
+	const dragBox = ref({
 		top: 0,
 		left: 0,
 		pos1: 0,
@@ -21,20 +21,21 @@ export default () => {
 		},
 		debounceTimeout: null,
 		lastTappedDate: 0
-	};
+	});
+	const onDragBoxUpdate = ref();
 
 	const setInitialBox = (initial, reset) => {
-		dragBox.initial = initial || dragBox.initial;
-		if (reset) dragBox = { ...dragBox, ...dragBox.initial };
+		dragBox.value.initial = initial || dragBox.value.initial;
+		if (reset)
+			dragBox.value = { ...dragBox.value, ...dragBox.value.initial };
 	};
 
-	// eslint-disable-next-line
 	const resetBoxPosition = preventUpdate => {
 		setInitialBox(null, true);
-		dragBox.latest.top = dragBox.top;
-		dragBox.latest.left = dragBox.left;
-		// if (!preventUpdate && typeof onDragBoxUpdate === "function")
-		// 	onDragBoxUpdate();
+		dragBox.value.latest.top = dragBox.value.top;
+		dragBox.value.latest.left = dragBox.value.left;
+		if (!preventUpdate && typeof onDragBoxUpdate.value === "function")
+			onDragBoxUpdate.value();
 	};
 
 	const onDragBox = e => {
@@ -44,16 +45,20 @@ export default () => {
 
 		if (e1IsTouch) {
 			// Handle double click from touch (if this method is twice in a row within one second)
-			if (Date.now() - dragBox.lastTappedDate <= 1000) {
+			if (Date.now() - dragBox.value.lastTappedDate <= 1000) {
 				resetBoxPosition();
-				dragBox.lastTappedDate = 0;
+				dragBox.value.lastTappedDate = 0;
 				return;
 			}
-			dragBox.lastTappedDate = Date.now();
+			dragBox.value.lastTappedDate = Date.now();
 		}
 
-		dragBox.pos3 = e1IsTouch ? e1.changedTouches[0].clientX : e1.clientX;
-		dragBox.pos4 = e1IsTouch ? e1.changedTouches[0].clientY : e1.clientY;
+		dragBox.value.pos3 = e1IsTouch
+			? e1.changedTouches[0].clientX
+			: e1.clientX;
+		dragBox.value.pos4 = e1IsTouch
+			? e1.changedTouches[0].clientY
+			: e1.clientY;
 
 		document.onmousemove = document.ontouchmove = e => {
 			const e2 = e || window.event;
@@ -69,20 +74,28 @@ export default () => {
 				: e2.clientY;
 
 			// calculate the new cursor position:
-			dragBox.pos1 = dragBox.pos3 - e2ClientX;
-			dragBox.pos2 = dragBox.pos4 - e2ClientY;
-			dragBox.pos3 = e2ClientX;
-			dragBox.pos4 = e2ClientY;
+			dragBox.value.pos1 = dragBox.value.pos3 - e2ClientX;
+			dragBox.value.pos2 = dragBox.value.pos4 - e2ClientY;
+			dragBox.value.pos3 = e2ClientX;
+			dragBox.value.pos4 = e2ClientY;
 			// set the element's new position:
-			dragBox.top -= dragBox.pos2;
-			dragBox.left -= dragBox.pos1;
-
-			if (dragBox.top > document.body.clientHeight - dragBox.height)
-				dragBox.top = document.body.clientHeight - dragBox.height;
-			if (dragBox.top < 0) dragBox.top = 0;
-			if (dragBox.left > document.body.clientWidth - dragBox.width)
-				dragBox.left = document.body.clientWidth - dragBox.width;
-			if (dragBox.left < 0) dragBox.left = 0;
+			dragBox.value.top -= dragBox.value.pos2;
+			dragBox.value.left -= dragBox.value.pos1;
+
+			if (
+				dragBox.value.top >
+				document.body.clientHeight - dragBox.value.height
+			)
+				dragBox.value.top =
+					document.body.clientHeight - dragBox.value.height;
+			if (dragBox.value.top < 0) dragBox.value.top = 0;
+			if (
+				dragBox.value.left >
+				document.body.clientWidth - dragBox.value.width
+			)
+				dragBox.value.left =
+					document.body.clientWidth - dragBox.value.width;
+			if (dragBox.value.left < 0) dragBox.value.left = 0;
 		};
 
 		document.onmouseup = document.ontouchend = () => {
@@ -91,28 +104,39 @@ export default () => {
 			document.onmousemove = null;
 			document.ontouchmove = null;
 
-			// if (typeof onDragBoxUpdate === "function") onDragBoxUpdate();
+			if (typeof onDragBoxUpdate.value === "function")
+				onDragBoxUpdate.value();
 		};
 	};
 
 	const onWindowResizeDragBox = () => {
-		if (dragBox.debounceTimeout) clearTimeout(dragBox.debounceTimeout);
+		if (dragBox.value.debounceTimeout)
+			clearTimeout(dragBox.value.debounceTimeout);
 
-		dragBox.debounceTimeout = setTimeout(() => {
+		dragBox.value.debounceTimeout = setTimeout(() => {
 			if (
-				dragBox.top === dragBox.latest.top &&
-				dragBox.left === dragBox.latest.left
+				dragBox.value.top === dragBox.value.latest.top &&
+				dragBox.value.left === dragBox.value.latest.left
 			)
 				resetBoxPosition();
 			else {
-				if (dragBox.top > document.body.clientHeight - dragBox.height)
-					dragBox.top = document.body.clientHeight - dragBox.height;
-				if (dragBox.top < 0) dragBox.top = 0;
-				if (dragBox.left > document.body.clientWidth - dragBox.width)
-					dragBox.left = document.body.clientWidth - dragBox.width;
-				if (dragBox.left < 0) dragBox.left = 0;
-
-				// if (typeof onDragBoxUpdate === "function") onDragBoxUpdate();
+				if (
+					dragBox.value.top >
+					document.body.clientHeight - dragBox.value.height
+				)
+					dragBox.value.top =
+						document.body.clientHeight - dragBox.value.height;
+				if (dragBox.value.top < 0) dragBox.value.top = 0;
+				if (
+					dragBox.value.left >
+					document.body.clientWidth - dragBox.value.width
+				)
+					dragBox.value.left =
+						document.body.clientWidth - dragBox.value.width;
+				if (dragBox.value.left < 0) dragBox.value.left = 0;
+
+				if (typeof onDragBoxUpdate.value === "function")
+					onDragBoxUpdate.value();
 			}
 		}, 50);
 	};
@@ -124,13 +148,16 @@ export default () => {
 
 	onUnmounted(() => {
 		window.removeEventListener("resize", onWindowResizeDragBox);
-		if (dragBox.debounceTimeout) clearTimeout(dragBox.debounceTimeout);
+		if (dragBox.value.debounceTimeout)
+			clearTimeout(dragBox.value.debounceTimeout);
 	});
+
 	return {
 		dragBox,
 		setInitialBox,
 		onDragBox,
 		resetBoxPosition,
-		onWindowResizeDragBox
+		onWindowResizeDragBox,
+		onDragBoxUpdate
 	};
 };