From 8c0acd624d776812d7e031901d81b15d4e442a80 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 6 Nov 2022 10:13:33 +0100
Subject: [PATCH] docs: use `EdgeLabelRenderer` in edges example

---
 docs/components/examples/edges/CustomEdge.vue | 50 +++++++------------
 .../components/examples/edges/CustomEdge2.vue | 25 +++-------
 2 files changed, 24 insertions(+), 51 deletions(-)
diff --git a/docs/components/examples/edges/CustomEdge.vue b/docs/components/examples/edges/CustomEdge.vue
index 9c5bebc8..cdf1942a 100644
--- a/docs/components/examples/edges/CustomEdge.vue
+++ b/docs/components/examples/edges/CustomEdge.vue
@@ -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>
diff --git a/docs/components/examples/edges/CustomEdge2.vue b/docs/components/examples/edges/CustomEdge2.vue
index 73bb60d5..c9948f77 100644
--- a/docs/components/examples/edges/CustomEdge2.vue
+++ b/docs/components/examples/edges/CustomEdge2.vue
@@ -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>
