docs: update examples

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

@@ -1,24 +1,29 @@
 <script setup>
-import { Background, ConnectionMode, MiniMap, Position, VueFlow } from '@braks/vue-flow'
-import { h, onMounted, ref } from 'vue'
+import { ConnectionMode, MiniMap, Position, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { computed, 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 elements = ref([])
 
+const gradient = ref(false)
 const bgColor = ref(presets.ayame)
 const bgName = ref('AYAME')
 
 const connectionLineStyle = { stroke: '#fff' }
 
-const snapGrid = [16, 16]
-
+// minimap stroke color functions
 const nodeStroke = (n) => {
   if (n.type === 'input') return '#0041d0'
   if (n.type === 'custom') return presets.sumi
   if (n.type === 'output') return '#ff0072'
   return '#eee'
 }
+
 const nodeColor = (n) => {
   if (n.type === 'custom') return bgColor.value
   return '#fff'
@@ -29,8 +34,19 @@ const outputColorLabel = () => h('div', {}, bgColor.value)
 const outputNameLabel = () => h('div', {}, bgName.value)
 
 const onChange = (color) => {
+  gradient.value = false
   bgColor.value = color.value
   bgName.value = color.name
+
+  outputColorNode.value.hidden = false
+}
+
+const onGradient = () => {
+  gradient.value = true
+  bgColor.value = null
+  bgName.value = 'gradient'
+
+  outputColorNode.value.hidden = true
 }
 
 onMounted(() => {
@@ -52,12 +68,31 @@ onMounted(() => {
       id: '3',
       type: 'output',
       label: outputColorLabel,
-      position: { x: 350, y: 175 },
+      position: { x: 350, y: 200 },
       targetPosition: Position.Left,
     },
-
-    { id: 'e1a-2', source: '1', sourceHandle: 'a', target: '2', animated: true, style: { stroke: '#fff' } },
-    { id: 'e1b-3', source: '1', sourceHandle: 'b', target: '3', animated: true, style: { stroke: '#fff' } },
+    {
+      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>
@@ -65,18 +100,18 @@ onMounted(() => {
 <template>
   <VueFlow
     v-model="elements"
+    class="customnodeflow"
+    :class="[gradient ? 'animated-bg-gradient' : '']"
     :style="{ backgroundColor: bgColor }"
     :connection-mode="ConnectionMode.Loose"
     :connection-line-style="connectionLineStyle"
-    :snap-to-grid="true"
-    :snap-grid="snapGrid"
     :default-zoom="1.5"
     :fit-view-on-init="true"
   >
     <template #node-custom="props">
-      <ColorSelectorNode v-bind="props" @change="onChange" />
+      <ColorSelectorNode :data="props.data" @change="onChange" @gradient="onGradient" />
     </template>
-    <Background :size="0.7" pattern-color="black" />
+
     <MiniMap :node-stroke-color="nodeStroke" :node-color="nodeColor" />
   </VueFlow>
 </template>