Merge branch 'next' into absolute-origin

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

@@ -23,6 +23,7 @@
   export let animated: $$Props['animated'] = false;
   export let selected: $$Props['selected'] = false;
   export let selectable: $$Props['selectable'] = undefined;
+  export let deletable: $$Props['deletable'] = undefined;
   export let hidden: $$Props['hidden'] = false;
   export let label: $$Props['label'] = undefined;
   export let labelStyle: $$Props['labelStyle'] = undefined;
@@ -49,13 +50,15 @@
   const dispatch = createEventDispatcher<{
     edgeclick: { edge: Edge; event: MouseEvent | TouchEvent };
     edgecontextmenu: { edge: Edge; event: MouseEvent };
+    edgemouseenter: { edge: Edge; event: MouseEvent };
+    edgemouseleave: { edge: Edge; event: MouseEvent };
   }>();
 
   $: edgeType = type || 'default';
   $: edgeComponent = $edgeTypes[edgeType] || BezierEdgeInternal;
   $: markerStartUrl = markerStart ? `url('#${getMarkerId(markerStart, $flowId)}')` : undefined;
   $: markerEndUrl = markerEnd ? `url('#${getMarkerId(markerEnd, $flowId)}')` : undefined;
-  $: isSelectable = selectable || ($elementsSelectable && typeof selectable === 'undefined');
+  $: isSelectable = selectable ?? $elementsSelectable;
 
   const handleEdgeSelect = useHandleEdgeSelect();
 
@@ -68,11 +71,12 @@
     }
   }
 
-  function onContextMenu(event: MouseEvent) {
+  type EdgeMouseEvent = 'edgecontextmenu' | 'edgemouseenter' | 'edgemouseleave';
+  function onMouseEvent(event: MouseEvent, type: EdgeMouseEvent) {
     const edge = $edgeLookup.get(id);
 
     if (edge) {
-      dispatch('edgecontextmenu', { event, edge });
+      dispatch(type, { event, edge });
     }
   }
 </script>
@@ -88,7 +92,15 @@
       class:selectable={isSelectable}
       data-id={id}
       on:click={onClick}
-      on:contextmenu={onContextMenu}
+      on:contextmenu={(e) => {
+        onMouseEvent(e, 'edgecontextmenu');
+      }}
+      on:mouseenter={(e) => {
+        onMouseEvent(e, 'edgemouseenter');
+      }}
+      on:mouseleave={(e) => {
+        onMouseEvent(e, 'edgemouseleave');
+      }}
       aria-label={ariaLabel === null
         ? undefined
         : ariaLabel
@@ -114,6 +126,8 @@
         {data}
         {style}
         {interactionWidth}
+        selectable={isSelectable}
+        deletable={deletable ?? true}
         type={edgeType}
         sourceHandleId={sourceHandle}
         targetHandleId={targetHandle}

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

@@ -22,6 +22,7 @@
   export let draggable: $$Props['draggable'] = undefined;
   export let selectable: $$Props['selectable'] = undefined;
   export let connectable: $$Props['connectable'] = true;
+  export let deletable: $$Props['deletable'] = true;
   export let hidden: $$Props['hidden'] = false;
   export let dragging: boolean = false;
   export let resizeObserver: $$Props['resizeObserver'] = null;
@@ -43,6 +44,8 @@
   export let height: $$Props['height'] = undefined;
   export let dragHandle: $$Props['dragHandle'] = undefined;
   export let initialized: $$Props['initialized'] = false;
+  export let parentId: $$Props['parentId'] = undefined;
+
   let className: string = '';
   export { className as class };
 
@@ -192,11 +195,15 @@
       {data}
       {id}
       {selected}
+      {selectable}
+      {deletable}
       {sourcePosition}
       {targetPosition}
       {zIndex}
       {dragging}
+      {draggable}
       {dragHandle}
+      {parentId}
       type={nodeType}
       isConnectable={$connectableStore}
       positionAbsoluteX={positionX}

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

@@ -10,6 +10,7 @@ export type NodeWrapperProps = Pick<
   | 'dragging'
   | 'selected'
   | 'selectable'
+  | 'deletable'
   | 'style'
   | 'type'
   | 'sourcePosition'
@@ -20,6 +21,7 @@ export type NodeWrapperProps = Pick<
   | 'height'
   | 'initialWidth'
   | 'initialHeight'
+  | 'parentId'
 > & {
   measuredWidth?: number;
   measuredHeight?: number;

packages/svelte/src/lib/components/edges/BezierEdgeInternal.svelte

@@ -6,16 +6,8 @@
 
   type $$Props = EdgeProps;
 
-  // these props are not used in this edge, but passed to every custom edge component
-  export let id: $$Props['id'] = '';
-  export let source: $$Props['source'] = '';
-  export let target: $$Props['target'] = '';
-  export let type: $$Props['type'] = 'default';
-  export let animated: $$Props['animated'] = undefined;
-  export let selected: $$Props['selected'] = undefined;
   export let label: $$Props['label'] = undefined;
   export let labelStyle: $$Props['labelStyle'] = undefined;
-  export let data: $$Props['data'] = undefined;
   export let style: $$Props['style'] = undefined;
   export let markerStart: $$Props['markerStart'] = undefined;
   export let markerEnd: $$Props['markerEnd'] = undefined;
@@ -24,12 +16,10 @@
   export let sourceX: $$Props['sourceX'];
   export let sourceY: $$Props['sourceY'];
   export let sourcePosition: $$Props['sourcePosition'];
-  export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
 
   export let targetX: $$Props['targetX'];
   export let targetY: $$Props['targetY'];
   export let targetPosition: $$Props['targetPosition'];
-  export let targetHandleId: $$Props['targetHandleId'] = undefined;
 
   $: [path, labelX, labelY] = getBezierPath({
     sourceX,
@@ -40,16 +30,8 @@
     targetPosition
   });
 
-  // hopefully with Svelte5, we don't need this kind of workaround anymore
-  id;
-  source;
-  target;
-  type;
-  animated;
-  selected;
-  data;
-  sourceHandleId;
-  targetHandleId;
+  // this is a workaround for suppressing the warning about unused props
+  $$restProps;
 </script>
 
 <BaseEdge

packages/svelte/src/lib/components/edges/SmoothStepEdgeInternal.svelte

@@ -6,17 +6,8 @@
 
   type $$Props = EdgeProps;
 
-  // these props are not used in this edge, but passed to every custom edge component
-  export let id: $$Props['id'] = '';
-  export let source: $$Props['source'] = '';
-  export let target: $$Props['target'] = '';
-  export let type: $$Props['type'] = 'smoothstep';
-
-  export let animated: $$Props['animated'] = undefined;
-  export let selected: $$Props['selected'] = undefined;
   export let label: $$Props['label'] = undefined;
   export let labelStyle: $$Props['labelStyle'] = undefined;
-  export let data: $$Props['data'] = undefined;
   export let style: $$Props['style'] = undefined;
   export let markerStart: $$Props['markerStart'] = undefined;
   export let markerEnd: $$Props['markerEnd'] = undefined;
@@ -25,12 +16,10 @@
   export let sourceX: $$Props['sourceX'];
   export let sourceY: $$Props['sourceY'];
   export let sourcePosition: $$Props['sourcePosition'];
-  export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
 
   export let targetX: $$Props['targetX'];
   export let targetY: $$Props['targetY'];
   export let targetPosition: $$Props['targetPosition'];
-  export let targetHandleId: $$Props['targetHandleId'] = undefined;
 
   $: [path, labelX, labelY] = getSmoothStepPath({
     sourceX,
@@ -41,15 +30,8 @@
     targetPosition
   });
 
-  id;
-  source;
-  target;
-  type;
-  animated;
-  selected;
-  data;
-  sourceHandleId;
-  targetHandleId;
+  // this is a workaround for suppressing the warning about unused props
+  $$restProps;
 </script>
 
 <BaseEdge

packages/svelte/src/lib/components/edges/StepEdgeInternal.svelte

@@ -6,16 +6,7 @@
 
   type $$Props = EdgeProps;
 
-  // these props are not used in this edge, but passed to every custom edge component
-  export let id: $$Props['id'] = '';
-  export let source: $$Props['source'] = '';
-  export let target: $$Props['target'] = '';
-  export let type: $$Props['type'] = 'step';
-
-  export let animated: $$Props['animated'] = undefined;
-  export let selected: $$Props['selected'] = undefined;
   export let label: $$Props['label'] = undefined;
-  export let data: $$Props['data'] = undefined;
   export let labelStyle: $$Props['labelStyle'] = undefined;
   export let style: $$Props['style'] = undefined;
   export let markerStart: $$Props['markerStart'] = undefined;
@@ -25,12 +16,10 @@
   export let sourceX: $$Props['sourceX'];
   export let sourceY: $$Props['sourceY'];
   export let sourcePosition: $$Props['sourcePosition'];
-  export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
 
   export let targetX: $$Props['targetX'];
   export let targetY: $$Props['targetY'];
   export let targetPosition: $$Props['targetPosition'];
-  export let targetHandleId: $$Props['targetHandleId'] = undefined;
 
   $: [path, labelX, labelY] = getSmoothStepPath({
     sourceX,
@@ -42,15 +31,8 @@
     borderRadius: 0
   });
 
-  id;
-  source;
-  target;
-  type;
-  animated;
-  selected;
-  data;
-  sourceHandleId;
-  targetHandleId;
+  // this is a workaround for suppressing the warning about unused props
+  $$restProps;
 </script>
 
 <BaseEdge

packages/svelte/src/lib/components/edges/StraightEdgeInternal.svelte

@@ -6,17 +6,8 @@
 
   type $$Props = EdgeProps;
 
-  // these props are not used in this edge, but passed to every custom edge component
-  export let id: $$Props['id'] = '';
-  export let source: $$Props['source'] = '';
-  export let target: $$Props['target'] = '';
-  export let type: $$Props['type'] = 'straight';
-
-  export let animated: $$Props['animated'] = undefined;
-  export let selected: $$Props['selected'] = undefined;
   export let label: $$Props['label'] = undefined;
   export let labelStyle: $$Props['labelStyle'] = undefined;
-  export let data: $$Props['data'] = undefined;
   export let style: $$Props['style'] = undefined;
   export let markerStart: $$Props['markerStart'] = undefined;
   export let markerEnd: $$Props['markerEnd'] = undefined;
@@ -24,13 +15,9 @@
 
   export let sourceX: $$Props['sourceX'];
   export let sourceY: $$Props['sourceY'];
-  export let sourcePosition: $$Props['sourcePosition'];
-  export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
 
   export let targetX: $$Props['targetX'];
   export let targetY: $$Props['targetY'];
-  export let targetPosition: $$Props['targetPosition'];
-  export let targetHandleId: $$Props['targetHandleId'] = undefined;
 
   $: [path, labelX, labelY] = getStraightPath({
     sourceX,
@@ -39,17 +26,8 @@
     targetY
   });
 
-  id;
-  source;
-  target;
-  type;
-  animated;
-  selected;
-  data;
-  sourcePosition;
-  targetPosition;
-  sourceHandleId;
-  targetHandleId;
+  // this is a workaround for suppressing the warning about unused props
+  $$restProps;
 </script>
 
 <BaseEdge

packages/svelte/src/lib/components/nodes/DefaultNode.svelte

@@ -7,36 +7,13 @@
   interface $$Props extends NodeProps {}
 
   export let data: $$Props['data'] = { label: 'Node' };
-  export let targetPosition: $$Props['targetPosition'] = Position.Top;
-  export let sourcePosition: $$Props['sourcePosition'] = Position.Bottom;
+  export let targetPosition: $$Props['targetPosition'] = undefined;
+  export let sourcePosition: $$Props['sourcePosition'] = undefined;
 
-  // unused props - we need to list them here in order to prevent warnings
-  export let id: $$Props['id'] = '';
-  export let width: $$Props['width'] = undefined;
-  export let height: $$Props['height'] = undefined;
-  export let selected: $$Props['selected'] = undefined;
-  export let type: $$Props['type'] = undefined;
-  export let dragging: $$Props['dragging'] = false;
-  export let dragHandle: $$Props['dragHandle'] = undefined;
-  export let positionAbsoluteX: $$Props['positionAbsoluteX'] = 0;
-  export let positionAbsoluteY: $$Props['positionAbsoluteY'] = 0;
-  export let isConnectable: $$Props['isConnectable'];
-  export let zIndex: $$Props['zIndex'];
-
-  // @todo: there must be a better way to do this
-  id;
-  width;
-  height;
-  selected;
-  type;
-  zIndex;
-  dragging;
-  dragHandle;
-  positionAbsoluteX;
-  positionAbsoluteY;
-  isConnectable;
+  // this is a workaround for suppressing the warning about unused props
+  $$restProps;
 </script>
 
-<Handle type="target" position={targetPosition} />
+<Handle type="target" position={targetPosition ?? Position.Top} />
 {data?.label}
-<Handle type="source" position={sourcePosition} />
+<Handle type="source" position={sourcePosition ?? Position.Bottom} />

packages/svelte/src/lib/components/nodes/GroupNode.svelte

@@ -1,37 +1,9 @@
 <script lang="ts">
   import type { NodeProps } from '$lib/types';
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface $$Props extends NodeProps {}
 
-  // unused props - we need to list them here in order to prevent warnings
-  export let id: $$Props['id'] = '';
-  export let width: $$Props['width'] = undefined;
-  export let height: $$Props['height'] = undefined;
-  export let data: $$Props['data'] = {};
-  export let selected: $$Props['selected'] = undefined;
-  export let sourcePosition: $$Props['sourcePosition'] = undefined;
-  export let targetPosition: $$Props['targetPosition'] = undefined;
-  export let type: $$Props['type'] = undefined;
-  export let dragging: $$Props['dragging'] = false;
-  export let dragHandle: $$Props['dragHandle'] = undefined;
-  export let positionAbsoluteX: $$Props['positionAbsoluteX'] = 0;
-  export let positionAbsoluteY: $$Props['positionAbsoluteY'] = 0;
-  export let isConnectable: $$Props['isConnectable'];
-  export let zIndex: $$Props['zIndex'];
-
-  // @todo: there must be a better way to do this
-  id;
-  width;
-  height;
-  data;
-  selected;
-  sourcePosition;
-  targetPosition;
-  type;
-  zIndex;
-  dragging;
-  dragHandle;
-  positionAbsoluteX;
-  positionAbsoluteY;
-  isConnectable;
+  // this is a workaround for suppressing the warning about unused props
+  $$restProps;
 </script>

packages/svelte/src/lib/components/nodes/InputNode.svelte

@@ -7,36 +7,11 @@
   interface $$Props extends NodeProps {}
 
   export let data: $$Props['data'] = { label: 'Node' };
-  export let sourcePosition: $$Props['sourcePosition'] = Position.Bottom;
+  export let sourcePosition: $$Props['sourcePosition'] = undefined;
 
-  // unused props - we need to list them here in order to prevent warnings
-  export let id: $$Props['id'] = '';
-  export let width: $$Props['width'] = undefined;
-  export let height: $$Props['height'] = undefined;
-  export let selected: $$Props['selected'] = undefined;
-  export let targetPosition: $$Props['targetPosition'] = undefined;
-  export let type: $$Props['type'] = undefined;
-  export let dragging: $$Props['dragging'] = false;
-  export let dragHandle: $$Props['dragHandle'] = undefined;
-  export let positionAbsoluteX: $$Props['positionAbsoluteX'] = 0;
-  export let positionAbsoluteY: $$Props['positionAbsoluteY'] = 0;
-  export let isConnectable: $$Props['isConnectable'];
-  export let zIndex: $$Props['zIndex'];
-
-  // @todo: there must be a better way to do this
-  id;
-  width;
-  height;
-  selected;
-  targetPosition;
-  type;
-  zIndex;
-  dragging;
-  dragHandle;
-  positionAbsoluteX;
-  positionAbsoluteY;
-  isConnectable;
+  // this is a workaround for suppressing the warning about unused props
+  $$restProps;
 </script>
 
 {data?.label}
-<Handle type="source" position={sourcePosition} />
+<Handle type="source" position={sourcePosition ?? Position.Bottom} />

packages/svelte/src/lib/components/nodes/OutputNode.svelte

@@ -7,36 +7,11 @@
   interface $$Props extends NodeProps {}
 
   export let data: $$Props['data'] = { label: 'Node' };
-  export let targetPosition: $$Props['targetPosition'] = Position.Top;
+  export let targetPosition: $$Props['targetPosition'] = undefined;
 
-  // unused props - we need to list them here in order to prevent warnings
-  export let id: $$Props['id'] = '';
-  export let width: $$Props['width'] = undefined;
-  export let height: $$Props['height'] = undefined;
-  export let selected: $$Props['selected'] = undefined;
-  export let sourcePosition: $$Props['sourcePosition'] = undefined;
-  export let type: $$Props['type'] = undefined;
-  export let dragging: $$Props['dragging'] = false;
-  export let dragHandle: $$Props['dragHandle'] = undefined;
-  export let positionAbsoluteX: $$Props['positionAbsoluteX'] = 0;
-  export let positionAbsoluteY: $$Props['positionAbsoluteY'] = 0;
-  export let isConnectable: $$Props['isConnectable'];
-  export let zIndex: $$Props['zIndex'];
-
-  // @todo: there must be a better way to do this
-  id;
-  width;
-  height;
-  selected;
-  sourcePosition;
-  type;
-  zIndex;
-  dragging;
-  dragHandle;
-  positionAbsoluteX;
-  positionAbsoluteY;
-  isConnectable;
+  // this is a workaround for suppressing the warning about unused props
+  $$restProps;
 </script>
 
 {data?.label}
-<Handle type="target" position={targetPosition} />
+<Handle type="target" position={targetPosition ?? Position.Top} />

packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte

@@ -11,7 +11,8 @@
   const {
     visibleEdges,
     edgesInitialized,
-    edges: { setDefaultOptions }
+    edges: { setDefaultOptions },
+    elementsSelectable
   } = useStore();
 
   onMount(() => {
@@ -33,7 +34,8 @@
       style={edge.style}
       animated={edge.animated}
       selected={edge.selected}
-      selectable={edge.selectable}
+      selectable={edge.selectable ?? $elementsSelectable}
+      deletable={edge.deletable}
       hidden={edge.hidden}
       label={edge.label}
       labelStyle={edge.labelStyle}
@@ -54,6 +56,8 @@
       zIndex={edge.zIndex}
       on:edgeclick
       on:edgecontextmenu
+      on:edgemouseenter
+      on:edgemouseleave
     />
   {/each}
 

packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte

@@ -62,6 +62,7 @@
         node.connectable ||
         ($nodesConnectable && typeof node.connectable === 'undefined')
       )}
+      deletable={node.deletable ?? true}
       positionX={node.internals.positionAbsolute.x}
       positionY={node.internals.positionAbsolute.y}
       positionOriginX={posOrigin.x ?? 0}
@@ -82,6 +83,7 @@
       initialHeight={node.initialHeight}
       measuredWidth={node.measured.width}
       measuredHeight={node.measured.height}
+      parentId={node.parentId}
       {resizeObserver}
       on:nodeclick
       on:nodemouseenter

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

@@ -75,15 +75,24 @@
     $selectionKeyPressed || $selectionRect || (selectionOnDrag && _panOnDrag !== true);
   $: hasActiveSelection = $elementsSelectable && (isSelecting || $selectionRectMode === 'user');
 
-  function onClick(event: MouseEvent | TouchEvent) {
-    dispatch('paneclick', { event });
+  // Used to prevent click events when the user lets go of the selectionKey during a selection
+  let selectionInProgress = false;
 
+  function onClick(event: MouseEvent | TouchEvent) {
+    // We prevent click events when the user let go of the selectionKey during a selection
+    if (selectionInProgress) {
+      selectionInProgress = false;
+      return;
+    }
+
+    dispatch('paneclick', { event });
     unselectNodesAndEdges();
     selectionRectMode.set(null);
   }
 
-  function onMouseDown(event: MouseEvent) {
+  function onPointerDown(event: PointerEvent) {
     containerBounds = container.getBoundingClientRect();
+    container.setPointerCapture(event.pointerId);
 
     if (
       !elementsSelectable ||
@@ -111,10 +120,13 @@
     // onSelectionStart?.(event);
   }
 
-  function onMouseMove(event: MouseEvent) {
+  function onPointerMove(event: PointerEvent) {
     if (!isSelecting || !containerBounds || !$selectionRect) {
       return;
     }
+
+    selectionInProgress = true;
+
     const mousePos = getEventPosition(event, containerBounds);
     const startX = $selectionRect.startX ?? 0;
     const startY = $selectionRect.startY ?? 0;
@@ -157,11 +169,13 @@
     selectionRect.set(nextUserSelectRect);
   }
 
-  function onMouseUp(event: MouseEvent) {
+  function onPointerUp(event: PointerEvent) {
     if (event.button !== 0) {
       return;
     }
 
+    container.releasePointerCapture(event.pointerId);
+
     // We only want to trigger click functions when in selection mode if
     // the user did not move the mouse.
     if (!isSelecting && $selectionRectMode === 'user' && event.target === container) {
@@ -173,17 +187,14 @@
       $selectionRectMode = 'nodes';
     }
 
-    // onSelectionEnd?.(event);
-  }
-
-  const onMouseLeave = () => {
-    if ($selectionRectMode === 'user') {
-      selectionRectMode.set(selectedNodes.length > 0 ? 'nodes' : null);
-      //  onSelectionEnd?.(event);
+    // If the user kept holding the selectionKey during the selection,
+    // we need to reset the selectionInProgress, so the next click event is not prevented
+    if ($selectionKeyPressed) {
+      selectionInProgress = false;
     }
 
-    selectionRect.set(null);
-  };
+    // onSelectionEnd?.(event);
+  }
 
   const onContextMenu = (event: MouseEvent) => {
     if (Array.isArray(_panOnDrag) && _panOnDrag?.includes(2)) {
@@ -204,10 +215,9 @@
   class:dragging={$dragging}
   class:selection={isSelecting}
   on:click={hasActiveSelection ? undefined : wrapHandler(onClick, container)}
-  on:mousedown={hasActiveSelection ? onMouseDown : undefined}
-  on:mousemove={hasActiveSelection ? onMouseMove : undefined}
-  on:mouseup={hasActiveSelection ? onMouseUp : undefined}
-  on:mouseleave={hasActiveSelection ? onMouseLeave : undefined}
+  on:pointerdown={hasActiveSelection ? onPointerDown : undefined}
+  on:pointermove={hasActiveSelection ? onPointerMove : undefined}
+  on:pointerup={hasActiveSelection ? onPointerUp : undefined}
   on:contextmenu={wrapHandler(onContextMenu, container)}
 >
   <slot />

packages/svelte/src/lib/container/Panel/Panel.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import cc from 'classcat';
   import type { PanelProps } from './types';
+  import { useStore } from '$lib/store';
 
   type $$Props = PanelProps;
 
@@ -10,9 +11,16 @@
   let className: $$Props['class'] = undefined;
   export { className as class };
 
+  const { selectionRectMode } = useStore();
+
   $: positionClasses = `${position}`.split('-');
 </script>
 
-<div class={cc(['svelte-flow__panel', className, ...positionClasses])} {style} {...$$restProps}>
+<div
+  class={cc(['svelte-flow__panel', className, ...positionClasses])}
+  {style}
+  style:pointer-events={$selectionRectMode ? 'none' : ''}
+  {...$$restProps}
+>
   <slot />
 </div>

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

@@ -2,7 +2,7 @@
   import { onMount, hasContext } from 'svelte';
   import { get } from 'svelte/store';
   import cc from 'classcat';
-  import { ConnectionMode, PanOnScrollMode, type Viewport } from '@xyflow/system';
+  import { ConnectionMode, PanOnScrollMode } from '@xyflow/system';
 
   import { Zoom } from '$lib/container/Zoom';
   import { Pane } from '$lib/container/Pane';
@@ -28,7 +28,7 @@
   export let fitViewOptions: $$Props['fitViewOptions'] = undefined;
   export let minZoom: $$Props['minZoom'] = undefined;
   export let maxZoom: $$Props['maxZoom'] = undefined;
-  export let initialViewport: Viewport = { x: 0, y: 0, zoom: 1 };
+  export let initialViewport: $$Props['initialViewport'] = undefined;
   export let viewport: $$Props['viewport'] = undefined;
   export let nodeTypes: $$Props['nodeTypes'] = undefined;
   export let edgeTypes: $$Props['edgeTypes'] = undefined;
@@ -89,6 +89,8 @@
   let clientWidth: number;
   let clientHeight: number;
 
+  const initViewport = $viewport || initialViewport;
+
   const store = hasContext(key)
     ? useStore()
     : createStoreContext({ nodes: get(nodes), edges: get(edges), width, height, fitView });
@@ -203,7 +205,7 @@
     {zoomActivationKey}
   />
   <Zoom
-    {initialViewport}
+    initialViewport={initViewport}
     {onMoveStart}
     {onMove}
     {onMoveEnd}
@@ -222,7 +224,13 @@
       {selectionOnDrag}
     >
       <ViewportComponent>
-        <EdgeRenderer on:edgeclick on:edgecontextmenu {defaultEdgeOptions} />
+        <EdgeRenderer
+          on:edgeclick
+          on:edgecontextmenu
+          on:edgemouseenter
+          on:edgemouseleave
+          {defaultEdgeOptions}
+        />
         <ConnectionLine
           containerStyle={connectionLineContainerStyle}
           style={connectionLineStyle}

packages/svelte/src/lib/container/Zoom/Zoom.svelte

@@ -8,7 +8,7 @@
 
   type $$Props = ZoomProps;
 
-  export let initialViewport: $$Props['initialViewport'];
+  export let initialViewport: $$Props['initialViewport'] = undefined;
   export let onMoveStart: $$Props['onMoveStart'] = undefined;
   export let onMove: $$Props['onMove'] = undefined;
   export let onMoveEnd: $$Props['onMoveEnd'] = undefined;
@@ -23,7 +23,7 @@
   const {
     viewport,
     panZoom,
-    selectionKeyPressed,
+    selectionRect,
     minZoom,
     maxZoom,
     dragging,
@@ -66,7 +66,7 @@
     preventScrolling: typeof preventScrolling === 'boolean' ? preventScrolling : true,
     noPanClassName: 'nopan',
     noWheelClassName: 'nowheel',
-    userSelectionActive: $selectionKeyPressed,
+    userSelectionActive: !!$selectionRect,
     translateExtent: $translateExtent,
     lib: $lib
   }}

packages/svelte/src/lib/container/Zoom/types.ts

@@ -1,7 +1,7 @@
 import type { OnMoveStart, OnMove, OnMoveEnd, PanOnScrollMode, Viewport } from '@xyflow/system';
 
 export type ZoomProps = {
-  initialViewport: Viewport;
+  initialViewport?: Viewport;
   panOnScrollMode: PanOnScrollMode;
   onMove?: OnMove;
   onMoveStart?: OnMoveStart;

packages/svelte/src/lib/index.ts

@@ -124,6 +124,5 @@ export {
   getIncomers,
   getOutgoers,
   getConnectedEdges,
-  addEdge,
-  updateEdge
+  addEdge
 } from '@xyflow/system';

packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getContext } from 'svelte';
-  import { getNodesBounds, Position, type Rect, getNodeToolbarTransform } from '@xyflow/system';
+  import { getNodesBounds, Position, getNodeToolbarTransform } from '@xyflow/system';
   import portal from '$lib/actions/portal';
   import type { InternalNode } from '$lib/types';
   import { useStore } from '$lib/store';

packages/svelte/src/lib/store/derived-connection-props.ts

@@ -88,7 +88,9 @@ export function getDerivedConnectionProps(
       const fromX = (fromNode?.internals.positionAbsolute.x ?? 0) + fromHandleX;
       const fromY = (fromNode?.internals.positionAbsolute.y ?? 0) + fromHandleY;
       const fromPosition = fromHandle?.position;
-      const toPosition = fromPosition ? oppositePosition[fromPosition] : undefined;
+      const toPosition =
+        connection.connectionEndHandle?.position ??
+        (fromPosition ? oppositePosition[fromPosition] : undefined);
 
       const pathParams = {
         sourceX: fromX,

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

@@ -210,10 +210,10 @@ export function createStore({
 
   function unselectNodesAndEdges(params?: { nodes?: Node[]; edges?: Edge[] }) {
     const resetNodes = resetSelectedElements(params?.nodes || get(store.nodes));
-    if (resetNodes) store.nodes.update((nds) => nds);
+    if (resetNodes) store.nodes.set(get(store.nodes));
 
     const resetEdges = resetSelectedElements(params?.edges || get(store.edges));
-    if (resetEdges) store.edges.update((nds) => nds);
+    if (resetEdges) store.edges.set(get(store.edges));
   }
 
   store.deleteKeyPressed.subscribe(async (deleteKeyPressed) => {

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

@@ -44,7 +44,12 @@ type StepEdge<EdgeData extends Record<string, unknown> = Record<string, unknown>
   pathOptions?: StepPathOptions;
 };
 
-export type BuiltInEdge = SmoothStepEdge | BezierEdge | StepEdge;
+type StraightEdge<EdgeData extends Record<string, unknown> = Record<string, unknown>> = Edge<
+  EdgeData,
+  'straight'
+>;
+
+export type BuiltInEdge = SmoothStepEdge | BezierEdge | StepEdge | StraightEdge;
 
 /**
  * Custom edge component props.
@@ -133,6 +138,7 @@ export type EdgeLayouted = Pick<
   | 'animated'
   | 'selected'
   | 'selectable'
+  | 'deletable'
   | 'label'
   | 'labelStyle'
   | 'interactionWidth'