examples: add example for running a process tree

examples/vite/src/Layouting/LayoutingExample.vue

@@ -1,57 +1,79 @@
 <script lang="ts" setup>
 import dagre from 'dagre'
-import type { CoordinateExtent, Elements } from '@vue-flow/core'
-import { ConnectionMode, Panel, Position, VueFlow, isNode } from '@vue-flow/core'
+import { ConnectionMode, Panel, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import { Controls } from '@vue-flow/controls'
 
 import '@vue-flow/controls/dist/style.css'
 
-import initialElements from './initial-elements'
+import { initialEdges, initialNodes } from './initial-elements'
+import { useRunProcess } from './useRunProcess'
+import ProcessNode from './ProcessNode.vue'
 
-const dagreGraph = new dagre.graphlib.Graph()
+const nodes = ref(initialNodes)
 
-dagreGraph.setDefaultEdgeLabel(() => ({}))
+const edges = ref(initialEdges)
 
-const nodeExtent: CoordinateExtent = [
-  [0, -100],
-  [1000, 500],
-]
+// we create a new graph instance, in case some nodes/edges were removed, otherwise dagre would act as if they were still there
+const dagreGraph = ref(new dagre.graphlib.Graph())
 
-const elements = ref<Elements>(initialElements)
+dagreGraph.value.setDefaultEdgeLabel(() => ({}))
+
+const { run } = useRunProcess()
+
+const { findNode, fitView } = useVueFlow()
+
+function handleLayout(direction: 'TB' | 'LR') {
+  dagreGraph.value = new dagre.graphlib.Graph()
+  dagreGraph.value.setDefaultEdgeLabel(() => ({}))
 
-function onLayout(direction: string) {
   const isHorizontal = direction === 'LR'
-  dagreGraph.setGraph({ rankdir: direction })
+  dagreGraph.value.setGraph({ rankdir: direction })
 
-  elements.value.forEach((el) => {
-    if (isNode(el)) {
-      dagreGraph.setNode(el.id, { width: 150, height: 50 })
-    } else {
-      dagreGraph.setEdge(el.source, el.target)
+  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 })
+  }
+
+  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 },
     }
   })
 
-  dagre.layout(dagreGraph)
-
-  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 }
-    }
+  nextTick(() => {
+    fitView()
   })
 }
 </script>
 
 <template>
   <div class="layoutflow">
-    <VueFlow v-model="elements" :node-extent="nodeExtent" :connection-mode="ConnectionMode.Loose" @pane-ready="onLayout('TB')">
+    <VueFlow :nodes="nodes" :edges="edges" :connection-mode="ConnectionMode.Loose" @nodes-initialized="handleLayout('TB')">
+      <template #node-process="props">
+        <ProcessNode v-bind="props" />
+      </template>
+
       <Controls />
 
       <Panel style="display: flex; gap: 10px" position="top-right">
-        <button :style="{ marginRight: 10 }" @click="onLayout('TB')">vertical layout</button>
-        <button @click="onLayout('LR')">horizontal layout</button>
+        <button @click="handleLayout('TB')">vertical layout</button>
+        <button @click="handleLayout('LR')">horizontal layout</button>
+
+        <button @click="run(nodes, dagreGraph)">Run</button>
       </Panel>
     </VueFlow>
   </div>