chore(docs): update custom node example

Author: bcakmakoglu

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()
-
-const gradient = ref(false)
+useVueFlow()
 
-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,44 +55,31 @@ 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>
   <VueFlow
     :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
   >
     <template #node-color-selector="{ data }">
       <ColorSelectorNode :data="data" />
     </template>
 
+    <template #node-output="{ data }">
+      <OutputNode :data="data" />
+    </template>
+
     <MiniMap :node-stroke-color="nodeStroke" :node-color="nodeColor" />
   </VueFlow>
 </template>

docs/examples/custom-node/ColorSelectorNode.vue

@@ -1,60 +1,42 @@
 <script setup>
-import { Handle, Position, useVueFlow } from '@vue-flow/core'
+import { Handle, Position, useNodeId, useVueFlow } from '@vue-flow/core'
 import { colors } from './presets.js'
 
-const props = defineProps({
-  id: {
-    type: String,
-    required: true,
-  },
+defineProps({
   data: {
     type: Object,
     required: true,
   },
 })
 
+const nodeId = useNodeId()
+
 const { updateNodeData } = useVueFlow()
 
 function onSelect(color) {
-  updateNodeData(props.id, { color: color.value }, { replace: true })
+  updateNodeData(nodeId, { color }, { replace: true })
 }
 
 function onGradient() {
-  updateNodeData(props.id, { isGradient: true }, { replace: true })
+  updateNodeData(nodeId, { isGradient: true }, { replace: true })
 }
 </script>
 
 <template>
   <div>Select a color</div>
 
-  <div
-    class="color-selector"
-    style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: 90%; margin: auto; gap: 4px"
-  >
-    <template v-for="color of colors" :key="color.name">
-      <button :title="color.name" :style="{ backgroundColor: color.value }" type="button" @click="onSelect(color)" />
-    </template>
+  <div class="color-selector nodrag nopan">
+    <button
+      v-for="{ name: colorName, value: color } of colors"
+      :key="colorName"
+      :title="colorName"
+      :style="{ backgroundColor: color }"
+      type="button"
+      @click="onSelect(color)"
+    />
 
     <button class="animated-bg-gradient" title="gradient" type="button" @click="onGradient" />
   </div>
 
-  <!-- When using multiple handles of the same type, each handle should have a unique id -->
-  <Handle
-    id="a"
-    type="source"
-    :position="Position.Right"
-    :style="{ backgroundColor: data.color, filter: 'invert(100%)', top: '10px' }"
-  />
-
-  <Handle
-    id="b"
-    type="source"
-    :position="Position.Right"
-    :style="{
-      backgroundColor: data.color,
-      filter: 'invert(100%)',
-      bottom: '10px',
-      top: 'auto',
-    }"
-  />
+  <Handle id="a" type="source" :position="Position.Right" />
 </template>

docs/examples/custom-node/OutputNode.vue

@@ -1,17 +1,21 @@
 <script setup>
-import { useHandleConnections, useNodesData } from '@vue-flow/core'
+import { Handle, Position, useHandleConnections, useNodesData } from '@vue-flow/core'
 
-const props = defineProps({
-  id: {
-    type: String,
+defineProps({
+  data: {
+    type: Object,
     required: true,
   },
 })
 
 const connections = useHandleConnections({
-  nodeId: props.id,
   type: 'target',
 })
 
-const data = useNodesData()
+const data = useNodesData(() => connections.value[0]?.source)
 </script>
+
+<template>
+  <Handle type="target" :position="Position.Left" :style="{ backgroundColor: data?.color, filter: 'invert(100%)' }" />
+  {{ data?.isGradient ? 'GRADIENT' : data?.color }}
+</template>

docs/examples/custom-node/style.css

@@ -22,19 +22,19 @@
 }
 
 .custom-node-flow .vue-flow__node-color-selector .color-selector button {
-  border: none;
+  border: 1px solid #777;
   cursor: pointer;
   padding: 5px;
   width: 25px;
   height: 25px;
   border-radius: 25px;
-  -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
-  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
 }
 
 .custom-node-flow .vue-flow__node-color-selector .color-selector button:hover {
   -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
   box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
+  transform: scale(105%);
+  transition: 250ms all ease;
 }
 
 .animated-bg-gradient {