chore(docs): update layout example styles

docs/examples/layout/App.vue

@@ -14,9 +14,7 @@ const edges = ref(initialEdges)
 
 const dagreGraph = ref(new dagre.graphlib.Graph())
 
-dagreGraph.value.setDefaultEdgeLabel(() => ({}))
-
-const { run } = useRunProcess()
+const { run, stop, isRunning } = useRunProcess(dagreGraph)
 
 const { findNode, fitView } = useVueFlow()
 
@@ -69,11 +67,14 @@ function handleLayout(direction) {
 
       <Background />
 
-      <Panel style="display: flex; gap: 1rem" position="top-right">
+      <Panel class="layout-panel" position="top-left">
         <button @click="handleLayout('TB')">vertical</button>
         <button @click="handleLayout('LR')">horizontal</button>
+      </Panel>
 
-        <button @click="run(nodes, dagreGraph)">Run</button>
+      <Panel class="process-panel" position="top-right">
+        <button v-if="isRunning" @click="stop">🛑</button>
+        <button v-else @click="run(nodes)">▶️</button>
       </Panel>
     </VueFlow>
   </div>
@@ -81,12 +82,42 @@ function handleLayout(direction) {
 
 <style>
 .layoutflow {
+  background-color: #1a192b;
   height: 100%;
   width: 100%;
 }
 
-.layoutflow .vue-flow .vue-flow__edge-path {
-  stroke: #10b981;
-  stroke-width: 2px;
+.process-panel,
+.layout-panel {
+  display: flex;
+  gap: 10px;
+}
+
+.process-panel button,
+.layout-panel button {
+  border: none;
+  padding: 10px;
+  cursor: pointer;
+  background-color: #2d3748;
+  border-radius: 8px;
+  color: white;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
+
+.process-panel button {
+  font-size: 24px;
+  width: 50px;
+  height: 50px;
+}
+
+.process-panel button:hover,
+.layout-panel button:hover {
+  background-color: #4b5563;
+  transition: background-color 0.2s;
+}
+
+.process-panel button:disabled {
+  background-color: #4b5563;
+  cursor: not-allowed;
 }
 </style>

docs/examples/layout/ProcessNode.vue

@@ -24,12 +24,11 @@ const bgColor = toRef(() => {
     return '#10b981'
   }
 
-  if (props.data.isRunning || props.data.isSkipped) {
-    // pick me a lighter color please
-    return '#6b7280'
+  if (props.data.isCancelled) {
+    return '#fbbf24'
   }
 
-  return '#1a192b'
+  return '#4b5563'
 })
 </script>
 
@@ -38,12 +37,12 @@ const bgColor = toRef(() => {
     <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 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-if="data.isFinished"> &#x1F60E;</span>
+    <span v-else-if="data.isCancelled"> &#x1F6AB;</span>
+    <span v-else> &#x1F4E6;</span>
   </div>
 </template>
 
@@ -51,22 +50,22 @@ const bgColor = toRef(() => {
 .process-node {
   padding: 10px;
   color: white;
-  border: 1px solid #1a192b;
   border-radius: 99px;
-  font-size: 10px;
-  width: 15px;
-  height: 15px;
+  font-size: 12px;
+  width: 18px;
+  height: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }
 
 .spinner {
-  border: 2px solid #f3f3f3;
-  border-top: 2px solid #3498db;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #10b981;
   border-radius: 50%;
-  width: 8px;
-  height: 8px;
+  width: 10px;
+  height: 10px;
   animation: spin 1s linear infinite;
 }
 

docs/examples/layout/initial-elements.js

@@ -67,6 +67,7 @@ export const initialEdges = [
   { id: 'e2-2b', source: '2', target: '2b', type: 'smoothstep', animated: true },
   { id: 'e2-2c', source: '2', target: '2c', type: 'smoothstep', animated: true },
   { id: 'e2c-2d', source: '2c', target: '2d', type: 'smoothstep', animated: true },
+  { id: 'e3-7', source: '3', target: '4', type: 'smoothstep', animated: true },
   { id: 'e4-5', source: '4', target: '5', type: 'smoothstep', animated: true },
   { id: 'e5-6', source: '5', target: '6', type: 'smoothstep', animated: true },
   { id: 'e5-7', source: '5', target: '7', type: 'smoothstep', animated: true },

docs/examples/layout/useRunProcess.js

@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { ref, toRef, toValue } from 'vue'
 import { useVueFlow } from '@vue-flow/core'
 
 /**
@@ -9,80 +9,112 @@ import { useVueFlow } from '@vue-flow/core'
  *
  * When a node has multiple descendants, it will run them in parallel.
  */
-export function useRunProcess() {
+export function useRunProcess(dagreGraph) {
   const { updateNodeData } = useVueFlow()
 
-  const running = ref(false)
-  const executedNodes = new Set()
+  const graph = toRef(() => toValue(dagreGraph))
 
-  async function runNode(node, dagreGraph) {
+  const isRunning = ref(false)
+  const executedNodes = new Set()
+  const runningTasks = new Map()
+
+  async function runNode(node) {
     if (executedNodes.has(node.id)) {
       return
     }
 
     executedNodes.add(node.id)
 
-    updateNodeData(node.id, { isRunning: true, isFinished: false, hasError: false })
+    updateNodeData(node.id, { isRunning: true, isFinished: false, hasError: false, isCancelled: 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))
+    return new Promise((resolve) => {
+      const timeout = setTimeout(async () => {
+        const children = graph.value.successors(node.id)
 
-    const children = dagreGraph.successors(node.id)
+        // Randomly decide whether the node will throw an error
+        const willThrowError = Math.random() < 0.15
 
-    // Randomly decide whether the node will throw an error
-    const willThrowError = Math.random() < 0.15
+        if (willThrowError) {
+          updateNodeData(node.id, { isRunning: false, hasError: true })
 
-    if (willThrowError) {
-      updateNodeData(node.id, { isRunning: false, hasError: true })
+          await skipDescendants(node.id)
+          runningTasks.delete(node.id)
 
-      await skipDescendants(node.id, dagreGraph)
-      return
-    }
+          resolve()
+          return
+        }
 
-    updateNodeData(node.id, { isRunning: false, isFinished: true })
+        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)
-      }),
-    )
+        runningTasks.delete(node.id)
+
+        if (children.length > 0) {
+          // Run the process on the children in parallel
+          await Promise.all(children.map((id) => runNode({ id })))
+        }
+
+        resolve()
+      }, delay)
+
+      runningTasks.set(node.id, timeout)
+    })
   }
 
-  async function run(nodes, dagreGraph) {
-    if (running.value) {
+  async function run(nodes) {
+    if (isRunning.value) {
       return
     }
 
     reset(nodes)
 
-    running.value = true
+    isRunning.value = true
 
     // Get all starting nodes (nodes with no predecessors)
-    const startingNodes = nodes.filter((node) => dagreGraph.predecessors(node.id)?.length === 0)
+    const startingNodes = nodes.filter((node) => graph.value.predecessors(node.id)?.length === 0)
 
     // Run the process on all starting nodes in parallel
-    await Promise.all(startingNodes.map((node) => runNode(node, dagreGraph)))
+    await Promise.all(startingNodes.map(runNode))
 
-    running.value = false
-    executedNodes.clear()
+    clear()
   }
 
   function reset(nodes) {
+    clear()
+
     for (const node of nodes) {
-      updateNodeData(node.id, { isRunning: false, isFinished: false, hasError: false, isSkipped: false })
+      updateNodeData(node.id, { isRunning: false, isFinished: false, hasError: false, isSkipped: false, isCancelled: false })
     }
   }
 
-  async function skipDescendants(nodeId, dagreGraph) {
-    const children = dagreGraph.successors(nodeId)
+  async function skipDescendants(nodeId) {
+    const children = graph.value.successors(nodeId)
 
     for (const child of children) {
       updateNodeData(child, { isRunning: false, isSkipped: true })
-      await skipDescendants(child, dagreGraph)
+      await skipDescendants(child)
     }
   }
 
-  return { run, running }
+  function stop() {
+    isRunning.value = false
+
+    for (const [nodeId, task] of runningTasks) {
+      clearTimeout(task)
+      runningTasks.delete(nodeId)
+      updateNodeData(nodeId, { isRunning: false, isFinished: false, hasError: false, isSkipped: false, isCancelled: true })
+      skipDescendants(nodeId)
+    }
+
+    executedNodes.clear()
+  }
+
+  function clear() {
+    isRunning.value = false
+    executedNodes.clear()
+    runningTasks.clear()
+  }
+
+  return { run, stop, reset, isRunning }
 }