@syncfusion/ej2-pdfviewer
Version:
Essential JS 2 PDF viewer Component
923 lines • 513 kB
JavaScript
import { Browser, createElement, initializeCSPTemplate } from '@syncfusion/ej2-base';
import { cornersPointsBeforeRotation, Rect, splitArrayCollection, processPathData, randomId } from '@syncfusion/ej2-drawings';
import { PdfViewerBase } from '../index';
import { isNullOrUndefined, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
import { Dialog, Tooltip } from '@syncfusion/ej2-popups';
import { Tab } from '@syncfusion/ej2-navigations';
import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
import { ColorPicker, Slider, TextBox, NumericTextBox } from '@syncfusion/ej2-inputs';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { Button, CheckBox } from '@syncfusion/ej2-buttons';
import { DisplayMode, FontStyle } from '../base/types';
import { cloneObject } from '../drawing/drawing-util';
import { PdfBitmap } from '@syncfusion/ej2-pdf';
import { PdfViewerUtils } from '../base/pdfviewer-utlis';
/**
* The `FormDesigner` module is used to handle form designer actions of PDF viewer.
*/
var FormDesigner = /** @class */ (function () {
/**
* @param {PdfViewer} viewer - It describes about the viewer
* @param {PdfViewerBase} base - It describes about the base
* @private
*/
function FormDesigner(viewer, base) {
this.formFieldTooltips = [];
this.isFormFieldExistingInCollection = false;
this.multilineCheckboxCheckedState = false;
this.formFieldListItemCollection = [];
this.formFieldListItemDataSource = [];
this.isInitialField = false;
this.isSetFormFieldMode = false;
this.isAddFormFieldProgrammatically = false;
this.isAddFormFieldUi = false;
this.increasedSize = 5;
this.defaultZoomValue = 1;
this.defaultFontSize = 10;
this.signIndicatorPadding = 3;
this.signIndicatorMinimunFontSize = 1;
this.signatureFieldPropertyChanged = {
isReadOnlyChanged: false,
isRequiredChanged: false,
isVisibilityChanged: false,
isNameChanged: false,
isPrintChanged: false,
isTooltipChanged: false,
isThicknessChanged: false
};
this.initialFieldPropertyChanged = {
isReadOnlyChanged: false,
isRequiredChanged: false,
isVisibilityChanged: false,
isNameChanged: false,
isPrintChanged: false,
isTooltipChanged: false,
isThicknessChanged: false
};
this.textFieldPropertyChanged = {
isReadOnlyChanged: false,
isRequiredChanged: false,
isBackgroundColorChanged: false,
isBorderColorChanged: false,
isAlignmentChanged: false,
isFontSizeChanged: false,
isNameChanged: false,
isToolTipChanged: false,
isThicknessChanged: false,
isVisibilityChanged: false,
isPrintChanged: false,
isSelected: false,
isFontFamilyChanged: false,
isFontStyle: false,
isValueChanged: false,
isMaXLength: false,
isColorChanged: false,
isMultilineChanged: false
};
this.passwordFieldPropertyChanged = {
isReadOnlyChanged: false,
isRequiredChanged: false,
isBackgroundColorChanged: false,
isBorderColorChanged: false,
isAlignmentChanged: false,
isFontSizeChanged: false,
isNameChanged: false,
isToolTipChanged: false,
isThicknessChanged: false,
isVisibilityChanged: false,
isPrintChanged: false,
isSelected: false,
isFontFamilyChanged: false,
isFontStyle: false,
isValueChanged: false,
isMaXLength: false,
isColorChanged: false
};
this.checkBoxFieldPropertyChanged = {
isReadOnlyChanged: false,
isRequiredChanged: false,
isBackgroundColorChanged: false,
isBorderColorChanged: false,
isNameChanged: false,
isToolTipChanged: false,
isThicknessChanged: false,
isVisibilityChanged: false,
isPrintChanged: false,
isCheckedChanged: false,
isValueChanged: false
};
this.radioButtonFieldPropertyChanged = {
isReadOnlyChanged: false,
isRequiredChanged: false,
isBackgroundColorChanged: false,
isBorderColorChanged: false,
isNameChanged: false,
isToolTipChanged: false,
isThicknessChanged: false,
isVisibilityChanged: false,
isPrintChanged: false,
isSelectedChanged: false,
isValueChanged: false
};
this.dropdownFieldPropertyChanged = {
isReadOnlyChanged: false,
isRequiredChanged: false,
isBackgroundColorChanged: false,
isBorderColorChanged: false,
isAlignmentChanged: false,
isFontSizeChanged: false,
isNameChanged: false,
isToolTipChanged: false,
isThicknessChanged: false,
isVisibilityChanged: false,
isPrintChanged: false,
isSelected: false,
isFontFamilyChanged: false,
isFontStyle: false,
isColorChanged: false,
isOptionChanged: false
};
this.listBoxFieldPropertyChanged = {
isReadOnlyChanged: false,
isRequiredChanged: false,
isBackgroundColorChanged: false,
isBorderColorChanged: false,
isAlignmentChanged: false,
isFontSizeChanged: false,
isNameChanged: false,
isToolTipChanged: false,
isThicknessChanged: false,
isVisibilityChanged: false,
isPrintChanged: false,
isSelected: false,
isFontFamilyChanged: false,
isFontStyle: false,
isColorChanged: false,
isOptionChanged: false
};
/**
* @private
*/
this.disableSignatureClickEvent = false;
/**
* @private
*/
this.formFieldIndex = 0;
/**
* @private
*/
this.formFieldIdIndex = 0;
/**
* @private
*/
this.isProgrammaticSelection = false;
/**
* @private
*/
this.isShapeCopied = false;
/**
* @private
*/
this.isFormFieldSizeUpdated = false;
this.isDrawHelper = false;
this.isFormFieldUpdated = false;
/**
* @private
*/
this.isPropertyDialogOpen = false;
this.pdfViewer = viewer;
this.pdfViewerBase = base;
}
/**
* @param {string} formFieldAnnotationType - It describes about the form field annotation type
* @param {PdfFormFieldBaseModel} obj - It describes about the object
* @param {Event} event - It describes about the event
* @private
* @returns {void}
*/
FormDesigner.prototype.drawHelper = function (formFieldAnnotationType, obj, event) {
var textLayer = document.getElementById(this.pdfViewer.element.id + '_textLayer_' + this.pdfViewerBase.activeElements.activePageID);
var canvasElement = document.getElementById(this.pdfViewer.element.id + '_pageCanvas_' + this.pdfViewerBase.activeElements.activePageID);
if (canvasElement !== null && textLayer !== null) {
var zoomValue = this.pdfViewerBase.getZoomFactor();
var HtmlElementAttribute = {
'id': 'FormField_helper_html_element',
'class': 'foreign-object'
};
var bounds = this.updateFormFieldInitialSize(obj, formFieldAnnotationType);
var htmlElement = this.createHtmlElement('div', HtmlElementAttribute);
this.isDrawHelper = true;
if (formFieldAnnotationType === 'SignatureField' || formFieldAnnotationType === 'InitialField') {
htmlElement.appendChild(this.createSignatureDialog(this.pdfViewer, obj, bounds));
}
else if (formFieldAnnotationType === 'DropdownList') {
var element = { id: 'dropdown_helper' };
htmlElement.appendChild(this.createDropDownList(element, obj));
}
else if (formFieldAnnotationType === 'ListBox') {
var element = { id: 'listbox_helper' };
htmlElement.appendChild(this.createListBox(element, obj));
}
else {
htmlElement.appendChild(this.createInputElement(formFieldAnnotationType, obj, bounds));
}
textLayer.appendChild(htmlElement);
var point = this.pdfViewerBase.getMousePosition(event);
htmlElement.setAttribute('style', 'height:' + bounds.height * zoomValue + 'px; width:' + bounds.width * zoomValue + 'px;left:' + point.x * zoomValue + 'px; top:' + point.y * zoomValue + 'px;' +
'position:absolute;opacity: 0.5;');
}
};
/**
* @param {string} formFieldAnnotationType - It describes about the form field annotation type
* @param {DiagramHtmlElement} element - It describes about the diagram html element
* @param {PdfFormFieldBaseModel} drawingObject - It describes about the drawing object
* @param {number} pageIndex - It describes about the page index
* @param {PdfViewer} commandHandler - It describes about the command handler
* @param {string} fieldId - It describes about the field id
* @param {boolean} isAddedProgrammatically - It describes about the isAddedProgrammatically
* @private
* @returns {HTMLElement} - html element
*/
FormDesigner.prototype.drawHTMLContent = function (formFieldAnnotationType, element, drawingObject, pageIndex, commandHandler, fieldId, isAddedProgrammatically) {
var textLayer = document.getElementById(this.pdfViewer.element.id + '_textLayer_' + pageIndex);
var canvasElement = document.getElementById(this.pdfViewer.element.id + '_pageCanvas_' + pageIndex);
var formFieldElement = document.getElementById('form_field_' + element.id + '_html_element');
if (formFieldElement === null && element !== null && canvasElement !== null && textLayer) {
var zoomValue = this.pdfViewerBase.getZoomFactor();
var parentHtmlElementAttribute = {
'id': 'form_field_' + element.id + '_html_element',
'class': 'foreign-object'
};
var parentHtmlElement = this.createHtmlElement('div', parentHtmlElementAttribute);
var HtmlElementAttribute = {
'id': element.id + '_html_element',
'class': 'foreign-object'
};
var htmlElement = this.createHtmlElement('div', HtmlElementAttribute);
if (drawingObject.fontFamily === 'TimesRoman') {
drawingObject.fontFamily = 'Times New Roman';
}
if (formFieldAnnotationType === 'SignatureField' || formFieldAnnotationType === 'InitialField') {
element.template = htmlElement.appendChild(this.createSignatureDialog(commandHandler, drawingObject));
}
else if (formFieldAnnotationType === 'DropdownList') {
element.template = htmlElement.appendChild(this.createDropDownList(element, drawingObject));
}
else if (formFieldAnnotationType === 'ListBox') {
element.template = htmlElement.appendChild(this.createListBox(element, drawingObject));
}
else {
element.template = htmlElement.appendChild(this.createInputElement(formFieldAnnotationType, drawingObject));
}
var divElement = document.createElement('div');
divElement.id = drawingObject.id + '_designer_name';
divElement.style.fontSize = this.defaultFontSize + 'px';
divElement.className = 'e-pv-show-designer-name';
if (this.pdfViewer.designerMode) {
divElement.innerHTML = drawingObject.name;
divElement.style.position = 'absolute';
}
else {
divElement.innerHTML = '';
divElement.style.position = 'initial';
}
if (formFieldAnnotationType === 'Checkbox' && (Browser.isDevice)) {
//Creating outer div for checkbox in mobile device
var bounds = drawingObject.bounds;
var outerDivHeight = bounds.height + this.increasedSize;
var outerDivWidth = bounds.width + this.increasedSize;
var outerDivAttribute = {
'id': drawingObject.id + '_outer_div',
'className': 'e-pv-checkbox-outer-div'
};
var outerDiv = createElement('div', outerDivAttribute);
outerDiv.setAttribute('style', 'height:' + outerDivHeight * zoomValue + 'px; width:' + outerDivWidth * zoomValue + 'px;left:' + bounds.x * zoomValue + 'px; top:' + bounds.y * zoomValue + 'px;' +
'position:absolute; opacity: 1;');
htmlElement.appendChild(divElement);
outerDiv.addEventListener('click', this.setCheckBoxState.bind(this));
parentHtmlElement.appendChild(htmlElement);
textLayer.appendChild(outerDiv);
outerDiv.appendChild(parentHtmlElement);
}
else {
htmlElement.appendChild(divElement);
parentHtmlElement.appendChild(htmlElement);
textLayer.appendChild(parentHtmlElement);
}
if (formFieldAnnotationType === 'RadioButton') {
if (document.getElementsByClassName('e-pv-radiobtn-span').length > 0) {
var spanElement = document.getElementsByClassName('e-pv-radiobtn-span');
for (var i = 0; i < spanElement.length; i++) {
if (spanElement[parseInt(i.toString(), 10)].id.split('_')[0] === drawingObject.id) {
var bounds = this.getCheckboxRadioButtonBounds(drawingObject);
spanElement[parseInt(i.toString(), 10)].style.width = (bounds.width / 2) + 'px';
spanElement[parseInt(i.toString(), 10)].style.height = (bounds.height / 2) + 'px';
if (parseInt(spanElement[parseInt(i.toString(), 10)].style.width, 10) <= 1 ||
parseInt(spanElement[parseInt(i.toString(), 10)].style.height, 10) <= 1) {
spanElement[parseInt(i.toString(), 10)].style.width = '1px';
spanElement[parseInt(i.toString(), 10)].style.height = '1px';
spanElement[parseInt(i.toString(), 10)].style.margin = '1px';
}
}
}
}
}
var point = cornersPointsBeforeRotation(element).topLeft;
if (formFieldAnnotationType === 'Checkbox' && (Browser.isDevice)) {
htmlElement.setAttribute('style', 'height:' + (element.actualSize.height * zoomValue) + 'px; width:' + (element.actualSize.width * zoomValue) +
'px;left:' + point.x * zoomValue + 'px; top:' + point.y * zoomValue + 'px;' +
'transform:rotate(' + (element.rotateAngle + element.parentTransform) + 'deg);' +
'pointer-events:' + ((this.pdfViewer.designerMode) ? 'none' : 'all')
+ ';visibility:' + ((element.visible) ? 'visible' : 'hidden') + ';opacity:' + element.style.opacity + ';');
}
else {
htmlElement.setAttribute('style', 'height:' + (element.actualSize.height * zoomValue) + 'px; width:' + (element.actualSize.width * zoomValue) +
'px;left:' + point.x * zoomValue + 'px; top:' + point.y * zoomValue + 'px;' +
'position:absolute;transform:rotate(' + (element.rotateAngle + element.parentTransform) + 'deg);' +
'pointer-events:' + ((this.pdfViewer.designerMode) ? 'none' : 'all')
+ ';visibility:' + ((element.visible) ? 'visible' : 'hidden') + ';opacity:' + element.style.opacity + ';');
}
this.updateFormDesignerFieldInSessionStorage(point, element, formFieldAnnotationType, drawingObject);
if (formFieldAnnotationType === 'SignatureField' || formFieldAnnotationType === 'InitialField') {
if (drawingObject.value) {
var elementId = this.pdfViewer.drawing.copiedElementID + '_content';
if (!isNullOrUndefined(this.pdfViewer.nameTable["" + elementId])) {
var value = this.pdfViewer.nameTable["" + elementId].value;
var signatureType = (value.indexOf('base64')) > -1 ? 'Image' : ((value.startsWith('M') && value.split(',')[1].split(' ')[1].startsWith('L')) ? 'Path' : 'Type');
if (this.pdfViewer.formFieldsModule) {
this.pdfViewer.formFieldsModule.drawSignature(signatureType, value, element.template, drawingObject.fontFamily);
}
}
}
}
var field = this.getFormFieldAddEventArgs(drawingObject);
if (!this.pdfViewer.isFormFieldsLoaded || isAddedProgrammatically) {
this.pdfViewerBase.updateDocumentEditedProperty(true);
}
if (this.isSetFormFieldMode || isAddedProgrammatically) {
var pageIndex_1 = this.pdfViewerBase.activeElements.activePageID ?
this.pdfViewerBase.activeElements.activePageID : field.pageNumber - 1;
this.pdfViewer.fireFormFieldAddEvent('formFieldAdd', field, pageIndex_1);
}
this.isSetFormFieldMode = false;
}
else {
var point = cornersPointsBeforeRotation(element).topLeft;
this.updateFormDesignerFieldInSessionStorage(point, element, formFieldAnnotationType, drawingObject);
if (isAddedProgrammatically) {
var field = this.getFormFieldAddEventArgs(drawingObject);
this.pdfViewer.fireFormFieldAddEvent('formFieldAdd', field, pageIndex);
}
}
return element.template;
};
FormDesigner.prototype.getFormFieldAddEventArgs = function (drawingObject) {
var field = {
name: drawingObject.name, id: drawingObject.id, value: drawingObject.value, fontFamily: drawingObject.fontFamily,
fontSize: drawingObject.fontSize, fontStyle: drawingObject.fontStyle,
color: drawingObject.color, backgroundColor: drawingObject.backgroundColor, alignment: drawingObject.alignment,
isReadonly: drawingObject.isReadonly, visibility: drawingObject.visibility,
maxLength: drawingObject.maxLength, isRequired: drawingObject.isRequired, isPrint: drawingObject.isPrint,
rotation: drawingObject.rotateAngle, tooltip: drawingObject.tooltip,
borderColor: drawingObject.borderColor, thickness: drawingObject.thickness, options: drawingObject.options,
pageNumber: drawingObject.pageNumber, isChecked: drawingObject.isChecked,
isSelected: drawingObject.isSelected, customData: drawingObject.customData, bounds: drawingObject.bounds,
formFieldAnnotationType: drawingObject.formFieldAnnotationType, isMultiline: drawingObject.isMultiline,
insertSpaces: drawingObject.insertSpaces
};
return field;
};
/**
* @param {PointModel} point - It describes about the point
* @param {DiagramHtmlElement} element - It describes about the element
* @param {string} formFieldType - It describes about the form field type
* @param {PdfFormFieldBaseModel} drawingObject - It describes about the drawing object
* @private
* @returns {void}
*/
FormDesigner.prototype.updateFormDesignerFieldInSessionStorage = function (point, element, formFieldType, drawingObject) {
var zoomValue = this.pdfViewerBase.getZoomFactor();
var formDesignObj = {
id: element.id, lineBound: { X: point.x * zoomValue, Y: point.y * zoomValue, Width: element.actualSize.width * zoomValue,
Height: element.actualSize.height * zoomValue },
name: drawingObject.name, zoomValue: zoomValue, pageNumber: drawingObject.pageNumber, value: drawingObject.value,
formFieldAnnotationType: formFieldType, isMultiline: drawingObject.isMultiline,
signatureType: drawingObject.signatureType, signatureBound: drawingObject.signatureBound,
fontFamily: drawingObject.fontFamily, fontSize: drawingObject.fontSize, fontStyle: drawingObject.fontStyle,
fontColor: this.getRgbCode(drawingObject.color),
borderColor: this.getRgbCode(drawingObject.borderColor), thickness: drawingObject.thickness,
backgroundColor: this.getRgbCode(drawingObject.backgroundColor),
textAlign: drawingObject.alignment, isChecked: drawingObject.isChecked, isSelected: drawingObject.isSelected,
isReadonly: drawingObject.isReadonly, font: {
isBold: drawingObject.font.isBold, isItalic: drawingObject.font.isItalic, isStrikeout: drawingObject.font.isStrikeout,
isUnderline: drawingObject.font.isUnderline
}, selectedIndex: drawingObject.selectedIndex, radiobuttonItem: null,
option: drawingObject.options ? drawingObject.options : [], visibility: drawingObject.visibility,
maxLength: drawingObject.maxLength, isRequired: drawingObject.isRequired, isPrint: drawingObject.isPrint,
rotation: drawingObject.rotateAngle, tooltip: drawingObject.tooltip,
insertSpaces: drawingObject.insertSpaces, customData: drawingObject.customData
};
if (formDesignObj.formFieldAnnotationType === 'RadioButton') {
formDesignObj.radiobuttonItem = [];
formDesignObj.radiobuttonItem.push({
id: element.id, lineBound: { X: point.x * zoomValue, Y: point.y * zoomValue,
Width: element.actualSize.width * zoomValue, Height: element.actualSize.height * zoomValue },
name: drawingObject.name, zoomValue: zoomValue, pageNumber: drawingObject.pageNumber,
value: drawingObject.value, formFieldAnnotationType: formFieldType,
fontFamily: drawingObject.fontFamily, fontSize: drawingObject.fontSize, fontStyle: drawingObject.fontStyle,
fontColor: this.getRgbCode(drawingObject.color),
borderColor: this.getRgbCode(drawingObject.borderColor), thickness: drawingObject.thickness,
backgroundColor: this.getRgbCode(drawingObject.backgroundColor),
textAlign: drawingObject.alignment, isChecked: drawingObject.isChecked, isSelected: drawingObject.isSelected,
isReadonly: drawingObject.isReadonly, visibility: drawingObject.visibility,
maxLength: drawingObject.maxLength, isRequired: drawingObject.isRequired, isPrint: drawingObject.isPrint,
rotation: 0, tooltip: drawingObject.tooltip
});
}
var isItemAdd = this.getRadioButtonItem(formDesignObj, drawingObject);
if (!isItemAdd) {
for (var i = 0; i < this.pdfViewerBase.formFieldCollection.length; i++) {
var formFieldElement = this.pdfViewerBase.formFieldCollection[parseInt(i.toString(), 10)];
if (formFieldElement['Key'] === formDesignObj.id) {
this.pdfViewerBase.formFieldCollection.splice(i, 1);
this.pdfViewerBase.formFieldCollection.push({ Key: element.id, FormField: formDesignObj });
this.isFormFieldExistingInCollection = true;
}
}
if (!this.isFormFieldExistingInCollection) {
this.pdfViewerBase.formFieldCollection.push({ Key: element.id, FormField: formDesignObj });
}
this.pdfViewerBase.setItemInSessionStorage(this.pdfViewerBase.formFieldCollection, '_formDesigner');
this.isFormFieldExistingInCollection = false;
if (this.pdfViewerBase.formFieldCollection.length > 0) {
this.pdfViewerBase.enableFormFieldButton(true);
}
else {
this.pdfViewerBase.enableFormFieldButton(false);
}
}
};
FormDesigner.prototype.getRadioButtonItem = function (radiobutton, formFieldProperty) {
var data = this.pdfViewerBase.getItemFromSessionStorage('_formDesigner');
var isItemAdd = false;
if (data) {
var formFieldsData = JSON.parse(data);
for (var i = 0; i < formFieldsData.length; i++) {
var currentData = formFieldsData[parseInt(i.toString(), 10)];
var radiobuttonItem = void 0;
if (radiobutton.formFieldAnnotationType === 'RadioButton') {
if (radiobutton.radiobuttonItem && currentData.FormField.radiobuttonItem) {
for (var m = 0; m < currentData.FormField.radiobuttonItem.length; m++) {
if (currentData.FormField.radiobuttonItem[parseInt(m.toString(), 10)].id === radiobutton.id) {
radiobuttonItem = {
lineBound: radiobutton.lineBound, id: radiobutton.id,
name: radiobutton.name, zoomValue: radiobutton.zoomValue, pageNumber: radiobutton.pageNumber,
value: radiobutton.value, formFieldAnnotationType: radiobutton.formFieldAnnotationType,
fontFamily: radiobutton.fontFamily, fontSize: radiobutton.fontSize,
fontStyle: radiobutton.fontStyle, fontColor: this.getRgbCode(formFieldProperty.color),
borderColor: this.getRgbCode(formFieldProperty.borderColor),
thickness: formFieldProperty.thickness,
backgroundColor: this.getRgbCode(formFieldProperty.backgroundColor),
textAlign: radiobutton.textAlign, isChecked: radiobutton.isChecked,
isSelected: radiobutton.isSelected,
isReadonly: radiobutton.isReadonly, visibility: radiobutton.visibility,
maxLength: radiobutton.maxLength, isRequired: radiobutton.isRequired, isPrint: radiobutton.isPrint,
rotation: 0, tooltip: radiobutton.tooltip
};
currentData.FormField.radiobuttonItem.splice(m, 1);
currentData.FormField.radiobuttonItem.push(radiobuttonItem);
if (!isNullOrUndefined(this.pdfViewerBase.formFieldCollection[parseInt(i.toString(), 10)])) {
if (this.pdfViewerBase.formFieldCollection[parseInt(i.toString(), 10)].FormField.name ===
currentData.FormField.name) {
this.pdfViewerBase.formFieldCollection[parseInt(i.toString(), 10)].FormField.radiobuttonItem =
currentData.FormField.radiobuttonItem;
isItemAdd = true;
}
}
break;
}
else {
if (radiobutton.formFieldAnnotationType === currentData.FormField.formFieldAnnotationType &&
radiobutton.name === currentData.FormField.name) {
radiobuttonItem = {
lineBound: radiobutton.lineBound, id: radiobutton.id,
name: radiobutton.name, zoomValue: radiobutton.zoomValue, pageNumber: radiobutton.pageNumber,
value: radiobutton.value, formFieldAnnotationType: radiobutton.formFieldAnnotationType,
fontFamily: radiobutton.fontFamily, fontSize: radiobutton.fontSize,
fontStyle: radiobutton.fontStyle, fontColor: this.getRgbCode(formFieldProperty.color),
borderColor: this.getRgbCode(formFieldProperty.borderColor),
thickness: formFieldProperty.thickness,
backgroundColor: this.getRgbCode(formFieldProperty.backgroundColor),
textAlign: radiobutton.textAlign, isChecked: radiobutton.isChecked,
isSelected: radiobutton.isSelected,
isReadonly: radiobutton.isReadonly, visibility: radiobutton.visibility,
maxLength: radiobutton.maxLength, isRequired: radiobutton.isRequired,
isPrint: radiobutton.isPrint, rotation: 0, tooltip: radiobutton.tooltip
};
var isContainsRadiobuttonItem = false;
for (var i_1 = 0; i_1 < currentData.FormField.radiobuttonItem.length; i_1++) {
if (currentData.FormField.radiobuttonItem[parseInt(i_1.toString(), 10)].id === radiobuttonItem.id) {
currentData.FormField.radiobuttonItem[parseInt(i_1.toString(), 10)] = radiobuttonItem;
isContainsRadiobuttonItem = true;
break;
}
}
if (!isContainsRadiobuttonItem) {
currentData.FormField.radiobuttonItem.push(radiobuttonItem);
}
if (!isNullOrUndefined(this.pdfViewerBase.formFieldCollection[parseInt(i.toString(), 10)])) {
this.pdfViewerBase.formFieldCollection[parseInt(i.toString(), 10)].FormField.radiobuttonItem =
currentData.FormField.radiobuttonItem;
isItemAdd = true;
for (var l = 0; l < this.pdfViewerBase.formFieldCollection.length; l++) {
var formFieldElement = this.pdfViewerBase.formFieldCollection[parseInt(l.toString(), 10)];
if (formFieldElement['Key'] === radiobuttonItem.id) {
this.pdfViewerBase.formFieldCollection.splice(l, 1);
}
}
}
}
}
}
}
}
}
if (isItemAdd) {
this.pdfViewerBase.setItemInSessionStorage(this.pdfViewerBase.formFieldCollection, '_formDesigner');
}
}
return isItemAdd;
};
FormDesigner.prototype.getRgbCode = function (colorString) {
// eslint-disable-next-line
if (!colorString.match(/#([a-z0-9]+)/gi) && !colorString.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/)) {
var colorCode = this.nameToHash(colorString);
if (colorCode !== '') {
colorString = colorCode;
}
}
var stringArray = colorString.split(',');
if (isNullOrUndefined(stringArray[1])) {
colorString = this.getValue(colorString, 'rgba');
stringArray = colorString.split(',');
}
var r = parseInt(stringArray[0].split('(')[1], 10);
var g = parseInt(stringArray[1], 10);
var b = parseInt(stringArray[2], 10);
var a = parseFloat(stringArray[3]) * 100;
if (isNaN(a)) {
a = 0;
}
return { r: r, g: g, b: b, a: a };
};
/**
* @param {string} colour -It describes about the color
* @private
* @returns {string} - string
*/
FormDesigner.prototype.nameToHash = function (colour) {
var colours = {
'aliceblue': '#f0f8ff', 'antiquewhite': '#faebd7', 'aqua': '#00ffff', 'aquamarine': '#7fffd4', 'azure': '#f0ffff',
'beige': '#f5f5dc', 'bisque': '#ffe4c4', 'black': '#000000', 'blanchedalmond': '#ffebcd', 'blue': '#0000ff',
'blueviolet': '#8a2be2', 'brown': '#a52a2a', 'burlywood': '#deb887', 'yellow': '#ffff00', 'yellowgreen': '#9acd32',
'cadetblue': '#5f9ea0', 'chartreuse': '#7fff00', 'chocolate': '#d2691e', 'coral': '#ff7f50',
'cornflowerblue': '#6495ed', 'cornsilk': '#fff8dc', 'crimson': '#dc143c',
'cyan': '#00ffff', 'darkblue': '#00008b', 'darkcyan': '#008b8b', 'darkgoldenrod': '#b8860b', 'darkgray': '#a9a9a9',
'darkred': '#8b0000', 'darksalmon': '#e9967a', 'darkgreen': '#006400', 'darkkhaki': '#bdb76b',
'darkmagenta': '#8b008b', 'darkolivegreen': '#556b2f', 'darkorange': '#ff8c00', 'darkorchid': '#9932cc',
'darkseagreen': '#8fbc8f', 'darkslateblue': '#483d8b', 'darkslategray': '#2f4f4f', 'darkturquoise': '#00ced1',
'darkviolet': '#9400d3', 'deeppink': '#ff1493', 'deepskyblue': '#00bfff', 'dimgray': '#696969',
'dodgerblue': '#1e90ff', 'firebrick': '#b22222', 'floralwhite': '#fffaf0',
'forestgreen': '#228b22', 'fuchsia': '#ff00ff', 'gainsboro': '#dcdcdc', 'ghostwhite': '#f8f8ff',
'gold': '#ffd700', 'goldenrod': '#daa520', 'gray': '#808080', 'green': '#008000',
'greenyellow': '#adff2f', 'honeydew': '#f0fff0', 'hotpink': '#ff69b4', 'indianred ': '#cd5c5c',
'mediumorchid': '#ba55d3', 'mediumpurple': '#9370d8', 'indigo': '#4b0082', 'ivory': '#fffff0',
'navy': '#000080', 'oldlace': '#fdf5e6', 'olive': '#808000', 'khaki': '#f0e68c',
'lavender': '#e6e6fa', 'lavenderblush': '#fff0f5', 'lawngreen': '#7cfc00', 'lemonchiffon': '#fffacd',
'lightblue': '#add8e6', 'lightcoral': '#f08080', 'lightcyan': '#e0ffff',
'lightgoldenrodyellow': '#fafad2', 'lightgrey': '#d3d3d3', 'lightgreen': '#90ee90',
'lightpink': '#ffb6c1', 'lightsalmon': '#ffa07a', 'lightseagreen': '#20b2aa',
'lightskyblue': '#87cefa', 'lightslategray': '#778899', 'lightsteelblue': '#b0c4de',
'lightyellow': '#ffffe0', 'lime': '#00ff00', 'limegreen': '#32cd32', 'linen': '#faf0e6',
'magenta': '#ff00ff', 'maroon': '#800000', 'mediumaquamarine': '#66cdaa', 'mediumblue': '#0000cd',
'mediumseagreen': '#3cb371', 'mediumslateblue': '#7b68ee', 'mediumspringgreen': '#00fa9a',
'mediumturquoise': '#48d1cc', 'mediumvioletred': '#c71585', 'midnightblue': '#191970',
'mintcream': '#f5fffa', 'mistyrose': '#ffe4e1', 'moccasin': '#ffe4b5', 'navajowhite': '#ffdead',
'rebeccapurple': '#663399', 'red': '#ff0000', 'rosybrown': '#bc8f8f', 'royalblue': '#4169e1',
'olivedrab': '#6b8e23', 'orange': '#ffa500', 'orangered': '#ff4500', 'orchid': '#da70d6',
'palegoldenrod': '#eee8aa', 'palegreen': '#98fb98', 'paleturquoise': '#afeeee',
'palevioletred': '#d87093', 'papayawhip': '#ffefd5', 'peachpuff': '#ffdab9', 'peru': '#cd853f',
'wheat': '#f5deb3', 'white': '#ffffff', 'whitesmoke': '#f5f5f5', 'pink': '#ffc0cb', 'plum': '#dda0dd',
'steelblue': '#4682b4', 'violet': '#ee82ee', 'powderblue': '#b0e0e6', 'purple': '#800080',
'saddlebrown': '#8b4513', 'salmon': '#fa8072', 'sandybrown': '#f4a460', 'seagreen': '#2e8b57',
'seashell': '#fff5ee', 'sienna': '#a0522d', 'silver': '#c0c0c0', 'skyblue': '#87ceeb',
'slateblue': '#6a5acd', 'slategray': '#708090', 'snow': '#fffafa', 'springgreen': '#00ff7f',
'tan': '#d2b48c', 'teal': '#008080', 'thistle': '#d8bfd8', 'tomato': '#ff6347', 'turquoise': '#40e0d0'
};
if (typeof colours[colour.toLowerCase()] !== 'undefined') {
return colours[colour.toLowerCase()];
}
return '';
};
/**
* @param {string} value - It describes about the value
* @param {string} type - It describes about the type
* @private
* @returns {string} - string
*/
FormDesigner.prototype.getValue = function (value, type) {
type = !type ? 'hex' : type.toLowerCase();
if (value[0] === 'r') {
var cValue = this.convertRgbToNumberArray(value);
if (type === 'hex' || type === 'hexa') {
var hex = this.rgbToHex(cValue);
return type === 'hex' ? hex.slice(0, 7) : hex;
}
else {
if (type === 'hsv') {
// eslint-disable-next-line
return this.convertToHsvString(this.rgbToHsv.apply(this, cValue.slice(0, 3)));
}
else {
if (type === 'hsva') {
// eslint-disable-next-line
return this.convertToHsvString(this.rgbToHsv.apply(this, cValue));
}
else {
return 'null';
}
}
}
}
else {
if (value[0] === 'h') {
// eslint-disable-next-line
var cValue = this.hsvToRgb.apply(this, this.convertRgbToNumberArray(value));
if (type === 'rgba') {
return this.convertToRgbString(cValue);
}
else {
if (type === 'hex' || type === 'hexa') {
var hex = this.rgbToHex(cValue);
return type === 'hex' ? hex.slice(0, 7) : hex;
}
else {
if (type === 'rgb') {
return this.convertToRgbString(cValue.slice(0, 3));
}
else {
return 'null';
}
}
}
}
else {
value = this.roundValue(value);
var rgb = this.hexToRgb(value);
if (type === 'rgb' || type === 'hsv') {
rgb = rgb.slice(0, 3);
}
if (type === 'rgba' || type === 'rgb') {
return this.convertToRgbString(rgb);
}
else {
if (type === 'hsva' || type === 'hsv') {
// eslint-disable-next-line
return this.convertToHsvString(this.rgbToHsv.apply(this, rgb));
}
else {
if (type === 'hex') {
return value.slice(0, 7);
}
else {
if (type === 'a') {
return rgb[3].toString();
}
else {
return 'null';
}
}
}
}
}
}
};
FormDesigner.prototype.convertRgbToNumberArray = function (value) {
return (value.slice(value.indexOf('(') + 1, value.indexOf(')'))).split(',').map(function (n, i) {
return (i !== 3) ? parseInt(n, 10) : parseFloat(n);
});
};
FormDesigner.prototype.convertToRgbString = function (rgb) {
return rgb.length ? rgb.length === 4 ? 'rgba(' + rgb.join() + ')' : 'rgb(' + rgb.join() + ')' : '';
};
FormDesigner.prototype.convertToHsvString = function (hsv) {
return hsv.length === 4 ? 'hsva(' + hsv.join() + ')' : 'hsv(' + hsv.join() + ')';
};
FormDesigner.prototype.roundValue = function (value) {
if (!value) {
return '';
}
if (value[0] !== '#') {
value = '#' + value;
}
var len = value.length;
if (len === 4) {
value += 'f';
len = 5;
}
if (len === 5) {
var tempValue = '';
for (var i = 1, len_1 = value.length; i < len_1; i++) {
tempValue += (value.charAt(i) + value.charAt(i));
}
value = '#' + tempValue;
len = 9;
}
if (len === 7) {
value += 'ff';
}
return value;
};
FormDesigner.prototype.hexToRgb = function (hex) {
if (!hex) {
return [];
}
hex = hex.trim();
if (hex.length !== 9) {
hex = this.roundValue(hex);
}
var opacity = Number((parseInt(hex.slice(-2), 16) / 255).toFixed(2));
hex = hex.slice(1, 7);
var bigInt = parseInt(hex, 16);
var h = [];
h.push((bigInt >> 16) & 255);
h.push((bigInt >> 8) & 255);
h.push(bigInt & 255);
h.push(opacity);
return h;
};
FormDesigner.prototype.rgbToHsv = function (r, g, b, opacity) {
r /= 255;
g /= 255;
b /= 255;
var max = Math.max(r, g, b);
var min = Math.min(r, g, b);
var h;
var v = max;
var d = max - min;
var s = max === 0 ? 0 : d / max;
if (max === min) {
h = 0;
}
else {
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
}
h /= 6;
}
var hsv = [Math.round(h * 360), Math.round(s * 1000) / 10, Math.round(v * 1000) / 10];
if (!isNullOrUndefined(opacity)) {
hsv.push(opacity);
}
return hsv;
};
FormDesigner.prototype.hsvToRgb = function (h, s, v, opacity) {
var r;
var g;
var b;
s /= 100;
v /= 100;
if (s === 0) {
r = g = b = v;
return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255), opacity];
}
h /= 60;
var i = Math.floor(h);
var f = h - i;
var p = v * (1 - s);
var q = v * (1 - s * f);
var t = v * (1 - s * (1 - f));
switch (i) {
case 0:
r = v;
g = t;
b = p;
break;
case 1:
r = q;
g = v;
b = p;
break;
case 2:
r = p;
g = v;
b = t;
break;
case 3:
r = p;
g = q;
b = v;
break;
case 4:
r = t;
g = p;
b = v;
break;
default:
r = v;
g = p;
b = q;
}
var rgb = [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
if (!isNullOrUndefined(opacity)) {
rgb.push(opacity);
}
return rgb;
};
FormDesigner.prototype.rgbToHex = function (rgb) {
return rgb.length ? ('#' + this.hex(rgb[0]) + this.hex(rgb[1]) + this.hex(rgb[2]) +
(!isNullOrUndefined(rgb[3]) ? (rgb[3] !== 0 ? (Math.round(rgb[3] * 255) + 0x10000).toString(16).substr(-2) : '00') : '')) : '';
};
/**
* @param {number} pageNumber - It describes about the page number
* @param {HTMLElement} canvas - It describes about the html element
* @private
* @returns {void}
*/
FormDesigner.prototype.updateCanvas = function (pageNumber, canvas) {
if (isNullOrUndefined(canvas)) {
canvas = this.pdfViewerBase.getAnnotationCanvas('_annotationCanvas_', pageNumber);
var zoom = this.pdfViewerBase.getZoomFactor();
var ratio = this.pdfViewerBase.getZoomRatio(zoom);
if (canvas) {
var width = this.pdfViewerBase.pageSize[parseInt(pageNumber.toString(), 10)].width;
var height = this.pdfViewerBase.pageSize[parseInt(pageNumber.toString(), 10)].height;
canvas.width = width * ratio;
canvas.height = height * ratio;
canvas.style.width = width * zoom + 'px';
canvas.style.height = height * zoom + 'px';
}
}
this.pdfViewer.drawing.refreshCanvasDiagramLayer(canvas, pageNumber);
};
/**
* @param {number} pageIndex - It describes about the page index
* @private
* @returns {void}
*/
FormDesigner.prototype.rerenderFormFields = function (pageIndex) {
var _this = this;
var zoomValue = this.pdfViewerBase.getZoomFactor();
var data = this.pdfViewerBase.getItemFromSessionStorage('_formDesigner');
var signatureValueRender = false;
if (data) {
var formFieldsData = JSON.parse(data);
if (formFieldsData[0] === '[') {
formFieldsData = JSON.parse(formFieldsData);
}
var textLayer = document.getElementById(this.pdfViewer.element.id + '_textLayer_' + pageIndex);
var canvasElement = document.getElementById(this.pdfViewer.element.id + '_pageCanvas_' + pageIndex);
if (formFieldsData !== null && canvasElement !== null && textLayer !== null) {
var _loop_1 = function (i) {
var currentData = formFieldsData[parseInt(i.toString(), 10)].FormField;
if (currentData.pageNumber === pageIndex + 1) {
var domElementId = document.getElementById('form_field_' + currentData.id + '_html_element');
if (!domElementId) {
var signatureField = this_1.pdfViewer.nameTable[formFieldsData[parseInt(i.toString(), 10)].Key.split('_')[0]];
var element_1 = signatureField.wrapper.children[0];
var obj = this_1.pdfViewer.formFieldCollections.filter(function (field) { return currentData.id.split('_')[0] === field.id; });
if (element_1 && obj.length > 0 && obj[0].visibility === 'visible') {
if (currentData.formFieldAnnotationType === 'RadioButton') {
for (var j = 0; j < currentData.radiobuttonItem.length; j++) {
signatureField = this_1.pdfViewer.nameTable[currentData.radiobuttonItem[parseInt(j.toString(), 10)].id.split('_')[0]];
element_1 = signatureField.wrapper.children[0];
currentData.radiobuttonItem[parseInt(j.toString(), 10)] =
this_1.renderFormFieldsInZooming(element_1, currentData.radiobuttonItem[parseInt(j.toString(), 10)], signatureField, zoomValue);
this_1.pdfViewerBase.formFieldCollection[parseInt(i.toString(), 10)].
FormField.radiobuttonItem[parseInt(j.toString(), 10)].lineBound =
currentData.radiobuttonItem[parseInt(j.toString(), 10)].lineBound;
this_1.pdfViewerBase.formFieldCollection[parseInt(i.toString(), 10)].
FormField.radiobuttonItem[parseInt(j.toString(), 10)].zoomValue = zoomValue;
}
}
else {
var filteredField = this_1.pdfViewerBase.formFieldCollection.filter(function (field) {
return field.FormField.id === currentData.id;
});
if (currentData && currentData.value === '') {
currentData.value = filteredField[0] ? filteredField[0].FormField.value : '';
currentData.signatureType = filteredField[0] ? filteredField[0].FormField.signatureType : '';
}
if (!isNullOrUndefined(currentData)) {
currentData.visibility = obj[0].visibility;
filteredField[0].FormField.visibility = obj[0].visibility;
}
var zoomCurrentData = this_1.renderFormFieldsInZooming(element_1, currentData, signatureField, zoom