Skip to content

Commit 070d78d

Browse files
bcakmakoglubcakmakoglu
committed
docs: update edge utils docs
1 parent 532d522 commit 070d78d

File tree

2 files changed

+150
-35
lines changed

2 files changed

+150
-35
lines changed

‎docs/src/guide/handle.md

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -58,16 +58,18 @@ Handles are positioned on their respective side using CSS with an `absolute` pos
5858
That means you can adjust what element a handle aligns itself with by wrapping it in a container that has a `relative` position.
5959

6060
```vue
61-
<div>
62-
<span>{{ data.label }}</span>
63-
64-
<div style="position: relative; padding: 10px">
65-
<Handle type="source" :position="Position.Right" />
61+
<template>
62+
<div>
63+
<span>{{ data.label }}</span>
6664
65+
<div style="position: relative; padding: 10px">
66+
<Handle type="source" :position="Position.Right" />
6767
68-
<Handle type="target" :position="Position.Left" />
68+
69+
<Handle type="target" :position="Position.Left" />
70+
</div>
6971
</div>
70-
</div>
72+
</template>
7173
```
7274

7375
## Multiple Handles

‎docs/src/guide/utils/edge.md

Lines changed: 141 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
# Edge
22

3-
All default edge components are exported and can be used or extended if necessary.
3+
Vue Flow exports a couple of utilities you can use to create your own custom edges without having to worry how to actually
4+
implement the edge path calculation.
5+
6+
This can be helpful if you don't want to actually change the way the edge path is calculated
7+
but just want to implement some custom logic on top of the regular edge behavior.
8+
9+
Alternatively, all default edge components are also exported and can be used to create custom edges.
410

511
```vue
612
<script lang="ts" setup>
713
// CustomEdge.vue
8-
import { EdgeProps, BezierEdge } from '@vue-flow/core'
14+
import { EdgeProps, BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '@vue-flow/core'
915
1016
const props = defineProps<EdgeProps>()
1117
@@ -17,54 +23,161 @@ const props = defineProps<EdgeProps>()
1723
</template>
1824
```
1925

20-
## Path utils
26+
## [getBezierPath](/typedocs/functions/getBezierPath)
27+
28+
- Details:
29+
30+
A function that returns a bezier path and center positions.
31+
32+
- Arguments:
33+
- `sourceX`: The x position of the source handle.
34+
- `sourceY`: The y position of the source handle.
35+
- `sourcePosition`: The position of the source handle.
36+
- `targetX`: The x position of the target handle.
37+
- `targetY`: The y position of the target handle.
38+
- `targetPosition`: The position of the target handle.
39+
- `curvature`: The curvature of the path.
40+
41+
- Returns:
42+
- `path`: A string representing the path.
43+
- `labelX`: The x position of the label.
44+
- `labelY`: The y position of the label.
45+
- `offsetX`: The x offset of the label.
46+
- `offsetY`: The y offset of the label.
47+
48+
- Example:
2149

22-
Vue Flow exports a couple of functions you can use to create your own custom edges without having to worry how to actually
23-
create a bezier path.
50+
```vue
51+
<script lang="ts" setup>
52+
import { computed } from "vue"
53+
import { BaseEdge, getBezierPath, EdgeProps } from '@vue-flow/core'
2454
25-
This can be helpful if you don't want to actually change the way the path is calculated but just want to implement some custom logic on top of the
26-
regular edge behavior.
55+
const props = defineProps<EdgeProps>()
56+
57+
const edgePathParams = computed(() => getBezierPath({ ...props, curvature: 0.5 }))
58+
</script>
59+
60+
<template>
61+
<BaseEdge :path="edgePathParams[0]" />
62+
</template>
63+
```
2764

28-
### [getBezierPath](/typedocs/functions/getBezierPath)
65+
## [getSimpleBezierPath](/typedocs/functions/getSimpleBezierPath)
2966

3067
- Details:
3168

32-
Returns a bezier path and center positions.
69+
A function that returns a simple bezier path (no curvature from and toward handles) and center positions.
3370

34-
### getBezierCenter (removed)
71+
- Arguments:
72+
- `sourceX`: The x position of the source handle.
73+
- `sourceY`: The y position of the source handle.
74+
- `sourcePosition`: The position of the source handle.
75+
- `targetX`: The x position of the target handle.
76+
- `targetY`: The y position of the target handle.
77+
- `targetPosition`: The position of the target handle.
3578

36-
::: warning
37-
This function has been removed. The edge center positions are returned by `getBezierPath` now.
38-
:::
79+
- Returns:
80+
- `path`: A string representing the path.
81+
- `labelX`: The x position of the label.
82+
- `labelY`: The y position of the label.
83+
- `offsetX`: The x offset of the label.
84+
- `offsetY`: The y offset of the label.
3985

40-
- Details:
86+
- Example:
87+
88+
```vue
89+
<script lang="ts" setup>
90+
import { computed } from "vue"
91+
import { BaseEdge, getSimpleBezierPath, EdgeProps } from '@vue-flow/core'
4192
42-
Returns a bezier path's center x and y values.
93+
const props = defineProps<EdgeProps>()
94+
95+
const edgePathParams = computed(() => getSimpleBezierPath(props))
96+
</script>
97+
98+
<template>
99+
<BaseEdge :path="edgePathParams[0]" />
100+
</template>
101+
```
43102

44-
### [getSimpleBezierPath](/typedocs/functions/getSimpleBezierPath)
103+
## [getSmoothStepPath](/typedocs/functions/getSmoothStepPath)
45104

46105
- Details:
47106

48-
Returns a simple bezier path (no curvature at handles) and center positions.
107+
A function that returns a smoothstep path (you can use a `borderRadius` 0 for a step path).
108+
109+
- Arguments:
110+
- `sourceX`: The x position of the source handle.
111+
- `sourceY`: The y position of the source handle.
112+
- `sourcePosition`: The position of the source handle.
113+
- `targetX`: The x position of the target handle.
114+
- `targetY`: The y position of the target handle.
115+
- `targetPosition`: The position of the target handle.
116+
- `centerX`: The x position of the center.
117+
- `centerY`: The y position of the center.
118+
- `offset`: The offset of the path.
119+
- `borderRadius`: The border radius of the path.
120+
121+
::: info
122+
You can use `borderRadius: 0` to create a step path with no smooth corners.
123+
:::
124+
125+
- Returns:
126+
- `path`: A string representing the path.
127+
- `labelX`: The x position of the label.
128+
- `labelY`: The y position of the label.
129+
- `offsetX`: The x offset of the label.
130+
- `offsetY`: The y offset of the label.
131+
132+
- Example:
49133

50-
### getSimpleBezierCenter (removed)
134+
```vue
135+
<script lang="ts" setup>
136+
import { computed } from "vue"
137+
import { BaseEdge, getSmoothStepPath, EdgeProps } from '@vue-flow/core'
51138
52-
::: warning
53-
This function has been removed. The edge center positions are returned by `getSimpleBezierPath` now.
54-
:::
139+
const props = defineProps<EdgeProps>()
55140
56-
- Details:
141+
const edgePathParams = computed(() => getSmoothStepPath({ ...props, borderRadius: 8 }))
142+
</script>
57143
58-
Returns a simple bezier path's center x and y values.
144+
<template>
145+
<BaseEdge :path="edgePathParams[0]" />
146+
</template>
147+
```
59148

60-
### [getSmoothStepPath](/typedocs/functions/getSmoothStepPath)
149+
## [getStraightPath](/typedocs/functions/getStraightPath)
61150

62151
- Details:
63152

64-
Returns a smoothstep path (use border-radius 0 for a step path).
153+
A function that returns a straight path.
65154

66-
### [getStraightPath](/typedocs/functions/getStraightPath)
155+
- Arguments:
156+
- `sourceX`: The x position of the source handle.
157+
- `sourceY`: The y position of the source handle.
158+
- `targetX`: The x position of the target handle.
159+
- `targetY`: The y position of the target handle.
67160

68-
- Details:
161+
- Returns:
162+
- `path`: A string representing the path.
163+
- `labelX`: The x position of the label.
164+
- `labelY`: The y position of the label.
165+
- `offsetX`: The x offset of the label.
166+
- `offsetY`: The y offset of the label.
69167

70-
Returns a straight path.
168+
- Example:
169+
170+
```vue
171+
<script lang="ts" setup>
172+
import { computed } from "vue"
173+
import { BaseEdge, getStraightPath, EdgeProps } from '@vue-flow/core'
174+
175+
const props = defineProps<EdgeProps>()
176+
177+
const edgePathParams = computed(() => getStraightPath(props))
178+
</script>
179+
180+
<template>
181+
<BaseEdge :path="edgePathParams[0]" />
182+
</template>
183+
```

0 commit comments

Comments
 (0)