diff --git a/.changeset/lucky-shoes-design.md b/.changeset/lucky-shoes-design.md
new file mode 100644
index 00000000..61e1039c
--- /dev/null
+++ b/.changeset/lucky-shoes-design.md
@@ -0,0 +1,5 @@
+---
+'@xyflow/svelte': minor
+---
+
+Add resizeDirection prop to ResizeControls
diff --git a/examples/svelte/src/routes/examples/node-resizer/+page.svelte b/examples/svelte/src/routes/examples/node-resizer/+page.svelte
index 8a5ec2ae..c3311337 100644
--- a/examples/svelte/src/routes/examples/node-resizer/+page.svelte
+++ b/examples/svelte/src/routes/examples/node-resizer/+page.svelte
@@ -5,6 +5,7 @@
import CustomResizer from './CustomResizer.svelte';
import VerticalResizer from './VerticalResizer.svelte';
import HorizontalResizer from './HorizontalResizer.svelte';
+ import BottomRightResizer from './BottomRightResizer.svelte';
import '@xyflow/svelte/dist/style.css';
import type { ResizeNode } from './types';
@@ -13,7 +14,8 @@
defaultResizer: DefaultResizer,
customResizer: CustomResizer,
verticalResizer: VerticalResizer,
- horizontalResizer: HorizontalResizer
+ horizontalResizer: HorizontalResizer,
+ bottomRightResizer: BottomRightResizer
};
const nodeStyle = 'border: 1px solid #222; font-size: 10px; background-color: #ddd;';
@@ -124,6 +126,13 @@
position: { x: 100, y: 100 },
parentId: '5',
style: nodeStyle
+ },
+ {
+ id: '6',
+ type: 'bottomRightResizer',
+ data: { label: 'bottom-right horizontal resizer' },
+ position: { x: 500, y: 0 },
+ style: nodeStyle
}
]);
diff --git a/examples/svelte/src/routes/examples/node-resizer/BottomRightResizer.svelte b/examples/svelte/src/routes/examples/node-resizer/BottomRightResizer.svelte
new file mode 100644
index 00000000..b02cc1b5
--- /dev/null
+++ b/examples/svelte/src/routes/examples/node-resizer/BottomRightResizer.svelte
@@ -0,0 +1,25 @@
+
+
+
+
+
{data.label}
+
diff --git a/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte b/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte
index b9f38214..245f9cf8 100644
--- a/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte
+++ b/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte
@@ -22,6 +22,7 @@
maxWidth = Number.MAX_VALUE,
maxHeight = Number.MAX_VALUE,
keepAspectRatio = false,
+ resizeDirection,
autoScale = true,
shouldResize,
onResizeStart,
@@ -78,15 +79,18 @@
store.nodes = store.nodes.map((node) => {
const change = changes.get(node.id);
+ const horizontal = !resizeDirection || resizeDirection === 'horizontal';
+ const vertical = !resizeDirection || resizeDirection === 'vertical';
+
if (change) {
return {
...node,
position: {
- x: change.position?.x ?? node.position.x,
- y: change.position?.y ?? node.position.y
+ x: horizontal ? (change.position?.x ?? node.position.x) : node.position.x,
+ y: vertical ? (change.position?.y ?? node.position.y) : node.position.y
},
- width: change.width ?? node.width,
- height: change.height ?? node.height
+ width: horizontal ? (change.width ?? node.width) : node.width,
+ height: vertical ? (change.height ?? node.height) : node.height
};
}
return node;
@@ -109,6 +113,7 @@
maxHeight
},
keepAspectRatio: !!keepAspectRatio,
+ resizeDirection,
onResizeStart,
onResize,
onResizeEnd,
diff --git a/packages/svelte/src/lib/plugins/NodeResizer/types.ts b/packages/svelte/src/lib/plugins/NodeResizer/types.ts
index 5f9bb95e..cae8d7b8 100644
--- a/packages/svelte/src/lib/plugins/NodeResizer/types.ts
+++ b/packages/svelte/src/lib/plugins/NodeResizer/types.ts
@@ -3,6 +3,7 @@ import type { HTMLAttributes } from 'svelte/elements';
import type {
ControlPosition,
ResizeControlVariant,
+ ResizeControlDirection,
ShouldResize,
OnResizeStart,
OnResize,
@@ -46,6 +47,8 @@ export type NodeResizerProps = {
onResize?: OnResize;
/** Callback called when resizing ends */
onResizeEnd?: OnResizeEnd;
+ /** The direction the user can resize the node */
+ resizeDirection?: ResizeControlDirection;
} & HTMLAttributes;
export type ResizeControlProps = Pick<
@@ -62,6 +65,7 @@ export type ResizeControlProps = Pick<
| 'onResizeStart'
| 'onResize'
| 'onResizeEnd'
+ | 'resizeDirection'
> & {
/** Position of control
* @example ControlPosition.TopLeft, ControlPosition.TopRight,