T12c Data Display: Carousel, Gallery, BeforeAfter, Watermark (review pending: codex 401)

src/data_display/watermark.rs

@@ -0,0 +1,88 @@
+use gpui::{
+    AnyElement, App, Div, ElementId, IntoElement, ParentElement, Pixels, RenderOnce, SharedString,
+    Size, StyleRefinement, Styled, Window, canvas, div, prelude::*,
+};
+
+use crate::theme::{ActiveTheme, TextSize};
+
+/// Faint text over its content, repeated in level rows, every other row shifted half a tile. gpui draws text upright, so the tiles do not tilt. Presses pass through to the content.
+#[derive(IntoElement)]
+pub struct Watermark {
+    id: ElementId,
+    text: SharedString,
+    base: Div,
+}
+
+impl Watermark {
+    pub fn new(id: impl Into<ElementId>, text: impl Into<SharedString>) -> Self {
+        Self {
+            id: id.into(),
+            text: text.into(),
+            base: div(),
+        }
+    }
+}
+
+impl Styled for Watermark {
+    fn style(&mut self) -> &mut StyleRefinement {
+        self.base.style()
+    }
+}
+
+impl ParentElement for Watermark {
+    fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
+        self.base.extend(elements);
+    }
+}
+
+impl RenderOnce for Watermark {
+    fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
+        let area = window.use_keyed_state(self.id, cx, |_, _| Size::<Pixels>::default());
+        let room = *area.read(cx);
+        let theme = cx.theme();
+        let rem = window.rem_size();
+        let tile = theme.watermark_tile();
+        let (wide, tall) = (tile.width.to_pixels(rem), tile.height.to_pixels(rem));
+        let columns = (room.width / wide).ceil() as usize + 1;
+        let rows = (room.height / tall).ceil() as usize;
+        let text = self.text;
+        let layer = div()
+            .absolute()
+            .inset_0()
+            .overflow_hidden()
+            .text_size(theme.text_size(TextSize::Sm))
+            .text_color(theme.colors.fg.opacity(0.07))
+            .children((0..rows).map(|row| {
+                div()
+                    .flex()
+                    .when(row % 2 == 1, |row| row.ml(wide * -0.5))
+                    .children((0..columns).map(|_| {
+                        div()
+                            .flex_none()
+                            .flex()
+                            .items_center()
+                            .justify_center()
+                            .w(wide)
+                            .h(tall)
+                            .whitespace_nowrap()
+                            .child(text.clone())
+                    }))
+            }));
+        self.base.relative().child(layer).child(
+            canvas(
+                move |bounds, window, cx| {
+                    if *area.read(cx) != bounds.size {
+                        area.update(cx, |area, cx| {
+                            *area = bounds.size;
+                            cx.notify();
+                        });
+                        window.request_animation_frame();
+                    }
+                },
+                |_, _, _, _| {},
+            )
+            .absolute()
+            .inset_0(),
+        )
+    }
+}