examples: animation edge

docs/examples/index.ts

@@ -18,7 +18,7 @@ import { IntersectionApp, IntersectionCSS } from './intersection'
 import { SnapToHandleApp, SnappableConnectionLine } from './connection-radius'
 import { NodeResizerApp, ResizableNode } from './node-resizer'
 import { ToolbarApp, ToolbarNode } from './node-toolbar'
-import { LayoutApp, LayoutElements, LayoutNode, LayoutScript } from './layout'
+import { LayoutApp, LayoutEdge, LayoutElements, LayoutNode, LayoutScript } from './layout'
 
 export const exampleImports = {
   basic: {
@@ -103,8 +103,8 @@ export const exampleImports = {
     'TransitionEdge.vue': TransitionEdge,
     'style.css': TransitionCSS,
     'additionalImports': {
-      '@vueuse/core': 'https://cdn.jsdelivr.net/npm/@vueuse/core@9.3.0/index.mjs',
-      '@vueuse/shared': 'https://cdn.jsdelivr.net/npm/@vueuse/shared@9.3.0/index.mjs',
+      '@vueuse/core': 'https://cdn.jsdelivr.net/npm/@vueuse/core@10.7.0/index.mjs',
+      '@vueuse/shared': 'https://cdn.jsdelivr.net/npm/@vueuse/shared@10.7.0/index.mjs',
       'vue-demi': 'https://cdn.jsdelivr.net/npm/vue-demi@0.13.11/lib/index.mjs',
     },
   },
@@ -128,9 +128,13 @@ export const exampleImports = {
     'App.vue': LayoutApp,
     'initial-elements.js': LayoutElements,
     'ProcessNode.vue': LayoutNode,
+    'AnimationEdge.vue': LayoutEdge,
     'useRunProcess.js': LayoutScript,
     'additionalImports': {
-      dagre: 'https://cdn.skypack.dev/pin/dagre@v0.8.5-NOlknF82nBdUHQKLJWRC/mode=imports,min/optimized/dagre.js',
+      '@vueuse/core': 'https://cdn.jsdelivr.net/npm/@vueuse/core@10.7.0/index.mjs',
+      '@vueuse/shared': 'https://cdn.jsdelivr.net/npm/@vueuse/shared@10.7.0/index.mjs',
+      'vue-demi': 'https://cdn.jsdelivr.net/npm/vue-demi@0.13.11/lib/index.mjs',
+      'dagre': 'https://cdn.skypack.dev/pin/dagre@v0.8.5-NOlknF82nBdUHQKLJWRC/mode=imports,min/optimized/dagre.js',
     },
   },
 }

docs/examples/layout/AnimationEdge.vue

@@ -0,0 +1,161 @@
+<script setup>
+import { computed, ref, toRef, watch } from 'vue'
+import { BaseEdge, getSmoothStepPath, useNodesData, useVueFlow } from '@vue-flow/core'
+import { TransitionPresets, executeTransition } from '@vueuse/core'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  sourceX: {
+    type: Number,
+    required: true,
+  },
+  sourceY: {
+    type: Number,
+    required: true,
+  },
+  targetX: {
+    type: Number,
+    required: true,
+  },
+  targetY: {
+    type: Number,
+    required: true,
+  },
+  sourcePosition: {
+    type: String,
+    required: true,
+  },
+  targetPosition: {
+    type: String,
+    required: true,
+  },
+  data: {
+    type: Object,
+    required: false,
+  },
+  markerEnd: {
+    type: String,
+    required: false,
+  },
+  style: {
+    type: Object,
+    required: false,
+  },
+  sourceHandleId: {
+    type: String,
+    required: false,
+  },
+  targetHandleId: {
+    type: String,
+    required: false,
+  },
+})
+
+const { onNodeDrag } = useVueFlow()
+
+const edgePoint = ref(0)
+
+const sourceNodeData = useNodesData(() => props.source)
+
+const isSourceNodeRunning = toRef(() => sourceNodeData.value?.isRunning)
+
+const edgeColor = toRef(() => {
+  if (sourceNodeData.value?.hasError) {
+    return '#f87171'
+  }
+
+  if (sourceNodeData.value?.isFinished) {
+    return '#10b981'
+  }
+
+  if (isSourceNodeRunning.value) {
+    return '#6b7280'
+  }
+
+  if (sourceNodeData.value?.isSkipped) {
+    return '#FFCC99'
+  }
+
+  return '#1a192b'
+})
+
+const edgeRef = ref()
+
+const circlePosition = ref({ x: 0, y: 0 })
+
+const currentLength = ref(0)
+
+const path = computed(() => getSmoothStepPath(props))
+
+watch(edgePoint, (point) => {
+  const pathEl = edgeRef.value?.pathEl
+
+  if (!pathEl || point === 0) {
+    return
+  }
+
+  const currLength = pathEl.getTotalLength()
+
+  if (currentLength.value !== currLength) {
+    runAnimation(point)
+    return
+  }
+
+  circlePosition.value = pathEl.getPointAtLength(point)
+})
+
+watch(isSourceNodeRunning, (isRunning, _, onCleanup) => {
+  if (isRunning) {
+    runAnimation()
+
+    onCleanup(() => {
+      edgePoint.value = 0
+      currentLength.value = 0
+      circlePosition.value = { x: 0, y: 0 }
+    })
+  }
+})
+
+function runAnimation(from = 0) {
+  const pathEl = edgeRef.value?.pathEl
+
+  if (!pathEl) {
+    return
+  }
+
+  edgePoint.value = 0
+
+  const totalLength = pathEl.getTotalLength()
+
+  if (currentLength.value !== totalLength) {
+    currentLength.value = totalLength
+  }
+
+  executeTransition(edgePoint, from, totalLength, {
+    transition: TransitionPresets.easeInOutCubic,
+  })
+}
+</script>
+
+<script>
+export default {
+  name: 'AnimationEdge',
+  inheritAttrs: false,
+}
+</script>
+
+<template>
+  <BaseEdge v-bind="$attrs" :id="id" ref="edgeRef" :path="path[0]" :marker-end="markerEnd" :style="{ stroke: edgeColor }" />
+
+  <circle
+    v-if="isSourceNodeRunning"
+    r="4"
+    cy="0"
+    cx="0"
+    :transform="`translate(${circlePosition.x}, ${circlePosition.y})`"
+    style="fill: #f59e0b"
+  />
+</template>

docs/examples/layout/App.vue

@@ -65,6 +65,10 @@ function handleLayout(direction) {
         <ProcessNode v-bind="props" />
       </template>
 
+      <template #edge-animation="props">
+        <AnimationEdge v-bind="props" />
+      </template>
+
       <Background />
 
       <Panel class="layout-panel" position="top-left">

docs/examples/layout/index.ts

@@ -1,4 +1,5 @@
 export { default as LayoutApp } from './App.vue?raw'
 export { default as LayoutElements } from './initial-elements.js?raw'
 export { default as LayoutNode } from './ProcessNode.vue?raw'
+export { default as LayoutEdge } from './AnimationEdge.vue?raw'
 export { default as LayoutScript } from './useRunProcess.js?raw'