refactor(resizer): export resize control, add line control, styling

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

@@ -0,0 +1,27 @@
+import { memo, FC, CSSProperties } from 'react';
+import { Handle, Position, NodeProps } from 'reactflow';
+
+import { NodeResizer, NodeResizeControl } from '@reactflow/node-resizer';
+import '@reactflow/node-resizer/dist/style.css';
+import ResizeIcon from './ResizeIcon';
+
+const controlStyle = {
+  background: 'transparent',
+  border: 'none',
+};
+
+const CustomNode: FC<NodeProps> = ({ id, data }) => {
+  return (
+    <>
+      <NodeResizeControl nodeId={id} style={controlStyle}>
+        <ResizeIcon />
+      </NodeResizeControl>
+
+      <Handle type="target" position={Position.Left} />
+      <div>{data.label}</div>
+      <Handle type="source" position={Position.Right} />
+    </>
+  );
+};
+
+export default memo(CustomNode);

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

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

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

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

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

@@ -0,0 +1,24 @@
+function ResizeIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="8"
+      height="8"
+      viewBox="0 0 24 24"
+      stroke-width="2"
+      stroke="currentColor"
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      style={{ position: 'absolute', right: 2, bottom: 2 }}
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <polyline points="16 20 20 20 20 16" />
+      <line x1="14" y1="14" x2="20" y2="20" />
+      <polyline points="8 4 4 4 4 8" />
+      <line x1="4" y1="4" x2="10" y2="10" />
+    </svg>
+  );
+}
+
+export default ResizeIcon;

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

@@ -1,10 +1,14 @@
 import { useCallback } from 'react';
 import ReactFlow, { Controls, addEdge, Position, Connection, useNodesState, useEdgesState } from 'reactflow';
 
-import CustomNode from './CustomNode';
+import NodeResizerNode from './NodeResizerNode';
+import CustomResizer from './CustomResizer';
+import CustomResizer2 from './CustomResizer2';
 
 const nodeTypes = {
-  custom: CustomNode,
+  resizer: NodeResizerNode,
+  customResizer: CustomResizer,
+  customResizer2: CustomResizer2,
 };
 
 const initialEdges = [
@@ -25,10 +29,24 @@ const initialNodes = [
   },
   {
     id: '2',
-    type: 'custom',
-    data: { label: 'resize me!' },
+    type: 'resizer',
+    data: { label: 'default resizer' },
     position: { x: 250, y: 0 },
-    style: { padding: 10, border: '1px solid #222' },
+    style: { padding: 10, 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 },
+  },
+  {
+    id: '4',
+    type: 'customResizer2',
+    data: { label: 'resize controls' },
+    position: { x: 100, y: 150 },
+    style: { padding: 10, border: '1px solid #222', fontSize: 10 },
   },
 ];