Restore source compatibility for drop-shadow-blur

Let's keep source compatibility and define `drop-shadow-blur` to be a radius.
The CSS spec says that the standard deviation is half of the radius.

We just need to scale again and increase the shadow rect to make sure that no borders are visible.

CHANGELOG.md

@@ -108,7 +108,6 @@ All notable changes to this project will be documented in this file.
  - In Rust, the generated component implements `Clone` and acts like an `Rc`. `sixtyfps::Weak` can be used to hold weak references.
  - `ARGBColor` was renamed `RgbaColor`
  - `width and `height` of some builtin elements now default to 100% of the parent element.
- - `drop-shadow-blur` was changed to describe the blur level, not the size of the blur area.
 
 ### Added
  - Allow dashes in identifiers (#52)

docs/builtin_elements.md

@@ -25,8 +25,8 @@ an element, it is possible to set the following `drop-shadow` properties:
   of the shadow from the element's frame. A negative value places the shadow left / above of the element.
 * **`drop-shadow-color`** (*color*): The base color of the shadow to use. Typically that color is the starting color
   of a gradient that fades into transparency.
-* **`drop-shadow-blur`** (*float*): The level of blur applied to the shadow. Negative values are ignored and zero means
-  no blur (default).
+* **`drop-shadow-blur`** (*length*): The radius of the shadow that also describes the level of blur applied to the shadow.
+  Negative values are ignored and zero means no blur (default).
 
 The `drop-shadow` effect is supported for `Rectangle` and `Clip` elements.
 

examples/iot-dashboard/iot-dashboard.60

@@ -227,7 +227,7 @@ Box := Rectangle {
     background: Skin.palette.box;
     drop-shadow-offset-x: 6px;
     drop-shadow-offset-y: 6px;
-    drop-shadow-blur: 6;
+    drop-shadow-blur: 6px;
     drop-shadow-color: Skin.palette.shadow;
     VerticalLayout {
         if (root.title != "") : Text {

examples/slide_puzzle/slide_puzzle.60

@@ -306,7 +306,7 @@ export MainWindow := Window {
 
             drop-shadow-offset-x: 1px;
             drop-shadow-offset-y: 1px;
-            drop-shadow-blur: 3;
+            drop-shadow-blur: 3px;
             drop-shadow-color: #00000040;
             border-radius: current-theme.piece-radius;
             clip: true;

sixtyfps_compiler/typeregister.rs

@@ -52,7 +52,7 @@ const RESERVED_OTHER_PROPERTIES: &'static [(&'static str, Type)] = &[
 pub(crate) const RESERVED_DROP_SHADOW_PROPERTIES: &'static [(&'static str, Type)] = &[
     ("drop_shadow_offset_x", Type::LogicalLength),
     ("drop_shadow_offset_y", Type::LogicalLength),
-    ("drop_shadow_blur", Type::Float32),
+    ("drop_shadow_blur", Type::LogicalLength),
     ("drop_shadow_color", Type::Color),
 ];
 

sixtyfps_runtime/rendering_backends/gl/lib.rs

@@ -1011,7 +1011,7 @@ impl ItemRenderer for GLItemRenderer {
             .shared_data
             .load_item_graphics_cache_with_function(&box_shadow.cached_rendering_data, || {
                 ItemGraphicsCacheEntry::Image({
-                    let blur = box_shadow.blur();
+                    let blur = box_shadow.blur() * self.scale_factor;
                     let offset_x = box_shadow.offset_x() * self.scale_factor;
                     let offset_y = box_shadow.offset_y() * self.scale_factor;
                     let width = box_shadow.width() * self.scale_factor;
@@ -1019,10 +1019,10 @@ impl ItemRenderer for GLItemRenderer {
                     let radius = box_shadow.border_radius() * self.scale_factor;
 
                     let shadow_rect: euclid::Rect<f32, euclid::UnknownUnit> = euclid::rect(
-                        offset_x - blur / 2.,
-                        offset_y - blur / 2.,
-                        width + blur,
-                        height + blur,
+                        offset_x - blur,
+                        offset_y - blur,
+                        width + 2. * blur,
+                        height + 2. * blur,
                     );
 
                     let shadow_image_width = shadow_rect.max_x().ceil() as usize;

tests/cases/examples/box_shadow_use.60

@@ -31,7 +31,7 @@ TestCase := Window {
             drop-shadow-offset-x: 10px;
             drop-shadow-offset-y: 10px;
             drop-shadow-color: #00000080;
-            drop-shadow-blur: 5;
+            drop-shadow-blur: 5px;
         }
 
         for r[i] in [
@@ -42,7 +42,7 @@ TestCase := Window {
             drop-shadow-offset-x: 10px;
             drop-shadow-offset-y: 10px;
             drop-shadow-color: #00000080;
-            drop-shadow-blur: 5;
+            drop-shadow-blur: 5px;
         }
 
         Rectangle {
@@ -62,7 +62,7 @@ TestCase := Window {
                 drop-shadow-offset-x: 10px;
                 drop-shadow-offset-y: 10px;
                 drop-shadow-color: #249a04;
-                drop-shadow-blur: 3;
+                drop-shadow-blur: 3px;
             }
         }
     }
@@ -80,7 +80,7 @@ TestCase := Window {
         drop-shadow-offset-x: 5px;
         drop-shadow-offset-y: 5px;
         drop-shadow-color: #00000080;
-        drop-shadow-blur: 5;
+        drop-shadow-blur: 5px;
     }
 }
 

tools/syntax_updater/from_0_0_6.rs

@@ -39,19 +39,6 @@ pub(crate) fn fold_node(
                     }
                 }
             }
-            prop @ "drop_shadow_blur" | prop @ "drop-shadow-blur" => {
-                let expr = binding.BindingExpression();
-                write!(
-                    file,
-                    "{}: ({}) / 1px; /* CHANGED BY SYNTAX UPDATER: drop-shadow-blur is now an abstract blur level, this is just an approximation. */",
-                    prop,
-                    expr.CodeBlock()
-                        .map(|block| block.to_string())
-                        .or_else(|| expr.Expression().map(|expr| expr.to_string()))
-                        .unwrap_or_default()
-                )?;
-                return Ok(true);
-            }
             _ => {}
         }
     };