From 8f934d7793f97a6cf6a45f159c8caf1fa3dffbc7 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Mon, 29 Sep 2025 18:02:18 +0200
Subject: [PATCH] switch keep aspect on shortcut

---
 .../src/routes/examples/node-resizer/+page.svelte  | 10 ++++++++++
 .../examples/node-resizer/CustomResizer.svelte     |  3 ++-
 .../examples/node-resizer/DefaultResizer.svelte    |  4 +++-
 .../examples/node-resizer/HorizontalResizer.svelte |  3 ++-
 .../examples/node-resizer/VerticalResizer.svelte   |  3 ++-
 .../routes/examples/node-resizer/store.svelte.ts   | 14 ++++++++++++++
 6 files changed, 33 insertions(+), 4 deletions(-)
 create mode 100644 examples/svelte/src/routes/examples/node-resizer/store.svelte.ts

diff --git a/examples/svelte/src/routes/examples/node-resizer/+page.svelte b/examples/svelte/src/routes/examples/node-resizer/+page.svelte
index 8a5ec2ae..008f76c7 100644
--- a/examples/svelte/src/routes/examples/node-resizer/+page.svelte
+++ b/examples/svelte/src/routes/examples/node-resizer/+page.svelte
@@ -8,6 +8,7 @@
 
 	import '@xyflow/svelte/dist/style.css';
 	import type { ResizeNode } from './types';
+	import { store } from './store.svelte';
 
 	const nodeTypes = {
 		defaultResizer: DefaultResizer,
@@ -130,6 +131,15 @@
 	let snapToGrid = $state(false);
 </script>
 
+<svelte:window
+	on:keydown={(e) => {
+		if (e.key === 'k') store.keepAspectRatio = true;
+	}}
+	on:keyup={(e) => {
+		if (e.key === 'k') store.keepAspectRatio = false;
+	}}
+/>
+
 <SvelteFlow
 	bind:nodes
 	bind:edges
diff --git a/examples/svelte/src/routes/examples/node-resizer/CustomResizer.svelte b/examples/svelte/src/routes/examples/node-resizer/CustomResizer.svelte
index 464274ec..15cf8b22 100644
--- a/examples/svelte/src/routes/examples/node-resizer/CustomResizer.svelte
+++ b/examples/svelte/src/routes/examples/node-resizer/CustomResizer.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Handle, Position, type NodeProps, NodeResizeControl, type Node } from '@xyflow/svelte';
 	import type { ResizeNode } from './types';
+	import { store } from './store.svelte';
 
 	let { data }: NodeProps<ResizeNode> = $props();
 </script>
@@ -14,7 +15,7 @@
 	onResizeStart={data.onResizeStart ?? undefined}
 	onResize={data.onResize ?? undefined}
 	onResizeEnd={data.onResizeEnd ?? undefined}
-	keepAspectRatio={data.keepAspectRatio ?? undefined}
+	keepAspectRatio={store.keepAspectRatio || (data.keepAspectRatio ?? undefined)}
 	style="background: transparent; border: none;"
 >
 	<svg
diff --git a/examples/svelte/src/routes/examples/node-resizer/DefaultResizer.svelte b/examples/svelte/src/routes/examples/node-resizer/DefaultResizer.svelte
index 8912f965..b4c2c5f1 100644
--- a/examples/svelte/src/routes/examples/node-resizer/DefaultResizer.svelte
+++ b/examples/svelte/src/routes/examples/node-resizer/DefaultResizer.svelte
@@ -2,6 +2,8 @@
 	import { Handle, NodeResizer, Position, type NodeProps } from '@xyflow/svelte';
 	import type { ResizeNode } from './types';
 
+	import { store } from './store.svelte';
+
 	let { data, selected }: NodeProps<ResizeNode> = $props();
 </script>
 
@@ -15,7 +17,7 @@
 	onResizeStart={data.onResizeStart ?? undefined}
 	onResize={data.onResize ?? undefined}
 	onResizeEnd={data.onResizeEnd ?? undefined}
-	keepAspectRatio={data.keepAspectRatio ?? undefined}
+	keepAspectRatio={store.keepAspectRatio || (data.keepAspectRatio ?? undefined)}
 />
 <Handle type="target" position={Position.Left} />
 <div>{data.label}</div>
diff --git a/examples/svelte/src/routes/examples/node-resizer/HorizontalResizer.svelte b/examples/svelte/src/routes/examples/node-resizer/HorizontalResizer.svelte
index d9ec28ff..2727e4c7 100644
--- a/examples/svelte/src/routes/examples/node-resizer/HorizontalResizer.svelte
+++ b/examples/svelte/src/routes/examples/node-resizer/HorizontalResizer.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Handle, NodeResizeControl, Position, type NodeProps } from '@xyflow/svelte';
 	import type { ResizeNode } from './types';
+	import { store } from './store.svelte';
 
 	let { data }: NodeProps<ResizeNode> = $props();
 </script>
@@ -14,7 +15,7 @@
 	onResizeStart={data.onResizeStart ?? undefined}
 	onResize={data.onResize ?? undefined}
 	onResizeEnd={data.onResizeEnd ?? undefined}
-	keepAspectRatio={data.keepAspectRatio ?? undefined}
+	keepAspectRatio={store.keepAspectRatio || (data.keepAspectRatio ?? undefined)}
 	color="red"
 	position={Position.Left}
 />
diff --git a/examples/svelte/src/routes/examples/node-resizer/VerticalResizer.svelte b/examples/svelte/src/routes/examples/node-resizer/VerticalResizer.svelte
index fedfff50..eec2578b 100644
--- a/examples/svelte/src/routes/examples/node-resizer/VerticalResizer.svelte
+++ b/examples/svelte/src/routes/examples/node-resizer/VerticalResizer.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Handle, NodeResizeControl, Position, type NodeProps } from '@xyflow/svelte';
 	import type { ResizeNode } from './types';
+	import { store } from './store.svelte';
 
 	let { data }: NodeProps<ResizeNode> = $props();
 </script>
@@ -14,7 +15,7 @@
 	onResizeStart={data.onResizeStart ?? undefined}
 	onResize={data.onResize ?? undefined}
 	onResizeEnd={data.onResizeEnd ?? undefined}
-	keepAspectRatio={data.keepAspectRatio ?? undefined}
+	keepAspectRatio={store.keepAspectRatio || (data.keepAspectRatio ?? undefined)}
 	color="red"
 	position={Position.Top}
 />
diff --git a/examples/svelte/src/routes/examples/node-resizer/store.svelte.ts b/examples/svelte/src/routes/examples/node-resizer/store.svelte.ts
new file mode 100644
index 00000000..076582b2
--- /dev/null
+++ b/examples/svelte/src/routes/examples/node-resizer/store.svelte.ts
@@ -0,0 +1,14 @@
+function createStore() {
+	let keepAspectRatio = $state(false);
+
+	return {
+		get keepAspectRatio() {
+			return keepAspectRatio;
+		},
+		set keepAspectRatio(value: boolean) {
+			keepAspectRatio = value;
+		}
+	};
+}
+
+export const store = createStore();