refacitr(resizer): cleanup

packages/node-resizer/package.json

@@ -38,7 +38,6 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@babel/runtime": "^7.18.9",
     "@reactflow/core": "workspace:*",
     "classcat": "^5.0.4",
     "d3-drag": "^3.0.0",
@@ -53,7 +52,6 @@
     "@reactflow/eslint-config": "workspace:*",
     "@reactflow/rollup-config": "workspace:*",
     "@reactflow/tsconfig": "workspace:*",
-    "@types/d3": "^7.4.0",
     "@types/d3-drag": "^3.0.1",
     "@types/d3-selection": "^3.0.3",
     "@types/node": "^18.7.16",

packages/node-resizer/src/NodeResizer.tsx

@@ -1,5 +1,8 @@
 import ResizeControl from './ResizeControl';
-import type { NodeResizerProps } from './types';
+import { ControlPosition, NodeResizerProps, ResizeControlVariant, ControlLinePosition } from './types';
+
+const handleControls: ControlPosition[] = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
+const lineControls: ControlLinePosition[] = ['top', 'right', 'bottom', 'left'];
 
 export default function NodeResizer({
   nodeId,
@@ -10,16 +13,19 @@ export default function NodeResizer({
 }: NodeResizerProps) {
   return (
     <>
-      <ResizeControl className={handleClassName} style={handleStyle} nodeId={nodeId} position="top-left" />
+      {lineControls.map((c) => (
-      <ResizeControl className={lineClassName} variant="line" style={lineStyle} nodeId={nodeId} position="top" />
+        <ResizeControl
-      <ResizeControl className={handleClassName} style={handleStyle} nodeId={nodeId} position="top-right" />
+          key={c}
-
+          className={lineClassName}
-      <ResizeControl className={lineClassName} variant="line" style={lineStyle} nodeId={nodeId} position="left" />
+          style={lineStyle}
-
+          nodeId={nodeId}
-      <ResizeControl className={handleClassName} style={handleStyle} nodeId={nodeId} position="bottom-left" />
+          position={c}
-      <ResizeControl className={lineClassName} variant="line" style={lineStyle} nodeId={nodeId} position="right" />
+          variant={ResizeControlVariant.Line}
-      <ResizeControl className={handleClassName} style={handleStyle} nodeId={nodeId} position="bottom-right" />
+        />
-      <ResizeControl className={lineClassName} variant="line" position="bottom" style={lineStyle} nodeId={nodeId} />
+      ))}
+      {handleControls.map((c) => (
+        <ResizeControl key={c} className={handleClassName} style={handleStyle} nodeId={nodeId} position={c} />
+      ))}
     </>
   );
 }

packages/node-resizer/src/ResizeControl.tsx

@@ -1,4 +1,4 @@
-import { useRef, useEffect } from 'react';
+import { useRef, useEffect, memo } from 'react';
 import cc from 'classcat';
 import { drag } from 'd3-drag';
 import { select } from 'd3-selection';
@@ -6,26 +6,25 @@ import {
   useStoreApi,
   useGetPointerPosition,
   NodeChange,
-  NodePositionChange,
   NodeDimensionChange,
   applyNodeChanges,
   createNodeInternals,
 } from '@reactflow/core';
 import type { Dimensions, Node, XYPosition } from '@reactflow/core';
 
-import type { ResizeDragEvent, ResizeControlProps, ResizeControlLineProps } from './types';
+import { ResizeDragEvent, ResizeControlProps, ResizeControlLineProps, ResizeControlVariant } from './types';
 
 function ResizeControl({
   nodeId,
   position = 'bottom-right',
-  variant = 'handle',
+  variant = ResizeControlVariant.Handle,
   className,
   style = {},
   children,
 }: ResizeControlProps) {
   const store = useStoreApi();
-  const resizeHandleRef = useRef<HTMLDivElement>(null);
+  const resizeControlRef = useRef<HTMLDivElement>(null);
-  const initialDimensionsRef = useRef<Dimensions & XYPosition & { nodeX: number; nodeY: number }>({
+  const startValues = useRef<Dimensions & XYPosition & { nodeX: number; nodeY: number }>({
     width: 0,
     height: 0,
     x: 0,
@@ -33,53 +32,58 @@ function ResizeControl({
     nodeX: 0,
     nodeY: 0,
   });
-  const nodeElementRef = useRef<HTMLDivElement | null>(null);
   const getPointerPosition = useGetPointerPosition();
 
   useEffect(() => {
-    if (!resizeHandleRef.current) {
+    if (!resizeControlRef.current) {
       return;
     }
 
-    const selection = select(resizeHandleRef.current);
+    const selection = select(resizeControlRef.current);
     const dragHandler = drag<HTMLDivElement, unknown>()
       .on('start', (event: ResizeDragEvent) => {
         const node = store.getState().nodeInternals.get(nodeId);
-        const pointerPos = getPointerPosition(event);
+        const { xSnapped, ySnapped } = getPointerPosition(event);
 
-        initialDimensionsRef.current = {
+        startValues.current = {
           width: node?.width ?? 0,
           height: node?.height ?? 0,
           nodeX: node?.position.x ?? 0,
           nodeY: node?.position.y ?? 0,
-          x: pointerPos.xSnapped,
+          x: xSnapped,
-          y: pointerPos.ySnapped,
+          y: ySnapped,
         };
-        nodeElementRef.current = document.querySelector(`.react-flow__node[data-id="${nodeId}"]`) as HTMLDivElement;
       })
       .on('drag', (event: ResizeDragEvent) => {
         const { updateNodePositions, nodeInternals, onNodesChange, hasDefaultNodes, nodeOrigin } = store.getState();
-        const pointerPos = getPointerPosition(event);
+        const { xSnapped, ySnapped } = getPointerPosition(event);
-        const nodeEl = nodeElementRef.current;
         const node = nodeInternals.get(nodeId);
         const enableX = position.includes('right') || position.includes('left');
         const enableY = position.includes('bottom') || position.includes('top');
         const invertX = position.includes('left');
         const invertY = position.includes('top');
 
-        if (nodeEl && node) {
+        if (node) {
           const changes: NodeChange[] = [];
-          const distX = enableX ? pointerPos.xSnapped - initialDimensionsRef.current.x : 0;
+          const {
-          const distY = enableY ? pointerPos.ySnapped - initialDimensionsRef.current.y : 0;
+            x: startX,
-          const width = initialDimensionsRef.current.width + (invertX ? -distX : distX);
+            y: startY,
-          const height = initialDimensionsRef.current.height + (invertY ? -distY : distY);
+            width: startWidth,
+            height: startHeight,
+            nodeX: startNodeX,
+            nodeY: startNodeY,
+          } = startValues.current;
+          const distX = enableX ? xSnapped - startX : 0;
+          const distY = enableY ? ySnapped - startY : 0;
+          const width = startWidth + (invertX ? -distX : distX);
+          const height = startHeight + (invertY ? -distY : distY);
 
           if (invertX || invertY) {
-            const x = invertX ? initialDimensionsRef.current.nodeX + distX : initialDimensionsRef.current.nodeX;
+            const x = invertX ? startNodeX + distX : startNodeX;
-            const y = invertY ? initialDimensionsRef.current.nodeY + distY : initialDimensionsRef.current.nodeY;
+            const y = invertY ? startNodeY + distY : startNodeY;
 
             if (x !== node.position.x || y !== node.position.y) {
-              const positionChanges: NodePositionChange[] | null = updateNodePositions(
+              const positionChanges = updateNodePositions(
                 [
                   {
                     id: nodeId,
@@ -129,12 +133,12 @@ function ResizeControl({
     };
   }, [nodeId, position, getPointerPosition]);
 
-  const positionClassNames = position.split('-');
+  const positionClassNames = position?.split('-');
 
   return (
     <div
-      className={cc([className, ...positionClassNames, variant, 'react-flow__resize-control', 'nodrag'])}
+      className={cc(['react-flow__resize-control', 'nodrag', ...positionClassNames, variant, className])}
-      ref={resizeHandleRef}
+      ref={resizeControlRef}
       style={style}
     >
       {children}
@@ -143,7 +147,7 @@ function ResizeControl({
 }
 
 export function ResizeControlLine(props: ResizeControlLineProps) {
-  return <ResizeControl {...props} variant="line" />;
+  return <ResizeControl {...props} variant={ResizeControlVariant.Line} />;
 }
 
-export default ResizeControl;
+export default memo(ResizeControl);

packages/node-resizer/src/types.ts

@@ -13,10 +13,15 @@ export type ControlLinePosition = 'top' | 'bottom' | 'left' | 'right';
 
 export type ControlPosition = ControlLinePosition | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 
+export enum ResizeControlVariant {
+  Line = 'line',
+  Handle = 'handle',
+}
+
 export type ResizeControlProps = {
   nodeId: string;
   position: ControlPosition;
-  variant?: 'line' | 'handle';
+  variant?: ResizeControlVariant;
   className?: string;
   style?: CSSProperties;
   children?: ReactNode;