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

chore(docs): update layout example styles

Browse Source
This commit is contained in:
braks
2024-02-06 23:58:02 +01:00
committed by Braks
parent 291095110a
commit f9e4d84297
8 changed files with 252 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/examples/layout/App.vue
+39 -8
View File
@@ -14,9 +14,7 @@ const edges = ref(initialEdges)
const dagreGraph = ref(new dagre.graphlib.Graph()) const dagreGraph = ref(new dagre.graphlib.Graph())
dagreGraph.value.setDefaultEdgeLabel(() => ({})) const { run, stop, isRunning } = useRunProcess(dagreGraph)
const { run } = useRunProcess()
const { findNode, fitView } = useVueFlow() const { findNode, fitView } = useVueFlow()
@@ -69,11 +67,14 @@ function handleLayout(direction) {
<Background /> <Background />
<Panel style="display: flex; gap: 1rem" position="top-right"> <Panel class="layout-panel" position="top-left">
<button @click="handleLayout('TB')">vertical</button> <button @click="handleLayout('TB')">vertical</button>
<button @click="handleLayout('LR')">horizontal</button> <button @click="handleLayout('LR')">horizontal</button>
</Panel>
<button @click="run(nodes, dagreGraph)">Run</button> <Panel class="process-panel" position="top-right">
<button v-if="isRunning" @click="stop">🛑</button>
<button v-else @click="run(nodes)">▶️</button>
</Panel> </Panel>
</VueFlow> </VueFlow>
</div> </div>
@@ -81,12 +82,42 @@ function handleLayout(direction) {
<style> <style>
.layoutflow { .layoutflow {
background-color: #1a192b;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.layoutflow .vue-flow .vue-flow__edge-path { .process-panel,
stroke: #10b981; .layout-panel {
stroke-width: 2px; display: flex;
gap: 10px;
}
.process-panel button,
.layout-panel button {
border: none;
padding: 10px;
cursor: pointer;
background-color: #2d3748;
border-radius: 8px;
color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.process-panel button {
font-size: 24px;
width: 50px;
height: 50px;
}
.process-panel button:hover,
.layout-panel button:hover {
background-color: #4b5563;
transition: background-color 0.2s;
}
.process-panel button:disabled {
background-color: #4b5563;
cursor: not-allowed;
} }
</style> </style>
docs/examples/layout/ProcessNode.vue
+17 -18
View File
@@ -24,12 +24,11 @@ const bgColor = toRef(() => {
return '#10b981' return '#10b981'
} }
if (props.data.isRunning || props.data.isSkipped) { if (props.data.isCancelled) {
// pick me a lighter color please return '#fbbf24'
return '#6b7280'
} }
return '#1a192b' return '#4b5563'
}) })
</script> </script>
@@ -38,12 +37,12 @@ const bgColor = toRef(() => {
<Handle type="target" :position="targetPosition" /> <Handle type="target" :position="targetPosition" />
<Handle type="source" :position="sourcePosition" /> <Handle type="source" :position="sourcePosition" />
<div style="display: flex; align-items: center; gap: 8px"> <div v-if="data.isRunning" class="spinner" />
<div v-if="data.isRunning" class="spinner" /> <span v-else-if="data.hasError">&#x274C;</span>
<span v-else-if="data.hasError">&#x274C;</span> <span v-else-if="data.isSkipped">&#x1F6A7;</span>
<span v-else-if="data.isSkipped">&#x1F6A7;</span> <span v-else-if="data.isFinished"> &#x1F60E;</span>
<span v-else>&#x1F4E6;</span> <span v-else-if="data.isCancelled"> &#x1F6AB;</span>
</div> <span v-else> &#x1F4E6;</span>
</div> </div>
</template> </template>
@@ -51,22 +50,22 @@ const bgColor = toRef(() => {
.process-node { .process-node {
padding: 10px; padding: 10px;
color: white; color: white;
border: 1px solid #1a192b;
border-radius: 99px; border-radius: 99px;
font-size: 10px; font-size: 12px;
width: 15px; width: 18px;
height: 15px; height: 18px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
} }
.spinner { .spinner {
border: 2px solid #f3f3f3; border: 3px solid #f3f3f3;
border-top: 2px solid #3498db; border-top: 3px solid #10b981;
border-radius: 50%; border-radius: 50%;
width: 8px; width: 10px;
height: 8px; height: 10px;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
} }
docs/examples/layout/initial-elements.js
+1
View File
@@ -67,6 +67,7 @@ export const initialEdges = [
{ id: 'e2-2b', source: '2', target: '2b', 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: 'e2-2c', source: '2', target: '2c', type: 'smoothstep', animated: true },
{ id: 'e2c-2d', source: '2c', target: '2d', 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: 'e4-5', source: '4', target: '5', type: 'smoothstep', animated: true },
{ id: 'e5-6', source: '5', target: '6', 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: 'e5-7', source: '5', target: '7', type: 'smoothstep', animated: true },
docs/examples/layout/useRunProcess.js
+66 -34
View File
@@ -1,4 +1,4 @@
import { ref } from 'vue' import { ref, toRef, toValue } from 'vue'
import { useVueFlow } from '@vue-flow/core' import { useVueFlow } from '@vue-flow/core'
/** /**
@@ -9,80 +9,112 @@ import { useVueFlow } from '@vue-flow/core'
* *
* When a node has multiple descendants, it will run them in parallel. * When a node has multiple descendants, it will run them in parallel.
*/ */
export function useRunProcess() { export function useRunProcess(dagreGraph) {
const { updateNodeData } = useVueFlow() const { updateNodeData } = useVueFlow()
const running = ref(false) const graph = toRef(() => toValue(dagreGraph))
const executedNodes = new Set()
async function runNode(node, dagreGraph) { const isRunning = ref(false)
const executedNodes = new Set()
const runningTasks = new Map()
async function runNode(node) {
if (executedNodes.has(node.id)) { if (executedNodes.has(node.id)) {
return return
} }
executedNodes.add(node.id) executedNodes.add(node.id)
updateNodeData(node.id, { isRunning: true, isFinished: false, hasError: false }) updateNodeData(node.id, { isRunning: true, isFinished: false, hasError: false, isCancelled: false })
// Simulate an async process with a random timeout between 1 and 3 seconds // Simulate an async process with a random timeout between 1 and 3 seconds
const delay = Math.floor(Math.random() * 2000) + 1000 const delay = Math.floor(Math.random() * 2000) + 1000
await new Promise((resolve) => setTimeout(resolve, delay)) return new Promise((resolve) => {
const timeout = setTimeout(async () => {
const children = graph.value.successors(node.id)
const children = dagreGraph.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 if (willThrowError) {
const willThrowError = Math.random() < 0.15 updateNodeData(node.id, { isRunning: false, hasError: true })
if (willThrowError) { await skipDescendants(node.id)
updateNodeData(node.id, { isRunning: false, hasError: true }) runningTasks.delete(node.id)
await skipDescendants(node.id, dagreGraph) resolve()
return return
} }
updateNodeData(node.id, { isRunning: false, isFinished: true }) updateNodeData(node.id, { isRunning: false, isFinished: true })
// Run the process on the children in parallel runningTasks.delete(node.id)
await Promise.all(
children.map((id) => { if (children.length > 0) {
return runNode({ id }, dagreGraph) // Run the process on the children in parallel
}), await Promise.all(children.map((id) => runNode({ id })))
) }
resolve()
}, delay)
runningTasks.set(node.id, timeout)
})
} }
async function run(nodes, dagreGraph) { async function run(nodes) {
if (running.value) { if (isRunning.value) {
return return
} }
reset(nodes) reset(nodes)
running.value = true isRunning.value = true
// Get all starting nodes (nodes with no predecessors) // Get all starting nodes (nodes with no predecessors)
const startingNodes = nodes.filter((node) => dagreGraph.predecessors(node.id)?.length === 0) const startingNodes = nodes.filter((node) => graph.value.predecessors(node.id)?.length === 0)
// Run the process on all starting nodes in parallel // Run the process on all starting nodes in parallel
await Promise.all(startingNodes.map((node) => runNode(node, dagreGraph))) await Promise.all(startingNodes.map(runNode))
running.value = false clear()
executedNodes.clear()
} }
function reset(nodes) { function reset(nodes) {
clear()
for (const node of nodes) { for (const node of nodes) {
updateNodeData(node.id, { isRunning: false, isFinished: false, hasError: false, isSkipped: false }) updateNodeData(node.id, { isRunning: false, isFinished: false, hasError: false, isSkipped: false, isCancelled: false })
} }
} }
async function skipDescendants(nodeId, dagreGraph) { async function skipDescendants(nodeId) {
const children = dagreGraph.successors(nodeId) const children = graph.value.successors(nodeId)
for (const child of children) { for (const child of children) {
updateNodeData(child, { isRunning: false, isSkipped: true }) updateNodeData(child, { isRunning: false, isSkipped: true })
await skipDescendants(child, dagreGraph) await skipDescendants(child)
} }
} }
return { run, running } function stop() {
isRunning.value = false
for (const [nodeId, task] of runningTasks) {
clearTimeout(task)
runningTasks.delete(nodeId)
updateNodeData(nodeId, { isRunning: false, isFinished: false, hasError: false, isSkipped: false, isCancelled: true })
skipDescendants(nodeId)
}
executedNodes.clear()
}
function clear() {
isRunning.value = false
executedNodes.clear()
runningTasks.clear()
}
return { run, stop, reset, isRunning }
} }
examples/vite/src/Layouting/LayoutingExample.vue
+44 -11
View File
@@ -1,9 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import dagre from 'dagre' import dagre from 'dagre'
import { ConnectionMode, Panel, Position, VueFlow, useVueFlow } from '@vue-flow/core' import { ConnectionMode, Panel, Position, VueFlow, useVueFlow } from '@vue-flow/core'
import { Controls } from '@vue-flow/controls'
import '@vue-flow/controls/dist/style.css'
import { initialEdges, initialNodes } from './initial-elements' import { initialEdges, initialNodes } from './initial-elements'
import { useRunProcess } from './useRunProcess' import { useRunProcess } from './useRunProcess'
@@ -18,7 +15,7 @@ const dagreGraph = ref(new dagre.graphlib.Graph())
dagreGraph.value.setDefaultEdgeLabel(() => ({})) dagreGraph.value.setDefaultEdgeLabel(() => ({}))
const { run } = useRunProcess() const { run, stop, isRunning } = useRunProcess(dagreGraph)
const { findNode, fitView } = useVueFlow() const { findNode, fitView } = useVueFlow()
@@ -62,18 +59,19 @@ function handleLayout(direction: 'TB' | 'LR') {
<template> <template>
<div class="layoutflow"> <div class="layoutflow">
<VueFlow :nodes="nodes" :edges="edges" :connection-mode="ConnectionMode.Loose" @nodes-initialized="handleLayout('TB')"> <VueFlow :nodes="nodes" :edges="edges" :connection-mode="ConnectionMode.Loose" @nodes-initialized="handleLayout('LR')">
<template #node-process="props"> <template #node-process="props">
<ProcessNode v-bind="props" /> <ProcessNode v-bind="props" />
</template> </template>
<Controls /> <Panel class="layout-panel" position="top-right">
<button @click="handleLayout('TB')">vertical</button>
<button @click="handleLayout('LR')">horizontal</button>
</Panel>
<Panel style="display: flex; gap: 10px" position="top-right"> <Panel class="process-panel" position="bottom-right">
<button @click="handleLayout('TB')">vertical layout</button> <button v-if="isRunning" @click="stop">🛑</button>
<button @click="handleLayout('LR')">horizontal layout</button> <button v-else @click="run(nodes)">▶️</button>
<button @click="run(nodes, dagreGraph)">Run</button>
</Panel> </Panel>
</VueFlow> </VueFlow>
</div> </div>
@@ -81,7 +79,42 @@ function handleLayout(direction: 'TB' | 'LR') {
<style> <style>
.layoutflow { .layoutflow {
background-color: #1a192b;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.process-panel,
.layout-panel {
display: flex;
gap: 10px;
}
.process-panel button,
.layout-panel button {
border: none;
padding: 10px;
cursor: pointer;
background-color: #2d3748;
border-radius: 8px;
color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.process-panel button {
font-size: 24px;
width: 50px;
height: 50px;
}
.process-panel button:hover,
.layout-panel button:hover {
background-color: #4b5563;
transition: background-color 0.2s;
}
.process-panel button:disabled {
background-color: #4b5563;
cursor: not-allowed;
}
</style> </style>
examples/vite/src/Layouting/ProcessNode.vue
+17 -17
View File
@@ -13,11 +13,11 @@ const bgColor = toRef(() => {
return '#10b981' return '#10b981'
} }
if (props.data.isRunning || props.data.isSkipped) { if (props.data.isCancelled) {
return '#6b7280' return '#fbbf24'
} }
return '#1a192b' return '#4b5563'
}) })
</script> </script>
@@ -26,12 +26,12 @@ const bgColor = toRef(() => {
<Handle type="target" :position="targetPosition" /> <Handle type="target" :position="targetPosition" />
<Handle type="source" :position="sourcePosition" /> <Handle type="source" :position="sourcePosition" />
<div style="display: flex; align-items: center; gap: 8px"> <div v-if="data.isRunning" class="spinner" />
<div v-if="data.isRunning" class="spinner" /> <span v-else-if="data.hasError">&#x274C;</span>
<span v-else-if="data.hasError">&#x274C;</span> <span v-else-if="data.isSkipped">&#x1F6A7;</span>
<span v-else-if="data.isSkipped">&#x1F6A7;</span> <span v-else-if="data.isFinished"> &#x1F60E;</span>
<span v-else>&#x1F4E6;</span> <span v-else-if="data.isCancelled"> &#x1F6AB;</span>
</div> <span v-else> &#x1F4E6;</span>
</div> </div>
</template> </template>
@@ -39,22 +39,22 @@ const bgColor = toRef(() => {
.process-node { .process-node {
padding: 10px; padding: 10px;
color: white; color: white;
border: 1px solid #1a192b; border: 1px solid #4b5563;
border-radius: 99px; border-radius: 99px;
font-size: 10px; font-size: 12px;
width: 15px; width: 18px;
height: 15px; height: 18px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.spinner { .spinner {
border: 2px solid #f3f3f3; border: 3px solid #f3f3f3;
border-top: 2px solid #3498db; border-top: 3px solid #10b981;
border-radius: 50%; border-radius: 50%;
width: 8px; width: 10px;
height: 8px; height: 10px;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
} }
examples/vite/src/Layouting/initial-elements.ts
+1 -1
View File
@@ -6,7 +6,6 @@ const type: string = 'process'
export const initialNodes: Node[] = [ export const initialNodes: Node[] = [
{ {
id: '1', id: '1',
label: 'Start',
position, position,
type, type,
}, },
@@ -69,6 +68,7 @@ export const initialEdges: Edge[] = [
{ id: 'e2-2b', source: '2', target: '2b', 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: 'e2-2c', source: '2', target: '2c', type: 'smoothstep', animated: true },
{ id: 'e2c-2d', source: '2c', target: '2d', 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: 'e4-5', source: '4', target: '5', type: 'smoothstep', animated: true },
{ id: 'e5-6', source: '5', target: '6', 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: 'e5-7', source: '5', target: '7', type: 'smoothstep', animated: true },
examples/vite/src/Layouting/useRunProcess.ts
+67 -33
View File
@@ -1,5 +1,7 @@
import type dagre from 'dagre'
import type { Node } from '@vue-flow/core' import type { Node } from '@vue-flow/core'
import { useVueFlow } from '@vue-flow/core' import { useVueFlow } from '@vue-flow/core'
import type { MaybeRefOrGetter } from 'vue'
/** /**
* Composable to simulate running a process tree. * Composable to simulate running a process tree.
@@ -9,80 +11,112 @@ import { useVueFlow } from '@vue-flow/core'
* *
* When a node has multiple descendants, it will run them in parallel. * When a node has multiple descendants, it will run them in parallel.
*/ */
export function useRunProcess() { export function useRunProcess(dagreGraph: MaybeRefOrGetter<dagre.graphlib.Graph>) {
const { updateNodeData } = useVueFlow() const { updateNodeData } = useVueFlow()
const running = ref(false) const graph = toRef(() => toValue(dagreGraph))
const executedNodes = new Set<string>()
async function runNode(node: { id: string }, dagreGraph: dagre.graphlib.Graph) { const isRunning = ref(false)
const executedNodes = new Set<string>()
const runningTasks = new Map<string, NodeJS.Timeout>()
async function runNode(node: { id: string }) {
if (executedNodes.has(node.id)) { if (executedNodes.has(node.id)) {
return return
} }
executedNodes.add(node.id) executedNodes.add(node.id)
updateNodeData(node.id, { isRunning: true, isFinished: false, hasError: false }) updateNodeData(node.id, { isRunning: true, isFinished: false, hasError: false, isCancelled: false })
// Simulate an async process with a random timeout between 1 and 3 seconds // Simulate an async process with a random timeout between 1 and 3 seconds
const delay = Math.floor(Math.random() * 2000) + 1000 const delay = Math.floor(Math.random() * 2000) + 1000
await new Promise((resolve) => setTimeout(resolve, delay)) return new Promise<void>((resolve) => {
const timeout = setTimeout(async () => {
const children = graph.value.successors(node.id) as unknown as string[]
const children = dagreGraph.successors(node.id) as unknown as string[] // Randomly decide whether the node will throw an error
const willThrowError = Math.random() < 0.15
// Randomly decide whether the node will throw an error if (willThrowError) {
const willThrowError = Math.random() < 0.15 updateNodeData(node.id, { isRunning: false, hasError: true })
if (willThrowError) { await skipDescendants(node.id)
updateNodeData(node.id, { isRunning: false, hasError: true }) runningTasks.delete(node.id)
await skipDescendants(node.id, dagreGraph) resolve()
return return
} }
updateNodeData(node.id, { isRunning: false, isFinished: true }) updateNodeData(node.id, { isRunning: false, isFinished: true })
console.log(`Node ${node.id} finished`)
runningTasks.delete(node.id)
// Run the process on the children in parallel if (children.length > 0) {
await Promise.all( // Run the process on the children in parallel
children.map((id) => { await Promise.all(children.map((id) => runNode({ id })))
return runNode({ id }, dagreGraph) }
}),
) resolve()
}, delay)
runningTasks.set(node.id, timeout)
})
} }
async function run(nodes: Node[], dagreGraph: dagre.graphlib.Graph) { async function run(nodes: Node[]) {
if (running.value) { if (isRunning.value) {
return return
} }
reset(nodes) reset(nodes)
running.value = true isRunning.value = true
// Get all starting nodes (nodes with no predecessors) // Get all starting nodes (nodes with no predecessors)
const startingNodes = nodes.filter((node) => dagreGraph.predecessors(node.id)?.length === 0) const startingNodes = nodes.filter((node) => graph.value.predecessors(node.id)?.length === 0)
// Run the process on all starting nodes in parallel // Run the process on all starting nodes in parallel
await Promise.all(startingNodes.map((node) => runNode(node, dagreGraph))) await Promise.all(startingNodes.map(runNode))
running.value = false clear()
executedNodes.clear()
} }
function reset(nodes: Node[]) { function reset(nodes: Node[]) {
clear()
for (const node of nodes) { for (const node of nodes) {
updateNodeData(node.id, { isRunning: false, isFinished: false, hasError: false, isSkipped: false }) updateNodeData(node.id, { isRunning: false, isFinished: false, hasError: false, isSkipped: false, isCancelled: false })
} }
} }
async function skipDescendants(nodeId: string, dagreGraph: dagre.graphlib.Graph) { async function skipDescendants(nodeId: string) {
const children = dagreGraph.successors(nodeId) as unknown as string[] const children = graph.value.successors(nodeId) as unknown as string[]
for (const child of children) { for (const child of children) {
updateNodeData(child, { isRunning: false, isSkipped: true }) updateNodeData(child, { isRunning: false, isSkipped: true })
await skipDescendants(child, dagreGraph) await skipDescendants(child)
} }
} }
return { run, running } function stop() {
isRunning.value = false
for (const [nodeId, task] of runningTasks) {
clearTimeout(task)
runningTasks.delete(nodeId)
updateNodeData(nodeId, { isRunning: false, isFinished: false, hasError: false, isSkipped: false, isCancelled: true })
skipDescendants(nodeId)
}
executedNodes.clear()
}
function clear() {
isRunning.value = false
executedNodes.clear()
runningTasks.clear()
}
return { run, stop, reset, isRunning }
} }