chore(docs): update custom node example

docs/examples/custom-node/App.vue

@@ -1,35 +1,26 @@
 <script setup>
-import { MiniMap } from '@vue-flow/minimap'
-import { Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
+import { MiniMap } from '@vue-flow/minimap'
+import { Position, VueFlow, useNodesData, useVueFlow } from '@vue-flow/core'
 import ColorSelectorNode from './ColorSelectorNode.vue'
+import OutputNode from './OutputNode.vue'
 import { presets } from './presets.js'
 
-const { findNode } = useVueFlow()
+useVueFlow()
 
-const gradient = ref(false)
-
-const bgColor = ref(presets.ayame)
-
-const bgName = ref('AYAME')
+const nodeData = useNodesData('1')
 
 const nodes = ref([
   {
     id: '1',
     type: 'color-selector',
-    data: { color: bgColor.value },
+    data: { color: presets.ayame },
     position: { x: 0, y: 50 },
   },
   {
     id: '2',
     type: 'output',
-    position: { x: 350, y: 25 },
-    targetPosition: Position.Left,
-  },
-  {
-    id: '3',
-    type: 'output',
-    position: { x: 350, y: 200 },
+    position: { x: 350, y: 114 },
     targetPosition: Position.Left,
   },
 ])
@@ -42,25 +33,12 @@ const edges = ref([
     target: '2',
     animated: true,
     style: () => ({
-      stroke: bgColor.value,
-      filter: 'invert(100%)',
-    }),
-  },
-  {
-    id: 'e1b-3',
-    source: '1',
-    sourceHandle: 'b',
-    target: '3',
-    animated: true,
-    style: () => ({
-      stroke: bgColor.value,
+      stroke: nodeData.value?.color,
       filter: 'invert(100%)',
     }),
   },
 ])
 
-const connectionLineStyle = { stroke: '#fff' }
-
 // minimap stroke color functions
 function nodeStroke(n) {
   switch (n.type) {
@@ -77,27 +55,11 @@ function nodeStroke(n) {
 
 function nodeColor(n) {
   if (n.type === 'color-selector') {
-    return bgColor.value
+    return nodeData.value?.color
   }
 
   return '#fff'
 }
-
-function onChange(color) {
-  gradient.value = false
-  bgColor.value = color.value
-  bgName.value = color.name
-
-  findNode('3').hidden = false
-}
-
-function onGradient() {
-  gradient.value = true
-  bgColor.value = null
-  bgName.value = 'gradient'
-
-  findNode('3').hidden = true
-}
 </script>
 
 <template>
@@ -105,9 +67,8 @@ function onGradient() {
     :nodes="nodes"
     :edges="edges"
     class="custom-node-flow"
-    :class="[gradient ? 'animated-bg-gradient' : '']"
-    :style="{ backgroundColor: bgColor }"
-    :connection-line-style="connectionLineStyle"
+    :class="[nodeData?.isGradient ? 'animated-bg-gradient' : '']"
+    :style="{ backgroundColor: nodeData?.color }"
     :default-viewport="{ zoom: 1.5 }"
     fit-view-on-init
   >
@@ -115,6 +76,10 @@ function onGradient() {
       <ColorSelectorNode :data="data" />
     </template>
 
+    <template #node-output="{ data }">
+      <OutputNode :data="data" />
+    </template>
+
     <MiniMap :node-stroke-color="nodeStroke" :node-color="nodeColor" />
   </VueFlow>
 </template>