extract all logic to system

packages/react/src/additional-components/NodeResizer/ResizeControl.tsx

@@ -1,28 +1,11 @@
 import { useRef, useEffect, memo } from 'react';
 import cc from 'classcat';
-import { drag } from 'd3-drag';
-import { select } from 'd3-selection';
-import {
-  getPointerPosition,
-  getControlDirection,
-  getDimensionsAfterResize,
-  getPositionAfterResize,
-} from '@xyflow/system';
-
+import { XYResizerInstance, XYResizer, XYResizeChange } from '@xyflow/system';
+import { ResizeControlVariant } from '@xyflow/system';
 import { useStoreApi } from '../../hooks/useStore';
 import { useNodeId } from '../../contexts/NodeIdContext';
 import type { NodeChange, NodeDimensionChange, NodePositionChange } from '../../types';
-import { type ResizeDragEvent, type ResizeControlProps, type ResizeControlLineProps } from './types';
-import { getResizeDirection, ResizeControlVariant } from '@xyflow/system';
-
-const initPrevValues = { width: 0, height: 0, x: 0, y: 0 };
-
-const initStartValues = {
-  ...initPrevValues,
-  pointerX: 0,
-  pointerY: 0,
-  aspectRatio: 1,
-};
+import { type ResizeControlProps, type ResizeControlLineProps } from './types';
 
 function ResizeControl({
   nodeId,
@@ -46,146 +29,93 @@ function ResizeControl({
   const id = typeof nodeId === 'string' ? nodeId : contextNodeId;
   const store = useStoreApi();
   const resizeControlRef = useRef<HTMLDivElement>(null);
-  const startValues = useRef<typeof initStartValues>(initStartValues);
-  const prevValues = useRef<typeof initPrevValues>(initPrevValues);
   const defaultPosition = variant === ResizeControlVariant.Line ? 'right' : 'bottom-right';
   const controlPosition = position ?? defaultPosition;
 
+  const resizer = useRef<XYResizerInstance | null>(null);
+
   useEffect(() => {
     if (!resizeControlRef.current || !id) {
       return;
     }
 
-    const selection = select(resizeControlRef.current);
+    if (!resizer.current) {
+      resizer.current = XYResizer({
+        domNode: resizeControlRef.current,
+        nodeId: id,
+        getStoreItems: () => {
+          const { nodeLookup, transform, snapGrid, snapToGrid } = store.getState();
+          return {
+            nodeLookup,
+            transform,
+            snapGrid,
+            snapToGrid,
+          };
+        },
+        onChange: (change: XYResizeChange) => {
+          const { triggerNodeChanges } = store.getState();
 
-    const controlDirection = getControlDirection(controlPosition);
-
-    const dragHandler = drag<HTMLDivElement, unknown>()
-      .on('start', (event: ResizeDragEvent) => {
-        const { nodeLookup, transform, snapGrid, snapToGrid } = store.getState();
-        const node = nodeLookup.get(id);
-        const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
-
-        prevValues.current = {
-          width: node?.computed?.width ?? 0,
-          height: node?.computed?.height ?? 0,
-          x: node?.position.x ?? 0,
-          y: node?.position.y ?? 0,
-        };
-
-        startValues.current = {
-          ...prevValues.current,
-          pointerX: xSnapped,
-          pointerY: ySnapped,
-          aspectRatio: prevValues.current.width / prevValues.current.height,
-        };
-
-        onResizeStart?.(event, { ...prevValues.current });
-      })
-      .on('drag', (event: ResizeDragEvent) => {
-        const { nodeLookup, transform, snapGrid, snapToGrid, triggerNodeChanges } = store.getState();
-        const pointerPosition = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
-        const node = nodeLookup.get(id);
-
-        if (node) {
           const changes: NodeChange[] = [];
 
-          const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues.current;
+          if (change.isXPosChange || change.isYPosChange) {
+            const positionChange: NodePositionChange = {
+              id,
+              type: 'position',
+              position: {
+                x: change.x,
+                y: change.y,
+              },
+            };
 
-          const { width, height } = getDimensionsAfterResize(
-            startValues.current,
-            controlDirection,
-            pointerPosition,
-            { minWidth, minHeight, maxWidth, maxHeight },
-            keepAspectRatio
-          );
-
-          const isWidthChange = width !== prevWidth;
-          const isHeightChange = height !== prevHeight;
-
-          if (controlDirection.affectsX || controlDirection.affectsY) {
-            const { x, y } = getPositionAfterResize(startValues.current, controlDirection, width, height);
-
-            // only transform the node if the width or height changes
-            const isXPosChange = x !== prevX && isWidthChange;
-            const isYPosChange = y !== prevY && isHeightChange;
-
-            if (isXPosChange || isYPosChange) {
-              const positionChange: NodePositionChange = {
-                id: node.id,
-                type: 'position',
-                position: {
-                  x: isXPosChange ? x : prevX,
-                  y: isYPosChange ? y : prevY,
-                },
-              };
-
-              changes.push(positionChange);
-              prevValues.current.x = positionChange.position!.x;
-              prevValues.current.y = positionChange.position!.y;
-            }
+            changes.push(positionChange);
           }
 
-          if (isWidthChange || isHeightChange) {
+          if (change.isWidthChange || change.isHeightChange) {
             const dimensionChange: NodeDimensionChange = {
-              id: id,
+              id,
               type: 'dimensions',
               updateStyle: true,
               resizing: true,
               dimensions: {
-                width: width,
-                height: height,
+                width: change.width,
+                height: change.height,
               },
             };
 
             changes.push(dimensionChange);
-            prevValues.current.width = width;
-            prevValues.current.height = height;
           }
-
-          if (changes.length === 0) {
-            return;
-          }
-
-          const direction = getResizeDirection({
-            width: prevValues.current.width,
-            prevWidth,
-            height: prevValues.current.height,
-            prevHeight,
-            affectsX: controlDirection.affectsX,
-            affectsY: controlDirection.affectsY,
-          });
-
-          const nextValues = { ...prevValues.current, direction };
-
-          const callResize = shouldResize?.(event, nextValues);
-
-          if (callResize === false) {
-            return;
-          }
-
-          onResize?.(event, nextValues);
           triggerNodeChanges(changes);
-        }
-      })
-      .on('end', (event: ResizeDragEvent) => {
-        const dimensionChange: NodeDimensionChange = {
-          id: id,
-          type: 'dimensions',
-          resizing: false,
-        };
-
-        onResizeEnd?.(event, { ...prevValues.current });
-        store.getState().triggerNodeChanges([dimensionChange]);
+        },
+        onEnd: () => {
+          const dimensionChange: NodeDimensionChange = {
+            id: id,
+            type: 'dimensions',
+            resizing: false,
+          };
+          store.getState().triggerNodeChanges([dimensionChange]);
+        },
       });
+    }
 
-    selection.call(dragHandler);
+    resizer.current.update({
+      controlPosition,
+      boundries: {
+        minWidth,
+        minHeight,
+        maxWidth,
+        maxHeight,
+      },
+      keepAspectRatio,
+      onResizeStart,
+      onResize,
+      onResizeEnd,
+      shouldResize,
+    });
 
     return () => {
-      selection.on('.drag', null);
+      resizer.current?.destroy();
     };
   }, [
-    id,
     controlPosition,
     minWidth,
     minHeight,
@@ -195,6 +125,7 @@ function ResizeControl({
     onResizeStart,
     onResize,
     onResizeEnd,
+    shouldResize,
   ]);
 
   const positionClassNames = controlPosition.split('-');

packages/react/src/additional-components/NodeResizer/types.ts

@@ -1,21 +1,14 @@
 import type { CSSProperties, ReactNode } from 'react';
-import type { D3DragEvent, SubjectPosition } from 'd3-drag';
 import type {
-  XYResizeParams,
-  XYResizeParamsWithDirection,
   XYResizeControlPosition,
   XYResizeControlLinePosition,
   ResizeControlVariant,
+  ShouldResize,
+  OnResizeStart,
+  OnResize,
+  OnResizeEnd,
 } from '@xyflow/system';
 
-type OnResizeHandler<Params = XYResizeParams, Result = void> = (event: ResizeDragEvent, params: Params) => Result;
-export type ResizeDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>;
-
-export type ShouldResize = OnResizeHandler<XYResizeParamsWithDirection, boolean>;
-export type OnResizeStart = OnResizeHandler;
-export type OnResize = OnResizeHandler<XYResizeParamsWithDirection>;
-export type OnResizeEnd = OnResizeHandler;
-
 export type NodeResizerProps = {
   nodeId?: string;
   color?: string;