docs: update examples

docs/components/Repl.vue

@@ -26,7 +26,7 @@ body,
 }
 
 .vue-flow__minimap {
-  transform: scale(50%)
+  transform: scale(75%);
   transform-origin: bottom right;
 }`
 

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%
+  }
+}

docs/components/examples/edges/App.vue

@@ -6,36 +6,36 @@ import CustomEdge2 from './CustomEdge2.vue'
 import CustomEdgeLabel from './CustomEdgeLabel.vue'
 
 const elements = ref([
-  { id: '1', type: 'input', label: 'Input 1', position: { x: 250, y: 0 } },
+  { id: '1', type: 'input', label: 'Start', position: { x: 50, y: 0 }, style: { borderColor: '#10b981' } },
   { id: '2', label: 'Node 2', position: { x: 150, y: 100 } },
   { id: '2a', label: 'Node 2a', position: { x: 0, y: 180 } },
   { id: '3', label: 'Node 3', position: { x: 250, y: 200 } },
   { id: '4', label: 'Node 4', position: { x: 400, y: 300 } },
-  { id: '3a', label: 'Node 3a', position: { x: 150, y: 300 } },
-  { id: '5', label: 'Node 5', position: { x: 250, y: 400 } },
-  { id: '6', type: 'output', label: 'Output 6', position: { x: 50, y: 550 } },
-  { id: '7', type: 'output', label: 'Output 7', position: { x: 250, y: 550 } },
-  { id: '8', type: 'output', label: 'Output 8', position: { x: 525, y: 600 } },
-  { id: '9', type: 'output', label: 'Output 9', position: { x: 675, y: 500 } },
+  { id: '3a', label: 'Node 3a', position: { x: 175, y: 300 } },
+  { id: '5', label: 'Node 5', position: { x: 200, y: 400 } },
+  { id: '6', type: 'output', label: 'Output 6', position: { x: 0, y: 350 } },
+  { id: '7', type: 'output', label: 'Output 7', position: { x: 50, y: 600 } },
+  { id: '8', type: 'output', label: 'Output 8', position: { x: 350, y: 600 } },
+  { id: '9', type: 'output', label: 'Output 9', position: { x: 550, y: 400 } },
   { id: 'e1-2', source: '1', target: '2', label: 'bezier edge (default)', class: 'normal-edge' },
   { id: 'e2-2a', source: '2', target: '2a', type: 'smoothstep', label: 'smoothstep edge' },
   { id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
   { id: 'e3-4', source: '3', target: '4', type: 'straight', label: 'straight edge' },
   { id: 'e3-3a', source: '3', target: '3a', type: 'straight', label: 'label only edge', style: { stroke: 'none' } },
-  { id: 'e3-5', source: '4', target: '5', animated: true, label: 'animated styled edge', style: { stroke: 'red' } },
+  { id: 'e3-5', source: '4', target: '5', animated: true, label: 'animated styled edge', style: { stroke: '#10b981' } },
   {
-    id: 'e5-6',
-    source: '5',
+    id: 'e2a-6',
+    source: '2a',
     target: '6',
     label: () => h(CustomEdgeLabel, { label: 'custom label text' }),
-    labelStyle: { fill: 'red', fontWeight: 700 },
+    labelStyle: { fill: '#10b981', fontWeight: 700 },
     markerEnd: MarkerType.Arrow,
   },
   {
     id: 'e5-7',
     source: '5',
     target: '7',
-    label: 'label with styled bg',
+    label: 'label with bg',
     labelBgPadding: [8, 4],
     labelBgBorderRadius: 4,
     labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 },
@@ -50,11 +50,11 @@ const elements = ref([
     markerEnd: MarkerType.ArrowClosed,
   },
   {
-    id: 'e5-9',
-    source: '5',
+    id: 'e4-9',
+    source: '4',
     target: '9',
     type: 'custom2',
-    data: { text: 'custom edge 2' },
+    data: { text: 'styled custom edge label' },
   },
 ])
 </script>

docs/components/examples/edges/CustomEdge.vue

@@ -93,7 +93,7 @@ export default {
   >
     <body style="display: flex; align-items: center; justify-content: center">
       <div>
-        <button ref="btn" class="edgebutton animated-text-gradient" @click="(event) => onClick(event, id)">×</button>
+        <button ref="btn" class="edgebutton" @click="(event) => onClick(event, id)">×</button>
       </div>
     </body>
   </foreignObject>

docs/components/examples/edges/CustomEdge2.vue

@@ -89,7 +89,7 @@ export default {
     :label="props.data?.text"
     :label-style="{ fill: 'white' }"
     :label-show-bg="true"
-    :label-bg-style="{ fill: 'red' }"
+    :label-bg-style="{ fill: '#10b981' }"
     :label-bg-padding="[2, 4]"
     :label-bg-border-radius="2"
     @click="onClick"

docs/components/examples/edges/style.css

@@ -1,34 +1,10 @@
 .edgebutton {
-  color: whitesmoke;
   border-radius: 999px;
   cursor: pointer;
 }
 
 .edgebutton:hover {
-  box-shadow: 0 0 0 2px pink, 0 0 0 4px #f05f75;
-}
-
-.animated-text-gradient {
-  background: linear-gradient(122deg, #6f3381, #81c7d4, #fedfe1, #fffffb);
-  background-size: 800% 800%;
-
-  -webkit-animation: textgradient 4s ease infinite;
-  -moz-animation: textgradient 4s ease infinite;
-  animation: textgradient 4s ease infinite;
-}
-
-@-webkit-keyframes textgradient {
-  0%{background-position:0% 22%}
-  50%{background-position:100% 79%}
-  100%{background-position:0% 22%}
-}
-@-moz-keyframes textgradient {
-  0%{background-position:0% 22%}
-  50%{background-position:100% 79%}
-  100%{background-position:0% 22%}
-}
-@keyframes textgradient {
-  0%{background-position:0% 22%}
-  50%{background-position:100% 79%}
-  100%{background-position:0% 22%}
+  transform: scale(110%);
+  transition: all ease 500ms;
+  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.5), 0 0 0 4px #10b981;
 }

docs/components/examples/nested/App.vue

@@ -6,12 +6,11 @@ const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
   fitViewOnInit: true,
   connectionMode: ConnectionMode.Loose,
   nodes: [
-    { id: '1', type: 'input', label: 'node', position: { x: 250, y: 0 }, class: 'light' },
+    { id: '1', type: 'input', label: 'node', position: { x: 250, y: 0 } },
     {
       id: '2',
       label: 'parent node',
       position: { x: 100, y: 100 },
-      class: 'light',
       style: { backgroundColor: 'rgba(16, 185, 129, 0.5)', width: '200px', height: '200px' },
     },
     {
@@ -20,19 +19,16 @@ const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
       position: { x: 10, y: 50 },
       parentNode: '2',
     },
-    { id: '3', label: 'node', position: { x: 350, y: 100 }, class: 'light' },
     {
       id: '4',
       label: 'parent node',
-      position: { x: 320, y: 300 },
-      class: 'light',
-      style: { backgroundColor: 'rgba(16, 185, 129, 0.5)', width: '300px', height: '300px' },
+      position: { x: 320, y: 175 },
+      style: { backgroundColor: 'rgba(16, 185, 129, 0.5)', width: '400px', height: '300px' },
     },
     {
       id: '4a',
       label: 'child node',
       position: { x: 15, y: 65 },
-      class: 'light',
       extent: 'parent',
       parentNode: '4',
     },
@@ -40,7 +36,6 @@ const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
       id: '4b',
       label: 'nested parent node',
       position: { x: 15, y: 120 },
-      class: 'light',
       style: { backgroundColor: 'rgba(139, 92, 246, 0.5)', height: '150px', width: '270px' },
       parentNode: '4',
     },
@@ -48,20 +43,20 @@ const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
       id: '4b1',
       label: 'nested child node',
       position: { x: 20, y: 40 },
-      class: 'light',
       parentNode: '4b',
     },
     {
       id: '4b2',
       label: 'nested child node',
       position: { x: 100, y: 100 },
-      class: 'light',
       parentNode: '4b',
     },
+    { id: '4c', label: 'child node', position: { x: 200, y: 65 }, parentNode: '4' },
   ],
   edges: [
     { id: 'e1-2', source: '1', target: '2' },
-    { id: 'e1-3', source: '1', target: '3' },
+    { id: 'e1-4', source: '1', target: '4' },
+    { id: 'e1-4c', source: '1', target: '4c' },
     { id: 'e2a-4a', source: '2a', target: '4a' },
     { id: 'e3-4', source: '3', target: '4' },
     { id: 'e3-4b', source: '3', target: '4b' },

docs/components/examples/stress/App.vue

@@ -3,7 +3,7 @@ import { VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
 import { ref } from 'vue'
 import { getElements } from './utils.js'
 
-const { nodes, edges } = getElements(10, 10)
+const { nodes, edges } = getElements(15, 15)
 const elements = ref([...nodes, ...edges])
 
 const { onPaneReady } = useVueFlow()
@@ -29,7 +29,7 @@ const updatePos = () =>
 </script>
 
 <template>
-  <VueFlow v-model="elements">
+  <VueFlow v-model="elements" :min-zoom="0.1">
     <div style="position: absolute; right: 10px; top: 10px; z-index: 4">
       <button style="margin-right: 5px" @click="updatePos">update positions</button>
       <button style="margin-right: 5px" @click="toggleClass">toggle class</button>

docs/components/home/Features.vue

@@ -29,26 +29,26 @@ watch([breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoin
       class="flex flex-col divide-y divide-gray-500 md:divide-y-0 gap-12 md:gap-24 lg:gap-36 max-w-9/12 md:max-w-11/12 lg:max-w-9/12 m-auto py-12 md:py-24 text-center md:text-left"
     >
       <div ref="basic">
-        <XyzTransition :appear-visible="true" xyz="fade left ease-out-back">
+        <XyzTransition appear-visible xyz="fade down ease-out-back">
           <div class="flex flex-col md:flex-row gap-12 md:gap-24">
             <Basic @pane="onLoad" />
           </div>
         </XyzTransition>
       </div>
 
-      <XyzTransition :appear-visible="true" xyz="fade down ease-out-back">
+      <XyzTransition appear-visible xyz="fade down ease-out-back">
         <div class="flex flex-col-reverse md:flex-row flex-unwrap gap-12 md:gap-24">
           <RGB @pane="onLoad" />
         </div>
       </XyzTransition>
 
-      <XyzTransition :appear-visible="true" xyz="fade down ease-out-back">
+      <XyzTransition appear-visible xyz="fade down ease-out-back">
         <div class="flex flex-col md:flex-row flex-unwrap gap-12 md:gap-24">
           <Nested @pane="onLoad" />
         </div>
       </XyzTransition>
 
-      <XyzTransition :appear-visible="true" xyz="fade down ease-out-back">
+      <XyzTransition appear-visible xyz="fade down ease-out-back">
         <div class="flex flex-col-reverse md:flex-row flex-unwrap gap-12 md:gap-24">
           <Additional @pane="onLoad" />
         </div>

docs/src/examples/hidden.md

@@ -9,8 +9,11 @@ You can toggle the visibility of nodes by simply setting their `hidden` attribut
 
 Edges that are connected to a hidden node will also be hidden.
 
-If you set the `onlyRenderVisibleElements` prop to `true`, hidden elements will not be rendered at all instead of just hiding them with
-css. This behavior is disabled by default, meaning all elements are rendered whether they are hidden or not.
+If you set the `onlyRenderVisibleElements` prop to `true`, only elements that are visible inside the current viewpane will be rendered. 
+This behavior is disabled by default, meaning all elements are rendered whether they are inside the view or not.
+
+This can save you some time on initial renders but consider that moving the pane can cause multiple renders of nodes into the dom,
+which can cause performance spikes depending on the complexity of the components that have to be mounted.
 
 <div class="mt-6">
   <client-only>

docs/src/index.md

@@ -11,8 +11,10 @@ footer: MIT Licensed | Copyright © 2021-present Burak Cakmakoglu
   <Banner />
 </Suspense>
 
-<Features />
+<client-only>
+  <Features />
 
-<XyzTransition :appear-visible="true" xyz="fade down ease-out-back">
-  <Acknowledgement />
-</XyzTransition>
+  <XyzTransition appear-visible xyz="fade down ease-out-back">
+    <Acknowledgement />
+  </XyzTransition>
+</client-only>