Standardize FrontendMessage message names

2026-09-16 23:08:05 +08:00 · 2022-01-12 14:16:13 -08:00
parent 4d9fcd0b77
commit cf66f387d5
17 changed files with 154 additions and 152 deletions
--- a/frontend/src/components/panels/Document.vue
+++ b/frontend/src/components/panels/Document.vue
@@ -251,7 +251,17 @@
 <script lang="ts">
 import { defineComponent } from "vue";

-import { UpdateArtwork, UpdateOverlays, UpdateScrollbars, UpdateRulers, SetActiveTool, SetCanvasZoom, SetCanvasRotation, ToolName, UpdateArtboards } from "@/dispatcher/js-messages";
+import {
+	UpdateDocumentArtwork,
+	UpdateDocumentOverlays,
+	UpdateDocumentScrollbars,
+	UpdateDocumentRulers,
+	UpdateActiveTool,
+	UpdateCanvasZoom,
+	UpdateCanvasRotation,
+	ToolName,
+	UpdateDocumentArtboards,
+} from "@/dispatcher/js-messages";

 import LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
@@ -330,41 +340,41 @@ export default defineComponent({
 		},
 	},
 	mounted() {
-		this.editor.dispatcher.subscribeJsMessage(UpdateArtwork, (UpdateArtwork) => {
-			this.artworkSvg = UpdateArtwork.svg;
+		this.editor.dispatcher.subscribeJsMessage(UpdateDocumentArtwork, (UpdateDocumentArtwork) => {
+			this.artworkSvg = UpdateDocumentArtwork.svg;
 		});

-		this.editor.dispatcher.subscribeJsMessage(UpdateOverlays, (updateOverlays) => {
-			this.overlaysSvg = updateOverlays.svg;
+		this.editor.dispatcher.subscribeJsMessage(UpdateDocumentOverlays, (updateDocumentOverlays) => {
+			this.overlaysSvg = updateDocumentOverlays.svg;
 		});

-		this.editor.dispatcher.subscribeJsMessage(UpdateArtboards, (updateArtboards) => {
-			this.artboardSvg = updateArtboards.svg;
+		this.editor.dispatcher.subscribeJsMessage(UpdateDocumentArtboards, (updateDocumentArtboards) => {
+			this.artboardSvg = updateDocumentArtboards.svg;
 		});

-		this.editor.dispatcher.subscribeJsMessage(UpdateScrollbars, (updateScrollbars) => {
-			this.scrollbarPos = updateScrollbars.position;
-			this.scrollbarSize = updateScrollbars.size;
-			this.scrollbarMultiplier = updateScrollbars.multiplier;
+		this.editor.dispatcher.subscribeJsMessage(UpdateDocumentScrollbars, (updateDocumentScrollbars) => {
+			this.scrollbarPos = updateDocumentScrollbars.position;
+			this.scrollbarSize = updateDocumentScrollbars.size;
+			this.scrollbarMultiplier = updateDocumentScrollbars.multiplier;
 		});

-		this.editor.dispatcher.subscribeJsMessage(UpdateRulers, (updateRulers) => {
-			this.rulerOrigin = updateRulers.origin;
-			this.rulerSpacing = updateRulers.spacing;
-			this.rulerInterval = updateRulers.interval;
+		this.editor.dispatcher.subscribeJsMessage(UpdateDocumentRulers, (updateDocumentRulers) => {
+			this.rulerOrigin = updateDocumentRulers.origin;
+			this.rulerSpacing = updateDocumentRulers.spacing;
+			this.rulerInterval = updateDocumentRulers.interval;
 		});

-		this.editor.dispatcher.subscribeJsMessage(SetActiveTool, (setActiveTool) => {
-			this.activeTool = setActiveTool.tool_name;
-			this.activeToolOptions = setActiveTool.tool_options;
+		this.editor.dispatcher.subscribeJsMessage(UpdateActiveTool, (updateActiveTool) => {
+			this.activeTool = updateActiveTool.tool_name;
+			this.activeToolOptions = updateActiveTool.tool_options;
 		});

-		this.editor.dispatcher.subscribeJsMessage(SetCanvasZoom, (setCanvasZoom) => {
-			this.documentZoom = setCanvasZoom.new_zoom * 100;
+		this.editor.dispatcher.subscribeJsMessage(UpdateCanvasZoom, (updateCanvasZoom) => {
+			this.documentZoom = updateCanvasZoom.factor * 100;
 		});

-		this.editor.dispatcher.subscribeJsMessage(SetCanvasRotation, (setCanvasRotation) => {
-			const newRotation = setCanvasRotation.new_radians * (180 / Math.PI);
+		this.editor.dispatcher.subscribeJsMessage(UpdateCanvasRotation, (updateCanvasRotation) => {
+			const newRotation = updateCanvasRotation.angle_radians * (180 / Math.PI);
 			this.documentRotation = (360 + (newRotation % 360)) % 360;
 		});

--- a/frontend/src/components/panels/LayerTree.vue
+++ b/frontend/src/components/panels/LayerTree.vue
@@ -242,7 +242,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";

-import { BlendMode, DisplayFolderTreeStructure, UpdateLayer, LayerPanelEntry } from "@/dispatcher/js-messages";
+import { BlendMode, DisplayDocumentLayerTreeStructure, UpdateDocumentLayer, LayerPanelEntry } from "@/dispatcher/js-messages";

 import LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
@@ -498,11 +498,11 @@ export default defineComponent({
 		},
 	},
 	mounted() {
-		this.editor.dispatcher.subscribeJsMessage(DisplayFolderTreeStructure, (displayFolderTreeStructure) => {
+		this.editor.dispatcher.subscribeJsMessage(DisplayDocumentLayerTreeStructure, (displayDocumentLayerTreeStructure) => {
 			const path = [] as bigint[];
 			this.layers = [] as { folderIndex: number; entry: LayerPanelEntry }[];

-			const recurse = (folder: DisplayFolderTreeStructure, layers: { folderIndex: number; entry: LayerPanelEntry }[], cache: Map<string, LayerPanelEntry>): void => {
+			const recurse = (folder: DisplayDocumentLayerTreeStructure, layers: { folderIndex: number; entry: LayerPanelEntry }[], cache: Map<string, LayerPanelEntry>): void => {
 				folder.children.forEach((item, index) => {
 					// TODO: fix toString
 					path.push(BigInt(item.layerId.toString()));
@@ -513,12 +513,12 @@ export default defineComponent({
 				});
 			};

-			recurse(displayFolderTreeStructure, this.layers, this.layerCache);
+			recurse(displayDocumentLayerTreeStructure, this.layers, this.layerCache);
 		});

-		this.editor.dispatcher.subscribeJsMessage(UpdateLayer, (updateLayer) => {
-			const targetPath = updateLayer.data.path;
-			const targetLayer = updateLayer.data;
+		this.editor.dispatcher.subscribeJsMessage(UpdateDocumentLayer, (updateDocumentLayer) => {
+			const targetPath = updateDocumentLayer.data.path;
+			const targetLayer = updateDocumentLayer.data;

 			const layer = this.layerCache.get(targetPath.toString());
 			if (layer) {
--- a/frontend/src/dispatcher/js-messages.ts
+++ b/frontend/src/dispatcher/js-messages.ts
@@ -135,23 +135,23 @@ export type ToolName =
 	| "Ellipse"
 	| "Shape";

-export class SetActiveTool extends JsMessage {
+export class UpdateActiveTool extends JsMessage {
 	readonly tool_name!: ToolName;

 	readonly tool_options!: object;
 }

-export class SetActiveDocument extends JsMessage {
+export class UpdateActiveDocument extends JsMessage {
 	readonly document_id!: BigInt;
 }

-export class DisplayError extends JsMessage {
+export class DisplayDialogError extends JsMessage {
 	readonly title!: string;

 	readonly description!: string;
 }

-export class DisplayPanic extends JsMessage {
+export class DisplayDialogPanic extends JsMessage {
 	readonly panic_info!: string;

 	readonly title!: string;
@@ -165,23 +165,23 @@ export class DisplayConfirmationToCloseDocument extends JsMessage {

 export class DisplayConfirmationToCloseAllDocuments extends JsMessage {}

-export class DisplayAboutGraphiteDialog extends JsMessage {}
+export class DisplayDialogAboutGraphite extends JsMessage {}

-export class UpdateArtwork extends JsMessage {
+export class UpdateDocumentArtwork extends JsMessage {
 	readonly svg!: string;
 }

-export class UpdateOverlays extends JsMessage {
+export class UpdateDocumentOverlays extends JsMessage {
 	readonly svg!: string;
 }

-export class UpdateArtboards extends JsMessage {
+export class UpdateDocumentArtboards extends JsMessage {
 	readonly svg!: string;
 }

 const TupleToVec2 = Transform(({ value }) => ({ x: value[0], y: value[1] }));

-export class UpdateScrollbars extends JsMessage {
+export class UpdateDocumentScrollbars extends JsMessage {
 	@TupleToVec2
 	readonly position!: { x: number; y: number };

@@ -192,7 +192,7 @@ export class UpdateScrollbars extends JsMessage {
 	readonly multiplier!: { x: number; y: number };
 }

-export class UpdateRulers extends JsMessage {
+export class UpdateDocumentRulers extends JsMessage {
 	@TupleToVec2
 	readonly origin!: { x: number; y: number };

@@ -201,24 +201,18 @@ export class UpdateRulers extends JsMessage {
 	readonly interval!: number;
 }

-export class ExportDocument extends JsMessage {
+export class TriggerFileDownload extends JsMessage {
 	readonly document!: string;

 	readonly name!: string;
 }

-export class SaveDocument extends JsMessage {
-	readonly document!: string;
-
-	readonly name!: string;
-}
-
-export class OpenDocumentBrowse extends JsMessage {}
+export class TriggerFileUpload extends JsMessage {}

 export class DocumentChanged extends JsMessage {}

-export class DisplayFolderTreeStructure extends JsMessage {
-	constructor(readonly layerId: BigInt, readonly children: DisplayFolderTreeStructure[]) {
+export class DisplayDocumentLayerTreeStructure extends JsMessage {
+	constructor(readonly layerId: BigInt, readonly children: DisplayDocumentLayerTreeStructure[]) {
 		super();
 	}
 }
@@ -228,7 +222,7 @@ interface DataBuffer {
 	length: BigInt;
 }

-export function newDisplayFolderTreeStructure(input: { data_buffer: DataBuffer }, wasm: WasmInstance): DisplayFolderTreeStructure {
+export function newDisplayDocumentLayerTreeStructure(input: { data_buffer: DataBuffer }, wasm: WasmInstance): DisplayDocumentLayerTreeStructure {
 	const { pointer, length } = input.data_buffer;
 	const pointerNum = Number(pointer);
 	const lengthNum = Number(length);
@@ -245,7 +239,7 @@ export function newDisplayFolderTreeStructure(input: { data_buffer: DataBuffer }
 	const layerIdsSection = new DataView(wasmMemoryBuffer, pointerNum + 8 + structureSectionLength * 8);

 	let layersEncountered = 0;
-	let currentFolder = new DisplayFolderTreeStructure(BigInt(-1), []);
+	let currentFolder = new DisplayDocumentLayerTreeStructure(BigInt(-1), []);
 	const currentFolderStack = [currentFolder];

 	for (let i = 0; i < structureSectionLength; i += 1) {
@@ -260,7 +254,7 @@ export function newDisplayFolderTreeStructure(input: { data_buffer: DataBuffer }
 			const layerId = layerIdsSection.getBigUint64(layersEncountered * 8, true);
 			layersEncountered += 1;

-			const childLayer = new DisplayFolderTreeStructure(layerId, []);
+			const childLayer = new DisplayDocumentLayerTreeStructure(layerId, []);
 			currentFolder.children.push(childLayer);
 		}

@@ -282,17 +276,17 @@ export function newDisplayFolderTreeStructure(input: { data_buffer: DataBuffer }
 	return currentFolder;
 }

-export class UpdateLayer extends JsMessage {
+export class UpdateDocumentLayer extends JsMessage {
 	@Type(() => LayerPanelEntry)
 	readonly data!: LayerPanelEntry;
 }

-export class SetCanvasZoom extends JsMessage {
-	readonly new_zoom!: number;
+export class UpdateCanvasZoom extends JsMessage {
+	readonly factor!: number;
 }

-export class SetCanvasRotation extends JsMessage {
-	readonly new_radians!: number;
+export class UpdateCanvasRotation extends JsMessage {
+	readonly angle_radians!: number;
 }

 export type BlendMode =
@@ -348,7 +342,7 @@ export class IndexedDbDocumentDetails extends DocumentDetails {
 	id!: string;
 }

-export class AutoSaveDocument extends JsMessage {
+export class TriggerIndexedDbWriteDocument extends JsMessage {
 	document!: string;

 	@Type(() => IndexedDbDocumentDetails)
@@ -357,7 +351,7 @@ export class AutoSaveDocument extends JsMessage {
 	version!: string;
 }

-export class RemoveAutoSaveDocument extends JsMessage {
+export class TriggerIndexedDbRemoveDocument extends JsMessage {
 	// Use a string since IndexedDB can not use BigInts for keys
 	@Transform(({ value }: { value: BigInt }) => value.toString())
 	document_id!: string;
@@ -369,29 +363,28 @@ type JSMessageFactory = (data: any, wasm: WasmInstance, instance: RustEditorInst
 type MessageMaker = typeof JsMessage | JSMessageFactory;

 export const messageConstructors: Record<string, MessageMaker> = {
-	UpdateArtwork,
-	UpdateOverlays,
-	UpdateScrollbars,
-	UpdateRulers,
-	ExportDocument,
-	SaveDocument,
-	OpenDocumentBrowse,
-	DisplayFolderTreeStructure: newDisplayFolderTreeStructure,
-	UpdateLayer,
-	SetActiveTool,
-	SetActiveDocument,
+	UpdateDocumentArtwork,
+	UpdateDocumentOverlays,
+	UpdateDocumentScrollbars,
+	UpdateDocumentRulers,
+	TriggerFileDownload,
+	TriggerFileUpload,
+	DisplayDocumentLayerTreeStructure: newDisplayDocumentLayerTreeStructure,
+	UpdateDocumentLayer,
+	UpdateActiveTool,
+	UpdateActiveDocument,
 	UpdateOpenDocumentsList,
 	UpdateInputHints,
 	UpdateWorkingColors,
-	SetCanvasZoom,
-	SetCanvasRotation,
-	DisplayError,
-	DisplayPanic,
+	UpdateCanvasZoom,
+	UpdateCanvasRotation,
+	DisplayDialogError,
+	DisplayDialogPanic,
 	DisplayConfirmationToCloseDocument,
 	DisplayConfirmationToCloseAllDocuments,
-	DisplayAboutGraphiteDialog,
-	AutoSaveDocument,
-	RemoveAutoSaveDocument,
-	UpdateArtboards,
+	DisplayDialogAboutGraphite,
+	TriggerIndexedDbWriteDocument,
+	TriggerIndexedDbRemoveDocument,
+	UpdateDocumentArtboards,
 } as const;
 export type JsMessageType = keyof typeof messageConstructors;
--- a/frontend/src/lifetime/auto-save.ts
+++ b/frontend/src/lifetime/auto-save.ts
@@ -1,4 +1,4 @@
-import { AutoSaveDocument, RemoveAutoSaveDocument } from "@/dispatcher/js-messages";
+import { TriggerIndexedDbWriteDocument, TriggerIndexedDbRemoveDocument } from "@/dispatcher/js-messages";
 import { DocumentsState } from "@/state/documents";
 import { EditorState, getWasmInstance } from "@/state/wasm-loader";

@@ -39,13 +39,15 @@ export function createAutoSaveManager(editor: EditorState, documents: DocumentsS

 		return new Promise((resolve) => {
 			request.onsuccess = (): void => {
-				const previouslySavedDocuments: AutoSaveDocument[] = request.result;
+				const previouslySavedDocuments: TriggerIndexedDbWriteDocument[] = request.result;

 				const documentOrder: string[] = JSON.parse(window.localStorage.getItem(GRAPHITE_AUTO_SAVE_ORDER_KEY) || "[]");
-				const orderedSavedDocuments = documentOrder.map((id) => previouslySavedDocuments.find((autoSave) => autoSave.details.id === id)).filter((x) => x !== undefined) as AutoSaveDocument[];
+				const orderedSavedDocuments = documentOrder
+					.map((id) => previouslySavedDocuments.find((autoSave) => autoSave.details.id === id))
+					.filter((x) => x !== undefined) as TriggerIndexedDbWriteDocument[];

 				const currentDocumentVersion = getWasmInstance().graphite_version();
-				orderedSavedDocuments.forEach((doc: AutoSaveDocument) => {
+				orderedSavedDocuments.forEach((doc: TriggerIndexedDbWriteDocument) => {
 					if (doc.version === currentDocumentVersion) {
 						editor.instance.open_auto_saved_document(BigInt(doc.details.id), doc.details.name, doc.details.is_saved, doc.document);
 					} else {
@@ -70,14 +72,14 @@ export function createAutoSaveManager(editor: EditorState, documents: DocumentsS
 		storeDocumentOrder();
 	};

-	editor.dispatcher.subscribeJsMessage(AutoSaveDocument, async (autoSaveDocument) => {
+	editor.dispatcher.subscribeJsMessage(TriggerIndexedDbWriteDocument, async (autoSaveDocument) => {
 		const db = await databaseConnection;
 		const transaction = db.transaction(GRAPHITE_AUTO_SAVE_STORE, "readwrite");
 		transaction.objectStore(GRAPHITE_AUTO_SAVE_STORE).put(autoSaveDocument);
 		storeDocumentOrder();
 	});

-	editor.dispatcher.subscribeJsMessage(RemoveAutoSaveDocument, async (removeAutoSaveDocument) => {
+	editor.dispatcher.subscribeJsMessage(TriggerIndexedDbRemoveDocument, async (removeAutoSaveDocument) => {
 		removeDocument(removeAutoSaveDocument.document_id);
 	});

--- a/frontend/src/lifetime/errors.ts
+++ b/frontend/src/lifetime/errors.ts
@@ -1,4 +1,4 @@
-import { DisplayError, DisplayPanic } from "@/dispatcher/js-messages";
+import { DisplayDialogError, DisplayDialogPanic } from "@/dispatcher/js-messages";
 import { DialogState } from "@/state/dialog";
 import { EditorState } from "@/state/wasm-loader";
 import { stripIndents } from "@/utilities/strip-indents";
@@ -6,7 +6,7 @@ import { TextButtonWidget } from "@/utilities/widgets";

 export function initErrorHandling(editor: EditorState, dialogState: DialogState): void {
 	// Graphite error dialog
-	editor.dispatcher.subscribeJsMessage(DisplayError, (displayError) => {
+	editor.dispatcher.subscribeJsMessage(DisplayDialogError, (displayDialogError) => {
 		const okButton: TextButtonWidget = {
 			kind: "TextButton",
 			callback: async () => dialogState.dismissDialog(),
@@ -14,16 +14,16 @@ export function initErrorHandling(editor: EditorState, dialogState: DialogState)
 		};
 		const buttons = [okButton];

-		dialogState.createDialog("Warning", displayError.title, displayError.description, buttons);
+		dialogState.createDialog("Warning", displayDialogError.title, displayDialogError.description, buttons);
 	});

 	// Code panic dialog and console error
-	editor.dispatcher.subscribeJsMessage(DisplayPanic, (displayPanic) => {
+	editor.dispatcher.subscribeJsMessage(DisplayDialogPanic, (displayDialogPanic) => {
 		// `Error.stackTraceLimit` is only available in V8/Chromium
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		(Error as any).stackTraceLimit = Infinity;
 		const stackTrace = new Error().stack || "";
-		const panicDetails = `${displayPanic.panic_info}\n\n${stackTrace}`;
+		const panicDetails = `${displayDialogPanic.panic_info}\n\n${stackTrace}`;

 		// eslint-disable-next-line no-console
 		console.error(panicDetails);
@@ -45,7 +45,7 @@ export function initErrorHandling(editor: EditorState, dialogState: DialogState)
 		};
 		const buttons = [reloadButton, copyErrorLogButton, reportOnGithubButton];

-		dialogState.createDialog("Warning", displayPanic.title, displayPanic.description, buttons);
+		dialogState.createDialog("Warning", displayDialogPanic.title, displayDialogPanic.description, buttons);
 	});
 }

--- a/frontend/src/state/dialog.ts
+++ b/frontend/src/state/dialog.ts
@@ -1,6 +1,6 @@
 import { reactive, readonly } from "vue";

-import { DisplayAboutGraphiteDialog } from "@/dispatcher/js-messages";
+import { DisplayDialogAboutGraphite } from "@/dispatcher/js-messages";
 import { EditorState } from "@/state/wasm-loader";
 import { IconName } from "@/utilities/icons";
 import { stripIndents } from "@/utilities/strip-indents";
@@ -106,7 +106,7 @@ export function createDialogState(editor: EditorState) {
 	};

 	// Run on creation
-	editor.dispatcher.subscribeJsMessage(DisplayAboutGraphiteDialog, () => onAboutHandler());
+	editor.dispatcher.subscribeJsMessage(DisplayDialogAboutGraphite, () => onAboutHandler());

 	return {
 		state: readonly(state),
--- a/frontend/src/state/documents.ts
+++ b/frontend/src/state/documents.ts
@@ -4,11 +4,10 @@ import { reactive, readonly } from "vue";
 import {
 	DisplayConfirmationToCloseAllDocuments,
 	DisplayConfirmationToCloseDocument,
-	ExportDocument,
+	TriggerFileDownload,
 	FrontendDocumentDetails,
-	OpenDocumentBrowse,
-	SaveDocument,
-	SetActiveDocument,
+	TriggerFileUpload,
+	UpdateActiveDocument,
 	UpdateOpenDocumentsList,
 } from "@/dispatcher/js-messages";
 import { DialogState } from "@/state/dialog";
@@ -81,9 +80,9 @@ export function createDocumentsState(editor: EditorState, dialogState: DialogSta
 		state.documents = updateOpenDocumentList.open_documents;
 	});

-	editor.dispatcher.subscribeJsMessage(SetActiveDocument, (setActiveDocument) => {
+	editor.dispatcher.subscribeJsMessage(UpdateActiveDocument, (updateActiveDocument) => {
 		// Assume we receive a correct document id
-		const activeId = state.documents.findIndex((doc) => doc.id === setActiveDocument.document_id);
+		const activeId = state.documents.findIndex((doc) => doc.id === updateActiveDocument.document_id);
 		state.activeDocumentIndex = activeId;
 	});

@@ -95,18 +94,14 @@ export function createDocumentsState(editor: EditorState, dialogState: DialogSta
 		closeAllDocumentsWithConfirmation();
 	});

-	editor.dispatcher.subscribeJsMessage(OpenDocumentBrowse, async () => {
+	editor.dispatcher.subscribeJsMessage(TriggerFileUpload, async () => {
 		const extension = editor.rawWasm.file_save_suffix();
 		const data = await upload(extension);
 		editor.instance.open_document_file(data.filename, data.content);
 	});

-	editor.dispatcher.subscribeJsMessage(ExportDocument, (exportDocument) => {
-		download(exportDocument.name, exportDocument.document);
-	});
-
-	editor.dispatcher.subscribeJsMessage(SaveDocument, (saveDocument) => {
-		download(saveDocument.name, saveDocument.document);
+	editor.dispatcher.subscribeJsMessage(TriggerFileDownload, (triggerFileDownload) => {
+		download(triggerFileDownload.name, triggerFileDownload.document);
 	});

 	// Get the initial documents