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
This commit is contained in:
TrueDoctor
2021-05-28 20:43:51 +02:00
committed by Keavon Chambers
parent 805116b031
commit c0e60a21d3
16 changed files with 137 additions and 43 deletions
+16 -1
View File
@@ -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;
+12
View File
@@ -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 {};