update(examples): adapt examples

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

examples/Edges/CustomEdge.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ArrowHeadType, getBezierPath, getMarkerEnd, Position, EdgeProps } from '~/index'
+import { getBezierPath, getMarkerEnd, Position, EdgeProps } from '~/index'
 
 interface CustomEdgeProps<T = { text: string }> extends EdgeProps<T> {
   source: string
@@ -13,7 +13,6 @@ interface CustomEdgeProps<T = { text: string }> extends EdgeProps<T> {
   targetY: number
   sourcePosition: Position
   targetPosition: Position
-  arrowHeadType?: ArrowHeadType
   markerEndId?: string
   data?: T
 }
@@ -29,7 +28,7 @@ const edgePath = computed(() =>
     targetPosition: props.targetPosition,
   }),
 )
-const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
+const markerEnd = computed(() => getMarkerEnd(props.markerEnd, props.markerEndId))
 </script>
 <script lang="ts">
 export default {

examples/Edges/CustomEdge2.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { getBezierPath, getMarkerEnd } from '~/components/Edges/utils'
-import { ArrowHeadType, getEdgeCenter, Position, EdgeText, EdgeProps } from '~/index'
+import { getEdgeCenter, Position, EdgeText, EdgeProps } from '~/index'
 
 interface CustomEdgeProps extends EdgeProps {
   source: string
@@ -14,7 +14,6 @@ interface CustomEdgeProps extends EdgeProps {
   targetY: number
   sourcePosition: Position
   targetPosition: Position
-  arrowHeadType?: ArrowHeadType
   markerEndId?: string
   data?: {
     text: string
@@ -33,7 +32,7 @@ const edgePath = computed(() =>
     targetPosition: props.targetPosition,
   }),
 )
-const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
+const markerEnd = computed(() => getMarkerEnd(props.markerEnd, props.markerEndId))
 const center = computed(() =>
   getEdgeCenter({
     sourceX: props.sourceX,

examples/Edges/EdgesExample.vue

@@ -14,7 +14,7 @@ import {
   Connection,
   Edge,
   addEdge,
-  ArrowHeadType,
+  MarkerType,
 } from '~/index'
 
 const initialElements: Elements = [
@@ -46,7 +46,7 @@ const initialElements: Elements = [
       },
     },
     labelStyle: { fill: 'red', fontWeight: 700 },
-    arrowHeadType: ArrowHeadType.Arrow,
+    markerEnd: MarkerType.Arrow,
   },
   {
     id: 'e5-7',
@@ -56,7 +56,7 @@ const initialElements: Elements = [
     labelBgPadding: [8, 4],
     labelBgBorderRadius: 4,
     labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 },
-    arrowHeadType: ArrowHeadType.ArrowClosed,
+    markerEnd: MarkerType.ArrowClosed,
   },
   {
     id: 'e5-8',
@@ -64,7 +64,7 @@ const initialElements: Elements = [
     target: '8',
     type: 'custom',
     data: { text: 'custom edge' },
-    arrowHeadType: ArrowHeadType.ArrowClosed,
+    markerEnd: MarkerType.ArrowClosed,
   },
   {
     id: 'e5-9',