From 4c618e96598e443f9a29f1d7c5bbba224302eb92 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 4 Nov 2022 23:10:00 +0100
Subject: [PATCH] chore: update changeset

---
 .changeset/five-readers-teach.md | 68 +++++++++++++++++++++++++++++++-
 1 file changed, 67 insertions(+), 1 deletion(-)

diff --git a/.changeset/five-readers-teach.md b/.changeset/five-readers-teach.md
index 37886f44..0cf6adce 100644
--- a/.changeset/five-readers-teach.md
+++ b/.changeset/five-readers-teach.md
@@ -2,4 +2,70 @@
 '@vue-flow/core': patch
 ---
 
-Teleport edge labels into separate svg container (fixes edges overlapping edge labels)
+Add `EdgeLabelRenderer` component export
+
+### Usage
+
+- You can use the `EdgeLabelRenderer` component to render the label of an edge outside the SVG context of edges.
+- The `EdgeLabelRenderer` component is a component that handles teleporting your edge label into a HTML context
+- This is useful if you want to use HTML elements in your edge label, like buttons
+
+```vue
+<script lang="ts" setup>
+import type { EdgeProps, Position } from '@vue-flow/core'
+import { EdgeLabelRenderer, getBezierPath, useVueFlow } from '@vue-flow/core'
+import type { CSSProperties } from 'vue'
+
+interface CustomEdgeProps<T = any> extends EdgeProps<T> {
+  id: string
+  sourceX: number
+  sourceY: number
+  targetX: number
+  targetY: number
+  sourcePosition: Position
+  targetPosition: Position
+  data: T
+  markerEnd: string
+  style: CSSProperties
+}
+
+const props = defineProps<CustomEdgeProps>()
+
+const { removeEdges } = useVueFlow()
+
+const path = $computed(() => getBezierPath(props))
+</script>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<template>
+  <path :id="id" :style="style" class="vue-flow__edge-path" :d="path[0]" :marker-end="markerEnd" />
+
+  <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>
+
+<style>
+.edgebutton {
+  border-radius: 999px;
+  cursor: pointer;
+}
+.edgebutton:hover {
+  box-shadow: 0 0 0 2px pink, 0 0 0 4px #f05f75;
+}
+</style>
+```