@getflip/swirl-components 0.450.0 → 0.451.1
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/components.json +1 -1
- package/dist/cjs/swirl-file-viewer_8.cjs.entry.js +71 -4
- package/dist/cjs/swirl-image-grid-item.cjs.entry.js +1 -1
- package/dist/collection/components/swirl-file-viewer/viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf.css +18 -0
- package/dist/collection/components/swirl-file-viewer/viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf.js +71 -4
- package/dist/collection/components/swirl-image-grid-item/swirl-image-grid-item.css +2 -2
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
- package/dist/components/swirl-file-viewer-pdf2.js +71 -4
- package/dist/components/swirl-image-grid-item.js +1 -1
- package/dist/esm/swirl-file-viewer_8.entry.js +71 -4
- package/dist/esm/swirl-image-grid-item.entry.js +1 -1
- package/dist/swirl-components/{p-c2332dc1.entry.js → p-d9f80fc3.entry.js} +1 -1
- package/dist/swirl-components/{p-b5bf9bab.entry.js → p-e2a272a2.entry.js} +1 -1
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-file-viewer/viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf.d.ts +2 -0
- package/package.json +1 -1
package/components.json
CHANGED
|
@@ -28283,7 +28283,7 @@ var pdf = /*#__PURE__*/Object.freeze({
|
|
|
28283
28283
|
version: version
|
|
28284
28284
|
});
|
|
28285
28285
|
|
|
28286
|
-
const swirlFileViewerPdfCss = ":host{position:relative;display:inline-flex;width:100%;height:100%;pointer-events:auto}:host(.file-viewer-pdf--view-mode-side-by-side) .file-viewer-pdf__pages{display:grid;grid-template-columns:repeat(2, 1fr);grid-row-gap:var(--s-space-8);grid-column-gap:var(--s-space-8);grid-auto-rows:auto}:host(.file-viewer-pdf--view-mode-side-by-side) .file-viewer-pdf__page{margin:0}:host(.file-viewer-pdf--view-mode-side-by-side) .file-viewer-pdf__page:nth-child(odd){justify-self:end}:host(.file-viewer-pdf--view-mode-side-by-side) .file-viewer-pdf__page:nth-child(even){justify-self:start}:host *{box-sizing:border-box}.file-viewer-pdf__pages{overflow:auto;width:100%;height:100%}@media (min-width: 768px){.file-viewer-pdf__pages{padding:var(--s-space-16)}}.file-viewer-pdf__page{position:relative;margin-right:auto;margin-left:auto;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:#fff}@media (min-width: 768px){.file-viewer-pdf__page{border:var(--s-border-width-default) solid var(--s-border-default)}.file-viewer-pdf__page:not(:last-of-type){margin-bottom:var(--s-space-8)}}.file-viewer-pdf__page-spinner{position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}.file-viewer-pdf__canvas{display:flex;width:100%;height:100%;margin-right:auto;margin-left:auto}.file-viewer-pdf__text-container{position:absolute;overflow:hidden;line-height:1;text-align:initial;-webkit-user-select:none;-moz-user-select:none;user-select:none;inset:0;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;forced-color-adjust:none}.file-viewer-pdf__text-container>*{position:absolute;color:transparent;white-space:pre;cursor:text;transform-origin:0% 0%}.file-viewer-pdf__text-container>*.markedContent{top:0;height:0}.file-viewer-pdf__text-container>*.highlight{margin:-1px;padding:1px;border-radius:4px;background-color:rgba(180, 0, 170, 1)}.file-viewer-pdf__text-container>*.highlight.appended{position:initial}.file-viewer-pdf__text-container>*.highlight.begin{border-radius:4px 0 0 4px}.file-viewer-pdf__text-container>*.highlight.end{border-radius:0 4px 4px 0}.file-viewer-pdf__text-container>*.highlight.middle{border-radius:0}.file-viewer-pdf__text-container>*.highlight.selected{background-color:rgba(0, 100, 0, 1)}.file-viewer-pdf__text-container>*.endOfContent{position:absolute;z-index:-1;top:100%;right:0;bottom:0;left:0;display:block;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}.file-viewer-pdf__text-container>*.endOfContent.active{top:0}.file-viewer-pdf__text-container>br::-moz-selection{background:transparent}.file-viewer-pdf__text-container>br::selection{background:transparent}@media (min-width: 768px){.file-viewer-pdf__text-container{-webkit-user-select:auto;-moz-user-select:auto;user-select:auto}}.file-viewer-pdf__spinner{position:absolute;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.2);inset:0}.file-viewer-pdf__error{position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}.file-viewer-pdf__pagination{position:absolute;bottom:var(--s-space-16);left:50%;padding:var(--s-space-4) var(--s-space-12);border-radius:var(--s-border-radius-base);color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.6);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);transform:translateX(-50%);pointer-events:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.file-viewer-pdf__pagination{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
|
|
28286
|
+
const swirlFileViewerPdfCss = ":host{position:relative;display:inline-flex;width:100%;height:100%;pointer-events:auto}:host(.file-viewer-pdf--view-mode-side-by-side) .file-viewer-pdf__pages{display:grid;grid-template-columns:repeat(2, 1fr);grid-row-gap:var(--s-space-8);grid-column-gap:var(--s-space-8);grid-auto-rows:auto}:host(.file-viewer-pdf--view-mode-side-by-side) .file-viewer-pdf__page{margin:0}:host(.file-viewer-pdf--view-mode-side-by-side) .file-viewer-pdf__page:nth-child(odd){justify-self:end}:host(.file-viewer-pdf--view-mode-side-by-side) .file-viewer-pdf__page:nth-child(even){justify-self:start}:host *{box-sizing:border-box}.file-viewer-pdf__pages{overflow:auto;width:100%;height:100%}@media (min-width: 768px){.file-viewer-pdf__pages{padding:var(--s-space-16)}}.file-viewer-pdf__page{position:relative;margin-right:auto;margin-left:auto;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:#fff}@media (min-width: 768px){.file-viewer-pdf__page{border:var(--s-border-width-default) solid var(--s-border-default)}.file-viewer-pdf__page:not(:last-of-type){margin-bottom:var(--s-space-8)}}.file-viewer-pdf__page-spinner{position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}.file-viewer-pdf__canvas{display:flex;width:100%;height:100%;margin-right:auto;margin-left:auto}.file-viewer-pdf__text-container{position:absolute;overflow:hidden;line-height:1;text-align:initial;-webkit-user-select:none;-moz-user-select:none;user-select:none;inset:0;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;forced-color-adjust:none}.file-viewer-pdf__text-container>*{position:absolute;color:transparent;white-space:pre;cursor:text;transform-origin:0% 0%}.file-viewer-pdf__text-container>*.markedContent{top:0;height:0}.file-viewer-pdf__text-container>*.highlight{margin:-1px;padding:1px;border-radius:4px;background-color:rgba(180, 0, 170, 1)}.file-viewer-pdf__text-container>*.highlight.appended{position:initial}.file-viewer-pdf__text-container>*.highlight.begin{border-radius:4px 0 0 4px}.file-viewer-pdf__text-container>*.highlight.end{border-radius:0 4px 4px 0}.file-viewer-pdf__text-container>*.highlight.middle{border-radius:0}.file-viewer-pdf__text-container>*.highlight.selected{background-color:rgba(0, 100, 0, 1)}.file-viewer-pdf__text-container>*.endOfContent{position:absolute;z-index:-1;top:100%;right:0;bottom:0;left:0;display:block;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}.file-viewer-pdf__text-container>*.endOfContent.active{top:0}.file-viewer-pdf__text-container>br::-moz-selection{background:transparent}.file-viewer-pdf__text-container>br::selection{background:transparent}@media (min-width: 768px){.file-viewer-pdf__text-container{-webkit-user-select:auto;-moz-user-select:auto;user-select:auto}}.file-viewer-pdf__annotation-container{position:absolute;overflow:hidden;inset:0;pointer-events:none}.file-viewer-pdf__annotation-container section{position:absolute;pointer-events:auto}.file-viewer-pdf__annotation-container section a{display:block;width:100%;height:100%}.file-viewer-pdf__spinner{position:absolute;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.2);inset:0}.file-viewer-pdf__error{position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}.file-viewer-pdf__pagination{position:absolute;bottom:var(--s-space-16);left:50%;padding:var(--s-space-4) var(--s-space-12);border-radius:var(--s-border-radius-base);color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.6);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);transform:translateX(-50%);pointer-events:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.file-viewer-pdf__pagination{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
|
|
28287
28287
|
|
|
28288
28288
|
window.pdf = pdf;
|
|
28289
28289
|
const SwirlFileViewerPdf = class {
|
|
@@ -28454,6 +28454,7 @@ const SwirlFileViewerPdf = class {
|
|
|
28454
28454
|
async renderPage(page, canvas, forPrint) {
|
|
28455
28455
|
const container = canvas.closest(".file-viewer-pdf__page");
|
|
28456
28456
|
const textContainer = container?.querySelector(".file-viewer-pdf__text-container");
|
|
28457
|
+
const annotationContainer = container?.querySelector(".file-viewer-pdf__annotation-container");
|
|
28457
28458
|
this.renderingPageNumbers = [...this.renderingPageNumbers, page.pageNumber];
|
|
28458
28459
|
const scale = forPrint ? this.getPrintScale(page) : this.getScale(page);
|
|
28459
28460
|
const outputScale = Math.max(window.devicePixelRatio || 2, 2);
|
|
@@ -28471,7 +28472,9 @@ const SwirlFileViewerPdf = class {
|
|
|
28471
28472
|
await page.render(renderContext).promise;
|
|
28472
28473
|
page.cleanup();
|
|
28473
28474
|
textContainer.innerHTML = "";
|
|
28475
|
+
annotationContainer.innerHTML = "";
|
|
28474
28476
|
this.renderTextLayer(page, textContainer).catch();
|
|
28477
|
+
this.renderAnnotationLayer(page, annotationContainer).catch();
|
|
28475
28478
|
this.renderingPageNumbers = this.renderingPageNumbers.filter((pageNumber) => pageNumber !== page.pageNumber);
|
|
28476
28479
|
}
|
|
28477
28480
|
catch (e) { }
|
|
@@ -28480,10 +28483,12 @@ const SwirlFileViewerPdf = class {
|
|
|
28480
28483
|
const container = this.el.shadowRoot.querySelector(`[data-page-number="${page.pageNumber}"]`);
|
|
28481
28484
|
const canvas = container.querySelector("canvas");
|
|
28482
28485
|
const textLayer = container.querySelector(".file-viewer-pdf__text-container");
|
|
28486
|
+
const annotationLayer = container.querySelector(".file-viewer-pdf__annotation-container");
|
|
28483
28487
|
canvas.width = 1;
|
|
28484
28488
|
canvas.height = 1;
|
|
28485
28489
|
canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
|
|
28486
28490
|
textLayer.innerHTML = "";
|
|
28491
|
+
annotationLayer.innerHTML = "";
|
|
28487
28492
|
}
|
|
28488
28493
|
async updateVisiblePages(forPrint) {
|
|
28489
28494
|
const pages = Array.from(this.el.shadowRoot.querySelectorAll(".file-viewer-pdf__page"));
|
|
@@ -28528,6 +28533,68 @@ const SwirlFileViewerPdf = class {
|
|
|
28528
28533
|
}),
|
|
28529
28534
|
}).render();
|
|
28530
28535
|
}
|
|
28536
|
+
async renderAnnotationLayer(page, container) {
|
|
28537
|
+
const viewport = page.getViewport({ scale: this.getScale(page) });
|
|
28538
|
+
const annotations = await page.getAnnotations();
|
|
28539
|
+
if (!annotations || annotations.length === 0) {
|
|
28540
|
+
return;
|
|
28541
|
+
}
|
|
28542
|
+
const annotationLayer = new AnnotationLayer({
|
|
28543
|
+
div: container,
|
|
28544
|
+
page,
|
|
28545
|
+
viewport,
|
|
28546
|
+
accessibilityManager: null,
|
|
28547
|
+
annotationCanvasMap: null,
|
|
28548
|
+
annotationEditorUIManager: null,
|
|
28549
|
+
structTreeLayer: null,
|
|
28550
|
+
});
|
|
28551
|
+
await annotationLayer.render({
|
|
28552
|
+
annotations,
|
|
28553
|
+
div: container,
|
|
28554
|
+
page,
|
|
28555
|
+
viewport,
|
|
28556
|
+
linkService: {
|
|
28557
|
+
externalLinkEnabled: true,
|
|
28558
|
+
pagesCount: this.doc?.numPages ?? 0,
|
|
28559
|
+
page: 0,
|
|
28560
|
+
rotation: 0,
|
|
28561
|
+
isInPresentationMode: false,
|
|
28562
|
+
getDestinationHash: () => "#",
|
|
28563
|
+
getAnchorUrl: () => "#",
|
|
28564
|
+
setHash: () => { },
|
|
28565
|
+
executeNamedAction: () => { },
|
|
28566
|
+
executeSetOCGState: () => { },
|
|
28567
|
+
addLinkAttributes: (link, url) => {
|
|
28568
|
+
link.href = url;
|
|
28569
|
+
link.rel = "noopener noreferrer nofollow";
|
|
28570
|
+
link.target = "_blank";
|
|
28571
|
+
},
|
|
28572
|
+
goToDestination: async (dest) => {
|
|
28573
|
+
const explicitDest = typeof dest === "string"
|
|
28574
|
+
? await this.doc.getDestination(dest)
|
|
28575
|
+
: dest;
|
|
28576
|
+
if (!explicitDest) {
|
|
28577
|
+
return;
|
|
28578
|
+
}
|
|
28579
|
+
const pageIndex = await this.doc.getPageIndex(explicitDest[0]);
|
|
28580
|
+
this.scrollToPage(pageIndex + 1);
|
|
28581
|
+
},
|
|
28582
|
+
goToPage: (val) => {
|
|
28583
|
+
const pageNumber = typeof val === "string" ? parseInt(val, 10) : val;
|
|
28584
|
+
this.scrollToPage(pageNumber);
|
|
28585
|
+
},
|
|
28586
|
+
},
|
|
28587
|
+
renderForms: false,
|
|
28588
|
+
});
|
|
28589
|
+
}
|
|
28590
|
+
scrollToPage(pageNumber) {
|
|
28591
|
+
if (this.singlePageMode) {
|
|
28592
|
+
this.setPage(pageNumber);
|
|
28593
|
+
return;
|
|
28594
|
+
}
|
|
28595
|
+
const pageEl = this.el.shadowRoot.querySelector(`[data-page-number="${pageNumber}"]`);
|
|
28596
|
+
pageEl?.scrollIntoView({ behavior: "smooth" });
|
|
28597
|
+
}
|
|
28531
28598
|
async openPrintDialog() {
|
|
28532
28599
|
const canvases = Array.from(this.scrollContainer.querySelectorAll("canvas"));
|
|
28533
28600
|
let styles = `
|
|
@@ -28610,7 +28677,7 @@ const SwirlFileViewerPdf = class {
|
|
|
28610
28677
|
const showPagination = !this.error && !this.loading && this.visiblePages.length > 0;
|
|
28611
28678
|
const showSpinner = this.loading;
|
|
28612
28679
|
const className = index$1.classnames("file-viewer-pdf", `file-viewer-pdf--view-mode-${this.viewMode}`);
|
|
28613
|
-
return (index.h(index.Host, { key: '
|
|
28680
|
+
return (index.h(index.Host, { key: 'a8740bee4b9338a97be0adfafd05f28ae185f1c7', class: className, exportparts: "file-viewer-pdf__pagination" }, this.error && (index.h("swirl-inline-error", { key: 'f47b12a51d52abc90e8e2e017a9ad6b8e520abc7', class: "file-viewer-pdf__error", message: this.errorMessage })), index.h("div", { key: 'c65fcc1e694e7cd1fed2044e8ce0945048671bd3', "aria-describedby": "pagination", class: "file-viewer-pdf__pages", onScroll: this.onScroll, ref: (el) => (this.scrollContainer = el) }, this.pages.map((page) => {
|
|
28614
28681
|
const viewport = page.getViewport({
|
|
28615
28682
|
scale: this.getScale(page),
|
|
28616
28683
|
});
|
|
@@ -28623,8 +28690,8 @@ const SwirlFileViewerPdf = class {
|
|
|
28623
28690
|
: true, id: `page-${page.pageNumber}`, key: page.pageNumber, role: "region", style: {
|
|
28624
28691
|
width: `${width}px`,
|
|
28625
28692
|
height: `${height}px`,
|
|
28626
|
-
}, tabIndex: 0 }, !rendered && (index.h("swirl-spinner", { class: "file-viewer-pdf__page-spinner" })), index.h("canvas", { class: "file-viewer-pdf__canvas", style: { opacity: rendered ? "1" : "0" } }), index.h("div", { class: "file-viewer-pdf__text-container" })));
|
|
28627
|
-
})), showPagination && (index.h("span", { key: '
|
|
28693
|
+
}, tabIndex: 0 }, !rendered && (index.h("swirl-spinner", { class: "file-viewer-pdf__page-spinner" })), index.h("canvas", { class: "file-viewer-pdf__canvas", style: { opacity: rendered ? "1" : "0" } }), index.h("div", { class: "file-viewer-pdf__text-container" }), index.h("div", { class: "file-viewer-pdf__annotation-container" })));
|
|
28694
|
+
})), showPagination && (index.h("span", { key: 'ca2b912a703c1103af1b77f4daa3fd3a3b3ac30f', class: "file-viewer-pdf__pagination", id: "pagination", part: "file-viewer-pdf__pagination" }, index.h("span", { key: '1488646d1b8b97650d53b325a0116972e7a8cab7', "aria-current": "page" }, this.currentPage), " /", " ", this.doc.numPages)), showSpinner && (index.h("div", { key: 'd7ef53c840097f46f028d32be6c0472b4192bd83', class: "file-viewer-pdf__spinner" }, index.h("swirl-spinner", { key: '948f1daf3128a6ccc05e7d7158f3c70ef91086db' })))));
|
|
28628
28695
|
}
|
|
28629
28696
|
get el() { return index.getElement(this); }
|
|
28630
28697
|
static get watchers() { return {
|
|
@@ -4,7 +4,7 @@ var index = require('./index-BH-xCNGW.js');
|
|
|
4
4
|
var index$1 = require('./index-DcAhLZUH.js');
|
|
5
5
|
var utils = require('./utils-UfZG-xPD.js');
|
|
6
6
|
|
|
7
|
-
const swirlImageGridItemCss = ":host{display:block;width:100%;min-height:0}:host *{box-sizing:border-box}:host(:not(:only-child)) .image-grid-item__background{display:none}:host(:not(:only-child)) .image-grid-item__image{-o-object-fit:cover;object-fit:cover}:host(:only-child) button.image-grid-item:focus-visible:before,:host(:only-child) button.image-grid-item:focus-visible:after{border-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"2\"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"2\"]:nth-child(1)) button.image-grid-item:focus-visible:after,:host([data-sibling-count=\"3\"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"3\"]:nth-child(1)) button.image-grid-item:focus-visible:after{border-top-left-radius:var(--s-border-radius-sm);border-bottom-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"2\"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"2\"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm);border-bottom-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"3\"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"3\"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"3\"]:nth-child(3)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"3\"]:nth-child(3)) button.image-grid-item:focus-visible:after{border-bottom-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(1)) button.image-grid-item:focus-visible:after{border-top-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(3)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(3)) button.image-grid-item:focus-visible:after{border-bottom-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(4)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(4)) button.image-grid-item:focus-visible:after{border-bottom-right-radius:var(--s-border-radius-sm)}:host(:nth-child(n+5)){display:none}.image-grid-item{position:relative;display:inline-flex;overflow:hidden;width:100%;height:100%}button.image-grid-item{padding:0;border:none;background-color:transparent;cursor:pointer}button.image-grid-item:focus{outline:none}button.image-grid-item:focus-visible:before{position:absolute;z-index:3;border:0.125rem solid var(--s-focus-default);content:\"\";inset:0}button.image-grid-item:focus-visible:after{position:absolute;z-index:2;border:0.1875rem solid var(--s-background-default);content:\"\";inset:0}.image-grid-item--has-error .image-grid-item__image{display:none}.image-grid-item--has-overlay .image-grid-item__image{scale:1.1;filter:blur(5px)}.image-grid-item--has-watermark .image-grid-item__watermark{display:inline-flex}.image-grid-item__background{position:absolute;background-size:cover;inset:-40px;filter:blur(20px)}.image-grid-item__image{z-index:1;display:inline-flex;width:100%;height:100%;transition:opacity 0.3s ease-in;opacity:0;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center}.image-grid-item__watermark{position:absolute;z-index:1;
|
|
7
|
+
const swirlImageGridItemCss = ":host{display:block;width:100%;min-height:0}:host *{box-sizing:border-box}:host(:not(:only-child)) .image-grid-item__background{display:none}:host(:not(:only-child)) .image-grid-item__image{-o-object-fit:cover;object-fit:cover}:host(:only-child) button.image-grid-item:focus-visible:before,:host(:only-child) button.image-grid-item:focus-visible:after{border-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"2\"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"2\"]:nth-child(1)) button.image-grid-item:focus-visible:after,:host([data-sibling-count=\"3\"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"3\"]:nth-child(1)) button.image-grid-item:focus-visible:after{border-top-left-radius:var(--s-border-radius-sm);border-bottom-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"2\"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"2\"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm);border-bottom-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"3\"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"3\"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"3\"]:nth-child(3)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"3\"]:nth-child(3)) button.image-grid-item:focus-visible:after{border-bottom-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(1)) button.image-grid-item:focus-visible:after{border-top-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(3)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(3)) button.image-grid-item:focus-visible:after{border-bottom-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(4)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(4)) button.image-grid-item:focus-visible:after{border-bottom-right-radius:var(--s-border-radius-sm)}:host(:nth-child(n+5)){display:none}.image-grid-item{position:relative;display:inline-flex;overflow:hidden;width:100%;height:100%}button.image-grid-item{padding:0;border:none;background-color:transparent;cursor:pointer}button.image-grid-item:focus{outline:none}button.image-grid-item:focus-visible:before{position:absolute;z-index:3;border:0.125rem solid var(--s-focus-default);content:\"\";inset:0}button.image-grid-item:focus-visible:after{position:absolute;z-index:2;border:0.1875rem solid var(--s-background-default);content:\"\";inset:0}.image-grid-item--has-error .image-grid-item__image{display:none}.image-grid-item--has-overlay .image-grid-item__image{scale:1.1;filter:blur(5px)}.image-grid-item--has-watermark .image-grid-item__watermark{display:inline-flex}.image-grid-item__background{position:absolute;background-size:cover;inset:-40px;filter:blur(20px)}.image-grid-item__image{z-index:1;display:inline-flex;width:100%;height:100%;transition:opacity 0.3s ease-in;opacity:0;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center}.image-grid-item__watermark{position:absolute;z-index:1;top:var(--s-space-8);right:var(--s-space-8);display:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;pointer-events:none}.image-grid-item__watermark ::slotted(img){width:3rem;height:auto;pointer-events:none}.image-grid-item--loaded .image-grid-item__image{opacity:1}.image-grid-item__loading-placeholder{display:inline-flex;width:100%;height:100%}.image-grid-item__icon{position:absolute;z-index:1;top:50%;left:50%;display:flex;width:3rem;height:3rem;justify-content:center;align-items:center;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);transform:translate3d(-50%, -50%, 0)}.image-grid-item__icon ::part(icon){width:2rem;height:2rem}.image-grid-item__gif-control-button{position:absolute;z-index:2;top:50%;left:50%;transition:opacity 0.2s;transform:translate3d(-50%, -50%, 0);opacity:0}.image-grid-item:hover>.image-grid-item__gif-control-button,.image-grid-item:focus-within>.image-grid-item__gif-control-button,.image-grid-item--gif-paused>.image-grid-item__gif-control-button{opacity:1}.image-grid-item__overlay{position:absolute;z-index:2;display:flex;justify-content:center;align-items:center;color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.4);font-size:var(--s-font-size-2xl);inset:0}.image-grid-item__skeleton{position:absolute;z-index:3;inset:0}.image-grid-item__error{position:absolute;z-index:3;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.1);inset:0}";
|
|
8
8
|
|
|
9
9
|
const SwirlImageGridItem = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -167,6 +167,24 @@
|
|
|
167
167
|
}
|
|
168
168
|
}
|
|
169
169
|
|
|
170
|
+
.file-viewer-pdf__annotation-container {
|
|
171
|
+
position: absolute;
|
|
172
|
+
overflow: hidden;
|
|
173
|
+
inset: 0;
|
|
174
|
+
pointer-events: none;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.file-viewer-pdf__annotation-container section {
|
|
178
|
+
position: absolute;
|
|
179
|
+
pointer-events: auto;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.file-viewer-pdf__annotation-container section a {
|
|
183
|
+
display: block;
|
|
184
|
+
width: 100%;
|
|
185
|
+
height: 100%;
|
|
186
|
+
}
|
|
187
|
+
|
|
170
188
|
.file-viewer-pdf__spinner {
|
|
171
189
|
position: absolute;
|
|
172
190
|
display: flex;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { h, Host, } from "@stencil/core";
|
|
2
2
|
import classnames from "classnames";
|
|
3
3
|
import * as pdf from "pdfjs-dist/legacy/build/pdf.mjs";
|
|
4
|
-
import { getDocument, TextLayer, } from "pdfjs-dist/legacy/build/pdf.mjs";
|
|
4
|
+
import { AnnotationLayer, getDocument, TextLayer, } from "pdfjs-dist/legacy/build/pdf.mjs";
|
|
5
5
|
import { debounce, getVisibleHeight, isMobileViewport, } from "../../../../utils";
|
|
6
6
|
window.pdf = pdf;
|
|
7
7
|
export class SwirlFileViewerPdf {
|
|
@@ -169,6 +169,7 @@ export class SwirlFileViewerPdf {
|
|
|
169
169
|
async renderPage(page, canvas, forPrint) {
|
|
170
170
|
const container = canvas.closest(".file-viewer-pdf__page");
|
|
171
171
|
const textContainer = container?.querySelector(".file-viewer-pdf__text-container");
|
|
172
|
+
const annotationContainer = container?.querySelector(".file-viewer-pdf__annotation-container");
|
|
172
173
|
this.renderingPageNumbers = [...this.renderingPageNumbers, page.pageNumber];
|
|
173
174
|
const scale = forPrint ? this.getPrintScale(page) : this.getScale(page);
|
|
174
175
|
const outputScale = Math.max(window.devicePixelRatio || 2, 2);
|
|
@@ -186,7 +187,9 @@ export class SwirlFileViewerPdf {
|
|
|
186
187
|
await page.render(renderContext).promise;
|
|
187
188
|
page.cleanup();
|
|
188
189
|
textContainer.innerHTML = "";
|
|
190
|
+
annotationContainer.innerHTML = "";
|
|
189
191
|
this.renderTextLayer(page, textContainer).catch();
|
|
192
|
+
this.renderAnnotationLayer(page, annotationContainer).catch();
|
|
190
193
|
this.renderingPageNumbers = this.renderingPageNumbers.filter((pageNumber) => pageNumber !== page.pageNumber);
|
|
191
194
|
}
|
|
192
195
|
catch (e) { }
|
|
@@ -195,10 +198,12 @@ export class SwirlFileViewerPdf {
|
|
|
195
198
|
const container = this.el.shadowRoot.querySelector(`[data-page-number="${page.pageNumber}"]`);
|
|
196
199
|
const canvas = container.querySelector("canvas");
|
|
197
200
|
const textLayer = container.querySelector(".file-viewer-pdf__text-container");
|
|
201
|
+
const annotationLayer = container.querySelector(".file-viewer-pdf__annotation-container");
|
|
198
202
|
canvas.width = 1;
|
|
199
203
|
canvas.height = 1;
|
|
200
204
|
canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
|
|
201
205
|
textLayer.innerHTML = "";
|
|
206
|
+
annotationLayer.innerHTML = "";
|
|
202
207
|
}
|
|
203
208
|
async updateVisiblePages(forPrint) {
|
|
204
209
|
const pages = Array.from(this.el.shadowRoot.querySelectorAll(".file-viewer-pdf__page"));
|
|
@@ -243,6 +248,68 @@ export class SwirlFileViewerPdf {
|
|
|
243
248
|
}),
|
|
244
249
|
}).render();
|
|
245
250
|
}
|
|
251
|
+
async renderAnnotationLayer(page, container) {
|
|
252
|
+
const viewport = page.getViewport({ scale: this.getScale(page) });
|
|
253
|
+
const annotations = await page.getAnnotations();
|
|
254
|
+
if (!annotations || annotations.length === 0) {
|
|
255
|
+
return;
|
|
256
|
+
}
|
|
257
|
+
const annotationLayer = new AnnotationLayer({
|
|
258
|
+
div: container,
|
|
259
|
+
page,
|
|
260
|
+
viewport,
|
|
261
|
+
accessibilityManager: null,
|
|
262
|
+
annotationCanvasMap: null,
|
|
263
|
+
annotationEditorUIManager: null,
|
|
264
|
+
structTreeLayer: null,
|
|
265
|
+
});
|
|
266
|
+
await annotationLayer.render({
|
|
267
|
+
annotations,
|
|
268
|
+
div: container,
|
|
269
|
+
page,
|
|
270
|
+
viewport,
|
|
271
|
+
linkService: {
|
|
272
|
+
externalLinkEnabled: true,
|
|
273
|
+
pagesCount: this.doc?.numPages ?? 0,
|
|
274
|
+
page: 0,
|
|
275
|
+
rotation: 0,
|
|
276
|
+
isInPresentationMode: false,
|
|
277
|
+
getDestinationHash: () => "#",
|
|
278
|
+
getAnchorUrl: () => "#",
|
|
279
|
+
setHash: () => { },
|
|
280
|
+
executeNamedAction: () => { },
|
|
281
|
+
executeSetOCGState: () => { },
|
|
282
|
+
addLinkAttributes: (link, url) => {
|
|
283
|
+
link.href = url;
|
|
284
|
+
link.rel = "noopener noreferrer nofollow";
|
|
285
|
+
link.target = "_blank";
|
|
286
|
+
},
|
|
287
|
+
goToDestination: async (dest) => {
|
|
288
|
+
const explicitDest = typeof dest === "string"
|
|
289
|
+
? await this.doc.getDestination(dest)
|
|
290
|
+
: dest;
|
|
291
|
+
if (!explicitDest) {
|
|
292
|
+
return;
|
|
293
|
+
}
|
|
294
|
+
const pageIndex = await this.doc.getPageIndex(explicitDest[0]);
|
|
295
|
+
this.scrollToPage(pageIndex + 1);
|
|
296
|
+
},
|
|
297
|
+
goToPage: (val) => {
|
|
298
|
+
const pageNumber = typeof val === "string" ? parseInt(val, 10) : val;
|
|
299
|
+
this.scrollToPage(pageNumber);
|
|
300
|
+
},
|
|
301
|
+
},
|
|
302
|
+
renderForms: false,
|
|
303
|
+
});
|
|
304
|
+
}
|
|
305
|
+
scrollToPage(pageNumber) {
|
|
306
|
+
if (this.singlePageMode) {
|
|
307
|
+
this.setPage(pageNumber);
|
|
308
|
+
return;
|
|
309
|
+
}
|
|
310
|
+
const pageEl = this.el.shadowRoot.querySelector(`[data-page-number="${pageNumber}"]`);
|
|
311
|
+
pageEl?.scrollIntoView({ behavior: "smooth" });
|
|
312
|
+
}
|
|
246
313
|
async openPrintDialog() {
|
|
247
314
|
const canvases = Array.from(this.scrollContainer.querySelectorAll("canvas"));
|
|
248
315
|
let styles = `
|
|
@@ -325,7 +392,7 @@ export class SwirlFileViewerPdf {
|
|
|
325
392
|
const showPagination = !this.error && !this.loading && this.visiblePages.length > 0;
|
|
326
393
|
const showSpinner = this.loading;
|
|
327
394
|
const className = classnames("file-viewer-pdf", `file-viewer-pdf--view-mode-${this.viewMode}`);
|
|
328
|
-
return (h(Host, { key: '
|
|
395
|
+
return (h(Host, { key: 'a8740bee4b9338a97be0adfafd05f28ae185f1c7', class: className, exportparts: "file-viewer-pdf__pagination" }, this.error && (h("swirl-inline-error", { key: 'f47b12a51d52abc90e8e2e017a9ad6b8e520abc7', class: "file-viewer-pdf__error", message: this.errorMessage })), h("div", { key: 'c65fcc1e694e7cd1fed2044e8ce0945048671bd3', "aria-describedby": "pagination", class: "file-viewer-pdf__pages", onScroll: this.onScroll, ref: (el) => (this.scrollContainer = el) }, this.pages.map((page) => {
|
|
329
396
|
const viewport = page.getViewport({
|
|
330
397
|
scale: this.getScale(page),
|
|
331
398
|
});
|
|
@@ -338,8 +405,8 @@ export class SwirlFileViewerPdf {
|
|
|
338
405
|
: true, id: `page-${page.pageNumber}`, key: page.pageNumber, role: "region", style: {
|
|
339
406
|
width: `${width}px`,
|
|
340
407
|
height: `${height}px`,
|
|
341
|
-
}, tabIndex: 0 }, !rendered && (h("swirl-spinner", { class: "file-viewer-pdf__page-spinner" })), h("canvas", { class: "file-viewer-pdf__canvas", style: { opacity: rendered ? "1" : "0" } }), h("div", { class: "file-viewer-pdf__text-container" })));
|
|
342
|
-
})), showPagination && (h("span", { key: '
|
|
408
|
+
}, tabIndex: 0 }, !rendered && (h("swirl-spinner", { class: "file-viewer-pdf__page-spinner" })), h("canvas", { class: "file-viewer-pdf__canvas", style: { opacity: rendered ? "1" : "0" } }), h("div", { class: "file-viewer-pdf__text-container" }), h("div", { class: "file-viewer-pdf__annotation-container" })));
|
|
409
|
+
})), showPagination && (h("span", { key: 'ca2b912a703c1103af1b77f4daa3fd3a3b3ac30f', class: "file-viewer-pdf__pagination", id: "pagination", part: "file-viewer-pdf__pagination" }, h("span", { key: '1488646d1b8b97650d53b325a0116972e7a8cab7', "aria-current": "page" }, this.currentPage), " /", " ", this.doc.numPages)), showSpinner && (h("div", { key: 'd7ef53c840097f46f028d32be6c0472b4192bd83', class: "file-viewer-pdf__spinner" }, h("swirl-spinner", { key: '948f1daf3128a6ccc05e7d7158f3c70ef91086db' })))));
|
|
343
410
|
}
|
|
344
411
|
static get is() { return "swirl-file-viewer-pdf"; }
|
|
345
412
|
static get encapsulation() { return "shadow"; }
|
|
@@ -141,8 +141,8 @@ button.image-grid-item:focus-visible:after {
|
|
|
141
141
|
.image-grid-item__watermark {
|
|
142
142
|
position: absolute;
|
|
143
143
|
z-index: 1;
|
|
144
|
-
|
|
145
|
-
|
|
144
|
+
top: var(--s-space-8);
|
|
145
|
+
right: var(--s-space-8);
|
|
146
146
|
display: none;
|
|
147
147
|
width: -webkit-fit-content;
|
|
148
148
|
width: -moz-fit-content;
|