feat(resizer): batch changes

2022-12-01 20:28:47 +01:00
parent b511b15ef8
commit afce7a2fee
4 changed files with 55 additions and 35 deletions
--- a/examples/vite-app/src/examples/NodeResizer/index.tsx
+++ b/examples/vite-app/src/examples/NodeResizer/index.tsx
@@ -1,13 +1,5 @@
 import { useCallback } from 'react';
-import ReactFlow, {
-  Controls,
-  addEdge,
-  Position,
-  Connection,
-  useNodesState,
-  useEdgesState,
-  NodeChange,
-} from 'reactflow';
+import ReactFlow, { Controls, addEdge, Position, Connection, useNodesState, useEdgesState } 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>
--- a/packages/node-resizer/package.json
+++ b/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"
--- a/packages/node-resizer/src/NodeResizer.tsx
+++ b/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) {
-            nodeEl.style.width = `${width}px`;
+          if (width !== node.width || height !== node.height) {
+            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 nodeId={nodeId} top="50%" left={0} enableX invertX />
-      <ResizeHandle nodeId={nodeId} top="100%" left={0} enableX enableY />
-      <ResizeHandle nodeId={nodeId} top={0} left="50%" enableY invertY />
-      <ResizeHandle nodeId={nodeId} top={0} left="100%" enableX enableY invertY />
-      <ResizeHandle nodeId={nodeId} top="50%" left="100%" enableX />
-      <ResizeHandle nodeId={nodeId} top="100%" left="100%" enableX enableY />
-      <ResizeHandle nodeId={nodeId} top="100%" left="50%" enableY />
+      <ResizeHandle
+        className="react-flow__node-resizer"
+        nodeId={nodeId}
+        top={0}
+        left={0}
+        enableX
+        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 />
    </>
  );
 }
--- a/pnpm-lock.yaml
+++ b/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