Refactor/vanilla store utils (#3138)

* feat(stores): use vanilla store utils

* fix(store-utils): keep dimensions if possible

* feat(utils): add nodeDimension and panBy utils

* fix(svelte): use correct updateDim func

* refactor(react): cleanup store

* chore(tests): use new imports

examples/vite-app/cypress/components/hooks/useEdges.cy.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import ReactFlow, { Edge, useEdges } from '@xyflow/react';
+import { ReactFlow, Edge, useEdges } from '@xyflow/react';
 
 import { nodes as initialNodes, edges as initialEdges } from '../../fixtures/simpleflow';
 

examples/vite-app/cypress/components/hooks/useNodes.cy.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import ReactFlow, { Node, useNodes } from '@xyflow/react';
+import { ReactFlow, Node, useNodes } from '@xyflow/react';
 
 import { nodes } from '../../fixtures/simpleflow';
 

examples/vite-app/cypress/components/hooks/useNodesInitialized.cy.tsx

@@ -1,4 +1,4 @@
-import ReactFlow, { useNodesInitialized } from '@xyflow/react';
+import { ReactFlow, useNodesInitialized } from '@xyflow/react';
 
 import { nodes } from '../../fixtures/simpleflow';
 import ControlledFlow from '../../support/ControlledFlow';

examples/vite-app/cypress/components/hooks/useOnViewportChange.cy.tsx

@@ -1,4 +1,4 @@
-import ReactFlow, { useOnViewportChange, Viewport } from '@xyflow/react';
+import { ReactFlow, useOnViewportChange, Viewport } from '@xyflow/react';
 
 describe('useOnViewportChange.cy.tsx', () => {
   it('listen to viewport drag', () => {

examples/vite-app/cypress/components/hooks/useViewport.cy.tsx

@@ -1,4 +1,4 @@
-import ReactFlow, { useViewport, Viewport } from '@xyflow/react';
+import { ReactFlow, useViewport, Viewport } from '@xyflow/react';
 
 describe('useViewport.cy.tsx', () => {
   it('handles drag', () => {

examples/vite-app/cypress/components/reactflow/basic-props.cy.tsx

@@ -1,4 +1,4 @@
-import ReactFlow, { EdgeProps } from '@xyflow/react';
+import { ReactFlow, EdgeProps } from '@xyflow/react';
 
 import ControlledFlow from '../../support/ControlledFlow';
 import * as simpleflow from '../../fixtures/simpleflow';

examples/vite-app/cypress/components/reactflow/multiple-instance.cy.tsx

@@ -1,4 +1,4 @@
-import ReactFlow, { BaseEdge, EdgeLabelRenderer, EdgeProps, getSmoothStepPath, ReactFlowProvider } from '@xyflow/react';
+import { ReactFlow, BaseEdge, EdgeLabelRenderer, EdgeProps, getSmoothStepPath, ReactFlowProvider } from '@xyflow/react';
 import * as simpleflow from '../../fixtures/simpleflow';
 
 function CustomEdge(props: EdgeProps) {

examples/vite-app/cypress/components/reactflow/uncontrolled.cy.tsx

@@ -1,4 +1,4 @@
-import ReactFlow from '@xyflow/react';
+import { ReactFlow } from '@xyflow/react';
 
 import { nodes, edges } from '../../fixtures/simpleflow';
 

examples/vite-app/cypress/components/reactflow/view-props.cy.tsx

@@ -1,4 +1,4 @@
-import ReactFlow, { ReactFlowProps, Viewport, useViewport, SnapGrid, CoordinateExtent, Node } from '@xyflow/react';
+import { ReactFlow, ReactFlowProps, Viewport, useViewport, SnapGrid, CoordinateExtent, Node } from '@xyflow/react';
 
 import ControlledFlow from '../../support/ControlledFlow';
 import * as simpleflow from '../../fixtures/simpleflow';

examples/vite-app/package.json

@@ -30,8 +30,8 @@
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "4.0.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
-    "cypress": "^10.6.0",
+    "cypress": "12.14.0",
-    "cypress-real-events": "^1.7.1",
+    "cypress-real-events": "1.8.1",
     "start-server-and-test": "^1.14.0",
     "typescript": "^4.9.4",
     "vite": "4.3.9"

package.json

@@ -22,7 +22,6 @@
     "@typescript-eslint/parser": "latest",
     "autoprefixer": "^10.4.8",
     "concurrently": "^7.6.0",
-    "cypress": "^10.6.0",
     "eslint": "^8.22.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",

packages/react/src/container/Viewport/index.tsx

@@ -13,7 +13,7 @@ function Viewport({ children }: ViewportProps) {
   const transform = useStore(selector);
 
   return (
-    <div className="react-flow__viewport react-flow__container" style={{ transform }}>
+    <div className="react-flow__viewport xyflow__viewport react-flow__container" style={{ transform }}>
       {children}
     </div>
   );

packages/react/src/hooks/useResizeHandler.ts

@@ -8,6 +8,9 @@ function useResizeHandler(domNode: MutableRefObject<HTMLDivElement | null>): voi
 
   useEffect(() => {
     const updateDimensions = () => {
+      if (!domNode.current) {
+        return false;
+      }
       const size = getDimensions(domNode.current!);
 
       if (size.height === 0 || size.width === 0) {

packages/react/src/store/index.ts

@@ -1,15 +1,16 @@
 import { createStore } from 'zustand';
 import {
   clampPosition,
-  getDimensions,
+  fitView as fitViewSystem,
-  fitView,
+  updateNodes,
-  getHandleBounds,
+  updateAbsolutePositions,
-  internalsSymbol,
+  panBy as panBySystem,
-  type CoordinateExtent,
+  Dimensions,
+  updateNodeDimensions as updateNodeDimensionsSystem,
 } from '@xyflow/system';
 
 import { applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes';
-import { createNodeInternals, updateAbsoluteNodePositions, updateNodesAndEdgesSelections } from './utils';
+import { updateNodesAndEdgesSelections } from './utils';
 import initialState from './initialState';
 import type {
   ReactFlowState,
@@ -20,6 +21,7 @@ import type {
   NodeSelectionChange,
   NodePositionChange,
   UnselectNodesAndEdgesParams,
+  FitViewOptions,
 } from '../types';
 
 const createRFStore = () =>
@@ -27,7 +29,9 @@ const createRFStore = () =>
     ...initialState,
     setNodes: (nodes: Node[]) => {
       const { nodes: storeNodes, nodeOrigin, elevateNodesOnSelect } = get();
-      set({ nodes: createNodeInternals(nodes, storeNodes, nodeOrigin, elevateNodesOnSelect) });
+      const nextNodes = updateNodes(nodes, storeNodes, { nodeOrigin, elevateNodesOnSelect });
+
+      set({ nodes: nextNodes });
     },
     getNodes: () => {
       return get().nodes;
@@ -41,91 +45,49 @@ const createRFStore = () =>
       const hasDefaultEdges = typeof edges !== 'undefined';
 
       const nextNodes = hasDefaultNodes
-        ? createNodeInternals(nodes, [], get().nodeOrigin, get().elevateNodesOnSelect)
+        ? updateNodes(nodes, [], {
+            nodeOrigin: get().nodeOrigin,
+            elevateNodesOnSelect: get().elevateNodesOnSelect,
+          })
         : [];
       const nextEdges = hasDefaultEdges ? edges : [];
 
       set({ nodes: nextNodes, edges: nextEdges, hasDefaultNodes, hasDefaultEdges });
     },
     updateNodeDimensions: (updates) => {
-      const {
+      const { onNodesChange, fitView, nodes, fitViewOnInit, fitViewDone, fitViewOnInitOptions, domNode, nodeOrigin } =
-        onNodesChange,
+        get();
+      const changes: NodeDimensionChange[] = [];
+
+      const updatedNodes = updateNodeDimensionsSystem(
+        updates,
         nodes,
-        fitViewOnInit,
-        fitViewOnInitDone,
-        fitViewOnInitOptions,
         domNode,
         nodeOrigin,
-        width,
+        (id: string, dimensions: Dimensions) => {
-        height,
+          changes.push({
-        minZoom,
+            id: id,
-        maxZoom,
+            type: 'dimensions',
-        panZoom,
+            dimensions,
-      } = get();
+          });
-      const viewportNode = domNode?.querySelector('.react-flow__viewport');
+        }
+      );
 
-      if (!viewportNode) {
+      if (!updatedNodes) {
         return;
       }
 
-      const style = window.getComputedStyle(viewportNode);
+      const nextNodes = updateAbsolutePositions(updatedNodes, nodeOrigin);
-      const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform);
-      const changes: NodeDimensionChange[] = [];
 
-      const nextNodes = nodes.map((node) => {
+      const nextFitViewDone =
-        const update = updates.find((change) => change.id === node.id);
+        fitViewDone ||
-
-        if (update) {
-          const dimensions = getDimensions(update.nodeElement);
-          const doUpdate = !!(
-            dimensions.width &&
-            dimensions.height &&
-            (node.width !== dimensions.width || node.height !== dimensions.height || update.forceUpdate)
-          );
-
-          if (doUpdate) {
-            changes.push({
-              id: node.id,
-              type: 'dimensions',
-              dimensions,
-            });
-
-            return {
-              ...node,
-              ...dimensions,
-              [internalsSymbol]: {
-                ...node[internalsSymbol],
-                handleBounds: {
-                  source: getHandleBounds('.source', update.nodeElement, zoom, node.origin || nodeOrigin),
-                  target: getHandleBounds('.target', update.nodeElement, zoom, node.origin || nodeOrigin),
-                },
-              },
-            };
-          }
-        }
-
-        return node;
-      });
-
-      updateAbsoluteNodePositions(nextNodes, nodeOrigin);
-
-      const nextFitViewOnInitDone =
-        fitViewOnInitDone ||
         (fitViewOnInit &&
-          !!panZoom &&
+          fitView({
-          fitView(
+            ...fitViewOnInitOptions,
-            {
+            nodes: nextNodes,
-              nodes: nextNodes,
+          }));
-              width,
+
-              height,
+      set({ nodes: nextNodes, fitViewDone: nextFitViewDone });
-              panZoom,
-              minZoom,
-              maxZoom,
-              nodeOrigin,
-            },
-            fitViewOnInitOptions
-          ));
-      set({ nodes: nextNodes, fitViewOnInitDone: nextFitViewOnInitDone });
 
       if (changes?.length > 0) {
         onNodesChange?.(changes);
@@ -156,7 +118,10 @@ const createRFStore = () =>
       if (changes?.length) {
         if (hasDefaultNodes) {
           const updatedNodes = applyNodeChanges(changes, nodes);
-          const nextNodes = createNodeInternals(updatedNodes, nodes, nodeOrigin, elevateNodesOnSelect);
+          const nextNodes = updateNodes(updatedNodes, nodes, {
+            nodeOrigin,
+            elevateNodesOnSelect,
+          });
           set({ nodes: nextNodes });
         }
 
@@ -273,29 +238,28 @@ const createRFStore = () =>
     },
     panBy: (delta): boolean => {
       const { transform, width, height, panZoom, translateExtent } = get();
+      return panBySystem({ delta, panZoom, transform, translateExtent, width, height });
+    },
+    fitView: (options?: FitViewOptions): boolean => {
+      const { panZoom, nodes, width, height, minZoom, maxZoom, nodeOrigin } = get();
+      const fitViewNodes = options?.nodes || nodes;
 
-      if (!panZoom || (!delta.x && !delta.y)) {
+      if (!panZoom) {
         return false;
       }
 
-      const extent: CoordinateExtent = [
+      return fitViewSystem(
-        [0, 0],
+        {
-        [width, height],
+          nodes: fitViewNodes as Node[],
-      ];
+          width,
-
+          height,
-      const constrainedTransform = panZoom.setViewportConstrained(
+          panZoom,
-        { x: transform[0] + delta.x, y: transform[1] + delta.y, zoom: transform[2] },
+          minZoom,
-        extent,
+          maxZoom,
-        translateExtent
+          nodeOrigin,
+        },
+        options
       );
-
-      const transformChanged =
-        !!constrainedTransform &&
-        (transform[0] !== constrainedTransform.x ||
-          transform[1] !== constrainedTransform.y ||
-          transform[2] !== constrainedTransform.k);
-
-      return transformChanged;
     },
     cancelConnection: () =>
       set({

packages/react/src/store/initialState.ts

@@ -40,7 +40,7 @@ const initialState: ReactFlowStore = {
   elementsSelectable: true,
   elevateNodesOnSelect: true,
   fitViewOnInit: false,
-  fitViewOnInitDone: false,
+  fitViewDone: false,
   fitViewOnInitOptions: undefined,
   selectNodesOnDrag: true,
 

packages/react/src/store/utils.ts

@@ -1,113 +1,6 @@
 import type { StoreApi } from 'zustand';
-import {
-  internalsSymbol,
-  isNumeric,
-  getNodePositionWithOrigin,
-  type XYZPosition,
-  type NodeOrigin,
-} from '@xyflow/system';
-
 import type { Edge, EdgeSelectionChange, Node, NodeSelectionChange, ReactFlowState } from '../types';
 
-type ParentNodes = Record<string, boolean>;
-
-function calculateXYZPosition(node: Node, nodes: Node[], result: XYZPosition, nodeOrigin: NodeOrigin): XYZPosition {
-  if (!node.parentNode) {
-    return result;
-  }
-
-  const parentNode = nodes.find((n) => n.id === node.parentNode)!;
-  const parentNodePosition = getNodePositionWithOrigin(parentNode, parentNode?.origin || nodeOrigin);
-
-  return calculateXYZPosition(
-    parentNode,
-    nodes,
-    {
-      x: (result.x ?? 0) + parentNodePosition.x,
-      y: (result.y ?? 0) + parentNodePosition.y,
-      z: (parentNode[internalsSymbol]?.z ?? 0) > (result.z ?? 0) ? parentNode[internalsSymbol]?.z ?? 0 : result.z ?? 0,
-    },
-    parentNode.origin || nodeOrigin
-  );
-}
-
-export function updateAbsoluteNodePositions(nodes: Node[], nodeOrigin: NodeOrigin, parentNodes?: ParentNodes) {
-  nodes.forEach((node) => {
-    if (node.parentNode && !nodes.find((n) => n.id === node.parentNode)) {
-      throw new Error(`Parent node ${node.parentNode} not found`);
-    }
-
-    if (node.parentNode || parentNodes?.[node.id]) {
-      const parentNode = node.parentNode ? nodes.find((n) => n.id === node.parentNode) : null;
-      const { x, y, z } = calculateXYZPosition(
-        node,
-        nodes,
-        {
-          ...node.position,
-          z: node[internalsSymbol]?.z ?? 0,
-        },
-        parentNode?.origin || nodeOrigin
-      );
-
-      node.positionAbsolute = {
-        x,
-        y,
-      };
-
-      node[internalsSymbol]!.z = z;
-
-      if (parentNodes?.[node.id]) {
-        node[internalsSymbol]!.isParent = true;
-      }
-    }
-  });
-}
-
-export function createNodeInternals(
-  nodes: Node[],
-  storeNodes: Node[],
-  nodeOrigin: NodeOrigin,
-  elevateNodesOnSelect: boolean
-): Node[] {
-  const nextNodes: Node[] = [];
-  const parentNodes: ParentNodes = {};
-  const selectedNodeZ: number = elevateNodesOnSelect ? 1000 : 0;
-
-  nodes.forEach((node) => {
-    const z = (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? selectedNodeZ : 0);
-    const currInternals = storeNodes.find((n) => n.id === node.id);
-
-    const updatedNode: Node = {
-      width: currInternals?.width,
-      height: currInternals?.height,
-      ...node,
-      positionAbsolute: {
-        x: node.position.x,
-        y: node.position.y,
-      },
-    };
-
-    if (node.parentNode) {
-      updatedNode.parentNode = node.parentNode;
-      parentNodes[node.parentNode] = true;
-    }
-
-    Object.defineProperty(updatedNode, internalsSymbol, {
-      enumerable: false,
-      value: {
-        handleBounds: currInternals?.[internalsSymbol]?.handleBounds,
-        z,
-      },
-    });
-
-    nextNodes.push(updatedNode);
-  });
-
-  updateAbsoluteNodePositions(nodes, nodeOrigin, parentNodes);
-
-  return nextNodes;
-}
-
 export function handleControlledSelectionChange<NodeOrEdge extends Node | Edge>(
   changes: NodeSelectionChange[] | EdgeSelectionChange[],
   items: NodeOrEdge[]

packages/react/src/types/store.ts

@@ -111,7 +111,7 @@ export type ReactFlowStore = {
   defaultEdgeOptions?: DefaultEdgeOptions;
 
   fitViewOnInit: boolean;
-  fitViewOnInitDone: boolean;
+  fitViewDone: boolean;
   fitViewOnInitOptions: FitViewOptions | undefined;
 
   onNodesDelete?: OnNodesDelete;
@@ -151,11 +151,11 @@ export type ReactFlowActions = {
   setTranslateExtent: (translateExtent: CoordinateExtent) => void;
   setNodeExtent: (nodeExtent: CoordinateExtent) => void;
   cancelConnection: () => void;
-  // @todo can this be reused by system?
   updateConnection: UpdateConnection;
   reset: () => void;
   triggerNodeChanges: (changes: NodeChange[]) => void;
   panBy: PanBy;
+  fitView: (options?: FitViewOptions) => boolean;
 };
 
 export type ReactFlowState = ReactFlowStore & ReactFlowActions;

packages/svelte/README.md

@@ -28,8 +28,6 @@ A basic flow looks like this:
     BackgroundVariant,
     MiniMap,
     Panel,
-    createNodes,
-    createEdges,
     type NodeTypes
   } from '../../lib/index';
   import { CustomNode } from './CustomNode';

packages/svelte/src/lib/container/Viewport/Viewport.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <div
-  class="svelte-flow__viewport"
+  class="svelte-flow__viewport xyflow__viewport"
   style="transform: translate({$transform[0]}px, {$transform[1]}px) scale({$transform[2]})"
 >
   <slot />

packages/svelte/src/lib/store/edge-tree.ts

@@ -63,12 +63,7 @@ export function getEdgeTree(store: SvelteFlowStoreState, onError: OnError) {
         if (edgePosition) {
           res.push({
             ...edge,
-            sourceX: edgePosition.sourceX,
+            ...edgePosition
-            sourceY: edgePosition.sourceY,
-            targetX: edgePosition.targetX,
-            targetY: edgePosition.targetY,
-            sourcePosition: edgePosition.sourcePosition,
-            targetPosition: edgePosition.targetPosition
           });
         }
 

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

@@ -4,10 +4,9 @@ import {
   internalsSymbol,
   createMarkerIds,
   fitView as fitViewUtil,
-  getDimensions,
   getElementsToRemove,
-  getHandleBounds,
+  panBy as panBySystem,
-  infiniteExtent,
+  updateNodeDimensions as updateNodeDimensionsSystem,
   type UpdateNodePositions,
   type NodeDimensionUpdate,
   type ViewportHelperFunctionOptions,
@@ -52,7 +51,6 @@ export function createStore(): SvelteFlowStore {
 
   function addEdge(edgeParams: Edge | Connection) {
     const edges = get(store.edges);
-
     store.edges.set(addEdgeUtil(edgeParams, edges));
   }
 
@@ -64,6 +62,7 @@ export function createStore(): SvelteFlowStore {
         if (nodeDragItem) {
           return {
             ...n,
+            [internalsSymbol]: n[internalsSymbol],
             dragging,
             positionAbsolute: nodeDragItem.positionAbsolute,
             position: nodeDragItem.position
@@ -76,54 +75,19 @@ export function createStore(): SvelteFlowStore {
   };
 
   function updateNodeDimensions(updates: NodeDimensionUpdate[]) {
-    const viewportNode = document?.querySelector('.svelte-flow__viewport');
+    const nextNodes = updateNodeDimensionsSystem(
+      updates,
+      get(store.nodes),
+      get(store.domNode),
+      get(store.nodeOrigin)
+    );
 
-    if (!viewportNode) {
+    if (!nextNodes) {
       return;
     }
 
-    const style = window.getComputedStyle(viewportNode);
-    const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform);
-    const nextNodes = get(store.nodes).map((node) => {
-      const update = updates.find((u) => u.id === node.id);
-
-      if (update) {
-        const dimensions = getDimensions(update.nodeElement);
-
-        const doUpdate = !!(
-          dimensions.width &&
-          dimensions.height &&
-          (node.width !== dimensions.width ||
-            node.height !== dimensions.height ||
-            update.forceUpdate)
-        );
-
-        if (doUpdate) {
-          const newNode = {
-            ...node,
-            width: dimensions.width,
-            height: dimensions.height,
-            [internalsSymbol]: {
-              ...node[internalsSymbol],
-              handleBounds: {
-                source: getHandleBounds('.source', update.nodeElement, zoom, node.origin),
-                target: getHandleBounds('.target', update.nodeElement, zoom, node.origin)
-              }
-            }
-          };
-
-          return newNode;
-        }
-      }
-
-      return node;
-    });
-
-    const panZoom = get(store.panZoom);
-
     const fitViewOnInitDone =
-      get(store.fitViewOnInitDone) ||
+      get(store.fitViewOnInitDone) || (get(store.fitViewOnInit) && fitView({ nodes: nextNodes }));
-      (get(store.fitViewOnInit) && !!panZoom && fitView({ nodes: nextNodes }));
 
     store.fitViewOnInitDone.set(fitViewOnInitDone);
     store.nodes.set(nextNodes);
@@ -174,22 +138,21 @@ export function createStore(): SvelteFlowStore {
 
   function fitView(options?: FitViewOptions) {
     const panZoom = get(store.panZoom);
+    const fitViewNodes = options?.nodes || get(store.nodes);
 
     if (!panZoom) {
       return false;
     }
 
-    const fitViewNodes = options?.nodes || get(store.nodes);
-
     return fitViewUtil(
       {
         nodes: fitViewNodes as Node[],
         width: get(store.width),
         height: get(store.height),
-        minZoom: 0.2,
+        minZoom: get(store.minZoom),
-        maxZoom: 2,
+        maxZoom: get(store.maxZoom),
         panZoom,
-        nodeOrigin: [0, 0]
+        nodeOrigin: get(store.nodeOrigin)
       },
       {}
     );
@@ -270,35 +233,14 @@ export function createStore(): SvelteFlowStore {
   }
 
   function panBy(delta: XYPosition) {
-    const panZoom = get(store.panZoom);
+    return panBySystem({
-    const transform = get(store.transform);
+      delta,
-    const width = get(store.width);
+      panZoom: get(store.panZoom),
-    const height = get(store.height);
+      transform: get(store.transform),
-
+      translateExtent: get(store.translateExtent),
-    if (!panZoom || (!delta.x && !delta.y)) {
+      width: get(store.width),
-      return false;
+      height: get(store.height)
-    }
+    });
-
-    const nextViewport = panZoom.setViewportConstrained(
-      {
-        x: transform[0] + delta.x,
-        y: transform[1] + delta.y,
-        zoom: transform[2]
-      },
-      [
-        [0, 0],
-        [width, height]
-      ],
-      infiniteExtent
-    );
-
-    const transformChanged =
-      !!nextViewport &&
-      (nextViewport.x !== transform[0] ||
-        nextViewport.y !== transform[1] ||
-        nextViewport.k !== transform[2]);
-
-    return transformChanged;
   }
 
   const updateConnection: UpdateConnection = (update) => {
@@ -328,6 +270,8 @@ export function createStore(): SvelteFlowStore {
     store.selectionRectMode.set(null);
     store.snapGrid.set(null);
     store.isValidConnection.set(() => true);
+    store.nodes.set([]);
+    store.edges.set([]);
 
     unselectNodesAndEdges();
     cancelConnection();

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

@@ -11,7 +11,8 @@ import {
   type PanZoomInstance,
   type CoordinateExtent,
   type IsValidConnection,
-  type GroupedEdges
+  type GroupedEdges,
+  type NodeOrigin
 } from '@xyflow/system';
 
 import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
@@ -22,7 +23,7 @@ import StraightEdge from '$lib/components/edges/StraightEdge.svelte';
 import SmoothStepEdge from '$lib/components/edges/SmoothStepEdge.svelte';
 import StepEdge from '$lib/components/edges/StepEdge.svelte';
 import type { ConnectionData, NodeTypes, EdgeTypes, EdgeLayouted, Node } from '$lib/types';
-import { createNodes, createEdges } from './utils';
+import { createNodesStore, createEdgesStore } from './utils';
 
 export const initConnectionData = {
   connectionStartHandle: null,
@@ -46,14 +47,15 @@ export const initialEdgeTypes = {
 
 export const getInitialStore = () => ({
   flowId: writable<string | null>(null),
-  nodes: createNodes([]),
+  nodes: createNodesStore([]),
   visibleNodes: readable<Node[]>([]),
-  edges: createEdges([]),
+  edges: createEdgesStore([]),
   edgeTree: readable<GroupedEdges<EdgeLayouted>[]>([]),
   height: writable<number>(500),
   width: writable<number>(500),
   minZoom: writable<number>(0.5),
   maxZoom: writable<number>(2),
+  nodeOrigin: writable<NodeOrigin>([0, 0]),
   nodeExtent: writable<CoordinateExtent>(infiniteExtent),
   translateExtent: writable<CoordinateExtent>(infiniteExtent),
   autoPanOnNodeDrag: writable<boolean>(true),

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

@@ -6,17 +6,14 @@ import {
   type Writable,
   get
 } from 'svelte/store';
-import {
+import { updateNodes } from '@xyflow/system';
-  isNumeric,
-  getNodePositionWithOrigin,
-  internalsSymbol,
-  type XYZPosition
-} from '@xyflow/system';
 
 import type { DefaultEdgeOptions, DefaultNodeOptions, Edge, Node } from '$lib/types';
 
+// we need to sync the user nodes and the internal nodes so that the user can receive the updates
+// made by Svelte Flow (like dragging or selecting a node).
 export function syncNodeStores(
-  nodesStore: ReturnType<typeof createNodes>,
+  nodesStore: ReturnType<typeof createNodesStore>,
   userNodesStore: Writable<Node[]>
 ) {
   const nodesStoreSetter = nodesStore.set;
@@ -38,8 +35,9 @@ export function syncNodeStores(
   nodesStore.update = userNodesStore.update = (fn: (nds: Node[]) => Node[]) => _set(fn(val));
 }
 
+// same for edges
 export function syncEdgeStores(
-  edgesStore: ReturnType<typeof createEdges>,
+  edgesStore: ReturnType<typeof createEdgesStore>,
   userEdgesStore: Writable<Edge[]>
 ) {
   const nodesStoreSetter = edgesStore.set;
@@ -58,66 +56,33 @@ export function syncEdgeStores(
   edgesStore.update = userEdgesStore.update = (fn: (nds: Edge[]) => Edge[]) => _set(fn(val));
 }
 
-export const createNodes = (
+export type NodeStoreOptions = {
+  elevateNodesOnSelect?: boolean;
+};
+
+// we are creating a custom store for the internals nodes in order to update the zIndex and positionAbsolute.
+// The user only passes in relative positions, so we need to calculate the absolute positions based on the parent nodes.
+export const createNodesStore = (
   nodes: Node[]
 ): {
   subscribe: (this: void, run: Subscriber<Node[]>) => Unsubscriber;
   update: (this: void, updater: Updater<Node[]>) => void;
   set: (this: void, value: Node[]) => Node[];
   setDefaultOptions: (opts: DefaultNodeOptions) => void;
+  setOptions: (opts: NodeStoreOptions) => void;
 } => {
   const { subscribe, set, update } = writable<Node[]>([]);
   let value = nodes;
   let defaults = {};
+  let elevateNodesOnSelect = false;
 
   const _set = (nds: Node[]): Node[] => {
-    const parentNodes: Record<string, boolean> = {};
+    const nextNodes = updateNodes(nds, value, {
-
+      elevateNodesOnSelect,
-    const nextNodes = nds.map((n) => {
+      defaults
-      const node: Node = { ...defaults, ...n, positionAbsolute: n.position };
-      const z = (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? 1 : 0);
-
-      if (node.parentNode) {
-        parentNodes[node.parentNode] = true;
-      }
-
-      Object.defineProperty(node, internalsSymbol, {
-        value: {
-          handleBounds: node?.[internalsSymbol]?.handleBounds,
-          z
-        }
-      });
-
-      return node;
     });
 
-    const nodesWithPositions = nextNodes.map((node) => {
+    value = nextNodes;
-      if (node.parentNode && !parentNodes[node.parentNode]) {
-        throw new Error(`Parent node ${node.parentNode} not found`);
-      }
-
-      if (node.parentNode || parentNodes?.[node.id]) {
-        const { x, y, z } = calculateXYZPosition(node, nextNodes, {
-          ...node.position,
-          z: node[internalsSymbol]?.z ?? 0
-        });
-
-        node.positionAbsolute = {
-          x,
-          y
-        };
-
-        node[internalsSymbol]!.z = z;
-
-        if (parentNodes?.[node.id]) {
-          node[internalsSymbol]!.isParent = true;
-        }
-      }
-
-      return node;
-    });
-
-    value = nodesWithPositions;
 
     set(value);
 
@@ -130,17 +95,22 @@ export const createNodes = (
     defaults = options;
   };
 
+  const setOptions = (options: NodeStoreOptions) => {
+    elevateNodesOnSelect = options.elevateNodesOnSelect ?? elevateNodesOnSelect;
+  };
+
   _set(value);
 
   return {
     subscribe,
     set: _set,
     update: _update,
-    setDefaultOptions
+    setDefaultOptions,
+    setOptions
   };
 };
 
-export const createEdges = (
+export const createEdgesStore = (
   edges: Edge[],
   defaultOptions?: DefaultEdgeOptions
 ): Writable<Edge[]> & { setDefaultOptions: (opts: DefaultEdgeOptions) => void } => {
@@ -169,20 +139,3 @@ export const createEdges = (
     setDefaultOptions
   };
 };
-
-function calculateXYZPosition(node: Node, nodes: Node[], result: XYZPosition): XYZPosition {
-  if (!node.parentNode) {
-    return result;
-  }
-  const parentNode = nodes.find((n) => n.id === node.parentNode)!;
-  const parentNodePosition = getNodePositionWithOrigin(parentNode, parentNode?.origin);
-
-  return calculateXYZPosition(parentNode, nodes, {
-    x: (result.x ?? 0) + parentNodePosition.x,
-    y: (result.y ?? 0) + parentNodePosition.y,
-    z:
-      (parentNode[internalsSymbol]?.z ?? 0) > (result.z ?? 0)
-        ? parentNode[internalsSymbol]?.z ?? 0
-        : result.z ?? 0
-  });
-}

packages/svelte/src/routes/drag-n-drop/Flow.svelte

@@ -80,6 +80,10 @@
 
     svelteFlow.nodes.update((nds) => nds.concat(newNode));
   };
+
+  $: {
+    console.log($nodes);
+  }
 </script>
 
 <main>

packages/system/src/utils/index.ts

@@ -3,3 +3,4 @@ export * from './edges';
 export * from './graph';
 export * from './general';
 export * from './marker';
+export * from './store';

packages/system/src/utils/store.ts

@@ -0,0 +1,218 @@
+import { internalsSymbol } from '../constants';
+import {
+  BaseNode,
+  CoordinateExtent,
+  Dimensions,
+  NodeDimensionUpdate,
+  NodeOrigin,
+  PanZoomInstance,
+  Transform,
+  XYPosition,
+  XYZPosition,
+} from '../types';
+import { getDimensions, getHandleBounds } from './dom';
+import { isNumeric } from './general';
+import { getNodePositionWithOrigin } from './graph';
+
+type ParentNodes = Record<string, boolean>;
+
+export function updateAbsolutePositions<NodeType extends BaseNode>(
+  nodes: NodeType[],
+  nodeOrigin: NodeOrigin = [0, 0],
+  parentNodes?: ParentNodes
+) {
+  return nodes.map((node) => {
+    if (node.parentNode && !nodes.find((n) => n.id === node.parentNode)) {
+      throw new Error(`Parent node ${node.parentNode} not found`);
+    }
+
+    if (node.parentNode || parentNodes?.[node.id]) {
+      const parentNode = node.parentNode ? nodes.find((n) => n.id === node.parentNode) : null;
+      const { x, y, z } = calculateXYZPosition(
+        node,
+        nodes,
+        {
+          ...node.position,
+          z: node[internalsSymbol]?.z ?? 0,
+        },
+        parentNode?.origin || nodeOrigin
+      );
+
+      node.positionAbsolute = {
+        x,
+        y,
+      };
+
+      node[internalsSymbol]!.z = z;
+
+      if (parentNodes?.[node.id]) {
+        node[internalsSymbol]!.isParent = true;
+      }
+    }
+
+    return node;
+  });
+}
+
+type UpdateNodesOptions<NodeType extends BaseNode> = {
+  nodeOrigin?: NodeOrigin;
+  elevateNodesOnSelect?: boolean;
+  defaults?: Partial<NodeType>;
+};
+
+export function updateNodes<NodeType extends BaseNode>(
+  nodes: NodeType[],
+  storeNodes: NodeType[],
+  options: UpdateNodesOptions<NodeType> = {
+    nodeOrigin: [0, 0] as NodeOrigin,
+    elevateNodesOnSelect: true,
+    defaults: {},
+  }
+): NodeType[] {
+  const parentNodes: ParentNodes = {};
+  const selectedNodeZ: number = options?.elevateNodesOnSelect ? 1000 : 0;
+
+  const nextNodes = nodes.map((n) => {
+    const currentStoreNode = storeNodes.find((storeNode) => n.id === storeNode.id);
+    const node: NodeType = {
+      ...options.defaults,
+      ...n,
+      positionAbsolute: n.position,
+      width: n.width || currentStoreNode?.width,
+      height: n.height || currentStoreNode?.height,
+    };
+    const z = (isNumeric(n.zIndex) ? n.zIndex : 0) + (n.selected ? selectedNodeZ : 0);
+    const currInternals = n?.[internalsSymbol] || currentStoreNode?.[internalsSymbol];
+
+    if (node.parentNode) {
+      parentNodes[node.parentNode] = true;
+    }
+
+    Object.defineProperty(node, internalsSymbol, {
+      enumerable: false,
+      value: {
+        handleBounds: currInternals?.handleBounds,
+        z,
+      },
+    });
+
+    return node;
+  });
+
+  const nodesWithPositions = updateAbsolutePositions(nextNodes, options.nodeOrigin, parentNodes);
+
+  return nodesWithPositions;
+}
+
+function calculateXYZPosition<NodeType extends BaseNode>(
+  node: NodeType,
+  nodes: NodeType[],
+  result: XYZPosition,
+  nodeOrigin: NodeOrigin
+): XYZPosition {
+  if (!node.parentNode) {
+    return result;
+  }
+
+  const parentNode = nodes.find((n) => n.id === node.parentNode)!;
+  const parentNodePosition = getNodePositionWithOrigin(parentNode, parentNode?.origin || nodeOrigin);
+
+  return calculateXYZPosition(
+    parentNode,
+    nodes,
+    {
+      x: (result.x ?? 0) + parentNodePosition.x,
+      y: (result.y ?? 0) + parentNodePosition.y,
+      z: (parentNode[internalsSymbol]?.z ?? 0) > (result.z ?? 0) ? parentNode[internalsSymbol]?.z ?? 0 : result.z ?? 0,
+    },
+    parentNode.origin || nodeOrigin
+  );
+}
+
+export function updateNodeDimensions(
+  updates: NodeDimensionUpdate[],
+  nodes: BaseNode[],
+  domNode: HTMLElement | null,
+  nodeOrigin?: NodeOrigin,
+  onUpdate?: (id: string, dimensions: Dimensions) => void
+): BaseNode[] | null {
+  const viewportNode = domNode?.querySelector('.xyflow__viewport');
+
+  if (!viewportNode) {
+    return null;
+  }
+
+  const style = window.getComputedStyle(viewportNode);
+  const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform);
+
+  const nextNodes = nodes.map((node) => {
+    const update = updates.find((u) => u.id === node.id);
+    if (update) {
+      const dimensions = getDimensions(update.nodeElement);
+      const doUpdate = !!(
+        dimensions.width &&
+        dimensions.height &&
+        (node.width !== dimensions.width || node.height !== dimensions.height || update.forceUpdate)
+      );
+
+      if (doUpdate) {
+        onUpdate?.(node.id, dimensions);
+
+        return {
+          ...node,
+          ...dimensions,
+          [internalsSymbol]: {
+            ...node[internalsSymbol],
+            handleBounds: {
+              source: getHandleBounds('.source', update.nodeElement, zoom, node.origin || nodeOrigin),
+              target: getHandleBounds('.target', update.nodeElement, zoom, node.origin || nodeOrigin),
+            },
+          },
+        };
+      }
+    }
+
+    return node;
+  });
+
+  return nextNodes;
+}
+
+export function panBy({
+  delta,
+  panZoom,
+  transform,
+  translateExtent,
+  width,
+  height,
+}: {
+  delta: XYPosition;
+  panZoom: PanZoomInstance | null;
+  transform: Transform;
+  translateExtent: CoordinateExtent;
+  width: number;
+  height: number;
+}) {
+  if (!panZoom || (!delta.x && !delta.y)) {
+    return false;
+  }
+
+  const nextViewport = panZoom.setViewportConstrained(
+    {
+      x: transform[0] + delta.x,
+      y: transform[1] + delta.y,
+      zoom: transform[2],
+    },
+    [
+      [0, 0],
+      [width, height],
+    ],
+    translateExtent
+  );
+
+  const transformChanged =
+    !!nextViewport &&
+    (nextViewport.x !== transform[0] || nextViewport.y !== transform[1] || nextViewport.k !== transform[2]);
+
+  return transformChanged;
+}

pnpm-lock.yaml

@@ -62,8 +62,8 @@ importers:
       '@vitejs/plugin-react-swc': ^3.3.2
       '@xyflow/react': workspace:*
       classcat: ^5.0.3
-      cypress: ^10.6.0
+      cypress: 12.14.0
-      cypress-real-events: ^1.7.1
+      cypress-real-events: 1.8.1
       dagre: ^0.8.5
       localforage: ^1.10.0
       react: ^18.2.0
@@ -89,8 +89,8 @@ importers:
       '@types/react-dom': registry.npmjs.org/@types/react-dom/18.2.4
       '@vitejs/plugin-react': registry.npmjs.org/@vitejs/plugin-react/4.0.0_vite@4.3.9
       '@vitejs/plugin-react-swc': registry.npmjs.org/@vitejs/plugin-react-swc/3.3.2_vite@4.3.9
-      cypress: registry.npmjs.org/cypress/10.11.0
+      cypress: registry.npmjs.org/cypress/12.14.0
-      cypress-real-events: registry.npmjs.org/cypress-real-events/1.8.1_cypress@10.11.0
+      cypress-real-events: registry.npmjs.org/cypress-real-events/1.8.1_cypress@12.14.0
       start-server-and-test: registry.npmjs.org/start-server-and-test/1.15.4
       typescript: registry.npmjs.org/typescript/4.9.5
       vite: registry.npmjs.org/vite/4.3.9
@@ -2036,7 +2036,7 @@ packages:
     version: 2.10.0
     requiresBuild: true
     dependencies:
-      '@types/node': registry.npmjs.org/@types/node/14.18.48
+      '@types/node': registry.npmjs.org/@types/node/18.16.16
     dev: true
     optional: true
 
@@ -2874,6 +2874,13 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
+  registry.npmjs.org/commander/6.2.1:
+    resolution: {integrity: sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/commander/-/commander-6.2.1.tgz}
+    name: commander
+    version: 6.2.1
+    engines: {node: '>= 6'}
+    dev: true
+
   registry.npmjs.org/common-tags/1.8.2:
     resolution: {integrity: sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz}
     name: common-tags
@@ -2995,7 +3002,7 @@ packages:
       stream-transform: registry.npmjs.org/stream-transform/2.1.3
     dev: true
 
-  registry.npmjs.org/cypress-real-events/1.8.1_cypress@10.11.0:
+  registry.npmjs.org/cypress-real-events/1.8.1_cypress@12.14.0:
     resolution: {integrity: sha512-8fFnA8EzS3EVbAmpSEUf3A8yZCmfU3IPOSGUDVFCdE1ke1gYL1A+gvXXV6HKUbTPRuvKKt2vpaMbUwYLpDRswQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/cypress-real-events/-/cypress-real-events-1.8.1.tgz}
     id: registry.npmjs.org/cypress-real-events/1.8.1
     name: cypress-real-events
@@ -3003,7 +3010,7 @@ packages:
     peerDependencies:
       cypress: ^4.x || ^5.x || ^6.x || ^7.x || ^8.x || ^9.x || ^10.x || ^11.x || ^12.x
     dependencies:
-      cypress: registry.npmjs.org/cypress/10.11.0
+      cypress: registry.npmjs.org/cypress/12.14.0
     dev: true
 
   registry.npmjs.org/cypress/10.11.0:
@@ -3058,6 +3065,58 @@ packages:
       yauzl: registry.npmjs.org/yauzl/2.10.0
     dev: true
 
+  registry.npmjs.org/cypress/12.14.0:
+    resolution: {integrity: sha512-HiLIXKXZaIT1RT7sw1sVPt+qKtis3uYNm6KwC4qoYjabwLKaqZlyS/P+uVvvlBNcHIwL/BC6nQZajpbUd7hOgQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/cypress/-/cypress-12.14.0.tgz}
+    name: cypress
+    version: 12.14.0
+    engines: {node: ^14.0.0 || ^16.0.0 || >=18.0.0}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      '@cypress/request': registry.npmjs.org/@cypress/request/2.88.11
+      '@cypress/xvfb': registry.npmjs.org/@cypress/xvfb/1.2.4_supports-color@8.1.1
+      '@types/node': registry.npmjs.org/@types/node/14.18.48
+      '@types/sinonjs__fake-timers': registry.npmjs.org/@types/sinonjs__fake-timers/8.1.1
+      '@types/sizzle': registry.npmjs.org/@types/sizzle/2.3.3
+      arch: registry.npmjs.org/arch/2.2.0
+      blob-util: registry.npmjs.org/blob-util/2.0.2
+      bluebird: registry.npmjs.org/bluebird/3.7.2
+      buffer: registry.npmjs.org/buffer/5.7.1
+      cachedir: registry.npmjs.org/cachedir/2.3.0
+      chalk: registry.npmjs.org/chalk/4.1.2
+      check-more-types: registry.npmjs.org/check-more-types/2.24.0
+      cli-cursor: registry.npmjs.org/cli-cursor/3.1.0
+      cli-table3: registry.npmjs.org/cli-table3/0.6.3
+      commander: registry.npmjs.org/commander/6.2.1
+      common-tags: registry.npmjs.org/common-tags/1.8.2
+      dayjs: registry.npmjs.org/dayjs/1.11.8
+      debug: registry.npmjs.org/debug/4.3.4_supports-color@8.1.1
+      enquirer: registry.npmjs.org/enquirer/2.3.6
+      eventemitter2: registry.npmjs.org/eventemitter2/6.4.7
+      execa: registry.npmjs.org/execa/4.1.0
+      executable: registry.npmjs.org/executable/4.1.1
+      extract-zip: registry.npmjs.org/extract-zip/2.0.1_supports-color@8.1.1
+      figures: registry.npmjs.org/figures/3.2.0
+      fs-extra: registry.npmjs.org/fs-extra/9.1.0
+      getos: registry.npmjs.org/getos/3.2.1
+      is-ci: registry.npmjs.org/is-ci/3.0.1
+      is-installed-globally: registry.npmjs.org/is-installed-globally/0.4.0
+      lazy-ass: registry.npmjs.org/lazy-ass/1.6.0
+      listr2: registry.npmjs.org/listr2/3.14.0_enquirer@2.3.6
+      lodash: registry.npmjs.org/lodash/4.17.21
+      log-symbols: registry.npmjs.org/log-symbols/4.1.0
+      minimist: registry.npmjs.org/minimist/1.2.8
+      ospath: registry.npmjs.org/ospath/1.2.2
+      pretty-bytes: registry.npmjs.org/pretty-bytes/5.6.0
+      proxy-from-env: registry.npmjs.org/proxy-from-env/1.0.0
+      request-progress: registry.npmjs.org/request-progress/3.0.0
+      semver: registry.npmjs.org/semver/7.5.1
+      supports-color: registry.npmjs.org/supports-color/8.1.1
+      tmp: registry.npmjs.org/tmp/0.2.1
+      untildify: registry.npmjs.org/untildify/4.0.0
+      yauzl: registry.npmjs.org/yauzl/2.10.0
+    dev: true
+
   registry.npmjs.org/d3-color/3.1.0:
     resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz}
     name: d3-color