ZacharyZhang-NY
9ed801b67d
A new chapter, src/media. ImageViewer fits a picture to its stage and zooms by the document steps, by keys, buttons and Cmd-scroll about the pointer; a drag through gpui's drag, a scroll or the arrows pan it once it overhangs; R turns it a quarter at a time. gpui paints pictures without a transform, so media::turn turns the decoded frames off the main thread, an asset keyed by the picture and the turn; `image` 0.25, which gpui already decodes with, is now a dependency. ImageThumbnail shows a picture in its own shape with a corner label and a ring when chosen, and is a Tab stop only with a handler. Lightbox / Gallery Viewer points to overlays::Lightbox, which the gallery opens from the thumbnails. T26 splits into T26a–e. AGENTS.md: the drag rule says drags that pan, turn or slide go through gpui's drag; pictures turn by their pixels.
107 lines
3.4 KiB
Rust
107 lines
3.4 KiB
Rust
use std::rc::Rc;
|
|
|
|
use gpui::{
|
|
App, ElementId, ImageSource, InteractiveElement, IntoElement, MouseButton, ParentElement,
|
|
RenderOnce, SharedString, StatefulInteractiveElement, Styled, Window, div, prelude::*,
|
|
transparent_black,
|
|
};
|
|
|
|
use crate::{
|
|
forms::Run,
|
|
primitives::{FocusRing, Image, checked_ratio, framed},
|
|
theme::{ActiveTheme, Radius, TextSize},
|
|
typography::tabular,
|
|
};
|
|
|
|
/// A picture in its own shape, taken from the host, as wide as its box: a shimmer while it loads, a mark if it fails, and a short label in a corner when given, such as a length or a count. Chosen, an accent ring holds it; with `on_click` it is a Tab stop.
|
|
#[derive(IntoElement)]
|
|
pub struct ImageThumbnail {
|
|
id: ElementId,
|
|
source: ImageSource,
|
|
ratio: f32,
|
|
label: Option<SharedString>,
|
|
selected: bool,
|
|
on_click: Option<Run>,
|
|
}
|
|
|
|
impl ImageThumbnail {
|
|
/// `ratio` is the picture's width over its height.
|
|
pub fn new(id: impl Into<ElementId>, source: impl Into<ImageSource>, ratio: f32) -> Self {
|
|
Self {
|
|
id: id.into(),
|
|
source: source.into(),
|
|
ratio: checked_ratio(ratio),
|
|
label: None,
|
|
selected: false,
|
|
on_click: None,
|
|
}
|
|
}
|
|
|
|
/// A few words in the corner, such as "0:42" or "+3".
|
|
pub fn label(mut self, label: impl Into<SharedString>) -> Self {
|
|
self.label = Some(label.into());
|
|
self
|
|
}
|
|
|
|
pub fn selected(mut self, selected: bool) -> Self {
|
|
self.selected = selected;
|
|
self
|
|
}
|
|
|
|
pub fn on_click(mut self, handler: impl Fn(&mut Window, &mut App) + 'static) -> Self {
|
|
self.on_click = Some(Rc::new(handler));
|
|
self
|
|
}
|
|
}
|
|
|
|
impl RenderOnce for ImageThumbnail {
|
|
fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
|
|
let theme = cx.theme();
|
|
let colors = &theme.colors;
|
|
let (outer, inner) = (theme.radius(Radius::Md), theme.radius(Radius::Sm));
|
|
let label = self.label.map(|label| {
|
|
tabular(div())
|
|
.absolute()
|
|
.right_1()
|
|
.bottom_1()
|
|
.px_1p5()
|
|
.rounded(inner)
|
|
.bg(colors.media_backdrop.alpha(0.7))
|
|
.text_size(theme.text_size(TextSize::Xs))
|
|
.text_color(colors.on_media)
|
|
.child(label)
|
|
});
|
|
let picture = framed(self.ratio, cx)
|
|
.rounded(inner)
|
|
.child(
|
|
Image::new((self.id.clone(), "picture"), self.source)
|
|
.size_full()
|
|
.rounded(inner),
|
|
)
|
|
.children(label);
|
|
div()
|
|
.id(self.id)
|
|
.w_full()
|
|
.rounded(outer)
|
|
.border_1()
|
|
.border_color(if self.selected {
|
|
colors.accent
|
|
} else {
|
|
transparent_black()
|
|
})
|
|
.p_0p5()
|
|
.when_some(self.on_click, |thumb, click| {
|
|
thumb
|
|
.tab_index(0)
|
|
.focus_ring(cx)
|
|
.cursor_pointer()
|
|
.on_mouse_down(MouseButton::Left, |_, window, _| window.prevent_default())
|
|
.on_click(move |_, window, cx| {
|
|
log::info!("image thumbnail: opened");
|
|
click(window, cx)
|
|
})
|
|
})
|
|
.child(picture)
|
|
}
|
|
}
|