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

docs: update examples

Browse Source
This commit is contained in:
bcakmakoglu
2022-05-27 23:36:01 +02:00
committed by Braks
parent d55aba3f17
commit 8e3f1a394d
14 changed files with 170 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/examples/custom-node/App.vue
+47 -12
View File
@@ -1,24 +1,29 @@
<script setup>
import { Background, ConnectionMode, MiniMap, Position, VueFlow } from '@braks/vue-flow'
import { h, onMounted, ref } from 'vue'
import { ConnectionMode, MiniMap, Position, VueFlow, useVueFlow } from '@braks/vue-flow'
import { computed, h, onMounted, ref } from 'vue'
import ColorSelectorNode from './CustomNode.vue'
import { presets } from './presets.js'
const { getNode } = useVueFlow()
const outputColorNode = computed(() => getNode.value('3'))
const elements = ref([])
const gradient = ref(false)
const bgColor = ref(presets.ayame)
const bgName = ref('AYAME')
const connectionLineStyle = { stroke: '#fff' }
const snapGrid = [16, 16]
// minimap stroke color functions
const nodeStroke = (n) => {
if (n.type === 'input') return '#0041d0'
if (n.type === 'custom') return presets.sumi
if (n.type === 'output') return '#ff0072'
return '#eee'
}
const nodeColor = (n) => {
if (n.type === 'custom') return bgColor.value
return '#fff'
@@ -29,8 +34,19 @@ const outputColorLabel = () => h('div', {}, bgColor.value)
const outputNameLabel = () => h('div', {}, bgName.value)
const onChange = (color) => {
gradient.value = false
bgColor.value = color.value
bgName.value = color.name
outputColorNode.value.hidden = false
}
const onGradient = () => {
gradient.value = true
bgColor.value = null
bgName.value = 'gradient'
outputColorNode.value.hidden = true
}
onMounted(() => {
@@ -52,12 +68,31 @@ onMounted(() => {
id: '3',
type: 'output',
label: outputColorLabel,
position: { x: 350, y: 175 },
position: { x: 350, y: 200 },
targetPosition: Position.Left,
},
{ id: 'e1a-2', source: '1', sourceHandle: 'a', target: '2', animated: true, style: { stroke: '#fff' } },
{ id: 'e1b-3', source: '1', sourceHandle: 'b', target: '3', animated: true, style: { stroke: '#fff' } },
{
id: 'e1a-2',
source: '1',
sourceHandle: 'a',
target: '2',
animated: true,
style: () => ({
stroke: bgColor.value,
filter: 'invert(100%)',
}),
},
{
id: 'e1b-3',
source: '1',
sourceHandle: 'b',
target: '3',
animated: true,
style: () => ({
stroke: bgColor.value,
filter: 'invert(100%)',
}),
},
]
})
</script>
@@ -65,18 +100,18 @@ onMounted(() => {
<template>
<VueFlow
v-model="elements"
class="customnodeflow"
:class="[gradient ? 'animated-bg-gradient' : '']"
:style="{ backgroundColor: bgColor }"
:connection-mode="ConnectionMode.Loose"
:connection-line-style="connectionLineStyle"
:snap-to-grid="true"
:snap-grid="snapGrid"
:default-zoom="1.5"
:fit-view-on-init="true"
>
<template #node-custom="props">
<ColorSelectorNode v-bind="props" @change="onChange" />
<ColorSelectorNode :data="props.data" @change="onChange" @gradient="onGradient" />
</template>
<Background :size="0.7" pattern-color="black" />
<MiniMap :node-stroke-color="nodeStroke" :node-color="nodeColor" />
</VueFlow>
</template>
docs/components/examples/custom-node/CustomNode.vue
+15 -20
View File
@@ -10,11 +10,7 @@ const props = defineProps({
},
})
const emit = defineEmits(['change'])
const targetHandleStyle = { background: '#555' }
const sourceHandleStyleA = { ...targetHandleStyle, top: '10px' }
const sourceHandleStyleB = { ...targetHandleStyle, bottom: '10px', top: 'auto' }
const emit = defineEmits(['change', 'gradient'])
const onConnect = (params) => console.log('handle onConnect', params)
@@ -22,6 +18,10 @@ const onSelect = (color) => {
emit('change', color)
}
const onGradient = () => {
emit('gradient')
}
const colors = computed(() => {
return Object.keys(presets).map((color) => {
return {
@@ -34,30 +34,25 @@ const colors = computed(() => {
const selectedColor = computed(() => {
return colors.value.find((color) => color.value === props.data.color)
})
</script>
<script>
export default {
inheritAttrs: false,
}
const sourceHandleStyleA = computed(() => ({ backgroundColor: props.data.color, filter: 'invert(100%)', top: '10px' }))
const sourceHandleStyleB = computed(() => ({
backgroundColor: props.data.color,
filter: 'invert(100%)',
bottom: '10px',
top: 'auto',
}))
</script>
<template>
<div v-if="selectedColor">
Select a color
</div>
<div>Select a color</div>
<div
style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: 90%; margin: auto; gap: 3px"
>
<template v-for="color of colors" :key="color.name">
<button
:title="color.name"
:style="{ backgroundColor: color.value }"
style="padding: 3px; width: 25px; height: 25px"
type="button"
@click="onSelect(color)"
></button>
<button :title="color.name" :style="{ backgroundColor: color.value }" type="button" @click="onSelect(color)"></button>
</template>
<button class="animated-bg-gradient" title="gradient" type="button" @click="onGradient"></button>
</div>
<Handle id="a" type="source" :position="Position.Right" :style="sourceHandleStyleA" />
<Handle id="b" type="source" :position="Position.Right" :style="sourceHandleStyleB" />
docs/components/examples/custom-node/presets.js
+2 -2
View File
@@ -1,4 +1,6 @@
export const presets = {
sumi: '#1C1C1C',
gofun: '#FFFFFB',
byakuroku: '#A8D8B9',
mizu: '#81C7D4',
asagi: '#33A6B8',
@@ -11,10 +13,8 @@ export const presets = {
konjyo: '#113285',
fuji: '#8B81C3',
ayame: '#6F3381',
gofun: '#FFFFFB',
torinoko: '#DAC9A6',
kurotsurubami: '#0B1013',
sumi: '#1C1C1C',
ohni: '#F05E1C',
kokikuchinashi: '#FB9966',
beniukon: '#E98B2A',
docs/components/examples/custom-node/style.css
+62 -1
View File
@@ -1,4 +1,4 @@
.vue-flow__node-custom {
.customnodeflow .vue-flow__node-custom {
border: 1px solid #777;
padding: 10px;
border-radius: 10px;
@@ -10,3 +10,64 @@
gap: 10px;
max-width: 250px;
}
.customnodeflow button {
padding: 5px;
width: 25px;
height: 25px;
border-radius: 25px;
-webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.customnodeflow button:hover {
opacity: 0.9;
transform: scale(105%);
transition: 250ms all ease;
}
.animated-bg-gradient {
background: linear-gradient(122deg, #6f3381, #81c7d4, #fedfe1, #fffffb);
background-size: 800% 800%;
-webkit-animation: gradient 4s ease infinite;
-moz-animation: gradient 4s ease infinite;
animation: gradient 4s ease infinite;
}
@-webkit-keyframes gradient {
0% {
background-position: 0% 22%
}
50% {
background-position: 100% 79%
}
100% {
background-position: 0% 22%
}
}
@-moz-keyframes gradient {
0% {
background-position: 0% 22%
}
50% {
background-position: 100% 79%
}
100% {
background-position: 0% 22%
}
}
@keyframes gradient {
0% {
background-position: 0% 22%
}
50% {
background-position: 100% 79%
}
100% {
background-position: 0% 22%
}
}
docs/components/examples/edges/App.vue
+15 -15
View File
@@ -6,36 +6,36 @@ import CustomEdge2 from './CustomEdge2.vue'
import CustomEdgeLabel from './CustomEdgeLabel.vue'
const elements = ref([
{ id: '1', type: 'input', label: 'Input 1', position: { x: 250, y: 0 } },
{ id: '1', type: 'input', label: 'Start', position: { x: 50, y: 0 }, style: { borderColor: '#10b981' } },
{ id: '2', label: 'Node 2', position: { x: 150, y: 100 } },
{ id: '2a', label: 'Node 2a', position: { x: 0, y: 180 } },
{ id: '3', label: 'Node 3', position: { x: 250, y: 200 } },
{ id: '4', label: 'Node 4', position: { x: 400, y: 300 } },
{ id: '3a', label: 'Node 3a', position: { x: 150, y: 300 } },
{ id: '5', label: 'Node 5', position: { x: 250, y: 400 } },
{ id: '6', type: 'output', label: 'Output 6', position: { x: 50, y: 550 } },
{ id: '7', type: 'output', label: 'Output 7', position: { x: 250, y: 550 } },
{ id: '8', type: 'output', label: 'Output 8', position: { x: 525, y: 600 } },
{ id: '9', type: 'output', label: 'Output 9', position: { x: 675, y: 500 } },
{ id: '3a', label: 'Node 3a', position: { x: 175, y: 300 } },
{ id: '5', label: 'Node 5', position: { x: 200, y: 400 } },
{ id: '6', type: 'output', label: 'Output 6', position: { x: 0, y: 350 } },
{ id: '7', type: 'output', label: 'Output 7', position: { x: 50, y: 600 } },
{ id: '8', type: 'output', label: 'Output 8', position: { x: 350, y: 600 } },
{ id: '9', type: 'output', label: 'Output 9', position: { x: 550, y: 400 } },
{ id: 'e1-2', source: '1', target: '2', label: 'bezier edge (default)', class: 'normal-edge' },
{ id: 'e2-2a', source: '2', target: '2a', type: 'smoothstep', label: 'smoothstep edge' },
{ id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
{ id: 'e3-4', source: '3', target: '4', type: 'straight', label: 'straight edge' },
{ id: 'e3-3a', source: '3', target: '3a', type: 'straight', label: 'label only edge', style: { stroke: 'none' } },
{ id: 'e3-5', source: '4', target: '5', animated: true, label: 'animated styled edge', style: { stroke: 'red' } },
{ id: 'e3-5', source: '4', target: '5', animated: true, label: 'animated styled edge', style: { stroke: '#10b981' } },
{
id: 'e5-6',
source: '5',
id: 'e2a-6',
source: '2a',
target: '6',
label: () => h(CustomEdgeLabel, { label: 'custom label text' }),
labelStyle: { fill: 'red', fontWeight: 700 },
labelStyle: { fill: '#10b981', fontWeight: 700 },
markerEnd: MarkerType.Arrow,
},
{
id: 'e5-7',
source: '5',
target: '7',
label: 'label with styled bg',
label: 'label with bg',
labelBgPadding: [8, 4],
labelBgBorderRadius: 4,
labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 },
@@ -50,11 +50,11 @@ const elements = ref([
markerEnd: MarkerType.ArrowClosed,
},
{
id: 'e5-9',
source: '5',
id: 'e4-9',
source: '4',
target: '9',
type: 'custom2',
data: { text: 'custom edge 2' },
data: { text: 'styled custom edge label' },
},
])
</script>
docs/components/examples/edges/CustomEdge.vue
+1 -1
View File
@@ -93,7 +93,7 @@ export default {
>
<body style="display: flex; align-items: center; justify-content: center">
<div>
<button ref="btn" class="edgebutton animated-text-gradient" @click="(event) => onClick(event, id)">×</button>
<button ref="btn" class="edgebutton" @click="(event) => onClick(event, id)">×</button>
</div>
</body>
</foreignObject>
docs/components/examples/edges/CustomEdge2.vue
+1 -1
View File
@@ -89,7 +89,7 @@ export default {
:label="props.data?.text"
:label-style="{ fill: 'white' }"
:label-show-bg="true"
:label-bg-style="{ fill: 'red' }"
:label-bg-style="{ fill: '#10b981' }"
:label-bg-padding="[2, 4]"
:label-bg-border-radius="2"
@click="onClick"
docs/components/examples/edges/style.css
+3 -27
View File
@@ -1,34 +1,10 @@
.edgebutton {
color: whitesmoke;
border-radius: 999px;
cursor: pointer;
}
.edgebutton:hover {
box-shadow: 0 0 0 2px pink, 0 0 0 4px #f05f75;
}
.animated-text-gradient {
background: linear-gradient(122deg, #6f3381, #81c7d4, #fedfe1, #fffffb);
background-size: 800% 800%;
-webkit-animation: textgradient 4s ease infinite;
-moz-animation: textgradient 4s ease infinite;
animation: textgradient 4s ease infinite;
}
@-webkit-keyframes textgradient {
0%{background-position:0% 22%}
50%{background-position:100% 79%}
100%{background-position:0% 22%}
}
@-moz-keyframes textgradient {
0%{background-position:0% 22%}
50%{background-position:100% 79%}
100%{background-position:0% 22%}
}
@keyframes textgradient {
0%{background-position:0% 22%}
50%{background-position:100% 79%}
100%{background-position:0% 22%}
transform: scale(110%);
transition: all ease 500ms;
box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.5), 0 0 0 4px #10b981;
}
docs/components/examples/nested/App.vue
+6 -11
View File
@@ -6,12 +6,11 @@ const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
fitViewOnInit: true,
connectionMode: ConnectionMode.Loose,
nodes: [
{ id: '1', type: 'input', label: 'node', position: { x: 250, y: 0 }, class: 'light' },
{ id: '1', type: 'input', label: 'node', position: { x: 250, y: 0 } },
{
id: '2',
label: 'parent node',
position: { x: 100, y: 100 },
class: 'light',
style: { backgroundColor: 'rgba(16, 185, 129, 0.5)', width: '200px', height: '200px' },
},
{
@@ -20,19 +19,16 @@ const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
position: { x: 10, y: 50 },
parentNode: '2',
},
{ id: '3', label: 'node', position: { x: 350, y: 100 }, class: 'light' },
{
id: '4',
label: 'parent node',
position: { x: 320, y: 300 },
class: 'light',
style: { backgroundColor: 'rgba(16, 185, 129, 0.5)', width: '300px', height: '300px' },
position: { x: 320, y: 175 },
style: { backgroundColor: 'rgba(16, 185, 129, 0.5)', width: '400px', height: '300px' },
},
{
id: '4a',
label: 'child node',
position: { x: 15, y: 65 },
class: 'light',
extent: 'parent',
parentNode: '4',
},
@@ -40,7 +36,6 @@ const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
id: '4b',
label: 'nested parent node',
position: { x: 15, y: 120 },
class: 'light',
style: { backgroundColor: 'rgba(139, 92, 246, 0.5)', height: '150px', width: '270px' },
parentNode: '4',
},
@@ -48,20 +43,20 @@ const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
id: '4b1',
label: 'nested child node',
position: { x: 20, y: 40 },
class: 'light',
parentNode: '4b',
},
{
id: '4b2',
label: 'nested child node',
position: { x: 100, y: 100 },
class: 'light',
parentNode: '4b',
},
{ id: '4c', label: 'child node', position: { x: 200, y: 65 }, parentNode: '4' },
],
edges: [
{ id: 'e1-2', source: '1', target: '2' },
{ id: 'e1-3', source: '1', target: '3' },
{ id: 'e1-4', source: '1', target: '4' },
{ id: 'e1-4c', source: '1', target: '4c' },
{ id: 'e2a-4a', source: '2a', target: '4a' },
{ id: 'e3-4', source: '3', target: '4' },
{ id: 'e3-4b', source: '3', target: '4b' },
docs/components/examples/stress/App.vue
+2 -2
View File
@@ -3,7 +3,7 @@ import { VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
import { ref } from 'vue'
import { getElements } from './utils.js'
const { nodes, edges } = getElements(10, 10)
const { nodes, edges } = getElements(15, 15)
const elements = ref([...nodes, ...edges])
const { onPaneReady } = useVueFlow()
@@ -29,7 +29,7 @@ const updatePos = () =>
</script>
<template>
<VueFlow v-model="elements">
<VueFlow v-model="elements" :min-zoom="0.1">
<div style="position: absolute; right: 10px; top: 10px; z-index: 4">
<button style="margin-right: 5px" @click="updatePos">update positions</button>
<button style="margin-right: 5px" @click="toggleClass">toggle class</button>