Merge pull request #16593 from calixteman/popup_hcm
Improve highlightments and popups in HCM (bug 1830850)
This commit is contained in:
commit
c4a61a7692
@ -210,7 +210,7 @@ class AnnotationElement {
|
|||||||
container.style.zIndex = this.parent.zIndex++;
|
container.style.zIndex = this.parent.zIndex++;
|
||||||
|
|
||||||
if (this.data.popupRef) {
|
if (this.data.popupRef) {
|
||||||
container.setAttribute("aria-haspopup", true);
|
container.setAttribute("aria-haspopup", "dialog");
|
||||||
}
|
}
|
||||||
|
|
||||||
if (data.noRotate) {
|
if (data.noRotate) {
|
||||||
@ -474,7 +474,7 @@ class AnnotationElement {
|
|||||||
*/
|
*/
|
||||||
_createPopup() {
|
_createPopup() {
|
||||||
const { container, data } = this;
|
const { container, data } = this;
|
||||||
container.setAttribute("aria-haspopup", true);
|
container.setAttribute("aria-haspopup", "dialog");
|
||||||
|
|
||||||
const popup = new PopupAnnotationElement({
|
const popup = new PopupAnnotationElement({
|
||||||
data: {
|
data: {
|
||||||
@ -590,6 +590,17 @@ class AnnotationElement {
|
|||||||
getElementsToTriggerPopup() {
|
getElementsToTriggerPopup() {
|
||||||
return this.quadrilaterals || this.container;
|
return this.quadrilaterals || this.container;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
addHighlightArea() {
|
||||||
|
const triggers = this.getElementsToTriggerPopup();
|
||||||
|
if (Array.isArray(triggers)) {
|
||||||
|
for (const element of triggers) {
|
||||||
|
element.classList.add("highlightArea");
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
triggers.classList.add("highlightArea");
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class LinkAnnotationElement extends AnnotationElement {
|
class LinkAnnotationElement extends AnnotationElement {
|
||||||
@ -1881,6 +1892,7 @@ class PopupAnnotationElement extends AnnotationElement {
|
|||||||
for (const element of this.elements) {
|
for (const element of this.elements) {
|
||||||
element.popup = popup;
|
element.popup = popup;
|
||||||
elementIds.push(element.data.id);
|
elementIds.push(element.data.id);
|
||||||
|
element.addHighlightArea();
|
||||||
}
|
}
|
||||||
|
|
||||||
this.container.setAttribute("aria-controls", elementIds.join(","));
|
this.container.setAttribute("aria-controls", elementIds.join(","));
|
||||||
@ -2264,6 +2276,10 @@ class LineAnnotationElement extends AnnotationElement {
|
|||||||
getElementsToTriggerPopup() {
|
getElementsToTriggerPopup() {
|
||||||
return this.#line;
|
return this.#line;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
addHighlightArea() {
|
||||||
|
this.container.classList.add("highlightArea");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class SquareAnnotationElement extends AnnotationElement {
|
class SquareAnnotationElement extends AnnotationElement {
|
||||||
@ -2323,6 +2339,10 @@ class SquareAnnotationElement extends AnnotationElement {
|
|||||||
getElementsToTriggerPopup() {
|
getElementsToTriggerPopup() {
|
||||||
return this.#square;
|
return this.#square;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
addHighlightArea() {
|
||||||
|
this.container.classList.add("highlightArea");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class CircleAnnotationElement extends AnnotationElement {
|
class CircleAnnotationElement extends AnnotationElement {
|
||||||
@ -2383,6 +2403,10 @@ class CircleAnnotationElement extends AnnotationElement {
|
|||||||
getElementsToTriggerPopup() {
|
getElementsToTriggerPopup() {
|
||||||
return this.#circle;
|
return this.#circle;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
addHighlightArea() {
|
||||||
|
this.container.classList.add("highlightArea");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class PolylineAnnotationElement extends AnnotationElement {
|
class PolylineAnnotationElement extends AnnotationElement {
|
||||||
@ -2452,6 +2476,10 @@ class PolylineAnnotationElement extends AnnotationElement {
|
|||||||
getElementsToTriggerPopup() {
|
getElementsToTriggerPopup() {
|
||||||
return this.#polyline;
|
return this.#polyline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
addHighlightArea() {
|
||||||
|
this.container.classList.add("highlightArea");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class PolygonAnnotationElement extends PolylineAnnotationElement {
|
class PolygonAnnotationElement extends PolylineAnnotationElement {
|
||||||
@ -2556,6 +2584,10 @@ class InkAnnotationElement extends AnnotationElement {
|
|||||||
getElementsToTriggerPopup() {
|
getElementsToTriggerPopup() {
|
||||||
return this.#polylines;
|
return this.#polylines;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
addHighlightArea() {
|
||||||
|
this.container.classList.add("highlightArea");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class HighlightAnnotationElement extends AnnotationElement {
|
class HighlightAnnotationElement extends AnnotationElement {
|
||||||
@ -2750,6 +2782,10 @@ class FileAttachmentAnnotationElement extends AnnotationElement {
|
|||||||
return this.#trigger;
|
return this.#trigger;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
addHighlightArea() {
|
||||||
|
this.container.classList.add("highlightArea");
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Download the file attachment associated with this annotation.
|
* Download the file attachment associated with this annotation.
|
||||||
*
|
*
|
||||||
|
@ -30,6 +30,10 @@ class BaseFilterFactory {
|
|||||||
return "none";
|
return "none";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
addHighlightHCMFilter(fgColor, bgColor, newFgColor, newBgColor) {
|
||||||
|
return "none";
|
||||||
|
}
|
||||||
|
|
||||||
destroy(keepHCM = false) {}
|
destroy(keepHCM = false) {}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -64,6 +64,12 @@ class DOMFilterFactory extends BaseFilterFactory {
|
|||||||
|
|
||||||
#hcmUrl;
|
#hcmUrl;
|
||||||
|
|
||||||
|
#hcmHighlightFilter;
|
||||||
|
|
||||||
|
#hcmHighlightKey;
|
||||||
|
|
||||||
|
#hcmHighlightUrl;
|
||||||
|
|
||||||
#id = 0;
|
#id = 0;
|
||||||
|
|
||||||
constructor({ docId, ownerDocument = globalThis.document } = {}) {
|
constructor({ docId, ownerDocument = globalThis.document } = {}) {
|
||||||
@ -98,13 +104,6 @@ class DOMFilterFactory extends BaseFilterFactory {
|
|||||||
return this.#_defs;
|
return this.#_defs;
|
||||||
}
|
}
|
||||||
|
|
||||||
#appendFeFunc(feComponentTransfer, func, table) {
|
|
||||||
const feFunc = this.#document.createElementNS(SVG_NS, func);
|
|
||||||
feFunc.setAttribute("type", "discrete");
|
|
||||||
feFunc.setAttribute("tableValues", table);
|
|
||||||
feComponentTransfer.append(feFunc);
|
|
||||||
}
|
|
||||||
|
|
||||||
addFilter(maps) {
|
addFilter(maps) {
|
||||||
if (!maps) {
|
if (!maps) {
|
||||||
return "none";
|
return "none";
|
||||||
@ -155,20 +154,8 @@ class DOMFilterFactory extends BaseFilterFactory {
|
|||||||
this.#cache.set(maps, url);
|
this.#cache.set(maps, url);
|
||||||
this.#cache.set(key, url);
|
this.#cache.set(key, url);
|
||||||
|
|
||||||
const filter = this.#document.createElementNS(SVG_NS, "filter", SVG_NS);
|
const filter = this.#createFilter(id);
|
||||||
filter.setAttribute("id", id);
|
this.#addTransferMapConversion(tableR, tableG, tableB, filter);
|
||||||
filter.setAttribute("color-interpolation-filters", "sRGB");
|
|
||||||
const feComponentTransfer = this.#document.createElementNS(
|
|
||||||
SVG_NS,
|
|
||||||
"feComponentTransfer"
|
|
||||||
);
|
|
||||||
filter.append(feComponentTransfer);
|
|
||||||
|
|
||||||
this.#appendFeFunc(feComponentTransfer, "feFuncR", tableR);
|
|
||||||
this.#appendFeFunc(feComponentTransfer, "feFuncG", tableG);
|
|
||||||
this.#appendFeFunc(feComponentTransfer, "feFuncB", tableB);
|
|
||||||
|
|
||||||
this.#defs.append(filter);
|
|
||||||
|
|
||||||
return url;
|
return url;
|
||||||
}
|
}
|
||||||
@ -187,13 +174,9 @@ class DOMFilterFactory extends BaseFilterFactory {
|
|||||||
return this.#hcmUrl;
|
return this.#hcmUrl;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.#defs.style.color = fgColor;
|
const fgRGB = this.#getRGB(fgColor);
|
||||||
fgColor = getComputedStyle(this.#defs).getPropertyValue("color");
|
|
||||||
const fgRGB = getRGB(fgColor);
|
|
||||||
fgColor = Util.makeHexColor(...fgRGB);
|
fgColor = Util.makeHexColor(...fgRGB);
|
||||||
this.#defs.style.color = bgColor;
|
const bgRGB = this.#getRGB(bgColor);
|
||||||
bgColor = getComputedStyle(this.#defs).getPropertyValue("color");
|
|
||||||
const bgRGB = getRGB(bgColor);
|
|
||||||
bgColor = Util.makeHexColor(...bgRGB);
|
bgColor = Util.makeHexColor(...bgRGB);
|
||||||
this.#defs.style.color = "";
|
this.#defs.style.color = "";
|
||||||
|
|
||||||
@ -221,39 +204,9 @@ class DOMFilterFactory extends BaseFilterFactory {
|
|||||||
const table = map.join(",");
|
const table = map.join(",");
|
||||||
|
|
||||||
const id = `g_${this.#docId}_hcm_filter`;
|
const id = `g_${this.#docId}_hcm_filter`;
|
||||||
const filter = (this.#hcmFilter = this.#document.createElementNS(
|
const filter = (this.#hcmHighlightFilter = this.#createFilter(id));
|
||||||
SVG_NS,
|
this.#addTransferMapConversion(table, table, table, filter);
|
||||||
"filter",
|
this.#addGrayConversion(filter);
|
||||||
SVG_NS
|
|
||||||
));
|
|
||||||
filter.setAttribute("id", id);
|
|
||||||
filter.setAttribute("color-interpolation-filters", "sRGB");
|
|
||||||
let feComponentTransfer = this.#document.createElementNS(
|
|
||||||
SVG_NS,
|
|
||||||
"feComponentTransfer"
|
|
||||||
);
|
|
||||||
filter.append(feComponentTransfer);
|
|
||||||
|
|
||||||
this.#appendFeFunc(feComponentTransfer, "feFuncR", table);
|
|
||||||
this.#appendFeFunc(feComponentTransfer, "feFuncG", table);
|
|
||||||
this.#appendFeFunc(feComponentTransfer, "feFuncB", table);
|
|
||||||
|
|
||||||
const feColorMatrix = this.#document.createElementNS(
|
|
||||||
SVG_NS,
|
|
||||||
"feColorMatrix"
|
|
||||||
);
|
|
||||||
feColorMatrix.setAttribute("type", "matrix");
|
|
||||||
feColorMatrix.setAttribute(
|
|
||||||
"values",
|
|
||||||
"0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0"
|
|
||||||
);
|
|
||||||
filter.append(feColorMatrix);
|
|
||||||
|
|
||||||
feComponentTransfer = this.#document.createElementNS(
|
|
||||||
SVG_NS,
|
|
||||||
"feComponentTransfer"
|
|
||||||
);
|
|
||||||
filter.append(feComponentTransfer);
|
|
||||||
|
|
||||||
const getSteps = (c, n) => {
|
const getSteps = (c, n) => {
|
||||||
const start = fgRGB[c] / 255;
|
const start = fgRGB[c] / 255;
|
||||||
@ -264,18 +217,101 @@ class DOMFilterFactory extends BaseFilterFactory {
|
|||||||
}
|
}
|
||||||
return arr.join(",");
|
return arr.join(",");
|
||||||
};
|
};
|
||||||
this.#appendFeFunc(feComponentTransfer, "feFuncR", getSteps(0, 5));
|
this.#addTransferMapConversion(
|
||||||
this.#appendFeFunc(feComponentTransfer, "feFuncG", getSteps(1, 5));
|
getSteps(0, 5),
|
||||||
this.#appendFeFunc(feComponentTransfer, "feFuncB", getSteps(2, 5));
|
getSteps(1, 5),
|
||||||
|
getSteps(2, 5),
|
||||||
this.#defs.append(filter);
|
filter
|
||||||
|
);
|
||||||
|
|
||||||
this.#hcmUrl = `url(#${id})`;
|
this.#hcmUrl = `url(#${id})`;
|
||||||
return this.#hcmUrl;
|
return this.#hcmUrl;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
addHighlightHCMFilter(fgColor, bgColor, newFgColor, newBgColor) {
|
||||||
|
const key = `${fgColor}-${bgColor}-${newFgColor}-${newBgColor}`;
|
||||||
|
if (this.#hcmHighlightKey === key) {
|
||||||
|
return this.#hcmHighlightUrl;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.#hcmHighlightKey = key;
|
||||||
|
this.#hcmHighlightUrl = "none";
|
||||||
|
this.#hcmHighlightFilter?.remove();
|
||||||
|
|
||||||
|
if (!fgColor || !bgColor) {
|
||||||
|
return this.#hcmHighlightUrl;
|
||||||
|
}
|
||||||
|
|
||||||
|
const [fgRGB, bgRGB] = [fgColor, bgColor].map(this.#getRGB.bind(this));
|
||||||
|
let fgGray = Math.round(
|
||||||
|
0.2126 * fgRGB[0] + 0.7152 * fgRGB[1] + 0.0722 * fgRGB[2]
|
||||||
|
);
|
||||||
|
let bgGray = Math.round(
|
||||||
|
0.2126 * bgRGB[0] + 0.7152 * bgRGB[1] + 0.0722 * bgRGB[2]
|
||||||
|
);
|
||||||
|
let [newFgRGB, newBgRGB] = [newFgColor, newBgColor].map(
|
||||||
|
this.#getRGB.bind(this)
|
||||||
|
);
|
||||||
|
if (bgGray < fgGray) {
|
||||||
|
[fgGray, bgGray, newFgRGB, newBgRGB] = [
|
||||||
|
bgGray,
|
||||||
|
fgGray,
|
||||||
|
newBgRGB,
|
||||||
|
newFgRGB,
|
||||||
|
];
|
||||||
|
}
|
||||||
|
this.#defs.style.color = "";
|
||||||
|
|
||||||
|
// Now we can create the filters to highlight some canvas parts.
|
||||||
|
// The colors in the pdf will almost be Canvas and CanvasText, hence we
|
||||||
|
// want to filter them to finally get Highlight and HighlightText.
|
||||||
|
// Since we're in HCM the background color and the foreground color should
|
||||||
|
// be really different when converted to grayscale (if they're not then it
|
||||||
|
// means that we've a poor contrast). Once the canvas colors are converted
|
||||||
|
// to grayscale we can easily map them on their new colors.
|
||||||
|
// The grayscale step is important because if we've something like:
|
||||||
|
// fgColor = #FF....
|
||||||
|
// bgColor = #FF....
|
||||||
|
// then we are enable to map the red component on the new red components
|
||||||
|
// which can be different.
|
||||||
|
|
||||||
|
const getSteps = (fg, bg, n) => {
|
||||||
|
const arr = new Array(256);
|
||||||
|
const step = (bgGray - fgGray) / n;
|
||||||
|
const newStart = fg / 255;
|
||||||
|
const newStep = (bg - fg) / (255 * n);
|
||||||
|
let prev = 0;
|
||||||
|
for (let i = 0; i <= n; i++) {
|
||||||
|
const k = Math.round(fgGray + i * step);
|
||||||
|
const value = newStart + i * newStep;
|
||||||
|
for (let j = prev; j <= k; j++) {
|
||||||
|
arr[j] = value;
|
||||||
|
}
|
||||||
|
prev = k + 1;
|
||||||
|
}
|
||||||
|
for (let i = prev; i < 256; i++) {
|
||||||
|
arr[i] = arr[prev - 1];
|
||||||
|
}
|
||||||
|
return arr.join(",");
|
||||||
|
};
|
||||||
|
|
||||||
|
const id = `g_${this.#docId}_hcm_highlight_filter`;
|
||||||
|
const filter = (this.#hcmHighlightFilter = this.#createFilter(id));
|
||||||
|
|
||||||
|
this.#addGrayConversion(filter);
|
||||||
|
this.#addTransferMapConversion(
|
||||||
|
getSteps(newFgRGB[0], newBgRGB[0], 5),
|
||||||
|
getSteps(newFgRGB[1], newBgRGB[1], 5),
|
||||||
|
getSteps(newFgRGB[2], newBgRGB[2], 5),
|
||||||
|
filter
|
||||||
|
);
|
||||||
|
|
||||||
|
this.#hcmHighlightUrl = `url(#${id})`;
|
||||||
|
return this.#hcmHighlightUrl;
|
||||||
|
}
|
||||||
|
|
||||||
destroy(keepHCM = false) {
|
destroy(keepHCM = false) {
|
||||||
if (keepHCM && this.#hcmUrl) {
|
if (keepHCM && (this.#hcmUrl || this.#hcmHighlightUrl)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (this.#_defs) {
|
if (this.#_defs) {
|
||||||
@ -288,6 +324,51 @@ class DOMFilterFactory extends BaseFilterFactory {
|
|||||||
}
|
}
|
||||||
this.#id = 0;
|
this.#id = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#addGrayConversion(filter) {
|
||||||
|
const feColorMatrix = this.#document.createElementNS(
|
||||||
|
SVG_NS,
|
||||||
|
"feColorMatrix"
|
||||||
|
);
|
||||||
|
feColorMatrix.setAttribute("type", "matrix");
|
||||||
|
feColorMatrix.setAttribute(
|
||||||
|
"values",
|
||||||
|
"0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0"
|
||||||
|
);
|
||||||
|
filter.append(feColorMatrix);
|
||||||
|
}
|
||||||
|
|
||||||
|
#createFilter(id) {
|
||||||
|
const filter = this.#document.createElementNS(SVG_NS, "filter");
|
||||||
|
filter.setAttribute("color-interpolation-filters", "sRGB");
|
||||||
|
filter.setAttribute("id", id);
|
||||||
|
this.#defs.append(filter);
|
||||||
|
|
||||||
|
return filter;
|
||||||
|
}
|
||||||
|
|
||||||
|
#appendFeFunc(feComponentTransfer, func, table) {
|
||||||
|
const feFunc = this.#document.createElementNS(SVG_NS, func);
|
||||||
|
feFunc.setAttribute("type", "discrete");
|
||||||
|
feFunc.setAttribute("tableValues", table);
|
||||||
|
feComponentTransfer.append(feFunc);
|
||||||
|
}
|
||||||
|
|
||||||
|
#addTransferMapConversion(rTable, gTable, bTable, filter) {
|
||||||
|
const feComponentTransfer = this.#document.createElementNS(
|
||||||
|
SVG_NS,
|
||||||
|
"feComponentTransfer"
|
||||||
|
);
|
||||||
|
filter.append(feComponentTransfer);
|
||||||
|
this.#appendFeFunc(feComponentTransfer, "feFuncR", rTable);
|
||||||
|
this.#appendFeFunc(feComponentTransfer, "feFuncG", gTable);
|
||||||
|
this.#appendFeFunc(feComponentTransfer, "feFuncB", bTable);
|
||||||
|
}
|
||||||
|
|
||||||
|
#getRGB(color) {
|
||||||
|
this.#defs.style.color = color;
|
||||||
|
return getRGB(getComputedStyle(this.#defs).getPropertyValue("color"));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class DOMCanvasFactory extends BaseCanvasFactory {
|
class DOMCanvasFactory extends BaseCanvasFactory {
|
||||||
|
@ -30,6 +30,7 @@
|
|||||||
--input-disabled-border-color: GrayText;
|
--input-disabled-border-color: GrayText;
|
||||||
--input-hover-border-color: Highlight;
|
--input-hover-border-color: Highlight;
|
||||||
--link-outline: 1.5px solid LinkText;
|
--link-outline: 1.5px solid LinkText;
|
||||||
|
--hcm-highligh-filter: invert(100%);
|
||||||
}
|
}
|
||||||
.annotationLayer .textWidgetAnnotation :is(input, textarea):required,
|
.annotationLayer .textWidgetAnnotation :is(input, textarea):required,
|
||||||
.annotationLayer .choiceWidgetAnnotation select:required,
|
.annotationLayer .choiceWidgetAnnotation select:required,
|
||||||
@ -40,7 +41,30 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.annotationLayer .linkAnnotation:hover {
|
.annotationLayer .linkAnnotation:hover {
|
||||||
backdrop-filter: invert(100%);
|
backdrop-filter: var(--hcm-highligh-filter);
|
||||||
|
}
|
||||||
|
|
||||||
|
.annotationLayer .linkAnnotation > a:hover {
|
||||||
|
opacity: 0 !important;
|
||||||
|
background: none !important;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.annotationLayer .popupAnnotation .popup {
|
||||||
|
outline: calc(1.5px * var(--scale-factor)) solid CanvasText !important;
|
||||||
|
background-color: ButtonFace !important;
|
||||||
|
color: ButtonText !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.annotationLayer .highlightArea:hover::after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
backdrop-filter: var(--hcm-highligh-filter);
|
||||||
|
content: "";
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.annotationLayer .popupAnnotation.focused .popup {
|
.annotationLayer .popupAnnotation.focused .popup {
|
||||||
|
@ -13,6 +13,8 @@
|
|||||||
* limitations under the License.
|
* limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
// eslint-disable-next-line max-len
|
||||||
|
/** @typedef {import("../src/display/base_factory.js").BaseFilterFactory} BaseFilterFactory */
|
||||||
// eslint-disable-next-line max-len
|
// eslint-disable-next-line max-len
|
||||||
/** @typedef {import("../src/display/display_utils").PageViewport} PageViewport */
|
/** @typedef {import("../src/display/display_utils").PageViewport} PageViewport */
|
||||||
// eslint-disable-next-line max-len
|
// eslint-disable-next-line max-len
|
||||||
@ -84,6 +86,8 @@ import { XfaLayerBuilder } from "./xfa_layer_builder.js";
|
|||||||
* @property {IL10n} [l10n] - Localization service.
|
* @property {IL10n} [l10n] - Localization service.
|
||||||
* @property {function} [layerProperties] - The function that is used to lookup
|
* @property {function} [layerProperties] - The function that is used to lookup
|
||||||
* the necessary layer-properties.
|
* the necessary layer-properties.
|
||||||
|
* @property {BaseFilterFactory} [filterFactory] - Factory to create some SVG
|
||||||
|
* filters.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const MAX_CANVAS_PIXELS = compatibilityParams.maxCanvasPixels || 16777216;
|
const MAX_CANVAS_PIXELS = compatibilityParams.maxCanvasPixels || 16777216;
|
||||||
@ -203,6 +207,21 @@ class PDFPageView {
|
|||||||
"--scale-factor",
|
"--scale-factor",
|
||||||
this.scale * PixelsPerInch.PDF_TO_CSS_UNITS
|
this.scale * PixelsPerInch.PDF_TO_CSS_UNITS
|
||||||
);
|
);
|
||||||
|
if (
|
||||||
|
options.filterFactory &&
|
||||||
|
(this.pageColors?.foreground === "CanvasText" ||
|
||||||
|
this.pageColors?.background === "Canvas")
|
||||||
|
) {
|
||||||
|
container?.style.setProperty(
|
||||||
|
"--hcm-highligh-filter",
|
||||||
|
options.filterFactory.addHighlightHCMFilter(
|
||||||
|
"CanvasText",
|
||||||
|
"Canvas",
|
||||||
|
"HighlightText",
|
||||||
|
"Highlight"
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
const { optionalContentConfigPromise } = options;
|
const { optionalContentConfigPromise } = options;
|
||||||
if (optionalContentConfigPromise) {
|
if (optionalContentConfigPromise) {
|
||||||
|
@ -883,6 +883,20 @@ class PDFViewer {
|
|||||||
// Ensure that the various layers always get the correct initial size,
|
// Ensure that the various layers always get the correct initial size,
|
||||||
// see issue 15795.
|
// see issue 15795.
|
||||||
this.viewer.style.setProperty("--scale-factor", viewport.scale);
|
this.viewer.style.setProperty("--scale-factor", viewport.scale);
|
||||||
|
if (
|
||||||
|
this.pageColors?.foreground === "CanvasText" ||
|
||||||
|
this.pageColors?.background === "Canvas"
|
||||||
|
) {
|
||||||
|
this.viewer.style.setProperty(
|
||||||
|
"--hcm-highligh-filter",
|
||||||
|
pdfDocument.filterFactory.addHighlightHCMFilter(
|
||||||
|
"CanvasText",
|
||||||
|
"Canvas",
|
||||||
|
"HighlightText",
|
||||||
|
"Highlight"
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
for (let pageNum = 1; pageNum <= pagesCount; ++pageNum) {
|
for (let pageNum = 1; pageNum <= pagesCount; ++pageNum) {
|
||||||
const pageView = new PDFPageView({
|
const pageView = new PDFPageView({
|
||||||
@ -902,6 +916,7 @@ class PDFViewer {
|
|||||||
pageColors: this.pageColors,
|
pageColors: this.pageColors,
|
||||||
l10n: this.l10n,
|
l10n: this.l10n,
|
||||||
layerProperties,
|
layerProperties,
|
||||||
|
filterFactory: pdfDocument.filterFactory,
|
||||||
});
|
});
|
||||||
this._pages.push(pageView);
|
this._pages.push(pageView);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user