Skip to content

Commit fe239b5

Browse files
bcakmakoglubcakmakoglu
committed
docs(examples): add edge markers example
Signed-off-by: braks <[email protected]>
1 parent 43c54b0 commit fe239b5

File tree

8 files changed

+278
-0
lines changed

8 files changed

+278
-0
lines changed

‎docs/examples/edge-markers/App.vue

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<script setup>
2+
import { ref } from 'vue'
3+
import { MarkerType, VueFlow } from '@vue-flow/core'
4+
import { Background } from '@vue-flow/background'
5+
import CustomEdge from './CustomEdge.vue'
6+
7+
const nodes = ref([
8+
{ id: '1', position: { x: 0, y: 0 }, data: { label: 'Select me for diamond markers' } },
9+
{ id: '2', position: { x: 0, y: 150 }, data: { label: 'Select me for circle markers' } },
10+
{ id: '3', position: { x: 200, y: 0 }, data: { label: 'Node 3' } },
11+
{ id: '4', position: { x: 200, y: 150 }, data: { label: 'Node 4' } },
12+
{ id: '5', position: { x: 400, y: 0 }, data: { label: 'Node 5' } },
13+
{ id: '6', position: { x: 400, y: 150 }, data: { label: 'Node 6' } },
14+
])
15+
16+
const edges = ref([
17+
// This edge uses a custom marker defined in CustomMarker.vue
18+
{ id: '1-2', source: '1', target: '2', type: 'custom' },
19+
{
20+
id: '3-4',
21+
source: '3',
22+
target: '4',
23+
label: 'Marker Arrow',
24+
// Use MarkerType enum to set the marker
25+
markerEnd: MarkerType.Arrow,
26+
markerStart: MarkerType.Arrow,
27+
},
28+
{
29+
id: '5-6',
30+
source: '5',
31+
target: '6',
32+
label: 'Marker ArrowClosed',
33+
// EdgeMarker object allows to customize the marker
34+
markerEnd: {
35+
type: MarkerType.ArrowClosed,
36+
color: '#ff0072',
37+
},
38+
markerStart: {
39+
type: MarkerType.ArrowClosed,
40+
color: '#ff0072',
41+
},
42+
},
43+
])
44+
</script>
45+
46+
<template>
47+
<VueFlow :nodes="nodes" :edges="edges" fit-view-on-init>
48+
<template #edge-custom="edgeProps">
49+
<CustomEdge v-bind="edgeProps" />
50+
</template>
51+
52+
<Background />
53+
</VueFlow>
54+
</template>

‎docs/examples/edge-markers/CustomEdge.vue

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<script setup>
2+
import { BaseEdge, getBezierPath, useVueFlow } from '@vue-flow/core'
3+
import { computed } from 'vue'
4+
import CustomMarker from './CustomMarker.vue'
5+
6+
const props = defineProps({
7+
id: {
8+
type: String,
9+
required: true,
10+
},
11+
sourceX: {
12+
type: Number,
13+
required: true,
14+
},
15+
sourceY: {
16+
type: Number,
17+
required: true,
18+
},
19+
targetX: {
20+
type: Number,
21+
required: true,
22+
},
23+
targetY: {
24+
type: Number,
25+
required: true,
26+
},
27+
sourcePosition: {
28+
type: String,
29+
required: true,
30+
},
31+
targetPosition: {
32+
type: String,
33+
required: true,
34+
},
35+
source: {
36+
type: String,
37+
required: true,
38+
},
39+
target: {
40+
type: String,
41+
required: true,
42+
},
43+
data: {
44+
type: Object,
45+
required: false,
46+
},
47+
})
48+
49+
const { findNode } = useVueFlow()
50+
51+
const path = computed(() => getBezierPath(props))
52+
53+
const markerId = computed(() => `${props.id}-marker`)
54+
55+
const markerColor = computed(() => {
56+
const sourceNode = findNode(props.source)
57+
const targetNode = findNode(props.target)
58+
59+
if (sourceNode.selected) {
60+
return '#ff0072'
61+
}
62+
63+
if (targetNode.selected) {
64+
return '#2563eb'
65+
}
66+
67+
return '#4a5568'
68+
})
69+
70+
const markerType = computed(() => {
71+
const sourceNode = findNode(props.source)
72+
const targetNode = findNode(props.target)
73+
74+
if (sourceNode.selected) {
75+
return 'diamond'
76+
}
77+
78+
if (targetNode.selected) {
79+
return 'circle'
80+
}
81+
82+
return 'square'
83+
})
84+
</script>
85+
86+
<script>
87+
export default {
88+
inheritAttrs: false,
89+
}
90+
</script>
91+
92+
<template>
93+
<BaseEdge
94+
:id="id"
95+
:path="path[0]"
96+
:marker-end="`url(#${markerId})`"
97+
:marker-start="`url(#${markerId})`"
98+
:label="`${markerType} marker`"
99+
:label-x="path[1]"
100+
:label-y="path[2]"
101+
label-bg-style="fill: whitesmoke"
102+
/>
103+
104+
<CustomMarker :id="markerId" :type="markerType" :stroke="markerColor" :stroke-width="2" :width="20" :height="20" />
105+
</template>

‎docs/examples/edge-markers/CustomMarker.vue

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<script setup>
2+
defineProps({
3+
id: {
4+
type: String,
5+
required: true,
6+
},
7+
type: {
8+
type: String,
9+
required: true,
10+
},
11+
stroke: {
12+
type: String,
13+
required: false,
14+
default: '#b1b1b7',
15+
},
16+
fill: {
17+
type: String,
18+
required: false,
19+
default: '#b1b1b7',
20+
},
21+
strokeWidth: {
22+
type: Number,
23+
required: false,
24+
default: 1,
25+
},
26+
width: {
27+
type: Number,
28+
required: false,
29+
default: 12.5,
30+
},
31+
height: {
32+
type: Number,
33+
required: false,
34+
default: 12.5,
35+
},
36+
})
37+
</script>
38+
39+
<template>
40+
<svg class="vue-flow__marker vue-flow__container">
41+
<defs>
42+
<marker
43+
:id="id"
44+
class="vue-flow__arrowhead"
45+
viewBox="-10 -10 20 20"
46+
refX="0"
47+
refY="0"
48+
:markerWidth="width"
49+
:markerHeight="height"
50+
markerUnits="strokeWidth"
51+
orient="auto-start-reverse"
52+
>
53+
<path
54+
v-if="type === 'diamond'"
55+
:style="{
56+
stroke,
57+
strokeWidth,
58+
}"
59+
stroke-linecap="round"
60+
stroke-linejoin="round"
61+
:fill="fill"
62+
d="M 0,-5 L 5,0 L 0,5 L -5,0 Z"
63+
/>
64+
65+
<path
66+
v-if="type === 'circle'"
67+
:style="{
68+
stroke,
69+
strokeWidth,
70+
}"
71+
stroke-linecap="round"
72+
stroke-linejoin="round"
73+
:fill="fill"
74+
d="M 0,-4 a 4,4 0 1,0 0,8 a 4,4 0 1,0 0,-8"
75+
/>
76+
77+
<path
78+
v-if="type === 'square'"
79+
:style="{
80+
stroke,
81+
strokeWidth,
82+
}"
83+
stroke-linecap="round"
84+
stroke-linejoin="round"
85+
:fill="fill"
86+
d="M -4 -4 H 4 V 4 H -4 Z"
87+
/>
88+
</marker>
89+
</defs>
90+
</svg>
91+
</template>

‎docs/examples/edge-markers/index.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export { default as EdgeMarkersApp } from './App.vue?raw'
2+
export { default as EdgeMarkersEdge } from './CustomEdge.vue?raw'
3+
export { default as EdgeMarkersMarker } from './CustomMarker.vue?raw'
4+
export { default as EdgeMarkersCSS } from './style.css?inline'

‎docs/examples/edge-markers/style.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.vue-flow__handle {
2+
opacity: 0;
3+
height: 0 !important;
4+
width: 0 !important;
5+
min-width: 0 !important;
6+
min-height: 0 !important;
7+
}
8+
9+
.vue-flow__edges {
10+
z-index: 9999 !important;
11+
}

‎docs/examples/index.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { SimpleLayoutApp, SimpleLayoutElements, SimpleLayoutIcon, useSimpleLayou
2323
import { LoopbackApp, LoopbackCSS, LoopbackEdge } from './loopback'
2424
import { MathApp, MathCSS, MathElements, MathIcon, MathOperatorNode, MathResultNode, MathValueNode } from './math'
2525
import { ConfirmApp, ConfirmDialog, useDialog } from './confirm-delete'
26+
import { EdgeMarkersApp, EdgeMarkersCSS, EdgeMarkersEdge, EdgeMarkersMarker } from './edge-markers'
2627

2728
export const exampleImports = {
2829
basic: {
@@ -170,4 +171,10 @@ export const exampleImports = {
170171
'LoopbackEdge.vue': LoopbackEdge,
171172
'style.css': LoopbackCSS,
172173
},
174+
markers: {
175+
'App.vue': EdgeMarkersApp,
176+
'CustomEdge.vue': EdgeMarkersEdge,
177+
'CustomMarker.vue': EdgeMarkersMarker,
178+
'style.css': EdgeMarkersCSS,
179+
},
173180
}

‎docs/src/.vitepress/config.mts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,7 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
244244
{ text: 'Updatable Edge', link: '/examples/edges/updatable-edge' },
245245
{ text: 'Custom Connection Line', link: '/examples/edges/connection-line' },
246246
{ text: 'Connection Validation', link: '/examples/edges/validation' },
247+
{ text: 'Edge Markers', link: '/examples/edges/markers' },
247248
{ text: 'Connection Radius', link: '/examples/edges/connection-radius' },
248249
{ text: 'Loopback Edge', link: '/examples/edges/loopback' },
249250
],

‎docs/src/examples/edges/markers.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Edge Markers
2+
3+
<div class="mt-6">
4+
<Repl example="markers"></Repl>
5+
</div>

0 commit comments

Comments
 (0)