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

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