From 4ed7e1f4beeb422a11c885f0d48a3630e06803dd Mon Sep 17 00:00:00 2001 From: "Tom A. Wagner" Date: Mon, 17 Jul 2023 02:45:25 +0200 Subject: [PATCH] graph: Redesign nodes and ports Nodes now have a background using the libadwaita .card style class. Ports now have a circular handle, which is positioned on the edge of the node so that half of the circle sticks out. Ports are also no longer themed like a button and don't receive a color based on the guessed media type, in a future commit, the handle will be colored instead. --- src/style.css | 12 ++- src/ui/graph/graph_view.rs | 4 +- src/ui/graph/mod.rs | 2 + src/ui/graph/node.rs | 56 +++++------- src/ui/graph/node.ui | 34 +++++++ src/ui/graph/port.rs | 178 ++++++++++++++++++++++++++---------- src/ui/graph/port.ui | 19 ++++ src/ui/graph/port_handle.rs | 84 +++++++++++++++++ 8 files changed, 305 insertions(+), 84 deletions(-) create mode 100644 src/ui/graph/node.ui create mode 100644 src/ui/graph/port.ui create mode 100644 src/ui/graph/port_handle.rs diff --git a/src/style.css b/src/style.css index d36b1cd..614c919 100644 --- a/src/style.css +++ b/src/style.css @@ -37,4 +37,14 @@ graphview { background-color: @view_bg_color; -} \ No newline at end of file +} + +port { + padding-top: 3px; + padding-bottom: 3px; +} + +port-handle { + border-radius: 50%; + background-color: @media-type-unknown; +} diff --git a/src/ui/graph/graph_view.rs b/src/ui/graph/graph_view.rs index a4efbf7..6198b30 100644 --- a/src/ui/graph/graph_view.rs +++ b/src/ui/graph/graph_view.rs @@ -223,8 +223,6 @@ mod imp { let widget = &*self.obj(); let alloc = widget.allocation(); - // self.snapshot_background(widget, snapshot); - // Draw all visible children self.nodes .borrow() @@ -538,7 +536,7 @@ mod imp { }); let other_anchor = picked_port_anchor.unwrap_or(drag_cursor); - let (output_anchor, input_anchor) = match port.direction() { + let (output_anchor, input_anchor) = match Direction::from_raw(port.direction()) { Direction::Output => (&port_anchor, &other_anchor), Direction::Input => (&other_anchor, &port_anchor), _ => unreachable!(), diff --git a/src/ui/graph/mod.rs b/src/ui/graph/mod.rs index 691b9ff..36f36e2 100644 --- a/src/ui/graph/mod.rs +++ b/src/ui/graph/mod.rs @@ -20,6 +20,8 @@ mod node; pub use node::*; mod port; pub use port::*; +mod port_handle; +pub use port_handle::*; mod link; pub use link::*; mod zoomentry; diff --git a/src/ui/graph/node.rs b/src/ui/graph/node.rs index 46b3722..1c3948a 100644 --- a/src/ui/graph/node.rs +++ b/src/ui/graph/node.rs @@ -27,12 +27,12 @@ mod imp { collections::HashSet, }; - #[derive(glib::Properties)] + #[derive(glib::Properties, gtk::CompositeTemplate, Default)] #[properties(wrapper_type = super::Node)] + #[template(file = "node.ui")] pub struct Node { #[property(get, set, construct_only)] pub(super) pipewire_id: Cell, - pub(super) grid: gtk::Grid, #[property( name = "name", type = String, get = |this: &Self| this.label.text().to_string(), @@ -41,7 +41,10 @@ mod imp { this.label.set_tooltip_text(Some(val)); } )] - pub(super) label: gtk::Label, + #[template_child] + pub(super) label: TemplateChild, + #[template_child] + pub(super) port_grid: TemplateChild, pub(super) ports: RefCell>, pub(super) num_ports_in: Cell, pub(super) num_ports_out: Cell, @@ -54,31 +57,13 @@ mod imp { type ParentType = gtk::Widget; fn class_init(klass: &mut Self::Class) { - klass.set_layout_manager_type::(); + klass.set_layout_manager_type::(); + + klass.bind_template(); } - 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(HashSet::new()), - num_ports_in: Cell::new(0), - num_ports_out: Cell::new(0), - } + fn instance_init(obj: &glib::subclass::InitializingObject) { + obj.init_template(); } } @@ -86,11 +71,16 @@ mod imp { impl ObjectImpl for Node { fn constructed(&self) { self.parent_constructed(); - self.grid.set_parent(&*self.obj()); + + // Display a grab cursor when the mouse is over the label so the user knows the node can be dragged. + self.label + .set_cursor(gtk::gdk::Cursor::from_name("grab", None).as_ref()); } fn dispose(&self) { - self.grid.unparent(); + if let Some(child) = self.obj().first_child() { + child.unparent(); + } } } @@ -113,13 +103,15 @@ impl Node { pub fn add_port(&self, port: Port) { let imp = self.imp(); - match port.direction() { + match Direction::from_raw(port.direction()) { Direction::Input => { - imp.grid.attach(&port, 0, imp.num_ports_in.get() + 1, 1, 1); + imp.port_grid + .attach(&port, 0, imp.num_ports_in.get() + 1, 1, 1); imp.num_ports_in.set(imp.num_ports_in.get() + 1); } Direction::Output => { - imp.grid.attach(&port, 1, imp.num_ports_out.get() + 1, 1, 1); + imp.port_grid + .attach(&port, 1, imp.num_ports_out.get() + 1, 1, 1); imp.num_ports_out.set(imp.num_ports_out.get() + 1); } _ => unreachable!(), @@ -131,7 +123,7 @@ impl Node { pub fn remove_port(&self, port: &Port) { let imp = self.imp(); if imp.ports.borrow_mut().remove(port) { - match port.direction() { + match Direction::from_raw(port.direction()) { Direction::Input => imp.num_ports_in.set(imp.num_ports_in.get() - 1), Direction::Output => imp.num_ports_in.set(imp.num_ports_out.get() - 1), _ => unreachable!(), diff --git a/src/ui/graph/node.ui b/src/ui/graph/node.ui new file mode 100644 index 0000000..a576681 --- /dev/null +++ b/src/ui/graph/node.ui @@ -0,0 +1,34 @@ + + + + + + diff --git a/src/ui/graph/port.rs b/src/ui/graph/port.rs index 17ac7c8..b79e4d7 100644 --- a/src/ui/graph/port.rs +++ b/src/ui/graph/port.rs @@ -23,6 +23,8 @@ use adw::{ }; use pipewire::spa::Direction; +use super::PortHandle; + mod imp { use super::*; @@ -32,8 +34,9 @@ mod imp { use pipewire::spa::{format::MediaType, Direction}; /// Graphical representation of a pipewire port. - #[derive(glib::Properties)] + #[derive(gtk::CompositeTemplate, glib::Properties)] #[properties(wrapper_type = super::Port)] + #[template(file = "port.ui")] pub struct Port { #[property(get, set, construct_only)] pub(super) pipewire_id: OnceCell, @@ -43,6 +46,13 @@ mod imp { set = Self::set_media_type )] pub(super) media_type: Cell, + #[property( + type = u32, + get = |_| self.direction.get().as_raw(), + set = Self::set_direction, + construct_only + )] + pub(super) direction: Cell, #[property( name = "name", type = String, get = |this: &Self| this.label.text().to_string(), @@ -51,8 +61,10 @@ mod imp { this.label.set_tooltip_text(Some(val)); } )] - pub(super) label: gtk::Label, - pub(super) direction: OnceCell, + #[template_child] + pub(super) label: TemplateChild, + #[template_child] + pub(super) handle: TemplateChild, } impl Default for Port { @@ -60,8 +72,9 @@ mod imp { Self { pipewire_id: OnceCell::default(), media_type: Cell::new(MediaType::Unknown), - label: gtk::Label::default(), - direction: OnceCell::default(), + direction: Cell::new(Direction::Output), + label: TemplateChild::default(), + handle: TemplateChild::default(), } } } @@ -73,10 +86,13 @@ mod imp { type ParentType = gtk::Widget; fn class_init(klass: &mut Self::Class) { - klass.set_layout_manager_type::(); + klass.set_css_name("port"); - // Make it look like a GTK button. - klass.set_css_name("button"); + klass.bind_template(); + } + + fn instance_init(obj: &glib::subclass::InitializingObject) { + obj.init_template(); } } @@ -85,19 +101,13 @@ mod imp { 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); + // 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 dispose(&self) { - self.label.unparent() - } - fn signals() -> &'static [Signal] { static SIGNALS: Lazy> = Lazy::new(|| { vec![Signal::builder("port-toggled") @@ -109,7 +119,81 @@ mod imp { SIGNALS.as_ref() } } - impl WidgetImpl for Port {} + + impl WidgetImpl for Port { + fn measure(&self, orientation: gtk::Orientation, for_size: i32) -> (i32, i32, i32, i32) { + match orientation { + gtk::Orientation::Horizontal => { + let (min_handle_width, nat_handle_width, _, _) = + self.handle.measure(orientation, for_size); + let (min_label_width, nat_label_width, _, _) = self + .label + .measure(orientation, i32::max(for_size - (nat_handle_width / 2), -1)); + + ( + (min_handle_width / 2) + min_label_width, + (nat_handle_width / 2) + nat_label_width, + -1, + -1, + ) + } + gtk::Orientation::Vertical => { + let (min_label_height, nat_label_height, _, _) = + self.label.measure(orientation, for_size); + let (min_handle_height, nat_handle_height, _, _) = + self.handle.measure(orientation, for_size); + + ( + i32::max(min_label_height, min_handle_height), + i32::max(nat_label_height, nat_handle_height), + -1, + -1, + ) + } + _ => unimplemented!(), + } + } + + fn size_allocate(&self, width: i32, height: i32, _baseline: i32) { + let (_, nat_handle_height, _, _) = + self.handle.measure(gtk::Orientation::Vertical, height); + let (_, nat_handle_width, _, _) = + self.handle.measure(gtk::Orientation::Horizontal, width); + + match Direction::from_raw(self.obj().direction()) { + Direction::Input => { + let alloc = gtk::Allocation::new( + -nat_handle_width / 2, + (height - nat_handle_height) / 2, + nat_handle_width, + nat_handle_height, + ); + self.handle.size_allocate(&alloc, -1); + + let alloc = gtk::Allocation::new( + nat_handle_width / 2, + 0, + width - (nat_handle_width / 2), + height, + ); + self.label.size_allocate(&alloc, -1); + } + Direction::Output => { + let alloc = gtk::Allocation::new( + width - (nat_handle_width / 2), + (height - nat_handle_height) / 2, + nat_handle_width, + nat_handle_height, + ); + self.handle.size_allocate(&alloc, -1); + + let alloc = gtk::Allocation::new(0, 0, width - (nat_handle_width / 2), height); + self.label.size_allocate(&alloc, -1); + } + _ => unreachable!(), + } + } + } impl Port { fn setup_port_drag_and_drop(&self) { @@ -185,7 +269,7 @@ mod imp { return false; } - let (output_port, input_port) = match port.direction() { + let (output_port, input_port) = match Direction::from_raw(port.direction()) { Direction::Output => (&port, &other_port), Direction::Input => (&other_port, &port), _ => unreachable!(), @@ -200,26 +284,42 @@ mod imp { }); obj.add_controller(drop_target); } - } - impl Port { fn set_media_type(&self, media_type: u32) { let media_type = MediaType::from_raw(media_type); self.media_type.set(media_type); for css_class in ["video", "audio", "midi"] { - self.obj().remove_css_class(css_class) + self.handle.remove_css_class(css_class) } // Color the port according to its media type. match media_type { - MediaType::Video => self.obj().add_css_class("video"), - MediaType::Audio => self.obj().add_css_class("audio"), - MediaType::Application | MediaType::Stream => self.obj().add_css_class("midi"), + 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!(), + } + } } } @@ -230,30 +330,11 @@ glib::wrapper! { impl Port { pub fn new(id: u32, name: &str, direction: Direction) -> Self { - // Create the widget and initialize needed fields - let res: Self = glib::Object::builder() + glib::Object::builder() .property("pipewire-id", id) + .property("direction", direction.as_raw()) .property("name", name) - .build(); - - let imp = res.imp(); - - imp.direction - .set(direction) - .expect("Port direction already set"); - - // Display a grab cursor when the mouse is over the port so the user knows it can be dragged to another port. - res.set_cursor(gtk::gdk::Cursor::from_name("grab", None).as_ref()); - - res - } - - pub fn direction(&self) -> Direction { - *self - .imp() - .direction - .get() - .expect("Port direction is not set") + .build() } pub fn link_anchor(&self) -> graphene::Point { @@ -263,8 +344,9 @@ impl Port { let padding_left: f32 = style_context.padding().left().into(); let border_left: f32 = style_context.border().left().into(); + let direction = Direction::from_raw(self.direction()); graphene::Point::new( - match self.direction() { + match direction { Direction::Output => self.width() as f32 + padding_right + border_right, Direction::Input => 0.0 - padding_left - border_left, _ => unreachable!(), diff --git a/src/ui/graph/port.ui b/src/ui/graph/port.ui new file mode 100644 index 0000000..13722ca --- /dev/null +++ b/src/ui/graph/port.ui @@ -0,0 +1,19 @@ + + + + + + diff --git a/src/ui/graph/port_handle.rs b/src/ui/graph/port_handle.rs new file mode 100644 index 0000000..a9ca8cc --- /dev/null +++ b/src/ui/graph/port_handle.rs @@ -0,0 +1,84 @@ +// Copyright 2021 Tom A. Wagner +// +// 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 . +// +// 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) + @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() + } +}