optimized selection via selectionbox, implemented proper defaultEdge/-NodeOptions

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

@@ -27,8 +27,8 @@
     targetY,
     sourcePosition,
     targetPosition,
-    animated,
-    selected,
+    animated = false,
+    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';