wip: colorpicker

violet-core/src/widget/basic.rs

@@ -13,6 +13,8 @@ use crate::{
     Scope, Widget,
 };
 
+use super::Stack;
+
 /// A rectangular widget
 #[derive(Debug, Clone)]
 pub struct Rectangle {
@@ -146,6 +148,10 @@ pub fn label(text: impl Into<String>) -> Text {
     Text::new(text).with_margin(spacing_small())
 }
 
+pub fn header(text: impl Into<String>) -> Stack<Text> {
+    Stack::new(Text::new(text).with_margin(spacing_small())).with_padding(spacing_small())
+}
+
 /// A text with a margin
 pub fn title(text: impl Into<String>) -> Text {
     Text::new(text)

violet-core/src/widget/container.rs

@@ -71,6 +71,11 @@ impl<W> Stack<W> {
         self
     }
 
+    pub fn with_background_opt(mut self, background: impl Into<Option<Background>>) -> Self {
+        self.style.background = background.into();
+        self
+    }
+
     /// Contain margins within the widget
     pub fn with_contain_margins(mut self, contain_margins: bool) -> Self {
         self.layout.contain_margins = contain_margins;

violet-core/src/widget/interactive/button.rs

@@ -53,8 +53,8 @@ impl<W> Button<W> {
             style: Default::default(),
             size: WidgetSize::default()
                 .with_padding(spacing_medium())
-                .with_margin(spacing_medium())
-                .with_min_size(Unit::px2(28.0, 28.0)),
+                .with_margin(spacing_medium()),
+            // .with_min_size(Unit::px2(28.0, 28.0)),
             is_pressed: false,
         }
     }

violet-core/src/widget/interactive/input.rs

@@ -22,7 +22,7 @@ use crate::{
     io,
     state::{State, StateDuplex, StateSink, StateStream},
     style::{
-        interactive_active, interactive_hover, interactive_passive, spacing_medium, Background,
+        interactive_active, interactive_hover, interactive_passive, spacing_small, Background,
         SizeExt, StyleExt, ValueOrRef, WidgetSize,
     },
     text::{CursorLocation, LayoutGlyphs},
@@ -66,10 +66,21 @@ impl TextInput {
             style: Default::default(),
             size: WidgetSize::default()
                 .with_min_size(Unit::px2(16.0, 16.0))
-                .with_margin(spacing_medium())
-                .with_padding(spacing_medium()),
+                .with_margin(spacing_small())
+                .with_padding(spacing_small()),
         }
     }
+
+    pub fn new_parsed<T>(content: impl 'static + Send + Sync + StateDuplex<Item = T>) -> Self
+    where
+        T: 'static + Send + Sync + ToString + FromStr,
+    {
+        let content = content
+            .filter_map(|v| Some(v.to_string()), |v| v.parse().ok())
+            .prevent_feedback();
+
+        Self::new(content)
+    }
 }
 
 impl StyleExt for TextInput {

violet-core/src/widget/interactive/mod.rs

@@ -1,3 +1,59 @@
+use winit::event::ElementState;
+
+use crate::{
+    input::{focusable, on_mouse_input},
+    ScopeRef,
+};
+
+use super::Widget;
+
 pub mod button;
 pub mod input;
 pub mod slider;
+
+pub trait InteractiveExt {
+    fn on_press<F: 'static + Send + Sync + FnMut(&ScopeRef<'_>)>(
+        self,
+        on_press: F,
+    ) -> OnPress<Self, F>
+    where
+        Self: Sized;
+}
+
+impl<W: Widget> InteractiveExt for W {
+    fn on_press<F: 'static + Send + Sync + FnMut(&ScopeRef<'_>)>(
+        self,
+        on_press: F,
+    ) -> OnPress<Self, F>
+    where
+        Self: Sized,
+    {
+        OnPress {
+            widget: self,
+            func: on_press,
+        }
+    }
+}
+
+pub struct OnPress<W, F> {
+    widget: W,
+    func: F,
+}
+
+impl<W, F> Widget for OnPress<W, F>
+where
+    W: Widget,
+    F: 'static + Send + Sync + FnMut(&ScopeRef<'_>),
+{
+    fn mount(mut self, scope: &mut crate::Scope<'_>) {
+        self.widget.mount(scope);
+
+        scope
+            .set_default(focusable())
+            .on_event(on_mouse_input(), move |scope, input| {
+                if input.state == ElementState::Released {
+                    (self.func)(scope)
+                }
+            });
+    }
+}

violet-core/src/widget/interactive/slider.rs

@@ -4,7 +4,7 @@ use flax::{component, Component, Entity, EntityRef};
 use futures::{stream::BoxStream, StreamExt};
 use futures_signals::signal::Mutable;
 use glam::Vec2;
-use palette::Srgba;
+use palette::{num::Clamp, Srgba};
 use winit::event::ElementState;
 
 use super::input::TextInput;
@@ -131,14 +131,13 @@ impl<V: SliderValue> Widget for Slider<V> {
             start_value: f32,
             min: f32,
             max: f32,
-            dst: &dyn StateDuplex<Item = V>,
-        ) {
+        ) -> V {
             let rect = entity.get_copy(rect()).unwrap();
             let padding = entity.get_copy(padding()).unwrap_or_default();
 
             let value = (drag_distance / (rect.size().x - padding.size().x)) * (max - min) + min;
 
-            dst.send(V::from_progress(start_value + value));
+            V::from_progress((start_value + value).clamp(min, max))
         }
 
         let handle = SliderHandle {
@@ -186,19 +185,13 @@ impl<V: SliderValue> Widget for Slider<V> {
                 to_owned![value];
                 move |scope, input| {
                     let drag_start = &mut *drag_start.lock_mut();
-                    if let Some((start, start_value)) = drag_start {
-                        update_scrubbed(
-                            scope,
-                            input.local_pos.x - *start,
-                            *start_value,
-                            min,
-                            max,
-                            &*value,
-                        )
+                    let progress = if let Some((start, start_value)) = drag_start {
+                        update_scrubbed(scope, input.local_pos.x - *start, *start_value, min, max)
                     } else {
-                        let progress = get_progress_value(scope, input.local_pos.x, min, max);
-                        value.send(progress);
-                    }
+                        get_progress_value(scope, input.local_pos.x, min, max)
+                    };
+
+                    value.send(progress);
                 }
             });
 

violet-core/src/widget/mod.rs

@@ -12,7 +12,7 @@ use flax::{component::ComponentValue, components::name, Component};
 pub use future::{SignalWidget, StreamWidget};
 use futures_signals::signal::Mutable;
 pub use image::*;
-pub use interactive::{button::*, input::*, slider::*};
+pub use interactive::{button::*, input::*, slider::*, InteractiveExt};
 pub use scroll::ScrollArea;
 
 /// A widget is a description of a part of the Ui with the capability to mount itself into the world.