Set the mouse cursor in the canvas based on the current tool and its state (#480)

* Add FrontendMouseCursor and DisplayMouseCursor

* Add update_cursor method to the Fsm trait and implement it for all tools

* Rename DisplayMouseCursor to UpdateMouseCursor

* Add 'To CSS Cursor Property' transform decorator and change the mouse cursor in the canvas based on the current tool and its state

* Implement update_cursor for Navigate tool properly

* Keep the cursor when dragging outside of the canvas

* Change the mouse cursor to 'zoom-in' when LMB dragging on canvas with Navigate tool

* Rename FrontendMouseCursor to MouseCursorIcon

* Rename 'event' to 'e' and replace v-on with @

* Change the definition of the MouseCursorIcon type in TS

* Replace switch with dictionary look-up

* Move the definition of MouseCursorIcon closer to where it's used

frontend/src/dispatcher/js-messages.ts

@@ -201,6 +201,24 @@ export class UpdateDocumentRulers extends JsMessage {
 	readonly interval!: number;
 }
 
+export type MouseCursorIcon = "default" | "zoom-in" | "zoom-out" | "grabbing" | "crosshair";
+
+const ToCssCursorProperty = Transform(({ value }) => {
+	const cssNames: Record<string, MouseCursorIcon> = {
+		ZoomIn: "zoom-in",
+		ZoomOut: "zoom-out",
+		Grabbing: "grabbing",
+		Crosshair: "crosshair",
+	};
+
+	return cssNames[value] || "default";
+});
+
+export class UpdateMouseCursor extends JsMessage {
+	@ToCssCursorProperty
+	readonly cursor!: MouseCursorIcon;
+}
+
 export class TriggerFileDownload extends JsMessage {
 	readonly document!: string;
 
@@ -378,6 +396,7 @@ export const messageConstructors: Record<string, MessageMaker> = {
 	UpdateWorkingColors,
 	UpdateCanvasZoom,
 	UpdateCanvasRotation,
+	UpdateMouseCursor,
 	DisplayDialogError,
 	DisplayDialogPanic,
 	DisplayConfirmationToCloseDocument,