Rename scale* property to transform-scale*

This is to avoid reserving the `scale` property on every element which
is a common property name

Author: ogoffart

demos/home-automation/ui/components/mainView/widgetLoader.slint

@@ -192,8 +192,7 @@ export component WidgetLoader {
         id: AppState.component-details[root.index].id;
         width: root.width;
         height: root.height;
-        scale-x: scaler;
-        scale-y: scaler;
+        transform-scale: scaler;
     }
 
     if root.type == WidgetType.powerInfo: PowerInfo {

demos/home-automation/ui/components/mainView/widgetLoaderSoftwareRenderer.slint

@@ -128,8 +128,7 @@ export component WidgetLoaderSoftwareRenderer {
         id: AppState.component-details[root.index].id;
         width: root.width;
         height: root.height;
-        scale-x: scaler;
-        scale-y: scaler;
+        transform-scale: scaler;
     }
 
     if root.type == WidgetType.powerInfo && root.is-visible: PowerInfo {

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

@@ -73,20 +73,20 @@ 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
-<SlintProperty propName="scale" typeName="float" defaultValue='100%'>
+#### transform-scale
+<SlintProperty propName="transform-scale" typeName="float" defaultValue='100%'>
 The scale factor to apply to the element and all its children.
 
 This doesn't affect the geometry (width, height) of the element, but affects the rendering.
 The scale is done around the `rotation-origin` point.
 
-It is also possible to use the `scale-x` and `scale-y` properties to specify the scale factors for the x and y axis.
+It is also possible to use the `transform-scale-x` and `transform-scale-y` properties to specify the scale factors for the x and y axis.
 </SlintProperty>
 
-#### scale-x
-<SlintProperty propName="scale-x" typeName="float" defaultValue='self.scale'/>
-#### scale-y
-<SlintProperty propName="scale-y" typeName="float" defaultValue='self.scale'/>
+#### transform-scale-x
+<SlintProperty propName="transform-scale-x" typeName="float" defaultValue='self.scale'/>
+#### transform-scale-y
+<SlintProperty propName="transform-scale-y" typeName="float" defaultValue='self.scale'/>
 
 ### opacity
 <CodeSnippetMD imagePath="/src/assets/generated/rectangle-opacity.png" scale="3" imageWidth="100" imageHeight="310"  imageAlt='rectangle opacity'>

examples/fancy-switches/DarkModeSwitch.slint

@@ -123,14 +123,13 @@ export component DarkModeSwitch {
             frameBacker.background: #2A2A2A;
             moon.rotation-angle: -20deg;
             sun.color: #fc7a10;
-            sun.scale-x: 0.8;
-            sun.scale-y: 0.8;
+            sun.transform-scale: 0.8;
             in {
                 animate thumb.x, thumb.background, frameBacker.background, sun.color {
                     duration: 200ms;
                     easing: ease-out-sine;
                 }
-                animate moon.rotation-angle, sun.scale-x, sun.scale-y {
+                animate moon.rotation-angle, sun.transform-scale {
                     duration: 1200ms;
                     easing: ease-out-elastic;
                 }
@@ -143,14 +142,13 @@ export component DarkModeSwitch {
             frameBacker.background: transparent;
             moon.rotation-angle: 20deg;
             sun.color: #2A2A2A;
-            sun.scale-x: 1;
-            sun.scale-y: 1;
+            sun.transform-scale: 1;
             in {
                 animate thumb.x, thumb.background, frameBacker.background, moon.rotation-angle {
                     duration: 200ms;
                     easing: ease-out-sine;
                 }
-                animate sun.scale-x, sun.scale-y {
+                animate sun.transform-scale {
                     duration: 1200ms;
                     easing: ease-out-elastic;
                 }

internal/compiler/builtins.slint

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

internal/compiler/passes/lower_property_to_element.rs

@@ -150,17 +150,17 @@ pub fn lower_transform_properties(
             match prop {
                 "rotation-origin-x" => prop_div_2("width"),
                 "rotation-origin-y" => prop_div_2("height"),
-                "scale-x" | "scale-y" => {
-                    if e.borrow().is_binding_set("scale", true) {
+                "transform-scale-x" | "transform-scale-y" => {
+                    if e.borrow().is_binding_set("transform-scale", true) {
                         Some(Expression::PropertyReference(NamedReference::new(
                             e,
-                            SmolStr::new_static("scale"),
+                            SmolStr::new_static("transform-scale"),
                         )))
                     } else {
                         Some(Expression::NumberLiteral(1., Default::default()))
                     }
                 }
-                "scale" => None,
+                "transform-scale" => None,
                 "rotation-angle" => Some(Expression::NumberLiteral(0., Default::default())),
                 _ => unreachable!(),
             }

internal/compiler/typeregister.rs

@@ -177,9 +177,9 @@ pub const RESERVED_DROP_SHADOW_PROPERTIES: &[(&str, Type)] = &[
 
 pub const RESERVED_TRANSFORM_PROPERTIES: &[(&str, Type)] = &[
     ("rotation-angle", Type::Angle),
-    ("scale-x", Type::Float32),
-    ("scale-y", Type::Float32),
-    ("scale", Type::Float32),
+    ("transform-scale-x", Type::Float32),
+    ("transform-scale-y", Type::Float32),
+    ("transform-scale", Type::Float32),
     ("rotation-origin-x", Type::LogicalLength),
     ("rotation-origin-y", Type::LogicalLength),
 ];

internal/core/item_tree.rs

@@ -825,8 +825,8 @@ impl ItemRc {
             ItemTransform::translation(-origin.x, -origin.y)
                 .cast()
                 .then_scale(
-                    transform_item.as_pin_ref().scale_x(),
-                    transform_item.as_pin_ref().scale_y(),
+                    transform_item.as_pin_ref().transform_scale_x(),
+                    transform_item.as_pin_ref().transform_scale_y(),
                 )
                 .then_rotate(euclid::Angle {
                     radians: transform_item.as_pin_ref().rotation_angle().to_radians(),

internal/core/items.rs

@@ -1027,8 +1027,8 @@ declare_item_vtable! {
 /// The implementation of the `Rotate` element
 pub struct Transform {
     pub rotation_angle: Property<f32>,
-    pub scale_x: Property<f32>,
-    pub scale_y: Property<f32>,
+    pub transform_scale_x: Property<f32>,
+    pub transform_scale_y: Property<f32>,
     pub rotation_origin_x: Property<LogicalLength>,
     pub rotation_origin_y: Property<LogicalLength>,
     pub cached_rendering_data: CachedRenderingData,
@@ -1100,7 +1100,7 @@ impl Item for Transform {
         let origin =
             LogicalVector::from_lengths(self.rotation_origin_x(), self.rotation_origin_y());
         (*backend).translate(origin);
-        (*backend).scale(self.scale_x(), self.scale_y());
+        (*backend).scale(self.transform_scale_x(), self.transform_scale_y());
         (*backend).rotate(self.rotation_angle());
         (*backend).translate(-origin);
         RenderingResult::ContinueRenderingChildren

tests/cases/elements/event_scaling.slint

@@ -20,8 +20,8 @@ export component TestCase  {
         y: 0px;
         width: 50px;
         height: 50px;
-        scale-x: 200%;
-        scale-y: 400%;
+        transform-scale-x: 200%;
+        transform-scale-y: 400%;
         rotation-origin-x: 0px;
         rotation-origin-y: 0px;
         area1 := TouchArea {