feat(resizer): add resize event handlers

2022-12-07 16:30:01 +01:00
parent 5e916ba2db
commit 4c2acf5aa1
4 changed files with 53 additions and 9 deletions
@@ -1,13 +1,32 @@
 import { memo, FC } from 'react';
 import { Handle, Position, NodeProps } from 'reactflow';

-import { NodeResizer } from '@reactflow/node-resizer';
+import { NodeResizer, ResizeDragEvent, ResizeEventParams } from '@reactflow/node-resizer';
 import '@reactflow/node-resizer/dist/style.css';

+const onResizeStart = (_: ResizeDragEvent, params: ResizeEventParams) => {
+  console.log('resize start', params);
+};
+
+const onResize = (_: ResizeDragEvent, params: ResizeEventParams) => {
+  console.log('resize', params);
+};
+
+const onResizeEnd = (_: ResizeDragEvent, params: ResizeEventParams) => {
+  console.log('resize end', params);
+};
+
 const CustomNode: FC<NodeProps> = ({ data, selected }) => {
  return (
    <>
-      <NodeResizer minWidth={100} minHeight={100} isVisible={selected} />
+      <NodeResizer
+        minWidth={100}
+        minHeight={100}
+        isVisible={selected}
+        onResizeStart={onResizeStart}
+        onResize={onResize}
+        onResizeEnd={onResizeEnd}
+      />
      <Handle type="target" position={Position.Left} />
      <div>{data.label}</div>
      <Handle type="source" position={Position.Right} />