feat(svelte): make edges selectable

packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte

@@ -14,7 +14,6 @@
   export let markerEnd: $$Props['markerEnd'] = undefined;
   export let style: $$Props['style'] = undefined;
   export let interactionWidth: $$Props['interactionWidth'] = 20;
-
 </script>
 
 <path

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

@@ -23,16 +23,17 @@
   export let targetPosition: $$Props['targetPosition'] = Position.Top;
   export let animated: $$Props['animated'] = false;
   export let selected: $$Props['selected'] = false;
+  export let selectable: $$Props['selectable'] = true;
   export let label: $$Props['label'] = undefined;
   export let labelStyle: $$Props['labelStyle'] = undefined;
   export let markerStart: $$Props['markerStart'] = undefined;
   export let markerEnd: $$Props['markerEnd'] = undefined;
   export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
   export let targetHandleId: $$Props['targetHandleId'] = undefined;
-
+  
    // @ todo: support edge updates
 
-  const { edges, edgeTypes, flowId } = useStore();
+  const { edges, edgeTypes, flowId, addSelectedEdges } = useStore();
   const dispatch = createEventDispatcher();
 
   const edgeComponent: typeof SvelteComponentTyped<EdgeProps> = $edgeTypes[type!] || BezierEdge;
@@ -41,6 +42,10 @@
   $: markerEndUrl = markerEnd ? `url(#${getMarkerId(markerEnd, $flowId)})` : undefined;
 
   function onClick() {
+    if (selectable) {
+      addSelectedEdges([id]);
+    }
+
     const edge = $edges.find(e => e.id === id);
     dispatch('edge:click', edge);
   }
@@ -50,6 +55,7 @@
 <g
   class="svelte-flow__edge"
   class:animated
+  class:selected
   data-id={id}
   on:click={onClick}
 >
@@ -83,13 +89,17 @@
     cursor: pointer;
   }
 
-  .svelte-flow__edge :global(path) {
+  .svelte-flow__edge :global(.svelte-flow__edge-path) {
     stroke: #ccc;
     stroke-width: 1;
     fill: none;
   }
 
-  .animated :global(path) {
+  .selected :global(.svelte-flow__edge-path) {
+    stroke: #555;
+  }
+
+  .animated :global(.svelte-flow__edge-path) {
     stroke-dasharray: 5;
     animation: dashdraw 0.5s linear infinite;
   }

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

@@ -15,6 +15,7 @@
   export let data: NodeWrapperProps['data'] = {};
   export let selected: NodeWrapperProps['selected'] = false;
   export let draggable: NodeWrapperProps['draggable'] = undefined;
+  export let selectable: NodeWrapperProps['selectable'] = undefined;
   export let connectable: NodeWrapperProps['connectable'] = true;
   export let dragging: boolean = false;
   export let resizeObserver: NodeWrapperProps['resizeObserver'] = null;
@@ -36,13 +37,12 @@
   const nodeTypeValid = !!$nodeTypes[type!];
 
   if (!nodeTypeValid) {
-    console.warn('003', errorMessages['003'](type!));
+    console.warn('003', errorMessages['error003'](type!));
     type = 'default';
   }
 
   const nodeComponent: typeof SvelteComponentTyped<Partial<NodeProps>> =
     $nodeTypes[type!] || DefaultNode;
-  const isSelectable = true;
   const selectNodesOnDrag = false;
   const dispatch = createEventDispatcher();
 
@@ -63,7 +63,7 @@
   }
 
   function onSelectNodeHandler(event: MouseEvent) {
-    if (isSelectable && (!selectNodesOnDrag || !draggable)) {
+    if (selectable && (!selectNodesOnDrag || !draggable)) {
       // this handler gets called within the drag start event when selectNodesOnDrag=true
       addSelectedNodes([id]);
     }

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

@@ -11,6 +11,7 @@ export type NodeWrapperProps = Pick<
   | 'dragging'
   | 'positionAbsolute'
   | 'selected'
+  | 'selectable'
   | 'style'
   | 'type'
   | 'width'