Merge pull request #5526 from xyflow/svelte-resize-direction

Svelte Flow: resizeDirection

.changeset/lucky-shoes-design.md

@@ -0,0 +1,5 @@
+---
+'@xyflow/svelte': minor
+---
+
+Add resizeDirection prop to ResizeControls

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
 		}
 	]);
 

examples/svelte/src/routes/examples/node-resizer/BottomRightResizer.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import {
+		Handle,
+		Position,
+		type NodeProps,
+		NodeResizeControl,
+		ResizeControlVariant
+	} from '@xyflow/svelte';
+	import type { ResizeNode } from './types';
+
+	let { data }: NodeProps<ResizeNode> = $props();
+</script>
+
+<NodeResizeControl
+	variant={ResizeControlVariant.Handle}
+	position="bottom-right"
+	resizeDirection="horizontal"
+	minWidth={100}
+	maxWidth={500}
+	color="orange"
+	autoScale={false}
+/>
+<Handle type="target" position={Position.Left} />
+<div>{data.label}</div>
+<Handle type="source" position={Position.Right} />

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,
+                  x: horizontal ? (change.position?.x ?? node.position.x) : node.position.x,
-                  y: change.position?.y ?? node.position.y
+                  y: vertical ? (change.position?.y ?? node.position.y) : node.position.y
                 },
-                width: change.width ?? node.width,
+                width: horizontal ? (change.width ?? node.width) : node.width,
-                height: change.height ?? node.height
+                height: vertical ? (change.height ?? node.height) : node.height
               };
             }
             return node;
@@ -109,6 +113,7 @@
         maxHeight
       },
       keepAspectRatio: !!keepAspectRatio,
+      resizeDirection,
       onResizeStart,
       onResize,
       onResizeEnd,

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<HTMLDivElement>;
 
 export type ResizeControlProps = Pick<
@@ -62,6 +65,7 @@ export type ResizeControlProps = Pick<
   | 'onResizeStart'
   | 'onResize'
   | 'onResizeEnd'
+  | 'resizeDirection'
 > & {
   /** Position of control
    * @example ControlPosition.TopLeft, ControlPosition.TopRight,