Merge branch 'next' into enhance-connection-more

packages/svelte/src/lib/actions/drag/index.ts

@@ -34,7 +34,7 @@ export default function drag(domNode: Element, params: UseDragParams) {
         nodeExtent: get(store.nodeExtent),
         snapGrid: snapGrid ? snapGrid : [0, 0],
         snapToGrid: !!snapGrid,
-        nodeOrigin: [0, 0],
+        nodeOrigin: get(store.nodeOrigin),
         multiSelectionActive: get(store.multiselectionKeyPressed),
         domNode: get(store.domNode),
         transform: [vp.x, vp.y, vp.zoom],

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -31,8 +31,6 @@
   export let isParent: $$Props['isParent'] = false;
   export let positionX: $$Props['positionX'];
   export let positionY: $$Props['positionY'];
-  export let positionOriginX: $$Props['positionOriginX'];
-  export let positionOriginY: $$Props['positionOriginY'];
   export let sourcePosition: $$Props['sourcePosition'] = undefined;
   export let targetPosition: $$Props['targetPosition'] = undefined;
   export let zIndex: $$Props['zIndex'];
@@ -181,7 +179,7 @@
     class:nopan={draggable}
     class:parent={isParent}
     style:z-index={zIndex}
-    style:transform="translate({positionOriginX}px, {positionOriginY}px)"
+    style:transform="translate({positionX}px, {positionY}px)"
     style:visibility={initialized ? 'visible' : 'hidden'}
     style="{style ?? ''};{inlineStyleDimensions.width}{inlineStyleDimensions.height}"
     on:click={onSelectNodeHandler}

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

@@ -28,8 +28,6 @@ export type NodeWrapperProps = Pick<
   type: string;
   positionX: number;
   positionY: number;
-  positionOriginX: number;
-  positionOriginY: number;
   'on:nodeclick'?: (event: MouseEvent) => void;
   resizeObserver?: ResizeObserver | null;
   isParent?: boolean;

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

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

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

@@ -1,4 +1,5 @@
 import type { Edge, Node } from '$lib/types';
+import type { NodeOrigin } from '@xyflow/system';
 
 export type SvelteFlowProviderProps = {
   initialNodes?: Node[];
@@ -6,4 +7,5 @@ export type SvelteFlowProviderProps = {
   initialWidth?: number;
   initialHeight?: number;
   fitView?: boolean;
+  nodeOrigin?: NodeOrigin;
 };

packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onDestroy } from 'svelte';
-  import { getPositionWithOrigin, getNodeDimensions, nodeHasDimensions } from '@xyflow/system';
+  import { nodeHasDimensions } from '@xyflow/system';
 
   import { NodeWrapper } from '$lib/components/NodeWrapper';
   import { useStore } from '$lib/store';
@@ -40,13 +40,6 @@
 
 <div class="svelte-flow__nodes">
   {#each $visibleNodes as node (node.id)}
-    {@const nodeDimesions = getNodeDimensions(node)}
-    {@const posOrigin = getPositionWithOrigin({
-      x: node.internals.positionAbsolute.x,
-      y: node.internals.positionAbsolute.y,
-      ...nodeDimesions,
-      origin: node.origin
-    })}
     <NodeWrapper
       {node}
       id={node.id}
@@ -65,8 +58,6 @@
       deletable={node.deletable ?? true}
       positionX={node.internals.positionAbsolute.x}
       positionY={node.internals.positionAbsolute.y}
-      positionOriginX={posOrigin.x ?? 0}
-      positionOriginY={posOrigin.y ?? 0}
       isParent={$parentLookup.has(node.id)}
       style={node.style}
       class={node.class}

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

@@ -78,6 +78,7 @@
   export let onconnectend: $$Props['onconnectend'] = undefined;
   export let onbeforedelete: $$Props['onbeforedelete'] = undefined;
   export let oninit: $$Props['oninit'] = undefined;
+  export let nodeOrigin: $$Props['nodeOrigin'] = undefined;
 
   export let defaultMarkerColor = '#b1b1b7';
 
@@ -93,7 +94,14 @@
 
   const store = hasContext(key)
     ? useStore()
-    : createStoreContext({ nodes: get(nodes), edges: get(edges), width, height, fitView });
+    : createStoreContext({
+        nodes: get(nodes),
+        edges: get(edges),
+        width,
+        height,
+        fitView,
+        nodeOrigin
+      });
 
   onMount(() => {
     store.width.set(clientWidth);
@@ -168,7 +176,8 @@
       onconnect,
       onconnectstart,
       onconnectend,
-      onbeforedelete
+      onbeforedelete,
+      nodeOrigin
     };
 
     updateStoreByKeys(store, updatableProps);

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

@@ -70,6 +70,7 @@ export type UpdatableStoreProps = {
   onconnectstart?: UnwrapWritable<SvelteFlowStore['onconnectstart']>;
   onconnectend?: UnwrapWritable<SvelteFlowStore['onconnectend']>;
   onbeforedelete?: UnwrapWritable<SvelteFlowStore['onbeforedelete']>;
+  nodeOrigin?: UnwrapWritable<SvelteFlowStore['nodeOrigin']>;
 };
 
 export function updateStoreByKeys(store: SvelteFlowStore, keys: UpdatableStoreProps) {

packages/svelte/src/lib/plugins/Minimap/Minimap.svelte

@@ -11,7 +11,6 @@
     getBoundsOfRects,
     getInternalNodesBounds,
     getNodeDimensions,
-    getNodePositionWithOrigin,
     nodeHasDimensions,
     type Rect
   } from '@xyflow/system';
@@ -134,11 +133,10 @@
       {#each $nodes as userNode (userNode.id)}
         {@const node = $nodeLookup.get(userNode.id)}
         {#if node && nodeHasDimensions(node)}
-          {@const pos = getNodePositionWithOrigin(node).positionAbsolute}
           {@const nodeDimesions = getNodeDimensions(node)}
           <MinimapNode
-            x={pos.x}
-            y={pos.y}
+            x={node.internals.positionAbsolute.x}
+            y={node.internals.positionAbsolute.y}
             {...nodeDimesions}
             selected={node.selected}
             color={nodeColorFunc?.(node)}

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
     });