feat(svelte): add useHandleConnections, useNodesData and useUpdateNodeData

packages/react/src/store/index.ts

@@ -7,10 +7,11 @@ import {
   panBy as panBySystem,
   Dimensions,
   updateNodeDimensions as updateNodeDimensionsSystem,
+  updateConnectionLookup,
 } from '@xyflow/system';
 
 import { applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes';
-import { updateConnectionLookup, updateNodesAndEdgesSelections } from './utils';
+import { updateNodesAndEdgesSelections } from './utils';
 import getInitialState from './initialState';
 import type {
   ReactFlowState,

packages/react/src/store/initialState.ts

@@ -5,11 +5,10 @@ import {
   getNodesBounds,
   getViewportForBounds,
   Transform,
-  Connection,
+  updateConnectionLookup,
 } from '@xyflow/system';
 
 import type { Edge, Node, ReactFlowStore } from '../types';
-import { updateConnectionLookup } from './utils';
 
 const getInitialState = ({
   nodes = [],
@@ -24,8 +23,8 @@ const getInitialState = ({
   height?: number;
   fitView?: boolean;
 } = {}): ReactFlowStore => {
-  const nodeLookup = new Map<string, Node>();
-  const connectionLookup = updateConnectionLookup(new Map<string, Map<string, Connection>>(), edges);
+  const nodeLookup = new Map();
+  const connectionLookup = updateConnectionLookup(new Map(), edges);
   const nextNodes = updateNodes(nodes, nodeLookup, { nodeOrigin: [0, 0], elevateNodesOnSelect: false });
 
   let transform: Transform = [0, 0, 1];

packages/react/src/store/utils.ts

@@ -1,6 +1,5 @@
 import type { StoreApi } from 'zustand';
 import type { Edge, EdgeSelectionChange, Node, NodeSelectionChange, ReactFlowState } from '../types';
-import { Connection } from '@xyflow/system';
 
 export function handleControlledSelectionChange<NodeOrEdge extends Node | Edge>(
   changes: NodeSelectionChange[] | EdgeSelectionChange[],
@@ -43,23 +42,3 @@ export function updateNodesAndEdgesSelections({ changedNodes, changedEdges, get,
     onEdgesChange?.(changedEdges);
   }
 }
-
-export function updateConnectionLookup(lookup: Map<string, Map<string, Connection>>, edges: Edge[]) {
-  lookup.clear();
-
-  edges.forEach(({ source, target, sourceHandle = null, targetHandle = null }) => {
-    if (source && target) {
-      const sourceKey = `${source}-source-${sourceHandle}`;
-      const targetKey = `${target}-target-${targetHandle}`;
-
-      const prevSource = lookup.get(sourceKey) || new Map();
-      const prevTarget = lookup.get(targetKey) || new Map();
-      const connection = { source, target, sourceHandle, targetHandle };
-
-      lookup.set(sourceKey, prevSource.set(`${target}-${targetHandle}`, connection));
-      lookup.set(targetKey, prevTarget.set(`${source}-${sourceHandle}`, connection));
-    }
-  });
-
-  return lookup;
-}