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/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),