chore(docs): update layout example styles

examples/vite/src/Layouting/LayoutingExample.vue

@@ -1,9 +1,6 @@
 <script lang="ts" setup>
 import dagre from 'dagre'
 import { ConnectionMode, Panel, Position, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Controls } from '@vue-flow/controls'
-
-import '@vue-flow/controls/dist/style.css'
 
 import { initialEdges, initialNodes } from './initial-elements'
 import { useRunProcess } from './useRunProcess'
@@ -18,7 +15,7 @@ const dagreGraph = ref(new dagre.graphlib.Graph())
 
 dagreGraph.value.setDefaultEdgeLabel(() => ({}))
 
-const { run } = useRunProcess()
+const { run, stop, isRunning } = useRunProcess(dagreGraph)
 
 const { findNode, fitView } = useVueFlow()
 
@@ -62,18 +59,19 @@ function handleLayout(direction: 'TB' | 'LR') {
 
 <template>
   <div class="layoutflow">
-    <VueFlow :nodes="nodes" :edges="edges" :connection-mode="ConnectionMode.Loose" @nodes-initialized="handleLayout('TB')">
+    <VueFlow :nodes="nodes" :edges="edges" :connection-mode="ConnectionMode.Loose" @nodes-initialized="handleLayout('LR')">
       <template #node-process="props">
         <ProcessNode v-bind="props" />
       </template>
 
-      <Controls />
+      <Panel class="layout-panel" position="top-right">
+        <button @click="handleLayout('TB')">vertical</button>
+        <button @click="handleLayout('LR')">horizontal</button>
+      </Panel>
 
-      <Panel style="display: flex; gap: 10px" position="top-right">
-        <button @click="handleLayout('TB')">vertical layout</button>
-        <button @click="handleLayout('LR')">horizontal layout</button>
-
-        <button @click="run(nodes, dagreGraph)">Run</button>
+      <Panel class="process-panel" position="bottom-right">
+        <button v-if="isRunning" @click="stop">🛑</button>
+        <button v-else @click="run(nodes)">▶️</button>
       </Panel>
     </VueFlow>
   </div>
@@ -81,7 +79,42 @@ function handleLayout(direction: 'TB' | 'LR') {
 
 <style>
 .layoutflow {
+  background-color: #1a192b;
   height: 100%;
   width: 100%;
 }
+
+.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>

examples/vite/src/Layouting/ProcessNode.vue

@@ -13,11 +13,11 @@ const bgColor = toRef(() => {
     return '#10b981'
   }
 
-  if (props.data.isRunning || props.data.isSkipped) {
-    return '#6b7280'
+  if (props.data.isCancelled) {
+    return '#fbbf24'
   }
 
-  return '#1a192b'
+  return '#4b5563'
 })
 </script>
 
@@ -26,12 +26,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>
 
@@ -39,22 +39,22 @@ const bgColor = toRef(() => {
 .process-node {
   padding: 10px;
   color: white;
-  border: 1px solid #1a192b;
+  border: 1px solid #4b5563;
   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;
 }
 
 .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;
 }
 

examples/vite/src/Layouting/initial-elements.ts

@@ -6,7 +6,6 @@ const type: string = 'process'
 export const initialNodes: Node[] = [
   {
     id: '1',
-    label: 'Start',
     position,
     type,
   },
@@ -69,6 +68,7 @@ export const initialEdges: Edge[] = [
   { 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 },

examples/vite/src/Layouting/useRunProcess.ts

@@ -1,5 +1,7 @@
+import type dagre from 'dagre'
 import type { Node } from '@vue-flow/core'
 import { useVueFlow } from '@vue-flow/core'
+import type { MaybeRefOrGetter } from 'vue'
 
 /**
  * Composable to simulate running a process tree.
@@ -9,80 +11,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: MaybeRefOrGetter<dagre.graphlib.Graph>) {
   const { updateNodeData } = useVueFlow()
 
-  const running = ref(false)
-  const executedNodes = new Set<string>()
+  const graph = toRef(() => toValue(dagreGraph))
 
-  async function runNode(node: { id: string }, dagreGraph: dagre.graphlib.Graph) {
+  const isRunning = ref(false)
+  const executedNodes = new Set<string>()
+  const runningTasks = new Map<string, NodeJS.Timeout>()
+
+  async function runNode(node: { id: string }) {
     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<void>((resolve) => {
+      const timeout = setTimeout(async () => {
+        const children = graph.value.successors(node.id) as unknown as string[]
 
-    const children = dagreGraph.successors(node.id) as unknown as string[]
+        // 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 })
+        console.log(`Node ${node.id} finished`)
+        runningTasks.delete(node.id)
 
-    // Run the process on the children in parallel
-    await Promise.all(
-      children.map((id) => {
-        return runNode({ id }, dagreGraph)
-      }),
-    )
+        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: Node[], dagreGraph: dagre.graphlib.Graph) {
-    if (running.value) {
+  async function run(nodes: Node[]) {
+    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: Node[]) {
+    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: string, dagreGraph: dagre.graphlib.Graph) {
-    const children = dagreGraph.successors(nodeId) as unknown as string[]
+  async function skipDescendants(nodeId: string) {
+    const children = graph.value.successors(nodeId) as unknown as string[]
 
     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 }
 }