feat(docs): RGB demo coloring

docs/.vitepress/components/home/Features.vue

@@ -209,14 +209,15 @@ whenever(breakpoints.smaller("tablet"), () => instance.value.fitView());
       </div>
       <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">
+          class="w-full md:min-h-[300px] shadow-xl rounded-xl font-mono uppercase overflow-hidden bg-gray-800">
           <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
+              You can create your own node and edge types or just pass a custom style.
+              Implement custom UIs
               inside your nodes
               and add functionality to your edges.
             </p>

docs/.vitepress/components/home/RGB.vue

@@ -1,6 +1,15 @@
 <script lang="ts" setup>
 import { ref } from "vue";
-import { Elements, FlowInstance, VueFlow, Background, Controls, MiniMap, BackgroundVariant } from "@braks/vue-flow";
+import {
+  Elements,
+  FlowInstance,
+  VueFlow,
+  Background,
+  Controls,
+  MiniMap,
+  BackgroundVariant,
+  GraphNode, StringFunc
+} from "@braks/vue-flow";
 import { templateRef, useBreakpoints, useElementBounding, whenever } from "@vueuse/core";
 import CustomEdge from "./edges/Custom.vue";
 import RGBNode from "./nodes/Input.vue";
@@ -12,12 +21,6 @@ type Colors = {
   blue: number
 }
 
-interface Props {
-  next: (node: string[], duration?: number, padding?: number) => void;
-}
-
-const props = defineProps<Props>();
-
 const breakpoints = useBreakpoints({
   mobile: 360,
   tablet: 640,
@@ -29,7 +32,7 @@ const elements = ref<Elements>([
   { 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: "4", type: "rgb-output", label: "RGB", position: { x: 400, y: -25 } },
   { 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 }
@@ -41,7 +44,7 @@ const el = templateRef<HTMLDivElement>("page", null);
 const bounds = useElementBounding(el);
 const onLoad = (flowInstance: FlowInstance) => {
   instance.value = flowInstance;
-  instance.value.fitView()
+  instance.value.fitView();
 };
 whenever(breakpoints.greater("tablet"), () => onLoad(instance.value));
 whenever(breakpoints.smaller("tablet"), () => onLoad(instance.value));
@@ -57,14 +60,30 @@ const bgSize = ref(1);
 const bgGap = ref(48);
 const backgroundChange = (variant: BackgroundVariant) => (bg.value = variant);
 const sizeChange = (size: number) => (bgSize.value = size);
+
+const nodeColor: StringFunc = (node: GraphNode) => {
+  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})`;
+  }
+};
 </script>
 <template>
   <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">
+      class="w-full md:min-h-[300px] shadow-xl rounded-xl font-mono uppercase overflow-hidden bg-gray-800 border-2"
-      <VueFlow id="rgb-flow" v-model="elements" class="relative font-mono" :zoom-on-scroll="false" :node-extent="[[0, 0], [100, 100]]" @pane-ready="onLoad">
+      :style="{ borderColor: `rgb(${color.red}, ${color.green}, ${color.blue})` }">
+      <VueFlow id="rgb-flow" v-model="elements" class="relative font-mono" :zoom-on-scroll="false"
+               :node-extent="[[-50, -150], [500, 300]]" @pane-ready="onLoad">
         <template #edge-rgb-line="rgbLineProps">
-          <CustomEdge v-bind="{ ...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" />
@@ -73,9 +92,9 @@ const sizeChange = (size: number) => (bgSize.value = size);
           <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"
+        <Background :variant="bg" :pattern-color="`rgb(${color.red}, ${color.green}, ${color.blue})`" :gap="bgGap"
                     :size="bgSize" />
-        <MiniMap class="transform scale-75 origin-bottom-right" />
+        <MiniMap class="transform scale-75 origin-bottom-right" :node-color="nodeColor" />
       </VueFlow>
     </div>
   </div>

docs/.vitepress/components/home/edges/Custom.vue

@@ -51,7 +51,7 @@ export default {
   <text>
     <textPath
       :href="`#${props.id}`"
-      :style="{ fontSize: '12px', fill: props.data?.color }"
+      :style="{ fontSize: '1.25rem', fill: 'white' }"
       startOffset="50%"
       text-anchor="middle"
     >

docs/.vitepress/components/home/nodes/Box.vue

@@ -4,7 +4,7 @@ import { Handle, Position } from '@braks/vue-flow'
 const emit = defineEmits(['next'])
 </script>
 <template>
-  <div class="px-4 py-2 bg-white shadow-lg rounded-md border-2 border-solid border-black">
+  <div class="px-4 py-2 shadow-lg rounded-md border-2 border-solid border-black">
     <slot />
     <Handle id="a" type="source" :position="Position.Bottom" />
   </div>

docs/.vitepress/components/home/nodes/Output.vue

@@ -8,16 +8,9 @@ const emit = defineEmits(['next'])
 const next = () => emit('next')
 </script>
 <template>
-  <div :style="{ backgroundColor: props.rgb }" class="rgb-output-node" @click="next">
+  <div :style="{ backgroundColor: props.rgb }" class="px-6 py-2 rounded-xl text-white text-center" @click="next">
-    <div class="text-md uppercase">{{ props.rgb }}</div>
+    <div class="text-xl font-bold">Color Output</div>
+    <div class="font-semibold">{{ props.rgb }}</div>
     <Handle type="target" :position="Position.Left" />
   </div>
 </template>
-<style>
-.rgb-output-node {
-  padding: 9px;
-  border-radius: 25px;
-  text-align: left;
-  color: white;
-}
-</style>