chore(docs): simplify animated layout example (#1747)

* chore(examples): update ts example of layouting

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

* chore(docs): cleanup animated layout example

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

---------

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

docs/examples/layout/App.vue

@@ -8,7 +8,6 @@ import AnimationEdge from './AnimationEdge.vue'
 
 import { initialEdges, initialNodes } from './initial-elements.js'
 import { useRunProcess } from './useRunProcess'
-import { useShuffle } from './useShuffle'
 import { useLayout } from './useLayout'
 
 const nodes = ref(initialNodes)
@@ -17,26 +16,12 @@ const edges = ref(initialEdges)
 
 const cancelOnError = ref(true)
 
-const shuffle = useShuffle()
-
-const { graph, layout, previousDirection } = useLayout()
+const { graph, layout } = useLayout()
 
 const { run, stop, reset, isRunning } = useRunProcess({ graph, cancelOnError })
 
 const { fitView } = useVueFlow()
 
-async function shuffleGraph() {
-  await stop()
-
-  reset(nodes.value)
-
-  edges.value = shuffle(nodes.value)
-
-  nextTick(() => {
-    layoutGraph(previousDirection.value)
-  })
-}
-
 async function layoutGraph(direction) {
   await stop()
 
@@ -53,8 +38,8 @@ async function layoutGraph(direction) {
 <template>
   <div class="layout-flow">
     <VueFlow
-      :nodes="nodes"
-      :edges="edges"
+      v-model:nodes="nodes"
+      v-model:edges="edges"
       :default-edge-options="{ type: 'animation', animated: true }"
       @nodes-initialized="layoutGraph('LR')"
     >
@@ -73,6 +58,7 @@ async function layoutGraph(direction) {
           :targetY="edgeProps.targetY"
           :source-position="edgeProps.sourcePosition"
           :target-position="edgeProps.targetPosition"
+          :data="edgeProps.data"
         />
       </template>
 
@@ -95,10 +81,6 @@ async function layoutGraph(direction) {
           <button title="set vertical layout" @click="layoutGraph('TB')">
             <Icon name="vertical" />
           </button>
-
-          <button title="shuffle graph" @click="shuffleGraph">
-            <Icon name="shuffle" />
-          </button>
         </div>
 
         <div class="checkbox-panel">