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

fix(edges): edge text height not centered

Browse Source 
Signed-off-by: bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
bcakmakoglu
2022-03-08 15:40:17 +01:00
parent 743b0bd004
commit b7c19547f2
1 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Edges/EdgeText.vue
+5 -3
View File
@@ -13,7 +13,9 @@ const props = withDefaults(defineProps<EdgeTextProps>(), {
const { transform: paneTransform } = useVueFlow() const { transform: paneTransform } = useVueFlow()
const edgeRef = templateRef<SVGTextElement>('edge-text', null) const edgeRef = templateRef<SVGTextElement>('edge-text', null)
const { width, height } = useElementBounding(edgeRef) const { width, height } = useElementBounding(edgeRef)
const transform = computed(() => `translate(${props.x - width.value / paneTransform.value[2] / 2} ${props.y - height.value / 2})`) const transform = computed(
() => `translate(${props.x - width.value / paneTransform.value[2] / 2} ${props.y - height.value / paneTransform.value[2] / 2})`,
)
</script> </script>
<script lang="ts"> <script lang="ts">
export default { export default {
@@ -26,14 +28,14 @@ export default {
v-if="props.labelShowBg" v-if="props.labelShowBg"
class="vue-flow__edge-textbg" class="vue-flow__edge-textbg"
:width="width / paneTransform[2] + 2 * props.labelBgPadding[0] + 'px'" :width="width / paneTransform[2] + 2 * props.labelBgPadding[0] + 'px'"
:height="height + 2 * props.labelBgPadding[1] + 'px'" :height="height / paneTransform[2] + 2 * props.labelBgPadding[1] + 'px'"
:x="-props.labelBgPadding[0]" :x="-props.labelBgPadding[0]"
:y="-props.labelBgPadding[1]" :y="-props.labelBgPadding[1]"
:style="props.labelBgStyle" :style="props.labelBgStyle"
:rx="props.labelBgBorderRadius" :rx="props.labelBgBorderRadius"
:ry="props.labelBgBorderRadius" :ry="props.labelBgBorderRadius"
/> />
<text ref="edge-text" class="vue-flow__edge-text" :y="height / 2" dy="0.3em" :style="props.labelStyle"> <text ref="edge-text" class="vue-flow__edge-text" :y="height / paneTransform[2] / 2" dy="0.3em" :style="props.labelStyle">
<slot v-bind="props"> <slot v-bind="props">
<component <component
:is="props.label?.component" :is="props.label?.component"