Export current document as SVG when pressing Ctrl+Shift+S (#160)

* Export current document when pressing Ctrl+Shift+S

* Use a blob for download

* Add Ctrl + E shortcut, match on lower case

* Don't mount element in DOM

* Polish some keybindings

* Add initialization for MappingEntries

* Implement svg coloring

* Add newline after svg tag

* Add spaces to svg style format

* Fix more svg formatting

* Add space before />

* Remove duplicate whitespace

client/web/src/components/panels/Document.vue

@@ -166,7 +166,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { ResponseType, registerResponseHandler, Response, UpdateCanvas, SetActiveTool } from "../../response-handler";
+import { ResponseType, registerResponseHandler, Response, UpdateCanvas, SetActiveTool, ExportDocument } from "../../response-handler";
 import LayoutRow from "../layout/LayoutRow.vue";
 import LayoutCol from "../layout/LayoutCol.vue";
 import WorkingColors from "../widgets/WorkingColors.vue";
@@ -223,12 +223,27 @@ export default defineComponent({
 			}
 			todo(toolIndex);
 		},
+		download(filename: string, svgData: string) {
+			const svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
+			const svgUrl = URL.createObjectURL(svgBlob);
+			const element = document.createElement("a");
+
+			element.href = svgUrl;
+			element.setAttribute("download", filename);
+			element.style.display = "none";
+
+			element.click();
+		},
 	},
 	mounted() {
 		registerResponseHandler(ResponseType.UpdateCanvas, (responseData: Response) => {
 			const updateData = responseData as UpdateCanvas;
 			if (updateData) this.viewportSvg = updateData.document;
 		});
+		registerResponseHandler(ResponseType.ExportDocument, (responseData: Response) => {
+			const updateData = responseData as ExportDocument;
+			if (updateData) this.download("canvas.svg", updateData.document);
+		});
 		registerResponseHandler(ResponseType.SetActiveTool, (responseData: Response) => {
 			const toolData = responseData as SetActiveTool;
 			if (toolData) this.activeTool = toolData.tool_name;

client/web/src/response-handler.ts

@@ -12,6 +12,7 @@ declare global {
 
 export enum ResponseType {
 	UpdateCanvas = "UpdateCanvas",
+	ExportDocument = "ExportDocument",
 	ExpandFolder = "ExpandFolder",
 	CollapseFolder = "CollapseFolder",
 	SetActiveTool = "SetActiveTool",
@@ -52,6 +53,8 @@ function parseResponse(responseType: string, data: any): Response {
 			return newSetActiveTool(data.SetActiveTool);
 		case "UpdateCanvas":
 			return newUpdateCanvas(data.UpdateCanvas);
+		case "ExportDocument":
+			return newExportDocument(data.ExportDocument);
 		default:
 			throw new Error(`Unrecognized origin/responseType pair: ${origin}, ${responseType}`);
 	}
@@ -77,6 +80,15 @@ function newUpdateCanvas(input: any): UpdateCanvas {
 	};
 }
 
+export interface ExportDocument {
+	document: string;
+}
+function newExportDocument(input: any): UpdateCanvas {
+	return {
+		document: input.document,
+	};
+}
+
 export type DocumentChanged = {};
 function newDocumentChanged(_: any): DocumentChanged {
 	return {};

client/web/wasm/src/wrappers.rs

@@ -77,16 +77,33 @@ pub fn translate_append_mode(name: &str) -> Option<SelectAppendMode> {
 pub fn translate_key(name: &str) -> Key {
 	log::trace!("pressed key: {}", name);
 	use Key::*;
-	match name {
+	match name.to_lowercase().as_str() {
+		"a" => KeyA,
+		"b" => KeyB,
+		"c" => KeyC,
+		"d" => KeyD,
 		"e" => KeyE,
-		"v" => KeyV,
+		"f" => KeyF,
+		"g" => KeyG,
+		"h" => KeyH,
+		"i" => KeyI,
+		"j" => KeyJ,
+		"k" => KeyK,
 		"l" => KeyL,
-		"p" => KeyP,
-		"r" => KeyR,
 		"m" => KeyM,
+		"n" => KeyN,
+		"o" => KeyO,
+		"p" => KeyP,
+		"q" => KeyQ,
+		"r" => KeyR,
+		"s" => KeyS,
+		"t" => KeyT,
+		"u" => KeyU,
+		"v" => KeyV,
+		"w" => KeyW,
 		"x" => KeyX,
-		"z" => KeyZ,
 		"y" => KeyY,
+		"z" => KeyZ,
 		"0" => Key0,
 		"1" => Key1,
 		"2" => Key2,
@@ -97,12 +114,13 @@ pub fn translate_key(name: &str) -> Key {
 		"7" => Key7,
 		"8" => Key8,
 		"9" => Key9,
-		"Enter" => KeyEnter,
-		"Shift" => KeyShift,
-		"CapsLock" => KeyCaps,
-		"Control" => KeyControl,
-		"Alt" => KeyAlt,
-		"Escape" => KeyEscape,
+		"enter" => KeyEnter,
+		"shift" => KeyShift,
+		// When using linux + chrome + the neo keyboard layout, the shift key is recognized as caps
+		"capslock" => KeyShift,
+		"control" => KeyControl,
+		"alt" => KeyAlt,
+		"escape" => KeyEscape,
 		_ => UnknownKey,
 	}
 }