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;
}
.vue-flow {
@apply bg-white h-[80vh];
}
.slider {
--color: red;
@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: "",
last: ""
});
const instance = ref<FlowInstance>();
const onChange = ({ name, val }: { name: "first" | "last"; val: string }) => (label.value[name] = val);
const onLoad = (vf: FlowInstance) => {
if (!instance.value) instance.value = vf;
vf.fitView();
};
whenever(breakpoints.greater("tablet"), () => onLoad(instance.value));
whenever(breakpoints.smaller("tablet"), () => onLoad(instance.value));
whenever(breakpoints.greater("tablet"), () => instance.value.fitView());
whenever(breakpoints.smaller("tablet"), () => instance.value.fitView());
</script>
<template>
<div
class="
p-4
py-8
md:p-8 md:py-12
lg:p-16 lg:py-24
w-full
h-full
min-h-full
bg-gray-100
text-black
normal-case
flex flex-col
gap-12
md:gap-24
lg:gap-48
"
>
<div class="flex flex-col md:flex-row gap-12">
<div class="gap-2 md:w-2/3 lg:w-[unset] flex flex-col justify-center items-center">
<h1>Feature-rich</h1>
<p class="w-2/3">
Vue Flow comes with seamless zooming & panning, different edge and node types, single and multi-selection,
controls,
several event handlers and more.
</p>
<a class="button" href="/docs">
Documentation
</a>
<div class="w-full">
<div
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">
<div class="flex flex-col md:flex-row gap-12 md:gap-24">
<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>Feature-rich</h1>
<p>
Vue Flow comes with seamless zooming & panning, different edge and node types, single and multi-selection,
controls,
several event handlers and more.
</p>
<a class="button max-w-max" href="/docs">
Documentation
</a>
</div>
</div>
<div
class="w-full md:min-h-[300px] shadow-xl rounded-xl font-mono uppercase border-1 border-secondary overflow-hidden">
<VueFlow v-model="elements" @pane-ready="onLoad">
<Controls />
<Background pattern-color="#aaa" style="background: #f8f8f8" :gap="8" />
</VueFlow>
</div>
</div>
<div class="w-full min-h-[300px] shadow-xl rounded-xl font-mono uppercase">
<VueFlow v-model="elements" @pane-ready="onLoad">
<Controls />
<Background pattern-color="#aaa" style="background: #f8f8f8" :gap="8" />
</VueFlow>
</div>
</div>
<div class="flex flex-col-reverse md:flex-row flex-unwrap gap-12">
<div
class="w-full h-[300px] shadow-xl bg-gray-800 border-1 border-solid border-gray-300 rounded-xl font-mono uppercase">
<VueFlow
v-model="customizableElements"
:snap-grid="[25, 25]"
:snap-to-grid="true"
:zoom-on-scroll="false"
:pane-moveable="false"
@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 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">
<RGB />
</div>
<div class="md:max-w-1/3 flex flex-col md:flex-row gap-12 justify-end">
<div class="gap-2 flex flex-col justify-center">
<h1>Customizable</h1>
<p>
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 max-w-max" href="/docs">Documentation</a>
</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>
<template>
<div class="home-page">
<div class="bg-white h-[80vh]">
<VueFlow>
<template #node-box="props">
<template v-if="props.id === 'intro'">
docs/.vitepress/components/home/RGB.vue
+53 -74
View File
@@ -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>
docs/.vitepress/components/home/nodes/Output.vue
-1
View File
@@ -10,7 +10,6 @@ const next = () => emit('next')
<template>
<div :style="{ backgroundColor: props.rgb }" class="rgb-output-node" @click="next">
<div class="text-md uppercase">{{ props.rgb }}</div>
Click me to continue.
<Handle type="target" :position="Position.Left" />
</div>
</template>