servius/helvum
1
0
Fork 0
mirror of https://gitlab.freedesktop.org/pipewire/helvum synced 2026-03-15 03:26:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

graph: Redesign nodes and ports

Browse Source 
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.
This commit is contained in:
Tom A. Wagner
2023-07-17 02:45:25 +02:00
parent af4051c3c2
commit 4ed7e1f4be
8 changed files with 305 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/style.css
View File

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

4
src/ui/graph/graph_view.rs
View File

@@ -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!(),

2
src/ui/graph/mod.rs
View File

@@ -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;

56
src/ui/graph/node.rs
View File

@@ -27,12 +27,12 @@ mod imp {
collections::HashSet,
};
#[derive(glib::Properties)]
#[derive(glib::Properties, gtk::CompositeTemplate, Default)]
#[properties(wrapper_type = super::Node)]
#[template(file = "node.ui")]
pub struct Node {
#[property(get, set, construct_only)]
pub(super) pipewire_id: Cell<u32>,
pub(super) grid: gtk::Grid,
#[property(
name = "name", type = String,
get = |this: &Self| this.label.text().to_string(),
@@ -41,7 +41,10 @@ mod imp {
this.label.set_tooltip_text(Some(val));
}
)]
pub(super) label: gtk::Label,
#[template_child]
pub(super) label: TemplateChild<gtk::Label>,
#[template_child]
pub(super) port_grid: TemplateChild<gtk::Grid>,
pub(super) ports: RefCell<HashSet<Port>>,
pub(super) num_ports_in: Cell<i32>,
pub(super) num_ports_out: Cell<i32>,
@@ -54,31 +57,13 @@ mod imp {
type ParentType = gtk::Widget;
fn class_init(klass: &mut Self::Class) {
klass.set_layout_manager_type::<gtk::BinLayout>();
klass.set_layout_manager_type::<gtk::BoxLayout>();
klass.bind_template();
}
fn new() -> Self {
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<Self>) {
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!(),

34
src/ui/graph/node.ui Normal file
View File

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

178
src/ui/graph/port.rs
View File

@@ -23,6 +23,8 @@ use adw::{
};
use pipewire::spa::Direction;
use super::PortHandle;
mod imp {
use super::*;
@@ -32,8 +34,9 @@ mod imp {
use pipewire::spa::{format::MediaType, Direction};
/// Graphical representation of a pipewire port.
#[derive(glib::Properties)]
#[derive(gtk::CompositeTemplate, glib::Properties)]
#[properties(wrapper_type = super::Port)]
#[template(file = "port.ui")]
pub struct Port {
#[property(get, set, construct_only)]
pub(super) pipewire_id: OnceCell<u32>,
@@ -43,6 +46,13 @@ mod imp {
set = Self::set_media_type
)]
pub(super) media_type: Cell<MediaType>,
#[property(
type = u32,
get = |_| self.direction.get().as_raw(),
set = Self::set_direction,
construct_only
)]
pub(super) direction: Cell<Direction>,
#[property(
name = "name", type = String,
get = |this: &Self| this.label.text().to_string(),
@@ -51,8 +61,10 @@ mod imp {
this.label.set_tooltip_text(Some(val));
}
)]
pub(super) label: gtk::Label,
pub(super) direction: OnceCell<Direction>,
#[template_child]
pub(super) label: TemplateChild<gtk::Label>,
#[template_child]
pub(super) handle: TemplateChild<PortHandle>,
}
impl Default for Port {
@@ -60,8 +72,9 @@ mod imp {
Self {
pipewire_id: OnceCell::default(),
media_type: Cell::new(MediaType::Unknown),
label: gtk::Label::default(),
direction: 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::<gtk::BinLayout>();
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<Self>) {
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<Vec<Signal>> = Lazy::new(|| {
vec![Signal::builder("port-toggled")
@@ -109,7 +119,81 @@ mod imp {
SIGNALS.as_ref()
}
}
impl WidgetImpl for Port {}
impl WidgetImpl for Port {
fn measure(&self, orientation: gtk::Orientation, for_size: i32) -> (i32, i32, i32, i32) {
match orientation {
gtk::Orientation::Horizontal => {
let (min_handle_width, nat_handle_width, _, _) =
self.handle.measure(orientation, for_size);
let (min_label_width, nat_label_width, _, _) = self
.label
.measure(orientation, i32::max(for_size - (nat_handle_width / 2), -1));
(
(min_handle_width / 2) + min_label_width,
(nat_handle_width / 2) + nat_label_width,
-1,
-1,
)
}
gtk::Orientation::Vertical => {
let (min_label_height, nat_label_height, _, _) =
self.label.measure(orientation, for_size);
let (min_handle_height, nat_handle_height, _, _) =
self.handle.measure(orientation, for_size);
(
i32::max(min_label_height, min_handle_height),
i32::max(nat_label_height, nat_handle_height),
-1,
-1,
)
}
_ => unimplemented!(),
}
}
fn size_allocate(&self, width: i32, height: i32, _baseline: i32) {
let (_, nat_handle_height, _, _) =
self.handle.measure(gtk::Orientation::Vertical, height);
let (_, nat_handle_width, _, _) =
self.handle.measure(gtk::Orientation::Horizontal, width);
match Direction::from_raw(self.obj().direction()) {
Direction::Input => {
let alloc = gtk::Allocation::new(
-nat_handle_width / 2,
(height - nat_handle_height) / 2,
nat_handle_width,
nat_handle_height,
);
self.handle.size_allocate(&alloc, -1);
let alloc = gtk::Allocation::new(
nat_handle_width / 2,
0,
width - (nat_handle_width / 2),
height,
);
self.label.size_allocate(&alloc, -1);
}
Direction::Output => {
let alloc = gtk::Allocation::new(
width - (nat_handle_width / 2),
(height - nat_handle_height) / 2,
nat_handle_width,
nat_handle_height,
);
self.handle.size_allocate(&alloc, -1);
let alloc = gtk::Allocation::new(0, 0, width - (nat_handle_width / 2), height);
self.label.size_allocate(&alloc, -1);
}
_ => unreachable!(),
}
}
}
impl Port {
fn setup_port_drag_and_drop(&self) {
@@ -185,7 +269,7 @@ mod imp {
return false;
}
let (output_port, input_port) = match port.direction() {
let (output_port, input_port) = match Direction::from_raw(port.direction()) {
Direction::Output => (&port, &other_port),
Direction::Input => (&other_port, &port),
_ => unreachable!(),
@@ -200,26 +284,42 @@ mod imp {
});
obj.add_controller(drop_target);
}
}
impl Port {
fn set_media_type(&self, media_type: u32) {
let media_type = MediaType::from_raw(media_type);
self.media_type.set(media_type);
for css_class in ["video", "audio", "midi"] {
self.obj().remove_css_class(css_class)
self.handle.remove_css_class(css_class)
}
// Color the port according to its media type.
match media_type {
MediaType::Video => self.obj().add_css_class("video"),
MediaType::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!(),

19
src/ui/graph/port.ui Normal file
View File

@@ -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>

84
src/ui/graph/port_handle.rs Normal file
View File

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