edit: Use proper styling for toolbar
This commit is contained in:
Sophie Herold
parent
b6bdc9398d
commit
e9869bcb40
5 changed files with 149 additions and 135 deletions
|
|
@ -1,7 +1,7 @@
|
|||
lpcrop {
|
||||
--discarded-background: rgba(50, 50, 50, 0.7);
|
||||
--selection-border-color: rgba(255, 255, 255, 0.7);
|
||||
--handle-border-color: rgba(255, 255, 255, 0.9);
|
||||
--selection-border-color: rgb(240, 240, 240);
|
||||
--handle-border-color: var(--selection-border-color);
|
||||
--handle-size: 20px;
|
||||
--handle-border-width: 3px;
|
||||
--handle-offset: -4px;
|
||||
|
|
|
|||
|
|
@ -128,6 +128,20 @@ mod imp {
|
|||
|
||||
self.selection.ensure_initialized(x, y, width, height);
|
||||
self.selection.set_size(x, y, width, height);
|
||||
|
||||
dbg!(self.image.widget_to_img_coord((
|
||||
self.image.image_rendering_x() + self.selection.crop_x() as f64,
|
||||
self.image.image_rendering_y() + self.selection.crop_y() as f64
|
||||
)));
|
||||
|
||||
dbg!(self.image.widget_to_img_coord((
|
||||
self.image.image_rendering_x()
|
||||
+ self.selection.crop_x() as f64
|
||||
+ self.selection.crop_width() as f64,
|
||||
self.image.image_rendering_y()
|
||||
+ self.selection.crop_y() as f64
|
||||
+ self.selection.crop_height() as f64
|
||||
)));
|
||||
}
|
||||
|
||||
fn measure(&self, orientation: gtk::Orientation, for_size: i32) -> (i32, i32, i32, i32) {
|
||||
|
|
|
|||
|
|
@ -52,9 +52,9 @@
|
|||
</menu>
|
||||
<template class="LpEditCrop" parent="GtkWidget">
|
||||
<property name="child">
|
||||
<object class="GtkBox">
|
||||
<property name="orientation">vertical</property>
|
||||
<child>
|
||||
<object class="AdwToolbarView">
|
||||
<property name="bottom-bar-style">raised</property>
|
||||
<property name="content">
|
||||
<object class="GtkOverlay">
|
||||
<property name="margin-top">18</property>
|
||||
<property name="margin-end">18</property>
|
||||
|
|
@ -70,118 +70,131 @@
|
|||
<property name="crop">LpEditCrop</property>
|
||||
</object>
|
||||
</child>
|
||||
<child type="overlay">
|
||||
<object class="GtkButton">
|
||||
<property name="label">Apply</property>
|
||||
<property name="action-name">edit.apply-crop</property>
|
||||
<property name="halign">end</property>
|
||||
<property name="valign">start</property>
|
||||
</object>
|
||||
</child>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkBox">
|
||||
<property name="orientation">horizontal</property>
|
||||
<property name="homogeneous">true</property>
|
||||
<property name="spacing">6</property>
|
||||
<property name="margin-bottom">16</property>
|
||||
<property name="margin-start">16</property>
|
||||
<property name="margin-end">16</property>
|
||||
<child>
|
||||
</property>
|
||||
<child type="bottom">
|
||||
<object class="AdwClamp">
|
||||
<property name="maximum-size">360</property>
|
||||
<property name="child">
|
||||
<object class="GtkBox">
|
||||
<property name="orientation">horizontal</property>
|
||||
<property name="homogeneous">true</property>
|
||||
<property name="spacing">6</property>
|
||||
<style>
|
||||
<class name="toolbar" />
|
||||
</style>
|
||||
<child>
|
||||
<object class="GtkMenuButton">
|
||||
<property name="icon-name">aspect-ratio-symbolic</property>
|
||||
<property name="tooltip-text" translatable="yes">Aspect Ratio</property>
|
||||
<property name="halign">start</property>
|
||||
<property name="direction">up</property>
|
||||
<style>
|
||||
<class name="flat" />
|
||||
</style>
|
||||
<property name="popover">
|
||||
<object class="GtkPopoverMenu">
|
||||
<property name="menu-model">aspect_ratio_menu</property>
|
||||
<child type="orientation">
|
||||
<object class="GtkBox">
|
||||
<property name="homogeneous">true</property>
|
||||
<property name="spacing">6</property>
|
||||
<child>
|
||||
<object class="GtkToggleButton" id="landscape">
|
||||
<property name="icon-name">page-orientation-landscape-symbolic</property>
|
||||
<property name="tooltip-text" translatable="yes">Orientation Landscape</property>
|
||||
<property name="hexpand">true</property>
|
||||
<property name="action-name">edit-crop.orientation</property>
|
||||
<property name="action-target">'landscape'</property>
|
||||
<style>
|
||||
<class name="flat" />
|
||||
</style>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkToggleButton" id="portrait">
|
||||
<property name="icon-name">page-orientation-portrait-symbolic</property>
|
||||
<property name="tooltip-text" translatable="yes">Orientation Portrait</property>
|
||||
<property name="hexpand">true</property>
|
||||
<property name="action-name">edit-crop.orientation</property>
|
||||
<property name="action-target">'portrait'</property>
|
||||
<style>
|
||||
<class name="flat" />
|
||||
</style>
|
||||
<object class="GtkBox">
|
||||
<property name="orientation">horizontal</property>
|
||||
<property name="spacing">6</property>
|
||||
<child>
|
||||
<object class="GtkMenuButton">
|
||||
<property name="icon-name">aspect-ratio-symbolic</property>
|
||||
<property name="tooltip-text" translatable="yes">Aspect Ratio</property>
|
||||
<property name="halign">start</property>
|
||||
<property name="direction">up</property>
|
||||
<style>
|
||||
<class name="flat" />
|
||||
</style>
|
||||
<property name="popover">
|
||||
<object class="GtkPopoverMenu">
|
||||
<property name="menu-model">aspect_ratio_menu</property>
|
||||
<child type="orientation">
|
||||
<object class="GtkBox">
|
||||
<property name="homogeneous">true</property>
|
||||
<property name="spacing">6</property>
|
||||
<child>
|
||||
<object class="GtkToggleButton" id="landscape">
|
||||
<property name="icon-name">page-orientation-landscape-symbolic</property>
|
||||
<property name="tooltip-text" translatable="yes">Orientation Landscape</property>
|
||||
<property name="hexpand">true</property>
|
||||
<property name="action-name">edit-crop.orientation</property>
|
||||
<property name="action-target">'landscape'</property>
|
||||
<style>
|
||||
<class name="flat" />
|
||||
</style>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkToggleButton" id="portrait">
|
||||
<property name="icon-name">page-orientation-portrait-symbolic</property>
|
||||
<property name="tooltip-text" translatable="yes">Orientation Portrait</property>
|
||||
<property name="hexpand">true</property>
|
||||
<property name="action-name">edit-crop.orientation</property>
|
||||
<property name="action-target">'portrait'</property>
|
||||
<style>
|
||||
<class name="flat" />
|
||||
</style>
|
||||
</object>
|
||||
</child>
|
||||
</object>
|
||||
</child>
|
||||
</object>
|
||||
</child>
|
||||
</property>
|
||||
</object>
|
||||
</property>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkButton">
|
||||
<property name="icon-name">edit-mirror-symbolic</property>
|
||||
<property name="valign">start</property>
|
||||
<style>
|
||||
<class name="flat" />
|
||||
</style>
|
||||
</object>
|
||||
</child>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkButton">
|
||||
<property name="icon-name">edit-mirror-symbolic</property>
|
||||
<property name="valign">start</property>
|
||||
<style>
|
||||
<class name="flat" />
|
||||
</style>
|
||||
<object class="GtkBox">
|
||||
<property name="orientation">horizontal</property>
|
||||
<property name="halign">center</property>
|
||||
<property name="spacing">6</property>
|
||||
<child>
|
||||
<object class="GtkButton">
|
||||
<property name="icon-name">object-rotate-left-symbolic</property>
|
||||
<property name="valign">start</property>
|
||||
<style>
|
||||
<class name="flat" />
|
||||
</style>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkButton">
|
||||
<property name="icon-name">object-rotate-right-symbolic</property>
|
||||
<property name="valign">start</property>
|
||||
<style>
|
||||
<class name="flat" />
|
||||
</style>
|
||||
</object>
|
||||
</child>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkBox">
|
||||
<property name="orientation">horizontal</property>
|
||||
<property name="halign">end</property>
|
||||
<property name="spacing">6</property>
|
||||
<child>
|
||||
<object class="GtkButton">
|
||||
<property name="label">Reset</property>
|
||||
<property name="valign">start</property>
|
||||
<style>
|
||||
<class name="flat" />
|
||||
</style>
|
||||
</object>
|
||||
</child>
|
||||
</object>
|
||||
</child>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkBox">
|
||||
<property name="orientation">horizontal</property>
|
||||
<property name="halign">center</property>
|
||||
<property name="spacing">6</property>
|
||||
<child>
|
||||
<object class="GtkButton">
|
||||
<property name="icon-name">object-rotate-left-symbolic</property>
|
||||
<property name="valign">start</property>
|
||||
<style>
|
||||
<class name="flat" />
|
||||
</style>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkButton">
|
||||
<property name="icon-name">object-rotate-right-symbolic</property>
|
||||
<property name="valign">start</property>
|
||||
<style>
|
||||
<class name="flat" />
|
||||
</style>
|
||||
</object>
|
||||
</child>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkBox">
|
||||
<property name="orientation">horizontal</property>
|
||||
<property name="halign">end</property>
|
||||
<property name="spacing">6</property>
|
||||
<child>
|
||||
<object class="GtkButton">
|
||||
<property name="label">Reset</property>
|
||||
<property name="valign">start</property>
|
||||
<style>
|
||||
<class name="flat" />
|
||||
</style>
|
||||
</object>
|
||||
</child>
|
||||
</object>
|
||||
</child>
|
||||
</property>
|
||||
</object>
|
||||
</child>
|
||||
</object>
|
||||
|
|
|
|||
|
|
@ -108,14 +108,9 @@ impl WidgetImpl for imp::LpImage {
|
|||
snapshot.translate(&graphene::Point::new(0., self.round_f64(y) as f32));
|
||||
|
||||
// Centering in widget when no scrolling (black bars around image)
|
||||
let x = self.round_f64(f64::max((widget_width - display_width) / 2.0, 0.));
|
||||
let y = self.round_f64(f64::max((widget_height - display_height) / 2.0, 0.));
|
||||
// Round to pixel values to not have a half pixel offset to physical pixels
|
||||
// The offset would leading to a blurry output
|
||||
snapshot.translate(&graphene::Point::new(
|
||||
self.round_f64(x) as f32,
|
||||
self.round_f64(y) as f32,
|
||||
));
|
||||
let x = obj.image_rendering_x();
|
||||
let y = obj.image_rendering_y();
|
||||
snapshot.translate(&graphene::Point::new(x as f32, y as f32));
|
||||
|
||||
// Apply rotation and mirroring
|
||||
self.snapshot_rotate_mirror(
|
||||
|
|
@ -339,6 +334,11 @@ impl LpImage {
|
|||
let imp = self.imp();
|
||||
let widget_width = imp.widget_width();
|
||||
let display_width = imp.image_displayed_width();
|
||||
|
||||
// Centering in widget when no scrolling (black bars around image)
|
||||
//
|
||||
// Round to pixel values to not have a half pixel offset to physical pixels
|
||||
// The offset would leading to a blurry output
|
||||
imp.round_f64(f64::max((widget_width - display_width) / 2.0, 0.))
|
||||
}
|
||||
|
||||
|
|
@ -358,4 +358,14 @@ impl LpImage {
|
|||
let imp = self.imp();
|
||||
imp.round_f64(imp.image_displayed_height())
|
||||
}
|
||||
|
||||
/// Convert widget coordinates to image coordinates
|
||||
pub fn widget_to_img_coord(&self, (cur_x, cur_y): (f64, f64)) -> (f64, f64) {
|
||||
let imp = self.imp();
|
||||
let zoom = imp.applicable_zoom();
|
||||
let x = (cur_x - self.image_rendering_x() + imp.hadj_value()) / zoom;
|
||||
let y = (cur_y - self.image_rendering_y() + imp.vadj_value()) / zoom;
|
||||
|
||||
(x, y)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -103,29 +103,6 @@ impl imp::LpImage {
|
|||
}
|
||||
}
|
||||
|
||||
fn horizontal_bar(&self) -> f64 {
|
||||
f64::max(
|
||||
0.,
|
||||
(self.widget_width() - self.image_displayed_width()) / 2.,
|
||||
)
|
||||
}
|
||||
|
||||
fn vertical_bar(&self) -> f64 {
|
||||
f64::max(
|
||||
0.,
|
||||
(self.widget_height() - self.image_displayed_height()) / 2.,
|
||||
)
|
||||
}
|
||||
|
||||
/// Convert widget coordinates to image coordinates
|
||||
fn widget_to_img_coord(&self, (cur_x, cur_y): (f64, f64)) -> (f64, f64) {
|
||||
let zoom = self.applicable_zoom();
|
||||
let x = (cur_x - self.horizontal_bar() + self.hadj_value()) / zoom;
|
||||
let y = (cur_y - self.vertical_bar() + self.vadj_value()) / zoom;
|
||||
|
||||
(x, y)
|
||||
}
|
||||
|
||||
/// Required adjustment to put image coordinate under the cursor at this
|
||||
/// zoom level
|
||||
fn adj_for_position(
|
||||
|
|
@ -181,7 +158,7 @@ impl imp::LpImage {
|
|||
img_pos
|
||||
} else {
|
||||
// Use center of viewport
|
||||
self.widget_to_img_coord((self.widget_width() / 2., self.widget_height() / 2.))
|
||||
obj.widget_to_img_coord((self.widget_width() / 2., self.widget_height() / 2.))
|
||||
};
|
||||
|
||||
let cur_pos = if let Some(cur) = cur {
|
||||
|
|
@ -274,7 +251,7 @@ impl imp::LpImage {
|
|||
let img_pos: Option<(f64, f64)> = self
|
||||
.pointer_position
|
||||
.get()
|
||||
.map(|x| self.widget_to_img_coord(x));
|
||||
.map(|x| obj.widget_to_img_coord(x));
|
||||
self.zoom_cursor_target.set(img_pos);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue