UNPKG

@syncfusion/ej2-pdfviewer

Version:
1,336 lines (1,330 loc) 6.03 MB
import { ChildProperty, Property, Complex, isNullOrUndefined, Collection, getValue, compile, Browser, isBlazor, SanitizeHtmlHelper, createElement, Internationalization, initializeCSPTemplate, classList, closest, Component, L10n, Event, NotifyPropertyChanges, Draggable, Droppable, getComponent } from '@syncfusion/ej2-base'; import { Point, Size, Container, identityMatrix, rotateMatrix, transformPointByMatrix, Rect, RotateTransform, PathElement, TextElement, randomId, intersect3, DrawingElement, DrawingRenderer, SvgRenderer, createMeasureElements, ImageElement, Canvas, refreshDiagramElements, getDiagramElement, ThumbsConstraints, scaleMatrix, cornersPointsBeforeRotation, rotatePoint, contains, createHtmlElement, createSvgElement, setAttributeSvg, processPathData, splitArrayCollection, getPathString } from '@syncfusion/ej2-drawings'; import { NumericTextBox, Slider, ColorPicker, TextBox } from '@syncfusion/ej2-inputs'; import { Dialog, Tooltip } from '@syncfusion/ej2-popups'; import { DropDownButton } from '@syncfusion/ej2-splitbuttons'; import { InPlaceEditor } from '@syncfusion/ej2-inplace-editor'; import { Accordion, ContextMenu as ContextMenu$1, Toolbar as Toolbar$1, Tab, Menu, TreeView } from '@syncfusion/ej2-navigations'; import { Toast } from '@syncfusion/ej2-notifications'; import { _decode, PdfTrueTypeFont, PdfFontStyle, PdfBitmap, PdfTextMarkupAnnotation, PdfLineAnnotation, PdfSquareAnnotation, PdfRectangleAnnotation, PdfCircleAnnotation, PdfEllipseAnnotation, PdfPolygonAnnotation, PdfPolyLineAnnotation, PdfAngleMeasurementAnnotation, PdfRubberStampAnnotation, PdfPopupAnnotation, PdfFreeTextAnnotation, PdfInkAnnotation, _stringToBytes, _ContentParser, PdfDocument, PdfPageSettings, PdfMargins, _encode, PdfAnnotationStateModel, PdfAnnotationState, PdfRotationAngle, PdfSignatureField, PdfPermissionFlag, PdfPageImportOptions, DataFormat, PdfAnnotationExportSettings, PdfTextStyle, PdfUriAnnotation, PdfTextWebLinkAnnotation, PdfDocumentLinkAnnotation, PdfFormFieldExportSettings, PdfFontFamily, PdfStandardFont, PdfTextAlignment, PdfAnnotationFlag, PdfTextBoxField, PdfComboBoxField, PdfCheckBoxField, PdfListBoxField, PdfRadioButtonListField, PdfListFieldItem, PdfRadioButtonListItem, PdfPath, PdfFormFieldVisibility, PdfAnnotationBorder, PdfBorderEffect, PdfBorderEffectStyle, _PdfDictionary, _PdfName, PdfLineEndingStyle, PdfAnnotationIntent, PdfTextMarkupAnnotationType, PdfTemplate, PdfBrush, PdfPen, PdfLineIntent, PdfPopupIcon, PdfStringFormat, PdfVerticalAlignment, PdfMeasurementUnit, PdfRubberStampAnnotationIcon, PdfCircleMeasurementType, PdfLineCaptionType, PdfBorderStyle, _annotationFlagsToString } from '@syncfusion/ej2-pdf'; import { CheckBox, Button } from '@syncfusion/ej2-buttons'; import { ComboBox, AutoComplete, DropDownList } from '@syncfusion/ej2-dropdowns'; import { Query } from '@syncfusion/ej2-data'; import { ListView } from '@syncfusion/ej2-lists'; var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; /** * The `PdfBounds` is base for annotation bounds. * * @hidden */ class PdfBounds extends ChildProperty { } __decorate([ Property(0) ], PdfBounds.prototype, "x", void 0); __decorate([ Property(0) ], PdfBounds.prototype, "y", void 0); __decorate([ Property(0) ], PdfBounds.prototype, "width", void 0); __decorate([ Property(0) ], PdfBounds.prototype, "height", void 0); __decorate([ Property(0) ], PdfBounds.prototype, "left", void 0); __decorate([ Property(0) ], PdfBounds.prototype, "top", void 0); __decorate([ Property(0) ], PdfBounds.prototype, "right", void 0); __decorate([ Property(0) ], PdfBounds.prototype, "bottom", void 0); __decorate([ Complex({ x: 0, y: 0 }, Point) ], PdfBounds.prototype, "location", void 0); __decorate([ Complex(new Size(0, 0), Size) ], PdfBounds.prototype, "size", void 0); /** * The `PdfFont` is base for annotation Text styles. * * @hidden */ class PdfFont extends ChildProperty { } __decorate([ Property(false) ], PdfFont.prototype, "isBold", void 0); __decorate([ Property(false) ], PdfFont.prototype, "isItalic", void 0); __decorate([ Property(false) ], PdfFont.prototype, "isUnderline", void 0); __decorate([ Property(false) ], PdfFont.prototype, "isStrikeout", void 0); /** * Defines the common behavior of PdfAnnotationBase * * @hidden */ class PdfAnnotationBase extends ChildProperty { constructor(parent, propName, defaultValue, isArray) { super(parent, propName, defaultValue, isArray); } } __decorate([ Property('') ], PdfAnnotationBase.prototype, "id", void 0); __decorate([ Property('Rectangle') ], PdfAnnotationBase.prototype, "shapeAnnotationType", void 0); __decorate([ Property(null) ], PdfAnnotationBase.prototype, "formFieldAnnotationType", void 0); __decorate([ Property('') ], PdfAnnotationBase.prototype, "measureType", void 0); __decorate([ Property('') ], PdfAnnotationBase.prototype, "author", void 0); __decorate([ Property('') ], PdfAnnotationBase.prototype, "modifiedDate", void 0); __decorate([ Property('') ], PdfAnnotationBase.prototype, "subject", void 0); __decorate([ Property('') ], PdfAnnotationBase.prototype, "notes", void 0); __decorate([ Property(false) ], PdfAnnotationBase.prototype, "isCommentLock", void 0); __decorate([ Property('black') ], PdfAnnotationBase.prototype, "strokeColor", void 0); __decorate([ Property('#ffffff00') ], PdfAnnotationBase.prototype, "fillColor", void 0); __decorate([ Property('#ffffff00') ], PdfAnnotationBase.prototype, "stampFillColor", void 0); __decorate([ Property('black') ], PdfAnnotationBase.prototype, "stampStrokeColor", void 0); __decorate([ Property('') ], PdfAnnotationBase.prototype, "data", void 0); __decorate([ Property(1) ], PdfAnnotationBase.prototype, "opacity", void 0); __decorate([ Property(1) ], PdfAnnotationBase.prototype, "thickness", void 0); __decorate([ Property('') ], PdfAnnotationBase.prototype, "borderStyle", void 0); __decorate([ Property('') ], PdfAnnotationBase.prototype, "borderDashArray", void 0); __decorate([ Property(0) ], PdfAnnotationBase.prototype, "rotateAngle", void 0); __decorate([ Property(false) ], PdfAnnotationBase.prototype, "isCloudShape", void 0); __decorate([ Property(0) ], PdfAnnotationBase.prototype, "cloudIntensity", void 0); __decorate([ Property(40) ], PdfAnnotationBase.prototype, "leaderHeight", void 0); __decorate([ Property(null) ], PdfAnnotationBase.prototype, "lineHeadStart", void 0); __decorate([ Property(null) ], PdfAnnotationBase.prototype, "lineHeadEnd", void 0); __decorate([ Property([]) ], PdfAnnotationBase.prototype, "vertexPoints", void 0); __decorate([ Property(null) ], PdfAnnotationBase.prototype, "sourcePoint", void 0); __decorate([ Property('None') ], PdfAnnotationBase.prototype, "sourceDecoraterShapes", void 0); __decorate([ Property('None') ], PdfAnnotationBase.prototype, "taregetDecoraterShapes", void 0); __decorate([ Property(null) ], PdfAnnotationBase.prototype, "targetPoint", void 0); __decorate([ Property([]) ], PdfAnnotationBase.prototype, "segments", void 0); __decorate([ Complex({ x: 0, y: 0 }, PdfBounds) ], PdfAnnotationBase.prototype, "bounds", void 0); __decorate([ Property(0) ], PdfAnnotationBase.prototype, "pageIndex", void 0); __decorate([ Property(-1) ], PdfAnnotationBase.prototype, "zIndex", void 0); __decorate([ Property(null) ], PdfAnnotationBase.prototype, "wrapper", void 0); __decorate([ Property(false) ], PdfAnnotationBase.prototype, "isDynamicStamp", void 0); __decorate([ Property('') ], PdfAnnotationBase.prototype, "dynamicText", void 0); __decorate([ Property('') ], PdfAnnotationBase.prototype, "annotName", void 0); __decorate([ Property({}) ], PdfAnnotationBase.prototype, "review", void 0); __decorate([ Property([]) ], PdfAnnotationBase.prototype, "comments", void 0); __decorate([ Property('#000') ], PdfAnnotationBase.prototype, "fontColor", void 0); __decorate([ Property(16) ], PdfAnnotationBase.prototype, "fontSize", void 0); __decorate([ Property('Helvetica') ], PdfAnnotationBase.prototype, "fontFamily", void 0); __decorate([ Property('None') ], PdfAnnotationBase.prototype, "fontStyle", void 0); __decorate([ Property(false) ], PdfAnnotationBase.prototype, "enableShapeLabel", void 0); __decorate([ Property('label') ], PdfAnnotationBase.prototype, "labelContent", void 0); __decorate([ Property('#ffffff00') ], PdfAnnotationBase.prototype, "labelFillColor", void 0); __decorate([ Property(15) ], PdfAnnotationBase.prototype, "labelMaxLength", void 0); __decorate([ Property('') ], PdfAnnotationBase.prototype, "template", void 0); __decorate([ Property('') ], PdfAnnotationBase.prototype, "templateSize", void 0); __decorate([ Property(1) ], PdfAnnotationBase.prototype, "labelOpacity", void 0); __decorate([ Property('') ], PdfAnnotationBase.prototype, "annotationSelectorSettings", void 0); __decorate([ Property('#ffffff00') ], PdfAnnotationBase.prototype, "labelBorderColor", void 0); __decorate([ Property('left') ], PdfAnnotationBase.prototype, "textAlign", void 0); __decorate([ Property('') ], PdfAnnotationBase.prototype, "signatureName", void 0); __decorate([ Property(0) ], PdfAnnotationBase.prototype, "minHeight", void 0); __decorate([ Property(0) ], PdfAnnotationBase.prototype, "minWidth", void 0); __decorate([ Property(0) ], PdfAnnotationBase.prototype, "maxHeight", void 0); __decorate([ Property(0) ], PdfAnnotationBase.prototype, "maxWidth", void 0); __decorate([ Property(false) ], PdfAnnotationBase.prototype, "isLock", void 0); __decorate([ Property('UI Drawn Annotation') ], PdfAnnotationBase.prototype, "annotationAddMode", void 0); __decorate([ Property('') ], PdfAnnotationBase.prototype, "annotationSettings", void 0); __decorate([ Property(16) ], PdfAnnotationBase.prototype, "previousFontSize", void 0); __decorate([ Complex({ isBold: false, isItalic: false, isStrikeout: false, isUnderline: false }, PdfFont) ], PdfAnnotationBase.prototype, "font", void 0); __decorate([ Complex({ x: 0, y: 0 }, PdfBounds) ], PdfAnnotationBase.prototype, "labelBounds", void 0); __decorate([ Property(null) ], PdfAnnotationBase.prototype, "customData", void 0); __decorate([ Property(['None']) ], PdfAnnotationBase.prototype, "allowedInteractions", void 0); __decorate([ Property(true) ], PdfAnnotationBase.prototype, "isPrint", void 0); __decorate([ Property(false) ], PdfAnnotationBase.prototype, "isReadonly", void 0); __decorate([ Property(0) ], PdfAnnotationBase.prototype, "pageRotation", void 0); __decorate([ Property('') ], PdfAnnotationBase.prototype, "icon", void 0); __decorate([ Property(false) ], PdfAnnotationBase.prototype, "isAddAnnotationProgrammatically", void 0); __decorate([ Property(false) ], PdfAnnotationBase.prototype, "isTransparentSet", void 0); /** * Defines the common behavior of PdfFormFieldBase * * @hidden */ class PdfFormFieldBase extends ChildProperty { constructor(parent, propName, defaultValue, isArray) { super(parent, propName, defaultValue, isArray); } } __decorate([ Property('') ], PdfFormFieldBase.prototype, "id", void 0); __decorate([ Property('') ], PdfFormFieldBase.prototype, "signatureType", void 0); __decorate([ Property('') ], PdfFormFieldBase.prototype, "name", void 0); __decorate([ Property('') ], PdfFormFieldBase.prototype, "value", void 0); __decorate([ Property(null) ], PdfFormFieldBase.prototype, "formFieldAnnotationType", void 0); __decorate([ Property('#daeaf7ff') ], PdfFormFieldBase.prototype, "backgroundColor", void 0); __decorate([ Property('black') ], PdfFormFieldBase.prototype, "color", void 0); __decorate([ Property('#303030') ], PdfFormFieldBase.prototype, "borderColor", void 0); __decorate([ Property('') ], PdfFormFieldBase.prototype, "tooltip", void 0); __decorate([ Property(1) ], PdfFormFieldBase.prototype, "opacity", void 0); __decorate([ Property(1) ], PdfFormFieldBase.prototype, "thickness", void 0); __decorate([ Property(0) ], PdfFormFieldBase.prototype, "rotateAngle", void 0); __decorate([ Complex({ x: 0, y: 0 }, PdfBounds) ], PdfFormFieldBase.prototype, "bounds", void 0); __decorate([ Property(0) ], PdfFormFieldBase.prototype, "pageIndex", void 0); __decorate([ Property(1) ], PdfFormFieldBase.prototype, "pageNumber", void 0); __decorate([ Property(-1) ], PdfFormFieldBase.prototype, "zIndex", void 0); __decorate([ Property(null) ], PdfFormFieldBase.prototype, "wrapper", void 0); __decorate([ Property(16) ], PdfFormFieldBase.prototype, "fontSize", void 0); __decorate([ Property('Helvetica') ], PdfFormFieldBase.prototype, "fontFamily", void 0); __decorate([ Property('None') ], PdfFormFieldBase.prototype, "fontStyle", void 0); __decorate([ Property('left') ], PdfFormFieldBase.prototype, "alignment", void 0); __decorate([ Property(0) ], PdfFormFieldBase.prototype, "minHeight", void 0); __decorate([ Property(0) ], PdfFormFieldBase.prototype, "minWidth", void 0); __decorate([ Property(0) ], PdfFormFieldBase.prototype, "maxHeight", void 0); __decorate([ Property(0) ], PdfFormFieldBase.prototype, "maxWidth", void 0); __decorate([ Property(0) ], PdfFormFieldBase.prototype, "maxLength", void 0); __decorate([ Property('visible') ], PdfFormFieldBase.prototype, "visibility", void 0); __decorate([ Property(true) ], PdfFormFieldBase.prototype, "isPrint", void 0); __decorate([ Property(false) ], PdfFormFieldBase.prototype, "isReadonly", void 0); __decorate([ Property(false) ], PdfFormFieldBase.prototype, "isChecked", void 0); __decorate([ Property(false) ], PdfFormFieldBase.prototype, "isSelected", void 0); __decorate([ Property(false) ], PdfFormFieldBase.prototype, "isRequired", void 0); __decorate([ Property(false) ], PdfFormFieldBase.prototype, "isMultiline", void 0); __decorate([ Property(false) ], PdfFormFieldBase.prototype, "isTransparent", void 0); __decorate([ Property(false) ], PdfFormFieldBase.prototype, "insertSpaces", void 0); __decorate([ Property('') ], PdfFormFieldBase.prototype, "options", void 0); __decorate([ Property() ], PdfFormFieldBase.prototype, "signatureIndicatorSettings", void 0); __decorate([ Complex({ isBold: false, isItalic: false, isStrikeout: false, isUnderline: false }, PdfFont) ], PdfFormFieldBase.prototype, "font", void 0); __decorate([ Property() ], PdfFormFieldBase.prototype, "selectedIndex", void 0); __decorate([ Property(null) ], PdfFormFieldBase.prototype, "customData", void 0); /** * @hidden */ class ZOrderPageTable { constructor() { this.pageIdTemp = 0; this.zIndexTemp = -1; this.childNodesTemp = []; this.objects = []; this.zIndexTemp = -1; this.pageIdTemp = 0; } /** * @private * @returns {number} - Returns the page Id. */ get pageId() { return this.pageIdTemp; } /** * @private * @param {number} offset - The page offset value. */ set pageId(offset) { this.pageIdTemp = offset; } /** * @private * @returns {number} - Returns the z-index value. */ get zIndex() { return this.zIndexTemp; } /** * @private * @param {number} offset - The page offset value. */ set zIndex(offset) { this.zIndexTemp = offset; } /** * @private * @returns {PdfAnnotationBaseModel[]} - Returns the annotation childNodes. */ get objects() { return this.childNodesTemp; } /** * @private * @param {PdfAnnotationBaseModel[]} childNodes - Specified the annotation child nodes. */ set objects(childNodes) { this.childNodesTemp = childNodes; } } var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; /** * Defines the size and position of selected items and defines the appearance of selector * * @hidden */ class Selector extends ChildProperty { /** * Initializes the UI of the container * * @param {any} diagram - diagram element. * @returns {Container} - Returns the container element. */ init(diagram) { const container = new Container(); container.measureChildren = false; container.children = []; if (this.formFields && this.formFields.length > 0) { for (let i = 0; i < this.formFields.length; i++) { const node = diagram.pdfViewer.nameTable[this.formFields[parseInt(i.toString(), 10)].id]; const wrapper = node.wrapper; container.children.push(wrapper); } } else if (this.annotations) { for (let i = 0; i < this.annotations.length; i++) { if (!isNullOrUndefined(this.annotations[parseInt(i.toString(), 10)])) { const node = diagram.pdfViewer.nameTable[this.annotations[parseInt(i.toString(), 10)].id]; const wrapper = node.wrapper; container.children.push(wrapper); } } } this.wrapper = container; return container; } } __decorate$1([ Property(null) ], Selector.prototype, "wrapper", void 0); __decorate$1([ Collection([], PdfAnnotationBase) ], Selector.prototype, "annotations", void 0); __decorate$1([ Collection([], PdfFormFieldBase) ], Selector.prototype, "formFields", void 0); __decorate$1([ Property() ], Selector.prototype, "width", void 0); __decorate$1([ Property() ], Selector.prototype, "height", void 0); __decorate$1([ Property(0) ], Selector.prototype, "rotateAngle", void 0); __decorate$1([ Property(0) ], Selector.prototype, "offsetX", void 0); __decorate$1([ Property(0) ], Selector.prototype, "offsetY", void 0); __decorate$1([ Complex({ x: 0.5, y: 0.5 }, Point) ], Selector.prototype, "pivot", void 0); /** * @param {PdfAnnotationBaseModel} obj - Specified the shape annotation object. * @hidden * @returns {void} */ function isLineShapes(obj) { if (obj.shapeAnnotationType === 'Line' || obj.shapeAnnotationType === 'LineWidthArrowHead' || obj.shapeAnnotationType === 'Distance' || obj.shapeAnnotationType === 'Polygon') { return true; } return false; } /** * @param {PdfAnnotationBaseModel | PdfFormFieldBaseModel} obj - Specified the annotation or form fields object. * @param {DrawingElement} element - Specified the annotation drawing element. * @returns {void} * @hidden */ function setElementStype(obj, element) { if (obj && element) { if (obj.formFieldAnnotationType) { if (obj.id.indexOf('diagram_helper') !== -1) { element.style.fill = 'transparent'; element.style.strokeWidth = 1; element.style.strokeDashArray = obj.borderDashArray; } else { element.style.fill = 'transparent'; element.style.strokeWidth = 0; } } else { const fillColor = (obj.fillColor === '#ffffff00' ? 'transparent' : obj.fillColor); element.style.fill = fillColor ? fillColor : 'white'; element.style.strokeColor = obj.strokeColor ? obj.strokeColor : obj.borderColor; element.style.color = obj.strokeColor ? obj.strokeColor : obj.borderColor; element.style.strokeWidth = obj.thickness; if (obj.shapeAnnotationType === 'Image' || obj.shapeAnnotationType === 'SignatureText' || obj.shapeAnnotationType === 'SignatureImage') { element.style.strokeWidth = 0; } element.style.strokeDashArray = obj.borderDashArray; element.style.opacity = obj.opacity; } } } /** * @param {PointModel[]} points - Specified the annotation points value. * @hidden * @returns {number} - Returns the points length. */ function findPointsLength(points) { let length = 0; for (let i = 0; i < points.length - 1; i++) { length += Point.findLength(points[parseInt(i.toString(), 10)], points[i + 1]); } return length; } /** * @param {PointModel[]} points - Specified the annotation points value. * @hidden * @returns {number} - Returns the points length. */ function findPerimeterLength(points) { const length = Point.getLengthFromListOfPoints(points); return length; } /** * @private * @param {DrawingElement} element - Specified the drawing element. * @param {Transforms} transform - Specified the transform value. * @returns {BaseAttributes} - Returns the base attributes value. */ function getBaseShapeAttributes(element, transform) { const baseShapeAttributes = { width: element.actualSize.width, height: element.actualSize.height, x: element.offsetX - element.actualSize.width * element.pivot.x + 0.5, y: element.offsetY - element.actualSize.height * element.pivot.y + 0.5, angle: element.rotateAngle + element.parentTransform, fill: element.style.fill, stroke: element.style.strokeColor, pivotX: element.pivot.x, pivotY: element.pivot.y, strokeWidth: 1, opacity: element.style.opacity, dashArray: element.style.strokeDashArray || '', visible: element.visible, id: element.id }; if (transform) { baseShapeAttributes.x += transform.tx; baseShapeAttributes.y += transform.ty; } return baseShapeAttributes; } /** * Get function * * @private * @param {Function | string} value - Type of the function. * @returns {Function} - Returns the function. */ function getFunction(value) { if (value !== undefined) { if (typeof value === 'string') { value = getValue(value, window); } } return value; } /** * @private * @param {any} obj - Specified the annotation object. * @param {Function | string} additionalProp - Specified the annotation additional properties. * @param {string} key - Specified the annotation key value. * @returns {object} - Returns the cloned object. */ function cloneObject(obj, additionalProp, key) { const newObject = {}; const keys = 'properties'; const prop = 'propName'; if (obj) { key = obj[`${prop}`]; const sourceObject = obj[`${keys}`] || obj; let properties = []; properties = properties.concat(Object.keys(sourceObject)); let customProperties = []; properties.push('version'); if (key) { const propAdditional = getFunction(additionalProp); if (propAdditional) { customProperties = propAdditional(key); } else { customProperties = []; } properties = properties.concat(customProperties); } const internalProp = getInternalProperties(key); properties = properties.concat(internalProp); for (const property of properties) { if (property !== 'historyManager') { if (property !== 'wrapper') { const isEventEmmitter = obj[`${property}`] && Object.prototype.hasOwnProperty.call(obj, 'observers') ? true : false; if (!isEventEmmitter) { if (obj[`${property}`] instanceof Array) { newObject[`${property}`] = cloneArray((internalProp.indexOf(property) === -1 && obj[`${key}`]) ? obj[`${key}`][`${property}`] : obj[`${property}`], additionalProp, property); } else if (obj[`${property}`] instanceof Array === false && obj[`${property}`] instanceof HTMLElement) { newObject[`${property}`] = obj[`${property}`].cloneNode(true).innerHtml; } else if (obj[`${property}`] instanceof Array === false && obj[`${property}`] instanceof Object && property !== 'template') { newObject[`${property}`] = cloneObject((internalProp.indexOf(property) === -1 && obj[`${key}`]) ? obj[`${key}`][`${property}`] : obj[`${property}`]); } else { newObject[`${property}`] = obj[`${property}`]; } } } else { if (obj[`${property}`]) { newObject[`${property}`] = { actualSize: { width: obj[`${property}`].actualSize.width, height: obj[`${property}`].actualSize.height }, offsetX: obj[`${property}`].offsetX, offsetY: obj[`${property}`].offsetY }; } } } } } return newObject; } /** * @private * @param {object[]} sourceArray - Specified the annotation source collections. * @param {Function | string} additionalProp - Specified the annotation additional properties. * @param {string} key - Specified the annotation key value. * @returns {object[]} - Returns the cloned object array. */ function cloneArray(sourceArray, additionalProp, key) { let clonedArray; if (sourceArray) { clonedArray = []; for (let i = 0; i < sourceArray.length; i++) { if (sourceArray[parseInt(i.toString(), 10)] instanceof Array) { clonedArray.push(sourceArray[parseInt(i.toString(), 10)]); } else if (sourceArray[parseInt(i.toString(), 10)] instanceof Object) { clonedArray.push(cloneObject(sourceArray[parseInt(i.toString(), 10)], additionalProp, key)); } else { clonedArray.push(sourceArray[parseInt(i.toString(), 10)]); } } } return clonedArray; } /** * @private * @param {string} propName - Specified the annotation property name. * @returns {string[]} - Returns the internal properties. */ function getInternalProperties(propName) { switch (propName) { case 'nodes': case 'children': return ['inEdges', 'outEdges', 'parentId', 'processId', 'nodeId', 'umlIndex', 'isPhase', 'isLane']; case 'connectors': return ['parentId']; case 'annotation': return ['nodeId']; case 'annotations': return ['nodeId']; case 'shape': return ['hasHeader']; } return []; } /** * @param {PdfAnnotationBaseModel} obj - Specified the annotation object. * @param {string} position - Specified the annotation position. * @hidden * @returns {Leader} - Returns the leader value. */ function isLeader(obj, position) { let rotatedPoint; if (obj.shapeAnnotationType === 'Distance') { let leaderCount = 0; let newPoint1; for (let i = 0; i < obj.wrapper.children.length; i++) { const angle = Point.findAngle(obj.sourcePoint, obj.targetPoint); const segment = obj.wrapper.children[parseInt(i.toString(), 10)]; if (segment.id.indexOf('leader') > -1) { let center = obj.wrapper.children[0].bounds.center; if (leaderCount === 0) { newPoint1 = { x: obj.sourcePoint.x, y: obj.sourcePoint.y - obj.leaderHeight }; center = obj.sourcePoint; } else { newPoint1 = { x: obj.targetPoint.x, y: obj.targetPoint.y - obj.leaderHeight }; center = obj.targetPoint; } const matrix = identityMatrix(); rotateMatrix(matrix, angle, center.x, center.y); rotatedPoint = transformPointByMatrix(matrix, { x: newPoint1.x, y: newPoint1.y }); if (position === 'Leader' + leaderCount) { return { leader: 'leader' + leaderCount, point: rotatedPoint }; } leaderCount++; } } } return { leader: '', point: rotatedPoint }; } /** * @private * @param {PdfAnnotationBaseModel} obj - Specified the annotation object. * @param {PointModel[]} points - Specified the annotation points. * @returns {PointModel[]} - Returns the annotation points model array. */ function getConnectorPoints(obj, points) { points = obj.vertexPoints; const newPoints = points.slice(0); if (newPoints && newPoints.length > 0) { obj.sourcePoint = newPoints[0]; obj.targetPoint = newPoints[newPoints.length - 1]; } return newPoints; } /** * @private * @param {PdfAnnotationBaseModel} connector - Specified the annotation connector model. * @param {PointModel[]} points - Specified the annotation points. * @returns {string} - Returns the annotation path value. */ function getSegmentPath(connector, points) { let path = ''; let getPt; let pts = []; let j = 0; while (j < points.length) { pts.push({ x: points[parseInt(j.toString(), 10)].x, y: points[parseInt(j.toString(), 10)].y }); j++; } pts = clipDecorators(connector, pts); for (let k = 0; k < pts.length; k++) { getPt = pts[parseInt(k.toString(), 10)]; if (k === 0) { path = 'M' + getPt.x + ' ' + getPt.y; } if (k > 0) { path += ' ' + 'L' + getPt.x + ' ' + getPt.y; } } return path; } /** * @private * @param {PdfAnnotationBaseModel} connector - Specified the annotation connector model. * @param {PointModel[]} points - Specified the annotation points. * @param {PathElement} element - Specified the annotation element. * @returns {PathElement} - Returns the annotation path element. */ function updateSegmentElement(connector, points, element) { let bounds = new Rect(); const segmentPath = getSegmentPath(connector, points); bounds = Rect.toBounds(points); element.width = bounds.width; element.height = bounds.height; element.offsetX = bounds.x + element.width / 2; element.offsetY = bounds.y + element.height / 2; element.data = segmentPath; if (connector.wrapper) { connector.wrapper.offsetX = element.offsetX; connector.wrapper.offsetY = element.offsetY; let boundsValue = bounds.width; if (bounds.width < bounds.height) { boundsValue = bounds.height; } else { boundsValue = bounds.width; } connector.wrapper.width = connector.enableShapeLabel ? boundsValue / 2 : boundsValue; connector.wrapper.height = bounds.height; } return element; } /** * @private * @param {PdfAnnotationBaseModel} connector - Specified the annotation connector model. * @param {PathElement} segmentElement - Specified the annotation segment element. * @returns {PathElement} - Returns the annotation path element. */ function getSegmentElement(connector, segmentElement) { let points = []; points = getConnectorPoints(connector); segmentElement.staticSize = true; segmentElement = updateSegmentElement(connector, points, segmentElement); setElementStype(connector, segmentElement); return segmentElement; } /** * @private * @param {PdfAnnotationBaseModel} obj - Specified the annotation object. * @param {DrawingElement} element - Specified the annotation drawing element. * @param {PointModel} pt - Specified the annotation point. * @param {PointModel} adjacentPoint - Specified the annotation adjacent point. * @param {boolean} isSource - Specified the is source value or not. * @returns {void} */ function updateDecoratorElement(obj, element, pt, adjacentPoint, isSource) { element.offsetX = pt.x; element.offsetY = pt.y; const angle = Point.findAngle(pt, adjacentPoint); const getPath = getDecoratorShape(isSource ? obj.sourceDecoraterShapes : obj.taregetDecoraterShapes); let thickness = 0; let size; if (obj.shapeAnnotationType === 'LineWidthArrowHead' || obj.shapeAnnotationType === 'Line') { thickness = obj.thickness; size = new Size(thickness * 12, thickness * 12); } else { thickness = obj.thickness <= 5 ? 5 : obj.thickness; size = new Size(thickness * 2, thickness * 2); } element.transform = RotateTransform.Self; setElementStype(obj, element); element.style.fill = (obj.fillColor !== 'tranparent') ? obj.fillColor : 'white'; element.rotateAngle = angle; element.data = getPath; element.canMeasurePath = true; element.width = size.width; element.height = size.height; if (obj.sourceDecoraterShapes === 'Butt') { element.width = size.width - 10; element.height = size.height + 10; } } /** * @private * @param {PdfAnnotationBaseModel} obj - Specified the annotation object. * @param {PointModel} offsetPoint - Specified the annotation offset point. * @param {PointModel} adjacentPoint - Specified the annotation adjacent point. * @param {boolean} isSource - Specified the is source value or not. * @returns {PathElement} - Returns the annotation path element. */ function getDecoratorElement(obj, offsetPoint, adjacentPoint, isSource) { const decEle = new PathElement(); updateDecoratorElement(obj, decEle, offsetPoint, adjacentPoint, isSource); return decEle; } /** * @private * @param {PdfAnnotationBaseModel} connector - Specified the annotation object. * @param {PointModel[]} pts - Specified the annotation point model array. * @returns {PointModel[]} - Returns the annotation point model array. */ function clipDecorators(connector, pts) { pts[0] = clipDecorator(connector, pts, true); pts[pts.length - 1] = clipDecorator(connector, pts, false); return pts; } /** * @private * @param {PdfAnnotationBaseModel} connector - Specified the annotation connector object. * @param {PointModel[]} points - Specified the annotation offset point. * @param {boolean} isSource - Specified the is source value or not. * @returns {PointModel} - Returns the annotation point model. */ function clipDecorator(connector, points, isSource) { let point = { x: 0, y: 0 }; let start = { x: 0, y: 0 }; let end = { x: 0, y: 0 }; const length = points.length; start = !isSource ? points[length - 1] : points[0]; end = !isSource ? points[length - 2] : points[1]; let len = Point.distancePoints(start, end); len = (len === 0) ? 1 : len; const width = connector.thickness; point.x = (Math.round(start.x + width * (end.x - start.x) / len)); point.y = (Math.round(start.y + width * (end.y - start.y) / len)); const strokeWidth = 1; point = Point.adjustPoint(point, end, true, (strokeWidth / 2)); return point; } /** * @param {PdfAnnotationBaseModel} obj - Specified the annotation object. * @param {PointModel[]} points - Specified the annotation point model array. * @param {MeasureAnnotation} measure - Specified the measure annotation object. * @param {PdfViewer} pdfviewer - Specified the pdfviewer element. * @hidden * @returns {TextElement[]} - Returns the text element collections. */ function initDistanceLabel(obj, points, measure, pdfviewer) { const labels = []; const angle = Point.findAngle(points[0], points[1]); const textele = textElement(obj, angle); if (!pdfviewer.enableImportAnnotationMeasurement && obj.notes && obj.notes !== '') { textele.content = obj.notes; } else { textele.content = measure.setConversion(findPointsLength([points[0], points[1]]) * measure.pixelToPointFactor, obj); } textele.rotateValue = { y: -10, angle: angle }; if (obj.enableShapeLabel === true) { textele.style.strokeColor = obj.labelBorderColor; textele.style.fill = obj.labelFillColor; textele.style.fontSize = obj.fontSize; textele.style.color = obj.fontColor; textele.style.fontFamily = obj.fontFamily; } labels.push(textele); return labels; } /** * @param {PdfAnnotationBaseModel} obj - Specified the annotation object. * @param {PointModel[]} points - Specified the annotation point model array. * @param {MeasureAnnotation} measure - Specified the measure annotation object. * @hidden * @returns {string} - Returns the distance value. */ function updateDistanceLabel(obj, points, measure) { let distance; for (let i = 0; i < obj.wrapper.children.length; i++) { const textElement = obj.wrapper.children[parseInt(i.toString(), 10)]; if (textElement && !isNullOrUndefined(textElement.content)) { distance = measure.setConversion(findPointsLength([points[0], points[1]]) * measure.pixelToPointFactor, obj); textElement.content = distance; textElement.childNodes[0].text = textElement.content; textElement.refreshTextElement(); } } return distance; } /** * @param {PdfAnnotationBaseModel} obj - Specified the annotation object. * @param {MeasureAnnotation} measure - Specified the measure annotation object. * @hidden * @returns {string} - Returns the radius label value. */ function updateRadiusLabel(obj, measure) { let radius; for (let i = 0; i < obj.wrapper.children.length; i++) { const textElement = obj.wrapper.children[parseInt(i.toString(), 10)]; if (textElement && !isNullOrUndefined(textElement.content)) { radius = measure.setConversion((obj.bounds.width / 2) * measure.pixelToPointFactor, obj); textElement.content = radius; if (textElement.childNodes.length === 2) { textElement.childNodes[0].text = radius; textElement.childNodes.splice(textElement.childNodes.length - 1, 1); } else { textElement.childNodes[0].text = radius; } textElement.refreshTextElement(); } } return radius; } /** * @param {PdfAnnotationBaseModel} obj - Specified the annotation object. * @param {PointModel[]} points - Specified the annotation point model array. * @param {MeasureAnnotation} measure - Specified the measure annotation object. * @param {PdfViewer} pdfviewer - Specified the pdfviewer element. * @hidden * @returns {TextElement[]} - Returns the text element collections. */ function initPerimeterLabel(obj, points, measure, pdfviewer) { const labels = []; const angle = Point.findAngle(points[0], points[1]); const textele = textElement(obj, angle); if (!pdfviewer.enableImportAnnotationMeasurement && obj.notes && obj.notes !== '') { textele.content = obj.notes; } else { textele.content = measure.calculatePerimeter(obj); } if (obj.enableShapeLabel === true) { textele.style.strokeColor = obj.labelBorderColor; textele.style.fill = obj.labelFillColor; textele.style.fontSize = obj.fontSize; textele.style.color = obj.fontColor; textele.style.fontFamily = obj.fontFamily; } textele.rotateValue = { y: -10, angle: angle }; labels.push(textele); return labels; } /** * @param {PdfAnnotationBaseModel} obj - Specified the annotation object. * @param {PointModel[]} points - Specified the annotation point model array. * @param {MeasureAnnotation} measure - Specified the measure annotation object. * @hidden * @returns {string} - Returns the perimeter label value. */ function updatePerimeterLabel(obj, points, measure) { let perimeter; for (let i = 0; i < obj.wrapper.children.length; i++) { const textElement = obj.wrapper.children[parseInt(i.toString(), 10)]; if (textElement && !isNullOrUndefined(textElement.content)) { perimeter = measure.calculatePerimeter(obj); textElement.content = perimeter; textElement.childNodes[0].text = textElement.content; textElement.refreshTextElement(); } } return perimeter; } /** * @param {PdfAnnotationBaseModel} obj - Specified the annotation object. * @hidden * @returns {void} */ function removePerimeterLabel(obj) { for (let i = 0; i < obj.wrapper.children.length; i++) { const textElement = obj.wrapper.children[parseInt(i.toString(), 10)]; if (textElement && !isNullOrUndefined(textElement.content)) { obj.wrapper.children.splice(i, 1); } } } /** * @param {PdfAnnotationBaseModel} obj - Specified the annotation object. * @hidden * @returns {void} */ function updateCalibrateLabel(obj) { if (obj.wrapper && obj.wrapper.children) { for (let i = 0; i < obj.wrapper.children.length; i++) { const textElement = obj.wrapper.children[parseInt(i.toString(), 10)]; if (textElement && !isNullOrUndefined(textElement.content)) { textElement.content = obj.notes; textElement.childNodes[0].text = textElement.content; textElement.refreshTextElement(); } } } } /** * Used to find the path for polygon shapes * * @param {PointModel[]} collection - Specified the polygon annotaion points collection. * @hidden * @returns {string} - Returns the polygon annotation path. */ function getPolygonPath(collection) { let path = ''; let seg; path = 'M' + collection[0].x + ' ' + collection[0].y; let i; for (i = 1; i < collection.length; i++) { seg = collection[parseInt(i.toString(), 10)]; path += 'L' + seg.x + ' ' + seg.y; } path += 'Z'; return path; } /** * @param {PdfAnnotationBaseModel} obj - Specified the annotation object. * @param {number} angle - Specified the annotaion rotation angle. * @hidden * @returns {TextElement} - Returns the annotation text element. */ function textElement(obj, angle) { const textele = new TextElement(); setElementStype(obj, textele); textele.style.fill = 'transparent'; textele.id = randomId(); textele.horizontalAlignment = 'Center'; textele.rotateValue = { y: 10, angle: angle }; textele.verticalAlignment = 'Top'; textele.relativeMode = 'Object'; textele.setOffsetWithRespectToBounds(.5, .5, 'Absolute'); textele.style.textWrapping = 'NoWrap'; return textele; } /** * @param {PdfAnnotationBaseModel} obj - Specified the annotation object. * @param {PointModel[]} points - Specified the annotaion leader points. * @hidden * @returns {PathElement[]} - Returns the annotation path elements. */ function initLeaders(obj, points) { const leaders = []; let leader = initLeader(obj, points[0], points[1]); leaders.push(leader); leader = initLeader(obj, points[1], points[0], true); leaders.push(leader); return leaders; } /** * @param {PdfAnnotationBaseModel} obj - Specified the annotation object. * @param {PointModel} point1 - Specified the annotaion leader point1. * @param {PointModel} point2 - Specified the annotaion leader point2. * @param {boolean} isSecondLeader - Specified the is second leader or not. * @hidden * @returns {PathElement} - Returns the annotation path element. */ function initLeader(obj, point1, point2, isSecondLeader) { const element = new PathElement(); element.offsetX = point1.x; element.offsetY = point1.y; const angle = Point.findAngle(point1, point2); const center = { x: (point1.x + point2.x) / 2, y: (point1.y + point2.y) / 2 }; let matrix = identityMatrix(); rotateMatrix(matrix, 0 - angle, center.x, center.y); let rotatedPoint = transformPointByMatrix(matrix, point1); const newPoint1 = { x: rotatedPoint.x, y: rotatedPoint.y - obj.leaderHeight }; matrix = identityMatrix(); rotateMatrix(matrix, angle, element.offsetX, element.offsetY); rotatedPoint = transformPointByMatrix(matrix, newPoint1); const finalPoint = { x: point1.x, y: point1.y }; element.offsetX = finalPoint.x; element.offsetY = finalPoint.y; element.transform = RotateTransform.Self; const getPath = 'M' + point1.x + ',' + point1.y + ',L' + rotatedPoint.x + ',' + rotatedPoint.y + 'Z'; const size = new Size(0, obj.leaderHeight); element.pivot.x = .5; if (isSecondLeader) { element.id = 'leader2_' + randomId(); element.pivot.y = 0; } else { element.id = 'leader1_' + randomId(); element.pivot.y = 1; } setElementStype(obj, element); element.rotateAngle = angle; element.data = getPath; element.canMeasurePath = true; element.width = size.width; element.height = size.height; return element; } /** * @private * @param {PdfAnnotationBaseModel} connector - Specified the annotation connector object. * @param {PointModel} reference - Specified the pointer reference value. * @returns {boolean} - Returns true or false. */ function isPointOverConnector(connector, reference) { const vertexPoints = connector.vertexPoints; if (!isNullOrUndefined(vertexPoints)) { for (let i = 0; i < vertexPoints.length - 1; i++) { const start = vertexPoints[parseInt(i.toString(), 10)]; const end = vertexPoints[i + 1]; const rect = Rect.toBounds([start, end]); rect.Inflate(10); if (rect.containsPoint(reference)) { const intersectinPt = findNearestPoint(reference, start, end); const segment1 = { x1: start.x, x2: end.x, y1: start.y, y2: end.y }; const segment2 = { x1: reference.x, x2: intersectinPt.x, y1: reference.y, y2: intersectinPt.y }; const intersectDetails = intersect3(segment1, segment2); if (intersectDetails.enabled) { const distance = Point.findLength(reference, intersectDetails.intersectPt); if (Math.abs(distance) < 10) { return true; } } else { const rect = Rect.toBounds([reference, reference]); rect.Inflate(3); if (rect.containsPoint(start) || rect.containsPoint(end)) { return true; } } if (Point.equals(reference, intersectinPt)) { return true; } } } } return false; } /** * @param {PointModel} reference - Specified the pointer reference value. * @param {PointModel} start - Specified the pointer start value. * @param {PointModel} end - Specified the pointer end value. * @private * @returns {PointModel} - Returns annotation point model. */ function findNearestPoint(reference, start, end) { let shortestPoint; const shortest = Point.findLength(start, reference); const shortest1 = Point.findLength(end, reference); if (shortest > shortest1) { shortestPoint = end; } else { shortestPoint = start; } const angleBWStAndEnd = Point.findAngle(start, end); const angleBWStAndRef = Point.findAngle(shortestPoint, reference); const r = Point.findLength(shortestPoint, reference); const vaAngle = angleBWStAndRef + ((angleBWStAndEnd - angleBWStAndRef) * 2); return { x: (shortestPoint.x + r * Math.cos(vaAngle * Math.PI / 180)), y: (shortestPoint.y + r * Math.sin(vaAngle * Math.PI / 180)) }; } /** * @param {DecoratorShapes} shape - Specified the annotation decorator shapes. * @hidden * @returns {string} - Returns the annotation decorator shape value. */ function getDecoratorShape(shape) { return decoratorShapes[`${shape}`]; } const decoratorShapes = { 'OpenArrow': 'M15.9,23 L5,16 L15.9,9 L17,10.7 L8.7,16 L17,21.3Z', 'Square': 'M0,0 L10,0 L10,10 L0,10 z', 'Fletch': 'M14.8,10c0,0-3.5,6,0.2,12c0,0-2.5-6-10.9-6C4.1,16,11.3,16,14.8,10z', 'OpenFetch': 'M6,17c-0.6,0-1-0.4-1-1s0.4-1,1-1c10.9,0,11-5,11-5' + 'c0-0.6,0.4-1,1-1s1,0.4,1,1C19,10.3,18.9,17,6,17C6,17,6,17,6,17z ' + 'M18,23c-0.5,0-1-0.4-1-1c0-0.2-0.3-5-11-5c-0.6,0-1-0.5-1-1s0.4-1,1-1c0,0,0,0,0,0' + 'c12.9,0,13,6.7,13,7 C19,22.6,18.6,23,18,23z', 'IndentedArrow': 'M17,10c0,0-4.5,5.5,0,12L5,16L17,10z', 'OutdentedArrow': 'M14.6,10c0,0,5.4,6,0,12L5,16L14.6,10z', 'DoubleArrow': 'M19,10 L19,22 L13,16Z M12,10 L12,22 L6,16Z', 'Arrow': 'M15,10 L15,22 L5,16Z', 'Diamond': 'M12,23l-7-7l7-7l6.9,7L12,23z', 'Circle': 'M0,50 A50,50,0 1 1 100,50 A50,50,0 1 1 0,50 Z', 'Butt': 'M0,0 L0,90' }; /** * HTMLElement defines the basic html elements */ class DiagramHtmlElement extends DrawingElement { /** * set the id for each element * * @param {string} nodeTemplate - Set the id for each element. * @returns {void} * * @private */ constructor(nodeTemplate) { super(); this.templateFn = this.templateCompiler(nodeTemplate);