update(examples): correct examples

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

examples/Basic/Basic.vue

@@ -1,42 +1,44 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, Background, useVueFlow, useNodesState, useEdgesState } from '~/index'
+import { VueFlow, MiniMap, Controls, Background, isNode, useVueFlow, addEdge } from '~/index'
 
-const initialNodes = [
+const elements = ref([
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
   { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
   { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
   { id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
-]
-const initialEdges = [
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
-]
+])
 const { onPaneReady, onNodeDragStop, onConnect, instance } = useVueFlow()
-const { nodes } = useNodesState({ nodes: initialNodes, applyDefault: true })
-const { edges, addEdges } = useEdgesState({ edges: initialEdges, applyDefault: true })
 onPaneReady(({ fitView }) => {
   fitView({ padding: 0.1 })
 })
 onNodeDragStop((e) => console.log('drag stop', e))
-onConnect((params) => addEdges([params]))
+onConnect((params) => addEdge(params, elements.value))
 
-const updatePos = () => {
-  nodes.forEach((el) => {
-    el.position = {
-      x: Math.random() * 400,
-      y: Math.random() * 400,
+const updatePos = () =>
+  elements.value.forEach((el) => {
+    if (isNode(el)) {
+      el.position = {
+        x: Math.random() * 400,
+        y: Math.random() * 400,
+      }
     }
   })
-}
 
-const logToObject = () => console.log(instance.value?.toObject())
-const resetTransform = () => instance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
-const toggleclasss = () => {
-  nodes.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
-}
+const logToObject = () => console.log(instance.value.toObject())
+const resetTransform = () => elements.value.push({ id: '1234', position: { x: 50, y: 50 }, label: 'Foobar' })
+const toggleclasss = () => elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
 </script>
 <template>
-  <VueFlow class="vue-flow-basic-example" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4" :zoom-on-scroll="false">
+  <VueFlow
+    v-model="elements"
+    class="vue-flow-basic-example"
+    :default-zoom="1.5"
+    :min-zoom="0.2"
+    :max-zoom="4"
+    :zoom-on-scroll="false"
+  >
     <Background />
     <MiniMap />
     <Controls />

examples/CustomNode/CustomNode.vue

@@ -5,13 +5,14 @@ import {
   Elements,
   FlowElement,
   isEdge,
-  MiniMap,
   Node,
   Position,
   SnapGrid,
   useNodesState,
   useVueFlow,
   VueFlow,
+  Controls,
+  MiniMap,
 } from '~/index'
 
 const elements = ref<Elements>([])
@@ -84,7 +85,7 @@ onPaneReady((flowInstance) => {
 <template>
   <VueFlow
     v-model="elements"
-    :style="`background: ${bgColor}`"
+    :style="{ backgroundColor: bgColor }"
     :connection-mode="ConnectionMode.Loose"
     :connection-line-style="connectionLineStyle"
     :snap-to-grid="true"

examples/Edges/CustomEdge.vue

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

examples/Edges/CustomEdge2.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { getBezierPath, getMarkerEnd } from '~/components/Edges/utils'
-import { getEdgeCenter, Position, EdgeText, EdgeProps } from '~/index'
+import { getEdgeCenter, getBezierPath, getMarkerId, Position, EdgeProps, EdgeText } from '~/index'
 
 interface CustomEdgeProps extends EdgeProps {
   source: string
@@ -32,7 +31,7 @@ const edgePath = computed(() =>
     targetPosition: props.targetPosition,
   }),
 )
-const markerEnd = computed(() => getMarkerEnd(props.markerEnd, props.markerEndId))
+const markerEnd = computed(() => getMarkerId(props.markerEnd))
 const center = computed(() =>
   getEdgeCenter({
     sourceX: props.sourceX,

examples/Edges/EdgesExample.vue

@@ -2,9 +2,9 @@
 import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'
 import CustomLabel from './CustomLabel.vue'
-import { VueFlow, MiniMap, Controls, Background, MarkerType, useVueFlow, useElementsState } from '~/index'
+import { VueFlow, MiniMap, Controls, Background, MarkerType, useVueFlow, useElementsState, Edge, Node } from '~/index'
 
-const initialNodes = [
+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 } },
@@ -18,7 +18,7 @@ const initialNodes = [
   { id: '9', type: 'output', label: 'Output 9', position: { x: 675, y: 500 } },
 ]
 
-const initialEdges = [
+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' },
@@ -36,7 +36,9 @@ const initialEdges = [
       },
     },
     labelStyle: { fill: 'red', fontWeight: 700 },
-    markerEnd: MarkerType.Arrow,
+    markerEnd: {
+      type: MarkerType.Arrow,
+    },
   },
   {
     id: 'e5-7',
@@ -46,7 +48,9 @@ const initialEdges = [
     labelBgPadding: [8, 4],
     labelBgBorderRadius: 4,
     labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 },
-    markerEnd: MarkerType.ArrowClosed,
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+    },
   },
   {
     id: 'e5-8',
@@ -54,7 +58,9 @@ const initialEdges = [
     target: '8',
     type: 'custom',
     data: { text: 'custom edge' },
-    markerEnd: MarkerType.ArrowClosed,
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+    },
   },
   {
     id: 'e5-9',

examples/Nesting/Nesting.vue

@@ -1,38 +1,84 @@
 <script lang="ts" setup>
-import GroupNode from './GroupNode.vue'
-import { VueFlow, Elements, Edge, Connection, addEdge } from '~/index'
+import { ConnectionMode, useElementsState, useVueFlow, VueFlow, MiniMap, Background, Controls } from '~/index'
 
-const elements = ref<Elements<{ label: string; group?: string }>>([
-  { id: 'node-2', label: 'node-2', position: { x: 50, y: 5 } },
-  {
-    id: 'group-a',
-    type: 'group',
-    label: 'A',
-    position: { x: 50, y: 100 },
-    children: [
-      {
-        id: 'node-1',
-        label: 'node-1',
-        position: { x: 250, y: 5 },
-        extent: 'parent',
-      },
-    ],
-  },
-  {
-    id: 'group-b',
-    style: { zIndex: 2 },
-    selectable: false,
-    label: 'B',
-    position: { x: 500, y: 100 },
-  },
-])
+const { onConnect } = useVueFlow({
+  fitViewOnInit: true,
+  connectionMode: ConnectionMode.Loose,
+})
+const { nodes, edges, addEdges } = useElementsState({
+  nodes: [
+    { 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',
+      style: { backgroundColor: 'rgba(255, 0, 0, 0.8)', width: '200px', height: '200px' },
+      children: [
+        {
+          id: '2a',
+          label: 'Node 2a',
+          position: { x: 10, y: 50 },
+        },
+      ],
+    },
+    { id: '3', label: 'Node 3', position: { x: 320, y: 100 }, class: 'light' },
+    {
+      id: '4',
+      label: 'Node 4',
+      position: { x: 320, y: 200 },
+      class: 'light',
+      style: { backgroundColor: 'rgba(255, 0, 0, 0.7)', width: '300px', height: '300px' },
+      children: [
+        {
+          id: '4a',
+          label: 'Node 4a',
+          position: { x: 15, y: 65 },
+          class: 'light',
+          extent: 'parent',
+        },
+        {
+          id: '4b',
+          label: 'Node 4b',
+          position: { x: 15, y: 120 },
+          class: 'light',
+          style: { backgroundColor: 'rgba(255, 0, 255, 0.7)', height: '150px', width: '270px' },
+          children: [
+            {
+              id: '4b1',
+              label: 'Node 4b1',
+              position: { x: 20, y: 40 },
+              class: 'light',
+            },
+            {
+              id: '4b2',
+              label: 'Node 4b2',
+              position: { x: 100, y: 100 },
+              class: 'light',
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  edges: [
+    { id: 'e1-2', source: '1', target: '2', animated: true },
+    { id: 'e1-3', source: '1', target: '3' },
+    { id: 'e2a-4a', source: '2a', target: '4a' },
+    { id: 'e3-4', source: '3', target: '4' },
+    { id: 'e3-4b', source: '3', target: '4b' },
+    { id: 'e4a-4b1', source: '4a', target: '4b1' },
+    { id: 'e4a-4b2', source: '4a', target: '4b2' },
+    { id: 'e4b1-4b2', source: '4b1', target: '4b2' },
+  ],
+})
 
-const onConnect = (params: Edge | Connection) => addEdge(params, elements.value)
+onConnect((params) => addEdges([params]))
 </script>
 <template>
-  <VueFlow v-model="elements" @connect="onConnect">
-    <template #node-group="aProps">
-      <GroupNode v-bind="aProps" />
-    </template>
+  <VueFlow>
+    <MiniMap />
+    <Controls />
+    <Background />
   </VueFlow>
 </template>

examples/UpdatableEdge/UpdatableEdgeExample.vue

@@ -37,8 +37,9 @@ const elements = ref(initialElements)
 const onLoad = (flowInstance: FlowInstance) => flowInstance.fitView()
 const onEdgeUpdateStart = (edge: Edge) => console.log('start update', edge)
 const onEdgeUpdateEnd = (edge: Edge) => console.log('end update', edge)
-const onEdgeUpdate = ({ edge, connection }: FlowEvents['edgeUpdate']) =>
-  (elements.value = updateEdge(edge, connection, elements.value))
+const onEdgeUpdate = ({ edge, connection }: FlowEvents['edgeUpdate']) => {
+  elements.value = updateEdge(edge, connection, elements.value)
+}
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
 </script>
 <template>