diff --git a/core/src/image.rs b/core/src/image.rs index f985636a..225ee029 100644 --- a/core/src/image.rs +++ b/core/src/image.rs @@ -23,12 +23,6 @@ pub struct Image { /// /// 0 means transparent. 1 means opaque. pub opacity: f32, - - /// If set to `true`, the image will be snapped to the pixel grid. - /// - /// This can avoid graphical glitches, specially when using - /// [`FilterMethod::Nearest`]. - pub snap: bool, } impl Image { @@ -39,7 +33,6 @@ impl Image { filter_method: FilterMethod::default(), rotation: Radians(0.0), opacity: 1.0, - snap: false, } } @@ -60,12 +53,6 @@ impl Image { self.opacity = opacity.into(); self } - - /// Sets whether the [`Image`] should be snapped to the pixel grid. - pub fn snap(mut self, snap: bool) -> Self { - self.snap = snap; - self - } } impl From<&Handle> for Image { diff --git a/core/src/rectangle.rs b/core/src/rectangle.rs index 0c4add05..c2c88304 100644 --- a/core/src/rectangle.rs +++ b/core/src/rectangle.rs @@ -250,11 +250,14 @@ impl Rectangle { return None; } + let x = (self.x + 0.01).round(); + let y = (self.y + 0.01).round(); + Some(Rectangle { - x: self.x as u32, - y: self.y as u32, - width, - height, + x: x as u32, + y: y as u32, + width: ((self.x + self.width + 0.01).round() - x) as u32, + height: ((self.y + self.height + 0.01).round() - y) as u32, }) } diff --git a/examples/styling/snapshots/catppuccin_frappé-tiny-skia.sha256 b/examples/styling/snapshots/catppuccin_frappé-tiny-skia.sha256 index e4038c0b..0749a625 100644 --- a/examples/styling/snapshots/catppuccin_frappé-tiny-skia.sha256 +++ b/examples/styling/snapshots/catppuccin_frappé-tiny-skia.sha256 @@ -1 +1 @@ -9e67e429f88fd5a64744d9cd4d42e123950bea4a45fea78581bc3d64b12e11f0 \ No newline at end of file +12ba47a34ed415825a23f8ef377a2d52950d2f8614a66bf46c0ec28d0cf15c85 \ No newline at end of file diff --git a/examples/styling/snapshots/catppuccin_latte-tiny-skia.sha256 b/examples/styling/snapshots/catppuccin_latte-tiny-skia.sha256 index 43f380cf..1993b7c9 100644 --- a/examples/styling/snapshots/catppuccin_latte-tiny-skia.sha256 +++ b/examples/styling/snapshots/catppuccin_latte-tiny-skia.sha256 @@ -1 +1 @@ -811a22238f3a40e3e3998f514c0a95f24f2b45449250682d86c8ec392fec5e28 \ No newline at end of file +fa00d7e0ff95b366945d409712d7fe4ce44fff22425236cb56b8b96a88815ee6 \ No newline at end of file diff --git a/examples/styling/snapshots/catppuccin_macchiato-tiny-skia.sha256 b/examples/styling/snapshots/catppuccin_macchiato-tiny-skia.sha256 index 4d7e694e..08924463 100644 --- a/examples/styling/snapshots/catppuccin_macchiato-tiny-skia.sha256 +++ b/examples/styling/snapshots/catppuccin_macchiato-tiny-skia.sha256 @@ -1 +1 @@ -6bf957efe807f87f38cfc672f9a05325aadee6256aacca87bbc3281b98160c8a \ No newline at end of file +4e594cfec775d51f7f836646c59bf4a2de07252721d66ddddea69c17e9112bae \ No newline at end of file diff --git a/examples/styling/snapshots/catppuccin_mocha-tiny-skia.sha256 b/examples/styling/snapshots/catppuccin_mocha-tiny-skia.sha256 index 12ca25d5..9c7466a8 100644 --- a/examples/styling/snapshots/catppuccin_mocha-tiny-skia.sha256 +++ b/examples/styling/snapshots/catppuccin_mocha-tiny-skia.sha256 @@ -1 +1 @@ -d3f4110fae78a3be3b7a4813e9a432b48b81fff1e982c0244e4ea394074bef55 \ No newline at end of file +2ab665b51387c61086ae0199c29e291105bfe4583bd4c4daa652e30917f10bd6 \ No newline at end of file diff --git a/examples/styling/snapshots/dark-tiny-skia.sha256 b/examples/styling/snapshots/dark-tiny-skia.sha256 index f4d2328e..6fc0c8ec 100644 --- a/examples/styling/snapshots/dark-tiny-skia.sha256 +++ b/examples/styling/snapshots/dark-tiny-skia.sha256 @@ -1 +1 @@ -578e7420de69d82906d284c59d81fcea0edf81098481fc4dd7b4c1fb577b7f1c \ No newline at end of file +61c9ee377b33ffa800f512877e45ad5f41fbac36f5d3f06d1b62d6af6ee9d7b2 \ No newline at end of file diff --git a/examples/styling/snapshots/dracula-tiny-skia.sha256 b/examples/styling/snapshots/dracula-tiny-skia.sha256 index 9c3af7e9..3be82338 100644 --- a/examples/styling/snapshots/dracula-tiny-skia.sha256 +++ b/examples/styling/snapshots/dracula-tiny-skia.sha256 @@ -1 +1 @@ -422e841113efaa86e9e37593d0d14f8dd36ad483a81c30a08588f48805e4f9f3 \ No newline at end of file +75f2fb12c9090a256708515de01a25e78905f71e134b7cda79f4fe44b2434052 \ No newline at end of file diff --git a/examples/styling/snapshots/ferra-tiny-skia.sha256 b/examples/styling/snapshots/ferra-tiny-skia.sha256 index f344175f..04a5e3c8 100644 --- a/examples/styling/snapshots/ferra-tiny-skia.sha256 +++ b/examples/styling/snapshots/ferra-tiny-skia.sha256 @@ -1 +1 @@ -3d616a31842a29b4a3d31fbeef25f95c7b50f33360f1c05e069e0b29b3f7553e \ No newline at end of file +b4a1b42d2e21b2a493605745e6beb8e1f28cbeb01b73336e1e8d9061249a8311 \ No newline at end of file diff --git a/examples/styling/snapshots/gruvbox_dark-tiny-skia.sha256 b/examples/styling/snapshots/gruvbox_dark-tiny-skia.sha256 index 528e4662..afb98574 100644 --- a/examples/styling/snapshots/gruvbox_dark-tiny-skia.sha256 +++ b/examples/styling/snapshots/gruvbox_dark-tiny-skia.sha256 @@ -1 +1 @@ -9a21865bfc075669d368ccac69b975c3e1f6c22ba297dddfa003d4ee1a06641c \ No newline at end of file +eb52921b3ee23e1814268701c935d0dff387e7eb741c50443f75a7ab902b5e44 \ No newline at end of file diff --git a/examples/styling/snapshots/gruvbox_light-tiny-skia.sha256 b/examples/styling/snapshots/gruvbox_light-tiny-skia.sha256 index 0846526d..0f7d8d13 100644 --- a/examples/styling/snapshots/gruvbox_light-tiny-skia.sha256 +++ b/examples/styling/snapshots/gruvbox_light-tiny-skia.sha256 @@ -1 +1 @@ -d5164fb10a92177afd0aab353557d1e3fdaa743962c6a901f05cbfcd0d91e9fb \ No newline at end of file +bf6c4cbd6eeed0167d28509e37292f5ce26ed1d58bb156bedb861d0619a1945b \ No newline at end of file diff --git a/examples/styling/snapshots/kanagawa_dragon-tiny-skia.sha256 b/examples/styling/snapshots/kanagawa_dragon-tiny-skia.sha256 index 1ea91e22..0df00ff1 100644 --- a/examples/styling/snapshots/kanagawa_dragon-tiny-skia.sha256 +++ b/examples/styling/snapshots/kanagawa_dragon-tiny-skia.sha256 @@ -1 +1 @@ -3d5ba3b50f192f8700edbfbf54007e92dfd66997bce7342671afc2b60d556aca \ No newline at end of file +83726a4175900a9ef159b80925f2fa985b4ea87bff78d8bb01918fb6c40d6175 \ No newline at end of file diff --git a/examples/styling/snapshots/kanagawa_lotus-tiny-skia.sha256 b/examples/styling/snapshots/kanagawa_lotus-tiny-skia.sha256 index aed0d8ba..aaf8d822 100644 --- a/examples/styling/snapshots/kanagawa_lotus-tiny-skia.sha256 +++ b/examples/styling/snapshots/kanagawa_lotus-tiny-skia.sha256 @@ -1 +1 @@ -90cb13c900d58a56ce170afeefbceb77410d024e7eae6030e181df1c929c3944 \ No newline at end of file +54c8d44afbdd644f324cf40e744b3d7871263e44de2d9a91f6c10470c38ac3c6 \ No newline at end of file diff --git a/examples/styling/snapshots/kanagawa_wave-tiny-skia.sha256 b/examples/styling/snapshots/kanagawa_wave-tiny-skia.sha256 index e5785815..0d9d3f5b 100644 --- a/examples/styling/snapshots/kanagawa_wave-tiny-skia.sha256 +++ b/examples/styling/snapshots/kanagawa_wave-tiny-skia.sha256 @@ -1 +1 @@ -71b625bc39aaead7a1298e4b2dad51b266526c53deab139858774986395878db \ No newline at end of file +5713843396e2efcfc7cc8abd00343d5d66ce8b8a195212a9b75dbfeec8edf7a7 \ No newline at end of file diff --git a/examples/styling/snapshots/light-tiny-skia.sha256 b/examples/styling/snapshots/light-tiny-skia.sha256 index e2bc2896..73d274c7 100644 --- a/examples/styling/snapshots/light-tiny-skia.sha256 +++ b/examples/styling/snapshots/light-tiny-skia.sha256 @@ -1 +1 @@ -f08f80a79959ef1c2fd8f8696a26555f2b2eab6618dd3653a042acab563bcced \ No newline at end of file +f1b20ab79f8242776d9eb1ad9cff7090435aa416811c48a7c22c69b09cd8e70f \ No newline at end of file diff --git a/examples/styling/snapshots/moonfly-tiny-skia.sha256 b/examples/styling/snapshots/moonfly-tiny-skia.sha256 index f873883f..2d8f2b3c 100644 --- a/examples/styling/snapshots/moonfly-tiny-skia.sha256 +++ b/examples/styling/snapshots/moonfly-tiny-skia.sha256 @@ -1 +1 @@ -3302b7934051ff8aa01d70c45e28c444bdc93e8a4da219931aa22465b51c6748 \ No newline at end of file +2c4be9dc1340b65cad6d15d5318017412eba1247a016379b83db379dde0214af \ No newline at end of file diff --git a/examples/styling/snapshots/nightfly-tiny-skia.sha256 b/examples/styling/snapshots/nightfly-tiny-skia.sha256 index 4c44a93c..c174fbe6 100644 --- a/examples/styling/snapshots/nightfly-tiny-skia.sha256 +++ b/examples/styling/snapshots/nightfly-tiny-skia.sha256 @@ -1 +1 @@ -661ec43b66213f369ce5a3680e9e8ead56c98d94718da25b12fbb313386944e0 \ No newline at end of file +2d5d6b9613ccb6a2f23142baf704288037808e7a60ee05bdc73490d8c8780064 \ No newline at end of file diff --git a/examples/styling/snapshots/nord-tiny-skia.sha256 b/examples/styling/snapshots/nord-tiny-skia.sha256 index 8dc1da2e..57bd936a 100644 --- a/examples/styling/snapshots/nord-tiny-skia.sha256 +++ b/examples/styling/snapshots/nord-tiny-skia.sha256 @@ -1 +1 @@ -b5dd22b064220d5f2f90c6f0f381eff41d25f534587d1649ed59e25f878eda97 \ No newline at end of file +512b8dfd4687a609d202436e75ecf1a5553acc2157000e77e31c1578941b033c \ No newline at end of file diff --git a/examples/styling/snapshots/oxocarbon-tiny-skia.sha256 b/examples/styling/snapshots/oxocarbon-tiny-skia.sha256 index 56f26dc9..c36f7223 100644 --- a/examples/styling/snapshots/oxocarbon-tiny-skia.sha256 +++ b/examples/styling/snapshots/oxocarbon-tiny-skia.sha256 @@ -1 +1 @@ -dd6e7e7ba125a2549143501c3de44427633f0bfa6c0d8b6f66aa95d503874065 \ No newline at end of file +4b3b7a2dc65307a3551227f1c5d2bb49da15d29e320ccaa160e3d9fca44c1037 \ No newline at end of file diff --git a/examples/styling/snapshots/solarized_dark-tiny-skia.sha256 b/examples/styling/snapshots/solarized_dark-tiny-skia.sha256 index 063a9c50..0b341569 100644 --- a/examples/styling/snapshots/solarized_dark-tiny-skia.sha256 +++ b/examples/styling/snapshots/solarized_dark-tiny-skia.sha256 @@ -1 +1 @@ -44b5afe743b753a54f3e68da2fd2701837e7e8cff276ff1e8c349030c83ac72e \ No newline at end of file +15aa476c65304bde23e3648ceb424d6394f525f6c1d3e49ee1150376b6fd3068 \ No newline at end of file diff --git a/examples/styling/snapshots/solarized_light-tiny-skia.sha256 b/examples/styling/snapshots/solarized_light-tiny-skia.sha256 index 0bb49deb..b62d6107 100644 --- a/examples/styling/snapshots/solarized_light-tiny-skia.sha256 +++ b/examples/styling/snapshots/solarized_light-tiny-skia.sha256 @@ -1 +1 @@ -1b46820f12611b2759eb843688cd13b6024f2096b7986f205398bb029e0c60bd \ No newline at end of file +04fcb0da640c6e7c1d86c95c74570c9f9d8f56056c9802eef332187f52c003ca \ No newline at end of file diff --git a/examples/styling/snapshots/tokyo_night-tiny-skia.sha256 b/examples/styling/snapshots/tokyo_night-tiny-skia.sha256 index d6eb163d..b4afd06f 100644 --- a/examples/styling/snapshots/tokyo_night-tiny-skia.sha256 +++ b/examples/styling/snapshots/tokyo_night-tiny-skia.sha256 @@ -1 +1 @@ -27a9a8bb08cea7b0a9b9763e332a6833d4fead1a885cdd59a1f5161e3726d6b1 \ No newline at end of file +26e9660da3caa88e5a995739c986b142487f1449c1a5dc555abf7bc7cbca2345 \ No newline at end of file diff --git a/examples/styling/snapshots/tokyo_night_light-tiny-skia.sha256 b/examples/styling/snapshots/tokyo_night_light-tiny-skia.sha256 index f9eb9211..29ba7bca 100644 --- a/examples/styling/snapshots/tokyo_night_light-tiny-skia.sha256 +++ b/examples/styling/snapshots/tokyo_night_light-tiny-skia.sha256 @@ -1 +1 @@ -ab0dee2cc24f30eb51b376a0385302b45bfeddb373348525dab7f551c27ffec2 \ No newline at end of file +8d846a765ff96506ad4f26a672976cb1bfa997d4b09c5ecabf273d5e22ae0a3a \ No newline at end of file diff --git a/examples/styling/snapshots/tokyo_night_storm-tiny-skia.sha256 b/examples/styling/snapshots/tokyo_night_storm-tiny-skia.sha256 index a642d939..3bf421ff 100644 --- a/examples/styling/snapshots/tokyo_night_storm-tiny-skia.sha256 +++ b/examples/styling/snapshots/tokyo_night_storm-tiny-skia.sha256 @@ -1 +1 @@ -aef404c7e38aec5387c39cf3a2911688324c1b9b520e5f541b9fd3fd6eefd3a8 \ No newline at end of file +0ecd51994f6eb37f111dc1b21cad72bb705499eb83156e9dc3ae2221ec392a42 \ No newline at end of file diff --git a/wgpu/src/image/mod.rs b/wgpu/src/image/mod.rs index 51d2acef..7b82bf40 100644 --- a/wgpu/src/image/mod.rs +++ b/wgpu/src/image/mod.rs @@ -147,8 +147,6 @@ impl Pipeline { 6 => Float32x2, // Layer 7 => Sint32, - // Snap - 8 => Uint32, ), }], compilation_options: @@ -243,7 +241,7 @@ impl State { [bounds.width, bounds.height], f32::from(image.rotation), image.opacity, - image.snap, + scale, atlas_entry, match image.filter_method { crate::core::image::FilterMethod::Nearest => { @@ -276,7 +274,7 @@ impl State { size, f32::from(svg.rotation), svg.opacity, - true, + scale, atlas_entry, nearest_instances, ); @@ -506,7 +504,6 @@ struct Instance { _position_in_atlas: [f32; 2], _size_in_atlas: [f32; 2], _layer: u32, - _snap: u32, } impl Instance { @@ -524,14 +521,21 @@ struct Uniforms { } fn add_instances( - image_position: [f32; 2], - image_size: [f32; 2], + mut image_position: [f32; 2], + mut image_size: [f32; 2], rotation: f32, opacity: f32, - snap: bool, + scale: f32, entry: &atlas::Entry, instances: &mut Vec, ) { + let snap = |coordinate: f32| (coordinate * scale).round() / scale; + + image_position[0] = snap(image_position[0]); + image_position[1] = snap(image_position[1]); + image_size[0] = snap(image_size[0]); + image_size[1] = snap(image_size[1]); + let center = [ image_position[0] + image_size[0] / 2.0, image_position[1] + image_size[1] / 2.0, @@ -545,7 +549,6 @@ fn add_instances( image_size, rotation, opacity, - snap, allocation, instances, ); @@ -575,8 +578,8 @@ fn add_instances( ]; add_instance( - position, center, size, rotation, opacity, snap, - allocation, instances, + position, center, size, rotation, opacity, allocation, + instances, ); } } @@ -590,7 +593,6 @@ fn add_instance( size: [f32; 2], rotation: f32, opacity: f32, - snap: bool, allocation: &atlas::Allocation, instances: &mut Vec, ) { @@ -613,7 +615,6 @@ fn add_instance( (height as f32 - 1.0) / atlas::SIZE as f32, ], _layer: layer as u32, - _snap: snap as u32, }; instances.push(instance); diff --git a/wgpu/src/shader/image.wgsl b/wgpu/src/shader/image.wgsl index bc922838..51c9183c 100644 --- a/wgpu/src/shader/image.wgsl +++ b/wgpu/src/shader/image.wgsl @@ -17,7 +17,6 @@ struct VertexInput { @location(5) atlas_pos: vec2, @location(6) atlas_scale: vec2, @location(7) layer: i32, - @location(8) snap: u32, } struct VertexOutput { @@ -54,11 +53,7 @@ fn vs_main(input: VertexInput) -> VertexOutput { // Calculate the final position of the vertex out.position = vec4(vec2(globals.scale_factor), 1.0, 1.0) * (vec4(input.center, 0.0, 0.0) + rotate * vec4(v_pos, 0.0, 1.0)); - - if bool(input.snap) { - out.position = round(out.position); - } - + out.position = round(out.position); out.position = globals.transform * out.position; return out; diff --git a/wgpu/src/shader/quad/gradient.wgsl b/wgpu/src/shader/quad/gradient.wgsl index a1b4b107..e5e9c552 100644 --- a/wgpu/src/shader/quad/gradient.wgsl +++ b/wgpu/src/shader/quad/gradient.wgsl @@ -33,6 +33,9 @@ fn gradient_vs_main(input: GradientVertexInput) -> GradientVertexOutput { var pos: vec2 = input.position_and_scale.xy * globals.scale; var scale: vec2 = input.position_and_scale.zw * globals.scale; + var pos_snap: vec2 = round(pos + vec2(0.01, 0.01)) - pos; + var scale_snap: vec2 = round(pos + scale + vec2(0.01, 0.01)) - pos - pos_snap - scale; + var min_border_radius = min(input.position_and_scale.z, input.position_and_scale.w) * 0.5; var border_radius: vec4 = vec4( min(input.border_radius.x, min_border_radius), @@ -42,10 +45,10 @@ fn gradient_vs_main(input: GradientVertexInput) -> GradientVertexOutput { ); var transform: mat4x4 = mat4x4( - vec4(scale.x + 1.0, 0.0, 0.0, 0.0), - vec4(0.0, scale.y + 1.0, 0.0, 0.0), + vec4(scale.x + scale_snap.x + 1.0, 0.0, 0.0, 0.0), + vec4(0.0, scale.y + scale_snap.y + 1.0, 0.0, 0.0), vec4(0.0, 0.0, 1.0, 0.0), - vec4(pos - vec2(0.5, 0.5), 0.0, 1.0) + vec4(pos + pos_snap, 0.0, 1.0) ); out.position = globals.transform * transform * vec4(vertex_position(input.vertex_index), 0.0, 1.0); @@ -55,7 +58,7 @@ fn gradient_vs_main(input: GradientVertexInput) -> GradientVertexOutput { out.colors_4 = input.colors_4; out.offsets = input.offsets; out.direction = input.direction * globals.scale; - out.position_and_scale = vec4(pos, scale); + out.position_and_scale = vec4(pos + pos_snap, scale + scale_snap); out.border_color = premultiply(input.border_color); out.border_radius = border_radius * globals.scale; out.border_width = input.border_width * globals.scale; diff --git a/wgpu/src/shader/quad/solid.wgsl b/wgpu/src/shader/quad/solid.wgsl index f4c39f3d..86f7214a 100644 --- a/wgpu/src/shader/quad/solid.wgsl +++ b/wgpu/src/shader/quad/solid.wgsl @@ -30,15 +30,9 @@ fn solid_vs_main(input: SolidVertexInput) -> SolidVertexOutput { var pos: vec2 = (input.pos + min(input.shadow_offset, vec2(0.0, 0.0)) - input.shadow_blur_radius) * globals.scale; var scale: vec2 = (input.scale + vec2(abs(input.shadow_offset.x), abs(input.shadow_offset.y)) + input.shadow_blur_radius * 2.0) * globals.scale; - var snap: vec2 = vec2(0.0, 0.0); - if input.scale.x == 1.0 { - snap.x = round(pos.x) - pos.x; - } - - if input.scale.y == 1.0 { - snap.y = round(pos.y) - pos.y; - } + var pos_snap: vec2 = round(pos + vec2(0.01, 0.01)) - pos; + var scale_snap: vec2 = round(pos + scale + vec2(0.01, 0.01)) - pos - pos_snap - scale; var min_border_radius = min(input.scale.x, input.scale.y) * 0.5; var border_radius: vec4 = vec4( @@ -49,17 +43,17 @@ fn solid_vs_main(input: SolidVertexInput) -> SolidVertexOutput { ); var transform: mat4x4 = mat4x4( - vec4(scale.x + 1.0, 0.0, 0.0, 0.0), - vec4(0.0, scale.y + 1.0, 0.0, 0.0), + vec4(scale.x + scale_snap.x + 1.0, 0.0, 0.0, 0.0), + vec4(0.0, scale.y + scale_snap.y + 1.0, 0.0, 0.0), vec4(0.0, 0.0, 1.0, 0.0), - vec4(pos - vec2(0.5, 0.5) + snap, 0.0, 1.0) + vec4(pos + pos_snap, 0.0, 1.0) ); out.position = globals.transform * transform * vec4(vertex_position(input.vertex_index), 0.0, 1.0); out.color = premultiply(input.color); out.border_color = premultiply(input.border_color); - out.pos = input.pos * globals.scale + snap; - out.scale = input.scale * globals.scale; + out.pos = input.pos * globals.scale + pos_snap; + out.scale = input.scale * globals.scale + scale_snap; out.border_radius = border_radius * globals.scale; out.border_width = input.border_width * globals.scale; out.shadow_color = premultiply(input.shadow_color); diff --git a/widget/src/image.rs b/widget/src/image.rs index 80ebd721..09f04f50 100644 --- a/widget/src/image.rs +++ b/widget/src/image.rs @@ -296,7 +296,6 @@ fn render( filter_method, rotation: rotation.radians(), opacity, - snap: true, }, drawing_bounds, ); diff --git a/widget/src/image/viewer.rs b/widget/src/image/viewer.rs index 811241a9..3f48b8cd 100644 --- a/widget/src/image/viewer.rs +++ b/widget/src/image/viewer.rs @@ -351,7 +351,6 @@ where filter_method: self.filter_method, rotation: Radians(0.0), opacity: 1.0, - snap: true, }, drawing_bounds, ); diff --git a/widget/src/toggler.rs b/widget/src/toggler.rs index 70c38ce2..786844b2 100644 --- a/widget/src/toggler.rs +++ b/widget/src/toggler.rs @@ -424,7 +424,7 @@ where .style(&self.class, self.last_status.unwrap_or(Status::Disabled)); let border_radius = bounds.height / BORDER_RADIUS_RATIO; - let space = SPACE_RATIO * bounds.height; + let space = (SPACE_RATIO * bounds.height).round(); let toggler_background_bounds = Rectangle { x: bounds.x + space,