From d6b41afefda1b0280b9b702a74d5ea1deaeb7334 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 31 Mar 2022 17:54:47 +0200
Subject: [PATCH] update(examples): Add button edge example

---
 examples/src/Edges/CustomEdge.vue | 57 +++++++++++++++++++++++--------
 1 file changed, 42 insertions(+), 15 deletions(-)
diff --git a/examples/src/Edges/CustomEdge.vue b/examples/src/Edges/CustomEdge.vue
index f86f9993..3b3baebb 100644
--- a/examples/src/Edges/CustomEdge.vue
+++ b/examples/src/Edges/CustomEdge.vue
@@ -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>
