Skip to content

Commit f74be96

Browse files
bcakmakoglubcakmakoglu
committed
examples: add screenshot example (#1456)
1 parent 6503b3e commit f74be96

File tree

11 files changed

+740
-293
lines changed

11 files changed

+740
-293
lines changed

‎docs/examples/screenshot/ScreenshotExample.vue‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<script lang="ts" setup>
2+
import sdk from '@stackblitz/sdk'
3+
4+
const el = ref<HTMLDivElement>()
5+
6+
onMounted(() => {
7+
sdk.embedProjectId(el.value!, 'vitejs-vite-wnam9z', {
8+
forceEmbedLayout: true,
9+
openFile: 'src/App.vue',
10+
height: 750,
11+
})
12+
})
13+
</script>
14+
15+
<template>
16+
<div ref="el" class="outline-none"></div>
17+
</template>

‎docs/package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
"typedocs": "typedoc --options ./typedoc.json"
1212
},
1313
"dependencies": {
14-
"@algolia/client-search": "^4.22.1",
15-
"@stackblitz/sdk": "^1.9.0",
14+
"@algolia/client-search": "^4.23.3",
15+
"@stackblitz/sdk": "^1.10.0",
1616
"@vercel/analytics": "^1.1.2",
1717
"@vercel/speed-insights": "^1.0.8",
1818
"@vue-flow/background": "workspace:*",
@@ -27,18 +27,18 @@
2727
"web-vitals": "^3.5.2"
2828
},
2929
"devDependencies": {
30-
"@iconify/json": "^2.2.176",
30+
"@iconify/json": "^2.2.217",
3131
"@tooling/eslint-config": "workspace:*",
3232
"@tooling/tsconfig": "workspace:*",
3333
"@windicss/plugin-scrollbar": "^1.2.3",
34-
"dotenv": "^16.3.1",
34+
"dotenv": "^16.4.5",
3535
"ohmyfetch": "^0.4.21",
3636
"typedoc": "^0.25.7",
3737
"typedoc-plugin-markdown": "^3.17.1",
3838
"typedoc-plugin-merge-modules": "^5.1.0",
39-
"unplugin-auto-import": "^0.17.5",
40-
"unplugin-icons": "^0.18.3",
41-
"unplugin-vue-components": "^0.26.0",
39+
"unplugin-auto-import": "^0.17.6",
40+
"unplugin-icons": "^0.19.0",
41+
"unplugin-vue-components": "^0.27.0",
4242
"vite-plugin-windicss": "^1.9.3",
4343
"vitepress": "1.0.0-rc.40",
4444
"windicss": "^3.5.6"

‎docs/src/.vitepress/config.mts‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -206,13 +206,14 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
206206
{ text: 'Drag & Drop', link: '/examples/dnd' },
207207
{ text: 'Interactions', link: '/examples/interaction' },
208208
{ text: 'Save & Restore', link: '/examples/save' },
209-
{ text: 'Hide/Show', link: '/examples/hidden' },
210-
{ text: 'Intersection', link: '/examples/intersection' },
211-
{ text: 'Multiple', link: '/examples/multi' },
212-
{ text: 'Pinia', link: '/examples/pinia' },
213-
{ text: 'Transition', link: '/examples/transition' },
214-
{ text: 'Teleport', link: '/examples/teleport' },
215-
{ text: 'Stress', link: '/examples/stress' },
209+
{ text: 'Screenshot', link: '/examples/screenshot' },
210+
{ text: 'Node Visibility', link: '/examples/hidden' },
211+
{ text: 'Node Intersections', link: '/examples/intersection' },
212+
{ text: 'Multiple Flows', link: '/examples/multi' },
213+
{ text: 'Pinia Store', link: '/examples/pinia' },
214+
{ text: 'Viewport Transition', link: '/examples/transition' },
215+
{ text: 'Teleport Nodes', link: '/examples/teleport' },
216+
{ text: 'Stress Test', link: '/examples/stress' },
216217
],
217218
},
218219
{

‎docs/src/components.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
/* eslint-disable */
2-
/* prettier-ignore */
32
// @ts-nocheck
43
// Generated by unplugin-vue-components
54
// Read more: https://github.com/vuejs/core/pull/3399
65
export {}
76

7+
/* prettier-ignore */
88
declare module 'vue' {
99
export interface GlobalComponents {
1010
Acknowledgement: typeof import('./../components/home/Acknowledgement.vue')['default']

‎docs/src/examples/screenshot.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Screenshot
2+
3+
<script setup>
4+
import ScreenshotExample from '../../examples/screenshot/ScreenshotExample.vue';
5+
</script>
6+
7+
This example demonstrates how to take a screenshot of the current graph.
8+
9+
<div class="mt-6">
10+
<ScreenshotExample />
11+
</div>

‎examples/vite/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"@vue-flow/minimap": "workspace:*",
1515
"@vue-flow/node-resizer": "workspace:*",
1616
"@vue-flow/node-toolbar": "workspace:*",
17+
"html-to-image": "^1.11.11",
1718
"pinia": "^2.1.7"
1819
},
1920
"devDependencies": {

‎examples/vite/router.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,10 @@ export const routes: RouterOptions['routes'] = [
126126
path: '/pinia',
127127
component: () => import('./src/Pinia/PiniaExample.vue'),
128128
},
129+
{
130+
path: '/screenshot',
131+
component: () => import('./src/Screenshot/ScreenshotExample.vue'),
132+
},
129133
]
130134

131135
export const router = createRouter({

‎examples/vite/src/Screenshot/ScreenshotExample.vue‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<script lang="ts" setup>
2+
import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
3+
import type { Edge, Node } from '@vue-flow/core'
4+
import { useScreenshot } from './useScreenshot'
5+
6+
const { vueFlowRef } = useVueFlow()
7+
const { capture } = useScreenshot()
8+
9+
const nodes = ref<Node[]>([
10+
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
11+
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
12+
{ id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
13+
{ id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
14+
])
15+
16+
const edges = ref<Edge[]>([
17+
{ id: 'e1-2', source: '1', target: '2', animated: true },
18+
{ id: 'e1-3', source: '1', target: '3' },
19+
])
20+
21+
function doScreenshot() {
22+
if (!vueFlowRef.value) {
23+
console.warn('VueFlow element not found')
24+
return
25+
}
26+
27+
capture(vueFlowRef.value, { shouldDownload: true })
28+
}
29+
</script>
30+
31+
<template>
32+
<VueFlow :nodes="nodes" :edges="edges" fit-view-on-init style="background: white">
33+
<Panel position="top-center">
34+
<button @click="doScreenshot">Screenshot</button>
35+
</Panel>
36+
</VueFlow>
37+
</template>

‎examples/vite/src/Screenshot/types.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import type { Options as HTMLToImageOptions } from 'html-to-image/es/types'
2+
import type { Ref } from 'vue'
3+
4+
export type ImageType = 'jpeg' | 'png'
5+
6+
export interface UseScreenshotOptions extends HTMLToImageOptions {
7+
type?: ImageType
8+
fileName?: string
9+
shouldDownload?: boolean
10+
fetchRequestInit?: RequestInit
11+
}
12+
13+
export type CaptureScreenshot = (el: HTMLElement, options?: UseScreenshotOptions) => Promise<string>
14+
15+
export type Download = (fileName: string) => void
16+
17+
export interface UseScreenshot {
18+
// returns the data url of the screenshot
19+
capture: CaptureScreenshot
20+
download: Download
21+
dataUrl: Ref<string>
22+
error: Ref
23+
}

‎examples/vite/src/Screenshot/useScreenshot.ts‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { toJpeg as ElToJpg, toPng as ElToPng } from 'html-to-image'
2+
import { ref } from 'vue'
3+
import type { Options as HTMLToImageOptions } from 'html-to-image/es/types'
4+
import type { ImageType, UseScreenshot, UseScreenshotOptions } from './types'
5+
6+
export function useScreenshot(): UseScreenshot {
7+
const dataUrl = ref<string>('')
8+
const imgType = ref<ImageType>('png')
9+
const error = ref()
10+
11+
async function capture(el: HTMLElement, options: UseScreenshotOptions = {}) {
12+
let data
13+
14+
const fileName = options.fileName ?? `vue-flow-screenshot-${Date.now()}`
15+
16+
switch (options.type) {
17+
case 'jpeg':
18+
data = await toJpeg(el, options)
19+
break
20+
case 'png':
21+
data = await toPng(el, options)
22+
break
23+
default:
24+
data = await toPng(el, options)
25+
break
26+
}
27+
28+
// immediately download the image if shouldDownload is true
29+
if (options.shouldDownload && fileName !== '') {
30+
download(fileName)
31+
}
32+
33+
return data
34+
}
35+
36+
function toJpeg(el: HTMLElement, options: HTMLToImageOptions = { quality: 0.95 }) {
37+
error.value = null
38+
39+
return ElToJpg(el, options)
40+
.then((data) => {
41+
dataUrl.value = data
42+
imgType.value = 'jpeg'
43+
return data
44+
})
45+
.catch((error) => {
46+
error.value = error
47+
throw new Error(error)
48+
})
49+
}
50+
51+
function toPng(el: HTMLElement, options: HTMLToImageOptions = { quality: 0.95 }) {
52+
error.value = null
53+
54+
return ElToPng(el, options)
55+
.then((data) => {
56+
dataUrl.value = data
57+
imgType.value = 'png'
58+
return data
59+
})
60+
.catch((error) => {
61+
error.value = error
62+
throw new Error(error)
63+
})
64+
}
65+
66+
function download(fileName: string) {
67+
const link = document.createElement('a')
68+
link.download = `${fileName}.${imgType.value}`
69+
link.href = dataUrl.value
70+
link.click()
71+
}
72+
73+
return {
74+
capture,
75+
download,
76+
dataUrl,
77+
error,
78+
}
79+
}

0 commit comments

Comments
 (0)