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 11:03:08 +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
docs/components/examples/edges/CustomEdge.vue
+17 -33
View File
@@ -1,5 +1,5 @@
<script setup> <script setup>
import { getBezierPath, useVueFlow } from '@vue-flow/core' import { EdgeLabelRenderer, getBezierPath, useVueFlow } from '@vue-flow/core'
import { computed } from 'vue' import { computed } from 'vue'
const props = defineProps({ const props = defineProps({
@@ -47,23 +47,7 @@ const props = defineProps({
const { removeEdges } = useVueFlow() const { removeEdges } = useVueFlow()
const foreignObjectSize = 40 const path = computed(() => getBezierPath(props))
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,
}),
)
</script> </script>
<script> <script>
@@ -73,19 +57,19 @@ export default {
</script> </script>
<template> <template>
<path :id="id" :style="style" class="vue-flow__edge-path" :d="edgePath[0]" :marker-end="markerEnd" /> <path :id="id" :style="style" class="vue-flow__edge-path" :d="path[0]" :marker-end="markerEnd" />
<foreignObject
:width="foreignObjectSize" <!-- Use the `EdgeLabelRenderer` to escape the SVG world of edges and render your own custom label in a `<div>` ctx -->
:height="foreignObjectSize" <EdgeLabelRenderer>
:x="edgePath[1] - foreignObjectSize / 2" <div
:y="edgePath[2] - foreignObjectSize / 2" :style="{
class="edgebutton-foreignobject" pointerEvents: 'all',
requiredExtensions="http://www.w3.org/1999/xhtml" position: 'absolute',
> transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
<body style="display: flex; align-items: center; justify-content: center"> }"
<div> class="nodrag nopan"
<button ref="btn" class="edgebutton" @click="(event) => onClick(event, id)">×</button> >
</div> <button class="edgebutton" @click="removeEdges([id])">×</button>
</body> </div>
</foreignObject> </EdgeLabelRenderer>
</template> </template>
docs/components/examples/edges/CustomEdge2.vue
+7 -18
View File
@@ -53,18 +53,7 @@ const props = defineProps({
}, },
}) })
const edgePath = computed(() => const path = computed(() => getBezierPath(props))
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)
</script> </script>
<script> <script>
@@ -74,16 +63,16 @@ export default {
</script> </script>
<template> <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 <EdgeText
:x="edgePath[1]" :x="path[1]"
:y="edgePath[2]" :y="path[2]"
:label="props.data?.text" :label="data.text"
:label-style="{ fill: 'white' }" :label-style="{ fill: 'white' }"
:label-show-bg="true" :label-show-bg="true"
:label-bg-style="{ fill: '#10b981' }" :label-bg-style="{ fill: 'red' }"
:label-bg-padding="[2, 4]" :label-bg-padding="[2, 4]"
:label-bg-border-radius="2" :label-bg-border-radius="2"
@click="onClick"
/> />
</template> </template>