Merge branch 'next' into enhance-connection-more

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

@@ -16,6 +16,7 @@ import {
   type XYPosition,
   type CoordinateExtent,
   type UpdateConnection,
+  type NodeOrigin,
   type ConnectionState
 } from '@xyflow/system';
 
@@ -33,15 +34,24 @@ export function createStore({
   edges,
   width,
   height,
-  fitView: fitViewOnCreate
+  fitView: fitViewOnCreate,
+  nodeOrigin
 }: {
   nodes?: Node[];
   edges?: Edge[];
   width?: number;
   height?: number;
   fitView?: boolean;
+  nodeOrigin?: NodeOrigin;
 }): SvelteFlowStore {
-  const store = getInitialStore({ nodes, edges, width, height, fitView: fitViewOnCreate });
+  const store = getInitialStore({
+    nodes,
+    edges,
+    width,
+    height,
+    fitView: fitViewOnCreate,
+    nodeOrigin
+  });
 
   function setNodeTypes(nodeTypes: NodeTypes) {
     store.nodeTypes.set({
@@ -123,6 +133,7 @@ export function createStore({
         }
         case 'position':
           node.position = change.position ?? node.position;
+
           break;
       }
     }
@@ -148,8 +159,7 @@ export function createStore({
         height: get(store.height),
         minZoom: get(store.minZoom),
         maxZoom: get(store.maxZoom),
-        panZoom,
-        nodeOrigin: get(store.nodeOrigin)
+        panZoom
       },
       options
     );
@@ -428,15 +438,17 @@ export function createStoreContext({
   edges,
   width,
   height,
-  fitView
+  fitView,
+  nodeOrigin
 }: {
   nodes?: Node[];
   edges?: Edge[];
   width?: number;
   height?: number;
   fitView?: boolean;
+  nodeOrigin?: NodeOrigin;
 }) {
-  const store = createStore({ nodes, edges, width, height, fitView });
+  const store = createStore({ nodes, edges, width, height, fitView, nodeOrigin });
 
   setContext(key, {
     getStore: () => store

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

@@ -6,7 +6,6 @@ import {
   ConnectionLineType,
   devWarn,
   adoptUserNodes,
-  getNodesBounds,
   getViewportForBounds,
   updateConnectionLookup,
   initialConnection,
@@ -24,7 +23,9 @@ import {
   type OnConnectEnd,
   type NodeLookup,
   type EdgeLookup,
-  type ConnectionState
+  type ConnectionState,
+  type ParentLookup,
+  getInternalNodesBounds
 } from '@xyflow/system';
 
 import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
@@ -73,18 +74,21 @@ export const getInitialStore = ({
   edges = [],
   width,
   height,
-  fitView
+  fitView,
+  nodeOrigin
 }: {
   nodes?: Node[];
   edges?: Edge[];
   width?: number;
   height?: number;
   fitView?: boolean;
+  nodeOrigin?: NodeOrigin;
 }) => {
   const nodeLookup: NodeLookup = new Map();
   const parentLookup = new Map();
+  const storeNodeOrigin = nodeOrigin ?? [0, 0];
   adoptUserNodes(nodes, nodeLookup, parentLookup, {
-    nodeOrigin: [0, 0],
+    nodeOrigin: storeNodeOrigin,
     elevateNodesOnSelect: false,
     checkEquality: false
   });
@@ -95,20 +99,17 @@ export const getInitialStore = ({
   let viewport: Viewport = { x: 0, y: 0, zoom: 1 };
 
   if (fitView && width && height) {
-    const nodesWithDimensions = nodes.filter(
-      (node) => (node.width && node.height) || (node.initialWidth && node.initialHeight)
-    );
-
-    // @todo users nodeOrigin should be used here
-    const bounds = getNodesBounds(nodesWithDimensions, { nodeOrigin: [0, 0] });
+    const bounds = getInternalNodesBounds(nodeLookup, {
+      filter: (node) => !!((node.width || node.initialWidth) && (node.height || node.initialHeight))
+    });
     viewport = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
   }
 
   return {
     flowId: writable<string | null>(null),
-    nodes: createNodesStore(nodes, nodeLookup, parentLookup),
+    nodes: createNodesStore(nodes, nodeLookup, parentLookup, storeNodeOrigin),
     nodeLookup: readable<NodeLookup<InternalNode>>(nodeLookup),
-    parentLookup: readable<Map<string, InternalNode[]>>(parentLookup),
+    parentLookup: readable<ParentLookup<InternalNode>>(parentLookup),
     edgeLookup: readable<EdgeLookup<Edge>>(edgeLookup),
     visibleNodes: readable<InternalNode[]>([]),
     edges: createEdgesStore(edges, connectionLookup, edgeLookup),
@@ -118,7 +119,7 @@ export const getInitialStore = ({
     width: writable<number>(500),
     minZoom: writable<number>(0.5),
     maxZoom: writable<number>(2),
-    nodeOrigin: writable<NodeOrigin>([0, 0]),
+    nodeOrigin: writable<NodeOrigin>(storeNodeOrigin),
     nodeDragThreshold: writable<number>(1),
     nodeExtent: writable<CoordinateExtent>(infiniteExtent),
     translateExtent: writable<CoordinateExtent>(infiniteExtent),

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

@@ -13,7 +13,9 @@ import {
   type PanZoomInstance,
   type ConnectionLookup,
   type EdgeLookup,
-  type NodeLookup
+  type NodeLookup,
+  type ParentLookup,
+  type NodeOrigin
 } from '@xyflow/system';
 
 import type { DefaultEdgeOptions, DefaultNodeOptions, Edge, InternalNode, Node } from '$lib/types';
@@ -128,7 +130,8 @@ export type NodeStoreOptions = {
 export const createNodesStore = (
   nodes: Node[],
   nodeLookup: NodeLookup<InternalNode>,
-  parentLookup: Map<string, InternalNode[]>
+  parentLookup: ParentLookup<InternalNode>,
+  nodeOrigin: NodeOrigin = [0, 0]
 ): {
   subscribe: (this: void, run: Subscriber<Node[]>) => Unsubscriber;
   update: (this: void, updater: Updater<Node[]>) => void;
@@ -144,6 +147,7 @@ export const createNodesStore = (
   const _set = (nds: Node[]): Node[] => {
     adoptUserNodes(nds, nodeLookup, parentLookup, {
       elevateNodesOnSelect,
+      nodeOrigin,
       defaults,
       checkEquality: false
     });