chore(examples): update custom node example

Signed-off-by: braks <[email protected]>

Author: bcakmakoglu

examples/vite/src/CustomNode/ColorSelectorNode.vue

@@ -1,21 +1,21 @@
 <script lang="ts" setup>
 import type { CSSProperties } from 'vue'
-import type { Connection, Edge, NodeProps } from '@vue-flow/core'
+import type { NodeProps } from '@vue-flow/core'
 import { Handle, Position } from '@vue-flow/core'
 
-interface ColorSelectorNodeProps extends NodeProps {
-  data: {
-    color: string
-    onChange: (event: any) => void
-  }
+interface Data {
+  color: string
+  onChange: (event: InputEvent) => void
+}
+
+interface ColorSelectorNodeProps extends NodeProps<Data, {}, 'selectorNode'> {
+  data: Data
 }
 const props = defineProps<ColorSelectorNodeProps>()
 
 const targetHandleStyle: CSSProperties = { background: '#555' }
 const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: '10px' }
 const sourceHandleStyleB: CSSProperties = { ...targetHandleStyle, bottom: '10px', top: 'auto' }
-
-const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params)
 </script>
 
 <script lang="ts">
@@ -25,7 +25,7 @@ export default {
 </script>
 
 <template>
-  <Handle type="target" :position="Position.Left" :style="targetHandleStyle" :on-connect="onConnect" />
+  <Handle type="target" :position="Position.Left" :style="targetHandleStyle" />
   <div>
     Custom Color Picker Node: <strong>{{ data.color }}</strong>
   </div>

examples/vite/src/CustomNode/CustomNode.vue

@@ -7,80 +7,78 @@ import { MiniMap } from '@vue-flow/minimap'
 
 import ColorSelectorNode from './ColorSelectorNode.vue'
 
-const elements = ref<Elements>([])
 const bgColor = ref('#1A192B')
 const connectionLineStyle = { stroke: '#fff' }
 const snapGrid: SnapGrid = [16, 16]
 
-const nodeStroke = (n: Node): string => {
+const elements = ref<Elements>([
+  {
+    id: '1',
+    type: 'input',
+    label: 'An input node',
+    position: { x: 0, y: 50 },
+    sourcePosition: Position.Right,
+  },
+  {
+    id: '2',
+    type: 'selectorNode',
+    data: { onChange, color: bgColor },
+    style: { border: '1px solid #777', padding: '10px' },
+    parentNode: '1',
+    position: { x: 250, y: 50 },
+  },
+  {
+    id: '3',
+    type: 'output',
+    label: 'Output A',
+    position: { x: 650, y: 25 },
+    targetPosition: Position.Left,
+  },
+  {
+    id: '4',
+    type: 'output',
+    label: 'Output B',
+    position: { x: 650, y: 100 },
+    targetPosition: Position.Left,
+  },
+
+  { id: 'e1-2', source: '1', target: '2', animated: true, style: { stroke: '#fff' } },
+  { id: 'e2a-3', source: '2', sourceHandle: 'a', target: '3', animated: true, style: { stroke: '#fff' } },
+  { id: 'e2b-4', source: '2', sourceHandle: 'b', target: '4', animated: true, style: { stroke: '#fff' } },
+])
+
+useVueFlow({
+  connectionMode: ConnectionMode.Loose,
+  connectionLineOptions: {
+    style: connectionLineStyle,
+  },
+  snapToGrid: true,
+  snapGrid,
+})
+
+function nodeStroke(n: Node) {
   if (n.type === 'input') return '#0041d0'
   if (n.type === 'selectorNode') return bgColor.value
   if (n.type === 'output') return '#ff0072'
   return '#eee'
 }
-const nodeColor = (n: Node): string => {
+function nodeColor(n: Node) {
   if (n.type === 'selectorNode') return bgColor.value
   return '#fff'
 }
 
-const onChange = (event: Event) => {
+function onChange(event: InputEvent) {
   elements.value.forEach((e) => {
     if (isEdge(e) || e.id !== '2') return e
     bgColor.value = (event.target as HTMLInputElement).value
   })
 }
-
-onMounted(() => {
-  elements.value = [
-    {
-      id: '1',
-      type: 'input',
-      label: 'An input node',
-      position: { x: 0, y: 50 },
-      sourcePosition: Position.Right,
-    },
-    {
-      id: '2',
-      type: 'selectorNode',
-      data: { onChange, color: bgColor },
-      style: { border: '1px solid #777', padding: '10px' },
-      position: { x: 250, y: 50 },
-    },
-    {
-      id: '3',
-      type: 'output',
-      label: 'Output A',
-      position: { x: 650, y: 25 },
-      targetPosition: Position.Left,
-    },
-    {
-      id: '4',
-      type: 'output',
-      label: 'Output B',
-      position: { x: 650, y: 100 },
-      targetPosition: Position.Left,
-    },
-
-    { id: 'e1-2', source: '1', target: '2', animated: true, style: { stroke: '#fff' } },
-    { id: 'e2a-3', source: '2', sourceHandle: 'a', target: '3', animated: true, style: { stroke: '#fff' } },
-    { id: 'e2b-4', source: '2', sourceHandle: 'b', target: '4', animated: true, style: { stroke: '#fff' } },
-  ]
-})
-
-useVueFlow({
-  connectionMode: ConnectionMode.Loose,
-  connectionLineOptions: {
-    style: connectionLineStyle,
-  },
-  snapToGrid: true,
-  snapGrid,
-})
 </script>
 
 <template>
   <VueFlow v-model="elements" fit-view-on-init :style="{ backgroundColor: bgColor }">
     <template #node-selectorNode="props">
-      <ColorSelectorNode v-bind="props" />
+      <ColorSelectorNode :data="props.data" :parent-node="props.parentNode" :position="props.position" />
     </template>
     <MiniMap :node-stroke-color="nodeStroke" :node-color="nodeColor" />
     <Controls />