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-04-04 21:42:48 +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
examples/src/Edges/CustomEdge.vue
+42 -15
View File
@@ -1,11 +1,7 @@
<script lang="ts" setup> <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> { interface CustomEdgeProps<T = any> extends EdgeProps<T> {
source: string
target: string
sourceHandleId?: string
targetHandleId?: string
id: string id: string
sourceX: number sourceX: number
sourceY: number sourceY: number
@@ -13,11 +9,20 @@ interface CustomEdgeProps<T = { text: string }> extends EdgeProps<T> {
targetY: number targetY: number
sourcePosition: Position sourcePosition: Position
targetPosition: Position targetPosition: Position
markerEnd?: string
data?: T data?: T
markerEnd: string
} }
const props = defineProps<CustomEdgeProps>() 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(() => const edgePath = computed(() =>
getBezierPath({ getBezierPath({
sourceX: props.sourceX, sourceX: props.sourceX,
@@ -28,8 +33,14 @@ const edgePath = computed(() =>
targetPosition: props.targetPosition, targetPosition: props.targetPosition,
}), }),
) )
const center = computed(() =>
const markerEnd = computed(() => getMarkerId(props.markerEnd)) getEdgeCenter({
sourceX: props.sourceX,
sourceY: props.sourceY,
targetX: props.targetX,
targetY: props.targetY,
}),
)
</script> </script>
<script lang="ts"> <script lang="ts">
export default { export default {
@@ -37,10 +48,26 @@ export default {
} }
</script> </script>
<template> <template>
<path :id="props.id" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" /> <path :id="props.id" :style="props.style" class="vue-flow__edge-path" :d="edgePath" :marker-end="props.markerEnd" />
<text> <foreignObject
<textPath :href="`#${props.id}`" :style="{ fontSize: '12px' }" startOffset="50%" text-anchor="middle"> :width="foreignObjectSize"
{{ props.data?.text }} :height="foreignObjectSize"
</textPath> :x="center[0] - foreignObjectSize / 2"
</text> :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> </template>
<style>
.edgebutton {
border-radius: 999px;
cursor: pointer;
}
.edgebutton:hover {
box-shadow: 0 0 0 2px pink, 0 0 0 4px #f05f75;
}
</style>