Move gradient picking into the color picker (#1778)

* Gradient picker

* Fix up color picker layout CSS problems

* Begin hooking up SpectrumInput for gradient in the ColorPicker

* Working gradient picking on the frontend only

* Plumb FillColorChoice into the backend

* Hook everything else up, just with a weird bug remaining

* Fix some svelty reactivity issues

* Add and remove stops

* Cleanup

* Rename type

* Fill node document format upgrading

* Fix lint

* Polish the color picker UX and fix a bug

---------

Co-authored-by: 0hypercube <0hypercube@gmail.com>
This commit is contained in:
Keavon Chambers
2024-06-09 22:55:13 -07:00
committed by GitHub
co-authored by 0hypercube
parent 449729f1e1
commit a9a4b5cd19
48 changed files with 1380 additions and 664 deletions
@@ -2,6 +2,7 @@ use crate::messages::layout::utility_types::widget_prelude::*;
use crate::messages::prelude::Message;
use graphene_core::Color;
use graphene_std::vector::style::FillChoice;
#[derive(PartialEq, Clone, Debug, serde::Serialize, serde::Deserialize, specta::Type)]
pub enum ToolColorType {
@@ -96,7 +97,9 @@ impl ToolColorOptions {
widgets.push(radio);
widgets.push(Separator::new(SeparatorType::Related).widget_holder());
let color_button = ColorButton::new(self.active_color()).allow_none(color_allow_none).on_update(color_callback);
let color_button = ColorButton::new(FillChoice::from_optional_color(self.active_color()))
.allow_none(color_allow_none)
.on_update(color_callback);
widgets.push(color_button.widget_holder());
widgets
@@ -7,7 +7,7 @@ use graph_craft::document::{value::TaggedValue, DocumentNode, NodeId, NodeInput,
use graphene_core::raster::{BlendMode, ImageFrame};
use graphene_core::text::Font;
use graphene_core::uuid::ManipulatorGroupId;
use graphene_core::vector::style::{FillType, Gradient};
use graphene_core::vector::style::Gradient;
use graphene_core::Color;
use glam::DVec2;
@@ -95,38 +95,21 @@ pub fn get_colinear_manipulators(layer: LayerNodeIdentifier, document_network: &
/// Get the current gradient of a layer from the closest Fill node
pub fn get_gradient(layer: LayerNodeIdentifier, document_network: &NodeNetwork) -> Option<Gradient> {
let fill_index = 1;
let inputs = NodeGraphLayer::new(layer, document_network).find_node_inputs("Fill")?;
let TaggedValue::FillType(FillType::Gradient) = inputs.get(1)?.as_value()? else {
let TaggedValue::Fill(graphene_std::vector::style::Fill::Gradient(gradient)) = inputs.get(fill_index)?.as_value()? else {
return None;
};
let TaggedValue::GradientType(gradient_type) = inputs.get(3)?.as_value()? else {
return None;
};
let TaggedValue::DVec2(start) = inputs.get(4)?.as_value()? else {
return None;
};
let TaggedValue::DVec2(end) = inputs.get(5)?.as_value()? else {
return None;
};
let TaggedValue::DAffine2(transform) = inputs.get(6)?.as_value()? else {
return None;
};
let TaggedValue::GradientPositions(positions) = inputs.get(7)?.as_value()? else {
return None;
};
Some(Gradient {
start: *start,
end: *end,
transform: *transform,
positions: positions.clone(),
gradient_type: *gradient_type,
})
Some(gradient.clone())
}
/// Get the current fill of a layer from the closest Fill node
pub fn get_fill_color(layer: LayerNodeIdentifier, document_network: &NodeNetwork) -> Option<Color> {
let fill_index = 1;
let inputs = NodeGraphLayer::new(layer, document_network).find_node_inputs("Fill")?;
let TaggedValue::Color(color) = inputs.get(2)?.as_value()? else {
let TaggedValue::Fill(graphene_std::vector::style::Fill::Solid(color)) = inputs.get(fill_index)?.as_value()? else {
return None;
};
Some(*color)