Merge branch 'next' into svelte-on-init

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

@@ -0,0 +1,39 @@
+import { get } from 'svelte/store';
+import { errorMessages } from '@xyflow/system';
+
+import { useStore } from '$lib/store';
+
+export function useHandleEdgeSelect() {
+  const {
+    edgeLookup,
+    selectionRect,
+    selectionRectMode,
+    multiselectionKeyPressed,
+    addSelectedEdges,
+    unselectNodesAndEdges,
+    elementsSelectable
+  } = useStore();
+
+  return (id: string) => {
+    const edge = get(edgeLookup).get(id);
+
+    if (!edge) {
+      console.warn('012', errorMessages['error012'](id));
+      return;
+    }
+
+    const selectable =
+      edge.selectable || (get(elementsSelectable) && typeof edge.selectable === 'undefined');
+
+    if (selectable) {
+      selectionRect.set(null);
+      selectionRectMode.set(null);
+
+      if (!edge.selected) {
+        addSelectedEdges([id]);
+      } else if (edge.selected && get(multiselectionKeyPressed)) {
+        unselectNodesAndEdges({ nodes: [], edges: [edge] });
+      }
+    }
+  };
+}

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

@@ -29,6 +29,10 @@ import { isNode } from '$lib/utils';
 export function useSvelteFlow(): {
   zoomIn: ZoomInOut;
   zoomOut: ZoomInOut;
+  getNode: (id: string) => Node | undefined;
+  getNodes: (ids?: string[]) => Node[];
+  getEdge: (id: string) => Edge | undefined;
+  getEdges: (ids?: string[]) => Edge[];
   setZoom: (zoomLevel: number, options?: ViewportHelperFunctionOptions) => void;
   getZoom: () => number;
   setCenter: (x: number, y: number, options?: SetCenterOptions) => void;
@@ -82,7 +86,9 @@ export function useSvelteFlow(): {
     panZoom,
     nodes,
     edges,
-    domNode
+    domNode,
+    nodeLookup,
+    edgeLookup
   } = useStore();
 
   const getNodeRect = (
@@ -121,6 +127,10 @@ export function useSvelteFlow(): {
   return {
     zoomIn,
     zoomOut,
+    getNode: (id) => get(nodeLookup).get(id),
+    getNodes: (ids) => (ids === undefined ? get(nodes) : getElements(get(nodeLookup), ids)),
+    getEdge: (id) => get(edgeLookup).get(id),
+    getEdges: (ids) => (ids === undefined ? get(edges) : getElements(get(edgeLookup), ids)),
     setZoom: (zoomLevel, options) => {
       get(panZoom)?.scaleTo(zoomLevel, { duration: options?.duration });
     },
@@ -295,3 +305,17 @@ export function useSvelteFlow(): {
     viewport
   };
 }
+
+function getElements<EdgeOrNode>(lookup: Map<string, EdgeOrNode>, ids: string[]) {
+  const result = [];
+
+  for (const id of ids) {
+    const element = lookup.get(id);
+
+    if (element) {
+      result.push(element);
+    }
+  }
+
+  return result;
+}