@vertexvis/doc-viewer 1.0.2-canary.6 → 1.0.2-testing.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/dist/cjs/vertex-document-viewer.cjs.entry.js +32 -19
- package/dist/collection/__mocks__/pdfjs-mock.js +1 -2
- package/dist/collection/components/document-viewer/document-viewer.css +0 -11
- package/dist/collection/components/document-viewer/document-viewer.js +18 -6
- package/dist/collection/lib/document/layers/controller.js +12 -0
- package/dist/collection/lib/dom.js +0 -3
- package/dist/collection/lib/pdf/pdfjs-renderer.js +1 -10
- package/dist/components/vertex-document-viewer.js +2 -2
- package/dist/doc-viewer/doc-viewer.esm.js +1 -1
- package/dist/doc-viewer/{p-96109c78.entry.js → p-d397d116.entry.js} +2 -2
- package/dist/esm/vertex-document-viewer.entry.js +32 -19
- package/dist/types/__mocks__/pdfjs-mock.d.ts +2 -2
- package/dist/types/components/document-viewer/document-viewer.d.ts +1 -0
- package/dist/types/lib/document/layers/controller.d.ts +3 -1
- package/dist/types/lib/dom.d.ts +0 -1
- package/package.json +4 -4
|
@@ -604,10 +604,22 @@ function apiSupportsLayers(api) {
|
|
|
604
604
|
class DocumentLayersController {
|
|
605
605
|
constructor(api) {
|
|
606
606
|
this.apiSupportsLayers = false;
|
|
607
|
+
if (api != null) {
|
|
608
|
+
this.setApi(api);
|
|
609
|
+
}
|
|
610
|
+
}
|
|
611
|
+
setApi(api) {
|
|
607
612
|
if (apiSupportsLayers(api)) {
|
|
608
613
|
this.apiSupportsLayers = true;
|
|
609
614
|
this.api = api;
|
|
610
615
|
}
|
|
616
|
+
else {
|
|
617
|
+
this.clear();
|
|
618
|
+
}
|
|
619
|
+
}
|
|
620
|
+
clear() {
|
|
621
|
+
this.apiSupportsLayers = false;
|
|
622
|
+
this.api = undefined;
|
|
611
623
|
}
|
|
612
624
|
/**
|
|
613
625
|
* Returns a boolean indicating whether the document supports layers.
|
|
@@ -642,9 +654,6 @@ class DocumentLayersController {
|
|
|
642
654
|
function getElementBoundingClientRect(element) {
|
|
643
655
|
return element.getBoundingClientRect();
|
|
644
656
|
}
|
|
645
|
-
function createElement(tagName) {
|
|
646
|
-
return document.createElement(tagName);
|
|
647
|
-
}
|
|
648
657
|
function getAllVertexElementChildren(element) {
|
|
649
658
|
return getAllChildren(element)
|
|
650
659
|
.filter(node => node.nodeName.startsWith('VERTEX-'))
|
|
@@ -34527,7 +34536,7 @@ class PdfJsRenderer extends DocumentRenderer {
|
|
|
34527
34536
|
this.state = { pages: {}, rendering: false };
|
|
34528
34537
|
// Render pages using an offscreen canvas to avoid flickering that can occur for
|
|
34529
34538
|
// PDFs with annotations.
|
|
34530
|
-
this.offscreenCanvas = createElement('canvas');
|
|
34539
|
+
this.offscreenCanvas = document.createElement('canvas');
|
|
34531
34540
|
this.handleStateChanged = this.handleStateChanged.bind(this);
|
|
34532
34541
|
this.stateChangedDisposable = this.api.onStateChanged(this.handleStateChanged);
|
|
34533
34542
|
}
|
|
@@ -34569,18 +34578,10 @@ class PdfJsRenderer extends DocumentRenderer {
|
|
|
34569
34578
|
});
|
|
34570
34579
|
this.offscreenCanvas.width = this.canvas.width;
|
|
34571
34580
|
this.offscreenCanvas.height = this.canvas.height;
|
|
34572
|
-
const offscreenCanvasCtx = this.offscreenCanvas.getContext('2d');
|
|
34573
|
-
// Fill the offscreen canvas with a white background prior to rendering the page to give the content
|
|
34574
|
-
// of the PDF a white background, but maintain the canvas it gets drawn to when copying to the main canvas.
|
|
34575
|
-
if (offscreenCanvasCtx != null) {
|
|
34576
|
-
offscreenCanvasCtx.fillStyle = '#ffffff';
|
|
34577
|
-
offscreenCanvasCtx.fillRect(panOffset.x + centerOffsetX, panOffset.y, scaled.width, scaled.height);
|
|
34578
|
-
}
|
|
34579
34581
|
await page.render({
|
|
34580
34582
|
canvas: this.offscreenCanvas,
|
|
34581
34583
|
viewport: scaled,
|
|
34582
34584
|
intent: 'display',
|
|
34583
|
-
background: 'transparent',
|
|
34584
34585
|
optionalContentConfigPromise: optionalContentConfig != null ? Promise.resolve(optionalContentConfig) : undefined,
|
|
34585
34586
|
}).promise;
|
|
34586
34587
|
// Emit an event before the page is drawn, then draw the page to the canvas on the next
|
|
@@ -34610,7 +34611,7 @@ class PdfJsProvider {
|
|
|
34610
34611
|
}
|
|
34611
34612
|
}
|
|
34612
34613
|
|
|
34613
|
-
const documentViewerCss = () => `:host{display:block;position:relative;width:300px;height:300px;min-width:1px;min-height:1px;user-select:none;-webkit-user-select:none
|
|
34614
|
+
const documentViewerCss = () => `:host{display:block;position:relative;width:300px;height:300px;min-width:1px;min-height:1px;user-select:none;-webkit-user-select:none}.viewer-container{width:100%;height:100%;overflow:hidden}.canvas-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;position:relative}`;
|
|
34614
34615
|
|
|
34615
34616
|
const VertexDocumentViewer = class {
|
|
34616
34617
|
constructor(hostRef) {
|
|
@@ -34642,6 +34643,7 @@ const VertexDocumentViewer = class {
|
|
|
34642
34643
|
this.handleDocumentApiStateChanged = this.handleDocumentApiStateChanged.bind(this);
|
|
34643
34644
|
this.handlePageLoaded = this.handlePageLoaded.bind(this);
|
|
34644
34645
|
this.handlePageDrawn = this.handlePageDrawn.bind(this);
|
|
34646
|
+
this.layers = new DocumentLayersController();
|
|
34645
34647
|
this.resizeObserver = new ResizeObserver(this.handleElementResize);
|
|
34646
34648
|
this.registerSlotChangeListeners();
|
|
34647
34649
|
}
|
|
@@ -34654,7 +34656,7 @@ const VertexDocumentViewer = class {
|
|
|
34654
34656
|
var _a;
|
|
34655
34657
|
(_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.hostEl);
|
|
34656
34658
|
this.updateComponentDimensions();
|
|
34657
|
-
this.
|
|
34659
|
+
this.loadInitialSrc();
|
|
34658
34660
|
this.injectViewerApi();
|
|
34659
34661
|
}
|
|
34660
34662
|
disconnectedCallback() {
|
|
@@ -34721,12 +34723,13 @@ const VertexDocumentViewer = class {
|
|
|
34721
34723
|
await documentApi.loadPage(pageNumber);
|
|
34722
34724
|
}
|
|
34723
34725
|
async handleSrcChange() {
|
|
34726
|
+
var _a;
|
|
34724
34727
|
if (this.src != null && this.canvasEl != null) {
|
|
34725
34728
|
this.clearCurrentDocument();
|
|
34726
34729
|
const { api, renderer } = this.provider.create(this.canvasEl, this.config);
|
|
34727
34730
|
this.documentApi = api;
|
|
34728
34731
|
this.documentRenderer = renderer;
|
|
34729
|
-
this.layers
|
|
34732
|
+
(_a = this.layers) === null || _a === void 0 ? void 0 : _a.setApi(api);
|
|
34730
34733
|
this.updateInteractionHandler();
|
|
34731
34734
|
this.updateDocumentApiListeners();
|
|
34732
34735
|
await this.documentApi.updateViewport(this.dimensions);
|
|
@@ -34743,9 +34746,9 @@ const VertexDocumentViewer = class {
|
|
|
34743
34746
|
this.updateInteractionHandler();
|
|
34744
34747
|
}
|
|
34745
34748
|
render() {
|
|
34746
|
-
return (h(Host, { key: '
|
|
34749
|
+
return (h(Host, { key: 'a990831d5f2328f2cf21be0b82d4018b05decd51' }, h("div", { key: '349abae36254da570e640417fab459680c576465', ref: ref => (this.viewerContainerElement = ref), class: "viewer-container", onContextMenu: event => event.preventDefault() }, h("div", { key: '6fca3f1d5a2c31bdcc0c8dbbd468e306db981740', ref: ref => (this.canvasContainerElement = ref), class: classNames('canvas-container', {
|
|
34747
34750
|
'enable-pointer-events ': window.PointerEvent != null,
|
|
34748
|
-
}) }, h("canvas", { key: '
|
|
34751
|
+
}) }, h("canvas", { key: 'fe22d0a0cbe37951495420fb8efe6ca1062c38a7', role: "presentation", ref: el => (this.canvasEl = el) })), h("slot", { key: '08c7488d0a52bdb369a5a1b70070f3f15da75e3c' }))));
|
|
34749
34752
|
}
|
|
34750
34753
|
getDocumentApi() {
|
|
34751
34754
|
if (this.documentApi == null) {
|
|
@@ -34753,15 +34756,25 @@ const VertexDocumentViewer = class {
|
|
|
34753
34756
|
}
|
|
34754
34757
|
return this.documentApi;
|
|
34755
34758
|
}
|
|
34759
|
+
async loadInitialSrc() {
|
|
34760
|
+
await Promise.resolve();
|
|
34761
|
+
await this.handleSrcChange();
|
|
34762
|
+
}
|
|
34756
34763
|
clearCurrentDocument() {
|
|
34757
|
-
var _a, _b, _c, _d, _e, _f;
|
|
34764
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
34758
34765
|
(_a = this.documentRenderer) === null || _a === void 0 ? void 0 : _a.dispose();
|
|
34759
34766
|
(_b = this.documentApi) === null || _b === void 0 ? void 0 : _b.dispose();
|
|
34760
34767
|
(_c = this.panInteractionHandler) === null || _c === void 0 ? void 0 : _c.dispose();
|
|
34761
34768
|
(_d = this.documentApiStateChangedDisposable) === null || _d === void 0 ? void 0 : _d.dispose();
|
|
34762
34769
|
(_e = this.pageLoadedDisposable) === null || _e === void 0 ? void 0 : _e.dispose();
|
|
34763
34770
|
(_f = this.pageDrawnDisposable) === null || _f === void 0 ? void 0 : _f.dispose();
|
|
34764
|
-
this.
|
|
34771
|
+
this.documentRenderer = undefined;
|
|
34772
|
+
this.documentApi = undefined;
|
|
34773
|
+
this.panInteractionHandler = undefined;
|
|
34774
|
+
this.documentApiStateChangedDisposable = undefined;
|
|
34775
|
+
this.pageLoadedDisposable = undefined;
|
|
34776
|
+
this.pageDrawnDisposable = undefined;
|
|
34777
|
+
(_g = this.layers) === null || _g === void 0 ? void 0 : _g.clear();
|
|
34765
34778
|
}
|
|
34766
34779
|
handleDocumentApiStateChanged(state) {
|
|
34767
34780
|
this.documentState = state;
|
|
@@ -8,14 +8,14 @@ export declare const mockGetViewport: jest.Mock<{
|
|
|
8
8
|
}, [], any>;
|
|
9
9
|
export declare const mockPageRender: jest.Mock<{
|
|
10
10
|
promise: Promise<void>;
|
|
11
|
-
}, [
|
|
11
|
+
}, [], any>;
|
|
12
12
|
export declare const mockGetPage: jest.Mock<{
|
|
13
13
|
getTextContent: jest.Mock<{
|
|
14
14
|
items: never[];
|
|
15
15
|
}, [], any>;
|
|
16
16
|
render: jest.Mock<{
|
|
17
17
|
promise: Promise<void>;
|
|
18
|
-
}, [
|
|
18
|
+
}, [], any>;
|
|
19
19
|
getViewport: jest.Mock<{
|
|
20
20
|
width: number;
|
|
21
21
|
height: number;
|
|
@@ -134,6 +134,7 @@ export declare class VertexDocumentViewer implements BasicViewer {
|
|
|
134
134
|
protected handleInteractionModeChange(): void;
|
|
135
135
|
render(): void;
|
|
136
136
|
private getDocumentApi;
|
|
137
|
+
private loadInitialSrc;
|
|
137
138
|
private clearCurrentDocument;
|
|
138
139
|
private handleDocumentApiStateChanged;
|
|
139
140
|
private handlePageLoaded;
|
|
@@ -3,7 +3,9 @@ import { DocumentLayer } from './types';
|
|
|
3
3
|
export declare class DocumentLayersController {
|
|
4
4
|
private apiSupportsLayers;
|
|
5
5
|
private api?;
|
|
6
|
-
constructor(api
|
|
6
|
+
constructor(api?: DocumentApi);
|
|
7
|
+
setApi(api: DocumentApi): void;
|
|
8
|
+
clear(): void;
|
|
7
9
|
/**
|
|
8
10
|
* Returns a boolean indicating whether the document supports layers.
|
|
9
11
|
*/
|
package/dist/types/lib/dom.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vertexvis/doc-viewer",
|
|
3
|
-
"version": "1.0.2-
|
|
3
|
+
"version": "1.0.2-testing.0",
|
|
4
4
|
"description": "The Vertex SDK for viewing documents.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.cjs",
|
|
@@ -95,11 +95,11 @@
|
|
|
95
95
|
"typescript": "~5.9.3"
|
|
96
96
|
},
|
|
97
97
|
"dependencies": {
|
|
98
|
-
"@vertexvis/geometry": "1.0.2-
|
|
99
|
-
"@vertexvis/utils": "1.0.2-
|
|
98
|
+
"@vertexvis/geometry": "1.0.2-testing.0",
|
|
99
|
+
"@vertexvis/utils": "1.0.2-testing.0",
|
|
100
100
|
"classnames": "^2.5.1",
|
|
101
101
|
"pdfjs-dist": "^5.5.207",
|
|
102
102
|
"resize-observer": "^1.0.4"
|
|
103
103
|
},
|
|
104
|
-
"gitHead": "
|
|
104
|
+
"gitHead": "a292daa7a84b726f1eeae1a573c353dc060444f0"
|
|
105
105
|
}
|