feat(xy-resizer): add resize direction #2986

examples/react/src/examples/NodeResizer/BottomRightResizer.tsx

@@ -0,0 +1,21 @@
+import { memo, FC } from 'react';
+import { Handle, Position, NodeProps, NodeResizeControl, ResizeControlVariant } from '@xyflow/react';
+
+const CustomResizerNode: FC<NodeProps> = ({ data }) => {
+  return (
+    <>
+      <NodeResizeControl
+        variant={ResizeControlVariant.Handle}
+        position="bottom-right"
+        resizeDirection="horizontal"
+        minWidth={100}
+        maxWidth={500}
+      />
+      <Handle type="target" position={Position.Left} />
+      <div>{data.label}</div>
+      <Handle type="source" position={Position.Right} />
+    </>
+  );
+};
+
+export default memo(CustomResizerNode);

examples/react/src/examples/NodeResizer/index.tsx

@@ -15,12 +15,14 @@ import DefaultResizer from './DefaultResizer';
 import CustomResizer from './CustomResizer';
 import VerticalResizer from './VerticalResizer';
 import HorizontalResizer from './HorizontalResizer';
+import BottomRightResizer from './BottomRightResizer';
 
 const nodeTypes = {
   defaultResizer: DefaultResizer,
   customResizer: CustomResizer,
   verticalResizer: VerticalResizer,
   horizontalResizer: HorizontalResizer,
+  bottomRightResizer: BottomRightResizer,
 };
 
 const nodeStyle = {
@@ -166,6 +168,13 @@ const initialNodes: Node[] = [
     expandParent: true,
     style: { ...nodeStyle },
   },
+  {
+    id: '6',
+    type: 'bottomRightResizer',
+    data: { label: 'Bottom Right with horizontal direction' },
+    position: { x: 500, y: 500 },
+    style: { ...nodeStyle },
+  },
 ];
 
 const CustomNodeFlow = () => {