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>
2021-11-19 01:43:07 +01:00
parent c8d3ff6a29
commit 70b077a1f5
12 changed files with 286 additions and 157 deletions
@@ -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>