optimized selection via selectionbox, implemented proper defaultEdge/-NodeOptions

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

@@ -27,8 +27,8 @@
     targetY,
     sourcePosition,
     targetPosition,
-    animated,
+    animated = false,
-    selected,
+    selected = false,
     label,
     labelStyle,
     data = {},
@@ -40,12 +40,12 @@
     markerStart,
     markerEnd,
     selectable: edgeSelectable,
-    deletable,
+    deletable = true,
     hidden,
     zIndex,
     class: className,
     ariaLabel
-  } = $derived(edge);
+  } = $derived(store.defaultEdgeOptions ? { ...store.defaultEdgeOptions, ...edge } : edge);
 
   const { id } = edge;
   setContext('svelteflow__edge_id', id);
@@ -64,7 +64,7 @@
     const edge = store.edgeLookup.get(id);
 
     if (edge) {
-      store.handleEdgeSelection(id);
+      if (selectable) store.handleEdgeSelection(id);
       onedgeclick?.({ event, edge });
     }
   }
@@ -79,6 +79,8 @@
       callback({ event, edge });
     }
   }
+
+  $inspect(selected);
 </script>
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -132,7 +134,7 @@
         {style}
         {interactionWidth}
         {selectable}
-        deletable={deletable ?? true}
+        {deletable}
         {type}
         sourceHandleId={sourceHandle}
         targetHandleId={targetHandle}

packages/svelte/src/lib/components/Handle/Handle.svelte

@@ -40,7 +40,6 @@
   );
 
   let store = useStore();
-  // let { edges } = store;
 
   function onPointerDown(event: MouseEvent | TouchEvent) {
     const isMouseTriggered = isMouseEvent(event);
@@ -91,7 +90,6 @@
   $effect.pre(() => {
     // connectionLookup is not reactive, so we use edges to get notified about updates
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    // $edges;
     store.edges;
     if (onconnect || ondisconnect) {
       let connections = store.connectionLookup.get(`${nodeId}-${type}-${handleId}`);

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -50,7 +50,7 @@
       z: zIndex = 0,
       positionAbsolute: { x: positionX, y: positionY }
     }
-  } = $derived(node);
+  } = $derived(store.defaultNodeOptions ? { ...store.defaultNodeOptions, ...node } : node);
 
   let { id } = node;
 
@@ -169,7 +169,7 @@
     use:drag={{
       nodeId: id,
       isSelectable: selectable,
-      disabled: false,
+      disabled: !draggable,
       handleSelector: dragHandle,
       noDragClass: 'nodrag',
       nodeClickDistance,

packages/svelte/src/lib/components/UserSelection/UserSelection.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-  import { useStore } from '$lib/store';
-  import { Selection } from '$lib/components/Selection';
-
-  const store = useStore();
-</script>
-
-<Selection
-  isVisible={!!(store.selectionRect && store.selectionRectMode === 'user')}
-  width={store.selectionRect?.width}
-  height={store.selectionRect?.height}
-  x={store.selectionRect?.x}
-  y={store.selectionRect?.y}
-/>

packages/svelte/src/lib/components/UserSelection/index.ts

@@ -1 +0,0 @@
-export { default as UserSelection } from './UserSelection.svelte';

packages/svelte/src/lib/container/Pane/Pane.svelte

@@ -11,9 +11,9 @@
     };
   }
 
-  export function toggleSelected<Item extends Node | Edge>(ids: string[]) {
+  export function toggleSelected<Item extends Node | Edge>(ids: Set<string>) {
     return (item: Item) => {
-      const isSelected = ids.includes(item.id);
+      const isSelected = ids.has(item.id);
 
       if (item.selected !== isSelected) {
         return { ...item, selected: isSelected };
@@ -22,17 +22,27 @@
       return item;
     };
   }
+
+  // TODO: maybe replace with set.intersection?
+  function setEq(a: Set<string>, b: Set<string>) {
+    if (a.size !== b.size) {
+      return false;
+    }
+
+    for (const item of a) {
+      if (!b.has(item)) {
+        return false;
+      }
+    }
+
+    return true;
+  }
 </script>
 
 <script lang="ts">
-  import {
+  import { SelectionMode, getEventPosition, getNodesInside } from '@xyflow/system';
-    SelectionMode,
-    getEventPosition,
-    getNodesInside,
-    getConnectedEdges
-  } from '@xyflow/system';
 
-  import type { Node, Edge, InternalNode } from '$lib/types';
+  import type { Node, Edge } from '$lib/types';
   import type { PaneProps } from './types';
 
   let {
@@ -47,7 +57,10 @@
   // svelte-ignore non_reactive_update
   let container: HTMLDivElement;
   let containerBounds: DOMRect | null = null;
-  let selectedNodes: InternalNode[] = [];
+  // let selectedNodes: InternalNode[] = [];
+
+  let selectedNodeIds: Set<string> = new Set();
+  let selectedEdgeIds: Set<string> = new Set();
 
   let panOnDragActive = $derived(store.panActivationKeyPressed || panOnDrag);
   let isSelecting = $derived(
@@ -109,7 +122,7 @@
     if (!isSelecting || !containerBounds || !store.selectionRect) {
       return;
     }
-
+    const start = performance.now();
     selectionInProgress = true;
 
     const mousePos = getEventPosition(event, containerBounds);
@@ -122,36 +135,48 @@
       width: Math.abs(mousePos.x - startX),
       height: Math.abs(mousePos.y - startY)
     };
-    const prevSelectedNodeIds = selectedNodes.map((n) => n.id);
-    const prevSelectedEdgeIds = getConnectedEdges(selectedNodes, store.edges).map((e) => e.id);
 
-    selectedNodes = getNodesInside(
+    const prevSelectedNodeIds = selectedNodeIds;
-      store.nodeLookup,
+    const prevSelectedEdgeIds = selectedEdgeIds;
-      nextUserSelectRect,
+
-      [store.viewport.x, store.viewport.y, store.viewport.zoom],
+    selectedNodeIds = new Set(
-      store.selectionMode === SelectionMode.Partial,
+      getNodesInside(
-      true
+        store.nodeLookup,
+        nextUserSelectRect,
+        [store.viewport.x, store.viewport.y, store.viewport.zoom],
+        store.selectionMode === SelectionMode.Partial,
+        true,
+        store.defaultNodeOptions.selectable
+      ).map((n) => n.id)
     );
-    const selectedEdgeIds = getConnectedEdges(selectedNodes, store.edges).map((e) => e.id);
+
-    const selectedNodeIds = selectedNodes.map((n) => n.id);
+    // TODO: replace with extended connectionLookup
+    let edgesSelectable = store.defaultEdgeOptions.selectable ?? true;
+    selectedEdgeIds = new Set();
+    store.edges.forEach((edge) => {
+      if (
+        selectedNodeIds.has(edge.source) &&
+        selectedNodeIds.has(edge.target) &&
+        (edge.selectable ?? edgesSelectable)
+      ) {
+        selectedEdgeIds.add(edge.id);
+      }
+    });
 
     // this prevents unnecessary updates while updating the selection rectangle
-    if (
+    if (setEq(prevSelectedNodeIds, selectedNodeIds)) {
-      prevSelectedNodeIds.length !== selectedNodeIds.length ||
-      selectedNodeIds.some((id) => !prevSelectedNodeIds.includes(id))
-    ) {
       store.nodes = store.nodes.map(toggleSelected(selectedNodeIds));
     }
 
-    if (
+    if (setEq(prevSelectedEdgeIds, selectedEdgeIds)) {
-      prevSelectedEdgeIds.length !== selectedEdgeIds.length ||
-      selectedEdgeIds.some((id) => !prevSelectedEdgeIds.includes(id))
-    ) {
       store.edges = store.edges.map(toggleSelected(selectedEdgeIds));
     }
 
     store.selectionRectMode = 'user';
     store.selectionRect = nextUserSelectRect;
+
+    const end = performance.now();
+    // console.log('onPointerMove', end - start);
   }
 
   function onPointerUp(event: PointerEvent) {
@@ -168,7 +193,7 @@
     }
     store.selectionRect = null;
 
-    if (selectedNodes.length > 0) {
+    if (selectedNodeIds.size > 0) {
       store.selectionRectMode = 'nodes';
     }
 

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -9,8 +9,8 @@
   import { Viewport as ViewportComponent } from '$lib/container/Viewport';
   import { NodeRenderer } from '$lib/container/NodeRenderer';
   import { EdgeRenderer } from '$lib/container/EdgeRenderer';
-  import { UserSelection } from '$lib/components/UserSelection';
   import { NodeSelection } from '$lib/components/NodeSelection';
+  import { Selection } from '$lib/components/Selection';
   import { KeyHandler } from '$lib/components/KeyHandler';
   import { ConnectionLine } from '$lib/components/ConnectionLine';
   import { Attribution } from '$lib/components/Attribution';
@@ -194,7 +194,13 @@
           {onnodedragstop}
         />
       </ViewportComponent>
-      <UserSelection />
+      <Selection
+        isVisible={!!(store.selectionRect && store.selectionRectMode === 'user')}
+        width={store.selectionRect?.width}
+        height={store.selectionRect?.height}
+        x={store.selectionRect?.x}
+        y={store.selectionRect?.y}
+      />
     </Pane>
   </Zoom>
   <Attribution {proOptions} position={attributionPosition} />

packages/svelte/src/lib/types/nodes.ts

@@ -40,6 +40,7 @@ export type NodeTypes = Record<
   >
 >;
 
+// TODO: we should be more selective about this but otherwise good to go
 export type DefaultNodeOptions = Partial<Omit<Node, 'id'>>;
 
 export type BuiltInNode =

packages/system/src/types/handles.ts

@@ -36,5 +36,5 @@ export type HandleProps = {
   /** Id of the handle
    * @remarks optional if there is only one handle of this type
    */
-  id?: string;
+  id?: string | null;
 };

packages/system/src/utils/graph.ts

@@ -202,7 +202,8 @@ export const getNodesInside = <NodeType extends NodeBase = NodeBase>(
   [tx, ty, tScale]: Transform = [0, 0, 1],
   partially = false,
   // set excludeNonSelectableNodes if you want to pay attention to the nodes "selectable" attribute
-  excludeNonSelectableNodes = false
+  excludeNonSelectableNodes = false,
+  defaultNodeSelectable: boolean = true
 ): InternalNodeBase<NodeType>[] => {
   const paneRect = {
     ...pointToRendererPoint(rect, [tx, ty, tScale]),
@@ -213,7 +214,7 @@ export const getNodesInside = <NodeType extends NodeBase = NodeBase>(
   const visibleNodes: InternalNodeBase<NodeType>[] = [];
 
   for (const node of nodes.values()) {
-    const { measured, selectable = true, hidden = false } = node;
+    const { measured, selectable = defaultNodeSelectable, hidden = false } = node;
 
     if ((excludeNonSelectableNodes && !selectable) || hidden) {
       continue;