Skip to content

Commit 4786e7a

Browse files
bcakmakoglubcakmakoglu
committed
docs(guide): add section on removing nodes & edges
1 parent c35c2db commit 4786e7a

File tree

2 files changed

+364
-221
lines changed

2 files changed

+364
-221
lines changed

‎docs/src/guide/edge.md

Lines changed: 178 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -164,9 +164,7 @@ through [useVueFlow](/typedocs/functions/useVueFlow), allowing you to add edges
164164
What's more, this action isn't limited to the component rendering the graph; it can be utilized elsewhere, like in a
165165
Sidebar or Toolbar.
166166

167-
::: code-group
168-
169-
```vue [<LogosJavascript />]
167+
```vue
170168
<script setup>
171169
import { VueFlow, useVueFlow } from '@vue-flow/core'
172170
@@ -206,12 +204,56 @@ onMounted(() => {
206204
</template>
207205
```
208206

209-
```vue [<LogosTypescript />]
210-
<script setup lang="ts">
211-
import type { Node } from '@vue-flow/core'
207+
## Removing Edges from the Graph
208+
209+
Similar to adding edges, edges can be removed from the graph by removing them from the `mode-value` (using `v-model`) or from the `edges` prop of the Vue Flow component.
210+
211+
```vue
212+
213+
<script setup>
214+
import { ref, onMounted } from 'vue'
215+
import { VueFlow } from '@vue-flow/core'
216+
217+
const elements = ref([
218+
{
219+
id: '1',
220+
position: { x: 50, y: 50 },
221+
label: 'Node 1',
222+
},
223+
{
224+
id: '2',
225+
position: { x: 50, y: 250 },
226+
label: 'Node 2',
227+
},
228+
{
229+
id: 'e1-2',
230+
source: '1',
231+
target: '2',
232+
}
233+
]);
234+
235+
onMounted(() => {
236+
elements.value.splice(2, 1)
237+
})
238+
</script>
239+
240+
<template>
241+
<VueFlow v-model="elements"/>
242+
</template>
243+
```
244+
245+
When working with complex graphs with extensive state access, you should use the useVueFlow composable.
246+
The [`removeEdges`](/typedocs/interfaces/Actions#removeEdges) action is available through [useVueFlow](/typedocs/functions/useVueFlow),
247+
allowing you to remove edges straight from the state.
248+
249+
What's more, this action isn't limited to the component rendering the graph; it can be utilized elsewhere, like in a
250+
Sidebar, Toolbar or the Edge itself.
251+
252+
```vue
253+
<script setup>
212254
import { VueFlow, useVueFlow } from '@vue-flow/core'
213255
214-
const initialNodes = ref<Node[]>([
256+
const elements = ref([
215257
{
216258
id: '1',
217259
position: { x: 50, y: 50 },
@@ -221,33 +263,123 @@ const initialNodes = ref<Node[]>([
221263
id: '2',
222264
position: { x: 50, y: 250 },
223265
label: 'Node 2',
266+
},
267+
{
268+
id: 'e1-2',
269+
source: '1',
270+
target: '2',
224271
}
225272
])
226273
227-
const { addEdges } = useVueFlow()
274+
const { removeEdges } = useVueFlow()
228275
229276
onMounted(() => {
230-
// add an edge after mount
231-
addEdges([
232-
{
233-
source: '1',
234-
target: '2',
235-
236-
// if a node has multiple handles of the same type,
237-
// you should specify which handle to use by id
238-
sourceHandle: null,
239-
targetHandle: null,
240-
}
241-
])
277+
// remove an edge after mount
278+
removeEdges('e1-2')
279+
280+
// or remove multiple edges
281+
removeEdges(['e1-2', 'e2-3'])
242282
})
243283
</script>
244284
245285
<template>
246-
<VueFlow :nodes="initialNodes" />
286+
<VueFlow v-model="elements" />
287+
</template>
288+
```
289+
290+
## Updating Edge Data
291+
292+
Since edges are reactive object, you can update their data at any point by simply mutating it.
293+
This allows you to change the label, or even add new properties to the data object at any point in time.
294+
295+
There are multiple ways of achieving this, here are some examples:
296+
297+
::: code-group
298+
299+
```vue [useEdge]
300+
<!-- CustomEdge.vue -->
301+
<script setup>
302+
import { useEdge } from '@vue-flow/core'
303+
304+
// `useEdge` returns us the edge object straight from the state
305+
// since the node obj is reactive, we can mutate it to update our edges' data
306+
const { edge } = useEdge()
307+
308+
function onSomeEvent() {
309+
edge.data = {
310+
...edge.data,
311+
hello: 'world',
312+
}
313+
314+
// you can also mutate properties like `selectable` or `animated`
315+
edge.selectable = !edge.selectable
316+
edge.animated = !edge.animated
317+
}
318+
</script>
319+
```
320+
321+
```ts [useVueFlow]
322+
import { useVueFlow } from '@vue-flow/core'
323+
324+
const instance = useVueFlow()
325+
326+
// find the node in the state by its id
327+
const edge = instance.findEdge(edgeId)
328+
329+
edge.data = {
330+
...edge.data,
331+
hello: 'world',
332+
}
333+
334+
// you can also mutate properties like `selectable` or `animated`
335+
edge.selectable = !edge.selectable
336+
edge.animated = !edge.animated
337+
```
338+
339+
```vue [v-model]
340+
<script setup>
341+
import { ref } from 'vue'
342+
343+
const elements = ref([
344+
{
345+
id: '1',
346+
label: 'Node 1',
347+
position: { x: 50, y: 50 },
348+
data: {
349+
hello: 'world',
350+
}
351+
},
352+
{
353+
id: '2',
354+
label: 'Node 2',
355+
position: { x: 50, y: 250 },
356+
},
357+
{
358+
id: 'e1-2',
359+
source: '1',
360+
target: '2',
361+
},
362+
])
363+
364+
function onSomeEvent(edgeId) {
365+
const edge = elements.value.find((edge) => edge.id === edgeId)
366+
edge.data = {
367+
...elements.value[0].data,
368+
hello: 'world',
369+
}
370+
371+
// you can also mutate properties like `selectable` or `animated`
372+
edge.selectable = !edge.selectable
373+
edge.animated = !edge.animated
374+
}
375+
</script>
376+
377+
<template>
378+
<VueFlow v-model="elements" />
247379
</template>
248380
```
249381

250-
:::
382+
:::
251383

252384
## [Predefined Edge-Types](/typedocs/interfaces/DefaultEdgeTypes)
253385

@@ -388,7 +520,7 @@ export const edges = ref<CustomEdge[]>([
388520
id: 'e1-2',
389521
source: '1',
390522
target: '2',
391-
type: 'not-defined',
523+
type: 'not-defined', // should be 'custom' | 'special'
392524
}
393525
])
394526
```
@@ -517,33 +649,29 @@ const elements = ref([
517649
Your custom edges are enclosed so that fundamental functions like selecting operate.
518650
But you may wish to expand on these features or implement your business logic inside edges, thus your edges receive the following properties:
519651

520-
| Name | Definition | Type | Optional |
521-
|---------------------|-------------------------------|------------------------------------------------|--------------------------------------------|
522-
| id | Edge id | string | <Close class="text-red-500" /> |
523-
| source | The source node id | string | <Close class="text-red-500" /> |
524-
| target | The target node id | string | <Close class="text-red-500" /> |
525-
| sourceNode | The source node | GraphNode | <Close class="text-red-500" /> |
526-
| targetNode | The target node | GraphNode | <Close class="text-red-500" /> |
527-
| sourceX | X position of source handle | number | <Close class="text-red-500" /> |
528-
| sourceY | Y position of source handle | number | <Close class="text-red-500" /> |
529-
| targetX | X position of target handle | number | <Close class="text-red-500" /> |
530-
| targetY | Y position of target handle | number | <Close class="text-red-500" /> |
531-
| type | Edge type | string | <Check class="text-[var(--vp-c-brand)]" /> |
532-
| sourceHandleId | Source handle id | string | <Check class="text-[var(--vp-c-brand)]" /> |
533-
| targetHandleId | Target handle id | string | <Check class="text-[var(--vp-c-brand)]" /> |
534-
| data | Custom data object | Any object | <Check class="text-[var(--vp-c-brand)]" /> |
535-
| events | Edge events and custom events | [EdgeEventsOn](/typedocs/types/EdgeEventsOn) | <Check class="text-[var(--vp-c-brand)]" /> |
536-
| label | Edge label | string, Component | <Check class="text-[var(--vp-c-brand)]" /> |
537-
| labelStyle | Additional label styles | CSSProperties | <Check class="text-[var(--vp-c-brand)]" /> |
538-
| labelShowBg | Enable/Disable label bg | boolean | <Check class="text-[var(--vp-c-brand)]" /> |
539-
| labelBgPadding | Edge label bg padding | number | <Check class="text-[var(--vp-c-brand)]" /> |
540-
| labelBgBorderRadius | Edge label bg border radius | number | <Check class="text-[var(--vp-c-brand)]" /> |
541-
| selected | Is edge selected | boolean | <Check class="text-[var(--vp-c-brand)]" /> |
542-
| animated | Is edge animated | boolean | <Check class="text-[var(--vp-c-brand)]" /> |
543-
| updatable | Is edge updatable | [EdgeUpdatable](/typedocs/types/EdgeUpdatable) | <Check class="text-[var(--vp-c-brand)]" /> |
544-
| markerEnd | Edge marker id | string | <Check class="text-[var(--vp-c-brand)]" /> |
545-
| markerStart | Edge marker id | string | <Check class="text-[var(--vp-c-brand)]" /> |
546-
| curvature | Edge path curvature | number | <Check class="text-[var(--vp-c-brand)]" /> |
652+
| Prop Name | Description | Type | Optional |
653+
|------------------|--------------------------------------------|----------------------------------------------|--------------------------------------------|
654+
| id | Unique edge id | string | <Close class="text-red-500" /> |
655+
| sourceNode | The originating node | [GraphNode](/typedocs/interfaces/GraphNode) | <Close class="text-red-500" /> |
656+
| targetNode | The destination node | [GraphNode](/typedocs/interfaces/GraphNode) | <Close class="text-red-500" /> |
657+
| source | ID of the source node | string | <Close class="text-red-500" /> |
658+
| target | ID of the target node | string | <Close class="text-red-500" /> |
659+
| type | Edge Type | string | <Close class="text-red-500" /> |
660+
| label | Edge label, can be a string or a VNode | string \| VNode \| Component \| Object | <Check class="text-[var(--vp-c-brand)]" /> |
661+
| style | CSS properties | CSSProperties | <Check class="text-[var(--vp-c-brand)]" /> |
662+
| selected | Is edge selected | boolean | <Check class="text-[var(--vp-c-brand)]" /> |
663+
| sourcePosition | Source position | [Position](/typedocs/enums/Position) | <Close class="text-red-500" /> |
664+
| targetPosition | Target position | [Position](/typedocs/enums/Position) | <Close class="text-red-500" /> |
665+
| sourceHandleId | ID of the source handle | string | <Check class="text-[var(--vp-c-brand)]" /> |
666+
| targetHandleId | ID of the target handle | string | <Check class="text-[var(--vp-c-brand)]" /> |
667+
| animated | Is edge animated | boolean | <Check class="text-[var(--vp-c-brand)]" /> |
668+
| updatable | Is edge updatable | boolean | <Check class="text-[var(--vp-c-brand)]" /> |
669+
| markerStart | Start marker | string | <Close class="text-red-500" /> |
670+
| markerEnd | End marker | string | <Close class="text-red-500" /> |
671+
| curvature | The curvature of the edge | number | <Check class="text-[var(--vp-c-brand)]" /> |
672+
| interactionWidth | Width of the interaction area for the edge | number | <Check class="text-[var(--vp-c-brand)]" /> |
673+
| data | Additional data of edge | any object | <Close class="text-red-500" /> |
674+
| events | Contextual and custom events of edge | [EdgeEventsOn](/typedocs/types/EdgeEventsOn) | <Close class="text-red-500" /> |
547675

548676
## Edge Events
549677

@@ -678,84 +806,3 @@ const elements = ref([
678806
::: tip
679807
To override the styles of the default theme, visit the [Theming section](/guide/theming).
680808
:::
681-
682-
## Updating Edge Data
683-
684-
Since edges are reactive object, you can update their data at any point by simply mutating it.
685-
This allows you to change the label, or even add new properties to the data object at any point in time.
686-
687-
There are multiple ways of achieving this, here are some examples:
688-
689-
::: code-group
690-
691-
```vue [useEdge]
692-
<!-- CustomEdge.vue -->
693-
<script setup>
694-
import { useEdge } from '@vue-flow/core'
695-
696-
// `useEdge` returns us the edge object straight from the state
697-
// since the node obj is reactive, we can mutate it to update our edges' data
698-
const { edge } = useEdge()
699-
700-
function onSomeEvent() {
701-
edge.data = {
702-
...edge.data,
703-
hello: 'world',
704-
}
705-
}
706-
</script>
707-
```
708-
709-
```ts [useVueFlow]
710-
import { useVueFlow } from '@vue-flow/core'
711-
712-
const instance = useVueFlow()
713-
714-
// find the node in the state by its id
715-
const edge = instance.findEdge(edgeId)
716-
717-
edge.data = {
718-
...edge.data,
719-
hello: 'world',
720-
}
721-
```
722-
723-
```vue [v-model]
724-
<script setup>
725-
import { ref } from 'vue'
726-
727-
const elements = ref([
728-
{
729-
id: '1',
730-
label: 'Node 1',
731-
position: { x: 50, y: 50 },
732-
data: {
733-
hello: 'world',
734-
}
735-
},
736-
{
737-
id: '2',
738-
label: 'Node 2',
739-
position: { x: 50, y: 250 },
740-
},
741-
{
742-
id: 'e1-2',
743-
source: '1',
744-
target: '2',
745-
},
746-
])
747-
748-
function onSomeEvent() {
749-
elements.value[2].data = {
750-
...elements.value[0].data,
751-
hello: 'world',
752-
}
753-
}
754-
</script>
755-
756-
<template>
757-
<VueFlow v-model="elements" />
758-
</template>
759-
```
760-
761-
:::

0 commit comments

Comments
 (0)