feat(docs): wait for edge animation to finish to load node

docs/examples/layout/AnimationEdge.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, nextTick, ref, toRef, watch } from 'vue'
-import { BaseEdge, EdgeLabelRenderer, Position, getSmoothStepPath, useNodesData } from '@vue-flow/core'
+import { BaseEdge, EdgeLabelRenderer, Position, getSmoothStepPath, useNodesData, useVueFlow } from '@vue-flow/core'
 import { TransitionPresets, executeTransition } from '@vueuse/core'
 
 const props = defineProps({
@@ -42,6 +42,8 @@ const props = defineProps({
   },
 })
 
+const { findEdge } = useVueFlow()
+
 const nodesData = useNodesData([props.target, props.source])
 
 const edgePoint = ref(0)
@@ -58,6 +60,8 @@ const sourceNodeData = toRef(() => nodesData.value[1])
 
 const isFinished = toRef(() => sourceNodeData.value.isFinished)
 
+const isSkipped = toRef(() => targetNodeData.value.isSkipped)
+
 const isAnimating = ref(false)
 
 const edgeColor = toRef(() => {
@@ -73,7 +77,7 @@ const edgeColor = toRef(() => {
     return '#fbbf24'
   }
 
-  if (targetNodeData.value.isRunning) {
+  if (targetNodeData.value.isRunning || isAnimating.value) {
     return '#2563eb'
   }
 
@@ -82,6 +86,25 @@ const edgeColor = toRef(() => {
 
 const path = computed(() => getSmoothStepPath(props))
 
+watch(isSkipped, (isSkipped) => {
+  if (isSkipped) {
+    edgePoint.value = 0
+    currentLength.value = 0
+    isAnimating.value = false
+  }
+})
+
+watch(isAnimating, (isAnimating) => {
+  const edge = findEdge(props.id)
+
+  if (edge) {
+    edge.data = {
+      ...edge.data,
+      isAnimating,
+    }
+  }
+})
+
 watch(edgePoint, (point) => {
   const pathEl = edgeRef.value?.pathEl
 
@@ -131,6 +154,7 @@ async function runAnimation() {
 
   await executeTransition(edgePoint, from, totalLength, {
     transition: TransitionPresets.easeInOutCubic,
+    duration: Math.max(1500, totalLength / 2),
   })
 
   isAnimating.value = false
@@ -149,14 +173,29 @@ export default {
 
   <EdgeLabelRenderer v-if="isAnimating">
     <div
-      :style="{
-        position: 'absolute',
-        transform: `translate(-50%, -50%) translate(${labelPosition.x}px,${labelPosition.y}px)`,
-        pointerEvents: 'all',
-      }"
-      class="nodrag nopan"
+      :style="{ transform: `translate(-50%, -50%) translate(${labelPosition.x}px,${labelPosition.y}px)` }"
+      class="nodrag nopan animated-edge-label"
     >
-      📦
+      <span class="truck">
+        <span class="box">📦</span>
+        🚚
+      </span>
     </div>
   </EdgeLabelRenderer>
 </template>
+
+<style>
+.animated-edge-label {
+  position: absolute;
+}
+
+.truck {
+  position: relative;
+  display: inline-block;
+}
+
+.box {
+  position: absolute;
+  top: -10px;
+}
+</style>

docs/examples/layout/ProcessNode.vue

@@ -68,13 +68,15 @@ const processLabel = toRef(() => {
     return '😎'
   }
 
-  return '📥'
+  return '🏠'
 })
 </script>
 
 <template>
   <div class="process-node" :style="{ backgroundColor: bgColor }">
-    <Handle v-if="!isSender" type="target" :position="targetPosition" />
+    <Handle v-if="!isSender" type="target" :position="targetPosition">
+      <div>📥</div>
+    </Handle>
     <Handle v-if="!isReceiver" type="source" :position="sourcePosition" />
 
     <div v-if="!isSender && data.isRunning" class="spinner" />
@@ -88,16 +90,23 @@ const processLabel = toRef(() => {
 .process-node {
   padding: 10px;
   color: white;
-  border: 1px solid #4b5563;
   border-radius: 99px;
-  font-size: 12px;
-  width: 18px;
-  height: 18px;
+  font-size: 14px;
+  width: 24px;
+  height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
+.process-node .vue-flow__handle {
+  border: none;
+  height: unset;
+  width: unset;
+  background: transparent;
+  font-size: 12px;
+}
+
 .spinner {
   border: 3px solid #f3f3f3;
   border-top: 3px solid #2563eb;

docs/examples/layout/useRunProcess.js

@@ -10,7 +10,7 @@ import { useVueFlow } from '@vue-flow/core'
  * When a node has multiple descendants, it will run them in parallel.
  */
 export function useRunProcess(dagreGraph) {
-  const { updateNodeData } = useVueFlow()
+  const { updateNodeData, getConnectedEdges } = useVueFlow()
 
   const graph = toRef(() => toValue(dagreGraph))
 
@@ -23,6 +23,15 @@ export function useRunProcess(dagreGraph) {
       return
     }
 
+    const incomers = getConnectedEdges(node.id).filter((connection) => connection.target === node.id)
+
+    await Promise.all(incomers.map((incomer) => until(() => !incomer.data.isAnimating)))
+
+    if (!isRunning.value) {
+      // The process was stopped
+      return
+    }
+
     executedNodes.add(node.id)
 
     updateNodeData(node.id, { isRunning: true, isFinished: false, hasError: false, isCancelled: false })
@@ -121,3 +130,14 @@ export function useRunProcess(dagreGraph) {
 
   return { run, stop, reset, isRunning }
 }
+
+async function until(condition) {
+  return new Promise((resolve) => {
+    const interval = setInterval(() => {
+      if (condition()) {
+        clearInterval(interval)
+        resolve()
+      }
+    }, 100)
+  })
+}