From 14b9ec4a6a50efbec1fd010744bd1e38bac0f038 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Sun, 28 Nov 2021 02:48:09 +0100
Subject: [PATCH] refactor(wrapNode): simplify mouse handler

---
 src/components/Nodes/wrapNode.tsx | 92 +++++++++++++------------------
 1 file changed, 37 insertions(+), 55 deletions(-)

diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx
index 75c91f3f..be29a0c7 100644
--- a/src/components/Nodes/wrapNode.tsx
+++ b/src/components/Nodes/wrapNode.tsx
@@ -11,7 +11,6 @@ const selector = (s: ReactFlowState) => ({
   addSelectedNodes: s.addSelectedNodes,
   setNodesSelectionActive: s.setNodesSelectionActive,
   updateNodePosition: s.updateNodePosition,
-  updateNodeDimensions: s.updateNodeDimensions,
   unselectNodesAndEdges: s.unselectNodesAndEdges,
 });
 
@@ -53,75 +52,58 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
     noPanClassName,
     noDragClassName,
   }: WrapNodeProps) => {
-    const {
-      addSelectedNodes,
-      unselectNodesAndEdges,
-      setNodesSelectionActive,
-      updateNodePosition,
-      //  updateNodeDimensions,
-    } = useStore(selector, shallow);
+    const { addSelectedNodes, unselectNodesAndEdges, setNodesSelectionActive, updateNodePosition } = useStore(
+      selector,
+      shallow
+    );
     const nodeElement = useRef<HTMLDivElement>(null);
-
-    const node = useMemo(() => ({ id, type, position: { x: xPos, y: yPos }, data }), [id, type, xPos, yPos, data]);
-    const grid = useMemo(() => (snapToGrid ? snapGrid : [1, 1])! as [number, number], [snapToGrid, snapGrid]);
-
+    const hasPointerEvents = isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave;
     const nodeStyle: CSSProperties = useMemo(
       () => ({
         zIndex,
         transform: `translate(${xPos}px,${yPos}px)`,
-        pointerEvents:
-          isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave ? 'all' : 'none',
+        pointerEvents: hasPointerEvents ? 'all' : 'none',
         // prevents jumping of nodes on start
         opacity: isInitialized ? 1 : 0,
         ...style,
       }),
-      [
-        xPos,
-        yPos,
-        isSelectable,
-        isDraggable,
-        onClick,
-        isInitialized,
-        style,
-        onMouseEnter,
-        onMouseMove,
-        onMouseLeave,
-        isParent,
-        zIndex,
-      ]
+      [zIndex, xPos, yPos, hasPointerEvents, isInitialized, style]
     );
 
-    const onMouseEnterHandler = useMemo(() => {
-      if (!onMouseEnter || dragging) {
-        return;
-      }
+    const node = useMemo(() => ({ id, type, position: { x: xPos, y: yPos }, data }), [id, type, xPos, yPos, data]);
+    const grid = useMemo(() => (snapToGrid ? snapGrid : [1, 1])! as [number, number], [snapToGrid, snapGrid]);
 
-      return (event: MouseEvent) => onMouseEnter(event, node);
-    }, [onMouseEnter, dragging, node]);
+    const onMouseEnterHandler = useCallback(
+      (event: MouseEvent) => {
+        if (onMouseEnter && !dragging) {
+          onMouseEnter(event, node);
+        }
+      },
+      [onMouseEnter, dragging, node]
+    );
 
-    const onMouseMoveHandler = useMemo(() => {
-      if (!onMouseMove || dragging) {
-        return;
-      }
+    const onMouseMoveHandler = useCallback(
+      (event: MouseEvent) => {
+        if (onMouseMove && !dragging) {
+          onMouseMove(event, node);
+        }
+      },
+      [onMouseMove, dragging, node]
+    );
 
-      return (event: MouseEvent) => onMouseMove(event, node);
-    }, [onMouseMove, dragging, node]);
+    const onMouseLeaveHandler = useCallback(
+      (event: MouseEvent) => {
+        if (onMouseLeave && !dragging) {
+          onMouseLeave?.(event, node);
+        }
+      },
+      [onMouseLeave, dragging, node]
+    );
 
-    const onMouseLeaveHandler = useMemo(() => {
-      if (!onMouseLeave || dragging) {
-        return;
-      }
-
-      return (event: MouseEvent) => onMouseLeave(event, node);
-    }, [onMouseLeave, dragging, node]);
-
-    const onContextMenuHandler = useMemo(() => {
-      if (!onContextMenu) {
-        return;
-      }
-
-      return (event: MouseEvent) => onContextMenu(event, node);
-    }, [onContextMenu, node]);
+    const onContextMenuHandler = useCallback(
+      (event: MouseEvent) => onContextMenu?.(event, node),
+      [onContextMenu, node]
+    );
 
     const onSelectNodeHandler = useCallback(
       (event: MouseEvent) => {