Restructure view module into ui folder, graph specific widgets into graph subfolder

src/ui/graph/graph_view.rs

@@ -0,0 +1,734 @@
+// 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 super::{Node, Port};
+
+use gtk::{
+    glib::{self, clone},
+    graphene,
+    graphene::Point,
+    gsk,
+    prelude::*,
+    subclass::prelude::*,
+};
+use log::{error, warn};
+
+use std::{cmp::Ordering, collections::HashMap};
+
+use crate::NodeType;
+
+const CANVAS_SIZE: f64 = 5000.0;
+
+mod imp {
+    use super::*;
+
+    use std::cell::{Cell, RefCell};
+
+    use gtk::{
+        gdk::{self, RGBA},
+        graphene::Rect,
+        gsk::ColorStop,
+    };
+    use log::warn;
+    use once_cell::sync::Lazy;
+
+    pub struct DragState {
+        node: glib::WeakRef<Node>,
+        /// This stores the offset of the pointer to the origin of the node,
+        /// so that we can keep the pointer over the same position when moving the node
+        ///
+        /// The offset is normalized to the default zoom-level of 1.0.
+        offset: Point,
+    }
+
+    #[derive(Default)]
+    pub struct GraphView {
+        /// Stores nodes and their positions.
+        pub(super) nodes: RefCell<HashMap<u32, (Node, Point)>>,
+        /// Stores the link and whether it is currently active.
+        pub(super) links: RefCell<HashMap<u32, (crate::PipewireLink, bool)>>,
+        pub hadjustment: RefCell<Option<gtk::Adjustment>>,
+        pub vadjustment: RefCell<Option<gtk::Adjustment>>,
+        pub zoom_factor: Cell<f64>,
+        /// This keeps track of an ongoing node drag operation.
+        pub dragged_node: RefCell<Option<DragState>>,
+        // Memorized data for an in-progress zoom gesture
+        pub zoom_gesture_initial_zoom: Cell<Option<f64>>,
+        pub zoom_gesture_anchor: Cell<Option<(f64, f64)>>,
+    }
+
+    #[glib::object_subclass]
+    impl ObjectSubclass for GraphView {
+        const NAME: &'static str = "GraphView";
+        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().set_overflow(gtk::Overflow::Hidden);
+
+            self.setup_node_dragging();
+            self.setup_scroll_zooming();
+            self.setup_zoom_gesture();
+        }
+
+        fn dispose(&self) {
+            self.nodes
+                .borrow()
+                .values()
+                .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().values() {
+                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();
+
+            self.snapshot_background(widget, snapshot);
+
+            // Draw all visible children
+            self.nodes
+                .borrow()
+                .values()
+                // 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_scroll_zooming(&self) {
+            // We're only interested in the vertical axis, but for devices like touchpads,
+            // not capturing a small accidental horizontal move may cause the scroll to be disrupted if a widget
+            // higher up captures it instead.
+            let scroll_controller =
+                gtk::EventControllerScroll::new(gtk::EventControllerScrollFlags::BOTH_AXES);
+
+            scroll_controller.connect_scroll(|eventcontroller, _, delta_y| {
+                let event = eventcontroller.current_event().unwrap(); // We are inside the event handler, so it must have an event
+
+                if event
+                    .modifier_state()
+                    .contains(gdk::ModifierType::CONTROL_MASK)
+                {
+                    let widget = eventcontroller
+                        .widget()
+                        .downcast::<super::GraphView>()
+                        .unwrap();
+                    widget.set_zoom_factor(widget.zoom_factor() + (0.1 * -delta_y), None);
+
+                    gtk::Inhibit(true)
+                } else {
+                    gtk::Inhibit(false)
+                }
+            });
+            self.obj().add_controller(scroll_controller);
+        }
+
+        fn setup_zoom_gesture(&self) {
+            let zoom_gesture = gtk::GestureZoom::new();
+            zoom_gesture.connect_begin(|gesture, _| {
+                let widget = gesture.widget().downcast::<super::GraphView>().unwrap();
+
+                widget
+                    .imp()
+                    .zoom_gesture_initial_zoom
+                    .set(Some(widget.zoom_factor()));
+                widget
+                    .imp()
+                    .zoom_gesture_anchor
+                    .set(gesture.bounding_box_center());
+            });
+            zoom_gesture.connect_scale_changed(move |gesture, delta| {
+                let widget = gesture.widget().downcast::<super::GraphView>().unwrap();
+
+                let initial_zoom = widget
+                    .imp()
+                    .zoom_gesture_initial_zoom
+                    .get()
+                    .expect("Initial zoom not set during zoom gesture");
+
+                widget.set_zoom_factor(initial_zoom * delta, gesture.bounding_box_center());
+            });
+            self.obj().add_controller(zoom_gesture);
+        }
+
+        fn snapshot_background(&self, widget: &super::GraphView, snapshot: &gtk::Snapshot) {
+            // Grid size and line width during neutral zoom (factor 1.0).
+            const NORMAL_GRID_SIZE: f32 = 20.0;
+            const NORMAL_GRID_LINE_WIDTH: f32 = 1.0;
+
+            let zoom_factor = self.zoom_factor.get();
+            let grid_size = NORMAL_GRID_SIZE * zoom_factor as f32;
+            let grid_line_width = NORMAL_GRID_LINE_WIDTH * zoom_factor as f32;
+
+            let alloc = widget.allocation();
+
+            // We need to offset the lines between 0 and (excluding) `grid_size` so the grid moves with
+            // the rest of the view when scrolling.
+            // The offset is rounded so the grid is always aligned to a row of pixels.
+            let hadj = self
+                .hadjustment
+                .borrow()
+                .as_ref()
+                .map(|hadjustment| hadjustment.value())
+                .unwrap_or(0.0);
+            let hoffset = (grid_size - (hadj as f32 % grid_size)) % grid_size;
+            let vadj = self
+                .vadjustment
+                .borrow()
+                .as_ref()
+                .map(|vadjustment| vadjustment.value())
+                .unwrap_or(0.0);
+            let voffset = (grid_size - (vadj as f32 % grid_size)) % grid_size;
+
+            snapshot.push_repeat(
+                &Rect::new(0.0, 0.0, alloc.width() as f32, alloc.height() as f32),
+                Some(&Rect::new(0.0, voffset, alloc.width() as f32, grid_size)),
+            );
+            let grid_color = RGBA::new(0.137, 0.137, 0.137, 1.0);
+            snapshot.append_linear_gradient(
+                &Rect::new(0.0, voffset, alloc.width() as f32, grid_line_width),
+                &Point::new(0.0, 0.0),
+                &Point::new(alloc.width() as f32, 0.0),
+                &[
+                    ColorStop::new(0.0, grid_color),
+                    ColorStop::new(1.0, grid_color),
+                ],
+            );
+            snapshot.pop();
+
+            snapshot.push_repeat(
+                &Rect::new(0.0, 0.0, alloc.width() as f32, alloc.height() as f32),
+                Some(&Rect::new(hoffset, 0.0, grid_size, alloc.height() as f32)),
+            );
+            snapshot.append_linear_gradient(
+                &Rect::new(hoffset, 0.0, grid_line_width, alloc.height() as f32),
+                &Point::new(0.0, 0.0),
+                &Point::new(0.0, alloc.height() as f32),
+                &[
+                    ColorStop::new(0.0, grid_color),
+                    ColorStop::new(1.0, grid_color),
+                ],
+            );
+            snapshot.pop();
+        }
+
+        fn snapshot_links(&self, widget: &super::GraphView, snapshot: &gtk::Snapshot) {
+            let alloc = widget.allocation();
+
+            let link_cr = snapshot.append_cairo(&graphene::Rect::new(
+                0.0,
+                0.0,
+                alloc.width() as f32,
+                alloc.height() as f32,
+            ));
+
+            link_cr.set_line_width(2.0 * self.zoom_factor.get());
+
+            let rgba = widget
+                .style_context()
+                .lookup_color("graphview-link")
+                .unwrap_or(gtk::gdk::RGBA::BLACK);
+
+            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() {
+                // TODO: Do not draw links when they are outside the view
+                if let Some((from_x, from_y, to_x, to_y)) = self.get_link_coordinates(link) {
+                    link_cr.move_to(from_x, from_y);
+
+                    // 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);
+                }
+            }
+        }
+
+        /// Get coordinates for the drawn link to start at and to end at.
+        ///
+        /// # Returns
+        /// `Some((from_x, from_y, to_x, to_y))` if all objects the links refers to exist as widgets.
+        fn get_link_coordinates(&self, link: &crate::PipewireLink) -> Option<(f64, f64, f64, f64)> {
+            let widget = &*self.obj();
+            let nodes = self.nodes.borrow();
+
+            let output_port = &nodes.get(&link.node_from)?.0.get_port(link.port_from)?;
+
+            let output_port_padding =
+                (output_port.allocated_width() - output_port.width()) as f64 / 2.0;
+
+            let (from_x, from_y) = output_port.translate_coordinates(
+                widget,
+                output_port.width() as f64 + output_port_padding,
+                (output_port.height() / 2) as f64,
+            )?;
+
+            let input_port = &nodes.get(&link.node_to)?.0.get_port(link.port_to)?;
+
+            let input_port_padding =
+                (input_port.allocated_width() - input_port.width()) as f64 / 2.0;
+
+            let (to_x, to_y) = input_port.translate_coordinates(
+                widget,
+                -input_port_padding,
+                (input_port.height() / 2) as f64,
+            )?;
+
+            Some((from_x, from_y, to_x, to_y))
+        }
+
+        fn set_adjustment(
+            &self,
+            obj: &super::GraphView,
+            adjustment: Option<&gtk::Adjustment>,
+            orientation: gtk::Orientation,
+        ) {
+            match orientation {
+                gtk::Orientation::Horizontal => {
+                    *self.hadjustment.borrow_mut() = adjustment.cloned()
+                }
+                gtk::Orientation::Vertical => *self.vadjustment.borrow_mut() = adjustment.cloned(),
+                _ => unimplemented!(),
+            }
+
+            if let Some(adjustment) = adjustment {
+                adjustment
+                    .connect_value_changed(clone!(@weak obj => move |_|  obj.queue_allocate() ));
+            }
+        }
+
+        fn set_adjustment_values(
+            &self,
+            obj: &super::GraphView,
+            adjustment: &gtk::Adjustment,
+            orientation: gtk::Orientation,
+        ) {
+            let size = match orientation {
+                gtk::Orientation::Horizontal => obj.width(),
+                gtk::Orientation::Vertical => obj.height(),
+                _ => unimplemented!(),
+            };
+            let zoom_factor = self.zoom_factor.get();
+
+            adjustment.configure(
+                adjustment.value(),
+                -(CANVAS_SIZE / 2.0) * zoom_factor,
+                (CANVAS_SIZE / 2.0) * zoom_factor,
+                (f64::from(size) * 0.1) * zoom_factor,
+                (f64::from(size) * 0.9) * zoom_factor,
+                f64::from(size) * zoom_factor,
+            );
+        }
+    }
+}
+
+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, id: u32, 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()
+            .values()
+            .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(id, (node, Point::new(x, y)));
+    }
+
+    pub fn remove_node(&self, id: u32) {
+        let mut nodes = self.imp().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: Port) {
+        if let Some((node, _)) = self.imp().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 nodes = self.imp().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) {
+        self.imp()
+            .links
+            .borrow_mut()
+            .insert(link_id, (link, active));
+        self.queue_draw();
+    }
+
+    pub fn set_link_state(&self, link_id: u32, active: bool) {
+        if let Some((_, state)) = self.imp().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 mut links = self.imp().links.borrow_mut();
+        links.remove(&id);
+
+        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.pipewire_id())
+            .map(|(_, point)| *point)
+    }
+
+    pub(super) fn move_node(&self, widget: &Node, point: &Point) {
+        let mut nodes = self.imp().nodes.borrow_mut();
+        let mut node = nodes
+            .get_mut(&widget.pipewire_id())
+            .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.1 = Point::new(
+            point.x().clamp(
+                -(CANVAS_SIZE / 2.0) as f32,
+                (CANVAS_SIZE / 2.0) as f32 - widget.width() as f32,
+            ),
+            point.y().clamp(
+                -(CANVAS_SIZE / 2.0) as f32,
+                (CANVAS_SIZE / 2.0) as f32 - widget.height() as f32,
+            ),
+        );
+
+        self.queue_allocate();
+    }
+}
+
+impl Default for GraphView {
+    fn default() -> Self {
+        Self::new()
+    }
+}

src/ui/graph/mod.rs

@@ -0,0 +1,24 @@
+// 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 zoomentry;
+pub use zoomentry::*;

src/ui/graph/node.rs

@@ -0,0 +1,181 @@
+// 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 gtk::{glib, prelude::*, subclass::prelude::*};
+use pipewire::spa::Direction;
+
+use std::collections::HashMap;
+
+use super::Port;
+
+mod imp {
+    use glib::ParamFlags;
+    use once_cell::sync::Lazy;
+
+    use super::*;
+
+    use std::cell::{Cell, RefCell};
+
+    pub struct Node {
+        pub(super) pipewire_id: Cell<u32>,
+        pub(super) grid: gtk::Grid,
+        pub(super) label: gtk::Label,
+        pub(super) ports: RefCell<HashMap<u32, 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 = "HelvumNode";
+        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);
+            label.set_wrap(true);
+            label.set_lines(2);
+            label.set_max_width_chars(20);
+            label.set_ellipsize(gtk::pango::EllipsizeMode::End);
+
+            grid.attach(&label, 0, 0, 2, 1);
+
+            // Display a grab cursor when the mouse is over the label so the user knows the node can be dragged.
+            label.set_cursor(gtk::gdk::Cursor::from_name("grab", None).as_ref());
+
+            Self {
+                pipewire_id: Cell::new(0),
+                grid,
+                label,
+                ports: RefCell::new(HashMap::new()),
+                num_ports_in: Cell::new(0),
+                num_ports_out: Cell::new(0),
+            }
+        }
+    }
+
+    impl ObjectImpl for Node {
+        fn constructed(&self) {
+            self.parent_constructed();
+            self.grid.set_parent(&*self.obj());
+        }
+
+        fn properties() -> &'static [glib::ParamSpec] {
+            static PROPERTIES: Lazy<Vec<glib::ParamSpec>> = Lazy::new(|| {
+                vec![
+                    glib::ParamSpecUInt::builder("pipewire-id")
+                        .flags(ParamFlags::READWRITE | ParamFlags::CONSTRUCT_ONLY)
+                        .build(),
+                    glib::ParamSpecString::builder("name").build(),
+                ]
+            });
+
+            PROPERTIES.as_ref()
+        }
+
+        fn property(&self, _id: usize, pspec: &glib::ParamSpec) -> glib::Value {
+            match pspec.name() {
+                "pipewire-id" => self.pipewire_id.get().to_value(),
+                "name" => self.label.text().to_value(),
+                _ => unimplemented!(),
+            }
+        }
+
+        fn set_property(&self, _id: usize, value: &glib::Value, pspec: &glib::ParamSpec) {
+            match pspec.name() {
+                "name" => {
+                    self.label.set_text(value.get().unwrap());
+                    self.label.set_tooltip_text(value.get().ok());
+                }
+                "pipewire-id" => self.pipewire_id.set(value.get().unwrap()),
+                _ => unimplemented!(),
+            }
+        }
+
+        fn dispose(&self) {
+            self.grid.unparent();
+        }
+    }
+
+    impl WidgetImpl for Node {}
+}
+
+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("name", &name)
+            .property("pipewire-id", &pipewire_id)
+            .build()
+    }
+
+    pub fn pipewire_id(&self) -> u32 {
+        self.property("pipewire-id")
+    }
+
+    /// Get the nodes `name` property, which represents the displayed name.
+    pub fn name(&self) -> String {
+        self.property("name")
+    }
+
+    /// Set the nodes `name` property, which represents the displayed name.
+    pub fn set_name(&self, name: &str) {
+        self.set_property("name", name);
+    }
+
+    pub fn add_port(&mut self, id: u32, port: Port) {
+        let imp = self.imp();
+
+        match port.direction() {
+            Direction::Input => {
+                imp.grid.attach(&port, 0, imp.num_ports_in.get() + 1, 1, 1);
+                imp.num_ports_in.set(imp.num_ports_in.get() + 1);
+            }
+            Direction::Output => {
+                imp.grid.attach(&port, 1, imp.num_ports_out.get() + 1, 1, 1);
+                imp.num_ports_out.set(imp.num_ports_out.get() + 1);
+            }
+        }
+
+        imp.ports.borrow_mut().insert(id, port);
+    }
+
+    pub fn get_port(&self, id: u32) -> Option<Port> {
+        self.imp().ports.borrow_mut().get(&id).cloned()
+    }
+
+    pub fn remove_port(&self, id: u32) {
+        let imp = self.imp();
+        if let Some(port) = imp.ports.borrow_mut().remove(&id) {
+            match port.direction() {
+                Direction::Input => imp.num_ports_in.set(imp.num_ports_in.get() - 1),
+                Direction::Output => imp.num_ports_in.set(imp.num_ports_out.get() - 1),
+            }
+
+            port.unparent();
+        }
+    }
+}

src/ui/graph/port.rs

@@ -0,0 +1,251 @@
+// 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 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 glib::ParamFlags;
+    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) pipewire_id: OnceCell<u32>,
+        pub(super) label: gtk::Label,
+        pub(super) direction: OnceCell<Direction>,
+    }
+
+    #[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_layout_manager_type::<gtk::BinLayout>();
+
+            // Make it look like a GTK button.
+            klass.set_css_name("button");
+        }
+    }
+
+    impl ObjectImpl for Port {
+        fn constructed(&self) {
+            self.parent_constructed();
+
+            self.label.set_parent(&*self.obj());
+            self.label.set_wrap(true);
+            self.label.set_lines(2);
+            self.label.set_max_width_chars(20);
+            self.label.set_ellipsize(gtk::pango::EllipsizeMode::End);
+        }
+
+        fn dispose(&self) {
+            self.label.unparent()
+        }
+
+        fn properties() -> &'static [glib::ParamSpec] {
+            static PROPERTIES: Lazy<Vec<glib::ParamSpec>> = Lazy::new(|| {
+                vec![
+                    glib::ParamSpecUInt::builder("pipewire-id")
+                        .flags(ParamFlags::READWRITE | ParamFlags::CONSTRUCT_ONLY)
+                        .build(),
+                    glib::ParamSpecString::builder("name").build(),
+                ]
+            });
+
+            PROPERTIES.as_ref()
+        }
+
+        fn property(&self, _id: usize, pspec: &glib::ParamSpec) -> glib::Value {
+            match pspec.name() {
+                "pipewire-id" => self.pipewire_id.get().unwrap().to_value(),
+                "name" => self.label.text().to_value(),
+                _ => unimplemented!(),
+            }
+        }
+
+        fn set_property(&self, _id: usize, value: &glib::Value, pspec: &glib::ParamSpec) {
+            match pspec.name() {
+                "name" => {
+                    self.label.set_text(value.get().unwrap());
+                    self.label.set_tooltip_text(value.get().ok());
+                }
+                "pipewire-id" => self.pipewire_id.set(value.get().unwrap()).unwrap(),
+                _ => unimplemented!(),
+            }
+        }
+
+        fn signals() -> &'static [Signal] {
+            static SIGNALS: Lazy<Vec<Signal>> = Lazy::new(|| {
+                vec![Signal::builder("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 {}
+}
+
+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::builder()
+            .property("pipewire-id", &id)
+            .property("name", &name)
+            .build();
+
+        let imp = res.imp();
+
+        imp.direction
+            .set(direction)
+            .expect("Port direction 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(clone!(@weak res as obj => move |source, _| {
+            trace!("Drag started from port {}", id);
+            let paintable = gtk::WidgetPaintable::new(Some(&obj));
+            source.set_icon(Some(&paintable), 0, 0);
+        }));
+        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.pipewire_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.pipewire_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 pipewire_id(&self) -> u32 {
+        self.property("pipewire-id")
+    }
+
+    /// Get the nodes `name` property, which represents the displayed name.
+    pub fn name(&self) -> String {
+        self.property("name")
+    }
+
+    /// Set the nodes `name` property, which represents the displayed name.
+    pub fn set_name(&self, name: &str) {
+        self.set_property("name", name);
+    }
+
+    pub fn direction(&self) -> &Direction {
+        self.imp()
+            .direction
+            .get()
+            .expect("Port direction is not set")
+    }
+}

src/ui/graph/zoomentry.rs

@@ -0,0 +1,172 @@
+use gtk::{glib, 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));
+
+            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: GraphView = value.get().unwrap();
+                    widget.connect_notify_local(
+                        Some("zoom-factor"),
+                        clone!(@weak self as imp => move |graphview, _| {
+                            imp.update_zoom_factor_text(graphview.zoom_factor());
+                        }),
+                    );
+                    self.update_zoom_factor_text(widget.zoom_factor());
+                    *self.graphview.borrow_mut() = Some(widget);
+                }
+                _ => unimplemented!(),
+            }
+        }
+    }
+    impl WidgetImpl for ZoomEntry {}
+    impl BoxImpl for ZoomEntry {}
+
+    impl ZoomEntry {
+        /// Update the text contained in the combobox's entry to reflect the provided zoom factor.
+        ///
+        /// This does not update the associated [`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,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <template class="HelvumZoomEntry" parent="GtkBox">
+    <child>
+      <object class="GtkButton" id="zoom_out_button">
+        <property name="icon-name">zoom-out-symbolic</property>
+        <property name="tooltip-text">Zoom out</property>
+      </object>
+    </child>
+    <child>
+      <object class="GtkEntry" id="entry">
+        <property name="secondary-icon-name">go-down-symbolic</property>
+        <property name="input-purpose">digits</property>
+      </object>
+    </child>
+    <child>
+      <object class="GtkButton" id="zoom_in_button">
+        <property name="icon-name">zoom-in-symbolic</property>
+        <property name="tooltip-text">Zoom in</property>
+      </object>
+    </child>
+    <style>
+      <class name="linked"/>
+    </style>
+  </template>
+</interface>