From 5359e3a26a93a0a458981358eb921c5b4b205923 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 11 Dec 2021 12:16:52 +0100
Subject: [PATCH] refactor(edges): use plugin to import prop interface

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 src/components/Edges/BezierEdge.vue     | 44 +++-------------------
 src/components/Edges/SmoothStepEdge.vue | 50 ++++---------------------
 src/components/Edges/StepEdge.vue       | 37 +++---------------
 src/components/Edges/StraightEdge.vue   | 49 ++++--------------------
 4 files changed, 26 insertions(+), 154 deletions(-)

diff --git a/src/components/Edges/BezierEdge.vue b/src/components/Edges/BezierEdge.vue
index 29f4c585..1bb2ace4 100644
--- a/src/components/Edges/BezierEdge.vue
+++ b/src/components/Edges/BezierEdge.vue
@@ -1,37 +1,14 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import { ArrowHeadType, EdgeProps, Position } from '../../types'
+import { Position } from '../../types/flow'
+import type { EdgeProps } from '../../types/edge'
 import { getCenter, getMarkerEnd, getBezierPath } from './utils'
 import EdgeText from './EdgeText.vue'
 
-interface BezierEdgeProps extends EdgeProps {
-  id: string
-  source: string
-  target: string
-  sourceX: number
-  sourceY: number
-  targetX: number
-  targetY: number
-  selected?: boolean
-  animated?: boolean
-  sourcePosition: Position
-  targetPosition: Position
-  label?: string
-  labelStyle?: CSSProperties
-  labelShowBg?: boolean
-  labelBgStyle?: CSSProperties
-  labelBgPadding?: [number, number]
-  labelBgBorderRadius?: number
-  arrowHeadType?: ArrowHeadType
-  markerEndId?: string
-  sourceHandleId?: string
-  targetHandleId?: string
-}
-
-const props = withDefaults(defineProps<BezierEdgeProps>(), {
+const props = withDefaults(defineProps<EdgeProps>(), {
   selected: false,
-  sourcePosition: Position.Bottom,
-  targetPosition: Position.Top,
+  sourcePosition: 'bottom' as Position,
+  targetPosition: 'top' as Position,
   labelStyle: () => ({}),
   labelShowBg: true,
   labelBgStyle: () => ({}),
@@ -62,16 +39,7 @@ export default {
 </script>
 <template>
   <path class="vue-flow__edge-path" :style="attrs.style" :d="path" :marker-end="markerEnd" />
-  <slot
-    :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 :x="centered[0]" :y="centered[1]" v-bind="props">
     <EdgeText
       v-if="props.label"
       :x="centered[0]"
diff --git a/src/components/Edges/SmoothStepEdge.vue b/src/components/Edges/SmoothStepEdge.vue
index 2c30529b..6ab3b76e 100644
--- a/src/components/Edges/SmoothStepEdge.vue
+++ b/src/components/Edges/SmoothStepEdge.vue
@@ -1,38 +1,13 @@
 <script lang="ts" setup>
-import { CSSProperties } from 'vue'
-import { ArrowHeadType, EdgeProps, EdgeTextProps, Position } from '../../types'
-import EdgeText from './EdgeText.vue'
+import { Position } from '../../types'
+import type { SmoothStepEdgeProps } from '../../types/edge'
 import { getCenter, getMarkerEnd, getSmoothStepPath } from './utils'
-
-interface SmoothStepEdgeProps extends EdgeProps {
-  id: string
-  source: string
-  target: string
-  sourceX: number
-  sourceY: number
-  targetX: number
-  targetY: number
-  selected?: boolean
-  animated?: boolean
-  sourcePosition: Position
-  targetPosition: Position
-  label?: string
-  labelStyle?: CSSProperties
-  labelShowBg?: boolean
-  labelBgStyle?: CSSProperties
-  labelBgPadding?: [number, number]
-  labelBgBorderRadius?: number
-  arrowHeadType?: ArrowHeadType
-  markerEndId?: string
-  borderRadius?: number
-  sourceHandleId?: string
-  targetHandleId?: string
-}
+import EdgeText from './EdgeText.vue'
 
 const props = withDefaults(defineProps<SmoothStepEdgeProps>(), {
   selected: false,
-  sourcePosition: Position.Bottom,
-  targetPosition: Position.Top,
+  sourcePosition: 'bottom' as Position,
+  targetPosition: 'top' as Position,
   label: '',
   labelStyle: () => ({}),
   labelShowBg: true,
@@ -54,8 +29,6 @@ const path = computed(() => {
 })
 
 const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
-
-const attrs = useAttrs() as Record<'style', CSSProperties>
 </script>
 <script lang="ts">
 export default {
@@ -64,17 +37,8 @@ export default {
 }
 </script>
 <template>
-  <path class="vue-flow__edge-path" :style="attrs.style" :d="path" :marker-end="markerEnd" />
-  <slot
-    :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"
-  >
+  <path class="vue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
+  <slot :x="centered[0]" :y="centered[1]" v-bind="props">
     <EdgeText
       v-if="props.label"
       :x="centered[0]"
diff --git a/src/components/Edges/StepEdge.vue b/src/components/Edges/StepEdge.vue
index de19dfa6..452b3973 100644
--- a/src/components/Edges/StepEdge.vue
+++ b/src/components/Edges/StepEdge.vue
@@ -1,42 +1,17 @@
 <script lang="ts" setup>
-import { CSSProperties } from 'vue'
-import { ArrowHeadType, EdgeProps, Position } from '../../types'
+import { Position } from '../../types'
+import type { EdgeProps } from '../../types/edge'
 import SmoothStepEdge from './SmoothStepEdge.vue'
 
-interface StepEdgeProps extends EdgeProps {
-  id: string
-  source: string
-  target: string
-  sourceX: number
-  sourceY: number
-  targetX: number
-  targetY: number
-  selected?: boolean
-  animated?: boolean
-  sourcePosition: Position
-  targetPosition: Position
-  label?: string
-  labelStyle?: CSSProperties
-  labelShowBg?: boolean
-  labelBgStyle?: CSSProperties
-  labelBgPadding?: [number, number]
-  labelBgBorderRadius?: number
-  arrowHeadType?: ArrowHeadType
-  markerEndId?: string
-  sourceHandleId?: string
-  targetHandleId?: string
-}
-
-const props = withDefaults(defineProps<StepEdgeProps>(), {
+const props = withDefaults(defineProps<EdgeProps>(), {
   selected: false,
-  sourcePosition: Position.Bottom,
-  targetPosition: Position.Top,
+  sourcePosition: 'bottom' as Position,
+  targetPosition: 'top' as Position,
   label: '',
   labelStyle: () => ({}),
   labelShowBg: true,
   labelBgStyle: () => ({}),
 })
-const attrs = useAttrs() as Record<'style', CSSProperties>
 </script>
 <script lang="ts">
 export default {
@@ -44,7 +19,7 @@ export default {
 }
 </script>
 <template>
-  <SmoothStepEdge v-bind="{ ...props, ...attrs }" :border-radius="0">
+  <SmoothStepEdge v-bind="props" :border-radius="0">
     <slot />
   </SmoothStepEdge>
 </template>
diff --git a/src/components/Edges/StraightEdge.vue b/src/components/Edges/StraightEdge.vue
index c13748ea..80eb8ba1 100644
--- a/src/components/Edges/StraightEdge.vue
+++ b/src/components/Edges/StraightEdge.vue
@@ -1,37 +1,13 @@
 <script lang="ts" setup>
-import { CSSProperties } from 'vue'
-import { ArrowHeadType, EdgeProps, Position } from '../../types'
+import { Position } from '../../types'
+import type { EdgeProps } from '../../types/edge'
 import EdgeText from './EdgeText.vue'
 import { getMarkerEnd, getBezierPath } from './utils'
 
-interface StraightEdgeProps extends EdgeProps {
-  id: string
-  source: string
-  target: string
-  sourceX: number
-  sourceY: number
-  targetX: number
-  targetY: number
-  selected?: boolean
-  animated?: boolean
-  sourcePosition: Position
-  targetPosition: Position
-  label?: string
-  labelStyle?: CSSProperties
-  labelShowBg?: boolean
-  labelBgStyle?: CSSProperties
-  labelBgPadding?: [number, number]
-  labelBgBorderRadius?: number
-  arrowHeadType?: ArrowHeadType
-  markerEndId?: string
-  sourceHandleId?: string
-  targetHandleId?: string
-}
-
-const props = withDefaults(defineProps<StraightEdgeProps>(), {
+const props = withDefaults(defineProps<EdgeProps>(), {
   selected: false,
-  sourcePosition: Position.Bottom,
-  targetPosition: Position.Top,
+  sourcePosition: 'bottom' as Position,
+  targetPosition: 'top' as Position,
   label: '',
   labelStyle: () => ({}),
   labelShowBg: true,
@@ -56,8 +32,6 @@ const path = computed(() => {
 })
 
 const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
-
-const attrs = useAttrs() as Record<'style', CSSProperties>
 </script>
 <script lang="ts">
 export default {
@@ -66,17 +40,8 @@ export default {
 }
 </script>
 <template>
-  <path :style="attrs.style" class="vue-flow__edge-path" :d="path" :marker-end="markerEnd" />
-  <slot
-    :x="centerX"
-    :y="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"
-  >
+  <path class="vue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
+  <slot :x="centerX" :y="centerY" v-bind="props">
     <EdgeText
       v-if="props.label"
       :x="centerX"