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

docs(guide): extend custom node and edges section

Browse Source
This commit is contained in:
braks
2023-11-05 20:32:45 +01:00
parent 4786e7ab5e
commit b4938930ad
2 changed files with 153 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/guide/edge.md
+106 -25
View File
@@ -433,8 +433,13 @@ Edge-types are determined from your edges' definitions.
::: code-group ::: code-group
```js [edges <LogosJavascript />] ```vue [App.vue <LogosJavascript />]
<script setup>
import { ref } from 'vue' import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core'
import CustomEdge from './CustomEdge.vue'
import SpecialEdge from './SpecialEdge.vue'
export const edges = ref([ export const edges = ref([
{ {
@@ -445,22 +450,57 @@ export const edges = ref([
type: 'custom', type: 'custom',
}, },
{ {
id: 'e1-2', id: 'e1-3',
source: '1', source: '1',
target: '2', target: '3',
// this will create the edge-type `special` // this will create the edge-type `special`
type: 'special', type: 'special',
} }
]) ])
const nodes = ref([
{
id: '1',
label: 'Node 1',
position: { x: 50, y: 50 },
},
{
id: '2',
label: 'Node 2',
position: { x: 50, y: 250 },
},
{
id: '3',
label: 'Node 3',
position: { x: 250, y: 50 },
},
{
id: '4',
label: 'Node 4',
position: { x: 250, y: 250 },
},
])
</script>
<template>
<VueFlow :nodes="nodes" :edges="edges">
<template #edge-custom="customEdgeProps">
<CustomEdge v-bind="customEdgeProps" />
</template>
<template #edge-special="specialEdgeProps">
<SpecialEdge v-bind="specialEdgeProps" />
</template>
</VueFlow>
</template>
``` ```
```vue [CustomEdge.vue <LogosJavascript />] ```vue [CustomEdge.vue <LogosJavascript />]
<script setup> <script setup>
import { BezierEdge } from '@vue-flow/core'; import { BezierEdge } from '@vue-flow/core';
// props were passed from the slot using `v-bind="customEdgeProps"`
const props = defineProps(['sourceX', 'sourceY', 'targetX', 'targetY', 'sourcePosition', 'targetPosition']); const props = defineProps(['sourceX', 'sourceY', 'targetX', 'targetY', 'sourcePosition', 'targetPosition']);
console.log(props.data.hello) // 'world'
</script> </script>
<script lang="ts"> <script lang="ts">
@@ -481,9 +521,14 @@ export default {
</template> </template>
``` ```
```ts [edges <LogosTypescript />] ```vue{25-26,32-33,40-42} [App.vue <LogosTypescript />]
<script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import type { Edge } from '@vue-flow/core' import type { Edge } from '@vue-flow/core'
import { VueFlow } from '@vue-flow/core'
import CustomEdge from './CustomEdge.vue'
import SpecialEdge from './SpecialEdge.vue'
// You can pass 3 optional generic arguments to the Edge type, allowing you to define: // You can pass 3 optional generic arguments to the Edge type, allowing you to define:
// 1. The data object type // 1. The data object type
@@ -496,33 +541,69 @@ interface CustomData {
type CustomEdgeTypes = 'custom' | 'special' type CustomEdgeTypes = 'custom' | 'special'
type CustomEdge = Edge<CustomEdgeData, any, CustomEdgeTypes> type CustomEdge = Edge<CustomData, any, CustomEdgeTypes>
export const edges = ref<CustomEdge[]>([ export const edges = ref<CustomEdge[]>([
{ {
id: 'e1-2', id: 'e1-2',
source: '1', source: '1',
target: '2', target: '2',
// this will create the edge-type `custom` // this will create the edge-type `custom`
type: 'custom', type: 'custom',
}, },
{ {
id: 'e1-2', id: 'e1-3',
source: '1', source: '1',
target: '2', target: '3',
// this will create the edge-type `special` // this will create the edge-type `special`
type: 'special', type: 'special',
}, },
// this will throw a type error, as the type is not defined in the CustomEdgeTypes
// regardless it would be rendered as a default edge type
{ {
id: 'e1-2', id: 'e1-4',
source: '1', source: '1',
target: '2', target: '4',
type: 'not-defined', // should be 'custom' | 'special' // this will throw a type error, as the type is not defined in the CustomEdgeTypes
// regardless it would be rendered as a default edge type
type: 'not-defined',
} }
]) ])
const nodes = ref([
{
id: '1',
label: 'Node 1',
position: { x: 50, y: 50 },
},
{
id: '2',
label: 'Node 2',
position: { x: 50, y: 250 },
},
{
id: '3',
label: 'Node 3',
position: { x: 250, y: 50 },
},
{
id: '4',
label: 'Node 4',
position: { x: 250, y: 250 },
},
])
</script>
<template>
<VueFlow :nodes="nodes" :edges="edges">
<template #edge-custom="customEdgeProps">
<CustomEdge v-bind="customEdgeProps" />
</template>
<template #edge-special="specialEdgeProps">
<SpecialEdge v-bind="specialEdgeProps" />
</template>
</VueFlow>
</template>
``` ```
```vue [CustomEdge.vue <LogosTypescript />] ```vue [CustomEdge.vue <LogosTypescript />]
@@ -532,6 +613,7 @@ import { BezierEdge } from '@vue-flow/core';
import { CustomData } from './edges' import { CustomData } from './edges'
// props were passed from the slot using `v-bind="customEdgeProps"`
const props = defineProps<EdgeProps<CustomData>>(); const props = defineProps<EdgeProps<CustomData>>();
console.log(props.data.hello) // 'world' console.log(props.data.hello) // 'world'
@@ -676,8 +758,7 @@ But you may wish to expand on these features or implement your business logic in
## Edge Events ## Edge Events
Vue Flow provides two main ways of listening to edge events, Vue Flow provides two main ways of listening to edge events,
either by using `useVueFlow` to bind listeners to the event handlers either by using `useVueFlow` to bind listeners to the event handlers or by binding them to the `<VueFlow>` component.
or by using binding listeners to the `<VueFlow>` component.
::: code-group ::: code-group
docs/src/guide/node.md
+47 -10
View File
@@ -474,8 +474,13 @@ Node-types are determined from your nodes' definitions.
::: code-group ::: code-group
```js [nodes <LogosJavascript />] ```vue{11-12,18-19} [App.vue <LogosJavascript />]
<script setup>
import { ref } from 'vue' import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core'
import CustomNode from './CustomNode.vue'
import SpecialNode from './SpecialNode.vue'
export const nodes = ref([ export const nodes = ref([
{ {
@@ -493,12 +498,26 @@ export const nodes = ref([
position: { x: 150, y: 50 }, position: { x: 150, y: 50 },
} }
]) ])
</script>
<template>
<VueFlow :nodes="nodes">
<template #node-custom="customNodeProps">
<CustomNode v-bind="customNodeProps" />
</template>
<template #node-special="specialNodeProps">
<SpecialNode v-bind="specialNodeProps" />
</template>
</VueFlow>
</template>
``` ```
```vue [CustomNode.vue <LogosJavascript />] ```vue [CustomNode.vue <LogosJavascript />]
<script setup> <script setup>
import { Position } from '@vue-flow/core' import { Position } from '@vue-flow/core'
// props were passed from the slot using `v-bind="customNodeProps"`
const props = defineProps(['label']) const props = defineProps(['label'])
</script> </script>
@@ -511,9 +530,14 @@ const props = defineProps(['label'])
</template> </template>
``` ```
```ts [nodes <LogosTypescript />] ```vue{30-31,37-38,45-47} [App.vue <LogosTypescript />]
<script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import type { Node } from '@vue-flow/core' import type { Node } from '@vue-flow/core'
import { VueFlow } from '@vue-flow/core'
import CustomNode from './CustomNode.vue'
import SpecialNode from './SpecialNode.vue'
// You can pass 3 optional generic arguments to the Node interface, allowing you to define: // You can pass 3 optional generic arguments to the Node interface, allowing you to define:
// 1. The data object type // 1. The data object type
@@ -541,22 +565,35 @@ export const nodes = ref<CustomNode[]>([
position: { x: 50, y: 50 }, position: { x: 50, y: 50 },
}, },
{ {
id: '1', id: '2',
label: 'Node 1', label: 'Node 2',
// this will create the node-type `special` // this will create the node-type `special`
type: 'special', type: 'special',
position: { x: 150, y: 50 }, position: { x: 150, y: 50 },
}, },
// this will throw a type error, as the type is not defined in the CustomEdgeTypes
// regardless it would be rendered as a default edge type
{ {
id: '1', id: '3',
label: 'Node 1', label: 'Node 3',
// this will throw a type error, as the type is not defined in the CustomEdgeTypes
// regardless it would be rendered as a default edge type
type: 'invalid', type: 'invalid',
position: { x: 150, y: 50 }, position: { x: 150, y: 50 },
} }
]) ])
</script>
<template>
<VueFlow :nodes="nodes">
<template #node-custom="customNodeProps">
<CustomNode v-bind="customNodeProps" />
</template>
<template #node-special="specialNodeProps">
<SpecialNode v-bind="specialNodeProps" />
</template>
</VueFlow>
</template>
``` ```
```vue [CustomNode.vue <LogosTypescript />] ```vue [CustomNode.vue <LogosTypescript />]
@@ -566,6 +603,7 @@ import { Position } from '@vue-flow/core'
import { CustomData, CustomEvents } from './nodes' import { CustomData, CustomEvents } from './nodes'
// props were passed from the slot using `v-bind="customNodeProps"`
const props = defineProps<NodeProps<CustomData, CustomEvents>>() const props = defineProps<NodeProps<CustomData, CustomEvents>>()
console.log(props.data.hello) // 'world' console.log(props.data.hello) // 'world'
@@ -691,8 +729,7 @@ But you may wish to expand on these features or implement your business logic in
## [Node Events](/typedocs/types/NodeEventsHandler) ## [Node Events](/typedocs/types/NodeEventsHandler)
Vue Flow provides two main ways of listening to node events, Vue Flow provides two main ways of listening to node events,
either by using `useVueFlow` to bind listeners to the event handlers either by using `useVueFlow` to bind listeners to the event handlers or by binding them to the `<VueFlow>` component.
or by using binding listeners to the `<VueFlow>` component.
::: code-group ::: code-group