Handle colours via GObject properties and draw them using snapshot

Author: RealKC

kcshot-data/src/colour.rs

@@ -2,10 +2,11 @@ use std::borrow::Cow;
 
 use gtk4::{
     gdk::RGBA,
-    glib::{self, prelude::*},
+    glib::{self, ValueDelegate, prelude::*},
 };
 
-#[derive(Clone, Copy, Debug)]
+#[derive(Clone, Copy, Debug, ValueDelegate)]
+#[value_delegate(from = u32)]
 pub struct Colour {
     pub red: u8,
     pub green: u8,
@@ -84,6 +85,35 @@ impl From<Colour> for glib::Variant {
     }
 }
 
+impl From<Colour> for RGBA {
+    fn from(value: Colour) -> Self {
+        RGBA::new(
+            value.red as f32 / 255.0,
+            value.green as f32 / 255.0,
+            value.blue as f32 / 255.0,
+            value.alpha as f32 / 255.0,
+        )
+    }
+}
+
+impl From<u32> for Colour {
+    fn from(value: u32) -> Self {
+        Colour::deserialise_from_u32(value)
+    }
+}
+
+impl From<Colour> for u32 {
+    fn from(value: Colour) -> Self {
+        value.serialise_to_u32()
+    }
+}
+
+impl From<&Colour> for u32 {
+    fn from(value: &Colour) -> Self {
+        value.serialise_to_u32()
+    }
+}
+
 #[derive(Debug, Copy, Clone)]
 pub struct Hsv {
     pub h: f32,

src/editor.rs

@@ -1,9 +1,10 @@
 use gtk4::{gio, glib, prelude::*, subclass::prelude::ObjectSubclassIsExt};
-use kcshot_data::{colour::Colour, settings::Settings};
+use kcshot_data::colour::Colour;
 
 use self::operations::Tool;
 use crate::kcshot::KCShot;
 
+pub mod colourbutton;
 mod colourchooser;
 mod colourchooserdialog;
 mod colourwheel;
@@ -27,14 +28,6 @@ impl EditorWindow {
             .property("editing-starts-with-cropping", editing_starts_with_cropping)
             .build();
 
-        let settings = Settings::open();
-
-        let restored_primary_colour = settings.last_used_primary_colour();
-        let restored_secondary_colour = settings.last_used_secondary_colour();
-
-        editor.set_primary_colour(restored_primary_colour);
-        editor.set_secondary_colour(restored_secondary_colour);
-
         editor
     }
 
@@ -65,53 +58,6 @@ impl EditorWindow {
         });
     }
 
-    /// Returns the primary colour of the editor
-    ///
-    /// The primary colour is the one used for filling in shapes
-    #[track_caller]
-    fn primary_colour(&self) -> Colour {
-        self.imp()
-            .with_image("get primary_colour", |image| {
-                image.operation_stack.primary_colour
-            })
-            .unwrap()
-    }
-
-    fn set_primary_colour(&self, colour: Colour) {
-        self.imp().with_image_mut("set_primary_colour", |image| {
-            image.operation_stack.primary_colour = colour;
-        });
-
-        let settings = Settings::open();
-        if let Err(why) = settings.try_set_last_used_primary_colour(colour) {
-            tracing::warn!("Failed to update `last-used-primary-colour` setting value: {why}");
-        }
-    }
-
-    /// Returns the secondary colour of the editor
-    ///
-    /// The secondary colour is used for lines, the text colour in case of bubbles and as the
-    /// default colour for text and the pencil
-    #[track_caller]
-    fn secondary_colour(&self) -> Colour {
-        self.imp()
-            .with_image("get secondary_colour", |image| {
-                image.operation_stack.secondary_colour
-            })
-            .unwrap()
-    }
-
-    fn set_secondary_colour(&self, colour: Colour) {
-        self.imp().with_image_mut("set_secondary_colour", |image| {
-            image.operation_stack.secondary_colour = colour;
-        });
-
-        let settings = Settings::open();
-        if let Err(why) = settings.try_set_last_used_secondary_colour(colour) {
-            tracing::warn!("Failed to update `last-used-secondary-colour` setting value: {why}");
-        }
-    }
-
     fn set_line_width(&self, line_width: f64) {
         self.imp().with_image_mut("set_line_width", |image| {
             image.operation_stack.line_width = line_width;

src/editor/colourbutton.rs

@@ -0,0 +1,83 @@
+use gtk4::glib;
+
+glib::wrapper! {
+    pub struct ColourButton(ObjectSubclass<underlying::ColourButton>)
+        @extends gtk4::Widget, gtk4::Button,
+        @implements gtk4::Accessible, gtk4::Buildable, gtk4::ConstraintTarget, gtk4::Actionable;
+}
+
+mod underlying {
+    use std::cell::Cell;
+
+    use gtk4::{
+        gdk::RGBA,
+        glib::{self, Properties},
+        graphene::Rect,
+        prelude::*,
+        subclass::prelude::*,
+    };
+    use kcshot_data::colour::Colour;
+
+    use crate::ext::DisposeExt;
+
+    #[derive(Debug, Properties)]
+    #[properties(wrapper_type = super::ColourButton)]
+    pub struct ColourButton {
+        #[property(get, set)]
+        colour: Cell<Colour>,
+    }
+
+    impl Default for ColourButton {
+        fn default() -> Self {
+            Self {
+                colour: Cell::new(Colour {
+                    red: 0,
+                    green: 0,
+                    blue: 0,
+                    alpha: 0,
+                }),
+            }
+        }
+    }
+
+    #[glib::object_subclass]
+    impl ObjectSubclass for ColourButton {
+        const NAME: &'static str = "KCShotColourButton";
+        type Type = super::ColourButton;
+        type ParentType = gtk4::Button;
+    }
+
+    #[glib::derived_properties]
+    impl ObjectImpl for ColourButton {
+        fn constructed(&self) {
+            self.obj().set_halign(gtk4::Align::Center);
+            self.obj().set_valign(gtk4::Align::Center);
+        }
+
+        fn dispose(&self) {
+            self.obj().dispose_children();
+        }
+    }
+
+    impl WidgetImpl for ColourButton {
+        fn snapshot(&self, snapshot: &gtk4::Snapshot) {
+            let colour = self.colour.get();
+
+            let w = self.obj().width() as f32;
+            let h = self.obj().height() as f32;
+
+            if colour.alpha != 0 {
+                snapshot.append_color(&colour.into(), &Rect::new(0.0, 0.0, w, h));
+            } else {
+                let black = RGBA::new(0.0, 0.0, 0.0, 1.0);
+                let magenta = RGBA::new(1.0, 0.0, 0.8, 1.0);
+                snapshot.append_color(&black, &Rect::new(0.0, 0.0, w / 2.0, h / 2.0));
+                snapshot.append_color(&magenta, &Rect::new(w / 2.0, 0.0, w / 2.0, h / 2.0));
+                snapshot.append_color(&magenta, &Rect::new(0.0, h / 2.0, w / 2.0, h / 2.0));
+                snapshot.append_color(&black, &Rect::new(w / 2.0, h / 2.0, w / 2.0, h / 2.0));
+            }
+        }
+    }
+
+    impl ButtonImpl for ColourButton {}
+}

src/editor/colourchooserdialog.rs

@@ -11,8 +11,11 @@ glib::wrapper! {
 }
 
 impl ColourChooserDialog {
-    pub fn new(editor: &EditorWindow) -> Self {
-        glib::Object::builder().property("editor", editor).build()
+    pub fn new(editor: &EditorWindow, initial_colour: Colour) -> Self {
+        glib::Object::builder()
+            .property("editor", editor)
+            .property("initial-colour", initial_colour)
+            .build()
     }
 
     pub async fn colour(&self) -> Colour {
@@ -22,7 +25,7 @@ impl ColourChooserDialog {
 }
 
 mod underlying {
-    use std::cell::RefCell;
+    use std::{cell::RefCell, marker::PhantomData};
 
     use gtk4::{
         CompositeTemplate,
@@ -44,6 +47,8 @@ mod underlying {
     pub struct ColourChooserDialog {
         #[property(get, set)]
         editor: WeakRef<EditorWindow>,
+        #[property(name = "initial-colour", set = Self::set_initial_colour, construct_only)]
+        colour: PhantomData<Colour>,
 
         #[template_child]
         colour_chooser: TemplateChild<ColourChooserWidget>,
@@ -58,6 +63,7 @@ mod underlying {
 
             Self {
                 editor: Default::default(),
+                colour: PhantomData,
                 colour_chooser: Default::default(),
                 colour_rx: RefCell::new(Some(colour_rx)),
                 colour_tx: RefCell::new(Some(colour_tx)),
@@ -93,6 +99,12 @@ mod underlying {
     impl WidgetImpl for ColourChooserDialog {}
     impl WindowImpl for ColourChooserDialog {}
 
+    impl ColourChooserDialog {
+        fn set_initial_colour(&self, colour: Colour) {
+            self.colour_chooser.set_colour(colour);
+        }
+    }
+
     #[gtk4::template_callbacks]
     impl ColourChooserDialog {
         #[template_callback]

src/editor/operations/stack.rs

@@ -51,6 +51,8 @@ impl OperationStack {
         windows: Vec<Window>,
         screen_dimensions: Rectangle,
         editing_started_with_cropping: bool,
+        primary_colour: Colour,
+        secondary_colour: Colour,
     ) -> Self {
         Self {
             operations: vec![],
@@ -62,18 +64,8 @@ impl OperationStack {
             },
             current_operation: None,
             autoincrement_bubble_number: 1,
-            primary_colour: Colour {
-                red: 127,
-                green: 0,
-                blue: 127,
-                alpha: 255,
-            },
-            secondary_colour: Colour {
-                red: 0,
-                green: 127,
-                blue: 127,
-                alpha: 255,
-            },
+            primary_colour,
+            secondary_colour,
             windows,
             current_window: None,
             is_in_crop_drag: false,

src/editor/textdialog/text_input.rs

@@ -160,7 +160,7 @@ mod underlying {
         async fn on_colour_button_clicked(&self, _: &gtk4::Button) {
             let editor = self.obj().editor().unwrap();
 
-            let dialog = ColourChooserDialog::new(&editor);
+            let dialog = ColourChooserDialog::new(&editor, editor.secondary_colour());
             dialog.set_transient_for(self.parent_dialog.upgrade().as_ref());
             dialog.show();
             editor.set_secondary_colour(dialog.colour().await);

src/editor/toolbar.blp

@@ -1,6 +1,6 @@
 using Gtk 4.0;
 
-template $KCShotToolbarWidget : Gtk.Widget {
+template $KCShotToolbarWidget: Gtk.Widget {
     $KCShotToolButton group_source {
         editor: bind template.editor;
     }
@@ -79,30 +79,18 @@ template $KCShotToolbarWidget : Gtk.Widget {
         editor: bind template.editor;
     }
 
-    Gtk.Button primary {
+    $KCShotColourButton primary {
         clicked => $on_primary_colour_clicked() swapped;
-
         visible: false;
         tooltip-text: "Set primary colour";
-
-        Gtk.DrawingArea primary_button_drawing_area {
-            accessible-role: img;
-            width-request: 20;
-            height-request: 20;
-        }
+        colour: bind (template.editor as <$KCShotEditorWindow>).primary-colour;
     }
 
-    Gtk.Button secondary {
+    $KCShotColourButton secondary {
         clicked => $on_secondary_colour_clicked() swapped;
-
         visible: false;
         tooltip-text: "Set secondary colour";
-
-        Gtk.DrawingArea secondary_button_drawing_area {
-            accessible-role: img;
-            width-request: 20;
-            height-request: 20;
-        }
+        colour: bind (template.editor as <$KCShotEditorWindow>).secondary-colour;
     }
 
     Gtk.SpinButton line_width_spinner {
@@ -116,6 +104,7 @@ template $KCShotToolbarWidget : Gtk.Widget {
             page-increment: 1.0;
             page-size: 1.0;
         };
+
         climb-rate: 0.5;
         digits: 1;
         numeric: true;