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

docs: documentation for new edge events property

Browse Source
This commit is contained in:
bcakmakoglu
2022-06-23 19:13:50 +02:00
committed by Braks
parent 730f49e879
commit 905a6fbaa0
2 changed files with 100 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/guide/edge.md
+97 -28
View File
@@ -324,31 +324,100 @@ 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 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 edges receive the following props:
| Name | Definition | Type | Optional | | Name | Definition | Type | Optional |
|---------------------|-----------------------------|-------------------|----------| |---------------------|-------------------------------|----------------------------------------------------|----------|
| id | Edge id | string | false | | id | Edge id | string | false |
| source | The source node id | string | false | | source | The source node id | string | false |
| target | The target node id | string | false | | target | The target node id | string | false |
| sourceNode | The source node | GraphNode | false | | sourceNode | The source node | GraphNode | false |
| targetNode | The target node | GraphNode | false | | targetNode | The target node | GraphNode | false |
| sourceX | X position of source handle | number | false | | sourceX | X position of source handle | number | false |
| sourceY | Y position of source handle | number | false | | sourceY | Y position of source handle | number | false |
| targetX | X position of target handle | number | false | | targetX | X position of target handle | number | false |
| targetY | Y position of target handle | number | false | | targetY | Y position of target handle | number | false |
| type | Edge type | string | true | | type | Edge type | string | true |
| targetPosition | Target handle position | Position | true | | sourceHandleId | Source handle id | string | true |
| sourcePosition | Source handle position | Position | true | | targetHandleId | Target handle id | string | true |
| sourceHandleId | Source handle id | string | true | | data | Custom data object | Any object | true |
| targetHandleId | Target handle id | string | true | | events | Edge events and custom events | [EdgeEventsOn](/typedocs/types/EdgeEventsOn.html/) | true |
| data | Custom data object | Any object | true | | label | Edge label | string, Component | true |
| label | Edge label | string, Component | true | | labelStyle | Additional label styles | CSSProperties | true |
| labelStyle | Additional label styles | CSSProperties | true | | labelShowBg | Enable/Disable label bg | boolean | true |
| labelShowBg | Enable/Disable label bg | boolean | true | | labelBgPadding | Edge label bg padding | number | true |
| labelBgPadding | Edge label bg padding | number | true | | labelBgBorderRadius | Edge label bg border radius | number | true |
| labelBgBorderRadius | Edge label bg border radius | number | true | | selected | Is edge selected | boolean | true |
| selected | Is edge selected | boolean | true | | animated | Is edge animated | boolean | true |
| animated | Is edge animated | boolean | true | | updatable | Is edge updatable | boolean | true |
| updatable | Is edge updatable | boolean | true | | markerStart | Edge marker id | string | true |
| markerStart | Edge marker | string | true | | markerEnd | Edge marker id | string | true |
| markerEnd | Edge marker | string | true | | curvature | Edge path curvature | number | true |
| curvature | Edge path curvature | number | true |
### [(Custom) Edge Events](/typedocs/interfaces/EdgeEvents.html/)
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 node definition, or you can access the node events through the `events` prop passed
to your node components.
```vue:no-line-numbers{19-26}
<script setup>
import { VueFlow } from '@braks/vue-flow'
const elements = ref([
{
id: '1',
label: 'Node 1',
position: { x: 50, y: 50 },
},
{
id: '2',
label: 'Node 2',
position: { x: 50, y: 150 },
},
{
id: 'edge1-2',
source: '1',
target: '2',
events: {
click: () => {
console.log('Edge clicked')
},
change: () => {
console.log('Something changed')
},
},
}
])
</script>
```
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.html) type, meaning it will be
triggered when the edge is clicked.
```vue:no-line-numbers
<script lang="ts" setup>
import type { EdgeProps, EdgeEventsOn } from '@braks/vue-flow'
// define your events
interface CustomEdgeEvents {
click: EdgeEventsOn['click']
customEvent: (input: string) => void
}
interface CustomEdgeProps extends EdgeProps<any, CustomEdgeEvents> {
id: string
events: CustomEdgeEvents
}
props.events.click(() => {
console.log(`Edge ${props.id} clicked`)
})
// custom events are just functions, they are not hooks which you can listen to like `click`
props.events.customEvent('custom event triggered')
</script>
<template>
<!-- Omitted for simplicty -->
</template>
```
docs/src/guide/node.md
+3 -3
View File
@@ -361,12 +361,12 @@ const elements = ref([
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 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. to forward callback functions to your custom components.
The `click` handler is part of the [`NodeEvents`](/typedocs/interfaces/NodeEvents.html) interface, meaning it will be The `click` handler is part of the [`NodeEventsHandler`](/typedocs/types/NodeEventsHandler.html) interface, meaning it will be
triggered when the node is clicked. triggered when the node is clicked.
```vue:no-line-numbers ```vue:no-line-numbers
<script setup> <script lang="ts" setup>
import { NodeProps, NodeEventsOn } from '@braks/vue-flow' import type { NodeProps, NodeEventsOn } from '@braks/vue-flow'
// define your events // define your events
interface CustomNodeEvents { interface CustomNodeEvents {