From 39c8f608181c8b142d981af0cfe97e3374d65652 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 31 Mar 2022 09:48:19 +0200
Subject: [PATCH] update(docs): RGB demo

---
 docs/.vitepress/assets/index.css              |   4 -
 docs/.vitepress/components/home/Features.vue  | 128 ++++++------------
 docs/.vitepress/components/home/Home.vue      |   2 +-
 docs/.vitepress/components/home/RGB.vue       | 127 ++++++++---------
 .../components/home/nodes/Output.vue          |   1 -
 5 files changed, 97 insertions(+), 165 deletions(-)

diff --git a/docs/.vitepress/assets/index.css b/docs/.vitepress/assets/index.css
index 786ce438..c86ff45e 100644
--- a/docs/.vitepress/assets/index.css
+++ b/docs/.vitepress/assets/index.css
@@ -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;
diff --git a/docs/.vitepress/components/home/Features.vue b/docs/.vitepress/components/home/Features.vue
index a5c19c87..adc8d4ae 100644
--- a/docs/.vitepress/components/home/Features.vue
+++ b/docs/.vitepress/components/home/Features.vue
@@ -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>
diff --git a/docs/.vitepress/components/home/Home.vue b/docs/.vitepress/components/home/Home.vue
index 382ec5cd..6c0969d4 100644
--- a/docs/.vitepress/components/home/Home.vue
+++ b/docs/.vitepress/components/home/Home.vue
@@ -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'">
diff --git a/docs/.vitepress/components/home/RGB.vue b/docs/.vitepress/components/home/RGB.vue
index 2d2558e0..0c50018e 100644
--- a/docs/.vitepress/components/home/RGB.vue
+++ b/docs/.vitepress/components/home/RGB.vue
@@ -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>
diff --git a/docs/.vitepress/components/home/nodes/Output.vue b/docs/.vitepress/components/home/nodes/Output.vue
index 3ef5dee6..f0341a36 100644
--- a/docs/.vitepress/components/home/nodes/Output.vue
+++ b/docs/.vitepress/components/home/nodes/Output.vue
@@ -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>