graphview: Draw links using new gdk path API instead of cairo

update Helvum to track the latest pipewire0.8.0

.gitignore

@@ -1,3 +1,5 @@
+/.flatpak
 /.flatpak-builder
 /.vscode
+/_build
 /target

.gitlab-ci.yml

@@ -1,75 +1,53 @@
-include:
-  - project: 'freedesktop/ci-templates'             # the project to include from
-    ref: '34f4ade99434043f88e164933f570301fd18b125' # git ref of that project
-    file: '/templates/fedora.yml'                   # the actual file to include
-
 stages:
-  - prepare
+  - build
   - lint
-  - test
-  - extras
 
+.flatpak:
+  image: 'quay.io/gnome_infrastructure/gnome-runtime-images:gnome-46'
   variables:
-  FDO_UPSTREAM_REPO: 'pipewire/helvum'
+    FLATPAK_BUILD_DIR: _build
+    MANIFEST_PATH: build-aux/org.pipewire.Helvum.json
+    APP_FLATPAK_MODULE: Helvum
+  before_script:
+    - flatpak --version
+    - flatpak info org.gnome.Platform
+    - flatpak info org.gnome.Sdk
+    - flatpak info org.freedesktop.Sdk.Extension.llvm16
+    - flatpak info org.freedesktop.Sdk.Extension.rust-stable
+    - flatpak-builder --version
 
-# Version and tag for our current container
+build:
-.fedora:
+  stage: build
-  variables:
+  extends: .flatpak
-    FDO_DISTRIBUTION_VERSION: '35'
-    # Update this to trigger a container rebuild
-    FDO_DISTRIBUTION_TAG: '2021-11-23.0'
-
-build-fedora-container:
-  extends:
-  - .fedora                            # our template job above
-  - .fdo.container-build@fedora@x86_64 # the CI template
-  stage: prepare
-  variables:
-    # clang-devel: required by rust bindgen
-    FDO_DISTRIBUTION_PACKAGES: >-
-      rust
-      cargo
-      rustfmt
-      clippy
-      pipewire-devel
-      gtk4-devel
-      clang-devel
-
-rustfmt:
-  extends:
-    - .fedora
-    - .fdo.distribution-image@fedora
-  stage: lint
   script:
-    - cargo fmt --version
+    - flatpak-builder --keep-build-dirs --user --disable-rofiles-fuse ${FLATPAK_BUILD_DIR} ${MANIFEST_PATH}
-    - cargo fmt -- --color=always --check
 
-test-stable:
+# TODO: Run meson test
-  extends:
-    - .fedora
-    - .fdo.distribution-image@fedora
-  stage: test
-  script:
-    - rustc --version
-    - cargo build --color=always --all-targets
-    - cargo test --color=always
-
-rustdoc:
-  extends:
-    - .fedora
-    - .fdo.distribution-image@fedora
-  stage: extras
-  variables:
-    RUSTDOCFLAGS: '-Dwarnings'
-  script:
-    - rustdoc --version
-    - cargo doc --no-deps
 
 clippy:
-  extends:
+  stage: lint
-    - .fedora
+  extends: .flatpak
-    - .fdo.distribution-image@fedora
-  stage: extras
   script:
-    - cargo clippy --version
+    - flatpak-builder --keep-build-dirs --user --disable-rofiles-fuse --stop-at=${APP_FLATPAK_MODULE} ${FLATPAK_BUILD_DIR} ${MANIFEST_PATH}
-    - cargo clippy --color=always --all-targets -- -D warnings
+    - >-
+      flatpak-builder --run ${FLATPAK_BUILD_DIR} ${MANIFEST_PATH}
+      cargo clippy --color=always --all-targets -- -D warnings
+
+rustfmt:
+  stage: lint
+  image: "rust:slim" # TODO: Check image
+  script:
+    - rustup component add rustfmt
+    - rustc -Vv && cargo -Vv
+    - cargo fmt --version
+    - cargo fmt --all -- --color=always --check
+
+rustdoc:
+  stage: lint
+  extends: .flatpak
+  script:
+    - flatpak-builder --keep-build-dirs --user --disable-rofiles-fuse --stop-at=${APP_FLATPAK_MODULE} ${FLATPAK_BUILD_DIR} ${MANIFEST_PATH}
+    - >-
+      flatpak-builder --run ${FLATPAK_BUILD_DIR} ${MANIFEST_PATH}
+      env RUSTDOCFLAGS=-Dwarnings cargo doc --no-deps
+

Cargo.toml

@@ -1,9 +1,9 @@
 [package]
 name = "helvum"
-version = "0.3.3"
+version = "0.5.1"
-authors = ["Tom A. Wagner <tom.a.wagner@protonmail.com>"]
+authors = ["Tom Wagner <tom.a.wagner@protonmail.com>"]
 edition = "2021"
-rust-version = "1.56"
+rust-version = "1.70"
 license = "GPL-3.0-only"
 description = "A GTK patchbay for pipewire"
 repository = "https://gitlab.freedesktop.org/pipewire/helvum"
@@ -14,10 +14,14 @@ 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.8.0"
-gtk = { version = "0.4.1", package = "gtk4" }
+adw = { version = "0.6", package = "libadwaita", features = ["v1_4"] }
-glib = { version = "0.15.1", features = ["log"] }
+gtk = { version = "0.8", package = "gtk4", features = ["v4_14"] }
+glib = { version = "0.19", features = ["log"] }
+async-channel = "2.2"
 
 log = "0.4.11"
 
-once_cell = "1.7.2"
+once_cell = "1.19"
+
+libc = "0.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
 
@@ -22,7 +23,7 @@ $ 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}//46 org.freedesktop.Sdk.Extension.rust-stable//23.08 org.freedesktop.Sdk.Extension.llvm16//23.08
 ```
 
 To compile and install as a flatpak, clone the project, change to the project directory, and run:
@@ -41,7 +42,7 @@ For compilation, you will need:
 - Meson
 - An up-to-date rust toolchain
 - `libclang-3.7` or higher
-- `gtk-4.0` and `pipewire-0.3` development headers
+- `libadwaita-1` and `libpipewire-0.3` development packages and their dependencies
 
 To compile and install, run
 

build-aux/org.pipewire.Helvum.json

@@ -1,11 +1,11 @@
 {
-    "app-id": "org.pipewire.Helvum",
+    "id": "org.pipewire.Helvum",
     "runtime": "org.gnome.Platform",
-    "runtime-version": "41",
+    "runtime-version": "46",
     "sdk": "org.gnome.Sdk",
     "sdk-extensions": [
         "org.freedesktop.Sdk.Extension.rust-stable",
-        "org.freedesktop.Sdk.Extension.llvm12"
+        "org.freedesktop.Sdk.Extension.llvm16"
     ],
     "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/llvm16/bin",
-        "prepend-ld-library-path": "/usr/lib/sdk/llvm12/lib",
+        "prepend-ld-library-path": "/usr/lib/sdk/llvm16/lib",
         "build-args": [
             "--share=network"
         ]

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

@@ -23,6 +23,11 @@
     <url type="bugtracker">https://gitlab.freedesktop.org/pipewire/helvum/-/issues</url>
     <content_rating type="oars-1.0" />
     <releases>
+        <release version="0.5.1" date="2023-09-28" />
+        <release version="0.5.0" date="2023-09-28" />
+        <release version="0.4.1" date="2023-08-18" />
+        <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" />

meson.build

@@ -1,7 +1,7 @@
 project(
   'helvum',
   'rust',
-  version: '0.3.3',
+  version: '0.5.1',
   license: 'GPL-3.0',
   meson_version: '>=0.59.0'
 )
@@ -11,7 +11,8 @@ gnome = import('gnome')
 base_id = 'org.pipewire.Helvum'
 
 dependency('glib-2.0',     version: '>= 2.66')
-dependency('gtk4',     version: '>= 4.4.0')
+dependency('gtk4',         version: '>= 4.14.0')
+dependency('libadwaita-1', version: '>= 1.4')
 dependency('libpipewire-0.3')
 
 desktop_file_validate = find_program('desktop-file-validate', required: false)

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
@@ -17,80 +14,129 @@
 //
 // SPDX-License-Identifier: GPL-3.0-only
 
-use std::cell::RefCell;
+use adw::{
-
-use gtk::{
     gio,
-    glib::{self, clone, Continue, Receiver},
+    glib::{self, clone},
+    gtk,
     prelude::*,
     subclass::prelude::*,
 };
-use log::info;
+use pipewire::channel::Sender;
-use pipewire::{channel::Sender, spa::Direction};
 
-use crate::{
+use crate::{graph_manager::GraphManager, ui, GtkMessage, PipewireMessage};
-    view::{self},
-    GtkMessage, MediaType, NodeType, PipewireLink, PipewireMessage,
-};
 
 static STYLE: &str = include_str!("style.css");
+static APP_ID: &str = "org.pipewire.Helvum";
+static VERSION: &str = env!("CARGO_PKG_VERSION");
+static AUTHORS: &str = env!("CARGO_PKG_AUTHORS");
 
 mod imp {
     use super::*;
 
-    use once_cell::unsync::OnceCell;
+    use std::cell::OnceCell;
+
+    use adw::subclass::prelude::AdwApplicationImpl;
 
     #[derive(Default)]
     pub struct Application {
-        pub(super) graphview: view::GraphView,
+        pub(super) window: ui::Window,
-        pub(super) pw_sender: OnceCell<RefCell<Sender<GtkMessage>>>,
+        pub(super) graph_manager: OnceCell<GraphManager>,
     }
 
     #[glib::object_subclass]
     impl ObjectSubclass for Application {
         const NAME: &'static str = "HelvumApplication";
         type Type = super::Application;
-        type ParentType = gtk::Application;
+        type ParentType = adw::Application;
     }
 
     impl ObjectImpl for Application {}
     impl ApplicationImpl for Application {
-        fn activate(&self, app: &Self::Type) {
+        fn activate(&self) {
-            let scrollwindow = gtk::ScrolledWindow::builder()
+            let app = &*self.obj();
-                .child(&self.graphview)
+
-                .build();
+            let graphview = self.window.graph();
-            let window = gtk::ApplicationWindow::builder()
+
-                .application(app)
+            self.window.set_application(Some(app));
-                .default_width(1280)
+
-                .default_height(720)
+            let zoom_set_action =
-                .title("Helvum - Pipewire Patchbay")
+                gio::SimpleAction::new("set-zoom", Some(&f64::static_variant_type()));
-                .child(&scrollwindow)
+            zoom_set_action.connect_activate(clone!(@weak graphview => move|_, param| {
-                .build();
+                let zoom_factor = param.unwrap().get::<f64>().unwrap();
-            window
+                graphview.set_zoom_factor(zoom_factor, None)
-                .settings()
+            }));
-                .set_gtk_application_prefer_dark_theme(true);
+            self.window.add_action(&zoom_set_action);
-            window.show();
+
+            self.window.show();
         }
 
-        fn startup(&self, app: &Self::Type) {
+        fn startup(&self) {
-            self.parent_startup(app);
+            self.parent_startup();
+
+            self.obj()
+                .style_manager()
+                .set_color_scheme(adw::ColorScheme::PreferDark);
 
             // 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::style_context_add_provider_for_display(
                 &gtk::gdk::Display::default().expect("Error initializing gtk css provider."),
                 &provider,
                 gtk::STYLE_PROVIDER_PRIORITY_APPLICATION,
             );
+
+            self.setup_actions();
         }
     }
     impl GtkApplicationImpl for Application {}
+    impl AdwApplicationImpl for Application {}
+
+    impl Application {
+        fn setup_actions(&self) {
+            let obj = &*self.obj();
+
+            // Add <Control-Q> shortcut for quitting the application.
+            let quit = gtk::gio::SimpleAction::new("quit", None);
+            quit.connect_activate(clone!(@weak obj => move |_, _| {
+                obj.quit();
+            }));
+            obj.set_accels_for_action("app.quit", &["<Control>Q"]);
+            obj.add_action(&quit);
+
+            let action_about = gio::ActionEntry::builder("about")
+                .activate(|obj: &super::Application, _, _| {
+                    obj.imp().show_about_dialog();
+                })
+                .build();
+            obj.add_action_entries([action_about]);
+        }
+
+        fn show_about_dialog(&self) {
+            let obj = &*self.obj();
+            let window = obj.active_window().unwrap();
+            let authors: Vec<&str> = AUTHORS.split(':').collect();
+
+            let about_window = adw::AboutWindow::builder()
+                .transient_for(&window)
+                .application_icon(APP_ID)
+                .application_name("Helvum")
+                .developer_name("Tom Wagner")
+                .developers(authors)
+                .version(VERSION)
+                .website("https://gitlab.freedesktop.org/pipewire/helvum")
+                .issue_url("https://gitlab.freedesktop.org/pipewire/helvum/-/issues")
+                .license_type(gtk::License::Gpl30Only)
+                .build();
+
+            about_window.present();
+        }
+    }
 }
 
 glib::wrapper! {
     pub struct Application(ObjectSubclass<imp::Application>)
-        @extends gio::Application, gtk::Application,
+        @extends gio::Application, gtk::Application, adw::Application,
         @implements gio::ActionGroup, gio::ActionMap;
 }
 
@@ -98,164 +144,24 @@ impl Application {
     /// Create the view.
     /// This will set up the entire user interface and prepare it for being run.
     pub(super) fn new(
-        gtk_receiver: Receiver<PipewireMessage>,
+        gtk_receiver: async_channel::Receiver<PipewireMessage>,
         pw_sender: Sender<GtkMessage>,
     ) -> Self {
-        let app: Application = glib::Object::new(&[("application-id", &"org.pipewire.Helvum")])
+        let app: Application = glib::Object::builder()
-            .expect("Failed to create new Application");
+            .property("application-id", APP_ID)
+            .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`.
-            .map_err(|_| ())
-            .expect("pw_sender field was already set");
 
-        // Add <Control-Q> shortcut for quitting the application.
+        imp.graph_manager
-        let quit = gtk::gio::SimpleAction::new("quit", None);
+            .set(GraphManager::new(
-        quit.connect_activate(clone!(@weak app => move |_, _| {
+                &imp.window.graph(),
-            app.quit();
+                &imp.window.connection_banner(),
-        }));
+                pw_sender,
-        app.set_accels_for_action("app.quit", &["<Control>Q"]);
+                gtk_receiver,
-        app.add_action(&quit);
+            ))
-
+            .expect("Should be able to set graph manager");
-        // React to messages received from the pipewire thread.
-        gtk_receiver.attach(
-            None,
-            clone!(
-                @weak app => @default-return Continue(true),
-                move |msg| {
-                    match msg {
-                        PipewireMessage::NodeAdded{ id, name, node_type } => app.add_node(id, name.as_str(), node_type),
-                        PipewireMessage::PortAdded{ id, node_id, name, direction, media_type } => app.add_port(id, name.as_str(), node_id, direction, media_type),
-                        PipewireMessage::LinkAdded{ id, node_from, port_from, node_to, port_to, active} => app.add_link(id, node_from, port_from, node_to, port_to, active),
-                        PipewireMessage::LinkStateChanged { id, active } => app.link_state_changed(id, active), // TODO
-                        PipewireMessage::NodeRemoved { id } => app.remove_node(id),
-                        PipewireMessage::PortRemoved { id, node_id } => app.remove_port(id, node_id),
-                        PipewireMessage::LinkRemoved { id } => app.remove_link(id)
-                    };
-                    Continue(true)
-                }
-            ),
-        );
 
         app
     }
-
-    /// Add a new node to the view.
-    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(
-            id,
-            view::Node::new(name),
-            node_type,
-        );
-    }
-
-    /// Add a new port to the view.
-    fn add_port(
-        &self,
-        id: u32,
-        name: &str,
-        node_id: u32,
-        direction: Direction,
-        media_type: Option<MediaType>,
-    ) {
-        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.
-        port.connect_local(
-            "port_toggled",
-            false,
-            clone!(@weak self as app => @default-return None, move |args| {
-                // Args always look like this: &[widget, id_port_from, id_port_to]
-                let port_from = args[1].get::<u32>().unwrap();
-                let port_to = args[2].get::<u32>().unwrap();
-
-                app.toggle_link(port_from, port_to);
-
-                None
-            }),
-        );
-
-        imp.graphview.add_port(node_id, id, port);
-    }
-
-    /// Add a new link to the view.
-    fn add_link(
-        &self,
-        id: u32,
-        node_from: u32,
-        port_from: u32,
-        node_to: u32,
-        port_to: u32,
-        active: bool,
-    ) {
-        info!("Adding link to graph: id {}", id);
-
-        // 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(
-            id,
-            PipewireLink {
-                node_from,
-                port_from,
-                node_to,
-                port_to,
-            },
-            active,
-        );
-    }
-
-    fn link_state_changed(&self, id: u32, active: bool) {
-        info!(
-            "Link state changed: Link (id={}) is now {}",
-            id,
-            if active { "active" } else { "inactive" }
-        );
-
-        imp::Application::from_instance(self)
-            .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 = imp.pw_sender.get().expect("pw_sender not set").borrow_mut();
-        sender
-            .send(GtkMessage::ToggleLink { port_from, port_to })
-            .expect("Failed to send message");
-    }
-
-    /// Remove the node with the specified id from the view.
-    fn remove_node(&self, id: u32) {
-        info!("Removing node from graph: id {}", id);
-
-        let imp = imp::Application::from_instance(self);
-        imp.graphview.remove_node(id);
-    }
-
-    /// Remove the port with the id `id` from the node with the id `node_id`
-    /// from the view.
-    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);
-        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);
-        imp.graphview.remove_link(id);
-    }
 }

src/graph_manager.rs

@@ -0,0 +1,379 @@
+// 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, prelude::*, subclass::prelude::*};
+
+use pipewire::channel::Sender as PwSender;
+
+use crate::{ui::graph::GraphView, GtkMessage, PipewireMessage};
+
+mod imp {
+    use super::*;
+
+    use std::{cell::OnceCell, cell::RefCell, collections::HashMap};
+
+    use crate::{ui::graph, MediaType, NodeType};
+
+    #[derive(Default, glib::Properties)]
+    #[properties(wrapper_type = super::GraphManager)]
+    pub struct GraphManager {
+        #[property(get, set, construct_only)]
+        pub graph: OnceCell<crate::ui::graph::GraphView>,
+
+        #[property(get, set, construct_only)]
+        pub connection_banner: OnceCell<adw::Banner>,
+
+        pub pw_sender: OnceCell<PwSender<crate::GtkMessage>>,
+        pub items: RefCell<HashMap<u32, glib::Object>>,
+    }
+
+    #[glib::object_subclass]
+    impl ObjectSubclass for GraphManager {
+        const NAME: &'static str = "HelvumGraphManager";
+        type Type = super::GraphManager;
+        type ParentType = glib::Object;
+    }
+
+    #[glib::derived_properties]
+    impl ObjectImpl for GraphManager {}
+
+    impl GraphManager {
+        pub async fn receive(&self, receiver: async_channel::Receiver<crate::PipewireMessage>) {
+            loop {
+                let Ok(msg) = receiver.recv().await else {
+                    continue;
+                };
+                match msg {
+                    PipewireMessage::NodeAdded {
+                        id,
+                        name,
+                        node_type,
+                    } => self.add_node(id, name.as_str(), node_type),
+                    PipewireMessage::NodeNameChanged {
+                        id,
+                        name,
+                        media_name,
+                    } => self.node_name_changed(id, &name, &media_name),
+                    PipewireMessage::PortAdded {
+                        id,
+                        node_id,
+                        name,
+                        direction,
+                    } => self.add_port(id, name.as_str(), node_id, direction),
+                    PipewireMessage::PortFormatChanged { id, media_type } => {
+                        self.port_media_type_changed(id, media_type)
+                    }
+                    PipewireMessage::LinkAdded {
+                        id,
+                        port_from,
+                        port_to,
+                        active,
+                        media_type,
+                    } => self.add_link(id, port_from, port_to, active, media_type),
+                    PipewireMessage::LinkStateChanged { id, active } => {
+                        self.link_state_changed(id, active)
+                    }
+                    PipewireMessage::LinkFormatChanged { id, media_type } => {
+                        self.link_format_changed(id, media_type)
+                    }
+                    PipewireMessage::NodeRemoved { id } => self.remove_node(id),
+                    PipewireMessage::PortRemoved { id, node_id } => self.remove_port(id, node_id),
+                    PipewireMessage::LinkRemoved { id } => self.remove_link(id),
+                    PipewireMessage::Connecting => {
+                        self.obj().connection_banner().set_revealed(true);
+                    }
+                    PipewireMessage::Connected => {
+                        self.obj().connection_banner().set_revealed(false);
+                    }
+                    PipewireMessage::Disconnected => {
+                        self.clear();
+                    }
+                };
+            }
+        }
+
+        /// Add a new node to the view.
+        fn add_node(&self, id: u32, name: &str, node_type: Option<NodeType>) {
+            log::info!("Adding node to graph: id {}", id);
+
+            let node = graph::Node::new(name, id);
+
+            self.items.borrow_mut().insert(id, node.clone().upcast());
+
+            self.obj().graph().add_node(node, node_type);
+        }
+
+        /// Update a node tooltip to the view.
+        fn node_name_changed(&self, id: u32, node_name: &str, media_name: &str) {
+            let items = self.items.borrow();
+
+            let Some(node) = items.get(&id) else {
+                log::warn!("Node (id: {id}) for changed name not found in graph manager");
+                return;
+            };
+            let Some(node) = node.dynamic_cast_ref::<graph::Node>() else {
+                log::warn!("Graph Manager item under node (id: {id}) is not a node");
+                return;
+            };
+
+            node.set_node_name(node_name);
+            node.set_media_name(media_name);
+        }
+
+        /// Remove the node with the specified id from the view.
+        fn remove_node(&self, id: u32) {
+            log::info!("Removing node from graph: id {}", id);
+
+            let Some(node) = self.items.borrow_mut().remove(&id) else {
+                log::warn!("Unknown node (id={id}) removed from graph");
+                return;
+            };
+            let Ok(node) = node.dynamic_cast::<graph::Node>() else {
+                log::warn!("Graph Manager item under node id {id} is not a node");
+                return;
+            };
+
+            self.obj().graph().remove_node(&node);
+        }
+
+        /// Add a new port to the view.
+        fn add_port(
+            &self,
+            id: u32,
+            name: &str,
+            node_id: u32,
+            direction: pipewire::spa::utils::Direction,
+        ) {
+            log::info!("Adding port to graph: id {}", id);
+
+            let mut items = self.items.borrow_mut();
+
+            let Some(node) = items.get(&node_id) else {
+                log::warn!("Node (id: {node_id}) for port (id: {id}) not found in graph manager");
+                return;
+            };
+            let Ok(node) = node.clone().dynamic_cast::<graph::Node>() else {
+                log::warn!("Graph Manager item under node id {node_id} is not a node");
+                return;
+            };
+
+            let port = graph::Port::new(id, name, direction);
+
+            // Create or delete a link if the widget emits the "port-toggled" signal.
+            port.connect_local(
+                "port_toggled",
+                false,
+                glib::clone!(@weak self as app => @default-return None, move |args| {
+                    // Args always look like this: &[widget, id_port_from, id_port_to]
+                    let port_from = args[1].get::<u32>().unwrap();
+                    let port_to = args[2].get::<u32>().unwrap();
+
+                    app.toggle_link(port_from, port_to);
+
+                    None
+                }),
+            );
+
+            items.insert(id, port.clone().upcast());
+
+            node.add_port(port);
+        }
+
+        fn port_media_type_changed(&self, id: u32, media_type: MediaType) {
+            let items = self.items.borrow();
+
+            let Some(port) = items.get(&id) else {
+                log::warn!("Port (id: {id}) for changed media type not found in graph manager");
+                return;
+            };
+            let Some(port) = port.dynamic_cast_ref::<graph::Port>() else {
+                log::warn!("Graph Manager item under port id {id} is not a port");
+                return;
+            };
+
+            port.set_media_type(media_type.as_raw())
+        }
+
+        /// Remove the port with the id `id` from the node with the id `node_id`
+        /// from the view.
+        fn remove_port(&self, id: u32, node_id: u32) {
+            log::info!("Removing port from graph: id {}, node_id: {}", id, node_id);
+
+            let mut items = self.items.borrow_mut();
+
+            let Some(node) = items.get(&node_id) else {
+                log::warn!("Node (id: {node_id}) for port (id: {id}) not found in graph manager");
+                return;
+            };
+            let Ok(node) = node.clone().dynamic_cast::<graph::Node>() else {
+                log::warn!("Graph Manager item under node id {node_id} is not a node");
+                return;
+            };
+            let Some(port) = items.remove(&id) else {
+                log::warn!("Unknown Port (id: {id}) removed from graph");
+                return;
+            };
+            let Ok(port) = port.dynamic_cast::<graph::Port>() else {
+                log::warn!("Graph Manager item under port id {id} is not a port");
+                return;
+            };
+
+            node.remove_port(&port);
+        }
+
+        /// Add a new link to the view.
+        fn add_link(
+            &self,
+            id: u32,
+            output_port_id: u32,
+            input_port_id: u32,
+            active: bool,
+            media_type: MediaType,
+        ) {
+            log::info!("Adding link to graph: id {}", id);
+
+            let mut items = self.items.borrow_mut();
+
+            let Some(output_port) = items.get(&output_port_id) else {
+                log::warn!("Output port (id: {output_port_id}) for link (id: {id}) not found in graph manager");
+                return;
+            };
+            let Ok(output_port) = output_port.clone().dynamic_cast::<graph::Port>() else {
+                log::warn!("Graph Manager item under port id {output_port_id} is not a port");
+                return;
+            };
+            let Some(input_port) = items.get(&input_port_id) else {
+                log::warn!("Output port (id: {input_port_id}) for link (id: {id}) not found in graph manager");
+                return;
+            };
+            let Ok(input_port) = input_port.clone().dynamic_cast::<graph::Port>() else {
+                log::warn!("Graph Manager item under port id {input_port_id} is not a port");
+                return;
+            };
+
+            let link = graph::Link::new();
+            link.set_output_port(Some(&output_port));
+            link.set_input_port(Some(&input_port));
+            link.set_active(active);
+            link.set_media_type(media_type);
+
+            items.insert(id, link.clone().upcast());
+
+            // Update graph to contain the new link.
+            self.graph
+                .get()
+                .expect("graph should be set")
+                .add_link(link);
+        }
+
+        fn link_state_changed(&self, id: u32, active: bool) {
+            log::info!(
+                "Link state changed: Link (id={id}) is now {}",
+                if active { "active" } else { "inactive" }
+            );
+
+            let items = self.items.borrow();
+
+            let Some(link) = items.get(&id) else {
+                log::warn!("Link state changed on unknown link (id={id})");
+                return;
+            };
+            let Some(link) = link.dynamic_cast_ref::<graph::Link>() else {
+                log::warn!("Graph Manager item under link id {id} is not a link");
+                return;
+            };
+
+            link.set_active(active);
+        }
+
+        fn link_format_changed(
+            &self,
+            id: u32,
+            media_type: pipewire::spa::param::format::MediaType,
+        ) {
+            let items = self.items.borrow();
+
+            let Some(link) = items.get(&id) else {
+                log::warn!("Link (id: {id}) for changed media type not found in graph manager");
+                return;
+            };
+            let Some(link) = link.dynamic_cast_ref::<graph::Link>() else {
+                log::warn!("Graph Manager item under link id {id} is not a link");
+                return;
+            };
+            link.set_media_type(media_type);
+        }
+
+        // Toggle a link between the two specified ports on the remote pipewire server.
+        fn toggle_link(&self, port_from: u32, port_to: u32) {
+            let sender = self.pw_sender.get().expect("pw_sender shoud be set");
+            sender
+                .send(crate::GtkMessage::ToggleLink { port_from, port_to })
+                .expect("Failed to send message");
+        }
+
+        /// Remove the link with the specified id from the view.
+        fn remove_link(&self, id: u32) {
+            log::info!("Removing link from graph: id {}", id);
+
+            let Some(link) = self.items.borrow_mut().remove(&id) else {
+                log::warn!("Unknown Link (id={id}) removed from graph");
+                return;
+            };
+            let Ok(link) = link.dynamic_cast::<graph::Link>() else {
+                log::warn!("Graph Manager item under link id {id} is not a link");
+                return;
+            };
+
+            self.obj().graph().remove_link(&link);
+        }
+
+        fn clear(&self) {
+            self.items.borrow_mut().clear();
+            self.obj().graph().clear();
+        }
+    }
+}
+
+glib::wrapper! {
+    pub struct GraphManager(ObjectSubclass<imp::GraphManager>);
+}
+
+async fn receive(graph_manager: GraphManager, receiver: async_channel::Receiver<PipewireMessage>) {
+    graph_manager.imp().receive(receiver).await
+}
+
+impl GraphManager {
+    pub fn new(
+        graph: &GraphView,
+        connection_banner: &adw::Banner,
+        sender: PwSender<GtkMessage>,
+        receiver: async_channel::Receiver<PipewireMessage>,
+    ) -> Self {
+        let res: Self = glib::Object::builder()
+            .property("graph", graph)
+            .property("connection-banner", connection_banner)
+            .build();
+
+        glib::MainContext::default().spawn_local(receive(res.clone(), receiver));
+        assert!(
+            res.imp().pw_sender.set(sender).is_ok(),
+            "Should be able to set pw_sender)"
+        );
+
+        res
+    }
+}

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
@@ -18,16 +15,16 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 mod application;
+mod graph_manager;
 mod pipewire_connection;
-mod view;
+mod ui;
 
-use glib::PRIORITY_DEFAULT;
+use adw::{gtk, prelude::*};
-use gtk::prelude::*;
+use pipewire::spa::{param::format::MediaType, utils::Direction};
-use pipewire::spa::Direction;
 
 /// Messages sent by the GTK thread to notify the pipewire thread.
 #[derive(Debug, Clone)]
-enum GtkMessage {
+pub enum GtkMessage {
     /// Toggle a link between the two specified ports.
     ToggleLink { port_from: u32, port_to: u32 },
     /// Quit the event loop and let the thread finish.
@@ -36,31 +33,42 @@ enum GtkMessage {
 
 /// Messages sent by the pipewire thread to notify the GTK thread.
 #[derive(Debug, Clone)]
-enum PipewireMessage {
+pub enum PipewireMessage {
     NodeAdded {
         id: u32,
         name: String,
         node_type: Option<NodeType>,
     },
+    NodeNameChanged {
+        id: u32,
+        name: String,
+        media_name: String,
+    },
     PortAdded {
         id: u32,
         node_id: u32,
         name: String,
         direction: Direction,
-        media_type: Option<MediaType>,
+    },
+    PortFormatChanged {
+        id: u32,
+        media_type: MediaType,
     },
     LinkAdded {
         id: u32,
-        node_from: u32,
         port_from: u32,
-        node_to: u32,
         port_to: u32,
         active: bool,
+        media_type: MediaType,
     },
     LinkStateChanged {
         id: u32,
         active: bool,
     },
+    LinkFormatChanged {
+        id: u32,
+        media_type: MediaType,
+    },
     NodeRemoved {
         id: u32,
     },
@@ -71,6 +79,9 @@ enum PipewireMessage {
     LinkRemoved {
         id: u32,
     },
+    Connecting,
+    Connected,
+    Disconnected,
 }
 
 #[derive(Debug, Clone)]
@@ -79,13 +90,6 @@ pub enum NodeType {
     Output,
 }
 
-#[derive(Debug, Copy, Clone)]
-pub enum MediaType {
-    Audio,
-    Video,
-    Midi,
-}
-
 #[derive(Debug, Clone)]
 pub struct PipewireLink {
     pub node_from: u32,
@@ -115,7 +119,8 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
     let _guard = ctx.acquire().unwrap();
 
     // Start the pipewire thread with channels in both directions.
-    let (gtk_sender, gtk_receiver) = glib::MainContext::channel(PRIORITY_DEFAULT);
+
+    let (gtk_sender, gtk_receiver) = async_channel::unbounded();
     let (pw_sender, pw_receiver) = pipewire::channel::channel();
     let pw_thread =
         std::thread::spawn(move || pipewire_connection::thread_main(gtk_sender, pw_receiver));

src/pipewire_connection.rs

@@ -1,321 +0,0 @@
-// 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
-// the Free Software Foundation, either version 3 of the License, or
-// (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
-// 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
-
-mod state;
-
-use std::{cell::RefCell, collections::HashMap, rc::Rc};
-
-use gtk::glib::{self, clone};
-use log::{debug, info, warn};
-use pipewire::{
-    link::{Link, LinkChangeMask, LinkListener, LinkState},
-    prelude::*,
-    properties,
-    registry::{GlobalObject, Registry},
-    spa::{Direction, ForeignDict},
-    types::ObjectType,
-    Context, Core, MainLoop,
-};
-
-use crate::{GtkMessage, MediaType, NodeType, PipewireMessage};
-use state::{Item, State};
-
-enum ProxyItem {
-    Link {
-        _proxy: Link,
-        _listener: LinkListener,
-    },
-}
-
-/// The "main" function of the pipewire thread.
-pub(super) fn thread_main(
-    gtk_sender: glib::Sender<PipewireMessage>,
-    pw_receiver: pipewire::channel::Receiver<GtkMessage>,
-) {
-    let mainloop = MainLoop::new().expect("Failed to create mainloop");
-    let context = Context::new(&mainloop).expect("Failed to create context");
-    let core = Rc::new(context.connect(None).expect("Failed to connect to remote"));
-    let registry = Rc::new(core.get_registry().expect("Failed to get registry"));
-
-    // Keep proxies and their listeners alive so that we can receive info events.
-    let proxies = Rc::new(RefCell::new(HashMap::new()));
-
-    let state = Rc::new(RefCell::new(State::new()));
-
-    let _receiver = pw_receiver.attach(&mainloop, {
-        clone!(@strong mainloop, @weak core, @weak registry, @strong state => move |msg| match msg {
-            GtkMessage::ToggleLink { port_from, port_to } => toggle_link(port_from, port_to, &core, &registry, &state),
-            GtkMessage::Terminate => mainloop.quit(),
-        })
-    });
-
-    let _listener = registry
-        .add_listener_local()
-        .global(clone!(@strong gtk_sender, @weak registry, @strong proxies, @strong state =>
-            move |global| match global.type_ {
-                ObjectType::Node => handle_node(global, &gtk_sender, &state),
-                ObjectType::Port => handle_port(global, &gtk_sender, &state),
-                ObjectType::Link => handle_link(global, &gtk_sender, &registry, &proxies, &state),
-                _ => {
-                    // Other objects are not interesting to us
-                }
-            }
-        ))
-        .global_remove(clone!(@strong proxies, @strong state => move |id| {
-            if let Some(item) = state.borrow_mut().remove(id) {
-                gtk_sender.send(match item {
-                    Item::Node { .. } => PipewireMessage::NodeRemoved {id},
-                    Item::Port { node_id } => PipewireMessage::PortRemoved {id, node_id},
-                    Item::Link { .. } => PipewireMessage::LinkRemoved {id},
-                }).expect("Failed to send message");
-            } else {
-                warn!(
-                    "Attempted to remove item with id {} that is not saved in state",
-                    id
-                );
-            }
-
-            proxies.borrow_mut().remove(&id);
-        }))
-        .register();
-
-    mainloop.run();
-}
-
-/// Handle a new node being added
-fn handle_node(
-    node: &GlobalObject<ForeignDict>,
-    sender: &glib::Sender<PipewireMessage>,
-    state: &Rc<RefCell<State>>,
-) {
-    let props = node
-        .props
-        .as_ref()
-        .expect("Node object is missing properties");
-
-    // Get the nicest possible name for the node, using a fallback chain of possible name attributes.
-    let name = String::from(
-        props
-            .get("node.nick")
-            .or_else(|| props.get("node.description"))
-            .or_else(|| props.get("node.name"))
-            .unwrap_or_default(),
-    );
-
-    // FIXME: Instead of checking these props, the "EnumFormat" parameter should be checked instead.
-    let media_type = props.get("media.class").and_then(|class| {
-        if class.contains("Audio") {
-            Some(MediaType::Audio)
-        } else if class.contains("Video") {
-            Some(MediaType::Video)
-        } else if class.contains("Midi") {
-            Some(MediaType::Midi)
-        } else {
-            None
-        }
-    });
-
-    let media_class = |class: &str| {
-        if class.contains("Sink") || class.contains("Input") {
-            Some(NodeType::Input)
-        } else if class.contains("Source") || class.contains("Output") {
-            Some(NodeType::Output)
-        } else {
-            None
-        }
-    };
-
-    let node_type = props
-        .get("media.category")
-        .and_then(|class| {
-            if class.contains("Duplex") {
-                None
-            } else {
-                props.get("media.class").and_then(media_class)
-            }
-        })
-        .or_else(|| props.get("media.class").and_then(media_class));
-
-    state.borrow_mut().insert(
-        node.id,
-        Item::Node {
-            // widget: node_widget,
-            media_type,
-        },
-    );
-
-    sender
-        .send(PipewireMessage::NodeAdded {
-            id: node.id,
-            name,
-            node_type,
-        })
-        .expect("Failed to send message");
-}
-
-/// Handle a new port being added
-fn handle_port(
-    port: &GlobalObject<ForeignDict>,
-    sender: &glib::Sender<PipewireMessage>,
-    state: &Rc<RefCell<State>>,
-) {
-    let props = port
-        .props
-        .as_ref()
-        .expect("Port object is missing properties");
-    let name = props.get("port.name").unwrap_or_default().to_string();
-    let node_id: u32 = props
-        .get("node.id")
-        .expect("Port has no node.id property!")
-        .parse()
-        .expect("Could not parse node.id property");
-    let direction = if matches!(props.get("port.direction"), Some("in")) {
-        Direction::Input
-    } else {
-        Direction::Output
-    };
-
-    // Find out the nodes media type so that the port can be colored.
-    let media_type = if let Some(Item::Node { media_type, .. }) = state.borrow().get(node_id) {
-        media_type.to_owned()
-    } else {
-        warn!("Node not found for Port {}", port.id);
-        None
-    };
-
-    // Save node_id so we can delete this port easily.
-    state.borrow_mut().insert(port.id, Item::Port { node_id });
-
-    sender
-        .send(PipewireMessage::PortAdded {
-            id: port.id,
-            node_id,
-            name,
-            direction,
-            media_type,
-        })
-        .expect("Failed to send message");
-}
-
-/// Handle a new link being added
-fn handle_link(
-    link: &GlobalObject<ForeignDict>,
-    sender: &glib::Sender<PipewireMessage>,
-    registry: &Rc<Registry>,
-    proxies: &Rc<RefCell<HashMap<u32, ProxyItem>>>,
-    state: &Rc<RefCell<State>>,
-) {
-    debug!(
-        "New link (id:{}) appeared, setting up info listener.",
-        link.id
-    );
-
-    let proxy: Link = registry.bind(link).expect("Failed to bind to link proxy");
-    let listener = proxy
-        .add_listener_local()
-        .info(clone!(@strong state, @strong sender => move |info| {
-            debug!("Received link info: {:?}", info);
-
-            let id = info.id();
-
-            let mut state = state.borrow_mut();
-            if let Some(Item::Link { .. }) = state.get(id) {
-                // Info was an update - figure out if we should notify the gtk thread
-                if info.change_mask().contains(LinkChangeMask::STATE) {
-                    sender.send(PipewireMessage::LinkStateChanged {
-                        id,
-                        active: matches!(info.state(), LinkState::Active)
-                    }).expect("Failed to send message");
-                }
-                // TODO -- check other values that might have changed
-            } else {
-                // First time we get info. We can now notify the gtk thread of a new link.
-                let node_from = info.output_node_id();
-                let port_from = info.output_port_id();
-                let node_to = info.input_node_id();
-                let port_to = info.input_port_id();
-
-                state.insert(id, Item::Link {
-                    port_from, port_to
-                });
-
-                sender.send(PipewireMessage::LinkAdded {
-                    id,
-                    node_from,
-                    port_from,
-                    node_to,
-                    port_to,
-                    active: matches!(info.state(), LinkState::Active)
-                }).expect(
-                    "Failed to send message"
-                );
-            }
-        }))
-        .register();
-
-    proxies.borrow_mut().insert(
-        link.id,
-        ProxyItem::Link {
-            _proxy: proxy,
-            _listener: listener,
-        },
-    );
-}
-
-/// Toggle a link between the two specified ports.
-fn toggle_link(
-    port_from: u32,
-    port_to: u32,
-    core: &Rc<Core>,
-    registry: &Rc<Registry>,
-    state: &Rc<RefCell<State>>,
-) {
-    let state = state.borrow_mut();
-    if let Some(id) = state.get_link_id(port_from, port_to) {
-        info!("Requesting removal of link with id {}", id);
-
-        // FIXME: Handle error
-        registry.destroy_global(id);
-    } else {
-        info!(
-            "Requesting creation of link from port id:{} to port id:{}",
-            port_from, port_to
-        );
-
-        let node_from = state
-            .get_node_of_port(port_from)
-            .expect("Requested port not in state");
-        let node_to = state
-            .get_node_of_port(port_to)
-            .expect("Requested port not in state");
-
-        if let Err(e) = core.create_object::<Link, _>(
-            "link-factory",
-            &properties! {
-                "link.output.node" => node_from.to_string(),
-                "link.output.port" => port_from.to_string(),
-                "link.input.node" => node_to.to_string(),
-                "link.input.port" => port_to.to_string(),
-                "object.linger" => "1"
-            },
-        ) {
-            warn!("Failed to create link: {}", e);
-        }
-    }
-}

src/pipewire_connection/mod.rs

@@ -0,0 +1,525 @@
+// 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
+
+mod state;
+
+use std::{
+    cell::{Cell, RefCell},
+    collections::HashMap,
+    rc::Rc,
+    time::Duration,
+};
+
+use adw::glib::{self, clone};
+use log::{debug, error, info, warn};
+use pipewire::{
+    context::Context,
+    core::{Core, PW_ID_CORE},
+    keys,
+    link::{Link, LinkChangeMask, LinkInfoRef, LinkListener, LinkState},
+    main_loop::MainLoop,
+    node::{Node, NodeInfoRef, NodeListener},
+    port::{Port, PortChangeMask, PortInfoRef, PortListener},
+    properties::properties,
+    registry::{GlobalObject, Registry},
+    spa::{
+        param::{ParamInfoFlags, ParamType},
+        utils::dict::DictRef,
+        utils::result::SpaResult,
+    },
+    types::ObjectType,
+};
+
+use crate::{GtkMessage, MediaType, NodeType, PipewireMessage};
+use state::{Item, State};
+
+enum ProxyItem {
+    Node {
+        _proxy: Node,
+        _listener: NodeListener,
+    },
+    Port {
+        proxy: Port,
+        _listener: PortListener,
+    },
+    Link {
+        _proxy: Link,
+        _listener: LinkListener,
+    },
+}
+
+/// The "main" function of the pipewire thread.
+pub(super) fn thread_main(
+    gtk_sender: async_channel::Sender<PipewireMessage>,
+    mut pw_receiver: pipewire::channel::Receiver<GtkMessage>,
+) {
+    let mainloop = MainLoop::new(None).expect("Failed to create mainloop");
+    let context = Rc::new(Context::new(&mainloop).expect("Failed to create context"));
+    let is_stopped = Rc::new(Cell::new(false));
+    let mut is_connecting = false;
+
+    while !is_stopped.get() {
+        // Try to connect
+        let core = match context.connect(Some(properties! {
+            "media.category" => "Manager"
+        })) {
+            Ok(core) => Rc::new(core),
+            Err(_) => {
+                if !is_connecting {
+                    is_connecting = true;
+                    gtk_sender
+                        .send_blocking(PipewireMessage::Connecting)
+                        .expect("Failed to send message");
+                }
+
+                // If connection is failed, try to connect again in 200ms
+                let interval = Some(Duration::from_millis(200));
+
+                let timer = mainloop
+                    .loop_()
+                    .add_timer(clone!(@strong mainloop => move |_| {
+                        mainloop.quit();
+                    }));
+
+                timer.update_timer(interval, None).into_result().unwrap();
+
+                let receiver = pw_receiver.attach(mainloop.loop_(), {
+                    clone!(@strong mainloop, @strong is_stopped => move |msg|
+                        if let GtkMessage::Terminate = msg {
+                            // main thread requested stop
+                            is_stopped.set(true);
+                            mainloop.quit();
+                        }
+                    )
+                });
+
+                mainloop.run();
+                pw_receiver = receiver.deattach();
+
+                continue;
+            }
+        };
+
+        if is_connecting {
+            is_connecting = false;
+            gtk_sender
+                .send_blocking(PipewireMessage::Connected)
+                .expect("Failed to send message");
+        }
+
+        let registry = Rc::new(core.get_registry().expect("Failed to get registry"));
+
+        // Keep proxies and their listeners alive so that we can receive info events.
+        let proxies = Rc::new(RefCell::new(HashMap::new()));
+        let state = Rc::new(RefCell::new(State::new()));
+
+        let receiver = pw_receiver.attach(mainloop.loop_(), {
+            clone!(@strong mainloop, @weak core, @weak registry, @strong state, @strong is_stopped => move |msg| match msg {
+                GtkMessage::ToggleLink { port_from, port_to } => toggle_link(port_from, port_to, &core, &registry, &state),
+                GtkMessage::Terminate => {
+                    // main thread requested stop
+                    is_stopped.set(true);
+                    mainloop.quit();
+                }
+            })
+        });
+
+        let gtk_sender = gtk_sender.clone();
+        let _listener = core.add_listener_local()
+            .error(clone!(@strong mainloop, @strong gtk_sender, @strong is_stopped => move |id, _seq, res, message| {
+                if id != PW_ID_CORE {
+                    return;
+                }
+
+                if res == -libc::EPIPE {
+                    gtk_sender.send_blocking(PipewireMessage::Disconnected)
+                        .expect("Failed to send message");
+                    mainloop.quit();
+                } else {
+                    let serr = SpaResult::from_c(res).into_result().unwrap_err();
+                    error!("Pipewire Core received error {serr}: {message}");
+                }
+            }))
+            .register();
+
+        let _listener = registry
+            .add_listener_local()
+            .global(clone!(@strong gtk_sender, @weak registry, @strong proxies, @strong state =>
+                move |global| match global.type_ {
+                    ObjectType::Node => handle_node(global, &gtk_sender, &registry, &proxies, &state),
+                    ObjectType::Port => handle_port(global, &gtk_sender, &registry, &proxies, &state),
+                    ObjectType::Link => handle_link(global, &gtk_sender, &registry, &proxies, &state),
+                    _ => {
+                        // Other objects are not interesting to us
+                    }
+                }
+            ))
+            .global_remove(clone!(@strong proxies, @strong state => move |id| {
+                if let Some(item) = state.borrow_mut().remove(id) {
+                    gtk_sender.send_blocking(match item {
+                        Item::Node { .. } => PipewireMessage::NodeRemoved {id},
+                        Item::Port { node_id } => PipewireMessage::PortRemoved {id, node_id},
+                        Item::Link { .. } => PipewireMessage::LinkRemoved {id},
+                    }).expect("Failed to send message");
+                } else {
+                    warn!(
+                        "Attempted to remove item with id {} that is not saved in state",
+                        id
+                    );
+                }
+
+                proxies.borrow_mut().remove(&id);
+            }))
+            .register();
+
+        mainloop.run();
+        pw_receiver = receiver.deattach();
+    }
+}
+
+/// Get the nicest possible name for the node, using a fallback chain of possible name attributes
+fn get_node_name(props: &DictRef) -> &str {
+    props
+        .get(&keys::NODE_DESCRIPTION)
+        .or_else(|| props.get(&keys::NODE_NICK))
+        .or_else(|| props.get(&keys::NODE_NAME))
+        .unwrap_or_default()
+}
+
+/// Handle a new node being added
+fn handle_node(
+    node: &GlobalObject<&DictRef>,
+    sender: &async_channel::Sender<PipewireMessage>,
+    registry: &Rc<Registry>,
+    proxies: &Rc<RefCell<HashMap<u32, ProxyItem>>>,
+    state: &Rc<RefCell<State>>,
+) {
+    let props = node
+        .props
+        .as_ref()
+        .expect("Node object is missing properties");
+
+    let name = get_node_name(props).to_string();
+    let media_class = |class: &str| {
+        if class.contains("Sink") || class.contains("Input") {
+            Some(NodeType::Input)
+        } else if class.contains("Source") || class.contains("Output") {
+            Some(NodeType::Output)
+        } else {
+            None
+        }
+    };
+
+    let node_type = props
+        .get("media.category")
+        .and_then(|class| {
+            if class.contains("Duplex") {
+                None
+            } else {
+                props.get("media.class").and_then(media_class)
+            }
+        })
+        .or_else(|| props.get("media.class").and_then(media_class));
+
+    state.borrow_mut().insert(node.id, Item::Node);
+
+    sender
+        .send_blocking(PipewireMessage::NodeAdded {
+            id: node.id,
+            name,
+            node_type,
+        })
+        .expect("Failed to send message");
+
+    let proxy: Node = registry.bind(node).expect("Failed to bind to node proxy");
+    let listener = proxy
+        .add_listener_local()
+        .info(clone!(@strong sender, @strong proxies => move |info| {
+            handle_node_info(info, &sender, &proxies);
+        }))
+        .register();
+
+    proxies.borrow_mut().insert(
+        node.id,
+        ProxyItem::Node {
+            _proxy: proxy,
+            _listener: listener,
+        },
+    );
+}
+
+fn handle_node_info(
+    info: &NodeInfoRef,
+    sender: &async_channel::Sender<PipewireMessage>,
+    proxies: &Rc<RefCell<HashMap<u32, ProxyItem>>>,
+) {
+    debug!("Received node info: {:?}", info);
+
+    let id = info.id();
+    let proxies = proxies.borrow();
+    let Some(ProxyItem::Node { .. }) = proxies.get(&id) else {
+        error!("Received info on unknown node with id {id}");
+        return;
+    };
+
+    let props = info.props().expect("NodeInfo object is missing properties");
+    if let Some(media_name) = props.get(&keys::MEDIA_NAME) {
+        let name = get_node_name(props).to_string();
+
+        sender
+            .send_blocking(PipewireMessage::NodeNameChanged {
+                id,
+                name,
+                media_name: media_name.to_string(),
+            })
+            .expect("Failed to send message");
+    }
+}
+
+/// Handle a new port being added
+fn handle_port(
+    port: &GlobalObject<&DictRef>,
+    sender: &async_channel::Sender<PipewireMessage>,
+    registry: &Rc<Registry>,
+    proxies: &Rc<RefCell<HashMap<u32, ProxyItem>>>,
+    state: &Rc<RefCell<State>>,
+) {
+    let port_id = port.id;
+    let proxy: Port = registry.bind(port).expect("Failed to bind to port proxy");
+    let listener = proxy
+        .add_listener_local()
+        .info(
+            clone!(@strong proxies, @strong state, @strong sender => move |info| {
+                handle_port_info(info, &proxies, &state, &sender);
+            }),
+        )
+        .param(clone!(@strong sender => move |_, param_id, _, _, param| {
+            if param_id == ParamType::EnumFormat {
+                handle_port_enum_format(port_id, param, &sender)
+            }
+        }))
+        .register();
+
+    proxies.borrow_mut().insert(
+        port.id,
+        ProxyItem::Port {
+            proxy,
+            _listener: listener,
+        },
+    );
+}
+
+fn handle_port_info(
+    info: &PortInfoRef,
+    proxies: &Rc<RefCell<HashMap<u32, ProxyItem>>>,
+    state: &Rc<RefCell<State>>,
+    sender: &async_channel::Sender<PipewireMessage>,
+) {
+    debug!("Received port info: {:?}", info);
+
+    let id = info.id();
+    let proxies = proxies.borrow();
+    let Some(ProxyItem::Port { proxy, .. }) = proxies.get(&id) else {
+        log::error!("Received info on unknown port with id {id}");
+        return;
+    };
+
+    let mut state = state.borrow_mut();
+
+    if let Some(Item::Port { .. }) = state.get(id) {
+        // Info was an update, figure out if we should notify the GTK thread
+        if info.change_mask().contains(PortChangeMask::PARAMS) {
+            // TODO: React to param changes
+        }
+    } else {
+        // First time we get info. We can now notify the gtk thread of a new link.
+        let props = info.props().expect("Port object is missing properties");
+        let name = props.get("port.name").unwrap_or_default().to_string();
+        let node_id: u32 = props
+            .get("node.id")
+            .expect("Port has no node.id property!")
+            .parse()
+            .expect("Could not parse node.id property");
+
+        state.insert(id, Item::Port { node_id });
+
+        let params = info.params();
+        let enum_format_info = params
+            .iter()
+            .find(|param| param.id() == ParamType::EnumFormat);
+        if let Some(enum_format_info) = enum_format_info {
+            if enum_format_info.flags().contains(ParamInfoFlags::READ) {
+                proxy.enum_params(0, Some(ParamType::EnumFormat), 0, u32::MAX);
+            }
+        }
+
+        sender
+            .send_blocking(PipewireMessage::PortAdded {
+                id,
+                node_id,
+                name,
+                direction: info.direction(),
+            })
+            .expect("Failed to send message");
+    }
+}
+
+fn handle_port_enum_format(
+    port_id: u32,
+    param: Option<&pipewire::spa::pod::Pod>,
+    sender: &async_channel::Sender<PipewireMessage>,
+) {
+    let media_type = param
+        .and_then(|param| pipewire::spa::param::format_utils::parse_format(param).ok())
+        .map(|(media_type, _media_subtype)| media_type)
+        .unwrap_or(MediaType::Unknown);
+
+    sender
+        .send_blocking(PipewireMessage::PortFormatChanged {
+            id: port_id,
+            media_type,
+        })
+        .expect("Failed to send message")
+}
+
+/// Handle a new link being added
+fn handle_link(
+    link: &GlobalObject<&DictRef>,
+    sender: &async_channel::Sender<PipewireMessage>,
+    registry: &Rc<Registry>,
+    proxies: &Rc<RefCell<HashMap<u32, ProxyItem>>>,
+    state: &Rc<RefCell<State>>,
+) {
+    debug!(
+        "New link (id:{}) appeared, setting up info listener.",
+        link.id
+    );
+
+    let proxy: Link = registry.bind(link).expect("Failed to bind to link proxy");
+    let listener = proxy
+        .add_listener_local()
+        .info(clone!(@strong state, @strong sender => move |info| {
+            handle_link_info(info, &state, &sender);
+        }))
+        .register();
+
+    proxies.borrow_mut().insert(
+        link.id,
+        ProxyItem::Link {
+            _proxy: proxy,
+            _listener: listener,
+        },
+    );
+}
+
+fn handle_link_info(
+    info: &LinkInfoRef,
+    state: &Rc<RefCell<State>>,
+    sender: &async_channel::Sender<PipewireMessage>,
+) {
+    debug!("Received link info: {:?}", info);
+
+    let id = info.id();
+
+    let mut state = state.borrow_mut();
+    if let Some(Item::Link { .. }) = state.get(id) {
+        // Info was an update - figure out if we should notify the gtk thread
+        if info.change_mask().contains(LinkChangeMask::STATE) {
+            sender
+                .send_blocking(PipewireMessage::LinkStateChanged {
+                    id,
+                    active: matches!(info.state(), LinkState::Active),
+                })
+                .expect("Failed to send message");
+        }
+        if info.change_mask().contains(LinkChangeMask::FORMAT) {
+            sender
+                .send_blocking(PipewireMessage::LinkFormatChanged {
+                    id,
+                    media_type: get_link_media_type(info),
+                })
+                .expect("Failed to send message");
+        }
+    } else {
+        // First time we get info. We can now notify the gtk thread of a new link.
+        let port_from = info.output_port_id();
+        let port_to = info.input_port_id();
+
+        state.insert(id, Item::Link { port_from, port_to });
+
+        sender
+            .send_blocking(PipewireMessage::LinkAdded {
+                id,
+                port_from,
+                port_to,
+                active: matches!(info.state(), LinkState::Active),
+                media_type: get_link_media_type(info),
+            })
+            .expect("Failed to send message");
+    }
+}
+
+/// Toggle a link between the two specified ports.
+fn toggle_link(
+    port_from: u32,
+    port_to: u32,
+    core: &Rc<Core>,
+    registry: &Rc<Registry>,
+    state: &Rc<RefCell<State>>,
+) {
+    let state = state.borrow_mut();
+    if let Some(id) = state.get_link_id(port_from, port_to) {
+        info!("Requesting removal of link with id {}", id);
+
+        // FIXME: Handle error
+        registry.destroy_global(id);
+    } else {
+        info!(
+            "Requesting creation of link from port id:{} to port id:{}",
+            port_from, port_to
+        );
+
+        let node_from = state
+            .get_node_of_port(port_from)
+            .expect("Requested port not in state");
+        let node_to = state
+            .get_node_of_port(port_to)
+            .expect("Requested port not in state");
+
+        if let Err(e) = core.create_object::<Link>(
+            "link-factory",
+            &properties! {
+                "link.output.node" => node_from.to_string(),
+                "link.output.port" => port_from.to_string(),
+                "link.input.node" => node_to.to_string(),
+                "link.input.port" => port_to.to_string(),
+                "object.linger" => "1"
+            },
+        ) {
+            warn!("Failed to create link: {}", e);
+        }
+    }
+}
+
+fn get_link_media_type(link_info: &LinkInfoRef) -> MediaType {
+    let media_type = link_info
+        .format()
+        .and_then(|format| pipewire::spa::param::format_utils::parse_format(format).ok())
+        .map(|(media_type, _media_subtype)| media_type)
+        .unwrap_or(MediaType::Unknown);
+
+    media_type
+}

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
@@ -19,15 +16,10 @@
 
 use std::collections::HashMap;
 
-use crate::MediaType;
-
 /// Any pipewire item we need to keep track of.
 /// These will be saved in the `State` struct associated with their id.
 pub(super) enum Item {
-    Node {
+    Node,
-        // Keep track of the nodes media type to color ports on it.
-        media_type: Option<MediaType>,
-    },
     Port {
         // Save the id of the node this is on so we can remove the port from it
         // when it is deleted.

src/style.css

@@ -1,23 +1,72 @@
-@define-color audio rgb(50,100,240);
+/* Copyright 2021 Tom A. Wagner <tom.a.wagner@protonmail.com>
-@define-color video rgb(200,200,0);
+
-@define-color midi rgb(200,0,50);
+   This program is free software: you can redistribute it and/or modify
-@define-color graphview-link #808080;
+   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 media-type-audio   rgb( 50, 100, 240);
+@define-color media-type-video   rgb(200, 200,   0);
+@define-color media-type-midi    rgb(200,   0,  50);
+@define-color media-type-unknown rgb(128, 128, 128);
 
 .audio {
-    background: @audio;
+    background: @media-type-audio;
     color: black;
 }
 
 .video {
-    background: @video;
+    background: @media-type-video;
     color: black;
 }
 
 .midi {
-    background: @midi;
+    background: @media-type-midi;
     color: black;
 }
 
-graphview {
+node {
-    background: @text_view_bg;
+    /* Compared to the default card color, this is not transparent in dark-mode
+       and provides a better contrast to the background in light mode */
+	background-color: @headerbar_bg_color;
+}
+
+node .node-title {
+	padding: 4px 7px;
+}
+
+port label {
+    padding: 4px 6px;
+}
+
+port-handle {
+    border-radius: 50%;
+    background-color: @media-type-unknown;
+}
+
+button.rounded {
+    padding: 6px;
+    border-radius: 9999px;
+}
+
+entry.rounded {
+    border-radius: 9999px;
+}
+
+entry.rounded > :first-child {
+    padding-left: 12px;
+}
+
+entry.rounded > :nth-child(2) {
+    padding-right: 12px;
 }

src/ui/graph/graph_view.rs

@@ -0,0 +1,866 @@
+// 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::{
+    gio,
+    glib::{self, clone},
+    gtk::{
+        self, cairo,
+        graphene::{self, Point},
+        gsk,
+    },
+    prelude::*,
+    subclass::prelude::*,
+};
+
+use std::cmp::Ordering;
+
+use super::{Link, Node, Port};
+use crate::NodeType;
+
+const CANVAS_SIZE: f64 = 5000.0;
+
+mod imp {
+    use super::*;
+
+    use std::cell::{Cell, RefCell};
+    use std::collections::{HashMap, HashSet};
+
+    use adw::gtk::gdk::{self};
+    use log::warn;
+    use once_cell::sync::Lazy;
+    use pipewire::spa::param::format::MediaType;
+    use pipewire::spa::utils::Direction;
+
+    pub struct Colors {
+        audio: gdk::RGBA,
+        video: gdk::RGBA,
+        midi: gdk::RGBA,
+        unknown: gdk::RGBA,
+    }
+
+    impl Colors {
+        pub fn color_for_media_type(&self, media_type: MediaType) -> &gdk::RGBA {
+            match media_type {
+                MediaType::Audio => &self.audio,
+                MediaType::Video => &self.video,
+                MediaType::Stream | MediaType::Application => &self.midi,
+                _ => &self.unknown,
+            }
+        }
+    }
+
+    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,
+    }
+
+    pub struct GraphView {
+        /// Stores nodes and their positions.
+        pub(super) nodes: RefCell<HashMap<Node, Point>>,
+        /// Stores the links and whether they are currently active.
+        pub(super) links: RefCell<HashSet<Link>>,
+
+        // Properties for zooming and scrolling the hraph
+        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>>,
+
+        // These keep track of an ongoing port drag operation
+        pub dragged_port: glib::WeakRef<Port>,
+        pub port_drag_cursor: Cell<Point>,
+
+        // Memorized data for an in-progress zoom gesture
+        pub zoom_gesture_initial_zoom: Cell<Option<f64>>,
+        pub zoom_gesture_anchor: Cell<Option<(f64, f64)>>,
+
+        // This keeps track of an ongoing move view gesture.
+        pub move_view_state: Cell<(f64, f64)>,
+    }
+
+    impl Default for GraphView {
+        fn default() -> Self {
+            Self {
+                nodes: Default::default(),
+                links: Default::default(),
+                hadjustment: Default::default(),
+                vadjustment: Default::default(),
+                zoom_factor: Default::default(),
+                dragged_node: Default::default(),
+                dragged_port: Default::default(),
+                port_drag_cursor: Cell::new(Point::new(0.0, 0.0)),
+                zoom_gesture_initial_zoom: Default::default(),
+                zoom_gesture_anchor: Default::default(),
+                move_view_state: Default::default(),
+            }
+        }
+    }
+
+    #[glib::object_subclass]
+    impl ObjectSubclass for GraphView {
+        const NAME: &'static str = "HelvumGraphView";
+        type Type = super::GraphView;
+        type ParentType = gtk::Widget;
+        type Interfaces = (gtk::Scrollable,);
+
+        fn class_init(klass: &mut Self::Class) {
+            klass.set_css_name("graphview");
+        }
+    }
+
+    impl ObjectImpl for GraphView {
+        fn constructed(&self) {
+            self.parent_constructed();
+
+            self.obj().add_css_class("view");
+
+            self.obj().set_overflow(gtk::Overflow::Hidden);
+
+            self.setup_node_dragging();
+            self.setup_port_drag_and_drop();
+            self.setup_scroll_zooming();
+            self.setup_zoom_gesture();
+            self.setup_move_view();
+        }
+
+        fn dispose(&self) {
+            self.nodes
+                .borrow()
+                .iter()
+                .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 size_allocate(&self, _width: i32, _height: i32, baseline: i32) {
+            let widget = &*self.obj();
+
+            for (node, point) in self.nodes.borrow().iter() {
+                let (_, natural_size) = node.preferred_size();
+
+                let transform = self
+                    .canvas_space_to_screen_space_transform()
+                    .translate(point);
+
+                node.allocate(
+                    natural_size.width(),
+                    natural_size.height(),
+                    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();
+
+            // Draw all visible children
+            self.nodes
+                .borrow()
+                .iter()
+                // 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));
+
+            self.snapshot_links(widget, snapshot);
+        }
+    }
+
+    impl ScrollableImpl for GraphView {}
+
+    impl GraphView {
+        /// Returns a [`gsk::Transform`] matrix that can translate from canvas space to screen space.
+        ///
+        /// Canvas space is non-zoomed, and (0, 0) is fixed at the middle of the graph. \
+        /// Screen space is zoomed and adjusted for scrolling, (0, 0) is at the top-left corner of the window.
+        ///
+        /// 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_port_drag_and_drop(&self) {
+            let controller = gtk::DropControllerMotion::new();
+
+            controller.connect_enter(|controller, x, y| {
+                let graph = controller
+                    .widget()
+                    .downcast::<super::GraphView>()
+                    .expect("Widget should be a graphview");
+
+                graph.imp().port_drag_enter(controller, x, y)
+            });
+
+            controller.connect_motion(|controller, x, y| {
+                let graph = controller
+                    .widget()
+                    .downcast::<super::GraphView>()
+                    .expect("Widget should be a graphview");
+
+                graph.imp().port_drag_motion(x, y)
+            });
+
+            controller.connect_leave(|controller| {
+                let graph = controller
+                    .widget()
+                    .downcast::<super::GraphView>()
+                    .expect("Widget should be a graphview");
+
+                graph.imp().port_drag_leave()
+            });
+
+            self.obj().add_controller(controller);
+        }
+
+        fn port_drag_enter(&self, controller: &gtk::DropControllerMotion, x: f64, y: f64) {
+            let Some(drop) = controller.drop() else {
+                return;
+            };
+
+            self.port_drag_cursor.set(Point::new(x as f32, y as f32));
+
+            drop.read_value_async(
+                Port::static_type(),
+                glib::Priority::DEFAULT,
+                Option::<&gio::Cancellable>::None,
+                clone!(@weak self as imp => move|value| {
+                    let Ok(value) = value else {
+                        return;
+                    };
+                    let port: &Port = value.get().expect("Value should contain a port");
+
+                    imp.dragged_port.set(Some(port));
+                }),
+            );
+
+            self.obj().queue_draw();
+        }
+
+        fn port_drag_motion(&self, x: f64, y: f64) {
+            if self.dragged_port.upgrade().is_some() {
+                self.port_drag_cursor.set(Point::new(x as f32, y as f32));
+
+                self.obj().queue_draw();
+            }
+        }
+
+        fn port_drag_leave(&self) {
+            if self.dragged_port.upgrade().is_some() {
+                self.dragged_port.set(None);
+                self.obj().queue_draw();
+            }
+        }
+
+        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);
+
+                    glib::Propagation::Stop
+                } else {
+                    glib::Propagation::Proceed
+                }
+            });
+            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 setup_move_view(&self) {
+            let drag_controller = gtk::GestureDrag::new();
+
+            drag_controller.set_button(gtk::gdk::BUTTON_MIDDLE);
+
+            // TODO: set `all-scroll` cursor while dragging view
+
+            drag_controller.connect_drag_begin(|drag_controller, _, _| {
+                let widget = drag_controller
+                    .widget()
+                    .downcast::<super::GraphView>()
+                    .unwrap();
+
+                widget.imp().move_view_state.set((0.0, 0.0));
+            });
+
+            drag_controller.connect_drag_update(|drag_controller, x, y| {
+                let widget = drag_controller
+                    .widget()
+                    .downcast::<super::GraphView>()
+                    .unwrap();
+
+                let imp = widget.imp();
+                let state = imp.move_view_state.replace((x, y));
+                let delta_x = state.0 - x;
+                let delta_y = state.1 - y;
+
+                let hadjustment_ref = imp.hadjustment.borrow();
+                let vadjustment_ref = imp.vadjustment.borrow();
+                let hadjustment = hadjustment_ref.as_ref().unwrap();
+                let vadjustment = vadjustment_ref.as_ref().unwrap();
+
+                let new_hadjustment = hadjustment.value() + delta_x;
+                let new_vadjustment = vadjustment.value() + delta_y;
+
+                hadjustment.set_value(new_hadjustment);
+                vadjustment.set_value(new_vadjustment);
+            });
+
+            self.obj().add_controller(drag_controller);
+        }
+
+        fn snapshot_link(
+            &self,
+            snapshot: &gtk::Snapshot,
+            output_anchor: &Point,
+            input_anchor: &Point,
+            active: bool,
+            color: &gdk::RGBA,
+        ) {
+            let output_x = output_anchor.x();
+            let output_y = output_anchor.y();
+            let input_x = input_anchor.x();
+            let input_y = input_anchor.y();
+
+            // If the output port is farther right than the input port and they have
+            // a similar y coordinate, apply a y offset to the control points
+            // so that the curve sticks out a bit.
+            let y_control_offset = if output_x > input_x {
+                f32::max(0.0, 25.0 - (output_y - input_y).abs())
+            } else {
+                0.0
+            };
+
+            // Place curve control offset by half the x distance between the two points.
+            // This makes the curve scale well for varying distances between the two ports,
+            // especially when the output port is farther right than the input port.
+            let half_x_dist = f32::abs(output_x - input_x) / 2.0;
+            let path_builder = gsk::PathBuilder::new();
+            path_builder.move_to(output_x, output_y);
+            path_builder.cubic_to(
+                output_x + half_x_dist,
+                output_y - y_control_offset,
+                input_x - half_x_dist,
+                input_y - y_control_offset,
+                input_x,
+                input_y,
+            );
+            let path = path_builder.to_path();
+
+            let stroke = gsk::Stroke::new(2.0 * (self.zoom_factor.get() as f32));
+            // Use dashed line for inactive links, full line otherwise.
+            if active {
+                stroke.set_dash(&[]);
+            } else {
+                stroke.set_dash(&[10.0, 5.0]);
+            }
+
+            snapshot.append_stroke(&path, &stroke, color);
+        }
+
+        fn snapshot_dragged_link(&self, snapshot: &gtk::Snapshot, port: &Port, colors: &Colors) {
+            let Some(port_anchor) = port.compute_point(&*self.obj(), &port.link_anchor()) else {
+                return;
+            };
+            let drag_cursor = self.port_drag_cursor.get();
+
+            /* If we can find a linkable port under the cursor, link to its anchor,
+             * otherwise link to the mouse cursor */
+            let picked_port = self
+                .obj()
+                .pick(
+                    drag_cursor.x().into(),
+                    drag_cursor.y().into(),
+                    gtk::PickFlags::DEFAULT,
+                )
+                .and_then(|widget| widget.ancestor(Port::static_type()).and_downcast::<Port>())
+                .filter(|picked_port| port.is_linkable_to(picked_port));
+            let picked_port_anchor = picked_port.and_then(|picked_port| {
+                picked_port.compute_point(&*self.obj(), &picked_port.link_anchor())
+            });
+            let other_anchor = picked_port_anchor.unwrap_or(drag_cursor);
+
+            let (output_anchor, input_anchor) = match Direction::from_raw(port.direction()) {
+                Direction::Output => (&port_anchor, &other_anchor),
+                Direction::Input => (&other_anchor, &port_anchor),
+                _ => unreachable!(),
+            };
+
+            let color = &colors.color_for_media_type(MediaType::from_raw(port.media_type()));
+
+            self.snapshot_link(snapshot, output_anchor, input_anchor, false, color);
+        }
+
+        fn snapshot_links(&self, widget: &super::GraphView, snapshot: &gtk::Snapshot) {
+            let colors = Colors {
+                audio: widget
+                    .style_context()
+                    .lookup_color("media-type-audio")
+                    .expect("color not found"),
+                video: widget
+                    .style_context()
+                    .lookup_color("media-type-video")
+                    .expect("color not found"),
+                midi: widget
+                    .style_context()
+                    .lookup_color("media-type-midi")
+                    .expect("color not found"),
+                unknown: widget
+                    .style_context()
+                    .lookup_color("media-type-unknown")
+                    .expect("color not found"),
+            };
+
+            for link in self.links.borrow().iter() {
+                let color = &colors.color_for_media_type(link.media_type());
+
+                // TODO: Do not draw links when they are outside the view
+                let Some((output_anchor, input_anchor)) = self.get_link_coordinates(link) else {
+                    warn!("Could not get allocation of ports of link: {:?}", link);
+                    continue;
+                };
+
+                self.snapshot_link(
+                    snapshot,
+                    &output_anchor,
+                    &input_anchor,
+                    link.active(),
+                    color,
+                );
+            }
+
+            if let Some(port) = self.dragged_port.upgrade() {
+                self.snapshot_dragged_link(&snapshot, &port, &colors);
+            }
+        }
+
+        /// Get coordinates for the drawn link to start at and to end at.
+        ///
+        /// # Returns
+        /// `Some((output_anchor, input_anchor))` if all objects the links refers to exist as widgets
+        /// and those widgets are contained by the graph.
+        ///
+        /// The returned coordinates are in screen-space of the graph.
+        fn get_link_coordinates(&self, link: &Link) -> Option<(graphene::Point, graphene::Point)> {
+            let widget = &*self.obj();
+
+            let output_port = link.output_port()?;
+            let output_anchor = output_port.compute_point(widget, &output_port.link_anchor())?;
+
+            let input_port = link.input_port()?;
+            let input_anchor = input_port.compute_point(widget, &input_port.link_anchor())?;
+
+            Some((output_anchor, input_anchor))
+        }
+
+        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,
+            );
+        }
+    }
+}
+
+glib::wrapper! {
+    pub struct GraphView(ObjectSubclass<imp::GraphView>)
+        @extends gtk::Widget;
+}
+
+impl GraphView {
+    pub const ZOOM_MIN: f64 = 0.3;
+    pub const ZOOM_MAX: f64 = 4.0;
+
+    pub fn new() -> Self {
+        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, node: Node, node_type: Option<NodeType>) {
+        let imp = self.imp();
+        node.set_parent(self);
+
+        // Place widgets in colums of 3, growing down
+        let x = if let Some(node_type) = node_type {
+            match node_type {
+                NodeType::Output => 20.0,
+                NodeType::Input => 820.0,
+            }
+        } else {
+            420.0
+        };
+
+        let y = imp
+            .nodes
+            .borrow()
+            .iter()
+            .map(|node| {
+                // Map nodes to their locations
+                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
+                (x - x2).abs() < 50.0
+            })
+            .max_by(|y1, y2| {
+                // Get max in column
+                y1.partial_cmp(y2).unwrap_or(Ordering::Equal)
+            })
+            .map_or(20_f32, |(_x, y)| y + 120.0);
+
+        imp.nodes.borrow_mut().insert(node, Point::new(x, y));
+    }
+
+    pub fn remove_node(&self, node: &Node) {
+        let mut nodes = self.imp().nodes.borrow_mut();
+
+        if nodes.remove(node).is_some() {
+            node.unparent();
+        } else {
+            log::warn!("Tried to remove non-existant node widget from graph");
+        }
+    }
+
+    pub fn add_link(&self, link: Link) {
+        link.connect_notify_local(
+            Some("active"),
+            glib::clone!(@weak self as graph => move |_, _| {
+                graph.queue_draw();
+            }),
+        );
+        link.connect_notify_local(
+            Some("media-type"),
+            glib::clone!(@weak self as graph => move |_, _| {
+                graph.queue_draw();
+            }),
+        );
+        self.imp().links.borrow_mut().insert(link);
+        self.queue_draw();
+    }
+
+    pub fn remove_link(&self, link: &Link) {
+        let mut links = self.imp().links.borrow_mut();
+        links.remove(link);
+
+        self.queue_draw();
+    }
+
+    pub fn clear(&mut self) {
+        self.imp().links.borrow_mut().clear();
+        for (node, _) in self.imp().nodes.borrow_mut().drain() {
+            node.unparent();
+        }
+        self.queue_draw();
+    }
+
+    /// Get the position of the specified node inside the graphview.
+    ///
+    /// The returned position is in canvas-space (non-zoomed, (0, 0) fixed in the middle of the canvas).
+    pub(super) fn node_position(&self, node: &Node) -> Option<Point> {
+        self.imp().nodes.borrow().get(node).copied()
+    }
+
+    pub(super) fn move_node(&self, widget: &Node, point: &Point) {
+        let mut nodes = self.imp().nodes.borrow_mut();
+        let node_point = nodes.get_mut(widget).expect("Node is not on the graph");
+
+        // Clamp the new position to within the graph, so a node can't be moved outside it and be lost.
+        node_point.set_x(point.x().clamp(
+            -(CANVAS_SIZE / 2.0) as f32,
+            (CANVAS_SIZE / 2.0) as f32 - widget.width() as f32,
+        ));
+        node_point.set_y(point.y().clamp(
+            -(CANVAS_SIZE / 2.0) as f32,
+            (CANVAS_SIZE / 2.0) as f32 - widget.height() as f32,
+        ));
+
+        self.queue_allocate();
+    }
+}
+
+impl Default for GraphView {
+    fn default() -> Self {
+        Self::new()
+    }
+}

src/ui/graph/link.rs

@@ -0,0 +1,148 @@
+// 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, prelude::*, subclass::prelude::*};
+use pipewire::spa::param::format::MediaType;
+
+use super::Port;
+
+mod imp {
+    use super::*;
+
+    use std::cell::Cell;
+
+    use once_cell::sync::Lazy;
+
+    pub struct Link {
+        pub output_port: glib::WeakRef<Port>,
+        pub input_port: glib::WeakRef<Port>,
+        pub active: Cell<bool>,
+        pub media_type: Cell<MediaType>,
+    }
+
+    impl Default for Link {
+        fn default() -> Self {
+            Self {
+                output_port: glib::WeakRef::default(),
+                input_port: glib::WeakRef::default(),
+                active: Cell::default(),
+                media_type: Cell::new(MediaType::Unknown),
+            }
+        }
+    }
+
+    #[glib::object_subclass]
+    impl ObjectSubclass for Link {
+        const NAME: &'static str = "HelvumLink";
+        type Type = super::Link;
+        type ParentType = glib::Object;
+    }
+
+    impl ObjectImpl for Link {
+        fn properties() -> &'static [glib::ParamSpec] {
+            static PROPERTIES: Lazy<Vec<glib::ParamSpec>> = Lazy::new(|| {
+                vec![
+                    glib::ParamSpecObject::builder::<Port>("output-port")
+                        .flags(glib::ParamFlags::READWRITE)
+                        .build(),
+                    glib::ParamSpecObject::builder::<Port>("input-port")
+                        .flags(glib::ParamFlags::READWRITE)
+                        .build(),
+                    glib::ParamSpecBoolean::builder("active")
+                        .default_value(false)
+                        .flags(glib::ParamFlags::READWRITE)
+                        .build(),
+                    glib::ParamSpecUInt::builder("media-type")
+                        .default_value(MediaType::Unknown.as_raw())
+                        .flags(glib::ParamFlags::READWRITE)
+                        .build(),
+                ]
+            });
+
+            PROPERTIES.as_ref()
+        }
+
+        fn property(&self, _id: usize, pspec: &glib::ParamSpec) -> glib::Value {
+            match pspec.name() {
+                "output-port" => self.output_port.upgrade().to_value(),
+                "input-port" => self.input_port.upgrade().to_value(),
+                "active" => self.active.get().to_value(),
+                "media-type" => self.media_type.get().as_raw().to_value(),
+                _ => unimplemented!(),
+            }
+        }
+
+        fn set_property(&self, _id: usize, value: &glib::Value, pspec: &glib::ParamSpec) {
+            match pspec.name() {
+                "output-port" => self.output_port.set(value.get().unwrap()),
+                "input-port" => self.input_port.set(value.get().unwrap()),
+                "active" => self.active.set(value.get().unwrap()),
+                "media-type" => self
+                    .media_type
+                    .set(MediaType::from_raw(value.get().unwrap())),
+                _ => unimplemented!(),
+            }
+        }
+    }
+}
+
+glib::wrapper! {
+    pub struct Link(ObjectSubclass<imp::Link>);
+}
+
+impl Link {
+    pub fn new() -> Self {
+        glib::Object::new()
+    }
+
+    pub fn output_port(&self) -> Option<Port> {
+        self.property("output-port")
+    }
+
+    pub fn set_output_port(&self, port: Option<&Port>) {
+        self.set_property("output-port", port);
+    }
+
+    pub fn input_port(&self) -> Option<Port> {
+        self.property("input-port")
+    }
+
+    pub fn set_input_port(&self, port: Option<&Port>) {
+        self.set_property("input-port", port);
+    }
+
+    pub fn active(&self) -> bool {
+        self.property("active")
+    }
+
+    pub fn set_active(&self, active: bool) {
+        self.set_property("active", active);
+    }
+
+    pub fn media_type(&self) -> MediaType {
+        MediaType::from_raw(self.property("media-type"))
+    }
+
+    pub fn set_media_type(&self, media_type: MediaType) {
+        self.set_property("media-type", media_type.as_raw())
+    }
+}
+
+impl Default for Link {
+    fn default() -> Self {
+        Self::new()
+    }
+}

src/ui/graph/mod.rs

@@ -0,0 +1,28 @@
+// 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
+
+mod graph_view;
+pub use graph_view::*;
+mod node;
+pub use node::*;
+mod port;
+pub use port::*;
+mod port_handle;
+pub use port_handle::*;
+mod link;
+pub use link::*;
+mod zoomentry;
+pub use zoomentry::*;

src/ui/graph/node.rs

@@ -0,0 +1,177 @@
+// 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::*};
+use pipewire::spa::utils::Direction;
+
+use super::Port;
+
+mod imp {
+    use super::*;
+
+    use std::{
+        cell::{Cell, RefCell},
+        collections::HashSet,
+    };
+
+    #[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>,
+        #[property(
+            name = "node-name", type = String,
+            get = |this: &Self| this.node_name.text().to_string(),
+            set = |this: &Self, val| {
+                this.node_name.set_text(val);
+                this.node_name.set_tooltip_text(Some(val));
+            }
+        )]
+        #[template_child]
+        pub(super) node_name: TemplateChild<gtk::Label>,
+        #[property(
+            name = "media-name", type = String,
+            get = |this: &Self| this.media_name.text().to_string(),
+            set = |this: &Self, val| {
+                this.media_name.set_text(val);
+                this.media_name.set_tooltip_text(Some(val));
+                this.media_name.set_visible(!val.is_empty());
+            }
+        )]
+        #[template_child]
+        pub(super) media_name: TemplateChild<gtk::Label>,
+        #[template_child]
+        pub(super) separator: TemplateChild<gtk::Separator>,
+        #[template_child]
+        pub(super) port_grid: TemplateChild<gtk::Grid>,
+        pub(super) ports: RefCell<HashSet<Port>>,
+    }
+
+    #[glib::object_subclass]
+    impl ObjectSubclass for Node {
+        const NAME: &'static str = "HelvumNode";
+        type Type = super::Node;
+        type ParentType = gtk::Widget;
+
+        fn class_init(klass: &mut Self::Class) {
+            klass.set_layout_manager_type::<gtk::BoxLayout>();
+
+            klass.bind_template();
+
+            klass.set_css_name("node");
+        }
+
+        fn instance_init(obj: &glib::subclass::InitializingObject<Self>) {
+            obj.init_template();
+        }
+    }
+
+    #[glib::derived_properties]
+    impl ObjectImpl for Node {
+        fn constructed(&self) {
+            self.parent_constructed();
+
+            // Force left-to-right direction for the ports grid to avoid messed up UI when defaulting to right-to-left
+            self.port_grid.set_direction(gtk::TextDirection::Ltr);
+
+            // Display a grab cursor when the mouse is over the label so the user knows the node can be dragged.
+            self.node_name
+                .set_cursor(gtk::gdk::Cursor::from_name("grab", None).as_ref());
+        }
+
+        fn dispose(&self) {
+            if let Some(child) = self.obj().first_child() {
+                child.unparent();
+            }
+        }
+    }
+
+    impl WidgetImpl for Node {}
+
+    impl Node {
+        /// Update the internal ports grid to reflect the ports stored in the ports set.
+        pub fn update_ports(&self) {
+            // We first remove all ports from the grid, then re-add them all, so that
+            // ports that have been removed do not leave gaps in the grid.
+
+            while let Some(ref child) = self.port_grid.first_child() {
+                self.port_grid.remove(child);
+            }
+
+            let ports = self.ports.borrow();
+
+            let mut ports_out = Vec::new();
+            let mut ports_in = Vec::new();
+
+            ports
+                .iter()
+                .for_each(|port| match Direction::from_raw(port.direction()) {
+                    Direction::Output => {
+                        ports_out.push(port);
+                    }
+                    Direction::Input => {
+                        ports_in.push(port);
+                    }
+                    _ => unreachable!(),
+                });
+
+            ports_out.sort_unstable_by_key(|port| port.name());
+            ports_in.sort_unstable_by_key(|port| port.name());
+
+            // In case no ports have been added to the port, hide the seperator as it is not needed
+            self.separator
+                .set_visible(!ports_out.is_empty() || !ports_in.is_empty());
+
+            for (i, port) in ports_in.into_iter().enumerate() {
+                self.port_grid.attach(port, 0, i.try_into().unwrap(), 1, 1);
+            }
+
+            for (i, port) in ports_out.into_iter().enumerate() {
+                self.port_grid.attach(port, 1, i.try_into().unwrap(), 1, 1);
+            }
+        }
+    }
+}
+
+glib::wrapper! {
+    pub struct Node(ObjectSubclass<imp::Node>)
+        @extends gtk::Widget;
+}
+
+impl Node {
+    pub fn new(name: &str, pipewire_id: u32) -> Self {
+        glib::Object::builder()
+            .property("node-name", name)
+            .property("pipewire-id", pipewire_id)
+            .build()
+    }
+
+    pub fn add_port(&self, port: Port) {
+        let imp = self.imp();
+        imp.ports.borrow_mut().insert(port);
+        imp.update_ports();
+    }
+
+    pub fn remove_port(&self, port: &Port) {
+        let imp = self.imp();
+        if imp.ports.borrow_mut().remove(port) {
+            imp.update_ports();
+        } else {
+            log::warn!("Tried to remove non-existant port widget from node");
+        }
+    }
+}

src/ui/graph/node.ui

@@ -0,0 +1,56 @@
+<?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="GtkBox">
+            <style>
+              <class name="node-title"></class>
+            </style>
+            <property name="orientation">vertical</property>
+            <property name="spacing">1</property>
+            <child>
+              <object class="GtkLabel" id="node_name">
+                <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="GtkLabel" id="media_name">
+                <style>
+                  <class name="dim-label"></class>
+                  <class name="caption"></class>
+                </style>
+                <property name="visible">false</property>
+                <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>
+          </object>
+        </child>
+        <child>
+          <object class="GtkSeparator" id="separator">
+            <!-- The node will show the seperator only once ports are added to it -->
+            <property name="visible">false</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkGrid" id="port_grid"></object>
+        </child>
+      </object>
+    </child>
+  </template>
+</interface>

src/ui/graph/port.rs

@@ -0,0 +1,364 @@
+// 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::{
+    gdk,
+    glib::{self, subclass::Signal},
+    gtk::{self, graphene},
+    prelude::*,
+    subclass::prelude::*,
+};
+use pipewire::spa::utils::Direction;
+
+use super::PortHandle;
+
+mod imp {
+    use super::*;
+
+    use std::cell::{Cell, OnceCell};
+
+    use once_cell::sync::Lazy;
+    use pipewire::spa::{param::format::MediaType, utils::Direction};
+
+    /// Graphical representation of a pipewire port.
+    #[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>,
+        #[property(
+            type = u32,
+            get = |_| self.media_type.get().as_raw(),
+            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(),
+            set = |this: &Self, val| {
+                this.label.set_text(val);
+                this.label.set_tooltip_text(Some(val));
+            }
+        )]
+        #[template_child]
+        pub(super) label: TemplateChild<gtk::Label>,
+        #[template_child]
+        pub(super) handle: TemplateChild<PortHandle>,
+    }
+
+    impl Default for Port {
+        fn default() -> Self {
+            Self {
+                pipewire_id: OnceCell::default(),
+                media_type: Cell::new(MediaType::Unknown),
+                direction: Cell::new(Direction::Output),
+                label: TemplateChild::default(),
+                handle: TemplateChild::default(),
+            }
+        }
+    }
+
+    #[glib::object_subclass]
+    impl ObjectSubclass for Port {
+        const NAME: &'static str = "HelvumPort";
+        type Type = super::Port;
+        type ParentType = gtk::Widget;
+
+        fn class_init(klass: &mut Self::Class) {
+            klass.set_css_name("port");
+
+            klass.bind_template();
+        }
+
+        fn instance_init(obj: &glib::subclass::InitializingObject<Self>) {
+            obj.init_template();
+        }
+    }
+
+    #[glib::derived_properties]
+    impl ObjectImpl for Port {
+        fn constructed(&self) {
+            self.parent_constructed();
+
+            // Force left-to-right direction for the ports grid to avoid messed up UI when defaulting to right-to-left
+            self.obj().set_direction(gtk::TextDirection::Ltr);
+
+            // Display a grab cursor when the mouse is over the port so the user knows it can be dragged to another port.
+            self.obj()
+                .set_cursor(gtk::gdk::Cursor::from_name("grab", None).as_ref());
+
+            self.setup_port_drag_and_drop();
+        }
+
+        fn signals() -> &'static [Signal] {
+            static SIGNALS: Lazy<Vec<Signal>> = Lazy::new(|| {
+                vec![Signal::builder("port-toggled")
+                    // Provide id of output port and input port to signal handler.
+                    .param_types([<u32>::static_type(), <u32>::static_type()])
+                    .build()]
+            });
+
+            SIGNALS.as_ref()
+        }
+    }
+
+    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) {
+            let obj = &*self.obj();
+
+            // 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.
+            // The port will simply provide its pipewire id to the drag target.
+            // The drop target will accept the source port and use it to emit its `port-toggled` signal.
+
+            // FIXME: We should protect against different media types, e.g. it should not be possible to drop a video port on an audio port.
+
+            let drag_src = gtk::DragSource::builder()
+                .content(&gdk::ContentProvider::for_value(&obj.to_value()))
+                .build();
+            // Override the default drag icon with an empty one so that only a grab cursor is shown.
+            // The graph will render a link from the source port to the cursor to visualize the drag instead.
+            drag_src.set_icon(Some(&gdk::Paintable::new_empty(0, 0)), 0, 0);
+            drag_src.connect_drag_begin(|drag_source, _| {
+                let port = drag_source
+                    .widget()
+                    .dynamic_cast::<super::Port>()
+                    .expect("Widget should be a Port");
+
+                log::trace!("Drag started from port {}", port.pipewire_id());
+            });
+            drag_src.connect_drag_cancel(|drag_source, _, _| {
+                let port = drag_source
+                    .widget()
+                    .dynamic_cast::<super::Port>()
+                    .expect("Widget should be a Port");
+
+                log::trace!("Drag from port {} was cancelled", port.pipewire_id());
+
+                false
+            });
+            obj.add_controller(drag_src);
+
+            let drop_target =
+                gtk::DropTarget::new(super::Port::static_type(), gdk::DragAction::COPY);
+            drop_target.set_preload(true);
+            drop_target.connect_value_notify(|drop_target| {
+                let port = drop_target
+                    .widget()
+                    .dynamic_cast::<super::Port>()
+                    .expect("Widget should be a Port");
+
+                let Some(value) = drop_target.value() else {
+                    return;
+                };
+
+                let other_port: super::Port = value.get().expect("Drop value should be a port");
+
+                // Disallow drags between two ports that have the same direction
+                if !port.is_linkable_to(&other_port) {
+                    // FIXME: For some reason, this prints error:
+                    //        "gdk_drop_get_actions: assertion 'GDK_IS_DROP (self)' failed"
+                    drop_target.reject();
+                }
+            });
+            drop_target.connect_drop(|drop_target, val, _, _| {
+                let port = drop_target
+                    .widget()
+                    .dynamic_cast::<super::Port>()
+                    .expect("Widget should be a Port");
+                let other_port = val
+                    .get::<super::Port>()
+                    .expect("Dropped value should be a Port");
+
+                // Do not accept a drop between imcompatible ports
+                if !port.is_linkable_to(&other_port) {
+                    log::warn!("Tried to link incompatible ports");
+                    return false;
+                }
+
+                let (output_port, input_port) = match Direction::from_raw(port.direction()) {
+                    Direction::Output => (&port, &other_port),
+                    Direction::Input => (&other_port, &port),
+                    _ => unreachable!(),
+                };
+
+                port.emit_by_name::<()>(
+                    "port-toggled",
+                    &[&output_port.pipewire_id(), &input_port.pipewire_id()],
+                );
+
+                true
+            });
+            obj.add_controller(drop_target);
+        }
+
+        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.handle.remove_css_class(css_class)
+            }
+
+            // Color the port according to its media type.
+            match media_type {
+                MediaType::Video => self.handle.add_css_class("video"),
+                MediaType::Audio => self.handle.add_css_class("audio"),
+                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!(),
+            }
+        }
+    }
+}
+
+glib::wrapper! {
+    pub struct Port(ObjectSubclass<imp::Port>)
+        @extends gtk::Widget;
+}
+
+impl Port {
+    pub fn new(id: u32, name: &str, direction: Direction) -> Self {
+        glib::Object::builder()
+            .property("pipewire-id", id)
+            .property("direction", direction.as_raw())
+            .property("name", name)
+            .build()
+    }
+
+    pub fn link_anchor(&self) -> graphene::Point {
+        let style_context = self.style_context();
+        let padding_right: f32 = style_context.padding().right().into();
+        let border_right: f32 = style_context.border().right().into();
+        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 direction {
+                Direction::Output => self.width() as f32 + padding_right + border_right,
+                Direction::Input => 0.0 - padding_left - border_left,
+                _ => unreachable!(),
+            },
+            self.height() as f32 / 2.0,
+        )
+    }
+
+    pub fn is_linkable_to(&self, other_port: &Self) -> bool {
+        self.direction() != other_port.direction()
+    }
+}

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()
+    }
+}

src/ui/graph/zoomentry.rs

@@ -0,0 +1,173 @@
+use adw::{glib, gtk, prelude::*, subclass::prelude::*};
+
+use super::GraphView;
+
+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<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));
+            popover.set_position(gtk::PositionType::Top);
+
+            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::<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: Option<GraphView> = value.get().unwrap();
+                    if let Some(ref widget) = widget {
+                        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() = 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 [`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: &GraphView) -> Self {
+        glib::Object::builder()
+            .property("zoomed-widget", zoomed_widget)
+            .build()
+    }
+}

src/ui/graph/zoomentry.ui

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <template class="HelvumZoomEntry" parent="GtkBox">
+    <property name="spacing">12</property>
+    <child>
+      <object class="GtkEntry" id="entry">
+        <property name="secondary-icon-name">go-down-symbolic</property>
+        <property name="input-purpose">digits</property>
+        <property name="max-width-chars">5</property>
+        <style>
+          <class name="osd"/>
+          <class name="rounded"/>
+        </style>
+      </object>
+    </child>
+    <child>
+      <object class="GtkButton" id="zoom_out_button">
+        <property name="icon-name">zoom-out-symbolic</property>
+        <property name="tooltip-text">Zoom out</property>
+        <style>
+          <class name="osd"/>
+          <class name="rounded"/>
+        </style>
+      </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>
+        <style>
+          <class name="osd"/>
+          <class name="rounded"/>
+        </style>
+      </object>
+    </child>
+  </template>
+</interface>

src/ui/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
@@ -21,10 +18,7 @@
 //!
 //! This module contains gtk widgets needed to present the graphical user interface.
 
-mod graph_view;
+pub mod graph;
-mod node;
-mod port;
 
-pub use graph_view::GraphView;
+mod window;
-pub use node::Node;
+pub use window::*;
-pub use port::Port;

src/ui/window.rs

@@ -0,0 +1,65 @@
+use adw::{gio, gtk, prelude::*, subclass::prelude::*};
+
+use super::graph;
+
+mod imp {
+    use super::*;
+
+    #[derive(Default, gtk::CompositeTemplate, glib::Properties)]
+    #[properties(wrapper_type = super::Window)]
+    #[template(file = "window.ui")]
+    pub struct Window {
+        #[template_child]
+        pub header_bar: TemplateChild<adw::HeaderBar>,
+        #[template_child]
+        #[property(type = adw::Banner, get = |_| self.connection_banner.clone())]
+        pub connection_banner: TemplateChild<adw::Banner>,
+        #[template_child]
+        #[property(type = graph::GraphView, get = |_| self.graph.clone())]
+        pub graph: TemplateChild<graph::GraphView>,
+    }
+
+    #[glib::object_subclass]
+    impl ObjectSubclass for Window {
+        const NAME: &'static str = "HelvumWindow";
+        type Type = super::Window;
+        type ParentType = adw::ApplicationWindow;
+
+        fn class_init(klass: &mut Self::Class) {
+            // Ensure custom types are registered
+            graph::GraphView::ensure_type();
+            graph::ZoomEntry::ensure_type();
+
+            klass.bind_template();
+        }
+
+        fn instance_init(obj: &glib::subclass::InitializingObject<Self>) {
+            obj.init_template();
+        }
+    }
+
+    #[glib::derived_properties]
+    impl ObjectImpl for Window {}
+    impl WidgetImpl for Window {}
+    impl WindowImpl for Window {}
+    impl ApplicationWindowImpl for Window {}
+    impl AdwApplicationWindowImpl for Window {}
+}
+
+glib::wrapper! {
+    pub struct Window(ObjectSubclass<imp::Window>)
+        @extends adw::ApplicationWindow, gtk::ApplicationWindow, gtk::Window, gtk::Widget,
+        @implements gio::ActionGroup, gio::ActionMap;
+}
+
+impl Window {
+    pub fn new() -> Self {
+        glib::Object::new()
+    }
+}
+
+impl Default for Window {
+    fn default() -> Self {
+        Self::new()
+    }
+}

src/ui/window.ui

@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="Adw" version="1.4"/>
+  <menu id="primary_menu">
+    <section>
+      <item>
+        <attribute name="label">_About Helvum</attribute>
+        <attribute name="action">app.about</attribute>
+      </item>
+    </section>
+  </menu>
+  <template class="HelvumWindow" parent="AdwApplicationWindow">
+    <property name="default-width">1280</property>
+    <property name="default-height">720</property>
+    <property name="title">Helvum - Pipewire Patchbay</property>
+    <child>
+      <object class="AdwToolbarView">
+        <child type="top">
+          <object class="AdwHeaderBar" id="header_bar">
+            <child type="end">
+              <object class="GtkMenuButton">
+                <property name="icon-name">open-menu-symbolic</property>
+                <property name="menu-model">primary_menu</property>
+              </object>
+            </child>
+          </object>
+        </child>
+        <property name="content">
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <child>
+              <object class="AdwBanner" id="connection_banner">
+                <property name="title" translatable="yes">Disconnected</property>
+                <property name="revealed">false</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkOverlay">
+                <child>
+                  <object class="GtkScrolledWindow">
+                    <child>
+                      <object class="HelvumGraphView" id="graph">
+                        <property name="hexpand">true</property>
+                        <property name="vexpand">true</property>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+                <child type="overlay">
+                  <object class="HelvumZoomEntry">
+                    <property name="zoomed-widget">graph</property>
+                    <property name="halign">end</property>
+                    <property name="valign">end</property>
+                    <property name="margin-end">24</property>
+                    <property name="margin-bottom">24</property>
+                  </object>
+                </child>
+              </object>
+            </child>
+          </object>
+        </property>
+      </object>
+    </child>
+  </template>
+</interface>

src/view/graph_view.rs

@@ -1,399 +0,0 @@
-// 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
-// the Free Software Foundation, either version 3 of the License, or
-// (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
-// 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 super::{Node, Port};
-
-use gtk::{
-    glib::{self, clone},
-    graphene, gsk,
-    prelude::*,
-    subclass::prelude::*,
-};
-use log::{error, warn};
-
-use std::{cmp::Ordering, collections::HashMap};
-
-use crate::NodeType;
-
-mod imp {
-    use super::*;
-
-    use std::{cell::RefCell, rc::Rc};
-
-    use log::warn;
-
-    #[derive(Default)]
-    pub struct GraphView {
-        pub(super) nodes: RefCell<HashMap<u32, Node>>,
-        /// Stores the link and whether it is currently active.
-        pub(super) links: RefCell<HashMap<u32, (crate::PipewireLink, bool)>>,
-    }
-
-    #[glib::object_subclass]
-    impl ObjectSubclass for GraphView {
-        const NAME: &'static str = "GraphView";
-        type Type = super::GraphView;
-        type ParentType = gtk::Widget;
-
-        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) {
-            self.parent_constructed(obj);
-
-            let drag_state = Rc::new(RefCell::new(None));
-            let drag_controller = gtk::GestureDrag::new();
-
-            drag_controller.connect_drag_begin(
-                clone!(@strong drag_state => move |drag_controller, x, y| {
-                    let mut drag_state = drag_state.borrow_mut();
-                    let widget = drag_controller
-                        .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.
-                        let (x, y) = widget.get_node_position(&target);
-                        Some((target, x, y))
-                    } else {
-                        None
-                    }
-                }
-            ));
-            drag_controller.connect_drag_update(
-                clone!(@strong drag_state => move |drag_controller, x, y| {
-                    let widget = drag_controller
-                        .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) {
-            self.nodes
-                .borrow()
-                .values()
-                .for_each(|node| node.unparent())
-        }
-    }
-
-    impl WidgetImpl for GraphView {
-        fn snapshot(&self, widget: &Self::Type, snapshot: &gtk::Snapshot) {
-            /* FIXME: A lot of hardcoded values in here.
-            Try to use relative units (em) and colours from the theme as much as possible. */
-
-            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.append_cairo(&widget_bounds);
-
-            // Draw a nice grid on the background.
-            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));
-
-            // Draw all links
-            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);
-
-            let rgba = widget
-                .style_context()
-                .lookup_color("graphview-link")
-                .unwrap_or_else(|| gtk::gdk::RGBA::new(0.0, 0.0, 0.0, 0.0));
-
-            link_cr.set_source_rgba(
-                rgba.red().into(),
-                rgba.green().into(),
-                rgba.blue().into(),
-                rgba.alpha().into(),
-            );
-
-            for (link, active) in self.links.borrow().values() {
-                if let Some((from_x, from_y, to_x, to_y)) = self.get_link_coordinates(link) {
-                    link_cr.move_to(from_x, from_y);
-
-                    // Use dashed line for inactive links, full line otherwise.
-                    if *active {
-                        link_cr.set_dash(&[], 0.0);
-                    } else {
-                        link_cr.set_dash(&[10.0, 5.0], 0.0);
-                    }
-
-                    // If the output port is farther right than the input port and they have
-                    // a similar y coordinate, apply a y offset to the control points
-                    // so that the curve sticks out a bit.
-                    let y_control_offset = if from_x > to_x {
-                        f64::max(0.0, 25.0 - (from_y - to_y).abs())
-                    } else {
-                        0.0
-                    };
-
-                    // Place curve control offset by half the x distance between the two points.
-                    // This makes the curve scale well for varying distances between the two ports,
-                    // especially when the output port is farther right than the input port.
-                    let half_x_dist = f64::abs(from_x - to_x) / 2.0;
-                    link_cr.curve_to(
-                        from_x + half_x_dist,
-                        from_y - y_control_offset,
-                        to_x - half_x_dist,
-                        to_y - y_control_offset,
-                        to_x,
-                        to_y,
-                    );
-
-                    if let Err(e) = link_cr.stroke() {
-                        warn!("Failed to draw graphview links: {}", e);
-                    };
-                } else {
-                    warn!("Could not get allocation of ports of link: {:?}", link);
-                }
-            }
-        }
-    }
-
-    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 nodes = self.nodes.borrow();
-
-            // For some reason, gtk4::WidgetExt::translate_coordinates gives me incorrect values,
-            // so we manually calculate the needed offsets here.
-
-            let from_port = &nodes.get(&link.node_from)?.get_port(link.port_from)?;
-            let from_node = from_port
-                .ancestor(Node::static_type())
-                .expect("Port is not a child of a node");
-            let from_x = from_node.allocation().x()
-                + from_port.allocation().x()
-                + from_port.allocation().width();
-            let from_y = from_node.allocation().y()
-                + from_port.allocation().y()
-                + (from_port.allocation().height() / 2);
-
-            let to_port = &nodes.get(&link.node_to)?.get_port(link.port_to)?;
-            let to_node = to_port
-                .ancestor(Node::static_type())
-                .expect("Port is not a child of a node");
-            let to_x = to_node.allocation().x() + to_port.allocation().x();
-            let to_y = to_node.allocation().y()
-                + to_port.allocation().y()
-                + (to_port.allocation().height() / 2);
-
-            Some((from_x.into(), from_y.into(), to_x.into(), to_y.into()))
-        }
-    }
-}
-
-glib::wrapper! {
-    pub struct GraphView(ObjectSubclass<imp::GraphView>)
-        @extends gtk::Widget;
-}
-
-impl GraphView {
-    pub fn new() -> Self {
-        glib::Object::new(&[]).expect("Failed to create GraphView")
-    }
-
-    pub fn add_node(&self, id: u32, node: Node, node_type: Option<NodeType>) {
-        let private = imp::GraphView::from_instance(self);
-        node.set_parent(self);
-
-        // Place widgets in colums of 3, growing down
-        let x = if let Some(node_type) = node_type {
-            match node_type {
-                NodeType::Output => 20.0,
-                NodeType::Input => 820.0,
-            }
-        } else {
-            420.0
-        };
-
-        let y = private
-            .nodes
-            .borrow()
-            .values()
-            .map(|node| {
-                // Map nodes to their locations
-                self.get_node_position(&node.clone().upcast())
-            })
-            .filter(|(x2, _)| {
-                // Only look for other nodes that have a similar x coordinate
-                (x - x2).abs() < 50.0
-            })
-            .max_by(|y1, y2| {
-                // Get max in column
-                y1.partial_cmp(y2).unwrap_or(Ordering::Equal)
-            })
-            .map_or(20_f32, |(_x, y)| y + 100.0);
-
-        self.move_node(&node.clone().upcast(), 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 = private.nodes.borrow_mut();
-        if let Some(node) = nodes.remove(&id) {
-            node.unparent();
-        } else {
-            warn!("Tried to remove non-existant node (id={}) from graph", id);
-        }
-    }
-
-    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) = private.nodes.borrow_mut().get_mut(&node_id) {
-            node.add_port(port_id, port);
-        } else {
-            error!(
-                "Node with id {} not found when trying to add port with id {} to graph",
-                node_id, port_id
-            );
-        }
-    }
-
-    pub fn remove_port(&self, id: u32, node_id: u32) {
-        let private = imp::GraphView::from_instance(self);
-        let nodes = private.nodes.borrow();
-        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);
-        private.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)) = private.links.borrow_mut().get_mut(&link_id) {
-            *state = active;
-            self.queue_draw();
-        } else {
-            warn!("Link state changed on unknown link (id={})", link_id);
-        }
-    }
-
-    pub fn remove_link(&self, id: u32) {
-        let private = imp::GraphView::from_instance(self);
-        let mut links = private.links.borrow_mut();
-        links.remove(&id);
-
-        self.queue_draw();
-    }
-
-    /// Get the position of the specified node inside the graphview.
-    pub(super) fn get_node_position(&self, node: &gtk::Widget) -> (f32, f32) {
-        let layout_manager = self
-            .layout_manager()
-            .expect("Failed to get layout manager")
-            .dynamic_cast::<gtk::FixedLayout>()
-            .expect("Failed to cast to FixedLayout");
-
-        let node = layout_manager
-            .layout_child(node)
-            .dynamic_cast::<gtk::FixedLayoutChild>()
-            .expect("Could not cast to FixedLayoutChild");
-        node.transform()
-            .expect("Failed to obtain transform from layout child")
-            .to_translate()
-    }
-
-    pub(super) fn move_node(&self, node: &gtk::Widget, x: f32, y: f32) {
-        let layout_manager = self
-            .layout_manager()
-            .expect("Failed to get layout manager")
-            .dynamic_cast::<gtk::FixedLayout>()
-            .expect("Failed to cast to FixedLayout");
-
-        let transform = gsk::Transform::new()
-            // Nodes should not be able to be dragged out of the view, so we use `max(coordinate, 0.0)` to prevent that.
-            .translate(&graphene::Point::new(f32::max(x, 0.0), f32::max(y, 0.0)))
-            .unwrap();
-
-        layout_manager
-            .layout_child(node)
-            .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();
-    }
-}
-
-impl Default for GraphView {
-    fn default() -> Self {
-        Self::new()
-    }
-}

src/view/node.rs

@@ -1,133 +0,0 @@
-// 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
-// the Free Software Foundation, either version 3 of the License, or
-// (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
-// 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 gtk::{glib, prelude::*, subclass::prelude::*};
-use pipewire::spa::Direction;
-
-use std::collections::HashMap;
-
-mod imp {
-    use super::*;
-
-    use std::cell::{Cell, RefCell};
-
-    pub struct Node {
-        pub(super) grid: gtk::Grid,
-        pub(super) label: gtk::Label,
-        pub(super) ports: RefCell<HashMap<u32, crate::view::port::Port>>,
-        pub(super) num_ports_in: Cell<i32>,
-        pub(super) num_ports_out: Cell<i32>,
-    }
-
-    #[glib::object_subclass]
-    impl ObjectSubclass for Node {
-        const NAME: &'static str = "Node";
-        type Type = super::Node;
-        type ParentType = gtk::Widget;
-
-        fn class_init(klass: &mut Self::Class) {
-            klass.set_layout_manager_type::<gtk::BinLayout>();
-        }
-
-        fn new() -> Self {
-            let grid = gtk::Grid::new();
-            let label = gtk::Label::new(None);
-
-            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 {
-                grid,
-                label,
-                ports: RefCell::new(HashMap::new()),
-                num_ports_in: Cell::new(0),
-                num_ports_out: Cell::new(0),
-            }
-        }
-    }
-
-    impl ObjectImpl for Node {
-        fn constructed(&self, obj: &Self::Type) {
-            self.parent_constructed(obj);
-            self.grid.set_parent(obj);
-        }
-
-        fn dispose(&self, _obj: &Self::Type) {
-            self.grid.unparent();
-        }
-    }
-
-    impl WidgetImpl for Node {}
-}
-
-glib::wrapper! {
-    pub struct Node(ObjectSubclass<imp::Node>)
-        @extends gtk::Widget;
-}
-
-impl Node {
-    pub fn new(name: &str) -> Self {
-        let res: Self = glib::Object::new(&[]).expect("Failed to create Node");
-        let private = imp::Node::from_instance(&res);
-
-        private.label.set_text(name);
-
-        res
-    }
-
-    pub fn add_port(&mut self, id: u32, port: super::port::Port) {
-        let private = imp::Node::from_instance(self);
-
-        match port.direction() {
-            Direction::Input => {
-                private
-                    .grid
-                    .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
-                    .grid
-                    .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);
-    }
-
-    pub fn get_port(&self, id: u32) -> Option<super::port::Port> {
-        let private = imp::Node::from_instance(self);
-        private.ports.borrow_mut().get(&id).cloned()
-    }
-
-    pub fn remove_port(&self, id: u32) {
-        let private = imp::Node::from_instance(self);
-        if let Some(port) = private.ports.borrow_mut().remove(&id) {
-            match port.direction() {
-                Direction::Input => private.num_ports_in.set(private.num_ports_in.get() - 1),
-                Direction::Output => private.num_ports_in.set(private.num_ports_out.get() - 1),
-            }
-
-            port.unparent();
-        }
-    }
-}

src/view/port.rs

@@ -1,209 +0,0 @@
-// 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
-// the Free Software Foundation, either version 3 of the License, or
-// (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
-// 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 gtk::{
-    gdk,
-    glib::{self, clone, subclass::Signal},
-    prelude::*,
-    subclass::prelude::*,
-};
-use log::{trace, warn};
-use pipewire::spa::Direction;
-
-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::Boxed)]
-#[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::Boxed)]
-#[boxed_type(name = "HelvumReversedLink")]
-struct ReversedLink(u32);
-
-mod imp {
-    use once_cell::{sync::Lazy, unsync::OnceCell};
-    use pipewire::spa::Direction;
-
-    use super::*;
-
-    /// Graphical representation of a pipewire port.
-    #[derive(Default)]
-    pub struct Port {
-        pub(super) label: OnceCell<gtk::Label>,
-        pub(super) id: OnceCell<u32>,
-        pub(super) direction: OnceCell<Direction>,
-    }
-
-    #[glib::object_subclass]
-    impl ObjectSubclass for Port {
-        const NAME: &'static str = "Port";
-        type Type = super::Port;
-        type ParentType = gtk::Widget;
-
-        fn class_init(klass: &mut Self::Class) {
-            klass.set_layout_manager_type::<gtk::BinLayout>();
-
-            // Make it look like a GTK button.
-            klass.set_css_name("button");
-        }
-    }
-
-    impl ObjectImpl for Port {
-        fn dispose(&self, _obj: &Self::Type) {
-            if let Some(label) = self.label.get() {
-                label.unparent()
-            }
-        }
-
-        fn signals() -> &'static [Signal] {
-            static SIGNALS: Lazy<Vec<Signal>> = Lazy::new(|| {
-                vec![Signal::builder(
-                    "port-toggled",
-                    // Provide id of output port and input port to signal handler.
-                    &[<u32>::static_type().into(), <u32>::static_type().into()],
-                    // signal handler sends back nothing.
-                    <()>::static_type().into(),
-                )
-                .build()]
-            });
-
-            SIGNALS.as_ref()
-        }
-    }
-    impl WidgetImpl for Port {}
-}
-
-glib::wrapper! {
-    pub struct Port(ObjectSubclass<imp::Port>)
-        @extends gtk::Widget;
-}
-
-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 private = imp::Port::from_instance(&res);
-        private.id.set(id).expect("Port id already set");
-        private
-            .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::DragSource::builder()
-            .content(&gdk::ContentProvider::for_value(&match direction {
-                Direction::Input => ReversedLink(id).to_value(),
-                Direction::Output => ForwardLink(id).to_value(),
-            }))
-            .build();
-        drag_src.connect_drag_begin(move |_, _| {
-            trace!("Drag started from port {}", id);
-        });
-        drag_src.connect_drag_cancel(move |_, _, _| {
-            trace!("Drag from port {} was cancelled", id);
-            false
-        });
-        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.
-        let drop_target = gtk::DropTarget::new(
-            match direction {
-                Direction::Input => ForwardLink::static_type(),
-                Direction::Output => ReversedLink::static_type(),
-            },
-            gdk::DragAction::COPY,
-        );
-        match direction {
-            Direction::Input => {
-                drop_target.connect_drop(
-                    clone!(@weak res as this => @default-panic, move |drop_target, val, _, _| {
-                        if let Ok(ForwardLink(source_id)) = val.get::<ForwardLink>() {
-                            // Get the callback registered in the widget and call it
-                            drop_target
-                                .widget()
-                                .emit_by_name::<()>("port-toggled", &[&source_id, &this.id()]);
-                        } else {
-                            warn!("Invalid type dropped on ingoing port");
-                        }
-
-                        true
-                    }),
-                );
-            }
-            Direction::Output => {
-                drop_target.connect_drop(
-                    clone!(@weak res as this => @default-panic, move |drop_target, val, _, _| {
-                        if let Ok(ReversedLink(target_id)) = val.get::<ReversedLink>() {
-                            // Get the callback registered in the widget and call it
-                            drop_target
-                                .widget()
-                                .emit_by_name::<()>("port-toggled", &[&this.id(), &target_id]);
-                        } else {
-                            warn!("Invalid type dropped on outgoing port");
-                        }
-
-                        true
-                    }),
-                );
-            }
-        }
-        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());
-
-        // Color the port according to its media type.
-        match media_type {
-            Some(MediaType::Video) => res.add_css_class("video"),
-            Some(MediaType::Audio) => res.add_css_class("audio"),
-            Some(MediaType::Midi) => res.add_css_class("midi"),
-            None => {}
-        }
-
-        res
-    }
-
-    pub fn id(&self) -> u32 {
-        let private = imp::Port::from_instance(self);
-        private.id.get().copied().expect("Port id is not set")
-    }
-
-    pub fn direction(&self) -> &Direction {
-        let private = imp::Port::from_instance(self);
-        private.direction.get().expect("Port direction is not set")
-    }
-}