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 nodeId={id} position="bottom" />
+      <NodeResizeControl color="red" position="top" />
+      <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"
-      stroke-linejoin="round"
+      strokeLinecap="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 ReactFlow, { Controls, addEdge, Position, Connection, useNodesState, useEdgesState } from 'reactflow';
+import { CSSProperties, useCallback, useState } from 'react';
+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={0.3}
-      maxZoom={2}
-      snapToGrid
+      minZoom={-5}
+      maxZoom={5}
+      snapToGrid={snapToGrid}
     >
       <Controls />
+      <Panel position="bottom-right">
+        <button onClick={() => setSnapToGrid(!snapToGrid)}>snapToGrid: {snapToGrid ? 'on' : 'off'}</button>
+      </Panel>
     </ReactFlow>
   );
 };