From a26e83b27d829fe3993ce08caa8fc5e7c1b5366c Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 4 Nov 2022 20:58:52 +0100
Subject: [PATCH] examples: use `EdgeLabelRenderer` in edges example

---
 docs/components/home/flows/RGB.vue          |  4 --
 examples/vite/src/Basic/Basic.vue           |  6 +-
 examples/vite/src/Edges/CustomEdge.vue      | 52 ++++++--------
 examples/vite/src/Edges/CustomEdge2.vue     | 37 ++++------
 examples/vite/src/Edges/CustomLabel.vue     |  4 +-
 examples/vite/src/Edges/EdgesExample.vue    | 76 ++-------------------
 examples/vite/src/Edges/initial-elements.ts | 65 ++++++++++++++++++
 examples/vite/tsconfig.json                 |  2 +-
 examples/vite/vite.config.ts                |  2 +-
 9 files changed, 110 insertions(+), 138 deletions(-)
 create mode 100644 examples/vite/src/Edges/initial-elements.ts

diff --git a/docs/components/home/flows/RGB.vue b/docs/components/home/flows/RGB.vue
index 31ea15d3..36219c8e 100644
--- a/docs/components/home/flows/RGB.vue
+++ b/docs/components/home/flows/RGB.vue
@@ -31,10 +31,6 @@ const { onPaneReady, getNode, panOnDrag } = useVueFlow({
     { id: 'e3-4', type: 'rgb-line', data: { color: 'blue' }, source: '3', target: '4', animated: true },
   ],
   zoomOnScroll: false,
-  nodeExtent: [
-    [-50, -150],
-    [500, 300],
-  ],
   preventScrolling: false,
 })
 
diff --git a/examples/vite/src/Basic/Basic.vue b/examples/vite/src/Basic/Basic.vue
index 3668ce3c..cba779d4 100644
--- a/examples/vite/src/Basic/Basic.vue
+++ b/examples/vite/src/Basic/Basic.vue
@@ -1,14 +1,14 @@
 <script lang="ts" setup>
 import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 import type { Elements } from '@vue-flow/core'
-import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { VueFlow, isNode, useVueFlow } from '~/index'
 
 const elements = ref<Elements>([
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
   { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
   { id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
   { id: '4', label: 'Node 4', position: { x: 400, y: 200 }, class: 'light' },
-  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-2', source: '1', target: '2', animated: true, label: 'foobar' },
   { id: 'e1-3', source: '1', target: '3' },
 ])
 const { onPaneReady, onNodeDragStop, onConnect, addEdges, setTransform, toObject } = useVueFlow({
@@ -40,7 +40,7 @@ const toggleclass = () => elements.value.forEach((el) => (el.class = el.class ==
 </script>
 
 <template>
-  <VueFlow v-model="elements" class="vue-flow-basic-example">
+  <VueFlow v-model="elements" connection-mode="strict" class="vue-flow-basic-example">
     <Background />
     <MiniMap />
     <Controls />
diff --git a/examples/vite/src/Edges/CustomEdge.vue b/examples/vite/src/Edges/CustomEdge.vue
index a5833f21..9e3a846e 100644
--- a/examples/vite/src/Edges/CustomEdge.vue
+++ b/examples/vite/src/Edges/CustomEdge.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { EdgeProps, Position } from '@vue-flow/core'
-import { getBezierPath, useVueFlow } 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
@@ -10,30 +11,16 @@ interface CustomEdgeProps<T = any> extends EdgeProps<T> {
   targetY: number
   sourcePosition: Position
   targetPosition: Position
-  data?: T
+  data: T
   markerEnd: string
+  style: CSSProperties
 }
 
 const props = defineProps<CustomEdgeProps>()
-const { applyEdgeChanges, getEdges } = useVueFlow()
 
-const onClick = (evt: Event, id: string) => {
-  applyEdgeChanges([{ type: 'remove', id }])
-  evt.stopPropagation()
-}
+const { removeEdges } = useVueFlow()
 
-const foreignObjectSize = 40
-
-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 lang="ts">
@@ -43,19 +30,20 @@ export default {
 </script>
 
 <template>
-  <path :id="props.id" :style="props.style" class="vue-flow__edge-path" :d="edgePath[0]" :marker-end="props.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>
-      <button class="edgebutton" @click="(event) => onClick(event, props.id)">×</button>
-    </body>
-  </foreignObject>
+  <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>
diff --git a/examples/vite/src/Edges/CustomEdge2.vue b/examples/vite/src/Edges/CustomEdge2.vue
index d87e1566..9fa0bf94 100644
--- a/examples/vite/src/Edges/CustomEdge2.vue
+++ b/examples/vite/src/Edges/CustomEdge2.vue
@@ -2,7 +2,11 @@
 import type { EdgeProps, Position } from '@vue-flow/core'
 import { EdgeText, getBezierPath, getMarkerId } from '@vue-flow/core'
 
-interface CustomEdgeProps extends EdgeProps {
+interface CustomData {
+  text: string
+}
+
+interface CustomEdgeProps<T = CustomData> extends EdgeProps<T> {
   source: string
   target: string
   sourceHandleId?: string
@@ -14,28 +18,13 @@ interface CustomEdgeProps extends EdgeProps {
   targetY: number
   sourcePosition: Position
   targetPosition: Position
-  markerEndId?: string
-  data?: {
-    text: string
-  }
+  markerEnd?: string
+  data: T
 }
 
 const props = defineProps<CustomEdgeProps>()
 
-const edgePath = computed(() =>
-  getBezierPath({
-    sourceX: props.sourceX,
-    sourceY: props.sourceY,
-    sourcePosition: props.sourcePosition,
-    targetX: props.targetX,
-    targetY: props.targetY,
-    targetPosition: props.targetPosition,
-  }),
-)
-
-const markerEnd = computed(() => getMarkerId(props.markerEnd))
-
-const onClick = () => console.log(props.data)
+const path = $computed(() => getBezierPath(props))
 </script>
 
 <script lang="ts">
@@ -45,16 +34,16 @@ export default {
 </script>
 
 <template>
-  <path :id="props.id" class="vue-flow__edge-path" :d="edgePath[0]" :marker-end="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: 'red' }"
     :label-bg-padding="[2, 4]"
     :label-bg-border-radius="2"
-    @click="onClick"
   />
 </template>
diff --git a/examples/vite/src/Edges/CustomLabel.vue b/examples/vite/src/Edges/CustomLabel.vue
index c4b38ddd..476da7f6 100644
--- a/examples/vite/src/Edges/CustomLabel.vue
+++ b/examples/vite/src/Edges/CustomLabel.vue
@@ -3,9 +3,9 @@ interface CustomLabelProps {
   label: string
 }
 
-const props = defineProps<CustomLabelProps>()
+defineProps<CustomLabelProps>()
 </script>
 
 <template>
-  <tspan dy="10" x="0">{{ props.label }}</tspan>
+  <tspan dy="10" x="0">{{ label }}</tspan>
 </template>
diff --git a/examples/vite/src/Edges/EdgesExample.vue b/examples/vite/src/Edges/EdgesExample.vue
index 73b2a004..e0f4ef07 100644
--- a/examples/vite/src/Edges/EdgesExample.vue
+++ b/examples/vite/src/Edges/EdgesExample.vue
@@ -1,87 +1,21 @@
 <script lang="ts" setup>
-import type { Edge, Node } from '@vue-flow/core'
-import { MarkerType, VueFlow, useVueFlow } from '@vue-flow/core'
+import { VueFlow } from '@vue-flow/core'
 import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'
-import CustomLabel from './CustomLabel.vue'
-
-const initialNodes: Node[] = [
-  { id: '1', type: 'input', label: 'Input 1', position: { x: 250, y: 0 } },
-  { id: '2', label: 'Node 2', position: { x: 150, y: 100 } },
-  { id: '2a', label: 'Node 2a', position: { x: 0, y: 180 } },
-  { id: '3', label: 'Node 3', position: { x: 250, y: 200 } },
-  { id: '4', label: 'Node 4', position: { x: 400, y: 300 } },
-  { id: '3a', label: 'Node 3a', position: { x: 150, y: 300 } },
-  { id: '5', label: 'Node 5', position: { x: 250, y: 400 } },
-  { id: '6', type: 'output', label: 'Output 6', position: { x: 50, y: 550 } },
-  { id: '7', type: 'output', label: 'Output 7', position: { x: 250, y: 550 } },
-  { id: '8', type: 'output', label: 'Output 8', position: { x: 525, y: 600 } },
-  { id: '9', type: 'output', label: 'Output 9', position: { x: 675, y: 500 } },
-]
-
-const initialEdges: Edge[] = [
-  { id: 'e1-2', source: '1', target: '2', label: 'bezier edge (default)', class: 'normal-edge' },
-  { id: 'e2-2a', source: '2', target: '2a', type: 'smoothstep', label: 'smoothstep edge' },
-  { id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
-  { id: 'e3-4', source: '3', target: '4', type: 'straight', label: 'straight edge' },
-  { id: 'e3-3a', source: '3', target: '3a', type: 'straight', label: 'label only edge', style: { stroke: 'none' } },
-  { id: 'e3-5', source: '4', target: '5', animated: true, label: 'animated styled edge', style: { stroke: 'red' } },
-  {
-    id: 'e5-6',
-    source: '5',
-    target: '6',
-    label: h(CustomLabel, { label: 'custom label text' }, {}),
-    labelStyle: { fill: 'red', fontWeight: 700 },
-    markerEnd: {
-      type: MarkerType.Arrow,
-    },
-  },
-  {
-    id: 'e5-7',
-    source: '5',
-    target: '7',
-    label: 'label with styled bg',
-    labelBgPadding: [8, 4],
-    labelBgBorderRadius: 4,
-    labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 },
-    markerEnd: {
-      type: MarkerType.ArrowClosed,
-    },
-  },
-  {
-    id: 'e5-8',
-    source: '5',
-    target: '8',
-    type: 'custom',
-    data: { text: 'custom edge' },
-    markerEnd: {
-      type: MarkerType.ArrowClosed,
-    },
-  },
-  {
-    id: 'e5-9',
-    source: '5',
-    target: '9',
-    type: 'custom2',
-    data: { text: 'custom edge 2' },
-  },
-]
-
-useVueFlow({
-  nodes: initialNodes,
-  edges: initialEdges,
-})
+import { initialEdges, initialNodes } from './initial-elements'
 </script>
 
 <template>
-  <VueFlow :fit-view-on-init="true" :snap-to-grid="true">
+  <VueFlow :edges="initialEdges" :nodes="initialNodes" fit-view-on-init snap-to-grid>
     <template #edge-custom="props">
       <CustomEdge v-bind="props" />
     </template>
+
     <template #edge-custom2="props">
       <CustomEdge2 v-bind="props" />
     </template>
+
     <MiniMap />
     <Controls />
     <Background />
diff --git a/examples/vite/src/Edges/initial-elements.ts b/examples/vite/src/Edges/initial-elements.ts
new file mode 100644
index 00000000..fbe38fae
--- /dev/null
+++ b/examples/vite/src/Edges/initial-elements.ts
@@ -0,0 +1,65 @@
+import type { Edge, Node } from '@vue-flow/core'
+import { MarkerType } from '@vue-flow/core'
+import CustomLabel from './CustomLabel.vue'
+
+export const initialNodes: Node[] = [
+  { id: '1', type: 'input', label: 'Input 1', position: { x: 250, y: 0 } },
+  { id: '2', label: 'Node 2', position: { x: 150, y: 100 } },
+  { id: '2a', label: 'Node 2a', position: { x: 0, y: 180 } },
+  { id: '3', label: 'Node 3', position: { x: 250, y: 200 } },
+  { id: '4', label: 'Node 4', position: { x: 400, y: 300 } },
+  { id: '3a', label: 'Node 3a', position: { x: 150, y: 300 } },
+  { id: '5', label: 'Node 5', position: { x: 250, y: 400 } },
+  { id: '6', type: 'output', label: 'Output 6', position: { x: 50, y: 550 } },
+  { id: '7', type: 'output', label: 'Output 7', position: { x: 250, y: 550 } },
+  { id: '8', type: 'output', label: 'Output 8', position: { x: 525, y: 600 } },
+  { id: '9', type: 'output', label: 'Output 9', position: { x: 675, y: 500 } },
+]
+
+export const initialEdges: Edge[] = [
+  { id: 'e1-2', source: '1', target: '2', label: 'bezier edge (default)', class: 'normal-edge' },
+  { id: 'e2-2a', source: '2', target: '2a', type: 'smoothstep', label: 'smoothstep edge' },
+  { id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
+  { id: 'e3-4', source: '3', target: '4', type: 'straight', label: 'straight edge' },
+  { id: 'e3-3a', source: '3', target: '3a', type: 'straight', label: 'label only edge', style: { stroke: 'none' } },
+  { id: 'e3-5', source: '4', target: '5', animated: true, label: 'animated styled edge', style: { stroke: 'red' } },
+  {
+    id: 'e5-6',
+    source: '5',
+    target: '6',
+    label: h(CustomLabel, { label: 'custom label text' }, {}),
+    labelStyle: { fill: 'red', fontWeight: 700 },
+    markerEnd: {
+      type: MarkerType.Arrow,
+    },
+  },
+  {
+    id: 'e5-7',
+    source: '5',
+    target: '7',
+    label: 'label with styled bg',
+    labelBgPadding: [8, 4],
+    labelBgBorderRadius: 4,
+    labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+    },
+  },
+  {
+    id: 'e5-8',
+    source: '5',
+    target: '8',
+    type: 'custom',
+    data: { text: 'custom edge' },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+    },
+  },
+  {
+    id: 'e5-9',
+    source: '5',
+    target: '9',
+    type: 'custom2',
+    data: { text: 'custom edge 2' },
+  },
+]
diff --git a/examples/vite/tsconfig.json b/examples/vite/tsconfig.json
index 3005657c..8d3ca9b7 100644
--- a/examples/vite/tsconfig.json
+++ b/examples/vite/tsconfig.json
@@ -24,7 +24,7 @@
     "jsx": "preserve",
     "paths": {
       "~/*": [
-        "../../packages/vue-flow/src/*"
+        "../../packages/core/src/*"
       ]
     }
   },
diff --git a/examples/vite/vite.config.ts b/examples/vite/vite.config.ts
index f2bfdcb8..e03edb4f 100644
--- a/examples/vite/vite.config.ts
+++ b/examples/vite/vite.config.ts
@@ -9,7 +9,7 @@ export default defineConfig({
   resolve: {
     dedupe: ['vue'],
     alias: {
-      '~': resolve('../../packages/vue-flow/src'),
+      '~': resolve('../../packages/core/src'),
     },
   },
   plugins: [