Add a clip property that can be set to the Rectangle

docs/builtin_elements.md

@@ -51,6 +51,9 @@ When not part of a layout, its width or height defaults to 100% of the parent el
 * **`border_width`** (*length*): The width of the border. (default value: 0)
 * **`border_color`** (*brush*): The color of the border. (default value: transparent)
 * **`border_radius`** (*length*): The size of the radius. (default value: 0)
+* **`clip`** (*bool*): By default, when an item is bigger or outside another item, it is still shown.
+    But when this property is set to true, then the children element of this Rectangle are going to be clipped.
+    This property must be a literal `true` or `false` (default: false)
 
 ### Example
 
@@ -563,6 +566,8 @@ But the `Clip` element  make sure to clip any children outside of the rectangle
 
 When not part of a layout, its width or height defaults to 100% of the parent element when not specified.
 
+FIXME: deprecate this item as it can be replaced by the `clip:` property
+
 ## `PopupWindow`
 
 This allow to show a popup window like a tooltip or a popup menu.
@@ -655,7 +660,7 @@ This enum describes the how the text appear if it is too wide to fit in the Text
 
 ### Values
 
-* **`TextWrap.clip`**: The text will simpli be clipped.
+* **`TextWrap.clip`**: The text will simply be clipped.
 * **`TextWrap.elide`**: The text will be ellided with `…`.
 
 ## `EventResult`

examples/printerdemo/ui/ink_page.60

@@ -31,10 +31,11 @@ export InkPage := Page {
         HorizontalLayout {
             spacing: root.width * 5%;
             for color_info in ink_levels : Rectangle {
-                ink := Clip {
+                ink := Rectangle {
                     width: parent.width;
                     height: parent.height * color_info.level;
                     y: parent.height - self.height;
+                    clip: true;
                     Rectangle {
                         background: color_info.color;
                         border-radius: width / 2;

examples/printerdemo/ui/printer_queue.60

@@ -95,13 +95,15 @@ NarrowPrintQueueElement := Rectangle {
     border-radius: 14px;
     border-width: 2px;
     background: DemoPalette.printer_queue_item_background_color;
+    clip: true;
 
     property <bool> expanded;
 
     height: layout.minimum-height;
     animate height { duration: 200ms; easing: ease; }
 
-    Clip {
+
+    Rectangle {
         height: 100%;
         layout := VerticalLayout {
             padding: root.border_radius;

examples/slide_puzzle/slide_puzzle.60

@@ -63,8 +63,9 @@ Checkbox := Rectangle {
         border-color: unchecked_color;
         border-radius: 2px;
 
-        clip := Clip {
+        clip := Rectangle {
             width: 0px;
+            clip: true;
 
             Text {
                 width: root.width;
@@ -295,9 +296,9 @@ export MainWindow := Window {
 
 
         for p[i] in pieces : Rectangle {
-            x: tile.py * (pieces_size + pieces_spacing) + p.offset_x
+            x: py * (pieces_size + pieces_spacing) + p.offset_x
                 + (parent.width - (4*pieces_size + 3*pieces_spacing))/2;
-            y: tile.px * (pieces_size + pieces_spacing) + p.offset_y
+            y: px * (pieces_size + pieces_spacing) + p.offset_y
                 + (parent.height - (4*pieces_size + 3*pieces_spacing))/2;
             width: pieces_size;
             height: pieces_size;
@@ -308,8 +309,8 @@ export MainWindow := Window {
             drop-shadow-blur: 6px;
             drop-shadow-color: #00000080;
             border-radius: current-theme.piece-radius;
+            clip: true;
 
-            tile := Clip {
             property<float> px: p.pos_x;
             property<float> py: p.pos_y;
             animate px , py { duration: 170ms; easing: cubic-bezier(0.17,0.76,0.4,1.75); }
@@ -387,7 +388,6 @@ export MainWindow := Window {
                 }
             ]
         }
-        }
 
         if (root.tiles-left == 0) : Text {
             width: pieces_size;

sixtyfps_compiler/lib.rs

@@ -44,6 +44,7 @@ pub mod typeregister;
 mod passes {
     pub mod apply_default_properties_from_style;
     pub mod check_expressions;
+    pub mod clip;
     pub mod collect_globals;
     pub mod collect_structs;
     pub mod compile_paths;
@@ -153,6 +154,7 @@ pub async fn run_passes(
     mut type_loader: &mut typeloader::TypeLoader<'_>,
     compiler_config: &CompilerConfiguration,
 ) {
+    let global_type_registry = type_loader.global_type_registry.clone();
     passes::resolving::resolve_expressions(doc, &type_loader, diag);
     passes::inlining::inline(doc);
     passes::check_expressions::check_expressions(doc, diag);
@@ -161,10 +163,7 @@ pub async fn run_passes(
     passes::focus_item::resolve_element_reference_in_set_focus_calls(&doc.root_component, diag);
     passes::focus_item::determine_initial_focus_item(&doc.root_component, diag);
     passes::focus_item::erase_forward_focus_properties(&doc.root_component);
-    passes::flickable::handle_flickable(
-        &doc.root_component,
-        &type_loader.global_type_registry.borrow(),
-    );
+    passes::flickable::handle_flickable(&doc.root_component, &global_type_registry.borrow());
     passes::materialize_fake_properties::materialize_fake_properties(&doc.root_component);
     if compiler_config.embed_resources {
         passes::embed_resources::embed_resources(&doc.root_component);
@@ -174,6 +173,7 @@ pub async fn run_passes(
     passes::lower_popups::lower_popups(&doc.root_component, &doc.local_registry, diag);
     passes::lower_layout::lower_layouts(&doc.root_component, &mut type_loader, diag).await;
     passes::lower_shadows::lower_shadow_properties(&doc.root_component, &doc.local_registry, diag);
+    passes::clip::handle_clip(&doc.root_component, &global_type_registry.borrow(), diag);
     passes::default_geometry::default_geometry(&doc.root_component, diag);
     passes::apply_default_properties_from_style::apply_default_properties_from_style(
         &doc.root_component,

sixtyfps_compiler/typeregister.rs

@@ -36,6 +36,7 @@ const RESERVED_LAYOUT_PROPERTIES: &'static [(&'static str, Type)] = &[
     ("row", Type::Int32),
     ("colspan", Type::Int32),
     ("rowspan", Type::Int32),
+    ("clip", Type::Bool),
 ];
 
 const RESERVED_OTHER_PROPERTIES: &'static [(&'static str, Type)] = &[