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

update(examples): Add button edge example

Browse Source
This commit is contained in:
Braks
2022-03-31 17:54:47 +02:00
parent ca74d7b470
commit d6b41afefd
1 changed files with 42 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
examples/src/Edges/CustomEdge.vue
View File

@@ -1,11 +1,7 @@
<script lang="ts" setup>
import { getBezierPath, getMarkerId, Position, EdgeProps } from '@braks/vue-flow'
import { getEdgeCenter, getBezierPath, Position, useVueFlow, EdgeProps } from '@braks/vue-flow'
interface CustomEdgeProps<T = { text: string }> extends EdgeProps<T> {
source: string
target: string
sourceHandleId?: string
targetHandleId?: string
interface CustomEdgeProps<T = any> extends EdgeProps<T> {
id: string
sourceX: number
sourceY: number
@@ -13,11 +9,20 @@ interface CustomEdgeProps<T = { text: string }> extends EdgeProps<T> {
targetY: number
sourcePosition: Position
targetPosition: Position
markerEnd?: string
data?: T
markerEnd: string
}
const props = defineProps<CustomEdgeProps>()
const { id: storeId, applyEdgeChanges, store, getEdges } = useVueFlow()
const onClick = (evt: Event, id: string) => {
applyEdgeChanges([{ type: 'remove', id }])
evt.stopPropagation()
}
const foreignObjectSize = 40
const edgePath = computed(() =>
getBezierPath({
sourceX: props.sourceX,
@@ -28,8 +33,14 @@ const edgePath = computed(() =>
targetPosition: props.targetPosition,
}),
)
const markerEnd = computed(() => getMarkerId(props.markerEnd))
const center = computed(() =>
getEdgeCenter({
sourceX: props.sourceX,
sourceY: props.sourceY,
targetX: props.targetX,
targetY: props.targetY,
}),
)
</script>
<script lang="ts">
export default {
@@ -37,10 +48,26 @@ export default {
}
</script>
<template>
<path :id="props.id" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
<text>
<textPath :href="`#${props.id}`" :style="{ fontSize: '12px' }" startOffset="50%" text-anchor="middle">
{{ props.data?.text }}
</textPath>
</text>
<path :id="props.id" :style="props.style" class="vue-flow__edge-path" :d="edgePath" :marker-end="props.markerEnd" />
<foreignObject
:width="foreignObjectSize"
:height="foreignObjectSize"
:x="center[0] - foreignObjectSize / 2"
:y="center[1] - foreignObjectSize / 2"
class="edgebutton-foreignobject"
requiredExtensions="http://www.w3.org/1999/xhtml"
>
<body>
<button class="edgebutton" @click="(event) => onClick(event, props.id)">×</button>
</body>
</foreignObject>
</template>
<style>
.edgebutton {
border-radius: 999px;
cursor: pointer;
}
.edgebutton:hover {
box-shadow: 0 0 0 2px pink, 0 0 0 4px #f05f75;
}
</style>