chore(examples): update RGB examples

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

docs/components/home/edges/Custom.vue

@@ -41,15 +41,20 @@ export default {
 
 <template>
   <path
-    :id="id"
+    :id="`${id}-${data.color}`"
     class="vue-flow__edge-path"
-    :style="{ stroke: data?.color, strokeWidth: '3' }"
+    :style="{ stroke: data.color, strokeWidth: '3' }"
     :d="edgePath[0]"
     :marker-end="markerEnd"
   />
   <text>
-    <textPath :href="`#${id}`" :style="{ fontSize: '1.25rem', fill: 'white' }" startOffset="50%" text-anchor="middle">
+    <textPath
-      {{ data?.text }}
+      :href="`#${id}-${data.color}`"
+      :style="{ fontSize: '1.25rem', fill: 'white' }"
+      startOffset="50%"
+      text-anchor="middle"
+    >
+      {{ data.text }}
     </textPath>
   </text>
 </template>

docs/components/home/nodes/Input.vue

@@ -26,7 +26,7 @@ function onChange(e: InputEvent) {
     <div class="text-md font-semibold text-center" :style="{ color: currentColor }">{{ `${currentColor}`.toUpperCase() }}</div>
 
     <input
-      :model-value="amount[currentColor]"
+      :value="amount[currentColor]"
       class="slider nodrag"
       :style="{ '--color': currentColor }"
       type="range"

examples/vite/src/RGBFlow/RGBEdge.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import type { EdgeProps, Position } from '@vue-flow/core'
+import { getBezierPath } from '@vue-flow/core'
+import type { Colors } from './utils'
+
+interface EdgeData {
+  text?: string
+  color?: Colors
+}
+
+interface CustomEdgeProps extends EdgeProps<EdgeData> {
+  source: string
+  target: string
+  sourceHandleId?: string
+  targetHandleId?: string
+  id: string
+  sourceX: number
+  sourceY: number
+  targetX: number
+  targetY: number
+  sourcePosition: Position
+  targetPosition: Position
+  markerEnd: string
+  data: {
+    text?: string
+    color?: Colors
+  }
+}
+
+const props = defineProps<CustomEdgeProps>()
+
+const edgePath = computed(() => getBezierPath(props))
+</script>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<template>
+  <path
+    :id="id"
+    class="vue-flow__edge-path"
+    :style="{ stroke: data?.color, strokeWidth: '3' }"
+    :d="edgePath[0]"
+    :marker-end="markerEnd"
+  />
+
+  <text>
+    <textPath :href="`#${id}`" :style="{ fontSize: '1.25rem', fill: 'black' }" startOffset="50%" text-anchor="middle">
+      {{ data?.text }}
+    </textPath>
+  </text>
+</template>

examples/vite/src/RGBFlow/RGBFlow.vue

@@ -3,30 +3,26 @@ import type { Elements } from '@vue-flow/core'
 import { VueFlow } from '@vue-flow/core'
 import RGBNode from './RGBNode.vue'
 import RGBOutputNode from './RGBOutputNode.vue'
-
+import type { Colors } from './utils'
-interface Colors {
+import RGBEdge from './RGBEdge.vue'
-  red: number
-  green: number
-  blue: number
-}
 
 const elements = ref<Elements>([
-  { id: '1', type: 'rgb', data: { color: 'r' }, position: { x: -25, y: 50 } },
+  { id: '1', type: 'rgb', data: { color: 'red' }, position: { x: -25, y: 50 } },
-  { id: '2', type: 'rgb', data: { color: 'g' }, position: { x: 50, y: -100 } },
+  { id: '2', type: 'rgb', data: { color: 'green' }, position: { x: 50, y: -100 } },
-  { id: '3', type: 'rgb', data: { color: 'b' }, position: { x: 0, y: 200 } },
+  { id: '3', type: 'rgb', data: { color: 'blue' }, position: { x: 0, y: 200 } },
   { id: '4', type: 'rgb-output', data: { label: 'RGB' }, position: { x: 400, y: 50 } },
-  { id: 'e1-4', data: { color: 'red' }, source: '1', target: '4', animated: true },
+  { id: 'e1-4', type: 'rgb-edge', data: { color: 'red' }, source: '1', target: '4', animated: true },
-  { id: 'e2-4', data: { color: 'green' }, source: '2', target: '4', animated: true },
+  { id: 'e2-4', type: 'rgb-edge', data: { color: 'green' }, source: '2', target: '4', animated: true },
-  { id: 'e3-4', data: { color: 'blue' }, source: '3', target: '4', animated: true },
+  { id: 'e3-4', type: 'rgb-edge', data: { color: 'blue' }, source: '3', target: '4', animated: true },
 ])
 
-const color = ref<Colors>({
+const color = ref<Record<Colors, number>>({
   red: 100,
   green: 150,
   blue: 100,
 })
 
-function onChange({ color: c, val }: { color: keyof Colors; val: number }) {
+function onChange({ color: c, val }: { color: Colors; val: number }) {
   return (color.value[c] = Number(val))
 }
 </script>
@@ -41,6 +37,10 @@ function onChange({ color: c, val }: { color: keyof Colors; val: number }) {
       <template #node-rgb-output="props">
         <RGBOutputNode v-bind="props" :rgb="`rgb(${color.red}, ${color.green}, ${color.blue})`" />
       </template>
+
+      <template #edge-rgb-edge="props">
+        <RGBEdge v-bind="{ ...props, data: { text: color[props.data?.color], ...props.data } }" />
+      </template>
     </VueFlow>
   </div>
 </template>

examples/vite/src/RGBFlow/RGBNode.vue

@@ -1,49 +1,41 @@
 <script lang="ts" setup>
-import type { CSSProperties } from 'vue'
 import type { NodeProps } from '@vue-flow/core'
 import { Handle, Position } from '@vue-flow/core'
+import type { Colors } from './utils'
 
-interface RGBNodeProps extends NodeProps {
+interface RGBNodeProps extends Pick<NodeProps<{ color: Colors }>, 'data'> {
   data: {
-    color: 'r' | 'g' | 'b'
+    color: Colors
-  }
-  amount: {
-    red: number
-    green: number
-    blue: number
   }
+  amount: Record<Colors, number>
 }
 
 const props = defineProps<RGBNodeProps>()
-const emit = defineEmits(['change'])
+
-let color = 'red'
+const emit = defineEmits<{ (event: 'change', data: { color: Colors; val: number }): void }>()
-switch (props.data.color) {
+
-  case 'r':
+const currentColor = toRef(props.data, 'color', 'red')
-    color = 'red'
+
-    break
+function onChange(e: InputEvent) {
-  case 'g':
+  return emit('change', { color: currentColor.value, val: parseInt((e.target as HTMLInputElement).value) })
-    color = 'green'
-    break
-  case 'b':
-    color = 'blue'
-    break
 }
-
-const colorVal = computed({
-  get: () => props.amount[color as 'red' | 'green' | 'blue'],
-  set: (val) => {
-    emit('change', { color, val })
-  },
-})
-
-const style = { '--color': color } as CSSProperties
 </script>
 
 <template>
   <div class="wrapper">
-    <div class="text-md" :style="{ color }">{{ `${color} Amount`.toUpperCase() }}</div>
+    <div class="text-md" :style="{ color: currentColor }">{{ `${currentColor}`.toUpperCase() }}</div>
-    <input v-model="colorVal" class="slider nodrag" :style="style" type="range" min="0" max="255" />
+
-    <Handle type="source" :position="Position.Right" :style="{ backgroundColor: color }" />
+    <input
+      :value="amount[currentColor]"
+      class="slider nodrag"
+      :style="{ '--color': currentColor }"
+      type="range"
+      min="0"
+      max="255"
+      @input="onChange"
+    />
+
+    <Handle type="source" :position="Position.Right" :style="{ backgroundColor: currentColor }" />
   </div>
 </template>
 

examples/vite/src/RGBFlow/utils.ts

@@ -0,0 +1 @@
+export type Colors = 'red' | 'blue' | 'green'