Merge branch 'next' into refactor/edge-rendering

packages/svelte/src/lib/components/EdgeLabelRenderer/EdgeLabelRenderer.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
   import portal from '$lib/actions/portal';
+  import { useStore } from '$lib/store';
 
   type $$Props = {};
+
+  const { domNode } = useStore();
 </script>
 
-<div use:portal={'.svelte-flow__edgelabel-renderer'}>
+<div use:portal={{ target: '.svelte-flow__edgelabel-renderer', domNode: $domNode }}>
   <slot />
 </div>

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

@@ -6,7 +6,7 @@
   import { errorMessages, getMarkerId } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
-  import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
+  import { BezierEdgeInternal } from '$lib/components/edges';
   import type { EdgeLayouted, Edge } from '$lib/types';
   import { get } from 'svelte/store';
 
@@ -58,7 +58,7 @@
     edgecontextmenu: { edge: Edge; event: MouseEvent };
   }>();
 
-  $: edgeComponent = $edgeTypes[type!] || BezierEdge;
+  $: edgeComponent = $edgeTypes[type!] || BezierEdgeInternal;
   $: markerStartUrl = markerStart ? `url(#${getMarkerId(markerStart, $flowId)})` : undefined;
   $: markerEndUrl = markerEnd ? `url(#${getMarkerId(markerEnd, $flowId)})` : undefined;
 

packages/svelte/src/lib/components/Handle/Handle.svelte

@@ -1,17 +1,18 @@
 <script lang="ts">
-  import { getContext, createEventDispatcher } from 'svelte';
+  import { getContext } from 'svelte';
+  import type { Writable } from 'svelte/store';
   import cc from 'classcat';
   import {
     Position,
     XYHandle,
     isMouseEvent,
     type Connection,
-    type HandleType
+    areConnectionMapsEqual,
+    handleConnectionChange
   } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
   import type { HandleComponentProps } from '$lib/types';
-  import type { Writable } from 'svelte/store';
 
   type $$Props = HandleComponentProps;
 
@@ -20,6 +21,8 @@
   export let position: $$Props['position'] = Position.Top;
   export let style: $$Props['style'] = undefined;
   export let isConnectable: $$Props['isConnectable'] = undefined;
+  export let onconnect: $$Props['onconnect'] = undefined;
+  export let ondisconnect: $$Props['ondisconnect'] = undefined;
   // export let isConnectableStart: $$Props['isConnectableStart'] = undefined;
   // export let isConnectableEnd: $$Props['isConnectableEnd'] = undefined;
 
@@ -32,18 +35,6 @@
   $: handleConnectable = isConnectable !== undefined ? isConnectable : $connectable;
 
   const handleId = id || null;
-  const dispatch = createEventDispatcher<{
-    connect: { connection: Connection };
-    connectstart: {
-      event: MouseEvent | TouchEvent;
-      nodeId: string | null;
-      handleId: string | null;
-      handleType: HandleType | null;
-    };
-    connectend: {
-      event: MouseEvent | TouchEvent;
-    };
-  }>();
 
   const store = useStore();
   const {
@@ -55,10 +46,16 @@
     isValidConnection,
     lib,
     addEdge,
+    onedgecreate,
     panBy,
     cancelConnection,
     updateConnection,
-    autoPanOnConnect
+    autoPanOnConnect,
+    edges,
+    connectionLookup,
+    onconnect: onConnectAction,
+    onconnectstart: onConnectStartAction,
+    onconnectend: onConnectEndAction
   } = store;
 
   function onPointerDown(event: MouseEvent | TouchEvent) {
@@ -80,28 +77,50 @@
         cancelConnection,
         panBy,
         onConnect: (connection) => {
-          addEdge(connection);
+          const edge = $onedgecreate ? $onedgecreate(connection) : connection;
 
-          // @todo: should we change/ improve the stuff we are passing here?
-          // instead of source/target we could pass fromNodeId, fromHandleId, etc
-          dispatch('connect', { connection });
+          if (!edge) {
+            return;
+          }
+
+          addEdge(edge);
+          $onConnectAction?.(connection);
         },
         onConnectStart: (event, startParams) => {
-          dispatch('connectstart', {
-            event,
+          $onConnectStartAction?.(event, {
             nodeId: startParams.nodeId,
             handleId: startParams.handleId,
             handleType: startParams.handleType
           });
         },
         onConnectEnd: (event) => {
-          dispatch('connectend', { event });
+          $onConnectEndAction?.(event);
         },
         getTransform: () => [$viewport.x, $viewport.y, $viewport.zoom]
       });
     }
   }
 
+  let prevConnections: Map<string, Connection> | null = null;
+  let connections: Map<string, Connection> | undefined;
+
+  $: if (onconnect || ondisconnect) {
+    // connectionLookup is not reactive, so we use edges to get notified about updates
+    $edges;
+    connections = $connectionLookup.get(`${nodeId}-${type}-${id || null}`);
+  }
+
+  $: {
+    if (prevConnections && !areConnectionMapsEqual(connections, prevConnections)) {
+      const _connections = connections ?? new Map();
+
+      handleConnectionChange(prevConnections, _connections, ondisconnect);
+      handleConnectionChange(_connections, prevConnections, onconnect);
+    }
+
+    prevConnections = connections ?? new Map();
+  }
+
   // @todo implement connectablestart, connectableend
 </script>
 

packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import { shortcut, type ShortcutModifierDefinition } from '@svelte-put/shortcut';
+  import { isInputDOMNode, isMacOs } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
   import type { KeyHandlerProps } from './types';
   import type { KeyDefinition, KeyDefinitionObject } from '$lib/types';
-  import { isMacOs } from '@xyflow/system';
 
   type $$Props = KeyHandlerProps;
 
@@ -23,7 +23,7 @@
   } = useStore();
 
   function isKeyObject(key?: KeyDefinition | null): key is KeyDefinitionObject {
-    return typeof key === 'object';
+    return key !== null && typeof key === 'object';
   }
 
   function getModifier(key?: KeyDefinition | null): ShortcutModifierDefinition {
@@ -71,16 +71,19 @@
     trigger: [
       {
         ...selectionKeyDefinition,
-        callback: () => selectionKeyDefinition.key && selectionKeyPressed.set(true)
+        enabled: selectionKeyDefinition.key !== null,
+        callback: () => selectionKeyPressed.set(true)
       }
     ],
+
     type: 'keydown'
   }}
   use:shortcut={{
     trigger: [
       {
         ...selectionKeyDefinition,
-        callback: () => selectionKeyDefinition.key && selectionKeyPressed.set(false)
+        enabled: selectionKeyDefinition.key !== null,
+        callback: () => selectionKeyPressed.set(false)
       }
     ],
     type: 'keyup'
@@ -89,7 +92,8 @@
     trigger: [
       {
         ...multiSelectionKeyDefinition,
-        callback: () => multiSelectionKeyDefinition.key && multiselectionKeyPressed.set(true)
+        enabled: multiSelectionKeyDefinition.key !== null,
+        callback: () => multiselectionKeyPressed.set(true)
       }
     ],
     type: 'keydown'
@@ -98,7 +102,8 @@
     trigger: [
       {
         ...multiSelectionKeyDefinition,
-        callback: () => multiSelectionKeyDefinition.key && multiselectionKeyPressed.set(false)
+        enabled: multiSelectionKeyDefinition.key !== null,
+        callback: () => multiselectionKeyPressed.set(false)
       }
     ],
     type: 'keyup'
@@ -107,7 +112,8 @@
     trigger: [
       {
         ...deleteKeyDefinition,
-        callback: () => deleteKeyDefinition.key && deleteKeyPressed.set(true)
+        enabled: deleteKeyDefinition.key !== null,
+        callback: (detail) => !isInputDOMNode(detail.originalEvent) && deleteKeyPressed.set(true)
       }
     ],
     type: 'keydown'
@@ -116,7 +122,8 @@
     trigger: [
       {
         ...deleteKeyDefinition,
-        callback: () => deleteKeyDefinition.key && deleteKeyPressed.set(false)
+        enabled: deleteKeyDefinition.key !== null,
+        callback: () => deleteKeyPressed.set(false)
       }
     ],
     type: 'keyup'
@@ -125,7 +132,8 @@
     trigger: [
       {
         ...panActivationKeyDefinition,
-        callback: () => panActivationKeyDefinition.key && panActivationKeyPressed.set(true)
+        enabled: panActivationKeyDefinition.key !== null,
+        callback: () => panActivationKeyPressed.set(true)
       }
     ],
     type: 'keydown'
@@ -134,7 +142,8 @@
     trigger: [
       {
         ...panActivationKeyDefinition,
-        callback: () => panActivationKeyDefinition.key && panActivationKeyPressed.set(false)
+        enabled: panActivationKeyDefinition.key !== null,
+        callback: () => panActivationKeyPressed.set(false)
       }
     ],
     type: 'keyup'
@@ -143,7 +152,8 @@
     trigger: [
       {
         ...zoomActivationKeyDefinition,
-        callback: () => zoomActivationKeyDefinition.key && zoomActivationKeyPressed.set(true)
+        enabled: zoomActivationKeyDefinition.key !== null,
+        callback: () => zoomActivationKeyPressed.set(true)
       }
     ],
     type: 'keydown'
@@ -152,7 +162,8 @@
     trigger: [
       {
         ...zoomActivationKeyDefinition,
-        callback: () => zoomActivationKeyDefinition.key && zoomActivationKeyPressed.set(false)
+        enabled: zoomActivationKeyDefinition.key !== null,
+        callback: () => zoomActivationKeyPressed.set(false)
       }
     ],
     type: 'keyup'

packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte

@@ -1,15 +1,30 @@
 <script lang="ts">
   import { getNodesBounds } from '@xyflow/system';
+  import { createEventDispatcher } from 'svelte';
 
   import { useStore } from '$lib/store';
   import { Selection } from '$lib/components/Selection';
   import drag from '$lib/actions/drag';
+  import type { Node } from '$lib/types';
 
   const store = useStore();
   const { selectionRectMode, nodes } = store;
 
+  const dispatch = createEventDispatcher<{
+    selectioncontextmenu: { nodes: Node[]; event: MouseEvent | TouchEvent };
+    selectionclick: { nodes: Node[]; event: MouseEvent | TouchEvent };
+  }>();
+
   $: selectedNodes = $nodes.filter((n) => n.selected);
   $: bounds = getNodesBounds(selectedNodes);
+
+  function onContextMenu(event: MouseEvent | TouchEvent) {
+    dispatch('selectioncontextmenu', { nodes: selectedNodes, event });
+  }
+
+  function onClick(event: MouseEvent | TouchEvent) {
+    dispatch('selectionclick', { nodes: selectedNodes, event });
+  }
 </script>
 
 {#if selectedNodes && $selectionRectMode === 'nodes'}
@@ -17,6 +32,8 @@
     class="selection-wrapper nopan"
     style="width: {bounds.width}px; height: {bounds.height}px; transform: translate({bounds.x}px, {bounds.y}px)"
     use:drag={{ disabled: false, store }}
+    on:contextmenu={onContextMenu}
+    on:click={onClick}
   >
     <Selection width="100%" height="100%" x={0} y={0} />
   </div>

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

@@ -27,11 +27,15 @@
   export let style: NodeWrapperProps['style'] = undefined;
   export let type: NodeWrapperProps['type'] = 'default';
   export let isParent: NodeWrapperProps['isParent'] = false;
-  export let positionAbsolute: NodeWrapperProps['positionAbsolute'] = undefined;
-  export let positionOrigin: NodeWrapperProps['positionOrigin'] = undefined;
+  export let positionX: NodeWrapperProps['positionX'];
+  export let positionY: NodeWrapperProps['positionY'];
+  export let positionOriginX: NodeWrapperProps['positionOriginX'];
+  export let positionOriginY: NodeWrapperProps['positionOriginY'];
   export let sourcePosition: NodeWrapperProps['sourcePosition'] = undefined;
   export let targetPosition: NodeWrapperProps['targetPosition'] = undefined;
   export let zIndex: NodeWrapperProps['zIndex'];
+  export let width: NodeWrapperProps['width'] = undefined;
+  export let height: NodeWrapperProps['height'] = undefined;
   export let dragHandle: NodeWrapperProps['dragHandle'] = undefined;
   export let initialized: NodeWrapperProps['initialized'] = false;
   let className: string = '';
@@ -164,11 +168,11 @@
     class:nopan={draggable}
     class:parent={isParent}
     style:z-index={zIndex}
-    style:transform="translate({positionOrigin?.x ?? 0}px, {positionOrigin?.y ?? 0}px)"
+    style:transform="translate({positionOriginX}px, {positionOriginY}px)"
     style:visibility={initialized ? 'visible' : 'hidden'}
-    style="{style} {node.size?.width ? `;width=${node.size?.width}px` : ''} {node.size?.height
-      ? `;height=${node.size?.height}px;`
-      : ''}"
+    style="{style ?? ''}; {!width ? '' : `width:${width}px;`} {!height
+      ? ''
+      : `height:${height}px;`}"
     on:click={onSelectNodeHandler}
     on:mouseenter={(event) => dispatch('nodemouseenter', { node, event })}
     on:mouseleave={(event) => dispatch('nodemouseleave', { node, event })}
@@ -187,11 +191,10 @@
       {dragging}
       {dragHandle}
       isConnectable={connectable}
-      xPos={positionAbsolute?.x ?? 0}
-      yPos={positionAbsolute?.y ?? 0}
-      on:connectstart
-      on:connect
-      on:connectend
+      positionAbsoluteX={positionX}
+      positionAbsoluteY={positionY}
+      {width}
+      {height}
     />
   </div>
 {/if}

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

@@ -1,4 +1,3 @@
-import type { XYPosition } from '@xyflow/system';
 import type { Node } from '$lib/types';
 
 export type NodeWrapperProps = Pick<
@@ -9,19 +8,22 @@ export type NodeWrapperProps = Pick<
   | 'data'
   | 'draggable'
   | 'dragging'
-  | 'positionAbsolute'
   | 'selected'
   | 'selectable'
   | 'style'
   | 'type'
-  | 'width'
-  | 'height'
   | 'sourcePosition'
   | 'targetPosition'
   | 'dragHandle'
   | 'hidden'
 > & {
-  positionOrigin?: XYPosition;
+  width?: number;
+  height?: number;
+  type: string;
+  positionX: number;
+  positionY: number;
+  positionOriginX: number;
+  positionOriginY: number;
   'on:nodeclick'?: (event: MouseEvent) => void;
   resizeObserver?: ResizeObserver | null;
   isParent?: boolean;

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

@@ -1,30 +1,48 @@
 <script lang="ts">
   import { getBezierPath } from '@xyflow/system';
 
-  import type { EdgeProps } from '$lib/types';
+  import type { BezierEdgeProps } from '$lib/types';
   import { BaseEdge } from '$lib/components/BaseEdge';
 
-  type $$Props = EdgeProps;
+  type $$Props = BezierEdgeProps;
+
+  export let id: $$Props['id'] = undefined;
+  export let label: $$Props['label'] = undefined;
+  export let labelStyle: $$Props['labelStyle'] = undefined;
+  export let style: $$Props['style'] = undefined;
+  export let markerStart: $$Props['markerStart'] = undefined;
+  export let markerEnd: $$Props['markerEnd'] = undefined;
+  export let pathOptions: $$Props['pathOptions'] = undefined;
+  export let interactionWidth: $$Props['interactionWidth'] = undefined;
+
+  export let sourceX: $$Props['sourceX'];
+  export let sourceY: $$Props['sourceY'];
+  export let sourcePosition: $$Props['sourcePosition'];
+
+  export let targetX: $$Props['targetX'];
+  export let targetY: $$Props['targetY'];
+  export let targetPosition: $$Props['targetPosition'];
 
   $: [path, labelX, labelY] = getBezierPath({
-    sourceX: $$props.sourceX,
-    sourceY: $$props.sourceY,
-    targetX: $$props.targetX,
-    targetY: $$props.targetY,
-    sourcePosition: $$props.sourcePosition,
-    targetPosition: $$props.targetPosition
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    curvature: pathOptions?.curvature
   });
 </script>
 
 <BaseEdge
+  {id}
   {path}
   {labelX}
   {labelY}
-  id={$$props.id}
-  label={$$props.label}
-  labelStyle={$$props.labelStyle}
-  markerStart={$$props.markerStart}
-  markerEnd={$$props.markerEnd}
-  interactionWidth={$$props.interactionWidth}
-  style={$$props.style}
+  {label}
+  {labelStyle}
+  {markerStart}
+  {markerEnd}
+  {interactionWidth}
+  {style}
 />

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

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { getBezierPath } from '@xyflow/system';
+
+  import type { EdgeProps } from '$lib/types';
+  import { BaseEdge } from '$lib/components/BaseEdge';
+
+  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 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;
+  export let interactionWidth: $$Props['interactionWidth'] = undefined;
+
+  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,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition
+  });
+
+  // hopefully with Svelte5, we don't need this kind of workaround anymore
+  id;
+  source;
+  target;
+  animated;
+  selected;
+  data;
+  sourceHandleId;
+  targetHandleId;
+</script>
+
+<BaseEdge
+  {path}
+  {labelX}
+  {labelY}
+  {label}
+  {labelStyle}
+  {markerStart}
+  {markerEnd}
+  {interactionWidth}
+  {style}
+/>

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

@@ -1,30 +1,49 @@
 <script lang="ts">
   import { getSmoothStepPath } from '@xyflow/system';
 
-  import type { EdgeProps } from '$lib/types';
+  import type { SmoothStepEdgeProps } from '$lib/types';
   import { BaseEdge } from '$lib/components/BaseEdge';
 
-  type $$Props = EdgeProps;
+  type $$Props = SmoothStepEdgeProps;
+
+  export let id: $$Props['id'] = undefined;
+  export let label: $$Props['label'] = undefined;
+  export let labelStyle: $$Props['labelStyle'] = undefined;
+  export let style: $$Props['style'] = undefined;
+  export let markerStart: $$Props['markerStart'] = undefined;
+  export let markerEnd: $$Props['markerEnd'] = undefined;
+  export let pathOptions: $$Props['pathOptions'] = undefined;
+  export let interactionWidth: $$Props['interactionWidth'] = undefined;
+
+  export let sourceX: $$Props['sourceX'];
+  export let sourceY: $$Props['sourceY'];
+  export let sourcePosition: $$Props['sourcePosition'];
+
+  export let targetX: $$Props['targetX'];
+  export let targetY: $$Props['targetY'];
+  export let targetPosition: $$Props['targetPosition'];
 
   $: [path, labelX, labelY] = getSmoothStepPath({
-    sourceX: $$props.sourceX,
-    sourceY: $$props.sourceY,
-    targetX: $$props.targetX,
-    targetY: $$props.targetY,
-    sourcePosition: $$props.sourcePosition,
-    targetPosition: $$props.targetPosition
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    borderRadius: pathOptions?.borderRadius,
+    offset: pathOptions?.offset
   });
 </script>
 
 <BaseEdge
+  {id}
   {path}
   {labelX}
   {labelY}
-  id={$$props.id}
-  label={$$props.label}
-  labelStyle={$$props.labelStyle}
-  markerStart={$$props.markerStart}
-  markerEnd={$$props.markerEnd}
-  interactionWidth={$$props.interactionWidth}
-  style={$$props.style}
+  {label}
+  {labelStyle}
+  {markerStart}
+  {markerEnd}
+  {interactionWidth}
+  {style}
 />

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

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { getSmoothStepPath } from '@xyflow/system';
+
+  import type { EdgeProps } from '$lib/types';
+  import { BaseEdge } from '$lib/components/BaseEdge';
+
+  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 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;
+  export let interactionWidth: $$Props['interactionWidth'] = undefined;
+
+  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,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition
+  });
+
+  id;
+  source;
+  target;
+  animated;
+  selected;
+  data;
+  sourceHandleId;
+  targetHandleId;
+</script>
+
+<BaseEdge
+  {path}
+  {labelX}
+  {labelY}
+  {label}
+  {labelStyle}
+  {markerStart}
+  {markerEnd}
+  {interactionWidth}
+  {style}
+/>

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

@@ -1,31 +1,49 @@
 <script lang="ts">
   import { getSmoothStepPath } from '@xyflow/system';
 
-  import type { EdgeProps } from '$lib/types';
+  import type { StepEdgeProps } from '$lib/types';
   import { BaseEdge } from '$lib/components/BaseEdge';
 
-  type $$Props = EdgeProps;
+  type $$Props = StepEdgeProps;
+
+  export let id: $$Props['id'] = undefined;
+  export let label: $$Props['label'] = undefined;
+  export let labelStyle: $$Props['labelStyle'] = undefined;
+  export let style: $$Props['style'] = undefined;
+  export let markerStart: $$Props['markerStart'] = undefined;
+  export let markerEnd: $$Props['markerEnd'] = undefined;
+  export let pathOptions: $$Props['pathOptions'] = undefined;
+  export let interactionWidth: $$Props['interactionWidth'] = undefined;
+
+  export let sourceX: $$Props['sourceX'];
+  export let sourceY: $$Props['sourceY'];
+  export let sourcePosition: $$Props['sourcePosition'];
+
+  export let targetX: $$Props['targetX'];
+  export let targetY: $$Props['targetY'];
+  export let targetPosition: $$Props['targetPosition'];
 
   $: [path, labelX, labelY] = getSmoothStepPath({
-    sourceX: $$props.sourceX,
-    sourceY: $$props.sourceY,
-    targetX: $$props.targetX,
-    targetY: $$props.targetY,
-    sourcePosition: $$props.sourcePosition,
-    targetPosition: $$props.targetPosition,
-    borderRadius: 0
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    borderRadius: 0,
+    offset: pathOptions?.offset
   });
 </script>
 
 <BaseEdge
+  {id}
   {path}
   {labelX}
   {labelY}
-  id={$$props.id}
-  label={$$props.label}
-  labelStyle={$$props.labelStyle}
-  markerStart={$$props.markerStart}
-  markerEnd={$$props.markerEnd}
-  interactionWidth={$$props.interactionWidth}
-  style={$$props.style}
+  {label}
+  {labelStyle}
+  {markerStart}
+  {markerEnd}
+  {interactionWidth}
+  {style}
 />

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

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import { getSmoothStepPath } from '@xyflow/system';
+
+  import type { EdgeProps } from '$lib/types';
+  import { BaseEdge } from '$lib/components/BaseEdge';
+
+  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 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;
+  export let markerEnd: $$Props['markerEnd'] = undefined;
+  export let interactionWidth: $$Props['interactionWidth'] = undefined;
+
+  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,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    borderRadius: 0
+  });
+
+  id;
+  source;
+  target;
+  animated;
+  selected;
+  data;
+  sourceHandleId;
+  targetHandleId;
+</script>
+
+<BaseEdge
+  {path}
+  {labelX}
+  {labelY}
+  {label}
+  {labelStyle}
+  {markerStart}
+  {markerEnd}
+  {interactionWidth}
+  {style}
+/>

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

@@ -1,28 +1,42 @@
 <script lang="ts">
   import { getStraightPath } from '@xyflow/system';
 
-  import type { EdgeProps } from '$lib/types';
+  import type { StraightEdgeProps } from '$lib/types';
   import { BaseEdge } from '$lib/components/BaseEdge';
 
-  type $$Props = EdgeProps;
+  type $$Props = StraightEdgeProps;
+
+  export let id: $$Props['id'] = undefined;
+  export let label: $$Props['label'] = undefined;
+  export let labelStyle: $$Props['labelStyle'] = undefined;
+  export let style: $$Props['style'] = undefined;
+  export let markerStart: $$Props['markerStart'] = undefined;
+  export let markerEnd: $$Props['markerEnd'] = undefined;
+  export let interactionWidth: $$Props['interactionWidth'] = undefined;
+
+  export let sourceX: $$Props['sourceX'];
+  export let sourceY: $$Props['sourceY'];
+
+  export let targetX: $$Props['targetX'];
+  export let targetY: $$Props['targetY'];
 
   $: [path, labelX, labelY] = getStraightPath({
-    sourceX: $$props.sourceX,
-    sourceY: $$props.sourceY,
-    targetX: $$props.targetX,
-    targetY: $$props.targetY
+    sourceX,
+    sourceY,
+    targetX,
+    targetY
   });
 </script>
 
 <BaseEdge
+  {id}
   {path}
   {labelX}
   {labelY}
-  id={$$props.id}
-  label={$$props.label}
-  labelStyle={$$props.labelStyle}
-  markerStart={$$props.markerStart}
-  markerEnd={$$props.markerEnd}
-  interactionWidth={$$props.interactionWidth}
-  style={$$props.style}
+  {label}
+  {labelStyle}
+  {markerStart}
+  {markerEnd}
+  {interactionWidth}
+  {style}
 />

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

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { getStraightPath } from '@xyflow/system';
+
+  import type { EdgeProps } from '$lib/types';
+  import { BaseEdge } from '$lib/components/BaseEdge';
+
+  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 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;
+  export let interactionWidth: $$Props['interactionWidth'] = undefined;
+
+  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,
+    sourceY,
+    targetX,
+    targetY
+  });
+
+  id;
+  source;
+  target;
+  animated;
+  selected;
+  data;
+  sourcePosition;
+  targetPosition;
+  sourceHandleId;
+  targetHandleId;
+</script>
+
+<BaseEdge
+  {path}
+  {labelX}
+  {labelY}
+  {label}
+  {labelStyle}
+  {markerStart}
+  {markerEnd}
+  {interactionWidth}
+  {style}
+/>

packages/svelte/src/lib/components/edges/index.ts

@@ -1,4 +1,17 @@
+// We distinguish between internal and exported edges
+// The internal edges are used directly like custom edges and always get an id, source and target props
+// If you import an edge from the library, the id is optional and source and target are not used at all
+
+// @todo: how can we prevent this duplication in ...Edge/ ...EdgeInternal?
+// both are quite similar, it's just about 1-2 props that are different
 export { default as BezierEdge } from './BezierEdge.svelte';
-export { default as StraightEdge } from './StraightEdge.svelte';
+export { default as BezierEdgeInternal } from './BezierEdgeInternal.svelte';
+
 export { default as SmoothStepEdge } from './SmoothStepEdge.svelte';
+export { default as SmoothStepEdgeInternal } from './SmoothStepEdgeInternal.svelte';
+
+export { default as StraightEdge } from './StraightEdge.svelte';
+export { default as StraightEdgeInternal } from './StraightEdgeInternal.svelte';
+
 export { default as StepEdge } from './StepEdge.svelte';
+export { default as StepEdgeInternal } from './StepEdgeInternal.svelte';

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

@@ -11,27 +11,31 @@
 
   // 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 zIndex: $$Props['zIndex'] = undefined;
   export let dragging: $$Props['dragging'] = false;
   export let dragHandle: $$Props['dragHandle'] = undefined;
-  export let xPos: $$Props['xPos'] = 0;
-  export let yPos: $$Props['yPos'] = 0;
+  export let positionAbsoluteX: $$Props['positionAbsoluteX'] = 0;
+  export let positionAbsoluteY: $$Props['positionAbsoluteY'] = 0;
   export let isConnectable: $$Props['isConnectable'] = undefined;
 
   // @todo: there must be a better way to do this
   id;
+  width;
+  height;
   selected;
   type;
   zIndex;
   dragging;
   dragHandle;
-  xPos;
-  yPos;
+  positionAbsoluteX;
+  positionAbsoluteY;
   isConnectable;
 </script>
 
-<Handle type="target" position={targetPosition} on:connectstart on:connect on:connectend />
+<Handle type="target" position={targetPosition} />
 {data?.label}
-<Handle type="source" position={sourcePosition} on:connectstart on:connect on:connectend />
+<Handle type="source" position={sourcePosition} />

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

@@ -5,6 +5,8 @@
 
   // 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;
@@ -13,12 +15,14 @@
   export let zIndex: $$Props['zIndex'] = undefined;
   export let dragging: $$Props['dragging'] = false;
   export let dragHandle: $$Props['dragHandle'] = undefined;
-  export let xPos: $$Props['xPos'] = 0;
-  export let yPos: $$Props['yPos'] = 0;
+  export let positionAbsoluteX: $$Props['positionAbsoluteX'] = 0;
+  export let positionAbsoluteY: $$Props['positionAbsoluteY'] = 0;
   export let isConnectable: $$Props['isConnectable'] = undefined;
 
   // @todo: there must be a better way to do this
   id;
+  width;
+  height;
   data;
   selected;
   sourcePosition;
@@ -27,7 +31,7 @@
   zIndex;
   dragging;
   dragHandle;
-  xPos;
-  yPos;
+  positionAbsoluteX;
+  positionAbsoluteY;
   isConnectable;
 </script>

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

@@ -10,28 +10,32 @@
 
   // 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 zIndex: $$Props['zIndex'] = undefined;
   export let dragging: $$Props['dragging'] = false;
   export let dragHandle: $$Props['dragHandle'] = undefined;
-  export let xPos: $$Props['xPos'] = 0;
-  export let yPos: $$Props['yPos'] = 0;
+  export let positionAbsoluteX: $$Props['positionAbsoluteX'] = 0;
+  export let positionAbsoluteY: $$Props['positionAbsoluteY'] = 0;
   export let isConnectable: $$Props['isConnectable'] = undefined;
 
   // @todo: there must be a better way to do this
   id;
+  width;
+  height;
   selected;
   targetPosition;
   type;
   zIndex;
   dragging;
   dragHandle;
-  xPos;
-  yPos;
+  positionAbsoluteX;
+  positionAbsoluteY;
   isConnectable;
 </script>
 
 {data?.label}
-<Handle type="source" position={sourcePosition} on:connectstart on:connect on:connectend />
+<Handle type="source" position={sourcePosition} />

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

@@ -10,28 +10,32 @@
 
   // 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 zIndex: $$Props['zIndex'] = undefined;
   export let dragging: $$Props['dragging'] = false;
   export let dragHandle: $$Props['dragHandle'] = undefined;
-  export let xPos: $$Props['xPos'] = 0;
-  export let yPos: $$Props['yPos'] = 0;
+  export let positionAbsoluteX: $$Props['positionAbsoluteX'] = 0;
+  export let positionAbsoluteY: $$Props['positionAbsoluteY'] = 0;
   export let isConnectable: $$Props['isConnectable'] = undefined;
 
   // @todo: there must be a better way to do this
   id;
+  width;
+  height;
   selected;
   sourcePosition;
   type;
   zIndex;
   dragging;
   dragHandle;
-  xPos;
-  yPos;
+  positionAbsoluteX;
+  positionAbsoluteY;
   isConnectable;
 </script>
 
 {data?.label}
-<Handle type="target" position={targetPosition} on:connectstart on:connect on:connectend />
+<Handle type="target" position={targetPosition} />