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>

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

@@ -10,11 +10,7 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['change'])
-
-const targetHandleStyle = { background: '#555' }
-const sourceHandleStyleA = { ...targetHandleStyle, top: '10px' }
-const sourceHandleStyleB = { ...targetHandleStyle, bottom: '10px', top: 'auto' }
+const emit = defineEmits(['change', 'gradient'])
 
 const onConnect = (params) => console.log('handle onConnect', params)
 
@@ -22,6 +18,10 @@ const onSelect = (color) => {
   emit('change', color)
 }
 
+const onGradient = () => {
+  emit('gradient')
+}
+
 const colors = computed(() => {
   return Object.keys(presets).map((color) => {
     return {
@@ -34,30 +34,25 @@ const colors = computed(() => {
 const selectedColor = computed(() => {
   return colors.value.find((color) => color.value === props.data.color)
 })
-</script>
 
-<script>
-export default {
-  inheritAttrs: false,
-}
+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 v-if="selectedColor">
-    Select a color
-  </div>
+  <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 }"
-        style="padding: 3px; width: 25px; height: 25px"
-        type="button"
-        @click="onSelect(color)"
-      ></button>
+      <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" />

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

@@ -1,4 +1,6 @@
 export const presets = {
+  sumi: '#1C1C1C',
+  gofun: '#FFFFFB',
   byakuroku: '#A8D8B9',
   mizu: '#81C7D4',
   asagi: '#33A6B8',
@@ -11,10 +13,8 @@ export const presets = {
   konjyo: '#113285',
   fuji: '#8B81C3',
   ayame: '#6F3381',
-  gofun: '#FFFFFB',
   torinoko: '#DAC9A6',
   kurotsurubami: '#0B1013',
-  sumi: '#1C1C1C',
   ohni: '#F05E1C',
   kokikuchinashi: '#FB9966',
   beniukon: '#E98B2A',

docs/components/examples/custom-node/style.css

@@ -1,4 +1,4 @@
-.vue-flow__node-custom {
+.customnodeflow .vue-flow__node-custom {
   border: 1px solid #777;
   padding: 10px;
   border-radius: 10px;
@@ -10,3 +10,64 @@
   gap: 10px;
   max-width: 250px;
 }
+
+.customnodeflow button {
+  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 {
+  opacity: 0.9;
+  transform: scale(105%);
+  transition: 250ms all ease;
+}
+
+.animated-bg-gradient {
+  background: linear-gradient(122deg, #6f3381, #81c7d4, #fedfe1, #fffffb);
+  background-size: 800% 800%;
+
+  -webkit-animation: gradient 4s ease infinite;
+  -moz-animation: gradient 4s ease infinite;
+  animation: gradient 4s ease infinite;
+}
+
+@-webkit-keyframes gradient {
+  0% {
+    background-position: 0% 22%
+  }
+  50% {
+    background-position: 100% 79%
+  }
+  100% {
+    background-position: 0% 22%
+  }
+}
+
+@-moz-keyframes gradient {
+  0% {
+    background-position: 0% 22%
+  }
+  50% {
+    background-position: 100% 79%
+  }
+  100% {
+    background-position: 0% 22%
+  }
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 22%
+  }
+  50% {
+    background-position: 100% 79%
+  }
+  100% {
+    background-position: 0% 22%
+  }
+}