fix!: props and composable not merging together properly

* Add getter for node/edge types
* change nodeTypes prop type to only Record<string, NodeType> - same for edges
* Add rgb example
* remove v-model for elements

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

examples/Provider/ProviderExample.vue

@@ -11,7 +11,7 @@ import {
   Edge,
   Elements,
   ConnectionMode,
-  useStore,
+  useVueFlow,
 } from '~/index'
 
 import './provider.css'
@@ -28,7 +28,7 @@ const initialElements: Elements = [
   { id: 'e1-3', source: '1', target: '3' },
 ]
 
-useStore()
+useVueFlow()
 const elements = ref<Elements>(initialElements)
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
 const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))

examples/RGBFlow/RGBFlow.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { templateRef } from '@vueuse/core'
+import RGBNode from './RGBNode.vue'
+import RGBOutputNode from './RGBOutputNode.vue'
+import { Elements, FlowInstance, VueFlow, useVueFlow } from '~/index'
+
+type Colors = {
+  red: number
+  green: number
+  blue: number
+}
+const elements = ref<Elements>([
+  { id: '1', type: 'rgb', data: { color: 'r' }, position: { x: -25, y: 50 } },
+  { id: '2', type: 'rgb', data: { color: 'g' }, position: { x: 50, y: -100 } },
+  { id: '3', type: 'rgb', data: { color: 'b' }, 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: 'e2-4', data: { color: 'green' }, source: '2', target: '4', animated: true },
+  { id: 'e3-4', data: { color: 'blue' }, source: '3', target: '4', animated: true },
+])
+
+const el = templateRef<HTMLDivElement>('page', null)
+
+const onLoad = (flowInstance: FlowInstance) => {
+  flowInstance.setTransform({ x: el.value?.clientWidth / 2.2, y: el.value?.clientHeight / 3, zoom: 1.25 })
+}
+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 { store } = useVueFlow({
+  nodeTypes: {
+    'rgb': true,
+    'rgb-output': true,
+  },
+  zoomOnScroll: false,
+})
+</script>
+<template>
+  <div ref="page" class="flex demo-flow justify-center items-center h-[80vh] w-full gap-4" style="height: 100%; border-radius: 0">
+    <VueFlow class="relative font-mono" :elements="elements" @load="onLoad">
+      <template #node-rgb="props">
+        <RGBNode v-bind="props" :amount="color" @change="onChange" />
+      </template>
+      <template #node-rgb-output="props">
+        <RGBOutputNode :v-bind="props" :rgb="`rgb(${color.red}, ${color.green}, ${color.blue})`" />
+      </template>
+    </VueFlow>
+  </div>
+</template>

examples/RGBFlow/RGBNode.vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import { Handle, NodeProps, Position } from '~/index'
+
+interface RGBNodeProps extends NodeProps {
+  data: {
+    color: 'r' | 'g' | 'b'
+  }
+  amount: {
+    red: number
+    green: number
+    blue: number
+  }
+}
+const props = defineProps<RGBNodeProps>()
+const emit = defineEmits(['change'])
+let color = 'red'
+switch (props.data.color) {
+  case 'r':
+    color = 'red'
+    break
+  case 'g':
+    color = 'green'
+    break
+  case 'b':
+    color = 'blue'
+    break
+}
+const onChange = (e: any) => emit('change', { color, val: e.target.value })
+console.log('rgb')
+</script>
+<template>
+  <div class="px-4 py-2 bg-white rounded-md border-2 border-solid border-black text-left transform scale-75 lg:scale-100">
+    <div class="text-md" :style="{ color }">{{ `${color} Amount`.toUpperCase() }}</div>
+    <input
+      v-model="props.amount[color]"
+      class="slider nodrag"
+      :style="{ '--color': color }"
+      type="range"
+      min="0"
+      max="255"
+      @input="onChange"
+    />
+    <Handle type="source" :position="Position.Right" :style="{ backgroundColor: color }" />
+  </div>
+</template>
+<style>
+.slider {
+  --color: red;
+  @apply bg-gray-200 w-full h-[10px] outline-none rounded-full;
+  -webkit-appearance: none;
+  appearance: none;
+
+  &::-moz-range-thumb {
+    @apply w-[15px] h-[15px] cursor-pointer border-1 border-solid border-white rounded-full;
+    -webkit-appearance: none;
+    background: var(--color);
+  }
+  &::-webkit-slider-thumb {
+    @apply w-[15px] h-[15px] cursor-pointer border-1 border-solid border-white rounded-full;
+    -webkit-appearance: none;
+    background: var(--color);
+  }
+}
+</style>

examples/RGBFlow/RGBOutputNode.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { Handle, NodeProps, Position } from '~/index'
+
+interface RBGOutputNodeProps extends NodeProps {
+  rgb: string
+}
+
+const props = defineProps<RBGOutputNodeProps>()
+</script>
+<template>
+  <div :style="{ backgroundColor: props.rgb }" class="p-3 rounded-xl text-left text-white">
+    <div class="text-md uppercase">{{ props.rgb }}</div>
+    <Handle type="source" :position="Position.Left" />
+  </div>
+</template>

examples/router.ts

@@ -5,6 +5,10 @@ export const routes: RouterOptions['routes'] = [
     path: '/',
     redirect: '/overview',
   },
+  {
+    path: '/rgb',
+    component: () => import('./RGBFlow/RGBFlow.vue'),
+  },
   {
     path: '/basic',
     component: () => import('./Basic/Basic.vue'),