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>
This commit is contained in:
Braks
@@ -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',
|
||||
},
|
||||
},
|
||||
|
||||
@@ -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 targetNodeData = toRef(() => nodesData.value[0].data)
|
||||
|
||||
const sourceNodeData = toRef(() => nodesData.value[1].data)
|
||||
const sourceNodeData = computed(() => 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)
|
||||
|
||||
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)
|
||||
updateEdgeData(props.id, { isAnimating })
|
||||
})
|
||||
|
||||
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
|
||||
if (currentLength.value !== totalLength) {
|
||||
currentLength.value = totalLength
|
||||
}
|
||||
const keyframes = [{ offsetDistance: '0%' }, { offsetDistance: '100%' }]
|
||||
|
||||
await executeTransition(edgePoint, from, totalLength, {
|
||||
transition: TransitionPresets.easeInOutCubic,
|
||||
duration: Math.max(1500, totalLength / 2),
|
||||
abort: () => !isAnimating.value,
|
||||
// use path length as a possible measure for the animation duration
|
||||
const pathLengthDuration = totalLength * 10
|
||||
|
||||
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() {
|
||||
nextTick(() => {
|
||||
edgePoint.value = 0
|
||||
currentLength.value = 0
|
||||
labelPosition.value = { x: 0, y: 0 }
|
||||
isAnimating.value = false
|
||||
})
|
||||
function handleAnimationEnd() {
|
||||
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)` }"
|
||||
class="nodrag nopan animated-edge-label"
|
||||
ref="labelRef"
|
||||
: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>
|
||||
.animated-edge-label {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
<style scoped>
|
||||
.truck {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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() {
|
||||
return setTransform({ x: 0, y: 0, zoom: 1 })
|
||||
function resetViewport() {
|
||||
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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
export interface ProcessNodeData {
|
||||
hasError: boolean
|
||||
isSkipped: boolean
|
||||
isCancelled: boolean
|
||||
isFinished: boolean
|
||||
isRunning: boolean
|
||||
}
|
||||
@@ -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, {
|
||||
nodes: [],
|
||||
edges: [],
|
||||
position: [NaN, NaN],
|
||||
zoom: 1,
|
||||
})
|
||||
const state = useStorage(flowKey, {
|
||||
nodes: [] as Node[],
|
||||
edges: [] as Edge[],
|
||||
viewport: { x: 0, y: 0, 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 })
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user