alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(edges): destruct bounding box

Browse Source
This commit is contained in:
bcakmakoglu
2022-05-27 23:36:01 +02:00
committed by Braks
parent d519eba430
commit 567b55b8e4
1 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/vue-flow/src/components/Edges/EdgeText.vue
+7 -6
View File
@@ -13,10 +13,11 @@ const {
labelBgBorderRadius = 2, labelBgBorderRadius = 2,
} = defineProps<EdgeTextProps>() } = defineProps<EdgeTextProps>()
const el = templateRef<SVGTextElement>('el', null) const edgeRef = templateRef<SVGTextElement>('el', null)
const box = $(useElementBounding(el))
const transform = computed(() => `translate(${x - box.width / 2} ${y - box.height / 2})`) const { width, height } = $(useElementBounding(edgeRef))
const transform = computed(() => `translate(${x - width / 2} ${y - height / 2})`)
</script> </script>
<script lang="ts"> <script lang="ts">
@@ -30,15 +31,15 @@ export default {
<rect <rect
v-if="labelShowBg" v-if="labelShowBg"
class="vue-flow__edge-textbg" class="vue-flow__edge-textbg"
:width="`${box.width + 2 * labelBgPadding[0]}px`" :width="`${width + 2 * labelBgPadding[0]}px`"
:height="`${box.height + 2 * labelBgPadding[1]}px`" :height="`${height + 2 * labelBgPadding[1]}px`"
:x="-labelBgPadding[0]" :x="-labelBgPadding[0]"
:y="-labelBgPadding[1]" :y="-labelBgPadding[1]"
:style="labelBgStyle" :style="labelBgStyle"
:rx="labelBgBorderRadius" :rx="labelBgBorderRadius"
:ry="labelBgBorderRadius" :ry="labelBgBorderRadius"
/> />
<text v-bind="$attrs" ref="el" class="vue-flow__edge-text" :y="box.height / 2" dy="0.3em" :style="labelStyle"> <text v-bind="$attrs" ref="el" class="vue-flow__edge-text" :y="height / 2" dy="0.3em" :style="labelStyle">
<slot> <slot>
<component :is="label" v-if="typeof label !== 'string' && typeof label" /> <component :is="label" v-if="typeof label !== 'string' && typeof label" />
<template v-else v-html="label"> <template v-else v-html="label">