From f05dfa45c424bbdc656e0a3d88a16eee78de1132 Mon Sep 17 00:00:00 2001 From: akshay1992kalbhor Date: Sat, 12 Jun 2021 19:41:22 +0530 Subject: [PATCH 1/4] Backend and Frontend modification to show working color mods --- .../widgets/inputs/SwatchPairInput.vue | 16 +++++++++++ client/web/src/response-handler.ts | 28 ++++++++++++++++++- .../src/frontend/frontend_message_handler.rs | 2 ++ core/editor/src/tool/tool_message_handler.rs | 14 ++++++++++ 4 files changed, 59 insertions(+), 1 deletion(-) diff --git a/client/web/src/components/widgets/inputs/SwatchPairInput.vue b/client/web/src/components/widgets/inputs/SwatchPairInput.vue index e791654cd3..81349d1fd6 100644 --- a/client/web/src/components/widgets/inputs/SwatchPairInput.vue +++ b/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,21 @@ 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) { + const { primary } = colorData; + const { secondary } = colorData; + // G, B, R + // console.log(`PRIMARY: ${primary.red}, ${primary.green}, ${primary.blue}`); + // console.log(`SEC: ${secondary.blue}`); + const primaryButton = this.getRef("primaryButton"); + const secondaryButton = this.getRef("secondaryButton"); + primaryButton.style.setProperty("--swatch-color", `rgba(${primary.red}, ${primary.green}, ${primary.blue}, ${primary.alpha})`); + secondaryButton.style.setProperty("--swatch-color", `rgba(${secondary.red}, ${secondary.green}, ${secondary.blue}, ${secondary.alpha})`); + } + }); }, }); diff --git a/client/web/src/response-handler.ts b/client/web/src/response-handler.ts index 528d7730ec..6c6c2bac57 100644 --- a/client/web/src/response-handler.ts +++ b/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,37 @@ 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; +} + +export interface UpdateWorkingColors { + primary: Color; + secondary: Color; +} + +function newColor(input: any): Color { + return { red: input.red * 255, green: input.green * 255, blue: input.blue * 255, alpha: input.alpha * 255 }; +} + +function newUpdateWorkingColors(input: any): UpdateWorkingColors { + return { + primary: newColor(input.primary), + secondary: newColor(input.secondary), + }; +} export interface SetActiveTool { tool_name: string; diff --git a/core/editor/src/frontend/frontend_message_handler.rs b/core/editor/src/frontend/frontend_message_handler.rs index 883c7f16fe..45e5d9cd28 100644 --- a/core/editor/src/frontend/frontend_message_handler.rs +++ b/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; @@ -14,6 +15,7 @@ pub enum FrontendMessage { ExportDocument { document: String }, EnableTextInput, DisableTextInput, + UpdateWorkingColors { primary: Color, secondary: Color }, } pub struct FrontendMessageHandler { diff --git a/core/editor/src/tool/tool_message_handler.rs b/core/editor/src/tool/tool_message_handler.rs index b7fe1ac6af..a5f1c89ef5 100644 --- a/core/editor/src/tool/tool_message_handler.rs +++ b/core/editor/src/tool/tool_message_handler.rs @@ -67,11 +67,25 @@ impl MessageHandler 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 { From d849e1ef961bbc9226055f0a05c28530e20bdb0d Mon Sep 17 00:00:00 2001 From: akshay1992kalbhor Date: Sat, 12 Jun 2021 20:29:24 +0530 Subject: [PATCH 2/4] Remove comments & change precedence for tool and doc actions --- .../components/widgets/inputs/SwatchPairInput.vue | 3 --- core/editor/src/input/input_mapper.rs | 14 +++++++------- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/client/web/src/components/widgets/inputs/SwatchPairInput.vue b/client/web/src/components/widgets/inputs/SwatchPairInput.vue index 81349d1fd6..47c5cbabbc 100644 --- a/client/web/src/components/widgets/inputs/SwatchPairInput.vue +++ b/client/web/src/components/widgets/inputs/SwatchPairInput.vue @@ -134,9 +134,6 @@ export default defineComponent({ if (colorData) { const { primary } = colorData; const { secondary } = colorData; - // G, B, R - // console.log(`PRIMARY: ${primary.red}, ${primary.green}, ${primary.blue}`); - // console.log(`SEC: ${secondary.blue}`); const primaryButton = this.getRef("primaryButton"); const secondaryButton = this.getRef("secondaryButton"); primaryButton.style.setProperty("--swatch-color", `rgba(${primary.red}, ${primary.green}, ${primary.blue}, ${primary.alpha})`); diff --git a/core/editor/src/input/input_mapper.rs b/core/editor/src/input/input_mapper.rs index 8b1fa345cb..eba397ac8a 100644 --- a/core/editor/src/input/input_mapper.rs +++ b/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}, @@ -160,6 +153,13 @@ impl Default for Mapping { entry! {action=ToolMessage::SelectTool(ToolType::Pen), key_down=KeyP}, entry! {action=ToolMessage::SelectTool(ToolType::Shape), key_down=KeyY}, 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}, From 94067b1a2ad56571e0e20aae9317fe1da10bdd62 Mon Sep 17 00:00:00 2001 From: akshay1992kalbhor Date: Sat, 12 Jun 2021 20:40:32 +0530 Subject: [PATCH 3/4] Add keybind for resetting work colors --- core/editor/src/input/input_mapper.rs | 1 + 1 file changed, 1 insertion(+) diff --git a/core/editor/src/input/input_mapper.rs b/core/editor/src/input/input_mapper.rs index eba397ac8a..565453ffae 100644 --- a/core/editor/src/input/input_mapper.rs +++ b/core/editor/src/input/input_mapper.rs @@ -152,6 +152,7 @@ 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]}, From 39e71a4ba1f8d6a0e09508c19aa70637cf3b0ca9 Mon Sep 17 00:00:00 2001 From: akshay1992kalbhor Date: Sat, 12 Jun 2021 21:25:26 +0530 Subject: [PATCH 4/4] Minor Frontend changes --- .../components/widgets/inputs/SwatchPairInput.vue | 12 ++++-------- client/web/src/response-handler.ts | 8 +++----- 2 files changed, 7 insertions(+), 13 deletions(-) diff --git a/client/web/src/components/widgets/inputs/SwatchPairInput.vue b/client/web/src/components/widgets/inputs/SwatchPairInput.vue index 47c5cbabbc..80944d7e22 100644 --- a/client/web/src/components/widgets/inputs/SwatchPairInput.vue +++ b/client/web/src/components/widgets/inputs/SwatchPairInput.vue @@ -131,14 +131,10 @@ export default defineComponent({ registerResponseHandler(ResponseType.UpdateWorkingColors, (responseData: Response) => { const colorData = responseData as UpdateWorkingColors; - if (colorData) { - const { primary } = colorData; - const { secondary } = colorData; - const primaryButton = this.getRef("primaryButton"); - const secondaryButton = this.getRef("secondaryButton"); - primaryButton.style.setProperty("--swatch-color", `rgba(${primary.red}, ${primary.green}, ${primary.blue}, ${primary.alpha})`); - secondaryButton.style.setProperty("--swatch-color", `rgba(${secondary.red}, ${secondary.green}, ${secondary.blue}, ${secondary.alpha})`); - } + 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 }; }); }, }); diff --git a/client/web/src/response-handler.ts b/client/web/src/response-handler.ts index 6c6c2bac57..135e3b7265 100644 --- a/client/web/src/response-handler.ts +++ b/client/web/src/response-handler.ts @@ -71,16 +71,14 @@ export interface Color { 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 newColor(input: any): Color { - return { red: input.red * 255, green: input.green * 255, blue: input.blue * 255, alpha: input.alpha * 255 }; -} - function newUpdateWorkingColors(input: any): UpdateWorkingColors { return { primary: newColor(input.primary),