From a7bacb754af3a00054348c1628873c149edd44a7 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 12 Dec 2021 00:16:11 +0100
Subject: [PATCH] refactor(edges)!: use markerEnd and markerStart

* remove markerEndId

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 src/components/Edges/BezierEdge.vue     | 15 ++++++++-------
 src/components/Edges/SmoothStepEdge.vue | 12 ++++++++----
 src/components/Edges/StraightEdge.vue   | 12 ++++++++----
 src/types/edge.ts                       |  1 -
 4 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/components/Edges/BezierEdge.vue b/src/components/Edges/BezierEdge.vue
index 1bb2ace4..cf8f551f 100644
--- a/src/components/Edges/BezierEdge.vue
+++ b/src/components/Edges/BezierEdge.vue
@@ -1,8 +1,7 @@
 <script lang="ts" setup>
-import { CSSProperties } from 'vue'
 import { Position } from '../../types/flow'
 import type { EdgeProps } from '../../types/edge'
-import { getCenter, getMarkerEnd, getBezierPath } from './utils'
+import { getCenter, getBezierPath } from './utils'
 import EdgeText from './EdgeText.vue'
 
 const props = withDefaults(defineProps<EdgeProps>(), {
@@ -26,10 +25,6 @@ const path = computed(() => {
     })
   else return ''
 })
-
-const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
-
-const attrs = useAttrs() as Record<'style', CSSProperties>
 </script>
 <script lang="ts">
 export default {
@@ -38,7 +33,13 @@ export default {
 }
 </script>
 <template>
-  <path class="vue-flow__edge-path" :style="attrs.style" :d="path" :marker-end="markerEnd" />
+  <path
+    class="vue-flow__edge-path"
+    :style="props.style"
+    :d="path"
+    :marker-end="props.markerEnd"
+    :marker-start="props.markerStart"
+  />
   <slot :x="centered[0]" :y="centered[1]" v-bind="props">
     <EdgeText
       v-if="props.label"
diff --git a/src/components/Edges/SmoothStepEdge.vue b/src/components/Edges/SmoothStepEdge.vue
index 6ab3b76e..0ad70c7f 100644
--- a/src/components/Edges/SmoothStepEdge.vue
+++ b/src/components/Edges/SmoothStepEdge.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { Position } from '../../types'
 import type { SmoothStepEdgeProps } from '../../types/edge'
-import { getCenter, getMarkerEnd, getSmoothStepPath } from './utils'
+import { getCenter, getSmoothStepPath } from './utils'
 import EdgeText from './EdgeText.vue'
 
 const props = withDefaults(defineProps<SmoothStepEdgeProps>(), {
@@ -27,8 +27,6 @@ const path = computed(() => {
     })
   else return ''
 })
-
-const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
 </script>
 <script lang="ts">
 export default {
@@ -37,7 +35,13 @@ export default {
 }
 </script>
 <template>
-  <path class="vue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
+  <path
+    class="vue-flow__edge-path"
+    :style="props.style"
+    :d="path"
+    :marker-end="props.markerEnd"
+    :marker-start="props.markerStart"
+  />
   <slot :x="centered[0]" :y="centered[1]" v-bind="props">
     <EdgeText
       v-if="props.label"
diff --git a/src/components/Edges/StraightEdge.vue b/src/components/Edges/StraightEdge.vue
index 80eb8ba1..eb6eeae2 100644
--- a/src/components/Edges/StraightEdge.vue
+++ b/src/components/Edges/StraightEdge.vue
@@ -2,7 +2,7 @@
 import { Position } from '../../types'
 import type { EdgeProps } from '../../types/edge'
 import EdgeText from './EdgeText.vue'
-import { getMarkerEnd, getBezierPath } from './utils'
+import { getBezierPath } from './utils'
 
 const props = withDefaults(defineProps<EdgeProps>(), {
   selected: false,
@@ -30,8 +30,6 @@ const path = computed(() => {
     })
   else return ''
 })
-
-const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
 </script>
 <script lang="ts">
 export default {
@@ -40,7 +38,13 @@ export default {
 }
 </script>
 <template>
-  <path class="vue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
+  <path
+    class="vue-flow__edge-path"
+    :style="props.style"
+    :d="path"
+    :marker-end="props.markerEnd"
+    :marker-start="props.markerStart"
+  />
   <slot :x="centerX" :y="centerY" v-bind="props">
     <EdgeText
       v-if="props.label"
diff --git a/src/types/edge.ts b/src/types/edge.ts
index 18a1a7a8..99dd33be 100644
--- a/src/types/edge.ts
+++ b/src/types/edge.ts
@@ -70,7 +70,6 @@ export interface EdgeProps<Data = any> {
   selected?: boolean
   sourcePosition: Position
   targetPosition: Position
-  markerEndId?: string
   sourceHandleId?: string
   targetHandleId?: string
   source: string