From ba24f3ca6243f857c34dc4ba1de89adb86dce4aa Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 21 Nov 2021 13:33:59 +0100
Subject: [PATCH] update(edges): useAttrs on edges to use style

* remove class and style props, pass them as attrs

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 examples/Edges/CustomEdge.vue           |  5 +++++
 examples/Edges/CustomEdge2.vue          |  9 ++++++++-
 examples/Edges/EdgesExample.vue         |  2 +-
 src/components/Edges/BezierEdge.vue     | 16 ++++++++--------
 src/components/Edges/SmoothStepEdge.vue | 15 ++++++++-------
 src/components/Edges/StepEdge.vue       | 14 +++++++-------
 src/components/Edges/StraightEdge.vue   | 15 ++++++++-------
 7 files changed, 45 insertions(+), 31 deletions(-)

diff --git a/examples/Edges/CustomEdge.vue b/examples/Edges/CustomEdge.vue
index c43f9130..93dd561c 100644
--- a/examples/Edges/CustomEdge.vue
+++ b/examples/Edges/CustomEdge.vue
@@ -31,6 +31,11 @@ const edgePath = computed(() =>
 )
 const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
 </script>
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
 <template>
   <path :id="props.id" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
   <text>
diff --git a/examples/Edges/CustomEdge2.vue b/examples/Edges/CustomEdge2.vue
index 996ba6c0..c6c30af7 100644
--- a/examples/Edges/CustomEdge2.vue
+++ b/examples/Edges/CustomEdge2.vue
@@ -16,7 +16,9 @@ interface CustomEdgeProps extends EdgeProps {
   targetPosition: Position
   arrowHeadType?: ArrowHeadType
   markerEndId?: string
-  data?: any
+  data?: {
+    text: string
+  }
 }
 
 const props = defineProps<CustomEdgeProps>()
@@ -41,6 +43,11 @@ const center = computed(() =>
   }),
 )
 </script>
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
 <template>
   <path :id="props.id" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
   <EdgeText
diff --git a/examples/Edges/EdgesExample.vue b/examples/Edges/EdgesExample.vue
index ce232768..e24106d7 100644
--- a/examples/Edges/EdgesExample.vue
+++ b/examples/Edges/EdgesExample.vue
@@ -40,7 +40,7 @@ const initialElements: Elements = [
     source: '5',
     target: '6',
     label: {
-      component: CustomLabel,
+      component: markRaw(CustomLabel),
       props: {
         text: 'custom label text',
       },
diff --git a/src/components/Edges/BezierEdge.vue b/src/components/Edges/BezierEdge.vue
index f47b9c86..43288977 100644
--- a/src/components/Edges/BezierEdge.vue
+++ b/src/components/Edges/BezierEdge.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { CSSProperties } from 'vue'
+import { Component, CSSProperties, DefineComponent } from 'vue'
 import { ArrowHeadType, EdgeProps, ElementId, Position } from '../../types'
 import { getCenter, getMarkerEnd, getBezierPath } from './utils'
 import EdgeText from './EdgeText.vue'
@@ -19,18 +19,16 @@ interface BezierEdgeProps extends EdgeProps {
   label?:
     | string
     | {
-        component: any
-        props?: any
+        component: Component | DefineComponent
+        props?: Record<string, any>
       }
-  labelStyle?: any
+  labelStyle?: CSSProperties
   labelShowBg?: boolean
-  labelBgStyle?: any
+  labelBgStyle?: CSSProperties
   labelBgPadding?: [number, number]
   labelBgBorderRadius?: number
-  style?: CSSProperties
   arrowHeadType?: ArrowHeadType
   markerEndId?: string
-  data?: any
   sourceHandleId?: ElementId
   targetHandleId?: ElementId
 }
@@ -58,6 +56,8 @@ const path = computed(() => {
 })
 
 const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
+
+const attrs = useAttrs() as Record<'style', CSSProperties>
 </script>
 <script lang="ts">
 export default {
@@ -65,7 +65,7 @@ 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="attrs.style" :d="path" :marker-end="markerEnd" />
   <slot
     :x="centered[0]"
     :y="centered[1]"
diff --git a/src/components/Edges/SmoothStepEdge.vue b/src/components/Edges/SmoothStepEdge.vue
index 42cde64d..057ce2de 100644
--- a/src/components/Edges/SmoothStepEdge.vue
+++ b/src/components/Edges/SmoothStepEdge.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { Component, CSSProperties, DefineComponent } from 'vue'
 import { ArrowHeadType, EdgeProps, ElementId, Position } from '../../types'
 import EdgeText from './EdgeText.vue'
 import { getCenter, getMarkerEnd, getSmoothStepPath } from './utils'
@@ -18,18 +19,16 @@ interface SmoothStepEdgeProps extends EdgeProps {
   label?:
     | string
     | {
-        component: any
-        props?: any
+        component: Component | DefineComponent
+        props?: Record<string, any>
       }
-  labelStyle?: any
+  labelStyle?: CSSProperties
   labelShowBg?: boolean
-  labelBgStyle?: any
+  labelBgStyle?: CSSProperties
   labelBgPadding?: [number, number]
   labelBgBorderRadius?: number
-  style?: any
   arrowHeadType?: ArrowHeadType
   markerEndId?: string
-  data?: any
   borderRadius?: number
   sourceHandleId?: ElementId | null
   targetHandleId?: ElementId | null
@@ -60,6 +59,8 @@ const path = computed(() => {
 })
 
 const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
+
+const attrs = useAttrs() as Record<'style', CSSProperties>
 </script>
 <script lang="ts">
 export default {
@@ -67,7 +68,7 @@ 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="attrs.style" :d="path" :marker-end="markerEnd" />
   <slot
     :x="centered[0]"
     :y="centered[1]"
diff --git a/src/components/Edges/StepEdge.vue b/src/components/Edges/StepEdge.vue
index 51cb8f8d..d01fb66e 100644
--- a/src/components/Edges/StepEdge.vue
+++ b/src/components/Edges/StepEdge.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { Component, CSSProperties, DefineComponent } from 'vue'
 import { ArrowHeadType, EdgeProps, ElementId, Position } from '../../types'
 import SmoothStepEdge from './SmoothStepEdge.vue'
 
@@ -17,18 +18,16 @@ export interface StepEdgeProps extends EdgeProps {
   label?:
     | string
     | {
-        component: any
-        props?: any
+        component: Component | DefineComponent
+        props?: Record<string, any>
       }
-  labelStyle?: any
+  labelStyle?: CSSProperties
   labelShowBg?: boolean
-  labelBgStyle?: any
+  labelBgStyle?: CSSProperties
   labelBgPadding?: [number, number]
   labelBgBorderRadius?: number
-  style?: any
   arrowHeadType?: ArrowHeadType
   markerEndId?: string
-  data?: any
   sourceHandleId?: ElementId | null
   targetHandleId?: ElementId | null
 }
@@ -42,9 +41,10 @@ const props = withDefaults(defineProps<StepEdgeProps>(), {
   labelShowBg: true,
   labelBgStyle: () => ({}),
 })
+const attrs = useAttrs() as Record<'style', CSSProperties>
 </script>
 <template>
-  <SmoothStepEdge v-bind="props" :border-radius="0">
+  <SmoothStepEdge v-bind="{ ...props, ...attrs }" :border-radius="0">
     <slot />
   </SmoothStepEdge>
 </template>
diff --git a/src/components/Edges/StraightEdge.vue b/src/components/Edges/StraightEdge.vue
index b37de6cd..418c03e4 100644
--- a/src/components/Edges/StraightEdge.vue
+++ b/src/components/Edges/StraightEdge.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { Component, CSSProperties, DefineComponent } from 'vue'
 import { ArrowHeadType, EdgeProps, ElementId, Position } from '../../types'
 import EdgeText from './EdgeText.vue'
 import { getMarkerEnd, getBezierPath } from './utils'
@@ -18,18 +19,16 @@ interface StraightEdgeProps extends EdgeProps {
   label?:
     | string
     | {
-        component: any
-        props?: any
+        component: Component | DefineComponent
+        props?: Record<string, any>
       }
-  labelStyle?: any
+  labelStyle?: CSSProperties
   labelShowBg?: boolean
-  labelBgStyle?: any
+  labelBgStyle?: CSSProperties
   labelBgPadding?: [number, number]
   labelBgBorderRadius?: number
-  style?: any
   arrowHeadType?: ArrowHeadType
   markerEndId?: string
-  data?: any
   sourceHandleId?: ElementId | null
   targetHandleId?: ElementId | null
 }
@@ -62,6 +61,8 @@ const path = computed(() => {
 })
 
 const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
+
+const attrs = useAttrs() as Record<'style', CSSProperties>
 </script>
 <script lang="ts">
 export default {
@@ -69,7 +70,7 @@ export default {
 }
 </script>
 <template>
-  <path :style="props.style" class="vue-flow__edge-path" :d="path" :marker-end="markerEnd" />
+  <path :style="attrs.style" class="vue-flow__edge-path" :d="path" :marker-end="markerEnd" />
   <slot
     :x="centerX"
     :y="centerY"