Skip to content

image_viewer: Use checkerboard from GPUI #49575

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Anthony-Eid merged 2 commits into from
Feb 24, 2026
Merged

image_viewer: Use checkerboard from GPUI #49575

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
221fba4
image_viewer: use checkerboard from gpui
MostlyKIGuess Feb 19, 2026
188f8e2
change base sq size
MostlyKIGuess Feb 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 13 additions & 49 deletions crates/image_viewer/src/image_viewer.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ use gpui::{
FocusHandle, Focusable, GlobalElementId, InspectorElementId, InteractiveElement, IntoElement,
LayoutId, MouseButton, MouseDownEvent, MouseMoveEvent, MouseUpEvent, ParentElement, Pixels,
Point, Render, ScrollDelta, ScrollWheelEvent, Style, Styled, Task, WeakEntity, Window, actions,
canvas, div, img, opaque_grey, point, px, size,
checkerboard, div, img, point, px, size,
};
use language::File as _;
use persistence::IMAGE_VIEWER;
Expand Down Expand Up @@ -50,7 +50,7 @@ const MIN_ZOOM: f32 = 0.1;
const MAX_ZOOM: f32 = 20.0;
const ZOOM_STEP: f32 = 1.1;
const SCROLL_LINE_MULTIPLIER: f32 = 20.0;
const BASE_SQUARE_SIZE: f32 = 48.0;
const BASE_SQUARE_SIZE: f32 = 32.0;

pub struct ImageView {
image_item: Entity<ImageItem>,
Expand Down Expand Up @@ -378,53 +378,17 @@ impl Element for ImageContentElement {
.w(scaled_width)
.h(scaled_height)
.child(
canvas(
|_, _, _| {},
move |bounds, _, window, _cx| {
let bounds_x: f32 = bounds.origin.x.into();
let bounds_y: f32 = bounds.origin.y.into();
let bounds_width: f32 = bounds.size.width.into();
let bounds_height: f32 = bounds.size.height.into();
let square_size = BASE_SQUARE_SIZE * zoom_level;
let cols = (bounds_width / square_size).ceil() as i32 + 1;
let rows = (bounds_height / square_size).ceil() as i32 + 1;
for row in 0..rows {
for col in 0..cols {
if (row + col) % 2 == 0 {
continue;
}
let x = bounds_x + col as f32 * square_size;
let y = bounds_y + row as f32 * square_size;
let w = square_size.min(bounds_x + bounds_width - x);
let h = square_size.min(bounds_y + bounds_height - y);
if w > 0.0 && h > 0.0 {
let rect = Bounds::new(
point(px(x), px(y)),
size(px(w), px(h)),
);
window.paint_quad(gpui::fill(
rect,
opaque_grey(0.6, 1.0),
));
}
}
}
let border_rect = Bounds::new(
point(px(bounds_x), px(bounds_y)),
size(px(bounds_width), px(bounds_height)),
);
window.paint_quad(gpui::outline(
border_rect,
border_color,
gpui::BorderStyle::default(),
));
},
)
.size_full()
.absolute()
.top_0()
.left_0()
.bg(gpui::rgb(0xCCCCCD)),
div()
.size_full()
.absolute()
.top_0()
.left_0()
.child(div().size_full().bg(checkerboard(
cx.theme().colors().panel_background,
BASE_SQUARE_SIZE * zoom_level,
)))
.border_1()
.border_color(border_color),
)
.child({
img(image)
Expand Down