Change the Rotate item to a Transform that supports scaling (#9387)

* Add scale method to backends

* Rename Rotate to Transform

* Add scaling to Transform

* Fix tests

* Insert Transform if any of scale-x, scale-y or rotation-angle are set

* Add scaling to child_transform and handle events as a result

* Cargo fmt

* Femtovg clipping

* Fix femotovg clipping

* Add newline to actual_render.scale

* Cargo fmt tools/lsp changes

* Modify docs

* Change type to a float instead of percent and fix defaults

* Add note about software renderer

* Add basic event scaling test

Author: expenses

api/cpp/cbindgen.rs

@@ -308,7 +308,7 @@ fn gen_corelib(
         "TextInput",
         "Clip",
         "BoxShadow",
-        "Rotate",
+        "Transform",
         "Opacity",
         "Layer",
         "ContextMenu",

api/rs/slint/private_unstable_api.rs

@@ -204,7 +204,7 @@ pub mod re_exports {
         visit_item_tree, ItemTreeNode, ItemVisitorRefMut, ItemVisitorVTable, ItemWeak,
         TraversalOrder, VisitChildrenResult,
     };
-    pub use i_slint_core::items::*;
+    pub use i_slint_core::items::{Transform, *};
     pub use i_slint_core::layout::*;
     pub use i_slint_core::lengths::{
         logical_position_to_api, LogicalLength, LogicalPoint, LogicalRect,

docs/astro/src/content/docs/guide/backends-and-renderers/backends_and_renderers.mdx

@@ -80,7 +80,7 @@ The Qt renderer comes with the <Link type="QtBackend" label="Qt backend" /> and
 - Suitable for Microcontrollers.
 - Some features haven't been implemented yet:
   * No support for `Path`.
-  * No image rotation or smooth scaling.
+  * No support for rotations or scaling.
   * No support for `drop-shadow-*` properties.
   * No support for `border-radius` in combination with `clip: true`.
   * No text stroking/outlining.

docs/astro/src/content/docs/reference/common.mdx

@@ -41,6 +41,42 @@ The width and height of the element. When set, this overrides the default size.
 </SlintProperty>
 
 
+### Transforms
+
+Transforms allow for rotating and scaling items around a specified origin point. The default origin point is the center of the element.
+
+Transforms are not available for the software renderer.
+
+```slint {5-7}
+Image {
+    x: 0;
+    y: 0;
+    source: @image-url("images/slint-logo.svg");
+    rotation-angle: 45deg;
+    rotation-origin-x: 0;
+    rotation-origin-y: 0;
+}
+```
+
+#### rotation-angle
+<SlintProperty propName="rotation-angle" typeName="angle" defaultValue='0deg'/>
+#### rotation-origin-x
+<SlintProperty propName="rotation-origin-x" typeName="length" defaultValue='self.width / 2'>
+The x component of the origin to rotate and scale around.
+
+In the future this will be deprecated in favour of a transform-origin property.
+</SlintProperty>
+#### rotation-origin-y
+<SlintProperty propName="rotation-origin-y" typeName="length" defaultValue='self.height / 2'>
+The y component of the origin to rotate and scale around.
+
+In the future this will be deprecated in favour of a transform-origin property.
+</SlintProperty>
+#### scale-x
+<SlintProperty propName="scale-x" typeName="percent" defaultValue='100%'/>
+#### scale-y
+<SlintProperty propName="scale-y" typeName="percent" defaultValue='100%'/>
+
 ### opacity
 <CodeSnippetMD imagePath="/src/assets/generated/rectangle-opacity.png" scale="3" imageWidth="100" imageHeight="310"  imageAlt='rectangle opacity'>
 ```slint playground

docs/astro/src/content/docs/reference/elements/image.mdx

@@ -172,29 +172,6 @@ Image {
 
 </SlintProperty>
 
-## Rotation
-
-Rotates the text by the given angle around the specified origin point. The default origin point is the center of the element.
-When these properties are set, the `Image` can't have children.
-
-```slint {5-7}
-Image {
-    x: 0;
-    y: 0;
-    source: @image-url("images/slint-logo.svg");
-    rotation-angle: 45deg;
-    rotation-origin-x: 0;
-    rotation-origin-y: 0;
-}
-```
-
-### rotation-angle
-<SlintProperty propName="rotation-angle" typeName="angle" defaultValue='0deg'/>
-### rotation-origin-x
-<SlintProperty propName="rotation-origin-x" typeName="length" defaultValue='self.width / 2'/>
-### rotation-origin-y
-<SlintProperty propName="rotation-origin-y" typeName="length" defaultValue='self.height / 2'/>
-
 ## Source Properties
 
 ### source

docs/astro/src/content/docs/reference/elements/text.mdx

@@ -233,35 +233,6 @@ Text {
 </CodeSnippetMD>
 </SlintProperty>
 
-## Rotation
-
-Rotates the text by the given angle around the specified origin point. The default origin point is the center of the element.
-:::caution[Caution]
-When these properties are set, the `Text` can't have children.
-:::
-
-<CodeSnippetMD imagePath="/src/assets/generated/text-rotation.png" imageWidth="200" needsBackground="true" imageHeight="200" imageAlt='rotation properties'>
-
-```slint {3-5}
-Text {
-    text: "I'm dizzy";
-    rotation-angle: 45deg;
-    rotation-origin-x: self.width / 2;
-    rotation-origin-y: self.height / 2;
-    font-size: 30pt;
-}
-```
-</CodeSnippetMD>
-
-### rotation-angle
-<SlintProperty propName="rotation-angle" typeName="angle"/>
-
-### rotation-origin-x
-<SlintProperty propName="rotation-origin-x" typeName="length" defaultValue='self.width / 2'/>
-
-### rotation-origin-y
-<SlintProperty propName="rotation-origin-y" typeName="length" defaultValue='self.height / 2'/>
-
 ## Accessibility
 
 By default, `Text` elements have the following accessibility properties set:

internal/backends/qt/qt_window.rs

@@ -1323,6 +1323,13 @@ impl ItemRenderer for QtItemRenderer<'_> {
         }}
     }
 
+    fn scale(&mut self, x_factor: f32, y_factor: f32) {
+        let painter: &mut QPainterPtr = &mut self.painter;
+        cpp! { unsafe [painter as "QPainterPtr*", x_factor as "float", y_factor as "float"] {
+            (*painter)->scale(x_factor, y_factor);
+        }}
+    }
+
     fn apply_opacity(&mut self, opacity: f32) {
         let painter: &mut QPainterPtr = &mut self.painter;
         cpp! { unsafe [painter as "QPainterPtr*", opacity as "float"] {

internal/compiler/builtins.slint

@@ -81,8 +81,10 @@ export component ComponentContainer inherits Empty {
     //-accepts_focus
 }
 
-export component Rotate inherits Empty {
+export component Transform inherits Empty {
     in property <angle> rotation-angle;
+    in property <percent> scale-x;
+    in property <percent> scale-y;
     in property <length> rotation-origin-x;
     in property <length> rotation-origin-y;
     //-default_size_binding:expands_to_parent_geometry

internal/compiler/passes.rs

@@ -146,7 +146,7 @@ pub async fn run_passes(
         z_order::reorder_by_z_order(component, diag);
         lower_property_to_element::lower_property_to_element(
             component,
-            "opacity",
+            core::iter::once("opacity"),
             core::iter::empty(),
             None,
             &SmolStr::new_static("Opacity"),
@@ -155,7 +155,7 @@ pub async fn run_passes(
         );
         lower_property_to_element::lower_property_to_element(
             component,
-            "cache-rendering-hint",
+            core::iter::once("cache-rendering-hint"),
             core::iter::empty(),
             None,
             &SmolStr::new_static("Layer"),
@@ -166,25 +166,28 @@ pub async fn run_passes(
         lower_shadows::lower_shadow_properties(component, &doc.local_registry, diag);
         lower_property_to_element::lower_property_to_element(
             component,
-            crate::typeregister::RESERVED_ROTATION_PROPERTIES[0].0,
-            crate::typeregister::RESERVED_ROTATION_PROPERTIES[1..]
+            crate::typeregister::RESERVED_TRANSFORM_PROPERTIES[..3]
                 .iter()
                 .map(|(prop_name, _)| *prop_name),
-            Some(&|e, prop| Expression::BinaryExpression {
-                lhs: Expression::PropertyReference(NamedReference::new(
-                    e,
-                    match prop {
-                        "rotation-origin-x" => SmolStr::new_static("width"),
-                        "rotation-origin-y" => SmolStr::new_static("height"),
-                        "rotation-angle" => return Expression::Invalid,
-                        _ => unreachable!(),
-                    },
-                ))
-                .into(),
-                op: '/',
-                rhs: Expression::NumberLiteral(2., Default::default()).into(),
+            crate::typeregister::RESERVED_TRANSFORM_PROPERTIES[3..]
+                .iter()
+                .map(|(prop_name, _)| *prop_name),
+            Some(&|e, prop| {
+                let prop_div_2 = |prop: &str| Expression::BinaryExpression {
+                    lhs: Expression::PropertyReference(NamedReference::new(e, prop.into())).into(),
+                    op: '/',
+                    rhs: Expression::NumberLiteral(2., Default::default()).into(),
+                };
+
+                match prop {
+                    "rotation-origin-x" => prop_div_2("width"),
+                    "rotation-origin-y" => prop_div_2("height"),
+                    "scale-x" | "scale-y" => Expression::NumberLiteral(1., Default::default()),
+                    "rotation-angle" => Expression::NumberLiteral(0., Default::default()),
+                    _ => unreachable!(),
+                }
             }),
-            &SmolStr::new_static("Rotate"),
+            &SmolStr::new_static("Transform"),
             &global_type_registry.borrow(),
             diag,
         );

internal/compiler/passes/lower_property_to_element.rs

@@ -12,26 +12,28 @@ use crate::typeregister::TypeRegister;
 use smol_str::{format_smolstr, SmolStr, ToSmolStr};
 use std::rc::Rc;
 
-/// If any element in `component` declares a binding to `property_name`, then a new
+/// If any element in `component` declares a binding to any of `property_names`, then a new
 /// element of type `element_name` is created, injected as a parent to the element and bindings
-/// to property_name and all properties in  extra_properties are mapped.
+/// to all properties in property_names and extra_properties are mapped.
 /// Default value for the property extra_properties is queried with the `default_value_for_extra_properties`
 pub(crate) fn lower_property_to_element(
     component: &Rc<Component>,
-    property_name: &'static str,
+    property_names: impl Iterator<Item = &'static str> + Clone,
     extra_properties: impl Iterator<Item = &'static str> + Clone,
     default_value_for_extra_properties: Option<&dyn Fn(&ElementRc, &str) -> Expression>,
     element_name: &SmolStr,
     type_register: &TypeRegister,
     diag: &mut BuildDiagnostics,
 ) {
-    if let Some(b) = component.root_element.borrow().bindings.get(property_name) {
-        diag.push_warning(
-            format!(
-                "The {property_name} property cannot be used on the root element, it will not be applied"
-            ),
-            &*b.borrow(),
-        );
+    for property_name in property_names.clone() {
+        if let Some(b) = component.root_element.borrow().bindings.get(property_name) {
+            diag.push_warning(
+                format!(
+                    "The {property_name} property cannot be used on the root element, it will not be applied"
+                ),
+                &*b.borrow(),
+            );
+        }
     }
 
     object_tree::recurse_elem_including_sub_components_no_borrow(component, &(), &mut |elem, _| {
@@ -46,13 +48,15 @@ pub(crate) fn lower_property_to_element(
         };
 
         let has_property_binding = |e: &ElementRc| {
-            e.borrow().base_type.lookup_property(property_name).property_type != Type::Invalid
-                && (e.borrow().bindings.contains_key(property_name)
-                    || e.borrow()
-                        .property_analysis
-                        .borrow()
-                        .get(property_name)
-                        .is_some_and(|a| a.is_set || a.is_linked))
+            property_names.clone().any(|property_name| {
+                e.borrow().base_type.lookup_property(property_name).property_type != Type::Invalid
+                    && (e.borrow().bindings.contains_key(property_name)
+                        || e.borrow()
+                            .property_analysis
+                            .borrow()
+                            .get(property_name)
+                            .is_some_and(|a| a.is_set || a.is_linked))
+            })
         };
 
         for mut child in old_children {
@@ -63,8 +67,7 @@ pub(crate) fn lower_property_to_element(
                         &child,
                         create_property_element(
                             &root_elem,
-                            property_name,
-                            extra_properties.clone(),
+                            property_names.clone().chain(extra_properties.clone()),
                             default_value_for_extra_properties,
                             element_name,
                             type_register,
@@ -74,8 +77,7 @@ pub(crate) fn lower_property_to_element(
             } else if has_property_binding(&child) {
                 let new_child = create_property_element(
                     &child,
-                    property_name,
-                    extra_properties.clone(),
+                    property_names.clone().chain(extra_properties.clone()),
                     default_value_for_extra_properties,
                     element_name,
                     type_register,
@@ -92,14 +94,12 @@ pub(crate) fn lower_property_to_element(
 
 fn create_property_element(
     child: &ElementRc,
-    property_name: &'static str,
-    extra_properties: impl Iterator<Item = &'static str>,
+    properties: impl Iterator<Item = &'static str>,
     default_value_for_extra_properties: Option<&dyn Fn(&ElementRc, &str) -> Expression>,
     element_name: &SmolStr,
     type_register: &TypeRegister,
 ) -> ElementRc {
-    let bindings = core::iter::once(property_name)
-        .chain(extra_properties)
+    let bindings = properties
         .map(|property_name| {
             let mut bind =
                 BindingExpression::new_two_way(NamedReference::new(child, property_name.into()));
@@ -113,7 +113,7 @@ fn create_property_element(
         .collect();
 
     let element = Element {
-        id: format_smolstr!("{}-{}", child.borrow().id, property_name),
+        id: format_smolstr!("{}-{}", child.borrow().id, element_name),
         base_type: type_register.lookup_element(element_name).unwrap(),
         enclosing_component: child.borrow().enclosing_component.clone(),
         bindings,