docs: add run process to layouting example

Author: bcakmakoglu

docs/examples/index.ts

@@ -18,7 +18,7 @@ import { IntersectionApp, IntersectionCSS } from './intersection'
 import { SnapToHandleApp, SnappableConnectionLine } from './connection-radius'
 import { NodeResizerApp, ResizableNode } from './node-resizer'
 import { ToolbarApp, ToolbarNode } from './node-toolbar'
-import { LayoutApp, LayoutElements } from './layout'
+import { LayoutApp, LayoutElements, LayoutNode, LayoutScript } from './layout'
 
 export const exampleImports = {
   basic: {
@@ -127,6 +127,8 @@ export const exampleImports = {
   layout: {
     'App.vue': LayoutApp,
     'initial-elements.js': LayoutElements,
+    'ProcessNode.vue': LayoutNode,
+    'useRunProcess.js': LayoutScript,
     'additionalImports': {
       dagre: 'https://cdn.skypack.dev/pin/[email protected]/mode=imports,min/optimized/dagre.js',
     },

docs/examples/layout/App.vue

@@ -3,40 +3,48 @@ import dagre from 'dagre'
 import { nextTick, ref } from 'vue'
 import { Panel, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import { Background } from '@vue-flow/background'
+import ProcessNode from './ProcessNode.vue'
 
 import { initialEdges, initialNodes } from './initial-elements.js'
+import { useRunProcess } from './useRunProcess'
 
 const nodes = ref(initialNodes)
 
 const edges = ref(initialEdges)
 
+const dagreGraph = ref(new dagre.graphlib.Graph())
+
+dagreGraph.value.setDefaultEdgeLabel(() => ({}))
+
+const { run } = useRunProcess()
+
 const { findNode, fitView } = useVueFlow()
 
 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
-  const dagreGraph = new dagre.graphlib.Graph()
+  dagreGraph.value = new dagre.graphlib.Graph()
 
-  dagreGraph.setDefaultEdgeLabel(() => ({}))
+  dagreGraph.value.setDefaultEdgeLabel(() => ({}))
 
   const isHorizontal = direction === 'LR'
-  dagreGraph.setGraph({ rankdir: direction })
+  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.setNode(node.id, { width: graphNode.dimensions.width || 150, height: graphNode.dimensions.height || 50 })
+    dagreGraph.value.setNode(node.id, { width: graphNode.dimensions.width || 150, height: graphNode.dimensions.height || 50 })
   }
 
   for (const edge of edges.value) {
-    dagreGraph.setEdge(edge.source, edge.target)
+    dagreGraph.value.setEdge(edge.source, edge.target)
   }
 
-  dagre.layout(dagreGraph)
+  dagre.layout(dagreGraph.value)
 
   // set nodes with updated positions
   nodes.value = nodes.value.map((node) => {
-    const nodeWithPosition = dagreGraph.node(node.id)
+    const nodeWithPosition = dagreGraph.value.node(node.id)
 
     return {
       ...node,
@@ -55,11 +63,17 @@ function handleLayout(direction) {
 <template>
   <div class="layoutflow">
     <VueFlow :nodes="nodes" :edges="edges" @nodes-initialized="handleLayout('TB')">
+      <template #node-process="props">
+        <ProcessNode v-bind="props" />
+      </template>
+
       <Background />
 
       <Panel style="display: flex; gap: 1rem" position="top-right">
-        <button @click="handleLayout('TB')">vertical layout</button>
-        <button @click="handleLayout('LR')">horizontal layout</button>
+        <button @click="handleLayout('TB')">vertical</button>
+        <button @click="handleLayout('LR')">horizontal</button>
+
+        <button @click="run(nodes, dagreGraph)">Run</button>
       </Panel>
     </VueFlow>
   </div>

docs/examples/layout/ProcessNode.vue

@@ -0,0 +1,81 @@
+<script setup>
+import { toRef } from 'vue'
+import { Handle } from '@vue-flow/core'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+  sourcePosition: {
+    type: String,
+  },
+  targetPosition: {
+    type: String,
+  },
+})
+
+const bgColor = toRef(() => {
+  if (props.data.hasError) {
+    return '#f87171'
+  }
+
+  if (props.data.isFinished) {
+    return '#10b981'
+  }
+
+  if (props.data.isRunning || props.data.isSkipped) {
+    // pick me a lighter color please
+    return '#6b7280'
+  }
+
+  return '#1a192b'
+})
+</script>
+
+<template>
+  <div class="process-node" :style="{ backgroundColor: bgColor }">
+    <Handle type="target" :position="targetPosition" />
+    <Handle type="source" :position="sourcePosition" />
+
+    <div style="display: flex; align-items: center; gap: 8px">
+      <div v-if="data.isRunning" class="spinner" />
+      <span v-else-if="data.hasError">&#x274C;</span>
+      <span v-else-if="data.isSkipped">&#x1F6A7;</span>
+      <span v-else>&#x1F4E6;</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.process-node {
+  padding: 10px;
+  color: white;
+  border: 1px solid #1a192b;
+  border-radius: 99px;
+  font-size: 10px;
+  width: 15px;
+  height: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.spinner {
+  border: 2px solid #f3f3f3;
+  border-top: 2px solid #3498db;
+  border-radius: 50%;
+  width: 8px;
+  height: 8px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

docs/examples/layout/index.ts

@@ -1,2 +1,4 @@
 export { default as LayoutApp } from './App.vue?raw'
 export { default as LayoutElements } from './initial-elements.js?raw'
+export { default as LayoutNode } from './ProcessNode.vue?raw'
+export { default as LayoutScript } from './useRunProcess.js?raw'

docs/examples/layout/initial-elements.js

@@ -1,61 +1,63 @@
 const position = { x: 0, y: 0 }
+const type = 'process'
 
 export const initialNodes = [
   {
     id: '1',
-    type: 'input',
     label: 'Start',
     position,
+    type,
   },
   {
     id: '2',
-    label: 'Process 1',
     position,
+    type,
   },
   {
     id: '2a',
-    label: 'Process 2a',
     position,
+    type,
   },
   {
     id: '2b',
-    type: 'output',
-    label: 'Process 2b',
     position,
+    type,
   },
   {
     id: '2c',
-    label: 'Process 2c',
     position,
+    type,
   },
   {
     id: '2d',
-    label: 'Process 2d',
     position,
+    type,
   },
   {
     id: '3',
-    label: 'Process 3',
     position,
+    type,
   },
   {
     id: '4',
-    type: 'input',
-    label: 'Start',
     position,
+    type,
   },
   {
     id: '5',
-    label: 'Process 5',
     position,
+    type,
   },
   {
     id: '6',
-    type: 'output',
-    label: 'Process 6',
     position,
+    type,
+  },
+  {
+    id: '7',
+    position,
+    type,
   },
-  { id: '7', label: 'Process 7', position },
 ]
 
 export const initialEdges = [

docs/examples/layout/useRunProcess.js

@@ -0,0 +1,88 @@
+import { ref } from 'vue'
+import { useVueFlow } from '@vue-flow/core'
+
+/**
+ * Composable to simulate running a process tree.
+ *
+ * It loops through each node, pretends to run an async process, and updates the node's data indicating whether the process has finished.
+ * When one node finishes, the next one starts.
+ *
+ * When a node has multiple descendants, it will run them in parallel.
+ */
+export function useRunProcess() {
+  const { updateNodeData } = useVueFlow()
+
+  const running = ref(false)
+  const executedNodes = new Set()
+
+  async function runNode(node, dagreGraph) {
+    if (executedNodes.has(node.id)) {
+      return
+    }
+
+    executedNodes.add(node.id)
+
+    updateNodeData(node.id, { isRunning: true, isFinished: false, hasError: false })
+
+    // Simulate an async process with a random timeout between 1 and 3 seconds
+    const delay = Math.floor(Math.random() * 2000) + 1000
+    await new Promise((resolve) => setTimeout(resolve, delay))
+
+    const children = dagreGraph.successors(node.id)
+
+    // Randomly decide whether the node will throw an error
+    const willThrowError = Math.random() < 0.15
+
+    if (willThrowError) {
+      updateNodeData(node.id, { isRunning: false, hasError: true })
+
+      await skipDescendants(node.id, dagreGraph)
+      return
+    }
+
+    updateNodeData(node.id, { isRunning: false, isFinished: true })
+
+    // Run the process on the children in parallel
+    await Promise.all(
+      children.map((id) => {
+        return runNode({ id }, dagreGraph)
+      }),
+    )
+  }
+
+  async function run(nodes, dagreGraph) {
+    if (running.value) {
+      return
+    }
+
+    reset(nodes)
+
+    running.value = true
+
+    // Get all starting nodes (nodes with no predecessors)
+    const startingNodes = nodes.filter((node) => dagreGraph.predecessors(node.id)?.length === 0)
+
+    // Run the process on all starting nodes in parallel
+    await Promise.all(startingNodes.map((node) => runNode(node, dagreGraph)))
+
+    running.value = false
+    executedNodes.clear()
+  }
+
+  function reset(nodes) {
+    for (const node of nodes) {
+      updateNodeData(node.id, { isRunning: false, isFinished: false, hasError: false, isSkipped: false })
+    }
+  }
+
+  async function skipDescendants(nodeId, dagreGraph) {
+    const children = dagreGraph.successors(nodeId)
+
+    for (const child of children) {
+      updateNodeData(child, { isRunning: false, isSkipped: true })
+      await skipDescendants(child, dagreGraph)
+    }
+  }
+
+  return { run, running }
+}