chore(docs): update custom node example

docs/examples/custom-node/App.vue

@@ -1,49 +1,86 @@
 <script setup>
 import { MiniMap } from '@vue-flow/minimap'
 import { Position, VueFlow, useVueFlow } from '@vue-flow/core'
-import { h, onMounted, ref } from 'vue'
+import { ref } from 'vue'
-import ColorSelectorNode from './CustomNode.vue'
+import ColorSelectorNode from './ColorSelectorNode.vue'
 import { presets } from './presets.js'
 
 const { findNode } = useVueFlow()
 
-const elements = ref([])
-
 const gradient = ref(false)
 
 const bgColor = ref(presets.ayame)
 
 const bgName = ref('AYAME')
 
+const nodes = ref([
+  {
+    id: '1',
+    type: 'color-selector',
+    data: { color: bgColor.value },
+    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 },
+    targetPosition: Position.Left,
+  },
+])
+
+const edges = ref([
+  {
+    id: 'e1a-2',
+    source: '1',
+    sourceHandle: 'a',
+    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,
+      filter: 'invert(100%)',
+    }),
+  },
+])
+
 const connectionLineStyle = { stroke: '#fff' }
 
 // minimap stroke color functions
 function nodeStroke(n) {
-  if (n.type === 'input') {
+  switch (n.type) {
-    return '#0041d0'
+    case 'input':
+      return '#0041d0'
+    case 'color-selector':
+      return presets.sumi
+    case 'output':
+      return '#ff0072'
+    default:
+      return '#eee'
   }
-  if (n.type === 'custom') {
-    return presets.sumi
-  }
-  if (n.type === 'output') {
-    return '#ff0072'
-  }
-  return '#eee'
 }
 
 function nodeColor(n) {
-  if (n.type === 'custom') {
+  if (n.type === 'color-selector') {
     return bgColor.value
   }
-  return '#fff'
-}
 
-// output labels
+  return '#fff'
-function outputColorLabel() {
-  return h('div', {}, bgColor.value)
-}
-function outputNameLabel() {
-  return h('div', {}, bgName.value)
 }
 
 function onChange(color) {
@@ -61,66 +98,20 @@ function onGradient() {
 
   findNode('3').hidden = true
 }
-
-onMounted(() => {
-  elements.value = [
-    {
-      id: '1',
-      type: 'custom',
-      data: { color: bgColor },
-      position: { x: 0, y: 50 },
-    },
-    {
-      id: '2',
-      type: 'output',
-      label: outputNameLabel,
-      position: { x: 350, y: 25 },
-      targetPosition: Position.Left,
-    },
-    {
-      id: '3',
-      type: 'output',
-      label: outputColorLabel,
-      position: { x: 350, y: 200 },
-      targetPosition: Position.Left,
-    },
-    {
-      id: 'e1a-2',
-      source: '1',
-      sourceHandle: 'a',
-      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,
-        filter: 'invert(100%)',
-      }),
-    },
-  ]
-})
 </script>
 
 <template>
   <VueFlow
-    v-model="elements"
+    :nodes="nodes"
-    class="customnodeflow"
+    :edges="edges"
+    class="custom-node-flow"
     :class="[gradient ? 'animated-bg-gradient' : '']"
     :style="{ backgroundColor: bgColor }"
     :connection-line-style="connectionLineStyle"
     :default-viewport="{ zoom: 1.5 }"
     fit-view-on-init
   >
-    <template #node-custom="{ data }">
+    <template #node-color-selector="{ data }">
       <ColorSelectorNode :data="data" @change="onChange" @gradient="onGradient" />
     </template>
 

docs/examples/custom-node/ColorSelectorNode.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { Handle, Position, useVueFlow } from '@vue-flow/core'
+import { colors } from './presets.js'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  data: {
+    type: Object,
+    required: true,
+  },
+})
+
+const { updateNodeData } = useVueFlow()
+
+function onSelect(color) {
+  updateNodeData(props.id, { color: color.value }, { replace: true })
+}
+
+function onGradient() {
+  updateNodeData(props.id, { 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>
+
+    <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',
+    }"
+  />
+</template>

docs/examples/custom-node/CustomNode.vue

@@ -1,49 +0,0 @@
-<script setup>
-import { Handle, Position } from '@vue-flow/core'
-import { computed } from 'vue'
-import { colors } from './presets.js'
-
-const props = defineProps({
-  data: {
-    type: Object,
-    required: true,
-  },
-})
-
-const emit = defineEmits(['change', 'gradient'])
-
-function onSelect(color) {
-  emit('change', color)
-}
-
-function onGradient() {
-  emit('gradient')
-}
-
-const sourceHandleStyleA = computed(() => ({ backgroundColor: props.data.color, filter: 'invert(100%)', top: '10px' }))
-
-const sourceHandleStyleB = computed(() => ({
-  backgroundColor: props.data.color,
-  filter: 'invert(100%)',
-  bottom: '10px',
-  top: 'auto',
-}))
-</script>
-
-<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)" />
-    </template>
-
-    <button class="animated-bg-gradient" title="gradient" type="button" @click="onGradient" />
-  </div>
-
-  <Handle id="a" type="source" :position="Position.Right" :style="sourceHandleStyleA" />
-
-  <Handle id="b" type="source" :position="Position.Right" :style="sourceHandleStyleB" />
-</template>

docs/examples/custom-node/OutputNode.vue

@@ -0,0 +1,4 @@
+<script setup>
+const props = defineProps();
+
+const { }

docs/examples/custom-node/index.ts

@@ -1,4 +1,5 @@
 export { default as CustomNodeApp } from './App.vue?raw'
-export { default as CustomNode } from './CustomNode.vue?raw'
+export { default as ColorSelectorNode } from './ColorSelectorNode.vue?raw'
+export { default as OutputNode } from './OutputNode.vue?raw'
 export { default as CustomNodeCSS } from './style.css?inline'
 export { default as ColorPresets } from './presets.js?raw'

docs/examples/custom-node/style.css

@@ -1,4 +1,4 @@
-.customnodeflow .vue-flow__node-custom {
+.custom-node-flow .vue-flow__node-color-selector {
   border: 1px solid #777;
   padding: 10px;
   border-radius: 10px;
@@ -11,20 +11,30 @@
   max-width: 250px;
 }
 
-.customnodeflow button {
+.custom-node-flow .vue-flow__node-color-selector .color-selector {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  max-width: 90%;
+  margin: auto;
+  gap: 4px
+}
+
+.custom-node-flow .vue-flow__node-color-selector .color-selector button {
+  border: none;
+  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);
-  cursor: pointer;
 }
 
-.customnodeflow button:hover {
+.custom-node-flow .vue-flow__node-color-selector .color-selector button:hover {
-  opacity: 0.9;
+  -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
-  transform: scale(105%);
+  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
-  transition: 250ms all ease;
 }
 
 .animated-bg-gradient {

docs/examples/index.ts

@@ -1,5 +1,5 @@
 import { BasicApp, BasicCSS, BasicElements, BasicIcon } from './basic'
-import { ColorPresets, CustomNode, CustomNodeApp, CustomNodeCSS } from './custom-node'
+import { ColorPresets, ColorSelectorNode, CustomNodeApp, CustomNodeCSS, OutputNode } from './custom-node'
 import { CustomConnectionLine, CustomConnectionLineApp } from './connectionline'
 import { CustomEdge, CustomEdge2, CustomEdgeLabel, EdgeCSS, EdgesApp } from './edges'
 import { NestedApp } from './nested'
@@ -30,7 +30,8 @@ export const exampleImports = {
   },
   customNode: {
     'App.vue': CustomNodeApp,
-    'CustomNode.vue': CustomNode,
+    'ColorSelectorNode.vue': ColorSelectorNode,
+    'OutputNode.vue': OutputNode,
     'style.css': CustomNodeCSS,
     'presets.js': ColorPresets,
   },