Merge branch 'xyflow' into feat/ssr

packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte

@@ -1,6 +1,7 @@
 <svelte:options immutable />
 
 <script lang="ts">
+  import cc from 'classcat';
   import { createEventDispatcher } from 'svelte';
   import { getMarkerId } from '@xyflow/system';
 
@@ -73,7 +74,7 @@
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 {#if !hidden}
   <g
-    class="svelte-flow__edge {className}"
+    class={cc(['svelte-flow__edge', className])}
     class:animated
     class:selected
     data-id={id}

packages/svelte/src/lib/components/edges/index.ts

@@ -0,0 +1,4 @@
+export { default as BezierEdge } from './BezierEdge.svelte';
+export { default as StraightEdge } from './StraightEdge.svelte';
+export { default as SmoothStepEdge } from './SmoothStepEdge.svelte';
+export { default as StepEdge } from './StepEdge.svelte';

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

@@ -111,6 +111,14 @@
     };
   });
 
+  // Update width & height on resize
+  $: {
+    if (clientWidth !== undefined && clientHeight !== undefined) {
+      store.width.set(clientWidth);
+      store.height.set(clientHeight);
+    }
+  }
+
   // this updates the store for simple changes
   // where the prop names equals the store name
   $: {

packages/svelte/src/lib/hooks/useSvelteFlow.ts

@@ -51,6 +51,7 @@ export function useSvelteFlow(): {
   getConnectedEdges: (id: string | (Node | { id: Node['id'] })[]) => Edge[];
   getIncomers: (node: string | Node | { id: Node['id'] }) => Node[];
   getOutgoers: (node: string | Node | { id: Node['id'] }) => Node[];
+  toObject: () => { nodes: Node[]; edges: Edge[]; viewport: Viewport };
 } {
   const {
     zoomIn,
@@ -263,6 +264,19 @@ export function useSvelteFlow(): {
 
       return getOutgoersBase(_node, get(nodes), get(edges));
     },
+    toObject: () => {
+      return {
+        nodes: get(nodes).map((node) => ({
+          ...node,
+          // we want to make sure that changes to the nodes object that gets returned by toObject
+          // do not affect the nodes object
+          position: { ...node.position },
+          data: { ...node.data }
+        })),
+        edges: get(edges).map((edge) => ({ ...edge })),
+        viewport: { ...get(viewport) }
+      };
+    },
     viewport
   };
 }

packages/svelte/src/lib/index.ts

@@ -7,6 +7,7 @@ export * from '$lib/container/Panel';
 export * from '$lib/components/SvelteFlowProvider';
 export * from '$lib/components/EdgeLabelRenderer';
 export * from '$lib/components/BaseEdge';
+export * from '$lib/components/edges';
 export * from '$lib/components/Handle';
 
 // plugins