WIP: Add shapes through buttons

com.github.akiraux.libgtkcanvas.json

@@ -18,16 +18,73 @@
    "finish-args": [
       "--share=ipc",
       "--socket=wayland",
-      "--socket=x11"
+      "--socket=x11",
+      "--device=dri"
    ],
    "modules": [
+      {
+         "name": "gxml",
+         "buildsystem": "meson",
+         "sources": [
+            {
+               "type": "git",
+               "url": "https://gitlab.gnome.org/GNOME/gxml.git",
+               "branch": "gxml-0.16"
+            }
+         ]
+      },
+      {
+         "name": "gsvg",
+         "buildsystem": "meson",
+         "sources": [
+            {
+               "type": "git",
+               "url": "https://gitlab.com/pwmc/gsvg.git",
+               "tag": "0.6"
+            }
+         ]
+      },
+      {
+         "name": "gresg",
+         "buildsystem": "meson",
+         "sources": [
+            {
+               "type": "git",
+               "url": "https://gitlab.com/esodan/gresg.git",
+               "tag": "0.4.0"
+            }
+         ]
+      },
+      {
+         "name": "gtktester",
+         "buildsystem": "meson",
+         "sources": [
+            {
+               "type": "git",
+               "url": "https://gitlab.com/esodan/gtktester",
+               "commit": "6514a150cf065a070151937a965da713ca5007"
+            }
+         ]
+      },
+      {
+         "name": "gsvgtk",
+         "buildsystem": "meson",
+         "sources": [
+            {
+               "type": "git",
+               "url": "https://gitlab.com/albfan/gsvgtk",
+               "branch": "rendering-svg"
+            }
+         ]
+      },
       {
          "name": "libgtkcanvas",
          "buildsystem": "meson",
          "sources": [
             {
                "type": "git",
-               "url": "https://github.com/akiraux/libgtkcanvas"
+               "url": "https://github.com/akiraux/libgtkcanvas",
+               "branch": "wip/albfan/action-buttons"
             }
          ]
       }

demo/Window.vala

@@ -19,21 +19,57 @@
 * Authored by: Felipe Escoto <[email protected]>
 */
 
+Gtk.TreeStore tree_store;
+Gtk.TreeView tree_view;
+GSvg.GsDocument svg;
+GSvgtk.ActorClutter actorSVG;
+
+void show_attribute(GXml.DomElement element, string attr_name, Gtk.TreeIter? parentIter) {
+  Gtk.TreeIter childIter;
+  var value = element.get_attribute(attr_name);
+  if (value != null) {
+  //if (element.has_attribute(attr_name)) {
+    tree_store.append (out childIter, parentIter);
+    tree_store.set (childIter, 0, attr_name, 1, value, 2, element, -1);
+  }
+}
+
+void list_childs(GXml.DomNode node, Gtk.TreeIter? parentIter) {
+
+  foreach (GXml.DomNode child in node.child_nodes) {
+    Gtk.TreeIter? childIter = parentIter;
+    if (child is GXml.DomElement) {
+      tree_store.append (out childIter, parentIter);
+      tree_store.set (childIter, 0, child.node_name, -1);
+
+      var element = child as GXml.DomElement;
+      Gtk.TreeIter attrIter;
+      tree_store.append (out attrIter, childIter);
+      tree_store.set (attrIter, 0, "attributes", -1);
+      //foreach (var entry in element.attributes.entries()) {
+      foreach (var param in element.get_class().list_properties()) {
+        //var key = entry.key;
+        var key = param.get_nick();
+        show_attribute(element, key, attrIter);
+      }
+      show_attribute(element, "style", attrIter);
+      show_attribute(element, "id", attrIter);
+    }
+    list_childs(child, childIter);
+  }
+}
+
 int main (string[] argv) {
     GtkClutter.init (ref argv);
 
     var window = new Gtk.Window ();
     window.title = "GtkCanvas (Gcav) Demo";
 
-    window.resize (1000, 800);
+    window.resize (800, 400);
 
     var canvas = new Gcav.Canvas (600, 400);
-    canvas.add_shape ("rectangle", "blue", 45.0);
-    canvas.add_shape ("rectangle", "red", 30.0);
-    canvas.add_shape ("circle", "green", 0.0);
-#if GSVGTK
-    canvas.add_shape ("svg", "blue", 0.0);
-#endif
+
+    canvas.set_size_request(600, 400);
 
     canvas.clicked.connect ((modifier) => {
         canvas.resizer.visible = false;
@@ -58,7 +94,23 @@ int main (string[] argv) {
     testing_grid.orientation = Gtk.Orientation.VERTICAL;
     testing_grid.row_spacing = 6;
 
-    var new_shape = new Gtk.Button.with_label ("Add Shape");
+    var new_circle = new Gtk.Button.with_label ("Add Circle");
+    new_circle.clicked.connect (() => {
+        var actor = canvas.add_shape ("circle", "green", 0.0);
+
+        // Example on how you can add an animation
+        actor.set_pivot_point (0.5f, 0.5f);
+        actor.set_scale (0.01f, 0.01f);
+        actor.opacity = 0;
+
+        actor.save_easing_state ();
+        actor.set_easing_mode (Clutter.AnimationMode.EASE_OUT_EXPO);
+        actor.set_easing_duration (200);
+        actor.set_scale (1.0f, 1.0f);
+        actor.opacity = 255U;
+        actor.restore_easing_state ();
+    });
+    var new_shape = new Gtk.Button.with_label ("Add Rectangle");
     new_shape.clicked.connect (() => {
         var actor = canvas.add_shape ("rectangle", "red", 0.0);
 
@@ -75,23 +127,88 @@ int main (string[] argv) {
         actor.restore_easing_state ();
     });
 
+    var new_svg = new Gtk.Button.with_label ("Add SVG");
+    new_svg.clicked.connect (() => {
+        Gtk.FileChooserDialog chooser = new Gtk.FileChooserDialog (
+            "Select a SVG file", window, Gtk.FileChooserAction.OPEN,
+            "_Cancel",
+            Gtk.ResponseType.CANCEL,
+            "_Open",
+            Gtk.ResponseType.ACCEPT);
+        chooser.set_select_multiple (false);
+        var filter = new Gtk.FileFilter();
+        filter.add_pattern("*.svg");
+        filter.set_filter_name("SVG files");
+        chooser.add_filter(filter);
+        chooser.run ();
+        chooser.close ();
+
+        if (chooser.get_file () != null) {
+          var file_choosed = chooser.get_file();
+          try {
+            svg = new GSvg.GsDocument ();
+            svg.read_from_file (file_choosed);
+            list_childs(svg, null);
+            tree_view.expand_all();
+            actorSVG = canvas.add_shape ("svg", "red", 0.0) as GSvgtk.ActorClutter;
+            actorSVG.svg = svg;
+            // Example on how you can add an animation
+            actorSVG.set_pivot_point (0.5f, 0.5f);
+            actorSVG.set_scale (0.01f, 0.01f);
+            actorSVG.opacity = 0;
+
+            actorSVG.save_easing_state ();
+            actorSVG.set_easing_mode (Clutter.AnimationMode.EASE_OUT_EXPO);
+            actorSVG.set_easing_duration (200);
+            actorSVG.set_scale (1.0f, 1.0f);
+            actorSVG.opacity = 255U;
+            actorSVG.restore_easing_state ();
+          } catch( Error e) {
+          }
+        }
+    });
     testing_grid.add (canvas_label);
     testing_grid.add (width);
     testing_grid.add (height);
     testing_grid.add (new_shape);
+    testing_grid.add (new_circle);
+    testing_grid.add (new_svg);
+    tree_view = new Gtk.TreeView();
+    tree_view.expand = true;
+    tree_store = new Gtk.TreeStore(3, typeof(string), typeof(string), typeof(GXml.DomElement));
+    tree_view.set_model(tree_store);
+    tree_view.insert_column_with_attributes(-1, "Type", new Gtk.CellRendererText(), "text", 0, null);
+    var renderer = new Gtk.CellRendererText();
+    renderer.editable = true;
+    renderer.edited.connect ((path, new_text) => {
+      Gtk.TreeIter iter;
+      if (tree_store.get_iter_from_string (out iter, path)) {
+         Value value;
+         tree_store.get_value(iter, 2, out value);
+         GXml.DomElement element = value.get_object() as GXml.DomElement;
+         tree_store.get_value(iter, 0, out value);
+         var attr_name = value.get_string();
+         try {
+           element.set_attribute(attr_name, new_text);
+         } catch (Error e) {
+         }
+         tree_store.set_value(iter, 1, new_text);
+
+         actorSVG.svg = svg;
+      }
+    });
+    tree_view.insert_column_with_attributes(-1, "Name", renderer, "text", 1, null);
+    var scroll = new Gtk.ScrolledWindow (null, null);
+    scroll.set_policy (Gtk.PolicyType.AUTOMATIC, Gtk.PolicyType.AUTOMATIC);
+    scroll.add (tree_view);
+    testing_grid.add (scroll);
 
-    var main_grid = new Gtk.Grid ();
-    main_grid.margin = 6;
-    main_grid.column_spacing = 6;
-    main_grid.orientation = Gtk.Orientation.HORIZONTAL;
-
-    var separator = new Gtk.Separator (Gtk.Orientation.VERTICAL);
+    var paned = new Gtk.Paned (Gtk.Orientation.HORIZONTAL);
 
-    main_grid.add (canvas);
-    main_grid.add (separator);
-    main_grid.add (testing_grid);
+    paned.add1(canvas);
+    paned.add2(testing_grid);
 
-    window.add (main_grid);
+    window.add (paned);
 
     window.destroy.connect (Gtk.main_quit);
     window.show_all ();

docs/meson.build

@@ -5,7 +5,7 @@ pkgs = [
 	'--pkg=clutter-gtk-1.0'
 ]
 if svgdep.found ()
-	pkgs += ['--pkg=gsvgtk-0.6']
+	pkgs += ['--pkg=gsvgtk-0.8']
 endif
 
 valadoc = find_program ('valadoc', required: false)

meson.build

@@ -14,10 +14,11 @@ deps = ([dependency('gtk+-3.0', version:'>=3.18'),
         dependency('clutter-gtk-1.0', version:'>=1.6'),
         dependency('granite', version:'>=0.3'),
         dependency('cairo', version:'>=1.14'),
+        dependency('gee-0.8'),
         m_dep
 ])
 
-svgdep = dependency('gsvgtk-0.6', version:'>=0.5.0', required: false)
+svgdep = dependency('gsvgtk-0.8', version:'>=0.6.3', required: false)
 
 
 inc_rooth = include_directories ('.')

readme.md

@@ -14,7 +14,7 @@ It is meant to contain the basic elements such as a basic container class, move,
 
 #### For SVG support
 
-- gsvgtk-0.6
+- gsvgtk-0.8
 - librsvg-2.0
 - gsvg-0.4
 - gxml-0.16

src/Utils/HoverEffect.vala

@@ -35,7 +35,7 @@ internal class Gcav.HoverEffect : Clutter.Effect {
 
     public override void paint (Clutter.EffectPaintFlags flags)    {
         var bounding_box = get_bounding_box ();
-        var color = Cogl.Color.from_4ub (65, 201, 253, 255);
+        var color = Cogl.Color.from_4ub (65, 201, 253, 55);
 
         material.set_color (color);
 

src/Widgets/Shapes/GSVGtkShapeImage.vala

@@ -26,7 +26,7 @@
  */
 using GSvg;
 using Rsvg;
-public class Gcav.GSvgtkShapeImage : GSvgtk.ActorImage, Gcav.Item {
+public class Gcav.GSvgtkShapeImage : GSvgtk.ActorImageClutter, Gcav.Item {
     private MoveAction move_action;
     private HoverAction hover_action;
 
@@ -127,6 +127,6 @@ public class Gcav.GSvgtkShapeImage : GSvgtk.ActorImage, Gcav.Item {
     }
 
     public GSvgtkShapeImage () {
-        set_rectangle (0, 0, 100, 100);
+        set_rectangle (0, 0, 300, 300);
     }
 }