refactor(svelte/edges): simplify

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

@@ -1,11 +1,11 @@
 import { memo, useMemo } from 'react';
 
 import { SmoothStepEdge } from './SmoothStepEdge';
-import type { SmoothStepEdgeProps } from '../../types';
+import type { StepEdgeProps } from '../../types';
 
 function createStepEdge(params: { isInternal: boolean }) {
   // eslint-disable-next-line react/display-name
-  return memo(({ id, ...props }: SmoothStepEdgeProps) => {
+  return memo(({ id, ...props }: StepEdgeProps) => {
     const _id = params.isInternal ? undefined : id;
 
     return (

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

@@ -1,3 +1,7 @@
+// 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
+
 export { SimpleBezierEdge, SimpleBezierEdgeInternal } from './SimpleBezierEdge';
 export { SmoothStepEdge, SmoothStepEdgeInternal } from './SmoothStepEdge';
 export { StepEdge, StepEdgeInternal } from './StepEdge';

packages/react/src/types/edges.ts

@@ -14,6 +14,7 @@ import type {
   ConnectionStatus,
   EdgePosition,
   Optional,
+  StepPathOptions,
 } from '@xyflow/system';
 
 import { Node } from '.';
@@ -47,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;
 
@@ -113,6 +119,10 @@ 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;

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/internal';
+  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 +0,0 @@
-<script lang="ts">
-  import { getBezierPath, type Optional } from '@xyflow/system';
-
-  import type { EdgeProps } from '$lib/types';
-  import { BaseEdge } from '$lib/components/BaseEdge';
-
-  type $$Props = Optional<EdgeProps, 'id' | 'target' | 'source'>;
-
-  $: [path, labelX, labelY] = getBezierPath({
-    sourceX: $$props.sourceX,
-    sourceY: $$props.sourceY,
-    targetX: $$props.targetX,
-    targetY: $$props.targetY,
-    sourcePosition: $$props.sourcePosition,
-    targetPosition: $$props.targetPosition
-  });
-</script>
-
-<BaseEdge
-  {path}
-  {labelX}
-  {labelY}
-  id={$$props.id}
-  label={$$props.label}
-  labelStyle={$$props.labelStyle}
-  markerStart={$$props.markerStart}
-  markerEnd={$$props.markerEnd}
-  interactionWidth={$$props.interactionWidth}
-  style={$$props.style}
-/>

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

@@ -1,10 +1,10 @@
 <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 & { internal?: boolean };
 
   $: [path, labelX, labelY] = getBezierPath({
     sourceX: $$props.sourceX,
@@ -12,14 +12,18 @@
     targetX: $$props.targetX,
     targetY: $$props.targetY,
     sourcePosition: $$props.sourcePosition,
-    targetPosition: $$props.targetPosition
+    targetPosition: $$props.targetPosition,
+    curvature: $$props.pathOptions?.curvature
   });
+
+  $: id = $$props.internal ? undefined : $$props.id;
 </script>
 
 <BaseEdge
   {path}
   {labelX}
   {labelY}
+  {id}
   label={$$props.label}
   labelStyle={$$props.labelStyle}
   markerStart={$$props.markerStart}

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import BaseBezierEdge from './BaseBezierEdge.svelte';
+  import type { BezierEdgeProps } from '$lib/types';
+
+  type $$Props = BezierEdgeProps;
+
+  $: props = $$props as $$Props;
+</script>
+
+<BaseBezierEdge {...props} />

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import BaseBezierEdge from './BaseBezierEdge.svelte';
+  import type { EdgeProps } from '$lib/types';
+
+  type $$Props = EdgeProps;
+
+  $: props = $$props as $$Props;
+</script>
+
+<BaseBezierEdge {...props} internal />

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

@@ -1,30 +0,0 @@
-<script lang="ts">
-  import { getSmoothStepPath, type Optional } from '@xyflow/system';
-
-  import type { EdgeProps } from '$lib/types';
-  import { BaseEdge } from '$lib/components/BaseEdge';
-
-  type $$Props = Optional<EdgeProps, 'id' | 'target' | 'source'>;
-
-  $: [path, labelX, labelY] = getSmoothStepPath({
-    sourceX: $$props.sourceX,
-    sourceY: $$props.sourceY,
-    targetX: $$props.targetX,
-    targetY: $$props.targetY,
-    sourcePosition: $$props.sourcePosition,
-    targetPosition: $$props.targetPosition
-  });
-</script>
-
-<BaseEdge
-  {path}
-  {labelX}
-  {labelY}
-  id={$$props.id}
-  label={$$props.label}
-  labelStyle={$$props.labelStyle}
-  markerStart={$$props.markerStart}
-  markerEnd={$$props.markerEnd}
-  interactionWidth={$$props.interactionWidth}
-  style={$$props.style}
-/>

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

@@ -1,10 +1,10 @@
 <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 & { internal?: boolean };
 
   $: [path, labelX, labelY] = getSmoothStepPath({
     sourceX: $$props.sourceX,
@@ -12,14 +12,19 @@
     targetX: $$props.targetX,
     targetY: $$props.targetY,
     sourcePosition: $$props.sourcePosition,
-    targetPosition: $$props.targetPosition
+    targetPosition: $$props.targetPosition,
+    borderRadius: $$props.pathOptions?.borderRadius,
+    offset: $$props.pathOptions?.offset
   });
+
+  $: id = $$props.internal ? undefined : $$props.id;
 </script>
 
 <BaseEdge
   {path}
   {labelX}
   {labelY}
+  {id}
   label={$$props.label}
   labelStyle={$$props.labelStyle}
   markerStart={$$props.markerStart}

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import BaseSmoothStepEdge from './BaseSmoothStepEdge.svelte';
+  import type { SmoothStepEdgeProps } from '$lib/types';
+
+  type $$Props = SmoothStepEdgeProps;
+
+  $: props = $$props as $$Props;
+</script>
+
+<BaseSmoothStepEdge {...props} />

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import BaseSmoothStepEdge from './BaseSmoothStepEdge.svelte';
+  import type { EdgeProps } from '$lib/types';
+
+  type $$Props = EdgeProps;
+
+  $: props = $$props as $$Props;
+</script>
+
+<BaseSmoothStepEdge {...props} internal />

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

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

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

@@ -1,10 +1,10 @@
 <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 & { internal?: boolean };
 
   $: [path, labelX, labelY] = getSmoothStepPath({
     sourceX: $$props.sourceX,
@@ -13,14 +13,18 @@
     targetY: $$props.targetY,
     sourcePosition: $$props.sourcePosition,
     targetPosition: $$props.targetPosition,
-    borderRadius: 0
+    borderRadius: 0,
+    offset: $$props.pathOptions?.offset
   });
+
+  $: id = $$props.internal ? undefined : $$props.id;
 </script>
 
 <BaseEdge
   {path}
   {labelX}
   {labelY}
+  {id}
   label={$$props.label}
   labelStyle={$$props.labelStyle}
   markerStart={$$props.markerStart}

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import BaseStepEdge from './BaseStepEdge.svelte';
+  import type { StepEdgeProps } from '$lib/types';
+
+  type $$Props = StepEdgeProps;
+
+  $: props = $$props as $$Props;
+</script>
+
+<BaseStepEdge {...props} />

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import BaseStepEdge from './BaseStepEdge.svelte';
+  import type { EdgeProps } from '$lib/types';
+
+  type $$Props = EdgeProps;
+
+  $: props = $$props as $$Props;
+</script>
+
+<BaseStepEdge {...props} internal />

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

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

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

@@ -1,10 +1,10 @@
 <script lang="ts">
   import { getStraightPath } 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 & { internal?: boolean };
 
   $: [path, labelX, labelY] = getStraightPath({
     sourceX: $$props.sourceX,
@@ -12,12 +12,15 @@
     targetX: $$props.targetX,
     targetY: $$props.targetY
   });
+
+  $: id = $$props.internal ? undefined : $$props.id;
 </script>
 
 <BaseEdge
   {path}
   {labelX}
   {labelY}
+  {id}
   label={$$props.label}
   labelStyle={$$props.labelStyle}
   markerStart={$$props.markerStart}

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import BaseStraighEdge from './BaseStraightEdge.svelte';
+  import type { StraightEdgeProps } from '$lib/types';
+
+  type $$Props = StraightEdgeProps;
+
+  $: props = $$props as $$Props;
+</script>
+
+<BaseStraighEdge {...props} />

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import BaseStraighEdge from './BaseStraightEdge.svelte';
+  import type { EdgeProps } from '$lib/types';
+
+  type $$Props = EdgeProps;
+
+  $: props = $$props as $$Props;
+</script>
+
+<BaseStraighEdge {...props} internal />

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

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

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

@@ -1,4 +0,0 @@
-export { default as BezierEdge } from './BezierEdgeInternal.svelte';
-export { default as StraightEdge } from './StraightEdgeInternal.svelte';
-export { default as SmoothStepEdge } from './SmoothStepEdgeInternal.svelte';
-export { default as StepEdge } from './StepEdgeInternal.svelte';

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

@@ -25,7 +25,12 @@ 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, StraightEdge, StepEdge, SmoothStepEdge } from '$lib/components/edges/internal';
+import {
+  BezierEdgeInternal,
+  SmoothStepEdgeInternal,
+  StraightEdgeInternal,
+  StepEdgeInternal
+} from '$lib/components/edges';
 
 import type {
   NodeTypes,
@@ -47,10 +52,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'> &
   EdgePosition & {
     markerStart?: string;
     markerEnd?: string;
@@ -45,6 +48,22 @@ export type EdgeProps = Omit<Edge, 'sourceHandle' | 'targetHandle'> &
     targetHandleId?: string | null;
   };
 
+export type EdgeComponentProps<T = any> = Optional<Omit<EdgeProps<T>, 'source' | 'target'>, '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> = EdgeComponentProps<T>;
+
 export type EdgeTypes = Record<string, ComponentType<SvelteComponent<EdgeProps>>>;
 
 export type DefaultEdgeOptions = Omit<DefaultEdgeOptionsBase<Edge>, 'focusable'>;

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;
 };