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

fix(edges): edge text not aligning to center

Browse Source 
* 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>
This commit is contained in:
bcakmakoglu
2022-03-08 15:35:24 +01:00
parent cd2b89828d
commit 4f42fd0e6b
2 changed files with 7 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Edges/EdgeText.vue
+6 -4
View File
@@ -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 }}
src/components/Edges/utils.ts
+1 -6
View File
@@ -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]