alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(docs): add animation edge to layouting example

Browse Source
This commit is contained in:
braks
2024-02-07 22:22:15 +01:00
committed by Braks
parent 43a1c9d2ac
commit 75355b04e7
6 changed files with 157 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
docs/examples/layout/AnimationEdge.vue
View File

@@ -1,6 +1,6 @@
<script setup>
import { computed, ref, toRef, watch } from 'vue'
import { BaseEdge, getSmoothStepPath, useNodesData, useVueFlow } from '@vue-flow/core'
import { BaseEdge, EdgeLabelRenderer, Position, getSmoothStepPath, useNodesData } from '@vue-flow/core'
import { TransitionPresets, executeTransition } from '@vueuse/core'
const props = defineProps({
@@ -8,6 +8,10 @@ const props = defineProps({
type: String,
required: true,
},
source: {
type: String,
required: true,
},
sourceX: {
type: Number,
required: true,
@@ -26,65 +30,45 @@ const props = defineProps({
},
sourcePosition: {
type: String,
required: true,
default: Position.Right,
},
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,
default: Position.Left,
},
})
const { onNodeDrag } = useVueFlow()
const edgePoint = ref(0)
const sourceNodeData = useNodesData(() => props.source)
const isSourceNodeRunning = toRef(() => sourceNodeData.value?.isRunning)
const isFinished = toRef(() => sourceNodeData.value.isFinished)
const isAnimating = ref(false)
const edgeColor = toRef(() => {
if (sourceNodeData.value?.hasError) {
if (sourceNodeData.value.hasError) {
return '#f87171'
}
if (sourceNodeData.value?.isFinished) {
if (sourceNodeData.value.isFinished) {
return '#10b981'
}
if (isSourceNodeRunning.value) {
return '#6b7280'
if (sourceNodeData.value.isCancelled) {
return '#fbbf24'
}
if (sourceNodeData.value?.isSkipped) {
return '#FFCC99'
if (sourceNodeData.value.isSkipped) {
return '#f59e0b'
}
return '#1a192b'
return '#6b7280'
})
const edgeRef = ref()
const circlePosition = ref({ x: 0, y: 0 })
const labelPosition = ref({ x: 0, y: 0 })
const currentLength = ref(0)
@@ -100,43 +84,44 @@ watch(edgePoint, (point) => {
const currLength = pathEl.getTotalLength()
if (currentLength.value !== currLength) {
runAnimation(point)
return
return runAnimation()
}
circlePosition.value = pathEl.getPointAtLength(point)
labelPosition.value = pathEl.getPointAtLength(point)
})
watch(isSourceNodeRunning, (isRunning, _, onCleanup) => {
if (isRunning) {
runAnimation()
watch(isFinished, async (isFinished) => {
if (isFinished) {
await runAnimation()
onCleanup(() => {
edgePoint.value = 0
currentLength.value = 0
circlePosition.value = { x: 0, y: 0 }
})
edgePoint.value = 0
currentLength.value = 0
labelPosition.value = { x: 0, y: 0 }
}
})
function runAnimation(from = 0) {
async function runAnimation() {
const pathEl = edgeRef.value?.pathEl
if (!pathEl) {
return
}
edgePoint.value = 0
isAnimating.value = true
const totalLength = pathEl.getTotalLength()
const from = edgePoint.value || 0
if (currentLength.value !== totalLength) {
currentLength.value = totalLength
}
executeTransition(edgePoint, from, totalLength, {
await executeTransition(edgePoint, from, totalLength, {
transition: TransitionPresets.easeInOutCubic,
})
isAnimating.value = false
}
</script>
@@ -148,14 +133,18 @@ 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" ref="edgeRef" :path="path[0]" :style="{ stroke: edgeColor }" />
<circle
v-if="isSourceNodeRunning"
r="4"
cy="0"
cx="0"
:transform="`translate(${circlePosition.x}, ${circlePosition.y})`"
style="fill: #f59e0b"
/>
<EdgeLabelRenderer v-if="isAnimating">
<div
:style="{
position: 'absolute',
transform: `translate(-50%, -50%) translate(${labelPosition.x}px,${labelPosition.y}px)`,
pointerEvents: 'all',
}"
class="nodrag nopan"
>
📦
</div>
</EdgeLabelRenderer>
</template>

16
docs/examples/layout/App.vue
View File

@@ -4,6 +4,7 @@ import { nextTick, ref } from 'vue'
import { Panel, Position, VueFlow, useVueFlow } from '@vue-flow/core'
import { Background } from '@vue-flow/background'
import ProcessNode from './ProcessNode.vue'
import AnimationEdge from './AnimationEdge.vue'
import { initialEdges, initialNodes } from './initial-elements.js'
import { useRunProcess } from './useRunProcess'
@@ -62,11 +63,20 @@ function handleLayout(direction) {
<div class="layoutflow">
<VueFlow :nodes="nodes" :edges="edges" @nodes-initialized="handleLayout('LR')">
<template #node-process="props">
<ProcessNode v-bind="props" />
<ProcessNode :data="props.data" :source-position="props.sourcePosition" :target-position="props.targetPosition" />
</template>
<template #edge-animation="props">
<AnimationEdge v-bind="props" />
<template #edge-animation="edgeProps">
<AnimationEdge
:id="edgeProps.id"
:source="edgeProps.source"
:source-x="edgeProps.sourceX"
:source-y="edgeProps.sourceY"
:targetX="edgeProps.targetX"
:targetY="edgeProps.targetY"
:source-position="edgeProps.sourcePosition"
:target-position="edgeProps.targetPosition"
/>
</template>
<Background />

56
docs/examples/layout/ProcessNode.vue
View File

@@ -1,6 +1,6 @@
<script setup>
import { toRef } from 'vue'
import { Handle } from '@vue-flow/core'
import { Handle, useHandleConnections } from '@vue-flow/core'
const props = defineProps({
data: {
@@ -15,7 +15,23 @@ const props = defineProps({
},
})
const sourceConnections = useHandleConnections({
type: 'target',
})
const targetConnections = useHandleConnections({
type: 'source',
})
const isSender = toRef(() => sourceConnections.value.length <= 0)
const isReceiver = toRef(() => targetConnections.value.length <= 0)
const bgColor = toRef(() => {
if (isSender.value) {
return '#4b5563'
}
if (props.data.hasError) {
return '#f87171'
}
@@ -30,19 +46,41 @@ const bgColor = toRef(() => {
return '#4b5563'
})
const processLabel = toRef(() => {
if (props.data.hasError) {
return '❌'
}
if (props.data.isSkipped) {
return '🚧'
}
if (props.data.isCancelled) {
return '🚫'
}
if (isSender.value) {
return '📦'
}
if (props.data.isFinished) {
return '😎'
}
return '📥'
})
</script>
<template>
<div class="process-node" :style="{ backgroundColor: bgColor }">
<Handle type="target" :position="targetPosition" />
<Handle type="source" :position="sourcePosition" />
<Handle v-if="!isSender" type="target" :position="targetPosition" />
<Handle v-if="!isReceiver" type="source" :position="sourcePosition" />
<div v-if="data.isRunning" class="spinner" />
<span v-else-if="data.hasError">&#x274C;</span>
<span v-else-if="data.isSkipped">&#x1F6A7;</span>
<span v-else-if="data.isFinished"> &#x1F60E;</span>
<span v-else-if="data.isCancelled"> &#x1F6AB;</span>
<span v-else> &#x1F4E6;</span>
<span v-else>
{{ processLabel }}
</span>
</div>
</template>
@@ -50,6 +88,7 @@ const bgColor = toRef(() => {
.process-node {
padding: 10px;
color: white;
border: 1px solid #4b5563;
border-radius: 99px;
font-size: 12px;
width: 18px;
@@ -57,7 +96,6 @@ const bgColor = toRef(() => {
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.spinner {

46
docs/examples/layout/initial-elements.js
View File

@@ -1,74 +1,74 @@
const position = { x: 0, y: 0 }
const type = 'process'
const nodeType = 'process'
const edgeType = 'animation'
export const initialNodes = [
{
id: '1',
label: 'Start',
position,
type,
type: nodeType,
},
{
id: '2',
position,
type,
type: nodeType,
},
{
id: '2a',
position,
type,
type: nodeType,
},
{
id: '2b',
position,
type,
type: nodeType,
},
{
id: '2c',
position,
type,
type: nodeType,
},
{
id: '2d',
position,
type,
type: nodeType,
},
{
id: '3',
position,
type,
type: nodeType,
},
{
id: '4',
position,
type,
type: nodeType,
},
{
id: '5',
position,
type,
type: nodeType,
},
{
id: '6',
position,
type,
type: nodeType,
},
{
id: '7',
position,
type,
type: nodeType,
},
]
export const initialEdges = [
{ id: 'e1-2', source: '1', target: '2', type: 'smoothstep', animated: true },
{ id: 'e1-3', source: '1', target: '3', type: 'smoothstep', animated: true },
{ id: 'e2-2a', source: '2', target: '2a', type: 'smoothstep', animated: true },
{ id: 'e2-2b', source: '2', target: '2b', type: 'smoothstep', animated: true },
{ id: 'e2-2c', source: '2', target: '2c', type: 'smoothstep', animated: true },
{ id: 'e2c-2d', source: '2c', target: '2d', type: 'smoothstep', animated: true },
{ id: 'e3-7', source: '3', target: '4', type: 'smoothstep', animated: true },
{ id: 'e4-5', source: '4', target: '5', type: 'smoothstep', animated: true },
{ id: 'e5-6', source: '5', target: '6', type: 'smoothstep', animated: true },
{ id: 'e5-7', source: '5', target: '7', type: 'smoothstep', animated: true },
{ id: 'e1-2', source: '1', target: '2', type: edgeType, animated: true },
{ id: 'e1-3', source: '1', target: '3', type: edgeType, animated: true },
{ id: 'e2-2a', source: '2', target: '2a', type: edgeType, animated: true },
{ id: 'e2-2b', source: '2', target: '2b', type: edgeType, animated: true },
{ id: 'e2-2c', source: '2', target: '2c', type: edgeType, animated: true },
{ id: 'e2c-2d', source: '2c', target: '2d', type: edgeType, animated: true },
{ id: 'e3-7', source: '3', target: '4', type: edgeType, animated: true },
{ id: 'e4-5', source: '4', target: '5', type: edgeType, animated: true },
{ id: 'e5-6', source: '5', target: '6', type: edgeType, animated: true },
{ id: 'e5-7', source: '5', target: '7', type: edgeType, animated: true },
]

49
docs/examples/layout/useRunProcess.js
View File

@@ -18,7 +18,7 @@ export function useRunProcess(dagreGraph) {
const executedNodes = new Set()
const runningTasks = new Map()
async function runNode(node) {
async function runNode(node, isStart = false) {
if (executedNodes.has(node.id)) {
return
}
@@ -30,33 +30,36 @@ export function useRunProcess(dagreGraph) {
// Simulate an async process with a random timeout between 1 and 3 seconds
const delay = Math.floor(Math.random() * 2000) + 1000
return new Promise((resolve) => {
const timeout = setTimeout(async () => {
const children = graph.value.successors(node.id)
const timeout = setTimeout(
async () => {
const children = graph.value.successors(node.id)
// Randomly decide whether the node will throw an error
const willThrowError = Math.random() < 0.15
// Randomly decide whether the node will throw an error
const willThrowError = Math.random() < 0.15
if (willThrowError) {
updateNodeData(node.id, { isRunning: false, hasError: true })
if (willThrowError) {
updateNodeData(node.id, { isRunning: false, hasError: true })
await skipDescendants(node.id)
runningTasks.delete(node.id)
resolve()
return
}
updateNodeData(node.id, { isRunning: false, isFinished: true })
await skipDescendants(node.id)
runningTasks.delete(node.id)
if (children.length > 0) {
// Run the process on the children in parallel
await Promise.all(children.map((id) => runNode({ id })))
}
resolve()
return
}
updateNodeData(node.id, { isRunning: false, isFinished: true })
runningTasks.delete(node.id)
if (children.length > 0) {
// Run the process on the children in parallel
await Promise.all(children.map((id) => runNode({ id })))
}
resolve()
}, delay)
},
isStart ? 0 : delay,
)
runningTasks.set(node.id, timeout)
})
@@ -75,7 +78,7 @@ export function useRunProcess(dagreGraph) {
const startingNodes = nodes.filter((node) => graph.value.predecessors(node.id)?.length === 0)
// Run the process on all starting nodes in parallel
await Promise.all(startingNodes.map(runNode))
await Promise.all(startingNodes.map((node) => runNode(node, true)))
clear()
}