web-annotation-renderer 0.1.3 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +176 -6
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +23 -19
- package/dist/index.js.map +1 -1
- package/dist/index12.cjs +1 -1
- package/dist/index12.cjs.map +1 -1
- package/dist/index12.js +118 -189
- package/dist/index12.js.map +1 -1
- package/dist/index13.cjs +1 -1
- package/dist/index13.cjs.map +1 -1
- package/dist/index13.js +200 -15
- package/dist/index13.js.map +1 -1
- package/dist/index14.cjs +1 -1
- package/dist/index14.cjs.map +1 -1
- package/dist/index14.js +15 -123
- package/dist/index14.js.map +1 -1
- package/dist/index15.cjs +1 -1
- package/dist/index15.cjs.map +1 -1
- package/dist/index15.js +123 -32
- package/dist/index15.js.map +1 -1
- package/dist/index16.cjs +2 -0
- package/dist/index16.cjs.map +1 -0
- package/dist/index16.js +35 -0
- package/dist/index16.js.map +1 -0
- package/dist/index7.cjs +1 -1
- package/dist/index7.cjs.map +1 -1
- package/dist/index7.js +38 -43
- package/dist/index7.js.map +1 -1
- package/dist/index9.cjs +1 -1
- package/dist/index9.cjs.map +1 -1
- package/dist/index9.js +27 -32
- package/dist/index9.js.map +1 -1
- package/package.json +5 -1
package/dist/index9.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
class p extends
|
|
1
|
+
import c from "./index6.js";
|
|
2
|
+
class p extends c {
|
|
3
3
|
/**
|
|
4
4
|
* Creates a new DrawingLayer instance
|
|
5
5
|
*
|
|
@@ -9,8 +9,8 @@ class p extends l {
|
|
|
9
9
|
* @param {number} viewport.height - Viewport height in pixels
|
|
10
10
|
* @param {number} viewport.scale - PDF scale/zoom level
|
|
11
11
|
*/
|
|
12
|
-
constructor(t,
|
|
13
|
-
super(t,
|
|
12
|
+
constructor(t, e) {
|
|
13
|
+
super(t, e), this.canvasElement = document.createElement("canvas"), this.canvasElement.style.position = "absolute", this.canvasElement.style.inset = "0", this.canvasElement.style.pointerEvents = "none", this.canvasElement.style.zIndex = "40", this.container.appendChild(this.canvasElement), this.ctx = this.canvasElement.getContext("2d"), this._setupCanvas();
|
|
14
14
|
}
|
|
15
15
|
/**
|
|
16
16
|
* Configures canvas dimensions with device pixel ratio scaling
|
|
@@ -41,45 +41,40 @@ class p extends l {
|
|
|
41
41
|
super.setViewport(t), this._setupCanvas();
|
|
42
42
|
}
|
|
43
43
|
/**
|
|
44
|
-
* Updates timeline position and
|
|
44
|
+
* Updates timeline position and draws progressive strokes
|
|
45
45
|
*
|
|
46
|
-
*
|
|
47
|
-
*
|
|
48
|
-
*
|
|
46
|
+
* Redraws the canvas with strokes progressively drawn based on elapsed time.
|
|
47
|
+
* Clears the canvas and redraws all visible strokes.
|
|
48
|
+
* Renders once per call - no continuous loop.
|
|
49
49
|
*
|
|
50
50
|
* @param {number} nowSec - Current timeline position in seconds
|
|
51
51
|
* @throws {Error} If called after layer is destroyed
|
|
52
52
|
* @override
|
|
53
53
|
*/
|
|
54
54
|
updateTime(t) {
|
|
55
|
-
super.updateTime(t), this.
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
const h = a.x * this.viewport.width, r = a.y * this.viewport.height;
|
|
68
|
-
n ? this.ctx.lineTo(h, r) : (this.ctx.moveTo(h, r), n = !0);
|
|
69
|
-
}
|
|
70
|
-
n && this.ctx.stroke();
|
|
55
|
+
if (super.updateTime(t), !this.isDestroyed) {
|
|
56
|
+
this.ctx.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);
|
|
57
|
+
for (const e of this.annotations) {
|
|
58
|
+
if (t < e.start) continue;
|
|
59
|
+
const o = e.end - e.start, r = Math.min(t - e.start, o);
|
|
60
|
+
for (const s of e.strokes || []) {
|
|
61
|
+
this.ctx.lineCap = "round", this.ctx.lineJoin = "round", this.ctx.strokeStyle = s.color || "#1f2937", this.ctx.lineWidth = s.size || 3, this.ctx.beginPath();
|
|
62
|
+
let i = !1;
|
|
63
|
+
for (const n of s.points) {
|
|
64
|
+
if (n.t > r) break;
|
|
65
|
+
const a = n.x * this.viewport.width, h = n.y * this.viewport.height;
|
|
66
|
+
i ? this.ctx.lineTo(a, h) : (this.ctx.moveTo(a, h), i = !0);
|
|
71
67
|
}
|
|
68
|
+
i && this.ctx.stroke();
|
|
72
69
|
}
|
|
73
|
-
this.rafId = requestAnimationFrame(s);
|
|
74
70
|
}
|
|
75
|
-
}
|
|
76
|
-
s();
|
|
71
|
+
}
|
|
77
72
|
}
|
|
78
73
|
/**
|
|
79
74
|
* Renders the layer content
|
|
80
75
|
*
|
|
81
|
-
* No-op for DrawingLayer - canvas rendering happens in updateTime()
|
|
82
|
-
* Canvas element is created once in constructor
|
|
76
|
+
* No-op for DrawingLayer - canvas rendering happens in updateTime().
|
|
77
|
+
* Canvas element is created once in constructor.
|
|
83
78
|
*
|
|
84
79
|
* @override
|
|
85
80
|
*/
|
|
@@ -88,7 +83,7 @@ class p extends l {
|
|
|
88
83
|
/**
|
|
89
84
|
* Updates the visual state of the layer
|
|
90
85
|
*
|
|
91
|
-
* Not used for DrawingLayer - updateTime() handles
|
|
86
|
+
* Not used for DrawingLayer - updateTime() handles drawing directly.
|
|
92
87
|
*
|
|
93
88
|
* @override
|
|
94
89
|
*/
|
|
@@ -97,13 +92,13 @@ class p extends l {
|
|
|
97
92
|
/**
|
|
98
93
|
* Destroys the layer and releases resources
|
|
99
94
|
*
|
|
100
|
-
*
|
|
95
|
+
* Clears references and removes canvas from DOM.
|
|
101
96
|
* Safe to call multiple times (idempotent).
|
|
102
97
|
*
|
|
103
98
|
* @override
|
|
104
99
|
*/
|
|
105
100
|
destroy() {
|
|
106
|
-
this.
|
|
101
|
+
this.ctx = null, this.canvasElement && this.canvasElement.parentNode && this.canvasElement.parentNode.removeChild(this.canvasElement), this.canvasElement = null, super.destroy();
|
|
107
102
|
}
|
|
108
103
|
}
|
|
109
104
|
export {
|
package/dist/index9.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index9.js","sources":["../src/layers/DrawingLayer.js"],"sourcesContent":["import BaseLayer from './BaseLayer.js';\n\n/**\n * DrawingLayer - Renders ink/drawing annotations on HTML canvas\n *\n * Extends BaseLayer to provide progressive stroke animation for ink annotations.\n * Draws stroke points incrementally based on timeline position using requestAnimationFrame.\n * Handles device pixel ratio scaling for crisp rendering on high-DPI displays.\n *\n * Features:\n * - Progressive stroke drawing point-by-point\n * - Multiple strokes per annotation with custom colors/sizes\n * - Device pixel ratio handling for Retina displays\n * - Smooth 60fps animation with RAF\n * - Efficient canvas clear/redraw cycle\n *\n * @extends BaseLayer\n */\nclass DrawingLayer extends BaseLayer {\n /**\n * Creates a new DrawingLayer instance\n *\n * @param {HTMLElement} container - Parent DOM element for layer content\n * @param {Object} viewport - Initial viewport dimensions\n * @param {number} viewport.width - Viewport width in pixels\n * @param {number} viewport.height - Viewport height in pixels\n * @param {number} viewport.scale - PDF scale/zoom level\n */\n constructor(container, viewport) {\n super(container, viewport);\n\n // Create canvas element\n this.canvasElement = document.createElement('canvas');\n this.canvasElement.style.position = 'absolute';\n this.canvasElement.style.inset = '0';\n this.canvasElement.style.pointerEvents = 'none';\n this.canvasElement.style.zIndex = '40';\n\n // Append to container\n this.container.appendChild(this.canvasElement);\n\n // Get 2D context\n this.ctx = this.canvasElement.getContext('2d');\n\n //
|
|
1
|
+
{"version":3,"file":"index9.js","sources":["../src/layers/DrawingLayer.js"],"sourcesContent":["import BaseLayer from './BaseLayer.js';\n\n/**\n * DrawingLayer - Renders ink/drawing annotations on HTML canvas\n *\n * Extends BaseLayer to provide progressive stroke animation for ink annotations.\n * Draws stroke points incrementally based on timeline position using requestAnimationFrame.\n * Handles device pixel ratio scaling for crisp rendering on high-DPI displays.\n *\n * Features:\n * - Progressive stroke drawing point-by-point\n * - Multiple strokes per annotation with custom colors/sizes\n * - Device pixel ratio handling for Retina displays\n * - Smooth 60fps animation with RAF\n * - Efficient canvas clear/redraw cycle\n *\n * @extends BaseLayer\n */\nclass DrawingLayer extends BaseLayer {\n /**\n * Creates a new DrawingLayer instance\n *\n * @param {HTMLElement} container - Parent DOM element for layer content\n * @param {Object} viewport - Initial viewport dimensions\n * @param {number} viewport.width - Viewport width in pixels\n * @param {number} viewport.height - Viewport height in pixels\n * @param {number} viewport.scale - PDF scale/zoom level\n */\n constructor(container, viewport) {\n super(container, viewport);\n\n // Create canvas element\n this.canvasElement = document.createElement('canvas');\n this.canvasElement.style.position = 'absolute';\n this.canvasElement.style.inset = '0';\n this.canvasElement.style.pointerEvents = 'none';\n this.canvasElement.style.zIndex = '40';\n\n // Append to container\n this.container.appendChild(this.canvasElement);\n\n // Get 2D context\n this.ctx = this.canvasElement.getContext('2d');\n\n // Setup canvas with device pixel ratio\n this._setupCanvas();\n }\n\n /**\n * Configures canvas dimensions with device pixel ratio scaling\n *\n * Sets canvas buffer size for high-resolution rendering on Retina displays\n * while maintaining correct display size in CSS pixels. Scales context\n * transform to allow drawing with CSS pixel coordinates.\n *\n * @private\n */\n _setupCanvas() {\n const dpr = window.devicePixelRatio || 1;\n\n // Set canvas buffer resolution (high-res for crisp rendering)\n this.canvasElement.width = Math.round(this.viewport.width * dpr);\n this.canvasElement.height = Math.round(this.viewport.height * dpr);\n\n // Set canvas display size (CSS pixels)\n this.canvasElement.style.width = `${this.viewport.width}px`;\n this.canvasElement.style.height = `${this.viewport.height}px`;\n\n // Scale context to account for device pixel ratio\n this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n }\n\n /**\n * Updates viewport dimensions and resizes canvas\n *\n * Reconfigures canvas buffer and display size when viewport changes\n * due to page navigation or zoom operations.\n *\n * @param {Object} viewport - New viewport dimensions\n * @param {number} viewport.width - Viewport width in pixels\n * @param {number} viewport.height - Viewport height in pixels\n * @param {number} viewport.scale - PDF scale/zoom level\n * @override\n */\n setViewport(viewport) {\n super.setViewport(viewport);\n this._setupCanvas();\n }\n\n /**\n * Updates timeline position and draws progressive strokes\n *\n * Redraws the canvas with strokes progressively drawn based on elapsed time.\n * Clears the canvas and redraws all visible strokes.\n * Renders once per call - no continuous loop.\n *\n * @param {number} nowSec - Current timeline position in seconds\n * @throws {Error} If called after layer is destroyed\n * @override\n */\n updateTime(nowSec) {\n super.updateTime(nowSec);\n\n // Check destroyed state\n if (this.isDestroyed) return;\n\n // Clear canvas\n this.ctx.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);\n\n // Draw each annotation\n for (const a of this.annotations) {\n // Skip annotations that haven't started yet\n if (nowSec < a.start) continue;\n\n // Calculate elapsed time (capped at duration for persistence)\n const duration = a.end - a.start;\n const elapsed = Math.min(nowSec - a.start, duration);\n\n // Draw each stroke\n for (const stroke of (a.strokes || [])) {\n // Configure stroke style\n this.ctx.lineCap = 'round';\n this.ctx.lineJoin = 'round';\n this.ctx.strokeStyle = stroke.color || '#1f2937';\n this.ctx.lineWidth = stroke.size || 3;\n this.ctx.beginPath();\n\n let started = false;\n\n // Draw points up to current time\n for (const point of stroke.points) {\n // Skip points that haven't been drawn yet\n if (point.t > elapsed) break;\n\n // Convert normalized coordinates to canvas pixels\n const x = point.x * this.viewport.width;\n const y = point.y * this.viewport.height;\n\n if (!started) {\n this.ctx.moveTo(x, y);\n started = true;\n } else {\n this.ctx.lineTo(x, y);\n }\n }\n\n // Render the stroke\n if (started) {\n this.ctx.stroke();\n }\n }\n }\n }\n\n /**\n * Renders the layer content\n *\n * No-op for DrawingLayer - canvas rendering happens in updateTime().\n * Canvas element is created once in constructor.\n *\n * @override\n */\n render() {\n // No-op: Canvas rendering happens in updateTime()\n // Canvas element is created once in constructor\n }\n\n /**\n * Updates the visual state of the layer\n *\n * Not used for DrawingLayer - updateTime() handles drawing directly.\n *\n * @override\n */\n update() {\n // Not used - updateTime handles drawing directly\n }\n\n /**\n * Destroys the layer and releases resources\n *\n * Clears references and removes canvas from DOM.\n * Safe to call multiple times (idempotent).\n *\n * @override\n */\n destroy() {\n // Clear context reference\n this.ctx = null;\n\n // Remove canvas from DOM\n if (this.canvasElement && this.canvasElement.parentNode) {\n this.canvasElement.parentNode.removeChild(this.canvasElement);\n }\n this.canvasElement = null;\n\n // Call parent cleanup (always last)\n super.destroy();\n }\n}\n\nexport default DrawingLayer;\n"],"names":["DrawingLayer","BaseLayer","container","viewport","dpr","nowSec","a","duration","elapsed","stroke","started","point","x","y"],"mappings":";AAkBA,MAAMA,UAAqBC,EAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUnC,YAAYC,GAAWC,GAAU;AAC/B,UAAMD,GAAWC,CAAQ,GAGzB,KAAK,gBAAgB,SAAS,cAAc,QAAQ,GACpD,KAAK,cAAc,MAAM,WAAW,YACpC,KAAK,cAAc,MAAM,QAAQ,KACjC,KAAK,cAAc,MAAM,gBAAgB,QACzC,KAAK,cAAc,MAAM,SAAS,MAGlC,KAAK,UAAU,YAAY,KAAK,aAAa,GAG7C,KAAK,MAAM,KAAK,cAAc,WAAW,IAAI,GAG7C,KAAK,aAAY;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWA,eAAe;AACb,UAAMC,IAAM,OAAO,oBAAoB;AAGvC,SAAK,cAAc,QAAQ,KAAK,MAAM,KAAK,SAAS,QAAQA,CAAG,GAC/D,KAAK,cAAc,SAAS,KAAK,MAAM,KAAK,SAAS,SAASA,CAAG,GAGjE,KAAK,cAAc,MAAM,QAAQ,GAAG,KAAK,SAAS,KAAK,MACvD,KAAK,cAAc,MAAM,SAAS,GAAG,KAAK,SAAS,MAAM,MAGzD,KAAK,IAAI,aAAaA,GAAK,GAAG,GAAGA,GAAK,GAAG,CAAC;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcA,YAAYD,GAAU;AACpB,UAAM,YAAYA,CAAQ,GAC1B,KAAK,aAAY;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaA,WAAWE,GAAQ;AAIjB,QAHA,MAAM,WAAWA,CAAM,GAGnB,MAAK,aAGT;AAAA,WAAK,IAAI,UAAU,GAAG,GAAG,KAAK,cAAc,OAAO,KAAK,cAAc,MAAM;AAG5E,iBAAWC,KAAK,KAAK,aAAa;AAEhC,YAAID,IAASC,EAAE,MAAO;AAGtB,cAAMC,IAAWD,EAAE,MAAMA,EAAE,OACrBE,IAAU,KAAK,IAAIH,IAASC,EAAE,OAAOC,CAAQ;AAGnD,mBAAWE,KAAWH,EAAE,WAAW,CAAA,GAAK;AAEtC,eAAK,IAAI,UAAU,SACnB,KAAK,IAAI,WAAW,SACpB,KAAK,IAAI,cAAcG,EAAO,SAAS,WACvC,KAAK,IAAI,YAAYA,EAAO,QAAQ,GACpC,KAAK,IAAI,UAAS;AAElB,cAAIC,IAAU;AAGd,qBAAWC,KAASF,EAAO,QAAQ;AAEjC,gBAAIE,EAAM,IAAIH,EAAS;AAGvB,kBAAMI,IAAID,EAAM,IAAI,KAAK,SAAS,OAC5BE,IAAIF,EAAM,IAAI,KAAK,SAAS;AAElC,YAAKD,IAIH,KAAK,IAAI,OAAOE,GAAGC,CAAC,KAHpB,KAAK,IAAI,OAAOD,GAAGC,CAAC,GACpBH,IAAU;AAAA,UAId;AAGA,UAAIA,KACF,KAAK,IAAI,OAAM;AAAA,QAEnB;AAAA,MACF;AAAA;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUA,SAAS;AAAA,EAGT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,SAAS;AAAA,EAET;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUA,UAAU;AAER,SAAK,MAAM,MAGP,KAAK,iBAAiB,KAAK,cAAc,cAC3C,KAAK,cAAc,WAAW,YAAY,KAAK,aAAa,GAE9D,KAAK,gBAAgB,MAGrB,MAAM,QAAO;AAAA,EACf;AACF;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "web-annotation-renderer",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Framework-agnostic PDF annotation renderer with timeline synchronization for educational content and interactive documents",
|
|
6
6
|
"keywords": [
|
|
@@ -34,6 +34,10 @@
|
|
|
34
34
|
"import": "./dist/index.js",
|
|
35
35
|
"require": "./dist/index.cjs"
|
|
36
36
|
},
|
|
37
|
+
"./extract": {
|
|
38
|
+
"import": "./dist/index.js",
|
|
39
|
+
"require": "./dist/index.cjs"
|
|
40
|
+
},
|
|
37
41
|
"./package.json": "./package.json"
|
|
38
42
|
},
|
|
39
43
|
"files": [
|