docs: Add acknowledgement node to intro
# What's changed? * Move acknowledgement to bottom of page above footer * Add acknowledgement node that scrolls down * Reword home page
This commit is contained in:
Braks
@@ -0,0 +1,110 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { Position, Elements, VueFlow, Controls, MiniMap, Background, useVueFlow } from '@braks/vue-flow'
|
||||
|
||||
const elements = ref<Elements>([
|
||||
{
|
||||
id: '1',
|
||||
style: { width: '75px' },
|
||||
type: 'input',
|
||||
sourcePosition: Position.Right,
|
||||
label: 'input',
|
||||
position: { x: 25, y: 120 },
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
label: 'A',
|
||||
targetPosition: Position.Left,
|
||||
sourcePosition: Position.Right,
|
||||
position: { x: 150, y: 25 },
|
||||
style: { width: '75px' },
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
label: 'B',
|
||||
targetPosition: Position.Left,
|
||||
sourcePosition: Position.Right,
|
||||
position: { x: 250, y: 25 },
|
||||
style: { width: '75px' },
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
label: 'C',
|
||||
targetPosition: Position.Left,
|
||||
sourcePosition: Position.Right,
|
||||
position: { x: 350, y: 25 },
|
||||
style: { width: '75px' },
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
label: 'D',
|
||||
targetPosition: Position.Left,
|
||||
sourcePosition: Position.Right,
|
||||
position: { x: 150, y: 220 },
|
||||
style: { width: '75px' },
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
label: 'E',
|
||||
targetPosition: Position.Left,
|
||||
sourcePosition: Position.Right,
|
||||
position: { x: 250, y: 220 },
|
||||
style: { width: '75px' },
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
label: 'F',
|
||||
targetPosition: Position.Left,
|
||||
sourcePosition: Position.Right,
|
||||
position: { x: 350, y: 220 },
|
||||
style: { width: '75px' },
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
type: 'output',
|
||||
label: 'Output',
|
||||
targetPosition: Position.Left,
|
||||
position: { x: 500, y: 120 },
|
||||
style: { width: '75px' },
|
||||
},
|
||||
{ id: 'e1-2', type: 'step', source: '1', target: '2' },
|
||||
{ id: 'e2-3', type: 'step', source: '2', target: '3' },
|
||||
{ id: 'e3-4', type: 'step', source: '3', target: '4' },
|
||||
{ id: 'e4-8', type: 'step', source: '4', target: '8' },
|
||||
{ id: 'e1-5', type: 'step', source: '1', target: '5', animated: true },
|
||||
{ id: 'e5-6', type: 'step', source: '5', target: '6', animated: true },
|
||||
{ id: 'e6-7', type: 'step', source: '6', target: '7', animated: true },
|
||||
{ id: 'e6-8', type: 'step', source: '7', target: '8', animated: true },
|
||||
])
|
||||
|
||||
const emit = defineEmits(['pane'])
|
||||
|
||||
const { onPaneReady } = useVueFlow({
|
||||
modelValue: elements.value,
|
||||
zoomOnScroll: false,
|
||||
panOnDrag: false,
|
||||
})
|
||||
|
||||
onPaneReady((i) => emit('pane', i))
|
||||
</script>
|
||||
<template>
|
||||
<div class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase overflow-hidden border-2">
|
||||
<VueFlow>
|
||||
<Controls :show-interactive="false" />
|
||||
<MiniMap mask-color="rgba(16, 185, 129, 0.5)" class="transform scale-60 origin-bottom-right opacity-75" />
|
||||
<Background variant="lines" pattern-color="#aaa" :gap="46" />
|
||||
</VueFlow>
|
||||
</div>
|
||||
<div class="md:max-w-1/3 flex flex-col gap-12 justify-center <md:pt-12">
|
||||
<div class="flex flex-col gap-2 items-center md:items-start">
|
||||
<h1>Additional Features</h1>
|
||||
<p>
|
||||
On top of all the features Vue Flow comes with several components like a Background, Minimap or Controls.
|
||||
|
||||
<br />
|
||||
Plus it's built for composition, making the access of the internal state easy as can be!
|
||||
</p>
|
||||
<router-link class="button max-w-max" to="/guide/"> Documentation </router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,129 @@
|
||||
<script lang="ts" setup>
|
||||
import { GraphEdge, useVueFlow, VueFlow, Background, Controls, ClassFunc } from '@braks/vue-flow'
|
||||
|
||||
const getClass: ClassFunc = (el) => {
|
||||
const classes = ['font-semibold', '!border-2', 'transition-colors', 'duration-300', 'ease-in-out']
|
||||
if (el.selected)
|
||||
classes.push(
|
||||
...['!border-green-500/80', '!shadow-md', '!shadow-green-500/50', '!bg-green-100/80 dark:(!bg-white)', '!text-gray-700'],
|
||||
)
|
||||
|
||||
return classes.join(' ')
|
||||
}
|
||||
|
||||
const emit = defineEmits(['pane'])
|
||||
|
||||
const { onPaneReady } = useVueFlow({
|
||||
modelValue: [
|
||||
{
|
||||
id: '1',
|
||||
type: 'input',
|
||||
label: 'input',
|
||||
position: { x: 250, y: 5 },
|
||||
class: getClass,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
label: 'default',
|
||||
position: { x: 100, y: 100 },
|
||||
class: getClass,
|
||||
},
|
||||
{ id: '3', label: 'default', position: { x: 400, y: 100 }, class: getClass },
|
||||
{
|
||||
id: '4',
|
||||
type: 'output',
|
||||
label: 'output',
|
||||
position: { x: 250, y: 225 },
|
||||
class: getClass,
|
||||
},
|
||||
{
|
||||
id: 'e1-2',
|
||||
source: '1',
|
||||
label: 'animated edge',
|
||||
target: '2',
|
||||
animated: true,
|
||||
class: (el) => {
|
||||
const classes = ['transition-colors duration-300', (<GraphEdge>el).sourceNode.selected ? 'font-semibold' : '']
|
||||
return classes.join(' ')
|
||||
},
|
||||
style: (el) => {
|
||||
const sourceNodeSelected = (<GraphEdge>el).sourceNode.selected
|
||||
return {
|
||||
transition: 'stroke ease-in-out 300ms',
|
||||
stroke: el.selected || sourceNodeSelected ? 'var(--secondary)' : '',
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'e1-3',
|
||||
source: '1',
|
||||
target: '3',
|
||||
label: 'default edge',
|
||||
class: (el) => {
|
||||
const classes = ['transition-colors duration-300', (<GraphEdge>el).sourceNode.selected ? 'font-semibold' : '']
|
||||
return classes.join(' ')
|
||||
},
|
||||
style: (el) => {
|
||||
const sourceNodeSelected = (<GraphEdge>el).sourceNode.selected
|
||||
return {
|
||||
transition: 'stroke ease-in-out 300ms',
|
||||
stroke: el.selected || sourceNodeSelected ? 'red' : '',
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'e2-4',
|
||||
source: '2',
|
||||
target: '4',
|
||||
type: 'step',
|
||||
animated: true,
|
||||
class: (el) => {
|
||||
const classes = ['transition-colors duration-300', (<GraphEdge>el).sourceNode.selected ? 'font-semibold' : '']
|
||||
return classes.join(' ')
|
||||
},
|
||||
style: (el) => {
|
||||
const sourceNodeSelected = (<GraphEdge>el).sourceNode.selected
|
||||
return {
|
||||
transition: 'stroke ease-in-out 300ms',
|
||||
stroke: el.selected || sourceNodeSelected ? 'var(--secondary)' : '',
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
onPaneReady((i) => emit('pane', i))
|
||||
</script>
|
||||
<template>
|
||||
<div class="md:max-w-1/3 flex flex-col justify-center">
|
||||
<div class="flex flex-col gap-2 items-center md:items-start">
|
||||
<h1>Batteries-included</h1>
|
||||
<p>
|
||||
Vue Flow comes with several built-in features including zooming, panning, zoom & pan controls, single & multi-selections, element dragging,
|
||||
node and edge components and event handlers.
|
||||
</p>
|
||||
<router-link class="button max-w-max" to="/guide/"> Documentation </router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase border-1 border-secondary overflow-hidden"
|
||||
>
|
||||
<VueFlow class="basic">
|
||||
<Controls class="md:!left-auto md:!right-[10px]" />
|
||||
<Background pattern-color="#aaa" :gap="16" />
|
||||
</VueFlow>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.basic .vue-flow__node-input.selected .vue-flow__handle {
|
||||
@apply bg-green-500;
|
||||
}
|
||||
|
||||
.basic .vue-flow__node-default.selected .vue-flow__handle {
|
||||
@apply bg-green-500;
|
||||
}
|
||||
|
||||
.basic .vue-flow__node-output.selected .vue-flow__handle {
|
||||
@apply bg-green-500;
|
||||
}
|
||||
</style>
|
||||
@@ -2,35 +2,47 @@
|
||||
import { useVueFlow, VueFlow, Handle, Position } from '@braks/vue-flow'
|
||||
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
|
||||
import BoxNode from '../nodes/Box.vue'
|
||||
import Heart from '~icons/mdi/heart'
|
||||
|
||||
const breakpoints = useBreakpoints(breakpointsTailwind)
|
||||
|
||||
const { dimensions, instance, onPaneReady, getNodes, getNode, getEdge, updateEdge, edges } = useVueFlow({
|
||||
const initialEdges = [
|
||||
{
|
||||
id: 'eintro-examples',
|
||||
type: 'smoothstep',
|
||||
sourceHandle: 'a',
|
||||
source: 'intro',
|
||||
target: 'examples',
|
||||
animated: true,
|
||||
style: { strokeWidth: 2, stroke: '#8b5cf6' },
|
||||
},
|
||||
{
|
||||
id: 'eintro-documentation',
|
||||
type: 'smoothstep',
|
||||
sourceHandle: 'a',
|
||||
source: 'intro',
|
||||
target: 'documentation',
|
||||
animated: true,
|
||||
style: { strokeWidth: 2, stroke: '#f97316' },
|
||||
},
|
||||
{
|
||||
id: 'eintro-acknowledgement',
|
||||
type: 'smoothstep',
|
||||
sourceHandle: 'a',
|
||||
source: 'intro',
|
||||
target: 'acknowledgement',
|
||||
animated: true,
|
||||
style: { strokeWidth: 2, stroke: '#0ea5e9' },
|
||||
},
|
||||
]
|
||||
const { dimensions, instance, onPaneReady, getNodes, getNode, getEdge, updateEdge, edges, setEdges } = useVueFlow({
|
||||
nodes: [
|
||||
{ id: 'intro', type: 'box', position: { x: 0, y: 0 } },
|
||||
{ id: 'examples', type: 'box', position: { x: -50, y: 400 } },
|
||||
{ id: 'documentation', type: 'box', position: { x: 300, y: 400 } },
|
||||
{ id: 'acknowledgement', type: 'box', position: { x: 150, y: 500 } },
|
||||
],
|
||||
edges: [
|
||||
{
|
||||
id: 'eintro-examples',
|
||||
type: 'smoothstep',
|
||||
sourceHandle: 'a',
|
||||
source: 'intro',
|
||||
target: 'examples',
|
||||
animated: true,
|
||||
style: { strokeWidth: 2, stroke: '#8b5cf6' },
|
||||
},
|
||||
{
|
||||
id: 'eintro-documentation',
|
||||
type: 'smoothstep',
|
||||
sourceHandle: 'a',
|
||||
source: 'intro',
|
||||
target: 'documentation',
|
||||
animated: true,
|
||||
style: { strokeWidth: 2, stroke: '#f97316' },
|
||||
},
|
||||
],
|
||||
edges: initialEdges,
|
||||
elementsSelectable: true,
|
||||
nodesDraggable: false,
|
||||
panOnDrag: false,
|
||||
@@ -62,27 +74,51 @@ onPaneReady(({ fitView }) => {
|
||||
y: mainNode.dimensions.height * 2 + 50,
|
||||
}
|
||||
break
|
||||
case 'acknowledgement':
|
||||
node.position = {
|
||||
x: mainNode.dimensions.width / 2 - node.dimensions.width / 2,
|
||||
y: mainNode.dimensions.height * 3,
|
||||
}
|
||||
break
|
||||
}
|
||||
})
|
||||
|
||||
nextTick(() => {
|
||||
const newEdge = updateEdge(getEdge.value(edgeId.value)!, {
|
||||
source: 'examples',
|
||||
target: 'documentation',
|
||||
targetHandle: null,
|
||||
sourceHandle: null,
|
||||
setEdges(() => {
|
||||
return [
|
||||
{
|
||||
id: 'eintro-examples',
|
||||
type: 'smoothstep',
|
||||
sourceHandle: 'a',
|
||||
source: 'intro',
|
||||
target: 'examples',
|
||||
animated: true,
|
||||
style: { strokeWidth: 2, stroke: '#8b5cf6' },
|
||||
},
|
||||
{
|
||||
id: 'eexamples-documentation',
|
||||
type: 'smoothstep',
|
||||
source: 'examples',
|
||||
target: 'documentation',
|
||||
animated: true,
|
||||
style: { strokeWidth: 2, stroke: '#f97316' },
|
||||
},
|
||||
{
|
||||
id: 'edocumentation-acknowledgement',
|
||||
type: 'smoothstep',
|
||||
source: 'documentation',
|
||||
target: 'acknowledgement',
|
||||
animated: true,
|
||||
style: { strokeWidth: 2, stroke: '#0ea5e9' },
|
||||
},
|
||||
]
|
||||
})
|
||||
if (newEdge) edgeId.value = newEdge.id
|
||||
|
||||
fitView({
|
||||
duration: 1500,
|
||||
})
|
||||
})
|
||||
} else {
|
||||
fitView({
|
||||
duration: 1500,
|
||||
})
|
||||
|
||||
getNodes.value.forEach((node) => {
|
||||
const mainNode = getNode.value('intro')!
|
||||
switch (node.id) {
|
||||
@@ -98,17 +134,20 @@ onPaneReady(({ fitView }) => {
|
||||
y: mainNode.dimensions.height * 1.5,
|
||||
}
|
||||
break
|
||||
case 'acknowledgement':
|
||||
node.position = {
|
||||
x: mainNode.dimensions.width / 2 - node.dimensions.width / 2,
|
||||
y: mainNode.dimensions.height * 2,
|
||||
}
|
||||
break
|
||||
}
|
||||
})
|
||||
|
||||
nextTick(() => {
|
||||
const newEdge = updateEdge(getEdge.value(edgeId.value)!, {
|
||||
source: 'intro',
|
||||
target: 'documentation',
|
||||
targetHandle: null,
|
||||
sourceHandle: null,
|
||||
setEdges(initialEdges)
|
||||
fitView({
|
||||
duration: 1500,
|
||||
})
|
||||
if (newEdge) edgeId.value = newEdge.id
|
||||
})
|
||||
}
|
||||
|
||||
@@ -123,6 +162,13 @@ onPaneReady(({ fitView }) => {
|
||||
|
||||
useResizeObserver(el, setNodes)
|
||||
})
|
||||
|
||||
const scrollTo = () => {
|
||||
const el = document.getElementById('acknowledgement')
|
||||
if (el) {
|
||||
el.scrollIntoView({ behavior: 'smooth' })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<VueFlow ref="el" class="dark:bg-black bg-white transition-colors duration-200 ease-in-out">
|
||||
@@ -144,6 +190,7 @@ onPaneReady(({ fitView }) => {
|
||||
<router-link class="link group bg-orange-500" to="/guide/"> Read The Documentation </router-link>
|
||||
</div>
|
||||
<Handle type="target" :position="Position.Top" />
|
||||
<Handle class="block md:hidden" type="source" :position="Position.Bottom" />
|
||||
</template>
|
||||
<template v-else-if="props.id === 'examples'">
|
||||
<div class="flex">
|
||||
@@ -152,6 +199,12 @@ onPaneReady(({ fitView }) => {
|
||||
<Handle type="target" :position="Position.Top" />
|
||||
<Handle class="block md:hidden" type="source" :position="Position.Bottom" />
|
||||
</template>
|
||||
<template v-else-if="props.id === 'acknowledgement'">
|
||||
<div class="flex" @click="scrollTo">
|
||||
<div class="link group bg-sky-500"><Heart class="text-red-500" /> Acknowledgement</div>
|
||||
</div>
|
||||
<Handle type="target" :position="Position.Top" />
|
||||
</template>
|
||||
</template>
|
||||
</VueFlow>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
<script lang="ts" setup>
|
||||
import { ConnectionMode, useVueFlow, VueFlow, Background, Controls } from '@braks/vue-flow'
|
||||
import { breakpointsTailwind } from '@vueuse/core'
|
||||
|
||||
const breakpoints = useBreakpoints(breakpointsTailwind)
|
||||
|
||||
const emit = defineEmits(['pane'])
|
||||
|
||||
const nodeClasses = ['!normal-case font-semibold !text-white', '!border-1', 'shadow-md'].join(' ')
|
||||
const childClasses = `${nodeClasses} !bg-green-500/70 !border-white`
|
||||
|
||||
const { onPaneReady, panOnDrag } = useVueFlow({
|
||||
fitViewOnInit: true,
|
||||
connectionMode: ConnectionMode.Loose,
|
||||
zoomOnScroll: false,
|
||||
preventScrolling: false,
|
||||
translateExtent: [
|
||||
[-500, -100],
|
||||
[600, 500],
|
||||
],
|
||||
nodes: [
|
||||
{ id: '1', type: 'input', label: 'Outer Node', position: { x: 0, y: 0 }, class: childClasses },
|
||||
{
|
||||
id: '2',
|
||||
label: 'Parent Node',
|
||||
position: { x: -125, y: 100 },
|
||||
class: `${nodeClasses} !bg-green-500/30 !border-green-500`,
|
||||
style: { width: '400px', height: '160px' },
|
||||
},
|
||||
{
|
||||
id: '2a',
|
||||
label: 'Child Node',
|
||||
position: { x: 17, y: 30 },
|
||||
parentNode: '2',
|
||||
extent: 'parent',
|
||||
class: childClasses,
|
||||
},
|
||||
{ id: '2b', label: 'Child Node', position: { x: 225, y: 30 }, parentNode: '2', extent: 'parent', class: childClasses },
|
||||
{ id: '2c', label: 'Child Node', position: { x: 125, y: 100 }, parentNode: '2', extent: 'parent', class: childClasses },
|
||||
{ id: '3', type: 'output', label: 'Outer Node', position: { x: 0, y: 300 }, class: childClasses },
|
||||
],
|
||||
edges: [
|
||||
{ id: 'e1-2a', source: '1', target: '2a', type: 'smoothstep', style: { stroke: 'white', strokeWidth: '2' } },
|
||||
{ id: 'e2-3', source: '2', target: '3', type: 'smoothstep', style: { stroke: 'white', strokeWidth: '2' } },
|
||||
],
|
||||
})
|
||||
|
||||
watch(
|
||||
[breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoints['2xl']],
|
||||
() => {
|
||||
panOnDrag.value = !breakpoints.isSmaller('md')
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
onPaneReady((i) => emit('pane', i))
|
||||
</script>
|
||||
<template>
|
||||
<div class="md:max-w-1/3 flex flex-col justify-center <md:pt-12">
|
||||
<div class="flex flex-col gap-2 items-center md:items-start">
|
||||
<h1>Complex Flows</h1>
|
||||
<p>
|
||||
You want to visualize more complex ideas?
|
||||
<br />
|
||||
No worries! Vue Flow supports creating nested nodes and nested graphs out-of-the-box.
|
||||
</p>
|
||||
<router-link class="button max-w-max" to="/guide/"> Documentation </router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase border-1 border-green-500 overflow-hidden"
|
||||
>
|
||||
<VueFlow class="nested">
|
||||
<Controls class="md:!left-auto md:!right-[10px]" />
|
||||
<Background pattern-color="#aaa" class="!bg-gray-800" :gap="18" />
|
||||
</VueFlow>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.nested .vue-flow__handle {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,111 @@
|
||||
<script lang="ts" setup>
|
||||
import { BackgroundVariant, VueFlow, Background, Controls, MiniMap, MiniMapNodeFunc, useVueFlow } from '@braks/vue-flow'
|
||||
import { breakpointsTailwind } from '@vueuse/core'
|
||||
import CustomEdge from '../edges/Custom.vue'
|
||||
import RGBNode from '../nodes/Input.vue'
|
||||
import RGBOutputNode from '../nodes/Output.vue'
|
||||
|
||||
const breakpoints = useBreakpoints(breakpointsTailwind)
|
||||
|
||||
type Colors = {
|
||||
red: number
|
||||
green: number
|
||||
blue: number
|
||||
}
|
||||
|
||||
const emit = defineEmits(['pane'])
|
||||
|
||||
const { onPaneReady, getNode, panOnDrag } = useVueFlow({
|
||||
id: 'rgb-flow',
|
||||
nodes: [
|
||||
{ id: '1', type: 'rgb', data: { color: 'g' }, position: { x: -25, y: 0 } },
|
||||
{ id: '2', type: 'rgb', data: { color: 'r' }, position: { x: 50, y: -110 } },
|
||||
{ id: '3', type: 'rgb', data: { color: 'b' }, position: { x: 0, y: 110 } },
|
||||
{ id: '4', type: 'rgb-output', label: 'RGB', position: { x: 400, y: -25 } },
|
||||
],
|
||||
edges: [
|
||||
{ id: 'e1-4', type: 'rgb-line', data: { color: 'green' }, source: '1', target: '4', animated: true },
|
||||
{ id: 'e2-4', type: 'rgb-line', data: { color: 'red' }, source: '2', target: '4', animated: true },
|
||||
{ id: 'e3-4', type: 'rgb-line', data: { color: 'blue' }, source: '3', target: '4', animated: true },
|
||||
],
|
||||
zoomOnScroll: false,
|
||||
nodeExtent: [
|
||||
[-50, -150],
|
||||
[500, 300],
|
||||
],
|
||||
})
|
||||
|
||||
onPaneReady((i) => emit('pane', i))
|
||||
|
||||
const el = templateRef<HTMLDivElement>('el', null)
|
||||
|
||||
const color = ref<Colors>({
|
||||
red: 222,
|
||||
green: 45,
|
||||
blue: 140,
|
||||
})
|
||||
|
||||
watch(
|
||||
[breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoints['2xl']],
|
||||
() => {
|
||||
const mobile = breakpoints.isSmaller('md')
|
||||
if (mobile) {
|
||||
getNode.value('4')!.position = { x: 300, y: -25 }
|
||||
}
|
||||
panOnDrag.value = !mobile
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
const onChange = ({ color: c, val }: { color: keyof Colors; val: number }) => (color.value[c] = Number(val))
|
||||
|
||||
const nodeColor: MiniMapNodeFunc = (node) => {
|
||||
switch (node.id) {
|
||||
case '1':
|
||||
return 'green'
|
||||
case '2':
|
||||
return 'red'
|
||||
case '3':
|
||||
return 'blue'
|
||||
case '4':
|
||||
return `rgb(${color.value.red}, ${color.value.green}, ${color.value.blue})`
|
||||
}
|
||||
return ''
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div
|
||||
ref="el"
|
||||
class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase overflow-hidden bg-gray-800 border-2"
|
||||
:style="{ borderColor: `rgb(${color.red}, ${color.green}, ${color.blue})` }"
|
||||
>
|
||||
<VueFlow class="relative font-mono">
|
||||
<template #edge-rgb-line="rgbLineProps">
|
||||
<CustomEdge v-bind="{ ...rgbLineProps, data: { text: color[rgbLineProps.data?.color], ...rgbLineProps.data } }" />
|
||||
</template>
|
||||
<template #node-rgb="rgbProps">
|
||||
<RGBNode v-bind="rgbProps" :amount="color" @change="onChange" />
|
||||
</template>
|
||||
<template #node-rgb-output="rgbOutputProps">
|
||||
<RGBOutputNode v-bind="rgbOutputProps" :rgb="`rgb(${color.red}, ${color.green}, ${color.blue})`" />
|
||||
</template>
|
||||
<Controls class="hidden md:block" />
|
||||
<Background
|
||||
:variant="BackgroundVariant.Lines"
|
||||
:pattern-color="`rgb(${color.red}, ${color.green}, ${color.blue})`"
|
||||
:gap="48"
|
||||
:size="1"
|
||||
/>
|
||||
<MiniMap class="hidden sm:block transform scale-25 md:scale-50 lg:scale-75 origin-bottom-right" :node-color="nodeColor" />
|
||||
</VueFlow>
|
||||
</div>
|
||||
<div class="md:max-w-1/3 flex flex-col gap-12 justify-center <md:pt-12">
|
||||
<div class="flex flex-col gap-2 items-center md:items-start">
|
||||
<h1>Customizable</h1>
|
||||
<p>
|
||||
You can expand on the existing features by using your own custom nodes and edges and implement any design and functionality you want.
|
||||
</p>
|
||||
<router-link class="button max-w-max" to="/guide/">Documentation</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user