web-annotation-renderer 0.5.1 → 0.5.2
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/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +39 -33
- package/dist/index.js.map +1 -1
- package/dist/index10.cjs +1 -1
- package/dist/index10.cjs.map +1 -1
- package/dist/index10.js +154 -119
- package/dist/index10.js.map +1 -1
- package/dist/index11.cjs +1 -1
- package/dist/index11.js +1 -1
- package/dist/index12.cjs +1 -1
- package/dist/index12.js +1 -1
- package/dist/index14.cjs +1 -1
- package/dist/index14.js +1 -1
- package/dist/index15.cjs +1 -1
- package/dist/index15.cjs.map +1 -1
- package/dist/index15.js +23 -117
- package/dist/index15.js.map +1 -1
- package/dist/index16.cjs +1 -1
- package/dist/index16.cjs.map +1 -1
- package/dist/index16.js +53 -103
- package/dist/index16.js.map +1 -1
- package/dist/index17.cjs +1 -1
- package/dist/index17.cjs.map +1 -1
- package/dist/index17.js +22 -57
- package/dist/index17.js.map +1 -1
- package/dist/index18.cjs +1 -1
- package/dist/index18.cjs.map +1 -1
- package/dist/index18.js +113 -136
- package/dist/index18.js.map +1 -1
- package/dist/index19.cjs +1 -1
- package/dist/index19.cjs.map +1 -1
- package/dist/index19.js +101 -35
- package/dist/index19.js.map +1 -1
- package/dist/index20.cjs +1 -1
- package/dist/index20.cjs.map +1 -1
- package/dist/index20.js +58 -36
- package/dist/index20.js.map +1 -1
- package/dist/index21.cjs +1 -1
- package/dist/index21.cjs.map +1 -1
- package/dist/index21.js +140 -37
- package/dist/index21.js.map +1 -1
- package/dist/index22.cjs +1 -1
- package/dist/index22.cjs.map +1 -1
- package/dist/index22.js +37 -21
- package/dist/index22.js.map +1 -1
- package/dist/index23.cjs +1 -1
- package/dist/index23.cjs.map +1 -1
- package/dist/index23.js +37 -5
- package/dist/index23.js.map +1 -1
- package/dist/index24.cjs +1 -1
- package/dist/index24.cjs.map +1 -1
- package/dist/index24.js +37 -4
- package/dist/index24.js.map +1 -1
- package/dist/index25.cjs +2 -0
- package/dist/index25.cjs.map +1 -0
- package/dist/index25.js +43 -0
- package/dist/index25.js.map +1 -0
- package/dist/index26.cjs +2 -0
- package/dist/index26.cjs.map +1 -0
- package/dist/index26.js +8 -0
- package/dist/index26.js.map +1 -0
- package/dist/index27.cjs +2 -0
- package/dist/index27.cjs.map +1 -0
- package/dist/index27.js +8 -0
- package/dist/index27.js.map +1 -0
- package/dist/index5.cjs +1 -1
- package/dist/index5.cjs.map +1 -1
- package/dist/index5.js +57 -36
- package/dist/index5.js.map +1 -1
- package/package.json +1 -1
package/dist/index17.js
CHANGED
|
@@ -1,62 +1,27 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
color: "rgba(31, 41, 55, 1.0)",
|
|
13
|
-
width: 3
|
|
1
|
+
function h(s, t) {
|
|
2
|
+
const { id: p, start: f, end: d, cx: o, cy: r, rx: e, ry: c } = s;
|
|
3
|
+
if (typeof o != "number" || typeof r != "number" || typeof e != "number" || typeof c != "number")
|
|
4
|
+
return [];
|
|
5
|
+
const i = 36, u = [];
|
|
6
|
+
for (let n = 0; n <= i; n++) {
|
|
7
|
+
const a = n / i * Math.PI * 2;
|
|
8
|
+
u.push([
|
|
9
|
+
o + e * Math.cos(a),
|
|
10
|
+
r + c * Math.sin(a)
|
|
11
|
+
]);
|
|
14
12
|
}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
},
|
|
25
|
-
ink: {
|
|
26
|
-
color: "rgba(30, 64, 175, 1.0)",
|
|
27
|
-
width: 3
|
|
28
|
-
}
|
|
29
|
-
}, i = {
|
|
30
|
-
name: "minimal",
|
|
31
|
-
highlight: {
|
|
32
|
-
color: "rgba(156, 163, 175, 0.25)",
|
|
33
|
-
width: 20
|
|
34
|
-
},
|
|
35
|
-
handText: {
|
|
36
|
-
color: "rgba(75, 85, 99, 1.0)",
|
|
37
|
-
width: 1.5
|
|
38
|
-
},
|
|
39
|
-
ink: {
|
|
40
|
-
color: "rgba(75, 85, 99, 1.0)",
|
|
41
|
-
width: 2
|
|
42
|
-
}
|
|
43
|
-
}, t = {
|
|
44
|
-
default: r,
|
|
45
|
-
blue: e,
|
|
46
|
-
minimal: i
|
|
47
|
-
};
|
|
48
|
-
function a(o) {
|
|
49
|
-
return t[o] || t.default;
|
|
50
|
-
}
|
|
51
|
-
function h() {
|
|
52
|
-
return Object.keys(t);
|
|
13
|
+
return [{
|
|
14
|
+
id: p,
|
|
15
|
+
points: u,
|
|
16
|
+
start: f,
|
|
17
|
+
end: d,
|
|
18
|
+
color: t.color || "rgba(255, 165, 0, 0.8)",
|
|
19
|
+
width: t.width || 3,
|
|
20
|
+
lineCap: t.lineCap || "round"
|
|
21
|
+
}];
|
|
53
22
|
}
|
|
54
23
|
export {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
i as MINIMAL_PRESET,
|
|
58
|
-
t as default,
|
|
59
|
-
a as getPreset,
|
|
60
|
-
h as getPresetNames
|
|
24
|
+
h as circleToStrokes,
|
|
25
|
+
h as default
|
|
61
26
|
};
|
|
62
27
|
//# sourceMappingURL=index17.js.map
|
package/dist/index17.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index17.js","sources":["../src/
|
|
1
|
+
{"version":3,"file":"index17.js","sources":["../src/converters/circle.js"],"sourcesContent":["/**\n * Circle Converter - Converts circle annotations to stroke commands\n *\n * Transforms circle/ellipse data into stroke paths that can be\n * rendered progressively on canvas.\n *\n * @module converters/circle\n */\n\n/**\n * Converts a circle annotation to stroke commands\n *\n * Generates an ellipse path from 0° to 360° that renders\n * progressively around the perimeter.\n *\n * @param {Object} annotation - Circle annotation object\n * @param {string} annotation.id - Unique identifier\n * @param {number} annotation.start - Start time in seconds\n * @param {number} annotation.end - End time in seconds\n * @param {number} annotation.cx - Center x position (0-1 normalized)\n * @param {number} annotation.cy - Center y position (0-1 normalized)\n * @param {number} annotation.rx - Horizontal radius (0-1 normalized)\n * @param {number} annotation.ry - Vertical radius (0-1 normalized)\n * @param {Object} [annotation.style] - Optional style overrides\n * @param {Object} style - Resolved style configuration\n * @param {string} style.color - Stroke color\n * @param {number} style.width - Stroke width in pixels\n * @param {string} [style.lineCap='round'] - Line cap style\n * @returns {Array<Object>} Array of stroke commands\n */\nexport function circleToStrokes(annotation, style) {\n const { id, start, end, cx, cy, rx, ry } = annotation;\n\n if (typeof cx !== 'number' || typeof cy !== 'number' ||\n typeof rx !== 'number' || typeof ry !== 'number') {\n return [];\n }\n\n // Generate ellipse points (36 segments + closing point)\n const numPoints = 36;\n const points = [];\n\n for (let i = 0; i <= numPoints; i++) {\n const angle = (i / numPoints) * Math.PI * 2;\n points.push([\n cx + rx * Math.cos(angle),\n cy + ry * Math.sin(angle)\n ]);\n }\n\n return [{\n id,\n points,\n start,\n end,\n color: style.color || 'rgba(255, 165, 0, 0.8)',\n width: style.width || 3,\n lineCap: style.lineCap || 'round'\n }];\n}\n\nexport default circleToStrokes;\n"],"names":["circleToStrokes","annotation","style","id","start","end","cx","cy","rx","ry","numPoints","points","i","angle"],"mappings":"AA8BO,SAASA,EAAgBC,GAAYC,GAAO;AACjD,QAAM,EAAE,IAAAC,GAAI,OAAAC,GAAO,KAAAC,GAAK,IAAAC,GAAI,IAAAC,GAAI,IAAAC,GAAI,IAAAC,EAAE,IAAKR;AAE3C,MAAI,OAAOK,KAAO,YAAY,OAAOC,KAAO,YACxC,OAAOC,KAAO,YAAY,OAAOC,KAAO;AAC1C,WAAO,CAAA;AAIT,QAAMC,IAAY,IACZC,IAAS,CAAA;AAEf,WAASC,IAAI,GAAGA,KAAKF,GAAWE,KAAK;AACnC,UAAMC,IAASD,IAAIF,IAAa,KAAK,KAAK;AAC1C,IAAAC,EAAO,KAAK;AAAA,MACVL,IAAKE,IAAK,KAAK,IAAIK,CAAK;AAAA,MACxBN,IAAKE,IAAK,KAAK,IAAII,CAAK;AAAA,IAC9B,CAAK;AAAA,EACH;AAEA,SAAO,CAAC;AAAA,IACN,IAAAV;AAAA,IACA,QAAAQ;AAAA,IACA,OAAAP;AAAA,IACA,KAAAC;AAAA,IACA,OAAOH,EAAM,SAAS;AAAA,IACtB,OAAOA,EAAM,SAAS;AAAA,IACtB,SAASA,EAAM,WAAW;AAAA,EAC9B,CAAG;AACH;"}
|
package/dist/index18.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("./index19.cjs");class o{constructor(t,s){this.canvas=t,this.dimensions={...s},this.ctx=null,this.strokeDrawer=null,this.strokeCommands=[],this.currentTime=0,this.isDestroyed=!1,this._setupCanvas()}_setupCanvas(){const t=window.devicePixelRatio||1,{width:s,height:e}=this.dimensions;this.canvas.width=Math.round(s*t),this.canvas.height=Math.round(e*t),this.canvas.style.width=`${s}px`,this.canvas.style.height=`${e}px`,this.ctx=this.canvas.getContext("2d"),this.ctx.setTransform(t,0,0,t,0,0),this.strokeDrawer=new n.default(this.ctx,this.dimensions)}setStrokeCommands(t){this.isDestroyed||(this.strokeCommands=t||[],this.strokeCommands.sort((s,e)=>{const r=s.start??0,i=e.start??0;return r-i}))}setTime(t){this.isDestroyed||(this.currentTime=t)}setDimensions(t){this.isDestroyed||(this.dimensions={...t},this._setupCanvas())}render(){if(!(this.isDestroyed||!this.ctx)){this.strokeDrawer.clear();for(const t of this.strokeCommands){const s=t.start??0,e=t.end??s+1;if(this.currentTime<s)continue;const r=this._calculateProgress(s,e);this.strokeDrawer.drawStroke(t,r)}}}_calculateProgress(t,s){if(this.currentTime>=s)return 1;const e=s-t;if(e<=0)return 1;const r=this.currentTime-t;return Math.max(0,Math.min(1,r/e))}clear(){this.isDestroyed||!this.strokeDrawer||this.strokeDrawer.clear()}getVisibleStrokeCount(){let t=0;for(const s of this.strokeCommands){const e=s.start??0;this.currentTime>=e&&t++}return t}destroy(){this.isDestroyed||(this.strokeCommands=[],this.strokeDrawer=null,this.ctx=null,this.canvas=null,this.isDestroyed=!0)}}exports.default=o;
|
|
2
2
|
//# sourceMappingURL=index18.cjs.map
|
package/dist/index18.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index18.cjs","sources":["../src/
|
|
1
|
+
{"version":3,"file":"index18.cjs","sources":["../src/pen/GradualRenderer.js"],"sourcesContent":["import StrokeDrawer from './StrokeDrawer.js';\n\n/**\n * GradualRenderer - Progressive stroke rendering synced to timeline\n *\n * Renders stroke commands with progressive reveal based on current\n * audio/video timeline position.\n *\n * Features:\n * - Progressive stroke reveal synced to audio timeline\n * - High-DPI canvas support for crisp rendering\n * - Efficient single-pass render per timeline update\n * - Accepts timing in seconds (start/end fields)\n *\n * @example\n * const renderer = new GradualRenderer(canvas, { width: 800, height: 600 });\n * renderer.setStrokeCommands(commands);\n * renderer.setTime(1.5); // seconds\n * renderer.render();\n */\nclass GradualRenderer {\n /**\n * Creates a new GradualRenderer instance\n *\n * @param {HTMLCanvasElement} canvas - Canvas element for rendering\n * @param {Object} pdfDimensions - PDF page dimensions\n * @param {number} pdfDimensions.width - Page width in pixels\n * @param {number} pdfDimensions.height - Page height in pixels\n */\n constructor(canvas, pdfDimensions) {\n this.canvas = canvas;\n this.dimensions = { ...pdfDimensions };\n this.ctx = null;\n this.strokeDrawer = null;\n this.strokeCommands = [];\n this.currentTime = 0; // seconds\n this.isDestroyed = false;\n\n this._setupCanvas();\n }\n\n /**\n * Configures canvas for high-DPI rendering\n *\n * @private\n */\n _setupCanvas() {\n const dpr = window.devicePixelRatio || 1;\n const { width, height } = this.dimensions;\n\n // Set canvas buffer resolution (high-res)\n this.canvas.width = Math.round(width * dpr);\n this.canvas.height = Math.round(height * dpr);\n\n // Set canvas display size (CSS)\n this.canvas.style.width = `${width}px`;\n this.canvas.style.height = `${height}px`;\n\n // Get context and scale for DPR\n this.ctx = this.canvas.getContext('2d');\n this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n\n // Create stroke drawer\n this.strokeDrawer = new StrokeDrawer(this.ctx, this.dimensions);\n }\n\n /**\n * Sets the stroke commands to render\n *\n * @param {Array} commands - Array of stroke command objects\n * @param {string} commands[].id - Unique stroke identifier\n * @param {Array} commands[].points - [[x, y], ...] normalized coordinates\n * @param {string} commands[].color - Stroke color\n * @param {number} commands[].width - Stroke width in pixels\n * @param {number} commands[].start - Start time in seconds\n * @param {number} commands[].end - End time in seconds\n */\n setStrokeCommands(commands) {\n if (this.isDestroyed) return;\n\n this.strokeCommands = commands || [];\n\n // Sort by start time for efficient rendering\n this.strokeCommands.sort((a, b) => {\n const startA = a.start ?? 0;\n const startB = b.start ?? 0;\n return startA - startB;\n });\n }\n\n /**\n * Sets the current timeline position\n *\n * @param {number} time - Current time in seconds\n */\n setTime(time) {\n if (this.isDestroyed) return;\n this.currentTime = time;\n }\n\n /**\n * Updates dimensions when viewport changes\n *\n * @param {Object} dimensions - New dimensions\n * @param {number} dimensions.width - Width in pixels\n * @param {number} dimensions.height - Height in pixels\n */\n setDimensions(dimensions) {\n if (this.isDestroyed) return;\n\n this.dimensions = { ...dimensions };\n this._setupCanvas();\n }\n\n /**\n * Renders all visible strokes at current timeline position\n *\n * Called once per timeline update. Clears canvas and redraws\n * all strokes with appropriate progress.\n */\n render() {\n if (this.isDestroyed || !this.ctx) return;\n\n // Clear canvas\n this.strokeDrawer.clear();\n\n // Draw each stroke based on timing\n for (const stroke of this.strokeCommands) {\n const start = stroke.start ?? 0;\n const end = stroke.end ?? start + 1;\n\n // Skip strokes that haven't started\n if (this.currentTime < start) {\n continue;\n }\n\n // Calculate progress\n const progress = this._calculateProgress(start, end);\n\n // Draw stroke with progress\n this.strokeDrawer.drawStroke(stroke, progress);\n }\n }\n\n /**\n * Calculates stroke progress based on timing\n *\n * @private\n * @param {number} start - Stroke start time in seconds\n * @param {number} end - Stroke end time in seconds\n * @returns {number} Progress from 0 to 1\n */\n _calculateProgress(start, end) {\n if (this.currentTime >= end) {\n return 1.0; // Fully visible\n }\n\n const duration = end - start;\n if (duration <= 0) return 1.0;\n\n const elapsed = this.currentTime - start;\n return Math.max(0, Math.min(1, elapsed / duration));\n }\n\n /**\n * Clears the canvas\n */\n clear() {\n if (this.isDestroyed || !this.strokeDrawer) return;\n this.strokeDrawer.clear();\n }\n\n /**\n * Gets visible stroke count at current time\n *\n * @returns {number} Number of visible strokes\n */\n getVisibleStrokeCount() {\n let count = 0;\n for (const stroke of this.strokeCommands) {\n const start = stroke.start ?? 0;\n if (this.currentTime >= start) {\n count++;\n }\n }\n return count;\n }\n\n /**\n * Destroys the renderer and releases resources\n */\n destroy() {\n if (this.isDestroyed) return;\n\n this.strokeCommands = [];\n this.strokeDrawer = null;\n this.ctx = null;\n this.canvas = null;\n this.isDestroyed = true;\n }\n}\n\nexport default GradualRenderer;\n"],"names":["GradualRenderer","canvas","pdfDimensions","dpr","width","height","StrokeDrawer","commands","a","b","startA","startB","time","dimensions","stroke","start","end","progress","duration","elapsed","count"],"mappings":"6IAoBA,MAAMA,CAAgB,CASpB,YAAYC,EAAQC,EAAe,CACjC,KAAK,OAASD,EACd,KAAK,WAAa,CAAE,GAAGC,CAAa,EACpC,KAAK,IAAM,KACX,KAAK,aAAe,KACpB,KAAK,eAAiB,CAAA,EACtB,KAAK,YAAc,EACnB,KAAK,YAAc,GAEnB,KAAK,aAAY,CACnB,CAOA,cAAe,CACb,MAAMC,EAAM,OAAO,kBAAoB,EACjC,CAAE,MAAAC,EAAO,OAAAC,CAAM,EAAK,KAAK,WAG/B,KAAK,OAAO,MAAQ,KAAK,MAAMD,EAAQD,CAAG,EAC1C,KAAK,OAAO,OAAS,KAAK,MAAME,EAASF,CAAG,EAG5C,KAAK,OAAO,MAAM,MAAQ,GAAGC,CAAK,KAClC,KAAK,OAAO,MAAM,OAAS,GAAGC,CAAM,KAGpC,KAAK,IAAM,KAAK,OAAO,WAAW,IAAI,EACtC,KAAK,IAAI,aAAaF,EAAK,EAAG,EAAGA,EAAK,EAAG,CAAC,EAG1C,KAAK,aAAe,IAAIG,EAAAA,QAAa,KAAK,IAAK,KAAK,UAAU,CAChE,CAaA,kBAAkBC,EAAU,CACtB,KAAK,cAET,KAAK,eAAiBA,GAAY,CAAA,EAGlC,KAAK,eAAe,KAAK,CAACC,EAAGC,IAAM,CACjC,MAAMC,EAASF,EAAE,OAAS,EACpBG,EAASF,EAAE,OAAS,EAC1B,OAAOC,EAASC,CAClB,CAAC,EACH,CAOA,QAAQC,EAAM,CACR,KAAK,cACT,KAAK,YAAcA,EACrB,CASA,cAAcC,EAAY,CACpB,KAAK,cAET,KAAK,WAAa,CAAE,GAAGA,CAAU,EACjC,KAAK,aAAY,EACnB,CAQA,QAAS,CACP,GAAI,OAAK,aAAe,CAAC,KAAK,KAG9B,MAAK,aAAa,MAAK,EAGvB,UAAWC,KAAU,KAAK,eAAgB,CACxC,MAAMC,EAAQD,EAAO,OAAS,EACxBE,EAAMF,EAAO,KAAOC,EAAQ,EAGlC,GAAI,KAAK,YAAcA,EACrB,SAIF,MAAME,EAAW,KAAK,mBAAmBF,EAAOC,CAAG,EAGnD,KAAK,aAAa,WAAWF,EAAQG,CAAQ,CAC/C,EACF,CAUA,mBAAmBF,EAAOC,EAAK,CAC7B,GAAI,KAAK,aAAeA,EACtB,MAAO,GAGT,MAAME,EAAWF,EAAMD,EACvB,GAAIG,GAAY,EAAG,MAAO,GAE1B,MAAMC,EAAU,KAAK,YAAcJ,EACnC,OAAO,KAAK,IAAI,EAAG,KAAK,IAAI,EAAGI,EAAUD,CAAQ,CAAC,CACpD,CAKA,OAAQ,CACF,KAAK,aAAe,CAAC,KAAK,cAC9B,KAAK,aAAa,MAAK,CACzB,CAOA,uBAAwB,CACtB,IAAIE,EAAQ,EACZ,UAAWN,KAAU,KAAK,eAAgB,CACxC,MAAMC,EAAQD,EAAO,OAAS,EAC1B,KAAK,aAAeC,GACtBK,GAEJ,CACA,OAAOA,CACT,CAKA,SAAU,CACJ,KAAK,cAET,KAAK,eAAiB,CAAA,EACtB,KAAK,aAAe,KACpB,KAAK,IAAM,KACX,KAAK,OAAS,KACd,KAAK,YAAc,GACrB,CACF"}
|
package/dist/index18.js
CHANGED
|
@@ -1,144 +1,121 @@
|
|
|
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
|
-
|
|
1
|
+
import n from "./index19.js";
|
|
2
|
+
class h {
|
|
3
|
+
/**
|
|
4
|
+
* Creates a new GradualRenderer instance
|
|
5
|
+
*
|
|
6
|
+
* @param {HTMLCanvasElement} canvas - Canvas element for rendering
|
|
7
|
+
* @param {Object} pdfDimensions - PDF page dimensions
|
|
8
|
+
* @param {number} pdfDimensions.width - Page width in pixels
|
|
9
|
+
* @param {number} pdfDimensions.height - Page height in pixels
|
|
10
|
+
*/
|
|
11
|
+
constructor(t, s) {
|
|
12
|
+
this.canvas = t, this.dimensions = { ...s }, this.ctx = null, this.strokeDrawer = null, this.strokeCommands = [], this.currentTime = 0, this.isDestroyed = !1, this._setupCanvas();
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Configures canvas for high-DPI rendering
|
|
16
|
+
*
|
|
17
|
+
* @private
|
|
18
|
+
*/
|
|
19
|
+
_setupCanvas() {
|
|
20
|
+
const t = window.devicePixelRatio || 1, { width: s, height: e } = this.dimensions;
|
|
21
|
+
this.canvas.width = Math.round(s * t), this.canvas.height = Math.round(e * t), this.canvas.style.width = `${s}px`, this.canvas.style.height = `${e}px`, this.ctx = this.canvas.getContext("2d"), this.ctx.setTransform(t, 0, 0, t, 0, 0), this.strokeDrawer = new n(this.ctx, this.dimensions);
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Sets the stroke commands to render
|
|
25
|
+
*
|
|
26
|
+
* @param {Array} commands - Array of stroke command objects
|
|
27
|
+
* @param {string} commands[].id - Unique stroke identifier
|
|
28
|
+
* @param {Array} commands[].points - [[x, y], ...] normalized coordinates
|
|
29
|
+
* @param {string} commands[].color - Stroke color
|
|
30
|
+
* @param {number} commands[].width - Stroke width in pixels
|
|
31
|
+
* @param {number} commands[].start - Start time in seconds
|
|
32
|
+
* @param {number} commands[].end - End time in seconds
|
|
33
|
+
*/
|
|
34
|
+
setStrokeCommands(t) {
|
|
35
|
+
this.isDestroyed || (this.strokeCommands = t || [], this.strokeCommands.sort((s, e) => {
|
|
36
|
+
const r = s.start ?? 0, i = e.start ?? 0;
|
|
37
|
+
return r - i;
|
|
38
|
+
}));
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Sets the current timeline position
|
|
42
|
+
*
|
|
43
|
+
* @param {number} time - Current time in seconds
|
|
44
|
+
*/
|
|
45
|
+
setTime(t) {
|
|
46
|
+
this.isDestroyed || (this.currentTime = t);
|
|
47
|
+
}
|
|
48
|
+
/**
|
|
49
|
+
* Updates dimensions when viewport changes
|
|
50
|
+
*
|
|
51
|
+
* @param {Object} dimensions - New dimensions
|
|
52
|
+
* @param {number} dimensions.width - Width in pixels
|
|
53
|
+
* @param {number} dimensions.height - Height in pixels
|
|
54
|
+
*/
|
|
55
|
+
setDimensions(t) {
|
|
56
|
+
this.isDestroyed || (this.dimensions = { ...t }, this._setupCanvas());
|
|
57
|
+
}
|
|
58
|
+
/**
|
|
59
|
+
* Renders all visible strokes at current timeline position
|
|
60
|
+
*
|
|
61
|
+
* Called once per timeline update. Clears canvas and redraws
|
|
62
|
+
* all strokes with appropriate progress.
|
|
63
|
+
*/
|
|
64
|
+
render() {
|
|
65
|
+
if (!(this.isDestroyed || !this.ctx)) {
|
|
66
|
+
this.strokeDrawer.clear();
|
|
67
|
+
for (const t of this.strokeCommands) {
|
|
68
|
+
const s = t.start ?? 0, e = t.end ?? s + 1;
|
|
69
|
+
if (this.currentTime < s)
|
|
70
|
+
continue;
|
|
71
|
+
const r = this._calculateProgress(s, e);
|
|
72
|
+
this.strokeDrawer.drawStroke(t, r);
|
|
62
73
|
}
|
|
63
74
|
}
|
|
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
|
-
h: {
|
|
98
|
-
type: "number",
|
|
99
|
-
description: "Normalized height (0-1) of the text box",
|
|
100
|
-
minimum: 0,
|
|
101
|
-
maximum: 1
|
|
102
|
-
},
|
|
103
|
-
page: {
|
|
104
|
-
type: "integer",
|
|
105
|
-
description: "Page number (1-indexed) where the annotation appears",
|
|
106
|
-
minimum: 1
|
|
107
|
-
},
|
|
108
|
-
textColor: {
|
|
109
|
-
type: "string",
|
|
110
|
-
description: "Text color in hex format (e.g., '#000000' for black). Default is dark gray.",
|
|
111
|
-
default: "#1f2937"
|
|
112
|
-
},
|
|
113
|
-
bgColor: {
|
|
114
|
-
type: "string",
|
|
115
|
-
description: "Background color in rgba format or 'transparent' (e.g., 'rgba(255, 255, 255, 0.9)' or 'transparent'). Default is transparent for better visibility of underlying content. Use rgba format when background is needed.",
|
|
116
|
-
default: "transparent"
|
|
117
|
-
},
|
|
118
|
-
sentence_ref: {
|
|
119
|
-
type: "string",
|
|
120
|
-
description: "Reference to sentence marker (e.g., 'S1', 'S2') for timing synchronization",
|
|
121
|
-
pattern: "^S\\d+$"
|
|
122
|
-
}
|
|
123
|
-
},
|
|
124
|
-
required: ["content", "x", "y", "w", "h", "page", "sentence_ref"]
|
|
125
|
-
}
|
|
75
|
+
}
|
|
76
|
+
/**
|
|
77
|
+
* Calculates stroke progress based on timing
|
|
78
|
+
*
|
|
79
|
+
* @private
|
|
80
|
+
* @param {number} start - Stroke start time in seconds
|
|
81
|
+
* @param {number} end - Stroke end time in seconds
|
|
82
|
+
* @returns {number} Progress from 0 to 1
|
|
83
|
+
*/
|
|
84
|
+
_calculateProgress(t, s) {
|
|
85
|
+
if (this.currentTime >= s)
|
|
86
|
+
return 1;
|
|
87
|
+
const e = s - t;
|
|
88
|
+
if (e <= 0) return 1;
|
|
89
|
+
const r = this.currentTime - t;
|
|
90
|
+
return Math.max(0, Math.min(1, r / e));
|
|
91
|
+
}
|
|
92
|
+
/**
|
|
93
|
+
* Clears the canvas
|
|
94
|
+
*/
|
|
95
|
+
clear() {
|
|
96
|
+
this.isDestroyed || !this.strokeDrawer || this.strokeDrawer.clear();
|
|
97
|
+
}
|
|
98
|
+
/**
|
|
99
|
+
* Gets visible stroke count at current time
|
|
100
|
+
*
|
|
101
|
+
* @returns {number} Number of visible strokes
|
|
102
|
+
*/
|
|
103
|
+
getVisibleStrokeCount() {
|
|
104
|
+
let t = 0;
|
|
105
|
+
for (const s of this.strokeCommands) {
|
|
106
|
+
const e = s.start ?? 0;
|
|
107
|
+
this.currentTime >= e && t++;
|
|
126
108
|
}
|
|
109
|
+
return t;
|
|
110
|
+
}
|
|
111
|
+
/**
|
|
112
|
+
* Destroys the renderer and releases resources
|
|
113
|
+
*/
|
|
114
|
+
destroy() {
|
|
115
|
+
this.isDestroyed || (this.strokeCommands = [], this.strokeDrawer = null, this.ctx = null, this.canvas = null, this.isDestroyed = !0);
|
|
127
116
|
}
|
|
128
|
-
];
|
|
129
|
-
function o(e = []) {
|
|
130
|
-
if (!Array.isArray(e) || e.length === 0)
|
|
131
|
-
return [];
|
|
132
|
-
const n = {
|
|
133
|
-
highlight: "create_highlight_annotation",
|
|
134
|
-
text: "create_text_annotation"
|
|
135
|
-
}, i = e.map((t) => n[t]).filter(Boolean);
|
|
136
|
-
return r.filter(
|
|
137
|
-
(t) => i.includes(t.function.name)
|
|
138
|
-
);
|
|
139
117
|
}
|
|
140
118
|
export {
|
|
141
|
-
|
|
142
|
-
o as getAnnotationTools
|
|
119
|
+
h as default
|
|
143
120
|
};
|
|
144
121
|
//# sourceMappingURL=index18.js.map
|
package/dist/index18.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index18.js","sources":["../src/
|
|
1
|
+
{"version":3,"file":"index18.js","sources":["../src/pen/GradualRenderer.js"],"sourcesContent":["import StrokeDrawer from './StrokeDrawer.js';\n\n/**\n * GradualRenderer - Progressive stroke rendering synced to timeline\n *\n * Renders stroke commands with progressive reveal based on current\n * audio/video timeline position.\n *\n * Features:\n * - Progressive stroke reveal synced to audio timeline\n * - High-DPI canvas support for crisp rendering\n * - Efficient single-pass render per timeline update\n * - Accepts timing in seconds (start/end fields)\n *\n * @example\n * const renderer = new GradualRenderer(canvas, { width: 800, height: 600 });\n * renderer.setStrokeCommands(commands);\n * renderer.setTime(1.5); // seconds\n * renderer.render();\n */\nclass GradualRenderer {\n /**\n * Creates a new GradualRenderer instance\n *\n * @param {HTMLCanvasElement} canvas - Canvas element for rendering\n * @param {Object} pdfDimensions - PDF page dimensions\n * @param {number} pdfDimensions.width - Page width in pixels\n * @param {number} pdfDimensions.height - Page height in pixels\n */\n constructor(canvas, pdfDimensions) {\n this.canvas = canvas;\n this.dimensions = { ...pdfDimensions };\n this.ctx = null;\n this.strokeDrawer = null;\n this.strokeCommands = [];\n this.currentTime = 0; // seconds\n this.isDestroyed = false;\n\n this._setupCanvas();\n }\n\n /**\n * Configures canvas for high-DPI rendering\n *\n * @private\n */\n _setupCanvas() {\n const dpr = window.devicePixelRatio || 1;\n const { width, height } = this.dimensions;\n\n // Set canvas buffer resolution (high-res)\n this.canvas.width = Math.round(width * dpr);\n this.canvas.height = Math.round(height * dpr);\n\n // Set canvas display size (CSS)\n this.canvas.style.width = `${width}px`;\n this.canvas.style.height = `${height}px`;\n\n // Get context and scale for DPR\n this.ctx = this.canvas.getContext('2d');\n this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n\n // Create stroke drawer\n this.strokeDrawer = new StrokeDrawer(this.ctx, this.dimensions);\n }\n\n /**\n * Sets the stroke commands to render\n *\n * @param {Array} commands - Array of stroke command objects\n * @param {string} commands[].id - Unique stroke identifier\n * @param {Array} commands[].points - [[x, y], ...] normalized coordinates\n * @param {string} commands[].color - Stroke color\n * @param {number} commands[].width - Stroke width in pixels\n * @param {number} commands[].start - Start time in seconds\n * @param {number} commands[].end - End time in seconds\n */\n setStrokeCommands(commands) {\n if (this.isDestroyed) return;\n\n this.strokeCommands = commands || [];\n\n // Sort by start time for efficient rendering\n this.strokeCommands.sort((a, b) => {\n const startA = a.start ?? 0;\n const startB = b.start ?? 0;\n return startA - startB;\n });\n }\n\n /**\n * Sets the current timeline position\n *\n * @param {number} time - Current time in seconds\n */\n setTime(time) {\n if (this.isDestroyed) return;\n this.currentTime = time;\n }\n\n /**\n * Updates dimensions when viewport changes\n *\n * @param {Object} dimensions - New dimensions\n * @param {number} dimensions.width - Width in pixels\n * @param {number} dimensions.height - Height in pixels\n */\n setDimensions(dimensions) {\n if (this.isDestroyed) return;\n\n this.dimensions = { ...dimensions };\n this._setupCanvas();\n }\n\n /**\n * Renders all visible strokes at current timeline position\n *\n * Called once per timeline update. Clears canvas and redraws\n * all strokes with appropriate progress.\n */\n render() {\n if (this.isDestroyed || !this.ctx) return;\n\n // Clear canvas\n this.strokeDrawer.clear();\n\n // Draw each stroke based on timing\n for (const stroke of this.strokeCommands) {\n const start = stroke.start ?? 0;\n const end = stroke.end ?? start + 1;\n\n // Skip strokes that haven't started\n if (this.currentTime < start) {\n continue;\n }\n\n // Calculate progress\n const progress = this._calculateProgress(start, end);\n\n // Draw stroke with progress\n this.strokeDrawer.drawStroke(stroke, progress);\n }\n }\n\n /**\n * Calculates stroke progress based on timing\n *\n * @private\n * @param {number} start - Stroke start time in seconds\n * @param {number} end - Stroke end time in seconds\n * @returns {number} Progress from 0 to 1\n */\n _calculateProgress(start, end) {\n if (this.currentTime >= end) {\n return 1.0; // Fully visible\n }\n\n const duration = end - start;\n if (duration <= 0) return 1.0;\n\n const elapsed = this.currentTime - start;\n return Math.max(0, Math.min(1, elapsed / duration));\n }\n\n /**\n * Clears the canvas\n */\n clear() {\n if (this.isDestroyed || !this.strokeDrawer) return;\n this.strokeDrawer.clear();\n }\n\n /**\n * Gets visible stroke count at current time\n *\n * @returns {number} Number of visible strokes\n */\n getVisibleStrokeCount() {\n let count = 0;\n for (const stroke of this.strokeCommands) {\n const start = stroke.start ?? 0;\n if (this.currentTime >= start) {\n count++;\n }\n }\n return count;\n }\n\n /**\n * Destroys the renderer and releases resources\n */\n destroy() {\n if (this.isDestroyed) return;\n\n this.strokeCommands = [];\n this.strokeDrawer = null;\n this.ctx = null;\n this.canvas = null;\n this.isDestroyed = true;\n }\n}\n\nexport default GradualRenderer;\n"],"names":["GradualRenderer","canvas","pdfDimensions","dpr","width","height","StrokeDrawer","commands","a","b","startA","startB","time","dimensions","stroke","start","end","progress","duration","elapsed","count"],"mappings":"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"}
|
package/dist/index19.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});class d{constructor(t,o){this.ctx=t,this.viewport=o}setViewport(t){this.viewport=t}drawStroke(t,o=1){const{points:i,color:e,width:s,pressures:h}=t;if(!i||i.length<2)return;const n=Math.max(2,Math.floor(i.length*o)),r=i.slice(0,n);this.ctx.strokeStyle=e||"rgba(0, 0, 0, 0.5)",this.ctx.lineCap="round",this.ctx.lineJoin="round",h&&h.length>=r.length?this._drawVariableWidthStroke(r,s,h.slice(0,n)):this._drawConstantWidthStroke(r,s)}_drawConstantWidthStroke(t,o){this.ctx.lineWidth=o||2,this.ctx.beginPath();for(let i=0;i<t.length;i++){const[e,s]=this._normalizedToPixel(t[i]);i===0?this.ctx.moveTo(e,s):this.ctx.lineTo(e,s)}this.ctx.stroke()}_drawVariableWidthStroke(t,o,i){for(let e=1;e<t.length;e++){const[s,h]=this._normalizedToPixel(t[e-1]),[n,r]=this._normalizedToPixel(t[e]),l=i[e-1]||1,c=i[e]||1,a=(l+c)/2,x=Math.max(.5,o*a);this.ctx.lineWidth=x,this.ctx.beginPath(),this.ctx.moveTo(s,h),this.ctx.lineTo(n,r),this.ctx.stroke()}}drawPoint(t,o,i,e){const[s,h]=this._normalizedToPixel([t,o]);this.ctx.fillStyle=e||"rgba(0, 0, 0, 0.5)",this.ctx.beginPath(),this.ctx.arc(s,h,i,0,Math.PI*2),this.ctx.fill()}clear(){const t=window.devicePixelRatio||1;this.ctx.clearRect(0,0,this.viewport.width*t,this.viewport.height*t)}_normalizedToPixel(t){const[o,i]=t;return[o*this.viewport.width,i*this.viewport.height]}}exports.default=d;
|
|
2
2
|
//# sourceMappingURL=index19.cjs.map
|