web-annotation-renderer 0.5.2 → 0.5.4
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/CHANGELOG.md +89 -4
- package/README.md +157 -120
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,87 @@ All notable changes to this project will be documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## [0.5.3] - 2025-01-20
|
|
9
|
+
|
|
10
|
+
### Fixed
|
|
11
|
+
|
|
12
|
+
- Documentation updates to reflect current implementation
|
|
13
|
+
- Removed outdated ink annotation references from README
|
|
14
|
+
- Updated ARCHITECTURE.md to document StrokeRenderer-based architecture
|
|
15
|
+
- Fixed AI_TOOLS_README.md to match actual exported functions
|
|
16
|
+
|
|
17
|
+
## [0.5.0] - 2025-01-15
|
|
18
|
+
|
|
19
|
+
### Added
|
|
20
|
+
|
|
21
|
+
- New annotation types: `underline`, `arrow`, `circle`
|
|
22
|
+
- `underlineToStrokes` converter for underline annotations
|
|
23
|
+
- `arrowToStrokes` converter for arrow annotations with arrowhead
|
|
24
|
+
- `circleToStrokes` converter for circle/ellipse annotations
|
|
25
|
+
|
|
26
|
+
### Changed
|
|
27
|
+
|
|
28
|
+
- **BREAKING:** Removed `ink` annotation type
|
|
29
|
+
- Text annotations now use single-stroke font for hand-written style
|
|
30
|
+
- Text animations are now character-by-character instead of word-by-word
|
|
31
|
+
|
|
32
|
+
### Removed
|
|
33
|
+
|
|
34
|
+
- `ink` annotation type and related converter
|
|
35
|
+
- `create_ink_annotation` AI tool schema
|
|
36
|
+
|
|
37
|
+
## [0.4.0] - 2025-01-10
|
|
38
|
+
|
|
39
|
+
### Added
|
|
40
|
+
|
|
41
|
+
- `StrokeRenderer` - Unified canvas-based annotation renderer
|
|
42
|
+
- Converter architecture for annotation-to-stroke transformation
|
|
43
|
+
- Support for custom converters via `registerConverter()`
|
|
44
|
+
- Variable-width stroke rendering with pressure simulation
|
|
45
|
+
- High-DPI display support in StrokeRenderer
|
|
46
|
+
|
|
47
|
+
### Changed
|
|
48
|
+
|
|
49
|
+
- **BREAKING:** Replaced DOM-based layer rendering with canvas-based StrokeRenderer
|
|
50
|
+
- All annotation types now render through unified stroke pipeline
|
|
51
|
+
- Improved progressive animation with endpoint interpolation
|
|
52
|
+
|
|
53
|
+
### Removed
|
|
54
|
+
|
|
55
|
+
- `LayerManager` class (replaced by StrokeRenderer)
|
|
56
|
+
- `HighlightLayer`, `TextLayer`, `DrawingLayer` classes
|
|
57
|
+
- DOM-based annotation rendering
|
|
58
|
+
|
|
59
|
+
## [0.3.0] - 2025-01-05
|
|
60
|
+
|
|
61
|
+
### Added
|
|
62
|
+
|
|
63
|
+
- `textToStrokes` converter using single-stroke font library
|
|
64
|
+
- Single-stroke font JSON data for Latin characters
|
|
65
|
+
- Path subdivision for smoother text animation
|
|
66
|
+
- `uniformScale` support for aspect-ratio preserving text
|
|
67
|
+
|
|
68
|
+
### Changed
|
|
69
|
+
|
|
70
|
+
- Text annotations render as strokes instead of DOM elements
|
|
71
|
+
- Improved text animation timing with path-aware duration
|
|
72
|
+
|
|
73
|
+
## [0.2.0] - 2025-12-20
|
|
74
|
+
|
|
75
|
+
### Added
|
|
76
|
+
|
|
77
|
+
- OpenAI function calling schemas for AI-generated annotations
|
|
78
|
+
- `create_highlight_annotation` tool
|
|
79
|
+
- `create_text_annotation` tool
|
|
80
|
+
- `handleToolCall()` and `handleToolCalls()` functions
|
|
81
|
+
- `createHighlight()` and `createText()` creator functions
|
|
82
|
+
- `sentence_ref` field for timing synchronization
|
|
83
|
+
|
|
84
|
+
### Changed
|
|
85
|
+
|
|
86
|
+
- AI tools use normalized coordinate format (0-1)
|
|
87
|
+
- Improved validation for annotation parameters
|
|
88
|
+
|
|
8
89
|
## [0.1.0] - 2025-10-25
|
|
9
90
|
|
|
10
91
|
### Added
|
|
@@ -12,11 +93,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
12
93
|
- Initial release of @ai-annotator/renderer
|
|
13
94
|
- Framework-agnostic core rendering engine
|
|
14
95
|
- PDF rendering with pdf.js integration
|
|
15
|
-
- Timeline synchronization system
|
|
96
|
+
- Timeline synchronization system (TimelineSync)
|
|
16
97
|
- React adapter component (AnnotPdf)
|
|
17
98
|
- Support for highlight annotations with progressive reveal
|
|
18
|
-
- Support for text box annotations
|
|
19
|
-
- Support for ink/drawing annotations
|
|
99
|
+
- Support for text box annotations
|
|
100
|
+
- Support for ink/drawing annotations (later removed in 0.5.0)
|
|
20
101
|
- Coordinate utilities for normalized positioning
|
|
21
102
|
- Viewport utilities for responsive rendering
|
|
22
103
|
- Type validators for annotation data
|
|
@@ -25,10 +106,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
25
106
|
|
|
26
107
|
### Features
|
|
27
108
|
|
|
28
|
-
- Automatic worker configuration (zero config for consumers)
|
|
29
109
|
- Tree-shakeable exports
|
|
30
110
|
- Source maps for debugging
|
|
31
111
|
- TypeScript-friendly JSDoc annotations
|
|
32
112
|
- Comprehensive error handling
|
|
33
113
|
|
|
114
|
+
[0.5.3]: https://github.com/jhl72e/pdfAutoAnnotator/compare/v0.5.0...v0.5.3
|
|
115
|
+
[0.5.0]: https://github.com/jhl72e/pdfAutoAnnotator/compare/v0.4.0...v0.5.0
|
|
116
|
+
[0.4.0]: https://github.com/jhl72e/pdfAutoAnnotator/compare/v0.3.0...v0.4.0
|
|
117
|
+
[0.3.0]: https://github.com/jhl72e/pdfAutoAnnotator/compare/v0.2.0...v0.3.0
|
|
118
|
+
[0.2.0]: https://github.com/jhl72e/pdfAutoAnnotator/compare/v0.1.0...v0.2.0
|
|
34
119
|
[0.1.0]: https://github.com/jhl72e/pdfAutoAnnotator/releases/tag/v0.1.0
|
package/README.md
CHANGED
|
@@ -11,14 +11,14 @@ This library renders structured annotation data (highlights, text boxes, drawing
|
|
|
11
11
|
|
|
12
12
|
- 📄 **PDF Rendering** - Built on pdf.js for reliable PDF display
|
|
13
13
|
- ⏱️ **Timeline Synchronization** - Sync annotations with audio/video playback or manual controls
|
|
14
|
-
- 🎨 **Multiple Annotation Types** - Highlights, text
|
|
14
|
+
- 🎨 **Multiple Annotation Types** - Highlights, text, underlines, arrows, and circles
|
|
15
15
|
- ⚛️ **Framework Agnostic** - Core engine works with any framework
|
|
16
16
|
- ⚛️ **React Adapter** - Ready-to-use React component included
|
|
17
17
|
- 🎯 **Progressive Animations** - Smooth reveal animations based on timeline
|
|
18
18
|
- 🎬 **Continuous Sync** - Built-in support for real-time audio/video synchronization
|
|
19
19
|
- 📦 **Simple Setup** - One-line worker configuration
|
|
20
20
|
- 🌲 **Tree-shakeable** - Import only what you need
|
|
21
|
-
- ⚡ **Performance Optimized** - Efficient rendering
|
|
21
|
+
- ⚡ **Performance Optimized** - Efficient canvas-based rendering with StrokeRenderer
|
|
22
22
|
|
|
23
23
|
## Installation
|
|
24
24
|
|
|
@@ -530,13 +530,13 @@ All annotations use **normalized coordinates** (0-1 range) for positioning, maki
|
|
|
530
530
|
|
|
531
531
|
All annotation types share these base fields:
|
|
532
532
|
|
|
533
|
-
| Field | Type | Required | Description
|
|
534
|
-
| ------- | ------ | -------- |
|
|
535
|
-
| `id` | string | ✅ Yes | Unique identifier for the annotation
|
|
536
|
-
| `type` | string | ✅ Yes | Annotation type: `"highlight"`, `"text"`, or `"
|
|
537
|
-
| `page` | number | ✅ Yes | Page number (1-indexed)
|
|
538
|
-
| `start` | number | ✅ Yes | Timeline start time in seconds
|
|
539
|
-
| `end` | number | ✅ Yes | Timeline end time in seconds
|
|
533
|
+
| Field | Type | Required | Description |
|
|
534
|
+
| ------- | ------ | -------- | ------------------------------------------------------------------------ |
|
|
535
|
+
| `id` | string | ✅ Yes | Unique identifier for the annotation |
|
|
536
|
+
| `type` | string | ✅ Yes | Annotation type: `"highlight"`, `"text"`, `"underline"`, `"arrow"`, or `"circle"` |
|
|
537
|
+
| `page` | number | ✅ Yes | Page number (1-indexed) |
|
|
538
|
+
| `start` | number | ✅ Yes | Timeline start time in seconds |
|
|
539
|
+
| `end` | number | ✅ Yes | Timeline end time in seconds |
|
|
540
540
|
|
|
541
541
|
---
|
|
542
542
|
|
|
@@ -603,7 +603,7 @@ Highlights rectangular regions on the PDF with progressive reveal animation.
|
|
|
603
603
|
|
|
604
604
|
### Text Annotations
|
|
605
605
|
|
|
606
|
-
Display text
|
|
606
|
+
Display hand-written style text with progressive character-by-character animation using single-stroke fonts.
|
|
607
607
|
|
|
608
608
|
**Type:** `"text"`
|
|
609
609
|
|
|
@@ -616,31 +616,27 @@ Display text boxes with progressive typing animation.
|
|
|
616
616
|
page: 1,
|
|
617
617
|
start: 3,
|
|
618
618
|
end: 8,
|
|
619
|
-
content: "This is the annotation text
|
|
620
|
-
x: 0.5,
|
|
621
|
-
y: 0.2,
|
|
622
|
-
|
|
623
|
-
h: 0.1, // Height (normalized)
|
|
619
|
+
content: "This is the annotation text",
|
|
620
|
+
x: 0.5, // Left position (normalized)
|
|
621
|
+
y: 0.2, // Top position (normalized)
|
|
622
|
+
fontSize: 16, // Font size in pixels
|
|
624
623
|
style: {
|
|
625
|
-
|
|
626
|
-
color: "#1f2937" // Text color
|
|
624
|
+
color: "rgba(220, 20, 60, 1.0)" // Text color
|
|
627
625
|
}
|
|
628
626
|
}
|
|
629
627
|
```
|
|
630
628
|
|
|
631
629
|
**Fields:**
|
|
632
630
|
|
|
633
|
-
| Field | Type | Required | Default
|
|
634
|
-
| ------------- | ------ | -------- |
|
|
635
|
-
| `content` | string | ✅ Yes | -
|
|
636
|
-
| `x` | number | ✅ Yes | -
|
|
637
|
-
| `y` | number | ✅ Yes | -
|
|
638
|
-
| `
|
|
639
|
-
| `
|
|
640
|
-
| `style.bg` | string | No | `"rgba(255,255,255,0.9)"` | Background color |
|
|
641
|
-
| `style.color` | string | No | `"#1f2937"` | Text color |
|
|
631
|
+
| Field | Type | Required | Default | Description |
|
|
632
|
+
| ------------- | ------ | -------- | ---------------------------- | ------------------------------- |
|
|
633
|
+
| `content` | string | ✅ Yes | - | Text to display |
|
|
634
|
+
| `x` | number | ✅ Yes | - | Left position (0-1, normalized) |
|
|
635
|
+
| `y` | number | ✅ Yes | - | Top position (0-1, normalized) |
|
|
636
|
+
| `fontSize` | number | No | `16` | Font size in pixels |
|
|
637
|
+
| `style.color` | string | No | `"rgba(220, 20, 60, 1.0)"` | Text stroke color |
|
|
642
638
|
|
|
643
|
-
**Animation:** Text
|
|
639
|
+
**Animation:** Text is drawn character-by-character using single-stroke font glyphs, creating a hand-written writing effect.
|
|
644
640
|
|
|
645
641
|
**Example:**
|
|
646
642
|
|
|
@@ -651,102 +647,127 @@ Display text boxes with progressive typing animation.
|
|
|
651
647
|
page: 1,
|
|
652
648
|
start: 5.0,
|
|
653
649
|
end: 12.0,
|
|
654
|
-
content: "Important concept
|
|
650
|
+
content: "Important concept",
|
|
655
651
|
x: 0.6,
|
|
656
652
|
y: 0.4,
|
|
657
|
-
|
|
658
|
-
h: 0.08,
|
|
653
|
+
fontSize: 18,
|
|
659
654
|
style: {
|
|
660
|
-
|
|
661
|
-
color: "#0066cc"
|
|
655
|
+
color: "rgba(0, 100, 200, 1.0)"
|
|
662
656
|
}
|
|
663
657
|
}
|
|
664
658
|
```
|
|
665
659
|
|
|
666
660
|
---
|
|
667
661
|
|
|
668
|
-
###
|
|
662
|
+
### Underline Annotations
|
|
669
663
|
|
|
670
|
-
Draw
|
|
664
|
+
Draw underlines beneath text regions with progressive reveal animation.
|
|
671
665
|
|
|
672
|
-
**Type:** `"
|
|
666
|
+
**Type:** `"underline"`
|
|
673
667
|
|
|
674
668
|
**Structure:**
|
|
675
669
|
|
|
676
670
|
```javascript
|
|
677
671
|
{
|
|
678
|
-
id: "
|
|
679
|
-
type: "
|
|
672
|
+
id: "underline-1",
|
|
673
|
+
type: "underline",
|
|
680
674
|
page: 1,
|
|
681
|
-
start:
|
|
682
|
-
end:
|
|
683
|
-
|
|
684
|
-
{
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
points: [
|
|
688
|
-
{ t: 0.0, x: 0.2, y: 0.5 },
|
|
689
|
-
{ t: 0.5, x: 0.3, y: 0.45 },
|
|
690
|
-
{ t: 1.0, x: 0.4, y: 0.5 }
|
|
691
|
-
]
|
|
692
|
-
}
|
|
693
|
-
]
|
|
675
|
+
start: 0,
|
|
676
|
+
end: 2,
|
|
677
|
+
quads: [
|
|
678
|
+
{ x: 0.1, y: 0.2, w: 0.8, h: 0.05 }
|
|
679
|
+
],
|
|
680
|
+
style: { color: "rgba(0, 0, 255, 0.8)" }
|
|
694
681
|
}
|
|
695
682
|
```
|
|
696
683
|
|
|
697
684
|
**Fields:**
|
|
698
685
|
|
|
699
|
-
| Field
|
|
700
|
-
|
|
|
701
|
-
| `
|
|
702
|
-
| `
|
|
703
|
-
| `
|
|
704
|
-
| `
|
|
705
|
-
| `
|
|
706
|
-
| `
|
|
707
|
-
| `points[].y` | number | ✅ Yes | - | Y position (0-1, normalized) |
|
|
686
|
+
| Field | Type | Required | Default | Description |
|
|
687
|
+
| ------------- | ------ | -------- | ------------------------ | ------------------------------- |
|
|
688
|
+
| `quads` | Array | ✅ Yes | - | Array of quad objects |
|
|
689
|
+
| `quads[].x` | number | ✅ Yes | - | Left position (0-1, normalized) |
|
|
690
|
+
| `quads[].y` | number | ✅ Yes | - | Top position (0-1, normalized) |
|
|
691
|
+
| `quads[].w` | number | ✅ Yes | - | Width (0-1, normalized) |
|
|
692
|
+
| `quads[].h` | number | ✅ Yes | - | Height (0-1, normalized) |
|
|
693
|
+
| `style.color` | string | No | `"rgba(0, 0, 255, 0.8)"` | Underline color |
|
|
708
694
|
|
|
709
|
-
**
|
|
695
|
+
**Animation:** Underlines draw progressively at the bottom edge of each quad from left to right.
|
|
710
696
|
|
|
711
|
-
|
|
712
|
-
- The `t` values are used for progressive drawing animation
|
|
713
|
-
- Points should be ordered by increasing `t` values
|
|
697
|
+
---
|
|
714
698
|
|
|
715
|
-
|
|
699
|
+
### Arrow Annotations
|
|
716
700
|
|
|
717
|
-
|
|
701
|
+
Draw arrows pointing from source to target with progressive reveal animation.
|
|
702
|
+
|
|
703
|
+
**Type:** `"arrow"`
|
|
704
|
+
|
|
705
|
+
**Structure:**
|
|
718
706
|
|
|
719
707
|
```javascript
|
|
720
708
|
{
|
|
721
|
-
id: "
|
|
722
|
-
type: "
|
|
709
|
+
id: "arrow-1",
|
|
710
|
+
type: "arrow",
|
|
723
711
|
page: 1,
|
|
724
|
-
start:
|
|
725
|
-
end:
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
712
|
+
start: 0,
|
|
713
|
+
end: 2,
|
|
714
|
+
from_x: 0.2,
|
|
715
|
+
from_y: 0.3,
|
|
716
|
+
to_x: 0.8,
|
|
717
|
+
to_y: 0.7,
|
|
718
|
+
style: { color: "rgba(255, 0, 0, 0.8)" }
|
|
719
|
+
}
|
|
720
|
+
```
|
|
721
|
+
|
|
722
|
+
**Fields:**
|
|
723
|
+
|
|
724
|
+
| Field | Type | Required | Default | Description |
|
|
725
|
+
| ------------- | ------ | -------- | ------------------------ | --------------------------------- |
|
|
726
|
+
| `from_x` | number | ✅ Yes | - | Source x position (0-1) |
|
|
727
|
+
| `from_y` | number | ✅ Yes | - | Source y position (0-1) |
|
|
728
|
+
| `to_x` | number | ✅ Yes | - | Target x position (0-1) |
|
|
729
|
+
| `to_y` | number | ✅ Yes | - | Target y position (0-1) |
|
|
730
|
+
| `style.color` | string | No | `"rgba(255, 0, 0, 0.8)"` | Arrow color |
|
|
731
|
+
|
|
732
|
+
**Animation:** Line draws first (70% of duration), then arrowhead wings draw (30% of duration).
|
|
733
|
+
|
|
734
|
+
---
|
|
735
|
+
|
|
736
|
+
### Circle Annotations
|
|
737
|
+
|
|
738
|
+
Draw circles/ellipses with progressive reveal animation around the perimeter.
|
|
739
|
+
|
|
740
|
+
**Type:** `"circle"`
|
|
741
|
+
|
|
742
|
+
**Structure:**
|
|
743
|
+
|
|
744
|
+
```javascript
|
|
745
|
+
{
|
|
746
|
+
id: "circle-1",
|
|
747
|
+
type: "circle",
|
|
748
|
+
page: 1,
|
|
749
|
+
start: 0,
|
|
750
|
+
end: 2,
|
|
751
|
+
cx: 0.5,
|
|
752
|
+
cy: 0.5,
|
|
753
|
+
rx: 0.1,
|
|
754
|
+
ry: 0.1,
|
|
755
|
+
style: { color: "rgba(255, 165, 0, 0.8)" }
|
|
747
756
|
}
|
|
748
757
|
```
|
|
749
758
|
|
|
759
|
+
**Fields:**
|
|
760
|
+
|
|
761
|
+
| Field | Type | Required | Default | Description |
|
|
762
|
+
| ------------- | ------ | -------- | -------------------------- | ----------------------------- |
|
|
763
|
+
| `cx` | number | ✅ Yes | - | Center x position (0-1) |
|
|
764
|
+
| `cy` | number | ✅ Yes | - | Center y position (0-1) |
|
|
765
|
+
| `rx` | number | ✅ Yes | - | Horizontal radius (0-1) |
|
|
766
|
+
| `ry` | number | ✅ Yes | - | Vertical radius (0-1) |
|
|
767
|
+
| `style.color` | string | No | `"rgba(255, 165, 0, 0.8)"` | Circle color |
|
|
768
|
+
|
|
769
|
+
**Animation:** Circle draws progressively around the perimeter from 0° to 360°.
|
|
770
|
+
|
|
750
771
|
---
|
|
751
772
|
|
|
752
773
|
### Coordinate System
|
|
@@ -783,7 +804,7 @@ const annotations = [
|
|
|
783
804
|
style: { color: "rgba(255, 255, 0, 0.4)" },
|
|
784
805
|
},
|
|
785
806
|
|
|
786
|
-
// Text
|
|
807
|
+
// Text (hand-written style)
|
|
787
808
|
{
|
|
788
809
|
id: "t1",
|
|
789
810
|
type: "text",
|
|
@@ -793,32 +814,47 @@ const annotations = [
|
|
|
793
814
|
content: "Key concept here",
|
|
794
815
|
x: 0.6,
|
|
795
816
|
y: 0.2,
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
style: {
|
|
799
|
-
bg: "rgba(255, 255, 255, 0.95)",
|
|
800
|
-
color: "#0066cc",
|
|
801
|
-
},
|
|
817
|
+
fontSize: 16,
|
|
818
|
+
style: { color: "rgba(220, 20, 60, 1.0)" },
|
|
802
819
|
},
|
|
803
820
|
|
|
804
|
-
//
|
|
821
|
+
// Underline
|
|
805
822
|
{
|
|
806
|
-
id: "
|
|
807
|
-
type: "
|
|
823
|
+
id: "u1",
|
|
824
|
+
type: "underline",
|
|
808
825
|
page: 1,
|
|
809
|
-
start:
|
|
826
|
+
start: 5,
|
|
827
|
+
end: 7,
|
|
828
|
+
quads: [{ x: 0.1, y: 0.3, w: 0.4, h: 0.03 }],
|
|
829
|
+
style: { color: "rgba(0, 0, 255, 0.8)" },
|
|
830
|
+
},
|
|
831
|
+
|
|
832
|
+
// Arrow
|
|
833
|
+
{
|
|
834
|
+
id: "a1",
|
|
835
|
+
type: "arrow",
|
|
836
|
+
page: 1,
|
|
837
|
+
start: 7,
|
|
810
838
|
end: 10,
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
839
|
+
from_x: 0.2,
|
|
840
|
+
from_y: 0.5,
|
|
841
|
+
to_x: 0.6,
|
|
842
|
+
to_y: 0.6,
|
|
843
|
+
style: { color: "rgba(255, 0, 0, 0.8)" },
|
|
844
|
+
},
|
|
845
|
+
|
|
846
|
+
// Circle
|
|
847
|
+
{
|
|
848
|
+
id: "c1",
|
|
849
|
+
type: "circle",
|
|
850
|
+
page: 1,
|
|
851
|
+
start: 10,
|
|
852
|
+
end: 13,
|
|
853
|
+
cx: 0.75,
|
|
854
|
+
cy: 0.4,
|
|
855
|
+
rx: 0.08,
|
|
856
|
+
ry: 0.06,
|
|
857
|
+
style: { color: "rgba(255, 165, 0, 0.8)" },
|
|
822
858
|
},
|
|
823
859
|
];
|
|
824
860
|
```
|
|
@@ -846,10 +882,10 @@ Requires:
|
|
|
846
882
|
**Solutions:**
|
|
847
883
|
|
|
848
884
|
1. Check that highlight annotations include `mode: "quads"` field
|
|
849
|
-
2. Verify
|
|
850
|
-
3.
|
|
851
|
-
4.
|
|
852
|
-
5.
|
|
885
|
+
2. Verify annotation `type` is one of: `"highlight"`, `"text"`, `"underline"`, `"arrow"`, `"circle"`
|
|
886
|
+
3. Check browser console for validation warnings (unknown type warnings)
|
|
887
|
+
4. Verify timeline position is within annotation `start`/`end` range
|
|
888
|
+
5. Ensure coordinates are normalized (0-1 range)
|
|
853
889
|
|
|
854
890
|
### Worker errors
|
|
855
891
|
|
|
@@ -893,8 +929,9 @@ If you're upgrading from documentation examples that used the old format:
|
|
|
893
929
|
1. **Package name:** `@ai-annotator/renderer` → `web-annotation-renderer`
|
|
894
930
|
2. **Method name:** `renderer.updateTimeline()` → `renderer.setTime()`
|
|
895
931
|
3. **Highlight annotations:** Must include `mode: "quads"` field
|
|
896
|
-
4. **Text annotations:**
|
|
897
|
-
5. **Ink annotations:**
|
|
932
|
+
4. **Text annotations:** Now render as hand-written style using single-stroke font; use `fontSize` instead of `w`/`h`
|
|
933
|
+
5. **Ink annotations:** Removed in v0.5.0; use `arrow`, `underline`, or `circle` instead
|
|
934
|
+
6. **New annotation types:** `underline`, `arrow`, `circle` added in v0.5.0
|
|
898
935
|
|
|
899
936
|
### Quick Migration
|
|
900
937
|
|
|
@@ -926,8 +963,8 @@ Both examples include:
|
|
|
926
963
|
- PDF loading and rendering
|
|
927
964
|
- Page navigation and zoom controls
|
|
928
965
|
- Timeline slider with annotation synchronization
|
|
929
|
-
- All
|
|
930
|
-
- Optimized rendering for smooth, flicker-free updates
|
|
966
|
+
- All five annotation types (highlight, text, underline, arrow, circle)
|
|
967
|
+
- Optimized canvas-based rendering for smooth, flicker-free updates
|
|
931
968
|
|
|
932
969
|
**Use Cases:**
|
|
933
970
|
- **Manual timeline control** (sliders, buttons): Use `setTime()` for discrete updates
|
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./index2.cjs"),l=require("./index3.cjs"),a=require("./index4.cjs"),s=require("./index5.cjs"),e=require("./index6.cjs"),c=require("./index7.cjs"),d=require("./index8.cjs"),r=require("./index9.cjs"),u=require("./index10.cjs"),T=require("./index11.cjs"),g=require("./index12.cjs"),q=require("./index13.cjs"),p=require("./index14.cjs"),S=require("./index15.cjs"),h=require("./index16.cjs"),k=require("./index17.cjs"),P=require("./index18.cjs"),A=require("./index19.cjs"),t=require("./index20.cjs"),o=require("./index21.cjs"),n=require("./index22.cjs"),R=require("./index23.cjs"),x=require("./index24.cjs"),y="
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./index2.cjs"),l=require("./index3.cjs"),a=require("./index4.cjs"),s=require("./index5.cjs"),e=require("./index6.cjs"),c=require("./index7.cjs"),d=require("./index8.cjs"),r=require("./index9.cjs"),u=require("./index10.cjs"),T=require("./index11.cjs"),g=require("./index12.cjs"),q=require("./index13.cjs"),p=require("./index14.cjs"),S=require("./index15.cjs"),h=require("./index16.cjs"),k=require("./index17.cjs"),P=require("./index18.cjs"),A=require("./index19.cjs"),t=require("./index20.cjs"),o=require("./index21.cjs"),n=require("./index22.cjs"),R=require("./index23.cjs"),x=require("./index24.cjs"),y="0.5.3",m="web-annotation-renderer";exports.AnnotationRenderer=i.AnnotationRenderer;exports.PDFRenderer=l.PDFRenderer;exports.TimelineSync=a.TimelineSync;exports.StrokeRenderer=s.StrokeRenderer;exports.applyJitter=e.applyJitter;exports.applyPressure=e.applyPressure;exports.applyWobble=e.applyWobble;exports.deepMerge=e.deepMerge;exports.seededRandom=e.seededRandom;exports.coordinateUtils=c;exports.viewportUtils=d;exports.extractAllBlocks=r.extractAllBlocks;exports.extractMultiplePages=r.extractMultiplePages;exports.extractPDFBlocks=r.extractAllBlocks;exports.normalizeAnnotationArray=u.normalizeAnnotationArray;exports.TypeValidators=T;exports.AnnotPdf=g.default;exports.highlightToStrokes=q.highlightToStrokes;exports.textToStrokes=p.textToStrokes;exports.underlineToStrokes=S.underlineToStrokes;exports.arrowToStrokes=h.arrowToStrokes;exports.circleToStrokes=k.circleToStrokes;exports.GradualRenderer=P.default;exports.StrokeDrawer=A.default;exports.getPenPreset=t.getPreset;exports.getPenPresetNames=t.getPresetNames;exports.annotationTools=o.annotationTools;exports.getAnnotationTools=o.getAnnotationTools;exports.handleToolCall=n.handleToolCall;exports.handleToolCalls=n.handleToolCalls;exports.createHighlight=R.createHighlight;exports.createText=x.createText;exports.LIB_NAME=m;exports.VERSION=y;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../src/index.js"],"sourcesContent":["/**\n * @ai-annotator/renderer - Public API\n *\n * Single entry point for the Dynamic PDF Annotation Renderer library.\n * Exports all core subsystems, utilities, and types.\n *\n * @module @ai-annotator/renderer\n */\n\n// ============================================================================\n// Core Rendering Engine\n// ============================================================================\n\nimport { AnnotationRenderer } from './core/AnnotationRenderer.js';\nimport { PDFRenderer } from './core/PDFRenderer.js';\nimport { TimelineSync } from './core/TimelineSync.js';\n\nexport { AnnotationRenderer };\nexport { PDFRenderer };\nexport { TimelineSync };\n\n// ============================================================================\n// Stroke Renderer - Unified Canvas-Based Annotation Rendering\n// ============================================================================\n\nimport { StrokeRenderer } from './renderer/StrokeRenderer.js';\n\nexport { StrokeRenderer };\n\n// ============================================================================\n// Converters - Annotation to Stroke Conversion\n// ============================================================================\n\nimport {\n highlightToStrokes,\n textToStrokes,\n underlineToStrokes,\n arrowToStrokes,\n circleToStrokes\n} from './converters/index.js';\n\nexport { highlightToStrokes };\nexport { textToStrokes };\nexport { underlineToStrokes };\nexport { arrowToStrokes };\nexport { circleToStrokes };\n\n// ============================================================================\n// Pen Effects - Hand-Drawn Feel Utilities\n// ============================================================================\n\nimport {\n applyJitter,\n applyPressure,\n applyWobble,\n deepMerge,\n seededRandom\n} from './pen/effects.js';\n\nexport { applyJitter };\nexport { applyPressure };\nexport { applyWobble };\nexport { deepMerge };\nexport { seededRandom };\n\n// ============================================================================\n// Pen Module - Legacy Stroke Rendering (Retained for Compatibility)\n// ============================================================================\n\nimport { GradualRenderer, StrokeDrawer, getPreset, getPresetNames } from './pen/index.js';\n\nexport { GradualRenderer };\nexport { StrokeDrawer };\nexport { getPreset as getPenPreset };\nexport { getPresetNames as getPenPresetNames };\n\n// ============================================================================\n// Utilities\n// ============================================================================\n\nimport * as coordinateUtils from './utils/coordinateUtils.js';\nimport * as viewportUtils from './utils/viewportUtils.js';\n\nexport { coordinateUtils };\nexport { viewportUtils };\n\n// ============================================================================\n// PDF Extraction Utilities\n// ============================================================================\n\nimport { extractAllBlocks, extractMultiplePages } from './utils/pdfExtractor.js';\n\nexport { extractAllBlocks };\nexport { extractMultiplePages };\nexport { extractAllBlocks as extractPDFBlocks };\n\n// ============================================================================\n// Type Definitions & Validators\n// ============================================================================\n\nexport { normalizeAnnotationArray } from './types/validators.js';\nexport * as TypeValidators from './types/index.js';\n\n// ============================================================================\n// Framework Adapters\n// ============================================================================\n\nexport { AnnotPdf } from './adapters/index.js';\n\n// ============================================================================\n// AI Tools for Annotation Generation\n// ============================================================================\n\nexport {\n annotationTools,\n getAnnotationTools,\n handleToolCall,\n handleToolCalls,\n createHighlight,\n createText\n} from './ai-tools/index.js';\n\n// ============================================================================\n// Package Metadata\n// ============================================================================\n\nexport const VERSION = '
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../src/index.js"],"sourcesContent":["/**\n * @ai-annotator/renderer - Public API\n *\n * Single entry point for the Dynamic PDF Annotation Renderer library.\n * Exports all core subsystems, utilities, and types.\n *\n * @module @ai-annotator/renderer\n */\n\n// ============================================================================\n// Core Rendering Engine\n// ============================================================================\n\nimport { AnnotationRenderer } from './core/AnnotationRenderer.js';\nimport { PDFRenderer } from './core/PDFRenderer.js';\nimport { TimelineSync } from './core/TimelineSync.js';\n\nexport { AnnotationRenderer };\nexport { PDFRenderer };\nexport { TimelineSync };\n\n// ============================================================================\n// Stroke Renderer - Unified Canvas-Based Annotation Rendering\n// ============================================================================\n\nimport { StrokeRenderer } from './renderer/StrokeRenderer.js';\n\nexport { StrokeRenderer };\n\n// ============================================================================\n// Converters - Annotation to Stroke Conversion\n// ============================================================================\n\nimport {\n highlightToStrokes,\n textToStrokes,\n underlineToStrokes,\n arrowToStrokes,\n circleToStrokes\n} from './converters/index.js';\n\nexport { highlightToStrokes };\nexport { textToStrokes };\nexport { underlineToStrokes };\nexport { arrowToStrokes };\nexport { circleToStrokes };\n\n// ============================================================================\n// Pen Effects - Hand-Drawn Feel Utilities\n// ============================================================================\n\nimport {\n applyJitter,\n applyPressure,\n applyWobble,\n deepMerge,\n seededRandom\n} from './pen/effects.js';\n\nexport { applyJitter };\nexport { applyPressure };\nexport { applyWobble };\nexport { deepMerge };\nexport { seededRandom };\n\n// ============================================================================\n// Pen Module - Legacy Stroke Rendering (Retained for Compatibility)\n// ============================================================================\n\nimport { GradualRenderer, StrokeDrawer, getPreset, getPresetNames } from './pen/index.js';\n\nexport { GradualRenderer };\nexport { StrokeDrawer };\nexport { getPreset as getPenPreset };\nexport { getPresetNames as getPenPresetNames };\n\n// ============================================================================\n// Utilities\n// ============================================================================\n\nimport * as coordinateUtils from './utils/coordinateUtils.js';\nimport * as viewportUtils from './utils/viewportUtils.js';\n\nexport { coordinateUtils };\nexport { viewportUtils };\n\n// ============================================================================\n// PDF Extraction Utilities\n// ============================================================================\n\nimport { extractAllBlocks, extractMultiplePages } from './utils/pdfExtractor.js';\n\nexport { extractAllBlocks };\nexport { extractMultiplePages };\nexport { extractAllBlocks as extractPDFBlocks };\n\n// ============================================================================\n// Type Definitions & Validators\n// ============================================================================\n\nexport { normalizeAnnotationArray } from './types/validators.js';\nexport * as TypeValidators from './types/index.js';\n\n// ============================================================================\n// Framework Adapters\n// ============================================================================\n\nexport { AnnotPdf } from './adapters/index.js';\n\n// ============================================================================\n// AI Tools for Annotation Generation\n// ============================================================================\n\nexport {\n annotationTools,\n getAnnotationTools,\n handleToolCall,\n handleToolCalls,\n createHighlight,\n createText\n} from './ai-tools/index.js';\n\n// ============================================================================\n// Package Metadata\n// ============================================================================\n\nexport const VERSION = '0.5.3';\nexport const LIB_NAME = 'web-annotation-renderer';\n"],"names":["VERSION","LIB_NAME"],"mappings":"2rBA8HaA,EAAU,QACVC,EAAW"}
|
package/dist/index.js
CHANGED
|
@@ -21,7 +21,7 @@ import { annotationTools as j, getAnnotationTools as q } from "./index21.js";
|
|
|
21
21
|
import { handleToolCall as Q, handleToolCalls as X } from "./index22.js";
|
|
22
22
|
import { createHighlight as Z } from "./index23.js";
|
|
23
23
|
import { createText as ee } from "./index24.js";
|
|
24
|
-
const t = "
|
|
24
|
+
const t = "0.5.3", a = "web-annotation-renderer";
|
|
25
25
|
export {
|
|
26
26
|
N as AnnotPdf,
|
|
27
27
|
n as AnnotationRenderer,
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/index.js"],"sourcesContent":["/**\n * @ai-annotator/renderer - Public API\n *\n * Single entry point for the Dynamic PDF Annotation Renderer library.\n * Exports all core subsystems, utilities, and types.\n *\n * @module @ai-annotator/renderer\n */\n\n// ============================================================================\n// Core Rendering Engine\n// ============================================================================\n\nimport { AnnotationRenderer } from './core/AnnotationRenderer.js';\nimport { PDFRenderer } from './core/PDFRenderer.js';\nimport { TimelineSync } from './core/TimelineSync.js';\n\nexport { AnnotationRenderer };\nexport { PDFRenderer };\nexport { TimelineSync };\n\n// ============================================================================\n// Stroke Renderer - Unified Canvas-Based Annotation Rendering\n// ============================================================================\n\nimport { StrokeRenderer } from './renderer/StrokeRenderer.js';\n\nexport { StrokeRenderer };\n\n// ============================================================================\n// Converters - Annotation to Stroke Conversion\n// ============================================================================\n\nimport {\n highlightToStrokes,\n textToStrokes,\n underlineToStrokes,\n arrowToStrokes,\n circleToStrokes\n} from './converters/index.js';\n\nexport { highlightToStrokes };\nexport { textToStrokes };\nexport { underlineToStrokes };\nexport { arrowToStrokes };\nexport { circleToStrokes };\n\n// ============================================================================\n// Pen Effects - Hand-Drawn Feel Utilities\n// ============================================================================\n\nimport {\n applyJitter,\n applyPressure,\n applyWobble,\n deepMerge,\n seededRandom\n} from './pen/effects.js';\n\nexport { applyJitter };\nexport { applyPressure };\nexport { applyWobble };\nexport { deepMerge };\nexport { seededRandom };\n\n// ============================================================================\n// Pen Module - Legacy Stroke Rendering (Retained for Compatibility)\n// ============================================================================\n\nimport { GradualRenderer, StrokeDrawer, getPreset, getPresetNames } from './pen/index.js';\n\nexport { GradualRenderer };\nexport { StrokeDrawer };\nexport { getPreset as getPenPreset };\nexport { getPresetNames as getPenPresetNames };\n\n// ============================================================================\n// Utilities\n// ============================================================================\n\nimport * as coordinateUtils from './utils/coordinateUtils.js';\nimport * as viewportUtils from './utils/viewportUtils.js';\n\nexport { coordinateUtils };\nexport { viewportUtils };\n\n// ============================================================================\n// PDF Extraction Utilities\n// ============================================================================\n\nimport { extractAllBlocks, extractMultiplePages } from './utils/pdfExtractor.js';\n\nexport { extractAllBlocks };\nexport { extractMultiplePages };\nexport { extractAllBlocks as extractPDFBlocks };\n\n// ============================================================================\n// Type Definitions & Validators\n// ============================================================================\n\nexport { normalizeAnnotationArray } from './types/validators.js';\nexport * as TypeValidators from './types/index.js';\n\n// ============================================================================\n// Framework Adapters\n// ============================================================================\n\nexport { AnnotPdf } from './adapters/index.js';\n\n// ============================================================================\n// AI Tools for Annotation Generation\n// ============================================================================\n\nexport {\n annotationTools,\n getAnnotationTools,\n handleToolCall,\n handleToolCalls,\n createHighlight,\n createText\n} from './ai-tools/index.js';\n\n// ============================================================================\n// Package Metadata\n// ============================================================================\n\nexport const VERSION = '
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/index.js"],"sourcesContent":["/**\n * @ai-annotator/renderer - Public API\n *\n * Single entry point for the Dynamic PDF Annotation Renderer library.\n * Exports all core subsystems, utilities, and types.\n *\n * @module @ai-annotator/renderer\n */\n\n// ============================================================================\n// Core Rendering Engine\n// ============================================================================\n\nimport { AnnotationRenderer } from './core/AnnotationRenderer.js';\nimport { PDFRenderer } from './core/PDFRenderer.js';\nimport { TimelineSync } from './core/TimelineSync.js';\n\nexport { AnnotationRenderer };\nexport { PDFRenderer };\nexport { TimelineSync };\n\n// ============================================================================\n// Stroke Renderer - Unified Canvas-Based Annotation Rendering\n// ============================================================================\n\nimport { StrokeRenderer } from './renderer/StrokeRenderer.js';\n\nexport { StrokeRenderer };\n\n// ============================================================================\n// Converters - Annotation to Stroke Conversion\n// ============================================================================\n\nimport {\n highlightToStrokes,\n textToStrokes,\n underlineToStrokes,\n arrowToStrokes,\n circleToStrokes\n} from './converters/index.js';\n\nexport { highlightToStrokes };\nexport { textToStrokes };\nexport { underlineToStrokes };\nexport { arrowToStrokes };\nexport { circleToStrokes };\n\n// ============================================================================\n// Pen Effects - Hand-Drawn Feel Utilities\n// ============================================================================\n\nimport {\n applyJitter,\n applyPressure,\n applyWobble,\n deepMerge,\n seededRandom\n} from './pen/effects.js';\n\nexport { applyJitter };\nexport { applyPressure };\nexport { applyWobble };\nexport { deepMerge };\nexport { seededRandom };\n\n// ============================================================================\n// Pen Module - Legacy Stroke Rendering (Retained for Compatibility)\n// ============================================================================\n\nimport { GradualRenderer, StrokeDrawer, getPreset, getPresetNames } from './pen/index.js';\n\nexport { GradualRenderer };\nexport { StrokeDrawer };\nexport { getPreset as getPenPreset };\nexport { getPresetNames as getPenPresetNames };\n\n// ============================================================================\n// Utilities\n// ============================================================================\n\nimport * as coordinateUtils from './utils/coordinateUtils.js';\nimport * as viewportUtils from './utils/viewportUtils.js';\n\nexport { coordinateUtils };\nexport { viewportUtils };\n\n// ============================================================================\n// PDF Extraction Utilities\n// ============================================================================\n\nimport { extractAllBlocks, extractMultiplePages } from './utils/pdfExtractor.js';\n\nexport { extractAllBlocks };\nexport { extractMultiplePages };\nexport { extractAllBlocks as extractPDFBlocks };\n\n// ============================================================================\n// Type Definitions & Validators\n// ============================================================================\n\nexport { normalizeAnnotationArray } from './types/validators.js';\nexport * as TypeValidators from './types/index.js';\n\n// ============================================================================\n// Framework Adapters\n// ============================================================================\n\nexport { AnnotPdf } from './adapters/index.js';\n\n// ============================================================================\n// AI Tools for Annotation Generation\n// ============================================================================\n\nexport {\n annotationTools,\n getAnnotationTools,\n handleToolCall,\n handleToolCalls,\n createHighlight,\n createText\n} from './ai-tools/index.js';\n\n// ============================================================================\n// Package Metadata\n// ============================================================================\n\nexport const VERSION = '0.5.3';\nexport const LIB_NAME = 'web-annotation-renderer';\n"],"names":["VERSION","LIB_NAME"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA8HY,MAACA,IAAU,SACVC,IAAW;"}
|
package/package.json
CHANGED