Skip to content

Commit 6eb5e5a

Browse files
bcakmakoglubcakmakoglu
committed
chore(docs): update node and edge doc page
1 parent 12f4284 commit 6eb5e5a

File tree

3 files changed

+227
-150
lines changed

3 files changed

+227
-150
lines changed

‎docs/src/auto-imports.d.ts

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@ declare global {
1919
const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
2020
const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
2121
const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
22+
const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
2223
const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
24+
const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
2325
const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
2426
const customRef: typeof import('vue')['customRef']
2527
const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
@@ -87,8 +89,9 @@ declare global {
8789
const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
8890
const toRaw: typeof import('vue')['toRaw']
8991
const toReactive: typeof import('@vueuse/core')['toReactive']
90-
const toRef: typeof import('vue')['toRef']
92+
const toRef: typeof import('@vueuse/core')['toRef']
9193
const toRefs: typeof import('vue')['toRefs']
94+
const toValue: typeof import('@vueuse/core')['toValue']
9295
const triggerRef: typeof import('vue')['triggerRef']
9396
const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
9497
const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
@@ -99,11 +102,14 @@ declare global {
99102
const unrefElement: typeof import('@vueuse/core')['unrefElement']
100103
const until: typeof import('@vueuse/core')['until']
101104
const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
105+
const useAnimate: typeof import('@vueuse/core')['useAnimate']
106+
const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
102107
const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
103108
const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
104109
const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
105110
const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
106111
const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
112+
const useArrayIncludes: typeof import('@vueuse/core')['useArrayIncludes']
107113
const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
108114
const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
109115
const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
@@ -189,6 +195,8 @@ declare global {
189195
const useOnline: typeof import('@vueuse/core')['useOnline']
190196
const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
191197
const useParallax: typeof import('@vueuse/core')['useParallax']
198+
const useParentElement: typeof import('@vueuse/core')['useParentElement']
199+
const usePerformanceObserver: typeof import('@vueuse/core')['usePerformanceObserver']
192200
const usePermission: typeof import('@vueuse/core')['usePermission']
193201
const usePointer: typeof import('@vueuse/core')['usePointer']
194202
const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
@@ -254,8 +262,10 @@ declare global {
254262
const watchArray: typeof import('@vueuse/core')['watchArray']
255263
const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
256264
const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
265+
const watchDeep: typeof import('@vueuse/core')['watchDeep']
257266
const watchEffect: typeof import('vue')['watchEffect']
258267
const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
268+
const watchImmediate: typeof import('@vueuse/core')['watchImmediate']
259269
const watchOnce: typeof import('@vueuse/core')['watchOnce']
260270
const watchPausable: typeof import('@vueuse/core')['watchPausable']
261271
const watchPostEffect: typeof import('vue')['watchPostEffect']

‎docs/src/guide/edge.md

Lines changed: 128 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,83 @@
1+
<script setup>
2+
import { VueFlow } from '@vue-flow/core';
3+
import { Background } from '@vue-flow/background';
4+
import Check from '~icons/mdi/check';
5+
import Close from '~icons/mdi/close';
6+
import { ref } from 'vue';
7+
8+
const nodes = [
9+
{
10+
id: '1',
11+
type: 'input',
12+
label: 'Node 1',
13+
position: { x: 50, y: 25 },
14+
},
15+
{
16+
id: '2',
17+
label: 'Node 2',
18+
position: { x: 100, y: 125 },
19+
},
20+
];
21+
22+
const bezierEdge = ref([
23+
...nodes,
24+
{
25+
id: 'e1-2',
26+
source: '1',
27+
target: '2',
28+
}
29+
]);
30+
31+
const stepEdge = ref([
32+
...nodes,
33+
{
34+
id: 'e1-2',
35+
type: 'step',
36+
source: '1',
37+
target: '2',
38+
},
39+
]);
40+
41+
const smoothStepEdge = ref([
42+
...nodes,
43+
{
44+
id: 'e1-2',
45+
type: 'smoothstep',
46+
source: '1',
47+
target: '2',
48+
},
49+
]);
50+
51+
const straightEdge = ref([
52+
{
53+
id: '1',
54+
type: 'input',
55+
label: 'Node 1',
56+
position: { x: 50, y: 25 },
57+
},
58+
{
59+
id: '2',
60+
label: 'Node 2',
61+
position: { x: 50, y: 125 },
62+
},
63+
{
64+
id: 'e1-2',
65+
type: 'straight',
66+
source: '1',
67+
target: '2',
68+
},
69+
]);
70+
</script>
71+
172
# Edges
273

374
Edges are what connects your nodes into a map.
475

576
They cannot exist on their own and need nodes to which they are connected.
677

778
Each edge <span class="font-bold text-blue-500">requires a unique id, a source node and a target node id.</span>
8-
Anything else is optional.
979

10-
You can check the full options for an edge element in the TypeDocs [here](/typedocs/types/Edge).
80+
You can view the full options-list for an edge [here](/typedocs/types/Edge).
1181

1282
## Usage
1383

@@ -55,9 +125,8 @@ export default defineComponent({
55125
```
56126

57127
For more advanced graphs that require more state access you will want to use the useVueFlow composable.
58-
[useVueFlow](/typedocs/functions/useVueFlow) will provide
59-
you with an [`addEdges`](/typedocs/interfaces/Actions#addedges/) utility function, which you can use to add edges
60-
directly to the state.
128+
[useVueFlow](/typedocs/functions/useVueFlow) will provide the [`addEdges`](/typedocs/interfaces/Actions#addedges/) action,
129+
which you can use to add edges directly to the state.
61130

62131
```vue
63132
<script setup>
@@ -98,84 +167,61 @@ onMounted(() => {
98167
</template>
99168
```
100169

101-
You can also apply changes (like removing elements safely) using
102-
the [`applyEdgeChanges`](/typedocs/interfaces/Actions#applyedgechanges/) utility function, which expects an array
103-
of [changes](/typedocs/types/EdgeChange) to be applied to the currently stored edges.
104-
105170
## [Default Edge-Types](/typedocs/interfaces/DefaultEdgeTypes)
106171

107172
Vue Flow comes with built-in edges that you can use right out of the box.
108173
These edge types include `default` (bezier), `step`, `smoothstep` and `straight`.
109174

110175
### Default Edge (Bezier)
111176

112-
A bezier edge has a curved path.
177+
The default edge is a bezier curve that connects two nodes.
113178

114-
```js
115-
const edges = [
116-
{
117-
id: 'e1-2',
118-
source: '1',
119-
target: '2',
120-
}
121-
]
122-
```
179+
<div class="mt-4 bg-[var(--vp-code-block-bg)] rounded h-50">
180+
<VueFlow v-model="bezierEdge">
181+
<Background />
182+
</VueFlow>
183+
</div>
123184

124185
### Step Edge
125186

126187
A step edge has a straight path with a step towards the target.
127188

128-
```js{4}
129-
const edges = [
130-
{
131-
id: 'e1-2',
132-
type: 'step',
133-
source: '1',
134-
target: '2',
135-
}
136-
]
137-
```
189+
<div class="mt-4 bg-[var(--vp-code-block-bg)] rounded h-50">
190+
<VueFlow v-model="stepEdge">
191+
<Background />
192+
</VueFlow>
193+
</div>
138194

139195
### Smoothstep Edge
140196

141197
The same as the step edge though with a border radius on the step (rounded step).
142198

143-
```js{4}
144-
const edges = [
145-
{
146-
id: 'e1-2',
147-
type: 'smoothstep',
148-
source: '1',
149-
target: '2',
150-
}
151-
]
152-
```
199+
<div class="mt-4 bg-[var(--vp-code-block-bg)] rounded h-50">
200+
<VueFlow v-model="smoothStepEdge">
201+
<Background />
202+
</VueFlow>
203+
</div>
153204

154205
### Straight Edge
155206

156207
A simple straight path.
157208

158-
```js{4}
159-
const edges = [
160-
{
161-
id: 'e1-2',
162-
type: 'straight',
163-
source: '1',
164-
target: '2',
165-
}
166-
]
167-
```
209+
<div class="mt-4 bg-[var(--vp-code-block-bg)] rounded h-50">
210+
<VueFlow v-model="straightEdge">
211+
<Background />
212+
</VueFlow>
213+
</div>
168214

169215
## Custom Edges
170216

171217
In addition to the default edge types from the previous chapter, you can define any amount of custom edge-types.
172218
Edge-types are inferred from your edge's definition.
173219

174-
```js{5,11}
220+
```js{4}
175221
const edges = [
176222
{
177223
id: 'e1-2',
178-
type: 'special',
224+
type: 'custom',
179225
source: '1',
180226
target: '2',
181227
},
@@ -195,6 +241,8 @@ The easiest way to define custom edges is, by passing them as template slots.
195241
Your custom edge-types are dynamically resolved to slot-names, meaning an edge with the type `custom`
196242
will expect a slot to have the name `edge-custom`.
197243

244+
You can choose any name you want for your edge-type, and it will be resolved to the corresponding slot (i.e. `my-edge-type` -> `#edge-my-edge-type`)
245+
198246
```vue{18,26}
199247
<script setup>
200248
import { VueFlow } from '@vue-flow/core'
@@ -277,7 +325,7 @@ const elements = ref([
277325
You can also set a template per edge, which will overwrite the edge-type component but will retain
278326
the type otherwise.
279327

280-
```vue
328+
```vue{30}
281329
<script setup>
282330
import { markRaw } from 'vue'
283331
import CustomEdge from './CustomEdge.vue'
@@ -293,7 +341,7 @@ const elements = ref([
293341
label: 'Node 2',
294342
position: { x: 0, y: 150 },
295343
},
296-
{
344+
{
297345
id: '3',
298346
label: 'Node 3',
299347
position: { x: 0, y: 300 },
@@ -324,33 +372,33 @@ Your custom edges are wrapped so that the basic functions like selecting work.
324372
But you might want to extend on that functionality or implement your own business logic inside of edges, therefore
325373
your edges receive the following props:
326374

327-
| Name | Definition | Type | Optional |
328-
|---------------------|-------------------------------|-----------------------------------------------|----------|
329-
| id | Edge id | string | false |
330-
| source | The source node id | string | false |
331-
| target | The target node id | string | false |
332-
| sourceNode | The source node | GraphNode | false |
333-
| targetNode | The target node | GraphNode | false |
334-
| sourceX | X position of source handle | number | false |
335-
| sourceY | Y position of source handle | number | false |
336-
| targetX | X position of target handle | number | false |
337-
| targetY | Y position of target handle | number | false |
338-
| type | Edge type | string | true |
339-
| sourceHandleId | Source handle id | string | true |
340-
| targetHandleId | Target handle id | string | true |
341-
| data | Custom data object | Any object | true |
342-
| events | Edge events and custom events | [EdgeEventsOn](/typedocs/types/EdgeEventsOn) | true |
343-
| label | Edge label | string, Component | true |
344-
| labelStyle | Additional label styles | CSSProperties | true |
345-
| labelShowBg | Enable/Disable label bg | boolean | true |
346-
| labelBgPadding | Edge label bg padding | number | true |
347-
| labelBgBorderRadius | Edge label bg border radius | number | true |
348-
| selected | Is edge selected | boolean | true |
349-
| animated | Is edge animated | boolean | true |
350-
| updatable | Is edge updatable | [EdgeUpdatable](/typedocs/types/EdgeUpdatable)| true |
351-
| markerEnd | Edge marker id | string | true |
352-
| markerStart | Edge marker id | string | true |
353-
| curvature | Edge path curvature | number | true |
375+
| Name | Definition | Type | Optional |
376+
|---------------------|-------------------------------|------------------------------------------------|--------------------------------------------|
377+
| id | Edge id | string | <Close class="text-red-500" /> |
378+
| source | The source node id | string | <Close class="text-red-500" /> |
379+
| target | The target node id | string | <Close class="text-red-500" /> |
380+
| sourceNode | The source node | GraphNode | <Close class="text-red-500" /> |
381+
| targetNode | The target node | GraphNode | <Close class="text-red-500" /> |
382+
| sourceX | X position of source handle | number | <Close class="text-red-500" /> |
383+
| sourceY | Y position of source handle | number | <Close class="text-red-500" /> |
384+
| targetX | X position of target handle | number | <Close class="text-red-500" /> |
385+
| targetY | Y position of target handle | number | <Close class="text-red-500" /> |
386+
| type | Edge type | string | <Check class="text-[var(--vp-c-brand)]" /> |
387+
| sourceHandleId | Source handle id | string | <Check class="text-[var(--vp-c-brand)]" /> |
388+
| targetHandleId | Target handle id | string | <Check class="text-[var(--vp-c-brand)]" /> |
389+
| data | Custom data object | Any object | <Check class="text-[var(--vp-c-brand)]" /> |
390+
| events | Edge events and custom events | [EdgeEventsOn](/typedocs/types/EdgeEventsOn) | <Check class="text-[var(--vp-c-brand)]" /> |
391+
| label | Edge label | string, Component | <Check class="text-[var(--vp-c-brand)]" /> |
392+
| labelStyle | Additional label styles | CSSProperties | <Check class="text-[var(--vp-c-brand)]" /> |
393+
| labelShowBg | Enable/Disable label bg | boolean | <Check class="text-[var(--vp-c-brand)]" /> |
394+
| labelBgPadding | Edge label bg padding | number | <Check class="text-[var(--vp-c-brand)]" /> |
395+
| labelBgBorderRadius | Edge label bg border radius | number | <Check class="text-[var(--vp-c-brand)]" /> |
396+
| selected | Is edge selected | boolean | <Check class="text-[var(--vp-c-brand)]" /> |
397+
| animated | Is edge animated | boolean | <Check class="text-[var(--vp-c-brand)]" /> |
398+
| updatable | Is edge updatable | [EdgeUpdatable](/typedocs/types/EdgeUpdatable) | <Check class="text-[var(--vp-c-brand)]" /> |
399+
| markerEnd | Edge marker id | string | <Check class="text-[var(--vp-c-brand)]" /> |
400+
| markerStart | Edge marker id | string | <Check class="text-[var(--vp-c-brand)]" /> |
401+
| curvature | Edge path curvature | number | <Check class="text-[var(--vp-c-brand)]" /> |
354402

355403
### (Custom) Edge Events
356404

0 commit comments

Comments
 (0)