Add crisp feature for enabling default quad snapping

This commit is contained in:
Héctor Ramón Jiménez 2025-05-30 00:30:23 +02:00
parent 12ac265694
commit 567b7d9e9f
No known key found for this signature in database
GPG key ID: 7CC46565708259A7
14 changed files with 184 additions and 138 deletions

View file

@ -54,6 +54,7 @@ impl Layer {
shadow_color: color::pack(quad.shadow.color),
shadow_offset: quad.shadow.offset.into(),
shadow_blur_radius: quad.shadow.blur_radius,
snap: quad.snap as u32,
};
self.quads.add(quad, &background);

View file

@ -41,6 +41,9 @@ pub struct Quad {
/// The shadow blur radius of the [`Quad`].
pub shadow_blur_radius: f32,
/// Whether the [`Quad`] should be snapped to the pixel grid.
pub snap: u32,
}
#[derive(Debug, Clone)]

View file

@ -153,7 +153,9 @@ impl Pipeline {
// Border radius
8 => Float32x4,
// Border width
9 => Float32
9 => Float32,
// Snap
10 => Uint32,
),
}],
compilation_options:

View file

@ -114,6 +114,8 @@ impl Pipeline {
7 => Float32x2,
// Shadow blur radius
8 => Float32,
// Snap
9 => Uint32,
),
}],
compilation_options:

View file

@ -10,6 +10,7 @@ struct GradientVertexInput {
@location(7) border_color: vec4<f32>,
@location(8) border_radius: vec4<f32>,
@location(9) border_width: f32,
@location(10) snap: u32,
}
struct GradientVertexOutput {
@ -33,6 +34,14 @@ fn gradient_vs_main(input: GradientVertexInput) -> GradientVertexOutput {
var pos: vec2<f32> = input.position_and_scale.xy * globals.scale;
var scale: vec2<f32> = input.position_and_scale.zw * globals.scale;
var pos_snap = vec2<f32>(0.0, 0.0);
var scale_snap = vec2<f32>(0.0, 0.0);
if bool(input.snap) {
pos_snap = round(pos + vec2(0.001, 0.001)) - pos;
scale_snap = round(pos + scale + vec2(0.001, 0.001)) - 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<f32> = vec4<f32>(
min(input.border_radius.x, min_border_radius),
@ -42,10 +51,10 @@ fn gradient_vs_main(input: GradientVertexInput) -> GradientVertexOutput {
);
var transform: mat4x4<f32> = mat4x4<f32>(
vec4<f32>(scale.x + 1.0, 0.0, 0.0, 0.0),
vec4<f32>(0.0, scale.y + 1.0, 0.0, 0.0),
vec4<f32>(scale.x + scale_snap.x + 1.0, 0.0, 0.0, 0.0),
vec4<f32>(0.0, scale.y + scale_snap.y + 1.0, 0.0, 0.0),
vec4<f32>(0.0, 0.0, 1.0, 0.0),
vec4<f32>(pos - vec2<f32>(0.5, 0.5), 0.0, 1.0)
vec4<f32>(pos + pos_snap - vec2<f32>(0.5, 0.5), 0.0, 1.0)
);
out.position = globals.transform * transform * vec4<f32>(vertex_position(input.vertex_index), 0.0, 1.0);
@ -55,7 +64,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<f32>(pos, scale);
out.position_and_scale = vec4<f32>(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;

View file

@ -9,6 +9,7 @@ struct SolidVertexInput {
@location(6) shadow_color: vec4<f32>,
@location(7) shadow_offset: vec2<f32>,
@location(8) shadow_blur_radius: f32,
@location(9) snap: u32,
}
struct SolidVertexOutput {
@ -30,14 +31,13 @@ fn solid_vs_main(input: SolidVertexInput) -> SolidVertexOutput {
var pos: vec2<f32> = (input.pos + min(input.shadow_offset, vec2<f32>(0.0, 0.0)) - input.shadow_blur_radius) * globals.scale;
var scale: vec2<f32> = (input.scale + vec2<f32>(abs(input.shadow_offset.x), abs(input.shadow_offset.y)) + input.shadow_blur_radius * 2.0) * globals.scale;
var snap: vec2<f32> = vec2<f32>(0.0, 0.0);
if input.scale.x == 1.0 {
snap.x = round(pos.x) - pos.x;
}
var pos_snap = vec2<f32>(0.0, 0.0);
var scale_snap = vec2<f32>(0.0, 0.0);
if input.scale.y == 1.0 {
snap.y = round(pos.y) - pos.y;
if bool(input.snap) {
pos_snap = round(pos + vec2(0.001, 0.001)) - pos;
scale_snap = round(pos + scale + vec2(0.001, 0.001)) - pos - pos_snap - scale;
}
var min_border_radius = min(input.scale.x, input.scale.y) * 0.5;
@ -49,17 +49,17 @@ fn solid_vs_main(input: SolidVertexInput) -> SolidVertexOutput {
);
var transform: mat4x4<f32> = mat4x4<f32>(
vec4<f32>(scale.x + 1.0, 0.0, 0.0, 0.0),
vec4<f32>(0.0, scale.y + 1.0, 0.0, 0.0),
vec4<f32>(scale.x + scale_snap.x + 1.0, 0.0, 0.0, 0.0),
vec4<f32>(0.0, scale.y + scale_snap.y + 1.0, 0.0, 0.0),
vec4<f32>(0.0, 0.0, 1.0, 0.0),
vec4<f32>(pos - vec2<f32>(0.5, 0.5) + snap, 0.0, 1.0)
vec4<f32>(pos + pos_snap - vec2<f32>(0.5, 0.5), 0.0, 1.0)
);
out.position = globals.transform * transform * vec4<f32>(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);