Merge branch 'main' into v11

packages/core/src/components/Nodes/utils.ts

@@ -4,20 +4,10 @@ import { GetState, SetState } from 'zustand';
 import { HandleElement, Node, Position, ReactFlowState } from '../../types';
 import { getDimensions } from '../../utils';
 
-export const getHandleBounds = (nodeElement: HTMLDivElement, scale: number) => {
-  const bounds = nodeElement.getBoundingClientRect();
-
-  return {
-    source: getHandleBoundsByHandleType('.source', nodeElement, bounds, scale),
-    target: getHandleBoundsByHandleType('.target', nodeElement, bounds, scale),
-  };
-};
-
-export const getHandleBoundsByHandleType = (
+export const getHandleBounds = (
   selector: string,
   nodeElement: HTMLDivElement,
-  parentBounds: DOMRect,
-  k: number
+  zoom: number
 ): HandleElement[] | null => {
   const handles = nodeElement.querySelectorAll(selector);
 
@@ -26,19 +16,17 @@ export const getHandleBoundsByHandleType = (
   }
 
   const handlesArray = Array.from(handles) as HTMLDivElement[];
+  const nodeBounds = nodeElement.getBoundingClientRect();
 
   return handlesArray.map((handle): HandleElement => {
-    const bounds = handle.getBoundingClientRect();
-    const dimensions = getDimensions(handle);
-    const handleId = handle.getAttribute('data-handleid');
-    const handlePosition = handle.getAttribute('data-handlepos') as unknown as Position;
+    const handleBounds = handle.getBoundingClientRect();
 
     return {
-      id: handleId,
-      position: handlePosition,
-      x: (bounds.left - parentBounds.left) / k,
-      y: (bounds.top - parentBounds.top) / k,
-      ...dimensions,
+      id: handle.getAttribute('data-handleid'),
+      position: handle.getAttribute('data-handlepos') as unknown as Position,
+      x: (handleBounds.left - nodeBounds.left) / zoom,
+      y: (handleBounds.top - nodeBounds.top) / zoom,
+      ...getDimensions(handle),
     };
   });
 };

packages/core/src/components/Nodes/wrapNode.tsx

@@ -1,14 +1,12 @@
 import React, { useEffect, useRef, memo, ComponentType, MouseEvent } from 'react';
 import cc from 'classcat';
 
-import { useStore, useStoreApi } from '../../store';
+import { useStoreApi } from '../../store';
 import { Provider } from '../../contexts/NodeIdContext';
-import { NodeProps, WrapNodeProps, ReactFlowState } from '../../types';
+import { NodeProps, WrapNodeProps } from '../../types';
 import useDrag from '../../hooks/useDrag';
 import { getMouseHandler, handleNodeClick } from './utils';
 
-const selector = (s: ReactFlowState) => s.updateNodeDimensions;
-
 export default (NodeComponent: ComponentType<NodeProps>) => {
   const NodeWrapper = ({
     id,
@@ -23,9 +21,6 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
     onMouseLeave,
     onContextMenu,
     onDoubleClick,
-    onDragStart,
-    onDrag,
-    onDragStop,
     style,
     className,
     isDraggable,
@@ -44,7 +39,6 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
     initialized,
   }: WrapNodeProps) => {
     const store = useStoreApi();
-    const updateNodeDimensions = useStore(selector);
     const nodeRef = useRef<HTMLDivElement>(null);
     const prevSourcePosition = useRef(sourcePosition);
     const prevTargetPosition = useRef(targetPosition);
@@ -96,14 +90,11 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
         if (targetPosChanged) {
           prevTargetPosition.current = targetPosition;
         }
-        updateNodeDimensions([{ id, nodeElement: nodeRef.current, forceUpdate: true }]);
+        store.getState().updateNodeDimensions([{ id, nodeElement: nodeRef.current, forceUpdate: true }]);
       }
     }, [id, type, sourcePosition, targetPosition]);
 
     const dragging = useDrag({
-      onStart: onDragStart,
-      onDrag: onDrag,
-      onStop: onDragStop,
       nodeRef,
       disabled: hidden || !isDraggable,
       noDragClassName,