examples: add screenshot example (#1456)

docs/examples/screenshot/ScreenshotExample.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import sdk from '@stackblitz/sdk'
+
+const el = ref<HTMLDivElement>()
+
+onMounted(() => {
+  sdk.embedProjectId(el.value!, 'vitejs-vite-wnam9z', {
+    forceEmbedLayout: true,
+    openFile: 'src/App.vue',
+    height: 750,
+  })
+})
+</script>
+
+<template>
+  <div ref="el" class="outline-none"></div>
+</template>

docs/package.json

@@ -11,8 +11,8 @@
     "typedocs": "typedoc --options ./typedoc.json"
   },
   "dependencies": {
-    "@algolia/client-search": "^4.22.1",
-    "@stackblitz/sdk": "^1.9.0",
+    "@algolia/client-search": "^4.23.3",
+    "@stackblitz/sdk": "^1.10.0",
     "@vercel/analytics": "^1.1.2",
     "@vercel/speed-insights": "^1.0.8",
     "@vue-flow/background": "workspace:*",
@@ -27,18 +27,18 @@
     "web-vitals": "^3.5.2"
   },
   "devDependencies": {
-    "@iconify/json": "^2.2.176",
+    "@iconify/json": "^2.2.217",
     "@tooling/eslint-config": "workspace:*",
     "@tooling/tsconfig": "workspace:*",
     "@windicss/plugin-scrollbar": "^1.2.3",
-    "dotenv": "^16.3.1",
+    "dotenv": "^16.4.5",
     "ohmyfetch": "^0.4.21",
     "typedoc": "^0.25.7",
     "typedoc-plugin-markdown": "^3.17.1",
     "typedoc-plugin-merge-modules": "^5.1.0",
-    "unplugin-auto-import": "^0.17.5",
-    "unplugin-icons": "^0.18.3",
-    "unplugin-vue-components": "^0.26.0",
+    "unplugin-auto-import": "^0.17.6",
+    "unplugin-icons": "^0.19.0",
+    "unplugin-vue-components": "^0.27.0",
     "vite-plugin-windicss": "^1.9.3",
     "vitepress": "1.0.0-rc.40",
     "windicss": "^3.5.6"

docs/src/.vitepress/config.mts

@@ -206,13 +206,14 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
             { text: 'Drag & Drop', link: '/examples/dnd' },
             { text: 'Interactions', link: '/examples/interaction' },
             { text: 'Save & Restore', link: '/examples/save' },
-            { text: 'Hide/Show', link: '/examples/hidden' },
-            { text: 'Intersection', link: '/examples/intersection' },
-            { text: 'Multiple', link: '/examples/multi' },
-            { text: 'Pinia', link: '/examples/pinia' },
-            { text: 'Transition', link: '/examples/transition' },
-            { text: 'Teleport', link: '/examples/teleport' },
-            { text: 'Stress', link: '/examples/stress' },
+            { text: 'Screenshot', link: '/examples/screenshot' },
+            { text: 'Node Visibility', link: '/examples/hidden' },
+            { text: 'Node Intersections', link: '/examples/intersection' },
+            { text: 'Multiple Flows', link: '/examples/multi' },
+            { text: 'Pinia Store', link: '/examples/pinia' },
+            { text: 'Viewport Transition', link: '/examples/transition' },
+            { text: 'Teleport Nodes', link: '/examples/teleport' },
+            { text: 'Stress Test', link: '/examples/stress' },
           ],
         },
         {

docs/src/components.d.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
+/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     Acknowledgement: typeof import('./../components/home/Acknowledgement.vue')['default']

docs/src/examples/screenshot.md

@@ -0,0 +1,11 @@
+# Screenshot
+
+<script setup>
+import ScreenshotExample from '../../examples/screenshot/ScreenshotExample.vue';
+</script>
+
+This example demonstrates how to take a screenshot of the current graph.
+
+<div class="mt-6">
+  <ScreenshotExample />
+</div>

examples/vite/package.json

@@ -14,6 +14,7 @@
     "@vue-flow/minimap": "workspace:*",
     "@vue-flow/node-resizer": "workspace:*",
     "@vue-flow/node-toolbar": "workspace:*",
+    "html-to-image": "^1.11.11",
     "pinia": "^2.1.7"
   },
   "devDependencies": {

examples/vite/router.ts

@@ -126,6 +126,10 @@ export const routes: RouterOptions['routes'] = [
     path: '/pinia',
     component: () => import('./src/Pinia/PiniaExample.vue'),
   },
+  {
+    path: '/screenshot',
+    component: () => import('./src/Screenshot/ScreenshotExample.vue'),
+  },
 ]
 
 export const router = createRouter({

examples/vite/src/Screenshot/ScreenshotExample.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
+import type { Edge, Node } from '@vue-flow/core'
+import { useScreenshot } from './useScreenshot'
+
+const { vueFlowRef } = useVueFlow()
+const { capture } = useScreenshot()
+
+const nodes = ref<Node[]>([
+  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
+  { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
+  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
+  { id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
+])
+
+const edges = ref<Edge[]>([
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-3', source: '1', target: '3' },
+])
+
+function doScreenshot() {
+  if (!vueFlowRef.value) {
+    console.warn('VueFlow element not found')
+    return
+  }
+
+  capture(vueFlowRef.value, { shouldDownload: true })
+}
+</script>
+
+<template>
+  <VueFlow :nodes="nodes" :edges="edges" fit-view-on-init style="background: white">
+    <Panel position="top-center">
+      <button @click="doScreenshot">Screenshot</button>
+    </Panel>
+  </VueFlow>
+</template>

examples/vite/src/Screenshot/types.ts

@@ -0,0 +1,23 @@
+import type { Options as HTMLToImageOptions } from 'html-to-image/es/types'
+import type { Ref } from 'vue'
+
+export type ImageType = 'jpeg' | 'png'
+
+export interface UseScreenshotOptions extends HTMLToImageOptions {
+  type?: ImageType
+  fileName?: string
+  shouldDownload?: boolean
+  fetchRequestInit?: RequestInit
+}
+
+export type CaptureScreenshot = (el: HTMLElement, options?: UseScreenshotOptions) => Promise<string>
+
+export type Download = (fileName: string) => void
+
+export interface UseScreenshot {
+  // returns the data url of the screenshot
+  capture: CaptureScreenshot
+  download: Download
+  dataUrl: Ref<string>
+  error: Ref
+}

examples/vite/src/Screenshot/useScreenshot.ts

@@ -0,0 +1,79 @@
+import { toJpeg as ElToJpg, toPng as ElToPng } from 'html-to-image'
+import { ref } from 'vue'
+import type { Options as HTMLToImageOptions } from 'html-to-image/es/types'
+import type { ImageType, UseScreenshot, UseScreenshotOptions } from './types'
+
+export function useScreenshot(): UseScreenshot {
+  const dataUrl = ref<string>('')
+  const imgType = ref<ImageType>('png')
+  const error = ref()
+
+  async function capture(el: HTMLElement, options: UseScreenshotOptions = {}) {
+    let data
+
+    const fileName = options.fileName ?? `vue-flow-screenshot-${Date.now()}`
+
+    switch (options.type) {
+      case 'jpeg':
+        data = await toJpeg(el, options)
+        break
+      case 'png':
+        data = await toPng(el, options)
+        break
+      default:
+        data = await toPng(el, options)
+        break
+    }
+
+    // immediately download the image if shouldDownload is true
+    if (options.shouldDownload && fileName !== '') {
+      download(fileName)
+    }
+
+    return data
+  }
+
+  function toJpeg(el: HTMLElement, options: HTMLToImageOptions = { quality: 0.95 }) {
+    error.value = null
+
+    return ElToJpg(el, options)
+      .then((data) => {
+        dataUrl.value = data
+        imgType.value = 'jpeg'
+        return data
+      })
+      .catch((error) => {
+        error.value = error
+        throw new Error(error)
+      })
+  }
+
+  function toPng(el: HTMLElement, options: HTMLToImageOptions = { quality: 0.95 }) {
+    error.value = null
+
+    return ElToPng(el, options)
+      .then((data) => {
+        dataUrl.value = data
+        imgType.value = 'png'
+        return data
+      })
+      .catch((error) => {
+        error.value = error
+        throw new Error(error)
+      })
+  }
+
+  function download(fileName: string) {
+    const link = document.createElement('a')
+    link.download = `${fileName}.${imgType.value}`
+    link.href = dataUrl.value
+    link.click()
+  }
+
+  return {
+    capture,
+    download,
+    dataUrl,
+    error,
+  }
+}