@reekon-tools/boldr-utils 1.21.1 → 1.23.0

package/dist/export/pdf/fonts.js

@@ -0,0 +1,85 @@
+// Text for the exporter: one embedded primary face (the apps' tile font) plus
+// a standard-14 fallback for the glyphs it lacks. Metropolis Bold, for one,
+// has no `°` — and an angle tile is nothing without it.
+import { StandardFonts, degrees, drawText, } from 'pdf-lib';
+import fontkit from '@pdf-lib/fontkit';
+import { parseHexColor } from './color.js';
+import { uprightAt, withMatrix } from './emit.js';
+const codePointsOf = (text) => Array.from(text, (ch) => ch.codePointAt(0));
+export class PdfFonts {
+    constructor(primary, fallback) {
+        this.primary = primary;
+        this.fallback = fallback;
+    }
+    static async create(doc, primaryBytes) {
+        doc.registerFontkit(fontkit);
+        // NOT subset: fontkit's CFF subsetter throws on this face ("value" argument out of
+        // bounds in CFFSubset.encode), and the whole file is ~24 KB anyway.
+        const primary = await doc.embedFont(primaryBytes, { subset: false });
+        const fallback = await doc.embedStandardFont(StandardFonts.HelveticaBold);
+        return new PdfFonts(primary, fallback);
+    }
+    /** Whether the primary face has a glyph for every code point of `text`. */
+    primaryCovers(text) {
+        const fk = this.primary.embedder?.font;
+        if (!fk?.hasGlyphForCodePoint)
+            return true;
+        return codePointsOf(text).every((cp) => cp === 0x20 || fk.hasGlyphForCodePoint(cp));
+    }
+    /** Drop the code points the standard fallback cannot encode. */
+    fallbackUsable(text) {
+        const enc = this.fallback.embedder?.encoding;
+        if (!enc?.canEncodeUnicodeCodePoint)
+            return text;
+        return Array.from(text)
+            .filter((ch) => enc.canEncodeUnicodeCodePoint(ch.codePointAt(0)))
+            .join('');
+    }
+    /**
+     * The face to draw `text` with and the text it can actually show. The
+     * primary wins when it covers every glyph; otherwise the fallback, minus
+     * anything even it cannot encode. `dropped` is true when glyphs were lost.
+     */
+    pick(text) {
+        if (this.primaryCovers(text)) {
+            return { font: this.primary, text, dropped: false };
+        }
+        const usable = this.fallbackUsable(text);
+        return { font: this.fallback, text: usable, dropped: usable !== text };
+    }
+    width(text, size) {
+        const p = this.pick(text);
+        return p.text ? p.font.widthOfTextAtSize(p.text, size) : 0;
+    }
+    /**
+     * Operators drawing one line of text in a y-DOWN space, with its baseline at
+     * `yBaseline` and its left / centre / right edge at `x`. Returns [] when
+     * nothing of the text is drawable.
+     */
+    textOps(scope, text, size, color, x, yBaseline, options = {}) {
+        const picked = this.pick(text);
+        if (!picked.text || size <= 0)
+            return [];
+        const w = picked.font.widthOfTextAtSize(picked.text, size);
+        const align = options.align ?? 'left';
+        const left = align === 'center' ? x - w / 2 : align === 'right' ? x - w : x;
+        return withMatrix(uprightAt(left, yBaseline), drawText(picked.font.encodeText(picked.text), {
+            color: parseHexColor(color).rgb,
+            font: scope.fontKey(picked.font),
+            size,
+            rotate: degrees(0),
+            xSkew: degrees(0),
+            ySkew: degrees(0),
+            x: 0,
+            y: 0,
+            graphicsState: options.graphicsState,
+        }));
+    }
+    /** Largest size ≤ `max` at which `text` fits in `maxWidth`. */
+    fitSize(text, maxWidth, max, min = 4) {
+        const atOne = this.width(text, 1);
+        if (atOne <= 0)
+            return max;
+        return Math.max(min, Math.min(max, maxWidth / atOne));
+    }
+}

package/dist/export/pdf/index.d.ts

@@ -0,0 +1,7 @@
+export { renderCanvasToPdf } from './renderCanvasToPdf.js';
+export { stripPdfEncryption, type StripPdfEncryptionOptions, type StripPdfEncryptionResult, } from './decrypt.js';
+export { docToPageMatrix, pageRectsOf, normalizeRotation, rotatedBoxSize, applyMatrix, type AffineMatrix, type PageRotation, type PdfBox, } from './pageMapping.js';
+export { resolveTileContent, measurementTileFillFor, FORMULA_COLUMN_TILE_FILL, PLANE_COMPUTED_TILE_FILL, type TileFileInfo, type TileResolutionContext, } from './tileContent.js';
+export { tileFootprint, type TileFootprint } from './tiles.js';
+export { annotationCount } from './annots.js';
+export { PdfExportError, type EmbeddedImage, type PdfExportCalibration, type RenderCanvasToPdfInput, type RenderCanvasToPdfResult, type ResolvedTileContent, type MeasurementTileContent, type LiteralTileContent, type EmptyTileContent, type HeaderTileContent, type ObjectTileContent, type PlaneDimensionTileContent, type InstructionsTileContent, type SkippedItem, } from './types.js';

package/dist/export/pdf/index.js

@@ -0,0 +1,7 @@
+export { renderCanvasToPdf } from './renderCanvasToPdf.js';
+export { stripPdfEncryption, } from './decrypt.js';
+export { docToPageMatrix, pageRectsOf, normalizeRotation, rotatedBoxSize, applyMatrix, } from './pageMapping.js';
+export { resolveTileContent, measurementTileFillFor, FORMULA_COLUMN_TILE_FILL, PLANE_COMPUTED_TILE_FILL, } from './tileContent.js';
+export { tileFootprint } from './tiles.js';
+export { annotationCount } from './annots.js';
+export { PdfExportError, } from './types.js';

package/dist/export/pdf/layers.d.ts

@@ -0,0 +1,5 @@
+import { type PDFName, type PDFOperator } from 'pdf-lib';
+import type { AnnotationBackgroundLayer } from '../../types/annotation.js';
+import type { DocRect } from './pageMapping.js';
+export declare const layerVisibleRect: (layer: AnnotationBackgroundLayer) => DocRect;
+export declare const layerOps: (layer: AnnotationBackgroundLayer, imageName: PDFName) => PDFOperator[];

package/dist/export/pdf/layers.js

@@ -0,0 +1,19 @@
+// Background image layers baked into the page: the full image placed at its
+// doc rect, clipped to its crop window. Draw order is array order, under every
+// mark — exactly the z-order AnnotationCanvasSkia paints.
+import { popGraphicsState, pushGraphicsState, } from 'pdf-lib';
+import { backgroundLayerDocRect, backgroundLayerFullDocRect, } from '../../annotation/canvas/backgroundLayers.js';
+import { clipRectOps, imageOps } from './emit.js';
+export const layerVisibleRect = (layer) => backgroundLayerDocRect(layer);
+export const layerOps = (layer, imageName) => {
+    const crop = backgroundLayerDocRect(layer);
+    const full = backgroundLayerFullDocRect(layer);
+    if (crop.width <= 0 || crop.height <= 0)
+        return [];
+    return [
+        pushGraphicsState(),
+        ...clipRectOps(crop.x, crop.y, crop.width, crop.height),
+        ...imageOps(imageName, full.x, full.y, full.width, full.height),
+        popGraphicsState(),
+    ];
+};

package/dist/export/pdf/marks.d.ts

@@ -0,0 +1,81 @@
+import { type PDFOperator } from 'pdf-lib';
+import type { AnnotationShape, AnnotationStroke, PlacedMeasurementRef, Vec2 } from '../../types/annotation.js';
+import { dashIntervals } from '../../annotation/canvas/strokeGeometry.js';
+import type { PdfFonts } from './fonts.js';
+import { type DocRect } from './pageMapping.js';
+import type { ResourceScope } from './resources.js';
+import type { SkippedItem } from './types.js';
+export interface MarkContext {
+    /** Where fonts, images and opacity states get registered. */
+    scope: ResourceScope;
+    fonts: PdfFonts;
+    skipped: SkippedItem[];
+}
+/**
+ * What an element IS, for the annotation dictionary that wraps its
+ * appearance stream in annotation mode: the standard fields a viewer reads
+ * back (and regenerates from after an edit). Points and rects are in DOC
+ * space; the annotation builder maps them onto the page.
+ */
+export type AnnotMeta = {
+    subtype: 'Ink';
+    color: string;
+    width: number;
+    alpha: number;
+    paths: Vec2[][];
+} | {
+    subtype: 'Line';
+    color: string;
+    width: number;
+    alpha: number;
+    dash: boolean;
+    a: Vec2;
+    b: Vec2;
+    startArrow: boolean;
+    endArrow: boolean;
+} | {
+    subtype: 'Square' | 'Circle';
+    color: string;
+    fill?: string;
+    width: number;
+    alpha: number;
+    dash: boolean;
+    rect: DocRect;
+} | {
+    subtype: 'Polygon' | 'PolyLine';
+    color: string;
+    fill?: string;
+    width: number;
+    alpha: number;
+    dash: boolean;
+    vertices: Vec2[];
+    startArrow: boolean;
+    endArrow: boolean;
+} | {
+    subtype: 'FreeText';
+    color: string;
+    fontSize: number;
+    text: string;
+    alpha: number;
+} | {
+    subtype: 'Stamp';
+    contents?: string;
+};
+/** One drawable element: its operators, its doc-space bounds, its identity. */
+export interface Mark {
+    id: string;
+    ops: PDFOperator[];
+    bounds: DocRect;
+    annot: AnnotMeta;
+}
+export declare const strokeBounds: (s: AnnotationStroke) => DocRect | null;
+export declare const strokeOps: (s: AnnotationStroke, ctx: MarkContext) => PDFOperator[];
+export declare const shapeBounds: (shape: AnnotationShape) => DocRect | null;
+export declare const shapeOps: (shape: AnnotationShape, ctx: MarkContext) => PDFOperator[];
+export declare const measurementMarkBounds: (placed: PlacedMeasurementRef) => DocRect | null;
+export declare const measurementMarkOps: (placed: PlacedMeasurementRef, ctx: MarkContext) => PDFOperator[];
+export { dashIntervals };
+export declare const strokeMark: (s: AnnotationStroke, ctx: MarkContext) => Mark | null;
+export declare const shapeMark: (shape: AnnotationShape, ctx: MarkContext) => Mark | null;
+/** The measurement annotation's line / rectangle (not its tile). */
+export declare const measurementMark: (placed: PlacedMeasurementRef, ctx: MarkContext) => Mark | null;

package/dist/export/pdf/marks.js

@@ -0,0 +1,479 @@
+// Vector marks: strokes, shapes and the measurement annotation's line /
+// rectangle, emitted as PDF path operators in DOC space. Mirrors what
+// StrokeElement, ShapeElement and AnnotationCanvasSkia's measurement pass draw,
+// reusing the same geometry helpers so caps, dashes and arrowheads agree.
+import { fill, popGraphicsState, pushGraphicsState, rectangle, stroke, } from 'pdf-lib';
+import { arrowheadTriangle, dashIntervals, toSkiaStrokeCap, } from '../../annotation/canvas/strokeGeometry.js';
+import { visualShapeBounds } from '../../annotation/canvas/shapeGeometry.js';
+import { DEFAULT_TEXT_FONT_SIZE, TEXT_BASELINE_FACTOR, TEXT_LINE_HEIGHT_FACTOR, textShapeBounds, } from '../../annotation/canvas/textGeometry.js';
+import { normalizeRect, placementOf, } from '../../annotation/canvas/measurementGeometry.js';
+import { MEASUREMENT_LINE_COLOR, MEASUREMENT_LINE_WIDTH, MEASUREMENT_RECT_WIDTH, } from '../../annotation/canvas/measurementLineStyle.js';
+import { parseHexColor } from './color.js';
+import { circlePathOps, fillStateOps, flatPolylinePathOps, polylinePathOps, rectPathOps, strokeStateOps, } from './emit.js';
+import { boundsToRect } from './pageMapping.js';
+// Readable glyph colour over a highlight band — mirror of
+// ShapeElement.highlightTextColor (which lives behind a Skia import).
+const highlightTextColor = (hex) => {
+    const h = hex.replace('#', '');
+    if (h.length < 6)
+        return '#1A1A1A';
+    const r = parseInt(h.slice(0, 2), 16);
+    const g = parseInt(h.slice(2, 4), 16);
+    const b = parseInt(h.slice(4, 6), 16);
+    const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    return lum > 0.6 ? '#1A1A1A' : '#FFFFFF';
+};
+const arrowheadOps = (tip, from, width, color, gs) => {
+    if (!tip || !from || (tip.x === from.x && tip.y === from.y))
+        return [];
+    const tri = arrowheadTriangle(tip, from, width);
+    return [
+        pushGraphicsState(),
+        ...fillStateOps(color, gs),
+        ...polylinePathOps(tri, true),
+        fill(),
+        popGraphicsState(),
+    ];
+};
+/* ------------------------------------------------------------------ *
+ * Strokes
+ * ------------------------------------------------------------------ */
+export const strokeBounds = (s) => {
+    if (s.points.length < 2)
+        return null;
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (let i = 0; i + 1 < s.points.length; i += 2) {
+        const x = s.points[i];
+        const y = s.points[i + 1];
+        if (x < minX)
+            minX = x;
+        if (y < minY)
+            minY = y;
+        if (x > maxX)
+            maxX = x;
+        if (y > maxY)
+            maxY = y;
+    }
+    // Round caps and arrowheads reach past the points by ~2× the width.
+    return boundsToRect({ minX, minY, maxX, maxY }, Math.max(s.width * 2, 6));
+};
+export const strokeOps = (s, ctx) => {
+    const n = s.points.length;
+    if (n < 2)
+        return [];
+    const opacity = s.tool === 'highlighter' ? 0.3 : 1;
+    const alpha = opacity * parseHexColor(s.color).alpha;
+    const gs = ctx.scope.alphaState(alpha);
+    const isDot = n === 4 && s.points[0] === s.points[2] && s.points[1] === s.points[3];
+    if (isDot) {
+        // Skia paints a zero-length round-capped contour as a dot; PDF only does
+        // so for round caps, and not reliably across viewers — draw it explicitly.
+        const x = s.points[0];
+        const y = s.points[1];
+        const r = s.width / 2;
+        const cap = toSkiaStrokeCap(s.cap);
+        if (cap === 'butt')
+            return [];
+        return [
+            pushGraphicsState(),
+            ...fillStateOps(s.color, gs),
+            ...(cap === 'square'
+                ? rectPathOps(x - r, y - r, s.width, s.width)
+                : circlePathOps(x, y, r)),
+            fill(),
+            popGraphicsState(),
+        ];
+    }
+    const ops = [
+        pushGraphicsState(),
+        ...strokeStateOps({
+            color: s.color,
+            width: s.width,
+            cap: s.cap,
+            join: 'round',
+            dash: !!s.dash,
+            graphicsState: gs,
+        }),
+        ...flatPolylinePathOps(s.points),
+        stroke(),
+        popGraphicsState(),
+    ];
+    if (n >= 4) {
+        const first = { x: s.points[0], y: s.points[1] };
+        const second = { x: s.points[2], y: s.points[3] };
+        const last = { x: s.points[n - 2], y: s.points[n - 1] };
+        const penult = { x: s.points[n - 4], y: s.points[n - 3] };
+        if (s.startCap === 'arrow') {
+            ops.push(...arrowheadOps(first, second, s.width, s.color, gs));
+        }
+        if (s.cap === 'arrow') {
+            ops.push(...arrowheadOps(last, penult, s.width, s.color, gs));
+        }
+    }
+    return ops;
+};
+/* ------------------------------------------------------------------ *
+ * Shapes
+ * ------------------------------------------------------------------ */
+export const shapeBounds = (shape) => {
+    if (shape.kind === 'text') {
+        const b = textShapeBounds(shape);
+        return b ? boundsToRect(b, 4) : null;
+    }
+    const b = visualShapeBounds(shape);
+    if (!b)
+        return null;
+    const w = shape.style.strokeWidth ?? 2;
+    return boundsToRect(b, Math.max(w * 2, 6));
+};
+const textShapeOps = (shape, ctx) => {
+    const origin = shape.geometry.points[0];
+    if (!origin || !shape.text)
+        return [];
+    const fontSize = shape.style.fontSize ?? DEFAULT_TEXT_FONT_SIZE;
+    const colorStr = shape.style.stroke ?? '#000000';
+    const decoration = shape.style.textDecoration;
+    const glyphColor = decoration === 'highlight' ? highlightTextColor(colorStr) : colorStr;
+    const gs = ctx.scope.alphaState(parseHexColor(colorStr).alpha);
+    const lineHeight = TEXT_LINE_HEIGHT_FACTOR * fontSize;
+    const ops = [];
+    let lost = false;
+    shape.text.split('\n').forEach((line, i) => {
+        const top = origin.y + i * lineHeight;
+        const baseline = top + TEXT_BASELINE_FACTOR * fontSize;
+        const picked = ctx.fonts.pick(line);
+        if (picked.dropped)
+            lost = true;
+        const width = picked.text ? ctx.fonts.width(picked.text, fontSize) : 0;
+        if (decoration === 'highlight' && width > 0) {
+            ops.push(pushGraphicsState(), ...fillStateOps(colorStr, gs), rectangle(origin.x, top, width, lineHeight), fill(), popGraphicsState());
+        }
+        ops.push(...ctx.fonts.textOps(ctx.scope, line, fontSize, glyphColor, origin.x, baseline, {
+            graphicsState: gs,
+        }));
+        if ((decoration === 'underline' || decoration === 'squiggle') &&
+            width > 0) {
+            // Skia positions the underline just under the baseline at ~1/14 em; the
+            // wavy variant has no PDF operator and is drawn solid.
+            const thickness = fontSize / 14;
+            ops.push(pushGraphicsState(), ...fillStateOps(colorStr, gs), rectangle(origin.x, baseline + fontSize * 0.08, width, thickness), fill(), popGraphicsState());
+        }
+    });
+    if (lost) {
+        ctx.skipped.push({
+            id: shape.id,
+            kind: 'text',
+            reason: 'Some characters have no glyph in the export fonts and were dropped',
+        });
+    }
+    return ops;
+};
+export const shapeOps = (shape, ctx) => {
+    const { kind, geometry, style } = shape;
+    if (kind === 'text')
+        return textShapeOps(shape, ctx);
+    const strokeColor = style.stroke ?? '#000000';
+    const strokeWidth = style.strokeWidth ?? 2;
+    const gs = ctx.scope.alphaState(parseHexColor(strokeColor).alpha);
+    const closed = geometry.closed !== false;
+    const pts = geometry.points;
+    const strokeWith = (pathOps, join, cap) => [
+        pushGraphicsState(),
+        ...strokeStateOps({
+            color: strokeColor,
+            width: strokeWidth,
+            cap,
+            join,
+            dash: !!style.dash,
+            graphicsState: gs,
+        }),
+        ...pathOps,
+        stroke(),
+        popGraphicsState(),
+    ];
+    const fillWith = (pathOps) => style.fill
+        ? [
+            pushGraphicsState(),
+            ...fillStateOps(style.fill, ctx.scope.alphaState(parseHexColor(style.fill).alpha)),
+            ...pathOps,
+            fill(),
+            popGraphicsState(),
+        ]
+        : [];
+    switch (kind) {
+        case 'rect': {
+            const [a, b] = pts;
+            if (!a || !b)
+                return [];
+            const x = Math.min(a.x, b.x);
+            const y = Math.min(a.y, b.y);
+            const w = Math.abs(b.x - a.x);
+            const h = Math.abs(b.y - a.y);
+            return [
+                ...fillWith(rectPathOps(x, y, w, h)),
+                ...strokeWith(rectPathOps(x, y, w, h), 'miter'),
+            ];
+        }
+        case 'ellipse': {
+            // Rendered as a CIRCLE: centre = midpoint, r = half the larger extent.
+            const [a, b] = pts;
+            if (!a || !b)
+                return [];
+            const cx = (a.x + b.x) / 2;
+            const cy = (a.y + b.y) / 2;
+            const r = Math.max(Math.abs(b.x - a.x), Math.abs(b.y - a.y)) / 2;
+            return [
+                ...fillWith(circlePathOps(cx, cy, r)),
+                ...strokeWith(circlePathOps(cx, cy, r), 'miter'),
+            ];
+        }
+        case 'line':
+        case 'arrow': {
+            const [a, b] = pts;
+            if (!a || !b)
+                return [];
+            const ops = strokeWith(polylinePathOps([a, b]), 'miter', style.cap);
+            if (style.startCap === 'arrow')
+                ops.push(...arrowheadOps(a, b, strokeWidth, strokeColor, gs));
+            if (kind === 'arrow' || style.cap === 'arrow') {
+                ops.push(...arrowheadOps(b, a, strokeWidth, strokeColor, gs));
+            }
+            return ops;
+        }
+        case 'polygon': {
+            if (pts.length < 2)
+                return [];
+            const ops = [];
+            if (closed)
+                ops.push(...fillWith(polylinePathOps(pts, true)));
+            ops.push(...strokeWith(polylinePathOps(pts, closed), 'round', style.cap));
+            if (!closed) {
+                const n = pts.length;
+                if (style.startCap === 'arrow')
+                    ops.push(...arrowheadOps(pts[0], pts[1], strokeWidth, strokeColor, gs));
+                if (style.cap === 'arrow')
+                    ops.push(...arrowheadOps(pts[n - 1], pts[n - 2], strokeWidth, strokeColor, gs));
+            }
+            return ops;
+        }
+        default:
+            return [];
+    }
+};
+/* ------------------------------------------------------------------ *
+ * Measurement annotation line / rectangle (the tile itself is in tiles.ts)
+ * ------------------------------------------------------------------ */
+export const measurementMarkBounds = (placed) => {
+    const placement = placementOf(placed);
+    if (placement === 'rectangle' && placed.rect) {
+        const n = normalizeRect(placed.rect);
+        const w = placed.lineWidth ?? MEASUREMENT_RECT_WIDTH;
+        return boundsToRect(n, w);
+    }
+    if (placement === 'line' && placed.line) {
+        const { a, b } = placed.line;
+        const w = placed.lineWidth ?? MEASUREMENT_LINE_WIDTH;
+        return boundsToRect({
+            minX: Math.min(a.x, b.x),
+            minY: Math.min(a.y, b.y),
+            maxX: Math.max(a.x, b.x),
+            maxY: Math.max(a.y, b.y),
+        }, Math.max(w * 2, 6));
+    }
+    return null;
+};
+export const measurementMarkOps = (placed, ctx) => {
+    const placement = placementOf(placed);
+    if (placement === 'rectangle' && placed.rect) {
+        const n = normalizeRect(placed.rect);
+        const color = placed.lineColor ?? MEASUREMENT_LINE_COLOR;
+        const width = placed.lineWidth ?? MEASUREMENT_RECT_WIDTH;
+        return [
+            pushGraphicsState(),
+            ...strokeStateOps({
+                color,
+                width,
+                join: 'miter',
+                dash: !!placed.lineDash,
+                graphicsState: ctx.scope.alphaState(parseHexColor(color).alpha),
+            }),
+            ...rectPathOps(n.minX, n.minY, n.maxX - n.minX, n.maxY - n.minY),
+            stroke(),
+            popGraphicsState(),
+        ];
+    }
+    if (placement === 'line' && placed.line) {
+        const { a, b } = placed.line;
+        const color = placed.lineColor ?? MEASUREMENT_LINE_COLOR;
+        const width = placed.lineWidth ?? MEASUREMENT_LINE_WIDTH;
+        const gs = ctx.scope.alphaState(parseHexColor(color).alpha);
+        const ops = [
+            pushGraphicsState(),
+            ...strokeStateOps({
+                color,
+                width,
+                cap: placed.lineCap,
+                join: 'miter',
+                dash: !!placed.lineDash,
+                graphicsState: gs,
+            }),
+            ...polylinePathOps([a, b]),
+            stroke(),
+            popGraphicsState(),
+        ];
+        if (placed.lineStartCap === 'arrow')
+            ops.push(...arrowheadOps(a, b, width, color, gs));
+        if (placed.lineCap === 'arrow')
+            ops.push(...arrowheadOps(b, a, width, color, gs));
+        return ops;
+    }
+    return [];
+};
+// Re-exported so the renderer can size dash tests without a second import.
+export { dashIntervals };
+/* ------------------------------------------------------------------ *
+ * Marks: ops + bounds + annotation metadata, per element
+ * ------------------------------------------------------------------ */
+const strokePaths = (s) => {
+    const pts = [];
+    for (let i = 0; i + 1 < s.points.length; i += 2) {
+        pts.push({ x: s.points[i], y: s.points[i + 1] });
+    }
+    return pts;
+};
+export const strokeMark = (s, ctx) => {
+    const bounds = strokeBounds(s);
+    if (!bounds)
+        return null;
+    const opacity = s.tool === 'highlighter' ? 0.3 : 1;
+    return {
+        id: s.id,
+        ops: strokeOps(s, ctx),
+        bounds,
+        annot: {
+            subtype: 'Ink',
+            color: s.color,
+            width: s.width,
+            alpha: opacity * parseHexColor(s.color).alpha,
+            paths: [strokePaths(s)],
+        },
+    };
+};
+export const shapeMark = (shape, ctx) => {
+    const bounds = shapeBounds(shape);
+    if (!bounds)
+        return null;
+    const ops = shapeOps(shape, ctx);
+    const { kind, geometry, style } = shape;
+    const color = style.stroke ?? '#000000';
+    const width = style.strokeWidth ?? 2;
+    const alpha = parseHexColor(color).alpha;
+    const dash = !!style.dash;
+    const pts = geometry.points;
+    let annot;
+    switch (kind) {
+        case 'rect':
+        case 'ellipse': {
+            const b = visualShapeBounds(shape);
+            annot = {
+                subtype: kind === 'rect' ? 'Square' : 'Circle',
+                color,
+                fill: style.fill,
+                width,
+                alpha,
+                dash,
+                rect: boundsToRect(b),
+            };
+            break;
+        }
+        case 'line':
+        case 'arrow':
+            annot = {
+                subtype: 'Line',
+                color,
+                width,
+                alpha,
+                dash,
+                a: pts[0],
+                b: pts[1],
+                startArrow: style.startCap === 'arrow',
+                endArrow: kind === 'arrow' || style.cap === 'arrow',
+            };
+            break;
+        case 'polygon': {
+            const closed = geometry.closed !== false;
+            annot = {
+                subtype: closed ? 'Polygon' : 'PolyLine',
+                color,
+                fill: closed ? style.fill : undefined,
+                width,
+                alpha,
+                dash,
+                vertices: pts,
+                startArrow: !closed && style.startCap === 'arrow',
+                endArrow: !closed && style.cap === 'arrow',
+            };
+            break;
+        }
+        case 'text':
+            annot = {
+                subtype: 'FreeText',
+                color,
+                fontSize: style.fontSize ?? DEFAULT_TEXT_FONT_SIZE,
+                text: shape.text ?? '',
+                alpha,
+            };
+            break;
+        default:
+            return null;
+    }
+    return { id: shape.id, ops, bounds, annot };
+};
+/** The measurement annotation's line / rectangle (not its tile). */
+export const measurementMark = (placed, ctx) => {
+    const bounds = measurementMarkBounds(placed);
+    if (!bounds)
+        return null;
+    const ops = measurementMarkOps(placed, ctx);
+    const color = placed.lineColor ?? MEASUREMENT_LINE_COLOR;
+    const alpha = parseHexColor(color).alpha;
+    const dash = !!placed.lineDash;
+    if (placementOf(placed) === 'rectangle' && placed.rect) {
+        const n = normalizeRect(placed.rect);
+        return {
+            id: `${placed.id}:rect`,
+            ops,
+            bounds,
+            annot: {
+                subtype: 'Square',
+                color,
+                width: placed.lineWidth ?? MEASUREMENT_RECT_WIDTH,
+                alpha,
+                dash,
+                rect: boundsToRect(n),
+            },
+        };
+    }
+    if (placementOf(placed) === 'line' && placed.line) {
+        return {
+            id: `${placed.id}:line`,
+            ops,
+            bounds,
+            annot: {
+                subtype: 'Line',
+                color,
+                width: placed.lineWidth ?? MEASUREMENT_LINE_WIDTH,
+                alpha,
+                dash,
+                a: placed.line.a,
+                b: placed.line.b,
+                startArrow: placed.lineStartCap === 'arrow',
+                endArrow: placed.lineCap === 'arrow',
+            },
+        };
+    }
+    return null;
+};