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

update(docs): RGB demo

Browse Source
This commit is contained in:
Braks
2022-04-04 21:42:48 +02:00
parent 913ebb0db0
commit 39c8f60818
5 changed files with 97 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vitepress/assets/index.css
-4
View File
@@ -67,10 +67,6 @@ li {
border-color: #f0f2f3; border-color: #f0f2f3;
} }
.vue-flow {
@apply bg-white h-[80vh];
}
.slider { .slider {
--color: red; --color: red;
@apply bg-gray-200 w-full h-[10px] outline-none rounded-full; @apply bg-gray-200 w-full h-[10px] outline-none rounded-full;
docs/.vitepress/components/home/Features.vue
+43 -85
View File
@@ -171,100 +171,58 @@ const label = ref({
first: "", first: "",
last: "" last: ""
}); });
const instance = ref<FlowInstance>(); const instance = ref<FlowInstance>();
const onChange = ({ name, val }: { name: "first" | "last"; val: string }) => (label.value[name] = val); const onChange = ({ name, val }: { name: "first" | "last"; val: string }) => (label.value[name] = val);
const onLoad = (vf: FlowInstance) => { const onLoad = (vf: FlowInstance) => {
if (!instance.value) instance.value = vf; if (!instance.value) instance.value = vf;
vf.fitView(); vf.fitView();
}; };
whenever(breakpoints.greater("tablet"), () => onLoad(instance.value)); whenever(breakpoints.greater("tablet"), () => instance.value.fitView());
whenever(breakpoints.smaller("tablet"), () => onLoad(instance.value)); whenever(breakpoints.smaller("tablet"), () => instance.value.fitView());
</script> </script>
<template> <template>
<div <div class="w-full">
class=" <div
p-4 class="flex flex-col gap-12 md:gap-24 lg:gap-36 max-w-9/12 md:max-w-11/12 lg:max-w-9/12 m-auto py-12 md:py-24 text-center md:text-left">
py-8 <div class="flex flex-col md:flex-row gap-12 md:gap-24">
md:p-8 md:py-12 <div class="md:max-w-1/3 flex flex-col justify-center">
lg:p-16 lg:py-24 <div class="flex flex-col gap-2 items-center md:items-start">
w-full <h1>Feature-rich</h1>
h-full <p>
min-h-full Vue Flow comes with seamless zooming & panning, different edge and node types, single and multi-selection,
bg-gray-100 controls,
text-black several event handlers and more.
normal-case </p>
flex flex-col <a class="button max-w-max" href="/docs">
gap-12 Documentation
md:gap-24 </a>
lg:gap-48 </div>
" </div>
> <div
<div class="flex flex-col md:flex-row gap-12"> class="w-full md:min-h-[300px] shadow-xl rounded-xl font-mono uppercase border-1 border-secondary overflow-hidden">
<div class="gap-2 md:w-2/3 lg:w-[unset] flex flex-col justify-center items-center"> <VueFlow v-model="elements" @pane-ready="onLoad">
<h1>Feature-rich</h1> <Controls />
<p class="w-2/3"> <Background pattern-color="#aaa" style="background: #f8f8f8" :gap="8" />
Vue Flow comes with seamless zooming & panning, different edge and node types, single and multi-selection, </VueFlow>
controls, </div>
several event handlers and more.
</p>
<a class="button" href="/docs">
Documentation
</a>
</div> </div>
<div class="w-full min-h-[300px] shadow-xl rounded-xl font-mono uppercase"> <div class="flex flex-col-reverse md:flex-row flex-unwrap gap-12 md:gap-24">
<VueFlow v-model="elements" @pane-ready="onLoad"> <div
<Controls /> 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">
<Background pattern-color="#aaa" style="background: #f8f8f8" :gap="8" /> <RGB />
</VueFlow> </div>
</div> <div class="md:max-w-1/3 flex flex-col md:flex-row gap-12 justify-end">
</div> <div class="gap-2 flex flex-col justify-center">
<div class="flex flex-col-reverse md:flex-row flex-unwrap gap-12"> <h1>Customizable</h1>
<div <p>
class="w-full h-[300px] shadow-xl bg-gray-800 border-1 border-solid border-gray-300 rounded-xl font-mono uppercase"> You can create your own node and edge types or just pass a custom style. You can implement custom UIs
<VueFlow inside your nodes
v-model="customizableElements" and add functionality to your edges.
:snap-grid="[25, 25]" </p>
:snap-to-grid="true" <a class="button max-w-max" href="/docs">Documentation</a>
:zoom-on-scroll="false" </div>
:pane-moveable="false" </div>
@pane-ready="onLoad"
>
<template #node-text-output="props">
<TextOutputNode v-bind="props" :label="`${label.first} ${label.last}`" />
</template>
<template #node-text-input="props">
<TextInputNode v-bind="props" @change="onChange" />
</template>
<Background variant="lines" color="#aaa" :gap="46" />
</VueFlow>
</div>
<div class="md:w-2/3 lg:w-[unset] gap-2 flex flex-col justify-center items-center">
<h1>Customizable</h1>
<p class="w-2/3">
You can create your own node and edge types or just pass a custom style. You can implement custom UIs inside
your nodes
and add functionality to your edges.
</p>
<a class="button" href="/docs">Documentation</a>
</div>
</div>
<div class="flex flex-col md:flex-row gap-12">
<div class="md:w-2/3 lg:w-[unset] gap-2 flex flex-col justify-center items-center">
<h1>Additional Components</h1>
<p class="w-2/3">
Vue Flow includes a MiniMap, Controls and Background, as well as a ton of utilities to control the internal
state
outside the Vue Flow component.
</p>
<a class="button" href="/docs">Documentation</a>
</div>
<div
class="w-full h-[300px] shadow-xl bg-white border-1 border-solid border-gray-300 rounded-xl font-mono uppercase">
<VueFlow v-model="additionalElements" :zoom-on-scroll="false" :pane-moveable="false" @pane-ready="onLoad">
<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" color="#aaa" :gap="46" />
</VueFlow>
</div> </div>
</div> </div>
</div> </div>
docs/.vitepress/components/home/Home.vue
+1 -1
View File
@@ -61,7 +61,7 @@ const nextNode = (id: string[], duration = 2000, padding = 0) => instance.value.
}); });
</script> </script>
<template> <template>
<div class="home-page"> <div class="bg-white h-[80vh]">
<VueFlow> <VueFlow>
<template #node-box="props"> <template #node-box="props">
<template v-if="props.id === 'intro'"> <template v-if="props.id === 'intro'">
docs/.vitepress/components/home/RGB.vue
+53 -74
View File
@@ -1,10 +1,10 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from "vue";
import { Elements, FlowInstance, VueFlow, Background, Controls, MiniMap, BackgroundVariant } from '@braks/vue-flow' import { Elements, FlowInstance, VueFlow, Background, Controls, MiniMap, BackgroundVariant } from "@braks/vue-flow";
import { templateRef, useBreakpoints, useElementBounding, whenever } from '@vueuse/core' import { templateRef, useBreakpoints, useElementBounding, whenever } from "@vueuse/core";
import CustomEdge from './edges/Custom.vue' import CustomEdge from "./edges/Custom.vue";
import RGBNode from './nodes/Input.vue' import RGBNode from "./nodes/Input.vue";
import RGBOutputNode from './nodes/Output.vue' import RGBOutputNode from "./nodes/Output.vue";
type Colors = { type Colors = {
red: number red: number
@@ -13,91 +13,70 @@ type Colors = {
} }
interface Props { 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({ const breakpoints = useBreakpoints({
mobile: 360, mobile: 360,
tablet: 640, tablet: 640,
laptop: 1024, laptop: 1024,
desktop: 1280, desktop: 1280
}) });
const elements = ref<Elements>([ const elements = ref<Elements>([
{ id: '1', type: 'rgb', data: { color: 'g' }, position: { x: -25, y: 50 } }, { id: "1", type: "rgb", data: { color: "g" }, position: { x: -25, y: 0 } },
{ id: '2', type: 'rgb', data: { color: 'r' }, position: { x: 50, y: -100 } }, { id: "2", type: "rgb", data: { color: "r" }, position: { x: 50, y: -110 } },
{ id: '3', type: 'rgb', data: { color: 'b' }, position: { x: 0, y: 200 } }, { id: "3", type: "rgb", data: { color: "b" }, position: { x: 0, y: 110 } },
{ id: '4', type: 'rgb-output', label: 'RGB', position: { x: 400, y: 50 } }, { 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: "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: "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 }, { id: "e3-4", type: "rgb-line", data: { color: "blue" }, source: "3", target: "4", animated: true }
]) ]);
const instance = ref<FlowInstance>() 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) => { const onLoad = (flowInstance: FlowInstance) => {
instance.value = flowInstance instance.value = flowInstance;
if (breakpoints.greater('tablet').value) flowInstance.fitView({ padding: 0.5 }) instance.value.fitView()
else flowInstance.fitView() };
} whenever(breakpoints.greater("tablet"), () => onLoad(instance.value));
whenever(breakpoints.greater('tablet'), () => onLoad(instance.value)) whenever(breakpoints.smaller("tablet"), () => onLoad(instance.value));
whenever(breakpoints.smaller('tablet'), () => onLoad(instance.value))
const color = ref<Colors>({ const color = ref<Colors>({
red: 100, red: 100,
green: 150, green: 150,
blue: 100, blue: 100
}) });
const onChange = ({ color: c, val }: { color: keyof Colors; val: number }) => (color.value[c] = Number(val)) const onChange = ({ color: c, val }: { color: keyof Colors; val: number }) => (color.value[c] = Number(val));
const bg = ref(BackgroundVariant.Lines) const bg = ref(BackgroundVariant.Lines);
const bgSize = ref(1) const bgSize = ref(1);
const bgGap = ref(48) const bgGap = ref(48);
const backgroundChange = (variant: BackgroundVariant) => (bg.value = variant) const backgroundChange = (variant: BackgroundVariant) => (bg.value = variant);
const sizeChange = (size: number) => (bgSize.value = size) const sizeChange = (size: number) => (bgSize.value = size);
</script> </script>
<template> <template>
<div ref="page" class="font-mono flex flex flex-col md:flex-row bg-white w-[100vw] h-[80vh]" :style="{ borderRadius: 0 }"> <div ref="page" class="flex flex-col-reverse md:flex-row flex-unwrap gap-12 md:gap-24">
<VueFlow id="rgb-flow" v-model="elements" class="relative font-mono" :zoom-on-scroll="false" @pane-ready="onLoad"> <div
<template #edge-rgb-line="rgbLineProps"> 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">
<CustomEdge v-bind="{ ...rgbLineProps }" /> <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> <template #edge-rgb-line="rgbLineProps">
<template #node-rgb="rgbProps"> <CustomEdge v-bind="{ ...rgbLineProps }" />
<RGBNode v-bind="rgbProps" :amount="color" @change="onChange" /> </template>
</template> <template #node-rgb="rgbProps">
<template #node-rgb-output="rgbOutputProps"> <RGBNode v-bind="rgbProps" :amount="color" @change="onChange" />
<RGBOutputNode </template>
v-bind="rgbOutputProps" <template #node-rgb-output="rgbOutputProps">
:rgb="`rgb(${color.red}, ${color.green}, ${color.blue})`" <RGBOutputNode v-bind="rgbOutputProps" :rgb="`rgb(${color.red}, ${color.green}, ${color.blue})`" />
@next="props.next(['features'], 3500)" </template>
/> <Controls />
</template> <Background :variant="bg" :color="`rgb(${color.red}, ${color.green}, ${color.blue})`" :gap="bgGap"
<Controls /> :size="bgSize" />
<Background :variant="bg" :color="`rgb(${color.red}, ${color.green}, ${color.blue})`" :gap="bgGap" :size="bgSize" /> <MiniMap class="transform scale-75 origin-bottom-right" />
<MiniMap /> </VueFlow>
</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> </div>
</div> </div>
</template> </template>
docs/.vitepress/components/home/nodes/Output.vue
-1
View File
@@ -10,7 +10,6 @@ const next = () => emit('next')
<template> <template>
<div :style="{ backgroundColor: props.rgb }" class="rgb-output-node" @click="next"> <div :style="{ backgroundColor: props.rgb }" class="rgb-output-node" @click="next">
<div class="text-md uppercase">{{ props.rgb }}</div> <div class="text-md uppercase">{{ props.rgb }}</div>
Click me to continue.
<Handle type="target" :position="Position.Left" /> <Handle type="target" :position="Position.Left" />
</div> </div>
</template> </template>