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

131
docs/src/guide/edge.md
View File

@@ -433,8 +433,13 @@ Edge-types are determined from your edges' definitions.
::: code-group
```js [edges <LogosJavascript />]
```vue [App.vue <LogosJavascript />]
<script setup>
import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core'
import CustomEdge from './CustomEdge.vue'
import SpecialEdge from './SpecialEdge.vue'
export const edges = ref([
{
@@ -445,22 +450,57 @@ export const edges = ref([
type: 'custom',
},
{
id: 'e1-2',
id: 'e1-3',
source: '1',
target: '2',
target: '3',
// this will create the edge-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 />]
<script setup>
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']);
console.log(props.data.hello) // 'world'
</script>
<script lang="ts">
@@ -481,9 +521,14 @@ export default {
</template>
```
```ts [edges <LogosTypescript />]
```vue{25-26,32-33,40-42} [App.vue <LogosTypescript />]
<script setup lang="ts">
import { ref } from 'vue'
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:
// 1. The data object type
@@ -496,33 +541,69 @@ interface CustomData {
type CustomEdgeTypes = 'custom' | 'special'
type CustomEdge = Edge<CustomEdgeData, any, CustomEdgeTypes>
type CustomEdge = Edge<CustomData, any, CustomEdgeTypes>
export const edges = ref<CustomEdge[]>([
{
id: 'e1-2',
source: '1',
target: '2',
// this will create the edge-type `custom`
type: 'custom',
id: 'e1-2',
source: '1',
target: '2',
// this will create the edge-type `custom`
type: 'custom',
},
{
id: 'e1-2',
source: '1',
target: '2',
// this will create the edge-type `special`
type: 'special',
id: 'e1-3',
source: '1',
target: '3',
// this will create the edge-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',
source: '1',
target: '2',
type: 'not-defined', // should be 'custom' | 'special'
id: 'e1-4',
source: '1',
target: '4',
// 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 />]
@@ -532,6 +613,7 @@ import { BezierEdge } from '@vue-flow/core';
import { CustomData } from './edges'
// props were passed from the slot using `v-bind="customEdgeProps"`
const props = defineProps<EdgeProps<CustomData>>();
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
Vue Flow provides two main ways of listening to edge events,
either by using `useVueFlow` to bind listeners to the event handlers
or by using binding listeners to the `<VueFlow>` component.
either by using `useVueFlow` to bind listeners to the event handlers or by binding them to the `<VueFlow>` component.
::: code-group

57
docs/src/guide/node.md
View File

@@ -474,8 +474,13 @@ Node-types are determined from your nodes' definitions.
::: code-group
```js [nodes <LogosJavascript />]
```vue{11-12,18-19} [App.vue <LogosJavascript />]
<script setup>
import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core'
import CustomNode from './CustomNode.vue'
import SpecialNode from './SpecialNode.vue'
export const nodes = ref([
{
@@ -493,12 +498,26 @@ export const nodes = ref([
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 />]
<script setup>
import { Position } from '@vue-flow/core'
// props were passed from the slot using `v-bind="customNodeProps"`
const props = defineProps(['label'])
</script>
@@ -511,9 +530,14 @@ const props = defineProps(['label'])
</template>
```
```ts [nodes <LogosTypescript />]
```vue{30-31,37-38,45-47} [App.vue <LogosTypescript />]
<script setup lang="ts">
import { ref } from 'vue'
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:
// 1. The data object type
@@ -541,22 +565,35 @@ export const nodes = ref<CustomNode[]>([
position: { x: 50, y: 50 },
},
{
id: '1',
label: 'Node 1',
id: '2',
label: 'Node 2',
// this will create the node-type `special`
type: 'special',
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',
label: 'Node 1',
id: '3',
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',
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 />]
@@ -566,6 +603,7 @@ import { Position } from '@vue-flow/core'
import { CustomData, CustomEvents } from './nodes'
// props were passed from the slot using `v-bind="customNodeProps"`
const props = defineProps<NodeProps<CustomData, CustomEvents>>()
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)
Vue Flow provides two main ways of listening to node events,
either by using `useVueFlow` to bind listeners to the event handlers
or by using binding listeners to the `<VueFlow>` component.
either by using `useVueFlow` to bind listeners to the event handlers or by binding them to the `<VueFlow>` component.
::: code-group