-
Notifications
You must be signed in to change notification settings - Fork 319
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix gaps when rendering backgrounds and borders of fractionally sized…
… and positioned elements Previously, when placing elements border-to-border one could often see 1px gaps between the elements. This was often the case if their position or size was fractionally sized. Which is a relatively common situation, particularly when using dp-dependent layout and scaling the dp-ratio by a fractional size. To address this, we adjust the rounded/rendered sizes of elements based on their absolute position, in such a way that the bottom-right of one element exactly matches the top-left of the next element. One implication of this is that the size of the element depends on its absolute position. Every time the element's size changes, its geometry needs to be re-generated. However, this isn't as bad as it sounds. In fact, as long as we move or scroll elements at integer pixel intervals, then its effective size won't change. Both element scrolling and the handle element already rounded to integer pixels, so we almost never need to re-generate geometry when interacting with those. With that said, changing absolute coordinates manually (top/right/bottom/left) without rounding will typically cause a lot of geometry re-generation. When rendering, we effectively have to match the position and size of the background in a way that replicates how the layout engine decides to place the next element. Due to floating-point precision, there are still some rare cases where we will see gaps. This is because the result of floating-point operations depend on the order of the operations (being non-associative). We try to match the layout engine in the sense that we add small relative values before we add the large absolute value, and that seemed to help a lot, but this will never match exactly. A more robust solution would use fixed-point arithmetic for layout and rendering. However, this commit alone should cover at least 99% of gaps. Adds RenderBox class which represents the data needed to generate a pixel-accurate mesh from an element's box. The element can construct a render box which can be submitted to the MeshUtilities to generate a background and border mesh. The background and decorators have been updated to use the RenderBox. This commit fixes several 1px-issues: - Gap of 1px between border or backgrounds of neighboring elements. - Overlap of 1px between border or backgrounds of neighboring elements. - Table cell backgrounds 1px over the table border. - Clipping area off by 1px compared to border. Breaking changes: - Changed the signature of `MeshUtilities::GenerateBackground` and `MeshUtilities::GenerateBackgroundBorder`. They now take a `RenderBox` class as input. One can use the new `Element::GetRenderBox` function to construct it. - Changed `ComputedValues::border_radius` to return an array instead of Vector4f.
- Loading branch information
Showing
25 changed files
with
512 additions
and
183 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| /* | ||
| * This source file is part of RmlUi, the HTML/CSS Interface Middleware | ||
| * | ||
| * For the latest information, see http://github.com/mikke89/RmlUi | ||
| * | ||
| * Copyright (c) 2008-2010 CodePoint Ltd, Shift Technology Ltd | ||
| * Copyright (c) 2019-2024 The RmlUi Team, and contributors | ||
| * | ||
| * Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| * of this software and associated documentation files (the "Software"), to deal | ||
| * in the Software without restriction, including without limitation the rights | ||
| * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| * copies of the Software, and to permit persons to whom the Software is | ||
| * furnished to do so, subject to the following conditions: | ||
| * | ||
| * The above copyright notice and this permission notice shall be included in | ||
| * all copies or substantial portions of the Software. | ||
| * | ||
| * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN | ||
| * THE SOFTWARE. | ||
| * | ||
| */ | ||
|
|
||
| #ifndef RMLUI_CORE_RENDERBOX_H | ||
| #define RMLUI_CORE_RENDERBOX_H | ||
|
|
||
| #include "Types.h" | ||
|
|
||
| namespace Rml { | ||
|
|
||
| // Ordered by top, right, bottom, left. | ||
| using EdgeSizes = Array<float, 4>; | ||
| // Ordered by top-left, top-right, bottom-right, bottom-left. | ||
| using CornerSizes = Array<float, 4>; | ||
|
|
||
| /** | ||
| Provides the data needed to generate a mesh for a given element's box. | ||
| */ | ||
|
|
||
| class RenderBox { | ||
| public: | ||
| RenderBox(Vector2f fill_size, Vector2f border_offset, EdgeSizes border_widths, CornerSizes border_radius) : | ||
| fill_size(fill_size), border_offset(border_offset), border_widths(border_widths), border_radius(border_radius) | ||
| {} | ||
|
|
||
| /// Returns the size of the fill area of the box. | ||
| Vector2f GetFillSize() const { return fill_size; } | ||
| /// Sets the size of the fill area of the box. | ||
| void SetFillSize(Vector2f value) { fill_size = value; } | ||
| /// Returns the offset from the border area to the fill area of the box. | ||
| Vector2f GetFillOffset() const { return {border_widths[3], border_widths[0]}; } | ||
|
|
||
| /// Returns the offset to the border area of the box. | ||
| Vector2f GetBorderOffset() const { return border_offset; } | ||
| /// Sets the border offset. | ||
| void SetBorderOffset(Vector2f value) { border_offset = value; } | ||
|
|
||
| /// Returns the border widths of the box. | ||
| EdgeSizes GetBorderWidths() const { return border_widths; } | ||
| /// Sets the border widths of the box. | ||
| void SetBorderWidths(EdgeSizes value) { border_widths = value; } | ||
|
|
||
| /// Returns the border radius of the box. | ||
| CornerSizes GetBorderRadius() const { return border_radius; } | ||
| /// Sets the border radius of the box. | ||
| void SetBorderRadius(CornerSizes value) { border_radius = value; } | ||
|
|
||
| private: | ||
| Vector2f fill_size; | ||
| Vector2f border_offset; | ||
| EdgeSizes border_widths; | ||
| CornerSizes border_radius; | ||
| }; | ||
|
|
||
| } // namespace Rml | ||
| #endif |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.