feat(docs): add useLayout composable

docs/examples/layout/App.vue

@@ -1,7 +1,6 @@
 <script setup>
-import dagre from 'dagre'
 import { nextTick, ref } from 'vue'
-import { Panel, Position, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
 import { Background } from '@vue-flow/background'
 import Icon from './Icon.vue'
 import ProcessNode from './ProcessNode.vue'
@@ -10,75 +9,50 @@ 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)
 
 const edges = ref(initialEdges)
 
-const dagreGraph = ref(new dagre.graphlib.Graph())
-
 const cancelOnError = ref(true)
 
 const shuffle = useShuffle()
 
-const { run, stop, reset, isRunning } = useRunProcess({ dagreGraph, cancelOnError })
+const { graph, layout, previousDirection } = useLayout()
 
-const { findNode, fitView } = useVueFlow()
+const { run, stop, reset, isRunning } = useRunProcess({ graph, cancelOnError })
 
-function handleLayout(direction) {
-  // we create a new graph instance, in case some nodes/edges were removed, otherwise dagre would act as if they were still there
-  dagreGraph.value = new dagre.graphlib.Graph()
+const { fitView } = useVueFlow()
 
-  dagreGraph.value.setDefaultEdgeLabel(() => ({}))
+async function shuffleGraph() {
+  await stop()
 
-  const isHorizontal = direction === 'LR'
-  dagreGraph.value.setGraph({ rankdir: direction })
-
-  for (const node of nodes.value) {
-    // if you need width+height of nodes for your layout, you can use the dimensions property of the internal node (`GraphNode` type)
-    const graphNode = findNode(node.id)
-
-    dagreGraph.value.setNode(node.id, { width: graphNode.dimensions.width || 150, height: graphNode.dimensions.height || 50 })
-  }
-
-  console.log(edges.value)
-  for (const edge of edges.value) {
-    dagreGraph.value.setEdge(edge.source, edge.target)
-  }
-
-  dagre.layout(dagreGraph.value)
-
-  // set nodes with updated positions
-  nodes.value = nodes.value.map((node) => {
-    const nodeWithPosition = dagreGraph.value.node(node.id)
-
-    return {
-      ...node,
-      targetPosition: isHorizontal ? Position.Left : Position.Top,
-      sourcePosition: isHorizontal ? Position.Right : Position.Bottom,
-      position: { x: nodeWithPosition.x, y: nodeWithPosition.y },
-    }
-  })
-
-  nextTick(() => {
-    fitView()
-  })
-}
-
-function shuffleGraph() {
   reset(nodes.value)
 
   edges.value = shuffle(nodes.value)
 
   nextTick(() => {
-    handleLayout('LR')
+    layoutGraph(previousDirection.value)
+  })
+}
+
+async function layoutGraph(direction) {
+  await stop()
+
+  reset(nodes.value)
+
+  nodes.value = layout(nodes.value, edges.value, direction)
+
+  nextTick(() => {
+    fitView()
   })
 }
 </script>
 
 <template>
   <div class="layoutflow">
-    <VueFlow :nodes="nodes" :edges="edges" @nodes-initialized="handleLayout('LR')">
+    <VueFlow :nodes="nodes" :edges="edges" @nodes-initialized="layoutGraph('LR')">
       <template #node-process="props">
         <ProcessNode :data="props.data" :source-position="props.sourcePosition" :target-position="props.targetPosition" />
       </template>
@@ -108,11 +82,11 @@ function shuffleGraph() {
             <Icon name="play" />
           </button>
 
-          <button title="set horizontal layout" @click="handleLayout('LR')">
+          <button title="set horizontal layout" @click="layoutGraph('LR')">
             <Icon name="horizontal" />
           </button>
 
-          <button title="set vertical layout" @click="handleLayout('TB')">
+          <button title="set vertical layout" @click="layoutGraph('TB')">
             <Icon name="vertical" />
           </button>