From edf4e3c4c6e8d2cbeaa56baf760c50d4efb4c253 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 15 May 2023 13:56:55 +0200
Subject: [PATCH] chore(examples): add edges

---
 .../example-components/Header/Header.svelte   |   1 +
 .../svelte/src/routes/customnode/+page.svelte |   6 +-
 packages/svelte/src/routes/edges/+page.svelte | 165 ++++++++++++++++++
 3 files changed, 169 insertions(+), 3 deletions(-)
 create mode 100644 packages/svelte/src/routes/edges/+page.svelte

diff --git a/packages/svelte/src/example-components/Header/Header.svelte b/packages/svelte/src/example-components/Header/Header.svelte
index 0894fc07..39f8a878 100644
--- a/packages/svelte/src/example-components/Header/Header.svelte
+++ b/packages/svelte/src/example-components/Header/Header.svelte
@@ -4,6 +4,7 @@
   const routes = [
     'customnode',
     'drag-n-drop',
+    'edges',
     'overview',
     'stress',
     'subflows',
diff --git a/packages/svelte/src/routes/customnode/+page.svelte b/packages/svelte/src/routes/customnode/+page.svelte
index 5224a809..6cad6815 100644
--- a/packages/svelte/src/routes/customnode/+page.svelte
+++ b/packages/svelte/src/routes/customnode/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-    import type { ChangeEventHandler } from 'svelte/elements';
-    import { writable } from 'svelte/store';
+  import type { ChangeEventHandler } from 'svelte/elements';
+  import { writable } from 'svelte/store';
   import SvelteFlow, {
     SvelteFlowProvider,
     Controls,
@@ -40,7 +40,7 @@
         };
       })
     );
-    }
+  };
 
   const nodes = createNodes([
   {
diff --git a/packages/svelte/src/routes/edges/+page.svelte b/packages/svelte/src/routes/edges/+page.svelte
new file mode 100644
index 00000000..e6eddc2b
--- /dev/null
+++ b/packages/svelte/src/routes/edges/+page.svelte
@@ -0,0 +1,165 @@
+<script lang="ts">
+  import SvelteFlow, {
+    SvelteFlowProvider,
+    Controls,
+    Background,
+    BackgroundVariant,
+    Minimap,
+    createNodes,
+    createEdges,
+    type NodeTypes,
+    MarkerType
+  } from '../../lib/index';
+
+  const nodes = createNodes([
+  {
+    id: '1',
+    type: 'input',
+    data: { label: 'Input 1' },
+    position: { x: 250, y: 0 },
+  },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 150, y: 100 } },
+  { id: '2a', data: { label: 'Node 2a' }, position: { x: 0, y: 180 } },
+  { id: '2b', data: { label: 'Node 2b' }, position: { x: -40, y: 300 } },
+  { id: '3', data: { label: 'Node 3' }, position: { x: 250, y: 200 } },
+  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 300 } },
+  { id: '3a', data: { label: 'Node 3a' }, position: { x: 150, y: 300 } },
+  { id: '5', data: { label: 'Node 5' }, position: { x: 250, y: 400 } },
+  {
+    id: '6',
+    type: 'output',
+    data: { label: 'Output 6' },
+    position: { x: 50, y: 550 },
+  },
+  {
+    id: '7',
+    type: 'output',
+    data: { label: 'Output 7' },
+    position: { x: 250, y: 550 },
+  },
+  {
+    id: '8',
+    type: 'output',
+    data: { label: 'Output 8' },
+    position: { x: 525, y: 600 },
+  },
+  {
+    id: '9',
+    type: 'output',
+    data: { label: 'Output 9' },
+    position: { x: 675, y: 500 },
+  },
+]);
+
+  const edges = createEdges([
+  {
+    id: 'e1-2',
+    source: '1',
+    target: '2',
+    label: 'bezier edge (default)',
+  },
+  {
+    id: 'e2-2a',
+    source: '2',
+    target: '2a',
+    type: 'smoothstep',
+    label: 'smoothstep edge',
+  },
+  {
+    id: 'e2a-2b',
+    source: '2a',
+    target: '2b',
+    type: 'simplebezier',
+    label: 'simple bezier edge',
+  },
+  { id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
+  {
+    id: 'e3-4',
+    source: '3',
+    target: '4',
+    type: 'straight',
+    label: 'straight edge',
+  },
+  {
+    id: 'e3-3a',
+    source: '3',
+    target: '3a',
+    type: 'straight',
+    label: 'label only edge',
+    style: 'stroke: none',
+  },
+  {
+    id: 'e3-5',
+    source: '4',
+    target: '5',
+    animated: true,
+    label: 'animated styled edge',
+    style: 'stroke: red',
+  },
+  {
+    id: 'e5-7',
+    source: '5',
+    target: '7',
+    label: 'label with styled bg',
+    //labelBgPadding: [8, 4],
+    // labelBgBorderRadius: 4,
+    // labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+    },
+  },
+  {
+    id: 'e5-8',
+    source: '5',
+    target: '8',
+    data: { text: 'custom edge' },
+  },
+  {
+    id: 'e5-9',
+    source: '5',
+    target: '9',
+    data: { text: 'custom edge 2' },
+  },
+  {
+    id: 'e5-6',
+    source: '5',
+    target: '6',
+    label: 'hi',
+    // labelStyle: 'fill: red; font-weight: 700',
+    style: 'stroke: #ffcc0',
+    markerEnd: {
+      type: MarkerType.Arrow,
+      color: '#FFCC00',
+      markerUnits: 'userSpaceOnUse',
+      width: 20,
+      height: 20,
+      strokeWidth: 2,
+    },
+    markerStart: {
+      type: MarkerType.ArrowClosed,
+      color: '#FFCC00',
+      orient: 'auto-start-reverse',
+      markerUnits: 'userSpaceOnUse',
+      width: 20,
+      height: 20,
+    },
+  },
+]);
+</script>
+
+<SvelteFlowProvider
+  {nodes}
+  {edges}
+>
+  <SvelteFlow
+    fitView
+  >
+    <Controls />
+    <Background variant={BackgroundVariant.Dots} />
+    <Minimap />
+  </SvelteFlow>
+</SvelteFlowProvider>
+
+<style>
+
+</style>