feat(svelte): add panActivationKey

2023-08-16 13:56:52 +02:00
parent ab30b1c958
commit a096efbcfe
19 changed files with 128 additions and 25 deletions
@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { writable } from 'svelte/store';
+  import {
+    SvelteFlow,
+    Controls,
+    Background,
+    BackgroundVariant,
+    SelectionMode
+  } from '../../lib/index';
+
+  const onPaneContextMenu = (e: any) => {
+    e.preventDefault();
+    console.log('context menu');
+  };
+
+  const panOnDrag = [1, 2];
+
+  const onMoveStart = (e: any) => console.log('move start', e);
+  const onMove = (e: any) => console.log('move', e);
+  const onMoveEnd = (e: any) => console.log('move end', e);
+
+  const nodes = writable([
+    {
+      id: '1',
+      type: 'input',
+      data: { label: 'Node 1' },
+      position: { x: 250, y: 5 },
+      className: 'light'
+    },
+    { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
+    { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
+    { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' }
+  ]);
+
+  const edges = writable([
+    { id: 'e1-2', source: '1', target: '2', animated: true },
+    { id: 'e1-3', source: '1', target: '3' }
+  ]);
+</script>
+
+<SvelteFlow
+  {nodes}
+  {edges}
+  fitView
+  selectionMode={SelectionMode.Partial}
+  panOnScroll
+  {panOnDrag}
+  {onMoveStart}
+  {onMove}
+  {onMoveEnd}
+>
+  <Controls />
+  <Background variant={BackgroundVariant.Dots} />
+</SvelteFlow>