@vertexvis/doc-viewer 1.0.2-canary.6 → 1.0.2-canary.8
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 +30 -6
- package/dist/collection/components/document-viewer/document-viewer.js +18 -6
- package/dist/collection/lib/document/layers/controller.js +12 -0
- 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-465c1030.entry.js} +2 -2
- package/dist/esm/vertex-document-viewer.entry.js +30 -6
- package/dist/types/components/document-viewer/document-viewer.d.ts +1 -0
- package/dist/types/lib/document/layers/controller.d.ts +3 -1
- package/package.json +4 -4
|
@@ -625,10 +625,22 @@ function apiSupportsLayers(api) {
|
|
|
625
625
|
class DocumentLayersController {
|
|
626
626
|
constructor(api) {
|
|
627
627
|
this.apiSupportsLayers = false;
|
|
628
|
+
if (api != null) {
|
|
629
|
+
this.setApi(api);
|
|
630
|
+
}
|
|
631
|
+
}
|
|
632
|
+
setApi(api) {
|
|
628
633
|
if (apiSupportsLayers(api)) {
|
|
629
634
|
this.apiSupportsLayers = true;
|
|
630
635
|
this.api = api;
|
|
631
636
|
}
|
|
637
|
+
else {
|
|
638
|
+
this.clear();
|
|
639
|
+
}
|
|
640
|
+
}
|
|
641
|
+
clear() {
|
|
642
|
+
this.apiSupportsLayers = false;
|
|
643
|
+
this.api = undefined;
|
|
632
644
|
}
|
|
633
645
|
/**
|
|
634
646
|
* Returns a boolean indicating whether the document supports layers.
|
|
@@ -34663,6 +34675,7 @@ const VertexDocumentViewer = class {
|
|
|
34663
34675
|
this.handleDocumentApiStateChanged = this.handleDocumentApiStateChanged.bind(this);
|
|
34664
34676
|
this.handlePageLoaded = this.handlePageLoaded.bind(this);
|
|
34665
34677
|
this.handlePageDrawn = this.handlePageDrawn.bind(this);
|
|
34678
|
+
this.layers = new DocumentLayersController();
|
|
34666
34679
|
this.resizeObserver = new ResizeObserver(this.handleElementResize);
|
|
34667
34680
|
this.registerSlotChangeListeners();
|
|
34668
34681
|
}
|
|
@@ -34675,7 +34688,7 @@ const VertexDocumentViewer = class {
|
|
|
34675
34688
|
var _a;
|
|
34676
34689
|
(_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.hostEl);
|
|
34677
34690
|
this.updateComponentDimensions();
|
|
34678
|
-
this.
|
|
34691
|
+
this.loadInitialSrc();
|
|
34679
34692
|
this.injectViewerApi();
|
|
34680
34693
|
}
|
|
34681
34694
|
disconnectedCallback() {
|
|
@@ -34742,12 +34755,13 @@ const VertexDocumentViewer = class {
|
|
|
34742
34755
|
await documentApi.loadPage(pageNumber);
|
|
34743
34756
|
}
|
|
34744
34757
|
async handleSrcChange() {
|
|
34758
|
+
var _a;
|
|
34745
34759
|
if (this.src != null && this.canvasEl != null) {
|
|
34746
34760
|
this.clearCurrentDocument();
|
|
34747
34761
|
const { api, renderer } = this.provider.create(this.canvasEl, this.config);
|
|
34748
34762
|
this.documentApi = api;
|
|
34749
34763
|
this.documentRenderer = renderer;
|
|
34750
|
-
this.layers
|
|
34764
|
+
(_a = this.layers) === null || _a === void 0 ? void 0 : _a.setApi(api);
|
|
34751
34765
|
this.updateInteractionHandler();
|
|
34752
34766
|
this.updateDocumentApiListeners();
|
|
34753
34767
|
await this.documentApi.updateViewport(this.dimensions);
|
|
@@ -34764,9 +34778,9 @@ const VertexDocumentViewer = class {
|
|
|
34764
34778
|
this.updateInteractionHandler();
|
|
34765
34779
|
}
|
|
34766
34780
|
render() {
|
|
34767
|
-
return (index.h(index.Host, { key: '
|
|
34781
|
+
return (index.h(index.Host, { key: 'a990831d5f2328f2cf21be0b82d4018b05decd51' }, index.h("div", { key: '349abae36254da570e640417fab459680c576465', ref: ref => (this.viewerContainerElement = ref), class: "viewer-container", onContextMenu: event => event.preventDefault() }, index.h("div", { key: '6fca3f1d5a2c31bdcc0c8dbbd468e306db981740', ref: ref => (this.canvasContainerElement = ref), class: classNames('canvas-container', {
|
|
34768
34782
|
'enable-pointer-events ': window.PointerEvent != null,
|
|
34769
|
-
}) }, index.h("canvas", { key: '
|
|
34783
|
+
}) }, index.h("canvas", { key: 'deb1c58d8d20000053cd829401163bf1e68ca88e', id: "document-viewer-canvas", role: "presentation", ref: el => (this.canvasEl = el) })), index.h("slot", { key: '6b87846ef17b330b0fae5d03103765bad6fdafa6' }))));
|
|
34770
34784
|
}
|
|
34771
34785
|
getDocumentApi() {
|
|
34772
34786
|
if (this.documentApi == null) {
|
|
@@ -34774,15 +34788,25 @@ const VertexDocumentViewer = class {
|
|
|
34774
34788
|
}
|
|
34775
34789
|
return this.documentApi;
|
|
34776
34790
|
}
|
|
34791
|
+
async loadInitialSrc() {
|
|
34792
|
+
await Promise.resolve();
|
|
34793
|
+
await this.handleSrcChange();
|
|
34794
|
+
}
|
|
34777
34795
|
clearCurrentDocument() {
|
|
34778
|
-
var _a, _b, _c, _d, _e, _f;
|
|
34796
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
34779
34797
|
(_a = this.documentRenderer) === null || _a === void 0 ? void 0 : _a.dispose();
|
|
34780
34798
|
(_b = this.documentApi) === null || _b === void 0 ? void 0 : _b.dispose();
|
|
34781
34799
|
(_c = this.panInteractionHandler) === null || _c === void 0 ? void 0 : _c.dispose();
|
|
34782
34800
|
(_d = this.documentApiStateChangedDisposable) === null || _d === void 0 ? void 0 : _d.dispose();
|
|
34783
34801
|
(_e = this.pageLoadedDisposable) === null || _e === void 0 ? void 0 : _e.dispose();
|
|
34784
34802
|
(_f = this.pageDrawnDisposable) === null || _f === void 0 ? void 0 : _f.dispose();
|
|
34785
|
-
this.
|
|
34803
|
+
this.documentRenderer = undefined;
|
|
34804
|
+
this.documentApi = undefined;
|
|
34805
|
+
this.panInteractionHandler = undefined;
|
|
34806
|
+
this.documentApiStateChangedDisposable = undefined;
|
|
34807
|
+
this.pageLoadedDisposable = undefined;
|
|
34808
|
+
this.pageDrawnDisposable = undefined;
|
|
34809
|
+
(_g = this.layers) === null || _g === void 0 ? void 0 : _g.clear();
|
|
34786
34810
|
}
|
|
34787
34811
|
handleDocumentApiStateChanged(state) {
|
|
34788
34812
|
this.documentState = state;
|
|
@@ -34,6 +34,7 @@ export class VertexDocumentViewer {
|
|
|
34
34
|
this.handleDocumentApiStateChanged = this.handleDocumentApiStateChanged.bind(this);
|
|
35
35
|
this.handlePageLoaded = this.handlePageLoaded.bind(this);
|
|
36
36
|
this.handlePageDrawn = this.handlePageDrawn.bind(this);
|
|
37
|
+
this.layers = new DocumentLayersController();
|
|
37
38
|
this.resizeObserver = new ResizeObserver(this.handleElementResize);
|
|
38
39
|
this.registerSlotChangeListeners();
|
|
39
40
|
}
|
|
@@ -46,7 +47,7 @@ export class VertexDocumentViewer {
|
|
|
46
47
|
var _a;
|
|
47
48
|
(_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.hostEl);
|
|
48
49
|
this.updateComponentDimensions();
|
|
49
|
-
this.
|
|
50
|
+
this.loadInitialSrc();
|
|
50
51
|
this.injectViewerApi();
|
|
51
52
|
}
|
|
52
53
|
disconnectedCallback() {
|
|
@@ -113,12 +114,13 @@ export class VertexDocumentViewer {
|
|
|
113
114
|
await documentApi.loadPage(pageNumber);
|
|
114
115
|
}
|
|
115
116
|
async handleSrcChange() {
|
|
117
|
+
var _a;
|
|
116
118
|
if (this.src != null && this.canvasEl != null) {
|
|
117
119
|
this.clearCurrentDocument();
|
|
118
120
|
const { api, renderer } = this.provider.create(this.canvasEl, this.config);
|
|
119
121
|
this.documentApi = api;
|
|
120
122
|
this.documentRenderer = renderer;
|
|
121
|
-
this.layers
|
|
123
|
+
(_a = this.layers) === null || _a === void 0 ? void 0 : _a.setApi(api);
|
|
122
124
|
this.updateInteractionHandler();
|
|
123
125
|
this.updateDocumentApiListeners();
|
|
124
126
|
await this.documentApi.updateViewport(this.dimensions);
|
|
@@ -135,9 +137,9 @@ export class VertexDocumentViewer {
|
|
|
135
137
|
this.updateInteractionHandler();
|
|
136
138
|
}
|
|
137
139
|
render() {
|
|
138
|
-
return (h(Host, { key: '
|
|
140
|
+
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', {
|
|
139
141
|
'enable-pointer-events ': window.PointerEvent != null,
|
|
140
|
-
}) }, h("canvas", { key: '
|
|
142
|
+
}) }, h("canvas", { key: 'deb1c58d8d20000053cd829401163bf1e68ca88e', id: "document-viewer-canvas", role: "presentation", ref: el => (this.canvasEl = el) })), h("slot", { key: '6b87846ef17b330b0fae5d03103765bad6fdafa6' }))));
|
|
141
143
|
}
|
|
142
144
|
getDocumentApi() {
|
|
143
145
|
if (this.documentApi == null) {
|
|
@@ -145,15 +147,25 @@ export class VertexDocumentViewer {
|
|
|
145
147
|
}
|
|
146
148
|
return this.documentApi;
|
|
147
149
|
}
|
|
150
|
+
async loadInitialSrc() {
|
|
151
|
+
await Promise.resolve();
|
|
152
|
+
await this.handleSrcChange();
|
|
153
|
+
}
|
|
148
154
|
clearCurrentDocument() {
|
|
149
|
-
var _a, _b, _c, _d, _e, _f;
|
|
155
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
150
156
|
(_a = this.documentRenderer) === null || _a === void 0 ? void 0 : _a.dispose();
|
|
151
157
|
(_b = this.documentApi) === null || _b === void 0 ? void 0 : _b.dispose();
|
|
152
158
|
(_c = this.panInteractionHandler) === null || _c === void 0 ? void 0 : _c.dispose();
|
|
153
159
|
(_d = this.documentApiStateChangedDisposable) === null || _d === void 0 ? void 0 : _d.dispose();
|
|
154
160
|
(_e = this.pageLoadedDisposable) === null || _e === void 0 ? void 0 : _e.dispose();
|
|
155
161
|
(_f = this.pageDrawnDisposable) === null || _f === void 0 ? void 0 : _f.dispose();
|
|
156
|
-
this.
|
|
162
|
+
this.documentRenderer = undefined;
|
|
163
|
+
this.documentApi = undefined;
|
|
164
|
+
this.panInteractionHandler = undefined;
|
|
165
|
+
this.documentApiStateChangedDisposable = undefined;
|
|
166
|
+
this.pageLoadedDisposable = undefined;
|
|
167
|
+
this.pageDrawnDisposable = undefined;
|
|
168
|
+
(_g = this.layers) === null || _g === void 0 ? void 0 : _g.clear();
|
|
157
169
|
}
|
|
158
170
|
handleDocumentApiStateChanged(state) {
|
|
159
171
|
this.documentState = state;
|
|
@@ -5,10 +5,22 @@ import { apiSupportsLayers } from "./types";
|
|
|
5
5
|
export class DocumentLayersController {
|
|
6
6
|
constructor(api) {
|
|
7
7
|
this.apiSupportsLayers = false;
|
|
8
|
+
if (api != null) {
|
|
9
|
+
this.setApi(api);
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
setApi(api) {
|
|
8
13
|
if (apiSupportsLayers(api)) {
|
|
9
14
|
this.apiSupportsLayers = true;
|
|
10
15
|
this.api = api;
|
|
11
16
|
}
|
|
17
|
+
else {
|
|
18
|
+
this.clear();
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
clear() {
|
|
22
|
+
this.apiSupportsLayers = false;
|
|
23
|
+
this.api = undefined;
|
|
12
24
|
}
|
|
13
25
|
/**
|
|
14
26
|
* Returns a boolean indicating whether the document supports layers.
|