pdfjs-dist
Version:
Generic build of Mozilla's PDF.js library.
1,447 lines (1,446 loc) • 69.7 kB
JavaScript
/**
* @licstart The following is the entire license notice for the
* JavaScript code in this page
*
* Copyright 2022 Mozilla Foundation
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* @licend The above is the entire license notice for the
* JavaScript code in this page
*/
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.AnnotationLayer = void 0;
var _util = require("../shared/util.js");
var _display_utils = require("./display_utils.js");
var _annotation_storage = require("./annotation_storage.js");
var _scripting_utils = require("../shared/scripting_utils.js");
var _xfa_layer = require("./xfa_layer.js");
const DEFAULT_TAB_INDEX = 1000;
const DEFAULT_FONT_SIZE = 9;
const GetElementsByNameSet = new WeakSet();
function getRectDims(rect) {
return {
width: rect[2] - rect[0],
height: rect[3] - rect[1]
};
}
class AnnotationElementFactory {
static create(parameters) {
const subtype = parameters.data.annotationType;
switch (subtype) {
case _util.AnnotationType.LINK:
return new LinkAnnotationElement(parameters);
case _util.AnnotationType.TEXT:
return new TextAnnotationElement(parameters);
case _util.AnnotationType.WIDGET:
const fieldType = parameters.data.fieldType;
switch (fieldType) {
case "Tx":
return new TextWidgetAnnotationElement(parameters);
case "Btn":
if (parameters.data.radioButton) {
return new RadioButtonWidgetAnnotationElement(parameters);
} else if (parameters.data.checkBox) {
return new CheckboxWidgetAnnotationElement(parameters);
}
return new PushButtonWidgetAnnotationElement(parameters);
case "Ch":
return new ChoiceWidgetAnnotationElement(parameters);
}
return new WidgetAnnotationElement(parameters);
case _util.AnnotationType.POPUP:
return new PopupAnnotationElement(parameters);
case _util.AnnotationType.FREETEXT:
return new FreeTextAnnotationElement(parameters);
case _util.AnnotationType.LINE:
return new LineAnnotationElement(parameters);
case _util.AnnotationType.SQUARE:
return new SquareAnnotationElement(parameters);
case _util.AnnotationType.CIRCLE:
return new CircleAnnotationElement(parameters);
case _util.AnnotationType.POLYLINE:
return new PolylineAnnotationElement(parameters);
case _util.AnnotationType.CARET:
return new CaretAnnotationElement(parameters);
case _util.AnnotationType.INK:
return new InkAnnotationElement(parameters);
case _util.AnnotationType.POLYGON:
return new PolygonAnnotationElement(parameters);
case _util.AnnotationType.HIGHLIGHT:
return new HighlightAnnotationElement(parameters);
case _util.AnnotationType.UNDERLINE:
return new UnderlineAnnotationElement(parameters);
case _util.AnnotationType.SQUIGGLY:
return new SquigglyAnnotationElement(parameters);
case _util.AnnotationType.STRIKEOUT:
return new StrikeOutAnnotationElement(parameters);
case _util.AnnotationType.STAMP:
return new StampAnnotationElement(parameters);
case _util.AnnotationType.FILEATTACHMENT:
return new FileAttachmentAnnotationElement(parameters);
default:
return new AnnotationElement(parameters);
}
}
}
class AnnotationElement {
constructor(parameters, {
isRenderable = false,
ignoreBorder = false,
createQuadrilaterals = false
} = {}) {
this.isRenderable = isRenderable;
this.data = parameters.data;
this.layer = parameters.layer;
this.page = parameters.page;
this.viewport = parameters.viewport;
this.linkService = parameters.linkService;
this.downloadManager = parameters.downloadManager;
this.imageResourcesPath = parameters.imageResourcesPath;
this.renderForms = parameters.renderForms;
this.svgFactory = parameters.svgFactory;
this.annotationStorage = parameters.annotationStorage;
this.enableScripting = parameters.enableScripting;
this.hasJSActions = parameters.hasJSActions;
this._fieldObjects = parameters.fieldObjects;
this._mouseState = parameters.mouseState;
if (isRenderable) {
this.container = this._createContainer(ignoreBorder);
}
if (createQuadrilaterals) {
this.quadrilaterals = this._createQuadrilaterals(ignoreBorder);
}
}
_createContainer(ignoreBorder = false) {
const data = this.data,
page = this.page,
viewport = this.viewport;
const container = document.createElement("section");
const {
width,
height
} = getRectDims(data.rect);
const [pageLLx, pageLLy, pageURx, pageURy] = viewport.viewBox;
const pageWidth = pageURx - pageLLx;
const pageHeight = pageURy - pageLLy;
container.setAttribute("data-annotation-id", data.id);
const rect = _util.Util.normalizeRect([data.rect[0], page.view[3] - data.rect[1] + page.view[1], data.rect[2], page.view[3] - data.rect[3] + page.view[1]]);
if (!ignoreBorder && data.borderStyle.width > 0) {
container.style.borderWidth = `${data.borderStyle.width}px`;
const horizontalRadius = data.borderStyle.horizontalCornerRadius;
const verticalRadius = data.borderStyle.verticalCornerRadius;
if (horizontalRadius > 0 || verticalRadius > 0) {
const radius = `calc(${horizontalRadius}px * var(--scale-factor)) / calc(${verticalRadius}px * var(--scale-factor))`;
container.style.borderRadius = radius;
} else if (this instanceof RadioButtonWidgetAnnotationElement) {
const radius = `calc(${width}px * var(--scale-factor)) / calc(${height}px * var(--scale-factor))`;
container.style.borderRadius = radius;
}
switch (data.borderStyle.style) {
case _util.AnnotationBorderStyleType.SOLID:
container.style.borderStyle = "solid";
break;
case _util.AnnotationBorderStyleType.DASHED:
container.style.borderStyle = "dashed";
break;
case _util.AnnotationBorderStyleType.BEVELED:
(0, _util.warn)("Unimplemented border style: beveled");
break;
case _util.AnnotationBorderStyleType.INSET:
(0, _util.warn)("Unimplemented border style: inset");
break;
case _util.AnnotationBorderStyleType.UNDERLINE:
container.style.borderBottomStyle = "solid";
break;
default:
break;
}
const borderColor = data.borderColor || null;
if (borderColor) {
container.style.borderColor = _util.Util.makeHexColor(borderColor[0] | 0, borderColor[1] | 0, borderColor[2] | 0);
} else {
container.style.borderWidth = 0;
}
}
container.style.left = `${100 * (rect[0] - pageLLx) / pageWidth}%`;
container.style.top = `${100 * (rect[1] - pageLLy) / pageHeight}%`;
const {
rotation
} = data;
if (data.hasOwnCanvas || rotation === 0) {
container.style.width = `${100 * width / pageWidth}%`;
container.style.height = `${100 * height / pageHeight}%`;
} else {
this.setRotation(rotation, container);
}
return container;
}
setRotation(angle, container = this.container) {
const [pageLLx, pageLLy, pageURx, pageURy] = this.viewport.viewBox;
const pageWidth = pageURx - pageLLx;
const pageHeight = pageURy - pageLLy;
const {
width,
height
} = getRectDims(this.data.rect);
let elementWidth, elementHeight;
if (angle % 180 === 0) {
elementWidth = 100 * width / pageWidth;
elementHeight = 100 * height / pageHeight;
} else {
elementWidth = 100 * height / pageWidth;
elementHeight = 100 * width / pageHeight;
}
container.style.width = `${elementWidth}%`;
container.style.height = `${elementHeight}%`;
container.setAttribute("data-main-rotation", (360 - angle) % 360);
}
get _commonActions() {
const setColor = (jsName, styleName, event) => {
const color = event.detail[jsName];
event.target.style[styleName] = _scripting_utils.ColorConverters[`${color[0]}_HTML`](color.slice(1));
};
return (0, _util.shadow)(this, "_commonActions", {
display: event => {
const hidden = event.detail.display % 2 === 1;
this.container.style.visibility = hidden ? "hidden" : "visible";
this.annotationStorage.setValue(this.data.id, {
hidden,
print: event.detail.display === 0 || event.detail.display === 3
});
},
print: event => {
this.annotationStorage.setValue(this.data.id, {
print: event.detail.print
});
},
hidden: event => {
this.container.style.visibility = event.detail.hidden ? "hidden" : "visible";
this.annotationStorage.setValue(this.data.id, {
hidden: event.detail.hidden
});
},
focus: event => {
setTimeout(() => event.target.focus({
preventScroll: false
}), 0);
},
userName: event => {
event.target.title = event.detail.userName;
},
readonly: event => {
if (event.detail.readonly) {
event.target.setAttribute("readonly", "");
} else {
event.target.removeAttribute("readonly");
}
},
required: event => {
this._setRequired(event.target, event.detail.required);
},
bgColor: event => {
setColor("bgColor", "backgroundColor", event);
},
fillColor: event => {
setColor("fillColor", "backgroundColor", event);
},
fgColor: event => {
setColor("fgColor", "color", event);
},
textColor: event => {
setColor("textColor", "color", event);
},
borderColor: event => {
setColor("borderColor", "borderColor", event);
},
strokeColor: event => {
setColor("strokeColor", "borderColor", event);
},
rotation: event => {
const angle = event.detail.rotation;
this.setRotation(angle);
this.annotationStorage.setValue(this.data.id, {
rotation: angle
});
}
});
}
_dispatchEventFromSandbox(actions, jsEvent) {
const commonActions = this._commonActions;
for (const name of Object.keys(jsEvent.detail)) {
const action = actions[name] || commonActions[name];
action?.(jsEvent);
}
}
_setDefaultPropertiesFromJS(element) {
if (!this.enableScripting) {
return;
}
const storedData = this.annotationStorage.getRawValue(this.data.id);
if (!storedData) {
return;
}
const commonActions = this._commonActions;
for (const [actionName, detail] of Object.entries(storedData)) {
const action = commonActions[actionName];
if (action) {
const eventProxy = {
detail: {
[actionName]: detail
},
target: element
};
action(eventProxy);
delete storedData[actionName];
}
}
}
_createQuadrilaterals(ignoreBorder = false) {
if (!this.data.quadPoints) {
return null;
}
const quadrilaterals = [];
const savedRect = this.data.rect;
for (const quadPoint of this.data.quadPoints) {
this.data.rect = [quadPoint[2].x, quadPoint[2].y, quadPoint[1].x, quadPoint[1].y];
quadrilaterals.push(this._createContainer(ignoreBorder));
}
this.data.rect = savedRect;
return quadrilaterals;
}
_createPopup(trigger, data) {
let container = this.container;
if (this.quadrilaterals) {
trigger = trigger || this.quadrilaterals;
container = this.quadrilaterals[0];
}
if (!trigger) {
trigger = document.createElement("div");
trigger.className = "popupTriggerArea";
container.append(trigger);
}
const popupElement = new PopupElement({
container,
trigger,
color: data.color,
titleObj: data.titleObj,
modificationDate: data.modificationDate,
contentsObj: data.contentsObj,
richText: data.richText,
hideWrapper: true
});
const popup = popupElement.render();
popup.style.left = "100%";
container.append(popup);
}
_renderQuadrilaterals(className) {
for (const quadrilateral of this.quadrilaterals) {
quadrilateral.className = className;
}
return this.quadrilaterals;
}
render() {
(0, _util.unreachable)("Abstract method `AnnotationElement.render` called");
}
_getElementsByName(name, skipId = null) {
const fields = [];
if (this._fieldObjects) {
const fieldObj = this._fieldObjects[name];
if (fieldObj) {
for (const {
page,
id,
exportValues
} of fieldObj) {
if (page === -1) {
continue;
}
if (id === skipId) {
continue;
}
const exportValue = typeof exportValues === "string" ? exportValues : null;
const domElement = document.querySelector(`[data-element-id="${id}"]`);
if (domElement && !GetElementsByNameSet.has(domElement)) {
(0, _util.warn)(`_getElementsByName - element not allowed: ${id}`);
continue;
}
fields.push({
id,
exportValue,
domElement
});
}
}
return fields;
}
for (const domElement of document.getElementsByName(name)) {
const {
exportValue
} = domElement;
const id = domElement.getAttribute("data-element-id");
if (id === skipId) {
continue;
}
if (!GetElementsByNameSet.has(domElement)) {
continue;
}
fields.push({
id,
exportValue,
domElement
});
}
return fields;
}
static get platform() {
const platform = typeof navigator !== "undefined" ? navigator.platform : "";
return (0, _util.shadow)(this, "platform", {
isWin: platform.includes("Win"),
isMac: platform.includes("Mac")
});
}
}
class LinkAnnotationElement extends AnnotationElement {
constructor(parameters, options = null) {
super(parameters, {
isRenderable: true,
ignoreBorder: !!options?.ignoreBorder,
createQuadrilaterals: true
});
this.isTooltipOnly = parameters.data.isTooltipOnly;
}
render() {
const {
data,
linkService
} = this;
const link = document.createElement("a");
link.setAttribute("data-element-id", data.id);
let isBound = false;
if (data.url) {
linkService.addLinkAttributes(link, data.url, data.newWindow);
isBound = true;
} else if (data.action) {
this._bindNamedAction(link, data.action);
isBound = true;
} else if (data.attachment) {
this._bindAttachment(link, data.attachment);
isBound = true;
} else if (data.setOCGState) {
this.#bindSetOCGState(link, data.setOCGState);
isBound = true;
} else if (data.dest) {
this._bindLink(link, data.dest);
isBound = true;
} else {
if (data.actions && (data.actions.Action || data.actions["Mouse Up"] || data.actions["Mouse Down"]) && this.enableScripting && this.hasJSActions) {
this._bindJSAction(link, data);
isBound = true;
}
if (data.resetForm) {
this._bindResetFormAction(link, data.resetForm);
isBound = true;
} else if (this.isTooltipOnly && !isBound) {
this._bindLink(link, "");
isBound = true;
}
}
if (this.quadrilaterals) {
return this._renderQuadrilaterals("linkAnnotation").map((quadrilateral, index) => {
const linkElement = index === 0 ? link : link.cloneNode();
quadrilateral.append(linkElement);
return quadrilateral;
});
}
this.container.className = "linkAnnotation";
if (isBound) {
this.container.append(link);
}
return this.container;
}
#setInternalLink() {
this.container.setAttribute("data-internal-link", "");
}
_bindLink(link, destination) {
link.href = this.linkService.getDestinationHash(destination);
link.onclick = () => {
if (destination) {
this.linkService.goToDestination(destination);
}
return false;
};
if (destination || destination === "") {
this.#setInternalLink();
}
}
_bindNamedAction(link, action) {
link.href = this.linkService.getAnchorUrl("");
link.onclick = () => {
this.linkService.executeNamedAction(action);
return false;
};
this.#setInternalLink();
}
_bindAttachment(link, attachment) {
link.href = this.linkService.getAnchorUrl("");
link.onclick = () => {
this.downloadManager?.openOrDownloadData(this.container, attachment.content, attachment.filename);
return false;
};
this.#setInternalLink();
}
#bindSetOCGState(link, action) {
link.href = this.linkService.getAnchorUrl("");
link.onclick = () => {
this.linkService.executeSetOCGState(action);
return false;
};
this.#setInternalLink();
}
_bindJSAction(link, data) {
link.href = this.linkService.getAnchorUrl("");
const map = new Map([["Action", "onclick"], ["Mouse Up", "onmouseup"], ["Mouse Down", "onmousedown"]]);
for (const name of Object.keys(data.actions)) {
const jsName = map.get(name);
if (!jsName) {
continue;
}
link[jsName] = () => {
this.linkService.eventBus?.dispatch("dispatcheventinsandbox", {
source: this,
detail: {
id: data.id,
name
}
});
return false;
};
}
if (!link.onclick) {
link.onclick = () => false;
}
this.#setInternalLink();
}
_bindResetFormAction(link, resetForm) {
const otherClickAction = link.onclick;
if (!otherClickAction) {
link.href = this.linkService.getAnchorUrl("");
}
this.#setInternalLink();
if (!this._fieldObjects) {
(0, _util.warn)(`_bindResetFormAction - "resetForm" action not supported, ` + "ensure that the `fieldObjects` parameter is provided.");
if (!otherClickAction) {
link.onclick = () => false;
}
return;
}
link.onclick = () => {
otherClickAction?.();
const {
fields: resetFormFields,
refs: resetFormRefs,
include
} = resetForm;
const allFields = [];
if (resetFormFields.length !== 0 || resetFormRefs.length !== 0) {
const fieldIds = new Set(resetFormRefs);
for (const fieldName of resetFormFields) {
const fields = this._fieldObjects[fieldName] || [];
for (const {
id
} of fields) {
fieldIds.add(id);
}
}
for (const fields of Object.values(this._fieldObjects)) {
for (const field of fields) {
if (fieldIds.has(field.id) === include) {
allFields.push(field);
}
}
}
} else {
for (const fields of Object.values(this._fieldObjects)) {
allFields.push(...fields);
}
}
const storage = this.annotationStorage;
const allIds = [];
for (const field of allFields) {
const {
id
} = field;
allIds.push(id);
switch (field.type) {
case "text":
{
const value = field.defaultValue || "";
storage.setValue(id, {
value
});
break;
}
case "checkbox":
case "radiobutton":
{
const value = field.defaultValue === field.exportValues;
storage.setValue(id, {
value
});
break;
}
case "combobox":
case "listbox":
{
const value = field.defaultValue || "";
storage.setValue(id, {
value
});
break;
}
default:
continue;
}
const domElement = document.querySelector(`[data-element-id="${id}"]`);
if (!domElement) {
continue;
} else if (!GetElementsByNameSet.has(domElement)) {
(0, _util.warn)(`_bindResetFormAction - element not allowed: ${id}`);
continue;
}
domElement.dispatchEvent(new Event("resetform"));
}
if (this.enableScripting) {
this.linkService.eventBus?.dispatch("dispatcheventinsandbox", {
source: this,
detail: {
id: "app",
ids: allIds,
name: "ResetForm"
}
});
}
return false;
};
}
}
class TextAnnotationElement extends AnnotationElement {
constructor(parameters) {
const isRenderable = !!(parameters.data.hasPopup || parameters.data.titleObj?.str || parameters.data.contentsObj?.str || parameters.data.richText?.str);
super(parameters, {
isRenderable
});
}
render() {
this.container.className = "textAnnotation";
const image = document.createElement("img");
image.src = this.imageResourcesPath + "annotation-" + this.data.name.toLowerCase() + ".svg";
image.alt = "[{{type}} Annotation]";
image.dataset.l10nId = "text_annotation_type";
image.dataset.l10nArgs = JSON.stringify({
type: this.data.name
});
if (!this.data.hasPopup) {
this._createPopup(image, this.data);
}
this.container.append(image);
return this.container;
}
}
class WidgetAnnotationElement extends AnnotationElement {
render() {
if (this.data.alternativeText) {
this.container.title = this.data.alternativeText;
}
return this.container;
}
_getKeyModifier(event) {
const {
isWin,
isMac
} = AnnotationElement.platform;
return isWin && event.ctrlKey || isMac && event.metaKey;
}
_setEventListener(element, baseName, eventName, valueGetter) {
if (baseName.includes("mouse")) {
element.addEventListener(baseName, event => {
this.linkService.eventBus?.dispatch("dispatcheventinsandbox", {
source: this,
detail: {
id: this.data.id,
name: eventName,
value: valueGetter(event),
shift: event.shiftKey,
modifier: this._getKeyModifier(event)
}
});
});
} else {
element.addEventListener(baseName, event => {
this.linkService.eventBus?.dispatch("dispatcheventinsandbox", {
source: this,
detail: {
id: this.data.id,
name: eventName,
value: valueGetter(event)
}
});
});
}
}
_setEventListeners(element, names, getter) {
for (const [baseName, eventName] of names) {
if (eventName === "Action" || this.data.actions?.[eventName]) {
this._setEventListener(element, baseName, eventName, getter);
}
}
}
_setBackgroundColor(element) {
const color = this.data.backgroundColor || null;
element.style.backgroundColor = color === null ? "transparent" : _util.Util.makeHexColor(color[0], color[1], color[2]);
}
_setTextStyle(element) {
const TEXT_ALIGNMENT = ["left", "center", "right"];
const {
fontColor
} = this.data.defaultAppearanceData;
const fontSize = this.data.defaultAppearanceData.fontSize || DEFAULT_FONT_SIZE;
const style = element.style;
let computedFontSize;
const BORDER_SIZE = 2;
const roundToOneDecimal = x => Math.round(10 * x) / 10;
if (this.data.multiLine) {
const height = Math.abs(this.data.rect[3] - this.data.rect[1] - BORDER_SIZE);
const numberOfLines = Math.round(height / (_util.LINE_FACTOR * fontSize)) || 1;
const lineHeight = height / numberOfLines;
computedFontSize = Math.min(fontSize, roundToOneDecimal(lineHeight / _util.LINE_FACTOR));
} else {
const height = Math.abs(this.data.rect[3] - this.data.rect[1] - BORDER_SIZE);
computedFontSize = Math.min(fontSize, roundToOneDecimal(height / _util.LINE_FACTOR));
}
style.fontSize = `calc(${computedFontSize}px * var(--scale-factor))`;
style.color = _util.Util.makeHexColor(fontColor[0], fontColor[1], fontColor[2]);
if (this.data.textAlignment !== null) {
style.textAlign = TEXT_ALIGNMENT[this.data.textAlignment];
}
}
_setRequired(element, isRequired) {
if (isRequired) {
element.setAttribute("required", true);
} else {
element.removeAttribute("required");
}
element.setAttribute("aria-required", isRequired);
}
}
class TextWidgetAnnotationElement extends WidgetAnnotationElement {
constructor(parameters) {
const isRenderable = parameters.renderForms || !parameters.data.hasAppearance && !!parameters.data.fieldValue;
super(parameters, {
isRenderable
});
}
setPropertyOnSiblings(base, key, value, keyInStorage) {
const storage = this.annotationStorage;
for (const element of this._getElementsByName(base.name, base.id)) {
if (element.domElement) {
element.domElement[key] = value;
}
storage.setValue(element.id, {
[keyInStorage]: value
});
}
}
render() {
const storage = this.annotationStorage;
const id = this.data.id;
this.container.className = "textWidgetAnnotation";
let element = null;
if (this.renderForms) {
const storedData = storage.getValue(id, {
value: this.data.fieldValue
});
let textContent = storedData.formattedValue || storedData.value || "";
const maxLen = storage.getValue(id, {
charLimit: this.data.maxLen
}).charLimit;
if (maxLen && textContent.length > maxLen) {
textContent = textContent.slice(0, maxLen);
}
const elementData = {
userValue: textContent,
formattedValue: null,
valueOnFocus: ""
};
if (this.data.multiLine) {
element = document.createElement("textarea");
element.textContent = textContent;
if (this.data.doNotScroll) {
element.style.overflowY = "hidden";
}
} else {
element = document.createElement("input");
element.type = "text";
element.setAttribute("value", textContent);
if (this.data.doNotScroll) {
element.style.overflowX = "hidden";
}
}
GetElementsByNameSet.add(element);
element.setAttribute("data-element-id", id);
element.disabled = this.data.readOnly;
element.name = this.data.fieldName;
element.tabIndex = DEFAULT_TAB_INDEX;
this._setRequired(element, this.data.required);
if (maxLen) {
element.maxLength = maxLen;
}
element.addEventListener("input", event => {
storage.setValue(id, {
value: event.target.value
});
this.setPropertyOnSiblings(element, "value", event.target.value, "value");
});
element.addEventListener("resetform", event => {
const defaultValue = this.data.defaultFieldValue ?? "";
element.value = elementData.userValue = defaultValue;
elementData.formattedValue = null;
});
let blurListener = event => {
const {
formattedValue
} = elementData;
if (formattedValue !== null && formattedValue !== undefined) {
event.target.value = formattedValue;
}
event.target.scrollLeft = 0;
};
if (this.enableScripting && this.hasJSActions) {
element.addEventListener("focus", event => {
if (elementData.userValue) {
event.target.value = elementData.userValue;
}
elementData.valueOnFocus = event.target.value;
});
element.addEventListener("updatefromsandbox", jsEvent => {
const actions = {
value(event) {
elementData.userValue = event.detail.value ?? "";
storage.setValue(id, {
value: elementData.userValue.toString()
});
event.target.value = elementData.userValue;
},
formattedValue(event) {
const {
formattedValue
} = event.detail;
elementData.formattedValue = formattedValue;
if (formattedValue !== null && formattedValue !== undefined && event.target !== document.activeElement) {
event.target.value = formattedValue;
}
storage.setValue(id, {
formattedValue
});
},
selRange(event) {
event.target.setSelectionRange(...event.detail.selRange);
},
charLimit: event => {
const {
charLimit
} = event.detail;
const {
target
} = event;
if (charLimit === 0) {
target.removeAttribute("maxLength");
return;
}
target.setAttribute("maxLength", charLimit);
let value = elementData.userValue;
if (!value || value.length <= charLimit) {
return;
}
value = value.slice(0, charLimit);
target.value = elementData.userValue = value;
storage.setValue(id, {
value
});
this.linkService.eventBus?.dispatch("dispatcheventinsandbox", {
source: this,
detail: {
id,
name: "Keystroke",
value,
willCommit: true,
commitKey: 1,
selStart: target.selectionStart,
selEnd: target.selectionEnd
}
});
}
};
this._dispatchEventFromSandbox(actions, jsEvent);
});
element.addEventListener("keydown", event => {
let commitKey = -1;
if (event.key === "Escape") {
commitKey = 0;
} else if (event.key === "Enter" && !this.data.multiLine) {
commitKey = 2;
} else if (event.key === "Tab") {
commitKey = 3;
}
if (commitKey === -1) {
return;
}
const {
value
} = event.target;
if (elementData.valueOnFocus === value) {
return;
}
elementData.userValue = value;
this.linkService.eventBus?.dispatch("dispatcheventinsandbox", {
source: this,
detail: {
id,
name: "Keystroke",
value,
willCommit: true,
commitKey,
selStart: event.target.selectionStart,
selEnd: event.target.selectionEnd
}
});
});
const _blurListener = blurListener;
blurListener = null;
element.addEventListener("blur", event => {
const {
value
} = event.target;
elementData.userValue = value;
if (this._mouseState.isDown && elementData.valueOnFocus !== value) {
this.linkService.eventBus?.dispatch("dispatcheventinsandbox", {
source: this,
detail: {
id,
name: "Keystroke",
value,
willCommit: true,
commitKey: 1,
selStart: event.target.selectionStart,
selEnd: event.target.selectionEnd
}
});
}
_blurListener(event);
});
if (this.data.actions?.Keystroke) {
element.addEventListener("beforeinput", event => {
const {
data,
target
} = event;
const {
value,
selectionStart,
selectionEnd
} = target;
let selStart = selectionStart,
selEnd = selectionEnd;
switch (event.inputType) {
case "deleteWordBackward":
{
const match = value.substring(0, selectionStart).match(/\w*[^\w]*$/);
if (match) {
selStart -= match[0].length;
}
break;
}
case "deleteWordForward":
{
const match = value.substring(selectionStart).match(/^[^\w]*\w*/);
if (match) {
selEnd += match[0].length;
}
break;
}
case "deleteContentBackward":
if (selectionStart === selectionEnd) {
selStart -= 1;
}
break;
case "deleteContentForward":
if (selectionStart === selectionEnd) {
selEnd += 1;
}
break;
}
event.preventDefault();
this.linkService.eventBus?.dispatch("dispatcheventinsandbox", {
source: this,
detail: {
id,
name: "Keystroke",
value,
change: data || "",
willCommit: false,
selStart,
selEnd
}
});
});
}
this._setEventListeners(element, [["focus", "Focus"], ["blur", "Blur"], ["mousedown", "Mouse Down"], ["mouseenter", "Mouse Enter"], ["mouseleave", "Mouse Exit"], ["mouseup", "Mouse Up"]], event => event.target.value);
}
if (blurListener) {
element.addEventListener("blur", blurListener);
}
if (this.data.comb) {
const fieldWidth = this.data.rect[2] - this.data.rect[0];
const combWidth = fieldWidth / maxLen;
element.classList.add("comb");
element.style.letterSpacing = `calc(${combWidth}px * var(--scale-factor) - 1ch)`;
}
} else {
element = document.createElement("div");
element.textContent = this.data.fieldValue;
element.style.verticalAlign = "middle";
element.style.display = "table-cell";
}
this._setTextStyle(element);
this._setBackgroundColor(element);
this._setDefaultPropertiesFromJS(element);
this.container.append(element);
return this.container;
}
}
class CheckboxWidgetAnnotationElement extends WidgetAnnotationElement {
constructor(parameters) {
super(parameters, {
isRenderable: parameters.renderForms
});
}
render() {
const storage = this.annotationStorage;
const data = this.data;
const id = data.id;
let value = storage.getValue(id, {
value: data.exportValue === data.fieldValue
}).value;
if (typeof value === "string") {
value = value !== "Off";
storage.setValue(id, {
value
});
}
this.container.className = "buttonWidgetAnnotation checkBox";
const element = document.createElement("input");
GetElementsByNameSet.add(element);
element.setAttribute("data-element-id", id);
element.disabled = data.readOnly;
this._setRequired(element, this.data.required);
element.type = "checkbox";
element.name = data.fieldName;
if (value) {
element.setAttribute("checked", true);
}
element.setAttribute("exportValue", data.exportValue);
element.tabIndex = DEFAULT_TAB_INDEX;
element.addEventListener("change", event => {
const {
name,
checked
} = event.target;
for (const checkbox of this._getElementsByName(name, id)) {
const curChecked = checked && checkbox.exportValue === data.exportValue;
if (checkbox.domElement) {
checkbox.domElement.checked = curChecked;
}
storage.setValue(checkbox.id, {
value: curChecked
});
}
storage.setValue(id, {
value: checked
});
});
element.addEventListener("resetform", event => {
const defaultValue = data.defaultFieldValue || "Off";
event.target.checked = defaultValue === data.exportValue;
});
if (this.enableScripting && this.hasJSActions) {
element.addEventListener("updatefromsandbox", jsEvent => {
const actions = {
value(event) {
event.target.checked = event.detail.value !== "Off";
storage.setValue(id, {
value: event.target.checked
});
}
};
this._dispatchEventFromSandbox(actions, jsEvent);
});
this._setEventListeners(element, [["change", "Validate"], ["change", "Action"], ["focus", "Focus"], ["blur", "Blur"], ["mousedown", "Mouse Down"], ["mouseenter", "Mouse Enter"], ["mouseleave", "Mouse Exit"], ["mouseup", "Mouse Up"]], event => event.target.checked);
}
this._setBackgroundColor(element);
this._setDefaultPropertiesFromJS(element);
this.container.append(element);
return this.container;
}
}
class RadioButtonWidgetAnnotationElement extends WidgetAnnotationElement {
constructor(parameters) {
super(parameters, {
isRenderable: parameters.renderForms
});
}
render() {
this.container.className = "buttonWidgetAnnotation radioButton";
const storage = this.annotationStorage;
const data = this.data;
const id = data.id;
let value = storage.getValue(id, {
value: data.fieldValue === data.buttonValue
}).value;
if (typeof value === "string") {
value = value !== data.buttonValue;
storage.setValue(id, {
value
});
}
const element = document.createElement("input");
GetElementsByNameSet.add(element);
element.setAttribute("data-element-id", id);
element.disabled = data.readOnly;
this._setRequired(element, this.data.required);
element.type = "radio";
element.name = data.fieldName;
if (value) {
element.setAttribute("checked", true);
}
element.tabIndex = DEFAULT_TAB_INDEX;
element.addEventListener("change", event => {
const {
name,
checked
} = event.target;
for (const radio of this._getElementsByName(name, id)) {
storage.setValue(radio.id, {
value: false
});
}
storage.setValue(id, {
value: checked
});
});
element.addEventListener("resetform", event => {
const defaultValue = data.defaultFieldValue;
event.target.checked = defaultValue !== null && defaultValue !== undefined && defaultValue === data.buttonValue;
});
if (this.enableScripting && this.hasJSActions) {
const pdfButtonValue = data.buttonValue;
element.addEventListener("updatefromsandbox", jsEvent => {
const actions = {
value: event => {
const checked = pdfButtonValue === event.detail.value;
for (const radio of this._getElementsByName(event.target.name)) {
const curChecked = checked && radio.id === id;
if (radio.domElement) {
radio.domElement.checked = curChecked;
}
storage.setValue(radio.id, {
value: curChecked
});
}
}
};
this._dispatchEventFromSandbox(actions, jsEvent);
});
this._setEventListeners(element, [["change", "Validate"], ["change", "Action"], ["focus", "Focus"], ["blur", "Blur"], ["mousedown", "Mouse Down"], ["mouseenter", "Mouse Enter"], ["mouseleave", "Mouse Exit"], ["mouseup", "Mouse Up"]], event => event.target.checked);
}
this._setBackgroundColor(element);
this._setDefaultPropertiesFromJS(element);
this.container.append(element);
return this.container;
}
}
class PushButtonWidgetAnnotationElement extends LinkAnnotationElement {
constructor(parameters) {
super(parameters, {
ignoreBorder: parameters.data.hasAppearance
});
}
render() {
const container = super.render();
container.className = "buttonWidgetAnnotation pushButton";
if (this.data.alternativeText) {
container.title = this.data.alternativeText;
}
const linkElement = container.lastChild;
if (this.enableScripting && this.hasJSActions && linkElement) {
this._setDefaultPropertiesFromJS(linkElement);
linkElement.addEventListener("updatefromsandbox", jsEvent => {
this._dispatchEventFromSandbox({}, jsEvent);
});
}
return container;
}
}
class ChoiceWidgetAnnotationElement extends WidgetAnnotationElement {
constructor(parameters) {
super(parameters, {
isRenderable: parameters.renderForms
});
}
render() {
this.container.className = "choiceWidgetAnnotation";
const storage = this.annotationStorage;
const id = this.data.id;
const storedData = storage.getValue(id, {
value: this.data.fieldValue
});
const selectElement = document.createElement("select");
GetElementsByNameSet.add(selectElement);
selectElement.setAttribute("data-element-id", id);
selectElement.disabled = this.data.readOnly;
this._setRequired(selectElement, this.data.required);
selectElement.name = this.data.fieldName;
selectElement.tabIndex = DEFAULT_TAB_INDEX;
let addAnEmptyEntry = this.data.combo && this.data.options.length > 0;
if (!this.data.combo) {
selectElement.size = this.data.options.length;
if (this.data.multiSelect) {
selectElement.multiple = true;
}
}
selectElement.addEventListener("resetform", event => {
const defaultValue = this.data.defaultFieldValue;
for (const option of selectElement.options) {
option.selected = option.value === defaultValue;
}
});
for (const option of this.data.options) {
const optionElement = document.createElement("option");
optionElement.textContent = option.displayValue;
optionElement.value = option.exportValue;
if (storedData.value.includes(option.exportValue)) {
optionElement.setAttribute("selected", true);
addAnEmptyEntry = false;
}
selectElement.append(optionElement);
}
let removeEmptyEntry = null;
if (addAnEmptyEntry) {
const noneOptionElement = document.createElement("option");
noneOptionElement.value = " ";
noneOptionElement.setAttribute("hidden", true);
noneOptionElement.setAttribute("selected", true);
selectElement.prepend(noneOptionElement);
removeEmptyEntry = () => {
noneOptionElement.remove();
selectElement.removeEventListener("input", removeEmptyEntry);
removeEmptyEntry = null;
};
selectElement.addEventListener("input", removeEmptyEntry);
}
const getValue = (event, isExport) => {
const name = isExport ? "value" : "textContent";
const options = event.target.options;
if (!event.target.multiple) {
return options.selectedIndex === -1 ? null : options[options.selectedIndex][name];
}
return Array.prototype.filter.call(options, option => option.selected).map(option => option[name]);
};
const getItems = event => {
const options = event.target.options;
return Array.prototype.map.call(options, option => {
return {
displayValue: option.textContent,
exportValue: option.value
};
});
};
if (this.enableScripting && this.hasJSActions) {
selectElement.addEventListener("updatefromsandbox", jsEvent => {
const actions = {
value(event) {
removeEmptyEntry?.();
const value = event.detail.value;
const values = new Set(Array.isArray(value) ? value : [value]);
for (const option of selectElement.options) {
option.selected = values.has(option.value);
}
storage.setValue(id, {
value: getValue(event, true)
});
},
multipleSelection(event) {
selectElement.multiple = true;
},
remove(event) {
const options = selectElement.options;
const index = event.detail.remove;
options[index].selected = false;
selectElement.remove(index);
if (options.length > 0) {
const i = Array.prototype.findIndex.call(options, option => option.selected);
if (i === -1) {
options[0].selected = true;
}
}
storage.setValue(id, {
value: getValue(event, true),
items: getItems(event)
});
},
clear(event) {
while (selectElement.length !== 0) {
selectElement.remove(0);
}
storage.setValue(id, {
value: null,
items: []
});
},
insert(event) {
const {
index,
displayValue,
exportValue
} = event.detail.insert;
const selectChild = selectElement.children[index];
const optionElement = document.createElement("option");
optionElement.textContent = displayValue;
optionElement.value = exportValue;
if (selectChild) {
selectChild.before(optionElement);
} else {
selectElement.append(optionElement);
}
storage.setValue(id, {
value: getValue(event, true),
items: getItems(event)
});
},
items(event) {
const {
items
} = event.detail;
while (selectElement.length !== 0) {
selectElement.remove(0);
}
for (const item of items) {
const {
displayValue,
exportValue
} = item;
const optionElement = document.createElement("option");
optionElement.textContent = displayValue;
optionElement.value = exportValue;
selectElement.append(optionElement);
}
if (selectElement.options.length > 0) {
selectElement.options[0].selected = true;
}
storage.setValue(id, {
value: getValue(event, true),
items: getItems(event)
});
},
indices(event) {
const indices = new Set(event.detail.indices);
for (const option of event.target.options) {
option.selected = indices.has(option.index);
}
storage.setValue(id, {
value: getValue(event, true)
});
},
editable(event) {
event.target.disabled = !event.detail.editable;
}
};
this._dispatchEventFromSandbox(actions, jsEvent);
});
selectElement.addEventListener("input", event => {
const exportValue = getValue(event, true);
const value = getValue(event, false);
storage.setValue(id, {
value: exportValue
});
this.linkService.eventBus?.dispatch("dispatcheventinsandbox", {
source: this,
detail: {
id,
name: "Keystroke",
value,
changeEx: exportValue,
willCommit: true,
commitKey: 1,
keyDown: false
}
});
});
this._setEventListeners(selectElement, [["focus", "Focus"], ["blur", "Blur"], ["mousedown", "Mouse Down"], ["mouseenter", "Mouse Enter"], ["mouseleave", "Mouse Exit"], ["mouseup", "Mouse Up"], ["input", "Action"]], event => event.target.checked);
} else {
selectElement.addEventListener("input", function (event) {
storage.setValue(id, {
value: getValue(event, true)
});
});
}
if (this.data.combo) {
this._setTextStyle(selectElement);
} else {}
this._setBackgroundColor(selectElement);
this._setDefaultPropertiesFromJS(selectElement);
this.container.append(selectElement);
return this.container;
}
}
class PopupAnnotationElement extends AnnotationElement {
static IGNORE_TYPES = new Set(["Line", "Square", "Circle", "PolyLine", "Polygon", "Ink"]);
constructor(parameters) {
const {
data
} = parameters;
const isRenderable = !PopupAnnotationElement.IGNORE_TYPES.has(data.parentType) && !!(data.titleObj?.str || data.contentsObj?.str || data.richText?.str);
super(parameters, {
isRenderable
});
}
render() {
this.container.className = "popupAnnotation";
const parentElements = this.layer.querySelectorAll(`[data-annotation-id="${this.data.parentId}"]`);
if (parentElements.length === 0) {
return this.container;
}
const popup = new PopupElement({
container: this.container,
trigger: Array.from(parentElements),
color: this.data.color,
titleObj: this.data.titleObj,
modificationDate: this.data.modificationDate,
contentsObj: this.data.contentsObj,
richText: this.data.richText
});
const page = this.page;
const rect = _util.Util.normalizeRect([this.data.parentRect[0], page.view[3] - this.data.parentRect[1] + page.view[1], this.data.parentRect[2], page.