From 4f42fd0e6ba44d05ea79df063d97c3fa174d0ec1 Mon Sep 17 00:00:00 2001
From: bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 8 Mar 2022 15:35:24 +0100
Subject: [PATCH] fix(edges): edge text not aligning to center

* use scaling to properly align edge labels and bg width
* remove getMarkerEnd util, replaced by getMarkerId or just using the actual prop markerEnd/markerStart

Signed-off-by: bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com>
---
 src/components/Edges/EdgeText.vue | 10 ++++++----
 src/components/Edges/utils.ts     |  7 +------
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/components/Edges/EdgeText.vue b/src/components/Edges/EdgeText.vue
index abe476e0..79ec44c5 100644
--- a/src/components/Edges/EdgeText.vue
+++ b/src/components/Edges/EdgeText.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { EdgeTextProps } from '../../types/components'
+import { useVueFlow } from '../../composables'
 
 const props = withDefaults(defineProps<EdgeTextProps>(), {
   labelStyle: () => ({}),
@@ -9,9 +10,10 @@ const props = withDefaults(defineProps<EdgeTextProps>(), {
   labelBgBorderRadius: 2,
 })
 
+const { transform: paneTransform } = useVueFlow()
 const edgeRef = templateRef<SVGTextElement>('edge-text', null)
-const { width, height, x, y } = useElementBounding(edgeRef)
-const transform = computed(() => `translate(${props.x - width.value / 2 || 0} ${props.y - height.value / 2 || 0})`)
+const { width, height } = useElementBounding(edgeRef)
+const transform = computed(() => `translate(${props.x - width.value / paneTransform.value[2] / 2} ${props.y - height.value / 2})`)
 </script>
 <script lang="ts">
 export default {
@@ -23,7 +25,7 @@ export default {
     <rect
       v-if="props.labelShowBg"
       class="vue-flow__edge-textbg"
-      :width="width + 2 * props.labelBgPadding[0] + 'px'"
+      :width="width / paneTransform[2] + 2 * props.labelBgPadding[0] + 'px'"
       :height="height + 2 * props.labelBgPadding[1] + 'px'"
       :x="-props.labelBgPadding[0]"
       :y="-props.labelBgPadding[1]"
@@ -36,7 +38,7 @@ export default {
         <component
           :is="props.label?.component"
           v-if="typeof props.label !== 'string' && typeof props.label?.component !== 'undefined'"
-          v-bind="{ ...props, ...props.label?.props, width, height, x, y }"
+          v-bind="{ ...props, ...props.label?.props, width, height }"
         />
         <template v-else v-html="props.label">
           {{ props.label }}
diff --git a/src/components/Edges/utils.ts b/src/components/Edges/utils.ts
index b9a5da62..6ec2acef 100644
--- a/src/components/Edges/utils.ts
+++ b/src/components/Edges/utils.ts
@@ -1,9 +1,4 @@
-import { GetBezierPathParams, GetCenterParams, GetSmoothStepPathParams, MarkerType, Position } from '~/types'
-
-export const getMarkerEnd = (markerType?: MarkerType, markerEndId?: string): string => {
-  if (typeof markerEndId !== 'undefined' && markerEndId) return `url(#${markerEndId})`
-  return typeof markerType !== 'undefined' ? `url(#vue-flow__${markerType})` : 'none'
-}
+import { GetBezierPathParams, GetCenterParams, GetSmoothStepPathParams, Position } from '~/types'
 
 const LeftOrRight = [Position.Left, Position.Right]