Change responses to use classes instead of interfaces

frontend/package.json

@@ -17,6 +17,8 @@
 	"license": "Apache-2.0",
 	"homepage": "https://www.graphite.design",
 	"dependencies": {
+		"class-transformer": "^0.5.0",
+		"reflect-metadata": "^0.1.13",
 		"vue": "^3.2.23"
 	},
 	"devDependencies": {
@@ -40,7 +42,9 @@
 		"sass-loader": "^10.0.0",
 		"typescript": "^4.5.2",
 		"vue-loader": "^16.8.3",
-		"vue-template-compiler": "^2.6.14",
+		"vue-template-compiler": "^2.6.14"
+	},
+	"optionalDependencies": {
 		"wasm-pack": "^0.10.1"
 	}
 }

frontend/src/components/panels/Document.vue

@@ -224,7 +224,8 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import { ResponseType, registerResponseHandler, Response, UpdateCanvas, UpdateScrollbars, UpdateRulers, SetActiveTool, SetCanvasZoom, SetCanvasRotation } from "@/utilities/response-handler";
+import { registerJsMessageHandler } from "@/utilities/js-message-dispatcher";
+import { UpdateCanvas, UpdateScrollbars, UpdateRulers, SetActiveTool, SetCanvasZoom, SetCanvasRotation } from "@/utilities/js-messages";
 import { SeparatorDirection, SeparatorType } from "@/components/widgets/widgets";
 import { comingSoon } from "@/utilities/errors";
 import { panicProxy } from "@/utilities/panic-proxy";
@@ -318,46 +319,40 @@ export default defineComponent({
 		},
 	},
 	mounted() {
-		registerResponseHandler(ResponseType.UpdateCanvas, (responseData: Response) => {
-			const updateData = responseData as UpdateCanvas;
+		registerJsMessageHandler(UpdateCanvas, (updateData) => {
 			if (updateData) this.viewportSvg = updateData.document;
 		});
 
-		registerResponseHandler(ResponseType.UpdateScrollbars, (responseData: Response) => {
-			const updateData = responseData as UpdateScrollbars;
+		registerJsMessageHandler(UpdateScrollbars, (updateData) => {
 			if (updateData) {
 				this.scrollbarPos = updateData.position;
 				this.scrollbarSize = updateData.size;
 				this.scrollbarMultiplier = updateData.multiplier;
 			}
 		});
 
-		registerResponseHandler(ResponseType.UpdateRulers, (responseData: Response) => {
-			const updateData = responseData as UpdateRulers;
+		registerJsMessageHandler(UpdateRulers, (updateData) => {
 			if (updateData) {
 				this.rulerOrigin = updateData.origin;
 				this.rulerSpacing = updateData.spacing;
 				this.rulerInterval = updateData.interval;
 			}
 		});
 
-		registerResponseHandler(ResponseType.SetActiveTool, (responseData: Response) => {
-			const toolData = responseData as SetActiveTool;
+		registerJsMessageHandler(SetActiveTool, (toolData) => {
 			if (toolData) {
 				this.activeTool = toolData.tool_name;
 				this.activeToolOptions = toolData.tool_options;
 			}
 		});
 
-		registerResponseHandler(ResponseType.SetCanvasZoom, (responseData: Response) => {
-			const updateData = responseData as SetCanvasZoom;
+		registerJsMessageHandler(SetCanvasZoom, (updateData) => {
 			if (updateData) {
 				this.documentZoom = updateData.new_zoom * 100;
 			}
 		});
 
-		registerResponseHandler(ResponseType.SetCanvasRotation, (responseData: Response) => {
-			const updateData = responseData as SetCanvasRotation;
+		registerJsMessageHandler(SetCanvasRotation, (updateData) => {
 			if (updateData) {
 				const newRotation = updateData.new_radians * (180 / Math.PI);
 				this.documentRotation = (360 + (newRotation % 360)) % 360;

frontend/src/components/panels/LayerTree.vue

@@ -26,7 +26,7 @@
 						/>
 					</div>
 					<button
-						v-if="layer.layer_type === LayerType.Folder"
+						v-if="layer.layer_type === LayerTypeOptions.Folder"
 						class="node-connector"
 						:class="{ expanded: layer.layer_data.expanded }"
 						@click.stop="handleNodeConnectorClick(layer.path)"
@@ -43,7 +43,7 @@
 					>
 						<div class="layer-thumbnail" v-html="layer.thumbnail"></div>
 						<div class="layer-type-icon">
-							<IconLabel v-if="layer.layer_type === LayerType.Folder" :icon="'NodeTypeFolder'" title="Folder" />
+							<IconLabel v-if="layer.layer_type === LayerTypeOptions.Folder" :icon="'NodeTypeFolder'" title="Folder" />
 							<IconLabel v-else :icon="'NodeTypePath'" title="Path" />
 						</div>
 						<div class="layer-name">
@@ -181,7 +181,8 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import { ResponseType, registerResponseHandler, Response, BlendMode, DisplayFolderTreeStructure, UpdateLayer, LayerPanelEntry, LayerType } from "@/utilities/response-handler";
+import { registerJsMessageHandler } from "@/utilities/js-message-dispatcher";
+import { BlendMode, DisplayFolderTreeStructure, UpdateLayer, LayerPanelEntry, LayerTypeOptions } from "@/utilities/js-messages";
 import { panicProxy } from "@/utilities/panic-proxy";
 import { SeparatorType } from "@/components/widgets/widgets";
 
@@ -198,42 +199,42 @@ import { SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/M
 
 const wasm = import("@/../wasm/pkg").then(panicProxy);
 
-const blendModeEntries: SectionsOfMenuListEntries = [
-	[{ label: "Normal", value: BlendMode.Normal }],
+const blendModeEntries: SectionsOfMenuListEntries<BlendMode> = [
+	[{ label: "Normal", value: "normal" }],
 	[
-		{ label: "Multiply", value: BlendMode.Multiply },
-		{ label: "Darken", value: BlendMode.Darken },
-		{ label: "Color Burn", value: BlendMode.ColorBurn },
+		{ label: "Multiply", value: "multiply" },
+		{ label: "Darken", value: "darken" },
+		{ label: "Color Burn", value: "color-burn" },
 		// { label: "Linear Burn", value: "" }, // Not supported by SVG
 		// { label: "Darker Color", value: "" }, // Not supported by SVG
 	],
 	[
-		{ label: "Screen", value: BlendMode.Screen },
-		{ label: "Lighten", value: BlendMode.Lighten },
-		{ label: "Color Dodge", value: BlendMode.ColorDodge },
+		{ label: "Screen", value: "screen" },
+		{ label: "Lighten", value: "lighten" },
+		{ label: "Color Dodge", value: "color-dodge" },
 		// { label: "Linear Dodge (Add)", value: "" }, // Not supported by SVG
 		// { label: "Lighter Color", value: "" }, // Not supported by SVG
 	],
 	[
-		{ label: "Overlay", value: BlendMode.Overlay },
-		{ label: "Soft Light", value: BlendMode.SoftLight },
-		{ label: "Hard Light", value: BlendMode.HardLight },
+		{ label: "Overlay", value: "overlay" },
+		{ label: "Soft Light", value: "soft-light" },
+		{ label: "Hard Light", value: "hard-light" },
 		// { label: "Vivid Light", value: "" }, // Not supported by SVG
 		// { label: "Linear Light", value: "" }, // Not supported by SVG
 		// { label: "Pin Light", value: "" }, // Not supported by SVG
 		// { label: "Hard Mix", value: "" }, // Not supported by SVG
 	],
 	[
-		{ label: "Difference", value: BlendMode.Difference },
-		{ label: "Exclusion", value: BlendMode.Exclusion },
+		{ label: "Difference", value: "difference" },
+		{ label: "Exclusion", value: "exclusion" },
 		// { label: "Subtract", value: "" }, // Not supported by SVG
 		// { label: "Divide", value: "" }, // Not supported by SVG
 	],
 	[
-		{ label: "Hue", value: BlendMode.Hue },
-		{ label: "Saturation", value: BlendMode.Saturation },
-		{ label: "Color", value: BlendMode.Color },
-		{ label: "Luminosity", value: BlendMode.Luminosity },
+		{ label: "Hue", value: "hue" },
+		{ label: "Saturation", value: "saturation" },
+		{ label: "Color", value: "color" },
+		{ label: "Luminosity", value: "luminosity" },
 	],
 ];
 
@@ -246,14 +247,14 @@ export default defineComponent({
 			opacityNumberInputDisabled: true,
 			// TODO: replace with BigUint64Array as index
 			layerCache: new Map() as Map<string, LayerPanelEntry>,
-			layers: [] as Array<LayerPanelEntry>,
-			layerDepths: [] as Array<number>,
+			layers: [] as LayerPanelEntry[],
+			layerDepths: [] as number[],
 			selectionRangeStartLayer: undefined as undefined | LayerPanelEntry,
 			selectionRangeEndLayer: undefined as undefined | LayerPanelEntry,
 			opacity: 100,
 			MenuDirection,
 			SeparatorType,
-			LayerType,
+			LayerTypeOptions,
 		};
 	},
 	methods: {
@@ -390,13 +391,12 @@ export default defineComponent({
 		},
 	},
 	mounted() {
-		registerResponseHandler(ResponseType.DisplayFolderTreeStructure, (responseData: Response) => {
-			const expandData = responseData as DisplayFolderTreeStructure;
+		registerJsMessageHandler(DisplayFolderTreeStructure, (expandData) => {
 			if (!expandData) return;
 
-			const path = [] as Array<bigint>;
-			this.layers = [] as Array<LayerPanelEntry>;
-			function recurse(folder: DisplayFolderTreeStructure, layers: Array<LayerPanelEntry>, cache: Map<string, LayerPanelEntry>) {
+			const path = [] as bigint[];
+			this.layers = [] as LayerPanelEntry[];
+			function recurse(folder: DisplayFolderTreeStructure, layers: LayerPanelEntry[], cache: Map<string, LayerPanelEntry>) {
 				folder.children.forEach((item) => {
 					// TODO: fix toString
 					path.push(BigInt(item.layerId.toString()));
@@ -409,15 +409,16 @@ export default defineComponent({
 			recurse(expandData, this.layers, this.layerCache);
 		});
 
-		registerResponseHandler(ResponseType.UpdateLayer, (responseData) => {
-			const updateData = responseData as UpdateLayer;
+		registerJsMessageHandler(UpdateLayer, (updateData) => {
 			if (updateData) {
 				const responsePath = updateData.path;
 				const responseLayer = updateData.data;
 
 				const layer = this.layerCache.get(responsePath.toString());
 				if (layer) Object.assign(this.layerCache.get(responsePath.toString()), responseLayer);
-				else this.layerCache.set(responsePath.toString(), responseLayer);
+				else {
+					this.layerCache.set(responsePath.toString(), responseLayer);
+				}
 				this.setBlendModeForSelectedLayers();
 				this.setOpacityForSelectedLayers();
 			}

frontend/src/components/widgets/floating-menus/MenuList.vue

@@ -143,21 +143,21 @@ import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";
 import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
 
-export type MenuListEntries = Array<MenuListEntry>;
-export type SectionsOfMenuListEntries = Array<MenuListEntries>;
+export type MenuListEntries<Value = string> = MenuListEntry<Value>[];
+export type SectionsOfMenuListEntries<Value = string> = MenuListEntries<Value>[];
 
-interface MenuListEntryData {
-	value?: string;
+interface MenuListEntryData<Value = string> {
+	value?: Value;
 	label?: string;
 	icon?: string;
 	checkbox?: boolean;
-	shortcut?: Array<string>;
+	shortcut?: string[];
 	shortcutRequiresLock?: boolean;
 	action?: () => void;
 	children?: SectionsOfMenuListEntries;
 }
 
-export type MenuListEntry = MenuListEntryData & { ref?: typeof FloatingMenu | typeof MenuList; checked?: boolean };
+export type MenuListEntry<Value = string> = MenuListEntryData<Value> & { ref?: typeof FloatingMenu | typeof MenuList; checked?: boolean };
 
 const KEYBOARD_LOCK_USE_FULLSCREEN = "This hotkey is reserved by the browser, but becomes available in fullscreen mode";
 const KEYBOARD_LOCK_SWITCH_BROWSER = "This hotkey is reserved by the browser, but becomes available in Chrome, Edge, and Opera which support the Keyboard.lock() API";
@@ -240,7 +240,7 @@ const MenuList = defineComponent({
 		},
 	},
 	computed: {
-		menuEntriesWithoutRefs(): Array<Array<MenuListEntryData>> {
+		menuEntriesWithoutRefs(): MenuListEntryData[][] {
 			const { menuEntries } = this;
 			return menuEntries.map((entries) =>
 				entries.map((entry) => {

frontend/src/components/widgets/inputs/RadioInput.vue

@@ -75,7 +75,7 @@ export interface RadioEntryData {
 	action?: () => void;
 }
 
-export type RadioEntries = Array<RadioEntryData>;
+export type RadioEntries = RadioEntryData[];
 
 export default defineComponent({
 	props: {

frontend/src/components/widgets/inputs/SwatchPairInput.vue

@@ -70,7 +70,8 @@ import { defineComponent } from "vue";
 
 import { rgbToDecimalRgb, RGB } from "@/utilities/color";
 import { panicProxy } from "@/utilities/panic-proxy";
-import { ResponseType, registerResponseHandler, Response, UpdateWorkingColors } from "@/utilities/response-handler";
+import { registerJsMessageHandler } from "@/utilities/js-message-dispatcher";
+import { UpdateWorkingColors } from "@/utilities/js-messages";
 
 import ColorPicker from "@/components/widgets/floating-menus/ColorPicker.vue";
 import FloatingMenu, { MenuDirection, MenuType } from "@/components/widgets/floating-menus/FloatingMenu.vue";
@@ -135,20 +136,17 @@ export default defineComponent({
 		};
 	},
 	mounted() {
-		registerResponseHandler(ResponseType.UpdateWorkingColors, (responseData: Response) => {
-			const colorData = responseData as UpdateWorkingColors;
+		registerJsMessageHandler(UpdateWorkingColors, (colorData) => {
 			if (!colorData) return;
 			const { primary, secondary } = colorData;
 
-			this.primaryColor = { r: primary.red, g: primary.green, b: primary.blue, a: primary.alpha };
-			let color = this.primaryColor;
+			this.primaryColor = primary.toRgb();
 			let button = this.getRef<HTMLButtonElement>("primaryButton");
-			button.style.setProperty("--swatch-color", `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`);
+			button.style.setProperty("--swatch-color", primary.toString());
 
-			this.secondaryColor = { r: secondary.red, g: secondary.green, b: secondary.blue, a: secondary.alpha };
-			color = this.secondaryColor;
+			this.secondaryColor = secondary.toRgb();
 			button = this.getRef<HTMLButtonElement>("secondaryButton");
-			button.style.setProperty("--swatch-color", `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`);
+			button.style.setProperty("--swatch-color", secondary.toString());
 		});
 
 		this.updatePrimaryColor();

frontend/src/components/widgets/widgets.ts

@@ -1,6 +1,6 @@
 export type Widgets = TextButtonWidget | IconButtonWidget | SeparatorWidget | PopoverButtonWidget | NumberInputWidget;
-export type WidgetRow = Array<Widgets>;
-export type WidgetLayout = Array<WidgetRow>;
+export type WidgetRow = Widgets[];
+export type WidgetLayout = WidgetRow[];
 
 // Text Button
 export interface TextButtonWidget {

frontend/src/main.ts

@@ -1,5 +1,5 @@
+import "reflect-metadata";
 import { createApp } from "vue";
-
 import { fullscreenModeChanged } from "@/utilities/fullscreen";
 import { onKeyUp, onKeyDown, onMouseMove, onMouseDown, onMouseUp, onMouseScroll, onWindowResize } from "@/utilities/input";
 import "@/utilities/errors";

frontend/src/utilities/documents.ts

@@ -1,16 +1,16 @@
 import { reactive, readonly } from "vue";
 
 import { createDialog, dismissDialog } from "@/utilities/dialog";
+import { registerJsMessageHandler } from "@/utilities/js-message-dispatcher";
 import {
-	ResponseType,
-	registerResponseHandler,
-	Response,
+	DisplayConfirmationToCloseAllDocuments,
 	SetActiveDocument,
 	UpdateOpenDocumentsList,
 	DisplayConfirmationToCloseDocument,
 	ExportDocument,
 	SaveDocument,
-} from "@/utilities/response-handler";
+	OpenDocumentBrowse,
+} from "@/utilities/js-messages";
 import { download, upload } from "@/utilities/files";
 import { panicProxy } from "@/utilities/panic-proxy";
 
@@ -82,40 +82,35 @@ export async function closeAllDocumentsWithConfirmation() {
 
 export default readonly(state);
 
-registerResponseHandler(ResponseType.UpdateOpenDocumentsList, (responseData: Response) => {
-	const documentListData = responseData as UpdateOpenDocumentsList;
+registerJsMessageHandler(UpdateOpenDocumentsList, (documentListData) => {
 	state.documents = documentListData.open_documents.map(({ name, isSaved }) => `${name}${isSaved ? "" : "*"}`);
 });
 
-registerResponseHandler(ResponseType.SetActiveDocument, (responseData: Response) => {
-	const documentData = responseData as SetActiveDocument;
+registerJsMessageHandler(SetActiveDocument, (documentData) => {
 	if (documentData) {
 		state.activeDocumentIndex = documentData.document_index;
 	}
 });
 
-registerResponseHandler(ResponseType.DisplayConfirmationToCloseDocument, (responseData: Response) => {
-	const data = responseData as DisplayConfirmationToCloseDocument;
+registerJsMessageHandler(DisplayConfirmationToCloseDocument, (data) => {
 	closeDocumentWithConfirmation(data.document_index);
 });
 
-registerResponseHandler(ResponseType.DisplayConfirmationToCloseAllDocuments, (_: Response) => {
+registerJsMessageHandler(DisplayConfirmationToCloseAllDocuments, (_) => {
 	closeAllDocumentsWithConfirmation();
 });
 
-registerResponseHandler(ResponseType.OpenDocumentBrowse, async (_: Response) => {
+registerJsMessageHandler(OpenDocumentBrowse, async (_) => {
 	const extension = (await wasm).file_save_suffix();
 	const data = await upload(extension);
 	(await wasm).open_document_file(data.filename, data.content);
 });
 
-registerResponseHandler(ResponseType.ExportDocument, (responseData: Response) => {
-	const updateData = responseData as ExportDocument;
+registerJsMessageHandler(ExportDocument, (updateData) => {
 	if (updateData) download(updateData.name, updateData.document);
 });
 
-registerResponseHandler(ResponseType.SaveDocument, (responseData: Response) => {
-	const saveData = responseData as SaveDocument;
+registerJsMessageHandler(SaveDocument, (saveData) => {
 	if (saveData) download(saveData.name, saveData.document);
 });