fix: Move mouseover event delegation

- From document to canvas-container - Also, remove unused event handler
frappe · Jan 30, 2025 · 35db077 · 35db077
1 parent 11a9bb5
commit 35db077
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 55 deletions.
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
@@ -1,4 +1,5 @@
 import AlertDialog from "@/components/AlertDialog.vue";
+import useStore from "@/store";
 import { confirmDialog, FileUploadHandler } from "frappe-ui";
 import { h, reactive, toRaw } from "vue";
 import { toast } from "vue-sonner";
@@ -445,28 +446,48 @@ function generateId() {
 }
 
 function throttle<T extends (...args: any[]) => void>(func: T, wait: number = 1000) {
-	let timeout: ReturnType<typeof setTimeout> | null = null
-	let lastArgs: Parameters<T> | null = null
-	let pending = false
+	let timeout: ReturnType<typeof setTimeout> | null = null;
+	let lastArgs: Parameters<T> | null = null;
+	let pending = false;
 
 	const invoke = (...args: Parameters<T>) => {
-		lastArgs = args
+		lastArgs = args;
 		if (timeout) {
-			pending = true
-			return
+			pending = true;
+			return;
 		}
 
 		func(...lastArgs);
 		timeout = setTimeout(() => {
-			timeout = null
+			timeout = null;
 			if (pending && lastArgs) {
-				pending = false
-				invoke(...lastArgs)
+				pending = false;
+				invoke(...lastArgs);
 			}
-		}, wait)
+		}, wait);
 	};
 
-	return invoke
+	return invoke;
+}
+
+function isBlock(e: MouseEvent) {
+	return e.target instanceof HTMLElement && e.target.closest(".__builder_component__");
+}
+
+type BlockInfo = {
+	blockId: string;
+	breakpoint: string;
+};
+
+function getBlockInfo(e: MouseEvent) {
+	const target = (e.target as HTMLElement)?.closest(".__builder_component__") as HTMLElement;
+	return target.dataset as BlockInfo;
+}
+
+function getBlock(e: MouseEvent) {
+	const store = useStore();
+	const blockInfo = getBlockInfo(e);
+	return store.activeCanvas?.findBlock(blockInfo.blockId);
 }
 
 export {
@@ -478,7 +499,9 @@ export {
 	detachBlockFromComponent,
 	findNearestSiblingIndex,
 	generateId,
+	getBlock,
 	getBlockCopy,
+	getBlockInfo,
 	getBlockInstance,
 	getBlockObjectCopy as getBlockObject,
 	getBlockString,
@@ -492,6 +515,7 @@ export {
 	getTextContent,
 	HexToHSV,
 	HSVToHex,
+	isBlock,
 	isCtrlOrCmd,
 	isHTMLString,
 	isJSONString,
@@ -502,6 +526,6 @@ export {
 	replaceMapKey,
 	RGBToHex,
 	stripExtension,
-	uploadImage,
 	throttle,
+	uploadImage,
 };
diff --git a/frontend/src/utils/useBlockEventHandlers.ts b/frontend/src/utils/useBlockEventHandlers.ts
@@ -1,5 +1,6 @@
 import useStore from "@/store";
 import getBlockTemplate from "@/utils/blockTemplate";
+import { getBlock, getBlockInfo, isBlock } from "@/utils/helpers";
 import { useEventListener } from "@vueuse/core";
 import { nextTick } from "vue";
 
@@ -8,8 +9,6 @@ const store = useStore();
 export function useBlockEventHandlers() {
 	useEventListener(document, "click", handleClick);
 	useEventListener(document, "dblclick", handleDoubleClick);
-	useEventListener(document, "mouseover", handleMouseOver);
-	useEventListener(document, "mouseleave", handleMouseLeave);
 	useEventListener(document, "contextmenu", triggerContextMenu);
 
 	function handleClick(e: MouseEvent) {
@@ -57,26 +56,6 @@ export function useBlockEventHandlers() {
 		}
 	}
 
-	function handleMouseOver(e: MouseEvent) {
-		if (!isBlock(e)) return;
-		if (store.mode === "move" || store.activeCanvas?.resizingBlock) return;
-		const block = getBlock(e);
-		const { breakpoint } = getBlockInfo(e);
-		store.hoveredBlock = block?.blockId || null;
-		store.hoveredBreakpoint = breakpoint;
-		e.stopPropagation();
-	}
-
-	function handleMouseLeave(e: MouseEvent) {
-		if (!isBlock(e)) return;
-		if (store.mode === "move") return;
-		const block = getBlock(e);
-		if (store.hoveredBlock === block?.blockId) {
-			store.hoveredBlock = null;
-			e.stopPropagation();
-		}
-	}
-
 	function triggerContextMenu(e: MouseEvent) {
 		if (!isBlock(e) || isEditable(e)) return;
 		const block = getBlock(e);
@@ -93,21 +72,12 @@ export function useBlockEventHandlers() {
 	}
 }
 
-function getBlock(e: MouseEvent) {
-	const blockInfo = getBlockInfo(e);
-	return store.activeCanvas?.findBlock(blockInfo.blockId);
-}
-
 const isEditable = (e: MouseEvent) => {
 	const { blockId, breakpoint } = getBlockInfo(e);
 	// to ensure it is right block and not on different breakpoint
 	return store.editableBlock?.blockId === blockId && store.activeBreakpoint === breakpoint;
 };
 
-function isBlock(e: MouseEvent) {
-	return e.target instanceof HTMLElement && e.target.closest(".__builder_component__");
-}
-
 const selectBlock = (e: MouseEvent) => {
 	if (isEditable(e) || store.mode !== "select") {
 		return;
@@ -121,13 +91,3 @@ const selectBlock = (e: MouseEvent) => {
 	store.leftPanelActiveTab = "Layers";
 	store.rightPanelActiveTab = "Properties";
 };
-
-type BlockInfo = {
-	blockId: string;
-	breakpoint: string;
-};
-
-const getBlockInfo = (e: MouseEvent) => {
-	const target = (e.target as HTMLElement)?.closest(".__builder_component__") as HTMLElement;
-	return target.dataset as BlockInfo;
-};
diff --git a/frontend/src/utils/useCanvasEvents.ts b/frontend/src/utils/useCanvasEvents.ts
@@ -2,10 +2,19 @@ import useStore from "@/store";
 import { CanvasHistory } from "@/types/Builder/BuilderCanvas";
 import Block from "@/utils/block";
 import getBlockTemplate from "@/utils/blockTemplate";
-import { addPxToNumber, getNumberFromPx, isTargetEditable } from "@/utils/helpers";
+import {
+	addPxToNumber,
+	getBlock,
+	getBlockInfo,
+	getNumberFromPx,
+	isBlock,
+	isTargetEditable,
+} from "@/utils/helpers";
 import { clamp, useEventListener } from "@vueuse/core";
 import { Ref } from "vue";
 
+const store = useStore();
+
 export function useCanvasEvents(
 	container: Ref<HTMLElement>,
 	canvasProps: CanvasProps,
@@ -15,7 +24,6 @@ export function useCanvasEvents(
 	findBlock: (blockId: string) => Block | null,
 ) {
 	let counter = 0;
-	const store = useStore();
 	useEventListener(container, "mousedown", (ev: MouseEvent) => {
 		if (store.mode === "move") {
 			return;
@@ -207,4 +215,19 @@ export function useCanvasEvents(
 				break;
 		}
 	});
+
+	useEventListener(container, "mouseover", handleMouseOver);
+}
+
+function handleMouseOver(e: MouseEvent) {
+	if (!isBlock(e)) {
+		store.hoveredBlock = null;
+		return;
+	}
+	if (store.mode === "move" || store.activeCanvas?.resizingBlock) return;
+	const block = getBlock(e);
+	const { breakpoint } = getBlockInfo(e);
+	store.hoveredBlock = block?.blockId || null;
+	store.hoveredBreakpoint = breakpoint;
+	e.stopPropagation();
 }