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); + { + if (e.key === 'k') store.keepAspectRatio = true; + }} + on:keyup={(e) => { + if (e.key === 'k') store.keepAspectRatio = false; + }} +/> + import { Handle, Position, type NodeProps, NodeResizeControl, type Node } from '@xyflow/svelte'; import type { ResizeNode } from './types'; + import { store } from './store.svelte'; let { data }: NodeProps = $props(); @@ -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;" > = $props(); @@ -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)} />
{data.label}
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 @@ @@ -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 @@ @@ -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();