Frontend fixed to render changes to working colors when changed from backend (#180)

* Backend and Frontend modification to show working color mods

* Remove comments & change precedence for tool and doc actions

* Add keybind for resetting work colors

* Minor Frontend changes

client/web/src/components/widgets/inputs/SwatchPairInput.vue

@@ -70,6 +70,7 @@ import { rgbToDecimalRgb } from "@/lib/utils";
 import { defineComponent } from "vue";
 import ColorPicker from "../floating-menus/ColorPicker.vue";
 import FloatingMenu, { MenuDirection, MenuType } from "../floating-menus/FloatingMenu.vue";
+import { ResponseType, registerResponseHandler, Response, UpdateWorkingColors } from "../../../response-handler";
 
 const wasm = import("../../../../wasm/pkg");
 
@@ -127,6 +128,14 @@ export default defineComponent({
 	mounted() {
 		this.$watch("primaryColor", this.updatePrimaryColor, { immediate: true });
 		this.$watch("secondaryColor", this.updateSecondaryColor, { immediate: true });
+
+		registerResponseHandler(ResponseType.UpdateWorkingColors, (responseData: Response) => {
+			const colorData = responseData as UpdateWorkingColors;
+			if (!colorData) return;
+			const { primary, secondary } = colorData;
+			this.primaryColor = { r: primary.red, g: primary.green, b: primary.blue, a: primary.alpha };
+			this.secondaryColor = { r: secondary.red, g: secondary.green, b: secondary.blue, a: secondary.alpha };
+		});
 	},
 });
 </script>

client/web/src/response-handler.ts

@@ -16,6 +16,7 @@ export enum ResponseType {
 	ExpandFolder = "ExpandFolder",
 	CollapseFolder = "CollapseFolder",
 	SetActiveTool = "SetActiveTool",
+	UpdateWorkingColors = "UpdateWorkingColors",
 }
 
 export function attachResponseHandlerToPage() {
@@ -55,12 +56,35 @@ function parseResponse(responseType: string, data: any): Response {
 			return newUpdateCanvas(data.UpdateCanvas);
 		case "ExportDocument":
 			return newExportDocument(data.ExportDocument);
+		case "UpdateWorkingColors":
+			return newUpdateWorkingColors(data.UpdateWorkingColors);
 		default:
 			throw new Error(`Unrecognized origin/responseType pair: ${origin}, ${responseType}`);
 	}
 }
 
-export type Response = SetActiveTool | UpdateCanvas | DocumentChanged | CollapseFolder | ExpandFolder;
+export type Response = SetActiveTool | UpdateCanvas | DocumentChanged | CollapseFolder | ExpandFolder | UpdateWorkingColors;
+
+export interface Color {
+	red: number;
+	green: number;
+	blue: number;
+	alpha: number;
+}
+function newColor(input: any): Color {
+	return { red: input.red * 255, green: input.green * 255, blue: input.blue * 255, alpha: input.alpha * 255 };
+}
+
+export interface UpdateWorkingColors {
+	primary: Color;
+	secondary: Color;
+}
+function newUpdateWorkingColors(input: any): UpdateWorkingColors {
+	return {
+		primary: newColor(input.primary),
+		secondary: newColor(input.secondary),
+	};
+}
 
 export interface SetActiveTool {
 	tool_name: string;

core/editor/src/frontend/frontend_message_handler.rs

@@ -1,5 +1,6 @@
 use crate::frontend::layer_panel::LayerPanelEntry;
 use crate::message_prelude::*;
+use crate::Color;
 use serde::{Deserialize, Serialize};
 
 pub type Callback = Box<dyn Fn(FrontendMessage)>;
@@ -14,6 +15,7 @@ pub enum FrontendMessage {
 	ExportDocument { document: String },
 	EnableTextInput,
 	DisableTextInput,
+	UpdateWorkingColors { primary: Color, secondary: Color },
 }
 
 pub struct FrontendMessageHandler {

core/editor/src/input/input_mapper.rs

@@ -145,13 +145,6 @@ impl Default for Mapping {
 			entry! {action=PenMessage::Confirm, key_down=Rmb},
 			entry! {action=PenMessage::Confirm, key_down=KeyEscape},
 			entry! {action=PenMessage::Confirm, key_down=KeyEnter},
-			// Document Actions
-			entry! {action=DocumentMessage::Undo, key_down=KeyZ, modifiers=[KeyControl]},
-			entry! {action=DocumentMessage::DeleteSelectedLayers, key_down=KeyDelete},
-			entry! {action=DocumentMessage::DeleteSelectedLayers, key_down=KeyX},
-			entry! {action=DocumentMessage::DeleteSelectedLayers, key_down=KeyBackspace},
-			entry! {action=DocumentMessage::ExportDocument, key_down=KeyS, modifiers=[KeyControl, KeyShift]},
-			entry! {action=DocumentMessage::ExportDocument, key_down=KeyE, modifiers=[KeyControl]},
 			// Tool Actions
 			entry! {action=ToolMessage::SelectTool(ToolType::Rectangle), key_down=KeyM},
 			entry! {action=ToolMessage::SelectTool(ToolType::Ellipse), key_down=KeyE},
@@ -159,7 +152,15 @@ impl Default for Mapping {
 			entry! {action=ToolMessage::SelectTool(ToolType::Line), key_down=KeyL},
 			entry! {action=ToolMessage::SelectTool(ToolType::Pen), key_down=KeyP},
 			entry! {action=ToolMessage::SelectTool(ToolType::Shape), key_down=KeyY},
+			entry! {action=ToolMessage::ResetColors, key_down=KeyX, modifiers=[KeyShift, KeyControl]},
 			entry! {action=ToolMessage::SwapColors, key_down=KeyX, modifiers=[KeyShift]},
+			// Document Actions
+			entry! {action=DocumentMessage::Undo, key_down=KeyZ, modifiers=[KeyControl]},
+			entry! {action=DocumentMessage::DeleteSelectedLayers, key_down=KeyDelete},
+			entry! {action=DocumentMessage::DeleteSelectedLayers, key_down=KeyX},
+			entry! {action=DocumentMessage::DeleteSelectedLayers, key_down=KeyBackspace},
+			entry! {action=DocumentMessage::ExportDocument, key_down=KeyS, modifiers=[KeyControl, KeyShift]},
+			entry! {action=DocumentMessage::ExportDocument, key_down=KeyE, modifiers=[KeyControl]},
 			// Global Actions
 			entry! {action=GlobalMessage::LogInfo, key_down=Key1},
 			entry! {action=GlobalMessage::LogDebug, key_down=Key2},

core/editor/src/tool/tool_message_handler.rs

@@ -67,11 +67,25 @@ impl MessageHandler<ToolMessage, (&SvgDocument, &InputPreprocessor)> for ToolMes
 			SwapColors => {
 				let doc_data = &mut self.tool_state.document_tool_data;
 				std::mem::swap(&mut doc_data.primary_color, &mut doc_data.secondary_color);
+				responses.push_back(
+					FrontendMessage::UpdateWorkingColors {
+						primary: doc_data.primary_color,
+						secondary: doc_data.secondary_color,
+					}
+					.into(),
+				)
 			}
 			ResetColors => {
 				let doc_data = &mut self.tool_state.document_tool_data;
 				doc_data.primary_color = Color::BLACK;
 				doc_data.secondary_color = Color::WHITE;
+				responses.push_back(
+					FrontendMessage::UpdateWorkingColors {
+						primary: doc_data.primary_color,
+						secondary: doc_data.secondary_color,
+					}
+					.into(),
+				)
 			}
 			message => {
 				let tool_type = match message {