@edgepdf/viewer-js 0.0.35 → 0.1.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/LICENSE +22 -0
- package/README.md +31 -16
- package/dist/index.d.ts +1 -1
- package/dist/index.js +27 -12509
- package/dist/inject-css.d.ts +2 -0
- package/dist/inject-css.d.ts.map +1 -0
- package/dist/lib/coordinate-mapper.d.ts +1 -1
- package/dist/lib/coordinate-mapper.d.ts.map +1 -1
- package/dist/lib/marker-manager.d.ts +1 -1
- package/dist/lib/marker-manager.d.ts.map +1 -1
- package/dist/lib/tile-layer-manager.d.ts +1 -1
- package/dist/lib/tile-layer-manager.d.ts.map +1 -1
- package/dist/lib/viewer.d.ts +1 -1
- package/dist/lib/viewer.d.ts.map +1 -1
- package/dist/lib/zoom-controller.d.ts +1 -1
- package/dist/lib/zoom-controller.d.ts.map +1 -1
- package/package.json +14 -14
- package/dist/index.css +0 -940
package/LICENSE
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 EdgePDF
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
22
|
+
|
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @edgepdf/viewer-js
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A powerful, self-contained JavaScript library for viewing large PDF documents in the browser. Provides smooth navigation, zoom controls, and interactive marker management without requiring any external dependencies.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
@@ -12,7 +12,18 @@ pnpm add @edgepdf/viewer-js
|
|
|
12
12
|
yarn add @edgepdf/viewer-js
|
|
13
13
|
```
|
|
14
14
|
|
|
15
|
-
**Note:**
|
|
15
|
+
**Note:** All dependencies are bundled with this library. **CSS styles are automatically injected** when you import the library - no manual CSS import needed!
|
|
16
|
+
|
|
17
|
+
## Features
|
|
18
|
+
|
|
19
|
+
- ⚡ **Zero Configuration**: Works out of the box with sensible defaults
|
|
20
|
+
- 📦 **Self-Contained**: All dependencies bundled - no external CSS or scripts needed
|
|
21
|
+
- 🎯 **Precise Control**: Programmatic zoom, pan, and focus capabilities
|
|
22
|
+
- 📍 **Rich Markers**: Support for draggable, editable markers with tooltips and custom icons
|
|
23
|
+
- 🔄 **Data Management**: Import/export marker data for persistence
|
|
24
|
+
- 🎨 **Customizable**: Flexible API for styling and behavior customization
|
|
25
|
+
- 📱 **Touch-Friendly**: Full support for touch gestures on mobile devices
|
|
26
|
+
- ♿ **Accessible**: Keyboard navigation and ARIA labels included
|
|
16
27
|
|
|
17
28
|
## Quick Start
|
|
18
29
|
|
|
@@ -46,7 +57,7 @@ const markerManager = viewer.getMarkerManager();
|
|
|
46
57
|
if (markerManager) {
|
|
47
58
|
// Create a marker
|
|
48
59
|
const marker = markerManager.createMarker({
|
|
49
|
-
position: [1500, 1000], // [
|
|
60
|
+
position: [1500, 1000], // [y, x] coordinates
|
|
50
61
|
label: 'My Marker',
|
|
51
62
|
});
|
|
52
63
|
}
|
|
@@ -92,7 +103,7 @@ viewer.initialize();
|
|
|
92
103
|
|
|
93
104
|
### EdgePdfViewer
|
|
94
105
|
|
|
95
|
-
Main class for initializing and managing
|
|
106
|
+
Main class for initializing and managing interactive map instances for PDF viewing.
|
|
96
107
|
|
|
97
108
|
#### Constructor
|
|
98
109
|
|
|
@@ -108,7 +119,7 @@ new EdgePdfViewer(options: {
|
|
|
108
119
|
|
|
109
120
|
- `container` - HTML element that will contain the map
|
|
110
121
|
- `config` - Viewer configuration with tile URL and image info
|
|
111
|
-
- `mapOptions` - Optional
|
|
122
|
+
- `mapOptions` - Optional map options (center, zoom, etc.)
|
|
112
123
|
|
|
113
124
|
**Throws:**
|
|
114
125
|
|
|
@@ -121,17 +132,17 @@ new EdgePdfViewer(options: {
|
|
|
121
132
|
|
|
122
133
|
##### `initialize(): void`
|
|
123
134
|
|
|
124
|
-
Initializes the
|
|
135
|
+
Initializes the viewer and prepares it for displaying the PDF document. Call this method after creating the viewer instance.
|
|
125
136
|
|
|
126
137
|
**Throws:**
|
|
127
138
|
|
|
128
|
-
- `Error` if
|
|
139
|
+
- `Error` if initialization fails
|
|
129
140
|
|
|
130
141
|
##### `getMap(): L.Map | null`
|
|
131
142
|
|
|
132
|
-
Gets the
|
|
143
|
+
Gets the map instance.
|
|
133
144
|
|
|
134
|
-
**Returns:** The
|
|
145
|
+
**Returns:** The map instance, or `null` if not initialized
|
|
135
146
|
|
|
136
147
|
##### `isInitialized(): boolean`
|
|
137
148
|
|
|
@@ -182,6 +193,7 @@ Focuses on a marker by panning and zooming to its position.
|
|
|
182
193
|
**Returns:** `true` if focus was successful, `false` if marker not found or viewer not initialized
|
|
183
194
|
|
|
184
195
|
**Example:**
|
|
196
|
+
|
|
185
197
|
```typescript
|
|
186
198
|
// Focus with offset to account for overlay
|
|
187
199
|
viewer.focusMarker('marker-123', { offsetLeft: 100, offsetTop: 50 });
|
|
@@ -195,7 +207,7 @@ Disposes of the map instance and cleans up resources. This should be called when
|
|
|
195
207
|
|
|
196
208
|
### MarkerManager
|
|
197
209
|
|
|
198
|
-
Manages markers on the
|
|
210
|
+
Manages markers on the interactive map. Access via `viewer.getMarkerManager()`.
|
|
199
211
|
|
|
200
212
|
#### Methods
|
|
201
213
|
|
|
@@ -205,7 +217,7 @@ Creates a new marker from coordinates.
|
|
|
205
217
|
|
|
206
218
|
**Parameters:**
|
|
207
219
|
|
|
208
|
-
- `options.position?: LeafletCoords` -
|
|
220
|
+
- `options.position?: LeafletCoords` - Map coordinates [y, x]
|
|
209
221
|
- `options.imageCoords?: ImageCoords` - Image pixel coordinates {x, y}
|
|
210
222
|
- `options.label?: string` - Marker label/tooltip text
|
|
211
223
|
- `options.description?: string` - Marker description
|
|
@@ -268,7 +280,7 @@ Updates a marker's position.
|
|
|
268
280
|
**Parameters:**
|
|
269
281
|
|
|
270
282
|
- `id` - Marker ID
|
|
271
|
-
- `position` - New
|
|
283
|
+
- `position` - New map coordinates [y, x]
|
|
272
284
|
|
|
273
285
|
**Returns:** `true` if marker was updated, `false` if not found
|
|
274
286
|
|
|
@@ -399,6 +411,7 @@ Focuses on a marker by panning and zooming to its position.
|
|
|
399
411
|
**Returns:** `true` if focus was successful, `false` if marker not found
|
|
400
412
|
|
|
401
413
|
**Example:**
|
|
414
|
+
|
|
402
415
|
```typescript
|
|
403
416
|
// Focus with offset to account for overlay
|
|
404
417
|
markerManager.focusMarker('marker-123', { offsetLeft: 100, offsetTop: 50 });
|
|
@@ -671,11 +684,13 @@ type IconType = 'pin-gray' | 'pin-yellow';
|
|
|
671
684
|
|
|
672
685
|
## Coordinate System
|
|
673
686
|
|
|
674
|
-
The viewer uses
|
|
687
|
+
The viewer uses a simple pixel-based coordinate system for positioning markers:
|
|
688
|
+
|
|
689
|
+
- **Format**: `[y, x]` - array with vertical position first, horizontal position second
|
|
690
|
+
- **Range**: X from 0 to image width, Y from 0 to image height
|
|
691
|
+
- **Origin**: Top-left corner at `[0, 0]`
|
|
675
692
|
|
|
676
|
-
|
|
677
|
-
- Y-axis: vertical pixel position (0 to image height)
|
|
678
|
-
- Origin: top-left corner (0, 0)
|
|
693
|
+
**Note**: You can also use image pixel coordinates `{x, y}` when creating markers - the viewer will automatically convert them to the appropriate format.
|
|
679
694
|
|
|
680
695
|
## Examples
|
|
681
696
|
|
package/dist/index.d.ts
CHANGED