feat: add SVG snapshot saving

closes #150
surrealdb · Dec 8, 2023 · c9c0df7 · c9c0df7
1 parent fcb4a4e
commit c9c0df7
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 62 deletions.
diff --git a/src/adapter/base.tsx b/src/adapter/base.tsx
@@ -77,7 +77,7 @@ export interface SurrealistAdapter {
 		title: string,
 		defaultPath: string,
 		filters: any,
-		content: () => Result<string>
+		content: () => Result<string | Blob | null>
 	): Promise<boolean>;
 
 	/**

diff --git a/src/adapter/browser.tsx b/src/adapter/browser.tsx
@@ -43,9 +43,18 @@ export class BrowserAdapter implements SurrealistAdapter {
 		_title: string,
 		defaultPath: string,
 		_filters: any,
-		content: () => Result<string>
+		content: () => Result<string | Blob | null>
 	): Promise<boolean> {
-		const file = new File([await content()], '', { type: 'text/plain' });
+		const result = await content();
+
+		if (!result) {
+			return false;
+		}
+
+		const file = (typeof result === 'string')
+			? new File([result], '', { type: 'text/plain' })
+			: result;
+
 		const url = window.URL.createObjectURL(file);
 		const el = document.createElement('a');
 

diff --git a/src/adapter/desktop.tsx b/src/adapter/desktop.tsx
@@ -8,7 +8,7 @@ import { showNotification } from "@mantine/notifications";
 import { store } from "~/store";
 import { SurrealistAdapter } from "./base";
 import { printLog } from "~/util/helpers";
-import { readTextFile, writeTextFile } from "@tauri-apps/api/fs";
+import { readTextFile, writeBinaryFile, writeTextFile } from "@tauri-apps/api/fs";
 import { Result } from "~/typings/utilities";
 import { confirmServing, pushConsoleLine, stopServing } from "~/stores/database";
 
@@ -88,15 +88,25 @@ export class DesktopAdapter implements SurrealistAdapter {
 		title: string,
 		defaultPath: string,
 		filters: any,
-		content: () => Result<string>
+		content: () => Result<string | Blob | null>
 	): Promise<boolean> {
 		const filePath = await save({ title, defaultPath, filters });
 
 		if (!filePath) {
 			return false;
 		}
 
-		await writeTextFile(filePath, await content());
+		const result = await content();
+
+		if (!result) {
+			return false;
+		}
+
+		if (typeof result === "string") {
+			await writeTextFile(filePath, result);
+		} else {
+			await writeBinaryFile(filePath, await result.arrayBuffer());
+		}
 
 		return true;
 	}

diff --git a/src/views/designer/TableGraphPane/helpers.tsx b/src/views/designer/TableGraphPane/helpers.tsx
@@ -1,9 +1,10 @@
+import dagere from "dagre";
 import { TableNode } from "~/views/designer/TableGraphPane/nodes/TableNode";
 import { EdgeNode } from "./nodes/EdgeNode";
 import { DesignerNodeMode, TableDefinition } from "~/types";
 import { extractEdgeRecords } from "~/util/schema";
 import { Edge, Node, Position } from "reactflow";
-import dagere from "dagre";
+import { toBlob, toSvg } from "html-to-image";
 
 type HeightMap = Record<DesignerNodeMode, (t: TableDefinition, e: boolean) => number>;
 
@@ -137,3 +138,14 @@ export function buildTableGraph(
 
 	return [nodes, edges];
 }
+
+export async function createSnapshot(el: HTMLElement, type: 'png' | 'svg') {
+	if (type == 'png') {
+		return toBlob(el, { cacheBust: true });
+	} else {
+		const dataUrl = await toSvg(el, { cacheBust: true });
+		const res = await fetch(dataUrl);
+
+		return await res.blob();
+	}
+}
diff --git a/src/views/designer/TableGraphPane/index.tsx b/src/views/designer/TableGraphPane/index.tsx
@@ -1,18 +1,13 @@
 import { ActionIcon, Box, Button, Center, Group, Kbd, LoadingOverlay, Modal, Paper, Popover, Stack, Text, Title } from "@mantine/core";
-import { mdiAdjust, mdiCog, mdiDownload, mdiHelpCircle, mdiPlus } from "@mdi/js";
+import { mdiAdjust, mdiCog, mdiDownload, mdiHelpCircle, mdiImageOutline, mdiPlus, mdiXml } from "@mdi/js";
 import { ElementRef, useEffect, useRef, useState } from "react";
 import { Icon } from "~/components/Icon";
 import { Panel } from "~/components/Panel";
 import { DesignerLayoutMode, DesignerNodeMode, TableDefinition } from "~/types";
-import { toBlob } from "html-to-image";
 import { ReactFlow, useEdgesState, useNodesState } from "reactflow";
-import { NODE_TYPES, buildTableGraph as buildTableDiagram } from "./helpers";
+import { NODE_TYPES, buildTableGraph as buildTableDiagram, createSnapshot } from "./helpers";
 import { useStable } from "~/hooks/stable";
-import { save } from "@tauri-apps/api/dialog";
-import { writeBinaryFile } from "@tauri-apps/api/fs";
-import { useLater } from "~/hooks/later";
 import { useIsLight } from "~/hooks/theme";
-import { showNotification } from "@mantine/notifications";
 import { useIsConnected } from "~/hooks/connection";
 import { TableCreator } from "~/components/TableCreator";
 import { ModalTitle } from "~/components/ModalTitle";
@@ -24,6 +19,8 @@ import { TableGrid } from "./grid";
 import { RadioSelect } from "~/components/RadioSelect";
 import { useToggleList } from "~/hooks/toggle";
 import { updateSession } from "~/stores/config";
+import { adapter } from "~/adapter";
+import { showNotification } from "@mantine/notifications";
 
 interface HelpTitleProps {
 	isLight: boolean;
@@ -51,6 +48,7 @@ export function TableGraphPane(props: TableGraphPaneProps) {
 	const [isRendering, setIsRendering] = useState(false);
 	const [isCreating, setIsCreating] = useState(false);
 	const [showConfig, setShowConfig] = useState(false);
+	const [showExporter, setShowExporter] = useState(false);
 	const [showHelp, setShowHelp] = useState(false);
 	const ref = useRef<ElementRef<"div">>(null);
 	const isOnline = useIsConnected();
@@ -72,43 +70,27 @@ export function TableGraphPane(props: TableGraphPaneProps) {
 		setEdges(edges);
 	}, [props.tables, props.active, nodeMode, expanded]);
 
-	const createSnapshot = useStable(async (filePath: string) => {
-		const contents = await toBlob(ref.current!, { cacheBust: true });
-
-		if (!contents) {
-			return;
-		}
-
-		await writeBinaryFile(filePath, await contents.arrayBuffer());
-
-		setIsRendering(false);
-
-		showNotification({
-			message: "Snapshot saved to disk",
+	const saveImage = useStable(async (type: 'png' | 'svg') => {
+		const isSuccess = await adapter.saveFile("Save snapshot", `snapshot.${type}`, [
+			{
+				name: "Image",
+				extensions: [type],
+			},
+		], async () => {
+			setIsRendering(true);
+
+			try {
+				return await createSnapshot(ref.current!, type);
+			} finally {
+				setIsRendering(false);
+			}
 		});
-	});
-
-	const scheduleSnapshot = useLater(createSnapshot);
-
-	// TODO Move download logic to adapter
-	const saveImage = useStable(async () => {
-		const filePath = await save({
-			title: "Save snapshot",
-			defaultPath: "snapshot.png",
-			filters: [
-				{
-					name: "Image",
-					extensions: ["png", "jpg", "jpeg"],
-				},
-			],
-		});
-
-		if (!filePath) {
-			return;
+
+		if (isSuccess) {
+			showNotification({
+				message: "Snapshot saved to disk"
+			});
 		}
-
-		setIsRendering(true);
-		scheduleSnapshot(filePath);
 	});
 
 	const openHelp = useStable(() => {
@@ -134,6 +116,10 @@ export function TableGraphPane(props: TableGraphPaneProps) {
 		setShowConfig(v => !v);
 	});
 
+	const toggleExporter = useStable(() => {
+		setShowExporter(v => !v);
+	});
+
 	const setNodeMode = useStable((mode: string) => {
 		store.dispatch(updateSession({
 			id: activeSession?.id,
@@ -157,6 +143,54 @@ export function TableGraphPane(props: TableGraphPaneProps) {
 					<ActionIcon title="Create table..." onClick={openCreator}>
 						<Icon color="light.4" path={mdiPlus} />
 					</ActionIcon>
+					<Popover
+						opened={showExporter}
+						onChange={setShowExporter}
+						position="bottom-end"
+						offset={{ crossAxis: -4, mainAxis: 8 }}
+						withArrow
+						withinPortal
+						shadow={`0 8px 25px rgba(0, 0, 0, ${isLight ? 0.2 : 0.75})`}
+					>
+						<Popover.Target>
+							<ActionIcon
+								title="Export Graph"
+								onClick={toggleExporter}
+							>
+								<Icon color="light.4" path={mdiDownload} />
+							</ActionIcon>
+						</Popover.Target>
+						<Popover.Dropdown onMouseLeave={toggleExporter} p="xs">
+							<Stack pb={4}>
+								<Button
+									color="surreal"
+									variant="subtle"
+									fullWidth
+									size="xs"
+									onClick={() => saveImage('png')}
+								>
+									Save as PNG
+									<Icon
+										right
+										path={mdiImageOutline}
+									/>
+								</Button>
+								<Button
+									color="surreal"
+									variant="subtle"
+									fullWidth
+									size="xs"
+									onClick={() => saveImage('svg')}
+								>
+									Save as SVG
+									<Icon
+										right
+										path={mdiXml}
+									/>
+								</Button>
+							</Stack>
+						</Popover.Dropdown>
+					</Popover>
 					<Popover
 						opened={showConfig}
 						onChange={setShowConfig}
@@ -192,19 +226,6 @@ export function TableGraphPane(props: TableGraphPaneProps) {
 									value={nodeMode}
 									onChange={setNodeMode}
 								/>
-
-								<Button
-									color="surreal"
-									fullWidth
-									size="xs"
-									onClick={saveImage}
-								>
-									Save snapshot
-									<Icon
-										right
-										path={mdiDownload}
-									/>
-								</Button>
 							</Stack>
 						</Popover.Dropdown>
 					</Popover>