refactor(node-resizer): use nodeId from context, fix glitches while resizing

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

@@ -13,7 +13,7 @@ const controlStyle = {
 const CustomNode: FC<NodeProps> = ({ id, data }) => {
   return (
     <>
-      <NodeResizeControl nodeId={id} style={controlStyle}>
+      <NodeResizeControl style={controlStyle}>
         <ResizeIcon />
       </NodeResizeControl>
 

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

@@ -7,10 +7,10 @@ import '@reactflow/node-resizer/dist/style.css';
 const CustomNode: FC<NodeProps> = ({ id, data }) => {
   return (
     <>
-      <NodeResizeControl nodeId={id} position="top" />
+      <NodeResizeControl color="red" position="top" />
-      <NodeResizeControl nodeId={id} position="bottom" />
+      <NodeResizeControl color="red" position="bottom" />
       <Handle type="target" position={Position.Left} />
-      <div>{data.label}</div>
+      <div style={{ padding: 10 }}>{data.label}</div>
       <Handle type="source" position={Position.Right} />
     </>
   );

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

@@ -4,10 +4,10 @@ import { Handle, Position, NodeProps } from 'reactflow';
 import { NodeResizer } from '@reactflow/node-resizer';
 import '@reactflow/node-resizer/dist/style.css';
 
-const CustomNode: FC<NodeProps> = ({ id, data }) => {
+const CustomNode: FC<NodeProps> = ({ id, data, selected }) => {
   return (
     <>
-      <NodeResizer nodeId={id} />
+      <NodeResizer isVisible={selected} />
       <Handle type="target" position={Position.Left} />
       <div>{data.label}</div>
       <Handle type="source" position={Position.Right} />

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

@@ -5,11 +5,11 @@ function ResizeIcon() {
       width="8"
       height="8"
       viewBox="0 0 24 24"
-      stroke-width="2"
+      strokeWidth="2"
       stroke="currentColor"
       fill="none"
-      stroke-linecap="round"
+      strokeLinecap="round"
-      stroke-linejoin="round"
+      strokeLinejoin="round"
       style={{ position: 'absolute', right: 2, bottom: 2 }}
     >
       <path stroke="none" d="M0 0h24v24H0z" fill="none" />

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

@@ -1,5 +1,5 @@
-import { useCallback } from 'react';
+import { CSSProperties, useCallback, useState } from 'react';
-import ReactFlow, { Controls, addEdge, Position, Connection, useNodesState, useEdgesState } from 'reactflow';
+import ReactFlow, { Controls, addEdge, Position, Connection, useNodesState, useEdgesState, Panel } from 'reactflow';
 
 import NodeResizerNode from './NodeResizerNode';
 import CustomResizer from './CustomResizer';
@@ -32,25 +32,40 @@ const initialNodes = [
     type: 'resizer',
     data: { label: 'default resizer' },
     position: { x: 250, y: 0 },
-    style: { padding: 10, border: '1px solid #222', fontSize: 10 },
+    style: {
+      width: 200,
+      height: 150,
+      border: '1px solid #222',
+      fontSize: 10,
+    },
   },
   {
     id: '3',
     type: 'customResizer',
     data: { label: 'resize control with child component' },
     position: { x: 250, y: 150 },
-    style: { padding: 10, border: '1px solid #222', fontSize: 10, width: 100 },
+    style: { border: '1px solid #222', fontSize: 10, width: 100 },
+    parentNode: '2',
   },
   {
     id: '4',
     type: 'customResizer2',
     data: { label: 'resize controls' },
     position: { x: 100, y: 150 },
-    style: { padding: 10, border: '1px solid #222', fontSize: 10 },
+    style: { border: '1px solid #222', fontSize: 10 },
+    parentNode: '2',
+  },
+  {
+    id: '5',
+    type: 'customResizer2',
+    data: { label: 'min width and height' },
+    position: { x: 100, y: 150 },
+    style: { border: '1px solid #222', fontSize: 10 },
   },
 ];
 
 const CustomNodeFlow = () => {
+  const [snapToGrid, setSnapToGrid] = useState(false);
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
@@ -67,12 +82,14 @@ const CustomNodeFlow = () => {
       onEdgesChange={onEdgesChange}
       onConnect={onConnect}
       nodeTypes={nodeTypes}
-      fitView
+      minZoom={-5}
-      minZoom={0.3}
+      maxZoom={5}
-      maxZoom={2}
+      snapToGrid={snapToGrid}
-      snapToGrid
     >
       <Controls />
+      <Panel position="bottom-right">
+        <button onClick={() => setSnapToGrid(!snapToGrid)}>snapToGrid: {snapToGrid ? 'on' : 'off'}</button>
+      </Panel>
     </ReactFlow>
   );
 };

packages/core/src/components/Handle/index.tsx

@@ -1,9 +1,9 @@
-import { memo, useContext, HTMLAttributes, forwardRef, MouseEvent as ReactMouseEvent } from 'react';
+import { memo, HTMLAttributes, forwardRef, MouseEvent as ReactMouseEvent } from 'react';
 import cc from 'classcat';
 import shallow from 'zustand/shallow';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
-import NodeIdContext from '../../contexts/NodeIdContext';
+import { useNodeId } from '../../contexts/NodeIdContext';
 import { checkElementBelowIsValid, handleMouseDown } from './handler';
 import { getHostForElement } from '../../utils';
 import { addEdge } from '../../utils/graph';
@@ -37,7 +37,9 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
     ref
   ) => {
     const store = useStoreApi();
-    const nodeId = useContext(NodeIdContext) as string;
+
+    // @fixme: remove type assertion and handle nodeId === null
+    const nodeId = useNodeId() as string;
     const { connectionStartHandle, connectOnClick, noPanClassName } = useStore(selector, shallow);
 
     const handleId = id || null;

packages/core/src/contexts/NodeIdContext.ts

@@ -1,7 +1,12 @@
-import { createContext } from 'react';
+import { createContext, useContext } from 'react';
 
 export const NodeIdContext = createContext<string | null>(null);
 export const Provider = NodeIdContext.Provider;
 export const Consumer = NodeIdContext.Consumer;
 
+export const useNodeId = (): string | null => {
+  const nodeId = useContext(NodeIdContext);
+  return nodeId;
+};
+
 export default NodeIdContext;

packages/core/src/index.ts

@@ -22,7 +22,6 @@ export {
   getNodePositionWithOrigin,
 } from './utils/graph';
 export { applyNodeChanges, applyEdgeChanges } from './utils/changes';
-export { createNodeInternals } from './store/utils';
 export { getMarkerEnd } from './components/Edges/utils';
 export { default as ReactFlowProvider } from './components/ReactFlowProvider';
 export { default as Panel } from './components/Panel';
@@ -40,5 +39,6 @@ export { default as useOnViewportChange } from './hooks/useOnViewportChange';
 export { default as useOnSelectionChange } from './hooks/useOnSelectionChange';
 export { default as useNodesInitialized } from './hooks/useNodesInitialized';
 export { default as useGetPointerPosition } from './hooks/useGetPointerPosition';
+export { useNodeId } from './contexts/NodeIdContext';
 
 export * from './types';

packages/core/src/store/index.ts

@@ -17,6 +17,7 @@ import type {
   NodePositionChange,
   NodeDragItem,
   UnselectNodesAndEdgesParams,
+  NodeChange,
 } from '../types';
 
 const createRFStore = () =>
@@ -102,47 +103,41 @@ const createRFStore = () =>
         onNodesChange?.(changes);
       }
     },
-    updateNodePositions: (
+    updateNodePositions: (nodeDragItems: NodeDragItem[] | Node[], positionChanged = true, dragging = false) => {
-      nodeDragItems: NodeDragItem[] | Node[],
+      const { triggerNodeChanges } = get();
-      positionChanged = true,
-      dragging = false,
-      applyChanges = true
-    ) => {
-      const { onNodesChange, nodeInternals, hasDefaultNodes, nodeOrigin } = get();
 
-      if (hasDefaultNodes || onNodesChange) {
+      const changes = nodeDragItems.map((node) => {
-        const changes = nodeDragItems.map((node) => {
+        const change: NodePositionChange = {
-          const change: NodePositionChange = {
+          id: node.id,
-            id: node.id,
+          type: 'position',
-            type: 'position',
+          dragging,
-            dragging,
+        };
-          };
 
-          if (positionChanged) {
+        if (positionChanged) {
-            change.positionAbsolute = node.positionAbsolute;
+          change.positionAbsolute = node.positionAbsolute;
-            change.position = node.position;
+          change.position = node.position;
-          }
-
-          return change;
-        });
-
-        if (changes?.length) {
-          if (hasDefaultNodes) {
-            const nodes = applyNodeChanges(changes, Array.from(nodeInternals.values()));
-            const nextNodeInternals = createNodeInternals(nodes, nodeInternals, nodeOrigin);
-            set({ nodeInternals: nextNodeInternals });
-          }
-
-          if (applyChanges) {
-            onNodesChange?.(changes);
-          }
         }
 
-        return changes;
+        return change;
-      }
+      });
 
-      return null;
+      triggerNodeChanges(changes);
     },
+
+    triggerNodeChanges: (changes: NodeChange[]) => {
+      const { onNodesChange, nodeInternals, hasDefaultNodes, nodeOrigin } = get();
+
+      if (changes?.length) {
+        if (hasDefaultNodes) {
+          const nodes = applyNodeChanges(changes, Array.from(nodeInternals.values()));
+          const nextNodeInternals = createNodeInternals(nodes, nodeInternals, nodeOrigin);
+          set({ nodeInternals: nextNodeInternals });
+        }
+
+        onNodesChange?.(changes);
+      }
+    },
+
     addSelectedNodes: (selectedNodeIds: string[]) => {
       const { multiSelectionActive, nodeInternals, edges } = get();
       let changedNodes: NodeSelectionChange[];

packages/core/src/types/changes.ts

@@ -7,8 +7,9 @@ import type { Edge } from './edges';
 export type NodeDimensionChange = {
   id: string;
   type: 'dimensions';
-  dimensions: Dimensions;
+  dimensions?: Dimensions;
   updateStyle?: boolean;
+  resizing?: boolean;
 };
 
 export type NodePositionChange = {

packages/core/src/types/general.ts

@@ -215,12 +215,7 @@ export type ReactFlowActions = {
   setEdges: (edges: Edge[]) => void;
   setDefaultNodesAndEdges: (nodes?: Node[], edges?: Edge[]) => void;
   updateNodeDimensions: (updates: NodeDimensionUpdate[]) => void;
-  updateNodePositions: (
+  updateNodePositions: (nodeDragItems: NodeDragItem[] | Node[], positionChanged: boolean, dragging: boolean) => void;
-    nodeDragItems: NodeDragItem[] | Node[],
-    positionChanged: boolean,
-    dragging: boolean,
-    applyChanges?: boolean
-  ) => NodePositionChange[] | null;
   resetSelectedElements: () => void;
   unselectNodesAndEdges: (params?: UnselectNodesAndEdgesParams) => void;
   addSelectedNodes: (nodeIds: string[]) => void;
@@ -231,6 +226,7 @@ export type ReactFlowActions = {
   setNodeExtent: (nodeExtent: CoordinateExtent) => void;
   cancelConnection: () => void;
   reset: () => void;
+  triggerNodeChanges: (changes: NodeChange[]) => void;
 };
 
 export type ReactFlowState = ReactFlowStore & ReactFlowActions;

packages/core/src/types/nodes.ts

@@ -31,6 +31,7 @@ export type Node<T = any> = {
   positionAbsolute?: XYPosition;
   ariaLabel?: string;
   focusable?: boolean;
+  resizing?: boolean;
 
   // only used internally
   [internalsSymbol]?: {

packages/core/src/utils/changes.ts

@@ -94,6 +94,10 @@ function applyChanges(changes: any[], elements: any[]): any[] {
               updateItem.style = { ...(updateItem.style || {}), ...currentChange.dimensions };
             }
 
+            if (typeof currentChange.resizing === 'boolean') {
+              updateItem.resizing = currentChange.resizing;
+            }
+
             if (updateItem.expandParent) {
               handleParentExpand(res, updateItem);
             }

packages/node-resizer/src/NodeResizer.tsx

@@ -6,11 +6,17 @@ const lineControls: ControlLinePosition[] = ['top', 'right', 'bottom', 'left'];
 
 export default function NodeResizer({
   nodeId,
+  isVisible = true,
   handleClassName,
   handleStyle,
   lineClassName,
   lineStyle,
+  color,
 }: NodeResizerProps) {
+  if (!isVisible) {
+    return null;
+  }
+
   return (
     <>
       {lineControls.map((c) => (
@@ -21,10 +27,18 @@ export default function NodeResizer({
           nodeId={nodeId}
           position={c}
           variant={ResizeControlVariant.Line}
+          color={color}
         />
       ))}
       {handleControls.map((c) => (
-        <ResizeControl key={c} className={handleClassName} style={handleStyle} nodeId={nodeId} position={c} />
+        <ResizeControl
+          key={c}
+          className={handleClassName}
+          style={handleStyle}
+          nodeId={nodeId}
+          position={c}
+          color={color}
+        />
       ))}
     </>
   );

packages/node-resizer/src/ResizeControl.tsx

@@ -7,21 +7,26 @@ import {
   useGetPointerPosition,
   NodeChange,
   NodeDimensionChange,
-  applyNodeChanges,
+  useNodeId,
-  createNodeInternals,
+  NodePositionChange,
 } from '@reactflow/core';
-import type { Dimensions, Node, XYPosition } from '@reactflow/core';
+import type { Dimensions, XYPosition } from '@reactflow/core';
 
 import { ResizeDragEvent, ResizeControlProps, ResizeControlLineProps, ResizeControlVariant } from './types';
 
 function ResizeControl({
   nodeId,
-  position = 'bottom-right',
+  position,
   variant = ResizeControlVariant.Handle,
   className,
   style = {},
   children,
+  color,
+  minWidth = 1,
+  minHeight = 1,
 }: ResizeControlProps) {
+  const contextNodeId = useNodeId();
+  const id = typeof nodeId === 'string' ? nodeId : contextNodeId;
   const store = useStoreApi();
   const resizeControlRef = useRef<HTMLDivElement>(null);
   const startValues = useRef<Dimensions & XYPosition & { nodeX: number; nodeY: number }>({
@@ -32,17 +37,20 @@ function ResizeControl({
     nodeX: 0,
     nodeY: 0,
   });
+  const prevValues = useRef<Dimensions & XYPosition>({ width: 0, height: 0, x: 0, y: 0 });
   const getPointerPosition = useGetPointerPosition();
+  const defaultPosition = variant === ResizeControlVariant.Line ? 'right' : 'bottom-right';
+  const controlPosition = position ?? defaultPosition;
 
   useEffect(() => {
-    if (!resizeControlRef.current) {
+    if (!resizeControlRef.current || !id) {
       return;
     }
 
     const selection = select(resizeControlRef.current);
     const dragHandler = drag<HTMLDivElement, unknown>()
       .on('start', (event: ResizeDragEvent) => {
-        const node = store.getState().nodeInternals.get(nodeId);
+        const node = store.getState().nodeInternals.get(id);
         const { xSnapped, ySnapped } = getPointerPosition(event);
 
         startValues.current = {
@@ -53,15 +61,22 @@ function ResizeControl({
           x: xSnapped,
           y: ySnapped,
         };
+
+        prevValues.current = {
+          width: node?.width ?? 0,
+          height: node?.height ?? 0,
+          x: node?.position.x ?? 0,
+          y: node?.position.y ?? 0,
+        };
       })
       .on('drag', (event: ResizeDragEvent) => {
-        const { updateNodePositions, nodeInternals, onNodesChange, hasDefaultNodes, nodeOrigin } = store.getState();
+        const { nodeInternals, triggerNodeChanges } = store.getState();
         const { xSnapped, ySnapped } = getPointerPosition(event);
-        const node = nodeInternals.get(nodeId);
+        const node = nodeInternals.get(id);
-        const enableX = position.includes('right') || position.includes('left');
+        const enableX = controlPosition.includes('right') || controlPosition.includes('left');
-        const enableY = position.includes('bottom') || position.includes('top');
+        const enableY = controlPosition.includes('bottom') || controlPosition.includes('top');
-        const invertX = position.includes('left');
+        const invertX = controlPosition.includes('left');
-        const invertY = position.includes('top');
+        const invertY = controlPosition.includes('top');
 
         if (node) {
           const changes: NodeChange[] = [];
@@ -73,57 +88,70 @@ function ResizeControl({
             nodeX: startNodeX,
             nodeY: startNodeY,
           } = startValues.current;
-          const distX = enableX ? xSnapped - startX : 0;
+
-          const distY = enableY ? ySnapped - startY : 0;
+          const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues.current;
-          const width = startWidth + (invertX ? -distX : distX);
+
-          const height = startHeight + (invertY ? -distY : distY);
+          const distX = Math.floor(enableX ? xSnapped - startX : 0);
+          const distY = Math.floor(enableY ? ySnapped - startY : 0);
+          const width = Math.max(startWidth + (invertX ? -distX : distX), minWidth);
+          const height = Math.max(startHeight + (invertY ? -distY : distY), minHeight);
+
+          const isWidthChange = width !== prevWidth;
+          const isHeightChange = height !== prevHeight;
 
           if (invertX || invertY) {
-            const x = invertX ? startNodeX + distX : startNodeX;
+            const x = invertX ? startNodeX - (width - startWidth) : startNodeX;
-            const y = invertY ? startNodeY + distY : startNodeY;
+            const y = invertY ? startNodeY - (height - startHeight) : startNodeY;
 
-            if (x !== node.position.x || y !== node.position.y) {
+            // only transform the node if the width or height changes
-              const positionChanges = updateNodePositions(
+            const isXPosChange = x !== prevX && isWidthChange;
-                [
+            const isYPosChange = y !== prevY && isHeightChange;
-                  {
-                    id: nodeId,
-                    position: { x, y },
-                  } as Node,
-                ],
-                true,
-                false,
-                false
-              );
 
-              if (positionChanges?.length) {
+            if (isXPosChange || isYPosChange) {
-                changes.push(positionChanges[0]);
+              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;
             }
           }
 
-          if (width !== node.width || height !== node.height) {
+          if (isWidthChange || isHeightChange) {
             const dimensionChange: NodeDimensionChange = {
-              id: nodeId,
+              id: id,
               type: 'dimensions',
               updateStyle: true,
+              resizing: true,
               dimensions: {
-                width: width !== node.width ? width : node.width,
+                width: width,
-                height: height !== node.height ? height : node.height,
+                height: height,
               },
             };
             changes.push(dimensionChange);
+            prevValues.current.width = width;
+            prevValues.current.height = height;
           }
 
-          if (changes.length) {
+          triggerNodeChanges(changes);
-            if (hasDefaultNodes) {
-              const nodes = applyNodeChanges(changes, Array.from(nodeInternals.values()));
-              const nextNodeInternals = createNodeInternals(nodes, nodeInternals, nodeOrigin);
-              store.setState({ nodeInternals: nextNodeInternals });
-            }
-
-            onNodesChange?.(changes);
-          }
         }
+      })
+      .on('end', () => {
+        const { triggerNodeChanges } = store.getState();
+
+        const dimensionChange: NodeDimensionChange = {
+          id: id,
+          type: 'dimensions',
+          resizing: true,
+        };
+
+        triggerNodeChanges([dimensionChange]);
       });
 
     selection.call(dragHandler);
@@ -131,15 +159,17 @@ function ResizeControl({
     return () => {
       selection.on('.drag', null);
     };
-  }, [nodeId, position, getPointerPosition]);
+  }, [id, controlPosition, getPointerPosition]);
 
-  const positionClassNames = position?.split('-');
+  const positionClassNames = controlPosition.split('-');
+  const colorStyleProp = variant === ResizeControlVariant.Line ? 'borderColor' : 'backgroundColor';
+  const controlStyle = color ? { ...style, [colorStyleProp]: color } : style;
 
   return (
     <div
       className={cc(['react-flow__resize-control', 'nodrag', ...positionClassNames, variant, className])}
       ref={resizeControlRef}
-      style={style}
+      style={controlStyle}
     >
       {children}
     </div>

packages/node-resizer/src/style.css

@@ -1,9 +1,5 @@
 .react-flow__resize-control {
   position: absolute;
-  background-color: rgba(195, 195, 195, 1);
-  border: 1px solid white;
-  width: 4px;
-  height: 4px;
 }
 
 .react-flow__resize-control.left,
@@ -28,6 +24,11 @@
 
 /* handle styles */
 .react-flow__resize-control.handle {
+  width: 4px;
+  height: 4px;
+  border: 1px solid #fff;
+  border-radius: 1px;
+  background-color: #3367d9;
   transform: translate(-50%, -50%);
 }
 
@@ -62,9 +63,11 @@
 
 /* line styles */
 .react-flow__resize-control.line {
-  border: none;
+  border-color: #3367d9;
-  background: none;
+  border-width: 0;
+  border-style: solid;
 }
+
 .react-flow__resize-control.line.left,
 .react-flow__resize-control.line.right {
   width: 1px;
@@ -75,11 +78,11 @@
 
 .react-flow__resize-control.line.left {
   left: 0;
-  border-left: 1px solid rgba(195, 195, 195, 1);
+  border-left-width: 1px;
 }
 .react-flow__resize-control.line.right {
   left: 100%;
-  border-right: 1px solid rgba(195, 195, 195, 1);
+  border-right-width: 1px;
 }
 
 .react-flow__resize-control.line.top,
@@ -92,9 +95,9 @@
 
 .react-flow__resize-control.line.top {
   top: 0;
-  border-top: 1px solid rgba(195, 195, 195, 1);
+  border-top-width: 1px;
 }
 .react-flow__resize-control.line.bottom {
-  border-bottom: 1px solid rgba(195, 195, 195, 1);
+  border-bottom-width: 1px;
   top: 100%;
 }

packages/node-resizer/src/types.ts

@@ -2,11 +2,13 @@ import type { CSSProperties, ReactNode } from 'react';
 import type { D3DragEvent, SubjectPosition } from 'd3-drag';
 
 export type NodeResizerProps = {
-  nodeId: string;
+  nodeId?: string;
+  color?: string;
   handleClassName?: string;
   handleStyle?: CSSProperties;
   lineClassName?: string;
   lineStyle?: CSSProperties;
+  isVisible?: boolean;
 };
 
 export type ControlLinePosition = 'top' | 'bottom' | 'left' | 'right';
@@ -19,12 +21,15 @@ export enum ResizeControlVariant {
 }
 
 export type ResizeControlProps = {
-  nodeId: string;
+  nodeId?: string;
-  position: ControlPosition;
+  position?: ControlPosition;
   variant?: ResizeControlVariant;
+  color?: string;
   className?: string;
   style?: CSSProperties;
   children?: ReactNode;
+  minWidth?: number;
+  minHeight?: number;
 };
 
 export type ResizeControlLineProps = ResizeControlProps & {