docs(examples): update layouting example (#1576)

* refactor(examples): use offsetPath in layouting example

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* chore(examples): cleanup

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* docs(examples): update layouting example

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

---------

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

examples/vite/src/Layouting/AnimationEdge.vue

@@ -1,94 +1,70 @@
 <script setup lang="ts">
-import type { EdgeProps } from '@vue-flow/core'
+import type { EdgeProps, Node } from '@vue-flow/core'
 import { BaseEdge, EdgeLabelRenderer, getSmoothStepPath, useNodesData } from '@vue-flow/core'
-import { TransitionPresets, executeTransition } from '@vueuse/core'
+import type { ProcessNodeData } from './types'
 
 const props = defineProps<EdgeProps>()
 
-const edgePoint = ref(0)
+const labelRef = ref<HTMLDivElement>()
 
-const sourceNodeData = useNodesData(() => props.source)
+const sourceNodeData = useNodesData<Node<ProcessNodeData>>(() => props.source)
 
-const isFinished = toRef(() => sourceNodeData.value.isFinished)
+const isFinished = toRef(() => sourceNodeData.value?.data.isFinished)
 
 const isAnimating = ref(false)
 
 const edgeColor = toRef(() => {
-  if (sourceNodeData.value.hasError) {
+  if (sourceNodeData.value?.data.hasError) {
     return '#f87171'
   }
 
-  if (sourceNodeData.value.isFinished) {
+  if (sourceNodeData.value?.data.isFinished) {
     return '#10b981'
   }
 
-  if (sourceNodeData.value.isCancelled) {
+  if (sourceNodeData.value?.data.isCancelled) {
     return '#fbbf24'
   }
 
-  if (sourceNodeData.value.isSkipped) {
+  if (sourceNodeData.value?.data.isSkipped) {
     return '#f59e0b'
   }
 
   return '#6b7280'
 })
 
-const edgeRef = ref<InstanceType<typeof BaseEdge>>()
-
-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) {
-    return runAnimation()
-  }
-
-  circlePosition.value = pathEl.getPointAtLength(point)
-})
-
-watch(isFinished, async (isFinished, _, onCleanup) => {
-  if (isFinished) {
-    await runAnimation()
-
-    edgePoint.value = 0
-    currentLength.value = 0
-    circlePosition.value = { x: 0, y: 0 }
-  }
-})
-
-async function runAnimation() {
-  const pathEl = edgeRef.value?.pathEl
-
-  if (!pathEl) {
-    return
-  }
+watch(
+  isFinished,
+  (isFinished) => {
+    if (isFinished) {
+      runAnimation()
+    }
+  },
+  { immediate: true },
+)
 
+function runAnimation() {
   isAnimating.value = true
 
-  const totalLength = pathEl.getTotalLength()
+  // defer to next tick so the labelRef is available
+  nextTick(() => {
+    const keyframes = [{ offsetDistance: '0%' }, { offsetDistance: '100%' }]
 
-  const from = edgePoint.value || 0
+    const animation = labelRef.value?.animate(keyframes, {
+      duration: 1500,
+      direction: 'normal',
+      easing: 'ease-in-out',
+      iterations: 1,
+    })
 
-  if (currentLength.value !== totalLength) {
-    currentLength.value = totalLength
-  }
-
-  await executeTransition(edgePoint, from, totalLength, {
-    transition: TransitionPresets.easeInOutCubic,
+    if (animation) {
+      animation.onfinish = () => {
+        isAnimating.value = false
+      }
+    }
   })
-
-  isAnimating.value = false
 }
 </script>
 
@@ -100,16 +76,17 @@ export default {
 </script>
 
 <template>
-  <BaseEdge v-bind="$attrs" :id="id" ref="edgeRef" :path="path[0]" :marker-end="markerEnd" :style="{ stroke: edgeColor }" />
+  <BaseEdge v-bind="$attrs" :id="id" :path="path[0]" :marker-end="markerEnd" :style="{ stroke: edgeColor }" />
 
   <EdgeLabelRenderer v-if="isAnimating">
     <div
+      ref="labelRef"
       :style="{
         position: 'absolute',
-        transform: `translate(-50%, -50%) translate(${circlePosition.x}px,${circlePosition.y}px)`,
-        pointerEvents: 'all',
+        offsetPath: `path('${path[0]}')`,
+        offsetRotate: '0deg',
+        offsetAnchor: 'center',
       }"
-      class="nodrag nopan"
     >
       📦
     </div>

examples/vite/src/Layouting/ProcessNode.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import type { NodeProps } from '@vue-flow/core'
 import { Handle, useHandleConnections } from '@vue-flow/core'
+import type { ProcessNodeData } from './types'
 
-const props = defineProps<NodeProps>()
+const props = defineProps<NodeProps<ProcessNodeData>>()
 
 const sourceConnections = useHandleConnections({
   type: 'target',

examples/vite/src/Layouting/types.ts

@@ -0,0 +1,7 @@
+export interface ProcessNodeData {
+  hasError: boolean
+  isSkipped: boolean
+  isCancelled: boolean
+  isFinished: boolean
+  isRunning: boolean
+}