From e56e6a9a6b02a3511904b34e780fcf179e52b782 Mon Sep 17 00:00:00 2001
From: Peter <p.korcsak@googlemail.com>
Date: Tue, 26 Sep 2023 10:20:13 +0200
Subject: [PATCH 1/2] fix(svelte) only updated defaultEdgeOptions once on Mount

---
 examples/svelte/src/routes/overview/+page.svelte            | 2 +-
 .../src/lib/container/EdgeRenderer/EdgeRenderer.svelte      | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/examples/svelte/src/routes/overview/+page.svelte b/examples/svelte/src/routes/overview/+page.svelte
index 0ba5e4da..2056c619 100644
--- a/examples/svelte/src/routes/overview/+page.svelte
+++ b/examples/svelte/src/routes/overview/+page.svelte
@@ -162,7 +162,7 @@
 	autoPanOnConnect
 	autoPanOnNodeDrag
 	defaultEdgeOptions={{
-		hidden: false
+		// animated: true
 	}}
 >
 	<Controls />
diff --git a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
index 19f6848d..babac217 100644
--- a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
+++ b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
@@ -3,6 +3,7 @@
   import { MarkerDefinition } from '$lib/container/EdgeRenderer/MarkerDefinition';
   import { useStore } from '$lib/store';
   import type { DefaultEdgeOptions } from '$lib/types';
+  import { onMount } from 'svelte';
 
   export let defaultOptions: DefaultEdgeOptions | undefined;
 
@@ -14,7 +15,9 @@
     edges: { setDefaultOptions }
   } = useStore();
 
-  $: if (defaultOptions) setDefaultOptions(defaultOptions);
+  onMount(() => {
+    if (defaultOptions) setDefaultOptions(defaultOptions);
+  });
 </script>
 
 {#each $edgeTree as group (group.level)}
@@ -27,7 +30,6 @@
           edge.selectable ||
           ($elementsSelectable && typeof edge.selectable === 'undefined')
         )}
-
         <EdgeWrapper {...edge} type={edgeType} {selectable} on:edgeclick />
       {/each}
     </g>

From 5d742b4d9c27c7809df734b0d06fc9c981e15626 Mon Sep 17 00:00:00 2001
From: Peter <p.korcsak@googlemail.com>
Date: Tue, 26 Sep 2023 10:57:02 +0200
Subject: [PATCH 2/2] pull request review

---
 examples/svelte/src/routes/overview/+page.svelte            | 3 ---
 .../src/lib/container/EdgeRenderer/EdgeRenderer.svelte      | 6 +++---
 .../svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte   | 2 +-
 3 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/examples/svelte/src/routes/overview/+page.svelte b/examples/svelte/src/routes/overview/+page.svelte
index 2056c619..05bc506b 100644
--- a/examples/svelte/src/routes/overview/+page.svelte
+++ b/examples/svelte/src/routes/overview/+page.svelte
@@ -161,9 +161,6 @@
 	}}
 	autoPanOnConnect
 	autoPanOnNodeDrag
-	defaultEdgeOptions={{
-		// animated: true
-	}}
 >
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />
diff --git a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
index babac217..d9c8602c 100644
--- a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
+++ b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
   import { EdgeWrapper } from '$lib/components/EdgeWrapper';
   import { MarkerDefinition } from '$lib/container/EdgeRenderer/MarkerDefinition';
   import { useStore } from '$lib/store';
   import type { DefaultEdgeOptions } from '$lib/types';
-  import { onMount } from 'svelte';
 
-  export let defaultOptions: DefaultEdgeOptions | undefined;
+  export let defaultEdgeOptions: DefaultEdgeOptions | undefined;
 
   const {
     width,
@@ -16,7 +16,7 @@
   } = useStore();
 
   onMount(() => {
-    if (defaultOptions) setDefaultOptions(defaultOptions);
+    if (defaultEdgeOptions) setDefaultOptions(defaultEdgeOptions);
   });
 </script>
 
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index cec7597d..6a7c416b 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -150,7 +150,7 @@
   >
     <Pane on:paneclick panOnDrag={panOnDrag === undefined ? true : panOnDrag}>
       <ViewportComponent>
-        <EdgeRenderer on:edgeclick defaultOptions={defaultEdgeOptions} />
+        <EdgeRenderer on:edgeclick {defaultEdgeOptions} />
         <ConnectionLine />
         <div class="svelte-flow__edgelabel-renderer" />
         <NodeRenderer