update(examples): adapt examples

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

examples/EdgeWithButton/ButtonEdge.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { getEdgeCenter, getBezierPath, getMarkerEnd, ArrowHeadType, Position, useVueFlow, EdgeProps } from '~/index'
+import { getEdgeCenter, getBezierPath, getMarkerEnd, Position, useVueFlow, EdgeProps } from '~/index'
 
 interface CustomEdgeProps<T = any> extends EdgeProps<T> {
   id: string
@@ -9,7 +9,6 @@ interface CustomEdgeProps<T = any> extends EdgeProps<T> {
   targetY: number
   sourcePosition: Position
   targetPosition: Position
-  arrowHeadType?: ArrowHeadType
   markerEndId?: string
   data?: T
 }
@@ -37,7 +36,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/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',

examples/Nesting/Nesting.vue

@@ -7,7 +7,6 @@ const elements = ref<Elements<{ label: string; group?: string }>>([
   {
     id: 'group-a',
     style: { zIndex: 2, width: '300px', height: '300px' },
-    selectable: false,
     label: 'A',
     position: { x: 50, y: 100 },
     children: [

examples/Overview/Overview.vue

@@ -14,10 +14,10 @@ import {
   FlowInstance,
   FlowTransform,
   SnapGrid,
-  ArrowHeadType,
   Connection,
   Edge,
   FlowEvents,
+  MarkerType,
 } from '~/index'
 
 const onNodeDragStart = (e: FlowEvents['nodeDragStart']) => console.log('drag start', e)
@@ -99,7 +99,7 @@ const initialElements: Elements = [
   { id: 'e1-2', source: '1', target: '2', label: 'this is an edge label' },
   { id: 'e1-3', source: '1', target: '3' },
   { id: 'e3-4', source: '3', target: '4', animated: true, label: 'animated edge' },
-  { id: 'e4-5', source: '4', target: '5', arrowHeadType: ArrowHeadType.Arrow, label: 'edge with arrow head' },
+  { id: 'e4-5', source: '4', target: '5', markerEnd: MarkerType.Arrow, label: 'edge with arrow head' },
   { id: 'e5-6', source: '5', target: '6', type: 'smoothstep', label: 'smooth step edge' },
   {
     id: 'e5-7',

examples/Provider/Sidebar.vue

@@ -6,7 +6,7 @@ const nodes = computed(() => store.getNodes)
 const transform = computed(() => store.transform)
 
 const selectAll = () => {
-  store.selectedElements = nodes.value
+  store.addSelectedNodes(nodes.value)
   store.unsetUserSelection()
 }
 </script>

examples/Unidirectional/UnidirectionalExample.vue

@@ -11,7 +11,7 @@ import {
   ConnectionLineType,
   ConnectionMode,
   updateEdge,
-  ArrowHeadType,
+  MarkerType,
 } from '~/index'
 
 const initialElements: Elements = [
@@ -67,7 +67,7 @@ const initialElements: Elements = [
     sourceHandle: 'left',
     targetHandle: 'bottom',
     type: 'smoothstep',
-    arrowHeadType: ArrowHeadType.Arrow,
+    markerEnd: MarkerType.Arrow,
   },
   {
     id: 'e0-1b',
@@ -76,7 +76,7 @@ const initialElements: Elements = [
     sourceHandle: 'top',
     targetHandle: 'right',
     type: 'smoothstep',
-    arrowHeadType: ArrowHeadType.Arrow,
+    markerEnd: MarkerType.Arrow,
   },
   {
     id: 'e0-2a',
@@ -85,7 +85,7 @@ const initialElements: Elements = [
     sourceHandle: 'top',
     targetHandle: 'left',
     type: 'smoothstep',
-    arrowHeadType: ArrowHeadType.Arrow,
+    markerEnd: MarkerType.Arrow,
   },
   {
     id: 'e0-2b',
@@ -94,7 +94,7 @@ const initialElements: Elements = [
     sourceHandle: 'right',
     targetHandle: 'bottom',
     type: 'smoothstep',
-    arrowHeadType: ArrowHeadType.Arrow,
+    markerEnd: MarkerType.Arrow,
   },
   {
     id: 'e0-3a',
@@ -103,7 +103,7 @@ const initialElements: Elements = [
     sourceHandle: 'right',
     targetHandle: 'top',
     type: 'smoothstep',
-    arrowHeadType: ArrowHeadType.Arrow,
+    markerEnd: MarkerType.Arrow,
   },
   {
     id: 'e0-3b',
@@ -112,7 +112,7 @@ const initialElements: Elements = [
     sourceHandle: 'bottom',
     targetHandle: 'left',
     type: 'smoothstep',
-    arrowHeadType: ArrowHeadType.Arrow,
+    markerEnd: MarkerType.Arrow,
   },
   {
     id: 'e0-4a',
@@ -121,7 +121,7 @@ const initialElements: Elements = [
     sourceHandle: 'bottom',
     targetHandle: 'right',
     type: 'smoothstep',
-    arrowHeadType: ArrowHeadType.Arrow,
+    markerEnd: MarkerType.Arrow,
   },
   {
     id: 'e0-4b',
@@ -130,7 +130,7 @@ const initialElements: Elements = [
     sourceHandle: 'left',
     targetHandle: 'top',
     type: 'smoothstep',
-    arrowHeadType: ArrowHeadType.Arrow,
+    markerEnd: MarkerType.Arrow,
   },
   {
     id: 'e0-10',
@@ -139,7 +139,7 @@ const initialElements: Elements = [
     sourceHandle: 'top',
     targetHandle: 'bottom',
     type: 'smoothstep',
-    arrowHeadType: ArrowHeadType.Arrow,
+    markerEnd: MarkerType.Arrow,
   },
   {
     id: 'e0-20',
@@ -148,7 +148,7 @@ const initialElements: Elements = [
     sourceHandle: 'right',
     targetHandle: 'left',
     type: 'smoothstep',
-    arrowHeadType: ArrowHeadType.Arrow,
+    markerEnd: MarkerType.Arrow,
   },
   {
     id: 'e0-30',
@@ -157,7 +157,7 @@ const initialElements: Elements = [
     sourceHandle: 'bottom',
     targetHandle: 'top',
     type: 'smoothstep',
-    arrowHeadType: ArrowHeadType.Arrow,
+    markerEnd: MarkerType.Arrow,
   },
   {
     id: 'e0-40',
@@ -166,7 +166,7 @@ const initialElements: Elements = [
     sourceHandle: 'left',
     targetHandle: 'right',
     type: 'smoothstep',
-    arrowHeadType: ArrowHeadType.Arrow,
+    markerEnd: MarkerType.Arrow,
   },
 ]