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
2023-06-13 15:55:06 +02:00
parent 51375cd482
commit 65d1c3bbd4
27 changed files with 426 additions and 393 deletions
--- a/examples/vite-app/cypress/components/hooks/useEdges.cy.tsx
+++ b/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';

--- a/examples/vite-app/cypress/components/hooks/useNodes.cy.tsx
+++ b/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';

--- a/examples/vite-app/cypress/components/hooks/useNodesInitialized.cy.tsx
+++ b/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';
--- a/examples/vite-app/cypress/components/hooks/useOnViewportChange.cy.tsx
+++ b/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', () => {
--- a/examples/vite-app/cypress/components/hooks/useViewport.cy.tsx
+++ b/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', () => {
--- a/examples/vite-app/cypress/components/reactflow/basic-props.cy.tsx
+++ b/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';
--- a/examples/vite-app/cypress/components/reactflow/multiple-instance.cy.tsx
+++ b/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) {
--- a/examples/vite-app/cypress/components/reactflow/uncontrolled.cy.tsx
+++ b/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';

--- a/examples/vite-app/cypress/components/reactflow/view-props.cy.tsx
+++ b/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';
--- a/examples/vite-app/package.json
+++ b/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-real-events": "^1.7.1",
+    "cypress": "12.14.0",
+    "cypress-real-events": "1.8.1",
    "start-server-and-test": "^1.14.0",
    "typescript": "^4.9.4",
    "vite": "4.3.9"
--- a/package.json
+++ b/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",
--- a/packages/react/src/container/Viewport/index.tsx
+++ b/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>
  );
--- a/packages/react/src/hooks/useResizeHandler.ts
+++ b/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) {
--- a/packages/react/src/store/index.ts
+++ b/packages/react/src/store/index.ts
@@ -1,15 +1,16 @@
 import { createStore } from 'zustand';
 import {
  clampPosition,
-  getDimensions,
-  fitView,
-  getHandleBounds,
-  internalsSymbol,
-  type CoordinateExtent,
+  fitView as fitViewSystem,
+  updateNodes,
+  updateAbsolutePositions,
+  panBy as panBySystem,
+  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 {
-        onNodesChange,
+      const { onNodesChange, fitView, nodes, fitViewOnInit, fitViewDone, fitViewOnInitOptions, domNode, nodeOrigin } =
+        get();
+      const changes: NodeDimensionChange[] = [];
+
+      const updatedNodes = updateNodeDimensionsSystem(
+        updates,
        nodes,
-        fitViewOnInit,
-        fitViewOnInitDone,
-        fitViewOnInitOptions,
        domNode,
        nodeOrigin,
-        width,
-        height,
-        minZoom,
-        maxZoom,
-        panZoom,
-      } = get();
-      const viewportNode = domNode?.querySelector('.react-flow__viewport');
+        (id: string, dimensions: Dimensions) => {
+          changes.push({
+            id: id,
+            type: 'dimensions',
+            dimensions,
+          });
+        }
+      );

-      if (!viewportNode) {
+      if (!updatedNodes) {
        return;
      }

-      const style = window.getComputedStyle(viewportNode);
-      const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform);
-      const changes: NodeDimensionChange[] = [];
+      const nextNodes = updateAbsolutePositions(updatedNodes, nodeOrigin);

-      const nextNodes = nodes.map((node) => {
-        const update = updates.find((change) => change.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) {
-            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 ||
+      const nextFitViewDone =
+        fitViewDone ||
        (fitViewOnInit &&
-          !!panZoom &&
-          fitView(
-            {
-              nodes: nextNodes,
-              width,
-              height,
-              panZoom,
-              minZoom,
-              maxZoom,
-              nodeOrigin,
-            },
-            fitViewOnInitOptions
-          ));
-      set({ nodes: nextNodes, fitViewOnInitDone: nextFitViewOnInitDone });
+          fitView({
+            ...fitViewOnInitOptions,
+            nodes: nextNodes,
+          }));
+
+      set({ nodes: nextNodes, fitViewDone: nextFitViewDone });

      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 = [
-        [0, 0],
-        [width, height],
-      ];
-
-      const constrainedTransform = panZoom.setViewportConstrained(
-        { x: transform[0] + delta.x, y: transform[1] + delta.y, zoom: transform[2] },
-        extent,
-        translateExtent
+      return fitViewSystem(
+        {
+          nodes: fitViewNodes as Node[],
+          width,
+          height,
+          panZoom,
+          minZoom,
+          maxZoom,
+          nodeOrigin,
+        },
+        options
      );
-
-      const transformChanged =
-        !!constrainedTransform &&
-        (transform[0] !== constrainedTransform.x ||
-          transform[1] !== constrainedTransform.y ||
-          transform[2] !== constrainedTransform.k);
-
-      return transformChanged;
    },
    cancelConnection: () =>
      set({
--- a/packages/react/src/store/initialState.ts
+++ b/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,

--- a/packages/react/src/store/utils.ts
+++ b/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[]
--- a/packages/react/src/types/store.ts
+++ b/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;
--- a/packages/svelte/README.md
+++ b/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';
--- a/packages/svelte/src/lib/container/Viewport/Viewport.svelte
+++ b/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 />
--- a/packages/svelte/src/lib/store/edge-tree.ts
+++ b/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,
-            sourceY: edgePosition.sourceY,
-            targetX: edgePosition.targetX,
-            targetY: edgePosition.targetY,
-            sourcePosition: edgePosition.sourcePosition,
-            targetPosition: edgePosition.targetPosition
+            ...edgePosition
          });
        }

--- a/packages/svelte/src/lib/store/index.ts
+++ b/packages/svelte/src/lib/store/index.ts
@@ -4,10 +4,9 @@ import {
  internalsSymbol,
  createMarkerIds,
  fitView as fitViewUtil,
-  getDimensions,
  getElementsToRemove,
-  getHandleBounds,
-  infiniteExtent,
+  panBy as panBySystem,
+  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.fitViewOnInit) && !!panZoom && fitView({ nodes: nextNodes }));
+      get(store.fitViewOnInitDone) || (get(store.fitViewOnInit) && 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,
-        maxZoom: 2,
+        minZoom: get(store.minZoom),
+        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);
-    const transform = get(store.transform);
-    const width = get(store.width);
-    const height = get(store.height);
-
-    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]
-      ],
-      infiniteExtent
-    );
-
-    const transformChanged =
-      !!nextViewport &&
-      (nextViewport.x !== transform[0] ||
-        nextViewport.y !== transform[1] ||
-        nextViewport.k !== transform[2]);
-
-    return transformChanged;
+    return panBySystem({
+      delta,
+      panZoom: get(store.panZoom),
+      transform: get(store.transform),
+      translateExtent: get(store.translateExtent),
+      width: get(store.width),
+      height: get(store.height)
+    });
  }

  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();
--- a/packages/svelte/src/lib/store/initial-store.ts
+++ b/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),
--- a/packages/svelte/src/lib/store/utils.ts
+++ b/packages/svelte/src/lib/store/utils.ts
@@ -6,17 +6,14 @@ import {
  type Writable,
  get
 } from 'svelte/store';
-import {
-  isNumeric,
-  getNodePositionWithOrigin,
-  internalsSymbol,
-  type XYZPosition
-} from '@xyflow/system';
+import { updateNodes } 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 = nds.map((n) => {
-      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 nextNodes = updateNodes(nds, value, {
+      elevateNodesOnSelect,
+      defaults
    });

-    const nodesWithPositions = nextNodes.map((node) => {
-      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;
+    value = nextNodes;

    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
-  });
-}
--- a/packages/svelte/src/routes/drag-n-drop/Flow.svelte
+++ b/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>
--- a/packages/system/src/utils/index.ts
+++ b/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';
--- a/packages/system/src/utils/store.ts
+++ b/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;
+}
--- a/pnpm-lock.yaml
+++ b/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-real-events: ^1.7.1
+      cypress: 12.14.0
+      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-real-events: registry.npmjs.org/cypress-real-events/1.8.1_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@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