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

chore(docs): simplify animated layout example (#1747)

Browse Source 
* chore(examples): update ts example of layouting

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

* chore(docs): cleanup animated layout 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
2025-01-13 00:22:13 +01:00
committed by GitHub
parent 25f9dd1dd9
commit e94611a3b0
25 changed files with 1059 additions and 684 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/examples/layout/ProcessNode.vue
+35 -37
View File
@@ -1,6 +1,7 @@
<script setup>
import { computed, toRef } from 'vue'
import { Handle, useNodeConnections } from '@vue-flow/core'
import { ProcessStatus } from './useRunProcess'
const props = defineProps({
data: {
@@ -23,64 +24,61 @@ const targetConnections = useNodeConnections({
handleType: 'source',
})
const isSender = toRef(() => sourceConnections.value.length <= 0)
const isStartNode = toRef(() => sourceConnections.value.length <= 0)
const isReceiver = toRef(() => targetConnections.value.length <= 0)
const isEndNode = toRef(() => targetConnections.value.length <= 0)
const status = toRef(() => props.data.status)
const bgColor = computed(() => {
if (isSender.value) {
if (isStartNode.value) {
return '#2563eb'
}
if (props.data.hasError) {
return '#f87171'
switch (status.value) {
case ProcessStatus.ERROR:
return '#f87171'
case ProcessStatus.FINISHED:
return '#42B983'
case ProcessStatus.CANCELLED:
return '#fbbf24'
default:
return '#4b5563'
}
if (props.data.isFinished) {
return '#42B983'
}
if (props.data.isCancelled) {
return '#fbbf24'
}
return '#4b5563'
})
const processLabel = computed(() => {
if (props.data.hasError) {
return '❌'
}
if (props.data.isSkipped) {
return '🚧'
}
if (props.data.isCancelled) {
return '🚫'
}
if (isSender.value) {
if (isStartNode.value) {
return '📦'
}
if (props.data.isFinished) {
return '😎'
switch (status.value) {
case ProcessStatus.ERROR:
return '❌'
case ProcessStatus.SKIPPED:
return '🚧'
case ProcessStatus.CANCELLED:
return '🚫'
case ProcessStatus.FINISHED:
return '😎'
default:
return '🏠'
}
return '🏠'
})
</script>
<template>
<div class="process-node" :style="{ backgroundColor: bgColor, boxShadow: data.isRunning ? '0 0 10px rgba(0, 0, 0, 0.5)' : '' }">
<Handle v-if="!isSender" type="target" :position="targetPosition">
<span v-if="!data.isRunning && !data.isFinished && !data.isCancelled && !data.isSkipped && !data.hasError">📥 </span>
<div
class="process-node"
:style="{ backgroundColor: bgColor, boxShadow: status === ProcessStatus.RUNNING ? '0 0 10px rgba(0, 0, 0, 0.5)' : '' }"
>
<Handle v-if="!isStartNode" type="target" :position="targetPosition">
<span v-if="status === null">📥 </span>
</Handle>
<Handle v-if="!isReceiver" type="source" :position="sourcePosition" />
<Handle v-if="!isEndNode" type="source" :position="sourcePosition" />
<div v-if="!isSender && data.isRunning" class="spinner" />
<div v-if="status === ProcessStatus.RUNNING" class="spinner" />
<span v-else>
{{ processLabel }}
</span>