docs: replace codesandbox embed with repl (#122)

* docs: Animations * docs: add confetti gun * docs: update basic example on home page * docs(deps): Add stackblitz sdk to deps * chore: update yarn.lock * docs: use vue repl * docs: remove stackblitz sdk * docs: basic repl example * docs: use repl for examples/index.md (basic example) * docs: pass ext to repl * docs: add copy plugin * docs: use import map instead of dynamic imports * docs: use repl for custom node example * docs: hide repl errors * docs: use repl for custom connectionline example * docs: use repl for edges example * docs: exclude repl from ssr * docs: use repl for nested example * docs: use repl for stress example * docs: rename customNode to custom-node * docs: use repl for update-edge example * docs: use repl for update-node example * docs: use repl for validation example * docs: use repl for save-restore example * docs: scale down minimap in repl examples * docs: use repl for dnd example * docs: use repl for empty example * docs: use repl for hidden example * docs: use repl for interaction example * docs: use repl for multi example * docs: add pinia example with stackblitz * docs: update basic example * docs: update examples * docs: remove transition from intro * docs: update features * update: README.md * docs: scope css
2022-05-26 19:28:25 +02:00
parent 6494b65b3e
commit 98a893108c
95 changed files with 2342 additions and 321 deletions
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { GraphEdge, useVueFlow, VueFlow, Background, Controls, ClassFunc } from '@braks/vue-flow'
+import { Background, ClassFunc, ConnectionLineType, Controls, GraphEdge, useVueFlow, VueFlow } from "@braks/vue-flow";
+import Cross from "~icons/mdi/window-close";

 const getClass: ClassFunc = (el) => {
  const classes = ['font-semibold', '!border-2', 'transition-colors', 'duration-300', 'ease-in-out']
@@ -13,26 +14,31 @@ const getClass: ClassFunc = (el) => {

 const emit = defineEmits(['pane'])

-const { onPaneReady } = useVueFlow({
+const { onPaneReady, onConnect, addEdges, viewport } = useVueFlow({
+  connectionLineType: ConnectionLineType.SmoothStep,
+  connectionLineStyle: {
+    strokeDasharray: 5,
+    animation: 'dashdraw 0.5s linear infinite',
+  },
  modelValue: [
    {
      id: '1',
      type: 'input',
-      label: 'input',
+      label: 'Start',
      position: { x: 250, y: 5 },
      class: getClass,
    },
    {
      id: '2',
-      label: 'default',
+      label: 'Waypoint',
      position: { x: 100, y: 100 },
      class: getClass,
    },
-    { id: '3', label: 'default', position: { x: 400, y: 100 }, class: getClass },
+    { id: '3', label: 'Waypoint', position: { x: 400, y: 100 }, class: getClass },
    {
      id: '4',
      type: 'output',
-      label: 'output',
+      label: 'End',
      position: { x: 250, y: 225 },
      class: getClass,
    },
@@ -93,14 +99,21 @@ const { onPaneReady } = useVueFlow({
 })

 onPaneReady((i) => emit('pane', i))
+onConnect((param) => {
+  addEdges([{
+    ...param,
+    type: 'smoothstep',
+    animated: true,
+  }])
+})
 </script>
 <template>
  <div class="md:max-w-1/3 flex flex-col justify-center">
-    <div class="flex flex-col gap-2 items-center md:items-start">
-      <h1>Batteries-included</h1>
+    <div class="flex flex-col items-center md:items-start">
+      <h1>Interactive Graphs</h1>
      <p>
-        Vue Flow comes with several built-in features including zooming, panning, zoom & pan controls, single & multi-selections, element dragging,
-        node and edge components and event handlers.
+        Vue Flow comes with built-in features like zoom & pan and dedicated controls, single & multi-selections, draggable elements,
+        customizable nodes and edges and a bunch of event handlers.
      </p>
      <router-link class="button max-w-max" to="/guide/"> Documentation </router-link>
    </div>
@@ -109,8 +122,12 @@ onPaneReady((i) => emit('pane', i))
    class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase border-1 border-secondary overflow-hidden"
  >
    <VueFlow class="basic">
-      <Controls class="md:!left-auto md:!right-[10px]" />
-      <Background pattern-color="#aaa" :gap="16" />
+      <Controls class="md:(!left-auto !right-[10px])" />
+      <Background pattern-color="#aaa" :gap="60">
+        <template #pattern>
+          <Cross :style="{ fontSize: `${8 * viewport.zoom || 1}px` }" class="text-[#10b981] opacity-50" />
+        </template>
+      </Background>
    </VueFlow>
  </div>
 </template>
@@ -1,11 +1,17 @@
 <script lang="ts" setup>
 import { Handle, Position, VueFlow, useVueFlow } from '@braks/vue-flow'
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
-import BoxNode from '../nodes/Box.vue'
+import confetti from 'canvas-confetti'
+import colors from 'windicss/colors'
+import { cheer, fireworks } from './confetti'
 import Heart from '~icons/mdi/heart'

 const breakpoints = useBreakpoints(breakpointsTailwind)

+const dark = useDark({
+  selector: 'html',
+})
+
 const initialEdges = [
  {
    id: 'eintro-examples',
@@ -35,7 +41,7 @@ const initialEdges = [
    style: { strokeWidth: 2, stroke: '#0ea5e9' },
  },
 ]
-const { dimensions, instance, onPaneReady, getNodes, getNode, getEdge, updateEdge, edges, setEdges } = useVueFlow({
+const { dimensions, instance, onNodeClick, onPaneReady, getNodes, getNode, getEdge, updateEdge, edges, setEdges } = useVueFlow({
  nodes: [
    { id: 'intro', type: 'box', position: { x: 0, y: 0 } },
    { id: 'examples', type: 'box', position: { x: -50, y: 400 } },
@@ -47,10 +53,54 @@ const { dimensions, instance, onPaneReady, getNodes, getNode, getEdge, updateEdg
  nodesDraggable: false,
  panOnDrag: false,
  zoomOnScroll: false,
+  zoomOnDoubleClick: false,
+  zoomOnPinch: false,
+})
+
+const clickInterval = ref()
+const clicks = ref(0)
+const disabled = ref(false)
+
+const confettiColors = Object.values(colors).flatMap((color) => {
+  if (typeof color === 'string') return color
+  else return Object.values(color).flatMap((c) => c)
+})
+
+onNodeClick(async ({ node }) => {
+  if (node.id === 'intro') {
+    if (disabled.value) return
+
+    if (clickInterval.value) {
+      clearInterval(clickInterval.value)
+    }
+
+    clickInterval.value = setInterval(() => {
+      clearInterval(clickInterval.value)
+      clicks.value = 0
+    }, 1000)
+
+    clicks.value++
+    if (clicks.value < 10) {
+      confetti({
+        startVelocity: 25,
+        spread: 360,
+        angle: 270,
+        origin: { y: 0.1 },
+        colors: confettiColors,
+      })
+    } else if (clicks.value < 20) {
+      await cheer(['#10b981', dark.value ? '#ffffff' : '#000000'])
+    } else if (clicks.value === 20) {
+      disabled.value = true
+      await fireworks(confettiColors)
+      disabled.value = false
+    } else {
+      clicks.value = 0
+    }
+  }
 })

 const init = ref(false)
-const edgeId = ref('eintro-documentation')
 const el = templateRef<HTMLDivElement>('el', null)

 onPaneReady(({ fitView }) => {
@@ -83,40 +133,34 @@ onPaneReady(({ fitView }) => {
        }
      })

-      nextTick(() => {
-        setEdges(() => {
-          return [
-            {
-              id: 'eintro-examples',
-              type: 'smoothstep',
-              sourceHandle: 'a',
-              source: 'intro',
-              target: 'examples',
-              animated: true,
-              style: { strokeWidth: 2, stroke: '#8b5cf6' },
-            },
-            {
-              id: 'eexamples-documentation',
-              type: 'smoothstep',
-              source: 'examples',
-              target: 'documentation',
-              animated: true,
-              style: { strokeWidth: 2, stroke: '#f97316' },
-            },
-            {
-              id: 'edocumentation-acknowledgement',
-              type: 'smoothstep',
-              source: 'documentation',
-              target: 'acknowledgement',
-              animated: true,
-              style: { strokeWidth: 2, stroke: '#0ea5e9' },
-            },
-          ]
-        })
-
-        fitView({
-          duration: 1500,
-        })
+      setEdges(() => {
+        return [
+          {
+            id: 'eintro-examples',
+            type: 'smoothstep',
+            sourceHandle: 'a',
+            source: 'intro',
+            target: 'examples',
+            animated: true,
+            style: { strokeWidth: 2, stroke: '#8b5cf6' },
+          },
+          {
+            id: 'eexamples-documentation',
+            type: 'smoothstep',
+            source: 'examples',
+            target: 'documentation',
+            animated: true,
+            style: { strokeWidth: 2, stroke: '#f97316' },
+          },
+          {
+            id: 'edocumentation-acknowledgement',
+            type: 'smoothstep',
+            source: 'documentation',
+            target: 'acknowledgement',
+            animated: true,
+            style: { strokeWidth: 2, stroke: '#0ea5e9' },
+          },
+        ]
      })
    } else {
      getNodes.value.forEach((node) => {
@@ -143,24 +187,16 @@ onPaneReady(({ fitView }) => {
        }
      })

-      nextTick(() => {
-        setEdges(initialEdges)
-        fitView({
-          duration: 1500,
-        })
-      })
+      setEdges(initialEdges)
    }

-    setTimeout(
-      () => {
-        if (!init.value) init.value = true
-        else instance.value?.fitView()
-      },
-      init.value ? 5 : 1505,
-    )
+    nextTick(() => {
+      fitView()
+      if (!init.value) init.value = true
+    })
  }

-  useResizeObserver(el, setNodes)
+  useResizeObserver(el, useDebounceFn(setNodes, 5))
 })

 const scrollTo = () => {
@@ -175,34 +211,35 @@ const scrollTo = () => {
  <VueFlow ref="el" class="dark:bg-black bg-white transition-colors duration-200 ease-in-out">
    <template #node-box="props">
      <template v-if="props.id === 'intro'">
-        <div class="max-w-[500px]">
-          <BoxNode class="intro">
+        <div class="box max-w-[500px]">
+          <div class="intro px-4 py-2 shadow-lg rounded-md border-2 border-solid border-black">
            <div class="font-mono flex flex-col gap-4 p-4 items-center text-center">
              <h1 class="text-2xl lg:text-4xl">Vue Flow</h1>
              <h2 class="text-lg lg:text-xl font-normal !border-0">
                The customizable Vue 3 component bringing interactivity to flowcharts and graphs.
              </h2>
            </div>
-          </BoxNode>
+            <Handle id="a" type="source" :position="Position.Bottom" />
+          </div>
        </div>
      </template>
      <template v-else-if="props.id === 'documentation'">
        <div class="flex">
-          <router-link class="link group bg-orange-500" to="/guide/"> Read The Documentation </router-link>
+          <router-link class="link group bg-[#f15a16]" to="/guide/"> Read The Documentation </router-link>
        </div>
        <Handle type="target" :position="Position.Top" />
        <Handle class="block md:hidden" type="source" :position="Position.Bottom" />
      </template>
      <template v-else-if="props.id === 'examples'">
        <div class="flex">
-          <router-link class="link group bg-purple-500" to="/examples/"> Check The Examples </router-link>
+          <router-link class="link group bg-[#ef467e]" to="/examples/"> Check The Examples </router-link>
        </div>
        <Handle type="target" :position="Position.Top" />
        <Handle class="block md:hidden" type="source" :position="Position.Bottom" />
      </template>
      <template v-else-if="props.id === 'acknowledgement'">
        <div class="flex" @click="scrollTo">
-          <div class="link group bg-sky-500"><Heart class="text-red-500" /> Acknowledgement</div>
+          <button class="link group bg-sky-500"><Heart class="text-red-500" /> Acknowledgement</button>
        </div>
        <Handle type="target" :position="Position.Top" />
      </template>
@@ -72,7 +72,7 @@ onPaneReady((i) => emit('pane', i))
    class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase border-1 border-green-500 overflow-hidden"
  >
    <VueFlow class="nested">
-      <Controls class="md:!left-auto md:!right-[10px]" />
+      <Controls class="md:(!left-auto !right-[10px])" />
      <Background pattern-color="#aaa" class="!bg-gray-800" :gap="18" />
    </VueFlow>
  </div>
@@ -0,0 +1,69 @@
+import confetti from 'canvas-confetti'
+
+export const fireworks = (colors?: string[]) => {
+  return new Promise((resolve) => {
+    const duration = 15 * 1000
+    const animationEnd = Date.now() + duration
+    const defaults = { startVelocity: 60, spread: 360, ticks: 20, zIndex: 0 }
+
+    function randomInRange(min: number, max: number) {
+      return Math.random() * (max - min) + min
+    }
+
+    const interval: any = setInterval(function () {
+      const timeLeft = animationEnd - Date.now()
+
+      if (timeLeft <= 0) {
+        clearInterval(interval)
+        return resolve(true)
+      }
+
+      const particleCount = 50 * (timeLeft / duration)
+      // since particles fall down, start a bit higher than random
+      confetti(
+        Object.assign({}, defaults, {
+          particleCount,
+          origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
+          colors,
+        }),
+      )
+      confetti(
+        Object.assign({}, defaults, {
+          particleCount,
+          origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },
+          colors,
+        }),
+      )
+    }, 250)
+  })
+}
+
+export const cheer = (colors: string[]) => {
+  return new Promise((resolve) => {
+    const end = Date.now() + 2 * 1000
+
+    function frame() {
+      confetti({
+        particleCount: 2,
+        angle: 60,
+        spread: 75,
+        origin: { x: 0 },
+        colors,
+      })
+      confetti({
+        particleCount: 2,
+        angle: 120,
+        spread: 75,
+        origin: { x: 1 },
+        colors,
+      })
+
+      if (Date.now() < end) {
+        requestAnimationFrame(frame)
+      } else {
+        resolve(true)
+      }
+    }
+    frame()
+  })
+}