Merge pull request #3686 from xyflow/fix/edge-props

Fix/edge props

examples/svelte/src/routes/examples/customnode/CustomNode.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Writable } from 'svelte/store';
-	import { Handle, Position, type NodeProps } from '@xyflow/svelte';
+	import { Handle, Position, type NodeProps, BezierEdge, SmoothStepEdge } from '@xyflow/svelte';
 
 	type $$Props = NodeProps;
 

examples/svelte/src/routes/examples/edges/+page.svelte

@@ -11,6 +11,8 @@
 	} from '@xyflow/svelte';
 
 	import '@xyflow/svelte/dist/style.css';
+	import ButtonEdge from './ButtonEdge.svelte';
+	import CustomBezierEdge from './CustomBezierEdge.svelte';
 
 	const nodes = writable([
 		{
@@ -111,13 +113,14 @@
 			id: 'e5-8',
 			source: '5',
 			target: '8',
-			data: { text: 'custom edge' }
+			type: 'button'
 		},
 		{
 			id: 'e5-9',
 			source: '5',
 			target: '9',
-			data: { text: 'custom edge 2' }
+			type: 'customBezier',
+			label: 'custom bezier'
 		},
 		{
 			id: 'e5-6',
@@ -144,17 +147,23 @@
 			}
 		}
 	]);
-
+  
-	$: console.log('edges', $edges);
+	const edgeTypes = {
-
+		button: ButtonEdge,
-	function getEdgeId(connection: Connection) {
+		customBezier: CustomBezierEdge
+	};
+  
+  function getEdgeId(connection: Connection) {
 		return `edge-${connection.source}-${connection.target}}`;
 	}
+  
+  $: console.log('edges', $edges);
 </script>
 
 <SvelteFlow
 	{nodes}
 	{edges}
+  {edgeTypes}
 	fitView
 	nodeDragThreshold={2}
 	onedgecreate={(connection) => {

examples/svelte/src/routes/examples/edges/ButtonEdge.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { getBezierPath, BaseEdge, type EdgeProps, EdgeLabelRenderer } from '@xyflow/svelte';
+
+	type $$Props = EdgeProps;
+
+	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;
+
+	$: [edgePath, labelX, labelY] = getBezierPath({
+		sourceX,
+		sourceY,
+		sourcePosition,
+		targetX,
+		targetY,
+		targetPosition
+	});
+
+	source;
+	target;
+	animated;
+	selected;
+	data;
+	label;
+	labelStyle;
+	markerStart;
+	interactionWidth;
+	sourceHandleId;
+	targetHandleId;
+</script>
+
+<BaseEdge path={edgePath} {markerEnd} {style} />
+<EdgeLabelRenderer>
+	<div
+		class="edgeButtonContainer nodrag nopan"
+		style:transform="translate(-50%, -50%) translate({labelX}px,{labelY}px)"
+	>
+		<button
+			class="edgeButton"
+			on:click={(event) => {
+				event.stopPropagation();
+				alert(`remove ${id}`);
+			}}
+		>
+			×
+		</button>
+	</div>
+</EdgeLabelRenderer>
+
+<style>
+	.edgeButtonContainer {
+		position: absolute;
+		font-size: 12pt;
+		/* everything inside EdgeLabelRenderer has no pointer events by default */
+		/* if you have an interactive element, set pointer-events: all */
+		pointer-events: all;
+	}
+
+	.edgeButton {
+		width: 20px;
+		height: 20px;
+		background: #eee;
+		border: 1px solid #fff;
+		cursor: pointer;
+		border-radius: 50%;
+		font-size: 12px;
+		line-height: 1;
+	}
+
+	.edgeButton:hover {
+		box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.08);
+	}
+</style>

examples/svelte/src/routes/examples/edges/CustomBezierEdge.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { BezierEdge, type EdgeProps } from '@xyflow/svelte';
+
+	type $$Props = EdgeProps;
+
+	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;
+
+	id;
+	source;
+	target;
+	animated;
+	selected;
+	data;
+	sourcePosition;
+	targetPosition;
+	sourceHandleId;
+	targetHandleId;
+</script>
+
+<BezierEdge
+	{sourceX}
+	{sourceY}
+	{sourcePosition}
+	{targetX}
+	{targetY}
+	{targetPosition}
+	{label}
+	{labelStyle}
+	{markerStart}
+	{markerEnd}
+	{style}
+	{interactionWidth}
+	pathOptions={{ curvature: 1 }}
+/>

packages/react/src/components/Edges/BezierEdge.tsx

@@ -4,56 +4,67 @@ import { Position, getBezierPath } from '@xyflow/system';
 import BaseEdge from './BaseEdge';
 import type { BezierEdgeProps } from '../../types';
 
-const BezierEdge = memo(
+function createBezierEdge(params: { isInternal: boolean }) {
-  ({
+  // eslint-disable-next-line react/display-name
-    sourceX,
+  return memo(
-    sourceY,
+    ({
-    targetX,
+      id,
-    targetY,
-    sourcePosition = Position.Bottom,
-    targetPosition = Position.Top,
-    label,
-    labelStyle,
-    labelShowBg,
-    labelBgStyle,
-    labelBgPadding,
-    labelBgBorderRadius,
-    style,
-    markerEnd,
-    markerStart,
-    pathOptions,
-    interactionWidth,
-  }: BezierEdgeProps) => {
-    const [path, labelX, labelY] = getBezierPath({
       sourceX,
       sourceY,
-      sourcePosition,
       targetX,
       targetY,
-      targetPosition,
+      sourcePosition = Position.Bottom,
-      curvature: pathOptions?.curvature,
+      targetPosition = Position.Top,
-    });
+      label,
+      labelStyle,
+      labelShowBg,
+      labelBgStyle,
+      labelBgPadding,
+      labelBgBorderRadius,
+      style,
+      markerEnd,
+      markerStart,
+      pathOptions,
+      interactionWidth,
+    }: BezierEdgeProps) => {
+      const [path, labelX, labelY] = getBezierPath({
+        sourceX,
+        sourceY,
+        sourcePosition,
+        targetX,
+        targetY,
+        targetPosition,
+        curvature: pathOptions?.curvature,
+      });
 
-    return (
+      const _id = params.isInternal ? undefined : id;
-      <BaseEdge
+
-        path={path}
+      return (
-        labelX={labelX}
+        <BaseEdge
-        labelY={labelY}
+          id={_id}
-        label={label}
+          path={path}
-        labelStyle={labelStyle}
+          labelX={labelX}
-        labelShowBg={labelShowBg}
+          labelY={labelY}
-        labelBgStyle={labelBgStyle}
+          label={label}
-        labelBgPadding={labelBgPadding}
+          labelStyle={labelStyle}
-        labelBgBorderRadius={labelBgBorderRadius}
+          labelShowBg={labelShowBg}
-        style={style}
+          labelBgStyle={labelBgStyle}
-        markerEnd={markerEnd}
+          labelBgPadding={labelBgPadding}
-        markerStart={markerStart}
+          labelBgBorderRadius={labelBgBorderRadius}
-        interactionWidth={interactionWidth}
+          style={style}
-      />
+          markerEnd={markerEnd}
-    );
+          markerStart={markerStart}
-  }
+          interactionWidth={interactionWidth}
-);
+        />
+      );
+    }
+  );
+}
+
+const BezierEdge = createBezierEdge({ isInternal: false });
+const BezierEdgeInternal = createBezierEdge({ isInternal: true });
 
 BezierEdge.displayName = 'BezierEdge';
+BezierEdgeInternal.displayName = 'BezierEdgeInternal';
 
-export default BezierEdge;
+export { BezierEdge, BezierEdgeInternal };

packages/react/src/components/Edges/SimpleBezierEdge.tsx

@@ -2,7 +2,7 @@ import { memo } from 'react';
 import { Position, getBezierEdgeCenter } from '@xyflow/system';
 
 import BaseEdge from './BaseEdge';
-import type { EdgeProps } from '../../types';
+import type { SimpleBezierEdgeProps } from '../../types';
 
 export interface GetSimpleBezierPathParams {
   sourceX: number;
@@ -71,54 +71,65 @@ export function getSimpleBezierPath({
   ];
 }
 
-const SimpleBezierEdge = memo(
+function createSimpleBezierEdge(params: { isInternal: boolean }) {
-  ({
+  // eslint-disable-next-line react/display-name
-    sourceX,
+  return memo(
-    sourceY,
+    ({
-    targetX,
+      id,
-    targetY,
-    sourcePosition = Position.Bottom,
-    targetPosition = Position.Top,
-    label,
-    labelStyle,
-    labelShowBg,
-    labelBgStyle,
-    labelBgPadding,
-    labelBgBorderRadius,
-    style,
-    markerEnd,
-    markerStart,
-    interactionWidth,
-  }: EdgeProps) => {
-    const [path, labelX, labelY] = getSimpleBezierPath({
       sourceX,
       sourceY,
-      sourcePosition,
       targetX,
       targetY,
-      targetPosition,
+      sourcePosition = Position.Bottom,
-    });
+      targetPosition = Position.Top,
+      label,
+      labelStyle,
+      labelShowBg,
+      labelBgStyle,
+      labelBgPadding,
+      labelBgBorderRadius,
+      style,
+      markerEnd,
+      markerStart,
+      interactionWidth,
+    }: SimpleBezierEdgeProps) => {
+      const [path, labelX, labelY] = getSimpleBezierPath({
+        sourceX,
+        sourceY,
+        sourcePosition,
+        targetX,
+        targetY,
+        targetPosition,
+      });
 
-    return (
+      const _id = params.isInternal ? undefined : id;
-      <BaseEdge
+
-        path={path}
+      return (
-        labelX={labelX}
+        <BaseEdge
-        labelY={labelY}
+          id={_id}
-        label={label}
+          path={path}
-        labelStyle={labelStyle}
+          labelX={labelX}
-        labelShowBg={labelShowBg}
+          labelY={labelY}
-        labelBgStyle={labelBgStyle}
+          label={label}
-        labelBgPadding={labelBgPadding}
+          labelStyle={labelStyle}
-        labelBgBorderRadius={labelBgBorderRadius}
+          labelShowBg={labelShowBg}
-        style={style}
+          labelBgStyle={labelBgStyle}
-        markerEnd={markerEnd}
+          labelBgPadding={labelBgPadding}
-        markerStart={markerStart}
+          labelBgBorderRadius={labelBgBorderRadius}
-        interactionWidth={interactionWidth}
+          style={style}
-      />
+          markerEnd={markerEnd}
-    );
+          markerStart={markerStart}
-  }
+          interactionWidth={interactionWidth}
-);
+        />
+      );
+    }
+  );
+}
+
+const SimpleBezierEdge = createSimpleBezierEdge({ isInternal: false });
+const SimpleBezierEdgeInternal = createSimpleBezierEdge({ isInternal: true });
 
 SimpleBezierEdge.displayName = 'SimpleBezierEdge';
+SimpleBezierEdgeInternal.displayName = 'SimpleBezierEdgeInternal';
 
-export default SimpleBezierEdge;
+export { SimpleBezierEdge, SimpleBezierEdgeInternal };

packages/react/src/components/Edges/SmoothStepEdge.tsx

@@ -4,57 +4,68 @@ import { Position, getSmoothStepPath } from '@xyflow/system';
 import BaseEdge from './BaseEdge';
 import type { SmoothStepEdgeProps } from '../../types';
 
-const SmoothStepEdge = memo(
+function createSmoothStepEdge(params: { isInternal: boolean }) {
-  ({
+  // eslint-disable-next-line react/display-name
-    sourceX,
+  return memo(
-    sourceY,
+    ({
-    targetX,
+      id,
-    targetY,
-    label,
-    labelStyle,
-    labelShowBg,
-    labelBgStyle,
-    labelBgPadding,
-    labelBgBorderRadius,
-    style,
-    sourcePosition = Position.Bottom,
-    targetPosition = Position.Top,
-    markerEnd,
-    markerStart,
-    pathOptions,
-    interactionWidth,
-  }: SmoothStepEdgeProps) => {
-    const [path, labelX, labelY] = getSmoothStepPath({
       sourceX,
       sourceY,
-      sourcePosition,
       targetX,
       targetY,
-      targetPosition,
+      label,
-      borderRadius: pathOptions?.borderRadius,
+      labelStyle,
-      offset: pathOptions?.offset,
+      labelShowBg,
-    });
+      labelBgStyle,
+      labelBgPadding,
+      labelBgBorderRadius,
+      style,
+      sourcePosition = Position.Bottom,
+      targetPosition = Position.Top,
+      markerEnd,
+      markerStart,
+      pathOptions,
+      interactionWidth,
+    }: SmoothStepEdgeProps) => {
+      const [path, labelX, labelY] = getSmoothStepPath({
+        sourceX,
+        sourceY,
+        sourcePosition,
+        targetX,
+        targetY,
+        targetPosition,
+        borderRadius: pathOptions?.borderRadius,
+        offset: pathOptions?.offset,
+      });
 
-    return (
+      const _id = params.isInternal ? undefined : id;
-      <BaseEdge
+
-        path={path}
+      return (
-        labelX={labelX}
+        <BaseEdge
-        labelY={labelY}
+          id={_id}
-        label={label}
+          path={path}
-        labelStyle={labelStyle}
+          labelX={labelX}
-        labelShowBg={labelShowBg}
+          labelY={labelY}
-        labelBgStyle={labelBgStyle}
+          label={label}
-        labelBgPadding={labelBgPadding}
+          labelStyle={labelStyle}
-        labelBgBorderRadius={labelBgBorderRadius}
+          labelShowBg={labelShowBg}
-        style={style}
+          labelBgStyle={labelBgStyle}
-        markerEnd={markerEnd}
+          labelBgPadding={labelBgPadding}
-        markerStart={markerStart}
+          labelBgBorderRadius={labelBgBorderRadius}
-        interactionWidth={interactionWidth}
+          style={style}
-      />
+          markerEnd={markerEnd}
-    );
+          markerStart={markerStart}
-  }
+          interactionWidth={interactionWidth}
-);
+        />
+      );
+    }
+  );
+}
+
+const SmoothStepEdge = createSmoothStepEdge({ isInternal: false });
+const SmoothStepEdgeInternal = createSmoothStepEdge({ isInternal: true });
 
 SmoothStepEdge.displayName = 'SmoothStepEdge';
+SmoothStepEdgeInternal.displayName = 'SmoothStepEdgeInternal';
 
-export default SmoothStepEdge;
+export { SmoothStepEdge, SmoothStepEdgeInternal };

packages/react/src/components/Edges/StepEdge.tsx

@@ -1,15 +1,30 @@
 import { memo, useMemo } from 'react';
 
-import SmoothStepEdge from './SmoothStepEdge';
+import { SmoothStepEdge } from './SmoothStepEdge';
-import type { SmoothStepEdgeProps } from '../../types';
+import type { StepEdgeProps } from '../../types';
 
-const StepEdge = memo((props: SmoothStepEdgeProps) => (
+function createStepEdge(params: { isInternal: boolean }) {
-  <SmoothStepEdge
+  // eslint-disable-next-line react/display-name
-    {...props}
+  return memo(({ id, ...props }: StepEdgeProps) => {
-    pathOptions={useMemo(() => ({ borderRadius: 0, offset: props.pathOptions?.offset }), [props.pathOptions?.offset])}
+    const _id = params.isInternal ? undefined : id;
-  />
+
-));
+    return (
+      <SmoothStepEdge
+        {...props}
+        id={_id}
+        pathOptions={useMemo(
+          () => ({ borderRadius: 0, offset: props.pathOptions?.offset }),
+          [props.pathOptions?.offset]
+        )}
+      />
+    );
+  });
+}
+
+const StepEdge = createStepEdge({ isInternal: false });
+const StepEdgeInternal = createStepEdge({ isInternal: true });
 
 StepEdge.displayName = 'StepEdge';
+StepEdgeInternal.displayName = 'StepEdgeInternal';
 
-export default StepEdge;
+export { StepEdge, StepEdgeInternal };

packages/react/src/components/Edges/StraightEdge.tsx

@@ -2,47 +2,58 @@ import { memo } from 'react';
 import { getStraightPath } from '@xyflow/system';
 
 import BaseEdge from './BaseEdge';
-import type { EdgeProps } from '../../types';
+import type { StraightEdgeProps } from '../../types';
 
-const StraightEdge = memo(
+function createStraightEdge(params: { isInternal: boolean }) {
-  ({
+  // eslint-disable-next-line react/display-name
-    sourceX,
+  return memo(
-    sourceY,
+    ({
-    targetX,
+      id,
-    targetY,
+      sourceX,
-    label,
+      sourceY,
-    labelStyle,
+      targetX,
-    labelShowBg,
+      targetY,
-    labelBgStyle,
+      label,
-    labelBgPadding,
+      labelStyle,
-    labelBgBorderRadius,
+      labelShowBg,
-    style,
+      labelBgStyle,
-    markerEnd,
+      labelBgPadding,
-    markerStart,
+      labelBgBorderRadius,
-    interactionWidth,
+      style,
-  }: EdgeProps) => {
+      markerEnd,
-    const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY });
+      markerStart,
+      interactionWidth,
+    }: StraightEdgeProps) => {
+      const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY });
 
-    return (
+      const _id = params.isInternal ? undefined : id;
-      <BaseEdge
+
-        path={path}
+      return (
-        labelX={labelX}
+        <BaseEdge
-        labelY={labelY}
+          id={_id}
-        label={label}
+          path={path}
-        labelStyle={labelStyle}
+          labelX={labelX}
-        labelShowBg={labelShowBg}
+          labelY={labelY}
-        labelBgStyle={labelBgStyle}
+          label={label}
-        labelBgPadding={labelBgPadding}
+          labelStyle={labelStyle}
-        labelBgBorderRadius={labelBgBorderRadius}
+          labelShowBg={labelShowBg}
-        style={style}
+          labelBgStyle={labelBgStyle}
-        markerEnd={markerEnd}
+          labelBgPadding={labelBgPadding}
-        markerStart={markerStart}
+          labelBgBorderRadius={labelBgBorderRadius}
-        interactionWidth={interactionWidth}
+          style={style}
-      />
+          markerEnd={markerEnd}
-    );
+          markerStart={markerStart}
-  }
+          interactionWidth={interactionWidth}
-);
+        />
+      );
+    }
+  );
+}
+
+const StraightEdge = createStraightEdge({ isInternal: false });
+const StraightEdgeInternal = createStraightEdge({ isInternal: true });
 
 StraightEdge.displayName = 'StraightEdge';
+StraightEdgeInternal.displayName = 'StraightEdgeInternal';
 
-export default StraightEdge;
+export { StraightEdge, StraightEdgeInternal };

packages/react/src/components/Edges/index.ts

@@ -1,5 +1,9 @@
-export { default as SimpleBezierEdge } from './SimpleBezierEdge';
+// We distinguish between internal and exported edges
-export { default as SmoothStepEdge } from './SmoothStepEdge';
+// The internal edges are used directly like custom edges and always get an id, source and target props
-export { default as StepEdge } from './StepEdge';
+// If you import an edge from the library, the id is optional and source and target are not used at all
-export { default as StraightEdge } from './StraightEdge';
+
-export { default as BezierEdge } from './BezierEdge';
+export { SimpleBezierEdge, SimpleBezierEdgeInternal } from './SimpleBezierEdge';
+export { SmoothStepEdge, SmoothStepEdgeInternal } from './SmoothStepEdge';
+export { StepEdge, StepEdgeInternal } from './StepEdge';
+export { StraightEdge, StraightEdgeInternal } from './StraightEdge';
+export { BezierEdge, BezierEdgeInternal } from './BezierEdge';

packages/react/src/container/EdgeRenderer/utils.ts

@@ -1,6 +1,12 @@
 import type { ComponentType } from 'react';
 
-import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges';
+import {
+  BezierEdgeInternal,
+  SmoothStepEdgeInternal,
+  StepEdgeInternal,
+  StraightEdgeInternal,
+  SimpleBezierEdgeInternal,
+} from '../../components/Edges';
 import wrapEdge from '../../components/Edges/wrapEdge';
 import type { EdgeProps, EdgeTypes, EdgeTypesWrapped } from '../../types';
 
@@ -8,18 +14,18 @@ export type CreateEdgeTypes = (edgeTypes: EdgeTypes) => EdgeTypesWrapped;
 
 export function createEdgeTypes(edgeTypes: EdgeTypes): EdgeTypesWrapped {
   const standardTypes: EdgeTypesWrapped = {
-    default: wrapEdge((edgeTypes.default || BezierEdge) as ComponentType<EdgeProps>),
+    default: wrapEdge((edgeTypes.default || BezierEdgeInternal) as ComponentType<EdgeProps>),
-    straight: wrapEdge((edgeTypes.bezier || StraightEdge) as ComponentType<EdgeProps>),
+    straight: wrapEdge((edgeTypes.bezier || StraightEdgeInternal) as ComponentType<EdgeProps>),
-    step: wrapEdge((edgeTypes.step || StepEdge) as ComponentType<EdgeProps>),
+    step: wrapEdge((edgeTypes.step || StepEdgeInternal) as ComponentType<EdgeProps>),
-    smoothstep: wrapEdge((edgeTypes.step || SmoothStepEdge) as ComponentType<EdgeProps>),
+    smoothstep: wrapEdge((edgeTypes.step || SmoothStepEdgeInternal) as ComponentType<EdgeProps>),
-    simplebezier: wrapEdge((edgeTypes.simplebezier || SimpleBezierEdge) as ComponentType<EdgeProps>),
+    simplebezier: wrapEdge((edgeTypes.simplebezier || SimpleBezierEdgeInternal) as ComponentType<EdgeProps>),
   };
 
   const wrappedTypes = {} as EdgeTypesWrapped;
   const specialTypes: EdgeTypesWrapped = Object.keys(edgeTypes)
     .filter((k) => !['default', 'bezier'].includes(k))
     .reduce((res, key) => {
-      res[key] = wrapEdge((edgeTypes[key] || BezierEdge) as ComponentType<EdgeProps>);
+      res[key] = wrapEdge((edgeTypes[key] || BezierEdgeInternal) as ComponentType<EdgeProps>);
 
       return res;
     }, wrappedTypes);

packages/react/src/container/ReactFlow/index.tsx

@@ -12,7 +12,13 @@ import {
 } from '@xyflow/system';
 
 import Attribution from '../../components/Attribution';
-import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges';
+import {
+  BezierEdgeInternal,
+  SmoothStepEdgeInternal,
+  StepEdgeInternal,
+  StraightEdgeInternal,
+  SimpleBezierEdgeInternal,
+} from '../../components/Edges';
 import DefaultNode from '../../components/Nodes/DefaultNode';
 import InputNode from '../../components/Nodes/InputNode';
 import OutputNode from '../../components/Nodes/OutputNode';
@@ -33,11 +39,11 @@ const defaultNodeTypes: NodeTypes = {
 };
 
 const defaultEdgeTypes: EdgeTypes = {
-  default: BezierEdge,
+  default: BezierEdgeInternal,
-  straight: StraightEdge,
+  straight: StraightEdgeInternal,
-  step: StepEdge,
+  step: StepEdgeInternal,
-  smoothstep: SmoothStepEdge,
+  smoothstep: SmoothStepEdgeInternal,
-  simplebezier: SimpleBezierEdge,
+  simplebezier: SimpleBezierEdgeInternal,
 };
 
 const initNodeOrigin: NodeOrigin = [0, 0];

packages/react/src/index.ts

@@ -1,11 +1,11 @@
 export { default as ReactFlow } from './container/ReactFlow';
 export { default as Handle } from './components/Handle';
 export { default as EdgeText } from './components/Edges/EdgeText';
-export { default as StraightEdge } from './components/Edges/StraightEdge';
+export { StraightEdge } from './components/Edges/StraightEdge';
-export { default as StepEdge } from './components/Edges/StepEdge';
+export { StepEdge } from './components/Edges/StepEdge';
-export { default as BezierEdge } from './components/Edges/BezierEdge';
+export { BezierEdge } from './components/Edges/BezierEdge';
-export { default as SimpleBezierEdge, getSimpleBezierPath } from './components/Edges/SimpleBezierEdge';
+export { SimpleBezierEdge, getSimpleBezierPath } from './components/Edges/SimpleBezierEdge';
-export { default as SmoothStepEdge } from './components/Edges/SmoothStepEdge';
+export { SmoothStepEdge } from './components/Edges/SmoothStepEdge';
 export { default as BaseEdge } from './components/Edges/BaseEdge';
 export { default as ReactFlowProvider } from './components/ReactFlowProvider';
 export { default as Panel, type PanelProps } from './components/Panel';

packages/react/src/types/edges.ts

@@ -13,6 +13,8 @@ import type {
   HandleElement,
   ConnectionStatus,
   EdgePosition,
+  Optional,
+  StepPathOptions,
 } from '@xyflow/system';
 
 import { Node } from '.';
@@ -46,7 +48,12 @@ type BezierEdgeType<T> = DefaultEdge<T> & {
   pathOptions?: BezierPathOptions;
 };
 
-export type Edge<T = any> = DefaultEdge<T> | SmoothStepEdgeType<T> | BezierEdgeType<T>;
+type StepEdgeType<T> = DefaultEdge<T> & {
+  type: 'step';
+  pathOptions?: StepPathOptions;
+};
+
+export type Edge<T = any> = DefaultEdge<T> | SmoothStepEdgeType<T> | BezierEdgeType<T> | StepEdgeType<T>;
 
 export type EdgeMouseHandler = (event: ReactMouseEvent, edge: Edge) => void;
 
@@ -100,14 +107,24 @@ export type BaseEdgeProps = Pick<EdgeProps, 'style' | 'markerStart' | 'markerEnd
     path: string;
   };
 
-export type SmoothStepEdgeProps<T = any> = EdgeProps<T> & {
+export type EdgeComponentProps<T = any> = Optional<Omit<EdgeProps<T>, 'source' | 'target'>, 'id'>;
+
+export type StraightEdgeProps<T = any> = Omit<EdgeComponentProps<T>, 'sourcePosition' | 'targetPosition'>;
+
+export type SmoothStepEdgeProps<T = any> = EdgeComponentProps<T> & {
   pathOptions?: SmoothStepPathOptions;
 };
 
-export type BezierEdgeProps<T = any> = EdgeProps<T> & {
+export type BezierEdgeProps<T = any> = EdgeComponentProps<T> & {
   pathOptions?: BezierPathOptions;
 };
 
+export type StepEdgeProps<T = any> = EdgeComponentProps<T> & {
+  pathOptions?: StepPathOptions;
+};
+
+export type SimpleBezierEdgeProps<T = any> = EdgeComponentProps<T>;
+
 export type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connection) => void;
 
 export type ConnectionLineComponentProps = {

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';
 
@@ -57,7 +57,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/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,
+    sourceX,
-    sourceY: $$props.sourceY,
+    sourceY,
-    targetX: $$props.targetX,
+    targetX,
-    targetY: $$props.targetY,
+    targetY,
-    sourcePosition: $$props.sourcePosition,
+    sourcePosition,
-    targetPosition: $$props.targetPosition
+    targetPosition,
+    curvature: pathOptions?.curvature
   });
 </script>
 
 <BaseEdge
+  {id}
   {path}
   {labelX}
   {labelY}
-  id={$$props.id}
+  {label}
-  label={$$props.label}
+  {labelStyle}
-  labelStyle={$$props.labelStyle}
+  {markerStart}
-  markerStart={$$props.markerStart}
+  {markerEnd}
-  markerEnd={$$props.markerEnd}
+  {interactionWidth}
-  interactionWidth={$$props.interactionWidth}
+  {style}
-  style={$$props.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,
+    sourceX,
-    sourceY: $$props.sourceY,
+    sourceY,
-    targetX: $$props.targetX,
+    targetX,
-    targetY: $$props.targetY,
+    targetY,
-    sourcePosition: $$props.sourcePosition,
+    sourcePosition,
-    targetPosition: $$props.targetPosition
+    targetPosition,
+    borderRadius: pathOptions?.borderRadius,
+    offset: pathOptions?.offset
   });
 </script>
 
 <BaseEdge
+  {id}
   {path}
   {labelX}
   {labelY}
-  id={$$props.id}
+  {label}
-  label={$$props.label}
+  {labelStyle}
-  labelStyle={$$props.labelStyle}
+  {markerStart}
-  markerStart={$$props.markerStart}
+  {markerEnd}
-  markerEnd={$$props.markerEnd}
+  {interactionWidth}
-  interactionWidth={$$props.interactionWidth}
+  {style}
-  style={$$props.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,
+    sourceX,
-    sourceY: $$props.sourceY,
+    sourceY,
-    targetX: $$props.targetX,
+    targetX,
-    targetY: $$props.targetY,
+    targetY,
-    sourcePosition: $$props.sourcePosition,
+    sourcePosition,
-    targetPosition: $$props.targetPosition,
+    targetPosition,
-    borderRadius: 0
+    borderRadius: 0,
+    offset: pathOptions?.offset
   });
 </script>
 
 <BaseEdge
+  {id}
   {path}
   {labelX}
   {labelY}
-  id={$$props.id}
+  {label}
-  label={$$props.label}
+  {labelStyle}
-  labelStyle={$$props.labelStyle}
+  {markerStart}
-  markerStart={$$props.markerStart}
+  {markerEnd}
-  markerEnd={$$props.markerEnd}
+  {interactionWidth}
-  interactionWidth={$$props.interactionWidth}
+  {style}
-  style={$$props.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,
+    sourceX,
-    sourceY: $$props.sourceY,
+    sourceY,
-    targetX: $$props.targetX,
+    targetX,
-    targetY: $$props.targetY
+    targetY
   });
 </script>
 
 <BaseEdge
+  {id}
   {path}
   {labelX}
   {labelY}
-  id={$$props.id}
+  {label}
-  label={$$props.label}
+  {labelStyle}
-  labelStyle={$$props.labelStyle}
+  {markerStart}
-  markerStart={$$props.markerStart}
+  {markerEnd}
-  markerEnd={$$props.markerEnd}
+  {interactionWidth}
-  interactionWidth={$$props.interactionWidth}
+  {style}
-  style={$$props.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/index.ts

@@ -7,7 +7,7 @@ export * from '$lib/container/Panel';
 export * from '$lib/components/SvelteFlowProvider';
 export * from '$lib/components/EdgeLabelRenderer';
 export * from '$lib/components/BaseEdge';
-export * from '$lib/components/edges';
+export { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '$lib/components/edges';
 export * from '$lib/components/Handle';
 
 // plugins
@@ -29,7 +29,16 @@ export * from '$lib/hooks/useConnection';
 export * from '$lib/hooks/useNodesEdges';
 
 // types
-export type { Edge, EdgeProps, EdgeTypes, DefaultEdgeOptions } from '$lib/types/edges';
+export type {
+  Edge,
+  EdgeProps,
+  BezierEdgeProps,
+  SmoothStepEdgeProps,
+  StepEdgeProps,
+  StraightEdgeProps,
+  EdgeTypes,
+  DefaultEdgeOptions
+} from '$lib/types/edges';
 export type { HandleComponentProps, FitViewOptions } from '$lib/types/general';
 export type { Node, NodeTypes, DefaultNodeOptions } from '$lib/types/nodes';
 export type { SvelteFlowStore } from '$lib/store/types';

packages/svelte/src/lib/store/initial-store.ts

@@ -24,10 +24,14 @@ import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
 import InputNode from '$lib/components/nodes/InputNode.svelte';
 import OutputNode from '$lib/components/nodes/OutputNode.svelte';
 import GroupNode from '$lib/components/nodes/GroupNode.svelte';
-import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
+
-import StraightEdge from '$lib/components/edges/StraightEdge.svelte';
+import {
-import SmoothStepEdge from '$lib/components/edges/SmoothStepEdge.svelte';
+  BezierEdgeInternal,
-import StepEdge from '$lib/components/edges/StepEdge.svelte';
+  SmoothStepEdgeInternal,
+  StraightEdgeInternal,
+  StepEdgeInternal
+} from '$lib/components/edges';
+
 import type {
   NodeTypes,
   EdgeTypes,
@@ -49,10 +53,10 @@ export const initialNodeTypes = {
 };
 
 export const initialEdgeTypes = {
-  straight: StraightEdge,
+  straight: StraightEdgeInternal,
-  smoothstep: SmoothStepEdge,
+  smoothstep: SmoothStepEdgeInternal,
-  default: BezierEdge,
+  default: BezierEdgeInternal,
-  step: StepEdge
+  step: StepEdgeInternal
 };
 
 export const getInitialStore = ({

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

@@ -5,7 +5,9 @@ import type {
   BezierPathOptions,
   DefaultEdgeOptionsBase,
   EdgePosition,
-  SmoothStepPathOptions
+  SmoothStepPathOptions,
+  Optional,
+  StepPathOptions
 } from '@xyflow/system';
 
 import type { Node } from '$lib/types';
@@ -29,6 +31,7 @@ type BezierEdgeType<T> = DefaultEdge<T> & {
 
 type StepEdgeType<T> = DefaultEdge<T> & {
   type: 'step';
+  pathOptions?: StepPathOptions;
 };
 
 export type Edge<T = any> =
@@ -37,7 +40,7 @@ export type Edge<T = any> =
   | BezierEdgeType<T>
   | StepEdgeType<T>;
 
-export type EdgeProps = Omit<Edge, 'sourceHandle' | 'targetHandle'> &
+export type EdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandle' | 'type'> &
   EdgePosition & {
     markerStart?: string;
     markerEnd?: string;
@@ -45,6 +48,31 @@ export type EdgeProps = Omit<Edge, 'sourceHandle' | 'targetHandle'> &
     targetHandleId?: string | null;
   };
 
+export type EdgeComponentProps<T = any> = Optional<
+  Omit<
+    EdgeProps<T>,
+    'source' | 'target' | 'sourceHandleId' | 'targetHandleId' | 'animated' | 'selected' | 'data'
+  >,
+  'id'
+>;
+
+export type BezierEdgeProps<T = any> = EdgeComponentProps<T> & {
+  pathOptions?: BezierPathOptions;
+};
+
+export type SmoothStepEdgeProps<T = any> = EdgeComponentProps<T> & {
+  pathOptions?: SmoothStepPathOptions;
+};
+
+export type StepEdgeProps<T = any> = EdgeComponentProps<T> & {
+  pathOptions?: StepPathOptions;
+};
+
+export type StraightEdgeProps<T = any> = Omit<
+  EdgeComponentProps<T>,
+  'sourcePosition' | 'targetPosition'
+>;
+
 export type EdgeTypes = Record<string, ComponentType<SvelteComponent<EdgeProps>>>;
 
 export type DefaultEdgeOptions = Omit<DefaultEdgeOptionsBase<Edge>, 'focusable'>;

packages/svelte/tsconfig.json

@@ -8,7 +8,8 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "sourceMap": true,
-    "strict": true
+    "strict": true,
+    "noErrorTruncation": true
   }
 
   // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias

packages/system/src/types/edges.ts

@@ -27,6 +27,10 @@ export type SmoothStepPathOptions = {
   borderRadius?: number;
 };
 
+export type StepPathOptions = {
+  offset?: number;
+};
+
 export type BezierPathOptions = {
   curvature?: number;
 };

packages/system/src/types/utils.ts

@@ -1,3 +1,5 @@
+import type { Optional } from '../utils/types';
+
 export enum Position {
   Left = 'left',
   Top = 'top',

packages/system/src/utils/index.ts

@@ -5,3 +5,4 @@ export * from './general';
 export * from './marker';
 export * from './node-toolbar';
 export * from './store';
+export * from './types';

tooling/tsconfig/react.json

@@ -6,6 +6,7 @@
     "lib": ["dom", "esnext"],
     "module": "esnext",
     "target": "esnext",
-    "outDir": "dist"
+    "outDir": "dist",
+    "noErrorTruncation": true
   }
 }