chore(docs): colors edges based on target node

docs/examples/layout/AnimationEdge.vue

@@ -12,6 +12,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  target: {
+    type: String,
+    required: true,
+  },
   sourceX: {
     type: Number,
     required: true,
@@ -38,40 +42,44 @@ const props = defineProps({
   },
 })
 
+const nodesData = useNodesData([props.target, props.source])
+
 const edgePoint = ref(0)
 
-const sourceNodeData = useNodesData(() => props.source)
-
-const isFinished = toRef(() => sourceNodeData.value.isFinished)
-
-const isAnimating = ref(false)
-
-const edgeColor = toRef(() => {
-  if (sourceNodeData.value.hasError) {
-    return '#f87171'
-  }
-
-  if (sourceNodeData.value.isFinished) {
-    return '#10b981'
-  }
-
-  if (sourceNodeData.value.isCancelled) {
-    return '#fbbf24'
-  }
-
-  if (sourceNodeData.value.isSkipped) {
-    return '#f59e0b'
-  }
-
-  return '#6b7280'
-})
-
 const edgeRef = ref()
 
 const labelPosition = ref({ x: 0, y: 0 })
 
 const currentLength = ref(0)
 
+const targetNodeData = toRef(() => nodesData.value[0])
+
+const sourceNodeData = toRef(() => nodesData.value[1])
+
+const isFinished = toRef(() => sourceNodeData.value.isFinished)
+
+const isAnimating = ref(false)
+
+const edgeColor = toRef(() => {
+  if (targetNodeData.value.hasError) {
+    return '#f87171'
+  }
+
+  if (targetNodeData.value.isFinished) {
+    return '#10b981'
+  }
+
+  if (targetNodeData.value.isCancelled || targetNodeData.value.isSkipped) {
+    return '#fbbf24'
+  }
+
+  if (targetNodeData.value.isRunning) {
+    return '#2563eb'
+  }
+
+  return '#6b7280'
+})
+
 const path = computed(() => getSmoothStepPath(props))
 
 watch(edgePoint, (point) => {

docs/examples/layout/App.vue

@@ -70,6 +70,7 @@ function handleLayout(direction) {
         <AnimationEdge
           :id="edgeProps.id"
           :source="edgeProps.source"
+          :target="edgeProps.target"
           :source-x="edgeProps.sourceX"
           :source-y="edgeProps.sourceY"
           :targetX="edgeProps.targetX"

docs/examples/layout/ProcessNode.vue

@@ -100,7 +100,7 @@ const processLabel = toRef(() => {
 
 .spinner {
   border: 3px solid #f3f3f3;
-  border-top: 3px solid #10b981;
+  border-top: 3px solid #2563eb;
   border-radius: 50%;
   width: 10px;
   height: 10px;