Merge branch 'main' into perf/noderenderer-minimap

packages/svelte/src/lib/store/index.ts

@@ -192,15 +192,20 @@ export function createStore({
   }
 
   function unselectNodesAndEdges(params?: { nodes?: Node[]; edges?: Edge[] }) {
-    const nodeIdsToUnselect = (params?.nodes ? params.nodes : get(store.nodes)).map(
-      (item) => item.id
-    );
-    const edgeIdsToUnselect = (params?.edges ? params.edges : get(store.edges)).map(
-      (item) => item.id
-    );
+    const selectedNodeIds = (params?.nodes ? params.nodes : get(store.nodes))
+      .filter((node) => node.selected)
+      .map((node) => node.id);
+    const selectedEdgeIds = (params?.edges ? params.edges : get(store.edges))
+      .filter((edge) => edge.selected)
+      .map((edge) => edge.id);
 
-    store.nodes.update((ns) => ns.map(resetSelectedItem(nodeIdsToUnselect)));
-    store.edges.update((es) => es.map(resetSelectedItem(edgeIdsToUnselect)));
+    if (selectedNodeIds.length) {
+      store.nodes.update((ns) => ns.map(resetSelectedItem(selectedNodeIds)));
+    }
+
+    if (selectedEdgeIds.length) {
+      store.edges.update((es) => es.map(resetSelectedItem(selectedEdgeIds)));
+    }
   }
 
   store.deleteKeyPressed.subscribe((deleteKeyPressed) => {

packages/svelte/src/lib/store/initial-store.ts

@@ -17,17 +17,26 @@ import {
   type Viewport,
   adoptUserProvidedNodes,
   getNodesBounds,
-  getViewportForBounds
+  getViewportForBounds,
+  updateConnectionLookup,
+  type ConnectionLookup,
+  type OnConnect,
+  type OnConnectStart,
+  type OnConnectEnd
 } from '@xyflow/system';
 
 import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
 import InputNode from '$lib/components/nodes/InputNode.svelte';
 import OutputNode from '$lib/components/nodes/OutputNode.svelte';
 import GroupNode from '$lib/components/nodes/GroupNode.svelte';
-import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
-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 {
+  BezierEdgeInternal,
+  SmoothStepEdgeInternal,
+  StraightEdgeInternal,
+  StepEdgeInternal
+} from '$lib/components/edges';
+
 import type {
   NodeTypes,
   EdgeTypes,
@@ -35,7 +44,8 @@ import type {
   Node,
   Edge,
   FitViewOptions,
-  OnDelete
+  OnDelete,
+  OnEdgeCreate
 } from '$lib/types';
 import { createNodesStore, createEdgesStore } from './utils';
 import { initConnectionProps, type ConnectionProps } from './derived-connection-props';
@@ -48,10 +58,10 @@ export const initialNodeTypes = {
 };
 
 export const initialEdgeTypes = {
-  straight: StraightEdge,
-  smoothstep: SmoothStepEdge,
-  default: BezierEdge,
-  step: StepEdge
+  straight: StraightEdgeInternal,
+  smoothstep: SmoothStepEdgeInternal,
+  default: BezierEdgeInternal,
+  step: StepEdgeInternal
 };
 
 export const getInitialStore = ({
@@ -67,11 +77,12 @@ export const getInitialStore = ({
   height?: number;
   fitView?: boolean;
 }) => {
-  const nodeLookup = new Map<string, Node>();
+  const nodeLookup = new Map();
   const nextNodes = adoptUserProvidedNodes(nodes, nodeLookup, {
     nodeOrigin: [0, 0],
     elevateNodesOnSelect: false
   });
+  const connectionLookup = updateConnectionLookup(new Map(), edges);
 
   let viewport: Viewport = { x: 0, y: 0, zoom: 1 };
 
@@ -86,8 +97,9 @@ export const getInitialStore = ({
     nodes: createNodesStore(nextNodes, nodeLookup),
     nodeLookup: readable<Map<string, Node>>(nodeLookup),
     visibleNodes: readable<Node[]>([]),
-    edges: createEdgesStore(edges),
+    edges: createEdgesStore(edges, connectionLookup),
     edgeTree: readable<GroupedEdges<EdgeLayouted>[]>([]),
+    connectionLookup: readable<ConnectionLookup>(connectionLookup),
     height: writable<number>(500),
     width: writable<number>(500),
     minZoom: writable<number>(0.5),
@@ -130,6 +142,10 @@ export const getInitialStore = ({
     lib: readable<string>('svelte'),
     onlyRenderVisibleElements: writable<boolean>(false),
     onerror: writable<OnError>(devWarn),
-    ondelete: writable<OnDelete>(undefined)
+    ondelete: writable<OnDelete>(undefined),
+    onedgecreate: writable<OnEdgeCreate>(undefined),
+    onconnect: writable<OnConnect>(undefined),
+    onconnectstart: writable<OnConnectStart>(undefined),
+    onconnectend: writable<OnConnectEnd>(undefined)
   };
 };

packages/svelte/src/lib/store/utils.ts

@@ -6,7 +6,15 @@ import {
   type Writable,
   get
 } from 'svelte/store';
-import { adoptUserProvidedNodes, type Viewport, type PanZoomInstance } from '@xyflow/system';
+import {
+  adoptUserProvidedNodes,
+  updateConnectionLookup,
+  type Viewport,
+  type PanZoomInstance,
+  type Viewport,
+  type PanZoomInstance,
+  type ConnectionLookup
+} from '@xyflow/system';
 
 import type { DefaultEdgeOptions, DefaultNodeOptions, Edge, Node } from '$lib/types';
 
@@ -168,6 +176,7 @@ export const createNodesStore = (
 
 export const createEdgesStore = (
   edges: Edge[],
+  connectionLookup: ConnectionLookup,
   defaultOptions?: DefaultEdgeOptions
 ): Writable<Edge[]> & { setDefaultOptions: (opts: DefaultEdgeOptions) => void } => {
   const { subscribe, set, update } = writable<Edge[]>([]);
@@ -176,6 +185,9 @@ export const createEdgesStore = (
 
   const _set: typeof set = (eds: Edge[]) => {
     const nextEdges = defaults ? eds.map((edge) => ({ ...defaults, ...edge })) : eds;
+
+    updateConnectionLookup(connectionLookup, nextEdges);
+
     value = nextEdges;
     set(value);
   };