update(examples): correct examples

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

examples/Layouting/LayoutingExample.vue

@@ -1,20 +1,8 @@
 <script lang="ts" setup>
 import dagre from 'dagre'
 import initialElements from './initial-elements'
-import './layouting.css'
 
-import {
-  VueFlow,
-  Controls,
-  addEdge,
-  ConnectionMode,
-  Connection,
-  Edge,
-  Elements,
-  isNode,
-  CoordinateExtent,
-  Position,
-} from '~/index'
+import { VueFlow, Controls, ConnectionMode, Elements, isNode, CoordinateExtent, Position } from '~/index'
 
 const dagreGraph = new dagre.graphlib.Graph()
 dagreGraph.setDefaultEdgeLabel(() => ({}))
@@ -25,7 +13,6 @@ const nodeExtent: CoordinateExtent = [
 ]
 
 const elements = ref<Elements>(initialElements)
-const onConnect = (params: Connection) => (elements.value = addEdge({ ...params, animated: true }, elements.value))
 
 const onLayout = (direction: string) => {
   const isHorizontal = direction === 'LR'
@@ -41,33 +28,27 @@ const onLayout = (direction: string) => {
 
   dagre.layout(dagreGraph)
 
-  elements.value = elements.value.map((el) => {
+  elements.value.forEach((el) => {
     if (isNode(el)) {
       const nodeWithPosition = dagreGraph.node(el.id)
       el.targetPosition = isHorizontal ? Position.Left : Position.Top
       el.sourcePosition = isHorizontal ? Position.Right : Position.Bottom
       el.position = { x: nodeWithPosition.x, y: nodeWithPosition.y }
     }
-
-    return el
   })
-  console.log(elements.value)
 }
 </script>
 <template>
   <div class="layoutflow">
-    <VueFlow
-      v-model="elements"
-      :node-extent="nodeExtent"
-      :connection-mode="ConnectionMode.Loose"
-      @connect="onConnect"
-      @load="() => onLayout('TB')"
-    >
+    <VueFlow v-model="elements" :node-extent="nodeExtent" :connection-mode="ConnectionMode.Loose" @pane-ready="onLayout('TB')">
       <Controls />
     </VueFlow>
     <div class="controls">
-      <button :style="{ marginRight: 10 }" @click="() => onLayout('TB')">vertical layout</button>
-      <button @click="() => onLayout('LR')">horizontal layout</button>
+      <button :style="{ marginRight: 10 }" @click="onLayout('TB')">vertical layout</button>
+      <button @click="onLayout('LR')">horizontal layout</button>
     </div>
   </div>
 </template>
+<style>
+@import './layouting.css';
+</style>

examples/Layouting/initial-elements.ts

@@ -6,56 +6,56 @@ const elements: Elements = [
   {
     id: '1',
     type: 'input',
-    data: { label: 'input' },
+    label: 'input',
     position,
   },
   {
     id: '2',
-    data: { label: 'node 2' },
+    label: 'node 2',
     position,
   },
   {
     id: '2a',
-    data: { label: 'node 2a' },
+    label: 'node 2a',
     position,
   },
   {
     id: '2b',
-    data: { label: 'node 2b' },
+    label: 'node 2b',
     position,
   },
   {
     id: '2c',
-    data: { label: 'node 2c' },
+    label: 'node 2c',
     position,
   },
   {
     id: '2d',
-    data: { label: 'node 2d' },
+    label: 'node 2d',
     position,
   },
   {
     id: '3',
-    data: { label: 'node 3' },
+    label: 'node 3',
     position,
   },
   {
     id: '4',
-    data: { label: 'node 4' },
+    label: 'node 4',
     position,
   },
   {
     id: '5',
-    data: { label: 'node 5' },
+    label: 'node 5',
     position,
   },
   {
     id: '6',
     type: 'output',
-    data: { label: 'output' },
+    label: 'output',
     position,
   },
-  { id: '7', type: 'output', data: { label: 'output' }, position: { x: 400, y: 450 } },
+  { id: '7', type: 'output', label: 'output', position: { x: 400, y: 450 } },
   { id: 'e12', source: '1', target: '2', type: 'smoothstep', animated: true },
   { id: 'e13', source: '1', target: '3', type: 'smoothstep', animated: true },
   { id: 'e22a', source: '2', target: '2a', type: 'smoothstep', animated: true },