@@ -206,42 +288,155 @@ The same as the step edge though with a border radius on the step (rounded step)
A simple straight path.
-
+
-
+
-## Custom Edges
+## User-Defined Edges
-In addition to the default edge types from the previous chapter, you can define any amount of custom edge-types.
-Edge-types are inferred from your edge's definition.
+On top of the default edge types mentioned earlier, you can create as many custom edge-types as you need.
+Edge-types are determined from your edges' definitions.
-```js{4}
-const edges = [
+::: code-group
+
+```js [edges
]
+import { ref } from 'vue'
+
+export const edges = ref([
{
id: 'e1-2',
- type: 'custom',
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',
+ }
+])
```
-Vue Flow will now try to resolve this edge-type to a component.
-First and foremost we will look for a definition in the `edgeTypes` object of the state.
-After that we will try to resolve the component to a globally registered one that matches the exact name.
-Finally, we will check if a template slot has been provided to fill the edge-type.
+```vue [CustomEdge.vue
]
+
+
+
+
+
+
+
+```
+
+```ts [edges
]
+import { ref } from 'vue'
+import type { Edge } from '@vue-flow/core'
+
+// You can pass 3 optional generic arguments to the Edge type, allowing you to define:
+// 1. The data object type
+// 2. The events object type
+// 3. The possible edge types
+
+interface CustomData {
+ hello: string
+}
+
+type CustomEdgeTypes = 'custom' | 'special'
+
+type CustomEdge = Edge
+
+export const edges = ref([
+ {
+ 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',
+ },
+
+ // 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',
+ }
+])
+```
+
+```vue [CustomEdge.vue ]
+
+
+
+
+
+
+
+```
+
+:::
+
+Vue Flow will then attempt to resolve this edge-type to a component.
+Priority is given to a definition in the edgeTypes object of the state.
+Next, it tries to match the component to a globally registered one with the same name.
+Finally, it searches for a provided template slot to fill in the edge-type.
+
+If no methods produce a result in resolving the component, the default edge-type is used as a fallback.
### Template slots
-The easiest way to define custom edges is, by passing them as template slots.
-Your custom edge-types are dynamically resolved to slot-names, meaning an edge with the type `custom`
-will expect a slot to have the name `edge-custom`.
-
-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`)
+One of the easiest ways to define custom edges is, by passing them as template slots.
+Dynamic resolution to slot-names is done for your user-defined edge-types,
+meaning a edge with the type `custom` is expected to have a slot named `#edge-custom`.
```vue{18,26}
-
-
-
-
-
-```
-
-### [Custom Edge Props](/typedocs/interfaces/EdgeProps)
-
-Your custom edges are wrapped so that the basic functions like selecting work.
-But you might want to extend on that functionality or implement your own business logic inside of edges, therefore
-your edges receive the following props:
+Your custom edges are enclosed so that fundamental functions like selecting operate.
+But you may wish to expand on these features or implement your business logic inside edges, thus your edges receive the following properties:
| Name | Definition | Type | Optional |
|---------------------|-------------------------------|------------------------------------------------|--------------------------------------------|
@@ -400,14 +545,74 @@ your edges receive the following props:
| markerStart | Edge marker id | string | |
| curvature | Edge path curvature | number | |
-### (Custom) Edge Events
+## Edge Events
-In addition to the event handlers that you can access through [`useVueFlow`](/guide/composables#useVueFlow/) or the Vue Flow component,
-you can also pass in event handlers in your initial edge definition, or you can access the edge events through the `events` prop passed
-to your edge components.
+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 `` component.
-```vue{19-26}
+::: code-group
+
+```vue [useVueFlow]
+
+
+
+
+```
+
+```vue [component]
+
-```
-As you can see above, you can also pass in custom event handlers. These will not be called by Vue Flow but can be used
-to forward callback functions to your custom components.
-The `click` handler is part of the [`EdgeEventsHandler`](/typedocs/types/EdgeEventsHandler) type, meaning it will be
-triggered when the edge is clicked.
-
-```vue
-
-
+
+
```
+
+:::
+
+
+
+
+ Interact to see events in browser console
+
+
+
+