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
GitHub
@@ -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',
|
||||
|
||||
7
examples/vite/src/Layouting/types.ts
Normal file
7
examples/vite/src/Layouting/types.ts
Normal file
@@ -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