From 24400d259bb312e097f4e9345b2aecbad5829e2a Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 15 May 2023 13:59:09 +0200
Subject: [PATCH] feat(svelte): add step edge

---
 .../src/lib/components/edges/StepEdge.svelte  | 20 +++++++++++++++++++
 .../svelte/src/lib/store/initial-store.ts     |  4 +++-
 packages/svelte/src/lib/types/edges.ts        | 10 +++++++++-
 3 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 packages/svelte/src/lib/components/edges/StepEdge.svelte

diff --git a/packages/svelte/src/lib/components/edges/StepEdge.svelte b/packages/svelte/src/lib/components/edges/StepEdge.svelte
new file mode 100644
index 00000000..b765adcc
--- /dev/null
+++ b/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} />
diff --git a/packages/svelte/src/lib/store/initial-store.ts b/packages/svelte/src/lib/store/initial-store.ts
index 4d3cfdbf..31e37833 100644
--- a/packages/svelte/src/lib/store/initial-store.ts
+++ b/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 = {
diff --git a/packages/svelte/src/lib/types/edges.ts b/packages/svelte/src/lib/types/edges.ts
index a6b961e4..a60f5f76 100644
--- a/packages/svelte/src/lib/types/edges.ts
+++ b/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;