From c390ddff8479b02be4c64950902a438fabd4b7e7 Mon Sep 17 00:00:00 2001 From: Alberto Fanjul Date: Tue, 22 Jan 2019 07:58:43 +0100 Subject: [PATCH 1/6] Update project dependencies --- com.github.akiraux.libgtkcanvas.json | 61 +++++++++++++++++++++++- docs/meson.build | 2 +- meson.build | 3 +- readme.md | 2 +- src/Widgets/Shapes/GSVGtkShapeImage.vala | 2 +- 5 files changed, 64 insertions(+), 6 deletions(-) diff --git a/com.github.akiraux.libgtkcanvas.json b/com.github.akiraux.libgtkcanvas.json index 6dca62b..e71a66d 100644 --- a/com.github.akiraux.libgtkcanvas.json +++ b/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/albfan/libgtkcanvas", + "branch": "wip/albfan/action-buttons" } ] } diff --git a/docs/meson.build b/docs/meson.build index 9d1c26d..9d5679f 100644 --- a/docs/meson.build +++ b/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) diff --git a/meson.build b/meson.build index 84bf191..4a26553 100644 --- a/meson.build +++ b/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 ('.') diff --git a/readme.md b/readme.md index 66bf7aa..df620c4 100644 --- a/readme.md +++ b/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 diff --git a/src/Widgets/Shapes/GSVGtkShapeImage.vala b/src/Widgets/Shapes/GSVGtkShapeImage.vala index 846eb62..e2d6007 100644 --- a/src/Widgets/Shapes/GSVGtkShapeImage.vala +++ b/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; From accd6f42f0b8a5903b78284c0370a653924b39f7 Mon Sep 17 00:00:00 2001 From: Alberto Fanjul Date: Mon, 21 Jan 2019 08:54:18 +0100 Subject: [PATCH 2/6] Add shapes through buttons --- demo/Window.vala | 62 ++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 55 insertions(+), 7 deletions(-) diff --git a/demo/Window.vala b/demo/Window.vala index 46143ec..ff42561 100644 --- a/demo/Window.vala +++ b/demo/Window.vala @@ -28,12 +28,6 @@ int main (string[] argv) { window.resize (1000, 800); 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.clicked.connect ((modifier) => { canvas.resizer.visible = false; @@ -58,7 +52,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,10 +85,48 @@ 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) { + string contents; + var file_choosed = chooser.get_file(); + GLib.FileUtils.get_contents(file_choosed.get_path(), out contents, null); + var actor = canvas.add_shape ("svg", "red", 0.0); + (actor as GSvgtk.ActorClutter).set_svg_string(contents); + // 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 (); + } + + }); 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); var main_grid = new Gtk.Grid (); main_grid.margin = 6; From 5da58cc5253a5bb6ae93be00cbd71d4285d5e88a Mon Sep 17 00:00:00 2001 From: Alberto Fanjul Date: Wed, 30 Jan 2019 22:14:53 +0100 Subject: [PATCH 3/6] transparency for selected item --- src/Utils/HoverEffect.vala | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Utils/HoverEffect.vala b/src/Utils/HoverEffect.vala index db5f021..7bc47f8 100644 --- a/src/Utils/HoverEffect.vala +++ b/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); From 9268d4409882f3687a3af58839138fe15240e3ea Mon Sep 17 00:00:00 2001 From: Alberto Fanjul Date: Wed, 30 Jan 2019 22:15:10 +0100 Subject: [PATCH 4/6] bigger size for svg --- src/Widgets/Shapes/GSVGtkShapeImage.vala | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Widgets/Shapes/GSVGtkShapeImage.vala b/src/Widgets/Shapes/GSVGtkShapeImage.vala index e2d6007..b03c8fe 100644 --- a/src/Widgets/Shapes/GSVGtkShapeImage.vala +++ b/src/Widgets/Shapes/GSVGtkShapeImage.vala @@ -127,6 +127,6 @@ public class Gcav.GSvgtkShapeImage : GSvgtk.ActorImageClutter, Gcav.Item { } public GSvgtkShapeImage () { - set_rectangle (0, 0, 100, 100); + set_rectangle (0, 0, 300, 300); } } From 9e1fd6551cfa805eabf3249d2c152601326a4891 Mon Sep 17 00:00:00 2001 From: Alberto Fanjul Date: Wed, 30 Jan 2019 22:14:32 +0100 Subject: [PATCH 5/6] Add treeview to edit properties --- com.github.akiraux.libgtkcanvas.json | 2 +- demo/Window.vala | 121 +++++++++++++++++++++------ 2 files changed, 96 insertions(+), 27 deletions(-) diff --git a/com.github.akiraux.libgtkcanvas.json b/com.github.akiraux.libgtkcanvas.json index e71a66d..c8cbd96 100644 --- a/com.github.akiraux.libgtkcanvas.json +++ b/com.github.akiraux.libgtkcanvas.json @@ -83,7 +83,7 @@ "sources": [ { "type": "git", - "url": "https://github.com/albfan/libgtkcanvas", + "url": "https://github.com/akiraux/libgtkcanvas", "branch": "wip/albfan/action-buttons" } ] diff --git a/demo/Window.vala b/demo/Window.vala index ff42561..58eb595 100644 --- a/demo/Window.vala +++ b/demo/Window.vala @@ -19,6 +19,46 @@ * Authored by: Felipe Escoto */ +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); @@ -29,6 +69,8 @@ int main (string[] argv) { var canvas = new Gcav.Canvas (600, 400); + canvas.set_size_request(600, 400); + canvas.clicked.connect ((modifier) => { canvas.resizer.visible = false; }); @@ -102,24 +144,28 @@ int main (string[] argv) { chooser.close (); if (chooser.get_file () != null) { - string contents; var file_choosed = chooser.get_file(); - GLib.FileUtils.get_contents(file_choosed.get_path(), out contents, null); - var actor = canvas.add_shape ("svg", "red", 0.0); - (actor as GSvgtk.ActorClutter).set_svg_string(contents); - // 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 (); + 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); @@ -127,19 +173,42 @@ int main (string[] argv) { 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 (); From 76d211a269921a77a0aeffa024517bf089cbc84f Mon Sep 17 00:00:00 2001 From: Alberto Fanjul Date: Tue, 12 Feb 2019 01:59:40 +0100 Subject: [PATCH 6/6] Resize window --- demo/Window.vala | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo/Window.vala b/demo/Window.vala index 58eb595..bc6aee2 100644 --- a/demo/Window.vala +++ b/demo/Window.vala @@ -65,7 +65,7 @@ int main (string[] 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);