docs: update examples

docs/components/examples/custom-node/App.vue

@@ -1,18 +1,18 @@
 <script setup>
 import { MiniMap } from '@vue-flow/additional-components'
-import { ConnectionMode, Position, VueFlow, useVueFlow } from '@vue-flow/core'
-import { computed, h, onMounted, ref } from 'vue'
+import { Position, VueFlow, useVueFlow } from '@vue-flow/core'
+import { h, onMounted, ref } from 'vue'
 import ColorSelectorNode from './CustomNode.vue'
 import { presets } from './presets.js'
 
-const { getNode } = useVueFlow()
-
-const outputColorNode = computed(() => getNode.value('3'))
+const { findNode } = useVueFlow()
 
 const elements = ref([])
 
 const gradient = ref(false)
+
 const bgColor = ref(presets.ayame)
+
 const bgName = ref('AYAME')
 
 const connectionLineStyle = { stroke: '#fff' }
@@ -39,7 +39,7 @@ const onChange = (color) => {
   bgColor.value = color.value
   bgName.value = color.name
 
-  outputColorNode.value.hidden = false
+  findNode('3').hidden = false
 }
 
 const onGradient = () => {
@@ -47,7 +47,7 @@ const onGradient = () => {
   bgColor.value = null
   bgName.value = 'gradient'
 
-  outputColorNode.value.hidden = true
+  findNode('3').hidden = true
 }
 
 onMounted(() => {
@@ -104,13 +104,12 @@ onMounted(() => {
     class="customnodeflow"
     :class="[gradient ? 'animated-bg-gradient' : '']"
     :style="{ backgroundColor: bgColor }"
-    :connection-mode="ConnectionMode.Loose"
     :connection-line-style="connectionLineStyle"
     :default-zoom="1.5"
-    :fit-view-on-init="true"
+    fit-view-on-init
   >
-    <template #node-custom="props">
-      <ColorSelectorNode :data="props.data" @change="onChange" @gradient="onGradient" />
+    <template #node-custom="{ data }">
+      <ColorSelectorNode :data="data" @change="onChange" @gradient="onGradient" />
     </template>
 
     <MiniMap :node-stroke-color="nodeStroke" :node-color="nodeColor" />

docs/components/examples/custom-node/CustomNode.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { Handle, Position } from '@vue-flow/core'
 import { computed } from 'vue'
-import { presets } from './presets.js'
+import { colors } from './presets.js'
 
 const props = defineProps({
   data: {
@@ -12,8 +12,6 @@ const props = defineProps({
 
 const emit = defineEmits(['change', 'gradient'])
 
-const onConnect = (params) => console.log('handle onConnect', params)
-
 const onSelect = (color) => {
   emit('change', color)
 }
@@ -22,20 +20,8 @@ const onGradient = () => {
   emit('gradient')
 }
 
-const colors = computed(() => {
-  return Object.keys(presets).map((color) => {
-    return {
-      name: color,
-      value: presets[color],
-    }
-  })
-})
-
-const selectedColor = computed(() => {
-  return colors.value.find((color) => color.value === props.data.color)
-})
-
 const sourceHandleStyleA = computed(() => ({ backgroundColor: props.data.color, filter: 'invert(100%)', top: '10px' }))
+
 const sourceHandleStyleB = computed(() => ({
   backgroundColor: props.data.color,
   filter: 'invert(100%)',
@@ -46,14 +32,18 @@ const sourceHandleStyleB = computed(() => ({
 
 <template>
   <div>Select a color</div>
+
   <div
     style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: 90%; margin: auto; gap: 3px"
   >
     <template v-for="color of colors" :key="color.name">
       <button :title="color.name" :style="{ backgroundColor: color.value }" type="button" @click="onSelect(color)"></button>
     </template>
+
     <button class="animated-bg-gradient" title="gradient" type="button" @click="onGradient"></button>
   </div>
+
   <Handle id="a" type="source" :position="Position.Right" :style="sourceHandleStyleA" />
+
   <Handle id="b" type="source" :position="Position.Right" :style="sourceHandleStyleB" />
 </template>

docs/components/examples/custom-node/presets.js

@@ -21,3 +21,10 @@ export const presets = {
   sakura: '#FEDFE1',
   toki: '#EEA9A9',
 }
+
+export const colors = Object.keys(presets).map((color) => {
+  return {
+    name: color,
+    value: presets[color],
+  }
+})