Make artboards feature complete (#401)

* Allow controlling the artboard fill color

* Implement hide and lock options for artboard layer

* Implement hover effects for artboard layers

* Add release notes

Author: Alecaddd

data/com.github.akiraux.akira.appdata.xml.in.in

@@ -36,6 +36,8 @@
       <description>
         <p>Bug fixes and Artboards improvements</p>
         <ul>
+          <li>Control Artboards background color.</li>
+          <li>Hide and Lock Artbaords from the Layers panel.</li>
           <li>Items inside Artboards are masked when extending outside the edges of the Artboard.</li>
           <li>Fix items reordering with the layers panel drag and drop</li>
           <li>Fix random segfault at startup while setting accelerators</li>

data/css/artboard.css

@@ -35,6 +35,11 @@
     color: @fg_color;
 }
 
+/* Hovered */
+.artboard.hovered:not(:selected) .artboard-handle {
+  box-shadow: inset 0 0 0 2px @highlight;
+}
+
 .artboard-container {
     background-color: @bg_color;
 }

debian/changelog

@@ -1,5 +1,7 @@
 com.github.akiraux.akira (0.0.12) xenial; urgency=medium
 
+  * Control Artboards background color.
+  * Hide and Lock Artbaords from the Layers panel.
   * Items inside Artboards are masked when extending outside the edges of the Artboard.
   * Fix items reordering with the layers panel drag and drop.
   * Fix random segfault at startup while setting accelerators.

src/Layouts/Partials/Artboard.vala

@@ -223,11 +223,13 @@ public class Akira.Layouts.Partials.Artboard : Gtk.ListBoxRow {
 
         handle.enter_notify_event.connect (event => {
             get_style_context ().add_class ("hover");
+            window.event_bus.hover_over_layer (model);
             return false;
         });
 
         handle.leave_notify_event.connect (event => {
             get_style_context ().remove_class ("hover");
+            window.event_bus.hover_over_layer (null);
             return false;
         });
 
@@ -237,6 +239,20 @@ public class Akira.Layouts.Partials.Artboard : Gtk.ListBoxRow {
             var item_model = item as Akira.Lib.Models.CanvasItem;
             return new Akira.Layouts.Partials.Layer (window, item_model, container);
         });
+
+        lock_actions ();
+        hide_actions ();
+
+        window.event_bus.hover_over_item.connect (on_hover_over_item);
+    }
+
+    private void on_hover_over_item (Lib.Models.CanvasItem? item) {
+        if (item == model) {
+            get_style_context ().add_class ("hovered");
+            return;
+        }
+
+        get_style_context ().remove_class ("hovered");
     }
 
     private void build_drag_and_drop () {
@@ -461,4 +477,71 @@ public class Akira.Layouts.Partials.Artboard : Gtk.ListBoxRow {
         window.event_bus.disconnect_typing_accel ();
         return false;
     }
+
+    private void lock_actions () {
+        button_locked.bind_property ("active", model, "locked",
+            BindingFlags.BIDIRECTIONAL | BindingFlags.SYNC_CREATE);
+
+        button_locked.toggled.connect (() => {
+            var active = button_locked.get_active ();
+            button_locked.tooltip_text = active ? _("Unlock Layer") : _("Lock Layer");
+
+            if (active) {
+                button_locked.get_style_context ().add_class ("show");
+            } else {
+                button_locked.get_style_context ().remove_class ("show");
+            }
+
+            icon_unlocked.visible = active;
+            icon_unlocked.no_show_all = ! active;
+
+            icon_locked.visible = ! active;
+            icon_locked.no_show_all = active;
+
+            if (active) {
+                window.event_bus.item_locked (model);
+                (parent as Gtk.ListBox).unselect_row (this);
+            }
+
+            window.event_bus.set_focus_on_canvas ();
+            window.event_bus.file_edited ();
+        });
+    }
+
+    private void hide_actions () {
+        button_hidden.bind_property ("active", model, "visibility",
+            BindingFlags.BIDIRECTIONAL | BindingFlags.SYNC_CREATE,
+            (binding, srcval, ref targetval) => {
+                Goo.CanvasItemVisibility status = (bool) srcval.get_boolean ()
+                    ? Goo.CanvasItemVisibility.INVISIBLE
+                    : Goo.CanvasItemVisibility.VISIBLE;
+                targetval.set_enum (status);
+                return true;
+            },
+            (binding, srcval, ref targetval) => {
+                var status = ((Goo.CanvasItemVisibility) srcval.get_enum ()) == Goo.CanvasItemVisibility.INVISIBLE;
+                targetval.set_boolean (status);
+                return true;
+            });
+
+        button_hidden.toggled.connect (() => {
+            var active = button_hidden.get_active ();
+            button_hidden.tooltip_text = active ? _("Show Layer") : _("Hide Layer");
+
+            if (active) {
+                button_hidden.get_style_context ().add_class ("show");
+            } else {
+                button_hidden.get_style_context ().remove_class ("show");
+            }
+
+            icon_visible.visible = active;
+            icon_visible.no_show_all = ! active;
+
+            icon_hidden.visible = ! active;
+            icon_hidden.no_show_all = active;
+
+            window.event_bus.set_focus_on_canvas ();
+            window.event_bus.file_edited ();
+        });
+    }
 }

src/Layouts/Partials/Layer.vala

@@ -704,6 +704,7 @@ public class Akira.Layouts.Partials.Layer : Gtk.ListBoxRow {
             }
 
             window.event_bus.set_focus_on_canvas ();
+            window.event_bus.file_edited ();
         });
     }
 
@@ -738,6 +739,9 @@ public class Akira.Layouts.Partials.Layer : Gtk.ListBoxRow {
 
             icon_hidden.visible = ! active;
             icon_hidden.no_show_all = active;
+
+            window.event_bus.set_focus_on_canvas ();
+            window.event_bus.file_edited ();
         });
     }
 

src/Lib/Models/CanvasArtboard.vala

@@ -115,11 +115,15 @@ public class Akira.Lib.Models.CanvasArtboard : Goo.CanvasItemSimple, Goo.CanvasI
         y = 0;
 
         show_border_radius_panel = false;
-        show_fill_panel = false;
+        show_fill_panel = true;
         show_border_panel = false;
         is_radius_uniform = true;
         is_radius_autoscale = false;
 
+        var fill_rgba = Gdk.RGBA ();
+        fill_rgba.parse ("rgba (255, 255, 255, 1)");
+        color = fill_rgba;
+
         set_transform (Cairo.Matrix.identity ());
 
         // Keep the item always in the origin
@@ -209,7 +213,10 @@ public class Akira.Lib.Models.CanvasArtboard : Goo.CanvasItemSimple, Goo.CanvasI
         cr.clip ();
 
         cr.rectangle (x, y, width, height);
-        cr.set_source_rgba (1, 1, 1, 1);
+
+        // If the user hides or delete the fill color, set the opacity to 0.
+        var alpha = hidden_fill || !has_fill ? 0 : color.alpha;
+        cr.set_source_rgba (color.red, color.green, color.blue, alpha);
         cr.fill ();
 
         if (items.get_n_items () > 0) {