blockworx_canvas2d/

replay.rs

//! A display list, drawn.
//!
//! [`DrawOp`]s arrive in screen space with every swatch resolved and every
//! font at the size it is drawn, so replaying one is a translation into
//! `Canvas2D` calls and nothing more. Text arrives as rows the recorder laid
//! out; the browser sets each row, in the bundled face the page was handed
//! ([`Faces`]). What else a mark needs from the host is its images, which the
//! registry was handed the bytes for when they arrived in a hand-off.

use blockworx_geom::{Angle, Pos2, Rect};
use blockworx_paint::text::TextRow;
use blockworx_paint::{Color, DrawOp, FontChoice, record::Stroke};
use web_sys::CanvasRenderingContext2d;

use crate::color::Swatches;
use crate::faces::{self, Faces, Ready};
use crate::images::Images;

/// Whether the frame just drawn is the whole diagram, or whether something it
/// named was not ready and another frame is owed once it is.
#[derive(Clone, Copy, PartialEq, Eq, Debug, Default)]
pub enum Repaint {
    #[default]
    Settled,
    Owed,
}

impl Repaint {
    /// Both answers over one frame: a single mark that owes a frame owes it
    /// for the whole list.
    #[must_use]
    pub fn and(self, other: Self) -> Self {
        if self == Self::Owed || other == Self::Owed {
            Self::Owed
        } else {
            Self::Settled
        }
    }
}

/// Draw `draw_list` onto `ctx`, in order, in CSS pixels.
pub fn replay(
    draw_list: &[DrawOp],
    ctx: &CanvasRenderingContext2d,
    images: &Images,
    faces: &Faces,
    typeface: FontChoice,
) -> Repaint {
    let swatches = Swatches::default();
    let ready = faces.ready(typeface);
    // Wires and polylines are drawn as open paths; the app's own joins are
    // round everywhere, and this is the only place the context is told so.
    ctx.set_line_join("round");
    ctx.set_line_cap("round");
    let mut owed = Repaint::Settled;
    for op in draw_list {
        match op {
            DrawOp::Rect {
                rect,
                rounding,
                fill,
                stroke,
            } => {
                ctx.begin_path();
                outline_rect(ctx, *rect, *rounding);
                paint(ctx, &swatches, *fill, *stroke);
            }
            DrawOp::LineSegment { points, stroke } => {
                ctx.begin_path();
                ctx.move_to(points[0].x.into(), points[0].y.into());
                ctx.line_to(points[1].x.into(), points[1].y.into());
                paint(ctx, &swatches, Color::TRANSPARENT, *stroke);
            }
            DrawOp::Line { points, stroke } => {
                ctx.begin_path();
                polyline(ctx, points);
                paint(ctx, &swatches, Color::TRANSPARENT, *stroke);
            }
            DrawOp::Circle {
                center,
                radius,
                fill,
                stroke,
            } => {
                ctx.begin_path();
                let _ = ctx.arc(
                    center.x.into(),
                    center.y.into(),
                    f64::from(radius.max(0.0)),
                    0.0,
                    std::f64::consts::TAU,
                );
                paint(ctx, &swatches, *fill, *stroke);
            }
            DrawOp::ConvexPolygon {
                points,
                fill,
                stroke,
            } => {
                ctx.begin_path();
                polyline(ctx, points);
                ctx.close_path();
                paint(ctx, &swatches, *fill, *stroke);
            }
            DrawOp::Text {
                rows,
                font,
                color,
                angle,
                ..
            } => match ready {
                Ready::Yes => {
                    if color.a() > 0 {
                        ctx.set_font(&faces::css(typeface, font.size));
                        ctx.set_fill_style_str(&swatches.css(*color));
                        for row in rows {
                            text_row(ctx, row, *angle);
                        }
                    }
                }
                // A face loaded from bytes arrives a moment after the page
                // does; a row set before then would be set in another face.
                Ready::NotYet => owed = Repaint::Owed,
                Ready::Never => {}
            },
            DrawOp::Image { rect, hash } => owed = owed.and(images.draw(ctx, *rect, *hash)),
        }
    }
    owed
}

/// Fill then outline the path already built on `ctx`. A transparent swatch is
/// no fill, and a stroke with no width or no colour is no outline — the same
/// two nothings the egui backend's strokes collapse to.
fn paint(ctx: &CanvasRenderingContext2d, swatches: &Swatches, fill: Color, stroke: Stroke) {
    if fill.a() > 0 {
        ctx.set_fill_style_str(&swatches.css(fill));
        ctx.fill();
    }
    if stroke.width > 0.0 && stroke.color.a() > 0 {
        ctx.set_line_width(stroke.width.into());
        ctx.set_stroke_style_str(&swatches.css(stroke.color));
        ctx.stroke();
    }
}

/// A rect, rounded where the display list asks for it. `roundRect` is a
/// recent addition to the API, so a browser without it falls back to arcs.
fn outline_rect(ctx: &CanvasRenderingContext2d, rect: Rect, rounding: f32) {
    let (x, y, w, h) = (
        f64::from(rect.min.x),
        f64::from(rect.min.y),
        f64::from(rect.width()),
        f64::from(rect.height()),
    );
    let radius = f64::from(rounding.max(0.0))
        .min(w.abs() / 2.0)
        .min(h.abs() / 2.0);
    if radius <= 0.0 {
        ctx.rect(x, y, w, h);
    } else if ctx.round_rect_with_f64(x, y, w, h, radius).is_err() {
        ctx.move_to(x + radius, y);
        let _ = ctx.arc_to(x + w, y, x + w, y + h, radius);
        let _ = ctx.arc_to(x + w, y + h, x, y + h, radius);
        let _ = ctx.arc_to(x, y + h, x, y, radius);
        let _ = ctx.arc_to(x, y, x + w, y, radius);
        ctx.close_path();
    }
}

fn polyline(ctx: &CanvasRenderingContext2d, points: &[Pos2]) {
    let mut points = points.iter();
    let Some(first) = points.next() else {
        return;
    };
    ctx.move_to(first.x.into(), first.y.into());
    for point in points {
        ctx.line_to(point.x.into(), point.y.into());
    }
}

/// One row set by the browser in the face, from its pen along its baseline
/// and turned by `angle` about the pen. The row is the recorder's; only the
/// glyphs within it are the browser's to place.
fn text_row(ctx: &CanvasRenderingContext2d, row: &TextRow, angle: Angle) {
    ctx.save();
    // `translate` and `rotate` multiply rather than replace: the context
    // already carries the device-pixel-ratio scale `fit` put on it.
    let _ = ctx.translate(row.pen.x.into(), row.pen.y.into());
    if angle != Angle::ZERO {
        let _ = ctx.rotate(f32::from(angle).into());
    }
    let _ = ctx.fill_text(&row.text, 0.0, 0.0);
    ctx.restore();
}

#[cfg(test)]
mod tests {
    use super::*;

    #[test]
    fn one_mark_that_is_not_ready_owes_the_whole_frame_a_repaint() {
        assert_eq!(Repaint::Settled.and(Repaint::Settled), Repaint::Settled);
        assert_eq!(Repaint::Settled.and(Repaint::Owed), Repaint::Owed);
        assert_eq!(Repaint::Owed.and(Repaint::Settled), Repaint::Owed);
        assert_eq!(Repaint::default(), Repaint::Settled);
    }
}