implemented resize direction for svelte

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} />