update(docs): RGB demo
This commit is contained in:
Braks
@@ -1,10 +1,10 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { Elements, FlowInstance, VueFlow, Background, Controls, MiniMap, BackgroundVariant } from '@braks/vue-flow'
|
||||
import { templateRef, useBreakpoints, useElementBounding, whenever } from '@vueuse/core'
|
||||
import CustomEdge from './edges/Custom.vue'
|
||||
import RGBNode from './nodes/Input.vue'
|
||||
import RGBOutputNode from './nodes/Output.vue'
|
||||
import { ref } from "vue";
|
||||
import { Elements, FlowInstance, VueFlow, Background, Controls, MiniMap, BackgroundVariant } from "@braks/vue-flow";
|
||||
import { templateRef, useBreakpoints, useElementBounding, whenever } from "@vueuse/core";
|
||||
import CustomEdge from "./edges/Custom.vue";
|
||||
import RGBNode from "./nodes/Input.vue";
|
||||
import RGBOutputNode from "./nodes/Output.vue";
|
||||
|
||||
type Colors = {
|
||||
red: number
|
||||
@@ -13,91 +13,70 @@ type Colors = {
|
||||
}
|
||||
|
||||
interface Props {
|
||||
next: (node: string[], duration?: number, padding?: number) => void
|
||||
next: (node: string[], duration?: number, padding?: number) => void;
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const breakpoints = useBreakpoints({
|
||||
mobile: 360,
|
||||
tablet: 640,
|
||||
laptop: 1024,
|
||||
desktop: 1280,
|
||||
})
|
||||
desktop: 1280
|
||||
});
|
||||
|
||||
const elements = ref<Elements>([
|
||||
{ id: '1', type: 'rgb', data: { color: 'g' }, position: { x: -25, y: 50 } },
|
||||
{ id: '2', type: 'rgb', data: { color: 'r' }, position: { x: 50, y: -100 } },
|
||||
{ id: '3', type: 'rgb', data: { color: 'b' }, position: { x: 0, y: 200 } },
|
||||
{ id: '4', type: 'rgb-output', label: 'RGB', position: { x: 400, y: 50 } },
|
||||
{ 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 },
|
||||
])
|
||||
const instance = ref<FlowInstance>()
|
||||
{ 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: 0 } },
|
||||
{ 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 }
|
||||
]);
|
||||
const instance = ref<FlowInstance>();
|
||||
|
||||
const el = templateRef<HTMLDivElement>('page', null)
|
||||
const el = templateRef<HTMLDivElement>("page", null);
|
||||
|
||||
const bounds = useElementBounding(el)
|
||||
const bounds = useElementBounding(el);
|
||||
const onLoad = (flowInstance: FlowInstance) => {
|
||||
instance.value = flowInstance
|
||||
if (breakpoints.greater('tablet').value) flowInstance.fitView({ padding: 0.5 })
|
||||
else flowInstance.fitView()
|
||||
}
|
||||
whenever(breakpoints.greater('tablet'), () => onLoad(instance.value))
|
||||
whenever(breakpoints.smaller('tablet'), () => onLoad(instance.value))
|
||||
instance.value = flowInstance;
|
||||
instance.value.fitView()
|
||||
};
|
||||
whenever(breakpoints.greater("tablet"), () => onLoad(instance.value));
|
||||
whenever(breakpoints.smaller("tablet"), () => onLoad(instance.value));
|
||||
|
||||
const color = ref<Colors>({
|
||||
red: 100,
|
||||
green: 150,
|
||||
blue: 100,
|
||||
})
|
||||
const onChange = ({ color: c, val }: { color: keyof Colors; val: number }) => (color.value[c] = Number(val))
|
||||
const bg = ref(BackgroundVariant.Lines)
|
||||
const bgSize = ref(1)
|
||||
const bgGap = ref(48)
|
||||
const backgroundChange = (variant: BackgroundVariant) => (bg.value = variant)
|
||||
const sizeChange = (size: number) => (bgSize.value = size)
|
||||
blue: 100
|
||||
});
|
||||
const onChange = ({ color: c, val }: { color: keyof Colors; val: number }) => (color.value[c] = Number(val));
|
||||
const bg = ref(BackgroundVariant.Lines);
|
||||
const bgSize = ref(1);
|
||||
const bgGap = ref(48);
|
||||
const backgroundChange = (variant: BackgroundVariant) => (bg.value = variant);
|
||||
const sizeChange = (size: number) => (bgSize.value = size);
|
||||
</script>
|
||||
<template>
|
||||
<div ref="page" class="font-mono flex flex flex-col md:flex-row bg-white w-[100vw] h-[80vh]" :style="{ borderRadius: 0 }">
|
||||
<VueFlow id="rgb-flow" v-model="elements" class="relative font-mono" :zoom-on-scroll="false" @pane-ready="onLoad">
|
||||
<template #edge-rgb-line="rgbLineProps">
|
||||
<CustomEdge v-bind="{ ...rgbLineProps }" />
|
||||
</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})`"
|
||||
@next="props.next(['features'], 3500)"
|
||||
/>
|
||||
</template>
|
||||
<Controls />
|
||||
<Background :variant="bg" :color="`rgb(${color.red}, ${color.green}, ${color.blue})`" :gap="bgGap" :size="bgSize" />
|
||||
<MiniMap />
|
||||
</VueFlow>
|
||||
<div class="flex bg-light-800 flex-col justify-center gap-2 md:gap-4 p-6 w-full md:w-1/3">
|
||||
<h1 class="pointer-events-none text-xl lg:text-4xl" :style="{ color: `rgb(${color.red}, ${color.green}, ${color.blue})` }">
|
||||
Highly customizable
|
||||
</h1>
|
||||
<h2 class="pointer-events-none text-sm lg:text-xl text-black font-normal">
|
||||
With Vue Flow you can create the most beautiful <strong>static diagrams</strong> or even <strong>custom editors</strong>.
|
||||
Thanks to a lot of handy utilities that come out of the box, you jump right into <strong>customizing</strong> Vue Flow to
|
||||
your hearts desire and utilize the <strong>seamless zoom & panning</strong> feature.
|
||||
</h2>
|
||||
<div class="!pointer-events-auto transform scale-75 lg:scale-100 flex flex-row justify-center items-center gap-4">
|
||||
<a class="p-4 bg-green-500 hover:bg-black rounded-xl !text-white font-semibold text-lg" href="/docs">
|
||||
Documentation
|
||||
</a>
|
||||
<a
|
||||
class="!pointer-events-auto p-4 bg-white hover:bg-black rounded-xl bg-blue-500 !text-white font-semibold text-lg"
|
||||
href="/examples"
|
||||
>
|
||||
Examples
|
||||
</a>
|
||||
</div>
|
||||
<div ref="page" class="flex flex-col-reverse md:flex-row flex-unwrap gap-12 md:gap-24">
|
||||
<div
|
||||
class="w-full md:min-h-[300px] shadow-xl rounded-xl font-mono uppercase overflow-hidden bg-gray-800 border-2 border-solid border-purple-500">
|
||||
<VueFlow id="rgb-flow" v-model="elements" class="relative font-mono" :zoom-on-scroll="false" :node-extent="[[0, 0], [100, 100]]" @pane-ready="onLoad">
|
||||
<template #edge-rgb-line="rgbLineProps">
|
||||
<CustomEdge v-bind="{ ...rgbLineProps }" />
|
||||
</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 />
|
||||
<Background :variant="bg" :color="`rgb(${color.red}, ${color.green}, ${color.blue})`" :gap="bgGap"
|
||||
:size="bgSize" />
|
||||
<MiniMap class="transform scale-75 origin-bottom-right" />
|
||||
</VueFlow>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user