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

docs: use EdgeLabelRenderer in edges example

Browse Source
This commit is contained in:
braks
2022-11-06 10:13:33 +01:00
committed by Braks
parent 8e3864dc09
commit 8c0acd624d
2 changed files with 24 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
docs/components/examples/edges/CustomEdge.vue
View File

@@ -1,5 +1,5 @@
<script setup>
import { getBezierPath, useVueFlow } from '@vue-flow/core'
import { EdgeLabelRenderer, getBezierPath, useVueFlow } from '@vue-flow/core'
import { computed } from 'vue'
const props = defineProps({
@@ -47,23 +47,7 @@ const props = defineProps({
const { removeEdges } = useVueFlow()
const foreignObjectSize = 40
const onClick = (evt, id) => {
removeEdges([id])
evt.stopPropagation()
}
const edgePath = computed(() =>
getBezierPath({
sourceX: props.sourceX,
sourceY: props.sourceY,
sourcePosition: props.sourcePosition,
targetX: props.targetX,
targetY: props.targetY,
targetPosition: props.targetPosition,
}),
)
const path = computed(() => getBezierPath(props))
</script>
<script>
@@ -73,19 +57,19 @@ export default {
</script>
<template>
<path :id="id" :style="style" class="vue-flow__edge-path" :d="edgePath[0]" :marker-end="markerEnd" />
<foreignObject
:width="foreignObjectSize"
:height="foreignObjectSize"
:x="edgePath[1] - foreignObjectSize / 2"
:y="edgePath[2] - foreignObjectSize / 2"
class="edgebutton-foreignobject"
requiredExtensions="http://www.w3.org/1999/xhtml"
>
<body style="display: flex; align-items: center; justify-content: center">
<div>
<button ref="btn" class="edgebutton" @click="(event) => onClick(event, id)">×</button>
</div>
</body>
</foreignObject>
<path :id="id" :style="style" class="vue-flow__edge-path" :d="path[0]" :marker-end="markerEnd" />
<!-- Use the `EdgeLabelRenderer` to escape the SVG world of edges and render your own custom label in a `<div>` ctx -->
<EdgeLabelRenderer>
<div
:style="{
pointerEvents: 'all',
position: 'absolute',
transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
}"
class="nodrag nopan"
>
<button class="edgebutton" @click="removeEdges([id])">×</button>
</div>
</EdgeLabelRenderer>
</template>

25
docs/components/examples/edges/CustomEdge2.vue
View File

@@ -53,18 +53,7 @@ const props = defineProps({
},
})
const edgePath = computed(() =>
getBezierPath({
sourceX: props.sourceX,
sourceY: props.sourceY,
sourcePosition: props.sourcePosition,
targetX: props.targetX,
targetY: props.targetY,
targetPosition: props.targetPosition,
}),
)
const onClick = () => console.log(props.data)
const path = computed(() => getBezierPath(props))
</script>
<script>
@@ -74,16 +63,16 @@ export default {
</script>
<template>
<path :id="props.id" class="vue-flow__edge-path" :d="edgePath[0]" :marker-end="props.markerEnd" />
<path :id="id" class="vue-flow__edge-path" :d="path[0]" :marker-end="markerEnd" />
<EdgeText
:x="edgePath[1]"
:y="edgePath[2]"
:label="props.data?.text"
:x="path[1]"
:y="path[2]"
:label="data.text"
:label-style="{ fill: 'white' }"
:label-show-bg="true"
:label-bg-style="{ fill: '#10b981' }"
:label-bg-style="{ fill: 'red' }"
:label-bg-padding="[2, 4]"
:label-bg-border-radius="2"
@click="onClick"
/>
</template>