Avoid looping behavior with color selection (#305)

Author: henryksloan

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

@@ -3,13 +3,13 @@
 		<div class="secondary swatch">
 			<button @click="clickSecondarySwatch" ref="secondaryButton" data-hover-menu-spawner></button>
 			<FloatingMenu :type="MenuType.Popover" :direction="MenuDirection.Right" horizontal ref="secondarySwatchFloatingMenu">
-				<ColorPicker v-model:color="secondaryColor" />
+				<ColorPicker @update:color="secondaryColorChanged" :color="secondaryColor" />
 			</FloatingMenu>
 		</div>
 		<div class="primary swatch">
 			<button @click="clickPrimarySwatch" ref="primaryButton" data-hover-menu-spawner></button>
 			<FloatingMenu :type="MenuType.Popover" :direction="MenuDirection.Right" horizontal ref="primarySwatchFloatingMenu">
-				<ColorPicker v-model:color="primaryColor" />
+				<ColorPicker @update:color="primaryColorChanged" :color="primaryColor" />
 			</FloatingMenu>
 		</div>
 	</div>
@@ -66,7 +66,7 @@
 </style>
 
 <script lang="ts">
-import { rgbToDecimalRgb } from "@/utilities/color";
+import { rgbToDecimalRgb, RGB } from "@/utilities/color";
 import { defineComponent } from "vue";
 import ColorPicker from "@/components/widgets/floating-menus/ColorPicker.vue";
 import FloatingMenu, { MenuDirection, MenuType } from "@/components/widgets/floating-menus/FloatingMenu.vue";
@@ -95,6 +95,16 @@ export default defineComponent({
 			return this.$refs[name] as T;
 		},
 
+		primaryColorChanged(color: RGB) {
+			this.primaryColor = color;
+			this.updatePrimaryColor();
+		},
+
+		secondaryColorChanged(color: RGB) {
+			this.secondaryColor = color;
+			this.updateSecondaryColor();
+		},
+
 		async updatePrimaryColor() {
 			const { update_primary_color, Color } = await wasm;
 
@@ -126,16 +136,24 @@ 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 };
+			let color = this.primaryColor;
+			let button = this.getRef<HTMLButtonElement>("primaryButton");
+			button.style.setProperty("--swatch-color", `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`);
+
 			this.secondaryColor = { r: secondary.red, g: secondary.green, b: secondary.blue, a: secondary.alpha };
+			color = this.secondaryColor;
+			button = this.getRef<HTMLButtonElement>("secondaryButton");
+			button.style.setProperty("--swatch-color", `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`);
 		});
+
+		this.updatePrimaryColor();
+		this.updateSecondaryColor();
 	},
 });
 </script>

core/editor/src/tool/tool_message_handler.rs

@@ -4,7 +4,7 @@ use document_core::color::Color;
 use crate::input::InputPreprocessor;
 use crate::{
 	document::Document,
-	tool::{tool_options::ToolOptions, ToolFsmState, ToolType},
+	tool::{tool_options::ToolOptions, DocumentToolData, ToolFsmState, ToolType},
 };
 use std::collections::VecDeque;
 
@@ -50,8 +50,14 @@ impl MessageHandler<ToolMessage, (&Document, &InputPreprocessor)> for ToolMessag
 		let (document, input) = data;
 		use ToolMessage::*;
 		match message {
-			SelectPrimaryColor(c) => self.tool_state.document_tool_data.primary_color = c,
-			SelectSecondaryColor(c) => self.tool_state.document_tool_data.secondary_color = c,
+			SelectPrimaryColor(c) => {
+				self.tool_state.document_tool_data.primary_color = c;
+				update_working_colors(&self.tool_state.document_tool_data, responses);
+			}
+			SelectSecondaryColor(c) => {
+				self.tool_state.document_tool_data.secondary_color = c;
+				update_working_colors(&self.tool_state.document_tool_data, responses);
+			}
 			SelectTool(tool) => {
 				let mut reset = |tool| match tool {
 					ToolType::Ellipse => responses.push_back(EllipseMessage::Abort.into()),
@@ -70,25 +76,13 @@ impl MessageHandler<ToolMessage, (&Document, &InputPreprocessor)> for ToolMessag
 			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(),
-				)
+				update_working_colors(doc_data, responses);
 			}
 			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(),
-				)
+				update_working_colors(doc_data, responses);
 			}
 			SetToolOptions(tool_type, tool_options) => {
 				self.tool_state.document_tool_data.tool_options.insert(tool_type, tool_options);
@@ -120,3 +114,13 @@ impl MessageHandler<ToolMessage, (&Document, &InputPreprocessor)> for ToolMessag
 		list
 	}
 }
+
+fn update_working_colors(doc_data: &DocumentToolData, responses: &mut VecDeque<Message>) {
+	responses.push_back(
+		FrontendMessage::UpdateWorkingColors {
+			primary: doc_data.primary_color,
+			secondary: doc_data.secondary_color,
+		}
+		.into(),
+	);
+}