Complete rewrite

data/css/flow.css

@@ -15,6 +15,7 @@ node:selected {
 node #title-container {
     border-radius: 12px 12px 0px 0px;
     padding: 10px;
+    font-weight: bold;
 }
 
 node #title-container.shadow {
@@ -28,13 +29,11 @@ node #title-container.separator {
 
 node #socket-container {
     padding: 10px;
-    padding-top: 5px;
-    padding-bottom: 5px;
-    border-spacing: 5px;
+    border-spacing: 15px;
 }
 
 node #sink-container, #source-container {
-    border-spacing: 5px;
+    border-spacing: 10px;
 }
 
 node #content {

data/meson.build

@@ -1,32 +1,14 @@
-blueprints = files(
-    'ui/node.blp',
-    'ui/node-view.blp',
-)
-
-blp_target = custom_target(
-    'blueprints',
-
-    input: blueprints,
-    output: '.',
-    command: [ find_program('blueprint-compiler'), 'batch-compile', '@OUTPUT@', '@CURRENT_SOURCE_DIR@', '@INPUT@' ],
-)
+subdir('ui')
 
 lib_resources = gnome.compile_resources(
-    'libflow-resources',
-    'libflow.gresource.xml',
-    dependencies: blp_target
-)
+    'resources',
+    'gresource.xml',
+    source_dir: meson.current_build_dir(),
+    dependencies: custom_target(
+        'blueprints',
 
-if get_option('buildtype') == 'debug'
-    # Don't do it in debug mode to make VLS works
-    compiler_dependency = []
-else
-    # Creates empty vala file to fix build order issue with blueprints
-    compiler_dependency = custom_target(
-        'compiler_dependency',
-
-        depends: lib_resources,
-        output: 'dependency.vala',
-        command: [ find_program('touch'), '@OUTPUT@' ]
+        input: blueprints,
+        output: '.',
+        command: [ find_program('blueprint-compiler'), 'batch-compile', '@OUTPUT@', '@CURRENT_SOURCE_DIR@', '@INPUT@' ],
     )
-endif
+)

data/ui/meson.build

@@ -0,0 +1,4 @@
+blueprints = files(
+    'node.blp',
+    'node-view.blp',
+)

data/ui/node-view.blp

@@ -1,15 +1,34 @@
 using Gtk 4.0;
 
 template $FlowNodeView : Widget {
+    overflow: hidden;
 
-    GestureDrag drag {
-        drag-begin => $start_drag();
-        drag-update => $process_drag();
-        drag-end => $stop_drag();
+    // Start section drag
+    GestureDrag gesture_drag {
+        drag-begin => $on_drag_begin();
+        drag-update => $on_drag_update();
+        drag-end => $on_drag_end();
     }
+    // End section drag
 
-    GestureClick secondary_click {
-        button: 3;
-        pressed => $open_menu();
+    // Start section input
+    EventControllerScroll gesture_scroll {
+        flags: both_axes;
+
+        scroll => $on_scroll();
     }
+
+    GestureDrag {
+        button: 2;
+
+        drag-begin => $on_pan_begin();
+        drag-update => $on_pan_update();
+        drag-end => $on_pan_end();
+    }
+
+    GestureZoom gesture_zoom {
+        begin => $on_zoom_begin();
+        scale-changed => $on_zoom_changed();
+    }
+    // End section input
 }

data/ui/node.blp

@@ -1,6 +1,7 @@
 using Gtk 4.0;
 
-template $FlowNode : $FlowNodeRenderer {
+template $FlowNode : $FlowNodeViewChild {
+    title: bind title_label.label bidirectional;
 
     Box main_box {
         name: "node-container";
@@ -9,6 +10,10 @@ template $FlowNode : $FlowNodeRenderer {
         Box title_box {
             name: "title-container";
             orientation: vertical;
+
+            Label title_label {
+                halign: start;
+            }
         }
 
         Box socket_box {
@@ -39,10 +44,6 @@ template $FlowNode : $FlowNodeRenderer {
         menu-model: delete_menu;
     }
 
-    GestureDrag drag {
-        drag-begin => $begin_drag();
-    }
-
     GestureClick secondary_click {
         button: 3;
         pressed => $open_menu();

example/main.vala

@@ -3,14 +3,12 @@ public class NumberGeneratorNode : Flow.Node {
     public NumberGeneratorNode() {
         add_css_class("green");
         title_style = Flow.TitleStyle.SEPARATOR;
-        set_label_name("NumberGenerator", Gtk.Align.START);
-        highlight_color = { 0.20F, 0.82F, 0.48F, 0.3F };
+        title = "NumberGenerator";
 
         var number_source = new Flow.Source.with_type(Type.DOUBLE) {
             color = { 1, 1, 0, 1 },
             name = "output"
         };
-        number_source.set_value(0d);
         add_source(number_source);
 
         var spin_button = new Gtk.SpinButton(new Gtk.Adjustment(0, 0, 100, 1, 10, 0), 0, 0);
@@ -33,8 +31,7 @@ public class OperationNode : Flow.Node {
     public OperationNode() {
         add_css_class("yellow");
         title_style = Flow.TitleStyle.SEPARATOR;
-        set_label_name("Operation", Gtk.Align.START);
-        highlight_color = { 0.96F, 0.83F, 0.18F, 0.3F };
+        title = "Operation";
 
         result = new Flow.Source.with_type(Type.DOUBLE) {
             color = { 1, 0, 1, 1 },
@@ -102,8 +99,7 @@ public class PrintNode : Flow.Node {
     public PrintNode() {
         add_css_class("blue");
         title_style = Flow.TitleStyle.SEPARATOR;
-        set_label_name("Output", Gtk.Align.START);
-        highlight_color = { 0.21F, 0.52F, 0.89F, 0.3f };
+        title = "Output";
 
         var number = new Flow.Sink.with_type(Type.DOUBLE) {
             color = { 0, 0, 1, 1 },
@@ -148,11 +144,31 @@ public class AdvancedCalculatorWindow : Gtk.ApplicationWindow {
     }
 
     private void init_header_bar() {
-        set_titlebar(new Gtk.HeaderBar() {
+        Gtk.HeaderBar header;
+        set_titlebar(header = new Gtk.HeaderBar() {
             title_widget = new Gtk.Label("<b>libflow Example</b>") {
                 use_markup = true
             }
         });
+
+        Gtk.Button btn;
+        header.pack_start(btn = new Gtk.Button.with_label("Number"));
+        btn.clicked.connect(() => {
+            var node = new NumberGeneratorNode();
+            node.set_parent(node_view);
+        });
+
+        header.pack_start(btn = new Gtk.Button.with_label("Operation"));
+        btn.clicked.connect(() => {
+            var node = new OperationNode();
+            node.set_parent(node_view);
+        });
+
+        header.pack_start(btn = new Gtk.Button.with_label("Output"));
+        btn.clicked.connect(() => {
+            var node = new PrintNode();
+            node.set_parent(node_view);
+        });
     }
 
     private void init_window_layout() {
@@ -163,18 +179,17 @@ public class AdvancedCalculatorWindow : Gtk.ApplicationWindow {
                 child = this.node_view = new Flow.NodeView()
             }
         });
-        
+
         overlay.add_overlay(new Flow.Minimap() {
-            halign = Gtk.Align.END,
             valign = Gtk.Align.END,
-            nodeview = node_view,
-            can_target = false
+            halign = Gtk.Align.END,
+            node_view = node_view
         });
     }
 
     private void init_actions() {
         menu_content = new Gtk.Box(Gtk.Orientation.VERTICAL, 10);
-        node_view.menu_content = menu_content;
+        //node_view.menu_content = menu_content;
 
         add_number_node_action();
         add_operation_node_action();
@@ -237,6 +252,8 @@ int main(string[] argv) {
         "com.example.GtkApplication",
         ApplicationFlags.FLAGS_NONE
     );
+
+    Flow.init();
 
     app.activate.connect(() => new AdvancedCalculatorWindow(app).present());
 

example/meson.build

@@ -1,8 +1,7 @@
 executable(
     'libflow-sample',
-    
+
     files('main.vala'),
-    vala_args: '--target-glib=2.58',
     dependencies: [
         dependency('gtk4'),
         lib_dependency

meson.build

@@ -1,21 +1,23 @@
 project(
     'libflow',
-    
+
     [ 'c', 'vala' ],
     version: '1.0.0',
     meson_version: '>= 0.50.0',
 )
 
-pkg = import('pkgconfig')
-gnome = import('gnome')
-
+name = 'flow'
+version = meson.project_version()
 api_version = '1.0'
-lib_name = meson.project_name() + '-' + api_version
+lib_name = name + '-' + api_version
 gir_name = 'Flow-' + api_version
 
+add_project_arguments('--enable-experimental', language: 'vala')
+
+pkg = import('pkgconfig')
+gnome = import('gnome')
+
 subdir('data')
 subdir('src')
-
 subdir('tests')
-
 subdir('example')

src/main.vala

@@ -0,0 +1,23 @@
+namespace Flow {
+    private static bool done = false;
+
+    public void init() {
+        if (!done) {
+            init_public_types();
+
+            var display = Gdk.Display.get_default();
+            if (display != null) {
+                var provider = new Gtk.CssProvider();
+                provider.load_from_resource("/me/paladin/libflow/css/flow.css");
+                Gtk.StyleContext.add_provider_for_display(display, provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
+            }
+
+            done = true;
+        }
+    }
+
+    private void init_public_types() {
+        typeof(NodeView).ensure();
+        typeof(Node).ensure();
+    }
+}

src/meson.build

@@ -3,57 +3,55 @@ lib_deps = [
 ]
 
 lib_sources = files(
-    'css-loader.vala',
+    'main.vala',
     'minimap.vala',
     'node.vala',
     'node-view.vala',
+    'node-view-child.vala',
     'rubberband.vala',
     'sink.vala',
     'socket.vala',
     'source.vala',
     'title-style.vala',
-
-    'renderers/connection-renderer.vala',
-    'renderers/socket-renderer.vala',
 )
 
+subdir('node-view')
+
 install_data(
     'deps.in',
-    
+
     rename: lib_name + '.deps',
     install_dir: get_option('datadir') / 'vala' / 'vapi'
 )
 
 lib = library(
     lib_name,
-
-    compiler_dependency, # Required to build blueprints first
+
     lib_resources,
     lib_sources,
     dependencies: lib_deps,
     vala_gir: gir_name + '.gir',
-    vala_args: [ '--gresourcesdir=data/' ],
     install: true,
-    install_dir: [true, true, true, true]
+    install_dir: [ true, true, true, true ]
 )
 
 pkg.generate(
-    name: meson.project_name(),
+    name: name,
     description: 'Flow Graph library for Gtk4',
-    
+
     libraries: lib,
-    version: meson.project_version(),
+    version: version,
     subdirs: lib_name,
     filebase: lib_name,
-    requires: ['gtk4']
+    requires: [ 'gtk4' ]
 )
 
 custom_target(
     'typelib',
-    
+
     command: [
         find_program('g-ir-compiler'),
-        
+
         '--shared-library=' + lib.full_path().split('/')[-1],
         '--output=@OUTPUT@',
         meson.current_build_dir() / (gir_name + '.gir')