refactor(wrapNode): simplify mouse handler

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 {
+    const { addSelectedNodes, unselectNodesAndEdges, setNodesSelectionActive, updateNodePosition } = useStore(
-      addSelectedNodes,
+      selector,
-      unselectNodesAndEdges,
+      shallow
-      setNodesSelectionActive,
+    );
-      updateNodePosition,
-      //  updateNodeDimensions,
-    } = useStore(selector, shallow);
     const nodeElement = useRef<HTMLDivElement>(null);
-
+    const hasPointerEvents = isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave;
-    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 nodeStyle: CSSProperties = useMemo(
       () => ({
         zIndex,
         transform: `translate(${xPos}px,${yPos}px)`,
-        pointerEvents:
+        pointerEvents: hasPointerEvents ? 'all' : 'none',
-          isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave ? 'all' : 'none',
         // prevents jumping of nodes on start
         opacity: isInitialized ? 1 : 0,
         ...style,
       }),
-      [
+      [zIndex, xPos, yPos, hasPointerEvents, isInitialized, style]
-        xPos,
-        yPos,
-        isSelectable,
-        isDraggable,
-        onClick,
-        isInitialized,
-        style,
-        onMouseEnter,
-        onMouseMove,
-        onMouseLeave,
-        isParent,
-        zIndex,
-      ]
     );
 
-    const onMouseEnterHandler = useMemo(() => {
+    const node = useMemo(() => ({ id, type, position: { x: xPos, y: yPos }, data }), [id, type, xPos, yPos, data]);
-      if (!onMouseEnter || dragging) {
+    const grid = useMemo(() => (snapToGrid ? snapGrid : [1, 1])! as [number, number], [snapToGrid, snapGrid]);
-        return;
-      }
 
-      return (event: MouseEvent) => onMouseEnter(event, node);
+    const onMouseEnterHandler = useCallback(
-    }, [onMouseEnter, dragging, node]);
+      (event: MouseEvent) => {
+        if (onMouseEnter && !dragging) {
+          onMouseEnter(event, node);
+        }
+      },
+      [onMouseEnter, dragging, node]
+    );
 
-    const onMouseMoveHandler = useMemo(() => {
+    const onMouseMoveHandler = useCallback(
-      if (!onMouseMove || dragging) {
+      (event: MouseEvent) => {
-        return;
+        if (onMouseMove && !dragging) {
-      }
+          onMouseMove(event, node);
+        }
+      },
+      [onMouseMove, dragging, node]
+    );
 
-      return (event: MouseEvent) => onMouseMove(event, node);
+    const onMouseLeaveHandler = useCallback(
-    }, [onMouseMove, dragging, node]);
+      (event: MouseEvent) => {
+        if (onMouseLeave && !dragging) {
+          onMouseLeave?.(event, node);
+        }
+      },
+      [onMouseLeave, dragging, node]
+    );
 
-    const onMouseLeaveHandler = useMemo(() => {
+    const onContextMenuHandler = useCallback(
-      if (!onMouseLeave || dragging) {
+      (event: MouseEvent) => onContextMenu?.(event, node),
-        return;
+      [onContextMenu, node]
-      }
+    );
-
-      return (event: MouseEvent) => onMouseLeave(event, node);
-    }, [onMouseLeave, dragging, node]);
-
-    const onContextMenuHandler = useMemo(() => {
-      if (!onContextMenu) {
-        return;
-      }
-
-      return (event: MouseEvent) => onContextMenu(event, node);
-    }, [onContextMenu, node]);
 
     const onSelectNodeHandler = useCallback(
       (event: MouseEvent) => {