From aba67a485261f919b2a1739c84b4bcf9d899e7be Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 25 Mar 2022 15:08:41 +0100
Subject: [PATCH] feat(edges): Add base edge

---
 src/components/Edges/BaseEdge.vue   | 45 ++++++++++++++++++++++++++
 src/components/Edges/BezierEdge.vue | 49 ++++++++++++++++-------------
 2 files changed, 72 insertions(+), 22 deletions(-)
 create mode 100644 src/components/Edges/BaseEdge.vue

diff --git a/src/components/Edges/BaseEdge.vue b/src/components/Edges/BaseEdge.vue
new file mode 100644
index 00000000..bc62ee13
--- /dev/null
+++ b/src/components/Edges/BaseEdge.vue
@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { CSSProperties } from 'vue'
+import EdgeText from './EdgeText.vue'
+
+interface Props {
+  centerX: number
+  centerY: number
+  path: string
+  label?:
+    | string
+    | {
+        props?: any
+        component: any
+      }
+  style?: CSSProperties
+  labelStyle?: any
+  labelShowBg?: boolean
+  labelBgStyle?: any
+  labelBgPadding?: [number, number]
+  labelBgBorderRadius?: number
+  markerStart?: string
+  markerEnd?: string
+}
+const props = defineProps<Props>()
+</script>
+<template>
+  <path
+    :style="props.style"
+    :d="props.path"
+    class="vue-flow__edge-path"
+    :marker-end="props.markerEnd"
+    :marker-start="props.markerStart"
+  />
+  <EdgeText
+    v-if="props.label"
+    :x="props.centerX"
+    :y="props.centerY"
+    :label="props.label"
+    :label-style="props.labelStyle"
+    :label-show-bg="props.labelShowBg"
+    :label-bg-style="props.labelBgStyle"
+    :label-bg-padding="props.labelBgPadding"
+    :label-bg-border-radius="props.labelBgBorderRadius"
+  />
+</template>
diff --git a/src/components/Edges/BezierEdge.vue b/src/components/Edges/BezierEdge.vue
index 2bb762ba..9e4482cb 100644
--- a/src/components/Edges/BezierEdge.vue
+++ b/src/components/Edges/BezierEdge.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { Position } from '../../types/flow'
 import type { EdgeProps } from '../../types/edge'
-import { getCenter, getBezierPath } from './utils'
-import EdgeText from './EdgeText.vue'
+import { getBezierPath, getBezierCenter } from './utils'
+import BaseEdge from './BaseEdge.vue'
 
 const props = withDefaults(defineProps<EdgeProps>(), {
   selected: false,
@@ -15,14 +15,26 @@ const props = withDefaults(defineProps<EdgeProps>(), {
 })
 
 const centered = computed(() =>
-  getCenter({
-    ...props,
+  getBezierCenter({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    targetX: props.targetX,
+    targetY: props.targetY,
+    sourcePosition: props.sourcePosition,
+    targetPosition: props.targetPosition,
+    curvature: props.curvature,
   }),
 )
 const path = computed(() => {
   if (props.sourceX && props.sourceY)
     return getBezierPath({
-      ...props,
+      sourceX: props.sourceX,
+      sourceY: props.sourceY,
+      targetX: props.targetX,
+      targetY: props.targetY,
+      sourcePosition: props.sourcePosition,
+      targetPosition: props.targetPosition,
+      curvature: props.curvature,
     })
   else return ''
 })
@@ -30,28 +42,21 @@ const path = computed(() => {
 <script lang="ts">
 export default {
   name: 'BezierEdge',
-  inheritAttrs: false,
 }
 </script>
 <template>
-  <path
-    class="vue-flow__edge-path"
+  <BaseEdge
+    :path="path"
+    :center-x="centered[0]"
+    :center-y="centered[1]"
+    :label="props.label"
+    :label-style="props.labelStyle"
+    :label-show-bg="props.labelShowBg"
+    :label-bg-style="props.labelBgStyle"
+    :label-bg-padding="props.labelBgPadding"
+    :label-bg-border-radius="props.labelBgBorderRadius"
     :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"
-      :x="centered[0]"
-      :y="centered[1]"
-      :label="props.label"
-      :label-style="props.labelStyle"
-      :label-show-bg="props.labelShowBg"
-      :label-bg-style="props.labelBgStyle"
-      :label-bg-padding="props.labelBgPadding"
-      :label-bg-border-radius="props.labelBgBorderRadius"
-    />
-  </slot>
 </template>