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>

docs/examples/index.ts

@@ -137,9 +137,6 @@ export const exampleImports = {
     'useLayout.js': useLayout,
     'Icon.vue': LayoutIcon,
     'additionalImports': {
-      '@vueuse/core': 'https://cdn.jsdelivr.net/npm/@vueuse/core@latest/index.mjs',
-      '@vueuse/shared': 'https://cdn.jsdelivr.net/npm/@vueuse/shared@latest/index.mjs',
-      'vue-demi': 'https://cdn.jsdelivr.net/npm/vue-demi@latest/lib/index.mjs',
       '@dagrejs/dagre': 'https://cdn.jsdelivr.net/npm/@dagrejs/dagre@1.1.2/+esm',
     },
   },

docs/examples/layout/AnimationEdge.vue

@@ -1,7 +1,6 @@
 <script setup>
-import { computed, nextTick, ref, toRef, watch } from 'vue'
+import { computed, ref, toRef, watch } from 'vue'
 import { BaseEdge, EdgeLabelRenderer, Position, getSmoothStepPath, useNodesData, useVueFlow } from '@vue-flow/core'
-import { TransitionPresets, executeTransition } from '@vueuse/core'
 
 const props = defineProps({
   id: {
@@ -42,21 +41,17 @@ const props = defineProps({
   },
 })
 
-const { findEdge } = useVueFlow()
+const { updateEdgeData } = useVueFlow()
 
 const nodesData = useNodesData([props.target, props.source])
 
-const edgePoint = ref(0)
+const labelRef = ref()
 
 const edgeRef = ref()
 
-const labelPosition = ref({ x: 0, y: 0 })
+const targetNodeData = computed(() => nodesData.value[0].data)
 
-const currentLength = ref(0)
+const sourceNodeData = computed(() => nodesData.value[1].data)
-
-const targetNodeData = toRef(() => nodesData.value[0].data)
-
-const sourceNodeData = toRef(() => nodesData.value[1].data)
 
 const isFinished = toRef(() => sourceNodeData.value.isFinished)
 
@@ -64,7 +59,11 @@ const isCancelled = toRef(() => targetNodeData.value.isCancelled)
 
 const isAnimating = ref(false)
 
-const edgeColor = toRef(() => {
+let animation = null
+
+const path = computed(() => getSmoothStepPath(props))
+
+const edgeColor = computed(() => {
   if (targetNodeData.value.hasError) {
     return '#f87171'
   }
@@ -84,42 +83,14 @@ const edgeColor = toRef(() => {
   return '#6b7280'
 })
 
-const path = computed(() => getSmoothStepPath(props))
-
 watch(isCancelled, (isCancelled) => {
   if (isCancelled) {
-    reset()
+    animation?.cancel()
   }
 })
 
 watch(isAnimating, (isAnimating) => {
-  const edge = findEdge(props.id)
+  updateEdgeData(props.id, { isAnimating })
-
-  if (edge) {
-    // we set the `isAnimating` flag, so we can wait until the next node gets executed
-    edge.data = {
-      ...edge.data,
-      isAnimating,
-    }
-  }
-})
-
-watch(edgePoint, (point) => {
-  const pathEl = edgeRef.value?.pathEl
-
-  if (!pathEl || point === 0 || !isAnimating.value) {
-    return
-  }
-
-  const nextLength = pathEl.getTotalLength()
-
-  // if length changed, restart animation
-  if (currentLength.value !== nextLength) {
-    runAnimation()
-    return
-  }
-
-  labelPosition.value = pathEl.getPointAtLength(point)
 })
 
 watch(isFinished, (isFinished) => {
@@ -128,7 +99,7 @@ watch(isFinished, (isFinished) => {
   }
 })
 
-async function runAnimation() {
+function runAnimation() {
   const pathEl = edgeRef.value?.pathEl
 
   if (!pathEl) {
@@ -137,35 +108,26 @@ async function runAnimation() {
 
   const totalLength = pathEl.getTotalLength()
 
-  // if animation restarted, use last edgePoint value to continue from
-  const from = edgePoint.value || 0
-
-  // update initial label position
-  labelPosition.value = pathEl.getPointAtLength(from)
-
   isAnimating.value = true
 
-  // update currentLength value, so we can check if the path length changed during animation
+  const keyframes = [{ offsetDistance: '0%' }, { offsetDistance: '100%' }]
-  if (currentLength.value !== totalLength) {
-    currentLength.value = totalLength
-  }
 
-  await executeTransition(edgePoint, from, totalLength, {
+  // use path length as a possible measure for the animation duration
-    transition: TransitionPresets.easeInOutCubic,
+  const pathLengthDuration = totalLength * 10
-    duration: Math.max(1500, totalLength / 2),
+
-    abort: () => !isAnimating.value,
+  animation = labelRef.value.animate(keyframes, {
+    duration: Math.min(Math.max(pathLengthDuration, 1500), 3000), // clamp duration between 1.5s and 3s
+    direction: 'normal',
+    easing: 'ease-in-out',
+    iterations: 1,
   })
 
-  reset()
+  animation.onfinish = handleAnimationEnd
+  animation.oncancel = handleAnimationEnd
 }
 
-function reset() {
+function handleAnimationEnd() {
-  nextTick(() => {
+  isAnimating.value = false
-    edgePoint.value = 0
-    currentLength.value = 0
-    labelPosition.value = { x: 0, y: 0 }
-    isAnimating.value = false
-  })
 }
 </script>
 
@@ -179,10 +141,18 @@ export default {
 <template>
   <BaseEdge :id="id" ref="edgeRef" :path="path[0]" :style="{ stroke: edgeColor }" />
 
-  <EdgeLabelRenderer v-if="isAnimating">
+  <EdgeLabelRenderer>
     <div
-      :style="{ transform: `translate(-50%, -50%) translate(${labelPosition.x}px,${labelPosition.y}px)` }"
+      ref="labelRef"
-      class="nodrag nopan animated-edge-label"
+      :style="{
+        visibility: isAnimating ? 'visible' : 'hidden',
+        position: 'absolute',
+        zIndex: 1,
+        offsetPath: `path('${path[0]}')`,
+        offsetRotate: '0deg',
+        offsetAnchor: 'center',
+      }"
+      class="animated-edge-label"
     >
       <span class="truck">
         <span class="box">📦</span>
@@ -192,12 +162,7 @@ export default {
   </EdgeLabelRenderer>
 </template>
 
-<style>
+<style scoped>
-.animated-edge-label {
-  position: absolute;
-  z-index: 100;
-}
-
 .truck {
   position: relative;
   display: inline-block;

docs/examples/layout/ProcessNode.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { toRef } from 'vue'
+import { computed, toRef } from 'vue'
 import { Handle, useHandleConnections } from '@vue-flow/core'
 
 const props = defineProps({
@@ -27,7 +27,7 @@ const isSender = toRef(() => sourceConnections.value.length <= 0)
 
 const isReceiver = toRef(() => targetConnections.value.length <= 0)
 
-const bgColor = toRef(() => {
+const bgColor = computed(() => {
   if (isSender.value) {
     return '#2563eb'
   }
@@ -47,7 +47,7 @@ const bgColor = toRef(() => {
   return '#4b5563'
 })
 
-const processLabel = toRef(() => {
+const processLabel = computed(() => {
   if (props.data.hasError) {
     return '❌'
   }
@@ -77,6 +77,7 @@ const processLabel = toRef(() => {
     <Handle v-if="!isSender" type="target" :position="targetPosition">
       <span v-if="!data.isRunning && !data.isFinished && !data.isCancelled && !data.isSkipped && !data.hasError">📥 </span>
     </Handle>
+
     <Handle v-if="!isReceiver" type="source" :position="sourcePosition" />
 
     <div v-if="!isSender && data.isRunning" class="spinner" />

examples/vite/src/Basic/Basic.vue

@@ -15,7 +15,7 @@ const elements = ref<Elements>([
   { id: 'e1-3', source: '1', target: '3' },
 ])
 
-const { onConnect, addEdges, setTransform, toObject } = useVueFlow({
+const { onConnect, addEdges, setViewport, toObject } = useVueFlow({
   minZoom: 0.2,
   maxZoom: 4,
 })
@@ -36,8 +36,8 @@ function updatePos() {
 function logToObject() {
   return console.log(toObject())
 }
-function resetTransform() {
+function resetViewport() {
-  return setTransform({ x: 0, y: 0, zoom: 1 })
+  return setViewport({ x: 0, y: 0, zoom: 1 })
 }
 function toggleclass() {
   return elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
@@ -50,7 +50,7 @@ function toggleclass() {
     <MiniMap />
     <Controls />
     <Panel position="top-right" style="display: flex; gap: 5px">
-      <button @click="resetTransform">reset transform</button>
+      <button @click="resetViewport">reset viewport</button>
       <button @click="updatePos">change pos</button>
       <button @click="toggleclass">toggle class</button>
       <button @click="logToObject">toObject</button>

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) => {
+watch(
-  const pathEl = edgeRef.value?.pathEl
+  isFinished,
-
+  (isFinished) => {
-  if (!pathEl || point === 0) {
+    if (isFinished) {
-    return
+      runAnimation()
-  }
+    }
-
+  },
-  const currLength = pathEl.getTotalLength()
+  { immediate: true },
-
+)
-  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
-  }
 
+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) {
+    if (animation) {
-    currentLength.value = totalLength
+      animation.onfinish = () => {
-  }
+        isAnimating.value = false
-
+      }
-  await executeTransition(edgePoint, from, totalLength, {
+    }
-    transition: TransitionPresets.easeInOutCubic,
   })
-
-  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)`,
+        offsetPath: `path('${path[0]}')`,
-        pointerEvents: 'all',
+        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
+}

examples/vite/src/SaveRestore/Controls.vue

@@ -1,21 +1,20 @@
 <script lang="ts" setup>
-import type { FlowExportObject } from '@vue-flow/core'
+import type { Edge, FlowExportObject, Node } from '@vue-flow/core'
 import { useVueFlow } from '@vue-flow/core'
 
 const flowKey = 'example-flow'
 
-const state = useStorage<FlowExportObject | null>(flowKey, {
+const state = useStorage(flowKey, {
-  nodes: [],
+  nodes: [] as Node[],
-  edges: [],
+  edges: [] as Edge[],
-  position: [NaN, NaN],
+  viewport: { x: 0, y: 0, zoom: 1 },
-  zoom: 1,
+} as FlowExportObject)
-})
 
 function getNodeId() {
   return `randomnode_${+new Date()}`
 }
 
-const { addNodes, setNodes, setEdges, toObject, dimensions, setTransform } = useVueFlow()
+const { addNodes, setNodes, setEdges, toObject, dimensions, setViewport } = useVueFlow()
 
 function onSave() {
   state.value = toObject()
@@ -31,7 +30,7 @@ function onRestore() {
 
     setEdges(flow.edges)
 
-    setTransform({ x, y, zoom: flow.zoom || 0 })
+    setViewport({ x, y, zoom: flow.zoom || 0 })
   }
 }