gitj 0.3.0

A gitk-style, Windows 3.1-flavored git repository browser and commit helper built on the Saudade toolkit
Documentation
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
//! A graphical image-diff pane.
//!
//! Shown in place of [`DiffView`](crate::widgets::DiffView) when the selected
//! file is a raster image (see [`crate::imagediff::is_image_path`]). It decodes
//! the two sides and offers the same comparison modes as the author's `imgap`
//! CLI — 2-up, swipe, onion skin, difference, and single left/right — selected
//! from a row of buttons along the bottom, with a slider driving the swipe /
//! onion-skin position. The image floats on the same sunken white field the
//! text diff uses, over a transparency checkerboard.
//!
//! Like [`DiffView`] this is a self-contained widget: it embeds no child
//! widgets, hand-drawing its buttons and slider and tracking their hit-rects,
//! so the cross-pane wiring in [`crate::ui`] stays simple.

use saudade::{Color, Event, EventCtx, MouseButton, Painter, Point, Rect, Theme, Widget};

use crate::imagediff::{CompareMode, ImageComparison};

const PAD: i32 = 4;
/// Height of the metadata line along the top.
const META_H: i32 = 18;
/// Height of the mode-button row along the bottom.
const BTN_H: i32 = 22;
/// Height of the slider row above the buttons (present only for slider modes).
const SLIDER_H: i32 = 16;
/// Gap between adjacent mode buttons.
const BTN_GAP: i32 = 3;

/// Backdrop behind the centered image (the letterbox area). Matches the field
/// so an aspect-fit image just floats on white.
const LETTERBOX: Color = Color::WHITE;
const META_FG: Color = Color::rgb(0x40, 0x40, 0x40);
/// Filled portion of the slider trough.
const SLIDER_FILL: Color = Color::rgb(0x00, 0x00, 0x80);

/// A graphical comparison of the two versions of an image file.
pub struct ImageDiffView {
    rect: Rect,
    comparison: Option<ImageComparison>,
    mode: CompareMode,
    /// The comparison mode to return to from a single-image view (the `s` key).
    last_compare_mode: CompareMode,
    /// Swipe / onion-skin position, 0..1.
    slider: f32,
    font_size: f32,
    /// Mode-button hit-rects from the last paint, for event hit-testing.
    button_rects: Vec<(CompareMode, Rect)>,
    dragging_slider: bool,
    /// A drag on the image body is steering the slider (swipe / onion modes).
    dragging_image: bool,
}

impl ImageDiffView {
    pub fn new(rect: Rect) -> Self {
        Self {
            rect,
            comparison: None,
            mode: CompareMode::TwoUp,
            last_compare_mode: CompareMode::TwoUp,
            slider: 0.5,
            font_size: 12.0,
            button_rects: Vec::new(),
            dragging_slider: false,
            dragging_image: false,
        }
    }

    pub fn with_font_size(mut self, size: f32) -> Self {
        self.font_size = size;
        self
    }

    /// Show `comparison` (or clear the pane with `None`). The chosen mode and
    /// slider position persist across files, matching the comparison the user
    /// last picked.
    pub fn set_comparison(&mut self, comparison: Option<ImageComparison>) {
        self.comparison = comparison;
        self.dragging_slider = false;
        self.dragging_image = false;
    }

    pub fn is_empty(&self) -> bool {
        self.comparison.is_none()
    }

    /// The currently selected comparison mode (exposed for tests).
    #[cfg(test)]
    pub fn mode(&self) -> CompareMode {
        self.mode
    }

    /// The current slider position (exposed for tests).
    #[cfg(test)]
    pub fn slider(&self) -> f32 {
        self.slider
    }

    /// The sunken field, inset one pixel inside the border.
    fn field(&self) -> Rect {
        self.rect
    }

    fn inner(&self) -> Rect {
        self.field().inset(PAD)
    }

    /// Height the control strip occupies (buttons, plus the slider row for
    /// slider modes).
    fn controls_h(&self) -> i32 {
        if self.mode.uses_slider() {
            BTN_H + SLIDER_H + PAD
        } else {
            BTN_H
        }
    }

    /// The metadata line along the top.
    fn meta_rect(&self) -> Rect {
        let inner = self.inner();
        Rect::new(inner.x, inner.y, inner.w, META_H)
    }

    /// The area the composed image is centered in.
    fn image_area(&self) -> Rect {
        let inner = self.inner();
        let top = inner.y + META_H + PAD;
        let bottom = inner.bottom() - self.controls_h() - PAD;
        Rect::new(inner.x, top, inner.w, (bottom - top).max(0))
    }

    /// The slider trough rect (valid only in slider modes).
    fn slider_track(&self) -> Rect {
        let inner = self.inner();
        let y = inner.bottom() - BTN_H - PAD - SLIDER_H;
        // Leave room for a trailing percentage readout.
        let pct_w = 40;
        Rect::new(
            inner.x,
            y + (SLIDER_H - 6) / 2,
            (inner.w - pct_w).max(10),
            6,
        )
    }

    /// A generous hit band around the slider trough (covering the thumb, which
    /// overhangs it), so the slider is easy to grab. Shares the trough's `x` and
    /// width, so mapping an x coordinate over it matches the drawn thumb.
    fn slider_hit(&self) -> Rect {
        let t = self.slider_track();
        Rect::new(t.x, t.y - 6, t.w, t.h + 12)
    }

    /// The mode-button row along the bottom.
    fn button_row(&self) -> Rect {
        let inner = self.inner();
        Rect::new(inner.x, inner.bottom() - BTN_H, inner.w, BTN_H)
    }

    /// Map an x coordinate within `track` to a 0..1 slider value.
    fn value_at(track: Rect, x: i32) -> f32 {
        if track.w <= 1 {
            return 0.0;
        }
        ((x - track.x) as f32 / track.w as f32).clamp(0.0, 1.0)
    }

    /// Switch to a comparison mode, remembering it as the one to restore from a
    /// single-image view.
    fn select_mode(&mut self, mode: CompareMode) {
        self.mode = mode;
        if !mode.is_single() {
            self.last_compare_mode = mode;
        }
    }

    /// Cycle to the next comparison mode — the View ▸ Switch Mode action
    /// (Ctrl+M). The single-image views cycle back to 2-Up.
    pub fn cycle_mode(&mut self) {
        self.select_mode(self.mode.next());
    }

    /// Show just the "before" (old) or "after" (new) image at full size — the
    /// View ▸ Before / After Image actions (Ctrl+Left / Ctrl+Right).
    pub fn show_side(&mut self, before: bool) {
        self.select_mode(if before {
            CompareMode::Left
        } else {
            CompareMode::Right
        });
    }

    /// Handle a press at `pos`; returns whether it was consumed.
    fn press(&mut self, pos: Point) -> bool {
        if let Some((mode, _)) = self
            .button_rects
            .iter()
            .find(|(_, r)| r.contains(pos))
            .copied()
        {
            self.select_mode(mode);
            return true;
        }
        if self.mode.uses_slider() {
            let track = self.slider_hit();
            if track.contains(pos) {
                self.slider = Self::value_at(track, pos.x);
                self.dragging_slider = true;
                return true;
            }
            let area = self.image_area();
            if area.contains(pos) {
                self.slider = Self::value_at(area, pos.x);
                self.dragging_image = true;
                return true;
            }
        }
        false
    }

    fn paint_meta(&self, painter: &mut Painter) {
        let Some(cmp) = &self.comparison else {
            return;
        };
        let meta = cmp.meta();
        if meta.is_empty() {
            return;
        }
        let r = self.meta_rect();
        let y = r.y + (r.h - self.font_size as i32) / 2 - 1;
        painter.text(r.x, y, meta, self.font_size, META_FG);
    }

    /// Blit the composed comparison, centered in the image area.
    fn paint_image(&mut self, painter: &mut Painter) {
        let area = self.image_area();
        painter.fill_rect(area, LETTERBOX);
        if area.w <= 0 || area.h <= 0 {
            return;
        }
        let Some(cmp) = &mut self.comparison else {
            return;
        };
        let canvas = cmp.render(self.mode, self.slider, area.w as u32, area.h as u32);
        if canvas.w == 0 || canvas.h == 0 {
            return;
        }
        let ox = area.x + (area.w - canvas.w as i32) / 2;
        let oy = area.y + (area.h - canvas.h as i32) / 2;
        // One bulk blit rather than a `pixel()` call per pixel: the composed
        // canvas is opaque, so it goes straight into the framebuffer with the
        // logical→physical snap done once per row/column instead of per pixel.
        let saved = painter.push_clip(area);
        painter.blit_argb(ox, oy, canvas.w, canvas.h, &canvas.argb);
        painter.restore_clip(saved);
    }

    fn paint_slider(&self, painter: &mut Painter, theme: &Theme) {
        if !self.mode.uses_slider() {
            return;
        }
        let track = self.slider_track();
        painter.fill_rect(track, Color::WHITE);
        painter.sunken_bevel(track, theme.highlight, theme.shadow);
        painter.stroke_rect(track, theme.border);
        // Filled portion up to the thumb.
        let fill_w = ((track.w - 2) as f32 * self.slider) as i32;
        if fill_w > 0 {
            painter.fill_rect(
                Rect::new(track.x + 1, track.y + 1, fill_w, track.h - 2),
                SLIDER_FILL,
            );
        }
        // Thumb.
        let thumb_w = 8;
        let tx = track.x + ((track.w - thumb_w) as f32 * self.slider) as i32;
        let thumb = Rect::new(tx, track.y - 4, thumb_w, track.h + 8);
        painter.button(thumb, theme, false, false);
        // Percentage readout.
        let pct = format!("{:>3}%", (self.slider * 100.0).round() as i32);
        let pr = Rect::new(track.right() + PAD, track.y - 5, 36, 16);
        painter.text_centered(pr, &pct, self.font_size - 1.0, META_FG);
    }

    fn paint_buttons(&mut self, painter: &mut Painter, theme: &Theme) {
        self.button_rects.clear();
        let row = self.button_row();
        let mut x = row.x;
        for mode in CompareMode::ALL {
            let label = mode.label();
            let w = painter.measure_text(label, self.font_size).w + 14;
            let brect = Rect::new(x, row.y, w, BTN_H);
            let active = mode == self.mode;
            painter.button(brect, theme, active, false);
            let label_rect = if active {
                Rect::new(brect.x + 1, brect.y + 1, brect.w, brect.h)
            } else {
                brect
            };
            painter.text_centered(label_rect, label, self.font_size, theme.text);
            self.button_rects.push((mode, brect));
            x += w + BTN_GAP;
        }
    }
}

impl Widget for ImageDiffView {
    fn bounds(&self) -> Rect {
        self.rect
    }

    fn paint(&mut self, painter: &mut Painter, theme: &Theme) {
        let field = self.field();
        painter.fill_rect(field, Color::WHITE);
        painter.sunken_bevel(field, theme.highlight, theme.shadow);
        painter.stroke_rect(field, theme.border);

        let saved = painter.push_clip(field.inset(1));
        self.paint_meta(painter);
        self.paint_image(painter);
        self.paint_slider(painter, theme);
        self.paint_buttons(painter, theme);
        painter.restore_clip(saved);
    }

    fn event(&mut self, event: &Event, ctx: &mut EventCtx) {
        match event {
            Event::PointerDown {
                pos,
                button: MouseButton::Left,
                ..
            } => {
                ctx.request_focus();
                if self.press(*pos) {
                    ctx.request_paint();
                }
            }
            Event::PointerMove { pos } if self.dragging_slider => {
                self.slider = Self::value_at(self.slider_hit(), pos.x);
                ctx.request_paint();
            }
            Event::PointerMove { pos } if self.dragging_image => {
                self.slider = Self::value_at(self.image_area(), pos.x);
                ctx.request_paint();
            }
            Event::PointerUp {
                button: MouseButton::Left,
                ..
            } if self.dragging_slider || self.dragging_image => {
                self.dragging_slider = false;
                self.dragging_image = false;
                ctx.request_paint();
            }
            // Keyboard control is driven from the View menu's accelerators
            // (Ctrl+M / Ctrl+Left / Ctrl+Right) via [`Self::cycle_mode`] /
            // [`Self::show_side`], handled application-side in [`crate::ui`], not
            // here — so the bare m/s/arrow keys are intentionally not bound.
            _ => {}
        }
    }

    fn captures_pointer(&self) -> bool {
        self.dragging_slider || self.dragging_image
    }

    fn focusable(&self) -> bool {
        true
    }

    fn set_focused(&mut self, _focused: bool) {
        // No focus-dependent state: keyboard control comes from the View menu's
        // accelerators (see [`crate::ui`]), not from this widget owning focus.
    }

    fn layout(&mut self, bounds: Rect) {
        self.rect = bounds;
    }
}

#[cfg(test)]
mod tests {
    use super::*;
    use crate::backend::BlobPair;
    use crate::imagediff::ImageComparison;
    use saudade::mock::MockBackend;
    use saudade::{Modifiers, Point};

    const W: i32 = 480;
    const H: i32 = 320;

    fn png(w: u32, h: u32, color: [u8; 4]) -> Vec<u8> {
        let img = image::RgbaImage::from_pixel(w, h, image::Rgba(color));
        let mut bytes = Vec::new();
        image::DynamicImage::ImageRgba8(img)
            .write_to(
                &mut std::io::Cursor::new(&mut bytes),
                image::ImageFormat::Png,
            )
            .unwrap();
        bytes
    }

    fn view() -> (MockBackend, ImageDiffView) {
        let be = MockBackend::new(W, H).with_scale(1.0);
        let mut v = ImageDiffView::new(Rect::new(0, 0, W, H));
        v.set_focused(true);
        let cmp = ImageComparison::from_blobs(&BlobPair {
            old: Some(png(16, 16, [255, 0, 0, 255])),
            new: Some(png(16, 16, [0, 0, 255, 255])),
        });
        v.set_comparison(cmp);
        v.layout(Rect::new(0, 0, W, H));
        let _ = be.render(&mut v);
        (be, v)
    }

    #[test]
    fn clicking_a_mode_button_selects_it() {
        let (be, mut v) = view();
        // Find the "Diff" (difference) button rect placed at paint.
        let (_, rect) = v
            .button_rects
            .iter()
            .find(|(m, _)| *m == CompareMode::Difference)
            .copied()
            .expect("difference button laid out");
        let center = Point::new(rect.x + rect.w / 2, rect.y + rect.h / 2);
        be.dispatch(
            &mut v,
            &Event::PointerDown {
                pos: center,
                button: MouseButton::Left,
                modifiers: Modifiers::default(),
            },
        );
        assert_eq!(v.mode(), CompareMode::Difference);
    }

    #[test]
    fn cycle_mode_and_show_side() {
        let (_be, mut v) = view();
        assert_eq!(v.mode(), CompareMode::TwoUp);
        v.cycle_mode();
        assert_eq!(v.mode(), CompareMode::Swipe);
        v.cycle_mode();
        assert_eq!(v.mode(), CompareMode::Onion);
        // Before / after jump straight to the single-image views…
        v.show_side(true);
        assert_eq!(v.mode(), CompareMode::Left);
        v.show_side(false);
        assert_eq!(v.mode(), CompareMode::Right);
        // …and cycling out of a single view returns to the comparison set.
        v.cycle_mode();
        assert_eq!(v.mode(), CompareMode::TwoUp);
    }

    #[test]
    fn dragging_the_slider_moves_it() {
        let (be, mut v) = view();
        v.cycle_mode(); // -> Swipe, which uses the slider
        assert_eq!(v.mode(), CompareMode::Swipe);

        let hit = v.slider_hit();
        let cy = hit.y + hit.h / 2;
        let press = |x: i32| Event::PointerDown {
            pos: Point::new(x, cy),
            button: MouseButton::Left,
            modifiers: Modifiers::default(),
        };

        // Press near the right end: the value jumps high and the drag captures.
        be.dispatch(&mut v, &press(hit.x + hit.w - 1));
        assert!(v.slider() > 0.9, "press near the right sets a high value");
        assert!(v.captures_pointer(), "the slider drag captures the pointer");

        // Drag back to the left: the value follows the pointer down.
        be.dispatch(
            &mut v,
            &Event::PointerMove {
                pos: Point::new(hit.x + 1, cy),
            },
        );
        assert!(v.slider() < 0.1, "dragging left lowers the value");

        // Releasing ends the drag.
        be.dispatch(
            &mut v,
            &Event::PointerUp {
                pos: Point::new(hit.x + 1, cy),
                button: MouseButton::Left,
                modifiers: Modifiers::default(),
            },
        );
        assert!(!v.captures_pointer());
    }
}