Linear and Radial Gradients feature on CanvasItems

data/assets.gresource.xml

@@ -32,5 +32,9 @@
     <file alias="shape-triangle-symbolic.svg">icons/symbolic/shape-triangle-symbolic.svg</file>
     <file alias="shape-circle-symbolic.svg">icons/symbolic/shape-circle-symbolic.svg</file>
     <file alias="shape-text-symbolic.svg">icons/symbolic/shape-text-symbolic.svg</file>
+
+    <file alias="solid-color-button.svg">icons/hicolor/solid-color.svg</file>
+    <file alias="linear-gradient-button.svg">icons/hicolor/linear-gradient.svg</file>
+    <file alias="radial-gradient-button.svg">icons/hicolor/radial-gradient.svg</file>
   </gresource>
 </gresources>

src/Lib/Components/Fill.vala

@@ -29,6 +29,8 @@ public class Akira.Lib.Components.Fill : Component {
     public int id { get; set; }
 
     public Gdk.RGBA color { get; set; }
+    public Cairo.Pattern gradient_pattern { get; set; }
+    public string color_mode { get; set; default = "solid"; }
 
     // Store the hexadecimal string version of the color (E.g.: #FF00CC)
     public string hex { get; set; }
@@ -42,6 +44,7 @@ public class Akira.Lib.Components.Fill : Component {
         color = init_color;
         hex = color.to_string ();
         alpha = 255;
+        gradient_pattern = new Cairo.Pattern.linear (0,0,0,0);
 
         // Listen for changed to the fill attributes to properly trigger the color generation.
         this.notify["color"].connect (() => {
@@ -59,6 +62,11 @@ public class Akira.Lib.Components.Fill : Component {
             rgba.alpha = ((double) alpha) / 255;
             color = rgba;
         });
+
+        this.notify["gradient-pattern"].connect (() => {
+            fills.reload ();
+        });
+
     }
 
     public void remove () {

src/Lib/Components/Fills.vala

@@ -51,7 +51,7 @@ public class Akira.Lib.Components.Fills : Component {
         id++;
 
         // Trigger the generation of the fill color.
-        reload ();
+       reload ();
 
         return new_fill;
     }
@@ -68,8 +68,10 @@ public class Akira.Lib.Components.Fills : Component {
         if (count () == 0) {
             if (item is Items.CanvasArtboard) {
                 ((Items.CanvasArtboard) item).background.set ("fill-color-rgba", null);
+                ((Items.CanvasArtboard) item).background.set ("fill-pattern", null);
             } else {
                 item.set ("fill-color-rgba", null);
+                item.set ("fill-pattern", null);
             }
             return;
         }
@@ -86,6 +88,23 @@ public class Akira.Lib.Components.Fills : Component {
                 continue;
             }
 
+            var stop_colors = 0;
+            fill.gradient_pattern.get_color_stop_count (out stop_colors);
+
+            // if for this fill, either of the gradient modes have been selected,
+            // the stop_colors value would not be zero.
+            if (stop_colors != 0 && has_colors == false) {
+                if (item is Items.CanvasArtboard) {
+                    ((Items.CanvasArtboard) item).background.set ("fill-pattern", fill.gradient_pattern);
+                } else {
+                    item.set ("fill-pattern", fill.gradient_pattern);
+                    double x0, y0, x1, y1;
+                    fill.gradient_pattern.get_linear_points (out x0, out y0, out x1, out y1);
+                }
+
+                // since we dont have the functionality of blending gradients,
+                return;
+            }
             // Set the new blended color.
             rgba_fill = Utils.Color.blend_colors (rgba_fill, fill.color);
             has_colors = true;

src/Lib/Managers/NobManager.vala

@@ -45,7 +45,9 @@ public class Akira.Lib.Managers.NobManager : Object {
         BOTTOM_CENTER,
         BOTTOM_LEFT,
         LEFT_CENTER,
-        ROTATE
+        ROTATE,
+        GRADIENT_START,
+        GRADIENT_END
     }
 
     /*

src/Lib/Selection/Nob.vala

@@ -79,7 +79,9 @@ public class Akira.Lib.Selection.Nob : Goo.CanvasRect {
 
         update_state (Cairo.Matrix.identity (), 0, 0, false);
 
-        if (handle_id == Managers.NobManager.Nob.ROTATE) {
+        if (handle_id == Managers.NobManager.Nob.ROTATE ||
+            handle_id == Managers.NobManager.Nob.GRADIENT_START ||
+            handle_id == Managers.NobManager.Nob.GRADIENT_END) {
             set ("radius-x", nob_size);
             set ("radius-y", nob_size);
         }

src/Models/ColorModel.vala

@@ -33,6 +33,30 @@ public class Akira.Models.ColorModel : GLib.Object {
         BORDER
     }
 
+    public string color_mode {
+        get {
+            return type == Type.FILL ? fill.color_mode : "solid";
+        }
+        set {
+            if (type == Type.FILL) {
+                fill.color_mode = value;
+            }
+        }
+    }
+
+    public Cairo.Pattern pattern {
+            owned get {
+                return type == Type.FILL ? fill.gradient_pattern : new Cairo.Pattern.linear (0,0,0,0);
+            }
+            set {
+                if (type == Type.FILL) {
+                    fill.set ("gradient-pattern", value);
+                }
+            }
+    }
+
+    public string fill_css { get; set; }
+
     public string color {
         owned get {
             return type == Type.FILL ? fill.color.to_string () : border.color.to_string ();
@@ -84,9 +108,27 @@ public class Akira.Models.ColorModel : GLib.Object {
         }
     }
 
+    public double width {
+        get {
+            double width;
+            fill.item.size.get ("width", out width);
+            return width;
+        }
+    }
+
+    public double height {
+        get {
+            double height;
+            fill.item.get ("height", out height);
+            return height;
+        }
+    }
+
     public ColorModel (Lib.Components.Fill? fill, Lib.Components.Border? border = null) {
         type = fill != null ? Type.FILL : Type.BORDER;
         this.fill = fill;
         this.border = border;
+
+        fill_css = "@bg_color";
     }
 }

src/Services/EventBus.vala

@@ -51,6 +51,13 @@ public class Akira.Services.EventBus : Object {
     public signal void update_snaps_color ();
     public signal void update_snap_decorators ();
 
+    // this signal will be triggered every time color gets modified
+    public signal void color_changed (string color, double alpha);
+    public signal void color_mode_changed (string color_mode);
+    // this signal is used to change color in ColorChooserWidget when new stop color selected
+    public signal void change_editor_color (Gdk.RGBA color);
+    public signal void color_chooser_popdown ();
+
     // Options panel signals.
     public signal void align_items (string align_action);
     public signal void init_state_coords ();

src/Widgets/ColorMode.vala

@@ -0,0 +1,120 @@
+/*
+ * Copyright (c) 2021 Alecaddd (https://alecaddd.com)
+ *
+ * This file is part of Akira.
+ *
+ * Akira is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Akira is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Akira. If not, see <https://www.gnu.org/licenses/>.
+ *
+ * Authored by: Ashish Shevale <[email protected]>
+ */
+ public class Akira.Widgets.ColorMode {
+    // these buttons will be used to switch between different coloring modes
+    private Gtk.Button solid_color_button;
+    private Gtk.Button linear_gradient_button;
+    private Gtk.Button radial_gradient_button;
+    // this button will be be used to delete the selected gradient step
+    private Gtk.Button delete_step_button;
+
+    private GradientEditor gradient_editor;
+    public string color_mode_type;
+
+    public Gtk.Grid buttons_grid;
+    private unowned Models.ColorModel model;
+    private unowned Window window;
+
+    public ColorMode (Models.ColorModel _model, Window _window) {
+        model = _model;
+        color_mode_type = model.color_mode;
+        window = _window;
+
+        init_button_ui ();
+    }
+
+    private void init_button_ui () {
+
+        solid_color_button = new Gtk.Button.from_icon_name ("solid-color-button", Gtk.IconSize.DND);
+        solid_color_button.set_tooltip_text (_("Solid Color"));
+        solid_color_button.can_focus = false;
+        solid_color_button.valign = Gtk.Align.CENTER;
+
+        linear_gradient_button = new Gtk.Button.from_icon_name ("linear-gradient-button", Gtk.IconSize.DND);
+        linear_gradient_button.set_tooltip_text (_("Linear Gradient"));
+        linear_gradient_button.can_focus = false;
+        linear_gradient_button.valign = Gtk.Align.CENTER;
+
+        radial_gradient_button = new Gtk.Button.from_icon_name ("radial-gradient-button", Gtk.IconSize.DND);
+        radial_gradient_button.set_tooltip_text (_("Radial Gradient"));
+        radial_gradient_button.can_focus = false;
+        radial_gradient_button.valign = Gtk.Align.CENTER;
+
+        delete_step_button = new Gtk.Button.from_icon_name ("user-trash-symbolic");
+        delete_step_button.set_tooltip_text (_("Delete Gradient Step"));
+        delete_step_button.can_focus = false;
+        delete_step_button.valign = Gtk.Align.CENTER;
+        delete_step_button.halign = Gtk.Align.CENTER;
+        delete_step_button.margin = 10;
+
+        solid_color_button.clicked.connect ( () => mode_button_pressed ("solid"));
+        linear_gradient_button.clicked.connect ( () => mode_button_pressed ("linear"));
+        radial_gradient_button.clicked.connect ( () => mode_button_pressed ("radial"));
+        delete_step_button.clicked.connect (on_delete_button_pressed);
+
+        gradient_editor = new GradientEditor (window, model, model.pattern);
+
+        mode_button_pressed (color_mode_type);
+
+        delete_step_button.size_allocate.connect ( () => {
+            if (color_mode_type == "solid") {
+                delete_step_button.visible = false;
+            }
+        });
+        // since color modes on border havent been implmented yet, disable these buttons
+        if (model.type == Akira.Models.ColorModel.Type.BORDER) {
+            solid_color_button.sensitive = false;
+            linear_gradient_button.sensitive = false;
+            radial_gradient_button.sensitive = false;
+            delete_step_button.sensitive = false;
+        }
+
+        Gtk.Separator separator = new Gtk.Separator (Gtk.Orientation.VERTICAL);
+        separator.hexpand = true;
+
+        buttons_grid = new Gtk.Grid ();
+        buttons_grid.attach (solid_color_button, 0, 0);
+        buttons_grid.attach (linear_gradient_button, 1, 0);
+        buttons_grid.attach (radial_gradient_button, 2, 0);
+        buttons_grid.attach (separator, 3, 0);
+
+        buttons_grid.attach (gradient_editor, 0, 1, 4, 1);
+        buttons_grid.attach (delete_step_button, 4, 1);
+    }
+
+    private void mode_button_pressed (string _color_mode_type) {
+        if (_color_mode_type == "solid") {
+            delete_step_button.visible = false;
+        } else {
+            delete_step_button.visible = true;
+        }
+        color_mode_type = _color_mode_type;
+        model.color_mode = color_mode_type;
+        window.event_bus.color_mode_changed (color_mode_type);
+    }
+
+    private void on_delete_button_pressed () {
+        if (color_mode_type != "solid") {
+            gradient_editor.delete_selected_step ();
+        }
+    }
+
+ }