refactor(node-resizer): use package, update resize behaviour

examples/vite-app/package.json

@@ -13,6 +13,7 @@
     "test-e2e": "start-server-and-test 'pnpm serve' http-get://localhost:3000 'pnpm test-e2e-cypress'"
   },
   "dependencies": {
+    "@reactflow/node-resizer": "workspace:^0.0.0",
     "classcat": "^5.0.3",
     "dagre": "^0.8.5",
     "localforage": "^1.10.0",

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

@@ -20,6 +20,7 @@ import Intersection from '../examples/Intersection';
 import Layouting from '../examples/Layouting';
 import MultiFlows from '../examples/MultiFlows';
 import NestedNodes from '../examples/NestedNodes';
+import NodeResizer from '../examples/NodeResizer';
 import NodeTypeChange from '../examples/NodeTypeChange';
 import NodeTypesObjectChange from '../examples/NodeTypesObjectChange';
 import Overview from '../examples/Overview';
@@ -174,6 +175,11 @@ const routes: IRoute[] = [
     path: '/node-toolbar',
     component: NodeToolbar,
   },
+  {
+    name: 'NodeResizer',
+    path: '/node-resizer',
+    component: NodeResizer,
+  },
   {
     name: 'Overview',
     path: '/overview',

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

@@ -0,0 +1,18 @@
+import { memo, FC } from 'react';
+import { Handle, Position, NodeProps } from 'reactflow';
+
+import { NodeResizer } from '@reactflow/node-resizer';
+
+const ColorSelectorNode: FC<NodeProps> = ({ id, data }) => {
+  return (
+    <>
+      <Handle type="target" position={Position.Left} />
+      <div>{data.label}</div>
+      <Handle type="source" position={Position.Right} />
+
+      <NodeResizer nodeId={id} />
+    </>
+  );
+};
+
+export default memo(ColorSelectorNode);

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

@@ -0,0 +1,62 @@
+import { useCallback } from 'react';
+import ReactFlow, { Controls, addEdge, Position, Connection, useNodesState, useEdgesState } from 'reactflow';
+
+import CustomNode from './CustomNode';
+
+const nodeTypes = {
+  custom: CustomNode,
+};
+
+const initialEdges = [
+  {
+    id: 'e1-2',
+    source: '1',
+    target: '2',
+  },
+];
+
+const initialNodes = [
+  {
+    id: '1',
+    type: 'input',
+    data: { label: 'An input node' },
+    position: { x: 0, y: 0 },
+    sourcePosition: Position.Right,
+  },
+  {
+    id: '2',
+    type: 'custom',
+    data: { label: 'resize me!' },
+    position: { x: 250, y: 0 },
+    style: { padding: 10, border: '1px solid #222' },
+  },
+];
+
+const CustomNodeFlow = () => {
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+  const onConnect = useCallback(
+    (connection: Connection) => setEdges((eds) => addEdge({ ...connection }, eds)),
+    [setEdges]
+  );
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onConnect={onConnect}
+      nodeTypes={nodeTypes}
+      snapToGrid={true}
+      fitView
+      minZoom={0.3}
+      maxZoom={2}
+    >
+      <Controls />
+    </ReactFlow>
+  );
+};
+
+export default CustomNodeFlow;