Merge branch xyflow into svelte-flow-connection-line

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

@@ -1,9 +1,23 @@
 <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';
 
-  const { width, height, elementsSelectable, edgeTree } = useStore();
+  export let defaultEdgeOptions: DefaultEdgeOptions | undefined;
+
+  const {
+    width,
+    height,
+    elementsSelectable,
+    edgeTree,
+    edges: { setDefaultOptions }
+  } = useStore();
+
+  onMount(() => {
+    if (defaultEdgeOptions) setDefaultOptions(defaultEdgeOptions);
+  });
 </script>
 
 {#each $edgeTree as group (group.level)}

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

@@ -23,6 +23,7 @@
   export let nodes: $$Props['nodes'];
   export let edges: $$Props['edges'];
   export let fitView: $$Props['fitView'] = undefined;
+  export let fitViewOptions: $$Props['fitViewOptions'] = undefined;
   export let minZoom: $$Props['minZoom'] = undefined;
   export let maxZoom: $$Props['maxZoom'] = undefined;
   export let initialViewport: Viewport = { x: 0, y: 0, zoom: 1 };
@@ -59,6 +60,7 @@
   export let onError: $$Props['onError'] = undefined;
   export let attributionPosition: $$Props['attributionPosition'] = undefined;
   export let proOptions: $$Props['proOptions'] = undefined;
+  export let defaultEdgeOptions: $$Props['defaultEdgeOptions'] = undefined;
 
   export let defaultMarkerColor = '#b1b1b7';
 
@@ -83,6 +85,10 @@
       store.fitViewOnInit.set(fitView);
     }
 
+    if (fitViewOptions) {
+      store.fitViewOptions.set(fitViewOptions);
+    }
+
     updateStore(store, {
       nodeTypes,
       edgeTypes,
@@ -155,7 +161,7 @@
   >
     <Pane on:paneclick panOnDrag={panOnDrag === undefined ? true : panOnDrag}>
       <ViewportComponent>
-        <EdgeRenderer on:edgeclick on:edgecontextmenu />
+        <EdgeRenderer on:edgeclick on:edgecontextmenu {defaultEdgeOptions} />
         <ConnectionLine containerStyle={connectionLineContainerStyle} style={connectionLineStyle}>
           <slot name="connectionLineComponent" slot="connectionLineComponent" />
         </ConnectionLine>

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

@@ -20,7 +20,15 @@ import type {
   ProOptions
 } from '@xyflow/system';
 
-import type { Edge, Node, NodeTypes, KeyDefinition, EdgeTypes } from '$lib/types';
+import type {
+  Edge,
+  Node,
+  NodeTypes,
+  KeyDefinition,
+  EdgeTypes,
+  DefaultEdgeOptions,
+  FitViewOptions
+} from '$lib/types';
 import type { Writable } from 'svelte/store';
 
 export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
@@ -33,6 +41,7 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   panActivationKey?: KeyDefinition;
   deleteKey?: KeyDefinition;
   fitView?: boolean;
+  fitViewOptions?: FitViewOptions;
   nodeOrigin?: NodeOrigin;
   minZoom?: number;
   maxZoom?: number;
@@ -60,6 +69,7 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   autoPanOnNodeDrag?: boolean;
   attributionPosition?: PanelPosition;
   proOptions?: ProOptions;
+  defaultEdgeOptions?: DefaultEdgeOptions;
 
   class?: string;
   style?: string;