Merge branch 'svelte-flow-default-edge-option' into svelte-flow-fit-view-options

examples/svelte/src/routes/overview/+page.svelte

@@ -169,9 +169,6 @@
 	}}
 	autoPanOnConnect
 	autoPanOnNodeDrag
-	defaultEdgeOptions={{
-		hidden: false
-	}}
 >
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />

packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte

@@ -1,10 +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';
 
-  export let defaultOptions: DefaultEdgeOptions | undefined;
+  export let defaultEdgeOptions: DefaultEdgeOptions | undefined;
 
   const {
     width,
@@ -14,7 +15,9 @@
     edges: { setDefaultOptions }
   } = useStore();
 
-  $: if (defaultOptions) setDefaultOptions(defaultOptions);
+  onMount(() => {
+    if (defaultEdgeOptions) setDefaultOptions(defaultEdgeOptions);
+  });
 </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>

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -155,7 +155,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