Release v0.4.0

This sets a maximum width of 20 chars on labels on nodes and ports.
Longer labels will wrap to a second line.

For labels longer than two lines, the label is ellipsized at the end.
The full label can still be viewed via hovering for a tooltip.

Co-authored-by: Roger Roger <me@rogerrogert.de>

.gitlab-ci.yml

@@ -10,14 +10,14 @@ stages:
   - extras
 
 variables:
-  FDO_UPSTREAM_REPO: 'ryuukyu/helvum'
+  FDO_UPSTREAM_REPO: 'pipewire/helvum'
 
 # Version and tag for our current container
 .fedora:
   variables:
-    FDO_DISTRIBUTION_VERSION: '35'
+    FDO_DISTRIBUTION_VERSION: '36'
     # Update this to trigger a container rebuild
-    FDO_DISTRIBUTION_TAG: '2021-11-23.0'
+    FDO_DISTRIBUTION_TAG: '2022-11-09.0'
 
 build-fedora-container:
   extends:

Cargo.toml

@@ -1,12 +1,12 @@
 [package]
 name = "helvum"
-version = "0.3.2"
+version = "0.4.0"
 authors = ["Tom A. Wagner <tom.a.wagner@protonmail.com>"]
 edition = "2021"
 rust-version = "1.56"
 license = "GPL-3.0-only"
 description = "A GTK patchbay for pipewire"
-repository = "https://gitlab.freedesktop.org/ryuukyu/helvum"
+repository = "https://gitlab.freedesktop.org/pipewire/helvum"
 readme = "README.md"
 keywords = ["pipewire", "gtk", "patchbay", "gui", "utility"]
 categories = ["gui", "multimedia"]
@@ -14,10 +14,10 @@ categories = ["gui", "multimedia"]
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-pipewire = "0.4"
+pipewire = "0.6"
-gtk = { version = "0.3", package = "gtk4" }
+gtk = { version = "0.6", package = "gtk4" }
+glib = { version = "0.17", features = ["log"] }
 
 log = "0.4.11"
-env_logger = "0.9.0"
 
 once_cell = "1.7.2"

README.md

@@ -2,8 +2,9 @@ Helvum is a GTK-based patchbay for pipewire, inspired by the JACK tool [catia](h
 
 ![Screenshot](docs/screenshot.png)
 
-[![Packaging status](https://repology.org/badge/vertical-allrepos/helvum.svg)](https://repology.org/project/helvum/versions)
+<a href="https://flathub.org/apps/details/org.pipewire.Helvum"><img src="https://flathub.org/assets/badges/flathub-badge-en.png" width="300"/></a>
 
+<a href="https://repology.org/project/helvum/versions"><img src="https://repology.org/badge/vertical-allrepos/helvum.svg" width="300"/></a>
 
 # Features planned
 
@@ -14,9 +15,7 @@ More suggestions are welcome!
 
 # Building
 
-## Via flatpak (recommended)
+## Via flatpak
-The recommended way to build is using flatpak, which will take care of all dependencies and avoid any problems that may come from different system configurations.
-
 If you don't have the flathub repo in your remote-list for flatpak you will need to add that first:
 ```shell
 $ flatpak remote-add --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo
@@ -24,17 +23,17 @@ $ flatpak remote-add --if-not-exists flathub https://flathub.org/repo/flathub.fl
 
 Then install the required flatpak platform and SDK, if you dont have them already:
 ```shell
-$ flatpak install org.gnome.{Platform,Sdk}//41 org.freedesktop.Sdk.Extension.rust-stable//21.08 org.freedesktop.Sdk.Extension.llvm12//21.08
+$ flatpak install org.gnome.{Platform,Sdk}//43 org.freedesktop.Sdk.Extension.rust-stable//22.08 org.freedesktop.Sdk.Extension.llvm14//22.08
 ```
 
-To compile and install as a flatpak, run
+To compile and install as a flatpak, clone the project, change to the project directory, and run:
 ```shell
-$ flatpak-builder --install flatpak-build/ build-aux/org.freedesktop.ryuukyu.Helvum.json
+$ flatpak-builder --install flatpak-build/ build-aux/org.pipewire.Helvum.json
 ```
 
 You can then run the app via
 ```shell
-$ flatpak run org.freedesktop.ryuukyu.Helvum
+$ flatpak run org.pipewire.Helvum
 ```
 
 ## Manually
@@ -56,6 +55,9 @@ $ meson install
 in the repository root.
 This will install the compiled project files into `/usr/local`.
 
-# License
+# License and Credits
 Helvum is distributed under the terms of the GPL3 license.
 See LICENSE for more information.
+
+Parts of the build system were taken from the [gtk-rust-template](https://gitlab.gnome.org/World/Rust/gtk-rust-template) project,
+which is provided under the terms of the [MIT license](https://gitlab.gnome.org/World/Rust/gtk-rust-template/-/blob/master/LICENSE.md).

build-aux/cargo.sh

@@ -1,21 +0,0 @@
-#!/usr/bin/env bash
-
-set -euo pipefail
-
-export MESON_BUILD_ROOT="$1"
-export MESON_SOURCE_ROOT="$2"
-export CARGO_TARGET_DIR="$MESON_BUILD_ROOT"/target
-export CARGO_HOME="$MESON_BUILD_ROOT"/cargo-home
-
-if [[ $4 = "development" ]]
-then
-    echo "DEBUG MODE"
-    cargo build --manifest-path \
-        "$MESON_SOURCE_ROOT/Cargo.toml" && \
-        cp "$CARGO_TARGET_DIR/debug/$5" "$3"
-else
-    echo "RELEASE MODE"
-    cargo build --manifest-path \
-        "$MESON_SOURCE_ROOT/Cargo.toml" --release && \
-        cp "$CARGO_TARGET_DIR/release/$5" "$3"
-fi

build-aux/meson_post_install.py

@@ -1,12 +0,0 @@
-#!/usr/bin/env python3
-
-from os import environ, path
-from subprocess import call
-
-if not environ.get('DESTDIR', ''):
-    PREFIX = environ.get('MESON_INSTALL_PREFIX', '/usr/local')
-    DATA_DIR = path.join(PREFIX, 'share')
-    print('Updating icon cache...')
-    call(['gtk-update-icon-cache', '-qtf', path.join(DATA_DIR, 'icons/hicolor')])
-    print("Updating desktop database...")
-    call(["update-desktop-database", path.join(DATA_DIR, 'applications')])

build-aux/org.pipewire.Helvum.json

@@ -1,11 +1,11 @@
 {
-    "app-id": "org.freedesktop.ryuukyu.Helvum",
+    "app-id": "org.pipewire.Helvum",
     "runtime": "org.gnome.Platform",
-    "runtime-version": "41",
+    "runtime-version": "43",
     "sdk": "org.gnome.Sdk",
     "sdk-extensions": [
         "org.freedesktop.Sdk.Extension.rust-stable",
-        "org.freedesktop.Sdk.Extension.llvm12"
+        "org.freedesktop.Sdk.Extension.llvm14"
     ],
     "command": "helvum",
     "finish-args": [
@@ -16,8 +16,8 @@
         "--filesystem=xdg-run/pipewire-0"
     ],
     "build-options": {
-        "append-path": "/usr/lib/sdk/rust-stable/bin:/usr/lib/sdk/llvm12/bin",
+        "append-path": "/usr/lib/sdk/rust-stable/bin:/usr/lib/sdk/llvm14/bin",
-        "prepend-ld-library-path": "/usr/lib/sdk/llvm12/lib",
+        "prepend-ld-library-path": "/usr/lib/sdk/llvm14/lib",
         "build-args": [
             "--share=network"
         ]

data/icons/org.pipewire.Helvum.Source.svg

@@ -10,7 +10,7 @@
    id="svg11300"
    sodipodi:version="0.32"
    inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
-   sodipodi:docname="org.freedesktop.ryuukyu.Helvum.Source.svg"
+   sodipodi:docname="org.pipewire.Helvum.Source.svg"
    inkscape:output_extension="org.inkscape.output.svg.inkscape"
    version="1.0"
    style="display:inline;enable-background:new"

data/meson.build

@@ -22,3 +22,28 @@ install_data(
   desktop_file,
   install_dir: datadir / 'applications'
 )
+
+
+appdata_conf = configuration_data()
+appdata_conf.set('app-id', base_id)
+appdata_file = configure_file(
+  input: '@0@.metainfo.xml.in'.format(base_id),
+  output: '@BASENAME@',
+  configuration: appdata_conf
+)
+
+# Validate Appdata
+if appstream_util.found()
+  test(
+    'validate-appdata',
+    appstream_util,
+    args: [
+      'validate', '--nonet', appdata_file
+    ],
+  )
+endif
+
+install_data(
+  appdata_file,
+  install_dir: datadir / 'metainfo'
+)

data/org.pipewire.Helvum.metainfo.xml.in

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Copyright 2021 Tom A. Wagner <tom.a.wagner@protonmail.com> -->
+<component type="desktop-application">
+    <id>@app-id@</id>
+    <metadata_license>CC-BY-SA-4.0</metadata_license>
+    <project_license>GPL-3.0-only</project_license>
+    <name>Helvum</name>
+    <summary>Patchbay for PipeWire</summary>
+    <description>
+        <p>
+            Helvum is a graphical patchbay for PipeWire.
+            It allows creating and removing connections between applications and/or devices to reroute
+            flow of audio, video and MIDI data to where it is needed.
+        </p>
+    </description>
+    <screenshots>
+        <screenshot type="default">
+            <image>https://gitlab.freedesktop.org/pipewire/helvum/-/raw/main/docs/screenshot.png</image>
+        </screenshot>
+    </screenshots>
+    <launchable type="desktop-id">@app-id@.desktop</launchable>
+    <url type="homepage">https://gitlab.freedesktop.org/pipewire/helvum</url>
+    <url type="bugtracker">https://gitlab.freedesktop.org/pipewire/helvum/-/issues</url>
+    <content_rating type="oars-1.0" />
+    <releases>
+        <release version="0.4.0" date="2023-02-12" />
+        <release version="0.3.4" date="2022-02-02" />
+        <release version="0.3.3" date="2022-01-28" />
+        <release version="0.3.2" date="2021-11-30" />
+        <release version="0.3.1" date="2021-09-30" />
+        <release version="0.3.0" date="2021-08-08" />
+        <release version="0.2.1" date="2021-06-06" />
+        <release version="0.2.0" date="2021-05-21" />
+        <release version="0.1.0" date="2021-01-12" />
+    </releases>
+    <kudos>
+        <kodu>HiDpiIcon</kodu>
+        <kudo>ModernToolkit</kudo>
+    </kudos>
+    <developer_name>Tom A. Wagner</developer_name>
+    <update_contact>tom.a.wagner@protonmail.com</update_contact>
+</component>

docs/making_a_release.md

@@ -0,0 +1,22 @@
+# Making a release
+
+The following describes the process of making a new release:
+
+1. In `data/org.pipewire.Helvum.metainfo.xml.in`,
+   add a new `<release>` tag to the releases section with the appropriate version and date.
+
+2. In `meson.build` and `Cargo.toml`, bumb the projects version to the new version.
+
+3. Ensure cargo dependencies are up-to-date by running `cargo outdated` (may require running `cargo install cargo-outdated`) and updating outdated dependencies (including the versions specified in `Cargo.lock`).
+
+4. Commit the changes with the a message of the format "Release x.y.z"
+
+5. Add a tag to the release with the new version and a description from describing the changes as a message (run `git tag -a x.y.z`, then write the message)
+
+6. Make a **new** meson build directory and run `meson dist`.
+   Two files should be created in a `meson-dist` subdirectory:
+
+   `helvum-x.y.z.tar.xz` and 
+   `helvum-x.y.z.tar.xz.sha256sum`
+
+7. Push the new commit and tag to upstream, then create a new release on gitlab from the new tag, the description from the tags message formatted as markdown, and also add the two files from step 6 to the description.

meson.build

@@ -1,20 +1,22 @@
 project(
   'helvum',
   'rust',
-  version: '0.3.2',
+  version: '0.4.0',
   license: 'GPL-3.0',
-  meson_version: '>=0.50.0'
+  meson_version: '>=0.59.0'
 )
 
-base_id = 'org.freedesktop.ryuukyu.Helvum'
+gnome = import('gnome')
 
-dependency('glib-2.0', version: '>= 2.48')
+base_id = 'org.pipewire.Helvum'
+
+dependency('glib-2.0', version: '>= 2.66')
 dependency('gtk4',     version: '>= 4.4.0')
 dependency('libpipewire-0.3')
 
 desktop_file_validate = find_program('desktop-file-validate', required: false)
+appstream_util = find_program('appstream-util', required: false)
 cargo = find_program('cargo', required: true)
-cargo_script = find_program('build-aux/cargo.sh')
 
 prefix = get_option('prefix')
 bindir = prefix / get_option('bindir')
@@ -23,16 +25,14 @@ iconsdir = datadir / 'icons'
 
 meson.add_dist_script(
   'build-aux/dist-vendor.sh',
-  meson.build_root() / 'meson-dist' / meson.project_name() + '-' + meson.project_version(),
+  meson.project_build_root() / 'meson-dist' / meson.project_name() + '-' + meson.project_version(),
-  meson.source_root()
+  meson.project_source_root()
-)
-
-cargo_sources = files(
-  'Cargo.toml',
-  'Cargo.lock',
 )
 
 subdir('src')
 subdir('data')
 
-meson.add_install_script('build-aux/meson_post_install.py')
+gnome.post_install(
+  gtk_update_icon_cache: true,
+  update_desktop_database: true,
+)

src/application.rs

@@ -1,11 +1,8 @@
-// application.rs
-//
 // 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 as published by
+// it under the terms of the GNU General Public License version 3 as published by
-// the Free Software Foundation, either version 3 of the License, or
+// the Free Software Foundation.
-// (at your option) any later version.
 //
 // This program is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ -25,7 +22,7 @@ use gtk::{
     prelude::*,
     subclass::prelude::*,
 };
-use log::{info, warn};
+use log::info;
 use pipewire::{channel::Sender, spa::Direction};
 
 use crate::{
@@ -55,11 +52,16 @@ mod imp {
 
     impl ObjectImpl for Application {}
     impl ApplicationImpl for Application {
-        fn activate(&self, app: &Self::Type) {
+        fn activate(&self) {
-            let scrollwindow = gtk::ScrolledWindowBuilder::new()
+            let app = &*self.obj();
+            let scrollwindow = gtk::ScrolledWindow::builder()
                 .child(&self.graphview)
                 .build();
-            let window = gtk::ApplicationWindowBuilder::new()
+            let headerbar = gtk::HeaderBar::new();
+            let zoomentry = view::ZoomEntry::new(&self.graphview);
+            headerbar.pack_end(&zoomentry);
+
+            let window = gtk::ApplicationWindow::builder()
                 .application(app)
                 .default_width(1280)
                 .default_height(720)
@@ -69,15 +71,27 @@ mod imp {
             window
                 .settings()
                 .set_gtk_application_prefer_dark_theme(true);
+            window.set_titlebar(Some(&headerbar));
+
+            let zoom_set_action =
+                gio::SimpleAction::new("set-zoom", Some(&f64::static_variant_type()));
+            zoom_set_action.connect_activate(
+                clone!(@weak self.graphview as graphview => move|_, param| {
+                    let zoom_factor = param.unwrap().get::<f64>().unwrap();
+                    graphview.set_zoom_factor(zoom_factor, None)
+                }),
+            );
+            window.add_action(&zoom_set_action);
+
             window.show();
         }
 
-        fn startup(&self, app: &Self::Type) {
+        fn startup(&self) {
-            self.parent_startup(app);
+            self.parent_startup();
 
             // Load CSS from the STYLE variable.
             let provider = gtk::CssProvider::new();
-            provider.load_from_data(STYLE.as_bytes());
+            provider.load_from_data(STYLE);
             gtk::StyleContext::add_provider_for_display(
                 &gtk::gdk::Display::default().expect("Error initializing gtk css provider."),
                 &provider,
@@ -101,11 +115,11 @@ impl Application {
         gtk_receiver: Receiver<PipewireMessage>,
         pw_sender: Sender<GtkMessage>,
     ) -> Self {
-        let app: Application =
+        let app: Application = glib::Object::builder()
-            glib::Object::new(&[("application-id", &"org.freedesktop.ryuukyu.Helvum")])
+            .property("application-id", &"org.pipewire.Helvum")
-                .expect("Failed to create new Application");
+            .build();
 
-        let imp = imp::Application::from_instance(&app);
+        let imp = app.imp();
         imp.pw_sender
             .set(RefCell::new(pw_sender))
             // Discard the returned sender, as it does not implement `Debug`.
@@ -147,11 +161,9 @@ impl Application {
     fn add_node(&self, id: u32, name: &str, node_type: Option<NodeType>) {
         info!("Adding node to graph: id {}", id);
 
-        imp::Application::from_instance(self).graphview.add_node(
+        self.imp()
-            id,
+            .graphview
-            view::Node::new(name),
+            .add_node(id, view::Node::new(name, id), node_type);
-            node_type,
-        );
     }
 
     /// Add a new port to the view.
@@ -165,12 +177,10 @@ impl Application {
     ) {
         info!("Adding port to graph: id {}", id);
 
-        let imp = imp::Application::from_instance(self);
-
         let port = view::Port::new(id, name, direction, media_type);
 
         // Create or delete a link if the widget emits the "port-toggled" signal.
-        if let Err(e) = port.connect_local(
+        port.connect_local(
             "port_toggled",
             false,
             clone!(@weak self as app => @default-return None, move |args| {
@@ -182,11 +192,9 @@ impl Application {
 
                 None
             }),
-        ) {
+        );
-            warn!("Failed to connect to \"port-toggled\" signal: {}", e);
-        }
 
-        imp.graphview.add_port(node_id, id, port);
+        self.imp().graphview.add_port(node_id, id, port);
     }
 
     /// Add a new link to the view.
@@ -204,7 +212,7 @@ impl Application {
         // FIXME: Links should be colored depending on the data they carry (video, audio, midi) like ports are.
 
         // Update graph to contain the new link.
-        imp::Application::from_instance(self).graphview.add_link(
+        self.imp().graphview.add_link(
             id,
             PipewireLink {
                 node_from,
@@ -223,15 +231,17 @@ impl Application {
             if active { "active" } else { "inactive" }
         );
 
-        imp::Application::from_instance(self)
+        self.imp().graphview.set_link_state(id, active);
-            .graphview
-            .set_link_state(id, active);
     }
 
     // Toggle a link between the two specified ports on the remote pipewire server.
     fn toggle_link(&self, port_from: u32, port_to: u32) {
-        let imp = imp::Application::from_instance(self);
+        let sender = self
-        let sender = imp.pw_sender.get().expect("pw_sender not set").borrow_mut();
+            .imp()
+            .pw_sender
+            .get()
+            .expect("pw_sender not set")
+            .borrow_mut();
         sender
             .send(GtkMessage::ToggleLink { port_from, port_to })
             .expect("Failed to send message");
@@ -241,8 +251,7 @@ impl Application {
     fn remove_node(&self, id: u32) {
         info!("Removing node from graph: id {}", id);
 
-        let imp = imp::Application::from_instance(self);
+        self.imp().graphview.remove_node(id);
-        imp.graphview.remove_node(id);
     }
 
     /// Remove the port with the id `id` from the node with the id `node_id`
@@ -250,15 +259,13 @@ impl Application {
     fn remove_port(&self, id: u32, node_id: u32) {
         info!("Removing port from graph: id {}, node_id: {}", id, node_id);
 
-        let imp = imp::Application::from_instance(self);
+        self.imp().graphview.remove_port(id, node_id);
-        imp.graphview.remove_port(id, node_id);
     }
 
     /// Remove the link with the specified id from the view.
     fn remove_link(&self, id: u32) {
         info!("Removing link from graph: id {}", id);
 
-        let imp = imp::Application::from_instance(self);
+        self.imp().graphview.remove_link(id);
-        imp.graphview.remove_link(id);
     }
 }

src/main.rs

@@ -1,11 +1,8 @@
-// main.rs
-//
 // 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 as published by
+// it under the terms of the GNU General Public License version 3 as published by
-// the Free Software Foundation, either version 3 of the License, or
+// the Free Software Foundation.
-// (at your option) any later version.
 //
 // This program is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ -21,10 +18,8 @@ mod application;
 mod pipewire_connection;
 mod view;
 
-use gtk::{
+use glib::PRIORITY_DEFAULT;
-    glib::{self, PRIORITY_DEFAULT},
+use gtk::prelude::*;
-    prelude::*,
-};
 use pipewire::spa::Direction;
 
 /// Messages sent by the GTK thread to notify the pipewire thread.
@@ -96,8 +91,20 @@ pub struct PipewireLink {
     pub port_to: u32,
 }
 
+static GLIB_LOGGER: glib::GlibLogger = glib::GlibLogger::new(
+    glib::GlibLoggerFormat::Structured,
+    glib::GlibLoggerDomain::CrateTarget,
+);
+
+fn init_glib_logger() {
+    log::set_logger(&GLIB_LOGGER).expect("Failed to set logger");
+
+    // Glib does not have a "Trace" log level, so only print messages "Debug" or higher priority.
+    log::set_max_level(log::LevelFilter::Debug);
+}
+
 fn main() -> Result<(), Box<dyn std::error::Error>> {
-    env_logger::init();
+    init_glib_logger();
     gtk::init()?;
 
     // Aquire main context so that we can attach the gtk channel later.

src/meson.build

@@ -1,32 +1,31 @@
-rust_sources = files(
+cargo_options = [ '--manifest-path', meson.project_source_root() / 'Cargo.toml' ]
-  'application.rs',
+cargo_options += [ '--target-dir', meson.project_build_root() / 'src' ]
-  'main.rs',
+
-  'pipewire_connection.rs',
+if get_option('profile') == 'default'
-  'pipewire_connection/state.rs',
+  cargo_options += [ '--release' ]
-  'style.css',
+  rust_target = 'release'
-  'view/graph_view.rs',
+  message('Building in release mode')
-  'view/mod.rs',
+else
-  'view/node.rs',
+  rust_target = 'debug'
-  'view/port.rs',
+  message('Building in debug mode')
-)
+endif
+
+cargo_env = [ 'CARGO_HOME=' + meson.project_build_root() / 'cargo-home' ]
 
 custom_target(
   'cargo-build',
   build_by_default: true,
-  input: [
+  build_always_stale: true,
-    cargo_sources,
-    rust_sources
-  ],
   output: meson.project_name(),
   console: true,
   install: true,
   install_dir: bindir,
   command: [
-    cargo_script,
+    'env',
-    meson.build_root(),
+    cargo_env,
-    meson.source_root(),
+    cargo, 'build',
-    '@OUTPUT@',
+    cargo_options,
-    get_option('profile'),
+    '&&',
-    meson.project_name(),
+    'cp', 'src' / rust_target / meson.project_name(), '@OUTPUT@',
   ],
 )

src/pipewire_connection.rs

@@ -1,11 +1,8 @@
-// pipewire_connection.rs
-//
 // 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 as published by
+// it under the terms of the GNU General Public License version 3 as published by
-// the Free Software Foundation, either version 3 of the License, or
+// the Free Software Foundation.
-// (at your option) any later version.
 //
 // This program is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ -112,8 +109,8 @@ fn handle_node(
     // Get the nicest possible name for the node, using a fallback chain of possible name attributes.
     let name = String::from(
         props
-            .get("node.nick")
+            .get("node.description")
-            .or_else(|| props.get("node.description"))
+            .or_else(|| props.get("node.nick"))
             .or_else(|| props.get("node.name"))
             .unwrap_or_default(),
     );

src/pipewire_connection/state.rs

@@ -1,11 +1,8 @@
-// state.rs
-//
 // 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 as published by
+// it under the terms of the GNU General Public License version 3 as published by
-// the Free Software Foundation, either version 3 of the License, or
+// the Free Software Foundation.
-// (at your option) any later version.
 //
 // This program is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of

src/style.css

@@ -1,3 +1,20 @@
+/* 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
+*/
+
 @define-color audio rgb(50,100,240);
 @define-color video rgb(200,200,0);
 @define-color midi rgb(200,0,50);
@@ -19,5 +36,5 @@
 }
 
 graphview {
-    background: @text_view_bg;
+    background-color: @text_view_bg;
 }

src/view/graph_view.rs

@@ -1,11 +1,8 @@
-// graph_view.rs
-//
 // 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 as published by
+// it under the terms of the GNU General Public License version 3 as published by
-// the Free Software Foundation, either version 3 of the License, or
+// the Free Software Foundation.
-// (at your option) any later version.
 //
 // This program is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ -21,7 +18,9 @@ use super::{Node, Port};
 
 use gtk::{
     glib::{self, clone},
-    graphene, gsk,
+    graphene,
+    graphene::Point,
+    gsk,
     prelude::*,
     subclass::prelude::*,
 };
@@ -31,18 +30,44 @@ use std::{cmp::Ordering, collections::HashMap};
 
 use crate::NodeType;
 
+const CANVAS_SIZE: f64 = 5000.0;
+
 mod imp {
     use super::*;
 
-    use std::{cell::RefCell, rc::Rc};
+    use std::cell::{Cell, RefCell};
 
+    use gtk::{
+        gdk::{self, RGBA},
+        graphene::Rect,
+        gsk::ColorStop,
+    };
     use log::warn;
+    use once_cell::sync::Lazy;
+
+    pub struct DragState {
+        node: glib::WeakRef<Node>,
+        /// This stores the offset of the pointer to the origin of the node,
+        /// so that we can keep the pointer over the same position when moving the node
+        ///
+        /// The offset is normalized to the default zoom-level of 1.0.
+        offset: Point,
+    }
 
     #[derive(Default)]
     pub struct GraphView {
-        pub(super) nodes: RefCell<HashMap<u32, Node>>,
+        /// Stores nodes and their positions.
+        pub(super) nodes: RefCell<HashMap<u32, (Node, Point)>>,
         /// Stores the link and whether it is currently active.
         pub(super) links: RefCell<HashMap<u32, (crate::PipewireLink, bool)>>,
+        pub hadjustment: RefCell<Option<gtk::Adjustment>>,
+        pub vadjustment: RefCell<Option<gtk::Adjustment>>,
+        pub zoom_factor: Cell<f64>,
+        /// This keeps track of an ongoing node drag operation.
+        pub dragged_node: RefCell<Option<DragState>>,
+        // Memorized data for an in-progress zoom gesture
+        pub zoom_gesture_initial_zoom: Cell<Option<f64>>,
+        pub zoom_gesture_anchor: Cell<Option<(f64, f64)>>,
     }
 
     #[glib::object_subclass]
@@ -50,141 +75,366 @@ mod imp {
         const NAME: &'static str = "GraphView";
         type Type = super::GraphView;
         type ParentType = gtk::Widget;
+        type Interfaces = (gtk::Scrollable,);
 
         fn class_init(klass: &mut Self::Class) {
-            // The layout manager determines how child widgets are laid out.
-            klass.set_layout_manager_type::<gtk::FixedLayout>();
             klass.set_css_name("graphview");
         }
     }
 
     impl ObjectImpl for GraphView {
-        fn constructed(&self, obj: &Self::Type) {
+        fn constructed(&self) {
-            self.parent_constructed(obj);
+            self.parent_constructed();
 
-            let drag_state = Rc::new(RefCell::new(None));
+            self.obj().set_overflow(gtk::Overflow::Hidden);
-            let drag_controller = gtk::GestureDrag::new();
 
-            drag_controller.connect_drag_begin(
+            self.setup_node_dragging();
-                clone!(@strong drag_state => move |drag_controller, x, y| {
+            self.setup_scroll_zooming();
-                    let mut drag_state = drag_state.borrow_mut();
+            self.setup_zoom_gesture();
-                    let widget = drag_controller
-                        .widget()
-                        .expect("drag-begin event has no widget")
-                        .dynamic_cast::<Self::Type>()
-                        .expect("drag-begin event is not on the GraphView");
-                    // pick() should at least return the widget itself.
-                    let target = widget.pick(x, y, gtk::PickFlags::DEFAULT).expect("drag-begin pick() did not return a widget");
-                    *drag_state = if target.ancestor(Port::static_type()).is_some() {
-                        // The user targeted a port, so the dragging should be handled by the Port
-                        // component instead of here.
-                        None
-                    } else if let Some(target) = target.ancestor(Node::static_type()) {
-                        // The user targeted a Node without targeting a specific Port.
-                        // Drag the Node around the screen.
-                        if let Some((x, y)) = widget.get_node_position(&target) {
-                            Some((target, x, y))
-                        } else {
-                            error!("Failed to obtain position of dragged node, drag aborted.");
-                            None
-                        }
-                    } else {
-                        None
-                    }
-                }
-            ));
-            drag_controller.connect_drag_update(
-                clone!(@strong drag_state => move |drag_controller, x, y| {
-                    let widget = drag_controller
-                        .widget()
-                        .expect("drag-update event has no widget")
-                        .dynamic_cast::<Self::Type>()
-                        .expect("drag-update event is not on the GraphView");
-                    let drag_state = drag_state.borrow();
-                    if let Some((ref node, x1, y1)) = *drag_state {
-                        widget.move_node(node, x1 + x as f32, y1 + y as f32);
-                    }
-                }
-                ),
-            );
-            obj.add_controller(&drag_controller);
         }
 
-        fn dispose(&self, _obj: &Self::Type) {
+        fn dispose(&self) {
             self.nodes
                 .borrow()
                 .values()
-                .for_each(|node| node.unparent())
+                .for_each(|(node, _)| node.unparent())
+        }
+
+        fn properties() -> &'static [glib::ParamSpec] {
+            static PROPERTIES: Lazy<Vec<glib::ParamSpec>> = Lazy::new(|| {
+                vec![
+                    glib::ParamSpecOverride::for_interface::<gtk::Scrollable>("hadjustment"),
+                    glib::ParamSpecOverride::for_interface::<gtk::Scrollable>("vadjustment"),
+                    glib::ParamSpecOverride::for_interface::<gtk::Scrollable>("hscroll-policy"),
+                    glib::ParamSpecOverride::for_interface::<gtk::Scrollable>("vscroll-policy"),
+                    glib::ParamSpecDouble::builder("zoom-factor")
+                        .minimum(0.3)
+                        .maximum(4.0)
+                        .default_value(1.0)
+                        .flags(glib::ParamFlags::CONSTRUCT | glib::ParamFlags::READWRITE)
+                        .build(),
+                ]
+            });
+
+            PROPERTIES.as_ref()
+        }
+
+        fn property(&self, _id: usize, pspec: &glib::ParamSpec) -> glib::Value {
+            match pspec.name() {
+                "hadjustment" => self.hadjustment.borrow().to_value(),
+                "vadjustment" => self.vadjustment.borrow().to_value(),
+                "hscroll-policy" | "vscroll-policy" => gtk::ScrollablePolicy::Natural.to_value(),
+                "zoom-factor" => self.zoom_factor.get().to_value(),
+                _ => unimplemented!(),
+            }
+        }
+
+        fn set_property(&self, _id: usize, value: &glib::Value, pspec: &glib::ParamSpec) {
+            let obj = self.obj();
+
+            match pspec.name() {
+                "hadjustment" => {
+                    self.set_adjustment(&obj, value.get().ok(), gtk::Orientation::Horizontal)
+                }
+                "vadjustment" => {
+                    self.set_adjustment(&obj, value.get().ok(), gtk::Orientation::Vertical)
+                }
+                "hscroll-policy" | "vscroll-policy" => {}
+                "zoom-factor" => {
+                    self.zoom_factor.set(value.get().unwrap());
+                    obj.queue_allocate();
+                }
+                _ => unimplemented!(),
+            }
         }
     }
 
     impl WidgetImpl for GraphView {
-        fn snapshot(&self, widget: &Self::Type, snapshot: &gtk::Snapshot) {
+        fn size_allocate(&self, _width: i32, _height: i32, baseline: i32) {
-            /* FIXME: A lot of hardcoded values in here.
+            let widget = &*self.obj();
-            Try to use relative units (em) and colours from the theme as much as possible. */
 
+            let zoom_factor = self.zoom_factor.get();
+
+            for (node, point) in self.nodes.borrow().values() {
+                let (_, natural_size) = node.preferred_size();
+
+                let transform = self
+                    .canvas_space_to_screen_space_transform()
+                    .translate(point);
+
+                node.allocate(
+                    (natural_size.width() as f64 / zoom_factor).ceil() as i32,
+                    (natural_size.height() as f64 / zoom_factor).ceil() as i32,
+                    baseline,
+                    Some(transform),
+                );
+            }
+
+            if let Some(ref hadjustment) = *self.hadjustment.borrow() {
+                self.set_adjustment_values(widget, hadjustment, gtk::Orientation::Horizontal);
+            }
+            if let Some(ref vadjustment) = *self.vadjustment.borrow() {
+                self.set_adjustment_values(widget, vadjustment, gtk::Orientation::Vertical);
+            }
+        }
+
+        fn snapshot(&self, snapshot: &gtk::Snapshot) {
+            let widget = &*self.obj();
             let alloc = widget.allocation();
-            let widget_bounds =
-                graphene::Rect::new(0.0, 0.0, alloc.width as f32, alloc.height as f32);
 
-            let background_cr = snapshot
+            self.snapshot_background(widget, snapshot);
-                .append_cairo(&widget_bounds)
-                .expect("Failed to get cairo context");
 
-            // Draw a nice grid on the background.
+            // Draw all visible children
-            background_cr.set_source_rgb(0.18, 0.18, 0.18);
-            background_cr.set_line_width(0.2); // TODO: Set to 1px
-            let mut y = 0.0;
-            while y < alloc.height.into() {
-                background_cr.move_to(0.0, y);
-                background_cr.line_to(alloc.width.into(), y);
-                y += 20.0; // TODO: Change to em;
-            }
-            let mut x = 0.0;
-            while x < alloc.width.into() {
-                background_cr.move_to(x, 0.0);
-                background_cr.line_to(x, alloc.height.into());
-                x += 20.0; // TODO: Change to em;
-            }
-            if let Err(e) = background_cr.stroke() {
-                warn!("Failed to draw graphview grid: {}", e);
-            };
-
-            // Draw all children
             self.nodes
                 .borrow()
                 .values()
-                .for_each(|node| self.instance().snapshot_child(node, snapshot));
+                // Cull nodes from rendering when they are outside the visible canvas area
+                .filter(|(node, _)| alloc.intersect(&node.allocation()).is_some())
+                .for_each(|(node, _)| widget.snapshot_child(node, snapshot));
 
-            // Draw all links
+            self.snapshot_links(widget, snapshot);
-            let link_cr = snapshot
+        }
-                .append_cairo(&graphene::Rect::new(
+    }
-                    0.0,
-                    0.0,
-                    alloc.width as f32,
-                    alloc.height as f32,
-                ))
-                .expect("Failed to get cairo context");
 
-            link_cr.set_line_width(2.0);
+    impl ScrollableImpl for GraphView {}
 
-            let gtk::gdk::RGBA {
+    impl GraphView {
-                red,
+        /// Returns a [`gsk::Transform`] matrix that can translate from canvas space to screen space.
-                green,
+        ///
-                blue,
+        /// Canvas space is non-zoomed, and (0, 0) is fixed at the middle of the graph. \
-                alpha,
+        /// Screen space is zoomed and adjusted for scrolling, (0, 0) is at the top-left corner of the window.
-            } = widget
+        ///
+        /// This is the inverted form of [`Self::screen_space_to_canvas_space_transform()`].
+        fn canvas_space_to_screen_space_transform(&self) -> gsk::Transform {
+            let hadj = self.hadjustment.borrow().as_ref().unwrap().value();
+            let vadj = self.vadjustment.borrow().as_ref().unwrap().value();
+            let zoom_factor = self.zoom_factor.get();
+
+            gsk::Transform::new()
+                .translate(&Point::new(-hadj as f32, -vadj as f32))
+                .scale(zoom_factor as f32, zoom_factor as f32)
+        }
+
+        /// Returns a [`gsk::Transform`] matrix that can translate from screen space to canvas space.
+        ///
+        /// This is the inverted form of [`Self::canvas_space_to_screen_space_transform()`], see that function for a more detailed explantion.
+        fn screen_space_to_canvas_space_transform(&self) -> gsk::Transform {
+            self.canvas_space_to_screen_space_transform()
+                .invert()
+                .unwrap()
+        }
+
+        fn setup_node_dragging(&self) {
+            let drag_controller = gtk::GestureDrag::new();
+
+            drag_controller.connect_drag_begin(|drag_controller, x, y| {
+                let widget = drag_controller
+                    .widget()
+                    .dynamic_cast::<super::GraphView>()
+                    .expect("drag-begin event is not on the GraphView");
+                let mut dragged_node = widget.imp().dragged_node.borrow_mut();
+
+                // pick() should at least return the widget itself.
+                let target = widget
+                    .pick(x, y, gtk::PickFlags::DEFAULT)
+                    .expect("drag-begin pick() did not return a widget");
+                *dragged_node = if target.ancestor(Port::static_type()).is_some() {
+                    // The user targeted a port, so the dragging should be handled by the Port
+                    // component instead of here.
+                    None
+                } else if let Some(target) = target.ancestor(Node::static_type()) {
+                    // The user targeted a Node without targeting a specific Port.
+                    // Drag the Node around the screen.
+                    let node = target.dynamic_cast_ref::<Node>().unwrap();
+
+                    let Some(canvas_node_pos) = widget.node_position(node) else { return };
+                    let canvas_cursor_pos = widget
+                        .imp()
+                        .screen_space_to_canvas_space_transform()
+                        .transform_point(&Point::new(x as f32, y as f32));
+
+                    Some(DragState {
+                        node: node.clone().downgrade(),
+                        offset: Point::new(
+                            canvas_cursor_pos.x() - canvas_node_pos.x(),
+                            canvas_cursor_pos.y() - canvas_node_pos.y(),
+                        ),
+                    })
+                } else {
+                    None
+                }
+            });
+            drag_controller.connect_drag_update(|drag_controller, x, y| {
+                let widget = drag_controller
+                    .widget()
+                    .dynamic_cast::<super::GraphView>()
+                    .expect("drag-update event is not on the GraphView");
+                let dragged_node = widget.imp().dragged_node.borrow();
+                let Some(DragState { node, offset }) = dragged_node.as_ref() else { return };
+                let Some(node) = node.upgrade() else { return };
+
+                let (start_x, start_y) = drag_controller
+                    .start_point()
+                    .expect("Drag has no start point");
+
+                let onscreen_node_origin = Point::new((start_x + x) as f32, (start_y + y) as f32);
+                let transform = widget.imp().screen_space_to_canvas_space_transform();
+                let canvas_node_origin = transform.transform_point(&onscreen_node_origin);
+
+                widget.move_node(
+                    &node,
+                    &Point::new(
+                        canvas_node_origin.x() - offset.x(),
+                        canvas_node_origin.y() - offset.y(),
+                    ),
+                );
+            });
+            self.obj().add_controller(drag_controller);
+        }
+
+        fn setup_scroll_zooming(&self) {
+            // We're only interested in the vertical axis, but for devices like touchpads,
+            // not capturing a small accidental horizontal move may cause the scroll to be disrupted if a widget
+            // higher up captures it instead.
+            let scroll_controller =
+                gtk::EventControllerScroll::new(gtk::EventControllerScrollFlags::BOTH_AXES);
+
+            scroll_controller.connect_scroll(|eventcontroller, _, delta_y| {
+                let event = eventcontroller.current_event().unwrap(); // We are inside the event handler, so it must have an event
+
+                if event
+                    .modifier_state()
+                    .contains(gdk::ModifierType::CONTROL_MASK)
+                {
+                    let widget = eventcontroller
+                        .widget()
+                        .downcast::<super::GraphView>()
+                        .unwrap();
+                    widget.set_zoom_factor(widget.zoom_factor() + (0.1 * -delta_y), None);
+
+                    gtk::Inhibit(true)
+                } else {
+                    gtk::Inhibit(false)
+                }
+            });
+            self.obj().add_controller(scroll_controller);
+        }
+
+        fn setup_zoom_gesture(&self) {
+            let zoom_gesture = gtk::GestureZoom::new();
+            zoom_gesture.connect_begin(|gesture, _| {
+                let widget = gesture.widget().downcast::<super::GraphView>().unwrap();
+
+                widget
+                    .imp()
+                    .zoom_gesture_initial_zoom
+                    .set(Some(widget.zoom_factor()));
+                widget
+                    .imp()
+                    .zoom_gesture_anchor
+                    .set(gesture.bounding_box_center());
+            });
+            zoom_gesture.connect_scale_changed(move |gesture, delta| {
+                let widget = gesture.widget().downcast::<super::GraphView>().unwrap();
+
+                let initial_zoom = widget
+                    .imp()
+                    .zoom_gesture_initial_zoom
+                    .get()
+                    .expect("Initial zoom not set during zoom gesture");
+
+                widget.set_zoom_factor(initial_zoom * delta, gesture.bounding_box_center());
+            });
+            self.obj().add_controller(zoom_gesture);
+        }
+
+        fn snapshot_background(&self, widget: &super::GraphView, snapshot: &gtk::Snapshot) {
+            // Grid size and line width during neutral zoom (factor 1.0).
+            const NORMAL_GRID_SIZE: f32 = 20.0;
+            const NORMAL_GRID_LINE_WIDTH: f32 = 1.0;
+
+            let zoom_factor = self.zoom_factor.get();
+            let grid_size = NORMAL_GRID_SIZE * zoom_factor as f32;
+            let grid_line_width = NORMAL_GRID_LINE_WIDTH * zoom_factor as f32;
+
+            let alloc = widget.allocation();
+
+            // We need to offset the lines between 0 and (excluding) `grid_size` so the grid moves with
+            // the rest of the view when scrolling.
+            // The offset is rounded so the grid is always aligned to a row of pixels.
+            let hadj = self
+                .hadjustment
+                .borrow()
+                .as_ref()
+                .map(|hadjustment| hadjustment.value())
+                .unwrap_or(0.0);
+            let hoffset = (grid_size - (hadj as f32 % grid_size)) % grid_size;
+            let vadj = self
+                .vadjustment
+                .borrow()
+                .as_ref()
+                .map(|vadjustment| vadjustment.value())
+                .unwrap_or(0.0);
+            let voffset = (grid_size - (vadj as f32 % grid_size)) % grid_size;
+
+            snapshot.push_repeat(
+                &Rect::new(0.0, 0.0, alloc.width() as f32, alloc.height() as f32),
+                Some(&Rect::new(0.0, voffset, alloc.width() as f32, grid_size)),
+            );
+            let grid_color = RGBA::new(0.137, 0.137, 0.137, 1.0);
+            snapshot.append_linear_gradient(
+                &Rect::new(0.0, voffset, alloc.width() as f32, grid_line_width),
+                &Point::new(0.0, 0.0),
+                &Point::new(alloc.width() as f32, 0.0),
+                &[
+                    ColorStop::new(0.0, grid_color),
+                    ColorStop::new(1.0, grid_color),
+                ],
+            );
+            snapshot.pop();
+
+            snapshot.push_repeat(
+                &Rect::new(0.0, 0.0, alloc.width() as f32, alloc.height() as f32),
+                Some(&Rect::new(hoffset, 0.0, grid_size, alloc.height() as f32)),
+            );
+            snapshot.append_linear_gradient(
+                &Rect::new(hoffset, 0.0, grid_line_width, alloc.height() as f32),
+                &Point::new(0.0, 0.0),
+                &Point::new(0.0, alloc.height() as f32),
+                &[
+                    ColorStop::new(0.0, grid_color),
+                    ColorStop::new(1.0, grid_color),
+                ],
+            );
+            snapshot.pop();
+        }
+
+        fn snapshot_links(&self, widget: &super::GraphView, snapshot: &gtk::Snapshot) {
+            let alloc = widget.allocation();
+
+            let link_cr = snapshot.append_cairo(&graphene::Rect::new(
+                0.0,
+                0.0,
+                alloc.width() as f32,
+                alloc.height() as f32,
+            ));
+
+            link_cr.set_line_width(2.0 * self.zoom_factor.get());
+
+            let rgba = widget
                 .style_context()
                 .lookup_color("graphview-link")
-                .unwrap_or(gtk::gdk::RGBA {
+                .unwrap_or(gtk::gdk::RGBA::BLACK);
-                    red: 0.0,
+
-                    green: 0.0,
+            link_cr.set_source_rgba(
-                    blue: 0.0,
+                rgba.red().into(),
-                    alpha: 0.0,
+                rgba.green().into(),
-                });
+                rgba.blue().into(),
-            link_cr.set_source_rgba(red.into(), green.into(), blue.into(), alpha.into());
+                rgba.alpha().into(),
+            );
 
             for (link, active) in self.links.borrow().values() {
+                // TODO: Do not draw links when they are outside the view
                 if let Some((from_x, from_y, to_x, to_y)) = self.get_link_coordinates(link) {
                     link_cr.move_to(from_x, from_y);
 
@@ -225,48 +475,81 @@ mod imp {
                 }
             }
         }
-    }
 
-    impl GraphView {
         /// Get coordinates for the drawn link to start at and to end at.
         ///
         /// # Returns
         /// `Some((from_x, from_y, to_x, to_y))` if all objects the links refers to exist as widgets.
         fn get_link_coordinates(&self, link: &crate::PipewireLink) -> Option<(f64, f64, f64, f64)> {
+            let widget = &*self.obj();
             let nodes = self.nodes.borrow();
 
-            // For some reason, gtk4::WidgetExt::translate_coordinates gives me incorrect values,
+            let output_port = &nodes.get(&link.node_from)?.0.get_port(link.port_from)?;
-            // so we manually calculate the needed offsets here.
 
-            let from_port = &nodes.get(&link.node_from)?.get_port(link.port_from)?;
+            let output_port_padding =
-            let gtk::Allocation {
+                (output_port.allocated_width() - output_port.width()) as f64 / 2.0;
-                x: mut fx,
-                y: mut fy,
-                width: fw,
-                height: fh,
-            } = from_port.allocation();
-            let from_node = from_port
-                .ancestor(Node::static_type())
-                .expect("Port is not a child of a node");
-            let gtk::Allocation { x: fnx, y: fny, .. } = from_node.allocation();
-            fx += fnx + fw;
-            fy += fny + (fh / 2);
 
-            let to_port = &nodes.get(&link.node_to)?.get_port(link.port_to)?;
+            let (from_x, from_y) = output_port.translate_coordinates(
-            let gtk::Allocation {
+                widget,
-                x: mut tx,
+                output_port.width() as f64 + output_port_padding,
-                y: mut ty,
+                (output_port.height() / 2) as f64,
-                height: th,
+            )?;
-                ..
-            } = to_port.allocation();
-            let to_node = to_port
-                .ancestor(Node::static_type())
-                .expect("Port is not a child of a node");
-            let gtk::Allocation { x: tnx, y: tny, .. } = to_node.allocation();
-            tx += tnx;
-            ty += tny + (th / 2);
 
-            Some((fx.into(), fy.into(), tx.into(), ty.into()))
+            let input_port = &nodes.get(&link.node_to)?.0.get_port(link.port_to)?;
+
+            let input_port_padding =
+                (input_port.allocated_width() - input_port.width()) as f64 / 2.0;
+
+            let (to_x, to_y) = input_port.translate_coordinates(
+                widget,
+                -input_port_padding,
+                (input_port.height() / 2) as f64,
+            )?;
+
+            Some((from_x, from_y, to_x, to_y))
+        }
+
+        fn set_adjustment(
+            &self,
+            obj: &super::GraphView,
+            adjustment: Option<&gtk::Adjustment>,
+            orientation: gtk::Orientation,
+        ) {
+            match orientation {
+                gtk::Orientation::Horizontal => {
+                    *self.hadjustment.borrow_mut() = adjustment.cloned()
+                }
+                gtk::Orientation::Vertical => *self.vadjustment.borrow_mut() = adjustment.cloned(),
+                _ => unimplemented!(),
+            }
+
+            if let Some(adjustment) = adjustment {
+                adjustment
+                    .connect_value_changed(clone!(@weak obj => move |_|  obj.queue_allocate() ));
+            }
+        }
+
+        fn set_adjustment_values(
+            &self,
+            obj: &super::GraphView,
+            adjustment: &gtk::Adjustment,
+            orientation: gtk::Orientation,
+        ) {
+            let size = match orientation {
+                gtk::Orientation::Horizontal => obj.width(),
+                gtk::Orientation::Vertical => obj.height(),
+                _ => unimplemented!(),
+            };
+            let zoom_factor = self.zoom_factor.get();
+
+            adjustment.configure(
+                adjustment.value(),
+                -(CANVAS_SIZE / 2.0) * zoom_factor,
+                (CANVAS_SIZE / 2.0) * zoom_factor,
+                (f64::from(size) * 0.1) * zoom_factor,
+                (f64::from(size) * 0.9) * zoom_factor,
+                f64::from(size) * zoom_factor,
+            );
         }
     }
 }
@@ -277,12 +560,57 @@ glib::wrapper! {
 }
 
 impl GraphView {
+    pub const ZOOM_MIN: f64 = 0.3;
+    pub const ZOOM_MAX: f64 = 4.0;
+
     pub fn new() -> Self {
-        glib::Object::new(&[]).expect("Failed to create GraphView")
+        glib::Object::new()
+    }
+
+    pub fn zoom_factor(&self) -> f64 {
+        self.property("zoom-factor")
+    }
+
+    /// Set the scale factor.
+    ///
+    /// A factor of 1.0 is equivalent to 100% zoom, 0.5 to 50% zoom etc.
+    ///
+    /// An optional anchor (in canvas-space coordinates) can be specified, which will be used as the center of the zoom,
+    /// so that its position stays fixed.
+    /// If no anchor is specified, the middle of the screen is used instead.
+    ///
+    /// Note that the zoom level is [clamped](`f64::clamp`) to between 30% and 300%.
+    /// See [`Self::ZOOM_MIN`] and [`Self::ZOOM_MAX`].
+    pub fn set_zoom_factor(&self, zoom_factor: f64, anchor: Option<(f64, f64)>) {
+        let zoom_factor = zoom_factor.clamp(Self::ZOOM_MIN, Self::ZOOM_MAX);
+
+        let (anchor_x_screen, anchor_y_screen) = anchor.unwrap_or_else(|| {
+            (
+                self.allocation().width() as f64 / 2.0,
+                self.allocation().height() as f64 / 2.0,
+            )
+        });
+
+        let old_zoom = self.imp().zoom_factor.get();
+        let hadjustment_ref = self.imp().hadjustment.borrow();
+        let vadjustment_ref = self.imp().vadjustment.borrow();
+        let hadjustment = hadjustment_ref.as_ref().unwrap();
+        let vadjustment = vadjustment_ref.as_ref().unwrap();
+
+        let x_total = (anchor_x_screen + hadjustment.value()) / old_zoom;
+        let y_total = (anchor_y_screen + vadjustment.value()) / old_zoom;
+
+        let new_hadjustment = x_total * zoom_factor - anchor_x_screen;
+        let new_vadjustment = y_total * zoom_factor - anchor_y_screen;
+
+        hadjustment.set_value(new_hadjustment);
+        vadjustment.set_value(new_vadjustment);
+
+        self.set_property("zoom-factor", zoom_factor);
     }
 
     pub fn add_node(&self, id: u32, node: Node, node_type: Option<NodeType>) {
-        let private = imp::GraphView::from_instance(self);
+        let imp = self.imp();
         node.set_parent(self);
 
         // Place widgets in colums of 3, growing down
@@ -295,13 +623,14 @@ impl GraphView {
             420.0
         };
 
-        let y = private
+        let y = imp
             .nodes
             .borrow()
             .values()
-            .filter_map(|node| {
+            .map(|node| {
-                // Map nodes to locations, discard nodes without location
+                // Map nodes to their locations
-                self.get_node_position(&node.clone().upcast())
+                let point = self.node_position(&node.0.clone().upcast()).unwrap();
+                (point.x(), point.y())
             })
             .filter(|(x2, _)| {
                 // Only look for other nodes that have a similar x coordinate
@@ -311,17 +640,14 @@ impl GraphView {
                 // Get max in column
                 y1.partial_cmp(y2).unwrap_or(Ordering::Equal)
             })
-            .map_or(20_f32, |(_x, y)| y + 100.0);
+            .map_or(20_f32, |(_x, y)| y + 120.0);
 
-        self.move_node(&node.clone().upcast(), x, y);
+        imp.nodes.borrow_mut().insert(id, (node, Point::new(x, y)));
-
-        private.nodes.borrow_mut().insert(id, node);
     }
 
     pub fn remove_node(&self, id: u32) {
-        let private = imp::GraphView::from_instance(self);
+        let mut nodes = self.imp().nodes.borrow_mut();
-        let mut nodes = private.nodes.borrow_mut();
+        if let Some((node, _)) = nodes.remove(&id) {
-        if let Some(node) = nodes.remove(&id) {
             node.unparent();
         } else {
             warn!("Tried to remove non-existant node (id={}) from graph", id);
@@ -329,9 +655,7 @@ impl GraphView {
     }
 
     pub fn add_port(&self, node_id: u32, port_id: u32, port: crate::view::port::Port) {
-        let private = imp::GraphView::from_instance(self);
+        if let Some((node, _)) = self.imp().nodes.borrow_mut().get_mut(&node_id) {
-
-        if let Some(node) = private.nodes.borrow_mut().get_mut(&node_id) {
             node.add_port(port_id, port);
         } else {
             error!(
@@ -342,22 +666,22 @@ impl GraphView {
     }
 
     pub fn remove_port(&self, id: u32, node_id: u32) {
-        let private = imp::GraphView::from_instance(self);
+        let nodes = self.imp().nodes.borrow();
-        let nodes = private.nodes.borrow();
+        if let Some((node, _)) = nodes.get(&node_id) {
-        if let Some(node) = nodes.get(&node_id) {
             node.remove_port(id);
         }
     }
 
     pub fn add_link(&self, link_id: u32, link: crate::PipewireLink, active: bool) {
-        let private = imp::GraphView::from_instance(self);
+        self.imp()
-        private.links.borrow_mut().insert(link_id, (link, active));
+            .links
+            .borrow_mut()
+            .insert(link_id, (link, active));
         self.queue_draw();
     }
 
     pub fn set_link_state(&self, link_id: u32, active: bool) {
-        let private = imp::GraphView::from_instance(self);
+        if let Some((_, state)) = self.imp().links.borrow_mut().get_mut(&link_id) {
-        if let Some((_, state)) = private.links.borrow_mut().get_mut(&link_id) {
             *state = active;
             self.queue_draw();
         } else {
@@ -366,8 +690,7 @@ impl GraphView {
     }
 
     pub fn remove_link(&self, id: u32) {
-        let private = imp::GraphView::from_instance(self);
+        let mut links = self.imp().links.borrow_mut();
-        let mut links = private.links.borrow_mut();
         links.remove(&id);
 
         self.queue_draw();
@@ -375,46 +698,34 @@ impl GraphView {
 
     /// Get the position of the specified node inside the graphview.
     ///
-    /// Returns `None` if the node is not in the graphview.
+    /// The returned position is in canvas-space (non-zoomed, (0, 0) fixed in the middle of the canvas).
-    pub(super) fn get_node_position(&self, node: &gtk::Widget) -> Option<(f32, f32)> {
+    pub(super) fn node_position(&self, node: &Node) -> Option<Point> {
-        let layout_manager = self
+        self.imp()
-            .layout_manager()
+            .nodes
-            .expect("Failed to get layout manager")
+            .borrow()
-            .dynamic_cast::<gtk::FixedLayout>()
+            .get(&node.pipewire_id())
-            .expect("Failed to cast to FixedLayout");
+            .map(|(_, point)| *point)
-
-        let node = layout_manager
-            .layout_child(node)?
-            .dynamic_cast::<gtk::FixedLayoutChild>()
-            .expect("Could not cast to FixedLayoutChild");
-        let transform = node
-            .transform()
-            .expect("Failed to obtain transform from layout child");
-        Some(transform.to_translate())
     }
 
-    pub(super) fn move_node(&self, node: &gtk::Widget, x: f32, y: f32) {
+    pub(super) fn move_node(&self, widget: &Node, point: &Point) {
-        let layout_manager = self
+        let mut nodes = self.imp().nodes.borrow_mut();
-            .layout_manager()
+        let mut node = nodes
-            .expect("Failed to get layout manager")
+            .get_mut(&widget.pipewire_id())
-            .dynamic_cast::<gtk::FixedLayout>()
+            .expect("Node is not on the graph");
-            .expect("Failed to cast to FixedLayout");
 
-        let transform = gsk::Transform::new()
+        // Clamp the new position to within the graph, so a node can't be moved outside it and be lost.
-            // Nodes should not be able to be dragged out of the view, so we use `max(coordinate, 0.0)` to prevent that.
+        node.1 = Point::new(
-            .translate(&graphene::Point::new(f32::max(x, 0.0), f32::max(y, 0.0)))
+            point.x().clamp(
-            .unwrap();
+                -(CANVAS_SIZE / 2.0) as f32,
+                (CANVAS_SIZE / 2.0) as f32 - widget.width() as f32,
+            ),
+            point.y().clamp(
+                -(CANVAS_SIZE / 2.0) as f32,
+                (CANVAS_SIZE / 2.0) as f32 - widget.height() as f32,
+            ),
+        );
 
-        layout_manager
+        self.queue_allocate();
-            .layout_child(node)
-            .expect("Could not get layout child")
-            .dynamic_cast::<gtk::FixedLayoutChild>()
-            .expect("Could not cast to FixedLayoutChild")
-            .set_transform(&transform);
-
-        // FIXME: If links become proper widgets,
-        // we don't need to redraw the full graph everytime.
-        self.queue_draw();
     }
 }
 

src/view/mod.rs

@@ -1,11 +1,8 @@
-// mod.rs
-//
 // 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 as published by
+// it under the terms of the GNU General Public License version 3 as published by
-// the Free Software Foundation, either version 3 of the License, or
+// the Free Software Foundation.
-// (at your option) any later version.
 //
 // This program is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ -24,7 +21,9 @@
 mod graph_view;
 mod node;
 mod port;
+mod zoomentry;
 
 pub use graph_view::GraphView;
 pub use node::Node;
 pub use port::Port;
+pub use zoomentry::ZoomEntry;

src/view/node.rs

@@ -1,11 +1,8 @@
-// node.rs
-//
 // 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 as published by
+// it under the terms of the GNU General Public License version 3 as published by
-// the Free Software Foundation, either version 3 of the License, or
+// the Free Software Foundation.
-// (at your option) any later version.
 //
 // This program is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ -23,11 +20,15 @@ use pipewire::spa::Direction;
 use std::collections::HashMap;
 
 mod imp {
+    use glib::ParamFlags;
+    use once_cell::sync::Lazy;
+
     use super::*;
 
     use std::cell::{Cell, RefCell};
 
     pub struct Node {
+        pub(super) pipewire_id: Cell<u32>,
         pub(super) grid: gtk::Grid,
         pub(super) label: gtk::Label,
         pub(super) ports: RefCell<HashMap<u32, crate::view::port::Port>>,
@@ -37,7 +38,7 @@ mod imp {
 
     #[glib::object_subclass]
     impl ObjectSubclass for Node {
-        const NAME: &'static str = "Node";
+        const NAME: &'static str = "HelvumNode";
         type Type = super::Node;
         type ParentType = gtk::Widget;
 
@@ -47,7 +48,12 @@ mod imp {
 
         fn new() -> Self {
             let grid = gtk::Grid::new();
+
             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);
 
@@ -55,6 +61,7 @@ mod imp {
             label.set_cursor(gtk::gdk::Cursor::from_name("grab", None).as_ref());
 
             Self {
+                pipewire_id: Cell::new(0),
                 grid,
                 label,
                 ports: RefCell::new(HashMap::new()),
@@ -65,12 +72,44 @@ mod imp {
     }
 
     impl ObjectImpl for Node {
-        fn constructed(&self, obj: &Self::Type) {
+        fn constructed(&self) {
-            self.parent_constructed(obj);
+            self.parent_constructed();
-            self.grid.set_parent(obj);
+            self.grid.set_parent(&*self.obj());
         }
 
-        fn dispose(&self, _obj: &Self::Type) {
+        fn properties() -> &'static [glib::ParamSpec] {
+            static PROPERTIES: Lazy<Vec<glib::ParamSpec>> = Lazy::new(|| {
+                vec![
+                    glib::ParamSpecUInt::builder("pipewire-id")
+                        .flags(ParamFlags::READWRITE | ParamFlags::CONSTRUCT_ONLY)
+                        .build(),
+                    glib::ParamSpecString::builder("name").build(),
+                ]
+            });
+
+            PROPERTIES.as_ref()
+        }
+
+        fn property(&self, _id: usize, pspec: &glib::ParamSpec) -> glib::Value {
+            match pspec.name() {
+                "pipewire-id" => self.pipewire_id.get().to_value(),
+                "name" => self.label.text().to_value(),
+                _ => unimplemented!(),
+            }
+        }
+
+        fn set_property(&self, _id: usize, value: &glib::Value, pspec: &glib::ParamSpec) {
+            match pspec.name() {
+                "name" => {
+                    self.label.set_text(value.get().unwrap());
+                    self.label.set_tooltip_text(value.get().ok());
+                }
+                "pipewire-id" => self.pipewire_id.set(value.get().unwrap()),
+                _ => unimplemented!(),
+            }
+        }
+
+        fn dispose(&self) {
             self.grid.unparent();
         }
     }
@@ -84,47 +123,54 @@ glib::wrapper! {
 }
 
 impl Node {
-    pub fn new(name: &str) -> Self {
+    pub fn new(name: &str, pipewire_id: u32) -> Self {
-        let res: Self = glib::Object::new(&[]).expect("Failed to create Node");
+        glib::Object::builder()
-        let private = imp::Node::from_instance(&res);
+            .property("name", &name)
+            .property("pipewire-id", &pipewire_id)
+            .build()
+    }
 
-        private.label.set_text(name);
+    pub fn pipewire_id(&self) -> u32 {
+        self.property("pipewire-id")
+    }
 
-        res
+    /// Get the nodes `name` property, which represents the displayed name.
+    pub fn name(&self) -> String {
+        self.property("name")
+    }
+
+    /// Set the nodes `name` property, which represents the displayed name.
+    pub fn set_name(&self, name: &str) {
+        self.set_property("name", name);
     }
 
     pub fn add_port(&mut self, id: u32, port: super::port::Port) {
-        let private = imp::Node::from_instance(self);
+        let imp = self.imp();
 
         match port.direction() {
             Direction::Input => {
-                private
+                imp.grid.attach(&port, 0, imp.num_ports_in.get() + 1, 1, 1);
-                    .grid
+                imp.num_ports_in.set(imp.num_ports_in.get() + 1);
-                    .attach(&port, 0, private.num_ports_in.get() + 1, 1, 1);
-                private.num_ports_in.set(private.num_ports_in.get() + 1);
             }
             Direction::Output => {
-                private
+                imp.grid.attach(&port, 1, imp.num_ports_out.get() + 1, 1, 1);
-                    .grid
+                imp.num_ports_out.set(imp.num_ports_out.get() + 1);
-                    .attach(&port, 1, private.num_ports_out.get() + 1, 1, 1);
-                private.num_ports_out.set(private.num_ports_out.get() + 1);
             }
         }
 
-        private.ports.borrow_mut().insert(id, port);
+        imp.ports.borrow_mut().insert(id, port);
     }
 
     pub fn get_port(&self, id: u32) -> Option<super::port::Port> {
-        let private = imp::Node::from_instance(self);
+        self.imp().ports.borrow_mut().get(&id).cloned()
-        private.ports.borrow_mut().get(&id).cloned()
     }
 
     pub fn remove_port(&self, id: u32) {
-        let private = imp::Node::from_instance(self);
+        let imp = self.imp();
-        if let Some(port) = private.ports.borrow_mut().remove(&id) {
+        if let Some(port) = imp.ports.borrow_mut().remove(&id) {
             match port.direction() {
-                Direction::Input => private.num_ports_in.set(private.num_ports_in.get() - 1),
+                Direction::Input => imp.num_ports_in.set(imp.num_ports_in.get() - 1),
-                Direction::Output => private.num_ports_in.set(private.num_ports_out.get() - 1),
+                Direction::Output => imp.num_ports_in.set(imp.num_ports_out.get() - 1),
             }
 
             port.unparent();

src/view/port.rs

@@ -1,11 +1,8 @@
-// port.rs
-//
 // 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 as published by
+// it under the terms of the GNU General Public License version 3 as published by
-// the Free Software Foundation, either version 3 of the License, or
+// the Free Software Foundation.
-// (at your option) any later version.
 //
 // This program is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ -30,17 +27,18 @@ use crate::MediaType;
 
 /// A helper struct for linking a output port to an input port.
 /// It carries the output ports id.
-#[derive(Clone, Debug, glib::GBoxed)]
+#[derive(Clone, Debug, glib::Boxed)]
-#[gboxed(type_name = "HelvumForwardLink")]
+#[boxed_type(name = "HelvumForwardLink")]
 struct ForwardLink(u32);
 
 /// A helper struct for linking an input to an output port.
 /// It carries the input ports id.
-#[derive(Clone, Debug, glib::GBoxed)]
+#[derive(Clone, Debug, glib::Boxed)]
-#[gboxed(type_name = "HelvumReversedLink")]
+#[boxed_type(name = "HelvumReversedLink")]
 struct ReversedLink(u32);
 
 mod imp {
+    use glib::ParamFlags;
     use once_cell::{sync::Lazy, unsync::OnceCell};
     use pipewire::spa::Direction;
 
@@ -49,14 +47,14 @@ mod imp {
     /// Graphical representation of a pipewire port.
     #[derive(Default)]
     pub struct Port {
-        pub(super) label: OnceCell<gtk::Label>,
+        pub(super) pipewire_id: OnceCell<u32>,
-        pub(super) id: OnceCell<u32>,
+        pub(super) label: gtk::Label,
         pub(super) direction: OnceCell<Direction>,
     }
 
     #[glib::object_subclass]
     impl ObjectSubclass for Port {
-        const NAME: &'static str = "Port";
+        const NAME: &'static str = "HelvumPort";
         type Type = super::Port;
         type ParentType = gtk::Widget;
 
@@ -69,22 +67,58 @@ mod imp {
     }
 
     impl ObjectImpl for Port {
-        fn dispose(&self, _obj: &Self::Type) {
+        fn constructed(&self) {
-            if let Some(label) = self.label.get() {
+            self.parent_constructed();
-                label.unparent()
+
+            self.label.set_parent(&*self.obj());
+            self.label.set_wrap(true);
+            self.label.set_lines(2);
+            self.label.set_max_width_chars(20);
+            self.label.set_ellipsize(gtk::pango::EllipsizeMode::End);
+        }
+
+        fn dispose(&self) {
+            self.label.unparent()
+        }
+
+        fn properties() -> &'static [glib::ParamSpec] {
+            static PROPERTIES: Lazy<Vec<glib::ParamSpec>> = Lazy::new(|| {
+                vec![
+                    glib::ParamSpecUInt::builder("pipewire-id")
+                        .flags(ParamFlags::READWRITE | ParamFlags::CONSTRUCT_ONLY)
+                        .build(),
+                    glib::ParamSpecString::builder("name").build(),
+                ]
+            });
+
+            PROPERTIES.as_ref()
+        }
+
+        fn property(&self, _id: usize, pspec: &glib::ParamSpec) -> glib::Value {
+            match pspec.name() {
+                "pipewire-id" => self.pipewire_id.get().unwrap().to_value(),
+                "name" => self.label.text().to_value(),
+                _ => unimplemented!(),
+            }
+        }
+
+        fn set_property(&self, _id: usize, value: &glib::Value, pspec: &glib::ParamSpec) {
+            match pspec.name() {
+                "name" => {
+                    self.label.set_text(value.get().unwrap());
+                    self.label.set_tooltip_text(value.get().ok());
+                }
+                "pipewire-id" => self.pipewire_id.set(value.get().unwrap()).unwrap(),
+                _ => unimplemented!(),
             }
         }
 
         fn signals() -> &'static [Signal] {
             static SIGNALS: Lazy<Vec<Signal>> = Lazy::new(|| {
-                vec![Signal::builder(
+                vec![Signal::builder("port-toggled")
-                    "port-toggled",
                     // Provide id of output port and input port to signal handler.
-                    &[<u32>::static_type().into(), <u32>::static_type().into()],
+                    .param_types([<u32>::static_type(), <u32>::static_type()])
-                    // signal handler sends back nothing.
+                    .build()]
-                    <()>::static_type().into(),
-                )
-                .build()]
             });
 
             SIGNALS.as_ref()
@@ -101,29 +135,24 @@ glib::wrapper! {
 impl Port {
     pub fn new(id: u32, name: &str, direction: Direction, media_type: Option<MediaType>) -> Self {
         // Create the widget and initialize needed fields
-        let res: Self = glib::Object::new(&[]).expect("Failed to create Port");
+        let res: Self = glib::Object::builder()
+            .property("pipewire-id", &id)
+            .property("name", &name)
+            .build();
 
-        let private = imp::Port::from_instance(&res);
+        let imp = res.imp();
-        private.id.set(id).expect("Port id already set");
+
-        private
+        imp.direction
-            .direction
             .set(direction)
             .expect("Port direction already set");
 
-        let label = gtk::Label::new(Some(name));
-        label.set_parent(&res);
-        private
-            .label
-            .set(label)
-            .expect("Port label was already set");
-
         // Add a drag source and drop target controller with the type depending on direction,
         // they will be responsible for link creation by dragging an output port onto an input port or the other way around.
 
         // FIXME: We should protect against different media types, e.g. it should not be possible to drop a video port on an audio port.
 
         // The port will simply provide its pipewire id to the drag target.
-        let drag_src = gtk::DragSourceBuilder::new()
+        let drag_src = gtk::DragSource::builder()
             .content(&gdk::ContentProvider::for_value(&match direction {
                 Direction::Input => ReversedLink(id).to_value(),
                 Direction::Output => ForwardLink(id).to_value(),
@@ -136,7 +165,7 @@ impl Port {
             trace!("Drag from port {} was cancelled", id);
             false
         });
-        res.add_controller(&drag_src);
+        res.add_controller(drag_src);
 
         // The drop target will accept either a `ForwardLink` or `ReversedLink` depending in its own direction,
         // and use it to emit its `port-toggled` signal.
@@ -155,9 +184,7 @@ impl Port {
                             // Get the callback registered in the widget and call it
                             drop_target
                                 .widget()
-                                .expect("Drop target has no widget")
+                                .emit_by_name::<()>("port-toggled", &[&source_id, &this.pipewire_id()]);
-                                .emit_by_name("port-toggled", &[&source_id, &this.id()])
-                                .expect("Failed to send signal");
                         } else {
                             warn!("Invalid type dropped on ingoing port");
                         }
@@ -173,9 +200,7 @@ impl Port {
                             // Get the callback registered in the widget and call it
                             drop_target
                                 .widget()
-                                .expect("Drop target has no widget")
+                                .emit_by_name::<()>("port-toggled", &[&this.pipewire_id(), &target_id]);
-                                .emit_by_name("port-toggled", &[&this.id(), &target_id])
-                                .expect("Failed to send signal");
                         } else {
                             warn!("Invalid type dropped on outgoing port");
                         }
@@ -185,7 +210,7 @@ impl Port {
                 );
             }
         }
-        res.add_controller(&drop_target);
+        res.add_controller(drop_target);
 
         // 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());
@@ -201,13 +226,24 @@ impl Port {
         res
     }
 
-    pub fn id(&self) -> u32 {
+    pub fn pipewire_id(&self) -> u32 {
-        let private = imp::Port::from_instance(self);
+        self.property("pipewire-id")
-        private.id.get().copied().expect("Port id is not set")
+    }
+
+    /// Get the nodes `name` property, which represents the displayed name.
+    pub fn name(&self) -> String {
+        self.property("name")
+    }
+
+    /// Set the nodes `name` property, which represents the displayed name.
+    pub fn set_name(&self, name: &str) {
+        self.set_property("name", name);
     }
 
     pub fn direction(&self) -> &Direction {
-        let private = imp::Port::from_instance(self);
+        self.imp()
-        private.direction.get().expect("Port direction is not set")
+            .direction
+            .get()
+            .expect("Port direction is not set")
     }
 }

src/view/zoomentry.rs

@@ -0,0 +1,172 @@
+use gtk::{glib, prelude::*, subclass::prelude::*};
+
+use crate::view;
+
+mod imp {
+    use std::cell::RefCell;
+
+    use super::*;
+
+    use gtk::{gio, glib::clone};
+    use once_cell::sync::Lazy;
+
+    #[derive(gtk::CompositeTemplate)]
+    #[template(file = "zoomentry.ui")]
+    pub struct ZoomEntry {
+        pub graphview: RefCell<Option<view::GraphView>>,
+        #[template_child]
+        pub zoom_out_button: TemplateChild<gtk::Button>,
+        #[template_child]
+        pub zoom_in_button: TemplateChild<gtk::Button>,
+        #[template_child]
+        pub entry: TemplateChild<gtk::Entry>,
+        pub popover: gtk::PopoverMenu,
+    }
+
+    impl Default for ZoomEntry {
+        fn default() -> Self {
+            let menu = gio::Menu::new();
+            menu.append(Some("30%"), Some("win.set-zoom(0.30)"));
+            menu.append(Some("50%"), Some("win.set-zoom(0.50)"));
+            menu.append(Some("75%"), Some("win.set-zoom(0.75)"));
+            menu.append(Some("100%"), Some("win.set-zoom(1.0)"));
+            menu.append(Some("150%"), Some("win.set-zoom(1.5)"));
+            menu.append(Some("200%"), Some("win.set-zoom(2.0)"));
+            menu.append(Some("300%"), Some("win.set-zoom(3.0)"));
+            let popover = gtk::PopoverMenu::from_model(Some(&menu));
+
+            ZoomEntry {
+                graphview: Default::default(),
+                zoom_out_button: Default::default(),
+                zoom_in_button: Default::default(),
+                entry: Default::default(),
+                popover,
+            }
+        }
+    }
+
+    #[glib::object_subclass]
+    impl ObjectSubclass for ZoomEntry {
+        const NAME: &'static str = "HelvumZoomEntry";
+        type Type = super::ZoomEntry;
+        type ParentType = gtk::Box;
+
+        fn class_init(klass: &mut Self::Class) {
+            klass.bind_template();
+        }
+
+        fn instance_init(obj: &glib::subclass::InitializingObject<Self>) {
+            obj.init_template();
+        }
+    }
+
+    impl ObjectImpl for ZoomEntry {
+        fn constructed(&self) {
+            self.parent_constructed();
+
+            self.zoom_out_button
+                .connect_clicked(clone!(@weak self as imp => move |_| {
+                    let graphview = imp.graphview.borrow();
+                    if let Some(ref graphview) = *graphview {
+                        graphview.set_zoom_factor(graphview.zoom_factor() - 0.1, None);
+                    }
+                }));
+
+            self.zoom_in_button
+                .connect_clicked(clone!(@weak self as imp => move |_| {
+                    let graphview = imp.graphview.borrow();
+                    if let Some(ref graphview) = *graphview {
+                        graphview.set_zoom_factor(graphview.zoom_factor() + 0.1, None);
+                    }
+                }));
+
+            self.entry
+                .connect_activate(clone!(@weak self as imp => move |entry| {
+                    if let Ok(zoom_factor) = entry.text().trim_matches('%').parse::<f64>() {
+                        let graphview = imp.graphview.borrow();
+                        if let Some(ref graphview) = *graphview {
+                            graphview.set_zoom_factor(zoom_factor / 100.0, None);
+                        }
+                    }
+                }));
+            self.entry
+                .connect_icon_press(clone!(@weak self as imp => move |_, pos| {
+                    if pos == gtk::EntryIconPosition::Secondary {
+                        imp.popover.show();
+                    }
+                }));
+
+            self.popover.set_parent(&self.entry.get());
+        }
+
+        fn dispose(&self) {
+            self.popover.unparent();
+
+            while let Some(child) = self.obj().first_child() {
+                child.unparent();
+            }
+        }
+
+        fn properties() -> &'static [glib::ParamSpec] {
+            static PROPERTIES: Lazy<Vec<glib::ParamSpec>> = Lazy::new(|| {
+                vec![
+                    glib::ParamSpecObject::builder::<view::GraphView>("zoomed-widget")
+                        .flags(glib::ParamFlags::READWRITE | glib::ParamFlags::CONSTRUCT)
+                        .build(),
+                ]
+            });
+
+            PROPERTIES.as_ref()
+        }
+
+        fn property(&self, _id: usize, pspec: &glib::ParamSpec) -> glib::Value {
+            match pspec.name() {
+                "zoomed-widget" => self.graphview.borrow().to_value(),
+                _ => unimplemented!(),
+            }
+        }
+
+        fn set_property(&self, _id: usize, value: &glib::Value, pspec: &glib::ParamSpec) {
+            match pspec.name() {
+                "zoomed-widget" => {
+                    let widget: view::GraphView = value.get().unwrap();
+                    widget.connect_notify_local(
+                        Some("zoom-factor"),
+                        clone!(@weak self as imp => move |graphview, _| {
+                            imp.update_zoom_factor_text(graphview.zoom_factor());
+                        }),
+                    );
+                    self.update_zoom_factor_text(widget.zoom_factor());
+                    *self.graphview.borrow_mut() = Some(widget);
+                }
+                _ => unimplemented!(),
+            }
+        }
+    }
+    impl WidgetImpl for ZoomEntry {}
+    impl BoxImpl for ZoomEntry {}
+
+    impl ZoomEntry {
+        /// Update the text contained in the combobox's entry to reflect the provided zoom factor.
+        ///
+        /// This does not update the associated [`view::GraphView`]s zoom level.
+        fn update_zoom_factor_text(&self, zoom_factor: f64) {
+            self.entry
+                .buffer()
+                .set_text(&format!("{factor:.0}%", factor = zoom_factor * 100.));
+        }
+    }
+}
+
+glib::wrapper! {
+    pub struct ZoomEntry(ObjectSubclass<imp::ZoomEntry>)
+        @extends gtk::Box, gtk::Widget;
+}
+
+impl ZoomEntry {
+    pub fn new(zoomed_widget: &view::GraphView) -> Self {
+        glib::Object::builder()
+            .property("zoomed-widget", zoomed_widget)
+            .build()
+    }
+}

src/view/zoomentry.ui

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <template class="HelvumZoomEntry" parent="GtkBox">
+    <child>
+      <object class="GtkButton" id="zoom_out_button">
+        <property name="icon-name">zoom-out-symbolic</property>
+        <property name="tooltip-text">Zoom out</property>
+      </object>
+    </child>
+    <child>
+      <object class="GtkEntry" id="entry">
+        <property name="secondary-icon-name">go-down-symbolic</property>
+        <property name="input-purpose">digits</property>
+      </object>
+    </child>
+    <child>
+      <object class="GtkButton" id="zoom_in_button">
+        <property name="icon-name">zoom-in-symbolic</property>
+        <property name="tooltip-text">Zoom in</property>
+      </object>
+    </child>
+    <style>
+      <class name="linked"/>
+    </style>
+  </template>
+</interface>