graph: Redesign nodes and ports

Nodes now have a background using the libadwaita .card style class.

Ports now have a circular handle, which is positioned on the edge of the node so that half of the circle sticks out.
Ports are also no longer themed like a button and don't receive a color based on the guessed media type, in a future commit,
the handle will be colored instead.

src/style.css

@@ -37,4 +37,14 @@
 
 graphview {
     background-color: @view_bg_color;
-}
+}
+
+port {
+    padding-top: 3px;
+    padding-bottom: 3px;
+}
+
+port-handle {
+    border-radius: 50%;
+    background-color: @media-type-unknown;
+}

src/ui/graph/graph_view.rs

@@ -223,8 +223,6 @@ mod imp {
             let widget = &*self.obj();
             let alloc = widget.allocation();
 
-            // self.snapshot_background(widget, snapshot);
-
             // Draw all visible children
             self.nodes
                 .borrow()
@@ -538,7 +536,7 @@ mod imp {
             });
             let other_anchor = picked_port_anchor.unwrap_or(drag_cursor);
 
-            let (output_anchor, input_anchor) = match port.direction() {
+            let (output_anchor, input_anchor) = match Direction::from_raw(port.direction()) {
                 Direction::Output => (&port_anchor, &other_anchor),
                 Direction::Input => (&other_anchor, &port_anchor),
                 _ => unreachable!(),

src/ui/graph/mod.rs

@@ -20,6 +20,8 @@ mod node;
 pub use node::*;
 mod port;
 pub use port::*;
+mod port_handle;
+pub use port_handle::*;
 mod link;
 pub use link::*;
 mod zoomentry;

src/ui/graph/node.rs

@@ -27,12 +27,12 @@ mod imp {
         collections::HashSet,
     };
 
-    #[derive(glib::Properties)]
+    #[derive(glib::Properties, gtk::CompositeTemplate, Default)]
     #[properties(wrapper_type = super::Node)]
+    #[template(file = "node.ui")]
     pub struct Node {
         #[property(get, set, construct_only)]
         pub(super) pipewire_id: Cell<u32>,
-        pub(super) grid: gtk::Grid,
         #[property(
             name = "name", type = String,
             get = |this: &Self| this.label.text().to_string(),
@@ -41,7 +41,10 @@ mod imp {
                 this.label.set_tooltip_text(Some(val));
             }
         )]
-        pub(super) label: gtk::Label,
+        #[template_child]
+        pub(super) label: TemplateChild<gtk::Label>,
+        #[template_child]
+        pub(super) port_grid: TemplateChild<gtk::Grid>,
         pub(super) ports: RefCell<HashSet<Port>>,
         pub(super) num_ports_in: Cell<i32>,
         pub(super) num_ports_out: Cell<i32>,
@@ -54,31 +57,13 @@ mod imp {
         type ParentType = gtk::Widget;
 
         fn class_init(klass: &mut Self::Class) {
-            klass.set_layout_manager_type::<gtk::BinLayout>();
+            klass.set_layout_manager_type::<gtk::BoxLayout>();
+
+            klass.bind_template();
         }
 
-        fn new() -> Self {
+        fn instance_init(obj: &glib::subclass::InitializingObject<Self>) {
-            let grid = gtk::Grid::new();
+            obj.init_template();
-
-            let label = gtk::Label::new(None);
-            label.set_wrap(true);
-            label.set_lines(2);
-            label.set_max_width_chars(20);
-            label.set_ellipsize(gtk::pango::EllipsizeMode::End);
-
-            grid.attach(&label, 0, 0, 2, 1);
-
-            // Display a grab cursor when the mouse is over the label so the user knows the node can be dragged.
-            label.set_cursor(gtk::gdk::Cursor::from_name("grab", None).as_ref());
-
-            Self {
-                pipewire_id: Cell::new(0),
-                grid,
-                label,
-                ports: RefCell::new(HashSet::new()),
-                num_ports_in: Cell::new(0),
-                num_ports_out: Cell::new(0),
-            }
         }
     }
 
@@ -86,11 +71,16 @@ mod imp {
     impl ObjectImpl for Node {
         fn constructed(&self) {
             self.parent_constructed();
-            self.grid.set_parent(&*self.obj());
+
+            // Display a grab cursor when the mouse is over the label so the user knows the node can be dragged.
+            self.label
+                .set_cursor(gtk::gdk::Cursor::from_name("grab", None).as_ref());
         }
 
         fn dispose(&self) {
-            self.grid.unparent();
+            if let Some(child) = self.obj().first_child() {
+                child.unparent();
+            }
         }
     }
 
@@ -113,13 +103,15 @@ impl Node {
     pub fn add_port(&self, port: Port) {
         let imp = self.imp();
 
-        match port.direction() {
+        match Direction::from_raw(port.direction()) {
             Direction::Input => {
-                imp.grid.attach(&port, 0, imp.num_ports_in.get() + 1, 1, 1);
+                imp.port_grid
+                    .attach(&port, 0, imp.num_ports_in.get() + 1, 1, 1);
                 imp.num_ports_in.set(imp.num_ports_in.get() + 1);
             }
             Direction::Output => {
-                imp.grid.attach(&port, 1, imp.num_ports_out.get() + 1, 1, 1);
+                imp.port_grid
+                    .attach(&port, 1, imp.num_ports_out.get() + 1, 1, 1);
                 imp.num_ports_out.set(imp.num_ports_out.get() + 1);
             }
             _ => unreachable!(),
@@ -131,7 +123,7 @@ impl Node {
     pub fn remove_port(&self, port: &Port) {
         let imp = self.imp();
         if imp.ports.borrow_mut().remove(port) {
-            match port.direction() {
+            match Direction::from_raw(port.direction()) {
                 Direction::Input => imp.num_ports_in.set(imp.num_ports_in.get() - 1),
                 Direction::Output => imp.num_ports_in.set(imp.num_ports_out.get() - 1),
                 _ => unreachable!(),

src/ui/graph/node.ui

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <template class="HelvumNode" parent="GtkWidget">
+    <style>
+      <class name="card"></class>
+    </style>>
+    <child>
+      <object class="GtkBox">
+        <property name="orientation">vertical</property>
+        <child>
+          <object class="GtkLabel" id="label">
+            <style>
+              <class name="heading"></class>
+            </style>
+            <property name="wrap">true</property>
+            <property name="ellipsize">PANGO_ELLIPSIZE_END</property>
+            <property name="lines">2</property>
+            <property name="max-width-chars">20</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkSeparator"></object>
+        </child>
+        <child>
+          <object class="GtkGrid" id="port_grid">
+            <property name="column-spacing">10</property>
+          </object>
+        </child>
+      </object>
+    </child>
+  </template>
+</interface>
+

src/ui/graph/port.rs

@@ -23,6 +23,8 @@ use adw::{
 };
 use pipewire::spa::Direction;
 
+use super::PortHandle;
+
 mod imp {
     use super::*;
 
@@ -32,8 +34,9 @@ mod imp {
     use pipewire::spa::{format::MediaType, Direction};
 
     /// Graphical representation of a pipewire port.
-    #[derive(glib::Properties)]
+    #[derive(gtk::CompositeTemplate, glib::Properties)]
     #[properties(wrapper_type = super::Port)]
+    #[template(file = "port.ui")]
     pub struct Port {
         #[property(get, set, construct_only)]
         pub(super) pipewire_id: OnceCell<u32>,
@@ -43,6 +46,13 @@ mod imp {
             set = Self::set_media_type
         )]
         pub(super) media_type: Cell<MediaType>,
+        #[property(
+            type = u32,
+            get = |_| self.direction.get().as_raw(),
+            set = Self::set_direction,
+            construct_only
+        )]
+        pub(super) direction: Cell<Direction>,
         #[property(
             name = "name", type = String,
             get = |this: &Self| this.label.text().to_string(),
@@ -51,8 +61,10 @@ mod imp {
                 this.label.set_tooltip_text(Some(val));
             }
         )]
-        pub(super) label: gtk::Label,
+        #[template_child]
-        pub(super) direction: OnceCell<Direction>,
+        pub(super) label: TemplateChild<gtk::Label>,
+        #[template_child]
+        pub(super) handle: TemplateChild<PortHandle>,
     }
 
     impl Default for Port {
@@ -60,8 +72,9 @@ mod imp {
             Self {
                 pipewire_id: OnceCell::default(),
                 media_type: Cell::new(MediaType::Unknown),
-                label: gtk::Label::default(),
+                direction: Cell::new(Direction::Output),
-                direction: OnceCell::default(),
+                label: TemplateChild::default(),
+                handle: TemplateChild::default(),
             }
         }
     }
@@ -73,10 +86,13 @@ mod imp {
         type ParentType = gtk::Widget;
 
         fn class_init(klass: &mut Self::Class) {
-            klass.set_layout_manager_type::<gtk::BinLayout>();
+            klass.set_css_name("port");
 
-            // Make it look like a GTK button.
+            klass.bind_template();
-            klass.set_css_name("button");
+        }
+
+        fn instance_init(obj: &glib::subclass::InitializingObject<Self>) {
+            obj.init_template();
         }
     }
 
@@ -85,19 +101,13 @@ mod imp {
         fn constructed(&self) {
             self.parent_constructed();
 
-            self.label.set_parent(&*self.obj());
+            // Display a grab cursor when the mouse is over the port so the user knows it can be dragged to another port.
-            self.label.set_wrap(true);
+            self.obj()
-            self.label.set_lines(2);
+                .set_cursor(gtk::gdk::Cursor::from_name("grab", None).as_ref());
-            self.label.set_max_width_chars(20);
-            self.label.set_ellipsize(gtk::pango::EllipsizeMode::End);
 
             self.setup_port_drag_and_drop();
         }
 
-        fn dispose(&self) {
-            self.label.unparent()
-        }
-
         fn signals() -> &'static [Signal] {
             static SIGNALS: Lazy<Vec<Signal>> = Lazy::new(|| {
                 vec![Signal::builder("port-toggled")
@@ -109,7 +119,81 @@ mod imp {
             SIGNALS.as_ref()
         }
     }
-    impl WidgetImpl for Port {}
+
+    impl WidgetImpl for Port {
+        fn measure(&self, orientation: gtk::Orientation, for_size: i32) -> (i32, i32, i32, i32) {
+            match orientation {
+                gtk::Orientation::Horizontal => {
+                    let (min_handle_width, nat_handle_width, _, _) =
+                        self.handle.measure(orientation, for_size);
+                    let (min_label_width, nat_label_width, _, _) = self
+                        .label
+                        .measure(orientation, i32::max(for_size - (nat_handle_width / 2), -1));
+
+                    (
+                        (min_handle_width / 2) + min_label_width,
+                        (nat_handle_width / 2) + nat_label_width,
+                        -1,
+                        -1,
+                    )
+                }
+                gtk::Orientation::Vertical => {
+                    let (min_label_height, nat_label_height, _, _) =
+                        self.label.measure(orientation, for_size);
+                    let (min_handle_height, nat_handle_height, _, _) =
+                        self.handle.measure(orientation, for_size);
+
+                    (
+                        i32::max(min_label_height, min_handle_height),
+                        i32::max(nat_label_height, nat_handle_height),
+                        -1,
+                        -1,
+                    )
+                }
+                _ => unimplemented!(),
+            }
+        }
+
+        fn size_allocate(&self, width: i32, height: i32, _baseline: i32) {
+            let (_, nat_handle_height, _, _) =
+                self.handle.measure(gtk::Orientation::Vertical, height);
+            let (_, nat_handle_width, _, _) =
+                self.handle.measure(gtk::Orientation::Horizontal, width);
+
+            match Direction::from_raw(self.obj().direction()) {
+                Direction::Input => {
+                    let alloc = gtk::Allocation::new(
+                        -nat_handle_width / 2,
+                        (height - nat_handle_height) / 2,
+                        nat_handle_width,
+                        nat_handle_height,
+                    );
+                    self.handle.size_allocate(&alloc, -1);
+
+                    let alloc = gtk::Allocation::new(
+                        nat_handle_width / 2,
+                        0,
+                        width - (nat_handle_width / 2),
+                        height,
+                    );
+                    self.label.size_allocate(&alloc, -1);
+                }
+                Direction::Output => {
+                    let alloc = gtk::Allocation::new(
+                        width - (nat_handle_width / 2),
+                        (height - nat_handle_height) / 2,
+                        nat_handle_width,
+                        nat_handle_height,
+                    );
+                    self.handle.size_allocate(&alloc, -1);
+
+                    let alloc = gtk::Allocation::new(0, 0, width - (nat_handle_width / 2), height);
+                    self.label.size_allocate(&alloc, -1);
+                }
+                _ => unreachable!(),
+            }
+        }
+    }
 
     impl Port {
         fn setup_port_drag_and_drop(&self) {
@@ -185,7 +269,7 @@ mod imp {
                     return false;
                 }
 
-                let (output_port, input_port) = match port.direction() {
+                let (output_port, input_port) = match Direction::from_raw(port.direction()) {
                     Direction::Output => (&port, &other_port),
                     Direction::Input => (&other_port, &port),
                     _ => unreachable!(),
@@ -200,26 +284,42 @@ mod imp {
             });
             obj.add_controller(drop_target);
         }
-    }
 
-    impl Port {
         fn set_media_type(&self, media_type: u32) {
             let media_type = MediaType::from_raw(media_type);
 
             self.media_type.set(media_type);
 
             for css_class in ["video", "audio", "midi"] {
-                self.obj().remove_css_class(css_class)
+                self.handle.remove_css_class(css_class)
             }
 
             // Color the port according to its media type.
             match media_type {
-                MediaType::Video => self.obj().add_css_class("video"),
+                MediaType::Video => self.handle.add_css_class("video"),
-                MediaType::Audio => self.obj().add_css_class("audio"),
+                MediaType::Audio => self.handle.add_css_class("audio"),
-                MediaType::Application | MediaType::Stream => self.obj().add_css_class("midi"),
+                MediaType::Application | MediaType::Stream => self.handle.add_css_class("midi"),
                 _ => {}
             }
         }
+
+        fn set_direction(&self, direction: u32) {
+            let direction = Direction::from_raw(direction);
+
+            self.direction.set(direction);
+
+            match direction {
+                Direction::Input => {
+                    self.obj().set_halign(gtk::Align::Start);
+                    self.label.set_halign(gtk::Align::Start);
+                }
+                Direction::Output => {
+                    self.obj().set_halign(gtk::Align::End);
+                    self.label.set_halign(gtk::Align::End);
+                }
+                _ => unreachable!(),
+            }
+        }
     }
 }
 
@@ -230,30 +330,11 @@ glib::wrapper! {
 
 impl Port {
     pub fn new(id: u32, name: &str, direction: Direction) -> Self {
-        // Create the widget and initialize needed fields
+        glib::Object::builder()
-        let res: Self = glib::Object::builder()
             .property("pipewire-id", id)
+            .property("direction", direction.as_raw())
             .property("name", name)
-            .build();
+            .build()
-
-        let imp = res.imp();
-
-        imp.direction
-            .set(direction)
-            .expect("Port direction already set");
-
-        // Display a grab cursor when the mouse is over the port so the user knows it can be dragged to another port.
-        res.set_cursor(gtk::gdk::Cursor::from_name("grab", None).as_ref());
-
-        res
-    }
-
-    pub fn direction(&self) -> Direction {
-        *self
-            .imp()
-            .direction
-            .get()
-            .expect("Port direction is not set")
     }
 
     pub fn link_anchor(&self) -> graphene::Point {
@@ -263,8 +344,9 @@ impl Port {
         let padding_left: f32 = style_context.padding().left().into();
         let border_left: f32 = style_context.border().left().into();
 
+        let direction = Direction::from_raw(self.direction());
         graphene::Point::new(
-            match self.direction() {
+            match direction {
                 Direction::Output => self.width() as f32 + padding_right + border_right,
                 Direction::Input => 0.0 - padding_left - border_left,
                 _ => unreachable!(),

src/ui/graph/port.ui

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <template class="HelvumPort" parent="GtkWidget">
+    <property name="hexpand">true</property>
+    <child>
+      <object class="GtkLabel" id="label">
+        <property name="wrap">true</property>
+        <property name="ellipsize">PANGO_ELLIPSIZE_END</property>
+        <property name="lines">2</property>
+        <property name="max-width-chars">20</property>
+      </object>
+    </child>
+    <child>
+      <object class="HelvumPortHandle" id="handle"></object>
+    </child>
+  </template>
+</interface>
+

src/ui/graph/port_handle.rs

@@ -0,0 +1,84 @@
+// Copyright 2021 Tom A. Wagner <tom.a.wagner@protonmail.com>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License version 3 as published by
+// the Free Software Foundation.
+//
+// This program 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 this program.  If not, see <http://www.gnu.org/licenses/>.
+//
+// SPDX-License-Identifier: GPL-3.0-only
+
+use adw::{glib, gtk, prelude::*, subclass::prelude::*};
+
+mod imp {
+    use super::*;
+
+    #[derive(Default)]
+    pub struct PortHandle {}
+
+    #[glib::object_subclass]
+    impl ObjectSubclass for PortHandle {
+        const NAME: &'static str = "HelvumPortHandle";
+        type Type = super::PortHandle;
+        type ParentType = gtk::Widget;
+
+        fn class_init(klass: &mut Self::Class) {
+            klass.set_css_name("port-handle");
+        }
+    }
+
+    impl ObjectImpl for PortHandle {
+        fn constructed(&self) {
+            self.parent_constructed();
+
+            let obj = &*self.obj();
+
+            obj.set_halign(gtk::Align::Center);
+            obj.set_valign(gtk::Align::Center);
+        }
+    }
+
+    impl WidgetImpl for PortHandle {
+        fn request_mode(&self) -> gtk::SizeRequestMode {
+            gtk::SizeRequestMode::ConstantSize
+        }
+
+        fn measure(&self, _orientation: gtk::Orientation, _for_size: i32) -> (i32, i32, i32, i32) {
+            (Self::HANDLE_SIZE, Self::HANDLE_SIZE, -1, -1)
+        }
+    }
+
+    impl PortHandle {
+        pub const HANDLE_SIZE: i32 = 14;
+    }
+}
+
+glib::wrapper! {
+    pub struct PortHandle(ObjectSubclass<imp::PortHandle>)
+        @extends gtk::Widget;
+}
+
+impl PortHandle {
+    pub fn new() -> Self {
+        glib::Object::new()
+    }
+
+    pub fn get_link_anchor(&self) -> gtk::graphene::Point {
+        gtk::graphene::Point::new(
+            imp::PortHandle::HANDLE_SIZE as f32 / 2.0,
+            imp::PortHandle::HANDLE_SIZE as f32 / 2.0,
+        )
+    }
+}
+
+impl Default for PortHandle {
+    fn default() -> Self {
+        Self::new()
+    }
+}