Skip to content

Commit fc2f36b

Browse files
bcakmakoglubcakmakoglu
committed
chore(docs): update custom node example
1 parent c381e6c commit fc2f36b

File tree

7 files changed

+149
-131
lines changed

7 files changed

+149
-131
lines changed

‎docs/examples/custom-node/App.vue

Lines changed: 63 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,86 @@
11
<script setup>
22
import { MiniMap } from '@vue-flow/minimap'
33
import { Position, VueFlow, useVueFlow } from '@vue-flow/core'
4-
import { h, onMounted, ref } from 'vue'
5-
import ColorSelectorNode from './CustomNode.vue'
4+
import { ref } from 'vue'
5+
import ColorSelectorNode from './ColorSelectorNode.vue'
66
import { presets } from './presets.js'
77
88
const { findNode } = useVueFlow()
99
10-
const elements = ref([])
11-
1210
const gradient = ref(false)
1311
1412
const bgColor = ref(presets.ayame)
1513
1614
const bgName = ref('AYAME')
1715
16+
const nodes = ref([
17+
{
18+
id: '1',
19+
type: 'color-selector',
20+
data: { color: bgColor.value },
21+
position: { x: 0, y: 50 },
22+
},
23+
{
24+
id: '2',
25+
type: 'output',
26+
position: { x: 350, y: 25 },
27+
targetPosition: Position.Left,
28+
},
29+
{
30+
id: '3',
31+
type: 'output',
32+
position: { x: 350, y: 200 },
33+
targetPosition: Position.Left,
34+
},
35+
])
36+
37+
const edges = ref([
38+
{
39+
id: 'e1a-2',
40+
source: '1',
41+
sourceHandle: 'a',
42+
target: '2',
43+
animated: true,
44+
style: () => ({
45+
stroke: bgColor.value,
46+
filter: 'invert(100%)',
47+
}),
48+
},
49+
{
50+
id: 'e1b-3',
51+
source: '1',
52+
sourceHandle: 'b',
53+
target: '3',
54+
animated: true,
55+
style: () => ({
56+
stroke: bgColor.value,
57+
filter: 'invert(100%)',
58+
}),
59+
},
60+
])
61+
1862
const connectionLineStyle = { stroke: '#fff' }
1963
2064
// minimap stroke color functions
2165
function nodeStroke(n) {
22-
if (n.type === 'input') {
23-
return '#0041d0'
24-
}
25-
if (n.type === 'custom') {
26-
return presets.sumi
66+
switch (n.type) {
67+
case 'input':
68+
return '#0041d0'
69+
case 'color-selector':
70+
return presets.sumi
71+
case 'output':
72+
return '#ff0072'
73+
default:
74+
return '#eee'
2775
}
28-
if (n.type === 'output') {
29-
return '#ff0072'
30-
}
31-
return '#eee'
3276
}
3377
3478
function nodeColor(n) {
35-
if (n.type === 'custom') {
79+
if (n.type === 'color-selector') {
3680
return bgColor.value
3781
}
38-
return '#fff'
39-
}
4082
41-
// output labels
42-
function outputColorLabel() {
43-
return h('div', {}, bgColor.value)
44-
}
45-
function outputNameLabel() {
46-
return h('div', {}, bgName.value)
83+
return '#fff'
4784
}
4885
4986
function onChange(color) {
@@ -61,66 +98,20 @@ function onGradient() {
6198
6299
findNode('3').hidden = true
63100
}
64-
65-
onMounted(() => {
66-
elements.value = [
67-
{
68-
id: '1',
69-
type: 'custom',
70-
data: { color: bgColor },
71-
position: { x: 0, y: 50 },
72-
},
73-
{
74-
id: '2',
75-
type: 'output',
76-
label: outputNameLabel,
77-
position: { x: 350, y: 25 },
78-
targetPosition: Position.Left,
79-
},
80-
{
81-
id: '3',
82-
type: 'output',
83-
label: outputColorLabel,
84-
position: { x: 350, y: 200 },
85-
targetPosition: Position.Left,
86-
},
87-
{
88-
id: 'e1a-2',
89-
source: '1',
90-
sourceHandle: 'a',
91-
target: '2',
92-
animated: true,
93-
style: () => ({
94-
stroke: bgColor.value,
95-
filter: 'invert(100%)',
96-
}),
97-
},
98-
{
99-
id: 'e1b-3',
100-
source: '1',
101-
sourceHandle: 'b',
102-
target: '3',
103-
animated: true,
104-
style: () => ({
105-
stroke: bgColor.value,
106-
filter: 'invert(100%)',
107-
}),
108-
},
109-
]
110-
})
111101
</script>
112102

113103
<template>
114104
<VueFlow
115-
v-model="elements"
116-
class="customnodeflow"
105+
:nodes="nodes"
106+
:edges="edges"
107+
class="custom-node-flow"
117108
:class="[gradient ? 'animated-bg-gradient' : '']"
118109
:style="{ backgroundColor: bgColor }"
119110
:connection-line-style="connectionLineStyle"
120111
:default-viewport="{ zoom: 1.5 }"
121112
fit-view-on-init
122113
>
123-
<template #node-custom="{ data }">
114+
<template #node-color-selector="{ data }">
124115
<ColorSelectorNode :data="data" @change="onChange" @gradient="onGradient" />
125116
</template>
126117

‎docs/examples/custom-node/ColorSelectorNode.vue

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<script setup>
2+
import { Handle, Position, useVueFlow } from '@vue-flow/core'
3+
import { colors } from './presets.js'
4+
5+
const props = defineProps({
6+
id: {
7+
type: String,
8+
required: true,
9+
},
10+
data: {
11+
type: Object,
12+
required: true,
13+
},
14+
})
15+
16+
const { updateNodeData } = useVueFlow()
17+
18+
function onSelect(color) {
19+
updateNodeData(props.id, { color: color.value }, { replace: true })
20+
}
21+
22+
function onGradient() {
23+
updateNodeData(props.id, { isGradient: true }, { replace: true })
24+
}
25+
</script>
26+
27+
<template>
28+
<div>Select a color</div>
29+
30+
<div
31+
class="color-selector"
32+
style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: 90%; margin: auto; gap: 4px"
33+
>
34+
<template v-for="color of colors" :key="color.name">
35+
<button :title="color.name" :style="{ backgroundColor: color.value }" type="button" @click="onSelect(color)" />
36+
</template>
37+
38+
<button class="animated-bg-gradient" title="gradient" type="button" @click="onGradient" />
39+
</div>
40+
41+
<!-- When using multiple handles of the same type, each handle should have a unique id -->
42+
<Handle
43+
id="a"
44+
type="source"
45+
:position="Position.Right"
46+
:style="{ backgroundColor: data.color, filter: 'invert(100%)', top: '10px' }"
47+
/>
48+
49+
<Handle
50+
id="b"
51+
type="source"
52+
:position="Position.Right"
53+
:style="{
54+
backgroundColor: data.color,
55+
filter: 'invert(100%)',
56+
bottom: '10px',
57+
top: 'auto',
58+
}"
59+
/>
60+
</template>

‎docs/examples/custom-node/CustomNode.vue

Lines changed: 0 additions & 49 deletions
This file was deleted.

‎docs/examples/custom-node/OutputNode.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<script setup>
2+
const props = defineProps();
3+
4+
const { }

‎docs/examples/custom-node/index.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export { default as CustomNodeApp } from './App.vue?raw'
2-
export { default as CustomNode } from './CustomNode.vue?raw'
2+
export { default as ColorSelectorNode } from './ColorSelectorNode.vue?raw'
3+
export { default as OutputNode } from './OutputNode.vue?raw'
34
export { default as CustomNodeCSS } from './style.css?inline'
45
export { default as ColorPresets } from './presets.js?raw'

‎docs/examples/custom-node/style.css

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.customnodeflow .vue-flow__node-custom {
1+
.custom-node-flow .vue-flow__node-color-selector {
22
border: 1px solid #777;
33
padding: 10px;
44
border-radius: 10px;
@@ -11,20 +11,30 @@
1111
max-width: 250px;
1212
}
1313

14-
.customnodeflow button {
14+
.custom-node-flow .vue-flow__node-color-selector .color-selector {
15+
display: flex;
16+
flex-direction: row;
17+
flex-wrap: wrap;
18+
justify-content: center;
19+
max-width: 90%;
20+
margin: auto;
21+
gap: 4px
22+
}
23+
24+
.custom-node-flow .vue-flow__node-color-selector .color-selector button {
25+
border: none;
26+
cursor: pointer;
1527
padding: 5px;
1628
width: 25px;
1729
height: 25px;
1830
border-radius: 25px;
1931
-webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
2032
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
21-
cursor: pointer;
2233
}
2334

24-
.customnodeflow button:hover {
25-
opacity: 0.9;
26-
transform: scale(105%);
27-
transition: 250ms all ease;
35+
.custom-node-flow .vue-flow__node-color-selector .color-selector button:hover {
36+
-webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
37+
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
2838
}
2939

3040
.animated-bg-gradient {

‎docs/examples/index.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { BasicApp, BasicCSS, BasicElements, BasicIcon } from './basic'
2-
import { ColorPresets, CustomNode, CustomNodeApp, CustomNodeCSS } from './custom-node'
2+
import { ColorPresets, ColorSelectorNode, CustomNodeApp, CustomNodeCSS, OutputNode } from './custom-node'
33
import { CustomConnectionLine, CustomConnectionLineApp } from './connectionline'
44
import { CustomEdge, CustomEdge2, CustomEdgeLabel, EdgeCSS, EdgesApp } from './edges'
55
import { NestedApp } from './nested'
@@ -30,7 +30,8 @@ export const exampleImports = {
3030
},
3131
customNode: {
3232
'App.vue': CustomNodeApp,
33-
'CustomNode.vue': CustomNode,
33+
'ColorSelectorNode.vue': ColorSelectorNode,
34+
'OutputNode.vue': OutputNode,
3435
'style.css': CustomNodeCSS,
3536
'presets.js': ColorPresets,
3637
},

0 commit comments

Comments
 (0)