feat(svelte): make edges selectable

packages/svelte/src/lib/store/edges-layouted.ts

@@ -45,6 +45,7 @@ export function getEdgesLayouted(store: SvelteFlowStoreState) {
 
       res.push({
         ...edge,
+        selectable: edge.selectable || typeof edge.selectable === 'undefined',
         type: edgeType,
         sourceX,
         sourceY,

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

@@ -251,6 +251,21 @@ export function createStore(params: CreateStoreParams): SvelteFlowStore {
     );
   }
 
+  function addSelectedEdges(ids: string[]) {
+    if (get(store.multiselectionKeyPressed)) {
+      // @todo handle multiselection key
+    }
+
+    store.edges.update((edges) =>
+      edges.map((edge) => {
+        return {
+          ...edge,
+          selected: ids.includes(edge.id)
+        };
+      })
+    );
+  }
+
   function panBy(delta: XYPosition) {
     const { zoom: d3Zoom, selection: d3Selection } = get(store.d3);
     const transform = get(store.transform);
@@ -335,6 +350,7 @@ export function createStore(params: CreateStoreParams): SvelteFlowStore {
     setMaxZoom,
     resetSelectedElements,
     addSelectedNodes,
+    addSelectedEdges,
     panBy,
     updateConnection,
     cancelConnection,

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

@@ -27,6 +27,7 @@ export type SvelteFlowStoreActions = {
   updateNodeDimensions: (updates: NodeDimensionUpdate[]) => void;
   resetSelectedElements: () => void;
   addSelectedNodes: (ids: string[]) => void;
+  addSelectedEdges: (ids: string[]) => void;
   panBy: (delta: XYPosition) => void;
   updateConnection: (connection: Partial<ConnectionData>) => void;
   cancelConnection: () => void;