Skip to content

Avoid looping behavior with color selection #305

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 25, 2021
Merged

Avoid looping behavior with color selection #305

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 24 additions & 6 deletions client/web/src/components/widgets/inputs/SwatchPairInput.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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>
38 changes: 21 additions & 17 deletions core/editor/src/tool/tool_message_handler.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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()),
Expand All @@ -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);
Expand Down Expand Up @@ -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(),
);
}