feat(resizer): batch changes

examples/vite-app/src/examples/NodeResizer/index.tsx

@@ -1,13 +1,5 @@
 import { useCallback } from 'react';
-import ReactFlow, {
+import ReactFlow, { Controls, addEdge, Position, Connection, useNodesState, useEdgesState } from 'reactflow';
-  Controls,
-  addEdge,
-  Position,
-  Connection,
-  useNodesState,
-  useEdgesState,
-  NodeChange,
-} from 'reactflow';
 
 import CustomNode from './CustomNode';
 
@@ -41,7 +33,7 @@ const initialNodes = [
 ];
 
 const CustomNodeFlow = () => {
-  const [nodes, setNodes, _onNodesChange] = useNodesState(initialNodes);
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
   const onConnect = useCallback(
@@ -49,13 +41,6 @@ const CustomNodeFlow = () => {
     [setEdges]
   );
 
-  const onNodesChange = useCallback(
-    (changes: NodeChange[]) => {
-      _onNodesChange(changes);
-    },
-    [_onNodesChange]
-  );
-
   return (
     <ReactFlow
       nodes={nodes}
@@ -67,6 +52,7 @@ const CustomNodeFlow = () => {
       fitView
       minZoom={0.3}
       maxZoom={2}
+      snapToGrid
     >
       <Controls />
     </ReactFlow>

packages/node-resizer/package.json

@@ -38,7 +38,7 @@
   "dependencies": {
     "@babel/runtime": "^7.18.9",
     "@reactflow/core": "workspace:*",
-    "classcat": "^5.0.3",
+    "classcat": "^5.0.4",
     "d3-drag": "^3.0.0",
     "d3-selection": "^3.0.0",
     "zustand": "^4.1.1"

packages/node-resizer/src/NodeResizer.tsx

@@ -1,7 +1,14 @@
 import { useRef, useEffect } from 'react';
+import cc from 'classcat';
 import { drag } from 'd3-drag';
 import { select } from 'd3-selection';
-import { useStoreApi, useGetPointerPosition } from '@reactflow/core';
+import {
+  useStoreApi,
+  useGetPointerPosition,
+  NodeChange,
+  NodePositionChange,
+  NodeDimensionChange,
+} from '@reactflow/core';
 import type { Dimensions, Node, XYPosition } from '@reactflow/core';
 import type { D3DragEvent, SubjectPosition } from 'd3';
 
@@ -17,6 +24,7 @@ type ResizeHandleProps = {
   enableY?: boolean;
   top?: number | string;
   left?: number | string;
+  className?: string;
 };
 
 type ResizeDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>;
@@ -29,6 +37,7 @@ function ResizeHandle({
   enableX = false,
   enableY = false,
   nodeId,
+  className,
 }: ResizeHandleProps) {
   const store = useStoreApi();
   const resizeHandleRef = useRef<HTMLDivElement>(null);
@@ -65,12 +74,13 @@ function ResizeHandle({
         nodeElementRef.current = document.querySelector(`.react-flow__node[data-id="${nodeId}"]`) as HTMLDivElement;
       })
       .on('drag', (event: ResizeDragEvent) => {
-        const { updateNodePositions, nodeInternals } = store.getState();
+        const { updateNodePositions, nodeInternals, onNodesChange } = store.getState();
         const pointerPos = getPointerPosition(event);
         const nodeEl = nodeElementRef.current;
         const node = nodeInternals.get(nodeId);
 
         if (nodeEl && node) {
+          const changes: NodeChange[] = [];
           const distX = enableX ? pointerPos.xSnapped - initialDimensionsRef.current.x : 0;
           const distY = enableY ? pointerPos.ySnapped - initialDimensionsRef.current.y : 0;
           const width = initialDimensionsRef.current.width + (invertX ? -distX : distX);
@@ -81,7 +91,7 @@ function ResizeHandle({
             const y = invertY ? initialDimensionsRef.current.nodeY + distY : initialDimensionsRef.current.nodeY;
 
             if (x !== node.position.x || y !== node.position.y) {
-              updateNodePositions(
+              const positionChanges: NodePositionChange[] | null = updateNodePositions(
                 [
                   {
                     id: nodeId,
@@ -89,16 +99,31 @@ function ResizeHandle({
                   } as Node,
                 ],
                 true,
+                false,
                 false
               );
+
+              if (positionChanges?.length) {
+                changes.push(positionChanges[0]);
+              }
             }
           }
 
-          if (width !== node.width) {
+          if (width !== node.width || height !== node.height) {
-            nodeEl.style.width = `${width}px`;
+            const dimensionChange: NodeDimensionChange = {
+              id: nodeId,
+              type: 'dimensions',
+              updateStyle: true,
+              dimensions: {
+                width: width !== node.width ? width : node.width,
+                height: height !== node.height ? height : node.height,
+              },
+            };
+            changes.push(dimensionChange);
           }
-          if (height !== node.height) {
+
-            nodeEl.style.height = `${height}px`;
+          if (changes.length) {
+            onNodesChange?.(changes);
           }
         }
       });
@@ -112,7 +137,7 @@ function ResizeHandle({
 
   return (
     <div
-      className="nodrag"
+      className={cc([className, 'nodrag'])}
       ref={resizeHandleRef}
       style={{
         position: 'absolute',
@@ -132,14 +157,23 @@ function ResizeHandle({
 export default function NodeResizer({ nodeId }: NodeResizerProps) {
   return (
     <>
-      <ResizeHandle nodeId={nodeId} top={0} left={0} enableX enableY invertX invertY />
+      <ResizeHandle
-      <ResizeHandle nodeId={nodeId} top="50%" left={0} enableX invertX />
+        className="react-flow__node-resizer"
-      <ResizeHandle nodeId={nodeId} top="100%" left={0} enableX enableY />
+        nodeId={nodeId}
-      <ResizeHandle nodeId={nodeId} top={0} left="50%" enableY invertY />
+        top={0}
-      <ResizeHandle nodeId={nodeId} top={0} left="100%" enableX enableY invertY />
+        left={0}
-      <ResizeHandle nodeId={nodeId} top="50%" left="100%" enableX />
+        enableX
-      <ResizeHandle nodeId={nodeId} top="100%" left="100%" enableX enableY />
+        enableY
-      <ResizeHandle nodeId={nodeId} top="100%" left="50%" enableY />
+        invertX
+        invertY
+      />
+      <ResizeHandle className="react-flow__node-resizer" nodeId={nodeId} top="50%" left={0} enableX invertX />
+      <ResizeHandle className="react-flow__node-resizer" nodeId={nodeId} top="100%" left={0} enableX enableY />
+      <ResizeHandle className="react-flow__node-resizer" nodeId={nodeId} top={0} left="50%" enableY invertY />
+      <ResizeHandle className="react-flow__node-resizer" nodeId={nodeId} top={0} left="100%" enableX enableY invertY />
+      <ResizeHandle className="react-flow__node-resizer" nodeId={nodeId} top="50%" left="100%" enableX />
+      <ResizeHandle className="react-flow__node-resizer" nodeId={nodeId} top="100%" left="100%" enableX enableY />
+      <ResizeHandle className="react-flow__node-resizer" nodeId={nodeId} top="100%" left="50%" enableY />
     </>
   );
 }

pnpm-lock.yaml

@@ -230,7 +230,7 @@ importers:
       '@types/node': ^18.7.16
       '@types/react': ^18.0.19
       '@types/react-dom': ^18.0.6
-      classcat: ^5.0.3
+      classcat: ^5.0.4
       d3-drag: ^3.0.0
       d3-selection: ^3.0.0
       react: ^18.2.0