feat(svelte) add defaultEdgeOptions, closes #3437

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

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

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

@@ -2,8 +2,19 @@
   import { EdgeWrapper } from '$lib/components/EdgeWrapper';
   import { MarkerDefinition } from '$lib/container/EdgeRenderer/MarkerDefinition';
   import { useStore } from '$lib/store';
+  import type { DefaultEdgeOptions } from '$lib/types';
 
-  const { width, height, elementsSelectable, edgeTree } = useStore();
+  export let defaultOptions: DefaultEdgeOptions | undefined;
+
+  const {
+    width,
+    height,
+    elementsSelectable,
+    edgeTree,
+    edges: { setDefaultOptions }
+  } = useStore();
+
+  $: if (defaultOptions) setDefaultOptions(defaultOptions);
 </script>
 
 {#each $edgeTree as group (group.level)}

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

@@ -54,6 +54,7 @@
   export let autoPanOnConnect: $$Props['autoPanOnConnect'] = true;
   export let autoPanOnNodeDrag: $$Props['autoPanOnNodeDrag'] = true;
   export let onError: $$Props['onError'] = undefined;
+  export let defaultEdgeOptions: $$Props['defaultEdgeOptions'] = undefined;
 
   export let defaultMarkerColor = '#b1b1b7';
 
@@ -149,7 +150,7 @@
   >
     <Pane on:paneclick panOnDrag={panOnDrag === undefined ? true : panOnDrag}>
       <ViewportComponent>
-        <EdgeRenderer on:edgeclick />
+        <EdgeRenderer on:edgeclick defaultOptions={defaultEdgeOptions} />
         <ConnectionLine />
         <div class="svelte-flow__edgelabel-renderer" />
         <NodeRenderer

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

@@ -17,7 +17,14 @@ import type {
   OnError
 } from '@xyflow/system';
 
-import type { Edge, Node, NodeTypes, KeyDefinition, EdgeTypes } from '$lib/types';
+import type {
+  Edge,
+  Node,
+  NodeTypes,
+  KeyDefinition,
+  EdgeTypes,
+  DefaultEdgeOptions
+} from '$lib/types';
 import type { Writable } from 'svelte/store';
 
 export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
@@ -52,6 +59,7 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   onlyRenderVisibleElements?: boolean;
   autoPanOnConnect?: boolean;
   autoPanOnNodeDrag?: boolean;
+  defaultEdgeOptions?: DefaultEdgeOptions;
 
   class?: string;
   style?: string;