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

docs(examples): add simple layout example (#1678)

Browse Source 
* docs(examples): cleanup animated layout example

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

* chore(docs,deps): update deps

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

* docs(examples): add animated and simple layout examples

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
2024-11-05 15:53:16 +03:00
committed by GitHub
parent f3075bc246
commit 61f4b0d447
13 changed files with 959 additions and 363 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/examples/layout/App.vue
+6 -1
View File
@@ -52,7 +52,12 @@ async function layoutGraph(direction) {
<template>
<div class="layout-flow">
<VueFlow :nodes="nodes" :edges="edges" @nodes-initialized="layoutGraph('LR')">
<VueFlow
:nodes="nodes"
:edges="edges"
:default-edge-options="{ type: 'animation', animated: true }"
@nodes-initialized="layoutGraph('LR')"
>
<template #node-process="props">
<ProcessNode :data="props.data" :source-position="props.sourcePosition" :target-position="props.targetPosition" />
</template>
docs/examples/layout/initial-elements.js
+10 -11
View File
@@ -1,6 +1,5 @@
const position = { x: 0, y: 0 }
const nodeType = 'process'
const edgeType = 'animation'
export const initialNodes = [
{
@@ -61,14 +60,14 @@ export const initialNodes = [
]
export const initialEdges = [
{ 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 },
{ id: 'e1-2', source: '1', target: '2' },
{ id: 'e1-3', source: '1', target: '3' },
{ id: 'e2-2a', source: '2', target: '2a' },
{ id: 'e2-2b', source: '2', target: '2b' },
{ id: 'e2-2c', source: '2', target: '2c' },
{ id: 'e2c-2d', source: '2c', target: '2d' },
{ id: 'e3-7', source: '3', target: '4' },
{ id: 'e4-5', source: '4', target: '5' },
{ id: 'e5-6', source: '5', target: '6' },
{ id: 'e5-7', source: '5', target: '7' },
]