chore(docs): cancel upcoming tasks if stopped

docs/examples/layout/AnimationEdge.vue

@@ -60,6 +60,8 @@ const sourceNodeData = toRef(() => nodesData.value[1])
 
 const isFinished = toRef(() => sourceNodeData.value.isFinished)
 
+const isCancelled = toRef(() => targetNodeData.value.isCancelled)
+
 const isAnimating = ref(false)
 
 const edgeColor = toRef(() => {
@@ -84,6 +86,12 @@ const edgeColor = toRef(() => {
 
 const path = computed(() => getSmoothStepPath(props))
 
+watch(isCancelled, (isCancelled) => {
+  if (isCancelled) {
+    isAnimating.value = false
+  }
+})
+
 watch(isAnimating, (isAnimating) => {
   const edge = findEdge(props.id)
 
@@ -98,7 +106,7 @@ watch(isAnimating, (isAnimating) => {
 watch(edgePoint, (point) => {
   const pathEl = edgeRef.value?.pathEl
 
-  if (!pathEl || point === 0) {
+  if (!pathEl || point === 0 || !isAnimating.value) {
     return
   }
 

docs/examples/layout/useRunProcess.js

@@ -15,18 +15,26 @@ export function useRunProcess({ dagreGraph, cancelOnError = true }) {
   const graph = toRef(() => toValue(dagreGraph))
 
   const isRunning = ref(false)
+
   const executedNodes = new Set()
+
   const runningTasks = new Map()
 
+  const upcomingTasks = new Set()
+
   async function runNode(node, isStart = false) {
     if (executedNodes.has(node.id)) {
       return
     }
 
+    upcomingTasks.add(node.id)
+
     const incomers = getConnectedEdges(node.id).filter((connection) => connection.target === node.id)
 
     await Promise.all(incomers.map((incomer) => until(() => !incomer.data.isAnimating)))
 
+    upcomingTasks.clear()
+
     if (!isRunning.value) {
       // The process was stopped
       return
@@ -114,6 +122,13 @@ export function useRunProcess({ dagreGraph, cancelOnError = true }) {
   function stop() {
     isRunning.value = false
 
+    for (const nodeId of upcomingTasks) {
+      clearTimeout(runningTasks.get(nodeId))
+      runningTasks.delete(nodeId)
+      updateNodeData(nodeId, { isRunning: false, isFinished: false, hasError: false, isSkipped: false, isCancelled: true })
+      skipDescendants(nodeId)
+    }
+
     for (const [nodeId, task] of runningTasks) {
       clearTimeout(task)
       runningTasks.delete(nodeId)
@@ -122,6 +137,7 @@ export function useRunProcess({ dagreGraph, cancelOnError = true }) {
     }
 
     executedNodes.clear()
+    upcomingTasks.clear()
   }
 
   function clear() {