feat(svelte): ssr fitView

packages/react/src/hooks/useReactFlow.ts

@@ -211,7 +211,7 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
         const overlappingArea = getOverlappingArea(currNodeRect, nodeRect);
         const partiallyVisible = partially && overlappingArea > 0;
 
-        return partiallyVisible || overlappingArea >= nodeOrRect.width! * nodeOrRect.height!;
+        return partiallyVisible || overlappingArea >= nodeRect.width * nodeRect.height;
       });
     },
     []
@@ -228,7 +228,7 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
       const overlappingArea = getOverlappingArea(nodeRect, area);
       const partiallyVisible = partially && overlappingArea > 0;
 
-      return partiallyVisible || overlappingArea >= nodeOrRect.width! * nodeOrRect.height!;
+      return partiallyVisible || overlappingArea >= nodeRect.width * nodeRect.height;
     },
     []
   );

packages/svelte/src/lib/components/SvelteFlowProvider/SvelteFlowProvider.svelte

@@ -10,12 +10,14 @@
   export let initialEdges: $$Props['initialEdges'] = undefined;
   export let initialWidth: $$Props['initialWidth'] = undefined;
   export let initialHeight: $$Props['initialHeight'] = undefined;
+  export let fitView: $$Props['fitView'] = undefined;
 
   const store = createStore({
     nodes: initialNodes,
     edges: initialEdges,
     width: initialWidth,
-    height: initialHeight
+    height: initialHeight,
+    fitView
   });
 
   setContext(key, {

packages/svelte/src/lib/components/SvelteFlowProvider/types.ts

@@ -5,4 +5,5 @@ export type SvelteFlowProviderProps = {
   initialEdges?: Edge[];
   initialWidth?: number;
   initialHeight?: number;
+  fitView?: boolean;
 };

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

@@ -79,7 +79,7 @@
 
   const store = hasContext(key)
     ? useStore()
-    : createStoreContext({ nodes: get(nodes), edges: get(edges), width, height });
+    : createStoreContext({ nodes: get(nodes), edges: get(edges), width, height, fitView });
 
   onMount(() => {
     store.width.set(clientWidth);

packages/svelte/src/lib/store/index.ts

@@ -33,14 +33,16 @@ export function createStore({
   nodes,
   edges,
   width,
-  height
+  height,
+  fitView: fitViewOnCreate
 }: {
   nodes?: Node[];
   edges?: Edge[];
   width?: number;
   height?: number;
+  fitView?: boolean;
 }): SvelteFlowStore {
-  const store = getInitialStore({ nodes, edges, width, height });
+  const store = getInitialStore({ nodes, edges, width, height, fitView: fitViewOnCreate });
 
   function setNodeTypes(nodeTypes: NodeTypes) {
     store.nodeTypes.set({
@@ -347,14 +349,16 @@ export function createStoreContext({
   nodes,
   edges,
   width,
-  height
+  height,
+  fitView
 }: {
   nodes?: Node[];
   edges?: Edge[];
   width?: number;
   height?: number;
+  fitView?: boolean;
 }) {
-  const store = createStore({ nodes, edges, width, height });
+  const store = createStore({ nodes, edges, width, height, fitView });
 
   setContext(key, {
     getStore: () => store

packages/svelte/src/lib/store/initial-store.ts

@@ -14,7 +14,10 @@ import {
   type NodeOrigin,
   type OnError,
   devWarn,
-  type Viewport
+  type Viewport,
+  updateNodes,
+  getRectOfNodes,
+  getTransformForBounds
 } from '@xyflow/system';
 
 import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
@@ -47,16 +50,33 @@ export const getInitialStore = ({
   nodes = [],
   edges = [],
   width,
-  height
+  height,
+  fitView
 }: {
   nodes?: Node[];
   edges?: Edge[];
   width?: number;
   height?: number;
+  fitView?: boolean;
 }) => {
+  const nextNodes = updateNodes(nodes, [], { nodeOrigin: [0, 0], elevateNodesOnSelect: false });
+
+  let viewport: Viewport = { x: 0, y: 0, zoom: 1 };
+
+  if (fitView && width && height) {
+    const nodesWithDimensions = nextNodes.map((node) => ({
+      ...node,
+      width: node.size?.width,
+      height: node.size?.height
+    }));
+    const bounds = getRectOfNodes(nodesWithDimensions, [0, 0]);
+    const transform = getTransformForBounds(bounds, width, height, 0.5, 2, 0.1);
+    viewport = { x: transform[0], y: transform[1], zoom: transform[2] };
+  }
+
   return {
     flowId: writable<string | null>(null),
-    nodes: createNodesStore(nodes),
+    nodes: createNodesStore(nextNodes),
     visibleNodes: readable<Node[]>([]),
     edges: createEdgesStore(edges),
     edgeTree: readable<GroupedEdges<EdgeLayouted>[]>([]),
@@ -85,7 +105,7 @@ export const getInitialStore = ({
     selectionMode: writable<SelectionMode>(SelectionMode.Partial),
     nodeTypes: writable<NodeTypes>(initialNodeTypes),
     edgeTypes: writable<EdgeTypes>(initialEdgeTypes),
-    viewport: writable<Viewport>({ x: 0, y: 0, zoom: 1 }),
+    viewport: writable<Viewport>(viewport),
     connectionMode: writable<ConnectionMode>(ConnectionMode.Strict),
     domNode: writable<HTMLDivElement | null>(null),
     connection: readable<ConnectionProps>(initConnectionProps),