From a7ce64657c88a7f61c91de71d0c38f51bfe8cb7a Mon Sep 17 00:00:00 2001 From: Simon Hausmann Date: Thu, 20 May 2021 12:14:05 +0200 Subject: [PATCH] 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 | 1 - docs/builtin_elements.md | 4 ++-- examples/iot-dashboard/iot-dashboard.60 | 2 +- examples/slide_puzzle/slide_puzzle.60 | 2 +- sixtyfps_compiler/typeregister.rs | 2 +- sixtyfps_runtime/rendering_backends/gl/lib.rs | 10 +++++----- tests/cases/examples/box_shadow_use.60 | 8 ++++---- tools/syntax_updater/from_0_0_6.rs | 13 ------------- 8 files changed, 14 insertions(+), 28 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3c5414691..2d5a9b897 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/docs/builtin_elements.md b/docs/builtin_elements.md index 577c722a1..d6cb038a9 100644 --- a/docs/builtin_elements.md +++ b/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. diff --git a/examples/iot-dashboard/iot-dashboard.60 b/examples/iot-dashboard/iot-dashboard.60 index 315324980..3e5537cd4 100644 --- a/examples/iot-dashboard/iot-dashboard.60 +++ b/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 { diff --git a/examples/slide_puzzle/slide_puzzle.60 b/examples/slide_puzzle/slide_puzzle.60 index b0ecd3641..3323f77cb 100644 --- a/examples/slide_puzzle/slide_puzzle.60 +++ b/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; diff --git a/sixtyfps_compiler/typeregister.rs b/sixtyfps_compiler/typeregister.rs index de86e79d5..872df1d09 100644 --- a/sixtyfps_compiler/typeregister.rs +++ b/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), ]; diff --git a/sixtyfps_runtime/rendering_backends/gl/lib.rs b/sixtyfps_runtime/rendering_backends/gl/lib.rs index 7a58b9961..db5b4f2e9 100644 --- a/sixtyfps_runtime/rendering_backends/gl/lib.rs +++ b/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 = 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; diff --git a/tests/cases/examples/box_shadow_use.60 b/tests/cases/examples/box_shadow_use.60 index 0d14b2137..eab2ee276 100644 --- a/tests/cases/examples/box_shadow_use.60 +++ b/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; } } diff --git a/tools/syntax_updater/from_0_0_6.rs b/tools/syntax_updater/from_0_0_6.rs index 9ba5d87f8..fb7243584 100644 --- a/tools/syntax_updater/from_0_0_6.rs +++ b/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); - } _ => {} } };