Decouple balanced top and left window paddings to avoid diagonal resize jitter (#9518)
I had a bit of the same annoyance as #9064. I agree that with balanced padding, you should expect horizontal jitter when resizing horizontally, and vertical jitter when resizing vertically. Diagonal jitter, however, happened because the top padding was upper bounded by the left padding, coupling the vertical and horizontal wobbling. This looks kind of janky, and it's surprising that the balance between top and bottom padding changes as you vary only the width of the window. With this PR, the upper bound is instead equal to the maximum left padding. Since this only depends on the config, not the current window width, the diagonal wobbling is avoided. Both the top and left padding still have the same range of motion as before. An alternative could be to bound by the minimum or median left padding instead. Open to suggestions. **Before** https://github.com/user-attachments/assets/d12c5870-f05d-450f-89fc-c59eab90e199 **After** https://github.com/user-attachments/assets/35b80bb0-9ea2-41c1-8502-3a8eec51dbc6pull/9918/head
commit
051e6543ff
|
|
@ -44,6 +44,15 @@ pub const Size = struct {
|
|||
self.grid(),
|
||||
self.cell,
|
||||
);
|
||||
|
||||
// The top/bottom padding is interesting. Subjectively, lots of padding
|
||||
// at the top looks bad. So instead of always being equal (like left/right),
|
||||
// we force the top padding to be at most equal to the maximum left padding,
|
||||
// which is the balanced explicit horizontal padding plus half a cell width.
|
||||
const max_padding_left = (explicit.left + explicit.right + self.cell.width) / 2;
|
||||
const vshift = self.padding.top -| max_padding_left;
|
||||
self.padding.top -= vshift;
|
||||
self.padding.bottom += vshift;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -258,16 +267,12 @@ pub const Padding = struct {
|
|||
const space_right = @as(f32, @floatFromInt(screen.width)) - grid_width;
|
||||
const space_bot = @as(f32, @floatFromInt(screen.height)) - grid_height;
|
||||
|
||||
// The left/right padding is just an equal split.
|
||||
// The padding is split equally along both axes.
|
||||
const padding_right = @floor(space_right / 2);
|
||||
const padding_left = padding_right;
|
||||
|
||||
// The top/bottom padding is interesting. Subjectively, lots of padding
|
||||
// at the top looks bad. So instead of always being equal (like left/right),
|
||||
// we force the top padding to be at most equal to the left, and the bottom
|
||||
// padding is the difference thereafter.
|
||||
const padding_top = @min(padding_left, @floor(space_bot / 2));
|
||||
const padding_bot = space_bot - padding_top;
|
||||
const padding_bot = @floor(space_bot / 2);
|
||||
const padding_top = padding_bot;
|
||||
|
||||
const zero = @as(f32, 0);
|
||||
return .{
|
||||
|
|
|
|||
Loading…
Reference in New Issue