Implement explicitly setting a center of rotation (#783)

* Add changelog entry for transform-origin-properties

* Implement explicitly setting a center of rotation

The transform-Widget provides "rotate" to rotate its child. However, the
default center of rotation is (0, 0) (aka top-left), so it was not
possible to, for example, rotate a child in-place.

This commit implements the additional options `transform-origin-x` and
`transform-origin-y`. Both are optional, and the default value is 0.0 for
each, so previous configurations should produce the same results.

* Fix: transform order should be rotate->translate->scale

CHANGELOG.md

@@ -21,6 +21,7 @@ All notable changes to eww will be listed here, starting at changes since versio
 - Add scss support for the `:style` widget property (By: ovalkonia)
 - Add `min` and `max` function calls to simplexpr (By: ovalkonia)
 - Add `flip-x`, `flip-y`, `vertical` options to the graph widget to determine its direction
+- Add `transform-origin-x`/`transform-origin-y` properties to transform widget (By: mario-kr)
 
 ## [0.6.0] (21.04.2024)
 

crates/eww/src/widgets/transform.rs

@@ -17,6 +17,12 @@ pub struct TransformPriv {
     #[property(get, set, nick = "Rotate", blurb = "The Rotation", minimum = f64::MIN, maximum = f64::MAX, default = 0f64)]
     rotate: RefCell<f64>,
 
+    #[property(get, set, nick = "Transform-Origin X", blurb = "X coordinate (%/px) for the Transform-Origin", default = None)]
+    transform_origin_x: RefCell<Option<String>>,
+
+    #[property(get, set, nick = "Transform-Origin Y", blurb = "Y coordinate (%/px) for the Transform-Origin", default = None)]
+    transform_origin_y: RefCell<Option<String>>,
+
     #[property(get, set, nick = "Translate x", blurb = "The X Translation", default = None)]
     translate_x: RefCell<Option<String>>,
 
@@ -37,6 +43,8 @@ impl Default for TransformPriv {
     fn default() -> Self {
         TransformPriv {
             rotate: RefCell::new(0.0),
+            transform_origin_x: RefCell::new(None),
+            transform_origin_y: RefCell::new(None),
             translate_x: RefCell::new(None),
             translate_y: RefCell::new(None),
             scale_x: RefCell::new(None),
@@ -57,6 +65,14 @@ impl ObjectImpl for TransformPriv {
                 self.rotate.replace(value.get().unwrap());
                 self.obj().queue_draw(); // Queue a draw call with the updated value
             }
+            "transform-origin-x" => {
+                self.transform_origin_x.replace(value.get().unwrap());
+                self.obj().queue_draw(); // Queue a draw call with the updated value
+            }
+            "transform-origin-y" => {
+                self.transform_origin_y.replace(value.get().unwrap());
+                self.obj().queue_draw(); // Queue a draw call with the updated value
+            }
             "translate-x" => {
                 self.translate_x.replace(value.get().unwrap());
                 self.obj().queue_draw(); // Queue a draw call with the updated value
@@ -128,6 +144,15 @@ impl WidgetImpl for TransformPriv {
 
             cr.save()?;
 
+            let transform_origin_x = match &*self.transform_origin_x.borrow() {
+                Some(rcx) => NumWithUnit::from_str(rcx)?.pixels_relative_to(total_width as i32) as f64,
+                None => 0.0,
+            };
+            let transform_origin_y = match &*self.transform_origin_y.borrow() {
+                Some(rcy) => NumWithUnit::from_str(rcy)?.pixels_relative_to(total_height as i32) as f64,
+                None => 0.0,
+            };
+
             let translate_x = match &*self.translate_x.borrow() {
                 Some(tx) => NumWithUnit::from_str(tx)?.pixels_relative_to(total_width as i32) as f64,
                 None => 0.0,
@@ -148,9 +173,10 @@ impl WidgetImpl for TransformPriv {
                 None => 1.0,
             };
 
-            cr.scale(scale_x, scale_y);
+            cr.translate(transform_origin_x, transform_origin_y);
             cr.rotate(perc_to_rad(rotate));
-            cr.translate(translate_x, translate_y);
+            cr.translate(translate_x - transform_origin_x, translate_y - transform_origin_y);
+            cr.scale(scale_x, scale_y);
 
             // Children widget
             if let Some(child) = &*self.content.borrow() {

crates/eww/src/widgets/widget_definitions.rs

@@ -1188,6 +1188,10 @@ fn build_transform(bargs: &mut BuilderArgs) -> Result<Transform> {
     def_widget!(bargs, _g, w, {
         // @prop rotate - the percentage to rotate
         prop(rotate: as_f64) { w.set_property("rotate", rotate); },
+        // @prop transform-origin-x - x coordinate of origin of transformation (px or %)
+        prop(transform_origin_x: as_string) { w.set_property("transform-origin-x", transform_origin_x) },
+        // @prop transform-origin-y - y coordinate of origin of transformation (px or %)
+        prop(transform_origin_y: as_string) { w.set_property("transform-origin-y", transform_origin_y) },
         // @prop translate-x - the amount to translate in the x direction (px or %)
         prop(translate_x: as_string) { w.set_property("translate-x", translate_x); },
         // @prop translate-y - the amount to translate in the y direction (px or %)