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,