web-annotation-renderer 0.6.3 → 0.7.0

package/dist/index5.js

@@ -1,75 +1,13 @@
-import { inkToStrokes as T } from "./index18.js";
-import { circleToStrokes as _ } from "./index17.js";
-import { arrowToStrokes as P } from "./index16.js";
-import { underlineToStrokes as R } from "./index15.js";
-import { textToStrokes as E } from "./index14.js";
-import { highlightToStrokes as O } from "./index13.js";
-const v = [
-  "highlight",
-  "text",
-  "underline",
-  "arrow",
-  "circle",
-  "ink"
-], S = 500, A = {
-  highlight: {
-    color: "rgba(255, 255, 0, 0.3)",
-    width: 24,
-    lineCap: "square",
-    roughness: 1.2,
-    bowing: 1.2,
-    curveFitting: 0.95,
-    curveStepCount: 9,
-    maxRandomnessOffset: 2,
-    disableMultiStroke: !1
-  },
-  text: {
-    color: "rgba(220, 20, 60, 1.0)",
-    width: 2,
-    fontSize: 16,
-    lineCap: "round",
-    roughness: 0.8
-  },
-  underline: {
-    color: "rgba(0, 0, 255, 0.8)",
-    width: 2,
-    lineCap: "round",
-    roughness: 1.8,
-    bowing: 2,
-    curveFitting: 0.85,
-    curveStepCount: 9,
-    maxRandomnessOffset: 3,
-    disableMultiStroke: !1
-  },
-  arrow: {
-    color: "rgba(255, 0, 0, 0.8)",
-    width: 2,
-    lineCap: "round",
-    roughness: 1.8,
-    bowing: 1.8,
-    curveFitting: 0.9,
-    curveStepCount: 9,
-    maxRandomnessOffset: 2,
-    disableMultiStroke: !1
-  },
-  circle: {
-    color: "rgba(255, 165, 0, 0.8)",
-    width: 3,
-    lineCap: "round",
-    roughness: 1.5,
-    bowing: 1.7,
-    curveFitting: 0.8,
-    curveStepCount: 12,
-    maxRandomnessOffset: 3,
-    disableMultiStroke: !1
-  },
-  ink: {
-    color: "#DC143C",
-    width: 2,
-    lineCap: "round"
-  }
-};
-class $ {
+import { ANNOTATION_TYPES as m, DEFAULT_CONFIG as B, REFERENCE_HEIGHT as v } from "./index24.js";
+import { normalizeAnnotationArray as E } from "./index10.js";
+import { pointNormToAbs as S } from "./index7.js";
+import { inkToStrokes as O } from "./index19.js";
+import { circleToStrokes as j } from "./index18.js";
+import { arrowToStrokes as N } from "./index17.js";
+import { underlineToStrokes as z } from "./index16.js";
+import { textToStrokes as H } from "./index15.js";
+import { highlightToStrokes as V } from "./index14.js";
+class D {
   /**
    * Create StrokeRenderer instance
    *
@@ -81,21 +19,21 @@ class $ {
    * @param {Object} [config.arrow] - Arrow type settings
    * @param {Object} [config.circle] - Circle type settings
    */
-  constructor(t, r = {}) {
+  constructor(t, e = {}) {
     if (!t || !(t instanceof HTMLCanvasElement))
       throw new Error(
         "StrokeRenderer: canvas must be a valid HTMLCanvasElement"
       );
-    this.canvas = t, this.ctx = t.getContext("2d"), this.strokes = [], this.viewport = { width: 0, height: 0 }, this.config = {};
-    for (const i of v)
-      this.config[i] = { ...A[i] };
-    Object.keys(r).length > 0 && this.setConfig(r), this.converters = {
-      highlight: O,
-      text: E,
-      underline: R,
-      arrow: P,
-      circle: _,
-      ink: T
+    this.canvas = t, this.ctx = t.getContext("2d"), this.strokes = [], this.viewport = { width: 0, height: 0 }, this._strokeCacheByPage = /* @__PURE__ */ new Map(), this._lastAnnotationsRef = null, this.config = {};
+    for (const n of m)
+      this.config[n] = { ...B[n] };
+    Object.keys(e).length > 0 && this.setConfig(e), this.converters = {
+      highlight: V,
+      text: H,
+      underline: z,
+      arrow: N,
+      circle: j,
+      ink: O
     };
   }
   /**
@@ -128,16 +66,16 @@ class $ {
    * });
    */
   setConfig(t) {
-    const r = {}, i = {};
-    for (const [e, s] of Object.entries(t))
-      v.includes(e) ? i[e] = s : r[e] = s;
-    for (const e of v)
-      this.config[e] = {
-        ...this.config[e],
-        ...r,
-        ...i[e] || {}
+    const e = {}, n = {};
+    for (const [s, i] of Object.entries(t))
+      m.includes(s) ? n[s] = i : e[s] = i;
+    for (const s of m)
+      this.config[s] = {
+        ...this.config[s],
+        ...e,
+        ...n[s] || {}
       };
-    return this;
+    return this._strokeCacheByPage && this._strokeCacheByPage.clear(), this._lastAnnotationsRef = null, this;
   }
   /**
    * Register a custom converter for a new annotation type
@@ -145,12 +83,12 @@ class $ {
    * @param {string} type - Annotation type name
    * @param {Function} converter - Converter function (annotation, style) => strokes[]
    */
-  registerConverter(t, r) {
-    if (typeof r != "function")
+  registerConverter(t, e) {
+    if (typeof e != "function")
       throw new Error(
         "StrokeRenderer.registerConverter: converter must be a function"
       );
-    this.converters[t] = r;
+    this.converters[t] = e;
   }
   /**
    * Set viewport dimensions and configure canvas
@@ -160,35 +98,80 @@ class $ {
    * @param {number} width - Viewport width in CSS pixels
    * @param {number} height - Viewport height in CSS pixels
    */
-  setViewport(t, r) {
-    this.viewport = { width: t, height: r };
-    const i = window.devicePixelRatio || 1;
-    this.canvas.width = t * i, this.canvas.height = r * i, this.canvas.style.width = `${t}px`, this.canvas.style.height = `${r}px`, this.ctx.setTransform(i, 0, 0, i, 0, 0);
+  setViewport(t, e) {
+    this.viewport = { width: t, height: e };
+    const n = window.devicePixelRatio || 1;
+    this.canvas.width = t * n, this.canvas.height = e * n, this.canvas.style.width = `${t}px`, this.canvas.style.height = `${e}px`, this.ctx.setTransform(n, 0, 0, n, 0, 0);
   }
   /**
    * Set annotations and convert them to strokes
    *
-   * Clears existing strokes and converts all annotations.
+   * Behavior:
+   * - When `page` is null, all annotations are converted and exposed via
+   *   `this.strokes`. Per-page cache is still populated.
+   * - When `page` is a number, conversion is performed per page (cached) and
+   *   `this.strokes` is set to the cache entry for the requested page.
+   * - When the `annotations` reference changes between calls, the cache is
+   *   invalidated.
    *
    * @param {Array} annotations - Array of annotation objects
-   * @param {number} [page] - Optional page filter (only convert annotations for this page)
+   * @param {number|null} [page=null] - Optional page filter
+   * @param {Object} [options]
+   * @param {boolean} [options.validate=false] - Run normalizeAnnotationArray
+   *   first and convert the normalized result instead of the raw input.
+   * @param {boolean} [options.noCache=false] - Skip the per-page cache and
+   *   convert the filtered annotations directly (legacy fast path).
    */
-  setAnnotations(t, r = null) {
+  setAnnotations(t, e = null, n = {}) {
     if (!Array.isArray(t)) {
       console.warn(
         "StrokeRenderer.setAnnotations: annotations must be an array"
-      ), this.strokes = [];
+      ), this.strokes = [], this._strokeCacheByPage.clear(), this._lastAnnotationsRef = null;
       return;
     }
-    const i = r !== null ? t.filter((e) => e.page === r) : t;
-    this.strokes = i.flatMap((e) => {
-      const s = this.converters[e.type];
-      if (!s)
+    const { validate: s = !1, noCache: i = !1 } = n;
+    let r = t;
+    if (s && (r = E(t).normalized), r !== this._lastAnnotationsRef && (this._strokeCacheByPage.clear(), this._lastAnnotationsRef = r), i) {
+      const o = e !== null ? r.filter((h) => h.page === e) : r;
+      this.strokes = this._convertAnnotations(o);
+      return;
+    }
+    if (this._strokeCacheByPage.size === 0) {
+      const o = /* @__PURE__ */ new Map();
+      for (const h of r) {
+        const a = h && h.page != null ? h.page : null;
+        let c = o.get(a);
+        c || (c = [], o.set(a, c)), c.push(h);
+      }
+      for (const [h, a] of o)
+        this._strokeCacheByPage.set(h, this._convertAnnotations(a));
+    }
+    if (e !== null)
+      this.strokes = this._strokeCacheByPage.get(e) || [];
+    else {
+      const o = [];
+      for (const h of this._strokeCacheByPage.values())
+        for (const a of h) o.push(a);
+      this.strokes = o;
+    }
+  }
+  /**
+   * Convert a list of annotations to stroke commands using the registered
+   * converters. Unknown types are skipped with a warning.
+   *
+   * @private
+   * @param {Array} annotations
+   * @returns {Array} stroke command objects
+   */
+  _convertAnnotations(t) {
+    return t.flatMap((e) => {
+      const n = this.converters[e.type];
+      if (!n)
         return console.warn(
           `StrokeRenderer: Unknown annotation type "${e.type}"`
         ), [];
-      const n = this._resolveStyle(e);
-      return s(e, n);
+      const s = this._resolveStyle(e);
+      return n(e, s);
     });
   }
   /**
@@ -213,13 +196,13 @@ class $ {
    * @param {number} time - Current time in seconds
    */
   render(t) {
-    const { ctx: r, viewport: i, strokes: e } = this;
-    r.clearRect(0, 0, i.width, i.height);
-    for (const s of e) {
-      if (t < s.start)
+    const { ctx: e, viewport: n, strokes: s } = this;
+    e.clearRect(0, 0, n.width, n.height);
+    for (const i of s) {
+      if (t < i.start)
         continue;
-      const n = s.end - s.start, h = t - s.start, o = n > 0 ? Math.min(1, h / n) : 1;
-      this._drawStroke(s, o);
+      const r = i.end - i.start, o = t - i.start, h = r > 0 ? Math.min(1, o / r) : 1;
+      this._drawStroke(i, h);
     }
   }
   /**
@@ -232,7 +215,7 @@ class $ {
    * Destroy the renderer and release resources
    */
   destroy() {
-    this.strokes = [], this.ctx = null, this.canvas = null, this.config = null, this.converters = null;
+    this.strokes = [], this._strokeCacheByPage && this._strokeCacheByPage.clear(), this._strokeCacheByPage = null, this._lastAnnotationsRef = null, this.ctx = null, this.canvas = null, this.config = null, this.converters = null;
   }
   /**
    * Resolve style for an annotation
@@ -245,8 +228,8 @@ class $ {
    * @returns {Object} Resolved style object
    */
   _resolveStyle(t) {
-    const { type: r } = t;
-    return this.config[r] || {};
+    const { type: e } = t;
+    return this.config[e] || {};
   }
   /**
    * Linearly interpolate between two points
@@ -257,8 +240,41 @@ class $ {
    * @param {number} t - Interpolation factor (0-1)
    * @returns {Array} Interpolated point [x, y]
    */
-  _interpolatePoint(t, r, i) {
-    return [t[0] + (r[0] - t[0]) * i, t[1] + (r[1] - t[1]) * i];
+  _interpolatePoint(t, e, n) {
+    return [t[0] + (e[0] - t[0]) * n, t[1] + (e[1] - t[1]) * n];
+  }
+  /**
+   * Project a normalized stroke point into screen pixel space, honouring
+   * the legacy `uniformScale` / `baseX/baseY` flags used by glyph strokes.
+   *
+   * Three cases:
+   * - hasBase  : `[coordX, coordY]` is an offset from `(baseX, baseY)` in
+   *   uniform-scaled space (both axes by viewport.height).
+   * - uniform  : `[coordX, coordY]` is a full position in uniform-scaled
+   *   space (legacy text glyph fallback).
+   * - default  : `[coordX, coordY]` is a normalized 0–1 page coordinate;
+   *   converted via `pointNormToAbs`.
+   *
+   * @private
+   * @param {number} coordX
+   * @param {number} coordY
+   * @param {boolean} uniformScale
+   * @param {boolean} hasBase
+   * @param {number|null} baseX
+   * @param {number|null} baseY
+   * @returns {[number, number]}
+   */
+  _projectPoint(t, e, n, s, i, r) {
+    const { viewport: o } = this;
+    if (s)
+      return [
+        i * o.width + t * o.height,
+        r * o.height + e * o.height
+      ];
+    if (n)
+      return [t * o.height, e * o.height];
+    const { x: h, y: a } = S({ x: t, y: e }, o);
+    return [h, a];
   }
   /**
    * Get pressure values for visible points including interpolated final
@@ -269,13 +285,13 @@ class $ {
    * @param {number} segmentProgress - Progress within current segment (0-1)
    * @returns {Array} Pressure values for visible points
    */
-  _interpolatePressures(t, r, i) {
-    const e = t.slice(0, r + 1);
-    if (r < t.length - 1 && i > 0) {
-      const s = t[r], n = t[r + 1];
-      e.push(s + (n - s) * i);
+  _interpolatePressures(t, e, n) {
+    const s = t.slice(0, e + 1);
+    if (e < t.length - 1 && n > 0) {
+      const i = t[e], r = t[e + 1];
+      s.push(i + (r - i) * n);
     }
-    return e;
+    return s;
   }
   /**
    * Draw a single stroke with progress
@@ -286,62 +302,66 @@ class $ {
    * @param {Object} stroke - Stroke command object
    * @param {number} progress - Progress from 0 to 1
    */
-  _drawStroke(t, r) {
-    const { ctx: i } = this, {
-      points: e,
-      color: s,
-      width: n,
-      lineCap: h,
-      pressures: o,
-      uniformScale: f,
-      baseX: l,
-      baseY: a
+  _drawStroke(t, e) {
+    if (t.screenSpaceWing) {
+      this._drawScreenSpaceWingStroke(t, e);
+      return;
+    }
+    const { ctx: n } = this, {
+      points: s,
+      color: i,
+      width: r,
+      lineCap: o,
+      pressures: h,
+      uniformScale: a,
+      baseX: c,
+      baseY: f
     } = t;
-    if (!e || e.length < 2) return;
-    if (i.strokeStyle = s || "rgba(0, 0, 0, 0.5)", i.lineCap = h || "round", i.lineJoin = "round", r >= 1) {
-      o && o.length >= e.length ? this._drawVariableWidthStroke(
-        e,
-        n,
-        o,
-        f,
-        l,
-        a
+    if (!s || s.length < 2) return;
+    if (n.strokeStyle = i || "rgba(0, 0, 0, 0.5)", n.lineCap = o || "round", n.lineJoin = "round", e >= 1) {
+      h && h.length >= s.length ? this._drawVariableWidthStroke(
+        s,
+        r,
+        h,
+        a,
+        c,
+        f
       ) : this._drawConstantWidthStroke(
-        e,
-        n,
-        f,
-        l,
-        a
+        s,
+        r,
+        a,
+        c,
+        f
       );
       return;
     }
-    const u = e.length - 1, g = r * u, c = Math.floor(g), w = g - c, d = e.slice(0, c + 1);
-    if (c < u && w > 0) {
-      const p = e[c], k = e[c + 1];
-      d.push(this._interpolatePoint(p, k, w));
+    const p = s.length - 1, u = e * p, l = Math.floor(u), g = u - l, k = s.slice(0, l + 1);
+    if (l < p && g > 0) {
+      const y = s[l], d = s[l + 1];
+      k.push(this._interpolatePoint(y, d, g));
     }
-    if (!(d.length < 2))
-      if (o && o.length >= e.length) {
-        const p = this._interpolatePressures(
-          o,
-          c,
-          w
+    if (!(k.length < 2))
+      if (h && h.length >= s.length) {
+        const y = this._interpolatePressures(
+          h,
+          l,
+          g
         );
         this._drawVariableWidthStroke(
-          d,
-          n,
-          p,
-          f,
-          l,
-          a
+          k,
+          r,
+          y,
+          a,
+          c,
+          f
         );
       } else
         this._drawConstantWidthStroke(
-          d,
-          n,
-          f,
-          l,
-          a
+          k,
+          r,
+          a,
+          c,
+          f
         );
   }
   /**
@@ -354,16 +374,15 @@ class $ {
    * @param {number} [baseX] - Base X position in width-normalized coords (for uniformScale with offset points)
    * @param {number} [baseY] - Base Y position in height-normalized coords (for uniformScale with offset points)
    */
-  _drawConstantWidthStroke(t, r, i = !1, e = null, s = null) {
-    const { ctx: n, viewport: h } = this, o = h.height / S;
-    n.lineWidth = (r || 2) * o, n.beginPath();
-    const f = i && e !== null && s !== null;
-    for (let l = 0; l < t.length; l++) {
-      const [a, u] = t[l];
-      let g, c;
-      f ? (g = e * h.width + a * h.height, c = s * h.height + u * h.height) : i ? (g = a * h.height, c = u * h.height) : (g = a * h.width, c = u * h.height), l === 0 ? n.moveTo(g, c) : n.lineTo(g, c);
+  _drawConstantWidthStroke(t, e, n = !1, s = null, i = null) {
+    const { ctx: r, viewport: o } = this, h = o.height / v;
+    r.lineWidth = (e || 2) * h, r.beginPath();
+    const a = n && s !== null && i !== null;
+    for (let c = 0; c < t.length; c++) {
+      const [f, p] = t[c], [u, l] = this._projectPoint(f, p, n, a, s, i);
+      c === 0 ? r.moveTo(u, l) : r.lineTo(u, l);
     }
-    n.stroke();
+    r.stroke();
   }
   /**
    * Draw stroke with variable width based on pressure
@@ -376,19 +395,47 @@ class $ {
    * @param {number} [baseX] - Base X position in width-normalized coords (for uniformScale with offset points)
    * @param {number} [baseY] - Base Y position in height-normalized coords (for uniformScale with offset points)
    */
-  _drawVariableWidthStroke(t, r, i, e = !1, s = null, n = null) {
-    const { ctx: h, viewport: o } = this, f = e && s !== null && n !== null;
-    for (let l = 1; l < t.length; l++) {
-      const [a, u] = t[l - 1], [g, c] = t[l];
-      let w, d, p, k;
-      f ? (w = s * o.width + a * o.height, d = n * o.height + u * o.height, p = s * o.width + g * o.height, k = n * o.height + c * o.height) : e ? (w = a * o.height, d = u * o.height, p = g * o.height, k = c * o.height) : (w = a * o.width, d = u * o.height, p = g * o.width, k = c * o.height);
-      const m = i[l - 1] || 1, y = i[l] || 1, b = (m + y) / 2, x = o.height / S, C = Math.max(0.5, r * b) * x;
-      h.lineWidth = C, h.beginPath(), h.moveTo(w, d), h.lineTo(p, k), h.stroke();
+  _drawVariableWidthStroke(t, e, n, s = !1, i = null, r = null) {
+    const { ctx: o, viewport: h } = this, a = s && i !== null && r !== null, c = h.height / v;
+    for (let f = 1; f < t.length; f++) {
+      const [p, u] = t[f - 1], [l, g] = t[f], [k, y] = this._projectPoint(p, u, s, a, i, r), [d, w] = this._projectPoint(l, g, s, a, i, r), _ = ((n[f - 1] || 1) + (n[f] || 1)) / 2;
+      o.lineWidth = Math.max(0.5, e * _) * c, o.beginPath(), o.moveTo(k, y), o.lineTo(d, w), o.stroke();
     }
   }
+  /**
+   * Draw an arrow wing whose geometry is recomputed in screen-pixel space at
+   * every frame, so diagonal arrows render with symmetric wings regardless of
+   * viewport aspect ratio.
+   *
+   * Stroke shape (`stroke.screenSpaceWing`):
+   * - fromX, fromY: tail of the main arrow line (normalized 0–1)
+   * - toX, toY: tip of the main arrow line (normalized 0–1)
+   * - headAngle: wing offset angle in radians (defaults to π/6)
+   * - wingSide: 'left' uses (θ - headAngle); 'right' uses (θ + headAngle)
+   *
+   * The wing is drawn as a single straight line via the canvas API (no
+   * RoughJS), since screen-space recomputation runs every render frame and
+   * regenerating a rough path each frame would be too expensive.
+   *
+   * @private
+   * @param {Object} stroke
+   * @param {number} progress - 0..1 along the wing's full extent
+   */
+  _drawScreenSpaceWingStroke(t, e) {
+    const { ctx: n, viewport: s } = this, i = t.screenSpaceWing;
+    if (!i) return;
+    const { fromX: r, fromY: o, toX: h, toY: a, wingSide: c } = i, f = typeof i.headAngle == "number" ? i.headAngle : Math.PI / 6;
+    if (typeof r != "number" || typeof o != "number" || typeof h != "number" || typeof a != "number")
+      return;
+    const p = S({ x: h, y: a }, s), u = S({ x: r, y: o }, s), l = p.x, g = p.y, k = u.x, y = u.y, d = l - k, w = g - y, _ = Math.sqrt(d * d + w * w);
+    if (_ === 0) return;
+    const P = Math.min(_ * 0.2, 0.03 * s.height), x = Math.atan2(w, d), C = c === "right" ? x + f : x - f, b = l - P * Math.cos(C), T = g - P * Math.sin(C), A = Math.max(0, Math.min(1, e)), R = l + (b - l) * A, M = g + (T - g) * A, W = s.height / v;
+    n.strokeStyle = t.color || "rgba(0, 0, 0, 0.5)", n.lineCap = t.lineCap || "round", n.lineJoin = "round", n.lineWidth = (t.width || 2) * W, n.beginPath(), n.moveTo(l, g), n.lineTo(R, M), n.stroke();
+  }
 }
 export {
-  $ as StrokeRenderer,
-  $ as default
+  v as REFERENCE_HEIGHT,
+  D as StrokeRenderer,
+  D as default
 };
 //# sourceMappingURL=index5.js.map