fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-27 10:48:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add the range slider design to the NumberInput widget (#839)

Browse Source 
* Add range slider to NumberInput

* Cleanup

* Fix event ordering causing bug in Firefox

* Polish the code

* Switch number input modes to range in relevant places
This commit is contained in:
Keavon Chambers
2022-11-05 22:57:19 -07:00
parent 18507b78ac
commit 782f528279
9 changed files with 435 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
editor/src/messages/portfolio/document/document_message_handler.rs
+5 -2
View File
@@ -8,7 +8,9 @@ use crate::messages::input_mapper::utility_types::macros::action_keys;
use crate::messages::layout::utility_types::layout_widget::{Layout, LayoutGroup, Widget, WidgetCallback, WidgetHolder, WidgetLayout};
use crate::messages::layout::utility_types::misc::LayoutTarget;
use crate::messages::layout::utility_types::widgets::button_widgets::{IconButton, PopoverButton};
use crate::messages::layout::utility_types::widgets::input_widgets::{DropdownEntryData, DropdownInput, NumberInput, NumberInputIncrementBehavior, OptionalInput, RadioEntryData, RadioInput};
use crate::messages::layout::utility_types::widgets::input_widgets::{
DropdownEntryData, DropdownInput, NumberInput, NumberInputIncrementBehavior, NumberInputMode, OptionalInput, RadioEntryData, RadioInput,
};
use crate::messages::layout::utility_types::widgets::label_widgets::{Separator, SeparatorDirection, SeparatorType};
use crate::messages::portfolio::document::properties_panel::utility_types::PropertiesPanelMessageHandlerData;
use crate::messages::portfolio::document::utility_types::clipboards::Clipboard;
@@ -1684,7 +1686,7 @@ impl DocumentMessageHandler {
WidgetHolder::new(Widget::NumberInput(NumberInput {
unit: "°".into(),
value: Some(rotation_value),
increment_factor: 15.,
step: 15.,
on_update: WidgetCallback::new(|number_input: &NumberInput| {
NavigationMessage::SetCanvasRotation {
angle_radians: number_input.value.unwrap() * (std::f64::consts::PI / 180.),
@@ -1834,6 +1836,7 @@ impl DocumentMessageHandler {
value: opacity.map(|opacity| opacity * 100.),
min: Some(0.),
max: Some(100.),
mode: NumberInputMode::Range,
on_update: WidgetCallback::new(|number_input: &NumberInput| {
if let Some(value) = number_input.value {
DocumentMessage::SetOpacityForSelectedLayers { opacity: value / 100. }.into()
editor/src/messages/portfolio/document/properties_panel/utility_functions.rs
+15 -2
View File
@@ -5,7 +5,7 @@ use crate::messages::layout::utility_types::misc::LayoutTarget;
use crate::messages::layout::utility_types::widgets::assist_widgets::PivotAssist;
use crate::messages::layout::utility_types::widgets::button_widgets::{IconButton, PopoverButton, TextButton};
use crate::messages::layout::utility_types::widgets::input_widgets::{
CheckboxInput, ColorInput, DropdownEntryData, DropdownInput, FontInput, NumberInput, RadioEntryData, RadioInput, TextAreaInput, TextInput,
CheckboxInput, ColorInput, DropdownEntryData, DropdownInput, FontInput, NumberInput, NumberInputMode, RadioEntryData, RadioInput, TextAreaInput, TextInput,
};
use crate::messages::layout::utility_types::widgets::label_widgets::{IconLabel, Separator, SeparatorDirection, SeparatorType, TextLabel};
use crate::messages::portfolio::utility_types::{ImaginateServerStatus, PersistentData};
@@ -405,8 +405,10 @@ fn node_section_transform(layer: &Layer, persistent_data: &PersistentData) -> La
})),
WidgetHolder::new(Widget::NumberInput(NumberInput {
value: Some(layer.transform.rotation() * 180. / PI),
label: "".into(),
unit: "°".into(),
mode: NumberInputMode::Range,
range_min: Some(-180.),
range_max: Some(180.),
on_update: WidgetCallback::new(|number_input: &NumberInput| {
PropertiesPanelMessage::ModifyTransform {
value: number_input.value.unwrap() / 180. * PI,
@@ -776,6 +778,10 @@ fn node_section_imaginate(imaginate_layer: &ImaginateLayer, layer: &Layer, persi
})),
WidgetHolder::new(Widget::NumberInput(NumberInput {
value: Some(imaginate_layer.samples.into()),
mode: NumberInputMode::Range,
range_min: Some(0.),
range_max: Some(150.),
is_integer: true,
min: Some(0.),
max: Some(150.),
tooltip,
@@ -862,8 +868,12 @@ fn node_section_imaginate(imaginate_layer: &ImaginateLayer, layer: &Layer, persi
})),
WidgetHolder::new(Widget::NumberInput(NumberInput {
value: Some(imaginate_layer.denoising_strength),
mode: NumberInputMode::Range,
range_min: Some(0.),
range_max: Some(1.),
min: Some(0.),
max: Some(1.),
display_decimal_places: 2,
disabled: !imaginate_layer.use_img2img,
tooltip,
on_update: WidgetCallback::new(move |number_input: &NumberInput| {
@@ -894,6 +904,9 @@ fn node_section_imaginate(imaginate_layer: &ImaginateLayer, layer: &Layer, persi
})),
WidgetHolder::new(Widget::NumberInput(NumberInput {
value: Some(imaginate_layer.cfg_scale),
mode: NumberInputMode::Range,
range_min: Some(0.),
range_max: Some(30.),
min: Some(0.),
max: Some(30.),
tooltip,