jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Avoid looping behavior with color selection (#305)

This commit is contained in:
Henry Sloan 2021-07-25 02:31:50 -04:00 committed by Keavon Chambers
parent 1055a0a05f
commit b40da575e7
2 changed files with 45 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
client/web/src/components/widgets/inputs/SwatchPairInput.vue
View File

@ -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>

38
core/editor/src/tool/tool_message_handler.rs
View File

@ -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(),
);
}