feat(svelte): add step edge

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { getSmoothStepPath } from '@reactflow/edge-utils';
+
+  import type { EdgeProps } from '$lib/types';
+  import { BaseEdge } from '$lib/components/BaseEdge';
+
+  type $$Props = EdgeProps;
+
+  $: [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} {...$$props} />

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

@@ -16,6 +16,7 @@ import OutputNode from '$lib/components/nodes/OutputNode.svelte';
 import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
 import StraightEdge from '$lib/components/edges/StraightEdge.svelte';
 import SmoothStepEdge from '$lib/components/edges/SmoothStepEdge.svelte';
+import StepEdge from '$lib/components/edges/StepEdge.svelte';
 import type {
   ConnectionData,
   NodeTypes,
@@ -43,7 +44,8 @@ export const initialNodeTypes = {
 export const initialEdgeTypes = {
   straight: StraightEdge,
   smoothstep: SmoothStepEdge,
-  default: BezierEdge
+  default: BezierEdge,
+  step: StepEdge
 };
 
 export const initialStoreState = {

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

@@ -28,7 +28,15 @@ 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';
+};
+
+export type Edge<T = any> =
+  | DefaultEdge<T>
+  | SmoothStepEdgeType<T>
+  | BezierEdgeType<T>
+  | StepEdgeType<T>;
 
 export type EdgeLayouted = Omit<Edge, 'sourceHandle' | 'targetHandle'> & {
   sourceX: number;