From 157127b63d57f3a34aac6dabb14ae54d691d072d Mon Sep 17 00:00:00 2001
From: Julius Knorr <jus@bitgrid.net>
Date: Tue, 7 Jan 2025 13:17:37 +0100
Subject: [PATCH] feat: Add option to take screenshot of the visible area

Signed-off-by: Julius Knorr <jus@bitgrid.net>
---
 src/App.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index 55b6b0d..7d2b4dc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,7 +9,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { Icon } from '@mdi/react'
-import { mdiSlashForwardBox } from '@mdi/js'
+import { mdiSlashForwardBox, mdiMonitorScreenshot } from '@mdi/js'
 import { createRoot } from 'react-dom'
 import {
 	Excalidraw,
@@ -212,6 +212,16 @@ export default function App({
 			addWebEmbed(link)
 		})
 	}
+
+	const takeScreenshot = () => {
+		const dataUrl = document.querySelector('.excalidraw__canvas').toDataURL('image/png')
+		const downloadLink = document.createElement('a')
+		downloadLink.href = dataUrl
+		downloadLink.download = `${fileNameWithoutExtension} Screenshot.png`
+		document.body.appendChild(downloadLink)
+		downloadLink.click()
+	}
+
 	const renderMenu = () => {
 		return (
 			<MainMenu>
@@ -219,6 +229,11 @@ export default function App({
 				<MainMenu.DefaultItems.ChangeCanvasBackground />
 				<MainMenu.Separator />
 				<MainMenu.DefaultItems.SaveAsImage />
+				<MainMenu.Item
+					icon={<Icon path={mdiMonitorScreenshot} size="16px" />}
+					onSelect={() => takeScreenshot()}>
+					{ 'Download screenshot' }
+				</MainMenu.Item>
 			</MainMenu>
 		)
 	}