@edgepdf/viewer-react 0.0.29 → 0.0.31
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.d.ts +0 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +155 -99
- package/dist/lib/pdf-viewer-client.d.ts.map +1 -1
- package/dist/lib/use-markers.d.ts +2 -2
- package/dist/lib/use-markers.d.ts.map +1 -1
- package/dist/lib/use-viewer.d.ts +3 -1
- package/dist/lib/use-viewer.d.ts.map +1 -1
- package/package.json +3 -2
- package/dist/index.css +0 -929
package/dist/index.d.ts
CHANGED
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,YAAY,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAG9D,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,YAAY,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAGhE,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,YAAY,EACV,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE3D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,YAAY,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAE7D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -9,6 +9,27 @@ var __export = (target, all) => {
|
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
// packages/viewer-js/dist/index.js
|
|
12
|
+
async function loadLeaflet() {
|
|
13
|
+
if (L2) {
|
|
14
|
+
return L2;
|
|
15
|
+
}
|
|
16
|
+
if (leafletLoadPromise) {
|
|
17
|
+
return leafletLoadPromise;
|
|
18
|
+
}
|
|
19
|
+
if (typeof window === "undefined" || typeof document === "undefined") {
|
|
20
|
+
throw new Error(
|
|
21
|
+
"Leaflet requires a browser environment. This code can only be used in the browser."
|
|
22
|
+
);
|
|
23
|
+
}
|
|
24
|
+
leafletLoadPromise = Promise.resolve().then(() => __toESM(require_leaflet_src(), 1)).then((leafletModule) => {
|
|
25
|
+
L2 = leafletModule.default;
|
|
26
|
+
return L2;
|
|
27
|
+
});
|
|
28
|
+
return leafletLoadPromise;
|
|
29
|
+
}
|
|
30
|
+
function getLeaflet() {
|
|
31
|
+
return L2;
|
|
32
|
+
}
|
|
12
33
|
function calculateTileCount(imageSize, tileSize, zoom) {
|
|
13
34
|
if (imageSize <= 0 || tileSize <= 0 || zoom < 0) {
|
|
14
35
|
return 0;
|
|
@@ -658,7 +679,7 @@ function createZoomControls(container, zoomController, options) {
|
|
|
658
679
|
updateButtonStates();
|
|
659
680
|
return controlsDiv;
|
|
660
681
|
}
|
|
661
|
-
var __create, __defProp2, __getOwnPropDesc, __getOwnPropNames2, __getProtoOf, __hasOwnProp, __commonJS, __copyProps, __toESM, require_leaflet_src,
|
|
682
|
+
var __create, __defProp2, __getOwnPropDesc, __getOwnPropNames2, __getProtoOf, __hasOwnProp, __commonJS, __copyProps, __toESM, require_leaflet_src, L2, leafletLoadPromise, MAX_ZOOM_LEVEL, TileLayerManager, CoordinateMapper, ZoomController, currentEditPopup, currentDeletePopup, MarkerManager, EdgePdfViewer;
|
|
662
683
|
var init_dist = __esm({
|
|
663
684
|
"packages/viewer-js/dist/index.js"() {
|
|
664
685
|
"use strict";
|
|
@@ -10236,8 +10257,8 @@ var init_dist = __esm({
|
|
|
10236
10257
|
});
|
|
10237
10258
|
}
|
|
10238
10259
|
});
|
|
10239
|
-
|
|
10240
|
-
|
|
10260
|
+
L2 = null;
|
|
10261
|
+
leafletLoadPromise = null;
|
|
10241
10262
|
MAX_ZOOM_LEVEL = 4;
|
|
10242
10263
|
TileLayerManager = class {
|
|
10243
10264
|
config;
|
|
@@ -10274,12 +10295,13 @@ var init_dist = __esm({
|
|
|
10274
10295
|
*
|
|
10275
10296
|
* @throws {Error} If tile layer creation fails
|
|
10276
10297
|
*/
|
|
10277
|
-
createTileLayer(map) {
|
|
10298
|
+
async createTileLayer(map) {
|
|
10278
10299
|
if (this.tileLayer) {
|
|
10279
10300
|
console.warn("Tile layer already created. Use removeTileLayer() first.");
|
|
10280
10301
|
return this.tileLayer;
|
|
10281
10302
|
}
|
|
10282
10303
|
try {
|
|
10304
|
+
const L3 = getLeaflet() || await loadLeaflet();
|
|
10283
10305
|
const { imageInfo, tileUrl, keepBuffer, updateInterval } = this.config;
|
|
10284
10306
|
const bounds = this.calculateTileBounds();
|
|
10285
10307
|
const tileLayerOptions = {
|
|
@@ -10302,7 +10324,7 @@ var init_dist = __esm({
|
|
|
10302
10324
|
className: "seamless-tiles"
|
|
10303
10325
|
// CSS class for styling
|
|
10304
10326
|
};
|
|
10305
|
-
this.tileLayer =
|
|
10327
|
+
this.tileLayer = L3.tileLayer(tileUrl, tileLayerOptions);
|
|
10306
10328
|
if (map) {
|
|
10307
10329
|
this.setupEventListeners(map);
|
|
10308
10330
|
}
|
|
@@ -10414,7 +10436,6 @@ var init_dist = __esm({
|
|
|
10414
10436
|
return this.config;
|
|
10415
10437
|
}
|
|
10416
10438
|
};
|
|
10417
|
-
import_leaflet2 = __toESM(require_leaflet_src(), 1);
|
|
10418
10439
|
CoordinateMapper = class {
|
|
10419
10440
|
imageInfo;
|
|
10420
10441
|
/**
|
|
@@ -10554,13 +10575,14 @@ var init_dist = __esm({
|
|
|
10554
10575
|
* // [[0, 0], [512, 512]] for minZoom 0 with tileSize 256
|
|
10555
10576
|
* ```
|
|
10556
10577
|
*/
|
|
10557
|
-
calculateMapBounds() {
|
|
10578
|
+
async calculateMapBounds() {
|
|
10579
|
+
const L3 = getLeaflet() || await loadLeaflet();
|
|
10558
10580
|
const tileSize = this.imageInfo.tileSize || 256;
|
|
10559
10581
|
const minZoom = this.imageInfo.minZoom || 0;
|
|
10560
10582
|
const gridSize = Math.pow(2, minZoom + 1);
|
|
10561
10583
|
const boundsWidth = gridSize * tileSize;
|
|
10562
10584
|
const boundsHeight = gridSize * tileSize;
|
|
10563
|
-
return
|
|
10585
|
+
return L3.latLngBounds([0, 0], [boundsHeight, boundsWidth]);
|
|
10564
10586
|
}
|
|
10565
10587
|
/**
|
|
10566
10588
|
* Validates Leaflet coordinates and checks bounds
|
|
@@ -10618,9 +10640,10 @@ var init_dist = __esm({
|
|
|
10618
10640
|
*
|
|
10619
10641
|
* @returns Custom CRS instance
|
|
10620
10642
|
*/
|
|
10621
|
-
createCustomCRS() {
|
|
10622
|
-
|
|
10623
|
-
|
|
10643
|
+
async createCustomCRS() {
|
|
10644
|
+
const L3 = getLeaflet() || await loadLeaflet();
|
|
10645
|
+
return L3.extend({}, L3.CRS.Simple, {
|
|
10646
|
+
transformation: new L3.Transformation(1, 0, 1, 0)
|
|
10624
10647
|
});
|
|
10625
10648
|
}
|
|
10626
10649
|
/**
|
|
@@ -10996,7 +11019,6 @@ var init_dist = __esm({
|
|
|
10996
11019
|
this.removeAllListeners();
|
|
10997
11020
|
}
|
|
10998
11021
|
};
|
|
10999
|
-
import_leaflet3 = __toESM(require_leaflet_src(), 1);
|
|
11000
11022
|
currentEditPopup = null;
|
|
11001
11023
|
currentDeletePopup = null;
|
|
11002
11024
|
MarkerManager = class {
|
|
@@ -11005,7 +11027,7 @@ var init_dist = __esm({
|
|
|
11005
11027
|
imageInfo;
|
|
11006
11028
|
markers = /* @__PURE__ */ new Map();
|
|
11007
11029
|
leafletMarkers = /* @__PURE__ */ new Map();
|
|
11008
|
-
markerLayerGroup;
|
|
11030
|
+
markerLayerGroup = null;
|
|
11009
11031
|
eventListeners = /* @__PURE__ */ new Map();
|
|
11010
11032
|
selectedIds = /* @__PURE__ */ new Set();
|
|
11011
11033
|
activeMarkerId = null;
|
|
@@ -11050,7 +11072,16 @@ var init_dist = __esm({
|
|
|
11050
11072
|
this.map = options.map;
|
|
11051
11073
|
this.coordinateMapper = options.coordinateMapper;
|
|
11052
11074
|
this.imageInfo = options.imageInfo;
|
|
11053
|
-
|
|
11075
|
+
}
|
|
11076
|
+
/**
|
|
11077
|
+
* Initializes the marker layer group (called after Leaflet is loaded)
|
|
11078
|
+
*/
|
|
11079
|
+
async ensureLayerGroup() {
|
|
11080
|
+
if (this.markerLayerGroup) {
|
|
11081
|
+
return;
|
|
11082
|
+
}
|
|
11083
|
+
const L3 = getLeaflet() || await loadLeaflet();
|
|
11084
|
+
this.markerLayerGroup = L3.layerGroup().addTo(this.map);
|
|
11054
11085
|
}
|
|
11055
11086
|
/**
|
|
11056
11087
|
* Creates a new marker from coordinates
|
|
@@ -11073,7 +11104,7 @@ var init_dist = __esm({
|
|
|
11073
11104
|
* @throws {Error} If neither position nor imageCoords is provided
|
|
11074
11105
|
* @throws {Error} If coordinates are invalid or out of bounds
|
|
11075
11106
|
*/
|
|
11076
|
-
createMarker(options) {
|
|
11107
|
+
async createMarker(options) {
|
|
11077
11108
|
if (!options.position && !options.imageCoords) {
|
|
11078
11109
|
throw new Error("Either position or imageCoords must be provided");
|
|
11079
11110
|
}
|
|
@@ -11119,10 +11150,11 @@ var init_dist = __esm({
|
|
|
11119
11150
|
deletable: options.deletable
|
|
11120
11151
|
};
|
|
11121
11152
|
this.validateMarker(marker);
|
|
11122
|
-
const leafletMarker = this.createLeafletMarker(marker);
|
|
11153
|
+
const leafletMarker = await this.createLeafletMarker(marker);
|
|
11123
11154
|
this.setupMarkerInteractions(leafletMarker, marker);
|
|
11124
11155
|
this.markers.set(id, marker);
|
|
11125
11156
|
this.leafletMarkers.set(id, leafletMarker);
|
|
11157
|
+
await this.ensureLayerGroup();
|
|
11126
11158
|
this.markerLayerGroup.addLayer(leafletMarker);
|
|
11127
11159
|
return marker;
|
|
11128
11160
|
}
|
|
@@ -11264,7 +11296,9 @@ var init_dist = __esm({
|
|
|
11264
11296
|
if (!marker || !leafletMarker) {
|
|
11265
11297
|
return false;
|
|
11266
11298
|
}
|
|
11267
|
-
this.markerLayerGroup
|
|
11299
|
+
if (this.markerLayerGroup) {
|
|
11300
|
+
this.markerLayerGroup.removeLayer(leafletMarker);
|
|
11301
|
+
}
|
|
11268
11302
|
this.removeActiveMarkerOverlay(id);
|
|
11269
11303
|
if (this.activeMarkerId === id) {
|
|
11270
11304
|
this.setActiveMarker(null);
|
|
@@ -11277,7 +11311,9 @@ var init_dist = __esm({
|
|
|
11277
11311
|
* Removes all markers
|
|
11278
11312
|
*/
|
|
11279
11313
|
removeAllMarkers() {
|
|
11280
|
-
this.markerLayerGroup
|
|
11314
|
+
if (this.markerLayerGroup) {
|
|
11315
|
+
this.markerLayerGroup.clearLayers();
|
|
11316
|
+
}
|
|
11281
11317
|
this.markers.clear();
|
|
11282
11318
|
this.leafletMarkers.clear();
|
|
11283
11319
|
this.activeMarkerOverlays.clear();
|
|
@@ -11322,7 +11358,7 @@ var init_dist = __esm({
|
|
|
11322
11358
|
* @param updates - Partial marker properties to update
|
|
11323
11359
|
* @returns True if marker was updated, false if not found
|
|
11324
11360
|
*/
|
|
11325
|
-
updateMarker(id, updates) {
|
|
11361
|
+
async updateMarker(id, updates) {
|
|
11326
11362
|
const marker = this.markers.get(id);
|
|
11327
11363
|
const leafletMarker = this.leafletMarkers.get(id);
|
|
11328
11364
|
if (!marker || !leafletMarker) {
|
|
@@ -11345,7 +11381,7 @@ var init_dist = __esm({
|
|
|
11345
11381
|
}
|
|
11346
11382
|
if (updates.iconType !== void 0) {
|
|
11347
11383
|
marker.iconType = updates.iconType;
|
|
11348
|
-
const newIcon = this.createCustomIcon(updates.iconType);
|
|
11384
|
+
const newIcon = await this.createCustomIcon(updates.iconType);
|
|
11349
11385
|
leafletMarker.setIcon(newIcon);
|
|
11350
11386
|
}
|
|
11351
11387
|
if (updates.referenceId !== void 0) {
|
|
@@ -11503,7 +11539,7 @@ var init_dist = __esm({
|
|
|
11503
11539
|
* @param id - Marker ID to set as active, or null to clear active marker
|
|
11504
11540
|
* @returns True if marker was set as active, false if not found
|
|
11505
11541
|
*/
|
|
11506
|
-
setActiveMarker(id) {
|
|
11542
|
+
async setActiveMarker(id) {
|
|
11507
11543
|
if (id === null) {
|
|
11508
11544
|
const previousActiveId = this.activeMarkerId;
|
|
11509
11545
|
this.activeMarkerId = null;
|
|
@@ -11535,7 +11571,9 @@ var init_dist = __esm({
|
|
|
11535
11571
|
leafletMarker.closePopup();
|
|
11536
11572
|
}
|
|
11537
11573
|
this.activeMarkerId = id;
|
|
11538
|
-
this.addActiveMarkerOverlay(id)
|
|
11574
|
+
this.addActiveMarkerOverlay(id).catch((error) => {
|
|
11575
|
+
console.warn("Failed to add active marker overlay:", error);
|
|
11576
|
+
});
|
|
11539
11577
|
if (this.interactionConfig.onActiveMarkerChange) {
|
|
11540
11578
|
this.interactionConfig.onActiveMarkerChange(marker);
|
|
11541
11579
|
}
|
|
@@ -11660,14 +11698,14 @@ var init_dist = __esm({
|
|
|
11660
11698
|
* @param iconType - New icon type
|
|
11661
11699
|
* @returns True if marker was updated, false if not found
|
|
11662
11700
|
*/
|
|
11663
|
-
updateMarkerIcon(id, iconType) {
|
|
11701
|
+
async updateMarkerIcon(id, iconType) {
|
|
11664
11702
|
const marker = this.markers.get(id);
|
|
11665
11703
|
const leafletMarker = this.leafletMarkers.get(id);
|
|
11666
11704
|
if (!marker || !leafletMarker) {
|
|
11667
11705
|
return false;
|
|
11668
11706
|
}
|
|
11669
11707
|
marker.iconType = iconType;
|
|
11670
|
-
const newIcon = this.createCustomIcon(iconType);
|
|
11708
|
+
const newIcon = await this.createCustomIcon(iconType);
|
|
11671
11709
|
leafletMarker.setIcon(newIcon);
|
|
11672
11710
|
return true;
|
|
11673
11711
|
}
|
|
@@ -11699,9 +11737,10 @@ var init_dist = __esm({
|
|
|
11699
11737
|
* @param iconType - Icon type to use
|
|
11700
11738
|
* @returns Leaflet icon instance
|
|
11701
11739
|
*/
|
|
11702
|
-
createCustomIcon(iconType) {
|
|
11740
|
+
async createCustomIcon(iconType) {
|
|
11741
|
+
const L3 = getLeaflet() || await loadLeaflet();
|
|
11703
11742
|
const iconUrl = `${this.iconBasePath}${iconType}.png`;
|
|
11704
|
-
return
|
|
11743
|
+
return L3.icon({
|
|
11705
11744
|
iconUrl,
|
|
11706
11745
|
iconSize: [30, 40],
|
|
11707
11746
|
// Default marker size
|
|
@@ -11721,9 +11760,11 @@ var init_dist = __esm({
|
|
|
11721
11760
|
* @param marker - Marker data
|
|
11722
11761
|
* @returns Leaflet marker instance
|
|
11723
11762
|
*/
|
|
11724
|
-
createLeafletMarker(marker) {
|
|
11763
|
+
async createLeafletMarker(marker) {
|
|
11764
|
+
const L3 = getLeaflet() || await loadLeaflet();
|
|
11765
|
+
await this.ensureLayerGroup();
|
|
11725
11766
|
const iconType = marker.iconType || "pin-gray";
|
|
11726
|
-
const customIcon = this.createCustomIcon(iconType);
|
|
11767
|
+
const customIcon = await this.createCustomIcon(iconType);
|
|
11727
11768
|
const markerOptions = {
|
|
11728
11769
|
title: marker.label,
|
|
11729
11770
|
icon: customIcon
|
|
@@ -11732,7 +11773,7 @@ var init_dist = __esm({
|
|
|
11732
11773
|
if (isDraggable) {
|
|
11733
11774
|
markerOptions.draggable = true;
|
|
11734
11775
|
}
|
|
11735
|
-
const leafletMarker =
|
|
11776
|
+
const leafletMarker = L3.marker(
|
|
11736
11777
|
[marker.position[0], marker.position[1]],
|
|
11737
11778
|
markerOptions
|
|
11738
11779
|
);
|
|
@@ -11827,13 +11868,14 @@ var init_dist = __esm({
|
|
|
11827
11868
|
*
|
|
11828
11869
|
* @param id - Marker ID
|
|
11829
11870
|
*/
|
|
11830
|
-
addActiveMarkerOverlay(id) {
|
|
11871
|
+
async addActiveMarkerOverlay(id) {
|
|
11831
11872
|
this.removeActiveMarkerOverlay(id);
|
|
11832
11873
|
const marker = this.markers.get(id);
|
|
11833
11874
|
const leafletMarker = this.leafletMarkers.get(id);
|
|
11834
11875
|
if (!marker || !leafletMarker) {
|
|
11835
11876
|
return;
|
|
11836
11877
|
}
|
|
11878
|
+
await this.ensureLayerGroup();
|
|
11837
11879
|
const overlaySize = 40;
|
|
11838
11880
|
const borderWidth = 1;
|
|
11839
11881
|
const overlayAnchorX = 20;
|
|
@@ -11849,8 +11891,9 @@ var init_dist = __esm({
|
|
|
11849
11891
|
position: relative;
|
|
11850
11892
|
"></div>
|
|
11851
11893
|
`;
|
|
11852
|
-
const
|
|
11853
|
-
|
|
11894
|
+
const L3 = getLeaflet() || await loadLeaflet();
|
|
11895
|
+
const overlay = L3.marker([marker.position[0], marker.position[1]], {
|
|
11896
|
+
icon: L3.divIcon({
|
|
11854
11897
|
html: overlayHTML,
|
|
11855
11898
|
className: "edgepdf-active-marker-overlay",
|
|
11856
11899
|
iconSize: [overlaySize, overlaySize],
|
|
@@ -11862,7 +11905,9 @@ var init_dist = __esm({
|
|
|
11862
11905
|
// Below marker but visible
|
|
11863
11906
|
});
|
|
11864
11907
|
this.activeMarkerOverlays.set(id, overlay);
|
|
11865
|
-
this.markerLayerGroup
|
|
11908
|
+
if (this.markerLayerGroup) {
|
|
11909
|
+
this.markerLayerGroup.addLayer(overlay);
|
|
11910
|
+
}
|
|
11866
11911
|
leafletMarker.on("drag", () => {
|
|
11867
11912
|
const newPos = leafletMarker.getLatLng();
|
|
11868
11913
|
overlay.setLatLng(newPos);
|
|
@@ -11875,7 +11920,7 @@ var init_dist = __esm({
|
|
|
11875
11920
|
*/
|
|
11876
11921
|
removeActiveMarkerOverlay(id) {
|
|
11877
11922
|
const overlay = this.activeMarkerOverlays.get(id);
|
|
11878
|
-
if (overlay) {
|
|
11923
|
+
if (overlay && this.markerLayerGroup) {
|
|
11879
11924
|
this.markerLayerGroup.removeLayer(overlay);
|
|
11880
11925
|
this.activeMarkerOverlays.delete(id);
|
|
11881
11926
|
}
|
|
@@ -12212,7 +12257,7 @@ var init_dist = __esm({
|
|
|
12212
12257
|
*
|
|
12213
12258
|
* @throws {Error} If map initialization fails
|
|
12214
12259
|
*/
|
|
12215
|
-
initialize() {
|
|
12260
|
+
async initialize() {
|
|
12216
12261
|
if (this.map) {
|
|
12217
12262
|
console.warn(
|
|
12218
12263
|
"Map already initialized. Call dispose() before reinitializing."
|
|
@@ -12220,9 +12265,10 @@ var init_dist = __esm({
|
|
|
12220
12265
|
return;
|
|
12221
12266
|
}
|
|
12222
12267
|
try {
|
|
12268
|
+
const Leaflet = await loadLeaflet();
|
|
12223
12269
|
this.coordinateMapper = new CoordinateMapper(this.config.imageInfo);
|
|
12224
|
-
const customCRS = this.coordinateMapper.createCustomCRS();
|
|
12225
|
-
const bounds = this.coordinateMapper.calculateMapBounds();
|
|
12270
|
+
const customCRS = await this.coordinateMapper.createCustomCRS();
|
|
12271
|
+
const bounds = await this.coordinateMapper.calculateMapBounds();
|
|
12226
12272
|
const imageCenter = this.coordinateMapper.getImageCenter();
|
|
12227
12273
|
const center = this.mapOptions?.center || [
|
|
12228
12274
|
imageCenter.y,
|
|
@@ -12250,11 +12296,11 @@ var init_dist = __esm({
|
|
|
12250
12296
|
// Mouse wheel sensitivity
|
|
12251
12297
|
...this.mapOptions
|
|
12252
12298
|
};
|
|
12253
|
-
this.map =
|
|
12299
|
+
this.map = Leaflet.map(this.container, leafletOptions);
|
|
12254
12300
|
if (!this.mapOptions?.center && !this.mapOptions?.zoom) {
|
|
12255
12301
|
this.map.setView([imageCenter.y, imageCenter.x], initialZoom);
|
|
12256
12302
|
}
|
|
12257
|
-
this.addTileLayer();
|
|
12303
|
+
await this.addTileLayer();
|
|
12258
12304
|
this.addSeamlessTileStyles();
|
|
12259
12305
|
this.zoomController = new ZoomController({
|
|
12260
12306
|
map: this.map,
|
|
@@ -12348,7 +12394,7 @@ var init_dist = __esm({
|
|
|
12348
12394
|
*
|
|
12349
12395
|
* @throws {Error} If map is not initialized or tile layer creation fails
|
|
12350
12396
|
*/
|
|
12351
|
-
addTileLayer() {
|
|
12397
|
+
async addTileLayer() {
|
|
12352
12398
|
if (!this.map) {
|
|
12353
12399
|
throw new Error("Map must be initialized before adding tile layer");
|
|
12354
12400
|
}
|
|
@@ -12357,7 +12403,7 @@ var init_dist = __esm({
|
|
|
12357
12403
|
tileUrl: this.config.tileUrl,
|
|
12358
12404
|
imageInfo: this.config.imageInfo
|
|
12359
12405
|
});
|
|
12360
|
-
const tileLayer = this.tileLayerManager.createTileLayer(this.map);
|
|
12406
|
+
const tileLayer = await this.tileLayerManager.createTileLayer(this.map);
|
|
12361
12407
|
tileLayer.addTo(this.map);
|
|
12362
12408
|
console.log("Tile layer added to map successfully");
|
|
12363
12409
|
} catch (error) {
|
|
@@ -12588,63 +12634,69 @@ function EdgePDFViewerClient({
|
|
|
12588
12634
|
return;
|
|
12589
12635
|
}
|
|
12590
12636
|
let viewerInstance = null;
|
|
12591
|
-
|
|
12592
|
-
|
|
12593
|
-
|
|
12594
|
-
|
|
12595
|
-
|
|
12596
|
-
|
|
12597
|
-
|
|
12598
|
-
|
|
12599
|
-
|
|
12600
|
-
viewer: viewerInstance,
|
|
12601
|
-
isInitialized: true
|
|
12602
|
-
});
|
|
12603
|
-
const markerManager = viewerInstance.getMarkerManager();
|
|
12604
|
-
if (markerManager) {
|
|
12605
|
-
markerManager.setIconBasePath("/");
|
|
12606
|
-
markerManager.setInteractionConfig({
|
|
12607
|
-
draggable: enableAnnotation,
|
|
12608
|
-
selectable: enableAnnotation,
|
|
12609
|
-
showTooltips: true,
|
|
12610
|
-
showPopups: true,
|
|
12611
|
-
// Always show popups to enable edit/delete
|
|
12612
|
-
multiSelect: enableAnnotation,
|
|
12613
|
-
showEditButton: enableAnnotation,
|
|
12614
|
-
// Show edit/delete only when annotation enabled
|
|
12615
|
-
showDeleteButton: enableAnnotation
|
|
12637
|
+
const initializeViewer = async () => {
|
|
12638
|
+
if (!containerRef.current) {
|
|
12639
|
+
return;
|
|
12640
|
+
}
|
|
12641
|
+
try {
|
|
12642
|
+
viewerInstance = new EdgePdfViewer({
|
|
12643
|
+
container: containerRef.current,
|
|
12644
|
+
config: finalConfig,
|
|
12645
|
+
mapOptions: finalMapOptions
|
|
12616
12646
|
});
|
|
12617
|
-
|
|
12618
|
-
|
|
12619
|
-
|
|
12620
|
-
|
|
12621
|
-
|
|
12622
|
-
|
|
12623
|
-
|
|
12624
|
-
|
|
12625
|
-
|
|
12626
|
-
|
|
12627
|
-
|
|
12628
|
-
|
|
12647
|
+
await viewerInstance.initialize();
|
|
12648
|
+
viewerRef.current = viewerInstance;
|
|
12649
|
+
setContextValue({
|
|
12650
|
+
viewer: viewerInstance,
|
|
12651
|
+
isInitialized: true
|
|
12652
|
+
});
|
|
12653
|
+
const markerManager = viewerInstance.getMarkerManager();
|
|
12654
|
+
if (markerManager) {
|
|
12655
|
+
markerManager.setIconBasePath("/");
|
|
12656
|
+
markerManager.setInteractionConfig({
|
|
12657
|
+
draggable: enableAnnotation,
|
|
12658
|
+
selectable: enableAnnotation,
|
|
12659
|
+
showTooltips: true,
|
|
12660
|
+
showPopups: true,
|
|
12661
|
+
// Always show popups to enable edit/delete
|
|
12662
|
+
multiSelect: enableAnnotation,
|
|
12663
|
+
showEditButton: enableAnnotation,
|
|
12664
|
+
// Show edit/delete only when annotation enabled
|
|
12665
|
+
showDeleteButton: enableAnnotation
|
|
12666
|
+
});
|
|
12667
|
+
if (defaultPins) {
|
|
12668
|
+
try {
|
|
12669
|
+
const markerData = Array.isArray(defaultPins) ? { markers: defaultPins, version: "1.0" } : defaultPins;
|
|
12670
|
+
const result = markerManager.importMarkers(markerData, {
|
|
12671
|
+
clearExisting: false,
|
|
12672
|
+
validateCoordinates: true
|
|
12673
|
+
});
|
|
12674
|
+
if (!result.success && result.errors.length > 0) {
|
|
12675
|
+
console.warn(
|
|
12676
|
+
"Some default pins failed to import:",
|
|
12677
|
+
result.errors
|
|
12678
|
+
);
|
|
12679
|
+
}
|
|
12680
|
+
} catch (error) {
|
|
12681
|
+
console.error("Failed to import default pins:", error);
|
|
12629
12682
|
}
|
|
12630
|
-
}
|
|
12631
|
-
|
|
12683
|
+
}
|
|
12684
|
+
const allMarkers = markerManager.getAllMarkers();
|
|
12685
|
+
setContextValue({ markers: allMarkers });
|
|
12686
|
+
if (onPinsUpdateRef.current) {
|
|
12687
|
+
onPinsUpdateRef.current(allMarkers);
|
|
12632
12688
|
}
|
|
12633
12689
|
}
|
|
12634
|
-
const
|
|
12635
|
-
|
|
12636
|
-
|
|
12637
|
-
|
|
12690
|
+
const zoomController = viewerInstance.getZoomController();
|
|
12691
|
+
if (zoomController) {
|
|
12692
|
+
const zoomState = zoomController.getZoomState();
|
|
12693
|
+
setContextValue({ zoomState });
|
|
12638
12694
|
}
|
|
12695
|
+
} catch (error) {
|
|
12696
|
+
console.error("Failed to initialize viewer:", error);
|
|
12639
12697
|
}
|
|
12640
|
-
|
|
12641
|
-
|
|
12642
|
-
const zoomState = zoomController.getZoomState();
|
|
12643
|
-
setContextValue({ zoomState });
|
|
12644
|
-
}
|
|
12645
|
-
} catch (error) {
|
|
12646
|
-
console.error("Failed to initialize viewer:", error);
|
|
12647
|
-
}
|
|
12698
|
+
};
|
|
12699
|
+
initializeViewer();
|
|
12648
12700
|
return () => {
|
|
12649
12701
|
if (viewerInstance) {
|
|
12650
12702
|
viewerInstance.dispose();
|
|
@@ -12691,13 +12743,17 @@ function EdgePDFViewerClient({
|
|
|
12691
12743
|
if (!markerManager) {
|
|
12692
12744
|
return;
|
|
12693
12745
|
}
|
|
12694
|
-
const handleMapClick = (e) => {
|
|
12746
|
+
const handleMapClick = async (e) => {
|
|
12747
|
+
const event = e;
|
|
12695
12748
|
if (!enableAnnotation) {
|
|
12696
12749
|
return;
|
|
12697
12750
|
}
|
|
12698
12751
|
try {
|
|
12699
|
-
const leafletCoords = [
|
|
12700
|
-
|
|
12752
|
+
const leafletCoords = [
|
|
12753
|
+
event.latlng.lat,
|
|
12754
|
+
event.latlng.lng
|
|
12755
|
+
];
|
|
12756
|
+
const newMarker = await markerManager.createMarker({
|
|
12701
12757
|
position: leafletCoords,
|
|
12702
12758
|
label: `Marker ${markerManager.getMarkerCount() + 1}`
|
|
12703
12759
|
});
|
|
@@ -12935,7 +12991,7 @@ function useMarkers() {
|
|
|
12935
12991
|
}
|
|
12936
12992
|
}, [viewer, isInitialized]);
|
|
12937
12993
|
const addMarker = useCallback3(
|
|
12938
|
-
(options) => {
|
|
12994
|
+
async (options) => {
|
|
12939
12995
|
if (!viewer || !isInitialized) {
|
|
12940
12996
|
console.warn("Viewer not initialized");
|
|
12941
12997
|
return null;
|
|
@@ -12946,7 +13002,7 @@ function useMarkers() {
|
|
|
12946
13002
|
return null;
|
|
12947
13003
|
}
|
|
12948
13004
|
try {
|
|
12949
|
-
const marker = markerManager.createMarker(options);
|
|
13005
|
+
const marker = await markerManager.createMarker(options);
|
|
12950
13006
|
const allMarkers = markerManager.getAllMarkers();
|
|
12951
13007
|
setMarkers(allMarkers);
|
|
12952
13008
|
return marker;
|
|
@@ -12983,7 +13039,7 @@ function useMarkers() {
|
|
|
12983
13039
|
[viewer, isInitialized]
|
|
12984
13040
|
);
|
|
12985
13041
|
const updateMarker = useCallback3(
|
|
12986
|
-
(id, updates) => {
|
|
13042
|
+
async (id, updates) => {
|
|
12987
13043
|
if (!viewer || !isInitialized) {
|
|
12988
13044
|
console.warn("Viewer not initialized");
|
|
12989
13045
|
return false;
|
|
@@ -12999,7 +13055,7 @@ function useMarkers() {
|
|
|
12999
13055
|
return false;
|
|
13000
13056
|
}
|
|
13001
13057
|
const updatedMarker = { ...marker, ...updates };
|
|
13002
|
-
const success = markerManager.updateMarker(id, updatedMarker);
|
|
13058
|
+
const success = await markerManager.updateMarker(id, updatedMarker);
|
|
13003
13059
|
if (success) {
|
|
13004
13060
|
const allMarkers = markerManager.getAllMarkers();
|
|
13005
13061
|
setMarkers(allMarkers);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pdf-viewer-client.d.ts","sourceRoot":"","sources":["../../src/lib/pdf-viewer-client.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"pdf-viewer-client.d.ts","sourceRoot":"","sources":["../../src/lib/pdf-viewer-client.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAcjE,OAAO,KAAK,EACV,YAAY,EACZ,UAAU,EACV,MAAM,EACN,UAAU,EACX,MAAM,gBAAgB,CAAC;AAGxB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,2BAA2B;IAC3B,MAAM,EAAE,YAAY,CAAC;IACrB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qEAAqE;IACrE,oBAAoB,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;IACrD,+EAA+E;IAC/E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iEAAiE;IACjE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,0CAA0C;IAC1C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,6CAA6C;IAC7C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,wCAAwC;IACxC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,wCAAwC;IACxC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,wCAAwC;IACxC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,kEAAkE;IAClE,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC;IACpC,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,UAAU,EACV,SAAS,EACT,KAAK,EACL,gBAAuB,EACvB,oBAAkC,EAClC,aAAoB,EACpB,gBAAuB,EACvB,cAAqB,EACrB,gBAAuB,EACvB,gBAAgB,EAChB,YAAY,EACZ,aAAa,EACb,cAAc,EACd,cAAc,EACd,WAAW,EACX,WAAW,EACX,QAAQ,GACT,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAkZlC"}
|
|
@@ -7,11 +7,11 @@ export interface UseMarkersReturn {
|
|
|
7
7
|
/** Current markers */
|
|
8
8
|
markers: Marker[];
|
|
9
9
|
/** Add a new marker */
|
|
10
|
-
addMarker: (options: CreateMarkerOptions) => Marker | null
|
|
10
|
+
addMarker: (options: CreateMarkerOptions) => Promise<Marker | null>;
|
|
11
11
|
/** Remove a marker by ID */
|
|
12
12
|
removeMarker: (id: string) => boolean;
|
|
13
13
|
/** Update a marker */
|
|
14
|
-
updateMarker: (id: string, updates: Partial<Marker>) => boolean
|
|
14
|
+
updateMarker: (id: string, updates: Partial<Marker>) => Promise<boolean>;
|
|
15
15
|
/** Get a marker by ID */
|
|
16
16
|
getMarker: (id: string) => Marker | null;
|
|
17
17
|
/** Get all markers */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-markers.d.ts","sourceRoot":"","sources":["../../src/lib/use-markers.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAG9D;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,sBAAsB;IACtB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,uBAAuB;IACvB,SAAS,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,MAAM,GAAG,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"use-markers.d.ts","sourceRoot":"","sources":["../../src/lib/use-markers.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAG9D;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,sBAAsB;IACtB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,uBAAuB;IACvB,SAAS,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACpE,4BAA4B;IAC5B,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;IACtC,sBAAsB;IACtB,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACzE,yBAAyB;IACzB,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IACzC,sBAAsB;IACtB,aAAa,EAAE,MAAM,MAAM,EAAE,CAAC;IAC9B,6BAA6B;IAC7B,aAAa,EAAE,MAAM,UAAU,CAAC;IAChC,+BAA+B;IAC/B,aAAa,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,OAAO,CAAC;IAC7C,wBAAwB;IACxB,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,UAAU,IAAI,gBAAgB,CAkN7C"}
|
package/dist/lib/use-viewer.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { EdgePdfViewer } from '@edgepdf/viewer-js';
|
|
2
|
+
type LeafletMap = NonNullable<ReturnType<EdgePdfViewer['getMap']>>;
|
|
2
3
|
/**
|
|
3
4
|
* Return type for useViewer hook
|
|
4
5
|
*/
|
|
@@ -8,7 +9,7 @@ export interface UseViewerReturn {
|
|
|
8
9
|
/** Whether viewer is initialized */
|
|
9
10
|
isInitialized: boolean;
|
|
10
11
|
/** Get the Leaflet map instance */
|
|
11
|
-
getMap: () =>
|
|
12
|
+
getMap: () => LeafletMap | null;
|
|
12
13
|
/** Check if viewer is initialized */
|
|
13
14
|
checkInitialized: () => boolean;
|
|
14
15
|
}
|
|
@@ -34,4 +35,5 @@ export interface UseViewerReturn {
|
|
|
34
35
|
* ```
|
|
35
36
|
*/
|
|
36
37
|
export declare function useViewer(): UseViewerReturn;
|
|
38
|
+
export {};
|
|
37
39
|
//# sourceMappingURL=use-viewer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-viewer.d.ts","sourceRoot":"","sources":["../../src/lib/use-viewer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"use-viewer.d.ts","sourceRoot":"","sources":["../../src/lib/use-viewer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAKxD,KAAK,UAAU,GAAG,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;AAEnE;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,sBAAsB;IACtB,MAAM,EAAE,aAAa,GAAG,IAAI,CAAC;IAC7B,oCAAoC;IACpC,aAAa,EAAE,OAAO,CAAC;IACvB,mCAAmC;IACnC,MAAM,EAAE,MAAM,UAAU,GAAG,IAAI,CAAC;IAChC,qCAAqC;IACrC,gBAAgB,EAAE,MAAM,OAAO,CAAC;CACjC;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,SAAS,IAAI,eAAe,CAiB3C"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@edgepdf/viewer-react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.31",
|
|
4
4
|
"description": "EdgePDF Viewer - React components for viewing PDF documents with interactive markers and zoom controls",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -49,7 +49,8 @@
|
|
|
49
49
|
"@edgepdf/viewer-js": "workspace:*",
|
|
50
50
|
"@edgepdf/types": "workspace:*",
|
|
51
51
|
"@edgepdf/utils": "workspace:*",
|
|
52
|
-
"@edgepdf/testing-utils": "workspace:*"
|
|
52
|
+
"@edgepdf/testing-utils": "workspace:*",
|
|
53
|
+
"@types/leaflet": "^1.9.21"
|
|
53
54
|
},
|
|
54
55
|
"peerDependencies": {
|
|
55
56
|
"react": "^18.0.0",
|