port more updates

packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte

@@ -19,6 +19,8 @@
     onedgemouseleave
   }: { store: SvelteFlowStore; edge: EdgeLayouted } & EdgeEvents = $props();
 
+  $inspect(edge);
+
   let {
     source,
     target,

packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte

@@ -36,7 +36,7 @@
       const previous = previousLayoutedEdges.get(edge.id);
       if (
         previous &&
-        edge == previous.edge &&
+        edge === previous.edge &&
         sourceNode == previous.sourceNode &&
         targetNode == previous.targetNode
       ) {

packages/svelte/src/lib/hooks/useNodesEdgesViewport.svelte.ts

@@ -4,7 +4,7 @@ import { useStore } from '$lib/store';
  * Hook for getting the current nodes from the store.
  *
  * @public
- * @returns store with an array of nodes
+ * @returns reactive signal of the current edges
  */
 export function useNodes() {
   const { nodes } = $derived(useStore());
@@ -19,7 +19,7 @@ export function useNodes() {
  * Hook for getting the current edges from the store.
  *
  * @public
- * @returns store with an array of edges
+ * @returns reactive signal of the current edges
  */
 export function useEdges() {
   const { edges } = $derived(useStore());
@@ -29,3 +29,18 @@ export function useEdges() {
     }
   };
 }
+
+/**
+ * Hook for getting the current viewport from the store.
+ *
+ * @public
+ * @returns reactive signal of the current viewport
+ */
+export function useViewport() {
+  const { viewport } = $derived(useStore());
+  return {
+    get current() {
+      return viewport;
+    }
+  };
+}

packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts

@@ -370,7 +370,7 @@ export function useSvelteFlow(): {
 
       return Promise.resolve(true);
     },
-    getViewport: () => store.viewport,
+    getViewport: () => $state.snapshot(store.viewport),
     setCenter: async (x, y, options) => {
       const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : store.maxZoom;
       const currentPanZoom = store.panZoom;

packages/svelte/src/lib/hooks/useUpdateNodeInternals.svelte.ts

@@ -1,4 +1,3 @@
-import { get } from 'svelte/store';
 import type { UpdateNodeInternals } from '@xyflow/system';
 
 import { useStore } from '$lib/store';
@@ -10,7 +9,7 @@ import { useStore } from '$lib/store';
  * @returns function for updating node internals
  */
 export function useUpdateNodeInternals(): UpdateNodeInternals {
-  const { domNode, updateNodeInternals } = useStore();
+  const { domNode, updateNodeInternals } = $derived(useStore());
 
   // @todo: do we want to add this to system?
   const updateInternals = (id: string | string[]) => {
@@ -18,7 +17,7 @@ export function useUpdateNodeInternals(): UpdateNodeInternals {
     const updates = new Map();
 
     updateIds.forEach((updateId) => {
-      const nodeElement = get(domNode)?.querySelector(
+      const nodeElement = domNode?.querySelector(
         `.svelte-flow__node[data-id="${updateId}"]`
       ) as HTMLDivElement;
 

packages/svelte/src/lib/index.ts

@@ -31,10 +31,10 @@ export { useStore } from '$lib/store';
 export * from '$lib/utils';
 
 //hooks
-export * from '$lib/hooks/useSvelteFlow';
-export * from '$lib/hooks/useUpdateNodeInternals';
+export * from '$lib/hooks/useSvelteFlow.svelte';
+export * from '$lib/hooks/useUpdateNodeInternals.svelte';
 export * from '$lib/hooks/useConnection.svelte';
-export * from '$lib/hooks/useNodesEdges.svelte';
+export * from '$lib/hooks/useNodesEdgesViewport.svelte';
 export * from '$lib/hooks/useHandleConnections.svelte';
 export * from '$lib/hooks/useNodesData';
 export * from '$lib/hooks/useInternalNode';

packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte

@@ -11,7 +11,7 @@
     type XYResizerChildChange
   } from '@xyflow/system';
   import type { ResizeControlProps } from './types';
-  import { get } from 'svelte/store';
+  import { useSvelteFlow } from '$lib/hooks/useSvelteFlow.svelte';
 
   let {
     nodeId,
@@ -34,6 +34,8 @@
 
   const store = useStore();
 
+  const { updateNode } = useSvelteFlow();
+
   let id = $derived(
     typeof nodeId === 'string' ? nodeId : getContext<string>('svelteflow__node_id')
   );
@@ -72,28 +74,20 @@
           };
         },
         onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => {
-          const node = store.nodeLookup.get(id)?.internals.userNode;
-          if (!node) {
-            return;
-          }
-
-          if (change.x !== undefined && change.y !== undefined) {
-            node.position = { x: change.x, y: change.y };
-          }
-
-          if (change.width !== undefined && change.height !== undefined) {
-            node.width = change.width;
-            node.height = change.height;
-          }
+          updateNode(id, (node) => ({
+            ...node,
+            position: { x: change.x ?? node.position.x, y: change.y ?? node.position.y },
+            width: change.width ?? node.width,
+            height: change.height ?? node.height
+          }));
 
+          // TODO: performance?
           for (const childChange of childChanges) {
-            const childNode = store.nodeLookup.get(childChange.id)?.internals.userNode;
-            if (childNode) {
-              childNode.position = childChange.position;
-            }
+            updateNode(childChange.id, (node) => ({
+              ...node,
+              position: childChange.position
+            }));
           }
-
-          // store.nodes.set(get(store.nodes));
         }
       });
     }

packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte

@@ -4,7 +4,7 @@
 
   import portal from '$lib/actions/portal';
   import { useStore } from '$lib/store';
-  import { useSvelteFlow } from '$lib/hooks/useSvelteFlow';
+  import { useSvelteFlow } from '$lib/hooks/useSvelteFlow.svelte';
 
   import type { InternalNode } from '$lib/types';
   import type { NodeToolbarProps } from './types';