Polishing: standardize binding JS resize event (fixes non-integer AA rendering); remove "X" to delete; cleanup

frontend/src/App.vue

@@ -270,7 +270,10 @@ export default defineComponent({
 		};
 	},
 	data() {
+		// Initialize the Graphite WASM editor instance
 		const editor = createEditorState();
+
+		// Initialize other stateful Vue systems
 		const dialog = createDialogState(editor);
 		const documents = createDocumentsState(editor, dialog);
 		const fullscreen = createFullscreenState();

frontend/src/components/panels/Document.vue

@@ -65,11 +65,11 @@
 			</LayoutCol>
 			<LayoutCol class="viewport">
 				<LayoutRow class="bar-area">
-					<CanvasRuler :origin="rulerOrigin.x" :majorMarkSpacing="rulerSpacing" :numberInterval="rulerInterval" :direction="'Horizontal'" class="top-ruler" />
+					<CanvasRuler :origin="rulerOrigin.x" :majorMarkSpacing="rulerSpacing" :numberInterval="rulerInterval" :direction="'Horizontal'" class="top-ruler" ref="rulerHorizontal" />
 				</LayoutRow>
 				<LayoutRow class="canvas-area">
 					<LayoutCol class="bar-area">
-						<CanvasRuler :origin="rulerOrigin.y" :majorMarkSpacing="rulerSpacing" :numberInterval="rulerInterval" :direction="'Vertical'" />
+						<CanvasRuler :origin="rulerOrigin.y" :majorMarkSpacing="rulerSpacing" :numberInterval="rulerInterval" :direction="'Vertical'" ref="rulerVertical" />
 					</LayoutCol>
 					<LayoutCol class="canvas-area">
 						<div class="canvas" data-canvas ref="canvas" :style="{ cursor: canvasCursor }" @pointerdown="(e: PointerEvent) => canvasPointerDown(e)">
@@ -240,6 +240,7 @@ import {
 	defaultWidgetLayout,
 	UpdateDocumentBarLayout,
 	TriggerTextCommit,
+	TriggerViewportResize,
 	DisplayRemoveEditableTextbox,
 	DisplayEditableTextbox,
 } from "@/dispatcher/js-messages";
@@ -263,7 +264,10 @@ export default defineComponent({
 	inject: ["editor", "dialog"],
 	methods: {
 		viewportResize() {
+			// Resize the canvas
+
 			const canvas = this.$refs.canvas as HTMLElement;
+
 			// Get the width and height rounded up to the nearest even number because resizing is centered and dividing an odd number by 2 for centering causes antialiasing
 			let width = Math.ceil(parseFloat(getComputedStyle(canvas).width));
 			if (width % 2 === 1) width += 1;
@@ -272,6 +276,13 @@ export default defineComponent({
 
 			this.canvasSvgWidth = `${width}px`;
 			this.canvasSvgHeight = `${height}px`;
+
+			// Resize the rulers
+
+			const rulerHorizontal = this.$refs.rulerHorizontal as typeof CanvasRuler;
+			const rulerVertical = this.$refs.rulerVertical as typeof CanvasRuler;
+			if (rulerHorizontal) rulerHorizontal.handleResize();
+			if (rulerVertical) rulerVertical.handleResize();
 		},
 		translateCanvasX(newValue: number) {
 			const delta = newValue - this.scrollbarPos.x;
@@ -415,9 +426,7 @@ export default defineComponent({
 		this.editor.dispatcher.subscribeJsMessage(UpdateDocumentBarLayout, (updateDocumentBarLayout) => {
 			this.documentBarLayout = updateDocumentBarLayout;
 		});
-
-		window.addEventListener("resize", this.viewportResize);
-		window.addEventListener("DOMContentLoaded", this.viewportResize);
+		this.editor.dispatcher.subscribeJsMessage(TriggerViewportResize, this.viewportResize);
 	},
 	data() {
 		const documentModeEntries: SectionsOfMenuListEntries = [

frontend/src/components/widgets/rulers/CanvasRuler.vue

@@ -138,13 +138,6 @@ export default defineComponent({
 			}
 		},
 	},
-	mounted() {
-		window.addEventListener("resize", this.handleResize);
-		this.handleResize();
-	},
-	beforeUnmount() {
-		window.removeEventListener("resize", this.handleResize);
-	},
 	data() {
 		return {
 			rulerLength: 0,

frontend/src/dispatcher/js-messages.ts

@@ -471,41 +471,44 @@ export class DisplayDialogComingSoon extends JsMessage {
 
 export class TriggerTextCommit extends JsMessage {}
 
+export class TriggerViewportResize extends JsMessage {}
+
 // Any is used since the type of the object should be known from the rust side
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type JSMessageFactory = (data: any, wasm: WasmInstance, instance: RustEditorInstance) => JsMessage;
 type MessageMaker = typeof JsMessage | JSMessageFactory;
 
 export const messageConstructors: Record<string, MessageMaker> = {
-	UpdateDocumentArtwork,
-	UpdateDocumentOverlays,
-	UpdateDocumentScrollbars,
-	UpdateDocumentRulers,
-	TriggerFileDownload,
-	TriggerFileUpload,
+	DisplayConfirmationToCloseAllDocuments,
+	DisplayConfirmationToCloseDocument,
+	DisplayDialogAboutGraphite,
+	DisplayDialogComingSoon,
+	DisplayDialogError,
+	DisplayDialogPanic,
 	DisplayDocumentLayerTreeStructure: newDisplayDocumentLayerTreeStructure,
 	DisplayEditableTextbox,
 	DisplayRemoveEditableTextbox,
-	UpdateDocumentLayer,
-	UpdateActiveTool,
-	UpdateActiveDocument,
-	UpdateOpenDocumentsList,
-	UpdateInputHints,
-	UpdateWorkingColors,
-	UpdateCanvasZoom,
-	UpdateCanvasRotation,
-	UpdateMouseCursor,
-	DisplayDialogError,
-	DisplayDialogPanic,
-	DisplayConfirmationToCloseDocument,
-	DisplayConfirmationToCloseAllDocuments,
-	DisplayDialogAboutGraphite,
-	TriggerIndexedDbWriteDocument,
+	TriggerFileDownload,
+	TriggerFileUpload,
 	TriggerIndexedDbRemoveDocument,
+	TriggerIndexedDbWriteDocument,
 	TriggerTextCommit,
+	TriggerViewportResize,
+	UpdateActiveDocument,
+	UpdateActiveTool,
+	UpdateCanvasRotation,
+	UpdateCanvasZoom,
 	UpdateDocumentArtboards,
-	UpdateToolOptionsLayout,
-	DisplayDialogComingSoon,
+	UpdateDocumentArtwork,
 	UpdateDocumentBarLayout,
+	UpdateDocumentLayer,
+	UpdateDocumentOverlays,
+	UpdateDocumentRulers,
+	UpdateDocumentScrollbars,
+	UpdateInputHints,
+	UpdateMouseCursor,
+	UpdateOpenDocumentsList,
+	UpdateToolOptionsLayout,
+	UpdateWorkingColors,
 } as const;
 export type JsMessageType = keyof typeof messageConstructors;

frontend/src/state/wasm-loader.ts

@@ -6,6 +6,7 @@ import { JsMessageType } from "@/dispatcher/js-messages";
 export type WasmInstance = typeof import("@/../wasm/pkg");
 export type RustEditorInstance = InstanceType<WasmInstance["JsEditorHandle"]>;
 
+// `wasmImport` starts uninitialized until `initWasm()` is called in `main.ts` before the Vue app is created
 let wasmImport: WasmInstance | null = null;
 export async function initWasm(): Promise<void> {
 	if (wasmImport !== null) return;
@@ -62,20 +63,24 @@ export function getWasmInstance(): WasmInstance {
 	throw new Error("Editor WASM backend was not initialized at application startup");
 }
 
-type CreateEditorStateType = { dispatcher: ReturnType<typeof createJsDispatcher>; rawWasm: WasmInstance; instance: RustEditorInstance };
+type CreateEditorStateType = {
+	/// Allows subscribing to messages from the WASM backend
+	rawWasm: WasmInstance;
+	/// Bindings to WASM wrapper declarations (generated by wasm-bindgen)
+	dispatcher: ReturnType<typeof createJsDispatcher>;
+	/// WASM wrapper's exported functions (generated by wasm-bindgen)
+	instance: RustEditorInstance;
+};
 export function createEditorState(): CreateEditorStateType {
-	const dispatcher = createJsDispatcher();
 	const rawWasm = getWasmInstance();
-
-	const rustCallback = (messageType: JsMessageType, data: Record<string, unknown>): void => {
+	const dispatcher = createJsDispatcher();
+	const instance = new rawWasm.JsEditorHandle((messageType: JsMessageType, data: Record<string, unknown>): void => {
 		dispatcher.handleJsMessage(messageType, data, rawWasm, instance);
-	};
-
-	const instance = new rawWasm.JsEditorHandle(rustCallback);
+	});
 
 	return {
-		dispatcher,
 		rawWasm,
+		dispatcher,
 		instance,
 	};
 }