\n * \n * ```\n */\nvar Sparkline = /** @class */ (function (_super) {\n __extends(Sparkline, _super);\n // Sparkline rendering starts from here.\n /**\n * Constructor for creating the Sparkline widget\n */\n function Sparkline(options, element) {\n var _this = _super.call(this, options, element) || this;\n /** @private */\n _this.isDevice = Browser.isDevice;\n return _this;\n }\n /**\n * Initializing pre-required values for sparkline.\n */\n Sparkline.prototype.preRender = function () {\n this.unWireEvents();\n this.trigger('load', { sparkline: this });\n this.sparklineRenderer = new SparklineRenderer(this);\n this.createSVG();\n this.wireEvents();\n this.setCulture();\n };\n /**\n * Sparkline Elements rendering starting.\n */\n Sparkline.prototype.render = function () {\n // Sparkline rendering splitted into rendering and calculations\n this.sparklineRenderer.processData();\n this.renderSparkline();\n this.element.appendChild(this.svgObject);\n this.setSecondaryElementPosition();\n this.trigger('loaded', { sparkline: this });\n };\n /**\n * To render sparkline elements\n */\n Sparkline.prototype.renderSparkline = function () {\n // To render the sparkline elements\n this.renderBorder();\n this.createDiv();\n this.sparklineRenderer.renderSeries();\n };\n /**\n * Create secondary element for the tooltip\n */\n Sparkline.prototype.createDiv = function () {\n var tooltipDiv = document.createElement('div');\n tooltipDiv.id = this.element.id + '_Secondary_Element';\n tooltipDiv.setAttribute('style', 'position: relative');\n this.element.appendChild(tooltipDiv);\n this.element.style.display = 'block';\n this.element.style.position = 'relative';\n };\n /**\n * To set the left and top position for data label template for sparkline\n */\n Sparkline.prototype.setSecondaryElementPosition = function () {\n var element = getIdElement(this.element.id + '_Secondary_Element');\n if (!element) {\n return;\n }\n var rect = this.element.getBoundingClientRect();\n var svgRect = getIdElement(this.element.id + '_svg').getBoundingClientRect();\n element.style.left = Math.max(svgRect.left - rect.left, 0) + 'px';\n element.style.top = Math.max(svgRect.top - rect.top, 0) + 'px';\n };\n /**\n * @private\n * Render the sparkline border\n */\n Sparkline.prototype.renderBorder = function () {\n var width = this.containerArea.border.width;\n var borderRect;\n if (width > 0 || this.containerArea.background !== 'transparent') {\n borderRect = new RectOption(this.element.id + '_SparklineBorder', this.containerArea.background, this.containerArea.border, 1, new Rect(width / 2, width / 2, this.availableSize.width - width, this.availableSize.height - width));\n this.svgObject.appendChild(drawRectangle(this, borderRect));\n }\n // Used to create clip path sparkline\n var padding = this.padding;\n borderRect = new RectOption(this.element.id + '_sparkline_clip_rect', 'transparent', { color: 'transparent', width: 0 }, 1, new Rect(padding.left, padding.top, this.availableSize.width - (padding.left + padding.right), this.availableSize.height - (padding.top + padding.bottom)));\n var clipPath = this.renderer.createClipPath({ id: this.element.id + '_sparkline_clip_path' });\n drawRectangle(this, borderRect, clipPath);\n this.svgObject.appendChild(clipPath);\n };\n /**\n * To create svg element for sparkline\n */\n Sparkline.prototype.createSVG = function () {\n this.removeSvg();\n createSvg(this);\n };\n /**\n * To Remove the Sparkline SVG object\n */\n Sparkline.prototype.removeSvg = function () {\n if (this.svgObject) {\n while (this.svgObject.childNodes.length > 0) {\n this.svgObject.removeChild(this.svgObject.firstChild);\n }\n if (!this.svgObject.hasChildNodes() && this.svgObject.parentNode) {\n remove(this.svgObject);\n }\n }\n removeElement(this.element.id + '_Secondary_Element');\n if (this.sparklineTooltipModule) {\n this.sparklineTooltipModule.removeTooltipElements();\n }\n };\n /**\n * Method to set culture for sparkline\n */\n Sparkline.prototype.setCulture = function () {\n this.intl = new Internationalization();\n this.localeObject = new L10n(this.getModuleName(), this.defaultLocalConstants, this.locale);\n };\n /**\n * To provide the array of modules needed for sparkline rendering\n * @return {ModuleDeclaration[]}\n * @private\n */\n Sparkline.prototype.requiredModules = function () {\n var modules = [];\n if (this.tooltipSettings.visible || this.tooltipSettings.trackLineSettings.visible) {\n modules.push({\n member: 'SparklineTooltip',\n args: [this]\n });\n }\n return modules;\n };\n /**\n * Method to unbind events for sparkline chart\n */\n Sparkline.prototype.unWireEvents = function () {\n var move = Browser.touchMoveEvent;\n var cancel = Browser.isPointer ? 'pointerleave' : 'mouseleave';\n /*! UnBind the Event handler */\n EventHandler.remove(this.element, Browser.touchMoveEvent, this.sparklineMove);\n EventHandler.remove(this.element, cancel, this.sparklineMouseLeave);\n EventHandler.remove(this.element, Browser.touchEndEvent, this.sparklineMouseEnd);\n window.removeEventListener((Browser.isTouch && ('orientation' in window && 'onorientationchange' in window)) ? 'orientationchange' : 'resize', this.sparklineResize);\n };\n /**\n * Method to bind events for the sparkline\n */\n Sparkline.prototype.wireEvents = function () {\n var cancel = Browser.isPointer ? 'pointerleave' : 'mouseleave';\n /*! Bind the Event handler */\n EventHandler.add(this.element, Browser.touchMoveEvent, this.sparklineMove, this);\n EventHandler.add(this.element, 'click', this.sparklineClick, this);\n EventHandler.add(this.element, cancel, this.sparklineMouseLeave, this);\n EventHandler.add(this.element, Browser.touchEndEvent, this.sparklineMouseEnd, this);\n window.addEventListener((Browser.isTouch && ('orientation' in window && 'onorientationchange' in window)) ? 'orientationchange' : 'resize', this.sparklineResize.bind(this));\n new Touch(this.element);\n };\n /**\n * Sparkline resize event.\n * @private\n */\n Sparkline.prototype.sparklineResize = function (e) {\n var _this = this;\n var args = {\n name: 'resize',\n previousSize: this.availableSize,\n sparkline: this,\n currentSize: new Size(0, 0)\n };\n if (this.resizeTo) {\n clearTimeout(this.resizeTo);\n }\n this.resizeTo = setTimeout(function () {\n if (_this.isDestroyed) {\n clearTimeout(_this.resizeTo);\n return;\n }\n _this.unWireEvents();\n _this.createSVG();\n _this.refreshing = true;\n _this.wireEvents();\n args.currentSize = _this.availableSize;\n _this.trigger('resize', args);\n _this.render();\n }, 500);\n return false;\n };\n /**\n * Handles the mouse move on sparkline.\n * @return {boolean}\n * @private\n */\n Sparkline.prototype.sparklineMove = function (e) {\n this.setSparklineMouseXY(e);\n this.notify(Browser.touchMoveEvent, e);\n var args = {\n name: 'sparklineMouseMove', cancel: false, sparkline: this, event: e\n };\n this.trigger(args.name, args);\n var pointClick = this.isPointRegion(e);\n if (pointClick.isPointRegion) {\n var pointArgs = {\n name: 'pointRegionMouseMove', cancel: false, event: e, sparkline: this, pointIndex: pointClick.pointIndex\n };\n this.trigger(pointArgs.name, pointArgs);\n }\n return false;\n };\n /**\n * Handles the mouse click on sparkline.\n * @return {boolean}\n * @private\n */\n Sparkline.prototype.sparklineClick = function (e) {\n this.setSparklineMouseXY(e);\n var args = {\n name: 'sparklineMouseClick', cancel: false, sparkline: this, event: e\n };\n this.trigger(args.name, args);\n var pointClick = this.isPointRegion(e);\n if (pointClick.isPointRegion) {\n var pointArgs = {\n name: 'pointRegionMouseClick', cancel: false, event: e, sparkline: this, pointIndex: pointClick.pointIndex\n };\n this.trigger(pointArgs.name, pointArgs);\n }\n return false;\n };\n /**\n * To check mouse event target is point region or not.\n */\n Sparkline.prototype.isPointRegion = function (e) {\n var _this = this;\n var startId = this.element.id + '_';\n var id = e.target.id.replace(startId, '').split('_');\n if (id[1] === this.type.toLowerCase()) {\n var index_1 = parseInt(id[2], 10);\n if ((isNullOrUndefined(index_1) || isNaN(index_1)) && (this.type === 'Line' || this.type === 'Area')) {\n this.sparklineRenderer.visiblePoints.forEach(function (point, i) {\n if (withInBounds(_this.mouseX, _this.mouseY, new Rect(point.x - 5, point.y - 5, 10, 10))) {\n index_1 = i;\n return;\n }\n });\n }\n return { isPointRegion: true, pointIndex: index_1 };\n }\n return { isPointRegion: false, pointIndex: null };\n };\n /**\n * Handles the mouse end.\n * @return {boolean}\n * @private\n */\n Sparkline.prototype.sparklineMouseEnd = function (e) {\n this.setSparklineMouseXY(e);\n this.notify(Browser.touchEndEvent, e);\n return false;\n };\n /**\n * Handles the mouse leave on sparkline.\n * @return {boolean}\n * @private\n */\n Sparkline.prototype.sparklineMouseLeave = function (e) {\n this.setSparklineMouseXY(e);\n this.notify(Browser.isPointer ? 'pointerleave' : 'mouseleave', e);\n return false;\n };\n /**\n * Method to set mouse x, y from events\n */\n Sparkline.prototype.setSparklineMouseXY = function (e) {\n var pageY;\n var pageX;\n if (e.type.indexOf('touch') > -1) {\n this.isTouch = true;\n var touchArg = e;\n pageX = touchArg.changedTouches[0].clientX;\n pageY = touchArg.changedTouches[0].clientY;\n }\n else {\n this.isTouch = e.pointerType === 'touch' || e.pointerType === '2';\n pageY = e.clientY;\n pageX = e.clientX;\n }\n var rect = this.element.getBoundingClientRect();\n var svgRect = getIdElement(this.element.id + '_svg').getBoundingClientRect();\n this.mouseY = (pageY - rect.top) - Math.max(svgRect.top - rect.top, 0);\n this.mouseX = (pageX - rect.left) - Math.max(svgRect.left - rect.left, 0);\n };\n /**\n * To change rendering while property value modified.\n * @private\n */\n Sparkline.prototype.onPropertyChanged = function (newProp, oldProp) {\n var render = false;\n var refresh = false;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'xName':\n case 'yName':\n case 'dataSource':\n case 'axisSettings':\n case 'type':\n case 'valueType':\n refresh = true;\n break;\n case 'border':\n case 'markerSettings':\n case 'dataLabelSettings':\n case 'tooltipSettings':\n case 'startPointColor':\n case 'highPointColor':\n case 'lowPointColor':\n case 'endPointColor':\n case 'negativePointColor':\n case 'theme':\n render = true;\n break;\n }\n }\n if (refresh) {\n this.createSVG();\n this.sparklineRenderer.processData();\n this.refreshSparkline();\n }\n else if (render) {\n this.createSVG();\n this.refreshSparkline();\n }\n };\n /**\n * To render sparkline series and appending.\n */\n Sparkline.prototype.refreshSparkline = function () {\n // Issue fix. React had native render method. So OnProperty change used render method won't wrok. \n this.renderSparkline();\n this.element.appendChild(this.svgObject);\n this.setSecondaryElementPosition();\n };\n /**\n * Get component name\n */\n Sparkline.prototype.getModuleName = function () {\n return 'sparkline';\n };\n /**\n * Destroy the component\n */\n Sparkline.prototype.destroy = function () {\n _super.prototype.destroy.call(this);\n };\n /**\n * Get the properties to be maintained in the persisted state.\n * @private\n */\n Sparkline.prototype.getPersistData = function () {\n return '';\n };\n __decorate([\n Property(null)\n ], Sparkline.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], Sparkline.prototype, \"height\", void 0);\n __decorate([\n Complex({}, SparklineBorder)\n ], Sparkline.prototype, \"border\", void 0);\n __decorate([\n Property('Line')\n ], Sparkline.prototype, \"type\", void 0);\n __decorate([\n Property([])\n ], Sparkline.prototype, \"dataSource\", void 0);\n __decorate([\n Property('Numeric')\n ], Sparkline.prototype, \"valueType\", void 0);\n __decorate([\n Property(null)\n ], Sparkline.prototype, \"xName\", void 0);\n __decorate([\n Property(null)\n ], Sparkline.prototype, \"yName\", void 0);\n __decorate([\n Property('#00bdae')\n ], Sparkline.prototype, \"fill\", void 0);\n __decorate([\n Property('')\n ], Sparkline.prototype, \"highPointColor\", void 0);\n __decorate([\n Property('')\n ], Sparkline.prototype, \"lowPointColor\", void 0);\n __decorate([\n Property('')\n ], Sparkline.prototype, \"startPointColor\", void 0);\n __decorate([\n Property('')\n ], Sparkline.prototype, \"endPointColor\", void 0);\n __decorate([\n Property('')\n ], Sparkline.prototype, \"negativePointColor\", void 0);\n __decorate([\n Property('')\n ], Sparkline.prototype, \"tiePointColor\", void 0);\n __decorate([\n Property([])\n ], Sparkline.prototype, \"palette\", void 0);\n __decorate([\n Property(1)\n ], Sparkline.prototype, \"lineWidth\", void 0);\n __decorate([\n Property(1)\n ], Sparkline.prototype, \"opacity\", void 0);\n __decorate([\n Property(null)\n ], Sparkline.prototype, \"format\", void 0);\n __decorate([\n Property(false)\n ], Sparkline.prototype, \"useGroupingSeparator\", void 0);\n __decorate([\n Complex({}, SparklineTooltipSettings)\n ], Sparkline.prototype, \"tooltipSettings\", void 0);\n __decorate([\n Complex({}, ContainerArea)\n ], Sparkline.prototype, \"containerArea\", void 0);\n __decorate([\n Collection([], RangeBandSettings)\n ], Sparkline.prototype, \"rangeBandSettings\", void 0);\n __decorate([\n Complex({}, AxisSettings)\n ], Sparkline.prototype, \"axisSettings\", void 0);\n __decorate([\n Complex({}, SparklineMarkerSettings)\n ], Sparkline.prototype, \"markerSettings\", void 0);\n __decorate([\n Complex({}, SparklineDataLabelSettings)\n ], Sparkline.prototype, \"dataLabelSettings\", void 0);\n __decorate([\n Complex({}, Padding)\n ], Sparkline.prototype, \"padding\", void 0);\n __decorate([\n Property('Material')\n ], Sparkline.prototype, \"theme\", void 0);\n __decorate([\n Event()\n ], Sparkline.prototype, \"loaded\", void 0);\n __decorate([\n Event()\n ], Sparkline.prototype, \"load\", void 0);\n __decorate([\n Event()\n ], Sparkline.prototype, \"tooltipInitialize\", void 0);\n __decorate([\n Event()\n ], Sparkline.prototype, \"seriesRendering\", void 0);\n __decorate([\n Event()\n ], Sparkline.prototype, \"axisRendering\", void 0);\n __decorate([\n Event()\n ], Sparkline.prototype, \"pointRendering\", void 0);\n __decorate([\n Event()\n ], Sparkline.prototype, \"pointRegionMouseMove\", void 0);\n __decorate([\n Event()\n ], Sparkline.prototype, \"pointRegionMouseClick\", void 0);\n __decorate([\n Event()\n ], Sparkline.prototype, \"sparklineMouseMove\", void 0);\n __decorate([\n Event()\n ], Sparkline.prototype, \"sparklineMouseClick\", void 0);\n __decorate([\n Event()\n ], Sparkline.prototype, \"dataLabelRendering\", void 0);\n __decorate([\n Event()\n ], Sparkline.prototype, \"markerRendering\", void 0);\n __decorate([\n Event()\n ], Sparkline.prototype, \"resize\", void 0);\n Sparkline = __decorate([\n NotifyPropertyChanges\n ], Sparkline);\n return Sparkline;\n}(Component));\nexport { Sparkline };\n","import { PathOption, drawPath, getIdElement, Rect, withInBounds } from '../utils/helper';\nimport { Browser, extend, isNullOrUndefined, remove, createElement } from '@syncfusion/ej2-base';\nimport { Tooltip } from '@syncfusion/ej2-svg-base';\n/**\n * Sparkline Tooltip Module\n */\nvar SparklineTooltip = /** @class */ (function () {\n function SparklineTooltip(sparkline) {\n this.sparkline = sparkline;\n this.addEventListener();\n }\n /**\n * @hidden\n */\n SparklineTooltip.prototype.addEventListener = function () {\n if (this.sparkline.isDestroyed) {\n return;\n }\n // this.sparkline.on('mouseleave', this.mouseLeaveHandler, this);\n this.sparkline.on(Browser.isPointer ? 'pointerleave' : 'mouseleave', this.mouseLeaveHandler, this);\n this.sparkline.on(Browser.touchMoveEvent, this.mouseMoveHandler, this);\n this.sparkline.on(Browser.touchEndEvent, this.mouseUpHandler, this);\n };\n SparklineTooltip.prototype.mouseLeaveHandler = function (e) {\n this.removeTooltipElements();\n };\n SparklineTooltip.prototype.mouseUpHandler = function (e) {\n if (!this.sparkline.isTouch) {\n return;\n }\n this.processTooltip(e);\n this.fadeOut();\n };\n SparklineTooltip.prototype.fadeOut = function () {\n clearTimeout(this.clearTooltip);\n this.clearTooltip = setTimeout(this.removeTooltipElements.bind(this), 5000);\n };\n /**\n * To remove tooltip and tracker elements.\n * @private\n */\n SparklineTooltip.prototype.removeTooltipElements = function () {\n this.removeTooltip();\n this.removeTracker();\n };\n SparklineTooltip.prototype.mouseMoveHandler = function (e) {\n this.processTooltip(e);\n };\n SparklineTooltip.prototype.processTooltip = function (e) {\n var pointIndex;\n var spark = this.sparkline;\n var visiblePoints = spark.sparklineRenderer.visiblePoints;\n var mouseX = spark.mouseX;\n var mouseY = spark.mouseY;\n if (spark.type !== 'Pie') {\n var locations = extend([], [], visiblePoints);\n var trackerPositions = locations.map(function (point) { return point.location.x; });\n var temp = Infinity;\n var mousePosition = void 0;\n for (var i = 0, diff = void 0, len = trackerPositions.length; i < len; i++) {\n diff = Math.abs(mouseX - trackerPositions[i]);\n if (temp > diff) {\n temp = diff;\n mousePosition = trackerPositions[i];\n pointIndex = i;\n }\n }\n }\n else {\n var target = e.target.id;\n pointIndex = parseInt(target.split('_pie_')[1], 10);\n }\n if (isNaN(pointIndex) || !withInBounds(mouseX, mouseY, new Rect(0, 0, spark.availableSize.width, spark.availableSize.height))) {\n this.removeTracker();\n this.removeTooltip();\n return;\n }\n if (this.pointIndex === pointIndex) {\n return;\n }\n this.pointIndex = pointIndex;\n this.renderTrackerLine(visiblePoints[pointIndex]);\n this.renderTooltip(visiblePoints[pointIndex]);\n };\n /**\n * To render tracker line\n */\n SparklineTooltip.prototype.renderTrackerLine = function (points) {\n var spark = this.sparkline;\n var tracker = spark.tooltipSettings.trackLineSettings;\n var color = (spark.theme === 'Highcontrast') ? '#FFFFFF' : '#000000';\n color = (tracker.color) ? tracker.color : color;\n if (!tracker.visible || spark.type === 'Pie') {\n return;\n }\n var group = getIdElement(spark.element.id + '_sparkline_tracker_g');\n if (isNullOrUndefined(group)) {\n group = spark.renderer.createGroup({ id: spark.element.id + '_sparkline_tracker_g' });\n spark.svgObject.appendChild(group);\n }\n var pathEle = getIdElement(spark.element.id + '_sparkline_tracker');\n var d = 'M ' + points.location.x + ' ' + spark.padding.top + ' L ' + points.location.x + ' ' +\n (spark.availableSize.height - spark.padding.bottom);\n if (isNullOrUndefined(pathEle)) {\n var pathOption = new PathOption(spark.element.id + '_sparkline_tracker', 'transparent', tracker.width, color, 1);\n pathOption.d = d;\n drawPath(spark, pathOption, group);\n }\n else {\n pathEle.setAttribute('d', d);\n pathEle.setAttribute('stroke-width', tracker.width.toString());\n pathEle.setAttribute('stroke', color);\n }\n };\n /**\n * To render line series\n */\n SparklineTooltip.prototype.renderTooltip = function (points) {\n var spark = this.sparkline;\n var tooltip = spark.tooltipSettings;\n if (!tooltip.visible) {\n return;\n }\n var div = getIdElement(spark.element.id + '_sparkline_tooltip_div');\n if (isNullOrUndefined(div)) {\n div = createElement('div', { id: spark.element.id + '_sparkline_tooltip_div',\n styles: 'pointer-events: none; position: absolute;z-index:1;' });\n getIdElement(spark.element.id + '_Secondary_Element').appendChild(div);\n }\n var size = (spark.markerSettings.visible.length) ? spark.markerSettings.size : 0;\n var x = points.xVal.toString();\n if (spark.valueType === 'Category') {\n x = spark.dataSource[points.xVal][spark.xName];\n }\n else if (spark.valueType === 'DateTime') {\n x = new Date(points.xVal).toDateString();\n }\n var y = points.yVal.toString();\n var text = this.getFormat(spark.tooltipSettings.format, spark, x, this.formatValue(points.yVal, spark).toString());\n var location = { x: points.location.x, y: points.location.y };\n location = spark.type === 'Pie' ? { x: points.location.x, y: points.location.y } : location;\n var tooltipEvent = {\n name: 'tooltipInitialize', cancel: false, text: text,\n textStyle: {\n size: tooltip.textStyle.size,\n opacity: tooltip.textStyle.opacity,\n fontWeight: tooltip.textStyle.fontWeight,\n fontStyle: tooltip.textStyle.fontStyle,\n fontFamily: tooltip.textStyle.fontFamily,\n color: tooltip.textStyle.color,\n }\n };\n spark.trigger(tooltipEvent.name, tooltipEvent);\n if (tooltipEvent.cancel) {\n return;\n }\n var element = new Tooltip({\n content: tooltipEvent.text,\n border: tooltip.border,\n template: tooltip.template,\n data: spark.dataSource[this.pointIndex],\n fill: tooltip.fill,\n textStyle: tooltipEvent.textStyle,\n enableAnimation: false,\n location: { x: location.x, y: location.y },\n shared: false,\n areaBounds: new Rect(0, 0, spark.availableSize.width, spark.availableSize.height),\n theme: spark.theme\n });\n element.appendTo(div);\n };\n /**\n * To get tooltip format.\n */\n SparklineTooltip.prototype.getFormat = function (format, spark, x, y) {\n if (isNullOrUndefined(format) || format === '') {\n return [y];\n }\n var text = format;\n text = text.split('${' + spark.xName + '}').join(x).split('${' + spark.yName + '}').join(y);\n return [text];\n };\n SparklineTooltip.prototype.formatValue = function (value, sparkline) {\n var formatValue;\n var formatFunction;\n if (sparkline.format && !isNaN(Number(value))) {\n formatFunction = sparkline.intl.getNumberFormat({ format: sparkline.format, useGrouping: sparkline.useGroupingSeparator });\n formatValue = formatFunction(value);\n }\n else {\n formatValue = value;\n }\n return formatValue;\n };\n /**\n * To remove tracker line.\n */\n SparklineTooltip.prototype.removeTracker = function () {\n var tracker = this.sparkline.element.querySelector('#' + this.sparkline.element.id + '_sparkline_tracker_g');\n return tracker ? remove(tracker) : null;\n };\n /**\n * To remove tooltip element.\n */\n SparklineTooltip.prototype.removeTooltip = function () {\n this.pointIndex = null;\n var tooltip = this.sparkline.element.querySelector('#' + this.sparkline.element.id + '_sparkline_tooltip_div');\n return tooltip ? remove(tooltip) : null;\n };\n /**\n * Get module name.\n */\n SparklineTooltip.prototype.getModuleName = function () {\n return 'SparklineTooltip';\n };\n /**\n * To destroy the tooltip.\n */\n SparklineTooltip.prototype.destroy = function (sparkline) {\n // To remove tooltip module\n };\n return SparklineTooltip;\n}());\nexport { SparklineTooltip };\n","import * as index from '@syncfusion/ej2-charts';\nindex.Chart.Inject( index.LineSeries,index.ScatterSeries,index.ColumnSeries,index.SplineSeries,index.SplineAreaSeries,index.StripLine,index.AreaSeries,index.ScrollBar,index.StepLineSeries,index.StepAreaSeries,index.StackingColumnSeries,index.StackingAreaSeries,index.BarSeries,index.StackingBarSeries,index.RangeColumnSeries,index.BubbleSeries,index.Tooltip,index.Crosshair,index.Category,index.DateTime,index.Logarithmic,index.Legend,index.Zoom,index.DataLabel,index.Selection,index.ChartAnnotation,index.HiloSeries,index.HiloOpenCloseSeries,index.WaterfallSeries,index.RangeAreaSeries,index.CandleSeries,index.PolarSeries,index.RadarSeries,index.SmaIndicator,index.TmaIndicator,index.EmaIndicator,index.AccumulationDistributionIndicator,index.MacdIndicator,index.AtrIndicator,index.RsiIndicator,index.MomentumIndicator,index.StochasticIndicator,index.BollingerBands,index.BoxAndWhiskerSeries,index.HistogramSeries,index.ErrorBar,index.Trendlines,index.DateTimeCategory,index.MultiColoredLineSeries,index.MultiColoredAreaSeries,index.MultiLevelLabel);\nindex.AccumulationChart.Inject( index.PieSeries,index.FunnelSeries,index.PyramidSeries,index.AccumulationTooltip,index.AccumulationLegend,index.AccumulationSelection,index.AccumulationDataLabel,index.AccumulationAnnotation);\nindex.RangeNavigator.Inject( index.RangeTooltip,index.PeriodSelector,index.AreaSeries,index.StepLineSeries,index.DateTime,index.Logarithmic);\nindex.Sparkline.Inject( index.SparklineTooltip);\nindex.Smithchart.Inject( index.SmithchartLegend,index.TooltipRender);\nexport * from '@syncfusion/ej2-charts';\n","/**\n * Specifies gauge Themes\n */\nexport var Theme;\n(function (Theme) {\n /** @private */\n Theme.axisLabelFont = {\n size: '12px',\n fontWeight: 'Normal',\n color: null,\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n };\n /** @private */\n Theme.axisLineColor = null;\n /** @private */\n Theme.tickLineColor = null;\n /** @private */\n Theme.pointerColor = null;\n})(Theme || (Theme = {}));\n/** @private */\nexport function getRangePalette(theme) {\n var palette = ['#50c917', '#27d5ff', '#fcde0b', '#ffb133', '#ff5985'];\n // switch (theme) {\n // case 'Material':\n // palette = ['#50c917', '#27d5ff', '#fcde0b', '#ffb133', '#ff5985'];\n // break;\n // case 'Fabric':\n // palette = ['#50c917', '#27d5ff', '#fcde0b', '#ffb133', '#ff5985'];\n // break;\n // }\n return palette;\n}\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty, Complex } from '@syncfusion/ej2-base';\n/**\n * Configures the borders in circular gauge.\n */\nvar Border = /** @class */ (function (_super) {\n __extends(Border, _super);\n function Border() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], Border.prototype, \"color\", void 0);\n __decorate([\n Property(1)\n ], Border.prototype, \"width\", void 0);\n return Border;\n}(ChildProperty));\nexport { Border };\n/**\n * Configures the fonts in circular gauge.\n */\nvar Font = /** @class */ (function (_super) {\n __extends(Font, _super);\n function Font() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('16px')\n ], Font.prototype, \"size\", void 0);\n __decorate([\n Property('')\n ], Font.prototype, \"color\", void 0);\n __decorate([\n Property('segoe UI')\n ], Font.prototype, \"fontFamily\", void 0);\n __decorate([\n Property('Normal')\n ], Font.prototype, \"fontWeight\", void 0);\n __decorate([\n Property('Normal')\n ], Font.prototype, \"fontStyle\", void 0);\n __decorate([\n Property(1)\n ], Font.prototype, \"opacity\", void 0);\n return Font;\n}(ChildProperty));\nexport { Font };\n/**\n * Configures the margin of circular gauge.\n */\nvar Margin = /** @class */ (function (_super) {\n __extends(Margin, _super);\n function Margin() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(10)\n ], Margin.prototype, \"left\", void 0);\n __decorate([\n Property(10)\n ], Margin.prototype, \"right\", void 0);\n __decorate([\n Property(10)\n ], Margin.prototype, \"top\", void 0);\n __decorate([\n Property(10)\n ], Margin.prototype, \"bottom\", void 0);\n return Margin;\n}(ChildProperty));\nexport { Margin };\n/**\n * Configures the tooltip in circular gauge.\n */\nvar TooltipSettings = /** @class */ (function (_super) {\n __extends(TooltipSettings, _super);\n function TooltipSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(false)\n ], TooltipSettings.prototype, \"enable\", void 0);\n __decorate([\n Property('#ffffff')\n ], TooltipSettings.prototype, \"fill\", void 0);\n __decorate([\n Complex({ color: '#686868', size: '13px' }, Font)\n ], TooltipSettings.prototype, \"textStyle\", void 0);\n __decorate([\n Property(null)\n ], TooltipSettings.prototype, \"format\", void 0);\n __decorate([\n Property(null)\n ], TooltipSettings.prototype, \"template\", void 0);\n __decorate([\n Property(true)\n ], TooltipSettings.prototype, \"enableAnimation\", void 0);\n __decorate([\n Complex({}, Border)\n ], TooltipSettings.prototype, \"border\", void 0);\n return TooltipSettings;\n}(ChildProperty));\nexport { TooltipSettings };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, Complex, ChildProperty, Collection } from '@syncfusion/ej2-base';\nimport { Font, Border } from '../model/base';\nimport { Theme } from '../model/theme';\n/**\n * Configures the axis line.\n */\nvar Line = /** @class */ (function (_super) {\n __extends(Line, _super);\n function Line() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(2)\n ], Line.prototype, \"width\", void 0);\n __decorate([\n Property('')\n ], Line.prototype, \"dashArray\", void 0);\n __decorate([\n Property(Theme.axisLineColor)\n ], Line.prototype, \"color\", void 0);\n return Line;\n}(ChildProperty));\nexport { Line };\n/**\n * Configures the axis label.\n */\nvar Label = /** @class */ (function (_super) {\n __extends(Label, _super);\n function Label() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Complex(Theme.axisLabelFont, Font)\n ], Label.prototype, \"font\", void 0);\n __decorate([\n Property('')\n ], Label.prototype, \"format\", void 0);\n __decorate([\n Property('Inside')\n ], Label.prototype, \"position\", void 0);\n __decorate([\n Property('None')\n ], Label.prototype, \"hiddenLabel\", void 0);\n __decorate([\n Property(false)\n ], Label.prototype, \"autoAngle\", void 0);\n __decorate([\n Property(false)\n ], Label.prototype, \"useRangeColor\", void 0);\n __decorate([\n Property(0)\n ], Label.prototype, \"offset\", void 0);\n return Label;\n}(ChildProperty));\nexport { Label };\n/**\n * Configures the ranges of an axis.\n */\nvar Range = /** @class */ (function (_super) {\n __extends(Range, _super);\n function Range() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], Range.prototype, \"start\", void 0);\n __decorate([\n Property(null)\n ], Range.prototype, \"end\", void 0);\n __decorate([\n Property(null)\n ], Range.prototype, \"radius\", void 0);\n __decorate([\n Property(10)\n ], Range.prototype, \"startWidth\", void 0);\n __decorate([\n Property(10)\n ], Range.prototype, \"endWidth\", void 0);\n __decorate([\n Property(null)\n ], Range.prototype, \"color\", void 0);\n return Range;\n}(ChildProperty));\nexport { Range };\n/**\n * Configures the major and minor tick lines of an axis.\n */\nvar Tick = /** @class */ (function (_super) {\n __extends(Tick, _super);\n function Tick() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], Tick.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], Tick.prototype, \"height\", void 0);\n __decorate([\n Property(null)\n ], Tick.prototype, \"interval\", void 0);\n __decorate([\n Property(0)\n ], Tick.prototype, \"offset\", void 0);\n __decorate([\n Property(Theme.tickLineColor)\n ], Tick.prototype, \"color\", void 0);\n __decorate([\n Property('Inside')\n ], Tick.prototype, \"position\", void 0);\n __decorate([\n Property(false)\n ], Tick.prototype, \"useRangeColor\", void 0);\n return Tick;\n}(ChildProperty));\nexport { Tick };\n/**\n * Configures the needle cap in pointer.\n */\nvar Cap = /** @class */ (function (_super) {\n __extends(Cap, _super);\n function Cap() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('#ffffff')\n ], Cap.prototype, \"color\", void 0);\n __decorate([\n Complex({ color: Theme.pointerColor, width: 8 }, Border)\n ], Cap.prototype, \"border\", void 0);\n __decorate([\n Property(8)\n ], Cap.prototype, \"radius\", void 0);\n return Cap;\n}(ChildProperty));\nexport { Cap };\n/**\n * Configures the back needle in pointers.\n */\nvar NeedleTail = /** @class */ (function (_super) {\n __extends(NeedleTail, _super);\n function NeedleTail() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(Theme.pointerColor)\n ], NeedleTail.prototype, \"color\", void 0);\n __decorate([\n Complex({ color: Theme.pointerColor, width: 0 }, Border)\n ], NeedleTail.prototype, \"border\", void 0);\n __decorate([\n Property('0%')\n ], NeedleTail.prototype, \"length\", void 0);\n return NeedleTail;\n}(ChildProperty));\nexport { NeedleTail };\n/**\n * Configures the animation of pointers.\n */\nvar Animation = /** @class */ (function (_super) {\n __extends(Animation, _super);\n function Animation() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(true)\n ], Animation.prototype, \"enable\", void 0);\n __decorate([\n Property(1000)\n ], Animation.prototype, \"duration\", void 0);\n return Animation;\n}(ChildProperty));\nexport { Animation };\n/**\n * ‘Annotation’ module is used to handle annotation action for an axis.\n */\nvar Annotation = /** @class */ (function (_super) {\n __extends(Annotation, _super);\n function Annotation() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], Annotation.prototype, \"content\", void 0);\n __decorate([\n Property(90)\n ], Annotation.prototype, \"angle\", void 0);\n __decorate([\n Property('50%')\n ], Annotation.prototype, \"radius\", void 0);\n __decorate([\n Property('-1')\n ], Annotation.prototype, \"zIndex\", void 0);\n __decorate([\n Property(false)\n ], Annotation.prototype, \"autoAngle\", void 0);\n __decorate([\n Complex({ size: '12px', color: '#686868' }, Font)\n ], Annotation.prototype, \"textStyle\", void 0);\n __decorate([\n Property(null)\n ], Annotation.prototype, \"description\", void 0);\n return Annotation;\n}(ChildProperty));\nexport { Annotation };\n/**\n * Configures the pointers of an axis.\n */\nvar Pointer = /** @class */ (function (_super) {\n __extends(Pointer, _super);\n function Pointer() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], Pointer.prototype, \"value\", void 0);\n __decorate([\n Property('Needle')\n ], Pointer.prototype, \"type\", void 0);\n __decorate([\n Property(null)\n ], Pointer.prototype, \"imageUrl\", void 0);\n __decorate([\n Property(null)\n ], Pointer.prototype, \"radius\", void 0);\n __decorate([\n Property(20)\n ], Pointer.prototype, \"pointerWidth\", void 0);\n __decorate([\n Complex({}, Cap)\n ], Pointer.prototype, \"cap\", void 0);\n __decorate([\n Complex({}, NeedleTail)\n ], Pointer.prototype, \"needleTail\", void 0);\n __decorate([\n Property(Theme.pointerColor)\n ], Pointer.prototype, \"color\", void 0);\n __decorate([\n Complex({ color: '#DDDDDD', width: 0 }, Border)\n ], Pointer.prototype, \"border\", void 0);\n __decorate([\n Complex(null, Animation)\n ], Pointer.prototype, \"animation\", void 0);\n __decorate([\n Property('Circle')\n ], Pointer.prototype, \"markerShape\", void 0);\n __decorate([\n Property(5)\n ], Pointer.prototype, \"markerHeight\", void 0);\n __decorate([\n Property(null)\n ], Pointer.prototype, \"description\", void 0);\n __decorate([\n Property(5)\n ], Pointer.prototype, \"markerWidth\", void 0);\n return Pointer;\n}(ChildProperty));\nexport { Pointer };\n/**\n * Configures an axis in a gauge.\n */\nvar Axis = /** @class */ (function (_super) {\n __extends(Axis, _super);\n function Axis() {\n /**\n * Specifies the minimum value of an axis.\n * @aspDefaultValueIgnore\n * @default null\n */\n var _this = _super !== null && _super.apply(this, arguments) || this;\n /** @private */\n _this.visibleLabels = [];\n return _this;\n }\n __decorate([\n Property(null)\n ], Axis.prototype, \"minimum\", void 0);\n __decorate([\n Property(null)\n ], Axis.prototype, \"maximum\", void 0);\n __decorate([\n Property(null)\n ], Axis.prototype, \"radius\", void 0);\n __decorate([\n Complex({}, Line)\n ], Axis.prototype, \"lineStyle\", void 0);\n __decorate([\n Collection([{}], Range)\n ], Axis.prototype, \"ranges\", void 0);\n __decorate([\n Collection([{}], Pointer)\n ], Axis.prototype, \"pointers\", void 0);\n __decorate([\n Collection([{}], Annotation)\n ], Axis.prototype, \"annotations\", void 0);\n __decorate([\n Complex({ width: 2, height: 10 }, Tick)\n ], Axis.prototype, \"majorTicks\", void 0);\n __decorate([\n Complex({ width: 2, height: 5 }, Tick)\n ], Axis.prototype, \"minorTicks\", void 0);\n __decorate([\n Property(200)\n ], Axis.prototype, \"startAngle\", void 0);\n __decorate([\n Property(160)\n ], Axis.prototype, \"endAngle\", void 0);\n __decorate([\n Property('ClockWise')\n ], Axis.prototype, \"direction\", void 0);\n __decorate([\n Property(null)\n ], Axis.prototype, \"background\", void 0);\n __decorate([\n Complex({}, Label)\n ], Axis.prototype, \"labelStyle\", void 0);\n return Axis;\n}(ChildProperty));\nexport { Axis };\n","import { stringToNumber, getLocationFromAngle, getFontStyle } from '../utils/helper';\nimport { getElement, getTemplateFunction, measureElementRect } from '../utils/helper';\nimport { annotationRender } from '../model/constants';\nimport { createElement } from '@syncfusion/ej2-base';\n/**\n * Annotation Module handles the Annotation of the axis.\n */\nvar Annotations = /** @class */ (function () {\n /**\n * Constructor for Annotation module.\n * @private.\n */\n function Annotations(gauge) {\n this.gauge = gauge;\n this.elementId = gauge.element.id;\n }\n /**\n * Method to render the annotation for circular gauge.\n */\n Annotations.prototype.renderAnnotation = function (axis, index) {\n var _this = this;\n var element = createElement('div', {\n id: this.elementId + '_Annotations_' + index\n });\n var parentElement = getElement(this.elementId + '_Secondary_Element');\n axis.annotations.map(function (annotation, annotationIndex) {\n if (annotation.content !== null) {\n _this.createTemplate(element, annotationIndex, index);\n }\n });\n if (parentElement && element.childElementCount) {\n parentElement.appendChild(element);\n }\n };\n /**\n * Method to create annotation template for circular gauge.\n */\n Annotations.prototype.createTemplate = function (element, annotationIndex, axisIndex) {\n var axis = this.gauge.axes[axisIndex];\n var annotation = axis.annotations[annotationIndex];\n var childElement = createElement('div', {\n id: this.elementId + '_Axis_' + axisIndex + '_Annotation_' + annotationIndex,\n styles: 'position: absolute; z-index:' + annotation.zIndex + ';transform:' +\n (annotation.autoAngle ? 'rotate(' + (annotation.angle - 90) + 'deg)' : 'rotate(0deg)') + ';'\n });\n var argsData = {\n cancel: false, name: annotationRender, content: annotation.content,\n axis: axis, annotation: annotation, textStyle: annotation.textStyle\n };\n this.gauge.trigger(annotationRender, argsData);\n var templateFn;\n var templateElement;\n if (!argsData.cancel) {\n templateFn = getTemplateFunction(argsData.content);\n if (templateFn && templateFn(axis).length) {\n templateElement = templateFn(axis);\n while (templateElement.length > 0) {\n childElement.appendChild(templateElement[0]);\n }\n }\n else {\n childElement.appendChild(createElement('div', {\n innerHTML: argsData.content,\n styles: getFontStyle(argsData.textStyle)\n }));\n }\n this.updateLocation(childElement, axis, annotation);\n element.appendChild(childElement);\n }\n };\n /**\n * Method to update the annotation location for circular gauge.\n */\n Annotations.prototype.updateLocation = function (element, axis, annotation) {\n var location = getLocationFromAngle(annotation.angle - 90, stringToNumber(annotation.radius, axis.currentRadius), this.gauge.midPoint);\n var elementRect = measureElementRect(element);\n element.style.left = (location.x - (elementRect.width / 2)) + 'px';\n element.style.top = (location.y - (elementRect.height / 2)) + 'px';\n element.setAttribute('aria-label', annotation.description || 'Annotation');\n };\n /**\n * Get module name.\n */\n Annotations.prototype.getModuleName = function () {\n // Returns te module name\n return 'Annotations';\n };\n /**\n * To destroy the annotation.\n * @return {void}\n * @private\n */\n Annotations.prototype.destroy = function (gauge) {\n // Destroy method performed here\n };\n return Annotations;\n}());\nexport { Annotations };\n","/**\n * Specifies the gauge constant value\n */\n/** @private */\nexport var loaded = 'loaded';\n/** @private */\nexport var load = 'load';\n/** @private */\nexport var animationComplete = 'animationComplete';\n/** @private */\nexport var axisLabelRender = 'axisLabelRender';\n/** @private */\nexport var tooltipRender = 'tooltipRender';\n/** @private */\nexport var annotationRender = 'annotationRender';\n/** @private */\nexport var gaugeMouseMove = 'gaugeMouseMove';\n/** @private */\nexport var gaugeMouseLeave = 'gaugeMouseLeave';\n/** @private */\nexport var gaugeMouseDown = 'gaugeMouseDown';\n/** @private */\nexport var gaugeMouseUp = 'gaugeMouseUp';\n/** @private */\nexport var dragStart = 'dragStart';\n/** @private */\nexport var dragMove = 'dragMove';\n/** @private */\nexport var dragEnd = 'dragEnd';\n/** @private */\nexport var resized = 'resized';\n","import { createElement, setStyleAttribute } from '@syncfusion/ej2-base';\nimport { Tooltip } from '@syncfusion/ej2-popups';\nimport { getPointer, getTemplateFunction } from '../utils/helper';\nimport { getAngleFromValue, getLabelFormat, getElement, getLocationFromAngle } from '../utils/helper';\nimport { tooltipRender } from '../model/constants';\n/**\n * Tooltip Module handles the tooltip of the circular gauge\n */\nvar GaugeTooltip = /** @class */ (function () {\n /**\n * Constructor for Tooltip module.\n * @private.\n */\n function GaugeTooltip(gauge) {\n this.gauge = gauge;\n this.element = gauge.element;\n this.tooltip = gauge.tooltip;\n this.textStyle = this.tooltip.textStyle;\n this.borderStyle = this.tooltip.border;\n this.ejTooltip = new Tooltip({\n opensOn: 'custom',\n beforeRender: this.onBeforeRender.bind(this),\n beforeOpen: this.tooltipCustomization.bind(this),\n openDelay: 0, closeDelay: 1000\n });\n this.ejTooltip.appendTo(this.element);\n }\n /**\n * Method to render the tooltip for circular gauge.\n */\n GaugeTooltip.prototype.renderTooltip = function (target) {\n var currentPointer = getPointer(target.id, this.gauge);\n var element;\n var angle;\n this.currentAxis = this.gauge.axes[currentPointer.axisIndex];\n this.currentPointer = (this.currentAxis.pointers)[currentPointer.pointerIndex];\n angle = getAngleFromValue(this.currentPointer.currentValue, this.currentAxis.visibleRange.max, this.currentAxis.visibleRange.min, this.currentAxis.startAngle, this.currentAxis.endAngle, this.currentAxis.direction === 'ClockWise') % 360;\n element = this.appendTargetElement(angle);\n if (element.getAttribute('data-tooltip-id') === null) {\n this.findPosition(angle);\n this.ejTooltip.open(element);\n }\n };\n /**\n * Method to append the target element for tooltip\n */\n GaugeTooltip.prototype.appendTargetElement = function (angle) {\n var location = getLocationFromAngle(angle, this.currentAxis.currentRadius, this.gauge.midPoint);\n var element = getElement(this.element.id + '_GaugeTooltip');\n if (element) {\n element.style.left = location.x + 'px';\n element.style.top = location.y + 'px';\n }\n else {\n element = createElement('div', {\n id: this.element.id + '_GaugeTooltip',\n styles: 'position:absolute;left:' + location.x + 'px;top:' + location.y +\n 'px;width:2px;height:2px;background:transparent'\n });\n getElement(this.element.id + '_Secondary_Element').appendChild(element);\n }\n return element;\n };\n /**\n * Method to find the position of the tooltip anchor for circular gauge.\n */\n GaugeTooltip.prototype.findPosition = function (angle) {\n switch (true) {\n case (angle >= 0 && angle <= 45):\n this.ejTooltip.position = 'RightBottom';\n break;\n case (angle >= 45 && angle < 90):\n this.ejTooltip.position = 'BottomRight';\n break;\n case (angle >= 90 && angle < 135):\n this.ejTooltip.position = 'BottomLeft';\n break;\n case (angle >= 135 && angle < 180):\n this.ejTooltip.position = 'LeftBottom';\n break;\n case (angle >= 180 && angle < 225):\n this.ejTooltip.position = 'LeftTop';\n break;\n case (angle >= 225 && angle < 270):\n this.ejTooltip.position = 'TopLeft';\n break;\n case (angle >= 270 && angle < 315):\n this.ejTooltip.position = 'TopRight';\n break;\n default:\n this.ejTooltip.position = 'RightTop';\n break;\n }\n this.ejTooltip.dataBind();\n };\n /**\n * Method to perform the tooltip for circular gauge.\n */\n GaugeTooltip.prototype.onBeforeRender = function (args) {\n var tooltipFormat = this.gauge.tooltip.format || this.currentAxis.labelStyle.format;\n var customLabelFormat = tooltipFormat && tooltipFormat.match('{value}') !== null;\n var format = this.gauge.intl.getNumberFormat({\n format: getLabelFormat(tooltipFormat), useGrouping: this.gauge.useGroupingSeparator\n });\n var content = customLabelFormat ?\n tooltipFormat.replace(new RegExp('{value}', 'g'), format(this.currentPointer.currentValue)) :\n format(this.currentPointer.currentValue);\n content = this.tooltip.template ?\n getTemplateFunction(this.tooltip.template)(this.currentAxis)[0] : content;\n var argsData = {\n cancel: false, name: tooltipRender,\n content: content,\n border: this.borderStyle,\n axis: this.currentAxis, pointer: this.currentPointer,\n textStyle: this.textStyle\n };\n this.gauge.trigger(tooltipRender, argsData);\n this.borderStyle = argsData.border;\n args.cancel = argsData.cancel;\n this.ejTooltip.content = argsData.content;\n this.textStyle = argsData.textStyle;\n this.ejTooltip.dataBind();\n };\n /**\n * Method to customize the tooltip elements for circular gauge.\n */\n GaugeTooltip.prototype.tooltipCustomization = function (args) {\n var font = this.textStyle;\n var borderColor = this.borderStyle.color;\n var border = this.borderStyle.width;\n var pointerSize = 5;\n var arrowWidth = (pointerSize - border) + 'px';\n var outerWidth;\n var innerWidth;\n args.element.classList.remove('e-popup-close');\n args.element.classList.add('e-popup-open');\n var arrowEle = args.element.querySelector('.e-arrow-tip');\n setStyleAttribute(args.element, {\n 'backgroundColor': this.tooltip.fill, 'borderColor': borderColor || '#212121',\n 'borderWidth': border + 'px'\n });\n setStyleAttribute(args.element.querySelector('.e-tip-content'), {\n 'color': font.color, 'fontFamily': font.fontFamily, 'fontSize': font.size,\n 'fontWeight': font.fontWeight, 'opacity': font.opacity.toString(), 'fontStyle': font.fontStyle\n });\n setStyleAttribute(args.element.querySelector('.e-arrow-tip'), {\n 'width': 2 * (pointerSize + border) + 'px', 'height': pointerSize + border + 'px'\n });\n if (arrowEle.classList.contains('e-tip-top')) {\n pointerSize = args.element.querySelector('.e-arrow-tip').offsetHeight;\n outerWidth = pointerSize + 'px';\n setStyleAttribute(args.element.querySelector('.e-arrow-tip-outer'), {\n 'borderRightColor': 'transparent', 'borderLeftColor': 'transparent', 'borderBottomColor': borderColor,\n 'borderLeftWidth': outerWidth, 'borderRightWidth': outerWidth, 'borderBottomWidth': outerWidth,\n });\n innerWidth = (pointerSize - border) + 'px';\n setStyleAttribute(args.element.querySelector('.e-arrow-tip-inner'), {\n 'borderRightColor': 'transparent', 'borderLeftColor': 'transparent', 'borderBottomColor': this.tooltip.fill,\n 'borderLeftWidth': innerWidth, 'borderRightWidth': innerWidth, 'borderBottomWidth': innerWidth,\n 'left': border + 'px', 'top': border + 'px', 'display': 'none'\n });\n }\n else if (arrowEle.classList.contains('e-tip-bottom')) {\n pointerSize = args.element.querySelector('.e-arrow-tip').offsetHeight;\n outerWidth = pointerSize + 'px';\n setStyleAttribute(args.element.querySelector('.e-arrow-tip-outer'), {\n 'borderRightColor': 'transparent', 'borderLeftColor': 'transparent', 'borderTopColor': borderColor,\n 'borderLeftWidth': outerWidth, 'borderRightWidth': outerWidth, 'borderTopWidth': outerWidth,\n });\n innerWidth = (pointerSize - border) + 'px';\n setStyleAttribute(args.element.querySelector('.e-arrow-tip-inner'), {\n 'borderRightColor': 'transparent', 'borderLeftColor': 'transparent', 'borderTopColor': this.tooltip.fill,\n 'borderLeftWidth': innerWidth, 'borderRightWidth': innerWidth, 'borderTopWidth': innerWidth,\n 'left': border + 'px', 'top': '0', 'display': 'none'\n });\n }\n else if (arrowEle.classList.contains('e-tip-left')) {\n setStyleAttribute(args.element.querySelector('.e-arrow-tip'), {\n 'width': pointerSize + border + 'px', 'height': 2 * (pointerSize + border) + 'px'\n });\n pointerSize = args.element.querySelector('.e-arrow-tip').offsetWidth;\n outerWidth = pointerSize + 'px';\n setStyleAttribute(args.element.querySelector('.e-arrow-tip-outer'), {\n 'borderTopColor': 'transparent', 'borderBottomColor': 'transparent', 'borderRightColor': borderColor,\n 'borderTopWidth': outerWidth, 'borderBottomWidth': outerWidth, 'borderRightWidth': outerWidth\n });\n innerWidth = (pointerSize - border) + 'px';\n setStyleAttribute(args.element.querySelector('.e-arrow-tip-inner'), {\n 'borderTopColor': 'transparent', 'borderBottomColor': 'transparent', 'borderRightColor': this.tooltip.fill,\n 'borderTopWidth': innerWidth, 'borderBottomWidth': innerWidth, 'borderRightWidth': innerWidth,\n 'left': border + 'px', 'top': border + 'px', 'display': 'none'\n });\n }\n else {\n setStyleAttribute(args.element.querySelector('.e-arrow-tip'), {\n 'width': (pointerSize + border) + 'px', 'height': 2 * (pointerSize + border) + 'px'\n });\n pointerSize = args.element.querySelector('.e-arrow-tip').offsetWidth;\n outerWidth = pointerSize + 'px';\n setStyleAttribute(args.element.querySelector('.e-arrow-tip-outer'), {\n 'borderTopColor': 'transparent', 'borderBottomColor': 'transparent', 'borderLeftColor': borderColor,\n 'borderTopWidth': outerWidth, 'borderBottomWidth': outerWidth, 'borderLeftWidth': outerWidth\n });\n innerWidth = (pointerSize - border) + 'px';\n setStyleAttribute(args.element.querySelector('.e-arrow-tip-inner'), {\n 'borderTopColor': 'transparent', 'borderBottomColor': 'transparent', 'borderLeftColor': this.tooltip.fill,\n 'borderTopWidth': innerWidth, 'borderBottomWidth': innerWidth, 'borderLeftWidth': innerWidth,\n 'left': (border <= 1 ? 0 : -1) + 'px', 'top': border + 'px', 'display': 'none'\n });\n }\n this.ejTooltip.refresh(args.target);\n setStyleAttribute(args.element, {\n 'display': 'block', 'transitionProperty': 'left,top',\n 'transitionDuration': this.tooltip.enableAnimation ? '1000ms' : '0ms'\n });\n };\n /**\n * Get module name.\n */\n GaugeTooltip.prototype.getModuleName = function () {\n // Returns te module name\n return 'Tooltip';\n };\n /**\n * To destroy the tooltip.\n * @return {void}\n * @private\n */\n GaugeTooltip.prototype.destroy = function (gauge) {\n // Destroy method performed here\n };\n return GaugeTooltip;\n}());\nexport { GaugeTooltip };\n","import { getLocationFromAngle, PathOption, stringToNumber, TextOption, textElement, appendPath, toPixel } from '../utils/helper';\nimport { getAngleFromValue, isCompleteAngle, getPathArc, getRangeColor } from '../utils/helper';\nimport { getRangePalette } from '../model/theme';\n/**\n * Specifies the Axis rendering for circular gauge\n */\nvar AxisRenderer = /** @class */ (function () {\n /**\n * Constructor for axis renderer.\n * @private.\n */\n function AxisRenderer(gauge) {\n this.gauge = gauge;\n }\n /**\n * Method to render the axis element of the circular gauge.\n * @return {void}\n * @private\n */\n AxisRenderer.prototype.drawAxisOuterLine = function (axis, index, element, gauge) {\n var background = axis.background;\n this.setRangeColor(axis);\n if (background !== null) {\n appendPath(new PathOption(gauge.element.id + '_AxisOuterLine_' + index, background, 0, 'transparent', null, '0', getPathArc(gauge.midPoint, 0, 360, (Math.min(axis.rect.width, axis.rect.height) / 2)), '', 'pointer-events:none;'), element, gauge);\n }\n };\n /**\n * Method to render the axis line of the circular gauge.\n * @return {void}\n * @private\n */\n AxisRenderer.prototype.drawAxisLine = function (axis, index, element, gauge) {\n var startAngle = axis.startAngle;\n var endAngle = axis.endAngle;\n if (axis.lineStyle.width > 0) {\n startAngle = !isCompleteAngle(startAngle, endAngle) ? startAngle : [0, endAngle = 360][0];\n appendPath(new PathOption(gauge.element.id + '_AxisLine_' + index, 'transparent', axis.lineStyle.width, axis.lineStyle.color, null, axis.lineStyle.dashArray, getPathArc(gauge.midPoint, startAngle - 90, endAngle - 90, axis.currentRadius), '', 'pointer-events:none;'), element, gauge);\n }\n };\n /**\n * Method to render the axis labels of the circular gauge.\n * @return {void}\n * @private\n */\n AxisRenderer.prototype.drawAxisLabels = function (axis, index, element, gauge) {\n var labelElement = gauge.renderer.createGroup({\n id: gauge.element.id + '_Axis_Labels_' + index\n });\n var min = axis.visibleRange.min;\n var max = axis.visibleRange.max;\n var labelCollection = axis.visibleLabels;\n var location;\n var style = axis.labelStyle;\n var anchor;\n var angle;\n var label;\n var radius = axis.currentRadius;\n var labelPadding = 10;\n if (style.position === 'Outside') {\n radius += (axis.nearSize - (axis.maxLabelSize.height + axis.lineStyle.width / 2)) +\n (labelPadding / 2);\n }\n else {\n radius -= (axis.farSize - (axis.maxLabelSize.height + axis.lineStyle.width / 2) +\n (style.autoAngle ? labelPadding : 0));\n }\n for (var i = 0, length_1 = labelCollection.length; i < length_1; i++) {\n if ((i === 0 && style.hiddenLabel === 'First') ||\n (i === (length_1 - 1) && style.hiddenLabel === 'Last')) {\n continue;\n }\n label = labelCollection[i];\n angle = Math.round(getAngleFromValue(label.value, max, min, axis.startAngle, axis.endAngle, axis.direction === 'ClockWise'));\n location = getLocationFromAngle(angle, radius, gauge.midPoint);\n anchor = this.findAnchor(location, style, angle, label);\n textElement(new TextOption(gauge.element.id + '_Axis_' + index + '_Label_' + i, location.x, location.y, anchor, label.text, style.autoAngle ? 'rotate(' + (angle + 90) + ',' + (location.x) + ',' + location.y + ')' : '', 'auto'), style.font, style.useRangeColor ? getRangeColor(label.value, axis.ranges, style.font.color) : style.font.color, labelElement, 'pointer-events:none;');\n }\n element.appendChild(labelElement);\n };\n /**\n * Method to find the anchor of the axis label.\n * @private\n */\n AxisRenderer.prototype.findAnchor = function (location, style, angle, label) {\n if (style.autoAngle) {\n return 'middle';\n }\n var anchor = style.position === 'Inside' ?\n ((angle > 120 && angle < 240) ? 'start' : ((300 < angle || angle < 60) ? 'end' : 'middle')) :\n ((angle > 120 && angle < 240) ? 'end' : ((300 < angle || angle < 60) ? 'start' : 'middle'));\n location.y += style.position === 'Inside' ?\n ((angle >= 240 && angle <= 300) ? (label.size.height / 2) :\n (angle >= 60 && angle <= 120) ? 0 : label.size.height / 4) :\n ((angle >= 240 && angle <= 300) ? 0 :\n (angle >= 60 && angle <= 120) ? label.size.height / 2 : label.size.height / 4);\n return anchor;\n };\n /**\n * Method to render the axis minor tick lines of the circular gauge.\n * @return {void}\n * @private\n */\n AxisRenderer.prototype.drawMinorTickLines = function (axis, index, element, gauge) {\n var minorTickElements = gauge.renderer.createGroup({\n id: gauge.element.id + '_Axis_MinorTickLines_' + index\n });\n var minorLineStyle = axis.minorTicks;\n var minorInterval = minorLineStyle.interval !== null ?\n minorLineStyle.interval : (axis.visibleRange.interval / 2);\n var isRangeColor = minorLineStyle.useRangeColor;\n if (minorLineStyle.width && minorLineStyle.height && minorInterval) {\n for (var i = axis.visibleRange.min, max = axis.visibleRange.max; i <= max; i += minorInterval) {\n if (this.majorValues.indexOf(+i.toFixed(3)) < 0) {\n appendPath(new PathOption(gauge.element.id + '_Axis_Minor_TickLine_' + index + '_' + i, 'transparent', minorLineStyle.width, isRangeColor ? getRangeColor(i, axis.ranges, minorLineStyle.color) : minorLineStyle.color, null, '0', this.calculateTicks(i, minorLineStyle, axis), '', 'pointer-events:none;'), minorTickElements, gauge);\n }\n }\n element.appendChild(minorTickElements);\n }\n };\n /**\n * Method to render the axis major tick lines of the circular gauge.\n * @return {void}\n * @private\n */\n AxisRenderer.prototype.drawMajorTickLines = function (axis, index, element, gauge) {\n var majorTickElements = gauge.renderer.createGroup({\n id: gauge.element.id + '_Axis_MajorTickLines_' + index\n });\n var majorLineStyle = axis.majorTicks;\n var isRangeColor = majorLineStyle.useRangeColor;\n this.majorValues = [];\n if (majorLineStyle.width && majorLineStyle.height && axis.visibleRange.interval) {\n for (var i = axis.visibleRange.min, max = axis.visibleRange.max, interval = axis.visibleRange.interval; i <= max; i += interval) {\n this.majorValues.push(+i.toFixed(3));\n appendPath(new PathOption(gauge.element.id + '_Axis_Major_TickLine_' + index + '_' + i, 'transparent', majorLineStyle.width, isRangeColor ? getRangeColor(i, axis.ranges, majorLineStyle.color) : majorLineStyle.color, null, '0', this.calculateTicks(i, majorLineStyle, axis), '', 'pointer-events:none;'), majorTickElements, gauge);\n }\n element.appendChild(majorTickElements);\n }\n };\n /**\n * Method to calcualte the tick elements for the circular gauge.\n * @return {void}\n * @private\n */\n AxisRenderer.prototype.calculateTicks = function (value, options, axis) {\n var axisLineWidth = (axis.lineStyle.width / 2) + options.offset;\n var isOutside = options.position === 'Outside';\n var angle = getAngleFromValue(value, axis.visibleRange.max, axis.visibleRange.min, axis.startAngle, axis.endAngle, axis.direction === 'ClockWise');\n var start = getLocationFromAngle(angle, axis.currentRadius +\n (isOutside ? axisLineWidth : -axisLineWidth), this.gauge.midPoint);\n var end = getLocationFromAngle(angle, axis.currentRadius +\n (isOutside ? axisLineWidth : -axisLineWidth) +\n (isOutside ? options.height : -options.height), this.gauge.midPoint);\n return 'M ' + start.x + ' ' + start.y + ' L ' + end.x + ' ' + end.y + ' ';\n };\n /**\n * Method to render the axis range of the circular gauge.\n * @return {void}\n * @private\n */\n AxisRenderer.prototype.drawAxisRange = function (axis, index, element, gauge) {\n var _this = this;\n var rangeElement = gauge.renderer.createGroup({\n id: gauge.element.id + '_Axis_Ranges_' + index\n });\n var startAngle;\n var endAngle;\n var isClockWise = axis.direction === 'ClockWise';\n var startValue;\n var endValue;\n var min = axis.visibleRange.min;\n var max = axis.visibleRange.max;\n var startWidth;\n var endWidth;\n axis.ranges.map(function (range, rangeIndex) {\n _this.calculateRangeRadius(axis, range);\n startValue = Math.min(Math.max(range.start, min), range.end);\n endValue = Math.min(Math.max(range.start, range.end), max);\n if (startValue !== endValue) {\n startAngle = getAngleFromValue(startValue, max, min, axis.startAngle, axis.endAngle, isClockWise);\n endAngle = getAngleFromValue(endValue, max, min, axis.startAngle, axis.endAngle, isClockWise);\n if (range.startWidth.length > 0) {\n startWidth = toPixel(range.startWidth, range.currentRadius);\n }\n else {\n startWidth = range.startWidth;\n }\n if (range.endWidth.length > 0) {\n endWidth = toPixel(range.endWidth, range.currentRadius);\n }\n else {\n endWidth = range.endWidth;\n }\n endAngle = isClockWise ? endAngle : [startAngle, startAngle = endAngle][0];\n endWidth = isClockWise ? endWidth : [startWidth, startWidth = endWidth][0];\n appendPath(new PathOption(gauge.element.id + '_Axis_' + index + '_Range_' + rangeIndex, range.rangeColor, 0, range.rangeColor, 1, '0', getPathArc(gauge.midPoint, Math.floor(startAngle), Math.ceil(endAngle), range.currentRadius, startWidth, endWidth), '', 'pointer-events:none;'), rangeElement, gauge);\n }\n });\n element.appendChild(rangeElement);\n };\n /**\n * Method to calculate the radius of the axis range.\n * @return {void}\n */\n AxisRenderer.prototype.calculateRangeRadius = function (axis, range) {\n var radius = range.radius !== null ? range.radius : '100%';\n range.currentRadius = stringToNumber(radius, axis.currentRadius);\n };\n /**\n * Method to get the range color of the circular gauge.\n * @return {void}\n * @private\n */\n AxisRenderer.prototype.setRangeColor = function (axis) {\n var rangeColors = getRangePalette(this.gauge.theme);\n axis.ranges.map(function (range, index) {\n range.rangeColor = range.color ? range.color : rangeColors[index % rangeColors.length];\n });\n };\n return AxisRenderer;\n}());\nexport { AxisRenderer };\n","import { stringToNumber, Size, calculateShapes, appendPath } from '../utils/helper';\nimport { getLocationFromAngle, PathOption } from '../utils/helper';\nimport { linear, getAngleFromValue, getCompleteArc } from '../utils/helper';\nimport { Animation } from '@syncfusion/ej2-base';\nimport { animationComplete } from '../model/constants';\n/**\n * Specifies the Axis rendering for circular gauge\n */\nvar PointerRenderer = /** @class */ (function () {\n /**\n * Constructor for pointer renderer.\n * @private.\n */\n function PointerRenderer(gauge) {\n this.gauge = gauge;\n }\n /**\n * Method to render the axis pointers of the circular gauge.\n * @return {void}\n * @private\n */\n PointerRenderer.prototype.drawPointers = function (axis, axisIndex, element, gauge, animate) {\n var _this = this;\n if (animate === void 0) { animate = true; }\n var pointerElement = gauge.renderer.createGroup({\n id: gauge.element.id + '_Axis_Pointers_' + axisIndex\n });\n var childElement;\n var range;\n axis.pointers.map(function (pointer, pointerIndex) {\n range = axis.visibleRange;\n pointer.pathElement = [];\n _this.calculatePointerRadius(axis, pointer);\n childElement = gauge.renderer.createGroup({\n id: gauge.element.id + '_Axis_' + axisIndex + '_Pointer_' + pointerIndex\n });\n _this['draw' + pointer.type + 'Pointer'](axis, axisIndex, pointerIndex, childElement, gauge);\n _this.setPointerValue(axis, pointer, pointer.currentValue);\n pointerElement.appendChild(childElement);\n if (animate) {\n _this.doPointerAnimation(pointer, axis);\n }\n });\n element.appendChild(pointerElement);\n };\n /**\n * Measure the pointer length of the circular gauge.\n * @return {void}\n */\n PointerRenderer.prototype.calculatePointerRadius = function (axis, pointer) {\n var padding = 5;\n pointer.currentRadius = pointer.radius === null ?\n (axis.currentRadius - (axis.farSize + padding)) :\n stringToNumber(pointer.radius, axis.currentRadius);\n };\n /**\n * Method to render the needle pointer of the ciruclar gauge.\n * @return {void}\n */\n PointerRenderer.prototype.drawNeedlePointer = function (axis, axisIndex, index, parentElement, gauge) {\n var pointer = axis.pointers[index];\n var pointerRadius;\n var location;\n var direction;\n var mid = gauge.midPoint;\n var width = pointer.pointerWidth / 2;\n var rectDirection;\n // To render the needle\n location = getLocationFromAngle(0, pointer.currentRadius, mid);\n direction = 'M ' + mid.x + ' ' + (mid.y - width) + ' L ' + (location.x) + ' ' + mid.y +\n ' L ' + (mid.x) + ' ' + (mid.y + width) + ' Z';\n pointer.pathElement.push(appendPath(new PathOption(gauge.element.id + '_Axis_' + axisIndex + '_Pointer_Needle_' + index, pointer.color, pointer.border.width, pointer.border.color, null, '0', direction), parentElement, gauge));\n pointerRadius = stringToNumber(pointer.needleTail.length, pointer.currentRadius);\n // To render the rect element for touch\n rectDirection = 'M ' + mid.x + ' ' + (mid.y - width) + ' L ' + (location.x) + ' ' + (mid.y - width) +\n ' L ' + location.x + ' ' + (mid.y + width) + ' L ' + mid.x + ' ' + (mid.y + width);\n // To render the needle tail\n if (pointerRadius) {\n location = getLocationFromAngle(180, pointerRadius, gauge.midPoint);\n direction = 'M ' + mid.x + ' ' + (mid.y - width) +\n ' L ' + (location.x) + ' ' + (mid.y - width) +\n ' L ' + (location.x) + ' ' + (mid.y + width) +\n ' L ' + (mid.x) + ' ' + (mid.y + width) + ' Z';\n pointer.pathElement.push(appendPath(new PathOption(gauge.element.id + '_Axis_' + axisIndex + '_Pointer_NeedleTail_' + index, pointer.needleTail.color, pointer.needleTail.border.width, pointer.needleTail.border.color, null, '0', direction), parentElement, gauge));\n rectDirection += ' L ' + location.x + ' ' + (mid.y + width) + ' L ' + location.x + ' ' + (mid.y - width);\n }\n // To render the cap\n if (pointer.cap.radius) {\n pointer.pathElement.push(appendPath(calculateShapes(mid, 'Circle', new Size(pointer.cap.radius * 2, pointer.cap.radius * 2), '', new PathOption(gauge.element.id + '_Axis_' + axisIndex + '_Pointer_NeedleCap_' + index, pointer.cap.color, pointer.cap.border.width, pointer.cap.border.color, null, '0', '', '')), parentElement, gauge, 'Ellipse'));\n }\n pointer.pathElement.push(appendPath(new PathOption(gauge.element.id + '_Axis_' + axisIndex + '_Pointer_NeedleRect_' + index, 'transparent', 0, 'transpanret', null, '0', rectDirection + ' Z'), parentElement, gauge));\n };\n /**\n * Method to set the pointer value of the circular gauge.\n * @return {void}\n * @private\n */\n PointerRenderer.prototype.setPointerValue = function (axis, pointer, value) {\n var location = this.gauge.midPoint;\n var isClockWise = axis.direction === 'ClockWise';\n var startAngle = getAngleFromValue(axis.visibleRange.min, axis.visibleRange.max, axis.visibleRange.min, axis.startAngle, axis.endAngle, isClockWise);\n var endAngle = getAngleFromValue(value, axis.visibleRange.max, axis.visibleRange.min, axis.startAngle, axis.endAngle, isClockWise);\n endAngle = isClockWise ? endAngle : [startAngle, startAngle = endAngle][0];\n pointer.pathElement.map(function (element) {\n if (pointer.type === 'RangeBar') {\n element.setAttribute('d', getCompleteArc(location, startAngle, endAngle, pointer.currentRadius, (pointer.currentRadius - pointer.pointerWidth)));\n }\n else {\n element.setAttribute('transform', 'rotate(' + getAngleFromValue(value, axis.visibleRange.max, axis.visibleRange.min, axis.startAngle, axis.endAngle, isClockWise) + ',' + location.x + ',' + location.y + ')');\n }\n element.setAttribute('aria-label', pointer.description || 'Pointer:' + value.toString());\n });\n };\n /**\n * Method to render the marker pointer of the ciruclar gauge.\n * @return {void}\n */\n PointerRenderer.prototype.drawMarkerPointer = function (axis, axisIndex, index, parentElement, gauge) {\n var pointer = axis.pointers[index];\n var location = getLocationFromAngle(0, pointer.currentRadius, gauge.midPoint);\n pointer.pathElement.push(appendPath(calculateShapes(location, pointer.markerShape, new Size(pointer.markerWidth, pointer.markerHeight), pointer.imageUrl, new PathOption(gauge.element.id + '_Axis_' + axisIndex + '_Pointer_Marker_' + index, pointer.color, pointer.border.width, pointer.border.color, null, '0', '', '')), parentElement, gauge, pointer.markerShape === 'Circle' ? 'Ellipse' : (pointer.markerShape === 'Image' ? 'Image' : 'Path')));\n };\n /**\n * Method to render the range bar pointer of the ciruclar gauge.\n * @return {void}\n */\n PointerRenderer.prototype.drawRangeBarPointer = function (axis, axisIndex, index, parentElement, gauge) {\n var pointer = axis.pointers[index];\n pointer.pathElement.push(appendPath(new PathOption(gauge.element.id + '_Axis_' + axisIndex + '_Pointer_RangeBar_' + index, pointer.color, pointer.border.width, pointer.border.color, 1, '0', ''), parentElement, gauge));\n };\n /**\n * Method to perform the animation of the pointer in circular gauge.\n * @return {void}\n */\n PointerRenderer.prototype.doPointerAnimation = function (pointer, axis) {\n var _this = this;\n var startValue = axis.visibleRange.min;\n var endValue = pointer.currentValue;\n if (pointer.animation.enable && startValue !== endValue && this.gauge.animatePointer) {\n pointer.pathElement.map(function (element) {\n if (pointer.type === 'RangeBar') {\n _this.performRangeBarAnimation(element, startValue, endValue, axis, pointer, pointer.currentRadius, (pointer.currentRadius - pointer.pointerWidth));\n }\n else {\n _this.performNeedleAnimation(element, startValue, endValue, axis, pointer, pointer.currentRadius, (pointer.currentRadius - pointer.pointerWidth));\n }\n });\n }\n };\n /**\n * Perform the needle and marker pointer animation for circular gauge.\n * @return {void}\n * @private\n */\n PointerRenderer.prototype.performNeedleAnimation = function (element, start, end, axis, pointer, radius, innerRadius) {\n var _this = this;\n var isClockWise = axis.direction === 'ClockWise';\n var startAngle = getAngleFromValue(start, axis.visibleRange.max, axis.visibleRange.min, axis.startAngle, axis.endAngle, isClockWise);\n var pointAngle = getAngleFromValue(end, axis.visibleRange.max, axis.visibleRange.min, axis.startAngle, axis.endAngle, isClockWise);\n var endAngle = startAngle > pointAngle ? (pointAngle + 360) : pointAngle;\n var sweepAngle;\n new Animation({}).animate(element, {\n duration: pointer.animation.duration,\n progress: function (args) {\n sweepAngle = (start < end || Math.round(startAngle) === Math.round(endAngle)) ?\n isClockWise ? (endAngle - startAngle) : (endAngle - startAngle - 360) :\n isClockWise ? (endAngle - startAngle - 360) : (endAngle - startAngle);\n element.style.animation = 'None';\n element.setAttribute('transform', 'rotate(' + linear(args.timeStamp, startAngle, sweepAngle, args.duration) + ',' +\n _this.gauge.midPoint.x.toString() + ',' + _this.gauge.midPoint.y.toString() + ')');\n },\n end: function (model) {\n _this.setPointerValue(axis, pointer, end);\n if (pointer.type === 'Marker' || (element.id.indexOf('_Pointer_NeedleCap') >= 0)) {\n _this.gauge.trigger(animationComplete, { axis: axis, pointer: pointer });\n }\n }\n });\n };\n /**\n * Perform the range bar pointer animation for circular gauge.\n * @return {void}\n * @private\n */\n PointerRenderer.prototype.performRangeBarAnimation = function (element, start, end, axis, pointer, radius, innerRadius) {\n var _this = this;\n var isClockWise = axis.direction === 'ClockWise';\n var startAngle = getAngleFromValue(start, axis.visibleRange.max, axis.visibleRange.min, axis.startAngle, axis.endAngle, isClockWise);\n var minAngle = getAngleFromValue(axis.visibleRange.min, axis.visibleRange.max, axis.visibleRange.min, axis.startAngle, axis.endAngle, isClockWise);\n var pointAngle = getAngleFromValue(end, axis.visibleRange.max, axis.visibleRange.min, axis.startAngle, axis.endAngle, isClockWise);\n var sweepAngle;\n var endAngle = startAngle > pointAngle ? (pointAngle + 360) : pointAngle;\n new Animation({}).animate(element, {\n duration: pointer.animation.duration,\n progress: function (arg) {\n element.style.animation = 'None';\n sweepAngle = (start < end || Math.round(startAngle) === Math.round(endAngle)) ?\n isClockWise ? (endAngle - startAngle) : (endAngle - startAngle - 360) :\n isClockWise ? (endAngle - startAngle - 360) : (endAngle - startAngle);\n if (isClockWise) {\n element.setAttribute('d', getCompleteArc(_this.gauge.midPoint, minAngle, linear(arg.timeStamp, startAngle, sweepAngle, arg.duration) + 0.0001, radius, innerRadius));\n }\n else {\n element.setAttribute('d', getCompleteArc(_this.gauge.midPoint, linear(arg.timeStamp, startAngle, sweepAngle, arg.duration), minAngle + 0.0001, radius, innerRadius));\n }\n },\n end: function (model) {\n _this.setPointerValue(axis, pointer, end);\n _this.gauge.trigger(animationComplete, { axis: axis, pointer: pointer });\n }\n });\n };\n return PointerRenderer;\n}());\nexport { PointerRenderer };\n","import { createElement } from '@syncfusion/ej2-base';\nimport { calculateSum, VisibleLabels, measureText } from '../utils/helper';\nimport { Size, Rect, stringToNumber, getLabelFormat } from '../utils/helper';\nimport { axisLabelRender } from '../model/constants';\nimport { AxisRenderer } from './axis-renderer';\nimport { PointerRenderer } from './pointer-renderer';\n/**\n * Specifies the CircularGauge Axis Layout\n */\nvar labelPadding = 10;\nvar AxisLayoutPanel = /** @class */ (function () {\n function AxisLayoutPanel(gauge) {\n this.gauge = gauge;\n this.axisRenderer = new AxisRenderer(gauge);\n this.pointerRenderer = new PointerRenderer(gauge);\n }\n /**\n * Measure the calculate the axis size and radius.\n * @return {void}\n * @private\n */\n AxisLayoutPanel.prototype.measureAxis = function (rect) {\n this.measureAxisSize(this.gauge, rect);\n this.calculateAxesRadius();\n };\n /**\n * Measure to calculate the axis radius of the circular gauge.\n * @return {void}\n * @private\n */\n AxisLayoutPanel.prototype.calculateAxesRadius = function () {\n var totalRadius;\n var currentRadius;\n var rangeMaximumRadius = 0;\n for (var _i = 0, _a = this.gauge.axes; _i < _a.length; _i++) {\n var axis = _a[_i];\n totalRadius = (Math.min(axis.rect.width, axis.rect.height) / 2);\n currentRadius = axis.radius != null ? stringToNumber(axis.radius, totalRadius) : totalRadius;\n rangeMaximumRadius = Math.max.apply(Math, axis.ranges.map(function (value) {\n return value.radius ?\n (value.radius.indexOf('%') < 0 ? 100 : parseInt(value.radius, 10)) : 0;\n }));\n currentRadius = (rangeMaximumRadius > 100 && axis.radius == null) ?\n (currentRadius * 100) / rangeMaximumRadius : currentRadius;\n axis.currentRadius = currentRadius - axis.nearSize;\n axis.visibleRange.interval = this.calculateNumericInterval(axis, axis.rect);\n this.calculateVisibleLabels(axis);\n }\n };\n /**\n * Measure to calculate the axis size.\n * @return {void}\n * @private\n */\n AxisLayoutPanel.prototype.measureAxisSize = function (gauge, rect) {\n var _this = this;\n var sum;\n this.computeSize(gauge.axes, rect);\n gauge.axes.map(function (axis, index) {\n sum = calculateSum(index, _this.farSizes.length - 1, _this.farSizes);\n axis.rect = new Rect(rect.x + sum, rect.y + sum, rect.width - (sum * 2), rect.height - (sum * 2));\n });\n };\n /**\n * Calculate the axis values of the circular gauge.\n * @return {void}\n * @private\n */\n AxisLayoutPanel.prototype.calculateAxisValues = function (rect) {\n for (var _i = 0, _a = this.gauge.axes; _i < _a.length; _i++) {\n var axis = _a[_i];\n this.calculateVisibleRange(axis, rect);\n this.calculateVisibleLabels(axis);\n }\n };\n /**\n * Calculate the visible range of an axis.\n * @return {void}\n * @private\n */\n AxisLayoutPanel.prototype.calculateVisibleRange = function (axis, rect) {\n var interval = axis.majorTicks.interval;\n var minimumValue = Math.min(axis.minimum === null ? 0 : axis.minimum, axis.maximum);\n var maximumValue = Math.max(axis.minimum, axis.maximum === null ? 100 : axis.maximum);\n axis.pointers.map(function (pointer) {\n pointer.currentValue = pointer.value !== null ?\n pointer.value < minimumValue ? minimumValue : pointer.value > maximumValue ? maximumValue : pointer.value\n : minimumValue;\n minimumValue = axis.minimum === null ? Math.min(pointer.currentValue, minimumValue) : minimumValue;\n maximumValue = axis.maximum === null ? Math.max(pointer.currentValue, maximumValue) : maximumValue;\n });\n minimumValue = (minimumValue === maximumValue) ?\n (interval !== null ? minimumValue - interval : minimumValue - 1) : minimumValue;\n axis.visibleRange = { min: minimumValue, max: maximumValue, interval: interval };\n axis.visibleRange.interval = this.calculateNumericInterval(axis, rect);\n };\n /**\n * Calculate the numeric intervals of an axis range.\n * @return {void}\n * @private\n */\n AxisLayoutPanel.prototype.calculateNumericInterval = function (axis, rect) {\n if (axis.majorTicks.interval !== null) {\n return axis.majorTicks.interval;\n }\n var totalAngle = axis.endAngle - axis.startAngle;\n totalAngle = totalAngle <= 0 ? (totalAngle + 360) : totalAngle;\n return this.calculateNiceInterval(axis.visibleRange.max, axis.visibleRange.min, axis.currentRadius ? axis.currentRadius : (rect.width / 2), totalAngle);\n };\n /**\n * Calculate the nice interval of an axis range.\n * @return {void}\n * @private\n */\n AxisLayoutPanel.prototype.calculateNiceInterval = function (maxValue, minValue, radius, degree) {\n var delta = maxValue - minValue;\n var circumference = 2 * Math.PI * radius * (degree / 360);\n var desiredIntervalsCount = Math.max((circumference * ((0.533 * 3) / 100)), 1);\n var niceInterval = delta / desiredIntervalsCount;\n var minInterval = Math.pow(10, Math.floor(Math.log(niceInterval) / Math.log(10)));\n for (var _i = 0, _a = [10, 5, 2, 1]; _i < _a.length; _i++) {\n var interval = _a[_i];\n var currentInterval = minInterval * interval;\n if (desiredIntervalsCount < (delta / currentInterval)) {\n break;\n }\n niceInterval = currentInterval;\n }\n return niceInterval;\n };\n /**\n * Calculate the visible labels of an axis.\n * @return {void}\n * @private\n */\n AxisLayoutPanel.prototype.calculateVisibleLabels = function (axis) {\n var style = axis.labelStyle;\n var customLabelFormat = style.format && style.format.match('{value}') !== null;\n var format = this.gauge.intl.getNumberFormat({\n format: getLabelFormat(style.format), useGrouping: this.gauge.useGroupingSeparator\n });\n var argsData;\n axis.visibleLabels = [];\n for (var i = axis.visibleRange.min, interval = axis.visibleRange.interval, max = axis.visibleRange.max; (i <= max && interval); i += interval) {\n argsData = {\n cancel: false, name: axisLabelRender, axis: axis,\n text: customLabelFormat ? style.format.replace(new RegExp('{value}', 'g'), format(i)) :\n format(i),\n value: i\n };\n this.gauge.trigger(axisLabelRender, argsData);\n if (!argsData.cancel) {\n axis.visibleLabels.push(new VisibleLabels(argsData.text, i));\n }\n }\n this.getMaxLabelWidth(this.gauge, axis);\n };\n /**\n * Measure the axes available size.\n * @return {void}\n * @private\n */\n AxisLayoutPanel.prototype.computeSize = function (axes, rect) {\n var lineSize;\n var outerHeight;\n var innerHeight;\n var isMajorTickOutside;\n var isMinorTickOutside;\n var isLabelOutside;\n var axisPadding = 5;\n var majorTickOffset = 0;\n var minorTickOffset = 0;\n var labelOffset = 0;\n this.farSizes = [];\n this.calculateAxisValues(rect);\n for (var _i = 0, axes_1 = axes; _i < axes_1.length; _i++) {\n var axis = axes_1[_i];\n lineSize = (axis.lineStyle.width / 2);\n outerHeight = 0;\n innerHeight = 0;\n isMajorTickOutside = axis.majorTicks.position === 'Outside';\n majorTickOffset = axis.majorTicks.offset;\n isMinorTickOutside = axis.minorTicks.position === 'Outside';\n minorTickOffset = axis.minorTicks.offset;\n isLabelOutside = axis.labelStyle.position === 'Outside';\n labelOffset = axis.labelStyle.offset;\n // Calculating the outer space of the axis\n outerHeight += !(isMajorTickOutside && isMinorTickOutside && isLabelOutside) ? axisPadding : 0;\n outerHeight += (isMajorTickOutside ? (axis.majorTicks.height + lineSize) : 0) +\n (isLabelOutside ? (axis.maxLabelSize.height + labelPadding + labelOffset) : 0) +\n ((isMinorTickOutside && !isMajorTickOutside) ? (axis.minorTicks.height + lineSize) : 0) + lineSize;\n outerHeight += (isMajorTickOutside && isMinorTickOutside) ? Math.max(majorTickOffset, minorTickOffset) :\n (isMajorTickOutside ? majorTickOffset : isMinorTickOutside ? minorTickOffset : 0);\n // Calculating the inner space of the axis\n innerHeight += (!isMajorTickOutside ? (axis.majorTicks.height + lineSize) : 0) +\n (!isLabelOutside ? (axis.maxLabelSize.height + labelPadding + labelOffset) : 0) +\n ((!isMinorTickOutside && isMajorTickOutside) ? (axis.minorTicks.height + lineSize) : 0) + lineSize;\n innerHeight += (!isMajorTickOutside && !isMinorTickOutside) ? Math.max(majorTickOffset, minorTickOffset) :\n (!isMajorTickOutside ? majorTickOffset : !isMinorTickOutside ? minorTickOffset : 0);\n if (this.farSizes[this.farSizes.length - 1]) {\n this.farSizes[this.farSizes.length - 1] += (innerHeight + outerHeight);\n }\n axis.nearSize = outerHeight - axisPadding;\n axis.farSize = innerHeight;\n outerHeight = (this.gauge.axes.length === (this.farSizes.length + 1)) ? 0 : outerHeight;\n this.farSizes.push(outerHeight);\n }\n };\n /**\n * To render the Axis element of the circular gauge.\n * @return {void}\n * @private\n */\n AxisLayoutPanel.prototype.renderAxes = function (animate) {\n var _this = this;\n if (animate === void 0) { animate = true; }\n var gauge = this.gauge;\n var renderer = this.axisRenderer;\n var element;\n var axesElements = gauge.renderer.createGroup({\n 'id': gauge.element.id + '_AxesCollection',\n 'clip-path': 'url(#' + gauge.element.id + '_GaugeAreaClipRect_' + ')'\n });\n // To append the secondary element for annotation and tooltip\n gauge.element.appendChild(createElement('div', {\n id: gauge.element.id + '_Secondary_Element',\n styles: 'position: relative'\n }));\n gauge.axes.map(function (axis, index) {\n element = gauge.renderer.createGroup({\n id: gauge.element.id + '_Axis_Group_' + index\n });\n renderer.drawAxisOuterLine(axis, index, element, gauge);\n renderer.drawAxisRange(axis, index, element, gauge);\n renderer.drawAxisLine(axis, index, element, gauge);\n renderer.drawMajorTickLines(axis, index, element, gauge);\n renderer.drawMinorTickLines(axis, index, element, gauge);\n renderer.drawAxisLabels(axis, index, element, gauge);\n _this.pointerRenderer.drawPointers(axis, index, element, gauge, animate);\n if (gauge.annotationsModule) {\n gauge.annotationsModule.renderAnnotation(axis, index);\n }\n axesElements.appendChild(element);\n });\n // For append clip rect for axes\n gauge.svgObject.appendChild(gauge.renderer.drawClipPath({\n 'id': gauge.element.id + '_GaugeAreaClipRect_',\n 'x': 0, 'y': 0,\n 'width': gauge.availableSize.width,\n 'height': gauge.availableSize.height,\n 'fill': 'transparent', 'stroke': 'transparent'\n }));\n gauge.svgObject.appendChild(axesElements);\n };\n /**\n * Calculate maximum label width for the axis.\n * @return {void}\n */\n AxisLayoutPanel.prototype.getMaxLabelWidth = function (gauge, axis) {\n axis.maxLabelSize = new Size(0, 0);\n for (var _i = 0, _a = axis.visibleLabels; _i < _a.length; _i++) {\n var label = _a[_i];\n label.size = measureText(label.text, axis.labelStyle.font);\n axis.maxLabelSize.width = label.size.width > axis.maxLabelSize.width ?\n label.size.width : axis.maxLabelSize.width;\n axis.maxLabelSize.height = label.size.height > axis.maxLabelSize.height ?\n label.size.height : axis.maxLabelSize.height;\n }\n };\n return AxisLayoutPanel;\n}());\nexport { AxisLayoutPanel };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n/**\n * Circular Gauge\n */\nimport { Property, NotifyPropertyChanges, Component, Complex, Browser } from '@syncfusion/ej2-base';\nimport { Event, SvgRenderer, EventHandler, Collection, Internationalization } from '@syncfusion/ej2-base';\nimport { remove, createElement } from '@syncfusion/ej2-base';\nimport { TextOption, textElement, RectOption, getAngleFromLocation, getValueFromAngle, removeElement } from './utils/helper';\nimport { Size, stringToNumber, measureText, Rect, GaugeLocation, getElement, getPointer, setStyles, toPixel } from './utils/helper';\nimport { getAngleFromValue, getPathArc } from './utils/helper';\nimport { Border, Margin, Font, TooltipSettings } from './model/base';\nimport { Axis } from './axes/axis';\nimport { Annotations } from './annotations/annotations';\nimport { GaugeTooltip } from './user-interaction/tooltip';\nimport { load, loaded, gaugeMouseMove, gaugeMouseLeave, gaugeMouseDown } from './model/constants';\nimport { gaugeMouseUp, dragEnd, dragMove, dragStart, resized } from './model/constants';\nimport { AxisLayoutPanel } from './axes/axis-panel';\n/**\n * Represents the Circular gauge control.\n * ```html\n *
\n * \n * ```\n */\nvar CircularGauge = /** @class */ (function (_super) {\n __extends(CircularGauge, _super);\n /**\n * Constructor for creating the widget\n * @hidden\n */\n function CircularGauge(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * To create svg object, renderer and binding events for the container.\n */\n CircularGauge.prototype.preRender = function () {\n this.unWireEvents();\n this.trigger(load, { gauge: this });\n this.themeEffect();\n this.initPrivateVariable();\n this.setCulture();\n this.createSvg();\n this.wireEvents();\n };\n CircularGauge.prototype.themeEffect = function () {\n if (this.theme === 'Highcontrast') {\n this.titleStyle.color = this.titleStyle.color || '#FFFFFF';\n this.setThemeColors('#FFFFFF', '#FFFFFF');\n }\n else {\n this.titleStyle.color = this.titleStyle.color || '#424242';\n this.setThemeColors('#212121', '#757575');\n }\n };\n CircularGauge.prototype.setThemeColors = function (labelcolor, others) {\n for (var _i = 0, _a = this.axes; _i < _a.length; _i++) {\n var axis = _a[_i];\n axis.lineStyle.color = axis.lineStyle.color || others;\n axis.labelStyle.font.color = axis.labelStyle.font.color || labelcolor;\n axis.majorTicks.color = axis.majorTicks.color || others;\n axis.minorTicks.color = axis.minorTicks.color || others;\n for (var _b = 0, _c = axis.pointers; _b < _c.length; _b++) {\n var pointer = _c[_b];\n pointer.color = pointer.color || others;\n pointer.needleTail.color = pointer.needleTail.color || others;\n pointer.needleTail.border.color = pointer.needleTail.border.color || others;\n pointer.cap.color = pointer.cap.color || others;\n pointer.cap.border.color = pointer.cap.border.color || others;\n }\n }\n };\n /**\n * To render the circular gauge elements\n */\n CircularGauge.prototype.render = function () {\n this.calculateBounds();\n this.renderElements();\n };\n /**\n * Method to unbind events for circular gauge\n */\n CircularGauge.prototype.unWireEvents = function () {\n EventHandler.remove(this.element, Browser.touchStartEvent, this.gaugeOnMouseDown);\n EventHandler.remove(this.element, Browser.touchMoveEvent, this.mouseMove);\n EventHandler.remove(this.element, Browser.touchEndEvent, this.mouseEnd);\n EventHandler.remove(this.element, 'contextmenu', this.gaugeRightClick);\n EventHandler.remove(this.element, (Browser.isPointer ? 'pointerleave' : 'mouseleave'), this.mouseLeave);\n window.removeEventListener((Browser.isTouch && ('orientation' in window && 'onorientationchange' in window)) ? 'orientationchange' : 'resize', this.gaugeResize);\n };\n /**\n * Method to bind events for circular gauge\n */\n CircularGauge.prototype.wireEvents = function () {\n /*! Bind the Event handler */\n EventHandler.add(this.element, Browser.touchStartEvent, this.gaugeOnMouseDown, this);\n EventHandler.add(this.element, Browser.touchMoveEvent, this.mouseMove, this);\n EventHandler.add(this.element, Browser.touchEndEvent, this.mouseEnd, this);\n EventHandler.add(this.element, 'contextmenu', this.gaugeRightClick, this);\n EventHandler.add(this.element, (Browser.isPointer ? 'pointerleave' : 'mouseleave'), this.mouseLeave, this);\n window.addEventListener((Browser.isTouch && ('orientation' in window && 'onorientationchange' in window)) ? 'orientationchange' : 'resize', this.gaugeResize.bind(this));\n /*! Apply the style for circular gauge */\n this.setGaugeStyle(this.element);\n };\n /**\n * Handles the mouse move.\n * @return {boolean}\n * @private\n */\n CircularGauge.prototype.mouseMove = function (e) {\n var args = this.getMouseArgs(e, 'touchmove', gaugeMouseMove);\n this.trigger(gaugeMouseMove, args);\n var dragArgs;\n var tooltip = this.tooltipModule;\n if (!args.cancel) {\n if (this.tooltip.enable && tooltip) {\n if (args.target.id.indexOf('_Pointer_') >= 0 && !this.activePointer) {\n tooltip.renderTooltip(args.target);\n }\n else {\n tooltip.ejTooltip.close();\n }\n }\n if (this.enablePointerDrag && this.activePointer) {\n dragArgs = {\n axis: this.activeAxis,\n pointer: this.activePointer,\n previousValue: this.activePointer.currentValue,\n name: dragMove,\n currentValue: null\n };\n this.pointerDrag(new GaugeLocation(args.x, args.y));\n dragArgs.currentValue = this.activePointer.currentValue;\n this.trigger(dragMove, dragArgs);\n }\n }\n return false;\n };\n /**\n * Handles the mouse leave.\n * @return {boolean}\n * @private\n */\n CircularGauge.prototype.mouseLeave = function (e) {\n this.activeAxis = null;\n this.activePointer = null;\n this.svgObject.setAttribute('cursor', 'auto');\n var args = this.getMouseArgs(e, 'touchmove', gaugeMouseLeave);\n this.trigger(gaugeMouseLeave, args);\n if (this.tooltip.enable && this.tooltipModule) {\n this.tooltipModule.ejTooltip.close();\n }\n return false;\n };\n /**\n * Handles the mouse right click.\n * @return {boolean}\n * @private\n */\n CircularGauge.prototype.gaugeRightClick = function (event) {\n if (event.buttons === 2 || event.pointerType === 'touch') {\n event.preventDefault();\n event.stopPropagation();\n return false;\n }\n return true;\n };\n /**\n * Handles the pointer draf while mouse move on gauge.\n * @private\n */\n CircularGauge.prototype.pointerDrag = function (location) {\n var axis = this.activeAxis;\n var range = axis.visibleRange;\n var value = getValueFromAngle(getAngleFromLocation(this.midPoint, location), range.max, range.min, axis.startAngle, axis.endAngle, axis.direction === 'ClockWise');\n if (value >= range.min && value <= range.max) {\n this.activePointer.currentValue = value;\n this.activePointer.value = value;\n this.gaugeAxisLayoutPanel.pointerRenderer.setPointerValue(axis, this.activePointer, value);\n }\n };\n /**\n * Handles the mouse down on gauge.\n * @return {boolean}\n * @private\n */\n CircularGauge.prototype.gaugeOnMouseDown = function (e) {\n var currentPointer;\n var args = this.getMouseArgs(e, 'touchstart', gaugeMouseDown);\n this.trigger(gaugeMouseDown, args);\n if (!args.cancel && args.target.id.indexOf('_Pointer_') >= 0 &&\n args.target.id.indexOf(this.element.id + '_Axis_') >= 0) {\n currentPointer = getPointer(args.target.id, this);\n this.activeAxis = this.axes[currentPointer.axisIndex];\n this.activePointer = this.activeAxis.pointers[currentPointer.pointerIndex];\n this.trigger(dragStart, {\n axis: this.activeAxis,\n name: dragStart,\n pointer: this.activePointer,\n currentValue: this.activePointer.currentValue\n });\n this.svgObject.setAttribute('cursor', 'pointer');\n }\n return false;\n };\n /**\n * Handles the mouse end.\n * @return {boolean}\n * @private\n */\n CircularGauge.prototype.mouseEnd = function (e) {\n var args = this.getMouseArgs(e, 'touchend', gaugeMouseUp);\n var isTouch = e.pointerType === 'touch' || e.pointerType === '2' || e.type === 'touchend';\n var tooltipInterval;\n var tooltip = this.tooltipModule;\n this.trigger(gaugeMouseUp, args);\n if (this.activeAxis && this.activePointer) {\n this.trigger(dragEnd, {\n name: dragEnd,\n axis: this.activeAxis,\n pointer: this.activePointer,\n currentValue: this.activePointer.currentValue\n });\n if (!args.cancel && isTouch && this.tooltip.enable && tooltip) {\n if (args.target.id.indexOf('_Pointer_') >= 0) {\n tooltip.renderTooltip(args.target);\n tooltipInterval = window.setTimeout(function () {\n tooltip.ejTooltip.close();\n }, 2000);\n }\n }\n this.activeAxis = null;\n this.activePointer = null;\n }\n this.svgObject.setAttribute('cursor', 'auto');\n return false;\n };\n /**\n * Handles the mouse event arguments.\n * @return {IMouseEventArgs}\n * @private\n */\n CircularGauge.prototype.getMouseArgs = function (e, type, name) {\n var rect = this.element.getBoundingClientRect();\n var location = new GaugeLocation(-rect.left, -rect.top);\n var isTouch = (e.type === type);\n location.x += isTouch ? e.changedTouches[0].clientX : e.clientX;\n location.y += isTouch ? e.changedTouches[0].clientY : e.clientY;\n return {\n cancel: false, name: name,\n x: location.x, y: location.y,\n target: isTouch ? e.target : e.target\n };\n };\n /**\n * Handles the gauge resize.\n * @return {boolean}\n * @private\n */\n CircularGauge.prototype.gaugeResize = function (e) {\n var _this = this;\n var args = {\n gauge: this,\n previousSize: new Size(this.availableSize.width, this.availableSize.height),\n name: resized,\n currentSize: new Size(0, 0)\n };\n this.animatePointer = false;\n if (this.resizeTo) {\n clearTimeout(this.resizeTo);\n }\n if (this.element.classList.contains('e-circulargauge')) {\n this.resizeTo = window.setTimeout(function () {\n _this.createSvg();\n _this.calculateBounds();\n _this.renderElements();\n args.currentSize = _this.availableSize;\n _this.trigger(resized, args);\n }, 500);\n }\n return false;\n };\n /**\n * Applying styles for circular gauge elements\n */\n CircularGauge.prototype.setGaugeStyle = function (element) {\n element.style.touchAction = this.enablePointerDrag ? 'none' : 'element';\n element.style.msTouchAction = this.enablePointerDrag ? 'none' : 'element';\n element.style.msContentZooming = 'none';\n element.style.msUserSelect = 'none';\n element.style.webkitUserSelect = 'none';\n element.style.position = 'relative';\n };\n /**\n * Method to set culture for gauge\n */\n CircularGauge.prototype.setCulture = function () {\n this.intl = new Internationalization();\n };\n /**\n * Methods to create svg element for circular gauge.\n */\n CircularGauge.prototype.createSvg = function () {\n this.removeSvg();\n this.calculateSvgSize();\n this.svgObject = this.renderer.createSvg({\n id: this.element.id + '_svg',\n width: this.availableSize.width,\n height: this.availableSize.height\n });\n };\n /**\n * To Remove the SVG from circular gauge.\n * @return {boolean}\n * @private\n */\n CircularGauge.prototype.removeSvg = function () {\n removeElement(this.element.id + '_Secondary_Element');\n if (this.svgObject) {\n while (this.svgObject.childNodes.length > 0) {\n this.svgObject.removeChild(this.svgObject.firstChild);\n }\n if (!this.svgObject.hasChildNodes() && this.svgObject.parentNode) {\n remove(this.svgObject);\n }\n }\n };\n /**\n * To initialize the circular gauge private variable.\n * @private\n */\n CircularGauge.prototype.initPrivateVariable = function () {\n this.renderer = new SvgRenderer(this.element.id);\n this.gaugeAxisLayoutPanel = new AxisLayoutPanel(this);\n this.animatePointer = true;\n };\n /**\n * To calculate the size of the circular gauge element.\n */\n CircularGauge.prototype.calculateSvgSize = function () {\n var containerWidth = this.element.offsetWidth;\n var containerHeight = this.element.offsetHeight;\n var width = stringToNumber(this.width, containerWidth) || containerWidth || 600;\n var height = stringToNumber(this.height, containerHeight) || containerHeight || 450;\n this.availableSize = new Size(width, height);\n };\n /**\n * Method to calculate the availble size for circular gauge.\n */\n CircularGauge.prototype.calculateBounds = function () {\n var padding = 5;\n var margin = this.margin;\n // Title Height;\n var titleHeight = 0;\n if (this.title) {\n titleHeight = measureText(this.title, this.titleStyle).height + padding;\n }\n var top = margin.top + titleHeight + this.border.width;\n var left = margin.left + this.border.width;\n var width = this.availableSize.width - left - margin.right - this.border.width;\n var height = this.availableSize.height - top - this.border.width - margin.bottom;\n var radius = Math.min(width, height) / 2;\n var rect = new Rect((left + (width / 2) - radius), (top + (height / 2) - radius), radius * 2, radius * 2);\n var centerX = this.centerX !== null ?\n stringToNumber(this.centerX, this.availableSize.width) : rect.x + (rect.width / 2);\n var centerY = this.centerY !== null ?\n stringToNumber(this.centerY, this.availableSize.height) : rect.y + (rect.height / 2);\n this.midPoint = new GaugeLocation(centerX, centerY);\n this.gaugeAxisLayoutPanel.measureAxis(rect);\n };\n /**\n * To render elements for circular gauge\n */\n CircularGauge.prototype.renderElements = function (animate) {\n if (animate === void 0) { animate = true; }\n this.renderBorder();\n this.renderTitle();\n this.gaugeAxisLayoutPanel.renderAxes(animate);\n this.element.appendChild(this.svgObject);\n this.trigger(loaded, { gauge: this });\n };\n /**\n * Method to render the title for circular gauge.\n */\n CircularGauge.prototype.renderTitle = function () {\n if (this.title) {\n var size = measureText(this.title, this.titleStyle);\n var options = new TextOption(this.element.id + '_CircularGaugeTitle', this.availableSize.width / 2, this.margin.top + 3 * (size.height / 4), 'middle', this.title);\n var element = textElement(options, this.titleStyle, this.titleStyle.color, this.svgObject, '');\n element.setAttribute('aria-label', this.description || this.title);\n element.setAttribute('tabindex', this.tabIndex.toString());\n }\n };\n /**\n * Method to render the border for circular gauge.\n */\n CircularGauge.prototype.renderBorder = function () {\n var borderWidth = this.border.width;\n if (borderWidth > 0 || (this.background !== null && this.background !== 'transparent')) {\n this.svgObject.appendChild(this.renderer.drawRectangle(new RectOption(this.element.id + '_CircularGaugeBorder', this.background, this.border, null, new Rect(borderWidth / 2, borderWidth / 2, this.availableSize.width - borderWidth, this.availableSize.height - borderWidth))));\n }\n };\n /**\n * Method to set the pointer value dynamically for circular gauge.\n */\n CircularGauge.prototype.setPointerValue = function (axisIndex, pointerIndex, value) {\n var _this = this;\n var axis = this.axes[axisIndex];\n var pointer = axis.pointers[pointerIndex];\n var pointerRadius = pointer.currentRadius;\n var enableAnimation = pointer.animation.enable;\n value = value < axis.visibleRange.min ? axis.visibleRange.min : value;\n value = value > axis.visibleRange.max ? axis.visibleRange.max : value;\n pointer.pathElement.map(function (element) {\n if (pointer.type === 'RangeBar') {\n setStyles(element, pointer.color, pointer.border);\n if (enableAnimation) {\n _this.gaugeAxisLayoutPanel.pointerRenderer.performRangeBarAnimation(element, pointer.currentValue, value, axis, pointer, pointerRadius, (pointerRadius - pointer.pointerWidth));\n }\n else {\n _this.gaugeAxisLayoutPanel.pointerRenderer.setPointerValue(axis, pointer, value);\n }\n }\n else {\n if (element.id.indexOf('_Pointer_NeedleCap_') >= 0) {\n setStyles(element, pointer.cap.color, pointer.cap.border);\n }\n else if (element.id.indexOf('_Pointer_NeedleTail_') >= 0) {\n setStyles(element, pointer.needleTail.color, pointer.needleTail.border);\n }\n else if (element.id.indexOf('_Pointer_NeedleRect_') >= 0) {\n setStyles(element, 'transparent', { color: 'transparent', width: 0 });\n }\n else {\n setStyles(element, pointer.color, pointer.border);\n }\n if (enableAnimation) {\n _this.gaugeAxisLayoutPanel.pointerRenderer.performNeedleAnimation(element, pointer.currentValue, value, axis, pointer, pointerRadius, (pointerRadius - pointer.pointerWidth));\n }\n else {\n _this.gaugeAxisLayoutPanel.pointerRenderer.setPointerValue(axis, pointer, value);\n }\n }\n });\n pointer.currentValue = value;\n pointer.value = value;\n };\n /**\n * Method to set the annotation content dynamically for circular gauge.\n */\n CircularGauge.prototype.setAnnotationValue = function (axisIndex, annotationIndex, content) {\n var isElementExist = getElement(this.element.id + '_Annotations_' + axisIndex) !== null;\n var element = getElement(this.element.id + '_Annotations_' + axisIndex) ||\n createElement('div', {\n id: this.element.id + '_Annotations_' + axisIndex\n });\n var annotation = this.axes[axisIndex].annotations[annotationIndex];\n if (content !== null) {\n removeElement(this.element.id + '_Axis_' + axisIndex + '_Annotation_' + annotationIndex);\n annotation.content = content;\n this.annotationsModule.createTemplate(element, annotationIndex, axisIndex);\n if (!isElementExist) {\n getElement(this.element.id + '_Secondary_Element').appendChild(element);\n }\n }\n };\n /**\n * Method to set the range values dynamically for circular gauge.\n */\n CircularGauge.prototype.setRangeValue = function (axisIndex, rangeIndex, start, end) {\n var element = getElement(this.element.id + '_Axis_' + axisIndex + '_Range_' + rangeIndex);\n var axis = this.axes[axisIndex];\n var range = axis.ranges[rangeIndex];\n var axisRange = axis.visibleRange;\n var isClockWise = axis.direction === 'ClockWise';\n var startValue = Math.min(Math.max(start, axisRange.min), end);\n var endValue = Math.min(Math.max(start, end), axisRange.max);\n var startAngle = getAngleFromValue(startValue, axisRange.max, axisRange.min, axis.startAngle, axis.endAngle, isClockWise);\n var endAngle = getAngleFromValue(endValue, axisRange.max, axisRange.min, axis.startAngle, axis.endAngle, isClockWise);\n var startWidth;\n if (range.startWidth.length > 0) {\n startWidth = toPixel(range.startWidth, range.currentRadius);\n }\n else {\n startWidth = range.startWidth;\n }\n var endWidth;\n if (range.endWidth.length > 0) {\n endWidth = toPixel(range.endWidth, range.currentRadius);\n }\n else {\n endWidth = range.endWidth;\n }\n endAngle = isClockWise ? endAngle : [startAngle, startAngle = endAngle][0];\n endWidth = isClockWise ? endWidth : [startWidth, startWidth = endWidth][0];\n element.setAttribute('d', getPathArc(this.midPoint, Math.round(startAngle), Math.round(endAngle), range.currentRadius, startWidth, endWidth));\n setStyles(element, (range.color ? range.color : range.rangeColor), {\n color: (range.color ? range.color : range.rangeColor),\n width: 0\n });\n };\n /**\n * To destroy the widget\n * @method destroy\n * @return {void}\n * @member of Circular-Gauge\n */\n CircularGauge.prototype.destroy = function () {\n this.unWireEvents();\n this.removeSvg();\n _super.prototype.destroy.call(this);\n };\n /**\n * To provide the array of modules needed for control rendering\n * @return {ModuleDeclaration[]}\n * @private\n */\n CircularGauge.prototype.requiredModules = function () {\n var modules = [];\n var annotationEnable = false;\n var axes = this.axes;\n axes.map(function (axis) {\n axis.annotations.map(function (annotation) {\n annotationEnable = annotationEnable || annotation.content !== null;\n });\n });\n if (annotationEnable) {\n modules.push({\n member: 'Annotations',\n args: [this, Annotations]\n });\n }\n if (this.tooltip.enable) {\n modules.push({\n member: 'Tooltip',\n args: [this, GaugeTooltip]\n });\n }\n return modules;\n };\n /**\n * Get the properties to be maintained in the persisted state.\n * @private\n */\n CircularGauge.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Called internally if any of the property value changed.\n * @private\n */\n CircularGauge.prototype.onPropertyChanged = function (newProp, oldProp) {\n // property method calculated\n var renderer = false;\n var refreshBounds = false;\n var refreshWithoutAnimation = false;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'height':\n case 'width':\n case 'centerX':\n case 'centerY':\n case 'margin':\n this.createSvg();\n refreshBounds = true;\n break;\n case 'title':\n refreshBounds = (newProp.title === '' || oldProp.title === '');\n renderer = !(newProp.title === '' || oldProp.title === '');\n break;\n case 'titleStyle':\n if (newProp.titleStyle && newProp.titleStyle.size) {\n refreshBounds = true;\n }\n else {\n renderer = true;\n }\n break;\n case 'border':\n renderer = true;\n break;\n case 'background':\n renderer = true;\n break;\n case 'axes':\n refreshWithoutAnimation = true;\n break;\n }\n }\n if (!refreshBounds && renderer) {\n this.removeSvg();\n this.renderElements();\n }\n if (refreshBounds) {\n this.removeSvg();\n this.calculateBounds();\n this.renderElements();\n }\n if (refreshWithoutAnimation && !renderer && !refreshBounds) {\n this.removeSvg();\n this.calculateBounds();\n this.renderElements(false);\n }\n };\n /**\n * Get component name for circular gauge\n * @private\n */\n CircularGauge.prototype.getModuleName = function () {\n return 'circulargauge';\n };\n __decorate([\n Property(null)\n ], CircularGauge.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], CircularGauge.prototype, \"height\", void 0);\n __decorate([\n Complex({ color: 'transparent', width: 0 }, Border)\n ], CircularGauge.prototype, \"border\", void 0);\n __decorate([\n Property('transparent')\n ], CircularGauge.prototype, \"background\", void 0);\n __decorate([\n Property('')\n ], CircularGauge.prototype, \"title\", void 0);\n __decorate([\n Complex({ size: '15px', color: null }, Font)\n ], CircularGauge.prototype, \"titleStyle\", void 0);\n __decorate([\n Complex({}, Margin)\n ], CircularGauge.prototype, \"margin\", void 0);\n __decorate([\n Collection([{}], Axis)\n ], CircularGauge.prototype, \"axes\", void 0);\n __decorate([\n Complex({}, TooltipSettings)\n ], CircularGauge.prototype, \"tooltip\", void 0);\n __decorate([\n Property(false)\n ], CircularGauge.prototype, \"enablePointerDrag\", void 0);\n __decorate([\n Property(null)\n ], CircularGauge.prototype, \"centerX\", void 0);\n __decorate([\n Property(null)\n ], CircularGauge.prototype, \"centerY\", void 0);\n __decorate([\n Property('Material')\n ], CircularGauge.prototype, \"theme\", void 0);\n __decorate([\n Property(false)\n ], CircularGauge.prototype, \"useGroupingSeparator\", void 0);\n __decorate([\n Property(null)\n ], CircularGauge.prototype, \"description\", void 0);\n __decorate([\n Property(1)\n ], CircularGauge.prototype, \"tabIndex\", void 0);\n __decorate([\n Event()\n ], CircularGauge.prototype, \"loaded\", void 0);\n __decorate([\n Event()\n ], CircularGauge.prototype, \"load\", void 0);\n __decorate([\n Event()\n ], CircularGauge.prototype, \"animationComplete\", void 0);\n __decorate([\n Event()\n ], CircularGauge.prototype, \"axisLabelRender\", void 0);\n __decorate([\n Event()\n ], CircularGauge.prototype, \"annotationRender\", void 0);\n __decorate([\n Event()\n ], CircularGauge.prototype, \"tooltipRender\", void 0);\n __decorate([\n Event()\n ], CircularGauge.prototype, \"dragStart\", void 0);\n __decorate([\n Event()\n ], CircularGauge.prototype, \"dragMove\", void 0);\n __decorate([\n Event()\n ], CircularGauge.prototype, \"dragEnd\", void 0);\n __decorate([\n Event()\n ], CircularGauge.prototype, \"gaugeMouseMove\", void 0);\n __decorate([\n Event()\n ], CircularGauge.prototype, \"gaugeMouseLeave\", void 0);\n __decorate([\n Event()\n ], CircularGauge.prototype, \"gaugeMouseDown\", void 0);\n __decorate([\n Event()\n ], CircularGauge.prototype, \"gaugeMouseUp\", void 0);\n __decorate([\n Event()\n ], CircularGauge.prototype, \"resized\", void 0);\n CircularGauge = __decorate([\n NotifyPropertyChanges\n ], CircularGauge);\n return CircularGauge;\n}(Component));\nexport { CircularGauge };\n","import * as index from '@syncfusion/ej2-circulargauge';\nindex.CircularGauge.Inject( index.GaugeTooltip,index.Annotations);\nexport * from '@syncfusion/ej2-circulargauge';\n","/**\n * Size defines and processes the size(width/height) of the objects\n */\nvar Size = /** @class */ (function () {\n function Size(width, height) {\n this.width = width;\n this.height = height;\n }\n Size.prototype.isEmpty = function () {\n return this.height === 0 && this.width === 0;\n };\n // public static get empty(): Size {\n // return new Size();\n // }\n // public get isEmpty(): boolean {\n // return this.equals(Size.empty);\n // }\n // public equals(size2: Size): boolean {\n // return this.width === size2.width && this.height === size2.height;\n // }\n // public union(size: Size): void {\n // size.width = Math.max(size.width, this.width);\n // size.height = Math.max(size.height, this.height);\n // }\n Size.prototype.clone = function () {\n return new Size(this.width, this.height);\n };\n return Size;\n}());\nexport { Size };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * Defines and processes coordinates\n */\nvar Point = /** @class */ (function (_super) {\n __extends(Point, _super);\n function Point() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n Point.equals = function (point1, point2) {\n if (point1 === point2) {\n return true;\n }\n if (!point1 || !point2) {\n return false;\n }\n return !point1 || !point2 || point1.x === point2.x && point1.y === point2.y;\n };\n /**\n * check whether the points are given\n */\n Point.isEmptyPoint = function (point) {\n if (point.x && point.y) {\n return false;\n }\n return true;\n };\n // public add(point1: PointModel, point2: PointModel): PointModel {\n // return { x: point1.x + point2.x, y: point1.y + point2.y };\n // }\n // public subtract(point1: PointModel, point2: PointModel): PointModel {\n // return { x: point1.x - point2.x, y: point1.y - point2.y };\n // }\n // public multiply(point1: PointModel, point2: PointModel): PointModel {\n // return {\n // x: point1.x * point2.x, y: point1.y * point2.y\n // };\n // }\n // public crossProduct(point1: PointModel, point2: PointModel): PointModel {\n // return {\n // x: point1.x * point2.y, y: point2.x * point1.y\n // };\n // }\n // public offset(offsetX: number, offsetY: number): void {\n // this.x += offsetX;\n // this.y += offsetY;\n // }\n // public rotate(angle: number): PointModel {\n // let c: number = Math.cos(angle);\n // let s: number = Math.sin(angle);\n // return {\n // x: c * this.x - s * this.y, y: s * this.x + c * this.y\n // };\n // }\n // public distance(point2: PointModel): number {\n // return Math.sqrt(Math.pow(this.x - point2.x, 2) + Math.pow(this.y - point2.y, 2));\n // }\n Point.transform = function (point, angle, length) {\n var pt = { x: 0, y: 0 };\n pt.x = Math.round((point.x + length * Math.cos(angle * Math.PI / 180)) * 100) / 100;\n pt.y = Math.round((point.y + length * Math.sin(angle * Math.PI / 180)) * 100) / 100;\n return pt;\n };\n Point.findLength = function (s, e) {\n var length = Math.sqrt(Math.pow((s.x - e.x), 2) + Math.pow((s.y - e.y), 2));\n return length;\n };\n Point.findAngle = function (point1, point2) {\n var angle = Math.atan2(point2.y - point1.y, point2.x - point1.x);\n angle = (180 * angle / Math.PI);\n angle %= 360;\n if (angle < 0) {\n angle += 360;\n }\n return angle;\n };\n Point.distancePoints = function (pt1, pt2) {\n return Math.sqrt(Math.pow(pt2.x - pt1.x, 2) + Math.pow(pt2.y - pt1.y, 2));\n };\n Point.adjustPoint = function (source, target, isStart, length) {\n var pt = isStart ? { x: source.x, y: source.y } : { x: target.x, y: target.y };\n var angle;\n if (source.x === target.x) {\n if (source.y < target.y && isStart || source.y > target.y && !isStart) {\n pt.y += length;\n }\n else {\n pt.y -= length;\n }\n }\n else if (source.y === target.y) {\n if (source.x < target.x && isStart || source.x > target.x && !isStart) {\n pt.x += length;\n }\n else {\n pt.x -= length;\n }\n }\n else {\n if (isStart) {\n angle = this.findAngle(source, target);\n pt = this.transform(source, angle, length);\n }\n else {\n angle = this.findAngle(target, source);\n pt = this.transform(target, angle, length);\n }\n }\n return pt;\n };\n Point.direction = function (pt1, pt2) {\n if (Math.abs(pt2.x - pt1.x) > Math.abs(pt2.y - pt1.y)) {\n return pt1.x < pt2.x ? 'Right' : 'Left';\n }\n else {\n return pt1.y < pt2.y ? 'Bottom' : 'Top';\n }\n };\n __decorate([\n Property(0)\n ], Point.prototype, \"x\", void 0);\n __decorate([\n Property(0)\n ], Point.prototype, \"y\", void 0);\n return Point;\n}(ChildProperty));\nexport { Point };\n","/**\n * Rect defines and processes rectangular regions\n */\nvar Rect = /** @class */ (function () {\n function Rect(x, y, width, height) {\n /**\n * Sets the x-coordinate of the starting point of a rectangular region\n * @default 0\n */\n this.x = Number.MAX_VALUE;\n /**\n * Sets the y-coordinate of the starting point of a rectangular region\n * @default 0\n */\n this.y = Number.MAX_VALUE;\n /**\n * Sets the width of a rectangular region\n * @default 0\n */\n this.width = 0;\n /**\n * Sets the height of a rectangular region\n * @default 0\n */\n this.height = 0;\n if (x === undefined || y === undefined) {\n x = y = Number.MAX_VALUE;\n width = height = 0;\n }\n else {\n if (width === undefined) {\n width = 0;\n }\n if (height === undefined) {\n height = 0;\n }\n }\n this.x = x;\n this.y = y;\n this.width = width;\n this.height = height;\n }\n Object.defineProperty(Rect.prototype, \"left\", {\n get: function () {\n return this.x;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Rect.prototype, \"right\", {\n get: function () {\n return this.x + this.width;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Rect.prototype, \"top\", {\n get: function () {\n return this.y;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Rect.prototype, \"bottom\", {\n get: function () {\n return this.y + this.height;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Rect.prototype, \"topLeft\", {\n get: function () {\n return { x: this.left, y: this.top };\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Rect.prototype, \"topRight\", {\n get: function () {\n return { x: this.right, y: this.top };\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Rect.prototype, \"bottomLeft\", {\n get: function () {\n return { x: this.left, y: this.bottom };\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Rect.prototype, \"bottomRight\", {\n get: function () {\n return { x: this.right, y: this.bottom };\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Rect.prototype, \"middleLeft\", {\n get: function () {\n return { x: this.left, y: this.y + this.height / 2 };\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Rect.prototype, \"middleRight\", {\n get: function () {\n return { x: this.right, y: this.y + this.height / 2 };\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Rect.prototype, \"topCenter\", {\n get: function () {\n return { x: this.x + this.width / 2, y: this.top };\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Rect.prototype, \"bottomCenter\", {\n get: function () {\n return { x: this.x + this.width / 2, y: this.bottom };\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Rect.prototype, \"center\", {\n get: function () {\n return { x: this.x + this.width / 2, y: this.y + this.height / 2 };\n },\n enumerable: true,\n configurable: true\n });\n Rect.prototype.equals = function (rect1, rect2) {\n return rect1.x === rect2.x && rect1.y === rect2.y && rect1.width === rect2.width && rect1.height === rect2.height;\n };\n Rect.prototype.uniteRect = function (rect) {\n var right = Math.max(Number.NaN === this.right || this.x === Number.MAX_VALUE ? rect.right : this.right, rect.right);\n var bottom = Math.max(Number.NaN === this.bottom || this.y === Number.MAX_VALUE ? rect.bottom : this.bottom, rect.bottom);\n this.x = Math.min(this.left, rect.left);\n this.y = Math.min(this.top, rect.top);\n this.width = right - this.x;\n this.height = bottom - this.y;\n return this;\n };\n Rect.prototype.unitePoint = function (point) {\n if (this.x === Number.MAX_VALUE) {\n this.x = point.x;\n this.y = point.y;\n return;\n }\n var x = Math.min(this.left, point.x);\n var y = Math.min(this.top, point.y);\n var right = Math.max(this.right, point.x);\n var bottom = Math.max(this.bottom, point.y);\n this.x = x;\n this.y = y;\n this.width = right - this.x;\n this.height = bottom - this.y;\n };\n // public intersection(rect: Rect): Rect {\n // if (this.intersects(rect)) {\n // let left: number = Math.max(this.left, rect.left);\n // let top: number = Math.max(this.top, rect.top);\n // let right: number = Math.min(this.right, rect.right);\n // let bottom: number = Math.min(this.bottom, rect.bottom);\n // return new Rect(left, top, right - left, bottom - top);\n // }\n // return Rect.empty;\n // }\n Rect.prototype.Inflate = function (padding) {\n this.x -= padding;\n this.y -= padding;\n this.width += padding * 2;\n this.height += padding * 2;\n return this;\n };\n //public Inflate(size: Size): Rect {\n // this.x -= size.Width;\n // this.y -= size.Height;\n // this.width += size.Width * 2;\n // this.height += size.Height * 2;\n // return this;\n //}\n // public inflate(width: number, height: number): void {\n // this.x -= width;\n // this.y -= height;\n // this.width += width * 2;\n // this.height += height * 2;\n // }\n Rect.prototype.intersects = function (rect) {\n if (this.right < rect.left || this.left > rect.right || this.top > rect.bottom || this.bottom < rect.top) {\n return false;\n }\n return true;\n };\n Rect.prototype.containsRect = function (rect) {\n return this.left <= rect.left && this.right >= rect.right && this.top <= rect.top && this.bottom >= rect.bottom;\n };\n Rect.prototype.containsPoint = function (point, padding) {\n if (padding === void 0) { padding = 0; }\n return this.left - padding <= point.x && this.right + padding >= point.x\n && this.top - padding <= point.y && this.bottom + padding >= point.y;\n };\n // public toPoints(): PointModel[] {\n // let points: PointModel[] = [];\n // points.push(this.topLeft);\n // points.push(this.topRight);\n // points.push(this.bottomLeft);\n // points.push(this.bottomRight);\n // return points;\n // }\n Rect.toBounds = function (points) {\n var rect = new Rect();\n for (var _i = 0, points_1 = points; _i < points_1.length; _i++) {\n var pt = points_1[_i];\n rect.unitePoint(pt);\n }\n return rect;\n };\n Rect.empty = new Rect(Number.MAX_VALUE, Number.MIN_VALUE, 0, 0);\n return Rect;\n}());\nexport { Rect };\n","/**\n * enum module defines the public enumerations\n */\n/**\n * Constraints to define when a port has to be visible\n * Visible - Always shows the port\n * Hidden - Always hides the port\n * Hover - Shows the port when the mouse hovers over a node\n * Connect - Shows the port when a connection end point is dragged over a node\n * Default - By default the ports will be visible when a node is hovered and being tried to connect\n * @aspNumberEnum\n */\nexport var PortVisibility;\n(function (PortVisibility) {\n /** Always shows the port */\n PortVisibility[PortVisibility[\"Visible\"] = 1] = \"Visible\";\n /** Always hides the port */\n PortVisibility[PortVisibility[\"Hidden\"] = 2] = \"Hidden\";\n /** Shows the port when the mouse hovers over a node */\n PortVisibility[PortVisibility[\"Hover\"] = 4] = \"Hover\";\n /** Shows the port when a connection end point is dragged over a node */\n PortVisibility[PortVisibility[\"Connect\"] = 8] = \"Connect\";\n})(PortVisibility || (PortVisibility = {}));\n/**\n * Defines the constraints to Enables / Disables some features of Snapping.\n * None - Snapping does not happen\n * ShowHorizontalLines - Displays only the horizontal gridlines in diagram.\n * ShowVerticalLines - Displays only the Vertical gridlines in diagram.\n * ShowLines - Display both Horizontal and Vertical gridlines.\n * SnapToHorizontalLines - Enables the object to snap only with horizontal gridlines.\n * SnapToVerticalLines - Enables the object to snap only with horizontal gridlines.\n * SnapToLines - Enables the object to snap with both horizontal and Vertical gridlines.\n * snapToObject - Enables the object to snap with the other objects in the diagram.\n * @IgnoreSingular\n * @aspNumberEnum\n */\nexport var SnapConstraints;\n(function (SnapConstraints) {\n /** None - Snapping does not happen */\n SnapConstraints[SnapConstraints[\"None\"] = 0] = \"None\";\n /** ShowHorizontalLines - Displays only the horizontal gridlines in diagram. */\n SnapConstraints[SnapConstraints[\"ShowHorizontalLines\"] = 1] = \"ShowHorizontalLines\";\n /** ShowVerticalLines - Displays only the Vertical gridlines in diagram */\n SnapConstraints[SnapConstraints[\"ShowVerticalLines\"] = 2] = \"ShowVerticalLines\";\n /** ShowLines - Display both Horizontal and Vertical gridlines */\n SnapConstraints[SnapConstraints[\"ShowLines\"] = 3] = \"ShowLines\";\n /** SnapToHorizontalLines - Enables the object to snap only with horizontal gridlines */\n SnapConstraints[SnapConstraints[\"SnapToHorizontalLines\"] = 4] = \"SnapToHorizontalLines\";\n /** SnapToVerticalLines - Enables the object to snap only with horizontal gridlines */\n SnapConstraints[SnapConstraints[\"SnapToVerticalLines\"] = 8] = \"SnapToVerticalLines\";\n /** SnapToLines - Enables the object to snap with both horizontal and Vertical gridlines */\n SnapConstraints[SnapConstraints[\"SnapToLines\"] = 12] = \"SnapToLines\";\n /** SnapToObject - Enables the object to snap with the other objects in the diagram. */\n SnapConstraints[SnapConstraints[\"SnapToObject\"] = 16] = \"SnapToObject\";\n /** Shows gridlines and enables snapping */\n SnapConstraints[SnapConstraints[\"All\"] = 31] = \"All\";\n})(SnapConstraints || (SnapConstraints = {}));\n/**\n * Defines the visibility of the selector handles\n * None - Hides all the selector elements\n * ConnectorSourceThumb - Shows/hides the source thumb of the connector\n * ConnectorTargetThumb - Shows/hides the target thumb of the connector\n * ResizeSouthEast - Shows/hides the bottom right resize handle of the selector\n * ResizeSouthWest - Shows/hides the bottom left resize handle of the selector\n * ResizeNorthEast - Shows/hides the top right resize handle of the selector\n * ResizeNorthWest - Shows/hides the top left resize handle of the selector\n * ResizeEast - Shows/hides the middle right resize handle of the selector\n * ResizeWest - Shows/hides the middle left resize handle of the selector\n * ResizeSouth - Shows/hides the bottom center resize handle of the selector\n * ResizeNorth - Shows/hides the top center resize handle of the selector\n * Rotate - Shows/hides the rotate handle of the selector\n * UserHandles - Shows/hides the user handles of the selector\n * Resize - Shows/hides all resize handles of the selector\n * @aspNumberEnum\n * @IgnoreSingular\n */\nexport var SelectorConstraints;\n(function (SelectorConstraints) {\n /** Hides all the selector elements */\n SelectorConstraints[SelectorConstraints[\"None\"] = 1] = \"None\";\n /** Shows/hides the source thumb of the connector */\n SelectorConstraints[SelectorConstraints[\"ConnectorSourceThumb\"] = 2] = \"ConnectorSourceThumb\";\n /** Shows/hides the target thumb of the connector */\n SelectorConstraints[SelectorConstraints[\"ConnectorTargetThumb\"] = 4] = \"ConnectorTargetThumb\";\n /** Shows/hides the bottom right resize handle of the selector */\n SelectorConstraints[SelectorConstraints[\"ResizeSouthEast\"] = 8] = \"ResizeSouthEast\";\n /** Shows/hides the bottom left resize handle of the selector */\n SelectorConstraints[SelectorConstraints[\"ResizeSouthWest\"] = 16] = \"ResizeSouthWest\";\n /** Shows/hides the top right resize handle of the selector */\n SelectorConstraints[SelectorConstraints[\"ResizeNorthEast\"] = 32] = \"ResizeNorthEast\";\n /** Shows/hides the top left resize handle of the selector */\n SelectorConstraints[SelectorConstraints[\"ResizeNorthWest\"] = 64] = \"ResizeNorthWest\";\n /** Shows/hides the middle right resize handle of the selector */\n SelectorConstraints[SelectorConstraints[\"ResizeEast\"] = 128] = \"ResizeEast\";\n /** Shows/hides the middle left resize handle of the selector */\n SelectorConstraints[SelectorConstraints[\"ResizeWest\"] = 256] = \"ResizeWest\";\n /** Shows/hides the bottom center resize handle of the selector */\n SelectorConstraints[SelectorConstraints[\"ResizeSouth\"] = 512] = \"ResizeSouth\";\n /** Shows/hides the top center resize handle of the selector */\n SelectorConstraints[SelectorConstraints[\"ResizeNorth\"] = 1024] = \"ResizeNorth\";\n /** Shows/hides the rotate handle of the selector */\n SelectorConstraints[SelectorConstraints[\"Rotate\"] = 2048] = \"Rotate\";\n /** Shows/hides the user handles of the selector */\n SelectorConstraints[SelectorConstraints[\"UserHandle\"] = 4096] = \"UserHandle\";\n /** Shows/hides the default tooltip of nodes and connectors */\n SelectorConstraints[SelectorConstraints[\"ToolTip\"] = 8192] = \"ToolTip\";\n /** Shows/hides all resize handles of the selector */\n SelectorConstraints[SelectorConstraints[\"ResizeAll\"] = 2046] = \"ResizeAll\";\n /** Shows all handles of the selector */\n SelectorConstraints[SelectorConstraints[\"All\"] = 16382] = \"All\";\n})(SelectorConstraints || (SelectorConstraints = {}));\n/**\n * Defines the constraints to enable/disable certain features of connector.\n * * None - Interaction of the connectors cannot be done.\n * * Select - Selects the connector.\n * * Delete - Delete the connector.\n * * Drag - Drag the connector.\n * * DragSourceEnd - Drag the source end of the connector.\n * * DragTargetEnd - Drag the target end of the connector.\n * * DragSegmentThump - Drag the segment thumb of the connector.\n * * AllowDrop - Allow to drop a node.\n * * Bridging - Creates bridge on intersection of two connectors.\n * * BridgeObstacle -\n * * InheritBridging - Creates bridge on intersection of two connectors.\n * * PointerEvents - Sets the pointer events.\n * * Tooltip - Displays a tooltip for the connectors.\n * * InheritToolTip - Displays a tooltip for the connectors.\n * * Interaction - Features of the connector used for interaction.\n * * ReadOnly - Enables ReadOnly\n * * Default - Default features of the connector.\n * @aspNumberEnum\n * @IgnoreSingular\n */\nexport var ConnectorConstraints;\n(function (ConnectorConstraints) {\n /** Disable all connector Constraints. */\n ConnectorConstraints[ConnectorConstraints[\"None\"] = 1] = \"None\";\n /** Enables connector to be selected. */\n ConnectorConstraints[ConnectorConstraints[\"Select\"] = 2] = \"Select\";\n /** Enables connector to be Deleted. */\n ConnectorConstraints[ConnectorConstraints[\"Delete\"] = 4] = \"Delete\";\n /** Enables connector to be Dragged. */\n ConnectorConstraints[ConnectorConstraints[\"Drag\"] = 8] = \"Drag\";\n /** Enables connectors source end to be selected. */\n ConnectorConstraints[ConnectorConstraints[\"DragSourceEnd\"] = 16] = \"DragSourceEnd\";\n /** Enables connectors target end to be selected. */\n ConnectorConstraints[ConnectorConstraints[\"DragTargetEnd\"] = 32] = \"DragTargetEnd\";\n /** Enables control point and end point of every segment in a connector for editing. */\n ConnectorConstraints[ConnectorConstraints[\"DragSegmentThumb\"] = 64] = \"DragSegmentThumb\";\n /** Enables AllowDrop constraints to the connector. */\n ConnectorConstraints[ConnectorConstraints[\"AllowDrop\"] = 128] = \"AllowDrop\";\n /** Enables bridging to the connector. */\n ConnectorConstraints[ConnectorConstraints[\"Bridging\"] = 256] = \"Bridging\";\n /** Enables or Disables Bridge Obstacles with overlapping of connectors. */\n ConnectorConstraints[ConnectorConstraints[\"BridgeObstacle\"] = 512] = \"BridgeObstacle\";\n /** Enables bridging to the connector. */\n ConnectorConstraints[ConnectorConstraints[\"InheritBridging\"] = 1024] = \"InheritBridging\";\n /** Used to set the pointer events. */\n ConnectorConstraints[ConnectorConstraints[\"PointerEvents\"] = 2048] = \"PointerEvents\";\n /** Enables or disables tool tip for the connectors */\n ConnectorConstraints[ConnectorConstraints[\"Tooltip\"] = 4096] = \"Tooltip\";\n /** Enables or disables tool tip for the connectors */\n ConnectorConstraints[ConnectorConstraints[\"InheritTooltip\"] = 8192] = \"InheritTooltip\";\n /** Enables Interaction. */\n ConnectorConstraints[ConnectorConstraints[\"Interaction\"] = 4218] = \"Interaction\";\n /** Enables ReadOnly */\n ConnectorConstraints[ConnectorConstraints[\"ReadOnly\"] = 16384] = \"ReadOnly\";\n /** Enables all constraints. */\n ConnectorConstraints[ConnectorConstraints[\"Default\"] = 11838] = \"Default\";\n})(ConnectorConstraints || (ConnectorConstraints = {}));\n/**\n * Enables/Disables the annotation constraints\n * ReadOnly - Enables/Disables the ReadOnly Constraints\n * InheritReadOnly - Enables/Disables the InheritReadOnly Constraints\n * Default - Enables/Disables Default constraints\n * @aspNumberEnum\n * @IgnoreSingular\n */\nexport var AnnotationConstraints;\n(function (AnnotationConstraints) {\n /** Enables/Disables the ReadOnly Constraints */\n AnnotationConstraints[AnnotationConstraints[\"ReadOnly\"] = 2] = \"ReadOnly\";\n /** Enables/Disables the InheritReadOnly Constraints */\n AnnotationConstraints[AnnotationConstraints[\"InheritReadOnly\"] = 4] = \"InheritReadOnly\";\n})(AnnotationConstraints || (AnnotationConstraints = {}));\n/**\n * Enables/Disables certain features of node\n * None - Disable all node Constraints\n * Select - Enables node to be selected\n * Drag - Enables node to be Dragged\n * Rotate - Enables node to be Rotate\n * Shadow - Enables node to display shadow\n * PointerEvents - Enables node to provide pointer option\n * Delete - Enables node to delete\n * InConnect - Enables node to provide in connect option\n * OutConnect - Enables node to provide out connect option\n * Individual - Enables node to provide individual resize option\n * Expandable - Enables node to provide Expandable option\n * AllowDrop - Enables node to provide allow to drop option\n * Inherit - Enables node to inherit the interaction option\n * ResizeNorthEast - Enable ResizeNorthEast of the node\n * ResizeEast - Enable ResizeEast of the node\n * ResizeSouthEast - Enable ResizeSouthEast of the node\n * ResizeSouth - Enable ResizeSouthWest of the node\n * ResizeSouthWest - Enable ResizeSouthWest of the node\n * ResizeSouth - Enable ResizeSouth of the node\n * ResizeSouthWest - Enable ResizeSouthWest of the node\n * ResizeWest - Enable ResizeWest of the node\n * ResizeNorth - Enable ResizeNorth of the node\n * Resize - Enables the Aspect ratio fo the node\n * AspectRatio - Enables the Aspect ratio fo the node\n * Tooltip - Enables or disables tool tip for the Nodes\n * InheritTooltip - Enables or disables tool tip for the Nodes\n * ReadOnly - Enables the ReadOnly support for Annotation\n * Default - Enables all constraints\n * @aspNumberEnum\n * @IgnoreSingular\n */\nexport var NodeConstraints;\n(function (NodeConstraints) {\n /** Disable all node Constraints. */\n NodeConstraints[NodeConstraints[\"None\"] = 0] = \"None\";\n /** Enables node to be selected. */\n NodeConstraints[NodeConstraints[\"Select\"] = 2] = \"Select\";\n /** Enables node to be Dragged. */\n NodeConstraints[NodeConstraints[\"Drag\"] = 4] = \"Drag\";\n /** Enables node to be Rotate. */\n NodeConstraints[NodeConstraints[\"Rotate\"] = 8] = \"Rotate\";\n /** Enables node to display shadow. */\n NodeConstraints[NodeConstraints[\"Shadow\"] = 16] = \"Shadow\";\n /** Enables node to provide pointer option */\n NodeConstraints[NodeConstraints[\"PointerEvents\"] = 32] = \"PointerEvents\";\n /** Enables node to delete */\n NodeConstraints[NodeConstraints[\"Delete\"] = 64] = \"Delete\";\n /** Enables node to provide in connect option */\n NodeConstraints[NodeConstraints[\"InConnect\"] = 128] = \"InConnect\";\n /** Enables node to provide out connect option */\n NodeConstraints[NodeConstraints[\"OutConnect\"] = 256] = \"OutConnect\";\n /** Enables node to provide individual resize option */\n NodeConstraints[NodeConstraints[\"Individual\"] = 512] = \"Individual\";\n /** Enables node to provide Expandable option */\n NodeConstraints[NodeConstraints[\"Expandable\"] = 1024] = \"Expandable\";\n /** Enables node to provide allow to drop option */\n NodeConstraints[NodeConstraints[\"AllowDrop\"] = 2048] = \"AllowDrop\";\n /** Enables node to inherit the interaction option */\n NodeConstraints[NodeConstraints[\"Inherit\"] = 78] = \"Inherit\";\n /** Enable ResizeNorthEast of the node */\n NodeConstraints[NodeConstraints[\"ResizeNorthEast\"] = 4096] = \"ResizeNorthEast\";\n /** Enable ResizeEast of the node */\n NodeConstraints[NodeConstraints[\"ResizeEast\"] = 8192] = \"ResizeEast\";\n /** Enable ResizeSouthEast of the node */\n NodeConstraints[NodeConstraints[\"ResizeSouthEast\"] = 16384] = \"ResizeSouthEast\";\n /** Enable ResizeSouth of the node */\n NodeConstraints[NodeConstraints[\"ResizeSouth\"] = 32768] = \"ResizeSouth\";\n /** Enable ResizeSouthWest of the node */\n NodeConstraints[NodeConstraints[\"ResizeSouthWest\"] = 65536] = \"ResizeSouthWest\";\n /** Enable ResizeWest of the node */\n NodeConstraints[NodeConstraints[\"ResizeWest\"] = 131072] = \"ResizeWest\";\n /** Enable ResizeNorthWest of the node */\n NodeConstraints[NodeConstraints[\"ResizeNorthWest\"] = 262144] = \"ResizeNorthWest\";\n /** Enable ResizeNorth of the node */\n NodeConstraints[NodeConstraints[\"ResizeNorth\"] = 524288] = \"ResizeNorth\";\n /** Enable Resize of the node */\n NodeConstraints[NodeConstraints[\"Resize\"] = 1044480] = \"Resize\";\n /** Enables the Aspect ratio fo the node */\n NodeConstraints[NodeConstraints[\"AspectRatio\"] = 1048576] = \"AspectRatio\";\n /** Enables or disables tool tip for the Nodes */\n NodeConstraints[NodeConstraints[\"Tooltip\"] = 2097152] = \"Tooltip\";\n /** Enables or disables tool tip for the Nodes */\n NodeConstraints[NodeConstraints[\"InheritTooltip\"] = 4194304] = \"InheritTooltip\";\n /** Enables the ReadOnly support for Annotation */\n NodeConstraints[NodeConstraints[\"ReadOnly\"] = 8388608] = \"ReadOnly\";\n /** Enables all constraints */\n NodeConstraints[NodeConstraints[\"Default\"] = 5240814] = \"Default\";\n})(NodeConstraints || (NodeConstraints = {}));\n/** Enables/Disables the handles of the selector\n * Rotate - Enable Rotate Thumb\n * ConnectorSource - Enable Connector source point\n * ConnectorTarget - Enable Connector target point\n * ResizeNorthEast - Enable ResizeNorthEast Resize\n * ResizeEast - Enable ResizeEast Resize\n * ResizeSouthEast - Enable ResizeSouthEast Resize\n * ResizeSouth - Enable ResizeSouth Resize\n * ResizeSouthWest - Enable ResizeSouthWest Resize\n * ResizeWest - Enable ResizeWest Resize\n * ResizeNorthWest - Enable ResizeNorthWest Resize\n * ResizeNorth - Enable ResizeNorth Resize\n * Default - Enables all constraints\n * @private\n */\nexport var ThumbsConstraints;\n(function (ThumbsConstraints) {\n /** Enable Rotate Thumb */\n ThumbsConstraints[ThumbsConstraints[\"Rotate\"] = 2] = \"Rotate\";\n /** Enable Connector source point */\n ThumbsConstraints[ThumbsConstraints[\"ConnectorSource\"] = 4] = \"ConnectorSource\";\n /** Enable Connector target point */\n ThumbsConstraints[ThumbsConstraints[\"ConnectorTarget\"] = 8] = \"ConnectorTarget\";\n /** Enable ResizeNorthEast Resize */\n ThumbsConstraints[ThumbsConstraints[\"ResizeNorthEast\"] = 16] = \"ResizeNorthEast\";\n /** Enable ResizeEast Resize */\n ThumbsConstraints[ThumbsConstraints[\"ResizeEast\"] = 32] = \"ResizeEast\";\n /** Enable ResizeSouthEast Resize */\n ThumbsConstraints[ThumbsConstraints[\"ResizeSouthEast\"] = 64] = \"ResizeSouthEast\";\n /** Enable ResizeSouth Resize */\n ThumbsConstraints[ThumbsConstraints[\"ResizeSouth\"] = 128] = \"ResizeSouth\";\n /** Enable ResizeSouthWest Resize */\n ThumbsConstraints[ThumbsConstraints[\"ResizeSouthWest\"] = 256] = \"ResizeSouthWest\";\n /** Enable ResizeWest Resize */\n ThumbsConstraints[ThumbsConstraints[\"ResizeWest\"] = 512] = \"ResizeWest\";\n /** Enable ResizeNorthWest Resize */\n ThumbsConstraints[ThumbsConstraints[\"ResizeNorthWest\"] = 1024] = \"ResizeNorthWest\";\n /** Enable ResizeNorth Resize */\n ThumbsConstraints[ThumbsConstraints[\"ResizeNorth\"] = 2048] = \"ResizeNorth\";\n /** Enables all constraints */\n ThumbsConstraints[ThumbsConstraints[\"Default\"] = 4094] = \"Default\";\n})(ThumbsConstraints || (ThumbsConstraints = {}));\n/**\n * Enables/Disables certain features of diagram\n * None - Disable DiagramConstraints constraints\n * Bridging - Enables/Disable Bridging support for connector\n * UndoRedo - Enables/Disable the Undo/Redo support\n * Tooltip - Enables/Disable Tooltip support\n * UserInteraction - Enables/Disable UserInteraction support for the diagram\n * ApiUpdate - Enables/Disable ApiUpdate support for the diagram\n * PageEditable - Enables/Disable PageEditable support for the diagram\n * Zoom - Enables/Disable Zoom support for the diagram\n * PanX - Enables/Disable PanX support for the diagram\n * PanY - Enables/Disable PanY support for the diagram\n * Pan - Enables/Disable Pan support the diagram\n * Default - Enables/Disable all constraints\n * @aspNumberEnum\n * @IgnoreSingular\n */\nexport var DiagramConstraints;\n(function (DiagramConstraints) {\n /** Disable DiagramConstraints constraints */\n DiagramConstraints[DiagramConstraints[\"None\"] = 1] = \"None\";\n /** Enables/Disable Bridging support for connector */\n DiagramConstraints[DiagramConstraints[\"Bridging\"] = 2] = \"Bridging\";\n /** Enables/Disable the Undo/Redo support */\n DiagramConstraints[DiagramConstraints[\"UndoRedo\"] = 4] = \"UndoRedo\";\n /** Enables/Disable Tooltip support */\n DiagramConstraints[DiagramConstraints[\"Tooltip\"] = 8] = \"Tooltip\";\n /** Enables/Disable UserInteraction support for the diagram */\n DiagramConstraints[DiagramConstraints[\"UserInteraction\"] = 16] = \"UserInteraction\";\n /** Enables/Disable ApiUpdate support for the diagram */\n DiagramConstraints[DiagramConstraints[\"ApiUpdate\"] = 32] = \"ApiUpdate\";\n /** Enables/Disable PageEditable support for the diagram */\n DiagramConstraints[DiagramConstraints[\"PageEditable\"] = 48] = \"PageEditable\";\n /** Enables/Disable Zoom support for the diagram */\n DiagramConstraints[DiagramConstraints[\"Zoom\"] = 64] = \"Zoom\";\n /** Enables/Disable PanX support for the diagram */\n DiagramConstraints[DiagramConstraints[\"PanX\"] = 128] = \"PanX\";\n /** Enables/Disable PanY support for the diagram */\n DiagramConstraints[DiagramConstraints[\"PanY\"] = 256] = \"PanY\";\n /** Enables/Disable Pan support the diagram */\n DiagramConstraints[DiagramConstraints[\"Pan\"] = 384] = \"Pan\";\n /** Enables/Disable all constraints */\n DiagramConstraints[DiagramConstraints[\"Default\"] = 500] = \"Default\";\n})(DiagramConstraints || (DiagramConstraints = {}));\n/**\n * Activates the diagram tools\n * None - Enables/Disable single select support for the diagram\n * SingleSelect - Enables/Disable single select support for the diagram\n * MultipleSelect - Enables/Disable MultipleSelect select support for the diagram\n * ZoomPan - Enables/Disable ZoomPan support for the diagram\n * DrawOnce - Enables/Disable continuousDraw support for the diagram\n * continuousDraw - Enables/Disable continuousDraw support for the diagram\n * Default - Enables/Disable all constraints\n * @aspNumberEnum\n * @IgnoreSingular\n */\nexport var DiagramTools;\n(function (DiagramTools) {\n /** Disable all constraints */\n DiagramTools[DiagramTools[\"None\"] = 0] = \"None\";\n /** Enables/Disable single select support for the diagram */\n DiagramTools[DiagramTools[\"SingleSelect\"] = 1] = \"SingleSelect\";\n /** Enables/Disable MultipleSelect select support for the diagram */\n DiagramTools[DiagramTools[\"MultipleSelect\"] = 2] = \"MultipleSelect\";\n /** Enables/Disable ZoomPan support for the diagram */\n DiagramTools[DiagramTools[\"ZoomPan\"] = 4] = \"ZoomPan\";\n /** Enables/Disable DrawOnce support for the diagram */\n DiagramTools[DiagramTools[\"DrawOnce\"] = 8] = \"DrawOnce\";\n /** Enables/Disable continuousDraw support for the diagram */\n DiagramTools[DiagramTools[\"ContinuousDraw\"] = 16] = \"ContinuousDraw\";\n /** Enables/Disable all constraints */\n DiagramTools[DiagramTools[\"Default\"] = 3] = \"Default\";\n})(DiagramTools || (DiagramTools = {}));\n/**\n * Defines the container/canvas transform\n * Self - Sets the transform type as Self\n * Parent - Sets the transform type as Parent\n */\nexport var Transform;\n(function (Transform) {\n /** Self - Sets the transform type as Self */\n Transform[Transform[\"Self\"] = 1] = \"Self\";\n /** Parent - Sets the transform type as Parent */\n Transform[Transform[\"Parent\"] = 2] = \"Parent\";\n})(Transform || (Transform = {}));\n/**\n * Defines the rendering mode for diagram\n * Canvas - Sets the rendering mode type as Canvas\n * Svg - Sets the rendering mode type as Svg\n */\nexport var RenderMode;\n(function (RenderMode) {\n /** Canvas - Sets the rendering mode type as Canvas */\n RenderMode[RenderMode[\"Canvas\"] = 0] = \"Canvas\";\n /** Svg - Sets the rendering mode type as Svg */\n RenderMode[RenderMode[\"Svg\"] = 1] = \"Svg\";\n})(RenderMode || (RenderMode = {}));\n/**\n * Sets a combination of key modifiers, on recognition of which the command will be executed.They are\n * * None - no modifiers are pressed\n * * Control - ctrl key\n * * Meta - meta key im mac\n * * Alt - alt key\n * * Shift - shift key\n * @aspNumberEnum\n * @IgnoreSingular\n */\nexport var KeyModifiers;\n(function (KeyModifiers) {\n /** No modifiers are pressed */\n KeyModifiers[KeyModifiers[\"None\"] = 0] = \"None\";\n /** The CTRL key */\n KeyModifiers[KeyModifiers[\"Control\"] = 1] = \"Control\";\n /** The Meta key pressed in Mac */\n KeyModifiers[KeyModifiers[\"Meta\"] = 1] = \"Meta\";\n /** The ALT key */\n KeyModifiers[KeyModifiers[\"Alt\"] = 2] = \"Alt\";\n /** The Shift key */\n KeyModifiers[KeyModifiers[\"Shift\"] = 4] = \"Shift\";\n})(KeyModifiers || (KeyModifiers = {}));\n/**\n * Sets the key value, on recognition of which the command will be executed. They are\n * * none - no key\n * * Number0 = The 0 key\n * * Number1 = The 1 key\n * * Number2 = The 2 key\n * * Number3 = The 3 key\n * * Number4 = The 4 key\n * * Number5 = The 5 key\n * * Number6 = The 6 key\n * * Number7 = The 7 key\n * * Number8 = The 8 key\n * * Number9 = The 9 key\n * * Number0 = The 0 key\n * * BackSpace = The BackSpace key\n * * F1 = The f1 key\n * * F2 = The f2 key\n * * F3 = The f3 key\n * * F4 = The f4 key\n * * F5 = The f5 key\n * * F6 = The f6 key\n * * F7 = The f7 key\n * * F8 = The f8 key\n * * F9 = The f9 key\n * * F10 = The f10 key\n * * F11 = The f11 key\n * * F12 = The f12 key\n * * A = The a key\n * * B = The b key\n * * C = The c key\n * * D = The d key\n * * E = The e key\n * * F = The f key\n * * G = The g key\n * * H = The h key\n * * I = The i key\n * * J = The j key\n * * K = The k key\n * * L = The l key\n * * M = The m key\n * * N = The n key\n * * O = The o key\n * * P = The p key\n * * Q = The q key\n * * R = The r key\n * * S = The s key\n * * T = The t key\n * * U = The u key\n * * V = The v key\n * * W = The w key\n * * X = The x key\n * * Y = The y key\n * * Z = The z key\n * * Left = The left key\n * * Right = The right key\n * * Top = The top key\n * * Bottom = The bottom key\n * * Escape = The Escape key\n * * Tab = The tab key\n * * Delete = The delete key\n * * Enter = The enter key\n * * The Space key\n * * The page up key\n * * The page down key\n * * The end key\n * * The home key\n * * The Minus\n * * The Plus\n * * The Star\n * @aspNumberEnum\n * @IgnoreSingular\n */\nexport var Keys;\n(function (Keys) {\n /** No key pressed */\n Keys[Keys[\"None\"] = null] = \"None\";\n /** The 0 key */\n Keys[Keys[\"Number0\"] = 0] = \"Number0\";\n /** The 1 key */\n Keys[Keys[\"Number1\"] = 1] = \"Number1\";\n /** The 2 key */\n Keys[Keys[\"Number2\"] = 2] = \"Number2\";\n /** The 3 key */\n Keys[Keys[\"Number3\"] = 3] = \"Number3\";\n /** The 4 key */\n Keys[Keys[\"Number4\"] = 4] = \"Number4\";\n /** The 5 key */\n Keys[Keys[\"Number5\"] = 5] = \"Number5\";\n /** The 6 key */\n Keys[Keys[\"Number6\"] = 6] = \"Number6\";\n /** The 7 key */\n Keys[Keys[\"Number7\"] = 7] = \"Number7\";\n /** The 8 key */\n Keys[Keys[\"Number8\"] = 8] = \"Number8\";\n /** The 9 key */\n Keys[Keys[\"Number9\"] = 9] = \"Number9\";\n /** The A key */\n Keys[Keys[\"A\"] = 65] = \"A\";\n /** The B key */\n Keys[Keys[\"B\"] = 66] = \"B\";\n /** The C key */\n Keys[Keys[\"C\"] = 67] = \"C\";\n /** The D key */\n Keys[Keys[\"D\"] = 68] = \"D\";\n /** The E key */\n Keys[Keys[\"E\"] = 69] = \"E\";\n /** The F key */\n Keys[Keys[\"F\"] = 70] = \"F\";\n /** The G key */\n Keys[Keys[\"G\"] = 71] = \"G\";\n /** The H key */\n Keys[Keys[\"H\"] = 72] = \"H\";\n /** The I key */\n Keys[Keys[\"I\"] = 73] = \"I\";\n /** The J key */\n Keys[Keys[\"J\"] = 74] = \"J\";\n /** The K key */\n Keys[Keys[\"K\"] = 75] = \"K\";\n /** The L key */\n Keys[Keys[\"L\"] = 76] = \"L\";\n /** The M key */\n Keys[Keys[\"M\"] = 77] = \"M\";\n /** The N key */\n Keys[Keys[\"N\"] = 78] = \"N\";\n /** The O key */\n Keys[Keys[\"O\"] = 79] = \"O\";\n /** The P key */\n Keys[Keys[\"P\"] = 80] = \"P\";\n /** The Q key */\n Keys[Keys[\"Q\"] = 81] = \"Q\";\n /** The R key */\n Keys[Keys[\"R\"] = 82] = \"R\";\n /** The S key */\n Keys[Keys[\"S\"] = 83] = \"S\";\n /** The T key */\n Keys[Keys[\"T\"] = 84] = \"T\";\n /** The U key */\n Keys[Keys[\"U\"] = 85] = \"U\";\n /** The V key */\n Keys[Keys[\"V\"] = 86] = \"V\";\n /** The W key */\n Keys[Keys[\"W\"] = 87] = \"W\";\n /** The X key */\n Keys[Keys[\"X\"] = 88] = \"X\";\n /** The Y key */\n Keys[Keys[\"Y\"] = 89] = \"Y\";\n /** The Z key */\n Keys[Keys[\"Z\"] = 90] = \"Z\";\n /** The left arrow key */\n Keys[Keys[\"Left\"] = 37] = \"Left\";\n /** The up arrow key */\n Keys[Keys[\"Up\"] = 38] = \"Up\";\n /** The right arrow key */\n Keys[Keys[\"Right\"] = 39] = \"Right\";\n /** The down arrow key */\n Keys[Keys[\"Down\"] = 40] = \"Down\";\n /** The Escape key */\n Keys[Keys[\"Escape\"] = 27] = \"Escape\";\n /** The Space key */\n Keys[Keys[\"Space\"] = 32] = \"Space\";\n /** The page up key */\n Keys[Keys[\"PageUp\"] = 33] = \"PageUp\";\n /** The Space key */\n Keys[Keys[\"PageDown\"] = 34] = \"PageDown\";\n /** The Space key */\n Keys[Keys[\"End\"] = 35] = \"End\";\n /** The Space key */\n Keys[Keys[\"Home\"] = 36] = \"Home\";\n /** The delete key */\n Keys[Keys[\"Delete\"] = 46] = \"Delete\";\n /** The tab key */\n Keys[Keys[\"Tab\"] = 9] = \"Tab\";\n /** The enter key */\n Keys[Keys[\"Enter\"] = 13] = \"Enter\";\n /** The BackSpace key */\n Keys[Keys[\"BackSpace\"] = 8] = \"BackSpace\";\n /** The F1 key */\n Keys[Keys[\"F1\"] = 112] = \"F1\";\n /** The F2 key */\n Keys[Keys[\"F2\"] = 113] = \"F2\";\n /** The F3 key */\n Keys[Keys[\"F3\"] = 114] = \"F3\";\n /** The F4 key */\n Keys[Keys[\"F4\"] = 115] = \"F4\";\n /** The F5 key */\n Keys[Keys[\"F5\"] = 116] = \"F5\";\n /** The F6 key */\n Keys[Keys[\"F6\"] = 117] = \"F6\";\n /** The F7 key */\n Keys[Keys[\"F7\"] = 118] = \"F7\";\n /** The F8 key */\n Keys[Keys[\"F8\"] = 119] = \"F8\";\n /** The F9 key */\n Keys[Keys[\"F9\"] = 120] = \"F9\";\n /** The F10 key */\n Keys[Keys[\"F10\"] = 121] = \"F10\";\n /** The F111 key */\n Keys[Keys[\"F11\"] = 122] = \"F11\";\n /** The F12 key */\n Keys[Keys[\"F12\"] = 123] = \"F12\";\n /** The Star */\n Keys[Keys[\"Star\"] = 56] = \"Star\";\n /** The Plus */\n Keys[Keys[\"Plus\"] = 187] = \"Plus\";\n /** The Minus */\n Keys[Keys[\"Minus\"] = 189] = \"Minus\";\n})(Keys || (Keys = {}));\n/**\n * Enables/Disables certain actions of diagram\n * @private\n */\nexport var DiagramAction;\n(function (DiagramAction) {\n DiagramAction[DiagramAction[\"Render\"] = 2] = \"Render\";\n DiagramAction[DiagramAction[\"PublicMethod\"] = 4] = \"PublicMethod\";\n DiagramAction[DiagramAction[\"ToolAction\"] = 8] = \"ToolAction\";\n DiagramAction[DiagramAction[\"UndoRedo\"] = 16] = \"UndoRedo\";\n DiagramAction[DiagramAction[\"TextEdit\"] = 32] = \"TextEdit\";\n DiagramAction[DiagramAction[\"Group\"] = 64] = \"Group\";\n DiagramAction[DiagramAction[\"Clear\"] = 128] = \"Clear\";\n})(DiagramAction || (DiagramAction = {}));\n/** @private */\nexport var NoOfSegments;\n(function (NoOfSegments) {\n NoOfSegments[NoOfSegments[\"Zero\"] = 0] = \"Zero\";\n NoOfSegments[NoOfSegments[\"One\"] = 1] = \"One\";\n NoOfSegments[NoOfSegments[\"Two\"] = 2] = \"Two\";\n NoOfSegments[NoOfSegments[\"Three\"] = 3] = \"Three\";\n NoOfSegments[NoOfSegments[\"Four\"] = 4] = \"Four\";\n NoOfSegments[NoOfSegments[\"Five\"] = 5] = \"Five\";\n})(NoOfSegments || (NoOfSegments = {}));\n/**\n * events of diagram\n * @private\n */\nexport var DiagramEvent;\n(function (DiagramEvent) {\n DiagramEvent[DiagramEvent[\"collectionChange\"] = 0] = \"collectionChange\";\n DiagramEvent[DiagramEvent[\"rotateChange\"] = 1] = \"rotateChange\";\n DiagramEvent[DiagramEvent[\"positionChange\"] = 2] = \"positionChange\";\n DiagramEvent[DiagramEvent[\"propertyChange\"] = 3] = \"propertyChange\";\n DiagramEvent[DiagramEvent[\"selectionChange\"] = 4] = \"selectionChange\";\n DiagramEvent[DiagramEvent[\"sizeChange\"] = 5] = \"sizeChange\";\n DiagramEvent[DiagramEvent[\"drop\"] = 6] = \"drop\";\n DiagramEvent[DiagramEvent[\"sourcePointChange\"] = 7] = \"sourcePointChange\";\n DiagramEvent[DiagramEvent[\"targetPointChange\"] = 8] = \"targetPointChange\";\n DiagramEvent[DiagramEvent[\"connectionChange\"] = 9] = \"connectionChange\";\n DiagramEvent[DiagramEvent[\"animationComplete\"] = 10] = \"animationComplete\";\n DiagramEvent[DiagramEvent[\"click\"] = 11] = \"click\";\n DiagramEvent[DiagramEvent[\"doubleClick\"] = 12] = \"doubleClick\";\n DiagramEvent[DiagramEvent[\"scrollChange\"] = 13] = \"scrollChange\";\n DiagramEvent[DiagramEvent[\"dragEnter\"] = 14] = \"dragEnter\";\n DiagramEvent[DiagramEvent[\"dragLeave\"] = 15] = \"dragLeave\";\n DiagramEvent[DiagramEvent[\"dragOver\"] = 16] = \"dragOver\";\n DiagramEvent[DiagramEvent[\"textEdit\"] = 17] = \"textEdit\";\n DiagramEvent[DiagramEvent[\"paletteSelectionChange\"] = 18] = \"paletteSelectionChange\";\n DiagramEvent[DiagramEvent[\"historyChange\"] = 19] = \"historyChange\";\n})(DiagramEvent || (DiagramEvent = {}));\n/** Enables/Disables certain features of port connection\n * @aspNumberEnum\n * @IgnoreSingular\n */\nexport var PortConstraints;\n(function (PortConstraints) {\n /** Disable all constraints */\n PortConstraints[PortConstraints[\"None\"] = 1] = \"None\";\n /** Enables connections with connector */\n PortConstraints[PortConstraints[\"Drag\"] = 2] = \"Drag\";\n /** Enables to create the connection when mouse hover on the port */\n PortConstraints[PortConstraints[\"Draw\"] = 4] = \"Draw\";\n})(PortConstraints || (PortConstraints = {}));\n/**\n * Defines the context menu click\n * contextMenuClick - Sets the context menu click as contextMenuClick\n */\nexport var contextMenuClick = \n/** contextMenuClick - Sets the context menu click as contextMenuClick */\n'contextMenuClick';\n/**\n * Defines the context menu open\n * contextMenuOpen - Sets the context menu open as contextMenuOpen\n */\nexport var contextMenuOpen = \n/** contextMenuOpen - Sets the context menu open as contextMenuOpen */\n'contextMenuOpen';\n","import { Size } from './../primitives/size';\nimport { Point } from './../primitives/point';\nimport { processPathData, pathSegmentCollection, getRectanglePath } from './../utility/path-util';\nimport { overFlow } from './../utility/base-util';\n/**\n * Canvas Renderer\n */\n/** @private */\nvar CanvasRenderer = /** @class */ (function () {\n function CanvasRenderer() {\n }\n CanvasRenderer.getContext = function (canvas) {\n return canvas.getContext('2d');\n };\n CanvasRenderer.setCanvasSize = function (canvas, width, height) {\n if (canvas) {\n canvas.setAttribute('width', width.toString());\n canvas.setAttribute('height', height.toString());\n }\n };\n ;\n CanvasRenderer.prototype.renderGradient = function (options, ctx, x, y) {\n var max;\n var min;\n var grd;\n if (options.gradient.type !== 'None') {\n for (var i = 0; i < options.gradient.stops.length; i++) {\n max = max !== undefined ? options.gradient.stops[i].offset : Math.max(max, options.gradient.stops[i].offset);\n min = min !== undefined ? options.gradient.stops[i].offset : Math.min(min, options.gradient.stops[i].offset);\n }\n if (options.gradient.type === 'Linear') {\n var linear = options.gradient;\n grd = ctx.createLinearGradient(x + linear.x1, y + linear.y1, x + linear.x2, y + linear.y2);\n }\n else {\n var radial = options.gradient;\n grd = ctx.createRadialGradient(x + radial.fx, y + radial.fy, 0, x + radial.cx, y + radial.cy, radial.r);\n }\n for (var i = 0; i < options.gradient.stops.length; i++) {\n var stop_1 = options.gradient.stops[i];\n var offset = min < 0 ? (max + stop_1.offset) / (2 * max) : stop_1.offset / max;\n grd.addColorStop(offset, stop_1.color);\n }\n ctx.fillStyle = grd;\n }\n return ctx;\n };\n CanvasRenderer.prototype.renderShadow = function (options, canvas, collection) {\n if (collection === void 0) { collection = null; }\n var ctx = CanvasRenderer.getContext(canvas);\n ctx.save();\n ctx.beginPath();\n ctx.strokeStyle = ctx.fillStyle = options.shadow.color;\n ctx.globalAlpha = options.shadow.opacity;\n var ptModel = { x: 0, y: 0 };\n var point = Point.transform(ptModel, options.shadow.angle, options.shadow.distance);\n var transX = options.x + point.x;\n var transY = options.y + point.y;\n var pivotX = transX + options.width * options.pivotX;\n var pivotY = transY + options.height * options.pivotY;\n this.rotateContext(canvas, options.angle, pivotX, pivotY);\n if (collection) {\n ctx.translate(transX, transY);\n this.renderPath(canvas, options, collection);\n ctx.translate(-transX, -transY);\n }\n else {\n ctx.rect(transX, transY, options.width, options.height);\n ctx.fillRect(transX, transY, options.width, options.height);\n }\n ctx.fill();\n ctx.stroke();\n ctx.closePath();\n ctx.restore();\n };\n CanvasRenderer.createCanvas = function (id, width, height) {\n var canvasObj = document.createElement('canvas');\n canvasObj.setAttribute('id', id);\n this.setCanvasSize(canvasObj, width, height);\n return canvasObj;\n };\n ;\n CanvasRenderer.prototype.setStyle = function (canvas, style) {\n var ctx = CanvasRenderer.getContext(canvas);\n if (style.fill === 'none') {\n style.fill = 'transparent';\n }\n if (style.stroke === 'none') {\n style.stroke = 'transparent';\n }\n ctx.strokeStyle = style.stroke;\n ctx.lineWidth = style.strokeWidth;\n if (style.strokeWidth === 0) {\n ctx.strokeStyle = 'transparent';\n }\n ctx.globalAlpha = style.opacity;\n var dashArray = [];\n if (style.dashArray) {\n dashArray = this.parseDashArray(style.dashArray);\n }\n ctx.setLineDash(dashArray);\n if (style.gradient && style.gradient.type !== 'None') {\n this.renderGradient(style, ctx, 0, 0);\n }\n else {\n ctx.fillStyle = style.fill;\n }\n };\n CanvasRenderer.prototype.rotateContext = function (canvas, angle, x, y) {\n var ctx = CanvasRenderer.getContext(canvas);\n ctx.translate(x, y);\n ctx.rotate(angle * Math.PI / 180);\n ctx.translate(-x, -y);\n };\n CanvasRenderer.prototype.setFontStyle = function (canvas, text) {\n var ctx = CanvasRenderer.getContext(canvas);\n var font = '';\n if (text.italic) {\n font += 'italic ';\n }\n if (text.bold) {\n font += 'bold ';\n }\n font += (text.fontSize) + 'px ';\n font += text.fontFamily;\n ctx.font = font;\n };\n CanvasRenderer.prototype.parseDashArray = function (dashArray) {\n var dashes = [];\n var separator = dashArray.indexOf(' ') !== -1 ? ' ' : ',';\n var splittedDashes = dashArray.split(separator);\n for (var _i = 0, splittedDashes_1 = splittedDashes; _i < splittedDashes_1.length; _i++) {\n var i = splittedDashes_1[_i];\n dashes.push(Number(i));\n }\n return dashes;\n };\n //Rendering Part\n CanvasRenderer.prototype.drawRectangle = function (canvas, options) {\n if (options.visible === true) {\n if (options.cornerRadius) {\n options.data = getRectanglePath(options.cornerRadius, options.height, options.width);\n this.drawPath(canvas, options);\n }\n else {\n var ctx = CanvasRenderer.getContext(canvas);\n if (options.shadow) {\n this.renderShadow(options, canvas);\n }\n ctx.save();\n ctx.beginPath();\n var cornerRadius = options.cornerRadius;\n var pivotX = options.x + options.width * options.pivotX;\n var pivotY = options.y + options.height * options.pivotY;\n this.rotateContext(canvas, options.angle, pivotX, pivotY);\n this.setStyle(canvas, options);\n ctx.rect(options.x, options.y, options.width, options.height);\n ctx.fillRect(options.x, options.y, options.width, options.height);\n ctx.fill();\n ctx.stroke();\n ctx.closePath();\n ctx.restore();\n }\n }\n };\n // public updateSelectionRegion(canvas: HTMLCanvasElement, options: RectAttributes): void {\n // this.drawRectangle(canvas, options);\n // }\n // public drawLine(canvas: HTMLCanvasElement, options: LineAttributes): void {\n // let ctx: CanvasRenderingContext2D = CanvasRenderer.getContext(canvas);\n // ctx.save();\n // ctx.beginPath();\n // let pivotX: number = options.x + options.width * options.pivotX;\n // let pivotY: number = options.y + options.height * options.pivotY;\n // this.rotateContext(canvas, options.angle, pivotX, pivotY);\n // this.setStyle(canvas, options as StyleAttributes);\n // ctx.translate(options.x, options.y);\n // ctx.moveTo(options.startPoint.x, options.startPoint.y);\n // ctx.lineTo(options.endPoint.x, options.endPoint.y);\n // ctx.translate(-options.x, -options.y);\n // ctx.stroke();\n // ctx.closePath();\n // ctx.restore();\n // }\n // public drawCircle(canvas: HTMLCanvasElement, options: CircleAttributes): void {\n // let ctx: CanvasRenderingContext2D = CanvasRenderer.getContext(canvas);\n // ctx.save();\n // ctx.beginPath();\n // let pivotY: number = options.y + options.height * options.pivotY;\n // let pivotX: number = options.x + options.width * options.pivotX;\n // this.setStyle(canvas, options as StyleAttributes);\n // this.rotateContext(canvas, options.angle, pivotX, pivotY);\n // ctx.arc(options.centerX, options.centerY, options.radius, 0, 2 * Math.PI);\n // ctx.fill();\n // ctx.stroke();\n // ctx.closePath();\n // ctx.restore();\n // }\n CanvasRenderer.prototype.drawPath = function (canvas, options) {\n var collection = [];\n collection = processPathData(options.data);\n collection = pathSegmentCollection(collection);\n if (options.shadow) {\n this.renderShadow(options, canvas, collection);\n }\n var ctx = CanvasRenderer.getContext(canvas);\n ctx.save();\n ctx.beginPath();\n var pivotY = options.y + options.height * options.pivotY;\n var pivotX = options.x + options.width * options.pivotX;\n this.rotateContext(canvas, options.angle, pivotX, pivotY);\n this.setStyle(canvas, options);\n ctx.translate(options.x, options.y);\n this.renderPath(canvas, options, collection);\n ctx.fill();\n ctx.translate(-options.x, -options.y);\n ctx.stroke();\n ctx.restore();\n };\n CanvasRenderer.prototype.renderPath = function (canvas, options, collection) {\n if (options.visible === true) {\n var ctx = CanvasRenderer.getContext(canvas);\n var x0 = void 0;\n var y0 = void 0;\n var x1 = void 0;\n var y1 = void 0;\n var x2 = void 0;\n var y2 = void 0;\n var x = void 0;\n var y = void 0;\n var length_1;\n var i = void 0;\n var newSeg = void 0;\n var segs = collection;\n for (x = 0, y = 0, i = 0, length_1 = segs.length; i < length_1; ++i) {\n var obj = segs[i];\n var seg = obj;\n var char = seg.command;\n if ('x1' in seg) {\n x1 = seg.x1;\n }\n if ('x2' in seg) {\n x2 = seg.x2;\n }\n if ('y1' in seg) {\n y1 = seg.y1;\n }\n if ('y2' in seg) {\n y2 = seg.y2;\n }\n if ('x' in seg) {\n x = seg.x;\n }\n if ('y' in seg) {\n y = seg.y;\n }\n switch (char) {\n case 'M':\n ctx.moveTo(x, y);\n seg.x = x;\n seg.y = y;\n break;\n case 'L':\n ctx.lineTo(x, y);\n seg.x = x;\n seg.y = y;\n break;\n case 'C':\n ctx.bezierCurveTo(x1, y1, x2, y2, x, y);\n seg.x = x;\n seg.y = y;\n seg.x1 = x1;\n seg.y1 = y1;\n seg.x2 = x2;\n seg.y2 = y2;\n break;\n case 'Q':\n ctx.quadraticCurveTo(x1, y1, x, y);\n seg.x = x;\n seg.y = y;\n seg.x1 = x1;\n seg.y1 = y1;\n break;\n case 'A':\n var curr = { x: x0, y: y0 };\n var rx = seg.r1;\n var ry = seg.r2;\n var xAxisRotation = seg.angle * (Math.PI / 180.0);\n var largeArc = seg.largeArc;\n var sweep = seg.sweep;\n var cp = { x: x, y: y };\n var currp = {\n x: Math.cos(xAxisRotation) * (curr.x - cp.x) / 2.0 + Math.sin(xAxisRotation) * (curr.y - cp.y) / 2.0,\n y: -Math.sin(xAxisRotation) * (curr.x - cp.x) / 2.0 + Math.cos(xAxisRotation) * (curr.y - cp.y) / 2.0\n };\n var l = Math.pow(currp.x, 2) / Math.pow(rx, 2) + Math.pow(currp.y, 2) / Math.pow(ry, 2);\n if (l > 1) {\n rx *= Math.sqrt(l);\n ry *= Math.sqrt(l);\n }\n var k = (Math.pow(ry, 2) * Math.pow(currp.x, 2));\n var s = (largeArc === sweep ? -1 : 1) * Math.sqrt(((Math.pow(rx, 2) * Math.pow(ry, 2)) - (Math.pow(rx, 2) * Math.pow(currp.y, 2)) - k) /\n (Math.pow(rx, 2) * Math.pow(currp.y, 2) + Math.pow(ry, 2) * Math.pow(currp.x, 2)));\n if (isNaN(s)) {\n s = 0;\n }\n var cpp = { x: s * rx * currp.y / ry, y: s * -ry * currp.x / rx };\n var centp = {\n x: (curr.x + cp.x) / 2.0 + Math.cos(xAxisRotation) * cpp.x - Math.sin(xAxisRotation) * cpp.y,\n y: (curr.y + cp.y) / 2.0 + Math.sin(xAxisRotation) * cpp.x + Math.cos(xAxisRotation) * cpp.y\n };\n var a1 = this.a([1, 0], [(currp.x - cpp.x) / rx, (currp.y - cpp.y) / ry]);\n var u = [(currp.x - cpp.x) / rx, (currp.y - cpp.y) / ry];\n var v = [(-currp.x - cpp.x) / rx, (-currp.y - cpp.y) / ry];\n var ad = this.a(u, v);\n if (this.r(u, v) <= -1) {\n ad = Math.PI;\n }\n if (this.r(u, v) >= 1) {\n ad = 0;\n }\n var dir = !sweep ? -1.0 : 1.0;\n var ah = a1 + dir * (ad / 2.0);\n var halfWay = {\n x: centp.x + rx * Math.cos(ah),\n y: centp.y + ry * Math.sin(ah)\n };\n seg.centp = centp;\n seg.xAxisRotation = xAxisRotation;\n seg.rx = rx;\n seg.ry = ry;\n seg.a1 = a1;\n seg.ad = ad;\n seg.sweep = sweep;\n if (ctx != null) {\n var ra = rx > ry ? rx : ry;\n var sx = rx > ry ? 1 : rx / ry;\n var sy = rx > ry ? ry / rx : 1;\n ctx.save();\n ctx.translate(centp.x, centp.y);\n ctx.rotate(xAxisRotation);\n ctx.scale(sx, sy);\n ctx.arc(0, 0, ra, a1, a1 + ad, !sweep);\n ctx.scale(1 / sx, 1 / sy);\n ctx.rotate(-xAxisRotation);\n ctx.translate(-centp.x, -centp.y);\n ctx.restore();\n }\n break;\n case 'Z':\n case 'z':\n ctx.closePath();\n x = x0;\n y = y0;\n break;\n }\n x0 = x;\n y0 = y;\n }\n }\n };\n CanvasRenderer.prototype.drawText = function (canvas, options) {\n if (options.content && options.visible === true) {\n var ctx = CanvasRenderer.getContext(canvas);\n ctx.save();\n this.setStyle(canvas, options);\n var pivotX = options.x + options.width * options.pivotX;\n var pivotY = options.y + options.height * options.pivotY;\n this.rotateContext(canvas, options.angle, pivotX, pivotY);\n this.setFontStyle(canvas, options);\n var i = 0;\n var childNodes = [];\n childNodes = options.childNodes;\n var wrapBounds = options.wrapBounds;\n ctx.fillStyle = options.color;\n if (wrapBounds) {\n var position = this.labelAlign(options, wrapBounds, childNodes);\n for (i = 0; i < childNodes.length; i++) {\n var child = childNodes[i];\n var offsetX = position.x + child.x - wrapBounds.x;\n var offsetY = position.y + child.dy * i + ((options.fontSize) * 0.8);\n if (wrapBounds.width > options.width && options.textOverflow !== 'Wrap') {\n child.text = overFlow(child.text, options);\n }\n ctx.fillText(child.text, offsetX, offsetY);\n if (options.textDecoration === 'Underline'\n || options.textDecoration === 'Overline'\n || options.textDecoration === 'LineThrough') {\n var startPointX = offsetX;\n var startPointY = void 0;\n var textlength = ctx.measureText(child.text).width;\n var endPointX = offsetX + textlength;\n var endPointY = void 0;\n switch (options.textDecoration) {\n case 'Underline':\n startPointY = offsetY + 2;\n endPointY = offsetY + 2;\n break;\n case 'Overline':\n startPointY = (position.y + child.dy * i);\n endPointY = (position.y + child.dy * i);\n break;\n case 'LineThrough':\n startPointY = ((offsetY + position.y + child.dy * i) / 2) + 2;\n endPointY = ((offsetY + position.y + child.dy * i) / 2) + 2;\n }\n ctx.beginPath();\n ctx.moveTo(startPointX, startPointY);\n ctx.lineTo(endPointX, endPointY);\n ctx.strokeStyle = options.color;\n ctx.lineWidth = options.fontSize * .08;\n ctx.globalAlpha = options.opacity;\n ctx.stroke();\n }\n }\n }\n ctx.restore();\n }\n };\n CanvasRenderer.prototype.drawImage = function (canvas, obj) {\n if (obj.visible) {\n var ctx = CanvasRenderer.getContext(canvas);\n ctx.save();\n var pivotX = obj.x + obj.width * obj.pivotX;\n var pivotY = obj.y + obj.height * obj.pivotY;\n var imageObj = new Image();\n imageObj.src = obj.source;\n /**\n * Since Clipping portion for node with slice option is not calculated properly\n * if (obj.sourceX !== undefined && obj.sourceY !== undefined && obj.sourceWidth !== undefined\n * && obj.sourceHeight !== undefined) {\n * ctx.drawImage(imageObj, obj.sourceX, obj.sourceY, obj.sourceWidth, obj.sourceHeight, obj.x, obj.y, obj.width, obj.height);\n * } else {\n * ctx.drawImage(imageObj, obj.x, obj.y, obj.width, obj.height);\n * }\n */\n // imageObj.onload = () => {\n ctx.translate(pivotX, pivotY);\n ctx.rotate(obj.angle * Math.PI / 180);\n var image = new Image();\n image.src = obj.source;\n this.image(ctx, image, -obj.width / 2, -obj.height / 2, obj.width, obj.height, obj);\n ctx.rotate(-(obj.angle * Math.PI / 180));\n ctx.translate(-pivotX, -pivotY);\n // };\n ctx.restore();\n }\n };\n CanvasRenderer.prototype.image = function (ctx, image, x, y, width, height, alignOptions) {\n ctx.beginPath();\n var srcWidth = image.width;\n var srcHeight = image.height;\n var destinationW = width;\n var destinationH = height;\n var resultWidth = 0;\n var resultHeight = 0;\n if (alignOptions && alignOptions.alignment !== 'None') {\n var xalign = alignOptions.alignment.toLowerCase().substr(1, 3);\n var yalign = alignOptions.alignment.toLowerCase().substr(5, 3);\n if (alignOptions.scale === 'Slice') {\n var a = function () {\n resultWidth = destinationW;\n resultHeight = srcHeight * destinationW / srcWidth;\n };\n var b = function () {\n resultWidth = srcWidth * destinationH / srcHeight;\n resultHeight = destinationH;\n };\n if (destinationW > destinationH) {\n a();\n if (destinationH > resultHeight) {\n b();\n }\n }\n else if (destinationW === destinationH) {\n if (srcWidth > srcHeight) {\n b();\n }\n else {\n a();\n }\n }\n else {\n b();\n if (destinationW > resultWidth) {\n a();\n }\n }\n var x1 = this.getSliceOffset(xalign, resultWidth, destinationW, srcWidth);\n var y1 = this.getSliceOffset(yalign, resultHeight, destinationH, srcHeight);\n var sWidth = srcWidth - x1;\n var sHeight = srcHeight - y1;\n var dWidth = resultWidth - (x1 * (resultWidth / srcWidth));\n var dHeight = resultHeight - (y1 * (resultHeight / srcHeight));\n var canvas1 = document.createElement('canvas');\n canvas1.setAttribute('width', width.toString());\n canvas1.setAttribute('height', height.toString());\n var ctx1 = canvas1.getContext('2d');\n ctx1.drawImage(image, x1, y1, sWidth, sHeight, 0, 0, dWidth, dHeight);\n ctx.drawImage(canvas1, x, y, width, height);\n }\n else if (alignOptions.scale === 'Meet') {\n var srcRatio = (srcHeight / srcWidth);\n var destRatio = (destinationH / destinationW);\n resultWidth = destRatio > srcRatio ? destinationW : destinationH / srcRatio;\n resultHeight = destRatio > srcRatio ? destinationW * srcRatio : destinationH;\n x += this.getMeetOffset(xalign, resultWidth, destinationW);\n y += this.getMeetOffset(yalign, resultHeight, destinationH);\n ctx.drawImage(image, 0, 0, srcWidth, srcHeight, x, y, resultWidth, resultHeight);\n }\n else {\n ctx.drawImage(image, x, y, width, height);\n }\n }\n else {\n ctx.drawImage(image, x, y, width, height);\n }\n ctx.closePath();\n };\n CanvasRenderer.prototype.getSliceOffset = function (arg, res, dest, src) {\n switch (arg) {\n case 'min': return 0;\n case 'mid': return (res - dest) / 2 * src / res;\n case 'max': return (res - dest) * src / res;\n default: return 0;\n }\n };\n CanvasRenderer.prototype.getMeetOffset = function (arg, res, dest) {\n var max = Math.max(res, dest);\n var min = Math.min(res, dest);\n switch (arg) {\n case 'min': return 0;\n case 'mid': return (max - min) / 2;\n case 'max': return max - min;\n default: return 0;\n }\n };\n //end region\n // vector magnitude\n CanvasRenderer.prototype.m = function (v) { return Math.sqrt(Math.pow(v[0], 2) + Math.pow(v[1], 2)); };\n // ratio between two vectors\n CanvasRenderer.prototype.r = function (u, v) { return (u[0] * v[0] + u[1] * v[1]) / (this.m(u) * this.m(v)); };\n // angle between two vectors\n CanvasRenderer.prototype.a = function (u, v) { return (u[0] * v[1] < u[1] * v[0] ? -1 : 1) * Math.acos(this.r(u, v)); };\n // text utility\n CanvasRenderer.prototype.labelAlign = function (text, wrapBounds, childNodes) {\n var bounds = new Size(wrapBounds.width, childNodes.length * (text.fontSize));\n var position = { x: 0, y: 0 };\n var labelX = text.x;\n var labelY = text.y;\n var offsetx = text.width * 0.5;\n var offsety = text.height * 0.5;\n var pointx = offsetx;\n var pointy = offsety;\n if (text.textAlign === 'left') {\n pointx = 0;\n }\n else if (text.textAlign === 'center') {\n if (wrapBounds.width > text.width && (text.textOverflow === 'Ellipsis' || text.textOverflow === 'Clip')) {\n pointx = 0;\n }\n else {\n pointx = text.width * 0.5;\n }\n }\n else if (text.textAlign === 'right') {\n pointx = (text.width * 1);\n }\n position.x = labelX + pointx + (wrapBounds ? wrapBounds.x : 0);\n position.y = labelY + pointy - bounds.height / 2;\n return position;\n };\n return CanvasRenderer;\n}());\nexport { CanvasRenderer };\n","import { Point } from './../primitives/point';\nimport { Size } from './../primitives/size';\nimport { pathSegmentCollection, processPathData } from './../utility/path-util';\nimport { setAttributeSvg } from './../utility/dom-util';\nimport { overFlow, wordBreakToString } from './../utility/base-util';\nimport { CanvasRenderer } from './../rendering/canvas-renderer';\nimport { createSvgElement, createHtmlElement, getBackgroundLayerSvg } from '../utility/dom-util';\n/**\n * SVG Renderer\n */\n/** @private */\nvar SvgRenderer = /** @class */ (function () {\n function SvgRenderer() {\n }\n SvgRenderer.prototype.renderShadow = function (options, canvas, collection, parentSvg) {\n if (collection === void 0) { collection = null; }\n var pointModel = { x: 0, y: 0 };\n var point = Point.transform(pointModel, options.shadow.angle, options.shadow.distance);\n var tX = options.x + point.x;\n var tY = options.y + point.y;\n var pivotX = tX + options.width * options.pivotX;\n var pivotY = tY + options.height * options.pivotY;\n var type;\n var shadowElement;\n if (parentSvg) {\n shadowElement = parentSvg.getElementById(canvas.id + '_shadow');\n }\n if (!shadowElement) {\n type = collection ? 'path' : 'rect';\n shadowElement = document.createElementNS('http://www.w3.org/2000/svg', type);\n canvas.appendChild(shadowElement);\n }\n var attr = {\n 'id': canvas.id + '_shadow', 'fill': options.shadow.color, 'stroke': options.shadow.color,\n 'opacity': options.shadow.opacity.toString(),\n 'transform': 'rotate(' + options.angle + ',' + (options.x + options.width * options.pivotX) + ','\n + (options.y + options.height * options.pivotY) + ')' +\n 'translate(' + (options.x + point.x) + ',' + (options.y + point.y) + ')'\n };\n if (parentSvg) {\n var svgContainer = parentSvg.getElementById(canvas.id);\n if (svgContainer) {\n svgContainer.insertBefore(shadowElement, svgContainer.firstChild);\n }\n }\n setAttributeSvg(shadowElement, attr);\n if (!collection) {\n setAttributeSvg(shadowElement, { 'width': options.width, 'height': options.height });\n }\n else if (collection) {\n this.renderPath(shadowElement, options, collection);\n }\n };\n SvgRenderer.prototype.parseDashArray = function (dashArray) {\n var dashes = [];\n return dashes;\n };\n SvgRenderer.prototype.drawRectangle = function (svg, options, diagramId, onlyRect, isSelector, parentSvg, ariaLabel) {\n if (options.shadow && !onlyRect) {\n this.renderShadow(options, svg, undefined, parentSvg);\n }\n var id;\n if (options.id === svg.id) {\n id = options.id + '_container';\n }\n else {\n id = options.id;\n }\n var rect;\n if (parentSvg) {\n rect = parentSvg.getElementById(id);\n }\n if (!rect || isSelector) {\n rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');\n svg.appendChild(rect);\n }\n var shadowElement;\n if (parentSvg && !options.shadow) {\n shadowElement = parentSvg.getElementById(options.id + '_groupElement_shadow');\n if (shadowElement) {\n shadowElement.parentNode.removeChild(shadowElement);\n }\n }\n var attr = {\n 'id': id, 'x': options.x.toString(), 'y': options.y.toString(), 'width': options.width.toString(),\n 'height': options.height.toString(), 'visibility': options.visible ? 'visible' : 'hidden',\n 'transform': 'rotate(' + options.angle + ','\n + (options.x + options.width * options.pivotX) + ',' + (options.y + options.height * options.pivotY) + ')',\n 'rx': options.cornerRadius || 0, 'ry': options.cornerRadius || 0, 'opacity': options.opacity,\n 'aria-label': ariaLabel ? ariaLabel : ''\n };\n if (options.class) {\n attr['class'] = options.class;\n }\n var poiterEvents = 'pointer-events';\n if (!ariaLabel) {\n attr[poiterEvents] = 'none';\n }\n setAttributeSvg(rect, attr);\n this.setSvgStyle(rect, options, diagramId);\n };\n SvgRenderer.prototype.updateSelectionRegion = function (gElement, options) {\n var rect;\n rect = gElement.parentNode.getElementById(options.id);\n var attr;\n attr = {\n 'id': options.id, 'x': options.x.toString(), 'y': options.y.toString(), 'width': options.width.toString(),\n 'height': options.height.toString(), 'transform': 'rotate(' + options.angle + ','\n + (options.x + options.width * options.pivotX) + ',' + (options.y + options.height * options.pivotY) + ')',\n class: 'e-diagram-selected-region'\n };\n if (!rect) {\n rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');\n gElement.appendChild(rect);\n }\n this.setSvgStyle(rect, options);\n setAttributeSvg(rect, attr);\n };\n SvgRenderer.prototype.createGElement = function (elementType, attribute) {\n var gElement = createSvgElement(elementType, attribute);\n return gElement;\n };\n /** @private */\n SvgRenderer.prototype.drawLine = function (gElement, options) {\n var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');\n this.setSvgStyle(line, options);\n var pivotX = options.x + options.width * options.pivotX;\n var pivotY = options.y + options.height * options.pivotY;\n var kk = '';\n var attr = {\n 'id': options.id,\n 'x1': options.startPoint.x + options.x,\n 'y1': options.startPoint.y + options.y,\n 'x2': options.endPoint.x + options.x,\n 'y2': options.endPoint.y + options.y,\n 'stroke': options.stroke,\n 'stroke-width': options.strokeWidth.toString(), 'opacity': options.opacity.toString(),\n 'transform': 'rotate(' + options.angle + ' ' + pivotX + ' ' + pivotY + ')',\n 'visibility': options.visible ? 'visible' : 'hidden',\n };\n if (options.class) {\n attr['class'] = options.class;\n }\n setAttributeSvg(line, attr);\n gElement.appendChild(line);\n };\n /** @private */\n SvgRenderer.prototype.drawCircle = function (gElement, options, enableSelector, ariaLabel) {\n var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');\n this.setSvgStyle(circle, options);\n var classval = options.class || '';\n if (!enableSelector) {\n classval += ' e-disabled';\n }\n var attr = {\n 'id': options.id,\n 'cx': options.centerX,\n 'cy': options.centerY,\n 'r': options.radius,\n 'visibility': options.visible ? 'visible' : 'hidden',\n 'class': classval,\n 'aria-label': ariaLabel ? ariaLabel['aria-label'] : ''\n };\n circle.style.display = options.visible ? 'block' : 'none';\n setAttributeSvg(circle, attr);\n gElement.appendChild(circle);\n };\n SvgRenderer.prototype.drawPath = function (svg, options, diagramId, isSelector, parentSvg, ariaLabel) {\n var id;\n var x = Math.floor((Math.random() * 10) + 1);\n id = svg.id + '_shape' + x.toString();\n var collection = [];\n collection = processPathData(options.data);\n collection = pathSegmentCollection(collection);\n if (options.shadow) {\n this.renderShadow(options, svg, collection, parentSvg);\n }\n var shadowElement;\n if (parentSvg && !options.shadow) {\n shadowElement = parentSvg.getElementById(options.id + '_groupElement_shadow');\n if (shadowElement) {\n shadowElement.parentNode.removeChild(shadowElement);\n }\n }\n var path;\n if (parentSvg) {\n path = parentSvg.getElementById(options.id);\n }\n if (!path || isSelector) {\n path = document.createElementNS('http://www.w3.org/2000/svg', 'path');\n svg.appendChild(path);\n }\n this.renderPath(path, options, collection);\n var attr = {\n 'id': options.id, 'transform': 'rotate(' + options.angle + ',' + (options.x + options.width * options.pivotX) + ','\n + (options.y + options.height * options.pivotY) + ')' + 'translate(' + (options.x) + ',' + (options.y) + ')',\n 'visibility': options.visible ? 'visible' : 'hidden', 'opacity': options.opacity,\n 'aria-label': ariaLabel ? ariaLabel : ''\n };\n if (options.class) {\n attr['class'] = options.class;\n }\n setAttributeSvg(path, attr);\n this.setSvgStyle(path, options, diagramId);\n };\n SvgRenderer.prototype.renderPath = function (svg, options, collection) {\n var x1;\n var y1;\n var x2;\n var y2;\n var x;\n var y;\n var length;\n var i;\n var segments = collection;\n var d = '';\n for (x = 0, y = 0, i = 0, length = segments.length; i < length; ++i) {\n var obj = segments[i];\n var segment = obj;\n var char = segment.command;\n if ('x1' in segment) {\n x1 = segment.x1;\n }\n if ('x2' in segment) {\n x2 = segment.x2;\n }\n if ('y1' in segment) {\n y1 = segment.y1;\n }\n if ('y2' in segment) {\n y2 = segment.y2;\n }\n if ('x' in segment) {\n x = segment.x;\n }\n if ('y' in segment) {\n y = segment.y;\n }\n switch (char) {\n case 'M':\n d = d + 'M' + x.toString() + ',' + y.toString() + ' ';\n break;\n case 'L':\n d = d + 'L' + x.toString() + ',' + y.toString() + ' ';\n break;\n case 'C':\n d = d + 'C' + x1.toString() + ',' + y1.toString() + ',' + x2.toString() + ',' + y2.toString() + ',';\n d += x.toString() + ',' + y.toString() + ' ';\n break;\n case 'Q':\n d = d + 'Q' + x1.toString() + ',' + y1.toString() + ',' + x.toString() + ',' + y.toString() + ' ';\n break;\n case 'A':\n d = d + 'A' + segment.r1.toString() + ',' + segment.r2.toString() + ',' + segment.angle.toString() + ',';\n d += segment.largeArc.toString() + ',' + segment.sweep + ',' + x.toString() + ',' + y.toString() + ' ';\n break;\n case 'Z':\n case 'z':\n d = d + 'Z' + ' ';\n break;\n }\n }\n svg.setAttribute('d', d);\n };\n SvgRenderer.prototype.setSvgFontStyle = function (text, options) {\n text.style.fontStyle = options.italic ? 'italic' : 'normal';\n text.style.fontWeight = options.bold ? 'bold' : 'normal';\n text.style.fontSize = options.fontSize.toString() + 'px';\n text.style.fontFamily = options.fontFamily;\n };\n SvgRenderer.prototype.drawText = function (canvas, options, parentSvg, ariaLabel, diagramId) {\n if (options.content !== undefined) {\n var textNode = void 0;\n var childNodes = void 0;\n var wrapBounds = void 0;\n var position = void 0;\n var child = void 0;\n var tspanElement = void 0;\n var offsetX = 0;\n var offsetY = 0;\n var i = 0;\n var text = void 0;\n if (parentSvg) {\n text = parentSvg.getElementById(options.id + '_text');\n }\n if (text) {\n if (options.doWrap) {\n while (text.firstChild) {\n text.removeChild(text.firstChild);\n }\n }\n }\n else {\n options.doWrap = true;\n text = document.createElementNS('http://www.w3.org/2000/svg', 'text');\n if (options.whiteSpace === 'pre-wrap') {\n text.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');\n }\n canvas.appendChild(text);\n }\n var pivotX = options.x + options.width * options.pivotX;\n var pivotY = options.y + options.height * options.pivotY;\n if (options.doWrap) {\n this.setSvgStyle(text, options, diagramId);\n this.setSvgFontStyle(text, options);\n textNode = document.createTextNode(options.content);\n childNodes = options.childNodes;\n wrapBounds = options.wrapBounds;\n position = this.svgLabelAlign(options, wrapBounds, childNodes);\n if (wrapBounds.width > options.width && options.textOverflow !== 'Wrap') {\n childNodes[0].text = overFlow(options.content, options);\n }\n for (i = 0; i < childNodes.length; i++) {\n tspanElement = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');\n textNode = document.createTextNode(childNodes[i].text);\n child = childNodes[i];\n offsetX = position.x + child.x - wrapBounds.x;\n offsetY = position.y + child.dy * (i) + ((options.fontSize) * 0.8);\n setAttributeSvg(tspanElement, { 'x': offsetX.toString(), 'y': offsetY.toString() });\n text.setAttribute('fill', child.text);\n tspanElement.appendChild(textNode);\n text.appendChild(tspanElement);\n }\n }\n if (options.textDecoration && options.textDecoration === 'LineThrough') {\n options.textDecoration = wordBreakToString(options.textDecoration);\n }\n var attr = {\n 'id': options.id + '_text', 'fill': options.color, 'visibility': options.visible ? 'visible' : 'hidden',\n 'text-decoration': options.textDecoration, 'transform': 'rotate(' + options.angle + ','\n + (pivotX) + ',' + (pivotY) + ')'\n + 'translate(' + (options.x) + ',' + (options.y) + ')', 'opacity': options.opacity,\n 'aria-label': ariaLabel ? ariaLabel : ''\n };\n setAttributeSvg(text, attr);\n }\n };\n SvgRenderer.prototype.drawImage = function (canvas, obj, parentSvg) {\n var id = obj.id + '_image';\n var image;\n if (parentSvg) {\n image = parentSvg.getElementById(obj.id + 'image');\n }\n if (!image) {\n image = document.createElementNS('http://www.w3.org/2000/svg', 'image');\n canvas.appendChild(image);\n }\n var imageObj = new Image();\n imageObj.src = obj.source;\n var scale = obj.scale !== 'None' ? obj.scale : '';\n var imgAlign = obj.alignment;\n var aspectRatio = imgAlign.charAt(0).toLowerCase() + imgAlign.slice(1);\n if (scale) {\n aspectRatio += ' ' + scale.charAt(0).toLowerCase() + scale.slice(1);\n }\n var attr = {\n 'id': obj.id + 'image', 'x': obj.x.toString(), 'y': obj.y.toString(), 'transform': 'rotate(' + obj.angle + ','\n + (obj.x + obj.width * obj.pivotX) + ',' + (obj.y + obj.height * obj.pivotY) + ')',\n 'width': obj.width.toString(), 'visibility': obj.visible ? 'visible' : 'hidden',\n 'height': obj.height.toString(), 'preserveAspectRatio': aspectRatio\n };\n setAttributeSvg(image, attr);\n image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', imageObj.src.toString());\n };\n /** @private */\n SvgRenderer.prototype.drawHTMLContent = function (element, canvas, transform) {\n var htmlElement;\n if (canvas) {\n var i = void 0;\n for (i = 0; i < canvas.childNodes.length; i++) {\n if (canvas.childNodes[i].id === element.id + '_html_element') {\n htmlElement = canvas.childNodes[i];\n }\n }\n }\n if (!htmlElement) {\n var attr = {\n 'id': element.id + '_html_element',\n 'class': 'foreign-object'\n };\n htmlElement = createHtmlElement('div', attr);\n htmlElement.appendChild(element.template.cloneNode(true));\n canvas.appendChild(htmlElement);\n }\n htmlElement.setAttribute('style', 'height:' + (element.actualSize.height) + 'px; width:' + (element.actualSize.width) +\n 'px;left:' + (element.corners.x) + 'px; top:' + ((element.corners.y)) + 'px;' +\n 'position:absolute;transform:rotate(' + element.parentTransform + 'deg);' +\n 'pointer-events:all;visibility:' + ((element.visible) ? 'visible' : 'hidden') + ';');\n };\n /** @private */\n SvgRenderer.prototype.drawNativeContent = function (element, canvas, height, width, parentSvg) {\n var nativeElement;\n var clipPath;\n if (parentSvg) {\n nativeElement = parentSvg.getElementById(element.id + '_native_element');\n clipPath = parentSvg.getElementById(element.id + '_clip');\n }\n if (!nativeElement) {\n nativeElement = document.createElementNS('http://www.w3.org/2000/svg', 'g');\n nativeElement.setAttribute('id', element.id + '_native_element');\n nativeElement.appendChild(element.template.cloneNode(true));\n canvas.appendChild(nativeElement);\n }\n if (clipPath) {\n nativeElement.removeChild(clipPath);\n }\n nativeElement.setAttribute('style', 'visibility:' + ((element.visible) ? 'visible' : 'hidden') + ';');\n this.setNativTransform(element, nativeElement, height, width);\n if (element.scale === 'Slice') {\n this.drawClipPath(element, nativeElement, height, width, parentSvg);\n }\n setAttributeSvg(nativeElement, element.description ? { 'aria-label': element.description } : {});\n };\n SvgRenderer.prototype.setNativTransform = function (element, nativeElement, height, width) {\n var contentWidth = element.contentSize.width !== 0 ? element.contentSize.width : 1;\n var contentHeight = element.contentSize.height !== 0 ? element.contentSize.height : 1;\n var x = element.templatePosition.x * width / contentWidth;\n var y = element.templatePosition.y * height / contentHeight;\n nativeElement.setAttribute('transform', 'rotate(' + element.parentTransform + ',' + element.offsetX + ',' + element.offsetY +\n ') translate(' + (element.offsetX - x - width * element.pivot.x) + ',' + (element.offsetY - y - height * element.pivot.y) +\n ') scale(' + (width / contentWidth) + ',' + (height / contentHeight) + ')');\n };\n /**\n * used to crop the given native element into a rectangle of the given size\n * @private\n * @param node\n * @param group\n * @param height\n * @param width\n * @param parentSvg\n */\n SvgRenderer.prototype.drawClipPath = function (node, group, height, width, parentSvg) {\n var contentWidth = node.contentSize.width;\n var contentHeight = node.contentSize.height;\n var actualWidth = node.actualSize.width;\n var actualHeight = node.actualSize.height;\n var clipWidth = node.width / (width / contentWidth);\n var clipHeight = node.height / (height / contentHeight);\n var x = node.templatePosition.x + (node.width >= node.height ? 0 : (contentWidth - clipWidth) / 2);\n var y = node.templatePosition.y + (node.height >= node.width ? 0 : (contentHeight - clipHeight) / 2);\n var clipPath = parentSvg.getElementById(node.id + '_clip');\n clipPath = document.createElementNS('http://www.w3.org/2000/svg', 'clipPath');\n clipPath.setAttribute('id', node.id + '_clip');\n group.appendChild(clipPath);\n var rect = parentSvg.getElementById(node.id + '_clip_rect');\n rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');\n clipPath.appendChild(rect);\n var attr = {\n 'id': node.id + '_clip_rect', 'width': clipWidth.toString(), 'height': clipHeight.toString(),\n 'x': x.toString(), 'y': y.toString()\n };\n setAttributeSvg(rect, attr);\n group.setAttribute('clip-path', 'url(#' + node.id + '_clip)');\n return group;\n };\n SvgRenderer.prototype.renderGradient = function (options, svg, diagramId) {\n var max;\n var min;\n var grd;\n var svgContainer = getBackgroundLayerSvg(diagramId);\n var defs = svgContainer.getElementById(diagramId + 'gradient_pattern');\n if (!defs) {\n defs = createSvgElement('defs', { id: diagramId + 'gradient_pattern' });\n svgContainer.insertBefore(defs, svgContainer.firstChild);\n }\n var radial;\n var linear;\n var stop;\n var offset;\n if (options.gradient.type !== 'None') {\n for (var i = 0; i < options.gradient.stops.length; i++) {\n max = !max ? options.gradient.stops[i].offset : Math.max(max, options.gradient.stops[i].offset);\n min = !min ? options.gradient.stops[i].offset : Math.min(min, options.gradient.stops[i].offset);\n }\n if (options.gradient.type === 'Linear') {\n linear = options.gradient;\n linear.id = svg.id + '_linear';\n grd = svgContainer.getElementById(svg.id + '_linear');\n if (grd) {\n grd.parentNode.removeChild(grd);\n }\n grd = this.createLinearGradient(linear);\n defs.appendChild(grd);\n }\n else {\n radial = options.gradient;\n radial.id = svg.id + '_radial';\n grd = svgContainer.getElementById(svg.id + '_radial');\n grd = svgContainer.getElementById(svg.id + '_linear');\n if (grd) {\n grd.parentNode.removeChild(grd);\n }\n grd = this.createRadialGradient(radial);\n defs.appendChild(grd);\n }\n for (var i = 0; i < options.gradient.stops.length; i++) {\n var stop_1 = options.gradient.stops[i];\n var offset_1 = min < 0 ? (max + stop_1.offset) / (2 * max) : stop_1.offset / max;\n var stopElement = document.createElementNS('http://www.w3.org/2000/svg', 'stop');\n setAttributeSvg(stopElement, { 'offset': offset_1.toString(), 'style': 'stop-color:' + stop_1.color });\n grd.appendChild(stopElement);\n }\n }\n return grd;\n };\n SvgRenderer.prototype.createLinearGradient = function (linear) {\n var lineargradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');\n var attr = {\n 'id': linear.id, 'x1': linear.x1 + '%', 'y1': linear.y1 + '%', 'x2': linear.x2 + '%', 'y2': linear.y2 + '%'\n };\n setAttributeSvg(lineargradient, attr);\n return lineargradient;\n };\n SvgRenderer.prototype.createRadialGradient = function (radial) {\n var radialgradient = document.createElementNS('http://www.w3.org/2000/svg', 'radialGradient');\n var attr = {\n 'id': radial.id, 'cx': radial.cx + '%', 'cy': radial.cy + '%', 'r': radial.r + '%', 'fx': radial.fx + '%', 'fy': radial.fy + '%'\n };\n setAttributeSvg(radialgradient, attr);\n return radialgradient;\n };\n SvgRenderer.prototype.setSvgStyle = function (svg, style, diagramId) {\n if (style.fill === 'none') {\n style.fill = 'transparent';\n }\n if (style.stroke === 'none') {\n style.stroke = 'transparent';\n }\n var dashArray = [];\n var fill;\n if (style.dashArray !== undefined) {\n var canvasRenderer = new CanvasRenderer();\n dashArray = canvasRenderer.parseDashArray(style.dashArray);\n }\n if (style.gradient && style.gradient.type !== 'None') {\n var grd = this.renderGradient(style, svg, diagramId);\n fill = 'url(#' + grd.id + ')';\n }\n else {\n fill = style.fill;\n }\n if (style.stroke) {\n svg.setAttribute('stroke', style.stroke);\n }\n if (style.strokeWidth !== undefined) {\n svg.setAttribute('stroke-width', style.strokeWidth.toString());\n }\n if (dashArray) {\n svg.setAttribute('stroke-dasharray', dashArray.toString());\n }\n if (fill) {\n svg.setAttribute('fill', fill);\n }\n };\n //end region\n // text utility\n SvgRenderer.prototype.svgLabelAlign = function (text, wrapBound, childNodes) {\n var bounds = new Size(wrapBound.width, childNodes.length * (text.fontSize));\n var pos = { x: 0, y: 0 };\n var x = 0;\n var y = 0;\n var offsetX = text.width * 0.5;\n var offsety = text.height * 0.5;\n var pointX = offsetX;\n var pointY = offsety;\n if (text.textAlign === 'left') {\n pointX = 0;\n }\n else if (text.textAlign === 'center') {\n if (wrapBound.width > text.width && (text.textOverflow === 'Ellipsis' || text.textOverflow === 'Clip')) {\n pointX = 0;\n }\n else {\n pointX = text.width * 0.5;\n }\n }\n else if (text.textAlign === 'right') {\n pointX = (text.width * 1);\n }\n pos.x = x + pointX + (wrapBound ? wrapBound.x : 0);\n pos.y = y + pointY - bounds.height / 2;\n return pos;\n };\n return SvgRenderer;\n}());\nexport { SvgRenderer };\n","import { Transform } from '../../enum/enum';\nimport { Size } from '../../primitives/size';\nimport { Rect } from '../../primitives/rect';\nimport { getBounds, randomId } from '../../utility/base-util';\n/**\n * DiagramElement module defines the basic unit of diagram\n */\nvar DiagramElement = /** @class */ (function () {\n function DiagramElement() {\n /**\n * Sets/Gets the reference point of the element\n */\n this.pivot = { x: 0.5, y: 0.5 };\n /**\n * Sets or gets whether the content of the element needs to be measured\n */\n this.isDirt = true;\n /**\n * Sets or gets whether the content of the element to be visible\n */\n this.visible = true;\n /**\n * Sets/Gets the x-coordinate of the element\n */\n this.offsetX = 0;\n /**\n * Sets/Gets the y-coordinate of the element\n */\n this.offsetY = 0;\n /**\n * Set the corner of the element\n */\n this.cornerRadius = 0;\n /**\n * Sets/Gets the minimum height of the element\n */\n this.minHeight = undefined;\n /**\n * Sets/Gets the minimum width of the element\n */\n this.minWidth = undefined;\n /**\n * Sets/Gets the maximum width of the element\n */\n this.maxWidth = undefined;\n /**\n * Sets/Gets the maximum height of the element\n */\n this.maxHeight = undefined;\n /**\n * Sets/Gets the width of the element\n */\n this.width = undefined;\n /**\n * Sets/Gets the height of the element\n */\n this.height = undefined;\n /**\n * Sets/Gets the rotate angle of the element\n */\n this.rotateAngle = 0;\n /**\n * Sets/Gets the margin of the element\n */\n this.margin = { left: 0, right: 0, top: 0, bottom: 0 };\n /**\n * Sets/Gets how the element has to be horizontally arranged with respect to its immediate parent\n */\n this.horizontalAlignment = 'Auto';\n /**\n * Sets/Gets how the element has to be vertically arranged with respect to its immediate parent\n */\n this.verticalAlignment = 'Auto';\n /**\n * Sets whether the element has to be aligned with respect to a point/with respect to its immediate parent\n */\n this.relativeMode = 'Point';\n /**\n * Sets whether the element has to be transformed based on its parent or not\n */\n this.transform = Transform.Self | Transform.Parent;\n /**\n * Sets the style of the element\n */\n this.style = { fill: 'white', strokeColor: 'black', opacity: 1, strokeWidth: 1 };\n /**\n * Gets the minimum size that is required by the element\n */\n this.desiredSize = new Size();\n /**\n * Gets the size that the element will be rendered\n */\n this.actualSize = new Size();\n /**\n * Gets the rotate angle that is set to the immediate parent of the element\n */\n this.parentTransform = 0;\n this.isSvgRender = false;\n /**\n * Gets/Sets the boundary of the element\n */\n this.bounds = new Rect(0, 0, 0, 0);\n /**\n * Gets/Sets the corners of the rectangular bounds\n */\n this.corners = new Rect(0, 0, 0, 0);\n /**\n * Defines the appearance of the shadow of the element\n */\n this.shadow = null;\n /**\n * Defines the description of the diagram element\n */\n this.description = '';\n /**\n * Defines whether the element has to be measured or not\n */\n this.staticSize = false;\n this.isRectElement = false;\n //private variables\n this.position = undefined;\n this.unitMode = undefined;\n this.float = false;\n this.floatingBounds = undefined;\n this.id = randomId();\n }\n /**\n * Sets the offset of the element with respect to its parent\n * @param x\n * @param y\n * @param mode\n */\n DiagramElement.prototype.setOffsetWithRespectToBounds = function (x, y, mode) {\n this.unitMode = mode;\n this.position = { x: x, y: y };\n };\n /**\n * Gets the position of the element with respect to its parent\n * @param size\n */\n DiagramElement.prototype.getAbsolutePosition = function (size) {\n if (this.position !== undefined) {\n if (this.unitMode === 'Absolute') {\n return this.position;\n }\n else {\n return {\n x: this.position.x * size.width, y: this.position.y * size.height\n };\n }\n }\n return undefined;\n };\n Object.defineProperty(DiagramElement.prototype, \"outerBounds\", {\n get: function () {\n return this.floatingBounds || this.bounds;\n },\n set: function (bounds) {\n this.floatingBounds = bounds;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Measures the minimum space that the element requires\n * @param availableSize\n */\n DiagramElement.prototype.measure = function (availableSize) {\n var width = this.width !== undefined ? this.width : (availableSize.width || 0) - this.margin.left - this.margin.right;\n var height = this.height !== undefined ? this.height : (availableSize.height || 0) - this.margin.top - this.margin.bottom;\n this.desiredSize = new Size(width, height);\n this.desiredSize = this.validateDesiredSize(this.desiredSize, availableSize);\n return this.desiredSize;\n };\n /**\n * Arranges the element\n * @param desiredSize\n */\n DiagramElement.prototype.arrange = function (desiredSize) {\n this.actualSize = desiredSize;\n this.updateBounds();\n return this.actualSize;\n };\n /**\n * Updates the bounds of the element\n */\n DiagramElement.prototype.updateBounds = function () {\n this.bounds = getBounds(this);\n };\n /**\n * Validates the size of the element with respect to its minimum and maximum size\n * @param desiredSize\n * @param availableSize\n */\n DiagramElement.prototype.validateDesiredSize = function (desiredSize, availableSize) {\n //Empty canvas\n if (this.isRectElement && !this.width && !this.minWidth && !this.maxWidth) {\n desiredSize.width = 50;\n }\n if (this.isRectElement && !this.height && !this.minHeight && !this.maxHeight) {\n desiredSize.height = 50;\n }\n if (desiredSize === undefined || this.width !== undefined &&\n this.height !== undefined) {\n desiredSize = desiredSize || new Size();\n desiredSize.width = this.width === undefined ? (availableSize.width || 0)\n - this.margin.left - this.margin.right : this.width;\n desiredSize.height = this.height === undefined ? (availableSize.height || 0)\n - this.margin.top - this.margin.bottom : this.height;\n }\n //Considering min values\n if (this.minWidth !== undefined) {\n desiredSize.width = Math.max(desiredSize.width, this.minWidth);\n }\n if (this.minHeight !== undefined) {\n desiredSize.height = Math.max(desiredSize.height, this.minHeight);\n }\n //Considering max values\n if (this.maxWidth !== undefined) {\n desiredSize.width = Math.min(desiredSize.width, this.maxWidth);\n }\n if (this.maxHeight !== undefined) {\n desiredSize.height = Math.min(desiredSize.height, this.maxHeight);\n }\n return desiredSize;\n };\n return DiagramElement;\n}());\nexport { DiagramElement };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { Size } from '../../primitives/size';\nimport { DiagramElement } from './diagram-element';\nimport { Rect } from '../../primitives/rect';\nimport { measurePath, findSegmentPoints, translatePoints } from './../../utility/dom-util';\nimport { processPathData, splitArrayCollection, transformPath, getPathString } from '../../utility/path-util';\n/**\n * PathElement takes care of how to align the path based on offsetX and offsetY\n */\nvar PathElement = /** @class */ (function (_super) {\n __extends(PathElement, _super);\n /**\n * set the id for each element\n */\n function PathElement() {\n var _this = _super.call(this) || this;\n /**\n * Gets or sets the geometry of the path element\n */\n _this.pathData = '';\n /**\n * Gets/Sets whether the path has to be transformed to fit the given x,y, width, height\n */\n _this.transformPath = true;\n /**\n * Gets/Sets the equivalent path, that will have the origin as 0,0\n */\n _this.absolutePath = '';\n //Private variables\n _this.absoluteBounds = new Rect();\n return _this;\n }\n Object.defineProperty(PathElement.prototype, \"data\", {\n get: function () {\n return this.pathData;\n },\n set: function (value) {\n if (this.pathData !== value) {\n this.pathData = value;\n this.isDirt = true;\n }\n },\n enumerable: true,\n configurable: true\n });\n /** @private */\n PathElement.prototype.getPoints = function () {\n var _this = this;\n if (!this.pointTimer) {\n this.pointTimer = setTimeout(function () {\n _this.points = null;\n _this.pointTimer = null;\n }, 200);\n }\n this.points = this.points || findSegmentPoints(this);\n return translatePoints(this, this.points);\n };\n /**\n * Measures the minimum space that is required to render the element\n * @param availableSize\n */\n PathElement.prototype.measure = function (availableSize) {\n //Performance issue - Avoiding measuring the connector path\n if (this.staticSize && this.width !== undefined && this.height !== undefined) {\n this.absoluteBounds = new Rect(this.offsetX - this.width * this.pivot.x, this.offsetY - this.height * this.pivot.y, this.width, this.height);\n }\n else if (this.isDirt && (this.transformPath || (this.width === undefined || this.height === undefined))) {\n //Measure the element only whent the path data is changed/ size is not specified\n this.absoluteBounds = measurePath(this.data ? this.data : '');\n }\n if (this.width === undefined) {\n this.desiredSize = new Size(this.absoluteBounds.width, this.height || this.absoluteBounds.height);\n }\n else if (this.height === undefined) {\n this.desiredSize = new Size(this.width || this.absoluteBounds.width, this.absoluteBounds.height);\n }\n else {\n this.desiredSize = new Size(this.width, this.height);\n }\n this.desiredSize = this.validateDesiredSize(this.desiredSize, availableSize);\n return this.desiredSize;\n };\n /**\n * Arranges the path element\n * @param desiredSize\n */\n PathElement.prototype.arrange = function (desiredSize) {\n if (this.isDirt || this.actualSize.width !== desiredSize.width || this.actualSize.height !== desiredSize.height) {\n this.isDirt = true;\n this.absolutePath = this.updatePath(this.data, this.absoluteBounds, desiredSize);\n if (!this.staticSize) {\n this.points = null;\n }\n }\n this.actualSize = this.desiredSize;\n this.updateBounds();\n this.isDirt = false;\n return this.actualSize;\n };\n /**\n * Translates the path to 0,0 and scales the path based on the actual size\n * @param pathData\n * @param bounds\n * @param actualSize\n */\n PathElement.prototype.updatePath = function (pathData, bounds, actualSize) {\n var isScale = false;\n var newPathString = '';\n var scaleX = -bounds.x;\n var scaleY = -bounds.y;\n var arrayCollection = [];\n if (actualSize.width !== bounds.width || actualSize.height !== bounds.height) {\n scaleX = actualSize.width / Number(bounds.width ? bounds.width : 1);\n scaleY = actualSize.height / Number(bounds.height ? bounds.height : 1);\n isScale = true;\n }\n arrayCollection = processPathData(pathData);\n arrayCollection = splitArrayCollection(arrayCollection);\n if ((isScale || this.isDirt) && this.transformPath) {\n newPathString = transformPath(arrayCollection, scaleX, scaleY, isScale, bounds.x, bounds.y, 0, 0);\n }\n else {\n newPathString = getPathString(arrayCollection);\n }\n isScale = false;\n return newPathString;\n };\n return PathElement;\n}(DiagramElement));\nexport { PathElement };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { Size } from '../../primitives/size';\nimport { DiagramElement } from './diagram-element';\nimport { measureImage } from './../../utility/dom-util';\n/**\n * ImageElement defines a basic image elements\n */\nvar ImageElement = /** @class */ (function (_super) {\n __extends(ImageElement, _super);\n /**\n * set the id for each element\n */\n function ImageElement() {\n var _this = _super.call(this) || this;\n /**\n * sets or gets the image source\n */\n _this.imageSource = '';\n /**\n * sets scaling factor of the image\n */\n _this.imageScale = 'None';\n /**\n * sets the alignment of the image\n */\n _this.imageAlign = 'None';\n /**\n * Sets how to stretch the image\n */\n _this.stretch = 'Stretch';\n return _this;\n }\n Object.defineProperty(ImageElement.prototype, \"source\", {\n get: function () {\n return this.imageSource;\n },\n set: function (value) {\n this.imageSource = value;\n this.isDirt = true;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Measures minimum space that is required to render the image\n * @param availableSize\n */\n ImageElement.prototype.measure = function (availableSize) {\n if (this.isDirt && (this.stretch !== 'Stretch' || this.width === undefined && this.height === undefined)) {\n this.contentSize = measureImage(this.source, this.contentSize);\n this.isDirt = false;\n }\n if (this.width !== undefined && this.height !== undefined) {\n this.desiredSize = new Size(this.width, this.height);\n this.contentSize = this.desiredSize;\n }\n else {\n this.desiredSize = this.contentSize;\n }\n this.desiredSize = this.validateDesiredSize(this.desiredSize, availableSize);\n return this.desiredSize;\n };\n /**\n * Arranges the image\n * @param desiredSize\n */\n ImageElement.prototype.arrange = function (desiredSize) {\n this.actualSize = new Size(this.desiredSize.width, this.desiredSize.height);\n this.updateBounds();\n return this.actualSize;\n };\n return ImageElement;\n}(DiagramElement));\nexport { ImageElement };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { Size } from '../../primitives/size';\nimport { DiagramElement } from './diagram-element';\nimport { measureText } from './../../utility/dom-util';\n/**\n * TextElement is used to display text/annotations\n */\nvar TextElement = /** @class */ (function (_super) {\n __extends(TextElement, _super);\n /**\n * set the id for each element\n */\n function TextElement() {\n var _this = _super.call(this) || this;\n /**\n * sets or gets the image source\n */\n _this.textContent = '';\n _this.hyperlink = {\n color: 'blue'\n };\n /** @private */\n _this.doWrap = true;\n _this.textNodes = [];\n /**\n * Defines the appearance of the text element\n */\n _this.style = {\n color: 'black', fill: 'white', strokeColor: 'black',\n strokeWidth: 1, fontFamily: 'Arial', fontSize: 12, whiteSpace: 'CollapseSpace',\n textWrapping: 'WrapWithOverflow', textAlign: 'Center', italic: false, bold: false,\n textDecoration: 'None', strokeDashArray: '', opacity: 5, gradient: null,\n textOverflow: 'Wrap'\n };\n return _this;\n }\n Object.defineProperty(TextElement.prototype, \"content\", {\n get: function () {\n return this.textContent;\n },\n set: function (value) {\n if (this.textContent !== value) {\n this.textContent = value;\n this.isDirt = true;\n this.doWrap = true;\n }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TextElement.prototype, \"childNodes\", {\n get: function () {\n return this.textNodes;\n },\n set: function (value) {\n this.textNodes = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TextElement.prototype, \"wrapBounds\", {\n get: function () {\n return this.textWrapBounds;\n },\n set: function (value) {\n this.textWrapBounds = value;\n },\n enumerable: true,\n configurable: true\n });\n /** @private */\n TextElement.prototype.refreshTextElement = function () {\n this.isDirt = true;\n };\n /**\n * Measures the minimum size that is required for the text element\n * @param availableSize\n */\n TextElement.prototype.measure = function (availableSize) {\n var size;\n if (this.isDirt) {\n size = measureText(this, this.style, this.content, this.width);\n }\n else {\n size = this.desiredSize;\n }\n if (this.width === undefined || this.height === undefined) {\n this.desiredSize = new Size(size.width, size.height);\n }\n else {\n this.desiredSize = new Size(this.width, this.height);\n }\n this.desiredSize = this.validateDesiredSize(this.desiredSize, availableSize);\n return this.desiredSize;\n };\n /**\n * Arranges the text element\n * @param desiredSize\n */\n TextElement.prototype.arrange = function (desiredSize) {\n if (desiredSize.width !== this.actualSize.width || desiredSize.height !== this.actualSize.height || this.isDirt) {\n this.doWrap = true;\n }\n this.actualSize = desiredSize;\n this.updateBounds();\n this.isDirt = false;\n return this.actualSize;\n };\n return TextElement;\n}(DiagramElement));\nexport { TextElement };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty, Collection, ComplexFactory } from '@syncfusion/ej2-base';\nvar getGradientType = function (obj) {\n switch (obj.type) {\n case 'Linear':\n return LinearGradient;\n case 'Radial':\n return RadialGradient;\n default:\n return LinearGradient;\n }\n};\n/**\n * Layout Model module defines the styles and types to arrange objects in containers\n */\nvar Thickness = /** @class */ (function () {\n function Thickness(left, right, top, bottom) {\n this.left = left;\n this.right = right;\n this.top = top;\n this.bottom = bottom;\n }\n return Thickness;\n}());\nexport { Thickness };\n/**\n * Defines the space to be left between an object and its immediate parent\n */\nvar Margin = /** @class */ (function (_super) {\n __extends(Margin, _super);\n function Margin() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(0)\n ], Margin.prototype, \"left\", void 0);\n __decorate([\n Property(0)\n ], Margin.prototype, \"right\", void 0);\n __decorate([\n Property(0)\n ], Margin.prototype, \"top\", void 0);\n __decorate([\n Property(0)\n ], Margin.prototype, \"bottom\", void 0);\n return Margin;\n}(ChildProperty));\nexport { Margin };\n/**\n * Defines the Shadow appearance of the objects\n */\nvar Shadow = /** @class */ (function (_super) {\n __extends(Shadow, _super);\n function Shadow() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(45)\n ], Shadow.prototype, \"angle\", void 0);\n __decorate([\n Property(5)\n ], Shadow.prototype, \"distance\", void 0);\n __decorate([\n Property(0.7)\n ], Shadow.prototype, \"opacity\", void 0);\n __decorate([\n Property('lightgrey')\n ], Shadow.prototype, \"color\", void 0);\n return Shadow;\n}(ChildProperty));\nexport { Shadow };\n/**\n * Defines the stop of gradient\n */\nvar Stop = /** @class */ (function (_super) {\n __extends(Stop, _super);\n function Stop() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], Stop.prototype, \"color\", void 0);\n __decorate([\n Property(0)\n ], Stop.prototype, \"offset\", void 0);\n __decorate([\n Property(1)\n ], Stop.prototype, \"opacity\", void 0);\n return Stop;\n}(ChildProperty));\nexport { Stop };\n/**\n * Defines the gradient of styles\n */\nvar Gradient = /** @class */ (function (_super) {\n __extends(Gradient, _super);\n function Gradient() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Collection([], Stop)\n ], Gradient.prototype, \"stops\", void 0);\n __decorate([\n Property('None')\n ], Gradient.prototype, \"type\", void 0);\n __decorate([\n Property('')\n ], Gradient.prototype, \"id\", void 0);\n return Gradient;\n}(ChildProperty));\nexport { Gradient };\n/**\n * Defines the linear gradient of styles\n */\nvar LinearGradient = /** @class */ (function (_super) {\n __extends(LinearGradient, _super);\n function LinearGradient() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(0)\n ], LinearGradient.prototype, \"x1\", void 0);\n __decorate([\n Property(0)\n ], LinearGradient.prototype, \"x2\", void 0);\n __decorate([\n Property(0)\n ], LinearGradient.prototype, \"y1\", void 0);\n __decorate([\n Property(0)\n ], LinearGradient.prototype, \"y2\", void 0);\n return LinearGradient;\n}(Gradient));\nexport { LinearGradient };\n/**\n * Defines the radial gradient of styles\n */\nvar RadialGradient = /** @class */ (function (_super) {\n __extends(RadialGradient, _super);\n function RadialGradient() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(0)\n ], RadialGradient.prototype, \"cx\", void 0);\n __decorate([\n Property(0)\n ], RadialGradient.prototype, \"cy\", void 0);\n __decorate([\n Property(0)\n ], RadialGradient.prototype, \"fx\", void 0);\n __decorate([\n Property(0)\n ], RadialGradient.prototype, \"fy\", void 0);\n __decorate([\n Property(50)\n ], RadialGradient.prototype, \"r\", void 0);\n return RadialGradient;\n}(Gradient));\nexport { RadialGradient };\n/**\n * Defines the style of shape/path\n */\nvar ShapeStyle = /** @class */ (function (_super) {\n __extends(ShapeStyle, _super);\n function ShapeStyle() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('white')\n ], ShapeStyle.prototype, \"fill\", void 0);\n __decorate([\n Property('black')\n ], ShapeStyle.prototype, \"strokeColor\", void 0);\n __decorate([\n Property('')\n ], ShapeStyle.prototype, \"strokeDashArray\", void 0);\n __decorate([\n Property(1)\n ], ShapeStyle.prototype, \"strokeWidth\", void 0);\n __decorate([\n Property(1)\n ], ShapeStyle.prototype, \"opacity\", void 0);\n __decorate([\n ComplexFactory(getGradientType)\n ], ShapeStyle.prototype, \"gradient\", void 0);\n return ShapeStyle;\n}(ChildProperty));\nexport { ShapeStyle };\n/**\n * Defines the stroke style of a path\n */\nvar StrokeStyle = /** @class */ (function (_super) {\n __extends(StrokeStyle, _super);\n function StrokeStyle() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('transparent')\n ], StrokeStyle.prototype, \"fill\", void 0);\n return StrokeStyle;\n}(ShapeStyle));\nexport { StrokeStyle };\n/**\n * Defines the appearance of text\n */\nvar TextStyle = /** @class */ (function (_super) {\n __extends(TextStyle, _super);\n function TextStyle() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('black')\n ], TextStyle.prototype, \"color\", void 0);\n __decorate([\n Property('Arial')\n ], TextStyle.prototype, \"fontFamily\", void 0);\n __decorate([\n Property(12)\n ], TextStyle.prototype, \"fontSize\", void 0);\n __decorate([\n Property(false)\n ], TextStyle.prototype, \"italic\", void 0);\n __decorate([\n Property(false)\n ], TextStyle.prototype, \"bold\", void 0);\n __decorate([\n Property('CollapseSpace')\n ], TextStyle.prototype, \"whiteSpace\", void 0);\n __decorate([\n Property('WrapWithOverflow')\n ], TextStyle.prototype, \"textWrapping\", void 0);\n __decorate([\n Property('Center')\n ], TextStyle.prototype, \"textAlign\", void 0);\n __decorate([\n Property('None')\n ], TextStyle.prototype, \"textDecoration\", void 0);\n __decorate([\n Property('Wrap')\n ], TextStyle.prototype, \"textOverflow\", void 0);\n return TextStyle;\n}(ShapeStyle));\nexport { TextStyle };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { DiagramElement } from '../elements/diagram-element';\nimport { Thickness } from '../appearance';\nimport { Size } from '../../primitives/size';\nimport { Rect } from '../../primitives/rect';\nimport { rotatePoint, getOffset } from '../../utility/base-util';\n/**\n * Container module is used to group related objects\n */\nvar Container = /** @class */ (function (_super) {\n __extends(Container, _super);\n function Container() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n /**\n * Gets/Sets the space between the container and its immediate children\n */\n _this.padding = new Thickness(0, 0, 0, 0);\n //private members \n _this.desiredBounds = undefined;\n /** @private */\n _this.measureChildren = true;\n _this.prevRotateAngle = 0;\n return _this;\n }\n /**\n * returns whether the container has child elements or not\n */\n Container.prototype.hasChildren = function () {\n if (this.children !== undefined && this.children.length > 0) {\n return true;\n }\n return false;\n };\n /**\n * Measures the minimum space that the container requires\n *\n * @param availableSize\n */\n Container.prototype.measure = function (availableSize) {\n // measure the element and find the desired size\n this.desiredBounds = undefined;\n var desired = undefined;\n var child;\n var center = { x: 0, y: 0 };\n var y;\n var x;\n var childBounds;\n if (this.hasChildren()) {\n //Measuring the children\n for (var i = 0; i < this.children.length; i++) {\n child = this.children[i];\n var force = child.horizontalAlignment === 'Stretch' || child.verticalAlignment === 'Stretch';\n if (this.measureChildren || force || (child instanceof Container && child.measureChildren !== undefined)) {\n child.measure(availableSize);\n }\n childBounds = this.GetChildrenBounds(child);\n if (child.horizontalAlignment !== 'Stretch' && child.verticalAlignment !== 'Stretch') {\n if (this.desiredBounds === undefined) {\n this.desiredBounds = childBounds;\n }\n else {\n this.desiredBounds.uniteRect(childBounds);\n }\n }\n }\n if (this.desiredBounds !== undefined && this.rotateAngle !== 0) {\n var offsetPt = {\n x: this.desiredBounds.x + this.desiredBounds.width * this.pivot.x,\n y: this.desiredBounds.y + this.desiredBounds.height * this.pivot.y\n };\n var newPoint = rotatePoint(this.rotateAngle, undefined, undefined, offsetPt);\n this.desiredBounds.x = newPoint.x - this.desiredBounds.width * this.pivot.x;\n this.desiredBounds.y = newPoint.y - this.desiredBounds.height * this.pivot.y;\n }\n if (this.desiredBounds) {\n desired = new Size(this.desiredBounds.width, this.desiredBounds.height);\n }\n }\n desired = this.validateDesiredSize(desired, availableSize);\n this.stretchChildren(desired);\n this.desiredSize = desired;\n return desired;\n };\n /**\n * Arranges the container and its children\n * @param desiredSize\n */\n Container.prototype.arrange = function (desiredSize) {\n var child;\n var bounds;\n var childBounds = this.desiredBounds;\n if (childBounds) {\n var x = this.offsetX;\n var y = this.offsetY;\n this.offsetX = childBounds.x + childBounds.width * this.pivot.x;\n this.offsetY = childBounds.y + childBounds.height * this.pivot.y;\n // container has rotateAngle\n if (this.hasChildren()) {\n //Measuring the children\n for (var i = 0; i < this.children.length; i++) {\n child = this.children[i];\n var arrange = false;\n if (child.horizontalAlignment === 'Stretch') {\n child.offsetX = this.offsetX;\n child.parentTransform = this.parentTransform + this.rotateAngle;\n arrange = true;\n }\n if (child.verticalAlignment === 'Stretch') {\n child.offsetY = this.offsetY;\n child.parentTransform = this.parentTransform + this.rotateAngle;\n arrange = true;\n }\n if (arrange || this.measureChildren || (child instanceof Container && child.measureChildren !== undefined)) {\n child.arrange(child.desiredSize);\n }\n }\n }\n }\n this.actualSize = desiredSize;\n this.updateBounds();\n this.prevRotateAngle = this.rotateAngle;\n return desiredSize;\n };\n //protected methods\n /**\n * Stretches the child elements based on the size of the container\n * @param size\n */\n Container.prototype.stretchChildren = function (size) {\n if (this.hasChildren()) {\n for (var _i = 0, _a = this.children; _i < _a.length; _i++) {\n var child = _a[_i];\n if (child.horizontalAlignment === 'Stretch' || child.desiredSize.width === undefined) {\n child.desiredSize.width = size.width - child.margin.left - child.margin.right;\n }\n if (child.verticalAlignment === 'Stretch' || child.desiredSize.height === undefined) {\n child.desiredSize.height = size.height - child.margin.top - child.margin.bottom;\n }\n if (child instanceof Container) {\n child.stretchChildren(child.desiredSize);\n }\n }\n }\n };\n /**\n * Considers the padding of the element when measuring its desired size\n * @param size\n */\n Container.prototype.applyPadding = function (size) {\n size.width += this.padding.left + this.padding.right;\n size.height += this.padding.top + this.padding.bottom;\n };\n /**\n * Finds the offset of the child element with respect to the container\n * @param child\n * @param center\n */\n Container.prototype.findChildOffsetFromCenter = function (child, center) {\n var topLeft = { x: center.x - child.desiredSize.width / 2, y: center.y - child.desiredSize.height / 2 };\n var offset = getOffset(topLeft, child);\n //Rotate based on child rotate angle\n offset = rotatePoint(child.rotateAngle, center.x, center.y, offset);\n //Rotate based on parent pivot\n offset = rotatePoint(this.rotateAngle + this.parentTransform, this.offsetX, this.offsetY, offset);\n child.offsetX = offset.x;\n child.offsetY = offset.y;\n };\n //private methods - check its need\n Container.prototype.GetChildrenBounds = function (child) {\n var childBounds;\n var childSize;\n childSize = child.desiredSize.clone();\n var diffAngle = child.rotateAngle - this.rotateAngle;\n var refPoint = { x: child.offsetX, y: child.offsetY };\n var left = refPoint.x - childSize.width * child.pivot.x;\n var top = refPoint.y - childSize.height * child.pivot.y;\n var right = left + childSize.width;\n var bottom = top + childSize.height;\n var topLeft = { x: left, y: top };\n var topRight = { x: right, y: top };\n var bottomLeft = { x: left, y: bottom };\n var bottomRight = { x: right, y: bottom };\n topLeft = rotatePoint(child.rotateAngle, child.offsetX, child.offsetY, topLeft);\n topRight = rotatePoint(child.rotateAngle, child.offsetX, child.offsetY, topRight);\n bottomLeft = rotatePoint(child.rotateAngle, child.offsetX, child.offsetY, bottomLeft);\n bottomRight = rotatePoint(child.rotateAngle, child.offsetX, child.offsetY, bottomRight);\n if (this.rotateAngle !== 0) {\n topLeft = rotatePoint(-this.rotateAngle, undefined, undefined, topLeft);\n topRight = rotatePoint(-this.rotateAngle, undefined, undefined, topRight);\n bottomLeft = rotatePoint(-this.rotateAngle, undefined, undefined, bottomLeft);\n bottomRight = rotatePoint(-this.rotateAngle, undefined, undefined, bottomRight);\n }\n return Rect.toBounds([topLeft, topRight, bottomLeft, bottomRight]);\n };\n return Container;\n}(DiagramElement));\nexport { Container };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { Size } from '../../primitives/size';\nimport { DiagramElement } from './diagram-element';\nimport { measureNativeContent, getContent, measureNativeSvg } from './../../utility/dom-util';\n/**\n * NativeElement defines the basic native elements\n */\nvar DiagramNativeElement = /** @class */ (function (_super) {\n __extends(DiagramNativeElement, _super);\n /**\n * set the id for each element\n */\n function DiagramNativeElement() {\n var _this = _super.call(this) || this;\n _this.data = '';\n /**\n * sets scaling factor of the Native Element\n */\n _this.scale = 'Stretch';\n return _this;\n }\n Object.defineProperty(DiagramNativeElement.prototype, \"content\", {\n /**\n * Gets or sets the geometry of the native element\n */\n get: function () {\n return this.data;\n },\n set: function (value) {\n this.data = value;\n this.template = getContent(this, false);\n this.isDirt = true;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Measures minimum space that is required to render the Native Element\n * @param availableSize\n */\n DiagramNativeElement.prototype.measure = function (availableSize) {\n if (this.isDirt) {\n var rect = measureNativeContent(this.template);\n this.contentSize = new Size();\n this.contentSize.width = rect.width;\n this.contentSize.height = rect.height;\n var x = rect.x;\n var y = rect.y;\n this.templatePosition = { x: x, y: y };\n this.isDirt = false;\n }\n if (this.width === undefined || this.height === undefined) {\n var getAvailableSize = measureNativeSvg(this.template);\n this.desiredSize = new Size(getAvailableSize.width, getAvailableSize.height);\n }\n else {\n this.desiredSize = new Size(this.width, this.height);\n }\n this.desiredSize = this.validateDesiredSize(this.desiredSize, availableSize);\n return this.desiredSize;\n };\n /**\n * Arranges the Native Element\n * @param desiredSize\n */\n DiagramNativeElement.prototype.arrange = function (desiredSize) {\n this.actualSize = new Size(this.desiredSize.width, this.desiredSize.height);\n this.updateBounds();\n return this.actualSize;\n };\n return DiagramNativeElement;\n}(DiagramElement));\nexport { DiagramNativeElement };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { Container } from './container';\nimport { rotateSize } from '../../utility/base-util';\nimport { Transform } from '../../enum/enum';\nimport { Size } from '../../primitives/size';\nimport { Rect } from '../../primitives/rect';\n/**\n * Canvas module is used to define a plane(canvas) and to arrange the children based on margin\n */\nvar Canvas = /** @class */ (function (_super) {\n __extends(Canvas, _super);\n function Canvas() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n /**\n * Not applicable for canvas\n * @private\n */\n _this.measureChildren = undefined;\n return _this;\n }\n /**\n * Measures the minimum space that the canvas requires\n * @param availableSize\n */\n Canvas.prototype.measure = function (availableSize) {\n var desired = undefined;\n var desiredBounds = undefined;\n if (this.hasChildren()) {\n //Measuring the children\n for (var _i = 0, _a = this.children; _i < _a.length; _i++) {\n var child = _a[_i];\n child.measure(availableSize);\n var childSize = child.desiredSize.clone();\n if (child.rotateAngle !== 0) {\n childSize = rotateSize(childSize, child.rotateAngle);\n }\n var right = childSize.width + child.margin.right;\n var bottom = childSize.height + child.margin.bottom;\n var childBounds = new Rect(child.margin.left, child.margin.top, right, bottom);\n if (child.float) {\n var position = child.getAbsolutePosition(childSize);\n if (position !== undefined) {\n continue;\n }\n }\n if (desiredBounds === undefined) {\n desiredBounds = childBounds;\n }\n else {\n desiredBounds.uniteRect(childBounds);\n }\n }\n if (desiredBounds) {\n var leftMargin = 0;\n var topMargin = 0;\n leftMargin = Math.max(desiredBounds.left, 0);\n topMargin = Math.max(desiredBounds.top, 0);\n desired = new Size(desiredBounds.width + leftMargin, desiredBounds.height + topMargin);\n }\n }\n desired = _super.prototype.validateDesiredSize.call(this, desired, availableSize);\n _super.prototype.stretchChildren.call(this, desired);\n //Considering padding values\n desired.width += this.padding.left + this.padding.right;\n desired.height += this.padding.top + this.padding.bottom;\n this.desiredSize = desired;\n return desired;\n };\n /**\n * Arranges the child elements of the canvas\n */\n Canvas.prototype.arrange = function (desiredSize) {\n this.outerBounds = new Rect();\n if (this.hasChildren()) {\n var y = void 0;\n var x = void 0;\n y = this.offsetY - desiredSize.height * this.pivot.y + this.padding.top;\n x = this.offsetX - desiredSize.width * this.pivot.x + this.padding.left;\n for (var _i = 0, _a = this.children; _i < _a.length; _i++) {\n var child = _a[_i];\n if ((child.transform & Transform.Parent) !== 0) {\n child.parentTransform = this.parentTransform + this.rotateAngle;\n var childSize = child.desiredSize.clone();\n if (child.rotateAngle !== 0) {\n childSize = rotateSize(childSize, child.rotateAngle);\n }\n var topLeft = void 0;\n var center = { x: 0, y: 0 };\n var childX = x;\n var childY = y;\n if (child.relativeMode === 'Point') {\n var position = child.getAbsolutePosition(desiredSize);\n if (position !== undefined) {\n childX += position.x;\n childY += position.y;\n }\n }\n if (child.relativeMode === 'Object') {\n topLeft = this.alignChildBasedOnParent(child, childSize, desiredSize, childX, childY);\n }\n else {\n topLeft = this.alignChildBasedOnaPoint(child, childX, childY);\n }\n center = { x: topLeft.x + childSize.width / 2, y: topLeft.y + childSize.height / 2 };\n _super.prototype.findChildOffsetFromCenter.call(this, child, center);\n }\n child.arrange(child.desiredSize);\n this.outerBounds.uniteRect(child.outerBounds);\n }\n }\n this.actualSize = desiredSize;\n this.updateBounds();\n this.outerBounds.uniteRect(this.bounds);\n return desiredSize;\n };\n /**\n * Aligns the child element based on its parent\n * @param child\n * @param childSize\n * @param parentSize\n * @param x\n * @param y\n */\n Canvas.prototype.alignChildBasedOnParent = function (child, childSize, parentSize, x, y) {\n switch (child.horizontalAlignment) {\n case 'Auto':\n case 'Left':\n x += child.margin.left;\n break;\n case 'Right':\n x += parentSize.width - childSize.width - child.margin.right;\n break;\n case 'Stretch':\n case 'Center':\n x += parentSize.width / 2 - childSize.width / 2;\n break;\n }\n switch (child.verticalAlignment) {\n case 'Auto':\n case 'Top':\n y += child.margin.top;\n break;\n case 'Bottom':\n y += parentSize.height - childSize.height - child.margin.bottom;\n break;\n case 'Stretch':\n case 'Center':\n y += parentSize.height / 2 - childSize.height / 2;\n break;\n }\n return { x: x, y: y };\n };\n /**\n * Aligns the child elements based on a point\n * @param child\n * @param x\n * @param y\n */\n Canvas.prototype.alignChildBasedOnaPoint = function (child, x, y) {\n switch (child.horizontalAlignment) {\n case 'Auto':\n case 'Left':\n x += child.margin.left;\n break;\n case 'Stretch':\n case 'Center':\n x -= child.desiredSize.width * child.pivot.x;\n break;\n case 'Right':\n x -= child.desiredSize.width + child.margin.right;\n break;\n }\n switch (child.verticalAlignment) {\n case 'Auto':\n case 'Top':\n y += child.margin.top;\n break;\n case 'Stretch':\n case 'Center':\n y -= child.desiredSize.height * child.pivot.y;\n break;\n case 'Bottom':\n y -= child.desiredSize.height + child.margin.bottom;\n break;\n }\n return { x: x, y: y };\n };\n return Canvas;\n}(Container));\nexport { Canvas };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, Complex, ChildProperty } from '@syncfusion/ej2-base';\nimport { ShapeStyle, Margin } from '../core/appearance';\nimport { Point } from '../primitives/point';\nimport { PortConstraints, PortVisibility } from '../enum/enum';\n/**\n * Defines the behavior of connection ports\n */\nvar Port = /** @class */ (function (_super) {\n __extends(Port, _super);\n function Port() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], Port.prototype, \"id\", void 0);\n __decorate([\n Property('Center')\n ], Port.prototype, \"horizontalAlignment\", void 0);\n __decorate([\n Property('Center')\n ], Port.prototype, \"verticalAlignment\", void 0);\n __decorate([\n Complex({}, Margin)\n ], Port.prototype, \"margin\", void 0);\n __decorate([\n Property(12)\n ], Port.prototype, \"width\", void 0);\n __decorate([\n Property(12)\n ], Port.prototype, \"height\", void 0);\n __decorate([\n Complex({}, ShapeStyle)\n ], Port.prototype, \"style\", void 0);\n __decorate([\n Property('Square')\n ], Port.prototype, \"shape\", void 0);\n __decorate([\n Property(PortVisibility.Connect)\n ], Port.prototype, \"visibility\", void 0);\n __decorate([\n Property('')\n ], Port.prototype, \"pathData\", void 0);\n __decorate([\n Property(PortConstraints.None)\n ], Port.prototype, \"constraints\", void 0);\n __decorate([\n Property()\n ], Port.prototype, \"addInfo\", void 0);\n return Port;\n}(ChildProperty));\nexport { Port };\n/**\n * Defines the behavior of a port, that sticks to a point\n */\nvar PointPort = /** @class */ (function (_super) {\n __extends(PointPort, _super);\n // tslint:disable-next-line:no-any\n function PointPort(parent, propName, defaultValue, isArray) {\n return _super.call(this, parent, propName, defaultValue, isArray) || this;\n }\n __decorate([\n Complex({ x: 0.5, y: 0.5 }, Point)\n ], PointPort.prototype, \"offset\", void 0);\n return PointPort;\n}(Port));\nexport { PointPort };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, Complex, ChildProperty } from '@syncfusion/ej2-base';\nimport { TextStyle, Margin } from '../core/appearance';\nimport { Point } from '../primitives/point';\nimport { AnnotationConstraints } from '../enum/enum';\n/**\n * Defines the hyperlink for the annotation\n */\nvar Hyperlink = /** @class */ (function (_super) {\n __extends(Hyperlink, _super);\n function Hyperlink() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('blue')\n ], Hyperlink.prototype, \"color\", void 0);\n __decorate([\n Property('')\n ], Hyperlink.prototype, \"content\", void 0);\n __decorate([\n Property('')\n ], Hyperlink.prototype, \"link\", void 0);\n __decorate([\n Property('None')\n ], Hyperlink.prototype, \"textDecoration\", void 0);\n return Hyperlink;\n}(ChildProperty));\nexport { Hyperlink };\n/**\n * Defines the textual description of nodes/connectors\n */\nvar Annotation = /** @class */ (function (_super) {\n __extends(Annotation, _super);\n function Annotation() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], Annotation.prototype, \"content\", void 0);\n __decorate([\n Property(true)\n ], Annotation.prototype, \"visibility\", void 0);\n __decorate([\n Property(AnnotationConstraints.InheritReadOnly)\n ], Annotation.prototype, \"constraints\", void 0);\n __decorate([\n Complex(undefined, Hyperlink)\n ], Annotation.prototype, \"hyperlink\", void 0);\n __decorate([\n Property('')\n ], Annotation.prototype, \"id\", void 0);\n __decorate([\n Property()\n ], Annotation.prototype, \"width\", void 0);\n __decorate([\n Property()\n ], Annotation.prototype, \"height\", void 0);\n __decorate([\n Complex({ strokeWidth: 0, strokeColor: 'transparent', fill: 'transparent' }, TextStyle)\n ], Annotation.prototype, \"style\", void 0);\n __decorate([\n Property('Center')\n ], Annotation.prototype, \"horizontalAlignment\", void 0);\n __decorate([\n Property('Center')\n ], Annotation.prototype, \"verticalAlignment\", void 0);\n __decorate([\n Complex({}, Margin)\n ], Annotation.prototype, \"margin\", void 0);\n __decorate([\n Property('Shape')\n ], Annotation.prototype, \"type\", void 0);\n __decorate([\n Property()\n ], Annotation.prototype, \"addInfo\", void 0);\n return Annotation;\n}(ChildProperty));\nexport { Annotation };\n/**\n * Defines the textual description of nodes/connectors with respect to bounds\n */\nvar ShapeAnnotation = /** @class */ (function (_super) {\n __extends(ShapeAnnotation, _super);\n // tslint:disable-next-line:no-any\n function ShapeAnnotation(parent, propName, defaultValue, isArray) {\n return _super.call(this, parent, propName, defaultValue, isArray) || this;\n }\n __decorate([\n Complex({ x: 0.5, y: 0.5 }, Point)\n ], ShapeAnnotation.prototype, \"offset\", void 0);\n return ShapeAnnotation;\n}(Annotation));\nexport { ShapeAnnotation };\n/**\n * Defines the connector annotation\n */\nvar PathAnnotation = /** @class */ (function (_super) {\n __extends(PathAnnotation, _super);\n // tslint:disable-next-line:no-any\n function PathAnnotation(parent, propName, defaultValue, isArray) {\n return _super.call(this, parent, propName, defaultValue, isArray) || this;\n }\n __decorate([\n Property(0.5)\n ], PathAnnotation.prototype, \"offset\", void 0);\n __decorate([\n Complex({ x: 0, y: 0 }, Point)\n ], PathAnnotation.prototype, \"displacement\", void 0);\n __decorate([\n Property('Center')\n ], PathAnnotation.prototype, \"alignment\", void 0);\n return PathAnnotation;\n}(Annotation));\nexport { PathAnnotation };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, Complex, ChildProperty } from '@syncfusion/ej2-base';\nimport { Margin } from '../core/appearance';\nimport { Point } from '../primitives/point';\n/**\n * Defines the behavior of default IconShape\n */\nvar IconShape = /** @class */ (function (_super) {\n __extends(IconShape, _super);\n function IconShape() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('None')\n ], IconShape.prototype, \"shape\", void 0);\n __decorate([\n Property('white')\n ], IconShape.prototype, \"fill\", void 0);\n __decorate([\n Property('Auto')\n ], IconShape.prototype, \"horizontalAlignment\", void 0);\n __decorate([\n Property('Auto')\n ], IconShape.prototype, \"verticalAlignment\", void 0);\n __decorate([\n Property(10)\n ], IconShape.prototype, \"width\", void 0);\n __decorate([\n Property(10)\n ], IconShape.prototype, \"height\", void 0);\n __decorate([\n Complex({ x: 0.5, y: 1 }, Point)\n ], IconShape.prototype, \"offset\", void 0);\n __decorate([\n Property('#1a1a1a')\n ], IconShape.prototype, \"borderColor\", void 0);\n __decorate([\n Property(1)\n ], IconShape.prototype, \"borderWidth\", void 0);\n __decorate([\n Complex({}, Margin)\n ], IconShape.prototype, \"margin\", void 0);\n __decorate([\n Property('')\n ], IconShape.prototype, \"pathData\", void 0);\n __decorate([\n Property('')\n ], IconShape.prototype, \"content\", void 0);\n __decorate([\n Property(0)\n ], IconShape.prototype, \"cornerRadius\", void 0);\n __decorate([\n Complex({ left: 2, right: 2, top: 2, bottom: 2 }, Margin)\n ], IconShape.prototype, \"padding\", void 0);\n return IconShape;\n}(ChildProperty));\nexport { IconShape };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, Complex, ChildProperty, Collection } from '@syncfusion/ej2-base';\nimport { Margin } from '../core/appearance';\nimport { IconShape } from './icon';\nimport { DiagramTooltip } from './tooltip';\nimport { PointPort } from './port';\n/**\n * Defines the common behavior of nodes, connectors and groups\n */\nvar NodeBase = /** @class */ (function (_super) {\n __extends(NodeBase, _super);\n function NodeBase() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], NodeBase.prototype, \"id\", void 0);\n __decorate([\n Property(-1)\n ], NodeBase.prototype, \"zIndex\", void 0);\n __decorate([\n Complex({}, Margin)\n ], NodeBase.prototype, \"margin\", void 0);\n __decorate([\n Property(true)\n ], NodeBase.prototype, \"visible\", void 0);\n __decorate([\n Collection([], PointPort)\n ], NodeBase.prototype, \"ports\", void 0);\n __decorate([\n Property(true)\n ], NodeBase.prototype, \"isExpanded\", void 0);\n __decorate([\n Complex({}, DiagramTooltip)\n ], NodeBase.prototype, \"tooltip\", void 0);\n __decorate([\n Complex({}, IconShape)\n ], NodeBase.prototype, \"expandIcon\", void 0);\n __decorate([\n Complex({}, IconShape)\n ], NodeBase.prototype, \"collapseIcon\", void 0);\n __decorate([\n Property(false)\n ], NodeBase.prototype, \"excludeFromLayout\", void 0);\n __decorate([\n Property()\n ], NodeBase.prototype, \"addInfo\", void 0);\n return NodeBase;\n}(ChildProperty));\nexport { NodeBase };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty, Collection, Complex } from '@syncfusion/ej2-base';\nimport { Container } from '../core/containers/container';\nimport { Node } from '../objects/node';\nimport { Connector } from '../objects/connector';\nimport { Point } from '../primitives/point';\nimport { Size } from '../primitives/size';\nimport { SelectorConstraints } from '../enum/enum';\nimport { Margin } from '../core/appearance';\n/**\n * Defines the behavior of selector\n */\nvar UserHandle = /** @class */ (function (_super) {\n __extends(UserHandle, _super);\n function UserHandle() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], UserHandle.prototype, \"name\", void 0);\n __decorate([\n Property('')\n ], UserHandle.prototype, \"pathData\", void 0);\n __decorate([\n Property('#000000')\n ], UserHandle.prototype, \"backgroundColor\", void 0);\n __decorate([\n Property('top')\n ], UserHandle.prototype, \"side\", void 0);\n __decorate([\n Property('')\n ], UserHandle.prototype, \"borderColor\", void 0);\n __decorate([\n Property(0.5)\n ], UserHandle.prototype, \"borderWidth\", void 0);\n __decorate([\n Property(25)\n ], UserHandle.prototype, \"size\", void 0);\n __decorate([\n Property('white')\n ], UserHandle.prototype, \"pathColor\", void 0);\n __decorate([\n Property(10)\n ], UserHandle.prototype, \"displacement\", void 0);\n __decorate([\n Property(true)\n ], UserHandle.prototype, \"visible\", void 0);\n __decorate([\n Property(0)\n ], UserHandle.prototype, \"offset\", void 0);\n __decorate([\n Complex({}, Margin)\n ], UserHandle.prototype, \"margin\", void 0);\n __decorate([\n Property('Center')\n ], UserHandle.prototype, \"horizontalAlignment\", void 0);\n __decorate([\n Property('Center')\n ], UserHandle.prototype, \"verticalAlignment\", void 0);\n return UserHandle;\n}(ChildProperty));\nexport { UserHandle };\n/**\n * Defines the behavior of the selected objects\n */\nvar Selector = /** @class */ (function (_super) {\n __extends(Selector, _super);\n function Selector() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Initializes the UI of the container\n */\n Selector.prototype.init = function (diagram) {\n var container = new Container();\n container.measureChildren = false;\n var consize = new Size();\n container.children = [];\n if (this.nodes || this.connectors) {\n for (var i = 0; i < this.nodes.length; i++) {\n var node = diagram.nameTable[this.nodes[i].id];\n var wrapper = node.wrapper;\n // this.width = wrapper.actualSize.width; \n // this.height = wrapper.actualSize.height;\n // this.rotateAngle = wrapper.rotateAngle;\n // this.offsetX = wrapper.offsetX;\n // this.offsetY = wrapper.offsetY;\n container.children.push(wrapper);\n }\n for (var j = 0; j < this.connectors.length; j++) {\n var connector = diagram.nameTable[this.connectors[j].id];\n var wrapper = connector.wrapper;\n // this.width = wrapper.actualSize.width; this.height = wrapper.actualSize.height;\n // this.rotateAngle = wrapper.rotateAngle; this.offsetX = wrapper.offsetX;\n // this.offsetY = wrapper.offsetY;\n container.children.push(wrapper);\n }\n }\n this.wrapper = container;\n return container;\n };\n __decorate([\n Property(null)\n ], Selector.prototype, \"wrapper\", void 0);\n __decorate([\n Collection([], Node)\n ], Selector.prototype, \"nodes\", void 0);\n __decorate([\n Collection([], Connector)\n ], Selector.prototype, \"connectors\", void 0);\n __decorate([\n Property()\n ], Selector.prototype, \"width\", void 0);\n __decorate([\n Property()\n ], Selector.prototype, \"height\", void 0);\n __decorate([\n Property(0)\n ], Selector.prototype, \"rotateAngle\", void 0);\n __decorate([\n Property(0)\n ], Selector.prototype, \"offsetX\", void 0);\n __decorate([\n Property(0)\n ], Selector.prototype, \"offsetY\", void 0);\n __decorate([\n Complex({ x: 0.5, y: 0.5 }, Point)\n ], Selector.prototype, \"pivot\", void 0);\n __decorate([\n Property('CompleteIntersect')\n ], Selector.prototype, \"rubberBandSelectionMode\", void 0);\n __decorate([\n Collection([], UserHandle)\n ], Selector.prototype, \"userHandles\", void 0);\n __decorate([\n Property(SelectorConstraints.All)\n ], Selector.prototype, \"constraints\", void 0);\n return Selector;\n}(ChildProperty));\nexport { Selector };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { DiagramElement } from './diagram-element';\nimport { getContent } from '../../utility/dom-util';\n/**\n * HTMLElement defines the basic html elements\n */\nvar DiagramHtmlElement = /** @class */ (function (_super) {\n __extends(DiagramHtmlElement, _super);\n /**\n * set the id for each element\n */\n function DiagramHtmlElement() {\n var _this = _super.call(this) || this;\n _this.data = '';\n return _this;\n }\n Object.defineProperty(DiagramHtmlElement.prototype, \"content\", {\n /**\n * Gets or sets the geometry of the html element\n */\n get: function () {\n return this.data;\n },\n set: function (value) {\n this.data = value;\n this.template = getContent(this, true);\n this.isDirt = true;\n },\n enumerable: true,\n configurable: true\n });\n return DiagramHtmlElement;\n}(DiagramElement));\nexport { DiagramHtmlElement };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n///
\nimport { Property, Complex, Collection, ChildProperty, ComplexFactory } from '@syncfusion/ej2-base';\nimport { Margin, TextStyle, Shadow } from '../core/appearance';\nimport { Point } from '../primitives/point';\nimport { Size } from '../primitives/size';\nimport { Container } from '../core/containers/container';\nimport { Canvas } from '../core/containers/canvas';\nimport { getBasicShape } from './dictionary/basic-shapes';\nimport { DiagramElement } from '../core/elements/diagram-element';\nimport { PathElement } from '../core/elements/path-element';\nimport { TextElement } from '../core/elements/text-element';\nimport { ImageElement } from '../core/elements/image-element';\nimport { DiagramNativeElement } from '../core/elements/native-element';\nimport { PointPort } from './port';\nimport { ShapeAnnotation } from './annotation';\nimport { getPortShape, getIconShape } from './dictionary/common';\nimport { getFlowShape } from './dictionary/flow-shapes';\nimport { NodeConstraints } from '../enum/enum';\nimport { checkPortRestriction } from './../utility/diagram-util';\nimport { randomId, getFunction } from './../utility/base-util';\nimport { NodeBase } from './node-base';\nimport { canShadow } from './../utility/constraints-util';\nimport { PortVisibility } from '../enum/enum';\nimport { measurePath } from './../utility/dom-util';\nimport { getPolygonPath } from './../utility/path-util';\nimport { DiagramHtmlElement } from '../core/elements/html-element';\nvar getShapeType = function (obj) {\n switch (obj.type) {\n case 'Basic':\n return BasicShape;\n case 'Flow':\n return FlowShape;\n case 'Path':\n return Path;\n case 'Image':\n return Image;\n case 'Text':\n return Text;\n case 'Bpmn':\n return BpmnShape;\n case 'Native':\n return Native;\n case 'HTML':\n return Html;\n default:\n return BasicShape;\n }\n};\n/**\n * Defines the behavior of default shape\n */\nvar Shape = /** @class */ (function (_super) {\n __extends(Shape, _super);\n function Shape() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Basic')\n ], Shape.prototype, \"type\", void 0);\n return Shape;\n}(ChildProperty));\nexport { Shape };\n/**\n * Defines the behavior of path shape\n */\nvar Path = /** @class */ (function (_super) {\n __extends(Path, _super);\n function Path() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Path')\n ], Path.prototype, \"type\", void 0);\n __decorate([\n Property('')\n ], Path.prototype, \"data\", void 0);\n return Path;\n}(Shape));\nexport { Path };\n/**\n * Defines the behavior of Native shape\n */\nvar Native = /** @class */ (function (_super) {\n __extends(Native, _super);\n function Native() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Native')\n ], Native.prototype, \"type\", void 0);\n __decorate([\n Property('')\n ], Native.prototype, \"content\", void 0);\n __decorate([\n Property('Stretch')\n ], Native.prototype, \"scale\", void 0);\n return Native;\n}(Shape));\nexport { Native };\n/**\n * Defines the behavior of html shape\n */\nvar Html = /** @class */ (function (_super) {\n __extends(Html, _super);\n function Html() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('HTML')\n ], Html.prototype, \"type\", void 0);\n __decorate([\n Property('')\n ], Html.prototype, \"content\", void 0);\n return Html;\n}(Shape));\nexport { Html };\n/**\n * Defines the behavior of image shape\n */\nvar Image = /** @class */ (function (_super) {\n __extends(Image, _super);\n function Image() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Image')\n ], Image.prototype, \"type\", void 0);\n __decorate([\n Property('')\n ], Image.prototype, \"source\", void 0);\n __decorate([\n Property('')\n ], Image.prototype, \"scale\", void 0);\n __decorate([\n Property('None')\n ], Image.prototype, \"align\", void 0);\n return Image;\n}(Shape));\nexport { Image };\n/**\n * Defines the behavior of the text shape\n */\nvar Text = /** @class */ (function (_super) {\n __extends(Text, _super);\n function Text() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Text')\n ], Text.prototype, \"type\", void 0);\n __decorate([\n Property('')\n ], Text.prototype, \"content\", void 0);\n __decorate([\n Complex({}, Margin)\n ], Text.prototype, \"margin\", void 0);\n return Text;\n}(Shape));\nexport { Text };\n/**\n * Defines the behavior of the basic shape\n */\nvar BasicShape = /** @class */ (function (_super) {\n __extends(BasicShape, _super);\n function BasicShape() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Basic')\n ], BasicShape.prototype, \"type\", void 0);\n __decorate([\n Property('Rectangle')\n ], BasicShape.prototype, \"shape\", void 0);\n __decorate([\n Property(0)\n ], BasicShape.prototype, \"cornerRadius\", void 0);\n __decorate([\n Collection([], Point)\n ], BasicShape.prototype, \"points\", void 0);\n return BasicShape;\n}(Shape));\nexport { BasicShape };\n/**\n * Defines the behavior of the flow shape\n */\nvar FlowShape = /** @class */ (function (_super) {\n __extends(FlowShape, _super);\n function FlowShape() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Flow')\n ], FlowShape.prototype, \"type\", void 0);\n __decorate([\n Property('Terminator')\n ], FlowShape.prototype, \"shape\", void 0);\n return FlowShape;\n}(Shape));\nexport { FlowShape };\n/**\n * Defines the behavior of the bpmn gateway shape\n */\nvar BpmnGateway = /** @class */ (function (_super) {\n __extends(BpmnGateway, _super);\n function BpmnGateway() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('None')\n ], BpmnGateway.prototype, \"type\", void 0);\n return BpmnGateway;\n}(ChildProperty));\nexport { BpmnGateway };\n/**\n * Defines the behavior of the bpmn data object\n */\nvar BpmnDataObject = /** @class */ (function (_super) {\n __extends(BpmnDataObject, _super);\n function BpmnDataObject() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('None')\n ], BpmnDataObject.prototype, \"type\", void 0);\n __decorate([\n Property(false)\n ], BpmnDataObject.prototype, \"collection\", void 0);\n return BpmnDataObject;\n}(ChildProperty));\nexport { BpmnDataObject };\n/**\n * Defines the behavior of the bpmn task shape\n */\nvar BpmnTask = /** @class */ (function (_super) {\n __extends(BpmnTask, _super);\n function BpmnTask() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('None')\n ], BpmnTask.prototype, \"type\", void 0);\n __decorate([\n Property('None')\n ], BpmnTask.prototype, \"loop\", void 0);\n __decorate([\n Property(false)\n ], BpmnTask.prototype, \"call\", void 0);\n __decorate([\n Property(false)\n ], BpmnTask.prototype, \"compensation\", void 0);\n return BpmnTask;\n}(ChildProperty));\nexport { BpmnTask };\n/**\n * Defines the behavior of the bpmn Event shape\n */\nvar BpmnEvent = /** @class */ (function (_super) {\n __extends(BpmnEvent, _super);\n function BpmnEvent() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Start')\n ], BpmnEvent.prototype, \"event\", void 0);\n __decorate([\n Property('None')\n ], BpmnEvent.prototype, \"trigger\", void 0);\n return BpmnEvent;\n}(ChildProperty));\nexport { BpmnEvent };\n/**\n * Defines the behavior of the bpmn sub event\n */\nvar BpmnSubEvent = /** @class */ (function (_super) {\n __extends(BpmnSubEvent, _super);\n function BpmnSubEvent() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('None')\n ], BpmnSubEvent.prototype, \"trigger\", void 0);\n __decorate([\n Property('Start')\n ], BpmnSubEvent.prototype, \"event\", void 0);\n __decorate([\n Property('')\n ], BpmnSubEvent.prototype, \"id\", void 0);\n __decorate([\n Complex({}, Point)\n ], BpmnSubEvent.prototype, \"offset\", void 0);\n __decorate([\n Collection([], ShapeAnnotation)\n ], BpmnSubEvent.prototype, \"annotations\", void 0);\n __decorate([\n Collection([], PointPort)\n ], BpmnSubEvent.prototype, \"ports\", void 0);\n __decorate([\n Property()\n ], BpmnSubEvent.prototype, \"width\", void 0);\n __decorate([\n Property()\n ], BpmnSubEvent.prototype, \"height\", void 0);\n __decorate([\n Complex({}, Margin)\n ], BpmnSubEvent.prototype, \"margin\", void 0);\n __decorate([\n Property('Center')\n ], BpmnSubEvent.prototype, \"horizontalAlignment\", void 0);\n __decorate([\n Property('Center')\n ], BpmnSubEvent.prototype, \"verticalAlignment\", void 0);\n __decorate([\n Property(true)\n ], BpmnSubEvent.prototype, \"visible\", void 0);\n return BpmnSubEvent;\n}(ChildProperty));\nexport { BpmnSubEvent };\nvar BpmnTransactionSubProcess = /** @class */ (function (_super) {\n __extends(BpmnTransactionSubProcess, _super);\n function BpmnTransactionSubProcess() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Complex({ id: 'success', event: 'End', offset: { x: 1, y: 0.5 } }, BpmnSubEvent)\n ], BpmnTransactionSubProcess.prototype, \"success\", void 0);\n __decorate([\n Complex({ id: 'failure', event: 'Intermediate', trigger: 'Error', offset: { x: 0.25, y: 1 } }, BpmnSubEvent)\n ], BpmnTransactionSubProcess.prototype, \"failure\", void 0);\n __decorate([\n Complex({ id: 'cancel', event: 'Intermediate', trigger: 'Cancel', offset: { x: 0.75, y: 1 } }, BpmnSubEvent)\n ], BpmnTransactionSubProcess.prototype, \"cancel\", void 0);\n return BpmnTransactionSubProcess;\n}(ChildProperty));\nexport { BpmnTransactionSubProcess };\n/**\n * Defines the behavior of the BPMNSubProcess\n */\nvar BpmnSubProcess = /** @class */ (function (_super) {\n __extends(BpmnSubProcess, _super);\n function BpmnSubProcess() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('None')\n ], BpmnSubProcess.prototype, \"type\", void 0);\n __decorate([\n Property(false)\n ], BpmnSubProcess.prototype, \"adhoc\", void 0);\n __decorate([\n Property('Default')\n ], BpmnSubProcess.prototype, \"boundary\", void 0);\n __decorate([\n Property(false)\n ], BpmnSubProcess.prototype, \"compensation\", void 0);\n __decorate([\n Property('None')\n ], BpmnSubProcess.prototype, \"loop\", void 0);\n __decorate([\n Property(true)\n ], BpmnSubProcess.prototype, \"collapsed\", void 0);\n __decorate([\n Collection([], BpmnSubEvent)\n ], BpmnSubProcess.prototype, \"events\", void 0);\n __decorate([\n Complex({}, BpmnTransactionSubProcess)\n ], BpmnSubProcess.prototype, \"transaction\", void 0);\n __decorate([\n Property(undefined)\n ], BpmnSubProcess.prototype, \"processes\", void 0);\n return BpmnSubProcess;\n}(ChildProperty));\nexport { BpmnSubProcess };\n/**\n * Defines the behavior of the bpmn activity shape\n */\nvar BpmnActivity = /** @class */ (function (_super) {\n __extends(BpmnActivity, _super);\n function BpmnActivity() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Task')\n ], BpmnActivity.prototype, \"activity\", void 0);\n __decorate([\n Complex({}, BpmnTask)\n ], BpmnActivity.prototype, \"task\", void 0);\n __decorate([\n Complex({}, BpmnSubProcess)\n ], BpmnActivity.prototype, \"subProcess\", void 0);\n return BpmnActivity;\n}(ChildProperty));\nexport { BpmnActivity };\n/**\n * Defines the behavior of the bpmn annotation\n */\nvar BpmnAnnotation = /** @class */ (function (_super) {\n __extends(BpmnAnnotation, _super);\n // tslint:disable-next-line:no-any\n function BpmnAnnotation(parent, propName, defaultValue, isArray) {\n return _super.call(this, parent, propName, defaultValue, isArray) || this;\n }\n __decorate([\n Property('')\n ], BpmnAnnotation.prototype, \"text\", void 0);\n __decorate([\n Property('')\n ], BpmnAnnotation.prototype, \"id\", void 0);\n __decorate([\n Property()\n ], BpmnAnnotation.prototype, \"angle\", void 0);\n __decorate([\n Property()\n ], BpmnAnnotation.prototype, \"height\", void 0);\n __decorate([\n Property()\n ], BpmnAnnotation.prototype, \"width\", void 0);\n __decorate([\n Property()\n ], BpmnAnnotation.prototype, \"length\", void 0);\n return BpmnAnnotation;\n}(ChildProperty));\nexport { BpmnAnnotation };\n/**\n * Defines the behavior of the bpmn shape\n */\nvar BpmnShape = /** @class */ (function (_super) {\n __extends(BpmnShape, _super);\n function BpmnShape() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Bpmn')\n ], BpmnShape.prototype, \"type\", void 0);\n __decorate([\n Property('Event')\n ], BpmnShape.prototype, \"shape\", void 0);\n __decorate([\n Complex({}, BpmnEvent)\n ], BpmnShape.prototype, \"event\", void 0);\n __decorate([\n Complex({}, BpmnGateway)\n ], BpmnShape.prototype, \"gateway\", void 0);\n __decorate([\n Complex({}, BpmnDataObject)\n ], BpmnShape.prototype, \"dataObject\", void 0);\n __decorate([\n Complex({}, BpmnActivity)\n ], BpmnShape.prototype, \"activity\", void 0);\n __decorate([\n Collection([], BpmnAnnotation)\n ], BpmnShape.prototype, \"annotations\", void 0);\n return BpmnShape;\n}(Shape));\nexport { BpmnShape };\n/**\n * Defines the behavior of nodes\n */\nvar Node = /** @class */ (function (_super) {\n __extends(Node, _super);\n // tslint:disable-next-line:no-any\n function Node(parent, propName, defaultValue, isArray) {\n var _this = _super.call(this, parent, propName, defaultValue, isArray) || this;\n /** @private */\n _this.parentId = '';\n /** @private */\n _this.processId = '';\n /** @private */\n _this.outEdges = [];\n /** @private */\n _this.inEdges = [];\n return _this;\n }\n Object.defineProperty(Node.prototype, \"actualSize\", {\n /** @private */\n get: function () {\n if (this.wrapper !== null) {\n return this.wrapper.actualSize;\n }\n else {\n return new Size(this.width || 0, this.height || 0);\n }\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Allows to initialize the UI of a node\n */\n /** @private */\n /* tslint:disable */\n Node.prototype.init = function (diagram) {\n var content = new DiagramElement();\n var textStyle;\n var changedProperties = 'changedProperties';\n var oldProperties = 'oldProperties';\n this.shape[changedProperties] = {};\n this.shape[oldProperties] = {};\n switch (this.shape.type) {\n case 'Path':\n var pathContent = new PathElement();\n pathContent.data = this.shape.data;\n content = pathContent;\n break;\n case 'Image':\n var imageContent = new ImageElement();\n imageContent.source = this.shape.source;\n imageContent.imageAlign = this.shape.align;\n imageContent.imageScale = this.shape.scale;\n content = imageContent;\n break;\n case 'Text':\n var textContent = new TextElement();\n textContent.content = this.shape.content;\n content = textContent;\n textStyle = this.style;\n content.style = textStyle;\n break;\n case 'Basic':\n if (this.shape.shape === 'Rectangle') {\n var basicshape = new DiagramElement();\n content = basicshape;\n content.cornerRadius = this.shape.cornerRadius;\n }\n else if (this.shape.shape === 'Polygon') {\n var path = new PathElement();\n path.data = getPolygonPath(this.shape.points);\n content = path;\n }\n else {\n var basicshape = new PathElement();\n var basicshapedata = getBasicShape(this.shape.shape);\n basicshape.data = basicshapedata;\n content = basicshape;\n }\n break;\n case 'Flow':\n var flowshape = new PathElement();\n var flowshapedata = getFlowShape(this.shape.shape);\n flowshape.data = flowshapedata;\n content = flowshape;\n break;\n case 'Bpmn':\n if (diagram.bpmnModule) {\n content = diagram.bpmnModule.initBPMNContent(content, this, diagram);\n var subProcess = this.shape.activity.subProcess;\n if (subProcess.processes && subProcess.processes.length) {\n var children = this.shape.activity.subProcess.processes;\n for (var _i = 0, children_1 = children; _i < children_1.length; _i++) {\n var i = children_1[_i];\n if (diagram.nameTable[i] && (!diagram.nameTable[i].processId || diagram.nameTable[i].processId === this.id)) {\n diagram.nameTable[i].processId = this.id;\n if (subProcess.collapsed) {\n diagram.updateElementVisibility(diagram.nameTable[i].wrapper, diagram.nameTable[i], !subProcess.collapsed);\n }\n content.children.push(diagram.nameTable[i].wrapper);\n }\n }\n }\n }\n break;\n case 'Native':\n var nativeContent = new DiagramNativeElement();\n nativeContent.content = this.shape.content;\n nativeContent.scale = this.shape.scale;\n content = nativeContent;\n break;\n case 'HTML':\n var htmlContent = new DiagramHtmlElement();\n htmlContent.content = this.shape.content;\n content = htmlContent;\n break;\n }\n content.id = this.id + '_content';\n content.relativeMode = 'Object';\n if (this.width !== undefined) {\n content.width = this.width;\n }\n content.horizontalAlignment = 'Stretch';\n if (this.height !== undefined) {\n content.height = this.height;\n }\n if (this.minHeight !== undefined) {\n content.minHeight = this.minHeight;\n }\n if (this.maxHeight !== undefined) {\n content.maxHeight = this.maxHeight;\n }\n if (this.minWidth !== undefined) {\n content.minWidth = this.minWidth;\n }\n if (this.maxWidth !== undefined) {\n content.maxWidth = this.maxWidth;\n }\n if (this.shape.shape === 'Rectangle' && !this.shape.cornerRadius) {\n content.isRectElement = true;\n }\n content.verticalAlignment = 'Stretch';\n if (this.shape instanceof Text) {\n content.margin = this.shape.margin;\n }\n if (canShadow(this)) {\n if ((this.constraints & NodeConstraints.Shadow) !== 0) {\n content.shadow = this.shadow;\n }\n }\n if (this.shape.type !== 'Bpmn' || this.shape.shape === 'Message' ||\n this.shape.shape === 'DataSource') {\n if (this.shape.type !== 'Text') {\n content.style = this.style;\n }\n }\n return content;\n };\n /* tslint:enable */\n /** @private */\n Node.prototype.initContainer = function () {\n if (!this.id) {\n this.id = randomId();\n }\n // Creates canvas element\n var canvas = this.children ? new Container() : new Canvas();\n canvas.id = this.id;\n canvas.offsetX = this.offsetX;\n canvas.offsetY = this.offsetY;\n canvas.visible = this.visible;\n canvas.style.fill = this.backgroundColor;\n canvas.style.strokeColor = this.borderColor;\n canvas.style.strokeWidth = this.borderWidth;\n canvas.rotateAngle = this.rotateAngle;\n canvas.minHeight = this.minHeight;\n canvas.minWidth = this.minWidth;\n canvas.maxHeight = this.maxHeight;\n canvas.maxWidth = this.maxWidth;\n canvas.pivot = this.pivot;\n canvas.margin = this.margin;\n this.wrapper = canvas;\n return canvas;\n };\n /** @private */\n Node.prototype.initPorts = function (accessibilityContent, container) {\n var canvas = this.wrapper;\n var port;\n for (var i = 0; this.ports !== undefined, i < this.ports.length; i++) {\n port = this.initPortWrapper(this.ports[i]);\n // tslint:disable-next-line:no-any\n var wrapperContent = void 0;\n var contentAccessibility = getFunction(accessibilityContent);\n if (contentAccessibility) {\n wrapperContent = contentAccessibility(port, this);\n }\n port.description = wrapperContent ? wrapperContent : port.id;\n container.children.push(port);\n }\n };\n Node.prototype.getIconOffet = function (layout, icon) {\n var x;\n var y;\n if (layout.orientation === 'BottomToTop') {\n x = icon.offset.x;\n y = 1 - icon.offset.y;\n }\n else if (layout.orientation === 'LeftToRight') {\n x = icon.offset.y;\n y = icon.offset.x;\n }\n else if (layout.orientation === 'RightToLeft') {\n x = 1 - icon.offset.y;\n y = icon.offset.x;\n }\n else {\n x = icon.offset.x;\n y = icon.offset.y;\n }\n return { x: x, y: y };\n };\n /** @private */\n Node.prototype.initIcons = function (accessibilityContent, layout, container) {\n var canvas = this.wrapper;\n var offset;\n var icon = this.isExpanded ? this.expandIcon : this.collapseIcon;\n if (icon.shape !== 'None') {\n var iconContainer = new Canvas();\n iconContainer.float = true;\n var children = [];\n iconContainer.id = this.id + '_icon_content';\n iconContainer.children = children;\n iconContainer.height = icon.height;\n iconContainer.width = icon.width;\n iconContainer.style.strokeColor = 'transparent';\n iconContainer.margin = icon.margin;\n iconContainer.horizontalAlignment = 'Center';\n iconContainer.verticalAlignment = 'Center';\n iconContainer.visible = this.visible;\n offset = this.getIconOffet(layout, icon);\n iconContainer.setOffsetWithRespectToBounds(offset.x, offset.y, 'Fraction');\n iconContainer.relativeMode = 'Point';\n this.initIconSymbol(icon, iconContainer, accessibilityContent);\n // tslint:disable-next-line:no-any\n var wrapperContent = void 0;\n var contentAccessibility = getFunction(accessibilityContent);\n if (contentAccessibility) {\n wrapperContent = contentAccessibility(icon, this);\n }\n iconContainer.description = wrapperContent ? wrapperContent : iconContainer.id;\n container.children.push(iconContainer);\n }\n };\n /** @private */\n Node.prototype.initAnnotations = function (accessibilityContent, container) {\n var annotation;\n for (var i = 0; this.annotations !== undefined, i < this.annotations.length; i++) {\n annotation = this.initAnnotationWrapper(this.annotations[i]);\n // tslint:disable-next-line:no-any\n var wrapperContent = void 0;\n var contentAccessibility = getFunction(accessibilityContent);\n if (contentAccessibility) {\n wrapperContent = contentAccessibility(annotation, this);\n }\n annotation.description = wrapperContent ? wrapperContent : annotation.id;\n container.children.push(annotation);\n }\n };\n /** @private */\n Node.prototype.initPortWrapper = function (ports) {\n ports.id = ports.id || randomId();\n // Creates port element\n var portContent = new PathElement();\n portContent.height = ports.height;\n portContent.width = ports.width;\n var pathdata = (ports.shape === 'Custom') ? ports.pathData : getPortShape(ports.shape);\n portContent.id = this.id + '_' + (ports.id);\n portContent.margin = ports.margin;\n portContent.data = pathdata;\n var style = ports.style;\n portContent.style = {\n fill: style.fill, strokeColor: style.strokeColor, gradient: null,\n opacity: style.opacity, strokeDashArray: style.strokeDashArray, strokeWidth: style.strokeWidth\n };\n portContent.horizontalAlignment = ports.horizontalAlignment;\n portContent.verticalAlignment = ports.verticalAlignment;\n portContent.setOffsetWithRespectToBounds(ports.offset.x, ports.offset.y, 'Fraction');\n if (this.width !== undefined || this.height !== undefined) {\n portContent.float = true;\n }\n portContent.relativeMode = 'Point';\n portContent.visible = checkPortRestriction(ports, PortVisibility.Visible) &&\n !checkPortRestriction(ports, PortVisibility.Hover) && !checkPortRestriction(ports, PortVisibility.Connect) ? true : false;\n return portContent;\n };\n /** @private */\n Node.prototype.initAnnotationWrapper = function (annotation) {\n annotation.id = annotation.id || randomId();\n var label = annotation;\n var annotationcontent = new TextElement();\n annotationcontent.constraints = annotation.constraints;\n annotationcontent.height = annotation.height;\n annotationcontent.width = annotation.width;\n annotationcontent.visible = annotation.visibility;\n annotationcontent.id = this.id + '_' + annotation.id;\n var style = annotation.style;\n var link = annotation.hyperlink.link ? annotation.hyperlink : undefined;\n annotationcontent.style = {\n fill: style.fill, strokeColor: style.strokeColor, strokeWidth: style.strokeWidth,\n bold: style.bold, textWrapping: style.textWrapping,\n color: link ? link.color || annotationcontent.hyperlink.color : style.color, whiteSpace: style.whiteSpace,\n fontFamily: style.fontFamily, fontSize: style.fontSize, italic: style.italic, gradient: null, opacity: style.opacity,\n strokeDashArray: style.strokeDashArray, textAlign: style.textAlign, textOverflow: annotation.style.textOverflow,\n textDecoration: link ? link.textDecoration || annotationcontent.hyperlink.textDecoration : style.textDecoration,\n };\n annotationcontent.hyperlink.link = annotation.hyperlink.link || undefined;\n annotationcontent.hyperlink.content = annotation.hyperlink.content || undefined;\n annotationcontent.hyperlink.textDecoration = annotation.hyperlink.textDecoration || undefined;\n annotationcontent.content = link ? link.content || annotationcontent.hyperlink.link : annotation.content;\n if (this.width !== undefined) {\n annotationcontent.width = this.width - annotation.margin.left - annotation.margin.right;\n }\n annotationcontent.margin = annotation.margin;\n annotationcontent.horizontalAlignment = annotation.horizontalAlignment;\n annotationcontent.verticalAlignment = annotation.verticalAlignment;\n annotationcontent.setOffsetWithRespectToBounds(label.offset.x, label.offset.y, 'Fraction');\n if (this.width !== undefined || this.height !== undefined) {\n annotationcontent.float = true;\n }\n annotationcontent.relativeMode = 'Point';\n return annotationcontent;\n };\n Node.prototype.initIconContainer = function (options, iconContainer) {\n var rect = new DiagramElement();\n rect.id = iconContainer.id + '_rect';\n rect.height = options.height;\n rect.width = options.width;\n rect.visible = iconContainer.visible;\n rect.margin = options.margin;\n rect.cornerRadius = options.cornerRadius;\n rect.style = {\n fill: options.fill, strokeColor: options.borderColor,\n strokeWidth: options.borderWidth\n };\n rect.setOffsetWithRespectToBounds(0.5, 0.5, 'Fraction');\n rect.horizontalAlignment = 'Center';\n rect.verticalAlignment = 'Center';\n rect.relativeMode = 'Object';\n rect.description = rect.description || 'Click here to expand or collapse';\n return rect;\n };\n Node.prototype.initIconSymbol = function (options, iconContainer, accessibilityContent) {\n var iconContent;\n iconContainer.children.push(this.initIconContainer(options, iconContainer));\n if (options.shape === 'Template') {\n iconContent = new DiagramNativeElement();\n iconContent.content = options.content;\n iconContent.height = 10;\n iconContent.width = 10;\n }\n else {\n iconContent = new PathElement();\n iconContent.data = getIconShape(options);\n var iconContentBounds = measurePath(iconContent.data);\n iconContent.height =\n iconContentBounds.height < 10 ? iconContentBounds.height : 10 - (options.padding.bottom + options.padding.top);\n iconContent.width =\n iconContentBounds.width < 10 ? iconContentBounds.width : 10 - (options.padding.left + options.padding.right);\n }\n iconContent.id = iconContainer.id + '_shape';\n iconContent.horizontalAlignment = 'Center';\n iconContent.verticalAlignment = 'Center';\n iconContent.visible = iconContainer.visible;\n iconContent.visible = iconContainer.visible;\n iconContent.style = {\n fill: 'black', strokeColor: options.borderColor,\n strokeWidth: options.borderWidth\n };\n iconContent.setOffsetWithRespectToBounds(0.5, 0.5, 'Fraction');\n iconContent.relativeMode = 'Object';\n iconContent.description = iconContainer.description || 'Click here to expand or collapse';\n iconContainer.children.push(iconContent);\n };\n __decorate([\n Collection([], ShapeAnnotation)\n ], Node.prototype, \"annotations\", void 0);\n __decorate([\n Property(0)\n ], Node.prototype, \"offsetX\", void 0);\n __decorate([\n Property(0)\n ], Node.prototype, \"offsetY\", void 0);\n __decorate([\n Complex({ x: 0.5, y: 0.5 }, Point)\n ], Node.prototype, \"pivot\", void 0);\n __decorate([\n Property()\n ], Node.prototype, \"width\", void 0);\n __decorate([\n Property()\n ], Node.prototype, \"height\", void 0);\n __decorate([\n Property()\n ], Node.prototype, \"minWidth\", void 0);\n __decorate([\n Property()\n ], Node.prototype, \"minHeight\", void 0);\n __decorate([\n Property()\n ], Node.prototype, \"maxWidth\", void 0);\n __decorate([\n Property()\n ], Node.prototype, \"maxHeight\", void 0);\n __decorate([\n Property(0)\n ], Node.prototype, \"rotateAngle\", void 0);\n __decorate([\n Complex({}, TextStyle)\n ], Node.prototype, \"style\", void 0);\n __decorate([\n Property('transparent')\n ], Node.prototype, \"backgroundColor\", void 0);\n __decorate([\n Property('none')\n ], Node.prototype, \"borderColor\", void 0);\n __decorate([\n Property(0)\n ], Node.prototype, \"borderWidth\", void 0);\n __decorate([\n Property()\n ], Node.prototype, \"data\", void 0);\n __decorate([\n ComplexFactory(getShapeType)\n ], Node.prototype, \"shape\", void 0);\n __decorate([\n Property(null)\n ], Node.prototype, \"wrapper\", void 0);\n __decorate([\n Property(NodeConstraints.Default)\n ], Node.prototype, \"constraints\", void 0);\n __decorate([\n Complex({}, Shadow)\n ], Node.prototype, \"shadow\", void 0);\n __decorate([\n Property()\n ], Node.prototype, \"children\", void 0);\n return Node;\n}(NodeBase));\nexport { Node };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, Property } from '@syncfusion/ej2-base';\nimport { createSvgElement, setAttributeSvg } from '../diagram/utility/dom-util';\nimport { Size } from '../diagram/primitives/size';\nimport { getFunction } from '../diagram/utility/base-util';\n/**\n * Represents the Ruler component that measures the Diagram objects, indicate positions, and align Diagram elements.\n * ```html\n *
Show Ruler
\n * ```\n * ```typescript\n * \n * ```\n */\nvar Ruler = /** @class */ (function (_super) {\n __extends(Ruler, _super);\n /**\n * Constructor for creating the Ruler Component\n */\n function Ruler(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.offset = 0;\n _this.scale = 1;\n return _this;\n }\n /**\n * Initializes the values of private members.\n * @private\n */\n Ruler.prototype.preRender = function () {\n this.unWireEvents();\n this.wireEvents();\n };\n /**\n * Renders the rulers.\n * @private\n */\n Ruler.prototype.render = function () {\n this.updateRulerGeometry();\n };\n /**\n * Core method to return the component name.\n * @private\n */\n Ruler.prototype.getModuleName = function () {\n return 'Ruler';\n };\n /**\n * To destroy the ruler\n * @return {void}\n */\n Ruler.prototype.destroy = function () {\n this.unWireEvents();\n this.notify('destroy', {});\n _super.prototype.destroy.call(this);\n this.element.classList.remove('e-ruler');\n };\n /**\n * Get the properties to be maintained in the persisted state.\n * @return {string}\n */\n Ruler.prototype.getPersistData = function () {\n var keyEntity = ['loaded'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Refreshes the ruler when the Ruler properties are updated\n * @param options\n */\n Ruler.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'length':\n case 'interval':\n case 'segmentWidth':\n case 'tickAlignment':\n case 'markerColor':\n case 'thickness':\n this.updateRuler();\n break;\n }\n }\n };\n Ruler.prototype.updateRulerGeometry = function () {\n this.element.style.textAlign = 'left';\n this.renderRulerSpace();\n this.updateRuler();\n };\n Ruler.prototype.renderRulerSpace = function () {\n var rulerGeometry = this.getRulerGeometry();\n var div = document.getElementById(this.element.id + '_ruler_space');\n if (!div) {\n div = document.createElement('div');\n div.setAttribute('id', this.element.id + '_ruler_space');\n div.style.height = rulerGeometry.height + 'px';\n div.style.width = rulerGeometry.width + 'px';\n div.style.cssFloat = 'left';\n this.element.appendChild(div);\n }\n return div;\n };\n Ruler.prototype.updateRuler = function () {\n var rulerSize = this.getRulerSize();\n var rulerGeometry = this.getRulerGeometry();\n var length = 0;\n var offset = 0;\n var availableSize = new Size();\n var svg = this.getRulerSVG(rulerGeometry);\n if (svg) {\n length = this.length;\n availableSize.height = rulerSize;\n offset = this.offset;\n if (length && length !== Infinity) {\n var unitLength = length + this.segmentWidth;\n var unitOffset = offset;\n this.updateSegments(unitOffset, (unitLength + Math.abs(unitOffset)), svg, rulerSize);\n }\n }\n };\n Ruler.prototype.updateSegments = function (start, end, svg, rulerSize) {\n var run = start;\n var trans = { trans: 0 };\n while (run < end) {\n var rulerSegment = this.getNewSegment(run, svg);\n if (rulerSegment) {\n svg.appendChild(rulerSegment.segment);\n run = this.updateSegment(start, end, rulerSegment, run, trans, rulerSize);\n }\n }\n };\n Ruler.prototype.updateSegment = function (start, end, rulerSegment, run, trans, rulerSize) {\n var segWidth = this.updateSegmentWidth(this.scale);\n if (run === start) {\n this.startValue = Math.floor(start / segWidth) * segWidth / this.scale;\n this.startValue = (this.startValue % 1) !== 0 ? Number((this.startValue).toFixed(1)) : this.startValue;\n rulerSegment.label.textContent = this.startValue.toString();\n this.defStartValue = run = this.startValue * this.scale;\n if (this.orientation === 'Horizontal') {\n this.hRulerOffset = start - run;\n }\n else {\n this.vRulerOffset = start - run;\n }\n }\n else {\n this.startValue = (run / this.scale);\n this.startValue = (this.startValue % 1) !== 0 ? Number((this.startValue).toFixed(1)) : this.startValue;\n rulerSegment.label.textContent = this.startValue.toString();\n }\n this.updateTickLabel(rulerSegment, rulerSize);\n var translate = (this.orientation === 'Horizontal') ? ((trans.trans + 0.5) + ',0.5') : ('0.5,' + (trans.trans + 0.5));\n rulerSegment.segment.setAttribute('transform', 'translate(' + translate + ')');\n trans.trans += segWidth;\n run += segWidth;\n return run;\n };\n Ruler.prototype.updateTickLabel = function (rulerSegment, rulerSize) {\n var bBox = rulerSegment.segment.lastChild.getBBox();\n var isHorizontal = (this.orientation === 'Horizontal') ? true : false;\n var isRightOrBottom = (this.tickAlignment === 'RightOrBottom') ? true : false;\n var x = isHorizontal ? 2 : 0;\n var y = isHorizontal ? (isRightOrBottom ? (rulerSize / 2 + (11 / 2) - (11 / 2)) :\n (rulerSize / 2 + (11 / 2))) : bBox.height;\n var translate = isRightOrBottom ? (-(bBox.width + 2) + ',' + ((rulerSize / 2) - bBox.height)) :\n (-(bBox.width + 2) + ',' + ((rulerSize / 2) - bBox.height / 2));\n var attr = isHorizontal ? { 'x': x, 'y': y } :\n { 'x': x, 'y': y, 'transform': 'rotate(270)' + 'translate(' + translate + ')' };\n setAttributeSvg(rulerSegment.segment.lastChild, attr);\n };\n Ruler.prototype.getNewSegment = function (run, svg) {\n var segment = this.createNewTicks(run, svg);\n var label = this.createTickLabel(svg, segment);\n return { segment: segment, label: label };\n };\n Ruler.prototype.createNewTicks = function (run, svg) {\n var tick;\n var tickInterval;\n var segmentWidth = this.updateSegmentWidth(this.scale);\n var g;\n var attr = { 'class': 'e-ruler-segment' };\n g = createSvgElement('g', attr);\n for (var i = 0; i < this.interval; i++) {\n tickInterval = segmentWidth / this.interval;\n tick = this.createTick(svg, tickInterval, i + 1, run);\n g.appendChild(tick);\n }\n return g;\n };\n Ruler.prototype.getLinePoint = function (svg, tickInterval, length) {\n var segmentWidth = this.updateSegmentWidth(this.scale);\n var rulerSize = this.getRulerSize();\n tickInterval = tickInterval * (length - 1);\n length = ((tickInterval % segmentWidth) === 0) ? rulerSize : rulerSize * 0.3;\n return length;\n };\n Ruler.prototype.createTick = function (svg, tickInterval, length, run) {\n var ruler;\n var line;\n var linePoint = this.getLinePoint(svg, tickInterval, length);\n var rulerSize = this.getRulerSize();\n var args;\n var attr;\n var isHorizontal = (this.orientation === 'Horizontal') ? true : false;\n var isRightOrBottom = (this.tickAlignment === 'RightOrBottom') ? true : false;\n var arrangeTick = getFunction(this.arrangeTick);\n args = { ruler: ruler, tickLength: linePoint, tickInterval: ((this.segmentWidth / this.interval) * (length - 1)) };\n if (arrangeTick) {\n arrangeTick(args);\n }\n linePoint = args.tickLength;\n var point = tickInterval * (length - 1);\n var x1 = isHorizontal ? point : (isRightOrBottom ? rulerSize : 0);\n var x2 = isHorizontal ? point : (isRightOrBottom ? (rulerSize - linePoint) : (rulerSize - (rulerSize - linePoint)));\n var y1 = isHorizontal ? (isRightOrBottom ? rulerSize : (rulerSize - (rulerSize - linePoint))) : point;\n var y2 = isHorizontal ? (isRightOrBottom ? (rulerSize - linePoint) : 0) : point;\n attr = { 'x1': x1, 'y1': y1, 'x2': x2, 'y2': y2, 'stroke-width': '1', 'stroke': 'black' };\n line = createSvgElement('line', attr);\n line.setAttribute('class', 'e-ruler-tick');\n return line;\n };\n Ruler.prototype.createTickLabel = function (svg, segment) {\n var text;\n if (segment) {\n var attr = { 'class': 'e-ruler-tick-label' };\n text = createSvgElement('text', attr);\n segment.appendChild(text);\n }\n return text;\n };\n /**\n * @private\n * @param scale\n */\n Ruler.prototype.updateSegmentWidth = function (scale) {\n if (this.segmentWidth !== 100) {\n return this.segmentWidth;\n }\n var five = 25;\n var multiples = 1;\n var div;\n var scaleRound;\n var fifty = 100;\n scaleRound = Math.pow(2, Math.round(Math.log(scale) / Math.log(2)));\n div = fifty;\n div = (fifty / scaleRound);\n while (div > 100) {\n multiples /= 10;\n div /= 10;\n }\n while (div < 25) {\n multiples *= 10;\n div *= 10;\n }\n if (div >= five && div % five !== 0) {\n div = Math.round(div / five) * five;\n }\n return div * scale / multiples;\n };\n Ruler.prototype.createMarkerLine = function (rulerSvg, rulerObj, attr) {\n var line;\n if (rulerObj) {\n line = rulerSvg.getElementById(rulerObj.id + '_marker');\n if (line) {\n line.parentNode.removeChild(line);\n }\n line = createSvgElement('line', attr);\n }\n return line;\n };\n /**\n * @private\n * @param rulerObj\n * @param currentPoint\n */\n Ruler.prototype.drawRulerMarker = function (rulerObj, currentPoint, offset) {\n var rulerSvg;\n var rulerSize;\n var scale;\n var diff;\n var i;\n var attr;\n var line;\n var isHorizontal = this.orientation === 'Horizontal' ? true : false;\n var rulerSvgElements = rulerObj.getElementsByTagName('svg');\n for (i = 0; i < rulerSvgElements.length; i++) {\n if (rulerSvgElements[i]) {\n rulerSvg = rulerSvgElements[i];\n }\n break;\n }\n if (rulerSvg) {\n rulerSize = this.getRulerSize();\n attr = {\n 'id': rulerObj.id + '_marker', 'x1': 0, 'y1': 0, 'x2': (isHorizontal ? 0 : rulerSize),\n 'y2': (isHorizontal ? rulerSize : 0), 'stroke': this.markerColor, 'stroke-width': 1.5,\n 'class': 'e-d-ruler-marker'\n };\n line = this.createMarkerLine(rulerSvg, rulerObj, attr);\n scale = this.scale;\n diff = this.offset - this.defStartValue;\n var point = isHorizontal ? currentPoint.x : currentPoint.y;\n var move = (point * scale) + offset + diff;\n line.setAttribute('transform', 'translate(' + (isHorizontal ? ((move + 0.5) + ' 0.5') : ('0.5 ' + (move + 0.5))) + ')');\n rulerSvg.appendChild(line);\n }\n };\n Ruler.prototype.getRulerGeometry = function () {\n return new Size(this.element ? this.element.getBoundingClientRect().width : 0, this.element ? this.element.getBoundingClientRect().height : 0);\n };\n Ruler.prototype.getRulerSize = function () {\n return this.thickness;\n };\n Ruler.prototype.getRulerSVG = function (rulerGeometry) {\n var rulerSpace;\n var rulerSize = this.getRulerSize();\n var svg;\n if (this.element) {\n rulerSpace = document.getElementById(this.element.id + '_ruler_space');\n if (rulerSpace) {\n var attr = {\n 'id': this.element.id + '_Ruler_svg',\n width: this.orientation === 'Horizontal' ? (rulerGeometry.width + 200) : rulerSize + 'px',\n height: this.orientation === 'Horizontal' ? rulerSize : (rulerGeometry.height + 200) + 'px',\n style: 'position:inherit;'\n };\n svg = createSvgElement('svg', attr);\n if (rulerSpace.childNodes.length > 0) {\n for (var i = rulerSpace.childNodes.length - 1; i >= 0; i--) {\n rulerSpace.childNodes[i].parentNode.removeChild(rulerSpace.childNodes[i]);\n }\n }\n rulerSpace.appendChild(svg);\n }\n }\n return svg;\n };\n /**\n * Method to bind events for the ruler\n */\n Ruler.prototype.wireEvents = function () {\n //wire Events\n };\n /**\n * Method to unbind events for the ruler\n */\n Ruler.prototype.unWireEvents = function () {\n //unWire Events\n };\n __decorate([\n Property(5)\n ], Ruler.prototype, \"interval\", void 0);\n __decorate([\n Property(100)\n ], Ruler.prototype, \"segmentWidth\", void 0);\n __decorate([\n Property('Horizontal')\n ], Ruler.prototype, \"orientation\", void 0);\n __decorate([\n Property('RightOrBottom')\n ], Ruler.prototype, \"tickAlignment\", void 0);\n __decorate([\n Property('red')\n ], Ruler.prototype, \"markerColor\", void 0);\n __decorate([\n Property(25)\n ], Ruler.prototype, \"thickness\", void 0);\n __decorate([\n Property(null)\n ], Ruler.prototype, \"arrangeTick\", void 0);\n __decorate([\n Property(400)\n ], Ruler.prototype, \"length\", void 0);\n return Ruler;\n}(Component));\nexport { Ruler };\n","import { PathElement } from '../core/elements/path-element';\nimport { ImageElement } from '../core/elements/image-element';\nimport { TextElement } from '../core/elements/text-element';\nimport { Container } from '../core/containers/container';\nimport { rotateMatrix, identityMatrix, transformPointByMatrix } from '../primitives/matrix';\nimport { Size } from '../primitives/size';\nimport { wordBreakToString, whiteSpaceToString, textAlignToString } from '../utility/base-util';\nimport { getUserHandlePosition, canShowCorner } from '../utility/diagram-util';\nimport { getDiagramElement, getAdornerLayer, getGridLayer, getHTMLLayer } from '../utility/dom-util';\nimport { measurePath, getBackgroundLayerSvg, getBackgroundImageLayer, setAttributeSvg } from '../utility/dom-util';\nimport { getDiagramLayer, getExpandCollapseLayer, getPortsLayer, getNativeLayer } from '../utility/dom-util';\nimport { SnapConstraints } from '../enum/enum';\nimport { ThumbsConstraints, SelectorConstraints } from '../enum/enum';\nimport { SvgRenderer } from './svg-renderer';\nimport { CanvasRenderer } from './canvas-renderer';\nimport { processPathData, splitArrayCollection, transformPath } from '../utility/path-util';\nimport { DiagramNativeElement } from '../core/elements/native-element';\nimport { DiagramHtmlElement } from '../core/elements/html-element';\nimport { Point } from '../primitives/point';\n/**\n * Renderer module is used to render basic diagram elements\n */\n/** @private */\nvar DiagramRenderer = /** @class */ (function () {\n function DiagramRenderer(name, svgRender, isSvgMode) {\n this.renderer = null;\n this.isSvgMode = true;\n this.diagramId = name;\n this.element = getDiagramElement(this.diagramId);\n this.svgRenderer = svgRender;\n this.isSvgMode = isSvgMode;\n this.renderer = isSvgMode ? new SvgRenderer() : new CanvasRenderer();\n }\n DiagramRenderer.prototype.setCursor = function (canvas, cursor) {\n canvas.style.cursor = cursor;\n };\n /** @private */\n DiagramRenderer.prototype.setLayers = function () {\n this.iconSvgLayer = this.element.getElementsByClassName('e-ports-expand-layer')[0];\n this.adornerSvgLayer = this.element.getElementsByClassName('e-adorner-layer')[0];\n this.nativeSvgLayer = this.element.getElementsByClassName('e-native-layer')[0];\n this.diagramSvgLayer = this.element.getElementsByClassName('e-diagram-layer')[0];\n };\n DiagramRenderer.prototype.getAdornerLayer = function () {\n var adornerLayer = getAdornerLayer(this.diagramId);\n return adornerLayer;\n };\n DiagramRenderer.prototype.getParentSvg = function (element, targetElement, canvas) {\n if (this.diagramId && element && element.id) {\n if (element.id.split('_icon_content').length > 1 || element.id.split('_nodeport').length > 1) {\n return this.iconSvgLayer;\n }\n if (targetElement && targetElement === 'selector') {\n return this.adornerSvgLayer;\n }\n else if (element instanceof DiagramNativeElement) {\n return this.nativeSvgLayer;\n }\n else {\n return this.diagramSvgLayer;\n }\n }\n return canvas;\n };\n DiagramRenderer.prototype.getParentElement = function (element, defaultParent, svgElement) {\n var layerGElement = defaultParent;\n if (svgElement && this.diagramId && element && element.id) {\n if (element.id.split('_icon_content').length > 1) {\n layerGElement = svgElement.getElementById(this.diagramId + '_diagramExpander');\n defaultParent = null;\n }\n else if (element.id.split('_nodeport').length > 1) {\n layerGElement = svgElement.getElementById(this.diagramId + '_diagramPorts');\n }\n else if (element instanceof DiagramNativeElement) {\n layerGElement = svgElement.getElementById(this.diagramId + '_nativeLayer');\n defaultParent = null;\n }\n else {\n layerGElement = svgElement.getElementById(this.diagramId + '_diagramLayer');\n }\n var groupElement = this.getGroupElement(element, defaultParent || layerGElement);\n layerGElement = groupElement.g;\n if (groupElement.svg) {\n svgElement = groupElement.svg;\n }\n }\n return { g: layerGElement, svg: svgElement };\n };\n DiagramRenderer.prototype.getGroupElement = function (element, canvas) {\n var gElement;\n var parentSvg = this.getParentSvg(element);\n var svgElement;\n if (canvas && parentSvg) {\n if (parentSvg) {\n gElement = parentSvg.getElementById(element.id + '_groupElement');\n if (!gElement && parentSvg !== this.nativeSvgLayer) {\n var nativeSvg = this.nativeSvgLayer;\n gElement = nativeSvg.getElementById(element.id + '_groupElement');\n svgElement = nativeSvg;\n }\n }\n if (!gElement) {\n gElement = this.svgRenderer.createGElement('g', { id: element.id + '_groupElement' });\n canvas.appendChild(gElement);\n }\n }\n return { g: gElement, svg: svgElement };\n };\n DiagramRenderer.prototype.renderElement = function (element, canvas, htmlLayer, transform, parentSvg, createParent) {\n if (element instanceof Container) {\n this.renderContainer(element, canvas, htmlLayer, transform, parentSvg, createParent);\n }\n else if (element instanceof ImageElement) {\n this.renderImageElement(element, canvas, transform, parentSvg);\n }\n else if (element instanceof PathElement) {\n this.renderPathElement(element, canvas, transform, parentSvg);\n }\n else if (element instanceof TextElement) {\n this.renderTextElement(element, canvas, transform, parentSvg);\n }\n else if (element instanceof DiagramNativeElement) {\n this.renderNativeElement(element, canvas, transform, parentSvg);\n }\n else if (element instanceof DiagramHtmlElement) {\n this.renderHTMLElement(element, canvas, htmlLayer, transform, parentSvg);\n }\n else {\n this.renderRect(element, canvas, transform, parentSvg);\n }\n };\n DiagramRenderer.prototype.drawSelectionRectangle = function (x, y, w, h, canvas, t) {\n x = (x + t.tx) * t.scale;\n y = (y + t.ty) * t.scale;\n var options = {\n width: w * t.scale, height: h * t.scale,\n x: x + 0.5, y: y + 0.5, fill: 'transparent', stroke: 'gray', angle: 0,\n pivotX: 0.5, pivotY: 0.5, strokeWidth: 1,\n dashArray: '6 3', opacity: 1,\n visible: true, id: canvas.id + '_selected_region'\n };\n var adornerLayer = this.getAdornerLayer();\n this.svgRenderer.updateSelectionRegion(adornerLayer, options);\n };\n /**\n * @private\n */\n DiagramRenderer.prototype.renderHighlighter = function (element, canvas, transform) {\n var width = element.actualSize.width || 2;\n var height = element.actualSize.height || 2;\n var x = element.offsetX - width * element.pivot.x;\n var y = element.offsetY - height * element.pivot.y;\n x = (x + transform.tx) * transform.scale;\n y = (y + transform.ty) * transform.scale;\n var options = {\n width: width * transform.scale, height: height * transform.scale,\n x: x, y: y, fill: 'transparent', stroke: '#8CC63F', angle: element.rotateAngle,\n pivotX: element.pivot.x, pivotY: element.pivot.y, strokeWidth: 4,\n dashArray: '', opacity: 1, cornerRadius: 0,\n visible: true, id: canvas.id + '_highlighter', class: 'e-diagram-highlighter'\n };\n this.svgRenderer.drawRectangle(canvas, options, this.diagramId);\n };\n DiagramRenderer.prototype.drawLine = function (canvas, options) {\n this.svgRenderer.drawLine(canvas, options);\n };\n DiagramRenderer.prototype.drawPath = function (canvas, options) {\n this.svgRenderer.drawPath(canvas, options, this.diagramId);\n };\n DiagramRenderer.prototype.renderResizeHandle = function (element, canvas, constraints, currentZoom, selectorConstraints, transform, canMask, enableNode) {\n var left = element.offsetX - element.actualSize.width * element.pivot.x;\n var top = element.offsetY - element.actualSize.height * element.pivot.y;\n var height = element.actualSize.height;\n var width = element.actualSize.width;\n if (constraints & ThumbsConstraints.Rotate) {\n this.renderPivotLine(element, canvas, transform, selectorConstraints, canMask);\n this.renderRotateThumb(element, canvas, transform, selectorConstraints, canMask);\n }\n this.renderBorder(element, canvas, transform, enableNode);\n var nodeWidth = element.actualSize.width * currentZoom;\n var nodeHeight = element.actualSize.height * currentZoom;\n if (nodeWidth >= 40 && nodeHeight >= 40) {\n //Hide corners when the size is less than 40\n if (selectorConstraints & SelectorConstraints.ResizeNorthWest) {\n this.renderCircularHandle('resizeNorthWest', element, left, top, canvas, canShowCorner(selectorConstraints, 'ResizeNorthWest'), constraints & ThumbsConstraints.ResizeNorthWest, transform, undefined, canMask, { 'aria-label': 'Thumb to resize the selected object on top left side direction' }, undefined, 'e-diagram-resize-handle e-northwest');\n }\n if (selectorConstraints & SelectorConstraints.ResizeNorthEast) {\n this.renderCircularHandle('resizeNorthEast', element, left + width, top, canvas, canShowCorner(selectorConstraints, 'ResizeNorthEast'), constraints & ThumbsConstraints.ResizeNorthEast, transform, undefined, canMask, { 'aria-label': 'Thumb to resize the selected object on top right side direction' }, undefined, 'e-diagram-resize-handle e-northeast');\n }\n if (selectorConstraints & SelectorConstraints.ResizeSouthWest) {\n this.renderCircularHandle('resizeSouthWest', element, left, top + height, canvas, canShowCorner(selectorConstraints, 'ResizeSouthWest'), constraints & ThumbsConstraints.ResizeSouthWest, transform, undefined, canMask, { 'aria-label': 'Thumb to resize the selected object on bottom left side direction' }, undefined, 'e-diagram-resize-handle e-southwest');\n }\n if (selectorConstraints & SelectorConstraints.ResizeSouthEast) {\n this.renderCircularHandle('resizeSouthEast', element, left + width, top + height, canvas, canShowCorner(selectorConstraints, 'ResizeSouthEast'), constraints & ThumbsConstraints.ResizeSouthEast, transform, undefined, canMask, { 'aria-label': 'Thumb to resize the selected object on bottom right side direction' }, undefined, 'e-diagram-resize-handle e-southeast');\n }\n }\n if (selectorConstraints & SelectorConstraints.ResizeNorth) {\n this.renderCircularHandle('resizeNorth', element, left + width / 2, top, canvas, canShowCorner(selectorConstraints, 'ResizeNorth'), constraints & ThumbsConstraints.ResizeNorth, transform, undefined, canMask, { 'aria-label': 'Thumb to resize the selected object on top side direction' }, undefined, 'e-diagram-resize-handle e-north');\n }\n if (selectorConstraints & SelectorConstraints.ResizeSouth) {\n this.renderCircularHandle('resizeSouth', element, left + width / 2, top + height, canvas, canShowCorner(selectorConstraints, 'ResizeSouth'), constraints & ThumbsConstraints.ResizeSouth, transform, undefined, canMask, { 'aria-label': 'Thumb to resize the selected object on bottom side direction' }, undefined, 'e-diagram-resize-handle e-south');\n }\n if (selectorConstraints & SelectorConstraints.ResizeWest) {\n this.renderCircularHandle('resizeWest', element, left, top + height / 2, canvas, canShowCorner(selectorConstraints, 'ResizeWest'), constraints & ThumbsConstraints.ResizeWest, transform, undefined, canMask, { 'aria-label': 'Thumb to resize the selected object on left side direction' }, undefined, 'e-diagram-resize-handle e-west');\n }\n if (selectorConstraints & SelectorConstraints.ResizeEast) {\n this.renderCircularHandle('resizeEast', element, left + width, top + height / 2, canvas, canShowCorner(selectorConstraints, 'ResizeEast'), constraints & ThumbsConstraints.ResizeEast, transform, undefined, canMask, { 'aria-label': 'Thumb to resize the selected object on right side direction' }, undefined, 'e-diagram-resize-handle e-east');\n }\n };\n DiagramRenderer.prototype.renderEndPointHandle = function (selector, canvas, constraints, selectorConstraints, transform, connectedSource, connectedTarget, isSegmentEditing) {\n var sourcePoint = selector.sourcePoint;\n var targetPoint = selector.targetPoint;\n var wrapper = selector.wrapper;\n var i;\n var segment;\n this.renderCircularHandle('connectorSourceThumb', wrapper, sourcePoint.x, sourcePoint.y, canvas, canShowCorner(selectorConstraints, 'ConnectorSourceThumb'), constraints & ThumbsConstraints.ConnectorSource, transform, connectedSource, undefined, { 'aria-label': 'Thumb to move the source point of the connector' }, undefined, 'e-diagram-endpoint-handle e-targetend');\n this.renderCircularHandle('connectorTargetThumb', wrapper, targetPoint.x, targetPoint.y, canvas, canShowCorner(selectorConstraints, 'ConnectorTargetThumb'), constraints & ThumbsConstraints.ConnectorTarget, transform, connectedTarget, undefined, { 'aria-label': 'Thumb to move the target point of the connector' }, undefined, 'e-diagram-endpoint-handle e-targetend');\n if (isSegmentEditing) {\n if ((selector.type === 'Straight' || selector.type === 'Bezier') && selector.segments.length > 0) {\n for (i = 0; i < selector.segments.length - 1; i++) {\n segment = selector.segments[i];\n this.renderCircularHandle(('segementThumb_' + (i + 1)), wrapper, segment.point.x, segment.point.y, canvas, true, constraints & ThumbsConstraints.ConnectorSource, transform, connectedSource, null, null, i);\n }\n }\n else {\n for (i = 0; i < selector.segments.length; i++) {\n var seg = selector.segments[i];\n this.renderOrthogonalThumbs('orthoThumb_' + (i + 1), wrapper, seg, canvas, canShowCorner(selectorConstraints, 'ConnectorSourceThumb'), transform);\n }\n }\n }\n if (selector.type === 'Bezier') {\n for (i = 0; i < selector.segments.length; i++) {\n var segment_1 = selector.segments[i];\n var bezierPoint = !Point.isEmptyPoint(segment_1.point1) ? segment_1.point1\n : segment_1.bezierPoint1;\n this.renderCircularHandle('bezierPoint_' + (i + 1) + '_1', wrapper, bezierPoint.x, bezierPoint.y, canvas, canShowCorner(selectorConstraints, 'ConnectorSourceThumb'), constraints & ThumbsConstraints.ConnectorSource, transform, undefined, undefined, { 'aria-label': 'Thumb to move the source point of the connector' }, undefined, 'e-diagram-bezier-handle e-source');\n if (canShowCorner(selectorConstraints, 'ConnectorSourceThumb')) {\n this.renderBezierLine('bezierLine_' + (i + 1) + '_1', wrapper, canvas, segment_1.points[0], !Point.isEmptyPoint(segment_1.point1) ? segment_1.point1 : segment_1.bezierPoint1, transform);\n }\n bezierPoint = !Point.isEmptyPoint(segment_1.point2) ? segment_1.point2 : segment_1.bezierPoint2;\n this.renderCircularHandle('bezierPoint_' + (i + 1) + '_2', wrapper, bezierPoint.x, bezierPoint.y, canvas, canShowCorner(selectorConstraints, 'ConnectorTargetThumb'), constraints & ThumbsConstraints.ConnectorTarget, transform, undefined, undefined, { 'aria-label': 'Thumb to move the target point of the connector' }, undefined, 'e-diagram-bezier-handle e-target');\n if (canShowCorner(selectorConstraints, 'ConnectorTargetThumb')) {\n this.renderBezierLine('bezierLine_' + (i + 1) + '_2', wrapper, canvas, segment_1.points[1], !Point.isEmptyPoint(segment_1.point2) ? segment_1.point2 : segment_1.bezierPoint2, transform);\n }\n }\n }\n };\n DiagramRenderer.prototype.renderOrthogonalThumbs = function (id, selector, segment, canvas, visibility, t) {\n var orientation;\n var visible;\n var length;\n var j = 0;\n for (j = 0; j < segment.points.length - 1; j++) {\n length = Point.distancePoints(segment.points[j], segment.points[j + 1]);\n orientation = (segment.points[j].y.toFixed(2) === segment.points[j + 1].y.toFixed(2)) ? 'horizontal' : 'vertical';\n visible = (length >= 50) ? true : false;\n this.renderOrthogonalThumb((id + '_' + (j + 1)), selector, (((segment.points[j].x + segment.points[j + 1].x) / 2)), (((segment.points[j].y + segment.points[j + 1].y) / 2)), canvas, visible, orientation, t);\n }\n };\n DiagramRenderer.prototype.renderOrthogonalThumb = function (id, selector, x, y, canvas, visible, orientation, t) {\n var path;\n var h;\n var v;\n if (orientation === 'horizontal') {\n path = 'M0,7 L15,0 L30,7 L15,14 z';\n h = -15;\n v = -7;\n }\n else {\n path = 'M7,0 L0,15 L7,30 L14,15 z';\n h = -7;\n v = -15;\n }\n var options = {\n x: ((x + t.tx) * t.scale) + h, y: ((y + t.ty) * t.scale) + v, angle: 0,\n fill: '#e2e2e2', stroke: 'black', strokeWidth: 1, dashArray: '', data: path,\n width: 20, height: 20, pivotX: 0, pivotY: 0, opacity: 1, visible: visible, id: id\n };\n this.svgRenderer.drawPath(canvas, options, this.diagramId);\n };\n DiagramRenderer.prototype.renderPivotLine = function (element, canvas, transform, selectorConstraints, canMask) {\n var wrapper = element;\n var dashArray = '2,3';\n var visible = (selectorConstraints & SelectorConstraints.Rotate) ? true : false;\n if (canMask) {\n visible = false;\n }\n var options = this.getBaseAttributes(wrapper, transform);\n options.fill = 'None';\n options.stroke = 'black';\n options.strokeWidth = 1;\n options.dashArray = dashArray;\n options.visible = visible;\n var scale = transform.scale;\n options.x *= scale;\n options.y *= scale;\n options.width *= scale;\n options.height *= scale;\n options.id = 'pivotLine';\n options.class = 'e-diagram-pivot-line';\n var startPoint = { x: wrapper.actualSize.width * wrapper.pivot.x * scale, y: -20 };\n var endPoint = { x: wrapper.actualSize.width * wrapper.pivot.x * scale, y: 0 };\n options.startPoint = startPoint;\n options.endPoint = endPoint;\n this.svgRenderer.drawLine(canvas, options);\n };\n DiagramRenderer.prototype.renderBezierLine = function (id, wrapper, canvas, start, end, transform) {\n var dashArray = '3,3';\n var options = this.getBaseAttributes(wrapper, transform);\n options.id = id;\n options.stroke = 'black';\n options.strokeWidth = 1;\n options.dashArray = dashArray;\n options.fill = 'None';\n options.class = 'e-diagram-bezier-line';\n options.x = 0;\n options.y = 0;\n var scale = transform.scale;\n var x1 = (start.x + transform.tx) * scale;\n var y1 = (start.y + transform.ty) * scale;\n var x2 = (end.x + transform.tx) * scale;\n var y2 = (end.y + transform.ty) * scale;\n var startPoint = { x: x1, y: y1 };\n var endPoint = { x: x2, y: y2 };\n options.startPoint = startPoint;\n options.endPoint = endPoint;\n this.svgRenderer.drawLine(canvas, options);\n };\n DiagramRenderer.prototype.renderCircularHandle = function (id, selector, cx, cy, canvas, visible, enableSelector, t, connected, canMask, ariaLabel, count, className) {\n var wrapper = selector;\n var radius = 7;\n var newPoint = { x: cx, y: cy };\n if (wrapper.rotateAngle !== 0 || wrapper.parentTransform !== 0) {\n var matrix = identityMatrix();\n rotateMatrix(matrix, wrapper.rotateAngle + wrapper.parentTransform, wrapper.offsetX, wrapper.offsetY);\n newPoint = transformPointByMatrix(matrix, newPoint);\n }\n var options = this.getBaseAttributes(wrapper);\n options.stroke = 'black';\n options.strokeWidth = 1;\n if (count !== undefined) {\n radius = 5;\n options.id = 'segmentEnd_' + count;\n options.fill = '#e2e2e2';\n }\n else {\n radius = 7;\n options.fill = connected ? '#8CC63F' : 'white';\n }\n options.centerX = (newPoint.x + t.tx) * t.scale;\n options.centerY = (newPoint.y + t.ty) * t.scale;\n options.radius = radius;\n options.angle = 0;\n options.id = id;\n options.visible = visible;\n options.class = className;\n if (connected) {\n options.class += ' e-connected';\n }\n if (canMask) {\n options.visible = false;\n }\n this.svgRenderer.drawCircle(canvas, options, enableSelector, ariaLabel);\n };\n DiagramRenderer.prototype.renderBorder = function (selector, canvas, transform, enableNode) {\n var wrapper = selector;\n var options = this.getBaseAttributes(wrapper, transform);\n options.x *= transform.scale;\n options.y *= transform.scale;\n options.width *= transform.scale;\n options.height *= transform.scale;\n options.fill = 'transparent';\n options.stroke = '#097F7F';\n options.strokeWidth = 0.6;\n options.dashArray = '6,3';\n options.class = 'e-diagram-border';\n options.id = 'borderRect';\n if (!enableNode) {\n options.class += ' e-disabled';\n }\n options.cornerRadius = 0;\n var parentSvg = this.getParentSvg(selector, 'selector');\n this.svgRenderer.drawRectangle(canvas, options, this.diagramId, undefined, true, parentSvg);\n };\n DiagramRenderer.prototype.renderUserHandler = function (selectorItem, canvas, transform) {\n var wrapper = selectorItem.wrapper;\n for (var _i = 0, _a = selectorItem.userHandles; _i < _a.length; _i++) {\n var obj = _a[_i];\n var element = new PathElement();\n var newPoint = void 0;\n var data = obj.pathData;\n newPoint = getUserHandlePosition(selectorItem, obj, transform);\n newPoint.x = (newPoint.x + transform.tx) * transform.scale;\n newPoint.y = (newPoint.y + transform.ty) * transform.scale;\n if (obj.visible) {\n obj.visible = (selectorItem.constraints & SelectorConstraints.UserHandle) ? true : false;\n }\n var option = this.getBaseAttributes(wrapper);\n option.id = obj.name + '_userhandle';\n option.fill = obj.backgroundColor;\n option.stroke = obj.borderColor;\n option.strokeWidth = obj.borderWidth;\n option.centerX = newPoint.x;\n option.centerY = newPoint.y;\n option.radius = obj.size * 0.5;\n option.class = 'e-diagram-userhandle-circle';\n option.angle = 0;\n option.visible = obj.visible;\n option.opacity = 1;\n this.svgRenderer.drawCircle(canvas, option, 1, { 'aria-label': obj.name + 'user handle' });\n var pathPading = 5;\n var arrayCollection = [];\n arrayCollection = processPathData(data);\n arrayCollection = splitArrayCollection(arrayCollection);\n var pathSize = measurePath(data);\n //requiredSize/contentSize\n var scaleX = (obj.size - 0.45 * obj.size) / pathSize.width;\n var scaleY = (obj.size - 0.45 * obj.size) / pathSize.height;\n var newData = transformPath(arrayCollection, scaleX, scaleY, true, pathSize.x, pathSize.y, 0, 0);\n pathSize = measurePath(newData);\n var options = {\n x: newPoint.x - pathSize.width / 2,\n y: newPoint.y - pathSize.height / 2,\n angle: 0, id: '',\n class: 'e-diagram-userhandle-path',\n fill: obj.pathColor, stroke: obj.backgroundColor, strokeWidth: 0.5, dashArray: '', data: newData,\n width: obj.size - pathPading, height: obj.size - pathPading, pivotX: 0, pivotY: 0, opacity: 1, visible: obj.visible\n };\n this.svgRenderer.drawPath(canvas, options, this.diagramId, undefined, undefined, { 'aria-label': obj.name + 'user handle' });\n }\n };\n DiagramRenderer.prototype.renderRotateThumb = function (wrapper, canvas, transform, selectorConstraints, canMask) {\n var element = new PathElement();\n var newPoint;\n var size = new Size();\n size.width = 18;\n size.height = 16;\n var top = wrapper.offsetY - wrapper.actualSize.height * wrapper.pivot.y;\n var left = wrapper.offsetX - wrapper.actualSize.width * wrapper.pivot.x;\n var visible = (selectorConstraints & SelectorConstraints.Rotate) ? true : false;\n if (canMask) {\n visible = false;\n }\n var data = 'M 16.856144362449648 10.238890446662904 L 18.000144362449646 3.437890446662903' +\n 'L 15.811144362449646 4.254890446662903 C 14.837144362449646 2.5608904466629028 13.329144362449647 ' +\n ' 1.2598904466629026 11.485144362449645 0.5588904466629026 C 9.375144362449646 - 0.24510955333709716 7.071144362449646 ' +\n ' - 0.18010955333709716 5.010144362449646 0.7438904466629028 C 2.942144362449646 1.6678904466629028 1.365144362449646' +\n ' 3.341890446662903 0.558144362449646 5.452890446662903 C - 0.244855637550354 7.567890446662903 - 0.17985563755035394' +\n ' 9.866890446662904 0.7431443624496461 11.930890446662904 C 1.6681443624496461 13.994890446662904 3.343144362449646' +\n ' 15.575890446662903 5.457144362449647 16.380890446662903 C 6.426144362449647 16.7518904466629 7.450144362449647' +\n ' 16.9348904466629 8.470144362449647 16.9348904466629 C 9.815144362449647 16.9348904466629 11.155144362449647 ' +\n '16.6178904466629 12.367144362449647 15.986890446662901 L 11.351144362449647 14.024890446662901 C 9.767144362449647' +\n ' 14.8468904466629 7.906144362449647 14.953890446662902 6.237144362449647 14.3178904466629 C 4.677144362449647' +\n ' 13.7218904466629 3.444144362449647 12.5558904466629 2.758144362449647 11.028890446662901 C 2.078144362449646 ' +\n '9.501890446662903 2.031144362449646 7.802890446662903 2.622144362449646 6.243890446662903 C 3.216144362449646' +\n ' 4.6798904466629025 4.387144362449646 3.442890446662903 5.914144362449646 2.760890446662903 C 7.437144362449646 ' +\n '2.078890446662903 9.137144362449646 2.0298904466629026 10.700144362449645 2.6258904466629027 C 11.946144362449646 ' +\n '3.100890446662903 12.971144362449646 3.9538904466629026 13.686144362449646 5.049890446662903 L 11.540144362449645 ' +\n '5.850890446662903 L 16.856144362449648 10.238890446662904 Z';\n var pivotX = left + wrapper.pivot.x * wrapper.actualSize.width;\n var pivotY = top;\n pivotX = (pivotX + transform.tx) * transform.scale;\n pivotY = (pivotY + transform.ty) * transform.scale;\n newPoint = { x: pivotX - size.width * 0.5, y: pivotY - 30 - size.height * 0.5 };\n if (wrapper.rotateAngle !== 0 || wrapper.parentTransform !== 0) {\n var matrix = identityMatrix();\n rotateMatrix(matrix, wrapper.rotateAngle + wrapper.parentTransform, (transform.tx + wrapper.offsetX) * transform.scale, (transform.ty + wrapper.offsetY) * transform.scale);\n newPoint = transformPointByMatrix(matrix, newPoint);\n }\n var options = {\n x: newPoint.x,\n y: newPoint.y,\n angle: wrapper.rotateAngle,\n fill: '#231f20', stroke: 'black', strokeWidth: 0.5, dashArray: '', data: data,\n width: 20, height: 20, pivotX: 0, pivotY: 0, opacity: 1, visible: visible, id: wrapper.id, class: 'e-diagram-rotate-handle'\n };\n options.id = 'rotateThumb';\n this.svgRenderer.drawPath(canvas, options, this.diagramId, true, undefined, { 'aria-label': 'Thumb to rotate the selected object' });\n };\n DiagramRenderer.prototype.renderPathElement = function (element, canvas, transform, parentSvg) {\n var options = this.getBaseAttributes(element, transform);\n options.data = element.absolutePath;\n options.data = element.absolutePath;\n var ariaLabel = element.description ? element.description : element.id;\n this.renderer.drawPath(canvas, options, this.diagramId, undefined, parentSvg, ariaLabel);\n };\n DiagramRenderer.prototype.renderSvgGridlines = function (snapSettings, gridSvg, t, rulerSettings, hRuler, vRuler) {\n //render gridlines\n var pattern = document.createElementNS('http://www.w3.org/2000/svg', 'pattern');\n var defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');\n defs.setAttribute('id', this.diagramId + '_grid_pattern_defn');\n if (snapSettings.constraints & SnapConstraints.ShowHorizontalLines ||\n snapSettings.constraints & SnapConstraints.ShowVerticalLines) {\n pattern.setAttribute('id', this.diagramId + '_pattern');\n }\n var hWidth = 0;\n var hHeight = 0;\n var hSegmentwidth = 0;\n var vSegmentwidth = 0;\n var scale = 1;\n var isRulerGrid = false;\n if (rulerSettings.showRulers && rulerSettings.dynamicGrid && hRuler && vRuler) {\n hSegmentwidth = vRuler.updateSegmentWidth(t.scale);\n vSegmentwidth = hRuler.updateSegmentWidth(t.scale);\n snapSettings.horizontalGridlines.scaledIntervals = [hSegmentwidth / hRuler.interval];\n snapSettings.verticalGridlines.scaledIntervals = [vSegmentwidth / vRuler.interval];\n isRulerGrid = true;\n }\n else {\n for (var _i = 0, _a = snapSettings.verticalGridlines.lineIntervals; _i < _a.length; _i++) {\n var entry = _a[_i];\n hWidth += entry;\n }\n for (var _b = 0, _c = snapSettings.horizontalGridlines.lineIntervals; _b < _c.length; _b++) {\n var entry = _c[_b];\n hHeight += entry;\n }\n scale = this.scaleSnapInterval(snapSettings, t.scale);\n }\n hWidth = isRulerGrid ? vSegmentwidth : hWidth * scale;\n hHeight = isRulerGrid ? hSegmentwidth : hHeight * scale;\n var attr = {\n id: this.diagramId + '_pattern', x: 0, y: 0, width: hWidth,\n height: hHeight, patternUnits: 'userSpaceOnUse'\n };\n setAttributeSvg(pattern, attr);\n this.horizontalSvgGridlines(pattern, hWidth, hHeight, scale, snapSettings, rulerSettings, vRuler, isRulerGrid);\n this.verticalSvgGridlines(pattern, hWidth, hHeight, scale, snapSettings, rulerSettings, hRuler, isRulerGrid);\n defs.appendChild(pattern);\n gridSvg.appendChild(defs);\n };\n DiagramRenderer.prototype.horizontalSvgGridlines = function (pattern, hWidth, hHeight, scale, snapSettings, rulerSettings, vRuler, isRulerGrid) {\n var space = 0;\n var dashArray = [];\n var hLine;\n if (snapSettings.constraints & SnapConstraints.ShowHorizontalLines) {\n var intervals = snapSettings.horizontalGridlines.lineIntervals;\n var strokestyle = snapSettings.horizontalGridlines.lineColor;\n if (snapSettings.horizontalGridlines.lineDashArray) {\n dashArray = this.renderer.parseDashArray(snapSettings.horizontalGridlines.lineDashArray);\n }\n if (rulerSettings.showRulers && rulerSettings.dynamicGrid && vRuler) {\n intervals = this.updateLineIntervals(intervals, rulerSettings, vRuler, hHeight);\n }\n for (var i = 0; i < intervals.length; i = i + 2) {\n hLine = document.createElementNS('http://www.w3.org/2000/svg', 'path');\n var d = space + intervals[i] / 2;\n d = isRulerGrid ? d : d * scale;\n var attr = {\n 'stroke-width': intervals[i], 'stroke': snapSettings.horizontalGridlines.lineColor,\n 'd': 'M0,' + (d) + ' L' + hWidth + ',' + (d) + ' Z',\n 'dashArray': dashArray.toString(),\n 'class': intervals[i] === 1.25 ? 'e-diagram-thick-grid' : 'e-diagram-thin-grid'\n };\n setAttributeSvg(hLine, attr);\n pattern.appendChild(hLine);\n space += intervals[i + 1] + intervals[i];\n }\n }\n };\n DiagramRenderer.prototype.verticalSvgGridlines = function (pattern, hWidth, hHeight, scale, snapSettings, rulerSettings, hRuler, isRulerGrid) {\n var space = 0;\n var dashArray = [];\n var vLine;\n if (snapSettings.constraints & SnapConstraints.ShowVerticalLines) {\n var intervals = snapSettings.verticalGridlines.lineIntervals;\n var strokestyle = snapSettings.verticalGridlines.lineColor;\n if (snapSettings.verticalGridlines.lineDashArray) {\n dashArray = this.renderer.parseDashArray(snapSettings.verticalGridlines.lineDashArray);\n }\n if (rulerSettings.showRulers && rulerSettings.dynamicGrid && hRuler) {\n intervals = this.updateLineIntervals(intervals, rulerSettings, hRuler, hWidth);\n }\n for (var i = 0; i < intervals.length; i = i + 2) {\n vLine = document.createElementNS('http://www.w3.org/2000/svg', 'path');\n var d = space + intervals[i] / 2;\n d = isRulerGrid ? d : d * scale;\n var attr = {\n 'stroke-width': intervals[i], 'stroke': snapSettings.verticalGridlines.lineColor,\n 'd': 'M' + (d) + ',0 L' + (d) + ',' + hHeight + ' Z',\n 'dashArray': dashArray.toString(),\n 'class': intervals[i] === 1.25 ? 'e-diagram-thick-grid' : 'e-diagram-thin-grid'\n };\n setAttributeSvg(vLine, attr);\n pattern.appendChild(vLine);\n space += intervals[i + 1] + intervals[i];\n }\n }\n };\n DiagramRenderer.prototype.updateGrid = function (snapSettings, svgGrid, transform, rulerSettings, hRuler, vRuler) {\n var grid = svgGrid.getElementById(this.diagramId + '_grid_rect');\n var i;\n var isRulerGrid = false;\n if (grid) {\n var pattern = svgGrid.getElementById(this.diagramId + '_pattern');\n if (pattern) {\n pattern.parentNode.removeChild(pattern);\n }\n var hSegmentwidth = 0;\n var vSegmentwidth = 0;\n var scale = 1;\n if (rulerSettings.showRulers && rulerSettings.dynamicGrid && vRuler && hRuler) {\n hSegmentwidth = vRuler.updateSegmentWidth(transform.scale);\n vSegmentwidth = hRuler.updateSegmentWidth(transform.scale);\n isRulerGrid = true;\n snapSettings.horizontalGridlines.scaledIntervals = [hSegmentwidth / hRuler.interval];\n snapSettings.verticalGridlines.scaledIntervals = [vSegmentwidth / vRuler.interval];\n }\n else {\n scale = this.scaleSnapInterval(snapSettings, transform.scale);\n }\n var height = 0;\n for (i = 0; i < snapSettings.horizontalGridlines.lineIntervals.length; i++) {\n height += snapSettings.horizontalGridlines.lineIntervals[i];\n }\n var width = 0;\n for (i = 0; i < snapSettings.verticalGridlines.lineIntervals.length; i++) {\n width += snapSettings.verticalGridlines.lineIntervals[i];\n }\n var attr = {\n x: -transform.tx * transform.scale,\n y: -transform.ty * transform.scale\n };\n setAttributeSvg(grid, attr);\n width = isRulerGrid ? vSegmentwidth : width * scale;\n height = isRulerGrid ? hSegmentwidth : height * scale;\n attr = {\n id: this.diagramId + '_pattern', x: 0, y: 0, width: width,\n height: height, patternUnits: 'userSpaceOnUse'\n };\n pattern = document.createElementNS('http://www.w3.org/2000/svg', 'pattern');\n setAttributeSvg(pattern, attr);\n this.horizontalSvgGridlines(pattern, width, height, scale, snapSettings, rulerSettings, vRuler, isRulerGrid);\n this.verticalSvgGridlines(pattern, width, height, scale, snapSettings, rulerSettings, hRuler, isRulerGrid);\n var defs = svgGrid.getElementById(this.diagramId + '_grid_pattern_defn');\n defs.appendChild(pattern);\n }\n };\n DiagramRenderer.prototype.updateLineIntervals = function (intervals, rulerSettings, ruler, segmentWidth) {\n var newInterval = [];\n var tickInterval = segmentWidth / ruler.interval;\n for (var i = 0; i < ruler.interval * 2; i++) {\n if (i % 2 === 0) {\n newInterval[i] = (i === 0) ? 1.25 : 0.25;\n }\n else {\n newInterval[i] = tickInterval - newInterval[i - 1];\n }\n }\n return newInterval;\n };\n DiagramRenderer.prototype.scaleSnapInterval = function (snapSettings, scale) {\n if (scale >= 2) {\n while (scale >= 2) {\n scale /= 2;\n }\n }\n else if (scale <= 0.5) {\n while (scale <= 0.5) {\n scale *= 2;\n }\n }\n var i;\n snapSettings.horizontalGridlines.scaledIntervals = snapSettings.horizontalGridlines.snapIntervals;\n snapSettings.verticalGridlines.scaledIntervals = snapSettings.verticalGridlines.snapIntervals;\n if (scale !== 1) {\n var gridlines = snapSettings.horizontalGridlines;\n gridlines.scaledIntervals = [];\n for (i = 0; i < gridlines.snapIntervals.length; i++) {\n gridlines.scaledIntervals[i] = gridlines.snapIntervals[i] * scale;\n }\n gridlines = snapSettings.verticalGridlines;\n gridlines.scaledIntervals = [];\n for (i = 0; i < gridlines.snapIntervals.length; i++) {\n gridlines.scaledIntervals[i] = gridlines.snapIntervals[i] * scale;\n }\n }\n return scale;\n };\n DiagramRenderer.prototype.renderTextElement = function (element, canvas, transform, parentSvg) {\n var options = this.getBaseAttributes(element, transform);\n options.cornerRadius = 0;\n this.renderer.drawRectangle(canvas, options, this.diagramId, undefined, undefined, parentSvg);\n options.whiteSpace = whiteSpaceToString(element.style.whiteSpace, element.style.textWrapping);\n options.content = element.content;\n options.breakWord = wordBreakToString(element.style.textWrapping);\n options.textAlign = textAlignToString(element.style.textAlign);\n options.color = element.style.color;\n options.italic = element.style.italic;\n options.bold = element.style.bold;\n options.fontSize = element.style.fontSize;\n options.fontFamily = element.style.fontFamily;\n options.textOverflow = element.style.textOverflow;\n options.textDecoration = element.style.textDecoration;\n options.doWrap = element.doWrap;\n options.wrapBounds = element.wrapBounds;\n options.childNodes = element.childNodes;\n options.dashArray = '';\n options.strokeWidth = 0;\n options.fill = '';\n var ariaLabel = element.description ? element.description : element.content ? element.content : element.id;\n this.renderer.drawText(canvas, options, parentSvg, ariaLabel, this.diagramId);\n if (this.isSvgMode) {\n element.doWrap = false;\n }\n };\n DiagramRenderer.prototype.renderNativeElement = function (element, canvas, transform, parentSvg) {\n var templateWidth;\n var templateHeight;\n var nativeSvg = this.getParentSvg(element, undefined, canvas) || parentSvg;\n var nativeLayer = this.getParentElement(element, canvas, nativeSvg).g || canvas;\n var options = this.getBaseAttributes(element, transform);\n options.fill = 'transparent';\n options.cornerRadius = element.cornerRadius;\n options.stroke = 'transparent';\n this.renderer.drawRectangle(canvas, options, this.diagramId, undefined, undefined, parentSvg);\n switch (element.scale) {\n case 'None':\n templateWidth = element.contentSize.width;\n templateHeight = element.contentSize.height;\n break;\n case 'Stretch':\n templateWidth = element.actualSize.width;\n templateHeight = element.actualSize.height;\n break;\n case 'Meet':\n if (element.actualSize.width <= element.actualSize.height) {\n templateWidth = templateHeight = element.actualSize.width;\n }\n else {\n templateWidth = templateHeight = element.actualSize.height;\n }\n break;\n case 'Slice':\n if (element.actualSize.width >= element.actualSize.height) {\n templateWidth = templateHeight = element.actualSize.width;\n }\n else {\n templateWidth = templateHeight = element.actualSize.height;\n }\n break;\n }\n if (this.svgRenderer) {\n this.svgRenderer.drawNativeContent(element, nativeLayer, templateHeight, templateWidth, nativeSvg);\n }\n };\n DiagramRenderer.prototype.renderHTMLElement = function (element, canvas, htmlLayer, transform, parentSvg) {\n var options = this.getBaseAttributes(element, transform);\n options.fill = 'transparent';\n options.cornerRadius = element.cornerRadius;\n options.stroke = 'transparent';\n this.renderer.drawRectangle(canvas, options, this.diagramId, undefined, undefined, parentSvg);\n if (this.svgRenderer) {\n this.svgRenderer.drawHTMLContent(element, htmlLayer.children[0], transform);\n }\n };\n DiagramRenderer.prototype.renderImageElement = function (element, canvas, transform, parentSvg) {\n var options = this.getBaseAttributes(element, transform);\n options.cornerRadius = 0;\n this.renderer.drawRectangle(canvas, options, this.diagramId, undefined, undefined, parentSvg);\n // let sx: number; let sy: number;\n var imageWidth;\n var imageHeight;\n var sourceWidth;\n var sourceHeight;\n if (element.stretch === 'Stretch') {\n imageWidth = element.actualSize.width;\n imageHeight = element.actualSize.height;\n }\n else {\n var contentWidth = element.contentSize.width;\n var contentHeight = element.contentSize.height;\n var widthRatio = options.width / contentWidth;\n var heightRatio = options.height / contentHeight;\n var ratio = void 0;\n switch (element.stretch) {\n case 'Meet':\n ratio = Math.min(widthRatio, heightRatio);\n imageWidth = contentWidth * ratio;\n imageHeight = contentHeight * ratio;\n options.x += Math.abs(options.width - imageWidth) / 2;\n options.y += Math.abs(options.height - imageHeight) / 2;\n break;\n case 'Slice':\n widthRatio = options.width / contentWidth;\n heightRatio = options.height / contentHeight;\n ratio = Math.max(widthRatio, heightRatio);\n imageWidth = contentWidth * ratio;\n imageHeight = contentHeight * ratio;\n sourceWidth = options.width / imageWidth * contentWidth;\n sourceHeight = options.height / imageHeight * contentHeight;\n break;\n case 'None':\n imageWidth = contentWidth;\n imageHeight = contentHeight;\n break;\n }\n }\n options.width = imageWidth;\n options.height = imageHeight;\n //Commented for code coverage\n //(options as ImageAttributes).sourceX = sx;\n //(options as ImageAttributes).sourceY = sy;\n options.sourceWidth = sourceWidth;\n options.sourceHeight = sourceHeight;\n options.source = element.source;\n options.alignment = element.imageAlign;\n options.scale = element.imageScale;\n options.description = element.description ? element.description : element.id;\n this.renderer.drawImage(canvas, options, parentSvg);\n };\n DiagramRenderer.prototype.renderContainer = function (group, canvas, htmlLayer, transform, parentSvg, createParent) {\n var svgParent = { svg: parentSvg, g: canvas };\n if (this.diagramId) {\n parentSvg = this.getParentSvg(group) || parentSvg;\n if (this.isSvgMode) {\n var groupElement = void 0;\n groupElement = this.getParentElement(group, canvas, parentSvg).g || canvas;\n parentSvg = this.getParentSvg(this.hasNativeParent(group.children)) || parentSvg;\n var svgNativeParent = this.getParentElement(this.hasNativeParent(group.children), groupElement, parentSvg);\n svgParent.svg = svgNativeParent.svg || parentSvg;\n svgParent.g = svgNativeParent.g || groupElement;\n if (createParent) {\n if (parentSvg) {\n if (!parentSvg.getElementById(svgParent.g.id)) {\n canvas.appendChild(svgParent.g);\n }\n }\n canvas = svgParent.g;\n }\n else {\n canvas = svgParent.g;\n }\n }\n }\n this.renderRect(group, canvas, transform, parentSvg);\n if (group.hasChildren()) {\n var parentG = void 0;\n var svgParent_1;\n for (var _i = 0, _a = group.children; _i < _a.length; _i++) {\n var child = _a[_i];\n parentSvg = this.getParentSvg(this.hasNativeParent(group.children) || child) || parentSvg;\n if (this.isSvgMode) {\n svgParent_1 = this.getParentElement(this.hasNativeParent(group.children) || child, canvas, parentSvg);\n parentG = svgParent_1.g || canvas;\n if (svgParent_1.svg) {\n parentSvg = svgParent_1.svg;\n }\n }\n this.renderElement(child, parentG || canvas, htmlLayer, transform, parentSvg, true);\n }\n }\n };\n DiagramRenderer.prototype.hasNativeParent = function (children, count) {\n if (children && children.length > 0 && (count || 0 < 3)) {\n var child = children[0];\n if (child instanceof DiagramNativeElement) {\n return child;\n }\n else if (child.children && child.children.length) {\n this.hasNativeParent(child.children, count++ || 0);\n }\n }\n return undefined;\n };\n DiagramRenderer.prototype.renderRect = function (element, canvas, transform, parentSvg) {\n var options = this.getBaseAttributes(element, transform);\n options.cornerRadius = element.cornerRadius || 0;\n var ariaLabel = element.description ? element.description : element.id;\n this.renderer.drawRectangle(canvas, options, this.diagramId, undefined, undefined, parentSvg, ariaLabel);\n };\n DiagramRenderer.prototype.drawRect = function (canvas, options) {\n options.cornerRadius = 0;\n this.svgRenderer.drawRectangle(canvas, options, this.diagramId);\n };\n DiagramRenderer.prototype.getBaseAttributes = function (element, transform) {\n var options = {\n width: element.actualSize.width, height: element.actualSize.height,\n x: element.offsetX - element.actualSize.width * element.pivot.x + 0.5,\n y: element.offsetY - element.actualSize.height * element.pivot.y + 0.5,\n fill: element.style.fill, stroke: element.style.strokeColor, angle: element.rotateAngle + element.parentTransform,\n pivotX: element.pivot.x, pivotY: element.pivot.y, strokeWidth: element.style.strokeWidth,\n dashArray: element.style.strokeDashArray || '', opacity: element.style.opacity, shadow: element.shadow,\n gradient: element.style.gradient, visible: element.visible, id: element.id, description: element.description,\n };\n if (transform) {\n options.x += transform.tx;\n options.y += transform.ty;\n }\n return options;\n };\n DiagramRenderer.renderSvgBackGroundImage = function (background, diagramElement, x, y, width, height) {\n var container = document.getElementById(diagramElement.id);\n var backgroundLayer = getBackgroundLayerSvg(diagramElement.id);\n var target = backgroundLayer.getElementById(diagramElement.id + '_image');\n if (!target && background.source) {\n var bgimageLayer = getBackgroundImageLayer(diagramElement.id);\n target = document.createElementNS('http://www.w3.org/2000/svg', 'image');\n target.setAttribute('id', diagramElement.id + '_image');\n bgimageLayer.appendChild(target);\n target.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', background.source);\n }\n if (target) {\n var scale = background.scale !== 'None' ? background.scale : '';\n var imgAlign = background.align;\n var aspectRatio = imgAlign.charAt(0).toLowerCase() + imgAlign.slice(1) + ' '\n + scale.charAt(0).toLowerCase() + scale.slice(1);\n var container_1 = document.getElementById(diagramElement.id);\n var attr = {\n 'id': diagramElement.id + '_image', 'x': x, 'y': y,\n 'width': width, 'height': height,\n 'preserveAspectRatio': aspectRatio\n };\n setAttributeSvg(target, attr);\n }\n };\n DiagramRenderer.prototype.transformLayers = function (transform, svgMode) {\n //diagram layer\n if (svgMode) {\n var diagramLayer = getDiagramLayer(this.diagramId);\n diagramLayer.setAttribute('transform', 'translate('\n + (transform.tx * transform.scale) + ',' + (transform.ty * transform.scale) + '),scale('\n + transform.scale + ')');\n }\n //background\n //gridline\n var gridLayer = getGridLayer(this.diagramId);\n gridLayer.setAttribute('transform', 'translate(' + (transform.tx * transform.scale) + ','\n + (transform.ty * transform.scale) + ')');\n //portslayer \n var portsLayer = getPortsLayer(this.diagramId);\n portsLayer.setAttribute('transform', 'translate('\n + (transform.tx * transform.scale) + ',' + (transform.ty * transform.scale) + '),scale('\n + transform.scale + ')');\n //expandlayer\n var expandLayer = getExpandCollapseLayer(this.diagramId);\n expandLayer.setAttribute('transform', 'translate('\n + (transform.tx * transform.scale) + ',' + (transform.ty * transform.scale) + '),scale('\n + transform.scale + ')');\n //nativelayer\n var nativeLayer = getNativeLayer(this.diagramId);\n nativeLayer.setAttribute('transform', 'translate('\n + (transform.tx * transform.scale) + ',' + (transform.ty * transform.scale) + '),scale('\n + transform.scale + ')');\n //htmlLayer\n var htmlLayer = getHTMLLayer(this.diagramId).children[0];\n htmlLayer.style.transform = 'translate('\n + (transform.tx * transform.scale) + 'px,' + (transform.ty * transform.scale) + 'px)scale('\n + transform.scale + ')';\n };\n /** @private */\n DiagramRenderer.prototype.updateNode = function (element, diagramElementsLayer, htmlLayer, transform) {\n this.renderElement(element, diagramElementsLayer, htmlLayer, transform, this.getParentSvg(element));\n };\n return DiagramRenderer;\n}());\nexport { DiagramRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, Complex, ChildProperty } from '@syncfusion/ej2-base';\nimport { Margin } from '../core/appearance';\n/**\n * Defines the BackgroundImage of diagram\n */\nvar Background = /** @class */ (function (_super) {\n __extends(Background, _super);\n function Background() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], Background.prototype, \"source\", void 0);\n __decorate([\n Property('transparent')\n ], Background.prototype, \"color\", void 0);\n __decorate([\n Property('None')\n ], Background.prototype, \"scale\", void 0);\n __decorate([\n Property('None')\n ], Background.prototype, \"align\", void 0);\n return Background;\n}(ChildProperty));\nexport { Background };\n/**\n * Defines PageSettings\n */\nvar PageSettings = /** @class */ (function (_super) {\n __extends(PageSettings, _super);\n function PageSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], PageSettings.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], PageSettings.prototype, \"height\", void 0);\n __decorate([\n Complex({}, Margin)\n ], PageSettings.prototype, \"margin\", void 0);\n __decorate([\n Property('Landscape')\n ], PageSettings.prototype, \"orientation\", void 0);\n __decorate([\n Property('Infinity')\n ], PageSettings.prototype, \"boundaryConstraints\", void 0);\n __decorate([\n Complex({}, Background)\n ], PageSettings.prototype, \"background\", void 0);\n __decorate([\n Property(false)\n ], PageSettings.prototype, \"multiplePage\", void 0);\n __decorate([\n Property(false)\n ], PageSettings.prototype, \"showPageBreaks\", void 0);\n return PageSettings;\n}(ChildProperty));\nexport { PageSettings };\n/**\n * Diagram ScrollSettings module handles the scroller properties of the diagram\n */\nvar ScrollSettings = /** @class */ (function (_super) {\n __extends(ScrollSettings, _super);\n function ScrollSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(0)\n ], ScrollSettings.prototype, \"horizontalOffset\", void 0);\n __decorate([\n Property(0)\n ], ScrollSettings.prototype, \"verticalOffset\", void 0);\n __decorate([\n Property(1)\n ], ScrollSettings.prototype, \"currentZoom\", void 0);\n __decorate([\n Property(0)\n ], ScrollSettings.prototype, \"viewPortWidth\", void 0);\n __decorate([\n Property(0)\n ], ScrollSettings.prototype, \"viewPortHeight\", void 0);\n __decorate([\n Property(0.2)\n ], ScrollSettings.prototype, \"minZoom\", void 0);\n __decorate([\n Property(30)\n ], ScrollSettings.prototype, \"maxZoom\", void 0);\n __decorate([\n Property('Diagram')\n ], ScrollSettings.prototype, \"scrollLimit\", void 0);\n __decorate([\n Property()\n ], ScrollSettings.prototype, \"scrollableArea\", void 0);\n __decorate([\n Property(false)\n ], ScrollSettings.prototype, \"canAutoScroll\", void 0);\n __decorate([\n Complex({ left: 15, right: 15, top: 15, bottom: 15 }, Margin)\n ], ScrollSettings.prototype, \"autoScrollBorder\", void 0);\n return ScrollSettings;\n}(ChildProperty));\nexport { ScrollSettings };\n","/**\n * ServiceLocator\n * @hidden\n */\nvar ServiceLocator = /** @class */ (function () {\n function ServiceLocator() {\n this.services = {};\n }\n ServiceLocator.prototype.register = function (name, type) {\n this.services[name] = type;\n };\n ServiceLocator.prototype.getService = function (name) {\n return this.services[name];\n };\n return ServiceLocator;\n}());\nexport { ServiceLocator };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, Complex, ChildProperty } from '@syncfusion/ej2-base';\nimport { SnapConstraints } from '../enum/enum';\n/**\n * Defines gridlines\n */\nvar Gridlines = /** @class */ (function (_super) {\n __extends(Gridlines, _super);\n function Gridlines() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('lightgray')\n ], Gridlines.prototype, \"lineColor\", void 0);\n __decorate([\n Property('')\n ], Gridlines.prototype, \"lineDashArray\", void 0);\n __decorate([\n Property([1.25, 18.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75])\n ], Gridlines.prototype, \"lineIntervals\", void 0);\n __decorate([\n Property([20])\n ], Gridlines.prototype, \"snapIntervals\", void 0);\n return Gridlines;\n}(ChildProperty));\nexport { Gridlines };\n/**\n * Defines the public properties of diagram\n */\nvar SnapSettings = /** @class */ (function (_super) {\n __extends(SnapSettings, _super);\n function SnapSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Complex({}, Gridlines)\n ], SnapSettings.prototype, \"horizontalGridlines\", void 0);\n __decorate([\n Complex({}, Gridlines)\n ], SnapSettings.prototype, \"verticalGridlines\", void 0);\n __decorate([\n Property(SnapConstraints.All)\n ], SnapSettings.prototype, \"constraints\", void 0);\n __decorate([\n Property(5)\n ], SnapSettings.prototype, \"snapAngle\", void 0);\n __decorate([\n Property(5)\n ], SnapSettings.prototype, \"snapObjectDistance\", void 0);\n return SnapSettings;\n}(ChildProperty));\nexport { SnapSettings };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty, Complex } from '@syncfusion/ej2-base';\n/**\n * defines the Properties for the Diagram Ruler\n */\nvar DiagramRuler = /** @class */ (function (_super) {\n __extends(DiagramRuler, _super);\n function DiagramRuler() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(5)\n ], DiagramRuler.prototype, \"interval\", void 0);\n __decorate([\n Property(100)\n ], DiagramRuler.prototype, \"segmentWidth\", void 0);\n __decorate([\n Property('Horizontal')\n ], DiagramRuler.prototype, \"orientation\", void 0);\n __decorate([\n Property('RightOrBottom')\n ], DiagramRuler.prototype, \"tickAlignment\", void 0);\n __decorate([\n Property('red')\n ], DiagramRuler.prototype, \"markerColor\", void 0);\n __decorate([\n Property(25)\n ], DiagramRuler.prototype, \"thickness\", void 0);\n __decorate([\n Property(null)\n ], DiagramRuler.prototype, \"arrangeTick\", void 0);\n return DiagramRuler;\n}(ChildProperty));\nexport { DiagramRuler };\n/**\n * Defines rulers\n */\nvar RulerSettings = /** @class */ (function (_super) {\n __extends(RulerSettings, _super);\n function RulerSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(false)\n ], RulerSettings.prototype, \"showRulers\", void 0);\n __decorate([\n Property(true)\n ], RulerSettings.prototype, \"dynamicGrid\", void 0);\n __decorate([\n Complex({ orientation: 'Horizontal' }, DiagramRuler)\n ], RulerSettings.prototype, \"horizontalRuler\", void 0);\n __decorate([\n Complex({ orientation: 'Vertical' }, DiagramRuler)\n ], RulerSettings.prototype, \"verticalRuler\", void 0);\n return RulerSettings;\n}(ChildProperty));\nexport { RulerSettings };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * data source defines the basic unit of diagram\n */\nvar DataSource = /** @class */ (function (_super) {\n __extends(DataSource, _super);\n function DataSource() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], DataSource.prototype, \"id\", void 0);\n __decorate([\n Property(null)\n ], DataSource.prototype, \"dataManager\", void 0);\n __decorate([\n Property('')\n ], DataSource.prototype, \"root\", void 0);\n __decorate([\n Property('')\n ], DataSource.prototype, \"parentId\", void 0);\n __decorate([\n Property()\n ], DataSource.prototype, \"data\", void 0);\n __decorate([\n Property()\n ], DataSource.prototype, \"doBinding\", void 0);\n return DataSource;\n}(ChildProperty));\nexport { DataSource };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Margin } from '../core/appearance';\nimport { Property, Complex, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * Defines the behavior of the automatic layouts\n */\nvar Layout = /** @class */ (function (_super) {\n __extends(Layout, _super);\n function Layout() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], Layout.prototype, \"fixedNode\", void 0);\n __decorate([\n Property(30)\n ], Layout.prototype, \"horizontalSpacing\", void 0);\n __decorate([\n Property(30)\n ], Layout.prototype, \"verticalSpacing\", void 0);\n __decorate([\n Property(30)\n ], Layout.prototype, \"maxIteration\", void 0);\n __decorate([\n Property(40)\n ], Layout.prototype, \"springFactor\", void 0);\n __decorate([\n Property(50)\n ], Layout.prototype, \"springLength\", void 0);\n __decorate([\n Complex({ left: 50, top: 50, right: 0, bottom: 0 }, Margin)\n ], Layout.prototype, \"margin\", void 0);\n __decorate([\n Property('Auto')\n ], Layout.prototype, \"horizontalAlignment\", void 0);\n __decorate([\n Property('Auto')\n ], Layout.prototype, \"verticalAlignment\", void 0);\n __decorate([\n Property('TopToBottom')\n ], Layout.prototype, \"orientation\", void 0);\n __decorate([\n Property('Auto')\n ], Layout.prototype, \"connectionDirection\", void 0);\n __decorate([\n Property('Default')\n ], Layout.prototype, \"connectorSegments\", void 0);\n __decorate([\n Property('None')\n ], Layout.prototype, \"type\", void 0);\n __decorate([\n Property()\n ], Layout.prototype, \"getLayoutInfo\", void 0);\n __decorate([\n Property()\n ], Layout.prototype, \"getBranch\", void 0);\n __decorate([\n Property()\n ], Layout.prototype, \"bounds\", void 0);\n __decorate([\n Property(true)\n ], Layout.prototype, \"enableAnimation\", void 0);\n __decorate([\n Property('')\n ], Layout.prototype, \"root\", void 0);\n return Layout;\n}(ChildProperty));\nexport { Layout };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { Node } from '../objects/node';\nimport { Connector } from '../objects/connector';\nimport { Point } from '../primitives/point';\nimport { BpmnSubEvent } from '../objects/node';\nimport { PointPort } from '../objects/port';\nimport { rotatePoint, cloneObject } from '../utility/base-util';\nimport { Rect } from '../primitives/rect';\nimport { getPolygonPath } from '../utility/path-util';\nimport { canOutConnect, canInConnect, canAllowDrop } from '../utility/constraints-util';\nimport { transformPointByMatrix, rotateMatrix, identityMatrix } from '../primitives/matrix';\nimport { NodeConstraints, DiagramEvent } from './../enum/enum';\nimport { contains } from './actions';\n/**\n * Defines the interactive tools\n */\nvar ToolBase = /** @class */ (function () {\n /**\n * Initializes the tool\n * @param command Command that is corresponding to the current action\n */\n function ToolBase(command, protectChange) {\n if (protectChange === void 0) { protectChange = false; }\n /**\n * Command that is corresponding to the current action\n */\n this.commandHandler = null;\n /**\n * Sets/Gets whether the interaction is being done\n */\n this.inAction = false;\n /**\n * Sets/Gets the protect change\n */\n this.isProtectChange = false;\n /**\n * Sets/Gets the current element that is under mouse\n */\n this.currentElement = null;\n this.blocked = false;\n this.isTooltipVisible = false;\n /** @private */\n this.childTable = {};\n /**\n * Sets/Gets the previous object when mouse down\n */\n this.undoElement = { nodes: [], connectors: [] };\n this.undoParentElement = { nodes: [], connectors: [] };\n this.commandHandler = command;\n this.isProtectChange = protectChange;\n }\n ToolBase.prototype.startAction = function (currentElement) {\n this.currentElement = currentElement;\n this.inAction = true;\n };\n ToolBase.prototype.mouseDown = function (args) {\n this.currentElement = args.source;\n this.startPosition = this.currentPosition = this.prevPosition = args.position;\n this.isTooltipVisible = true;\n this.startAction(args.source);\n this.commandHandler.startTransaction(this.isProtectChange);\n };\n ToolBase.prototype.mouseMove = function (args) {\n this.currentPosition = args.position;\n //this.currentElement = currentElement;\n return !this.blocked;\n };\n ToolBase.prototype.mouseUp = function (args) {\n this.currentPosition = args.position;\n // this.currentElement = currentElement;\n this.isTooltipVisible = false;\n this.commandHandler.endTransaction(this.isProtectChange);\n //At the end\n this.endAction();\n };\n ToolBase.prototype.endAction = function () {\n if (!this.isTooltipVisible) {\n this.commandHandler.closeTooltip();\n }\n this.commandHandler = null;\n this.currentElement = null;\n this.currentPosition = null;\n this.inAction = false;\n this.blocked = false;\n };\n ToolBase.prototype.mouseWheel = function (args) {\n this.currentPosition = args.position;\n };\n ToolBase.prototype.mouseLeave = function (args) {\n this.mouseUp(args);\n };\n return ToolBase;\n}());\nexport { ToolBase };\n/**\n * Helps to select the objects\n */\nvar SelectTool = /** @class */ (function (_super) {\n __extends(SelectTool, _super);\n function SelectTool() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n SelectTool.prototype.mouseDown = function (args) {\n this.inAction = true;\n _super.prototype.mouseDown.call(this, args);\n };\n SelectTool.prototype.mouseMove = function (args) {\n _super.prototype.mouseMove.call(this, args);\n //draw selected region\n if (this.inAction && Point.equals(this.currentPosition, this.prevPosition) === false) {\n var rect = Rect.toBounds([this.prevPosition, this.currentPosition]);\n this.commandHandler.drawSelectionRectangle(rect.x, rect.y, rect.width, rect.height);\n }\n return !this.blocked;\n };\n SelectTool.prototype.mouseUp = function (args) {\n //rubber band selection\n if (Point.equals(this.currentPosition, this.prevPosition) === false && this.inAction) {\n var region = Rect.toBounds([this.prevPosition, this.currentPosition]);\n this.commandHandler.doRubberBandSelection(region);\n }\n else {\n //single selection\n var arrayNodes = this.commandHandler.getSelectedObject();\n if (!this.commandHandler.hasSelection() || !args.info || !args.info.ctrlKey) {\n this.commandHandler.clearSelection(args.source === null ? true : false);\n if (args.source) {\n this.commandHandler.selectObjects([args.source], false, arrayNodes);\n }\n }\n else {\n //handling multiple selection\n if (args && args.source) {\n if (!this.commandHandler.isSelected(args.source)) {\n this.commandHandler.selectObjects([args.source], true);\n }\n else {\n if (args.clickCount === 1) {\n this.commandHandler.unSelect(args.source);\n }\n }\n }\n }\n }\n this.inAction = false;\n _super.prototype.mouseUp.call(this, args);\n };\n SelectTool.prototype.mouseLeave = function (args) {\n if (this.inAction) {\n this.mouseUp(args);\n }\n };\n return SelectTool;\n}(ToolBase));\nexport { SelectTool };\n/**\n * Helps to edit the selected connectors\n */\nvar ConnectTool = /** @class */ (function (_super) {\n __extends(ConnectTool, _super);\n function ConnectTool(commandHandler, endPoint) {\n var _this = _super.call(this, commandHandler, true) || this;\n _this.endPoint = endPoint;\n return _this;\n }\n ConnectTool.prototype.mouseDown = function (args) {\n this.inAction = true;\n this.undoElement = undefined;\n if (!(this instanceof ConnectorDrawingTool)) {\n this.undoElement = cloneObject(args.source);\n }\n _super.prototype.mouseDown.call(this, args);\n var oldValue;\n var connectors;\n if (args.source && args.source.connectors) {\n oldValue = { x: this.prevPosition.x, y: this.prevPosition.y };\n connectors = args.source.connectors[0];\n }\n // Sets the selected segment \n if (this.endPoint === 'BezierSourceThumb' || this.endPoint === 'BezierTargetThumb') {\n for (var i = 0; i < connectors.segments.length; i++) {\n var segment = connectors.segments[i];\n var segmentpoint1 = !Point.isEmptyPoint(segment.point1) ? segment.point1 : segment.bezierPoint1;\n var segmentpoint2 = !Point.isEmptyPoint(segment.point2) ? segment.point2 : segment.bezierPoint2;\n if (contains(this.currentPosition, segmentpoint1, connectors.hitPadding) ||\n contains(this.currentPosition, segmentpoint2, connectors.hitPadding)) {\n this.selectedSegment = segment;\n }\n }\n }\n this.currentPosition = args.position;\n };\n ConnectTool.prototype.mouseUp = function (args) {\n this.commandHandler.updateSelector();\n this.commandHandler.removeSnap();\n if ((!(this instanceof ConnectorDrawingTool)) && ((this.endPoint === 'ConnectorSourceEnd' &&\n ((!Point.equals(args.source.connectors[0].sourcePoint, this.undoElement.connectors[0].sourcePoint) ||\n (args.source.connectors[0].sourceID !== this.undoElement.connectors[0].sourceID)))) ||\n (this.endPoint === 'ConnectorTargetEnd' &&\n ((!Point.equals(args.source.connectors[0].targetPoint, this.undoElement.connectors[0].targetPoint))\n || (args.source.connectors[0].targetID !== this.undoElement.connectors[0].targetID))))) {\n var oldValues = void 0;\n var connector = void 0;\n if (args.source && args.source.connectors) {\n oldValues = {\n x: this.prevPosition.x, y: this.prevPosition.y\n };\n connector = args.source.connectors[0];\n }\n var targetPortName = void 0;\n var targetNodeNode = void 0;\n if (args.target) {\n var target = this.commandHandler.findTarget(args.targetWrapper, args.target, this.endPoint === 'ConnectorSourceEnd');\n (target instanceof PointPort) ? targetPortName = target.id : targetNodeNode = target.id;\n }\n var arg = {\n connector: connector, state: 'Completed', targetNode: targetNodeNode,\n oldValue: oldValues, newValue: oldValues, cancel: false, targetPort: targetPortName\n };\n var trigger = this.endPoint === 'ConnectorSourceEnd' ? DiagramEvent.sourcePointChange : DiagramEvent.targetPointChange;\n this.commandHandler.triggerEvent(trigger, arg);\n this.commandHandler.removeTerminalSegment(connector, true);\n if (this.undoElement && args.source) {\n var obj = void 0;\n obj = cloneObject(args.source);\n var entry = {\n type: 'ConnectionChanged', redoObject: cloneObject(obj), undoObject: cloneObject(this.undoElement),\n category: 'Internal'\n };\n this.commandHandler.addHistoryEntry(entry);\n }\n }\n else if (!(this instanceof ConnectorDrawingTool) &&\n (this.endPoint === 'BezierTargetThumb' || this.endPoint === 'BezierSourceThumb')) {\n if (this.undoElement && args.source) {\n var obj = void 0;\n obj = cloneObject(args.source);\n var entry = {\n type: 'SegmentChanged', redoObject: obj, undoObject: this.undoElement, category: 'Internal'\n };\n this.commandHandler.addHistoryEntry(entry);\n }\n }\n _super.prototype.mouseUp.call(this, args);\n };\n ConnectTool.prototype.mouseMove = function (args) {\n _super.prototype.mouseMove.call(this, args);\n if ((!(this instanceof ConnectorDrawingTool)) && ((this.endPoint === 'ConnectorSourceEnd' &&\n Point.equals(args.source.connectors[0].sourcePoint, this.undoElement.connectors[0].sourcePoint)) ||\n (this.endPoint === 'ConnectorTargetEnd' &&\n Point.equals(args.source.connectors[0].targetPoint, this.undoElement.connectors[0].targetPoint)))) {\n var oldValue = void 0;\n var connectors = void 0;\n if (args.source && args.source.connectors) {\n oldValue = { x: this.prevPosition.x, y: this.prevPosition.y };\n connectors = args.source.connectors[0];\n }\n var targetPort = void 0;\n var targetNode = void 0;\n if (args.target) {\n targetNode = args.target.id;\n var target = this.commandHandler.findTarget(args.targetWrapper, args.target, this.endPoint === 'ConnectorSourceEnd');\n (target instanceof PointPort || target instanceof BpmnSubEvent) ? targetPort = target.id : targetNode = target.id;\n }\n var arg = {\n connector: connectors, state: 'Start', targetNode: targetNode,\n oldValue: oldValue, newValue: oldValue, cancel: false, targetPort: targetPort\n };\n var trigger = this.endPoint === 'ConnectorSourceEnd' ?\n DiagramEvent.sourcePointChange : DiagramEvent.targetPointChange;\n this.commandHandler.triggerEvent(trigger, arg);\n }\n this.currentPosition = args.position;\n if (this.currentPosition && this.prevPosition) {\n var diffX = this.currentPosition.x - this.prevPosition.x;\n var diffY = this.currentPosition.y - this.prevPosition.y;\n var newValue = void 0;\n var oldValue = void 0;\n this.currentPosition = this.commandHandler.snapConnectorEnd(this.currentPosition);\n var connector = void 0;\n if (args.source && args.source.connectors) {\n newValue = {\n x: this.currentPosition.x, y: this.currentPosition.y,\n };\n oldValue = {\n x: this.prevPosition.x, y: this.prevPosition.y\n };\n connector = args.source.connectors[0];\n }\n var targetPortId = void 0;\n var targetNodeId = void 0;\n if (args.target) {\n var target = this.commandHandler.findTarget(args.targetWrapper, args.target, this.endPoint === 'ConnectorSourceEnd');\n (target instanceof PointPort) ? targetPortId = target.id : targetNodeId = target.id;\n }\n var arg = {\n connector: connector, state: 'Progress', targetNode: targetNodeId,\n oldValue: oldValue, newValue: newValue, cancel: false, targetPort: targetPortId\n };\n if (!(this instanceof ConnectorDrawingTool)) {\n var trigger = this.endPoint === 'ConnectorSourceEnd' ?\n DiagramEvent.sourcePointChange : DiagramEvent.targetPointChange;\n this.commandHandler.triggerEvent(trigger, arg);\n }\n if (!arg.cancel && this.inAction && this.endPoint !== undefined && diffX !== 0 || diffY !== 0) {\n this.blocked = !this.commandHandler.dragConnectorEnds(this.endPoint, args.source, this.currentPosition, this.selectedSegment, args.target, targetPortId);\n this.commandHandler.updateSelector();\n if (args.target && ((this.endPoint === 'ConnectorSourceEnd' && canOutConnect(args.target))\n || (this.endPoint === 'ConnectorTargetEnd' && canInConnect(args.target)))) {\n if (this.commandHandler.canDisconnect(this.endPoint, args, targetPortId, targetNodeId)) {\n this.commandHandler.disConnect(args.source, this.endPoint);\n }\n this.commandHandler.connect(this.endPoint, args);\n }\n else if (this.endPoint.indexOf('Bezier') === -1) {\n this.commandHandler.disConnect(args.source, this.endPoint);\n this.commandHandler.updateSelector();\n }\n }\n if (this.commandHandler.canEnableDefaultTooltip()) {\n var content = this.getTooltipContent(args.position);\n this.commandHandler.showTooltip(args.source, args.position, content, 'ConnectTool', this.isTooltipVisible);\n this.isTooltipVisible = false;\n }\n }\n this.prevPosition = this.currentPosition;\n return !this.blocked;\n };\n ConnectTool.prototype.mouseLeave = function (args) {\n this.mouseUp(args);\n };\n ConnectTool.prototype.getTooltipContent = function (position) {\n return 'X:' + Math.round(position.x) + ' ' + 'Y:' + Math.round(position.y);\n };\n ConnectTool.prototype.endAction = function () {\n _super.prototype.endAction.call(this);\n this.prevPosition = null;\n this.endPoint = null;\n };\n return ConnectTool;\n}(ToolBase));\nexport { ConnectTool };\n/**\n * Drags the selected objects\n */\nvar MoveTool = /** @class */ (function (_super) {\n __extends(MoveTool, _super);\n function MoveTool(commandHandler, objType) {\n var _this = _super.call(this, commandHandler, true) || this;\n _this.currentTarget = null;\n _this.objectType = objType;\n return _this;\n }\n MoveTool.prototype.mouseDown = function (args) {\n if (args.source instanceof Node || args.source instanceof Connector) {\n this.commandHandler.selectObjects([args.source], args.info && args.info.ctrlKey);\n var selectedObject = { nodes: [], connectors: [] };\n if (args.source instanceof Node) {\n selectedObject.nodes.push(cloneObject(args.source));\n }\n else {\n selectedObject.connectors.push(cloneObject(args.source));\n }\n this.undoElement = cloneObject(selectedObject);\n }\n else {\n this.undoElement = cloneObject(args.source);\n }\n this.undoParentElement = this.commandHandler.getSubProcess(args.source);\n _super.prototype.mouseDown.call(this, args);\n this.initialOffset = { x: 0, y: 0 };\n };\n MoveTool.prototype.mouseUp = function (args) {\n var obj;\n var historyAdded = false;\n if (this.objectType !== 'Port') {\n if (args.source instanceof Node || args.source instanceof Connector) {\n var redoObject = { nodes: [], connectors: [] };\n if (args.source instanceof Node) {\n redoObject.nodes.push(cloneObject(args.source));\n }\n else {\n redoObject.connectors.push(cloneObject(args.source));\n }\n obj = cloneObject(redoObject);\n var wrapper = args.source.wrapper;\n obj.offsetX = wrapper.offsetX;\n obj.offsetY = wrapper.offsetY;\n }\n else {\n obj = cloneObject(args.source);\n }\n if (obj.offsetX !== this.undoElement.offsetX || obj.offsetY !== this.undoElement.offsetY) {\n var oldValues = void 0;\n var newValues = void 0;\n if (args.source) {\n newValues = { offsetX: args.source.wrapper.offsetX, offsetY: args.source.wrapper.offsetY };\n oldValues = { offsetX: args.source.wrapper.offsetX, offsetY: args.source.wrapper.offsetY };\n }\n var arg = {\n source: args.source, state: 'Completed', oldValue: oldValues, newValue: newValues,\n target: this.currentTarget, targetPosition: this.currentPosition, allowDrop: true, cancel: false\n };\n this.commandHandler.triggerEvent(DiagramEvent.positionChange, arg);\n this.commandHandler.startGroupAction();\n historyAdded = true;\n var entry = {\n type: 'PositionChanged',\n redoObject: cloneObject(obj), undoObject: cloneObject(this.undoElement), category: 'Internal'\n };\n if (obj.nodes[0] && obj.nodes[0].processId) {\n var entry_1 = {\n type: 'SizeChanged', category: 'Internal',\n undoObject: this.undoParentElement, redoObject: this.commandHandler.getSubProcess(args.source)\n };\n this.commandHandler.addHistoryEntry(entry_1);\n }\n this.commandHandler.addHistoryEntry(entry);\n }\n var snappedPoint = this.commandHandler.snapPoint(this.prevPosition, this.currentPosition, 0, 0);\n this.commandHandler.removeSnap();\n this.commandHandler.removeHighlighter();\n if (args.source && this.currentTarget && canAllowDrop(this.currentTarget) &&\n this.commandHandler.isDroppable(args.source, this.currentTarget)) {\n this.commandHandler.drop(this.currentElement, this.currentTarget, this.currentPosition);\n var arg = {\n element: args.source, target: this.currentTarget, position: this.currentPosition, cancel: false\n };\n this.commandHandler.triggerEvent(DiagramEvent.drop, arg);\n }\n this.commandHandler.updateSelector();\n if (historyAdded) {\n this.commandHandler.endGroupAction();\n }\n }\n _super.prototype.mouseUp.call(this, args);\n };\n MoveTool.prototype.mouseMove = function (args) {\n _super.prototype.mouseMove.call(this, args);\n var isSame = false;\n if (args.source instanceof Node || args.source instanceof Connector) {\n if (args.source instanceof Node) {\n if (args.source.offsetX === this.undoElement.nodes[0].offsetX &&\n args.source.offsetY === this.undoElement.nodes[0].offsetY) {\n isSame = true;\n }\n }\n else {\n if (Point.equals(args.source.sourcePoint, this.undoElement.connectors[0].sourcePoint) &&\n Point.equals(args.source.targetPoint, this.undoElement.connectors[0].targetPoint)) {\n isSame = true;\n }\n }\n }\n else {\n if (args.source.wrapper.offsetX === this.undoElement.wrapper.offsetX &&\n args.source.wrapper.offsetY === this.undoElement.wrapper.offsetY) {\n isSame = true;\n }\n }\n var oldValues;\n if (args.source) {\n oldValues = { offsetX: args.source.wrapper.offsetX, offsetY: args.source.wrapper.offsetY };\n }\n var arg = {\n source: args.source, state: 'Start', oldValue: oldValues, newValue: oldValues,\n target: args.target, targetPosition: args.position, allowDrop: true, cancel: false\n };\n if (isSame) {\n this.commandHandler.triggerEvent(DiagramEvent.positionChange, arg);\n }\n this.currentPosition = args.position;\n if (this.objectType !== 'Port') {\n var x = this.currentPosition.x - this.prevPosition.x;\n var y = this.currentPosition.y - this.prevPosition.y;\n var diffX = this.initialOffset.x + (this.currentPosition.x - this.prevPosition.x);\n var diffY = this.initialOffset.y + (this.currentPosition.y - this.prevPosition.y);\n this.commandHandler.dragOverElement(args, this.currentPosition);\n this.commandHandler.disConnect(args.source);\n this.commandHandler.removeSnap();\n var oldValues_1;\n var newValues = void 0;\n var snappedPoint = this.commandHandler.snapPoint(this.prevPosition, this.currentPosition, diffX, diffY);\n this.initialOffset.x = diffX - snappedPoint.x;\n this.initialOffset.y = diffY - snappedPoint.y;\n if (args.source) {\n oldValues_1 = { offsetX: args.source.wrapper.offsetX, offsetY: args.source.wrapper.offsetY };\n newValues = {\n offsetX: args.source.wrapper.offsetX + snappedPoint.x,\n offsetY: args.source.wrapper.offsetY + snappedPoint.y\n };\n }\n if (this.currentTarget && args.target !== this.currentTarget) {\n this.commandHandler.removeChildFromBPmn(args.source, args.target, this.currentTarget);\n }\n this.currentTarget = args.target;\n var arg_1 = {\n source: args.source, state: 'Progress', oldValue: oldValues_1, newValue: newValues,\n target: args.target, targetPosition: args.position, allowDrop: true, cancel: false\n };\n this.commandHandler.triggerEvent(DiagramEvent.positionChange, arg_1);\n if (!arg_1.cancel) {\n this.blocked = !this.commandHandler.dragSelectedObjects(snappedPoint.x, snappedPoint.y);\n var blocked = !(this.commandHandler.mouseOver(this.currentElement, this.currentTarget, this.currentPosition));\n this.blocked = this.blocked || blocked;\n }\n if (this.currentTarget && (args.source !== this.currentTarget) &&\n this.commandHandler.isDroppable(args.source, this.currentTarget)) {\n this.commandHandler.drawHighlighter(this.currentTarget);\n }\n else {\n this.commandHandler.removeHighlighter();\n }\n if (this.commandHandler.canEnableDefaultTooltip()) {\n var content = this.getTooltipContent(args.source);\n this.commandHandler.showTooltip(args.source, args.position, content, 'MoveTool', this.isTooltipVisible);\n this.isTooltipVisible = false;\n }\n }\n else {\n this.commandHandler.portDrag(args.source, args.sourceWrapper, args.position.x - this.prevPosition.x, args.position.y - this.prevPosition.y);\n }\n this.prevPosition = this.currentPosition;\n return !this.blocked;\n };\n MoveTool.prototype.getTooltipContent = function (node) {\n return 'X:' + Math.round(node.wrapper.bounds.x) + ' ' + 'Y:' + Math.round(node.wrapper.bounds.y);\n };\n MoveTool.prototype.mouseLeave = function (args) {\n this.mouseUp(args);\n };\n MoveTool.prototype.endAction = function () {\n _super.prototype.endAction.call(this);\n this.currentTarget = null;\n this.prevPosition = null;\n };\n return MoveTool;\n}(ToolBase));\nexport { MoveTool };\n/**\n * Rotates the selected objects\n */\nvar RotateTool = /** @class */ (function (_super) {\n __extends(RotateTool, _super);\n function RotateTool(commandHandler) {\n return _super.call(this, commandHandler, true) || this;\n }\n RotateTool.prototype.mouseDown = function (args) {\n this.undoElement = cloneObject(args.source);\n if (this.undoElement.nodes[0] && this.undoElement.nodes[0].children) {\n var objects = [];\n var nodes = this.commandHandler.getAllDescendants(this.undoElement.nodes[0], objects);\n for (var i = 0; i < nodes.length; i++) {\n var node = this.commandHandler.cloneChild(nodes[i].id);\n this.childTable[nodes[i].id] = cloneObject(node);\n }\n }\n _super.prototype.mouseDown.call(this, args);\n };\n RotateTool.prototype.mouseUp = function (args) {\n if (this.undoElement.rotateAngle !== args.source.wrapper.rotateAngle) {\n var oldValue = { rotateAngle: args.source.wrapper.rotateAngle };\n var arg = {\n source: args.source, state: 'Completed', oldValue: oldValue,\n newValue: oldValue, cancel: false\n };\n this.commandHandler.triggerEvent(DiagramEvent.rotateChange, arg);\n var obj = void 0;\n obj = cloneObject(args.source);\n var entry = {\n type: 'RotationChanged', redoObject: cloneObject(obj), undoObject: cloneObject(this.undoElement), category: 'Internal',\n childTable: this.childTable\n };\n this.commandHandler.addHistoryEntry(entry);\n this.commandHandler.updateSelector();\n }\n _super.prototype.mouseUp.call(this, args);\n };\n RotateTool.prototype.mouseMove = function (args) {\n _super.prototype.mouseMove.call(this, args);\n if (this.undoElement.rotateAngle === args.source.wrapper.rotateAngle) {\n var oldValue_1 = { rotateAngle: args.source.wrapper.rotateAngle };\n var arg_2 = {\n source: args.source, state: 'Start', oldValue: oldValue_1, newValue: oldValue_1, cancel: false\n };\n this.commandHandler.triggerEvent(DiagramEvent.rotateChange, arg_2);\n }\n this.currentPosition = args.position;\n var refPoint = { x: this.currentElement.wrapper.offsetX, y: this.currentElement.wrapper.offsetY };\n var angle = Point.findAngle(refPoint, this.currentPosition) + 90;\n var snapAngle = this.commandHandler.snapAngle(angle);\n angle = snapAngle !== 0 ? snapAngle : angle;\n angle = (angle + 360) % 360;\n var oldValue = { rotateAngle: args.source.wrapper.rotateAngle };\n var newValue = { rotateAngle: angle };\n var arg = {\n source: args.source, state: 'Progress', oldValue: oldValue,\n newValue: newValue, cancel: false\n };\n this.commandHandler.triggerEvent(DiagramEvent.rotateChange, arg);\n if (!arg.cancel) {\n this.blocked = !(this.commandHandler.rotateSelectedItems(angle - this.currentElement.wrapper.rotateAngle));\n }\n if (this.commandHandler.canEnableDefaultTooltip()) {\n var content = this.getTooltipContent(args.source);\n this.commandHandler.showTooltip(args.source, args.position, content, 'RotateTool', this.isTooltipVisible);\n this.isTooltipVisible = false;\n }\n return !this.blocked;\n };\n RotateTool.prototype.getTooltipContent = function (node) {\n return Math.round((node.rotateAngle % 360)).toString() + '\\xB0';\n };\n RotateTool.prototype.mouseLeave = function (args) {\n this.mouseUp(args);\n };\n RotateTool.prototype.endAction = function () {\n _super.prototype.endAction.call(this);\n };\n return RotateTool;\n}(ToolBase));\nexport { RotateTool };\n/**\n * Scales the selected objects\n */\nvar ResizeTool = /** @class */ (function (_super) {\n __extends(ResizeTool, _super);\n function ResizeTool(commandHandler, corner) {\n var _this = _super.call(this, commandHandler, true) || this;\n _this.initialBounds = new Rect();\n _this.corner = corner;\n return _this;\n }\n ResizeTool.prototype.mouseDown = function (args) {\n this.undoElement = cloneObject(args.source);\n this.undoParentElement = this.commandHandler.getSubProcess(args.source);\n _super.prototype.mouseDown.call(this, args);\n if (this.undoElement.nodes[0] && this.undoElement.nodes[0].children) {\n var elements = [];\n var nodes = this.commandHandler.getAllDescendants(this.undoElement.nodes[0], elements);\n for (var i = 0; i < nodes.length; i++) {\n var node = this.commandHandler.cloneChild(nodes[i].id);\n this.childTable[nodes[i].id] = cloneObject(node);\n }\n }\n _super.prototype.mouseDown.call(this, args);\n this.initialBounds.x = args.source.wrapper.offsetX;\n this.initialBounds.y = args.source.wrapper.offsetY;\n this.initialBounds.height = args.source.wrapper.actualSize.height;\n this.initialBounds.width = args.source.wrapper.actualSize.width;\n };\n ResizeTool.prototype.mouseUp = function (args) {\n this.commandHandler.removeSnap();\n if (this.undoElement.offsetX !== args.source.wrapper.offsetX || this.undoElement.offsetY !== args.source.wrapper.offsetY) {\n this.blocked = this.updateSize(args.source, this.currentPosition, this.prevPosition, this.corner);\n var oldValue = {\n offsetX: args.source.wrapper.offsetX, offsetY: args.source.wrapper.offsetY,\n width: args.source.wrapper.actualSize.width, height: args.source.wrapper.actualSize.height\n };\n var arg = {\n source: args.source, state: 'Completed',\n oldValue: oldValue, newValue: oldValue, cancel: false\n };\n this.commandHandler.triggerEvent(DiagramEvent.sizeChange, arg);\n var obj = cloneObject(args.source);\n var entry = {\n type: 'SizeChanged', redoObject: cloneObject(obj), undoObject: cloneObject(this.undoElement), category: 'Internal',\n childTable: this.childTable\n };\n this.commandHandler.startGroupAction();\n this.commandHandler.addHistoryEntry(entry);\n if (obj.nodes[0] && obj.nodes[0].processId) {\n var entry_2 = {\n type: 'SizeChanged', redoObject: this.commandHandler.getSubProcess(args.source),\n undoObject: this.undoParentElement, category: 'Internal'\n };\n this.commandHandler.addHistoryEntry(entry_2);\n }\n this.commandHandler.endGroupAction();\n }\n _super.prototype.mouseUp.call(this, args);\n return !this.blocked;\n };\n ResizeTool.prototype.mouseMove = function (args) {\n _super.prototype.mouseMove.call(this, args);\n if (this.undoElement.offsetX === args.source.wrapper.offsetX && this.undoElement.offsetY === args.source.wrapper.offsetY) {\n var oldValue = {\n offsetX: args.source.wrapper.offsetX, offsetY: args.source.wrapper.offsetY,\n width: args.source.wrapper.actualSize.width, height: args.source.wrapper.actualSize.height\n };\n var arg = {\n source: args.source, state: 'Start', oldValue: oldValue, newValue: this.currentElement, cancel: false\n };\n this.commandHandler.triggerEvent(DiagramEvent.sizeChange, arg);\n }\n this.currentPosition = args.position;\n var x = this.currentPosition.x - this.startPosition.x;\n var y = this.currentPosition.y - this.startPosition.y;\n var changes = { x: x, y: y };\n changes = rotatePoint(-this.currentElement.wrapper.rotateAngle, undefined, undefined, changes);\n var sx = (this.currentElement.wrapper.actualSize.width + changes.x) / this.currentElement.wrapper.actualSize.width;\n var sy = (this.currentElement.wrapper.actualSize.height + changes.y) / this.currentElement.wrapper.actualSize.height;\n changes = this.getChanges(changes);\n this.commandHandler.removeSnap();\n this.blocked = !(this.updateSize(args.source, this.startPosition, this.currentPosition, this.corner));\n if (this.commandHandler.canEnableDefaultTooltip()) {\n var content = this.getTooltipContent(args.source);\n this.commandHandler.showTooltip(args.source, args.position, content, 'ResizeTool', this.isTooltipVisible);\n this.isTooltipVisible = false;\n }\n this.prevPosition = this.currentPosition;\n return !this.blocked;\n };\n ResizeTool.prototype.mouseLeave = function (args) {\n this.mouseUp(args);\n };\n ResizeTool.prototype.getTooltipContent = function (node) {\n return 'W:' + Math.round(node.wrapper.bounds.width) + ' ' + 'H:' + Math.round(node.wrapper.bounds.height);\n };\n ResizeTool.prototype.getPivot = function () {\n switch (this.corner) {\n case 'ResizeWest':\n return { x: 1, y: 0.5 };\n case 'ResizeEast':\n return { x: 0, y: 0.5 };\n case 'ResizeNorth':\n return { x: 0.5, y: 1 };\n case 'ResizeSouth':\n return { x: 0.5, y: 0 };\n case 'ResizeNorthEast':\n return { x: 0, y: 1 };\n case 'ResizeNorthWest':\n return { x: 1, y: 1 };\n case 'ResizeSouthEast':\n return { x: 0, y: 0 };\n case 'ResizeSouthWest':\n return { x: 1, y: 0 };\n }\n return { x: 0.5, y: 0.5 };\n };\n ResizeTool.prototype.getChanges = function (change) {\n switch (this.corner) {\n case 'ResizeEast':\n return { x: change.x, y: 0 };\n case 'ResizeSouthEast':\n return change;\n case 'ResizeSouth':\n return { x: 0, y: change.y };\n case 'ResizeNorth':\n return { x: 0, y: -change.y };\n case 'ResizeNorthEast':\n return { x: change.x, y: -change.y };\n case 'ResizeNorthWest':\n return { x: -change.x, y: -change.y };\n case 'ResizeWest':\n return { x: -change.x, y: 0 };\n case 'ResizeSouthWest':\n return { x: -change.x, y: change.y };\n }\n return change;\n };\n /**\n * Updates the size with delta width and delta height using scaling.\n */\n ResizeTool.prototype.updateSize = function (shape, startPoint, endPoint, corner) {\n var horizontalsnap = { snapped: false, offset: 0, left: false, right: false };\n var verticalsnap = { snapped: false, offset: 0, top: false, bottom: false };\n var difx = this.currentPosition.x - this.startPosition.x;\n var dify = this.currentPosition.y - this.startPosition.y;\n var snapEnabled = this.commandHandler.snappingModule\n && this.commandHandler.snappingModule.canSnap();\n var snapLine = snapEnabled ? this.commandHandler.snappingModule.getLayer() : null;\n var matrix;\n matrix = identityMatrix();\n rotateMatrix(matrix, -shape.rotateAngle, 0, 0);\n var x = shape.offsetX;\n var y = shape.offsetY;\n var w = shape.width;\n var h = shape.height;\n x = x - w * shape.pivot.x;\n y = y - h * shape.pivot.y;\n var deltaWidth = 0;\n var deltaHeight = 0;\n var initialBounds = this.initialBounds;\n var diff;\n switch (corner) {\n case 'ResizeWest':\n diff = transformPointByMatrix(matrix, ({ x: difx, y: dify }));\n difx = diff.x;\n dify = diff.y;\n deltaHeight = 1;\n difx = snapEnabled ? this.commandHandler.snappingModule.snapLeft(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, this.initialBounds) : difx;\n dify = 0;\n deltaWidth = (initialBounds.width - difx) / shape.width;\n break;\n case 'ResizeEast':\n diff = transformPointByMatrix(matrix, ({ x: difx, y: dify }));\n difx = diff.x;\n dify = diff.y;\n difx = snapEnabled ? this.commandHandler.snappingModule.snapRight(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, this.initialBounds) :\n difx;\n dify = 0;\n deltaWidth = (initialBounds.width + difx) / shape.width;\n deltaHeight = 1;\n break;\n case 'ResizeNorth':\n deltaWidth = 1;\n diff = transformPointByMatrix(matrix, ({ x: difx, y: dify }));\n difx = diff.x;\n dify = diff.y;\n dify = snapEnabled ? this.commandHandler.snappingModule.snapTop(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, this.initialBounds) :\n dify;\n deltaHeight = (initialBounds.height - dify) / shape.height;\n break;\n case 'ResizeSouth':\n deltaWidth = 1;\n diff = transformPointByMatrix(matrix, ({ x: difx, y: dify }));\n difx = diff.x;\n dify = diff.y;\n dify = snapEnabled ? this.commandHandler.snappingModule.snapBottom(horizontalsnap, verticalsnap, snapLine, diff.x, diff.y, shape, endPoint === startPoint, this.initialBounds) :\n dify;\n deltaHeight = (initialBounds.height + dify) / shape.height;\n break;\n case 'ResizeNorthEast':\n diff = transformPointByMatrix(matrix, ({ x: difx, y: dify }));\n difx = diff.x;\n dify = diff.y;\n difx = snapEnabled ? this.commandHandler.snappingModule.snapRight(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, this.initialBounds) :\n difx;\n dify = snapEnabled ? this.commandHandler.snappingModule.snapTop(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, this.initialBounds) :\n dify;\n deltaWidth = (initialBounds.width + difx) / shape.width;\n deltaHeight = (initialBounds.height - dify) / shape.height;\n break;\n case 'ResizeNorthWest':\n diff = transformPointByMatrix(matrix, ({ x: difx, y: dify }));\n difx = diff.x;\n dify = diff.y;\n dify = snapEnabled ? this.commandHandler.snappingModule.snapTop(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, this.initialBounds) :\n dify;\n difx = snapEnabled ? this.commandHandler.snappingModule.snapLeft(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, this.initialBounds) :\n difx;\n deltaWidth = (initialBounds.width - difx) / shape.width;\n deltaHeight = (initialBounds.height - dify) / shape.height;\n break;\n case 'ResizeSouthEast':\n diff = transformPointByMatrix(matrix, ({ x: difx, y: dify }));\n difx = diff.x;\n dify = diff.y;\n dify = snapEnabled ? this.commandHandler.snappingModule.snapBottom(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, this.initialBounds) :\n dify;\n difx = snapEnabled ? this.commandHandler.snappingModule.snapRight(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, this.initialBounds) :\n difx;\n deltaHeight = (initialBounds.height + dify) / shape.height;\n deltaWidth = (initialBounds.width + difx) / shape.width;\n break;\n case 'ResizeSouthWest':\n diff = transformPointByMatrix(matrix, ({ x: difx, y: dify }));\n difx = diff.x;\n dify = diff.y;\n dify = snapEnabled ? this.commandHandler.snappingModule.snapBottom(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, initialBounds) : dify;\n difx = snapEnabled ? this.commandHandler.snappingModule.snapLeft(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, initialBounds) : difx;\n deltaWidth = (initialBounds.width - difx) / shape.width;\n deltaHeight = (initialBounds.height + dify) / shape.height;\n break;\n }\n return this.scaleObjects(matrix, deltaWidth, deltaHeight, corner, startPoint, endPoint, shape);\n };\n /**\n * Aspect ratio used to resize the width or height based on resizing the height or width\n */\n ResizeTool.prototype.scaleObjects = function (matrix, deltaWidth, deltaHeight, corner, startPoint, endPoint, source) {\n if (source.nodes.length === 1 && source.nodes[0].constraints & NodeConstraints.AspectRatio) {\n if (corner === 'ResizeWest' || corner === 'ResizeEast' || corner === 'ResizeNorth' || corner === 'ResizeSouth') {\n if (!(deltaHeight === 1 && deltaWidth === 1)) {\n deltaHeight = deltaWidth = Math.max(deltaHeight === 1 ? 0 : deltaHeight, deltaWidth === 1 ? 0 : deltaWidth);\n }\n }\n else if (startPoint !== endPoint) {\n deltaHeight = deltaWidth = Math.max(deltaHeight, deltaWidth);\n }\n else {\n deltaHeight = deltaWidth = 0;\n }\n }\n var oldValue = {\n offsetX: source.offsetX, offsetY: source.offsetY,\n width: source.width, height: source.height\n };\n this.blocked = this.commandHandler.scaleSelectedItems(deltaWidth, deltaHeight, this.getPivot());\n var newValue = {\n offsetX: source.offsetX, offsetY: source.offsetY,\n width: source.width, height: source.height\n };\n var arg = { source: source, state: 'Progress', oldValue: oldValue, newValue: newValue, cancel: false };\n this.commandHandler.triggerEvent(DiagramEvent.sizeChange, arg);\n if (arg.cancel) {\n this.commandHandler.scaleSelectedItems(1 / deltaWidth, 1 / deltaHeight, this.getPivot());\n }\n return this.blocked;\n };\n return ResizeTool;\n}(ToolBase));\nexport { ResizeTool };\n/**\n * Draws a node that is defined by the user\n */\nvar NodeDrawingTool = /** @class */ (function (_super) {\n __extends(NodeDrawingTool, _super);\n function NodeDrawingTool(commandHandler, sourceObject) {\n var _this = _super.call(this, commandHandler, true) || this;\n _this.sourceObject = sourceObject;\n return _this;\n }\n NodeDrawingTool.prototype.mouseDown = function (args) {\n _super.prototype.mouseDown.call(this, args);\n this.inAction = true;\n };\n NodeDrawingTool.prototype.mouseMove = function (args) {\n _super.prototype.mouseMove.call(this, args);\n var checkBoundaryConstraints;\n var node = {\n offsetX: this.currentPosition.x, width: 3, height: 3,\n offsetY: this.currentPosition.y\n };\n if (!this.drawingObject) {\n this.drawingObject = this.commandHandler.drawObject(node);\n }\n if (this.inAction && Point.equals(this.currentPosition, this.prevPosition) === false) {\n var rect = Rect.toBounds([this.prevPosition, this.currentPosition]);\n checkBoundaryConstraints = this.commandHandler.checkBoundaryConstraints(undefined, undefined, rect);\n if (checkBoundaryConstraints) {\n this.commandHandler.updateNodeDimension(this.drawingObject, rect);\n }\n }\n return checkBoundaryConstraints;\n };\n NodeDrawingTool.prototype.mouseUp = function (args) {\n var checkBoundaryConstraints;\n var rect = Rect.toBounds([this.prevPosition, this.currentPosition]);\n checkBoundaryConstraints = this.commandHandler.checkBoundaryConstraints(undefined, undefined, rect);\n if (this.drawingObject && this.drawingObject instanceof Node) {\n this.commandHandler.addObjectToDiagram(this.drawingObject);\n this.drawingObject = null;\n }\n _super.prototype.mouseUp.call(this, args);\n this.inAction = false;\n };\n NodeDrawingTool.prototype.endAction = function () {\n _super.prototype.endAction.call(this);\n };\n NodeDrawingTool.prototype.mouseLeave = function (args) {\n if (this.inAction) {\n this.mouseUp(args);\n }\n };\n return NodeDrawingTool;\n}(ToolBase));\nexport { NodeDrawingTool };\n/**\n * Draws a connector that is defined by the user\n */\nvar ConnectorDrawingTool = /** @class */ (function (_super) {\n __extends(ConnectorDrawingTool, _super);\n function ConnectorDrawingTool(commandHandler, endPoint, sourceObject) {\n var _this = _super.call(this, commandHandler, endPoint) || this;\n _this.sourceObject = sourceObject;\n return _this;\n }\n ConnectorDrawingTool.prototype.mouseDown = function (args) {\n _super.prototype.mouseDown.call(this, args);\n this.inAction = true;\n };\n ConnectorDrawingTool.prototype.mouseMove = function (args) {\n if (this.inAction) {\n var connector = {\n sourcePoint: this.currentPosition, targetPoint: this.currentPosition,\n };\n if (!this.drawingObject) {\n this.drawingObject = this.commandHandler.drawObject(connector);\n }\n args.source = this.drawingObject;\n if (args.target) {\n this.commandHandler.connect(this.endPoint, args);\n }\n this.endPoint = 'ConnectorTargetEnd';\n }\n if (!this.inAction) {\n this.commandHandler.updateSelector();\n if (args.source && args.sourceWrapper) {\n this.commandHandler.renderHighlighter(args, true);\n }\n }\n _super.prototype.mouseMove.call(this, args);\n return !this.blocked;\n };\n ConnectorDrawingTool.prototype.mouseUp = function (args) {\n if (this.drawingObject && this.drawingObject instanceof Connector) {\n this.commandHandler.addObjectToDiagram(this.drawingObject);\n this.drawingObject = null;\n }\n this.inAction = false;\n _super.prototype.mouseUp.call(this, args);\n };\n ConnectorDrawingTool.prototype.endAction = function () {\n _super.prototype.endAction.call(this);\n };\n ConnectorDrawingTool.prototype.mouseLeave = function (args) {\n if (this.inAction) {\n this.mouseUp(args);\n }\n };\n return ConnectorDrawingTool;\n}(ConnectTool));\nexport { ConnectorDrawingTool };\nvar TextDrawingTool = /** @class */ (function (_super) {\n __extends(TextDrawingTool, _super);\n function TextDrawingTool(commandHandler) {\n return _super.call(this, commandHandler, true) || this;\n }\n TextDrawingTool.prototype.mouseDown = function (args) {\n _super.prototype.mouseDown.call(this, args);\n this.commandHandler.clearSelection();\n var node = {\n shape: { type: 'Text' },\n offsetX: this.currentPosition.x, width: 50, height: 20,\n offsetY: this.currentPosition.y\n };\n if (!args.source) {\n this.drawingNode = this.commandHandler.drawObject(node);\n }\n };\n TextDrawingTool.prototype.mouseMove = function (args) {\n _super.prototype.mouseMove.call(this, args);\n if (!this.drawingNode) {\n var node = {\n shape: { type: 'Text' }, offsetX: this.currentPosition.x, width: 30, height: 30,\n style: { strokeDashArray: '2 2', fill: 'transparent' }, offsetY: this.currentPosition.y\n };\n this.drawingNode = this.commandHandler.drawObject(node);\n }\n else {\n this.drawingNode.style.strokeColor = 'black';\n this.drawingNode.style.strokeDashArray = '2 2';\n this.drawingNode.style.fill = 'transparent';\n }\n if (this.inAction && Point.equals(this.currentPosition, this.prevPosition) === false) {\n var rect = Rect.toBounds([this.prevPosition, this.currentPosition]);\n this.commandHandler.updateNodeDimension(this.drawingNode, rect);\n }\n return !this.blocked;\n };\n TextDrawingTool.prototype.mouseUp = function (args) {\n if (this.drawingNode) {\n this.drawingNode.style.strokeColor = 'none';\n this.drawingNode.style.fill = 'none';\n }\n else {\n this.drawingNode = args.source;\n }\n if (this.drawingNode && (this.drawingNode instanceof Node || this.drawingNode instanceof Connector)) {\n this.commandHandler.addText(this.drawingNode, this.currentPosition);\n }\n _super.prototype.mouseUp.call(this, args);\n this.inAction = false;\n };\n TextDrawingTool.prototype.endAction = function () {\n _super.prototype.endAction.call(this);\n };\n return TextDrawingTool;\n}(ToolBase));\nexport { TextDrawingTool };\n/**\n * Pans the diagram control on drag\n */\nvar ZoomPanTool = /** @class */ (function (_super) {\n __extends(ZoomPanTool, _super);\n function ZoomPanTool(commandHandler, zoom) {\n var _this = _super.call(this, commandHandler) || this;\n _this.zooming = zoom;\n return _this;\n }\n ZoomPanTool.prototype.mouseDown = function (args) {\n _super.prototype.mouseDown.call(this, args);\n this.inAction = true;\n };\n ZoomPanTool.prototype.mouseMove = function (args) {\n _super.prototype.mouseMove.call(this, args);\n if (this.inAction) {\n if (!this.zooming && Point.equals(this.currentPosition, this.prevPosition) === false) {\n var difX = this.currentPosition.x - this.prevPosition.x;\n var difY = this.currentPosition.y - this.prevPosition.y;\n this.commandHandler.scroll(difX, difY, this.currentPosition);\n }\n else if (args.moveTouches.length >= 2) {\n var startTouch0 = args.startTouches[0];\n var startTouch1 = args.startTouches[1];\n var moveTouch0 = args.moveTouches[0];\n var moveTouch1 = args.moveTouches[1];\n var scale = this.getDistance(moveTouch0, moveTouch1) / this.getDistance(startTouch0, startTouch1);\n var focusPoint = args.position;\n this.commandHandler.zoom(scale, 0, 0, focusPoint);\n this.updateTouch(startTouch0, moveTouch0);\n this.updateTouch(startTouch1, moveTouch1);\n }\n }\n return !this.blocked;\n };\n ZoomPanTool.prototype.mouseUp = function (args) {\n _super.prototype.mouseUp.call(this, args);\n this.inAction = false;\n };\n ZoomPanTool.prototype.endAction = function () {\n _super.prototype.endAction.call(this);\n };\n ZoomPanTool.prototype.getDistance = function (touch1, touch2) {\n var x = touch2.pageX - touch1.pageX;\n var y = touch2.pageY - touch1.pageY;\n return Math.sqrt((x * x) + (y * y));\n };\n ZoomPanTool.prototype.updateTouch = function (startTouch, moveTouch) {\n startTouch.pageX = moveTouch.pageX;\n startTouch.pageY = moveTouch.pageY;\n };\n return ZoomPanTool;\n}(ToolBase));\nexport { ZoomPanTool };\n/**\n * Animate the layout during expand and collapse\n */\nvar ExpandTool = /** @class */ (function (_super) {\n __extends(ExpandTool, _super);\n function ExpandTool(commandHandler) {\n return _super.call(this, commandHandler, true) || this;\n }\n ExpandTool.prototype.mouseUp = function (args) {\n this.commandHandler.initExpand(args);\n _super.prototype.mouseUp.call(this, args);\n };\n return ExpandTool;\n}(ToolBase));\nexport { ExpandTool };\n/**\n * Opens the annotation hypeLink at mouse up\n */\nvar LabelTool = /** @class */ (function (_super) {\n __extends(LabelTool, _super);\n function LabelTool(commandHandler) {\n return _super.call(this, commandHandler, true) || this;\n }\n LabelTool.prototype.mouseUp = function (args) {\n var win = window.open(args.sourceWrapper.hyperlink.link, '_blank');\n win.focus();\n _super.prototype.mouseUp.call(this, args);\n };\n return LabelTool;\n}(ToolBase));\nexport { LabelTool };\n/**\n * Draws a Polygon shape node dynamically using polygon Tool\n */\nvar PolygonDrawingTool = /** @class */ (function (_super) {\n __extends(PolygonDrawingTool, _super);\n function PolygonDrawingTool(commandHandler) {\n return _super.call(this, commandHandler, true) || this;\n }\n PolygonDrawingTool.prototype.mouseDown = function (args) {\n _super.prototype.mouseDown.call(this, args);\n this.inAction = true;\n if (!this.drawingObject) {\n this.startPoint = { x: this.startPosition.x, y: this.startPosition.y };\n var node = {\n offsetX: this.currentPosition.x,\n offsetY: this.currentPosition.y,\n width: 5, height: 5,\n style: { strokeColor: 'black', strokeWidth: 1 },\n shape: {\n type: 'Basic',\n shape: 'Polygon',\n points: [{ x: this.startPoint.x, y: this.startPoint.y }, { x: this.currentPosition.x, y: this.currentPosition.y }]\n }\n };\n this.drawingObject = this.commandHandler.drawObject(node);\n }\n else {\n var pt = void 0;\n var obj = this.drawingObject.shape;\n pt = obj.points[obj.points.length - 1];\n pt = { x: pt.x, y: pt.y };\n this.drawingObject.shape.points.push(pt);\n }\n };\n PolygonDrawingTool.prototype.mouseMove = function (args) {\n _super.prototype.mouseMove.call(this, args);\n if (this.inAction) {\n var obj = this.drawingObject.shape;\n if (this.drawingObject && this.currentPosition) {\n obj.points[obj.points.length - 1].x = this.currentPosition.x;\n obj.points[obj.points.length - 1].y = this.currentPosition.y;\n this.drawingObject.wrapper.children[0].data = getPolygonPath(this.drawingObject.shape.points);\n if (this.inAction && Point.equals(this.currentPosition, this.prevPosition) === false) {\n var region = Rect.toBounds(this.drawingObject.shape.points);\n this.commandHandler.updateNodeDimension(this.drawingObject, region);\n }\n }\n }\n return true;\n };\n PolygonDrawingTool.prototype.mouseUp = function (args, dblClickArgs) {\n _super.prototype.mouseMove.call(this, args);\n if (this.inAction) {\n this.inAction = false;\n if (this.drawingObject) {\n this.commandHandler.addObjectToDiagram(this.drawingObject);\n }\n }\n this.endAction();\n };\n PolygonDrawingTool.prototype.mouseWheel = function (args) {\n _super.prototype.mouseWheel.call(this, args);\n this.mouseMove(args);\n };\n PolygonDrawingTool.prototype.endAction = function () {\n this.inAction = false;\n this.drawingObject = null;\n };\n return PolygonDrawingTool;\n}(ToolBase));\nexport { PolygonDrawingTool };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { Point } from '../primitives/point';\nimport { Rect } from '../primitives/rect';\nimport { intersect3 } from '../utility/diagram-util';\nimport { cloneObject } from '../utility/base-util';\nimport { contains } from './actions';\nimport { getOppositeDirection } from '../utility/connector';\nimport { StraightSegment, OrthogonalSegment } from '../objects/connector';\nimport { ToolBase } from './tool';\n/**\n * Multiple segments editing for Connector\n */\nvar ConnectorEditing = /** @class */ (function (_super) {\n __extends(ConnectorEditing, _super);\n function ConnectorEditing(commandHandler, endPoint) {\n var _this = _super.call(this, commandHandler, true) || this;\n _this.endPoint = endPoint;\n return _this;\n }\n ConnectorEditing.prototype.mouseDown = function (args) {\n this.inAction = true;\n this.undoElement = cloneObject(args.source);\n _super.prototype.mouseDown.call(this, args);\n var connectors;\n if (args.source && args.source.connectors) {\n connectors = args.source.connectors[0];\n }\n // Sets the selected segment \n for (var i = 0; i < connectors.segments.length; i++) {\n var segment = connectors.segments[i];\n if (this.endPoint === 'OrthoThumb') {\n for (var j = 0; j < segment.points.length - 1; j++) {\n var segPoint = { x: 0, y: 0 };\n segPoint.x = ((segment.points[j].x + segment.points[j + 1].x) / 2);\n segPoint.y = ((segment.points[j].y + segment.points[j + 1].y) / 2);\n if (contains(this.currentPosition, segPoint, 30)) {\n this.selectedSegment = segment;\n this.segmentIndex = j;\n }\n }\n }\n else {\n if (contains(this.currentPosition, segment.point, 10)) {\n this.selectedSegment = segment;\n }\n }\n }\n };\n ConnectorEditing.prototype.mouseMove = function (args) {\n _super.prototype.mouseMove.call(this, args);\n this.currentPosition = args.position;\n if (this.currentPosition && this.prevPosition) {\n var diffY = this.currentPosition.y - this.prevPosition.y;\n var diffX = this.currentPosition.x - this.prevPosition.x;\n this.currentPosition = this.commandHandler.snapConnectorEnd(this.currentPosition);\n var connector = void 0;\n if (args.source && args.source.connectors) {\n connector = args.source.connectors[0];\n }\n if (this.inAction && this.endPoint !== undefined && diffX !== 0 || diffY !== 0) {\n if (this.endPoint === 'OrthoThumb') {\n this.blocked = !this.dragOrthogonalSegment(connector, this.selectedSegment, this.currentPosition, this.segmentIndex);\n }\n else {\n var tx = this.currentPosition.x - this.selectedSegment.point.x;\n var ty = this.currentPosition.y - this.selectedSegment.point.y;\n var index = connector.segments.indexOf(this.selectedSegment);\n this.blocked = !this.commandHandler.dragControlPoint(connector, tx, ty, false, index);\n }\n this.commandHandler.updateSelector();\n }\n }\n this.prevPosition = this.currentPosition;\n return !this.blocked;\n };\n ConnectorEditing.prototype.mouseUp = function (args) {\n var connector;\n if (args.source && args.source.connectors) {\n connector = args.source.connectors[0];\n }\n if (args && args.source && args.info && args.info.ctrlKey && args.info.shiftKey && connector.type === 'Straight') {\n this.addOrRemoveSegment(connector, this.currentPosition);\n }\n else {\n if (this.endPoint === 'OrthoThumb' && this.selectedSegment) {\n var index = connector.segments.indexOf(this.selectedSegment);\n var prev = connector.segments[index - 1];\n var next = connector.segments[index + 1];\n if (index === connector.segments.length - 2\n && this.updateLastSegment(connector, this.selectedSegment)) {\n connector.segments.splice(connector.segments.length - 2, 1);\n }\n else {\n if (prev && Math.abs(prev.length) < 5) {\n if (index !== 1) {\n this.removePrevSegment(connector, index);\n }\n }\n else if (next) {\n var len = Point.distancePoints(next.points[0], next.points[1]);\n var length_1 = ((next.length || next.length === 0) ? next.length : len);\n if ((Math.abs(length_1) <= 5)) {\n this.removeNextSegment(connector, index);\n }\n }\n }\n this.commandHandler.updateEndPoint(connector);\n }\n }\n if (this.undoElement) {\n var obj = void 0;\n obj = cloneObject(args.source);\n var entry = {\n type: 'SegmentChanged', redoObject: obj, undoObject: this.undoElement, category: 'Internal'\n };\n this.commandHandler.addHistoryEntry(entry);\n }\n _super.prototype.mouseUp.call(this, args);\n };\n ConnectorEditing.prototype.removePrevSegment = function (connector, index) {\n var first = connector.segments[index - 2];\n var next = connector.segments[index + 1];\n var length = (next.length || next.length === 0) ? next.length : Point.distancePoints(next.points[0], next.points[1]);\n if (!(length <= 5)) {\n var last = connector.segments[index + 1];\n connector.segments.splice(index - 1, 2);\n var segment = this.selectedSegment;\n if (segment.direction === 'Left' || segment.direction === 'Right') {\n first.points[first.points.length - 1].x = last.points[0].x;\n last.points[0].y = first.points[first.points.length - 1].y;\n }\n else {\n first.points[first.points.length - 1].y = last.points[0].y;\n last.points[0].x = first.points[first.points.length - 1].x;\n }\n if (segment.length || segment.length === 0) {\n this.findSegmentDirection(first);\n }\n this.findSegmentDirection(last);\n }\n };\n ConnectorEditing.prototype.findSegmentDirection = function (segment) {\n if (segment.direction && (segment.length || segment.length === 0)) {\n segment.length = Point.distancePoints(segment.points[0], segment.points[segment.points.length - 1]);\n segment.direction = Point.direction(segment.points[0], segment.points[segment.points.length - 1]);\n }\n };\n ConnectorEditing.prototype.removeNextSegment = function (connector, index) {\n var segment = this.selectedSegment;\n var first = connector.segments[index - 1];\n var last = connector.segments[index + 2];\n var next = connector.segments[index + 1];\n if (next.length || next.length === 0) {\n connector.segments.splice(index, 2);\n if (segment.direction === 'Top' || segment.direction === 'Bottom') {\n last.points[0].y = segment.points[0].y;\n first.points[first.points.length - 1].x = last.points[0].x;\n }\n else {\n last.points[0].x = segment.points[0].x;\n first.points[first.points.length - 1].y = last.points[0].y;\n }\n }\n else {\n connector.segments.splice(index + 1, 1);\n if (segment.direction === 'Top' || segment.direction === 'Bottom') {\n first.points[first.points.length - 1].x = next.points[next.points.length - 1].x;\n }\n else {\n first.points[first.points.length - 1].y = next.points[next.points.length - 1].y;\n }\n this.findSegmentDirection(first);\n segment.length = segment.direction = null;\n }\n if (first && last) {\n first.length = Point.distancePoints(first.points[0], last.points[0]);\n first.direction = Point.direction(first.points[0], last.points[0]);\n if (last.length || last.length === 0) {\n last.length = Point.distancePoints(first.points[first.points.length - 1], last.points[last.points.length - 1]);\n var point1 = first.points;\n var point2 = last.points;\n last.direction = Point.direction(point1[point1.length - 1], point2[point2.length - 1]);\n }\n }\n };\n ConnectorEditing.prototype.addOrRemoveSegment = function (connector, point) {\n var updateSeg;\n var segmentIndex;\n for (var i = 0; i < connector.segments.length; i++) {\n var segment = (connector.segments)[i];\n if (contains(point, segment.point, connector.hitPadding)) {\n segmentIndex = i;\n updateSeg = true;\n }\n }\n if (updateSeg && segmentIndex !== undefined) {\n if (connector.segments && connector.segments[segmentIndex] && connector.segments[segmentIndex].type === 'Straight') {\n var segment = connector.segments[segmentIndex];\n var previous = connector.segments[segmentIndex + 1];\n if (previous) {\n connector.segments.splice(segmentIndex, 1);\n previous.points[0] = segment.points[0];\n }\n }\n }\n else {\n var index = this.findIndex(connector, point);\n if (connector.segments && connector.segments[index] && connector.segments[index].type === 'Straight') {\n var segment = connector.segments[index];\n var newseg = new StraightSegment(connector, 'segments', { type: 'Straight', point: point }, true);\n newseg.points[0] = segment.points[0];\n newseg.points[1] = point;\n segment.points[0] = point;\n connector.segments.splice(index, 0, newseg);\n updateSeg = true;\n }\n }\n if (updateSeg) {\n this.commandHandler.updateEndPoint(connector);\n }\n };\n ConnectorEditing.prototype.findIndex = function (connector, point) {\n var intersectingSegs = [];\n for (var i = 0; i < connector.segments.length; i++) {\n var segment = connector.segments[i];\n var rect = Rect.toBounds([segment.points[0], segment.points[1]]);\n rect.Inflate(connector.hitPadding);\n if (rect.containsPoint(point)) {\n intersectingSegs.push(segment);\n }\n }\n if (intersectingSegs.length === 1) {\n return connector.segments.indexOf(intersectingSegs[0]);\n }\n else {\n var ratio = void 0;\n var min = void 0;\n var index = void 0;\n var seg = void 0;\n var v = void 0;\n var h = void 0;\n for (var i = 0; i < intersectingSegs.length; i++) {\n seg = intersectingSegs[i];\n v = (point.y - seg.points[0].y) / (seg.points[1].y - point.y);\n h = (point.x - seg.points[0].x) / (seg.points[1].x - point.x);\n ratio = Math.abs(v - h);\n if (i === 0) {\n min = ratio;\n index = 0;\n }\n if (ratio < min) {\n min = ratio;\n index = i;\n }\n }\n return connector.segments.indexOf(intersectingSegs[index]);\n }\n };\n ConnectorEditing.prototype.dragOrthogonalSegment = function (obj, segment, point, segmentIndex) {\n var segmentPoint = { x: 0, y: 0 };\n segmentPoint.x = ((segment.points[segmentIndex].x + segment.points[segmentIndex + 1].x) / 2);\n segmentPoint.y = ((segment.points[segmentIndex].y + segment.points[segmentIndex + 1].y) / 2);\n var ty = point.y - segmentPoint.y;\n var tx = point.x - segmentPoint.x;\n var index = obj.segments.indexOf(segment);\n var update = false;\n var orientation = (segment.points[0].y.toFixed(2) === segment.points[1].y.toFixed(2)) ? 'horizontal' : 'vertical';\n var prevSegment;\n var nextSegment;\n if (index !== -1) {\n if (index === 0 && obj.segments.length === 1 && segment.points.length === 2) {\n index = this.addSegments(obj, segment, tx, ty, index);\n update = true;\n }\n else if (index === obj.segments.length - 1 && (segment.direction === null || segment.length === null)) {\n index = this.addTerminalSegment(obj, segment, tx, ty, segmentIndex);\n update = true;\n }\n else if (index === 0) {\n index = this.insertFirstSegment(obj, segment, tx, ty, index);\n update = true;\n }\n if (update) {\n this.selectedSegment = segment = obj.segments[index];\n this.segmentIndex = 0;\n }\n this.updateAdjacentSegments(obj, index, tx, ty);\n this.commandHandler.updateEndPoint(obj);\n }\n return true;\n };\n ConnectorEditing.prototype.addSegments = function (obj, segment, tx, ty, coll) {\n var index;\n var direction;\n var segments = [];\n var len;\n var length = Point.distancePoints(segment.points[0], segment.points[1]);\n var segmentDirection = Point.direction(segment.points[0], segment.points[1]);\n segments.push(new OrthogonalSegment(obj, 'segments', { type: 'Orthogonal', direction: segmentDirection, length: length / 4 }, true));\n direction = (segment.points[0].y === segment.points[1].y) ? ((ty > 0) ? 'Bottom' : 'Top') : ((tx > 0) ? 'Right' : 'Left');\n len = (segment.points[0].x === segment.points[1].x) ? ty : tx;\n segments.push(new OrthogonalSegment(obj, 'segments', { type: 'Orthogonal', direction: direction, length: len }, true));\n segments.push(new OrthogonalSegment(obj, 'segments', { type: 'Orthogonal', direction: segmentDirection, length: length / 2 }, true));\n obj.segments = segments.concat(obj.segments);\n index = coll + 2;\n return index;\n };\n ConnectorEditing.prototype.insertFirstSegment = function (obj, segment, tx, ty, coll) {\n var direction;\n var length;\n var segments = [];\n var segValues;\n var index;\n var insertseg;\n if (obj.sourcePortID && segment.length && obj.segments[0].points.length > 2) {\n obj.segments.splice(0, 1);\n var prev = void 0;\n for (var i = 0; i < segment.points.length - 1; i++) {\n var len = Point.distancePoints(segment.points[i], segment.points[i + 1]);\n var dir = Point.direction(segment.points[i], segment.points[i + 1]);\n insertseg = new OrthogonalSegment(obj, 'segments', { type: 'Orthogonal', direction: dir, length: len }, true);\n if (insertseg.length === 0) {\n if (prev && (prev.direction === 'Top' || prev.direction === 'Bottom')) {\n insertseg.direction = tx > 0 ? 'Right' : 'Left';\n }\n else {\n insertseg.direction = ty > 0 ? 'Bottom' : 'Top';\n }\n }\n prev = insertseg;\n segments.push(insertseg);\n }\n obj.segments = segments.concat(obj.segments);\n index = 1;\n }\n else {\n segValues = { type: 'Orthogonal', direction: segment.direction, length: segment.length / 3 };\n segments.push(new OrthogonalSegment(obj, 'segments', segValues, true));\n if (segment.direction === 'Bottom' || segment.direction === 'Top') {\n length = Math.abs(tx);\n direction = tx > 0 ? 'Right' : 'Left';\n }\n else {\n length = Math.abs(ty);\n direction = ty > 0 ? 'Bottom' : 'Top';\n }\n insertseg = new OrthogonalSegment(obj, 'segments', { type: 'Orthogonal', direction: direction, length: length }, true);\n segments.push(insertseg);\n var nextseg = obj.segments[1];\n if (nextseg && nextseg.length) {\n nextseg.length = (direction !== nextseg.direction) ? nextseg.length + length : nextseg.length - length;\n }\n index = 2;\n segment.length = 2 * segment.length / 3;\n obj.segments = segments.concat(obj.segments);\n }\n return index;\n };\n ConnectorEditing.prototype.updateAdjacentSegments = function (obj, index, tx, ty) {\n var current = obj.segments[index];\n var endPoint = current.points[current.points.length - 1];\n var startPoint = current.points[0];\n var isNextUpdate = true;\n if (current.type === 'Orthogonal') {\n current.points[0] = startPoint;\n current.points[current.points.length - 1] = endPoint;\n var prev = obj.segments[index - 1];\n if (prev) {\n isNextUpdate = this.updatePreviousSegment(tx, ty, obj, index);\n }\n if (obj.segments.length - 1 > index && isNextUpdate) {\n var nextSegment = obj.segments[index + 1];\n this.updateNextSegment(obj, current, nextSegment, tx, ty);\n }\n }\n };\n ConnectorEditing.prototype.addTerminalSegment = function (connector, segment, tx, ty, segmentIndex) {\n var index = connector.segments.indexOf(segment);\n var first;\n var insertseg;\n var len;\n var dir;\n connector.segments.pop();\n var last = connector.segments[connector.segments.length - 1];\n first = (last && last.type === 'Orthogonal') ? last : null;\n for (var i = 0; i < segment.points.length - 2; i++) {\n len = Point.distancePoints(segment.points[i], segment.points[i + 1]);\n dir = Point.direction(segment.points[i], segment.points[i + 1]);\n insertseg = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal', length: len, direction: dir }, true);\n connector.segments.push(insertseg);\n first = insertseg;\n }\n var sec = segmentIndex;\n if (segment.points.length === 2 || sec === segment.points.length - 2) {\n if (first) {\n first.length += 5;\n }\n if (sec !== undefined) {\n var newseg = void 0;\n len = 2 * Point.distancePoints(segment.points[segment.points.length - 2], segment.points[segment.points.length - 1]) / 3;\n dir = Point.direction(segment.points[segment.points.length - 2], segment.points[segment.points.length - 1]);\n newseg = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal', length: len, direction: dir });\n connector.segments.push(newseg);\n }\n }\n var lastseg = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal' }, true);\n connector.segments.push(lastseg);\n this.commandHandler.updateEndPoint(connector);\n index = index + segmentIndex;\n return index;\n };\n ConnectorEditing.prototype.updatePortSegment = function (prev, connector, index, tx, ty) {\n if (index === 1 && prev.points.length === 2 && prev.length < 0) {\n var source = connector.sourceWrapper.corners;\n var current = connector.segments[index];\n var next = connector.segments[index + 1];\n var newseg = void 0;\n var segment = [];\n newseg = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal', length: 13, direction: prev.direction });\n segment.push(newseg);\n var len = void 0;\n if (current.direction === 'Left') {\n len = (current.points[0].x - (source.middleLeft.x - 20));\n }\n else if (current.direction === 'Right') {\n len = ((source.middleRight.x + 20) - current.points[0].x);\n }\n else if (current.direction === 'Bottom') {\n len = ((source.bottomCenter.y + 20) - current.points[0].y);\n }\n else {\n len = (current.points[0].y - (source.topCenter.y - 20));\n }\n var dir = current.direction;\n newseg = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal', length: len, direction: current.direction });\n segment.push(newseg);\n current.length = current.length - len;\n if (next && next.length && next.direction) {\n if (next.direction === prev.direction) {\n next.length -= 13;\n }\n else if (next.direction === getOppositeDirection(prev.direction)) {\n next.length += 13;\n }\n }\n connector.segments = segment.concat(connector.segments);\n this.selectedSegment = connector.segments[3];\n }\n };\n ConnectorEditing.prototype.updatePreviousSegment = function (tx, ty, connector, index) {\n var current = connector.segments[index];\n var prev = connector.segments[index - 1];\n var firstSegment = (index === 1) ? true : false;\n prev.points[prev.points.length - 1] = current.points[0];\n var isSourceNode = (connector.sourceID && connector.sourcePortID === '') ? false : true;\n var isNextUpdate = true;\n if (prev.type === 'Orthogonal') {\n if (prev.direction === 'Bottom') {\n prev.length += ty;\n }\n else if (prev.direction === 'Top') {\n prev.length -= ty;\n }\n else if (prev.direction === 'Right') {\n prev.length += tx;\n }\n else {\n prev.length -= tx;\n }\n if (connector.sourcePortID !== '' && prev.length < 0) {\n this.updatePortSegment(prev, connector, index, tx, ty);\n }\n else if (connector.sourceID && connector.sourcePortID === '' && prev.length < 0 && index === 1) {\n isNextUpdate = false;\n this.updateFirstSegment(connector, current);\n }\n if (isSourceNode) {\n this.changeSegmentDirection(prev);\n }\n }\n return isNextUpdate;\n };\n ConnectorEditing.prototype.changeSegmentDirection = function (segment) {\n if (segment.length < 0) {\n segment.direction = getOppositeDirection(segment.direction);\n segment.length *= -1;\n }\n };\n ConnectorEditing.prototype.updateNextSegment = function (obj, current, next, tx, ty) {\n var pt = current.points[current.points.length - 1];\n next.points[0] = current.points[current.points.length - 1];\n if (next && next.type === 'Orthogonal') {\n if (next.length || next.length === 0) {\n if (next.direction === 'Left' || next.direction === 'Right') {\n if (tx !== 0) {\n next.length = (next.direction === 'Right') ? next.length - tx : next.length + tx;\n if (next.length || next.length === 0) {\n this.changeSegmentDirection(next);\n }\n }\n }\n else {\n if (ty !== 0) {\n next.length = (next.direction === 'Bottom') ? next.length - ty : next.length + ty;\n if (next.length || next.length === 0) {\n this.changeSegmentDirection(next);\n }\n }\n }\n }\n }\n };\n ConnectorEditing.prototype.updateFirstSegment = function (connector, selectedSegment) {\n var index = connector.segments.indexOf(selectedSegment);\n var insertfirst = false;\n var current = connector.segments[index];\n var prev = connector.segments[index - 1];\n var con = connector;\n var sourcePoint;\n if (prev.length < 0 && connector.sourceID) {\n var sourceNode = connector.sourceWrapper.corners;\n var segments = [];\n var segValues = void 0;\n var removeCurrentPrev = false;\n this.changeSegmentDirection(current);\n var next = connector.segments[index + 1];\n var nextNext = connector.segments[index + 2];\n if (next) {\n this.changeSegmentDirection(next);\n }\n if (nextNext) {\n this.changeSegmentDirection(nextNext);\n }\n switch (prev.direction) {\n case 'Top':\n case 'Bottom':\n sourcePoint = (current.length > 0 && current.direction === 'Left') ? sourceNode.middleLeft : sourceNode.middleRight;\n if (current.length > sourceNode.width / 2) {\n if (Math.abs(prev.length) < sourceNode.height / 2) {\n prev.length = Point.distancePoints(sourceNode.center, prev.points[prev.points.length - 1]);\n current.points[0].x = sourcePoint.x;\n current.length = Point.distancePoints(current.points[0], current.points[current.points.length - 1]);\n current.length -= 20;\n insertfirst = true;\n }\n }\n else {\n if (next && next.direction && next.length) {\n next.points[0].y = sourcePoint.y;\n next.points[0].x = next.points[next.points.length - 1].x = (current.direction === 'Right') ?\n sourcePoint.x + 20 : sourcePoint.x - 20;\n }\n insertfirst = true;\n removeCurrentPrev = true;\n }\n break;\n case 'Left':\n case 'Right':\n sourcePoint = (current.length > 0 && current.direction === 'Top') ? sourceNode.topCenter : sourceNode.bottomCenter;\n if (current.length > sourceNode.height / 2) {\n if (Math.abs(prev.length) < sourceNode.width / 2) {\n prev.length = Point.distancePoints(sourceNode.center, prev.points[prev.points.length - 1]);\n current.points[0].y = sourcePoint.y;\n current.length = Point.distancePoints(current.points[0], current.points[current.points.length - 1]);\n current.length -= 20;\n insertfirst = true;\n }\n }\n else {\n if (next && next.direction && next.length) {\n next.points[0].x = sourcePoint.x;\n next.points[0].y = next.points[next.points.length - 1].y = (current.direction === 'Bottom') ?\n sourcePoint.y + 20 : sourcePoint.y - 20;\n }\n insertfirst = true;\n removeCurrentPrev = true;\n }\n break;\n }\n this.changeSegmentDirection(prev);\n this.changeSegmentDirection(current);\n if (insertfirst) {\n segValues = { type: 'Orthogonal', direction: current.direction, length: 20 };\n segments.push(new OrthogonalSegment(connector, 'segments', segValues, true));\n if (removeCurrentPrev) {\n if (next && next.direction && next.length) {\n next.length = Point.distancePoints(next.points[0], next.points[next.points.length - 1]);\n }\n if (nextNext && nextNext.direction && nextNext.length) {\n nextNext.length = Point.distancePoints(next.points[next.points.length - 1], nextNext.points[nextNext.points.length - 1]);\n }\n connector.segments.splice(index - 1, 2);\n }\n connector.segments = segments.concat(connector.segments);\n }\n this.selectedSegment = ((removeCurrentPrev) ? connector.segments[index - 1] :\n connector.segments[index + 1]);\n this.commandHandler.updateEndPoint(connector);\n }\n };\n ConnectorEditing.prototype.updateLastSegment = function (connector, selectedSegment) {\n if (connector.targetID && connector.targetPortID === '') {\n var line1Start = void 0;\n var line1End = void 0;\n var line2Start = void 0;\n var line2End = void 0;\n var corners = connector.targetWrapper.corners;\n var firstSegPoint = selectedSegment.points[0];\n var lastSegPoint = selectedSegment.points[selectedSegment.points.length - 1];\n if (selectedSegment.direction === 'Right' || selectedSegment.direction === 'Left') {\n line1Start = { x: firstSegPoint.x, y: firstSegPoint.y };\n line1End = {\n x: (selectedSegment.direction === 'Left') ? lastSegPoint.x - corners.width / 2 : lastSegPoint.x + corners.width / 2,\n y: lastSegPoint.y\n };\n line2Start = { x: corners.center.x, y: corners.center.y - corners.height };\n line2End = { x: corners.center.x, y: corners.center.y + corners.height };\n }\n else {\n line1Start = { x: firstSegPoint.x, y: firstSegPoint.y };\n line1End = {\n x: lastSegPoint.x,\n y: (selectedSegment.direction === 'Bottom') ? lastSegPoint.y + corners.height / 2 : lastSegPoint.y - corners.height / 2\n };\n line2Start = { x: corners.center.x - corners.width, y: corners.center.y };\n line2End = { x: corners.center.x + corners.width, y: corners.center.y };\n }\n var line1 = { X1: line1Start.x, Y1: line1Start.y, X2: line1End.x, Y2: line1End.y };\n var line2 = { X1: line2Start.x, Y1: line2Start.y, X2: line2End.x, Y2: line2End.y };\n return (intersect3(line1, line2).enabled);\n }\n return false;\n };\n /**\n * To destroy the connector editing module\n * @return {void}\n * @private\n */\n ConnectorEditing.prototype.destroy = function () {\n /**\n * Destroys the connector editing module\n */\n };\n /**\n * Get module name.\n */\n ConnectorEditing.prototype.getModuleName = function () {\n /**\n * Returns the module name\n */\n return 'ConnectorEditingTool';\n };\n return ConnectorEditing;\n}(ToolBase));\nexport { ConnectorEditing };\n","import { Point } from '../primitives/point';\nimport { Container } from '../core/containers/container';\nimport { Connector } from '../objects/connector';\nimport { NodeDrawingTool, ConnectorDrawingTool, TextDrawingTool, PolygonDrawingTool } from './tool';\nimport { Node } from '../objects/node';\nimport { SelectTool, MoveTool, ResizeTool, RotateTool, ConnectTool, ExpandTool, LabelTool, ZoomPanTool } from './tool';\nimport { ConnectorEditing } from './connector-editing';\nimport { Selector } from './selector';\nimport { findToolToActivate, isSelected, getCursor, contains } from './actions';\nimport { DiagramAction, KeyModifiers, Keys, DiagramEvent, DiagramTools } from '../enum/enum';\nimport { isPointOverConnector, findObjectType, insertObject, getObjectFromCollection, getTooltipOffset } from '../utility/diagram-util';\nimport { getObjectType } from '../utility/diagram-util';\nimport { canZoomPan, canDraw, canDrag } from './../utility/constraints-util';\nimport { canMove, canEnablePointerEvents, canSelect, canEnableToolTip } from './../utility/constraints-util';\nimport { canOutConnect, canInConnect, canAllowDrop, canUserInteract, defaultTool } from './../utility/constraints-util';\nimport { updateTooltip } from '../objects/tooltip';\nimport { PortVisibility, NodeConstraints, ConnectorConstraints } from '../enum/enum';\nimport { addTouchPointer, measureHtmlText } from '../utility/dom-util';\nimport { TextElement } from '../core/elements/text-element';\nimport { Size } from '../primitives/size';\nimport { Rect } from '../primitives/rect';\nimport { identityMatrix, rotateMatrix, transformPointByMatrix } from './../primitives/matrix';\nimport { removeRulerMarkers, drawRulerMarkers, getRulerSize, updateRuler } from '../ruler/ruler';\nimport { canContinuousDraw, canDrawOnce } from '../utility/constraints-util';\nimport { getFunction } from '../utility/base-util';\n/**\n * This module handles the mouse and touch events\n */\nvar DiagramEventHandler = /** @class */ (function () {\n /** @private */\n function DiagramEventHandler(diagram, commandHandler) {\n this.currentAction = 'None';\n this.focus = false;\n this.isBlocked = false;\n this.isMouseDown = false;\n this.inAction = false;\n this.doingAutoScroll = false;\n this.diagram = null;\n this.objectFinder = null;\n this.tool = null;\n this.eventArgs = null;\n this.diagram = diagram;\n this.objectFinder = new ObjectFinder();\n this.commandHandler = commandHandler;\n }\n Object.defineProperty(DiagramEventHandler.prototype, \"action\", {\n get: function () {\n return this.currentAction;\n },\n set: function (action) {\n if (action !== this.currentAction) {\n if (this.currentAction === 'PortDraw') {\n this.diagram.tool &= ~DiagramTools.DrawOnce;\n if (this.tool) {\n this.tool.mouseUp({ position: this.currentPosition });\n }\n this.tool = null;\n }\n this.currentAction = action;\n if (this.currentAction !== 'None' && this.currentAction !== 'Select' &&\n !(this.diagram.diagramActions & DiagramAction.TextEdit)) {\n this.diagram.diagramActions = this.diagram.diagramActions | DiagramAction.ToolAction;\n }\n else {\n this.diagram.diagramActions = this.diagram.diagramActions & ~DiagramAction.ToolAction;\n }\n this.diagram.setCursor(this.diagram.getCursor(action, this.inAction));\n }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DiagramEventHandler.prototype, \"blocked\", {\n get: function () {\n return this.isBlocked;\n },\n set: function (blocked) {\n this.isBlocked = blocked;\n if (this.blocked) {\n this.diagram.setCursor('not-allowed');\n }\n else {\n this.diagram.setCursor(this.diagram.getCursor(this.action, this.inAction));\n }\n },\n enumerable: true,\n configurable: true\n });\n /** @private */\n DiagramEventHandler.prototype.getMousePosition = function (e) {\n var touchArg;\n var offsetX;\n var offsetY;\n if (e.type.indexOf('touch') !== -1) {\n touchArg = e;\n offsetX = touchArg.changedTouches[0].clientX;\n offsetY = touchArg.changedTouches[0].clientY;\n }\n else {\n offsetX = e.clientX;\n offsetY = e.clientY;\n }\n var position = new Size();\n position = getRulerSize(this.diagram);\n var boundingRect = this.diagram.element.getBoundingClientRect();\n offsetX = offsetX + this.diagram.diagramCanvas.scrollLeft - boundingRect.left - position.width;\n offsetY = offsetY + this.diagram.diagramCanvas.scrollTop - boundingRect.top - position.height;\n offsetX /= this.diagram.scroller.transform.scale;\n offsetY /= this.diagram.scroller.transform.scale;\n offsetX -= this.diagram.scroller.transform.tx;\n offsetY -= this.diagram.scroller.transform.ty;\n return { x: offsetX, y: offsetY };\n };\n /**\n * @private\n */\n DiagramEventHandler.prototype.windowResize = function (evt) {\n var _this = this;\n if (this.resizeTo) {\n clearTimeout(this.resizeTo);\n }\n this.resizeTo = setTimeout(function () {\n _this.updateViewPortSize(_this.diagram.element);\n }, 300);\n return false;\n };\n /**\n * @private\n */\n DiagramEventHandler.prototype.updateViewPortSize = function (element) {\n var container = document.getElementById(element.id);\n if (container) {\n var bounds = container.getBoundingClientRect();\n this.diagram.scroller.setViewPortSize(bounds.width, bounds.height);\n var position = new Size();\n position = getRulerSize(this.diagram);\n var width = this.diagram.getSizeValue(this.diagram.width, position.width);\n var height = this.diagram.getSizeValue(this.diagram.height, position.height);\n this.diagram.diagramCanvas.style.width = width;\n this.diagram.diagramCanvas.style.height = height;\n this.diagram.scroller.setSize();\n if (this.diagram.rulerSettings.showRulers) {\n updateRuler(this.diagram);\n }\n }\n };\n /** @private */\n DiagramEventHandler.prototype.canHideResizers = function () {\n return ((this.tool instanceof MoveTool || this.tool instanceof RotateTool) && this.isMouseDown);\n };\n /** @private */\n DiagramEventHandler.prototype.updateCursor = function () {\n if ((this.diagram.selectedItems.nodes.length === 1 || this.diagram.selectedItems.connectors.length === 1)) {\n var list = [];\n list = list.concat(this.diagram.selectedItems.nodes, this.diagram.selectedItems.connectors);\n this.blocked = (this.isMouseDown && list.length === 1 && this.tool instanceof SelectTool && !canMove(list[0]));\n }\n };\n DiagramEventHandler.prototype.isForeignObject = function (target, isTextBox) {\n var foreignobject = target;\n if (foreignobject) {\n while (foreignobject.parentNode != null) {\n if (typeof foreignobject.className === 'string' &&\n ((!isTextBox && foreignobject.className.indexOf('foreign-object') !== -1) ||\n (isTextBox && foreignobject.className.indexOf('e-diagram-text-edit') !== -1))) {\n return foreignobject;\n }\n else {\n foreignobject = foreignobject.parentNode;\n }\n }\n }\n return null;\n };\n DiagramEventHandler.prototype.isMetaKey = function (evt) {\n return navigator.platform.match('Mac') ? evt.metaKey : evt.ctrlKey;\n };\n DiagramEventHandler.prototype.isDeleteKey = function (key, value) {\n return (navigator.platform.match('Mac') && key === 'Backspace' && value === 'delete');\n };\n DiagramEventHandler.prototype.mouseDown = function (evt) {\n this.focus = true;\n var touches;\n touches = evt.touches;\n if (!this.checkEditBoxAsTarget(evt) && (canUserInteract(this.diagram)) ||\n (canZoomPan(this.diagram) && !defaultTool(this.diagram))) {\n if (this.action === 'Select' || this.action === 'Drag') {\n this.diagram.updatePortVisibility(this.hoverElement, PortVisibility.Hover, true);\n }\n if (this.tool instanceof PolygonDrawingTool && (evt.button === 2 || evt.buttons === 2)) {\n var arg = {\n element: this.diagram, position: this.currentPosition, count: evt.buttons\n };\n this.inAction = false;\n this.tool.mouseUp(this.eventArgs, arg);\n }\n else if ((this.inAction === true) && this.isMouseDown === true && this.tool instanceof PolygonDrawingTool) {\n this.isMouseDown = true;\n this.eventArgs = {};\n this.getMouseEventArgs(this.currentPosition, this.eventArgs);\n this.eventArgs.position = this.currentPosition;\n this.tool.mouseDown(this.eventArgs);\n }\n else {\n this.isMouseDown = true;\n this.currentPosition = this.prevPosition = this.getMousePosition(evt);\n this.eventArgs = {};\n this.diagram.endEdit();\n var target = void 0;\n var objects = this.objectFinder.findObjectsUnderMouse(this.currentPosition, this.diagram, null, this.action);\n var obj = this.objectFinder.findObjectUnderMouse(this.diagram, objects, this.action, this.inAction, evt);\n var sourceElement = null;\n if (obj !== null) {\n sourceElement = this.diagram.findElementUnderMouse(obj, this.currentPosition);\n if (sourceElement) {\n target = this.commandHandler.findTarget(sourceElement, obj);\n }\n }\n this.action = this.diagram.findActionToBeDone(obj, sourceElement, this.currentPosition, target);\n //work around - correct it\n var ctrlKey = this.isMetaKey(evt);\n if (ctrlKey && evt.shiftKey && this.diagram.connectorEditingToolModule) {\n this.action = 'SegmentEnd';\n }\n else if ((ctrlKey || evt.shiftKey) && (!canZoomPan(this.diagram))) {\n this.action = 'Select';\n }\n this.tool = this.diagram.getTool(this.action);\n if (!this.tool) {\n this.action = 'Select';\n this.tool = this.diagram.getTool(this.action);\n }\n this.getMouseEventArgs(this.currentPosition, this.eventArgs);\n if (ctrlKey || evt.shiftKey) {\n var info = (ctrlKey && evt.shiftKey) ? { ctrlKey: ctrlKey, shiftKey: evt.shiftKey } : { ctrlKey: true };\n this.eventArgs.info = info;\n }\n this.eventArgs.position = this.currentPosition;\n this.tool.mouseDown(this.eventArgs);\n this.initialEventArgs = { source: this.eventArgs.source, sourceWrapper: this.eventArgs.sourceWrapper };\n this.initialEventArgs.position = this.currentPosition;\n this.initialEventArgs.info = this.eventArgs.info;\n this.inAction = false;\n if (evt.type === 'touchstart') {\n if (touches && touches.length >= 2) {\n this.touchStartList = addTouchPointer(this.touchStartList, evt, touches);\n }\n if (!touches) {\n evt.preventDefault();\n }\n }\n }\n }\n if (!this.isForeignObject(evt.target) && !this.isForeignObject(evt.target, true) && (!touches)) {\n evt.preventDefault();\n }\n };\n DiagramEventHandler.prototype.mouseMoveExtend = function (e, obj) {\n if (this.tool instanceof PolygonDrawingTool) {\n this.tool.mouseMove(this.eventArgs);\n }\n if (this.diagram.scrollSettings.canAutoScroll) {\n this.checkAutoScroll(e);\n }\n else {\n if (!this.blocked) {\n (this.tool.mouseMove(this.eventArgs));\n }\n }\n if (this.eventArgs.target) {\n this.hoverElement = this.eventArgs.target;\n }\n var isNode = this.eventArgs.target instanceof Node && obj instanceof Node ? false : true;\n if (this.tool instanceof ConnectTool) {\n this.diagram.updatePortVisibility(this.hoverElement instanceof Node ? this.hoverElement : this.hoverNode, PortVisibility.Connect | PortVisibility.Hover, isNode);\n }\n if (this.hoverElement instanceof Node\n && this.hoverNode instanceof Node && this.hoverNode && this.hoverNode.id !== this.hoverElement.id) {\n this.diagram.updatePortVisibility(this.hoverNode, PortVisibility.Connect | PortVisibility.Hover, true);\n }\n this.hoverElement = isNode ? null : obj;\n this.hoverNode = isNode ? null : obj;\n };\n /** @private */\n DiagramEventHandler.prototype.mouseMove = function (e, touches) {\n this.focus = true;\n if (canUserInteract(this.diagram) || (canZoomPan(this.diagram) && !defaultTool(this.diagram))) {\n this.currentPosition = this.getMousePosition(e);\n var objects = this.diagram.findObjectsUnderMouse(this.currentPosition);\n var obj = this.diagram.findObjectUnderMouse(objects, this.action, this.inAction);\n drawRulerMarkers(this.diagram, this.currentPosition);\n var force = false;\n var target = void 0;\n if (e.type === 'touchmove') {\n touches = e.touches;\n if (touches && touches.length > 1) {\n this.touchMoveList = addTouchPointer(this.touchMoveList, e, touches);\n if (this.action !== 'PinchZoom') {\n force = true;\n }\n }\n }\n if (Point.equals(this.currentPosition, this.prevPosition) === false || this.inAction) {\n if (this.isMouseDown === false || force) {\n this.eventArgs = {};\n var sourceElement = null;\n if (obj !== null) {\n sourceElement = this.diagram.findElementUnderMouse(obj, this.currentPosition);\n if (obj !== this.hoverElement) {\n if (this.hoverElement) {\n this.elementLeave();\n this.diagram.updatePortVisibility(this.hoverElement, PortVisibility.Hover, true);\n }\n if (obj instanceof Node) {\n this.hoverNode = obj;\n }\n this.hoverElement = obj;\n this.elementEnter(this.currentPosition, false);\n }\n else if (!this.hoverElement && this.hoverElement === obj) {\n this.elementEnter(this.currentPosition, true);\n }\n if (sourceElement) {\n target = this.commandHandler.findTarget(sourceElement, obj);\n }\n }\n this.action = this.diagram.findActionToBeDone(obj, sourceElement, this.currentPosition, target);\n this.getMouseEventArgs(this.currentPosition, this.eventArgs);\n this.tool = this.getTool(this.action);\n if (this.tool instanceof ConnectorDrawingTool) {\n this.tool.mouseMove(this.eventArgs);\n }\n else if (this.tool instanceof PolygonDrawingTool) {\n this.tool.mouseMove(this.eventArgs);\n }\n else if (touches && this.tool instanceof ZoomPanTool) {\n this.tool.mouseDown(this.eventArgs);\n }\n this.updateCursor();\n var isNode = false;\n if (!(this.hoverElement && (!(this.tool instanceof ZoomPanTool)) && obj instanceof Node &&\n (this.diagram.selectedItems.nodes.length === 0 || !isSelected(this.diagram, this.hoverElement)))) {\n isNode = true;\n }\n this.diagram.updatePortVisibility(this.hoverElement, PortVisibility.Hover, isNode);\n if (obj === null && this.hoverElement) {\n this.hoverElement = null;\n this.elementLeave();\n }\n force = false;\n }\n else {\n this.eventArgs.position = this.currentPosition;\n if (this.action === 'Drag' && !isSelected(this.diagram, this.eventArgs.source, false) &&\n this.eventArgs.source instanceof Selector) {\n this.getMouseEventArgs(this.currentPosition, this.eventArgs);\n }\n if (e.ctrlKey || e.shiftKey) {\n var info = (e.ctrlKey && e.shiftKey) ? { ctrlKey: e.ctrlKey, shiftKey: e.shiftKey } : { ctrlKey: true };\n this.eventArgs.info = info;\n }\n if (canMove(obj) && canSelect(obj) && this.initialEventArgs &&\n this.initialEventArgs.source && this.action === 'Select') {\n if (!isSelected(this.diagram, this.eventArgs.source, false) &&\n this.eventArgs.source instanceof Selector) {\n this.getMouseEventArgs(this.currentPosition, this.eventArgs);\n }\n if (!(obj instanceof Connector) || (obj instanceof Connector &&\n !(contains(this.currentPosition, obj.sourcePoint, obj.hitPadding) ||\n contains(this.currentPosition, obj.targetPoint, obj.hitPadding)))) {\n this.action = 'Drag';\n }\n this.tool = this.getTool(this.action);\n this.tool.mouseDown(this.initialEventArgs);\n }\n this.getMouseEventArgs(this.currentPosition, this.eventArgs, this.eventArgs.source);\n this.updateCursor();\n this.inAction = true;\n this.initialEventArgs = null;\n this.mouseMoveExtend(e, obj);\n }\n this.prevPosition = this.currentPosition;\n if (!this.isForeignObject(e.target, true)) {\n e.preventDefault();\n }\n }\n }\n };\n DiagramEventHandler.prototype.checkAutoScroll = function (e) {\n var autoScrollPosition = this.startAutoScroll(e);\n if (!autoScrollPosition && this.doingAutoScroll) {\n this.doingAutoScroll = false;\n clearInterval(this.timeOutValue);\n }\n else if (autoScrollPosition) {\n if ((this.tool instanceof MoveTool || this.tool instanceof ResizeTool\n || this.tool instanceof SelectTool) && this.inAction) {\n var diagram_1 = this;\n var delay_1 = 100;\n if (this.diagram.scrollSettings.canAutoScroll && autoScrollPosition && !this.doingAutoScroll) {\n this.doingAutoScroll = true;\n this.timeOutValue = setInterval(function (args) {\n diagram_1.doAutoScroll(autoScrollPosition, e, delay_1);\n }, delay_1);\n }\n }\n }\n else {\n this.blocked = !(this.tool.mouseMove(this.eventArgs));\n }\n };\n /** @private */\n DiagramEventHandler.prototype.mouseUp = function (evt) {\n var touches;\n touches = evt.touches;\n if (!this.checkEditBoxAsTarget(evt) && (canUserInteract(this.diagram))\n || (canZoomPan(this.diagram) && !defaultTool(this.diagram))) {\n if (this.tool && (!(this.tool instanceof PolygonDrawingTool) ||\n ((this.tool instanceof PolygonDrawingTool) && evt.detail === 2))) {\n this.diagram.endEdit();\n document.getElementById(this.diagram.element.id + 'content').focus();\n if (!this.inAction && evt.which !== 3) {\n if (this.action === 'Drag') {\n this.action = 'Select';\n var objects = this.diagram.findObjectsUnderMouse(this.currentPosition);\n var obj = this.diagram.findObjectUnderMouse(objects, this.action, this.inAction);\n var isMultipleSelect = true;\n if ((!evt.ctrlKey && this.isMouseDown\n && (this.diagram.selectedItems.nodes.length + this.diagram.selectedItems.connectors.length) > 1)\n && evt.which === 1) {\n isMultipleSelect = false;\n this.commandHandler.clearSelection();\n }\n if (!isSelected(this.diagram, obj) || (!isMultipleSelect)) {\n this.commandHandler.selectObjects([obj]);\n }\n }\n }\n this.inAction = false;\n this.isMouseDown = false;\n this.currentPosition = this.getMousePosition(evt);\n if (this.tool && (this.tool.prevPosition || this.tool instanceof LabelTool)) {\n this.eventArgs.position = this.currentPosition;\n this.getMouseEventArgs(this.currentPosition, this.eventArgs, this.eventArgs.source);\n var ctrlKey = this.isMetaKey(evt);\n if (ctrlKey || evt.shiftKey) {\n var info = (ctrlKey && evt.shiftKey) ? { ctrlKey: ctrlKey, shiftKey: evt.shiftKey } :\n { ctrlKey: true };\n this.eventArgs.info = info;\n }\n this.eventArgs.clickCount = evt.detail;\n this.tool.mouseUp(this.eventArgs);\n }\n this.blocked = false;\n if (this.hoverElement) {\n var portVisibility = PortVisibility.Connect;\n if (isSelected(this.diagram, this.hoverElement)) {\n portVisibility |= PortVisibility.Hover;\n }\n this.diagram.updatePortVisibility(this.hoverElement, portVisibility, true);\n this.hoverElement = null;\n }\n this.touchStartList = null;\n this.touchMoveList = null;\n if (!(this.tool instanceof TextDrawingTool)) {\n this.tool = null;\n }\n }\n this.eventArgs = {};\n if (!touches) {\n evt.preventDefault();\n }\n this.diagram.currentDrawingObject = undefined;\n var selector = this.diagram.selectedItems;\n if (!this.inAction && selector.wrapper && selector.userHandles.length > 0) {\n this.diagram.renderSelector(true);\n }\n if (!this.inAction && !this.diagram.currentSymbol) {\n var arg = {\n element: this.eventArgs.source || this.diagram, position: this.eventArgs.position, count: evt.detail\n };\n this.diagram.triggerEvent(DiagramEvent.click, arg);\n }\n }\n //end the corresponding tool\n };\n /** @private */\n DiagramEventHandler.prototype.mouseLeave = function (evt) {\n //Define what has to happen on mouse leave\n if (this.tool && this.inAction) {\n this.tool.mouseLeave(this.eventArgs);\n }\n if (this.eventArgs && this.eventArgs.source) {\n this.diagram.updatePortVisibility(this.eventArgs.source, PortVisibility.Hover, true);\n this.hoverElement = null;\n }\n if (this.tool instanceof ConnectTool && this.eventArgs && this.eventArgs.target && this.eventArgs.target instanceof Node) {\n this.diagram.updatePortVisibility(this.eventArgs.target, PortVisibility.Hover | PortVisibility.Connect, true);\n this.hoverElement = null;\n }\n var selector = this.diagram.selectedItems;\n if (selector && selector.wrapper) {\n this.diagram.renderSelector(true);\n }\n this.isMouseDown = false;\n this.focus = false;\n this.touchStartList = null;\n this.touchMoveList = null;\n this.commandHandler.removeSnap();\n this.inAction = false;\n this.eventArgs = {};\n this.tool = null;\n removeRulerMarkers();\n evt.preventDefault();\n };\n /** @private */\n DiagramEventHandler.prototype.mouseWheel = function (evt) {\n var up = (evt.wheelDelta > 0 || -40 * evt.detail > 0) ? true : false;\n var mousePosition = this.getMousePosition(evt);\n this.diagram.endEdit();\n this.diagram.tooltipObject.close();\n var ctrlKey = this.isMetaKey(evt);\n if (ctrlKey) {\n this.diagram.zoom(up ? (1.2) : 1 / (1.2), mousePosition);\n evt.preventDefault();\n }\n else {\n var horizontalOffset = this.diagram.scroller.horizontalOffset;\n var verticalOffset = this.diagram.scroller.verticalOffset;\n var change = up ? 20 : -20;\n if (this.tool && this.tool instanceof PolygonDrawingTool) {\n this.eventArgs = {};\n this.getMouseEventArgs(mousePosition, this.eventArgs);\n this.eventArgs.position = mousePosition;\n this.tool.mouseWheel(this.eventArgs);\n }\n if (evt.shiftKey) {\n this.diagram.scroller.zoom(1, change, 0, mousePosition);\n }\n else {\n this.diagram.scroller.zoom(1, 0, change, mousePosition);\n }\n if (horizontalOffset !== this.diagram.scroller.horizontalOffset\n || verticalOffset !== this.diagram.scroller.verticalOffset) {\n evt.preventDefault();\n }\n }\n };\n /** @private */\n DiagramEventHandler.prototype.keyDown = function (evt) {\n if (!(this.diagram.diagramActions & DiagramAction.TextEdit) &&\n !(this.checkEditBoxAsTarget(evt)) || (evt.key === 'Escape' || evt.keyCode === 27)) {\n var i = void 0;\n var command = void 0;\n var keycode = evt.keyCode ? evt.keyCode : evt.which;\n var key = evt.key;\n var ctrlKey = this.isMetaKey(evt);\n if (this.diagram.commandManager && this.diagram.commands) {\n var commands = this.diagram.commands;\n for (var _i = 0, _a = Object.keys(commands); _i < _a.length; _i++) {\n var i_1 = _a[_i];\n command = this.diagram.commands[i_1];\n if (command && (command.gesture.keyModifiers || command.gesture.key)) {\n if ((keycode === command.gesture.key || (key === Keys[command.gesture.key])\n || this.isDeleteKey(key, i_1))\n && (((!command.gesture.keyModifiers) && (!evt.altKey) && (!evt.shiftKey) && (!ctrlKey)) ||\n (command.gesture.keyModifiers && (ctrlKey || evt.altKey || evt.shiftKey) &&\n (this.altKeyPressed(command.gesture.keyModifiers) && evt.altKey) ||\n (this.shiftKeyPressed(command.gesture.keyModifiers) && evt.shiftKey) ||\n (this.ctrlKeyPressed(command.gesture.keyModifiers) && ctrlKey)))) {\n var canExecute = getFunction(command.canExecute);\n if (canExecute && canExecute({\n 'keyDownEventArgs': KeyboardEvent,\n parameter: command.parameter\n })) {\n evt.preventDefault();\n if (evt.key === 'Escape' && (this.checkEditBoxAsTarget(evt))) {\n document.getElementById(this.diagram.diagramCanvas.id).focus();\n }\n if (command.execute) {\n // if (i === 'nudgeUp' || i === \"nudgeRight\" || i === \"nudgeDown\" || i === 'nudgeLeft') {\n // command.execute()\n // } else {\n var execute = getFunction(command.execute);\n execute({ 'keyDownEventArgs': KeyboardEvent, parameter: command.parameter });\n // }\n }\n break;\n }\n }\n }\n }\n }\n }\n };\n DiagramEventHandler.prototype.startAutoScroll = function (e) {\n var position = this.getMousePosition(e);\n position.x *= this.diagram.scroller.currentZoom;\n position.y *= this.diagram.scroller.currentZoom;\n var movingPosition;\n var autoScrollBorder = this.diagram.scrollSettings.autoScrollBorder;\n if (this.diagram.scrollSettings.canAutoScroll) {\n if (position.x + this.diagram.scroller.horizontalOffset + autoScrollBorder.right > this.diagram.scroller.viewPortWidth - 18) {\n movingPosition = 'right';\n }\n else if (position.x + this.diagram.scroller.horizontalOffset < autoScrollBorder.left) {\n movingPosition = 'left';\n }\n else if (position.y + this.diagram.scroller.verticalOffset + autoScrollBorder.bottom >\n this.diagram.scroller.viewPortHeight - 18) {\n movingPosition = 'bottom';\n }\n else if (position.y + this.diagram.scroller.verticalOffset < autoScrollBorder.top) {\n movingPosition = 'top';\n }\n }\n return movingPosition;\n };\n DiagramEventHandler.prototype.doAutoScroll = function (option, e, delay, autoScroll) {\n var position = option;\n if ((this.tool instanceof MoveTool || this.tool instanceof ResizeTool\n || this.tool instanceof SelectTool) && this.inAction) {\n var diagram = this;\n this.eventArgs.position = { x: this.tool.prevPosition.x, y: this.tool.prevPosition.y };\n var pos = this.getMousePosition(e);\n var autoScrollBorder = this.diagram.scrollSettings.autoScrollBorder;\n var newDelay = delay ? delay : 100;\n var left = 0;\n var top_1 = 0;\n switch (position) {\n case 'right':\n this.eventArgs.position.x += 10;\n left = 10;\n break;\n case 'left':\n this.eventArgs.position.x -= 10;\n left = -10;\n break;\n case 'bottom':\n this.eventArgs.position.y += 10;\n top_1 = 10;\n break;\n case 'top':\n this.eventArgs.position.y -= 10;\n top_1 = -10;\n break;\n }\n this.tool.mouseMove(this.eventArgs);\n this.diagram.scroller.zoom(1, -left, -top_1, pos);\n }\n };\n DiagramEventHandler.prototype.elementEnter = function (mousePosition, elementOver) {\n if (!elementOver) {\n var isPrivateTooltip = ((this.hoverElement instanceof Node) &&\n this.hoverElement.constraints & NodeConstraints.Tooltip) ||\n ((this.hoverElement instanceof Connector) && this.hoverElement.constraints & ConnectorConstraints.Tooltip);\n updateTooltip(this.diagram, isPrivateTooltip ? this.hoverElement : undefined);\n var offset = getTooltipOffset(this.diagram, mousePosition, this.hoverElement);\n this.diagram.tooltipObject.close();\n this.diagram.tooltipObject.offsetX = offset.x;\n this.diagram.tooltipObject.offsetY = offset.y;\n this.diagram.tooltipObject.dataBind();\n if (canEnableToolTip(this.hoverElement, this.diagram)) {\n this.diagram.tooltipObject.open(this.diagram.element);\n }\n }\n };\n DiagramEventHandler.prototype.elementLeave = function () {\n this.diagram.tooltipObject.close();\n };\n DiagramEventHandler.prototype.altKeyPressed = function (keyModifier) {\n if (keyModifier & KeyModifiers.Alt) {\n return true;\n }\n return false;\n };\n DiagramEventHandler.prototype.ctrlKeyPressed = function (keyModifier) {\n if (keyModifier & KeyModifiers.Control) {\n return true;\n }\n return false;\n };\n DiagramEventHandler.prototype.shiftKeyPressed = function (keyModifier) {\n if (keyModifier & KeyModifiers.Shift) {\n return true;\n }\n return false;\n };\n /** @private */\n DiagramEventHandler.prototype.scrolled = function (evt) {\n this.diagram.updateScrollOffset();\n };\n /** @private */\n DiagramEventHandler.prototype.doubleClick = function (evt) {\n if (canUserInteract(this.diagram)) {\n var annotation = void 0;\n var objects = this.diagram.findObjectsUnderMouse(this.currentPosition);\n var obj = this.diagram.findObjectUnderMouse(objects, this.action, this.inAction);\n if (obj !== null && canUserInteract(this.diagram)) {\n var node = obj;\n annotation = this.diagram.findElementUnderMouse(obj, this.currentPosition);\n if (this.tool && this.tool instanceof PolygonDrawingTool) {\n var arg_1 = {\n source: obj || this.diagram, position: this.currentPosition, count: evt.detail\n };\n this.tool.mouseUp(this.eventArgs, arg_1);\n this.isMouseDown = false;\n this.eventArgs = {};\n this.tool = null;\n evt.preventDefault();\n }\n else {\n var layer = this.diagram.commandHandler.getObjectLayer(obj.id);\n if (layer && !layer.lock && layer.visible) {\n if (!(this.diagram.diagramActions & DiagramAction.TextEdit)) {\n var id = '';\n if (obj.shape.shape === 'TextAnnotation') {\n id = obj.id.split('_textannotation_')[1];\n }\n this.diagram.startTextEdit(obj, id || (annotation instanceof TextElement ?\n (annotation.id).split(obj.id + '_')[1] : undefined));\n }\n }\n }\n }\n var arg = {\n source: obj || this.diagram, position: this.currentPosition, count: evt.detail\n };\n this.diagram.triggerEvent(DiagramEvent.doubleClick, arg);\n }\n };\n /**\n * @private\n */\n DiagramEventHandler.prototype.inputChange = function (evt) {\n var minWidth = 90;\n var maxWidth;\n var minHeight = 12;\n var fontsize;\n var textWrapper;\n var node;\n var height;\n var width;\n var textBounds;\n var textBoxWidth;\n var transforms;\n var editTextBox = document.getElementById(this.diagram.element.id + '_editBox');\n var editTextBoxDiv = document.getElementById(this.diagram.element.id + '_editTextBoxDiv');\n var text = (editTextBox.value);\n var line = text.split('\\n');\n node = (this.diagram.selectedItems.nodes[0]) ? this.diagram.selectedItems.nodes[0] : this.diagram.selectedItems.connectors[0];\n if (!node && this.tool instanceof TextDrawingTool) {\n node = this.diagram.nameTable[this.diagram.activeLabel.parentId];\n }\n if (node && ((node.shape.type !== 'Text' && node.annotations.length > 0) || (node.shape.type === 'Text'))) {\n textWrapper = this.diagram.getWrapper(node.wrapper, this.diagram.activeLabel.id);\n maxWidth = node.wrapper.bounds.width > textWrapper.bounds.width ? node.wrapper.bounds.width : textWrapper.bounds.width;\n maxWidth = maxWidth > minWidth ? maxWidth : minWidth;\n textBounds = measureHtmlText(textWrapper.style, text, undefined, undefined, maxWidth);\n fontsize = Number((editTextBox.style.fontSize).split('px')[0]);\n if (line.length > 1 && line[line.length - 1] === '') {\n textBounds.height = textBounds.height + fontsize;\n }\n width = textBounds.width;\n width = (minWidth > width) ? minWidth : width;\n height = (minHeight > textBounds.height) ? minHeight : textBounds.height;\n transforms = this.diagram.scroller.transform;\n editTextBoxDiv.style.left = ((((textWrapper.bounds.center.x + transforms.tx) * transforms.scale) - width / 2) - 2.5) + 'px';\n editTextBoxDiv.style.top = ((((textWrapper.bounds.center.y + transforms.ty) * transforms.scale) - height / 2) - 3) + 'px';\n editTextBoxDiv.style.width = width + 'px';\n editTextBoxDiv.style.height = height + 'px';\n editTextBox.style.minHeight = minHeight + 'px';\n editTextBox.style.minWidth = minWidth + 'px';\n editTextBox.style.width = width + 'px';\n editTextBox.style.height = height + 'px';\n }\n };\n /**\n * @private\n */\n DiagramEventHandler.prototype.isAddTextNode = function (node, focusOut) {\n if (this.tool instanceof TextDrawingTool || focusOut) {\n this.tool = null;\n if (node && (!(canContinuousDraw(this.diagram)))) {\n this.diagram.drawingObject = undefined;\n this.diagram.currentDrawingObject = undefined;\n }\n if (getObjectFromCollection(this.diagram.nodes, node.id) || getObjectFromCollection(this.diagram.connectors, node.id)) {\n return false;\n }\n return true;\n }\n return false;\n };\n DiagramEventHandler.prototype.checkEditBoxAsTarget = function (evt) {\n if ((evt.target && evt.target.id === this.diagram.element.id + '_editBox')) {\n return true;\n }\n return false;\n };\n DiagramEventHandler.prototype.getMouseEventArgs = function (position, args, source) {\n args.position = position;\n var obj;\n var objects;\n if (!source) {\n if (this.action === 'Drag' || this.action === 'ConnectorSourceEnd' || this.action === 'SegmentEnd' ||\n this.action === 'OrthoThumb' || this.action === 'BezierSourceThumb' || this.action === 'BezierTargetThumb' ||\n this.action === 'ConnectorTargetEnd' || this.action === 'Rotate' || this.action.indexOf('Resize') !== -1) {\n obj = this.diagram.selectedItems;\n }\n else {\n objects = this.diagram.findObjectsUnderMouse(this.currentPosition);\n obj = this.diagram.findObjectUnderMouse(objects, this.action, this.inAction);\n }\n }\n else {\n objects = this.diagram.findObjectsUnderMouse(this.currentPosition, source);\n obj = this.diagram.findTargetObjectUnderMouse(objects, this.action, this.inAction, args.position, source);\n }\n var wrapper;\n if (obj) {\n wrapper = this.diagram.findElementUnderMouse(obj, this.currentPosition);\n }\n if (!source) {\n args.source = obj;\n args.sourceWrapper = wrapper;\n }\n else {\n args.target = obj;\n args.targetWrapper = wrapper;\n }\n args.startTouches = this.touchStartList;\n args.moveTouches = this.touchMoveList;\n return args;\n };\n /** @private */\n DiagramEventHandler.prototype.resetTool = function () {\n this.action = 'Select';\n this.hoverElement = null;\n this.hoverNode = null;\n this.tool = this.diagram.getTool(this.action);\n this.updateCursor();\n };\n /** @private */\n DiagramEventHandler.prototype.getTool = function (action) {\n switch (action) {\n case 'Select':\n return new SelectTool(this.commandHandler, true);\n case 'Drag':\n return new MoveTool(this.commandHandler);\n case 'Rotate':\n return new RotateTool(this.commandHandler);\n case 'LayoutAnimation':\n return new ExpandTool(this.commandHandler);\n case 'Hyperlink':\n return new LabelTool(this.commandHandler);\n case 'ResizeSouthEast':\n case 'ResizeSouthWest':\n case 'ResizeNorthEast':\n case 'ResizeNorthWest':\n case 'ResizeSouth':\n case 'ResizeNorth':\n case 'ResizeWest':\n case 'ResizeEast':\n return new ResizeTool(this.commandHandler, action);\n case 'ConnectorSourceEnd':\n case 'ConnectorTargetEnd':\n case 'BezierSourceThumb':\n case 'BezierTargetThumb':\n return new ConnectTool(this.commandHandler, action);\n case 'SegmentEnd':\n case 'OrthoThumb':\n return new ConnectorEditing(this.commandHandler, action);\n case 'Draw':\n var shape = 'shape';\n var type = findObjectType(this.diagram.drawingObject);\n if (type === 'Node' && this.diagram.drawingObject.shape.type === 'Text') {\n return new TextDrawingTool(this.commandHandler);\n }\n else if (type === 'Node' && this.diagram.drawingObject.shape[shape] === 'Polygon' &&\n !(this.diagram.drawingObject.shape.points)) {\n return new PolygonDrawingTool(this.commandHandler);\n }\n else if (type === 'Node' ||\n (type === 'Node' && this.diagram.drawingObject.shape[shape] === 'Polygon' &&\n (this.diagram.drawingObject.shape.points))) {\n return new NodeDrawingTool(this.commandHandler, this.diagram.drawingObject);\n }\n else if (type === 'Connector') {\n return new ConnectorDrawingTool(this.commandHandler, 'ConnectorSourceEnd', this.diagram.drawingObject);\n }\n break;\n case 'Pan':\n return new ZoomPanTool(this.commandHandler, false);\n case 'PinchZoom':\n return new ZoomPanTool(this.commandHandler, true);\n case 'PortDrag':\n return new MoveTool(this.commandHandler, 'Port');\n case 'PortDraw':\n return new ConnectorDrawingTool(this.commandHandler, 'ConnectorSourceEnd', this.diagram.drawingObject);\n }\n return null;\n };\n /** @private */\n DiagramEventHandler.prototype.getCursor = function (action) {\n return getCursor(action, this.diagram.selectedItems.rotateAngle);\n };\n //start region - interface betweend diagram and interaction\n /** @private */\n DiagramEventHandler.prototype.findElementUnderMouse = function (obj, position) {\n return this.objectFinder.findElementUnderSelectedItem(obj, position);\n };\n /** @private */\n DiagramEventHandler.prototype.findObjectsUnderMouse = function (position, source) {\n return this.objectFinder.findObjectsUnderMouse(position, this.diagram, source);\n };\n /** @private */\n DiagramEventHandler.prototype.findObjectUnderMouse = function (objects, action, inAction) {\n return this.objectFinder.findObjectUnderMouse(this.diagram, objects, action, inAction, this.currentPosition);\n };\n /** @private */\n DiagramEventHandler.prototype.findTargetUnderMouse = function (objects, action, inAction, position, source) {\n return this.objectFinder.findObjectUnderMouse(this.diagram, objects, action, inAction, position, source);\n };\n /** @private */\n DiagramEventHandler.prototype.findActionToBeDone = function (obj, wrapper, position, target) {\n return findToolToActivate(obj, wrapper, this.currentPosition, this.diagram, this.touchStartList, this.touchMoveList, target);\n };\n return DiagramEventHandler;\n}());\nexport { DiagramEventHandler };\n/** @private */\nvar ObjectFinder = /** @class */ (function () {\n function ObjectFinder() {\n }\n /** @private */\n ObjectFinder.prototype.findObjectsUnderMouse = function (pt, diagram, source, actions) {\n // finds the collection of the object that is under the mouse;\n var actualTarget = [];\n if (source && source instanceof Selector) {\n if (source.nodes.length + source.connectors.length === 1) {\n source = (source.nodes[0] || source.connectors[0]);\n }\n }\n var container;\n var bounds;\n var child;\n var matrix;\n var objArray = diagram.spatialSearch.findObjects(new Rect(pt.x - 50, pt.y - 50, 100, 100));\n var layerObjTable = {};\n var layerTarger;\n for (var _i = 0, objArray_1 = objArray; _i < objArray_1.length; _i++) {\n var obj = objArray_1[_i];\n var point = pt;\n bounds = obj.wrapper.outerBounds;\n if ((obj !== source || diagram.currentDrawingObject instanceof Connector) &&\n (obj instanceof Connector) ? obj !== diagram.currentDrawingObject : true && obj.wrapper.visible) {\n var layer = diagram.commandHandler.getObjectLayer(obj.id);\n if (layer && !layer.lock && layer.visible) {\n layerTarger = layerObjTable[layer.zIndex] = layerObjTable[layer.zIndex] || [];\n if (obj.rotateAngle) {\n container = obj.wrapper;\n matrix = identityMatrix();\n rotateMatrix(matrix, -(container.rotateAngle + container.parentTransform), obj.offsetX, obj.offsetY);\n point = transformPointByMatrix(matrix, pt);\n bounds = container.corners;\n for (var _a = 0, _b = container.children; _a < _b.length; _a++) {\n child = _b[_a];\n bounds.uniteRect(child.corners);\n }\n }\n if (!source || (isSelected(diagram, obj) === false)) {\n if (canEnablePointerEvents(obj, diagram)) {\n if ((obj instanceof Connector) ? isPointOverConnector(obj, pt) : bounds.containsPoint(point)) {\n var padding = (obj instanceof Connector) ? obj.hitPadding || 0 : 0;\n var element = void 0;\n element = this.findElementUnderMouse(obj, pt, padding);\n if (element) {\n if (obj instanceof Connector && diagram.bpmnModule) {\n obj = diagram.bpmnModule.findInteractableObject(obj, diagram);\n }\n insertObject(obj, 'zIndex', layerTarger);\n }\n }\n }\n }\n }\n }\n }\n for (var _c = 0, _d = diagram.layers; _c < _d.length; _c++) {\n var layer = _d[_c];\n actualTarget = actualTarget.concat(layerObjTable[layer.zIndex] || []);\n for (var _e = 0, actualTarget_1 = actualTarget; _e < actualTarget_1.length; _e++) {\n var obj = actualTarget_1[_e];\n var eventHandler = 'eventHandler';\n if (obj.shape.type === 'Bpmn' && obj.processId && (!(diagram[eventHandler].tool instanceof MoveTool) ||\n (diagram[eventHandler].tool instanceof MoveTool) && canAllowDrop(obj))) {\n var index = actualTarget.indexOf(diagram.nameTable[obj.processId]);\n if (index > -1) {\n actualTarget.splice(index, 1);\n }\n }\n }\n }\n for (var i = 0; i < actualTarget.length; i++) {\n var parentObj = diagram.nameTable[actualTarget[i].parentId];\n if (parentObj) {\n var portElement = this.findElementUnderMouse(parentObj, pt);\n for (var j = 0; j < parentObj.ports.length; j++) {\n if (portElement.id.match('_' + parentObj.ports[j].id + '$')) {\n var port = parentObj.ports[j];\n if (canDrag(port, diagram) || canDraw(port, diagram)) {\n return actualTarget;\n }\n }\n }\n }\n while (parentObj) {\n var index = actualTarget.indexOf(parentObj);\n if (index !== -1) {\n actualTarget.splice(index, 1);\n }\n else {\n break;\n }\n parentObj = diagram.nameTable[parentObj.parentId];\n }\n }\n return actualTarget;\n };\n /** @private */\n ObjectFinder.prototype.isTarget = function (actualTarget, diagram, action) {\n var connector = diagram.selectedItems.connectors[0];\n var node;\n node = action === 'ConnectorSourceEnd' ? diagram.nameTable[connector.targetID] :\n node = diagram.nameTable[connector.sourceID];\n if (node && (!node.processId && !actualTarget.processId || node.processId !== actualTarget.processId)) {\n if (node.processId !== actualTarget.processId) {\n actualTarget = null;\n }\n }\n return actualTarget;\n };\n /* tslint:disable */\n /** @private */\n ObjectFinder.prototype.findObjectUnderMouse = function (diagram, objects, action, inAction, position, source) {\n //we will get the wrapper object here\n //we have to choose the object to be interacted with from the given wrapper\n //Find the object that is under mouse\n var eventHandler = 'eventHandler';\n var actualTarget = null;\n if (objects.length !== 0) {\n if (source && source instanceof Selector) {\n if (source.nodes.length + source.connectors.length === 1) {\n source = (source.nodes[0] || source.connectors[0]);\n }\n }\n if ((action === 'ConnectorSourceEnd' && source || action === 'PortDraw') ||\n ((canDrawOnce(diagram) || canContinuousDraw(diagram)) && getObjectType(diagram.drawingObject) === Connector)) {\n var connector = diagram.selectedItems.connectors[0];\n for (var i = objects.length - 1; i >= 0; i--) {\n if (objects[i] instanceof Node && canOutConnect(objects[i])) {\n actualTarget = objects[i];\n if (connector) {\n actualTarget = this.isTarget(actualTarget, diagram, action);\n }\n return actualTarget;\n }\n }\n }\n else if (action === 'ConnectorTargetEnd' && source) {\n for (var i = objects.length - 1; i >= 0; i--) {\n if (objects[i] instanceof Node && canInConnect(objects[i])) {\n actualTarget = objects[i];\n actualTarget = this.isTarget(actualTarget, diagram, action);\n return actualTarget;\n }\n }\n }\n else if (source && (action === 'Drag' || (diagram[eventHandler].tool instanceof MoveTool))) {\n var index = 0;\n for (var i = 0; i < objects.length; i++) {\n var temp = objects[i];\n if (source !== temp && (temp instanceof Connector ||\n !position || temp.wrapper.bounds.containsPoint(position))) {\n if (canAllowDrop(temp)) {\n if (!actualTarget) {\n actualTarget = temp;\n index = actualTarget.zIndex;\n }\n else {\n actualTarget = index >= temp.zIndex ? actualTarget : temp;\n index = Math.max(index, temp.zIndex);\n }\n }\n }\n }\n if (actualTarget && actualTarget.shape.type === 'Bpmn') {\n if (diagram.selectedItems.nodes.length > 0 && diagram.selectedItems.nodes[0].shape.type === 'Bpmn') {\n actualTarget = actualTarget;\n }\n else {\n actualTarget = null;\n }\n }\n return actualTarget;\n }\n else if (action === 'Select' && diagram[eventHandler].tool) {\n for (var i = objects.length - 1; i >= 0; i--) {\n if (objects[i] instanceof Connector) {\n if (objects[i - 1] instanceof Node && objects[i - 1].ports) {\n var portElement = this.findTargetElement(objects[i - 1].wrapper, position, undefined);\n if ((portElement && (portElement.id.match('_icon_content_shape$') || portElement.id.match('_icon_content_rect$')))) {\n return objects[i - 1];\n }\n for (var j = 0; j < objects[i - 1].ports.length; j++) {\n if (portElement && portElement.id.match('_' + objects[i - 1].ports[j].id + '$')) {\n if (canDraw(objects[i - 1].ports[j], diagram)) {\n return objects[i - 1];\n }\n }\n }\n }\n }\n }\n actualTarget = objects[objects.length - 1];\n if (actualTarget.parentId) {\n var obj = actualTarget;\n var selected = isSelected(diagram, obj);\n while (obj) {\n if (isSelected(diagram, obj) && !selected) {\n break;\n }\n actualTarget = obj;\n obj = diagram.nameTable[obj.parentId];\n }\n }\n }\n else if (action === 'Pan' || action === 'LayoutAnimation') {\n for (var i = objects.length - 1; i >= 0; i--) {\n if (objects[i] instanceof Node) {\n var portElement = this.findTargetElement(objects[i].wrapper, position, undefined);\n if ((action === 'LayoutAnimation' || action === 'Pan') || ((portElement && (portElement.id.match('_icon_content_shape$') || portElement.id.match('_icon_content_rect$'))))) {\n return objects[i];\n }\n }\n }\n }\n else {\n actualTarget = objects[objects.length - 1];\n }\n }\n return actualTarget;\n };\n /* tslint:enable */\n /** @private */\n ObjectFinder.prototype.findElementUnderSelectedItem = function (obj, position) {\n //rewrite this for multiple selection\n if (obj instanceof Selector) {\n if (obj.nodes.length === 1 && (!obj.connectors || !obj.connectors.length)) {\n return this.findElementUnderMouse(obj.nodes[0], position);\n }\n else if ((!obj.nodes || obj.nodes.length) && obj.connectors.length === 1) {\n return this.findElementUnderMouse(obj.connectors[0], position);\n }\n }\n else {\n return this.findElementUnderMouse(obj, position);\n }\n return null;\n };\n ObjectFinder.prototype.findElementUnderMouse = function (obj, position, padding) {\n return this.findTargetElement(obj.wrapper, position, padding);\n };\n /** @private */\n ObjectFinder.prototype.findTargetElement = function (container, position, padding) {\n for (var i = container.children.length - 1; i >= 0; i--) {\n var element = container.children[i];\n if (element && element.outerBounds.containsPoint(position)) {\n if (element instanceof Container) {\n var target = this.findTargetElement(element, position);\n if (target) {\n return target;\n }\n }\n if (element.bounds.containsPoint(position)) {\n return element;\n }\n }\n }\n if (container.bounds.containsPoint(position, padding) && container.style.fill !== 'none') {\n return container;\n }\n return null;\n };\n return ObjectFinder;\n}());\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * Defines the BackgroundImage of diagram\n */\nvar Layer = /** @class */ (function (_super) {\n __extends(Layer, _super);\n // tslint:disable-next-line:no-any\n function Layer(parent, propName, defaultValue, isArray) {\n var _this = _super.call(this, parent, propName, defaultValue, isArray) || this;\n /** @private */\n _this.objectZIndex = -1;\n /** @private */\n _this.zIndexTable = {};\n _this.objects = [];\n return _this;\n }\n __decorate([\n Property('')\n ], Layer.prototype, \"id\", void 0);\n __decorate([\n Property(true)\n ], Layer.prototype, \"visible\", void 0);\n __decorate([\n Property(false)\n ], Layer.prototype, \"lock\", void 0);\n __decorate([\n Property()\n ], Layer.prototype, \"objects\", void 0);\n __decorate([\n Property()\n ], Layer.prototype, \"addInfo\", void 0);\n __decorate([\n Property(-1)\n ], Layer.prototype, \"zIndex\", void 0);\n return Layer;\n}(ChildProperty));\nexport { Layer };\n","import { Connector, getBezierPoints, isEmptyVector } from '../objects/connector';\nimport { Node, BpmnSubEvent } from '../objects/node';\nimport { PathElement } from '../core/elements/path-element';\nimport { TextElement } from '../core/elements/text-element';\nimport { OrthogonalSegment } from '../objects/connector';\nimport { Rect } from '../primitives/rect';\nimport { identityMatrix, rotateMatrix, transformPointByMatrix, scaleMatrix } from './../primitives/matrix';\nimport { cloneObject as clone, cloneObject, getBounds, rotatePoint } from './../utility/base-util';\nimport { completeRegion, getTooltipOffset, sort, findPortIndex } from './../utility/diagram-util';\nimport { randomId } from './../utility/base-util';\nimport { Selector } from './selector';\nimport { hasSelection, isSelected, hasSingleConnection } from './actions';\nimport { DiagramEvent } from '../enum/enum';\nimport { canSelect, canMove, canRotate, canDragSourceEnd, canDragTargetEnd, canSingleSelect, canDrag } from './../utility/constraints-util';\nimport { canMultiSelect, canContinuousDraw } from './../utility/constraints-util';\nimport { canPanX, canPanY, canPageEditable } from './../utility/constraints-util';\nimport { SnapConstraints, DiagramTools, DiagramAction } from '../enum/enum';\nimport { getDiagramElement, getAdornerLayerSvg, getHTMLLayer, getAdornerLayer } from '../utility/dom-util';\nimport { Point } from '../primitives/point';\nimport { Size } from '../primitives/size';\nimport { getObjectType } from './../utility/diagram-util';\nimport { Layer } from '../diagram/layer';\nimport { SelectorConstraints } from '../enum/enum';\nimport { remove } from '@syncfusion/ej2-base';\nimport { getOppositeDirection, getPortDirection } from './../utility/connector';\n/**\n * Defines the behavior of commands\n */\nvar CommandHandler = /** @class */ (function () {\n function CommandHandler(diagram) {\n this.clipboardData = {};\n this.connectorsTable = [];\n this.processTable = {};\n this.childTable = {};\n this.parentTable = {};\n this.diagram = diagram;\n }\n Object.defineProperty(CommandHandler.prototype, \"snappingModule\", {\n get: function () {\n return this.diagram.snappingModule;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(CommandHandler.prototype, \"layoutAnimateModule\", {\n get: function () {\n return this.diagram.layoutAnimateModule;\n },\n enumerable: true,\n configurable: true\n });\n /** @private */\n CommandHandler.prototype.startTransaction = function (protectChange) {\n this.state = { element: this.diagram.selectedItems, backup: null };\n if (protectChange) {\n this.diagram.protectPropertyChange(true);\n }\n getAdornerLayer(this.diagram.element.id).style.pointerEvents = 'none';\n };\n /** @private */\n CommandHandler.prototype.endTransaction = function (protectChange) {\n this.state = null;\n if (protectChange) {\n this.diagram.protectPropertyChange(false);\n }\n getAdornerLayer(this.diagram.element.id).style.pointerEvents = 'all';\n };\n /**\n * @private\n */\n CommandHandler.prototype.showTooltip = function (node, position, content, toolName, isTooltipVisible) {\n var _this = this;\n if (isTooltipVisible) {\n this.diagram.tooltipObject.position = 'BottomCenter';\n this.diagram.tooltipObject.animation = { open: { delay: 0, duration: 0 } };\n this.diagram.tooltip.relativeMode = toolName === 'ConnectTool' ? 'Mouse' : 'Object';\n this.diagram.tooltipObject.openDelay = 0;\n this.diagram.tooltipObject.closeDelay = 0;\n }\n this.diagram.tooltipObject.content = content;\n var tooltipOffset = getTooltipOffset(this.diagram, { x: position.x, y: position.y }, node);\n this.diagram.tooltipObject.offsetX = tooltipOffset.x + (toolName === 'ConnectTool' ? 10 : 0);\n this.diagram.tooltipObject.offsetY = tooltipOffset.y + 10;\n this.diagram.tooltipObject.dataBind();\n if (isTooltipVisible) {\n setTimeout(function () {\n _this.diagram.tooltipObject.open(_this.diagram.element);\n }, 1);\n }\n };\n /**\n * @private\n */\n CommandHandler.prototype.closeTooltip = function () {\n this.diagram.tooltipObject.close();\n };\n /**\n * @private\n */\n CommandHandler.prototype.canEnableDefaultTooltip = function () {\n if (this.diagram.selectedItems.constraints & SelectorConstraints.ToolTip) {\n return true;\n }\n else {\n return false;\n }\n };\n /**\n * @private\n */\n CommandHandler.prototype.updateSelector = function () {\n this.diagram.updateSelector();\n };\n /**\n * @private\n */\n CommandHandler.prototype.triggerEvent = function (event, args) {\n if (event === DiagramEvent.drop || event === DiagramEvent.positionChange ||\n event === DiagramEvent.connectionChange) {\n if (this.diagram.currentSymbol) {\n return;\n }\n if (event === DiagramEvent.drop) {\n args.source = this.diagram;\n }\n if (this.diagram.currentDrawingObject) {\n return;\n }\n }\n this.diagram.triggerEvent(event, args);\n };\n /**\n * @private\n */\n CommandHandler.prototype.dragOverElement = function (args, currentPosition) {\n if (this.diagram.currentSymbol) {\n var dragOverArg = {\n element: args.source, target: args.target, mousePosition: currentPosition, diagram: this.diagram\n };\n this.triggerEvent(DiagramEvent.dragOver, dragOverArg);\n }\n };\n /**\n * @private\n */\n CommandHandler.prototype.disConnect = function (obj, endPoint) {\n var oldChanges = {};\n var newChanges = {};\n var selectorModel;\n var connector;\n if (obj instanceof Selector) {\n selectorModel = obj;\n connector = selectorModel.connectors[0];\n }\n else if (obj instanceof Connector && this.diagram.currentDrawingObject) {\n connector = this.diagram.currentDrawingObject;\n }\n if (obj && connector && (hasSingleConnection(this.diagram) || this.diagram.currentDrawingObject)) {\n if (endPoint && (endPoint === 'ConnectorSourceEnd' || endPoint === 'ConnectorTargetEnd')) {\n var nodeEndId = endPoint === 'ConnectorSourceEnd' ? 'sourceID' : 'targetID';\n var portEndId = endPoint === 'ConnectorSourceEnd' ? 'sourcePortID' : 'targetPortID';\n if (connector[nodeEndId]) {\n oldChanges[nodeEndId] = connector[nodeEndId];\n connector[nodeEndId] = '';\n newChanges[nodeEndId] = connector[nodeEndId];\n if (connector.sourcePortID || connector.targetPortID) {\n oldChanges[portEndId] = connector[portEndId];\n connector[portEndId] = '';\n newChanges[portEndId] = connector[portEndId];\n }\n this.connectionEventChange(connector, oldChanges, newChanges, endPoint);\n }\n }\n else if ((endPoint !== 'OrthoThumb' && endPoint !== 'SegmentEnd') && (connector.sourceID || connector.targetID)) {\n oldChanges = {\n sourceID: connector.sourceID, sourcePortID: connector.sourcePortID,\n targetID: connector.targetID, targetPortID: connector.targetPortID\n };\n connector.sourceID = '';\n connector.sourcePortID = '';\n connector.targetID = '';\n connector.targetPortID = '';\n newChanges = {\n sourceID: connector.sourceID, sourcePortID: connector.sourcePortID,\n targetID: connector.targetID, targetPortID: connector.targetPortID\n };\n var arg = {\n connector: connector, oldValue: oldChanges,\n newValue: newChanges, cancel: false, state: 'Changing', connectorEnd: endPoint\n };\n this.triggerEvent(DiagramEvent.connectionChange, arg);\n if (arg.cancel) {\n connector.sourceID = oldChanges.sourceID;\n connector.sourcePortID = oldChanges.sourcePortID;\n connector.targetID = oldChanges.targetID;\n connector.targetPortID = oldChanges.targetPortID;\n }\n else {\n this.diagram.connectorPropertyChange(connector, oldChanges, newChanges);\n this.diagram.updateDiagramObject(connector);\n arg = {\n connector: connector, oldValue: oldChanges,\n newValue: newChanges, cancel: false, state: 'Changed', connectorEnd: endPoint\n };\n this.triggerEvent(DiagramEvent.connectionChange, arg);\n }\n }\n }\n };\n CommandHandler.prototype.connectionEventChange = function (connector, oldChanges, newChanges, endPoint) {\n var nodeEndId = endPoint === 'ConnectorSourceEnd' ? 'sourceID' : 'targetID';\n var portEndId = endPoint === 'ConnectorSourceEnd' ? 'sourcePortID' : 'targetPortID';\n var arg = {\n connector: connector, oldValue: { nodeId: oldChanges[nodeEndId], portId: oldChanges[portEndId] },\n newValue: { nodeId: newChanges[nodeEndId], portId: newChanges[portEndId] },\n cancel: false, state: 'Changing', connectorEnd: endPoint\n };\n this.triggerEvent(DiagramEvent.connectionChange, arg);\n if (arg.cancel) {\n connector[nodeEndId] = oldChanges[nodeEndId];\n connector[portEndId] = oldChanges[portEndId];\n newChanges = oldChanges;\n }\n else {\n this.diagram.connectorPropertyChange(connector, oldChanges, newChanges);\n this.diagram.updateDiagramObject(connector);\n arg = {\n connector: connector, oldValue: { nodeId: oldChanges[nodeEndId], portId: oldChanges[portEndId] },\n newValue: { nodeId: newChanges[nodeEndId], portId: newChanges[portEndId] },\n cancel: false, state: 'Changed', connectorEnd: endPoint\n };\n this.triggerEvent(DiagramEvent.connectionChange, arg);\n }\n };\n /**\n * @private\n */\n CommandHandler.prototype.findTarget = function (element, argsTarget, source) {\n var target;\n if (argsTarget instanceof Node) {\n if (element && element.id === argsTarget.id + '_content') {\n return argsTarget;\n }\n if (source && argsTarget.shape.type === 'Bpmn' && argsTarget.shape.shape === 'Activity') {\n if (argsTarget.shape.activity.subProcess.type === 'Transaction') {\n var transaction = argsTarget.shape.activity.subProcess.transaction;\n if (transaction.success.visible && element.id.indexOf(argsTarget.id + '_success') === 0) {\n return transaction.success;\n }\n if (transaction.cancel.visible && element.id.indexOf(argsTarget.id + '_cancel') === 0) {\n return transaction.cancel;\n }\n if (transaction.failure.visible && element.id.indexOf(argsTarget.id + '_failure') === 0) {\n return transaction.failure;\n }\n }\n }\n if (element instanceof PathElement) {\n for (var i = 0; i < argsTarget.ports.length; i++) {\n var port = argsTarget.ports[i];\n if (element.id === argsTarget.id + '_' + port.id) {\n return port;\n }\n }\n }\n }\n return argsTarget;\n };\n /**\n * @private\n */\n CommandHandler.prototype.canDisconnect = function (endPoint, args, targetPortId, targetNodeId) {\n var selector;\n var connect;\n if (args.source instanceof Selector) {\n selector = args.source;\n connect = selector.connectors[0];\n }\n else if (args.source instanceof Connector && this.diagram.currentDrawingObject) {\n connect = this.diagram.currentDrawingObject;\n }\n var targetObject = this.findTarget(args.targetWrapper, args.target, endPoint === 'ConnectorSourceEnd');\n var nodeEnd = endPoint === 'ConnectorSourceEnd' ? 'sourceID' : 'targetID';\n var portEnd = endPoint === 'ConnectorSourceEnd' ? 'sourcePortID' : 'targetPortID';\n if (connect[nodeEnd] !== targetNodeId || connect[portEnd] !== targetPortId) {\n return true;\n }\n return false;\n };\n /**\n * @private\n */\n CommandHandler.prototype.connect = function (endPoint, args) {\n var newChanges = {};\n var oldChanges = {};\n var oldNodeId;\n var oldPortId;\n var selectorModel;\n var connector;\n if (args.source instanceof Selector) {\n selectorModel = args.source;\n connector = selectorModel.connectors[0];\n }\n else if (args.source instanceof Connector && this.diagram.currentDrawingObject) {\n connector = this.diagram.currentDrawingObject;\n }\n var target = this.findTarget(args.targetWrapper, args.target, endPoint === 'ConnectorSourceEnd');\n var nodeEndId = endPoint === 'ConnectorSourceEnd' ? 'sourceID' : 'targetID';\n var portEndId = endPoint === 'ConnectorSourceEnd' ? 'sourcePortID' : 'targetPortID';\n if (target instanceof Node) {\n oldChanges[nodeEndId] = connector[nodeEndId];\n connector[nodeEndId] = target.id;\n newChanges[nodeEndId] = connector[nodeEndId];\n oldChanges[portEndId] = connector[portEndId];\n this.connectionEventChange(connector, oldChanges, newChanges, endPoint);\n }\n else {\n oldNodeId = connector[nodeEndId];\n oldPortId = connector[portEndId];\n connector[portEndId] = target.id;\n connector[nodeEndId] = args.target.id;\n newChanges[nodeEndId] = connector[nodeEndId];\n newChanges[portEndId] = connector[portEndId];\n var arg = {\n connector: connector, oldValue: { nodeId: oldNodeId, portId: oldPortId },\n newValue: { nodeId: newChanges[nodeEndId], portId: newChanges[portEndId] },\n cancel: false, state: 'Changing', connectorEnd: endPoint\n };\n this.triggerEvent(DiagramEvent.connectionChange, arg);\n if (arg.cancel) {\n connector[nodeEndId] = oldNodeId;\n connector[portEndId] = oldPortId;\n newChanges[nodeEndId] = oldNodeId;\n newChanges[portEndId] = oldPortId;\n }\n else {\n this.diagram.connectorPropertyChange(connector, {}, newChanges);\n this.diagram.updateDiagramObject(connector);\n arg = {\n connector: connector, oldValue: { nodeId: oldNodeId, portId: oldPortId },\n newValue: { nodeId: newChanges[nodeEndId], portId: newChanges[portEndId] }, cancel: false,\n state: 'Changed', connectorEnd: endPoint\n };\n this.triggerEvent(DiagramEvent.connectionChange, arg);\n }\n }\n this.renderHighlighter(args, undefined, endPoint === 'ConnectorSourceEnd');\n };\n /** @private */\n CommandHandler.prototype.cut = function () {\n var index;\n this.clipboardData.pasteIndex = 0;\n if (this.diagram.undoRedoModule) {\n this.diagram.historyList.startGroupAction();\n }\n this.clipboardData.clipObject = this.copyObjects();\n if (this.diagram.undoRedoModule) {\n this.diagram.historyList.endGroupAction();\n }\n if (this.diagram.mode !== 'SVG') {\n this.diagram.refreshDiagramLayer();\n }\n };\n /** @private */\n CommandHandler.prototype.addLayer = function (layer, objects) {\n layer.id = layer.id || randomId();\n layer.zIndex = this.diagram.layers.length;\n layer = new Layer(this.diagram, 'layers', layer, true);\n layer.objectZIndex = -1;\n layer.zIndexTable = {};\n this.diagram.layers.push(layer);\n this.diagram.layerZIndexTable[layer.zIndex] = layer.id;\n this.diagram.activeLayer = layer;\n var layers = layer.objects;\n if (objects) {\n for (var i = 0; i < objects.length; i++) {\n this.diagram.add(objects[i]);\n }\n }\n };\n /** @private */\n CommandHandler.prototype.getObjectLayer = function (objectName) {\n var layers = this.diagram.layers;\n for (var i = 0; i < layers.length; i++) {\n var objIndex = layers[i].objects.indexOf(objectName);\n if (objIndex > -1) {\n return layers[i];\n }\n }\n return this.diagram.activeLayer;\n };\n /** @private */\n CommandHandler.prototype.getLayer = function (layerName) {\n var layers = this.diagram.layers;\n for (var i = 0; i < layers.length; i++) {\n if (layers[i].id === layerName) {\n return layers[i];\n }\n }\n return undefined;\n };\n /** @private */\n CommandHandler.prototype.removeLayer = function (layerId) {\n var layers = this.getLayer(layerId);\n if (layers) {\n var index = this.diagram.layers.indexOf(layers);\n var layerObject = layers.objects;\n for (var i = layerObject.length - 1; i >= 0; i--) {\n this.diagram.unSelect(this.diagram.nameTable[layerObject[i]]);\n this.diagram.remove(this.diagram.nameTable[layerObject[i]]);\n if (layers.id !== 'default_layer') {\n if (this.diagram.activeLayer.id === layerId) {\n this.diagram.activeLayer = this.diagram.layers[this.diagram.layers.length - 1];\n }\n }\n }\n delete this.diagram.layerZIndexTable[layers.zIndex];\n this.diagram.layers.splice(index, 1);\n if (this.diagram.mode !== 'SVG') {\n this.diagram.refreshDiagramLayer();\n }\n }\n };\n /** @private */\n CommandHandler.prototype.moveObjects = function (objects, targetLayer) {\n var layer = this.getLayer(targetLayer) || this.diagram.activeLayer;\n this.diagram.setActiveLayer(layer.id);\n var targerNodes;\n for (var _i = 0, objects_1 = objects; _i < objects_1.length; _i++) {\n var i = objects_1[_i];\n var layer_1 = this.getObjectLayer(i);\n var index = layer_1.objects.indexOf(i);\n if (index > -1) {\n targerNodes = this.diagram.nameTable[i];\n this.diagram.unSelect(targerNodes);\n this.diagram.remove(this.diagram.nameTable[i]);\n this.diagram.add(targerNodes);\n }\n }\n };\n /** @private */\n CommandHandler.prototype.cloneLayer = function (layerName) {\n var layers = this.diagram.layers;\n var layer = this.getLayer(layerName);\n if (layer) {\n var cloneObject_1 = [];\n var newlayer = {\n id: layerName + '_' + randomId(), objects: [], visible: true, lock: false\n };\n this.addLayer(newlayer);\n newlayer.zIndex = this.diagram.layers.length - 1;\n var multiSelect = cloneObject_1.length !== 1;\n for (var _i = 0, _a = layer.objects; _i < _a.length; _i++) {\n var obj = _a[_i];\n cloneObject_1.push(this.diagram.nameTable[obj]);\n }\n this.paste(cloneObject_1);\n }\n };\n /** @private */\n CommandHandler.prototype.copy = function () {\n this.clipboardData.pasteIndex = 1;\n this.clipboardData.clipObject = this.copyObjects();\n return this.clipboardData.clipObject;\n };\n /** @private */\n CommandHandler.prototype.copyObjects = function () {\n var selectedItems = [];\n var obj = [];\n this.clipboardData.childTable = {};\n if (this.diagram.selectedItems.connectors.length > 0) {\n selectedItems = this.diagram.selectedItems.connectors;\n for (var j = 0; j < selectedItems.length; j++) {\n var element = clone((selectedItems[j]));\n obj.push(element);\n }\n }\n if (this.diagram.selectedItems.nodes.length > 0) {\n selectedItems = selectedItems.concat(this.diagram.selectedItems.nodes);\n for (var j = 0; j < this.diagram.selectedItems.nodes.length; j++) {\n var node = clone(this.diagram.selectedItems.nodes[j]);\n var processTable = {};\n this.copyProcesses(node);\n obj.push(clone(node));\n var matrix = identityMatrix();\n rotateMatrix(matrix, -node.rotateAngle, node.offsetX, node.offsetY);\n if (node.children) {\n var childTable = this.clipboardData.childTable;\n var tempNode = void 0;\n var elements = [];\n var nodes = this.getAllDescendants(node, elements, true);\n for (var i = 0; i < nodes.length; i++) {\n tempNode = this.diagram.nameTable[nodes[i].id];\n var clonedObject = childTable[tempNode.id] = clone(tempNode);\n var newOffset = transformPointByMatrix(matrix, { x: clonedObject.wrapper.offsetX, y: clonedObject.wrapper.offsetY });\n if (tempNode instanceof Node) {\n clonedObject.offsetX = newOffset.x;\n clonedObject.offsetY = newOffset.y;\n clonedObject.rotateAngle -= node.rotateAngle;\n }\n }\n this.clipboardData.childTable = childTable;\n }\n }\n }\n if (this.clipboardData.pasteIndex === 0) {\n this.startGroupAction();\n for (var _i = 0, selectedItems_1 = selectedItems; _i < selectedItems_1.length; _i++) {\n var item = selectedItems_1[_i];\n if (this.diagram.nameTable[item.id]) {\n this.diagram.remove(item);\n }\n }\n this.endGroupAction();\n }\n this.sortByZIndex(obj, 'zIndex');\n return obj;\n };\n CommandHandler.prototype.copyProcesses = function (node) {\n if (node.shape.type === 'Bpmn' && node.shape.activity &&\n node.shape.activity.subProcess.processes &&\n node.shape.activity.subProcess.processes.length > 0) {\n var processes = node.shape.activity.subProcess.processes;\n for (var _i = 0, processes_1 = processes; _i < processes_1.length; _i++) {\n var i = processes_1[_i];\n this.processTable[i] = (clone(this.diagram.nameTable[i]));\n if (this.processTable[i].shape.activity.subProcess.processes &&\n this.processTable[i].shape.activity.subProcess.processes.length > 0) {\n this.copyProcesses(this.processTable[i]);\n }\n }\n this.clipboardData.processTable = this.processTable;\n }\n };\n /** @private */\n CommandHandler.prototype.group = function () {\n var propName = 'isProtectedOnChange';\n var protectedChange = this.diagram[propName];\n this.diagram.protectPropertyChange(true);\n this.diagram.diagramActions = this.diagram.diagramActions | DiagramAction.Group;\n var selectedItems = [];\n var obj = {};\n obj.id = 'group' + randomId();\n obj = new Node(this.diagram, 'nodes', obj, true);\n obj.children = [];\n selectedItems = this.diagram.selectedItems.nodes;\n selectedItems = selectedItems.concat(this.diagram.selectedItems.connectors);\n for (var i = 0; i < selectedItems.length; i++) {\n if (!selectedItems[i].parentId) {\n obj.children.push(selectedItems[i].id);\n }\n }\n this.diagram.add(obj);\n var entry = { type: 'Group', undoObject: obj, redoObject: obj, category: 'Internal' };\n this.addHistoryEntry(entry);\n this.diagram.diagramActions = this.diagram.diagramActions & ~DiagramAction.Group;\n this.diagram.protectPropertyChange(protectedChange);\n };\n /** @private */\n CommandHandler.prototype.unGroup = function (obj) {\n var propName = 'isProtectedOnChange';\n var protectedChange = this.diagram[propName];\n this.diagram.protectPropertyChange(true);\n this.diagram.diagramActions = this.diagram.diagramActions | DiagramAction.Group;\n var selectedItems = [];\n if (obj) {\n selectedItems.push(obj);\n }\n else {\n selectedItems = this.diagram.selectedItems.nodes;\n }\n for (var i = 0; i < selectedItems.length; i++) {\n var node = selectedItems[i];\n var entry = {\n type: 'UnGroup', undoObject: cloneObject(node),\n redoObject: cloneObject(node), category: 'Internal'\n };\n if (!(this.diagram.diagramActions & DiagramAction.UndoRedo)) {\n this.addHistoryEntry(entry);\n }\n if (node.children) {\n var parentNode = this.diagram.nameTable[node.parentId];\n for (var j = node.children.length - 1; j >= 0; j--) {\n (this.diagram.nameTable[node.children[0]]).parentId = '';\n this.diagram.deleteChild(this.diagram.nameTable[node.children[0]], node);\n if (node.parentId && node.children[0]) {\n this.diagram.addChild(parentNode, node.children[0]);\n }\n }\n if (node.parentId) {\n this.diagram.deleteChild(node, parentNode);\n }\n }\n this.diagram.removeNode(node);\n this.clearSelection();\n }\n this.diagram.diagramActions = this.diagram.diagramActions & ~DiagramAction.Group;\n this.diagram.protectPropertyChange(protectedChange);\n };\n /** @private */\n CommandHandler.prototype.paste = function (obj) {\n if (obj || this.clipboardData.clipObject) {\n this.diagram.protectPropertyChange(true);\n var copiedItems = obj ? this.getNewObject(obj) :\n this.clipboardData.clipObject;\n if (copiedItems) {\n var multiSelect = copiedItems.length !== 1;\n var groupAction = false;\n var objectTable = {};\n var keyTable = {};\n if (this.clipboardData.pasteIndex !== 0) {\n this.clearSelection();\n }\n if (this.diagram.undoRedoModule) {\n groupAction = true;\n this.diagram.historyList.startGroupAction();\n }\n for (var _i = 0, copiedItems_1 = copiedItems; _i < copiedItems_1.length; _i++) {\n var copy = copiedItems_1[_i];\n objectTable[copy.id] = copy;\n }\n for (var j = 0; j < copiedItems.length; j++) {\n var copy = copiedItems[j];\n if (getObjectType(copy) === Connector) {\n var clonedObj = clone(copy);\n var nodeId = clonedObj.sourceID;\n clonedObj.sourceID = '';\n if (objectTable[nodeId] && keyTable[nodeId]) {\n clonedObj.sourceID = keyTable[nodeId];\n }\n nodeId = clonedObj.targetID;\n clonedObj.targetID = '';\n if (objectTable[nodeId] && keyTable[nodeId]) {\n clonedObj.targetID = keyTable[nodeId];\n }\n var newObj = this.cloneConnector(clonedObj, multiSelect);\n keyTable[copy.id] = newObj.id;\n }\n else {\n var newNode = this.cloneNode(copy, multiSelect);\n //bpmn text annotations will not be pasted\n if (newNode) {\n keyTable[copy.id] = newNode.id;\n var edges = copy.inEdges;\n if (edges) {\n for (var _a = 0, edges_1 = edges; _a < edges_1.length; _a++) {\n var edge = edges_1[_a];\n if (objectTable[edge] && keyTable[edge]) {\n var newConnector = this.diagram.nameTable[keyTable[edge]];\n newConnector.targetID = keyTable[copy.id];\n this.diagram.connectorPropertyChange(newConnector, { targetID: '' }, { targetID: newConnector.targetID });\n }\n }\n }\n edges = copy.outEdges;\n if (edges) {\n for (var _b = 0, edges_2 = edges; _b < edges_2.length; _b++) {\n var edge = edges_2[_b];\n if (objectTable[edge] && keyTable[edge]) {\n var newConnector = this.diagram.nameTable[keyTable[edge]];\n newConnector.sourceID = keyTable[copy.id];\n this.diagram.connectorPropertyChange(newConnector, { sourceID: '' }, { sourceID: newConnector.sourceID });\n }\n }\n }\n }\n }\n }\n if (groupAction === true) {\n this.diagram.historyList.endGroupAction();\n groupAction = false;\n }\n if (this.diagram.mode !== 'SVG') {\n this.diagram.refreshDiagramLayer();\n }\n this.clipboardData.pasteIndex++;\n this.diagram.protectPropertyChange(false);\n }\n }\n };\n CommandHandler.prototype.getNewObject = function (obj) {\n var newObj;\n var newobjs = [];\n this.clipboardData.pasteIndex = 1;\n for (var i = 0; i < obj.length; i++) {\n newObj = cloneObject(obj[i]);\n newobjs.push(newObj);\n }\n return newobjs;\n };\n CommandHandler.prototype.cloneConnector = function (connector, multiSelect) {\n var newConnector;\n var cloneObject = clone(connector);\n this.translateObject(cloneObject);\n cloneObject.zIndex = -1;\n newConnector = this.diagram.add(cloneObject);\n this.selectObjects([newConnector], multiSelect);\n return newConnector;\n };\n CommandHandler.prototype.cloneNode = function (node, multiSelect, children) {\n var newNode;\n var connectorsTable = {};\n var cloneObject = clone(node);\n var process;\n if (node.shape && node.shape.type === 'Bpmn' && node.shape.activity &&\n node.shape.activity.subProcess.processes\n && node.shape.activity.subProcess.processes.length) {\n process = cloneObject.shape.activity.subProcess.processes;\n cloneObject.zIndex = -1;\n cloneObject.shape.activity.subProcess.processes = [];\n }\n if (node.children && node.children.length && (!children || !children.length)) {\n newNode = this.cloneGroup(node, multiSelect);\n }\n else {\n this.translateObject(cloneObject);\n cloneObject.zIndex = -1;\n if (children) {\n cloneObject.children = children;\n }\n newNode = this.diagram.add(cloneObject);\n }\n for (var _i = 0, _a = Object.keys(connectorsTable); _i < _a.length; _i++) {\n var i = _a[_i];\n this.diagram.add(connectorsTable[i]);\n }\n if (process && process.length) {\n newNode.shape.activity.subProcess.processes = process;\n this.cloneSubProcesses(newNode);\n }\n if (newNode) {\n this.selectObjects([newNode], multiSelect);\n }\n return newNode;\n };\n CommandHandler.prototype.cloneSubProcesses = function (node) {\n var connector = [];\n var temp = {};\n if (node.shape.type === 'Bpmn' && node.shape.activity &&\n node.shape.activity.subProcess.processes\n && node.shape.activity.subProcess.processes.length) {\n var process = node.shape.activity.subProcess.processes;\n for (var g = 0; g < process.length; g++) {\n var child = this.diagram.nameTable[process[g]] || this.clipboardData.processTable[process[g]];\n for (var _i = 0, _a = child.outEdges; _i < _a.length; _i++) {\n var j = _a[_i];\n if (connector.indexOf(j) < 0) {\n connector.push(j);\n }\n }\n for (var _b = 0, _c = child.inEdges; _b < _c.length; _b++) {\n var j = _c[_b];\n if (connector.indexOf(j) < 0) {\n connector.push(j);\n }\n }\n var innerChild = cloneObject(this.clipboardData.processTable[process[g]]);\n innerChild.processId = node.id;\n var newNode = this.cloneNode(innerChild, false);\n temp[process[g]] = newNode.id;\n process[g] = newNode.id;\n this.diagram.addProcess(newNode, node.id);\n for (var _d = 0, connector_1 = connector; _d < connector_1.length; _d++) {\n var i = connector_1[_d];\n var node_1 = this.diagram.nameTable[i] || this.diagram.connectorTable[i];\n var clonedNode = cloneObject(node_1);\n if (temp[clonedNode.sourceID] && temp[clonedNode.targetID]) {\n clonedNode.zIndex = -1;\n clonedNode.id += randomId();\n clonedNode.sourceID = temp[clonedNode.sourceID];\n clonedNode.targetID = temp[clonedNode.targetID];\n connector.splice(connector.indexOf(i), 1);\n this.diagram.add(clonedNode);\n }\n }\n }\n }\n };\n CommandHandler.prototype.cloneGroup = function (obj, multiSelect) {\n var value;\n var newChildren = [];\n var children = [];\n children = children.concat(obj.children);\n if (this.clipboardData.childTable) {\n for (var i = 0; i < children.length; i++) {\n var childObj = this.clipboardData.childTable[children[i]];\n if (childObj) {\n var newObj = void 0;\n if (getObjectType(childObj) === Connector) {\n newObj = this.cloneConnector(childObj, multiSelect);\n }\n else {\n newObj = this.cloneNode(childObj, multiSelect);\n }\n newChildren.push(newObj.id);\n }\n }\n }\n var parentObj = this.cloneNode(obj, multiSelect, newChildren);\n return parentObj;\n };\n /** @private */\n CommandHandler.prototype.translateObject = function (obj) {\n obj.id += randomId();\n var diff = this.clipboardData.pasteIndex * 10;\n if (getObjectType(obj) === Connector) {\n obj.sourcePoint = {\n x: obj.sourcePoint.x + diff, y: obj.sourcePoint.y + diff\n };\n obj.targetPoint = {\n x: obj.targetPoint.x + diff, y: obj.targetPoint.y + diff\n };\n if (obj.type === 'Bezier') {\n var segments = obj.segments;\n for (var i = 0; i < segments.length; i++) {\n if (!Point.isEmptyPoint(segments[i].point1)) {\n segments[i].point1 = {\n x: segments[i].point1.x + diff, y: segments[i].point1.y + diff\n };\n }\n if (!Point.isEmptyPoint(segments[i].point2)) {\n segments[i].point2 = {\n x: segments[i].point2.x + diff, y: segments[i].point2.y + diff\n };\n }\n }\n }\n if (obj.type === 'Straight' || obj.type === 'Bezier') {\n if (obj.segments && obj.segments.length > 0) {\n var segments = obj.segments;\n for (var i = 0; i < segments.length - 1; i++) {\n segments[i].point.x += diff;\n segments[i].point.y += diff;\n }\n }\n }\n }\n else {\n obj.offsetX += diff;\n obj.offsetY += diff;\n }\n };\n /**\n * @private\n */\n CommandHandler.prototype.drawObject = function (obj) {\n var newObj;\n var cloneObject;\n cloneObject = clone(this.diagram.drawingObject);\n for (var _i = 0, _a = Object.keys(obj); _i < _a.length; _i++) {\n var prop = _a[_i];\n cloneObject[prop] = obj[prop];\n }\n if (getObjectType(this.diagram.drawingObject) === Node) {\n newObj = new Node(this.diagram, 'nodes', cloneObject, true);\n newObj.id = (this.diagram.drawingObject.id || 'node') + randomId();\n this.diagram.initObject(newObj);\n }\n else {\n newObj = new Connector(this.diagram, 'connectors', cloneObject, true);\n newObj.id = (this.diagram.drawingObject.id || 'connector') + randomId();\n this.diagram.initObject(newObj);\n }\n this.diagram.updateDiagramObject(newObj);\n this.diagram.currentDrawingObject = newObj;\n return newObj;\n };\n /**\n * @private\n */\n CommandHandler.prototype.addObjectToDiagram = function (obj) {\n var newObj;\n this.diagram.removeFromAQuad(obj);\n this.diagram.removeObjectsFromLayer(this.diagram.nameTable[obj.id]);\n delete this.diagram.nameTable[obj.id];\n newObj = this.diagram.add(obj);\n if (this.diagram.mode !== 'SVG') {\n this.diagram.refreshDiagramLayer();\n }\n this.selectObjects([newObj]);\n if (obj && (!(canContinuousDraw(this.diagram)))) {\n this.diagram.tool &= ~DiagramTools.DrawOnce;\n this.diagram.currentDrawingObject = undefined;\n }\n };\n /**\n * @private\n */\n CommandHandler.prototype.addText = function (obj, currentPosition) {\n var annotation = this.diagram.findElementUnderMouse(obj, currentPosition);\n this.diagram.startTextEdit(obj, annotation instanceof TextElement ? (annotation.id).split('_')[1] : undefined);\n };\n /** @private */\n CommandHandler.prototype.selectObjects = function (obj, multipleSelection, oldValue) {\n var arg = {\n oldValue: oldValue ? oldValue : [], newValue: obj, cause: this.diagram.diagramActions,\n state: 'Changing', type: 'Addition', cancel: false\n };\n var select = true;\n this.diagram.triggerEvent(DiagramEvent.selectionChange, arg);\n var canDoMultipleSelection = canMultiSelect(this.diagram);\n var canDoSingleSelection = canSingleSelect(this.diagram);\n if (canDoSingleSelection || canDoMultipleSelection) {\n if (!canDoMultipleSelection && ((obj.length > 1) || (multipleSelection && obj.length === 1))) {\n if (obj.length === 1) {\n this.clearSelection();\n }\n else {\n return;\n }\n }\n if (!canDoSingleSelection && obj.length === 1 && (!multipleSelection || !hasSelection(this.diagram))) {\n this.clearSelection();\n return;\n }\n }\n if (!arg.cancel) {\n for (var i = 0; i < obj.length; i++) {\n var newObj = obj[i];\n select = true;\n if (!hasSelection(this.diagram)) {\n this.select(newObj, i > 0 || multipleSelection, true);\n }\n else {\n if ((i > 0 || multipleSelection) && newObj.children && !newObj.parentId) {\n for (var i_1 = 0; i_1 < this.diagram.selectedItems.nodes.length; i_1++) {\n var parentNode = this.diagram.nameTable[this.diagram.selectedItems.nodes[i_1].parentId];\n if (parentNode) {\n parentNode = this.findParent(parentNode);\n if (parentNode) {\n if (newObj.id === parentNode.id) {\n this.selectGroup(newObj);\n }\n }\n }\n }\n }\n this.selectProcesses(newObj);\n select = this.selectBpmnSubProcesses(newObj);\n if (select) {\n this.select(newObj, i > 0 || multipleSelection, true);\n }\n }\n }\n arg = {\n oldValue: oldValue ? oldValue : [], newValue: obj, cause: this.diagram.diagramActions,\n state: 'Changed', type: 'Addition', cancel: false\n };\n this.diagram.triggerEvent(DiagramEvent.selectionChange, arg);\n this.diagram.renderSelector(multipleSelection || (obj && obj.length > 1));\n }\n };\n /**\n * @private\n */\n CommandHandler.prototype.findParent = function (node) {\n if (node.parentId) {\n node = this.diagram.nameTable[node.parentId];\n this.findParent(node);\n }\n return node;\n };\n CommandHandler.prototype.selectProcesses = function (newObj) {\n if (this.hasProcesses(newObj)) {\n var processes = (newObj).shape.activity.subProcess.processes;\n for (var i = 0; i < processes.length; i++) {\n var innerChild = this.diagram.nameTable[processes[i]];\n if (this.hasProcesses(innerChild)) {\n this.selectObjects([innerChild], true);\n }\n this.unSelect(innerChild);\n }\n }\n };\n CommandHandler.prototype.selectGroup = function (newObj) {\n for (var j = 0; j < newObj.children.length; j++) {\n var innerChild = this.diagram.nameTable[newObj.children[j]];\n if (innerChild.children) {\n this.selectGroup(innerChild);\n }\n this.unSelect(this.diagram.nameTable[newObj.children[j]]);\n }\n };\n /**\n * @private\n */\n CommandHandler.prototype.selectBpmnSubProcesses = function (node) {\n var select = true;\n var parent;\n if (node.processId) {\n if (isSelected(this.diagram, this.diagram.nameTable[node.processId])) {\n select = false;\n }\n else {\n select = this.selectBpmnSubProcesses(this.diagram.nameTable[node.processId]);\n }\n }\n else if (node instanceof Connector) {\n if (node.sourceID && this.diagram.nameTable[node.sourceID] &&\n this.diagram.nameTable[node.sourceID].processId) {\n parent = this.diagram.nameTable[node.sourceID].processId;\n }\n if (node.targetID && this.diagram.nameTable[node.targetID] &&\n this.diagram.nameTable[node.targetID].processId) {\n parent = this.diagram.nameTable[node.targetID].processId;\n }\n if (parent) {\n if (isSelected(this.diagram, this.diagram.nameTable[parent])) {\n return false;\n }\n else {\n select = this.selectBpmnSubProcesses(this.diagram.nameTable[parent]);\n }\n }\n }\n return select;\n };\n /**\n * @private\n */\n CommandHandler.prototype.hasProcesses = function (node) {\n if (node) {\n if ((node.shape.type === 'Bpmn') && node.shape.activity &&\n node.shape.activity.subProcess.processes &&\n node.shape.activity.subProcess.processes.length > 0) {\n return true;\n }\n }\n return false;\n };\n /** @private */\n CommandHandler.prototype.select = function (obj, multipleSelection, preventUpdate) {\n var hasLayer = this.getObjectLayer(obj.id);\n if ((canSelect(obj) && !(obj instanceof Selector) && !isSelected(this.diagram, obj))\n && (hasLayer && !hasLayer.lock && hasLayer.visible) && obj.wrapper.visible) {\n multipleSelection = hasSelection(this.diagram) ? multipleSelection : false;\n if (!multipleSelection) {\n this.clearSelection();\n }\n var selectorModel = this.diagram.selectedItems;\n var convert = obj;\n if (convert instanceof Node) {\n selectorModel.nodes.push(obj);\n }\n else {\n selectorModel.connectors.push(obj);\n }\n if (!multipleSelection) {\n selectorModel.init(this.diagram);\n if (selectorModel.nodes.length === 1 && selectorModel.connectors.length === 0) {\n selectorModel.rotateAngle = selectorModel.nodes[0].rotateAngle;\n selectorModel.wrapper.rotateAngle = selectorModel.nodes[0].rotateAngle;\n selectorModel.wrapper.pivot = selectorModel.nodes[0].pivot;\n }\n }\n else {\n selectorModel.wrapper.rotateAngle = selectorModel.rotateAngle = 0;\n selectorModel.wrapper.children.push(obj.wrapper);\n }\n if (!preventUpdate) {\n this.diagram.renderSelector(multipleSelection);\n }\n }\n };\n /** @private */\n CommandHandler.prototype.unSelect = function (obj) {\n var objArray = [];\n objArray.push(obj);\n var arg = {\n oldValue: objArray, newValue: [], cause: this.diagram.diagramActions,\n state: 'Changing', type: 'Removal', cancel: false\n };\n if (!this.diagram.currentSymbol) {\n this.diagram.triggerEvent(DiagramEvent.selectionChange, arg);\n }\n if (isSelected(this.diagram, obj)) {\n var selectormodel = this.diagram.selectedItems;\n var index = void 0;\n if (obj instanceof Node) {\n index = selectormodel.nodes.indexOf(obj, 0);\n selectormodel.nodes.splice(index, 1);\n }\n else {\n index = selectormodel.connectors.indexOf(obj, 0);\n selectormodel.connectors.splice(index, 1);\n }\n arg = {\n oldValue: objArray, newValue: [], cause: this.diagram.diagramActions,\n state: 'Changed', type: 'Removal', cancel: false\n };\n if (!arg.cancel) {\n index = selectormodel.wrapper.children.indexOf(obj.wrapper, 0);\n selectormodel.wrapper.children.splice(index, 1);\n this.diagram.updateSelector();\n if (!this.diagram.currentSymbol) {\n this.diagram.triggerEvent(DiagramEvent.selectionChange, arg);\n }\n }\n }\n };\n /** @private */\n CommandHandler.prototype.getChildElements = function (child) {\n var children = [];\n for (var i = 0; i < child.length; i++) {\n var childNode = child[i];\n if (childNode.children && childNode.children.length > 0) {\n children.concat(this.getChildElements(childNode.children));\n }\n else {\n children.push(childNode.id);\n if (childNode instanceof TextElement) {\n children.push(childNode.id + '_text');\n }\n }\n }\n return children;\n };\n CommandHandler.prototype.moveSvgNode = function (nodeId, targetID) {\n var diagramDiv = getDiagramElement(targetID + '_groupElement');\n var backNode = getDiagramElement(nodeId + '_groupElement');\n diagramDiv.parentNode.insertBefore(backNode, diagramDiv);\n };\n /** @private */\n CommandHandler.prototype.sendLayerBackward = function (layerName) {\n var layer = this.getLayer(layerName);\n if (layer && layer.zIndex !== 0) {\n var index = layer.zIndex;\n if (this.diagram.mode === 'SVG') {\n var currentLayerObject = layer.objects;\n var targetObject = this.getLayer(this.diagram.layerZIndexTable[index - 1]).objects[0];\n if (targetObject) {\n for (var _i = 0, currentLayerObject_1 = currentLayerObject; _i < currentLayerObject_1.length; _i++) {\n var obj = currentLayerObject_1[_i];\n this.moveSvgNode(obj, targetObject);\n }\n }\n }\n var targetLayer = this.getLayer(this.diagram.layerZIndexTable[index - 1]);\n targetLayer.zIndex = targetLayer.zIndex + 1;\n layer.zIndex = layer.zIndex - 1;\n var temp = this.diagram.layerZIndexTable[index];\n this.diagram.layerZIndexTable[index] = this.diagram.layerZIndexTable[index - 1];\n this.diagram.layerZIndexTable[index - 1] = temp;\n if (this.diagram.mode === 'Canvas') {\n this.diagram.refreshDiagramLayer();\n }\n }\n };\n /** @private */\n CommandHandler.prototype.bringLayerForward = function (layerName) {\n var layer = this.getLayer(layerName);\n if (layer && layer.zIndex < this.diagram.layers.length - 1) {\n var index = layer.zIndex;\n if (this.diagram.mode === 'SVG') {\n var targetObject = this.getLayer(this.diagram.layerZIndexTable[index + 1]).objects[0];\n var currentLayerObject = layer.objects;\n for (var _i = 0, currentLayerObject_2 = currentLayerObject; _i < currentLayerObject_2.length; _i++) {\n var obj = currentLayerObject_2[_i];\n if (targetObject) {\n this.moveSvgNode(targetObject, obj);\n }\n }\n }\n var targetLayer = this.getLayer(this.diagram.layerZIndexTable[index + 1]);\n targetLayer.zIndex = targetLayer.zIndex - 1;\n layer.zIndex = layer.zIndex + 1;\n var temp = this.diagram.layerZIndexTable[index];\n this.diagram.layerZIndexTable[index] = this.diagram.layerZIndexTable[index + 1];\n this.diagram.layerZIndexTable[index + 1] = temp;\n if (this.diagram.mode === 'Canvas') {\n this.diagram.refreshDiagramLayer();\n }\n }\n };\n /** @private */\n CommandHandler.prototype.sendToBack = function () {\n if (hasSelection(this.diagram)) {\n var objectId = this.diagram.selectedItems.nodes.length ? this.diagram.selectedItems.nodes[0].id\n : this.diagram.selectedItems.connectors[0].id;\n var index = this.diagram.nameTable[objectId].zIndex;\n var layerNum = this.diagram.layers.indexOf(this.getObjectLayer(objectId));\n var zIndexTable = this.diagram.layers[layerNum].zIndexTable;\n for (var i = index; i > 0; i--) {\n if (zIndexTable[i]) {\n //When there are empty records in the zindex table\n if (!zIndexTable[i - 1]) {\n zIndexTable[i - 1] = zIndexTable[i];\n this.diagram.nameTable[zIndexTable[i - 1]].zIndex = i;\n delete zIndexTable[i];\n }\n else {\n //bringing the objects forward\n zIndexTable[i] = zIndexTable[i - 1];\n this.diagram.nameTable[zIndexTable[i]].zIndex = i;\n }\n }\n }\n zIndexTable[0] = this.diagram.nameTable[objectId].id;\n this.diagram.nameTable[objectId].zIndex = 0;\n if (this.diagram.mode === 'SVG') {\n var i = 1;\n var target = zIndexTable[i];\n while (!target && i < index) {\n target = zIndexTable[++i];\n }\n this.moveSvgNode(objectId, target);\n }\n else {\n this.diagram.refreshCanvasLayers();\n }\n }\n };\n /** @private */\n CommandHandler.prototype.bringToFront = function () {\n if (hasSelection(this.diagram)) {\n var objectName = this.diagram.selectedItems.nodes.length ? this.diagram.selectedItems.nodes[0].id\n : this.diagram.selectedItems.connectors[0].id;\n var layerNum = this.diagram.layers.indexOf(this.getObjectLayer(objectName));\n var zIndexTable = this.diagram.layers[layerNum].zIndexTable;\n //find the maximum zIndex of the tabel\n var tabelLength = Number(Object.keys(zIndexTable).sort(function (a, b) { return Number(a) - Number(b); }).reverse()[0]);\n var index = this.diagram.nameTable[objectName].zIndex;\n for (var i = index; i < tabelLength; i++) {\n //When there are empty records in the zindex table\n if (zIndexTable[i]) {\n if (!zIndexTable[i + 1]) {\n zIndexTable[i + 1] = zIndexTable[i];\n this.diagram.nameTable[zIndexTable[i + 1]].zIndex = i;\n delete zIndexTable[i];\n }\n else {\n //bringing the objects backward\n zIndexTable[i] = zIndexTable[i + 1];\n this.diagram.nameTable[zIndexTable[i]].zIndex = i;\n }\n }\n }\n zIndexTable[tabelLength] = this.diagram.nameTable[objectName].id;\n this.diagram.nameTable[objectName].zIndex = tabelLength;\n if (this.diagram.mode === 'SVG') {\n var diagramLayer = this.diagram.diagramLayer;\n var child = this.getChildElements(this.diagram.nameTable[objectName].wrapper.children);\n var targerNodes = [];\n var element = getDiagramElement(objectName + '_groupElement');\n element.parentNode.removeChild(element);\n var htmlLayer = getHTMLLayer(this.diagram.element.id);\n this.diagram.diagramRenderer.renderElement(this.diagram.nameTable[objectName].wrapper, diagramLayer, htmlLayer);\n }\n else {\n this.diagram.refreshCanvasLayers();\n }\n }\n };\n /** @private */\n CommandHandler.prototype.sortByZIndex = function (nodeArray, sortID) {\n var id = sortID ? sortID : 'zIndex';\n nodeArray = nodeArray.sort(function (a, b) {\n return a[id] - b[id];\n });\n return nodeArray;\n };\n /** @private */\n CommandHandler.prototype.sendForward = function () {\n if (hasSelection(this.diagram)) {\n var nodeId = this.diagram.selectedItems.nodes.length ? this.diagram.selectedItems.nodes[0].id\n : this.diagram.selectedItems.connectors[0].id;\n var layerIndex = this.diagram.layers.indexOf(this.getObjectLayer(nodeId));\n var zIndexTable = this.diagram.layers[layerIndex].zIndexTable;\n var tabelLength = Object.keys(zIndexTable).length;\n var index = this.diagram.nameTable[nodeId];\n var intersectArray = [];\n var temp = this.diagram.spatialSearch.findObjects(index.wrapper.bounds);\n if (temp.length > 2) {\n temp = this.sortByZIndex(temp);\n }\n for (var _i = 0, temp_1 = temp; _i < temp_1.length; _i++) {\n var i = temp_1[_i];\n if (index.id !== i.id) {\n var currentLayer = this.getObjectLayer(i.id).zIndex;\n if (layerIndex === currentLayer && (Number(this.diagram.nameTable[nodeId].zIndex) < Number(i.zIndex)) &&\n index.wrapper.bounds.intersects(i.wrapper.bounds)) {\n intersectArray.push(i);\n break;\n }\n }\n }\n if (intersectArray.length > 0) {\n var overlapObject = intersectArray[0].zIndex;\n var currentObject = index.zIndex;\n var temp_2 = zIndexTable[overlapObject];\n //swap the nodes\n this.diagram.layers[0].zIndexTable[overlapObject] = index.id;\n this.diagram.nameTable[zIndexTable[overlapObject]].zIndex = overlapObject;\n this.diagram.layers[0].zIndexTable[currentObject] = intersectArray[0].id;\n this.diagram.nameTable[zIndexTable[currentObject]].zIndex = currentObject;\n if (this.diagram.mode === 'SVG') {\n this.moveSvgNode(zIndexTable[Number(intersectArray[0].zIndex)], nodeId);\n }\n else {\n this.diagram.refreshCanvasLayers();\n }\n }\n }\n };\n /** @private */\n CommandHandler.prototype.sendBackward = function () {\n if (hasSelection(this.diagram)) {\n var objectId = this.diagram.selectedItems.nodes.length ? this.diagram.selectedItems.nodes[0].id\n : this.diagram.selectedItems.connectors[0].id;\n var layerNum = this.diagram.layers.indexOf(this.getObjectLayer(objectId));\n var zIndexTable = this.diagram.layers[layerNum].zIndexTable;\n var tabelLength = Object.keys(zIndexTable).length;\n var node = this.diagram.nameTable[objectId];\n var intersectArray = [];\n var temp = this.diagram.spatialSearch.findObjects(node.wrapper.bounds);\n if (temp.length > 2) {\n temp = this.sortByZIndex(temp);\n }\n for (var _i = 0, temp_3 = temp; _i < temp_3.length; _i++) {\n var i = temp_3[_i];\n if (node.id !== i.id) {\n var currentLayer = this.getObjectLayer(i.id).zIndex;\n if (layerNum === currentLayer && (Number(this.diagram.nameTable[objectId].zIndex) > Number(i.zIndex)) &&\n node.wrapper.bounds.intersects(i.wrapper.bounds)) {\n intersectArray.push(i);\n }\n }\n }\n if (intersectArray.length > 0) {\n var overlapObject = intersectArray[intersectArray.length - 1].zIndex;\n var currentObject = node.zIndex;\n var temp_4 = zIndexTable[overlapObject];\n //swap the nodes\n zIndexTable[overlapObject] = node.id;\n this.diagram.nameTable[zIndexTable[overlapObject]].zIndex = overlapObject;\n zIndexTable[currentObject] = intersectArray[intersectArray.length - 1].id;\n this.diagram.nameTable[zIndexTable[currentObject]].zIndex = currentObject;\n if (this.diagram.mode === 'SVG') {\n this.moveSvgNode(objectId, zIndexTable[intersectArray[intersectArray.length - 1].zIndex]);\n }\n else {\n this.diagram.refreshCanvasLayers();\n }\n }\n }\n };\n CommandHandler.prototype.initSelectorWrapper = function () {\n var selectorModel = this.diagram.selectedItems;\n selectorModel.init(this.diagram);\n if (selectorModel.nodes.length === 1 && selectorModel.connectors.length === 0) {\n selectorModel.rotateAngle = selectorModel.nodes[0].rotateAngle;\n selectorModel.wrapper.rotateAngle = selectorModel.nodes[0].rotateAngle;\n selectorModel.wrapper.pivot = selectorModel.nodes[0].pivot;\n }\n };\n /** @private */\n CommandHandler.prototype.doRubberBandSelection = function (region) {\n this.clearSelectionRectangle();\n this.clearSelection();\n var selArray = [];\n var rubberArray = [];\n selArray = this.diagram.getNodesConnectors(selArray);\n if (this.diagram.selectedItems.rubberBandSelectionMode === 'CompleteIntersect') {\n rubberArray = completeRegion(region, selArray);\n }\n else {\n rubberArray = this.diagram.spatialSearch.findObjects(region);\n }\n if (rubberArray.length) {\n this.selectObjects(rubberArray, true);\n }\n };\n CommandHandler.prototype.clearSelectionRectangle = function () {\n var adornerSvg = getAdornerLayerSvg(this.diagram.element.id);\n var element = adornerSvg.getElementById(this.diagram.element.id + '_diagramAdorner_selected_region');\n if (element) {\n remove(element);\n }\n };\n /** @private */\n CommandHandler.prototype.dragConnectorEnds = function (endPoint, obj, point, segment, target, targetPortId) {\n var selectorModel;\n var connector;\n var node;\n var tx;\n var segmentPoint;\n var ty;\n var index;\n var checkBezierThumb = false;\n if (obj instanceof Selector) {\n selectorModel = obj;\n connector = selectorModel.connectors[0];\n }\n else if (obj instanceof Connector && this.diagram.currentDrawingObject) {\n this.clearSelection();\n connector = this.diagram.currentDrawingObject;\n }\n if (endPoint === 'BezierSourceThumb' || endPoint === 'BezierTargetThumb') {\n checkBezierThumb = true;\n }\n if (endPoint === 'ConnectorSourceEnd' || endPoint === 'BezierSourceThumb') {\n tx = point.x - (checkBezierThumb ? segment.bezierPoint1.x : connector.sourcePoint.x);\n ty = point.y - (checkBezierThumb ? segment.bezierPoint1.y : connector.sourcePoint.y);\n return this.dragSourceEnd(connector, tx, ty, null, point, endPoint, undefined, target, targetPortId, undefined, segment);\n }\n else {\n tx = point.x - (checkBezierThumb ? segment.bezierPoint2.x : connector.targetPoint.x);\n ty = point.y - (checkBezierThumb ? segment.bezierPoint2.y : connector.targetPoint.y);\n return this.dragTargetEnd(connector, tx, ty, null, point, endPoint, undefined, segment);\n }\n };\n CommandHandler.prototype.getSelectedObject = function () {\n var selectormodel = this.diagram.selectedItems;\n return (selectormodel.nodes).concat(selectormodel.connectors);\n };\n /** @private */\n CommandHandler.prototype.clearSelection = function (triggerAction) {\n if (hasSelection(this.diagram)) {\n var selectormodel = this.diagram.selectedItems;\n var arrayNodes = this.getSelectedObject();\n var arg = {\n oldValue: arrayNodes, newValue: [], cause: this.diagram.diagramActions,\n state: 'Changing', type: 'Removal', cancel: false\n };\n if (triggerAction) {\n this.diagram.triggerEvent(DiagramEvent.selectionChange, arg);\n }\n if (!arg.cancel) {\n selectormodel.offsetX = 0;\n selectormodel.offsetY = 0;\n selectormodel.width = 0;\n selectormodel.height = 0;\n selectormodel.rotateAngle = 0;\n selectormodel.nodes = [];\n selectormodel.connectors = [];\n selectormodel.wrapper = null;\n this.diagram.clearSelectorLayer();\n if (triggerAction) {\n arg = {\n oldValue: arrayNodes, newValue: [], cause: this.diagram.diagramActions,\n state: 'Changed', type: 'Removal', cancel: false\n };\n this.diagram.triggerEvent(DiagramEvent.selectionChange, arg);\n }\n }\n }\n };\n /** @private */\n CommandHandler.prototype.drag = function (obj, tx, ty) {\n var tempNode;\n var elements = [];\n if (canMove(obj) && this.checkBoundaryConstraints(tx, ty, obj.wrapper.bounds) && canPageEditable(this.diagram)) {\n if (obj instanceof Node) {\n var oldValues = { offsetX: obj.offsetX, offsetY: obj.offsetY };\n obj.offsetX += tx;\n obj.offsetY += ty;\n if (obj.children) {\n var nodes = this.getAllDescendants(obj, elements);\n for (var i = 0; i < nodes.length; i++) {\n tempNode = (this.diagram.nameTable[nodes[i].id]);\n this.drag(tempNode, tx, ty);\n }\n }\n this.diagram.nodePropertyChange(obj, oldValues, { offsetX: obj.offsetX, offsetY: obj.offsetY });\n }\n else {\n var connector = obj;\n var update = connector.type === 'Bezier' ? true : false;\n var hasEnds = false;\n if (!connector.sourceWrapper) {\n this.dragSourceEnd(connector, tx, ty, true, null, '', update);\n }\n else {\n hasEnds = true;\n }\n if (!connector.targetWrapper) {\n this.dragTargetEnd(connector, tx, ty, true, null, '', update);\n }\n else {\n hasEnds = true;\n }\n if (!hasEnds) {\n this.dragControlPoint(connector, tx, ty, true);\n var conn = { sourcePoint: connector.sourcePoint, targetPoint: connector.targetPoint };\n this.diagram.connectorPropertyChange(connector, {}, conn);\n }\n }\n }\n };\n /** @private */\n CommandHandler.prototype.updateEndPoint = function (connector) {\n var conn = {\n sourcePoint: connector.sourcePoint, targetPoint: connector.targetPoint,\n sourceID: connector.sourceID ? connector.sourceID : undefined,\n targetID: connector.targetID ? connector.targetID : undefined,\n sourcePortID: connector.sourcePortID ? connector.sourcePortID : undefined,\n targetPortID: connector.targetPortID ? connector.targetPortID : undefined,\n segments: connector.segments ? connector.segments : undefined\n };\n this.diagram.connectorPropertyChange(connector, {}, conn);\n // this.diagram.refreshDiagramLayer();\n this.diagram.updateSelector();\n };\n /** @private */\n CommandHandler.prototype.dragSourceEnd = function (obj, tx, ty, preventUpdate, point, endPoint, update, target, targetPortId, isDragSource, segment) {\n var connector = this.diagram.nameTable[obj.id];\n var checkBoundaryConstraints = this.checkBoundaryConstraints(tx, ty, connector.wrapper.bounds);\n if (canDragSourceEnd(connector) && checkBoundaryConstraints\n && (endPoint !== 'BezierSourceThumb') && canPageEditable(this.diagram)) {\n connector.sourcePoint.x += tx;\n connector.sourcePoint.y += ty;\n if (endPoint === 'ConnectorSourceEnd' && connector.type === 'Orthogonal') {\n this.changeSegmentLength(connector, target, targetPortId, isDragSource);\n }\n }\n if (connector.type === 'Bezier') {\n if (segment) {\n this.translateBezierPoints(obj, (endPoint === '') ? 'ConnectorSourceEnd' : endPoint, tx, ty, segment, point, !update);\n }\n else {\n for (var i = 0; i < obj.segments.length; i++) {\n this.translateBezierPoints(obj, (endPoint === '') ? 'ConnectorSourceEnd' : endPoint, tx, ty, obj.segments[i], point, !update);\n }\n }\n }\n if (!preventUpdate) {\n this.updateEndPoint(connector);\n }\n return checkBoundaryConstraints;\n };\n /**\n * Upadte the connector segments when change the source node\n */\n CommandHandler.prototype.changeSegmentLength = function (connector, target, targetPortId, isDragSource) {\n if (connector.segments && connector.segments[0].direction !== null\n && ((!target && connector.sourceID === '') || isDragSource)) {\n var first = connector.segments[0];\n var second = connector.segments[1];\n var node = this.diagram.nameTable[connector.sourceID];\n var secPoint = void 0;\n first.points[0] = connector.sourcePoint;\n if (first.direction === 'Top' || first.direction === 'Bottom') {\n first.points[first.points.length - 1].x = connector.sourcePoint.x;\n second.points[0].y = first.points[first.points.length - 1].y;\n }\n else {\n first.points[first.points.length - 1].y = connector.sourcePoint.y;\n second.points[0].x = first.points[first.points.length - 1].x;\n }\n if (first.direction && (first.length || first.length === 0)) {\n first.length = Point.distancePoints(first.points[0], first.points[first.points.length - 1]);\n }\n if (second.direction && (second.length || second.length === 0)) {\n second.length = Point.distancePoints(first.points[first.points.length - 1], second.points[second.points.length - 1]);\n second.direction = Point.direction(first.points[first.points.length - 1], second.points[second.points.length - 1]);\n }\n if (connector.sourcePortID !== '' && first.length < 10) {\n if (connector.segments.length > 2) {\n var next = connector.segments[2];\n var nextDirection = Point.direction(next.points[0], next.points[1]);\n if (first.direction === getOppositeDirection(nextDirection)) {\n if (first.direction === 'Right') {\n next.points[0].x = first.points[first.points.length - 1].x = node.wrapper.corners.middleRight.x + 20;\n }\n else if (first.direction === 'Left') {\n next.points[0].x = first.points[first.points.length - 1].x = node.wrapper.corners.middleLeft.x - 20;\n }\n else if (first.direction === 'Top') {\n next.points[0].y = first.points[first.points.length - 1].y = node.wrapper.corners.topCenter.y - 20;\n }\n else {\n next.points[0].y = first.points[first.points.length - 1].y = node.wrapper.corners.bottomCenter.y + 20;\n }\n if (next.direction && next.length) {\n next.length = Point.distancePoints(next.points[0], next.points[next.points.length - 1]);\n }\n first.length = Point.distancePoints(first.points[0], first.points[first.points.length - 1]);\n }\n else if (first.direction === nextDirection && next.direction && next.length) {\n if (first.direction === 'Top' || first.direction === 'Bottom') {\n next.points[0] = first.points[0];\n next.points[next.points.length - 1].x = next.points[0].x;\n }\n else {\n next.points[0] = first.points[0];\n next.points[next.points.length - 1].y = next.points[0].y;\n }\n next.length = Point.distancePoints(next.points[0], next.points[next.points.length - 1]);\n connector.segments.splice(0, 2);\n }\n else {\n first.length = 20;\n }\n }\n else {\n first.length = 20;\n }\n }\n else if (first.length < 1) {\n if (connector.sourceID !== '') {\n if (second.direction === 'Right') {\n secPoint = node.wrapper.corners.middleRight;\n second.points[second.points.length - 1].y = secPoint.y;\n }\n else if (second.direction === 'Left') {\n secPoint = node.wrapper.corners.middleLeft;\n second.points[second.points.length - 1].y = secPoint.y;\n }\n else if (second.direction === 'Top') {\n secPoint = node.wrapper.corners.topCenter;\n second.points[second.points.length - 1].x = secPoint.x;\n }\n else {\n secPoint = node.wrapper.corners.bottomCenter;\n second.points[second.points.length - 1].x = secPoint.x;\n }\n second.length = Point.distancePoints(secPoint, second.points[second.points.length - 1]);\n if (connector.segments.length > 2) {\n var next = connector.segments[2];\n if (next.direction && next.length) {\n next.length = Point.distancePoints(second.points[second.points.length - 1], next.points[next.points.length - 1]);\n }\n }\n connector.segments.splice(0, 1);\n }\n else {\n connector.segments.splice(0, 1);\n }\n }\n }\n else {\n if (target && targetPortId && connector.sourcePortID !== targetPortId &&\n connector.segments && connector.segments[0].direction !== null && target && target instanceof Node) {\n this.changeSourceEndToPort(connector, target, targetPortId);\n }\n else if (target && (connector.sourceID !== target.id || connector.sourcePortID === '') &&\n connector.segments && connector.segments[0].direction !== null && target && target instanceof Node) {\n this.changeSourceEndToNode(connector, target);\n }\n }\n };\n /**\n * Change the connector endPoint to port\n */\n CommandHandler.prototype.changeSourceEndToPort = function (connector, target, targetPortId) {\n var port = this.diagram.getWrapper(target.wrapper, targetPortId);\n var point = { x: port.offsetX, y: port.offsetY };\n var direction = getPortDirection(point, target.wrapper.corners, target.wrapper.bounds, false);\n var firstSegment = connector.segments[0];\n var secondSegment = connector.segments[1];\n if (firstSegment.direction !== direction) {\n var segments = [];\n var segValues = {};\n if (firstSegment.direction === getOppositeDirection(direction)) {\n segValues = {};\n var segValues1 = void 0;\n if (direction === 'Top' || direction === 'Bottom') {\n segValues1 = (direction === 'Top') ? {\n type: 'Orthogonal', isTerminal: true, direction: direction,\n length: Math.abs(firstSegment.points[0].y - point.y)\n } :\n {\n type: 'Orthogonal', isTerminal: true, direction: direction,\n length: Math.abs(point.y - firstSegment.points[0].y)\n };\n segValues = (firstSegment.points[0].x > point.x) ?\n { type: 'Orthogonal', isTerminal: true, direction: 'Right', length: (firstSegment.points[0].x - point.x) } :\n { type: 'Orthogonal', isTerminal: true, direction: 'Left', length: (point.x - firstSegment.points[0].x) };\n }\n else {\n segValues1 = (direction === 'Right') ? {\n type: 'Orthogonal', isTerminal: true, direction: direction,\n length: Math.abs(firstSegment.points[0].x - point.x)\n } :\n {\n type: 'Orthogonal', isTerminal: true, direction: direction,\n length: Math.abs(point.x - firstSegment.points[0].x)\n };\n segValues = (firstSegment.points[0].y > point.y) ?\n { type: 'Orthogonal', direction: 'Top', isTerminal: true, length: (firstSegment.points[0].y - point.y) } :\n { type: 'Orthogonal', direction: 'Bottom', isTerminal: true, length: (point.y - firstSegment.points[0].y) };\n }\n segments.push(new OrthogonalSegment(connector, 'segments', segValues1, true));\n segments.push(new OrthogonalSegment(connector, 'segments', segValues, true));\n }\n else {\n segValues = { type: 'Orthogonal', direction: direction, length: 20, isTerminal: true };\n segments.push(new OrthogonalSegment(connector, 'segments', segValues, true));\n }\n if (firstSegment.direction !== getOppositeDirection(direction)) {\n if (direction === 'Top' || direction === 'Bottom') {\n firstSegment.points[0].x = point.x;\n firstSegment.points[0].y = firstSegment.points[firstSegment.points.length - 1].y = (direction === 'Top') ?\n point.y - 20 : point.y + 20;\n }\n else {\n firstSegment.points[0].y = point.y;\n firstSegment.points[0].x = firstSegment.points[firstSegment.points.length - 1].x = (direction === 'Right') ?\n point.x + 20 : point.x - 20;\n }\n firstSegment.length = Point.distancePoints(firstSegment.points[0], firstSegment.points[firstSegment.points.length - 1]);\n secondSegment.length = Point.distancePoints(firstSegment.points[firstSegment.points.length - 1], secondSegment.points[secondSegment.points.length - 1]);\n }\n connector.segments = segments.concat(connector.segments);\n }\n else {\n firstSegment.points[0] = point;\n if (direction === 'Top' || direction === 'Bottom') {\n firstSegment.points[firstSegment.points.length - 1].x = point.x;\n }\n else {\n firstSegment.points[firstSegment.points.length - 1].y = point.y;\n }\n firstSegment.length = Point.distancePoints(firstSegment.points[0], firstSegment.points[firstSegment.points.length - 1]);\n secondSegment.length = Point.distancePoints(firstSegment.points[firstSegment.points.length - 1], secondSegment.points[secondSegment.points.length - 1]);\n }\n };\n /**\n * @private\n * Remove terinal segment in initial\n */\n CommandHandler.prototype.removeTerminalSegment = function (connector, changeTerminal) {\n for (var i = 0; i < connector.segments.length - 2; i++) {\n var segment = connector.segments[0];\n if (segment.isTerminal) {\n if (changeTerminal) {\n segment.isTerminal = false;\n }\n else {\n connector.segments.splice(i, 1);\n i--;\n }\n }\n }\n };\n /**\n * Change the connector endPoint from point to node\n */\n CommandHandler.prototype.changeSourceEndToNode = function (connector, target) {\n this.removeTerminalSegment(connector);\n var sourceWrapper = target.wrapper.children[0].corners;\n var sourcePoint;\n var sourcePoint2;\n var firstSegment = connector.segments[0];\n var nextSegment = connector.segments[1];\n var segments = [];\n if (firstSegment.direction === 'Right' || firstSegment.direction === 'Left') {\n sourcePoint = (firstSegment.direction === 'Left') ? sourceWrapper.middleLeft : sourceWrapper.middleRight;\n if (firstSegment.length > sourceWrapper.width || ((firstSegment.direction === 'Left' &&\n sourcePoint.x >= firstSegment.points[0].x) || (firstSegment.direction === 'Right' &&\n sourcePoint.x <= firstSegment.points[0].x))) {\n firstSegment.points[0].y = firstSegment.points[firstSegment.points.length - 1].y = sourcePoint.y;\n firstSegment.points[0].x = sourcePoint.x;\n firstSegment.length = Point.distancePoints(firstSegment.points[0], firstSegment.points[firstSegment.points.length - 1]);\n nextSegment.length = Point.distancePoints(firstSegment.points[firstSegment.points.length - 1], nextSegment.points[nextSegment.points.length - 1]);\n }\n else {\n var direction = void 0;\n if (nextSegment.direction) {\n direction = nextSegment.direction;\n }\n else {\n direction = Point.direction(nextSegment.points[0], nextSegment.points[nextSegment.points.length - 1]);\n }\n sourcePoint2 = (direction === 'Bottom') ? sourceWrapper.bottomCenter : sourceWrapper.topCenter;\n if (nextSegment.length && nextSegment.direction) {\n nextSegment.length =\n (direction === 'Top') ? firstSegment.points[firstSegment.points.length - 1].y - (sourcePoint2.y + 20) :\n (sourcePoint2.y + 20) - firstSegment.points[firstSegment.points.length - 1].y;\n }\n firstSegment.length = firstSegment.points[firstSegment.points.length - 1].x - sourcePoint2.x;\n firstSegment.direction = (firstSegment.length > 0) ? 'Right' : 'Left';\n var segValues = { type: 'Orthogonal', direction: direction, length: 20 };\n segments.push(new OrthogonalSegment(connector, 'segments', segValues, true));\n connector.segments = segments.concat(connector.segments);\n }\n }\n else {\n sourcePoint = (firstSegment.direction === 'Bottom') ? sourceWrapper.bottomCenter : sourceWrapper.topCenter;\n if (firstSegment.length > sourceWrapper.height || ((firstSegment.direction === 'Top' &&\n sourcePoint.y >= firstSegment.points[0].y) ||\n (firstSegment.direction === 'Bottom' && sourcePoint.y <= firstSegment.points[0].y))) {\n firstSegment.points[0].x = firstSegment.points[firstSegment.points.length - 1].x = sourcePoint.x;\n firstSegment.points[0].y = sourcePoint.y;\n firstSegment.length = Point.distancePoints(firstSegment.points[0], firstSegment.points[firstSegment.points.length - 1]);\n nextSegment.length = Point.distancePoints(firstSegment.points[firstSegment.points.length - 1], nextSegment.points[nextSegment.points.length - 1]);\n }\n else {\n sourcePoint2 = (nextSegment.direction === 'Left') ? sourceWrapper.middleLeft : sourceWrapper.middleRight;\n var direction = void 0;\n if (nextSegment.direction) {\n direction = nextSegment.direction;\n }\n else {\n direction = Point.direction(nextSegment.points[0], nextSegment.points[nextSegment.points.length - 1]);\n }\n if (nextSegment.length && nextSegment.direction) {\n nextSegment.length =\n (direction === 'Left') ? firstSegment.points[firstSegment.points.length - 1].x - (sourcePoint2.x + 20) :\n (sourcePoint2.x + 20) - firstSegment.points[firstSegment.points.length - 1].x;\n }\n firstSegment.length = firstSegment.points[firstSegment.points.length - 1].y - sourcePoint2.y;\n firstSegment.direction = (firstSegment.length > 0) ? 'Bottom' : 'Top';\n var segValues = { type: 'Orthogonal', direction: direction, length: 20 };\n segments.push(new OrthogonalSegment(connector, 'segments', segValues, true));\n connector.segments = segments.concat(connector.segments);\n }\n }\n };\n /**\n * Translate the bezier points during the interaction\n */\n CommandHandler.prototype.translateBezierPoints = function (connector, value, tx, ty, seg, point, update) {\n var index = (connector.segments.indexOf(seg));\n var segment = connector.segments[index];\n if (segment) {\n if (value === 'BezierSourceThumb' && (segment.vector1.angle || segment.vector1.distance)) {\n segment.vector1 = {\n distance: connector.distance(connector.sourcePoint, point),\n angle: Point.findAngle(connector.sourcePoint, point),\n };\n }\n else if (value === 'BezierTargetThumb' && (segment.vector2.angle || segment.vector2.distance)) {\n segment.vector2 = {\n distance: connector.distance(connector.targetPoint, point),\n angle: Point.findAngle(connector.targetPoint, point),\n };\n }\n else if ((value === 'ConnectorSourceEnd' && !connector.sourceID || value === 'ConnectorTargetEnd' && !connector.targetID)\n && update && isEmptyVector(segment.vector1) && isEmptyVector(segment.vector2)) {\n if (Point.isEmptyPoint(segment.point1)) {\n segment.bezierPoint1 = getBezierPoints(connector.sourcePoint, connector.targetPoint);\n }\n if (Point.isEmptyPoint(segment.point2)) {\n segment.bezierPoint2 = getBezierPoints(connector.targetPoint, connector.sourcePoint);\n }\n }\n else if (value === 'BezierSourceThumb' || (value === 'ConnectorSourceEnd' && !update && isEmptyVector(segment.vector1))) {\n segment.bezierPoint1.x += tx;\n segment.bezierPoint1.y += ty;\n if ((!Point.isEmptyPoint(segment.point1)) || (update)) {\n segment.point1 = { x: segment.bezierPoint1.x, y: segment.bezierPoint1.y };\n }\n }\n else if (value === 'BezierTargetThumb' || (value === 'ConnectorTargetEnd' && !update && isEmptyVector(segment.vector2))) {\n segment.bezierPoint2.x += tx;\n segment.bezierPoint2.y += ty;\n if ((!Point.isEmptyPoint(segment.point2)) || (update)) {\n segment.point2 = { x: segment.bezierPoint2.x, y: segment.bezierPoint2.y };\n }\n }\n }\n };\n /** @private */\n CommandHandler.prototype.dragTargetEnd = function (obj, tx, ty, preventUpdate, point, endPoint, update, segment) {\n var connector = this.diagram.nameTable[obj.id];\n var boundaryConstraints = this.checkBoundaryConstraints(tx, ty, connector.wrapper.bounds);\n if (canDragTargetEnd(connector) && endPoint !== 'BezierTargetThumb'\n && boundaryConstraints && canPageEditable(this.diagram)) {\n connector.targetPoint.x += tx;\n connector.targetPoint.y += ty;\n if (endPoint === 'ConnectorTargetEnd' && connector.type === 'Orthogonal' &&\n connector.segments && connector.segments.length > 0) {\n var prev = connector.segments[connector.segments.length - 2];\n if (prev && connector.segments[connector.segments.length - 1].points.length === 2) {\n if (prev.direction === 'Left' || prev.direction === 'Right') {\n prev.points[prev.points.length - 1].x = connector.targetPoint.x;\n }\n else {\n prev.points[prev.points.length - 1].y = connector.targetPoint.y;\n }\n prev.length = Point.distancePoints(prev.points[0], prev.points[prev.points.length - 1]);\n prev.direction = Point.direction(prev.points[0], prev.points[prev.points.length - 1]);\n }\n }\n }\n if (connector.type === 'Bezier') {\n if (segment) {\n this.translateBezierPoints(obj, (endPoint === '') ? 'ConnectorTargetEnd' : endPoint, tx, ty, segment, point, !update);\n }\n else {\n for (var i = 0; i < obj.segments.length; i++) {\n this.translateBezierPoints(obj, (endPoint === '') ? 'ConnectorTargetEnd' : endPoint, tx, ty, obj.segments[i], point, !update);\n }\n }\n }\n if (!preventUpdate) {\n this.updateEndPoint(connector);\n }\n return boundaryConstraints;\n };\n /** @private */\n CommandHandler.prototype.dragControlPoint = function (obj, tx, ty, preventUpdate, segmentNumber) {\n var connector = this.diagram.nameTable[obj.id];\n if ((connector.type === 'Straight' || connector.type === 'Bezier') && connector.segments.length > 0) {\n if (segmentNumber !== undefined && connector.segments[segmentNumber]) {\n connector.segments[segmentNumber].point.x += tx;\n connector.segments[segmentNumber].point.y += ty;\n }\n else {\n for (var i = 0; i < connector.segments.length - 1; i++) {\n connector.segments[i].point.x += tx;\n connector.segments[i].point.y += ty;\n }\n }\n if (!preventUpdate) {\n this.updateEndPoint(connector);\n }\n }\n return true;\n };\n /** @private */\n CommandHandler.prototype.rotateObjects = function (parent, objects, angle, pivot, includeParent) {\n pivot = pivot || {};\n var matrix = identityMatrix();\n rotateMatrix(matrix, angle, pivot.x, pivot.y);\n for (var _i = 0, objects_2 = objects; _i < objects_2.length; _i++) {\n var obj = objects_2[_i];\n if (obj instanceof Node) {\n if (canRotate(obj) && canPageEditable(this.diagram)) {\n if (includeParent !== false || parent !== obj) {\n obj.rotateAngle += angle;\n obj.rotateAngle = (obj.rotateAngle + 360) % 360;\n var newOffset = transformPointByMatrix(matrix, { x: obj.offsetX, y: obj.offsetY });\n obj.offsetX = newOffset.x;\n obj.offsetY = newOffset.y;\n this.diagram.nodePropertyChange(obj, {}, { offsetX: obj.offsetX, offsetY: obj.offsetY, rotateAngle: obj.rotateAngle });\n }\n if (obj.processId) {\n var parent_1 = this.diagram.nameTable[obj.processId];\n var bound = this.diagram.bpmnModule.getChildrenBound(parent_1, obj.id, this.diagram);\n this.diagram.bpmnModule.updateSubProcessess(bound, obj, this.diagram);\n }\n if (obj.children && obj.children.length) {\n this.getChildren(obj, objects);\n }\n }\n }\n else {\n this.rotatePoints(obj, angle, pivot || { x: obj.wrapper.offsetX, y: obj.wrapper.offsetY });\n }\n this.diagram.updateDiagramObject(obj);\n }\n this.diagram.updateSelector();\n };\n /** @private */\n CommandHandler.prototype.snapConnectorEnd = function (currentPosition) {\n if ((this.diagram.snapSettings.constraints & SnapConstraints.SnapToLines)\n && this.snappingModule) {\n this.diagram.snappingModule.snapConnectorEnd(currentPosition);\n }\n return currentPosition;\n };\n CommandHandler.prototype.snapAngle = function (angle) {\n if ((this.diagram.snapSettings.constraints & SnapConstraints.SnapToLines)\n && this.snappingModule) {\n return this.snappingModule.snapAngle(this.diagram, angle);\n }\n else {\n return 0;\n }\n };\n CommandHandler.prototype.rotatePoints = function (conn, angle, pivot) {\n if (!conn.sourceWrapper || !conn.targetWrapper) {\n var matrix = identityMatrix();\n rotateMatrix(matrix, angle, pivot.x, pivot.y);\n conn.sourcePoint = transformPointByMatrix(matrix, conn.sourcePoint);\n conn.targetPoint = transformPointByMatrix(matrix, conn.targetPoint);\n var newProp = { sourcePoint: conn.sourcePoint, targetPoint: conn.targetPoint };\n this.diagram.connectorPropertyChange(conn, {}, newProp);\n }\n };\n /** @private */\n CommandHandler.prototype.scale = function (obj, sw, sh, pivot, refObject) {\n var node = this.diagram.nameTable[obj.id];\n var tempNode = node;\n var elements = [];\n var element = node.wrapper;\n if (element.actualSize.width !== undefined && element.actualSize.height !== undefined && canPageEditable(this.diagram)) {\n if (tempNode.children) {\n var nodes = this.getAllDescendants(tempNode, elements);\n for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {\n var temp = nodes_1[_i];\n this.scaleObject(sw, sh, pivot, temp, element, refObject);\n }\n obj.wrapper.measure(new Size());\n obj.wrapper.arrange(obj.wrapper.desiredSize);\n this.diagram.updateGroupOffset(node);\n }\n else {\n this.scaleObject(sw, sh, pivot, node, element, refObject);\n }\n var bounds = getBounds(obj.wrapper);\n var checkBoundaryConstraints = this.checkBoundaryConstraints(undefined, undefined, bounds);\n if (!checkBoundaryConstraints) {\n this.scale(obj, 1 / sw, 1 / sh, pivot);\n return false;\n }\n this.diagram.updateDiagramObject(obj);\n }\n return true;\n };\n /** @private */\n CommandHandler.prototype.getAllDescendants = function (node, nodes, includeParent) {\n var temp = node;\n for (var i = 0; i < temp.children.length; i++) {\n node = (this.diagram.nameTable[temp.children[i]]);\n if (!node.children) {\n nodes.push(node);\n }\n else {\n if (includeParent) {\n nodes.push(node);\n }\n nodes = this.getAllDescendants(node, nodes);\n }\n }\n return nodes;\n };\n CommandHandler.prototype.getChildren = function (node, nodes) {\n var temp = node;\n if (node.children) {\n for (var i = 0; i < temp.children.length; i++) {\n node = (this.diagram.nameTable[temp.children[i]]);\n nodes.push(node);\n }\n }\n return nodes;\n };\n /** @private */\n CommandHandler.prototype.cloneChild = function (id) {\n var node = this.diagram.nameTable[id];\n return node;\n };\n /** @private */\n CommandHandler.prototype.scaleObject = function (sw, sh, pivot, obj, element, refObject) {\n sw = sw < 0 ? 1 : sw;\n sh = sh < 0 ? 1 : sh;\n var process;\n var oldValues = {\n offsetX: obj.wrapper.offsetX, offsetY: obj.wrapper.offsetY,\n width: obj.wrapper.actualSize.width, height: obj.wrapper.actualSize.height\n };\n if (sw !== 1 || sh !== 1) {\n var width = void 0;\n var height = void 0;\n if (obj instanceof Node) {\n var node = obj;\n var isResize = void 0;\n var bound = void 0;\n if (node.shape.type === 'Bpmn' && node.shape.activity.subProcess.processes\n && node.shape.activity.subProcess.processes.length > 0) {\n bound = this.diagram.bpmnModule.getChildrenBound(node, node.id, this.diagram);\n isResize = node.wrapper.bounds.containsRect(bound);\n }\n width = node.wrapper.actualSize.width * sw;\n height = node.wrapper.actualSize.height * sh;\n if (node.maxWidth !== undefined && node.maxWidth !== 0) {\n width = Math.min(node.maxWidth, width);\n }\n if (node.minWidth !== undefined && node.minWidth !== 0) {\n width = Math.max(node.minWidth, width);\n }\n if (node.maxHeight !== undefined && node.maxHeight !== 0) {\n height = Math.min(node.maxHeight, height);\n }\n if (node.minHeight !== undefined && node.minHeight !== 0) {\n height = Math.max(node.minHeight, height);\n }\n if (isResize) {\n width = Math.max(width, (bound.right - node.wrapper.bounds.x));\n height = Math.max(height, (bound.bottom - node.wrapper.bounds.y));\n }\n sw = width / node.actualSize.width;\n sh = height / node.actualSize.height;\n }\n var matrix = identityMatrix();\n var refWrapper = void 0;\n if (!refObject) {\n refObject = obj;\n }\n refWrapper = refObject.wrapper;\n var x = refWrapper.offsetX - refWrapper.actualSize.width * refWrapper.pivot.x;\n var y = refWrapper.offsetY - refWrapper.actualSize.height * refWrapper.pivot.y;\n var refPoint = { x: x + refWrapper.actualSize.width * pivot.x, y: y + refWrapper.actualSize.height * pivot.y };\n refPoint = rotatePoint(refWrapper.rotateAngle, refWrapper.offsetX, refWrapper.offsetY, refPoint);\n rotateMatrix(matrix, -refWrapper.rotateAngle, refPoint.x, refPoint.y);\n scaleMatrix(matrix, sw, sh, refPoint.x, refPoint.y);\n rotateMatrix(matrix, refWrapper.rotateAngle, refPoint.x, refPoint.y);\n if (obj instanceof Node) {\n var node = obj;\n var left = void 0;\n var top_1;\n var newPosition = transformPointByMatrix(matrix, { x: node.wrapper.offsetX, y: node.wrapper.offsetY });\n var oldleft = node.wrapper.offsetX - node.wrapper.actualSize.width * node.pivot.x;\n var oldtop = node.wrapper.offsetY - node.wrapper.actualSize.height * node.pivot.y;\n if (width > 0) {\n if (node.processId) {\n var parent_2 = this.diagram.nameTable[node.processId];\n if (!parent_2.maxWidth || ((node.margin.left + width) < parent_2.maxWidth)) {\n node.width = width;\n node.offsetX = newPosition.x;\n }\n }\n else {\n node.width = width;\n node.offsetX = newPosition.x;\n }\n }\n if (height > 0) {\n if (node.processId) {\n var parent_3 = this.diagram.nameTable[node.processId];\n if (!parent_3.maxHeight || ((node.margin.top + height) < parent_3.maxHeight)) {\n node.height = height;\n node.offsetY = newPosition.y;\n }\n }\n else {\n node.height = height;\n node.offsetY = newPosition.y;\n }\n }\n left = node.wrapper.offsetX - node.wrapper.actualSize.width * node.pivot.x;\n top_1 = node.wrapper.offsetY - node.wrapper.actualSize.height * node.pivot.y;\n var parent_4 = this.diagram.nameTable[node.processId];\n if (parent_4 && ((node.margin.top + (top_1 - oldtop)) <= 0 ||\n (node.margin.left + (left - oldleft) <= 0))) {\n this.diagram.nodePropertyChange(obj, {}, {\n margin: { top: node.margin.top, left: node.margin.left }\n });\n }\n else {\n this.diagram.nodePropertyChange(obj, {}, {\n width: node.width, height: node.height, offsetX: node.offsetX,\n offsetY: node.offsetY, margin: { top: node.margin.top + (top_1 - oldtop), left: node.margin.left + (left - oldleft) }\n });\n }\n }\n else {\n var connector = obj;\n if (!connector.sourceWrapper || !connector.targetWrapper) {\n connector.sourcePoint = transformPointByMatrix(matrix, connector.sourcePoint);\n connector.targetPoint = transformPointByMatrix(matrix, connector.targetPoint);\n var newProp = { sourcePoint: connector.sourcePoint, targetPoint: connector.targetPoint };\n this.diagram.connectorPropertyChange(connector, {}, newProp);\n }\n }\n var parentNode = this.diagram.nameTable[obj.processId];\n if (parentNode) {\n var parent_5 = parentNode.wrapper.bounds;\n var child = obj.wrapper.bounds;\n var bound = this.diagram.bpmnModule.getChildrenBound(parentNode, obj.id, this.diagram);\n this.diagram.bpmnModule.updateSubProcessess(bound, obj, this.diagram);\n }\n }\n };\n /** @private */\n CommandHandler.prototype.portDrag = function (obj, portElement, tx, ty) {\n var oldValues;\n var changedvalues;\n var port = this.findTarget(portElement, obj);\n var bounds = getBounds(obj.wrapper);\n var index = findPortIndex(obj, port.id);\n var ports = {};\n ports[index] = { offset: { x: port.offset.x, y: port.offset.y } };\n if (port && canDrag(port, this.diagram)) {\n oldValues = { ports: ports };\n port.offset.x += (tx / bounds.width);\n port.offset.y += (ty / bounds.height);\n ports = {};\n ports[index] = { offset: { x: port.offset.x, y: port.offset.y } };\n changedvalues = { ports: ports };\n this.diagram.nodePropertyChange(obj, oldValues, changedvalues);\n this.diagram.updateDiagramObject(obj);\n }\n };\n /** @private */\n CommandHandler.prototype.getSubProcess = function (source) {\n var selector = { nodes: [], connectors: [] };\n var process;\n if (source instanceof Node) {\n process = source.processId;\n }\n else if (source && source.nodes && (source.nodes.length)\n && source.nodes[0].processId) {\n process = source.nodes[0].processId;\n }\n if (process) {\n selector.nodes.push(clone(this.diagram.nameTable[process]));\n return selector;\n }\n return selector;\n };\n CommandHandler.prototype.checkBoundaryConstraints = function (tx, ty, nodeBounds) {\n var pageSettings = this.diagram.pageSettings;\n var boundaryConstraints = this.diagram.pageSettings.boundaryConstraints;\n var scroller = this.diagram.scroller;\n if (boundaryConstraints === 'Page' || boundaryConstraints === 'Diagram') {\n var selectorBounds = !nodeBounds ? this.diagram.selectedItems.wrapper.bounds : undefined;\n var width = boundaryConstraints === 'Page' ? pageSettings.width : scroller.viewPortWidth;\n var height = boundaryConstraints === 'Page' ? pageSettings.height : scroller.viewPortHeight;\n var bounds = nodeBounds;\n var right = (nodeBounds ? bounds.right : selectorBounds.right) + (tx || 0);\n var left = (nodeBounds ? bounds.left : selectorBounds.left) + (tx || 0);\n var top_2 = (nodeBounds ? bounds.top : selectorBounds.top) + (ty || 0);\n var bottom = (nodeBounds ? bounds.bottom : selectorBounds.bottom) + (ty || 0);\n if (right <= width && left >= 0\n && bottom <= height && top_2 >= 0) {\n return true;\n }\n return false;\n }\n return true;\n };\n //interfaces\n /** @private */\n CommandHandler.prototype.dragSelectedObjects = function (tx, ty) {\n var obj = this.diagram.selectedItems;\n if (this.state && !this.state.backup) {\n this.state.backup = {};\n this.state.backup.offsetX = obj.offsetX;\n this.state.backup.offsetY = obj.offsetY;\n }\n if (this.checkBoundaryConstraints(tx, ty)) {\n this.diagram.drag(obj, tx, ty);\n return true;\n }\n return false;\n };\n /** @private */\n CommandHandler.prototype.scaleSelectedItems = function (sx, sy, pivot) {\n var obj = this.diagram.selectedItems;\n if (this.state && !this.state.backup) {\n this.state.backup = {};\n this.state.backup.offsetX = obj.offsetX;\n this.state.backup.offsetY = obj.offsetY;\n this.state.backup.width = obj.width;\n this.state.backup.height = obj.height;\n this.state.backup.pivot = pivot;\n }\n return this.diagram.scale(obj, sx, sy, pivot);\n };\n /** @private */\n CommandHandler.prototype.rotateSelectedItems = function (angle) {\n var obj = this.diagram.selectedItems;\n if (this.state && !this.state.backup) {\n this.state.backup = {};\n this.state.backup.angle = obj.rotateAngle;\n }\n return this.diagram.rotate(obj, angle);\n };\n /** @private */\n CommandHandler.prototype.hasSelection = function () {\n return hasSelection(this.diagram);\n };\n /** @private */\n CommandHandler.prototype.isSelected = function (element) {\n return isSelected(this.diagram, element);\n };\n /**\n * initExpand is used for layout expand and collapse interaction\n */\n CommandHandler.prototype.initExpand = function (args) {\n var node = (args.target || args.source);\n this.expandNode(node, false, this.diagram);\n };\n /** @private */\n CommandHandler.prototype.expandNode = function (node, propChange, diagram) {\n var animation;\n var objects;\n var expand = propChange ? node.isExpanded : !node.isExpanded;\n this.expandCollapse(node, expand, this.diagram);\n node.isExpanded = expand;\n this.diagram.layout.fixedNode = node.id;\n if (!propChange) {\n this.diagram.updateIcon(node);\n }\n if (this.diagram.layoutAnimateModule && this.diagram.layout.enableAnimation) {\n this.diagram.organizationalChartModule.isAnimation = true;\n }\n objects = this.diagram.doLayout();\n if (this.diagram.layoutAnimateModule && this.diagram.layout.enableAnimation) {\n this.layoutAnimateModule.expand(this.diagram.organizationalChartModule.isAnimation, objects, node, this.diagram);\n }\n return objects;\n };\n /**\n * Setinterval and Clear interval for layout animation\n */\n /** @private */\n CommandHandler.prototype.expandCollapse = function (source, visibility, diagram) {\n for (var i = 0; i < source.outEdges.length; i++) {\n var connector = diagram.nameTable[source.outEdges[i]];\n var target = diagram.nameTable[connector.targetID];\n connector.visible = visibility;\n if (target.isExpanded) {\n this.expandCollapse(target, visibility, diagram);\n }\n var oldValues = {\n visible: target.visible\n };\n target.visible = visibility;\n var newValues = {\n visible: target.visible\n };\n diagram.nodePropertyChange(target, oldValues, newValues);\n diagram.connectorPropertyChange(connector, oldValues, newValues);\n }\n };\n /**\n * @private\n */\n CommandHandler.prototype.updateNodeDimension = function (obj, rect) {\n if (obj instanceof Node) {\n obj.offsetX = rect.x + rect.width / 2;\n obj.offsetY = rect.y + rect.height / 2;\n obj.width = rect.width;\n obj.height = rect.height;\n this.diagram.nodePropertyChange(obj, {}, {\n width: rect.width, height: rect.height, offsetX: obj.offsetX,\n offsetY: obj.offsetY\n });\n if (this.diagram.mode !== 'SVG') {\n this.diagram.refreshDiagramLayer();\n }\n }\n };\n /** @private */\n CommandHandler.prototype.drawSelectionRectangle = function (x, y, width, height) {\n this.diagram.drawSelectionRectangle(x, y, width, height);\n };\n /** @private */\n CommandHandler.prototype.startGroupAction = function () {\n this.diagram.startGroupAction();\n };\n /** @private */\n CommandHandler.prototype.endGroupAction = function () {\n this.diagram.endGroupAction();\n };\n /** @private */\n CommandHandler.prototype.removeChildFromBPmn = function (child, newTarget, oldTarget) {\n var obj = this.diagram.nameTable[child.id] || child.nodes[0];\n if (oldTarget) {\n if ((obj) && obj.processId && obj.processId === oldTarget.wrapper.id) {\n var node = clone(obj);\n node.processId = obj.processId;\n this.diagram.startGroupAction();\n var edges = [];\n edges = edges.concat(obj.outEdges, obj.inEdges);\n for (var i = edges.length - 1; i >= 0; i--) {\n var connector = this.diagram.nameTable[edges[i]];\n if (connector) {\n this.diagram.remove(connector);\n }\n }\n var nodeCollection = void 0;\n nodeCollection = (this.diagram.nameTable[obj.processId].shape.activity.subProcess.processes) || [];\n nodeCollection.splice(nodeCollection.indexOf((obj).id), 1);\n this.diagram.bpmnModule.removeChildFromBPMN(this.diagram.nameTable[obj.processId].wrapper, (obj).id);\n this.diagram.nameTable[(obj).id].processId = '';\n obj.offsetX = obj.wrapper.offsetX;\n obj.offsetY = obj.wrapper.offsetY;\n var undoElement = clone(obj);\n var entry = {\n type: 'PositionChanged', redoObject: { nodes: [undoElement] }, undoObject: { nodes: [node] }, category: 'Internal'\n };\n this.addHistoryEntry(entry);\n this.diagram.endGroupAction();\n }\n }\n };\n /** @private */\n CommandHandler.prototype.isDroppable = function (source, targetNodes) {\n var node = this.diagram.nameTable[source.id] || source.nodes[0];\n if (node && node.shape.type === 'Bpmn') {\n if ((node.processId === targetNodes.id) || (node.id === targetNodes.processId) ||\n targetNodes.shape.activity.subProcess.collapsed) {\n return false;\n }\n }\n return true;\n };\n /**\n * @private\n */\n CommandHandler.prototype.renderHighlighter = function (args, connectHighlighter, source) {\n var bounds = new Rect();\n if (args.target instanceof Node || (connectHighlighter && args.source instanceof Node)) {\n var tgt = connectHighlighter ? args.source : args.target;\n var tgtWrap = connectHighlighter ? args.sourceWrapper : args.targetWrapper;\n var target = this.findTarget(tgtWrap, tgt, source);\n var element = void 0;\n if (target instanceof BpmnSubEvent) {\n var portId = target.id;\n var node = args.target;\n var parent_6 = node.wrapper.children[0].children[0].children[2];\n for (var _i = 0, _a = parent_6.children; _i < _a.length; _i++) {\n var child = _a[_i];\n if (child.id === node.id + '_' + portId) {\n element = child.children[0];\n break;\n }\n }\n }\n else {\n element = target instanceof Node ?\n target.wrapper : connectHighlighter ? args.sourceWrapper : args.targetWrapper;\n }\n this.diagram.renderHighlighter(element);\n }\n };\n //additional events\n /** @private */\n CommandHandler.prototype.mouseOver = function (source, target, position) {\n //mouse over\n //returns whether the source can move over the target or not\n return true;\n };\n /**\n * @private\n */\n CommandHandler.prototype.snapPoint = function (startPoint, endPoint, tx, ty) {\n var obj = this.diagram.selectedItems;\n var point;\n var towardsLeft = endPoint.x < startPoint.x;\n var towardsTop = endPoint.y < startPoint.y;\n point = { x: tx, y: ty };\n var snappedPoint = point;\n if (this.snappingModule) {\n snappedPoint = this.diagram.snappingModule.snapPoint(this.diagram, obj, towardsLeft, towardsTop, point, startPoint, endPoint);\n }\n return snappedPoint;\n };\n /**\n * @private\n */\n CommandHandler.prototype.removeSnap = function () {\n if ((this.diagram.snapSettings.constraints & SnapConstraints.SnapToObject) && this.snappingModule) {\n this.snappingModule.removeGuidelines(this.diagram);\n }\n };\n /** @private */\n CommandHandler.prototype.drop = function (source, target, position) {\n //drop\n if (this.diagram.bpmnModule) {\n this.diagram.bpmnModule.dropBPMNchild(target, (source instanceof Node) ? source : source.nodes[0], this.diagram);\n this.diagram.refreshDiagramLayer();\n }\n };\n /** @private */\n CommandHandler.prototype.addHistoryEntry = function (entry) {\n this.diagram.addHistoryEntry(entry);\n };\n /** @private */\n CommandHandler.prototype.align = function (objects, option) {\n if (objects.length > 0) {\n var i = 0;\n var j = 0;\n var bounds = getBounds(objects[0].wrapper);\n var undoObj = { nodes: [], connectors: [] };\n var redoObj = { nodes: [], connectors: [] };\n for (i = 1; i < objects.length; i++) {\n var tx = 0;\n var ty = 0;\n if (option === 'Left') {\n if (objects[i] instanceof Node) {\n tx = bounds.topLeft.x +\n objects[i].width / 2 - objects[i].offsetX;\n }\n else {\n tx = bounds.topLeft.x - objects[i].sourcePoint.x;\n }\n }\n else if (option === 'Right') {\n if (objects[i] instanceof Node) {\n tx = bounds.topRight.x -\n objects[i].width / 2 - objects[i].offsetX;\n }\n else {\n tx = bounds.topRight.x - objects[i].wrapper.bounds.width -\n objects[i].sourcePoint.x;\n }\n }\n else if (option === 'Top') {\n if (objects[i] instanceof Node) {\n ty = bounds.top + objects[i].height / 2 - objects[i].offsetY;\n }\n else {\n ty = bounds.top - objects[i].sourcePoint.y;\n }\n }\n else if (option === 'Bottom') {\n if (objects[i] instanceof Node) {\n ty = bounds.bottom - objects[i].height / 2 - objects[i].offsetY;\n }\n else {\n ty = bounds.bottom - objects[i].sourcePoint.y;\n }\n }\n else if (option === 'Center') {\n if (objects[i] instanceof Node) {\n tx = bounds.center.x - objects[i].offsetX;\n }\n else {\n j = Math.abs(bounds.width -\n objects[i].wrapper.bounds.width);\n tx = bounds.bottomLeft.x - j / 2 - objects[i].sourcePoint.x;\n }\n }\n else if (option === 'Middle') {\n if (objects[i] instanceof Node) {\n ty = bounds.center.y - objects[i].offsetY;\n }\n else {\n ty = bounds.center.y - objects[i].sourcePoint.y;\n }\n }\n undoObj = this.storeObject(undoObj, objects[i]);\n this.drag(objects[i], tx, ty);\n this.diagram.updateSelector();\n redoObj = this.storeObject(redoObj, objects[i]);\n }\n undoObj = clone(undoObj);\n redoObj = clone(redoObj);\n var entry = {\n type: 'Align', category: 'Internal',\n undoObject: cloneObject(undoObj), redoObject: cloneObject(redoObj)\n };\n this.addHistoryEntry(entry);\n }\n };\n /** @private */\n CommandHandler.prototype.distribute = function (objects, option) {\n if (objects.length > 0) {\n var i = 0;\n var j = 0;\n var rect = new Rect();\n var b = [];\n var temp = void 0;\n var right = 0;\n var left = 0;\n var top_3 = 0;\n var bottom = 0;\n var center = 0;\n var middle = 0;\n var btt = 0;\n var sum = 0;\n var undoSelectorObj = { nodes: [], connectors: [] };\n var redoSelectorObj = { nodes: [], connectors: [] };\n objects = sort(objects);\n for (i = 1; i < objects.length; i++) {\n right = right + objects[i].wrapper.bounds.topRight.x - objects[i - 1].wrapper.bounds.topRight.x;\n left = left + objects[i].wrapper.bounds.topLeft.x - objects[i - 1].wrapper.bounds.topLeft.x;\n top_3 = top_3 + objects[i].wrapper.bounds.topRight.y - objects[i - 1].wrapper.bounds.topRight.y;\n bottom = bottom + objects[i].wrapper.bounds.bottomRight.y - objects[i - 1].wrapper.bounds.bottomRight.y;\n center = center + objects[i].wrapper.bounds.center.x - objects[i - 1].wrapper.bounds.center.x;\n middle = middle + objects[i].wrapper.bounds.center.y - objects[i - 1].wrapper.bounds.center.y;\n btt = btt + objects[i].wrapper.bounds.topRight.y - objects[i - 1].wrapper.bounds.bottomRight.y;\n }\n for (i = 1; i < objects.length - 1; i++) {\n var tx = 0;\n var ty = 0;\n var prev = getBounds(objects[i - 1].wrapper);\n var current = getBounds(objects[i].wrapper);\n if (option === 'RightToLeft' || option === 'Center') {\n tx = prev.center.x - current.center.x + (center / (objects.length - 1));\n }\n else if (option === 'Right') {\n tx = prev.topRight.x - current.topRight.x + (right / (objects.length - 1));\n }\n else if (option === 'Left') {\n tx = prev.topLeft.x - current.topLeft.x + (left / (objects.length - 1));\n }\n else if (option === 'Middle') {\n ty = prev.center.y - current.center.y + (middle / (objects.length - 1));\n }\n else if (option === 'Top') {\n ty = prev.topRight.y - current.topRight.y + (top_3 / (objects.length - 1));\n }\n else if (option === 'Bottom') {\n ty = prev.bottomRight.y - current.bottomRight.y + (bottom / (objects.length - 1));\n }\n else if (option === 'BottomToTop') {\n ty = prev.bottomRight.y - current.topRight.y + (btt / (objects.length - 1));\n }\n undoSelectorObj = this.storeObject(undoSelectorObj, objects[i]);\n this.drag(objects[i], tx, ty);\n this.diagram.updateSelector();\n redoSelectorObj = this.storeObject(redoSelectorObj, objects[i]);\n }\n undoSelectorObj = clone(undoSelectorObj);\n redoSelectorObj = clone(redoSelectorObj);\n var entry = {\n type: 'Distribute', category: 'Internal',\n undoObject: cloneObject(undoSelectorObj), redoObject: cloneObject(redoSelectorObj)\n };\n this.addHistoryEntry(entry);\n }\n };\n /** @private */\n CommandHandler.prototype.sameSize = function (objects, option) {\n if (objects.length > 0) {\n var i = 0;\n var pivot = void 0;\n pivot = { x: 0.5, y: 0.5 };\n var bounds = getBounds(objects[0].wrapper);\n var undoObject = { nodes: [], connectors: [] };\n var redoObject = { nodes: [], connectors: [] };\n for (i = 1; i < objects.length; i++) {\n var rect = getBounds(objects[i].wrapper);\n var sw = 1;\n var sh = 1;\n if (option === 'Width') {\n sw = bounds.width / rect.width;\n }\n else if (option === 'Height') {\n sh = bounds.height / rect.height;\n }\n else if (option === 'Size') {\n sw = bounds.width / rect.width;\n sh = bounds.height / rect.height;\n }\n undoObject = this.storeObject(undoObject, objects[i]);\n this.scale(objects[i], sw, sh, pivot);\n redoObject = this.storeObject(redoObject, objects[i]);\n }\n this.diagram.updateSelector();\n undoObject = clone(undoObject);\n redoObject = clone(redoObject);\n var entry = {\n type: 'Sizing', category: 'Internal',\n undoObject: cloneObject(undoObject), redoObject: cloneObject(redoObject)\n };\n this.addHistoryEntry(entry);\n }\n };\n CommandHandler.prototype.storeObject = function (selectorObject, obj) {\n if (obj instanceof Node) {\n selectorObject.nodes.push(clone(obj));\n }\n else {\n selectorObject.connectors.push(clone(obj));\n }\n return selectorObject;\n };\n /** @private */\n CommandHandler.prototype.scroll = function (scrollX, scrollY, focusPoint) {\n var panx = canPanX(this.diagram);\n var pany = canPanY(this.diagram);\n this.diagram.pan((scrollX = panx ? scrollX : 0) * this.diagram.scroller.currentZoom, (scrollY = pany ? scrollY : 0) * this.diagram.scroller.currentZoom, focusPoint);\n };\n /**\n * @private\n */\n CommandHandler.prototype.drawHighlighter = function (element) {\n this.diagram.renderHighlighter(element.wrapper);\n };\n /**\n * @private\n */\n CommandHandler.prototype.removeHighlighter = function () {\n this.diagram.clearHighlighter();\n };\n /** @private */\n CommandHandler.prototype.zoom = function (scale, scrollX, scrollY, focusPoint) {\n this.diagram.scroller.zoom(scale, scrollX * this.diagram.scroller.currentZoom, scrollY * this.diagram.scroller.currentZoom, focusPoint);\n };\n return CommandHandler;\n}());\nexport { CommandHandler };\n","import { Rect } from '../primitives/rect';\nimport { identityMatrix, scaleMatrix, translateMatrix, transformPointByMatrix, multiplyMatrix } from '../primitives/matrix';\nimport { updateRuler } from '../ruler/ruler';\nimport { canZoom, canPan } from './../utility/constraints-util';\n/**\n */\nvar DiagramScroller = /** @class */ (function () {\n function DiagramScroller(diagram) {\n /** @private */\n this.transform = { tx: 0, ty: 0, scale: 1 };\n this.vPortWidth = 0;\n this.vPortHeight = 0;\n this.currentZoomFActor = 1;\n this.hOffset = 0;\n this.vOffset = 0;\n this.scrolled = false;\n this.hScrollSize = 0;\n this.vScrollSize = 0;\n this.diagram = diagram;\n this.objects = [];\n }\n Object.defineProperty(DiagramScroller.prototype, \"viewPortHeight\", {\n /** @private */\n get: function () {\n return this.vPortHeight;\n },\n /** @private */\n set: function (offset) {\n this.vPortHeight = offset;\n this.diagram.scrollSettings.viewPortHeight = offset;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DiagramScroller.prototype, \"currentZoom\", {\n /** @private */\n get: function () {\n return this.currentZoomFActor;\n },\n /** @private */\n set: function (offset) {\n this.currentZoomFActor = offset;\n this.diagram.scrollSettings.currentZoom = offset;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DiagramScroller.prototype, \"viewPortWidth\", {\n /** @private */\n get: function () {\n return this.vPortWidth;\n },\n /** @private */\n set: function (offset) {\n this.vPortWidth = offset;\n this.diagram.scrollSettings.viewPortWidth = offset;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DiagramScroller.prototype, \"horizontalOffset\", {\n /** @private */\n get: function () {\n return this.hOffset;\n },\n /** @private */\n set: function (offset) {\n this.hOffset = offset;\n if (Math.abs(this.hOffset - this.diagram.scrollSettings.horizontalOffset) > 1) {\n this.scrolled = true;\n }\n this.diagram.scrollSettings.horizontalOffset = offset;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DiagramScroller.prototype, \"verticalOffset\", {\n /** @private */\n get: function () {\n return this.vOffset;\n },\n /** @private */\n set: function (offset) {\n this.vOffset = offset;\n if (Math.abs(this.vOffset - this.diagram.scrollSettings.verticalOffset) > 1) {\n this.scrolled = true;\n }\n this.diagram.scrollSettings.verticalOffset = offset;\n },\n enumerable: true,\n configurable: true\n });\n /** @private */\n DiagramScroller.prototype.updateScrollOffsets = function (hOffset, vOffset) {\n var offsetX = 0;\n var offsetY = 0;\n var pageBounds = this.getPageBounds();\n pageBounds.x *= this.currentZoom;\n pageBounds.y *= this.currentZoom;\n pageBounds.width *= this.currentZoom;\n pageBounds.height *= this.currentZoom;\n offsetX = Math.max(0, hOffset - pageBounds.left);\n offsetY = Math.max(0, vOffset - pageBounds.top);\n if (hOffset !== undefined && vOffset !== undefined) {\n this.horizontalOffset = offsetX;\n this.verticalOffset = offsetY;\n this.diagram.setOffset(offsetX, offsetY);\n }\n else {\n this.diagram.setOffset(-this.horizontalOffset - pageBounds.x, -this.verticalOffset - pageBounds.y);\n }\n this.transform = {\n tx: Math.max(this.horizontalOffset, -pageBounds.left) / this.currentZoom, ty: Math.max(this.verticalOffset, -pageBounds.top) / this.currentZoom,\n scale: this.currentZoom\n };\n };\n /** @private */\n DiagramScroller.prototype.setScrollOffset = function (hOffset, vOffset) {\n this.scrolled = false;\n var pageBounds = this.getPageBounds();\n pageBounds.x *= this.currentZoom;\n pageBounds.y *= this.currentZoom;\n pageBounds.width *= this.currentZoom;\n pageBounds.height *= this.currentZoom;\n var x = -pageBounds.left;\n var y = -pageBounds.top;\n var set = false;\n var viewWidth = this.viewPortWidth * this.currentZoom;\n var viewHeight = this.viewPortHeight * this.currentZoom;\n var newX = x - hOffset;\n if (newX !== this.horizontalOffset) {\n if (x < this.horizontalOffset) {\n if (this.horizontalOffset > newX) {\n this.horizontalOffset -= hOffset;\n }\n else {\n this.horizontalOffset = newX;\n }\n set = true;\n }\n var right = Math.max(pageBounds.right + this.vScrollSize, viewWidth);\n if (!set && right < -newX + this.viewPortWidth) {\n var actualRight = -newX + viewWidth - this.vScrollSize;\n var currentRight = -this.horizontalOffset + viewWidth - this.vScrollSize;\n if (actualRight < currentRight) {\n //define\n this.horizontalOffset = newX;\n }\n else {\n if (actualRight - pageBounds.right > actualRight - currentRight) {\n this.horizontalOffset = newX;\n }\n else {\n this.horizontalOffset = -(pageBounds.right + this.vScrollSize - viewWidth);\n }\n }\n set = true;\n }\n if (!set) {\n this.horizontalOffset = x - hOffset;\n }\n }\n set = false;\n //vertical offset\n var newY = y - vOffset;\n if (newY !== this.verticalOffset) {\n if (y < this.verticalOffset) {\n if (this.verticalOffset > newY) {\n this.verticalOffset -= vOffset;\n }\n else {\n this.verticalOffset = newY;\n }\n set = true;\n }\n var bottom = Math.max(pageBounds.bottom + this.hScrollSize, viewHeight);\n if (!set && bottom < -newY + viewHeight) {\n var actualBottom = -newY + viewHeight - this.hScrollSize;\n var currentBottom = -this.verticalOffset + viewHeight - this.hScrollSize;\n if (actualBottom < currentBottom) {\n //define\n this.verticalOffset = newY;\n }\n else {\n if (actualBottom - pageBounds.bottom > actualBottom - currentBottom) {\n this.verticalOffset = newY;\n }\n else {\n this.verticalOffset = -(pageBounds.bottom + this.hScrollSize - viewHeight);\n }\n }\n set = true;\n }\n if (!set) {\n this.verticalOffset = y - vOffset;\n }\n }\n this.transform = {\n tx: Math.max(this.horizontalOffset, -pageBounds.left) / this.currentZoom, ty: Math.max(this.verticalOffset, -pageBounds.top) / this.currentZoom,\n scale: this.currentZoom\n };\n this.setSize();\n if (this.scrolled) {\n this.diagram.endEdit();\n }\n };\n /** @private */\n DiagramScroller.prototype.setSize = function () {\n var pageBounds = this.getPageBounds();\n pageBounds.x *= this.currentZoom;\n pageBounds.y *= this.currentZoom;\n pageBounds.width *= this.currentZoom;\n pageBounds.height *= this.currentZoom;\n var x = Math.min(pageBounds.x, -this.horizontalOffset);\n var y = Math.min(pageBounds.y, -this.verticalOffset);\n var difX = -this.horizontalOffset + this.viewPortWidth - pageBounds.right;\n var difY = -this.verticalOffset + this.viewPortHeight - pageBounds.bottom;\n var hScrollSize = this.scrollerWidth;\n var vScrollSize = this.scrollerWidth;\n if (-this.verticalOffset <= pageBounds.y && -this.verticalOffset + this.viewPortHeight >= pageBounds.bottom) {\n vScrollSize = 0;\n }\n if (-this.horizontalOffset <= pageBounds.x && -this.horizontalOffset + this.viewPortWidth >= pageBounds.right) {\n hScrollSize = 0;\n }\n this.hScrollSize = hScrollSize;\n this.vScrollSize = vScrollSize;\n this.diagramWidth = Math.max(pageBounds.right, -this.horizontalOffset + this.viewPortWidth - vScrollSize) - x;\n this.diagramHeight = Math.max(pageBounds.bottom, -this.verticalOffset + this.viewPortHeight - hScrollSize) - y;\n this.diagram.setSize(this.diagramWidth, this.diagramHeight);\n this.diagram.element.style.overflow = 'hidden';\n };\n /** @private */\n DiagramScroller.prototype.setViewPortSize = function (width, height) {\n this.viewPortWidth = width;\n this.viewPortHeight = height;\n };\n /**\n * To get page pageBounds\n * @private\n */\n DiagramScroller.prototype.getPageBounds = function (boundingRect, region) {\n var rect = new Rect();\n var temp = 0;\n if (region !== 'Content' && this.diagram.pageSettings.width !== null && this.diagram.pageSettings.height !== null) {\n var width = this.diagram.pageSettings.width;\n var height = this.diagram.pageSettings.height;\n var negwidth = 0;\n var negheight = 0;\n if (this.diagram.pageSettings.multiplePage) {\n rect = this.diagram.spatialSearch.getPageBounds(0, 0);\n if (rect.right > width) {\n var x = Math.ceil(rect.right / width);\n width = width * x;\n }\n if (rect.bottom > height) {\n var x = Math.ceil(rect.bottom / height);\n height = height * x;\n }\n if (rect.left < 0 && Math.abs(rect.left) > negwidth) {\n var x = Math.ceil(Math.abs(rect.left) / this.diagram.pageSettings.width);\n negwidth = this.diagram.pageSettings.width * x;\n }\n if (rect.top < 0 && Math.abs(rect.top) > negheight) {\n var x = Math.ceil(Math.abs(rect.top) / this.diagram.pageSettings.height);\n negheight = this.diagram.pageSettings.height * x;\n }\n }\n return new Rect((-negwidth), (-negheight), width + negwidth, height + negheight);\n }\n else {\n var origin = boundingRect ? undefined : 0;\n return this.diagram.spatialSearch.getPageBounds(origin, origin);\n }\n };\n /**\n * To get page break when PageBreak is set as true\n * @private\n */\n DiagramScroller.prototype.getPageBreak = function (pageBounds) {\n var i = 0;\n var j = 0;\n var v = -1;\n var collection = [];\n var x1 = 0;\n var x2 = 0;\n var y1 = 0;\n var y2 = 0;\n var left = this.diagram.pageSettings.margin.left;\n var right = this.diagram.pageSettings.margin.right;\n var top = this.diagram.pageSettings.margin.top;\n var bottom = this.diagram.pageSettings.margin.bottom;\n var widthCount = 1;\n var heightCount = 1;\n var segment = { x1: x1, y1: y1, x2: x2, y2: y2 };\n while (pageBounds.width > i) {\n i = i + (this.diagram.pageSettings.width ? this.diagram.pageSettings.width : pageBounds.width);\n if (i === this.diagram.pageSettings.width) {\n segment = {\n x1: pageBounds.left + left, y1: pageBounds.top + top,\n x2: pageBounds.left + left, y2: pageBounds.bottom - bottom\n };\n collection[++v] = segment;\n }\n if (i < pageBounds.width) {\n x1 = pageBounds.topLeft.x + this.diagram.pageSettings.width * widthCount;\n y1 = pageBounds.topLeft.y + top;\n x2 = pageBounds.bottomLeft.x + this.diagram.pageSettings.width * widthCount;\n y2 = pageBounds.bottomLeft.y - bottom;\n segment = { x1: x1, y1: y1, x2: x2, y2: y2 };\n collection[++v] = segment;\n widthCount++;\n }\n if (pageBounds.width === i) {\n segment = {\n x1: pageBounds.right - right, y1: pageBounds.top + top,\n x2: pageBounds.right - right, y2: pageBounds.bottom - bottom\n };\n collection[++v] = segment;\n }\n }\n while (pageBounds.height > j) {\n j = j + (this.diagram.pageSettings.height ? this.diagram.pageSettings.height : pageBounds.height);\n if (j === this.diagram.pageSettings.height) {\n segment = {\n x1: pageBounds.left + left, y1: pageBounds.top + top,\n x2: pageBounds.right - right, y2: pageBounds.top + top\n };\n collection[++v] = segment;\n }\n if (j < pageBounds.height) {\n x1 = pageBounds.topLeft.x + left;\n y1 = pageBounds.topLeft.y + this.diagram.pageSettings.height * heightCount;\n x2 = pageBounds.topRight.x - right;\n y2 = pageBounds.topRight.y + this.diagram.pageSettings.height * heightCount;\n segment = { x1: x1, y1: y1, x2: x2, y2: y2 };\n collection[++v] = segment;\n heightCount++;\n }\n if (pageBounds.height === j) {\n segment = {\n x1: pageBounds.left + left, y1: pageBounds.bottom - bottom,\n x2: pageBounds.right - right, y2: pageBounds.bottom - bottom\n };\n collection[++v] = segment;\n }\n }\n return collection;\n };\n /** @private */\n DiagramScroller.prototype.zoom = function (factor, deltaX, deltaY, focusPoint) {\n if (canZoom(this.diagram) && factor !== 1 || (canPan(this.diagram) && factor === 1)) {\n var matrix = identityMatrix();\n scaleMatrix(matrix, this.currentZoom, this.currentZoom);\n translateMatrix(matrix, this.horizontalOffset, this.verticalOffset);\n focusPoint = focusPoint || { x: this.viewPortWidth / 2, y: this.viewPortHeight / 2 };\n focusPoint = transformPointByMatrix(matrix, focusPoint);\n if ((this.currentZoom * factor) >= this.diagram.scrollSettings.minZoom &&\n (this.currentZoom * factor) <= this.diagram.scrollSettings.maxZoom) {\n this.currentZoom *= factor;\n var pageBounds = this.getPageBounds();\n pageBounds.x *= this.currentZoom;\n pageBounds.y *= this.currentZoom;\n //target Matrix\n var targetMatrix = identityMatrix();\n scaleMatrix(targetMatrix, factor, factor, focusPoint.x, focusPoint.y);\n translateMatrix(targetMatrix, deltaX || 0, deltaY || 0);\n multiplyMatrix(matrix, targetMatrix);\n var newOffset = transformPointByMatrix(matrix, { x: 0, y: 0 });\n if (factor === 1) {\n newOffset = this.applyScrollLimit(newOffset.x, newOffset.y);\n }\n this.transform = {\n tx: Math.max(newOffset.x, -pageBounds.left) / this.currentZoom,\n ty: Math.max(newOffset.y, -pageBounds.top) / this.currentZoom,\n scale: this.currentZoom\n };\n this.horizontalOffset = newOffset.x;\n this.verticalOffset = newOffset.y;\n this.setSize();\n if (this.diagram.mode !== 'SVG') {\n this.diagram.refreshDiagramLayer();\n }\n this.diagram.setOffset(-this.horizontalOffset - pageBounds.x, -this.verticalOffset - pageBounds.y);\n updateRuler(this.diagram);\n }\n }\n };\n /** @private */\n DiagramScroller.prototype.fitToPage = function (options) {\n options = options || {};\n var mode = options.mode;\n var region = options.region;\n var margin = options.margin || {};\n var canZoomIn = options.canZoomIn;\n var customBounds = options.customBounds;\n margin.bottom = margin.bottom || 25;\n margin.top = margin.top || 25;\n margin.left = margin.left || 25;\n margin.right = margin.right || 25;\n var bounds = customBounds;\n var factor;\n var deltaX = -this.horizontalOffset;\n var deltaY = -this.verticalOffset;\n region = region ? region : 'PageSettings';\n //fit mode\n if ((region === 'PageSettings' && this.diagram.pageSettings.width && this.diagram.pageSettings.height)\n || (this.diagram.nodes.length > 0 || this.diagram.connectors.length > 0)) {\n mode = mode ? mode : 'Page';\n if (region !== 'CustomBounds') {\n bounds = this.getPageBounds(true, region);\n }\n var scale = { x: 0, y: 0 };\n scale.x = (this.viewPortWidth - (margin.left + margin.right)) / (bounds.width);\n scale.y = (this.viewPortHeight - (margin.top + margin.bottom)) / (bounds.height);\n if (!canZoomIn && ((bounds.width - this.horizontalOffset) < this.viewPortWidth) &&\n (bounds.height - this.verticalOffset) < this.viewPortHeight) {\n scale.x = Math.min(1, scale.x);\n scale.y = Math.min(1, scale.y);\n }\n var zoomFactor = void 0;\n var centerX = void 0;\n var centerY = void 0;\n switch (mode) {\n case 'Width':\n zoomFactor = scale.x;\n factor = zoomFactor / this.currentZoom;\n centerX = (this.viewPortWidth - (bounds.width) * zoomFactor) / 2 - bounds.x * zoomFactor;\n deltaX += centerX + (margin.left - margin.right) / 2 * zoomFactor;\n deltaY -= -this.verticalOffset * factor;\n deltaY = region !== 'CustomBounds' ? deltaY : deltaY - this.verticalOffset * factor;\n break;\n case 'Height':\n zoomFactor = scale.y;\n factor = (zoomFactor / this.currentZoom);\n centerX = ((this.viewPortWidth - (bounds.width) * zoomFactor) / 2) - bounds.x * zoomFactor;\n centerY = ((this.viewPortHeight - (bounds.height) * zoomFactor) / 2) - bounds.y * zoomFactor;\n deltaX += centerX + (margin.left - margin.right) / 2 * zoomFactor;\n deltaY += centerY + (margin.top - margin.bottom) / 2 * zoomFactor;\n break;\n case 'Page':\n zoomFactor = Math.min(scale.x, scale.y);\n factor = (zoomFactor / this.currentZoom);\n centerX = (this.viewPortWidth - (bounds.width) * zoomFactor) / 2 - bounds.x * zoomFactor;\n centerY = (this.viewPortHeight - (bounds.height) * zoomFactor) / 2 - bounds.y * zoomFactor;\n deltaX += centerX + (margin.left - margin.right) / 2 * zoomFactor;\n deltaY += centerY + (margin.top - margin.bottom) / 2 * zoomFactor;\n break;\n }\n this.zoom(factor, deltaX, deltaY, { x: 0, y: 0 });\n }\n else {\n factor = 1 / this.currentZoom;\n this.zoom(factor, deltaX, deltaY, { x: 0, y: 0 });\n }\n };\n /** @private */\n DiagramScroller.prototype.bringIntoView = function (rect) {\n var x = 0;\n var y = 0;\n var scale = this.currentZoom;\n var bounds = rect;\n var hoffset = -this.horizontalOffset;\n var voffset = -this.verticalOffset;\n bounds = new Rect(bounds.x * scale, bounds.y * scale, bounds.width * scale, bounds.height * scale);\n var view = new Rect(hoffset, voffset, this.viewPortWidth, this.viewPortHeight);\n if (!(view.containsRect(bounds))) {\n if (bounds.right > (-hoffset + this.viewPortWidth)) {\n x = bounds.right - this.viewPortWidth;\n }\n if (bounds.x < -hoffset) {\n x = bounds.x;\n }\n if (bounds.bottom > (-voffset + this.viewPortHeight)) {\n y = bounds.bottom - this.viewPortHeight;\n }\n if (bounds.y < -voffset) {\n y = bounds.y;\n }\n this.zoom(1, -this.horizontalOffset - x, -this.verticalOffset - y, null);\n }\n };\n /** @private */\n DiagramScroller.prototype.bringToCenter = function (bounds) {\n var scale = this.currentZoom;\n var actualbounds = new Rect(bounds.x * scale, bounds.y * scale, bounds.width * scale, bounds.height * scale);\n var hoffset = actualbounds.x + actualbounds.width / 2 - this.viewPortWidth / 2;\n var voffset = actualbounds.y + actualbounds.height / 2 - this.viewPortHeight / 2;\n this.zoom(1, -this.horizontalOffset - hoffset, -this.verticalOffset - voffset, null);\n };\n DiagramScroller.prototype.applyScrollLimit = function (hOffset, vOffset) {\n if (this.diagram.scrollSettings.scrollLimit !== 'Infinity') {\n var bounds = void 0;\n if (this.diagram.scrollSettings.scrollLimit === 'Limited') {\n bounds = this.diagram.scrollSettings.scrollableArea;\n }\n bounds = bounds || this.getPageBounds(true);\n bounds.x *= this.currentZoom;\n bounds.y *= this.currentZoom;\n bounds.width *= this.currentZoom;\n bounds.height *= this.currentZoom;\n hOffset *= -1;\n vOffset *= -1;\n var allowedRight = Math.max(bounds.right, this.viewPortWidth);\n if (!(hOffset <= bounds.x && (hOffset + this.viewPortWidth >= bounds.right ||\n hOffset >= bounds.right - this.viewPortWidth)\n || hOffset >= bounds.x && (hOffset + this.viewPortWidth <= allowedRight))) {\n //not allowed case\n if (hOffset >= bounds.x) {\n hOffset = Math.max(bounds.x, Math.min(hOffset, hOffset - (hOffset + this.viewPortWidth - this.vScrollSize - allowedRight)));\n }\n else {\n var allowed = bounds.right - this.viewPortWidth;\n hOffset = Math.min(allowed, bounds.x);\n }\n }\n var allowedBottom = Math.max(bounds.bottom, this.viewPortHeight);\n if (!(vOffset <= bounds.y && vOffset + this.viewPortHeight >= bounds.bottom\n || vOffset >= bounds.y && vOffset + this.viewPortHeight <= allowedBottom)) {\n //not allowed case\n if (vOffset >= bounds.y) {\n vOffset = Math.max(bounds.y, Math.min(vOffset, vOffset - (vOffset + this.viewPortHeight - this.hScrollSize - allowedBottom)));\n }\n else {\n var allowed = bounds.bottom - this.viewPortHeight;\n vOffset = Math.min(bounds.y, allowed);\n }\n }\n hOffset *= -1;\n vOffset *= -1;\n }\n return { x: hOffset, y: vOffset };\n };\n return DiagramScroller;\n}());\nexport { DiagramScroller };\n","/**\n * Quad helps to maintain a set of objects that are contained within the particular region\n */\n/** @private */\nvar Quad = /** @class */ (function () {\n /** @private */\n function Quad(left, top, width, height, spatialSearching) {\n this.objects = [];\n this.left = left;\n this.top = top;\n this.width = width;\n this.height = height;\n this.spatialSearch = spatialSearching;\n }\n /** @private */\n Quad.prototype.findQuads = function (currentViewPort, quads) {\n if (this.first != null && this.first.isIntersect(currentViewPort)) {\n this.first.findQuads(currentViewPort, quads);\n }\n if (this.second != null && this.second.isIntersect(currentViewPort)) {\n this.second.findQuads(currentViewPort, quads);\n }\n if (this.third != null && this.third.isIntersect(currentViewPort)) {\n this.third.findQuads(currentViewPort, quads);\n }\n if (this.fourth != null && this.fourth.isIntersect(currentViewPort)) {\n this.fourth.findQuads(currentViewPort, quads);\n }\n if (this.objects.length > 0) {\n quads.push(this);\n }\n };\n Quad.prototype.isIntersect = function (t) {\n if (this.left + this.width < t.left || this.top + this.height < t.top || this.left > t.right || this.top > t.bottom) {\n return false;\n }\n return true;\n };\n /** @private */\n Quad.prototype.selectQuad = function () {\n var target = null;\n var current = this;\n var quadSet;\n while (current != null) {\n quadSet = current.getQuad(target);\n current = quadSet.source;\n target = quadSet.target || target;\n }\n return target;\n };\n Quad.prototype.getQuad = function (target) {\n target = null;\n var halfWidth = this.width / 2;\n var halfHeight = this.height / 2;\n if (halfWidth >= 1000 && halfHeight >= 1000) {\n var xCenter = this.left + halfWidth;\n var yCenter = this.top + halfHeight;\n if (this.spatialSearch.childRight <= xCenter) {\n if (this.spatialSearch.childBottom <= yCenter) {\n if (!this.first) {\n var newQuad = new Quad(this.left, this.top, halfWidth, halfHeight, this.spatialSearch);\n newQuad.parent = this;\n this.first = newQuad;\n }\n return { source: this.first };\n }\n if (this.spatialSearch.childTop >= yCenter) {\n if (!this.third) {\n var newQuad = new Quad(this.left, yCenter, halfWidth, halfHeight, this.spatialSearch);\n newQuad.parent = this;\n this.third = newQuad;\n }\n return { source: this.third };\n }\n }\n else if (this.spatialSearch.childLeft >= xCenter) {\n if (this.spatialSearch.childBottom <= yCenter) {\n if (!this.second) {\n var newQuad = new Quad(xCenter, this.top, halfWidth, halfHeight, this.spatialSearch);\n newQuad.parent = this;\n this.second = newQuad;\n }\n return { source: this.second };\n }\n if (this.spatialSearch.childTop >= yCenter) {\n if (!this.fourth) {\n var newQuad = new Quad(xCenter, yCenter, halfWidth, halfHeight, this.spatialSearch);\n newQuad.parent = this;\n this.fourth = newQuad;\n }\n return { source: this.fourth };\n }\n }\n }\n target = this;\n this.objects.push(this.spatialSearch.childNode);\n return { target: this };\n };\n /** @private */\n Quad.prototype.isContained = function () {\n if (this.spatialSearch.childLeft >= this.left && this.spatialSearch.childRight <= this.left + this.width &&\n this.spatialSearch.childTop >= this.top && this.spatialSearch.childBottom <= this.top + this.height) {\n return true;\n }\n return false;\n };\n /** @private */\n Quad.prototype.addIntoAQuad = function (node) {\n var quadAddition = {};\n this.spatialSearch.setCurrentNode(node);\n var quad = null;\n while (!quadAddition.isAdded) {\n quadAddition = this.spatialSearch.parentQuad.add(quad);\n quad = quadAddition.quad;\n }\n return quad;\n };\n Quad.prototype.add = function (quad) {\n quad = null;\n if (this.isContained()) {\n quad = this.selectQuad();\n return { isAdded: true, quad: quad };\n }\n else {\n var newParent = void 0;\n var isempty = this.objects.length === 0 && !this.first && !this.second && !this.third &&\n !this.fourth;\n var newWidth = this.width * 2;\n var newHeight = this.height * 2;\n if (this.spatialSearch.childLeft < this.left) {\n if (this.spatialSearch.childTop < this.top) {\n newParent = new Quad(this.left - this.width, this.top - this.height, newWidth, newHeight, this.spatialSearch);\n if (!isempty) {\n newParent.fourth = this;\n }\n }\n else {\n newParent = new Quad(this.left - this.width, this.top, newWidth, newHeight, this.spatialSearch);\n if (!isempty) {\n newParent.second = this;\n }\n }\n }\n else if (this.spatialSearch.childTop < this.top) {\n newParent = new Quad(this.left, this.top - this.height, newWidth, newHeight, this.spatialSearch);\n if (!isempty) {\n newParent.third = this;\n }\n }\n else {\n newParent = new Quad(this.left, this.top, newWidth, newHeight, this.spatialSearch);\n if (!isempty) {\n newParent.first = this;\n }\n }\n this.parent = newParent;\n this.spatialSearch.parentQuad = newParent;\n return { isAdded: false, quad: quad };\n //newParent.AddIntoaQuad(node);\n }\n };\n return Quad;\n}());\nexport { Quad };\n","import { Rect } from '../../primitives/rect';\nimport { Quad } from './quad';\n/**\n * Spatial search module helps to effectively find the objects over diagram\n */\nvar SpatialSearch = /** @class */ (function () {\n /** @private */\n function SpatialSearch(objectTable) {\n this.quadSize = 500;\n this.objectTable = objectTable;\n this.parentQuad = new Quad(0, 0, this.quadSize * 2, this.quadSize * 2, this);\n this.pageLeft = Number.MAX_VALUE;\n this.pageRight = -Number.MAX_VALUE;\n this.pageTop = Number.MAX_VALUE;\n this.pageBottom = -Number.MAX_VALUE;\n this.quadTable = {};\n }\n /** @private */\n SpatialSearch.prototype.removeFromAQuad = function (node) {\n if (this.quadTable[node.id]) {\n var quad = this.quadTable[node.id];\n var index = quad.objects.indexOf(node);\n if (index !== -1) {\n quad.objects.splice(index, 1);\n this.update(quad);\n delete this.quadTable[node.id];\n }\n }\n };\n SpatialSearch.prototype.update = function (quad) {\n if (quad.parent && quad.objects.length === 0 && quad.first && quad.second && quad.third && quad.fourth) {\n var parent_1 = quad.parent;\n if (parent_1.first === quad) {\n parent_1.first = null;\n }\n else if (parent_1.second === quad) {\n parent_1.second = null;\n }\n else if (parent_1.third === quad) {\n parent_1.third = null;\n }\n else if (parent_1.fourth === quad) {\n parent_1.fourth = null;\n }\n this.update(quad.parent);\n }\n else {\n if (quad === this.parentQuad && !quad.first && !quad.second && !quad.third && !quad.fourth) {\n quad.left = 0;\n quad.width = 1000;\n quad.top = 0;\n quad.height = 1000;\n }\n return;\n }\n };\n SpatialSearch.prototype.addIntoAQuad = function (node) {\n var quad = this.parentQuad.addIntoAQuad(node);\n this.quadTable[node.id] = quad;\n };\n SpatialSearch.prototype.updateQuad = function (node) {\n this.setCurrentNode(node);\n var nodBounds = node.outerBounds;\n if (!(!isNaN(nodBounds.x) && !isNaN(nodBounds.y) &&\n !isNaN(nodBounds.width) && !isNaN(nodBounds.height))) {\n return false;\n }\n //nodBounds = new Rect(nodBounds.X.Valid(), nodBounds.Y.Valid(), nodBounds.Width.Valid(), nodBounds.Height.Valid());\n if (this.quadTable[node.id]) {\n var quad = this.quadTable[node.id];\n if (!quad.isContained()) {\n this.removeFromAQuad(node);\n this.addIntoAQuad(node);\n }\n }\n else {\n this.addIntoAQuad(node);\n }\n if (this.isWithinPageBounds(nodBounds) &&\n this.leftElement !== node &&\n this.topElement !== node &&\n this.rightElement !== node &&\n this.bottomElement !== node) {\n //contained - no change\n }\n else {\n var modified = false;\n if (this.pageLeft !== this.childLeft || node !== this.leftElement) {\n if (this.pageLeft >= this.childLeft) {\n this.pageLeft = this.childLeft;\n this.leftElement = node;\n modified = true;\n }\n else if (node === this.leftElement) {\n this.pageLeft = Number.MAX_VALUE;\n this.findLeft(this.parentQuad);\n modified = true;\n }\n }\n if (this.pageTop !== this.childTop || node !== this.topElement) {\n if (this.pageTop >= this.childTop) {\n this.pageTop = this.childTop;\n this.topElement = node;\n modified = true;\n }\n else if (node === this.topElement) {\n this.pageTop = Number.MAX_VALUE;\n this.findTop(this.parentQuad);\n modified = true;\n }\n }\n if (this.pageBottom !== this.childBottom || node !== this.bottomElement) {\n if (this.pageBottom <= this.childBottom) {\n modified = true;\n this.pageBottom = this.childBottom;\n this.bottomElement = node;\n }\n else if (node === this.bottomElement) {\n this.pageBottom = -Number.MAX_VALUE;\n this.findBottom(this.parentQuad);\n modified = true;\n }\n }\n if (this.pageRight !== this.childRight || node !== this.rightElement) {\n if (this.pageRight <= this.childRight) {\n this.pageRight = this.childRight;\n this.rightElement = node;\n modified = true;\n }\n else if (node === this.rightElement) {\n this.pageRight = -Number.MAX_VALUE;\n this.findRight(this.parentQuad);\n modified = true;\n }\n }\n return modified;\n }\n this.setCurrentNode(null);\n return false;\n };\n SpatialSearch.prototype.isWithinPageBounds = function (node) {\n if (node.left >= this.pageLeft && node.right <= this.pageRight && node.top >= this.pageTop\n && node.bottom <= this.pageBottom) {\n return true;\n }\n else {\n return false;\n }\n };\n /** @private */\n SpatialSearch.prototype.findQuads = function (region) {\n var quads = [];\n this.parentQuad.findQuads(region, quads);\n return quads;\n };\n /** @private */\n SpatialSearch.prototype.findObjects = function (region) {\n var quads = this.findQuads(region);\n var objects = [];\n for (var _i = 0, quads_1 = quads; _i < quads_1.length; _i++) {\n var quad = quads_1[_i];\n for (var _a = 0, _b = quad.objects; _a < _b.length; _a++) {\n var obj = _b[_a];\n if (obj.outerBounds.intersects(region)) {\n objects.push(this.objectTable[obj.id]);\n }\n }\n }\n return objects;\n };\n /** @private */\n SpatialSearch.prototype.updateBounds = function (node) {\n var modified = false;\n if (node === this.topElement) {\n this.pageTop = Number.MAX_VALUE;\n this.topElement = null;\n this.findTop(this.parentQuad);\n modified = true;\n }\n if (node === this.leftElement) {\n this.pageLeft = Number.MAX_VALUE;\n this.leftElement = null;\n this.findLeft(this.parentQuad);\n modified = true;\n }\n if (node === this.rightElement) {\n this.pageRight = -Number.MAX_VALUE;\n this.rightElement = null;\n this.findRight(this.parentQuad);\n modified = true;\n }\n if (node === this.bottomElement) {\n this.pageBottom = -Number.MAX_VALUE;\n this.bottomElement = null;\n this.findBottom(this.parentQuad);\n modified = true;\n }\n return modified;\n };\n SpatialSearch.prototype.findBottom = function (quad) {\n //if (quad.Quads.Count === 4)\n {\n if (quad.third || quad.fourth) {\n if (quad.third) {\n this.findBottom(quad.third);\n }\n if (quad.fourth) {\n this.findBottom(quad.fourth);\n }\n }\n else {\n if (quad.second) {\n this.findBottom(quad.second);\n }\n if (quad.first) {\n this.findBottom(quad.first);\n }\n }\n }\n for (var _i = 0, _a = quad.objects; _i < _a.length; _i++) {\n var node = _a[_i];\n if (this.pageBottom <= node.outerBounds.bottom) {\n this.pageBottom = node.outerBounds.bottom;\n this.bottomElement = node;\n }\n }\n };\n SpatialSearch.prototype.findRight = function (quad) {\n //if (quad.Quads.Count === 4)\n {\n if (quad.second || quad.fourth) {\n if (quad.second) {\n this.findRight(quad.second);\n }\n if (quad.fourth) {\n this.findRight(quad.fourth);\n }\n }\n else {\n if (quad.first) {\n this.findRight(quad.first);\n }\n if (quad.third) {\n this.findRight(quad.third);\n }\n }\n }\n for (var _i = 0, _a = quad.objects; _i < _a.length; _i++) {\n var node = _a[_i];\n if (this.pageRight <= node.outerBounds.right) {\n this.pageRight = node.outerBounds.right;\n this.rightElement = node;\n }\n }\n };\n SpatialSearch.prototype.findLeft = function (quad) {\n //if (quad.Quads.Count === 4)\n {\n if (quad.first || quad.third) {\n if (quad.first) {\n this.findLeft(quad.first);\n }\n if (quad.third) {\n this.findLeft(quad.third);\n }\n }\n else {\n if (quad.second) {\n this.findLeft(quad.second);\n }\n if (quad.fourth) {\n this.findLeft(quad.fourth);\n }\n }\n }\n for (var _i = 0, _a = quad.objects; _i < _a.length; _i++) {\n var node = _a[_i];\n if (this.pageLeft >= node.outerBounds.left) {\n this.pageLeft = node.outerBounds.left;\n this.leftElement = node;\n }\n }\n };\n SpatialSearch.prototype.findTop = function (quad) {\n //if (quad.Quads.Count === 4)\n {\n if (quad.first || quad.second) {\n if (quad.first) {\n this.findTop(quad.first);\n }\n if (quad.second) {\n this.findTop(quad.second);\n }\n }\n else {\n if (quad.third) {\n this.findTop(quad.third);\n }\n if (quad.fourth) {\n this.findTop(quad.fourth);\n }\n }\n }\n for (var _i = 0, _a = quad.objects; _i < _a.length; _i++) {\n var node = _a[_i];\n if (this.pageTop >= node.outerBounds.top) {\n this.pageTop = node.outerBounds.top;\n this.topElement = node;\n }\n }\n };\n /** @private */\n SpatialSearch.prototype.setCurrentNode = function (node) {\n this.childNode = node;\n if (node) {\n var r = node.outerBounds;\n this.childLeft = Number(r.left);\n this.childTop = Number(r.top);\n this.childRight = Number(r.right);\n this.childBottom = Number(r.bottom);\n }\n else {\n this.childLeft = Number.MAX_VALUE;\n this.childTop = Number.MAX_VALUE;\n this.childRight = -Number.MAX_VALUE;\n this.childBottom = -Number.MAX_VALUE;\n }\n };\n /** @private */\n SpatialSearch.prototype.getPageBounds = function (originX, originY) {\n if (this.pageLeft === Number.MAX_VALUE) {\n return new Rect(0, 0, 0, 0);\n }\n var left = originX !== undefined ? Math.min(this.pageLeft, 0) : this.pageLeft;\n var top = originY !== undefined ? Math.min(this.pageTop, 0) : this.pageTop;\n return new Rect(Math.round(left), Math.round(top), Math.round(this.pageRight - left), Math.round(this.pageBottom - top));\n };\n /** @private */\n SpatialSearch.prototype.getQuad = function (node) {\n return this.quadTable[node.id];\n };\n return SpatialSearch;\n}());\nexport { SpatialSearch };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, Complex, ChildProperty, Collection } from '@syncfusion/ej2-base';\n/**\n * Defines keyboard commands\n */\nvar KeyGesture = /** @class */ (function (_super) {\n __extends(KeyGesture, _super);\n function KeyGesture() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property()\n ], KeyGesture.prototype, \"key\", void 0);\n __decorate([\n Property()\n ], KeyGesture.prototype, \"keyModifiers\", void 0);\n return KeyGesture;\n}(ChildProperty));\nexport { KeyGesture };\nvar Command = /** @class */ (function (_super) {\n __extends(Command, _super);\n function Command() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], Command.prototype, \"name\", void 0);\n __decorate([\n Property()\n ], Command.prototype, \"canExecute\", void 0);\n __decorate([\n Property()\n ], Command.prototype, \"execute\", void 0);\n __decorate([\n Complex({}, KeyGesture)\n ], Command.prototype, \"gesture\", void 0);\n __decorate([\n Property('')\n ], Command.prototype, \"parameter\", void 0);\n return Command;\n}(ChildProperty));\nexport { Command };\nvar CommandManager = /** @class */ (function (_super) {\n __extends(CommandManager, _super);\n function CommandManager() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Collection([], Command)\n ], CommandManager.prototype, \"commands\", void 0);\n return CommandManager;\n}(ChildProperty));\nexport { CommandManager };\n/**\n * Defines the behavior of the context menu items\n */\nvar ContextMenuSettings = /** @class */ (function (_super) {\n __extends(ContextMenuSettings, _super);\n function ContextMenuSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property()\n ], ContextMenuSettings.prototype, \"show\", void 0);\n __decorate([\n Property()\n ], ContextMenuSettings.prototype, \"showCustomMenuOnly\", void 0);\n __decorate([\n Property()\n ], ContextMenuSettings.prototype, \"items\", void 0);\n return ContextMenuSettings;\n}(ChildProperty));\nexport { ContextMenuSettings };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, Property, Complex, Collection, EventHandler, L10n, Droppable, remove } from '@syncfusion/ej2-base';\nimport { Browser, Event } from '@syncfusion/ej2-base';\nimport { CanvasRenderer } from './rendering/canvas-renderer';\nimport { SvgRenderer } from './rendering/svg-renderer';\nimport { DiagramRenderer } from './rendering/renderer';\nimport { PageSettings, ScrollSettings } from './diagram/page-settings';\nimport { ServiceLocator } from './objects/service';\nimport { Container } from './core/containers/container';\nimport { Node, BpmnShape } from './objects/node';\nimport { Connector } from './objects/connector';\nimport { SnapSettings } from './diagram/grid-lines';\nimport { RulerSettings } from './diagram/ruler-settings';\nimport { removeRulerElements, updateRuler, getRulerSize } from './ruler/ruler';\nimport { renderRuler, renderOverlapElement } from './ruler/ruler';\nimport { Size } from './primitives/size';\nimport { Keys, KeyModifiers, DiagramTools } from './enum/enum';\nimport { DiagramConstraints, SelectorConstraints, PortVisibility, DiagramEvent } from './enum/enum';\nimport { DiagramAction, ThumbsConstraints } from './enum/enum';\nimport { PathElement } from './core/elements/path-element';\nimport { TextElement } from './core/elements/text-element';\nimport { updateStyle, removeItem, updateConnector, updateShape } from './utility/diagram-util';\nimport { checkPortRestriction, serialize, deserialize, updateHyperlink, getObjectType } from './utility/diagram-util';\nimport { Rect } from './primitives/rect';\nimport { getPortShape } from './objects/dictionary/common';\nimport { ShapeAnnotation, PathAnnotation } from './objects/annotation';\nimport { Canvas } from './core/containers/canvas';\nimport { DataSource } from './diagram/data-source';\nimport { Layout } from './layout/layout-base';\nimport { Selector } from './interaction/selector';\nimport { DiagramEventHandler } from './interaction/event-handlers';\nimport { CommandHandler } from './interaction/command-manager';\nimport { DiagramScroller } from './interaction/scroller';\nimport { isSelected } from './interaction/actions';\nimport { SpatialSearch } from './interaction/spatial-search/spatial-search';\nimport { setAttributeSvg, setAttributeHtml, measureHtmlText, removeElement, createMeasureElements } from './utility/dom-util';\nimport { getDiagramElement, getScrollerWidth, getHTMLLayer } from './utility/dom-util';\nimport { getBackgroundLayer, createHtmlElement, createSvgElement, getNativeLayerSvg } from './utility/dom-util';\nimport { getPortLayerSvg, getDiagramLayerSvg } from './utility/dom-util';\nimport { getAdornerLayerSvg, getSelectorElement, getGridLayerSvg, getBackgroundLayerSvg } from './utility/dom-util';\nimport { CommandManager, ContextMenuSettings } from './diagram/keyboard-commands';\nimport { canDelete, canInConnect, canOutConnect, canRotate, canResize, canSingleSelect, canZoomPan } from './utility/constraints-util';\nimport { canDragSourceEnd, canDragTargetEnd, canDragSegmentThumb, enableReadOnly, canMove } from './utility/constraints-util';\nimport { findAnnotation } from './utility/diagram-util';\nimport { randomId, cloneObject, extendObject, getFunction, getBounds } from './utility/base-util';\nimport { DiagramTooltip, initTooltip } from './objects/tooltip';\nimport { PointPort } from './objects/port';\nimport { canShadow } from './utility/constraints-util';\nimport { Layer } from './diagram/layer';\nimport { DiagramNativeElement } from './core/elements/native-element';\nimport { DiagramHtmlElement } from './core/elements/html-element';\n/**\n * Diagram control\n * ```\n *
\n * \n * ```\n */\nvar Diagram = /** @class */ (function (_super) {\n __extends(Diagram, _super);\n /**\n * Constructor for creating the widget\n */\n function Diagram(options, element) {\n var _this = _super.call(this, options, element) || this;\n /** @private */\n _this.connectorTable = {};\n /** @private */\n _this.groupTable = {};\n /** @private */\n _this.activeLabel = { id: '', parentId: '', isGroup: false };\n _this.renderTimer = null;\n return _this;\n }\n Diagram.prototype.clearCollection = function (isConnector) {\n var collection = [];\n var obj;\n for (var _i = 0, _a = Object.keys(this.nameTable); _i < _a.length; _i++) {\n var key = _a[_i];\n obj = this.nameTable[key];\n if (obj && ((isConnector && obj instanceof Connector) || (!isConnector && obj instanceof Node))) {\n collection.push(obj);\n }\n }\n this.clearObjects(collection);\n };\n /**\n * Updates the diagram control when the objects are changed\n * @param newProp Lists the new values of the changed properties\n * @param oldProp Lists the old values of the changed properties\n */\n /* tslint:disable */\n Diagram.prototype.onPropertyChanged = function (newProp, oldProp) {\n // Model Changed\n var objectArray = [];\n var refreshLayout = false;\n var refereshColelction = false;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'width':\n case 'height':\n this.element.style.width = this.getSizeValue(this.width);\n this.element.style.height = this.getSizeValue(this.height);\n this.eventHandler.updateViewPortSize(this.element);\n for (var _b = 0, _c = this.views; _b < _c.length; _b++) {\n var view = _c[_b];\n var temp = this.views[view];\n if (!(temp instanceof Diagram)) {\n temp.updateView(temp);\n }\n }\n break;\n case 'nodes':\n if (newProp.nodes.length > 0 && oldProp.nodes.length === 0) {\n this.clearCollection();\n refereshColelction = true;\n }\n else {\n for (var _d = 0, _e = Object.keys(newProp.nodes); _d < _e.length; _d++) {\n var key = _e[_d];\n var index = Number(key);\n var actualObject = this.nodes[index];\n var changedProp = newProp.nodes[index];\n refreshLayout = refreshLayout || changedProp.excludeFromLayout !== undefined;\n this.nodePropertyChange(actualObject, oldProp.nodes[index], changedProp);\n objectArray.push(actualObject);\n }\n if (this.mode === 'Canvas') {\n this.refreshDiagramLayer();\n }\n }\n break;\n case 'connectors':\n var oldObject = void 0;\n if (newProp.connectors.length > 0 && oldProp.connectors.length === 0) {\n this.clearCollection(true);\n refereshColelction = true;\n }\n else {\n for (var _f = 0, _g = Object.keys(newProp.connectors); _f < _g.length; _f++) {\n var key = _g[_f];\n var index = Number(key);\n var actualObject = this.connectors[index];\n var changedProp = newProp.connectors[index];\n this.connectorPropertyChange(actualObject, oldProp.connectors[index], changedProp, true);\n objectArray.push(actualObject);\n }\n this.updateBridging();\n if (this.mode === 'Canvas') {\n this.refreshDiagramLayer();\n }\n }\n break;\n case 'bridgeDirection':\n this.updateBridging();\n if (this.mode === 'Canvas') {\n this.refreshDiagramLayer();\n }\n break;\n case 'backgroundColor':\n this.intOffPageBackground();\n break;\n case 'pageSettings':\n this.validatePageSize();\n this.updatePage();\n break;\n case 'selectedItems':\n if (newProp.selectedItems.userHandles && this.selectedItems.wrapper && this.selectedItems.userHandles) {\n if (this.selectedItems.userHandles.length > 0) {\n this.renderSelector(true);\n break;\n }\n }\n if (newProp.selectedItems.constraints) {\n this.renderSelector(true);\n break;\n }\n break;\n case 'snapSettings':\n this.updateSnapSettings(newProp);\n break;\n case 'commandManager':\n this.initCommands();\n break;\n case 'layout':\n refreshLayout = true;\n break;\n case 'dataSourceSettings':\n this.clear();\n this.initObjects();\n refreshLayout = true;\n break;\n case 'tooltip':\n initTooltip(this);\n break;\n case 'rulerSettings':\n this.updateRulerSettings(newProp);\n break;\n case 'layers':\n this.updateLayer(newProp);\n break;\n case 'scrollSettings':\n this.updateScrollSettings(newProp);\n break;\n }\n }\n if (refreshLayout) {\n this.doLayout();\n }\n var args = { element: objectArray, cause: this.diagramActions, oldValue: oldProp, newValue: newProp };\n this.triggerEvent(DiagramEvent.propertyChange, args);\n if (!refereshColelction && (this.canLogChange()) && (this.modelChanged(newProp, oldProp))) {\n var entry = { type: 'PropertyChanged', undoObject: oldProp, redoObject: newProp, category: 'Internal' };\n this.addHistoryEntry(entry);\n }\n this.resetDiagramActions();\n if (refereshColelction) {\n this.initObjects(true);\n this.refreshDiagramLayer();\n }\n };\n /* tslint:enable */\n Diagram.prototype.updateSnapSettings = function (newProp) {\n if (newProp.snapSettings.constraints || newProp.snapSettings.horizontalGridlines ||\n newProp.snapSettings.verticalGridlines) {\n this.diagramRenderer.updateGrid(this.snapSettings, getGridLayerSvg(this.element.id), this.scroller.transform, this.rulerSettings, this.hRuler, this.vRuler);\n }\n };\n Diagram.prototype.updateRulerSettings = function (newProp) {\n if (newProp.rulerSettings.dynamicGrid !== undefined) {\n this.diagramRenderer.updateGrid(this.snapSettings, getGridLayerSvg(this.element.id), this.scroller.transform, this.rulerSettings, this.hRuler, this.vRuler);\n }\n if (newProp.rulerSettings.showRulers !== undefined) {\n this.intOffPageBackground();\n this.scroller.setSize();\n this.renderRulers();\n }\n else if (newProp.rulerSettings.horizontalRuler !== undefined ||\n newProp.rulerSettings.verticalRuler !== undefined) {\n if (newProp.rulerSettings.horizontalRuler.thickness !== undefined ||\n newProp.rulerSettings.verticalRuler.thickness !== undefined) {\n removeRulerElements(this);\n this.intOffPageBackground();\n this.scroller.setSize();\n this.renderRulers();\n }\n else {\n updateRuler(this);\n }\n }\n this.diagramRenderer.updateGrid(this.snapSettings, getGridLayerSvg(this.element.id), this.scroller.transform, this.rulerSettings, this.hRuler, this.vRuler);\n };\n /**\n * Get the properties to be maintained in the persisted state.\n * @return {string}\n */\n Diagram.prototype.getPersistData = function () {\n var keyEntity = ['loaded'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Initialize nodes, connectors and renderer\n */\n Diagram.prototype.preRender = function () {\n this.initializePrivateVariables();\n this.isProtectedOnChange = true;\n this.serviceLocator = new ServiceLocator;\n this.initializeServices();\n this.initDiagram();\n this.initViews();\n this.unWireEvents();\n this.wireEvents();\n this.element.classList.add('e-diagram');\n };\n Diagram.prototype.initializePrivateVariables = function () {\n this.defaultLocale = {\n Copy: 'Copy',\n Cut: 'Cut',\n Paste: 'Paste',\n Undo: 'Undo',\n Redo: 'Redo',\n SelectAll: 'Select All',\n Grouping: 'Grouping',\n Group: 'Group',\n UnGroup: 'Un Group',\n Order: 'Order',\n BringToFront: 'Bring To Front',\n MoveForward: 'Move Forward',\n SendToBack: 'Send To Back',\n SendBackward: 'Send Backward'\n };\n this.layerZIndex = -1;\n this.layerZIndexTable = {};\n this.nameTable = {};\n this.groupTable = {};\n this.commands = {};\n if (!this.isLoading) {\n this.views = [];\n }\n this.commandHandler = new CommandHandler(this);\n this.eventHandler = new DiagramEventHandler(this, this.commandHandler);\n this.spatialSearch = new SpatialSearch(this.nameTable);\n this.scroller = new DiagramScroller(this);\n };\n Diagram.prototype.initializeServices = function () {\n this.serviceLocator.register('localization', this.localeObj = new L10n(this.getModuleName(), this.defaultLocale, this.locale));\n };\n /**\n * Renders the diagram control with nodes and connectors\n */\n Diagram.prototype.render = function () {\n this.initHistory();\n this.diagramRenderer = new DiagramRenderer(this.element.id, new SvgRenderer(), this.mode === 'SVG');\n this.initLayers();\n this.initializeDiagramLayers();\n this.diagramRenderer.setLayers();\n this.initObjects(true);\n this.doLayout();\n this.validatePageSize();\n this.renderPageBreaks();\n this.diagramRenderer.renderSvgGridlines(this.snapSettings, getGridLayerSvg(this.element.id), this.scroller.transform, this.rulerSettings, this.hRuler, this.vRuler);\n this.commandHandler.initSelectorWrapper();\n /**\n * Used to render context menu\n */\n this.notify('initial-load', {});\n /**\n * Used to load context menu\n */\n this.trigger('load');\n this.scroller.setSize();\n this.scroller.updateScrollOffsets();\n this.refreshDiagramLayer();\n /**\n * Used to end the context menu rendering\n */\n this.notify('initial-end', {});\n this.isProtectedOnChange = false;\n this.tooltipObject = initTooltip(this);\n this.diagramActions = DiagramAction.Render;\n this.initCommands();\n this.isLoading = false;\n };\n /**\n * Returns the module name of the diagram\n */\n Diagram.prototype.getModuleName = function () {\n return 'diagram';\n };\n /**\n * To provide the array of modules needed for control rendering\n * @return {ModuleDeclaration[]}\n * @private\n */\n Diagram.prototype.requiredModules = function () {\n var modules = [];\n modules.push({\n member: 'Bpmn',\n args: []\n });\n modules.push({\n member: 'Bridging',\n args: []\n });\n modules.push({\n member: 'ConnectorEditingTool',\n args: []\n });\n if (this.constraints & DiagramConstraints.UndoRedo) {\n modules.push({\n member: 'UndoRedo',\n args: []\n });\n }\n if (this.layout.type === 'OrganizationalChart' || this.layout.type === 'HierarchicalTree' ||\n this.layout.enableAnimation) {\n modules.push({\n member: 'LayoutAnimate',\n args: []\n });\n }\n if (this.snapSettings.constraints) {\n modules.push({\n member: 'Snapping',\n args: [this]\n });\n }\n modules.push({\n member: 'PrintandExport',\n args: [this]\n });\n if (this.contextMenuSettings.show) {\n modules.push({\n member: 'contextMenu',\n args: [this, this.serviceLocator]\n });\n }\n if (this.layout.type === 'OrganizationalChart' || this.layout.type === 'HierarchicalTree') {\n modules.push({\n member: 'OrganizationalChart',\n args: []\n });\n }\n if (this.layout.type === 'ComplexHierarchicalTree') {\n modules.push({\n member: 'ComplexHierarchicalTree',\n args: []\n });\n }\n if (this.layout.type === 'MindMap') {\n modules.push({\n member: 'MindMapChart',\n args: []\n });\n }\n if (this.layout.type === 'RadialTree') {\n modules.push({\n member: 'RadialTree',\n args: []\n });\n }\n if (this.layout.type === 'SymmetricalLayout') {\n modules.push({\n member: 'SymmetricalLayout',\n args: []\n });\n }\n if (this.dataSourceSettings.dataManager || this.dataSourceSettings.data) {\n modules.push({\n member: 'DataBinding',\n args: []\n });\n }\n return modules;\n };\n /**\n * Destroys the diagram control\n */\n Diagram.prototype.destroy = function () {\n clearInterval(this.renderTimer);\n this.renderTimer = null;\n if (this.hRuler && this.vRuler) {\n this.hRuler.destroy();\n this.vRuler.destroy();\n }\n this.tooltipObject.destroy();\n this.droppable.destroy();\n this.unWireEvents();\n this.notify('destroy', {});\n _super.prototype.destroy.call(this);\n if (document.getElementById(this.element.id)) {\n this.element.classList.remove('e-diagram');\n var tooltipelement = document.getElementsByClassName('e-tooltip-wrap');\n while (tooltipelement.length > 0) {\n tooltipelement[0].parentNode.removeChild(tooltipelement[0]);\n }\n var content = document.getElementById(this.element.id + 'content');\n if (content) {\n this.element.removeChild(content);\n }\n var measureElement = 'measureElement';\n if (window[measureElement]) {\n window[measureElement].usageCount -= 1;\n if (window[measureElement].usageCount === 0) {\n window[measureElement].parentNode.removeChild(window[measureElement]);\n window[measureElement] = null;\n }\n }\n }\n };\n /**\n * Wires the mouse events with diagram control\n */\n Diagram.prototype.wireEvents = function () {\n var startEvent = Browser.touchStartEvent;\n var stopEvent = Browser.touchEndEvent;\n var moveEvent = Browser.touchMoveEvent;\n var cancelEvent = Browser.isPointer ? 'pointerleave' : 'mouseleave';\n var isIE11Pointer = Browser.isPointer;\n var wheelEvent = Browser.info.name === 'mozilla' ?\n (isIE11Pointer ? 'mousewheel' : 'DOMMouseScroll') : 'mousewheel';\n EventHandler.add(this.diagramCanvas, startEvent, this.eventHandler.mouseDown, this.eventHandler);\n EventHandler.add(this.diagramCanvas, moveEvent, this.eventHandler.mouseMove, this.eventHandler);\n EventHandler.add(this.diagramCanvas, stopEvent, this.eventHandler.mouseUp, this.eventHandler);\n EventHandler.add(this.diagramCanvas, cancelEvent, this.eventHandler.mouseLeave, this.eventHandler);\n EventHandler.add(this.diagramCanvas, 'keydown', this.eventHandler.keyDown, this.eventHandler);\n EventHandler.add(this.diagramCanvas, 'dblclick', this.eventHandler.doubleClick, this.eventHandler);\n EventHandler.add(this.diagramCanvas, 'scroll', this.eventHandler.scrolled, this.eventHandler);\n EventHandler.add(this.diagramCanvas, wheelEvent, this.eventHandler.mouseWheel, this.eventHandler);\n EventHandler.add(window, 'resize', this.eventHandler.windowResize, this.eventHandler);\n this.initDroppables();\n };\n /**\n * Unwires the mouse events from diagram control\n */\n Diagram.prototype.unWireEvents = function () {\n var startEvent = Browser.touchStartEvent;\n var moveEvent = Browser.touchMoveEvent;\n var cancelEvent = Browser.isPointer ? 'pointerleave' : 'mouseleave';\n var isIE11Pointer = Browser.isPointer;\n var wheelEvent = Browser.info.name === 'mozilla' ?\n (isIE11Pointer ? 'mousewheel' : 'DOMMouseScroll') : 'mousewheel';\n var stopEvent = Browser.touchEndEvent;\n EventHandler.remove(this.diagramCanvas, startEvent, this.eventHandler.mouseDown);\n EventHandler.remove(this.diagramCanvas, moveEvent, this.eventHandler.mouseMove);\n EventHandler.remove(this.diagramCanvas, stopEvent, this.eventHandler.mouseUp);\n EventHandler.remove(this.diagramCanvas, cancelEvent, this.eventHandler.mouseLeave);\n EventHandler.remove(this.diagramCanvas, 'keydown', this.eventHandler.keyDown);\n EventHandler.remove(this.diagramCanvas, 'dblclick', this.eventHandler.doubleClick);\n EventHandler.remove(this.diagramCanvas, 'scroll', this.eventHandler.scrolled);\n EventHandler.remove(this.diagramCanvas, wheelEvent, this.eventHandler.mouseWheel);\n EventHandler.remove(window, 'resize', this.eventHandler.windowResize);\n };\n //public methods - start region\n /**\n * Selects the given collection of objects\n * @param objects Defines the collection of nodes and connectors to be selected\n * @param multipleSelection Defines whether the existing selection has to be cleared or not\n */\n Diagram.prototype.select = function (objects, multipleSelection) {\n if (objects != null) {\n this.commandHandler.selectObjects(objects, multipleSelection);\n }\n };\n /**\n * Selects the all the objects.\n */\n Diagram.prototype.selectAll = function () {\n var selectedItems = [];\n selectedItems = this.getObjectsOfLayer(this.activeLayer.objects);\n this.select(selectedItems);\n };\n /**\n * Removes the given object from selection list\n * @param obj Defines the object to be unselected\n */\n Diagram.prototype.unSelect = function (obj) {\n if (obj && isSelected(this, obj)) {\n this.commandHandler.unSelect(obj);\n }\n };\n /**\n * Removes all elements from the selection list\n */\n Diagram.prototype.clearSelection = function () {\n this.commandHandler.clearSelection(true);\n };\n /**\n * Update the diagram clipboard dimension\n */\n Diagram.prototype.updateViewPort = function () {\n this.eventHandler.updateViewPortSize(this.element);\n };\n Diagram.prototype.cutCommand = function () {\n this.cut();\n };\n /**\n * Removes the selected nodes and connectors from diagram and moves them to diagram clipboard\n */\n Diagram.prototype.cut = function () {\n this.commandHandler.cut();\n };\n /**\n * Add a process into the sub-process\n */\n Diagram.prototype.addProcess = function (process, parentId) {\n if (this.bpmnModule) {\n this.bpmnModule.addProcess(process, parentId, this);\n }\n };\n /**\n * Remove a process from the sub-process\n */\n Diagram.prototype.removeProcess = function (id) {\n if (this.bpmnModule) {\n this.bpmnModule.removeProcess(id, this);\n }\n };\n Diagram.prototype.pasteCommand = function () {\n this.paste();\n };\n /**\n * Adds the given objects/ the objects in the diagram clipboard to diagram control\n * @param obj Defines the objects to be added to diagram\n */\n Diagram.prototype.paste = function (obj) {\n this.commandHandler.paste(obj);\n };\n /**\n * fit the diagram to the page with respect to mode and region\n */\n Diagram.prototype.fitToPage = function (options) {\n this.scroller.fitToPage(options);\n };\n /**\n * bring the specified bounds into the viewport\n */\n Diagram.prototype.bringIntoView = function (bound) {\n this.scroller.bringIntoView(bound);\n };\n /**\n * bring the specified bounds to the center of the viewport\n */\n Diagram.prototype.bringToCenter = function (bound) {\n this.scroller.bringToCenter(bound);\n };\n Diagram.prototype.copyCommand = function () {\n this.copy();\n };\n /**\n * Copies the selected nodes and connectors to diagram clipboard\n */\n Diagram.prototype.copy = function () {\n var obj = this.commandHandler.copy();\n return obj;\n };\n /**\n * Group the selected nodes and connectors in diagram\n */\n Diagram.prototype.group = function () {\n this.commandHandler.group();\n };\n /**\n * UnGroup the selected nodes and connectors in diagram\n */\n Diagram.prototype.unGroup = function () {\n this.commandHandler.unGroup();\n };\n /**\n * send the selected nodes or connectors back\n */\n Diagram.prototype.sendToBack = function () {\n this.commandHandler.sendToBack();\n };\n /**\n * set the active layer\n * @param layerName defines the name of the layer which is to be active layer\n */\n Diagram.prototype.setActiveLayer = function (layerName) {\n var layer = this.commandHandler.getLayer(layerName);\n this.activeLayer = layer;\n };\n /**\n * add the layer into diagram\n * @param layer defines the layer model which is to be added\n * @param layerObject defines the object of the layer\n */\n Diagram.prototype.addLayer = function (layer, layerObject) {\n this.commandHandler.addLayer(layer, layerObject);\n };\n /**\n * remove the layer from diagram\n * @param layerId define the id of the layer\n */\n Diagram.prototype.removeLayer = function (layerId) {\n this.commandHandler.removeLayer(layerId);\n };\n /**\n * move objects from the layer to another layer from diagram\n * @param objects define the objects id of string array\n */\n Diagram.prototype.moveObjects = function (objects, targetLayer) {\n this.commandHandler.moveObjects(objects, targetLayer);\n };\n /**\n * move the layer backward\n * @param layerName define the name of the layer\n */\n Diagram.prototype.sendLayerBackward = function (layerName) {\n this.commandHandler.sendLayerBackward(layerName);\n };\n /**\n * move the layer forward\n * @param layerName define the name of the layer\n */\n Diagram.prototype.bringLayerForward = function (layerName) {\n this.commandHandler.bringLayerForward(layerName);\n };\n /**\n * clone a layer with its object\n * @param layerName define the name of the layer\n */\n Diagram.prototype.cloneLayer = function (layerName) {\n this.commandHandler.cloneLayer(layerName);\n };\n /**\n * bring the selected nodes or connectors to front\n */\n Diagram.prototype.bringToFront = function () {\n this.commandHandler.bringToFront();\n };\n /**\n * send the selected nodes or connectors forward\n */\n Diagram.prototype.moveForward = function () {\n this.commandHandler.sendForward();\n };\n /**\n * send the selected nodes or connectors back\n */\n Diagram.prototype.sendBackward = function () {\n this.commandHandler.sendBackward();\n };\n /**\n * gets the node or connector having the given name\n */\n Diagram.prototype.getObject = function (name) {\n return this.nameTable[name];\n };\n /**\n * gets the active layer back\n */\n Diagram.prototype.getActiveLayer = function () {\n return this.activeLayer;\n };\n Diagram.prototype.nudgeCommand = function (direction, x, y) {\n if (typeof direction !== 'object') {\n this.nudge(direction);\n }\n };\n /**\n * Moves the selected objects towards the given direction\n * @param direction Defines the direction by which the objects have to be moved\n * @param x Defines the distance by which the selected objects have to be horizontally moved\n * @param y Defines the distance by which the selected objects have to be vertically moved\n */\n Diagram.prototype.nudge = function (direction, x, y) {\n var tx = 0;\n var ty = 0;\n var negativeDirection;\n if (direction === 'Left' || direction === 'Right') {\n negativeDirection = (direction === 'Left');\n tx = (negativeDirection ? -1 : 1) * (x ? x : 1);\n }\n else {\n negativeDirection = (direction === 'Up');\n ty = (negativeDirection ? -1 : 1) * (y ? y : 1);\n }\n var obj = this.selectedItems;\n this.drag(obj, tx, ty);\n };\n /**\n * Drags the given object by the specified pixels\n * @param obj Defines the nodes/connectors to be dragged\n * @param tx Defines the distance by which the given objects have to be horizontally moved\n * @param ty Defines the distance by which the given objects have to be vertically moved\n */\n Diagram.prototype.drag = function (obj, tx, ty) {\n if (this.bpmnModule && (obj instanceof Node)) {\n var updated = this.bpmnModule.updateAnnotationDrag(obj, this, tx, ty);\n if (updated) {\n return;\n }\n }\n if (obj instanceof Selector) {\n if (obj.nodes && obj.nodes.length) {\n for (var _i = 0, _a = obj.nodes; _i < _a.length; _i++) {\n var node = _a[_i];\n this.drag(node, tx, ty);\n }\n }\n if (obj.connectors && obj.connectors.length) {\n for (var _b = 0, _c = obj.connectors; _b < _c.length; _b++) {\n var conn = _c[_b];\n this.drag(conn, tx, ty);\n }\n }\n this.updateSelector();\n }\n else {\n if (obj instanceof Node) {\n if (this.bpmnModule) {\n this.bpmnModule.updateAnnotationDrag(obj, this, tx, ty);\n }\n }\n this.commandHandler.drag(obj, tx, ty);\n }\n };\n /**\n * Scales the given objects by the given ratio\n * @param obj Defines the objects to be resized\n * @param sx Defines the ratio by which the objects have to be horizontally scaled\n * @param sy Defines the ratio by which the objects have to be vertically scaled\n * @param pivot Defines the reference point with respect to which the objects will be resized\n */\n Diagram.prototype.scale = function (obj, sx, sy, pivot) {\n var checkBoundaryConstraints = true;\n if (obj instanceof Selector) {\n if (obj.nodes && obj.nodes.length) {\n for (var _i = 0, _a = obj.nodes; _i < _a.length; _i++) {\n var node = _a[_i];\n checkBoundaryConstraints = this.commandHandler.scale(node, sx, sy, pivot, obj);\n }\n }\n if (obj.connectors && obj.connectors.length) {\n for (var _b = 0, _c = obj.connectors; _b < _c.length; _b++) {\n var conn = _c[_b];\n this.commandHandler.scale(conn, sx, sy, pivot, obj);\n }\n }\n this.updateSelector();\n }\n else {\n this.commandHandler.scale(obj, sx, sy, pivot);\n }\n return checkBoundaryConstraints;\n };\n /**\n * Rotates the given nodes/connectors by the given angle\n * @param obj Defines the objects to be rotated\n * @param angle Defines the angle by which the objects have to be rotated\n * @param pivot Defines the reference point with reference to which the objects have to be rotated\n */\n Diagram.prototype.rotate = function (obj, angle, pivot) {\n var checkBoundaryConstraints;\n if (obj) {\n pivot = pivot || { x: obj.wrapper.offsetX, y: obj.wrapper.offsetY };\n if (obj instanceof Selector) {\n obj.rotateAngle += angle;\n obj.wrapper.rotateAngle += angle;\n var bounds = getBounds(obj.wrapper);\n checkBoundaryConstraints = this.commandHandler.checkBoundaryConstraints(undefined, undefined, bounds);\n if (!checkBoundaryConstraints) {\n obj.rotateAngle -= angle;\n obj.wrapper.rotateAngle -= angle;\n return checkBoundaryConstraints;\n }\n var objects = [];\n objects = objects.concat(obj.nodes);\n objects = objects.concat(obj.connectors);\n this.commandHandler.rotateObjects(obj, objects, angle, pivot);\n }\n else {\n this.commandHandler.rotateObjects(obj, [obj], angle, pivot);\n }\n }\n return checkBoundaryConstraints;\n };\n /**\n * Moves the source point of the given connector\n * @param obj Defines the connector, the end points of which has to be moved\n * @param tx Defines the distance by which the end point has to be horizontally moved\n * @param ty Defines the distance by which the end point has to be vertically moved\n */\n Diagram.prototype.dragSourceEnd = function (obj, tx, ty) {\n this.commandHandler.dragSourceEnd(obj, tx, ty);\n };\n /**\n * Moves the target point of the given connector\n * @param obj Defines the connector, the end points of which has to be moved\n * @param tx Defines the distance by which the end point has to be horizontally moved\n * @param ty Defines the distance by which the end point has to be vertically moved\n */\n Diagram.prototype.dragTargetEnd = function (obj, tx, ty) {\n this.commandHandler.dragTargetEnd(obj, tx, ty);\n };\n /**\n * Finds all the objects that is under the given mouse position\n * @param position Defines the position, the objects under which has to be found\n * @param source Defines the object, the objects under which has to be found\n */\n Diagram.prototype.findObjectsUnderMouse = function (position, source) {\n return this.eventHandler.findObjectsUnderMouse(position, source);\n };\n /**\n * Finds the object that is under the given mouse position\n * @param objects Defines the collection of objects, from which the object has to be found.\n * @param action Defines the action, using which the relevant object has to be found.\n * @param inAction Defines the active state of the action.\n */\n Diagram.prototype.findObjectUnderMouse = function (objects, action, inAction) {\n return this.eventHandler.findObjectUnderMouse(objects, action, inAction);\n };\n /**\n * Finds the object that is under the given active object (Source)\n * @param objects Defines the collection of objects, from which the object has to be found.\n * @param action Defines the action, using which the relevant object has to be found.\n * @param inAction Defines the active state of the action.\n */\n Diagram.prototype.findTargetObjectUnderMouse = function (objects, action, inAction, position, source) {\n return this.eventHandler.findTargetUnderMouse(objects, action, inAction, position, source);\n };\n /**\n * Finds the child element of the given object at the given position\n * @param obj Defines the object, the child element of which has to be found\n * @param position Defines the position, the child element under which has to be found\n */\n Diagram.prototype.findElementUnderMouse = function (obj, position) {\n return this.eventHandler.findElementUnderMouse(obj, position);\n };\n /**\n * Defines the action to be done, when the mouse hovers the given element of the given object\n * @param obj Defines the object under mouse\n * @param wrapper Defines the target element of the object under mouse\n * @param position Defines the current mouse position\n */\n Diagram.prototype.findActionToBeDone = function (obj, wrapper, position, target) {\n return this.eventHandler.findActionToBeDone(obj, wrapper, position, target);\n };\n /**\n * Returns the tool that handles the given action\n * @param action Defines the action that is going to be performed\n */\n Diagram.prototype.getTool = function (action) {\n var tool;\n var getCustomTool = getFunction(this.getCustomTool);\n if (getCustomTool) {\n tool = getCustomTool(action);\n if (tool) {\n return tool;\n }\n }\n return this.eventHandler.getTool(action);\n };\n /**\n * Defines the cursor that corresponds to the given action\n * @param action Defines the action that is going to be performed\n */\n Diagram.prototype.getCursor = function (action, active) {\n var cursor;\n var getCustomCursor = getFunction(this.getCustomCursor);\n if (getCustomCursor) {\n cursor = getCustomCursor(action, active);\n if (cursor) {\n return cursor;\n }\n }\n return this.eventHandler.getCursor(action);\n };\n /**\n * Initializes the undo redo actions\n * @private\n */\n Diagram.prototype.initHistory = function () {\n if (this.undoRedoModule) {\n this.undoRedoModule.initHistory(this);\n }\n };\n /**\n * Adds the given change in the diagram control to the track\n * @param entry Defines the entry/information about a change in diagram\n */\n Diagram.prototype.addHistoryEntry = function (entry) {\n if (this.undoRedoModule && (this.constraints & DiagramConstraints.UndoRedo) && !this.currentSymbol) {\n this.undoRedoModule.addHistoryEntry(entry, this);\n if (entry.type !== 'StartGroup' && entry.type !== 'EndGroup') {\n this.historyChangeTrigger(entry);\n }\n }\n };\n /** @private */\n Diagram.prototype.historyChangeTrigger = function (entry) {\n var change = {};\n var oldValue = 'oldValue';\n var newValue = 'newValue';\n var type = 'type';\n var source = [];\n if (entry && entry.redoObject && ((entry.redoObject.nodes) instanceof Array) &&\n ((entry.redoObject.connectors) instanceof Array)) {\n source = entry.redoObject.nodes.concat(entry.redoObject.connectors);\n }\n else {\n if (entry.redoObject) {\n source.push(entry.redoObject);\n }\n }\n change[type] = entry.type;\n switch (entry.type) {\n case 'PositionChanged':\n change[oldValue] = { offsetX: entry.undoObject.offsetX, offsetY: entry.undoObject.offsetY };\n change[newValue] = { offsetX: entry.redoObject.offsetX, offsetY: entry.redoObject.offsetY };\n break;\n case 'RotationChanged':\n change[oldValue] = { rotateAngle: entry.undoObject.rotateAngle };\n change[newValue] = { rotateAngle: entry.redoObject.rotateAngle };\n break;\n case 'SizeChanged':\n change[oldValue] = {\n offsetX: entry.undoObject.offsetX, offsetY: entry.undoObject.offsetY,\n width: entry.undoObject.width, height: entry.undoObject.height\n };\n change[newValue] = {\n offsetX: entry.redoObject.offsetX, offsetY: entry.redoObject.offsetY,\n width: entry.redoObject.width, height: entry.redoObject.height\n };\n break;\n case 'CollectionChanged':\n change[entry.changeType] = source;\n break;\n case 'ConnectionChanged':\n change[oldValue] = { offsetX: entry.undoObject.offsetX, offsetY: entry.undoObject.offsetY };\n change[newValue] = { offsetX: entry.redoObject.offsetX, offsetY: entry.redoObject.offsetY };\n break;\n }\n var arg = {\n cause: entry.category, source: source, change: change\n };\n if (source.length) {\n this.triggerEvent(DiagramEvent.historyChange, arg);\n }\n };\n /**\n * Starts grouping the actions that will be undone/restored as a whole\n */\n Diagram.prototype.startGroupAction = function () {\n var entry = { type: 'StartGroup', category: 'Internal' };\n this.addHistoryEntry(entry);\n };\n /**\n * Closes grouping the actions that will be undone/restored as a whole\n */\n Diagram.prototype.endGroupAction = function () {\n var entry = { type: 'EndGroup', category: 'Internal' };\n this.addHistoryEntry(entry);\n };\n /**\n * Restores the last action that is performed\n */\n Diagram.prototype.undo = function () {\n if (this.undoRedoModule && (this.constraints & DiagramConstraints.UndoRedo)) {\n this.undoRedoModule.undo(this);\n }\n };\n /**\n * Restores the last undone action\n */\n Diagram.prototype.redo = function () {\n if (this.undoRedoModule && (this.constraints & DiagramConstraints.UndoRedo)) {\n this.undoRedoModule.redo(this);\n }\n };\n /**\n * Aligns the group of objects to with reference to the first object in the group\n * @param objects Defines the objects that have to be aligned\n * @param option Defines the factor, by which the objects have to be aligned\n */\n Diagram.prototype.align = function (option, objects) {\n if (!objects) {\n objects = [];\n objects = objects.concat(this.selectedItems.nodes, this.selectedItems.connectors);\n }\n this.diagramActions = this.diagramActions | DiagramAction.PublicMethod;\n this.commandHandler.align(objects, option);\n };\n /**\n * Arranges the group of objects with equal intervals, but within the group of objects\n * @param objects Defines the objects that have to be equally spaced\n * @param option Defines the factor to distribute the shapes\n */\n Diagram.prototype.distribute = function (option, objects) {\n if (!objects) {\n objects = [];\n objects = objects.concat(this.selectedItems.nodes, this.selectedItems.connectors);\n }\n this.diagramActions = this.diagramActions | DiagramAction.PublicMethod;\n this.commandHandler.distribute(objects, option);\n };\n /**\n * Scales the given objects to the size of the first object in the group\n * @param objects Defines the collection of objects that have to be scaled\n * @param option Defines whether the node has to be horizontally scaled, vertically scaled or both\n */\n Diagram.prototype.sameSize = function (option, objects) {\n if (!objects) {\n objects = [];\n objects = objects.concat(this.selectedItems.nodes, this.selectedItems.connectors);\n }\n this.diagramActions = this.diagramActions | DiagramAction.PublicMethod;\n this.commandHandler.sameSize(objects, option);\n };\n /**\n * Scales the diagram control by the given factor\n * @param factor Defines the factor by which the diagram is zoomed\n * @param focusedPoint Defines the point with respect to which the diagram has to be zoomed\n */\n Diagram.prototype.zoom = function (factor, focusedPoint) {\n this.scroller.zoom(factor, 0, 0, focusedPoint);\n };\n /**\n * Scales the diagram control by the given factor\n * @param options used to define the zoom factor, focus point and zoom type.\n *\n */\n Diagram.prototype.zoomTo = function (options) {\n var factor = options.zoomFactor ? options.zoomFactor : 0.2;\n factor = options.type === 'ZoomOut' ? 1 / (1 + factor) : (1 + factor);\n this.scroller.zoom(factor, 0, 0, options.focusPoint);\n };\n /**\n * Pans the diagram control to the given horizontal and vertical offsets\n * @param horizontalOffset Defines the horizontal distance to which the diagram has to be scrolled\n * @param verticalOffset Defines the vertical distance to which the diagram has to be scrolled\n */\n Diagram.prototype.pan = function (horizontalOffset, verticalOffset, focusedPoint) {\n this.scroller.zoom(1, horizontalOffset, verticalOffset, focusedPoint);\n };\n /**\n * Resets the zoom and scroller offsets to default values\n */\n Diagram.prototype.reset = function () {\n this.scroller.zoom(1 / this.scroller.currentZoom, -this.scroller.horizontalOffset, -this.scroller.verticalOffset, { x: 0, y: 0 });\n };\n /** @private */\n Diagram.prototype.triggerEvent = function (eventName, args) {\n this.trigger(DiagramEvent[eventName], args);\n };\n /**\n * Adds the given object to diagram control\n * @param obj Defines the object that has to be added to diagram\n */\n Diagram.prototype.add = function (obj) {\n var newObj;\n if (obj) {\n obj = cloneObject(obj);\n if (this.bpmnModule) {\n if (!this.bpmnModule.canAdd(obj)) {\n return null;\n }\n }\n var args = {\n element: obj, cause: this.diagramActions, state: 'Changing', type: 'Addition', cancel: false\n };\n this.triggerEvent(DiagramEvent.collectionChange, args);\n var activeLayer = void 0;\n obj.id = obj.id || randomId();\n var layers = this.activeLayer;\n if (!args.cancel && !layers.lock) {\n if (layers.objects.indexOf(obj.id) < 0 && !layers.lock) {\n if (!layers.visible) {\n layers.visible = true;\n this.dataBind();\n }\n layers.objects.push(obj.id);\n }\n if (getObjectType(obj) === Connector) {\n newObj = new Connector(this, 'connectors', obj, true);\n this.connectors.push(newObj);\n this.initObject(newObj);\n if (obj.visible === false) {\n this.updateElementVisibility(newObj.wrapper, newObj, obj.visible);\n }\n this.updateEdges(newObj);\n }\n else {\n newObj = new Node(this, 'nodes', obj, true);\n // newObj.processId = (obj as Node).processId;\n this.nodes.push(newObj);\n this.initObject(newObj, layers);\n if (this.bpmnModule) {\n if (newObj.shape.annotations && newObj.shape.annotations.length !== 0) {\n for (var _i = 0, _a = this.bpmnModule.getTextAnnotationConn(newObj); _i < _a.length; _i++) {\n var obj_1 = _a[_i];\n this.initConnectors(obj_1, layers, false);\n }\n }\n if (newObj.shape.activity && newObj.shape.activity.subProcess.processes &&\n newObj.shape.activity.subProcess.processes.length) {\n this.bpmnModule.updateDocks(newObj, this);\n }\n }\n }\n args = {\n element: newObj, cause: this.diagramActions, state: 'Changed', type: 'Addition', cancel: false\n };\n this.triggerEvent(DiagramEvent.collectionChange, args);\n if (!(this.diagramActions & DiagramAction.UndoRedo) && !(this.diagramActions & DiagramAction.Group)) {\n var entry = {\n type: 'CollectionChanged', changeType: 'Insert', undoObject: cloneObject(obj),\n redoObject: cloneObject(obj), category: 'Internal'\n };\n this.addHistoryEntry(entry);\n }\n this.diagramActions = this.diagramActions | DiagramAction.PublicMethod;\n if (this.mode === 'SVG') {\n this.updateSvgNodes(newObj);\n this.updateDiagramObject(newObj);\n if (newObj.shape.activity && newObj.shape.activity.subProcess.processes &&\n newObj.shape.activity.subProcess.processes.length) {\n this.updateProcesses(newObj);\n }\n }\n }\n }\n this.resetDiagramActions(DiagramAction.PublicMethod);\n return newObj;\n };\n Diagram.prototype.updateSvgNodes = function (node) {\n if (node.children) {\n for (var _i = 0, _a = node.children; _i < _a.length; _i++) {\n var j = _a[_i];\n if (this.nameTable[j] && this.nameTable[j].parentId) {\n var child = getDiagramElement(j + '_groupElement');\n child.parentNode.removeChild(child);\n }\n }\n }\n };\n /** @private */\n Diagram.prototype.updateProcesses = function (node) {\n if (this.bpmnModule && node && node.shape && node.shape.activity &&\n node.shape.activity.subProcess.processes &&\n node.shape.activity.subProcess.processes.length) {\n var processes = node.shape.activity.subProcess.processes;\n this.moveSvgNode(node.id);\n for (var _i = 0, processes_1 = processes; _i < processes_1.length; _i++) {\n var j = processes_1[_i];\n this.moveSvgNode(j);\n var edges = [];\n edges = edges.concat(this.nameTable[j].outEdges, this.nameTable[j].inEdges);\n for (var i = edges.length - 1; i >= 0; i--) {\n this.moveSvgNode(edges[i]);\n }\n }\n for (var _a = 0, processes_2 = processes; _a < processes_2.length; _a++) {\n var j = processes_2[_a];\n if (this.nameTable[j].shape.activity.subProcess.processes &&\n this.nameTable[j].shape.activity.subProcess.processes.length) {\n this.updateProcesses(this.nameTable[j]);\n }\n }\n }\n else {\n this.moveSvgNode(node.id);\n }\n };\n /** @private */\n Diagram.prototype.moveSvgNode = function (nodeId) {\n var child = getDiagramElement(nodeId + '_groupElement');\n var parent = child.parentElement;\n child.parentNode.removeChild(child);\n parent.appendChild(child);\n };\n /**\n * Adds the given annotation to the given node\n * @param annotation Defines the annotation to be added\n * @param node Defines the node to which the annotation has to be added\n */\n Diagram.prototype.addTextAnnotation = function (annotation, node) {\n if (this.bpmnModule) {\n var connector = this.bpmnModule.addAnnotation(node, annotation, this);\n this.initConnectors(connector, this.commandHandler.getObjectLayer(node.id), false);\n this.updateDiagramObject(node);\n }\n };\n /**\n * Splice the InEdge and OutEdge of the for the node with respect to corresponding connectors that is deleting\n */\n Diagram.prototype.spliceConnectorEdges = function (connector, isSource) {\n var node;\n var edges = [];\n node = isSource ? this.nameTable[connector.sourceID] : this.nameTable[connector.targetID];\n if (node) {\n edges = isSource ? node.outEdges : node.inEdges;\n for (var i = edges.length - 1; i >= 0; i--) {\n if (edges[i] === connector.id) {\n edges.splice(i, 1);\n }\n }\n }\n };\n /**\n * Remove the dependent connectors if the node is deleted\n * @private\n */\n Diagram.prototype.removeDependentConnector = function (node) {\n var connector;\n var edges = [];\n edges = edges.concat(node.outEdges, node.inEdges);\n for (var i = edges.length - 1; i >= 0; i--) {\n connector = this.nameTable[edges[i]];\n if (connector) {\n this.connectorTable[connector.id] = cloneObject(connector);\n this.remove(connector);\n }\n }\n };\n Diagram.prototype.removeObjectsFromLayer = function (obj) {\n var layer = this.layers.indexOf(this.commandHandler.getObjectLayer(obj.id));\n var objects = this.layers[layer].objects;\n var objIndex = objects.indexOf(obj.id);\n if (objIndex > -1) {\n if (isSelected(this, obj)) {\n this.unSelect(obj);\n }\n this.layers[layer].objects.splice(objIndex, 1);\n delete this.layers[layer].zIndexTable[this.nameTable[obj.id].zIndex];\n }\n };\n Diagram.prototype.removeElements = function (currentObj) {\n if (this.mode === 'SVG' || (this.mode === 'Canvas' && currentObj.shape.type === 'Native')) {\n var removeElement_1 = getDiagramElement(currentObj.id + '_groupElement');\n if (removeElement_1) {\n removeElement_1.parentNode.removeChild(removeElement_1);\n }\n }\n this.refreshCanvasLayers();\n var children = currentObj.wrapper.children;\n var element;\n var view;\n for (var i = 0; i < children.length; i++) {\n if (children[i] instanceof DiagramNativeElement || ((children[i].id) && (children[i].id).indexOf('icon_content') > 0)) {\n if ((children[i].id).indexOf('icon_content') > 0) {\n element = getDiagramElement(children[i].id + '_shape_groupElement');\n element.parentNode.removeChild(element);\n element = getDiagramElement(children[i].id + '_rect_groupElement');\n element.parentNode.removeChild(element);\n }\n for (var _i = 0, _a = this.views; _i < _a.length; _i++) {\n var elementId = _a[_i];\n removeElement(children[i].id + '_groupElement', elementId);\n }\n }\n else if (children[i] instanceof DiagramHtmlElement) {\n for (var _b = 0, _c = this.views; _b < _c.length; _b++) {\n var elementId = _c[_b];\n removeElement(children[i].id + '_html_element', elementId);\n }\n }\n }\n };\n Diagram.prototype.removeCommand = function () {\n this.remove();\n };\n /**\n * Removes the given object from diagram\n * @param obj Defines the object that has to be removed from diagram\n */\n /* tslint:disable */\n Diagram.prototype.remove = function (obj) {\n var selectedItems = [];\n selectedItems = selectedItems.concat(this.selectedItems.nodes, this.selectedItems.connectors);\n var args;\n var groupAction = false;\n if (obj) {\n obj = this.nameTable[obj.id];\n if (obj && (canDelete(obj) || (this.diagramActions & DiagramAction.Clear))) {\n if (this.bpmnModule) {\n if (this.bpmnModule.checkAndRemoveAnnotations(obj, this)) {\n this.refreshCanvasLayers();\n return;\n }\n }\n args = {\n element: obj, cause: this.diagramActions,\n state: 'Changing', type: 'Removal', cancel: false\n };\n if (!(this.diagramActions & DiagramAction.Clear)) {\n this.triggerEvent(DiagramEvent.collectionChange, args);\n }\n if (!args.cancel) {\n if ((!(this.diagramActions & DiagramAction.UndoRedo)) &&\n (obj instanceof Node || obj instanceof Connector)) {\n var entry = {\n type: 'CollectionChanged', changeType: 'Remove', undoObject: cloneObject(obj),\n redoObject: cloneObject(obj), category: 'Internal'\n };\n if (!(this.diagramActions & DiagramAction.Clear)) {\n if (selectedItems.length > 0 && this.undoRedoModule && !this.layout.type) {\n this.historyList.startGroupAction();\n groupAction = true;\n }\n }\n if (obj instanceof Node) {\n this.removeDependentConnector(obj);\n }\n if (!(this.diagramActions & DiagramAction.Clear)) {\n this.addHistoryEntry(entry);\n }\n }\n if (obj.children) {\n this.deleteGroup(obj);\n }\n if (obj.parentId) {\n this.deleteChild(obj);\n }\n var index = void 0;\n this.diagramActions = this.diagramActions | DiagramAction.PublicMethod;\n var currentObj = this.nameTable[obj.id];\n if (currentObj instanceof Node) {\n if (currentObj.shape.type === 'Bpmn' && this.bpmnModule) {\n this.bpmnModule.removeBpmnProcesses(currentObj, this);\n }\n index = this.nodes.indexOf(currentObj);\n if (index !== -1) {\n this.nodes.splice(index, 1);\n this.updateNodeEdges(currentObj);\n }\n }\n else {\n index = this.connectors.indexOf(currentObj);\n if (index !== -1) {\n this.connectors.splice(index, 1);\n }\n this.updateEdges(currentObj);\n this.spliceConnectorEdges(obj, true);\n this.spliceConnectorEdges(obj, false);\n }\n if (groupAction) {\n this.historyList.endGroupAction();\n }\n if (isSelected(this, currentObj)) {\n this.unSelect(currentObj);\n }\n this.removeObjectsFromLayer(obj);\n if (this.currentDrawingObject) {\n this.currentDrawingObject.wrapper = undefined;\n }\n delete this.nameTable[obj.id];\n this.removeElements(currentObj);\n if (this.mode !== 'SVG') {\n this.refreshDiagramLayer();\n }\n if (!(this.diagramActions & DiagramAction.Clear)) {\n this.removeFromAQuad(currentObj);\n args = {\n element: obj, cause: this.diagramActions,\n state: 'Changed', type: 'Removal', cancel: false\n };\n this.triggerEvent(DiagramEvent.collectionChange, args);\n this.resetTool();\n }\n }\n }\n }\n else if (selectedItems.length > 0) {\n if (this.undoRedoModule) {\n this.historyList.startGroupAction();\n groupAction = true;\n }\n for (var i = 0; i < selectedItems.length; i++) {\n var node = selectedItems[i];\n if (this.nameTable[selectedItems[i].id]) {\n this.remove(selectedItems[i]);\n }\n }\n if (groupAction) {\n this.historyList.endGroupAction();\n }\n this.clearSelection();\n }\n };\n /* tslint:enable */\n /** @private */\n Diagram.prototype.deleteChild = function (node, parentNode) {\n var id;\n parentNode = parentNode ? this.nameTable[parentNode.id] : this.nameTable[node.parentId];\n if (typeof node === 'string') {\n id = node;\n }\n else {\n id = node.id;\n }\n if (parentNode && parentNode.children) {\n for (var i = 0; i < parentNode.children.length; i++) {\n if (parentNode.children[i] === id) {\n parentNode.children.splice(i, 1);\n parentNode.wrapper.children.splice(i, 1);\n }\n }\n parentNode.wrapper.measure(new Size());\n parentNode.wrapper.arrange(parentNode.wrapper.desiredSize);\n }\n };\n /** @private */\n Diagram.prototype.addChild = function (node, child) {\n var id;\n var parentNode = this.nameTable[node.id];\n if (parentNode.children) {\n if (typeof child === 'string') {\n if (this.nameTable[child]) {\n id = child;\n }\n }\n else {\n id = child.id = child.id || randomId();\n this.add(child);\n }\n if (id) {\n var childNode = this.nameTable[id];\n childNode.parentId = parentNode.id;\n parentNode.children.push(id);\n parentNode.wrapper.children.push(this.nameTable[id].wrapper);\n parentNode.wrapper.measure(new Size());\n parentNode.wrapper.arrange(parentNode.wrapper.desiredSize);\n }\n }\n };\n /**\n * Clears all nodes and objects in the diagram\n */\n Diagram.prototype.clear = function () {\n this.clearObjects();\n };\n Diagram.prototype.clearObjects = function (collection) {\n var objects = [];\n if (!collection) {\n objects = objects.concat(this.nodes);\n objects = objects.concat(this.connectors);\n }\n else {\n objects = collection;\n }\n this.diagramActions = this.diagramActions | DiagramAction.Clear;\n for (var _i = 0, objects_1 = objects; _i < objects_1.length; _i++) {\n var obj = objects_1[_i];\n if (this.nameTable[obj.id]) {\n this.remove(obj);\n }\n }\n this.diagramActions = this.diagramActions & ~DiagramAction.Clear;\n this.spatialSearch = new SpatialSearch(this.nameTable);\n this.initHistory();\n };\n Diagram.prototype.startEditCommad = function () {\n this.startTextEdit();\n };\n /**\n * Specified annotation to edit mode\n * @param node Defines node/connector that contains the annotation to be edited\n * @param id Defines annotation id to be edited in the node\n */\n Diagram.prototype.startTextEdit = function (node, id) {\n if (!canZoomPan(this) || canSingleSelect(this)) {\n var minWidth = 90;\n var text = void 0;\n var bounds = void 0;\n var attributes = void 0;\n var x = void 0;\n var y = void 0;\n var textWrapper = void 0;\n var transform = this.scroller.transform;\n if (!node) {\n node = (this.selectedItems.nodes[0]) ? this.selectedItems.nodes[0] : this.selectedItems.connectors[0];\n }\n if (node) {\n var bpmnAnnotation = false;\n if (this.bpmnModule) {\n textWrapper = this.bpmnModule.getTextAnnotationWrapper(node, id);\n if (textWrapper) {\n node = this.nameTable[node.id.split('_textannotation_')[0]];\n }\n }\n if (!textWrapper) {\n if (node.shape.type !== 'Text' && node.annotations.length === 0) {\n this.activeLabel.isGroup = true;\n this.startGroupAction();\n this.addLabels(node, [{ id: randomId(), content: '' }]);\n }\n if (!id && ((node.shape.type !== 'Text' && node.annotations.length > 0) || (node.shape.type === 'Text'))) {\n id = (node.shape.type === 'Text') ? (node.wrapper.children[0].id).split('_')[1] : node.annotations[0].id;\n }\n if (id) {\n textWrapper = this.getWrapper(node.wrapper, id);\n }\n }\n else {\n bpmnAnnotation = true;\n }\n if (node && textWrapper &&\n (!enableReadOnly(textWrapper, node) || bpmnAnnotation)) {\n var style = (textWrapper.style);\n var maxWidth = void 0;\n maxWidth = textWrapper.bounds.width < node.wrapper.bounds.width ? textWrapper.bounds.width : node.wrapper.bounds.width;\n maxWidth = minWidth > maxWidth ? minWidth : maxWidth;\n var textEditing = document.createElement('div');\n var textarea = document.createElement('textarea');\n textEditing.appendChild(textarea);\n text = textWrapper.content;\n bounds = measureHtmlText(textWrapper.style, text, undefined, undefined, maxWidth);\n if (bounds.isEmpty()) {\n if (node.shape.type !== 'Text') {\n bounds = new Size(findAnnotation(node, (textWrapper.id).split(node.id + '_')[1]).width || 50, textWrapper.style.fontSize);\n }\n else {\n bounds = new Size((node.width > 50) ? 50 : node.width, textWrapper.style.fontSize);\n }\n }\n bounds.width = Math.max(bounds.width, 50);\n x = ((((textWrapper.bounds.center.x + transform.tx) * transform.scale) - bounds.width / 2) - 2.5);\n y = ((((textWrapper.bounds.center.y + transform.ty) * transform.scale) - bounds.height / 2) - 3);\n attributes = {\n 'id': this.element.id + '_editTextBoxDiv',\n 'style': 'position: absolute' + ';left:' + x + 'px;top:' + y + 'px;width:' + (bounds.width + 1) +\n 'px;height:' + bounds.height + 'px; containerName:' + node.id + ';'\n };\n setAttributeHtml(textEditing, attributes);\n attributes = {\n 'id': this.element.id + '_editBox',\n 'style': 'width:' + (bounds.width + 1) + 'px;height:' + bounds.height +\n 'px;resize: none;outline: none;overflow: hidden;' +\n 'font-family:' + style.fontFamily + ';font-size:' + style.fontSize + 'px;text-align:' +\n (textWrapper.style.textAlign.toLocaleLowerCase()) + ';',\n 'class': 'e-diagram-text-edit'\n };\n setAttributeHtml(textarea, attributes);\n textarea.style.fontWeight = (style.bold) ? 'bold' : '';\n textarea.style.fontStyle = (style.italic) ? 'italic' : '';\n textarea.style.textDecoration = (style.textDecoration) ? style.textDecoration : '';\n textarea.appendChild(document.createTextNode(text));\n this.activeLabel.parentId = node.id;\n this.activeLabel.id = id;\n textWrapper.visible = false;\n this.updateDiagramObject(node);\n this.diagramActions = this.diagramActions | DiagramAction.TextEdit;\n this.diagramCanvas.appendChild(textEditing);\n EventHandler.add(textarea, 'input', this.eventHandler.inputChange, this.eventHandler);\n EventHandler.add(textarea, 'focusout', this.focusOutEdit, this);\n textarea.focus();\n textarea.select();\n }\n }\n }\n };\n /**\n * Automatically updates the diagram objects based on the type of the layout\n */\n Diagram.prototype.doLayout = function () {\n var update = false;\n var layout;\n var propChange = this.isProtectedOnChange;\n this.protectPropertyChange(true);\n var viewPort = { x: this.scroller.viewPortWidth, y: this.scroller.viewPortHeight };\n if (this.organizationalChartModule) {\n layout = this.organizationalChartModule.updateLayout(this.nodes, this.nameTable, this.layout, viewPort, this.dataSourceSettings.id);\n update = true;\n }\n else if (this.mindMapChartModule) {\n this.mindMapChartModule.updateLayout(this.nodes, this.nameTable, this.layout, viewPort, this.dataSourceSettings.id, this.dataSourceSettings.root);\n update = true;\n }\n else if (this.radialTreeModule) {\n this.radialTreeModule.updateLayout(this.nodes, this.nameTable, this.layout, viewPort);\n update = true;\n }\n else if (this.symmetricalLayoutModule) {\n this.symmetricalLayoutModule.maxIteration = this.layout.maxIteration;\n this.symmetricalLayoutModule.springLength = this.layout.springLength;\n this.symmetricalLayoutModule.springFactor = this.layout.springFactor;\n this.symmetricalLayoutModule.updateLayout(this.nodes, this.connectors, this.symmetricalLayoutModule, this.nameTable, this.layout, viewPort);\n update = true;\n }\n else if (this.complexHierarchicalTreeModule) {\n this.complexHierarchicalTreeModule.doLayout(this.nodes, this.nameTable, this.layout, viewPort);\n update = true;\n }\n if (update) {\n this.preventUpdate = true;\n var connectors = {};\n for (var _i = 0, _a = this.nodes; _i < _a.length; _i++) {\n var obj = _a[_i];\n var node = obj;\n this.updateIcon(node);\n this.updateDefaultLayoutIcons(node);\n this.nodePropertyChange(node, {}, { offsetX: node.offsetX, offsetY: node.offsetY }, true);\n node.wrapper.measure(new Size(node.wrapper.width, node.wrapper.height));\n node.wrapper.arrange(node.wrapper.desiredSize);\n if (node.inEdges.length > 0) {\n for (var j = 0; j < node.inEdges.length; j++) {\n var connector = this.nameTable[node.inEdges[j]];\n connectors[connector.id] = connector;\n }\n }\n if (node.outEdges.length > 0) {\n for (var k = 0; k < node.outEdges.length; k++) {\n var connection = this.nameTable[node.outEdges[k]];\n connectors[connection.id] = connection;\n }\n }\n }\n for (var _b = 0, _c = Object.keys(connectors); _b < _c.length; _b++) {\n var conn = _c[_b];\n var connector = connectors[conn];\n var points = this.getPoints(connector);\n updateConnector(connector, points);\n connector.wrapper.measure(new Size(undefined, undefined));\n connector.wrapper.arrange(connector.wrapper.desiredSize);\n this.updateQuad(connector);\n }\n this.preventUpdate = false;\n this.updatePage();\n this.refreshDiagramLayer();\n }\n if (!propChange) {\n this.protectPropertyChange(propChange);\n }\n return layout;\n };\n /**\n * Serializes the diagram control as a string\n */\n Diagram.prototype.saveDiagram = function () {\n return serialize(this);\n };\n /**\n * Converts the given string as a Diagram Control\n * @param data Defines the behavior of the diagram to be loaded\n */\n Diagram.prototype.loadDiagram = function (data) {\n return deserialize(data, this);\n };\n /**\n * To export Diagram\n * @param options defines the how the image to be exported.\n */\n Diagram.prototype.exportDiagram = function (options) {\n if (this.printandExportModule) {\n var data = this.printandExportModule.exportDiagram(options);\n return data;\n }\n return '';\n };\n /**\n * To print Diagram\n * @param optons defines how the image to be printed.\n */\n Diagram.prototype.print = function (options) {\n if (this.printandExportModule) {\n this.printandExportModule.print(options);\n }\n };\n /**\n * Add ports at the run time\n */\n Diagram.prototype.addPorts = function (obj, ports) {\n var newObj;\n if (ports.length > 1) {\n this.startGroupAction();\n }\n for (var i = 0; i < ports.length; i++) {\n newObj = new PointPort(obj, 'ports', ports[i], true);\n obj.ports.push(newObj);\n var canvas = obj.wrapper;\n canvas.children.push(obj.initPortWrapper(obj.ports[obj.ports.length - 1]));\n if (!(this.diagramActions & DiagramAction.UndoRedo) && !(this.diagramActions & DiagramAction.Group)) {\n var entry = {\n type: 'PortCollectionChanged', changeType: 'Insert', undoObject: cloneObject(newObj),\n redoObject: cloneObject(obj), category: 'Internal'\n };\n this.addHistoryEntry(entry);\n }\n }\n if (ports.length > 1) {\n this.endGroupAction();\n }\n obj.wrapper.measure(new Size(obj.width, obj.height));\n obj.wrapper.arrange(obj.wrapper.desiredSize);\n this.updateDiagramObject(obj);\n };\n /**\n * Add Labels at the run time\n */\n Diagram.prototype.addLabels = function (obj, labels) {\n var canvas = obj.wrapper;\n var newObj;\n if (labels.length > 1) {\n this.startGroupAction();\n }\n for (var i = 0; i < labels.length; i++) {\n if (obj instanceof Node) {\n newObj = new ShapeAnnotation(obj, 'annotations', labels[i], true);\n obj.annotations.push(newObj);\n if (obj.children) {\n var node = obj;\n for (var i_1 = 0; i_1 < node.wrapper.children.length; i_1++) {\n if (node.wrapper.children[i_1].id === 'group_container') {\n var container = node.wrapper.children[i_1];\n container.children.push(obj.initAnnotationWrapper(obj.annotations[obj.annotations.length - 1]));\n }\n }\n }\n else {\n canvas.children.push(obj.initAnnotationWrapper(obj.annotations[obj.annotations.length - 1]));\n }\n }\n else if (obj instanceof Connector) {\n newObj = new PathAnnotation(obj, 'annotations', labels[i], true);\n obj.annotations.push(newObj);\n var segment = canvas.children[0];\n var bounds = new Rect(segment.offsetX - segment.width / 2, segment.offsetY - segment.height / 2, segment.width, segment.height);\n canvas.children.push(obj.getAnnotationElement(obj.annotations[obj.annotations.length - 1], obj.intermediatePoints, bounds, this.getDescription));\n }\n if (!(this.diagramActions & DiagramAction.UndoRedo) && !(this.diagramActions & DiagramAction.Group)) {\n var entry = {\n type: 'LabelCollectionChanged', changeType: 'Insert', undoObject: cloneObject(newObj),\n redoObject: cloneObject(obj), category: 'Internal'\n };\n this.addHistoryEntry(entry);\n }\n }\n if (labels.length > 1) {\n this.endGroupAction();\n }\n obj.wrapper.measure(new Size(canvas.width, canvas.height));\n obj.wrapper.arrange(canvas.desiredSize);\n this.updateDiagramObject(obj);\n };\n /**\n * Remove Labels at the run time\n */\n Diagram.prototype.removeLabels = function (obj, labels) {\n if (labels.length > 1) {\n this.startGroupAction();\n }\n for (var j = labels.length - 1; j >= 0; j--) {\n for (var i = 0; i < obj.wrapper.children.length; i++) {\n var canvas = obj.wrapper.children[i];\n if (canvas instanceof TextElement) {\n if (canvas.id.match('_' + labels[j].id + '$')) {\n for (var k = 0; k < obj.annotations.length; k++) {\n if (canvas.id.match('_' + obj.annotations[k].id + '$')) {\n if (!(this.diagramActions & DiagramAction.UndoRedo)) {\n var entry = {\n type: 'LabelCollectionChanged', changeType: 'Remove', undoObject: cloneObject(obj.annotations[k]),\n redoObject: cloneObject(obj), category: 'Internal'\n };\n this.addHistoryEntry(entry);\n }\n obj.annotations.splice(k, 1);\n }\n }\n obj.wrapper.children.splice(i, 1);\n if (this.mode === 'SVG') {\n var element = getDiagramElement(canvas.id);\n if (element) {\n var element_1 = getDiagramElement(canvas.id);\n element_1.parentNode.removeChild(element_1);\n }\n var textElement = getDiagramElement(canvas.id + '_text');\n if (textElement) {\n element = getDiagramElement(canvas.id + '_text');\n element.parentNode.removeChild(element);\n }\n }\n else {\n this.refreshCanvasLayers();\n }\n }\n }\n }\n }\n if (labels.length > 1) {\n this.endGroupAction();\n }\n };\n /**\n * Remove Ports at the run time\n */\n Diagram.prototype.removePorts = function (obj, ports) {\n if (ports.length > 1) {\n this.startGroupAction();\n }\n for (var j = 0; j < ports.length; j++) {\n for (var i = 0; i < obj.wrapper.children.length; i++) {\n var canvas = obj.wrapper.children[i];\n if (canvas instanceof PathElement) {\n if (canvas.id.match('_' + ports[j].id + '$')) {\n for (var k = 0; k < obj.ports.length; k++) {\n if (canvas.id.match('_' + obj.ports[k].id + '$')) {\n if (!(this.diagramActions & DiagramAction.UndoRedo)) {\n var entry = {\n type: 'PortCollectionChanged', changeType: 'Remove', undoObject: cloneObject(obj.ports[k]),\n redoObject: cloneObject(obj), category: 'Internal'\n };\n this.addHistoryEntry(entry);\n }\n obj.ports.splice(k, 1);\n }\n }\n obj.wrapper.children.splice(i, 1);\n if (this.mode === 'SVG') {\n var element = getDiagramElement(canvas.id);\n element.parentNode.removeChild(element);\n }\n else {\n this.refreshCanvasLayers();\n }\n }\n }\n }\n }\n if (ports.length > 1) {\n this.endGroupAction();\n }\n };\n //public methods - end region\n //helper methods - start region\n /**\n * @private\n * @param real\n * @param rulerSize\n */\n Diagram.prototype.getSizeValue = function (real, rulerSize) {\n var value;\n if (real.toString().indexOf('px') > 0) {\n value = real.toString();\n }\n else if (real.toString().indexOf('%') > 0) {\n value = rulerSize !== undefined ? '100%' : real.toString();\n }\n else {\n value = real.toString() + 'px';\n }\n if (rulerSize) {\n var position = getRulerSize(this);\n value = 'calc(' + value + ' - ' + rulerSize + 'px)';\n }\n return value;\n };\n Diagram.prototype.renderRulers = function () {\n if (this.rulerSettings.showRulers) {\n renderOverlapElement(this);\n renderRuler(this, true);\n renderRuler(this, false);\n }\n else {\n removeRulerElements(this);\n }\n };\n Diagram.prototype.intOffPageBackground = function () {\n var position = new Size();\n position = getRulerSize(this);\n var element = document.getElementById(this.element.id + 'content');\n var width = this.getSizeValue(this.width, position.width);\n var height = this.getSizeValue(this.height, position.height);\n var style = this.rulerSettings.showRulers ?\n 'width:' + width + '; height:' + height + ';' +\n 'top:' + position.height + 'px;left:' + position.width + 'px;' +\n 'overflow: scroll;position:absolute;overflow:auto;' :\n 'width:' + width + '; height:' + height + ';position:absolute;' +\n ' left:0px; top:0px;overflow: auto;';\n var attr = {\n 'id': this.element.id + 'content',\n 'tabindex': '0',\n 'style': style\n };\n if (!element) {\n this.diagramCanvas = createHtmlElement('div', attr);\n this.element.appendChild(this.diagramCanvas);\n }\n else {\n this.diagramCanvas = element;\n this.diagramCanvas.setAttribute('style', style);\n }\n this.diagramCanvas.style.background = this.backgroundColor;\n };\n Diagram.prototype.initDiagram = function () {\n this.intOffPageBackground();\n setAttributeHtml(this.element, {\n style: 'width:' + this.getSizeValue(this.width) + '; height:'\n + this.getSizeValue(this.height) + ';position:relative;overflow:hidden;'\n });\n };\n ;\n Diagram.prototype.renderBackgroundLayer = function (bounds, commonStyle) {\n var bgLayer = this.createSvg(this.element.id + '_backgroundLayer_svg', bounds.width, bounds.height);\n bgLayer.setAttribute('style', commonStyle);\n var backgroundImage = createSvgElement('g', {\n 'id': this.element.id + '_backgroundImageLayer',\n 'class': 'e-background-image-layer'\n });\n bgLayer.appendChild(backgroundImage);\n var attr = { 'id': this.element.id + '_backgroundLayer', 'class': 'e-background-layer' };\n var background = createSvgElement('g', attr);\n bgLayer.appendChild(background);\n this.diagramCanvas.appendChild(bgLayer);\n };\n Diagram.prototype.renderGridLayer = function (bounds, commonStyle) {\n var svgGridSvg = this.createSvg(this.element.id + '_gridline_svg', bounds.width, bounds.height);\n svgGridSvg.setAttribute('class', 'e-grid-layer');\n var svgGrid = createSvgElement('g', { 'id': this.element.id + '_gridline', 'width': '100%', 'height': '100%' });\n var rect = createSvgElement('rect', {\n 'id': this.element.id + '_grid_rect', 'x': '0', 'y': '0', 'width': '100%', 'height': '100%',\n 'fill': 'url(#' + this.element.id + '_pattern)'\n });\n svgGrid.appendChild(rect);\n svgGridSvg.appendChild(svgGrid);\n this.diagramCanvas.appendChild(svgGridSvg);\n setAttributeSvg(svgGridSvg, { 'style': commonStyle });\n };\n Diagram.prototype.renderDiagramLayer = function (bounds, commonStyle) {\n var attributes;\n this.diagramLayerDiv = document.createElement('div');\n attributes = {\n 'id': this.element.id + '_diagramLayer_div',\n 'style': 'width:' + bounds.width + 'px; height:' + bounds.height + 'px;' + commonStyle\n };\n setAttributeHtml(this.diagramLayerDiv, attributes);\n if (this.mode === 'SVG') {\n var diagramSvg = this.createSvg(this.element.id + '_diagramLayer_svg', bounds.width, bounds.height);\n diagramSvg.setAttribute('style', ' pointer-events: none; ');\n diagramSvg.setAttribute('class', 'e-diagram-layer');\n var diagramLayer = createSvgElement('g', { 'id': this.element.id + '_diagramLayer' });\n var transformationLayer = createSvgElement('g', {});\n this.diagramLayer = diagramLayer;\n diagramLayer.setAttribute('style', 'pointer-events: all;');\n transformationLayer.appendChild(diagramLayer);\n diagramSvg.appendChild(transformationLayer);\n this.diagramLayerDiv.appendChild(diagramSvg);\n }\n else {\n this.diagramLayer = CanvasRenderer.createCanvas(this.element.id + '_diagram', bounds.width, bounds.height);\n this.diagramLayer.setAttribute('style', 'position:absolute;left:0px;top:0px;');\n this.diagramLayerDiv.appendChild(this.diagramLayer);\n }\n this.diagramCanvas.appendChild(this.diagramLayerDiv);\n };\n Diagram.prototype.initLayers = function () {\n var commonStyle = 'position:absolute;top:0px;left:0px;overflow:hidden;pointer-events:none;';\n var container = document.getElementById(this.element.id);\n var bounds = container.getBoundingClientRect();\n var scrollerSize = getScrollerWidth();\n this.scroller.scrollerWidth = scrollerSize;\n this.scroller.setViewPortSize(bounds.width, bounds.height);\n this.renderRulers();\n createMeasureElements();\n // this.renderBackgroundImageLayer(bounds, commonStyle);\n this.renderBackgroundLayer(bounds, commonStyle);\n this.renderGridLayer(bounds, commonStyle);\n this.renderDiagramLayer(bounds, commonStyle);\n this.renderHTMLLayer(bounds, commonStyle);\n this.renderPortsExpandLayer(bounds, commonStyle);\n this.renderNativeLayer(bounds, commonStyle);\n this.renderAdornerLayer(bounds, commonStyle);\n };\n Diagram.prototype.renderAdornerLayer = function (bounds, commonStyle) {\n var divElement = createHtmlElement('div', {\n 'id': this.element.id + '_diagramAdornerLayer',\n 'style': 'width:' + bounds.width + 'px;height:' + bounds.height + 'px;' + commonStyle\n });\n var svgAdornerSvg = this.createSvg(this.element.id + '_diagramAdorner_svg', bounds.width, bounds.height);\n svgAdornerSvg.setAttribute('class', 'e-adorner-layer');\n svgAdornerSvg.setAttribute('style', 'pointer-events:none;');\n this.adornerLayer = createSvgElement('g', { 'id': this.element.id + '_diagramAdorner' });\n this.adornerLayer.setAttribute('style', ' pointer-events: all; ');\n svgAdornerSvg.appendChild(this.adornerLayer);\n divElement.appendChild(svgAdornerSvg);\n this.diagramCanvas.appendChild(divElement);\n var svgSelector = createSvgElement('g', { 'id': this.element.id + '_SelectorElement' });\n this.adornerLayer.appendChild(svgSelector);\n setAttributeSvg(svgAdornerSvg, { style: 'pointer-events:none;' });\n };\n Diagram.prototype.renderPortsExpandLayer = function (bounds, commonStyle) {\n var svgPortsSvg = this.createSvg(this.element.id + '_diagramPorts_svg', bounds.width, bounds.height);\n svgPortsSvg.setAttribute('class', 'e-ports-expand-layer');\n var svgPortsLayer = createSvgElement('g', {\n 'id': this.element.id + '_diagramPorts',\n 'class': 'e-ports-layer',\n 'style': 'pointer-events: all;'\n });\n svgPortsSvg.appendChild(svgPortsLayer);\n var svgExpandLayer = createSvgElement('g', {\n 'id': this.element.id + '_diagramExpander',\n 'class': 'e-expand-layer',\n 'style': 'pointer-events: all;'\n });\n svgPortsSvg.appendChild(svgExpandLayer);\n this.diagramCanvas.appendChild(svgPortsSvg);\n setAttributeSvg(svgPortsSvg, { 'style': commonStyle });\n };\n Diagram.prototype.renderHTMLLayer = function (bounds, commonStyle) {\n this.htmlLayer = createHtmlElement('div', {\n 'id': this.element.id + '_htmlLayer',\n 'style': 'width:' + bounds.width + 'px; height:' + bounds.height + 'px;position:absolute;top:0px;' +\n 'left:0px;overflow:hidden;pointer-events:none;',\n 'class': 'e-html-layer'\n });\n var htmlLayerDiv = createHtmlElement('div', {\n 'id': this.element.id + '_htmlLayer_div',\n 'style': 'position:absolute;top:0px;left:0px;pointer-events:all;'\n });\n this.htmlLayer.appendChild(htmlLayerDiv);\n this.diagramCanvas.appendChild(this.htmlLayer);\n };\n Diagram.prototype.renderNativeLayer = function (bounds, commonStyle) {\n var nativeLayerSvg = this.createSvg(this.element.id + '_nativeLayer_svg', bounds.width, bounds.height);\n var nativeLayer = createSvgElement('g', { 'id': this.element.id + '_nativeLayer', 'style': 'pointer-events:all;' });\n nativeLayerSvg.appendChild(nativeLayer);\n this.diagramLayerDiv.appendChild(nativeLayerSvg);\n setAttributeSvg(nativeLayerSvg, { 'class': 'e-native-layer', 'style': commonStyle });\n };\n Diagram.prototype.createSvg = function (id, width, height) {\n var svgObj = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n setAttributeSvg(svgObj, { 'id': id, 'width': width, 'height': height });\n return svgObj;\n };\n Diagram.prototype.initObjects = function (isLoad) {\n if (!this.isLoading) {\n this.initData();\n }\n this.initLayerObjects();\n this.updateBridging(isLoad);\n };\n Diagram.prototype.initLayerObjects = function () {\n var hasLayers = this.layers.length > 1;\n var set = false;\n var connectors = [];\n var tempTabel = {};\n var bpmnTable = {};\n var tempNode = [];\n var groups = [];\n var i = 0;\n for (var _i = 0, _a = this.nodes; _i < _a.length; _i++) {\n var obj = _a[_i];\n obj.id = obj.id || randomId();\n this.addToLayer(obj, hasLayers);\n tempTabel[obj.id] = obj;\n }\n for (var _b = 0, _c = this.connectors; _b < _c.length; _b++) {\n var obj = _c[_b];\n obj.id = obj.id || randomId();\n this.addToLayer(obj, hasLayers);\n tempTabel[obj.id] = obj;\n }\n for (var _d = 0, _e = this.layers; _d < _e.length; _d++) {\n var layer = _e[_d];\n for (var _f = 0, _g = layer.objects; _f < _g.length; _f++) {\n var obj = _g[_f];\n if (tempTabel[obj]) {\n if (!(tempTabel[obj] instanceof Connector)) {\n if (tempTabel[obj].children) {\n groups.push(obj);\n }\n else if ((tempTabel[obj].shape instanceof BpmnShape) &&\n tempTabel[obj].shape.activity.subProcess.processes &&\n tempTabel[obj].shape.activity.subProcess.processes.length > 0) {\n bpmnTable[tempTabel[obj].id] = obj;\n }\n else {\n this.initNodes(tempTabel[obj], layer);\n }\n }\n else {\n var connector = tempTabel[obj];\n if (connector.sourceID && connector.targetID) {\n var sourceNode = tempTabel[connector.sourceID];\n var targetNode = tempTabel[connector.targetID];\n if (sourceNode && sourceNode.wrapper && targetNode && targetNode.wrapper) {\n this.initConnectors(tempTabel[obj], layer);\n }\n else {\n connectors.push(tempTabel[obj]);\n }\n }\n else {\n this.initConnectors(tempTabel[obj], layer);\n }\n }\n }\n }\n if (this.bpmnModule) {\n for (var _h = 0, _j = this.bpmnModule.textAnnotationConnectors; _h < _j.length; _h++) {\n var obj = _j[_h];\n this.initConnectors(obj, layer, false);\n }\n }\n }\n for (var _k = 0, _l = Object.keys(bpmnTable); _k < _l.length; _k++) {\n var obj = _l[_k];\n this.initObject(tempTabel[obj]);\n this.bpmnModule.updateDocks(tempTabel[obj], this);\n }\n for (var _m = 0, groups_1 = groups; _m < groups_1.length; _m++) {\n var obj = groups_1[_m];\n var layer = this.commandHandler.getObjectLayer(obj);\n this.initNodes(tempTabel[obj], layer);\n }\n for (var _o = 0, connectors_1 = connectors; _o < connectors_1.length; _o++) {\n var connector = connectors_1[_o];\n var layer = this.commandHandler.getObjectLayer(connector.id);\n this.initConnectors(connector, layer);\n }\n };\n Diagram.prototype.addToLayer = function (obj, hasLayers) {\n var layer;\n if (hasLayers) {\n layer = this.commandHandler.getObjectLayer(obj.id);\n }\n if (!hasLayers || !layer) {\n if (this.activeLayer.objects.indexOf(obj.id) === -1) {\n this.activeLayer.objects.push(obj.id);\n }\n }\n this.setZIndex(layer || this.activeLayer, obj);\n };\n Diagram.prototype.updateLayer = function (newProp) {\n for (var _i = 0, _a = Object.keys(newProp.layers); _i < _a.length; _i++) {\n var key = _a[_i];\n var layerObject = this.layers[key].objects;\n for (var _b = 0, layerObject_1 = layerObject; _b < layerObject_1.length; _b++) {\n var obj = layerObject_1[_b];\n var node = this.nameTable[obj];\n if (newProp.layers[key].visible !== undefined) {\n this.updateElementVisibility(node.wrapper, node, newProp.layers[key].visible);\n }\n else if (newProp.layers[key].lock === true) {\n this.unSelect(node);\n }\n }\n if (newProp.layers[key].lock !== undefined) {\n this.layers[key].lock = newProp.layers[key].lock;\n }\n }\n if (this.mode !== 'SVG') {\n this.refreshDiagramLayer();\n }\n };\n Diagram.prototype.updateScrollSettings = function (newProp) {\n var hPan = (-this.scroller.horizontalOffset + newProp.scrollSettings.horizontalOffset || 0);\n var vPan = (this.scroller.verticalOffset - newProp.scrollSettings.verticalOffset || 0);\n var oldValue = {\n VerticalOffset: this.scrollSettings.verticalOffset, HorizontalOffset: this.scrollSettings.horizontalOffset,\n ViewportHeight: this.scrollSettings.viewPortHeight, ViewportWidth: this.scrollSettings.viewPortWidth,\n CurrentZoom: this.scroller.currentZoom\n };\n if (hPan !== 0 || vPan !== 0) {\n this.pan(hPan, vPan);\n }\n var newValue = {\n VerticalOffset: this.scrollSettings.verticalOffset, HorizontalOffset: this.scrollSettings.horizontalOffset,\n ViewportHeight: this.scrollSettings.viewPortHeight, ViewportWidth: this.scrollSettings.viewPortWidth,\n CurrentZoom: this.scroller.currentZoom\n };\n var arg = {\n oldValue: oldValue, newValue: newValue, source: this\n };\n this.triggerEvent(DiagramEvent.scrollChange, arg);\n };\n Diagram.prototype.initData = function () {\n if (this.dataBindingModule) {\n if (this.dataSourceSettings.dataManager && this.dataSourceSettings.dataManager.dataSource &&\n this.dataSourceSettings.dataManager.dataSource.url !== undefined) {\n this.dataBindingModule.initSource(this.dataSourceSettings, this);\n }\n else {\n this.dataBindingModule.initData(this.dataSourceSettings, this);\n }\n }\n };\n Diagram.prototype.initNodes = function (obj, layer) {\n this.preventUpdate = true;\n this.initObject(obj, layer);\n this.preventUpdate = false;\n };\n Diagram.prototype.initConnectors = function (obj, layer, independentObj) {\n this.preventUpdate = true;\n this.initObject(obj, layer, independentObj);\n this.updateEdges(obj);\n this.preventUpdate = false;\n };\n Diagram.prototype.setZIndex = function (layer, obj) {\n //should be changed\n var currentLayer = layer;\n if ((obj).zIndex === -1) {\n while (currentLayer.zIndexTable[currentLayer.objectZIndex + 1]) {\n layer.objectZIndex++;\n }\n obj.zIndex = ++currentLayer.objectZIndex;\n }\n else {\n var index = obj.zIndex;\n if (currentLayer.zIndexTable[index]) {\n var tabelLength = Object.keys(currentLayer.zIndexTable).length;\n var j = 0;\n for (var i = 0; i < tabelLength; i++) {\n if (i === index) {\n for (var j_1 = tabelLength; j_1 > index; j_1--) {\n currentLayer.zIndexTable[j_1] = currentLayer.zIndexTable[j_1 - 1];\n if (this.nameTable[currentLayer.zIndexTable[j_1]]) {\n this.nameTable[currentLayer.zIndexTable[j_1]].zIndex = j_1;\n }\n }\n currentLayer.zIndexTable[i] = obj.id;\n }\n j++;\n }\n }\n }\n };\n Diagram.prototype.initializeDiagramLayers = function () {\n for (var _i = 0, _a = this.layers; _i < _a.length; _i++) {\n var layer = _a[_i];\n layer.zIndex = this.layers.indexOf(layer);\n this.layerZIndexTable[layer.zIndex] = layer.id;\n }\n if (this.layers.length === 0) {\n var defaultLayer = {\n id: 'default_layer', visible: true, lock: false, objects: [], zIndex: 0,\n objectZIndex: -1, zIndexTable: {}\n };\n this.commandHandler.addLayer(defaultLayer);\n }\n this.setActiveLayer(this.layers[this.layers.length - 1].id);\n };\n /** @private */\n Diagram.prototype.resetTool = function () {\n this.eventHandler.resetTool();\n };\n /** @private */\n Diagram.prototype.initObject = function (obj, layer, independentObj) {\n if (independentObj === void 0) { independentObj = true; }\n if (obj !== undefined) {\n if (independentObj) {\n if (!layer) {\n this.addToLayer(obj, false);\n layer = this.activeLayer;\n }\n //Move the common properties like zindex and id to an abstract class\n if (obj instanceof Node || obj instanceof Connector) {\n this.setZIndex(layer, obj);\n }\n }\n if (obj instanceof Node) {\n if (independentObj) {\n var getDefaults = getFunction(this.getNodeDefaults);\n if (getDefaults) {\n var defaults = getDefaults(obj, this);\n if (defaults && defaults !== obj) {\n extendObject(defaults, obj);\n }\n }\n this.initNode(obj);\n }\n }\n else if (obj instanceof Connector) {\n var getDefaults = getFunction(this.getConnectorDefaults);\n if (getDefaults) {\n var defaults = getDefaults(obj, this);\n if (defaults && defaults !== obj) {\n extendObject(defaults, obj);\n }\n if (obj.segments.length) {\n if (obj.type !== obj.segments[0].type) {\n obj.segments = [];\n }\n }\n }\n var sourceNode = this.nameTable[obj.sourceID];\n var targetNode = this.nameTable[obj.targetID];\n if (sourceNode !== undefined && canOutConnect(sourceNode)) {\n obj.sourceWrapper = this.getEndNodeWrapper(sourceNode, obj, true);\n if (obj.sourcePortID) {\n obj.sourcePortWrapper = this.getWrapper(sourceNode.wrapper, obj.sourcePortID);\n }\n }\n if (targetNode !== undefined && canInConnect(targetNode)) {\n obj.targetWrapper = this.getEndNodeWrapper(targetNode, obj, false);\n if (obj.targetPortID) {\n obj.targetPortWrapper = this.getWrapper(targetNode.wrapper, obj.targetPortID);\n }\n }\n if (!independentObj) {\n var points = obj.getConnectorPoints(obj.type);\n updateConnector(obj, points);\n }\n if (independentObj) {\n obj.init(this);\n }\n obj.wrapper.measure(new Size(undefined, undefined));\n obj.wrapper.arrange(obj.wrapper.desiredSize);\n }\n if (this.bpmnModule && obj instanceof Node\n && obj.shape.type === 'Bpmn' && obj.shape.annotations.length > 0) {\n this.bpmnModule.updateQuad(obj, this);\n }\n if (independentObj) {\n var checkBoundaryConstraints = this.commandHandler.checkBoundaryConstraints(undefined, undefined, obj.wrapper.bounds);\n if (!checkBoundaryConstraints) {\n var node = obj instanceof Node ? this.nodes : this.connectors;\n for (var i = 0; i <= node.length; i++) {\n if (node[i] && obj.id === node[i].id) {\n node.splice(i, 1);\n }\n }\n }\n layer.zIndexTable[obj.zIndex] = obj.id;\n }\n this.nameTable[obj.id] = obj;\n if (obj instanceof Node && obj.children) {\n this.updateGroupOffset(obj);\n this.groupTable[obj.id] = obj.children;\n for (var i = 0; i < obj.children.length; i++) {\n var node = (this.nameTable[obj.children[i]]);\n node.parentId = obj.id;\n }\n if (!this.isLoading && obj.rotateAngle) {\n this.commandHandler.rotateObjects(obj, [obj], obj.rotateAngle, { x: obj.offsetX, y: obj.offsetY }, false);\n }\n }\n this.updateQuad(obj);\n }\n if (obj.visible === false) {\n this.updateElementVisibility(obj.wrapper, obj, false);\n }\n };\n Diagram.prototype.updateDefaultLayoutIcons = function (node) {\n if (this.layout.type === 'OrganizationalChart' || this.layout.type === 'HierarchicalTree' ||\n this.layout.type === 'ComplexHierarchicalTree') {\n {\n this.updateDefaultLayoutIcon(node, node.expandIcon);\n this.updateDefaultLayoutIcon(node, node.collapseIcon);\n }\n }\n };\n Diagram.prototype.updateDefaultLayoutIcon = function (node, icon) {\n if (icon.shape !== 'None') {\n if (icon.horizontalAlignment === 'Auto' && icon.verticalAlignment === 'Auto' &&\n icon.offset.x === .5 && icon.offset.y === 1) {\n var iconWrapper = this.getWrapper(node.wrapper, 'icon_content');\n var offsetX = void 0;\n var offsetY = void 0;\n if (this.layout.orientation === 'TopToBottom' || this.layout.orientation === 'BottomToTop') {\n offsetX = .5;\n offsetY = this.layout.orientation === 'TopToBottom' ? 1 : 0;\n }\n else if (this.layout.orientation === 'RightToLeft' || this.layout.orientation === 'LeftToRight') {\n offsetX = this.layout.orientation === 'LeftToRight' ? 1 : 0;\n offsetY = .5;\n }\n iconWrapper.setOffsetWithRespectToBounds(offsetX, offsetY, 'Fraction');\n iconWrapper.horizontalAlignment = 'Center';\n iconWrapper.verticalAlignment = 'Center';\n node.wrapper.measure(new Size(node.wrapper.width, node.wrapper.height));\n node.wrapper.arrange(node.wrapper.desiredSize);\n }\n }\n };\n /**\n * @private\n */\n Diagram.prototype.updateGroupOffset = function (node) {\n if ((node.children && node.children.length > 0) || (node.processId)) {\n this.nameTable[node.id].offsetX = node.wrapper.offsetX;\n this.nameTable[node.id].offsetY = node.wrapper.offsetY;\n if ((node.children && node.children.length > 0)) {\n this.nameTable[node.id].width = node.wrapper.actualSize.width;\n this.nameTable[node.id].height = node.wrapper.actualSize.height;\n }\n }\n };\n Diagram.prototype.initNode = function (obj) {\n var canvas = obj.initContainer();\n var portContainer = new Canvas();\n var content;\n if (!canvas.children) {\n canvas.children = [];\n }\n if (obj.children) {\n canvas.measureChildren = false;\n for (var i = 0; i < obj.children.length; i++) {\n if (this.nameTable[obj.children[i]]) {\n canvas.children.push(this.nameTable[obj.children[i]].wrapper);\n }\n }\n portContainer.id = 'group_container';\n portContainer.style.fill = 'none';\n portContainer.style.strokeColor = 'none';\n portContainer.horizontalAlignment = 'Stretch';\n portContainer.verticalAlignment = 'Stretch';\n portContainer.children = [];\n canvas.children.push(portContainer);\n }\n else {\n var setNodeTemplate = getFunction(this.setNodeTemplate);\n if (setNodeTemplate) {\n content = setNodeTemplate(obj, this);\n }\n if (!content) {\n content = obj.init(this);\n }\n canvas.children.push(content);\n }\n // tslint:disable-next-line:no-any\n var wrapperContent;\n wrapperContent = getFunction(this.getDescription);\n if (wrapperContent) {\n (obj.children ? canvas : content).description = wrapperContent;\n }\n else {\n (obj.children ? canvas : content).description = obj.annotations.length ? obj.annotations[0].content : obj.id;\n }\n var container = obj.children ? portContainer : canvas;\n obj.initAnnotations(this.getDescription, container);\n obj.initPorts(this.getDescription, container);\n obj.initIcons(this.getDescription, this.layout, container);\n canvas.measure(new Size(obj.width, obj.height));\n canvas.arrange(canvas.desiredSize);\n };\n Diagram.prototype.canExecute = function () {\n return true;\n };\n Diagram.prototype.initViews = function () {\n if (!this.isLoading) {\n this.views.push(this.element.id);\n this.views[this.element.id] = this;\n }\n };\n Diagram.prototype.initCommands = function () {\n var i;\n var newCommands = this.commandManager.commands;\n var commands = {\n 'copy': {\n execute: this.copyCommand.bind(this), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.C, keyModifiers: KeyModifiers.Control }\n },\n 'paste': {\n execute: this.pasteCommand.bind(this), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.V, keyModifiers: KeyModifiers.Control }\n },\n 'cut': {\n execute: this.cutCommand.bind(this), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.X, keyModifiers: KeyModifiers.Control }\n },\n 'delete': {\n execute: this.removeCommand.bind(this), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.Delete }\n },\n 'selectAll': {\n execute: this.selectAll.bind(this), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.A, keyModifiers: KeyModifiers.Control }\n },\n 'undo': {\n execute: this.undo.bind(this), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.Z, keyModifiers: KeyModifiers.Control }\n },\n 'redo': {\n execute: this.redo.bind(this), canExecute: this.canExecute.bind(this),\n gesture: { key: Keys.Y, keyModifiers: KeyModifiers.Control }\n },\n 'nudgeUp': {\n execute: this.nudgeCommand.bind(this, 'Up'),\n canExecute: this.canExecute.bind(this), gesture: { key: Keys.Up },\n parameter: 'up'\n },\n 'nudgeRight': {\n execute: this.nudgeCommand.bind(this, 'Right'),\n canExecute: this.canExecute.bind(this), gesture: { key: Keys.Right },\n parameter: 'right'\n },\n 'nudgeDown': {\n execute: this.nudgeCommand.bind(this, 'Down'),\n canExecute: this.canExecute.bind(this), gesture: { key: Keys.Down },\n parameter: 'down'\n },\n 'nudgeLeft': {\n execute: this.nudgeCommand.bind(this, 'Left'),\n canExecute: this.canExecute.bind(this), gesture: { key: Keys.Left },\n parameter: 'left'\n },\n 'startEdit': {\n execute: this.startEditCommad.bind(this),\n canExecute: this.canExecute.bind(this), gesture: { key: Keys.F2 }\n },\n 'endEdit': {\n execute: this.endEditCommand.bind(this),\n canExecute: this.canExecute.bind(this), gesture: { key: Keys.Escape }\n },\n 'focusToNextItem': {\n // execute: this.focusToItem.bind(this),\n canExecute: this.canExecute.bind(this), gesture: { key: Keys.Tab }\n },\n 'focusToPreviousItem': {\n // execute: this.focusToItem.bind(this),\n canExecute: this.canExecute.bind(this), gesture: { key: Keys.Tab, keyModifiers: KeyModifiers.Control }\n },\n 'selectFocusedItem': {\n execute: this.startEditCommad.bind(this),\n canExecute: this.canExecute.bind(this), gesture: { key: Keys.Enter }\n },\n };\n this.initCommandManager(newCommands, commands);\n };\n Diagram.prototype.overrideCommands = function (newCommand, commands) {\n var command;\n for (var _i = 0, _a = Object.keys(commands); _i < _a.length; _i++) {\n var key = _a[_i];\n command = commands[key];\n if (newCommand.gesture.key === command.gesture.key && newCommand.gesture.keyModifiers === command.gesture.keyModifiers) {\n delete commands[key];\n break;\n }\n }\n };\n Diagram.prototype.initCommandManager = function (newCommands, commands) {\n var i = 0;\n if (newCommands) {\n for (i = 0; i < newCommands.length; i++) {\n if (commands[newCommands[i].name] && newCommands[i]) {\n if (newCommands[i].canExecute) {\n commands[newCommands[i].name].canExecute = newCommands[i].canExecute;\n }\n if (newCommands[i].execute) {\n commands[newCommands[i].name].execute = newCommands[i].execute;\n }\n if (newCommands[i].gesture.key || newCommands[i].gesture.keyModifiers) {\n commands[newCommands[i].name].gesture = newCommands[i].gesture;\n }\n if (newCommands[i].parameter !== '') {\n commands[newCommands[i].name].parameter = newCommands[i].parameter;\n }\n }\n else {\n this.overrideCommands(newCommands[i], commands);\n commands[newCommands[i].name] = {\n execute: newCommands[i].execute, canExecute: newCommands[i].canExecute, gesture: newCommands[i].gesture,\n parameter: newCommands[i].parameter\n };\n }\n }\n }\n this.commands = commands;\n };\n /** @private */\n Diagram.prototype.updateNodeEdges = function (node) {\n for (var _i = 0, _a = node.inEdges; _i < _a.length; _i++) {\n var edge = _a[_i];\n if (this.nameTable[edge]) {\n this.nameTable[edge].targetID = '';\n }\n }\n for (var _b = 0, _c = node.outEdges; _b < _c.length; _b++) {\n var edge = _c[_b];\n if (this.nameTable[edge]) {\n this.nameTable[edge].sourceID = '';\n }\n }\n node.inEdges = [];\n node.outEdges = [];\n };\n /** @private */\n Diagram.prototype.updateIconVisibility = function (node, visibility) {\n for (var i = 0; i < node.wrapper.children.length; i++) {\n var child = node.wrapper.children[i];\n var id = child.id.split(node.id)[1];\n if (child.id && id && id.match('^_icon')) {\n child.visible = visibility;\n this.updateDiagramContainerVisibility(child, visibility);\n }\n }\n };\n /** @private */\n Diagram.prototype.updateEdges = function (obj) {\n if (obj.sourceID !== undefined && obj.sourceID !== '') {\n var node = this.nameTable[obj.sourceID];\n if (node && node.outEdges && node.outEdges.length === 0) {\n node.outEdges = [];\n }\n if (node && node.outEdges && node.outEdges.indexOf(obj.id) === -1) {\n node.outEdges.push(obj.id);\n }\n }\n if (obj.targetID !== undefined && obj.targetID !== '') {\n var node = this.nameTable[obj.targetID];\n if (node && node.inEdges && node.inEdges.length === 0) {\n node.inEdges = [];\n }\n if (node && node.inEdges && node.inEdges.indexOf(obj.id) === -1) {\n node.inEdges.push(obj.id);\n }\n if (node && node.visible && node.outEdges) {\n var value = node.outEdges.length === 0 ? false : true;\n this.updateIconVisibility(node, value);\n }\n }\n };\n /** @private */\n Diagram.prototype.refreshDiagram = function () {\n this.initLayerObjects();\n this.doLayout();\n this.updateBridging();\n this.scroller.setSize();\n };\n /** @private */\n Diagram.prototype.updateDiagramObject = function (obj) {\n var view;\n for (var _i = 0, _a = this.views; _i < _a.length; _i++) {\n var temp = _a[_i];\n view = this.views[temp];\n if (view.mode === 'SVG' && this.diagramActions) {\n var htmlLayer = getHTMLLayer(this.element.id);\n var diagramElementsLayer = document.getElementById(view.element.id + '_diagramLayer');\n this.diagramRenderer.updateNode(obj.wrapper, diagramElementsLayer, htmlLayer, undefined);\n }\n else {\n this.refreshCanvasDiagramLayer(view);\n }\n }\n };\n /** @private */\n Diagram.prototype.getObjectsOfLayer = function (objectArray) {\n var nodeArray = [];\n for (var _i = 0, objectArray_1 = objectArray; _i < objectArray_1.length; _i++) {\n var obj = objectArray_1[_i];\n if (this.nameTable[obj]) {\n nodeArray.push(this.nameTable[obj]);\n }\n }\n return nodeArray;\n };\n /** @private */\n Diagram.prototype.refreshDiagramLayer = function () {\n var view;\n for (var _i = 0, _a = this.views; _i < _a.length; _i++) {\n var temp = _a[_i];\n view = this.views[temp];\n switch (view.mode) {\n case 'SVG':\n this.refreshSvgDiagramLayer(view);\n break;\n case 'Canvas':\n this.refreshCanvasLayers();\n break;\n }\n }\n };\n /** @private */\n Diagram.prototype.refreshCanvasLayers = function () {\n for (var _i = 0, _a = this.views; _i < _a.length; _i++) {\n var temp = _a[_i];\n var view = this.views[temp];\n this.refreshCanvasDiagramLayer(view);\n }\n };\n Diagram.prototype.renderBasicElement = function (view) {\n var htmlLayer = getHTMLLayer(view.element.id);\n for (var i = 0; i < this.basicElements.length; i++) {\n var element = this.basicElements[i];\n if (element instanceof Container) {\n element.prevRotateAngle = 0;\n }\n element.measure(new Size(element.width, element.height));\n element.arrange(element.desiredSize);\n view.diagramRenderer.renderElement(element, view.diagramLayer, htmlLayer);\n }\n };\n Diagram.prototype.refreshElements = function (view) {\n if (!this.isDestroyed) {\n this.clearCanvas(view);\n if (view instanceof Diagram) {\n view.diagramLayer.getContext('2d').setTransform(view.scroller.currentZoom, 0, 0, view.scroller.currentZoom, 0, 0);\n view.diagramLayer.getContext('2d').scale(1.5, 1.5);\n }\n var htmlLayer = getHTMLLayer(view.element.id);\n var bounds = this.spatialSearch.getPageBounds();\n this.renderDiagramElements(view.diagramLayer, view.diagramRenderer, htmlLayer);\n if (view instanceof Diagram) {\n view.diagramLayer.style.transform = 'scale(' + (2 / 3) + ')';\n view.diagramLayer.style.transformOrigin = '0 0';\n }\n this.renderTimer = null;\n }\n };\n /** @private */\n Diagram.prototype.refreshCanvasDiagramLayer = function (view) {\n var _this = this;\n if (view.mode !== 'SVG' && !this.isDestroyed) {\n if (this.basicElements.length > 0) {\n this.renderBasicElement(view);\n }\n if (!this.diagramActions || (this.diagramActions & DiagramAction.Render) === 0) {\n this.refreshElements(view);\n }\n else if (!this.renderTimer) {\n this.renderTimer = setTimeout(function () {\n _this.refreshElements(view);\n }, 40);\n }\n }\n };\n /** @private */\n Diagram.prototype.updatePortVisibility = function (node, portVisibility, inverse) {\n var portElement;\n var drawingObject = !(this.drawingObject && this.drawingObject.shape) ? true : false;\n if (node instanceof Node && drawingObject && canMove(node)) {\n var ports = node.ports;\n var changed = false;\n for (var i = 0; i < ports.length; i++) {\n portElement = this.getWrapper(node.wrapper, ports[i].id);\n if (portVisibility & PortVisibility.Hover || portVisibility & PortVisibility.Connect) {\n if (checkPortRestriction(ports[i], portVisibility)) {\n portElement.visible = !inverse;\n changed = true;\n }\n }\n }\n if (changed) {\n this.updateDiagramObject(node);\n }\n }\n };\n /** @private */\n Diagram.prototype.refreshSvgDiagramLayer = function (view) {\n var container = document.getElementById(view.element.id);\n var bounds = container.getBoundingClientRect();\n var node;\n var element;\n var connector;\n var diagramElementsLayer = document.getElementById(view.element.id + '_diagramLayer');\n var htmlLayer = getHTMLLayer(view.element.id);\n for (var i = 0; i < this.basicElements.length; i++) {\n element = this.basicElements[i];\n element.measure(new Size(element.width, element.height));\n element.arrange(element.desiredSize);\n this.diagramRenderer.renderElement(element, diagramElementsLayer, htmlLayer);\n }\n this.renderDiagramElements(diagramElementsLayer, this.diagramRenderer, htmlLayer);\n };\n /** @private */\n Diagram.prototype.renderDiagramElements = function (canvas, renderer, htmlLayer, transform) {\n if (transform === void 0) { transform = true; }\n for (var _i = 0, _a = Object.keys(this.layerZIndexTable); _i < _a.length; _i++) {\n var layerId = _a[_i];\n var layer = this.commandHandler.getLayer(this.layerZIndexTable[layerId]);\n for (var _b = 0, _c = Object.keys(layer.zIndexTable); _b < _c.length; _b++) {\n var node = _c[_b];\n var element = this.nameTable[layer.zIndexTable[node]].wrapper;\n if (!(this.nameTable[layer.zIndexTable[node]].parentId)\n && !(this.nameTable[layer.zIndexTable[node]].processId)) {\n renderer.renderElement(element, canvas, htmlLayer, (!renderer.isSvgMode && transform) ? this.scroller.transform : undefined);\n }\n }\n }\n };\n /** @private */\n Diagram.prototype.updateBridging = function (isLoad) {\n if (this.bridgingModule) {\n for (var i = 0; i < this.connectors.length; i++) {\n var connector = this.connectors[i];\n this.bridgingModule.updateBridging(connector, this);\n var canvas = this.connectors[i].wrapper;\n var pathSegment = canvas.children[0];\n var data = pathSegment.data;\n connector.getSegmentElement(connector, pathSegment);\n if (pathSegment.data !== data) {\n canvas.measure(new Size());\n canvas.arrange(canvas.desiredSize);\n if (this.mode === 'SVG' && !isLoad) {\n this.updateDiagramObject(connector);\n }\n }\n }\n }\n };\n /** @private */\n Diagram.prototype.setCursor = function (cursor) {\n this.diagramRenderer.setCursor(this.diagramCanvas, cursor);\n };\n /** @private */\n Diagram.prototype.clearCanvas = function (view) {\n var width;\n var height;\n width = view.contentWidth || view.diagramLayer.width;\n height = view.contentHeight || view.diagramLayer.height;\n if (view.mode !== 'SVG') {\n var ctx = CanvasRenderer.getContext(view.diagramLayer);\n ctx.clearRect(0, 0, width, height);\n }\n };\n /** @private */\n Diagram.prototype.updateScrollOffset = function () {\n this.scroller.setScrollOffset(this.diagramCanvas.scrollLeft, this.diagramCanvas.scrollTop);\n updateRuler(this);\n };\n /** @private */\n Diagram.prototype.setOffset = function (offsetX, offsetY) {\n var container = document.getElementById(this.element.id + 'content');\n if (container) {\n container.scrollLeft = offsetX;\n container.scrollTop = offsetY;\n }\n };\n /** @private */\n Diagram.prototype.setSize = function (width, height) {\n if (this.diagramLayer && !this.preventUpdate) {\n var position = getRulerSize(this);\n width -= position.width;\n height -= position.height;\n var bounds = this.spatialSearch.getPageBounds();\n bounds.x *= this.scroller.currentZoom;\n bounds.y *= this.scroller.currentZoom;\n bounds.width *= this.scroller.currentZoom;\n bounds.height *= this.scroller.currentZoom;\n var factor = this.mode === 'SVG' ? 1 : 1.5;\n var diagramLayer = this.mode === 'SVG' ?\n getDiagramLayerSvg(this.element.id) : this.diagramLayer;\n diagramLayer.setAttribute('width', (factor * width).toString());\n diagramLayer.setAttribute('height', (factor * height).toString());\n var attr = { 'width': width.toString(), 'height': height.toString() };\n this.diagramLayerDiv.style.width = width + 'px';\n this.diagramLayerDiv.style.height = height + 'px';\n setAttributeSvg(getNativeLayerSvg(this.element.id), attr);\n setAttributeSvg(getPortLayerSvg(this.element.id), attr);\n var adornerSVG = getAdornerLayerSvg(this.element.id);\n setAttributeSvg(adornerSVG, attr);\n adornerSVG.parentNode.style.width = width + 'px';\n adornerSVG.parentNode.style.height = height + 'px';\n var gridLayer = getGridLayerSvg(this.element.id);\n setAttributeSvg(gridLayer, attr);\n this.diagramRenderer.updateGrid(this.snapSettings, gridLayer, this.scroller.transform, this.rulerSettings, this.hRuler, this.vRuler);\n setAttributeSvg(getBackgroundLayerSvg(this.element.id), attr);\n this.htmlLayer.style.width = width + 'px';\n this.htmlLayer.style.height = height + 'px';\n this.diagramRenderer.transformLayers(this.scroller.transform, this.mode === 'SVG');\n if (this.mode !== 'SVG') {\n this.refreshDiagramLayer();\n }\n this.updateSelector();\n this.renderPageBreaks(bounds);\n }\n };\n /**\n * Defines how to remove the Page breaks\n * @private\n */\n Diagram.prototype.removePageBreaks = function () {\n if (this.diagramLayer) {\n var line = getBackgroundLayer(this.element.id);\n if (line && line.childNodes) {\n var length_1 = line.childNodes.length;\n for (var i = 0; i < length_1; i++) {\n line.removeChild(line.childNodes[0]);\n }\n }\n }\n };\n /**\n * Defines how the page breaks has been rendered\n * @private\n */\n Diagram.prototype.renderPageBreaks = function (bounds) {\n this.removePageBreaks();\n var backgroundLayer = getBackgroundLayer(this.element.id);\n if (backgroundLayer) {\n var i = 0;\n bounds = this.scroller.getPageBounds(true);\n var x = (this.scroller.transform.tx + bounds.x) * this.scroller.currentZoom;\n var y = (this.scroller.transform.ty + bounds.y) * this.scroller.currentZoom;\n var height = bounds.height * this.scroller.currentZoom;\n var width = bounds.width * this.scroller.currentZoom;\n DiagramRenderer.renderSvgBackGroundImage(this.pageSettings.background, this.element, x, y, width, height);\n var options = {\n id: backgroundLayer.id + 'rect', x: x,\n y: y,\n height: height,\n width: width, angle: 0, stroke: '', strokeWidth: 1,\n fill: this.pageSettings.background.color, opacity: 1,\n pivotX: 0, pivotY: 0, visible: true, dashArray: '0',\n };\n this.diagramRenderer.drawRect(backgroundLayer, options);\n if (this.pageSettings.showPageBreaks) {\n var collection = this.scroller.getPageBreak(bounds);\n for (i = 0; i < collection.length; i++) {\n this.diagramRenderer.drawLine(backgroundLayer, {\n class: 'e-diagram-page-break',\n fill: 'none', stroke: '#aaaaaa', strokeWidth: 1, dashArray: '10 10',\n opacity: 2, x: 0, y: 0, width: 0, height: 0, angle: 0, pivotX: 0, pivotY: 0, visible: true,\n startPoint: {\n x: (collection[i].x1 + this.scroller.transform.tx) * this.scroller.currentZoom,\n y: (collection[i].y1 + this.scroller.transform.ty) * this.scroller.currentZoom\n },\n endPoint: {\n x: (collection[i].x2 + this.scroller.transform.tx) * this.scroller.currentZoom,\n y: (collection[i].y2 + this.scroller.transform.ty) * this.scroller.currentZoom\n }, id: collection[i].y1 === collection[i].y2 ? 'HorizontalLines' : 'VerticalLines'\n });\n }\n }\n }\n };\n Diagram.prototype.validatePageSize = function () {\n var temp = 0;\n if (this.pageSettings.orientation === 'Portrait') {\n if (this.pageSettings.width > this.pageSettings.height) {\n temp = this.pageSettings.height;\n this.pageSettings.height = this.pageSettings.width;\n this.pageSettings.width = temp;\n }\n }\n else {\n if (this.pageSettings.height > this.pageSettings.width) {\n temp = this.pageSettings.width;\n this.pageSettings.width = this.pageSettings.height;\n this.pageSettings.height = temp;\n }\n }\n };\n /**\n * @private\n */\n Diagram.prototype.setOverview = function (overview, id) {\n if (overview) {\n if (overview) {\n this.views.push(overview.id);\n this.views[overview.id] = overview;\n overview.renderDocument(overview);\n overview.diagramRenderer.setLayers();\n overview.updateView(overview);\n this.renderNodes(overview);\n }\n }\n else {\n for (var i = 0; i < this.views.length; i++) {\n if (this.views[i] === id) {\n overview = (this.views[id]);\n }\n }\n this.views[id] = undefined;\n var index = this.views.indexOf(id);\n this.views.splice(index, 1);\n }\n };\n Diagram.prototype.renderNodes = function (overview) {\n if (overview) {\n var renderer = new DiagramRenderer(overview.id, new SvgRenderer(), false);\n var g = document.getElementById(overview.element.id + '_diagramLayer');\n var htmlLayer = getHTMLLayer(overview.element.id);\n this.renderDiagramElements(g, overview.diagramRenderer || renderer, htmlLayer);\n }\n };\n Diagram.prototype.updateThumbConstraints = function (node, selectorModel) {\n var state = 0;\n var length = node.length;\n for (var i = 0; i < length; i++) {\n var obj = node[i];\n var hideRotate = false;\n var hideResize = false;\n var thumbConstraints = selectorModel.thumbsConstraints;\n if (obj instanceof Node) {\n hideRotate = (obj.shape.type === 'Bpmn' && (obj.shape.shape === 'Activity' &&\n (obj.shape.activity.subProcess.collapsed === false)) ||\n obj.shape.shape === 'TextAnnotation');\n hideResize = (obj.shape.type === 'Bpmn' && obj.shape.shape === 'TextAnnotation');\n if (!canRotate(obj) || !(thumbConstraints & ThumbsConstraints.Rotate) || hideRotate) {\n thumbConstraints = thumbConstraints & ~ThumbsConstraints.Rotate;\n }\n if (!canResize(obj, 'SouthEast') || !(thumbConstraints & ThumbsConstraints.ResizeSouthEast) || hideResize) {\n thumbConstraints = thumbConstraints & ~ThumbsConstraints.ResizeSouthEast;\n }\n if (!canResize(obj, 'NorthWest') || !(thumbConstraints & ThumbsConstraints.ResizeNorthWest) || hideResize) {\n thumbConstraints = thumbConstraints & ~ThumbsConstraints.ResizeNorthWest;\n }\n if (!canResize(obj, 'East') || !(thumbConstraints & ThumbsConstraints.ResizeEast) || hideResize) {\n thumbConstraints = thumbConstraints & ~ThumbsConstraints.ResizeEast;\n }\n if (!canResize(obj, 'West') || !(thumbConstraints & ThumbsConstraints.ResizeWest) || hideResize) {\n thumbConstraints = thumbConstraints & ~ThumbsConstraints.ResizeWest;\n }\n if (!canResize(obj, 'North') || !(thumbConstraints & ThumbsConstraints.ResizeNorth) || hideResize) {\n thumbConstraints = thumbConstraints & ~ThumbsConstraints.ResizeNorth;\n }\n if (!canResize(obj, 'South') || !(thumbConstraints & ThumbsConstraints.ResizeSouth) || hideResize) {\n thumbConstraints = thumbConstraints & ~ThumbsConstraints.ResizeSouth;\n }\n if (!canResize(obj, 'NorthEast') || !(thumbConstraints & ThumbsConstraints.ResizeNorthEast) || hideResize) {\n thumbConstraints = thumbConstraints & ~ThumbsConstraints.ResizeNorthEast;\n }\n if (!canResize(obj, 'SouthWest') || !(thumbConstraints & ThumbsConstraints.ResizeSouthWest) || hideResize) {\n thumbConstraints = thumbConstraints & ~ThumbsConstraints.ResizeSouthWest;\n }\n }\n else {\n thumbConstraints = thumbConstraints | ThumbsConstraints.Default;\n if (canDragSourceEnd(obj)) {\n thumbConstraints = thumbConstraints | ThumbsConstraints.ConnectorSource;\n }\n else {\n thumbConstraints = thumbConstraints & ~ThumbsConstraints.ConnectorSource;\n }\n if (canDragTargetEnd(obj)) {\n thumbConstraints = thumbConstraints | ThumbsConstraints.ConnectorTarget;\n }\n else {\n thumbConstraints = thumbConstraints & ~ThumbsConstraints.ConnectorTarget;\n }\n }\n selectorModel.thumbsConstraints = thumbConstraints;\n }\n };\n /** @private */\n Diagram.prototype.renderSelector = function (multipleSelection) {\n var size = new Size();\n var selectorModel = this.selectedItems;\n var selectorConstraints = selectorModel.constraints;\n this.clearSelectorLayer();\n if (this.commandHandler.hasSelection()) {\n if (selectorModel.nodes.length === 1 && selectorModel.connectors.length === 0) {\n selectorModel.rotateAngle = selectorModel.nodes[0].rotateAngle;\n selectorModel.pivot = selectorModel.nodes[0].pivot;\n }\n selectorModel.wrapper.measure(size);\n selectorModel.wrapper.arrange(selectorModel.wrapper.desiredSize);\n selectorModel.width = selectorModel.wrapper.actualSize.width;\n selectorModel.height = selectorModel.wrapper.actualSize.height;\n selectorModel.offsetX = selectorModel.wrapper.offsetX;\n selectorModel.offsetY = selectorModel.wrapper.offsetY;\n if (selectorModel.rotateAngle !== 0) {\n for (var _i = 0, _a = selectorModel.nodes; _i < _a.length; _i++) {\n var obj = _a[_i];\n obj.offsetX = obj.wrapper.offsetX;\n obj.offsetY = obj.wrapper.offsetY;\n }\n for (var _b = 0, _c = selectorModel.connectors; _b < _c.length; _b++) {\n var conn = _c[_b];\n //update connections\n }\n }\n var bounds = this.spatialSearch.getPageBounds();\n var selectorElement = void 0;\n selectorElement = getSelectorElement(this.element.id);\n selectorModel.thumbsConstraints = ThumbsConstraints.Default;\n this.updateThumbConstraints(selectorModel.nodes, selectorModel);\n this.updateThumbConstraints(selectorModel.connectors, selectorModel);\n if (selectorModel.nodes.length + selectorModel.connectors.length === 1) {\n if (selectorModel.nodes[0] instanceof Node) {\n this.diagramRenderer.renderResizeHandle(selectorModel.nodes[0].wrapper, selectorElement, selectorModel.thumbsConstraints, this.scroller.currentZoom, selectorModel.constraints, this.scroller.transform, undefined, canMove(selectorModel.nodes[0]));\n }\n else if (selectorModel.connectors[0] instanceof Connector) {\n var connector = selectorModel.connectors[0];\n this.diagramRenderer.renderEndPointHandle(connector, selectorElement, selectorModel.thumbsConstraints, selectorModel.constraints, this.scroller.transform, connector.sourceWrapper !== undefined, connector.targetWrapper !== undefined, (this.connectorEditingToolModule && canDragSegmentThumb(connector)) ? true : false);\n }\n }\n else {\n this.diagramRenderer.renderResizeHandle(selectorModel.wrapper, selectorElement, selectorModel.thumbsConstraints, this.scroller.currentZoom, selectorModel.constraints, this.scroller.transform, undefined, canMove(selectorModel));\n }\n this.diagramRenderer.renderUserHandler(selectorModel, selectorElement, this.scroller.transform);\n }\n };\n /** @private */\n Diagram.prototype.updateSelector = function () {\n var bounds = this.spatialSearch.getPageBounds();\n var size = new Size();\n var selectorModel = this.selectedItems;\n var selectorConstraints = selectorModel.constraints;\n if (!(this.diagramActions & DiagramAction.ToolAction) && this.selectedItems.nodes.length === 1) {\n this.selectedItems.rotateAngle = this.selectedItems.nodes[0].rotateAngle;\n this.selectedItems.wrapper.rotateAngle = this.selectedItems.nodes[0].rotateAngle;\n }\n if (this.selectedItems !== undefined) {\n this.clearSelectorLayer();\n if (selectorModel.wrapper !== null && selectorModel.wrapper.children.length) {\n selectorModel.wrapper.measure(size);\n selectorModel.wrapper.arrange(selectorModel.wrapper.desiredSize);\n if (selectorModel.rotateAngle !== 0 || selectorModel.rotateAngle !== selectorModel.wrapper.prevRotateAngle) {\n for (var _i = 0, _a = selectorModel.nodes; _i < _a.length; _i++) {\n var obj = _a[_i];\n obj.offsetX = obj.wrapper.offsetX;\n obj.offsetY = obj.wrapper.offsetY;\n }\n }\n selectorModel.width = selectorModel.wrapper.actualSize.width;\n selectorModel.height = selectorModel.wrapper.actualSize.height;\n selectorModel.offsetX = selectorModel.wrapper.offsetX;\n selectorModel.offsetY = selectorModel.wrapper.offsetY;\n var selectorElement = void 0;\n selectorElement = getSelectorElement(this.element.id);\n var canHideResizers = this.eventHandler.canHideResizers();\n selectorModel.thumbsConstraints = ThumbsConstraints.Default;\n this.updateThumbConstraints(selectorModel.nodes, selectorModel);\n this.updateThumbConstraints(selectorModel.connectors, selectorModel);\n if (this.selectedItems.constraints & SelectorConstraints.UserHandle) {\n this.diagramRenderer.renderUserHandler(selectorModel, selectorElement, this.scroller.transform);\n }\n if (selectorModel.nodes.length + selectorModel.connectors.length === 1) {\n if (selectorModel.connectors[0] instanceof Connector) {\n var connector = selectorModel.connectors[0];\n this.diagramRenderer.renderEndPointHandle(connector, selectorElement, selectorModel.thumbsConstraints, selectorConstraints, this.scroller.transform, connector.sourceWrapper !== undefined, connector.targetWrapper !== undefined, (this.connectorEditingToolModule && canDragSegmentThumb(connector)) ? true : false);\n }\n else if (selectorModel.nodes[0] instanceof Node) {\n this.diagramRenderer.renderResizeHandle(selectorModel.nodes[0].wrapper, selectorElement, selectorModel.thumbsConstraints, this.scroller.currentZoom, selectorModel.constraints, this.scroller.transform, canHideResizers, canMove(selectorModel.nodes[0]));\n }\n }\n else {\n this.diagramRenderer.renderResizeHandle(selectorModel.wrapper, selectorElement, selectorModel.thumbsConstraints, this.scroller.currentZoom, selectorModel.constraints, this.scroller.transform, canHideResizers, canMove(selectorModel));\n }\n }\n }\n };\n /** @private */\n Diagram.prototype.drawSelectionRectangle = function (x, y, width, height) {\n this.clearSelectorLayer();\n this.diagramRenderer.drawSelectionRectangle(x, y, width, height, this.adornerLayer, this.scroller.transform);\n };\n /**\n * @private\n */\n Diagram.prototype.renderHighlighter = function (element) {\n var adornerSvg = getAdornerLayerSvg(this.element.id);\n this.diagramRenderer.renderHighlighter(element, adornerSvg, this.scroller.transform);\n };\n /**\n * @private\n */\n Diagram.prototype.clearHighlighter = function () {\n var adornerSvg = getAdornerLayerSvg(this.element.id);\n var highlighter = adornerSvg.getElementById(adornerSvg.id + '_highlighter');\n if (highlighter) {\n highlighter.parentNode.removeChild(highlighter);\n }\n };\n /** @private */\n Diagram.prototype.getNodesConnectors = function (selectedItems) {\n for (var i = 0; i < this.nodes.length; i++) {\n var node = this.nodes[i];\n selectedItems.push(node);\n }\n for (var i = 0; i < this.connectors.length; i++) {\n var conn = this.connectors[i];\n selectedItems.push(conn);\n }\n return selectedItems;\n };\n /** @private */\n Diagram.prototype.clearSelectorLayer = function () {\n var adornerSvg = getAdornerLayerSvg(this.element.id);\n var highlighter = adornerSvg.getElementById(adornerSvg.id + '_highlighter');\n var selectionRect = adornerSvg.getElementById(this.adornerLayer.id + '_selected_region');\n if (selectionRect) {\n selectionRect.parentNode.removeChild(selectionRect);\n }\n this.clearHighlighter();\n var childNodes = getSelectorElement(this.element.id).childNodes;\n var child;\n for (var i = childNodes.length; i > 0; i--) {\n child = childNodes[i - 1];\n child.parentNode.removeChild(child);\n }\n };\n /** @private */\n Diagram.prototype.getWrapper = function (nodes, id) {\n var wrapper;\n id = nodes.id + '_' + id;\n var container = nodes instanceof Canvas ? nodes : this.getPortContainer(this.nameTable[nodes.id]);\n for (var i = 0; i < container.children.length; i++) {\n if (id === container.children[i].id) {\n wrapper = container.children[i];\n }\n }\n return wrapper;\n };\n Diagram.prototype.getEndNodeWrapper = function (node, connector, source) {\n if (node.shape.type === 'Bpmn' && node.wrapper.children[0] instanceof Canvas) {\n if (node.shape.shape === 'Activity') {\n if (source && node.shape.activity.subProcess.type === 'Transaction'\n && connector.sourcePortID) {\n var portId = connector.sourcePortID;\n var parent_1 = node.wrapper.children[0].children[0].children[2];\n if (parent_1.children) {\n for (var _i = 0, _a = parent_1.children; _i < _a.length; _i++) {\n var child = _a[_i];\n if (child.visible && child.id === node.id + '_' + portId) {\n return child.children[0];\n }\n }\n }\n }\n return node.wrapper.children[0].children[0].children[0];\n }\n return node.wrapper.children[0].children[0];\n }\n if (!this.containsMargin(node.wrapper.children[0])) {\n if (!node.children) {\n return node.wrapper.children[0];\n }\n }\n return node.wrapper;\n };\n Diagram.prototype.containsMargin = function (node) {\n return node.margin && (node.margin.left !== 0 || node.margin.top !== 0 || node.margin.right !== 0 || node.margin.bottom !== 0);\n };\n Diagram.prototype.focusOutEdit = function () {\n this.endEdit(true);\n };\n Diagram.prototype.endEditCommand = function () {\n this.endEdit();\n };\n /**\n * @private\n */\n Diagram.prototype.endEdit = function (focusOut) {\n if (this.diagramActions & DiagramAction.TextEdit) {\n var textarea = document.getElementById(this.element.id + '_editBox');\n var text = textarea.value;\n EventHandler.remove(textarea, 'input', this.eventHandler.inputChange);\n EventHandler.remove(textarea, 'focusout', this.focusOutEdit);\n var element = document.getElementById(this.element.id + '_editTextBoxDiv');\n var args = { oldValue: element.textContent, newValue: text, cancel: false };\n var bpmnAnnotation = false;\n var node = void 0;\n element.parentNode.removeChild(element);\n var textWrapper = void 0;\n if (this.bpmnModule) {\n node = this.bpmnModule.isBpmnTextAnnotation(this.activeLabel, this);\n textWrapper = this.bpmnModule.getTextAnnotationWrapper(node, this.activeLabel.id);\n bpmnAnnotation = node ? true : false;\n if (bpmnAnnotation) {\n if (element.textContent !== text) {\n this.triggerEvent(DiagramEvent.textEdit, args);\n if (!args.cancel) {\n this.bpmnModule.updateTextAnnotationContent(node, this.activeLabel, text, this);\n }\n }\n }\n }\n if (!bpmnAnnotation) {\n node = this.nameTable[this.activeLabel.parentId];\n var deleteNode = this.eventHandler.isAddTextNode(node, true);\n if (!deleteNode && element.textContent !== text) {\n this.triggerEvent(DiagramEvent.textEdit, args);\n }\n if (!textWrapper) {\n textWrapper = this.getWrapper(node.wrapper, this.activeLabel.id);\n }\n var annotation = findAnnotation(node, this.activeLabel.id);\n if (annotation.content !== text && !args.cancel) {\n annotation.content = text;\n this.dataBind();\n this.updateSelector();\n }\n if (deleteNode) {\n this.removeObjectsFromLayer(node);\n this.removeFromAQuad(node);\n delete this.nameTable[this.activeLabel.parentId];\n if (text !== '') {\n this.clearSelection();\n var clonedObject = cloneObject(node);\n node = this.add(clonedObject);\n this.updateDiagramObject(node);\n this.commandHandler.select(this.nameTable[node.id]);\n }\n }\n }\n textWrapper.visible = true;\n this.updateDiagramObject(node);\n this.diagramActions = this.diagramActions & ~DiagramAction.TextEdit;\n if (this.activeLabel.isGroup) {\n this.endGroupAction();\n }\n this.activeLabel = { id: '', parentId: '', isGroup: false };\n }\n };\n /** @private */\n Diagram.prototype.canLogChange = function () {\n if ((this.diagramActions & DiagramAction.Render) && (!(this.diagramActions & DiagramAction.ToolAction)) &&\n (!(this.diagramActions & DiagramAction.UndoRedo)) && (!(this.diagramActions & DiagramAction.PublicMethod))) {\n return true;\n }\n else {\n return false;\n }\n };\n Diagram.prototype.modelChanged = function (newProp, oldProp) {\n if (newProp.connectors || oldProp.connectors || newProp.nodes || oldProp.connectors\n || newProp.pageSettings || oldProp.pageSettings || newProp.bridgeDirection || oldProp.bridgeDirection) {\n return true;\n }\n return false;\n };\n Diagram.prototype.resetDiagramActions = function (action) {\n var isAction = action ? true : false;\n if (this.diagramActions & DiagramAction.UndoRedo && (!isAction || (action === DiagramAction.UndoRedo))) {\n this.diagramActions = this.diagramActions & ~DiagramAction.UndoRedo;\n }\n if (this.diagramActions & DiagramAction.PublicMethod && (!isAction || action === DiagramAction.PublicMethod)) {\n this.diagramActions = this.diagramActions & ~DiagramAction.PublicMethod;\n }\n };\n /** @private */\n Diagram.prototype.removeNode = function (node) {\n this.removeObjectsFromLayer(node);\n this.removeFromAQuad(this.nameTable[node.id]);\n delete this.nameTable[node.id];\n if (node.children) {\n delete this.groupTable[node.id];\n }\n this.nodes.splice(this.nodes.indexOf(node), 1);\n };\n /** @private */\n Diagram.prototype.deleteGroup = function (node) {\n var elements = [];\n var tempNode = [];\n if (node.children) {\n tempNode = this.commandHandler.getChildren(node, elements);\n }\n for (var _i = 0, tempNode_1 = tempNode; _i < tempNode_1.length; _i++) {\n var nodes = tempNode_1[_i];\n if (this.nameTable[nodes.id]) {\n this.remove(nodes);\n }\n }\n };\n //helper methods - end region\n //property changes - start region\n /** @private */\n Diagram.prototype.updateObject = function (actualObject, oldObject, changedProp) {\n if (!(this.diagramActions & DiagramAction.ToolAction)) {\n var bound = actualObject.wrapper.children[0].bounds;\n var checkBoundaryConstraints = this.commandHandler.checkBoundaryConstraints(undefined, undefined, bound);\n if (!checkBoundaryConstraints) {\n if (actualObject instanceof Node) {\n var oldNode = oldObject;\n for (var _i = 0, _a = Object.keys(changedProp); _i < _a.length; _i++) {\n var key = _a[_i];\n switch (key) {\n case 'width':\n actualObject.width = oldNode.width;\n break;\n case 'height':\n actualObject.height = oldNode.height;\n break;\n case 'offsetX':\n actualObject.offsetX = oldNode.offsetX;\n break;\n case 'offsetY':\n actualObject.offsetY = oldNode.offsetY;\n break;\n case 'rotateAngle':\n actualObject.rotateAngle = oldNode.rotateAngle;\n break;\n }\n }\n this.nodePropertyChange(actualObject, changedProp, oldObject);\n }\n else {\n for (var _b = 0, _c = Object.keys(changedProp); _b < _c.length; _b++) {\n var key = _c[_b];\n var oldConnector = oldObject;\n var actualSourcePoint = actualObject.sourcePoint;\n var actualTargetPoint = actualObject.targetPoint;\n switch (key) {\n case 'sourcePoint':\n actualSourcePoint.x = oldConnector.sourcePoint.x || actualSourcePoint.x;\n actualSourcePoint.y = oldConnector.sourcePoint.y || actualSourcePoint.y;\n break;\n case 'targetPoint':\n actualTargetPoint.x = oldConnector.targetPoint.x || actualTargetPoint.x;\n actualTargetPoint.y = oldConnector.targetPoint.y || actualTargetPoint.y;\n }\n }\n this.connectorPropertyChange(actualObject, changedProp, oldObject);\n }\n }\n }\n };\n Diagram.prototype.nodePropertyChangeExtend = function (actualObject, oldObject, node, update) {\n if (node.style !== undefined && actualObject.shape.type !== 'Bpmn') {\n updateStyle(node.style, actualObject.wrapper.children[0]);\n update = true;\n }\n if (node.constraints !== undefined) {\n this.updateThumbConstraints(this.selectedItems.nodes, this.selectedItems);\n this.updateSelector();\n update = true;\n }\n return update;\n };\n Diagram.prototype.connectorSegmentChange = function (actualObject, existingInnerBounds) {\n var tx;\n var ty;\n var segmentChange = true;\n if (existingInnerBounds.equals(existingInnerBounds, actualObject.wrapper.bounds) === false) {\n if (actualObject.outEdges.length > 0) {\n for (var k = 0; k < actualObject.outEdges.length; k++) {\n var connector = this.nameTable[actualObject.outEdges[k]];\n if (connector.targetID !== '') {\n segmentChange = this.commandHandler.isSelected(this.nameTable[connector.targetID]) ? false : true;\n }\n else {\n segmentChange = this.commandHandler.isSelected(this.nameTable[connector.id]) ? false : true;\n }\n if (connector.type === 'Orthogonal' && connector.segments && connector.segments.length > 1 && segmentChange) {\n switch (connector.segments[0].direction) {\n case 'Bottom':\n tx = actualObject.wrapper.bounds.bottomCenter.x - existingInnerBounds.bottomCenter.x;\n ty = actualObject.wrapper.bounds.bottomCenter.y - existingInnerBounds.bottomCenter.y;\n break;\n case 'Top':\n tx = actualObject.wrapper.bounds.topCenter.x - existingInnerBounds.topCenter.x;\n ty = actualObject.wrapper.bounds.topCenter.y - existingInnerBounds.topCenter.y;\n break;\n case 'Left':\n tx = actualObject.wrapper.bounds.middleLeft.x - existingInnerBounds.middleLeft.x;\n ty = actualObject.wrapper.bounds.middleLeft.y - existingInnerBounds.middleLeft.y;\n break;\n case 'Right':\n tx = actualObject.wrapper.bounds.middleRight.x - existingInnerBounds.middleRight.x;\n ty = actualObject.wrapper.bounds.middleRight.y - existingInnerBounds.middleRight.y;\n break;\n }\n this.commandHandler.dragSourceEnd(connector, tx, ty, true, null, 'ConnectorSourceEnd', undefined, undefined, undefined, true);\n }\n }\n }\n }\n };\n /* tslint:disable */\n /** @private */\n Diagram.prototype.nodePropertyChange = function (actualObject, oldObject, node, isLayout) {\n var existingBounds = actualObject.wrapper.outerBounds;\n var existingInnerBounds = actualObject.wrapper.bounds;\n var updateConnector = false;\n var i;\n var j;\n var offsetX;\n var offsetY;\n var update;\n var tx;\n var ty;\n if (node.width !== undefined && !actualObject.children) {\n actualObject.wrapper.children[0].width = node.width;\n update = true;\n updateConnector = true;\n }\n if (node.height !== undefined && !actualObject.children) {\n actualObject.wrapper.children[0].height = node.height;\n update = true;\n updateConnector = true;\n }\n update = this.nodePropertyChangeExtend(actualObject, oldObject, node, update);\n if (node.constraints !== undefined && canShadow(oldObject) !== canShadow(node)) {\n actualObject.wrapper.children[0].shadow = canShadow(actualObject) ? actualObject.shadow : null;\n }\n if (node.offsetX !== undefined) {\n actualObject.wrapper.offsetX = node.offsetX;\n update = true;\n updateConnector = true;\n }\n if (node.offsetY !== undefined) {\n actualObject.wrapper.offsetY = node.offsetY;\n update = true;\n updateConnector = true;\n }\n if (node.pivot !== undefined) {\n actualObject.wrapper.pivot = node.pivot;\n update = true;\n }\n if (node.minWidth !== undefined) {\n actualObject.wrapper.minWidth = node.minWidth;\n update = true;\n updateConnector = true;\n }\n if (node.minHeight !== undefined) {\n actualObject.wrapper.minHeight = node.minHeight;\n update = true;\n updateConnector = true;\n }\n if (node.maxWidth !== undefined) {\n actualObject.wrapper.maxWidth = node.maxWidth;\n update = true;\n updateConnector = true;\n }\n if (node.maxHeight !== undefined) {\n actualObject.wrapper.maxHeight = node.maxHeight;\n update = true;\n updateConnector = true;\n }\n if (node.rotateAngle !== undefined) {\n actualObject.wrapper.rotateAngle = node.rotateAngle;\n update = true;\n updateConnector = true;\n }\n if (node.backgroundColor !== undefined) {\n actualObject.wrapper.style.fill = node.backgroundColor;\n }\n if (node.visible !== undefined) {\n this.updateElementVisibility(actualObject.wrapper, actualObject, actualObject.visible);\n }\n if (node.shape !== undefined && actualObject.shape.type !== 'Bpmn') {\n update = true;\n updateShape(node, actualObject, oldObject, this);\n updateConnector = true;\n }\n if (node.margin) {\n update = true;\n this.updateMargin(actualObject, node);\n updateConnector = true;\n }\n if (((node.shape !== undefined && node.shape.type === undefined) || node.width !== undefined\n || node.height !== undefined || node.style !== undefined) && actualObject.shape.type === 'Bpmn' && this.bpmnModule) {\n update = true;\n updateConnector = true;\n this.bpmnModule.updateBPMN(node, oldObject, actualObject, this);\n }\n if (node.ports !== undefined) {\n for (var _i = 0, _a = Object.keys(node.ports); _i < _a.length; _i++) {\n var key = _a[_i];\n var index = Number(key);\n update = true;\n var changedObject = node.ports[key];\n var actualPort = actualObject.ports[index];\n this.updatePort(changedObject, actualPort, actualObject.wrapper);\n }\n }\n if (node.annotations !== undefined || node.width !== undefined) {\n for (var _b = 0, _c = Object.keys(node.annotations || actualObject.annotations); _b < _c.length; _b++) {\n var key = _c[_b];\n var index = Number(key);\n update = true;\n var changedObject = node.annotations ? node.annotations[key] : actualObject.annotations;\n var actualAnnotation = actualObject.annotations[index];\n if (actualAnnotation) {\n var updateSize = actualObject.width ? true : false;\n this.updateAnnotation(changedObject, actualAnnotation, actualObject.wrapper, actualObject, updateSize);\n }\n }\n }\n if (node.expandIcon !== undefined || node.collapseIcon !== undefined || node.isExpanded !== undefined) {\n this.updateIcon(actualObject);\n this.updateDefaultLayoutIcons(actualObject);\n if (node.isExpanded !== undefined) {\n this.commandHandler.expandNode(actualObject, true, this);\n }\n update = true;\n }\n if (node.tooltip !== undefined) {\n this.updateTooltip(actualObject, node);\n }\n if (update) {\n if (!(this.diagramActions & DiagramAction.ToolAction)) {\n if (this.checkSelectedItem(actualObject)) {\n this.updateSelector();\n }\n }\n if (this.bpmnModule !== undefined) {\n this.bpmnModule.updateTextAnnotationProp(actualObject, { offsetX: (oldObject.offsetX || actualObject.offsetX), offsetY: (oldObject.offsetY || actualObject.offsetY) }, this);\n }\n actualObject.wrapper.measure(new Size(actualObject.wrapper.bounds.width, actualObject.wrapper.bounds.height));\n actualObject.wrapper.arrange(actualObject.wrapper.desiredSize);\n this.updateObject(actualObject, oldObject, node);\n if (!isLayout) {\n this.connectorSegmentChange(actualObject, existingInnerBounds);\n if (updateConnector) {\n this.updateConnectorEdges(actualObject);\n }\n }\n else {\n if (actualObject && actualObject.visible && actualObject.outEdges) {\n this.updateIconVisibility(actualObject, (actualObject.outEdges.length === 0 ? false : true));\n }\n }\n if (this.bpmnModule !== undefined) {\n this.bpmnModule.updateDocks(actualObject, this);\n }\n this.updateGroupOffset(actualObject);\n if (existingBounds.equals(existingBounds, actualObject.wrapper.outerBounds) === false) {\n this.updateQuad(actualObject);\n }\n if (existingInnerBounds.equals(existingInnerBounds, actualObject.wrapper.bounds) === false) {\n this.updateGroupSize(actualObject);\n if (actualObject.children) {\n this.updateGroupOffset(actualObject);\n }\n }\n if (this.mode === 'SVG') {\n this.updateDiagramObject(actualObject);\n }\n }\n };\n Diagram.prototype.updateConnectorEdges = function (actualObject) {\n if (actualObject.inEdges.length > 0) {\n for (var j = 0; j < actualObject.inEdges.length; j++) {\n var connector = this.nameTable[actualObject.inEdges[j]];\n var conn = {\n sourcePoint: connector.sourcePoint, targetPoint: connector.targetPoint, sourceID: connector.sourceID,\n targetID: connector.targetID, sourcePortID: connector.sourcePortID, targetPortID: connector.targetPortID\n };\n this.connectorPropertyChange(connector, {}, conn);\n }\n }\n if (actualObject.outEdges.length > 0) {\n for (var k = 0; k < actualObject.outEdges.length; k++) {\n var connection = this.nameTable[actualObject.outEdges[k]];\n var conn = {\n sourcePoint: connection.sourcePoint, targetPoint: connection.targetPoint, sourceID: connection.sourceID,\n targetID: connection.targetID, sourcePortID: connection.sourcePortID, targetPortID: connection.targetPortID\n };\n this.connectorPropertyChange(connection, {}, conn);\n }\n }\n if (actualObject.parentId) {\n this.updateConnectorEdges(this.nameTable[actualObject.parentId]);\n }\n };\n /* tslint:enable */\n Diagram.prototype.connectorProprtyChangeExtend = function (actualObject, oldProp, newProp, updateSelector) {\n if (newProp.type !== undefined && newProp.type !== oldProp.type) {\n if (actualObject.segments.length > 0 && newProp.segments === undefined) {\n actualObject.segments = [];\n }\n }\n if ((newProp.shape !== undefined) && actualObject.shape !== undefined &&\n actualObject.shape && actualObject.shape.type === 'Bpmn' && this.bpmnModule) {\n this.bpmnModule.updateBPMNConnector(actualObject, oldProp, newProp, this);\n }\n if (actualObject.constraints !== undefined) {\n this.updateThumbConstraints(this.selectedItems.connectors, this.selectedItems);\n return updateSelector = true;\n }\n return updateSelector;\n };\n /** @private */\n Diagram.prototype.connectorPropertyChange = function (actualObject, oldProp, newProp, disableBridging) {\n var existingBounds = actualObject.wrapper.bounds;\n var updateSelector = false;\n var points = [];\n updateSelector = this.connectorProprtyChangeExtend(actualObject, oldProp, newProp, updateSelector);\n if (newProp.visible !== undefined) {\n this.updateElementVisibility(actualObject.wrapper, newProp, actualObject.visible);\n }\n if (newProp.sourcePoint !== undefined || newProp.targetPoint !== undefined\n || newProp.sourceID !== undefined || newProp.targetID !== undefined ||\n newProp.sourcePortID !== undefined || newProp.targetPortID !== undefined ||\n newProp.type !== undefined || newProp.segments !== undefined) {\n if ((newProp.sourceID !== undefined && newProp.sourceID !== oldProp.sourceID) || newProp.sourcePortID) {\n var sourceNode = this.nameTable[actualObject.sourceID];\n if (!sourceNode || canOutConnect(sourceNode)) {\n actualObject.sourceWrapper = sourceNode ? this.getEndNodeWrapper(sourceNode, actualObject, true) : undefined;\n }\n if (newProp.sourceID !== undefined && oldProp.sourceID !== undefined && oldProp.sourceID !== '') {\n var oldSource = this.nameTable[oldProp.sourceID];\n if (oldSource !== undefined && oldSource.outEdges && oldSource.outEdges.indexOf(actualObject.id) !== -1) {\n removeItem(oldSource.outEdges, actualObject.id);\n }\n }\n this.updateEdges(actualObject);\n }\n if (newProp.targetID !== undefined && newProp.targetID !== oldProp.targetID) {\n var targetNode = this.nameTable[newProp.targetID];\n if (!targetNode || canInConnect(targetNode)) {\n actualObject.targetWrapper = targetNode ? this.getEndNodeWrapper(targetNode, actualObject, false) : undefined;\n }\n if (oldProp !== undefined && oldProp.targetID !== undefined && oldProp.targetID !== '') {\n var oldTarget = this.nameTable[oldProp.targetID];\n if (oldTarget !== undefined && oldTarget.inEdges && oldTarget.inEdges.indexOf(actualObject.id) !== -1) {\n removeItem(oldTarget.inEdges, actualObject.id);\n }\n }\n this.updateEdges(actualObject);\n }\n if (newProp.sourcePortID !== undefined && newProp.sourcePortID !== oldProp.sourcePortID) {\n var source = void 0;\n if (actualObject.sourceID && this.nameTable[actualObject.sourceID]) {\n source = this.nameTable[actualObject.sourceID].wrapper;\n }\n actualObject.sourcePortWrapper = source ?\n this.getWrapper(source, newProp.sourcePortID) : undefined;\n }\n if (newProp.targetPortID !== undefined && newProp.targetPortID !== oldProp.targetPortID) {\n var target = void 0;\n if (actualObject.targetID && this.nameTable[actualObject.targetID]) {\n target = this.nameTable[actualObject.targetID].wrapper;\n }\n actualObject.targetPortWrapper = target ?\n this.getWrapper(target, newProp.targetPortID) : undefined;\n }\n points = this.getPoints(actualObject);\n }\n //Add prop change for zindex, alignments and margin\n if (newProp.style !== undefined) {\n updateStyle(newProp.style, actualObject.wrapper.children[0]);\n }\n if (points.length > 0 || newProp.sourceDecorator !== undefined || newProp.targetDecorator !== undefined ||\n newProp.cornerRadius !== undefined) {\n updateConnector(actualObject, points.length > 0 ? points : actualObject.intermediatePoints);\n if (newProp.type !== undefined) {\n updateSelector = true;\n }\n if (points.length > 0) {\n actualObject.wrapper.measure(new Size(actualObject.wrapper.width, actualObject.wrapper.height));\n actualObject.wrapper.arrange(actualObject.wrapper.desiredSize);\n if (actualObject.annotations.length) {\n for (var _i = 0, _a = actualObject.annotations; _i < _a.length; _i++) {\n var annotation = _a[_i];\n var annotationWrapper = void 0;\n annotationWrapper = this.getWrapper(actualObject.wrapper, annotation.id);\n actualObject.updateAnnotation(annotation, actualObject.intermediatePoints, actualObject.wrapper.bounds, annotationWrapper);\n }\n }\n actualObject.wrapper.measure(new Size(actualObject.wrapper.width, actualObject.wrapper.height));\n actualObject.wrapper.arrange(actualObject.wrapper.desiredSize);\n this.updateObject(actualObject, oldProp, newProp);\n } //work-around to update intersected connector bridging\n }\n if ((newProp.sourcePoint || newProp.targetPoint || newProp.segments)\n && this.diagramActions === DiagramAction.Render) {\n updateSelector = true;\n }\n if (!disableBridging) {\n this.updateBridging();\n }\n this.updateAnnotations(newProp, actualObject);\n actualObject.wrapper.measure(new Size(actualObject.wrapper.width, actualObject.wrapper.height));\n actualObject.wrapper.arrange(actualObject.wrapper.desiredSize);\n if (existingBounds.equals(existingBounds, actualObject.wrapper.bounds) === false) {\n this.updateQuad(actualObject);\n this.updateGroupSize(actualObject);\n }\n if (updateSelector === true && this.checkSelectedItem(actualObject)) {\n this.updateSelector();\n }\n if (this.mode === 'SVG') {\n this.updateDiagramObject(actualObject);\n }\n };\n Diagram.prototype.getPoints = function (actualObject, points) {\n var pts;\n pts = actualObject.getConnectorPoints(actualObject.type, points, this.layout.type === 'ComplexHierarchicalTree' || this.layout.type === 'HierarchicalTree' ?\n this.layout.orientation : undefined);\n return pts;\n };\n /**\n * update the opacity and visibility for the node once the layout animation starts\n */\n /** @private */\n Diagram.prototype.updateNodeProperty = function (element, visible, opacity) {\n if (visible === undefined) {\n this.updateElementVisibility(element, this.nameTable[element.id], visible);\n }\n else {\n element.style.opacity = opacity;\n for (var i = 0; i < element.children.length; i++) {\n if (element.children[i] instanceof Container) {\n this.updateNodeProperty(element.children[i], undefined, opacity);\n }\n element.children[i].style.opacity = opacity;\n }\n }\n };\n /**\n * checkSelected Item for Connector\n * @private\n */\n Diagram.prototype.checkSelectedItem = function (actualObject) {\n var selectorModel = this.selectedItems;\n var isSelected = false;\n var selItems = [];\n selItems = selItems.concat(selectorModel.nodes, selectorModel.connectors);\n if (selItems.length > 0) {\n if (actualObject.id === selItems[selItems.length - 1].id) {\n isSelected = true;\n }\n }\n return isSelected;\n };\n /**\n * Updates the visibility of the diagram container\n * @private\n */\n Diagram.prototype.updateDiagramContainerVisibility = function (element, visible) {\n if (element instanceof Container) {\n for (var i = 0; i < element.children.length; i++) {\n this.updateDiagramContainerVisibility(element.children[i], visible);\n }\n }\n element.visible = visible;\n };\n /**\n * Updates the visibility of the node/connector\n * @private\n */\n Diagram.prototype.updateElementVisibility = function (element, obj, visible) {\n if (visible !== undefined) {\n element.visible = visible;\n if (obj instanceof Node) {\n //content\n if (!obj.children) {\n element.children[0].visible = visible;\n this.updateDiagramContainerVisibility(element.children[0], visible);\n if (obj.shape.type === 'Bpmn' && this.bpmnModule) {\n this.bpmnModule.updateElementVisibility(obj, visible, this);\n }\n }\n else {\n for (var _i = 0, _a = obj.children; _i < _a.length; _i++) {\n var child = _a[_i];\n this.updateElementVisibility(this.nameTable[child].wrapper, this.nameTable[child], visible);\n }\n }\n //ports\n if (obj.ports) {\n for (var _b = 0, _c = obj.ports; _b < _c.length; _b++) {\n var port = _c[_b];\n if (port.visibility & PortVisibility.Visible) {\n var wrapper = this.getWrapper(element, port.id);\n wrapper.visible = visible;\n }\n }\n }\n if (obj.annotations) {\n for (var _d = 0, _e = obj.annotations; _d < _e.length; _d++) {\n var annotation = _e[_d];\n var wrapper = this.getWrapper(element, annotation.id);\n wrapper.visible = visible;\n }\n }\n }\n else {\n //path and decorators\n for (var i = 0; i < 3; i++) {\n element.children[i].visible = visible;\n }\n }\n if (obj.annotations) {\n //annotations\n for (var _f = 0, _g = obj.annotations; _f < _g.length; _f++) {\n var annotation = _g[_f];\n var wrapper = this.getWrapper(element, annotation.id);\n wrapper.visible = visible;\n }\n }\n if (obj.expandIcon || obj.collapseIcon) {\n var wrapper = this.getWrapper(element, 'icon_content');\n if (wrapper) {\n for (var i = 0; i < wrapper.children.length; i++) {\n wrapper.children[i].visible = visible;\n }\n wrapper.visible = visible;\n }\n }\n if (visible === false) {\n this.unSelect(this.nameTable[element.id]);\n }\n this.updateDiagramObject(this.nameTable[element.id]);\n }\n };\n Diagram.prototype.updateAnnotations = function (newProp, actualObject) {\n if (newProp.annotations !== undefined) {\n for (var _i = 0, _a = Object.keys(newProp.annotations); _i < _a.length; _i++) {\n var key = _a[_i];\n var index = Number(key);\n var changedObject = newProp.annotations[key];\n var actualAnnotation = actualObject.annotations[index];\n this.updateAnnotation(changedObject, actualAnnotation, actualObject.wrapper, actualObject);\n }\n }\n };\n /** @private */\n Diagram.prototype.updateAnnotation = function (changedObject, actualAnnotation, nodes, actualObject, canUpdateSize) {\n var annotationWrapper;\n var isMeasure = false;\n annotationWrapper = this.getWrapper(nodes, actualAnnotation.id);\n if (annotationWrapper !== undefined) {\n if (changedObject.width !== undefined && changedObject.height !== undefined) {\n annotationWrapper.width = changedObject.width;\n annotationWrapper.height = changedObject.height;\n isMeasure = true;\n }\n if (canUpdateSize) {\n annotationWrapper.refreshTextElement();\n }\n if (actualAnnotation instanceof ShapeAnnotation &&\n changedObject.offset !== undefined) {\n var offset = changedObject.offset;\n isMeasure = true;\n var offsetX = offset.x !== undefined ? offset.x :\n actualAnnotation.offset.x;\n var offsetY = offset.y !== undefined ? offset.y :\n actualAnnotation.offset.y;\n annotationWrapper.setOffsetWithRespectToBounds(offsetX, offsetY, 'Fraction');\n annotationWrapper.relativeMode = 'Point';\n }\n else if (actualAnnotation instanceof PathAnnotation &&\n changedObject.offset !== undefined) {\n actualObject.updateAnnotation(actualAnnotation, actualObject.intermediatePoints, actualObject.wrapper.bounds, annotationWrapper);\n }\n if ((actualAnnotation instanceof PathAnnotation) && changedObject.displacement) {\n if (changedObject.displacement.x !== undefined ||\n changedObject.displacement.y !== undefined) {\n isMeasure = true;\n }\n }\n if (changedObject.margin !== undefined) {\n isMeasure = true;\n if (changedObject.margin.bottom !== undefined) {\n annotationWrapper.margin.bottom = changedObject.margin.bottom;\n }\n if (changedObject.margin.top !== undefined) {\n annotationWrapper.margin.top = changedObject.margin.top;\n }\n if (changedObject.margin.left !== undefined) {\n annotationWrapper.margin.left = changedObject.margin.left;\n }\n if (changedObject.margin.right !== undefined) {\n annotationWrapper.margin.right = changedObject.margin.right;\n }\n }\n if (isMeasure || canUpdateSize) {\n annotationWrapper.width = (actualAnnotation.width || actualObject.width)\n - annotationWrapper.margin.left - annotationWrapper.margin.right;\n }\n if (changedObject.horizontalAlignment !== undefined) {\n annotationWrapper.horizontalAlignment = changedObject.horizontalAlignment;\n isMeasure = true;\n }\n if (changedObject.verticalAlignment !== undefined) {\n annotationWrapper.verticalAlignment = changedObject.verticalAlignment;\n isMeasure = true;\n }\n if (changedObject.visibility !== undefined) {\n annotationWrapper.visible = (nodes.visible && changedObject.visibility) ? true : false;\n }\n if (changedObject.constraints !== undefined) {\n annotationWrapper.constraints = changedObject.constraints;\n }\n if (changedObject.style !== undefined) {\n updateStyle(changedObject.style, annotationWrapper);\n }\n if (changedObject.hyperlink !== undefined) {\n updateHyperlink(changedObject.hyperlink, annotationWrapper, actualAnnotation);\n }\n if (changedObject.content !== undefined) {\n if (annotationWrapper) {\n isMeasure = true;\n annotationWrapper.content = changedObject.content;\n }\n }\n if (isMeasure === true) {\n annotationWrapper.measure(new Size(annotationWrapper.width, annotationWrapper.height));\n annotationWrapper.arrange(annotationWrapper.desiredSize);\n }\n annotationWrapper.refreshTextElement();\n // this.refresh(); this.refreshDiagramLayer();\n }\n };\n /** @private */\n Diagram.prototype.updatePort = function (changedObject, actualPort, nodes) {\n var portWrapper;\n var isMeasure = false;\n portWrapper = this.getWrapper(nodes, actualPort.id);\n if (portWrapper !== undefined) {\n if (changedObject.offset !== undefined) {\n isMeasure = true;\n var offsetX = changedObject.offset.x !== undefined ? changedObject.offset.x :\n actualPort.offset.x;\n var offsetY = changedObject.offset.y !== undefined ? changedObject.offset.y :\n actualPort.offset.y;\n portWrapper.setOffsetWithRespectToBounds(offsetX, offsetY, 'Fraction');\n portWrapper.relativeMode = 'Point';\n }\n if (changedObject.width !== undefined) {\n isMeasure = true;\n portWrapper.width = changedObject.width;\n }\n if (changedObject.height !== undefined) {\n isMeasure = true;\n portWrapper.height = changedObject.height;\n }\n if (changedObject.visibility !== undefined) {\n portWrapper.visible = (nodes.visible && checkPortRestriction(actualPort, PortVisibility.Visible)) ? true : false;\n }\n if (changedObject.margin !== undefined) {\n isMeasure = true;\n if (changedObject.margin.bottom !== undefined) {\n portWrapper.margin.bottom = changedObject.margin.bottom;\n }\n if (changedObject.margin.top !== undefined) {\n portWrapper.margin.top = changedObject.margin.top;\n }\n if (changedObject.margin.right !== undefined) {\n portWrapper.margin.right = changedObject.margin.right;\n }\n if (changedObject.margin.right !== undefined) {\n portWrapper.margin.left = changedObject.margin.left;\n }\n }\n if (changedObject.horizontalAlignment !== undefined) {\n isMeasure = true;\n portWrapper.horizontalAlignment = changedObject.horizontalAlignment;\n }\n if (changedObject.verticalAlignment !== undefined) {\n isMeasure = true;\n portWrapper.verticalAlignment = changedObject.verticalAlignment;\n }\n if (changedObject.style !== undefined) {\n if (changedObject.style.fill !== undefined) {\n portWrapper.style.fill = changedObject.style.fill;\n }\n if (changedObject.style.opacity !== undefined) {\n portWrapper.style.opacity = changedObject.style.opacity;\n }\n if (changedObject.style.strokeColor !== undefined) {\n portWrapper.style.strokeColor = changedObject.style.strokeColor;\n }\n if (changedObject.style.strokeWidth !== undefined) {\n portWrapper.style.strokeWidth = changedObject.style.strokeWidth;\n }\n if (changedObject.style.strokeDashArray !== undefined) {\n portWrapper.style.strokeDashArray = changedObject.style.strokeDashArray;\n }\n }\n if (changedObject.shape !== undefined) {\n if (portWrapper) {\n if (changedObject.shape === 'Custom' && changedObject.pathData) {\n portWrapper.data = String(changedObject.pathData);\n isMeasure = true;\n }\n else {\n var pathdata = getPortShape(changedObject.shape);\n portWrapper.data = pathdata;\n }\n }\n }\n if (isMeasure === true) {\n portWrapper.measure(new Size(portWrapper.width, portWrapper.height));\n portWrapper.arrange(portWrapper.desiredSize);\n }\n //this.refresh(); this.refreshDiagramLayer();\n }\n };\n /** @private */\n Diagram.prototype.updateIcon = function (actualObject) {\n var iconContainer = this.getWrapper(actualObject.wrapper, 'icon_content');\n if (iconContainer) {\n if (this.mode === 'SVG') {\n var icon = getDiagramElement(actualObject.wrapper.id + '_icon_content');\n if (icon) {\n var iconRect = getDiagramElement(icon.id + '_rect');\n var iconShape = getDiagramElement(icon.id + '_shape');\n var nativeContent = getDiagramElement(iconShape.id + '_native_element');\n if (nativeContent) {\n nativeContent.parentNode.removeChild(nativeContent);\n }\n iconShape.parentNode.removeChild(iconShape);\n iconRect.parentNode.removeChild(iconRect);\n icon.parentNode.removeChild(icon);\n }\n }\n var index = actualObject.wrapper.children.indexOf(iconContainer);\n actualObject.wrapper.children.splice(index, 1);\n }\n var portContainer = this.getPortContainer(actualObject);\n actualObject.initIcons(this.getDescription, this.layout, portContainer);\n };\n Diagram.prototype.getPortContainer = function (actualObject) {\n if (actualObject.children) {\n for (var i = 0; i < actualObject.wrapper.children.length; i++) {\n if (actualObject.wrapper.children[i].id === 'group_container') {\n return actualObject.wrapper.children[i];\n }\n }\n }\n return actualObject.wrapper;\n };\n Diagram.prototype.updateTooltip = function (actualObject, node) {\n if (node.tooltip.content !== undefined) {\n actualObject.tooltip.content = node.tooltip.content;\n }\n if (node.tooltip.position !== undefined) {\n actualObject.tooltip.position = node.tooltip.position;\n }\n if (node.tooltip.height !== undefined) {\n actualObject.tooltip.height = node.tooltip.height;\n }\n if (node.tooltip.width !== undefined) {\n actualObject.tooltip.width = node.tooltip.width;\n }\n if (node.tooltip.showTipPointer !== undefined) {\n actualObject.tooltip.showTipPointer = node.tooltip.showTipPointer;\n }\n };\n /** @private */\n Diagram.prototype.updateQuad = function (obj) {\n var modified = this.spatialSearch.updateQuad(obj.wrapper);\n if (modified && !this.preventUpdate) {\n this.updatePage();\n }\n };\n /** @private */\n Diagram.prototype.removeFromAQuad = function (obj) {\n this.spatialSearch.removeFromAQuad(obj.wrapper);\n var modified = this.spatialSearch.updateBounds(obj.wrapper);\n if (modified && !this.preventUpdate) {\n this.updatePage();\n }\n };\n /** @private */\n Diagram.prototype.updateGroupSize = function (node) {\n var tempNode;\n if (node.parentId) {\n tempNode = this.nameTable[node.parentId];\n if (tempNode.parentId) {\n this.updateGroupSize(tempNode);\n }\n else {\n tempNode.wrapper.measure(new Size());\n tempNode.wrapper.arrange(tempNode.wrapper.desiredSize);\n this.updateGroupOffset(tempNode);\n this.updateDiagramObject(tempNode);\n }\n }\n };\n Diagram.prototype.updatePage = function () {\n if (this.diagramActions & DiagramAction.Render) {\n this.scroller.setSize();\n this.scroller.updateScrollOffsets();\n //updating overview\n for (var _i = 0, _a = this.views; _i < _a.length; _i++) {\n var temp = _a[_i];\n var view = this.views[temp];\n if (!(view instanceof Diagram)) {\n view.updateView(view);\n }\n }\n }\n };\n /** @private */\n Diagram.prototype.protectPropertyChange = function (enable) {\n this.isProtectedOnChange = enable;\n };\n /** @private */\n Diagram.prototype.updateMargin = function (node, changes) {\n if (changes.margin.top !== undefined) {\n node.margin.top = changes.margin.top;\n }\n if (changes.margin.bottom !== undefined) {\n node.margin.bottom = changes.margin.bottom;\n }\n if (changes.margin.left !== undefined) {\n node.margin.left = changes.margin.left;\n }\n if (changes.margin.right !== undefined) {\n node.margin.right = changes.margin.right;\n }\n };\n //property changes - end region\n /* tslint:disable */\n Diagram.prototype.initDroppables = function () {\n var _this = this;\n // initiates droppable event\n this.droppable = new Droppable(this.element);\n this.droppable.accept = '.e-dragclone';\n // tslint:disable-next-line:no-any\n this.droppable.over = function (args) {\n if (!_this.currentSymbol) {\n if (args.dragData) {\n var newObj = void 0;\n var position = _this.eventHandler.getMousePosition(args.event);\n var clonedObject = void 0;\n var selectedSymbol = args.dragData.helper;\n var paletteId = selectedSymbol.getAttribute('paletteId');\n if (paletteId) {\n var sourceElement = document.getElementById(paletteId).ej2_instances[0];\n var source = 'sourceElement';\n _this.droppable[source] = sourceElement;\n var selectedSymbols = 'selectedSymbols';\n if (sourceElement) {\n var obj = sourceElement[selectedSymbols];\n clonedObject = cloneObject(sourceElement[selectedSymbols]);\n var wrapper = obj.wrapper.children[0].children[0];\n if (sourceElement[selectedSymbols] instanceof Node) {\n clonedObject.offsetX = position.x + 5 + (clonedObject.width || wrapper.actualSize.width) / 2;\n clonedObject.offsetY = position.y + (clonedObject.height || wrapper.actualSize.height) / 2;\n var newNode = new Node(_this, 'nodes', clonedObject, true);\n if (newNode.shape.type === 'Bpmn' && newNode.shape.activity.subProcess.processes\n && newNode.shape.activity.subProcess.processes.length) {\n newNode.shape.activity.subProcess.processes = [];\n }\n newObj = newNode;\n }\n else if (sourceElement[selectedSymbols] instanceof Connector) {\n newObj = new Connector(_this, 'connectors', clonedObject, true);\n var bounds = Rect.toBounds([newObj.sourcePoint, newObj.targetPoint]);\n var tx = position.x - bounds.center.x;\n var ty = position.y - bounds.center.y;\n newObj.sourcePoint.x += tx;\n newObj.sourcePoint.y += ty;\n newObj.targetPoint.x += tx;\n newObj.targetPoint.y += ty;\n }\n newObj.id += randomId();\n var arg = {\n source: sourceElement, element: newObj, cancel: false,\n diagram: _this\n };\n _this.triggerEvent(DiagramEvent.dragEnter, arg);\n if (!_this.activeLayer.lock && !arg.cancel) {\n _this.preventUpdate = true;\n _this.initObject(newObj);\n _this.currentSymbol = newObj;\n if (_this.mode !== 'SVG') {\n _this.refreshDiagramLayer();\n }\n _this.commandHandler.select(newObj);\n _this.eventHandler.mouseDown(args.event);\n _this.eventHandler.mouseMove(args.event, args);\n _this.preventUpdate = false;\n _this.updatePage();\n selectedSymbol.style.opacity = '0';\n }\n }\n _this.droppable[selectedSymbols] = selectedSymbol;\n }\n }\n }\n else {\n if (args.event.touches && args.event.touches.length) {\n _this.eventHandler.mouseMove(args.event, args.event.touches);\n }\n }\n };\n // tslint:disable-next-line:no-any\n this.droppable.drop = function (args) {\n if (_this.currentSymbol) {\n if (args.event.touches) {\n _this.eventHandler.mouseUp(args.event);\n }\n var newObj = void 0;\n var node = void 0;\n var conn = void 0;\n var source = 'sourceElement';\n var arg = {\n source: _this.droppable[source],\n element: _this.currentSymbol, target: _this, cancel: false,\n position: { x: _this.currentSymbol.wrapper.offsetX, y: _this.currentSymbol.wrapper.offsetY }\n };\n _this.triggerEvent(DiagramEvent.drop, arg);\n var clonedObject = void 0;\n var id = 'id';\n clonedObject = cloneObject(_this.currentSymbol);\n _this.removeFromAQuad(_this.currentSymbol);\n _this.removeObjectsFromLayer(_this.nameTable[_this.currentSymbol.id]);\n delete _this.nameTable[_this.currentSymbol.id];\n _this.currentSymbol = null;\n _this.protectPropertyChange(true);\n if (!arg.cancel) {\n _this.startGroupAction();\n _this.add(clonedObject);\n if (canSingleSelect(_this)) {\n _this.select([_this.nameTable[clonedObject[id]]]);\n }\n }\n _this.protectPropertyChange(false);\n newObj = _this.nameTable[clonedObject[id]];\n if (_this.bpmnModule && newObj instanceof Node && clonedObject.processId) {\n newObj.processId = clonedObject.processId;\n _this.bpmnModule.dropBPMNchild(_this.nameTable[newObj.processId], newObj, _this);\n }\n _this.endGroupAction();\n if (_this.mode !== 'SVG') {\n _this.refreshDiagramLayer();\n }\n delete _this.droppable[source];\n }\n var selectedSymbols = 'selectedSymbols';\n remove(_this.droppable[selectedSymbols]);\n };\n this.droppable.out = function (args) {\n if (_this.currentSymbol && !_this.eventHandler.focus) {\n _this.unSelect(_this.currentSymbol);\n _this.removeFromAQuad(_this.currentSymbol);\n if (_this.mode !== 'SVG' && _this.currentSymbol.shape.type === 'Native') {\n _this.removeElements(_this.currentSymbol);\n }\n _this.removeObjectsFromLayer(_this.nameTable[_this.currentSymbol.id]);\n delete _this.nameTable[_this.currentSymbol.id];\n _this.triggerEvent(DiagramEvent.dragLeave, { element: _this.currentSymbol, diagram: _this });\n if (_this.mode !== 'SVG') {\n _this.refreshDiagramLayer();\n }\n else {\n _this.removeElements(_this.currentSymbol);\n }\n _this.currentSymbol = null;\n var selectedSymbols = 'selectedSymbols';\n _this.droppable[selectedSymbols].style.opacity = '1';\n var source = 'sourceElement';\n delete _this.droppable[source];\n }\n };\n };\n __decorate([\n Property('100%')\n ], Diagram.prototype, \"width\", void 0);\n __decorate([\n Property('SVG')\n ], Diagram.prototype, \"mode\", void 0);\n __decorate([\n Property('100%')\n ], Diagram.prototype, \"height\", void 0);\n __decorate([\n Complex({}, ContextMenuSettings)\n ], Diagram.prototype, \"contextMenuSettings\", void 0);\n __decorate([\n Property(DiagramConstraints.Default)\n ], Diagram.prototype, \"constraints\", void 0);\n __decorate([\n Property(DiagramTools.Default)\n ], Diagram.prototype, \"tool\", void 0);\n __decorate([\n Property('Top')\n ], Diagram.prototype, \"bridgeDirection\", void 0);\n __decorate([\n Property('transparent')\n ], Diagram.prototype, \"backgroundColor\", void 0);\n __decorate([\n Complex({}, SnapSettings)\n ], Diagram.prototype, \"snapSettings\", void 0);\n __decorate([\n Complex({}, RulerSettings)\n ], Diagram.prototype, \"rulerSettings\", void 0);\n __decorate([\n Complex({}, PageSettings)\n ], Diagram.prototype, \"pageSettings\", void 0);\n __decorate([\n Collection([], Node)\n ], Diagram.prototype, \"nodes\", void 0);\n __decorate([\n Property()\n ], Diagram.prototype, \"drawingObject\", void 0);\n __decorate([\n Collection([], Connector)\n ], Diagram.prototype, \"connectors\", void 0);\n __decorate([\n Property([])\n ], Diagram.prototype, \"basicElements\", void 0);\n __decorate([\n Complex({}, DiagramTooltip)\n ], Diagram.prototype, \"tooltip\", void 0);\n __decorate([\n Complex({}, DataSource)\n ], Diagram.prototype, \"dataSourceSettings\", void 0);\n __decorate([\n Property()\n ], Diagram.prototype, \"addInfo\", void 0);\n __decorate([\n Property()\n ], Diagram.prototype, \"getNodeDefaults\", void 0);\n __decorate([\n Property()\n ], Diagram.prototype, \"getConnectorDefaults\", void 0);\n __decorate([\n Property()\n ], Diagram.prototype, \"setNodeTemplate\", void 0);\n __decorate([\n Property()\n ], Diagram.prototype, \"getDescription\", void 0);\n __decorate([\n Property()\n ], Diagram.prototype, \"getCustomProperty\", void 0);\n __decorate([\n Property()\n ], Diagram.prototype, \"getCustomTool\", void 0);\n __decorate([\n Property()\n ], Diagram.prototype, \"getCustomCursor\", void 0);\n __decorate([\n Complex({}, Selector)\n ], Diagram.prototype, \"selectedItems\", void 0);\n __decorate([\n Complex({}, ScrollSettings)\n ], Diagram.prototype, \"scrollSettings\", void 0);\n __decorate([\n Complex({}, Layout)\n ], Diagram.prototype, \"layout\", void 0);\n __decorate([\n Complex({}, CommandManager)\n ], Diagram.prototype, \"commandManager\", void 0);\n __decorate([\n Event()\n ], Diagram.prototype, \"dataLoaded\", void 0);\n __decorate([\n Event()\n ], Diagram.prototype, \"dragEnter\", void 0);\n __decorate([\n Event()\n ], Diagram.prototype, \"dragLeave\", void 0);\n __decorate([\n Event()\n ], Diagram.prototype, \"dragOver\", void 0);\n __decorate([\n Event()\n ], Diagram.prototype, \"click\", void 0);\n __decorate([\n Event()\n ], Diagram.prototype, \"historyChange\", void 0);\n __decorate([\n Event()\n ], Diagram.prototype, \"doubleClick\", void 0);\n __decorate([\n Event()\n ], Diagram.prototype, \"textEdit\", void 0);\n __decorate([\n Event()\n ], Diagram.prototype, \"scrollChange\", void 0);\n __decorate([\n Event()\n ], Diagram.prototype, \"selectionChange\", void 0);\n __decorate([\n Event()\n ], Diagram.prototype, \"sizeChange\", void 0);\n __decorate([\n Event()\n ], Diagram.prototype, \"connectionChange\", void 0);\n __decorate([\n Event()\n ], Diagram.prototype, \"sourcePointChange\", void 0);\n __decorate([\n Event()\n ], Diagram.prototype, \"targetPointChange\", void 0);\n __decorate([\n Event()\n ], Diagram.prototype, \"propertyChange\", void 0);\n __decorate([\n Event()\n ], Diagram.prototype, \"positionChange\", void 0);\n __decorate([\n Event()\n ], Diagram.prototype, \"animationComplete\", void 0);\n __decorate([\n Event()\n ], Diagram.prototype, \"rotateChange\", void 0);\n __decorate([\n Event()\n ], Diagram.prototype, \"collectionChange\", void 0);\n __decorate([\n Event()\n ], Diagram.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Diagram.prototype, \"contextMenuOpen\", void 0);\n __decorate([\n Event()\n ], Diagram.prototype, \"contextMenuClick\", void 0);\n __decorate([\n Collection([], Layer)\n ], Diagram.prototype, \"layers\", void 0);\n __decorate([\n Event()\n ], Diagram.prototype, \"drop\", void 0);\n return Diagram;\n}(Component));\nexport { Diagram };\n","import { Browser } from '@syncfusion/ej2-base';\nimport { CanvasRenderer } from './rendering/canvas-renderer';\nimport { DiagramRenderer } from './rendering/renderer';\nimport { Size } from './primitives/size';\nimport { setAttributeHtml, setAttributeSvg } from './utility/dom-util';\nimport { Rect } from './primitives/rect';\nimport { createSvgElement, getHTMLLayer } from './utility/dom-util';\nimport { getDiagramLayerSvg } from './utility/dom-util';\nimport { DiagramHtmlElement } from './core/elements/html-element';\nimport { DiagramNativeElement } from './core/elements/native-element';\n/**\n * Print and Export Settings\n */\nvar PrintAndExport = /** @class */ (function () {\n function PrintAndExport(diagram) {\n this.diagram = diagram;\n }\n /**\n * To Export the diagram\n * @private\n */\n PrintAndExport.prototype.exportDiagram = function (options) {\n var fileType;\n var customBounds;\n var content;\n var content1 = '';\n var data = 'data';\n var mode;\n var buffers = [];\n var margin = options.margin || {};\n var region = options && options.region ? options.region : 'Content';\n mode = options && options.mode ? options.mode : 'Download';\n var bounds = this.getDiagramBounds(region, options);\n if (options.bounds) {\n customBounds = true;\n bounds.x = options.bounds.x ? options.bounds.x : bounds.x;\n bounds.y = options.bounds.y ? options.bounds.y : bounds.y;\n bounds.width = options.bounds.width || bounds.width;\n bounds.height = options.bounds.height || bounds.height;\n }\n margin = {\n top: margin.top !== undefined ? margin.top : 25,\n bottom: margin.bottom !== undefined ? margin.bottom : 25,\n right: margin.right !== undefined ? margin.right : 25,\n left: margin.left !== undefined ? margin.left : 25\n };\n var nodes = this.diagram.nodes;\n if (region !== 'PageSettings') {\n bounds.x -= margin.left;\n bounds.y -= margin.top;\n bounds.width += margin.left + margin.right;\n bounds.height += margin.top + margin.bottom;\n }\n var fileName = options.fileName || 'diagram';\n if (options.format !== 'SVG') {\n data = this.setCanvas(options, bounds, margin, mode, customBounds, region, fileName);\n if (data !== null) {\n return data;\n }\n }\n else {\n fileType = options.format;\n options.bounds = bounds;\n options.margin = margin;\n var svg = content = this.diagramAsSvg(options, margin);\n if (mode === 'Data') {\n return content;\n }\n var buffer = new XMLSerializer().serializeToString(svg);\n buffers.push(buffer);\n }\n if (mode === 'Download' && data !== null) {\n var browserInfo = void 0;\n // Ensure this for Safari\n // if (Browser.info.name === 'msie' && Number(Browser.info.version) < 10 || Browser.info.name === 'webkit') {\n // let info: string = Browser.info.name === 'webkit' ? 'Safari' : 'IE-9';\n // alert('Downloading option is not supported in ' + info + ', Please use the returned data');\n // return content;\n // } else {\n for (var b = 0; b < buffers.length; b++) {\n var blob = new Blob([buffers[b]], { type: 'application/octet-stream' });\n if (Browser.info.name === 'msie') {\n window.navigator.msSaveOrOpenBlob(blob, fileName + '.' + fileType);\n }\n else {\n var pom = document.createElement('a');\n var url = URL.createObjectURL(blob);\n pom.href = url;\n pom.setAttribute('download', fileName + '.' + fileType);\n var e = document.createEvent('MouseEvents');\n e.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);\n pom.dispatchEvent(e);\n }\n }\n }\n return null;\n };\n PrintAndExport.prototype.setCanvas = function (options, bounds, margin, mode, customBounds, region, fileName) {\n var _this = this;\n var fileType;\n var content;\n options.bounds = bounds;\n options.region = region;\n var scaleX = 'scaleX';\n var scaleY = 'scaleY';\n var images = [];\n this.setScaleValueforCanvas(options, bounds);\n var canvas = this.diagramAsCanvas({\n bounds: bounds, margin: margin, region: region, scaleX: options[scaleX],\n scaleY: options[scaleY]\n }, customBounds);\n fileType = options.format || 'JPG';\n var image = content = canvas.toDataURL();\n if (mode === 'Data') {\n return content;\n }\n if (options.multiplePage) {\n options.pageHeight = options.pageHeight ? options.pageHeight : this.diagram.pageSettings.height;\n options.pageWidth = options.pageWidth ? options.pageWidth : this.diagram.pageSettings.width;\n options.pageHeight = options.pageHeight ? options.pageHeight : canvas.width;\n options.pageWidth = options.pageWidth ? options.pageWidth : canvas.height;\n margin = options.margin || {};\n if (options.pageOrientation) {\n if ((options.pageOrientation === 'Landscape' && options.pageHeight > options.pageWidth) ||\n options.pageOrientation === 'Portrait' && options.pageWidth > options.pageHeight) {\n var temp = options.pageWidth;\n options.pageWidth = options.pageHeight;\n options.pageHeight = temp;\n }\n }\n options.margin = {\n top: !isNaN(margin.top) ? margin.top : 0,\n bottom: !isNaN(margin.bottom) ? margin.bottom : 0,\n left: !isNaN(margin.left) ? margin.left : 0,\n right: !isNaN(margin.right) ? margin.right : 0\n };\n var img_1 = document.createElement('img');\n var attr = {\n 'id': this.diagram.element.id + '_printImage',\n 'src': image,\n };\n img_1.setAttribute('id', this.diagram.element.id + '_printImage');\n setAttributeHtml(img_1, attr);\n img_1.onload = function () {\n images = _this.getMultipleImage(img_1, options, true);\n _this.exportImage(images, fileName, fileType, image);\n };\n }\n else {\n images = [image];\n this.exportImage(images, fileName, fileType, image);\n }\n return null;\n };\n PrintAndExport.prototype.exportImage = function (images, fileName, fileType, image) {\n var buffers = [];\n var length = (!(images instanceof HTMLElement)) ? images.length : 0;\n for (var g = 0; g < length; g++) {\n image = images[g];\n image = image.replace(/^data:[a-z]*;,/, '');\n var image1 = image.split(',');\n var byteString = atob(image1[1]);\n var buffer = new ArrayBuffer(byteString.length);\n var intArray = new Uint8Array(buffer);\n for (var i = 0; i < byteString.length; i++) {\n intArray[i] = byteString.charCodeAt(i);\n }\n buffers.push(buffer);\n }\n var _loop_1 = function (j) {\n var b = new Blob([buffers[j]], { type: 'application/octet-stream' });\n if (Browser.info.name === 'msie') {\n window.navigator.msSaveOrOpenBlob(b, fileName + '.' + fileType);\n }\n else {\n var htmlElement_1 = document.createElement('a');\n var urlLink = URL.createObjectURL(b);\n htmlElement_1.href = urlLink;\n htmlElement_1.setAttribute('download', fileName + '.' + fileType);\n var mouseEvent_1 = document.createEvent('MouseEvents');\n mouseEvent_1.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);\n setTimeout(function () {\n htmlElement_1.dispatchEvent(mouseEvent_1);\n }, ((j + 1) * 5));\n }\n };\n // Ensure this for safari\n // if (Browser.info.name === 'msie' && Number(Browser.info.version) < 10 || Browser.info.name === 'webkit') {\n // let browserInfo: string = Browser.info.name === 'webkit' ? 'Safari' : 'IE-9';\n // alert('Downloading option is not supported in ' + browserInfo + ', Please use the returned data');\n // return content;\n // } else {\n for (var j = 0; j < buffers.length; j++) {\n _loop_1(j);\n }\n };\n PrintAndExport.prototype.getObjectsBound = function (options) {\n var nodes = this.diagram.nodes;\n var nodebounds;\n for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {\n var node = nodes_1[_i];\n if (node.visible) {\n if (((options.format !== 'SVG' && !(node instanceof DiagramNativeElement) && !(node instanceof DiagramHtmlElement))\n || (options.format === 'SVG' && !(node instanceof DiagramHtmlElement)))) {\n if (!nodebounds) {\n nodebounds = node.wrapper.outerBounds;\n }\n else {\n nodebounds = nodebounds.uniteRect(node.wrapper.outerBounds);\n }\n }\n }\n }\n var connectors = this.diagram.connectors;\n for (var _a = 0, connectors_1 = connectors; _a < connectors_1.length; _a++) {\n var connector = connectors_1[_a];\n if (connector.visible) {\n if (!nodebounds) {\n nodebounds = connector.wrapper.outerBounds;\n }\n else {\n nodebounds = nodebounds.uniteRect(connector.wrapper.outerBounds);\n }\n }\n }\n return nodebounds || new Rect(0, 0, 0, 0);\n };\n PrintAndExport.prototype.getDiagramBounds = function (mode, options) {\n var rect = this.getObjectsBound(options);\n var left = rect.left;\n var top = rect.top;\n var right = rect.right - rect.left;\n var bottom = rect.bottom - rect.top;\n if (mode !== 'Content') {\n if (this.diagram.pageSettings && this.diagram.pageSettings.multiplePage) {\n left = rect.left;\n top = rect.top;\n if (this.diagram.pageSettings.width) {\n left = Math.floor(left / this.diagram.pageSettings.width) * this.diagram.pageSettings.width;\n right = Math.ceil(rect.right / this.diagram.pageSettings.width) * this.diagram.pageSettings.width - left;\n }\n if (this.diagram.pageSettings.height) {\n top = Math.floor(top / this.diagram.pageSettings.height) * this.diagram.pageSettings.height;\n bottom = Math.ceil(rect.bottom / this.diagram.pageSettings.height) * this.diagram.pageSettings.height - top;\n }\n if ((rect.width === 0) && this.diagram.pageSettings.width !== null) {\n right = this.diagram.pageSettings.width;\n }\n if ((rect.height === 0) && this.diagram.pageSettings.height !== null) {\n bottom = this.diagram.pageSettings.height;\n }\n }\n else {\n if (this.diagram.pageSettings.width) {\n left = 0;\n right = this.diagram.pageSettings.width;\n }\n if (this.diagram.pageSettings.height) {\n top = 0;\n bottom = this.diagram.pageSettings.height;\n }\n }\n }\n var svgBounds = new Rect();\n svgBounds.x = left;\n svgBounds.y = top;\n svgBounds.width = right;\n svgBounds.height = bottom;\n return svgBounds;\n };\n PrintAndExport.prototype.setScaleValueforCanvas = function (options, bounds) {\n var scaleX = 'scaleX';\n var scaleY = 'scaleY';\n options[scaleX] = 1;\n options[scaleY] = 1;\n options.pageHeight = options.pageHeight || this.diagram.pageSettings.height;\n options.pageWidth = options.pageWidth || this.diagram.pageSettings.width;\n var height = options.pageHeight || bounds.height;\n var width = options.pageWidth || bounds.width;\n if (options.stretch === 'Stretch' || options.stretch === 'Meet' || options.stretch === 'Slice') {\n options[scaleX] = width / bounds.width;\n options[scaleY] = height / bounds.height;\n if (options.stretch === 'Meet') {\n options[scaleX] = options[scaleY] = Math.min(options[scaleX], options[scaleY]);\n }\n else if (options.stretch === 'Slice') {\n options[scaleX] = options[scaleY] = Math.max(options[scaleX], options[scaleY]);\n }\n bounds.width = width;\n bounds.height = height;\n }\n bounds.x *= options[scaleX];\n bounds.y *= options[scaleY];\n };\n PrintAndExport.prototype.diagramAsSvg = function (options, margin) {\n var svg = this.diagram.createSvg(this.diagram.element.id + '_diagram_svg', options.bounds.width, options.bounds.height);\n document.body.appendChild(svg);\n var g = createSvgElement('g', { 'id': this.diagram.element.id + '_pageBackground' });\n var region = options && options.region ? options.region : 'Content';\n var bounds = this.getDiagramBounds(region, options);\n var left = bounds.x;\n var top = bounds.y;\n var width = bounds.width;\n var height = bounds.height;\n svg.appendChild(g);\n var attr = {\n 'transform': 'translate(' + (-options.bounds.x + margin.left) + ', ' + (-options.bounds.y + margin.top) + ')',\n 'x': String(left),\n 'y': String(top), 'width': String(width), 'height': String(height)\n };\n setAttributeSvg(g, attr);\n var backRect = document.getElementById(this.diagram.element.id + '_backgroundLayerrect').cloneNode(true);\n attr = {\n 'x': 0,\n 'y': 0, 'width': String(width + margin.left + margin.right), 'height': String(height + margin.top + margin.bottom)\n };\n setAttributeSvg(backRect, attr);\n svg.appendChild(backRect);\n if (this.diagram.mode === 'SVG') {\n var diagramLayerSVG = getDiagramLayerSvg(this.diagram.element.id);\n svg.appendChild(diagramLayerSVG.getElementById(this.diagram.diagramLayer.id).cloneNode(true));\n for (var i = 0; i < svg.childNodes.length; i++) {\n var element = svg.childNodes[i];\n if (element.id === 'diagram_diagramLayer') {\n element.setAttribute('transform', 'translate(' + (-bounds.x + margin.left) + ', ' +\n (-bounds.y + margin.top) + ')');\n }\n }\n }\n else {\n g = createSvgElement('g', { 'id': this.diagram.element.id + '_diagramLayer' });\n svg.appendChild(g);\n g.setAttribute('transform', 'translate(' + (-options.bounds.x + margin.left) + ', ' +\n (-options.bounds.y + margin.top) + ')');\n var nodes = this.diagram.nodes;\n //renderLabels\n var renderer = new DiagramRenderer('', null, true);\n var htmlLayer = getHTMLLayer(this.diagram.element.id);\n this.diagram.renderDiagramElements(svg, renderer, htmlLayer, false);\n }\n document.body.removeChild(svg);\n return svg;\n };\n PrintAndExport.prototype.diagramAsCanvas = function (options, customBounds) {\n var scaleX = 'scaleX';\n var scaleY = 'scaleY';\n var element;\n var elements = [];\n var region = options.bounds;\n var margin = options.margin;\n var mode = options && options.region ? options.region : 'Content';\n var pageBounds = this.getDiagramBounds(mode, options);\n var bgColor = this.diagram.pageSettings.background.color;\n var canvas = CanvasRenderer.createCanvas(this.diagram.element.id + '_diagram', options.bounds.width, options.bounds.height);\n //canvas.setAttribute('style', 'position:absolute;top:135px;left:160px;');\n var context = canvas.getContext('2d');\n context.translate(-region.x, -region.y);\n context.save();\n context.fillStyle = this.diagram.pageSettings.background.color;\n region = mode === 'Content' ? pageBounds : region;\n context.fillRect(region.x, region.y, region.width, region.height);\n var bgImg = this.diagram.pageSettings.background;\n if (bgImg && bgImg.source) {\n pageBounds = this.getDiagramBounds(mode, options);\n var image = new Image();\n image.src = bgImg.source;\n var proportionX = pageBounds.width / image.width;\n var proportionY = pageBounds.height / image.height;\n var x = pageBounds.x;\n var y = pageBounds.y;\n var width = pageBounds.width;\n var height = pageBounds.height;\n var exportable = this.isImageExportable(bgImg);\n if (bgImg.scale !== 'None' && bgImg.align !== 'None') {\n var proportion = bgImg.scale === 'Meet' ? Math.min(proportionX, proportionY) : Math.max(proportionX, proportionY);\n width = proportion * image.width;\n height = proportion * image.height;\n if (bgImg.align.indexOf('xmid') > -1) {\n x += (pageBounds.width - width) / 2;\n }\n else if (bgImg.align.indexOf('xmax') > -1) {\n x = x + pageBounds.width - width;\n }\n if (bgImg.align.indexOf('ymid') > -1) {\n y += (pageBounds.height - height) / 2;\n }\n else if (bgImg.align.indexOf('ymax') > -1) {\n y = y + pageBounds.height - height;\n }\n if (this.diagram.pageSettings.background.color === 'none' || this.diagram.pageSettings.background.color === 'transparent') {\n context.fillStyle = 'white';\n context.fillRect(pageBounds.x * options[scaleX], pageBounds.y * options[scaleY], pageBounds.width * options[scaleX], pageBounds.height * options[scaleY]);\n }\n if (exportable) {\n context.drawImage(image, x, y, proportion * image.width, proportion * image.height);\n }\n }\n else if (exportable) {\n context.drawImage(image, x, y, pageBounds.width, pageBounds.height);\n }\n }\n else {\n context.fillStyle = bgColor === 'transparent' ? 'white' : bgColor;\n context.fillRect((pageBounds.x * options[scaleX]) - margin.left, (pageBounds.y * options[scaleY]) - margin.top, (pageBounds.width * options[scaleX]) + margin.left + margin.right, (options[scaleY] * pageBounds.height) + margin.top + margin.bottom);\n }\n var brColor = this.diagram.pageSettings.background.color;\n var brWidth = this.diagram.pageSettings.width;\n if (brWidth) {\n context.strokeStyle = brColor === 'none' ? 'transparent' : brColor;\n context.lineWidth = brWidth;\n context.strokeRect(pageBounds.x * options[scaleX], pageBounds.y * options[scaleY], pageBounds.width * options[scaleX], pageBounds.height * options[scaleY]);\n }\n context.restore();\n var htmlLayer = getHTMLLayer(this.diagram.element.id);\n var renderer = new DiagramRenderer('', null, false);\n this.diagram.renderDiagramElements(canvas, renderer, htmlLayer, false);\n return canvas;\n };\n PrintAndExport.prototype.isImageExportable = function (backgroundImage) {\n var state = true;\n var content;\n var canvas;\n if (backgroundImage.source) {\n try {\n canvas = CanvasRenderer.createCanvas(this.diagram.element.id + 'temp_canvas', 100, 100);\n var ctx = canvas.getContext('2d');\n ctx.save();\n var image = new Image();\n image.src = backgroundImage.source;\n ctx.drawImage(image, 0, 0, 100, 100);\n ctx.restore();\n content = canvas.toDataURL();\n }\n catch (e) {\n state = false;\n }\n }\n return state;\n };\n PrintAndExport.prototype.getPrintCanvasStyle = function (img, options) {\n var width = 0;\n var height = 0;\n var size = new Size();\n width = img.width;\n height = img.height;\n if (options.pageHeight || options.pageWidth) {\n height = options.pageHeight ? options.pageHeight : height;\n width = options.pageWidth ? options.pageWidth : width;\n }\n if (options.pageOrientation) {\n if ((options.pageOrientation === 'Landscape' && height > width) || options.pageOrientation === 'Portrait' && width > height) {\n var temp = width;\n width = height;\n height = temp;\n }\n }\n size.height = height;\n size.width = width;\n return size;\n };\n PrintAndExport.prototype.getMultipleImage = function (img, options, isExport) {\n var imageArray = [];\n var div = document.createElement('div');\n var pageSize = this.getPrintCanvasStyle(img, options);\n var pageWidth;\n var pageHeight;\n var margin = options.margin;\n var mLeft = margin.left;\n var mTop = margin.top;\n var mRight = margin.right;\n var mBottom = margin.bottom;\n var x = 0;\n var y = 0;\n pageWidth = pageSize.width + x;\n pageHeight = pageSize.height + y;\n var drawnX = 0;\n var drawnY = 0;\n if (options && options.multiplePage && !(options.region === 'Content')) {\n div.style.height = 'auto';\n div.style.width = 'auto';\n var imgHeight = img.height;\n var imgWidth = img.width;\n //if (img) {\n var i = 0;\n var j = 0;\n var url = void 0;\n var clipWidth = 0;\n var clipHeight = 0;\n var ctx = void 0;\n var canvas = void 0;\n do {\n do {\n clipWidth = pageSize.width;\n clipHeight = pageSize.height;\n if ((drawnX + pageSize.width) >= imgWidth) {\n clipWidth = (imgWidth - drawnX);\n }\n if ((drawnY + pageSize.height) >= imgHeight) {\n clipHeight = (imgHeight - drawnY);\n }\n canvas = CanvasRenderer.createCanvas(this.diagram.element.id + '_multiplePrint', pageSize.width, pageSize.height);\n ctx = canvas.getContext('2d');\n ctx.drawImage(img, x + drawnX + mLeft, y + drawnY + mTop, clipWidth - mRight - mLeft, clipHeight - mBottom - mTop, 0 + mLeft, 0 + mTop, clipWidth - mRight - mLeft, clipHeight - mBottom - mTop);\n if ((drawnX + pageSize.width) >= imgWidth) {\n drawnX -= (drawnX - imgWidth);\n }\n url = canvas.toDataURL();\n ctx.restore();\n drawnX += pageWidth;\n if (isExport) {\n imageArray.push(url);\n }\n else {\n this.printImage(div, url, i + '' + j, pageWidth + 'px;', pageHeight + 'px;');\n }\n i++;\n } while (drawnX < imgWidth);\n j++;\n i = x = drawnX = 0;\n if ((drawnY + pageSize.height) >= imgHeight) {\n drawnY -= (drawnY - imgHeight);\n }\n drawnY += pageHeight;\n } while (drawnY < imgHeight);\n //}\n }\n else {\n var x_1 = 0;\n var y_1 = 0;\n var pageSize_1 = this.getPrintCanvasStyle(img, options);\n var pageWidth_1;\n var pageHeight_1;\n pageWidth_1 = pageSize_1.width;\n pageHeight_1 = pageSize_1.height;\n var ctx = void 0;\n var canvas = void 0;\n var url = void 0;\n canvas = CanvasRenderer.createCanvas(this.diagram.element.id + '_diagram', pageWidth_1, pageHeight_1);\n ctx = canvas.getContext('2d');\n ctx.drawImage(img, x_1 + mLeft, y_1 + mTop, img.width - (mRight + mLeft), img.height - (mTop + mBottom), 0 + mLeft, 0 + mTop, pageWidth_1 - (mRight + mLeft), pageHeight_1 - (mTop + mBottom));\n url = canvas.toDataURL();\n ctx.restore();\n this.printImage(div, url, 0);\n }\n if (isExport) {\n return imageArray;\n }\n else {\n return div;\n }\n };\n PrintAndExport.prototype.printImage = function (div, url, i, pageWidth, pageHeight) {\n var img = document.createElement('img');\n var attr;\n var innerDiv = document.createElement('div');\n attr = { 'class': 'e-diagram-print-page', 'style': 'width:' + pageWidth + 'height:' + pageHeight };\n setAttributeHtml(img, attr);\n setAttributeHtml(innerDiv, attr);\n attr = { 'id': this.diagram.element.id + '_multiplePrint_img' + i, 'style': 'float:left', 'src': url };\n setAttributeHtml(img, attr);\n innerDiv.appendChild(img);\n div.appendChild(innerDiv);\n };\n /**\n * To print the image\n * @private\n */\n PrintAndExport.prototype.print = function (options) {\n var _this = this;\n options.mode = 'Data';\n options.margin = { top: 0, bottom: 0, right: 0, left: 0 };\n var url = this.exportDiagram(options);\n var img = document.createElement('img');\n var attr = {\n 'id': this.diagram.element.id + '_printImage',\n 'src': url,\n };\n setAttributeHtml(img, attr);\n img.onload = function () {\n var div = _this.getMultipleImage(img, options);\n // specify window parameters\n var printWind = window.open('');\n if (printWind != null) {\n if ((div instanceof HTMLElement)) {\n printWind.document.write('
');\n printWind.document.write('');\n printWind.document.write('
' + div.innerHTML + '');\n printWind.document.close();\n }\n }\n };\n };\n /**\n * To destroy the Print and Export module\n * @return {void}\n * @private\n */\n PrintAndExport.prototype.destroy = function () {\n /**\n * Destroys the Print and Export module\n */\n };\n /**\n * Get module name.\n */\n PrintAndExport.prototype.getModuleName = function () {\n /**\n * Returns the module name\n */\n return 'PrintandExport';\n };\n return PrintAndExport;\n}());\nexport { PrintAndExport };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { Container } from './container';\nimport { rotateSize } from '../../utility/base-util';\n/**\n * StackPanel module is used to arrange its children in a line\n */\nvar StackPanel = /** @class */ (function (_super) {\n __extends(StackPanel, _super);\n function StackPanel() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n /**\n * Gets/Sets the orientation of the stack panel\n */\n _this.orientation = 'Vertical';\n /**\n * Not applicable for canvas\n * @private\n */\n _this.measureChildren = undefined;\n return _this;\n }\n /**\n * Measures the minimum space that the panel needs\n * @param availableSize\n */\n StackPanel.prototype.measure = function (availableSize) {\n var updateSize = this.orientation === 'Horizontal' ? this.updateHorizontalStack : this.updateVerticalStack;\n this.desiredSize = this.measureStackPanel(availableSize, updateSize);\n return this.desiredSize;\n };\n /**\n * Arranges the child elements of the stack panel\n * @param desiredSize\n */\n StackPanel.prototype.arrange = function (desiredSize) {\n var updateSize = this.orientation === 'Horizontal' ? this.arrangeHorizontalStack : this.arrangeVerticalStack;\n this.actualSize = this.arrangeStackPanel(desiredSize, updateSize);\n this.updateBounds();\n return this.actualSize;\n };\n /**\n * Measures the minimum space that the panel needs\n * @param availableSize\n */\n StackPanel.prototype.measureStackPanel = function (availableSize, updateSize) {\n var desired = undefined;\n if (this.children !== undefined && this.children.length > 0) {\n for (var _i = 0, _a = this.children; _i < _a.length; _i++) {\n var child = _a[_i];\n child.parentTransform = this.rotateAngle + this.parentTransform;\n //Measure children\n child.measure(availableSize);\n var childSize = child.desiredSize.clone();\n //Consider Child's margin\n this.applyChildMargin(child, childSize);\n //Consider children's rotation\n if (child.rotateAngle !== 0) {\n childSize = rotateSize(childSize, child.rotateAngle);\n }\n //Measure stack panel\n if (desired === undefined) {\n desired = childSize;\n }\n else {\n updateSize(childSize, desired);\n }\n }\n }\n desired = _super.prototype.validateDesiredSize.call(this, desired, availableSize);\n this.stretchChildren(desired);\n //Considering padding values\n this.applyPadding(desired);\n return desired;\n };\n StackPanel.prototype.arrangeStackPanel = function (desiredSize, updatePosition) {\n if (this.children !== undefined && this.children.length > 0) {\n var x = void 0;\n var y = void 0;\n x = this.offsetX - desiredSize.width * this.pivot.x + this.padding.left;\n y = this.offsetY - desiredSize.height * this.pivot.y + this.padding.top;\n for (var _i = 0, _a = this.children; _i < _a.length; _i++) {\n var child = _a[_i];\n var childSize = child.desiredSize.clone();\n var rotatedSize = childSize;\n if (this.orientation === 'Vertical') {\n y += child.margin.top;\n }\n else {\n x += child.margin.left;\n }\n if (child.rotateAngle !== 0) {\n rotatedSize = rotateSize(childSize, child.rotateAngle);\n }\n var center = updatePosition(x, y, child, this, desiredSize, rotatedSize);\n _super.prototype.findChildOffsetFromCenter.call(this, child, center);\n child.arrange(childSize);\n if (this.orientation === 'Vertical') {\n y += rotatedSize.height + child.margin.bottom;\n }\n else {\n x += rotatedSize.width + child.margin.right;\n }\n }\n }\n return desiredSize;\n };\n StackPanel.prototype.updateHorizontalStack = function (child, parent) {\n parent.height = Math.max(child.height, parent.height);\n parent.width += child.width;\n };\n StackPanel.prototype.updateVerticalStack = function (child, parent) {\n parent.width = Math.max(child.width, parent.width);\n parent.height += child.height;\n };\n StackPanel.prototype.arrangeHorizontalStack = function (x, y, child, parent, parenBounds, childBounds) {\n var centerY = 0;\n if (child.verticalAlignment === 'Top') {\n centerY = y + child.margin.top + childBounds.height / 2;\n }\n else if (child.verticalAlignment === 'Bottom') {\n var parentBottom = parent.offsetY + parenBounds.height * (1 - parent.pivot.y);\n centerY = parentBottom - parent.padding.bottom - child.margin.bottom - childBounds.height / 2;\n }\n else {\n centerY = parent.offsetY - parenBounds.height * parent.pivot.y + parenBounds.height / 2;\n }\n return { x: x + childBounds.width / 2, y: centerY };\n };\n StackPanel.prototype.arrangeVerticalStack = function (x, y, child, parent, parentSize, childSize) {\n var centerX = 0;\n if (child.horizontalAlignment === 'Left') {\n centerX = x + child.margin.left + childSize.width / 2;\n }\n else if (child.horizontalAlignment === 'Right') {\n var parentRight = parent.offsetX + parentSize.width * (1 - parent.pivot.x);\n centerX = parentRight - parent.padding.right - child.margin.right - childSize.width / 2;\n }\n else {\n centerX = parent.offsetX - parentSize.width * parent.pivot.x + parentSize.width / 2;\n }\n return { x: centerX, y: y + childSize.height / 2 };\n };\n StackPanel.prototype.stretchChildren = function (size) {\n if (this.children !== undefined && this.children.length > 0) {\n for (var _i = 0, _a = this.children; _i < _a.length; _i++) {\n var child = _a[_i];\n if (this.orientation === 'Vertical') {\n if (child.horizontalAlignment === 'Stretch') {\n child.desiredSize.width = size.width;\n }\n }\n else {\n if (child.verticalAlignment === 'Stretch') {\n child.desiredSize.height = size.height;\n }\n }\n }\n }\n };\n StackPanel.prototype.applyChildMargin = function (child, size) {\n size.height += child.margin.top + child.margin.bottom;\n size.width += child.margin.left + child.margin.right;\n };\n return StackPanel;\n}(Container));\nexport { StackPanel };\n","import { Node } from '../objects/node';\nimport { Connector } from '../objects/connector';\nimport { DataManager } from '@syncfusion/ej2-data';\nimport { randomId, getFunction } from '../utility/base-util';\n/**\n * data source defines the basic unit of diagram\n */\nvar DataBinding = /** @class */ (function () {\n /**\n * Constructor for the data binding module.\n * @private\n */\n function DataBinding() {\n this.dataTable = {};\n //constructs the data binding module\n }\n /**\n * To destroy the data binding module\n * @return {void}\n * @private\n */\n DataBinding.prototype.destroy = function () {\n /**\n * Destroy method performed here\n */\n };\n /**\n * Get module name.\n */\n DataBinding.prototype.getModuleName = function () {\n /**\n * Returns the module name\n */\n return 'DataBinding';\n };\n /**\n * Initialize nodes and connectors when we have a data as JSON\n * @param data\n * @param diagram\n * @private\n */\n DataBinding.prototype.initData = function (data, diagram) {\n var dataSource;\n var dataProp = 'data';\n var jsonProp = 'json';\n var dataManager = data.dataManager || {};\n dataSource = data.data || dataManager[dataProp] || dataManager[jsonProp] ||\n (dataManager.dataSource ? dataManager.dataSource.json : undefined);\n if (dataSource && dataSource.length) {\n this.applyDataSource(data, dataSource, diagram);\n }\n };\n /**\n * Initialize nodes and connector when we have a data as remote url\n * @param data\n * @param diagram\n * @private\n */\n DataBinding.prototype.initSource = function (data, diagram) {\n var _this = this;\n var dataSource = data;\n var result;\n var mapper = data;\n if (dataSource.dataManager instanceof DataManager) {\n var query = mapper.dataManager.defaultQuery;\n data.dataManager.executeQuery(query).then(function (e) {\n var prop = 'result';\n result = e[prop];\n if (!diagram.isDestroyed) {\n _this.applyDataSource(data, result, diagram);\n diagram.refreshDiagram();\n diagram.trigger('dataLoaded', { diagram: diagram });\n }\n });\n }\n };\n DataBinding.prototype.applyDataSource = function (mapper, data, diagram) {\n this.dataTable = {};\n var obj;\n var firstNode;\n var rootNodes = [];\n var firstLevel = [];\n var item;\n var nextLevel;\n if (data !== undefined) {\n for (var r = 0; r < data.length; r++) {\n obj = data[r];\n if (obj[mapper.parentId] === undefined || obj[mapper.parentId] === null ||\n typeof obj[mapper.parentId] !== 'object') {\n if (rootNodes[obj[mapper.parentId]] !== undefined) {\n rootNodes[obj[mapper.parentId]].items.push(obj);\n }\n else {\n rootNodes[obj[mapper.parentId]] = { items: [obj] };\n }\n }\n else {\n rootNodes = this.updateMultipleRootNodes(obj, rootNodes, mapper, data);\n }\n if (mapper.root === obj[mapper.id]) {\n firstNode = { items: [obj] };\n }\n }\n if (firstNode) {\n firstLevel.push(firstNode);\n }\n else {\n for (var _i = 0, _a = Object.keys(rootNodes); _i < _a.length; _i++) {\n var n = _a[_i];\n if (!n || n === 'undefined' || n === '\\'\\'' || n === 'null') {\n firstLevel.push(rootNodes[n]);\n }\n }\n }\n for (var i = 0; i < firstLevel.length; i++) {\n for (var j = 0; j < firstLevel[i].items.length; j++) {\n item = firstLevel[i].items[j];\n var node = this.applyNodeTemplate(mapper, item, diagram);\n diagram.nodes.push(node);\n this.dataTable[item[mapper.id]] = node;\n nextLevel = rootNodes[node.data[mapper.id]];\n if (nextLevel !== undefined) {\n this.renderChildNodes(mapper, nextLevel, node.id, rootNodes, diagram);\n }\n }\n }\n }\n this.dataTable = null;\n };\n /**\n * updateMultipleRootNodes method is used to update the multiple Root Nodes\n * @param object\n * @param rootnodes\n * @param mapper\n * @param data\n */\n DataBinding.prototype.updateMultipleRootNodes = function (obj, rootNodes, mapper, data) {\n var parents = obj[mapper.parentId];\n var parent;\n for (var i = 0; i < parents.length; i++) {\n parent = parents[i];\n if (rootNodes[parent]) {\n rootNodes[parent].items.push(obj);\n }\n else {\n rootNodes[parent] = { items: [obj] };\n }\n }\n return rootNodes;\n };\n /**\n * Get the node values\n * @param mapper\n * @param item\n * @param diagram\n */\n DataBinding.prototype.applyNodeTemplate = function (mapper, item, diagram) {\n var root = item;\n var id = randomId();\n var nodeModel = { id: id, data: item };\n var doBinding = getFunction(mapper.doBinding);\n if (doBinding) {\n doBinding(nodeModel, item, diagram);\n }\n var obj = new Node(diagram, 'nodes', nodeModel, true);\n if (!this.collectionContains(obj, diagram, mapper.id, mapper.parentId)) {\n return obj;\n }\n else {\n return this.dataTable[item[mapper.id]];\n }\n };\n DataBinding.prototype.renderChildNodes = function (mapper, parent, value, rtNodes, diagram) {\n var child;\n var nextLevel;\n var node;\n for (var j = 0; j < parent.items.length; j++) {\n child = parent.items[j];\n node = this.applyNodeTemplate(mapper, child, diagram);\n var canBreak = false;\n if (!this.collectionContains(node, diagram, mapper.id, mapper.parentId)) {\n this.dataTable[child[mapper.id]] = node;\n diagram.nodes.push(node);\n }\n else {\n canBreak = true;\n }\n if (!this.containsConnector(diagram, value, node.id)) {\n diagram.connectors.push(this.applyConnectorTemplate(value, node.id, diagram));\n }\n if (!canBreak) {\n nextLevel = rtNodes[node.data[mapper.id]];\n if (nextLevel !== undefined) {\n this.renderChildNodes(mapper, nextLevel, node.id, rtNodes, diagram);\n }\n }\n }\n };\n DataBinding.prototype.containsConnector = function (diagram, sourceNode, targetNode) {\n if (sourceNode !== '' && targetNode !== '') {\n for (var i = 0; i < diagram.connectors.length; i++) {\n var connector = diagram.connectors[i];\n if (connector !== undefined && (connector.sourceID === sourceNode && connector.targetID === targetNode)) {\n return true;\n }\n }\n }\n return false;\n };\n /**\n * collectionContains method is used to check wthear the node is already present in collection or not\n * @param node\n * @param diagram\n * @param id\n * @param parentId\n */\n DataBinding.prototype.collectionContains = function (node, diagram, id, parentId) {\n var obj = this.dataTable[node.data[id]];\n if (obj !== undefined && obj.data[id] === node.data[id] && obj.data[parentId] === node.data[parentId]) {\n return true;\n }\n else {\n return false;\n }\n };\n /**\n * Get the Connector values\n * @param sourceNode\n * @param targetNode\n * @param diagram\n */\n DataBinding.prototype.applyConnectorTemplate = function (sNode, tNode, diagram) {\n var connModel = {\n id: randomId(), sourceID: sNode, targetID: tNode\n };\n var obj = new Connector(diagram, 'connectors', connModel, true);\n return obj;\n };\n return DataBinding;\n}());\nexport { DataBinding };\n","import { createElement, remove } from '@syncfusion/ej2-base';\nimport { ContextMenu as Menu } from '@syncfusion/ej2-navigations';\nimport { contextMenuClick, contextMenuOpen } from '../enum/enum';\n/**\n * @private\n */\nexport var menuClass = {\n content: '.e-diagramcontent',\n copy: 'e-copy',\n paste: 'e-paste',\n undo: 'e-undo',\n redo: 'e-redo',\n cut: 'e-cut',\n selectAll: 'e-selectall',\n grouping: 'e-grouping',\n group: 'e-group',\n unGroup: 'e-ungroup',\n bringToFront: 'e-bringfront',\n sendToBack: 'e-sendback',\n moveForward: 'e-bringforward',\n sendBackward: 'e-sendbackward',\n order: 'e-order'\n};\n/**\n * 'ContextMenu module used to handle context menu actions.'\n * @private\n */\nvar DiagramContextMenu = /** @class */ (function () {\n function DiagramContextMenu(parent, service) {\n this.defaultItems = {};\n /**\n * @private\n */\n this.disableItems = [];\n /**\n * @private\n */\n this.hiddenItems = [];\n this.localeText = this.setLocaleKey();\n this.parent = parent;\n this.serviceLocator = service;\n this.addEventListener();\n }\n /**\n * @hidden\n * @private\n */\n DiagramContextMenu.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on('initial-load', this.render, this);\n };\n /**\n * @hidden\n * @private\n */\n DiagramContextMenu.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off('initial-load', this.render);\n };\n DiagramContextMenu.prototype.render = function () {\n this.l10n = this.serviceLocator.getService('localization');\n this.element = createElement('ul', { id: this.parent.element.id + '_contextMenu' });\n this.parent.element.appendChild(this.element);\n var target = '#' + this.parent.element.id;\n this.contextMenu = new Menu({\n items: this.getMenuItems(),\n enableRtl: this.parent.enableRtl,\n enablePersistence: this.parent.enablePersistence,\n locale: this.parent.locale,\n target: target,\n select: this.contextMenuItemClick.bind(this),\n beforeOpen: this.contextMenuBeforeOpen.bind(this),\n onOpen: this.contextMenuOpen.bind(this),\n onClose: this.contextMenuOnClose.bind(this),\n cssClass: 'e-diagram-menu'\n });\n this.contextMenu.appendTo(this.element);\n };\n DiagramContextMenu.prototype.getMenuItems = function () {\n var menuItems = [];\n var orderItems = [];\n var groupItems = [];\n if (!this.parent.contextMenuSettings.showCustomMenuOnly) {\n for (var _i = 0, _a = this.getDefaultItems(); _i < _a.length; _i++) {\n var item = _a[_i];\n if (item.toLocaleLowerCase().indexOf('group') !== -1) {\n if (item.toLocaleLowerCase() !== 'grouping') {\n groupItems.push(this.buildDefaultItems(item));\n }\n }\n else if (item.toLocaleLowerCase().indexOf('order') !== -1) {\n if (item.toLocaleLowerCase() !== 'order') {\n orderItems.push(this.buildDefaultItems(item));\n }\n }\n else {\n menuItems.push(this.buildDefaultItems(item));\n }\n }\n if (groupItems.length > 0) {\n var orderGroup = this.buildDefaultItems('grouping');\n orderGroup.items = groupItems;\n menuItems.push(orderGroup);\n }\n if (orderItems.length > 0) {\n var orderGroup = this.buildDefaultItems('order');\n orderGroup.items = orderItems;\n menuItems.push(orderGroup);\n }\n }\n if (this.parent.contextMenuSettings.items) {\n for (var _b = 0, _c = this.parent.contextMenuSettings.items; _b < _c.length; _b++) {\n var customItem = _c[_b];\n menuItems.push(customItem);\n }\n }\n return menuItems;\n };\n DiagramContextMenu.prototype.contextMenuOpen = function () {\n this.isOpen = true;\n };\n DiagramContextMenu.prototype.contextMenuItemClick = function (args) {\n var item = this.getKeyFromId(args.item.id);\n switch (item) {\n case 'cut':\n this.parent.cut();\n break;\n case 'copy':\n this.parent.copy();\n break;\n case 'undo':\n this.parent.undo();\n break;\n case 'redo':\n this.parent.redo();\n break;\n case 'paste':\n this.parent.paste();\n break;\n case 'selectAll':\n this.parent.selectAll();\n break;\n case 'group':\n this.parent.group();\n break;\n case 'unGroup':\n this.parent.unGroup();\n break;\n case 'bringToFrontOrder':\n this.parent.bringToFront();\n break;\n case 'moveForwardOrder':\n this.parent.moveForward();\n break;\n case 'sendToBackOrder':\n this.parent.sendToBack();\n break;\n case 'sendBackwardOrder':\n this.parent.sendBackward();\n break;\n }\n document.getElementById(this.parent.element.id + 'content').focus();\n this.parent.trigger(contextMenuClick, args);\n };\n DiagramContextMenu.prototype.contextMenuOnClose = function (args) {\n var parent = 'parentObj';\n if (args.items.length > 0 && args.items[0][parent] instanceof Menu) {\n this.updateItemStatus();\n }\n };\n DiagramContextMenu.prototype.getLocaleText = function (item) {\n return this.l10n.getConstant(this.localeText[item]);\n };\n DiagramContextMenu.prototype.updateItemStatus = function () {\n this.contextMenu.showItems(this.hiddenItems, true);\n this.contextMenu.enableItems(this.disableItems, false, true);\n this.hiddenItems = [];\n this.disableItems = [];\n this.isOpen = false;\n };\n DiagramContextMenu.prototype.ensureItems = function (item, event) {\n var key = this.getKeyFromId(item.id);\n var dItem = this.defaultItems[key];\n if (this.getDefaultItems().indexOf(key) !== -1) {\n if (item.target && event &&\n !this.ensureTarget(item)) {\n this.hiddenItems.push(item.id);\n }\n }\n };\n DiagramContextMenu.prototype.contextMenuBeforeOpen = function (args) {\n var diagramArgs = args;\n diagramArgs.hiddenItems = [];\n for (var _i = 0, _a = args.items; _i < _a.length; _i++) {\n var item = _a[_i];\n this.ensureItems(item, args.event);\n if (item.items.length) {\n for (var _b = 0, _c = item.items; _b < _c.length; _b++) {\n var newItem = _c[_b];\n this.ensureItems(newItem, args.event);\n }\n }\n }\n this.eventArgs = args.event;\n this.parent.trigger(contextMenuOpen, diagramArgs);\n if (diagramArgs.items.length === diagramArgs.hiddenItems.length) {\n diagramArgs.cancel = true;\n diagramArgs.hiddenItems = [];\n }\n else {\n this.hiddenItems = this.hiddenItems.concat(diagramArgs.hiddenItems);\n this.contextMenu.enableItems(this.disableItems, false, true);\n this.contextMenu.hideItems(this.hiddenItems, true);\n }\n };\n DiagramContextMenu.prototype.ensureTarget = function (item) {\n var selectedLength = this.parent.selectedItems.nodes.length +\n this.parent.selectedItems.connectors.length;\n var itemText = this.getKeyFromId(item.id);\n var target = false;\n switch (itemText) {\n case 'undo':\n target = this.parent.historyList && this.parent.historyList.canUndo ? true : false;\n break;\n case 'redo':\n target = this.parent.historyList && this.parent.historyList.canRedo ? true : false;\n break;\n case 'paste':\n target = this.parent.commandHandler.clipboardData.clipObject ? true : false;\n break;\n case 'selectAll':\n target = this.parent.nodes.length + this.parent.connectors.length ? true : false;\n break;\n case 'grouping':\n target = ((selectedLength > 1) || (this.parent.selectedItems.nodes[0] && this.parent.selectedItems.nodes[0].children\n && this.parent.selectedItems.nodes[0].children.length > 1)) ? true : false;\n break;\n case 'group':\n target = selectedLength > 1;\n break;\n case 'unGroup':\n target = ((this.parent.selectedItems.nodes[0] && this.parent.selectedItems.nodes[0].children\n && this.parent.selectedItems.nodes[0].children.length > 1)) ? true : false;\n break;\n case 'cut':\n case 'copy':\n case 'order':\n case 'bringToFrontOrder':\n case 'moveForwardOrder':\n case 'sendToBackOrder':\n case 'sendBackwardOrder':\n target = selectedLength ? true : false;\n break;\n }\n return target;\n };\n /**\n * To destroy the Context menu.\n * @method destroy\n * @return {void}\n * @private\n */\n DiagramContextMenu.prototype.destroy = function () {\n this.contextMenu.destroy();\n remove(this.element);\n this.removeEventListener();\n };\n DiagramContextMenu.prototype.getModuleName = function () {\n return 'contextMenu';\n };\n DiagramContextMenu.prototype.generateID = function (item) {\n return this.parent.element.id + '_contextMenu_' + item;\n };\n DiagramContextMenu.prototype.getKeyFromId = function (id) {\n return id.replace(this.parent.element.id + '_contextMenu_', '');\n };\n DiagramContextMenu.prototype.buildDefaultItems = function (item) {\n var menuItem;\n switch (item) {\n case 'copy':\n menuItem = { target: menuClass.content, iconCss: menuClass.copy };\n break;\n case 'cut':\n menuItem = { target: menuClass.content, iconCss: menuClass.cut };\n break;\n case 'paste':\n menuItem = { target: menuClass.content, iconCss: menuClass.paste };\n break;\n case 'undo':\n menuItem = { target: menuClass.content, iconCss: menuClass.undo };\n break;\n case 'redo':\n menuItem = { target: menuClass.content, iconCss: menuClass.redo };\n break;\n case 'grouping':\n menuItem = { target: menuClass.content };\n break;\n case 'group':\n menuItem = { target: menuClass.content, iconCss: menuClass.group };\n break;\n case 'unGroup':\n menuItem = { target: menuClass.content, iconCss: menuClass.unGroup };\n break;\n case 'order':\n menuItem = { target: menuClass.content, iconCss: menuClass.order };\n break;\n case 'bringToFrontOrder':\n menuItem = { target: menuClass.content, iconCss: menuClass.bringToFront };\n break;\n case 'moveForwardOrder':\n menuItem = { target: menuClass.content, iconCss: menuClass.moveForward };\n break;\n case 'sendToBackOrder':\n menuItem = { target: menuClass.content, iconCss: menuClass.sendToBack };\n break;\n case 'sendBackwardOrder':\n menuItem = { target: menuClass.content, iconCss: menuClass.sendBackward };\n break;\n case 'selectAll':\n menuItem = { target: menuClass.content };\n break;\n }\n this.defaultItems[item] = {\n text: this.getLocaleText(item), id: this.generateID(item),\n target: menuItem.target, iconCss: menuItem.iconCss ? 'e-icons ' + menuItem.iconCss : ''\n };\n return this.defaultItems[item];\n };\n DiagramContextMenu.prototype.getDefaultItems = function () {\n return [\n 'copy',\n 'cut', 'paste', 'undo', 'redo', 'selectAll', 'grouping', 'group', 'unGroup', 'order',\n 'bringToFrontOrder', 'moveForwardOrder', 'sendToBackOrder', 'sendBackwardOrder'\n ];\n };\n DiagramContextMenu.prototype.setLocaleKey = function () {\n return {\n 'copy': 'Copy',\n 'cut': 'Cut',\n 'paste': 'Paste',\n 'undo': 'Undo',\n 'redo': 'Redo',\n 'selectAll': 'SelectAll',\n 'grouping': 'Grouping',\n 'group': 'Group',\n 'unGroup': 'UnGroup',\n 'order': 'Order',\n 'bringToFrontOrder': 'BringToFront',\n 'moveForwardOrder': 'MoveForward',\n 'sendToBackOrder': 'SendToBack',\n 'sendBackwardOrder': 'SendBackward'\n };\n };\n return DiagramContextMenu;\n}());\nexport { DiagramContextMenu };\n","import { Point } from '../primitives/point';\nimport { Rect } from '../primitives/rect';\nimport { intersect3 } from '../utility/diagram-util';\nimport { canBridge } from '../utility/constraints-util';\n/**\n * ConnectorBridging defines the bridging behavior\n */\n/** @private */\nvar ConnectorBridging = /** @class */ (function () {\n /**\n * Constructor for the bridging module\n * @private\n */\n function ConnectorBridging() {\n //constructs the bridging module\n }\n /** @private */\n ConnectorBridging.prototype.updateBridging = function (conn, diagram) {\n var lastBridge = [];\n var bounds;\n conn.bridges = [];\n if (canBridge(conn, diagram)) {\n // if (this.canBridge(conn, diagram)) {\n var points1 = this.getPoints(conn);\n bounds = Rect.toBounds(points1);\n var bridgeSpacing = conn.bridgeSpace;\n var bgedir = diagram.bridgeDirection;\n var count = -1;\n var quads = diagram.connectors;\n for (var q = 0; q < quads.length; q++) {\n var connector1 = quads[q];\n if (conn && connector1 && conn.id !== connector1.id) {\n var points2 = this.getPoints(connector1);\n var bounds1 = Rect.toBounds(points2);\n if (this.intersectsRect(bounds, bounds1)) {\n var intersectPts = this.intersect(points1, points2, false, bgedir, true);\n if (intersectPts.length > 0) {\n for (var i = 0; i < intersectPts.length; i++) {\n var fullLength = 0;\n var length_1 = 0;\n var segmentIndex = 0;\n var pointIndex = 0;\n var obj = this.getLengthAtFractionPoint(conn, intersectPts[i]);\n if (obj.pointIndex !== -1) {\n length_1 = obj.lengthFractionIndex;\n fullLength = obj.fullLength;\n segmentIndex = obj.segmentIndex;\n pointIndex = obj.pointIndex;\n var stBridge = this.getPointAtLength((length_1 - (bridgeSpacing / 2)), points1);\n var enBridge = this.getPointAtLength((length_1 + (bridgeSpacing / 2)), points1);\n var fractLength = (length_1 - (bridgeSpacing / 2)) / fullLength;\n fractLength = (length_1 + (bridgeSpacing / 2)) / fullLength;\n if (this.isEmptyPoint(enBridge)) {\n enBridge = stBridge;\n }\n var start = void 0;\n var end = void 0;\n start = conn.sourcePoint;\n if (conn.type === 'Straight') {\n end = conn.targetPoint;\n }\n else {\n end = conn.intermediatePoints[pointIndex];\n }\n var angle = this.angleCalculation(start, end);\n if (lastBridge.length) {\n var fixedPoint = void 0;\n fixedPoint = conn.sourcePoint;\n var fix = Math.abs(this.lengthCalculation(fixedPoint, enBridge));\n var var1 = 0;\n var insertAt = -1;\n count = -1;\n for (var k = 0; k < lastBridge[segmentIndex].bridges.length; k++) {\n count++;\n var arcSeg = lastBridge[segmentIndex].bridges[k];\n var1 = Math.abs(this.lengthCalculation(fixedPoint, arcSeg.endPoint));\n if (fix < var1) {\n insertAt = count;\n break;\n }\n }\n if (insertAt >= 0) {\n var paths = void 0;\n paths = this.createSegment(stBridge, enBridge, angle, bgedir, pointIndex, conn, diagram);\n paths.target = connector1.id;\n lastBridge[segmentIndex].bridges.splice(insertAt, 0, paths);\n lastBridge[segmentIndex].bridges.join();\n lastBridge[segmentIndex].bridgeStartPoint.splice(insertAt, 0, stBridge);\n lastBridge[segmentIndex].bridgeStartPoint.join();\n lastBridge[segmentIndex].segmentIndex = segmentIndex;\n }\n else {\n var paths = void 0;\n paths = this.createSegment(stBridge, enBridge, angle, bgedir, pointIndex, conn, diagram);\n paths.target = connector1.id;\n lastBridge[segmentIndex].bridges.push(paths);\n lastBridge[segmentIndex].bridgeStartPoint.push(stBridge);\n lastBridge[segmentIndex].segmentIndex = segmentIndex;\n }\n }\n else {\n if (!isNaN(stBridge.x) && !isNaN(stBridge.y) && !this.isEmptyPoint(enBridge)) {\n var arcs = void 0;\n var bges = [];\n var bgept = [];\n arcs = this.createSegment(stBridge, enBridge, angle, bgedir, pointIndex, conn, diagram);\n var bgseg = {\n bridges: bges, bridgeStartPoint: bgept, segmentIndex: segmentIndex\n };\n arcs.target = connector1.id;\n var stPoints = [];\n var edPoints = [];\n stPoints.push(stBridge);\n edPoints.push(enBridge);\n lastBridge[segmentIndex] = bgseg;\n lastBridge[segmentIndex].bridges.push(arcs);\n lastBridge[segmentIndex].bridgeStartPoint = stPoints;\n lastBridge[segmentIndex].segmentIndex = segmentIndex;\n }\n }\n }\n }\n }\n }\n }\n }\n if (lastBridge.length !== 0) {\n this.firstBridge(lastBridge, conn, bridgeSpacing);\n }\n }\n };\n /** @private */\n ConnectorBridging.prototype.firstBridge = function (bridgeList, connector, bridgeSpacing) {\n for (var i = 0; i < bridgeList.length; i++) {\n var bridge = bridgeList[i];\n for (var k = 1; k < bridge.bridges.length; k++) {\n if (Point.findLength(bridge.bridges[k].endPoint, bridge.bridges[k - 1].endPoint) < bridgeSpacing) {\n bridge.bridges[k - 1].endPoint = bridge.bridges[k].endPoint;\n var subBridge = bridge.bridges[k - 1];\n var arc = this.createBridgeSegment(subBridge.startPoint, subBridge.endPoint, subBridge.angle, bridgeSpacing, subBridge.sweep);\n bridge.bridges[k - 1].path = arc;\n bridge.bridges.splice(k, 1);\n bridge.bridgeStartPoint.splice(k, 1);\n k--;\n }\n }\n var pre = connector.sourcePoint;\n for (var j = 0; j < bridge.bridges.length; j++) {\n var subBridge = bridge.bridges[j];\n var preventChecking = true;\n pre = subBridge.endPoint;\n connector.bridges.push(subBridge);\n }\n }\n };\n /** @private */\n ConnectorBridging.prototype.createSegment = function (st, end, angle, direction, index, conn, diagram) {\n var arc;\n var sweep;\n var path = {\n angle: 0, endPoint: { x: 0, y: 0 }, target: '', path: '',\n segmentPointIndex: -1, startPoint: { x: 0, y: 0 }, sweep: 1, rendered: false\n };\n sweep = this.sweepDirection(angle, direction, conn, diagram);\n arc = this.createBridgeSegment(st, end, angle, conn.bridgeSpace, sweep);\n path.path = arc;\n path.startPoint = st;\n path.endPoint = end;\n path.angle = angle;\n path.segmentPointIndex = index;\n path.sweep = sweep;\n return path;\n };\n /** @private */\n ConnectorBridging.prototype.createBridgeSegment = function (startPt, endPt, angle, bridgeSpace, sweep) {\n var path = 'A ' + bridgeSpace / 2 + ' ' + bridgeSpace / 2 + ' ' + angle + ' , 1 ' + sweep + ' ' + endPt.x + ',' + endPt.y;\n return path;\n };\n /** @private */\n ConnectorBridging.prototype.sweepDirection = function (angle, bridgeDirection, connector, diagram) {\n var angle1 = Math.abs(angle);\n var sweep;\n switch (bridgeDirection) {\n case 'Top':\n case 'Bottom':\n sweep = 1;\n if (angle1 >= 0 && angle1 <= 90) {\n sweep = 0;\n }\n break;\n case 'Left':\n case 'Right':\n sweep = 1;\n if (angle < 0 && angle >= -180) {\n sweep = 0;\n }\n break;\n }\n if (bridgeDirection === 'Right' || bridgeDirection === 'Bottom') {\n if (sweep === 0) {\n sweep = 1;\n }\n else {\n sweep = 0;\n }\n }\n return sweep;\n };\n /** @private */\n ConnectorBridging.prototype.getPointAtLength = function (length, pts) {\n var run = 0;\n var pre;\n var found = { x: 0, y: 0 };\n for (var i = 0; i < pts.length; i++) {\n var pt = pts[i];\n if (!pre) {\n pre = pt;\n continue;\n }\n else {\n var l = this.lengthCalculation(pre, pt);\n if (run + l > length) {\n var r = length - run;\n var deg = Point.findAngle(pre, pt);\n var x = r * Math.cos(deg * Math.PI / 180);\n var y = r * Math.sin(deg * Math.PI / 180);\n found = { x: pre.x + x, y: pre.y + y };\n break;\n }\n else {\n run += l;\n }\n }\n pre = pt;\n }\n return found;\n };\n /** @private */\n ConnectorBridging.prototype.getPoints = function (connector) {\n var points = [];\n if (connector.intermediatePoints && (connector.type === 'Straight' || connector.type === 'Orthogonal')) {\n for (var j = 0; j < connector.intermediatePoints.length; j++) {\n points.push(connector.intermediatePoints[j]);\n }\n }\n return points;\n };\n ConnectorBridging.prototype.intersectsRect = function (rect1, rect2) {\n return ((((rect2.x < (rect1.x + rect1.width)) && (rect1.x < (rect2.x + rect2.width)))\n && (rect2.y < (rect1.y + rect1.height))) && (rect1.y < (rect2.y + rect2.height)));\n };\n /** @private */\n ConnectorBridging.prototype.intersect = function (points1, points2, self, bridgeDirection, zOrder) {\n if (self && points2.length >= 2) {\n points2.splice(0, 1);\n points2.splice(0, 1);\n }\n var points = [];\n for (var i = 0; i < points1.length - 1; i++) {\n var pt = this.inter1(points1[i], points1[i + 1], points2, zOrder, bridgeDirection);\n if (pt.length > 0) {\n for (var k = 0; k < pt.length; k++) {\n points.push(pt[k]);\n }\n }\n if (self && points2.length >= 1) {\n points2.splice(0, 1);\n }\n }\n return points;\n };\n /** @private */\n ConnectorBridging.prototype.inter1 = function (startPt, endPt, pts, zOrder, bridgeDirection) {\n var points1 = [];\n for (var i = 0; i < pts.length - 1; i++) {\n var point = this.intersect2(startPt, endPt, pts[i], pts[i + 1]);\n if (!this.isEmptyPoint(point)) {\n var angle = this.angleCalculation(startPt, endPt);\n var angle1 = this.angleCalculation(pts[i], pts[i + 1]);\n angle = this.checkForHorizontalLine(angle);\n angle1 = this.checkForHorizontalLine(angle1);\n switch (bridgeDirection) {\n case 'Left':\n case 'Right':\n if (angle > angle1) {\n points1.push(point);\n }\n break;\n case 'Top':\n case 'Bottom':\n if (angle < angle1) {\n points1.push(point);\n }\n break;\n }\n if (angle === angle1 && zOrder) {\n points1.push(point);\n }\n }\n }\n return points1;\n };\n ConnectorBridging.prototype.checkForHorizontalLine = function (angle) {\n var temp = 0;\n var roundedAngle = Math.abs(angle);\n if (roundedAngle > 90) {\n temp = 180 - roundedAngle;\n }\n else {\n temp = roundedAngle;\n }\n return temp;\n };\n ConnectorBridging.prototype.intersect2 = function (start1, end1, start2, end2) {\n var point = { x: 0, y: 0 };\n var lineUtil1 = this.getLineSegment(start1.x, start1.y, end1.x, end1.y);\n var lineUtil2 = this.getLineSegment(start2.x, start2.y, end2.x, end2.y);\n var line3 = intersect3(lineUtil1, lineUtil2);\n if (line3.enabled) {\n return line3.intersectPt;\n }\n else {\n return point;\n }\n };\n /** @private */\n ConnectorBridging.prototype.getLineSegment = function (x1, y1, x2, y2) {\n return { 'X1': Number(x1) || 0, 'Y1': Number(y1) || 0, 'X2': Number(x2) || 0, 'Y2': Number(y2) || 0 };\n };\n ConnectorBridging.prototype.isEmptyPoint = function (point) {\n return point.x === 0 && point.y === 0;\n };\n ConnectorBridging.prototype.getLengthAtFractionPoint = function (connector, pointAt) {\n var lengthFraction;\n var confirm = 100;\n var pointIndex = -1;\n var fullLength = 0;\n var segmentIndex = -1;\n var count = 0;\n var lengthAtFractionPt = 0;\n var pt1 = connector.sourcePoint;\n var previouspt2 = pt1;\n var points = [];\n for (var i = 0; i < connector.intermediatePoints.length; i++) {\n var point2 = connector.intermediatePoints[i];\n points.push(point2);\n }\n for (var j = 0; j < points.length; j++) {\n var pt2 = points[j];\n var suspect = this.getSlope(pt2, pt1, pointAt, connector);\n if (suspect < confirm) {\n confirm = suspect;\n lengthAtFractionPt = fullLength + this.lengthCalculation(pointAt, previouspt2);\n segmentIndex = count;\n pointIndex = j;\n }\n fullLength += Point.findLength(pt2, pt1);\n pt1 = pt2;\n previouspt2 = pt2;\n }\n count++;\n lengthFraction = {\n lengthFractionIndex: lengthAtFractionPt, fullLength: fullLength,\n segmentIndex: segmentIndex, pointIndex: pointIndex\n };\n return lengthFraction;\n };\n ConnectorBridging.prototype.getSlope = function (startPt, endPt, point, connector) {\n var three = 3.0;\n var delX = Math.abs(startPt.x - endPt.x);\n var delY = Math.abs(startPt.y - endPt.y);\n var lhs = ((point.y - startPt.y) / (endPt.y - startPt.y));\n var rhs = ((point.x - startPt.x) / (endPt.x - startPt.x));\n if (!isFinite(lhs) || !isFinite(rhs) || isNaN(lhs) || isNaN(rhs)) {\n if (startPt.x === endPt.x) {\n if (startPt.y === endPt.y) {\n return 10000;\n }\n else if (((startPt.y > point.y) && (point.y > endPt.y)) || ((startPt.y < point.y) && (point.y < endPt.y))) {\n return Math.abs(startPt.x - point.x);\n }\n }\n else if (startPt.y === endPt.y) {\n if (((startPt.x > point.x) && (point.x > endPt.x)) || ((startPt.x < point.x) && (point.x < endPt.x))) {\n return Math.abs(startPt.y - point.y);\n }\n }\n }\n else {\n if ((startPt.x >= point.x && point.x >= endPt.x) || (startPt.x <= point.x && point.x <= endPt.x) || delX < three) {\n if ((startPt.y >= point.y && point.y >= endPt.y) || (startPt.y <= point.y && point.y <= endPt.y) || delY < three) {\n return Math.abs(lhs - rhs);\n }\n }\n }\n return 10000;\n };\n /** @private */\n ConnectorBridging.prototype.angleCalculation = function (startPt, endPt) {\n var xDiff = startPt.x - endPt.x;\n var yDiff = startPt.y - endPt.y;\n return Math.atan2(yDiff, xDiff) * (180 / Math.PI);\n };\n ConnectorBridging.prototype.lengthCalculation = function (startPt, endPt) {\n //removed a try catch from here\n var len = Math.sqrt(((startPt.x - endPt.x) * (startPt.x - endPt.x)) + ((startPt.y - endPt.y) * (startPt.y - endPt.y)));\n return len;\n };\n /**\n * To destroy the bridging module\n * @return {void}\n * @private\n */\n ConnectorBridging.prototype.destroy = function () {\n /**\n * Destroys the bridging module\n */\n };\n /**\n * Get module name.\n */\n ConnectorBridging.prototype.getModuleName = function () {\n /**\n * Returns the module name\n */\n return 'Bridging';\n };\n return ConnectorBridging;\n}());\nexport { ConnectorBridging };\n","import { Rect } from '../primitives/rect';\nimport { PathElement } from '../core/elements/path-element';\nimport { SnapConstraints } from '../enum/enum';\nimport { Connector } from './connector';\nimport { Selector } from '../interaction/selector';\nimport { getBounds } from './../utility/base-util';\nimport { randomId } from './../utility/base-util';\nimport { getAdornerLayerSvg } from './../utility/dom-util';\nimport { isSelected } from '../interaction/actions';\n/**\n * Snapping\n */\nvar Snapping = /** @class */ (function () {\n function Snapping(diagram) {\n this.line = [];\n this.diagram = diagram;\n }\n /** @private */\n Snapping.prototype.canSnap = function () {\n return (this.diagram.snapSettings.constraints\n & (SnapConstraints.SnapToObject | SnapConstraints.SnapToLines)) !== 0;\n };\n /**\n * Snap to object\n * @private\n */\n Snapping.prototype.snapPoint = function (diagram, selectedObject, towardsLeft, towardsTop, delta, startPoint, endPoint) {\n var snapSettings = this.diagram.snapSettings;\n var zoomFactor = 1;\n var offset = { x: 0, y: 0 };\n var bounds = getBounds(selectedObject.wrapper);\n var horizontallysnapped = { snapped: false, offset: 0 };\n var verticallysnapped = { snapped: false, offset: 0 };\n if (this.diagram.snapSettings.constraints & SnapConstraints.SnapToObject) {\n var snapLine = void 0;\n snapLine = document.createElementNS('http://www.w3.org/2000/svg', 'g');\n snapLine.setAttribute('id', '_SnappingLines');\n snapLine.setAttribute('shapeRendering', 'crispEdges');\n getAdornerLayerSvg(this.diagram.element.id).appendChild(snapLine);\n this.snapObject(diagram, selectedObject, snapLine, horizontallysnapped, verticallysnapped, delta, startPoint === endPoint);\n }\n //original position\n var left = bounds.x + delta.x;\n var top = bounds.y + delta.y;\n var right = bounds.x + bounds.width + delta.x;\n var bottom = bounds.y + bounds.height + delta.y;\n var scaledIntervals = snapSettings.verticalGridlines.scaledIntervals;\n //snapped positions\n var roundedRight = this.round(right, scaledIntervals, zoomFactor);\n var roundedLeft = this.round(left, scaledIntervals, zoomFactor);\n scaledIntervals = snapSettings.horizontalGridlines.scaledIntervals;\n var roundedTop = this.round(top, scaledIntervals, zoomFactor);\n var roundedBottom = this.round(bottom, scaledIntervals, zoomFactor);\n //currentposition\n var currentright = bounds.x + bounds.width;\n var currentbottom = bounds.y + bounds.height;\n if (!horizontallysnapped.snapped) {\n if (this.diagram.snapSettings.constraints & SnapConstraints.SnapToVerticalLines) {\n if (Math.abs(delta.x) >= 1) {\n if (towardsLeft) {\n if (Math.abs(roundedRight - currentright) > Math.abs(roundedLeft - bounds.x)) {\n offset.x += roundedLeft - bounds.x;\n }\n else {\n offset.x += roundedRight - currentright;\n }\n }\n else {\n if (Math.abs(roundedRight - currentright) < Math.abs(roundedLeft - bounds.x)) {\n offset.x += roundedRight - currentright;\n }\n else {\n offset.x += roundedLeft - bounds.x;\n }\n }\n }\n }\n else {\n offset.x = endPoint.x - startPoint.x;\n }\n }\n else {\n if (this.diagram.snapSettings.constraints & SnapConstraints.SnapToObject) {\n offset.x = horizontallysnapped.offset;\n }\n else {\n offset.x = endPoint.x - startPoint.x;\n }\n }\n if (!verticallysnapped.snapped) {\n if (this.diagram.snapSettings.constraints & SnapConstraints.SnapToHorizontalLines) {\n if (Math.abs(delta.y) >= 1) {\n if (towardsTop) {\n if (Math.abs(roundedBottom - currentbottom) > Math.abs(roundedTop - bounds.y)) {\n offset.y += roundedTop - bounds.y;\n }\n else {\n offset.y += roundedBottom - currentbottom;\n }\n }\n else {\n if (Math.abs(roundedBottom - currentbottom) < Math.abs(roundedTop - bounds.y)) {\n offset.y += roundedBottom - currentbottom;\n }\n else {\n offset.y += roundedTop - bounds.y;\n }\n }\n }\n }\n else {\n offset.y = endPoint.y - startPoint.y;\n }\n }\n else {\n offset.y = verticallysnapped.offset;\n }\n return offset;\n };\n /**\n * @private\n */\n Snapping.prototype.round = function (value, snapIntervals, scale) {\n if (scale > 1) {\n scale = Math.pow(2, Math.floor(Math.log(scale) / Math.log(2)));\n }\n else {\n scale = Math.pow(2, Math.ceil(Math.log(scale) / Math.log(2)));\n }\n var cutoff = 0;\n var i = 0;\n for (i = 0; i < snapIntervals.length; i++) {\n cutoff += snapIntervals[i];\n }\n cutoff /= scale;\n var quotient = Math.floor(Math.abs(value) / cutoff);\n var bal = value % cutoff;\n var prev = quotient * cutoff;\n if (prev !== value) {\n if (value >= 0) {\n for (i = 0; i < snapIntervals.length; i++) {\n if (bal <= snapIntervals[i] / scale) {\n return prev + (bal < (snapIntervals[i] / (2 * scale)) ? 0 : snapIntervals[i] / scale);\n }\n else {\n prev += snapIntervals[i] / scale;\n bal -= snapIntervals[i] / scale;\n }\n }\n }\n else {\n prev = prev * -1;\n for (i = snapIntervals.length - 1; i >= 0; i--) {\n if (Math.abs(bal) <= snapIntervals[i] / scale) {\n return prev - (Math.abs(bal) < (snapIntervals[i] / (2 * scale)) ? 0 : snapIntervals[i] / scale);\n }\n else {\n prev -= snapIntervals[i] / scale;\n bal += snapIntervals[i] / scale;\n }\n }\n }\n }\n return value;\n };\n /**\n * Snap to Object\n */\n Snapping.prototype.snapObject = function (diagram, selectedObject, g, horizontalSnap, verticalSnap, delta, ended) {\n var lengthX = null;\n var lengthY;\n var hTarget;\n var vTarget;\n var scroller = this.diagram.scroller;\n var snapSettings = this.diagram.snapSettings;\n var objectsAtLeft = [];\n var objectsAtRight = [];\n var objectsAtTop = [];\n var objectsAtBottom = [];\n var bounds = getBounds(selectedObject.wrapper);\n var scale = diagram.scroller.currentZoom;\n var hoffset = -scroller.horizontalOffset;\n var voffset = -scroller.verticalOffset;\n var snapObjDistance = snapSettings.snapObjectDistance / scale;\n var viewPort = new Rect(0, 0, scroller.viewPortWidth, scroller.viewPortHeight);\n var hIntersectRect = new Rect(hoffset / scale, (bounds.y - snapObjDistance - 5), viewPort.width / scale, (bounds.height + 2 * snapObjDistance + 10));\n var vIntersectRect = new Rect((bounds.x - snapObjDistance - 5), voffset / scale, (bounds.width + 2 * snapObjDistance + 10), viewPort.height / scale);\n viewPort = new Rect(hoffset / scale, voffset / scale, viewPort.width / scale, viewPort.height / scale);\n var nodes = this.findNodes(diagram.spatialSearch, selectedObject, vIntersectRect, viewPort);\n var i;\n var target;\n var targetBounds;\n var nameTable = diagram.nameTable;\n for (i = 0; i < nodes.length; i++) {\n target = nodes[i];\n if (this.canBeTarget(diagram, target)) {\n if (!(this.diagram.nameTable[target.id] instanceof Connector) && this.canConsider(nameTable, selectedObject, target)) {\n targetBounds = target.bounds;\n if (targetBounds.height + targetBounds.y < delta.y + bounds.y) {\n objectsAtTop.push({\n obj: target, distance: Math.abs(bounds.y + delta.y - targetBounds.y - targetBounds.height)\n });\n }\n else if (targetBounds.y > bounds.y + delta.y + bounds.height) {\n objectsAtBottom.push({ obj: target, distance: Math.abs(bounds.y + delta.y + bounds.height - targetBounds.y) });\n }\n if (lengthX == null || lengthX > Math.abs(targetBounds.y - bounds.y - delta.y)) {\n if (Math.abs(targetBounds.x + targetBounds.width / 2 - (bounds.x + bounds.width / 2 + delta.x)) <=\n snapObjDistance) {\n hTarget = this.createSnapObject(targetBounds, bounds, 'centerX');\n lengthX = Math.abs(targetBounds.y - bounds.y);\n }\n else if (Math.abs(targetBounds.x + targetBounds.width - (bounds.x + bounds.width + delta.x)) <= snapObjDistance) {\n hTarget = this.createSnapObject(targetBounds, bounds, 'right');\n lengthX = Math.abs(targetBounds.y - bounds.y);\n }\n else if (Math.abs(targetBounds.x - (bounds.x + delta.x)) <= snapObjDistance) {\n hTarget = this.createSnapObject(targetBounds, bounds, 'left');\n lengthX = Math.abs(targetBounds.y - bounds.y);\n }\n else if (Math.abs(targetBounds.x - (bounds.x + bounds.width + delta.x)) <= snapObjDistance) {\n hTarget = this.createSnapObject(targetBounds, bounds, 'rightLeft');\n lengthX = Math.abs(targetBounds.y - bounds.y);\n }\n else if (Math.abs(targetBounds.x + targetBounds.width - (bounds.x + delta.x)) <= snapObjDistance) {\n hTarget = this.createSnapObject(targetBounds, bounds, 'leftRight');\n lengthX = Math.abs(targetBounds.y - bounds.y);\n }\n }\n }\n }\n }\n nodes = this.findNodes(diagram.spatialSearch, selectedObject, hIntersectRect, viewPort);\n for (var j = 0; j < nodes.length; j++) {\n target = nodes[j];\n if (this.canBeTarget(diagram, target)) {\n if (!(this.diagram.nameTable[target.id] instanceof Connector) && this.canConsider(nameTable, selectedObject, target)) {\n targetBounds = target.bounds;\n if (targetBounds.x + targetBounds.width < bounds.x + delta.x) {\n objectsAtLeft[objectsAtLeft.length] = {\n obj: target, distance: Math.abs((bounds.x + delta.x) - targetBounds.x - targetBounds.width)\n };\n }\n if (targetBounds.x > bounds.x + delta.x + bounds.width) {\n objectsAtRight[objectsAtRight.length] = {\n obj: target, distance: Math.abs(bounds.x + delta.x + bounds.width - targetBounds.x)\n };\n }\n if (lengthY == null || lengthY > Math.abs(targetBounds.x - bounds.x - delta.x)) {\n if (Math.abs(targetBounds.y + targetBounds.height / 2 - (bounds.y + bounds.height / 2 + delta.y))\n <= snapObjDistance) {\n vTarget = this.createSnapObject(targetBounds, bounds, 'centerY');\n lengthY = Math.abs(targetBounds.x - bounds.x);\n }\n else if (Math.abs(targetBounds.y - bounds.y - delta.y) <= snapObjDistance) {\n vTarget = this.createSnapObject(targetBounds, bounds, 'top');\n lengthY = Math.abs(targetBounds.x - bounds.x);\n }\n else if (Math.abs(targetBounds.y + targetBounds.height - (bounds.y + bounds.height + delta.y)) <=\n snapObjDistance) {\n vTarget = this.createSnapObject(targetBounds, bounds, 'bottom');\n lengthY = Math.abs(targetBounds.x - bounds.x);\n }\n else if (Math.abs(targetBounds.y + targetBounds.height - bounds.y - delta.y) <= snapObjDistance) {\n vTarget = this.createSnapObject(targetBounds, bounds, 'topBottom');\n lengthY = Math.abs(targetBounds.x - bounds.x);\n }\n else if (Math.abs(targetBounds.y - (bounds.y + bounds.height + delta.y)) <= snapObjDistance) {\n vTarget = this.createSnapObject(targetBounds, bounds, 'bottomTop');\n lengthY = Math.abs(targetBounds.x - bounds.x);\n }\n }\n }\n }\n }\n this.createGuidelines(diagram, hTarget, vTarget, g, horizontalSnap, verticalSnap, ended);\n if (!horizontalSnap.snapped) {\n this.createHSpacingLines(diagram, g, selectedObject, objectsAtLeft, objectsAtRight, horizontalSnap, verticalSnap, ended, delta, snapObjDistance);\n }\n if (!verticalSnap.snapped) {\n this.createVSpacingLines(diagram, g, selectedObject, objectsAtTop, objectsAtBottom, horizontalSnap, verticalSnap, ended, delta, snapObjDistance);\n }\n };\n /**\n * @private\n */\n Snapping.prototype.snapConnectorEnd = function (point) {\n var snapSettings = this.diagram.snapSettings;\n var zoomFactor = 1;\n if (snapSettings.constraints & SnapConstraints.SnapToLines) {\n point.x = this.round(point.x, snapSettings.verticalGridlines.scaledIntervals, zoomFactor);\n point.y = this.round(point.y, snapSettings.horizontalGridlines.scaledIntervals, zoomFactor);\n }\n return point;\n };\n Snapping.prototype.canBeTarget = function (diagram, node) {\n node = this.diagram.nameTable[node.id];\n return !(isSelected(this.diagram, node, false));\n };\n Snapping.prototype.snapSize = function (diagram, horizontalSnap, verticalSnap, snapLine, deltaX, deltaY, selectedObject, ended) {\n var lengthX;\n var lengthY;\n var snapSettings = this.diagram.snapSettings;\n var scroller = this.diagram.scroller;\n var hTarget;\n var vTarget;\n var bounds = getBounds(selectedObject.wrapper);\n var nameTable = diagram.nameTable;\n var sameWidth = [];\n var sameHeight = [];\n var scale = diagram.scroller.currentZoom;\n var hoffset = -scroller.horizontalOffset;\n var voffset = -scroller.verticalOffset;\n var snapObjDistance = snapSettings.snapObjectDistance / scale;\n var viewPort = new Rect(0, 0, scroller.viewPortWidth, scroller.viewPortHeight);\n var hintersectedrect = new Rect(hoffset / scale, (bounds.y - 5) / scale, viewPort.width / scale, (bounds.height + 10) / scale);\n var vintersectedrect = new Rect((bounds.x - 5) / scale, voffset / scale, (bounds.width + 10) / scale, viewPort.height / scale);\n viewPort = new Rect(hoffset / scale, voffset / scale, viewPort.width / scale, viewPort.height / scale);\n var nodesInView = [];\n var nodes = this.findNodes(diagram.spatialSearch, selectedObject, vintersectedrect, viewPort, nodesInView);\n var i;\n var target;\n var targetBounds;\n for (i = 0; i < nodes.length; i++) {\n target = nodes[i];\n if (this.canConsider(nameTable, selectedObject, target) && !(this.diagram.nameTable[target.id] instanceof Connector)) {\n targetBounds = target.bounds;\n if (lengthX == null || lengthX > Math.abs(targetBounds.y - bounds.y)) {\n if (horizontalSnap.left) {\n if (Math.abs(bounds.x + deltaX - targetBounds.x) <= snapObjDistance) {\n hTarget = this.createSnapObject(targetBounds, bounds, 'left');\n lengthX = Math.abs(targetBounds.y - bounds.y);\n }\n else if (Math.abs(bounds.x + deltaX - targetBounds.x - targetBounds.width) <= snapObjDistance) {\n hTarget = this.createSnapObject(targetBounds, bounds, 'leftRight');\n lengthX = Math.abs(targetBounds.y - bounds.y);\n }\n }\n else if (horizontalSnap.right) {\n if (Math.abs(bounds.x + deltaX + bounds.width - targetBounds.x - targetBounds.width) <= snapObjDistance) {\n hTarget = this.createSnapObject(targetBounds, bounds, 'right');\n lengthX = Math.abs(targetBounds.y - bounds.y);\n }\n else if (Math.abs(bounds.x + deltaX + bounds.width - targetBounds.x) <= snapObjDistance) {\n hTarget = this.createSnapObject(targetBounds, bounds, 'rightLeft');\n lengthX = Math.abs(targetBounds.y - bounds.y);\n }\n }\n }\n }\n }\n nodes = this.findNodes(diagram.spatialSearch, selectedObject, hintersectedrect, viewPort);\n for (var i_1 = 0; i_1 < nodes.length; i_1++) {\n var target_1 = nodes[i_1];\n if (this.canConsider(nameTable, selectedObject, target_1) && !(this.diagram.nameTable[target_1.id] instanceof Connector)) {\n var targetBounds_1 = target_1.bounds;\n if (lengthY == null || lengthY > Math.abs(targetBounds_1.x - bounds.x)) {\n if (verticalSnap.top) {\n if (Math.abs(bounds.y + deltaY - targetBounds_1.y) <= snapObjDistance) {\n vTarget = this.createSnapObject(targetBounds_1, bounds, 'top');\n lengthY = Math.abs(targetBounds_1.x - bounds.x);\n }\n else if (Math.abs(bounds.y + deltaY - targetBounds_1.y - targetBounds_1.height) <= snapObjDistance) {\n vTarget = this.createSnapObject(targetBounds_1, bounds, 'topBottom');\n lengthY = Math.abs(targetBounds_1.x - bounds.x);\n }\n }\n else if (verticalSnap.bottom) {\n if (Math.abs(bounds.y + bounds.height + deltaY - targetBounds_1.y - targetBounds_1.height) <= snapObjDistance) {\n vTarget = this.createSnapObject(targetBounds_1, bounds, 'bottom');\n lengthY = Math.abs(targetBounds_1.x - bounds.x);\n }\n else if (Math.abs(bounds.y + bounds.height + deltaY - targetBounds_1.y) <= snapObjDistance) {\n vTarget = this.createSnapObject(targetBounds_1, bounds, 'bottomTop');\n lengthY = Math.abs(targetBounds_1.x - bounds.x);\n }\n }\n }\n }\n }\n for (i = 0; i < nodesInView.length; i++) {\n target = nodesInView[i];\n if (this.canConsider(nameTable, selectedObject, target)) {\n var targetBounds_2 = target.bounds;\n var delta = horizontalSnap.left ? -deltaX : deltaX;\n var difference = Math.abs(bounds.width + delta - targetBounds_2.width);\n var actualDiff = void 0;\n if (difference <= snapObjDistance) {\n actualDiff = horizontalSnap.left ? -targetBounds_2.width + bounds.width : targetBounds_2.width - bounds.width;\n sameWidth[sameWidth.length] = { source: target, difference: difference, offset: actualDiff };\n }\n delta = verticalSnap.top ? -deltaY : deltaY;\n var dify = Math.abs(bounds.height + delta - targetBounds_2.height);\n if (dify <= snapObjDistance) {\n actualDiff = verticalSnap.top ? -targetBounds_2.height + bounds.height : targetBounds_2.height - bounds.height;\n sameHeight[sameHeight.length] = { source: target, difference: dify, offset: actualDiff };\n }\n }\n }\n var g;\n if (!diagram.getTool) {\n var g_1 = this.createGuidelines(diagram, hTarget, vTarget, snapLine, horizontalSnap, verticalSnap, ended);\n }\n if (!horizontalSnap.snapped && sameWidth.length > 0 && (horizontalSnap.left || horizontalSnap.right)) {\n this.addSameWidthLines(diagram, snapLine, sameWidth, horizontalSnap, ended, selectedObject);\n }\n if (!verticalSnap.snapped && sameHeight.length > 0 && (verticalSnap.top || verticalSnap.bottom)) {\n this.addSameHeightLines(diagram, snapLine, sameHeight, verticalSnap, ended, selectedObject);\n }\n };\n /**\n * Snap to object on top\n * @private\n */\n Snapping.prototype.snapTop = function (horizontalSnap, verticalSnap, snapLine, deltaX, deltaY, shape, ended, initialBoundsT) {\n var dify = deltaY;\n verticalSnap.top = true;\n var y;\n horizontalSnap.left = horizontalSnap.right = false;\n var zoomFactor = 1;\n //let initialBoundsT: Rect = new Rect(shape.offsetX, shape.offsetY, shape.width, shape.height);\n if (this.diagram.snapSettings.constraints & SnapConstraints.SnapToObject && !shape.rotateAngle) {\n //(!this.selectedObject.isLane && !this.selectedObject.isSwimlane)) {\n y = initialBoundsT.y - initialBoundsT.height * shape.pivot.y + deltaY - (shape.offsetY - shape.height * shape.pivot.y);\n this.snapSize(this.diagram, horizontalSnap, verticalSnap, snapLine, deltaX, y, this.diagram.selectedItems, ended);\n }\n if (!verticalSnap.snapped) {\n if (this.diagram.snapSettings.constraints & SnapConstraints.SnapToHorizontalLines) {\n var top_1 = initialBoundsT.y - initialBoundsT.height * shape.pivot.y;\n var actualTop = top_1 + deltaY;\n var roundedTop = this.round(actualTop, this.diagram.snapSettings.horizontalGridlines.scaledIntervals, zoomFactor);\n dify = roundedTop - top_1;\n }\n }\n else {\n dify = (deltaY - y) + verticalSnap.offset;\n }\n return dify;\n };\n /**\n * Snap to object on right\n * @private\n */\n Snapping.prototype.snapRight = function (horizontalSnap, verticalSnap, snapLine, deltaX, deltaY, shape, ended, initialBound) {\n var difx = deltaX;\n var x;\n horizontalSnap.right = true;\n verticalSnap.top = verticalSnap.bottom = false;\n var zoomFactor = 1;\n //let initialBound: Rect = new Rect(shape.offsetX, shape.offsetY, shape.width, shape.height);\n if (this.diagram.snapSettings.constraints & SnapConstraints.SnapToObject && !shape.rotateAngle) {\n //(!this.selectedObject.isLane && !this.selectedObject.isSwimlane)) {\n x = initialBound.x + initialBound.width * (1 - shape.pivot.x) + deltaX - (shape.offsetX + shape.width * (1 - shape.pivot.x));\n this.snapSize(this.diagram, horizontalSnap, verticalSnap, snapLine, x, deltaY, this.diagram.selectedItems, ended);\n }\n if (!horizontalSnap.snapped) {\n if (this.diagram.snapSettings.constraints & SnapConstraints.SnapToVerticalLines) {\n var right = initialBound.x + initialBound.width * (1 - shape.pivot.x);\n var actualRight = right + deltaX;\n var roundedRight = this.round(actualRight, this.diagram.snapSettings.verticalGridlines.scaledIntervals, zoomFactor);\n difx = roundedRight - right;\n }\n }\n else {\n difx = (deltaX - x) + horizontalSnap.offset;\n }\n return difx;\n };\n /**\n * Snap to object on left\n * @private\n */\n Snapping.prototype.snapLeft = function (horizontalSnap, verticalSnap, snapLine, deltaX, deltaY, shape, ended, initialBoundsB) {\n var difx = deltaX;\n var x = 0;\n horizontalSnap.left = true;\n verticalSnap.top = verticalSnap.bottom = false;\n var zoomFactor = 1;\n //let initialBoundsB: Rect = new Rect(shape.offsetX, shape.offsetY, shape.width, shape.height);\n if (this.diagram.snapSettings.constraints & SnapConstraints.SnapToObject && !shape.rotateAngle) {\n //(!this.selectedObject.isLane && !this.selectedObject.isSwimlane)) {\n x = initialBoundsB.x - initialBoundsB.width * shape.pivot.x + deltaX - (shape.offsetX - shape.width * shape.pivot.x);\n this.snapSize(this.diagram, horizontalSnap, verticalSnap, snapLine, x, deltaY, this.diagram.selectedItems, ended);\n }\n if (!horizontalSnap.snapped) {\n if (this.diagram.snapSettings.constraints & SnapConstraints.SnapToVerticalLines) {\n var left = initialBoundsB.x - initialBoundsB.width * shape.pivot.x;\n var actualLeft = left + deltaX;\n var roundedLeft = this.round(actualLeft, this.diagram.snapSettings.horizontalGridlines.scaledIntervals, zoomFactor);\n difx = roundedLeft - left;\n }\n }\n else {\n difx = (deltaX - x) + horizontalSnap.offset;\n }\n return difx;\n };\n /**\n * Snap to object on bottom\n * @private\n */\n Snapping.prototype.snapBottom = function (horizontalSnap, verticalSnap, snapLine, deltaX, deltaY, shape, ended, initialRect) {\n var dify = deltaY;\n verticalSnap.bottom = true;\n horizontalSnap.left = horizontalSnap.right = false;\n var zoomFactor = 1;\n var y = 0;\n //let initialRect: Rect = new Rect(shape.offsetX, shape.offsetY, shape.width, shape.height);\n if (this.diagram.snapSettings.constraints & SnapConstraints.SnapToObject && !shape.rotateAngle) {\n //(!this.selectedObject.isLane && !this.selectedObject.isSwimlane)) {\n y = initialRect.y + initialRect.height * (1 - shape.pivot.y) + deltaY - (shape.offsetY + shape.height * (1 - shape.pivot.y));\n this.snapSize(this.diagram, horizontalSnap, verticalSnap, snapLine, deltaX, y, this.diagram.selectedItems, ended);\n }\n var bounds = getBounds(shape.wrapper);\n if (!verticalSnap.snapped) {\n if (this.diagram.snapSettings.constraints & SnapConstraints.SnapToHorizontalLines) {\n var bottom = initialRect.y + initialRect.height * (1 - shape.pivot.y);\n var actualBottom = bottom + deltaY;\n var roundedBottom = this.round(actualBottom, this.diagram.snapSettings.horizontalGridlines.scaledIntervals, zoomFactor);\n dify = roundedBottom - bottom;\n }\n }\n else {\n dify = (deltaY - y) + verticalSnap.offset;\n }\n return dify;\n };\n /**\n * To create the same width and same size lines\n */\n Snapping.prototype.createGuidelines = function (diagram, hTarget, vTarget, snapLine, horizontalSnap, verticalSnap, ended) {\n if (hTarget) {\n horizontalSnap.offset = hTarget.offsetX;\n horizontalSnap.snapped = true;\n if (!ended) {\n if (hTarget.type === 'sideAlign') {\n this.renderAlignmentLines(hTarget.start, hTarget.end, snapLine, diagram.scroller.transform);\n }\n else {\n this.renderAlignmentLines(hTarget.start, hTarget.end, snapLine, diagram.scroller.transform);\n }\n }\n }\n if (vTarget) {\n verticalSnap.offset = vTarget.offsetY;\n verticalSnap.snapped = true;\n if (!ended) {\n if (vTarget.type === 'sideAlign') {\n this.renderAlignmentLines(vTarget.start, vTarget.end, snapLine, diagram.scroller.transform);\n }\n else {\n this.renderAlignmentLines(vTarget.start, vTarget.end, snapLine, diagram.scroller.transform);\n }\n }\n }\n return snapLine;\n };\n /**\n * To create the alignment lines\n */\n Snapping.prototype.renderAlignmentLines = function (start, end, svg, transform) {\n start = {\n x: (start.x + transform.tx) * transform.scale,\n y: (start.y + transform.ty) * transform.scale\n };\n end = {\n x: (end.x + transform.tx) * transform.scale,\n y: (end.y + transform.ty) * transform.scale\n };\n var line1 = {\n stroke: '#07EDE1', strokeWidth: 1, startPoint: { x: start.x, y: start.y },\n endPoint: { x: end.x, y: end.y }, fill: '#07EDE1', dashArray: '', width: 1,\n x: 0, y: 0, height: 0, angle: 0, pivotX: 0,\n pivotY: 0, visible: true, opacity: 1, id: randomId()\n };\n var i = 0;\n this.line.push(line1);\n for (i = 0; i < this.line.length; i++) {\n this.diagram.diagramRenderer.drawLine(svg, this.line.pop());\n }\n };\n /**\n * To create Horizontal spacing lines\n */\n Snapping.prototype.createHSpacingLines = function (diagram, g, shape, objectsAtLeft, objectsAtRight, horizontalSnap, verticalSnap, ended, delta, snapObjDistance) {\n var top = 0;\n this.sortByDistance(objectsAtLeft, 'distance', true);\n this.sortByDistance(objectsAtRight, 'distance', true);\n var equallySpaced = [];\n var bounds = getBounds(shape.wrapper);\n var nearestleft;\n var nearestright;\n var targetBounds;\n var equaldistance;\n if (objectsAtLeft.length > 0) {\n equallySpaced[equallySpaced.length] = objectsAtLeft[0];\n nearestleft = ((objectsAtLeft[0].obj).bounds);\n top = nearestleft.y;\n if (objectsAtLeft.length > 1) {\n targetBounds = ((objectsAtLeft[1].obj).bounds);\n equaldistance = nearestleft.x - targetBounds.x - targetBounds.width;\n if (Math.abs(equaldistance - objectsAtLeft[0].distance) <= snapObjDistance) {\n top = this.findEquallySpacedNodesAtLeft(objectsAtLeft, equaldistance, top, equallySpaced);\n }\n else {\n equaldistance = objectsAtLeft[0].distance;\n }\n }\n else {\n equaldistance = objectsAtLeft[0].distance;\n }\n }\n this.sortByDistance(equallySpaced, 'distance');\n equallySpaced[equallySpaced.length] = { obj: shape, distance: 0 };\n top = bounds.y < top || !top ? bounds.y : top;\n if (objectsAtRight.length > 0) {\n var dist = void 0;\n nearestright = ((objectsAtRight[0].obj).bounds);\n top = nearestright.y < top ? nearestright.y : top;\n if (objectsAtRight.length > 1) {\n targetBounds = ((objectsAtRight[1].obj).bounds);\n dist = targetBounds.x - nearestright.x - nearestright.width;\n }\n if (objectsAtLeft.length > 0) {\n if (Math.abs(objectsAtRight[0].distance - objectsAtLeft[0].distance) <= snapObjDistance) {\n var adjustablevalue = Math.abs(objectsAtRight[0].distance - objectsAtLeft[0].distance) / 2;\n (objectsAtRight[0].distance < objectsAtLeft[0].distance) ?\n equaldistance -= adjustablevalue : equaldistance += adjustablevalue;\n equallySpaced[equallySpaced.length] = objectsAtRight[0];\n }\n else if (objectsAtLeft.length === 1) {\n nearestleft = undefined;\n equallySpaced.splice(0, 1);\n equallySpaced[equallySpaced.length] = objectsAtRight[0];\n equaldistance = dist;\n }\n }\n else {\n equaldistance = dist;\n equallySpaced[equallySpaced.length] = objectsAtRight[0];\n }\n if (objectsAtRight.length > 1 && nearestright.x + nearestright.width < targetBounds.x) {\n top = this.findEquallySpacedNodesAtRight(objectsAtRight, dist, top, equallySpaced, snapObjDistance);\n }\n }\n if (equallySpaced.length > 2) {\n this.addHSpacingLines(diagram, g, equallySpaced, ended, top);\n var deltaHorizontal = 0;\n if (ended) {\n deltaHorizontal = delta.x;\n }\n if (nearestleft) {\n horizontalSnap.offset = equaldistance - Math.abs(bounds.x + deltaHorizontal - nearestleft.x - nearestleft.width)\n + deltaHorizontal;\n }\n else if (nearestright) {\n horizontalSnap.offset = Math.abs(bounds.x + bounds.width + deltaHorizontal - nearestright.x)\n - equaldistance + deltaHorizontal;\n }\n horizontalSnap.snapped = true;\n }\n };\n /**\n * To create vertical spacing lines\n */\n Snapping.prototype.createVSpacingLines = function (diagram, g, shape, objectsAtTop, objectsAtBottom, horizontalSnap, verticalSnap, ended, delta, snapObjDistance) {\n var right = 0;\n this.sortByDistance(objectsAtTop, 'distance', true);\n this.sortByDistance(objectsAtBottom, 'distance', true);\n var equallySpaced = [];\n var bounds = getBounds(shape.wrapper);\n var nearesttop;\n var nearestbottom;\n var targetBounds;\n var equaldistance;\n if (objectsAtTop.length > 0) {\n equallySpaced[equallySpaced.length] = objectsAtTop[0];\n nearesttop = ((objectsAtTop[0].obj).bounds);\n right = nearesttop.x + nearesttop.width;\n if (objectsAtTop.length > 1) {\n targetBounds = ((objectsAtTop[1].obj).bounds);\n equaldistance = nearesttop.y - targetBounds.y - targetBounds.height;\n if (Math.abs(equaldistance - objectsAtTop[0].distance) <= snapObjDistance) {\n right = this.findEquallySpacedNodesAtTop(objectsAtTop, equaldistance, right, equallySpaced);\n }\n else {\n equaldistance = objectsAtTop[0].distance;\n }\n }\n else {\n equaldistance = objectsAtTop[0].distance;\n }\n }\n this.sortByDistance(equallySpaced, 'distance');\n equallySpaced[equallySpaced.length] = { obj: shape, distance: 0 };\n right = bounds.x + bounds.width > right || !right ? bounds.x + bounds.width : right;\n var dist;\n if (objectsAtBottom.length > 0) {\n nearestbottom = ((objectsAtBottom[0].obj).bounds);\n right = nearestbottom.x + nearestbottom.width > right ? nearestbottom.x + nearestbottom.width : right;\n if (objectsAtBottom.length > 1) {\n targetBounds = ((objectsAtBottom[1].obj).bounds);\n dist = targetBounds.y - nearestbottom.y - nearestbottom.height;\n }\n if (objectsAtTop.length > 0) {\n if (Math.abs(objectsAtBottom[0].distance - objectsAtTop[0].distance) <= snapObjDistance) {\n var adjustablevalue = Math.abs(objectsAtBottom[0].distance - objectsAtTop[0].distance) / 2;\n (objectsAtBottom[0].distance < objectsAtTop[0].distance) ?\n equaldistance -= adjustablevalue : equaldistance += adjustablevalue;\n equallySpaced[equallySpaced.length] = objectsAtBottom[0];\n }\n else if (objectsAtTop.length === 1) {\n nearesttop = undefined;\n equallySpaced.splice(0, 1);\n equallySpaced[equallySpaced.length] = objectsAtBottom[0];\n equaldistance = dist;\n }\n }\n else {\n equaldistance = dist;\n equallySpaced[equallySpaced.length] = objectsAtBottom[0];\n }\n if (objectsAtBottom.length > 1 && targetBounds.y > nearestbottom.y + nearestbottom.height) {\n right = this.findEquallySpacedNodesAtBottom(objectsAtBottom, dist, right, equallySpaced, snapObjDistance);\n }\n }\n if (equallySpaced.length > 2) {\n this.addVSpacingLines(diagram, g, equallySpaced, ended, right);\n var deltaVertical = 0;\n if (ended) {\n deltaVertical = delta.y;\n }\n if (nearesttop) {\n verticalSnap.offset = equaldistance - Math.abs(bounds.y + deltaVertical - nearesttop.y - nearesttop.height) + deltaVertical;\n }\n else if (nearestbottom) {\n verticalSnap.offset = Math.abs(bounds.y + bounds.height + deltaVertical - nearestbottom.y) - equaldistance + deltaVertical;\n }\n verticalSnap.snapped = true;\n }\n };\n /**\n * Add the Horizontal spacing lines\n */\n Snapping.prototype.addHSpacingLines = function (diagram, g, equallySpaced, ended, top) {\n var i;\n var start;\n var end;\n if (!ended) {\n for (i = 0; i < equallySpaced.length - 1; i++) {\n var crnt = equallySpaced[i].obj instanceof Selector ?\n getBounds((equallySpaced[i].obj).wrapper) : ((equallySpaced[i].obj).bounds);\n var next = equallySpaced[i + 1].obj instanceof Selector ?\n getBounds((equallySpaced[i + 1].obj).wrapper) : ((equallySpaced[i + 1].obj).bounds);\n start = { x: crnt.x + crnt.width, y: top - 15 };\n end = { x: next.x, y: top - 15 };\n this.renderSpacingLines(start, end, g, getAdornerLayerSvg(this.diagram.element.id), diagram.scroller.transform);\n }\n }\n };\n /**\n * Add the vertical spacing lines\n */\n Snapping.prototype.addVSpacingLines = function (diagram, g, equallySpacedObjects, ended, right) {\n var start;\n var end;\n if (!ended) {\n for (var i = 0; i < equallySpacedObjects.length - 1; i++) {\n var crnt = equallySpacedObjects[i].obj instanceof Selector ?\n getBounds((equallySpacedObjects[i].obj).wrapper) : ((equallySpacedObjects[i].obj).bounds);\n var next = equallySpacedObjects[i + 1].obj instanceof Selector ?\n getBounds((equallySpacedObjects[i + 1].obj).wrapper) :\n ((equallySpacedObjects[i + 1].obj).bounds);\n start = { x: right + 15, y: crnt.y + crnt.height };\n end = { x: right + 15, y: next.y };\n this.renderSpacingLines(start, end, g, getAdornerLayerSvg(this.diagram.element.id), diagram.scroller.transform);\n }\n }\n };\n /**\n * To add same width lines\n */\n Snapping.prototype.addSameWidthLines = function (diagram, snapLine, sameWidths, horizontalSnap, ended, shape) {\n this.sortByDistance(sameWidths, 'offset');\n var bounds = getBounds(shape.wrapper);\n var target = sameWidths[0];\n var startPt;\n var endPt;\n var targetBounds = (target.source).bounds;\n var sameSizes = [];\n sameSizes.push(sameWidths[0]);\n var i;\n var crntbounds;\n for (i = 1; i < sameWidths.length; i++) {\n crntbounds = (sameWidths[i].source).bounds;\n if (crntbounds.width === targetBounds.width) {\n sameSizes.push(sameWidths[i]);\n }\n }\n if (!ended) {\n startPt = { x: bounds.x + target.offset, y: bounds.y - 15 };\n endPt = { x: bounds.x + bounds.width + target.offset, y: bounds.y - 15 };\n this.renderSpacingLines(startPt, endPt, snapLine, getAdornerLayerSvg(this.diagram.element.id), diagram.scroller.transform);\n for (i = 0; i < sameSizes.length; i++) {\n bounds = (sameSizes[i].source).bounds;\n startPt = { x: bounds.x, y: bounds.y - 15 };\n endPt = { x: bounds.x + bounds.width, y: bounds.y - 15 };\n this.renderSpacingLines(startPt, endPt, snapLine, getAdornerLayerSvg(this.diagram.element.id), diagram.scroller.transform);\n }\n }\n horizontalSnap.offset = target.offset;\n horizontalSnap.snapped = true;\n };\n /**\n * To add same height lines\n */\n Snapping.prototype.addSameHeightLines = function (diagram, snapLine, sameHeights, verticalSnap, ended, shape) {\n this.sortByDistance(sameHeights, 'offset');\n var bounds = getBounds(shape.wrapper);\n var target = sameHeights[0];\n var targetBounds = (target.source).bounds;\n var start;\n var end;\n var sameSizes = [];\n sameSizes.push(sameHeights[0]);\n var i;\n var crntbounds;\n for (i = 0; i < sameHeights.length; i++) {\n crntbounds = (sameHeights[i].source).bounds;\n if (crntbounds.height === targetBounds.height) {\n sameSizes.push(sameHeights[i]);\n }\n }\n if (!ended) {\n start = { x: bounds.x + bounds.width + 15, y: bounds.y + target.offset };\n end = { x: bounds.x + bounds.width + 15, y: bounds.y + target.offset + bounds.height };\n this.renderSpacingLines(start, end, snapLine, getAdornerLayerSvg(this.diagram.element.id), diagram.scroller.transform);\n for (i = 0; i < sameSizes.length; i++) {\n bounds = (sameSizes[i].source).bounds;\n start = { x: bounds.x + bounds.width + 15, y: bounds.y };\n end = { x: bounds.x + bounds.width + 15, y: bounds.y + bounds.height };\n this.renderSpacingLines(start, end, snapLine, getAdornerLayerSvg(this.diagram.element.id), diagram.scroller.transform);\n }\n }\n verticalSnap.offset = target.offset;\n verticalSnap.snapped = true;\n };\n /**\n * Render spacing lines\n */\n Snapping.prototype.renderSpacingLines = function (start, end, snapLine, svg, transform) {\n var d;\n var d1;\n var line1;\n var element = new PathElement();\n var options = {};\n start = {\n x: (start.x + transform.tx) * transform.scale,\n y: (start.y + transform.ty) * transform.scale\n };\n end = {\n x: (end.x + transform.tx) * transform.scale,\n y: (end.y + transform.ty) * transform.scale\n };\n if (start.x === end.x) {\n d = 'M' + (start.x - 5) + ' ' + (start.y + 5) + 'L' + start.x + ' ' + start.y +\n 'L' + (start.x + 5) + ' ' + (start.y + 5) + 'z' + 'M' + (end.x - 5) + ' ' +\n (end.y - 5) + ' L' + end.x + ' ' + end.y + ' L' +\n (end.x + 5) + ' ' + (end.y - 5) + 'z';\n line1 = {\n startPoint: { x: start.x - 8, y: start.y - 1 },\n endPoint: { x: start.x + 8, y: start.y - 1 },\n stroke: '#07EDE1',\n strokeWidth: 1, fill: '#07EDE1', dashArray: '', width: 1, x: 0, y: 0, height: 0, angle: 0, pivotX: 0,\n pivotY: 0, visible: true, opacity: 1, id: randomId()\n };\n element.data = d;\n options.data = element.data;\n options.angle = 0;\n options.pivotX = 0;\n options.pivotY = 0;\n options.x = 0;\n options.y = 0;\n options.height = 0;\n options.width = 1;\n options.id = randomId();\n this.diagram.diagramRenderer.drawPath(snapLine, options);\n this.line.push(line1);\n this.diagram.diagramRenderer.drawLine(snapLine, this.line.pop());\n line1 = {\n startPoint: { x: end.x - 8, y: end.y + 1 },\n endPoint: { x: end.x + 8, y: end.y + 1 },\n stroke: '#07EDE1',\n strokeWidth: 1, fill: '#07EDE1', dashArray: '', width: 1, x: 0, y: 0, height: 0, angle: 0, pivotX: 0,\n pivotY: 0, visible: true, opacity: 1, id: getAdornerLayerSvg(this.diagram.element.id).id + 'spacing'\n };\n this.line.push(line1);\n this.diagram.diagramRenderer.drawLine(snapLine, this.line.pop());\n }\n else {\n d = 'M' + (start.x + 5) + ' ' + (start.y + 5) + ' L' + start.x + ' ' + start.y +\n ' L' + (start.x + 5) + ' ' + (start.y - 5) + 'z' + 'M' + (end.x - 5) + ' ' +\n (end.y - 5) + ' L' + end.x + ' ' + end.y +\n ' L' + (end.x - 5) + ' ' + (end.y + 5) + 'z';\n element.data = d;\n options.data = d;\n options.angle = 0;\n options.pivotX = 0;\n options.pivotY = 0;\n options.x = 0;\n options.y = 0;\n options.height = 0;\n options.width = 1;\n options.id = randomId();\n this.diagram.diagramRenderer.drawPath(snapLine, options);\n line1 = {\n visible: true, opacity: 1, id: randomId(),\n startPoint: { x: start.x - 1, y: start.y - 8 },\n endPoint: { x: start.x - 1, y: start.y + 8 },\n stroke: '#07EDE1',\n strokeWidth: 1, fill: '#07EDE1', dashArray: '0', width: 1, x: 0, y: 0, height: 0, angle: 0, pivotX: 0,\n pivotY: 0\n };\n this.line.push(line1);\n this.diagram.diagramRenderer.drawLine(snapLine, this.line.pop());\n line1 = {\n width: 1, x: 0, y: 0, height: 0, angle: 0, pivotX: 0,\n pivotY: 0, visible: true, opacity: 1, id: randomId(),\n startPoint: { x: end.x + 1, y: end.y - 8 },\n endPoint: { x: end.x + 1, y: end.y + 8 },\n stroke: '#07EDE1',\n strokeWidth: 1, fill: '#07EDE1', dashArray: '0'\n };\n this.line.push(line1);\n this.diagram.diagramRenderer.drawLine(snapLine, this.line.pop());\n }\n line1 = {\n startPoint: { x: start.x, y: start.y },\n endPoint: { x: end.x, y: end.y }, stroke: '#07EDE1', strokeWidth: 1, fill: '#07EDE1',\n dashArray: '0', width: 1, x: 0, y: 0, height: 0, angle: 0, pivotX: 0,\n pivotY: 0, visible: true, opacity: 1, id: randomId()\n };\n this.line.push(line1);\n this.diagram.diagramRenderer.drawLine(snapLine, this.line.pop());\n };\n /**\n * To Create Snap object with position, initial bounds, and final bounds\n * @private\n */\n Snapping.prototype.createSnapObject = function (targetBounds, bounds, snap) {\n var snapObject;\n switch (snap) {\n case 'left':\n snapObject = {\n start: { x: (targetBounds.x), y: Math.min(targetBounds.y, bounds.y) },\n end: { x: (targetBounds.x), y: Math.max(targetBounds.y + targetBounds.height, bounds.y + bounds.height) },\n offsetX: targetBounds.x - bounds.x, offsetY: 0, type: 'sideAlign'\n };\n break;\n case 'right':\n snapObject = {\n type: 'sideAlign',\n start: { x: (targetBounds.x + targetBounds.width), y: Math.min(targetBounds.y, bounds.y) },\n offsetX: targetBounds.x + targetBounds.width - bounds.x - bounds.width,\n offsetY: 0,\n end: {\n x: (targetBounds.x + targetBounds.width),\n y: Math.max(targetBounds.y + targetBounds.height, bounds.y + bounds.height)\n },\n };\n break;\n case 'top':\n snapObject = {\n offsetY: targetBounds.y - bounds.y, offsetX: 0, type: 'sideAlign',\n start: { x: (Math.min(targetBounds.x, bounds.x)), y: targetBounds.y },\n end: { x: (Math.max(targetBounds.x + targetBounds.width, bounds.x + bounds.width)), y: targetBounds.y },\n };\n break;\n case 'bottom':\n snapObject = {\n type: 'sideAlign', offsetY: targetBounds.y + targetBounds.height - bounds.y - bounds.height, offsetX: 0,\n end: {\n x: (Math.max(targetBounds.x + targetBounds.width, bounds.x + bounds.width)),\n y: targetBounds.y + targetBounds.height\n },\n start: { x: (Math.min(targetBounds.x, bounds.x)), y: targetBounds.y + targetBounds.height },\n };\n break;\n case 'topBottom':\n snapObject = {\n start: { x: (Math.min(targetBounds.x, bounds.x)), y: targetBounds.y + targetBounds.height },\n end: {\n x: (Math.max(targetBounds.x + targetBounds.width, bounds.x + bounds.width)),\n y: targetBounds.y + targetBounds.height\n },\n offsetY: targetBounds.y + targetBounds.height - bounds.y, offsetX: 0, type: 'sideAlign'\n };\n break;\n case 'bottomTop':\n snapObject = {\n start: { x: (Math.min(targetBounds.x, bounds.x)), y: targetBounds.y },\n end: { x: (Math.max(targetBounds.x + targetBounds.width, bounds.x + bounds.width)), y: targetBounds.y },\n offsetY: targetBounds.y - bounds.y - bounds.height, offsetX: 0, type: 'sideAlign'\n };\n break;\n case 'leftRight':\n snapObject = {\n start: { x: (targetBounds.x + targetBounds.width), y: Math.min(targetBounds.y, bounds.y) },\n end: {\n x: (targetBounds.x + targetBounds.width),\n y: Math.max(targetBounds.y + targetBounds.height, bounds.y + bounds.height)\n },\n offsetX: targetBounds.x + targetBounds.width - bounds.x, offsetY: 0, type: 'sideAlign'\n };\n break;\n case 'rightLeft':\n snapObject = {\n start: { x: (targetBounds.x), y: (Math.min(targetBounds.y, bounds.y)) },\n end: { x: (targetBounds.x), y: Math.max(targetBounds.y + targetBounds.height, bounds.y + bounds.height) },\n offsetX: targetBounds.x - bounds.x - bounds.width, offsetY: 0, type: 'sideAlign'\n };\n break;\n case 'centerX':\n snapObject = {\n start: { x: (targetBounds.x + targetBounds.width / 2), y: (Math.min(targetBounds.y, bounds.y)) },\n end: {\n x: (targetBounds.x + targetBounds.width / 2),\n y: Math.max(targetBounds.y + targetBounds.height, bounds.y + bounds.height)\n },\n offsetX: targetBounds.x + targetBounds.width / 2 - (bounds.x + bounds.width / 2), offsetY: 0, type: 'centerAlign'\n };\n break;\n case 'centerY':\n snapObject = {\n start: { x: (Math.min(targetBounds.x, bounds.x)), y: targetBounds.y + targetBounds.height / 2 },\n end: {\n x: (Math.max(targetBounds.x + targetBounds.width, bounds.x + bounds.width)),\n y: targetBounds.y + targetBounds.height / 2\n },\n offsetY: targetBounds.y + targetBounds.height / 2 - (bounds.y + bounds.height / 2), offsetX: 0, type: 'centerAlign'\n };\n break;\n }\n return snapObject;\n };\n /**\n * Calculate the snap angle\n * @private\n */\n Snapping.prototype.snapAngle = function (diagram, angle) {\n var snapSettings = this.diagram.snapSettings;\n var snapAngle = snapSettings.snapAngle;\n var width = angle % (snapAngle || 0);\n if (width >= (snapAngle / 2)) {\n return angle + snapAngle - width;\n }\n else {\n return angle - width;\n }\n };\n /**\n * Check whether the node to be snapped or not.\n */\n Snapping.prototype.canConsider = function (nameTable, selectedObject, target) {\n var consider = false;\n if (this.diagram.selectedItems.nodes.length && this.diagram.selectedItems.nodes[0].id === target.id) {\n return false;\n }\n else {\n return true;\n }\n };\n /**\n * Find the total number of nodes in diagram using SpatialSearch\n */\n Snapping.prototype.findNodes = function (spatialSearch, node, child, viewPort, nodesInView) {\n var nodes = [];\n var nd;\n var bounds;\n var quads = spatialSearch.findQuads(nodesInView ? viewPort : child);\n for (var i = 0; i < quads.length; i++) {\n var quad = quads[i];\n if (quad.objects.length > 0) {\n for (var j = 0; j < quad.objects.length; j++) {\n nd = quad.objects[j];\n if (!(this.diagram.nameTable[nd.id] instanceof Connector) && nd.visible) {\n bounds = getBounds(nd);\n if (nodes.indexOf(nd) === -1 && this.intersectsRect(child, bounds)) {\n nodes.push(nd);\n }\n if (nodesInView && nodesInView.indexOf(nd) && this.intersectsRect(viewPort, bounds)) {\n nodesInView.push(nd);\n }\n }\n }\n }\n }\n return nodes;\n };\n Snapping.prototype.intersectsRect = function (child, bounds) {\n return ((((bounds.x < (child.x + child.width)) && (child.x < (bounds.x + bounds.width)))\n && (bounds.y < (child.y + child.height))) && (child.y < (bounds.y + bounds.height)));\n };\n /**\n * To remove grid lines on mouse move and mouse up\n * @private\n */\n Snapping.prototype.removeGuidelines = function (diagram) {\n var selectionRect = getAdornerLayerSvg(this.diagram.element.id).getElementById('_SnappingLines');\n var line = getAdornerLayerSvg(this.diagram.element.id).getElementById('pivotLine');\n if (selectionRect) {\n selectionRect.parentNode.removeChild(selectionRect);\n }\n if (line) {\n line.parentNode.removeChild(line);\n }\n };\n /**\n * Sort the objects by its distance\n */\n Snapping.prototype.sortByDistance = function (obj, value, ascending) {\n var i;\n var j;\n var temp;\n if (ascending) {\n for (i = 0; i < obj.length; i++) {\n for (j = i + 1; j < obj.length; j++) {\n if (obj[i][value] > obj[j][value]) {\n temp = obj[i];\n obj[i] = obj[j];\n obj[j] = temp;\n }\n }\n }\n }\n else {\n for (i = 0; i < obj.length; i++) {\n for (j = i + 1; j < obj.length; j++) {\n if (obj[i][value] < obj[j][value]) {\n temp = obj[i];\n obj[i] = obj[j];\n obj[j] = temp;\n }\n }\n }\n }\n };\n /**\n * To find nodes that are equally placed at left of the selected node\n */\n Snapping.prototype.findEquallySpacedNodesAtLeft = function (objectsAtLeft, equalDistance, top, equallySpaced) {\n var prevBounds;\n var targetBounds;\n var dist;\n var i;\n for (i = 1; i < objectsAtLeft.length; i++) {\n prevBounds = ((objectsAtLeft[i - 1].obj).bounds);\n targetBounds = ((objectsAtLeft[i].obj).bounds);\n dist = prevBounds.x - targetBounds.x - targetBounds.width;\n if (Math.abs(dist - equalDistance) <= 1) {\n equallySpaced[equallySpaced.length] = objectsAtLeft[i];\n if (targetBounds.y < top) {\n top = targetBounds.y;\n }\n }\n else {\n break;\n }\n }\n return top;\n };\n /**\n * To find nodes that are equally placed at right of the selected node\n */\n Snapping.prototype.findEquallySpacedNodesAtRight = function (objectsAtRight, equalDistance, top, equallySpaced, snapObjDistance) {\n var actualDistance = objectsAtRight[0].distance;\n var target;\n var targetBounds;\n var prevBounds;\n var dist;\n if (Math.abs(equalDistance - actualDistance) <= snapObjDistance) {\n for (var i = 0; i < objectsAtRight.length - 1; i++) {\n target = objectsAtRight[i].obj;\n targetBounds = ((objectsAtRight[i + 1].obj).bounds);\n prevBounds = (target.bounds);\n dist = targetBounds.x - prevBounds.x - prevBounds.width;\n if (Math.abs(dist - equalDistance) <= 1) {\n equallySpaced[equallySpaced.length] = objectsAtRight[i + 1];\n if (prevBounds.y < top) {\n top = prevBounds.y;\n }\n }\n else {\n break;\n }\n }\n }\n return top;\n };\n Snapping.prototype.findEquallySpacedNodesAtTop = function (objectsAtTop, equalDistance, right, equallySpaced) {\n var prevBounds;\n var targetBounds;\n var dist;\n for (var i = 1; i < objectsAtTop.length; i++) {\n prevBounds = ((objectsAtTop[i - 1].obj).bounds);\n targetBounds = ((objectsAtTop[i].obj).bounds);\n dist = prevBounds.y - targetBounds.y - targetBounds.height;\n if (Math.abs(dist - equalDistance) <= 1) {\n equallySpaced[equallySpaced.length] = objectsAtTop[i];\n if (targetBounds.x + targetBounds.width > right) {\n right = targetBounds.x + targetBounds.width;\n }\n }\n else {\n break;\n }\n }\n return right;\n };\n /**\n * To find nodes that are equally placed at bottom of the selected node\n */\n Snapping.prototype.findEquallySpacedNodesAtBottom = function (objectsAtBottom, equalDistance, right, equallySpaced, snapObjDistance) {\n var actualDistance = objectsAtBottom[0].distance;\n var target;\n var targetBounds;\n var prevBounds;\n var dist;\n if (Math.abs(equalDistance - actualDistance) <= snapObjDistance) {\n for (var i = 0; i < objectsAtBottom.length - 1; i++) {\n target = objectsAtBottom[i].obj;\n targetBounds = ((objectsAtBottom[i + 1].obj).bounds);\n prevBounds = (target.bounds);\n dist = targetBounds.y - prevBounds.y - prevBounds.height;\n if (Math.abs(dist - equalDistance) <= 1) {\n equallySpaced[equallySpaced.length] = objectsAtBottom[i + 1];\n if (prevBounds.x + prevBounds.width > right) {\n right = prevBounds.x + prevBounds.width;\n }\n }\n else {\n break;\n }\n }\n }\n return right;\n };\n /**\n * To get Adoner layer to draw snapLine\n * @private\n */\n Snapping.prototype.getLayer = function () {\n var snapLine;\n if (this.diagram.snapSettings.constraints & SnapConstraints.SnapToObject) {\n snapLine = document.createElementNS('http://www.w3.org/2000/svg', 'g');\n snapLine.setAttribute('id', '_SnappingLines');\n snapLine.setAttribute('shapeRendering', 'crispEdges');\n getAdornerLayerSvg(this.diagram.element.id).appendChild(snapLine);\n }\n return snapLine;\n };\n /**\n * Constructor for the snapping module\n * @private\n */\n // constructor() {\n // //constructs the snapping module\n // }\n /**\n * To destroy the snapping module\n * @return {void}\n * @private\n */\n Snapping.prototype.destroy = function () {\n /**\n * Destroys the snapping module\n */\n };\n /**\n * Get module name.\n */\n Snapping.prototype.getModuleName = function () {\n /**\n * Returns the module name\n */\n return 'Snapping';\n };\n return Snapping;\n}());\nexport { Snapping };\n","import { Node } from './node';\nimport { DiagramAction } from '../enum/enum';\nimport { removeItem, getObjectType } from '../utility/diagram-util';\nimport { cloneObject } from '../utility/base-util';\n/**\n * Undo redo function used for revert and restore the changes\n */\nvar UndoRedo = /** @class */ (function () {\n /**\n * Constructor for the undo redo module\n * @private\n */\n function UndoRedo() {\n this.groupUndo = false;\n this.childTable = [];\n //constructs the undo redo module\n }\n /** @private */\n UndoRedo.prototype.initHistory = function (diagram) {\n diagram.historyList = {\n canRedo: false, canUndo: false, currentEntry: null,\n push: diagram.addHistoryEntry.bind(diagram), undo: Function, redo: Function,\n startGroupAction: diagram.startGroupAction.bind(diagram), endGroupAction: diagram.endGroupAction.bind(diagram),\n canLog: null, undoStack: [], redoStack: []\n };\n };\n /** @private */\n UndoRedo.prototype.addHistoryEntry = function (entry, diagram) {\n var entryObject = null;\n var nextEntry = null;\n if (diagram.historyList.canLog) {\n var hEntry = diagram.historyList.canLog(entry);\n if (hEntry.cancel === true) {\n return;\n }\n }\n if (diagram.historyList && diagram.historyList.canUndo && diagram.historyList.currentEntry) {\n entryObject = diagram.historyList.currentEntry;\n if (entryObject.next) {\n if (entryObject.previous) {\n nextEntry = entryObject.next;\n nextEntry.previous = null;\n entryObject.next = entry;\n entry.previous = entryObject;\n }\n }\n else {\n entryObject.next = entry;\n entry.previous = entryObject;\n }\n }\n diagram.historyList.currentEntry = entry;\n this.getHistoryList(diagram);\n diagram.historyList.canUndo = true;\n diagram.historyList.canRedo = false;\n };\n /** @private */\n UndoRedo.prototype.undo = function (diagram) {\n var entry = this.getUndoEntry(diagram);\n var endGroupActionCount = 0;\n if (entry) {\n if (entry.category === 'Internal') {\n if (entry.type === 'EndGroup') {\n endGroupActionCount++;\n this.groupUndo = true;\n }\n else {\n this.undoEntry(entry, diagram);\n }\n if (this.groupUndo) {\n this.undoGroupAction(entry, diagram, endGroupActionCount);\n this.groupUndo = false;\n }\n }\n else {\n diagram.historyList.undo(entry);\n }\n }\n };\n UndoRedo.prototype.getHistoryList = function (diagram) {\n var undoStack = [];\n var redoStack = [];\n var currEntry = diagram.historyList.currentEntry;\n var undoObj;\n var redoObj;\n currEntry = diagram.historyList.currentEntry;\n if (diagram.historyList.canUndo || diagram.historyList.undoStack.length === 0) {\n this.getHistroyObject(undoStack, currEntry);\n }\n else {\n this.getHistroyObject(redoStack, currEntry);\n }\n while (currEntry && currEntry.previous) {\n undoObj = currEntry.previous;\n this.getHistroyObject(undoStack, undoObj);\n currEntry = currEntry.previous;\n }\n currEntry = diagram.historyList.currentEntry;\n while (currEntry && currEntry.next) {\n redoObj = currEntry.next;\n this.getHistroyObject(redoStack, redoObj);\n currEntry = currEntry.next;\n }\n diagram.historyList.undoStack = undoStack;\n diagram.historyList.redoStack = redoStack;\n };\n UndoRedo.prototype.getHistroyObject = function (list, obj) {\n if (obj && obj.type !== 'StartGroup' && obj.type !== 'EndGroup') {\n list.push({\n redoObject: obj.redoObject ? obj.redoObject : null,\n undoObject: obj.undoObject ? obj.undoObject : null,\n type: obj.type ? obj.type : null,\n category: obj.category ? obj.category : null\n });\n }\n };\n UndoRedo.prototype.undoGroupAction = function (entry, diagram, endGroupActionCount) {\n while (endGroupActionCount !== 0) {\n this.undoEntry(entry, diagram);\n entry = this.getUndoEntry(diagram);\n if (entry.type === 'StartGroup') {\n endGroupActionCount--;\n }\n else if (entry.type === 'EndGroup') {\n endGroupActionCount++;\n }\n }\n endGroupActionCount = 0;\n };\n UndoRedo.prototype.undoEntry = function (entry, diagram) {\n var obj;\n if (entry.type !== 'PropertyChanged' && entry.type !== 'CollectionChanged' && entry.type !== 'LabelCollectionChanged') {\n obj = (entry.undoObject);\n }\n if (entry.type !== 'StartGroup' && entry.type !== 'EndGroup') {\n if (diagram.historyList.undoStack.length > 0) {\n var addObject = diagram.historyList.undoStack.splice(0, 1);\n diagram.historyList.redoStack.splice(0, 0, addObject[0]);\n }\n }\n diagram.protectPropertyChange(true);\n diagram.diagramActions |= DiagramAction.UndoRedo;\n switch (entry.type) {\n case 'PositionChanged':\n case 'Align':\n case 'Distribute':\n this.recordPositionChanged(obj, diagram);\n break;\n case 'SizeChanged':\n case 'Sizing':\n this.recordSizeChanged(obj, diagram, entry);\n break;\n case 'RotationChanged':\n this.recordRotationChanged(obj, diagram, entry);\n break;\n case 'ConnectionChanged':\n this.recordConnectionChanged(obj, diagram);\n break;\n case 'PropertyChanged':\n this.recordPropertyChanged(entry, diagram, false);\n break;\n case 'CollectionChanged':\n entry.isUndo = true;\n this.recordCollectionChanged(entry, diagram);\n entry.isUndo = false;\n break;\n case 'LabelCollectionChanged':\n entry.isUndo = true;\n this.recordLabelCollectionChanged(entry, diagram);\n entry.isUndo = false;\n break;\n case 'PortCollectionChanged':\n entry.isUndo = true;\n this.recordPortCollectionChanged(entry, diagram);\n entry.isUndo = false;\n break;\n case 'Group':\n this.unGroup(entry, diagram);\n break;\n case 'UnGroup':\n this.group(entry, diagram);\n break;\n case 'SegmentChanged':\n this.recordSegmentChanged(obj, diagram);\n break;\n }\n diagram.diagramActions &= ~DiagramAction.UndoRedo;\n diagram.protectPropertyChange(false);\n diagram.historyChangeTrigger(entry);\n };\n UndoRedo.prototype.group = function (historyEntry, diagram) {\n diagram.add(historyEntry.undoObject);\n };\n UndoRedo.prototype.unGroup = function (entry, diagram) {\n var i = 0;\n entry.redoObject = cloneObject(entry.undoObject);\n var node = entry.undoObject;\n diagram.commandHandler.unGroup(node);\n };\n UndoRedo.prototype.ignoreProperty = function (key) {\n if (key === 'zIndex' || key === 'wrapper') {\n return true;\n }\n return false;\n };\n UndoRedo.prototype.getProperty = function (collection, property) {\n for (var _i = 0, _a = Object.keys(property); _i < _a.length; _i++) {\n var key = _a[_i];\n if (!this.ignoreProperty(key)) {\n if (property[key] instanceof Object) {\n this.getProperty(collection[key], property[key]);\n }\n else {\n collection[key] = property[key];\n }\n }\n }\n };\n UndoRedo.prototype.recordPropertyChanged = function (entry, diagram, isRedo) {\n var redoObject = entry.redoObject;\n var undoObject = entry.undoObject;\n this.getProperty(diagram, (isRedo ? redoObject : undoObject));\n isRedo ? diagram.onPropertyChanged(redoObject, undoObject) : diagram.onPropertyChanged(undoObject, redoObject);\n diagram.diagramActions = diagram.diagramActions | DiagramAction.UndoRedo;\n };\n UndoRedo.prototype.recordSegmentChanged = function (obj, diagram) {\n var i = 0;\n var node;\n var connector;\n if (obj.connectors && obj.connectors.length > 0) {\n for (i = 0; i < obj.connectors.length; i++) {\n connector = obj.connectors[i];\n this.segmentChanged(connector, diagram);\n }\n }\n };\n UndoRedo.prototype.segmentChanged = function (connector, diagram) {\n var conn = diagram.nameTable[connector.id];\n conn.segments = connector.segments;\n diagram.commandHandler.updateEndPoint(conn);\n };\n UndoRedo.prototype.recordPositionChanged = function (obj, diagram) {\n var i = 0;\n var node;\n var connector;\n if (obj.nodes && obj.nodes.length > 0) {\n for (i = 0; i < obj.nodes.length; i++) {\n node = obj.nodes[i];\n this.positionChanged(node, diagram);\n }\n }\n if (obj.connectors && obj.connectors.length > 0) {\n for (i = 0; i < obj.connectors.length; i++) {\n connector = obj.connectors[i];\n this.connectionChanged(connector, diagram);\n }\n }\n };\n UndoRedo.prototype.positionChanged = function (obj, diagram, entry) {\n var node = diagram.nameTable[obj.id];\n if (obj.processId && !node.processId) {\n diagram.addProcess(obj, obj.processId);\n }\n if (!obj.processId && node.processId) {\n diagram.removeProcess(obj.id);\n }\n if (node.processId) {\n var tx = obj.margin.left - node.margin.left;\n var ty = obj.margin.top - node.margin.top;\n diagram.drag(node, tx, ty);\n }\n else {\n var tx = obj.offsetX - node.wrapper.offsetX;\n var ty = obj.offsetY - node.wrapper.offsetY;\n diagram.drag(node, tx, ty);\n }\n if (diagram.bpmnModule) {\n diagram.bpmnModule.updateDocks(node, diagram);\n }\n };\n UndoRedo.prototype.recordSizeChanged = function (obj, diagram, entry) {\n var i = 0;\n var connector;\n var node;\n if (obj && obj.nodes && obj.nodes.length > 0) {\n for (i = 0; i < obj.nodes.length; i++) {\n node = obj.nodes[i];\n if (node.children) {\n var elements = [];\n var nodes = diagram.commandHandler.getAllDescendants(node, elements);\n for (var i_1 = 0; i_1 < nodes.length; i_1++) {\n var tempNode = entry.childTable[nodes[i_1].id];\n if ((getObjectType(tempNode) === Node)) {\n this.sizeChanged(tempNode, diagram, entry);\n this.positionChanged(tempNode, diagram, entry);\n }\n else {\n this.connectionChanged(tempNode, diagram, entry);\n }\n }\n }\n else {\n this.sizeChanged(node, diagram);\n this.positionChanged(node, diagram);\n }\n }\n }\n if (obj && obj.connectors && obj.connectors.length > 0) {\n var connectors = obj.connectors;\n for (i = 0; i < connectors.length; i++) {\n connector = connectors[i];\n this.connectionChanged(connector, diagram);\n }\n }\n };\n UndoRedo.prototype.sizeChanged = function (obj, diagram, entry) {\n var node = diagram.nameTable[obj.id];\n var scaleWidth = obj.wrapper.actualSize.width / node.wrapper.actualSize.width;\n var scaleHeight = obj.wrapper.actualSize.height / node.wrapper.actualSize.height;\n if (entry && entry.childTable) {\n entry.childTable[obj.id] = cloneObject(node);\n }\n diagram.scale(node, scaleWidth, scaleHeight, {\n x: obj.wrapper.offsetX / node.wrapper.offsetX,\n y: obj.wrapper.offsetY / node.wrapper.offsetY\n });\n };\n UndoRedo.prototype.recordRotationChanged = function (obj, diagram, entry) {\n var i = 0;\n var node;\n var connector;\n var selectorObj = diagram.selectedItems;\n selectorObj.rotateAngle = obj.rotateAngle;\n if (selectorObj && selectorObj.wrapper) {\n selectorObj.wrapper.rotateAngle = obj.rotateAngle;\n }\n if (obj && obj.nodes && obj.nodes.length > 0) {\n for (i = 0; i < obj.nodes.length; i++) {\n node = obj.nodes[i];\n this.rotationChanged(node, diagram);\n this.positionChanged(node, diagram);\n }\n }\n if (obj && obj.connectors && obj.connectors.length > 0) {\n for (i = 0; i < obj.connectors.length; i++) {\n connector = obj.connectors[i];\n this.connectionChanged(connector, diagram);\n }\n }\n };\n UndoRedo.prototype.rotationChanged = function (obj, diagram) {\n var node = diagram.nameTable[obj.id];\n diagram.rotate(node, obj.rotateAngle - node.rotateAngle);\n };\n UndoRedo.prototype.recordConnectionChanged = function (obj, diagram) {\n var connector = obj.connectors[0];\n this.connectionChanged(connector, diagram);\n };\n UndoRedo.prototype.connectionChanged = function (obj, diagram, entry) {\n var connector = diagram.nameTable[obj.id];\n var node;\n if (obj.sourcePortID !== connector.sourcePortID) {\n connector.sourcePortID = obj.sourcePortID;\n diagram.connectorPropertyChange(connector, {}, { sourcePortID: obj.sourcePortID });\n }\n if (obj.targetPortID !== connector.targetPortID) {\n connector.targetPortID = obj.targetPortID;\n diagram.connectorPropertyChange(connector, {}, { targetPortID: obj.targetPortID });\n }\n if (obj.sourceID !== connector.sourceID) {\n if (obj.sourceID === '') {\n node = diagram.nameTable[connector.sourceID];\n removeItem(node.outEdges, obj.id);\n }\n else {\n node = diagram.nameTable[obj.sourceID];\n node.outEdges.push(obj.id);\n }\n connector.sourceID = obj.sourceID;\n diagram.connectorPropertyChange(connector, {}, { sourceID: obj.sourceID });\n }\n if (obj.targetID !== connector.targetID) {\n if (obj.targetID === '') {\n node = diagram.nameTable[connector.targetID];\n removeItem(node.inEdges, obj.id);\n }\n else {\n node = diagram.nameTable[obj.targetID];\n node.inEdges.push(obj.id);\n }\n connector.targetID = obj.targetID;\n diagram.connectorPropertyChange(connector, {}, { targetID: obj.targetID });\n }\n if (entry && entry.childTable) {\n entry.childTable[obj.id] = cloneObject(connector);\n }\n var sx = obj.sourcePoint.x - connector.sourcePoint.x;\n var sy = obj.sourcePoint.y - connector.sourcePoint.y;\n if (sx !== 0 || sy !== 0) {\n diagram.dragSourceEnd(connector, sx, sy);\n }\n var tx = obj.targetPoint.x - connector.targetPoint.x;\n var ty = obj.targetPoint.y - connector.targetPoint.y;\n if (tx !== 0 || ty !== 0) {\n diagram.dragTargetEnd(connector, tx, ty);\n }\n diagram.updateSelector();\n if (diagram.mode !== 'SVG') {\n diagram.refreshDiagramLayer();\n }\n };\n UndoRedo.prototype.recordCollectionChanged = function (entry, diagram) {\n var obj = entry.undoObject;\n if (entry && entry.changeType) {\n var changeType = void 0;\n if (entry.isUndo) {\n if (entry.changeType === 'Insert') {\n changeType = 'Remove';\n }\n else {\n changeType = 'Insert';\n }\n }\n else {\n changeType = entry.changeType;\n }\n if (changeType === 'Remove') {\n diagram.remove(obj);\n diagram.clearSelectorLayer();\n }\n else {\n diagram.clearSelectorLayer();\n if (obj.parentId) {\n var parentNode = diagram.nameTable[obj.parentId];\n if (parentNode) {\n diagram.addChild(parentNode, obj);\n }\n else {\n diagram.add(obj);\n }\n }\n else {\n diagram.add(obj);\n }\n if (obj.processId && diagram.nameTable[obj.processId]) {\n diagram.addProcess(obj, obj.processId);\n }\n }\n if (diagram.mode !== 'SVG') {\n diagram.refreshDiagramLayer();\n }\n }\n };\n UndoRedo.prototype.recordLabelCollectionChanged = function (entry, diagram) {\n var label = entry.undoObject;\n var obj = entry.redoObject;\n var node = diagram.nameTable[obj.id];\n if (entry && entry.changeType) {\n var changeType = void 0;\n if (entry.isUndo) {\n changeType = (entry.changeType === 'Insert') ? 'Remove' : 'Insert';\n }\n else {\n changeType = entry.changeType;\n }\n if (changeType === 'Remove') {\n diagram.removeLabels(node, [label]);\n diagram.clearSelectorLayer();\n }\n else {\n diagram.clearSelectorLayer();\n diagram.addLabels(node, [label]);\n }\n if (diagram.mode !== 'SVG') {\n diagram.refreshDiagramLayer();\n }\n }\n };\n UndoRedo.prototype.recordPortCollectionChanged = function (entry, diagram) {\n var port = entry.undoObject;\n var obj = entry.redoObject;\n var node = diagram.nameTable[obj.id];\n if (entry && entry.changeType) {\n var changeType = void 0;\n if (entry.isUndo) {\n changeType = (entry.changeType === 'Insert') ? 'Remove' : 'Insert';\n }\n else {\n changeType = entry.changeType;\n }\n if (changeType === 'Remove') {\n diagram.removePorts(node, [port]);\n diagram.clearSelectorLayer();\n }\n else {\n diagram.clearSelectorLayer();\n diagram.addPorts(node, [port]);\n }\n if (diagram.mode !== 'SVG') {\n diagram.refreshDiagramLayer();\n }\n }\n };\n /** @private */\n UndoRedo.prototype.redo = function (diagram) {\n var entry = this.getRedoEntry(diagram);\n var startGroupActionCount = 0;\n if (entry) {\n if (entry.category === 'Internal') {\n if (entry.type === 'StartGroup') {\n startGroupActionCount++;\n this.groupUndo = true;\n }\n else {\n this.redoEntry(entry, diagram);\n }\n if (this.groupUndo) {\n this.redoGroupAction(entry, diagram, startGroupActionCount);\n this.groupUndo = false;\n }\n }\n else {\n diagram.historyList.redo(entry);\n }\n }\n };\n UndoRedo.prototype.redoGroupAction = function (entry, diagram, startGroupActionCount) {\n while (startGroupActionCount !== 0) {\n this.redoEntry(entry, diagram);\n entry = this.getRedoEntry(diagram);\n if (entry.type === 'EndGroup') {\n startGroupActionCount--;\n }\n else if (entry.type === 'StartGroup') {\n startGroupActionCount++;\n }\n }\n startGroupActionCount = 0;\n };\n UndoRedo.prototype.redoEntry = function (historyEntry, diagram) {\n var redoObject;\n if (historyEntry.type !== 'PropertyChanged' && historyEntry.type !== 'CollectionChanged') {\n redoObject = (historyEntry.redoObject);\n }\n diagram.diagramActions |= DiagramAction.UndoRedo;\n if (historyEntry.type !== 'StartGroup' && historyEntry.type !== 'EndGroup') {\n if (diagram.historyList.redoStack.length > 0) {\n var addObject = diagram.historyList.redoStack.splice(0, 1);\n diagram.historyList.undoStack.splice(0, 0, addObject[0]);\n }\n }\n diagram.protectPropertyChange(true);\n switch (historyEntry.type) {\n case 'PositionChanged':\n case 'Align':\n case 'Distribute':\n this.recordPositionChanged(redoObject, diagram);\n break;\n case 'SizeChanged':\n case 'Sizing':\n this.recordSizeChanged(redoObject, diagram, historyEntry);\n break;\n case 'RotationChanged':\n this.recordRotationChanged(redoObject, diagram, historyEntry);\n break;\n case 'ConnectionChanged':\n this.recordConnectionChanged(redoObject, diagram);\n break;\n case 'PropertyChanged':\n this.recordPropertyChanged(historyEntry, diagram, true);\n break;\n case 'CollectionChanged':\n this.recordCollectionChanged(historyEntry, diagram);\n break;\n case 'LabelCollectionChanged':\n this.recordLabelCollectionChanged(historyEntry, diagram);\n break;\n case 'PortCollectionChanged':\n this.recordPortCollectionChanged(historyEntry, diagram);\n break;\n case 'Group':\n this.group(historyEntry, diagram);\n break;\n case 'UnGroup':\n this.unGroup(historyEntry, diagram);\n break;\n case 'SegmentChanged':\n this.recordSegmentChanged(redoObject, diagram);\n break;\n }\n diagram.protectPropertyChange(false);\n diagram.diagramActions &= ~DiagramAction.UndoRedo;\n diagram.historyChangeTrigger(historyEntry);\n };\n UndoRedo.prototype.getUndoEntry = function (diagram) {\n var undoEntry = null;\n var currentObject;\n var hList = diagram.historyList;\n if (hList.canUndo) {\n undoEntry = hList.currentEntry;\n currentObject = hList.currentEntry.previous;\n if (currentObject) {\n hList.currentEntry = currentObject;\n if (!hList.canRedo) {\n hList.canRedo = true;\n }\n }\n else {\n hList.canRedo = true;\n hList.canUndo = false;\n }\n }\n return undoEntry;\n };\n UndoRedo.prototype.getRedoEntry = function (diagram) {\n var redoEntry = null;\n var entryCurrent;\n var hList = diagram.historyList;\n if (hList.canRedo) {\n if (!hList.currentEntry.previous && !hList.canUndo) {\n entryCurrent = hList.currentEntry;\n }\n else {\n entryCurrent = hList.currentEntry.next;\n }\n if (entryCurrent) {\n hList.currentEntry = entryCurrent;\n if (!hList.canUndo) {\n hList.canUndo = true;\n }\n if (!entryCurrent.next) {\n hList.canRedo = false;\n hList.canUndo = true;\n }\n }\n redoEntry = hList.currentEntry;\n }\n return redoEntry;\n };\n /**\n * To destroy the undo redo module\n * @return {void}\n * @private\n */\n UndoRedo.prototype.destroy = function () {\n /**\n * Destroys the undo redo module\n */\n };\n /**\n * Get module name.\n */\n UndoRedo.prototype.getModuleName = function () {\n /**\n * Returns the module name\n */\n return 'UndoRedo';\n };\n return UndoRedo;\n}());\nexport { UndoRedo };\n","import { Container } from '../core/containers/container';\nimport { DiagramEvent } from '../enum/enum';\n/**\n * Layout Animation function to enable or disable layout animation\n */\nvar LayoutAnimation = /** @class */ (function () {\n function LayoutAnimation() {\n this.protectChange = false;\n }\n /**\n * Layout expand function for animation of expand and collapse\n */\n LayoutAnimation.prototype.expand = function (animation, objects, node, diagram) {\n var _this = this;\n var setIntervalObject = {};\n var i = 0;\n var j = 0;\n setIntervalObject[i] = setInterval(function () {\n j++;\n return _this.layoutAnimation(objects, setIntervalObject, j === 6, diagram);\n }, 20);\n if (node.isExpanded) {\n var opacity_1 = .2;\n var protect = 'isProtectedOnChange';\n this.protectChange = diagram[protect];\n diagram.protectPropertyChange(false);\n //let objects: ILayout = diagram.doLayout();\n var setIntervalObjects_1 = {};\n var x = 0;\n this.updateOpacity(node, opacity_1, diagram);\n var current = this;\n setIntervalObjects_1[x] = setInterval(function () {\n opacity_1 <= 1 ? _this.updateOpacity(node, opacity_1, diagram) : clearInterval(setIntervalObjects_1[0]);\n opacity_1 += .2;\n }, 20);\n }\n };\n /**\n * Setinterval and Clear interval for layout animation\n */\n /** @private */\n LayoutAnimation.prototype.layoutAnimation = function (objValue, layoutTimer, stop, diagram) {\n if (!stop) {\n for (var k = 0; k < objValue.objects.length; k++) {\n var node = diagram.nameTable[objValue.objects[k].id];\n node.offsetX += objValue.objects[k].differenceX / 5;\n node.offsetY += objValue.objects[k].differenceY / 5;\n }\n }\n if (stop) {\n clearInterval(layoutTimer[0]);\n diagram.protectPropertyChange(this.protectChange);\n diagram.triggerEvent(DiagramEvent.animationComplete, undefined);\n this.protectChange = false;\n diagram.organizationalChartModule.isAnimation = false;\n diagram.layout.fixedNode = '';\n diagram.protectPropertyChange(this.protectChange);\n }\n };\n /**\n * update the node opacity for the node and connector once the layout animation starts\n */\n LayoutAnimation.prototype.updateOpacity = function (source, value, diagram) {\n for (var i = 0; i < source.outEdges.length; i++) {\n var connector = diagram.nameTable[source.outEdges[i]];\n var target = diagram.nameTable[connector.targetID];\n connector.style.opacity = value;\n diagram.updateDiagramObject(source);\n for (var j = 0; j < connector.wrapper.children.length; j++) {\n connector.wrapper.children[j].style.opacity = value;\n target.style.opacity = value;\n if (target.wrapper instanceof Container) {\n diagram.updateNodeProperty(target.wrapper, undefined, value);\n }\n }\n this.updateOpacity(target, value, diagram);\n }\n };\n /**\n * To destroy the LayoutAnimate module\n * @return {void}\n * @private\n */\n LayoutAnimation.prototype.destroy = function () {\n /**\n * Destroys the LayoutAnimate module\n */\n };\n /**\n * Get module name.\n */\n LayoutAnimation.prototype.getModuleName = function () {\n /**\n * Returns the module name\n */\n return 'LayoutAnimate';\n };\n return LayoutAnimation;\n}());\nexport { LayoutAnimation };\n","import { Rect } from '../primitives/rect';\nimport { OrthogonalSegment } from '../objects/connector';\nimport { getFunction } from '../utility/base-util';\nimport { Point } from '../primitives/point';\n/**\n * Hierarchical Tree and Organizational Chart\n */\nvar HierarchicalTree = /** @class */ (function () {\n /**\n * Constructor for the organizational chart module.\n * @private\n */\n function HierarchicalTree() {\n /**\n * Defines the layout animation\n *\n */\n this.isAnimation = false;\n //constructs the layout module\n }\n /**\n * To destroy the organizational chart\n * @return {void}\n * @private\n */\n HierarchicalTree.prototype.destroy = function () {\n /**\n * Destroy method performed here\n */\n };\n /**\n * Get module name.\n */\n HierarchicalTree.prototype.getModuleName = function () {\n /**\n * Returns the module name of the layout\n */\n return 'OrganizationalChart';\n };\n HierarchicalTree.prototype.updateLayout = function (nodes, nameTable, layoutProp, viewport, uniqueId) {\n var layout = {\n type: layoutProp.type,\n nameTable: nameTable, anchorX: 0, anchorY: 0,\n firstLevelNodes: [], centerNode: null, levels: [], maxLevel: 0, graphNodes: {},\n orientation: layoutProp.orientation,\n horizontalSpacing: layoutProp.horizontalSpacing, verticalSpacing: layoutProp.verticalSpacing,\n verticalAlignment: layoutProp.verticalAlignment, horizontalAlignment: layoutProp.horizontalAlignment,\n fixedNode: layoutProp.fixedNode, getLayoutInfo: getFunction(layoutProp.getLayoutInfo), margin: layoutProp.margin,\n bounds: layoutProp.bounds, objects: [], root: layoutProp.root\n };\n this.doLayout(layout, nodes, viewport, uniqueId);\n return layout;\n };\n HierarchicalTree.prototype.doLayout = function (layout, nodes, viewport, uniqueId) {\n var node;\n var i;\n var layoutInfo = {};\n var shape;\n var rootNodes = [];\n if (layout.nameTable[layout.root]) {\n layout.firstLevelNodes.push(layout.nameTable[layout.root]);\n }\n for (i = 0; i < nodes.length; i++) {\n node = nodes[i];\n if (!node.excludeFromLayout) {\n layoutInfo = layout.graphNodes[node.id] = this.setUpLayoutInfo(layout, node);\n layoutInfo.tree.hasSubTree = false;\n if (!layout.nameTable[layout.root]) {\n if (!node.inEdges || !node.inEdges.length) {\n rootNodes.push(node);\n if (node.data && String(node.data[uniqueId]) === layout.root) {\n layout.firstLevelNodes.push(node);\n }\n }\n }\n }\n }\n if (layout.firstLevelNodes.length === 0) {\n layout.firstLevelNodes = rootNodes;\n }\n //Update relationship(parent and children)\n for (i = 0; i < layout.firstLevelNodes.length; i++) {\n node = layout.firstLevelNodes[i];\n this.updateEdges(layout, node, 1);\n }\n if (layout.firstLevelNodes.length > 0) {\n layout.rootNode = layout.firstLevelNodes[0];\n var x = 0;\n var y = 0;\n var minX = void 0;\n var maxY = void 0;\n var maxX = void 0;\n var minY = void 0;\n var j = void 0;\n var bounds = void 0;\n for (i = 0; i < layout.firstLevelNodes.length; i++) {\n bounds = this.updateTree(layout, x, y, layout.firstLevelNodes[i], 0, layout.firstLevelNodes[i - 1]);\n var rootInfo = layout.graphNodes[layout.firstLevelNodes[i].id];\n bounds.y = Math.min(bounds.y, rootInfo.y);\n bounds.x = Math.min(bounds.x, rootInfo.x);\n if (layout.orientation.indexOf('Left') !== -1) {\n y = bounds.right + layout.horizontalSpacing;\n }\n else {\n x = bounds.right + layout.horizontalSpacing;\n }\n if (i === 0) {\n minX = bounds.x;\n minY = bounds.y;\n maxX = bounds.right;\n maxY = bounds.bottom;\n }\n else {\n minX = Math.min(minX, bounds.x);\n minY = Math.min(minY, bounds.y);\n maxX = Math.max(maxX, bounds.right);\n maxY = Math.max(maxY, bounds.bottom);\n }\n }\n this.updateAnchor(layout, { x: minX, y: minY, right: maxX, bottom: maxY }, viewport);\n for (i = 0; i < layout.firstLevelNodes.length; i++) {\n this.updateNodes(layout, layout.firstLevelNodes[i], 0);\n }\n for (i = 0; i < layout.firstLevelNodes.length; i++) {\n this.updateConnectors(layout, layout.firstLevelNodes[i], 1);\n }\n }\n };\n HierarchicalTree.prototype.getBounds = function (node) {\n var x = node.offsetX - node.actualSize.width * node.pivot.x;\n var y = node.offsetY - node.actualSize.height * node.pivot.y;\n return new Rect(x, y, node.actualSize.width, node.actualSize.height);\n };\n HierarchicalTree.prototype.updateTree = function (layout, x, y, shape, level, prev, dontupdate) {\n var dimensions;\n var info = {};\n var lev;\n var obj;\n var hasChild;\n dimensions = this.getDimensions(layout, shape, x, y, level);\n info = layout.graphNodes[shape.id];\n var firstChild;\n //Set maximum level of layout\n layout.maxLevel = Math.max(layout.maxLevel, level);\n lev = level;\n hasChild = this.hasChild(layout, shape);\n if (!hasChild && !info.tree.assistants.length) {\n //update leaf nodes\n shape.treeBounds = this.updateLeafNode(layout, shape, prev, dimensions, level, dontupdate);\n return shape.treeBounds;\n }\n else {\n var treeBounds = void 0;\n var shapeBounds = void 0;\n var levelBounds = void 0;\n var d = void 0;\n var asstBounds = void 0;\n var space = void 0;\n var bottom = void 0;\n bottom = dimensions.y + dimensions.height + layout.verticalSpacing;\n if (info.tree.assistants.length) {\n //Vertically place assistants\n obj = this.setDepthSpaceForAssitants(layout, shape, bottom, dimensions.height, level, layout.verticalSpacing);\n lev = obj.level;\n bottom = obj.bottom;\n }\n if (!info.tree.assistants.length && info.tree.orientation !== 'Horizontal') {\n bottom = dimensions.y + dimensions.height + layout.verticalSpacing / 2;\n }\n if (info.tree.children.length) {\n if (info.tree.orientation === 'Horizontal' && (info.tree.type !== 'Balanced' || info.tree.children.length === 1)) {\n treeBounds = this.updateHorizontalTree(layout, shape, prev, dimensions.x, bottom, lev);\n }\n else if (info.tree.type === 'Balanced') {\n treeBounds = this.updateHorizontalTreeWithMultipleRows(layout, shape, prev, dimensions.x, bottom, lev);\n }\n else {\n treeBounds = this.updateVerticalTree(layout, shape, dimensions.x, bottom, lev, dontupdate);\n }\n }\n if (!(info.y && info.y > dimensions.y)) {\n info.y = dimensions.y;\n }\n if (!(x && x > info.mid)) {\n x = info.mid;\n }\n if (info.tree.assistants.length) {\n //Set breadth space for assistants\n space = x !== undefined ? x : dimensions.x;\n asstBounds = this.setBreadthSpaceForAssistants(layout, shape, dimensions, space, bottom, level);\n if (!hasChild) {\n levelBounds = treeBounds = asstBounds;\n x = (levelBounds.x + levelBounds.right) / 2 - dimensions.width / 2;\n treeBounds = levelBounds;\n }\n d = asstBounds ? asstBounds.canMoveBy : undefined;\n }\n info.x = x;\n if (!info.translate) {\n info.treeWidth = treeBounds.right - treeBounds.x;\n }\n {\n shapeBounds = { x: x, y: dimensions.y, right: x + dimensions.width, bottom: dimensions.y + dimensions.height };\n }\n var translateInfo = {\n layout: layout, shape: shape, shapeBounds: shapeBounds, treeBounds: treeBounds,\n dim: dimensions, level: level\n };\n this.translateSubTree(translateInfo, d, prev !== undefined, dontupdate);\n if (info.firstChild && typeof info.firstChild !== 'string') {\n info.firstChild.x += info.subTreeTranslation;\n }\n shape.treeBounds = treeBounds;\n return treeBounds;\n }\n };\n HierarchicalTree.prototype.updateLeafNode = function (layout, shape, prev, dimensions, level, dontupdate) {\n var bounds;\n var info = layout.graphNodes[shape.id];\n info.x = dimensions.x;\n if (!(info.y && info.y > dimensions.y)) {\n info.y = dimensions.y;\n info.maxLevel = Math.max(level, info.maxLevel || 0);\n }\n bounds = { x: dimensions.x, y: dimensions.y, right: dimensions.x + dimensions.width, bottom: dimensions.y + dimensions.height };\n info.maxLevel = Math.max(info.maxLevel || 0, level);\n var translateInfo = {\n layout: layout, shape: shape, shapeBounds: bounds, treeBounds: bounds,\n dim: dimensions, level: level\n };\n this.translateSubTree(translateInfo, undefined, prev !== undefined, dontupdate);\n return { x: info.x, y: info.y, right: info.x + dimensions.width, bottom: info.y + dimensions.height };\n };\n HierarchicalTree.prototype.setUpLayoutInfo = function (layout, item) {\n var info = {};\n info.subTreeTranslation = 0;\n if (layout.type === 'OrganizationalChart') {\n info.tree = { orientation: 'Vertical', type: 'Alternate', offset: 20, enableRouting: true };\n }\n else {\n info.tree = { orientation: 'Horizontal', type: 'Center', enableRouting: true };\n }\n info.tree.children = [];\n info.tree.assistants = [];\n info.tree.level = 0;\n info.translate = true;\n return info;\n };\n HierarchicalTree.prototype.translateSubTree = function (translateInfo, asstDif, translate, dontupdate) {\n var layout = translateInfo.layout;\n var shape = translateInfo.shape;\n var shapeBounds = translateInfo.shapeBounds;\n var treeBounds = translateInfo.treeBounds;\n var level = translateInfo.level;\n var dim = translateInfo.dim;\n var info = layout.graphNodes[shape.id];\n var firstChild = layout.nameTable[info.firstChild ? info.firstChild.child : info.tree.children[0]];\n var firstChildInfo = firstChild ? layout.graphNodes[firstChild.id] : null;\n var hasChild = this.hasChild(layout, shape);\n var intersect = this.findIntersectingLevels(layout, shapeBounds, level, info.actualLevel);\n var treeIntersect = this.findIntersectingLevels(layout, treeBounds, level, info.actualLevel);\n var levelBounds = [];\n var diff;\n if (intersect.length && info.translate) {\n info.intersect = intersect;\n this.spaceLeftFromPrevSubTree(layout, shape, shapeBounds);\n info.canMoveBy = info.diff;\n if (asstDif !== undefined) {\n info.canMoveBy = Math.min(asstDif, info.canMoveBy);\n }\n if (firstChild && firstChildInfo.canMoveBy !== undefined) {\n if (firstChildInfo.canMoveBy >= info.canMoveBy) {\n info.translated = true;\n }\n info.canMoveBy = Math.min(info.canMoveBy, firstChildInfo.canMoveBy);\n }\n if (translate) {\n info.x -= info.canMoveBy;\n info.subTreeTranslation -= info.canMoveBy;\n if (hasChild) {\n this.shiftSubordinates(layout, treeIntersect, info.canMoveBy);\n treeBounds.x = Math.min(treeBounds.x, info.x);\n treeBounds.right = Math.max(treeBounds.right, info.x + dim.width);\n treeBounds.bottom = Math.max(treeBounds.bottom, info.y + dim.height);\n treeBounds.x -= info.canMoveBy;\n treeBounds.right -= info.canMoveBy;\n }\n if (firstChild && firstChildInfo.canMoveBy > info.canMoveBy) {\n info.canMoveBy = firstChildInfo.canMoveBy - info.canMoveBy;\n }\n else if (firstChild && info.canMoveBy !== undefined) {\n info.canMoveBy = 0;\n }\n }\n }\n else {\n if (hasChild) {\n treeBounds.x = Math.min(treeBounds.x, shapeBounds.x);\n treeBounds.right = Math.max(treeBounds.right, shapeBounds.x + dim.width);\n treeBounds.bottom = Math.max(treeBounds.bottom, info.y + dim.height);\n }\n if (!info.translate) {\n info.canMoveBy = 0;\n info.subTreeTranslation = 0;\n }\n }\n if (!dontupdate) {\n shapeBounds = { x: info.x, y: dim.y, right: info.x + dim.width, bottom: dim.y + dim.height };\n levelBounds.push({ rBounds: shapeBounds });\n this.updateRearBounds(layout, shape, levelBounds, level);\n }\n };\n HierarchicalTree.prototype.updateRearBounds = function (layout, shape, levelBounds, level, intersect) {\n var bnds;\n var index;\n var isLastLeaf = true;\n var i;\n var info = {};\n var firstLevel;\n var lastLevel;\n var bottom;\n if (shape) {\n info = layout.graphNodes[shape.id];\n intersect = info.intersect;\n isLastLeaf = !info.tree.children.length && !info.tree.assistants.length;\n }\n firstLevel = levelBounds[0].rBounds;\n lastLevel = levelBounds[levelBounds.length - 1].rBounds;\n if (intersect && intersect.length) {\n bnds = layout.levels[intersect[0]].rBounds;\n bottom = bnds.bottom;\n if (bnds.y < firstLevel.y) {\n bnds.bottom = firstLevel.y;\n levelBounds.splice(0, 0, { rBounds: bnds });\n }\n if (bottom > lastLevel.bottom) {\n levelBounds.push({ rBounds: { x: bnds.x, right: bnds.right, y: firstLevel.bottom, bottom: bottom } });\n }\n else {\n bnds = layout.levels[intersect[intersect.length - 1]].rBounds;\n if (isLastLeaf && bnds.bottom > lastLevel.bottom) {\n bnds.y = lastLevel.bottom;\n levelBounds.push({ rBounds: bnds });\n }\n }\n index = intersect[0];\n for (i = levelBounds.length - 1; i >= 0; i--) {\n layout.levels.splice(index, 0, levelBounds[i]);\n }\n index += levelBounds.length;\n layout.levels.splice(index, intersect.length);\n }\n else {\n index = this.findLevel(layout, levelBounds[levelBounds.length - 1].rBounds, level);\n for (i = levelBounds.length - 1; i >= 0; i--) {\n layout.levels.splice(index, 0, levelBounds[i]);\n }\n }\n };\n HierarchicalTree.prototype.shiftSubordinates = function (layout, intersect, diff) {\n var i;\n //Shift the sublevels by the distance diff\n if (diff !== 0) {\n for (i = 0; i < intersect.length; i++) {\n if (layout.levels[intersect[i]].rBounds) {\n layout.levels[intersect[i]].rBounds.x -= diff;\n layout.levels[intersect[i]].rBounds.right -= diff;\n }\n }\n }\n };\n HierarchicalTree.prototype.setDepthSpaceForAssitants = function (layout, shape, bottom, height, lev, vSpace) {\n var info = layout.graphNodes[shape.id];\n var asst = {};\n var asstHeight;\n var i;\n var asstElement;\n var max;\n max = bottom;\n //Vertically place the assistants as alternate layout(alternatively at both right and left sides of parent)\n for (i = 0; i < info.tree.assistants.length; i++) {\n asst = layout.graphNodes[info.tree.assistants[i]];\n if (asst) {\n asst.tree.children = asst.tree.assistants = [];\n asst.y = bottom;\n asstElement = layout.nameTable[info.tree.assistants[i]];\n asstHeight = asstElement.actualSize.height;\n if (layout.orientation.indexOf('Left') !== -1) {\n asstHeight = asstElement.actualSize.width;\n }\n max = bottom + asstHeight + vSpace / 2;\n layout.maxLevel = lev + 1;\n if (i % 2 === 1 && i !== info.tree.assistants.length - 1) {\n bottom = max;\n lev++;\n }\n }\n }\n return { level: layout.maxLevel, bottom: bottom + asstHeight + vSpace };\n };\n HierarchicalTree.prototype.setBreadthSpaceForAssistants = function (layout, shape, dim, space, bottom, level) {\n var asst = {};\n var asstWidth;\n var prevBounds;\n var bounds;\n var asstElement;\n var i;\n var info = layout.graphNodes[shape.id];\n var max = bottom;\n var lev = level;\n var left;\n var diff;\n var intersect;\n var levelBounds;\n for (i = 0; i < info.tree.assistants.length; i++) {\n asst = layout.graphNodes[info.tree.assistants[i]];\n //Arrange assistants at both left and right sides of parent(like alternate layout)\n //Check - By default, distance to be left between parent and child nodes is assumed as 20.\n //It can be modified/customized later.\n if (asst) {\n asstElement = layout.nameTable[info.tree.assistants[i]];\n asstWidth = asstElement.actualSize.width;\n if (layout.orientation.indexOf('Left') !== -1) {\n asstWidth = asstElement.actualSize.height;\n }\n if (i % 2 === 0) {\n left = space + dim.width / 2 - 20 - asstWidth;\n }\n else {\n left = space + dim.width / 2 + 20;\n }\n //Check - What will happen if update leaf node is called? Since assistants don't have children\n bounds = this.updateTree(layout, left, asst.y, layout.nameTable[info.tree.assistants[i]], lev + 1);\n if (!this.hasChild(layout, shape)) {\n if (i === 0) {\n levelBounds = bounds;\n }\n else {\n this.uniteRects(levelBounds, bounds);\n }\n }\n if (i % 2 === 0 && asst.prevBounds) {\n if (diff === undefined) {\n diff = asst.canMoveBy;\n }\n else {\n diff = Math.min(diff, asst.canMoveBy);\n }\n }\n if (i % 2 === 1 || i === info.tree.assistants.length - 1) {\n intersect = this.findIntersectingLevels(layout, bounds, lev + 1);\n //Update rightmost positions of known layout levels\n this.updateRearBounds(layout, null, [{ rBounds: bounds }], lev + 1, intersect);\n lev++;\n }\n }\n }\n if (levelBounds) {\n levelBounds.canMoveBy = diff;\n }\n return levelBounds;\n };\n HierarchicalTree.prototype.getDimensions = function (layout, shape, x, y, level) {\n var width;\n width = shape.actualSize.width;\n var height;\n height = shape.actualSize.height;\n if (layout.orientation.indexOf('Left') !== -1) {\n if (!level) {\n var temp = void 0;\n temp = x;\n x = y;\n y = temp;\n }\n height = shape.actualSize.width;\n width = shape.actualSize.height;\n }\n return { x: x, y: y, width: width, height: height };\n };\n HierarchicalTree.prototype.hasChild = function (layout, shape) {\n //Check whether the node has children \n var shape1 = layout.graphNodes[shape.id];\n return shape1.tree.children && shape1.tree.children.length;\n };\n HierarchicalTree.prototype.updateHorizontalTree = function (layout, shape, prev, x, y, level) {\n //Get dimensions with respect to layout orientations \n var dimensions;\n dimensions = this.getDimensions(layout, shape, x, y, level);\n var info = {};\n info = layout.graphNodes[shape.id];\n var side = info.tree.type;\n var lev;\n lev = level;\n var right = 0;\n right = x;\n var bottom;\n bottom = y;\n var width;\n var height;\n var child;\n var childBounds;\n var childWidth;\n var childHeight;\n var prevBounds;\n var bounds;\n var actBounds;\n var maxLevel;\n var translateSibilingsBy;\n var canMoveBy;\n var oldActBounds;\n var i;\n var childInfo;\n var prevLayoutLevels;\n var firstChildInfo;\n prevLayoutLevels = layout.levels.slice(0, layout.levels.length);\n if (this.hasChild(layout, shape)) {\n var h = void 0;\n h = layout.orientation.indexOf('Left') !== -1 ? true : false;\n for (i = 0; i < info.tree.children.length; i++) {\n child = layout.nameTable[info.tree.children[i]];\n width = child.actualSize.width;\n height = child.actualSize.height;\n childWidth = h ? height : width;\n childHeight = h ? width : height;\n prevBounds = layout.levels[lev + 1] ? layout.levels[lev + 1].rBounds : null;\n //Update sub tree\n childBounds = this.updateTree(layout, right, bottom, child, lev + 1, layout.nameTable[info.tree.children[i - 1]]);\n childInfo = layout.graphNodes[child.id];\n info.maxLevel = Math.max(info.maxLevel || 0, childInfo.maxLevel || 0);\n actBounds = { x: childInfo.x, y: childInfo.y, right: childInfo.x + childWidth, bottom: childInfo.y + childHeight };\n if (i === 0) {\n //Compare with previous(right most) subtree\n bounds = {\n x: Math.min(childInfo.x, childBounds.x), y: Math.min(childInfo.y, childBounds.y),\n right: childBounds.right, bottom: childBounds.bottom\n };\n firstChildInfo = childInfo;\n }\n if (!oldActBounds) {\n oldActBounds = actBounds;\n }\n else {\n oldActBounds.x = actBounds.x;\n oldActBounds.y = actBounds.y;\n if (actBounds.right > oldActBounds.right) {\n oldActBounds.right = actBounds.right;\n }\n oldActBounds.bottom = actBounds.bottom;\n //oldActBounds = actBounds;\n }\n //Compare with previous subtree if level of the child is greater than the level of previous sub tree\n //Check - what will happen if level of second child is greater than current child\n if (i === 0) {\n info.firstChild = { x: childInfo.x, canMoveBy: childInfo.canMoveBy, child: child.id };\n }\n if (this.hasChild(layout, child)) {\n if (!info.firstChild || info.firstChild.x >= childInfo.firstChild.x) {\n if (childInfo.firstChild && info.firstChild.canMoveBy < childInfo.canMoveBy) {\n info.firstChild.canMoveBy = canMoveBy;\n childInfo.canMoveBy = canMoveBy;\n canMoveBy = info.firstChild.canMoveBy;\n layout.graphNodes[info.firstChild.child].canMoveBy = canMoveBy;\n }\n var canMoveValue = canMoveBy !== undefined ? canMoveBy : childInfo.canMoveBy;\n info.firstChild = { x: childInfo.firstChild.x, canMoveBy: canMoveValue, child: child.id };\n }\n else if (childInfo.firstChild && childInfo.translated && info.firstChild.canMoveBy > childInfo.canMoveBy) {\n info.firstChild.canMoveBy = layout.graphNodes[info.firstChild.child].canMoveBy = childInfo.canMoveBy;\n }\n }\n maxLevel = maxLevel ? Math.max(childInfo.maxLevel, maxLevel) : childInfo.maxLevel;\n this.uniteRects(bounds, childBounds);\n if (i !== 0 && !this.hasChild(layout, child) && childInfo.subTreeTranslation < 0) {\n right = childBounds.right - childInfo.subTreeTranslation + layout.horizontalSpacing;\n }\n else {\n right = childBounds.right + layout.horizontalSpacing;\n }\n }\n if (!isNaN(translateSibilingsBy)) {\n firstChildInfo.canMoveBy = translateSibilingsBy;\n }\n info.mid = (firstChildInfo.x + oldActBounds.right) / 2 - dimensions.width / 2;\n //Set parent based on the chart type\n if (side === 'Left') {\n info.mid = actBounds.right - dimensions.width;\n }\n else if (side === 'Right') {\n info.mid = x;\n }\n }\n return bounds;\n };\n HierarchicalTree.prototype.updateHorizontalTreeWithMultipleRows = function (layout, shape, prev, x, y, level) {\n //declarations\n var child;\n var childInfo;\n var childBounds;\n var childWidth;\n var childHeight;\n var firstChildInfo;\n var maxLevel;\n var bounds;\n var rowBounds;\n var width;\n var height;\n var diff;\n var translateSibilingsBy;\n var fchild;\n var maxRowWidth;\n var j;\n var i;\n var k;\n var max;\n var leftCenter;\n var rightCenter;\n //Get dimensions with respect to layout orientations\n var dimensions = this.getDimensions(layout, shape, x, y, level);\n var info = layout.graphNodes[shape.id];\n var side = info.tree.type;\n var lev = level;\n var right = x;\n var bottom = y;\n var prevLayoutLevels = layout.levels.slice(0, layout.levels.length);\n var minTranslation = 0;\n if (this.hasChild(layout, shape)) {\n var h = layout.orientation.indexOf('Left') !== -1 ? true : false;\n var align = void 0;\n var rows = this.splitChildrenInRows(layout, shape);\n var unique = info.tree.children.length === 5 && rows[0].length === 3;\n var leftTree = [];\n var rightTree = [];\n if (!unique) {\n this.splitRows(rows, leftTree, rightTree);\n }\n else {\n rightTree = rows;\n }\n var treeInfo = { leftTree: leftTree, rows: rows, rightTree: rightTree, dimensions: dimensions };\n var rightMost = this.updateLeftTree(layout, treeInfo, shape, x, bottom, lev);\n bounds = treeInfo.bounds;\n var rightX = void 0;\n var center = (rightMost || 0) + (rightMost !== undefined ? (layout.horizontalSpacing / 2) : 0);\n if (rightMost !== undefined) {\n info.mid = center - dimensions.width / 2;\n rightX = rightMost + layout.horizontalSpacing;\n }\n bottom = y;\n var rightBounds = void 0;\n rightBounds = [];\n for (i = 0; i < rightTree.length; i++) {\n if (rows[i].length % 2 === 1 && i === rightTree.length - 1 || unique) {\n right = x;\n }\n else {\n right = rightX || x;\n }\n if (i !== 0) {\n bottom = rightBounds[i - 1].bottom + layout.verticalSpacing;\n }\n for (j = 0; j < rightTree[i].length; j++) {\n child = layout.nameTable[rightTree[i][j]];\n width = child.actualSize.width;\n height = child.actualSize.height;\n childWidth = h ? height : width;\n childHeight = h ? width : height;\n //Update sub tree\n childInfo = layout.graphNodes[child.id];\n childInfo.actualLevel = lev + 1 + i;\n if (j === 0 && leftTree[i] && leftTree[i].length) {\n childInfo.translate = false;\n }\n if (unique && i === 1) {\n if (j === 0 && leftCenter + childWidth + layout.horizontalSpacing <= rightCenter) {\n align = true;\n right = leftCenter - childWidth / 2;\n }\n if (align && j === 1) {\n right = rightCenter - childWidth / 2;\n }\n }\n childBounds = this.updateTree(layout, right, bottom, child, lev + 1, layout.nameTable[rightTree[i][j - 1]]);\n if (unique && j <= 2 && i === 0) {\n if (j === 1) {\n leftCenter = childBounds.x - layout.horizontalSpacing / 2;\n rightCenter = childBounds.x + childWidth + layout.horizontalSpacing / 2;\n }\n }\n if (j === 0) {\n rightBounds[i] = { x: childBounds.x, y: childBounds.y, right: childBounds.right, bottom: childBounds.bottom };\n }\n else {\n this.uniteRects(rightBounds[i], childBounds);\n }\n if (!bounds) {\n bounds = {\n x: rightBounds[i].x, y: rightBounds[i].y, right: rightBounds[i].right,\n bottom: rightBounds[i].bottom\n };\n }\n this.uniteRects(bounds, rightBounds[i]);\n right = childBounds.right + layout.horizontalSpacing;\n if (!info.firstChild || ((i === rightTree.length - 1 && rows[i].length % 2 === 1) || unique)\n && j === 0 && childInfo.canMoveBy !== undefined && minTranslation > childInfo.canMoveBy) {\n minTranslation = Math.min(minTranslation, childInfo.canMoveBy || 0);\n info.firstChild = { x: childInfo.x, child: child.id, canMoveBy: childInfo.canMoveBy };\n }\n treeInfo.leftCenter = leftCenter;\n treeInfo.rightCenter = rightCenter;\n treeInfo.align = align;\n treeInfo.level = lev;\n treeInfo.rightBounds = rightBounds;\n this.alignRowsToCenter(layout, i, shape, treeInfo, rightX);\n }\n }\n }\n return bounds;\n };\n HierarchicalTree.prototype.updateLeftTree = function (layout, treeInfo, shape, x, bottom, lev) {\n var leftTree = treeInfo.leftTree;\n var info = layout.graphNodes[shape.id];\n var right;\n var leftBounds = [];\n var minTranslation;\n var rightMost;\n var childBounds;\n var bounds;\n var h = layout.orientation.indexOf('Left') !== -1 ? true : false;\n //Arrange left side\n for (var i = 0; i < leftTree.length && leftTree[i].length; i++) {\n right = x;\n if (leftBounds[i - 1]) {\n bottom = leftBounds[i - 1].bottom + layout.verticalSpacing;\n }\n for (var j = 0; j < leftTree[i].length; j++) {\n var child = layout.nameTable[leftTree[i][j]];\n var childWidth = h ? child.actualSize.height : child.actualSize.width;\n var childHeight = h ? child.actualSize.width : child.actualSize.height;\n //Update sub tree\n var childInfo = layout.graphNodes[child.id];\n childInfo.actualLevel = lev + 1 + i;\n childBounds = this.updateTree(layout, right, bottom, child, lev + 1, layout.nameTable[leftTree[i][j - 1]]);\n if (j === 0) {\n leftBounds[i] = { x: childBounds.x, y: childBounds.y, right: childBounds.right, bottom: childBounds.bottom };\n }\n else {\n this.uniteRects(leftBounds[i], childBounds);\n }\n if (i === 0 && j === 0) {\n minTranslation = childInfo.canMoveBy;\n info.firstChild = { x: childInfo.x, child: child.id, canMoveBy: childInfo.canMoveBy };\n }\n else if (j === 0 && childInfo.canMoveBy !== undefined && minTranslation > childInfo.canMoveBy) {\n minTranslation = Math.min(minTranslation, childInfo.canMoveBy || 0);\n info.firstChild = { x: childInfo.x, child: child.id, canMoveBy: childInfo.canMoveBy };\n }\n right = childBounds.right + layout.horizontalSpacing;\n }\n if (i === 0) {\n rightMost = leftBounds[i].right;\n }\n else {\n rightMost = Math.max(rightMost, leftBounds[i].right);\n }\n }\n //Translate to same positions\n for (var i = 0; i < leftTree.length && leftTree[i].length; i++) {\n if (rightMost !== leftBounds[i].right) {\n var diff = rightMost - leftBounds[i].right;\n for (var j = 0; j < leftTree[i].length; j++) {\n var element = layout.nameTable[leftTree[i][j]];\n var elementInfo = layout.graphNodes[leftTree[i][j]];\n elementInfo.x += diff;\n }\n //leftBounds[i].x += diff;\n //leftBounds[i].right += diff;\n }\n if (i === 0) {\n bounds = { x: leftBounds[0].x, y: leftBounds[0].y, right: leftBounds[0].right, bottom: leftBounds[0].bottom };\n }\n else {\n this.uniteRects(bounds, leftBounds[i]);\n }\n }\n treeInfo.bounds = bounds;\n return rightMost;\n };\n HierarchicalTree.prototype.alignRowsToCenter = function (layout, i, shape, treeInfo, rightX) {\n var max;\n var centered;\n var diff;\n var info = layout.graphNodes[shape.id];\n var rows = treeInfo.rows;\n var rightTree = treeInfo.rightTree;\n var leftCenter = treeInfo.leftCenter;\n var rightCenter = treeInfo.rightCenter;\n var align = treeInfo.align;\n var rightBounds = treeInfo.rightBounds;\n var dimensions = treeInfo.dimensions;\n var lev = treeInfo.level;\n var unique = info.tree.children.length === 5 && rows[0].length === 3;\n if (unique && i === 1) {\n max = (rightBounds[0].right - rightBounds[0].x) >= (rightBounds[1].right - rightBounds[1].x) ? 0 : 1;\n }\n if (i === rows.length - 1) {\n if (rows[i].length % 2 === 1 || unique && i === 1) {\n centered = rightTree[i][Math.floor(rightTree[i].length / 2)];\n var centerObjct = void 0;\n centerObjct = layout.nameTable[centered];\n var childDimension = void 0;\n var centeredX = layout.graphNodes[centered].x;\n var centeredY = layout.graphNodes[centered].y;\n childDimension = this.getDimensions(layout, centerObjct, centeredX, centeredY, lev + 1);\n diff = undefined;\n if (!align && unique) {\n if (max === 1) {\n i = 0;\n }\n diff = (rightBounds[max].x + rightBounds[max].right) / 2 - (rightBounds[i].x + rightBounds[i].right) / 2;\n if (i === 0) {\n info.mid += diff;\n }\n }\n else if (!unique && rightX !== undefined) {\n diff = rightX - layout.horizontalSpacing / 2 - (centeredX + childDimension.width / 2);\n }\n if (diff !== undefined) {\n this.updateRearBoundsOfTree(layout, rightTree[i], diff, dimensions);\n }\n if (unique) {\n info.mid = (rightCenter + leftCenter) / 2 + (i === 0 ? diff : 0) - dimensions.width / 2;\n }\n if (info.mid === undefined && layout.graphNodes[centered]) {\n info.mid = centeredX;\n }\n align = false;\n i++;\n }\n }\n };\n HierarchicalTree.prototype.updateRearBoundsOfTree = function (layout, rightTree, diff, dimensions) {\n for (var j = 0; j < rightTree.length; j++) {\n var childInfo = layout.graphNodes[rightTree[j]];\n var child = layout.nameTable[rightTree[j]];\n childInfo.x += diff;\n childInfo.canMoveBy += diff;\n if (j === rightTree.length - 1) {\n //removed child dimensions call calculation, since that is not used\n var childBnds = {\n x: childInfo.x, y: childInfo.y, right: childInfo.x +\n dimensions.width, bottom: childInfo.y + dimensions.height\n };\n var intersect = this.findIntersectingLevels(layout, childBnds, childInfo.actualLevel);\n this.updateRearBounds(layout, null, [{ rBounds: childBnds }], childInfo.actualLevel, intersect);\n }\n }\n };\n HierarchicalTree.prototype.splitRows = function (rows, leftTree, rightTree) {\n for (var i = 0; i < rows.length; i++) {\n leftTree[i] = [];\n rightTree[i] = [];\n var half = void 0;\n half = rows[i].length;\n if (rows[i].length % 2 !== 1) {\n half = Math.ceil(rows[i].length / 2);\n for (var k = 0; k < half; k++) {\n leftTree[i].push(rows[i][k]);\n }\n }\n for (var j = leftTree[i].length; j < rows[i].length; j++) {\n rightTree[i].push(rows[i][j]);\n }\n }\n };\n HierarchicalTree.prototype.updateVerticalTree = function (layout, shape, x, y, level, dontUpdate) {\n //declarations\n var child;\n var childInfo;\n var childBounds;\n var childWidth;\n var childHeight;\n var prevBounds;\n var bounds;\n var actBounds;\n var oddBounds;\n var evenBounds;\n var dimensions = this.getDimensions(layout, shape, x, y, level);\n var info = layout.graphNodes[shape.id];\n var firstChild = layout.nameTable[info.tree.children[0]];\n var h = layout.orientation.indexOf('Left') !== -1 ? true : false;\n var factor = info.tree.type === 'Left' ? -1 : 0;\n var right = x;\n var bottom = y;\n var lev;\n lev = level;\n var i;\n var intersect;\n var type;\n var levels = [];\n var oddLevels = [];\n var canMoveBy;\n var diff;\n for (i = 0; i < info.tree.children.length; i++) {\n if (info.tree.type === 'Alternate') {\n //arrange at both left and right\n type = (i % 2 === 0 && info.tree.children.length > 2) ? 'Left' : 'Right';\n factor = (i % 2 === 0 && info.tree.children.length > 2) ? -1 : 0;\n }\n right = x + this.findOffset(layout, shape, info, type);\n child = layout.nameTable[info.tree.children[i]];\n childWidth = h ? child.actualSize.height : child.actualSize.width;\n childHeight = h ? child.actualSize.width : child.actualSize.height;\n //Update sub tree\n childBounds = this.updateTree(layout, right + factor * childWidth, bottom, child, level + 1, undefined, true);\n childInfo = layout.graphNodes[child.id];\n actBounds = { x: childInfo.x, y: childInfo.y, right: childInfo.x + childWidth, bottom: childInfo.y + childHeight };\n if (i === 0) {\n this.uniteRects(childBounds, actBounds);\n bounds = childBounds;\n }\n else {\n this.uniteRects(bounds, childBounds);\n }\n //Check and adjust the space left from previous subtree/sibling\n if (childInfo.prevBounds && !(info.tree.type === 'Alternate' && i % 2 === 1 && info.tree.children.length > 2)) {\n canMoveBy = canMoveBy !== undefined ? Math.min(childInfo.canMoveBy, canMoveBy) : childInfo.canMoveBy;\n }\n //Max level of the subtree node\n info.maxLevel = Math.max(info.maxLevel || 0, childInfo.maxLevel || 0);\n if (!(info.tree.type === 'Alternate' && info.tree.children.length > 2 && i % 2 === 0)) {\n if (info.tree.type === 'Alternate' && info.tree.children.length > 2) {\n //alternate - arrange children with even index(0,2,4,6,..) at the next level\n bottom = Math.max(childBounds.bottom, prevBounds.bottom) + layout.verticalSpacing / 2;\n }\n else {\n // left/right - arrange next child at the nect level(bottom)\n bottom = childBounds.bottom + layout.verticalSpacing / 2;\n }\n level = info.maxLevel;\n levels.push({ rBounds: actBounds });\n if (!evenBounds) {\n evenBounds = {\n x: childInfo.x, y: childInfo.y, right: childInfo.x + childWidth,\n bottom: childInfo.y + childHeight\n };\n }\n else {\n this.uniteRects(evenBounds, actBounds);\n }\n if (childInfo.levelBounds) {\n levels = levels.concat(childInfo.levelBounds);\n }\n }\n else {\n if (i !== 0) {\n bottom = prevBounds.bottom + layout.verticalSpacing / 2;\n }\n oddLevels.push({ rBounds: actBounds });\n if (childInfo.levelBounds) {\n oddLevels = oddLevels.concat(childInfo.levelBounds);\n }\n }\n if (i === 0) {\n info.firstChild = { x: childInfo.x, canMoveBy: childInfo.canMoveBy, child: child.id };\n }\n if (this.hasChild(layout, child)) {\n if (!info.firstChild || info.firstChild.x >= childInfo.firstChild.x) {\n if (childInfo.firstChild && info.firstChild.canMoveBy < childInfo.canMoveBy) {\n var canMoveBy_1 = info.firstChild.canMoveBy;\n childInfo.canMoveBy = canMoveBy_1;\n layout.graphNodes[info.firstChild.child].canMoveBy = canMoveBy_1;\n info.firstChild.canMoveBy = canMoveBy_1;\n }\n info.firstChild = {\n x: childInfo.firstChild.x, canMoveBy: canMoveBy !== undefined ? canMoveBy : childInfo.canMoveBy,\n child: child.id\n };\n }\n else if (childInfo.firstChild && childInfo.translated && info.firstChild.canMoveBy > childInfo.canMoveBy) {\n info.firstChild.canMoveBy = layout.graphNodes[info.firstChild.child].canMoveBy = childInfo.canMoveBy;\n }\n }\n prevBounds = actBounds;\n }\n //To set level bounds(right most position of levels)\n if (!dontUpdate) {\n if (info.tree.type === 'Alternate' && info.tree.children.length > 2) {\n oddBounds = {\n x: oddLevels[0].rBounds.x, y: oddLevels[0].rBounds.y,\n right: oddLevels[oddLevels.length - 1].rBounds.right, bottom: oddLevels[oddLevels.length - 1].rBounds.bottom\n };\n intersect = this.findIntersectingLevels(layout, oddBounds, lev + 1);\n this.updateRearBounds(layout, null, oddLevels, lev + 1, intersect);\n }\n intersect = this.findIntersectingLevels(layout, evenBounds || bounds, lev + 1);\n this.updateRearBounds(layout, null, evenBounds ? levels : [{ rBounds: bounds }], lev + 1, intersect);\n }\n else {\n info.levelBounds = levels;\n }\n if (!isNaN(canMoveBy)) {\n layout.graphNodes[firstChild.id].canMoveBy = canMoveBy;\n }\n info.childBounds = bounds;\n info.mid = x;\n return bounds;\n };\n HierarchicalTree.prototype.splitChildrenInRows = function (layout, shape) {\n var info;\n info = layout.graphNodes[shape.id];\n var column;\n column = 4;\n var rows = [];\n var childNodes;\n childNodes = info.tree.children.length;\n var children = this.extend(info.tree.children);\n if (info.tree.rows) {\n var count = void 0;\n count = info.tree.children.length;\n var columns = void 0;\n columns = Math.ceil(count / info.tree.rows);\n if (columns % 2 === 0) {\n column = columns;\n }\n else {\n column = columns + 1;\n }\n }\n else if (info.tree.children.length === 3 || info.tree.children.length === 4) {\n column = 2;\n }\n else if (info.tree.children.length === 5) {\n column = 3;\n }\n while (childNodes > 0) {\n rows[rows.length] = children.splice(0, column);\n childNodes -= column;\n if (childNodes < column) {\n column = childNodes;\n }\n }\n return rows;\n };\n HierarchicalTree.prototype.extend = function (temp) {\n var i;\n var dummy = [];\n for (i = 0; i < temp.length; i++) {\n dummy[i] = temp[i];\n }\n return dummy;\n };\n HierarchicalTree.prototype.findOffset = function (layout, shape, info, type) {\n var offset = 0;\n var space = (layout.orientation.indexOf('Left') !== -1) ? shape.actualSize.height :\n shape.actualSize.width;\n var treeType = type ? type : info.tree.type;\n offset = info.tree.offset || 20;\n if (info.tree.type === 'Alternate') {\n if (offset >= layout.horizontalSpacing) {\n offset = layout.horizontalSpacing / 2;\n }\n }\n switch (treeType) {\n case 'Left':\n offset = space / 2 - offset;\n break;\n case 'Right':\n offset = offset + space / 2;\n break;\n }\n return offset;\n };\n HierarchicalTree.prototype.uniteRects = function (rect1, rect2) {\n //Unite two rects\n rect1.x = Math.min(rect1.x, rect2.x);\n rect1.right = Math.max(rect1.right, rect2.right);\n rect1.bottom = Math.max(rect1.bottom, rect2.bottom);\n };\n HierarchicalTree.prototype.spaceLeftFromPrevSubTree = function (layout, shape, bounds) {\n var info;\n info = layout.graphNodes[shape.id];\n var dif;\n var prevBounds;\n var intersect;\n var k;\n var space;\n space = layout.horizontalSpacing;\n //Find the minimum distance to move towards previous sub tree\n for (k = 0; k < info.intersect.length; k++) {\n prevBounds = layout.levels[info.intersect[k]].rBounds;\n dif = bounds.x - (prevBounds.right + space);\n if (info.diff === undefined || dif < info.diff) {\n info.diff = dif;\n info.prevBounds = layout.levels[info.intersect[k]].rBounds;\n }\n }\n };\n HierarchicalTree.prototype.findIntersectingLevels = function (layout, bounds, level, actualLevel) {\n //intersecting with exact Level\n var bnds;\n bnds = { x: bounds.x, y: bounds.y, right: bounds.right, bottom: bounds.bottom };\n bnds.y -= layout.verticalSpacing / 2;\n bnds.bottom += layout.verticalSpacing / 2;\n var intersectingLevels;\n intersectingLevels = [];\n var rBounds;\n var l;\n l = actualLevel !== undefined ? actualLevel : level;\n rBounds = layout.levels[l] ? layout.levels[l].rBounds : null;\n //Performance - We can consider only the intersecting levels\n do {\n if (rBounds && ((bnds.y < rBounds.y && bnds.bottom > rBounds.y)\n || (bnds.y < rBounds.bottom && rBounds.bottom < bnds.bottom) ||\n bnds.y >= rBounds.y &&\n bnds.bottom <= rBounds.bottom || bnds.y < rBounds.y && bnds.bottom > rBounds.bottom)) {\n var index = 0;\n intersectingLevels.splice(index, 0, l);\n }\n else if (rBounds && rBounds.bottom < bnds.y) {\n break;\n }\n l--;\n rBounds = layout.levels[l] ? layout.levels[l].rBounds : null;\n } while (l >= 0);\n l = (actualLevel !== undefined ? actualLevel : level) + 1;\n rBounds = layout.levels[l] ? layout.levels[l].rBounds : null;\n do {\n if (rBounds && ((bnds.y < rBounds.y && bnds.bottom > rBounds.y) ||\n (bnds.y < rBounds.bottom && rBounds.bottom < bnds.bottom) ||\n bnds.y >= rBounds.y && bnds.bottom <= rBounds.bottom || bnds.y < rBounds.y && bnds.bottom > rBounds.bottom)) {\n intersectingLevels.push(l);\n }\n else if (rBounds && rBounds.y > bnds.bottom) {\n break;\n }\n l++;\n rBounds = layout.levels[l] ? layout.levels[l].rBounds : null;\n } while (l <= layout.levels.length);\n return intersectingLevels;\n };\n HierarchicalTree.prototype.findLevel = function (layout, bounds, level) {\n var bnds;\n bnds = bounds;\n var l;\n l = 0;\n var rBounds;\n rBounds = layout.levels[l] ? layout.levels[l].rBounds : null;\n while (l < layout.levels.length) {\n if (rBounds && bnds.bottom < rBounds.y) {\n return l;\n }\n else {\n l++;\n }\n rBounds = layout.levels[l] ? layout.levels[l].rBounds : null;\n }\n return l;\n };\n HierarchicalTree.prototype.getParentNode = function (layout, node) {\n //Return the first parent node\n return layout.nameTable[layout.nameTable[node.inEdges[0]].sourceID];\n };\n HierarchicalTree.prototype.updateEdges = function (layout, node, depth) {\n var layoutInfo;\n layoutInfo = layout.graphNodes[node.id];\n var j;\n if (node.outEdges && node.outEdges.length && node.isExpanded) {\n for (j = 0; j < node.outEdges.length; j++) {\n var edge = void 0;\n edge = layout.nameTable[layout.nameTable[node.outEdges[j]].targetID];\n if (!edge.excludeFromLayout) {\n if (layoutInfo.tree.children.indexOf(edge.id) === -1) {\n layoutInfo.tree.children.push(edge.id);\n }\n if (edge.outEdges && edge.outEdges.length && edge.isExpanded) {\n layoutInfo.tree.hasSubTree = true;\n }\n this.updateEdges(layout, edge, depth + 1);\n }\n }\n }\n //set level info\n layoutInfo.tree.level = depth;\n //By default, orientation is horizontal for nested trees\n if (layoutInfo.tree.hasSubTree) {\n layoutInfo.tree.orientation = 'Horizontal';\n layoutInfo.tree.type = 'Center';\n }\n //Customizing assistants and children collection\n //Performance-Instead of reading the method everytime, we can set once and can reuse that\n if (layout.getLayoutInfo && layout.type === 'OrganizationalChart') {\n layout.getLayoutInfo(node, layoutInfo.tree);\n if (layoutInfo.tree.type === 'Balanced' && layoutInfo.tree.hasSubTree) {\n layoutInfo.tree.type = 'Center';\n layoutInfo.tree.orientation = 'Horizontal';\n }\n }\n if (layout.level && layoutInfo.tree.type !== 'Alternate' && depth >= layout.level) {\n layoutInfo.tree.hasSubTree = false;\n }\n };\n HierarchicalTree.prototype.updateAnchor = function (layout, bounds, viewPort) {\n var node;\n var fixedNode;\n var width = 0;\n var height = 0;\n var mod = 0;\n var viewPortBounds = new Rect(0, 0, viewPort.x, viewPort.y);\n var layoutBounds;\n layoutBounds = layout.bounds ? layout.bounds : viewPortBounds;\n var orientation = layout.orientation;\n //Anchor based on fixed nodes\n if (layout.fixedNode) {\n fixedNode = layout.nameTable[layout.fixedNode];\n width = fixedNode.actualSize.width;\n height = fixedNode.actualSize.height;\n layout.anchorX = fixedNode.offsetX;\n layout.anchorY = fixedNode.offsetY;\n var pivot = fixedNode.pivot;\n layout.anchorX += layout.orientation === 'RightToLeft' ? width * pivot.x : -width * pivot.x;\n layout.anchorY += layout.orientation === 'BottomToTop' ? height * pivot.y : -height * pivot.y;\n node = fixedNode;\n mod = 0;\n while (node.inEdges.length) {\n node = this.getParentNode(layout, node);\n mod += layout.graphNodes[node.id].subTreeTranslation || 0;\n }\n if (layout.orientation.indexOf('Left') !== -1) {\n layout.anchorX -= layout.graphNodes[fixedNode.id].y;\n layout.anchorY -= layout.graphNodes[fixedNode.id].x + mod;\n }\n else {\n layout.anchorX -= layout.graphNodes[fixedNode.id].x + mod;\n layout.anchorY -= layout.graphNodes[fixedNode.id].y;\n }\n }\n else {\n if (orientation === 'TopToBottom' || orientation === 'BottomToTop') {\n switch (layout.horizontalAlignment) {\n case 'Left':\n layout.anchorX = (layoutBounds.x - bounds.x) + layout.margin.left;\n break;\n case 'Right':\n layout.anchorX = layoutBounds.x + layoutBounds.width - layout.margin.right - bounds.right;\n break;\n case 'Auto':\n case 'Center':\n layout.anchorX = layoutBounds.x + layoutBounds.width / 2 - (bounds.x + bounds.right) / 2;\n break;\n }\n switch (layout.verticalAlignment) {\n case 'Auto':\n case 'Top':\n var top_1;\n top_1 = layoutBounds.y + layout.margin.top;\n layout.anchorY = orientation === 'TopToBottom' ? top_1 : bounds.bottom + top_1;\n break;\n case 'Bottom':\n var bottom = void 0;\n bottom = layoutBounds.y + layoutBounds.height - layout.margin.bottom;\n layout.anchorY = orientation === 'TopToBottom' ? bottom - bounds.bottom : bottom;\n break;\n case 'Center':\n var center = void 0;\n center = layoutBounds.y + layoutBounds.height / 2;\n layout.anchorY = layout.orientation === 'TopToBottom' ?\n center - (bounds.y + bounds.bottom) / 2 : center + (bounds.y + bounds.bottom) / 2;\n break;\n }\n }\n else {\n switch (layout.horizontalAlignment) {\n case 'Auto':\n case 'Left':\n var left = void 0;\n left = layoutBounds.x + layout.margin.left;\n layout.anchorX = orientation === 'LeftToRight' ? left : bounds.bottom + left;\n break;\n case 'Right':\n var right = void 0;\n right = layoutBounds.x + layoutBounds.width - layout.margin.right;\n layout.anchorX = orientation === 'LeftToRight' ? right - bounds.bottom : right;\n break;\n case 'Center':\n var center = void 0;\n center = layoutBounds.width / 2 + layoutBounds.x;\n layout.anchorX = layout.orientation === 'LeftToRight' ?\n center - (bounds.y + bounds.bottom) / 2 : center + (bounds.y + bounds.bottom) / 2;\n break;\n }\n switch (layout.verticalAlignment) {\n case 'Top':\n layout.anchorY = layoutBounds.y + layout.margin.top - bounds.x;\n break;\n case 'Auto':\n case 'Center':\n layout.anchorY = layoutBounds.y + layoutBounds.height / 2 - (bounds.right + bounds.x) / 2;\n break;\n case 'Bottom':\n layout.anchorY = layoutBounds.y + layoutBounds.height - layout.margin.bottom - bounds.right;\n break;\n }\n }\n }\n };\n HierarchicalTree.prototype.updateConnectors = function (layout, node, level) {\n var i;\n var info;\n var nodeWidth;\n var nodeHeight;\n var targetWidth;\n var targetHeight;\n var length;\n var offsetLen;\n var points;\n var segments;\n var target;\n var conn;\n var relative;\n var center;\n var layoutProp;\n //Route out edges\n info = layout.graphNodes[node.id];\n var direction;\n if (node.outEdges.length) {\n for (i = 0; i < node.outEdges.length; i++) {\n conn = layout.nameTable[node.outEdges[i]];\n conn.points = [];\n target = layout.nameTable[conn.targetID];\n if (conn.visible) {\n conn.visited = true;\n if (layout.getConnectorSegments) {\n segments = layout.getConnectorSegments(conn);\n }\n else {\n if (info && info.tree.children.indexOf(conn.targetID) !== -1) {\n conn.segments = [];\n if (layout.type === 'OrganizationalChart' && conn.type === 'Orthogonal') {\n this.updateSegments(layout, conn, node, target, i);\n }\n }\n }\n if (target && (target.isExpanded || this.hasChild(layout, target))) {\n this.updateConnectors(layout, target, level + 1);\n }\n }\n }\n }\n if (info && info.tree.assistants.length) {\n //In-Edge routing of assistant nodes\n for (i = 0; i < info.tree.assistants.length; i++) {\n target = layout.nameTable[info.tree.assistants[i]];\n conn = layout.nameTable[target.inEdges[0]];\n this.get3Points(layout, node, target, conn);\n if (target.isExpanded || this.hasChild(layout, target)) {\n this.updateConnectors(layout, target, level + 1);\n }\n }\n }\n };\n HierarchicalTree.prototype.updateSegments = function (layout, conn, node, target, i) {\n var info = layout.graphNodes[node.id];\n //Connector routing - Horizontal layout orientation\n if (info.tree.assistants.length) {\n //Route in-edge of child node, if the parent has assistant\n this.updateSegmentsForHorizontalOrientation(layout, node, target, conn);\n }\n else {\n //Route in-edge of child node\n if (info.tree.orientation === 'Horizontal' && info.tree.type === 'Balanced') {\n this.updateSegmentsForBalancedTree(layout, conn, node, target, i);\n }\n else {\n if (info.tree.orientation === 'Horizontal') {\n this.updateSegmentsForHorizontalOrientation(layout, node, target, conn);\n }\n else {\n if (info.tree.offset < 5) {\n this.get5Points(layout, node, target, conn);\n }\n else {\n this.get3Points(layout, node, target, conn);\n }\n }\n }\n }\n };\n HierarchicalTree.prototype.updateSegmentsForBalancedTree = function (layout, connector, node, target, i) {\n var info = layout.graphNodes[node.id];\n var center;\n var relative;\n if (info.tree.children.length === 5 && i > 2) {\n relative = info.tree.children[1];\n if (isNaN(layout.graphNodes[relative].treeWidth)) {\n layout.graphNodes[relative].treeWidth = layout.nameTable[relative].actualSize.width;\n }\n var factor = i !== 3 ? 1 : -1;\n if (layout.orientation.indexOf('Left') !== -1) {\n center = layout.nameTable[relative].offsetY - layout.graphNodes[relative].treeWidth / 2 -\n (layout.verticalSpacing * factor / 2);\n }\n else {\n center = layout.nameTable[relative].offsetX +\n layout.graphNodes[relative].treeWidth / 2 + (layout.horizontalSpacing * factor) / 2;\n }\n this.getSegmentsForMultipleRows(layout, node, target, connector);\n }\n else {\n if (info.tree.children.length > 5) {\n if (i < 4) {\n this.getSegmentsForMultipleRows(layout, node, target, connector);\n }\n else {\n this.updateSegmentsForHorizontalOrientation(layout, node, target, connector);\n }\n }\n else if (info.tree.children.length === 4) {\n if (i < 2) {\n this.getSegmentsForMultipleRows(layout, node, target, connector);\n }\n else {\n this.updateSegmentsForHorizontalOrientation(layout, node, target, connector);\n }\n }\n else {\n this.getSegmentsForMultipleRows(layout, node, target, connector);\n }\n }\n };\n HierarchicalTree.prototype.get3Points = function (layout, node, target, connector) {\n var points = [];\n var nodeBounds = this.getBounds(node);\n var targetBounds = this.getBounds(target);\n if (layout.orientation.indexOf('Top') !== -1) {\n var startingPoint = layout.orientation.indexOf('Top') === 0 ? nodeBounds.bottomCenter :\n nodeBounds.topCenter;\n var endPoint = node.offsetX > target.offsetX ? targetBounds.middleRight : targetBounds.middleLeft;\n points.push(startingPoint, { x: nodeBounds.bottomCenter.x, y: endPoint.y }, endPoint);\n }\n else {\n var startingPoint = layout.orientation.indexOf('Left') === 0 ? nodeBounds.middleRight :\n nodeBounds.middleLeft;\n var endPoint = node.offsetY > target.offsetY ? targetBounds.bottomCenter : targetBounds.topCenter;\n points.push(startingPoint, { x: targetBounds.bottomCenter.x, y: nodeBounds.middleRight.y }, endPoint);\n }\n this.getSegmentsFromPoints(points, connector);\n };\n HierarchicalTree.prototype.get5Points = function (layout, node, target, connector) {\n var points = [];\n var layoutprop;\n var nodeBounds = this.getBounds(node);\n var targetBounds = this.getBounds(target);\n var info = layout.graphNodes[node.id];\n if (node.offsetX > target.offsetX) {\n points.push(nodeBounds.bottomCenter, { x: nodeBounds.bottomCenter.x, y: (nodeBounds.bottomCenter.y + layout.verticalSpacing / 4) }, {\n x: (targetBounds.middleRight.x + layout.horizontalSpacing / 2),\n y: (nodeBounds.bottomCenter.y + layout.verticalSpacing / 4)\n }, { x: (targetBounds.middleRight.x + layout.horizontalSpacing / 2), y: targetBounds.middleRight.y }, targetBounds.middleRight);\n }\n else {\n points.push(nodeBounds.bottomCenter, { x: nodeBounds.bottomCenter.x, y: (nodeBounds.bottomCenter.y + layout.verticalSpacing / 4) }, {\n x: (targetBounds.middleLeft.x - layout.horizontalSpacing / 2),\n y: (nodeBounds.bottomCenter.y + layout.verticalSpacing / 4)\n }, { x: (targetBounds.middleLeft.x - layout.horizontalSpacing / 2), y: targetBounds.middleLeft.y }, targetBounds.middleLeft);\n }\n this.getSegmentsFromPoints(points, connector);\n };\n HierarchicalTree.prototype.getSegmentsFromPoints = function (points, connector) {\n var segments = [];\n var segment;\n for (var i = 0; i < points.length - 2; i++) {\n segment = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal' }, true);\n segment.direction = Point.direction(points[i], points[i + 1]);\n segment.length = Point.distancePoints(points[i], points[i + 1]);\n segments.push(segment);\n }\n connector.segments = segments;\n };\n HierarchicalTree.prototype.getSegmentsForMultipleRows = function (layout, node, target, connector) {\n var points = [];\n var segments = [];\n var point;\n var segment;\n var targetBounds = this.getBounds(target);\n var nodeBounds = this.getBounds(node);\n switch (layout.orientation) {\n case 'TopToBottom':\n point = { x: nodeBounds.bottomCenter.x, y: (nodeBounds.bottomCenter.y + layout.verticalSpacing / 4) };\n segment = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal' }, true);\n segment.direction = Point.direction(nodeBounds.bottomCenter, point);\n segment.length = Point.distancePoints(nodeBounds.bottomCenter, point);\n segments.push(segment);\n break;\n case 'BottomToTop':\n point = { x: nodeBounds.bottomCenter.x, y: (nodeBounds.topCenter.y - layout.verticalSpacing / 4) };\n segment = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal' }, true);\n segment.direction = Point.direction(nodeBounds.topCenter, point);\n segment.length = Point.distancePoints(nodeBounds.topCenter, point);\n segments.push(segment);\n break;\n case 'LeftToRight':\n point = { x: (nodeBounds.middleRight.x + layout.verticalSpacing / 4), y: nodeBounds.middleRight.y, };\n segment = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal' }, true);\n segment.direction = Point.direction(nodeBounds.middleRight, point);\n segment.length = Point.distancePoints(nodeBounds.middleRight, point);\n segments.push(segment);\n if (targetBounds.center.y !== nodeBounds.center.y) {\n var point3 = { x: (nodeBounds.middleRight.x + layout.verticalSpacing / 4), y: targetBounds.middleLeft.y };\n segment = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal' }, true);\n segment.direction = Point.direction(point, point3);\n segment.length = Point.distancePoints(point, point3);\n segments.push(segment);\n }\n break;\n case 'RightToLeft':\n point = { x: (nodeBounds.middleLeft.x - layout.verticalSpacing / 4), y: nodeBounds.middleRight.y };\n segment = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal' }, true);\n segment.direction = Point.direction(nodeBounds.middleLeft, point);\n segment.length = Point.distancePoints(nodeBounds.middleLeft, point);\n segments.push(segment);\n if (targetBounds.center.y !== nodeBounds.center.y) {\n var point_1 = { x: (nodeBounds.middleLeft.x - layout.verticalSpacing / 4), y: targetBounds.middleLeft.y };\n segment = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal' }, true);\n segment.direction = Point.direction(point_1, point_1);\n segment.length = Point.distancePoints(point_1, point_1);\n segments.push(segment);\n }\n break;\n }\n connector.segments = segments;\n };\n HierarchicalTree.prototype.updateSegmentsForHorizontalOrientation = function (layout, node, target, connector) {\n var points = [];\n var point2;\n var segment;\n var segments = [];\n var nodeBounds = this.getBounds(node);\n var targetBounds = this.getBounds(target);\n switch (layout.orientation) {\n case 'TopToBottom':\n point2 = { x: nodeBounds.bottomCenter.x, y: (targetBounds.topCenter.y - layout.verticalSpacing / 2) };\n segment = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal' }, true);\n segment.direction = Point.direction(nodeBounds.bottomCenter, point2);\n segment.length = Point.distancePoints(nodeBounds.bottomCenter, point2);\n segments.push(segment);\n break;\n case 'BottomToTop':\n point2 = { x: nodeBounds.topCenter.x, y: (targetBounds.bottomCenter.y + layout.verticalSpacing / 2) };\n segment = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal' }, true);\n segment.direction = Point.direction(nodeBounds.topCenter, point2);\n segment.length = Point.distancePoints(nodeBounds.topCenter, point2);\n segments.push(segment);\n break;\n case 'LeftToRight':\n point2 = { x: (targetBounds.middleLeft.x - layout.verticalSpacing / 2), y: nodeBounds.middleRight.y };\n segment = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal' }, true);\n segment.direction = Point.direction(nodeBounds.middleRight, point2);\n segment.length = Point.distancePoints(nodeBounds.middleRight, point2);\n segments.push(segment);\n if (targetBounds.center.y !== nodeBounds.center.y) {\n var point3 = { x: (targetBounds.middleLeft.x - layout.verticalSpacing / 2), y: targetBounds.middleLeft.y };\n segment = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal' }, true);\n segment.direction = Point.direction(point2, point3);\n segment.length = Point.distancePoints(point2, point3);\n segments.push(segment);\n }\n break;\n case 'RightToLeft':\n point2 = { x: (targetBounds.middleRight.x + layout.verticalSpacing / 2), y: nodeBounds.middleRight.y };\n segment = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal' }, true);\n segment.direction = Point.direction(nodeBounds.middleLeft, point2);\n segment.length = Point.distancePoints(nodeBounds.middleLeft, point2);\n segments.push(segment);\n if (targetBounds.center.y !== nodeBounds.center.y) {\n var point = { x: (targetBounds.middleRight.x + layout.verticalSpacing / 2), y: targetBounds.middleLeft.y };\n segment = new OrthogonalSegment(connector, 'segments', { type: 'Orthogonal' }, true);\n segment.direction = Point.direction(point2, point);\n segment.length = Point.distancePoints(point2, point);\n segments.push(segment);\n }\n break;\n }\n connector.segments = segments;\n return points;\n };\n HierarchicalTree.prototype.updateNodes = function (layout, node, mod, update, dx, dy) {\n var i;\n var child;\n var width;\n var height;\n var offsetX;\n var offsetY;\n width = node.actualSize.width;\n height = node.actualSize.height;\n if (!node.excludeFromLayout) {\n offsetX = layout.anchorX;\n offsetY = layout.anchorY;\n /*Performance - instead of checking conditions for every node, we can make the layout related\n conditions once and we can reuse them*/\n if (layout.orientation === 'LeftToRight') {\n offsetX += layout.graphNodes[node.id].y + width / 2;\n offsetY += layout.graphNodes[node.id].x + mod + height / 2;\n }\n else if (layout.orientation === 'RightToLeft') {\n offsetX -= layout.graphNodes[node.id].y + width / 2;\n offsetY += layout.graphNodes[node.id].x + mod + height / 2;\n }\n else if (layout.orientation === 'TopToBottom') {\n offsetX += layout.graphNodes[node.id].x + mod + width / 2;\n offsetY += layout.graphNodes[node.id].y + height / 2;\n }\n else {\n offsetX += layout.graphNodes[node.id].x + mod + width / 2;\n offsetY -= layout.graphNodes[node.id].y + height / 2;\n }\n if (layout.graphNodes) {\n dx = dx ? dx : 0;\n dy = dy ? dy : 0;\n offsetX += dx;\n offsetY += dy;\n if (!this.isAnimation) {\n node.offsetX = offsetX;\n node.offsetY = offsetY;\n }\n }\n var objects = { id: node.id, differenceX: offsetX - node.offsetX, differenceY: offsetY - node.offsetY };\n layout.objects.push(objects);\n var list = void 0;\n list = [];\n if (this.hasChild(layout, node)) {\n for (i = 0; i < layout.graphNodes[node.id].tree.children.length; i++) {\n child = layout.nameTable[layout.graphNodes[node.id].tree.children[i]];\n this.updateNodes(layout, child, mod + (layout.graphNodes[node.id].subTreeTranslation || 0), update, dx, dy);\n list.push(child);\n }\n }\n if (layout.graphNodes[node.id].tree.assistants.length) {\n for (i = 0; i < layout.graphNodes[node.id].tree.assistants.length; i++) {\n child = layout.nameTable[layout.graphNodes[node.id].tree.assistants[i]];\n this.updateNodes(layout, child, mod + (layout.graphNodes[node.id].subTreeTranslation || 0), null, dx, dy);\n }\n }\n }\n };\n return HierarchicalTree;\n}());\nexport { HierarchicalTree };\n","import { Rect } from '../primitives/rect';\nimport { getFunction } from '../utility/base-util';\nimport { HierarchicalTree } from './hierarchical-tree';\n/**\n * Layout for mind-map tree\n */\nvar MindMap = /** @class */ (function () {\n /**\n * Constructor for the organizational chart module.\n * @private\n */\n function MindMap() {\n /**\n * Defines the layout animation\n *\n */\n this.isAnimation = false;\n //constructs the layout module\n }\n /**\n * To destroy the organizational chart\n * @return {void}\n * @private\n */\n MindMap.prototype.destroy = function () {\n /**\n * Destroy method performed here\n */\n };\n /**\n * Get module name.\n */\n MindMap.prototype.getModuleName = function () {\n /**\n * Returns the module name of the layout\n */\n return 'MindMapChart';\n };\n MindMap.prototype.updateLayout = function (nodes, nameTable, layoutProp, viewPort, uniqueId, root) {\n var isRoot;\n isRoot = this.checkRoot(nodes, layoutProp, uniqueId, root, nameTable);\n if (isRoot) {\n layoutProp.fixedNode = isRoot;\n }\n else {\n for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {\n var node = nodes_1[_i];\n if (!node.excludeFromLayout) {\n if (!node.inEdges || !node.inEdges.length) {\n layoutProp.fixedNode = node.id;\n break;\n }\n }\n }\n }\n var rootNode = nameTable[layoutProp.fixedNode];\n var fistLevelNodes = this.findFirstLevelNodes(rootNode, layoutProp, nameTable);\n var leftNodes = [];\n var rightNodes = [];\n var getMindmapBranch = getFunction(layoutProp.getBranch);\n getMindmapBranch = getMindmapBranch || getFunction(this.getBranch);\n for (var _a = 0, fistLevelNodes_1 = fistLevelNodes; _a < fistLevelNodes_1.length; _a++) {\n var node = fistLevelNodes_1[_a];\n var align = getMindmapBranch(node, fistLevelNodes);\n (align === 'Left') ? leftNodes.push(node) : rightNodes.push(node);\n }\n var viewPortBounds = new Rect(0, 0, viewPort.x, viewPort.y);\n nameTable[layoutProp.fixedNode].offsetX = viewPortBounds.x + viewPortBounds.width / 2;\n nameTable[layoutProp.fixedNode].offsetY = viewPortBounds.y + viewPortBounds.height / 2;\n if (leftNodes.length) {\n this.updateMindMapBranch(nodes, rightNodes, nameTable, layoutProp, viewPort, uniqueId, 'Left');\n }\n if (rightNodes.length) {\n this.updateMindMapBranch(nodes, leftNodes, nameTable, layoutProp, viewPort, uniqueId, 'Right');\n }\n };\n MindMap.prototype.checkRoot = function (nodes, layoutProp, uniqueId, root, nameTable) {\n for (var _i = 0, nodes_2 = nodes; _i < nodes_2.length; _i++) {\n var node = nodes_2[_i];\n if (!node.excludeFromLayout) {\n if (node.data && (node.data[uniqueId].toString() === root || node.data[uniqueId].toString()\n === layoutProp.root)) {\n return node.id;\n }\n else if (!node.data && node.id === layoutProp.root) {\n return node.id;\n }\n }\n }\n return '';\n };\n MindMap.prototype.updateMindMapBranch = function (nodes, excludeNodes, nameTable, layoutProp, viewPort, uniqueId, side) {\n var layout;\n layout = {\n type: 'HierarchicalTree',\n horizontalSpacing: layoutProp.verticalSpacing, verticalSpacing: layoutProp.horizontalSpacing,\n verticalAlignment: layoutProp.verticalAlignment, horizontalAlignment: layoutProp.horizontalAlignment,\n fixedNode: layoutProp.fixedNode, getLayoutInfo: getFunction(layoutProp.getLayoutInfo), margin: layoutProp.margin,\n root: layoutProp.fixedNode\n };\n layout.orientation = (side === 'Left') ? 'LeftToRight' : 'RightToLeft';\n this.excludeFromLayout(excludeNodes, nameTable, true);\n var mapLayout = new HierarchicalTree();\n mapLayout.updateLayout(nodes, nameTable, layout, viewPort, uniqueId);\n this.excludeFromLayout(excludeNodes, nameTable, false);\n };\n MindMap.prototype.getBranch = function (obj, firstLevelNodes) {\n var side;\n var i = firstLevelNodes.indexOf(obj);\n if (i % 2 === 0) {\n side = 'Left';\n }\n else {\n side = 'Right';\n }\n return side;\n };\n MindMap.prototype.excludeFromLayout = function (newCollection, nameTable, exclude) {\n for (var _i = 0, newCollection_1 = newCollection; _i < newCollection_1.length; _i++) {\n var newcol = newCollection_1[_i];\n var node = nameTable[newcol.id];\n node.excludeFromLayout = exclude;\n }\n };\n MindMap.prototype.findFirstLevelNodes = function (node, layout, nameTable) {\n var parentNode;\n var fistLevelNodes = [];\n if (node && node.outEdges.length) {\n for (var _i = 0, _a = node.outEdges; _i < _a.length; _i++) {\n var outEdge = _a[_i];\n fistLevelNodes.push(nameTable[nameTable[outEdge].targetID]);\n }\n }\n return fistLevelNodes;\n };\n return MindMap;\n}());\nexport { MindMap };\n","/**\n * Radial Tree\n */\nvar RadialTree = /** @class */ (function () {\n /**\n * Constructor for the organizational chart module.\n * @private\n */\n function RadialTree() {\n //constructs the layout module\n }\n /**\n * To destroy the organizational chart\n * @return {void}\n * @private\n */\n RadialTree.prototype.destroy = function () {\n /**\n * Destroy method performed here\n */\n };\n /**\n * Get module name.\n */\n RadialTree.prototype.getModuleName = function () {\n /**\n * Returns the module name of the layout\n */\n return 'RadialTree';\n };\n RadialTree.prototype.updateLayout = function (nodes, nameTable, layoutProp, viewport) {\n var layout = {\n type: layoutProp.type,\n nameTable: nameTable, anchorX: 0, anchorY: 0,\n firstLevelNodes: [], centerNode: null, levels: [], maxLevel: 0, graphNodes: {}, layoutNodes: [],\n orientation: layoutProp.orientation,\n horizontalSpacing: layoutProp.horizontalSpacing, verticalSpacing: layoutProp.verticalSpacing,\n verticalAlignment: layoutProp.verticalAlignment, horizontalAlignment: layoutProp.horizontalAlignment,\n fixedNode: layoutProp.fixedNode, margin: layoutProp.margin,\n bounds: layoutProp.bounds, objects: [], root: layoutProp.root\n };\n this.doLayout(layout, nodes, nameTable, viewport);\n };\n RadialTree.prototype.doLayout = function (layout, nodes, nameTable, viewport) {\n var node;\n for (var i = 0; i < nodes.length; i++) {\n node = nodes[i];\n if (!node.excludeFromLayout) {\n layout.graphNodes[node.id] = this.setUpLayoutInfo(layout, node);\n if (!node.inEdges || !node.inEdges.length) {\n layout.firstLevelNodes.push(node);\n }\n }\n }\n if (layout.root && nameTable[layout.root]) {\n layout.centerNode = nameTable[layout.root];\n }\n else if (layout.firstLevelNodes.length) {\n layout.centerNode = layout.firstLevelNodes[0];\n layout.root = layout.centerNode.id;\n }\n if (layout.centerNode) {\n this.updateEdges(layout, layout.centerNode, 0, nameTable);\n this.depthFirstAllignment(layout, layout.centerNode, 0, 0);\n this.populateLevels(layout);\n this.transformToCircleLayout(layout);\n this.updateAnchor(layout, viewport);\n this.updateNodes(layout, layout.centerNode, nameTable);\n }\n };\n RadialTree.prototype.updateEdges = function (layout, node, depth, nameTable) {\n var nodeInfo = layout.graphNodes[node.id];\n layout.layoutNodes.push(nodeInfo);\n nodeInfo.level = depth;\n nodeInfo.visited = true;\n layout.maxLevel = Math.max(layout.maxLevel, depth);\n for (var j = 0; j < node.outEdges.length; j++) {\n var edge = nameTable[nameTable[node.outEdges[j]].targetID];\n if (!edge.excludeFromLayout && !edge.visited) {\n nodeInfo.children.push(edge);\n this.updateEdges(layout, edge, depth + 1, nameTable);\n }\n }\n };\n RadialTree.prototype.depthFirstAllignment = function (layout, node, x, y) {\n var newValue;\n var nodeInfo = layout.graphNodes[node.id];\n if (nodeInfo.children.length) {\n y += 300;\n for (var i = 0; i < nodeInfo.children.length; i++) {\n newValue = this.depthFirstAllignment(layout, nodeInfo.children[i], x, y);\n x = newValue.x;\n y = newValue.y;\n }\n nodeInfo.children = nodeInfo.children.sort(function (obj1, obj2) {\n return layout.graphNodes[obj1.id].x - layout.graphNodes[obj2.id].x;\n });\n var min = layout.graphNodes[nodeInfo.children[0].id].min;\n var max = layout.graphNodes[nodeInfo.children[nodeInfo.children.length - 1].id].max;\n nodeInfo.x = min + (max - min) / 2;\n x = max + layout.horizontalSpacing;\n nodeInfo.segmentOffset = max + layout.horizontalSpacing;\n nodeInfo.x -= nodeInfo.width / 2;\n nodeInfo.y -= nodeInfo.height / 2;\n nodeInfo.min = min;\n nodeInfo.max = max;\n if (nodeInfo.x < min && nodeInfo.visited) {\n nodeInfo.x = min;\n x = nodeInfo.x + nodeInfo.width / 2 - (max - min) / 2;\n nodeInfo.visited = false;\n for (var i = 0; i < nodeInfo.children.length; i++) {\n newValue = this.depthFirstAllignment(layout, nodeInfo.children[i], x, y);\n }\n nodeInfo.visited = true;\n x = nodeInfo.x + nodeInfo.width + layout.horizontalSpacing;\n }\n max = layout.graphNodes[nodeInfo.children[nodeInfo.children.length - 1].id].segmentOffset;\n x = x < max ? max : x;\n y -= 300;\n nodeInfo.y = y;\n }\n else {\n nodeInfo.x = x;\n nodeInfo.y = y;\n nodeInfo.min = x;\n nodeInfo.max = x + nodeInfo.width;\n x += nodeInfo.width + layout.horizontalSpacing;\n }\n return { x: x, y: y };\n };\n RadialTree.prototype.populateLevels = function (layout) {\n var stages = [];\n var min = Math.min.apply(Math, layout.layoutNodes.map(function (nodeInfo) { return nodeInfo.x; }));\n var max = Math.max.apply(Math, layout.layoutNodes.map(function (nodeInfo) {\n return nodeInfo.x + nodeInfo.width + layout.horizontalSpacing;\n }));\n var full = max - min;\n layout.levels = [];\n var _loop_1 = function (i) {\n stages = layout.layoutNodes.filter(function (nodeInfo) {\n if (nodeInfo.level === i) {\n return nodeInfo;\n }\n else {\n return null;\n }\n });\n var newlevel = {};\n stages = stages.sort(function (nodeInfo1, nodeInfo2) { return nodeInfo1.x - nodeInfo2.x; });\n newlevel.min = stages[0].x;\n newlevel.max = stages[stages.length - 1].x + stages[stages.length - 1].width + layout.horizontalSpacing;\n newlevel.actualCircumference = 0;\n newlevel.height = 0;\n for (var k = 0; k < stages.length; k++) {\n if (stages[k].height > newlevel.height) {\n newlevel.height = stages[k].height;\n }\n newlevel.actualCircumference += Math.max(stages[k].width, stages[k].height);\n if (k !== stages.length - 1) {\n newlevel.actualCircumference += layout.horizontalSpacing;\n }\n }\n newlevel.circumference = newlevel.max - newlevel.min;\n if (newlevel.actualCircumference < newlevel.circumference) {\n newlevel.circumference = (newlevel.circumference + newlevel.actualCircumference) / 2;\n }\n newlevel.radius = newlevel.circumference / (2 * Math.PI) + newlevel.height;\n newlevel.nodes = [];\n if (i > 1) {\n if (layout.levels[i - 1].radius + layout.levels[i - 1].height >= newlevel.radius) {\n newlevel.radius = layout.levels[i - 1].radius + layout.levels[i - 1].height;\n }\n }\n for (var j = 0; j < stages.length; j++) {\n stages[j].ratio = Math.abs(stages[j].x + stages[j].width / 2 - min) / full;\n newlevel.nodes.push(stages[j]);\n }\n layout.levels.push(newlevel);\n };\n for (var i = 0; i <= layout.maxLevel; i++) {\n _loop_1(i);\n }\n };\n RadialTree.prototype.transformToCircleLayout = function (layout) {\n var root = layout.graphNodes[layout.centerNode.id];\n root.x = 0;\n root.y = 0;\n for (var i = 1; i < layout.levels.length; i++) {\n for (var j = 0; j < layout.levels[i].nodes.length; j++) {\n var nodeInfo = layout.levels[i].nodes[j];\n nodeInfo.x = Math.cos(nodeInfo.ratio * 360 * Math.PI / 180) * (layout.levels[i].radius + layout.verticalSpacing * i);\n nodeInfo.y = Math.sin(nodeInfo.ratio * 360 * Math.PI / 180) * (layout.levels[i].radius + layout.verticalSpacing * i);\n layout.anchorX = Math.min(layout.anchorX, nodeInfo.x);\n layout.anchorY = Math.min(layout.anchorY, nodeInfo.y);\n }\n }\n };\n RadialTree.prototype.updateAnchor = function (layout, viewPort) {\n layout.anchorX = layout.centerNode.offsetX || viewPort.x / 2;\n layout.anchorY = layout.centerNode.offsetY || viewPort.y / 2;\n };\n RadialTree.prototype.updateNodes = function (layout, node, nameTable) {\n var nodeInfo = layout.graphNodes[node.id];\n var offsetX = nodeInfo.x + layout.anchorX;\n var offsetY = nodeInfo.y + layout.anchorY;\n node.offsetX += offsetX;\n node.offsetY += offsetY;\n for (var i = 0; i < nodeInfo.children.length; i++) {\n var childInfo = nodeInfo.children[i];\n this.updateNodes(layout, nameTable[childInfo.id], nameTable);\n }\n };\n RadialTree.prototype.setUpLayoutInfo = function (layout, item) {\n var info = {};\n info.name = item.id;\n info.x = 0;\n info.y = 0;\n info.min = 0;\n info.max = 0;\n info.width = item.actualSize.width;\n info.height = item.actualSize.height;\n info.children = [];\n info.level = 0;\n info.ratio = 0;\n info.visited = false;\n return info;\n };\n return RadialTree;\n}());\nexport { RadialTree };\n","/**\n * Connects diagram objects with layout algorithm\n */\nvar ComplexHierarchicalTree = /** @class */ (function () {\n /**\n * Constructor for the hierarchical tree layout module\n * @private\n */\n function ComplexHierarchicalTree() {\n //constructs the layout module\n }\n /**\n * To destroy the hierarchical tree module\n * @return {void}\n * @private\n */\n ComplexHierarchicalTree.prototype.destroy = function () {\n /**\n * Destroy method performed here\n */\n };\n /**\n * Get module name.\n */\n ComplexHierarchicalTree.prototype.getModuleName = function () {\n /**\n * Returns the module name of the layout\n */\n return 'ComplexHierarchicalTree';\n };\n ComplexHierarchicalTree.prototype.doLayout = function (nodes, nameTable, layout, viewPort) {\n new HierarchicalLayoutUtil().doLayout(nodes, nameTable, layout, viewPort);\n };\n return ComplexHierarchicalTree;\n}());\nexport { ComplexHierarchicalTree };\n/**\n * Utility that arranges the nodes in hierarchical structure\n */\nvar HierarchicalLayoutUtil = /** @class */ (function () {\n function HierarchicalLayoutUtil() {\n this.nameTable = {};\n this.crossReduction = new CrossReduction();\n }\n /**\n * Defines a vertex that is equivalent to a node object\n */\n HierarchicalLayoutUtil.prototype.createVertex = function (node, value, x, y, width, height) {\n var geometry = { x: x, y: y, width: width, height: height };\n var vertex = {\n value: value, geometry: geometry, name: value, vertex: true,\n inEdges: node.inEdges.slice(), outEdges: node.outEdges.slice()\n };\n return vertex;\n };\n /**\n * Initializes the edges collection of the vertices\n * @private\n */\n HierarchicalLayoutUtil.prototype.getEdges = function (node) {\n var edges = [];\n if (node) {\n for (var i = 0; node.inEdges.length > 0 && i < node.inEdges.length; i++) {\n edges.push(this.nameTable[node.inEdges[i]]);\n }\n for (var i = 0; node.outEdges.length > 0 && i < node.outEdges.length; i++) {\n edges.push(this.nameTable[node.outEdges[i]]);\n }\n }\n return edges;\n };\n /**\n * Finds the root nodes of the layout\n */\n HierarchicalLayoutUtil.prototype.findRoots = function (vertices) {\n var roots = [];\n var best = null;\n var maxDiff = -100000;\n for (var _i = 0, _a = Object.keys(vertices); _i < _a.length; _i++) {\n var i = _a[_i];\n var cell = vertices[i];\n var conns = this.getEdges(cell);\n var outEdges = 0;\n var inEdges = 0;\n for (var k = 0; k < conns.length; k++) {\n var src = this.getVisibleTerminal(conns[k], true);\n if (src.name === cell.name) {\n outEdges++;\n }\n else {\n inEdges++;\n }\n }\n if (inEdges === 0 && outEdges > 0) {\n roots.push(cell);\n }\n var diff = outEdges - inEdges;\n if (diff > maxDiff) {\n maxDiff = diff;\n best = cell;\n }\n }\n if (roots.length === 0 && best != null) {\n roots.push(best);\n }\n return roots;\n };\n /**\n * Returns the source/target vertex of the given connector\n * @private\n */\n HierarchicalLayoutUtil.prototype.getVisibleTerminal = function (edge, source) {\n var terminalCache = this.nameTable[edge.targetID];\n if (source) {\n terminalCache = this.nameTable[edge.sourceID];\n }\n for (var i = 0; i < this.vertices.length; i++) {\n if (this.vertices[i].name === terminalCache.id) {\n return this.vertices[i];\n }\n }\n return null;\n };\n /**\n * Traverses each sub tree, ensures there is no cycle in traversing\n * @private\n */\n HierarchicalLayoutUtil.prototype.traverse = function (vertex, directed, edge, currentComp, hierarchyVertices, filledVertices) {\n if (vertex != null) {\n var vertexID = vertex.name;\n if ((filledVertices == null ? true : filledVertices[vertexID] != null)) {\n if (currentComp[vertexID] == null) {\n currentComp[vertexID] = vertex;\n }\n if (filledVertices != null) {\n delete filledVertices[vertexID];\n }\n var edges = this.getEdges(vertex);\n var edgeIsSource = [];\n for (var i = 0; i < edges.length; i++) {\n edgeIsSource[i] = this.getVisibleTerminal(edges[i], true) === vertex;\n }\n for (var i = 0; i < edges.length; i++) {\n if (!directed || edgeIsSource[i]) {\n var next = this.getVisibleTerminal(edges[i], !edgeIsSource[i]);\n var netCount = 1;\n for (var j = 0; j < edges.length; j++) {\n if (j === i) {\n continue;\n }\n else {\n var isSource2 = edgeIsSource[j];\n var otherTerm = this.getVisibleTerminal(edges[j], !isSource2);\n if (otherTerm === next) {\n if (isSource2) {\n netCount++;\n }\n else {\n netCount--;\n }\n }\n }\n }\n if (netCount >= 0) {\n currentComp = this.traverse(next, directed, edges[i], currentComp, hierarchyVertices, filledVertices);\n }\n }\n }\n }\n else {\n if (currentComp[vertexID] == null) {\n // We've seen this vertex before, but not in the current component This component and the one it's in need to be merged\n for (var i = 0; i < hierarchyVertices.length; i++) {\n var comp = hierarchyVertices[i];\n if (comp[vertexID] != null) {\n for (var _i = 0, _a = Object.keys(comp); _i < _a.length; _i++) {\n var key = _a[_i];\n currentComp[key] = comp[key];\n }\n // Remove the current component from the hierarchy set\n hierarchyVertices.splice(i, 1);\n return currentComp;\n }\n }\n }\n }\n }\n return currentComp;\n };\n /**\n * Returns the bounds of the given vertices\n */\n HierarchicalLayoutUtil.prototype.getModelBounds = function (nodes) {\n nodes = nodes.slice();\n var rect = null;\n var rect1 = null;\n for (var i = 0; i < nodes.length; i++) {\n rect = nodes[i].geometry;\n if (rect1) {\n var right = Math.max(rect1.x + rect1.width, rect.x + rect.width);\n var bottom = Math.max(rect1.y + rect1.height, rect.y + rect.height);\n rect1.x = Math.min(rect1.x, rect.x);\n rect1.y = Math.min(rect1.y, rect.y);\n rect1.width = right - rect1.x;\n rect1.height = bottom - rect1.y;\n }\n else {\n rect1 = { x: rect.x, y: rect.y, width: rect.width, height: rect.height };\n }\n }\n return rect1;\n };\n /**\n * Initializes the layouting process\n * @private\n */\n HierarchicalLayoutUtil.prototype.doLayout = function (nodes, nameTable, layoutProp, viewPort) {\n this.nameTable = nameTable;\n var layout = {\n horizontalSpacing: layoutProp.horizontalSpacing, verticalSpacing: layoutProp.verticalSpacing,\n orientation: layoutProp.orientation, marginX: layoutProp.margin.left, marginY: layoutProp.margin.top\n };\n if (layout.orientation === 'BottomToTop') {\n layout.marginY = -layoutProp.margin.top;\n }\n else if (layout.orientation === 'RightToLeft') {\n layout.marginX = -layoutProp.margin.left;\n }\n this.vertices = [];\n var filledVertexSet = {};\n for (var i = 0; i < nodes.length; i++) {\n var node = this.createVertex(nodes[i], nodes[i].id, 0, 0, nodes[i].actualSize.width, nodes[i].actualSize.height);\n this.vertices.push(node);\n filledVertexSet[node.name] = node;\n }\n var hierarchyVertices = [];\n var candidateRoots;\n candidateRoots = this.findRoots(filledVertexSet);\n for (var i = 0; i < candidateRoots.length; i++) {\n var vertexSet = {};\n hierarchyVertices.push(vertexSet);\n this.traverse(candidateRoots[i], true, null, vertexSet, hierarchyVertices, filledVertexSet);\n }\n var limit = { marginX: 0, marginY: 0 };\n for (var i = 0; i < hierarchyVertices.length; i++) {\n var vertexSet = hierarchyVertices[i];\n var tmp = [];\n for (var _i = 0, _a = Object.keys(vertexSet); _i < _a.length; _i++) {\n var key = _a[_i];\n tmp.push(vertexSet[key]);\n }\n var model = new MultiParentModel(this, tmp, candidateRoots, layout);\n this.cycleStage(model);\n this.layeringStage(model);\n this.crossingStage(model);\n limit = this.placementStage(model, limit.marginX, limit.marginY);\n }\n var modelBounds = this.getModelBounds(this.vertices);\n var trnsX = (viewPort.x - modelBounds.width) / 2;\n for (var i = 0; i < this.vertices.length; i++) {\n var clnode = this.vertices[i];\n if (clnode) {\n var dnode = this.nameTable[clnode.name];\n dnode.offsetX = 0;\n dnode.offsetY = 0;\n //initialize layout\n var dx = (clnode.geometry.x - (dnode.offsetX - (dnode.actualSize.width / 2))) + layout.marginX;\n var dy = (clnode.geometry.y - (dnode.offsetY - (dnode.actualSize.height / 2))) + layout.marginY;\n var x = dx;\n var y = dy;\n if (layout.orientation === 'BottomToTop') {\n y = modelBounds.height - dy;\n }\n else if (layout.orientation === 'RightToLeft') {\n x = modelBounds.width - dx;\n }\n x += trnsX;\n dnode.offsetX += x - dnode.offsetX;\n dnode.offsetY += y - dnode.offsetY;\n }\n }\n };\n /**\n * Handles positioning the nodes\n */\n HierarchicalLayoutUtil.prototype.placementStage = function (model, marginX, marginY) {\n var placementStage = this.coordinateAssignment(marginX, marginY, parent, model);\n placementStage.model = model;\n placementStage.widestRankValue = null;\n this.placementStageExecute(placementStage);\n return {\n marginX: placementStage.marginX + model.layout.horizontalSpacing,\n marginY: placementStage.marginY + model.layout.verticalSpacing\n };\n };\n /**\n * Initializes the layout properties for positioning\n */\n HierarchicalLayoutUtil.prototype.coordinateAssignment = function (marginX, marginY, parent, model) {\n var plalementChange = {};\n if (model.layout.orientation === 'TopToBottom' || model.layout.orientation === 'BottomToTop') {\n plalementChange.horizontalSpacing = model.layout.horizontalSpacing;\n plalementChange.verticalSpacing = model.layout.verticalSpacing;\n }\n else {\n plalementChange.horizontalSpacing = model.layout.verticalSpacing;\n plalementChange.verticalSpacing = model.layout.horizontalSpacing;\n }\n plalementChange.orientation = 'north';\n //Removed the conditions here. So check here in case of any issue\n plalementChange.marginX = plalementChange.marginX = marginX;\n plalementChange.marginY = plalementChange.marginY = marginY;\n return plalementChange;\n };\n /**\n * Calculate the largest size of the node either height or width depends upon the layoutorientation\n */\n HierarchicalLayoutUtil.prototype.calculateWidestRank = function (plalementChange, graph, model) {\n var isHorizontal = false;\n if (plalementChange.model.layout.orientation === 'LeftToRight' || plalementChange.model.layout.orientation === 'RightToLeft') {\n isHorizontal = true;\n }\n var offset = -plalementChange.verticalSpacing;\n var lastRankMaxCellSize = 0.0;\n plalementChange.rankSizes = [];\n plalementChange.rankOffset = [];\n for (var rankValue = model.maxRank; rankValue >= 0; rankValue--) {\n var maxCellSize = 0.0;\n var rank = model.ranks[rankValue];\n var localOffset = isHorizontal ? plalementChange.marginY : plalementChange.marginX;\n for (var i = 0; i < rank.length; i++) {\n var node = rank[i];\n if (this.crossReduction.isVertex(node)) {\n var vertex = node;\n if (vertex.cell && (vertex.cell.inEdges || vertex.cell.outEdges)) {\n var obj = this.nameTable[vertex.cell.name];\n vertex.width = obj.actualSize.width;\n vertex.height = obj.actualSize.height;\n maxCellSize = Math.max(maxCellSize, (isHorizontal ? vertex.width : vertex.height));\n }\n }\n else {\n if (node) {\n var edge = node;\n var numEdges = 1;\n if (edge.edges != null) {\n numEdges = edge.edges.length;\n }\n node.width = (numEdges - 1) * 10;\n }\n }\n if (isHorizontal) {\n if (!node.height) {\n node.height = 0;\n }\n }\n // Set the initial x-value as being the best result so far\n localOffset += (isHorizontal ? node.height : node.width) / 2.0;\n this.setXY(node, rankValue, localOffset, isHorizontal ? true : false);\n this.setTempVariable(node, rankValue, localOffset);\n localOffset += ((isHorizontal ? node.height : node.width) / 2.0) + plalementChange.horizontalSpacing;\n if (localOffset > plalementChange.widestRankValue) {\n plalementChange.widestRankValue = localOffset;\n plalementChange.widestRank = rankValue;\n }\n plalementChange.rankSizes[rankValue] = localOffset;\n }\n plalementChange.rankOffset[rankValue] = offset;\n var distanceToNextRank = maxCellSize / 2.0 + lastRankMaxCellSize / 2.0 + plalementChange.verticalSpacing;\n lastRankMaxCellSize = maxCellSize;\n if (plalementChange.orientation === 'north' || plalementChange.orientation === 'west') {\n offset += distanceToNextRank;\n }\n else {\n offset -= distanceToNextRank;\n }\n for (var i = 0; i < rank.length; i++) {\n var cell = rank[i];\n this.setXY(cell, rankValue, offset, isHorizontal ? false : true);\n }\n }\n };\n /**\n * Sets the temp position of the node on the layer\n * @private\n */\n HierarchicalLayoutUtil.prototype.setTempVariable = function (node, layer, value) {\n if (this.crossReduction.isVertex(node)) {\n node.temp[0] = value;\n }\n else {\n node.temp[layer - node.minRank - 1] = value;\n }\n };\n /**\n * Sets the position of the vertex\n * @private\n */\n HierarchicalLayoutUtil.prototype.setXY = function (node, layer, value, isY) {\n if (node && node.cell) {\n if (node.cell.inEdges || node.cell.outEdges) {\n if (isY) {\n node.y[0] = value;\n }\n else {\n node.x[0] = value;\n }\n }\n else {\n if (isY) {\n node.y[layer - node.minRank - 1] = value;\n }\n else {\n node.x[layer - node.minRank - 1] = value;\n }\n }\n }\n };\n /**\n * Sets geometry position of the layout node on the layout model\n */\n HierarchicalLayoutUtil.prototype.rankCoordinates = function (stage, rankValue, graph, model) {\n var isHorizontal = false;\n if (stage.model.layout.orientation === 'LeftToRight' || stage.model.layout.orientation === 'RightToLeft') {\n isHorizontal = true;\n }\n var rank = model.ranks[rankValue];\n var maxOffset = 0.0;\n var localOffset = (isHorizontal ? stage.marginY : stage.marginX) + (stage.widestRankValue - stage.rankSizes[rankValue]) / 2;\n for (var i = 0; i < rank.length; i++) {\n var node = rank[i];\n if (this.crossReduction.isVertex(node)) {\n var obj = this.nameTable[node.cell.name];\n node.width = obj.actualSize.width;\n node.height = obj.actualSize.height;\n maxOffset = Math.max(maxOffset, node.height);\n }\n else {\n var edge = node;\n var numEdges = 1;\n if (edge.edges != null) {\n numEdges = edge.edges.length;\n }\n if (isHorizontal) {\n node.height = (numEdges - 1) * 10;\n }\n else {\n node.width = (numEdges - 1) * 10;\n }\n }\n var size = (isHorizontal ? node.height : node.width) / 2.0;\n localOffset += size;\n this.setXY(node, rankValue, localOffset, isHorizontal ? true : false);\n this.setTempVariable(node, rankValue, localOffset);\n localOffset += (size + stage.horizontalSpacing);\n }\n };\n /**\n * sets the layout in an initial positioning.it will arange all the ranks as much as possible\n */\n HierarchicalLayoutUtil.prototype.initialCoords = function (plalementChange, facade, model) {\n this.calculateWidestRank(plalementChange, facade, model);\n // Reverse sweep direction each time from widest rank \n for (var i = plalementChange.widestRank; i >= 0; i--) {\n if (i < model.maxRank) {\n this.rankCoordinates(plalementChange, i, facade, model);\n }\n }\n for (var i = plalementChange.widestRank + 1; i <= model.maxRank; i++) {\n if (i > 0) {\n this.rankCoordinates(plalementChange, i, facade, model);\n }\n }\n };\n /**\n * Checks whether the given node is an ancestor\n * @private\n */\n HierarchicalLayoutUtil.prototype.isAncestor = function (node, otherNode) {\n // Firstly, the hash code of this node needs to be shorter than the other node\n if (otherNode != null && node.hashCode != null && otherNode.hashCode != null\n && node.hashCode.length < otherNode.hashCode.length) {\n if (node.hashCode === otherNode.hashCode) {\n return true;\n }\n if (node.hashCode == null || node.hashCode == null) {\n return false;\n }\n for (var i = 0; i < node.hashCode.length; i++) {\n if (node.hashCode[i] !== otherNode.hashCode[i]) {\n return false;\n }\n }\n return true;\n }\n return false;\n };\n /**\n * initializes the sorter object\n */\n HierarchicalLayoutUtil.prototype.weightedCellSorter = function (cell, weightedValue) {\n var weightedCellSorter = {};\n weightedCellSorter.cell = cell ? cell : null;\n weightedCellSorter.weightedValue = weightedValue ? weightedValue : 0;\n weightedCellSorter.visited = false;\n weightedCellSorter.rankIndex = null;\n return weightedCellSorter;\n };\n /**\n * Performs one node positioning in both directions\n */\n HierarchicalLayoutUtil.prototype.minNode = function (plalementChange, model) {\n var nodeList = [];\n var map = { map: {} };\n var rank = [];\n for (var i = 0; i <= model.maxRank; i++) {\n rank[i] = model.ranks[i];\n for (var j = 0; j < rank[i].length; j++) {\n var node = rank[i][j];\n var nodeWrapper = this.weightedCellSorter(node, i);\n nodeWrapper.rankIndex = j;\n nodeWrapper.visited = true;\n nodeList.push(nodeWrapper);\n model.setDictionaryForSorter(map, node, nodeWrapper, true);\n }\n }\n var maxTries = nodeList.length * 10;\n var count = 0;\n var tolerance = 1;\n while (nodeList.length > 0 && count <= maxTries) {\n var cellWrapper = nodeList.shift();\n var cell = cellWrapper.cell;\n var rankValue = cellWrapper.weightedValue;\n var rankIndex = cellWrapper.rankIndex;\n var nextLayerConnectedCells = this.crossReduction.getConnectedCellsOnLayer(cell, rankValue);\n var previousLayerConnectedCells = this.crossReduction.getConnectedCellsOnLayer(cell, rankValue, true);\n var nextConnectedCount = nextLayerConnectedCells.length;\n var prevConnectedCount = previousLayerConnectedCells.length;\n var medianNextLevel = this.medianXValue(plalementChange, nextLayerConnectedCells, rankValue + 1);\n var medianPreviousLevel = this.medianXValue(plalementChange, previousLayerConnectedCells, rankValue - 1);\n var numConnectedNeighbours = nextConnectedCount + prevConnectedCount;\n var currentPosition = this.crossReduction.getTempVariable(cell, rankValue);\n var cellMedian = currentPosition;\n if (numConnectedNeighbours > 0) {\n cellMedian = (medianNextLevel * nextConnectedCount + medianPreviousLevel * prevConnectedCount) / numConnectedNeighbours;\n }\n var positionChanged = false;\n var tempValue = undefined;\n if (cellMedian < currentPosition - tolerance) {\n if (rankIndex === 0) {\n tempValue = cellMedian;\n positionChanged = true;\n }\n else {\n var leftCell = rank[rankValue][rankIndex - 1];\n var leftLimit = this.crossReduction.getTempVariable(leftCell, rankValue);\n leftLimit = leftLimit + leftCell.width / 2 + plalementChange.intraCellSpacing + cell.width / 2;\n if (leftLimit < cellMedian) {\n tempValue = cellMedian;\n positionChanged = true;\n }\n else if (leftLimit < this.crossReduction.getTempVariable(cell, rankValue) - tolerance) {\n tempValue = leftLimit;\n positionChanged = true;\n }\n }\n }\n else if (cellMedian > currentPosition + tolerance) {\n var rankSize = rank[rankValue].length;\n if (rankIndex === rankSize - 1) {\n tempValue = cellMedian;\n positionChanged = true;\n }\n else {\n var rightCell = rank[rankValue][rankIndex + 1];\n var rightLimit = this.crossReduction.getTempVariable(rightCell, rankValue);\n rightLimit = rightLimit - rightCell.width / 2 - plalementChange.intraCellSpacing - cell.width / 2;\n if (rightLimit > cellMedian) {\n tempValue = cellMedian;\n positionChanged = true;\n }\n else if (rightLimit > this.crossReduction.getTempVariable(cell, rankValue) + tolerance) {\n tempValue = rightLimit;\n positionChanged = true;\n }\n }\n }\n if (positionChanged) {\n this.setTempVariable(cell, rankValue, tempValue);\n // Add connected nodes to map and list\n this.updateNodeList(nodeList, map, nextLayerConnectedCells, model);\n this.updateNodeList(nodeList, map, previousLayerConnectedCells, model);\n }\n if (this.crossReduction.isVertex(cellWrapper.cell)) {\n cellWrapper.visited = false;\n }\n count++;\n }\n };\n /**\n * Updates the ndoes collection\n */\n HierarchicalLayoutUtil.prototype.updateNodeList = function (nodeList, map, collection, model) {\n for (var i = 0; i < collection.length; i++) {\n var connectedCell = collection[i];\n var connectedCellWrapper = model.getDictionaryForSorter(map, connectedCell);\n if (connectedCellWrapper != null) {\n if (connectedCellWrapper.visited === false) {\n connectedCellWrapper.visited = true;\n nodeList.push(connectedCellWrapper);\n }\n }\n }\n };\n /**\n * Calculates the node position of the connected cell on the specified rank\n */\n HierarchicalLayoutUtil.prototype.medianXValue = function (plalementChange, connectedCells, rankValue) {\n if (connectedCells.length === 0) {\n return 0;\n }\n var medianValues = [];\n for (var i = 0; i < connectedCells.length; i++) {\n medianValues[i] = this.crossReduction.getTempVariable(connectedCells[i], rankValue);\n }\n medianValues.sort(function (a, b) {\n return a - b;\n });\n if (connectedCells.length % 2 === 1) {\n return medianValues[Math.floor(connectedCells.length / 2)];\n }\n else {\n var medianPoint = connectedCells.length / 2;\n var leftMedian = medianValues[medianPoint - 1];\n var rightMedian = medianValues[medianPoint];\n return ((leftMedian + rightMedian) / 2);\n }\n };\n /**\n * Updates the geometry of the vertices\n */\n HierarchicalLayoutUtil.prototype.placementStageExecute = function (plalementChange) {\n var isHorizontal = false;\n if (plalementChange.model.layout.orientation === 'LeftToRight' || plalementChange.model.layout.orientation === 'RightToLeft') {\n isHorizontal = true;\n }\n plalementChange.jettyPositions = {};\n var model = plalementChange.model;\n isHorizontal ? plalementChange.currentYDelta = 0.0 : plalementChange.currentXDelta = 0.0;\n this.initialCoords(plalementChange, { model: model }, model);\n this.minNode(plalementChange, model);\n var bestOffsetDelta = 100000000.0;\n if (!plalementChange.maxIterations) {\n plalementChange.maxIterations = 8;\n }\n for (var i = 0; i < plalementChange.maxIterations; i++) {\n // if the total offset is less for the current positioning, \n //there are less heavily angled edges and so the current positioning is used\n if ((isHorizontal ? plalementChange.currentYDelta : plalementChange.currentXDelta) < bestOffsetDelta) {\n for (var j = 0; j < model.ranks.length; j++) {\n var rank = model.ranks[j];\n for (var k = 0; k < rank.length; k++) {\n var cell = rank[k];\n this.setXY(cell, j, this.crossReduction.getTempVariable(cell, j), isHorizontal ? true : false);\n }\n }\n bestOffsetDelta = isHorizontal ? plalementChange.currentYDelta : plalementChange.currentXDelta;\n }\n isHorizontal ? plalementChange.currentYDelta = 0 : plalementChange.currentXDelta = 0;\n }\n this.setCellLocations(plalementChange, model);\n };\n /**\n * sets the cell position in the after the layout operation\n */\n HierarchicalLayoutUtil.prototype.setCellLocations = function (plalementChange, model) {\n var vertices = this.getValues(model.vertexMapper);\n for (var i = 0; i < vertices.length; i++) {\n this.setVertexLocation(plalementChange, vertices[i]);\n }\n };\n /**\n * used to specify the geometrical position of the layout model cell\n */\n HierarchicalLayoutUtil.prototype.garphModelsetVertexLocation = function (plalementChange, cell, x, y) {\n var model = plalementChange.model;\n var geometry = cell.geometry;\n var result = null;\n if (geometry != null) {\n result = { x: x, y: y, width: geometry.width, height: geometry.height };\n if (geometry.x !== x || geometry.y !== y) {\n cell.geometry = result;\n }\n }\n return result;\n };\n /**\n * set the position of the specified node\n */\n HierarchicalLayoutUtil.prototype.setVertexLocation = function (plalementChange, cell) {\n var isHorizontal = false;\n if (plalementChange.model.layout.orientation === 'LeftToRight' || plalementChange.model.layout.orientation === 'RightToLeft') {\n isHorizontal = true;\n }\n var realCell = cell.cell;\n var positionX = cell.x[0] - cell.width / 2;\n var positionY = cell.y[0] - cell.height / 2;\n this.garphModelsetVertexLocation(plalementChange, realCell, positionX, positionY);\n if (isHorizontal) {\n if (!plalementChange.marginY) {\n plalementChange.marginY = 0;\n }\n plalementChange.marginY = Math.max(plalementChange.marginY, positionY + cell.height);\n }\n else {\n if (!plalementChange.marginX) {\n plalementChange.marginX = 0;\n }\n plalementChange.marginX = Math.max(plalementChange.marginX, positionX + cell.width);\n }\n };\n /**\n * get the specific value from the key value pair\n */\n HierarchicalLayoutUtil.prototype.getValues = function (mapper) {\n var list = [];\n if (mapper.map) {\n for (var _i = 0, _a = Object.keys(mapper.map); _i < _a.length; _i++) {\n var key = _a[_i];\n list.push(mapper.map[key]);\n }\n }\n return list;\n };\n /**\n * Checks and reduces the crosses in between line segments\n */\n HierarchicalLayoutUtil.prototype.crossingStage = function (model) {\n this.crossReduction.execute(model);\n };\n /**\n * Initializes the ranks of the vertices\n */\n HierarchicalLayoutUtil.prototype.layeringStage = function (model) {\n this.initialRank(model);\n this.fixRanks(model);\n };\n /**\n * determine the initial rank for the each vertex on the relevent direction\n */\n HierarchicalLayoutUtil.prototype.initialRank = function (model) {\n var startNodes = model.startNodes;\n var internalNodes = model.getDictionaryValues(model.vertexMapper);\n var startNodesCopy = startNodes.slice();\n while (startNodes.length > 0) {\n var internalNode = startNodes[0];\n var layerDeterminingEdges = internalNode.connectsAsTarget;\n var edgesToBeMarked = internalNode.connectsAsSource;\n var allEdgesScanned = true;\n var minimumLayer = 100000000;\n for (var i = 0; i < layerDeterminingEdges.length; i++) {\n var internalEdge = layerDeterminingEdges[i];\n if (internalEdge.temp[0] === 5270620) {\n // This edge has been scanned, get the layer of the node on the other end\n var otherNode = internalEdge.source;\n minimumLayer = Math.min(minimumLayer, otherNode.temp[0] - 1);\n }\n else {\n allEdgesScanned = false;\n break;\n }\n }\n // If all edge have been scanned, assign the layer, mark all edges in the other direction and remove from the nodes list\n if (allEdgesScanned) {\n internalNode.temp[0] = minimumLayer;\n if (!model.maxRank) {\n model.maxRank = 100000000;\n }\n model.maxRank = Math.min(model.maxRank, minimumLayer);\n if (edgesToBeMarked != null) {\n for (var i = 0; i < edgesToBeMarked.length; i++) {\n var internalEdge = edgesToBeMarked[i];\n internalEdge.temp[0] = 5270620;\n // Add node on other end of edge to LinkedList of nodes to be analysed\n var otherNode = internalEdge.target;\n // Only add node if it hasn't been assigned a layer\n if (otherNode.temp[0] === -1) {\n startNodes.push(otherNode);\n // Mark this other node as neither being unassigned nor assigned \n //so it isn't added to this list again, but it's layer isn't used in any calculation.\n otherNode.temp[0] = -2;\n }\n }\n }\n startNodes.shift();\n }\n else {\n // Not all the edges have been scanned, get to the back of the class and put the dunces cap on\n var removedCell = startNodes.shift();\n startNodes.push(internalNode);\n if (removedCell === internalNode && startNodes.length === 1) {\n // This is an error condition, we can't get out of this loop. \n //It could happen for more than one node but that's a lot harder to detect. Log the error\n break;\n }\n }\n }\n for (var i = 0; i < internalNodes.length; i++) {\n internalNodes[i].temp[0] -= model.maxRank;\n }\n for (var i = 0; i < startNodesCopy.length; i++) {\n var internalNode = startNodesCopy[i];\n var currentMaxLayer = 0;\n var layerDeterminingEdges = internalNode.connectsAsSource;\n for (var j = 0; j < layerDeterminingEdges.length; j++) {\n var internalEdge = layerDeterminingEdges[j];\n var otherNode = internalEdge.target;\n internalNode.temp[0] = Math.max(currentMaxLayer, otherNode.temp[0] + 1);\n currentMaxLayer = internalNode.temp[0];\n }\n }\n model.maxRank = 100000000 - model.maxRank;\n };\n /**\n * used to set the optimum value of each vertex on the layout\n */\n HierarchicalLayoutUtil.prototype.fixRanks = function (model) {\n model.fixRanks();\n };\n /**\n * used to determine any cyclic stage have been created on the layout model\n */\n HierarchicalLayoutUtil.prototype.cycleStage = function (model) {\n var seenNodes = {};\n model.startNodes = [];\n var unseenNodesArray = model.getDictionaryValues(model.vertexMapper);\n var unseenNodes = [];\n for (var i = 0; i < unseenNodesArray.length; i++) {\n unseenNodesArray[i].temp[0] = -1;\n unseenNodes[unseenNodesArray[i].id] = unseenNodesArray[i];\n }\n var rootsArray = null;\n if (model.roots != null) {\n var modelRoots = model.roots;\n rootsArray = [];\n for (var i = 0; i < modelRoots.length; i++) {\n rootsArray[i] = model.getDictionary(model.vertexMapper, modelRoots[i]);\n if (rootsArray[i] != null) {\n model.startNodes.push(rootsArray[i]);\n }\n }\n }\n model.visit('removeParentConnection', rootsArray, true, null, { seenNodes: seenNodes, unseenNodes: unseenNodes });\n var seenNodesCopy = model.clone(seenNodes, null, true);\n model.visit('removeNodeConnection', unseenNodes, true, seenNodesCopy, { seenNodes: seenNodes, unseenNodes: unseenNodes });\n };\n /**\n * removes the edge from the given collection\n * @private\n */\n HierarchicalLayoutUtil.prototype.remove = function (obj, array) {\n var index = array.indexOf(obj);\n if (index !== -1) {\n array.splice(index, 1);\n }\n return obj;\n };\n /**\n * Inverts the source and target of an edge\n * @private\n */\n HierarchicalLayoutUtil.prototype.invert = function (connectingEdge, layer) {\n var temp = connectingEdge.source;\n connectingEdge.source = connectingEdge.target;\n connectingEdge.target = temp;\n connectingEdge.isReversed = !connectingEdge.isReversed;\n };\n /**\n * used to get the edges between the given source and target\n * @private\n */\n HierarchicalLayoutUtil.prototype.getEdgesBetween = function (source, target, directed) {\n directed = (directed != null) ? directed : false;\n var edges = this.getEdges(source);\n var result = [];\n for (var i = 0; i < edges.length; i++) {\n var src = this.getVisibleTerminal(edges[i], true);\n var trg = this.getVisibleTerminal(edges[i], false);\n if ((src === source && trg === target) || (!directed && src === target && trg === source)) {\n result.push(edges[i]);\n }\n }\n return result;\n };\n return HierarchicalLayoutUtil;\n}());\n/**\n * Handles position the objects in a hierarchical tree structure\n */\nvar MultiParentModel = /** @class */ (function () {\n function MultiParentModel(layout, vertices, roots, dlayout) {\n this.multiObjectIdentityCounter = 0;\n //used to count the no of times the parent have been used\n this.dfsCount = 0;\n this.hierarchicalUtil = new HierarchicalLayoutUtil();\n this.roots = roots;\n this.vertexMapper = { map: {} };\n var internalVertices = [];\n this.layout = dlayout;\n this.maxRank = 100000000;\n this.hierarchicalLayout = layout;\n this.createInternalCells(layout, vertices, internalVertices);\n for (var i = 0; i < vertices.length; i++) {\n var edges = internalVertices[i].connectsAsSource;\n for (var j = 0; j < edges.length; j++) {\n var internalEdge = edges[j];\n var realEdges = internalEdge.edges;\n if (realEdges != null && realEdges.length > 0) {\n var realEdge = realEdges[0];\n var targetCell = layout.getVisibleTerminal(realEdge, false);\n var internalTargetCell = this.getDictionary(this.vertexMapper, targetCell);\n if (internalVertices[i] === internalTargetCell) {\n targetCell = layout.getVisibleTerminal(realEdge, true);\n internalTargetCell = this.getDictionary(this.vertexMapper, targetCell);\n }\n if (internalTargetCell != null && internalVertices[i] !== internalTargetCell) {\n internalEdge.target = internalTargetCell;\n if (internalTargetCell.connectsAsTarget.length === 0) {\n internalTargetCell.connectsAsTarget = [];\n }\n if (internalTargetCell.connectsAsTarget.indexOf(internalEdge) < 0) {\n internalTargetCell.connectsAsTarget.push(internalEdge);\n }\n }\n }\n }\n internalVertices[i].temp[0] = 1;\n }\n }\n /**\n * used to create the duplicate of the edges on the layout model\n */\n MultiParentModel.prototype.createInternalCells = function (layout, vertices, internalVertices) {\n for (var i = 0; i < vertices.length; i++) {\n internalVertices[i] = {\n x: [], y: [], temp: [], cell: vertices[i],\n id: vertices[i].name, connectsAsTarget: [], connectsAsSource: []\n };\n this.setDictionary(this.vertexMapper, vertices[i], internalVertices[i]);\n var conns = layout.getEdges(vertices[i]);\n internalVertices[i].connectsAsSource = [];\n for (var j = 0; j < conns.length; j++) {\n var cell = layout.getVisibleTerminal(conns[j], false);\n if (cell !== vertices[i]) {\n var undirectedEdges = layout.getEdgesBetween(vertices[i], cell, false);\n var directedEdges = layout.getEdgesBetween(vertices[i], cell, true);\n if (undirectedEdges != null && undirectedEdges.length > 0 && directedEdges.length * 2 >= undirectedEdges.length) {\n var internalEdge = { x: [], y: [], temp: [], edges: undirectedEdges, ids: [] };\n for (var m = 0; m < undirectedEdges.length; m++) {\n internalEdge.ids.push(undirectedEdges[m].id);\n }\n internalEdge.source = internalVertices[i];\n if (!internalVertices[i].connectsAsSource) {\n internalVertices[i].connectsAsSource = [];\n }\n if (internalVertices[i].connectsAsSource.indexOf(internalEdge) < 0) {\n internalVertices[i].connectsAsSource.push(internalEdge);\n }\n }\n }\n }\n internalVertices[i].temp[0] = 0;\n }\n };\n /**\n * used to set the optimum value of each vertex on the layout\n * @private\n */\n MultiParentModel.prototype.fixRanks = function () {\n var rankList = [];\n this.ranks = [];\n for (var i = 0; i < this.maxRank + 1; i++) {\n rankList[i] = [];\n this.ranks[i] = rankList[i];\n }\n var rootsArray = null;\n if (this.roots != null) {\n var oldRootsArray = this.roots;\n rootsArray = [];\n for (var i = 0; i < oldRootsArray.length; i++) {\n var cell = oldRootsArray[i];\n var internalNode = this.getDictionary(this.vertexMapper, cell);\n rootsArray[i] = internalNode;\n }\n }\n this.visit('updateMinMaxRank', rootsArray, false, null, { seenNodes: null, unseenNodes: null, rankList: rankList });\n };\n /**\n * Updates the min/max rank of the layer\n */\n MultiParentModel.prototype.updateMinMaxRank = function (layer, seen, data) {\n var seenNodes = data.seenNodes;\n var unseenNodes = data.unseenNodes;\n var parent = data.parent;\n var node = data.root;\n var edge = data.edge;\n var rankList = data.rankList;\n if (!node.maxRank && node.maxRank !== 0) {\n node.maxRank = -1;\n }\n if (!node.minRank && node.minRank !== 0) {\n node.minRank = -1;\n }\n if (seen === 0 && node.maxRank < 0 && node.minRank < 0) {\n rankList[node.temp[0]].push(node);\n node.maxRank = node.temp[0];\n node.minRank = node.temp[0];\n node.temp[0] = rankList[node.maxRank].length - 1;\n }\n if (parent != null && edge != null) {\n var parentToCellRankDifference = parent.maxRank - node.maxRank;\n if (parentToCellRankDifference > 1) {\n edge.maxRank = parent.maxRank;\n edge.minRank = node.maxRank;\n edge.temp = [];\n edge.x = [];\n edge.y = [];\n for (var i = edge.minRank + 1; i < edge.maxRank; i++) {\n rankList[i].push(edge);\n this.hierarchicalUtil.setTempVariable(edge, i, rankList[i].length - 1);\n }\n }\n }\n };\n /**\n * used to store the value of th given key on the object\n */\n MultiParentModel.prototype.setDictionary = function (dic, key, value) {\n var id = key.name;\n if (!id) {\n // id = this._getDictionary(dic, key);\n }\n var previous = dic.map[id];\n dic.map[id] = value;\n return previous;\n };\n /**\n * used to store the value of th given key on the object\n * @private\n */\n MultiParentModel.prototype.setDictionaryForSorter = function (dic, key, value, flag) {\n var id = key.id;\n if (!id) {\n //id = this._getDictionaryForSorter(dic, key);\n }\n var previous = dic.map[id];\n dic.map[id] = value;\n return previous;\n };\n /**\n * used to get the value of the given key\n * @private\n */\n MultiParentModel.prototype.getDictionary = function (dic, key) {\n if (!this.multiObjectIdentityCounter && this.multiObjectIdentityCounter !== 0) {\n this.multiObjectIdentityCounter = 0;\n }\n var id = key.name;\n if (!id) {\n if (!key.layoutObjectId) {\n key.layoutObjectId = 'graphHierarchyNode#' + this.multiObjectIdentityCounter++;\n return key.layoutObjectId;\n }\n else {\n return dic.map[key.layoutObjectId];\n }\n }\n return dic.map[id];\n };\n /**\n * used to get the value of the given key\n * @private\n */\n MultiParentModel.prototype.getDictionaryForSorter = function (dic, key) {\n if (!this.multiObjectIdentityCounter && this.multiObjectIdentityCounter !== 0) {\n this.multiObjectIdentityCounter = 0;\n }\n var id = key.id;\n if (!id) {\n if (!key.layoutObjectId) {\n key.layoutObjectId = 'graphHierarchyNode#' + this.multiObjectIdentityCounter++;\n return key.layoutObjectId;\n }\n else {\n return dic.map[key.layoutObjectId];\n }\n }\n return dic.map[id];\n };\n /**\n * used to get all the values of the dictionary object\n * @private\n */\n MultiParentModel.prototype.getDictionaryValues = function (dic) {\n var result = [];\n for (var _i = 0, _a = Object.keys(dic.map); _i < _a.length; _i++) {\n var key = _a[_i];\n result.push(dic.map[key]);\n }\n return result;\n };\n /**\n * used to visit all the entries on the given dictionary with given function\n * @private\n */\n MultiParentModel.prototype.visit = function (visitor, dfsRoots, trackAncestors, seenNodes, data) {\n var seenNodes1 = data.seenNodes;\n var unseenNodes1 = data.unseenNodes;\n var rankList = data.rankList;\n // Run depth first search through on all roots\n if (dfsRoots != null) {\n for (var i = 0; i < dfsRoots.length; i++) {\n var internalNode = dfsRoots[i];\n if (internalNode != null) {\n if (seenNodes == null) {\n seenNodes = new Object();\n }\n data.parent = null;\n data.root = internalNode;\n data.edge = null;\n if (trackAncestors) {\n // Set up hash code for root\n internalNode.hashCode = [];\n internalNode.hashCode[0] = this.dfsCount;\n internalNode.hashCode[1] = i;\n this.extendedDfs(visitor, seenNodes, i, 0, data);\n }\n else {\n this.depthFirstSearch(visitor, seenNodes, 0, data);\n }\n }\n }\n this.dfsCount++;\n }\n };\n /**\n * used to perform the depth fisrt search on the layout model\n */\n MultiParentModel.prototype.depthFirstSearch = function (visitor, seen, layer, data) {\n var seenNodes1 = data.seenNodes;\n var unseenNodes1 = data.unseenNodes;\n var rankList = data.rankList;\n var parent = data.parent;\n var root = data.root;\n var edge = data.edge;\n if (root != null) {\n var rootId = root.id;\n if (seen[rootId] == null) {\n seen[rootId] = root;\n this.updateConnectionRank(visitor, layer, 0, data);\n // Copy the connects as source list so that visitors can change the original for edge direction inversions\n var outgoingEdges = root.connectsAsSource.slice();\n for (var i = 0; i < outgoingEdges.length; i++) {\n var internalEdge = outgoingEdges[i];\n var targetNode = internalEdge.target;\n // Root check is O(|roots|)\n data.parent = root;\n data.root = targetNode;\n data.edge = internalEdge;\n this.depthFirstSearch(visitor, seen, layer + 1, data);\n }\n }\n else {\n this.updateConnectionRank(visitor, layer, 1, data);\n }\n }\n };\n /**\n * Updates the rank of the connection\n */\n MultiParentModel.prototype.updateConnectionRank = function (visitor, layer, seen, traversedList) {\n var parent = traversedList.parent;\n var root = traversedList.root;\n var edge = traversedList.edge;\n if (visitor === 'removeParentConnection' || visitor === 'removeNodeConnection') {\n var remove = visitor === 'removeNodeConnection' ? true : false;\n this.removeConnectionEdge(parent, root, edge, layer, traversedList, remove);\n }\n if (visitor === 'updateMinMaxRank') {\n this.updateMinMaxRank(layer, seen, traversedList);\n }\n };\n /**\n * Removes the edge from the collection\n */\n MultiParentModel.prototype.removeConnectionEdge = function (parent, node, edge, layer, data, remove) {\n var seenNodes = data.seenNodes;\n var unseenNodes = data.unseenNodes;\n var rankList = data.rankList;\n if (this.hierarchicalUtil.isAncestor(node, parent)) {\n this.hierarchicalUtil.invert(edge, 0);\n this.hierarchicalUtil.remove(edge, parent.connectsAsSource);\n if (remove) {\n node.connectsAsSource.push(edge);\n parent.connectsAsTarget.push(edge);\n this.hierarchicalUtil.remove(edge, node.connectsAsTarget);\n }\n else {\n parent.connectsAsTarget.push(edge);\n this.hierarchicalUtil.remove(edge, node.connectsAsTarget);\n node.connectsAsSource.push(edge);\n }\n }\n seenNodes[node.id] = node;\n delete unseenNodes[node.id];\n };\n /**\n * the dfs extends the default version by keeping track of cells ancestors, but it should be only used when necessary\n */\n MultiParentModel.prototype.extendedDfs = function (visitor, seen, cHash, layer, data) {\n var seenNodes = data.seenNodes;\n var unseenNodes = data.unseenNodes;\n var rankList = data.rankList;\n var parent = data.parent;\n var root = data.root;\n var edge = data.edge;\n if (root != null) {\n if (parent != null) {\n if (root.hashCode == null ||\n root.hashCode[0] !== parent.hashCode[0]) {\n var hashCodeLength = parent.hashCode.length + 1;\n root.hashCode = parent.hashCode.slice();\n root.hashCode[hashCodeLength - 1] = cHash;\n }\n }\n var rootId = root.id;\n if (seen[rootId] == null) {\n seen[rootId] = root;\n this.updateConnectionRank(visitor, layer, 0, data);\n var outgoingEdges = root.connectsAsSource.slice();\n for (var i = 0; i < outgoingEdges.length; i++) {\n var internalEdge = outgoingEdges[i];\n var targetNode = internalEdge.target;\n data.parent = root;\n data.root = targetNode;\n data.edge = internalEdge;\n this.extendedDfs(visitor, seen, i, layer + 1, data);\n }\n }\n else {\n this.updateConnectionRank(visitor, layer, 1, data);\n }\n }\n };\n /**\n * used to clone the specified object ignoring all fieldnames in the given array of transient fields\n * @private\n */\n MultiParentModel.prototype.clone = function (obj, transients, shallow) {\n shallow = (shallow != null) ? shallow : false;\n if (obj != null && typeof (obj.constructor) === 'function') {\n var clonedObj = obj.constructor();\n for (var _i = 0, _a = Object.keys(obj); _i < _a.length; _i++) {\n var i = _a[_i];\n if (i !== 'layoutObjectId' && (transients == null || transients.indexOf(i) < 0)) {\n if (!shallow && typeof (obj[i]) === 'object') {\n //not used\n // _clone[i] = $.extend(true, {}, obj[i]);\n }\n else {\n clonedObj[i] = obj[i];\n }\n }\n }\n return clonedObj;\n }\n return null;\n };\n return MultiParentModel;\n}());\n/**\n * Defines how to reduce the crosses in between the line segments\n */\nvar CrossReduction = /** @class */ (function () {\n function CrossReduction() {\n }\n /**\n * used to calculate the number of edges crossing the layout model\n * @param model\n */\n CrossReduction.prototype.calculateCrossings = function (model) {\n var numRanks = model.ranks.length;\n var totalCrossings = 0;\n for (var i = 1; i < numRanks; i++) {\n totalCrossings += this.calculateRankCrossing(i, model);\n }\n return totalCrossings;\n };\n /**\n * used to get the temp value specified for the node or connector\n * @private\n */\n CrossReduction.prototype.getTempVariable = function (node, layer) {\n if (node) {\n if (this.isVertex(node)) {\n return node.temp[0];\n }\n else {\n return node.temp[layer - node.minRank - 1];\n }\n }\n return 0;\n };\n /**\n * used to specify the number of conenctors crossing between the specified rank and its below rank\n */\n CrossReduction.prototype.calculateRankCrossing = function (i, model) {\n var totalCrossings = 0;\n var rank = model.ranks[i];\n var previousRank = model.ranks[i - 1];\n var tmpIndices = [];\n // Iterate over the top rank and fill in the connection information\n for (var j = 0; j < rank.length; j++) {\n var node = rank[j];\n var rankPosition = this.getTempVariable(node, i);\n var connectedCells = this.getConnectedCellsOnLayer(node, i, true);\n ///#### \n var nodeIndices = [];\n for (var k = 0; k < connectedCells.length; k++) {\n var connectedNode = connectedCells[k];\n var otherCellRankPosition = this.getTempVariable(connectedNode, i - 1);\n nodeIndices.push(otherCellRankPosition);\n }\n nodeIndices.sort(function (x, y) { return x - y; });\n tmpIndices[rankPosition] = nodeIndices;\n }\n var indices = [];\n for (var j = 0; j < tmpIndices.length; j++) {\n indices = indices.concat(tmpIndices[j]);\n }\n var firstIndex = 1;\n while (firstIndex < previousRank.length) {\n firstIndex <<= 1;\n }\n var treeSize = 2 * firstIndex - 1;\n firstIndex -= 1;\n var tree = [];\n for (var j = 0; j < treeSize; ++j) {\n tree[j] = 0;\n }\n for (var j = 0; j < indices.length; j++) {\n var index = indices[j];\n var treeIndex = index + firstIndex;\n ++tree[treeIndex];\n while (treeIndex > 0) {\n if (treeIndex % 2) {\n totalCrossings += tree[treeIndex + 1];\n }\n treeIndex = (treeIndex - 1) >> 1;\n ++tree[treeIndex];\n }\n }\n return totalCrossings;\n };\n /**\n * Calculates and reduces the crosses between line segments\n * @private\n */\n CrossReduction.prototype.execute = function (model) {\n // Stores initial ordering \n this.nestedBestRanks = [];\n for (var i = 0; i < model.ranks.length; i++) {\n this.nestedBestRanks[i] = model.ranks[i].slice();\n }\n var iterationsWithoutImprovement = 0;\n var currentBestCrossings = this.calculateCrossings(model);\n for (var i = 0; i < 24 && iterationsWithoutImprovement < 2; i++) {\n this.weightedMedian(i, model);\n var candidateCrossings = this.calculateCrossings(model);\n if (candidateCrossings < currentBestCrossings) {\n currentBestCrossings = candidateCrossings;\n iterationsWithoutImprovement = 0;\n for (var j = 0; j < this.nestedBestRanks.length; j++) {\n var rank = model.ranks[j];\n for (var k = 0; k < rank.length; k++) {\n var cell = rank[k];\n this.nestedBestRanks[j][cell.temp[0]] = cell;\n }\n }\n }\n else {\n // Increase count of iterations \n iterationsWithoutImprovement++;\n // Restore the best values to the cells\n for (var j = 0; j < this.nestedBestRanks.length; j++) {\n var rank = model.ranks[j];\n for (var k = 0; k < rank.length; k++) {\n var cell = rank[k];\n this.setTempVariable(cell, j, k);\n }\n }\n }\n if (currentBestCrossings === 0) {\n break;\n }\n }\n // Store the best rankings but in the model\n var ranks = [];\n var rankList = [];\n for (var i = 0; i < model.maxRank + 1; i++) {\n rankList[i] = [];\n ranks[i] = rankList[i];\n }\n for (var i = 0; i < this.nestedBestRanks.length; i++) {\n for (var j = 0; j < this.nestedBestRanks[i].length; j++) {\n rankList[i].push(this.nestedBestRanks[i][j]);\n }\n }\n model.ranks = ranks;\n };\n /**\n * check whether the object is vertext or edge on the layout model.\n * @private\n */\n CrossReduction.prototype.isVertex = function (node) {\n if (node && node.cell && (node.cell.inEdges || node.cell.outEdges)) {\n return true;\n }\n return false;\n };\n /**\n * used to move up or move down the node position on the adjacent ranks\n */\n CrossReduction.prototype.weightedMedian = function (iteration, model) {\n // Reverse sweep direction each time through this method\n var downwardSweep = (iteration % 2 === 0);\n if (downwardSweep) {\n for (var j = model.maxRank - 1; j >= 0; j--) {\n this.medianRank(j, downwardSweep);\n }\n }\n else {\n for (var j = 1; j < model.maxRank; j++) {\n this.medianRank(j, downwardSweep);\n }\n }\n };\n /**\n * used to get the node next(up) connected to the specified node or connector\n * @private\n */\n CrossReduction.prototype.getConnectedCellsOnLayer = function (cell, layer, isPrevious) {\n if (isPrevious === void 0) { isPrevious = false; }\n var connectedlayer = 'nextLayerConnectedCells';\n var connectedAs = 'connectsAsTarget';\n if (isPrevious) {\n connectedlayer = 'previousLayerConnectedCells';\n connectedAs = 'connectsAsSource';\n }\n if (cell) {\n if (this.isVertex(cell)) {\n if (cell[connectedlayer] == null) {\n cell[connectedlayer] = [];\n cell[connectedlayer][0] = [];\n for (var i = 0; i < cell[connectedAs].length; i++) {\n var edge = cell[connectedAs][i];\n if (edge.maxRank === undefined) {\n edge.maxRank = -1;\n }\n if (edge.maxRank === -1 || (isPrevious ? (edge.minRank === layer - 1) : (edge.maxRank === layer + 1))) {\n // Either edge is not in any rank or no dummy nodes in edge, add node of other side of edge\n cell[connectedlayer][0].push(isPrevious ? edge.target : edge.source);\n }\n else {\n // Edge spans at least two layers, add edge\n cell[connectedlayer][0].push(edge);\n }\n }\n }\n return cell[connectedlayer][0];\n }\n else {\n if (cell[connectedlayer] == null) {\n cell[connectedlayer] = [];\n for (var i = 0; i < cell.temp.length; i++) {\n cell[connectedlayer][i] = [];\n if (i === (isPrevious ? 0 : (cell.temp.length - 1))) {\n cell[connectedlayer][i].push(isPrevious ? cell.target : cell.source);\n }\n else {\n cell[connectedlayer][i].push(cell);\n }\n }\n }\n return cell[connectedlayer][layer - cell.minRank - 1];\n }\n }\n return null;\n };\n /**\n * calculates the rank elements on the specified rank\n * @private\n */\n CrossReduction.prototype.medianValue = function (connectedCells, rankValue) {\n var medianValues = [];\n var arrayCount = 0;\n for (var i = 0; i < connectedCells.length; i++) {\n var cell = connectedCells[i];\n medianValues[arrayCount++] = this.getTempVariable(cell, rankValue);\n }\n // sorts numerical order sort\n medianValues.sort(function (a, b) { return a - b; });\n if (arrayCount % 2 === 1) {\n // For odd numbers of adjacent vertices return the median\n return medianValues[Math.floor(arrayCount / 2)];\n }\n else if (arrayCount === 2) {\n return ((medianValues[0] + medianValues[1]) / 2.0);\n }\n else {\n var medianPoint = arrayCount / 2;\n var leftMedian = medianValues[medianPoint - 1] - medianValues[0];\n var rightMedian = medianValues[arrayCount - 1]\n - medianValues[medianPoint];\n return (medianValues[medianPoint - 1] * rightMedian + medianValues[medianPoint] * leftMedian) / (leftMedian + rightMedian);\n }\n };\n /**\n * get the temp value of the specified layer\n * @private\n */\n CrossReduction.prototype.setTempVariable = function (cell, layer, value) {\n if (cell) {\n cell.temp[0] = value;\n }\n };\n /**\n * used to minimize the node position on this rank and one of its adjacent ranks\n */\n CrossReduction.prototype.medianRank = function (rankValue, downwardSweep) {\n var numCellsForRank = this.nestedBestRanks[rankValue].length;\n var medianValues = [];\n var reservedPositions = [];\n for (var i = 0; i < numCellsForRank; i++) {\n var cell = this.nestedBestRanks[rankValue][i];\n var sorterEntry = { medianValue: 0 };\n sorterEntry.cell = cell;\n // Flip whether or not equal medians are flipped on up and down sweeps \n //TODO re-implement some kind of nudge medianValues[i].nudge = !downwardSweep;\n var nextLevelConnectedCells = void 0;\n if (downwardSweep) {\n nextLevelConnectedCells = this.getConnectedCellsOnLayer(cell, rankValue);\n }\n else {\n nextLevelConnectedCells = this.getConnectedCellsOnLayer(cell, rankValue, true);\n }\n var nextRankValue = void 0;\n downwardSweep ? nextRankValue = rankValue + 1 : nextRankValue = rankValue - 1;\n if (nextLevelConnectedCells != null && nextLevelConnectedCells.length !== 0) {\n sorterEntry.medianValue = this.medianValue(nextLevelConnectedCells, nextRankValue);\n medianValues.push(sorterEntry);\n }\n else {\n // Nodes with no adjacent vertices are flagged in the reserved array to \n //indicate they should be left in their current position.\n reservedPositions[this.getTempVariable(cell, rankValue)] = true;\n }\n }\n medianValues.sort(this.compare);\n // Set the new position of each node within the rank using its temp variable\n for (var i = 0; i < numCellsForRank; i++) {\n if (reservedPositions[i] == null) {\n var cell = medianValues.shift().cell;\n this.setTempVariable(cell, rankValue, i);\n }\n }\n };\n /**\n * compares two values, it sends the values to the compare function,\n * and sorts the values according to the returned (negative, zero, positive) value\n */\n CrossReduction.prototype.compare = function (a, b) {\n if (a != null && b != null) {\n if (b.medianValue > a.medianValue) {\n return -1;\n }\n else if (b.medianValue < a.medianValue) {\n return 1;\n }\n }\n return 0;\n };\n return CrossReduction;\n}());\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, Property, Complex, CollectionFactory, ChildProperty, Event } from '@syncfusion/ej2-base';\nimport { Browser, EventHandler, Draggable, Collection } from '@syncfusion/ej2-base';\nimport { remove, createElement } from '@syncfusion/ej2-base';\nimport { Accordion } from '@syncfusion/ej2-navigations';\nimport { Node, Connector, Shape, Size, Transform } from '../diagram/index';\nimport { DiagramRenderer, StackPanel, Margin } from '../diagram/index';\nimport { TextElement, Canvas, BpmnShape } from '../diagram/index';\nimport { SvgRenderer } from '../diagram/rendering/svg-renderer';\nimport { parentsUntil, createSvgElement, createHtmlElement, createMeasureElements } from '../diagram/utility/dom-util';\nimport { scaleElement } from '../diagram/utility/diagram-util';\nimport { getFunction } from '../diagram/utility/base-util';\nimport { getOuterBounds } from '../diagram/utility/connector';\nimport { Point } from '../diagram/primitives/point';\nimport { CanvasRenderer } from '../diagram/rendering/canvas-renderer';\nvar getObjectType = function (obj) {\n var conn = obj;\n if (conn.sourcePoint || conn.targetPoint || conn.sourceID || conn.targetID\n || conn.sourcePortID || conn.targetPortID || conn.sourceDecorator || conn.targetDecorator) {\n return Connector;\n }\n if (obj.shape && (obj.shape instanceof Shape || obj.shape.type)) {\n return Node;\n }\n return Node;\n};\n/**\n * Defines the behavior of a palette\n */\nvar Palette = /** @class */ (function (_super) {\n __extends(Palette, _super);\n function Palette() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], Palette.prototype, \"id\", void 0);\n __decorate([\n Property()\n ], Palette.prototype, \"height\", void 0);\n __decorate([\n Property(true)\n ], Palette.prototype, \"expanded\", void 0);\n __decorate([\n Property('')\n ], Palette.prototype, \"iconCss\", void 0);\n __decorate([\n Property('')\n ], Palette.prototype, \"title\", void 0);\n __decorate([\n CollectionFactory(getObjectType)\n ], Palette.prototype, \"symbols\", void 0);\n return Palette;\n}(ChildProperty));\nexport { Palette };\n/**\n * Defines the size and position of the symbol palette\n */\nvar SymbolPreview = /** @class */ (function (_super) {\n __extends(SymbolPreview, _super);\n function SymbolPreview() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property()\n ], SymbolPreview.prototype, \"width\", void 0);\n __decorate([\n Property()\n ], SymbolPreview.prototype, \"height\", void 0);\n __decorate([\n Complex({}, Point)\n ], SymbolPreview.prototype, \"offset\", void 0);\n return SymbolPreview;\n}(ChildProperty));\nexport { SymbolPreview };\n/**\n * Represents the Symbol Palette Component.\n * ```html\n *
\n * \n * ```\n */\nvar SymbolPalette = /** @class */ (function (_super) {\n __extends(SymbolPalette, _super);\n //region - protected methods \n /**\n * Constructor for creating the component\n * @hidden\n */\n function SymbolPalette(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.symbolTable = {};\n _this.info = 'info';\n /**\n * helper method for draggable\n * @return {void}\n * @private\n */\n _this.helper = function (e) {\n var clonedElement;\n var id = e.sender.target.id.split('_container')[0];\n var symbol = _this.symbolTable[id];\n if (symbol && _this.selectedSymbol) {\n _this.selectedSymbols = _this.selectedSymbol.id === symbol.id ? symbol : _this.selectedSymbol;\n var position = _this.getMousePosition(e.sender);\n clonedElement = _this.getSymbolPreview(_this.selectedSymbols, e.sender, _this.element);\n clonedElement.setAttribute('paletteId', _this.element.id);\n }\n return clonedElement;\n };\n return _this;\n }\n /**\n * Refreshes the panel when the symbol palette properties are updated\n * @param newProp Defines the new values of the changed properties\n * @param oldProp Defines the old values of the changed properties\n */\n SymbolPalette.prototype.onPropertyChanged = function (newProp, oldProp) {\n var refresh = false;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'width':\n this.element.style.width = this.width.toString();\n break;\n case 'height':\n this.element.style.height = this.height.toString();\n break;\n case 'symbolPreview':\n break;\n case 'symbolWidth':\n case 'symbolHeight':\n case 'getSymbolInfo':\n refresh = true;\n break;\n case 'enableSearch':\n if (newProp.enableSearch) {\n this.createTextbox();\n }\n else {\n var divElement = document.getElementById(this.element.id + '_search');\n if (divElement) {\n divElement.parentNode.removeChild(divElement);\n }\n }\n break;\n case 'palettes':\n for (var _b = 0, _c = Object.keys(newProp.palettes); _b < _c.length; _b++) {\n var i = _c[_b];\n var index = Number(i);\n if (newProp.palettes[index].iconCss !== undefined) {\n this.accordionElement.items[index].iconCss = newProp.palettes[index].iconCss;\n refresh = true;\n }\n if (newProp.palettes[index].expanded !== undefined) {\n if (!this.palettes[index].isInteraction) {\n this.accordionElement.items[index].expanded = newProp.palettes[index].expanded;\n refresh = true;\n }\n else {\n this.palettes[index].isInteraction = false;\n }\n }\n }\n break;\n case 'enableAnimation':\n if (!this.enableAnimation) {\n this.accordionElement.animation = { expand: { duration: 0 }, collapse: { duration: 0 } };\n }\n else {\n this.accordionElement.animation = { expand: { duration: 400 }, collapse: { duration: 400 } };\n }\n break;\n case 'expandMode':\n this.accordionElement.expandMode = this.expandMode;\n refresh = true;\n break;\n }\n }\n if (refresh) {\n this.refreshPalettes();\n }\n };\n /**\n * Get the properties to be maintained in the persisted state.\n * @return {string}\n */\n SymbolPalette.prototype.getPersistData = function () {\n var keyEntity = ['loaded'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Initialize nodes, connectors and renderer\n */\n SymbolPalette.prototype.preRender = function () {\n var _this = this;\n this.element.style.overflow = 'auto';\n this.element.style.height = this.height.toString();\n this.element.style.width = this.width.toString();\n if (this.enableSearch) {\n this.createTextbox();\n }\n //create accordion element\n var accordionDiv = createElement('div', { id: this.element.id + '_container' });\n this.accordionElement = new Accordion({\n expandMode: this.expandMode\n });\n if (!this.enableAnimation) {\n this.accordionElement.animation = { expand: { duration: 0 }, collapse: { duration: 0 } };\n }\n this.accordionElement.expanded = function (args) {\n var index = _this.accordionElement.items.indexOf(args.item);\n _this.palettes[index].expanded = args.isExpanded;\n _this.palettes[index].isInteraction = true;\n };\n this.element.appendChild(accordionDiv);\n createMeasureElements();\n this.unWireEvents();\n this.wireEvents();\n };\n /**\n * Renders nodes and connectors in the symbol palette\n */\n SymbolPalette.prototype.render = function () {\n this.diagramRenderer = new DiagramRenderer(this.element.id, new SvgRenderer(), false);\n this.svgRenderer = new DiagramRenderer(this.element.id, new SvgRenderer(), true);\n this.updatePalettes();\n this.accordionElement.appendTo('#' + this.element.id + '_container');\n };\n /**\n * To get Module name\n * @private\n */\n SymbolPalette.prototype.getModuleName = function () {\n return 'SymbolPalette';\n };\n /**\n * To provide the array of modules needed for control rendering\n * @return {ModuleDeclaration[]}\n * @private\n */\n SymbolPalette.prototype.requiredModules = function () {\n var modules = [];\n modules.push({\n member: 'Bpmn',\n args: []\n });\n return modules;\n };\n /**\n * To destroy the symbol palette\n * @return {void}\n */\n SymbolPalette.prototype.destroy = function () {\n if (this.allowDrag) {\n this.draggable.destroy();\n this.unWireEvents();\n this.notify('destroy', {});\n _super.prototype.destroy.call(this);\n var content = document.getElementById(this.element.id + '_container');\n if (content) {\n this.element.removeChild(content);\n var measureElemnt = 'measureElement';\n if (window[measureElemnt]) {\n window[measureElemnt].usageCount -= 1;\n if (window[measureElemnt].usageCount === 0) {\n window[measureElemnt].parentNode.removeChild(window[measureElemnt]);\n window[measureElemnt] = null;\n }\n }\n }\n this.element.classList.remove('e-symbolpalette');\n }\n };\n //end region - protected methods\n //region - private methods to render symbols\n /**\n * Method to initialize the items in the symbols\n */\n SymbolPalette.prototype.initSymbols = function (symbolGroup) {\n for (var _i = 0, _a = symbolGroup.symbols; _i < _a.length; _i++) {\n var symbol = _a[_i];\n if (symbol instanceof Node) {\n var getNodeDefaults = getFunction(this.getNodeDefaults);\n if (getNodeDefaults) {\n getNodeDefaults(symbol, this);\n }\n }\n else if (symbol instanceof Connector) {\n var getConnectorDefaults = getFunction(this.getConnectorDefaults);\n if (getConnectorDefaults) {\n getConnectorDefaults(symbol, this);\n }\n }\n this.prepareSymbol(symbol);\n this.symbolTable[symbol.id] = symbol;\n }\n };\n /**\n * Method to create the palette\n */\n SymbolPalette.prototype.renderPalette = function (symbolGroup) {\n var paletteDiv = document.createElement('div');\n paletteDiv.setAttribute('id', symbolGroup.id);\n var style = 'display:none;overflow:auto;';\n if (symbolGroup.height) {\n style += 'height:' + symbolGroup.height + 'px';\n }\n paletteDiv.setAttribute('style', style);\n this.element.appendChild(paletteDiv);\n var item = {\n header: symbolGroup.title, expanded: symbolGroup.expanded,\n content: '#' + symbolGroup.id, iconCss: symbolGroup.iconCss\n };\n this.accordionElement.items.push(item);\n this.renderSymbols(symbolGroup, paletteDiv);\n };\n /**\n * Used to add the palette item as nodes or connectors in palettes\n */\n SymbolPalette.prototype.addPaletteItem = function (paletteName, paletteSymbol) {\n var refresh;\n for (var i = 0; i < this.palettes.length; i++) {\n var symbolPaletteGroup = this.palettes[i];\n if (symbolPaletteGroup.id.indexOf(paletteName) !== -1) {\n // tslint:disable-next-line:no-any \n var param = [undefined, symbolPaletteGroup, 'symbols', {}, true];\n // tslint:disable-next-line:no-any \n var obj = new (Function.prototype.bind.apply(getObjectType(paletteSymbol), param));\n for (var i_1 = 0; i_1 < Object.keys(paletteSymbol).length; i_1++) {\n obj[Object.keys(paletteSymbol)[i_1]] = paletteSymbol[Object.keys(paletteSymbol)[i_1]];\n }\n symbolPaletteGroup.symbols.push(obj);\n this.prepareSymbol(obj);\n this.symbolTable[obj.id] = obj;\n var paletteDiv = document.getElementById(symbolPaletteGroup.id);\n paletteDiv.appendChild(this.getSymbolContainer(obj, paletteDiv));\n break;\n }\n }\n };\n /**\n * Used to remove the palette item as nodes or connectors in palettes\n */\n SymbolPalette.prototype.removePaletteItem = function (paletteName, symbolId) {\n var refresh;\n for (var i = 0; i < this.palettes.length; i++) {\n var symbolPaletteGroup = this.palettes[i];\n if (symbolPaletteGroup.id.indexOf(paletteName) !== -1) {\n for (var _i = 0, _a = symbolPaletteGroup.symbols; _i < _a.length; _i++) {\n var symbol = _a[_i];\n if (symbol.id.indexOf(symbolId) !== -1) {\n var index = symbolPaletteGroup.symbols.indexOf(symbol);\n symbolPaletteGroup.symbols.splice(index, 1);\n delete this.symbolTable[symbol.id];\n var element = document.getElementById(symbol.id + '_container');\n element.parentNode.removeChild(element);\n refresh = true;\n break;\n }\n }\n }\n if (refresh) {\n break;\n }\n }\n };\n /**\n * Method to create the symbols in canvas\n */\n SymbolPalette.prototype.prepareSymbol = function (symbol) {\n var width;\n var sw;\n var height;\n var sh;\n var stackPanel = new StackPanel();\n var obj = symbol;\n var content;\n var symbolContainer = new Canvas();\n //preparing objects\n var getSymbolTemplate = getFunction(this.getSymbolTemplate);\n if (getSymbolTemplate) {\n content = getSymbolTemplate(symbol);\n }\n if (!content) {\n content = symbol.init(this);\n }\n var symbolInfo = { width: this.symbolWidth, height: this.symbolHeight };\n var getSymbolInfo = getFunction(this.getSymbolInfo);\n if (getSymbolInfo) {\n symbolInfo = getSymbolInfo(symbol);\n }\n symbolInfo = symbolInfo || {};\n //defining custom templates\n content.relativeMode = 'Object';\n content.horizontalAlignment = content.verticalAlignment = 'Center';\n symbolContainer.style.strokeColor = symbolContainer.style.fill = 'none';\n symbolContainer.children = [content];\n content.measure(new Size());\n content.arrange(content.desiredSize);\n width = symbolInfo.width = symbolInfo.width ||\n (obj.width !== undefined ? content.actualSize.width : undefined) || this.symbolWidth;\n height = symbolInfo.height = symbolInfo.height ||\n (obj.height !== undefined ? content.actualSize.height : undefined) || this.symbolHeight;\n if (width !== undefined && height !== undefined) {\n var actualWidth = width;\n var actualHeight = height;\n if (this.symbolWidth !== undefined) {\n actualWidth = this.symbolWidth - this.symbolMargin.left - this.symbolMargin.right;\n }\n else {\n width += obj.style.strokeWidth;\n }\n if (this.symbolHeight !== undefined) {\n actualHeight = this.symbolHeight - this.symbolMargin.top - this.symbolMargin.bottom;\n }\n else {\n height += obj.style.strokeWidth;\n }\n if (symbolInfo.description && symbolInfo.description.text !== '') {\n actualHeight -= 20; // default height of the text have been reduced from the container.\n }\n sw = actualWidth / (content.width || width);\n sh = actualHeight / (content.height || height);\n if (symbolInfo.fit) {\n sw = actualWidth / symbolInfo.width;\n sh = actualHeight / symbolInfo.height;\n }\n width = actualWidth;\n height = actualHeight;\n sw = sh = Math.min(sw, sh);\n symbolContainer.width = width;\n symbolContainer.height = height;\n content.width = symbolInfo.width;\n content.height = symbolInfo.height;\n this.scaleSymbol(symbol, symbolContainer, sw, sh, width, height);\n }\n else {\n var outerBounds = void 0;\n if (symbol instanceof Connector) {\n outerBounds = getOuterBounds(symbol);\n }\n content.width = symbol.width || (outerBounds) ? outerBounds.width : content.actualSize.width;\n content.height = symbol.height || (outerBounds) ? outerBounds.height : content.actualSize.height;\n }\n symbol.wrapper = stackPanel;\n stackPanel.children = [symbolContainer];\n content.pivot = stackPanel.pivot = { x: 0, y: 0 };\n stackPanel.id = content.id + '_symbol';\n stackPanel.style.fill = stackPanel.style.strokeColor = 'transparent';\n stackPanel.offsetX = symbol.style.strokeWidth / 2;\n stackPanel.offsetY = symbol.style.strokeWidth / 2;\n //symbol description-textElement\n this.getSymbolDescription(symbolInfo, width, stackPanel);\n stackPanel.measure(new Size());\n stackPanel.arrange(stackPanel.desiredSize);\n symbolInfo.width = symbolInfo.width || content.actualSize.width;\n symbolInfo.height = symbolInfo.height || content.actualSize.height;\n symbol[this.info] = symbolInfo;\n };\n /**\n * Method to get the symbol text description\n * @return {void}\n * @private\n */\n SymbolPalette.prototype.getSymbolDescription = function (symbolInfo, width, parent) {\n if (symbolInfo && symbolInfo.description && symbolInfo.description.text) {\n var textElement = new TextElement();\n //symbol description-textElement\n symbolInfo.description.overflow = symbolInfo.description.overflow || 'Ellipsis';\n symbolInfo.description.wrap = symbolInfo.description.wrap || 'WrapWithOverflow';\n textElement.content = symbolInfo.description.text;\n textElement.width = width;\n textElement.height = 20;\n textElement.style.strokeColor = 'transparent';\n textElement.style.fill = 'transparent';\n textElement.style.strokeWidth = 0;\n textElement.style.textWrapping = symbolInfo.description.wrap;\n textElement.style.textOverflow = symbolInfo.description.overflow;\n textElement.margin = { left: 0, right: 0, top: 0, bottom: 5 };\n parent.children.push(textElement);\n }\n };\n /**\n * Method to renders the symbols\n * @return {void}\n * @private\n */\n SymbolPalette.prototype.renderSymbols = function (symbolGroup, parentDiv) {\n for (var _i = 0, _a = symbolGroup.symbols; _i < _a.length; _i++) {\n var symbol = _a[_i];\n this.getSymbolContainer(symbol, parentDiv);\n }\n };\n /**\n * Method to clone the symbol for previewing the symbols\n * @return {void}\n * @private\n */\n SymbolPalette.prototype.getSymbolPreview = function (symbol, evt, parentDiv) {\n var canvas;\n var sw;\n var sh;\n var symbolPreviewWidth = symbol.wrapper.children[0].desiredSize.width + symbol.style.strokeWidth;\n var symbolPreviewHeight = symbol.wrapper.children[0].desiredSize.height + symbol.style.strokeWidth;\n var content = symbol.wrapper.children[0].children[0];\n if (this.symbolPreview.width !== undefined || this.symbolPreview.height !== undefined) {\n symbolPreviewWidth = (this.symbolPreview.width || symbolPreviewWidth) - symbol.style.strokeWidth;\n symbolPreviewHeight = (this.symbolPreview.height || symbolPreviewHeight) - symbol.style.strokeWidth;\n sw = symbolPreviewWidth / content.actualSize.width;\n sh = symbolPreviewHeight / content.actualSize.height;\n sw = sh = Math.min(sw, sh);\n var symbolWidth = content.actualSize.width * sw;\n var symbolHeight = content.actualSize.height * sh;\n symbol.wrapper.children[0].width = symbolPreviewWidth;\n symbol.wrapper.children[0].height = symbolPreviewHeight;\n this.measureAndArrangeSymbol(content);\n this.scaleSymbol(symbol, symbol.wrapper.children[0], sw, sh, symbolWidth, symbolHeight);\n symbolPreviewWidth = symbolWidth;\n symbolPreviewHeight = symbolHeight;\n }\n var prevPosition = { x: content.offsetX, y: content.offsetY };\n content.offsetX = content.offsetY = symbol.style.strokeWidth / 2;\n content.pivot = { x: 0, y: 0 };\n this.measureAndArrangeSymbol(content);\n var previewContainer = createElement('div');\n var div;\n previewContainer.setAttribute('draggable', 'true');\n previewContainer.setAttribute('class', 'e-dragclone');\n previewContainer.style.pointerEvents = 'none';\n document.body.appendChild(previewContainer);\n var style = 'margin:5px;';\n if (symbol.shape.type === 'Native') {\n canvas = createSvgElement('svg', {\n id: symbol.id + '_preview',\n width: Math.ceil(symbolPreviewWidth) + 1,\n height: Math.ceil(symbolPreviewHeight) + 1\n });\n var gElement = createSvgElement('g', { id: symbol.id + '_g' });\n canvas.appendChild(gElement);\n previewContainer.appendChild(canvas);\n this.svgRenderer.renderElement(content, gElement, undefined, undefined, canvas);\n }\n else if (symbol.shape.type === 'HTML') {\n div = this.getHtmlSymbol(symbol, canvas, previewContainer, symbolPreviewHeight, symbolPreviewWidth, true);\n }\n else {\n canvas = CanvasRenderer.createCanvas(symbol.id + '_preview', (Math.ceil(symbolPreviewWidth) + symbol.style.strokeWidth + 1) * 2, (Math.ceil(symbolPreviewHeight) + symbol.style.strokeWidth + 1) * 2);\n previewContainer.appendChild(canvas);\n style += 'transform:scale(0.5);';\n canvas.setAttribute('transform-origin', '0 0');\n canvas.getContext('2d').setTransform(2, 0, 0, 2, 0, 0);\n this.diagramRenderer.renderElement(content, canvas, undefined);\n }\n ((div && symbol.shape.type === 'HTML') ? div : canvas).setAttribute('style', style);\n content.offsetX = prevPosition.x;\n content.offsetY = prevPosition.y;\n return previewContainer;\n };\n SymbolPalette.prototype.measureAndArrangeSymbol = function (content) {\n if (content.children) {\n content.children[0].transform = Transform.Self;\n }\n content.measure(new Size());\n content.arrange(content.desiredSize);\n if (content.children) {\n content.children[0].transform = Transform.Parent;\n }\n };\n SymbolPalette.prototype.updateSymbolSize = function (symbol, width, height) {\n var element = symbol.wrapper.children[0].children[0];\n var strokeWidth = symbol.style.strokeWidth;\n element.width = (width || element.width) - (strokeWidth + 1);\n element.height = (height || element.height) - (strokeWidth + 1);\n symbol.wrapper.measure(new Size());\n symbol.wrapper.arrange(symbol.wrapper.desiredSize);\n };\n /**\n * Method to create canvas and render the symbol\n * @return {void}\n * @private\n */\n SymbolPalette.prototype.getSymbolContainer = function (symbol, parentDiv, preview) {\n var symbolInfo = this.symbolTable[symbol.id][this.info];\n var size = this.getSymbolSize(symbol, symbolInfo);\n var width = size.width + 1;\n var height = size.height + 1;\n var container = createElement('div', {\n id: symbol.id + '_container',\n styles: 'width:' + width + 'px;height:' + height + 'px;float:left;overflow:hidden'\n });\n container.setAttribute('title', symbolInfo.description ? symbolInfo.description.text : symbol.id);\n parentDiv.appendChild(container);\n var canvas;\n var gElement;\n var div;\n if (symbol.shape.type === 'Native') {\n canvas = createSvgElement('svg', {\n id: symbol.id,\n width: Math.ceil(symbol.wrapper.actualSize.width) + 1,\n height: Math.ceil(symbol.wrapper.actualSize.height) + 1\n });\n gElement = createSvgElement('g', { id: symbol.id + '_g' });\n canvas.appendChild(gElement);\n container.appendChild(canvas);\n this.updateSymbolSize(symbol);\n this.svgRenderer.renderElement(symbol.wrapper, gElement, undefined, undefined, canvas);\n }\n else if (symbol.shape.type === 'HTML') {\n div = this.getHtmlSymbol(symbol, canvas, container, symbol.wrapper.actualSize.height, symbol.wrapper.actualSize.width, false);\n }\n else {\n canvas = CanvasRenderer.createCanvas(symbol.id, Math.ceil((symbol.wrapper.actualSize.width + symbol.style.strokeWidth) * 2) + 1, Math.ceil((symbol.wrapper.actualSize.height + symbol.style.strokeWidth) * 2) + 1);\n container.appendChild(canvas);\n canvas.getContext('2d').setTransform(2, 0, 0, 2, 0, 0);\n this.diagramRenderer.renderElement(symbol.wrapper, gElement || canvas, undefined);\n }\n if (!preview) {\n var actualWidth = symbol.wrapper.actualSize.width + symbol.style.strokeWidth;\n var actualHeight = symbol.wrapper.actualSize.height + symbol.style.strokeWidth;\n var style = 'margin-left:' +\n Math.max(this.symbolMargin.left, ((width - actualWidth) / 2))\n + 'px;margin-top:' + Math.max(this.symbolMargin.top, ((height - actualHeight) / 2))\n + 'px;pointer-events:none;transform-origin:0 0;overflow:hidden;';\n if (canvas instanceof HTMLCanvasElement) {\n style += 'transform:scale(.5,.5);';\n }\n ((div && symbol.shape.type === 'HTML') ? div : canvas).setAttribute('style', style);\n container.classList.add('e-symbol-draggable');\n return container;\n }\n return canvas;\n };\n SymbolPalette.prototype.getHtmlSymbol = function (symbol, canvas, container, height, width, isPreview) {\n var div = createHtmlElement('div', {\n 'id': symbol.id + (isPreview ? '_html_div_preview' : '_html_div')\n });\n var htmlLayer = createHtmlElement('div', {\n 'id': symbol.id + (isPreview ? '_htmlLayer_preview' : '_htmlLayer'),\n 'style': 'width:' + Math.ceil(width + 1) + 'px;' +\n 'height:' + Math.ceil(height + 1) + 'px;position:absolute',\n 'class': 'e-html-layer'\n });\n var htmlLayerDiv = createHtmlElement('div', {\n 'id': symbol.id + (isPreview ? '_htmlLayer_div_preview' : '_htmlLayer_div'),\n 'style': 'width:' + Math.ceil(width + 1) + 'px;' +\n 'height:' + Math.ceil(height + 1) + 'px;position:absolute',\n });\n htmlLayer.appendChild(htmlLayerDiv);\n div.appendChild(htmlLayer);\n canvas = CanvasRenderer.createCanvas((isPreview ? (symbol.id + '_preview') : symbol.id), Math.ceil(width) + 1, Math.ceil(height) + 1);\n div.appendChild(canvas);\n container.appendChild(div);\n this.diagramRenderer.renderElement(symbol.wrapper.children[0].children[0], canvas, htmlLayer);\n return div;\n };\n SymbolPalette.prototype.getSymbolSize = function (symbol, symbolInfo) {\n var width = symbol.wrapper.actualSize.width;\n var height = symbol.wrapper.actualSize.height;\n if (!this.symbolWidth && !this.symbolHeight) {\n width += this.symbolMargin.left + this.symbolMargin.right + symbol.style.strokeWidth;\n height += this.symbolMargin.top + this.symbolMargin.bottom + symbol.style.strokeWidth;\n }\n else {\n width = this.symbolWidth;\n height = Math.max(this.symbolHeight, height);\n }\n return new Size(width, height);\n };\n //end region - rendering symbols\n //region event handlers\n SymbolPalette.prototype.getMousePosition = function (e) {\n var offsetY;\n var offsetX;\n var touchArg;\n if (e.type.indexOf('touch') !== -1) {\n touchArg = e;\n var pageY = touchArg.changedTouches[0].clientY;\n var pageX = touchArg.changedTouches[0].clientX;\n offsetY = pageY - this.element.offsetTop;\n offsetX = pageX - this.element.offsetLeft;\n }\n else {\n offsetY = e.clientY - this.element.offsetTop;\n offsetX = e.clientX - this.element.offsetLeft;\n }\n return { x: offsetX, y: offsetY };\n };\n SymbolPalette.prototype.mouseMove = function (e, touches) {\n if (this.highlightedSymbol && (!this.selectedSymbol\n || this.selectedSymbol.id + '_container' !== this.highlightedSymbol.id)) {\n this.highlightedSymbol.classList.remove('e-symbol-hover');\n this.highlightedSymbol.style.backgroundColor = '';\n this.highlightedSymbol = null;\n }\n var id = e.target.id.split('_container')[0];\n if (this.symbolTable[id]) {\n var container = document.getElementById(id + '_container');\n container.classList.add('e-symbol-hover');\n this.highlightedSymbol = container;\n }\n e.preventDefault();\n };\n SymbolPalette.prototype.mouseUp = function (evt) {\n if (evt && evt.target) {\n if (evt.srcElement.id === 'iconSearch') {\n var element = document.getElementById('iconSearch');\n if (element.classList.contains('e-clear-searchtext')) {\n element.className = 'e-input-group-icon e-search e-icons';\n document.getElementById('textEnter').value = '';\n this.searchPalette('');\n }\n }\n else {\n evt.preventDefault();\n }\n }\n };\n SymbolPalette.prototype.keyUp = function (evt) {\n var _this = this;\n if (this.enableSearch) {\n var palette_1 = this;\n var element = document.getElementById('iconSearch');\n element.className = 'e-input-group-icon e-clear-searchtext e-icons';\n if (evt && (evt.key === 'Enter' || evt.keyCode === 13)) {\n if (evt.target instanceof HTMLInputElement) {\n this.searchPalette(evt.target.value);\n }\n }\n else {\n if (this.timer) {\n clearTimeout(this.timer);\n }\n this.timer = setTimeout(function () {\n if (evt.target instanceof HTMLInputElement) {\n palette_1.searchPalette(evt.target.value);\n _this.timer = null;\n }\n }, 500);\n }\n }\n };\n SymbolPalette.prototype.mouseDown = function (evt) {\n var id = evt.target.id.split('_container')[0];\n if (this.selectedSymbol) {\n if (id !== this.selectedSymbol.id) {\n var oldSymbol = document.getElementById(this.selectedSymbol.id + '_container');\n oldSymbol.classList.remove('e-symbol-selected');\n var args = { oldValue: this.selectedSymbol.id, newValue: id };\n var event_1 = 'paletteSelectionChange';\n this.trigger(event_1, args);\n }\n var container = document.getElementById(this.selectedSymbol.id + '_container');\n container.style.backgroundColor = '';\n this.selectedSymbol = null;\n }\n if (this.symbolTable[id]) {\n var container = document.getElementById(id + '_container');\n container.classList.add('e-symbol-selected');\n this.selectedSymbol = this.symbolTable[id];\n evt.preventDefault();\n }\n };\n //end region - event handlers\n // region - draggable\n SymbolPalette.prototype.initDraggable = function () {\n if (this.allowDrag) {\n var drag = void 0;\n this.draggable = new Draggable(this.element, {\n dragTarget: '.e-symbol-draggable',\n helper: this.helper,\n dragStart: this.dragStart,\n dragStop: this.dragStop,\n drag: function (args) {\n var target = 'target';\n var parent = parentsUntil(args[target], 'e-droppable');\n if (parent && parent.classList.contains('e-diagram')) {\n var e2eInstance = 'ej2_instances';\n parent[e2eInstance][0].droppable.over(args);\n }\n },\n cursorAt: { left: this.symbolPreview.offset.x, top: this.symbolPreview.offset.y }\n });\n }\n };\n SymbolPalette.prototype.dragStart = function (e) {\n var element = this.helper[0];\n if (element) {\n element.setAttribute('paletteId', this.element.id);\n }\n };\n SymbolPalette.prototype.dragStop = function (e) {\n if (!parentsUntil(e.target, 'e-diagram')) {\n remove(e.helper);\n }\n };\n //end region - draggable \n //region - helper methods\n SymbolPalette.prototype.scaleSymbol = function (symbol, symbolContainer, sw, sh, width, height) {\n if (symbol instanceof Connector) {\n var wrapper = symbol.wrapper;\n symbol.wrapper = symbolContainer.children[0];\n var point = symbol.scale(sw, sh, width, height, symbolContainer.children[0]);\n var difX = width / 2 - symbolContainer.children[0].children[0].offsetX + point.x / 2;\n var difY = height / 2 - symbolContainer.children[0].children[0].offsetY + point.y / 2;\n for (var _i = 0, _a = symbolContainer.children[0].children; _i < _a.length; _i++) {\n var child = _a[_i];\n child.offsetX += difX;\n child.offsetY += difY;\n child.staticSize = false;\n }\n symbol.wrapper = wrapper;\n }\n else if (symbol.shape instanceof BpmnShape && this.bpmnModule) {\n var wrapper = symbol.wrapper;\n symbol.wrapper = symbolContainer;\n symbolContainer.children[0].width = width;\n symbolContainer.children[0].height = height;\n this.bpmnModule.updateBPMN({ width: width, height: height }, symbol, symbol, null);\n symbol.wrapper = wrapper;\n }\n else {\n scaleElement(symbolContainer.children[0], sw, sh, symbolContainer);\n }\n };\n SymbolPalette.prototype.refreshPalettes = function () {\n this.accordionElement.items = [];\n this.updatePalettes();\n this.accordionElement.dataBind();\n };\n SymbolPalette.prototype.updatePalettes = function () {\n for (var i = 0; i < this.palettes.length; i++) {\n var symGroup = this.palettes[i];\n this.initSymbols(symGroup);\n this.renderPalette(symGroup);\n }\n };\n SymbolPalette.prototype.createTextbox = function () {\n var searchDiv = createElement('div', { id: this.element.id + '_search' });\n searchDiv.setAttribute('style', 'backgroundColor:white;height:30px');\n searchDiv.className = 'e-input-group';\n this.element.appendChild(searchDiv);\n var textBox = document.createElement('input');\n textBox.placeholder = 'Search Shapes';\n textBox.id = 'textEnter';\n textBox.setAttribute('style', 'width:100%;height:auto');\n textBox.className = 'e-input';\n searchDiv.appendChild(textBox);\n var span = createElement('span', { id: 'iconSearch', className: 'e-input-group-icon e-search e-icons' });\n searchDiv.appendChild(span);\n };\n SymbolPalette.prototype.searchPalette = function (value) {\n var symbolGroup = [];\n var element = document.getElementById('SearchPalette');\n var paletteDiv;\n //remove the existing child in palette\n if (element) {\n for (var k = element.children.length - 1; k >= 0; k--) {\n element.removeChild(element.children[k]);\n }\n }\n //add the searched item in array collection\n for (var i = 0; i < this.palettes.length; i++) {\n var symbolPaletteGroup = this.palettes[i];\n for (var j = 0; j < symbolPaletteGroup.symbols.length; j++) {\n var item = symbolPaletteGroup.symbols[j];\n if (value !== '' && item.id.toLowerCase().indexOf(value.toLowerCase()) !== -1) {\n symbolGroup.push(item);\n }\n }\n }\n var filterSymbols = getFunction(this.filterSymbols);\n if (filterSymbols) {\n symbolGroup = filterSymbols(symbolGroup) || [];\n }\n //create a palette collection\n if (!element) {\n paletteDiv = this.createSearchPalette(paletteDiv);\n element = paletteDiv;\n }\n //add the symbols into search palette\n if (symbolGroup.length > 0) {\n for (var _i = 0, symbolGroup_1 = symbolGroup; _i < symbolGroup_1.length; _i++) {\n var symbol = symbolGroup_1[_i];\n this.getSymbolContainer(symbol, element);\n }\n }\n else if (value !== '') {\n var emptyDiv = document.createElement('div');\n emptyDiv.setAttribute('id', 'EmptyDiv');\n emptyDiv.innerHTML = 'No Items To Display';\n emptyDiv.setAttribute('style', 'textAlign:center;fontStyle:italic');\n element.appendChild(emptyDiv);\n }\n else {\n var element_1 = document.getElementById('iconSearch');\n element_1.className = 'e-input-group-icon e-search e-icons';\n this.accordionElement.removeItem(0);\n }\n };\n SymbolPalette.prototype.createSearchPalette = function (paletteDiv) {\n paletteDiv = document.createElement('div');\n paletteDiv.setAttribute('id', 'SearchPalette');\n paletteDiv.setAttribute('style', 'display:none;overflow:auto;');\n this.element.appendChild(paletteDiv);\n var paletteCollection = {\n header: 'Search Results', expanded: true,\n content: '#SearchPalette',\n };\n this.accordionElement.addItem(paletteCollection, 0);\n return paletteDiv;\n };\n /**\n * Method to bind events for the symbol palette\n */\n SymbolPalette.prototype.wireEvents = function () {\n var startEvent = Browser.touchStartEvent;\n var stopEvent = Browser.touchEndEvent;\n var moveEvent = Browser.touchMoveEvent;\n var cancelEvent = 'mouseleave';\n var keyEvent = 'keyup';\n EventHandler.add(this.element, startEvent, this.mouseDown, this);\n EventHandler.add(this.element, moveEvent, this.mouseMove, this);\n EventHandler.add(this.element, stopEvent, this.mouseUp, this);\n EventHandler.add(this.element, keyEvent, this.keyUp, this);\n // initialize the draggable component\n this.initDraggable();\n };\n /**\n * Method to unbind events for the symbol palette\n */\n SymbolPalette.prototype.unWireEvents = function () {\n var startEvent = Browser.touchStartEvent;\n var stopEvent = Browser.touchEndEvent;\n var moveEvent = Browser.touchMoveEvent;\n var cancelEvent = Browser.isPointer ? 'pointerleave' : 'mouseleave';\n var keyEvent = 'keyup';\n EventHandler.remove(this.element, startEvent, this.mouseDown);\n EventHandler.remove(this.element, moveEvent, this.mouseMove);\n EventHandler.remove(this.element, stopEvent, this.mouseUp);\n EventHandler.remove(this.element, keyEvent, this.keyUp);\n };\n __decorate([\n Property('S')\n ], SymbolPalette.prototype, \"accessKey\", void 0);\n __decorate([\n Property('100%')\n ], SymbolPalette.prototype, \"width\", void 0);\n __decorate([\n Property('100%')\n ], SymbolPalette.prototype, \"height\", void 0);\n __decorate([\n Collection([], Palette)\n ], SymbolPalette.prototype, \"palettes\", void 0);\n __decorate([\n Property()\n ], SymbolPalette.prototype, \"getSymbolInfo\", void 0);\n __decorate([\n Property()\n ], SymbolPalette.prototype, \"filterSymbols\", void 0);\n __decorate([\n Property()\n ], SymbolPalette.prototype, \"getSymbolTemplate\", void 0);\n __decorate([\n Property()\n ], SymbolPalette.prototype, \"symbolWidth\", void 0);\n __decorate([\n Property()\n ], SymbolPalette.prototype, \"symbolHeight\", void 0);\n __decorate([\n Complex({ left: 10, right: 10, top: 10, bottom: 10 }, Margin)\n ], SymbolPalette.prototype, \"symbolMargin\", void 0);\n __decorate([\n Property(true)\n ], SymbolPalette.prototype, \"allowDrag\", void 0);\n __decorate([\n Complex({}, SymbolPreview)\n ], SymbolPalette.prototype, \"symbolPreview\", void 0);\n __decorate([\n Property(false)\n ], SymbolPalette.prototype, \"enableSearch\", void 0);\n __decorate([\n Property(true)\n ], SymbolPalette.prototype, \"enableAnimation\", void 0);\n __decorate([\n Property('Multiple')\n ], SymbolPalette.prototype, \"expandMode\", void 0);\n __decorate([\n Event()\n ], SymbolPalette.prototype, \"paletteSelectionChange\", void 0);\n __decorate([\n Property()\n ], SymbolPalette.prototype, \"getNodeDefaults\", void 0);\n __decorate([\n Property()\n ], SymbolPalette.prototype, \"getConnectorDefaults\", void 0);\n return SymbolPalette;\n}(Component));\nexport { SymbolPalette };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { DiagramRenderer } from '../diagram/rendering/renderer';\nimport { CanvasRenderer } from '../diagram/rendering/canvas-renderer';\nimport { Component, Property, Browser, EventHandler, Event } from '@syncfusion/ej2-base';\nimport { setAttributeHtml, setAttributeSvg } from '../diagram/utility/dom-util';\nimport { createSvgElement, getNativeLayer, hasClass } from '../diagram/utility/dom-util';\nimport { Rect } from '../diagram/primitives/rect';\nimport { Size } from '../diagram/primitives/size';\nimport { SvgRenderer } from '../diagram/rendering/svg-renderer';\n/**\n * Overview control\n * ```\n *
\n * \n * ```\n */\nvar Overview = /** @class */ (function (_super) {\n __extends(Overview, _super);\n function Overview(options, element) {\n var _this = _super.call(this, options, element) || this;\n /** @private */\n _this.mode = 'Canvas';\n /** @private */\n _this.id = 'overview';\n _this.actionName = '';\n _this.startPoint = null;\n _this.currentPoint = null;\n _this.prevPoint = null;\n _this.scale = null;\n _this.inAction = false;\n _this.viewPortRatio = 1;\n _this.horizontalOffset = 0;\n _this.verticalOffset = 0;\n _this.model = {};\n _this.event = true;\n _this.model = { width: _this.width, height: _this.height };\n return _this;\n }\n /**\n * Updates the overview control when the objects are changed\n * @param newProp Lists the new values of the changed properties\n * @param oldProp Lists the old values of the changed properties\n */\n Overview.prototype.onPropertyChanged = function (newProp, oldProp) {\n var objectArray = [];\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'sourceID':\n this.setParent(newProp.sourceID);\n break;\n case 'width':\n case 'height':\n this.renderCanvas();\n this.setParent(this.sourceID);\n break;\n }\n }\n };\n /**\n * Get the properties to be maintained in the persisted state.\n * @return {string}\n */\n Overview.prototype.getPersistData = function () {\n var keyEntity = ['loaded'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Initialize nodes, connectors and renderer\n */\n Overview.prototype.preRender = function () {\n this.element.style.background = 'transparent';\n this.unWireEvents();\n this.wireEvents();\n };\n Overview.prototype.render = function () {\n this.diagramRenderer = new DiagramRenderer(this.element.id, new SvgRenderer(), false);\n this.renderCanvas();\n this.setParent(this.sourceID);\n };\n Overview.prototype.getSizeValue = function (real) {\n var text;\n if (real.toString().indexOf('px') > 0 || real.toString().indexOf('%') > 0) {\n text = real.toString();\n }\n else {\n text = real.toString() + 'px';\n }\n return text;\n };\n Overview.prototype.renderCanvas = function (options) {\n var canvas = document.getElementById(this.element.id + '_canvas');\n if (!canvas) {\n canvas = document.createElement('div');\n this.element.appendChild(canvas);\n }\n var attribute = {\n 'id': this.element.id + '_canvas', 'class': 'drawing',\n 'style': 'position:relative; height:' + this.getSizeValue(this.model.height) + '; width:' +\n this.getSizeValue(this.model.width) +\n ';style:-ms-touch-action: none;touch-action: none;'\n };\n setAttributeHtml(canvas, attribute);\n this.element.setAttribute('tabindex', String(0));\n this.element.style.overflow = 'hidden';\n this.element.style.height = String(this.model.height);\n this.element.style.width = String(this.model.width);\n this.canvas = canvas;\n };\n Overview.prototype.setParent = function (id) {\n var element = document.getElementById(id);\n var instance = 'ej2_instances';\n if (this.parent) {\n var oldparent = this.parent;\n this.parent = null;\n oldparent.setOverview(null, this.id);\n this.removeDocument(this);\n }\n this.parent = this.getDiagram(element, instance);\n if (this.parent) {\n this.parent.setOverview(this);\n }\n };\n Overview.prototype.getDiagram = function (element, instance) {\n var diagram;\n var n = element[instance].length;\n for (var i = 0; i < n; i++) {\n if (hasClass(element[instance][i].element, 'e-diagram')) {\n diagram = element[instance][i];\n break;\n }\n }\n return diagram;\n };\n Overview.prototype.unWireEvents = function () {\n var start = Browser.touchStartEvent;\n var move = Browser.touchMoveEvent;\n var evnt;\n var cancel = Browser.isPointer ? 'pointerleave' : 'mouseleave';\n var isIE11Pointer = Browser.isPointer;\n var wheelEvent = Browser.info.name === 'mozilla' ?\n (isIE11Pointer ? 'mousewheel' : 'DOMMouseScroll') : 'mousewheel';\n var stop = Browser.touchEndEvent;\n EventHandler.remove(this.element, start, this.mouseDown);\n EventHandler.remove(this.element, move, this.mouseMove);\n EventHandler.remove(this.element, stop, this.mouseUp);\n EventHandler.remove(this.element, cancel, this.documentMouseUp);\n EventHandler.remove(window, 'resize', this.windowResize);\n var container = document.getElementById(this.sourceID + 'content');\n if (container) {\n EventHandler.remove(container, 'scroll', this.scrolled);\n }\n };\n Overview.prototype.wireEvents = function () {\n var start = Browser.touchStartEvent;\n var stop = Browser.touchEndEvent;\n var move = Browser.touchMoveEvent;\n var cancel = Browser.isPointer ? 'pointerleave' : 'mouseleave';\n var isIE11Pointer = Browser.isPointer;\n var wheelEvent = Browser.info.name === 'mozilla' ?\n (isIE11Pointer ? 'mousewheel' : 'DOMMouseScroll') : 'mousewheel';\n EventHandler.add(this.element, start, this.mouseDown, this);\n EventHandler.add(this.element, move, this.mouseMove, this);\n EventHandler.add(this.element, stop, this.mouseUp, this);\n EventHandler.add(this.element, cancel, this.documentMouseUp, this);\n EventHandler.add(window, 'resize', this.windowResize, this);\n var container = document.getElementById(this.sourceID + 'content');\n if (container) {\n EventHandler.add(container, 'scroll', this.scrolled, this);\n }\n };\n /**\n * @private\n */\n /**\n * @private\n */\n Overview.prototype.renderDocument = function (view) {\n view.canvas = this.canvas;\n var g = document.getElementById(this.canvas.id + '_svg');\n if (g) {\n g.parentNode.removeChild(g);\n }\n var attr = {\n id: this.canvas.id + '_svg',\n version: '1.1',\n xlink: 'http://www.w3.org/1999/xlink',\n 'class': 'overview_svg'\n };\n var svg = createSvgElement('svg', attr);\n this.svg = svg;\n view.svg = svg;\n view.canvas.appendChild(svg);\n var ovw = document.getElementById(this.element.id);\n var element = ovw;\n var eWidth = element.clientWidth;\n var eHeight = element.clientHeight;\n var bRect = element.getBoundingClientRect();\n // Check for the window resize\n var screenX = (window.screenX < 0) ? window.screenX * -1 : window.screenX;\n var screenY = (window.screenY < 0) ? window.screenY * -1 : window.screenY;\n if (eWidth === 0) {\n eWidth = Math.floor(((window.innerWidth - screenX) - Math.floor(bRect.left)));\n }\n if (eHeight === 0) {\n eHeight = Math.floor(((window.innerHeight - screenY) - Math.floor(bRect.top)));\n }\n svg.setAttribute('width', String(eWidth));\n svg.setAttribute('height', String(eHeight));\n this.model.width = eWidth;\n this.model.height = eHeight;\n var attributes;\n if (!view.diagramLayerDiv) {\n view.diagramLayerDiv = document.createElement('div');\n var container = document.getElementById(this.element.id);\n view.diagramLayer = CanvasRenderer.createCanvas(this.element.id + '_diagramLayer', this.model.width, this.model.height);\n view.diagramLayer.setAttribute('style', 'position:absolute; left:0px; top:0px ');\n view.diagramLayerDiv.appendChild(view.diagramLayer);\n view.canvas.appendChild(view.diagramLayerDiv);\n }\n attributes = {\n 'id': this.element.id + '_diagramLayer_div',\n 'style': 'width:' + this.model.width + 'px; height:' + this.model.height + 'px;position:absolute;top:0px;left:0px'\n };\n setAttributeHtml(view.diagramLayerDiv, attributes);\n this.renderHtmlLayer(view.canvas);\n this.renderNativeLayer(view.canvas, view);\n this.addOverviewRectPanel(view);\n };\n /** @private */\n Overview.prototype.removeDocument = function (view) {\n var svg = document.getElementById(this.canvas.id + '_svg');\n this.canvas.removeChild(svg);\n var htmlLayer = document.getElementById(this.element.id + '_htmlLayer');\n this.canvas.removeChild(htmlLayer);\n var diagramLayer = document.getElementById(this.id + '_diagramLayer_div');\n this.canvas.removeChild(diagramLayer);\n view.diagramLayerDiv = null;\n view.diagramLayer = null;\n };\n Overview.prototype.renderHtmlLayer = function (canvas) {\n var div = document.createElement('div');\n var attr = { 'id': this.element.id + '_htmlLayer', 'class': 'e-html-layer' };\n setAttributeHtml(div, attr);\n var htmlLayer = div;\n div.style.pointerEvents = 'none';\n div.style.position = 'absolute';\n div.style.left = '0px';\n div.style.top = '0px';\n var htmlDiv = document.createElement('div');\n var options = {\n 'id': this.element.id + '_htmlLayer_div',\n 'style': 'position:absolute;top:0px;left:0px;'\n };\n setAttributeHtml(htmlDiv, options);\n htmlLayer.appendChild(htmlDiv);\n canvas.appendChild(htmlLayer);\n return htmlLayer;\n };\n Overview.prototype.renderNativeLayer = function (canvas, view) {\n var nativeLayerSvg = this.parent.createSvg(this.element.id + '_nativeLayer_svg', this.model.width, this.model.height);\n var nativeLayer = createSvgElement('g', { 'id': this.element.id + '_nativeLayer' });\n nativeLayerSvg.appendChild(nativeLayer);\n view.diagramLayerDiv.appendChild(nativeLayerSvg);\n setAttributeSvg(nativeLayerSvg, { 'class': 'e-native-layer' });\n };\n Overview.prototype.addOverviewRectPanel = function (view) {\n var svg = document.getElementById(this.canvas.id + '_overviewsvg');\n if (svg) {\n svg.parentNode.removeChild(svg);\n }\n var attr = ({\n id: this.canvas.id + '_overviewsvg',\n version: '1.1',\n xlink: 'http://www.w3.org/1999/xlink',\n 'style': 'position:absolute;left:0px;top:0px; aria-label:Specifies overview',\n width: this.model.width,\n height: this.model.height\n });\n svg = createSvgElement('svg', attr);\n view.canvas.appendChild(svg);\n var ovw = createSvgElement('g', { 'id': this.id + '_overviewlayer', 'style': 'pointer-events:none' });\n svg.appendChild(ovw);\n var rect = createSvgElement('rect', {\n 'fill': 'transparent', 'width': '100%', 'height': '100%', 'class': 'overviewbackrect',\n 'id': this.canvas.id + 'overviewbackrect'\n });\n rect.setAttribute('style', ' pointer-events: none; ');\n ovw.appendChild(rect);\n var svgDocument = (ovw);\n var g = createSvgElement('g', { 'id': this.canvas.id + 'overviewhandle', 'style': 'pointer-events:all' });\n ovw.appendChild(g);\n var innerrect = createSvgElement('rect', { 'id': this.canvas.id + 'overviewrect', 'fill': 'transparent' });\n g.appendChild(innerrect);\n this.renderOverviewCorner('left', g);\n this.renderOverviewCorner('right', g);\n this.renderOverviewCorner('top', g);\n this.renderOverviewCorner('bottom', g);\n this.renderOverviewCorner('topleft', g);\n this.renderOverviewCorner('topright', g);\n this.renderOverviewCorner('bottomleft', g);\n this.renderOverviewCorner('bottomright', g);\n };\n Overview.prototype.renderOverviewCorner = function (name, parent) {\n var svg = this.svg;\n var shape;\n if (name === 'top' || name === 'bottom' || name === 'right' || name === 'left') {\n shape = 'rect';\n }\n else {\n shape = 'circle';\n }\n var innerrect = createSvgElement(shape, { 'id': this.canvas.id + 'visible' + name });\n parent.appendChild(innerrect);\n var transrect = createSvgElement(shape, {\n 'id': this.canvas.id + name, 'class': 'overviewresizer', 'fill': 'transparent'\n });\n parent.appendChild(transrect);\n };\n Overview.prototype.updateOverviewRectangle = function () {\n var difx = this.currentPoint.x - this.prevPoint.x;\n var dify = this.currentPoint.y - this.prevPoint.y;\n var size = new Size();\n size.width = 0;\n size.height = 0;\n var x = 0;\n var y = 0;\n var w;\n var h;\n switch (this.resizeDirection) {\n case 'left':\n size.width -= difx;\n size.height -= difx / this.viewPortRatio;\n x = difx;\n y = difx / this.viewPortRatio;\n y /= 2;\n break;\n case 'right':\n size.width += difx;\n size.height += difx / this.viewPortRatio;\n y = difx / this.viewPortRatio;\n y /= -2;\n break;\n case 'top':\n size.height -= dify;\n size.width -= dify * this.viewPortRatio;\n y = dify;\n x = dify * this.viewPortRatio;\n x /= 2;\n break;\n case 'bottom':\n size.height += dify;\n size.width += dify * this.viewPortRatio;\n x = dify * this.viewPortRatio;\n x /= -2;\n break;\n case 'topleft':\n if (Math.abs(dify) > Math.abs(difx)) {\n difx = dify * this.viewPortRatio;\n }\n else {\n dify = difx / this.viewPortRatio;\n }\n size.width -= difx;\n size.height -= dify;\n x = difx;\n y = dify;\n break;\n case 'topright':\n if (Math.abs(dify) > Math.abs(difx)) {\n difx = -dify * this.viewPortRatio;\n }\n else {\n dify = -(difx / this.viewPortRatio);\n }\n y = dify;\n size.width += difx;\n size.height -= dify;\n break;\n case 'bottomleft':\n if (Math.abs(dify) > Math.abs(difx)) {\n difx = -dify * this.viewPortRatio;\n }\n else {\n dify = -difx / this.viewPortRatio;\n }\n x = difx;\n size.width -= difx;\n size.height += dify;\n break;\n case 'bottomright':\n if (Math.abs(dify) > Math.abs(difx)) {\n difx = dify * this.viewPortRatio;\n }\n else {\n dify = difx / this.viewPortRatio;\n }\n size.width += difx;\n size.height += dify;\n break;\n }\n this.updateHelper(x, y, size, w, h);\n };\n Overview.prototype.updateHelper = function (difx, dify, size, width, height) {\n var x;\n var y;\n var bounds;\n var svg = this.element.getElementsByTagName('svg')[2];\n var rect = svg.getElementById('helper');\n if (size) {\n bounds = rect.getBBox();\n x = bounds.x + difx;\n y = bounds.y + dify;\n width = bounds.width + size.width;\n height = bounds.height + size.height;\n }\n else {\n var difx_1;\n if (this.currentPoint.x > this.startPoint.x) {\n difx_1 = this.currentPoint.x - this.prevPoint.x;\n }\n else {\n difx_1 = this.prevPoint.x - this.currentPoint.x;\n }\n var dify_1;\n if (this.currentPoint.y > this.startPoint.y) {\n dify_1 = this.currentPoint.y - this.prevPoint.y;\n }\n else {\n dify_1 = this.prevPoint.y - this.currentPoint.y;\n }\n var w = void 0;\n var h = void 0;\n if (Math.abs(dify_1) > Math.abs(difx_1)) {\n difx_1 = this.viewPortRatio * dify_1;\n h = true;\n w = false;\n }\n else {\n dify_1 = difx_1 / this.viewPortRatio;\n w = true;\n h = false;\n }\n bounds = rect.getBBox();\n x = ((this.startPoint.x > this.currentPoint.x) ?\n bounds.x - difx_1 : bounds.x);\n y = ((this.startPoint.y > this.currentPoint.y) ? bounds.y - dify_1 : bounds.y);\n width = bounds.width + difx_1;\n height = bounds.height + dify_1;\n }\n setAttributeSvg(this.helper, {\n 'id': this.helper.id, 'x': x, 'y': y,\n 'width': Math.max(0, width), 'height': Math.max(0, height)\n });\n };\n Overview.prototype.updateOverviewrect = function (x, y, width, height) {\n var rect = document.getElementById(this.canvas.id + 'overviewrect');\n var attr = { x: x, y: y, width: Math.max(1, width), height: Math.max(1, height) };\n setAttributeHtml(rect, attr);\n this.updateOverviewCorner('top', x + 8, y - 2, Math.max(0, width - 16), 2);\n this.updateOverviewCorner('bottom', x + 8, y + height, Math.max(0, width - 16), 2);\n this.updateOverviewCorner('left', x - 2, y + 8, 2, Math.max(0, height - 16));\n this.updateOverviewCorner('right', x + width, y + 8, 2, Math.max(0, height - 16));\n this.updateOverviewCorner('topleft', x, y, 5, 5);\n this.updateOverviewCorner('topright', x + width, y, 5, 5);\n this.updateOverviewCorner('bottomleft', x, y + height, 5, 5);\n this.updateOverviewCorner('bottomright', x + width, y + height, 5, 5);\n };\n Overview.prototype.updateOverviewCorner = function (name, x, y, width, height) {\n var attr;\n var transattr;\n var rectname = 'visible' + name;\n var rect = document.getElementById(this.canvas.id + rectname);\n if (name === 'top' || name === 'bottom' || name === 'right' || name === 'left') {\n attr = { x: x, y: y, width: width, height: height, fill: '#ED1C24' };\n transattr = { x: x - 2, y: y - 2, width: width === 2 ? 4 : width, height: height === 2 ? 4 : height };\n }\n else {\n attr = { cx: x, cy: y, 'r': 4, fill: '#ED1C24' };\n transattr = { cx: x, cy: y, 'r': 6, fill: 'transparent' };\n }\n setAttributeHtml(rect, attr);\n var transrect = document.getElementById(this.canvas.id + name);\n setAttributeHtml(transrect, transattr);\n };\n Overview.prototype.translateOverviewRectangle = function () {\n var offwidth = Number(this.model.width);\n var offheight = Number(this.model.height);\n var difx = this.currentPoint.x - this.prevPoint.x;\n var dify = this.currentPoint.y - this.prevPoint.y;\n var viewPort;\n var zoom = Math.min(this.parent.scroller.viewPortWidth / offwidth, this.parent.scroller.viewPortHeight / offheight);\n var svg = this.element.getElementsByTagName('svg')[2];\n var panel = svg.getElementById(this.canvas.id\n + 'overviewrect');\n var bounds = panel.getBBox();\n var x = bounds.x + difx;\n var y = bounds.y + dify;\n var width = bounds.width;\n var height = bounds.height;\n this.updateOverviewrect(x, y, width, height);\n this.updateParentView(this.parent.scroller.currentZoom, x, y, width, height, null);\n };\n Overview.prototype.renderOverviewRect = function (x, y, width, height) {\n var offwidth = Number(this.model.width);\n var offheight = Number(this.model.height);\n var viewPort;\n var viewwidth = (width / offwidth) * this.contentWidth;\n var viewheight = (height / offheight) * this.contentHeight;\n var zoom = Math.max(this.parent.scroller.viewPortWidth / viewwidth, this.parent.scroller.viewPortHeight / viewheight);\n if (zoom >= 0.25 && zoom <= 30) {\n var point = { x: 0, y: 0 };\n this.updateParentView(zoom, x, y, width, height, point);\n var bounds = this.scrollOverviewRect(this.parent.scroller.horizontalOffset, this.parent.scroller.verticalOffset, this.parent.scroller.currentZoom, true);\n if (this.helper) {\n var panel = this.element.getElementsByTagName('rect')[10];\n var svgRect = panel.getBBox();\n bounds.x = svgRect.x;\n bounds.y = svgRect.y;\n }\n this.updateOverviewrect(bounds.x, bounds.y, bounds.width, bounds.height);\n }\n };\n Overview.prototype.scrollOverviewRect = function (hoffset, voffset, currentZoom, scaled) {\n if (!(this.actionName) || scaled) {\n var offwidth = Number(this.model.width);\n var offheight = Number(this.model.height);\n var scale = Math.min(this.contentWidth / offwidth, this.contentHeight / offheight);\n var bounds = new Rect();\n var x = bounds.x = (hoffset / currentZoom) / scale;\n var y = bounds.y = (voffset / currentZoom) / scale;\n var viewPort = void 0;\n var width = bounds.width = (this.parent.scroller.viewPortWidth / currentZoom) / scale;\n var height = bounds.height = (this.parent.scroller.viewPortHeight / currentZoom) / scale;\n var ratio = this.parent.scroller.viewPortWidth / this.parent.scroller.viewPortHeight;\n if (scaled) {\n var rect = new Rect();\n rect.x = x;\n rect.y = y;\n rect.width = width;\n rect.height = height;\n return rect;\n }\n this.updateOverviewrect(-x, -y, width, height);\n }\n return null;\n };\n Overview.prototype.updateParentView = function (zoom, x, y, width, height, focusPoint) {\n var offwidth = Number(this.model.width);\n var offheight = Number(this.model.height);\n var scalex = this.contentWidth / offwidth;\n var scaley = this.contentHeight / offheight;\n var hoffset = x * scalex * zoom;\n var voffset = y * scaley * zoom;\n var delx;\n var dely;\n var bounds = this.parent.scroller.getPageBounds();\n if (zoom !== 1 || this.actionName === 'pan') {\n delx = -hoffset - this.parent.scroller.horizontalOffset;\n dely = -voffset - this.parent.scroller.verticalOffset;\n }\n if (this.actionName === 'scale' || this.actionName === 'draw') {\n this.parent.scroller.zoom(zoom / this.parent.scroller.currentZoom, delx, dely, focusPoint);\n }\n else {\n this.parent.pan(delx, dely, focusPoint);\n }\n };\n /** @private */\n Overview.prototype.updateView = function (view) {\n var width;\n var height;\n var bounds = this.parent.scroller.getPageBounds();\n width = bounds.width;\n height = bounds.height;\n var offwidth = Number(this.model.width);\n var offheight = Number(this.model.height);\n var scale;\n var w = Math.max(width, this.parent.scroller.viewPortWidth);\n var h = Math.max(height, this.parent.scroller.viewPortHeight);\n this.contentWidth = w = Math.max(w, (offwidth / offheight) * h);\n this.contentHeight = h = Math.max(h, (offheight / offwidth) * w);\n scale = Math.min(offwidth / w, offheight / h);\n var htmlLayer = document.getElementById(this.element.id + '_htmlLayer');\n htmlLayer.style.webkitTransform = 'scale(' + scale + ') translate(' + -bounds.x + 'px,' + (-bounds.y) + 'px)';\n htmlLayer.style.transform = 'scale(' + scale + ') translate(' + -bounds.x + 'px,' + (-bounds.y) + 'px)';\n var ovw = document.getElementById(this.id + '_overviewlayer');\n ovw.setAttribute('transform', 'translate(' + (-bounds.x * scale) + ',' + (-bounds.y * scale) + ')');\n this.horizontalOffset = bounds.x * scale;\n this.verticalOffset = bounds.y * scale;\n var canvas = document.getElementById('overview_diagramLayer');\n var nativeLayer = getNativeLayer(this.element.id);\n var context = canvas.getContext('2d');\n var widthratio = (Number(this.model.width) / this.contentWidth);\n var heightratio = (Number(this.model.height) / this.contentHeight);\n widthratio = Math.min(widthratio, heightratio);\n nativeLayer.setAttribute('transform', 'translate('\n + (0) + ',' + (0) + '),scale('\n + widthratio + ')');\n context.setTransform(widthratio, 0, 0, widthratio, 0, 0);\n context.fillStyle = 'red';\n this.scrollOverviewRect(this.parent.scroller.horizontalOffset, this.parent.scroller.verticalOffset, this.parent.scroller.currentZoom);\n };\n // region - Event Handlers\n Overview.prototype.scrolled = function (evt) {\n if (this.event) {\n var bounds = this.scrollOverviewRect(this.parent.scroller.horizontalOffset, this.parent.scroller.verticalOffset, this.parent.scroller.currentZoom, true);\n this.updateOverviewrect(-bounds.x, -bounds.y, bounds.width, bounds.height);\n }\n };\n Overview.prototype.updateCursor = function (evt) {\n if (hasClass(evt.target, ('overviewresizer'))) {\n switch (evt.target.id) {\n case this.canvas.id + 'left':\n this.canvas.style.cursor = 'w-resize';\n break;\n case this.canvas.id + 'right':\n this.canvas.style.cursor = 'e-resize';\n break;\n case this.canvas.id + 'top':\n this.canvas.style.cursor = 'n-resize';\n break;\n case this.canvas.id + 'bottom':\n this.canvas.style.cursor = 's-resize';\n break;\n case this.canvas.id + 'topleft':\n this.canvas.style.cursor = 'nw-resize';\n break;\n case this.canvas.id + 'topright':\n this.canvas.style.cursor = 'ne-resize';\n break;\n case this.canvas.id + 'bottomleft':\n this.canvas.style.cursor = 'sw-resize';\n break;\n case this.canvas.id + 'bottomright':\n this.canvas.style.cursor = 'se-resize';\n break;\n }\n }\n else {\n this.canvas.style.cursor = 'default';\n }\n };\n Overview.prototype.mouseMove = function (evt) {\n this.event = false;\n this.updateCursor(evt);\n this.currentPoint = this.mousePosition(evt);\n if (this.actionName) {\n switch (this.actionName) {\n case 'draw':\n if (!this.inAction && (this.startPoint.x !== this.currentPoint.x || this.startPoint.y !== this.currentPoint.y)) {\n this.initHelper();\n this.inAction = true;\n }\n if (this.inAction) {\n this.updateHelper();\n }\n break;\n case 'scale':\n if (!this.inAction) {\n this.initHelper();\n this.inAction = true;\n }\n this.updateOverviewRectangle();\n break;\n case 'pan':\n if ((this.startPoint.x !== this.currentPoint.x || this.startPoint.y === this.currentPoint.y) || this.inAction) {\n this.inAction = true;\n this.translateOverviewRectangle();\n }\n break;\n }\n }\n this.prevPoint = this.currentPoint;\n };\n Overview.prototype.documentMouseUp = function (evt) {\n this.inAction = false;\n this.actionName = '';\n if (this.helper) {\n this.helper.parentNode.removeChild(this.helper);\n this.helper = null;\n }\n this.event = true;\n document.getElementById(this.canvas.id + 'overviewhandle').style.pointerEvents = 'all';\n };\n Overview.prototype.windowResize = function (evt) {\n var _this = this;\n if (this.resizeTo) {\n clearTimeout(this.resizeTo);\n }\n this.resizeTo = setTimeout(function () {\n var element = document.getElementById(_this.element.id);\n var bRect = element.getBoundingClientRect();\n _this.model.width = bRect.width;\n _this.model.height = bRect.height;\n _this.renderCanvas();\n _this.setParent(_this.sourceID);\n }, 10);\n return false;\n };\n /** @private */\n Overview.prototype.mouseDown = function (evt) {\n if (evt.target.id === this.canvas.id + '_overviewsvg') {\n this.actionName = 'draw';\n }\n if (evt.target.id === this.canvas.id + 'overviewrect') {\n this.actionName = 'pan';\n }\n if (hasClass(evt.target, 'overviewresizer')) {\n this.actionName = 'scale';\n switch (evt.target.id) {\n case this.canvas.id + 'left':\n this.resizeDirection = 'left';\n break;\n case this.canvas.id + 'right':\n this.resizeDirection = 'right';\n break;\n case this.canvas.id + 'top':\n this.resizeDirection = 'top';\n break;\n case this.canvas.id + 'bottom':\n this.resizeDirection = 'bottom';\n break;\n case this.canvas.id + 'topleft':\n this.resizeDirection = 'topleft';\n break;\n case this.canvas.id + 'topright':\n this.resizeDirection = 'topright';\n break;\n case this.canvas.id + 'bottomleft':\n this.resizeDirection = 'bottomleft';\n break;\n case this.canvas.id + 'bottomright':\n this.resizeDirection = 'bottomright';\n break;\n }\n }\n this.startPoint = this.prevPoint = this.mousePosition(evt);\n this.viewPortRatio = this.parent.scroller.viewPortWidth / this.parent.scroller.viewPortHeight;\n var overViewHandle = document.getElementById(this.canvas.id + 'overviewhandle');\n overViewHandle.style.pointerEvents = 'none';\n };\n Overview.prototype.mouseUp = function (evt) {\n this.currentPoint = this.mousePosition(evt);\n var offwidth = Number(this.model.width);\n var offheight = Number(this.model.height);\n if (this.actionName) {\n if ((this.startPoint.x !== this.currentPoint.x || this.startPoint.y !== this.currentPoint.y)) {\n if (this.actionName === 'pan') {\n var i = 0;\n }\n else {\n if (this.helper) {\n var bounds = (this.element.getElementsByTagName('rect')[10]).getBBox();\n this.resizeDirection = this.resizeDirection || '';\n var x = bounds.x;\n var y = bounds.y;\n var width = bounds.width;\n var height = bounds.height;\n var adjust = this.resizeDirection === 'topleft' || this.resizeDirection === 'topright' ||\n this.resizeDirection === 'bottomleft' || this.resizeDirection === 'bottomright';\n this.renderOverviewRect(x, y, width, height);\n }\n }\n }\n else {\n if (evt.target.id === this.canvas.id + '_overviewsvg' || evt.target.id === 'helper') {\n var svg = this.element.getElementsByTagName('svg')[2];\n var g = svg.getElementById(this.canvas.id\n + 'overviewrect');\n var bounds = g.getBBox();\n var width = bounds.width;\n var height = bounds.height;\n this.inAction = true;\n this.actionName = 'pan';\n this.renderOverviewRect(this.currentPoint.x - width / 2, this.currentPoint.y - height / 2, width, height);\n this.inAction = false;\n }\n }\n }\n if (this.helper) {\n this.helper.parentNode.removeChild(this.helper);\n this.helper = null;\n }\n this.actionName = '';\n this.startPoint = null;\n this.currentPoint = null;\n this.prevPoint = null;\n this.helper = null;\n this.viewPortRatio = 1;\n this.resizeDirection = '';\n this.inAction = false;\n this.event = true;\n document.getElementById(this.canvas.id + 'overviewhandle').style.pointerEvents = 'all';\n };\n Overview.prototype.initHelper = function () {\n var g = this.element.getElementsByTagName('svg')[2];\n var scale = this.parent.scroller.currentZoom;\n var x = this.startPoint.x;\n var y = this.startPoint.y;\n var width = 1;\n var height = 1;\n if (this.actionName === 'scale') {\n var rect = g.\n getElementById(this.canvas.id + 'overviewrect');\n var bounds = rect.getBBox();\n x = bounds.x;\n y = bounds.y;\n width = bounds.width;\n height = bounds.height;\n }\n var selectionRect = createSvgElement('rect', {\n 'id': 'helper', x: x, y: y, width: width, height: height,\n 'fill': 'transparent', 'stroke': 'gray', 'stroke-dasharray': '2 2', 'shape-rendering': 'crispEdges'\n });\n var overviewLayer = g.getElementById(this.id + '_overviewlayer');\n overviewLayer.appendChild(selectionRect);\n this.helper = selectionRect;\n };\n Overview.prototype.mousePosition = function (evt) {\n var touchArg;\n var offsetX;\n var offsetY;\n if (evt.type.indexOf('touch') !== -1) {\n touchArg = evt;\n var pageX = touchArg.changedTouches[0].clientX;\n var pageY = touchArg.changedTouches[0].clientY;\n offsetX = pageX - this.element.offsetLeft;\n offsetY = pageY - this.element.offsetTop;\n }\n else {\n offsetX = evt.clientX;\n offsetY = evt.clientY;\n }\n var boundingRect = this.element.getBoundingClientRect();\n offsetX = offsetX - boundingRect.left;\n offsetY = offsetY - boundingRect.top;\n return { x: offsetX + this.horizontalOffset, y: offsetY + this.verticalOffset };\n };\n // end region - Event handlers\n /**\n * To destroy the Overview\n * @return {void}\n * @private\n */\n Overview.prototype.destroy = function () {\n this.unWireEvents();\n this.notify('destroy', {});\n _super.prototype.destroy.call(this);\n if (document.getElementById(this.element.id)) {\n this.element.classList.remove('e-overview');\n var content = document.getElementById(this.element.id + '_canvas');\n if (content) {\n this.element.removeChild(content);\n }\n }\n this.parent.views.splice(this.parent.views.indexOf(this.id), 1);\n this.diagramLayerDiv = null;\n this.canvas = null;\n this.parent = null;\n };\n /**\n * Get module name.\n */\n Overview.prototype.getModuleName = function () {\n /**\n * Returns the module name\n */\n return 'Overview';\n };\n __decorate([\n Property('100%')\n ], Overview.prototype, \"width\", void 0);\n __decorate([\n Property('100%')\n ], Overview.prototype, \"height\", void 0);\n __decorate([\n Property('')\n ], Overview.prototype, \"sourceID\", void 0);\n __decorate([\n Event()\n ], Overview.prototype, \"created\", void 0);\n return Overview;\n}(Component));\nexport { Overview };\n","import * as index from '@syncfusion/ej2-diagrams';\nindex.Diagram.Inject( index.HierarchicalTree,index.MindMap,index.RadialTree,index.ComplexHierarchicalTree,index.DataBinding,index.Snapping,index.PrintAndExport,index.BpmnDiagrams,index.SymmetricLayout,index.ConnectorBridging,index.UndoRedo,index.LayoutAnimation,index.DiagramContextMenu,index.ConnectorEditing);\nexport * from '@syncfusion/ej2-diagrams';\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, EventHandler, addClass, append, Property, Event, L10n, compile } from '@syncfusion/ej2-base';\nimport { setStyleAttribute, extend, removeClass, createElement, prepend, isNullOrUndefined, detach, getValue } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, rippleEffect, ChildProperty, Complex } from '@syncfusion/ej2-base';\nimport { DataManager, Query, DataUtil } from '@syncfusion/ej2-data';\nimport { ListBase, cssClass as ListBaseClasses } from '@syncfusion/ej2-lists';\nvar FieldSettings = /** @class */ (function (_super) {\n __extends(FieldSettings, _super);\n function FieldSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property()\n ], FieldSettings.prototype, \"text\", void 0);\n __decorate([\n Property()\n ], FieldSettings.prototype, \"value\", void 0);\n __decorate([\n Property()\n ], FieldSettings.prototype, \"iconCss\", void 0);\n __decorate([\n Property()\n ], FieldSettings.prototype, \"groupBy\", void 0);\n __decorate([\n Property()\n ], FieldSettings.prototype, \"htmlAttributes\", void 0);\n return FieldSettings;\n}(ChildProperty));\nexport { FieldSettings };\nexport var dropDownBaseClasses = {\n root: 'e-dropdownbase',\n rtl: 'e-rtl',\n content: 'e-content',\n selected: 'e-active',\n hover: 'e-hover',\n noData: 'e-nodata',\n fixedHead: 'e-fixed-head',\n focus: 'e-item-focus',\n li: ListBaseClasses.li,\n group: ListBaseClasses.group,\n disabled: ListBaseClasses.disabled,\n grouping: 'e-dd-group'\n};\n/**\n * DropDownBase component will generate the list items based on given data and act as base class to drop-down related components\n */\nvar DropDownBase = /** @class */ (function (_super) {\n __extends(DropDownBase, _super);\n /**\n * * Constructor for DropDownBase class\n */\n function DropDownBase(options, element) {\n return _super.call(this, options, element) || this;\n }\n ;\n DropDownBase.prototype.getPropObject = function (prop, newProp, oldProp) {\n var newProperty = new Object();\n var oldProperty = new Object();\n // tslint:disable-next-line:no-function-constructor-with-string-args\n var propName = new Function('prop', 'return prop');\n newProperty[propName(prop)] = newProp[propName(prop)];\n oldProperty[propName(prop)] = oldProp[propName(prop)];\n var data = new Object();\n data.newProperty = newProperty;\n data.oldProperty = oldProperty;\n return data;\n };\n DropDownBase.prototype.getValueByText = function (text, ignoreCase, ignoreAccent) {\n var value = null;\n if (!isNullOrUndefined(this.listData)) {\n if (ignoreCase) {\n value = this.checkValueCase(text, true, ignoreAccent);\n }\n else {\n value = this.checkValueCase(text, false, ignoreAccent);\n }\n }\n return value;\n };\n ;\n DropDownBase.prototype.checkValueCase = function (text, ignoreCase, ignoreAccent, isTextByValue) {\n var _this = this;\n var value = null;\n if (isTextByValue) {\n value = text;\n }\n var dataSource = this.listData;\n var fields = this.fields;\n var type = this.typeOfData(dataSource).typeof;\n if (type === 'string' || type === 'number' || type === 'boolean') {\n for (var _i = 0, dataSource_1 = dataSource; _i < dataSource_1.length; _i++) {\n var item = dataSource_1[_i];\n if (!isNullOrUndefined(item)) {\n if (ignoreAccent) {\n value = this.checkingAccent(String(item), text, ignoreCase);\n }\n else {\n if (ignoreCase) {\n if (this.checkIgnoreCase(String(item), text)) {\n value = this.getItemValue(String(item), text, ignoreCase);\n }\n }\n else {\n if (this.checkNonIgnoreCase(String(item), text)) {\n value = this.getItemValue(String(item), text, ignoreCase, isTextByValue);\n }\n }\n }\n }\n }\n }\n else {\n if (ignoreCase) {\n dataSource.filter(function (item) {\n if (_this.checkIgnoreCase(getValue(fields.text, item).toString(), text)) {\n value = getValue(fields.value, item);\n }\n });\n }\n else {\n if (isTextByValue) {\n dataSource.filter(function (item) {\n var itemValue = getValue(fields.value, item);\n if (!isNullOrUndefined(itemValue) && _this.stringTrim(itemValue) === value.toString()) {\n value = getValue(fields.text, item);\n }\n });\n }\n else {\n dataSource.filter(function (item) {\n if (_this.checkNonIgnoreCase(getValue(fields.text, item), text)) {\n value = getValue(fields.value, item);\n }\n });\n }\n }\n }\n return value;\n };\n DropDownBase.prototype.checkingAccent = function (item, text, ignoreCase) {\n var dataItem = DataUtil.ignoreDiacritics(String(item));\n var textItem = DataUtil.ignoreDiacritics(text.toString());\n var value = null;\n if (ignoreCase) {\n if (this.checkIgnoreCase(dataItem, textItem)) {\n value = this.getItemValue(String(item), text, ignoreCase);\n }\n }\n else {\n if (this.checkNonIgnoreCase(String(item), text)) {\n value = this.getItemValue(String(item), text, ignoreCase);\n }\n }\n return value;\n };\n DropDownBase.prototype.checkIgnoreCase = function (item, text) {\n return String(item).toLowerCase() === text.toString().toLowerCase() ? true : false;\n };\n DropDownBase.prototype.checkNonIgnoreCase = function (item, text) {\n return String(item) === text.toString() ? true : false;\n };\n DropDownBase.prototype.getItemValue = function (dataItem, typedText, ignoreCase, isTextByValue) {\n var value = null;\n var dataSource = this.listData;\n var type = this.typeOfData(dataSource).typeof;\n if (isTextByValue) {\n value = dataItem.toString();\n }\n else {\n if (ignoreCase) {\n value = type === 'string' ? String(dataItem) : this.getFormattedValue(String(dataItem));\n }\n else {\n value = type === 'string' ? typedText : this.getFormattedValue(typedText);\n }\n }\n return value;\n };\n DropDownBase.prototype.l10nUpdate = function (actionFailure) {\n if (this.noRecordsTemplate !== 'No Records Found' || this.actionFailureTemplate !== 'The Request Failed') {\n var template = actionFailure ? this.actionFailureTemplate : this.noRecordsTemplate;\n var compiledString = void 0;\n this.list.innerHTML = '';\n compiledString = compile(template);\n for (var _i = 0, _a = compiledString({}); _i < _a.length; _i++) {\n var item = _a[_i];\n this.list.appendChild(item);\n }\n }\n else {\n var l10nLocale = { noRecordsTemplate: 'No Records Found', actionFailureTemplate: 'The Request Failed' };\n this.l10n = new L10n('dropdowns', l10nLocale, this.locale);\n this.list.innerHTML = actionFailure ?\n this.l10n.getConstant('actionFailureTemplate') : this.l10n.getConstant('noRecordsTemplate');\n }\n };\n DropDownBase.prototype.getTextByValue = function (value) {\n var text;\n text = this.checkValueCase(value, false, false, true);\n return text;\n };\n DropDownBase.prototype.stringTrim = function (item) {\n if (!isNullOrUndefined(item)) {\n var itemValue = item.toString();\n return itemValue.trim();\n }\n return item.toString();\n };\n DropDownBase.prototype.getFormattedValue = function (value) {\n if (this.listData && this.listData.length) {\n var item = this.typeOfData(this.listData);\n if (typeof getValue((this.fields.value ? this.fields.value : 'value'), item.item) === 'number'\n || item.typeof === 'number') {\n return parseInt(value, 10);\n }\n if (typeof getValue((this.fields.value ? this.fields.value : 'value'), item.item) === 'boolean'\n || item.typeof === 'boolean') {\n return (value === 'true');\n }\n }\n return value;\n };\n /**\n * Sets RTL to dropdownbase wrapper\n */\n DropDownBase.prototype.setEnableRtl = function () {\n if (this.list) {\n this.enableRtlElements.push(this.list);\n }\n this.enableRtl ? addClass(this.enableRtlElements, dropDownBaseClasses.rtl) :\n removeClass(this.enableRtlElements, dropDownBaseClasses.rtl);\n };\n ;\n /**\n * Initialize the Component.\n */\n DropDownBase.prototype.initialize = function () {\n this.bindEvent = true;\n if (this.element.tagName === 'UL') {\n var jsonElement = ListBase.createJsonFromElement(this.element);\n this.setProperties({ fields: { text: 'text', value: 'text' } }, true);\n this.resetList(jsonElement, this.fields);\n }\n else if (this.element.tagName === 'SELECT') {\n var dataSource = this.dataSource instanceof Array ? (this.dataSource.length > 0 ? true : false)\n : !isNullOrUndefined(this.dataSource) ? true : false;\n if (!dataSource) {\n this.renderItemsBySelect();\n }\n }\n else {\n this.setListData(this.dataSource, this.fields, this.query);\n }\n };\n ;\n /**\n * Get the properties to be maintained in persisted state.\n */\n DropDownBase.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n ;\n /**\n * Sets the enabled state to DropDownBase.\n */\n DropDownBase.prototype.setEnabled = function () {\n if (this.enabled) {\n this.element.setAttribute('aria-disabled', 'false');\n }\n else {\n this.element.setAttribute('aria-disabled', 'true');\n }\n };\n ;\n DropDownBase.prototype.renderItemsBySelect = function () {\n var element = this.element;\n var fields = { value: 'value', text: 'text' };\n var jsonElement = [];\n var group = element.querySelectorAll('select>optgroup');\n var option = element.querySelectorAll('select>option');\n this.getJSONfromOption(jsonElement, option, fields);\n if (group.length) {\n for (var i = 0; i < group.length; i++) {\n var item = group[i];\n var optionGroup = {};\n optionGroup[fields.text] = item.label;\n optionGroup.isHeader = true;\n var child = item.querySelectorAll('option');\n jsonElement.push(optionGroup);\n this.getJSONfromOption(jsonElement, child, fields);\n }\n var items = element.querySelectorAll('select>option');\n }\n this.fields.text = fields.text;\n this.fields.value = fields.value;\n this.resetList(jsonElement, fields);\n };\n DropDownBase.prototype.getJSONfromOption = function (items, options, fields) {\n for (var _i = 0, options_1 = options; _i < options_1.length; _i++) {\n var option = options_1[_i];\n var json = {};\n json[fields.text] = option.innerText;\n json[fields.value] = option.getAttribute(fields.value) ? option.getAttribute(fields.value) : option.innerText;\n items.push(json);\n }\n };\n /**\n * Execute before render the list items\n * @private\n */\n DropDownBase.prototype.preRender = function () {\n // there is no event handler\n this.scrollTimer = -1;\n this.enableRtlElements = [];\n this.isRequested = false;\n };\n /**\n * Creates the list items of DropDownBase component.\n */\n DropDownBase.prototype.setListData = function (dataSource, fields, query) {\n var _this = this;\n fields = fields ? fields : this.fields;\n var ulElement;\n this.isActive = true;\n if (dataSource instanceof DataManager) {\n var eventArgs = { cancel: false, data: dataSource, query: query };\n this.trigger('actionBegin', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n this.showSpinner();\n this.isRequested = true;\n eventArgs.data.executeQuery(this.getQuery(eventArgs.query)).then(function (e) {\n _this.trigger('actionComplete', e);\n if (e.cancel) {\n return;\n }\n var listItems = e.result;\n ulElement = _this.renderItems(listItems, fields);\n _this.onActionComplete(ulElement, listItems, e);\n _this.isRequested = false;\n _this.hideSpinner();\n _this.trigger('dataBound', { items: listItems, e: e });\n }).catch(function (e) {\n _this.isRequested = false;\n _this.onActionFailure(e);\n _this.hideSpinner();\n });\n }\n else {\n this.showSpinner();\n var dataManager = new DataManager(dataSource);\n var listItems = (this.getQuery(query)).executeLocal(dataManager);\n ulElement = this.renderItems(listItems, fields);\n this.onActionComplete(ulElement, listItems);\n this.hideSpinner();\n this.trigger('dataBound', { items: listItems });\n }\n };\n DropDownBase.prototype.showSpinner = function () {\n // Used this method in component side.\n };\n DropDownBase.prototype.hideSpinner = function () {\n // Used this method in component side.\n };\n DropDownBase.prototype.onActionFailure = function (e) {\n this.liCollections = [];\n this.trigger('actionFailure', e);\n this.l10nUpdate(true);\n addClass([this.list], dropDownBaseClasses.noData);\n };\n DropDownBase.prototype.onActionComplete = function (ulElement, list, e) {\n this.listData = list;\n this.list.innerHTML = '';\n this.list.appendChild(ulElement);\n this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);\n this.ulElement = this.list.querySelector('ul');\n this.postRender(this.list, list, this.bindEvent);\n };\n DropDownBase.prototype.postRender = function (listElement, list, bindEvent) {\n var focusItem = listElement.querySelector('.' + dropDownBaseClasses.li);\n var selectedItem = listElement.querySelector('.' + dropDownBaseClasses.selected);\n if (focusItem && !selectedItem) {\n addClass([focusItem], dropDownBaseClasses.focus);\n }\n if (list.length <= 0) {\n this.l10nUpdate();\n addClass([listElement], dropDownBaseClasses.noData);\n }\n else {\n listElement.classList.remove(dropDownBaseClasses.noData);\n }\n if (this.groupTemplate) {\n this.renderGroupTemplate(listElement);\n }\n };\n /**\n * Get the query to do the data operation before list item generation.\n */\n DropDownBase.prototype.getQuery = function (query) {\n return query ? query : this.query ? this.query : new Query();\n };\n /**\n * To render the template content for group header element.\n */\n DropDownBase.prototype.renderGroupTemplate = function (listEle) {\n if (this.fields.groupBy !== null && this.dataSource || this.element.querySelector('.' + dropDownBaseClasses.group)) {\n var dataSource = this.dataSource;\n var headerItems = listEle.querySelectorAll('.' + dropDownBaseClasses.group);\n var tempHeaders = ListBase.renderGroupTemplate(this.groupTemplate, dataSource, this.fields.properties, headerItems);\n }\n };\n /**\n * To create the ul li list items\n */\n DropDownBase.prototype.createListItems = function (dataSource, fields) {\n if (dataSource && fields.groupBy || this.element.querySelector('optgroup')) {\n if (fields.groupBy) {\n if (this.sortOrder !== 'None') {\n dataSource = this.getSortedDataSource(dataSource);\n }\n dataSource = ListBase.groupDataSource(dataSource, fields.properties, this.sortOrder);\n }\n addClass([this.list], dropDownBaseClasses.grouping);\n }\n else {\n dataSource = this.getSortedDataSource(dataSource);\n }\n var options = this.listOption(dataSource, fields);\n return ListBase.createList(dataSource, options, true);\n };\n ;\n DropDownBase.prototype.listOption = function (dataSource, fields) {\n var iconCss = isNullOrUndefined(fields.iconCss) ? false : true;\n var options = (fields.text !== null || fields.value !== null) ? {\n fields: fields.properties,\n showIcon: iconCss, ariaAttributes: { groupItemRole: 'presentation' }\n } : { fields: { value: 'text' } };\n return extend({}, options, fields, true);\n };\n ;\n DropDownBase.prototype.setFloatingHeader = function (e) {\n if (isNullOrUndefined(this.fixedHeaderElement)) {\n this.fixedHeaderElement = createElement('div', { className: dropDownBaseClasses.fixedHead });\n if (!this.list.querySelector('li').classList.contains(dropDownBaseClasses.group)) {\n this.fixedHeaderElement.style.display = 'none';\n }\n prepend([this.fixedHeaderElement], this.list);\n this.setFixedHeader();\n }\n if (!isNullOrUndefined(this.fixedHeaderElement) && this.fixedHeaderElement.style.zIndex === '0') {\n this.setFixedHeader();\n }\n this.scrollStop(e);\n };\n DropDownBase.prototype.scrollStop = function (e) {\n var target = e.target;\n var liHeight = parseInt(getComputedStyle(this.liCollections[0], null).getPropertyValue('height'), 10);\n var topIndex = Math.round(target.scrollTop / liHeight);\n var liCollections = this.ulElement.querySelectorAll('li');\n for (var i = topIndex; i > -1; i--) {\n if (!isNullOrUndefined(liCollections[i]) && liCollections[i].classList.contains(dropDownBaseClasses.group)) {\n var currentLi = liCollections[i];\n this.fixedHeaderElement.innerHTML = currentLi.innerHTML;\n this.fixedHeaderElement.style.top = e.target.scrollTop + 'px';\n this.fixedHeaderElement.style.display = 'block';\n break;\n }\n else {\n this.fixedHeaderElement.style.display = 'none';\n this.fixedHeaderElement.style.top = 'none';\n }\n }\n };\n /**\n * To render the list items\n */\n DropDownBase.prototype.renderItems = function (listData, fields) {\n var ulElement;\n if (this.itemTemplate && listData) {\n var dataSource = listData;\n if (dataSource && fields.groupBy) {\n if (this.sortOrder !== 'None') {\n dataSource = this.getSortedDataSource(dataSource);\n }\n dataSource = ListBase.groupDataSource(dataSource, fields.properties, this.sortOrder);\n }\n else {\n dataSource = this.getSortedDataSource(dataSource);\n }\n ulElement = this.templateListItem(dataSource, fields);\n }\n else {\n ulElement = this.createListItems(listData, fields);\n }\n return ulElement;\n };\n ;\n DropDownBase.prototype.templateListItem = function (dataSource, fields) {\n var option = this.listOption(dataSource, fields);\n return ListBase.renderContentTemplate(this.itemTemplate, dataSource, fields.properties, option);\n };\n DropDownBase.prototype.typeOfData = function (items) {\n var item = { typeof: null, item: null };\n for (var i = 0; (!isNullOrUndefined(items) && i < items.length); i++) {\n if (!isNullOrUndefined(items[i])) {\n return item = { typeof: typeof items[i], item: items[i] };\n }\n }\n return item;\n };\n DropDownBase.prototype.setFixedHeader = function () {\n this.list.parentElement.style.display = 'block';\n var liWidth = this.liCollections[0].offsetWidth;\n this.fixedHeaderElement.style.width = liWidth.toString() + 'px';\n setStyleAttribute(this.fixedHeaderElement, { zIndex: 10 });\n var firstLi = this.ulElement.querySelector('.' + dropDownBaseClasses.group);\n this.fixedHeaderElement.innerHTML = firstLi.innerHTML;\n };\n DropDownBase.prototype.getSortedDataSource = function (dataSource) {\n if (dataSource && this.sortOrder !== 'None') {\n var textField = this.fields.text ? this.fields.text : 'text';\n dataSource = ListBase.getDataSource(dataSource, ListBase.addSorting(this.sortOrder, textField));\n }\n return dataSource;\n };\n /**\n * Return the index of item which matched with given value in data source\n */\n DropDownBase.prototype.getIndexByValue = function (value) {\n var index;\n var listItems = this.getItems();\n for (var i = 0; i < listItems.length; i++) {\n if (!isNullOrUndefined(value) && listItems[i].getAttribute('data-value') === value.toString()) {\n index = i;\n break;\n }\n }\n return index;\n };\n ;\n /**\n * To dispatch the event manually\n */\n DropDownBase.prototype.dispatchEvent = function (element, type) {\n var evt = document.createEvent('HTMLEvents');\n evt.initEvent(type, false, true);\n element.dispatchEvent(evt);\n };\n /**\n * To set the current fields\n */\n DropDownBase.prototype.setFields = function () {\n var fields = this.fields;\n if (this.fields.value && !this.fields.text) {\n this.fields.text = this.fields.value;\n }\n else if (!fields.value && fields.text) {\n this.fields.value = this.fields.text;\n }\n else if (!this.fields.value && !this.fields.text) {\n this.fields.value = this.fields.text = 'text';\n }\n };\n /**\n * reset the items list.\n */\n DropDownBase.prototype.resetList = function (dataSource, fields, query) {\n if (this.list) {\n this.setListData(dataSource, fields, query);\n }\n };\n DropDownBase.prototype.updateSelection = function () {\n // This is for after added the item, need to update the selected index values.\n };\n DropDownBase.prototype.renderList = function () {\n // This is for render the list items.\n this.render();\n };\n DropDownBase.prototype.updateDataSource = function (prop) {\n this.resetList(this.dataSource);\n };\n DropDownBase.prototype.setUpdateInitial = function (props, newProp) {\n if (!isNullOrUndefined(newProp.fields)) {\n this.setFields();\n }\n for (var j = 0; props.length > j; j++) {\n if (newProp[props[j]]) {\n this.updateDataSource(props[j]);\n }\n }\n };\n /**\n * When property value changes happened, then onPropertyChanged method will execute the respective changes in this component.\n * @private\n */\n DropDownBase.prototype.onPropertyChanged = function (newProp, oldProp) {\n this.setUpdateInitial(['query', 'sortOrder', 'dataSource', 'itemTemplate'], newProp);\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'query':\n case 'sortOrder':\n case 'dataSource':\n case 'itemTemplate':\n break;\n case 'enableRtl':\n this.setEnableRtl();\n break;\n case 'enabled':\n this.setEnabled();\n break;\n case 'groupTemplate':\n this.renderGroupTemplate(this.list);\n if (this.ulElement && this.fixedHeaderElement) {\n var firstLi = this.ulElement.querySelector('.' + dropDownBaseClasses.group);\n this.fixedHeaderElement.innerHTML = firstLi.innerHTML;\n }\n break;\n case 'locale':\n if (this.list && (!isNullOrUndefined(this.liCollections) && this.liCollections.length === 0)) {\n this.l10nUpdate();\n }\n break;\n case 'zIndex':\n this.setProperties({ zIndex: newProp.zIndex }, true);\n this.setZIndex();\n break;\n }\n }\n };\n ;\n /**\n * Build and render the component\n * @private\n */\n DropDownBase.prototype.render = function (isEmptyData) {\n this.list = createElement('div', { className: dropDownBaseClasses.content, attrs: { 'tabindex': '0' } });\n this.list.classList.add(dropDownBaseClasses.root);\n this.setFields();\n var rippleModel = { duration: 300, selector: '.' + dropDownBaseClasses.li };\n this.rippleFun = rippleEffect(this.list, rippleModel);\n var group = this.element.querySelector('select>optgroup');\n if (this.fields.groupBy || !isNullOrUndefined(group)) {\n EventHandler.add(this.list, 'scroll', this.setFloatingHeader, this);\n }\n if (this.getModuleName() === 'dropdownbase') {\n if (this.element.getAttribute('tabindex')) {\n this.list.setAttribute('tabindex', this.element.getAttribute('tabindex'));\n }\n removeClass([this.element], dropDownBaseClasses.root);\n this.element.style.display = 'none';\n var wrapperElement = document.createElement('div');\n this.element.parentElement.insertBefore(wrapperElement, this.element);\n wrapperElement.appendChild(this.element);\n wrapperElement.appendChild(this.list);\n }\n this.setEnableRtl();\n this.setEnabled();\n if (!isEmptyData) {\n this.initialize();\n }\n };\n ;\n /**\n * Return the module name of this component.\n * @private\n */\n DropDownBase.prototype.getModuleName = function () {\n return 'dropdownbase';\n };\n ;\n /**\n * Gets all the list items bound on this component.\n * @returns Element[].\n */\n DropDownBase.prototype.getItems = function () {\n return this.ulElement.querySelectorAll('.' + dropDownBaseClasses.li);\n };\n ;\n /**\n * Adds a new item to the popup list. By default, new item appends to the list as the last item,\n * but you can insert based on the index parameter.\n * @param { Object[] } items - Specifies an array of JSON data or a JSON data.\n * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.\n * @return {void}.\n */\n DropDownBase.prototype.addItem = function (items, itemIndex) {\n if (!this.list || this.list.textContent === this.noRecordsTemplate) {\n this.renderList();\n }\n var itemsCount = this.getItems().length;\n var selectedItemValue = this.list.querySelector('.' + dropDownBaseClasses.selected);\n items = (items instanceof Array ? items : [items]);\n var index;\n index = (isNullOrUndefined(itemIndex) || itemIndex < 0 || itemIndex > itemsCount - 1) ? itemsCount : itemIndex;\n var fields = this.fields;\n var liCollections = [];\n for (var i = 0; i < items.length; i++) {\n var item = items[i];\n var li = createElement('li', { className: dropDownBaseClasses.li, id: 'option-add-' + i });\n li.setAttribute('data-value', getValue(fields.value, item));\n li.setAttribute('role', 'option');\n li.appendChild(document.createTextNode(getValue(fields.text, item)));\n liCollections.push(li);\n this.listData.push(item);\n this.updateActionCompleteData(li, item);\n }\n if (itemsCount === 0 && isNullOrUndefined(this.list.querySelector('ul'))) {\n this.list.innerHTML = '';\n this.list.appendChild(this.ulElement);\n append(liCollections, this.ulElement);\n }\n else {\n for (var i = 0; i < items.length; i++) {\n if (this.liCollections[index]) {\n this.liCollections[index].parentNode.insertBefore(liCollections[i], this.liCollections[index]);\n }\n else {\n this.ulElement.appendChild(liCollections[i]);\n }\n var tempLi = [].slice.call(this.liCollections);\n tempLi.splice(index, 0, liCollections[i]);\n this.liCollections = tempLi;\n index += 1;\n }\n }\n if (selectedItemValue || itemIndex === 0) {\n this.updateSelection();\n }\n };\n DropDownBase.prototype.validationAttribute = function (target, hidden) {\n var name = target.getAttribute('name') ? target.getAttribute('name') : target.getAttribute('id');\n hidden.setAttribute('name', name);\n target.removeAttribute('name');\n var attributes = ['required', 'aria-required', 'form'];\n for (var i = 0; i < attributes.length; i++) {\n if (!target.getAttribute(attributes[i])) {\n continue;\n }\n var attr = target.getAttribute(attributes[i]);\n hidden.setAttribute(attributes[i], attr);\n target.removeAttribute(attributes[i]);\n }\n };\n DropDownBase.prototype.setZIndex = function () {\n // this is for component wise\n };\n DropDownBase.prototype.updateActionCompleteData = function (li, item) {\n // this is for ComboBox custom value\n };\n /**\n * Gets the data Object that matches the given value.\n * @param { string | number } value - Specifies the value of the list item.\n * @returns Object.\n */\n DropDownBase.prototype.getDataByValue = function (value) {\n if (!isNullOrUndefined(this.listData)) {\n var type = this.typeOfData(this.listData).typeof;\n if (type === 'string' || type === 'number' || type === 'boolean') {\n for (var _i = 0, _a = this.listData; _i < _a.length; _i++) {\n var item = _a[_i];\n if (!isNullOrUndefined(item) && item === value) {\n return item;\n }\n }\n }\n else {\n for (var _b = 0, _c = this.listData; _b < _c.length; _b++) {\n var item = _c[_b];\n if (!isNullOrUndefined(item) && getValue((this.fields.value ? this.fields.value : 'value'), item) === value) {\n return item;\n }\n }\n }\n }\n return null;\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers. It also removes the attributes and classes.\n * @method destroy\n * @return {void}.\n */\n DropDownBase.prototype.destroy = function () {\n if (document.body.contains(this.list)) {\n EventHandler.remove(this.list, 'scroll', this.setFloatingHeader);\n if (!isNullOrUndefined(this.rippleFun)) {\n this.rippleFun();\n }\n detach(this.list);\n }\n _super.prototype.destroy.call(this);\n };\n ;\n __decorate([\n Complex({ text: null, value: null, iconCss: null, groupBy: null }, FieldSettings)\n ], DropDownBase.prototype, \"fields\", void 0);\n __decorate([\n Property(false)\n ], DropDownBase.prototype, \"enableRtl\", void 0);\n __decorate([\n Property(false)\n ], DropDownBase.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(null)\n ], DropDownBase.prototype, \"itemTemplate\", void 0);\n __decorate([\n Property(null)\n ], DropDownBase.prototype, \"groupTemplate\", void 0);\n __decorate([\n Property('No Records Found')\n ], DropDownBase.prototype, \"noRecordsTemplate\", void 0);\n __decorate([\n Property('The Request Failed')\n ], DropDownBase.prototype, \"actionFailureTemplate\", void 0);\n __decorate([\n Property('None')\n ], DropDownBase.prototype, \"sortOrder\", void 0);\n __decorate([\n Property(true)\n ], DropDownBase.prototype, \"enabled\", void 0);\n __decorate([\n Property([])\n ], DropDownBase.prototype, \"dataSource\", void 0);\n __decorate([\n Property(null)\n ], DropDownBase.prototype, \"query\", void 0);\n __decorate([\n Property(1000)\n ], DropDownBase.prototype, \"zIndex\", void 0);\n __decorate([\n Property(false)\n ], DropDownBase.prototype, \"ignoreAccent\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"actionBegin\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"actionComplete\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"actionFailure\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"select\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"dataBound\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"destroyed\", void 0);\n DropDownBase = __decorate([\n NotifyPropertyChanges\n ], DropDownBase);\n return DropDownBase;\n}(Component));\nexport { DropDownBase };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n///
\nimport { EventHandler, Property, Event, compile, KeyboardEvents, createElement, append } from '@syncfusion/ej2-base';\nimport { attributes, isNullOrUndefined, getUniqueID, formatUnit, isUndefined, getValue } from '@syncfusion/ej2-base';\nimport { Animation, Browser, NotifyPropertyChanges } from '@syncfusion/ej2-base';\nimport { addClass, removeClass, setStyleAttribute, closest, prepend, detach, classList } from '@syncfusion/ej2-base';\nimport { Popup, isCollide, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { incrementalSearch } from '../common/incremental-search';\nimport { DropDownBase, dropDownBaseClasses } from '../drop-down-base/drop-down-base';\n/* tslint:disable */\nimport { DataManager, Query } from '@syncfusion/ej2-data';\n// don't use space in classnames \nexport var dropDownListClasses = {\n root: 'e-dropdownlist',\n hover: dropDownBaseClasses.hover,\n selected: dropDownBaseClasses.selected,\n rtl: dropDownBaseClasses.rtl,\n li: dropDownBaseClasses.li,\n disable: dropDownBaseClasses.disabled,\n base: dropDownBaseClasses.root,\n focus: dropDownBaseClasses.focus,\n input: 'e-input-group',\n inputFocus: 'e-input-focus',\n icon: 'e-input-group-icon e-ddl-icon',\n iconAnimation: 'e-icon-anim',\n value: 'e-input-value',\n device: 'e-ddl-device',\n backIcon: 'e-input-group-icon e-back-icon e-icons',\n filterBarClearIcon: 'e-input-group-icon e-clear-icon e-icons',\n filterInput: 'e-input-filter',\n filterParent: 'e-filter-parent',\n mobileFilter: 'e-ddl-device-filter',\n footer: 'e-ddl-footer',\n header: 'e-ddl-header',\n clearIcon: 'e-clear-icon',\n clearIconHide: 'e-clear-icon-hide',\n popupFullScreen: 'e-popup-full-page',\n disableIcon: 'e-ddl-disable-icon',\n hiddenElement: 'e-ddl-hidden'\n};\nvar inputObject = {\n container: null,\n buttons: []\n};\n/**\n * The DropDownList component contains a list of predefined values from which you can\n * choose a single value.\n * ```html\n *
\n * ```\n * ```typescript\n * let dropDownListObj:DropDownList = new DropDownList();\n * dropDownListObj.appendTo(\"#list\");\n * ```\n */\nvar DropDownList = /** @class */ (function (_super) {\n __extends(DropDownList, _super);\n /**\n * * Constructor for creating the DropDownList component.\n */\n function DropDownList(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.previousValue = null;\n return _this;\n }\n ;\n /**\n * Initialize the event handler.\n * @private\n */\n DropDownList.prototype.preRender = function () {\n this.element.style.opacity = '0';\n this.initializeData();\n _super.prototype.preRender.call(this);\n this.activeIndex = this.index;\n this.queryString = '';\n };\n DropDownList.prototype.initializeData = function () {\n this.isPopupOpen = false;\n this.isDocumentClick = false;\n this.isInteracted = false;\n this.isFilterFocus = false;\n this.beforePopupOpen = false;\n this.initial = true;\n this.initRemoteRender = false;\n this.isNotSearchList = false;\n this.isTyped = false;\n this.isSelected = false;\n this.preventFocus = false;\n this.preventAutoFill = false;\n this.isValidKey = false;\n this.typedString = '';\n this.isEscapeKey = false;\n this.isPreventBlur = false;\n this.isTabKey = false;\n this.actionCompleteData = { isUpdated: false };\n this.prevSelectPoints = {};\n this.isSelectCustom = false;\n this.isDropDownClick = false;\n this.preventAltUp = false;\n this.isCustomFilter = false;\n this.isSecondClick = false;\n this.keyConfigure = {\n tab: 'tab',\n enter: '13',\n escape: '27',\n end: '35',\n home: '36',\n down: '40',\n up: '38',\n pageUp: '33',\n pageDown: '34',\n open: 'alt+40',\n close: 'shift+tab',\n hide: 'alt+38',\n space: '32'\n };\n };\n DropDownList.prototype.setZIndex = function () {\n if (this.popupObj) {\n this.popupObj.setProperties({ 'zIndex': this.zIndex });\n }\n };\n DropDownList.prototype.renderList = function (isEmptyData) {\n _super.prototype.render.call(this, isEmptyData);\n this.wireListEvents();\n };\n DropDownList.prototype.floatLabelChange = function () {\n if (this.getModuleName() === 'dropdownlist' && this.floatLabelType === 'Auto') {\n var floatElement = this.inputWrapper.container.querySelector('.e-float-text');\n if (this.inputElement.value !== '' || this.isInteracted) {\n classList(floatElement, ['e-label-top'], ['e-label-bottom']);\n }\n else {\n classList(floatElement, ['e-label-bottom'], ['e-label-top']);\n }\n }\n };\n DropDownList.prototype.resetHandler = function (e) {\n e.preventDefault();\n this.clear(e);\n this.onChangeEvent(e);\n };\n DropDownList.prototype.resetFocusElement = function () {\n this.removeHover();\n this.removeSelection();\n this.removeFocus();\n this.list.scrollTop = 0;\n if (this.getModuleName() !== 'autocomplete') {\n var li = this.ulElement.querySelector('.' + dropDownListClasses.li);\n if (li) {\n li.classList.add(dropDownListClasses.focus);\n }\n }\n };\n DropDownList.prototype.clear = function (e, property) {\n if (property !== 'dataSource') {\n this.resetSelection();\n }\n var dataItem = this.getItemData();\n if (this.previousValue === dataItem.value) {\n return;\n }\n if (!isNullOrUndefined(this.selectedLI) && (!isNullOrUndefined(this.activeIndex) && this.activeIndex >= 0)) {\n this.onChangeEvent(e);\n }\n };\n DropDownList.prototype.resetSelection = function () {\n if (this.list) {\n if (this.allowFiltering && this.getModuleName() !== 'autocomplete'\n && !isNullOrUndefined(this.actionCompleteData.ulElement) && !isNullOrUndefined(this.actionCompleteData.list)) {\n this.onActionComplete(this.actionCompleteData.ulElement.cloneNode(true), this.actionCompleteData.list);\n }\n this.resetFocusElement();\n }\n this.hiddenElement.innerHTML = '';\n this.inputElement.value = '';\n this.value = null;\n this.itemData = null;\n this.text = null;\n this.index = null;\n this.activeIndex = null;\n this.item = null;\n this.queryString = '';\n if (this.valueTempElement) {\n detach(this.valueTempElement);\n this.inputElement.style.display = 'block';\n this.valueTempElement = null;\n }\n this.setSelection(null, null);\n this.isSelectCustom = false;\n this.updateIconState();\n };\n DropDownList.prototype.setHTMLAttributes = function () {\n if (Object.keys(this.htmlAttributes).length) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var htmlAttr = _a[_i];\n if (htmlAttr === 'class') {\n this.inputWrapper.container.classList.add(this.htmlAttributes[htmlAttr]);\n }\n else if (htmlAttr === 'disabled' && this.htmlAttributes[htmlAttr] === 'disabled') {\n this.enabled = false;\n this.setEnable();\n }\n else if (htmlAttr === 'readonly' && this.htmlAttributes[htmlAttr] === 'readonly') {\n this.readonly = true;\n this.dataBind();\n }\n else if (htmlAttr === 'style') {\n this.inputWrapper.container.setAttribute('style', this.htmlAttributes[htmlAttr]);\n }\n else {\n var defaultAttr = ['title', 'id', 'placeholder'];\n var validateAttr = ['name', 'required'];\n if (validateAttr.indexOf(htmlAttr) > -1) {\n this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n else if (defaultAttr.indexOf(htmlAttr) > -1) {\n htmlAttr === 'placeholder' ? Input.setPlaceholder(this.htmlAttributes[htmlAttr], this.inputElement) :\n this.element.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n else {\n this.inputWrapper.container.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n }\n }\n }\n };\n DropDownList.prototype.getAriaAttributes = function () {\n return {\n 'aria-disabled': 'false',\n 'aria-owns': this.element.id + '_options',\n 'role': 'listbox',\n 'aria-haspopup': 'true',\n 'aria-expanded': 'false',\n 'aria-activedescendant': 'null',\n 'aria-labelledby': this.hiddenElement.id\n };\n };\n DropDownList.prototype.setEnableRtl = function () {\n Input.setEnableRtl(this.enableRtl, [this.inputElement.parentElement]);\n if (this.popupObj) {\n this.popupObj.enableRtl = this.enableRtl;\n this.popupObj.dataBind();\n }\n };\n DropDownList.prototype.setEnable = function () {\n Input.setEnabled(this.enabled, this.inputElement);\n if (this.enabled) {\n removeClass([this.inputWrapper.container], dropDownListClasses.disable);\n this.inputElement.setAttribute('aria-disabled', 'false');\n this.targetElement().setAttribute('tabindex', this.tabIndex);\n }\n else {\n this.hidePopup();\n addClass([this.inputWrapper.container], dropDownListClasses.disable);\n this.inputElement.setAttribute('aria-disabled', 'true');\n this.targetElement().tabIndex = -1;\n }\n };\n /**\n * Get the properties to be maintained in the persisted state.\n */\n DropDownList.prototype.getPersistData = function () {\n return this.addOnPersist(['value']);\n };\n ;\n DropDownList.prototype.preventTabIndex = function (element) {\n if (this.getModuleName() === 'dropdownlist') {\n element.tabIndex = -1;\n }\n };\n DropDownList.prototype.targetElement = function () {\n return this.inputWrapper.container;\n };\n DropDownList.prototype.getNgDirective = function () {\n return 'EJS-DROPDOWNLIST';\n };\n DropDownList.prototype.getElementByText = function (text) {\n return this.getElementByValue(this.getValueByText(text));\n };\n DropDownList.prototype.getElementByValue = function (value) {\n var item;\n var listItems = this.getItems();\n for (var _i = 0, listItems_1 = listItems; _i < listItems_1.length; _i++) {\n var liItem = listItems_1[_i];\n if (this.getFormattedValue(liItem.getAttribute('data-value')) === value) {\n item = liItem;\n break;\n }\n }\n return item;\n };\n ;\n DropDownList.prototype.initValue = function () {\n this.renderList();\n if (this.dataSource instanceof DataManager) {\n this.initRemoteRender = true;\n }\n else {\n this.updateValues();\n }\n };\n DropDownList.prototype.updateValues = function () {\n if (!isNullOrUndefined(this.value)) {\n this.setSelection(this.getElementByValue(this.value), null);\n }\n else if (this.text && isNullOrUndefined(this.value)) {\n var element = this.getElementByText(this.text);\n if (isNullOrUndefined(element)) {\n this.setProperties({ text: null });\n return;\n }\n else {\n this.setSelection(element, null);\n }\n }\n else {\n this.setSelection(this.liCollections[this.activeIndex], null);\n }\n this.setHiddenValue();\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n };\n DropDownList.prototype.onBlur = function (e) {\n if (!this.enabled) {\n return;\n }\n var target = e.relatedTarget;\n var currentTarget = e.target;\n var isPreventBlur = this.isPreventBlur;\n this.isPreventBlur = false;\n //IE 11 - issue\n if (isPreventBlur && !this.isDocumentClick && this.isPopupOpen && (!isNullOrUndefined(currentTarget) ||\n !this.isFilterLayout() && isNullOrUndefined(target))) {\n if (this.getModuleName() === 'dropdownlist' && this.allowFiltering && this.isPopupOpen) {\n this.filterInput.focus();\n }\n else {\n this.targetElement().focus();\n }\n return;\n }\n if (this.isDocumentClick || (!isNullOrUndefined(this.popupObj)\n && document.body.contains(this.popupObj.element) &&\n this.popupObj.element.classList.contains(dropDownListClasses.mobileFilter))) {\n if (!this.beforePopupOpen) {\n this.isDocumentClick = false;\n }\n return;\n }\n if (((this.getModuleName() === 'dropdownlist' && !this.isFilterFocus && target !== this.inputElement)\n && (document.activeElement !== target || (document.activeElement === target &&\n currentTarget.classList.contains(dropDownListClasses.inputFocus)))) ||\n (isNullOrUndefined(target) && this.getModuleName() === 'dropdownlist' && this.allowFiltering &&\n currentTarget !== this.inputWrapper.container) || this.getModuleName() !== 'dropdownlist' &&\n !this.inputWrapper.container.contains(target) || this.isTabKey) {\n this.isDocumentClick = this.isPopupOpen ? true : false;\n this.focusOutAction();\n this.isTabKey = false;\n }\n if (this.isRequested && !this.isPopupOpen && !this.isPreventBlur) {\n this.isActive = false;\n this.beforePopupOpen = false;\n }\n };\n DropDownList.prototype.focusOutAction = function () {\n this.isInteracted = false;\n this.focusOut();\n this.onFocusOut();\n };\n DropDownList.prototype.onFocusOut = function () {\n if (!this.enabled) {\n return;\n }\n if (this.isSelected) {\n this.isSelectCustom = false;\n this.onChangeEvent(null);\n }\n this.floatLabelChange();\n this.dispatchEvent(this.hiddenElement, 'change');\n if (this.getModuleName() === 'dropdownlist' && this.element.tagName !== 'INPUT') {\n this.dispatchEvent(this.inputElement, 'blur');\n }\n if (this.inputWrapper.clearButton) {\n addClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n this.trigger('blur');\n };\n DropDownList.prototype.onFocus = function () {\n if (!this.isInteracted) {\n this.isInteracted = true;\n this.trigger('focus');\n }\n this.updateIconState();\n };\n DropDownList.prototype.resetValueHandler = function () {\n this.value = null;\n };\n DropDownList.prototype.wireEvent = function () {\n EventHandler.add(this.inputWrapper.container, 'mousedown', this.dropDownClick, this);\n EventHandler.add(this.inputWrapper.container, 'focus', this.focusIn, this);\n EventHandler.add(this.inputWrapper.container, 'keypress', this.onSearch, this);\n var formElement = closest(this.inputElement, 'form');\n if (formElement) {\n EventHandler.add(formElement, 'reset', this.resetValueHandler, this);\n }\n this.bindCommonEvent();\n };\n DropDownList.prototype.bindCommonEvent = function () {\n EventHandler.add(this.targetElement(), 'blur', this.onBlur, this);\n if (!Browser.isDevice) {\n this.keyboardModule = new KeyboardEvents(this.targetElement(), {\n keyAction: this.keyActionHandler.bind(this), keyConfigs: this.keyConfigure, eventName: 'keydown'\n });\n }\n this.bindClearEvent();\n };\n DropDownList.prototype.bindClearEvent = function () {\n if (this.showClearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown', this.resetHandler, this);\n }\n };\n DropDownList.prototype.unBindCommonEvent = function () {\n EventHandler.remove(this.targetElement(), 'blur', this.onBlur);\n if (!Browser.isDevice) {\n this.keyboardModule.destroy();\n }\n if (this.showClearButton) {\n EventHandler.remove(this.inputWrapper.clearButton, 'mousedown', this.resetHandler);\n }\n };\n DropDownList.prototype.updateIconState = function () {\n if (this.showClearButton) {\n if (this.inputElement.value !== '') {\n removeClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n else {\n addClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n }\n };\n /**\n * Event binding for list\n */\n DropDownList.prototype.wireListEvents = function () {\n EventHandler.add(this.list, 'click', this.onMouseClick, this);\n EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);\n };\n ;\n DropDownList.prototype.onSearch = function (e) {\n if (e.charCode !== 32 && e.charCode !== 13) {\n if (this.list === undefined) {\n this.renderList();\n }\n this.searchKeyEvent = e;\n if (!this.isRequested && !isNullOrUndefined(this.list.querySelector('li'))) {\n this.incrementalSearch(e);\n }\n }\n };\n DropDownList.prototype.onMouseClick = function (e) {\n var target = e.target;\n var classList = target.classList;\n var li = closest(target, '.' + dropDownBaseClasses.li);\n if (!this.isValidLI(li)) {\n return;\n }\n this.setSelection(li, e);\n if (Browser.isDevice && this.isFilterLayout()) {\n history.back();\n }\n else {\n var delay = 100;\n this.closePopup(delay);\n }\n };\n DropDownList.prototype.onMouseOver = function (e) {\n var currentLi = closest(e.target, '.' + dropDownBaseClasses.li);\n this.setHover(currentLi);\n };\n ;\n DropDownList.prototype.setHover = function (li) {\n if (this.enabled && this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.hover)) {\n this.removeHover();\n addClass([li], dropDownBaseClasses.hover);\n }\n };\n ;\n DropDownList.prototype.onMouseLeave = function (e) {\n this.removeHover();\n };\n ;\n DropDownList.prototype.removeHover = function () {\n var hoveredItem = this.list.querySelectorAll('.' + dropDownBaseClasses.hover);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, dropDownBaseClasses.hover);\n }\n };\n ;\n DropDownList.prototype.isValidLI = function (li) {\n return (li && li.hasAttribute('role') && li.getAttribute('role') === 'option');\n };\n ;\n DropDownList.prototype.incrementalSearch = function (e) {\n if (this.liCollections.length > 0) {\n var li = incrementalSearch(e.charCode, this.liCollections, this.activeIndex, true);\n if (!isNullOrUndefined(li)) {\n this.setSelection(li, e);\n this.setScrollPosition();\n }\n }\n };\n ;\n DropDownList.prototype.hideSpinner = function () {\n if (!isNullOrUndefined(this.spinnerElement)) {\n hideSpinner(this.spinnerElement);\n removeClass([this.spinnerElement], dropDownListClasses.disableIcon);\n this.spinnerElement.innerHTML = '';\n this.spinnerElement = null;\n }\n };\n DropDownList.prototype.showSpinner = function () {\n if (isNullOrUndefined(this.spinnerElement)) {\n this.spinnerElement = Browser.isDevice && !isNullOrUndefined(this.filterInputObj) && this.filterInputObj.buttons[1] ||\n !isNullOrUndefined(this.filterInputObj) && this.filterInputObj.buttons[0] || this.inputWrapper.buttons[0];\n addClass([this.spinnerElement], dropDownListClasses.disableIcon);\n createSpinner({\n target: this.spinnerElement,\n width: Browser.isDevice ? '16px' : '14px'\n });\n showSpinner(this.spinnerElement);\n }\n };\n DropDownList.prototype.keyActionHandler = function (e) {\n var preventAction = e.action === 'pageUp' || e.action === 'pageDown';\n var preventHomeEnd = this.getModuleName() !== 'dropdownlist' && (e.action === 'home' || e.action === 'end');\n this.isEscapeKey = e.action === 'escape';\n this.isTabKey = !this.isPopupOpen && e.action === 'tab';\n var isNavigation = (e.action === 'down' || e.action === 'up' || e.action === 'pageUp' || e.action === 'pageDown'\n || e.action === 'home' || e.action === 'end');\n if ((this.isEditTextBox() || preventAction || preventHomeEnd) && !this.isPopupOpen) {\n return;\n }\n if (!this.readonly) {\n var isTabAction = e.action === 'tab' || e.action === 'close';\n if (this.list === undefined && !this.isRequested && !isTabAction && e.action !== 'escape') {\n this.searchKeyEvent = e;\n this.renderList();\n }\n if (isNullOrUndefined(this.list) || (!isNullOrUndefined(this.liCollections) &&\n isNavigation && this.liCollections.length === 0) || this.isRequested) {\n return;\n }\n if (isTabAction && this.isPopupOpen || e.action === 'escape') {\n e.preventDefault();\n }\n this.isSelected = e.action === 'escape' ? false : this.isSelected;\n this.isTyped = (isNavigation || e.action === 'escape') ? false : this.isTyped;\n switch (e.action) {\n case 'down':\n case 'up':\n var focusEle = this.list.querySelector('.' + dropDownListClasses.focus);\n if (this.isSelectFocusItem(focusEle)) {\n this.setSelection(focusEle, e);\n }\n else {\n var nextItem = void 0;\n var index = e.action === 'down' ? this.activeIndex + 1 : this.activeIndex - 1;\n var startIndex = 0;\n if (this.getModuleName() === 'autocomplete') {\n startIndex = e.action === 'down' && isNullOrUndefined(this.activeIndex) ? 0 : this.liCollections.length - 1;\n index = index < 0 ? this.liCollections.length - 1 : index === this.liCollections.length ? 0 : index;\n }\n nextItem = isNullOrUndefined(this.activeIndex) ? this.liCollections[startIndex] : this.liCollections[index];\n this.setSelection(nextItem, e);\n }\n e.preventDefault();\n break;\n case 'pageUp':\n this.pageUpSelection(this.activeIndex - this.getPageCount(), e);\n e.preventDefault();\n break;\n case 'pageDown':\n this.pageDownSelection(this.activeIndex + this.getPageCount(), e);\n e.preventDefault();\n break;\n case 'home':\n if (this.getModuleName() === 'dropdownlist') {\n e.preventDefault();\n if (this.activeIndex === 0) {\n return;\n }\n this.setSelection(this.liCollections[0], e);\n }\n break;\n case 'end':\n if (this.getModuleName() === 'dropdownlist') {\n e.preventDefault();\n var lastLi = this.getItems().length - 1;\n if (this.activeIndex === lastLi) {\n return;\n }\n this.setSelection(this.liCollections[lastLi], e);\n }\n break;\n case 'space':\n if (this.getModuleName() === 'dropdownlist') {\n if (!this.beforePopupOpen) {\n this.showPopup();\n }\n }\n break;\n case 'open':\n this.showPopup();\n break;\n case 'hide':\n this.preventAltUp = this.isPopupOpen;\n this.hidePopup();\n this.focusDropDown(e);\n break;\n case 'enter':\n this.selectCurrentItem(e);\n break;\n case 'escape':\n case 'tab':\n case 'close':\n if (this.isPopupOpen) {\n this.hidePopup();\n this.focusDropDown(e);\n }\n break;\n }\n }\n };\n DropDownList.prototype.selectCurrentItem = function (e) {\n if (this.isPopupOpen) {\n var li = this.list.querySelector('.' + dropDownListClasses.focus);\n if (li) {\n this.setSelection(li, e);\n this.isTyped = false;\n }\n if (this.isSelected) {\n this.isSelectCustom = false;\n this.onChangeEvent(e);\n }\n this.hidePopup();\n this.focusDropDown(e);\n }\n else {\n this.showPopup();\n }\n };\n DropDownList.prototype.isSelectFocusItem = function (element) {\n return !isNullOrUndefined(element);\n };\n DropDownList.prototype.getPageCount = function () {\n var liHeight = this.list.classList.contains(dropDownBaseClasses.noData) ? null :\n getComputedStyle(this.getItems()[0], null).getPropertyValue('height');\n return Math.round(this.list.getBoundingClientRect().height / parseInt(liHeight, 10));\n };\n DropDownList.prototype.pageUpSelection = function (steps, event) {\n var previousItem = steps >= 0 ? this.liCollections[steps + 1] : this.liCollections[0];\n this.setSelection(previousItem, event);\n };\n ;\n DropDownList.prototype.pageDownSelection = function (steps, event) {\n var list = this.getItems();\n var previousItem = steps <= list.length ? this.liCollections[steps - 1] : this.liCollections[list.length - 1];\n this.setSelection(previousItem, event);\n };\n ;\n DropDownList.prototype.unWireEvent = function () {\n EventHandler.remove(this.inputWrapper.container, 'mousedown', this.dropDownClick);\n EventHandler.remove(this.inputWrapper.container, 'keypress', this.onSearch);\n EventHandler.remove(this.inputWrapper.container, 'focus', this.focusIn);\n var formElement = closest(this.inputElement, 'form');\n if (formElement) {\n EventHandler.remove(formElement, 'reset', this.resetValueHandler);\n }\n this.unBindCommonEvent();\n };\n /**\n * Event un binding for list items.\n */\n DropDownList.prototype.unWireListEvents = function () {\n EventHandler.remove(this.list, 'click', this.onMouseClick);\n EventHandler.remove(this.list, 'mouseover', this.onMouseOver);\n EventHandler.remove(this.list, 'mouseout', this.onMouseLeave);\n };\n ;\n DropDownList.prototype.onDocumentClick = function (e) {\n var target = e.target;\n if (!(!isNullOrUndefined(this.popupObj) && closest(target, '#' + this.popupObj.element.id)) &&\n !this.inputWrapper.container.contains(e.target)) {\n if (this.inputWrapper.container.classList.contains(dropDownListClasses.inputFocus) || this.isPopupOpen) {\n this.isDocumentClick = true;\n var isActive = this.isRequested;\n this.isInteracted = false;\n this.hidePopup();\n if (!isActive) {\n this.onFocusOut();\n this.inputWrapper.container.classList.remove(dropDownListClasses.inputFocus);\n }\n }\n }\n else if (target !== this.inputElement && !(this.allowFiltering && target === this.filterInput)\n && !(this.getModuleName() === 'combobox' &&\n !this.allowFiltering && Browser.isDevice && target === this.inputWrapper.buttons[0])) {\n this.isPreventBlur = (Browser.isIE || Browser.info.name === 'edge') && (document.activeElement === this.targetElement() ||\n document.activeElement === this.filterInput);\n e.preventDefault();\n }\n };\n DropDownList.prototype.activeStateChange = function () {\n if (this.isDocumentClick) {\n this.hidePopup();\n this.onFocusOut();\n this.inputWrapper.container.classList.remove(dropDownListClasses.inputFocus);\n }\n };\n DropDownList.prototype.focusDropDown = function (e) {\n if (!this.initial && this.isFilterLayout()) {\n this.focusIn();\n }\n };\n DropDownList.prototype.dropDownClick = function (e) {\n if (e.which === 3 || e.button === 2) {\n return;\n }\n if (this.targetElement().classList.contains(dropDownListClasses.disable) || this.inputWrapper.clearButton === e.target) {\n return;\n }\n var target = e.target;\n if (target !== this.inputElement && !(this.allowFiltering && target === this.filterInput) && this.getModuleName() !== 'combobox') {\n e.preventDefault();\n }\n if (!this.readonly) {\n if (this.isPopupOpen) {\n this.hidePopup();\n if (this.isFilterLayout()) {\n this.focusDropDown(e);\n }\n }\n else {\n this.focusIn();\n this.floatLabelChange();\n this.queryString = this.inputElement.value.trim() === '' ? null : this.inputElement.value;\n this.isDropDownClick = true;\n this.showPopup();\n }\n var proxy_1 = this;\n if (!this.isSecondClick) {\n setTimeout(function () { proxy_1.cloneElements(); }, 100);\n }\n }\n else {\n this.focusIn();\n }\n };\n DropDownList.prototype.cloneElements = function () {\n if (this.list) {\n var ulElement = this.list.querySelector('ul');\n if (ulElement) {\n ulElement = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;\n this.actionCompleteData.ulElement = ulElement;\n this.isSecondClick = true;\n }\n }\n };\n DropDownList.prototype.updateSelectedItem = function (li, e, preventSelect) {\n this.removeSelection();\n li.classList.add(dropDownBaseClasses.selected);\n this.removeHover();\n var value = this.getFormattedValue(li.getAttribute('data-value'));\n this.item = li;\n this.itemData = this.getDataByValue(value);\n if (!this.initial && !preventSelect) {\n var items = this.detachChanges();\n this.isSelected = true;\n var eventArgs = {\n e: e,\n item: this.item,\n itemData: items,\n isInteracted: e ? true : false,\n cancel: false\n };\n this.trigger('select', eventArgs);\n if (eventArgs.cancel) {\n return true;\n }\n }\n var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);\n if (focusedItem) {\n removeClass([focusedItem], dropDownBaseClasses.focus);\n }\n li.setAttribute('aria-selected', 'true');\n this.activeIndex = this.getIndexByValue(value);\n return false;\n };\n DropDownList.prototype.activeItem = function (li) {\n if (this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.selected)) {\n this.removeSelection();\n li.classList.add(dropDownBaseClasses.selected);\n this.removeHover();\n li.setAttribute('aria-selected', 'true');\n }\n };\n DropDownList.prototype.setValue = function (e) {\n var dataItem = this.getItemData();\n if (dataItem.value === null) {\n Input.setValue(null, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n else {\n Input.setValue(dataItem.text, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n if (this.previousValue === dataItem.value) {\n this.isSelected = false;\n return true;\n }\n else {\n this.isSelected = !this.initial ? true : false;\n this.isSelectCustom = false;\n if (this.getModuleName() === 'dropdownlist') {\n this.updateIconState();\n }\n return false;\n }\n };\n DropDownList.prototype.setSelection = function (li, e) {\n if (this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.selected)) {\n this.previousItemData = (!isNullOrUndefined(this.itemData)) ? this.itemData : null;\n var argsCancel = this.updateSelectedItem(li, e, false);\n if (argsCancel) {\n return;\n }\n }\n if (this.list) {\n this.removeHover();\n }\n this.previousSelectedLI = (!isNullOrUndefined(this.selectedLI)) ? this.selectedLI : null;\n this.selectedLI = li;\n if (this.setValue(e)) {\n return;\n }\n if (this.valueTemplate && this.itemData !== null) {\n this.setValueTemplate();\n }\n else if (this.inputElement.previousSibling === this.valueTempElement) {\n detach(this.valueTempElement);\n this.inputElement.style.display = 'block';\n }\n if (this.isPopupOpen) {\n attributes(this.targetElement(), { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });\n if (this.isFilterLayout()) {\n attributes(this.filterInput, { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });\n }\n }\n if ((!this.isPopupOpen && !isNullOrUndefined(li)) || (this.isPopupOpen && !isNullOrUndefined(e) &&\n (e.type !== 'keydown' || e.type === 'keydown' && e.action === 'enter'))) {\n this.isSelectCustom = false;\n this.onChangeEvent(e);\n }\n if (this.isPopupOpen && !isNullOrUndefined(this.selectedLI) && this.itemData !== null && (!e || e.type !== 'click')) {\n this.setScrollPosition(e);\n }\n };\n DropDownList.prototype.setValueTemplate = function () {\n var compiledString;\n if (!this.valueTempElement) {\n this.valueTempElement = createElement('span', { className: dropDownListClasses.value });\n this.inputElement.parentElement.insertBefore(this.valueTempElement, this.inputElement);\n this.inputElement.style.display = 'none';\n }\n this.valueTempElement.innerHTML = '';\n compiledString = compile(this.valueTemplate);\n for (var _i = 0, _a = compiledString(this.itemData); _i < _a.length; _i++) {\n var item = _a[_i];\n this.valueTempElement.appendChild(item);\n }\n };\n DropDownList.prototype.removeSelection = function () {\n var selectedItems = this.list.querySelectorAll('.' + dropDownBaseClasses.selected);\n if (selectedItems.length) {\n removeClass(selectedItems, dropDownBaseClasses.selected);\n selectedItems[0].removeAttribute('aria-selected');\n }\n };\n ;\n DropDownList.prototype.getItemData = function () {\n var fields = this.fields;\n var dataItem = null;\n dataItem = this.itemData;\n var dataValue;\n var dataText;\n if (!isNullOrUndefined(dataItem)) {\n dataValue = getValue(fields.value, dataItem);\n dataText = getValue(fields.text, dataItem);\n }\n var value = (!isNullOrUndefined(dataItem) &&\n !isUndefined(dataValue) ? dataValue : dataItem);\n var text = (!isNullOrUndefined(dataItem) &&\n !isUndefined(dataValue) ? dataText : dataItem);\n return { value: value, text: text };\n };\n /**\n * To trigger the change event for list.\n */\n DropDownList.prototype.onChangeEvent = function (eve) {\n var dataItem = this.getItemData();\n var index = this.isSelectCustom ? null : this.activeIndex;\n this.setProperties({ 'value': dataItem.value, 'index': index, 'text': dataItem.text }, true);\n this.detachChangeEvent(eve);\n };\n ;\n DropDownList.prototype.detachChanges = function () {\n var items;\n if (typeof this.itemData === 'string' ||\n typeof this.itemData === 'boolean' ||\n typeof this.itemData === 'number') {\n items = Object.defineProperties({}, {\n value: {\n value: this.itemData,\n enumerable: true\n },\n text: {\n value: this.itemData,\n enumerable: true\n }\n });\n }\n else {\n items = this.itemData;\n }\n return items;\n };\n DropDownList.prototype.detachChangeEvent = function (eve) {\n this.isSelected = false;\n this.previousValue = this.value;\n this.activeIndex = this.index;\n this.typedString = !isNullOrUndefined(this.text) ? this.text : '';\n if (!this.initial) {\n var items = this.detachChanges();\n var preItems = void 0;\n if (typeof this.previousItemData === 'string' ||\n typeof this.previousItemData === 'boolean' ||\n typeof this.previousItemData === 'number') {\n preItems = Object.defineProperties({}, {\n value: {\n value: this.previousItemData,\n enumerable: true\n },\n text: {\n value: this.previousItemData,\n enumerable: true\n }\n });\n }\n else {\n preItems = this.previousItemData;\n }\n this.setHiddenValue();\n var eventArgs = {\n e: eve,\n item: this.item,\n itemData: items,\n previousItem: this.previousSelectedLI,\n previousItemData: preItems,\n isInteracted: eve ? true : false,\n value: this.value,\n element: this.element\n };\n this.trigger('change', eventArgs);\n }\n };\n DropDownList.prototype.setHiddenValue = function () {\n if (!isNullOrUndefined(this.value)) {\n this.hiddenElement.innerHTML = '
';\n var selectedElement = this.hiddenElement.querySelector('option');\n selectedElement.setAttribute('value', this.value.toString());\n }\n else {\n this.hiddenElement.innerHTML = '';\n }\n };\n /**\n * Filter bar implementation\n */\n DropDownList.prototype.onFilterUp = function (e) {\n this.isValidKey = e.keyCode === 40 || e.keyCode === 38 || this.isValidKey;\n if (this.isValidKey) {\n this.isValidKey = false;\n switch (e.keyCode) {\n case 38: //up arrow \n case 40://down arrow \n if (this.getModuleName() === 'autocomplete' && !this.isPopupOpen && !this.preventAltUp && !this.isRequested) {\n this.preventAutoFill = true;\n this.searchLists(e);\n }\n else {\n this.preventAutoFill = false;\n }\n this.preventAltUp = false;\n e.preventDefault();\n break;\n case 46: //delete\n case 8://backspace\n this.typedString = this.filterInput.value;\n if (!this.isPopupOpen && this.typedString !== '' || this.isPopupOpen && this.queryString.length > 0) {\n this.preventAutoFill = true;\n this.searchLists(e);\n }\n else if (this.typedString === '') {\n this.resetFocusElement();\n this.activeIndex = null;\n if (this.getModuleName() === 'autocomplete') {\n this.hidePopup();\n }\n }\n e.preventDefault();\n break;\n default:\n this.typedString = this.filterInput.value;\n this.preventAutoFill = false;\n this.searchLists(e);\n break;\n }\n }\n };\n DropDownList.prototype.onFilterDown = function (e) {\n switch (e.keyCode) {\n case 13://enter\n break;\n case 40: //down arrow \n case 38://up arrow \n this.queryString = this.filterInput.value;\n e.preventDefault();\n break;\n case 9://tab \n if (this.isPopupOpen) {\n e.preventDefault();\n }\n break;\n default:\n this.prevSelectPoints = this.getSelectionPoints();\n this.queryString = this.filterInput.value;\n break;\n }\n };\n DropDownList.prototype.removeFillSelection = function () {\n if (this.isInteracted) {\n var selection = this.getSelectionPoints();\n this.inputElement.setSelectionRange(selection.end, selection.end);\n }\n };\n DropDownList.prototype.getSelectionPoints = function () {\n var input = this.inputElement;\n return { start: Math.abs(input.selectionStart), end: Math.abs(input.selectionEnd) };\n };\n DropDownList.prototype.searchLists = function (e) {\n var _this = this;\n this.isTyped = true;\n this.activeIndex = null;\n if (this.filterInput.parentElement.querySelector('.' + dropDownListClasses.clearIcon)) {\n var clearElement = this.filterInput.parentElement.querySelector('.' + dropDownListClasses.clearIcon);\n clearElement.style.visibility = this.filterInput.value === '' ? 'hidden' : 'visible';\n }\n if (this.isFiltering()) {\n var eventArgs_1 = {\n preventDefaultAction: false,\n text: this.filterInput.value,\n updateData: function (dataSource, query, fields) {\n if (eventArgs_1.cancel) {\n return;\n }\n _this.isCustomFilter = true;\n _this.filteringAction(dataSource, query, fields);\n },\n baseEventArgs: e,\n cancel: false\n };\n this.trigger('filtering', eventArgs_1);\n if (eventArgs_1.cancel) {\n return;\n }\n if (!this.isCustomFilter && !eventArgs_1.preventDefaultAction) {\n var filterQuery = this.query ? this.query.clone() : new Query();\n var dataType = this.typeOfData(this.dataSource).typeof;\n if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {\n filterQuery.where('', 'startswith', this.filterInput.value, true, this.ignoreAccent);\n }\n else {\n var fields = this.fields;\n filterQuery.where(!isNullOrUndefined(fields.text) ? fields.text : '', 'startswith', this.filterInput.value, true, this.ignoreAccent);\n }\n this.filteringAction(this.dataSource, filterQuery, this.fields);\n }\n }\n };\n DropDownList.prototype.filteringAction = function (dataSource, query, fields) {\n if (!isNullOrUndefined(this.filterInput)) {\n this.beforePopupOpen = true;\n if (this.filterInput.value.trim() === '') {\n this.actionCompleteData.isUpdated = false;\n this.isTyped = false;\n if (!isNullOrUndefined(this.actionCompleteData.ulElement) && !isNullOrUndefined(this.actionCompleteData.list)) {\n this.onActionComplete(this.actionCompleteData.ulElement, this.actionCompleteData.list);\n }\n this.isTyped = true;\n if (!isNullOrUndefined(this.itemData) && this.getModuleName() === 'dropdownlist') {\n this.focusIndexItem();\n this.setScrollPosition();\n }\n this.isNotSearchList = true;\n }\n else {\n this.isNotSearchList = false;\n this.resetList(dataSource, fields, query);\n }\n }\n };\n DropDownList.prototype.setSearchBox = function (popupElement) {\n if (this.isFiltering()) {\n var parentElement = createElement('span', {\n className: dropDownListClasses.filterParent\n });\n this.filterInput = createElement('input', {\n attrs: { type: 'text' },\n className: dropDownListClasses.filterInput\n });\n this.element.parentNode.insertBefore(this.filterInput, this.element);\n var backIcon = false;\n if (Browser.isDevice) {\n backIcon = true;\n }\n this.filterInputObj = Input.createInput({\n element: this.filterInput,\n buttons: backIcon ?\n [dropDownListClasses.backIcon, dropDownListClasses.filterBarClearIcon] : [dropDownListClasses.filterBarClearIcon],\n properties: { placeholder: this.filterBarPlaceholder }\n });\n append([this.filterInputObj.container], parentElement);\n prepend([parentElement], popupElement);\n attributes(this.filterInput, {\n 'aria-disabled': 'false',\n 'aria-owns': this.element.id + '_options',\n 'role': 'listbox',\n 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null,\n 'autocomplete': 'off',\n 'autocorrect': 'off',\n 'autocapitalize': 'off',\n 'spellcheck': 'false'\n });\n this.clearIconElement = this.filterInput.parentElement.querySelector('.' + dropDownListClasses.clearIcon);\n if (!Browser.isDevice && this.clearIconElement) {\n EventHandler.add(this.clearIconElement, 'click', this.clearText, this);\n this.clearIconElement.style.visibility = 'hidden';\n }\n if (!Browser.isDevice) {\n this.searchKeyModule = new KeyboardEvents(this.filterInput, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigure,\n eventName: 'keydown'\n });\n }\n EventHandler.add(this.filterInput, 'input', this.onInput, this);\n EventHandler.add(this.filterInput, 'keyup', this.onFilterUp, this);\n EventHandler.add(this.filterInput, 'keydown', this.onFilterDown, this);\n EventHandler.add(this.filterInput, 'blur', this.onBlur, this);\n return this.filterInputObj;\n }\n else {\n return inputObject;\n }\n };\n ;\n DropDownList.prototype.onInput = function () {\n this.isValidKey = true;\n };\n DropDownList.prototype.onActionFailure = function (e) {\n _super.prototype.onActionFailure.call(this, e);\n if (this.beforePopupOpen) {\n this.renderPopup();\n }\n };\n DropDownList.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {\n if (this.isNotSearchList) {\n this.isNotSearchList = false;\n return;\n }\n if (this.isActive) {\n var selectedItem = this.selectedLI ? this.selectedLI.cloneNode(true) : null;\n _super.prototype.onActionComplete.call(this, ulElement, list, e);\n if (this.isRequested && !isNullOrUndefined(this.searchKeyEvent) && this.searchKeyEvent.type === 'keydown') {\n this.isRequested = false;\n this.keyActionHandler(this.searchKeyEvent);\n this.searchKeyEvent = null;\n }\n if (this.isRequested && !isNullOrUndefined(this.searchKeyEvent)) {\n this.incrementalSearch(this.searchKeyEvent);\n this.searchKeyEvent = null;\n }\n this.list.scrollTop = 0;\n if (!isNullOrUndefined(ulElement)) {\n attributes(ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });\n }\n if (this.initRemoteRender) {\n this.initial = true;\n this.activeIndex = this.index;\n this.updateValues();\n this.initRemoteRender = false;\n this.initial = false;\n }\n if (this.getModuleName() !== 'autocomplete' && this.isFiltering() && !this.isTyped) {\n if (!this.actionCompleteData.isUpdated || ((!this.isCustomFilter\n && !this.isFilterFocus)\n && ((this.dataSource instanceof DataManager)\n || (!isNullOrUndefined(this.dataSource.length) && this.dataSource.length !== 0)))) {\n this.actionCompleteData = { ulElement: ulElement.cloneNode(true), list: list, isUpdated: true };\n }\n this.addNewItem(list, selectedItem);\n if (!isNullOrUndefined(this.itemData)) {\n this.focusIndexItem();\n }\n }\n if (this.beforePopupOpen) {\n this.renderPopup();\n }\n }\n };\n DropDownList.prototype.addNewItem = function (listData, newElement) {\n var _this = this;\n if (!isNullOrUndefined(this.itemData) && !isNullOrUndefined(newElement)) {\n var value_1 = this.getItemData().value;\n var isExist = listData.some(function (data) {\n return (((typeof data === 'string' || typeof data === 'number') && data === value_1) ||\n (getValue(_this.fields.value, data) === value_1));\n });\n if (!isExist) {\n this.addItem(this.itemData);\n }\n }\n };\n DropDownList.prototype.updateActionCompleteData = function (li, item) {\n if (this.getModuleName() !== 'autocomplete' && this.actionCompleteData.ulElement) {\n this.actionCompleteData.ulElement.appendChild(li.cloneNode(true));\n if (this.isFiltering()) {\n this.actionCompleteData.list.push(item);\n }\n }\n };\n DropDownList.prototype.focusIndexItem = function () {\n var value = this.getItemData().value;\n this.activeIndex = this.getIndexByValue(value);\n var element = this.list.querySelector('[data-value=\"' + value + '\"]');\n this.selectedLI = element;\n this.activeItem(element);\n this.removeFocus();\n };\n DropDownList.prototype.updateSelection = function () {\n var selectedItem = this.list.querySelector('.' + dropDownBaseClasses.selected);\n if (selectedItem) {\n this.setProperties({ 'index': this.getIndexByValue(selectedItem.getAttribute('data-value')) });\n this.activeIndex = this.index;\n }\n else {\n this.removeFocus();\n this.list.querySelector('.' + dropDownBaseClasses.li).classList.add(dropDownListClasses.focus);\n }\n };\n DropDownList.prototype.removeFocus = function () {\n var highlightedItem = this.list.querySelectorAll('.' + dropDownListClasses.focus);\n if (highlightedItem && highlightedItem.length) {\n removeClass(highlightedItem, dropDownListClasses.focus);\n }\n };\n ;\n DropDownList.prototype.renderPopup = function () {\n if (this.popupObj && document.body.contains(this.popupObj.element)) {\n this.refreshPopup();\n return;\n }\n var args = { cancel: false };\n this.trigger('beforeOpen', args);\n if (args.cancel) {\n return;\n }\n var popupEle = createElement('div', {\n id: this.element.id + '_popup', className: 'e-ddl e-popup ' + (this.cssClass != null ? this.cssClass : '')\n });\n var searchBox = this.setSearchBox(popupEle);\n this.listHeight = formatUnit(this.popupHeight);\n if (this.headerTemplate) {\n this.setHeaderTemplate(popupEle);\n }\n append([this.list], popupEle);\n if (this.footerTemplate) {\n this.setFooterTemplate(popupEle);\n }\n document.body.appendChild(popupEle);\n popupEle.style.visibility = 'hidden';\n if (this.popupHeight !== 'auto') {\n this.searchBoxHeight = 0;\n if (!isNullOrUndefined(searchBox.container)) {\n this.searchBoxHeight = (searchBox.container.parentElement).getBoundingClientRect().height;\n this.listHeight = (parseInt(this.listHeight, 10) - (this.searchBoxHeight)).toString() + 'px';\n }\n if (this.headerTemplate) {\n var height = Math.round(this.header.getBoundingClientRect().height);\n this.listHeight = (parseInt(this.listHeight, 10) - (height + this.searchBoxHeight)).toString() + 'px';\n }\n if (this.footerTemplate) {\n var height = Math.round(this.footer.getBoundingClientRect().height);\n this.listHeight = (parseInt(this.listHeight, 10) - (height + this.searchBoxHeight)).toString() + 'px';\n }\n this.list.style.maxHeight = (parseInt(this.listHeight, 10) - 2).toString() + 'px'; // due to box-sizing property\n popupEle.style.maxHeight = formatUnit(this.popupHeight);\n }\n else {\n popupEle.style.height = 'auto';\n }\n var offsetValue = 0;\n var left;\n if (!isNullOrUndefined(this.selectedLI) && (!isNullOrUndefined(this.activeIndex) && this.activeIndex >= 0)) {\n this.setScrollPosition();\n }\n else {\n this.list.scrollTop = 0;\n }\n if (Browser.isDevice && (!this.allowFiltering && (this.getModuleName() === 'dropdownlist' ||\n (this.isDropDownClick && this.getModuleName() === 'combobox')))) {\n offsetValue = this.getOffsetValue(popupEle);\n var firstItem = this.isEmptyList() ? this.list : this.liCollections[0];\n left = -(parseInt(getComputedStyle(firstItem).textIndent, 10) -\n parseInt(getComputedStyle(this.inputElement).paddingLeft, 10) +\n parseInt(getComputedStyle(this.inputElement.parentElement).borderLeftWidth, 10));\n }\n this.getFocusElement();\n this.createPopup(popupEle, offsetValue, left);\n this.checkCollision(popupEle);\n if (Browser.isDevice) {\n this.popupObj.element.classList.add(dropDownListClasses.device);\n if (this.getModuleName() === 'dropdownlist' || (this.getModuleName() === 'combobox'\n && !this.allowFiltering && this.isDropDownClick)) {\n this.popupObj.collision = { X: 'fit', Y: 'fit' };\n }\n if (this.isFilterLayout()) {\n this.popupObj.element.classList.add(dropDownListClasses.mobileFilter);\n this.popupObj.position = { X: 0, Y: 0 };\n this.popupObj.dataBind();\n attributes(this.popupObj.element, { style: 'left:0px;right:0px;top:0px;bottom:0px;' });\n addClass([document.body, this.popupObj.element], dropDownListClasses.popupFullScreen);\n this.setSearchBoxPosition();\n this.backIconElement = searchBox.container.querySelector('.e-back-icon');\n this.clearIconElement = searchBox.container.querySelector('.' + dropDownListClasses.clearIcon);\n EventHandler.add(this.backIconElement, 'click', this.clickOnBackIcon, this);\n EventHandler.add(this.clearIconElement, 'click', this.clearText, this);\n }\n }\n popupEle.style.visibility = 'visible';\n addClass([popupEle], 'e-popup-close');\n var scrollParentElements = this.popupObj.getScrollableParent(this.inputWrapper.container);\n for (var _i = 0, scrollParentElements_1 = scrollParentElements; _i < scrollParentElements_1.length; _i++) {\n var element = scrollParentElements_1[_i];\n EventHandler.add(element, 'scroll', this.scrollHandler, this);\n }\n if (Browser.isDevice && this.isFilterLayout()) {\n EventHandler.add(this.list, 'scroll', this.listScroll, this);\n }\n attributes(this.targetElement(), { 'aria-expanded': 'true' });\n var inputParent = this.isFiltering() ? this.filterInput.parentElement : this.inputWrapper.container;\n addClass([inputParent], [dropDownListClasses.inputFocus]);\n var animModel = { name: 'FadeIn', duration: 100 };\n this.beforePopupOpen = true;\n var eventArgs = { popup: this.popupObj, cancel: false };\n this.trigger('open', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n addClass([this.inputWrapper.container], [dropDownListClasses.iconAnimation]);\n this.popupObj.show(new Animation(animModel));\n };\n DropDownList.prototype.checkCollision = function (popupEle) {\n if (!Browser.isDevice || (Browser.isDevice && !(this.getModuleName() === 'dropdownlist' || this.isDropDownClick))) {\n var collision = isCollide(popupEle);\n if (collision.length > 0) {\n popupEle.style.marginTop = -parseInt(getComputedStyle(popupEle).marginTop, 10) + 'px';\n }\n }\n };\n DropDownList.prototype.getOffsetValue = function (popupEle) {\n var popupStyles = getComputedStyle(popupEle);\n var borderTop = parseInt(popupStyles.borderTop, 10);\n var borderBottom = parseInt(popupStyles.borderBottom, 10);\n return this.setPopupPosition(borderTop + borderBottom);\n };\n DropDownList.prototype.createPopup = function (element, offsetValue, left) {\n var _this = this;\n this.popupObj = new Popup(element, {\n width: this.setWidth(), targetType: 'relative',\n relateTo: this.inputWrapper.container, collision: { X: 'flip', Y: 'flip' }, offsetY: offsetValue,\n enableRtl: this.enableRtl, offsetX: left, position: { X: 'left', Y: 'bottom' },\n zIndex: this.zIndex,\n close: function () {\n if (!_this.isDocumentClick) {\n _this.focusDropDown();\n }\n _this.isDocumentClick = false;\n _this.destroyPopup();\n },\n open: function () {\n EventHandler.add(document, 'mousedown', _this.onDocumentClick, _this);\n _this.isPopupOpen = true;\n if (_this.isFilterLayout()) {\n removeClass([_this.inputWrapper.container], [dropDownListClasses.inputFocus]);\n _this.isFilterFocus = true;\n _this.filterInput.focus();\n if (_this.inputWrapper.clearButton) {\n addClass([_this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n }\n _this.activeStateChange();\n }\n });\n };\n DropDownList.prototype.isEmptyList = function () {\n return !isNullOrUndefined(this.liCollections) && this.liCollections.length === 0;\n };\n DropDownList.prototype.getFocusElement = function () {\n // combo-box used this method\n };\n DropDownList.prototype.isFilterLayout = function () {\n return this.getModuleName() === 'dropdownlist' && this.allowFiltering;\n };\n DropDownList.prototype.scrollHandler = function () {\n if (Browser.isDevice && ((this.getModuleName() === 'dropdownlist' &&\n !this.isFilterLayout()) || (this.getModuleName() === 'combobox' && !this.allowFiltering && this.isDropDownClick))) {\n this.hidePopup();\n }\n if (this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement)) {\n this.fixedHeaderElement.style.zIndex = '0';\n this.fixedHeaderElement.style.display = 'none';\n }\n };\n DropDownList.prototype.setSearchBoxPosition = function () {\n var searchBoxHeight = this.filterInput.parentElement.getBoundingClientRect().height;\n this.popupObj.element.style.maxHeight = '100%';\n this.popupObj.element.style.width = '100%';\n this.list.style.maxHeight = (window.innerHeight - searchBoxHeight) + 'px';\n this.list.style.height = (window.innerHeight - searchBoxHeight) + 'px';\n var clearElement = this.filterInput.parentElement.querySelector('.' + dropDownListClasses.clearIcon);\n detach(this.filterInput);\n clearElement.parentElement.insertBefore(this.filterInput, clearElement);\n };\n DropDownList.prototype.setPopupPosition = function (border) {\n var offsetValue;\n var popupOffset = border;\n var selectedLI = this.list.querySelector('.' + dropDownListClasses.focus) || this.selectedLI;\n var firstItem = this.isEmptyList() ? this.list : this.liCollections[0];\n var lastItem = this.isEmptyList() ? this.list : this.liCollections[this.getItems().length - 1];\n var liHeight = firstItem.getBoundingClientRect().height;\n var listHeight = this.list.offsetHeight / 2;\n var height = isNullOrUndefined(selectedLI) ? firstItem.offsetTop : selectedLI.offsetTop;\n var lastItemOffsetValue = lastItem.offsetTop;\n if (lastItemOffsetValue - listHeight < height && !isNullOrUndefined(this.liCollections) &&\n this.liCollections.length > 0 && !isNullOrUndefined(selectedLI)) {\n var count = this.list.offsetHeight / liHeight;\n var paddingBottom = parseInt(getComputedStyle(this.list).paddingBottom, 10);\n offsetValue = (count - (this.liCollections.length - this.activeIndex)) * liHeight - popupOffset + paddingBottom;\n this.list.scrollTop = selectedLI.offsetTop;\n }\n else if (height > listHeight) {\n offsetValue = listHeight - liHeight / 2;\n this.list.scrollTop = height - listHeight + liHeight / 2;\n }\n else {\n offsetValue = height;\n }\n var inputHeight = this.inputWrapper.container.offsetHeight;\n offsetValue = offsetValue + liHeight + popupOffset - ((liHeight - inputHeight) / 2);\n return -offsetValue;\n };\n DropDownList.prototype.setWidth = function () {\n var width = formatUnit(this.popupWidth);\n if (width.indexOf('%') > -1) {\n var inputWidth = this.inputWrapper.container.offsetWidth * parseFloat(width) / 100;\n width = inputWidth.toString() + 'px';\n }\n if (Browser.isDevice && (!this.allowFiltering && (this.getModuleName() === 'dropdownlist' ||\n (this.isDropDownClick && this.getModuleName() === 'combobox')))) {\n var firstItem = this.isEmptyList() ? this.list : this.liCollections[0];\n width = (parseInt(width, 10) + (parseInt(getComputedStyle(firstItem).textIndent, 10) -\n parseInt(getComputedStyle(this.inputElement).paddingLeft, 10) +\n parseInt(getComputedStyle(this.inputElement.parentElement).borderLeftWidth, 10)) * 2) + 'px';\n }\n return width;\n };\n DropDownList.prototype.scrollBottom = function (isInitial) {\n var currentOffset = this.list.offsetHeight;\n var nextBottom = this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop;\n var nextOffset = this.list.scrollTop + nextBottom - currentOffset;\n nextOffset = isInitial ? nextOffset + parseInt(getComputedStyle(this.list).paddingTop, 10) * 2 : nextOffset;\n var boxRange = this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop;\n boxRange = this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?\n boxRange - this.fixedHeaderElement.offsetHeight : boxRange;\n if (this.activeIndex === 0) {\n this.list.scrollTop = 0;\n }\n else if (nextBottom > currentOffset || !(boxRange > 0 && this.list.offsetHeight > boxRange)) {\n this.list.scrollTop = nextOffset;\n }\n };\n DropDownList.prototype.scrollTop = function () {\n var nextOffset = this.selectedLI.offsetTop - this.list.scrollTop;\n var nextBottom = this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop;\n nextOffset = this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?\n nextOffset - this.fixedHeaderElement.offsetHeight : nextOffset;\n var boxRange = (this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop);\n if (this.activeIndex === 0) {\n this.list.scrollTop = 0;\n }\n else if (nextOffset < 0) {\n this.list.scrollTop = this.list.scrollTop + nextOffset;\n }\n else if (!(boxRange > 0 && this.list.offsetHeight > boxRange)) {\n this.list.scrollTop = this.selectedLI.offsetTop - (this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?\n this.fixedHeaderElement.offsetHeight : 0);\n }\n };\n DropDownList.prototype.isEditTextBox = function () {\n return false;\n };\n DropDownList.prototype.isFiltering = function () {\n return this.allowFiltering;\n };\n DropDownList.prototype.isPopupButton = function () {\n return true;\n };\n DropDownList.prototype.setScrollPosition = function (e) {\n if (!isNullOrUndefined(e)) {\n switch (e.action) {\n case 'pageDown':\n case 'down':\n case 'end':\n this.scrollBottom();\n break;\n default:\n this.scrollTop();\n break;\n }\n }\n else {\n this.scrollBottom(true);\n }\n };\n DropDownList.prototype.clearText = function () {\n this.filterInput.value = '';\n this.searchLists(null);\n };\n DropDownList.prototype.listScroll = function () {\n this.filterInput.blur();\n };\n DropDownList.prototype.closePopup = function (delay) {\n this.isTyped = false;\n if (!(this.popupObj && document.body.contains(this.popupObj.element) && this.beforePopupOpen)) {\n return;\n }\n EventHandler.remove(document, 'mousedown', this.onDocumentClick);\n this.isActive = false;\n this.filterInputObj = null;\n this.isDropDownClick = false;\n this.preventAutoFill = false;\n var scrollableParentElements = this.popupObj.getScrollableParent(this.inputWrapper.container);\n for (var _i = 0, scrollableParentElements_1 = scrollableParentElements; _i < scrollableParentElements_1.length; _i++) {\n var element = scrollableParentElements_1[_i];\n EventHandler.remove(element, 'scroll', this.scrollHandler);\n }\n if (Browser.isDevice && this.isFilterLayout()) {\n removeClass([document.body, this.popupObj.element], dropDownListClasses.popupFullScreen);\n EventHandler.remove(this.list, 'scroll', this.listScroll);\n }\n if (this.isFilterLayout()) {\n if (!Browser.isDevice) {\n this.searchKeyModule.destroy();\n if (this.clearIconElement) {\n EventHandler.remove(this.clearIconElement, 'click', this.clearText);\n }\n }\n if (this.backIconElement) {\n EventHandler.remove(this.backIconElement, 'click', this.clickOnBackIcon);\n EventHandler.remove(this.clearIconElement, 'click', this.clearText);\n }\n EventHandler.remove(this.filterInput, 'input', this.onInput);\n EventHandler.remove(this.filterInput, 'keyup', this.onFilterUp);\n EventHandler.remove(this.filterInput, 'keydown', this.onFilterDown);\n EventHandler.remove(this.filterInput, 'blur', this.onBlur);\n this.filterInput = null;\n }\n attributes(this.targetElement(), { 'aria-expanded': 'false', 'aria-activedescendant': null });\n this.inputWrapper.container.classList.remove(dropDownListClasses.iconAnimation);\n if (this.isFiltering()) {\n this.actionCompleteData.isUpdated = false;\n }\n this.beforePopupOpen = false;\n var eventArgs = { popup: this.popupObj, cancel: false };\n this.trigger('close', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n var animModel = {\n name: 'FadeOut',\n duration: 100,\n delay: delay ? delay : 0\n };\n if (this.getModuleName() === 'autocomplete') {\n this.rippleFun();\n }\n if (this.isPopupOpen) {\n this.popupObj.hide(new Animation(animModel));\n }\n else {\n this.destroyPopup();\n }\n };\n DropDownList.prototype.destroyPopup = function () {\n this.isPopupOpen = false;\n this.isFilterFocus = false;\n this.popupObj.destroy();\n detach(this.popupObj.element);\n };\n DropDownList.prototype.clickOnBackIcon = function () {\n this.hidePopup();\n this.focusIn();\n };\n /**\n * To Initialize the control rendering\n * @private\n */\n DropDownList.prototype.render = function () {\n if (this.element.tagName === 'INPUT') {\n this.inputElement = this.element;\n }\n else {\n this.inputElement = createElement('input');\n if (this.element.tagName !== this.getNgDirective()) {\n this.element.style.display = 'none';\n }\n this.element.parentElement.insertBefore(this.inputElement, this.element);\n this.preventTabIndex(this.inputElement);\n }\n this.inputWrapper = Input.createInput({\n element: this.inputElement,\n buttons: this.isPopupButton() ? [dropDownListClasses.icon] : null,\n floatLabelType: this.floatLabelType,\n properties: {\n readonly: this.getModuleName() === 'dropdownlist' ? true : this.readonly,\n placeholder: this.placeholder,\n cssClass: this.cssClass,\n enabled: this.enabled,\n enableRtl: this.enableRtl,\n showClearButton: this.showClearButton\n },\n });\n if (this.element.tagName === this.getNgDirective()) {\n this.element.appendChild(this.inputWrapper.container);\n }\n else {\n this.inputElement.parentElement.insertBefore(this.element, this.inputElement);\n }\n this.hiddenElement = createElement('select', {\n attrs: { 'aria-hidden': 'true', 'tabindex': '-1', 'class': dropDownListClasses.hiddenElement }\n });\n prepend([this.hiddenElement], this.inputWrapper.container);\n this.validationAttribute(this.element, this.hiddenElement);\n this.setFields();\n this.inputWrapper.container.style.width = formatUnit(this.width);\n this.inputWrapper.container.classList.add('e-ddl');\n this.wireEvent();\n this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';\n this.element.removeAttribute('tabindex');\n var id = this.element.getAttribute('id') ? this.element.getAttribute('id') : getUniqueID('ej2_dropdownlist');\n this.element.id = id;\n this.hiddenElement.id = id + '_hidden';\n this.targetElement().setAttribute('tabindex', this.tabIndex);\n attributes(this.targetElement(), this.getAriaAttributes());\n this.setHTMLAttributes();\n if (this.value !== null || this.activeIndex !== null || this.text !== null) {\n this.initValue();\n }\n else if (this.element.tagName === 'SELECT' && this.element.options[0]) {\n var selectElement = this.element;\n this.value = selectElement.options[selectElement.selectedIndex].value;\n this.text = isNullOrUndefined(this.value) ? null : selectElement.options[selectElement.selectedIndex].textContent;\n this.initValue();\n }\n this.preventTabIndex(this.element);\n if (!this.enabled) {\n this.targetElement().tabIndex = -1;\n }\n this.initial = false;\n this.element.style.opacity = '';\n this.inputElement.onselect = function (e) { e.stopImmediatePropagation(); };\n this.inputElement.onchange = function (e) { e.stopImmediatePropagation(); };\n if (this.element.hasAttribute('autofocus')) {\n this.focusIn();\n }\n };\n ;\n DropDownList.prototype.setFooterTemplate = function (popupEle) {\n var compiledString;\n if (this.footer) {\n this.footer.innerHTML = '';\n }\n else {\n this.footer = document.createElement('div');\n addClass([this.footer], dropDownListClasses.footer);\n }\n compiledString = compile(this.footerTemplate);\n for (var _i = 0, _a = compiledString({}); _i < _a.length; _i++) {\n var item = _a[_i];\n this.footer.appendChild(item);\n }\n append([this.footer], popupEle);\n };\n DropDownList.prototype.setHeaderTemplate = function (popupEle) {\n var compiledString;\n if (this.header) {\n this.header.innerHTML = '';\n }\n else {\n this.header = document.createElement('div');\n addClass([this.header], dropDownListClasses.header);\n }\n compiledString = compile(this.headerTemplate);\n for (var _i = 0, _a = compiledString({}); _i < _a.length; _i++) {\n var item = _a[_i];\n this.header.appendChild(item);\n }\n var contentEle = popupEle.querySelector('div.e-content');\n popupEle.insertBefore(this.header, contentEle);\n };\n DropDownList.prototype.setOldText = function (text) {\n this.text = text;\n };\n DropDownList.prototype.setOldValue = function (value) {\n this.value = value;\n };\n DropDownList.prototype.refreshPopup = function () {\n if (!isNullOrUndefined(this.popupObj) && document.body.contains(this.popupObj.element) &&\n ((this.allowFiltering && !(Browser.isDevice && this.isFilterLayout())) || this.getModuleName() === 'autocomplete')) {\n this.popupObj.refreshPosition(this.inputWrapper.container);\n }\n };\n DropDownList.prototype.updateDataSource = function (prop) {\n this.clear(null, prop);\n this.resetList(this.dataSource);\n if (!this.isCustomFilter && !this.isFilterFocus && document.activeElement !== this.filterInput) {\n this.itemData = this.getDataByValue(this.value);\n var dataItem = this.getItemData();\n this.setProperties({ 'value': dataItem.value, 'text': dataItem.text });\n }\n };\n /**\n * Dynamically change the value of properties.\n * @private\n */\n DropDownList.prototype.onPropertyChanged = function (newProp, oldProp) {\n this.setUpdateInitial(['query', 'dataSource'], newProp);\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'query':\n case 'dataSource':\n break;\n case 'htmlAttributes':\n this.setHTMLAttributes();\n break;\n case 'width':\n setStyleAttribute(this.inputWrapper.container, { 'width': formatUnit(newProp.width) });\n break;\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.inputElement);\n break;\n case 'filterBarPlaceholder':\n if (this.filterInput) {\n Input.setPlaceholder(newProp.filterBarPlaceholder, this.filterInput);\n }\n break;\n case 'readonly':\n if (this.getModuleName() !== 'dropdownlist') {\n Input.setReadonly(newProp.readonly, this.inputElement);\n }\n break;\n case 'cssClass':\n Input.setCssClass(newProp.cssClass, [this.inputWrapper.container]);\n if (this.popupObj) {\n this.popupObj.element.classList.add(newProp.cssClass);\n }\n break;\n case 'enableRtl':\n this.setEnableRtl();\n break;\n case 'enabled':\n this.setEnable();\n break;\n case 'text':\n if (newProp.text === null) {\n this.clear();\n break;\n }\n if (!this.list) {\n if (this.dataSource instanceof DataManager) {\n this.initRemoteRender = true;\n }\n this.renderList();\n }\n if (!this.initRemoteRender) {\n var li = this.getElementByText(newProp.text);\n if (this.isValidLI(li)) {\n this.setSelection(li, null);\n }\n else {\n this.setOldText(oldProp.text);\n }\n }\n break;\n case 'value':\n if (newProp.value === null) {\n this.clear();\n break;\n }\n this.notify('beforeValueChange', { newProp: newProp }); // gird component value type change\n if (!this.list) {\n if (this.dataSource instanceof DataManager) {\n this.initRemoteRender = true;\n }\n this.renderList();\n }\n if (!this.initRemoteRender) {\n var item = this.getElementByValue(newProp.value);\n if (this.isValidLI(item)) {\n this.setSelection(item, null);\n }\n else {\n this.setOldValue(oldProp.value);\n }\n }\n break;\n case 'index':\n if (newProp.index === null) {\n this.clear();\n break;\n }\n if (!this.list) {\n if (this.dataSource instanceof DataManager) {\n this.initRemoteRender = true;\n }\n this.renderList();\n }\n if (!this.initRemoteRender) {\n var element = this.liCollections[newProp.index];\n if (this.isValidLI(element)) {\n this.setSelection(element, null);\n }\n else {\n this.index = oldProp.index;\n }\n }\n break;\n case 'footerTemplate':\n if (this.popupObj) {\n this.setFooterTemplate(this.popupObj.element);\n }\n break;\n case 'headerTemplate':\n if (this.popupObj) {\n this.setHeaderTemplate(this.popupObj.element);\n }\n break;\n case 'valueTemplate':\n if (!isNullOrUndefined(this.itemData) && this.valueTemplate != null) {\n this.setValueTemplate();\n }\n break;\n case 'floatLabelType':\n Input.removeFloating(this.inputWrapper);\n Input.addFloating(this.inputElement, newProp.floatLabelType, this.placeholder);\n break;\n case 'showClearButton':\n Input.setClearButton(newProp.showClearButton, this.inputElement, this.inputWrapper);\n this.bindClearEvent();\n break;\n default:\n var ddlProps = void 0;\n ddlProps = this.getPropObject(prop, newProp, oldProp);\n _super.prototype.onPropertyChanged.call(this, ddlProps.newProperty, ddlProps.oldProperty);\n break;\n }\n }\n };\n /**\n * Return the module name.\n * @private\n */\n DropDownList.prototype.getModuleName = function () {\n return 'dropdownlist';\n };\n /**\n * Opens the popup that displays the list of items.\n * @returns void.\n */\n DropDownList.prototype.showPopup = function () {\n if (!this.enabled) {\n return;\n }\n if (this.beforePopupOpen) {\n this.refreshPopup();\n return;\n }\n this.beforePopupOpen = true;\n if (this.isFiltering() && !this.isActive && this.actionCompleteData.list && this.actionCompleteData.list[0]) {\n this.isActive = true;\n this.onActionComplete(this.actionCompleteData.ulElement, this.actionCompleteData.list, null, true);\n }\n else if (isNullOrUndefined(this.list) || !isUndefined(this.list) && this.list.classList.contains(dropDownBaseClasses.noData)) {\n this.renderList();\n }\n if (Browser.isDevice && this.isFilterLayout()) {\n var proxy_2 = this;\n window.onpopstate = function () {\n proxy_2.hidePopup();\n };\n history.pushState({}, '');\n }\n if (!isNullOrUndefined(this.list.children[0]) || this.list.classList.contains(dropDownBaseClasses.noData)) {\n this.renderPopup();\n }\n attributes(this.targetElement(), { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });\n };\n /**\n * Hides the popup if it is in an open state.\n * @returns void.\n */\n DropDownList.prototype.hidePopup = function () {\n if (this.isEscapeKey && this.getModuleName() === 'dropdownlist') {\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n this.isEscapeKey = false;\n if (!isNullOrUndefined(this.index)) {\n this.selectedLI = this.liCollections[this.index];\n this.updateSelectedItem(this.selectedLI, null, true);\n if (this.valueTemplate && this.itemData !== null) {\n this.setValueTemplate();\n }\n }\n else {\n this.resetSelection();\n }\n }\n this.closePopup();\n var dataItem = this.getItemData();\n if (this.inputElement.value.trim() === '' && !this.isInteracted && (this.isSelectCustom ||\n !isNullOrUndefined(this.selectedLI) && this.inputElement.value !== dataItem.text)) {\n this.isSelectCustom = false;\n this.clear();\n }\n };\n /**\n * Sets the focus on the component for interaction.\n * @returns void.\n */\n DropDownList.prototype.focusIn = function () {\n if (!this.enabled) {\n return;\n }\n if (this.targetElement().classList.contains(dropDownListClasses.disable)) {\n return;\n }\n var isFocused = false;\n if (this.preventFocus && Browser.isDevice) {\n this.inputWrapper.container.tabIndex = 1;\n this.inputWrapper.container.focus();\n this.preventFocus = false;\n isFocused = true;\n }\n if (!isFocused) {\n this.targetElement().focus();\n }\n addClass([this.inputWrapper.container], [dropDownListClasses.inputFocus]);\n this.onFocus();\n };\n /**\n * Moves the focus from the component if the component is already focused.\n * @returns void.\n */\n DropDownList.prototype.focusOut = function () {\n if (!this.enabled) {\n return;\n }\n this.isTyped = true;\n this.hidePopup();\n this.targetElement().blur();\n removeClass([this.inputWrapper.container], [dropDownListClasses.inputFocus]);\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.\n * @method destroy\n * @return {void}.\n */\n DropDownList.prototype.destroy = function () {\n var _this = this;\n this.isActive = false;\n this.hidePopup();\n this.unWireEvent();\n if (this.list) {\n this.unWireListEvents();\n }\n if (this.element && !this.element.classList.contains('e-' + this.getModuleName())) {\n return;\n }\n var attrArray = ['readonly', 'aria-disabled', 'aria-placeholder',\n 'placeholder', 'aria-owns', 'aria-labelledby', 'aria-haspopup', 'aria-expanded',\n 'aria-activedescendant', 'autocomplete', 'aria-readonly', 'autocorrect',\n 'autocapitalize', 'spellcheck', 'aria-autocomplete'];\n attrArray.forEach(function (value) {\n _this.inputElement.removeAttribute(value);\n });\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n this.inputElement.classList.remove('e-input');\n Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);\n this.element.style.display = 'block';\n if (this.inputWrapper.container.parentElement.tagName === this.getNgDirective()) {\n detach(this.inputWrapper.container);\n }\n else {\n this.inputWrapper.container.parentElement.insertBefore(this.element, this.inputWrapper.container);\n detach(this.inputWrapper.container);\n }\n _super.prototype.destroy.call(this);\n };\n ;\n /**\n * Gets all the list items bound on this component.\n * @returns Element[].\n */\n DropDownList.prototype.getItems = function () {\n if (!this.list) {\n if (this.dataSource instanceof DataManager) {\n this.initRemoteRender = true;\n }\n this.renderList();\n }\n return this.ulElement ? _super.prototype.getItems.call(this) : null;\n };\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"cssClass\", void 0);\n __decorate([\n Property('100%')\n ], DropDownList.prototype, \"width\", void 0);\n __decorate([\n Property('300px')\n ], DropDownList.prototype, \"popupHeight\", void 0);\n __decorate([\n Property('100%')\n ], DropDownList.prototype, \"popupWidth\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"placeholder\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"filterBarPlaceholder\", void 0);\n __decorate([\n Property({})\n ], DropDownList.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"query\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"valueTemplate\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"headerTemplate\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"footerTemplate\", void 0);\n __decorate([\n Property(false)\n ], DropDownList.prototype, \"allowFiltering\", void 0);\n __decorate([\n Property(false)\n ], DropDownList.prototype, \"readonly\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"text\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"value\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"index\", void 0);\n __decorate([\n Property('Never')\n ], DropDownList.prototype, \"floatLabelType\", void 0);\n __decorate([\n Property(false)\n ], DropDownList.prototype, \"showClearButton\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"filtering\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"blur\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"focus\", void 0);\n DropDownList = __decorate([\n NotifyPropertyChanges\n ], DropDownList);\n return DropDownList;\n}(DropDownBase));\nexport { DropDownList };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n///
\nimport { EventHandler, Property, Event, addClass, Browser, removeClass } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, NotifyPropertyChanges, getValue, setValue } from '@syncfusion/ej2-base';\nimport { DropDownList, dropDownListClasses } from '../drop-down-list/drop-down-list';\nimport { Search } from '../common/incremental-search';\nimport { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';\n/* tslint:disable */\nimport { Input } from '@syncfusion/ej2-inputs';\n/* tslint:enable */\ndropDownListClasses.root = 'e-combobox';\nvar inputObject = {\n container: null,\n buttons: []\n};\n/**\n * The ComboBox component allows the user to type a value or choose an option from the list of predefined options.\n * ```html\n *
\n * ```\n * ```typescript\n * let games:ComboBox = new ComboBox();\n * games.appendTo(\"#list\");\n * ```\n */\nvar ComboBox = /** @class */ (function (_super) {\n __extends(ComboBox, _super);\n /**\n * *Constructor for creating the component\n */\n function ComboBox(options, element) {\n return _super.call(this, options, element) || this;\n }\n ;\n /**\n * Initialize the event handler\n * @private\n */\n ComboBox.prototype.preRender = function () {\n _super.prototype.preRender.call(this);\n };\n ComboBox.prototype.wireEvent = function () {\n if (this.getModuleName() === 'combobox') {\n EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', this.preventBlur, this);\n EventHandler.add(this.inputWrapper.container, 'blur', this.onBlur, this);\n }\n if (!isNullOrUndefined(this.inputWrapper.buttons[0])) {\n EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', this.dropDownClick, this);\n }\n EventHandler.add(this.inputElement, 'focus', this.targetFocus, this);\n if (!this.readonly) {\n EventHandler.add(this.inputElement, 'input', this.onInput, this);\n EventHandler.add(this.inputElement, 'keyup', this.onFilterUp, this);\n EventHandler.add(this.inputElement, 'keydown', this.onFilterDown, this);\n }\n this.bindCommonEvent();\n };\n ComboBox.prototype.preventBlur = function (e) {\n if ((!this.allowFiltering && document.activeElement !== this.inputElement &&\n !document.activeElement.classList.contains(dropDownListClasses.input) && Browser.isDevice || !Browser.isDevice)) {\n e.preventDefault();\n }\n };\n ComboBox.prototype.targetElement = function () {\n return this.inputElement;\n };\n ComboBox.prototype.setOldText = function (text) {\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n this.customValue();\n this.removeSelection();\n };\n ComboBox.prototype.setOldValue = function (value) {\n if (this.allowCustom) {\n this.valueMuteChange(this.value);\n }\n else {\n this.valueMuteChange(null);\n }\n this.removeSelection();\n this.setHiddenValue();\n };\n ComboBox.prototype.valueMuteChange = function (value) {\n var inputValue = isNullOrUndefined(value) ? null : value.toString();\n Input.setValue(inputValue, this.inputElement, this.floatLabelType, this.showClearButton);\n this.setProperties({ value: value, text: value, index: null }, true);\n this.activeIndex = this.index;\n var fields = this.fields;\n var dataItem = {};\n dataItem[fields.text] = isNullOrUndefined(value) ? null : value.toString();\n dataItem[fields.value] = isNullOrUndefined(value) ? null : value.toString();\n this.itemData = dataItem;\n this.item = null;\n if (this.previousValue !== this.value) {\n this.detachChangeEvent(null);\n }\n };\n ComboBox.prototype.updateValues = function () {\n if (!isNullOrUndefined(this.value)) {\n var li = this.getElementByValue(this.value);\n if (li) {\n this.setSelection(li, null);\n }\n else if (this.allowCustom) {\n this.valueMuteChange(this.value);\n }\n else {\n this.valueMuteChange(null);\n }\n }\n else if (this.text && isNullOrUndefined(this.value)) {\n var li = this.getElementByText(this.text);\n if (li) {\n this.setSelection(li, null);\n }\n else {\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n this.customValue();\n }\n }\n else {\n this.setSelection(this.liCollections[this.activeIndex], null);\n }\n this.setHiddenValue();\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n };\n ComboBox.prototype.getAriaAttributes = function () {\n var ariaAttributes = {\n 'aria-owns': this.element.id + '_options',\n 'role': 'combobox',\n 'aria-autocomplete': 'both',\n 'aria-labelledby': this.hiddenElement.id,\n 'aria-hasPopup': 'true',\n 'aria-expanded': 'false',\n 'aria-readonly': this.readonly.toString(),\n 'autocomplete': 'off',\n 'autocorrect': 'off',\n 'autocapitalize': 'off',\n 'spellcheck': 'false'\n };\n return ariaAttributes;\n };\n ComboBox.prototype.searchLists = function (e) {\n this.isTyped = true;\n if (this.isFiltering()) {\n _super.prototype.searchLists.call(this, e);\n if (this.filterInput.value.trim() === '') {\n this.setHoverList(this.ulElement.querySelector('.' + dropDownListClasses.li));\n }\n }\n else {\n if (this.ulElement && this.inputElement.value === '' && this.preventAutoFill) {\n this.setHoverList(this.ulElement.querySelector('.' + dropDownListClasses.li));\n }\n this.incrementalSearch(e);\n }\n };\n ComboBox.prototype.getNgDirective = function () {\n return 'EJS-COMBOBOX';\n };\n ComboBox.prototype.setSearchBox = function () {\n this.filterInput = this.inputElement;\n return (this.isFiltering() ? this.inputWrapper : inputObject);\n };\n ComboBox.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {\n _super.prototype.onActionComplete.call(this, ulElement, list, e);\n if (this.isSelectCustom) {\n this.removeSelection();\n }\n if (!this.preventAutoFill && this.getModuleName() === 'combobox' && this.isTyped) {\n this.inlineSearch();\n }\n };\n ComboBox.prototype.getFocusElement = function () {\n var dataItem = this.isSelectCustom ? { text: '' } : this.getItemData();\n var selected = this.list.querySelector('.' + dropDownListClasses.selected);\n var isSelected = dataItem.text === this.inputElement.value && !isNullOrUndefined(selected);\n if (isSelected) {\n return selected;\n }\n if ((Browser.isDevice && !this.isDropDownClick || !Browser.isDevice) &&\n !isNullOrUndefined(this.liCollections) && this.liCollections.length > 0) {\n var inputValue = this.inputElement.value;\n var activeItem = Search(inputValue, this.liCollections, 'StartsWith', true);\n var activeElement = activeItem.item;\n if (!isNullOrUndefined(activeElement)) {\n var count = this.getIndexByValue(activeElement.getAttribute('data-value')) - 1;\n var height = parseInt(getComputedStyle(this.liCollections[0], null).getPropertyValue('height'), 10);\n if (!isNaN(height) && this.getModuleName() !== 'autocomplete') {\n this.removeFocus();\n var fixedHead = this.fields.groupBy ? this.liCollections[0].offsetHeight : 0;\n this.list.scrollTop = count * height + fixedHead;\n addClass([activeElement], dropDownListClasses.focus);\n }\n }\n else {\n if (this.isSelectCustom && this.inputElement.value.trim() !== '') {\n this.removeFocus();\n this.list.scrollTop = 0;\n }\n }\n return activeElement;\n }\n else {\n return null;\n }\n };\n ComboBox.prototype.setValue = function (e) {\n if (e && e.type === 'keydown' && e.action === 'enter') {\n this.removeFillSelection();\n }\n if (this.autofill && this.getModuleName() === 'combobox' && e && e.type === 'keydown' && e.action !== 'enter') {\n this.preventAutoFill = false;\n this.inlineSearch(e);\n return false;\n }\n else {\n return _super.prototype.setValue.call(this, e);\n }\n };\n ComboBox.prototype.showSpinner = function () {\n if (isNullOrUndefined(this.spinnerElement)) {\n this.spinnerElement = this.inputWrapper.buttons[0] || this.inputWrapper.clearButton;\n addClass([this.spinnerElement], dropDownListClasses.disableIcon);\n createSpinner({\n target: this.spinnerElement,\n width: Browser.isDevice ? '16px' : '14px'\n });\n showSpinner(this.spinnerElement);\n }\n };\n ComboBox.prototype.hideSpinner = function () {\n if (!isNullOrUndefined(this.spinnerElement)) {\n hideSpinner(this.spinnerElement);\n this.spinnerElement.innerHTML = '';\n removeClass([this.spinnerElement], dropDownListClasses.disableIcon);\n this.spinnerElement = null;\n }\n };\n ComboBox.prototype.setAutoFill = function (activeElement, isHover) {\n if (!isHover) {\n this.setHoverList(activeElement);\n }\n if (this.autofill && !this.preventAutoFill) {\n var currentValue = this.getTextByValue(activeElement.getAttribute('data-value')).toString();\n var currentFillValue = this.getFormattedValue(activeElement.getAttribute('data-value'));\n if (this.getModuleName() === 'combobox') {\n if (!this.isSelected && this.previousValue !== currentFillValue) {\n this.updateSelectedItem(activeElement, null);\n this.isSelected = true;\n this.previousValue = this.getFormattedValue(activeElement.getAttribute('data-value'));\n }\n else {\n this.updateSelectedItem(activeElement, null, true);\n }\n }\n if (!this.isAndroidAutoFill(currentValue)) {\n this.setAutoFillSelection(currentValue);\n }\n }\n };\n ComboBox.prototype.isAndroidAutoFill = function (value) {\n if (Browser.isAndroid) {\n var currentPoints = this.getSelectionPoints();\n var prevEnd = this.prevSelectPoints.end;\n var curEnd = currentPoints.end;\n var prevStart = this.prevSelectPoints.start;\n var curStart = currentPoints.start;\n if (prevEnd !== 0 && ((prevEnd === value.length && prevStart === value.length) ||\n (prevStart > curStart && prevEnd > curEnd) || (prevEnd === curEnd && prevStart === curStart))) {\n return true;\n }\n else {\n return false;\n }\n }\n else {\n return false;\n }\n };\n ComboBox.prototype.clear = function (e, property) {\n if (isNullOrUndefined(property) || property !== 'dataSource') {\n _super.prototype.clear.call(this, e);\n }\n };\n ComboBox.prototype.isSelectFocusItem = function (element) {\n return !isNullOrUndefined(element);\n };\n ComboBox.prototype.inlineSearch = function (e) {\n var isKeyNavigate = (e && (e.action === 'down' || e.action === 'up' ||\n e.action === 'home' || e.action === 'end' || e.action === 'pageUp' || e.action === 'pageDown'));\n var activeElement = isKeyNavigate ? this.liCollections[this.activeIndex] : this.getFocusElement();\n if (!isNullOrUndefined(activeElement)) {\n if (!isKeyNavigate) {\n var value = this.getFormattedValue(activeElement.getAttribute('data-value'));\n this.activeIndex = this.getIndexByValue(value);\n this.activeIndex = !isNullOrUndefined(this.activeIndex) ? this.activeIndex : null;\n }\n this.preventAutoFill = this.inputElement.value === '' ? false : this.preventAutoFill;\n this.setAutoFill(activeElement, isKeyNavigate);\n }\n else if (this.inputElement.value === '') {\n this.activeIndex = null;\n this.list.scrollTop = 0;\n var focusItem = this.list.querySelector('.' + dropDownListClasses.li);\n this.setHoverList(focusItem);\n }\n else {\n this.activeIndex = null;\n this.removeSelection();\n this.removeFocus();\n }\n };\n ComboBox.prototype.incrementalSearch = function (e) {\n this.showPopup();\n if (!isNullOrUndefined(this.listData)) {\n this.inlineSearch(e);\n e.preventDefault();\n }\n };\n ;\n ComboBox.prototype.setAutoFillSelection = function (currentValue) {\n var selection = this.getSelectionPoints();\n var value = this.inputElement.value.substr(0, selection.start);\n if (value && (value.toLowerCase() === currentValue.substr(0, selection.start).toLowerCase())) {\n var inputValue = value + currentValue.substr(value.length, currentValue.length);\n Input.setValue(inputValue, this.inputElement, this.floatLabelType, this.showClearButton);\n this.inputElement.setSelectionRange(selection.start, this.inputElement.value.length);\n }\n else {\n Input.setValue(currentValue, this.inputElement, this.floatLabelType, this.showClearButton);\n this.inputElement.setSelectionRange(0, this.inputElement.value.length);\n }\n };\n ;\n ComboBox.prototype.getValueByText = function (text) {\n return _super.prototype.getValueByText.call(this, text, true, this.ignoreAccent);\n };\n ComboBox.prototype.unWireEvent = function () {\n if (this.getModuleName() === 'combobox') {\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown', this.preventBlur);\n EventHandler.remove(this.inputWrapper.container, 'blur', this.onBlur);\n }\n if (!isNullOrUndefined(this.inputWrapper.buttons[0])) {\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown', this.dropDownClick);\n }\n EventHandler.remove(this.inputElement, 'focus', this.targetFocus);\n if (!this.readonly) {\n EventHandler.remove(this.inputElement, 'input', this.onInput);\n EventHandler.remove(this.inputElement, 'keyup', this.onFilterUp);\n EventHandler.remove(this.inputElement, 'keydown', this.onFilterDown);\n }\n this.unBindCommonEvent();\n };\n ComboBox.prototype.setSelection = function (li, e) {\n _super.prototype.setSelection.call(this, li, e);\n if (!isNullOrUndefined(li) && !this.autofill && !this.isDropDownClick) {\n this.removeFocus();\n }\n };\n ComboBox.prototype.selectCurrentItem = function (e) {\n var li;\n if (this.isPopupOpen) {\n li = this.list.querySelector('.' + dropDownListClasses.focus);\n if (li) {\n this.setSelection(li, e);\n this.isTyped = false;\n }\n if (this.isSelected) {\n this.isSelectCustom = false;\n this.onChangeEvent(e);\n }\n }\n if (e.action === 'enter' && this.inputElement.value.trim() === '') {\n this.clear(e);\n }\n else if (this.isTyped && !this.isSelected && isNullOrUndefined(li)) {\n this.customValue();\n }\n this.hidePopup();\n };\n ComboBox.prototype.setHoverList = function (li) {\n this.removeSelection();\n if (this.isValidLI(li) && !li.classList.contains(dropDownListClasses.selected)) {\n this.removeFocus();\n li.classList.add(dropDownListClasses.focus);\n }\n };\n ;\n ComboBox.prototype.targetFocus = function (e) {\n if (Browser.isDevice && !this.allowFiltering) {\n this.preventFocus = false;\n }\n this.onFocus();\n };\n ComboBox.prototype.dropDownClick = function (e) {\n e.preventDefault();\n if (Browser.isDevice && !this.allowFiltering) {\n this.preventFocus = true;\n }\n _super.prototype.dropDownClick.call(this, e);\n };\n ComboBox.prototype.customValue = function () {\n var value = this.getValueByText(this.inputElement.value);\n if (!this.allowCustom && this.inputElement.value !== '') {\n this.setProperties({ value: value });\n if (isNullOrUndefined(this.value)) {\n Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);\n }\n }\n else if (this.inputElement.value.trim() !== '') {\n var previousValue = this.value;\n if (isNullOrUndefined(value)) {\n var value_1 = this.inputElement.value === '' ? null : this.inputElement.value;\n var fields = this.fields;\n var eventArgs = void 0;\n eventArgs = { text: value_1, item: {} };\n if (!this.initial) {\n this.trigger('customValueSpecifier', eventArgs);\n }\n var item = eventArgs.item;\n var dataItem = {};\n if (item && getValue(fields.text, item) && getValue(fields.value, item)) {\n dataItem = item;\n }\n else {\n setValue(fields.text, value_1, dataItem);\n setValue(fields.value, value_1, dataItem);\n }\n this.itemData = dataItem;\n var changeData = {\n text: getValue(fields.text, this.itemData),\n value: getValue(fields.value, this.itemData),\n index: null\n };\n this.setProperties(changeData, true);\n this.setSelection(null, null);\n this.isSelectCustom = true;\n }\n else {\n this.isSelectCustom = false;\n this.setProperties({ value: value });\n }\n if (previousValue !== this.value) {\n this.onChangeEvent(null);\n }\n }\n else if (this.allowCustom) {\n this.isSelectCustom = true;\n }\n };\n /**\n * Dynamically change the value of properties.\n * @private\n */\n ComboBox.prototype.onPropertyChanged = function (newProp, oldProp) {\n this.setUpdateInitial(['query', 'dataSource'], newProp);\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'readonly':\n Input.setReadonly(this.readonly, this.inputElement);\n if (this.readonly) {\n EventHandler.remove(this.inputElement, 'keyup', this.onFilterUp);\n EventHandler.remove(this.inputElement, 'keydown', this.onFilterDown);\n }\n else {\n EventHandler.add(this.inputElement, 'keyup', this.onFilterUp, this);\n EventHandler.add(this.inputElement, 'keydown', this.onFilterDown, this);\n }\n break;\n case 'allowFiltering':\n this.setSearchBox();\n if (this.isFiltering() && this.getModuleName() === 'combobox' && isNullOrUndefined(this.list)) {\n _super.prototype.renderList.call(this);\n }\n break;\n case 'allowCustom':\n break;\n default:\n var comboProps = void 0;\n comboProps = this.getPropObject(prop, newProp, oldProp);\n _super.prototype.onPropertyChanged.call(this, comboProps.newProperty, comboProps.oldProperty);\n break;\n }\n }\n };\n /**\n * To initialize the control rendering.\n * @private\n */\n ComboBox.prototype.render = function () {\n _super.prototype.render.call(this);\n this.setSearchBox();\n if (this.isFiltering() && this.getModuleName() === 'combobox' && isNullOrUndefined(this.list)) {\n _super.prototype.renderList.call(this);\n }\n };\n ;\n /**\n * Return the module name of this component.\n * @private\n */\n ComboBox.prototype.getModuleName = function () {\n return 'combobox';\n };\n /**\n * Hides the popup if it is in open state.\n * @returns void.\n */\n ComboBox.prototype.hidePopup = function () {\n var inputValue = this.inputElement.value === '' ? null : this.inputElement.value;\n if (!isNullOrUndefined(this.listData)) {\n var isEscape = this.isEscapeKey;\n if (this.isEscapeKey) {\n Input.setValue(this.typedString, this.inputElement, this.floatLabelType, this.showClearButton);\n this.isEscapeKey = false;\n }\n if (this.autofill) {\n this.removeFillSelection();\n }\n var dataItem = this.isSelectCustom ? { text: '' } : this.getItemData();\n var selected = this.list.querySelector('.' + dropDownListClasses.selected);\n if (dataItem.text === this.inputElement.value && !isNullOrUndefined(selected)) {\n if (this.isSelected) {\n this.onChangeEvent(null);\n this.isSelectCustom = false;\n }\n _super.prototype.hidePopup.call(this);\n return;\n }\n if (this.getModuleName() === 'combobox' && this.inputElement.value.trim() !== '') {\n var searchItem = Search(this.inputElement.value, this.liCollections, 'Equal', true);\n this.selectedLI = searchItem.item;\n if (isNullOrUndefined(searchItem.index)) {\n searchItem.index = Search(this.inputElement.value, this.liCollections, 'StartsWith', true).index;\n }\n this.activeIndex = searchItem.index;\n if (!isNullOrUndefined(this.selectedLI)) {\n this.updateSelectedItem(this.selectedLI, null, true);\n }\n else if (isEscape) {\n this.isSelectCustom = true;\n this.removeSelection();\n }\n }\n if (!this.isEscapeKey && this.isTyped && !this.isInteracted) {\n this.customValue();\n }\n }\n if (isNullOrUndefined(this.listData) && this.allowCustom && !isNullOrUndefined(inputValue) && inputValue !== this.value) {\n this.customValue();\n }\n _super.prototype.hidePopup.call(this);\n };\n /**\n * Sets the focus to the component for interaction.\n * @returns void.\n */\n ComboBox.prototype.focusIn = function () {\n if (!this.enabled) {\n return;\n }\n if (Browser.isDevice && !this.allowFiltering) {\n this.preventFocus = true;\n }\n _super.prototype.focusIn.call(this);\n };\n __decorate([\n Property(false)\n ], ComboBox.prototype, \"autofill\", void 0);\n __decorate([\n Property(true)\n ], ComboBox.prototype, \"allowCustom\", void 0);\n __decorate([\n Property({})\n ], ComboBox.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(false)\n ], ComboBox.prototype, \"allowFiltering\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"query\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"index\", void 0);\n __decorate([\n Property(true)\n ], ComboBox.prototype, \"showClearButton\", void 0);\n __decorate([\n Event()\n ], ComboBox.prototype, \"customValueSpecifier\", void 0);\n __decorate([\n Event()\n ], ComboBox.prototype, \"filtering\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"valueTemplate\", void 0);\n __decorate([\n Property('Never')\n ], ComboBox.prototype, \"floatLabelType\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"filterBarPlaceholder\", void 0);\n ComboBox = __decorate([\n NotifyPropertyChanges\n ], ComboBox);\n return ComboBox;\n}(DropDownList));\nexport { ComboBox };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n///
\nimport { Property, addClass, EventHandler, isNullOrUndefined, detach } from '@syncfusion/ej2-base';\nimport { Event, Complex } from '@syncfusion/ej2-base';\nimport { removeClass, attributes, NotifyPropertyChanges, Browser } from '@syncfusion/ej2-base';\nimport { dropDownListClasses } from '../drop-down-list/drop-down-list';\nimport { ComboBox } from '../combo-box/combo-box';\nimport { highlightSearch } from '../common/highlight-search';\nimport { Search } from '../common/incremental-search';\nimport { FieldSettings } from '../drop-down-base/drop-down-base';\nimport { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';\n/* tslint:disable */\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { DataManager, Query } from '@syncfusion/ej2-data';\n/* tslint:enable */\nvar SPINNER_CLASS = 'e-atc-spinner-icon';\ndropDownListClasses.root = 'e-autocomplete';\ndropDownListClasses.icon = 'e-input-group-icon e-ddl-icon e-search-icon';\n/**\n * The AutoComplete component provides the matched suggestion list when type into the input,\n * from which the user can select one.\n * ```html\n *
\n * ```\n * ```typescript\n * let atcObj:AutoComplete = new AutoComplete();\n * atcObj.appendTo(\"#list\");\n * ```\n */\nvar AutoComplete = /** @class */ (function (_super) {\n __extends(AutoComplete, _super);\n /**\n * * Constructor for creating the widget\n */\n function AutoComplete(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isFiltered = false;\n return _this;\n }\n ;\n /**\n * Initialize the event handler\n * @private\n */\n AutoComplete.prototype.preRender = function () {\n _super.prototype.preRender.call(this);\n };\n AutoComplete.prototype.getNgDirective = function () {\n return 'EJS-AUTOCOMPLETE';\n };\n AutoComplete.prototype.getQuery = function (query) {\n var filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();\n var filterType = (this.queryString === '' && !isNullOrUndefined(this.value)) ? 'equal' : this.filterType;\n var queryString = (this.queryString === '' && !isNullOrUndefined(this.value)) ? this.value : this.queryString;\n if (this.isFiltered) {\n return filterQuery;\n }\n if (this.queryString !== null) {\n var dataType = this.typeOfData(this.dataSource).typeof;\n if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {\n filterQuery.where('', filterType, queryString, this.ignoreCase, this.ignoreAccent);\n }\n else {\n var mapping = !isNullOrUndefined(this.fields.value) ? this.fields.value : '';\n filterQuery.where(mapping, filterType, queryString, this.ignoreCase, this.ignoreAccent);\n }\n }\n if (!isNullOrUndefined(this.suggestionCount)) {\n filterQuery.take(this.suggestionCount);\n }\n return filterQuery;\n };\n AutoComplete.prototype.searchLists = function (e) {\n var _this = this;\n this.isTyped = true;\n this.isSelectCustom = false;\n if (isNullOrUndefined(this.list)) {\n _super.prototype.renderList.call(this, true);\n }\n var isDownUpKey = e.keyCode === 40 || e.keyCode === 38;\n this.queryString = this.filterInput.value;\n if (isDownUpKey) {\n this.queryString = this.queryString === '' ? null : this.queryString;\n this.beforePopupOpen = true;\n this.resetList(this.dataSource, this.fields);\n return;\n }\n this.isSelected = false;\n this.activeIndex = null;\n var eventArgs = {\n preventDefaultAction: false,\n text: this.filterInput.value,\n updateData: function (dataSource, query, fields) {\n if (eventArgs.cancel) {\n return;\n }\n _this.isFiltered = true;\n _this.filterAction(dataSource, query, fields);\n },\n cancel: false\n };\n this.trigger('filtering', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n if (!this.isFiltered && !eventArgs.preventDefaultAction) {\n this.filterAction(this.dataSource, null, this.fields);\n }\n };\n AutoComplete.prototype.filterAction = function (dataSource, query, fields) {\n this.beforePopupOpen = true;\n if (this.queryString !== '' && (this.queryString.length >= this.minLength || this.isFiltered)) {\n this.resetList(dataSource, fields, query);\n }\n else {\n this.hidePopup();\n }\n };\n AutoComplete.prototype.clear = function (e, property) {\n if (isNullOrUndefined(property) || property !== 'dataSource') {\n _super.prototype.clear.call(this, e);\n }\n if (this.beforePopupOpen) {\n this.hidePopup();\n }\n };\n AutoComplete.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {\n this.fixedHeaderElement = null;\n _super.prototype.onActionComplete.call(this, ulElement, list, e);\n var item = this.list.querySelector('.' + dropDownListClasses.li);\n if (!isNullOrUndefined(item)) {\n removeClass([item], dropDownListClasses.focus);\n }\n this.postBackAction();\n };\n AutoComplete.prototype.postBackAction = function () {\n if (this.autofill && !isNullOrUndefined(this.liCollections[0])) {\n var items = [this.liCollections[0]];\n var searchItem = Search(this.inputElement.value, items, 'StartsWith', this.ignoreCase);\n if (!isNullOrUndefined(searchItem.item)) {\n _super.prototype.setAutoFill.call(this, this.liCollections[0], true);\n }\n }\n };\n AutoComplete.prototype.setSelection = function (li, e) {\n if (!this.isValidLI(li)) {\n return;\n }\n if (!isNullOrUndefined(e) && e.type === 'keydown' && e.action !== 'enter' && this.isValidLI(li)) {\n var value = this.getFormattedValue(li.getAttribute('data-value'));\n this.activeIndex = this.getIndexByValue(value);\n this.setHoverList(li);\n this.selectedLI = li;\n this.setScrollPosition(e);\n if (this.autofill) {\n this.preventAutoFill = false;\n _super.prototype.setAutoFill.call(this, li);\n }\n attributes(this.inputElement, { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });\n }\n else {\n _super.prototype.setSelection.call(this, li, e);\n }\n };\n AutoComplete.prototype.listOption = function (dataSource, fieldsSettings) {\n var _this = this;\n var fields = _super.prototype.listOption.call(this, dataSource, fieldsSettings);\n if (isNullOrUndefined(fields.itemCreated)) {\n fields.itemCreated = function (e) {\n if (_this.highlight) {\n highlightSearch(e.item, _this.queryString, _this.ignoreCase, _this.filterType);\n }\n };\n }\n else {\n var itemCreated_1 = fields.itemCreated;\n fields.itemCreated = function (e) {\n if (_this.highlight) {\n highlightSearch(e.item, _this.queryString, _this.ignoreCase, _this.filterType);\n }\n itemCreated_1.apply(_this, [e]);\n };\n }\n return fields;\n };\n ;\n AutoComplete.prototype.showSpinner = function () {\n if (isNullOrUndefined(this.spinnerElement)) {\n this.spinnerElement = this.inputWrapper.buttons[0] || this.inputWrapper.clearButton ||\n Input.appendSpan('e-input-group-icon ' + SPINNER_CLASS, this.inputWrapper.container);\n addClass([this.spinnerElement], dropDownListClasses.disableIcon);\n createSpinner({\n target: this.spinnerElement,\n width: Browser.isDevice ? '16px' : '14px'\n });\n showSpinner(this.spinnerElement);\n }\n };\n AutoComplete.prototype.hideSpinner = function () {\n if (!isNullOrUndefined(this.spinnerElement)) {\n hideSpinner(this.spinnerElement);\n removeClass([this.spinnerElement], dropDownListClasses.disableIcon);\n if (this.spinnerElement.classList.contains(SPINNER_CLASS)) {\n detach(this.spinnerElement);\n }\n else {\n this.spinnerElement.innerHTML = '';\n }\n this.spinnerElement = null;\n }\n };\n AutoComplete.prototype.isFiltering = function () {\n return true;\n };\n AutoComplete.prototype.renderPopup = function () {\n this.list.scrollTop = 0;\n _super.prototype.renderPopup.call(this);\n };\n AutoComplete.prototype.isEditTextBox = function () {\n return true && this.inputElement.value.trim() !== '';\n };\n AutoComplete.prototype.isPopupButton = function () {\n return this.showPopupButton;\n };\n AutoComplete.prototype.isSelectFocusItem = function (element) {\n return false;\n };\n /**\n * Search the entered text and show it in the suggestion list if available.\n * @returns void.\n */\n AutoComplete.prototype.showPopup = function () {\n if (!this.enabled) {\n return;\n }\n if (this.beforePopupOpen) {\n this.refreshPopup();\n return;\n }\n this.beforePopupOpen = true;\n this.preventAutoFill = true;\n if (isNullOrUndefined(this.list)) {\n this.renderList();\n }\n else {\n this.resetList(this.dataSource, this.fields);\n }\n };\n /**\n * Hides the popup if it is in open state.\n * @returns void.\n */\n AutoComplete.prototype.hidePopup = function () {\n _super.prototype.hidePopup.call(this);\n this.activeIndex = -1;\n };\n /**\n * Dynamically change the value of properties.\n * @private\n */\n AutoComplete.prototype.onPropertyChanged = function (newProp, oldProp) {\n this.setUpdateInitial(['query', 'dataSource'], newProp);\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'showPopupButton':\n if (this.showPopupButton) {\n var button = Input.appendSpan(dropDownListClasses.icon, this.inputWrapper.container);\n this.inputWrapper.buttons[0] = button;\n EventHandler.add(this.inputWrapper.buttons[0], 'click', this.dropDownClick, this);\n }\n else {\n detach(this.inputWrapper.buttons[0]);\n this.inputWrapper.buttons[0] = null;\n }\n break;\n default:\n var atcProps = void 0;\n atcProps = this.getPropObject(prop, newProp, oldProp);\n _super.prototype.onPropertyChanged.call(this, atcProps.newProperty, atcProps.oldProperty);\n break;\n }\n }\n };\n /**\n * Return the module name of this component.\n * @private\n */\n AutoComplete.prototype.getModuleName = function () {\n return 'autocomplete';\n };\n /**\n * To initialize the control rendering\n * @private\n */\n AutoComplete.prototype.render = function () {\n _super.prototype.render.call(this);\n };\n ;\n __decorate([\n Complex({ value: null, iconCss: null, groupBy: null }, FieldSettings)\n ], AutoComplete.prototype, \"fields\", void 0);\n __decorate([\n Property(true)\n ], AutoComplete.prototype, \"ignoreCase\", void 0);\n __decorate([\n Property(false)\n ], AutoComplete.prototype, \"showPopupButton\", void 0);\n __decorate([\n Property(false)\n ], AutoComplete.prototype, \"highlight\", void 0);\n __decorate([\n Property(20)\n ], AutoComplete.prototype, \"suggestionCount\", void 0);\n __decorate([\n Property({})\n ], AutoComplete.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(null)\n ], AutoComplete.prototype, \"query\", void 0);\n __decorate([\n Property(1)\n ], AutoComplete.prototype, \"minLength\", void 0);\n __decorate([\n Property('Contains')\n ], AutoComplete.prototype, \"filterType\", void 0);\n __decorate([\n Event()\n ], AutoComplete.prototype, \"filtering\", void 0);\n __decorate([\n Property(null)\n ], AutoComplete.prototype, \"index\", void 0);\n __decorate([\n Property('Never')\n ], AutoComplete.prototype, \"floatLabelType\", void 0);\n __decorate([\n Property(null)\n ], AutoComplete.prototype, \"valueTemplate\", void 0);\n __decorate([\n Property(null)\n ], AutoComplete.prototype, \"filterBarPlaceholder\", void 0);\n __decorate([\n Property(false)\n ], AutoComplete.prototype, \"allowFiltering\", void 0);\n __decorate([\n Property(null)\n ], AutoComplete.prototype, \"text\", void 0);\n AutoComplete = __decorate([\n NotifyPropertyChanges\n ], AutoComplete);\n return AutoComplete;\n}(ComboBox));\nexport { AutoComplete };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n///
\nimport { DropDownBase, dropDownBaseClasses } from '../drop-down-base/drop-down-base';\nimport { Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';\nimport { attributes, setValue } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, extend } from '@syncfusion/ej2-base';\nimport { EventHandler, Property, Event, compile, L10n } from '@syncfusion/ej2-base';\nimport { Animation, Browser, prepend } from '@syncfusion/ej2-base';\nimport { Search } from '../common/incremental-search';\nimport { createElement, append, addClass, removeClass, setStyleAttribute, closest, detach, remove } from '@syncfusion/ej2-base';\nimport { getUniqueID, formatUnit, isNullOrUndefined, isUndefined } from '@syncfusion/ej2-base';\n/* tslint:disable */\nimport { DataManager, Query, Predicate } from '@syncfusion/ej2-data';\nimport { createFloatLabel, removeFloating, floatLabelFocus, floatLabelBlur } from './float-label';\n/* tslint:enable */\nvar FOCUS = 'e-input-focus';\nvar DISABLED = 'e-disabled';\nvar OVER_ALL_WRAPPER = 'e-multiselect e-input-group';\nvar ELEMENT_WRAPPER = 'e-multi-select-wrapper';\nvar ELEMENT_MOBILE_WRAPPER = 'e-mob-wrapper';\nvar HIDE_LIST = 'e-hide-listitem';\nvar DELIMITER_VIEW = 'e-delim-view';\nvar CHIP_WRAPPER = 'e-chips-collection';\nvar CHIP = 'e-chips';\nvar CHIP_CONTENT = 'e-chipcontent';\nvar CHIP_CLOSE = 'e-chips-close';\nvar CHIP_SELECTED = 'e-chip-selected';\nvar SEARCHBOX_WRAPPER = 'e-searcher';\nvar DELIMITER_VIEW_WRAPPER = 'e-delimiter';\nvar ZERO_SIZE = 'e-zero-size';\nvar REMAIN_WRAPPER = 'e-remain';\nvar CLOSEICON_CLASS = 'e-chips-close e-close-hooker';\nvar DELIMITER_WRAPPER = 'e-delim-values';\nvar POPUP_WRAPPER = 'e-ddl e-popup e-multi-select-list-wrapper';\nvar INPUT_ELEMENT = 'e-dropdownbase';\nvar RTL_CLASS = 'e-rtl';\nvar CLOSE_ICON_HIDE = 'e-close-icon-hide';\nvar MOBILE_CHIP = 'e-mob-chip';\nvar FOOTER = 'e-ddl-footer';\nvar HEADER = 'e-ddl-header';\nvar DISABLE_ICON = 'e-ddl-disable-icon';\nvar SPINNER_CLASS = 'e-ms-spinner-icon';\nvar HIDDEN_ELEMENT = 'e-multi-hidden';\nvar destroy = 'destroy';\nvar dropdownIcon = 'e-input-group-icon e-ddl-icon';\nvar iconAnimation = 'e-icon-anim';\n/**\n * The Multiselect allows the user to pick a more than one value from list of predefined values.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar MultiSelect = /** @class */ (function (_super) {\n __extends(MultiSelect, _super);\n /**\n * Constructor for creating the DropDownList widget.\n */\n function MultiSelect(option, element) {\n var _this = _super.call(this, option, element) || this;\n _this.isValidKey = false;\n _this.scrollFocusStatus = false;\n _this.keyDownStatus = false;\n return _this;\n }\n ;\n MultiSelect.prototype.enableRTL = function (state) {\n if (state) {\n this.overAllWrapper.classList.add(RTL_CLASS);\n }\n else {\n this.overAllWrapper.classList.remove(RTL_CLASS);\n }\n if (this.popupObj) {\n this.popupObj.enableRtl = state;\n this.popupObj.dataBind();\n }\n };\n MultiSelect.prototype.requiredModules = function () {\n var modules = [];\n if (this.mode === 'CheckBox') {\n this.allowCustomValue = false;\n this.hideSelectedItem = false;\n this.closePopupOnSelect = false;\n this.allowFiltering = true;\n modules.push({\n member: 'CheckBoxSelection',\n args: [this]\n });\n }\n return modules;\n };\n MultiSelect.prototype.updateHTMLAttribute = function () {\n if (Object.keys(this.htmlAttributes).length) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var htmlAttr = _a[_i];\n switch (htmlAttr) {\n case 'class':\n this.overAllWrapper.classList.add(this.htmlAttributes[htmlAttr]);\n this.popupWrapper.classList.add(this.htmlAttributes[htmlAttr]);\n break;\n case 'disabled':\n this.enable(false);\n break;\n case 'placeholder':\n this.inputElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n break;\n default:\n var defaultAttr = ['id'];\n var validateAttr = ['name', 'required', 'aria-required', 'form'];\n var containerAttr = ['title', 'role', 'style', 'class'];\n if (defaultAttr.indexOf(htmlAttr) > -1) {\n this.element.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n else if (validateAttr.indexOf(htmlAttr) > -1) {\n this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n else if (containerAttr.indexOf(htmlAttr) > -1) {\n this.overAllWrapper.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n else {\n this.inputElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n break;\n }\n }\n }\n };\n MultiSelect.prototype.updateReadonly = function (state) {\n if (state || this.mode === 'CheckBox') {\n this.inputElement.setAttribute('readonly', 'true');\n }\n else {\n this.inputElement.removeAttribute('readonly');\n }\n };\n MultiSelect.prototype.updateClearButton = function (state) {\n if (state) {\n if (this.overAllClear.parentNode) {\n this.overAllClear.style.display = '';\n }\n else {\n this.componentWrapper.appendChild(this.overAllClear);\n }\n this.componentWrapper.classList.remove(CLOSE_ICON_HIDE);\n }\n else {\n this.overAllClear.style.display = 'none';\n this.componentWrapper.classList.add(CLOSE_ICON_HIDE);\n }\n };\n MultiSelect.prototype.updateCssClass = function () {\n if (this.cssClass) {\n this.popupWrapper.classList.add(this.cssClass);\n this.overAllWrapper.classList.add(this.cssClass);\n }\n };\n MultiSelect.prototype.onPopupShown = function () {\n if (Browser.isDevice && (this.mode === 'CheckBox' && this.allowFiltering)) {\n var proxy_1 = this;\n window.onpopstate = function () {\n proxy_1.hidePopup();\n };\n history.pushState({}, '');\n }\n var eventArgs = { popup: this.popupObj, cancel: false };\n this.trigger('open', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n var animModel = { name: 'FadeIn', duration: 100 };\n this.focusAtFirstListItem();\n document.body.appendChild(this.popupObj.element);\n this.refreshPopup();\n if (this.mode === 'CheckBox') {\n addClass([this.overAllWrapper], [iconAnimation]);\n }\n this.popupObj.show(animModel);\n attributes(this.inputElement, { 'aria-expanded': 'true' });\n if (!this.isFirstClick) {\n var ulElement = this.list.querySelector('ul');\n if (ulElement) {\n this.mainList = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;\n }\n this.isFirstClick = true;\n }\n this.refreshListItems(null);\n this.notify('reOrder', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', e: this });\n };\n MultiSelect.prototype.focusAtFirstListItem = function () {\n if (this.ulElement && this.ulElement.querySelector('li.'\n + dropDownBaseClasses.li)) {\n var element = void 0;\n if (this.mode === 'CheckBox') {\n element = this.list.querySelector('li.'\n + dropDownBaseClasses.li + ':not(.'\n + HIDE_LIST + ')');\n }\n else {\n element = this.ulElement.querySelector('li.'\n + dropDownBaseClasses.li + ':not(.'\n + HIDE_LIST + ')');\n }\n if (element !== null) {\n this.removeFocus();\n this.addListFocus(element);\n }\n }\n };\n MultiSelect.prototype.focusAtLastListItem = function (data) {\n var activeElement;\n if (data) {\n activeElement = Search(data, this.liCollections, 'StartsWith', this.ignoreCase);\n }\n else {\n if (this.value && this.value.length) {\n Search(this.value[this.value.length - 1], this.liCollections, 'StartsWith', this.ignoreCase);\n }\n else {\n activeElement = null;\n }\n }\n if (activeElement && activeElement.item !== null) {\n this.addListFocus(activeElement.item);\n this.scrollBottom(activeElement.item, activeElement.index);\n }\n };\n MultiSelect.prototype.getAriaAttributes = function () {\n var ariaAttributes = {\n 'aria-disabled': 'false',\n 'aria-owns': this.element.id + '_options',\n 'role': 'listbox',\n 'aria-multiselectable': 'true',\n 'aria-activedescendant': 'null',\n 'aria-haspopup': 'true',\n 'aria-expanded': 'false'\n };\n return ariaAttributes;\n };\n MultiSelect.prototype.updateListARIA = function () {\n attributes(this.ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });\n var disableStatus = (this.inputElement.disabled) ? true : false;\n attributes(this.inputElement, this.getAriaAttributes());\n if (disableStatus) {\n attributes(this.inputElement, { 'aria-disabled': 'true' });\n }\n var li;\n li = this.list.querySelectorAll('li.' + dropDownBaseClasses.li);\n var temp = li.length;\n if (li && li.length) {\n while (temp > 0) {\n if (li[temp - 1].getAttribute('aria-selected') !== 'true') {\n li[temp - 1].setAttribute('aria-selected', 'false');\n }\n temp--;\n }\n }\n };\n MultiSelect.prototype.removelastSelection = function (e) {\n var elements;\n elements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP);\n var value = elements[elements.length - 1].getAttribute('data-value');\n if (!isNullOrUndefined(this.value)) {\n this.tempValues = this.value.slice();\n }\n this.removeValue(value, e);\n this.removeChipSelection();\n this.updateDelimeter(this.delimiterChar);\n this.makeTextBoxEmpty();\n if (this.mainList && this.listData) {\n var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;\n this.onActionComplete(list, this.mainData);\n this.refreshSelection();\n }\n //this.focusAtLastListItem(value);\n };\n MultiSelect.prototype.onActionFailure = function (e) {\n _super.prototype.onActionFailure.call(this, e);\n this.renderPopup();\n this.onPopupShown();\n };\n MultiSelect.prototype.targetElement = function () {\n this.targetInputElement = this.inputElement;\n if (this.mode === 'CheckBox') {\n this.notify('targetElement', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });\n }\n return this.targetInputElement.value;\n };\n MultiSelect.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {\n _super.prototype.onActionComplete.call(this, ulElement, list, e);\n if (this.mode === 'CheckBox' && this.showSelectAll) {\n this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });\n }\n if (!this.mainList && !this.mainData) {\n this.mainList = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;\n this.mainData = list;\n this.mainListCollection = this.liCollections;\n }\n else if (!isNullOrUndefined(this.mainData) && this.mainData.length === 0) {\n this.mainData = list;\n }\n if ((this.remoteCustomValue || list.length <= 0) && this.allowCustomValue && this.inputFocus && this.allowFiltering) {\n this.checkForCustomValue(this.tempQuery, this.fields);\n return;\n }\n if (this.value && this.value.length) {\n this.refreshSelection();\n }\n this.updateListARIA();\n this.unwireListEvents();\n this.wireListEvents();\n if (!isNullOrUndefined(this.setInitialValue)) {\n this.setInitialValue();\n }\n if (!isNullOrUndefined(this.selectAllAction)) {\n this.selectAllAction();\n }\n if (this.setDynValue) {\n this.initialValueUpdate();\n this.initialUpdate();\n this.refreshPlaceHolder();\n this.updateValueState(null, this.value, null);\n }\n this.renderPopup();\n this.refreshPopup();\n if (this.beforePopupOpen) {\n this.beforePopupOpen = false;\n this.onPopupShown();\n }\n };\n MultiSelect.prototype.refreshSelection = function () {\n var value;\n var element;\n var className = this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected;\n if (!isNullOrUndefined(this.value)) {\n for (var index = 0; !isNullOrUndefined(this.value[index]); index++) {\n value = this.value[index];\n element = this.ulElement.querySelector('li[data-value=\"' + value + '\"]');\n if (element) {\n addClass([element], className);\n if (this.hideSelectedItem && element.previousSibling\n && element.previousElementSibling.classList.contains(dropDownBaseClasses.group)\n && (!element.nextElementSibling ||\n element.nextElementSibling.classList.contains(dropDownBaseClasses.group))) {\n addClass([element.previousElementSibling], className);\n }\n if (this.hideSelectedItem && this.fields.groupBy && !element.previousElementSibling.classList.contains(HIDE_LIST)) {\n this.hideGroupItem(value);\n }\n if (this.hideSelectedItem && element.classList.contains(dropDownBaseClasses.focus)) {\n removeClass([element], dropDownBaseClasses.focus);\n var listEle = element.parentElement.querySelectorAll('.' +\n dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')');\n if (listEle.length > 0) {\n addClass([listEle[0]], dropDownBaseClasses.focus);\n }\n else {\n this.l10nUpdate();\n addClass([this.list], dropDownBaseClasses.noData);\n }\n }\n element.setAttribute('aria-selected', 'true');\n if (this.mode === 'CheckBox' && element.classList.contains('e-active')) {\n var ariaValue = element.firstElementChild.getAttribute('aria-checked');\n if (isNullOrUndefined(ariaValue) || ariaValue === 'false') {\n var args = {\n module: 'CheckBoxSelection',\n enable: this.mode === 'CheckBox',\n li: element,\n e: null\n };\n this.notify('updatelist', args);\n }\n }\n }\n }\n }\n this.checkSelectAll();\n this.checkMaxSelection();\n };\n MultiSelect.prototype.hideGroupItem = function (value) {\n var element;\n var element1;\n var className = this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected;\n element1 = element = this.ulElement.querySelector('li[data-value=\"' + value + '\"]');\n var i = 0;\n var j = 0;\n var temp = true;\n var temp1 = true;\n do {\n if (element && element.previousElementSibling\n && (!element.previousElementSibling.classList.contains(HIDE_LIST) &&\n element.previousElementSibling.classList.contains(dropDownBaseClasses.li))) {\n temp = false;\n }\n if (!temp || !element || (element.previousElementSibling\n && element.previousElementSibling.classList.contains(dropDownBaseClasses.group))) {\n i = 10;\n }\n else {\n element = element.previousElementSibling;\n }\n if (element1 && element1.nextElementSibling\n && (!element1.nextElementSibling.classList.contains(HIDE_LIST) &&\n element1.nextElementSibling.classList.contains(dropDownBaseClasses.li))) {\n temp1 = false;\n }\n if (!temp1 || !element1 || (element1.nextElementSibling\n && element1.nextElementSibling.classList.contains(dropDownBaseClasses.group))) {\n j = 10;\n }\n else {\n element1 = element1.nextElementSibling;\n }\n } while (i < 10 || j < 10);\n if (temp && temp1 && !element.previousElementSibling.classList.contains(HIDE_LIST)) {\n addClass([element.previousElementSibling], className);\n }\n else if (temp && temp1 && element.previousElementSibling.classList.contains(HIDE_LIST)) {\n removeClass([element.previousElementSibling], className);\n }\n };\n MultiSelect.prototype.checkSelectAll = function () {\n var searchCount = this.list.querySelectorAll('li.' + dropDownBaseClasses.li).length;\n var searchActiveCount = this.list.querySelectorAll('li.' + dropDownBaseClasses.selected).length;\n if ((searchCount === searchActiveCount) && (this.mode === 'CheckBox' && this.showSelectAll)) {\n this.notify('checkSelectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'check' });\n }\n if ((searchCount !== searchActiveCount) && (this.mode === 'CheckBox' && this.showSelectAll)) {\n this.notify('checkSelectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'uncheck' });\n }\n };\n MultiSelect.prototype.openClick = function (e) {\n if (!this.openOnClick && this.mode !== 'CheckBox') {\n if (this.targetElement() !== '') {\n this.showPopup();\n }\n else {\n this.hidePopup();\n }\n }\n else if (!this.openOnClick && this.mode === 'CheckBox' && !this.isPopupOpen()) {\n this.showPopup();\n }\n };\n MultiSelect.prototype.KeyUp = function (e) {\n var _this = this;\n if (this.mode === 'CheckBox' && !this.openOnClick) {\n var char = String.fromCharCode(e.keyCode);\n var isWordCharacter = char.match(/\\w/);\n if (!isNullOrUndefined(isWordCharacter)) {\n this.isValidKey = true;\n }\n }\n this.isValidKey = (this.isPopupOpen() && e.keyCode === 8) || this.isValidKey;\n if (this.isValidKey) {\n this.isValidKey = false;\n this.expandTextbox();\n this.showOverAllClear();\n switch (e.keyCode) {\n default:\n if (!this.isPopupOpen() && this.openOnClick) {\n this.showPopup();\n }\n this.openClick(e);\n if (this.checkTextLength() && !this.allowFiltering && (e.keyCode !== 8)) {\n this.focusAtFirstListItem();\n }\n else {\n var text = this.targetElement();\n this.keyCode = e.keyCode;\n if (this.allowFiltering) {\n var eventArgs_1 = {\n preventDefaultAction: false,\n text: this.targetElement(),\n updateData: function (dataSource, query, fields) {\n if (eventArgs_1.cancel) {\n return;\n }\n _this.isFiltered = true;\n _this.remoteFilterAction = true;\n _this.dataUpdater(dataSource, query, fields);\n },\n event: e,\n cancel: false\n };\n this.trigger('filtering', eventArgs_1);\n if (eventArgs_1.cancel) {\n return;\n }\n if (!this.isFiltered && !eventArgs_1.preventDefaultAction) {\n this.filterAction = true;\n this.dataUpdater(this.dataSource, null, this.fields);\n }\n }\n else if (this.allowCustomValue) {\n var query = new Query();\n query = (text !== '') ? query.where(this.fields.text, 'startswith', text, this.ignoreCase, this.ignoreAccent) : query;\n this.dataUpdater(this.mainData, query, this.fields);\n break;\n }\n else {\n var liCollections = void 0;\n liCollections = this.list.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-hide-listitem)');\n var activeElement = Search(this.targetElement(), liCollections, 'StartsWith', this.ignoreCase);\n if (activeElement && activeElement.item !== null) {\n this.addListFocus(activeElement.item);\n this.list.scrollTop =\n activeElement.item.getBoundingClientRect().height * activeElement.index;\n }\n else if (this.targetElement() !== '') {\n this.removeFocus();\n }\n else {\n this.focusAtFirstListItem();\n }\n }\n }\n }\n }\n };\n MultiSelect.prototype.getQuery = function (query) {\n var filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();\n if (this.filterAction) {\n if (this.targetElement() !== null) {\n var dataType = this.typeOfData(this.dataSource).typeof;\n if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {\n filterQuery.where('', 'startswith', this.targetElement(), this.ignoreCase, this.ignoreAccent);\n }\n else {\n var fields = this.fields;\n filterQuery.where(!isNullOrUndefined(fields.text) ? fields.text : '', 'startswith', this.targetElement(), this.ignoreCase, this.ignoreAccent);\n }\n }\n return filterQuery;\n }\n else {\n if (this.dataSource instanceof DataManager && !isNullOrUndefined(this.value) && !this.remoteFilterAction) {\n var predicate = void 0;\n var field = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;\n for (var i = 0; i < this.value.length; i++) {\n if (i === 0) {\n predicate = new Predicate(field, 'equal', this.value[i]);\n }\n else {\n predicate = predicate.or(field, 'equal', this.value[i]);\n }\n }\n return new Query().where(predicate);\n }\n else {\n return query ? query : this.query ? this.query : new Query();\n }\n }\n };\n MultiSelect.prototype.dataUpdater = function (dataSource, query, fields) {\n if (this.targetElement().trim() === '') {\n var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;\n if (this.backCommand) {\n this.remoteCustomValue = false;\n this.onActionComplete(list, this.mainData);\n if (this.value && this.value.length) {\n this.refreshSelection();\n }\n if (this.keyCode !== 8) {\n this.focusAtFirstListItem();\n }\n this.notify('reOrder', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', e: this });\n }\n }\n else {\n this.resetList(dataSource, fields, query);\n if (this.allowCustomValue) {\n if (!(dataSource instanceof DataManager)) {\n this.checkForCustomValue(query, fields);\n }\n else {\n this.remoteCustomValue = true;\n this.tempQuery = query;\n }\n }\n }\n this.refreshPopup();\n };\n MultiSelect.prototype.checkForCustomValue = function (query, fields) {\n var dataChecks = !this.getValueByText(this.inputElement.value, this.ignoreCase);\n if (this.allowCustomValue && dataChecks) {\n var value = this.inputElement.value;\n var customData = (!isNullOrUndefined(this.mainData) && this.mainData.length > 0) ?\n this.mainData[0] : this.mainData;\n if (typeof (customData) !== 'string') {\n var dataItem = {};\n setValue(fields.text, value, dataItem);\n setValue(fields.value, value, dataItem);\n var tempData = JSON.parse(JSON.stringify(this.listData));\n tempData.splice(0, 0, dataItem);\n this.resetList(tempData, fields ? fields : this.fields, query);\n }\n else {\n var tempData = [this.inputElement.value];\n this.resetList(tempData, fields ? fields : this.fields);\n }\n }\n if (this.value && this.value.length) {\n this.refreshSelection();\n }\n };\n MultiSelect.prototype.getNgDirective = function () {\n return 'EJS-MULTISELECT';\n };\n MultiSelect.prototype.wrapperClick = function (e) {\n this.setDynValue = false;\n if (this.readonly || !this.enabled) {\n return;\n }\n if (e.target === this.overAllClear) {\n e.preventDefault();\n return;\n }\n if (!this.inputFocus && this.mode !== 'CheckBox') {\n this.inputElement.focus();\n }\n if (this.mode === 'CheckBox') {\n this.focusIn();\n }\n if (e.target && e.target.classList.toString().indexOf(CHIP_CLOSE) !== -1) {\n if (this.isPopupOpen()) {\n this.refreshPopup();\n }\n return;\n }\n if (!this.isPopupOpen() && this.openOnClick) {\n this.showPopup();\n }\n else {\n this.hidePopup();\n if (this.mode === 'CheckBox') {\n this.focusIn();\n }\n }\n e.preventDefault();\n };\n MultiSelect.prototype.enable = function (state) {\n if (state) {\n this.overAllWrapper.classList.remove(DISABLED);\n this.inputElement.removeAttribute('disabled');\n attributes(this.inputElement, { 'aria-disabled': 'false' });\n }\n else {\n this.overAllWrapper.classList.add(DISABLED);\n this.inputElement.setAttribute('disabled', 'true');\n attributes(this.inputElement, { 'aria-disabled': 'true' });\n }\n if (this.enabled !== state) {\n this.enabled = state;\n }\n this.hidePopup();\n };\n MultiSelect.prototype.onBlur = function (eve) {\n var target;\n if (!isNullOrUndefined(eve)) {\n target = eve.relatedTarget;\n }\n if (this.popupObj && document.body.contains(this.popupObj.element) && this.popupObj.element.contains(target)) {\n if (this.mode !== 'CheckBox') {\n this.inputElement.focus();\n }\n return;\n }\n if (this.mode === 'CheckBox' && Browser.isIE && !isNullOrUndefined(eve)) {\n this.inputFocus = false;\n this.overAllWrapper.classList.remove(FOCUS);\n return;\n }\n if (this.scrollFocusStatus) {\n eve.preventDefault();\n this.inputElement.focus();\n this.scrollFocusStatus = false;\n return;\n }\n this.inputFocus = false;\n this.overAllWrapper.classList.remove(FOCUS);\n if (this.mode !== 'Box' && this.mode !== 'CheckBox') {\n this.refreshListItems(null);\n this.updateDelimView();\n }\n this.updateValueState(eve, this.value, this.tempValues);\n this.dispatchEvent(this.hiddenElement, 'change');\n this.overAllClear.style.display = 'none';\n if (this.isPopupOpen()) {\n this.hidePopup();\n }\n this.makeTextBoxEmpty();\n this.trigger('blur');\n this.focused = true;\n if (Browser.isDevice && this.mode !== 'Delimiter' && this.mode !== 'CheckBox') {\n this.removeChipFocus();\n }\n this.removeChipSelection();\n this.refreshInputHight();\n floatLabelBlur(this.overAllWrapper, this.componentWrapper, this.value, this.floatLabelType, this.placeholder);\n this.refreshPlaceHolder();\n };\n MultiSelect.prototype.refreshInputHight = function () {\n if (!this.value || !this.value.length) {\n this.searchWrapper.classList.remove(ZERO_SIZE);\n }\n else {\n this.searchWrapper.classList.add(ZERO_SIZE);\n }\n };\n MultiSelect.prototype.validateValues = function (newValue, oldValue) {\n return JSON.stringify(newValue.slice().sort()) !== JSON.stringify(oldValue.slice().sort());\n };\n MultiSelect.prototype.updateValueState = function (event, newVal, oldVal) {\n var newValue = newVal ? newVal : [];\n var oldValue = oldVal ? oldVal : [];\n if (this.initStatus && this.validateValues(newValue, oldValue)) {\n var eventArgs = {\n e: event,\n oldValue: oldVal,\n value: newVal,\n isInteracted: event ? true : false,\n element: this.element\n };\n this.trigger('change', eventArgs);\n }\n };\n MultiSelect.prototype.getPagingCount = function () {\n var height = this.list.classList.contains(dropDownBaseClasses.noData) ? null :\n getComputedStyle(this.getItems()[0], null).getPropertyValue('height');\n return Math.round(this.list.getBoundingClientRect().height / parseInt(height, 10));\n };\n MultiSelect.prototype.pageUpSelection = function (steps) {\n var collection = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');\n var previousItem;\n previousItem = steps >= 0 ? collection[steps + 1] : collection[0];\n this.addListFocus(previousItem);\n this.scrollBottom(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')));\n };\n ;\n MultiSelect.prototype.pageDownSelection = function (steps) {\n var list = this.getItems();\n var collection = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');\n var previousItem;\n previousItem = steps <= collection.length ? collection[steps - 1] : collection[collection.length - 1];\n this.addListFocus(previousItem);\n this.scrollBottom(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')));\n };\n MultiSelect.prototype.getItems = function () {\n if (!this.list) {\n _super.prototype.render.call(this);\n }\n return this.ulElement ? this.ulElement.querySelectorAll('.' + dropDownBaseClasses.li\n + ':not(.' + HIDE_LIST + ')') : null;\n };\n MultiSelect.prototype.focusIn = function () {\n if (this.enabled && !this.readonly) {\n this.showOverAllClear();\n this.inputFocus = true;\n if (!this.value) {\n this.tempValues = this.value;\n }\n else {\n this.tempValues = this.value.slice();\n }\n if (this.value && this.value.length) {\n if (this.mode !== 'Delimiter' && this.mode !== 'CheckBox') {\n this.chipCollectionWrapper.style.display = '';\n }\n else {\n this.showDelimWrapper();\n }\n if (this.mode !== 'CheckBox') {\n this.viewWrapper.style.display = 'none';\n }\n }\n if (this.mode !== 'CheckBox') {\n this.searchWrapper.classList.remove(ZERO_SIZE);\n }\n if (this.focused) {\n this.inputElement.focus();\n this.trigger('focus');\n this.focused = false;\n }\n if (!this.overAllWrapper.classList.contains(FOCUS)) {\n this.overAllWrapper.classList.add(FOCUS);\n }\n floatLabelFocus(this.overAllWrapper, this.componentWrapper);\n if (this.isPopupOpen()) {\n this.refreshPopup();\n }\n return true;\n }\n else {\n return false;\n }\n };\n MultiSelect.prototype.showDelimWrapper = function () {\n if (this.mode === 'CheckBox') {\n this.viewWrapper.style.display = '';\n }\n else {\n this.delimiterWrapper.style.display = '';\n }\n this.componentWrapper.classList.add(DELIMITER_VIEW_WRAPPER);\n };\n MultiSelect.prototype.hideDelimWrapper = function () {\n this.delimiterWrapper.style.display = 'none';\n this.componentWrapper.classList.remove(DELIMITER_VIEW_WRAPPER);\n };\n MultiSelect.prototype.expandTextbox = function () {\n var size = 5;\n if (this.placeholder) {\n size = size > this.inputElement.placeholder.length ? size : this.inputElement.placeholder.length;\n }\n if (this.inputElement.value.length > size) {\n this.inputElement.size = this.inputElement.value.length;\n }\n else {\n this.inputElement.size = size;\n }\n };\n MultiSelect.prototype.isPopupOpen = function () {\n return ((this.popupWrapper !== null) && (this.popupWrapper.parentElement !== null));\n };\n MultiSelect.prototype.refreshPopup = function () {\n if (this.popupObj && this.mobFilter) {\n this.popupObj.setProperties({ width: this.calcPopupWidth() });\n this.popupObj.refreshPosition(this.overAllWrapper);\n }\n };\n MultiSelect.prototype.checkTextLength = function () {\n return this.targetElement().length < 1;\n };\n MultiSelect.prototype.popupKeyActions = function (keyCode) {\n switch (keyCode) {\n case 38:\n this.hidePopup();\n if (this.mode === 'CheckBox') {\n this.inputElement.focus();\n }\n break;\n case 40:\n if (!this.isPopupOpen()) {\n this.showPopup();\n }\n break;\n }\n };\n MultiSelect.prototype.updateAriaAttribute = function () {\n var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);\n if (!isNullOrUndefined(focusedItem)) {\n this.inputElement.setAttribute('aria-activedescendant', focusedItem.id);\n }\n };\n MultiSelect.prototype.onKeyDown = function (e) {\n if (this.readonly || !this.enabled && this.mode !== 'CheckBox') {\n return;\n }\n this.keyDownStatus = true;\n if (e.keyCode > 111 && e.keyCode < 124) {\n return;\n }\n if (e.altKey) {\n this.popupKeyActions(e.keyCode);\n e.preventDefault();\n return;\n }\n else if (this.isPopupOpen()) {\n var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);\n var activeIndex = void 0;\n switch (e.keyCode) {\n case 36:\n case 35: break;\n case 33:\n e.preventDefault();\n if (focusedItem) {\n this.getIndexByValue(focusedItem.getAttribute('data-value'));\n this.pageUpSelection(activeIndex - this.getPagingCount());\n this.updateAriaAttribute();\n }\n return;\n case 34:\n e.preventDefault();\n if (focusedItem) {\n this.getIndexByValue(focusedItem.getAttribute('data-value'));\n this.pageDownSelection(activeIndex + this.getPagingCount());\n this.updateAriaAttribute();\n }\n return;\n case 38:\n e.preventDefault();\n this.moveByList(-1);\n this.updateAriaAttribute();\n break;\n case 40:\n e.preventDefault();\n this.moveByList(1);\n this.updateAriaAttribute();\n break;\n case 27:\n e.preventDefault();\n this.hidePopup();\n if (this.mode === 'CheckBox') {\n this.inputElement.focus();\n }\n return;\n case 13:\n e.preventDefault();\n if (this.mode !== 'CheckBox') {\n this.selectByKey(e);\n }\n return;\n case 32:\n if (this.mode === 'CheckBox') {\n e.preventDefault();\n this.selectByKey(e);\n }\n return;\n case 9:\n e.preventDefault();\n this.hidePopup();\n this.inputElement.focus();\n this.overAllWrapper.classList.add(FOCUS);\n }\n }\n else {\n switch (e.keyCode) {\n case 13:\n case 9:\n case 16:\n case 17:\n case 20:\n return;\n case 40:\n if (this.openOnClick) {\n this.showPopup();\n }\n break;\n case 27:\n e.preventDefault();\n this.escapeAction();\n return;\n }\n }\n if (this.checkTextLength()) {\n this.keyNavigation(e);\n }\n if (this.mode === 'CheckBox' && this.enableSelectionOrder) {\n this.checkBackCommand(e);\n }\n this.expandTextbox();\n this.refreshPopup();\n };\n MultiSelect.prototype.checkBackCommand = function (e) {\n if (e.keyCode === 8 && this.targetElement() === '') {\n this.backCommand = false;\n }\n else {\n this.backCommand = true;\n }\n };\n MultiSelect.prototype.keyNavigation = function (e) {\n if ((this.mode !== 'Delimiter' && this.mode !== 'CheckBox') && this.value && this.value.length) {\n switch (e.keyCode) {\n case 37://left arrow \n e.preventDefault();\n this.moveBy(-1, e);\n break;\n case 39://right arrow \n e.preventDefault();\n this.moveBy(1, e);\n break;\n case 8:\n this.removelastSelection(e);\n break;\n case 46://del\n this.removeSelectedChip(e);\n break;\n }\n }\n else if (e.keyCode === 8 && this.mode === 'Delimiter') {\n if (this.value && this.value.length) {\n e.preventDefault();\n var temp = this.value[this.value.length - 1];\n this.removeValue(temp, e);\n this.updateDelimeter(this.delimiterChar);\n this.focusAtLastListItem(temp);\n }\n }\n };\n MultiSelect.prototype.selectByKey = function (e) {\n this.removeChipSelection();\n this.selectListByKey(e);\n if (this.hideSelectedItem) {\n this.focusAtFirstListItem();\n }\n };\n MultiSelect.prototype.escapeAction = function () {\n var temp = this.tempValues ? this.tempValues.slice() : [];\n if (this.value && this.validateValues(this.value, temp)) {\n this.value = temp;\n this.initialValueUpdate();\n if (this.mode !== 'Delimiter' && this.mode !== 'CheckBox') {\n this.chipCollectionWrapper.style.display = '';\n }\n else {\n this.showDelimWrapper();\n }\n this.refreshPlaceHolder();\n if (this.value.length) {\n this.showOverAllClear();\n }\n else {\n this.hideOverAllClear();\n }\n }\n this.makeTextBoxEmpty();\n };\n MultiSelect.prototype.scrollBottom = function (selectedLI, activeIndex) {\n var currentOffset = this.list.getBoundingClientRect().height;\n var nextBottom = selectedLI.offsetTop + selectedLI.getBoundingClientRect().height - this.list.scrollTop;\n var nextOffset = this.list.scrollTop + nextBottom - currentOffset;\n var boxRange = (selectedLI.offsetTop + selectedLI.getBoundingClientRect().height - this.list.scrollTop);\n boxRange = this.fields.groupBy && !isUndefined(this.fixedHeaderElement) ?\n boxRange - this.fixedHeaderElement.getBoundingClientRect().height : boxRange;\n if (activeIndex === 0) {\n this.list.scrollTop = 0;\n }\n else if (nextBottom > currentOffset) {\n this.list.scrollTop = nextOffset;\n }\n else if (!(boxRange > 0 && this.list.getBoundingClientRect().height > boxRange)) {\n this.list.scrollTop = nextOffset;\n }\n };\n MultiSelect.prototype.scrollTop = function (selectedLI, activeIndex) {\n var nextOffset = selectedLI.offsetTop - this.list.scrollTop;\n var nextBottom = selectedLI.offsetTop + selectedLI.getBoundingClientRect().height - this.list.scrollTop;\n nextOffset = this.fields.groupBy && !isUndefined(this.fixedHeaderElement) ?\n nextOffset - this.fixedHeaderElement.getBoundingClientRect().height : nextOffset;\n var boxRange = (selectedLI.offsetTop + selectedLI.getBoundingClientRect().height - this.list.scrollTop);\n if (activeIndex === 0) {\n this.list.scrollTop = 0;\n }\n else if (nextOffset < 0) {\n this.list.scrollTop = this.list.scrollTop + nextOffset;\n }\n else if (!(boxRange > 0 && this.list.getBoundingClientRect().height > boxRange)) {\n this.list.scrollTop = selectedLI.offsetTop - (this.fields.groupBy && !isUndefined(this.fixedHeaderElement) ?\n this.fixedHeaderElement.getBoundingClientRect().height : 0);\n }\n };\n MultiSelect.prototype.selectListByKey = function (e) {\n var li = this.list.querySelector('li.' + dropDownBaseClasses.focus);\n var limit = this.value && this.value.length ? this.value.length : 0;\n if (li !== null) {\n if (li.classList.contains('e-active')) {\n limit = limit - 1;\n }\n if (this.isValidLI(li) && limit < this.maximumSelectionLength) {\n this.updateListSelection(li, e);\n this.addListFocus(li);\n if (this.mode === 'CheckBox') {\n this.updateDelimView();\n this.refreshInputHight();\n this.updateDelimeter(this.delimiterChar);\n }\n else {\n this.updateDelimeter(this.delimiterChar);\n }\n this.makeTextBoxEmpty();\n if (this.mode !== 'CheckBox') {\n this.refreshListItems(li.textContent);\n }\n this.refreshPopup();\n if (this.value && this.value.length) {\n this.removeListSelection();\n this.refreshSelection();\n }\n }\n if (this.closePopupOnSelect) {\n this.hidePopup();\n }\n }\n this.refreshPlaceHolder();\n };\n MultiSelect.prototype.refreshListItems = function (data) {\n if ((this.allowFiltering || this.allowCustomValue) && this.mainList && this.listData) {\n var list = void 0;\n if (this.sortOrder === 'Descending' || this.sortOrder === 'Ascending') {\n list = this.ulElement.cloneNode ? this.ulElement.cloneNode(true) : this.ulElement;\n }\n else {\n list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;\n }\n this.onActionComplete(list, this.mainData);\n this.focusAtLastListItem(data);\n if (this.value && this.value.length) {\n this.refreshSelection();\n }\n }\n };\n MultiSelect.prototype.removeSelectedChip = function (e) {\n var selectedElem = this.chipCollectionWrapper.querySelector('span.' + CHIP_SELECTED);\n var temp;\n if (selectedElem !== null) {\n if (!isNullOrUndefined(this.value)) {\n this.tempValues = this.value.slice();\n }\n temp = selectedElem.nextElementSibling;\n if (temp !== null) {\n this.removeChipSelection();\n this.addChipSelection(temp, e);\n }\n this.removeValue(selectedElem.getAttribute('data-value'), e);\n this.makeTextBoxEmpty();\n }\n if (this.closePopupOnSelect) {\n this.hidePopup();\n }\n };\n MultiSelect.prototype.moveByTop = function (state) {\n var elements = this.list.querySelectorAll('li.' + dropDownBaseClasses.li);\n var index;\n if (elements.length > 1) {\n this.removeFocus();\n index = state ? 0 : (elements.length - 1);\n this.addListFocus(elements[index]);\n this.scrollBottom(elements[index], index);\n }\n this.updateAriaAttribute();\n };\n MultiSelect.prototype.moveByList = function (position) {\n if (this.list) {\n var elements = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li\n + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');\n var selectedElem = this.list.querySelector('li.' + dropDownBaseClasses.focus);\n var temp = -1;\n if (elements.length) {\n for (var index = 0; index < elements.length; index++) {\n if (elements[index] === selectedElem) {\n temp = index;\n break;\n }\n }\n if (position > 0) {\n if (temp < (elements.length - 1)) {\n this.removeFocus();\n this.addListFocus(elements[++temp]);\n this.scrollBottom(elements[temp], temp);\n }\n }\n else {\n if (temp > 0) {\n this.removeFocus();\n this.addListFocus(elements[--temp]);\n this.scrollTop(elements[temp], temp);\n }\n }\n }\n }\n };\n MultiSelect.prototype.moveBy = function (position, e) {\n var elements;\n var selectedElem;\n var temp;\n elements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP);\n selectedElem = this.chipCollectionWrapper.querySelector('span.' + CHIP_SELECTED);\n if (selectedElem === null) {\n if (position < 0) {\n this.addChipSelection(elements[elements.length - 1], e);\n }\n }\n else {\n if (position < 0) {\n temp = selectedElem.previousElementSibling;\n if (temp !== null) {\n this.removeChipSelection();\n this.addChipSelection(temp, e);\n }\n }\n else {\n temp = selectedElem.nextElementSibling;\n this.removeChipSelection();\n if (temp !== null) {\n this.addChipSelection(temp, e);\n }\n }\n }\n };\n MultiSelect.prototype.chipClick = function (e) {\n if (this.enabled) {\n var elem = closest(e.target, '.' + CHIP);\n this.removeChipSelection();\n this.addChipSelection(elem, e);\n }\n };\n MultiSelect.prototype.removeChipSelection = function () {\n if (this.chipCollectionWrapper) {\n this.removeChipFocus();\n }\n };\n MultiSelect.prototype.addChipSelection = function (element, e) {\n addClass([element], CHIP_SELECTED);\n this.trigger('chipSelection', e);\n };\n MultiSelect.prototype.onChipRemove = function (e) {\n if (e.which === 3 || e.button === 2) {\n return;\n }\n if (this.enabled && !this.readonly) {\n var element = e.target.parentElement;\n var value = this.getFormattedValue(element.getAttribute('data-value'));\n if (this.isPopupOpen() && this.mode !== 'CheckBox') {\n this.hidePopup();\n }\n if (!this.inputFocus) {\n this.inputElement.focus();\n }\n this.removeValue(value, e);\n if (isNullOrUndefined(this.list.querySelector('li[data-value=\"' + value + '\"]')) && this.mainList && this.listData) {\n var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;\n this.onActionComplete(list, this.mainData);\n }\n this.updateDelimeter(this.delimiterChar);\n this.makeTextBoxEmpty();\n e.preventDefault();\n }\n };\n MultiSelect.prototype.makeTextBoxEmpty = function () {\n this.inputElement.value = '';\n this.refreshPlaceHolder();\n };\n MultiSelect.prototype.refreshPlaceHolder = function () {\n if (this.placeholder && this.floatLabelType === 'Never') {\n if (this.value && this.value.length) {\n this.inputElement.placeholder = '';\n }\n else {\n this.inputElement.placeholder = this.placeholder;\n }\n }\n else {\n this.setFloatLabelType();\n }\n this.expandTextbox();\n };\n MultiSelect.prototype.removeValue = function (value, eve) {\n var index = this.value.indexOf(this.getFormattedValue(value));\n var className = this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected;\n if (index !== -1) {\n var element = this.list.querySelector('li[data-value=\"' + value + '\"]');\n var eventArgs = {\n e: eve,\n item: element,\n itemData: this.getDataByValue(value),\n isInteracted: eve ? true : false,\n cancel: false\n };\n this.trigger('removing', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n this.value.splice(index, 1);\n this.setProperties({ value: [].concat([], this.value) }, true);\n if (element !== null) {\n element.setAttribute('aria-selected', 'false');\n removeClass([element], className);\n this.notify('activeList', {\n module: 'CheckBoxSelection',\n enable: this.mode === 'CheckBox', li: element,\n e: this, index: index\n });\n this.notify('updatelist', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', li: element, e: eve });\n attributes(this.inputElement, { 'aria-activedescendant': element.id });\n if ((this.value.length !== this.mainData.length) && (this.mode === 'CheckBox' && this.showSelectAll)) {\n this.notify('checkSelectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'uncheck' });\n }\n }\n if (this.hideSelectedItem && this.fields.groupBy) {\n this.hideGroupItem(value);\n }\n this.updateMainList(true, value);\n this.removeChip(value);\n this.updateChipStatus();\n var limit = this.value && this.value.length ? this.value.length : 0;\n if (limit < this.maximumSelectionLength) {\n var collection = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li + ':not(.e-active)');\n removeClass(collection, 'e-disable');\n }\n this.trigger('removed', eventArgs);\n }\n };\n MultiSelect.prototype.updateMainList = function (state, value) {\n if (this.allowFiltering) {\n var element2 = this.mainList.querySelector('li[data-value=\"' + value + '\"]');\n if (element2) {\n if (state) {\n element2.setAttribute('aria-selected', 'false');\n removeClass([element2], this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected);\n if (this.mode === 'CheckBox') {\n element2.firstElementChild.setAttribute('aria-checked', 'false');\n removeClass([element2.firstElementChild.lastElementChild], 'e-check');\n }\n }\n else {\n element2.setAttribute('aria-selected', 'true');\n addClass([element2], this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected);\n if (this.mode === 'CheckBox') {\n element2.firstElementChild.setAttribute('aria-checked', 'true');\n addClass([element2.firstElementChild.lastElementChild], 'e-check');\n }\n }\n }\n }\n };\n MultiSelect.prototype.removeChip = function (value) {\n if (this.chipCollectionWrapper) {\n var element = this.chipCollectionWrapper.querySelector('span[data-value=\"' + value + '\"]');\n if (element) {\n remove(element);\n }\n }\n };\n MultiSelect.prototype.updateChipStatus = function () {\n if (this.value.length) {\n if (!isNullOrUndefined(this.chipCollectionWrapper)) {\n (this.chipCollectionWrapper.style.display = '');\n }\n if (this.mode === 'Delimiter' || this.mode === 'CheckBox') {\n this.showDelimWrapper();\n }\n this.showOverAllClear();\n }\n else {\n if (!isNullOrUndefined(this.chipCollectionWrapper)) {\n this.chipCollectionWrapper.style.display = 'none';\n }\n if (!isNullOrUndefined(this.delimiterWrapper)) {\n (this.delimiterWrapper.style.display = 'none');\n }\n this.hideOverAllClear();\n }\n };\n MultiSelect.prototype.addValue = function (value, text, eve) {\n if (!this.value) {\n this.value = [];\n }\n this.setProperties({ value: [].concat([], this.value, [value]) }, true);\n var element = this.list.querySelector('li[data-value=\"' + value + '\"]');\n this.removeFocus();\n if (element) {\n this.addListFocus(element);\n this.addListSelection(element);\n }\n if (this.mode !== 'Delimiter' && this.mode !== 'CheckBox') {\n this.addChip(text, value, eve);\n }\n if (this.hideSelectedItem && this.fields.groupBy) {\n this.hideGroupItem(value);\n }\n this.updateChipStatus();\n this.checkMaxSelection();\n };\n MultiSelect.prototype.checkMaxSelection = function () {\n var limit = this.value && this.value.length ? this.value.length : 0;\n if (limit === this.maximumSelectionLength) {\n var collection = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li + ':not(.e-active)');\n addClass(collection, 'e-disable');\n }\n };\n MultiSelect.prototype.dispatchSelect = function (value, eve, element, isNotTrigger) {\n if (this.initStatus && !isNotTrigger) {\n var eventArgs = {\n e: eve,\n item: element,\n itemData: this.getDataByValue(value),\n isInteracted: eve ? true : false,\n cancel: false\n };\n this.trigger('select', eventArgs);\n if (eventArgs.cancel) {\n return true;\n }\n }\n return false;\n };\n MultiSelect.prototype.addChip = function (text, value, e) {\n if (this.chipCollectionWrapper) {\n var item = this.getChip(text, value, e);\n if (item.cancel) {\n return;\n }\n this.chipCollectionWrapper.appendChild(item.element);\n }\n };\n MultiSelect.prototype.removeChipFocus = function () {\n var elements;\n var closeElements;\n elements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP);\n closeElements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP_CLOSE.split(' ')[0]);\n removeClass(elements, CHIP_SELECTED);\n if (Browser.isDevice) {\n for (var index = 0; index < closeElements.length; index++) {\n closeElements[index].style.display = 'none';\n }\n }\n };\n MultiSelect.prototype.onMobileChipInteraction = function (e) {\n var chipElem = closest(e.target, '.' + CHIP);\n var chipClose = chipElem.querySelector('span.' + CHIP_CLOSE.split(' ')[0]);\n if (this.enabled && !this.readonly) {\n if (!chipElem.classList.contains(CHIP_SELECTED)) {\n this.removeChipFocus();\n chipClose.style.display = '';\n chipElem.classList.add(CHIP_SELECTED);\n }\n this.refreshPopup();\n e.preventDefault();\n }\n };\n MultiSelect.prototype.getChip = function (data, value, e) {\n var itemData = { text: value, value: value };\n var chip = createElement('span', {\n className: CHIP,\n attrs: { 'data-value': value, 'title': data }\n });\n var chipContent = createElement('span', { className: CHIP_CONTENT });\n var chipClose = createElement('span', { className: CHIP_CLOSE });\n if (this.mainData) {\n itemData = this.getDataByValue(value);\n }\n if (this.valueTemplate && !isNullOrUndefined(itemData)) {\n var compiledString = compile(this.valueTemplate);\n for (var _i = 0, _a = compiledString(itemData); _i < _a.length; _i++) {\n var item = _a[_i];\n chipContent.appendChild(item);\n }\n }\n else {\n chipContent.innerHTML = data;\n }\n chip.appendChild(chipContent);\n var eventArgs = {\n isInteracted: e ? true : false,\n itemData: itemData,\n e: e,\n setClass: function (classes) {\n addClass([chip], classes);\n },\n cancel: false\n };\n this.trigger('tagging', eventArgs);\n if (eventArgs.cancel) {\n return { cancel: true, element: chip };\n }\n if (Browser.isDevice) {\n chip.classList.add(MOBILE_CHIP);\n append([chipClose], chip);\n chipClose.style.display = 'none';\n EventHandler.add(chip, 'click', this.onMobileChipInteraction, this);\n }\n else {\n EventHandler.add(chip, 'mousedown', this.chipClick, this);\n if (this.showClearButton) {\n chip.appendChild(chipClose);\n }\n }\n EventHandler.add(chipClose, 'mousedown', this.onChipRemove, this);\n return { cancel: false, element: chip };\n };\n MultiSelect.prototype.calcPopupWidth = function () {\n var width = formatUnit(this.popupWidth);\n if (width.indexOf('%') > -1) {\n var inputWidth = (this.componentWrapper.getBoundingClientRect().width) * parseFloat(width) / 100;\n width = inputWidth.toString() + 'px';\n }\n return width;\n };\n MultiSelect.prototype.mouseIn = function () {\n if (this.enabled && !this.readonly) {\n this.showOverAllClear();\n }\n };\n MultiSelect.prototype.mouseOut = function () {\n if (!this.inputFocus) {\n this.overAllClear.style.display = 'none';\n }\n };\n MultiSelect.prototype.listOption = function (dataSource, fields) {\n var iconCss = isNullOrUndefined(fields.iconCss) ? false : true;\n var fieldProperty = fields.properties;\n this.listCurrentOptions = (fields.text !== null || fields.value !== null) ? {\n fields: fieldProperty, showIcon: iconCss, ariaAttributes: { groupItemRole: 'presentation' }\n } : { fields: { value: 'text' } };\n extend(this.listCurrentOptions, this.listCurrentOptions, fields, true);\n if (this.mode === 'CheckBox') {\n this.notify('listoption', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', dataSource: dataSource, fieldProperty: fieldProperty });\n }\n return this.listCurrentOptions;\n };\n MultiSelect.prototype.renderPopup = function () {\n var _this = this;\n if (!this.list) {\n _super.prototype.render.call(this);\n }\n if (!this.popupObj) {\n var args = { cancel: false };\n this.trigger('beforeOpen', args);\n if (args.cancel) {\n return;\n }\n document.body.appendChild(this.popupWrapper);\n var overAllHeight = parseInt(this.popupHeight, 10);\n this.popupWrapper.style.visibility = 'hidden';\n if (this.headerTemplate) {\n this.setHeaderTemplate();\n overAllHeight -= this.header.getBoundingClientRect().height;\n }\n append([this.list], this.popupWrapper);\n if (this.footerTemplate) {\n this.setFooterTemplate();\n overAllHeight -= this.footer.getBoundingClientRect().height;\n }\n if (this.mode === 'CheckBox' && this.showSelectAll) {\n this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });\n overAllHeight -= this.selectAllHeight;\n }\n else if (this.mode === 'CheckBox' && !this.showSelectAll && (!this.headerTemplate || !this.footerTemplate)) {\n this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });\n overAllHeight = parseInt(this.popupHeight, 10);\n }\n else if (this.mode === 'CheckBox' && !this.showSelectAll) {\n this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });\n overAllHeight = parseInt(this.popupHeight, 10);\n if (this.headerTemplate && this.header) {\n overAllHeight -= this.header.getBoundingClientRect().height;\n }\n if (this.footerTemplate && this.footer) {\n overAllHeight -= this.footer.getBoundingClientRect().height;\n }\n }\n if (this.mode === 'CheckBox') {\n var args_1 = {\n module: 'CheckBoxSelection',\n enable: this.mode === 'CheckBox',\n popupElement: this.popupWrapper\n };\n this.notify('searchBox', args_1);\n overAllHeight -= this.searchBoxHeight;\n addClass([this.popupWrapper], 'e-checkbox');\n }\n if (this.popupHeight !== 'auto') {\n this.list.style.maxHeight = formatUnit(overAllHeight);\n this.popupWrapper.style.maxHeight = formatUnit(this.popupHeight);\n }\n else {\n this.list.style.maxHeight = formatUnit(this.popupHeight);\n }\n this.popupObj = new Popup(this.popupWrapper, {\n width: this.calcPopupWidth(), targetType: 'relative', position: { X: 'left', Y: 'bottom' },\n relateTo: this.overAllWrapper, collision: { X: 'flip', Y: 'flip' }, offsetY: 1,\n enableRtl: this.enableRtl,\n zIndex: this.zIndex,\n close: function () {\n if (_this.popupObj.element.parentElement) {\n detach(_this.popupObj.element);\n }\n },\n open: function () {\n _this.notify('inputFocus', { module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox', value: 'focus' });\n }\n });\n this.popupObj.close();\n this.popupWrapper.style.visibility = '';\n if (this.mode === 'CheckBox' && Browser.isDevice) {\n this.notify('deviceSearchBox', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });\n }\n }\n };\n MultiSelect.prototype.setHeaderTemplate = function () {\n var compiledString;\n if (this.header) {\n this.header.remove();\n }\n this.header = document.createElement('div');\n addClass([this.header], HEADER);\n compiledString = compile(this.headerTemplate);\n var elements = compiledString({});\n for (var temp = 0; temp < elements.length; temp++) {\n this.header.appendChild(elements[temp]);\n }\n if (this.mode === 'CheckBox' && this.showSelectAll) {\n prepend([this.header], this.popupWrapper);\n }\n else {\n append([this.header], this.popupWrapper);\n }\n EventHandler.add(this.header, 'mousedown', this.onListMouseDown, this);\n };\n MultiSelect.prototype.setFooterTemplate = function () {\n var compiledString;\n if (this.footer) {\n this.footer.remove();\n }\n this.footer = document.createElement('div');\n addClass([this.footer], FOOTER);\n compiledString = compile(this.footerTemplate);\n var elements = compiledString({});\n for (var temp = 0; temp < elements.length; temp++) {\n this.footer.appendChild(elements[temp]);\n }\n append([this.footer], this.popupWrapper);\n EventHandler.add(this.footer, 'mousedown', this.onListMouseDown, this);\n };\n MultiSelect.prototype.ClearAll = function (e) {\n if (this.enabled && !this.readonly) {\n var temp = void 0;\n var tempValues = this.value ? this.value.slice() : [];\n for (temp = this.value[0]; this.value.length !== 0; temp = this.value[0]) {\n this.removeValue(temp, e);\n }\n if (this.mainList && this.listData) {\n var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;\n this.onActionComplete(list, this.mainData);\n }\n this.focusAtFirstListItem();\n this.updateDelimeter(this.delimiterChar);\n if (this.mode !== 'Box') {\n this.updateDelimView();\n }\n this.makeTextBoxEmpty();\n if (this.isPopupOpen()) {\n this.refreshPopup();\n }\n if (!this.inputFocus) {\n this.updateValueState(e, this.value, tempValues);\n if (this.mode !== 'CheckBox') {\n this.inputElement.focus();\n }\n }\n if (this.mode === 'CheckBox') {\n this.refreshPlaceHolder();\n this.refreshInputHight();\n }\n e.preventDefault();\n }\n };\n MultiSelect.prototype.windowResize = function () {\n this.refreshPopup();\n if (!this.inputFocus && this.viewWrapper && this.viewWrapper.parentElement) {\n this.updateDelimView();\n }\n };\n MultiSelect.prototype.resetValueHandler = function () {\n this.value = null;\n };\n MultiSelect.prototype.wireEvent = function () {\n EventHandler.add(this.componentWrapper, 'mousedown', this.wrapperClick, this);\n EventHandler.add(window, 'resize', this.windowResize, this);\n EventHandler.add(this.inputElement, 'focus', this.focusIn, this);\n EventHandler.add(this.inputElement, 'keydown', this.onKeyDown, this);\n EventHandler.add(this.inputElement, 'keyup', this.KeyUp, this);\n if (this.mode !== 'CheckBox') {\n EventHandler.add(this.inputElement, 'input', this.onInput, this);\n }\n EventHandler.add(this.inputElement, 'blur', this.onBlur, this);\n EventHandler.add(this.componentWrapper, 'mousemove', this.mouseIn, this);\n var formElement = closest(this.inputElement, 'form');\n if (formElement) {\n EventHandler.add(formElement, 'reset', this.resetValueHandler, this);\n }\n EventHandler.add(this.componentWrapper, 'mouseout', this.mouseOut, this);\n EventHandler.add(this.overAllClear, 'mouseup', this.ClearAll, this);\n };\n MultiSelect.prototype.onInput = function () {\n if (this.keyDownStatus) {\n this.isValidKey = true;\n }\n else {\n this.isValidKey = false;\n }\n this.keyDownStatus = false;\n };\n MultiSelect.prototype.preRender = function () {\n this.initializeData();\n _super.prototype.preRender.call(this);\n };\n MultiSelect.prototype.initializeData = function () {\n this.mainListCollection = [];\n this.beforePopupOpen = false;\n this.filterAction = false;\n this.remoteFilterAction = false;\n this.isFirstClick = false;\n this.mobFilter = true;\n this.isFiltered = false;\n this.focused = true;\n this.initial = true;\n this.backCommand = true;\n };\n MultiSelect.prototype.updateData = function (delimiterChar) {\n var data = '';\n var delim = this.mode === 'Delimiter' || this.mode === 'CheckBox';\n var text = [];\n var temp;\n var tempData = this.listData;\n this.listData = this.mainData;\n this.hiddenElement.innerHTML = '';\n if (!isNullOrUndefined(this.value)) {\n for (var index = 0; !isNullOrUndefined(this.value[index]); index++) {\n if (this.listData) {\n temp = this.getTextByValue(this.value[index]);\n }\n else {\n temp = this.value[index];\n }\n data += temp + delimiterChar + ' ';\n text.push(temp);\n this.hiddenElement.innerHTML += '
';\n }\n }\n this.text = text.toString();\n if (delim) {\n this.delimiterWrapper.innerHTML = data;\n }\n this.listData = tempData;\n };\n MultiSelect.prototype.initialValueUpdate = function () {\n if (this.list) {\n var text = void 0;\n var textField = void 0;\n var valueField = void 0;\n var element = void 0;\n var value = void 0;\n if (this.chipCollectionWrapper) {\n this.chipCollectionWrapper.innerHTML = '';\n }\n this.removeListSelection();\n if (!isNullOrUndefined(this.value)) {\n for (var index = 0; !isNullOrUndefined(this.value[index]); index++) {\n value = this.value[index];\n element = this.hideSelectedItem ? this.ulElement.querySelector('li[data-value=\"' + value + '\"]')\n : this.list.querySelector('li[data-value=\"' + value + '\"]');\n text = this.getTextByValue(value);\n if ((element && (element.getAttribute('aria-selected') !== 'true')) ||\n (element && (element.getAttribute('aria-selected') === 'true' && this.hideSelectedItem) &&\n (this.mode === 'Box' || this.mode === 'Default'))) {\n text = this.getTextByValue(value);\n this.addChip(text, value);\n this.addListSelection(element);\n }\n else if (value && this.allowCustomValue) {\n var indexItem = this.listData.length;\n var newValue = {};\n setValue(this.fields.text, value, newValue);\n setValue(this.fields.value, value, newValue);\n this.addItem(newValue, indexItem);\n text = this.getTextByValue(value);\n this.addChip(text, value);\n this.addListSelection(element);\n }\n }\n }\n if (this.mode === 'CheckBox') {\n this.updateDelimView();\n this.updateValueState(null, this.value, this.tempValues);\n this.refreshInputHight();\n this.updateDelimeter(this.delimiterChar);\n }\n else {\n this.updateDelimeter(this.delimiterChar);\n }\n if (this.mode === 'CheckBox' && this.showSelectAll && isNullOrUndefined(this.value)) {\n this.notify('checkSelectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'uncheck' });\n }\n if (!this.inputFocus) {\n if (this.mode === 'Box') {\n this.chipCollectionWrapper.style.display = '';\n }\n else if (this.mode === 'Delimiter' || this.mode === 'CheckBox') {\n this.showDelimWrapper();\n }\n }\n }\n };\n MultiSelect.prototype.isValidLI = function (li) {\n return (li && !li.classList.contains(dropDownBaseClasses.disabled) && !li.classList.contains(dropDownBaseClasses.group) &&\n li.classList.contains(dropDownBaseClasses.li));\n };\n ;\n MultiSelect.prototype.updateListSelection = function (li, e) {\n var value = this.getFormattedValue(li.getAttribute('data-value'));\n var text = this.getTextByValue(value);\n this.removeHover();\n if (!this.value || this.value.indexOf(value) === -1) {\n var argsCancel = this.dispatchSelect(value, e, li, (li.getAttribute('aria-selected') === 'true'));\n if (argsCancel) {\n return;\n }\n if ((this.allowCustomValue || this.allowFiltering) && !this.mainList.querySelector('li[data-value=\"' + value + '\"]')) {\n var temp = li.cloneNode(true);\n var data = this.getDataByValue(value);\n append([temp], this.mainList);\n this.mainData.push(this.getDataByValue(value));\n var eventArgs = {\n newData: data,\n cancel: false\n };\n this.trigger('customValueSelection', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n }\n this.remoteCustomValue = false;\n this.addValue(value, text, e);\n }\n else {\n this.removeValue(value, e);\n }\n };\n MultiSelect.prototype.removeListSelection = function () {\n var className = this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected;\n var selectedItems = this.list.querySelectorAll('.' + className);\n var temp = selectedItems.length;\n if (selectedItems && selectedItems.length) {\n removeClass(selectedItems, className);\n while (temp > 0) {\n selectedItems[temp - 1].setAttribute('aria-selected', 'false');\n temp--;\n }\n }\n if (!isNullOrUndefined(this.mainList)) {\n var selectItems = this.mainList.querySelectorAll('.' + className);\n var temp1 = selectItems.length;\n if (selectItems && selectItems.length) {\n removeClass(selectItems, className);\n while (temp1 > 0) {\n selectItems[temp1 - 1].setAttribute('aria-selected', 'false');\n if (this.mode === 'CheckBox') {\n selectItems[temp1 - 1].firstElementChild.setAttribute('aria-checked', 'false');\n removeClass([selectItems[temp1 - 1].firstElementChild.lastElementChild], 'e-check');\n }\n temp1--;\n }\n }\n }\n };\n ;\n MultiSelect.prototype.removeHover = function () {\n var hoveredItem = this.list.querySelectorAll('.' + dropDownBaseClasses.hover);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, dropDownBaseClasses.hover);\n }\n };\n ;\n MultiSelect.prototype.removeFocus = function () {\n if (this.list) {\n var hoveredItem = this.list.querySelectorAll('.' + dropDownBaseClasses.focus);\n var mainlist = this.mainList.querySelectorAll('.' + dropDownBaseClasses.focus);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, dropDownBaseClasses.focus);\n removeClass(mainlist, dropDownBaseClasses.focus);\n }\n }\n };\n ;\n MultiSelect.prototype.addListHover = function (li) {\n if (this.enabled && this.isValidLI(li)) {\n this.removeHover();\n addClass([li], dropDownBaseClasses.hover);\n }\n };\n ;\n MultiSelect.prototype.addListFocus = function (element) {\n if (this.enabled && this.isValidLI(element)) {\n this.removeFocus();\n addClass([element], dropDownBaseClasses.focus);\n }\n };\n MultiSelect.prototype.addListSelection = function (element) {\n var className = this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected;\n if (this.isValidLI(element) && !element.classList.contains(dropDownBaseClasses.hover)) {\n addClass([element], className);\n this.updateMainList(false, element.getAttribute('data-value'));\n element.setAttribute('aria-selected', 'true');\n if (this.mode === 'CheckBox') {\n var ariaCheck = element.firstElementChild.getAttribute('aria-checked');\n if (ariaCheck === 'false' || isNullOrUndefined(ariaCheck)) {\n this.notify('updatelist', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', li: element, e: this });\n }\n }\n this.notify('activeList', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', li: element, e: this });\n if (this.chipCollectionWrapper !== null) {\n this.removeChipSelection();\n }\n attributes(this.inputElement, { 'aria-activedescendant': element.id });\n }\n };\n MultiSelect.prototype.updateDelimeter = function (delimChar) {\n this.updateData(delimChar);\n };\n MultiSelect.prototype.onMouseClick = function (e) {\n this.scrollFocusStatus = false;\n var target = e.target;\n var li = closest(target, '.' + dropDownBaseClasses.li);\n if (this.isValidLI(li)) {\n var limit = this.value && this.value.length ? this.value.length : 0;\n if (li.classList.contains('e-active')) {\n limit = limit - 1;\n }\n if (limit < this.maximumSelectionLength) {\n this.updateListSelection(li, e);\n this.addListFocus(li);\n if ((this.allowCustomValue || this.allowFiltering) && this.mainList && this.listData) {\n if (this.mode !== 'CheckBox') {\n this.focusAtLastListItem(li.getAttribute('data-value'));\n }\n this.refreshSelection();\n }\n else {\n this.makeTextBoxEmpty();\n }\n }\n if (this.mode === 'CheckBox') {\n this.updateDelimView();\n this.refreshInputHight();\n this.updateDelimeter(this.delimiterChar);\n }\n else {\n this.updateDelimeter(this.delimiterChar);\n }\n this.checkSelectAll();\n this.refreshPopup();\n if (this.hideSelectedItem) {\n this.focusAtFirstListItem();\n }\n if (this.closePopupOnSelect) {\n this.hidePopup();\n }\n else {\n e.preventDefault();\n }\n this.makeTextBoxEmpty();\n }\n else {\n e.preventDefault();\n }\n if (this.mode !== 'CheckBox') {\n this.refreshListItems(isNullOrUndefined(li) ? null : li.textContent);\n }\n this.refreshPlaceHolder();\n };\n MultiSelect.prototype.onMouseOver = function (e) {\n var currentLi = closest(e.target, '.' + dropDownBaseClasses.li);\n this.addListHover(currentLi);\n };\n MultiSelect.prototype.onMouseLeave = function (e) {\n this.removeHover();\n };\n MultiSelect.prototype.onListMouseDown = function (e) {\n e.preventDefault();\n this.scrollFocusStatus = true;\n };\n MultiSelect.prototype.onDocumentClick = function (e) {\n if (this.mode !== 'CheckBox') {\n var target = e.target;\n if (!(!isNullOrUndefined(this.popupObj) && closest(target, '#' + this.popupObj.element.id)) &&\n !this.overAllWrapper.contains(e.target)) {\n this.scrollFocusStatus = false;\n }\n else {\n this.scrollFocusStatus = (Browser.isIE || Browser.info.name === 'edge') && (document.activeElement === this.inputElement);\n }\n }\n };\n MultiSelect.prototype.wireListEvents = function () {\n EventHandler.add(document, 'mousedown', this.onDocumentClick, this);\n EventHandler.add(this.list, 'mousedown', this.onListMouseDown, this);\n EventHandler.add(this.list, 'mouseup', this.onMouseClick, this);\n EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);\n };\n ;\n MultiSelect.prototype.unwireListEvents = function () {\n EventHandler.remove(document, 'mousedown', this.onDocumentClick);\n if (this.list) {\n EventHandler.remove(this.list, 'mousedown', this.onListMouseDown);\n EventHandler.remove(this.list, 'mouseup', this.onMouseClick);\n EventHandler.remove(this.list, 'mouseover', this.onMouseOver);\n EventHandler.remove(this.list, 'mouseout', this.onMouseLeave);\n }\n };\n ;\n MultiSelect.prototype.hideOverAllClear = function () {\n if (!this.value || !this.value.length || this.inputElement.value === '') {\n this.overAllClear.style.display = 'none';\n }\n };\n MultiSelect.prototype.showOverAllClear = function () {\n if ((this.value && this.value.length) || this.inputElement.value !== '') {\n this.overAllClear.style.display = '';\n }\n else {\n this.overAllClear.style.display = 'none';\n }\n };\n MultiSelect.prototype.showSpinner = function () {\n if (isNullOrUndefined(this.spinnerElement)) {\n if (this.overAllClear.style.display !== 'none') {\n this.spinnerElement = this.overAllClear;\n }\n else {\n this.spinnerElement = createElement('span', { className: CLOSEICON_CLASS + ' ' + SPINNER_CLASS });\n this.componentWrapper.appendChild(this.spinnerElement);\n }\n addClass([this.spinnerElement], DISABLE_ICON);\n createSpinner({\n target: this.spinnerElement,\n width: Browser.isDevice ? '16px' : '14px'\n });\n showSpinner(this.spinnerElement);\n }\n };\n MultiSelect.prototype.hideSpinner = function () {\n if (!isNullOrUndefined(this.spinnerElement)) {\n hideSpinner(this.spinnerElement);\n removeClass([this.spinnerElement], DISABLE_ICON);\n if (this.spinnerElement.classList.contains(SPINNER_CLASS)) {\n detach(this.spinnerElement);\n }\n else {\n this.spinnerElement.innerHTML = '';\n }\n this.spinnerElement = null;\n }\n };\n MultiSelect.prototype.updateDelimView = function () {\n if (this.delimiterWrapper) {\n this.hideDelimWrapper();\n }\n if (this.chipCollectionWrapper) {\n this.chipCollectionWrapper.style.display = 'none';\n }\n this.viewWrapper.style.display = '';\n if (this.value && this.value.length) {\n var data = '';\n var temp = void 0;\n var tempData = void 0;\n var tempIndex = 1;\n var wrapperleng = void 0;\n var remaining = void 0;\n this.viewWrapper.innerHTML = '';\n var l10nLocale = {\n noRecordsTemplate: 'No Records Found',\n actionFailureTemplate: 'The Request Failed',\n overflowCountTemplate: '+${count} more..'\n };\n var l10n = new L10n('dropdowns', l10nLocale, this.locale);\n var remainContent = l10n.getConstant('overflowCountTemplate');\n var raminElement = createElement('span', {\n className: REMAIN_WRAPPER\n });\n var compiledString = compile(remainContent);\n raminElement.appendChild(compiledString({ 'count': this.value.length })[0]);\n this.viewWrapper.appendChild(raminElement);\n var remainSize = raminElement.getBoundingClientRect().width;\n remove(raminElement);\n this.viewWrapper.innerHTML = '';\n var inputleng = this.searchWrapper.getBoundingClientRect().width;\n var overAllContainer = parseInt(window.getComputedStyle(this.componentWrapper).width, 10) -\n parseInt(window.getComputedStyle(this.componentWrapper).paddingLeft, 10) -\n parseInt(window.getComputedStyle(this.componentWrapper).paddingRight, 10);\n var remainValue = void 0;\n if (!isNullOrUndefined(this.value)) {\n for (var index = 0; !isNullOrUndefined(this.value[index]); index++) {\n data += (index === 0) ? '' : this.delimiterChar + ' ';\n if (this.mainData && this.mainData.length) {\n if (this.mode === 'CheckBox') {\n remainValue = 110;\n var newTemp = this.listData;\n this.listData = this.mainData;\n temp = this.getTextByValue(this.value[index]);\n this.listData = newTemp;\n }\n else {\n remainValue = 0;\n temp = this.getTextByValue(this.value[index]);\n }\n }\n else {\n temp = this.value[index];\n }\n data += temp;\n temp = this.viewWrapper.innerHTML;\n this.viewWrapper.innerHTML = data;\n wrapperleng = this.viewWrapper.getBoundingClientRect().width;\n if ((wrapperleng) > overAllContainer - remainValue) {\n if (tempData !== undefined) {\n temp = tempData;\n index = tempIndex + 1;\n }\n this.viewWrapper.innerHTML = temp;\n remaining = this.value.length - index;\n break;\n }\n else if ((wrapperleng + remainSize) <= overAllContainer) {\n tempData = data;\n tempIndex = index;\n }\n else if (index === 0) {\n tempData = '';\n tempIndex = -1;\n }\n }\n }\n if (remaining > 0) {\n raminElement.innerHTML = '';\n raminElement.appendChild(compiledString({ 'count': remaining })[0]);\n this.viewWrapper.appendChild(raminElement);\n }\n }\n else {\n this.viewWrapper.innerHTML = '';\n this.viewWrapper.style.display = 'none';\n }\n };\n MultiSelect.prototype.unWireEvent = function () {\n EventHandler.remove(this.componentWrapper, 'mousedown', this.wrapperClick);\n EventHandler.remove(window, 'resize', this.windowResize);\n EventHandler.remove(this.inputElement, 'focus', this.focusIn);\n EventHandler.remove(this.inputElement, 'keydown', this.onKeyDown);\n if (this.mode !== 'CheckBox') {\n EventHandler.remove(this.inputElement, 'input', this.onInput);\n }\n EventHandler.remove(this.inputElement, 'keyup', this.KeyUp);\n var formElement = closest(this.inputElement, 'form');\n if (formElement) {\n EventHandler.remove(formElement, 'reset', this.resetValueHandler);\n }\n EventHandler.remove(this.inputElement, 'blur', this.onBlur);\n EventHandler.remove(this.componentWrapper, 'mousemove', this.mouseIn);\n EventHandler.remove(this.componentWrapper, 'mouseout', this.mouseOut);\n EventHandler.remove(this.overAllClear, 'mousedown', this.ClearAll);\n };\n MultiSelect.prototype.selectAllItem = function (state) {\n var li;\n li = this.list.querySelectorAll(state ?\n 'li[aria-selected=\"false\"]:not(.e-reorder-hide)' :\n 'li[aria-selected=\"true\"]:not(.e-reorder-hide)');\n var length = li.length;\n if (li && li.length) {\n while (length > 0) {\n this.updateListSelection(li[length - 1], null);\n length--;\n }\n }\n if (this.mode !== 'Box' && !this.isPopupOpen()) {\n this.updateDelimView();\n }\n else {\n this.searchWrapper.classList.remove(ZERO_SIZE);\n }\n if (this.mode === 'CheckBox') {\n this.updateDelimView();\n this.refreshInputHight();\n this.updateDelimeter(this.delimiterChar);\n }\n else {\n this.updateDelimeter(this.delimiterChar);\n }\n this.refreshPlaceHolder();\n };\n MultiSelect.prototype.setZIndex = function () {\n if (this.popupObj) {\n this.popupObj.setProperties({ 'zIndex': this.zIndex });\n }\n };\n MultiSelect.prototype.updateDataSource = function (prop) {\n if (isNullOrUndefined(this.list)) {\n this.renderPopup();\n }\n else {\n this.resetList(this.dataSource);\n }\n if (this.value && this.value.length) {\n this.refreshSelection();\n }\n };\n MultiSelect.prototype.onLoadSelect = function () {\n this.setDynValue = true;\n this.renderPopup();\n };\n /**\n * Get the properties to be maintained in the persisted state.\n */\n MultiSelect.prototype.getPersistData = function () {\n return this.addOnPersist(['value']);\n };\n ;\n /**\n * Dynamically change the value of properties.\n * @private\n */\n MultiSelect.prototype.onPropertyChanged = function (newProp, oldProp) {\n if (newProp.dataSource && !isNullOrUndefined(Object.keys(newProp.dataSource))) {\n this.mainList = null;\n this.mainData = null;\n }\n this.setUpdateInitial(['query', 'dataSource'], newProp);\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'query':\n case 'dataSource':\n if (this.mode === 'CheckBox' && this.showSelectAll) {\n if (!isNullOrUndefined(this.popupObj)) {\n this.popupObj.destroy();\n this.popupObj = null;\n }\n this.renderPopup();\n }\n break;\n case 'htmlAttributes':\n this.updateHTMLAttribute();\n break;\n case 'showClearButton':\n this.updateClearButton(newProp.showClearButton);\n break;\n case 'value':\n if (!this.list) {\n this.onLoadSelect();\n }\n else if (!this.inputFocus) {\n this.initialValueUpdate();\n if (this.mode !== 'Box') {\n this.updateDelimView();\n }\n this.refreshInputHight();\n this.refreshPlaceHolder();\n this.updateValueState(null, this.value, oldProp.value);\n }\n break;\n case 'width':\n setStyleAttribute(this.overAllWrapper, { 'width': formatUnit(newProp.width) });\n this.popupObj.setProperties({ width: this.calcPopupWidth() });\n break;\n case 'placeholder':\n this.refreshPlaceHolder();\n break;\n case 'filterBarPlaceholder':\n this.notify('filterBarPlaceholder', { filterBarPlaceholder: newProp.filterBarPlaceholder });\n break;\n case 'delimiterChar':\n if (this.mode !== 'Box') {\n this.updateDelimView();\n }\n this.updateData(newProp.delimiterChar);\n break;\n case 'cssClass':\n this.popupWrapper.classList.remove(oldProp.cssClass);\n this.overAllWrapper.classList.remove(oldProp.cssClass);\n this.updateCssClass();\n break;\n case 'enableRtl':\n this.enableRTL(newProp.enableRtl);\n _super.prototype.onPropertyChanged.call(this, newProp, oldProp);\n break;\n case 'readonly':\n this.updateReadonly(newProp.readonly);\n this.hidePopup();\n break;\n case 'enabled':\n this.hidePopup();\n this.enable(newProp.enabled);\n break;\n case 'showSelectAll':\n if (this.popupObj) {\n this.popupObj.destroy();\n this.popupObj = null;\n }\n this.renderPopup();\n break;\n case 'showDropDownIcon':\n this.dropDownIcon();\n break;\n case 'floatLabelType':\n this.setFloatLabelType();\n break;\n case 'enableSelectionOrder':\n break;\n case 'selectAllText':\n this.notify('selectAllText', false);\n break;\n case 'popupHeight':\n case 'headerTemplate':\n case 'footerTemplate':\n if (this.popupObj) {\n this.popupObj.destroy();\n this.popupObj = null;\n }\n this.renderPopup();\n break;\n default:\n var msProps = void 0;\n msProps = this.getPropObject(prop, newProp, oldProp);\n _super.prototype.onPropertyChanged.call(this, msProps.newProperty, msProps.oldProperty);\n break;\n }\n }\n };\n /**\n * Hides the popup, if the popup in a open state.\n * @returns void\n */\n MultiSelect.prototype.hidePopup = function () {\n var delay = 100;\n if (this.isPopupOpen()) {\n var eventArgs = { popup: this.popupObj, cancel: false };\n this.trigger('close', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n var animModel = {\n name: 'FadeOut',\n duration: 100,\n delay: delay ? delay : 0\n };\n this.beforePopupOpen = false;\n this.overAllWrapper.classList.remove(iconAnimation);\n this.popupObj.hide(new Animation(animModel));\n attributes(this.inputElement, { 'aria-expanded': 'false' });\n this.notify('inputFocus', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'clear' });\n this.popupObj.hide();\n removeClass([document.body, this.popupObj.element], 'e-popup-full-page');\n }\n };\n /**\n * Shows the popup, if the popup in a closed state.\n * @returns void\n */\n MultiSelect.prototype.showPopup = function () {\n if (!this.enabled) {\n return;\n }\n if (!this.ulElement) {\n this.beforePopupOpen = true;\n _super.prototype.render.call(this);\n return;\n }\n var mainLiLength = this.ulElement.querySelectorAll('li.' + 'e-list-item').length;\n var liLength = this.ulElement.querySelectorAll('li.'\n + dropDownBaseClasses.li + '.' + HIDE_LIST).length;\n if (mainLiLength > 0 && (mainLiLength === liLength)) {\n this.beforePopupOpen = false;\n return;\n }\n this.onPopupShown();\n };\n /**\n * Based on the state parameter, entire list item will be selected/deselected.\n * parameter\n * `true` - Selects entire list items.\n * `false` - Un Selects entire list items.\n * @returns void\n */\n MultiSelect.prototype.selectAll = function (state) {\n var _this = this;\n if (isNullOrUndefined(this.list)) {\n this.selectAllAction = function () {\n if (_this.mode === 'CheckBox' && _this.showSelectAll) {\n var args = {\n module: 'CheckBoxSelection',\n enable: _this.mode === 'CheckBox',\n value: state ? 'check' : 'uncheck'\n };\n _this.notify('checkSelectAll', args);\n }\n _this.selectAllItem(state);\n _this.selectAllAction = null;\n };\n _super.prototype.render.call(this);\n }\n else {\n this.selectAllAction = null;\n if (this.mode === 'CheckBox' && this.showSelectAll) {\n var args = {\n module: 'CheckBoxSelection',\n enable: this.mode === 'CheckBox',\n value: state ? 'check' : 'uncheck'\n };\n this.notify('checkSelectAll', args);\n }\n this.selectAllItem(state);\n }\n };\n MultiSelect.prototype.getModuleName = function () {\n return 'multiselect';\n };\n ;\n /**\n * To Initialize the control rendering\n * @private\n */\n MultiSelect.prototype.render = function () {\n var _this = this;\n this.initStatus = false;\n this.setDynValue = false;\n this.searchWrapper = createElement('span', { className: SEARCHBOX_WRAPPER });\n this.viewWrapper = createElement('span', { className: DELIMITER_VIEW + ' ' + DELIMITER_WRAPPER, styles: 'display:none;' });\n var iconClass;\n this.overAllClear = createElement('span', {\n className: CLOSEICON_CLASS, styles: 'display:none;'\n });\n this.componentWrapper = createElement('div', { className: ELEMENT_WRAPPER });\n this.overAllWrapper = createElement('div', { className: OVER_ALL_WRAPPER });\n if (this.mode === 'CheckBox') {\n addClass([this.overAllWrapper], 'e-checkbox');\n }\n if (Browser.isDevice) {\n this.componentWrapper.classList.add(ELEMENT_MOBILE_WRAPPER);\n }\n this.overAllWrapper.style.width = formatUnit(this.width);\n this.overAllWrapper.appendChild(this.componentWrapper);\n this.popupWrapper = createElement('div', { id: this.element.id + '_popup', className: POPUP_WRAPPER });\n if (this.mode === 'Delimiter' || this.mode === 'CheckBox') {\n this.delimiterWrapper = createElement('span', { className: DELIMITER_WRAPPER, styles: 'display:none' });\n this.componentWrapper.appendChild(this.delimiterWrapper);\n }\n else {\n this.chipCollectionWrapper = createElement('span', {\n className: CHIP_WRAPPER,\n styles: 'display:none'\n });\n this.componentWrapper.appendChild(this.chipCollectionWrapper);\n }\n if (this.mode !== 'Box') {\n this.componentWrapper.appendChild(this.viewWrapper);\n }\n this.componentWrapper.appendChild(this.searchWrapper);\n if (this.showClearButton && !Browser.isDevice) {\n this.componentWrapper.appendChild(this.overAllClear);\n }\n else {\n this.componentWrapper.classList.add(CLOSE_ICON_HIDE);\n }\n this.dropDownIcon();\n this.inputElement = createElement('input', {\n className: INPUT_ELEMENT,\n attrs: {\n spellcheck: 'false',\n type: 'text',\n autocomplete: 'off',\n tabindex: '0'\n }\n });\n if (this.element.tagName !== this.getNgDirective()) {\n this.element.style.display = 'none';\n }\n if (this.element.tagName === this.getNgDirective()) {\n this.element.appendChild(this.overAllWrapper);\n this.searchWrapper.appendChild(this.inputElement);\n }\n else {\n this.element.parentElement.insertBefore(this.overAllWrapper, this.element);\n this.searchWrapper.appendChild(this.inputElement);\n this.searchWrapper.appendChild(this.element);\n this.element.removeAttribute('tabindex');\n }\n if (this.floatLabelType !== 'Never') {\n createFloatLabel(this.overAllWrapper, this.searchWrapper, this.element, this.inputElement, this.value, this.floatLabelType, this.placeholder);\n }\n else if (this.floatLabelType === 'Never') {\n this.refreshPlaceHolder();\n }\n this.element.style.opacity = '';\n var id = this.element.getAttribute('id') ? this.element.getAttribute('id') : getUniqueID('ej2_dropdownlist');\n this.element.id = id;\n this.hiddenElement = createElement('select', {\n attrs: { 'aria-hidden': 'true', 'class': HIDDEN_ELEMENT, 'tabindex': '-1', 'multiple': 'true' }\n });\n this.componentWrapper.appendChild(this.hiddenElement);\n this.validationAttribute(this.element, this.hiddenElement);\n if (this.mode !== 'CheckBox') {\n this.hideOverAllClear();\n }\n this.wireEvent();\n this.enable(this.enabled);\n this.enableRTL(this.enableRtl);\n if (this.value && this.value.length) {\n this.renderPopup();\n if (!(this.dataSource instanceof DataManager)) {\n this.initialValueUpdate();\n this.initialUpdate();\n }\n else {\n this.setInitialValue = function () {\n _this.initStatus = false;\n _this.initialValueUpdate();\n _this.initialUpdate();\n _this.setInitialValue = null;\n _this.initStatus = true;\n };\n }\n }\n else {\n this.initialUpdate();\n }\n this.initStatus = true;\n this.checkAutoFocus();\n };\n MultiSelect.prototype.checkAutoFocus = function () {\n if (this.element.hasAttribute('autofocus')) {\n this.focusIn();\n }\n };\n MultiSelect.prototype.setFloatLabelType = function () {\n removeFloating(this.overAllWrapper, this.componentWrapper, this.searchWrapper, this.inputElement, this.value, this.floatLabelType, this.placeholder);\n if (this.floatLabelType !== 'Never') {\n createFloatLabel(this.overAllWrapper, this.searchWrapper, this.element, this.inputElement, this.value, this.floatLabelType, this.placeholder);\n }\n };\n MultiSelect.prototype.dropDownIcon = function () {\n if (this.mode === 'CheckBox' && this.showDropDownIcon) {\n this.dropIcon = createElement('span', { className: dropdownIcon });\n this.componentWrapper.appendChild(this.dropIcon);\n addClass([this.componentWrapper], ['e-down-icon']);\n }\n else {\n if (!isNullOrUndefined(this.dropIcon)) {\n this.dropIcon.parentElement.removeChild(this.dropIcon);\n removeClass([this.componentWrapper], ['e-down-icon']);\n }\n }\n };\n MultiSelect.prototype.initialUpdate = function () {\n if (this.mode !== 'Box') {\n this.updateDelimView();\n }\n this.updateCssClass();\n this.updateHTMLAttribute();\n this.updateReadonly(this.readonly);\n this.refreshInputHight();\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.\n * @method destroy\n * @return {void}\n */\n MultiSelect.prototype.destroy = function () {\n if (this.popupObj) {\n this.popupObj.hide();\n }\n this.notify(destroy, {});\n this.unwireListEvents();\n this.unWireEvent();\n this.list = null;\n this.popupObj = null;\n this.mainList = null;\n this.mainData = null;\n _super.prototype.destroy.call(this);\n var temp = ['readonly', 'aria-disabled', 'aria-placeholder', 'placeholder'];\n var length = temp.length;\n while (length > 0) {\n this.inputElement.removeAttribute(temp[length - 1]);\n length--;\n }\n this.element.style.display = 'block';\n if (this.overAllWrapper.parentElement) {\n if (this.overAllWrapper.parentElement.tagName === this.getNgDirective()) {\n remove(this.overAllWrapper);\n }\n else {\n this.overAllWrapper.parentElement.insertBefore(this.element, this.overAllWrapper);\n remove(this.overAllWrapper);\n }\n }\n };\n ;\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"cssClass\", void 0);\n __decorate([\n Property('100%')\n ], MultiSelect.prototype, \"width\", void 0);\n __decorate([\n Property('300px')\n ], MultiSelect.prototype, \"popupHeight\", void 0);\n __decorate([\n Property('100%')\n ], MultiSelect.prototype, \"popupWidth\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"placeholder\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"filterBarPlaceholder\", void 0);\n __decorate([\n Property({})\n ], MultiSelect.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"valueTemplate\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"headerTemplate\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"footerTemplate\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"itemTemplate\", void 0);\n __decorate([\n Property(false)\n ], MultiSelect.prototype, \"allowFiltering\", void 0);\n __decorate([\n Property(false)\n ], MultiSelect.prototype, \"allowCustomValue\", void 0);\n __decorate([\n Property(true)\n ], MultiSelect.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(1000)\n ], MultiSelect.prototype, \"maximumSelectionLength\", void 0);\n __decorate([\n Property(false)\n ], MultiSelect.prototype, \"readonly\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"text\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"value\", void 0);\n __decorate([\n Property(true)\n ], MultiSelect.prototype, \"hideSelectedItem\", void 0);\n __decorate([\n Property(true)\n ], MultiSelect.prototype, \"closePopupOnSelect\", void 0);\n __decorate([\n Property('Default')\n ], MultiSelect.prototype, \"mode\", void 0);\n __decorate([\n Property(',')\n ], MultiSelect.prototype, \"delimiterChar\", void 0);\n __decorate([\n Property(true)\n ], MultiSelect.prototype, \"ignoreCase\", void 0);\n __decorate([\n Property(false)\n ], MultiSelect.prototype, \"showDropDownIcon\", void 0);\n __decorate([\n Property('Never')\n ], MultiSelect.prototype, \"floatLabelType\", void 0);\n __decorate([\n Property(false)\n ], MultiSelect.prototype, \"showSelectAll\", void 0);\n __decorate([\n Property('Select All')\n ], MultiSelect.prototype, \"selectAllText\", void 0);\n __decorate([\n Property('Unselect All')\n ], MultiSelect.prototype, \"unSelectAllText\", void 0);\n __decorate([\n Property(true)\n ], MultiSelect.prototype, \"enableSelectionOrder\", void 0);\n __decorate([\n Property(true)\n ], MultiSelect.prototype, \"openOnClick\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"removing\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"removed\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"blur\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"focus\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"chipSelection\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"filtering\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"tagging\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"customValueSelection\", void 0);\n MultiSelect = __decorate([\n NotifyPropertyChanges\n ], MultiSelect);\n return MultiSelect;\n}(DropDownBase));\nexport { MultiSelect };\n","import { createCheckBox } from '@syncfusion/ej2-buttons';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { EventHandler, select, removeClass, addClass, detach, compile, L10n } from '@syncfusion/ej2-base';\nimport { Browser, attributes, isNullOrUndefined, append, closest, createElement, prepend } from '@syncfusion/ej2-base';\nimport { dropDownBaseClasses } from '../drop-down-base/drop-down-base';\nvar ICON = 'e-icons';\nvar CHECKBOXFRAME = 'e-frame';\nvar CHECK = 'e-check';\nvar CHECKBOXWRAP = 'e-checkbox-wrapper';\nvar CHECKBOXRIPPLE = 'e-ripple-container';\nvar INDETERMINATE = 'e-stop';\nvar checkAllParent = 'e-selectall-parent';\nvar searchBackIcon = 'e-input-group-icon e-back-icon e-icons';\nvar filterBarClearIcon = 'e-input-group-icon e-clear-icon e-icons';\nvar filterInput = 'e-input-filter';\nvar filterParent = 'e-filter-parent';\nvar mobileFilter = 'e-ddl-device-filter';\nvar clearIcon = 'e-clear-icon';\nvar popupFullScreen = 'e-popup-full-page';\nvar device = 'e-ddl-device';\nvar FOCUS = 'e-input-focus';\n/**\n * The Multiselect enable CheckBoxSelection call this inject module.\n */\nvar CheckBoxSelection = /** @class */ (function () {\n function CheckBoxSelection(parent) {\n this.activeLi = [];\n this.activeEle = [];\n this.parent = parent;\n this.addEventListener();\n }\n CheckBoxSelection.prototype.getModuleName = function () {\n return 'CheckBoxSelection';\n };\n CheckBoxSelection.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on('updatelist', this.listSelection, this);\n this.parent.on('listoption', this.listOption, this);\n this.parent.on('selectAll', this.setSelectAll, this);\n this.parent.on('checkSelectAll', this.checkSelectAll, this);\n this.parent.on('searchBox', this.setSearchBox, this);\n this.parent.on('blur', this.onBlur, this);\n this.parent.on('targetElement', this.targetElement, this);\n this.parent.on('deviceSearchBox', this.setDeviceSearchBox, this);\n this.parent.on('inputFocus', this.getFocus, this);\n this.parent.on('reOrder', this.setReorder, this);\n this.parent.on('activeList', this.getActiveList, this);\n this.parent.on('selectAllText', this.setLocale, this);\n this.parent.on('filterBarPlaceholder', this.setPlaceholder, this);\n EventHandler.add(document, 'mousedown', this.onDocumentClick, this);\n };\n CheckBoxSelection.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off('updatelist', this.listSelection);\n this.parent.off('listoption', this.listOption);\n this.parent.off('selectAll', this.setSelectAll);\n this.parent.off('checkSelectAll', this.checkSelectAll);\n this.parent.off('searchBox', this.setSearchBox);\n this.parent.off('blur', this.onBlur);\n this.parent.off('targetElement', this.targetElement);\n this.parent.off('deviceSearchBox', this.setDeviceSearchBox);\n this.parent.off('inputFocus', this.getFocus);\n this.parent.off('reOrder', this.setReorder);\n this.parent.off('activeList', this.getActiveList);\n this.parent.off('selectAllText', this.setLocale);\n this.parent.off('filterBarPlaceholder', this.setPlaceholder);\n EventHandler.remove(document, 'mousedown', this.onDocumentClick);\n };\n CheckBoxSelection.prototype.listOption = function (args) {\n var _this = this;\n if (isNullOrUndefined(this.parent.listCurrentOptions.itemCreated)) {\n this.parent.listCurrentOptions.itemCreated = function (e) {\n _this.checboxCreate(e);\n };\n }\n else {\n var itemCreated_1 = this.parent.listCurrentOptions.itemCreated;\n this.parent.listCurrentOptions.itemCreated = function (e) {\n _this.checboxCreate(e);\n itemCreated_1.apply(_this, [e]);\n };\n }\n };\n ;\n CheckBoxSelection.prototype.setPlaceholder = function (props) {\n Input.setPlaceholder(props.filterBarPlaceholder, this.filterInput);\n };\n CheckBoxSelection.prototype.checboxCreate = function (e) {\n var item;\n if (!isNullOrUndefined(e.item)) {\n item = e.item;\n }\n else {\n item = e;\n }\n if (item.className !== 'e-list-group-item ' && item.className !== 'e-list-group-item') {\n var checkboxEle = createCheckBox(true);\n var icon = select('div.' + ICON, item);\n var id = item.getAttribute('data-uid');\n item.insertBefore(checkboxEle, item.childNodes[isNullOrUndefined(icon) ? 0 : 1]);\n select('.' + CHECKBOXFRAME, checkboxEle);\n var frame = select('.' + CHECKBOXFRAME, checkboxEle);\n return item;\n }\n else {\n return item;\n }\n };\n CheckBoxSelection.prototype.setSelectAll = function () {\n if (this.parent.showSelectAll) {\n if (isNullOrUndefined(this.checkAllParent)) {\n this.checkAllParent = createElement('div', {\n className: checkAllParent\n });\n this.selectAllSpan = createElement('span', {\n className: 'e-all-text'\n });\n this.selectAllSpan.textContent = '';\n this.checkAllParent.appendChild(this.selectAllSpan);\n this.setLocale();\n this.checboxCreate(this.checkAllParent);\n if (this.parent.headerTemplate) {\n if (!isNullOrUndefined(this.filterParent)) {\n append([this.checkAllParent], this.filterParent);\n }\n else {\n append([this.checkAllParent], this.parent.popupWrapper);\n }\n }\n if (!this.parent.headerTemplate) {\n if (!isNullOrUndefined(this.filterParent)) {\n append([this.checkAllParent], this.filterParent);\n }\n else {\n prepend([this.checkAllParent], this.parent.popupWrapper);\n }\n }\n EventHandler.add(this.checkAllParent, 'mousedown', this.clickHandler, this);\n }\n if (this.parent.list.classList.contains('e-nodata')) {\n this.checkAllParent.style.display = 'none';\n }\n else {\n this.checkAllParent.style.display = 'block';\n }\n this.parent.selectAllHeight = this.checkAllParent.getBoundingClientRect().height;\n }\n else if (!isNullOrUndefined(this.checkAllParent)) {\n this.checkAllParent.parentElement.removeChild(this.checkAllParent);\n this.checkAllParent = null;\n }\n };\n CheckBoxSelection.prototype.destroy = function () {\n this.removeEventListener();\n };\n CheckBoxSelection.prototype.listSelection = function (args) {\n var target;\n if (!isNullOrUndefined(args.e)) {\n target = !isNullOrUndefined(args.e.target) ?\n args.e.target.classList.contains('e-frame') ?\n args.e.target : args.li.querySelector('.e-checkbox-wrapper').childNodes[1]\n : args.li.querySelector('.e-checkbox-wrapper').childNodes[1];\n }\n else {\n target = args.li.lastElementChild.childNodes[1];\n }\n if (this.parent.itemTemplate) {\n target = args.li.firstElementChild.childNodes[1];\n }\n this.checkWrapper = closest(target, '.' + CHECKBOXWRAP);\n if (!isNullOrUndefined(this.checkWrapper)) {\n var checkElement = select('.' + CHECKBOXFRAME, this.checkWrapper);\n var selectAll = false;\n this.validateCheckNode(this.checkWrapper, checkElement.classList.contains(CHECK), args.li, args.e, selectAll);\n }\n };\n CheckBoxSelection.prototype.validateCheckNode = function (checkWrap, isCheck, li, e, selectAll) {\n this.changeState(checkWrap, isCheck ? 'uncheck' : 'check', e, true, selectAll);\n };\n CheckBoxSelection.prototype.clickHandler = function (e) {\n var target;\n if (e.currentTarget.classList.contains(this.checkAllParent.className)) {\n target = e.currentTarget.firstElementChild.lastElementChild;\n }\n else {\n target = e.currentTarget;\n }\n this.checkWrapper = closest(target, '.' + CHECKBOXWRAP);\n var selectAll = true;\n if (!isNullOrUndefined(this.checkWrapper)) {\n var checkElement = select('.' + CHECKBOXFRAME, this.checkWrapper);\n this.validateCheckNode(this.checkWrapper, checkElement.classList.contains(CHECK), null, e, selectAll);\n }\n e.preventDefault();\n };\n CheckBoxSelection.prototype.changeState = function (wrapper, state, e, isPrevent, selectAll) {\n var ariaState;\n var frameSpan = wrapper.getElementsByClassName(CHECKBOXFRAME)[0];\n if (state === 'check' && !frameSpan.classList.contains(CHECK)) {\n frameSpan.classList.remove(INDETERMINATE);\n frameSpan.classList.add(CHECK);\n ariaState = 'true';\n if (selectAll) {\n this.parent.selectAll(true);\n this.setLocale(true);\n }\n }\n else if (state === 'uncheck' && (frameSpan.classList.contains(CHECK) || frameSpan.classList.contains(INDETERMINATE))) {\n removeClass([frameSpan], [CHECK, INDETERMINATE]);\n ariaState = 'false';\n if (selectAll) {\n this.parent.selectAll(false);\n this.setLocale();\n }\n }\n ariaState = state === 'check' ? 'true' : state === 'uncheck' ? 'false' : ariaState;\n if (!isNullOrUndefined(ariaState)) {\n wrapper.setAttribute('aria-checked', ariaState);\n }\n };\n CheckBoxSelection.prototype.setSearchBox = function (args) {\n if (isNullOrUndefined(this.filterParent)) {\n this.filterParent = createElement('span', {\n className: filterParent\n });\n this.filterInput = createElement('input', {\n attrs: { type: 'text' },\n className: filterInput\n });\n this.parent.element.parentNode.insertBefore(this.filterInput, this.parent.element);\n var backIcon = false;\n if (Browser.isDevice) {\n backIcon = true;\n this.parent.mobFilter = false;\n }\n this.filterInputObj = Input.createInput({\n element: this.filterInput,\n buttons: backIcon ? [searchBackIcon, filterBarClearIcon] : [filterBarClearIcon],\n properties: { placeholder: this.parent.filterBarPlaceholder }\n });\n append([this.filterInputObj.container], this.filterParent);\n prepend([this.filterParent], args.popupElement);\n attributes(this.filterInput, {\n 'aria-disabled': 'false',\n 'aria-owns': this.parent.element.id + '_options',\n 'role': 'listbox',\n 'aria-activedescendant': null,\n 'autocomplete': 'off',\n 'autocorrect': 'off',\n 'autocapitalize': 'off',\n 'spellcheck': 'false'\n });\n this.clearIconElement = this.filterInput.parentElement.querySelector('.' + clearIcon);\n if (!Browser.isDevice && this.clearIconElement) {\n EventHandler.add(this.clearIconElement, 'mousedown', this.clearText, this);\n this.clearIconElement.style.visibility = 'hidden';\n }\n EventHandler.add(this.filterInput, 'input', this.parent.onInput, this.parent);\n EventHandler.add(this.filterInput, 'keyup', this.parent.KeyUp, this.parent);\n EventHandler.add(this.filterInput, 'keydown', this.parent.onKeyDown, this.parent);\n EventHandler.add(this.filterInput, 'blur', this.onBlur, this);\n this.parent.searchBoxHeight = (this.filterInputObj.container.parentElement).getBoundingClientRect().height;\n return this.filterInputObj;\n }\n };\n ;\n CheckBoxSelection.prototype.clickOnBackIcon = function (e) {\n this.parent.hidePopup();\n removeClass([document.body, this.parent.popupObj.element], popupFullScreen);\n };\n CheckBoxSelection.prototype.clearText = function (e) {\n this.parent.targetInputElement.value = '';\n this.parent.refreshPopup();\n this.parent.refreshListItems(null);\n this.clearIconElement.style.visibility = 'hidden';\n this.filterInput.focus();\n this.setReorder(e);\n e.preventDefault();\n };\n CheckBoxSelection.prototype.setDeviceSearchBox = function () {\n this.parent.popupObj.element.classList.add(device);\n this.parent.popupObj.element.classList.add(mobileFilter);\n this.parent.popupObj.position = { X: 0, Y: 0 };\n this.parent.popupObj.dataBind();\n attributes(this.parent.popupObj.element, { style: 'left:0px;right:0px;top:0px;bottom:0px;' });\n addClass([document.body, this.parent.popupObj.element], popupFullScreen);\n this.setSearchBoxPosition();\n this.backIconElement = this.filterInputObj.container.querySelector('.e-back-icon');\n this.clearIconElement = this.filterInputObj.container.querySelector('.' + clearIcon);\n this.clearIconElement.style.visibility = 'hidden';\n EventHandler.add(this.backIconElement, 'click', this.clickOnBackIcon, this);\n EventHandler.add(this.clearIconElement, 'click', this.clearText, this);\n };\n CheckBoxSelection.prototype.setSearchBoxPosition = function () {\n var searchBoxHeight = this.filterInput.parentElement.getBoundingClientRect().height;\n this.parent.popupObj.element.style.maxHeight = '100%';\n this.parent.popupObj.element.style.width = '100%';\n this.parent.list.style.maxHeight = (window.innerHeight - searchBoxHeight) + 'px';\n this.parent.list.style.height = (window.innerHeight - searchBoxHeight) + 'px';\n var clearElement = this.filterInput.parentElement.querySelector('.' + clearIcon);\n detach(this.filterInput);\n clearElement.parentElement.insertBefore(this.filterInput, clearElement);\n };\n CheckBoxSelection.prototype.targetElement = function () {\n this.parent.targetInputElement = this.filterInput;\n this.clearIconElement.style.visibility = this.parent.targetInputElement.value === '' ? 'hidden' : 'visible';\n return this.parent.targetInputElement.value;\n };\n CheckBoxSelection.prototype.onBlur = function (e) {\n var target;\n if (Browser.isIE) {\n target = !isNullOrUndefined(e) && e.target;\n }\n if (!Browser.isIE) {\n target = !isNullOrUndefined(e) && e.relatedTarget;\n }\n if (document.body.contains(this.parent.popupObj.element) && this.parent.popupObj.element.contains(target) && !Browser.isIE) {\n this.filterInput.focus();\n return;\n }\n if (this.parent.scrollFocusStatus) {\n e.preventDefault();\n this.filterInput.focus();\n this.parent.scrollFocusStatus = false;\n return;\n }\n if (document.body.contains(this.parent.popupObj.element) && !this.parent.popupObj.element.classList.contains('e-popup-close')) {\n this.parent.inputFocus = false;\n this.parent.updateValueState(e, this.parent.value, this.parent.tempValues);\n this.parent.dispatchEvent(this.parent.hiddenElement, 'change');\n }\n if (document.body.contains(this.parent.popupObj.element) &&\n !this.parent.popupObj.element.classList.contains('e-popup-close')) {\n this.parent.inputFocus = false;\n this.parent.overAllWrapper.classList.remove(FOCUS);\n this.parent.trigger('blur');\n this.parent.focused = true;\n }\n if (document.body.contains(this.parent.popupObj.element) &&\n !this.parent.popupObj.element.classList.contains('e-popup-close') && !Browser.isDevice) {\n this.parent.hidePopup();\n }\n };\n CheckBoxSelection.prototype.onDocumentClick = function (e) {\n var target = e.target;\n if (!isNullOrUndefined(this.parent.popupObj) && closest(target, '#' + this.parent.popupObj.element.id)) {\n e.preventDefault();\n }\n if (!(!isNullOrUndefined(this.parent.popupObj) && closest(target, '#' + this.parent.popupObj.element.id)) &&\n !this.parent.overAllWrapper.contains(e.target)) {\n if (this.parent.overAllWrapper.classList.contains(dropDownBaseClasses.focus) || this.parent.isPopupOpen()) {\n this.parent.inputFocus = false;\n this.parent.hidePopup();\n this.parent.onBlur();\n this.parent.focused = true;\n }\n }\n else {\n this.parent.scrollFocusStatus = (Browser.isIE || Browser.info.name === 'edge') && (document.activeElement === this.filterInput);\n }\n if (!this.parent.overAllWrapper.contains(e.target) && this.parent.overAllWrapper.classList.contains('e-input-focus') &&\n !this.parent.isPopupOpen()) {\n this.parent.onBlur(e);\n }\n };\n CheckBoxSelection.prototype.getFocus = function (e) {\n this.parent.overAllWrapper.classList.remove(FOCUS);\n if (e.value === 'focus') {\n this.filterInput.focus();\n }\n if (e.value === 'clear') {\n this.filterInput.value = '';\n this.clearIconElement.style.visibility = 'hidden';\n }\n };\n CheckBoxSelection.prototype.checkSelectAll = function (e) {\n if (e.value === 'check' && this.checkAllParent.getAttribute('aria-checked') !== 'true') {\n this.changeState(this.checkAllParent, e.value, null, null, false);\n this.setLocale(true);\n }\n if (e.value === 'uncheck') {\n this.changeState(this.checkAllParent, e.value, null, null, false);\n this.setLocale();\n }\n };\n CheckBoxSelection.prototype.setLocale = function (unSelect) {\n if (this.parent.selectAllText !== 'Select All' || this.parent.unSelectAllText !== 'Unselect All') {\n var template = unSelect ? this.parent.unSelectAllText : this.parent.selectAllText;\n var compiledString = void 0;\n this.selectAllSpan.textContent = '';\n compiledString = compile(template);\n for (var _i = 0, _a = compiledString({}); _i < _a.length; _i++) {\n var item = _a[_i];\n this.selectAllSpan.textContent = item.textContent;\n }\n }\n else {\n var l10nLocale = { selectAllText: 'Select All', unSelectAllText: 'Unselect All' };\n var l10n = new L10n('dropdowns', l10nLocale, this.parent.locale);\n this.selectAllSpan.textContent = unSelect ? l10n.getConstant('unSelectAllText') : l10n.getConstant('selectAllText');\n }\n };\n CheckBoxSelection.prototype.getActiveList = function (args) {\n if (args.li.classList.contains('e-active')) {\n this.activeLi.push(args.li.cloneNode(true));\n }\n else {\n this.activeLi.splice(args.index, 1);\n }\n };\n CheckBoxSelection.prototype.setReorder = function (args) {\n if (this.parent.enableSelectionOrder && !isNullOrUndefined(this.parent.value)) {\n var activeLiCount = this.parent.ulElement.querySelectorAll('li.e-active').length;\n var remLi = void 0;\n var ulEle = createElement('ul', {\n className: 'e-list-parent e-ul e-reorder'\n });\n var removeEle = createElement('div');\n if (activeLiCount > 0) {\n append(this.parent.ulElement.querySelectorAll('li.e-active'), ulEle);\n remLi = this.parent.ulElement.querySelectorAll('li.e-active');\n addClass(remLi, 'e-reorder-hide');\n prepend([ulEle], this.parent.list);\n }\n this.parent.focusAtFirstListItem();\n }\n };\n return CheckBoxSelection;\n}());\nexport { CheckBoxSelection };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * @private\n */\nvar Dictionary = /** @class */ (function () {\n function Dictionary() {\n this.keysInternal = [];\n this.valuesInternal = [];\n this.item = [];\n }\n Object.defineProperty(Dictionary.prototype, \"length\", {\n /**\n * @private\n */\n get: function () {\n return this.keysInternal.length;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Dictionary.prototype, \"keys\", {\n /**\n * @private\n */\n get: function () {\n return this.getItem();\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @private\n */\n Dictionary.prototype.getItem = function () {\n this.item = [];\n for (var i = 0; i < this.keysInternal.length; i++) {\n this.item.push(this.keysInternal[i]);\n }\n return this.item;\n };\n /**\n * @private\n */\n Dictionary.prototype.add = function (key, value) {\n if (isNullOrUndefined(key)) {\n throw new ReferenceError('Provided key or value is not valid.');\n }\n var index = this.keysInternal.indexOf(key);\n // if (index < 0 || index > this.keysInternal.length - 1) {\n if (index < 0) {\n this.keysInternal.push(key);\n this.valuesInternal.push(value);\n }\n return 1;\n // else {\n // throw new RangeError('An item with the same key has already been added.');\n // }\n };\n /**\n * @private\n */\n Dictionary.prototype.get = function (key) {\n if (isNullOrUndefined(key)) {\n throw new ReferenceError('Provided key is not valid.');\n }\n var index = this.keysInternal.indexOf(key);\n if (index < 0 || index > this.keysInternal.length - 1) {\n throw new RangeError('No item with the specified key has been added.');\n }\n else {\n return this.valuesInternal[index];\n }\n };\n /**\n * @private\n */\n Dictionary.prototype.set = function (key, value) {\n if (isNullOrUndefined(key)) {\n throw new ReferenceError('Provided key is not valid.');\n }\n var index = this.keysInternal.indexOf(key);\n if (index < 0 || index > this.keysInternal.length - 1) {\n throw new RangeError('No item with the specified key has been added.');\n }\n else {\n this.valuesInternal[index] = value;\n }\n };\n /**\n * @private\n */\n Dictionary.prototype.remove = function (key) {\n if (isNullOrUndefined(key)) {\n throw new ReferenceError('Provided key is not valid.');\n }\n var index = this.keysInternal.indexOf(key);\n if (index < 0 || index > this.keysInternal.length - 1) {\n throw new RangeError('No item with the specified key has been added.');\n }\n else {\n this.keysInternal.splice(index, 1);\n this.valuesInternal.splice(index, 1);\n return true;\n }\n };\n /**\n * @private\n */\n Dictionary.prototype.containsKey = function (key) {\n if (isNullOrUndefined(key)) {\n throw new ReferenceError('Provided key is not valid.');\n }\n var index = this.keysInternal.indexOf(key);\n if (index < 0 || index > this.keysInternal.length - 1) {\n return false;\n }\n return true;\n };\n /**\n * @private\n */\n Dictionary.prototype.clear = function () {\n this.keysInternal = [];\n this.valuesInternal = [];\n };\n /**\n * @private\n */\n Dictionary.prototype.destroy = function () {\n this.clear();\n this.keysInternal = undefined;\n this.valuesInternal = undefined;\n };\n return Dictionary;\n}());\nexport { Dictionary };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Dictionary } from './dictionary';\n/**\n * @private\n */\nvar WUniqueFormat = /** @class */ (function () {\n function WUniqueFormat(type) {\n this.referenceCount = 0;\n this.uniqueFormatType = type;\n this.propertiesHash = new Dictionary();\n }\n /**\n * @private\n */\n WUniqueFormat.prototype.isEqual = function (source, property, modifiedValue) {\n var isEqual = false;\n switch (this.uniqueFormatType) {\n case 1:\n isEqual = this.isBorderEqual(source, property, modifiedValue);\n break;\n case 2:\n isEqual = this.isCharacterFormatEqual(source, property, modifiedValue);\n break;\n case 3:\n isEqual = this.isParagraphFormatEqual(source, property, modifiedValue);\n break;\n case 4:\n isEqual = this.isCellFormatEqual(source, property, modifiedValue);\n break;\n case 5:\n isEqual = this.isShadingEqual(source, property, modifiedValue);\n break;\n case 6:\n isEqual = this.isRowFormatEqual(source, property, modifiedValue);\n break;\n case 7:\n isEqual = this.isListFormatEqual(source, property, modifiedValue);\n break;\n case 8:\n isEqual = this.isTableFormatEqual(source, property, modifiedValue);\n break;\n case 9:\n isEqual = this.isListLevelEqual(source, property, modifiedValue);\n break;\n case 10:\n isEqual = this.isSectionFormatEqual(source, property, modifiedValue);\n break;\n default:\n break;\n }\n return isEqual;\n };\n // tslint:disable-next-line:max-line-length\n WUniqueFormat.prototype.isNotEqual = function (property, source, modifiedProperty, modifiedValue, uniqueFormatType) {\n var targetValue = undefined;\n var propertyType = WUniqueFormat.getPropertyType(uniqueFormatType, property);\n if (this.propertiesHash.containsKey(propertyType)) {\n targetValue = this.propertiesHash.get(propertyType);\n }\n var sourceValue = undefined;\n if (property === modifiedProperty) {\n sourceValue = modifiedValue;\n }\n else if (source.containsKey(propertyType)) {\n sourceValue = source.get(propertyType);\n }\n // tslint:disable-next-line:max-line-length\n if (!(targetValue === sourceValue || (!isNullOrUndefined(targetValue) && !isNullOrUndefined(sourceValue) && targetValue === sourceValue))) {\n return true;\n }\n return false;\n };\n /**\n * @private\n */\n WUniqueFormat.getPropertyType = function (uniqueFormatType, property) {\n var type = 0;\n switch (uniqueFormatType) {\n case 1:\n type = this.getBorderPropertyType(property);\n break;\n case 2:\n type = this.getCharacterFormatPropertyType(property);\n break;\n case 3:\n type = this.getParaFormatPropertyType(property);\n break;\n case 4:\n type = this.getCellFormatPropertyType(property);\n break;\n case 5:\n type = this.getShadingPropertyType(property);\n break;\n case 6:\n type = this.getRowFormatType(property);\n break;\n case 7:\n type = this.getListFormatType(property);\n break;\n case 8:\n type = this.getTableFormatType(property);\n break;\n case 9:\n type = this.getListLevelType(property);\n break;\n case 10:\n type = this.getSectionFormatType(property);\n break;\n default:\n break;\n }\n return type;\n };\n WUniqueFormat.getRowFormatType = function (property) {\n if (property === 'allowBreakAcrossPages') {\n return 1;\n }\n if (property === 'isHeader') {\n return 2;\n }\n if (property === 'height') {\n return 3;\n }\n if (property === 'heightType') {\n return 4;\n }\n if (property === 'gridBefore') {\n return 5;\n }\n if (property === 'gridBeforeWidth') {\n return 6;\n }\n if (property === 'gridBeforeWidthType') {\n return 7;\n }\n if (property === 'gridAfter') {\n return 8;\n }\n if (property === 'gridAfterWidth') {\n return 9;\n }\n if (property === 'gridAfterWidthType') {\n return 10;\n }\n return 0;\n };\n WUniqueFormat.getListFormatType = function (property) {\n if (property === 'listId') {\n return 1;\n }\n if (property === 'listLevelNumber') {\n return 2;\n }\n return 0;\n };\n WUniqueFormat.getTableFormatType = function (property) {\n if (property === 'leftMargin') {\n return 1;\n }\n if (property === 'rightMargin') {\n return 2;\n }\n if (property === 'topMargin') {\n return 3;\n }\n if (property === 'bottomMargin') {\n return 4;\n }\n if (property === 'cellSpacing') {\n return 5;\n }\n if (property === 'leftIndent') {\n return 6;\n }\n if (property === 'tableAlignment') {\n return 7;\n }\n if (property === 'preferredWidth') {\n return 8;\n }\n if (property === 'preferredWidthType') {\n return 9;\n }\n return 0;\n };\n WUniqueFormat.getListLevelType = function (property) {\n if (property === 'listLevelPattern') {\n return 1;\n }\n if (property === 'startAt') {\n return 2;\n }\n if (property === 'followCharacter') {\n return 3;\n }\n if (property === 'numberFormat') {\n return 4;\n }\n if (property === 'restartLevel') {\n return 5;\n }\n return 0;\n };\n WUniqueFormat.getShadingPropertyType = function (property) {\n if (property === 'backgroundColor') {\n return 1;\n }\n if (property === 'foregroundColor') {\n return 2;\n }\n if (property === 'textureStyle') {\n return 3;\n }\n return 0;\n };\n WUniqueFormat.getCellFormatPropertyType = function (property) {\n if (property === 'leftMargin') {\n return 1;\n }\n if (property === 'rightMargin') {\n return 2;\n }\n if (property === 'topMargin') {\n return 3;\n }\n if (property === 'bottomMargin') {\n return 4;\n }\n if (property === 'columnSpan') {\n return 5;\n }\n if (property === 'rowSpan') {\n return 6;\n }\n if (property === 'verticalAlignment') {\n return 7;\n }\n if (property === 'preferredWidthType') {\n return 8;\n }\n if (property === 'preferredWidth') {\n return 9;\n }\n if (property === 'cellWidth') {\n return 10;\n }\n return 0;\n };\n WUniqueFormat.getBorderPropertyType = function (property) {\n if (property === 'color') {\n return 1;\n }\n if (property === 'lineStyle') {\n return 2;\n }\n if (property === 'lineWidth') {\n return 3;\n }\n if (property === 'shadow') {\n return 4;\n }\n if (property === 'space') {\n return 5;\n }\n if (property === 'hasNoneStyle') {\n return 6;\n }\n return 0;\n };\n WUniqueFormat.getCharacterFormatPropertyType = function (property) {\n if (property === 'fontColor') {\n return 1;\n }\n if (property === 'fontFamily') {\n return 2;\n }\n if (property === 'fontSize') {\n return 3;\n }\n if (property === 'bold') {\n return 4;\n }\n if (property === 'italic') {\n return 5;\n }\n if (property === 'underline') {\n return 6;\n }\n if (property === 'strikethrough') {\n return 7;\n }\n if (property === 'baselineAlignment') {\n return 8;\n }\n if (property === 'highlightColor') {\n return 9;\n }\n return 0;\n };\n WUniqueFormat.getParaFormatPropertyType = function (property) {\n if (property === 'leftIndent') {\n return 1;\n }\n if (property === 'rightIndent') {\n return 2;\n }\n if (property === 'firstLineIndent') {\n return 3;\n }\n if (property === 'textAlignment') {\n return 4;\n }\n if (property === 'beforeSpacing') {\n return 5;\n }\n if (property === 'afterSpacing') {\n return 6;\n }\n if (property === 'lineSpacing') {\n return 7;\n }\n if (property === 'lineSpacingType') {\n return 8;\n }\n if (property === 'outlineLevel') {\n return 9;\n }\n return 0;\n };\n WUniqueFormat.getSectionFormatType = function (property) {\n if (property === 'headerDistance') {\n return 1;\n }\n if (property === 'footerDistance') {\n return 2;\n }\n if (property === 'differentFirstPage') {\n return 3;\n }\n if (property === 'differentOddAndEvenPages') {\n return 4;\n }\n if (property === 'pageWidth') {\n return 5;\n }\n if (property === 'pageHeight') {\n return 6;\n }\n if (property === 'leftMargin') {\n return 7;\n }\n if (property === 'topMargin') {\n return 8;\n }\n if (property === 'rightMargin') {\n return 9;\n }\n if (property === 'bottomMargin') {\n return 10;\n }\n return 0;\n };\n /**\n * @private\n */\n WUniqueFormat.prototype.isBorderEqual = function (source, modifiedProperty, modifiedValue) {\n if (this.isNotEqual('color', source, modifiedProperty, modifiedValue, 1)) {\n return false;\n }\n if (this.isNotEqual('lineStyle', source, modifiedProperty, modifiedValue, 1)) {\n return false;\n }\n if (this.isNotEqual('lineWidth', source, modifiedProperty, modifiedValue, 1)) {\n return false;\n }\n if (this.isNotEqual('shadow', source, modifiedProperty, modifiedValue, 1)) {\n return false;\n }\n if (this.isNotEqual('space', source, modifiedProperty, modifiedValue, 1)) {\n return false;\n }\n if (this.isNotEqual('hasNoneStyle', source, modifiedProperty, modifiedValue, 1)) {\n return false;\n }\n return true;\n };\n /**\n * @private\n */\n WUniqueFormat.prototype.isCharacterFormatEqual = function (source, modifiedProperty, modifiedValue) {\n if (this.isNotEqual('fontColor', source, modifiedProperty, modifiedValue, 2)) {\n return false;\n }\n if (this.isNotEqual('fontFamily', source, modifiedProperty, modifiedValue, 2)) {\n return false;\n }\n if (this.isNotEqual('fontSize', source, modifiedProperty, modifiedValue, 2)) {\n return false;\n }\n if (this.isNotEqual('bold', source, modifiedProperty, modifiedValue, 2)) {\n return false;\n }\n if (this.isNotEqual('italic', source, modifiedProperty, modifiedValue, 2)) {\n return false;\n }\n if (this.isNotEqual('underline', source, modifiedProperty, modifiedValue, 2)) {\n return false;\n }\n if (this.isNotEqual('strikethrough', source, modifiedProperty, modifiedValue, 2)) {\n return false;\n }\n if (this.isNotEqual('baselineAlignment', source, modifiedProperty, modifiedValue, 2)) {\n return false;\n }\n if (this.isNotEqual('highlightColor', source, modifiedProperty, modifiedValue, 2)) {\n return false;\n }\n return true;\n };\n WUniqueFormat.prototype.isParagraphFormatEqual = function (source, modifiedProperty, modifiedValue) {\n if (this.isNotEqual('leftIndent', source, modifiedProperty, modifiedValue, 3)) {\n return false;\n }\n if (this.isNotEqual('rightIndent', source, modifiedProperty, modifiedValue, 3)) {\n return false;\n }\n if (this.isNotEqual('firstLineIndent', source, modifiedProperty, modifiedValue, 3)) {\n return false;\n }\n if (this.isNotEqual('textAlignment', source, modifiedProperty, modifiedValue, 3)) {\n return false;\n }\n if (this.isNotEqual('beforeSpacing', source, modifiedProperty, modifiedValue, 3)) {\n return false;\n }\n if (this.isNotEqual('afterSpacing', source, modifiedProperty, modifiedValue, 3)) {\n return false;\n }\n if (this.isNotEqual('lineSpacing', source, modifiedProperty, modifiedValue, 3)) {\n return false;\n }\n if (this.isNotEqual('lineSpacingType', source, modifiedProperty, modifiedValue, 3)) {\n return false;\n }\n if (this.isNotEqual('outlineLevel', source, modifiedProperty, modifiedValue, 3)) {\n return false;\n }\n return true;\n };\n /**\n * @private\n */\n WUniqueFormat.prototype.isCellFormatEqual = function (source, modifiedProperty, modifiedValue) {\n if (this.isNotEqual('leftMargin', source, modifiedProperty, modifiedValue, 4)) {\n return false;\n }\n if (this.isNotEqual('rightMargin', source, modifiedProperty, modifiedValue, 4)) {\n return false;\n }\n if (this.isNotEqual('topMargin', source, modifiedProperty, modifiedValue, 4)) {\n return false;\n }\n if (this.isNotEqual('bottomMargin', source, modifiedProperty, modifiedValue, 4)) {\n return false;\n }\n if (this.isNotEqual('columnSpan', source, modifiedProperty, modifiedValue, 4)) {\n return false;\n }\n if (this.isNotEqual('rowSpan', source, modifiedProperty, modifiedValue, 4)) {\n return false;\n }\n if (this.isNotEqual('verticalAlignment', source, modifiedProperty, modifiedValue, 4)) {\n return false;\n }\n if (this.isNotEqual('preferredWidthType', source, modifiedProperty, modifiedValue, 4)) {\n return false;\n }\n if (this.isNotEqual('preferredWidth', source, modifiedProperty, modifiedValue, 4)) {\n return false;\n }\n if (this.isNotEqual('cellWidth', source, modifiedProperty, modifiedValue, 4)) {\n return false;\n }\n return true;\n };\n /**\n * @private\n */\n WUniqueFormat.prototype.isShadingEqual = function (source, modifiedProperty, modifiedValue) {\n if (this.isNotEqual('backgroundColor', source, modifiedProperty, modifiedValue, 5)) {\n return false;\n }\n if (this.isNotEqual('foregroundColor', source, modifiedProperty, modifiedValue, 5)) {\n return false;\n }\n if (this.isNotEqual('textureStyle', source, modifiedProperty, modifiedValue, 5)) {\n return false;\n }\n return true;\n };\n /**\n * @private\n */\n WUniqueFormat.prototype.isRowFormatEqual = function (source, modifiedProperty, modifiedValue) {\n if (this.isNotEqual('allowBreakAcrossPages', source, modifiedProperty, modifiedValue, 6)) {\n return false;\n }\n if (this.isNotEqual('isHeader', source, modifiedProperty, modifiedValue, 6)) {\n return false;\n }\n if (this.isNotEqual('height', source, modifiedProperty, modifiedValue, 6)) {\n return false;\n }\n if (this.isNotEqual('heightType', source, modifiedProperty, modifiedValue, 6)) {\n return false;\n }\n if (this.isNotEqual('gridBefore', source, modifiedProperty, modifiedValue, 6)) {\n return false;\n }\n if (this.isNotEqual('gridBeforeWidth', source, modifiedProperty, modifiedValue, 6)) {\n return false;\n }\n if (this.isNotEqual('gridBeforeWidthType', source, modifiedProperty, modifiedValue, 6)) {\n return false;\n }\n if (this.isNotEqual('gridAfter', source, modifiedProperty, modifiedValue, 6)) {\n return false;\n }\n if (this.isNotEqual('gridAfterWidth', source, modifiedProperty, modifiedValue, 6)) {\n return false;\n }\n if (this.isNotEqual('gridAfterWidthType', source, modifiedProperty, modifiedValue, 6)) {\n return false;\n }\n return true;\n };\n /**\n * @private\n */\n WUniqueFormat.prototype.isListFormatEqual = function (source, modifiedProperty, modifiedValue) {\n if (this.isNotEqual('listId', source, modifiedProperty, modifiedValue, 7)) {\n return false;\n }\n if (this.isNotEqual('listLevelNumber', source, modifiedProperty, modifiedValue, 7)) {\n return false;\n }\n return true;\n };\n /**\n * @private\n */\n WUniqueFormat.prototype.isTableFormatEqual = function (source, modifiedProperty, modifiedValue) {\n if (this.isNotEqual('leftMargin', source, modifiedProperty, modifiedValue, 8)) {\n return false;\n }\n if (this.isNotEqual('rightMargin', source, modifiedProperty, modifiedValue, 8)) {\n return false;\n }\n if (this.isNotEqual('topMargin', source, modifiedProperty, modifiedValue, 8)) {\n return false;\n }\n if (this.isNotEqual('bottomMargin', source, modifiedProperty, modifiedValue, 8)) {\n return false;\n }\n if (this.isNotEqual('cellSpacing', source, modifiedProperty, modifiedValue, 8)) {\n return false;\n }\n if (this.isNotEqual('leftIndent', source, modifiedProperty, modifiedValue, 8)) {\n return false;\n }\n if (this.isNotEqual('tableAlignment', source, modifiedProperty, modifiedValue, 8)) {\n return false;\n }\n if (this.isNotEqual('preferredWidth', source, modifiedProperty, modifiedValue, 8)) {\n return false;\n }\n if (this.isNotEqual('preferredWidthType', source, modifiedProperty, modifiedValue, 8)) {\n return false;\n }\n return true;\n };\n /**\n * @private\n */\n WUniqueFormat.prototype.isListLevelEqual = function (source, modifiedProperty, modifiedValue) {\n if (this.isNotEqual('listLevelPattern', source, modifiedProperty, modifiedValue, 9)) {\n return false;\n }\n if (this.isNotEqual('startAt', source, modifiedProperty, modifiedValue, 9)) {\n return false;\n }\n if (this.isNotEqual('followCharacter', source, modifiedProperty, modifiedValue, 9)) {\n return false;\n }\n if (this.isNotEqual('numberFormat', source, modifiedProperty, modifiedValue, 9)) {\n return false;\n }\n if (this.isNotEqual('restartLevel', source, modifiedProperty, modifiedValue, 9)) {\n return false;\n }\n return true;\n };\n /**\n * @private\n */\n WUniqueFormat.prototype.isSectionFormatEqual = function (source, modifiedProperty, modifiedValue) {\n if (this.isNotEqual('headerDistance', source, modifiedProperty, modifiedValue, 10)) {\n return false;\n }\n if (this.isNotEqual('footerDistance', source, modifiedProperty, modifiedValue, 10)) {\n return false;\n }\n if (this.isNotEqual('differentFirstPage', source, modifiedProperty, modifiedValue, 10)) {\n return false;\n }\n if (this.isNotEqual('differentOddAndEvenPages', source, modifiedProperty, modifiedValue, 10)) {\n return false;\n }\n if (this.isNotEqual('pageWidth', source, modifiedProperty, modifiedValue, 10)) {\n return false;\n }\n if (this.isNotEqual('pageHeight', source, modifiedProperty, modifiedValue, 10)) {\n return false;\n }\n if (this.isNotEqual('leftMargin', source, modifiedProperty, modifiedValue, 10)) {\n return false;\n }\n if (this.isNotEqual('topMargin', source, modifiedProperty, modifiedValue, 10)) {\n return false;\n }\n if (this.isNotEqual('rightMargin', source, modifiedProperty, modifiedValue, 10)) {\n return false;\n }\n if (this.isNotEqual('bottomMargin', source, modifiedProperty, modifiedValue, 10)) {\n return false;\n }\n return true;\n };\n /**\n * @private\n */\n WUniqueFormat.prototype.cloneItems = function (format, property, value, uniqueFormatType) {\n var propertyType = WUniqueFormat.getPropertyType(uniqueFormatType, property);\n var keys = format.propertiesHash.getItem();\n for (var i = 0; i < keys.length; i++) {\n if (keys[i] === propertyType) {\n this.propertiesHash.add(propertyType, value);\n }\n else {\n this.propertiesHash.add(keys[i], format.propertiesHash.get(keys[i]));\n }\n }\n if (!format.propertiesHash.containsKey(propertyType)) {\n this.propertiesHash.add(propertyType, value);\n }\n };\n /**\n * @private\n */\n WUniqueFormat.prototype.mergeProperties = function (format) {\n var hash = format.cloneProperties();\n var keys = this.propertiesHash.keys;\n for (var i = 0; i < keys.length; i++) {\n if (!hash.containsKey(keys[i])) {\n hash.add(keys[i], this.propertiesHash.get(keys[i]));\n }\n }\n return hash;\n };\n /**\n * @private\n */\n WUniqueFormat.prototype.cloneProperties = function () {\n var hash = new Dictionary();\n var keys = this.propertiesHash.keys;\n for (var i = 0; i < keys.length; i++) {\n hash.add(keys[i], this.propertiesHash.get(keys[i]));\n }\n return hash;\n };\n // public cloneItemsInternal(format: WUniqueFormat): void {\n // let keys: number[] = format.propertiesHash.getItem();\n // for (let i: number = 0; i < keys.length; i++) {\n // this.propertiesHash.add(keys[i], format.propertiesHash.get(keys[i]));\n // }\n // this.referenceCount = format.referenceCount;\n // }\n /**\n * @private\n */\n WUniqueFormat.prototype.destroy = function () {\n if (!isNullOrUndefined(this.propertiesHash)) {\n this.propertiesHash.destroy();\n }\n this.propertiesHash = undefined;\n this.referenceCount = undefined;\n this.uniqueFormatType = undefined;\n };\n return WUniqueFormat;\n}());\nexport { WUniqueFormat };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { WUniqueFormat } from './unique-format';\n/**\n * @private\n */\nvar WUniqueFormats = /** @class */ (function () {\n function WUniqueFormats() {\n this.items = [];\n }\n /**\n * @private\n */\n WUniqueFormats.prototype.addUniqueFormat = function (format, type) {\n var matchedFormat = undefined;\n for (var i = 0; i < this.items.length; i++) {\n if (this.items[i].isEqual(format, undefined, undefined)) {\n matchedFormat = this.items[i];\n break;\n }\n }\n if (isNullOrUndefined(matchedFormat)) {\n matchedFormat = new WUniqueFormat(type);\n matchedFormat.propertiesHash = format;\n matchedFormat.referenceCount = 1;\n this.items.push(matchedFormat);\n }\n else {\n matchedFormat.referenceCount++;\n }\n return matchedFormat;\n };\n /**\n * @private\n */\n WUniqueFormats.prototype.updateUniqueFormat = function (uniqueFormat, property, value) {\n var matchedFormat = undefined;\n for (var i = 0; i < this.items.length; i++) {\n if (this.items[i].isEqual(uniqueFormat.propertiesHash, property, value)) {\n matchedFormat = this.items[i];\n break;\n }\n }\n if (isNullOrUndefined(matchedFormat)) {\n matchedFormat = new WUniqueFormat(uniqueFormat.uniqueFormatType);\n matchedFormat.cloneItems(uniqueFormat, property, value, uniqueFormat.uniqueFormatType);\n matchedFormat.referenceCount = 1;\n this.items.push(matchedFormat);\n }\n else {\n matchedFormat.referenceCount++;\n }\n this.remove(uniqueFormat);\n uniqueFormat = undefined;\n return matchedFormat;\n };\n /**\n * @private\n */\n WUniqueFormats.prototype.remove = function (uniqueFormat) {\n uniqueFormat.referenceCount--;\n if (uniqueFormat.referenceCount <= 0) {\n this.items.splice(this.items.indexOf(uniqueFormat), 1);\n uniqueFormat.destroy();\n uniqueFormat = undefined;\n }\n };\n /**\n * @private\n */\n WUniqueFormats.prototype.clear = function () {\n if (isNullOrUndefined(this.items)) {\n for (var i = 0; i < this.items.length; i++) {\n this.items[i].destroy();\n }\n }\n this.items = [];\n };\n /**\n * @private\n */\n WUniqueFormats.prototype.destroy = function () {\n this.clear();\n this.items = undefined;\n };\n return WUniqueFormats;\n}());\nexport { WUniqueFormats };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, Property, NotifyPropertyChanges, Event } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, L10n, setCulture, Browser } from '@syncfusion/ej2-base';\nimport { Save } from '@syncfusion/ej2-file-utils';\nimport { LayoutViewer, PageLayoutViewer, BulletsAndNumberingDialog } from './index';\nimport { Print } from './index';\nimport { BodyWidget, ParagraphWidget } from './index';\nimport { WSectionFormat, WParagraphFormat, WCharacterFormat } from './index';\nimport { SfdtReader } from './index';\nimport { Selection } from './index';\nimport { Editor, EditorHistory } from './index';\nimport { WStyles } from './index';\nimport { Search } from './index';\nimport { OptionsPane } from './index';\nimport { WordExport } from './index';\nimport { TextExport } from './index';\nimport { ContextMenu } from './index';\nimport { ImageResizer } from './index';\nimport { SfdtExport } from './index';\nimport { HyperlinkDialog, TableDialog, BookmarkDialog, StylesDialog, TableOfContentsDialog } from './index';\nimport { PageSetupDialog, ParagraphDialog, ListDialog, StyleDialog, FontDialog } from './index';\nimport { TablePropertiesDialog, BordersAndShadingDialog, CellOptionsDialog, TableOptionsDialog } from './index';\n/**\n * The Document editor component is used to draft, save or print rich text contents as page by page.\n */\nvar DocumentEditor = /** @class */ (function (_super) {\n __extends(DocumentEditor, _super);\n /**\n * Initialize the constructor of DocumentEditor\n */\n function DocumentEditor(options, element) {\n var _this = _super.call(this, options, element) || this;\n //Internal Variable\n _this.enableHeaderFooterIn = false;\n /**\n * @private\n */\n _this.isShiftingEnabled = false;\n /**\n * @private\n */\n _this.isLayoutEnabled = true;\n /**\n * @private\n */\n _this.isPastingContent = false;\n /**\n * @private\n */\n _this.parser = undefined;\n _this.disableHistoryIn = false;\n /**\n * @private\n */\n _this.findResultsList = undefined;\n /**\n * Gets or sets the name of the document.\n */\n _this.documentName = '';\n /**\n * @private\n */\n _this.tablePropertiesDialogModule = undefined;\n /**\n * @private\n */\n _this.bordersAndShadingDialogModule = undefined;\n /**\n * @private\n */\n _this.cellOptionsDialogModule = undefined;\n /**\n * @private\n */\n _this.tableOptionsDialogModule = undefined;\n /**\n * @private\n */\n _this.paragraphDialogModule = undefined;\n /**\n * @private\n */\n _this.imageResizerModule = undefined;\n /**\n * Gets or Sets a value indicating whether holding Ctrl key is required to follow hyperlink on click. The default value is true.\n */\n _this.useCtrlClickToFollowHyperlink = true;\n /**\n * Gets or sets the page outline color.\n */\n _this.pageOutline = '#000000';\n /**\n * Gets or sets a value indicating whether to enable cursor in document editor on read only state or not. The default value is false.\n */\n _this.enableCursorOnReadOnly = false;\n /**\n * Gets or sets a value indicating whether local paste needs to be enabled or not.\n */\n _this.enableLocalPaste = false;\n /**\n * @private\n */\n _this.defaultLocale = {\n 'Table': 'Table',\n 'Row': 'Row',\n 'Cell': 'Cell',\n 'Ok': 'Ok',\n 'Cancel': 'Cancel',\n 'Size': 'Size',\n 'Preferred Width': 'Preferred width',\n 'Point': 'Points',\n 'Percent': 'Percent',\n 'Measure in': 'Measure in',\n 'Alignment': 'Alignment',\n 'Left': 'Left',\n 'Center': 'Center',\n 'Right': 'Right',\n 'Justify': 'Justify',\n 'Indent from Left': 'Indent from left',\n 'Borders and Shading': 'Borders and Shading',\n 'Options': 'Options',\n 'Specify height': 'Specify height',\n 'At least': 'At least',\n 'Exactly': 'Exactly',\n 'Row height is': 'Row height is',\n 'Allow row to break across pages': 'Allow row to break across pages',\n 'Repeat as header row at the top of each page': 'Repeat as header row at the top of each page',\n 'Vertical alignment': 'Vertical alignment',\n 'Top': 'Top',\n 'Bottom': 'Bottom',\n 'Default Cell Margins': 'Default cell margins',\n 'Default Cell Spacing': 'Default cell spacing',\n 'Allow Spacing Between Cells': 'Allow spacing between cells',\n 'Cell Margins': 'Cell margins',\n 'Same as the whole table': 'Same as the whole table',\n 'Borders': 'Borders',\n 'None': 'None',\n 'Single': 'Single',\n 'Dot': 'Dot',\n 'DashSmallGap': 'DashSmallGap',\n 'DashLargeGap': 'DashLargeGap',\n 'DashDot': 'DashDot',\n 'DashDotDot': 'DashDotDot',\n 'Double': 'Double',\n 'Triple': 'Triple',\n 'ThinThickSmallGap': 'ThinThickSmallGap',\n 'ThickThinSmallGap': 'ThickThinSmallGap',\n 'ThinThickThinSmallGap': 'ThinThickThinSmallGap',\n 'ThinThickMediumGap': 'ThinThickMediumGap',\n 'ThickThinMediumGap': 'ThickThinMediumGap',\n 'ThinThickThinMediumGap': 'ThinThickThinMediumGap',\n 'ThinThickLargeGap': 'ThinThickLargeGap',\n 'ThickThinLargeGap': 'ThickThinLargeGap',\n 'ThinThickThinLargeGap': 'ThinThickThinLargeGap',\n 'SingleWavy': 'SingleWavy',\n 'DoubleWavy': 'DoubleWavy',\n 'DashDotStroked': 'DashDotStroked',\n 'Emboss3D': 'Emboss3D',\n 'Engrave3D': 'Engrave3D',\n 'Outset': 'Outset',\n 'Inset': 'Inset',\n 'Thick': 'Thick',\n 'Style': 'Style',\n 'Width': 'Width',\n 'Height': 'Height',\n 'Letter': 'Letter',\n 'Tabloid': 'Tabloid',\n 'Legal': 'Legal',\n 'Statement': 'Statement',\n 'Executive': 'Executive',\n 'A3': 'A3',\n 'A4': 'A4',\n 'A5': 'A5',\n 'B4': 'B4',\n 'B5': 'B5',\n 'Custom Size': 'Custom size',\n 'Different odd and even': 'Different odd and even',\n 'Different first page': 'Different first page',\n 'From edge': 'From edge',\n 'Header': 'Header',\n 'Footer': 'Footer',\n 'Margin': 'Margins',\n 'Paper': 'Paper',\n 'Layout': 'Layout',\n 'Orientation': 'Orientation',\n 'Landscape': 'Landscape',\n 'Portrait': 'Portrait',\n 'Table Of Contents': 'Table Of Contents',\n 'Show page numbers': 'Show page numbers',\n 'Right align page numbers': 'Right align page numbers',\n '(none)': '(none)',\n 'Nothing': 'Nothing',\n '....................': '....................',\n '-------------------': '-------------------',\n '____________': '____________',\n 'Tab leader:': 'Tab leader:',\n 'Show levels:': 'Show levels:',\n 'Use hyperlinks instead of page numbers': 'Use hyperlinks instead of page numbers',\n 'Build table of contents from:': 'Build table of contents from:',\n 'Styles': 'Styles',\n 'Available Styles:': 'Available styles',\n 'TOC level:': 'TOC level:',\n 'Heading 1': 'Heading 1',\n 'Heading 2': 'Heading 2',\n 'Heading 3': 'Heading 3',\n 'Heading 4': 'Heading 4',\n 'Heading 5': 'Heading 5',\n 'Heading 6': 'Heading 6',\n 'Heading 7': 'Heading 7',\n 'Heading 8': 'Heading 8',\n 'Heading 9': 'Heading 9',\n 'List Paragraph': 'List Paragraph',\n 'Normal': 'Normal',\n 'Outline levels': 'Outline levels',\n 'Table entry fields': 'Table entry fields',\n 'Styles:': 'Styles:',\n 'Modify': 'Modify',\n 'Color': 'Color',\n 'Setting': 'Setting',\n 'Box': 'Box',\n 'All': 'All',\n 'Custom': 'Custom',\n 'Preview': 'Preview',\n 'Shading': 'Shading',\n 'Fill': 'Fill',\n 'Apply To': 'Apply to',\n 'Table Properties': 'Table Properties',\n 'Cell Options': 'Cell Options',\n 'Table Options': 'Table Options',\n 'Insert Table': 'Insert Table',\n 'Column Size': 'Number of columns',\n 'Row Size': 'Number of rows',\n 'Text to display': 'Text to display',\n 'Address': 'Address',\n 'Insert Hyperlink': 'Insert Hyperlink',\n 'Edit Hyperlink': 'Edit Hyperlink',\n 'Insert': 'Insert',\n 'General': 'General',\n 'Indentation': 'Indentation',\n 'Before Text': 'Before text',\n 'Special': 'Special',\n 'First Line': 'First line',\n 'Hanging': 'Hanging',\n 'After Text': 'After text',\n 'By': 'By',\n 'Before': 'Before',\n 'Line Spacing': 'Line spacing',\n 'After': 'After',\n 'At': 'At',\n 'Multiple': 'Multiple',\n 'Spacing': 'Spacing',\n 'List': 'Define new Multilevel list',\n 'List Level': 'List level',\n 'Choose Level to Modify': 'Choose level to modify',\n 'Level 1': 'Level 1',\n 'Level 2': 'Level 2',\n 'Level 3': 'Level 3',\n 'Level 4': 'Level 4',\n 'Level 5': 'Level 5',\n 'Level 6': 'Level 6',\n 'Level 7': 'Level 7',\n 'Level 8': 'Level 8',\n 'Level 9': 'Level 9',\n 'Number Format': 'Number format',\n 'Number Style for this level': 'Number style for this level',\n 'Formatting for number': 'Enter formatting for number',\n 'Start at': 'Start at',\n 'Restart by': 'Restart list after',\n 'Indents': 'Position',\n 'Text indent at': 'Text indent at',\n 'Aligned at': 'Aligned at',\n 'Follow number with': 'Follow number with',\n 'Tab': 'Tab character',\n 'Space': 'Space',\n 'Arabic': 'Arabic',\n 'UpRoman': 'UpRoman',\n 'LowRoman': 'LowRoman',\n 'UpLetter': 'UpLetter',\n 'LowLetter': 'LowLetter',\n 'Number': 'Number',\n 'Leading zero': 'Leading zero',\n 'Bullet': 'Bullet',\n 'Ordinal': 'Ordinal',\n 'Ordinal Text': 'Ordinal Text',\n 'For East': 'For East',\n 'No Restart': 'No Restart',\n 'Font': 'Font',\n 'Font Style': 'Font style',\n 'Underline': 'Underline style',\n 'Font Color': 'Font color',\n 'Effects': 'Effects',\n 'Strikethrough': 'Strikethrough',\n 'Superscript': 'Superscript',\n 'Subscript': 'Subscript',\n 'Double Strikethrough': 'Double strikethrough',\n 'Regular': 'Regular',\n 'Bold': 'Bold',\n 'Italic': 'Italic',\n 'BoldItalic': 'BoldItalic',\n 'Cut': 'Cut',\n 'Copy': 'Copy',\n 'Paste': 'Paste',\n 'Hyperlink': 'Hyperlink',\n 'Open Hyperlink': 'Open Hyperlink',\n 'Copy Hyperlink': 'Copy Hyperlink',\n 'Edit Hyperlink...': 'Edit Hyperlink...',\n 'Remove Hyperlink': 'Remove Hyperlink',\n 'Paragraph': 'Paragraph',\n 'Merge Cells': 'Merge Cells',\n 'Insert Above': 'Insert Above',\n 'Insert Below': 'Insert Below',\n 'Insert Left': 'Insert Left',\n 'Insert Right': 'Insert Right',\n 'Delete': 'Delete',\n 'Delete Table': 'Delete Table',\n 'Delete Row': 'Delete Row',\n 'Delete Column': 'Delete Column',\n 'File Name': 'File Name',\n 'Format Type': 'Format Type',\n 'Save': 'Save',\n 'Navigation': 'Navigation',\n 'Results': 'Results',\n 'Replace': 'Replace',\n 'Replace All': 'Replace All',\n 'We replaced all ': 'We replaced all ',\n 'Find': 'Find',\n 'No matches': 'No matches',\n 'All Done!': 'All Done!',\n 'Result ': 'Result ',\n ' of ': ' of ',\n ' instances of \"': ' instances of \"',\n '\" with \"': '\" with \"',\n 'Click to follow link': 'Click to follow link',\n 'Continue Numbering': 'Continue Numbering',\n 'Bookmark name:': 'Bookmark name:',\n 'Close': 'Close',\n 'Restart At': 'Restart At 1',\n 'Properties': 'Properties',\n 'Name': 'Name',\n 'Style type': 'Style type',\n 'Style based on': 'Style based on',\n 'Style for following paragraph': 'Style for following paragraph',\n 'Formatting': 'Formatting',\n 'Numbering and Bullets': 'Numbering and Bullets',\n 'Numbering': 'Numbering',\n 'Update Field': 'Update Field',\n 'Edit Field': 'Edit Field',\n 'Bookmark': 'Bookmark',\n 'Page Setup': 'Page Setup',\n 'No bookmarks found': 'No bookmarks found',\n 'listInfo': 'Single-level number format: [PREFIX]%[LEVELNUMBER][SUFFIX]'\n + 'For example, \"Chapter %1.\" will display numbering likeChapter 1. ItemChapter 2. Item…'\n + 'Chapter N. Item'\n + 'Multilevel number format:[PREFIX]%[LEVELNUMBER][SUFFIX]+[PREFIX]%[LEVELNUMBER][SUFFIX]'\n + 'For example, \"%1.%2.\" will display numbering like1.1. Item1.2. Item…1.N. Item',\n 'Format': 'Format',\n 'Font..': 'Font..',\n 'Paragraph..': 'Paragraph..',\n 'Numbering..': 'Numbering..',\n 'Create New Style': 'Create New Style',\n 'Modify Style': 'Modify Style',\n 'New': 'New',\n 'Bullets': 'Bullets',\n 'Use bookmarks': 'Use bookmarks',\n 'Table of Contents': 'Table of Contents'\n };\n _this.viewer = new PageLayoutViewer(_this);\n _this.parser = new SfdtReader(_this.viewer);\n return _this;\n }\n DocumentEditor_1 = DocumentEditor;\n Object.defineProperty(DocumentEditor.prototype, \"enableHeaderAndFooter\", {\n /**\n * @private\n */\n get: function () {\n return this.enableHeaderFooterIn;\n },\n set: function (value) {\n this.enableHeaderFooterIn = value;\n this.viewer.updateScrollBars();\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DocumentEditor.prototype, \"pageCount\", {\n /**\n * Gets the total number of pages.\n */\n get: function () {\n if (!this.isDocumentLoaded || isNullOrUndefined(this.viewer)) {\n return 1;\n }\n return this.viewer.pages.length;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DocumentEditor.prototype, \"selection\", {\n /**\n * Gets the selection object of the document editor.\n * @returns Selection\n * @default undefined\n */\n get: function () {\n return this.selectionModule;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DocumentEditor.prototype, \"editor\", {\n /**\n * Gets the editor object of the document editor.\n * @returns Editor\n * @default undefined\n */\n get: function () {\n return this.editorModule;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DocumentEditor.prototype, \"editorHistory\", {\n /**\n * Gets the editor history object of the document editor.\n * @returns EditorHistory\n */\n get: function () {\n return this.editorHistoryModule;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DocumentEditor.prototype, \"contextMenu\", {\n /**\n * Gets the context menu object of the document editor.\n * @returns ContextMenu\n */\n get: function () {\n return this.contextMenuModule;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DocumentEditor.prototype, \"containerId\", {\n /**\n * @private\n */\n get: function () {\n return this.element.id;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DocumentEditor.prototype, \"isDocumentLoaded\", {\n /**\n * @private\n */\n get: function () {\n return this.isDocumentLoadedIn;\n },\n set: function (value) {\n this.isDocumentLoadedIn = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DocumentEditor.prototype, \"enableHistoryMode\", {\n /**\n * Determines whether history needs to be enabled or not.\n * @default - false\n * @private\n */\n get: function () {\n return this.enableEditorHistory && !isNullOrUndefined(this.editorHistoryModule);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DocumentEditor.prototype, \"documentStart\", {\n /**\n * Gets the start text position in the document.\n * @default undefined\n * @private\n */\n get: function () {\n if (!isNullOrUndefined(this.selectionModule)) {\n return this.selection.getDocumentStart();\n }\n return undefined;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DocumentEditor.prototype, \"documentEnd\", {\n /**\n * Gets the end text position in the document.\n * @default undefined\n * @private\n */\n get: function () {\n if (!isNullOrUndefined(this.selectionModule)) {\n return this.selection.getDocumentEnd();\n }\n return undefined;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DocumentEditor.prototype, \"isReadOnlyMode\", {\n /**\n * @private\n */\n get: function () {\n return this.isReadOnly || isNullOrUndefined(this.editorModule) || isNullOrUndefined(this.selectionModule);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DocumentEditor.prototype, \"enableImageResizerMode\", {\n /**\n * Specifies to enable image resizer option\n * default - false\n * @private\n */\n get: function () {\n return this.enableImageResizer && !isNullOrUndefined(this.imageResizerModule);\n },\n enumerable: true,\n configurable: true\n });\n DocumentEditor.prototype.preRender = function () {\n this.findResultsList = [];\n //pre render section\n };\n DocumentEditor.prototype.render = function () {\n this.viewer.initializeComponents();\n this.openBlank();\n if (!isNullOrUndefined(this.element)) {\n var container = this.element;\n container.style.minHeight = '200px';\n container.style.minWidth = '200px';\n }\n };\n /**\n * Get component name\n * @private\n */\n DocumentEditor.prototype.getModuleName = function () {\n return 'DocumentEditor';\n };\n /**\n * Called internally if any of the property value changed.\n * @private\n */\n DocumentEditor.prototype.onPropertyChanged = function (model, oldProp) {\n for (var _i = 0, _a = Object.keys(model); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'zoomFactor':\n if (this.viewer) {\n this.viewer.zoomFactor = model.zoomFactor;\n }\n break;\n case 'locale':\n this.localizeDialogs();\n break;\n case 'isReadOnly':\n if (!isNullOrUndefined(this.optionsPaneModule) && this.optionsPaneModule.isOptionsPaneShow) {\n this.optionsPaneModule.showHideOptionsPane(false);\n }\n break;\n }\n }\n };\n DocumentEditor.prototype.localizeDialogs = function () {\n if (this.locale !== '') {\n var l10n = new L10n('documenteditor', this.defaultLocale);\n l10n.setLocale(this.locale);\n setCulture(this.locale);\n if (this.optionsPaneModule) {\n this.optionsPaneModule.initOptionsPane(l10n);\n }\n if (this.paragraphDialogModule) {\n this.paragraphDialogModule.initParagraphDialog(l10n);\n }\n if (this.pageSetupDialogModule) {\n this.pageSetupDialogModule.initPageSetupDialog(l10n);\n }\n if (this.fontDialogModule) {\n this.fontDialogModule.initFontDialog(l10n);\n }\n if (this.hyperlinkDialogModule) {\n this.hyperlinkDialogModule.initHyperlinkDialog(l10n);\n }\n if (this.contextMenuModule) {\n this.contextMenuModule.initContextMenu(l10n);\n }\n if (this.listDialogModule) {\n this.listDialogModule.initListDialog(l10n);\n }\n if (this.tablePropertiesDialogModule) {\n this.tablePropertiesDialogModule.initTablePropertyDialog(l10n);\n }\n if (this.bordersAndShadingDialogModule) {\n this.bordersAndShadingDialogModule.initBordersAndShadingsDialog(l10n);\n }\n if (this.cellOptionsDialogModule) {\n this.cellOptionsDialogModule.initCellMarginsDialog(l10n);\n }\n if (this.tableOptionsDialogModule) {\n this.tableOptionsDialogModule.initTableOptionsDialog(l10n);\n }\n if (this.tableDialogModule) {\n this.tableDialogModule.initTableDialog(l10n);\n }\n if (this.styleDialogModule) {\n this.styleDialogModule.initStyleDialog(l10n);\n }\n if (this.tableOfContentsDialogModule) {\n this.tableOfContentsDialogModule.initTableOfContentDialog(l10n);\n }\n }\n };\n /**\n * Get the properties to be maintained in the persisted state.\n * @private\n */\n DocumentEditor.prototype.getPersistData = function () {\n return 'documenteditor';\n };\n DocumentEditor.prototype.clearPreservedCollectionsInViewer = function () {\n if (this.viewer instanceof LayoutViewer) {\n this.viewer.clearDocumentItems();\n }\n };\n /**\n * @private\n */\n DocumentEditor.prototype.getDocumentEditorElement = function () {\n return this.element;\n };\n /**\n * @private\n */\n DocumentEditor.prototype.fireContentChange = function () {\n this.trigger('contentChange');\n };\n /**\n * @private\n */\n DocumentEditor.prototype.fireDocumentChange = function () {\n this.trigger('documentChange');\n };\n /**\n * @private\n */\n DocumentEditor.prototype.fireSelectionChange = function () {\n if (!this.viewer.isCompositionStart && Browser.isDevice && this.editorModule) {\n this.editorModule.predictText();\n }\n this.trigger('selectionChange');\n };\n /**\n * @private\n */\n DocumentEditor.prototype.fireZoomFactorChange = function () {\n this.trigger('zoomFactorChange');\n };\n /**\n * @private\n */\n DocumentEditor.prototype.fireViewChange = function () {\n if (this.viewer && this.viewer.pages.length > 0) {\n if (this.viewer.visiblePages.length > 0) {\n var pages = this.viewer.visiblePages;\n var eventArgs = {\n startPage: pages[0].index + 1,\n endPage: pages[pages.length - 1].index + 1\n };\n this.trigger('viewChange', eventArgs);\n }\n }\n };\n /**\n * Shows the Paragraph dialog\n * @private\n */\n DocumentEditor.prototype.showParagraphDialog = function (paragraphFormat) {\n if (this.paragraphDialogModule && !this.isReadOnlyMode && this.viewer) {\n this.paragraphDialogModule.show(paragraphFormat);\n }\n };\n /**\n * Shows the margin dialog\n * @private\n */\n DocumentEditor.prototype.showPageSetupDialog = function () {\n if (this.pageSetupDialogModule && !this.isReadOnlyMode && this.viewer) {\n this.pageSetupDialogModule.show();\n }\n };\n /**\n * Shows the font dialog\n * @private\n */\n DocumentEditor.prototype.showFontDialog = function (characterFormat) {\n if (this.fontDialogModule && !this.isReadOnlyMode && this.viewer) {\n this.fontDialogModule.showFontDialog(characterFormat);\n }\n };\n /**\n * Shows the cell option dialog\n * @private\n */\n DocumentEditor.prototype.showCellOptionsDialog = function () {\n if (this.cellOptionsDialogModule && !this.isReadOnlyMode && this.viewer) {\n this.cellOptionsDialogModule.show();\n }\n };\n /**\n * Shows the table options dialog.\n * @private\n */\n DocumentEditor.prototype.showTableOptionsDialog = function () {\n if (this.tableOptionsDialogModule && !this.isReadOnlyMode && this.viewer) {\n this.tableOptionsDialogModule.show();\n }\n };\n /**\n * Shows insert table dialog\n * @private\n */\n DocumentEditor.prototype.showTableDialog = function () {\n if (this.tableDialogModule && !this.isReadOnlyMode && this.viewer) {\n this.tableDialogModule.show();\n }\n };\n /**\n * Shows the table of content dialog\n * @private\n */\n DocumentEditor.prototype.showTableOfContentsDialog = function () {\n if (this.tableOfContentsDialogModule && !this.isReadOnlyMode && this.viewer) {\n this.tableOfContentsDialogModule.show();\n }\n };\n /* tslint:enable:no-any */\n /**\n * Shows the style dialog\n * @private\n */\n DocumentEditor.prototype.showStyleDialog = function () {\n if (this.styleDialogModule && !this.isReadOnlyMode && this.viewer) {\n this.styleDialogModule.show();\n }\n };\n /**\n * Shows the hyperlink dialog\n * @private\n */\n DocumentEditor.prototype.showHyperlinkDialog = function () {\n if (this.hyperlinkDialogModule && !this.isReadOnlyMode && this.viewer) {\n this.hyperlinkDialogModule.show();\n }\n };\n /**\n * Shows the bookmark dialog.\n * @private\n */\n DocumentEditor.prototype.showBookmarkDialog = function () {\n if (this.bookmarkDialogModule && !this.isReadOnlyMode && this.viewer) {\n this.bookmarkDialogModule.show();\n }\n };\n /**\n * Shows the styles dialog.\n * @private\n */\n DocumentEditor.prototype.showStylesDialog = function () {\n if (this.stylesDialogModule && !this.isReadOnlyMode && this.viewer) {\n this.stylesDialogModule.show();\n }\n };\n /**\n * Shows the List dialog\n * @private\n */\n DocumentEditor.prototype.showListDialog = function () {\n if (this.listDialogModule && !this.isReadOnlyMode && this.viewer) {\n this.listDialogModule.showListDialog();\n }\n };\n /**\n * Shows the table properties dialog\n * @private\n */\n DocumentEditor.prototype.showTablePropertiesDialog = function () {\n if (this.tablePropertiesDialogModule && !this.isReadOnlyMode && this.viewer) {\n this.tablePropertiesDialogModule.show();\n }\n };\n /**\n * Shows the borders and shading dialog\n * @private\n */\n DocumentEditor.prototype.showBordersAndShadingDialog = function () {\n if (this.bordersAndShadingDialogModule && !this.isReadOnlyMode && this.viewer) {\n this.bordersAndShadingDialogModule.show();\n }\n };\n //tslint:disable: max-func-body-length\n DocumentEditor.prototype.requiredModules = function () {\n var modules = [];\n if (this.enablePrint) {\n modules.push({\n member: 'Print', args: []\n });\n }\n if (this.enableSfdtExport || this.enableWordExport || this.enableTextExport || this.enableSelection || this.enableEditor) {\n modules.push({\n member: 'SfdtExport', args: [this.viewer]\n });\n }\n if (this.enableWordExport) {\n modules.push({\n member: 'WordExport', args: []\n });\n }\n if (this.enableTextExport) {\n modules.push({\n member: 'TextExport', args: []\n });\n }\n if (this.enableSelection || this.enableSearch || this.enableEditor) {\n modules.push({\n member: 'Selection', args: [this]\n });\n if (this.enableContextMenu) {\n modules.push({\n member: 'ContextMenu', args: [this.viewer]\n });\n }\n }\n if (this.enableSearch) {\n modules.push({\n member: 'Search', args: [this]\n });\n if (this.enableOptionsPane) {\n modules.push({\n member: 'OptionsPane', args: [this.viewer]\n });\n }\n }\n if (this.enableEditor) {\n modules.push({\n member: 'Editor', args: [this.viewer]\n });\n if (this.enableImageResizer) {\n modules.push({\n member: 'ImageResizer', args: [this, this.viewer]\n });\n }\n if (this.enableEditorHistory) {\n modules.push({\n member: 'EditorHistory', args: [this]\n });\n }\n if (this.enableHyperlinkDialog) {\n modules.push({\n member: 'HyperlinkDialog', args: [this.viewer]\n });\n }\n if (this.enableTableDialog) {\n modules.push({\n member: 'TableDialog', args: [this.viewer]\n });\n }\n if (this.enableBookmarkDialog) {\n modules.push({\n member: 'BookmarkDialog', args: [this.viewer]\n });\n }\n if (this.enableTableOfContentsDialog) {\n modules.push({\n member: 'TableOfContentsDialog', args: [this.viewer]\n });\n }\n if (this.enablePageSetupDialog) {\n modules.push({\n member: 'PageSetupDialog', args: [this.viewer]\n });\n }\n if (this.enableStyleDialog) {\n modules.push({\n member: 'StylesDialog', args: [this.viewer]\n });\n modules.push({\n member: 'StyleDialog', args: [this.viewer]\n });\n modules.push({\n member: 'BulletsAndNumberingDialog', args: [this.viewer]\n });\n }\n if (this.enableListDialog) {\n modules.push({\n member: 'ListDialog', args: [this.viewer]\n });\n }\n if (this.enableParagraphDialog) {\n modules.push({\n member: 'ParagraphDialog', args: [this.viewer]\n });\n }\n if (this.enableFontDialog) {\n modules.push({\n member: 'FontDialog', args: [this.viewer]\n });\n }\n if (this.enableTablePropertiesDialog) {\n modules.push({\n member: 'TablePropertiesDialog', args: [this.viewer]\n });\n modules.push({\n member: 'CellOptionsDialog', args: [this.viewer]\n });\n }\n if (this.enableBordersAndShadingDialog) {\n modules.push({\n member: 'BordersAndShadingDialog', args: [this.viewer]\n });\n }\n if (this.enableTableOptionsDialog) {\n modules.push({\n member: 'TableOptionsDialog', args: [this.viewer]\n });\n }\n }\n return modules;\n };\n // Public Implementation Starts\n /**\n * Opens the given Sfdt text.\n * @param {string} sfdtText.\n */\n DocumentEditor.prototype.open = function (sfdtText) {\n if (!isNullOrUndefined(this.viewer)) {\n this.clearPreservedCollectionsInViewer();\n this.viewer.lists = [];\n this.viewer.abstractLists = [];\n this.viewer.styles = new WStyles();\n if (!isNullOrUndefined(sfdtText) && this.viewer) {\n this.viewer.onDocumentChanged(this.parser.convertJsonToDocument(sfdtText));\n if (this.editorModule) {\n this.editorModule.intializeDefaultStyles();\n }\n }\n }\n };\n /**\n * Scrolls view to start of the given page number if exists.\n * @param {number} pageNumber.\n * @returns void\n */\n DocumentEditor.prototype.scrollToPage = function (pageNumber) {\n if (isNullOrUndefined(this.viewer) || pageNumber < 1 || pageNumber > this.viewer.pages.length) {\n return false;\n }\n this.viewer.scrollToPage(pageNumber - 1);\n return true;\n };\n /**\n * Enables all the modules.\n * @returns void\n */\n DocumentEditor.prototype.enableAllModules = function () {\n this.enablePrint = this.enableSfdtExport = this.enableWordExport = this.enableTextExport\n = this.enableSelection = this.enableContextMenu = this.enableSearch = this.enableOptionsPane\n = this.enableEditor = this.enableImageResizer = this.enableEditorHistory\n = this.enableHyperlinkDialog = this.enableTableDialog = this.enableBookmarkDialog\n = this.enableTableOfContentsDialog = this.enablePageSetupDialog = this.enableStyleDialog\n = this.enableListDialog = this.enableParagraphDialog = this.enableFontDialog\n = this.enableTablePropertiesDialog = this.enableBordersAndShadingDialog\n = this.enableTableOptionsDialog = true;\n // tslint:disable-next-line:max-line-length\n DocumentEditor_1.Inject(Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog);\n };\n /**\n * Resizes the component and its sub elements based on given size or container size.\n * @param width\n * @param height\n */\n DocumentEditor.prototype.resize = function (width, height) {\n if (this.element) {\n if (!isNullOrUndefined(width) && width > 200) {\n this.element.style.width = width + 'px';\n }\n if (!isNullOrUndefined(height) && height > 200) {\n this.element.style.height = height + 'px';\n }\n if (this.viewer) {\n this.viewer.updateViewerSize();\n }\n }\n };\n /**\n * Shifts the focus to the document.\n */\n DocumentEditor.prototype.focusIn = function () {\n if (this.viewer) {\n this.viewer.updateFocus();\n }\n };\n /**\n * Fits the page based on given fit type.\n * @param {PageFitType} pageFitType? - Default value of ‘pageFitType’ parameter is 'None'\n * @returns void\n */\n DocumentEditor.prototype.fitPage = function (pageFitType) {\n if (isNullOrUndefined(pageFitType)) {\n pageFitType = 'None';\n }\n if (this.viewer) {\n this.viewer.pageFitType = pageFitType;\n }\n };\n /**\n * Prints the document.\n * @param {Window} printWindow? - Default value of 'printWindow' parameter is undefined.\n */\n DocumentEditor.prototype.print = function (printWindow) {\n if (isNullOrUndefined(this.viewer)) {\n throw new Error('Invalid operation.');\n }\n if (this.printModule) {\n this.printModule.print(this.viewer, printWindow);\n }\n else {\n throw new Error('Invalid operation. Print is not enabled.');\n }\n };\n /**\n * Serialize the data to JSON string.\n */\n DocumentEditor.prototype.serialize = function () {\n var json = '';\n if (this.enableSfdtExport && this.sfdtExportModule instanceof SfdtExport) {\n json = this.sfdtExportModule.serialize();\n }\n else {\n throw new Error('Invalid operation. Sfdt export is not enabled.');\n }\n return json;\n };\n /**\n * Saves the document.\n * @param {string} fileName\n * @param {FormatType} formatType\n */\n DocumentEditor.prototype.save = function (fileName, formatType) {\n fileName = fileName || 'Untitled';\n if (isNullOrUndefined(this.viewer)) {\n throw new Error('Invalid operation.');\n }\n if (formatType === 'Docx' && this.wordExportModule) {\n if (this.wordExportModule) {\n this.wordExportModule.save(this.viewer, fileName);\n }\n }\n else if (formatType === 'Txt' && this.textExportModule) {\n this.textExportModule.save(this.viewer, fileName);\n }\n else if (formatType === 'Sfdt' && this.enableSfdtExport && this.sfdtExportModule) {\n var jsonString = this.serialize();\n var blob = new Blob([jsonString], {\n type: 'application/json'\n });\n Save.save(fileName + '.sfdt', blob);\n }\n else {\n throw new Error('Invalid operation. Specified export is not enabled.');\n }\n };\n /**\n * Saves the document as blob.\n * @param {FormatType} formatType\n */\n DocumentEditor.prototype.saveAsBlob = function (formatType) {\n var _this = this;\n if (isNullOrUndefined(this.viewer)) {\n throw new Error('Invalid operation');\n }\n return new Promise(function (resolve, reject) {\n if (formatType === 'Docx' && _this.wordExportModule) {\n resolve(_this.wordExportModule.saveAsBlob(_this.viewer));\n }\n else if (formatType === 'Txt' && _this.textExportModule) {\n resolve(_this.textExportModule.saveAsBlob(_this.viewer));\n }\n else if (formatType === 'Sfdt' && _this.enableSfdtExport && _this.sfdtExportModule) {\n resolve(_this.sfdtExportModule.saveAsBlob(_this.viewer));\n }\n });\n };\n /**\n * Opens a blank document.\n */\n DocumentEditor.prototype.openBlank = function () {\n var section = new BodyWidget();\n section.index = 0;\n section.sectionFormat = new WSectionFormat(section);\n var paragraph = new ParagraphWidget();\n paragraph.index = 0;\n paragraph.paragraphFormat = new WParagraphFormat(paragraph);\n paragraph.characterFormat = new WCharacterFormat(paragraph);\n section.childWidgets.push(paragraph);\n paragraph.containerWidget = section;\n var sections = [];\n sections.push(section);\n // tslint:disable-next-line:max-line-length\n var hfs = this.parser.parseHeaderFooter({ header: {}, footer: {}, evenHeader: {}, evenFooter: {}, firstPageHeader: {}, firstPageFooter: {} }, undefined);\n if (this.viewer) {\n this.clearPreservedCollectionsInViewer();\n this.viewer.headersFooters.push(hfs);\n this.viewer.onDocumentChanged(sections);\n if (this.editorModule) {\n this.editorModule.intializeDefaultStyles();\n var style = this.viewer.styles.findByName('Normal');\n paragraph.paragraphFormat.baseStyle = style;\n paragraph.paragraphFormat.listFormat.baseStyle = style;\n }\n }\n };\n /**\n * Gets the style names based on given style type.\n * @param styleType\n */\n DocumentEditor.prototype.getStyleNames = function (styleType) {\n if (this.viewer) {\n return this.viewer.styles.getStyleNames(styleType);\n }\n return [];\n };\n /**\n * Gets the style objects on given style type.\n * @param styleType\n */\n DocumentEditor.prototype.getStyles = function (styleType) {\n if (this.viewer) {\n return this.viewer.styles.getStyles(styleType);\n }\n return [];\n };\n /**\n * Shows the dialog.\n * @param {DialogType} dialogType\n * @returns void\n */\n DocumentEditor.prototype.showDialog = function (dialogType) {\n switch (dialogType) {\n case 'Hyperlink':\n this.showHyperlinkDialog();\n break;\n case 'Table':\n this.showTableDialog();\n break;\n case 'Bookmark':\n this.showBookmarkDialog();\n break;\n case 'TableOfContents':\n this.showTableOfContentsDialog();\n break;\n case 'PageSetup':\n this.showPageSetupDialog();\n break;\n case 'List':\n this.showListDialog();\n break;\n case 'Styles':\n this.showStylesDialog();\n break;\n case 'Style':\n this.showStyleDialog();\n break;\n case 'Paragraph':\n this.showParagraphDialog();\n break;\n case 'Font':\n this.showFontDialog();\n break;\n case 'TableProperties':\n this.showTablePropertiesDialog();\n break;\n case 'BordersAndShading':\n this.showBordersAndShadingDialog();\n break;\n case 'TableOptions':\n this.showTableOptionsDialog();\n break;\n }\n };\n /**\n * Shows the options pane.\n */\n DocumentEditor.prototype.showOptionsPane = function () {\n if (!isNullOrUndefined(this.optionsPaneModule) && !isNullOrUndefined(this.viewer)) {\n this.optionsPaneModule.showHideOptionsPane(true);\n }\n };\n /**\n * Destroys all managed resources used by this object.\n */\n DocumentEditor.prototype.destroy = function () {\n _super.prototype.destroy.call(this);\n this.destroyDependentModules();\n if (!isNullOrUndefined(this.viewer)) {\n this.viewer.destroy();\n }\n this.viewer = undefined;\n if (!isNullOrUndefined(this.element)) {\n this.element.classList.remove('e-documenteditor');\n this.element.innerHTML = '';\n }\n this.element = undefined;\n this.findResultsList = [];\n this.findResultsList = undefined;\n };\n DocumentEditor.prototype.destroyDependentModules = function () {\n if (this.printModule) {\n this.printModule.destroy();\n this.printModule = undefined;\n }\n if (this.sfdtExportModule) {\n this.sfdtExportModule.destroy();\n this.sfdtExportModule = undefined;\n }\n if (this.optionsPaneModule) {\n this.optionsPaneModule.destroy();\n this.optionsPaneModule = undefined;\n }\n if (!isNullOrUndefined(this.hyperlinkDialogModule)) {\n this.hyperlinkDialogModule.destroy();\n this.hyperlinkDialogModule = undefined;\n }\n if (this.searchModule) {\n this.searchModule.destroy();\n this.searchModule = undefined;\n }\n if (this.contextMenuModule) {\n this.contextMenuModule.destroy();\n this.contextMenuModule = undefined;\n }\n if (this.editorModule) {\n this.editorModule.destroy();\n this.editorModule = undefined;\n }\n if (this.selectionModule) {\n this.selectionModule.destroy();\n this.selectionModule = undefined;\n }\n if (this.editorHistoryModule) {\n this.editorHistoryModule.destroy();\n this.editorHistoryModule = undefined;\n }\n if (!isNullOrUndefined(this.paragraphDialogModule)) {\n this.paragraphDialogModule.destroy();\n this.paragraphDialogModule = undefined;\n }\n if (this.pageSetupDialogModule) {\n this.pageSetupDialogModule.destroy();\n this.pageSetupDialogModule = undefined;\n }\n if (this.fontDialogModule) {\n this.fontDialogModule.destroy();\n this.fontDialogModule = undefined;\n }\n if (this.listDialogModule) {\n this.listDialogModule.destroy();\n this.listDialogModule = undefined;\n }\n if (this.imageResizerModule) {\n this.imageResizerModule.destroy();\n this.imageResizerModule = undefined;\n }\n if (this.tablePropertiesDialogModule) {\n this.tablePropertiesDialogModule.destroy();\n this.tablePropertiesDialogModule = undefined;\n }\n if (this.bordersAndShadingDialogModule) {\n this.bordersAndShadingDialogModule.destroy();\n this.bordersAndShadingDialogModule = undefined;\n }\n if (this.cellOptionsDialogModule) {\n this.cellOptionsDialogModule.destroy();\n this.cellOptionsDialogModule = undefined;\n }\n if (this.tableOptionsDialogModule) {\n this.tableOptionsDialogModule.destroy();\n this.tableOptionsDialogModule = undefined;\n }\n if (this.tableDialogModule) {\n this.tableDialogModule.destroy();\n this.tableDialogModule = undefined;\n }\n if (this.styleDialogModule) {\n this.styleDialogModule = undefined;\n }\n if (this.bookmarkDialogModule) {\n this.bookmarkDialogModule.destroy();\n this.bookmarkDialogModule = undefined;\n }\n if (this.styleDialogModule) {\n this.styleDialogModule.destroy();\n this.styleDialogModule = undefined;\n }\n if (this.textExportModule) {\n this.textExportModule.destroy();\n this.textExportModule = undefined;\n }\n if (this.wordExportModule) {\n this.wordExportModule.destroy();\n this.wordExportModule = undefined;\n }\n if (this.tableOfContentsDialogModule) {\n this.tableOfContentsDialogModule.destroy();\n this.tableOfContentsDialogModule = undefined;\n }\n };\n __decorate([\n Property(1)\n ], DocumentEditor.prototype, \"zoomFactor\", void 0);\n __decorate([\n Property(true)\n ], DocumentEditor.prototype, \"isReadOnly\", void 0);\n __decorate([\n Property(false)\n ], DocumentEditor.prototype, \"enablePrint\", void 0);\n __decorate([\n Property(false)\n ], DocumentEditor.prototype, \"enableSelection\", void 0);\n __decorate([\n Property(false)\n ], DocumentEditor.prototype, \"enableEditor\", void 0);\n __decorate([\n Property(false)\n ], DocumentEditor.prototype, \"enableEditorHistory\", void 0);\n __decorate([\n Property(false)\n ], DocumentEditor.prototype, \"enableSfdtExport\", void 0);\n __decorate([\n Property(false)\n ], DocumentEditor.prototype, \"enableWordExport\", void 0);\n __decorate([\n Property(false)\n ], DocumentEditor.prototype, \"enableTextExport\", void 0);\n __decorate([\n Property(false)\n ], DocumentEditor.prototype, \"enableOptionsPane\", void 0);\n __decorate([\n Property(false)\n ], DocumentEditor.prototype, \"enableContextMenu\", void 0);\n __decorate([\n Property(false)\n ], DocumentEditor.prototype, \"enableHyperlinkDialog\", void 0);\n __decorate([\n Property(false)\n ], DocumentEditor.prototype, \"enableBookmarkDialog\", void 0);\n __decorate([\n Property(false)\n ], DocumentEditor.prototype, \"enableTableOfContentsDialog\", void 0);\n __decorate([\n Property(false)\n ], DocumentEditor.prototype, \"enableSearch\", void 0);\n __decorate([\n Property(false)\n ], DocumentEditor.prototype, \"enableParagraphDialog\", void 0);\n __decorate([\n Property(false)\n ], DocumentEditor.prototype, \"enableListDialog\", void 0);\n __decorate([\n Property(false)\n ], DocumentEditor.prototype, \"enableTablePropertiesDialog\", void 0);\n __decorate([\n Property(false)\n ], DocumentEditor.prototype, \"enableBordersAndShadingDialog\", void 0);\n __decorate([\n Property(false)\n ], DocumentEditor.prototype, \"enablePageSetupDialog\", void 0);\n __decorate([\n Property(false)\n ], DocumentEditor.prototype, \"enableStyleDialog\", void 0);\n __decorate([\n Property(false)\n ], DocumentEditor.prototype, \"enableFontDialog\", void 0);\n __decorate([\n Property(false)\n ], DocumentEditor.prototype, \"enableTableOptionsDialog\", void 0);\n __decorate([\n Property(false)\n ], DocumentEditor.prototype, \"enableTableDialog\", void 0);\n __decorate([\n Property(false)\n ], DocumentEditor.prototype, \"enableImageResizer\", void 0);\n __decorate([\n Event()\n ], DocumentEditor.prototype, \"documentChange\", void 0);\n __decorate([\n Event()\n ], DocumentEditor.prototype, \"viewChange\", void 0);\n __decorate([\n Event()\n ], DocumentEditor.prototype, \"zoomFactorChange\", void 0);\n __decorate([\n Event()\n ], DocumentEditor.prototype, \"selectionChange\", void 0);\n __decorate([\n Event()\n ], DocumentEditor.prototype, \"requestNavigate\", void 0);\n __decorate([\n Event()\n ], DocumentEditor.prototype, \"contentChange\", void 0);\n DocumentEditor = DocumentEditor_1 = __decorate([\n NotifyPropertyChanges\n ], DocumentEditor);\n return DocumentEditor;\n var DocumentEditor_1;\n}(Component));\nexport { DocumentEditor };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * Print class\n */\nvar Print = /** @class */ (function () {\n function Print() {\n }\n /**\n * Gets module name.\n */\n Print.prototype.getModuleName = function () {\n return 'Print';\n };\n /**\n * Prints the current viewer\n * @param viewer\n * @param printWindow\n * @private\n */\n Print.prototype.print = function (viewer, printWindow) {\n this.printWindow(viewer, navigator.userAgent, printWindow);\n };\n /**\n * Opens print window and displays current page to print.\n * @private\n */\n Print.prototype.printWindow = function (viewer, browserUserAgent, printWindow) {\n var height = this.getPageHeight(viewer.pages);\n var width = this.getPageWidth(viewer.pages);\n var printElement = document.createElement('div');\n printElement.style.width = '100%';\n printElement.style.height = '100%';\n printElement.style.overflow = 'scroll';\n // Rendering canvas to print\n this.generatePrintContent(viewer, printElement);\n if (isNullOrUndefined(printWindow)) {\n printWindow = window.open('', 'print', 'height=452,width=1024,tabbar=no');\n }\n if ((browserUserAgent.indexOf('Chrome') !== -1) || (browserUserAgent.indexOf('Firefox')) !== -1) {\n // Chrome and Firefox\n printWindow.document.write('');\n // tslint:disable-next-line:max-line-length\n printWindow.document.write('
');\n }\n else {\n // Internet Explorer and Edge\n // tslint:disable-next-line:max-line-length\n printWindow.document.write('');\n }\n // tslint:disable-next-line:max-line-length\n printWindow.document.write(printElement.innerHTML + '');\n printElement = undefined;\n printWindow.document.close();\n printWindow.focus();\n var interval = setInterval(function () {\n if (printWindow.ready) {\n printWindow.print();\n printWindow.close();\n clearInterval(interval);\n }\n }, 500);\n };\n /**\n * Generates print content.\n * @private\n */\n Print.prototype.generatePrintContent = function (viewer, element) {\n // Rendering canvas to print\n var htmlString = '';\n for (var i = 0; i < viewer.pages.length; i++) {\n var page = viewer.pages[i];\n var pageHeight = page.boundingRectangle.height;\n var pageWidth = page.boundingRectangle.width;\n viewer.render.isPrinting = true;\n viewer.render.renderWidgets(page, 0, 0, 0, 0);\n var canvasURL = viewer.render.pageCanvas.toDataURL();\n viewer.render.isPrinting = false;\n // tslint:disable-next-line:max-line-length\n htmlString += '
';\n }\n element.innerHTML = htmlString;\n };\n /**\n * Gets page width.\n * @param pages\n * @private\n */\n Print.prototype.getPageWidth = function (pages) {\n var width = 0;\n for (var i = 0; i < pages.length; i++) {\n if (width < pages[i].boundingRectangle.width) {\n width = pages[i].boundingRectangle.width;\n }\n }\n return width;\n };\n /**\n * Gets page height.\n * @private\n */\n Print.prototype.getPageHeight = function (pages) {\n var height = 0;\n for (var i = 0; i < pages.length; i++) {\n if (height < pages[i].boundingRectangle.height) {\n height = pages[i].boundingRectangle.height;\n }\n }\n return height;\n };\n /**\n * @private\n */\n Print.prototype.destroy = function () {\n return;\n };\n return Print;\n}());\nexport { Print };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Dictionary } from '../../base/dictionary';\nimport { WUniqueFormat } from '../../base/unique-format';\nimport { WUniqueFormats } from '../../base/unique-formats';\n/**\n * @private\n */\nvar WSectionFormat = /** @class */ (function () {\n function WSectionFormat(node) {\n this.uniqueSectionFormat = undefined;\n this.ownerBase = node;\n }\n Object.defineProperty(WSectionFormat.prototype, \"headerDistance\", {\n get: function () {\n return this.getPropertyValue('headerDistance');\n },\n set: function (value) {\n this.setPropertyValue('headerDistance', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WSectionFormat.prototype, \"footerDistance\", {\n get: function () {\n return this.getPropertyValue('footerDistance');\n },\n set: function (value) {\n this.setPropertyValue('footerDistance', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WSectionFormat.prototype, \"differentFirstPage\", {\n get: function () {\n return this.getPropertyValue('differentFirstPage');\n },\n set: function (value) {\n this.setPropertyValue('differentFirstPage', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WSectionFormat.prototype, \"differentOddAndEvenPages\", {\n get: function () {\n return this.getPropertyValue('differentOddAndEvenPages');\n },\n set: function (value) {\n this.setPropertyValue('differentOddAndEvenPages', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WSectionFormat.prototype, \"pageHeight\", {\n get: function () {\n return this.getPropertyValue('pageHeight');\n },\n set: function (value) {\n this.setPropertyValue('pageHeight', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WSectionFormat.prototype, \"rightMargin\", {\n get: function () {\n return this.getPropertyValue('rightMargin');\n },\n set: function (value) {\n this.setPropertyValue('rightMargin', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WSectionFormat.prototype, \"pageWidth\", {\n get: function () {\n return this.getPropertyValue('pageWidth');\n },\n set: function (value) {\n this.setPropertyValue('pageWidth', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WSectionFormat.prototype, \"leftMargin\", {\n get: function () {\n return this.getPropertyValue('leftMargin');\n },\n set: function (value) {\n this.setPropertyValue('leftMargin', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WSectionFormat.prototype, \"bottomMargin\", {\n get: function () {\n return this.getPropertyValue('bottomMargin');\n },\n set: function (value) {\n this.setPropertyValue('bottomMargin', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WSectionFormat.prototype, \"topMargin\", {\n get: function () {\n return this.getPropertyValue('topMargin');\n },\n set: function (value) {\n this.setPropertyValue('topMargin', value);\n },\n enumerable: true,\n configurable: true\n });\n WSectionFormat.prototype.destroy = function () {\n if (!isNullOrUndefined(this.uniqueSectionFormat)) {\n WSectionFormat.uniqueSectionFormats.remove(this.uniqueSectionFormat);\n }\n this.uniqueSectionFormat = undefined;\n };\n WSectionFormat.prototype.hasValue = function (property) {\n if (!isNullOrUndefined(this.uniqueSectionFormat)) {\n var propertyType = WUniqueFormat.getPropertyType(this.uniqueSectionFormat.uniqueFormatType, property);\n return this.uniqueSectionFormat.propertiesHash.containsKey(propertyType);\n }\n return false;\n };\n WSectionFormat.getPropertyDefaultValue = function (property) {\n var value = undefined;\n switch (property) {\n case 'headerDistance':\n value = 36;\n break;\n case 'footerDistance':\n value = 36;\n break;\n case 'differentFirstPage':\n value = false;\n break;\n case 'differentOddAndEvenPages':\n value = false;\n break;\n case 'pageWidth':\n value = 612;\n break;\n case 'pageHeight':\n value = 792;\n break;\n case 'leftMargin':\n value = 72;\n break;\n case 'topMargin':\n value = 72;\n break;\n case 'rightMargin':\n value = 72;\n break;\n case 'bottomMargin':\n value = 72;\n break;\n }\n return value;\n };\n WSectionFormat.prototype.getPropertyValue = function (property) {\n var hasValue = this.hasValue(property);\n if (hasValue) {\n var propertyType = WUniqueFormat.getPropertyType(WSectionFormat.uniqueFormatType, property);\n if (!isNullOrUndefined(this.uniqueSectionFormat) && this.uniqueSectionFormat.propertiesHash.containsKey(propertyType)) {\n return this.uniqueSectionFormat.propertiesHash.get(propertyType);\n }\n }\n return WSectionFormat.getPropertyDefaultValue(property);\n };\n WSectionFormat.prototype.setPropertyValue = function (property, value) {\n if (isNullOrUndefined(value) || value === '') {\n value = WSectionFormat.getPropertyDefaultValue(property);\n }\n if (isNullOrUndefined(this.uniqueSectionFormat)) {\n this.initializeUniqueSectionFormat(property, value);\n }\n else {\n var propertyType = WUniqueFormat.getPropertyType(this.uniqueSectionFormat.uniqueFormatType, property);\n if (this.uniqueSectionFormat.propertiesHash.containsKey(propertyType) &&\n this.uniqueSectionFormat.propertiesHash.get(propertyType) === value) {\n //Do nothing, since no change in property value and return\n return;\n }\n // tslint:disable-next-line:max-line-length\n this.uniqueSectionFormat = WSectionFormat.uniqueSectionFormats.updateUniqueFormat(this.uniqueSectionFormat, property, value);\n }\n };\n WSectionFormat.prototype.initializeUniqueSectionFormat = function (property, propValue) {\n var uniqueSectionFormatTemp = new Dictionary();\n this.addUniqueSectionFormat('headerDistance', property, propValue, uniqueSectionFormatTemp);\n this.addUniqueSectionFormat('footerDistance', property, propValue, uniqueSectionFormatTemp);\n this.addUniqueSectionFormat('differentFirstPage', property, propValue, uniqueSectionFormatTemp);\n this.addUniqueSectionFormat('differentOddAndEvenPages', property, propValue, uniqueSectionFormatTemp);\n this.addUniqueSectionFormat('pageWidth', property, propValue, uniqueSectionFormatTemp);\n this.addUniqueSectionFormat('pageHeight', property, propValue, uniqueSectionFormatTemp);\n this.addUniqueSectionFormat('leftMargin', property, propValue, uniqueSectionFormatTemp);\n this.addUniqueSectionFormat('topMargin', property, propValue, uniqueSectionFormatTemp);\n this.addUniqueSectionFormat('rightMargin', property, propValue, uniqueSectionFormatTemp);\n this.addUniqueSectionFormat('bottomMargin', property, propValue, uniqueSectionFormatTemp);\n // tslint:disable-next-line:max-line-length\n this.uniqueSectionFormat = WSectionFormat.uniqueSectionFormats.addUniqueFormat(uniqueSectionFormatTemp, WSectionFormat.uniqueFormatType);\n };\n // tslint:disable-next-line:max-line-length\n WSectionFormat.prototype.addUniqueSectionFormat = function (property, modifiedProperty, propValue, uniqueSectionFormatTemp) {\n var propertyType;\n propertyType = WUniqueFormat.getPropertyType(WSectionFormat.uniqueFormatType, property);\n if (property === modifiedProperty) {\n uniqueSectionFormatTemp.add(propertyType, propValue);\n }\n else {\n uniqueSectionFormatTemp.add(propertyType, WSectionFormat.getPropertyDefaultValue(property));\n }\n };\n WSectionFormat.prototype.copyFormat = function (format, history) {\n if (history && (history.isUndoing || history.isRedoing)) {\n this.uniqueSectionFormat = format.uniqueSectionFormat;\n }\n else {\n if (!isNullOrUndefined(format)) {\n if (!isNullOrUndefined(format.uniqueSectionFormat) && format.uniqueSectionFormat.propertiesHash) {\n this.updateUniqueSectionFormat(format);\n }\n }\n }\n };\n WSectionFormat.prototype.updateUniqueSectionFormat = function (format) {\n var hash = undefined;\n if (this.uniqueSectionFormat) {\n hash = this.uniqueSectionFormat.mergeProperties(format.uniqueSectionFormat);\n if (this.uniqueSectionFormat.referenceCount === 0) {\n WSectionFormat.uniqueSectionFormats.remove(this.uniqueSectionFormat);\n this.uniqueSectionFormat = undefined;\n }\n }\n this.uniqueSectionFormat = new WUniqueFormat(WSectionFormat.uniqueFormatType);\n if (isNullOrUndefined(hash)) {\n hash = this.uniqueSectionFormat.mergeProperties(format.uniqueSectionFormat);\n }\n this.uniqueSectionFormat = WSectionFormat.uniqueSectionFormats.addUniqueFormat(hash, WSectionFormat.uniqueFormatType);\n };\n WSectionFormat.prototype.cloneFormat = function () {\n var format = new WSectionFormat();\n format.uniqueSectionFormat = this.uniqueSectionFormat;\n return format;\n };\n WSectionFormat.clear = function () {\n this.uniqueSectionFormats.clear();\n };\n WSectionFormat.uniqueSectionFormats = new WUniqueFormats();\n WSectionFormat.uniqueFormatType = 10;\n return WSectionFormat;\n}());\nexport { WSectionFormat };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * @private\n */\nvar WLevelOverride = /** @class */ (function () {\n function WLevelOverride() {\n }\n WLevelOverride.prototype.destroy = function () {\n if (!isNullOrUndefined(this.overrideListLevel)) {\n this.overrideListLevel.destroy();\n }\n this.levelNumber = undefined;\n this.startAt = undefined;\n this.overrideListLevel = undefined;\n };\n return WLevelOverride;\n}());\nexport { WLevelOverride };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { WLevelOverride } from './level-override';\n/**\n * @private\n */\nvar WList = /** @class */ (function () {\n function WList() {\n this.listId = -1;\n this.sourceListId = -1;\n this.abstractListId = -1;\n this.abstractList = undefined;\n this.levelOverrides = [];\n }\n WList.prototype.getListLevel = function (levelNumber) {\n var listLevel = undefined;\n var levelOverride = this.getLevelOverride(levelNumber);\n if (!isNullOrUndefined(levelOverride) && !isNullOrUndefined(levelOverride.overrideListLevel)) {\n listLevel = levelOverride.overrideListLevel;\n }\n else {\n listLevel = this.abstractList.levels[levelNumber];\n }\n return listLevel;\n };\n WList.prototype.getLevelOverride = function (levelNumber) {\n for (var i = 0; i < this.levelOverrides.length; i++) {\n if (this.levelOverrides[i] instanceof WLevelOverride) {\n var levelOverride = this.levelOverrides[i];\n if (levelOverride.levelNumber === levelNumber) {\n return levelOverride;\n }\n }\n }\n return undefined;\n };\n WList.prototype.destroy = function () {\n if (!isNullOrUndefined(this.levelOverrides)) {\n this.levelOverrides = [];\n }\n this.abstractListId = undefined;\n this.listId = undefined;\n this.sourceListId = undefined;\n this.levelOverrides = undefined;\n };\n WList.prototype.mergeList = function (list) {\n if (!isNullOrUndefined(this.abstractListId) && this.abstractListId !== -1) {\n this.abstractListId = list.abstractListId;\n }\n if (!isNullOrUndefined(this.listId) && this.listId !== -1) {\n this.listId = list.listId;\n }\n if (!isNullOrUndefined(this.sourceListId) && this.sourceListId !== -1) {\n this.sourceListId = list.sourceListId;\n }\n if (!isNullOrUndefined(this.levelOverrides) && this.levelOverrides.length !== 0) {\n this.levelOverrides = list.levelOverrides;\n }\n };\n return WList;\n}());\nexport { WList };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Dictionary } from '../../base/dictionary';\nimport { WUniqueFormat } from '../../base/unique-format';\nimport { WUniqueFormats } from '../../base/unique-formats';\nimport { WParagraphStyle } from './style';\nimport { WList } from '../list/list';\n/**\n * @private\n */\nvar WListFormat = /** @class */ (function () {\n function WListFormat(node) {\n this.uniqueListFormat = undefined;\n this.ownerBase = undefined;\n this.baseStyle = undefined;\n this.list = undefined;\n this.ownerBase = node;\n }\n Object.defineProperty(WListFormat.prototype, \"listId\", {\n get: function () {\n return this.getPropertyValue('listId');\n },\n set: function (listId) {\n this.setPropertyValue('listId', listId);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WListFormat.prototype, \"listLevelNumber\", {\n get: function () {\n return this.getPropertyValue('listLevelNumber');\n },\n set: function (value) {\n this.setPropertyValue('listLevelNumber', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WListFormat.prototype, \"listLevel\", {\n get: function () {\n var list = undefined;\n if (!isNullOrUndefined(this.list)) {\n list = this.list;\n }\n else {\n /* tslint:disable-next-line:no-any */\n var baseListStyle = this.baseStyle;\n while (!isNullOrUndefined(baseListStyle)) {\n if (baseListStyle.paragraphFormat.listFormat.list) {\n list = baseListStyle.paragraphFormat.listFormat.list;\n break;\n }\n else {\n baseListStyle = baseListStyle.basedOn;\n }\n }\n }\n if (!isNullOrUndefined(list)) {\n return list.getListLevel(this.listLevelNumber);\n }\n else {\n return undefined;\n }\n },\n enumerable: true,\n configurable: true\n });\n WListFormat.prototype.getPropertyValue = function (property) {\n if (!this.hasValue(property)) {\n if (this.baseStyle instanceof WParagraphStyle) {\n /* tslint:disable-next-line:no-any */\n var baseStyle = this.baseStyle;\n while (!isNullOrUndefined(baseStyle)) {\n if (baseStyle.paragraphFormat.listFormat.hasValue(property)) {\n break;\n }\n else {\n baseStyle = baseStyle.basedOn;\n }\n }\n if (!isNullOrUndefined(baseStyle)) {\n var propertyType = WUniqueFormat.getPropertyType(WListFormat.uniqueFormatType, property);\n return baseStyle.paragraphFormat.listFormat.uniqueListFormat.propertiesHash.get(propertyType);\n }\n }\n }\n else {\n var propertyType = WUniqueFormat.getPropertyType(WListFormat.uniqueFormatType, property);\n if (!isNullOrUndefined(this.uniqueListFormat) && this.uniqueListFormat.propertiesHash.containsKey(propertyType)) {\n return this.uniqueListFormat.propertiesHash.get(propertyType);\n }\n }\n return WListFormat.getPropertyDefaultValue(property);\n };\n WListFormat.prototype.setPropertyValue = function (property, value) {\n if (isNullOrUndefined(value) || value === '') {\n value = WListFormat.getPropertyDefaultValue(property);\n }\n if (isNullOrUndefined(this.uniqueListFormat)) {\n this.initializeUniqueListFormat(property, value);\n }\n else {\n var propertyType = WUniqueFormat.getPropertyType(this.uniqueListFormat.uniqueFormatType, property);\n if (this.uniqueListFormat.propertiesHash.containsKey(propertyType) &&\n this.uniqueListFormat.propertiesHash.get(propertyType) === value) {\n //Do nothing, since no change in property value and return\n return;\n }\n this.uniqueListFormat = WListFormat.uniqueListFormats.updateUniqueFormat(this.uniqueListFormat, property, value);\n }\n };\n WListFormat.prototype.initializeUniqueListFormat = function (property, propValue) {\n var uniqueListFormatTemp = new Dictionary();\n this.addUniqueListFormat('listId', property, propValue, uniqueListFormatTemp);\n this.addUniqueListFormat('listLevelNumber', property, propValue, uniqueListFormatTemp);\n this.uniqueListFormat = WListFormat.uniqueListFormats.addUniqueFormat(uniqueListFormatTemp, WListFormat.uniqueFormatType);\n };\n // tslint:disable-next-line:max-line-length\n WListFormat.prototype.addUniqueListFormat = function (property, modifiedProperty, propValue, uniqueListFormatTemp) {\n var propertyType;\n propertyType = WUniqueFormat.getPropertyType(WListFormat.uniqueFormatType, property);\n if (property === modifiedProperty) {\n uniqueListFormatTemp.add(propertyType, propValue);\n }\n };\n WListFormat.getPropertyDefaultValue = function (property) {\n var value = undefined;\n switch (property) {\n case 'listId':\n value = -1;\n break;\n case 'listLevelNumber':\n value = 0;\n break;\n }\n return value;\n };\n WListFormat.prototype.copyFormat = function (format) {\n if (!isNullOrUndefined(format)) {\n if (!isNullOrUndefined(format.uniqueListFormat)) {\n this.listId = format.listId;\n this.listLevelNumber = format.listLevelNumber;\n }\n if (!isNullOrUndefined(format.list)) {\n this.list = format.list;\n }\n }\n };\n WListFormat.prototype.hasValue = function (property) {\n if (!isNullOrUndefined(this.uniqueListFormat)) {\n var propertyType = WUniqueFormat.getPropertyType(this.uniqueListFormat.uniqueFormatType, property);\n return this.uniqueListFormat.propertiesHash.containsKey(propertyType);\n }\n return false;\n };\n WListFormat.prototype.clearFormat = function () {\n if (!isNullOrUndefined(this.uniqueListFormat) && this.uniqueListFormat.referenceCount === 0) {\n WListFormat.uniqueListFormats.remove(this.uniqueListFormat);\n }\n this.uniqueListFormat = undefined;\n this.list = undefined;\n };\n WListFormat.prototype.destroy = function () {\n this.clearFormat();\n };\n WListFormat.clear = function () {\n this.uniqueListFormats.clear();\n };\n WListFormat.prototype.ApplyStyle = function (baseStyle) {\n this.baseStyle = baseStyle;\n };\n /**\n * For internal use\n * @private\n */\n WListFormat.prototype.getValue = function (property) {\n return this.hasValue(property) ? this.getPropertyValue(property) : undefined;\n };\n /**\n * For internal use\n * @private\n */\n WListFormat.prototype.mergeFormat = function (format) {\n if (isNullOrUndefined(this.getValue('listId'))) {\n this.listId = format.getValue('listId');\n }\n if (isNullOrUndefined(this.getValue('listLevelNumber'))) {\n this.listLevelNumber = format.getValue('listLevelNumber');\n }\n if (!isNullOrUndefined(format.list)) {\n if (isNullOrUndefined(this.list)) {\n this.list = new WList();\n }\n this.list.mergeList(format.list);\n }\n };\n WListFormat.uniqueListFormats = new WUniqueFormats();\n WListFormat.uniqueFormatType = 7;\n return WListFormat;\n}());\nexport { WListFormat };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Dictionary } from '../../base/dictionary';\nimport { WUniqueFormat } from '../../base/unique-format';\nimport { WUniqueFormats } from '../../base/unique-formats';\nimport { WListFormat } from './list-format';\nimport { WParagraphStyle } from './style';\n/**\n * @private\n */\nvar WTabStop = /** @class */ (function () {\n function WTabStop() {\n }\n Object.defineProperty(WTabStop.prototype, \"position\", {\n get: function () {\n return this.positionIn;\n },\n set: function (value) {\n this.positionIn = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WTabStop.prototype, \"deletePosition\", {\n get: function () {\n return this.deletePositionIn;\n },\n set: function (value) {\n this.deletePositionIn = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WTabStop.prototype, \"tabJustification\", {\n get: function () {\n return this.justification;\n },\n set: function (value) {\n this.justification = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WTabStop.prototype, \"tabLeader\", {\n get: function () {\n return this.leader;\n },\n set: function (value) {\n this.leader = value;\n },\n enumerable: true,\n configurable: true\n });\n WTabStop.prototype.destroy = function () {\n this.position = undefined;\n this.deletePosition = undefined;\n this.tabJustification = undefined;\n this.leader = undefined;\n };\n return WTabStop;\n}());\nexport { WTabStop };\n/**\n * @private\n */\nvar WParagraphFormat = /** @class */ (function () {\n function WParagraphFormat(node) {\n this.uniqueParagraphFormat = undefined;\n this.ownerBase = undefined;\n this.baseStyle = undefined;\n this.tabs = undefined;\n this.ownerBase = node;\n this.listFormat = new WListFormat(this);\n this.tabs = [];\n }\n WParagraphFormat.prototype.getUpdatedTabs = function () {\n var inTabs = [];\n if (!isNullOrUndefined(this.baseStyle)) {\n /* tslint:disable-next-line:no-any */\n var baseStyle = this.baseStyle;\n var tabStops = new Dictionary();\n while (!isNullOrUndefined(baseStyle)) {\n for (var _i = 0, _a = baseStyle.paragraphFormat.tabs; _i < _a.length; _i++) {\n var tab = _a[_i];\n if (!tabStops.containsKey(tab.position)) {\n tabStops.add(tab.position, tab);\n }\n }\n baseStyle = baseStyle.basedOn;\n }\n for (var _b = 0, _c = tabStops.keys; _b < _c.length; _b++) {\n var key = _c[_b];\n if (!this.hasTabStop(key)) {\n inTabs.push(tabStops.get(key));\n }\n }\n inTabs = inTabs.concat(this.tabs.filter(function (a) { return (a.position !== 0 && a.deletePosition === 0); }));\n inTabs = inTabs.sort(function (a, b) { return a.position - b.position; });\n }\n return inTabs;\n };\n WParagraphFormat.prototype.hasTabStop = function (position) {\n for (var i = 0; i < this.tabs.length; i++) {\n if (this.tabs[i].deletePosition === position) {\n return true;\n }\n }\n return false;\n };\n Object.defineProperty(WParagraphFormat.prototype, \"leftIndent\", {\n get: function () {\n return this.getPropertyValue('leftIndent');\n },\n set: function (value) {\n this.setPropertyValue('leftIndent', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WParagraphFormat.prototype, \"rightIndent\", {\n get: function () {\n return this.getPropertyValue('rightIndent');\n },\n set: function (value) {\n this.setPropertyValue('rightIndent', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WParagraphFormat.prototype, \"firstLineIndent\", {\n get: function () {\n return this.getPropertyValue('firstLineIndent');\n },\n set: function (value) {\n this.setPropertyValue('firstLineIndent', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WParagraphFormat.prototype, \"beforeSpacing\", {\n get: function () {\n return this.getPropertyValue('beforeSpacing');\n },\n set: function (value) {\n this.setPropertyValue('beforeSpacing', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WParagraphFormat.prototype, \"afterSpacing\", {\n get: function () {\n return this.getPropertyValue('afterSpacing');\n },\n set: function (value) {\n this.setPropertyValue('afterSpacing', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WParagraphFormat.prototype, \"lineSpacing\", {\n get: function () {\n return this.getPropertyValue('lineSpacing');\n },\n set: function (value) {\n this.setPropertyValue('lineSpacing', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WParagraphFormat.prototype, \"lineSpacingType\", {\n get: function () {\n return this.getPropertyValue('lineSpacingType');\n },\n set: function (value) {\n this.setPropertyValue('lineSpacingType', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WParagraphFormat.prototype, \"textAlignment\", {\n get: function () {\n return this.getPropertyValue('textAlignment');\n },\n set: function (value) {\n this.setPropertyValue('textAlignment', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WParagraphFormat.prototype, \"outlineLevel\", {\n get: function () {\n return this.getPropertyValue('outlineLevel');\n },\n set: function (value) {\n this.setPropertyValue('outlineLevel', value);\n },\n enumerable: true,\n configurable: true\n });\n WParagraphFormat.prototype.getListFormatParagraphFormat = function (property) {\n if (this.listFormat.listId > 0 && this.listFormat.listLevelNumber > -1) {\n var level = this.listFormat.listLevel;\n var propertyType = WUniqueFormat.getPropertyType(WParagraphFormat.uniqueFormatType, property);\n // tslint:disable-next-line:max-line-length\n if (!isNullOrUndefined(level) && !isNullOrUndefined(level.paragraphFormat.uniqueParagraphFormat) && level.paragraphFormat.uniqueParagraphFormat.propertiesHash.containsKey(propertyType)) {\n return level.paragraphFormat.uniqueParagraphFormat.propertiesHash.get(propertyType);\n }\n else {\n return undefined;\n }\n }\n return undefined;\n };\n WParagraphFormat.prototype.getPropertyValue = function (property) {\n if (!this.hasValue(property)) {\n var ifListFormat = this.getListFormatParagraphFormat(property);\n if (!isNullOrUndefined(ifListFormat)) {\n return ifListFormat;\n }\n else {\n if (this.baseStyle instanceof WParagraphStyle) {\n /* tslint:disable-next-line:no-any */\n var baseStyle = this.baseStyle;\n while (!isNullOrUndefined(baseStyle)) {\n if (baseStyle.paragraphFormat.hasValue(property)) {\n break;\n }\n else {\n baseStyle = baseStyle.basedOn;\n }\n }\n if (!isNullOrUndefined(baseStyle)) {\n var propertyType = WUniqueFormat.getPropertyType(WParagraphFormat.uniqueFormatType, property);\n return baseStyle.paragraphFormat.uniqueParagraphFormat.propertiesHash.get(propertyType);\n }\n }\n }\n }\n else {\n var propertyType = WUniqueFormat.getPropertyType(WParagraphFormat.uniqueFormatType, property);\n if (!isNullOrUndefined(this.uniqueParagraphFormat) && this.uniqueParagraphFormat.propertiesHash.containsKey(propertyType)) {\n return this.uniqueParagraphFormat.propertiesHash.get(propertyType);\n }\n }\n return this.getDefaultValue(property);\n };\n WParagraphFormat.prototype.getDefaultValue = function (property) {\n var propertyType = WUniqueFormat.getPropertyType(WParagraphFormat.uniqueFormatType, property);\n var docParagraphFormat = this.documentParagraphFormat();\n // tslint:disable-next-line:max-line-length\n if (!isNullOrUndefined(docParagraphFormat) && !isNullOrUndefined(docParagraphFormat.uniqueParagraphFormat) && docParagraphFormat.uniqueParagraphFormat.propertiesHash.containsKey(propertyType)) {\n return docParagraphFormat.uniqueParagraphFormat.propertiesHash.get(propertyType);\n }\n else {\n return WParagraphFormat.getPropertyDefaultValue(property);\n }\n };\n WParagraphFormat.prototype.documentParagraphFormat = function () {\n var docParagraphFormat;\n if (!isNullOrUndefined(this.ownerBase)) {\n if (!isNullOrUndefined(this.ownerBase.bodyWidget)) {\n docParagraphFormat = this.ownerBase.bodyWidget.page.viewer.paragraphFormat;\n }\n }\n return docParagraphFormat;\n };\n WParagraphFormat.prototype.setPropertyValue = function (property, value) {\n if (isNullOrUndefined(value) || value === '') {\n value = WParagraphFormat.getPropertyDefaultValue(property);\n }\n if (isNullOrUndefined(this.uniqueParagraphFormat)) {\n this.initializeUniqueParagraphFormat(property, value);\n }\n else {\n var propertyType = WUniqueFormat.getPropertyType(this.uniqueParagraphFormat.uniqueFormatType, property);\n if (this.uniqueParagraphFormat.propertiesHash.containsKey(propertyType) &&\n this.uniqueParagraphFormat.propertiesHash.get(propertyType) === value) {\n //Do nothing, since no change in property value and return\n return;\n }\n // tslint:disable-next-line:max-line-length\n this.uniqueParagraphFormat = WParagraphFormat.uniqueParagraphFormats.updateUniqueFormat(this.uniqueParagraphFormat, property, value);\n }\n };\n WParagraphFormat.prototype.initializeUniqueParagraphFormat = function (property, propValue) {\n var uniqueParaFormatTemp = new Dictionary();\n this.addUniqueParaFormat('leftIndent', property, propValue, uniqueParaFormatTemp);\n this.addUniqueParaFormat('rightIndent', property, propValue, uniqueParaFormatTemp);\n this.addUniqueParaFormat('firstLineIndent', property, propValue, uniqueParaFormatTemp);\n this.addUniqueParaFormat('textAlignment', property, propValue, uniqueParaFormatTemp);\n this.addUniqueParaFormat('beforeSpacing', property, propValue, uniqueParaFormatTemp);\n this.addUniqueParaFormat('afterSpacing', property, propValue, uniqueParaFormatTemp);\n this.addUniqueParaFormat('lineSpacing', property, propValue, uniqueParaFormatTemp);\n this.addUniqueParaFormat('lineSpacingType', property, propValue, uniqueParaFormatTemp);\n this.addUniqueParaFormat('outlineLevel', property, propValue, uniqueParaFormatTemp);\n // tslint:disable-next-line:max-line-length\n this.uniqueParagraphFormat = WParagraphFormat.uniqueParagraphFormats.addUniqueFormat(uniqueParaFormatTemp, WParagraphFormat.uniqueFormatType);\n };\n // tslint:disable-next-line:max-line-length\n WParagraphFormat.prototype.addUniqueParaFormat = function (property, modifiedProperty, propValue, uniqueParaFormatTemp) {\n var propertyType;\n propertyType = WUniqueFormat.getPropertyType(WParagraphFormat.uniqueFormatType, property);\n if (property === modifiedProperty) {\n uniqueParaFormatTemp.add(propertyType, propValue);\n }\n };\n WParagraphFormat.getPropertyDefaultValue = function (property) {\n var value = undefined;\n switch (property) {\n case 'leftIndent':\n value = 0;\n break;\n case 'rightIndent':\n value = 0;\n break;\n case 'firstLineIndent':\n value = 0;\n break;\n case 'textAlignment':\n value = 'Left';\n break;\n case 'beforeSpacing':\n value = 0;\n break;\n case 'afterSpacing':\n value = 0;\n break;\n case 'lineSpacing':\n value = 1;\n break;\n case 'lineSpacingType':\n value = 'Multiple';\n break;\n case 'styleName':\n value = 'Normal';\n break;\n case 'outlineLevel':\n value = 'BodyText';\n break;\n }\n return value;\n };\n WParagraphFormat.prototype.clearFormat = function () {\n if (!isNullOrUndefined(this.listFormat)) {\n this.listFormat.clearFormat();\n }\n if (!isNullOrUndefined(this.uniqueParagraphFormat) && this.uniqueParagraphFormat.referenceCount === 0) {\n WParagraphFormat.uniqueParagraphFormats.remove(this.uniqueParagraphFormat);\n }\n this.uniqueParagraphFormat = undefined;\n this.baseStyle = undefined;\n };\n WParagraphFormat.prototype.destroy = function () {\n this.clearFormat();\n if (!isNullOrUndefined(this.listFormat)) {\n this.listFormat.destroy();\n }\n this.listFormat = undefined;\n if (this.tabs !== undefined) {\n for (var i = 0; i < this.tabs.length; i++) {\n this.tabs[i].destroy();\n }\n this.tabs = undefined;\n }\n };\n WParagraphFormat.prototype.copyFormat = function (format) {\n if (!isNullOrUndefined(format)) {\n if (!isNullOrUndefined(format.uniqueParagraphFormat)) {\n this.updateUniqueParagraphFormat(format);\n }\n if (!isNullOrUndefined(format.listFormat)) {\n this.listFormat.copyFormat(format.listFormat);\n }\n if (!isNullOrUndefined(format.baseStyle)) {\n this.baseStyle = format.baseStyle;\n }\n if (!isNullOrUndefined(format.tabs)) {\n for (var i = 0; i < format.tabs.length; i++) {\n this.tabs[i] = format.tabs[i];\n }\n }\n }\n };\n WParagraphFormat.prototype.updateUniqueParagraphFormat = function (format) {\n var hash = undefined;\n if (this.uniqueParagraphFormat) {\n hash = this.uniqueParagraphFormat.mergeProperties(format.uniqueParagraphFormat);\n if (this.uniqueParagraphFormat.referenceCount === 0) {\n WParagraphFormat.uniqueParagraphFormats.remove(this.uniqueParagraphFormat);\n this.uniqueParagraphFormat = undefined;\n }\n }\n this.uniqueParagraphFormat = new WUniqueFormat(WParagraphFormat.uniqueFormatType);\n if (isNullOrUndefined(hash)) {\n hash = this.uniqueParagraphFormat.mergeProperties(format.uniqueParagraphFormat);\n }\n this.uniqueParagraphFormat = WParagraphFormat.uniqueParagraphFormats.addUniqueFormat(hash, WParagraphFormat.uniqueFormatType);\n };\n WParagraphFormat.prototype.cloneFormat = function () {\n var format = new WParagraphFormat(undefined);\n format.uniqueParagraphFormat = this.uniqueParagraphFormat;\n format.baseStyle = this.baseStyle;\n if (isNullOrUndefined(this.listFormat)) {\n format.listFormat = undefined;\n }\n else {\n format.listFormat = new WListFormat();\n format.listFormat.listId = this.listFormat.listId;\n format.listFormat.listLevelNumber = this.listFormat.listLevelNumber;\n }\n return format;\n };\n WParagraphFormat.prototype.hasValue = function (property) {\n if (!isNullOrUndefined(this.uniqueParagraphFormat) && !isNullOrUndefined(this.uniqueParagraphFormat.propertiesHash)) {\n var propertyType = WUniqueFormat.getPropertyType(this.uniqueParagraphFormat.uniqueFormatType, property);\n return this.uniqueParagraphFormat.propertiesHash.containsKey(propertyType);\n }\n return false;\n };\n WParagraphFormat.clear = function () {\n this.uniqueParagraphFormats.clear();\n };\n WParagraphFormat.prototype.ApplyStyle = function (baseStyle) {\n this.baseStyle = baseStyle;\n this.listFormat.ApplyStyle(this.baseStyle);\n };\n /**\n * For internal use\n * @private\n */\n WParagraphFormat.prototype.getValue = function (property) {\n return this.hasValue(property) ? this.getPropertyValue(property) : undefined;\n };\n /**\n * For internal use\n * @private\n */\n WParagraphFormat.prototype.mergeFormat = function (format) {\n if (isNullOrUndefined(this.getValue('leftIndent'))) {\n this.leftIndent = format.getValue('leftIndent');\n }\n if (isNullOrUndefined(this.getValue('rightIndent'))) {\n this.rightIndent = format.getValue('rightIndent');\n }\n if (isNullOrUndefined(this.getValue('firstLineIndent'))) {\n this.firstLineIndent = format.getValue('firstLineIndent');\n }\n if (isNullOrUndefined(this.getValue('beforeSpacing'))) {\n this.beforeSpacing = format.getValue('beforeSpacing');\n }\n if (isNullOrUndefined(this.getValue('afterSpacing'))) {\n this.afterSpacing = format.getValue('afterSpacing');\n }\n if (isNullOrUndefined(this.getValue('lineSpacing'))) {\n this.lineSpacing = format.getValue('lineSpacing');\n }\n if (isNullOrUndefined(this.getValue('lineSpacingType'))) {\n this.lineSpacingType = format.getValue('lineSpacingType');\n }\n if (isNullOrUndefined(this.getValue('textAlignment'))) {\n this.textAlignment = format.getValue('textAlignment');\n }\n if (isNullOrUndefined(this.getValue('outlineLevel'))) {\n this.outlineLevel = format.getValue('outlineLevel');\n }\n if (isNullOrUndefined(this.listFormat)) {\n this.listFormat.mergeFormat(format.listFormat);\n }\n };\n WParagraphFormat.uniqueParagraphFormats = new WUniqueFormats();\n WParagraphFormat.uniqueFormatType = 3;\n return WParagraphFormat;\n}());\nexport { WParagraphFormat };\n","import { ParagraphWidget } from '../viewer/page';\nimport { Dictionary } from '../../base/dictionary';\nimport { WUniqueFormat } from '../../base/unique-format';\nimport { WUniqueFormats } from '../../base/unique-formats';\nimport { WParagraphStyle } from './style';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * @private\n */\nvar WCharacterFormat = /** @class */ (function () {\n function WCharacterFormat(node) {\n this.uniqueCharacterFormat = undefined;\n this.ownerBase = undefined;\n this.baseCharStyle = undefined;\n this.ownerBase = node;\n }\n Object.defineProperty(WCharacterFormat.prototype, \"bold\", {\n get: function () {\n return this.getPropertyValue('bold');\n },\n set: function (value) {\n this.setPropertyValue('bold', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WCharacterFormat.prototype, \"italic\", {\n get: function () {\n return this.getPropertyValue('italic');\n },\n set: function (value) {\n this.setPropertyValue('italic', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WCharacterFormat.prototype, \"fontSize\", {\n get: function () {\n return this.getPropertyValue('fontSize');\n },\n set: function (value) {\n this.setPropertyValue('fontSize', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WCharacterFormat.prototype, \"fontFamily\", {\n get: function () {\n return this.getPropertyValue('fontFamily');\n },\n set: function (value) {\n this.setPropertyValue('fontFamily', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WCharacterFormat.prototype, \"underline\", {\n get: function () {\n return this.getPropertyValue('underline');\n },\n set: function (value) {\n this.setPropertyValue('underline', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WCharacterFormat.prototype, \"strikethrough\", {\n get: function () {\n return this.getPropertyValue('strikethrough');\n },\n set: function (value) {\n this.setPropertyValue('strikethrough', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WCharacterFormat.prototype, \"baselineAlignment\", {\n get: function () {\n return this.getPropertyValue('baselineAlignment');\n },\n set: function (value) {\n this.setPropertyValue('baselineAlignment', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WCharacterFormat.prototype, \"highlightColor\", {\n get: function () {\n return this.getPropertyValue('highlightColor');\n },\n set: function (value) {\n this.setPropertyValue('highlightColor', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WCharacterFormat.prototype, \"fontColor\", {\n get: function () {\n return this.getPropertyValue('fontColor');\n },\n set: function (value) {\n this.setPropertyValue('fontColor', value);\n },\n enumerable: true,\n configurable: true\n });\n WCharacterFormat.prototype.getPropertyValue = function (property) {\n if (!this.hasValue(property)) {\n var charStyleValue = this.checkCharacterStyle(property);\n if (!isNullOrUndefined(charStyleValue)) {\n return charStyleValue;\n }\n else {\n var baseStyleValue = this.checkBaseStyle(property);\n if (!isNullOrUndefined(baseStyleValue)) {\n return baseStyleValue;\n }\n }\n }\n else {\n var propertyType = WUniqueFormat.getPropertyType(WCharacterFormat.uniqueFormatType, property);\n if (!isNullOrUndefined(this.uniqueCharacterFormat) && this.uniqueCharacterFormat.propertiesHash.containsKey(propertyType)) {\n return this.uniqueCharacterFormat.propertiesHash.get(propertyType);\n }\n }\n return this.getDefaultValue(property);\n };\n WCharacterFormat.prototype.getDefaultValue = function (property) {\n var propertyType = WUniqueFormat.getPropertyType(WCharacterFormat.uniqueFormatType, property);\n var docCharacterFormat = this.documentCharacterFormat();\n // tslint:disable-next-line:max-line-length\n if (!isNullOrUndefined(docCharacterFormat) && !isNullOrUndefined(docCharacterFormat.uniqueCharacterFormat) && docCharacterFormat.uniqueCharacterFormat.propertiesHash.containsKey(propertyType)) {\n return docCharacterFormat.uniqueCharacterFormat.propertiesHash.get(propertyType);\n }\n else {\n return WCharacterFormat.getPropertyDefaultValue(property);\n }\n };\n WCharacterFormat.prototype.documentCharacterFormat = function () {\n var docCharacterFormat;\n if (!isNullOrUndefined(this.ownerBase)) {\n if (!isNullOrUndefined(this.ownerBase.paragraph)) {\n docCharacterFormat = this.ownerBase.paragraph.bodyWidget.page.viewer.characterFormat;\n }\n else {\n if (!isNullOrUndefined(this.ownerBase.bodyWidget)) {\n docCharacterFormat = this.ownerBase.bodyWidget.page.viewer.characterFormat;\n }\n }\n }\n return docCharacterFormat;\n };\n WCharacterFormat.prototype.checkBaseStyle = function (property) {\n /* tslint:disable-next-line:no-any */\n var baseStyle;\n if (!isNullOrUndefined(this.ownerBase)) {\n if (!isNullOrUndefined(this.ownerBase.paragraph)) {\n baseStyle = this.ownerBase.paragraph.paragraphFormat.baseStyle;\n }\n else {\n // tslint:disable-next-line:max-line-length\n if ((this.ownerBase instanceof ParagraphWidget) && !isNullOrUndefined(this.ownerBase.paragraphFormat)) {\n baseStyle = this.ownerBase.paragraphFormat.baseStyle;\n }\n else {\n if (!isNullOrUndefined(this.ownerBase instanceof WParagraphStyle)) {\n baseStyle = this.ownerBase.basedOn;\n }\n }\n }\n }\n while (!isNullOrUndefined(baseStyle)) {\n if (baseStyle.characterFormat.hasValue(property)) {\n break;\n }\n else {\n baseStyle = baseStyle.basedOn;\n }\n }\n if (!isNullOrUndefined(baseStyle)) {\n var propertyType = WUniqueFormat.getPropertyType(WCharacterFormat.uniqueFormatType, property);\n return baseStyle.characterFormat.uniqueCharacterFormat.propertiesHash.get(propertyType);\n }\n return undefined;\n };\n WCharacterFormat.prototype.checkCharacterStyle = function (property) {\n /* tslint:disable-next-line:no-any */\n var baseStyle = this.baseCharStyle;\n if (!isNullOrUndefined(baseStyle)) {\n while (!isNullOrUndefined(baseStyle) && baseStyle.name !== 'Default Paragraph Font') {\n var hasKey = baseStyle.characterFormat.hasValue(property);\n if (hasKey) {\n var returnPropertyType = WUniqueFormat.getPropertyType(WCharacterFormat.uniqueFormatType, property);\n return baseStyle.characterFormat.uniqueCharacterFormat.propertiesHash.get(returnPropertyType);\n }\n else {\n baseStyle = baseStyle.basedOn;\n }\n }\n }\n return undefined;\n };\n WCharacterFormat.prototype.setPropertyValue = function (property, value) {\n if (isNullOrUndefined(value) || value === '') {\n value = WCharacterFormat.getPropertyDefaultValue(property);\n }\n if (isNullOrUndefined(this.uniqueCharacterFormat)) {\n this.initializeUniqueCharacterFormat(property, value);\n }\n else {\n var propertyType = WUniqueFormat.getPropertyType(this.uniqueCharacterFormat.uniqueFormatType, property);\n if (this.uniqueCharacterFormat.propertiesHash.containsKey(propertyType) &&\n // tslint:disable-next-line:max-line-length\n this.uniqueCharacterFormat.propertiesHash.get(propertyType) === value) {\n return;\n }\n // tslint:disable-next-line:max-line-length\n this.uniqueCharacterFormat = WCharacterFormat.uniqueCharacterFormats.updateUniqueFormat(this.uniqueCharacterFormat, property, value);\n }\n };\n WCharacterFormat.prototype.initializeUniqueCharacterFormat = function (property, propValue) {\n var uniqueCharFormatTemp = new Dictionary();\n this.addUniqueCharacterFormat('fontColor', property, propValue, uniqueCharFormatTemp);\n this.addUniqueCharacterFormat('fontFamily', property, propValue, uniqueCharFormatTemp);\n this.addUniqueCharacterFormat('fontSize', property, propValue, uniqueCharFormatTemp);\n this.addUniqueCharacterFormat('bold', property, propValue, uniqueCharFormatTemp);\n this.addUniqueCharacterFormat('italic', property, propValue, uniqueCharFormatTemp);\n this.addUniqueCharacterFormat('underline', property, propValue, uniqueCharFormatTemp);\n this.addUniqueCharacterFormat('strikethrough', property, propValue, uniqueCharFormatTemp);\n this.addUniqueCharacterFormat('baselineAlignment', property, propValue, uniqueCharFormatTemp);\n this.addUniqueCharacterFormat('highlightColor', property, propValue, uniqueCharFormatTemp);\n this.addUniqueCharacterFormat('styleName', property, propValue, uniqueCharFormatTemp);\n // tslint:disable-next-line:max-line-length\n this.uniqueCharacterFormat = WCharacterFormat.uniqueCharacterFormats.addUniqueFormat(uniqueCharFormatTemp, WCharacterFormat.uniqueFormatType);\n };\n // tslint:disable-next-line:max-line-length\n WCharacterFormat.prototype.addUniqueCharacterFormat = function (property, modifiedProperty, propValue, uniqueCharFormatTemp) {\n var propertyType;\n propertyType = WUniqueFormat.getPropertyType(WCharacterFormat.uniqueFormatType, property);\n if (property === modifiedProperty) {\n uniqueCharFormatTemp.add(propertyType, propValue);\n }\n };\n WCharacterFormat.getPropertyDefaultValue = function (property) {\n var value = undefined;\n switch (property) {\n case 'bold':\n value = false;\n break;\n case 'italic':\n value = false;\n break;\n case 'fontSize':\n value = 11;\n break;\n case 'underline':\n value = 'None';\n break;\n case 'strikethrough':\n value = 'None';\n break;\n case 'baselineAlignment':\n value = 'Normal';\n break;\n case 'highlightColor':\n value = 'NoColor';\n break;\n case 'fontColor':\n value = '#000000';\n break;\n case 'fontFamily':\n value = 'Calibri';\n break;\n case 'styleName':\n value = 'Default Paragraph Font';\n break;\n }\n return value;\n };\n WCharacterFormat.prototype.isEqualFormat = function (format) {\n return (this.fontSize === format.fontSize\n && this.fontFamily === format.fontFamily\n && this.bold === format.bold\n && this.italic === format.italic\n && this.baselineAlignment === format.baselineAlignment\n && this.underline === format.underline\n && this.fontColor === format.fontColor\n && this.strikethrough === format.strikethrough\n && this.highlightColor === format.highlightColor);\n };\n WCharacterFormat.prototype.isSameFormat = function (format) {\n return this.baseCharStyle === format.baseCharStyle &&\n this.uniqueCharacterFormat === format.uniqueCharacterFormat;\n };\n WCharacterFormat.prototype.cloneFormat = function () {\n var format = new WCharacterFormat(undefined);\n format.uniqueCharacterFormat = this.uniqueCharacterFormat;\n format.baseCharStyle = this.baseCharStyle;\n return format;\n };\n WCharacterFormat.prototype.hasValue = function (property) {\n if (!isNullOrUndefined(this.uniqueCharacterFormat) && !isNullOrUndefined(this.uniqueCharacterFormat.propertiesHash)) {\n var propertyType = WUniqueFormat.getPropertyType(this.uniqueCharacterFormat.uniqueFormatType, property);\n return this.uniqueCharacterFormat.propertiesHash.containsKey(propertyType);\n }\n return false;\n };\n WCharacterFormat.prototype.clearFormat = function () {\n if (!isNullOrUndefined(this.uniqueCharacterFormat) && this.uniqueCharacterFormat.referenceCount === 0) {\n WCharacterFormat.uniqueCharacterFormats.remove(this.uniqueCharacterFormat);\n }\n this.uniqueCharacterFormat = undefined;\n this.baseCharStyle = undefined;\n };\n WCharacterFormat.prototype.destroy = function () {\n this.clearFormat();\n };\n WCharacterFormat.prototype.copyFormat = function (format) {\n if (!isNullOrUndefined(format)) {\n if (!isNullOrUndefined(format.uniqueCharacterFormat) && format.uniqueCharacterFormat.propertiesHash) {\n this.updateUniqueCharacterFormat(format);\n }\n if (!isNullOrUndefined(format.baseCharStyle)) {\n this.baseCharStyle = format.baseCharStyle;\n }\n }\n };\n WCharacterFormat.prototype.updateUniqueCharacterFormat = function (format) {\n var hash = undefined;\n if (this.uniqueCharacterFormat) {\n hash = this.uniqueCharacterFormat.mergeProperties(format.uniqueCharacterFormat);\n if (this.uniqueCharacterFormat.referenceCount === 0) {\n WCharacterFormat.uniqueCharacterFormats.remove(this.uniqueCharacterFormat);\n this.uniqueCharacterFormat = undefined;\n }\n }\n this.uniqueCharacterFormat = new WUniqueFormat(WCharacterFormat.uniqueFormatType);\n if (isNullOrUndefined(hash)) {\n hash = this.uniqueCharacterFormat.mergeProperties(format.uniqueCharacterFormat);\n }\n this.uniqueCharacterFormat = WCharacterFormat.uniqueCharacterFormats.addUniqueFormat(hash, WCharacterFormat.uniqueFormatType);\n };\n WCharacterFormat.clear = function () {\n this.uniqueCharacterFormats.clear();\n };\n WCharacterFormat.prototype.ApplyStyle = function (baseCharStyle) {\n this.baseCharStyle = baseCharStyle;\n };\n /**\n * For internal use\n * @private\n */\n WCharacterFormat.prototype.getValue = function (property) {\n return this.hasValue(property) ? this.getPropertyValue(property) : undefined;\n };\n /**\n * For internal use\n * @private\n */\n WCharacterFormat.prototype.mergeFormat = function (format) {\n if (isNullOrUndefined(this.getValue('bold'))) {\n this.bold = format.getValue('bold');\n }\n if (isNullOrUndefined(this.getValue('italic'))) {\n this.italic = format.getValue('italic');\n }\n if (isNullOrUndefined(this.getValue('fontSize'))) {\n this.fontSize = format.getValue('fontSize');\n }\n if (isNullOrUndefined(this.getValue('fontFamily'))) {\n this.fontFamily = format.getValue('fontFamily');\n }\n if (isNullOrUndefined(this.getValue('underline'))) {\n this.underline = format.getValue('underline');\n }\n if (isNullOrUndefined(this.getValue('strikethrough'))) {\n this.strikethrough = format.getValue('strikethrough');\n }\n if (isNullOrUndefined(this.getValue('baselineAlignment'))) {\n this.baselineAlignment = format.getValue('baselineAlignment');\n }\n if (isNullOrUndefined(this.getValue('highlightColor'))) {\n this.highlightColor = format.getValue('highlightColor');\n }\n if (isNullOrUndefined(this.getValue('fontColor'))) {\n this.fontColor = format.getValue('fontColor');\n }\n };\n WCharacterFormat.uniqueCharacterFormats = new WUniqueFormats();\n WCharacterFormat.uniqueFormatType = 2;\n return WCharacterFormat;\n}());\nexport { WCharacterFormat };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { FieldElementBox } from '../viewer/page';\n/**\n * @private\n */\nvar HelperMethods = /** @class */ (function () {\n function HelperMethods() {\n }\n /**\n * Inserts text at specified index in string.\n * @param {string} spanText\n * @param {number} index\n * @param {string} text\n * @private\n */\n HelperMethods.insert = function (spanText, index, text) {\n if (index >= 0) {\n return [spanText.slice(0, index) + text + spanText.slice(index)].join('');\n }\n else {\n return text + this;\n }\n };\n /**\n * Removes text from specified index in string.\n * @param {string} text\n * @param {number} index\n * @param {number} length\n * @private\n */\n HelperMethods.remove = function (text, index, length) {\n if (index === 0) {\n return text.substring(index + 1, text.length);\n }\n else {\n return text.substring(0, index) + text.substring(index + 1, text.length);\n }\n };\n /**\n * Returns the index of word split character in a string.\n * @param {string} text\n * @param {string[]} wordSplitCharacter\n * @private\n */\n /* tslint:disable:no-any */\n HelperMethods.indexOfAny = function (text, wordSplitCharacter) {\n var index = undefined;\n for (var j = 0; j < wordSplitCharacter.length; j++) {\n var temp = text.indexOf(wordSplitCharacter[j]);\n if (temp !== -1 && isNullOrUndefined(index)) {\n index = temp;\n }\n else if (temp !== -1 && temp < index) {\n index = temp;\n }\n }\n return isNullOrUndefined(index) ? -1 : index;\n };\n /**\n * Returns the last index of word split character in a string.\n * @param {string} text\n * @param {string[]} wordSplitCharacter\n * @private\n */\n HelperMethods.lastIndexOfAny = function (text, wordSplitCharacter) {\n for (var i = text.length - 1; i >= 0; i--) {\n for (var j = 0; j <= wordSplitCharacter.length - 1; j++) {\n if (text[i] === wordSplitCharacter[j]) {\n return i;\n }\n }\n }\n return -1;\n };\n /**\n * Adds css styles to document header.\n * @param {string} css\n * @private\n */\n HelperMethods.addCssStyle = function (css) {\n var style = document.createElement('style');\n if (style.style.cssText) {\n style.style.cssText = css;\n }\n else {\n style.appendChild(document.createTextNode(css));\n }\n document.getElementsByTagName('head')[0].appendChild(style);\n };\n /**\n * Gets highlight color code.\n * @param {HighlightColor} highlightColor\n * @private\n */\n HelperMethods.getHighlightColorCode = function (highlightColor) {\n var color = '#ffffff';\n switch (highlightColor) {\n case 'Yellow':\n color = '#ffff00';\n break;\n case 'BrightGreen':\n color = '#00ff00';\n break;\n case 'Turquoise':\n color = '#00ffff';\n break;\n case 'Pink':\n color = '#ff00ff';\n break;\n case 'Blue':\n color = '#0000ff';\n break;\n case 'Red':\n color = '#ff0000';\n break;\n case 'DarkBlue':\n color = '#000080';\n break;\n case 'Teal':\n color = '#008080';\n break;\n case 'Green':\n color = '#008000';\n break;\n case 'Violet':\n color = '#800080';\n break;\n case 'DarkRed':\n color = '#800000';\n break;\n case 'DarkYellow':\n color = '#808000';\n break;\n case 'Gray50':\n color = '#808080';\n break;\n case 'Gray25':\n color = '#c0c0c0';\n break;\n case 'Black':\n color = '#000000';\n break;\n }\n return color;\n };\n /**\n * Converts point to pixel.\n * @param {number} point\n * @private\n */\n HelperMethods.convertPointToPixel = function (point) {\n var pixel = HelperMethods.round((point * 96 / 72), 5);\n return pixel;\n };\n /**\n * Converts pixel to point.\n * @param {number} pixel\n * @private\n */\n HelperMethods.convertPixelToPoint = function (pixel) {\n var point = HelperMethods.round((pixel * 72 / 96), 5);\n return point;\n };\n /**\n * Return true if field linked\n * @private\n */\n HelperMethods.isLinkedFieldCharacter = function (inline) {\n if (inline instanceof FieldElementBox && inline.fieldType === 0) {\n return !isNullOrUndefined(inline.fieldEnd);\n }\n else if (inline instanceof FieldElementBox && inline.fieldType === 2) {\n return !isNullOrUndefined(inline.fieldBegin) && !isNullOrUndefined(inline.fieldEnd);\n }\n else {\n return !isNullOrUndefined(inline.fieldBegin);\n }\n };\n /**\n * Removes white space in a string.\n * @param {string} text\n * @private\n */\n HelperMethods.removeSpace = function (text) {\n if (!isNullOrUndefined(text) && text.length !== 0) {\n for (var i = 0; i < text.length; i++) {\n if (text.charAt(i) === ' ') {\n //replace the space by empty string in string\n text = text.replace(' ', '');\n }\n }\n }\n return text;\n };\n /**\n * Trims white space at start of the string.\n * @param {string} text\n * @private\n */\n HelperMethods.trimStart = function (text) {\n var i = 0;\n for (i; i < text.length; i++) {\n if (text[i] !== ' ') {\n break;\n }\n }\n return text.substring(i, text.length);\n };\n /**\n * Trims white space at end of the string.\n * @param {string} text\n * @private\n */\n HelperMethods.trimEnd = function (text) {\n var i = text.length - 1;\n for (i; i >= 0; i--) {\n if (text[i] !== ' ') {\n break;\n }\n }\n return text.substring(0, i + 1);\n };\n /**\n * Checks whether string ends with whitespace.\n * @param {string} text\n * @private\n */\n HelperMethods.endsWith = function (text) {\n if (!isNullOrUndefined(text) && text.length !== 0) {\n return text[text.length - 1] === ' ';\n }\n return false;\n };\n /**\n * @private\n * Write Characterformat\n * @param {any} characterFormat\n * @param {boolean} isInline\n * @param {WCharacterFormat} format\n */\n HelperMethods.writeCharacterFormat = function (characterFormat, isInline, format) {\n characterFormat.bold = isInline ? format.bold : format.getValue('bold');\n characterFormat.italic = isInline ? format.italic : format.getValue('italic');\n characterFormat.fontSize = isInline ? format.fontSize : format.getValue('fontSize');\n characterFormat.fontFamily = isInline ? format.fontFamily : format.getValue('fontFamily');\n characterFormat.underline = isInline ? format.underline : format.getValue('underline');\n characterFormat.strikethrough = isInline ? format.strikethrough : format.getValue('strikethrough');\n characterFormat.baselineAlignment = isInline ? format.baselineAlignment : format.getValue('baselineAlignment');\n characterFormat.highlightColor = isInline ? format.highlightColor : format.getValue('highlightColor');\n characterFormat.fontColor = isInline ? format.fontColor : format.getValue('fontColor');\n characterFormat.styleName = !isNullOrUndefined(format.baseCharStyle) ? format.baseCharStyle.name : undefined;\n };\n /* tslint:enable:no-any */\n /**\n * Rounds the values with specified decimal digits.\n * @param {number} value\n * @param {number} decimalDigits\n * @private\n */\n HelperMethods.round = function (value, decimalDigits) {\n var temp = value;\n for (var i = 0; i < decimalDigits; i++) {\n temp = temp * 10;\n }\n temp = Math.round(temp);\n for (var i = 0; i < decimalDigits; i++) {\n temp = temp / 10;\n }\n return temp;\n };\n /**\n * @private\n */\n HelperMethods.wordBefore = '\\\\b';\n /**\n * @private\n */\n HelperMethods.wordAfter = '\\\\b';\n /**\n * @private\n */\n HelperMethods.wordSplitCharacters = [' ', ',', '.', ':', ';', '<', '>', '=',\n '+', '-', '_', '{', '}', '[', ']', '`', '~', '!', '@', '#', '$', '%', '^', '&',\n '*', '(', ')', '\"', '?', '/', '|', '\\\\', '”'];\n return HelperMethods;\n}());\nexport { HelperMethods };\n/**\n * @private\n */\nvar Point = /** @class */ (function () {\n function Point(xPosition, yPosition) {\n this.xIn = 0;\n this.yIn = 0;\n this.xIn = xPosition;\n this.yIn = yPosition;\n }\n Object.defineProperty(Point.prototype, \"x\", {\n /**\n * Gets or sets x value.\n * @private\n */\n get: function () {\n return this.xIn;\n },\n set: function (value) {\n this.xIn = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Point.prototype, \"y\", {\n /**\n * Gets or sets y value.\n * @private\n */\n get: function () {\n return this.yIn;\n },\n set: function (value) {\n this.yIn = value;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @private\n */\n Point.prototype.copy = function (point) {\n this.xIn = point.xIn;\n this.yIn = point.yIn;\n };\n /**\n * Destroys the internal objects maintained.\n * @returns void\n */\n Point.prototype.destroy = function () {\n this.xIn = undefined;\n this.yIn = undefined;\n };\n return Point;\n}());\nexport { Point };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { WParagraphFormat } from './paragraph-format';\nimport { WCharacterFormat } from './character-format';\nimport { HelperMethods } from '../editor/editor-helper';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * @private\n */\nvar WStyle = /** @class */ (function () {\n function WStyle() {\n }\n return WStyle;\n}());\nexport { WStyle };\n/**\n * @private\n */\nvar WParagraphStyle = /** @class */ (function (_super) {\n __extends(WParagraphStyle, _super);\n function WParagraphStyle(node) {\n var _this = _super.call(this) || this;\n _this.ownerBase = node;\n _this.paragraphFormat = new WParagraphFormat(_this);\n _this.characterFormat = new WCharacterFormat(_this);\n return _this;\n }\n WParagraphStyle.prototype.destroy = function () {\n this.characterFormat.destroy();\n this.paragraphFormat.destroy();\n };\n WParagraphStyle.prototype.copyStyle = function (paraStyle) {\n this.name = paraStyle.name;\n this.ownerBase = paraStyle.ownerBase;\n this.type = paraStyle.type;\n this.next = paraStyle.next;\n this.basedOn = paraStyle.basedOn;\n this.link = paraStyle.link;\n this.characterFormat.copyFormat(paraStyle.characterFormat);\n this.paragraphFormat.copyFormat(paraStyle.paragraphFormat);\n };\n return WParagraphStyle;\n}(WStyle));\nexport { WParagraphStyle };\n/**\n * @private\n */\nvar WCharacterStyle = /** @class */ (function (_super) {\n __extends(WCharacterStyle, _super);\n function WCharacterStyle(node) {\n var _this = _super.call(this) || this;\n _this.ownerBase = node;\n _this.characterFormat = new WCharacterFormat(_this);\n return _this;\n }\n WCharacterStyle.prototype.destroy = function () {\n this.characterFormat.destroy();\n };\n WCharacterStyle.prototype.copyStyle = function (charStyle) {\n this.name = charStyle.name;\n this.ownerBase = charStyle.ownerBase;\n this.type = charStyle.type;\n this.next = charStyle.next;\n this.basedOn = charStyle.basedOn;\n this.characterFormat.copyFormat(charStyle.characterFormat);\n };\n return WCharacterStyle;\n}(WStyle));\nexport { WCharacterStyle };\n/**\n * @private\n */\nvar WStyles = /** @class */ (function () {\n function WStyles() {\n this.collection = [];\n /* tslint:enable:no-any */\n }\n Object.defineProperty(WStyles.prototype, \"length\", {\n get: function () {\n return this.collection.length;\n },\n enumerable: true,\n configurable: true\n });\n WStyles.prototype.remove = function (item) {\n this.collection = this.collection.filter(function (a) { return (a.name !== item.name); });\n };\n WStyles.prototype.push = function (item) {\n if (item != null && item !== undefined) {\n this.collection.push(item);\n }\n return 1;\n };\n WStyles.prototype.getItem = function (index) {\n if (this.collection.length > index) {\n return this.collection[index];\n }\n return null;\n };\n WStyles.prototype.indexOf = function (item) {\n return this.collection.indexOf(item);\n };\n WStyles.prototype.contains = function (item) {\n var index = this.collection.indexOf(item);\n return index > -1 && index < this.collection.length;\n };\n WStyles.prototype.clear = function () {\n while (this.collection.length > 0) {\n this.collection.pop();\n }\n };\n WStyles.prototype.findByName = function (name, type) {\n var returnStyle;\n for (var _i = 0, _a = this.collection; _i < _a.length; _i++) {\n var value = _a[_i];\n if (value.name === name) {\n returnStyle = value;\n if (!isNullOrUndefined(type) && value.type === type) {\n returnStyle = value;\n }\n }\n }\n return returnStyle;\n };\n WStyles.prototype.getStyleNames = function (type) {\n return this.collection.filter(function (a) { return (a.type === type); }).map(function (a) { return a.name; });\n };\n /* tslint:disable:no-any */\n WStyles.prototype.getStyles = function (type) {\n var styles = this.collection.filter(function (a) { return (a.type === type); }).map(function (a) { return a; });\n var styleObjects = [];\n for (var _i = 0, styles_1 = styles; _i < styles_1.length; _i++) {\n var style = styles_1[_i];\n var returnStyle = {};\n var returnStyleObject = {};\n returnStyleObject.characterFormat = {};\n HelperMethods.writeCharacterFormat(returnStyleObject.characterFormat, true, style.characterFormat);\n returnStyle.name = style.name;\n returnStyle.style = JSON.stringify(returnStyleObject);\n styleObjects.push(returnStyle);\n }\n return styleObjects;\n };\n return WStyles;\n}());\nexport { WStyles };\n","import { Dictionary } from '../../base/dictionary';\nimport { WUniqueFormat } from '../../base/unique-format';\nimport { WUniqueFormats } from '../../base/unique-formats';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * @private\n */\nvar WBorder = /** @class */ (function () {\n function WBorder(node) {\n this.uniqueBorderFormat = undefined;\n this.ownerBase = undefined;\n this.ownerBase = node;\n }\n Object.defineProperty(WBorder.prototype, \"color\", {\n get: function () {\n return this.getPropertyValue('color');\n },\n set: function (value) {\n this.setPropertyValue('color', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WBorder.prototype, \"lineStyle\", {\n get: function () {\n return this.getPropertyValue('lineStyle');\n },\n set: function (value) {\n this.setPropertyValue('lineStyle', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WBorder.prototype, \"lineWidth\", {\n get: function () {\n return this.getPropertyValue('lineWidth');\n },\n set: function (value) {\n this.setPropertyValue('lineWidth', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WBorder.prototype, \"shadow\", {\n get: function () {\n return this.getPropertyValue('shadow');\n },\n set: function (value) {\n this.setPropertyValue('shadow', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WBorder.prototype, \"space\", {\n get: function () {\n return this.getPropertyValue('space');\n },\n set: function (value) {\n this.setPropertyValue('space', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WBorder.prototype, \"hasNoneStyle\", {\n get: function () {\n return this.getPropertyValue('hasNoneStyle');\n },\n set: function (value) {\n this.setPropertyValue('hasNoneStyle', value);\n },\n enumerable: true,\n configurable: true\n });\n WBorder.prototype.getPropertyValue = function (property) {\n var hasValue = this.hasValue(property);\n if (hasValue) {\n var propertyType = WUniqueFormat.getPropertyType(WBorder.uniqueFormatType, property);\n if (!isNullOrUndefined(this.uniqueBorderFormat) && this.uniqueBorderFormat.propertiesHash.containsKey(propertyType)) {\n return this.uniqueBorderFormat.propertiesHash.get(propertyType);\n }\n }\n return WBorder.getPropertyDefaultValue(property);\n };\n WBorder.prototype.setPropertyValue = function (property, value) {\n if (isNullOrUndefined(value) || value === '') {\n value = WBorder.getPropertyDefaultValue(property);\n }\n if (isNullOrUndefined(this.uniqueBorderFormat)) {\n this.initializeUniqueBorder(property, value);\n }\n else {\n var propertyType = WUniqueFormat.getPropertyType(this.uniqueBorderFormat.uniqueFormatType, property);\n if (this.uniqueBorderFormat.propertiesHash.containsKey(propertyType) &&\n this.uniqueBorderFormat.propertiesHash.get(propertyType) === value) {\n //Do nothing, since no change in property value and return\n return;\n }\n this.uniqueBorderFormat = WBorder.uniqueBorderFormats.updateUniqueFormat(this.uniqueBorderFormat, property, value);\n }\n };\n WBorder.prototype.initializeUniqueBorder = function (property, propValue) {\n var uniqueBorderFormatTemp = new Dictionary();\n this.addUniqueBorderFormat('color', property, propValue, uniqueBorderFormatTemp);\n this.addUniqueBorderFormat('lineStyle', property, propValue, uniqueBorderFormatTemp);\n this.addUniqueBorderFormat('lineWidth', property, propValue, uniqueBorderFormatTemp);\n this.addUniqueBorderFormat('shadow', property, propValue, uniqueBorderFormatTemp);\n this.addUniqueBorderFormat('space', property, propValue, uniqueBorderFormatTemp);\n this.addUniqueBorderFormat('hasNoneStyle', property, propValue, uniqueBorderFormatTemp);\n this.uniqueBorderFormat = WBorder.uniqueBorderFormats.addUniqueFormat(uniqueBorderFormatTemp, WBorder.uniqueFormatType);\n };\n // tslint:disable-next-line:max-line-length\n WBorder.prototype.addUniqueBorderFormat = function (property, modifiedProperty, propValue, uniqueBorderFormatTemp) {\n var propertyType;\n propertyType = WUniqueFormat.getPropertyType(WBorder.uniqueFormatType, property);\n if (property === modifiedProperty) {\n uniqueBorderFormatTemp.add(propertyType, propValue);\n }\n else {\n uniqueBorderFormatTemp.add(propertyType, WBorder.getPropertyDefaultValue(property));\n }\n };\n WBorder.getPropertyDefaultValue = function (property) {\n var value = undefined;\n switch (property) {\n case 'color':\n value = '#000000';\n break;\n case 'lineStyle':\n value = 'None';\n break;\n case 'lineWidth':\n value = 0;\n break;\n case 'shadow':\n value = false;\n break;\n case 'space':\n value = 0;\n break;\n case 'hasNoneStyle':\n value = false;\n break;\n }\n return value;\n };\n WBorder.prototype.getLineWidth = function () {\n /* tslint:disable */\n switch (this.lineStyle) {\n case 'None':\n case 'Cleared':\n return 0;\n case 'Triple':\n case 'Double':\n case 'ThinThickSmallGap':\n case 'ThickThinSmallGap':\n case 'ThinThickThinSmallGap':\n case 'ThinThickMediumGap':\n case 'ThickThinMediumGap':\n case 'ThinThickThinMediumGap':\n case 'ThinThickLargeGap':\n case 'ThickThinLargeGap':\n case 'ThinThickThinLargeGap':\n case 'Emboss3D':\n case 'Engrave3D':\n {\n var lineArray = this.getBorderLineWidthArray(this.lineStyle, this.lineWidth);\n var width = 0;\n for (var i = 0; i < lineArray.length; i++) {\n width += lineArray[i];\n }\n return width;\n }\n case 'Single':\n case 'DashLargeGap':\n case 'DashSmallGap':\n case 'Dot':\n case 'DashDot':\n case 'DashDotDot':\n case 'Thick':\n return this.lineWidth;\n case 'SingleWavy':\n return (this.lineWidth === 1.5 ? 3 : 2.5); //Double wave border only draw with the fixed width\n case 'DoubleWavy':\n return (6.75); //Double wave border only draw with the fixed width\n case 'DashDotStroked':\n case 'Outset':\n return this.lineWidth;\n }\n return this.lineWidth;\n /* tslint:enable */\n };\n WBorder.prototype.getBorderLineWidthArray = function (lineStyle, lineWidth) {\n var borderLineArray = [lineWidth];\n switch (lineStyle) {\n case 'Double':\n borderLineArray = [1, 1, 1];\n break;\n case 'ThinThickSmallGap':\n borderLineArray = [1, -0.75, -0.75];\n break;\n case 'ThickThinSmallGap':\n borderLineArray = [-0.75, -0.75, 1];\n break;\n case 'ThinThickMediumGap':\n borderLineArray = [1, 0.5, 0.5];\n break;\n case 'ThickThinMediumGap':\n borderLineArray = [0.5, 0.5, 1];\n break;\n case 'ThinThickLargeGap':\n borderLineArray = [-1.5, 1, -0.75];\n break;\n case 'ThickThinLargeGap':\n borderLineArray = [-0.75, 1, -1.5];\n break;\n case 'Triple':\n borderLineArray = [1, 1, 1, 1, 1];\n break;\n case 'ThinThickThinSmallGap':\n borderLineArray = [-0.75, -0.75, 1, -0.75, -0.75];\n break;\n case 'ThinThickThinMediumGap':\n borderLineArray = [0.5, 0.5, 1, 0.5, 0.5];\n break;\n case 'ThinThickThinLargeGap':\n borderLineArray = [-0.75, 1, -1.5, 1, -0.75];\n break;\n case 'Emboss3D':\n case 'Engrave3D':\n borderLineArray = [0.25, 0, 1, 0, 0.25];\n break;\n }\n if (borderLineArray.length === 1) {\n return [lineWidth];\n }\n for (var i = 0; i < borderLineArray.length; i++) {\n if (borderLineArray[i] >= 0) {\n borderLineArray[i] = borderLineArray[i] * lineWidth;\n }\n else {\n borderLineArray[i] = Math.abs(borderLineArray[i]);\n }\n }\n return borderLineArray;\n };\n WBorder.prototype.getBorderWeight = function () {\n var weight = 0;\n var numberOfLines = this.getNumberOfLines();\n var borderNumber = this.getBorderNumber();\n switch (this.lineStyle) {\n case 'Single':\n case 'DashSmallGap':\n case 'DashDot':\n case 'DashDotDot':\n case 'Double':\n case 'Triple':\n case 'ThinThickSmallGap':\n case 'ThickThinSmallGap':\n case 'ThinThickThinSmallGap':\n case 'ThinThickMediumGap':\n case 'ThickThinMediumGap':\n case 'ThinThickThinMediumGap':\n case 'ThinThickLargeGap':\n case 'ThickThinLargeGap':\n case 'ThinThickThinLargeGap':\n case 'SingleWavy':\n case 'DoubleWavy':\n case 'DashDotStroked':\n case 'Emboss3D':\n case 'Engrave3D':\n case 'Outset':\n case 'Inset':\n case 'Thick':\n weight = numberOfLines * borderNumber;\n break;\n case 'Dot':\n case 'DashLargeGap':\n weight = 1;\n break;\n }\n return weight;\n };\n WBorder.prototype.getBorderNumber = function () {\n var borderNumber = 0;\n switch (this.lineStyle) {\n case 'Single':\n borderNumber = 1;\n break;\n case 'Thick':\n borderNumber = 2;\n break;\n case 'Double':\n borderNumber = 3;\n break;\n case 'Dot':\n borderNumber = 4;\n break;\n case 'DashLargeGap'://dashed.\n borderNumber = 5;\n break;\n case 'DashDot':\n borderNumber = 6;\n break;\n case 'DashDotDot':\n borderNumber = 7;\n break;\n case 'Triple':\n borderNumber = 8;\n break;\n case 'ThinThickSmallGap':\n borderNumber = 9;\n break;\n case 'ThickThinSmallGap':\n borderNumber = 10;\n break;\n case 'ThinThickThinSmallGap':\n borderNumber = 11;\n break;\n case 'ThinThickMediumGap':\n borderNumber = 12;\n break;\n case 'ThickThinMediumGap':\n borderNumber = 13;\n break;\n case 'ThinThickThinMediumGap':\n borderNumber = 14;\n break;\n case 'ThinThickLargeGap':\n borderNumber = 15;\n break;\n case 'ThickThinLargeGap':\n borderNumber = 16;\n break;\n case 'ThinThickThinLargeGap':\n borderNumber = 17;\n break;\n case 'SingleWavy'://wave.\n borderNumber = 18;\n break;\n case 'DoubleWavy':\n borderNumber = 19;\n break;\n case 'DashSmallGap':\n borderNumber = 20;\n break;\n case 'DashDotStroked':\n borderNumber = 21;\n break;\n case 'Emboss3D':\n borderNumber = 22;\n break;\n case 'Engrave3D':\n borderNumber = 23;\n break;\n case 'Outset':\n borderNumber = 24;\n break;\n case 'Inset':\n borderNumber = 25;\n break;\n }\n return borderNumber;\n };\n WBorder.prototype.getNumberOfLines = function () {\n //ToDo: Need to analyze more on this.\n var value = 0;\n switch (this.lineStyle) {\n case 'Single':\n case 'Dot':\n case 'DashSmallGap':\n case 'DashLargeGap':\n case 'DashDot':\n case 'DashDotDot':\n value = 1;\n break;\n case 'Double':\n value = 3;\n break;\n case 'Triple':\n value = 5;\n break;\n case 'ThinThickSmallGap':\n value = 3;\n break;\n case 'ThickThinSmallGap':\n value = 3;\n break;\n case 'ThinThickThinSmallGap':\n value = 5;\n break;\n case 'ThinThickMediumGap':\n value = 3;\n break;\n case 'ThickThinMediumGap':\n value = 3;\n break;\n case 'ThinThickThinMediumGap':\n value = 5;\n break;\n case 'ThinThickLargeGap':\n value = 3;\n break;\n case 'ThickThinLargeGap':\n value = 3;\n break;\n case 'ThinThickThinLargeGap':\n value = 5;\n break;\n case 'SingleWavy':\n value = 1;\n break;\n case 'DoubleWavy':\n value = 2;\n break;\n case 'DashDotStroked':\n value = 1;\n break;\n case 'Emboss3D':\n case 'Engrave3D':\n value = 3;\n break;\n case 'Outset':\n case 'Inset':\n case 'Thick':\n value = 1;\n break;\n }\n return value;\n };\n WBorder.prototype.getPrecedence = function () {\n var value = 0;\n switch (this.lineStyle) {\n case 'Single':\n value = 1;\n break;\n case 'Thick':\n value = 2;\n break;\n case 'Double':\n value = 3;\n break;\n case 'Dot':\n value = 4;\n break;\n case 'DashLargeGap'://dashed.\n value = 5;\n break;\n case 'DashDot':\n value = 6;\n break;\n case 'DashDotDot':\n value = 7;\n break;\n case 'Triple':\n value = 8;\n break;\n case 'ThinThickSmallGap':\n value = 9;\n break;\n case 'ThickThinSmallGap':\n value = 10;\n break;\n case 'ThinThickThinSmallGap':\n value = 11;\n break;\n case 'ThinThickMediumGap':\n value = 12;\n break;\n case 'ThickThinMediumGap':\n value = 13;\n break;\n case 'ThinThickThinMediumGap':\n value = 14;\n break;\n case 'ThinThickLargeGap':\n value = 15;\n break;\n case 'ThickThinLargeGap':\n value = 16;\n break;\n case 'ThinThickThinLargeGap':\n value = 17;\n break;\n case 'SingleWavy'://wave.\n value = 18;\n break;\n case 'DoubleWavy':\n value = 19;\n break;\n case 'DashSmallGap':\n value = 20;\n break;\n case 'DashDotStroked':\n value = 21;\n break;\n case 'Emboss3D':\n value = 22;\n break;\n case 'Engrave3D':\n value = 23;\n break;\n case 'Outset':\n value = 24;\n break;\n case 'Inset':\n value = 25;\n break;\n }\n return value;\n };\n WBorder.prototype.hasValue = function (property) {\n if (!isNullOrUndefined(this.uniqueBorderFormat)) {\n var propertyType = WUniqueFormat.getPropertyType(this.uniqueBorderFormat.uniqueFormatType, property);\n return this.uniqueBorderFormat.propertiesHash.containsKey(propertyType);\n }\n return false;\n };\n WBorder.prototype.cloneFormat = function () {\n var border = new WBorder(undefined);\n border.color = this.color;\n border.lineStyle = this.lineStyle;\n border.lineWidth = this.lineWidth;\n border.shadow = this.shadow;\n border.space = this.space;\n return border;\n };\n WBorder.prototype.destroy = function () {\n if (!isNullOrUndefined(this.uniqueBorderFormat)) {\n WBorder.uniqueBorderFormats.remove(this.uniqueBorderFormat);\n }\n this.uniqueBorderFormat = undefined;\n };\n WBorder.prototype.copyFormat = function (border) {\n if (!isNullOrUndefined(border) && !isNullOrUndefined(border.uniqueBorderFormat)) {\n this.color = border.color;\n this.lineStyle = border.lineStyle;\n this.lineWidth = border.lineWidth;\n this.shadow = border.shadow;\n this.space = border.space;\n }\n };\n WBorder.clear = function () {\n this.uniqueBorderFormats.clear();\n };\n WBorder.uniqueBorderFormats = new WUniqueFormats();\n WBorder.uniqueFormatType = 1;\n return WBorder;\n}());\nexport { WBorder };\n","import { WBorder } from './border';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * @private\n */\nvar WBorders = /** @class */ (function () {\n function WBorders(node) {\n this.leftIn = new WBorder(this);\n this.rightIn = new WBorder(this);\n this.topIn = new WBorder(this);\n this.bottomIn = new WBorder(this);\n this.horizontalIn = new WBorder(this);\n this.verticalIn = new WBorder(this);\n this.diagonalUpIn = new WBorder(this);\n this.diagonalDownIn = new WBorder(this);\n this.lineWidthIn = 0;\n this.ownerBase = node;\n }\n Object.defineProperty(WBorders.prototype, \"left\", {\n get: function () {\n return this.leftIn;\n },\n set: function (value) {\n this.leftIn = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WBorders.prototype, \"right\", {\n get: function () {\n return this.rightIn;\n },\n set: function (value) {\n this.rightIn = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WBorders.prototype, \"top\", {\n get: function () {\n return this.topIn;\n },\n set: function (value) {\n this.topIn = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WBorders.prototype, \"bottom\", {\n get: function () {\n return this.bottomIn;\n },\n set: function (value) {\n this.bottomIn = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WBorders.prototype, \"horizontal\", {\n get: function () {\n return this.horizontalIn;\n },\n set: function (value) {\n this.horizontalIn = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WBorders.prototype, \"vertical\", {\n get: function () {\n return this.verticalIn;\n },\n set: function (value) {\n this.verticalIn = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WBorders.prototype, \"diagonalUp\", {\n get: function () {\n return this.diagonalUpIn;\n },\n set: function (value) {\n this.diagonalUpIn = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WBorders.prototype, \"diagonalDown\", {\n get: function () {\n return this.diagonalDownIn;\n },\n set: function (value) {\n this.diagonalDownIn = value;\n },\n enumerable: true,\n configurable: true\n });\n WBorders.prototype.destroy = function () {\n if (!isNullOrUndefined(this.left)) {\n this.left.destroy();\n }\n if (!isNullOrUndefined(this.top)) {\n this.top.destroy();\n }\n if (!isNullOrUndefined(this.bottom)) {\n this.bottom.destroy();\n }\n if (!isNullOrUndefined(this.right)) {\n this.right.destroy();\n }\n if (!isNullOrUndefined(this.horizontal)) {\n this.horizontal.destroy();\n }\n if (!isNullOrUndefined(this.vertical)) {\n this.vertical.destroy();\n }\n if (!isNullOrUndefined(this.diagonalDown)) {\n this.diagonalDown.destroy();\n }\n if (!isNullOrUndefined(this.diagonalUp)) {\n this.diagonalUp.destroy();\n }\n this.topIn = undefined;\n this.bottomIn = undefined;\n this.leftIn = undefined;\n this.rightIn = undefined;\n this.horizontalIn = undefined;\n this.verticalIn = undefined;\n this.diagonalDownIn = undefined;\n this.diagonalUpIn = undefined;\n this.lineWidthIn = undefined;\n this.valueIn = undefined;\n };\n WBorders.prototype.cloneFormat = function () {\n var borders = new WBorders(undefined);\n borders.top = isNullOrUndefined(this.top) ? undefined : this.top.cloneFormat();\n borders.bottom = isNullOrUndefined(this.bottom) ? undefined : this.bottom.cloneFormat();\n borders.left = isNullOrUndefined(this.left) ? undefined : this.left.cloneFormat();\n borders.right = isNullOrUndefined(this.right) ? undefined : this.right.cloneFormat();\n borders.horizontal = isNullOrUndefined(this.horizontal) ? undefined : this.horizontal.cloneFormat();\n borders.vertical = isNullOrUndefined(this.vertical) ? undefined : this.vertical.cloneFormat();\n borders.diagonalUp = isNullOrUndefined(this.diagonalUp) ? undefined : this.diagonalUp.cloneFormat();\n borders.diagonalDown = isNullOrUndefined(this.diagonalDown) ? undefined : this.diagonalDown.cloneFormat();\n return borders;\n };\n WBorders.prototype.copyFormat = function (borders) {\n if (!isNullOrUndefined(borders.left) && borders.left instanceof WBorder) {\n this.left = new WBorder(this);\n this.left.copyFormat(borders.left);\n }\n if (!isNullOrUndefined(borders.right) && borders.right instanceof WBorder) {\n this.right = new WBorder(this);\n this.right.copyFormat(borders.right);\n }\n if (!isNullOrUndefined(borders.top) && borders.top instanceof WBorder) {\n this.top = new WBorder(this);\n this.top.copyFormat(borders.top);\n }\n if (!isNullOrUndefined(borders.bottom) && borders.bottom instanceof WBorder) {\n this.bottom = new WBorder(this);\n this.bottom.copyFormat(borders.bottom);\n }\n if (!isNullOrUndefined(borders.horizontal) && borders.horizontal instanceof WBorder) {\n this.horizontal = new WBorder(this);\n this.horizontal.copyFormat(borders.horizontal);\n }\n if (!isNullOrUndefined(borders.vertical) && borders.vertical instanceof WBorder) {\n this.vertical = new WBorder(this);\n this.vertical.copyFormat(borders.vertical);\n }\n if (!isNullOrUndefined(borders.diagonalDown) && borders.diagonalDown instanceof WBorder) {\n this.diagonalDown = new WBorder(this);\n this.diagonalDown.copyFormat(borders.diagonalDown);\n }\n if (!isNullOrUndefined(borders.diagonalUp) && borders.diagonalUp instanceof WBorder) {\n this.diagonalUp = new WBorder(this);\n this.diagonalUp.copyFormat(borders.diagonalUp);\n }\n };\n return WBorders;\n}());\nexport { WBorders };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { WUniqueFormat } from '../../base/unique-format';\nimport { WUniqueFormats } from '../../base/unique-formats';\nimport { Dictionary } from '../../base/dictionary';\n/**\n * @private\n */\nvar WShading = /** @class */ (function () {\n function WShading(node) {\n this.uniqueShadingFormat = undefined;\n this.ownerBase = undefined;\n this.ownerBase = node;\n }\n Object.defineProperty(WShading.prototype, \"backgroundColor\", {\n get: function () {\n return this.getPropertyValue('backgroundColor');\n },\n set: function (value) {\n this.setPropertyValue('backgroundColor', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WShading.prototype, \"foregroundColor\", {\n get: function () {\n return this.getPropertyValue('foregroundColor');\n },\n set: function (value) {\n this.setPropertyValue('foregroundColor', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WShading.prototype, \"textureStyle\", {\n get: function () {\n return this.getPropertyValue('textureStyle');\n },\n set: function (value) {\n this.setPropertyValue('textureStyle', value);\n },\n enumerable: true,\n configurable: true\n });\n WShading.prototype.getPropertyValue = function (property) {\n var hasValue = this.hasValue(property);\n if (hasValue) {\n var propertyType = WUniqueFormat.getPropertyType(WShading.uniqueFormatType, property);\n if (!isNullOrUndefined(this.uniqueShadingFormat) && this.uniqueShadingFormat.propertiesHash.containsKey(propertyType)) {\n return this.uniqueShadingFormat.propertiesHash.get(propertyType);\n }\n }\n return WShading.getPropertyDefaultValue(property);\n };\n WShading.prototype.setPropertyValue = function (property, value) {\n if (isNullOrUndefined(value) || value === '') {\n value = WShading.getPropertyDefaultValue(property);\n }\n if (isNullOrUndefined(this.uniqueShadingFormat)) {\n this.initializeUniqueShading(property, value);\n }\n else {\n var propertyType = WUniqueFormat.getPropertyType(this.uniqueShadingFormat.uniqueFormatType, property);\n if (this.uniqueShadingFormat.propertiesHash.containsKey(propertyType) &&\n this.uniqueShadingFormat.propertiesHash.get(propertyType) === value) {\n //Do nothing, since no change in property value and return\n return;\n }\n this.uniqueShadingFormat = WShading.uniqueShadingFormats.updateUniqueFormat(this.uniqueShadingFormat, property, value);\n }\n };\n WShading.getPropertyDefaultValue = function (property) {\n var value = undefined;\n switch (property) {\n case 'backgroundColor':\n value = '#ffffff';\n break;\n case 'foregroundColor':\n value = 'empty';\n break;\n case 'textureStyle':\n value = 'TextureNone';\n break;\n }\n return value;\n };\n WShading.prototype.initializeUniqueShading = function (property, propValue) {\n var uniqueShadingTemp = new Dictionary();\n this.addUniqueShading('backgroundColor', property, propValue, uniqueShadingTemp);\n this.addUniqueShading('foregroundColor', property, propValue, uniqueShadingTemp);\n this.addUniqueShading('textureStyle', property, propValue, uniqueShadingTemp);\n // tslint:disable-next-line:max-line-length \n this.uniqueShadingFormat = WShading.uniqueShadingFormats.addUniqueFormat(uniqueShadingTemp, WShading.uniqueFormatType);\n };\n // tslint:disable-next-line:max-line-length\n WShading.prototype.addUniqueShading = function (property, modifiedProperty, propValue, uniqueShadingTemp) {\n var propertyType;\n propertyType = WUniqueFormat.getPropertyType(WShading.uniqueFormatType, property);\n if (property === modifiedProperty) {\n uniqueShadingTemp.add(propertyType, propValue);\n }\n else {\n uniqueShadingTemp.add(propertyType, WShading.getPropertyDefaultValue(property));\n }\n };\n WShading.prototype.destroy = function () {\n if (!isNullOrUndefined(this.uniqueShadingFormat)) {\n WShading.uniqueShadingFormats.remove(this.uniqueShadingFormat);\n }\n this.uniqueShadingFormat = undefined;\n };\n WShading.prototype.cloneFormat = function () {\n var shading = new WShading(undefined);\n shading.backgroundColor = this.backgroundColor;\n shading.foregroundColor = this.foregroundColor;\n shading.textureStyle = this.textureStyle;\n return shading;\n };\n WShading.prototype.copyFormat = function (shading) {\n if (!isNullOrUndefined(shading) && !isNullOrUndefined(shading.uniqueShadingFormat)) {\n this.backgroundColor = shading.backgroundColor;\n this.foregroundColor = shading.foregroundColor;\n this.textureStyle = shading.textureStyle;\n }\n };\n WShading.prototype.hasValue = function (property) {\n if (!isNullOrUndefined(this.uniqueShadingFormat)) {\n var propertyType = WUniqueFormat.getPropertyType(this.uniqueShadingFormat.uniqueFormatType, property);\n return this.uniqueShadingFormat.propertiesHash.containsKey(propertyType);\n }\n return false;\n };\n WShading.clear = function () {\n this.uniqueShadingFormats.clear();\n };\n WShading.uniqueShadingFormats = new WUniqueFormats();\n WShading.uniqueFormatType = 5;\n return WShading;\n}());\nexport { WShading };\n","import { Dictionary } from '../../base/dictionary';\nimport { WUniqueFormat } from '../../base/unique-format';\nimport { WUniqueFormats } from '../../base/unique-formats';\nimport { WBorders } from './borders';\nimport { WShading } from './shading';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * @private\n */\nvar WTableFormat = /** @class */ (function () {\n function WTableFormat(owner) {\n this.uniqueTableFormat = undefined;\n this.borders = new WBorders(this);\n this.shading = new WShading(this);\n this.ownerBase = undefined;\n this.ownerBase = owner;\n this.assignTableMarginValue(5.4, 0, 5.4, 0);\n }\n Object.defineProperty(WTableFormat.prototype, \"cellSpacing\", {\n get: function () {\n return this.getPropertyValue('cellSpacing');\n },\n set: function (value) {\n if (value < 0 || value > 264.6) {\n throw new RangeError('The measurement must be between 0 px and 264.6 px.');\n }\n this.setPropertyValue('cellSpacing', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WTableFormat.prototype, \"leftMargin\", {\n get: function () {\n return this.getPropertyValue('leftMargin');\n },\n set: function (value) {\n this.setPropertyValue('leftMargin', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WTableFormat.prototype, \"topMargin\", {\n get: function () {\n return this.getPropertyValue('topMargin');\n },\n set: function (value) {\n this.setPropertyValue('topMargin', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WTableFormat.prototype, \"rightMargin\", {\n get: function () {\n return this.getPropertyValue('rightMargin');\n },\n set: function (value) {\n this.setPropertyValue('rightMargin', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WTableFormat.prototype, \"bottomMargin\", {\n get: function () {\n return this.getPropertyValue('bottomMargin');\n },\n set: function (value) {\n this.setPropertyValue('bottomMargin', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WTableFormat.prototype, \"leftIndent\", {\n get: function () {\n return this.getPropertyValue('leftIndent');\n },\n set: function (value) {\n if (value < -1440 || value > 1440) {\n throw new RangeError('The measurement must be between -1440 px and 1440 px.');\n }\n this.setPropertyValue('leftIndent', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WTableFormat.prototype, \"tableAlignment\", {\n get: function () {\n return this.getPropertyValue('tableAlignment');\n },\n set: function (value) {\n this.setPropertyValue('tableAlignment', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WTableFormat.prototype, \"preferredWidth\", {\n get: function () {\n return this.getPropertyValue('preferredWidth');\n },\n set: function (value) {\n this.setPropertyValue('preferredWidth', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WTableFormat.prototype, \"preferredWidthType\", {\n get: function () {\n return this.getPropertyValue('preferredWidthType');\n },\n set: function (value) {\n this.setPropertyValue('preferredWidthType', value);\n },\n enumerable: true,\n configurable: true\n });\n WTableFormat.prototype.getPropertyValue = function (property) {\n var hasValue = this.hasValue(property);\n if (hasValue) {\n var propertyType = WUniqueFormat.getPropertyType(WTableFormat.uniqueFormatType, property);\n if (!isNullOrUndefined(this.uniqueTableFormat) && this.uniqueTableFormat.propertiesHash.containsKey(propertyType)) {\n return this.uniqueTableFormat.propertiesHash.get(propertyType);\n }\n }\n return WTableFormat.getPropertyDefaultValue(property);\n };\n WTableFormat.prototype.setPropertyValue = function (property, value) {\n if (isNullOrUndefined(value) || value === '') {\n value = WTableFormat.getPropertyDefaultValue(property);\n }\n if (isNullOrUndefined(this.uniqueTableFormat)) {\n this.initializeUniqueTableFormat(property, value);\n }\n else {\n var propertyType = WUniqueFormat.getPropertyType(this.uniqueTableFormat.uniqueFormatType, property);\n if (this.uniqueTableFormat.propertiesHash.containsKey(propertyType) &&\n this.uniqueTableFormat.propertiesHash.get(propertyType) === value) {\n //Do nothing, since no change in property value and return\n return;\n }\n this.uniqueTableFormat = WTableFormat.uniqueTableFormats.updateUniqueFormat(this.uniqueTableFormat, property, value);\n }\n };\n WTableFormat.prototype.initializeUniqueTableFormat = function (property, propValue) {\n var uniqueTableFormatTemp = new Dictionary();\n this.addUniqueTableFormat('cellSpacing', property, propValue, uniqueTableFormatTemp);\n this.addUniqueTableFormat('leftMargin', property, propValue, uniqueTableFormatTemp);\n this.addUniqueTableFormat('topMargin', property, propValue, uniqueTableFormatTemp);\n this.addUniqueTableFormat('bottomMargin', property, propValue, uniqueTableFormatTemp);\n this.addUniqueTableFormat('rightMargin', property, propValue, uniqueTableFormatTemp);\n this.addUniqueTableFormat('leftIndent', property, propValue, uniqueTableFormatTemp);\n this.addUniqueTableFormat('tableAlignment', property, propValue, uniqueTableFormatTemp);\n this.addUniqueTableFormat('preferredWidth', property, propValue, uniqueTableFormatTemp);\n this.addUniqueTableFormat('preferredWidthType', property, propValue, uniqueTableFormatTemp);\n this.uniqueTableFormat = WTableFormat.uniqueTableFormats.addUniqueFormat(uniqueTableFormatTemp, WTableFormat.uniqueFormatType);\n };\n // tslint:disable-next-line:max-line-length\n WTableFormat.prototype.addUniqueTableFormat = function (property, modifiedProperty, propValue, uniqueTableFormatTemp) {\n var propertyType;\n propertyType = WUniqueFormat.getPropertyType(WTableFormat.uniqueFormatType, property);\n if (property === modifiedProperty) {\n uniqueTableFormatTemp.add(propertyType, propValue);\n }\n };\n WTableFormat.getPropertyDefaultValue = function (property) {\n var value = undefined;\n switch (property) {\n case 'cellSpacing':\n value = 0;\n break;\n case 'leftMargin':\n value = 5.4;\n break;\n case 'topMargin':\n value = 0;\n break;\n case 'bottomMargin':\n value = 0;\n break;\n case 'rightMargin':\n value = 5.4;\n break;\n case 'leftIndent':\n value = 0;\n break;\n case 'tableAlignment':\n value = 'Left';\n break;\n case 'preferredWidth':\n value = 0;\n break;\n case 'preferredWidthType':\n value = 'Point';\n break;\n }\n return value;\n };\n WTableFormat.prototype.assignTableMarginValue = function (left, top, right, bottom) {\n this.leftMargin = left;\n this.topMargin = top;\n this.rightMargin = right;\n this.bottomMargin = bottom;\n };\n WTableFormat.prototype.initializeTableBorders = function () {\n this.borders.left.lineStyle = 'Single';\n this.borders.left.lineWidth = 0.5;\n this.borders.right.lineStyle = 'Single';\n this.borders.right.lineWidth = 0.5;\n this.borders.top.lineStyle = 'Single';\n this.borders.top.lineWidth = 0.5;\n this.borders.bottom.lineStyle = 'Single';\n this.borders.bottom.lineWidth = 0.5;\n this.borders.horizontal.lineStyle = 'Single';\n this.borders.horizontal.lineWidth = 0.5;\n this.borders.vertical.lineStyle = 'Single';\n this.borders.vertical.lineWidth = 0.5;\n };\n WTableFormat.prototype.destroy = function () {\n if (!isNullOrUndefined(this.borders)) {\n this.borders.destroy();\n }\n if (!isNullOrUndefined(this.shading)) {\n this.shading.destroy();\n }\n if (!isNullOrUndefined(this.uniqueTableFormat)) {\n WTableFormat.uniqueTableFormats.remove(this.uniqueTableFormat);\n }\n this.uniqueTableFormat = undefined;\n this.borders = undefined;\n this.shading = undefined;\n };\n WTableFormat.prototype.cloneFormat = function () {\n var tableFormat = new WTableFormat(undefined);\n tableFormat.leftIndent = this.leftIndent;\n tableFormat.tableAlignment = this.tableAlignment;\n tableFormat.cellSpacing = this.cellSpacing;\n tableFormat.leftMargin = this.leftMargin;\n tableFormat.rightMargin = this.rightMargin;\n tableFormat.topMargin = this.topMargin;\n tableFormat.bottomMargin = this.bottomMargin;\n tableFormat.preferredWidth = this.preferredWidth;\n tableFormat.preferredWidthType = this.preferredWidthType;\n tableFormat.borders = isNullOrUndefined(this.borders) ? undefined : this.borders.cloneFormat();\n tableFormat.shading = isNullOrUndefined(this.shading) ? undefined : this.shading.cloneFormat();\n return tableFormat;\n };\n WTableFormat.prototype.hasValue = function (property) {\n if (!isNullOrUndefined(this.uniqueTableFormat)) {\n var propertyType = WUniqueFormat.getPropertyType(this.uniqueTableFormat.uniqueFormatType, property);\n return this.uniqueTableFormat.propertiesHash.containsKey(propertyType);\n }\n return false;\n };\n WTableFormat.prototype.copyFormat = function (format) {\n if (!isNullOrUndefined(format)) {\n if (!isNullOrUndefined(format.uniqueTableFormat)) {\n this.cellSpacing = format.cellSpacing;\n this.leftMargin = format.leftMargin;\n this.topMargin = format.topMargin;\n this.rightMargin = format.rightMargin;\n this.bottomMargin = format.bottomMargin;\n this.leftIndent = format.leftIndent;\n this.tableAlignment = format.tableAlignment;\n this.preferredWidth = format.preferredWidth;\n this.preferredWidthType = format.preferredWidthType;\n }\n if (!isNullOrUndefined(format.borders)) {\n this.borders = new WBorders(this);\n this.borders.copyFormat(format.borders);\n }\n if (!isNullOrUndefined(format.shading)) {\n this.shading = new WShading(this);\n this.shading.copyFormat(format.shading);\n }\n }\n };\n WTableFormat.clear = function () {\n this.uniqueTableFormats.clear();\n };\n WTableFormat.uniqueTableFormats = new WUniqueFormats();\n WTableFormat.uniqueFormatType = 8;\n return WTableFormat;\n}());\nexport { WTableFormat };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Dictionary } from '../../base/dictionary';\nimport { WUniqueFormat } from '../../base/unique-format';\nimport { WUniqueFormats } from '../../base/unique-formats';\nimport { WBorders } from './borders';\n/**\n * @private\n */\nvar WRowFormat = /** @class */ (function () {\n function WRowFormat(node) {\n this.uniqueRowFormat = undefined;\n /**\n * @private\n */\n this.borders = new WBorders(this);\n /**\n * @private\n */\n this.ownerBase = undefined;\n /**\n * @private\n */\n this.beforeWidth = 0;\n /**\n * @private\n */\n this.afterWidth = 0;\n this.ownerBase = node;\n }\n Object.defineProperty(WRowFormat.prototype, \"gridBefore\", {\n get: function () {\n return this.getPropertyValue('gridBefore');\n },\n set: function (value) {\n this.setPropertyValue('gridBefore', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WRowFormat.prototype, \"gridBeforeWidth\", {\n get: function () {\n return this.getPropertyValue('gridBeforeWidth');\n },\n set: function (value) {\n this.setPropertyValue('gridBeforeWidth', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WRowFormat.prototype, \"gridBeforeWidthType\", {\n get: function () {\n return this.getPropertyValue('gridBeforeWidthType');\n },\n set: function (value) {\n this.setPropertyValue('gridBeforeWidthType', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WRowFormat.prototype, \"gridAfter\", {\n get: function () {\n return this.getPropertyValue('gridAfter');\n },\n set: function (value) {\n this.setPropertyValue('gridAfter', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WRowFormat.prototype, \"gridAfterWidth\", {\n get: function () {\n return this.getPropertyValue('gridAfterWidth');\n },\n set: function (value) {\n this.setPropertyValue('gridAfterWidth', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WRowFormat.prototype, \"gridAfterWidthType\", {\n get: function () {\n return this.getPropertyValue('gridAfterWidthType');\n },\n set: function (value) {\n this.setPropertyValue('gridAfterWidthType', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WRowFormat.prototype, \"allowBreakAcrossPages\", {\n get: function () {\n return this.getPropertyValue('allowBreakAcrossPages');\n },\n set: function (value) {\n this.setPropertyValue('allowBreakAcrossPages', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WRowFormat.prototype, \"isHeader\", {\n get: function () {\n return this.getPropertyValue('isHeader');\n },\n set: function (value) {\n this.setPropertyValue('isHeader', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WRowFormat.prototype, \"height\", {\n get: function () {\n return this.getPropertyValue('height');\n },\n set: function (value) {\n if (value === 0 && (this.heightType === 'AtLeast' || this.heightType === 'Exactly')) {\n value = 1;\n }\n else if (this.heightType === 'Auto') {\n value = 0;\n }\n this.setPropertyValue('height', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WRowFormat.prototype, \"heightType\", {\n get: function () {\n return this.getPropertyValue('heightType');\n },\n set: function (value) {\n if (value === 'AtLeast' || value === 'Exactly') {\n this.height = 1;\n }\n else {\n this.height = 0;\n }\n this.setPropertyValue('heightType', value);\n },\n enumerable: true,\n configurable: true\n });\n WRowFormat.prototype.getPropertyValue = function (property) {\n var hasValue = this.hasValue(property);\n if (hasValue) {\n var propertyType = WUniqueFormat.getPropertyType(WRowFormat.uniqueFormatType, property);\n if (!isNullOrUndefined(this.uniqueRowFormat) && this.uniqueRowFormat.propertiesHash.containsKey(propertyType)) {\n return this.uniqueRowFormat.propertiesHash.get(propertyType);\n }\n }\n return WRowFormat.getPropertyDefaultValue(property);\n };\n WRowFormat.prototype.setPropertyValue = function (property, value) {\n if (isNullOrUndefined(value) || value === '') {\n value = WRowFormat.getPropertyDefaultValue(property);\n }\n if (isNullOrUndefined(this.uniqueRowFormat)) {\n this.initializeUniqueRowFormat(property, value);\n }\n else {\n var propertyType = WUniqueFormat.getPropertyType(this.uniqueRowFormat.uniqueFormatType, property);\n if (this.uniqueRowFormat.propertiesHash.containsKey(propertyType) &&\n this.uniqueRowFormat.propertiesHash.get(propertyType) === value) {\n //Do nothing, since no change in property value and return\n return;\n }\n this.uniqueRowFormat = WRowFormat.uniqueRowFormats.updateUniqueFormat(this.uniqueRowFormat, property, value);\n }\n };\n WRowFormat.prototype.initializeUniqueRowFormat = function (property, propValue) {\n var uniqueRowFormatTemp = new Dictionary();\n this.addUniqueRowFormat('allowBreakAcrossPages', property, propValue, uniqueRowFormatTemp);\n this.addUniqueRowFormat('isHeader', property, propValue, uniqueRowFormatTemp);\n this.addUniqueRowFormat('height', property, propValue, uniqueRowFormatTemp);\n this.addUniqueRowFormat('heightType', property, propValue, uniqueRowFormatTemp);\n this.addUniqueRowFormat('gridBefore', property, propValue, uniqueRowFormatTemp);\n this.addUniqueRowFormat('gridBeforeWidth', property, propValue, uniqueRowFormatTemp);\n this.addUniqueRowFormat('gridBeforeWidthType', property, propValue, uniqueRowFormatTemp);\n this.addUniqueRowFormat('gridAfter', property, propValue, uniqueRowFormatTemp);\n this.addUniqueRowFormat('gridAfterWidth', property, propValue, uniqueRowFormatTemp);\n this.addUniqueRowFormat('gridgridAfterWidth', property, propValue, uniqueRowFormatTemp);\n this.addUniqueRowFormat('gridBeforeWidthType', property, propValue, uniqueRowFormatTemp);\n this.uniqueRowFormat = WRowFormat.uniqueRowFormats.addUniqueFormat(uniqueRowFormatTemp, WRowFormat.uniqueFormatType);\n };\n // tslint:disable-next-line:max-line-length\n WRowFormat.prototype.addUniqueRowFormat = function (property, modifiedProperty, propValue, uniqueRowFormatTemp) {\n var propertyType;\n propertyType = WUniqueFormat.getPropertyType(WRowFormat.uniqueFormatType, property);\n if (property === modifiedProperty) {\n uniqueRowFormatTemp.add(propertyType, propValue);\n }\n };\n WRowFormat.getPropertyDefaultValue = function (property) {\n var value = undefined;\n switch (property) {\n case 'allowBreakAcrossPages':\n value = true;\n break;\n case 'isHeader':\n value = false;\n break;\n case 'height':\n value = 0;\n break;\n case 'heightType':\n value = 'Auto';\n break;\n case 'gridBefore':\n value = 0;\n break;\n case 'gridBeforeWidth':\n value = 0;\n break;\n case 'gridBeforeWidthType':\n value = 'Point';\n break;\n case 'gridAfter':\n value = 0;\n break;\n case 'gridAfterWidth':\n value = 0;\n break;\n case 'gridAfterWidthType':\n value = 'Point';\n break;\n }\n return value;\n };\n WRowFormat.prototype.cloneFormat = function () {\n var format = new WRowFormat();\n format.allowBreakAcrossPages = this.allowBreakAcrossPages;\n format.heightType = this.heightType;\n format.height = this.height;\n format.isHeader = this.isHeader;\n format.gridBefore = this.gridBefore;\n format.gridBeforeWidth = this.gridBeforeWidth;\n format.gridBeforeWidthType = this.gridBeforeWidthType;\n format.gridAfter = this.gridAfter;\n format.gridAfterWidth = this.gridAfterWidth;\n format.gridAfterWidthType = this.gridAfterWidthType;\n return format;\n };\n WRowFormat.prototype.hasValue = function (property) {\n if (!isNullOrUndefined(this.uniqueRowFormat)) {\n var propertyType = WUniqueFormat.getPropertyType(this.uniqueRowFormat.uniqueFormatType, property);\n return this.uniqueRowFormat.propertiesHash.containsKey(propertyType);\n }\n return false;\n };\n WRowFormat.prototype.copyFormat = function (format) {\n if (!isNullOrUndefined(format)) {\n if (!isNullOrUndefined(format.uniqueRowFormat)) {\n this.allowBreakAcrossPages = format.allowBreakAcrossPages;\n this.isHeader = format.isHeader;\n this.heightType = format.heightType;\n this.height = format.height;\n this.gridBefore = format.gridBefore;\n this.gridBeforeWidth = format.gridBeforeWidth;\n this.gridBeforeWidthType = format.gridBeforeWidthType;\n this.gridAfter = format.gridAfter;\n this.gridAfterWidth = format.gridAfterWidth;\n this.gridAfterWidthType = format.gridAfterWidthType;\n }\n if (!isNullOrUndefined(format.borders)) {\n this.borders = new WBorders(this);\n this.borders.ownerBase = format;\n this.borders.copyFormat(format.borders);\n }\n }\n };\n WRowFormat.prototype.destroy = function () {\n if (!isNullOrUndefined(this.borders)) {\n this.borders.destroy();\n }\n if (!isNullOrUndefined(this.uniqueRowFormat)) {\n WRowFormat.uniqueRowFormats.remove(this.uniqueRowFormat);\n }\n this.beforeWidth = undefined;\n this.afterWidth = undefined;\n this.borders = undefined;\n this.uniqueRowFormat = undefined;\n };\n WRowFormat.clear = function () {\n this.uniqueRowFormats.clear();\n };\n WRowFormat.uniqueRowFormats = new WUniqueFormats();\n WRowFormat.uniqueFormatType = 6;\n return WRowFormat;\n}());\nexport { WRowFormat };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Dictionary } from '../../base/dictionary';\nimport { WUniqueFormat } from '../../base/unique-format';\nimport { WUniqueFormats } from '../../base/unique-formats';\nimport { WBorders } from './borders';\nimport { WShading } from './shading';\n/**\n * @private\n */\nvar WCellFormat = /** @class */ (function () {\n function WCellFormat(node) {\n this.uniqueCellFormat = undefined;\n this.borders = new WBorders(this);\n this.shading = new WShading(this);\n this.ownerBase = node;\n this.borders = new WBorders(this);\n this.shading = new WShading(this);\n }\n Object.defineProperty(WCellFormat.prototype, \"leftMargin\", {\n get: function () {\n return this.getPropertyValue('leftMargin');\n },\n set: function (value) {\n this.setPropertyValue('leftMargin', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WCellFormat.prototype, \"rightMargin\", {\n get: function () {\n return this.getPropertyValue('rightMargin');\n },\n set: function (value) {\n this.setPropertyValue('rightMargin', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WCellFormat.prototype, \"topMargin\", {\n get: function () {\n return this.getPropertyValue('topMargin');\n },\n set: function (value) {\n this.setPropertyValue('topMargin', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WCellFormat.prototype, \"bottomMargin\", {\n get: function () {\n return this.getPropertyValue('bottomMargin');\n },\n set: function (value) {\n this.setPropertyValue('bottomMargin', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WCellFormat.prototype, \"cellWidth\", {\n get: function () {\n return this.getPropertyValue('cellWidth');\n },\n set: function (value) {\n this.setPropertyValue('cellWidth', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WCellFormat.prototype, \"columnSpan\", {\n get: function () {\n return this.getPropertyValue('columnSpan');\n },\n set: function (value) {\n this.setPropertyValue('columnSpan', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WCellFormat.prototype, \"rowSpan\", {\n get: function () {\n return this.getPropertyValue('rowSpan');\n },\n set: function (value) {\n this.setPropertyValue('rowSpan', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WCellFormat.prototype, \"preferredWidth\", {\n get: function () {\n return this.getPropertyValue('preferredWidth');\n },\n set: function (value) {\n this.setPropertyValue('preferredWidth', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WCellFormat.prototype, \"verticalAlignment\", {\n get: function () {\n return this.getPropertyValue('verticalAlignment');\n },\n set: function (value) {\n this.setPropertyValue('verticalAlignment', value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WCellFormat.prototype, \"preferredWidthType\", {\n get: function () {\n return this.getPropertyValue('preferredWidthType');\n },\n set: function (value) {\n this.setPropertyValue('preferredWidthType', value);\n },\n enumerable: true,\n configurable: true\n });\n WCellFormat.prototype.getPropertyValue = function (property) {\n var hasValue = this.hasValue(property);\n if (hasValue) {\n var propertyType = WUniqueFormat.getPropertyType(WCellFormat.uniqueFormatType, property);\n if (!isNullOrUndefined(this.uniqueCellFormat) && this.uniqueCellFormat.propertiesHash.containsKey(propertyType)) {\n return this.uniqueCellFormat.propertiesHash.get(propertyType);\n }\n }\n return WCellFormat.getPropertyDefaultValue(property);\n };\n WCellFormat.prototype.setPropertyValue = function (property, value) {\n if (isNullOrUndefined(value) || value === '') {\n value = WCellFormat.getPropertyDefaultValue(property);\n }\n if (isNullOrUndefined(this.uniqueCellFormat)) {\n this.initializeUniqueCellFormat(property, value);\n }\n else {\n var propertyType = WUniqueFormat.getPropertyType(this.uniqueCellFormat.uniqueFormatType, property);\n if (this.uniqueCellFormat.propertiesHash.containsKey(propertyType) &&\n this.uniqueCellFormat.propertiesHash.get(propertyType) === value) {\n //Do nothing, since no change in property value and return\n return;\n }\n this.uniqueCellFormat = WCellFormat.uniqueCellFormats.updateUniqueFormat(this.uniqueCellFormat, property, value);\n }\n };\n WCellFormat.prototype.initializeUniqueCellFormat = function (property, propValue) {\n var uniqueCellFormatTemp = new Dictionary();\n this.addUniqueCellFormat('leftMargin', property, propValue, uniqueCellFormatTemp);\n this.addUniqueCellFormat('topMargin', property, propValue, uniqueCellFormatTemp);\n this.addUniqueCellFormat('bottomMargin', property, propValue, uniqueCellFormatTemp);\n this.addUniqueCellFormat('rightMargin', property, propValue, uniqueCellFormatTemp);\n this.addUniqueCellFormat('cellWidth', property, propValue, uniqueCellFormatTemp);\n this.addUniqueCellFormat('columnSpan', property, propValue, uniqueCellFormatTemp);\n this.addUniqueCellFormat('rowSpan', property, propValue, uniqueCellFormatTemp);\n this.addUniqueCellFormat('preferredWidth', property, propValue, uniqueCellFormatTemp);\n this.addUniqueCellFormat('verticalAlignment', property, propValue, uniqueCellFormatTemp);\n this.addUniqueCellFormat('preferredWidthType', property, propValue, uniqueCellFormatTemp);\n this.uniqueCellFormat = WCellFormat.uniqueCellFormats.addUniqueFormat(uniqueCellFormatTemp, WCellFormat.uniqueFormatType);\n };\n // tslint:disable-next-line:max-line-length\n WCellFormat.prototype.addUniqueCellFormat = function (property, modifiedProperty, propValue, uniqueCellFormatTemp) {\n var propertyType;\n propertyType = WUniqueFormat.getPropertyType(WCellFormat.uniqueFormatType, property);\n if (property === modifiedProperty) {\n uniqueCellFormatTemp.add(propertyType, propValue);\n }\n };\n WCellFormat.getPropertyDefaultValue = function (property) {\n var value = undefined;\n switch (property) {\n case 'leftMargin':\n value = undefined;\n break;\n case 'topMargin':\n value = undefined;\n break;\n case 'bottomMargin':\n value = undefined;\n break;\n case 'rightMargin':\n value = undefined;\n break;\n case 'cellWidth':\n value = 0;\n break;\n case 'columnSpan':\n value = 1;\n break;\n case 'rowSpan':\n value = 1;\n break;\n case 'preferredWidth':\n value = 0;\n break;\n case 'verticalAlignment':\n value = 'Top';\n break;\n case 'preferredWidthType':\n value = 'Point';\n break;\n }\n return value;\n };\n WCellFormat.prototype.containsMargins = function () {\n return (!isNullOrUndefined(this.leftMargin)\n || !isNullOrUndefined(this.rightMargin)\n || !isNullOrUndefined(this.bottomMargin)\n || !isNullOrUndefined(this.topMargin));\n };\n WCellFormat.prototype.destroy = function () {\n if (!isNullOrUndefined(this.borders)) {\n this.borders.destroy();\n }\n if (!isNullOrUndefined(this.shading)) {\n this.shading.destroy();\n }\n if (!isNullOrUndefined(this.uniqueCellFormat)) {\n WCellFormat.uniqueCellFormats.remove(this.uniqueCellFormat);\n }\n this.uniqueCellFormat = undefined;\n this.borders = undefined;\n this.shading = undefined;\n };\n WCellFormat.prototype.cloneFormat = function () {\n var format = new WCellFormat(undefined);\n format.verticalAlignment = this.verticalAlignment;\n format.leftMargin = this.leftMargin;\n format.rightMargin = this.rightMargin;\n format.topMargin = this.topMargin;\n format.bottomMargin = this.bottomMargin;\n format.preferredWidth = this.preferredWidth;\n format.preferredWidthType = this.preferredWidthType;\n format.cellWidth = this.cellWidth;\n format.borders = isNullOrUndefined(this.borders) ? undefined : this.borders.cloneFormat();\n format.shading = isNullOrUndefined(this.shading) ? undefined : this.shading.cloneFormat();\n return format;\n };\n WCellFormat.prototype.hasValue = function (property) {\n if (!isNullOrUndefined(this.uniqueCellFormat)) {\n var propertyType = WUniqueFormat.getPropertyType(this.uniqueCellFormat.uniqueFormatType, property);\n return this.uniqueCellFormat.propertiesHash.containsKey(propertyType);\n }\n return false;\n };\n WCellFormat.prototype.copyFormat = function (format) {\n if (!isNullOrUndefined(format)) {\n if (!isNullOrUndefined(format.uniqueCellFormat)) {\n this.cellWidth = format.cellWidth;\n this.leftMargin = format.leftMargin;\n this.topMargin = format.topMargin;\n this.rightMargin = format.rightMargin;\n this.bottomMargin = format.bottomMargin;\n this.preferredWidth = format.preferredWidth;\n this.columnSpan = format.columnSpan;\n this.rowSpan = format.rowSpan;\n this.preferredWidthType = format.preferredWidthType;\n this.verticalAlignment = format.verticalAlignment;\n }\n if (!isNullOrUndefined(format.shading)) {\n this.shading = new WShading(this);\n this.shading.copyFormat(format.shading);\n }\n if (!isNullOrUndefined(format.borders)) {\n this.borders = new WBorders(this);\n this.borders.copyFormat(format.borders);\n }\n }\n };\n WCellFormat.clear = function () {\n this.uniqueCellFormats.clear();\n };\n WCellFormat.uniqueCellFormats = new WUniqueFormats();\n WCellFormat.uniqueFormatType = 4;\n return WCellFormat;\n}());\nexport { WCellFormat };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { WTableFormat, WRowFormat, WCellFormat } from '../format/index';\nimport { WParagraphFormat, WCharacterFormat, WBorder, WBorders } from '../format/index';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Dictionary } from '../../base/dictionary';\nimport { HelperMethods } from '../editor/editor-helper';\n/**\n * @private\n */\nvar Rect = /** @class */ (function () {\n function Rect(x, y, width, height) {\n this.x = x;\n this.y = y;\n this.width = width;\n this.height = height;\n }\n Object.defineProperty(Rect.prototype, \"right\", {\n /**\n * @private\n */\n get: function () {\n return this.x + this.width;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Rect.prototype, \"bottom\", {\n /**\n * @private\n */\n get: function () {\n return this.y + this.height;\n },\n enumerable: true,\n configurable: true\n });\n return Rect;\n}());\nexport { Rect };\n/**\n * @private\n */\nvar Margin = /** @class */ (function () {\n function Margin(leftMargin, topMargin, rightMargin, bottomMargin) {\n this.left = leftMargin;\n this.top = topMargin;\n this.right = rightMargin;\n this.bottom = bottomMargin;\n }\n /**\n * @private\n */\n Margin.prototype.clone = function () {\n return new Margin(this.left, this.top, this.right, this.bottom);\n };\n /**\n * @private\n */\n Margin.prototype.destroy = function () {\n this.left = undefined;\n this.right = undefined;\n this.top = undefined;\n this.bottom = undefined;\n };\n return Margin;\n}());\nexport { Margin };\n/**\n * @private\n */\nvar Widget = /** @class */ (function () {\n function Widget() {\n /**\n * @private\n */\n this.childWidgets = [];\n /**\n * @private\n */\n this.x = 0;\n /**\n * @private\n */\n this.y = 0;\n /**\n * @private\n */\n this.width = 0;\n /**\n * @private\n */\n this.height = 0;\n /**\n * @private\n */\n this.index = 0;\n }\n Object.defineProperty(Widget.prototype, \"indexInOwner\", {\n /**\n * @private\n */\n get: function () {\n if (this instanceof BodyWidget && this.page) {\n return this.page.bodyWidgets.indexOf(this);\n }\n else if (this.containerWidget && this.containerWidget.childWidgets) {\n return this.containerWidget.childWidgets.indexOf(this);\n }\n return -1;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Widget.prototype, \"firstChild\", {\n /**\n * @private\n */\n get: function () {\n return this.childWidgets.length > 0 ? this.childWidgets[0] : undefined;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Widget.prototype, \"lastChild\", {\n /**\n * @private\n */\n get: function () {\n return this.childWidgets.length > 0 ?\n this.childWidgets[this.childWidgets.length - 1] : undefined;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Widget.prototype, \"previousWidget\", {\n /**\n * @private\n */\n get: function () {\n var widget = this;\n var index = this.indexInOwner;\n if (widget instanceof BodyWidget) {\n widget = index > 0 ? widget.page.bodyWidgets[index - 1] : undefined;\n }\n else {\n widget = index > 0 ? widget.containerWidget.childWidgets[index - 1] : undefined;\n }\n return widget;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Widget.prototype, \"nextWidget\", {\n /**\n * @private\n */\n get: function () {\n var widget = this;\n var index = this.indexInOwner;\n if (index === -1) {\n return undefined;\n }\n if (widget instanceof BodyWidget) {\n widget = index < widget.page.bodyWidgets.length - 1 ?\n widget.page.bodyWidgets[index + 1] : undefined;\n }\n else {\n widget = index < widget.containerWidget.childWidgets.length - 1 ?\n widget.containerWidget.childWidgets[index + 1] : undefined;\n }\n return widget;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Widget.prototype, \"previousRenderedWidget\", {\n /**\n * @private\n */\n get: function () {\n var widget = this;\n var index = this.indexInOwner;\n if (index < 0) {\n return undefined;\n }\n if (widget instanceof BodyWidget) {\n if (index > 0) {\n widget = widget.page.bodyWidgets[index - 1];\n }\n else {\n var page = widget.page.previousPage;\n widget = page && page.bodyWidgets.length > 0 ? page.bodyWidgets[page.bodyWidgets.length - 1] : undefined;\n }\n }\n else {\n if (index > 0) {\n widget = widget.containerWidget.childWidgets[index - 1];\n }\n else {\n var previousContainer = undefined;\n if (widget.containerWidget instanceof TableCellWidget) {\n previousContainer = widget.containerWidget.getPreviousSplitWidget();\n }\n else if (!(widget.containerWidget instanceof TableRowWidget\n || widget.containerWidget instanceof HeaderFooterWidget)) {\n // Since cells are lay outed left to right, we should not navigate to previous row.\n previousContainer = widget.containerWidget.previousRenderedWidget;\n }\n while (previousContainer && previousContainer.childWidgets.length === 0) {\n previousContainer = previousContainer.previousRenderedWidget;\n if (isNullOrUndefined(previousContainer)) {\n break;\n }\n }\n widget = previousContainer && previousContainer.constructor === widget.containerWidget.constructor ?\n previousContainer.lastChild : undefined;\n }\n }\n return widget;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Widget.prototype, \"nextRenderedWidget\", {\n /**\n * @private\n */\n get: function () {\n var widget = this;\n var index = this.indexInOwner;\n if (index < 0) {\n return undefined;\n }\n if (widget instanceof BodyWidget) {\n if (index < widget.page.bodyWidgets.length - 1) {\n widget = widget.page.bodyWidgets[index + 1];\n }\n else {\n var page = widget.page.nextPage;\n widget = page && page.bodyWidgets.length > 0 ? page.bodyWidgets[0] : undefined;\n }\n }\n else {\n if (index < widget.containerWidget.childWidgets.length - 1) {\n widget = widget.containerWidget.childWidgets[index + 1];\n }\n else {\n var nextContainer = undefined;\n if (widget.containerWidget instanceof TableCellWidget) {\n nextContainer = widget.containerWidget.getNextSplitWidget();\n }\n else if (!(widget.containerWidget instanceof TableRowWidget\n || widget.containerWidget instanceof HeaderFooterWidget)) {\n // Since cells are lay outed left to right, we should not navigate to next row.\n nextContainer = widget.containerWidget.nextRenderedWidget;\n }\n while (nextContainer && nextContainer.childWidgets.length === 0) {\n nextContainer = nextContainer.nextRenderedWidget;\n if (isNullOrUndefined(nextContainer)) {\n break;\n }\n }\n widget = nextContainer && nextContainer.constructor === widget.containerWidget.constructor ?\n nextContainer.firstChild : undefined;\n }\n }\n return widget;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Widget.prototype, \"previousSplitWidget\", {\n /**\n * @private\n */\n get: function () {\n var widget = this;\n if (widget instanceof TableCellWidget) {\n return widget.getPreviousSplitWidget();\n }\n else {\n var previous = widget.previousRenderedWidget;\n if (previous instanceof BlockWidget && widget.index === previous.index) {\n return previous;\n }\n }\n return undefined;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Widget.prototype, \"nextSplitWidget\", {\n /**\n * @private\n */\n get: function () {\n var widget = this;\n if (widget instanceof TableCellWidget) {\n return widget.getNextSplitWidget();\n }\n else {\n var next = widget.nextRenderedWidget;\n if (next instanceof BlockWidget && widget.index === next.index) {\n return next;\n }\n }\n return undefined;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @private\n */\n Widget.prototype.getPreviousSplitWidgets = function () {\n var widgets = [];\n var widget = this.previousSplitWidget;\n while (widget) {\n widgets.unshift(widget);\n widget = widget.previousSplitWidget;\n }\n return widgets;\n };\n /**\n * @private\n */\n Widget.prototype.getSplitWidgets = function () {\n var widgets = this.getPreviousSplitWidgets();\n var widget = this;\n while (widget) {\n widgets.push(widget);\n widget = widget.nextSplitWidget;\n }\n return widgets;\n };\n /**\n * @private\n */\n Widget.prototype.combineWidget = function (viewer) {\n var root = this;\n var widgets = this.getSplitWidgets();\n if (widgets.length > 1) {\n root = widgets.shift();\n while (widgets.length > 0) {\n var splitWidget = widgets.shift();\n root.combine(splitWidget, viewer);\n }\n }\n if (root instanceof TableWidget) {\n root.combineRows(viewer);\n }\n return root;\n };\n Widget.prototype.combine = function (widget, viewer) {\n if (widget.childWidgets.length > 0) {\n var lastChild = this.lastChild;\n if (lastChild instanceof TableWidget) {\n lastChild.combineWidget(viewer);\n }\n else {\n var firstChild = widget.firstChild;\n if (!(widget instanceof TableWidget) && lastChild instanceof Widget && firstChild instanceof Widget &&\n lastChild.index === firstChild.index) {\n lastChild.combine(widget.childWidgets.shift(), viewer);\n }\n }\n this.addWidgets(widget.childWidgets);\n widget.childWidgets = [];\n }\n widget.destroyInternal(viewer);\n };\n /**\n * @private\n */\n Widget.prototype.addWidgets = function (childWidgets) {\n while (childWidgets.length > 0) {\n var widget = childWidgets.shift();\n if (widget instanceof LineWidget && this instanceof ParagraphWidget) {\n widget.paragraph = this;\n this.height += widget.height;\n }\n else if (widget instanceof Widget) {\n var lastChild = this.lastChild;\n widget.containerWidget = this;\n widget.y = lastChild instanceof Widget ? lastChild.y + lastChild.height : this.y;\n this.height += widget.height;\n }\n this.childWidgets.push(widget);\n }\n };\n /**\n * @private\n */\n Widget.prototype.removeChild = function (index) {\n if (index > -1 && index < this.childWidgets.length) {\n this.childWidgets.splice(index, 1);\n }\n };\n /**\n * @private\n */\n Widget.prototype.destroy = function () {\n if (this.childWidgets) {\n while (this.childWidgets.length > 0) {\n var child = this.childWidgets.pop();\n if (child instanceof LineWidget || child instanceof Widget) {\n child.destroy();\n }\n }\n }\n this.childWidgets = undefined;\n if (this.containerWidget) {\n this.containerWidget.removeChild(this.indexInOwner);\n }\n this.containerWidget = undefined;\n // if (this.margin) {\n // this.margin.destroy();\n // }\n this.margin = undefined;\n this.x = undefined;\n this.y = undefined;\n this.width = undefined;\n this.height = undefined;\n this.index = undefined;\n };\n return Widget;\n}());\nexport { Widget };\n/**\n * @private\n */\nvar BlockContainer = /** @class */ (function (_super) {\n __extends(BlockContainer, _super);\n function BlockContainer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n /**\n * @private\n */\n _this.sectionFormatIn = undefined;\n return _this;\n }\n Object.defineProperty(BlockContainer.prototype, \"sectionFormat\", {\n /**\n * @private\n */\n get: function () {\n var container = this;\n if (container instanceof BodyWidget) {\n return container.sectionFormatIn;\n }\n else if (container.page) {\n return container.page.bodyWidgets[0].sectionFormat;\n }\n return undefined;\n },\n /**\n * @private\n */\n set: function (value) {\n if (this instanceof BodyWidget) {\n this.sectionFormatIn = value;\n }\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @private\n */\n BlockContainer.prototype.getHierarchicalIndex = function (hierarchicalIndex) {\n var viewer = undefined;\n var node = this;\n if (node instanceof BodyWidget) {\n hierarchicalIndex = node.index + ';' + hierarchicalIndex;\n }\n else {\n if (node.headerFooterType.indexOf('Header') !== -1) {\n hierarchicalIndex = 'H' + ';' + hierarchicalIndex;\n }\n else {\n hierarchicalIndex = 'F' + ';' + hierarchicalIndex;\n }\n }\n if (!isNullOrUndefined(node.page)) {\n viewer = this.page.viewer;\n var pageIndex = viewer.pages.indexOf(this.page);\n return pageIndex + ';' + hierarchicalIndex;\n }\n return hierarchicalIndex;\n };\n return BlockContainer;\n}(Widget));\nexport { BlockContainer };\n/**\n * @private\n */\nvar BodyWidget = /** @class */ (function (_super) {\n __extends(BodyWidget, _super);\n /**\n * Initialize the constructor of BodyWidget\n */\n function BodyWidget() {\n return _super.call(this) || this;\n }\n /**\n * @private\n */\n BodyWidget.prototype.equals = function (widget) {\n return widget instanceof BodyWidget && widget.sectionFormat === this.sectionFormat;\n };\n /**\n * @private\n */\n BodyWidget.prototype.getHierarchicalIndex = function (hierarchicalIndex) {\n var viewer = undefined;\n var node = this;\n hierarchicalIndex = node.index + ';' + hierarchicalIndex;\n if (!isNullOrUndefined(node.page)) {\n viewer = this.page.viewer;\n var pageIndex = viewer.pages.indexOf(this.page);\n return pageIndex + ';' + hierarchicalIndex;\n }\n return hierarchicalIndex;\n };\n /**\n * @private\n */\n BodyWidget.prototype.getTableCellWidget = function (touchPoint) {\n for (var i = 0; i < this.childWidgets.length; i++) {\n if (this.childWidgets[i].y <= touchPoint.y\n && (this.childWidgets[i].y + this.childWidgets[i].height) >= touchPoint.y) {\n return this.childWidgets[i].getTableCellWidget(touchPoint);\n }\n }\n var tableCellWidget = undefined;\n if (this.childWidgets.length > 0) {\n if (this.childWidgets[0].y <= touchPoint.y) {\n tableCellWidget = this.childWidgets[this.childWidgets.length - 1].getTableCellWidget(touchPoint);\n }\n else {\n tableCellWidget = this.childWidgets[0].getTableCellWidget(touchPoint);\n }\n }\n return tableCellWidget;\n };\n /**\n * @private\n */\n BodyWidget.prototype.destroyInternal = function (viewer) {\n var height = this.height;\n if (!isNullOrUndefined(this.childWidgets)) {\n for (var n = 0; n < this.childWidgets.length; n++) {\n var chilgWidget = this.childWidgets[n];\n if (chilgWidget instanceof ParagraphWidget) {\n chilgWidget.destroyInternal(viewer);\n }\n else {\n chilgWidget.destroyInternal(viewer);\n }\n if (isNullOrUndefined(this.childWidgets)) {\n break;\n }\n n--;\n }\n this.childWidgets = undefined;\n }\n // if (this instanceof HeaderFooterWidget && ((this as HeaderFooterWidget).currentNode ))) {\n // if (((this as HeaderFooterWidget).currentNode as WHeaderFooter).layoutedWidgets )) {\n // let index: number = ((this as HeaderFooterWidget).currentNode as WHeaderFooter).layoutedWidgets.indexOf(this);\n // ((this as HeaderFooterWidget).currentNode as WHeaderFooter).layoutedWidgets.splice(index, 1);\n // }\n // this.currentNode = undefined;\n /* tslint:disable: one-line */\n if (!isNullOrUndefined(this.page)) {\n var index = this.indexInOwner;\n if (this.indexInOwner > -1) {\n this.page.bodyWidgets.splice(index, 1);\n if (this.page.bodyWidgets.length === 0) {\n this.page.destroy();\n // }\n }\n else if ((this instanceof HeaderFooterWidget)\n && this.page.headerWidget === this) {\n this.page.headerWidget = undefined;\n }\n else if ((this instanceof HeaderFooterWidget)\n && this.page.footerWidget === this) {\n this.page.footerWidget = undefined;\n }\n this.page = undefined;\n }\n }\n this.destroy();\n };\n /**\n * @private\n */\n BodyWidget.prototype.destroy = function () {\n // if (this.sectionFormat) {\n // this.sectionFormat.destroy();\n // }\n this.sectionFormat = undefined;\n this.page = undefined;\n _super.prototype.destroy.call(this);\n };\n return BodyWidget;\n}(BlockContainer));\nexport { BodyWidget };\n/**\n * @private\n */\nvar HeaderFooterWidget = /** @class */ (function (_super) {\n __extends(HeaderFooterWidget, _super);\n function HeaderFooterWidget(type) {\n var _this = _super.call(this) || this;\n _this.headerFooterType = type;\n return _this;\n }\n /**\n * @private\n */\n HeaderFooterWidget.prototype.getTableCellWidget = function (point) {\n return undefined;\n };\n /**\n * @private\n */\n HeaderFooterWidget.prototype.equals = function (widget) {\n // Todo: Need to work\n return widget instanceof HeaderFooterWidget\n && widget.containerWidget === this.containerWidget;\n };\n /**\n * @private\n */\n HeaderFooterWidget.prototype.clone = function () {\n var headerFooter = new HeaderFooterWidget(this.headerFooterType);\n for (var i = 0; i < this.childWidgets.length; i++) {\n var block = this.childWidgets[i].clone();\n headerFooter.childWidgets.push(block);\n block.index = i;\n block.containerWidget = headerFooter;\n }\n headerFooter.x = this.x;\n headerFooter.y = this.y;\n headerFooter.height = 0;\n headerFooter.width = 0;\n return headerFooter;\n };\n /**\n * @private\n */\n HeaderFooterWidget.prototype.destroyInternal = function (viewer) {\n this.page = undefined;\n _super.prototype.destroy.call(this);\n };\n return HeaderFooterWidget;\n}(BlockContainer));\nexport { HeaderFooterWidget };\n/**\n * @private\n */\nvar BlockWidget = /** @class */ (function (_super) {\n __extends(BlockWidget, _super);\n function BlockWidget() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n Object.defineProperty(BlockWidget.prototype, \"bodyWidget\", {\n /**\n * @private\n */\n get: function () {\n var widget = this;\n while (widget.containerWidget) {\n if (widget.containerWidget instanceof BlockContainer) {\n return widget.containerWidget;\n }\n widget = widget.containerWidget;\n }\n return undefined;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(BlockWidget.prototype, \"leftIndent\", {\n /**\n * @private\n */\n get: function () {\n var blockAdv = this;\n if (blockAdv instanceof ParagraphWidget && blockAdv.paragraphFormat instanceof WParagraphFormat) {\n return blockAdv.paragraphFormat.leftIndent;\n }\n else if (blockAdv instanceof TableWidget && blockAdv.tableFormat instanceof WTableFormat) {\n return blockAdv.tableFormat.leftIndent;\n }\n return 0;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(BlockWidget.prototype, \"rightIndent\", {\n /**\n * @private\n */\n get: function () {\n var blockAdv = this;\n if (blockAdv instanceof ParagraphWidget && blockAdv.paragraphFormat instanceof WParagraphFormat) {\n return blockAdv.paragraphFormat.rightIndent;\n }\n return 0;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(BlockWidget.prototype, \"isInsideTable\", {\n /**\n * @private\n */\n get: function () {\n return this.containerWidget instanceof TableCellWidget;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(BlockWidget.prototype, \"isInHeaderFooter\", {\n /**\n * @private\n */\n get: function () {\n return this.bodyWidget instanceof HeaderFooterWidget;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(BlockWidget.prototype, \"associatedCell\", {\n /**\n * @private\n */\n get: function () {\n if (this.containerWidget instanceof TableCellWidget) {\n return this.containerWidget;\n }\n return undefined;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @private\n */\n BlockWidget.prototype.getHierarchicalIndex = function (hierarchicalIndex) {\n var node = this;\n hierarchicalIndex = node.containerWidget.childWidgets.indexOf(node) + ';' + hierarchicalIndex;\n if (!isNullOrUndefined(node.containerWidget)) {\n if (node.containerWidget instanceof BlockWidget) {\n return node.containerWidget.getHierarchicalIndex(hierarchicalIndex);\n }\n else if (node.containerWidget instanceof BlockContainer) {\n hierarchicalIndex = node.containerWidget.getHierarchicalIndex(hierarchicalIndex);\n }\n }\n return hierarchicalIndex;\n };\n /**\n * @private\n */\n BlockWidget.prototype.getIndex = function () {\n if (this instanceof ParagraphWidget || this instanceof TableWidget) {\n return this.containerWidget.childWidgets.indexOf(this);\n }\n else if (this instanceof TableRowWidget) {\n return this.ownerTable.childWidgets.indexOf(this);\n }\n else if (this instanceof TableCellWidget) {\n return this.ownerRow.childWidgets.indexOf(this);\n }\n return 0;\n };\n /**\n * @private\n */\n BlockWidget.prototype.getContainerWidth = function () {\n if (this.isInsideTable) {\n return this.associatedCell.cellFormat.cellWidth - (this.associatedCell.margin.left + this.associatedCell.margin.right);\n }\n else {\n var bodyWidget = this.bodyWidget;\n var sectionFormat = bodyWidget.sectionFormat;\n return sectionFormat.pageWidth - (sectionFormat.leftMargin + sectionFormat.rightMargin);\n }\n };\n return BlockWidget;\n}(Widget));\nexport { BlockWidget };\n/**\n * @private\n */\nvar ParagraphWidget = /** @class */ (function (_super) {\n __extends(ParagraphWidget, _super);\n /**\n * Initialize the constructor of ParagraphWidget\n */\n function ParagraphWidget() {\n var _this = _super.call(this) || this;\n _this.paragraphFormat = new WParagraphFormat(_this);\n _this.characterFormat = new WCharacterFormat(_this);\n return _this;\n }\n /**\n * @private\n */\n ParagraphWidget.prototype.equals = function (widget) {\n return widget instanceof ParagraphWidget && widget.paragraphFormat === this.paragraphFormat;\n };\n /**\n * @private\n */\n ParagraphWidget.prototype.isEmpty = function () {\n if (isNullOrUndefined(this.childWidgets) || this.childWidgets.length === 0) {\n return true;\n }\n for (var j = 0; j < this.childWidgets.length; j++) {\n var inlineElement = this.childWidgets[j];\n for (var i = 0; i < inlineElement.children.length; i++) {\n var inline = inlineElement.children[i];\n if (inline.length === 0) {\n continue;\n }\n if (inline instanceof TextElementBox || inline instanceof ImageElementBox || inline instanceof BookmarkElementBox\n || (inline instanceof FieldElementBox && HelperMethods.isLinkedFieldCharacter(inline))) {\n return false;\n }\n }\n }\n return true;\n };\n /**\n * @private\n */\n ParagraphWidget.prototype.getInline = function (offset, indexInInline) {\n var inline = undefined;\n var count = 0;\n var isStarted = false;\n var splittedWidget = this.getSplitWidgets();\n for (var k = 0; k < splittedWidget.length; k++) {\n var widget = splittedWidget[k];\n for (var j = 0; j < widget.childWidgets.length; j++) {\n var line = widget.childWidgets[j];\n for (var i = 0; i < line.children.length; i++) {\n inline = line.children[i];\n if (inline instanceof ListTextElementBox) {\n continue;\n }\n if (!isStarted && (inline instanceof TextElementBox || inline instanceof ImageElementBox\n || inline instanceof BookmarkElementBox || inline instanceof FieldElementBox\n && HelperMethods.isLinkedFieldCharacter(inline))) {\n isStarted = true;\n }\n if (isStarted && offset <= count + inline.length) {\n indexInInline = (offset - count);\n return { 'element': inline, 'index': indexInInline };\n }\n count += inline.length;\n }\n }\n }\n if (offset > count) {\n indexInInline = isNullOrUndefined(inline) ? offset : inline.length;\n }\n return { 'element': inline, 'index': indexInInline };\n };\n /**\n * @private\n */\n ParagraphWidget.prototype.getLength = function () {\n var length = 0;\n for (var j = 0; j < this.childWidgets.length; j++) {\n var line = this.childWidgets[j];\n for (var i = 0; i < line.children.length; i++) {\n var element = line.children[i];\n if (element instanceof ListTextElementBox) {\n continue;\n }\n length += element.length;\n }\n }\n return length;\n };\n /**\n * @private\n */\n ParagraphWidget.prototype.getTableCellWidget = function (point) {\n return undefined;\n };\n /**\n * @private\n */\n ParagraphWidget.prototype.clone = function () {\n var paragraph = new ParagraphWidget();\n paragraph.paragraphFormat.copyFormat(this.paragraphFormat);\n paragraph.characterFormat.copyFormat(this.characterFormat);\n for (var i = 0; i < this.childWidgets.length; i++) {\n var line = this.childWidgets[i];\n var cloneLine = line.clone();\n paragraph.childWidgets.push(cloneLine);\n cloneLine.paragraph = paragraph;\n }\n paragraph.x = this.x;\n paragraph.y = this.y;\n paragraph.height = this.height;\n paragraph.width = this.width;\n return paragraph;\n };\n /**\n * @private\n */\n ParagraphWidget.prototype.destroyInternal = function (viewer) {\n var height = this.height;\n if (!isNullOrUndefined(this.childWidgets)) {\n for (var i = 0; i < this.childWidgets.length; i++) {\n var widget = this.childWidgets[i];\n widget.destroy();\n if (this.childWidgets.length === 1 && isNullOrUndefined(this.childWidgets[0].children)) {\n this.childWidgets = undefined;\n }\n if (isNullOrUndefined(this.childWidgets)) {\n break;\n }\n i--;\n }\n this.childWidgets = undefined;\n }\n if (!isNullOrUndefined(this.containerWidget) && !isNullOrUndefined(this.containerWidget.childWidgets)\n && this.containerWidget.childWidgets.indexOf(this) !== -1) {\n this.containerWidget.childWidgets.splice(this.containerWidget.childWidgets.indexOf(this), 1);\n this.containerWidget.height -= height;\n if ((isNullOrUndefined(this.containerWidget.childWidgets) || this.containerWidget.childWidgets.length === 0)\n && this.containerWidget instanceof BodyWidget) {\n this.containerWidget.destroyInternal(viewer);\n }\n this.containerWidget = undefined;\n }\n this.destroy();\n };\n /**\n * @private\n */\n ParagraphWidget.prototype.destroy = function () {\n // if (this.paragraphFormat) {\n // this.paragraphFormat.destroy();\n // }\n this.paragraphFormat = undefined;\n // if (this.characterFormat) {\n // this.characterFormat.destroy();\n // }\n this.characterFormat = undefined;\n _super.prototype.destroy.call(this);\n };\n return ParagraphWidget;\n}(BlockWidget));\nexport { ParagraphWidget };\n/**\n * @private\n */\nvar TableWidget = /** @class */ (function (_super) {\n __extends(TableWidget, _super);\n function TableWidget() {\n var _this = _super.call(this) || this;\n _this.flags = 0;\n /**\n * @private\n */\n _this.leftMargin = 0;\n /**\n * @private\n */\n _this.topMargin = 0;\n /**\n * @private\n */\n _this.rightMargin = 0;\n /**\n * @private\n */\n _this.bottomMargin = 0;\n _this.margin = new Margin(_this.leftMargin, _this.topMargin, _this.rightMargin, _this.bottomMargin);\n _this.leftBorderWidth = 0;\n _this.rightBorderWidth = 0;\n _this.topBorderWidth = 0;\n _this.bottomBorderWidth = 0;\n _this.tableFormat = new WTableFormat(_this);\n _this.tableHolder = new WTableHolder();\n _this.spannedRowCollection = new Dictionary();\n return _this;\n }\n Object.defineProperty(TableWidget.prototype, \"isGridUpdated\", {\n /**\n * @private\n */\n get: function () {\n return ((this.flags & 0x4) >> 2) !== 0;\n },\n /**\n * @private\n */\n set: function (value) {\n this.flags = ((this.flags & 0xFB) | ((value ? 1 : 0) << 2));\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TableWidget.prototype, \"continueHeader\", {\n /**\n * @private\n */\n get: function () {\n return ((this.flags & 0x2) >> 1) !== 0;\n },\n /**\n * @private\n */\n set: function (value) {\n this.flags = ((this.flags & 0xFD) | ((value ? 1 : 0) << 1));\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TableWidget.prototype, \"header\", {\n /**\n * @private\n */\n get: function () {\n return (this.flags & 0x1) !== 0;\n },\n /**\n * @private\n */\n set: function (value) {\n this.flags = ((this.flags & 0xFE) | (value ? 1 : 0));\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @private\n */\n TableWidget.prototype.equals = function (widget) {\n return widget instanceof TableWidget && widget.tableFormat === this.tableFormat;\n };\n /**\n * @private\n */\n TableWidget.prototype.combineRows = function (viewer) {\n for (var i = 0; i < this.childWidgets.length; i++) {\n var row = this.childWidgets[i];\n if (row.childWidgets.length === 0) {\n row.destroy();\n i--;\n }\n else {\n row.combineCells(viewer);\n }\n }\n };\n /**\n * @private\n */\n TableWidget.prototype.contains = function (tableCell) {\n if (this.equals(tableCell.ownerTable)) {\n return true;\n }\n while (tableCell.ownerTable.isInsideTable) {\n if (this.equals(tableCell.ownerTable)) {\n return true;\n }\n tableCell = tableCell.ownerTable.associatedCell;\n }\n return this.equals(tableCell.ownerTable);\n };\n /**\n * @private\n */\n TableWidget.prototype.getOwnerWidth = function (isBasedOnViewer) {\n var width = this.getContainerWidth();\n // Left and right indents should be neglected.\n width = width - this.leftIndent - this.rightIndent;\n return width >= 0 ? width : 0;\n };\n TableWidget.prototype.getTableWidth = function () {\n var width = 0;\n for (var i = 0; i < this.childWidgets.length; i++) {\n var rowWidth = 0;\n var row = this.childWidgets[i];\n for (var j = 0; j < row.childWidgets.length; j++) {\n rowWidth += row.childWidgets[j].cellFormat.cellWidth;\n }\n if (width < rowWidth) {\n width = rowWidth;\n }\n }\n return width;\n };\n /**\n * @private\n */\n TableWidget.prototype.getTableClientWidth = function (clientWidth) {\n var tableWidth = clientWidth;\n if (this.tableFormat.preferredWidthType === 'Point'\n && this.tableFormat.preferredWidth > 0) {\n tableWidth = this.tableFormat.preferredWidth;\n }\n else {\n if (this.tableFormat.preferredWidthType === 'Percent'\n && this.tableFormat.preferredWidth > 0) {\n tableWidth = tableWidth * this.tableFormat.preferredWidth / 100;\n }\n else {\n //By default, if Table preferred widthType is auto , width is set based on ClientWidth and type is set as 'Point'\n this.tableFormat.preferredWidthType = 'Point';\n this.tableFormat.preferredWidth = tableWidth;\n }\n }\n return tableWidth;\n };\n /**\n * @private\n */\n TableWidget.prototype.getCellWidth = function (preferredWidth, preferredWidthType, containerWidth, cell) {\n var cellWidth = preferredWidth;\n if (preferredWidthType === 'Percent') {\n cellWidth = (preferredWidth * containerWidth) / 100;\n }\n else if (preferredWidthType === 'Point') {\n cellWidth = preferredWidth;\n }\n else if (!isNullOrUndefined(cell)) {\n cellWidth = cell.getMinimumPreferredWidth();\n }\n return cellWidth;\n };\n /**\n * @private\n */\n TableWidget.prototype.fitCellsToClientArea = function (clientWidth) {\n var tableWidth = this.getTableWidth();\n var factor = clientWidth / tableWidth;\n for (var i = 0; i < this.childWidgets.length; i++) {\n var row = this.childWidgets[i];\n row.rowFormat.gridAfterWidth *= factor;\n row.rowFormat.gridBeforeWidth *= factor;\n for (var j = 0; j < row.childWidgets.length; j++) {\n row.childWidgets[j].cellFormat.cellWidth *= factor;\n }\n }\n };\n /**\n * @private\n */\n TableWidget.prototype.getTableCellWidget = function (point) {\n var tableCellWidget = undefined;\n for (var i = 0; i < this.childWidgets.length; i++) {\n if (this.childWidgets[i].y <= point.y\n && (this.childWidgets[i].y + this.childWidgets[i].height) >= point.y) {\n tableCellWidget = this.childWidgets[i].getTableCellWidget(point);\n break;\n }\n }\n return tableCellWidget;\n };\n /**\n * @private\n */\n TableWidget.prototype.calculateGrid = function () {\n var tempGrid = [];\n var spannedCells = [];\n var containerWidth = this.getOwnerWidth(true);\n var tableWidth = this.getTableClientWidth(containerWidth);\n for (var i = 0; i < this.childWidgets.length; i++) {\n var row = this.childWidgets[i];\n var rowFormat = row.rowFormat;\n var cellWidth = 0;\n var columnSpan = row.rowFormat.gridBefore;\n var currOffset = 0;\n if (tempGrid.indexOf(currOffset) < 0) {\n tempGrid.push(currOffset);\n }\n //Converts the row grid before width from point to twips point by 15 factor.\n cellWidth = this.getCellWidth(rowFormat.gridBeforeWidth, rowFormat.gridBeforeWidthType, tableWidth, null);\n currOffset += cellWidth;\n var startOffset = Math.round(currOffset);\n if (tempGrid.indexOf(startOffset) < 0) {\n tempGrid.push(startOffset);\n }\n for (var j = 0; j < row.childWidgets.length; j++) {\n var cell = row.childWidgets[j];\n for (var k = 0; k < spannedCells.length; k++) {\n if (spannedCells[k].columnIndex < columnSpan) {\n continue;\n }\n var rowSpan = spannedCells[k].cellFormat.rowSpan;\n var removeSpannedCell = true;\n if (spannedCells[k].columnIndex > columnSpan) {\n {\n removeSpannedCell = false;\n // If the cell is the last cell in the row and the row has grid after value..\n if (j === row.childWidgets.length - 1 && row.rowFormat.gridAfter > 0) {\n // tslint:disable-next-line:max-line-length\n cellWidth = this.getCellWidth(spannedCells[k].cellFormat.preferredWidth, spannedCells[k].cellFormat.preferredWidthType, tableWidth, null);\n currOffset += cellWidth;\n }\n }\n }\n else {\n // If the table gird alone calculted then column index of the rowspanned cell will be directly taken. \n // If the gird calculation is done from the UI level opearations such as resizing then table holder \n // will have the columns at that time we can get the column index from the table holder.\n //Converts the cell width from point to twips point by 15 factor.\n // tslint:disable-next-line:max-line-length\n cellWidth = this.getCellWidth(spannedCells[k].cellFormat.preferredWidth, spannedCells[k].cellFormat.preferredWidthType, tableWidth, null);\n currOffset += cellWidth;\n }\n if (!removeSpannedCell && j === row.childWidgets.length - 1) {\n removeSpannedCell = true;\n }\n if (removeSpannedCell && i - spannedCells[k].ownerRow.rowIndex === rowSpan - 1) {\n spannedCells.splice(k, 1);\n k--;\n }\n }\n // At the start of each row, we will process the row spanned cells to get the start column index.\n // To calculate grid properly, we need the items in the spanned cells collection in the order of their column index\n if (cell.cellFormat.rowSpan > 1) {\n if (spannedCells.length === 0 || spannedCells[spannedCells.length - 1].columnIndex <= columnSpan) {\n spannedCells.push(cell);\n }\n else {\n for (var m = spannedCells.length; m > 0; m--) {\n if (spannedCells[m - 1].columnIndex > columnSpan) {\n spannedCells.splice(m - 1, 0, cell);\n }\n }\n }\n }\n columnSpan += cell.cellFormat.columnSpan;\n //Converts the cell width from pixel to twips point by 15 factor.\n cellWidth = this.getCellWidth(cell.cellFormat.preferredWidth, cell.cellFormat.preferredWidthType, tableWidth, null);\n currOffset += cellWidth;\n var offset = Math.round(currOffset);\n if (tempGrid.indexOf(offset) < 0) {\n tempGrid.push(offset);\n }\n if (j === row.childWidgets.length - 1 && rowFormat.gridAfter > 0) {\n cellWidth = this.getCellWidth(rowFormat.gridAfterWidth, 'Point', tableWidth, null);\n currOffset += cellWidth;\n if (tempGrid.indexOf(Math.round(currOffset)) < 0) {\n tempGrid.push(Math.round(currOffset));\n }\n columnSpan += rowFormat.gridAfter;\n }\n }\n }\n tempGrid.sort(function (a, b) { return a - b; });\n if (tempGrid.length - 1 !== this.tableHolder.columns.length) {\n this.updateColumnSpans(tempGrid, tableWidth);\n }\n };\n TableWidget.prototype.updateColumnSpans = function (tempGrid, containerWidth) {\n for (var i = 0; i < this.childWidgets.length; i++) {\n var row = this.childWidgets[i];\n if (row.rowFormat.gridBeforeWidth >= 0) {\n row.rowFormat.gridBefore = row.getGridCount(tempGrid, -1, containerWidth);\n }\n for (var j = 0; j < row.childWidgets.length; j++) {\n var cell = row.childWidgets[j];\n var columnSpan = row.getGridCount(tempGrid, cell.getIndex(), containerWidth);\n if (columnSpan > 0 && cell.cellFormat.columnSpan !== columnSpan) {\n cell.cellFormat.columnSpan = columnSpan;\n }\n }\n if (row.rowFormat.gridAfterWidth >= 0) {\n row.rowFormat.gridAfter = row.getGridCount(tempGrid, row.childWidgets.length, containerWidth);\n }\n }\n };\n /**\n * @private\n */\n TableWidget.prototype.buildTableColumns = function () {\n if (this.isGridUpdated) {\n return;\n }\n // Clear existing columns in order to start creating columns freshly.\n this.tableHolder.resetColumns();\n var containerWidth = 0;\n var tableWidth = 0;\n var rowSpannedCells = [];\n var isAutoWidth = this.tableFormat.preferredWidthType === 'Auto';\n // For continuous layout, window width should be considered. \n // If preferred width exceeds this limit, it can take upto maximum of 2112 pixels (1584 points will be assigned by Microsoft Word).\n containerWidth = this.getOwnerWidth(true);\n tableWidth = this.getTableClientWidth(containerWidth);\n for (var i = 0; i < this.childWidgets.length; i++) {\n var row = this.childWidgets[i];\n var rowFormat = row.rowFormat;\n var columnSpan = 0;\n var cellWidth = 0;\n var offset = 0;\n if (rowFormat.gridBefore > 0) {\n cellWidth = this.getCellWidth(rowFormat.gridBeforeWidth, row.rowFormat.gridAfterWidthType, tableWidth, null);\n this.tableHolder.addColumns(columnSpan, columnSpan = rowFormat.gridBefore, cellWidth, cellWidth, offset = cellWidth);\n }\n for (var j = 0; j < row.childWidgets.length; j++) {\n var cell = row.childWidgets[j];\n if (rowSpannedCells.length === 0) {\n cell.columnIndex = columnSpan;\n }\n for (var k = 0; k < rowSpannedCells.length; k++) {\n var rowSpannedCell = rowSpannedCells[k];\n if (rowSpannedCell.columnIndex < columnSpan) {\n cell.columnIndex = columnSpan;\n continue;\n }\n var rowSpan = 1;\n var removeSpannedCell = true;\n rowSpan = rowSpannedCell.cellFormat.rowSpan;\n if (rowSpannedCell.columnIndex > columnSpan) {\n cell.columnIndex = columnSpan;\n removeSpannedCell = false;\n }\n else {\n // tslint:disable-next-line:max-line-length\n cellWidth = this.getCellWidth(rowSpannedCell.cellFormat.preferredWidth, rowSpannedCell.cellFormat.preferredWidthType, tableWidth, rowSpannedCell);\n var minWidth_1 = rowSpannedCell.getMinimumPreferredWidth();\n // If the table gird alone calculted then column index of the rowspanned cell will be directly taken. \n // tslint:disable-next-line:max-line-length\n // If the gird calculation is done from the UI level opearations such as resizing then table holder will have the columns at that time we can get the column index from the table holder.\n // tslint:disable-next-line:max-line-length\n if (this.tableHolder.columns.length > 0) {\n this.tableHolder.addColumns(columnSpan, columnSpan = this.tableHolder.columns.indexOf(rowSpannedCell.ownerColumn) + rowSpannedCell.cellFormat.columnSpan, cellWidth, minWidth_1, offset += cellWidth);\n cell.columnIndex = columnSpan;\n }\n else {\n // tslint:disable-next-line:max-line-length\n this.tableHolder.addColumns(columnSpan, columnSpan = rowSpannedCell.columnIndex + rowSpannedCell.cellFormat.columnSpan, cellWidth, minWidth_1, offset += cellWidth);\n cell.columnIndex = columnSpan;\n }\n }\n if (!removeSpannedCell && j === row.childWidgets.length - 1) {\n removeSpannedCell = true;\n }\n if (removeSpannedCell && i - rowSpannedCell.ownerRow.rowIndex === rowSpan - 1) {\n rowSpannedCells.splice(k, 1);\n k--;\n }\n }\n // At the start of each row, we will process the row spanned cells to get the start column index.\n // To calculate grid properly, we need the items in the spanned cells collection in the order of their column index\n if (cell.cellFormat.rowSpan > 1) {\n if (rowSpannedCells.length === 0 || rowSpannedCells[rowSpannedCells.length - 1].columnIndex <= columnSpan) {\n rowSpannedCells.push(cell);\n }\n else {\n for (var m = rowSpannedCells.length; m > 0; m--) {\n if (rowSpannedCells[m - 1].columnIndex > columnSpan) {\n rowSpannedCells.splice(m - 1, 0, cell);\n }\n }\n }\n }\n cellWidth = this.getCellWidth(cell.cellFormat.preferredWidth, cell.cellFormat.preferredWidthType, tableWidth, cell);\n var minWidth = cell.getMinimumPreferredWidth();\n this.tableHolder.addColumns(columnSpan, columnSpan += cell.cellFormat.columnSpan, cellWidth, minWidth, offset += cellWidth);\n if (j === row.childWidgets.length - 1 && rowFormat.gridAfterWidth > 0) {\n cellWidth = this.getCellWidth(rowFormat.gridAfterWidth, 'Point', tableWidth, null);\n this.tableHolder.addColumns(columnSpan, columnSpan += rowFormat.gridAfter, cellWidth, cellWidth, offset += cellWidth);\n }\n }\n }\n this.tableHolder.validateColumnWidths();\n // Fits the column width based on preferred width. i.e. Fixed layout.\n this.tableHolder.fitColumns(containerWidth, tableWidth, isAutoWidth);\n //Sets the width to cells\n this.setWidthToCells(tableWidth, isAutoWidth);\n };\n /**\n * @private\n */\n TableWidget.prototype.setWidthToCells = function (tableWidth, isAutoWidth) {\n for (var i = 0; i < this.childWidgets.length; i++) {\n var rw = this.childWidgets[i];\n var rowFormat = rw.rowFormat;\n if (rowFormat.gridBefore > 0) {\n rowFormat.beforeWidth = this.tableHolder.getCellWidth(0, rowFormat.gridBefore, tableWidth, isAutoWidth);\n }\n for (var j = 0; j < rw.childWidgets.length; j++) {\n var cell = rw.childWidgets[j];\n // tslint:disable-next-line:max-line-length\n cell.cellFormat.cellWidth = this.tableHolder.getCellWidth(cell.columnIndex, cell.cellFormat.columnSpan, tableWidth, isAutoWidth);\n //By default, if cell preferred widthType is auto , width set based on table width and type is changed to 'Point'\n if (cell.cellFormat.preferredWidthType !== 'Percent') {\n cell.cellFormat.preferredWidth = cell.cellFormat.cellWidth;\n cell.cellFormat.preferredWidthType = 'Point';\n }\n }\n if (rowFormat.gridAfter > 0) {\n rowFormat.afterWidth = this.tableHolder.getCellWidth(0, rowFormat.gridAfter, tableWidth, isAutoWidth);\n }\n }\n };\n /**\n * @private\n */\n TableWidget.prototype.getMaxRowWidth = function (clientWidth) {\n var width = 0;\n for (var i = 0; i < this.childWidgets.length; i++) {\n var row = this.childWidgets[i];\n var rowWidth = 0;\n for (var j = 0; j < row.childWidgets.length; j++) {\n var cell = row.childWidgets[j];\n rowWidth += this.getCellWidth(cell.cellFormat.preferredWidth, cell.cellFormat.preferredWidthType, clientWidth, cell);\n }\n if (width < rowWidth) {\n width = rowWidth;\n }\n }\n return width;\n };\n /**\n * @private\n */\n TableWidget.prototype.updateWidth = function (dragValue) {\n var totalPreferredWidth = this.tableHolder.getTotalWidth();\n var containerWidth = this.getTableClientWidth(this.getOwnerWidth(true));\n if (containerWidth <= totalPreferredWidth) {\n if (this.tableFormat.preferredWidthType === 'Auto') {\n this.tableFormat.preferredWidthType = 'Point';\n }\n }\n if (this.tableFormat.preferredWidthType !== 'Auto') {\n if (this.tableFormat.preferredWidthType === 'Point') {\n this.tableFormat.preferredWidth = this.getMaxRowWidth(containerWidth);\n }\n // else\n // { //ToDo:Need to anzlyze more the Percentage calculation for table width.\n // let value:number = ConvertPixelToPercent(GetMaxRowWidth(containerWidth));\n // this.tableFormat.preferredWidth = value;\n // }\n }\n };\n /**\n * @private\n */\n TableWidget.prototype.convertPointToPercent = function (tablePreferredWidth, ownerWidth) {\n var value = 0;\n value = (tablePreferredWidth / ownerWidth) * 100;\n value = Math.round(value);\n return value < 100 ? value : 100; // The value should be lesser than or equal to 100%;\n };\n /**\n * @private\n */\n TableWidget.prototype.clone = function () {\n var table = new TableWidget();\n table.tableHolder = this.tableHolder.clone();\n table.tableFormat.copyFormat(this.tableFormat);\n for (var i = 0; i < this.childWidgets.length; i++) {\n var row = this.childWidgets[i].clone();\n table.childWidgets.push(row);\n row.containerWidget = table;\n row.index = i;\n }\n table.x = this.x;\n table.y = this.y;\n table.height = this.height;\n table.width = this.width;\n table.containerWidget = this.containerWidget;\n return table;\n };\n /**\n * @private\n */\n TableWidget.getTableOf = function (node) {\n if (node instanceof WBorders) {\n var row = TableRowWidget.getRowOf(node);\n if (!isNullOrUndefined(row)) {\n return row.ownerTable;\n }\n else if (node.ownerBase instanceof WTableFormat && node.ownerBase.ownerBase instanceof TableWidget) {\n return node.ownerBase.ownerBase;\n }\n else {\n return undefined;\n }\n }\n return undefined;\n };\n /**\n * @private\n */\n TableWidget.prototype.fitChildToClientArea = function () {\n var clientWidth = this.getContainerWidth();\n if (Math.round(clientWidth) < Math.round(this.getTableWidth())) {\n this.fitCellsToClientArea(clientWidth);\n }\n for (var i = 0; i < this.childWidgets.length; i++) {\n var row = this.childWidgets[i];\n for (var j = 0; j < row.childWidgets.length; j++) {\n var cell = row.childWidgets[j];\n for (var k = 0; k < cell.childWidgets.length; k++) {\n if (cell.childWidgets[k] instanceof TableWidget) {\n cell.childWidgets[k].fitChildToClientArea();\n }\n }\n }\n }\n };\n /**\n * @private\n */\n TableWidget.prototype.getColumnCellsForSelection = function (startCell, endCell) {\n var cells = [];\n var start = startCell.columnIndex;\n var end = endCell.columnIndex + endCell.cellFormat.columnSpan;\n for (var i = 0; i < this.childWidgets.length; i++) {\n var row = this.childWidgets[i];\n for (var j = 0; j < row.childWidgets.length; j++) {\n var cell = row.childWidgets[j];\n var columnIndex = cell.columnIndex;\n var columnSpan = cell.cellFormat.columnSpan;\n if ((columnIndex + columnSpan > start && columnIndex + columnSpan < end) || (columnIndex > start && columnIndex < end)) {\n if (cells.indexOf(cell) < 0) {\n cells.push(cell);\n }\n }\n else if ((columnIndex > start && columnIndex < end && columnIndex + columnSpan < end)\n || (columnIndex < start && columnIndex + columnSpan > end)) {\n if (cells.indexOf(cell) < 0) {\n cells.push(cell);\n }\n }\n else if (columnIndex === start || columnIndex + columnSpan === end) {\n if (cells.indexOf(cell) < 0) {\n cells.push(cell);\n }\n }\n }\n }\n return cells;\n };\n /**\n * Splits width equally for all the cells.\n * @param tableClientWidth\n * @private\n */\n TableWidget.prototype.splitWidthToTableCells = function (tableClientWidth) {\n for (var row = 0; row < this.childWidgets.length; row++) {\n this.childWidgets[row].splitWidthToRowCells(tableClientWidth);\n }\n };\n /**\n * @private\n */\n TableWidget.prototype.insertTableRowsInternal = function (tableRows, startIndex) {\n for (var i = 0; i < tableRows.length; i++) {\n var row = tableRows[i];\n row.containerWidget = this;\n this.childWidgets.splice(startIndex, 0, tableRows[i]);\n }\n this.updateRowIndex(startIndex);\n this.isGridUpdated = false;\n this.buildTableColumns();\n this.isGridUpdated = true;\n };\n /**\n * @private\n */\n TableWidget.prototype.updateRowIndex = function (startIndex) {\n for (var i = startIndex; i < this.childWidgets.length; i++) {\n var row = this.childWidgets[i];\n row.index = i;\n for (var j = 0; j < row.childWidgets.length; j++) {\n row.childWidgets[j].index = j;\n row.childWidgets[j].rowIndex = row.rowIndex;\n }\n startIndex++;\n }\n };\n /**\n * @private\n */\n TableWidget.prototype.destroyInternal = function (viewer) {\n var height = this.height;\n if (!isNullOrUndefined(this.childWidgets)) {\n for (var j = 0; j < this.childWidgets.length; j++) {\n var widget = undefined;\n var childWidget = this.childWidgets[j];\n widget = childWidget;\n if (!isNullOrUndefined(widget)) {\n widget.destroyInternal(viewer);\n }\n if (isNullOrUndefined(this.childWidgets)) {\n break;\n }\n j--;\n }\n this.childWidgets = undefined;\n }\n if (!isNullOrUndefined(this.containerWidget)) {\n if (!isNullOrUndefined(this.containerWidget.childWidgets)) {\n if (this.containerWidget.childWidgets.indexOf(this) !== -1) {\n this.containerWidget.childWidgets.splice(this.containerWidget.childWidgets.indexOf(this), 1);\n }\n this.containerWidget.height -= height;\n if ((isNullOrUndefined(this.containerWidget.childWidgets) || this.containerWidget.childWidgets.length === 0)\n && this.containerWidget instanceof BodyWidget) {\n this.containerWidget.destroyInternal(viewer);\n }\n }\n this.containerWidget = undefined;\n }\n this.destroy();\n };\n /**\n * @private\n */\n TableWidget.prototype.destroy = function () {\n // if (this.tableFormat) {\n // this.tableFormat.destroy();\n // }\n this.tableFormat = undefined;\n // if (this.spannedRowCollection) {\n // this.spannedRowCollection.destroy();\n // }\n this.spannedRowCollection = undefined;\n this.tableGrids = [];\n this.tableGrids = undefined;\n // if (this.tableHolder) {\n // this.tableHolder.destroy();\n // }\n this.tableHolder = undefined;\n this.flags = undefined;\n this.leftMargin = undefined;\n this.topMargin = undefined;\n this.rightMargin = undefined;\n this.bottomMargin = undefined;\n this.headerHeight = undefined;\n this.description = undefined;\n this.title = undefined;\n _super.prototype.destroy.call(this);\n };\n return TableWidget;\n}(BlockWidget));\nexport { TableWidget };\n/**\n * @private\n */\nvar TableRowWidget = /** @class */ (function (_super) {\n __extends(TableRowWidget, _super);\n function TableRowWidget() {\n var _this = _super.call(this) || this;\n /**\n * @private\n */\n _this.spannedRowCollection = [];\n _this.topBorderWidth = 0;\n _this.bottomBorderWidth = 0;\n _this.rowFormat = new WRowFormat(_this);\n return _this;\n }\n Object.defineProperty(TableRowWidget.prototype, \"rowIndex\", {\n /**\n * @private\n */\n get: function () {\n if (this.containerWidget) {\n return this.containerWidget.childWidgets.indexOf(this);\n }\n return -1;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TableRowWidget.prototype, \"ownerTable\", {\n /**\n * @private\n */\n get: function () {\n if (this.containerWidget instanceof TableWidget) {\n return this.containerWidget;\n }\n return undefined;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TableRowWidget.prototype, \"nextRow\", {\n /**\n * @private\n */\n get: function () {\n var index = this.indexInOwner;\n if (index > -1 && index < this.ownerTable.childWidgets.length - 1) {\n return this.ownerTable.childWidgets[index + 1];\n }\n return undefined;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @private\n */\n TableRowWidget.prototype.equals = function (widget) {\n return widget instanceof TableRowWidget && widget.rowFormat === this.rowFormat;\n };\n /**\n * @private\n */\n TableRowWidget.prototype.combineCells = function (viewer) {\n for (var i = 0; i < this.childWidgets.length; i++) {\n var cell = this.childWidgets[i];\n cell.combineWidget(viewer);\n if (cell.cellFormat.rowSpan === 1) {\n var cellHeight = cell.height + cell.margin.top + cell.margin.bottom;\n if ((this.height - this.ownerTable.tableFormat.cellSpacing) < cell.height) {\n this.height = this.ownerTable.tableFormat.cellSpacing + cell.height;\n }\n }\n }\n };\n /**\n * @private\n */\n TableRowWidget.getRowOf = function (node) {\n if (node instanceof WBorders) {\n var cell = TableCellWidget.getCellOf(node);\n if (!isNullOrUndefined(cell)) {\n return cell.ownerRow;\n }\n else if (node.ownerBase instanceof WRowFormat && node.ownerBase.ownerBase instanceof TableRowWidget) {\n return node.ownerBase.ownerBase;\n }\n else {\n return undefined;\n }\n }\n return undefined;\n };\n /**\n * @private\n */\n TableRowWidget.prototype.getCell = function (rowIndex, cellIndex) {\n for (var i = 0; i < this.childWidgets.length; i++) {\n var cell = this.childWidgets[i];\n if (cell.rowIndex === rowIndex && cell.index === cellIndex) {\n return cell;\n }\n }\n return undefined;\n };\n /**\n * @private\n */\n TableRowWidget.prototype.splitWidthToRowCells = function (tableClientWidth) {\n var cells = this.childWidgets;\n var cellWidth = tableClientWidth / cells.length;\n for (var cell = 0; cell < cells.length; cell++) {\n cells[cell].cellFormat.preferredWidth = cellWidth;\n }\n };\n /**\n * @private\n */\n TableRowWidget.prototype.getGridCount = function (tableGrid, index, containerWidth) {\n var prevOffset = 0;\n var width = 0;\n var ownerTable = this.ownerTable;\n var rowFormat = this.rowFormat;\n if (index === -1) {\n width = ownerTable.getCellWidth(rowFormat.gridBeforeWidth, rowFormat.gridBeforeWidthType, containerWidth, null);\n }\n else {\n prevOffset += ownerTable.getCellWidth(rowFormat.gridBeforeWidth, rowFormat.gridBeforeWidthType, containerWidth, null);\n if (index > 0) {\n prevOffset += this.getCellOffset(index, containerWidth);\n }\n if (index < this.childWidgets.length) {\n var cell = this.childWidgets[index];\n width = ownerTable.getCellWidth(cell.cellFormat.preferredWidth, cell.cellFormat.preferredWidthType, containerWidth, null);\n }\n else {\n width = ownerTable.getCellWidth(rowFormat.gridAfterWidth, rowFormat.gridAfterWidthType, containerWidth, null);\n }\n }\n var gridStartIndex = this.getOffsetIndex(tableGrid, prevOffset);\n var gridEndIndex = this.getOffsetIndex(tableGrid, prevOffset + width);\n return gridEndIndex - gridStartIndex;\n };\n TableRowWidget.prototype.getOffsetIndex = function (tableGrid, offset) {\n offset = Math.round(offset);\n var index = 0;\n if (tableGrid.indexOf(offset) >= 0) {\n index = tableGrid.indexOf(offset);\n }\n else {\n for (var i = 0; i < tableGrid.length; i++) {\n if (tableGrid[i] > offset) {\n return i;\n }\n }\n index = tableGrid.length - 1;\n }\n return index;\n };\n TableRowWidget.prototype.getCellOffset = function (index, containerWidth) {\n var prevOffset = 0;\n var ownerTable = this.ownerTable;\n for (var i = 0; i < this.childWidgets.length; i++) {\n var cellFormat = this.childWidgets[i].cellFormat;\n if (i === index) {\n break;\n }\n prevOffset += ownerTable.getCellWidth(cellFormat.preferredWidth, cellFormat.preferredWidthType, containerWidth, null);\n }\n return prevOffset;\n };\n /**\n * @private\n */\n TableRowWidget.prototype.updateRowBySpannedCells = function () {\n var rowSpannedCells = this.getPreviousRowSpannedCells();\n var currentRowIndex = this.rowIndex;\n for (var i = 0; i < rowSpannedCells.length; i++) {\n var spannedCell = rowSpannedCells[i];\n var rowSpanEnd = spannedCell.ownerRow.rowIndex + spannedCell.cellFormat.rowSpan - 1;\n // If current row is row span end or includes spanned cells. then, decrease the rowspan\n if (rowSpanEnd >= currentRowIndex) {\n spannedCell.cellFormat.rowSpan -= 1;\n }\n }\n };\n /**\n * @private\n */\n TableRowWidget.prototype.getPreviousRowSpannedCells = function (include) {\n var rowSpannedCells = [];\n var row = include ? this : this.previousWidget;\n while (!isNullOrUndefined(row)) {\n for (var i = 0; i < row.childWidgets.length; i++) {\n var cell = row.childWidgets[i];\n if (cell.cellFormat.rowSpan > 1) {\n rowSpannedCells.splice(0, 0, cell);\n }\n }\n row = row.previousWidget;\n }\n return rowSpannedCells;\n };\n /**\n * @private\n */\n TableRowWidget.prototype.getTableCellWidget = function (point) {\n for (var i = 0; i < this.childWidgets.length; i++) {\n var x = Math.round(this.childWidgets[i].x);\n if (x - this.childWidgets[i].margin.left - 1 <= point.x\n && (x + this.childWidgets[i].width) >= point.x) {\n return this.childWidgets[i];\n }\n else if (i === this.childWidgets.length - 1\n && (this.childWidgets[i].x + this.childWidgets[i].width) + 1 <= point.x) {\n return this.childWidgets[i];\n }\n }\n var cellWidget = undefined;\n if (this.childWidgets.length > 0) {\n if (this.childWidgets[0].x <= point.x) {\n cellWidget = this.childWidgets[this.childWidgets.length - 1].getTableCellWidget(point);\n }\n else {\n cellWidget = this.childWidgets[0].getTableCellWidget(point);\n }\n }\n return cellWidget;\n };\n /**\n * @private\n */\n TableRowWidget.prototype.destroyInternal = function (viewer) {\n var height = this.height;\n if (!isNullOrUndefined(this.childWidgets)) {\n for (var i = 0; i < this.childWidgets.length; i++) {\n var widget = this.childWidgets[i];\n widget.destroyInternal(viewer);\n if (isNullOrUndefined(this.childWidgets)) {\n break;\n }\n i--;\n }\n this.childWidgets = undefined;\n }\n if (!isNullOrUndefined(this.containerWidget)) {\n if (!isNullOrUndefined(this.containerWidget.childWidgets)) {\n this.containerWidget.childWidgets.splice(this.containerWidget.childWidgets.indexOf(this), 1);\n if ((isNullOrUndefined(this.containerWidget.childWidgets) || this.containerWidget.childWidgets.length === 0)\n && this.containerWidget instanceof TableWidget) {\n this.containerWidget.destroyInternal(viewer);\n }\n else if (this.containerWidget.containerWidget instanceof BodyWidget) {\n this.containerWidget.containerWidget.height -= height;\n }\n this.containerWidget.height -= height;\n }\n }\n this.destroy();\n };\n /**\n * @private\n */\n TableRowWidget.prototype.clone = function () {\n var row = new TableRowWidget();\n row.rowFormat.copyFormat(this.rowFormat);\n row.topBorderWidth = this.topBorderWidth;\n row.bottomBorderWidth = this.bottomBorderWidth;\n for (var i = 0; i < this.childWidgets.length; i++) {\n var cell = this.childWidgets[i].clone();\n row.childWidgets.push(cell);\n cell.containerWidget = row;\n cell.index = i;\n cell.rowIndex = this.rowIndex;\n }\n row.x = this.x;\n row.y = this.y;\n row.height = this.height;\n row.width = this.width;\n return row;\n };\n /**\n * @private\n */\n TableRowWidget.prototype.destroy = function () {\n // if (this.rowFormat) {\n // this.rowFormat.destroy();\n // }\n this.rowFormat = undefined;\n this.rowFormat = undefined;\n this.spannedRowCollection = [];\n this.spannedRowCollection = undefined;\n this.topBorderWidth = undefined;\n this.bottomBorderWidth = undefined;\n _super.prototype.destroy.call(this);\n };\n return TableRowWidget;\n}(BlockWidget));\nexport { TableRowWidget };\n/**\n * @private\n */\nvar TableCellWidget = /** @class */ (function (_super) {\n __extends(TableCellWidget, _super);\n function TableCellWidget() {\n var _this = _super.call(this) || this;\n /**\n * @private\n */\n _this.rowIndex = -1;\n _this.margin = new Margin(_this.leftMargin, _this.topMargin, _this.rightMargin, _this.bottomMargin);\n _this.leftBorderWidth = 0;\n _this.rightBorderWidth = 0;\n _this.cellFormat = new WCellFormat(_this);\n return _this;\n }\n Object.defineProperty(TableCellWidget.prototype, \"ownerColumn\", {\n /**\n * @private\n */\n get: function () {\n return this.ownerTable.tableHolder.columns[this.columnIndex];\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TableCellWidget.prototype, \"leftMargin\", {\n /**\n * @private\n */\n get: function () {\n if (this.cellFormat && this.cellFormat.containsMargins()) {\n return this.cellFormat.leftMargin;\n }\n else if (!isNullOrUndefined(this.ownerTable) && !isNullOrUndefined(this.ownerTable.tableFormat)) {\n return this.ownerTable.tableFormat.leftMargin;\n }\n else {\n return 0;\n }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TableCellWidget.prototype, \"topMargin\", {\n /**\n * @private\n */\n get: function () {\n if (this.cellFormat && this.cellFormat.containsMargins()) {\n return this.cellFormat.topMargin;\n }\n else if (!isNullOrUndefined(this.ownerTable) && !isNullOrUndefined(this.ownerTable.tableFormat)) {\n return this.ownerTable.tableFormat.topMargin;\n }\n else {\n return 0;\n }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TableCellWidget.prototype, \"rightMargin\", {\n /**\n * @private\n */\n get: function () {\n if (this.cellFormat && this.cellFormat.containsMargins()) {\n return this.cellFormat.rightMargin;\n }\n else if (!isNullOrUndefined(this.ownerTable) && !isNullOrUndefined(this.ownerTable.tableFormat)) {\n return this.ownerTable.tableFormat.rightMargin;\n }\n else {\n return 0;\n }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TableCellWidget.prototype, \"bottomMargin\", {\n /**\n * @private\n */\n get: function () {\n if (this.cellFormat && this.cellFormat.containsMargins()) {\n return this.cellFormat.bottomMargin;\n }\n else if (!isNullOrUndefined(this.ownerTable) && !isNullOrUndefined(this.ownerTable.tableFormat)) {\n return this.ownerTable.tableFormat.bottomMargin;\n }\n else {\n return 0;\n }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TableCellWidget.prototype, \"cellIndex\", {\n /**\n * @private\n */\n get: function () {\n if (this.ownerRow) {\n return this.ownerRow.childWidgets.indexOf(this);\n }\n return -1;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TableCellWidget.prototype, \"ownerTable\", {\n /**\n * @private\n */\n get: function () {\n if (this.containerWidget instanceof TableRowWidget) {\n return this.containerWidget.ownerTable;\n }\n return undefined;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TableCellWidget.prototype, \"ownerRow\", {\n /**\n * @private\n */\n get: function () {\n return this.containerWidget;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @private\n */\n TableCellWidget.prototype.equals = function (widget) {\n return widget instanceof TableCellWidget && widget.cellFormat === this.cellFormat;\n };\n /**\n * @private\n */\n TableCellWidget.prototype.getContainerTable = function () {\n var table = this.ownerTable;\n while (table instanceof TableWidget && table.associatedCell instanceof TableCellWidget) {\n table = table.associatedCell.getContainerTable();\n }\n return table;\n };\n /**\n * @private\n */\n TableCellWidget.prototype.getPreviousSplitWidget = function () {\n if (this.containerWidget instanceof TableRowWidget) {\n var row = this.containerWidget;\n do {\n row = row.previousRenderedWidget;\n if (isNullOrUndefined(row) || row.index < this.rowIndex) {\n break;\n }\n var previousCell = row.getCell(this.rowIndex, this.index);\n if (previousCell) {\n return previousCell;\n }\n } while (row);\n }\n return undefined;\n };\n /**\n * @private\n */\n TableCellWidget.prototype.getNextSplitWidget = function () {\n var rowSpan = this.cellFormat.rowSpan;\n if (this.containerWidget instanceof TableRowWidget) {\n var row = this.containerWidget;\n do {\n row = row.nextRenderedWidget;\n if (isNullOrUndefined(row) || row.index > this.rowIndex + rowSpan) {\n break;\n }\n var nextCell = row.getCell(this.rowIndex, this.index);\n if (nextCell) {\n return nextCell;\n }\n } while (row);\n }\n return undefined;\n };\n /**\n * @private\n */\n TableCellWidget.prototype.getTableCellWidget = function (point) {\n for (var i = 0; i < this.childWidgets.length; i++) {\n if (this.childWidgets[i].y <= point.y\n && (this.childWidgets[i].y + this.childWidgets[i].height) >= point.y) {\n return this.childWidgets[i].getTableCellWidget(point);\n }\n }\n var tableCellWidget = undefined;\n if (this.childWidgets.length > 0) {\n if (this.childWidgets[0].y <= point.y) {\n tableCellWidget = this.childWidgets[this.childWidgets.length - 1].getTableCellWidget(point);\n }\n else {\n tableCellWidget = this.childWidgets[0].getTableCellWidget(point);\n }\n }\n return tableCellWidget;\n };\n /**\n * @private\n */\n TableCellWidget.prototype.updateWidth = function (preferredWidth) {\n if (this.cellFormat.preferredWidthType === 'Auto') {\n this.cellFormat.preferredWidth = preferredWidth;\n this.cellFormat.preferredWidthType = 'Point';\n }\n else if (this.cellFormat.preferredWidthType === 'Point') {\n this.cellFormat.preferredWidth = preferredWidth;\n }\n else if (this.cellFormat.preferredWidthType === 'Percent') {\n this.cellFormat.preferredWidth = this.convertPointToPercent(preferredWidth);\n }\n this.cellFormat.cellWidth = preferredWidth;\n };\n /**\n * @private\n */\n TableCellWidget.prototype.convertPointToPercent = function (cellPreferredWidth) {\n var value = 0;\n var clientWidth = this.ownerTable.getOwnerWidth(true);\n var tableWidth = this.ownerTable.getTableClientWidth(clientWidth);\n value = (cellPreferredWidth / tableWidth) * 100;\n value = Math.round(value);\n return value < 100 ? value : 100; // The value should be lesser than or equal to 100%;\n };\n /**\n * @private\n */\n TableCellWidget.getCellLeftBorder = function (tableCell) {\n var leftBorder = undefined;\n var cellBorder = tableCell.cellFormat.borders;\n var rowBorders = !isNullOrUndefined(tableCell.ownerRow) ? tableCell.ownerRow.rowFormat.borders : undefined;\n var tableBorders = !isNullOrUndefined(tableCell.ownerTable) ? tableCell.ownerTable.tableFormat.borders : undefined;\n if (!isNullOrUndefined(cellBorder.left)) {\n leftBorder = cellBorder.left;\n }\n if (isNullOrUndefined(leftBorder)) {\n leftBorder = tableCell.getLeftBorderToRenderByHierarchy(leftBorder, rowBorders, tableBorders);\n }\n if (tableCell.ownerTable.tableFormat.cellSpacing > 0) {\n leftBorder = tableCell.getLeftBorderToRenderByHierarchy(leftBorder, rowBorders, tableBorders);\n }\n else {\n var prevCell = undefined;\n if (!isNullOrUndefined(tableCell.previousWidget)) {\n // if the border is shared then choose the border based on Conflict Resolution algorithm.\n prevCell = tableCell.previousWidget;\n }\n else if ((tableCell.cellFormat.columnSpan > 1 || tableCell.columnIndex > 1) && tableCell.ownerRow.rowIndex > 0) {\n var previousRow = tableCell.ownerRow.previousWidget;\n while (!isNullOrUndefined(previousRow) && previousRow.childWidgets.length > 0) {\n for (var i = 0; i < previousRow.childWidgets.length; i++) {\n var prevRowCell = previousRow.childWidgets[i];\n if (prevRowCell.columnIndex + prevRowCell.cellFormat.columnSpan === tableCell.columnIndex) {\n prevCell = previousRow.childWidgets[i];\n break;\n }\n }\n if (!isNullOrUndefined(prevCell)) {\n break;\n }\n previousRow = previousRow.previousWidget;\n }\n }\n leftBorder = tableCell.getPreviousCellLeftBorder(leftBorder, prevCell);\n }\n if (isNullOrUndefined(leftBorder)) {\n leftBorder = new WBorder(tableCell.cellFormat.borders);\n }\n return leftBorder;\n };\n /**\n * @private\n */\n TableCellWidget.prototype.getLeftBorderWidth = function () {\n var borderWidth = 0;\n //let ownerTable = this.ownerTable;\n //Added null condition check for asynchronous loading.\n // if (this.cellFormat !== null && this.cellFormat.borders !== null) {\n // update the margins values respect to layouting of borders.\n //For normal table cells only left border is rendred. for last cell left and right border is rendred.\n // this border widths are not included in margins.\n // boderWidth = this.cellFormat.borders.GetRightBorderToRender(this).GetLineWidth();\n //need to render rightBorder specifically for all the cells when the cellSpacing is greater than zero or for last cell of each row.\n // }\n return borderWidth;\n };\n /**\n * @private\n */\n TableCellWidget.prototype.getRightBorderWidth = function () {\n var borderWidth = 0;\n var ownerTable = this.ownerTable;\n //Added null condition check for asynchronous loading.\n // if (this.cellFormat !== null && this.cellFormat.borders !== null) {\n ///need to render right border specifically for all the cells when the cell spacing is \n //greater than zero or for last cell of each row.\n // let isLastCell: boolean = false;\n // isLastCell = this.cellIndex === 0;\n // if (ownerTable.tableFormat.cellSpacing > 0 || isLastCell) {\n // boderWidth = this.cellFormat.borders.getLeftBorderToRender(this).GetLineWidth();\n // }\n // }\n return borderWidth;\n };\n /**\n * @private\n */\n TableCellWidget.prototype.getCellSpacing = function () {\n var actualCellSpacing = this.ownerTable && this.ownerTable.tableFormat ? this.ownerTable.tableFormat.cellSpacing : 0;\n var cellSpacingToLayout = actualCellSpacing;\n // Considers the left, right margins and border widths(only available for Layouted table) for Minimum width.\n if (this.ownerRow.childWidgets.length === 1) {\n cellSpacingToLayout = actualCellSpacing * 2;\n }\n else if (this.cellIndex === 0 || this.cellIndex === this.ownerRow.childWidgets.length - 1) {\n cellSpacingToLayout = actualCellSpacing + (actualCellSpacing / 2);\n }\n else {\n cellSpacingToLayout = actualCellSpacing;\n }\n return cellSpacingToLayout;\n };\n /**\n * @private\n */\n TableCellWidget.prototype.getMinimumPreferredWidth = function () {\n var defaultWidth = 0;\n defaultWidth = this.leftMargin + this.rightMargin + this.getLeftBorderWidth() + this.getRightBorderWidth() + this.getCellSpacing();\n return defaultWidth;\n };\n /**\n * @private\n */\n TableCellWidget.prototype.getPreviousCellLeftBorder = function (leftBorder, previousCell) {\n // tslint:disable-next-line:max-line-length\n if ((isNullOrUndefined(previousCell) || (!isNullOrUndefined(leftBorder) && (leftBorder.lineStyle === 'None' && !leftBorder.hasNoneStyle)))) {\n if (!isNullOrUndefined(leftBorder) && !(leftBorder.ownerBase.ownerBase instanceof WTableFormat)) {\n // tslint:disable-next-line:max-line-length\n return this.getLeftBorderToRenderByHierarchy(leftBorder, TableRowWidget.getRowOf(leftBorder.ownerBase).rowFormat.borders, TableWidget.getTableOf(leftBorder.ownerBase).tableFormat.borders);\n }\n }\n else {\n var borderToRender = void 0;\n var prevCellRightBorder = undefined;\n // tslint:disable-next-line:max-line-length\n if (!isNullOrUndefined(previousCell.cellFormat.borders) && !isNullOrUndefined(previousCell.cellFormat.borders.right) && previousCell.cellFormat.borders.right.lineStyle !== 'None') {\n prevCellRightBorder = previousCell.cellFormat.borders.right;\n }\n if (!isNullOrUndefined(prevCellRightBorder) && prevCellRightBorder.lineStyle !== 'None') {\n borderToRender = this.getBorderBasedOnPriority(prevCellRightBorder, leftBorder);\n }\n else if (!isNullOrUndefined(leftBorder) && !(leftBorder.ownerBase.ownerBase instanceof WTableFormat)) {\n // tslint:disable-next-line:max-line-length\n return this.getLeftBorderToRenderByHierarchy(leftBorder, TableRowWidget.getRowOf(leftBorder.ownerBase).rowFormat.borders, TableWidget.getTableOf(leftBorder.ownerBase).tableFormat.borders);\n }\n }\n return leftBorder;\n };\n /**\n * @private\n */\n TableCellWidget.prototype.getBorderBasedOnPriority = function (border, adjacentBorder) {\n // If the cell and its adjacent cell defined different borders then based on this algorithm the border choose to render.\n // Reference link :https://msdn.microsoft.com/en-us/library/office/documentformat.openxml.wordprocessing.tablecellborders.aspx\n if (isNullOrUndefined(border)) {\n return adjacentBorder;\n }\n else if (isNullOrUndefined(adjacentBorder)) {\n return border;\n }\n var borderWeight = border.getBorderWeight();\n var adjacentBorderWeight = adjacentBorder.getBorderWeight();\n //the border with higher wight shall be displayed.\n if (borderWeight === adjacentBorderWeight) {\n //if the border is equal weight the based on the priority the border will be choosen to render.\n var borderPriority = border.getPrecedence();\n var adjacentBorderPriority = adjacentBorder.getPrecedence();\n if (borderPriority === adjacentBorderPriority) {\n //The color with the smaller brightness value shall be displayed.\n var borderColInRGB = this.convertHexToRGB(border.color);\n var R1 = borderColInRGB.r;\n var G1 = borderColInRGB.g;\n var B1 = borderColInRGB.b;\n var adjacentBorderColInRGB = this.convertHexToRGB(adjacentBorder.color);\n var R2 = adjacentBorderColInRGB.r;\n var G2 = adjacentBorderColInRGB.g;\n var B2 = adjacentBorderColInRGB.b;\n var borderBrightness = (R1 + B1 + (2 * G1));\n var adjacentBorderBrightness = (R2 + B2 + (2 * G2));\n if (borderBrightness === adjacentBorderBrightness) {\n borderBrightness = (B1 + (2 * G1));\n adjacentBorderBrightness = (B2 + (2 * G2));\n if (borderBrightness === adjacentBorderBrightness) {\n if (G1 === G2) {\n return border;\n }\n else if (G1 > G2) {\n return adjacentBorder;\n }\n else {\n return border;\n }\n }\n else if (borderBrightness > adjacentBorderBrightness) {\n return adjacentBorder;\n }\n else {\n return border;\n }\n }\n else if (borderBrightness > adjacentBorderBrightness) {\n return adjacentBorder;\n }\n else {\n return border;\n }\n }\n else if (borderPriority > adjacentBorderPriority) {\n return border;\n }\n else {\n return adjacentBorder;\n }\n }\n else if (borderWeight > adjacentBorderWeight) {\n return border;\n }\n else {\n return adjacentBorder;\n }\n };\n /**\n * @private\n */\n TableCellWidget.prototype.getLeftBorderToRenderByHierarchy = function (leftBorder, rowBorders, tableBorders) {\n if (!isNullOrUndefined(leftBorder) && (leftBorder.lineStyle !== 'None' || (leftBorder.hasNoneStyle &&\n //If border defined with default values then border drawn based on hierarchy. \n !(leftBorder.lineStyle === 'None' && leftBorder.lineWidth === 0 && leftBorder.color === '#000000')))) {\n return leftBorder;\n // tslint:disable-next-line:max-line-length\n }\n else if (!isNullOrUndefined(leftBorder) && (leftBorder.ownerBase instanceof WBorders) && TableCellWidget.getCellOf(leftBorder.ownerBase).columnIndex === 0) {\n if (!isNullOrUndefined(tableBorders) && !isNullOrUndefined(tableBorders.left)) {\n leftBorder = tableBorders.left;\n }\n return leftBorder;\n }\n else if (!isNullOrUndefined(rowBorders)\n && !isNullOrUndefined(rowBorders.vertical) && rowBorders.vertical.lineStyle !== 'None') {\n return leftBorder = rowBorders.vertical;\n }\n else if (!isNullOrUndefined(tableBorders)\n && !isNullOrUndefined(tableBorders.vertical) && tableBorders.vertical.lineStyle !== 'None') {\n return leftBorder = tableBorders.vertical;\n }\n else {\n return leftBorder;\n }\n };\n /**\n * @private\n */\n TableCellWidget.getCellRightBorder = function (tableCell) {\n var rightBorder = undefined;\n var cellBorder = tableCell.cellFormat.borders;\n var rowBorders = !isNullOrUndefined(tableCell.ownerRow) ? tableCell.ownerRow.rowFormat.borders : undefined;\n var tableBorders = !isNullOrUndefined(tableCell.ownerTable) ? tableCell.ownerTable.tableFormat.borders : undefined;\n if (!isNullOrUndefined(cellBorder.right)) {\n rightBorder = cellBorder.right;\n }\n if (isNullOrUndefined(rightBorder)) {\n rightBorder = tableCell.getRightBorderToRenderByHierarchy(rightBorder, rowBorders, tableBorders);\n }\n if (tableCell.ownerTable.tableFormat.cellSpacing > 0) {\n rightBorder = tableCell.getRightBorderToRenderByHierarchy(rightBorder, rowBorders, tableBorders);\n }\n else {\n var nextCell = undefined;\n if (!isNullOrUndefined(tableCell.nextWidget)) {\n nextCell = tableCell.nextWidget;\n }\n // if the border is shared then choose the border based on Conflict Resolution algorithm.\n rightBorder = tableCell.getAdjacentCellRightBorder(rightBorder, nextCell);\n }\n if (isNullOrUndefined(rightBorder)) {\n rightBorder = new WBorder(tableCell.cellFormat.borders);\n }\n return rightBorder;\n };\n /**\n * @private\n */\n TableCellWidget.prototype.getAdjacentCellRightBorder = function (rightBorder, nextCell) {\n // tslint:disable-next-line:max-line-length\n if (isNullOrUndefined(nextCell) || (!isNullOrUndefined(rightBorder) && (rightBorder.lineStyle === 'None' && !rightBorder.hasNoneStyle))) {\n if (!isNullOrUndefined(rightBorder) && !(rightBorder.ownerBase.ownerBase instanceof WTableFormat)) {\n // tslint:disable-next-line:max-line-length\n return this.getRightBorderToRenderByHierarchy(rightBorder, TableRowWidget.getRowOf(rightBorder.ownerBase).rowFormat.borders, TableWidget.getTableOf(rightBorder.ownerBase).tableFormat.borders);\n }\n }\n else {\n var nextCellLeftBorder = undefined;\n // tslint:disable-next-line:max-line-length\n if (!isNullOrUndefined(nextCell.cellFormat.borders) && !isNullOrUndefined(nextCell.cellFormat.borders.left) && nextCell.cellFormat.borders.left.lineStyle !== 'None') {\n nextCellLeftBorder = nextCell.cellFormat.borders.left;\n }\n if (!isNullOrUndefined(nextCellLeftBorder) && nextCellLeftBorder.lineStyle !== 'None') {\n return this.getBorderBasedOnPriority(rightBorder, nextCellLeftBorder);\n }\n else if (!isNullOrUndefined(rightBorder) && !(rightBorder.ownerBase.ownerBase instanceof WTableFormat)) {\n // tslint:disable-next-line:max-line-length\n return this.getRightBorderToRenderByHierarchy(rightBorder, TableRowWidget.getRowOf(rightBorder.ownerBase).rowFormat.borders, TableWidget.getTableOf(rightBorder.ownerBase).tableFormat.borders);\n }\n }\n return rightBorder;\n };\n /**\n * @private\n */\n TableCellWidget.prototype.getRightBorderToRenderByHierarchy = function (rightBorder, rowBorders, tableBorders) {\n if (!isNullOrUndefined(rightBorder) && (rightBorder.lineStyle !== 'None' || (rightBorder.hasNoneStyle &&\n //If border defined with default values then border drawn based on hierarchy. \n !(rightBorder.lineStyle === 'None' && rightBorder.lineWidth === 0 && rightBorder.color === '#000000')))) {\n return rightBorder;\n // tslint:disable-next-line:max-line-length\n }\n else if (!isNullOrUndefined(rightBorder) && (rightBorder.ownerBase instanceof WBorders) && TableCellWidget.getCellOf(rightBorder.ownerBase).columnIndex === TableCellWidget.getCellOf(rightBorder.ownerBase).ownerRow.childWidgets.length - 1) {\n if (!isNullOrUndefined(tableBorders) && !isNullOrUndefined(tableBorders.right)) {\n rightBorder = tableBorders.right;\n }\n return rightBorder;\n }\n else if (!isNullOrUndefined(rowBorders)\n && !isNullOrUndefined(rowBorders.vertical) && rowBorders.vertical.lineStyle !== 'None') {\n return rightBorder = rowBorders.vertical;\n }\n else if (!isNullOrUndefined(tableBorders)\n && !isNullOrUndefined(tableBorders.vertical) && tableBorders.vertical.lineStyle !== 'None') {\n return rightBorder = tableBorders.vertical;\n }\n else {\n return rightBorder;\n }\n };\n /**\n * @private\n */\n TableCellWidget.getCellTopBorder = function (tableCell) {\n var topBorder = undefined;\n var cellBorder = tableCell.cellFormat.borders;\n var rowBorders = !isNullOrUndefined(tableCell.ownerRow) ? tableCell.ownerRow.rowFormat.borders : undefined;\n var tableBorders = !isNullOrUndefined(tableCell.ownerTable) ? tableCell.ownerTable.tableFormat.borders : undefined;\n if (!isNullOrUndefined(cellBorder.top)) {\n topBorder = cellBorder.top;\n }\n if (isNullOrUndefined(topBorder)) {\n topBorder = tableCell.getTopBorderToRenderByHierarchy(topBorder, rowBorders, tableBorders);\n }\n if (tableCell.ownerTable.tableFormat.cellSpacing > 0) {\n topBorder = tableCell.getTopBorderToRenderByHierarchy(topBorder, rowBorders, tableBorders);\n }\n else {\n var prevTopCell = undefined;\n //ToDo: Need to analyze more to get the previous cell.\n var prevRow = tableCell.ownerRow.previousWidget;\n while (!isNullOrUndefined(prevRow) && prevRow.childWidgets.length > 0) {\n for (var i = 0; i < prevRow.childWidgets.length; i++) {\n var prevRowCell = prevRow.childWidgets[i];\n if (prevRowCell.columnIndex + prevRowCell.cellFormat.columnSpan - 1 >= tableCell.columnIndex) {\n prevTopCell = prevRow.childWidgets[i];\n break;\n }\n }\n if (!isNullOrUndefined(prevTopCell)) {\n break;\n }\n prevRow = prevRow.previousWidget;\n //If all the previous rows checked and the previous top cell is null\n // then TableCell previus row matched column index cell is taken for border calculation.\n if (isNullOrUndefined(prevRow) && isNullOrUndefined(prevTopCell)) {\n prevRow = tableCell.ownerRow.previousWidget;\n if (tableCell.columnIndex < prevRow.childWidgets.length) {\n for (var i = 0; i < prevRow.childWidgets.length; i++) {\n var prevRowCell = prevRow.childWidgets[i];\n if (prevRowCell.columnIndex === tableCell.columnIndex) {\n prevTopCell = prevRow.childWidgets[i];\n break;\n }\n }\n //If table cell Column index is greater than previous row cells count then last cell is taken as previous top cell.\n }\n else {\n // tslint:disable-next-line:max-line-length\n prevTopCell = tableCell.ownerRow.previousWidget.childWidgets[tableCell.ownerRow.previousWidget.childWidgets.length - 1];\n }\n }\n }\n //If the border is shared then choose the border based on Conflict Resolution algorithm.\n topBorder = tableCell.getPreviousCellTopBorder(topBorder, prevTopCell);\n }\n if (isNullOrUndefined(topBorder)) {\n topBorder = new WBorder(tableCell.cellFormat.borders);\n }\n return topBorder;\n };\n /**\n * @private\n */\n TableCellWidget.prototype.getPreviousCellTopBorder = function (topBorder, previousTopCell) {\n // tslint:disable-next-line:max-line-length\n if (isNullOrUndefined(previousTopCell) || (!isNullOrUndefined(topBorder) && (topBorder.lineStyle === 'None' && !topBorder.hasNoneStyle))) {\n if (!isNullOrUndefined(topBorder) && !(topBorder.ownerBase.ownerBase instanceof WTableFormat)) {\n // tslint:disable-next-line:max-line-length\n return this.getTopBorderToRenderByHierarchy(topBorder, TableRowWidget.getRowOf(topBorder.ownerBase).rowFormat.borders, TableWidget.getTableOf(topBorder.ownerBase).tableFormat.borders);\n }\n }\n else {\n var prevTopCellBottomBorder = undefined;\n // tslint:disable-next-line:max-line-length\n if (!isNullOrUndefined(previousTopCell.cellFormat.borders) && !isNullOrUndefined(previousTopCell.cellFormat.borders.bottom) && previousTopCell.cellFormat.borders.bottom.lineStyle !== 'None') {\n prevTopCellBottomBorder = previousTopCell.cellFormat.borders.left;\n }\n if (!isNullOrUndefined(prevTopCellBottomBorder) && prevTopCellBottomBorder.lineStyle !== 'None') {\n return this.getBorderBasedOnPriority(topBorder, prevTopCellBottomBorder);\n }\n else if (!isNullOrUndefined(topBorder) && !(topBorder.ownerBase.ownerBase instanceof WTableFormat)) {\n // tslint:disable-next-line:max-line-length\n return this.getTopBorderToRenderByHierarchy(topBorder, TableRowWidget.getRowOf(topBorder.ownerBase).rowFormat.borders, TableWidget.getTableOf(topBorder.ownerBase).tableFormat.borders);\n }\n }\n return topBorder;\n };\n /**\n * @private\n */\n TableCellWidget.prototype.getTopBorderToRenderByHierarchy = function (topBorder, rowBorders, tableBorders) {\n if (!isNullOrUndefined(topBorder) && (topBorder.lineStyle !== 'None' || (topBorder.hasNoneStyle &&\n //If border defined with default values then border drawn based on hierarchy. \n !(topBorder.lineStyle === 'None' && topBorder.lineWidth === 0 && topBorder.color === '#000000')))) {\n return topBorder;\n // tslint:disable-next-line:max-line-length\n }\n else if (!isNullOrUndefined(topBorder) && (topBorder.ownerBase instanceof WBorders) && TableCellWidget.getCellOf(topBorder.ownerBase).ownerRow.rowIndex === 0) {\n if (!isNullOrUndefined(tableBorders) && !isNullOrUndefined(tableBorders.top)) {\n topBorder = tableBorders.top;\n }\n return topBorder;\n }\n else if (!isNullOrUndefined(rowBorders)\n && !isNullOrUndefined(rowBorders.horizontal) && rowBorders.horizontal.lineStyle !== 'None') {\n return topBorder = rowBorders.horizontal;\n }\n else if (!isNullOrUndefined(tableBorders)\n && !isNullOrUndefined(tableBorders.horizontal) && tableBorders.horizontal.lineStyle !== 'None') {\n return topBorder = tableBorders.horizontal;\n }\n else {\n return topBorder;\n }\n };\n /**\n * @private\n */\n TableCellWidget.getCellBottomBorder = function (tableCell) {\n var bottomBorder = undefined;\n var cellBorder = tableCell.cellFormat.borders;\n var rowBorders = !isNullOrUndefined(tableCell.ownerRow) ? tableCell.ownerRow.rowFormat.borders : undefined;\n var tableBorders = !isNullOrUndefined(tableCell.ownerTable) ? tableCell.ownerTable.tableFormat.borders : undefined;\n if (!isNullOrUndefined(cellBorder.bottom)) {\n bottomBorder = cellBorder.bottom;\n }\n if (isNullOrUndefined(bottomBorder)) {\n // tslint:disable-next-line:max-line-length\n bottomBorder = tableCell.getBottomBorderToRenderByHierarchy(bottomBorder, rowBorders, tableBorders); // select the left border based on heirarchy.\n }\n if (tableCell.ownerTable.tableFormat.cellSpacing > 0) {\n bottomBorder = tableCell.getBottomBorderToRenderByHierarchy(bottomBorder, rowBorders, tableBorders);\n }\n else {\n var nextBottomCell = undefined;\n var nextRow = tableCell.ownerRow.nextWidget;\n if (!isNullOrUndefined(nextRow) && tableCell.columnIndex < nextRow.childWidgets.length) {\n nextBottomCell = nextRow.childWidgets[tableCell.columnIndex];\n }\n //If the border is shared then choose the border based on Conflict Resolution algorithm.\n bottomBorder = tableCell.getAdjacentCellBottomBorder(bottomBorder, nextBottomCell);\n }\n if (isNullOrUndefined(bottomBorder)) {\n bottomBorder = new WBorder(tableCell.cellFormat.borders);\n }\n return bottomBorder;\n };\n /**\n * @private\n */\n TableCellWidget.prototype.getAdjacentCellBottomBorder = function (bottomBorder, nextBottomCell) {\n // tslint:disable-next-line:max-line-length\n if (isNullOrUndefined(nextBottomCell) || (!isNullOrUndefined(bottomBorder) && (bottomBorder.lineStyle === 'None' && !bottomBorder.hasNoneStyle))) {\n if (!isNullOrUndefined(bottomBorder) && !(bottomBorder.ownerBase.ownerBase instanceof WTableFormat)) {\n // tslint:disable-next-line:max-line-length\n return this.getBottomBorderToRenderByHierarchy(bottomBorder, TableRowWidget.getRowOf(bottomBorder.ownerBase).rowFormat.borders, TableWidget.getTableOf(bottomBorder.ownerBase).tableFormat.borders);\n }\n }\n else {\n var prevBottomCellTopBorder = undefined;\n // tslint:disable-next-line:max-line-length\n if (!isNullOrUndefined(nextBottomCell.cellFormat.borders) && !isNullOrUndefined(nextBottomCell.cellFormat.borders.top) && nextBottomCell.cellFormat.borders.top.lineStyle !== 'None') {\n prevBottomCellTopBorder = nextBottomCell.cellFormat.borders.top;\n }\n if (!isNullOrUndefined(prevBottomCellTopBorder) && prevBottomCellTopBorder.lineStyle !== 'None') {\n return this.getBorderBasedOnPriority(bottomBorder, prevBottomCellTopBorder);\n }\n else if (!isNullOrUndefined(bottomBorder) && !(bottomBorder.ownerBase.ownerBase instanceof WTableFormat)) {\n // tslint:disable-next-line:max-line-length\n return this.getBottomBorderToRenderByHierarchy(bottomBorder, TableRowWidget.getRowOf(bottomBorder.ownerBase).rowFormat.borders, TableWidget.getTableOf(bottomBorder.ownerBase).tableFormat.borders);\n }\n }\n return bottomBorder;\n };\n /**\n * @private\n */\n TableCellWidget.prototype.getBottomBorderToRenderByHierarchy = function (bottomBorder, rowBorders, tableBorders) {\n if (!isNullOrUndefined(bottomBorder) && (bottomBorder.lineStyle !== 'None' || (bottomBorder.hasNoneStyle &&\n //If border defined with default values then border drawn based on hierarchy. \n !(bottomBorder.lineStyle === 'None' && bottomBorder.lineWidth === 0 && bottomBorder.color === '#000000')))) {\n return bottomBorder;\n // tslint:disable-next-line:max-line-length\n }\n else if (!isNullOrUndefined(bottomBorder) && (bottomBorder.ownerBase instanceof WBorders) && TableCellWidget.getCellOf(bottomBorder.ownerBase).ownerRow.rowIndex + TableCellWidget.getCellOf(bottomBorder.ownerBase).cellFormat.rowSpan === TableCellWidget.getCellOf(bottomBorder.ownerBase).ownerTable.childWidgets.length) {\n if (!isNullOrUndefined(tableBorders) && !isNullOrUndefined(tableBorders.bottom)) {\n bottomBorder = tableBorders.bottom;\n }\n return bottomBorder;\n }\n else if (!isNullOrUndefined(rowBorders)\n && !isNullOrUndefined(rowBorders.horizontal) && rowBorders.horizontal.lineStyle !== 'None') {\n return bottomBorder = rowBorders.horizontal;\n }\n else if (!isNullOrUndefined(tableBorders)\n && !isNullOrUndefined(tableBorders.horizontal) && tableBorders.horizontal.lineStyle !== 'None') {\n return bottomBorder = tableBorders.horizontal;\n }\n else {\n return bottomBorder;\n }\n };\n TableCellWidget.prototype.convertHexToRGB = function (colorCode) {\n if (colorCode) {\n colorCode = colorCode.replace(/[^0-9A-‌​F]/gi, ''); // To remove # from color code string.\n var colCodeNo = parseInt(colorCode, 16);\n var r = (colCodeNo >> 16) & 255;\n var g = (colCodeNo >> 8) & 255;\n var b = colCodeNo & 255;\n return { 'r': r, 'g': g, 'b': b };\n }\n return undefined;\n };\n /**\n * @private\n */\n TableCellWidget.getCellOf = function (node) {\n if (node instanceof WBorders) {\n if (node.ownerBase instanceof WCellFormat && node.ownerBase.ownerBase instanceof TableCellWidget) {\n return node.ownerBase.ownerBase;\n }\n else {\n return undefined;\n }\n }\n return undefined;\n };\n /**\n * @private\n */\n TableCellWidget.prototype.destroyInternal = function (viewer) {\n // let viewer: LayoutViewer = undefined;\n // let page: Page = this.getPage();\n // if (!isNullOrUndefined(page ))\n // viewer = page.viewer;\n if (!isNullOrUndefined(this.childWidgets)) {\n for (var i = 0; i < this.childWidgets.length; i++) {\n var widget = this.childWidgets[i];\n if (widget instanceof ParagraphWidget) {\n widget.destroyInternal(viewer);\n }\n else {\n widget.destroyInternal(viewer);\n }\n i--;\n }\n this.childWidgets = undefined;\n }\n this.destroy();\n };\n /**\n * @private\n */\n TableCellWidget.prototype.clone = function () {\n var cell = new TableCellWidget();\n cell.cellFormat.copyFormat(this.cellFormat);\n for (var i = 0; i < this.childWidgets.length; i++) {\n var block = this.childWidgets[i].clone();\n cell.childWidgets.push(block);\n block.containerWidget = cell;\n block.index = i;\n }\n cell.leftBorderWidth = this.leftBorderWidth;\n cell.rightBorderWidth = this.rightBorderWidth;\n if (this.margin) {\n cell.margin = this.margin.clone();\n }\n cell.columnIndex = this.columnIndex;\n cell.x = this.x;\n cell.y = this.y;\n cell.height = this.height;\n cell.width = this.width;\n return cell;\n };\n /**\n * @private\n */\n TableCellWidget.prototype.destroy = function () {\n // if (this.cellFormat) {\n // this.cellFormat.destroy();\n // }\n this.cellFormat = undefined;\n this.rowIndex = undefined;\n this.columnIndex = undefined;\n _super.prototype.destroy.call(this);\n };\n return TableCellWidget;\n}(BlockWidget));\nexport { TableCellWidget };\n/**\n * @private\n */\nvar LineWidget = /** @class */ (function () {\n /**\n * Initialize the constructor of LineWidget\n */\n function LineWidget(paragraphWidget) {\n /**\n * @private\n */\n this.children = [];\n /**\n * @private\n */\n this.x = 0;\n /**\n * @private\n */\n this.y = 0;\n /**\n * @private\n */\n this.width = 0;\n /**\n * @private\n */\n this.height = 0;\n this.paragraph = paragraphWidget;\n }\n Object.defineProperty(LineWidget.prototype, \"indexInOwner\", {\n /**\n * @private\n */\n get: function () {\n if (this.paragraph && this.paragraph.childWidgets) {\n return this.paragraph.childWidgets.indexOf(this);\n }\n return -1;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(LineWidget.prototype, \"nextLine\", {\n /**\n * @private\n */\n get: function () {\n var paragraph = this.paragraph;\n var lineIndex = this.indexInOwner;\n if (lineIndex <= paragraph.childWidgets.length - 2) {\n return paragraph.childWidgets[lineIndex + 1];\n }\n else if (paragraph.nextSplitWidget) {\n var line = paragraph.nextSplitWidget.firstChild;\n if (line instanceof LineWidget && line.paragraph.equals(this.paragraph)) {\n return line;\n }\n }\n return undefined;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(LineWidget.prototype, \"previousLine\", {\n /**\n * @private\n */\n get: function () {\n var paragraph = this.paragraph;\n var lineIndex = this.indexInOwner;\n var splitParagraph = paragraph.previousSplitWidget;\n if (lineIndex > 0) {\n return paragraph.childWidgets[lineIndex - 1];\n }\n else if (splitParagraph instanceof ParagraphWidget) {\n var line = splitParagraph.lastChild;\n if (line instanceof LineWidget && line.paragraph.equals(this.paragraph)) {\n return line;\n }\n }\n return undefined;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @private\n */\n LineWidget.prototype.isFirstLine = function () {\n var index = this.indexInOwner;\n if (index > -1 && this.paragraph.previousSplitWidget === undefined) {\n return index === 0;\n }\n return false;\n };\n /**\n * @private\n */\n LineWidget.prototype.isLastLine = function () {\n var index = this.indexInOwner;\n if (index > -1 && this.paragraph.nextSplitWidget === undefined) {\n return index === this.paragraph.childWidgets.length - 1;\n }\n return false;\n };\n /**\n * @private\n */\n LineWidget.prototype.getOffset = function (inline, index) {\n if (isNullOrUndefined(inline)) {\n return index;\n }\n var textIndex = index;\n var line = inline.line;\n var lineIndex = inline.line.paragraph.childWidgets.indexOf(inline.line);\n for (var i = 0; i < line.children.length; i++) {\n var inlineElement = line.children[i];\n if (inline === inlineElement) {\n break;\n }\n if (inlineElement instanceof ListTextElementBox) {\n continue;\n }\n textIndex += inlineElement.length;\n }\n return textIndex;\n };\n /**\n * @private\n */\n LineWidget.prototype.getEndOffset = function () {\n var startOffset = 0;\n var count = 0;\n for (var i = 0; i < this.children.length; i++) {\n var inlineElement = this.children[i];\n if (inlineElement.length === 0) {\n continue;\n }\n if (inlineElement instanceof ListTextElementBox) {\n continue;\n }\n if (inlineElement instanceof TextElementBox || inlineElement instanceof ImageElementBox\n || inlineElement instanceof BookmarkElementBox || (inlineElement instanceof FieldElementBox\n && HelperMethods.isLinkedFieldCharacter(inlineElement))) {\n startOffset = count + inlineElement.length;\n }\n count += inlineElement.length;\n }\n return startOffset;\n };\n /**\n * @private\n */\n LineWidget.prototype.getInline = function (offset, indexInInline) {\n var inlineElement = undefined;\n var count = 0;\n var isStarted = false;\n if (this.children.length === 0) {\n if (this.previousLine) {\n var elementBox = this.previousLine.children[this.previousLine.children.length - 1];\n if (elementBox instanceof TextElementBox && elementBox.text === '\\v') {\n inlineElement = this.previousLine.children[this.previousLine.children.length - 1];\n indexInInline = 1;\n return { 'element': inlineElement, 'index': indexInInline };\n }\n }\n }\n for (var i = 0; i < this.children.length; i++) {\n inlineElement = this.children[i];\n if (inlineElement instanceof ListTextElementBox) {\n continue;\n }\n if (!isStarted && (inlineElement instanceof TextElementBox || inlineElement instanceof ImageElementBox\n || inlineElement instanceof BookmarkElementBox\n || inlineElement instanceof FieldElementBox && HelperMethods.isLinkedFieldCharacter(inlineElement))) {\n isStarted = true;\n }\n if (isStarted && offset <= count + inlineElement.length) {\n indexInInline = (offset - count);\n return { 'element': inlineElement, 'index': indexInInline };\n }\n count += inlineElement.length;\n }\n if (offset > count) {\n indexInInline = isNullOrUndefined(inlineElement) ? offset : inlineElement.length;\n }\n return { 'element': inlineElement, 'index': indexInInline };\n };\n /**\n * @private\n */\n LineWidget.prototype.getHierarchicalIndex = function (hierarchicalIndex) {\n var node = this;\n hierarchicalIndex = node.paragraph.childWidgets.indexOf(node) + ';' + hierarchicalIndex;\n if (node.paragraph instanceof BlockWidget) {\n return node.paragraph.getHierarchicalIndex(hierarchicalIndex);\n }\n return hierarchicalIndex;\n };\n /**\n * @private\n */\n LineWidget.prototype.clone = function () {\n var line = new LineWidget(undefined);\n for (var j = 0; j < this.children.length; j++) {\n var element = this.children[j];\n var clone = element.clone();\n line.children.push(clone);\n clone.line = line;\n }\n line.width = this.width;\n line.height = this.height;\n return line;\n };\n /**\n * @private\n */\n LineWidget.prototype.destroy = function () {\n if (!isNullOrUndefined(this.children)) {\n for (var i = 0; i < this.children.length; i++) {\n this.children[i].destroy();\n }\n this.children = [];\n }\n this.children = undefined;\n if (this.paragraph) {\n this.paragraph.removeChild(this.indexInOwner);\n }\n this.paragraph = undefined;\n this.x = undefined;\n this.y = undefined;\n this.width = undefined;\n this.height = undefined;\n };\n return LineWidget;\n}());\nexport { LineWidget };\n/**\n * @private\n */\nvar ElementBox = /** @class */ (function () {\n /**\n * Initialize the constructor of ElementBox\n */\n function ElementBox() {\n /**\n * @private\n */\n this.x = 0;\n /**\n * @private\n */\n this.y = 0;\n /**\n * @private\n */\n this.width = 0;\n /**\n * @private\n */\n this.height = 0;\n /**\n * @private\n */\n this.margin = new Margin(0, 0, 0, 0);\n /**\n * @private\n */\n this.characterFormat = undefined;\n this.characterFormat = new WCharacterFormat(this);\n this.margin = new Margin(0, 0, 0, 0);\n }\n /**\n * @private\n */\n ElementBox.prototype.linkFieldCharacter = function (viewer) {\n if (!(this instanceof FieldElementBox)) {\n return;\n }\n if (this.fieldType === 0) {\n var fieldBegin = this;\n if (isNullOrUndefined(fieldBegin.fieldEnd)) {\n this.linkFieldTraversingForward(this.line, fieldBegin, fieldBegin);\n if (viewer.fields.indexOf(fieldBegin) === -1) {\n viewer.fields.push(fieldBegin);\n }\n }\n }\n else if (this.fieldType === 2) {\n var fieldSeparator = this;\n //Links the field begin for the current separator.\n if (isNullOrUndefined(fieldSeparator.fieldBegin)) {\n this.linkFieldTraversingBackwardSeparator(this.line, fieldSeparator, fieldSeparator);\n }\n fieldSeparator.fieldBegin.fieldSeparator = fieldSeparator;\n if (!isNullOrUndefined(fieldSeparator.fieldBegin)) {\n //Links to field end traversing from field separator.\n var isFieldEnd = this.linkFieldTraversingForward(this.line, fieldSeparator.fieldBegin, fieldSeparator);\n if (isNullOrUndefined(fieldSeparator.fieldEnd) && isFieldEnd) {\n fieldSeparator.fieldEnd = fieldSeparator.fieldBegin.fieldEnd;\n }\n if (fieldSeparator.fieldEnd) {\n fieldSeparator.fieldEnd.fieldSeparator = fieldSeparator;\n }\n }\n }\n else {\n var fieldEnd = this;\n //Links the field begin and separator for the current end.\n if (isNullOrUndefined(fieldEnd.fieldBegin)) {\n this.linkFieldTraversingBackward(this.line, fieldEnd, fieldEnd);\n }\n }\n };\n /**\n * @private\n */\n ElementBox.prototype.linkFieldTraversingBackward = function (line, fieldEnd, previousNode) {\n var k = line.children.length - 1;\n if (line.children.indexOf(previousNode) > -1) {\n k = line.children.indexOf(previousNode) - 1;\n }\n for (var j = k; j >= 0; j--) {\n var childNode = line.children[j];\n if (childNode instanceof FieldElementBox) {\n if (childNode.fieldType === 0) {\n if (isNullOrUndefined(childNode.fieldEnd)) {\n fieldEnd.fieldBegin = childNode;\n if (isNullOrUndefined(childNode.fieldEnd)) {\n childNode.fieldEnd = fieldEnd;\n }\n if (fieldEnd.fieldSeparator && isNullOrUndefined(fieldEnd.fieldSeparator.fieldBegin)) {\n fieldEnd.fieldSeparator.fieldBegin = childNode;\n if (isNullOrUndefined(childNode.fieldSeparator)) {\n childNode.fieldSeparator = fieldEnd.fieldSeparator;\n }\n }\n }\n return !isNullOrUndefined(fieldEnd.fieldBegin);\n }\n else if (childNode.fieldType === 2 && isNullOrUndefined(childNode.fieldEnd)) {\n fieldEnd.fieldSeparator = childNode;\n childNode.fieldEnd = fieldEnd;\n if (!isNullOrUndefined(childNode.fieldBegin)) {\n fieldEnd.fieldBegin = childNode.fieldBegin;\n }\n }\n }\n }\n if (line.previousLine) {\n this.linkFieldTraversingBackward(line.previousLine, fieldEnd, this);\n }\n else if (line.paragraph.previousRenderedWidget instanceof ParagraphWidget) {\n var prevParagraph = line.paragraph.previousRenderedWidget;\n // tslint:disable-next-line:max-line-length\n this.linkFieldTraversingBackward(prevParagraph.childWidgets[prevParagraph.childWidgets.length - 1], fieldEnd, this);\n }\n return true;\n };\n /**\n * @private\n */\n ElementBox.prototype.linkFieldTraversingForward = function (line, fieldBegin, previousNode) {\n var i = 0;\n if (line.children.indexOf(previousNode) > -1) {\n i = line.children.indexOf(previousNode) + 1;\n }\n for (var j = i; j < line.children.length; j++) {\n var node = line.children[j];\n if (node instanceof FieldElementBox) {\n if (node.fieldType === 1) {\n if (isNullOrUndefined(node.fieldBegin)) {\n fieldBegin.fieldEnd = node;\n }\n if (fieldBegin.fieldEnd && isNullOrUndefined(fieldBegin.fieldEnd.fieldBegin)) {\n fieldBegin.fieldEnd.fieldBegin = fieldBegin;\n }\n return true;\n }\n else if (isNullOrUndefined(fieldBegin.fieldSeparator)) {\n if (node.fieldType === 2 && isNullOrUndefined(node.fieldBegin)) {\n fieldBegin.fieldSeparator = node;\n if (!isNullOrUndefined(node.fieldEnd)) {\n fieldBegin.fieldEnd = node.fieldEnd;\n return true;\n }\n }\n else {\n return false;\n }\n }\n }\n }\n if (line.nextLine) {\n this.linkFieldTraversingForward(line.nextLine, fieldBegin, this);\n }\n else if (line.paragraph.nextRenderedWidget instanceof ParagraphWidget) {\n this.linkFieldTraversingForward(line.paragraph.nextRenderedWidget.childWidgets[0], fieldBegin, this);\n }\n return true;\n };\n /**\n * @private\n */\n ElementBox.prototype.linkFieldTraversingBackwardSeparator = function (line, fieldSeparator, previousNode) {\n var index = line.children.length - 1;\n if (line.children.indexOf(previousNode) > -1) {\n index = line.children.indexOf(previousNode) - 1;\n }\n for (var i = index; i >= 0; i--) {\n var childElement = line.children[i];\n if (childElement instanceof FieldElementBox) {\n if (childElement instanceof FieldElementBox && childElement.fieldType === 0) {\n if (isNullOrUndefined(childElement.fieldSeparator)) {\n fieldSeparator.fieldBegin = childElement;\n }\n return !isNullOrUndefined(fieldSeparator.fieldBegin);\n }\n }\n }\n if (line.previousLine) {\n this.linkFieldTraversingBackwardSeparator(line.previousLine, fieldSeparator, this);\n }\n else if (line.paragraph.nextRenderedWidget instanceof ParagraphWidget) {\n // tslint:disable-next-line:max-line-length\n line = line.paragraph.previousRenderedWidget.childWidgets[line.paragraph.previousRenderedWidget.childWidgets.length - 1];\n this.linkFieldTraversingBackwardSeparator(line, fieldSeparator, this);\n }\n else {\n return true;\n }\n return true;\n };\n Object.defineProperty(ElementBox.prototype, \"length\", {\n /**\n * @private\n */\n get: function () {\n return this.getLength();\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ElementBox.prototype, \"indexInOwner\", {\n /**\n * @private\n */\n get: function () {\n return this.line instanceof LineWidget && this.line.children ? this.line.children.indexOf(this) : -1;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ElementBox.prototype, \"previousElement\", {\n /**\n * @private\n */\n get: function () {\n var index = this.indexInOwner;\n if (index > 0 && index < this.line.children.length) {\n return this.line.children[index - 1];\n }\n return undefined;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ElementBox.prototype, \"nextElement\", {\n /**\n * @private\n */\n get: function () {\n var index = this.indexInOwner;\n if (index > -1 && index < this.line.children.length - 1) {\n return this.line.children[index + 1];\n }\n return undefined;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ElementBox.prototype, \"nextNode\", {\n /**\n * @private\n */\n get: function () {\n var index = this.line.children.indexOf(this);\n var lineIndex = this.line.paragraph.childWidgets.indexOf(this.line);\n if (index < this.line.children.length - 1) {\n return this.line.children[index + 1];\n }\n else if (lineIndex < this.line.paragraph.childWidgets.length - 1) {\n return this.line.paragraph.childWidgets[lineIndex + 1].children[0];\n }\n return undefined;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ElementBox.prototype, \"previousNode\", {\n /**\n * @private\n */\n get: function () {\n var index = this.line.children.indexOf(this);\n var lineIndex = this.line.paragraph.childWidgets.indexOf(this.line);\n if (index > 0) {\n return this.line.children[index - 1];\n }\n else if (lineIndex > 0) {\n var lineWidget = this.line.paragraph.childWidgets[lineIndex - 1];\n return lineWidget.children[lineWidget.children.length - 1];\n }\n return undefined;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ElementBox.prototype, \"paragraph\", {\n /**\n * @private\n */\n get: function () {\n if (this.line) {\n return this.line.paragraph;\n }\n return undefined;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @private\n */\n ElementBox.prototype.destroy = function () {\n if (!isNullOrUndefined(this.line) && this.line.children && this.line.children.indexOf(this) > -1) {\n var index = this.line.children.indexOf(this);\n this.line.children.splice(index, 1);\n }\n this.line = undefined;\n if (this.characterFormat) {\n this.characterFormat.destroy();\n }\n this.characterFormat = undefined;\n if (this.margin) {\n this.margin.destroy();\n }\n this.margin = undefined;\n this.x = undefined;\n this.y = undefined;\n this.width = undefined;\n this.height = undefined;\n };\n /**\n * @private\n */\n ElementBox.objectCharacter = String.fromCharCode(65532);\n return ElementBox;\n}());\nexport { ElementBox };\n/**\n * @private\n */\nvar FieldElementBox = /** @class */ (function (_super) {\n __extends(FieldElementBox, _super);\n function FieldElementBox(type) {\n var _this = _super.call(this) || this;\n /**\n * @private\n */\n _this.fieldType = 0;\n /**\n * @private\n */\n _this.hasFieldEnd = false;\n _this.fieldBeginInternal = undefined;\n _this.fieldSeparatorInternal = undefined;\n _this.fieldEndInternal = undefined;\n _this.fieldType = type;\n return _this;\n }\n Object.defineProperty(FieldElementBox.prototype, \"fieldBegin\", {\n get: function () {\n return this.fieldBeginInternal;\n },\n set: function (field) {\n this.fieldBeginInternal = field;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(FieldElementBox.prototype, \"fieldSeparator\", {\n get: function () {\n return this.fieldSeparatorInternal;\n },\n set: function (field) {\n this.fieldSeparatorInternal = field;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(FieldElementBox.prototype, \"fieldEnd\", {\n get: function () {\n return this.fieldEndInternal;\n },\n set: function (field) {\n this.fieldEndInternal = field;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @private\n */\n FieldElementBox.prototype.getLength = function () {\n return 1;\n };\n /**\n * @private\n */\n FieldElementBox.prototype.clone = function () {\n var field = new FieldElementBox(this.fieldType);\n field.characterFormat.copyFormat(this.characterFormat);\n if (this.margin) {\n field.margin = this.margin.clone();\n }\n field.width = this.width;\n field.height = this.height;\n return field;\n };\n /**\n * @private\n */\n FieldElementBox.prototype.destroy = function () {\n this.fieldType = undefined;\n this.hasFieldEnd = undefined;\n this.fieldBeginInternal = undefined;\n this.fieldEndInternal = undefined;\n this.fieldSeparatorInternal = undefined;\n _super.prototype.destroy.call(this);\n };\n return FieldElementBox;\n}(ElementBox));\nexport { FieldElementBox };\n/**\n * @private\n */\nvar TextElementBox = /** @class */ (function (_super) {\n __extends(TextElementBox, _super);\n function TextElementBox() {\n var _this = _super.call(this) || this;\n /**\n * @private\n */\n _this.baselineOffset = 0;\n /**\n * @private\n */\n _this.text = '';\n return _this;\n }\n /**\n * @private\n */\n TextElementBox.prototype.getLength = function () {\n return this.text ? this.text.length : 0;\n };\n /**\n * @private\n */\n TextElementBox.prototype.clone = function () {\n var span = new TextElementBox();\n span.characterFormat.copyFormat(this.characterFormat);\n span.text = this.text;\n if (this.margin) {\n span.margin = this.margin.clone();\n }\n span.width = this.width;\n span.height = this.height;\n return span;\n };\n /**\n * @private\n */\n TextElementBox.prototype.destroy = function () {\n this.text = undefined;\n _super.prototype.destroy.call(this);\n };\n return TextElementBox;\n}(ElementBox));\nexport { TextElementBox };\n/**\n * @private\n */\nvar FieldTextElementBox = /** @class */ (function (_super) {\n __extends(FieldTextElementBox, _super);\n function FieldTextElementBox() {\n var _this = _super.call(this) || this;\n _this.fieldText = '';\n return _this;\n }\n Object.defineProperty(FieldTextElementBox.prototype, \"text\", {\n get: function () {\n return this.fieldText;\n },\n set: function (value) {\n this.fieldText = value;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @private\n */\n FieldTextElementBox.prototype.clone = function () {\n var span = new FieldTextElementBox();\n span.characterFormat.copyFormat(this.characterFormat);\n span.fieldBegin = this.fieldBegin;\n span.text = this.text;\n if (this.margin) {\n span.margin = this.margin.clone();\n }\n span.width = this.width;\n span.height = this.height;\n return span;\n };\n return FieldTextElementBox;\n}(TextElementBox));\nexport { FieldTextElementBox };\n/**\n * @private\n */\nvar TabElementBox = /** @class */ (function (_super) {\n __extends(TabElementBox, _super);\n function TabElementBox() {\n var _this = _super.call(this) || this;\n /**\n * @private\n */\n _this.tabText = '';\n /**\n * @private\n */\n _this.tabLeader = 'None';\n return _this;\n }\n /**\n * @private\n */\n TabElementBox.prototype.destroy = function () {\n this.tabText = undefined;\n this.tabLeader = undefined;\n };\n /**\n * @private\n */\n TabElementBox.prototype.clone = function () {\n var span = new TabElementBox();\n span.characterFormat.copyFormat(this.characterFormat);\n span.tabText = this.tabText;\n span.tabLeader = this.tabLeader;\n span.text = this.text;\n if (this.margin) {\n span.margin = this.margin.clone();\n }\n span.width = this.width;\n span.height = this.height;\n return span;\n };\n return TabElementBox;\n}(TextElementBox));\nexport { TabElementBox };\n/**\n * @private\n */\nvar BookmarkElementBox = /** @class */ (function (_super) {\n __extends(BookmarkElementBox, _super);\n function BookmarkElementBox(type) {\n var _this = _super.call(this) || this;\n _this.bookmarkTypeIn = 0;\n _this.refereneceIn = undefined;\n _this.nameIn = '';\n _this.bookmarkTypeIn = type;\n return _this;\n }\n Object.defineProperty(BookmarkElementBox.prototype, \"bookmarkType\", {\n /**\n * @private\n */\n get: function () {\n return this.bookmarkTypeIn;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(BookmarkElementBox.prototype, \"name\", {\n /**\n * @private\n */\n get: function () {\n return this.nameIn;\n },\n /**\n * @private\n */\n set: function (name) {\n this.nameIn = name;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(BookmarkElementBox.prototype, \"reference\", {\n /**\n * @private\n */\n get: function () {\n return this.refereneceIn;\n },\n /**\n * @private\n */\n set: function (reference) {\n this.refereneceIn = reference;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @private\n */\n BookmarkElementBox.prototype.getLength = function () {\n return 1;\n };\n /**\n * @private\n */\n BookmarkElementBox.prototype.destroy = function () {\n this.name = undefined;\n this.reference = undefined;\n this.bookmarkTypeIn = undefined;\n };\n /**\n * Clones the bookmark element box.\n * @param element - book mark element\n */\n /**\n * @private\n */\n BookmarkElementBox.prototype.clone = function () {\n var span = new BookmarkElementBox(this.bookmarkType);\n span.name = this.name;\n span.reference = this.reference;\n if (this.margin) {\n span.margin = this.margin.clone();\n }\n span.width = this.width;\n span.height = this.height;\n return span;\n };\n return BookmarkElementBox;\n}(ElementBox));\nexport { BookmarkElementBox };\n/**\n * @private\n */\nvar ImageElementBox = /** @class */ (function (_super) {\n __extends(ImageElementBox, _super);\n function ImageElementBox(isInlineImage) {\n var _this = _super.call(this) || this;\n _this.imageStr = '';\n _this.imgElement = undefined;\n _this.isInlineImageIn = true;\n /**\n * @private\n */\n _this.isMetaFile = false;\n _this.isInlineImageIn = isInlineImage;\n return _this;\n }\n Object.defineProperty(ImageElementBox.prototype, \"isInlineImage\", {\n /**\n * @private\n */\n get: function () {\n return this.isInlineImageIn;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ImageElementBox.prototype, \"element\", {\n /**\n * @private\n */\n get: function () {\n if (isNullOrUndefined(this.imgElement)) {\n this.imgElement = document.createElement('img');\n }\n return this.imgElement;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ImageElementBox.prototype, \"length\", {\n /**\n * @private\n */\n get: function () {\n return 1;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ImageElementBox.prototype, \"imageString\", {\n /**\n * @private\n */\n get: function () {\n return this.imageStr;\n },\n /**\n * @private\n */\n set: function (value) {\n this.imageStr = value;\n if (!isNullOrUndefined(value)) {\n this.element.src = this.imageStr;\n }\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @private\n */\n ImageElementBox.prototype.getLength = function () {\n return 1;\n };\n /**\n * @private\n */\n ImageElementBox.prototype.clone = function () {\n var image = new ImageElementBox(this.isInlineImage);\n image.characterFormat.copyFormat(this.characterFormat);\n image.imageString = this.imageString;\n image.isMetaFile = this.isMetaFile;\n image.width = this.width;\n image.height = this.height;\n if (this.margin) {\n image.margin = this.margin.clone();\n }\n return image;\n };\n /**\n * @private\n */\n ImageElementBox.prototype.destroy = function () {\n this.imgElement = undefined;\n this.imageString = undefined;\n this.isInlineImageIn = undefined;\n _super.prototype.destroy.call(this);\n };\n return ImageElementBox;\n}(ElementBox));\nexport { ImageElementBox };\n/**\n * @private\n */\nvar ListTextElementBox = /** @class */ (function (_super) {\n __extends(ListTextElementBox, _super);\n function ListTextElementBox(listLevel, isListFollowCharacter) {\n var _this = _super.call(this) || this;\n /**\n * @private\n */\n _this.baselineOffset = 0;\n /**\n * @private\n */\n _this.isFollowCharacter = false;\n _this.listLevel = listLevel;\n _this.isFollowCharacter = isListFollowCharacter;\n return _this;\n }\n /**\n * @private\n */\n ListTextElementBox.prototype.getLength = function () {\n return this.text ? this.text.length : 0;\n };\n /**\n * @private\n */\n ListTextElementBox.prototype.clone = function () {\n var list = new ListTextElementBox(this.listLevel, this.isFollowCharacter);\n list.text = this.text;\n list.baselineOffset = this.baselineOffset;\n if (this.margin) {\n list.margin = this.margin.clone();\n }\n list.width = this.width;\n list.height = this.height;\n return list;\n };\n /**\n * @private\n */\n ListTextElementBox.prototype.destroy = function () {\n this.text = undefined;\n _super.prototype.destroy.call(this);\n };\n return ListTextElementBox;\n}(ElementBox));\nexport { ListTextElementBox };\n/**\n * @private\n */\nvar Page = /** @class */ (function () {\n /**\n * Initialize the constructor of Page\n */\n function Page() {\n /**\n * Specifies the Bonding Rectangle\n * @private\n */\n this.boundingRectangle = new Rect(96, 96, 816, 1056);\n /**\n * @private\n */\n this.repeatHeaderRowTableWidget = false;\n /**\n * Specifies the bodyWidgets\n * @default []\n * @private\n */\n this.bodyWidgets = [];\n /**\n * @private\n */\n this.headerWidget = undefined;\n /**\n * @private\n */\n this.footerWidget = undefined;\n // let text: string = 'DocumentEditor';\n }\n Object.defineProperty(Page.prototype, \"index\", {\n /**\n * @private\n */\n get: function () {\n if (this.viewer) {\n return this.viewer.pages.indexOf(this);\n }\n return -1;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Page.prototype, \"previousPage\", {\n /**\n * @private\n */\n get: function () {\n var index = this.index;\n if (index > 0) {\n return this.viewer.pages[index - 1];\n }\n return undefined;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Page.prototype, \"nextPage\", {\n /**\n * @private\n */\n get: function () {\n var index = this.index;\n if (index < this.viewer.pages.length - 1) {\n return this.viewer.pages[index + 1];\n }\n return undefined;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Page.prototype, \"sectionIndex\", {\n /**\n * @private\n */\n get: function () {\n if (this.bodyWidgets.length > 0) {\n return this.bodyWidgets[0].index;\n }\n return -1;\n },\n enumerable: true,\n configurable: true\n });\n Page.prototype.destroy = function () {\n if (this.headerWidget) {\n this.headerWidget.destroy();\n }\n this.headerWidget = undefined;\n if (this.footerWidget) {\n this.footerWidget.destroy();\n }\n this.footerWidget = undefined;\n this.bodyWidgets = [];\n this.bodyWidgets = undefined;\n if (!isNullOrUndefined(this.viewer)) {\n if (!isNullOrUndefined(this.viewer.pages)) {\n this.viewer.removePage(this);\n }\n }\n this.viewer = undefined;\n };\n return Page;\n}());\nexport { Page };\n/**\n * @private\n */\nvar WTableHolder = /** @class */ (function () {\n function WTableHolder() {\n this.tableColumns = [];\n /**\n * @private\n */\n this.tableWidth = 0;\n }\n Object.defineProperty(WTableHolder.prototype, \"columns\", {\n get: function () {\n return this.tableColumns;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @private\n */\n WTableHolder.prototype.resetColumns = function () {\n for (var i = 0; i < this.tableColumns.length; i++) {\n this.tableColumns[i].destroy();\n }\n this.tableColumns = [];\n };\n /**\n * @private\n */\n WTableHolder.prototype.getPreviousSpannedCellWidth = function (previousColumnIndex, curColumnIndex) {\n var width = 0;\n for (var i = previousColumnIndex; i < curColumnIndex; i++) {\n width += this.tableColumns[i].preferredWidth;\n }\n return width;\n };\n /**\n * @private\n */\n WTableHolder.prototype.addColumns = function (currentColumnIndex, columnSpan, width, minWidth, offset) {\n for (var i = this.columns.length; i < columnSpan; i++) {\n this.columns.push(new WColumn());\n }\n var availableWidth = 0;\n for (var j = currentColumnIndex; j < columnSpan; j++) {\n availableWidth += this.columns[j].preferredWidth;\n }\n // If width to add is greater than preferred width, then preferred width will be increased.\n // In case of Gridspan > 1, only last grid column width will be updated.\n var gridSpan = columnSpan - currentColumnIndex;\n if (!(gridSpan > 1) && availableWidth < width) {\n this.columns[columnSpan - 1].preferredWidth += (width - availableWidth);\n }\n if (minWidth > this.columns[columnSpan - 1].minWidth) {\n this.columns[columnSpan - 1].minWidth = minWidth;\n }\n if (offset > this.columns[columnSpan - 1].endOffset) {\n this.columns[columnSpan - 1].endOffset = offset;\n }\n };\n /**\n * @private\n */\n WTableHolder.prototype.getTotalWidth = function () {\n var width = 0;\n for (var i = 0; i < this.columns.length; i++) {\n var column = this.columns[i];\n width += column.preferredWidth;\n }\n return width;\n };\n /**\n * @private\n */\n WTableHolder.prototype.isFitColumns = function (containerWidth, preferredTableWidth, isAutoWidth) {\n // Gets total preferred width.\n var totalColumnWidth = this.getTotalWidth();\n // If auto table width, based on total column widths, minimum value will be updated.\n if (isAutoWidth) {\n this.tableWidth = preferredTableWidth > totalColumnWidth ? totalColumnWidth : preferredTableWidth;\n }\n else {\n this.tableWidth = preferredTableWidth;\n }\n // If total columns width doesn't match table width, then all grid column widths will be updated by even factor.\n // If totalColumnWidth < TableWidth, all grid columns are enlarged. Otherwise shrinked.\n if (totalColumnWidth !== this.tableWidth) {\n var factor = this.tableWidth / totalColumnWidth;\n factor = isNaN(factor) ? 1 : factor;\n for (var i = 0; i < this.columns.length; i++) {\n var column = this.columns[i];\n //column.PreferredWidth = factor * column.PreferredWidth;\n if (factor * column.preferredWidth < column.minWidth) {\n return false;\n }\n }\n return true;\n }\n else {\n return true;\n }\n };\n /**\n * @private\n */\n WTableHolder.prototype.fitColumns = function (containerWidth, preferredTableWidth, isAutoWidth) {\n // Gets total preferred width.\n var totalColumnWidth = this.getTotalWidth();\n // If auto table width, based on total column widths, minimum value will be updated.\n if (isAutoWidth) {\n this.tableWidth = preferredTableWidth > totalColumnWidth ? totalColumnWidth : preferredTableWidth;\n }\n else {\n this.tableWidth = preferredTableWidth;\n }\n // If total columns width doesn't match table width, then all grid column widths will be updated by even factor.\n // If totalColumnWidth < TableWidth, all grid columns are enlarged. Otherwise shrinked.\n if (totalColumnWidth !== this.tableWidth) {\n var factor = this.tableWidth / totalColumnWidth;\n for (var i = 0; i < this.columns.length; i++) {\n var column = this.columns[i];\n column.preferredWidth = factor * column.preferredWidth;\n }\n }\n };\n /**\n * @private\n */\n WTableHolder.prototype.getCellWidth = function (columnIndex, columnSpan, preferredTableWidth, isAutoWidth) {\n var width = 0;\n if (isAutoWidth) {\n var cellWidth = preferredTableWidth / this.tableColumns.length;\n for (var i = 0; i < columnSpan; i++) {\n width += cellWidth;\n }\n }\n else {\n for (var i = 0; i < columnSpan; i++) {\n width += this.tableColumns[i + columnIndex].preferredWidth;\n }\n }\n return width;\n };\n /**\n * @private\n */\n WTableHolder.prototype.validateColumnWidths = function () {\n for (var i = 0; i < this.columns.length; i++) {\n if (i === 0) {\n if (this.columns[i].preferredWidth !== this.columns[i].endOffset) {\n this.columns[i].preferredWidth = this.columns[i].endOffset;\n }\n }\n else {\n // If Previous column offset + current column preferred width is less than current column offset, \n // Then current column preferred width is set to current column offset - previous column offset.\n if (this.columns[i - 1].endOffset + this.columns[i].preferredWidth < this.columns[i].endOffset) {\n this.columns[i].preferredWidth = this.columns[i].endOffset - this.columns[i - 1].endOffset;\n }\n }\n }\n };\n /**\n * @private\n */\n WTableHolder.prototype.clone = function () {\n var tableHolder = new WTableHolder();\n tableHolder.tableWidth = this.tableWidth;\n for (var i = 0; i < this.columns.length; i++) {\n tableHolder.columns.push(this.columns[i].clone());\n }\n return tableHolder;\n };\n /**\n * @private\n */\n WTableHolder.prototype.destroy = function () {\n if (!isNullOrUndefined(this.tableColumns)) {\n for (var i = 0; i < this.tableColumns.length; i++) {\n var column = this.tableColumns[i];\n column.destroy();\n }\n }\n this.tableColumns = [];\n this.tableColumns = undefined;\n this.tableWidth = undefined;\n };\n return WTableHolder;\n}());\nexport { WTableHolder };\n/**\n * @private\n */\nvar WColumn = /** @class */ (function () {\n function WColumn() {\n /**\n * @private\n */\n this.preferredWidth = 0;\n /**\n * @private\n */\n this.minWidth = 0;\n /**\n * @private\n */\n this.maxWidth = 0;\n /**\n * @private\n */\n this.endOffset = 0;\n }\n /**\n * @private\n */\n WColumn.prototype.clone = function () {\n var column = new WColumn();\n column.preferredWidth = this.preferredWidth;\n column.minWidth = this.minWidth;\n column.maxWidth = this.maxWidth;\n return column;\n };\n /**\n * @private\n */\n WColumn.prototype.destroy = function () {\n this.preferredWidth = undefined;\n this.minWidth = undefined;\n this.maxWidth = undefined;\n };\n return WColumn;\n}());\nexport { WColumn };\n","import { ContextMenu as Menu } from '@syncfusion/ej2-navigations';\nimport { isNullOrUndefined, L10n, setCulture, classList } from '@syncfusion/ej2-base';\nimport { FieldElementBox } from './viewer/page';\nvar CONTEXTMENU_COPY = '_contextmenu_copy';\nvar CONTEXTMENU_CUT = '_contextmenu_cut';\nvar CONTEXTMENU_PASTE = '_contextmenu_paste';\nvar CONTEXTMENU_UPDATE_FIELD = '_contextmenu_update_field';\nvar CONTEXTMENU_EDIT_FIELD = '_contextmenu_edit_field';\nvar CONTEXTMENU_HYPERLINK = '_contextmenu_hyperlink';\nvar CONTEXTMENU_OPEN_HYPERLINK = '_contextmenu_open_hyperlink';\nvar CONTEXTMENU_COPY_HYPERLINK = '_contextmenu_copy_hyperlink';\nvar CONTEXTMENU_REMOVE_HYPERLINK = '_contextmenu_remove_hyperlink';\nvar CONTEXTMENU_EDIT_HYPERLINK = '_contextmenu_edit_hyperlink';\nvar CONTEXTMENU_FONT_DIALOG = '_contextmenu_font_dialog';\nvar CONTEXTMENU_PARAGRAPH = '_contextmenu_paragraph_dialog';\nvar CONTEXTMENU_TABLE = '_contextmenu_table_dialog';\nvar CONTEXTMENU_INSERT_TABLE = '_contextmenu_insert_table';\nvar CONTEXTMENU_DELETE_TABLE = '_contextmenu_delete_table';\nvar CONTEXTMENU_INSERT_ABOVE = '_contextmenu_insert_above';\nvar CONTEXTMENU_INSERT_BELOW = '_contextmenu_insert_below';\nvar CONTEXTMENU_INSERT_RIGHT = '_contextmenu_insert_right';\nvar CONTEXTMENU_INSERT_LEFT = '_contextmenu_insert_left';\nvar CONTEXTMENU_COMPLETE_DELETE_TABLE = '_contextmenu_complete_table_delete';\nvar CONTEXTMENU_DELETE_ROW = '_contextmenu_delete_row';\nvar CONTEXTMENU_DELETE_COLUMN = '_contextmenu_delete_column';\nvar CONTEXTMENU_MERGE_CELL = '_contextmenu_merge_cell';\nvar CONTEXTMENU_CONTINUE_NUMBERING = '_contextmenu_continue_numbering';\nvar CONTEXTMENU_RESTART_AT = '_contextmenu_restart_at';\n/**\n * Context Menu class\n */\nvar ContextMenu = /** @class */ (function () {\n /**\n * @private\n */\n function ContextMenu(viewer) {\n var _this = this;\n /**\n * @private\n */\n this.contextMenuInstance = undefined;\n /**\n * Handles on context menu key pressed.\n * @param {PointerEvent} event\n * @private\n */\n this.onContextMenuInternal = function (event) {\n if (_this.showHideElements(_this.viewer.selection)) {\n _this.contextMenuInstance.open(event.y, event.x);\n event.preventDefault();\n }\n };\n this.viewer = viewer;\n var locale = new L10n('documenteditor', this.viewer.owner.defaultLocale);\n locale.setLocale(this.viewer.owner.locale);\n setCulture(this.viewer.owner.locale);\n this.initContextMenu(locale);\n }\n /**\n * Gets module name.\n */\n ContextMenu.prototype.getModuleName = function () {\n return 'ContextMenu';\n };\n /**\n * Initialize context menu.\n * @param localValue Localize value.\n * @private\n */\n // tslint:disable:max-func-body-length\n ContextMenu.prototype.initContextMenu = function (localValue) {\n var _this = this;\n var id = this.viewer.owner.element.id;\n this.contextMenu = document.createElement('div');\n this.contextMenu.id = this.viewer.owner.containerId + 'e-de-contextmenu';\n document.body.appendChild(this.contextMenu);\n var ul = document.createElement('ul');\n ul.style.width = 'auto';\n ul.id = this.viewer.owner.containerId + 'e-de-contextmenu-list';\n ul.style.listStyle = 'none';\n ul.style.margin = '0px';\n ul.style.padding = '0px';\n ul.style.maxHeight = 'auto';\n ul.oncontextmenu = this.disableBrowserContextmenu;\n this.contextMenu.appendChild(ul);\n var menuItems = [\n {\n text: localValue.getConstant('Cut'),\n iconCss: 'e-icons e-de-cut',\n id: id + CONTEXTMENU_CUT\n },\n {\n text: localValue.getConstant('Copy'),\n iconCss: 'e-icons e-de-copy',\n id: id + CONTEXTMENU_COPY\n },\n {\n text: localValue.getConstant('Paste'),\n iconCss: 'e-icons e-de-paste',\n id: id + CONTEXTMENU_PASTE\n },\n {\n separator: true\n },\n {\n text: localValue.getConstant('Update Field'),\n iconCss: 'e-icons e-de-update_field',\n id: id + CONTEXTMENU_UPDATE_FIELD\n },\n {\n text: localValue.getConstant('Edit Field'),\n iconCss: 'e-icons e-de-edit_field',\n id: id + CONTEXTMENU_EDIT_FIELD\n },\n {\n text: localValue.getConstant('Continue Numbering'),\n iconCss: 'e-icons e-de-continue-numbering',\n id: id + CONTEXTMENU_CONTINUE_NUMBERING\n },\n {\n text: localValue.getConstant('Restart At'),\n iconCss: 'e-icons e-de-restart-at',\n id: id + CONTEXTMENU_RESTART_AT\n },\n {\n separator: true\n },\n {\n text: localValue.getConstant('Hyperlink'),\n iconCss: 'e-icons e-de-insertlink',\n id: id + CONTEXTMENU_HYPERLINK\n },\n {\n text: localValue.getConstant('Edit Hyperlink...'),\n iconCss: 'e-icons e-de-edit-hyperlink',\n id: id + CONTEXTMENU_EDIT_HYPERLINK\n },\n {\n text: localValue.getConstant('Open Hyperlink'),\n iconCss: 'e-icons e-de-open-hyperlink',\n id: id + CONTEXTMENU_OPEN_HYPERLINK\n },\n {\n text: localValue.getConstant('Copy Hyperlink'),\n iconCss: 'e-icons e-de-copy-hyperlink',\n id: id + CONTEXTMENU_COPY_HYPERLINK\n },\n {\n text: localValue.getConstant('Remove Hyperlink'),\n iconCss: 'e-icons e-de-remove-hyperlink',\n id: id + CONTEXTMENU_REMOVE_HYPERLINK\n },\n {\n separator: true\n },\n {\n text: localValue.getConstant('Font'),\n iconCss: 'e-icons e-de-fonts',\n id: id + CONTEXTMENU_FONT_DIALOG\n },\n {\n text: localValue.getConstant('Paragraph'),\n iconCss: 'e-icons e-de-paragraph',\n id: id + CONTEXTMENU_PARAGRAPH\n },\n {\n separator: true,\n },\n {\n text: localValue.getConstant('Table Properties'),\n id: id + CONTEXTMENU_TABLE,\n iconCss: 'e-icons e-de-table'\n },\n {\n text: localValue.getConstant('Merge Cells'),\n id: id + CONTEXTMENU_MERGE_CELL,\n iconCss: 'e-de-icon-table-merge-cells'\n },\n {\n text: localValue.getConstant('Insert'),\n id: id + CONTEXTMENU_INSERT_TABLE,\n iconCss: 'e-icons',\n items: [\n {\n text: localValue.getConstant('Insert Above'),\n id: id + CONTEXTMENU_INSERT_ABOVE,\n iconCss: 'e-icons e-de-insertabove'\n },\n {\n text: localValue.getConstant('Insert Below'),\n id: id + CONTEXTMENU_INSERT_BELOW,\n iconCss: 'e-icons e-de-insertbelow'\n },\n {\n text: localValue.getConstant('Insert Left'),\n id: id + CONTEXTMENU_INSERT_LEFT,\n iconCss: 'e-icons e-de-insertleft'\n },\n {\n text: localValue.getConstant('Insert Right'),\n id: id + CONTEXTMENU_INSERT_RIGHT,\n iconCss: 'e-icons e-de-insertright'\n }\n ]\n },\n {\n text: localValue.getConstant('Delete'),\n id: id + CONTEXTMENU_DELETE_TABLE,\n iconCss: 'e-icons',\n items: [\n {\n text: localValue.getConstant('Delete Table'),\n id: id + CONTEXTMENU_COMPLETE_DELETE_TABLE,\n iconCss: 'e-icons e-de-delete-table'\n },\n {\n text: localValue.getConstant('Delete Row'),\n id: id + CONTEXTMENU_DELETE_ROW,\n iconCss: 'e-icons e-de-deleterow'\n },\n {\n text: localValue.getConstant('Delete Column'),\n id: id + CONTEXTMENU_DELETE_COLUMN,\n iconCss: 'e-icons e-de-deletecolumn'\n }\n ]\n },\n ];\n var menuOptions = {\n target: '#' + this.viewer.owner.containerId + 'e-de-contextmenu',\n items: menuItems,\n select: function (args) {\n var item = args.element.id;\n _this.handleContextMenuItem(item);\n },\n };\n this.contextMenuInstance = new Menu(menuOptions, '#' + this.viewer.owner.containerId + 'e-de-contextmenu-list');\n this.contextMenuInstance.beforeOpen = function () {\n if (_this.viewer && _this.viewer.selection) {\n classList(_this.viewer.selection.caret, [], ['e-de-cursor-animation']);\n _this.viewer.selection.showCaret();\n }\n };\n this.contextMenuInstance.onClose = function () {\n if (_this.viewer && _this.viewer.selection) {\n classList(_this.viewer.selection.caret, ['e-de-cursor-animation'], []);\n _this.viewer.updateFocus();\n }\n };\n };\n /**\n * Disable browser context menu.\n */\n ContextMenu.prototype.disableBrowserContextmenu = function () {\n return false;\n };\n /**\n * Handles context menu items.\n * @param {string} item Specifies which item is selected.\n * @private\n */\n ContextMenu.prototype.handleContextMenuItem = function (item) {\n var id = this.viewer.owner.element.id;\n switch (item) {\n case id + CONTEXTMENU_COPY:\n this.viewer.selection.copy();\n break;\n case id + CONTEXTMENU_CUT:\n this.viewer.owner.editor.cut();\n break;\n case id + CONTEXTMENU_PASTE:\n if (!this.viewer.owner.isReadOnlyMode) {\n this.viewer.owner.editorModule.pasteInternal(undefined);\n }\n break;\n case id + CONTEXTMENU_UPDATE_FIELD:\n if (!this.viewer.owner.isReadOnlyMode) {\n this.viewer.owner.editorModule.updateToc();\n }\n break;\n case id + CONTEXTMENU_EDIT_FIELD:\n if (!this.viewer.owner.isReadOnlyMode) {\n this.viewer.owner.tableOfContentsDialogModule.show();\n }\n break;\n case id + CONTEXTMENU_FONT_DIALOG:\n if (this.viewer.owner.fontDialogModule) {\n this.viewer.owner.fontDialogModule.showFontDialog();\n }\n break;\n case id + CONTEXTMENU_OPEN_HYPERLINK:\n this.viewer.selection.navigateHyperlink();\n break;\n case id + CONTEXTMENU_COPY_HYPERLINK:\n this.viewer.selection.copyHyperlink();\n break;\n case id + CONTEXTMENU_EDIT_HYPERLINK:\n case id + CONTEXTMENU_HYPERLINK:\n if (this.viewer.owner.hyperlinkDialogModule) {\n this.viewer.owner.hyperlinkDialogModule.show();\n }\n break;\n case id + CONTEXTMENU_REMOVE_HYPERLINK:\n this.viewer.owner.editor.removeHyperlink();\n break;\n case id + CONTEXTMENU_PARAGRAPH:\n if (this.viewer.owner.paragraphDialogModule) {\n this.viewer.owner.paragraphDialogModule.show();\n }\n break;\n case id + CONTEXTMENU_TABLE:\n this.viewer.owner.tablePropertiesDialogModule.show();\n break;\n case id + CONTEXTMENU_MERGE_CELL:\n this.viewer.owner.editor.mergeCells();\n break;\n case id + CONTEXTMENU_INSERT_ABOVE:\n this.viewer.owner.editor.insertRow(true);\n break;\n case id + CONTEXTMENU_INSERT_BELOW:\n this.viewer.owner.editor.insertRow(false);\n break;\n case id + CONTEXTMENU_INSERT_LEFT:\n this.viewer.owner.editor.insertColumn(true);\n break;\n case id + CONTEXTMENU_INSERT_RIGHT:\n this.viewer.owner.editor.insertColumn(false);\n break;\n case id + CONTEXTMENU_COMPLETE_DELETE_TABLE:\n this.viewer.owner.editor.deleteTable();\n break;\n case id + CONTEXTMENU_DELETE_ROW:\n this.viewer.owner.editor.deleteRow();\n break;\n case id + CONTEXTMENU_DELETE_COLUMN:\n this.viewer.owner.editor.deleteColumn();\n break;\n case id + CONTEXTMENU_CONTINUE_NUMBERING:\n this.viewer.owner.editorModule.applyContinueNumbering(this.viewer.selection);\n break;\n case id + CONTEXTMENU_RESTART_AT:\n this.viewer.owner.editorModule.applyRestartNumbering(this.viewer.selection);\n break;\n }\n };\n ContextMenu.prototype.showHideElements = function (selection) {\n var owner = this.viewer.owner;\n var id = owner.element.id;\n var copy = document.getElementById(id + CONTEXTMENU_COPY);\n var cut = document.getElementById(id + CONTEXTMENU_CUT);\n var paste = document.getElementById(id + CONTEXTMENU_PASTE);\n var updateField = document.getElementById(id + CONTEXTMENU_UPDATE_FIELD);\n var editField = document.getElementById(id + CONTEXTMENU_EDIT_FIELD);\n var font = document.getElementById(id + CONTEXTMENU_FONT_DIALOG);\n var paragraph = document.getElementById(id + CONTEXTMENU_PARAGRAPH);\n var tableProperties = document.getElementById(id + CONTEXTMENU_TABLE);\n var insertTable = document.getElementById(id + CONTEXTMENU_INSERT_TABLE);\n var deleteTable = document.getElementById(id + CONTEXTMENU_DELETE_TABLE);\n var mergeCells = document.getElementById(id + CONTEXTMENU_MERGE_CELL);\n var hyperlink = document.getElementById(id + CONTEXTMENU_HYPERLINK);\n var openHyperlink = document.getElementById(id + CONTEXTMENU_OPEN_HYPERLINK);\n var editHyperlink = document.getElementById(id + CONTEXTMENU_EDIT_HYPERLINK);\n var copyHyperlink = document.getElementById(id + CONTEXTMENU_COPY_HYPERLINK);\n var removeHyperlink = document.getElementById(id + CONTEXTMENU_REMOVE_HYPERLINK);\n var continueNumbering = document.getElementById(id + CONTEXTMENU_CONTINUE_NUMBERING);\n var restartAt = document.getElementById(id + CONTEXTMENU_RESTART_AT);\n cut.style.display = 'none';\n paste.style.display = 'none';\n paste.nextSibling.style.display = 'none';\n hyperlink.style.display = 'none';\n openHyperlink.style.display = 'none';\n copyHyperlink.style.display = 'none';\n editHyperlink.style.display = 'none';\n removeHyperlink.style.display = 'none';\n removeHyperlink.nextSibling.style.display = 'none';\n mergeCells.style.display = 'none';\n font.style.display = 'none';\n paragraph.style.display = 'none';\n paragraph.nextSibling.style.display = 'none';\n insertTable.style.display = 'none';\n deleteTable.style.display = 'none';\n tableProperties.style.display = 'none';\n updateField.style.display = 'none';\n editField.style.display = 'none';\n continueNumbering.style.display = 'none';\n restartAt.style.display = 'none';\n restartAt.nextSibling.style.display = 'none';\n if (isNullOrUndefined(selection)) {\n return false;\n }\n selection.hideToolTip();\n if (selection.isEmpty) {\n cut.classList.add('e-disabled');\n copy.classList.add('e-disabled');\n }\n else {\n cut.classList.remove('e-disabled');\n copy.classList.remove('e-disabled');\n }\n if (owner.isReadOnlyMode) {\n return true;\n }\n cut.style.display = 'block';\n paste.style.display = 'block';\n paste.nextSibling.style.display = 'block';\n insertTable.classList.add('e-blankicon');\n deleteTable.classList.add('e-blankicon');\n updateField.classList.add('e-blankicon');\n editField.classList.add('e-blankicon');\n mergeCells.classList.add('e-blankicon');\n if (owner.enableLocalPaste && !isNullOrUndefined(owner.editor.copiedData)) {\n paste.classList.remove('e-disabled');\n }\n else {\n paste.classList.add('e-disabled');\n }\n if (selection.contextType === 'TableOfContents') {\n updateField.style.display = 'block';\n editField.style.display = 'block';\n restartAt.nextSibling.style.display = 'block';\n }\n else {\n var start = selection.start;\n var end = selection.end;\n if (selection.contextType === 'List'\n && owner.editorModule.getListLevel(start.paragraph).listLevelPattern !== 'Bullet') {\n continueNumbering.style.display = 'block';\n restartAt.style.display = 'block';\n restartAt.nextSibling.style.display = 'block';\n }\n var isCellOrRowSelected = start.paragraph.isInsideTable && (!end.paragraph.isInsideTable\n || start.paragraph.associatedCell !== end.paragraph.associatedCell\n || selection.isCellSelected(start.paragraph.associatedCell, start, end));\n if (isCellOrRowSelected) {\n hyperlink.classList.add('e-disabled');\n }\n else {\n if (hyperlink.classList.contains('e-disabled')) {\n hyperlink.classList.remove('e-disabled');\n }\n }\n var field = selection.getHyperlinkField();\n if (field instanceof FieldElementBox && !selection.isImageField()) {\n openHyperlink.style.display = 'block';\n copyHyperlink.style.display = 'block';\n if (owner.hyperlinkDialogModule) {\n editHyperlink.style.display = 'block';\n }\n removeHyperlink.style.display = 'block';\n removeHyperlink.nextSibling.style.display = 'block';\n }\n else {\n if (owner.hyperlinkDialogModule) {\n hyperlink.style.display = 'block';\n }\n }\n }\n if (this.viewer.owner.selection.start.paragraph.isInsideTable\n && this.viewer.owner.selection.end.paragraph.isInsideTable) {\n paragraph.nextSibling.style.display = 'block';\n if (owner.tablePropertiesDialogModule) {\n tableProperties.style.display = 'block';\n }\n insertTable.style.display = 'block';\n deleteTable.style.display = 'block';\n if (this.viewer.owner.editor.canMergeCells()) {\n mergeCells.style.display = 'block';\n }\n }\n else {\n if (this.viewer.owner.fontDialogModule) {\n font.style.display = 'block';\n font.previousSibling.style.display = 'block';\n }\n if (this.viewer.owner.paragraphDialogModule) {\n paragraph.style.display = 'block';\n }\n }\n if (selection.contextType === 'Image') {\n font.style.display = 'none';\n paragraph.style.display = 'none';\n removeHyperlink.nextSibling.style.display = 'none';\n }\n return true;\n };\n /**\n * Disposes the internal objects which are maintained.\n * @private\n */\n ContextMenu.prototype.destroy = function () {\n if (this.contextMenuInstance) {\n this.contextMenuInstance.destroy();\n }\n if (this.contextMenu) {\n if (this.contextMenu.parentElement) {\n this.contextMenu.parentElement.removeChild(this.contextMenu);\n }\n this.contextMenu.innerHTML = '';\n }\n this.contextMenu = undefined;\n this.contextMenuInstance = undefined;\n };\n return ContextMenu;\n}());\nexport { ContextMenu };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * @private\n */\nvar WAbstractList = /** @class */ (function () {\n function WAbstractList() {\n this.abstractListIdIn = -1;\n this.levels = [];\n }\n Object.defineProperty(WAbstractList.prototype, \"abstractListId\", {\n get: function () {\n return this.abstractListIdIn;\n },\n set: function (abstractListId) {\n this.abstractListIdIn = abstractListId;\n },\n enumerable: true,\n configurable: true\n });\n WAbstractList.prototype.destroy = function () {\n if (!isNullOrUndefined(this.levels)) {\n for (var i = 0; i < this.levels.length; i++) {\n var listLevel = this.levels[i];\n listLevel.destroy();\n this.levels.splice(this.levels.indexOf(listLevel), 1);\n i--;\n }\n this.levels = [];\n }\n this.levels = undefined;\n };\n return WAbstractList;\n}());\nexport { WAbstractList };\n","import { Dictionary } from '../../base/dictionary';\nimport { WUniqueFormat } from '../../base/unique-format';\nimport { WUniqueFormats } from '../../base/unique-formats';\nimport { WCharacterFormat } from '../format/character-format';\nimport { WParagraphFormat } from '../format/paragraph-format';\nimport { WAbstractList } from './abstract-list';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * @private\n */\nvar WListLevel = /** @class */ (function () {\n function WListLevel(node) {\n this.uniqueListLevel = undefined;\n this.paragraphFormat = undefined;\n this.characterFormat = undefined;\n if (node instanceof WAbstractList) {\n this.ownerBase = node;\n }\n else {\n this.ownerBase = node;\n }\n this.characterFormat = new WCharacterFormat(undefined);\n this.paragraphFormat = new WParagraphFormat(undefined);\n }\n Object.defineProperty(WListLevel.prototype, \"listLevelPattern\", {\n get: function () {\n return this.getPropertyValue('listLevelPattern');\n },\n set: function (listLevelPattern) {\n this.setPropertyValue('listLevelPattern', listLevelPattern);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WListLevel.prototype, \"followCharacter\", {\n get: function () {\n return this.getPropertyValue('followCharacter');\n },\n set: function (followCharacter) {\n this.setPropertyValue('followCharacter', followCharacter);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WListLevel.prototype, \"startAt\", {\n get: function () {\n return this.getPropertyValue('startAt');\n },\n set: function (startAt) {\n this.setPropertyValue('startAt', startAt);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WListLevel.prototype, \"numberFormat\", {\n get: function () {\n return this.getPropertyValue('numberFormat');\n },\n set: function (numberFormat) {\n this.setPropertyValue('numberFormat', numberFormat);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WListLevel.prototype, \"restartLevel\", {\n get: function () {\n return this.getPropertyValue('restartLevel');\n },\n set: function (restartLevel) {\n this.setPropertyValue('restartLevel', restartLevel);\n },\n enumerable: true,\n configurable: true\n });\n WListLevel.prototype.getPropertyValue = function (property) {\n var propertyType = WUniqueFormat.getPropertyType(WListLevel.uniqueFormatType, property);\n if (!isNullOrUndefined(this.uniqueListLevel) && this.uniqueListLevel.propertiesHash.containsKey(propertyType)) {\n return this.uniqueListLevel.propertiesHash.get(propertyType);\n }\n return WListLevel.getPropertyDefaultValue(property);\n };\n WListLevel.prototype.setPropertyValue = function (property, value) {\n if (isNullOrUndefined(value) || value === '') {\n value = WListLevel.getPropertyDefaultValue(property);\n }\n if (isNullOrUndefined(this.uniqueListLevel)) {\n this.initializeUniqueWListLevel(property, value);\n }\n else {\n var propertyType = WUniqueFormat.getPropertyType(this.uniqueListLevel.uniqueFormatType, property);\n if (this.uniqueListLevel.propertiesHash.containsKey(propertyType) &&\n // tslint:disable-next-line:max-line-length\n this.uniqueListLevel.propertiesHash.get(propertyType) === value) {\n return;\n }\n // tslint:disable-next-line:max-line-length\n this.uniqueListLevel = WListLevel.uniqueListLevels.updateUniqueFormat(this.uniqueListLevel, property, value);\n }\n };\n WListLevel.prototype.initializeUniqueWListLevel = function (property, propValue) {\n var uniqueListLevelTemp = new Dictionary();\n this.addUniqueWListLevel('listLevelPattern', property, propValue, uniqueListLevelTemp);\n this.addUniqueWListLevel('startAt', property, propValue, uniqueListLevelTemp);\n this.addUniqueWListLevel('followCharacter', property, propValue, uniqueListLevelTemp);\n this.addUniqueWListLevel('numberFormat', property, propValue, uniqueListLevelTemp);\n this.addUniqueWListLevel('restartLevel', property, propValue, uniqueListLevelTemp);\n // tslint:disable-next-line:max-line-length \n this.uniqueListLevel = WListLevel.uniqueListLevels.addUniqueFormat(uniqueListLevelTemp, WListLevel.uniqueFormatType);\n };\n // tslint:disable-next-line:max-line-length\n WListLevel.prototype.addUniqueWListLevel = function (property, modifiedProperty, propValue, uniqueCharFormatTemp) {\n var propertyType;\n propertyType = WUniqueFormat.getPropertyType(WListLevel.uniqueFormatType, property);\n if (property === modifiedProperty) {\n uniqueCharFormatTemp.add(propertyType, propValue);\n }\n else {\n uniqueCharFormatTemp.add(propertyType, WListLevel.getPropertyDefaultValue(property));\n }\n };\n WListLevel.getPropertyDefaultValue = function (property) {\n var value = undefined;\n switch (property) {\n case 'listLevelPattern':\n value = 'Arabic';\n break;\n case 'startAt':\n value = 0;\n break;\n case 'followCharacter':\n value = 'Tab';\n break;\n case 'numberFormat':\n value = '';\n break;\n case 'restartLevel':\n value = 0;\n break;\n }\n return value;\n };\n WListLevel.prototype.destroy = function () {\n if (!isNullOrUndefined(this.characterFormat)) {\n this.characterFormat.destroy();\n }\n if (!isNullOrUndefined(this.paragraphFormat)) {\n this.paragraphFormat.destroy();\n }\n if (!isNullOrUndefined(this.uniqueListLevel)) {\n WListLevel.uniqueListLevels.remove(this.uniqueListLevel);\n }\n this.uniqueListLevel = undefined;\n this.characterFormat = undefined;\n this.paragraphFormat = undefined;\n };\n WListLevel.clear = function () {\n this.uniqueListLevels.clear();\n };\n WListLevel.dotBullet = '\\uf0b7';\n WListLevel.squareBullet = '\\uf0a7'; //Symbol font \\u25aa.\n WListLevel.arrowBullet = '\\u27a4';\n WListLevel.circleBullet = '\\uf06f' + '\\u0020';\n WListLevel.uniqueListLevels = new WUniqueFormats();\n WListLevel.uniqueFormatType = 9;\n return WListLevel;\n}());\nexport { WListLevel };\n","import { Dictionary } from '../../base/dictionary';\nimport { WListLevel } from '../list/list-level';\nimport { WCharacterFormat, WParagraphFormat } from '../format/index';\nimport { WBorder } from '../format/index';\nimport { PageLayoutViewer } from './viewer';\nimport { LineWidget, Rect, Widget, Margin, ParagraphWidget, BodyWidget, TextElementBox, ElementBox, ListTextElementBox, TableCellWidget, TableRowWidget, TableWidget, FieldElementBox, BlockWidget, HeaderFooterWidget, BlockContainer, BookmarkElementBox, FieldTextElementBox, TabElementBox } from './page';\nimport { HelperMethods } from '../editor/editor-helper';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * @private\n */\nvar Layout = /** @class */ (function () {\n /**\n * viewer definition\n */\n function Layout(viewer) {\n /**\n * @private\n */\n this.allowLayout = true;\n /**\n * @private\n */\n this.isInitialLoad = true;\n this.fieldBegin = undefined;\n this.maxTextHeight = 0;\n this.maxBaseline = 0;\n this.maxTextBaseline = 0;\n this.isFieldCode = false;\n this.viewer = viewer;\n }\n /**\n * @private\n */\n Layout.prototype.layout = function () {\n // Todo: Need to handle complete document layout(relayout).\n var page = this.viewer.pages[0];\n var body = page.bodyWidgets[0];\n };\n /**\n * Releases un-managed and - optionally - managed resources.\n */\n Layout.prototype.destroy = function () {\n this.viewer = undefined;\n this.value = undefined;\n this.allowLayout = undefined;\n this.isInitialLoad = undefined;\n this.fieldBegin = undefined;\n this.maxTextHeight = undefined;\n this.maxBaseline = undefined;\n this.maxTextBaseline = undefined;\n this.isFieldCode = undefined;\n };\n /**\n * Layouts the items\n * @private\n */\n Layout.prototype.layoutItems = function (sections) {\n var page;\n for (var i = 0; i < sections.length; i++) {\n var section = sections[i];\n page = this.viewer.createNewPage(section);\n this.addBodyWidget(this.viewer.clientActiveArea, section);\n if (this.viewer.pages.length > 1) {\n var pageIndex = 0;\n for (var i_1 = 0; i_1 < this.viewer.pages.length; i_1++) {\n var prevPage = this.viewer.pages[i_1];\n var prevSectionIndex = prevPage.sectionIndex;\n var index = section.index;\n if (prevSectionIndex > index || prevPage === page) {\n break;\n }\n pageIndex++;\n }\n if (pageIndex < this.viewer.pages.length - 1) {\n this.viewer.insertPage(pageIndex, page);\n }\n }\n this.layoutSection(section, 0, this.viewer);\n }\n this.updateFieldElements();\n this.viewer.updateScrollBars();\n this.isInitialLoad = false;\n };\n /**\n * Layouts the items\n * @param section\n * @param viewer\n * @private\n */\n Layout.prototype.layoutSection = function (section, index, viewer, ownerWidget) {\n var block = section.firstChild;\n var nextBlock;\n do {\n this.viewer.updateClientAreaForBlock(block, true);\n nextBlock = this.layoutBlock(block, index);\n index = 0;\n this.viewer.updateClientAreaForBlock(block, false);\n block = nextBlock;\n } while (block);\n };\n /**\n * Layouts the header footer items\n * @param section\n * @param viewer\n * @private\n */\n Layout.prototype.layoutHeaderFooter = function (section, viewer, page) {\n //Header layout\n var headerFooterWidget = viewer.getCurrentPageHeaderFooter(section, true);\n if (headerFooterWidget) {\n var header = headerFooterWidget.clone();\n header.page = page;\n viewer.updateHFClientArea(section.sectionFormat, true);\n page.headerWidget = this.layoutHeaderFooterItems(viewer, header);\n this.updateHeaderFooterToParent(header);\n }\n //Footer Layout\n headerFooterWidget = viewer.getCurrentPageHeaderFooter(section, false);\n if (headerFooterWidget) {\n var footer = headerFooterWidget.clone();\n footer.page = page;\n viewer.updateHFClientArea(section.sectionFormat, false);\n page.footerWidget = this.layoutHeaderFooterItems(viewer, footer);\n this.updateHeaderFooterToParent(footer);\n }\n };\n /**\n * @private\n */\n Layout.prototype.updateHeaderFooterToParent = function (node) {\n var sectionIndex = node.page.sectionIndex;\n var typeIndex = this.viewer.getHeaderFooter(node.headerFooterType);\n var clone = node.clone();\n this.viewer.headersFooters[sectionIndex][typeIndex] = clone;\n for (var j = 0; j < clone.childWidgets.length; j++) {\n var child = clone.childWidgets[j];\n if (child instanceof TableWidget) {\n this.clearTableWidget(child, false, true);\n }\n }\n return clone;\n };\n Layout.prototype.linkFieldInHeaderFooter = function (widget) {\n var firstChild = widget.firstChild;\n do {\n if (firstChild instanceof ParagraphWidget) {\n this.linkFieldInParagraph(firstChild);\n }\n else {\n this.linkFieldInTable(firstChild);\n }\n //tslint:disable:no-conditional-assignment\n } while (firstChild = firstChild.nextWidget);\n };\n /**\n * @private\n */\n Layout.prototype.linkFieldInParagraph = function (widget) {\n for (var j = 0; j < widget.childWidgets.length; j++) {\n var line = widget.childWidgets[j];\n for (var i = 0; i < line.children.length; i++) {\n var element = line.children[i];\n if (element instanceof FieldElementBox && element.fieldType !== 0) {\n element.linkFieldCharacter(this.viewer);\n }\n }\n }\n };\n /**\n * @private\n */\n Layout.prototype.linkFieldInTable = function (widget) {\n for (var i = 0; i < widget.childWidgets.length; i++) {\n var row = widget.childWidgets[i];\n for (var j = 0; j < row.childWidgets.length; j++) {\n var cell = row.childWidgets[j];\n for (var k = 0; k < cell.childWidgets.length; k++) {\n var block = cell.childWidgets[k];\n if (block instanceof ParagraphWidget) {\n this.linkFieldInParagraph(block);\n }\n else {\n this.linkFieldInTable(block);\n }\n }\n }\n }\n };\n /**\n * Layouts the header footer items.\n * @param viewer\n * @param hfModule\n * @private\n */\n Layout.prototype.layoutHeaderFooterItems = function (viewer, widget) {\n this.viewer.updateClientAreaLocation(widget, viewer.clientActiveArea);\n if (widget.childWidgets.length === 0) {\n var pargaraph = new ParagraphWidget();\n var line = new LineWidget(pargaraph);\n pargaraph.childWidgets.push(line);\n widget.childWidgets.push(pargaraph);\n pargaraph.containerWidget = widget;\n }\n this.linkFieldInHeaderFooter(widget);\n for (var i = 0; i < widget.childWidgets.length; i++) {\n var block = widget.childWidgets[i];\n viewer.updateClientAreaForBlock(block, true);\n this.layoutBlock(block, 0);\n viewer.updateClientAreaForBlock(block, false);\n }\n var type = widget.headerFooterType;\n if (type === 'OddFooter' || type === 'EvenFooter' || type === 'FirstPageFooter') {\n this.shiftChildLocation(viewer.clientArea.y - viewer.clientActiveArea.y, widget);\n }\n return widget;\n };\n /**\n * Shifts the child location\n * @param shiftTop\n * @param bodyWidget\n */\n Layout.prototype.shiftChildLocation = function (shiftTop, bodyWidget) {\n bodyWidget.y += shiftTop;\n for (var i = 0; i < bodyWidget.childWidgets.length; i++) {\n var childWidget = bodyWidget.childWidgets[i];\n if (childWidget instanceof ParagraphWidget) {\n childWidget.x = childWidget.x;\n childWidget.y = childWidget.y + shiftTop;\n }\n else {\n this.shiftChildLocationForTableWidget(childWidget, shiftTop);\n }\n }\n };\n /**\n * Shifts the child location for table widget.\n * @param tableWidget\n * @param shiftTop\n */\n Layout.prototype.shiftChildLocationForTableWidget = function (tableWidget, shiftTop) {\n tableWidget.y = tableWidget.y + shiftTop;\n for (var i = 0; i < tableWidget.childWidgets.length; i++) {\n var childWidget = tableWidget.childWidgets[i];\n if (childWidget instanceof TableRowWidget) {\n this.shiftChildLocationForTableRowWidget(childWidget, shiftTop);\n }\n }\n };\n /**\n * Shifts the child location for table row widget.\n * @param rowWidget\n * @param shiftTop\n */\n Layout.prototype.shiftChildLocationForTableRowWidget = function (rowWidget, shiftTop) {\n rowWidget.y = rowWidget.y + shiftTop;\n for (var i = 0; i < rowWidget.childWidgets.length; i++) {\n this.shiftChildLocationForTableCellWidget(rowWidget.childWidgets[i], shiftTop);\n }\n };\n /**\n * Shifts the child location for table cell widget.\n * @param cellWidget\n * @param shiftTop\n */\n Layout.prototype.shiftChildLocationForTableCellWidget = function (cellWidget, shiftTop) {\n cellWidget.y = cellWidget.y + shiftTop;\n for (var i = 0; i < cellWidget.childWidgets.length; i++) {\n if (cellWidget.childWidgets[i] instanceof ParagraphWidget) {\n cellWidget.childWidgets[i].x = cellWidget.childWidgets[i].x;\n cellWidget.childWidgets[i].y = cellWidget.childWidgets[i].y + shiftTop;\n }\n else {\n this.shiftChildLocationForTableWidget(cellWidget.childWidgets[i], shiftTop);\n }\n }\n };\n /**\n * Layouts specified block.\n * @param block\n * @private\n */\n Layout.prototype.layoutBlock = function (block, index, moveToLine) {\n var nextBlock;\n if (block instanceof ParagraphWidget) {\n nextBlock = this.layoutParagraph(block, index);\n }\n else {\n nextBlock = this.layoutTable(block, index);\n }\n return nextBlock.nextRenderedWidget;\n };\n /**\n * Adds paragraph widget.\n * @param area\n */\n Layout.prototype.addParagraphWidget = function (area, paragraphWidget) {\n var ownerParaWidget = undefined;\n if (paragraphWidget.isEmpty() && !isNullOrUndefined(paragraphWidget.paragraphFormat) &&\n (paragraphWidget.paragraphFormat.textAlignment === 'Center' || paragraphWidget.paragraphFormat.textAlignment === 'Right') &&\n paragraphWidget.paragraphFormat.listFormat.listId === -1) {\n var top_1 = 0;\n var bottom = 0;\n var width = this.viewer.textHelper.getParagraphMarkWidth(paragraphWidget.characterFormat);\n var left = area.x;\n if (paragraphWidget.paragraphFormat.textAlignment === 'Center') {\n left += (area.width - width) / 2;\n }\n else {\n left += area.width - width;\n }\n paragraphWidget.width = width;\n paragraphWidget.x = left;\n paragraphWidget.y = area.y;\n }\n else {\n paragraphWidget.width = area.width;\n paragraphWidget.x = area.x;\n paragraphWidget.y = area.y;\n }\n return paragraphWidget;\n };\n /**\n * Adds line widget.\n * @param paragraph\n */\n Layout.prototype.addLineWidget = function (paragraphWidget) {\n var line = undefined;\n line = new LineWidget(paragraphWidget);\n line.width = paragraphWidget.width;\n paragraphWidget.childWidgets.push(line);\n line.paragraph = paragraphWidget;\n return line;\n };\n /**\n * Layouts specified paragraph.\n * @private\n * @param paragraph\n */\n Layout.prototype.layoutParagraph = function (paragraph, lineIndex) {\n this.addParagraphWidget(this.viewer.clientActiveArea, paragraph);\n this.layoutListItems(paragraph);\n if (paragraph.isEmpty()) {\n this.layoutEmptyLineWidget(paragraph, true);\n }\n else {\n var line = lineIndex < paragraph.childWidgets.length ?\n paragraph.childWidgets[lineIndex] : undefined;\n while (line instanceof LineWidget) {\n if (line.isFirstLine() && isNullOrUndefined(this.fieldBegin)) {\n if (!isNullOrUndefined(paragraph.paragraphFormat)) {\n // tslint:disable-next-line:max-line-length\n var firstLineIndent = -HelperMethods.convertPointToPixel(paragraph.paragraphFormat.firstLineIndent);\n this.viewer.updateClientWidth(firstLineIndent);\n }\n }\n line = this.layoutLine(line, 0);\n paragraph = line.paragraph;\n line = line.nextLine;\n }\n }\n this.updateWidgetToPage(this.viewer, paragraph);\n return paragraph;\n };\n Layout.prototype.clearLineMeasures = function () {\n this.maxBaseline = 0;\n this.maxTextBaseline = 0;\n this.maxTextHeight = 0;\n };\n Layout.prototype.moveElementFromNextLine = function (line) {\n var nextLine = line.nextLine;\n while (nextLine instanceof LineWidget) {\n if (nextLine.children.length > 0) {\n var element = nextLine.children.splice(0, 1)[0];\n line.children.push(element);\n element.line = line;\n break;\n }\n else {\n if (nextLine.paragraph.childWidgets.length === 1) {\n nextLine.paragraph.destroy();\n }\n else {\n nextLine.destroy();\n }\n nextLine = line.nextLine;\n }\n }\n };\n Layout.prototype.layoutLine = function (line, count) {\n var paragraph = line.paragraph;\n if (line.children.length === 0) {\n this.moveElementFromNextLine(line);\n }\n var element = line.children[count];\n this.clearLineMeasures();\n while (element instanceof ElementBox) {\n this.layoutElement(element, paragraph);\n line = element.line;\n element = element.nextElement;\n }\n return line;\n };\n // tslint:disable:max-func-body-length\n Layout.prototype.layoutElement = function (element, paragraph) {\n var line = element.line;\n var text = '';\n var index = element.indexInOwner;\n if (element instanceof FieldElementBox) {\n if (element.fieldType === 0 && this.viewer.fields.indexOf(element) === -1) {\n this.viewer.fields.push(element);\n }\n this.layoutFieldCharacters(element);\n if (element.line.isLastLine() && isNullOrUndefined(element.nextNode) && !this.isFieldCode) {\n if (isNullOrUndefined(element.fieldSeparator)) {\n this.layoutEmptyLineWidget(paragraph, false, element.line);\n }\n this.moveToNextLine(line);\n }\n else if (isNullOrUndefined(element.nextElement) && this.viewer.clientActiveArea.width > 0 && !element.line.isLastLine()) {\n this.moveElementFromNextLine(line);\n }\n return;\n }\n if (element instanceof ListTextElementBox || this.isFieldCode || element instanceof BookmarkElementBox) {\n if (isNullOrUndefined(element.nextElement) && this.viewer.clientActiveArea.width > 0 && !element.line.isLastLine()) {\n this.moveElementFromNextLine(line);\n }\n if (element.line.isLastLine() && isNullOrUndefined(element.nextElement)) {\n this.moveToNextLine(line);\n }\n return;\n }\n var width = element.width;\n if (element instanceof FieldTextElementBox) {\n text = this.viewer.getFieldResult(element.fieldBegin, element.paragraph.bodyWidget.page);\n if (text !== '') {\n element.text = text;\n }\n else {\n text = element.text;\n }\n }\n else if (element instanceof TextElementBox) {\n this.checkAndSplitTabOrLineBreakCharacter(element.text, element);\n text = element.text;\n }\n // Here field code width and height update need to skipped based on the hidden property.\n if (element instanceof TextElementBox) {\n width = this.viewer.textHelper.getTextSize(element, element.characterFormat);\n if (element.text === '\\t') {\n element.width = this.getTabWidth(paragraph, this.viewer, index, line, element);\n }\n }\n if (this.viewer instanceof PageLayoutViewer\n && this.viewer.clientActiveArea.height < element.height && this.viewer.clientActiveArea.y !== this.viewer.clientArea.y) {\n this.moveToNextPage(this.viewer, line);\n if (element instanceof FieldTextElementBox) {\n this.updateFieldText(element);\n }\n if (element.previousElement) {\n this.cutClientWidth(element.previousElement);\n }\n }\n if (width < this.viewer.clientActiveArea.width || !this.viewer.textWrap) {\n //Fits the text in current line.\n this.addElementToLine(paragraph, element);\n if (isNullOrUndefined(element.nextElement) && this.viewer.clientActiveArea.width > 0 && !element.line.isLastLine()) {\n this.moveElementFromNextLine(line);\n }\n else if (!element.line.isLastLine() && isNullOrUndefined(element.nextElement) && this.viewer.clientActiveArea.width === 0) {\n this.moveToNextLine(line);\n }\n }\n else if (element instanceof TextElementBox) {\n if (element.text === '\\t') {\n var currentLine = element.line;\n this.addSplittedLineWidget(currentLine, currentLine.children.indexOf(element));\n this.moveToNextLine(currentLine);\n // Recalculates tab width based on new client active area X position\n element.width = this.getTabWidth(paragraph, this.viewer, index, line, element);\n this.addElementToLine(paragraph, element);\n }\n else {\n //Splits the text and arrange line by line, till end of text.\n do {\n line = element.line;\n this.splitTextForClientArea(line, element, element.text, element.width, element.characterFormat);\n this.checkLineWidgetWithClientArea(line, element);\n if (element instanceof FieldTextElementBox) {\n this.updateFieldText(element);\n }\n } while (element.line !== line && this.cutClientWidth(element));\n }\n }\n else {\n do {\n line = element.line;\n this.splitElementForClientArea(paragraph, element);\n this.checkLineWidgetWithClientArea(line, element);\n if (element instanceof FieldTextElementBox) {\n this.updateFieldText(element);\n }\n } while (element.line !== line && this.cutClientWidth(element));\n }\n if (text === '\\v') {\n var elementIndex = line.children.indexOf(element);\n if (elementIndex > -1) {\n this.addSplittedLineWidget(line, elementIndex);\n }\n }\n if (element.line.isLastLine() && isNullOrUndefined(element.nextElement) || text === '\\v') {\n this.moveToNextLine(element.line);\n if (text === '\\v' && isNullOrUndefined(element.nextNode)) {\n this.layoutEmptyLineWidget(paragraph, true, line, true);\n }\n }\n };\n Layout.prototype.updateFieldText = function (element) {\n // tslint:disable-next-line:max-line-length\n var text = this.viewer.getFieldResult(element.fieldBegin, element.paragraph.bodyWidget.page);\n if (text !== '') {\n element.text = text;\n this.viewer.textHelper.getTextSize(element, element.characterFormat);\n }\n };\n Layout.prototype.checkLineWidgetWithClientArea = function (line, element) {\n if (line !== element.line || element.line === line && isNullOrUndefined(element.nextElement)\n && !element.line.isLastLine()) {\n this.moveToNextLine(line);\n }\n if (element.line !== line && this.viewer instanceof PageLayoutViewer\n && this.viewer.clientActiveArea.height < element.height &&\n this.viewer.clientActiveArea.y !== this.viewer.clientArea.y) {\n this.moveToNextPage(this.viewer, element.line);\n }\n else if (element.line === line && isNullOrUndefined(element.nextElement)\n && line.paragraph.lastChild === line && !line.isLastLine() && this.viewer.clientActiveArea.height >= 0) {\n this.moveLineFromSplittedParagraph(line);\n }\n };\n Layout.prototype.checkAndSplitTabOrLineBreakCharacter = function (text, element) {\n var char = ['\\t', '\\v'];\n var index = HelperMethods.indexOfAny(text, char);\n if (index > -1) {\n var character = text[index];\n if ((character === '\\t' && text !== '\\t') || (character === '\\v' && text !== '\\v')) {\n this.splitByLineBreakOrTab(this.viewer, element, index, character);\n }\n }\n };\n /**\n * @private\n */\n Layout.prototype.moveLineFromSplittedParagraph = function (line) {\n var nextLine = line.nextLine;\n if (nextLine && line.paragraph.childWidgets.indexOf(nextLine) === -1) {\n nextLine.paragraph.childWidgets.splice(nextLine.indexInOwner, 1);\n line.paragraph.childWidgets.push(nextLine);\n nextLine.paragraph = line.paragraph;\n }\n };\n Layout.prototype.cutClientWidth = function (currentElement) {\n this.clearLineMeasures();\n var line = currentElement.line;\n var width = 0;\n for (var i = 0; i < line.children.length; i++) {\n var element = line.children[i];\n width += element.width;\n if (currentElement === element) {\n break;\n }\n }\n var splitCurrentWidget = this.viewer.clientActiveArea.width - width < 0;\n if (!splitCurrentWidget) {\n this.viewer.cutFromLeft(this.viewer.clientActiveArea.x + width);\n if (currentElement.line.paragraph.paragraphFormat.textAlignment === 'Justify' &&\n currentElement instanceof TextElementBox) {\n this.splitTextElementWordByWord(currentElement);\n }\n if (isNullOrUndefined(currentElement.nextElement) && this.viewer.clientActiveArea.width > 0\n && !currentElement.line.isLastLine()) {\n this.moveElementFromNextLine(line);\n }\n }\n else if (currentElement.previousElement) {\n this.cutClientWidth(currentElement.previousElement);\n }\n return splitCurrentWidget;\n };\n Layout.prototype.layoutFieldCharacters = function (element) {\n if (element.fieldType === 0) {\n if (!this.isFieldCode && (!isNullOrUndefined(element.fieldEnd) || element.hasFieldEnd)) {\n this.viewer.fieldStacks.push(element);\n this.isFieldCode = true;\n element.hasFieldEnd = true;\n }\n }\n else if (this.viewer.fieldStacks.length > 0) {\n if (element.fieldType === 2) {\n var field = this.viewer.fieldStacks[this.viewer.fieldStacks.length - 1];\n if (field.fieldSeparator === element && (!isNullOrUndefined(field.fieldEnd) || field.hasFieldEnd)) {\n this.isFieldCode = false;\n }\n }\n else {\n var field = this.viewer.fieldStacks[this.viewer.fieldStacks.length - 1];\n if (element === field.fieldEnd) {\n this.viewer.fieldStacks.pop();\n this.isFieldCode = false;\n }\n }\n }\n };\n /**\n * Layouts empty line widget.\n */\n // tslint:disable-next-line:max-line-length\n Layout.prototype.layoutEmptyLineWidget = function (paragraph, isEmptyLine, line, isShiftEnter) {\n isShiftEnter = isNullOrUndefined(isShiftEnter) ? false : isShiftEnter;\n //Calculate line height and descent based on formatting defined in paragraph.\n var paragraphMarkSize = this.viewer.textHelper.getParagraphMarkSize(paragraph.characterFormat);\n var maxHeight = paragraphMarkSize.Height;\n var beforeSpacing = this.getBeforeSpacing(paragraph);\n var lineWidget;\n if (paragraph.childWidgets.length > 0 && !isShiftEnter) {\n lineWidget = paragraph.childWidgets[0];\n }\n else {\n lineWidget = isEmptyLine ? this.addLineWidget(paragraph) : line;\n }\n //isNullOrUndefined(this.viewer.currentHeaderFooter) && \n if (this.viewer instanceof PageLayoutViewer\n && this.viewer.clientActiveArea.height < beforeSpacing + maxHeight\n && this.viewer.clientActiveArea.y !== this.viewer.clientArea.y) {\n this.moveToNextPage(this.viewer, lineWidget);\n }\n //Gets line spacing.\n var lineSpacing = this.getLineSpacing(paragraph, maxHeight);\n var maxDescent = maxHeight - paragraphMarkSize.BaselineOffset;\n //Calculate the bottom position of current line - max height + line spacing.\n if (!isNaN(this.maxTextHeight)\n && maxHeight < this.maxTextHeight) {\n maxHeight = this.maxTextHeight;\n maxDescent = maxHeight - this.maxTextBaseline;\n }\n var topMargin = 0;\n var bottomMargin = 0;\n var leftMargin = 0;\n var height = maxHeight;\n var lineSpacingType = paragraph.paragraphFormat.lineSpacingType;\n if (lineSpacingType === 'Multiple') {\n if (lineSpacing > maxHeight) {\n bottomMargin += lineSpacing - maxHeight;\n }\n else {\n topMargin += lineSpacing - maxHeight;\n }\n }\n else if (lineSpacingType === 'Exactly') {\n topMargin += lineSpacing - (topMargin + height + bottomMargin);\n }\n else if (lineSpacing > topMargin + height + bottomMargin) {\n topMargin += lineSpacing - (topMargin + height + bottomMargin);\n }\n topMargin += beforeSpacing;\n bottomMargin += HelperMethods.convertPointToPixel(paragraph.paragraphFormat.afterSpacing);\n for (var i = 0; i < lineWidget.children.length; i++) {\n var element = lineWidget.children[i];\n if (element instanceof ListTextElementBox) {\n var textAlignment = paragraph.paragraphFormat.textAlignment;\n if (textAlignment === 'Right') {\n leftMargin = this.viewer.clientArea.width - element.width;\n }\n else if (textAlignment === 'Center') {\n leftMargin = (this.viewer.clientArea.width - element.width) / 2;\n }\n element.margin = new Margin(leftMargin, topMargin, 0, bottomMargin);\n element.line = lineWidget;\n lineWidget.height = topMargin + height + bottomMargin;\n }\n }\n lineWidget.height = topMargin + height + bottomMargin;\n this.viewer.cutFromTop(this.viewer.clientActiveArea.y + lineWidget.height);\n //Clears the previous line elements from collection. \n };\n /**\n * @private\n */\n Layout.prototype.layoutListItems = function (paragraph) {\n if (!this.isFieldCode) {\n if (!isNullOrUndefined(paragraph.paragraphFormat)\n && !isNullOrUndefined(paragraph.paragraphFormat.listFormat)\n && !isNullOrUndefined(this.viewer.getListById(paragraph.paragraphFormat.listFormat.listId)) &&\n paragraph.paragraphFormat.listFormat.listLevelNumber >= 0\n && paragraph.paragraphFormat.listFormat.listLevelNumber < 9) {\n this.clearListElementBox(paragraph);\n this.layoutList(paragraph, this.viewer);\n }\n else if (paragraph.paragraphFormat.listFormat && paragraph.paragraphFormat.listFormat.listId === -1) {\n this.clearListElementBox(paragraph);\n }\n }\n };\n /**\n * Layouts list.\n * @param viewer\n */\n Layout.prototype.layoutList = function (paragraph, viewer) {\n var list = viewer.getListById(paragraph.paragraphFormat.listFormat.listId);\n viewer.updateClientWidth(-HelperMethods.convertPointToPixel(paragraph.paragraphFormat.firstLineIndent));\n var currentListLevel = this.getListLevel(list, paragraph.paragraphFormat.listFormat.listLevelNumber);\n // if (isNullOrUndefined(currentListLevel)) {\n // return;\n // }\n var lineWidget = paragraph.childWidgets[0];\n if (isNullOrUndefined(lineWidget)) {\n lineWidget = new LineWidget(paragraph);\n paragraph.childWidgets.push(lineWidget);\n }\n var element = new ListTextElementBox(currentListLevel, false);\n element.line = lineWidget;\n if (currentListLevel.listLevelPattern === 'Bullet') {\n element.text = currentListLevel.numberFormat;\n }\n else {\n element.text = this.getListNumber(paragraph.paragraphFormat.listFormat);\n }\n viewer.textHelper.updateTextSize(element, paragraph);\n var moveToNextPage;\n if (this.viewer instanceof PageLayoutViewer\n && this.viewer.clientActiveArea.height < element.height && this.viewer.clientActiveArea.y !== this.viewer.clientArea.y) {\n moveToNextPage = true;\n }\n viewer.cutFromLeft(viewer.clientActiveArea.x + element.width);\n //Adds the text element to the line\n lineWidget.children.splice(0, 0, element);\n if (currentListLevel.followCharacter !== 'None') {\n element = new ListTextElementBox(currentListLevel, true);\n if (currentListLevel.followCharacter === 'Tab') {\n element.text = '\\t';\n var index = lineWidget.children.indexOf(element);\n element.width = this.getTabWidth(paragraph, viewer, index, lineWidget, undefined);\n }\n else {\n element.text = ' ';\n viewer.textHelper.updateTextSize(element, paragraph);\n }\n viewer.cutFromLeft(viewer.clientActiveArea.x + element.width);\n //Adds the tabSpace to the line\n lineWidget.children.splice(1, 0, element);\n element.line = lineWidget;\n }\n if (moveToNextPage) {\n this.moveToNextPage(this.viewer, lineWidget);\n this.cutClientWidth(element);\n return;\n }\n if (currentListLevel.followCharacter !== 'None') {\n viewer.updateClientWidth(HelperMethods.convertPointToPixel(paragraph.paragraphFormat.firstLineIndent));\n }\n };\n /**\n * Adds body widget.\n * @param area\n * @param section\n * @private\n */\n Layout.prototype.addBodyWidget = function (area, widget) {\n var bodyWidget;\n if (widget) {\n bodyWidget = widget;\n }\n else {\n bodyWidget = new BodyWidget();\n }\n bodyWidget.width = area.width;\n bodyWidget.x = area.x;\n bodyWidget.y = area.y;\n // this.addSectionInDictionary(this.viewer, section, bodyWidget);\n return bodyWidget;\n };\n /**\n * Adds list level.\n * @param abstractList\n */\n Layout.prototype.addListLevels = function (abstractList) {\n for (var i = abstractList.levels.length; i < 9; i++) {\n var listLevel = new WListLevel(abstractList);\n var val = i % 3;\n if (abstractList.levels[0].listLevelPattern === 'Bullet') {\n listLevel.listLevelPattern = 'Bullet';\n listLevel.numberFormat = val === 0 ? '\\uf0b7' : val === 1 ? '\\uf0a7' : '\\uf0d8';\n listLevel.characterFormat.fontFamily = listLevel.numberFormat === '\\uf0a7' || '\\uf0d8' ? 'Wingdings' : 'Symbol';\n }\n else {\n listLevel.listLevelPattern = this.getListLevelPattern(val);\n listLevel.numberFormat = '%' + (i + 1).toString() + '.';\n listLevel.startAt = 1;\n listLevel.restartLevel = i;\n }\n listLevel.paragraphFormat = new WParagraphFormat(undefined);\n listLevel.paragraphFormat.leftIndent = 48 * (i + 1);\n listLevel.paragraphFormat.firstLineIndent = -24;\n abstractList.levels.push(listLevel);\n }\n };\n Layout.prototype.addSplittedLineWidget = function (lineWidget, elementIndex, splittedElementBox) {\n var paragraph = lineWidget.paragraph;\n var movedElementBox = [];\n var lineIndex = paragraph.childWidgets.indexOf(lineWidget);\n if (!isNullOrUndefined(splittedElementBox)) {\n movedElementBox.push(splittedElementBox);\n }\n var newLineWidget = undefined;\n //Move Next element box to temp collection\n for (var i = elementIndex + 1; i < lineWidget.children.length; i++) {\n movedElementBox.push(lineWidget.children[i]);\n }\n if (movedElementBox.length > 0) {\n if (lineIndex === paragraph.childWidgets.length - 1) {\n newLineWidget = new LineWidget(paragraph);\n }\n else {\n newLineWidget = paragraph.childWidgets[lineIndex + 1];\n }\n for (var j = 0; j < movedElementBox.length; j++) {\n movedElementBox[j].line = newLineWidget;\n }\n lineWidget.children.splice(elementIndex + 1, lineWidget.children.length - 1);\n newLineWidget.children = movedElementBox.concat(newLineWidget.children);\n if (paragraph.childWidgets.indexOf(newLineWidget) === -1) {\n paragraph.childWidgets.splice(lineIndex + 1, 0, newLineWidget);\n }\n }\n };\n /**\n * Adds element to line.\n * @param element\n */\n Layout.prototype.addElementToLine = function (paragraph, element) {\n this.viewer.cutFromLeft(this.viewer.clientActiveArea.x + element.width);\n if (paragraph.paragraphFormat.textAlignment === 'Justify' && element instanceof TextElementBox) {\n this.splitTextElementWordByWord(element);\n }\n };\n /**\n * Splits element for client area.\n * @param element\n */\n Layout.prototype.splitElementForClientArea = function (paragraph, element) {\n var line = element.line;\n if (element.line.children.length > 0) {\n var previousElement = element.previousElement;\n var index = element.indexInOwner;\n // if line widget contain only single image element box need to skip this from splitting\n // else move element to next line\n if (element.line.children.length > 1) {\n if (previousElement && this.viewer.clientActiveArea.x !== this.viewer.clientArea.x) {\n index -= 1;\n }\n }\n this.addSplittedLineWidget(element.line, index);\n }\n };\n /**\n * Splits by word\n * @param elementBox\n * @param text\n * @param width\n * @param characterFormat\n */\n // tslint:disable-next-line:max-line-length\n Layout.prototype.splitByWord = function (lineWidget, paragraph, elementBox, text, width, characterFormat) {\n var index = this.getSplitIndexByWord(this.viewer.clientActiveArea.width, text, width, characterFormat);\n if (index > 0 && index < elementBox.length) {\n var indexOf = lineWidget.children.indexOf(elementBox);\n var lineIndex = paragraph.childWidgets.indexOf(lineWidget);\n var splittedElementBox = new TextElementBox();\n text = text.substring(index);\n splittedElementBox.text = text;\n if (text[0] === ' ') {\n var prevLength = text.length;\n text = HelperMethods.trimStart(text); //To trim white space at starting of the text.\n index += prevLength - text.length;\n }\n splittedElementBox.characterFormat.copyFormat(elementBox.characterFormat);\n splittedElementBox.width = this.viewer.textHelper.getWidth(splittedElementBox.text, characterFormat);\n elementBox.text = elementBox.text.substr(0, index);\n elementBox.width -= splittedElementBox.width;\n splittedElementBox.height = elementBox.height;\n splittedElementBox.baselineOffset = elementBox.baselineOffset;\n this.addSplittedLineWidget(lineWidget, indexOf, splittedElementBox);\n this.addElementToLine(paragraph, elementBox);\n if (elementBox.width === 0) {\n lineWidget.children.splice(indexOf, 1);\n }\n }\n };\n /**\n * Splits by character.\n * @param textElement\n * @param text\n * @param width\n * @param characterFormat\n */\n // tslint:disable-next-line:max-line-length\n Layout.prototype.splitByCharacter = function (lineWidget, textElement, text, width, characterFormat) {\n var paragraph = lineWidget.paragraph;\n // tslint:disable-next-line:max-line-length\n var index = this.getTextSplitIndexByCharacter(this.viewer.clientArea.width, this.viewer.clientActiveArea.width, text, width, characterFormat);\n var splitWidth = 0;\n if (index < textElement.length) {\n splitWidth = this.viewer.textHelper.measureTextExcludingSpaceAtEnd(text.substring(0, index), characterFormat);\n text = text.substring(index);\n }\n if (splitWidth > this.viewer.clientActiveArea.width && textElement.line.children.indexOf(textElement) > 0) {\n this.addSplittedLineWidget(lineWidget, textElement.line.children.indexOf(textElement) - 1);\n }\n var indexOf = lineWidget.children.indexOf(textElement);\n if (index < textElement.length) {\n var lineIndex = paragraph.childWidgets.indexOf(lineWidget);\n var splittedElement = new TextElementBox();\n splittedElement.text = text;\n textElement.text = textElement.text.substr(0, index);\n splittedElement.characterFormat.copyFormat(textElement.characterFormat);\n splittedElement.width = this.viewer.textHelper.getWidth(splittedElement.text, characterFormat);\n textElement.width -= splittedElement.width;\n splittedElement.height = textElement.height;\n splittedElement.baselineOffset = textElement.baselineOffset;\n lineWidget.children.splice(textElement.indexInOwner + 1, 0, splittedElement);\n this.addSplittedLineWidget(lineWidget, indexOf);\n this.addElementToLine(paragraph, textElement);\n if (textElement.width === 0) {\n lineWidget.children.splice(indexOf, 1);\n }\n }\n else {\n //Adds the last text element on inline to line elements collection. \n this.addSplittedLineWidget(lineWidget, indexOf);\n this.addElementToLine(paragraph, textElement);\n }\n };\n /**\n * Splits text element word by word.\n * @param textElement\n */\n Layout.prototype.splitTextElementWordByWord = function (textElement) {\n var lineWidget = textElement.line;\n var indexOf = lineWidget.children.indexOf(textElement);\n var text = textElement.text;\n var format;\n var characterUptoWs = text.trim().indexOf(' ');\n if (characterUptoWs >= 0) {\n lineWidget.children.splice(indexOf, 1);\n format = textElement.characterFormat;\n var fontSize = format.fontSize;\n var index = textElement.length - HelperMethods.trimStart(text).length; //Trim start\n while (index < textElement.length) {\n index = this.getTextIndexAfterSpace(text, index);\n if (index === 0 || index === textElement.length) {\n break;\n }\n if (index < textElement.length) {\n var splittedElement = new TextElementBox();\n var splittedText = text.substring(0, index);\n text = text.substring(index);\n if (text.substring(0, 1) === ' ') {\n // start of the text is trimmed and its length is reduced from text length. \n index += text.length - HelperMethods.trimStart(text).length;\n }\n splittedElement.text = splittedText;\n splittedElement.characterFormat.copyFormat(textElement.characterFormat);\n splittedElement.line = lineWidget;\n splittedElement.width = this.viewer.textHelper.getWidth(splittedElement.text, format);\n splittedElement.height = textElement.height;\n splittedElement.baselineOffset = textElement.baselineOffset;\n lineWidget.children.splice(indexOf, 0, splittedElement);\n textElement.text = text;\n textElement.width -= splittedElement.width;\n if (textElement.width === 0) {\n lineWidget.children.splice(lineWidget.children.indexOf(textElement), 1);\n }\n index = 0;\n indexOf++;\n }\n }\n textElement.text = text;\n lineWidget.children.splice(indexOf, 0, textElement);\n }\n };\n /**\n * Splits text for client area.\n * @param element\n * @param text\n * @param width\n * @param characterFormat\n */\n // tslint:disable-next-line:max-line-length\n Layout.prototype.splitTextForClientArea = function (lineWidget, element, text, width, characterFormat) {\n var paragraph = lineWidget.paragraph;\n var isSplitByWord = true;\n var index = -1;\n if (!(text.substring(0, 1) === ' ')) {\n var textWidth = width;\n var characterUptoWS = 0;\n characterUptoWS = HelperMethods.trimEnd(text).indexOf(' ') + 1;\n index = characterUptoWS;\n //Checks whether text not starts with white space. If starts with white space, no need to check previous text blocks.\n if (index > 0) {\n textWidth = this.viewer.textHelper.measureTextExcludingSpaceAtEnd(text.slice(0, index), characterFormat);\n }\n if (this.viewer.clientActiveArea.width < textWidth) {\n //Check and split the previous text elements to next line. \n isSplitByWord = this.checkPreviousElement(lineWidget, lineWidget.children.indexOf(element), characterFormat);\n if (isSplitByWord) {\n //lineWidget = paragraph.childWidgets[paragraph.childWidgets.indexOf(lineWidget) + 1] as LineWidget;\n //isSplitByWord = textWidth <= this.viewer.clientActiveArea.width;\n return;\n }\n }\n }\n else {\n index = 1;\n }\n if (width <= this.viewer.clientActiveArea.width) {\n //Fits the text in current line.\n this.addElementToLine(paragraph, element);\n }\n else if (isSplitByWord && (index > 0 || text.indexOf(' ') !== -1)) {\n this.splitByWord(lineWidget, paragraph, element, text, width, characterFormat);\n }\n else {\n this.splitByCharacter(lineWidget, element, text, width, characterFormat);\n }\n };\n /**\n * Handle tab or line break character splitting\n * @param {LayoutViewer} viewer\n * @param {TextElementBox} span\n * @param {number} index\n * @param {string} spiltBy\n * @private\n */\n Layout.prototype.splitByLineBreakOrTab = function (viewer, span, index, spiltBy) {\n // Splits tab character to separate SpanAdv\n var inlineIndex = span.line.children.indexOf(span);\n var value = span.text;\n var remainder = value.substring(index);\n var newSpan = spiltBy === '\\t' ? new TabElementBox() : new TextElementBox();\n newSpan.line = span.line;\n newSpan.characterFormat.copyFormat(span.characterFormat);\n span.line.children.splice(inlineIndex + 1, 0, newSpan);\n if (index > 0 && remainder.length === 1) {\n newSpan.text = value.substring(index);\n span.text = value.substring(0, index);\n }\n else if (index > 0) {\n newSpan.text = spiltBy;\n var newText = new TextElementBox();\n newText.line = span.line;\n newText.text = value.substring(index + 1);\n newText.characterFormat.copyFormat(span.characterFormat);\n span.line.children.splice(inlineIndex + 2, 0, newText);\n span.text = value.substring(0, index);\n }\n else if (remainder !== '') {\n newSpan.text = value.substring(index + 1);\n span.text = spiltBy;\n }\n };\n /**\n * Moves to next line.\n */\n Layout.prototype.moveToNextLine = function (line) {\n var paragraph = line.paragraph;\n var paraFormat = paragraph.paragraphFormat;\n var isParagraphStart = line.isFirstLine();\n var isParagraphEnd = line.isLastLine();\n var height = 0;\n var maxDescent = 0;\n var afterSpacing = 0;\n var beforeSpacing = 0;\n var lineSpacing = 0;\n var firstLineIndent = 0;\n this.updateLineWidget(line);\n height = this.maxTextHeight;\n maxDescent = height - this.maxTextBaseline;\n //Updates before spacing at the top of Paragraph first line.\n if (isParagraphStart) {\n beforeSpacing = this.getBeforeSpacing(paragraph);\n firstLineIndent = HelperMethods.convertPointToPixel(paraFormat.firstLineIndent);\n }\n //Updates after spacing at the bottom of Paragraph last line.\n if (isParagraphEnd) {\n afterSpacing = HelperMethods.convertPointToPixel(paraFormat.afterSpacing);\n }\n if (isNaN(this.maxTextHeight)) {\n //Calculate line height and descent based on formatting defined in paragraph.\n var measurement = this.viewer.textHelper.measureText('a', paragraph.characterFormat);\n height = measurement.Height;\n maxDescent = height - measurement.BaselineOffset;\n }\n else {\n height = this.maxTextHeight;\n maxDescent = height - this.maxTextBaseline;\n }\n // Gets line spacing.\n lineSpacing = this.getLineSpacing(paragraph, height);\n if (paraFormat.lineSpacingType === 'Exactly'\n && lineSpacing < maxDescent + this.maxBaseline) {\n lineSpacing = maxDescent + this.maxBaseline;\n }\n var subWidth = 0;\n var whiteSpaceCount = 0;\n var textAlignment = paraFormat.textAlignment;\n //Calculates the sub width, for text alignments - Center, Right, Justify.\n if (textAlignment !== 'Left' && this.viewer.textWrap && !(textAlignment === 'Justify' && isParagraphEnd)) {\n // tslint:disable-next-line:max-line-length\n var getWidthAndSpace = this.getSubWidth(line, textAlignment === 'Justify', whiteSpaceCount, firstLineIndent);\n subWidth = getWidthAndSpace.subWidth;\n whiteSpaceCount = getWidthAndSpace.spaceCount;\n }\n var addSubWidth = false;\n var lineSpacingType = paraFormat.lineSpacingType;\n for (var i = 0; i < line.children.length; i++) {\n var topMargin = 0;\n var bottomMargin = 0;\n var leftMargin = 0;\n var elementBox = line.children[i];\n // tslint:disable-next-line:max-line-length\n var alignElements = this.alignLineElements(elementBox, topMargin, bottomMargin, maxDescent, addSubWidth, subWidth, textAlignment, whiteSpaceCount, i === line.children.length - 1);\n topMargin = alignElements.topMargin;\n bottomMargin = alignElements.bottomMargin;\n addSubWidth = alignElements.addSubWidth;\n whiteSpaceCount = alignElements.whiteSpaceCount;\n //Updates line spacing, paragraph after/ before spacing and aligns the text to base line offset.\n if (lineSpacingType === 'Multiple') {\n if (lineSpacing > height) {\n bottomMargin += lineSpacing - height;\n }\n else {\n topMargin += lineSpacing - height;\n }\n }\n else if (lineSpacingType === 'Exactly') {\n topMargin += lineSpacing - (topMargin + elementBox.height + bottomMargin);\n }\n else if (lineSpacing > topMargin + elementBox.height + bottomMargin) {\n topMargin += lineSpacing - (topMargin + elementBox.height + bottomMargin);\n }\n topMargin += beforeSpacing;\n bottomMargin += afterSpacing;\n if ((i === 0 && !(elementBox instanceof FieldElementBox)) ||\n (elementBox.previousNode instanceof FieldElementBox && elementBox.previousNode.fieldType === 2\n && elementBox.previousNode.fieldBegin && line.children.indexOf(elementBox.previousNode.fieldBegin) === 0)) {\n line.height = topMargin + elementBox.height + bottomMargin;\n if (textAlignment === 'Right') {\n //Aligns the text as right justified.\n leftMargin = subWidth;\n }\n else if (textAlignment === 'Center') {\n //Aligns the text as center justified.\n leftMargin = subWidth / 2;\n }\n }\n elementBox.margin = new Margin(leftMargin, topMargin, 0, bottomMargin);\n elementBox.line = line;\n }\n this.viewer.cutFromTop(this.viewer.clientActiveArea.y + line.height);\n };\n Layout.prototype.updateLineWidget = function (line) {\n for (var i = 0; i < line.children.length; i++) {\n var element = line.children[i];\n if (element instanceof TextElementBox || element instanceof ListTextElementBox) {\n if (this.maxTextHeight < element.height) {\n this.maxTextHeight = element.height;\n this.maxTextBaseline = element.baselineOffset;\n }\n if (this.maxBaseline < this.maxTextBaseline) {\n this.maxBaseline = this.maxTextBaseline;\n }\n }\n else if (this.maxBaseline < element.height) {\n this.maxBaseline = element.height;\n }\n }\n };\n /**\n * @param viewer\n */\n Layout.prototype.moveToNextPage = function (viewer, line) {\n var paragraphWidget = line.paragraph;\n var index = 0;\n if (!isNullOrUndefined(line)) {\n index = paragraphWidget.childWidgets.indexOf(line);\n if (index > 0) {\n paragraphWidget.height = viewer.clientActiveArea.y - paragraphWidget.y;\n }\n }\n var nextBody = this.moveBlocksToNextPage(paragraphWidget);\n this.viewer.updateClientArea(nextBody.sectionFormat, nextBody.page);\n this.viewer.updateClientAreaForBlock(paragraphWidget, true);\n if (index > 0) {\n var nextParagraph = void 0;\n if (nextBody.firstChild instanceof ParagraphWidget && nextBody.firstChild.equals(paragraphWidget)) {\n nextParagraph = nextBody.firstChild;\n }\n else {\n nextParagraph = new ParagraphWidget();\n }\n nextParagraph = this.addParagraphWidget(this.viewer.clientActiveArea, nextParagraph);\n nextParagraph.index = paragraphWidget.index;\n var insertIndex = 0;\n for (var i = index; i < paragraphWidget.childWidgets.length; i++) {\n var lineWidget = paragraphWidget.childWidgets[i];\n lineWidget.paragraph = nextParagraph;\n nextParagraph.childWidgets.splice(insertIndex, 0, lineWidget);\n lineWidget.paragraph = nextParagraph;\n insertIndex++;\n }\n nextParagraph.paragraphFormat = paragraphWidget.paragraphFormat;\n nextParagraph.characterFormat = paragraphWidget.characterFormat;\n paragraphWidget.childWidgets.splice(index);\n paragraphWidget = nextParagraph;\n }\n else {\n paragraphWidget.containerWidget.removeChild(paragraphWidget.indexInOwner);\n }\n if (nextBody.childWidgets.indexOf(paragraphWidget) === -1) {\n nextBody.childWidgets.splice(0, 0, paragraphWidget);\n }\n paragraphWidget.containerWidget = nextBody;\n this.viewer.updateClientAreaLocation(paragraphWidget, this.viewer.clientActiveArea);\n };\n /**\n * Aligns line elements\n * @param element\n * @param topMargin\n * @param bottomMargin\n * @param maxDescent\n * @param addSubWidth\n * @param subWidth\n * @param textAlignment\n * @param whiteSpaceCount\n * @param isLastElement\n */\n // tslint:disable-next-line:max-line-length\n Layout.prototype.alignLineElements = function (element, topMargin, bottomMargin, maxDescent, addSubWidth, subWidth, textAlignment, whiteSpaceCount, isLastElement) {\n if (element instanceof TextElementBox || element instanceof ListTextElementBox) {\n var textElement = element instanceof TextElementBox ? element : undefined;\n //Updates the text to base line offset.\n // tslint:disable-next-line:max-line-length\n var baselineOffset = element instanceof TextElementBox ? textElement.baselineOffset : element.baselineOffset;\n topMargin += this.maxBaseline - baselineOffset;\n bottomMargin += maxDescent - (element.height - baselineOffset);\n //Updates the text to base line offset.\n if (!isNullOrUndefined(textElement) && textAlignment === 'Justify' && whiteSpaceCount > 0) {\n //Aligns the text as Justified.\n var width = textElement.width;\n var text = textElement.text;\n if (!addSubWidth) {\n text = HelperMethods.trimStart(text); // trim start\n addSubWidth = (text.length > 0);\n }\n if (addSubWidth) {\n var spaceCount = text.length - HelperMethods.removeSpace(text).length;\n if (isLastElement) {\n spaceCount -= text.length - HelperMethods.trimEnd(text).length;\n }\n if (whiteSpaceCount < spaceCount) {\n width = this.viewer.textHelper.measureTextExcludingSpaceAtEnd(text, textElement.characterFormat);\n spaceCount = whiteSpaceCount;\n }\n if (spaceCount > 0) {\n textElement.width = width + subWidth * spaceCount;\n whiteSpaceCount -= spaceCount;\n }\n }\n }\n }\n else {\n addSubWidth = true;\n //Updates the Image/UIElement to base line offset.\n topMargin += this.maxBaseline - element.height;\n bottomMargin += maxDescent;\n }\n return { 'topMargin': topMargin, 'bottomMargin': bottomMargin, 'addSubWidth': addSubWidth, 'whiteSpaceCount': whiteSpaceCount };\n };\n /**\n * Updates widget to page.\n * @param viewer\n * @param block\n * @private\n */\n Layout.prototype.updateWidgetToPage = function (viewer, paragraphWidget) {\n if (paragraphWidget.isInsideTable) {\n var cellWidget = paragraphWidget.associatedCell;\n paragraphWidget.height = viewer.clientActiveArea.y - paragraphWidget.y;\n // if (viewer instanceof PageLayoutViewer) {\n if (isNullOrUndefined(paragraphWidget.associatedCell) || isNullOrUndefined(paragraphWidget.associatedCell.ownerRow)\n || isNullOrUndefined(paragraphWidget.associatedCell.ownerRow.rowFormat)) {\n return;\n }\n if (paragraphWidget.associatedCell.ownerRow.rowFormat.heightType === 'Exactly') {\n cellWidget.height = HelperMethods.convertPointToPixel(paragraphWidget.associatedCell.ownerRow.rowFormat.height);\n }\n else {\n // tslint:disable-next-line:max-line-length\n if ([cellWidget].length <= 1 && paragraphWidget.associatedCell.ownerRow.rowFormat.heightType === 'AtLeast') {\n cellWidget.height = Math.max(HelperMethods.convertPointToPixel(paragraphWidget.associatedCell.ownerRow.rowFormat.height), this.getCellContentHeight(cellWidget));\n }\n else {\n cellWidget.height = cellWidget.height + paragraphWidget.height;\n }\n }\n // } else {\n // cellWidget.height = cellWidget.height + paragraphWidget.height;\n // }\n // cellWidget.childWidgets.push(paragraphWidget);\n paragraphWidget.containerWidget = cellWidget;\n }\n else {\n paragraphWidget.height = viewer.clientActiveArea.y - paragraphWidget.y;\n //Adds the paragraph widget to the Header Footer/ Body widget.\n // this.updateWidgetsToBody(paragraphWidget, viewer, paragraphWidget);\n //For canvas no need to render paragraph widget here. In case of div, need to render paragraph here.\n // tslint:disable-next-line:max-line-length \n // this.render.renderParagraphWidget((paragraphWidget.containerWidget as BodyWidget).page, paragraphWidget);\n }\n if (paragraphWidget.bodyWidget instanceof HeaderFooterWidget) {\n paragraphWidget.containerWidget.height += paragraphWidget.height;\n if (this.viewer.owner.enableHeaderAndFooter && paragraphWidget.bodyWidget.headerFooterType.indexOf('Footer') !== -1) {\n this.shiftFooterChildLocation(paragraphWidget.bodyWidget, this.viewer);\n }\n }\n };\n /**\n * @private\n */\n Layout.prototype.shiftFooterChildLocation = function (widget, viewer) {\n var pageHeight = widget.page.bodyWidgets[0].sectionFormat.pageHeight;\n if (widget.headerFooterType.indexOf('Footer') !== -1) {\n var footerDistance = widget.page.bodyWidgets[0].sectionFormat.footerDistance;\n var height = HelperMethods.convertPointToPixel(pageHeight - footerDistance);\n var top_2;\n if (widget.y + widget.height > height) {\n top_2 = height - (widget.y + widget.height);\n }\n else if (widget.y + widget.height < height) {\n top_2 = (widget.y + widget.height) - height;\n }\n if (!isNullOrUndefined(top_2)) {\n top_2 = height - (widget.y + widget.height);\n this.shiftChildLocation(top_2, widget);\n viewer.clientActiveArea.y += top_2;\n }\n }\n };\n /**\n * Checks previous element.\n * @param characterFormat\n */\n Layout.prototype.checkPreviousElement = function (line, index, characterFormat) {\n var paragraph = line.paragraph;\n var isSplitByWord = false;\n var lastTextElement = 0;\n for (var i = index - 1; i >= 0; i--) {\n var textElement = line.children[i];\n if (textElement instanceof TextElementBox) {\n var text = textElement.text;\n lastTextElement = i;\n if (text.length > 0 && text[text.length - 1] === ' ') {\n if (i === index - 1) {\n this.addSplittedLineWidget(line, index - 1);\n return true;\n }\n isSplitByWord = true;\n break;\n }\n else if (text === '\\t') {\n return false;\n }\n else if (text.indexOf(' ') >= 0) {\n isSplitByWord = true;\n var index_1 = text.lastIndexOf(' ') + 1;\n //Splits the text element by space.\n var splittedElement = new TextElementBox();\n splittedElement.text = text.substr(index_1);\n splittedElement.characterFormat.copyFormat(textElement.characterFormat);\n textElement.text = text.substr(0, index_1);\n this.viewer.textHelper.getTextSize(splittedElement, characterFormat);\n textElement.width -= splittedElement.width;\n textElement.height = splittedElement.height;\n if (textElement.width === 0) {\n line.children.splice(i, 1);\n }\n //Adds the text element to the line\n line.children.splice(i + 1, 0, splittedElement);\n break;\n }\n }\n else if (!(textElement instanceof ListTextElementBox)) {\n //Handled for inline images/UIelements.\n lastTextElement = i;\n isSplitByWord = true;\n break;\n }\n }\n if (isSplitByWord) {\n lastTextElement++;\n if (lastTextElement < line.children.length) {\n var splitWidth = 0;\n for (var i = lastTextElement; i < line.children.length; i++) {\n splitWidth += line.children[i].width;\n this.addSplittedLineWidget(line, i - 1);\n i--;\n }\n this.viewer.updateClientWidth(splitWidth);\n }\n }\n return isSplitByWord;\n };\n /**\n * @private\n */\n Layout.prototype.clearListElementBox = function (paragraph) {\n if (paragraph.childWidgets.length === 0) {\n return;\n }\n var line = paragraph.childWidgets[0];\n if (isNullOrUndefined(line.children)) {\n return;\n }\n for (var i = 0; i < line.children.length; i++) {\n if (line.children[i] instanceof ListTextElementBox) {\n line.children.splice(i, 1);\n i--;\n }\n else {\n break;\n }\n }\n };\n /**\n * Gets list number.\n * @param listFormat\n * @param document\n * @private\n */\n Layout.prototype.getListNumber = function (listFormat) {\n var list = this.viewer.getListById(listFormat.listId);\n var levelNumber = listFormat.listLevelNumber;\n var listLevel = this.getListLevel(list, listFormat.listLevelNumber);\n // tslint:disable-next-line:max-line-length\n var levelOverride = !isNullOrUndefined(list.levelOverrides) ? list.levelOverrides[levelNumber] : undefined;\n // If LevelOverride exists and have either override list level or StartAtOverride, then only list numbering will be restarted.\n // tslint:disable-next-line:max-line-length\n // if (!isNullOrUndefined(levelOverride) && !(document.renderedLevelOverrides.indexOf(levelOverride) > -1) && isNullOrUndefined(levelOverride.overrideListLevel)) {\n // //Add List Override style\n // document.renderedLevelOverrides.push(list.levelOverrides.getItem(levelNumber) as WLevelOverride);\n // if (document.renderedLists.containsKey((list.wordDocument as WordDocument).getAbstractListById(list.abstractListId))) {\n // tslint:disable-next-line:max-line-length\n // let levels: Dictionary = document.renderedLists.get((list.wordDocument as WordDocument).getAbstractListById(list.abstractListId));\n // if (levels.containsKey(levelNumber)) {\n // levels.remove(levelNumber);\n // }\n // }\n // }\n this.updateListValues(list, levelNumber);\n return this.getListText(list, levelNumber, listLevel);\n };\n /**\n * Gets list start value\n * @param listLevelNumber\n * @param list\n * @private\n */\n Layout.prototype.getListStartValue = function (listLevelNumber, list) {\n // tslint:disable-next-line:max-line-length\n var levelOverride = !isNullOrUndefined(list.levelOverrides) ? list.levelOverrides[listLevelNumber] : undefined;\n if (!isNullOrUndefined(levelOverride) && isNullOrUndefined(levelOverride.overrideListLevel)) {\n return levelOverride.startAt;\n }\n var listLevel = this.getListLevel(list, listLevelNumber);\n if (isNullOrUndefined(listLevel)) {\n return 0;\n }\n else {\n return listLevel.startAt;\n }\n };\n /**\n * Updates list values.\n * @param list\n * @param listLevelNumber\n * @param document\n */\n Layout.prototype.updateListValues = function (list, listLevelNumber) {\n if (!this.viewer.renderedLists.containsKey(this.viewer.getAbstractListById(list.abstractListId))) {\n var startVal = new Dictionary();\n this.viewer.renderedLists.add(this.viewer.getAbstractListById(list.abstractListId), startVal);\n var listLevel = this.getListLevel(list, listLevelNumber);\n for (var i = 0; i <= listLevelNumber; i++) {\n startVal.add(i, this.getListStartValue(i, list));\n }\n }\n else {\n // tslint:disable-next-line:max-line-length\n var levels = this.viewer.renderedLists.get(this.viewer.getAbstractListById(list.abstractListId));\n if (levels.containsKey(listLevelNumber)) {\n var startAt = levels.get(listLevelNumber);\n levels.set(listLevelNumber, startAt + 1);\n var levelNumber = listLevelNumber + 1;\n while (levelNumber < this.viewer.getAbstractListById(list.abstractListId).levels.length) {\n var listLevel = this.getListLevel(list, levelNumber);\n // if (!isNullOrUndefined(listLevel)) {\n if (levels.containsKey(levelNumber) && listLevel.restartLevel > listLevelNumber) {\n levels.remove(levelNumber);\n // if (document.renderedListLevels.indexOf(listLevel) > -1) {\n // document.renderedListLevels.pop();\n // }\n }\n // }\n levelNumber++;\n }\n }\n else {\n var levelNumber = listLevelNumber;\n while (!levels.containsKey(levelNumber - 1) && levelNumber > 0) {\n var listLevel = this.getListLevel(list, levelNumber - 1);\n // if (!isNullOrUndefined(listLevel)) {\n levels.add(levelNumber - 1, this.getListStartValue(levelNumber - 1, list));\n // if (document.renderedListLevels.indexOf(listLevel) !== -1) {\n // document.renderedListLevels.push(listLevel);\n // }\n // }\n levelNumber--;\n }\n var startAt = this.getListStartValue(listLevelNumber, list);\n levels.add(listLevelNumber, startAt);\n }\n }\n };\n /**\n * Gets list text\n * @param listAdv\n * @param listLevelNumber\n * @param currentListLevel\n * @param document\n */\n Layout.prototype.getListText = function (listAdv, listLevelNumber, currentListLevel) {\n var listText = currentListLevel.numberFormat;\n // tslint:disable-next-line:max-line-length\n if (this.viewer.renderedLists.containsKey(this.viewer.getAbstractListById(listAdv.abstractListId))) {\n var levels = this.viewer.renderedLists.get(this.viewer.getAbstractListById(listAdv.abstractListId));\n var keys = levels.keys;\n for (var i = 0; i < keys.length; i++) {\n var levelNumber = keys[i];\n var levelKey = '%' + (levelNumber + 1).toString();\n var listLevel = this.getListLevel(listAdv, levelNumber);\n if (listText.match(levelKey)) {\n if (levelNumber > listLevelNumber) {\n return '';\n }\n else if (levels.containsKey(levelNumber) && !isNullOrUndefined(listLevel)) {\n listText = listText.replace(levelKey, this.getListTextListLevel(listLevel, levels.get(levelNumber)));\n }\n else {\n listText = listText.replace(levelKey, '0');\n }\n }\n }\n }\n return listText;\n };\n /**\n * Gets the roman letter.\n * @param number\n * @private\n */\n Layout.prototype.getAsLetter = function (number) {\n // if (number <= 0) {\n // return '';\n // }\n var quotient = number / 26;\n var remainder = number % 26;\n if (remainder === 0) {\n //If number denotes the factor of 26, then reduce quotient by 1 and set remainder as 26.\n remainder = 26;\n quotient--;\n }\n //Index of A char in the ASCII table. \n var letter = String.fromCharCode(65 - 1 + remainder);\n var listValue = '';\n while (quotient >= 0) {\n listValue = listValue + letter.toString();\n quotient--;\n }\n return listValue;\n };\n /**\n * Gets list text using list level pattern.\n * @param listLevel\n * @param listValue\n * @private\n */\n Layout.prototype.getListTextListLevel = function (listLevel, listValue) {\n switch (listLevel.listLevelPattern) {\n case 'UpRoman':\n return this.getAsRoman(listValue).toUpperCase();\n case 'LowRoman':\n return this.getAsRoman(listValue).toLowerCase();\n case 'UpLetter':\n return this.getAsLetter(listValue).toUpperCase();\n case 'LowLetter':\n return this.getAsLetter(listValue).toLowerCase();\n case 'Arabic':\n return (listValue).toString();\n case 'LeadingZero':\n return this.getAsLeadingZero(listValue);\n case 'Number':\n return (listValue).toString();\n case 'OrdinalText':\n return (listValue).toString();\n case 'Ordinal':\n return (listValue).toString();\n case 'FarEast':\n return (listValue).toString();\n case 'Special':\n return (listValue).toString();\n default:\n return '';\n }\n };\n /**\n * Generate roman number for the specified number.\n * @param number\n * @param magnitude\n * @param letter\n */\n Layout.prototype.generateNumber = function (number, magnitude, letter) {\n var numberstring = '';\n while (number >= magnitude) {\n number -= magnitude;\n numberstring += letter;\n this.value = number;\n }\n return numberstring.toString();\n };\n /**\n * Gets list value prefixed with zero, if less than 10\n * @param listValue\n */\n Layout.prototype.getAsLeadingZero = function (listValue) {\n if (listValue < 10) {\n return '0' + listValue.toString();\n }\n else {\n return listValue.toString();\n }\n };\n /**\n * Gets the roman number\n * @param number\n * @private\n */\n Layout.prototype.getAsRoman = function (number) {\n var retval = '';\n this.value = number;\n retval += this.generateNumber(this.value, 1000, 'M');\n retval += this.generateNumber(this.value, 900, 'CM');\n retval += this.generateNumber(this.value, 500, 'D');\n retval += this.generateNumber(this.value, 400, 'CD');\n retval += this.generateNumber(this.value, 100, 'C');\n retval += this.generateNumber(this.value, 90, 'XC');\n retval += this.generateNumber(this.value, 50, 'L');\n retval += this.generateNumber(this.value, 40, 'XL');\n retval += this.generateNumber(this.value, 10, 'X');\n retval += this.generateNumber(this.value, 9, 'IX');\n retval += this.generateNumber(this.value, 5, 'V');\n retval += this.generateNumber(this.value, 4, 'IV');\n retval += this.generateNumber(this.value, 1, 'I');\n return retval.toString();\n };\n /**\n * Gets the list level\n * @param list\n * @param listLevelNumber\n * @private\n */\n Layout.prototype.getListLevel = function (list, listLevelNumber) {\n if (!isNullOrUndefined(list)) {\n var abstractList = this.viewer.getAbstractListById(list.abstractListId);\n if (!isNullOrUndefined(list) && abstractList.levels.length <= listLevelNumber\n && listLevelNumber >= 0 && listLevelNumber < 9) {\n this.addListLevels(abstractList);\n }\n var levelOverrideAdv = undefined;\n var level = false;\n level = (!isNullOrUndefined(list.levelOverrides))\n && !isNullOrUndefined(((levelOverrideAdv = list.levelOverrides[listLevelNumber])))\n && (!isNullOrUndefined(levelOverrideAdv.overrideListLevel));\n if (level) {\n return levelOverrideAdv.overrideListLevel;\n }\n else if (!isNullOrUndefined(abstractList) && listLevelNumber >= 0 && listLevelNumber < abstractList.levels.length) {\n return abstractList.levels[listLevelNumber];\n }\n }\n return undefined;\n };\n /**\n * Gets tab width\n * @param paragraph\n * @param viewer\n */\n // tslint:disable-next-line:max-line-length\n Layout.prototype.getTabWidth = function (paragraph, viewer, index, lineWidget, element) {\n var fposition = 0;\n var isCustomTab = false;\n var tabs = paragraph.paragraphFormat.getUpdatedTabs();\n // Calculate hanging width\n if (viewer.clientActiveArea.x < viewer.clientArea.x) {\n return viewer.clientArea.x - viewer.clientActiveArea.x;\n }\n // Calculates tabwidth based on pageleftmargin and defaulttabwidth property\n var position = viewer.clientActiveArea.x -\n (viewer.clientArea.x - HelperMethods.convertPointToPixel(paragraph.paragraphFormat.leftIndent));\n var defaultTabWidth = HelperMethods.convertPointToPixel(viewer.defaultTabWidth);\n if (tabs.length === 0 && (position === 0 || defaultTabWidth === 0)) {\n return defaultTabWidth;\n }\n else {\n if (tabs.length > 0) {\n for (var i = 0; i < tabs.length; i++) {\n var tabPosition = HelperMethods.convertPointToPixel(tabs[i].position);\n if (tabs[i].tabJustification === 'Left' && position < tabPosition) {\n fposition = tabPosition;\n isCustomTab = true;\n if (!isNullOrUndefined(element)) {\n element.tabLeader = tabs[i].tabLeader;\n element.tabText = '';\n }\n break;\n }\n else if (tabs[i].tabJustification === 'Right' && position < tabPosition) {\n var tabwidth = tabPosition - position;\n var width = this.getRightTabWidth(index + 1, lineWidget, paragraph);\n if (width < tabwidth) {\n defaultTabWidth = tabwidth - width;\n }\n else {\n defaultTabWidth = 0;\n }\n fposition = position;\n isCustomTab = true;\n if (!isNullOrUndefined(element)) {\n element.tabLeader = tabs[i].tabLeader;\n element.tabText = '';\n }\n break;\n }\n }\n }\n if (!isCustomTab) {\n var diff = ((Math.round(position) * 100) % (Math.round(defaultTabWidth) * 100)) / 100;\n var cnt = (Math.round(position) - diff) / Math.round(defaultTabWidth);\n fposition = (cnt + 1) * defaultTabWidth;\n }\n return (fposition - position) > 0 ? fposition - position : defaultTabWidth;\n }\n };\n /**\n * Returns the right tab width\n * @param index - index of starting inline\n * @param lineWidget - current line widget\n * @param paragraph - current paragraph widget\n */\n Layout.prototype.getRightTabWidth = function (index, lineWidget, paragraph) {\n var width = 0;\n var isFieldCode = false;\n while (index < lineWidget.children.length) {\n var elementBox = lineWidget.children[index];\n if ((elementBox instanceof FieldElementBox) || (elementBox instanceof BookmarkElementBox) || isFieldCode) {\n if (elementBox instanceof FieldElementBox) {\n if (elementBox.fieldType === 0) {\n isFieldCode = true;\n }\n else if (elementBox.fieldType === 2) {\n isFieldCode = false;\n }\n }\n elementBox.width = 0;\n }\n else {\n this.viewer.textHelper.getTextSize(elementBox, elementBox.characterFormat);\n }\n if (elementBox instanceof TextElementBox && elementBox.text === '\\t') {\n return width;\n }\n else {\n width = width + elementBox.width;\n }\n index++;\n }\n return width;\n };\n /**\n * Gets split index by word.\n * @param clientActiveWidth\n * @param text\n * @param width\n * @param characterFormat\n */\n Layout.prototype.getSplitIndexByWord = function (clientActiveWidth, text, width, characterFormat) {\n var index = 0;\n var length = text.length;\n while (index < length) {\n var nextIndex = this.getTextIndexAfterSpace(text, index);\n if (nextIndex === 0 || nextIndex === length) {\n nextIndex = length - 1;\n }\n var splitWidth = width;\n if ((nextIndex < length - 1 || (nextIndex === length - 1 && text[nextIndex - 1] === ' ')) && index !== nextIndex) {\n splitWidth = this.viewer.textHelper.measureTextExcludingSpaceAtEnd(text.slice(0, nextIndex), characterFormat);\n }\n if (splitWidth <= clientActiveWidth) {\n index = nextIndex;\n }\n else {\n if (index === 0 && text[0] === ' ') {\n index = this.getTextIndexAfterSpace(text, 0);\n }\n break;\n }\n }\n return index;\n };\n /**\n * Gets split index by character\n * @param totalClientWidth\n * @param clientActiveAreaWidth\n * @param text\n * @param width\n * @param characterFormat\n */\n // tslint:disable-next-line:max-line-length\n Layout.prototype.getTextSplitIndexByCharacter = function (totalClientWidth, clientActiveAreaWidth, text, width, characterFormat) {\n var length = text.length;\n for (var i = 0; i < length; i++) {\n var splitWidth = width;\n if (i + 1 < length) {\n splitWidth = this.viewer.textHelper.measureTextExcludingSpaceAtEnd(text.substring(0, i + 1), characterFormat);\n }\n if (splitWidth > clientActiveAreaWidth) {\n if (i === 0 && splitWidth > totalClientWidth) {\n //Handle for cell/section having client width less than a character's width.\n return (length > 1 && text[1] === ' ') ? this.getTextIndexAfterSpace(text, 1) : 1;\n }\n return i;\n }\n }\n return 0;\n };\n /**\n * Gets sub width.\n * @param justify\n * @param spaceCount\n * @param firstLineIndent\n */\n Layout.prototype.getSubWidth = function (lineWidget, justify, spaceCount, firstLineIndent) {\n var width = 0;\n var trimSpace = true;\n var lineText = '';\n for (var i = lineWidget.children.length - 1; i >= 0; i--) {\n var element = lineWidget.children[i];\n if (element instanceof TextElementBox) {\n var elementText = element.text;\n lineText = elementText + lineText;\n if (trimSpace && (elementText.trim() !== '' || elementText === '\\t')) {\n if (HelperMethods.endsWith(elementText)) {\n width += this.viewer.textHelper.measureTextExcludingSpaceAtEnd(elementText, element.characterFormat);\n }\n else {\n width += element.width;\n }\n trimSpace = false;\n }\n else if (!trimSpace) {\n width += element.width;\n }\n }\n else {\n lineText = 'a' + lineText;\n trimSpace = false;\n width += element.width;\n }\n if (!justify) {\n width = Math.round(width);\n }\n }\n lineText = lineText.trim();\n spaceCount = lineText.length - HelperMethods.removeSpace(lineText).length;\n var subWidth = (this.viewer.clientArea.width - firstLineIndent - width);\n if (subWidth <= 0 || (spaceCount === 0 && justify)) {\n spaceCount = 0;\n subWidth = 0;\n }\n else if (justify) {\n subWidth = subWidth / spaceCount;\n }\n return { 'subWidth': subWidth, 'spaceCount': spaceCount };\n };\n /**\n * Gets before spacing.\n * @param paragraph\n * @private\n */\n Layout.prototype.getBeforeSpacing = function (paragraph) {\n var beforeSpacing = 0;\n if (paragraph.previousWidget instanceof ParagraphWidget) {\n if (paragraph.previousWidget.paragraphFormat.afterSpacing < paragraph.paragraphFormat.beforeSpacing) {\n // tslint:disable-next-line:max-line-length\n beforeSpacing = paragraph.paragraphFormat.beforeSpacing - paragraph.previousWidget.paragraphFormat.afterSpacing;\n }\n }\n else {\n beforeSpacing = paragraph.paragraphFormat.beforeSpacing;\n }\n return beforeSpacing;\n };\n /**\n * Gets line spacing.\n * @param paragraph\n * @param maxHeight\n * @private\n */\n Layout.prototype.getLineSpacing = function (paragraph, maxHeight) {\n if (isNullOrUndefined(paragraph.paragraphFormat)) {\n return 0;\n }\n var lineSpacing = 0;\n switch (paragraph.paragraphFormat.lineSpacingType) {\n case 'AtLeast':\n case 'Exactly':\n lineSpacing = paragraph.paragraphFormat.lineSpacing;\n break;\n default:\n lineSpacing = paragraph.paragraphFormat.lineSpacing * maxHeight;\n break;\n }\n return lineSpacing;\n };\n /**\n * Checks whether current line is first line in a paragraph.\n * @param paragraph\n */\n Layout.prototype.isParagraphFirstLine = function (paragraph, line) {\n var widget = paragraph;\n if (isNullOrUndefined(widget.childWidgets) || widget.childWidgets.indexOf(line) === 0) {\n //If the line elements conatins the elements from previous paragraph then need to retun false.\n //Example scenario, Field start and field end in different paragraphs.\n if (line.children.length > 0 && !isNullOrUndefined(paragraph.previousWidget)\n && paragraph.previousWidget instanceof ParagraphWidget) {\n return line.paragraph.index !== paragraph.previousWidget.index;\n }\n return true; //If the line elements count is zero then also need to return true.\n }\n return false;\n };\n /**\n * Checks whether current line is last line in a paragraph.\n * @param paragraph\n */\n Layout.prototype.isParagraphLastLine = function (element) {\n var paragraph = element.line.paragraph;\n var lastLineWidget = paragraph.childWidgets[paragraph.childWidgets.length - 1];\n var lastInline = lastLineWidget.children[lastLineWidget.children.length - 1];\n if (element === lastInline) {\n // tslint:disable-next-line:max-line-length \n return (lastInline instanceof FieldElementBox) || ((!(lastInline instanceof TextElementBox && lastInline.text === '\\v')));\n }\n return false;\n };\n /**\n * Gets text index after space.\n * @param text\n * @param startIndex\n */\n Layout.prototype.getTextIndexAfterSpace = function (text, startIndex) {\n var length = text.length;\n var index = 0;\n index = text.indexOf(' ', startIndex) + 1;\n var nextIndex = index;\n if (nextIndex === 0 || nextIndex === length) {\n return nextIndex;\n }\n while (text[nextIndex] === ' ') {\n nextIndex++;\n if (nextIndex === length) {\n break;\n }\n }\n return nextIndex;\n };\n //#region Table\n /**\n * @private\n */\n Layout.prototype.moveNextWidgetsToTable = function (tableWidget, rowWidgets, moveFromNext) {\n var currentRow = moveFromNext ? rowWidgets[rowWidgets.length - 2] : rowWidgets[rowWidgets.length - 1];\n var rowIndex = currentRow.indexInOwner;\n var currentTable = tableWidget[tableWidget.length - 1];\n if (moveFromNext) {\n rowIndex += 1;\n }\n var nextWidgets = currentRow.containerWidget.childWidgets.splice(rowIndex);\n for (var i = 0; i < nextWidgets.length; i++) {\n currentTable.childWidgets.push(nextWidgets[i]);\n nextWidgets[i].containerWidget = currentTable;\n }\n };\n /**\n * Adds table cell widget.\n * @param cell\n * @param area\n * @param maxCellMarginTop\n * @param maxCellMarginBottom\n */\n Layout.prototype.addTableCellWidget = function (cell, area, maxCellMarginTop, maxCellMarginBottom) {\n //let tableCellWidget: TableCellWidget = new TableCellWidget(cell);\n var prevColumnIndex = 0;\n var cellspace = 0;\n var left = 0;\n var top = maxCellMarginTop;\n var right = 0;\n var bottom = maxCellMarginBottom;\n if (!isNullOrUndefined(cell.cellFormat)) {\n if (cell.cellFormat.containsMargins()) {\n // tslint:disable-next-line:max-line-length\n left = isNullOrUndefined(cell.cellFormat.leftMargin) ? HelperMethods.convertPointToPixel(cell.ownerTable.tableFormat.leftMargin) : HelperMethods.convertPointToPixel(cell.cellFormat.leftMargin);\n right = isNullOrUndefined(cell.cellFormat.rightMargin) ? HelperMethods.convertPointToPixel(cell.ownerTable.tableFormat.rightMargin) : HelperMethods.convertPointToPixel(cell.cellFormat.rightMargin);\n }\n else {\n left = HelperMethods.convertPointToPixel(cell.ownerTable.tableFormat.leftMargin);\n right = HelperMethods.convertPointToPixel(cell.ownerTable.tableFormat.rightMargin);\n }\n }\n cell.margin = new Margin(left, top, right, bottom);\n cell.width = HelperMethods.convertPointToPixel(cell.cellFormat.cellWidth);\n if (!isNullOrUndefined(cell.previousWidget)) {\n // tslint:disable-next-line:max-line-length\n prevColumnIndex = cell.previousWidget.columnIndex + cell.previousWidget.cellFormat.columnSpan;\n }\n // tslint:disable-next-line:max-line-length\n cellspace = !isNullOrUndefined(cell.ownerTable) && !isNullOrUndefined(cell.ownerTable.tableFormat) ? HelperMethods.convertPointToPixel(cell.ownerTable.tableFormat.cellSpacing) : 0;\n var prevSpannedCellWidth = 0;\n if (prevColumnIndex < cell.columnIndex) {\n // tslint:disable-next-line:max-line-length\n prevSpannedCellWidth = HelperMethods.convertPointToPixel(cell.ownerTable.tableHolder.getPreviousSpannedCellWidth(prevColumnIndex, cell.columnIndex));\n if (prevColumnIndex === 0) {\n prevSpannedCellWidth = prevSpannedCellWidth - cellspace / 2;\n }\n }\n cell.x = area.x + prevSpannedCellWidth + cell.margin.left;\n cell.y = area.y + cell.margin.top + cellspace;\n cell.width = cell.width - cell.margin.left - cell.margin.right;\n if (cellspace > 0) {\n cell.x += cellspace;\n if (cell.ownerTable.tableHolder.columns.length === 1) {\n cell.width -= cellspace * 2;\n }\n else if (cell.columnIndex === 0 || cell.columnIndex === cell.ownerTable.tableHolder.columns.length - 1) {\n cell.width -= ((cellspace * 2) - cellspace / 2);\n }\n else {\n cell.width -= cellspace;\n }\n }\n // update the margins values respect to layouting of borders.\n // tslint:disable-next-line:max-line-length\n //For normal table cells only left border is rendred. for last cell left and right border is rendred. this border widths are not included in margins.\n cell.leftBorderWidth = HelperMethods.convertPointToPixel(TableCellWidget.getCellLeftBorder(cell).getLineWidth());\n cell.x += cell.leftBorderWidth;\n cell.width -= cell.leftBorderWidth;\n if (cellspace > 0 || cell.cellIndex === cell.ownerRow.childWidgets.length - 1) {\n cell.rightBorderWidth = TableCellWidget.getCellRightBorder(cell).getLineWidth();\n cell.width -= cell.rightBorderWidth;\n }\n //Add the border widths to respective margin side.\n cell.margin.left = cell.margin.left + cell.leftBorderWidth;\n cell.margin.right = cell.margin.right + cell.rightBorderWidth;\n //cell.ownerWidget = owner;\n return cell;\n };\n /**\n * Adds specified row widget to table.\n * @param viewer\n * @param tableRowWidget\n * @param row\n */\n // tslint:disable-next-line:max-line-length\n Layout.prototype.addWidgetToTable = function (viewer, tableCollection, rowCollection, row, endRowWidget) {\n //Adds table row widget to owner table widget.\n var tableWidget = tableCollection[0];\n var index = tableWidget.childWidgets.length;\n var prevWidget = undefined;\n var rowWidgetIndex = rowCollection.indexOf(row);\n if (rowWidgetIndex > 0) {\n prevWidget = rowCollection[rowWidgetIndex - 1];\n // Need to update on this further\n }\n else if (row.previousRenderedWidget instanceof TableRowWidget) {\n // Need to update on this further\n prevWidget = row.previousRenderedWidget;\n }\n if (!isNullOrUndefined(prevWidget)) {\n tableWidget = prevWidget.containerWidget;\n // index = tableWidget.childWidgets.length;\n index = tableWidget.childWidgets.indexOf(prevWidget) + 1;\n if (Math.round(row.y) !== Math.round(prevWidget.y + prevWidget.height)) {\n var prevIndex = tableCollection.indexOf(tableWidget);\n if (prevIndex + 1 >= tableCollection.length) {\n //Creates new table widget for splitted rows.\n this.addTableWidget(viewer.clientActiveArea, tableCollection, true);\n }\n tableWidget = tableCollection[prevIndex + 1];\n index = tableWidget.childWidgets.length;\n }\n if (rowWidgetIndex > 0) {\n index = 0;\n }\n }\n this.updateRowHeightBySpannedCell(tableWidget, row, index);\n this.updateRowHeightByCellSpacing(tableCollection, row, viewer);\n //Remove widget from previous container after splitteing\n if (row.containerWidget && row.containerWidget !== tableWidget &&\n row.containerWidget.childWidgets.indexOf(row) !== -1) {\n row.containerWidget.childWidgets.splice(row.containerWidget.childWidgets.indexOf(row), 1);\n }\n if (tableWidget.childWidgets.indexOf(row) === -1) {\n tableWidget.childWidgets.splice(index, 0, row);\n }\n row.containerWidget = tableWidget;\n tableWidget.height = tableWidget.height + row.height;\n if (!isNullOrUndefined(tableWidget.containerWidget)\n && tableWidget.containerWidget.childWidgets.indexOf(tableWidget) >= 0 &&\n !(tableWidget.containerWidget instanceof HeaderFooterWidget)) {\n tableWidget.containerWidget.height += row.height;\n }\n this.updateHeightForRowWidget(viewer, false, tableCollection, rowCollection, row, false, endRowWidget);\n viewer.cutFromTop(row.y + row.height);\n };\n /**\n * Updates row height by spanned cell.\n * @param tableWidget\n * @param rowWidget\n * @param insertIndex\n * @param row\n * @private\n */\n Layout.prototype.updateRowHeightBySpannedCell = function (tableWidget, row, insertIndex) {\n var rowSpan = 1;\n if (tableWidget.childWidgets.length === 0 || insertIndex === 0) {\n this.updateRowHeight(row, row);\n return;\n }\n for (var i = 0; i < row.childWidgets.length; i++) {\n var cellWidget = row.childWidgets[i];\n // tslint:disable-next-line:max-line-length\n rowSpan = (isNullOrUndefined(cellWidget) || isNullOrUndefined(cellWidget.cellFormat)) ? rowSpan : cellWidget.cellFormat.rowSpan;\n this.updateSpannedRowCollection(rowSpan, row);\n }\n if (!isNullOrUndefined(row.ownerTable)) {\n for (var i = 0; i < row.ownerTable.spannedRowCollection.length; i++) {\n if (row.ownerTable.spannedRowCollection.keys[i] === row.index) {\n // Back track to previous table row widgets and update it height if vertical merge ends with this row.\n for (var j = 0; j < insertIndex; j++) {\n var prevRowWidget = tableWidget.childWidgets[j];\n this.updateRowHeight(prevRowWidget, row);\n }\n row.ownerTable.spannedRowCollection.remove(row.ownerTable.spannedRowCollection.keys[i]);\n break;\n }\n }\n }\n };\n /**\n * Updates row height.\n * @param prevRowWidget\n * @param rowWidget\n * @param row\n */\n Layout.prototype.updateRowHeight = function (prevRowWidget, row) {\n var rowIndex = row.index;\n var rowSpan = 1;\n for (var i = 0; i < prevRowWidget.childWidgets.length; i++) {\n var cellWidget = prevRowWidget.childWidgets[i];\n // tslint:disable-next-line:max-line-length\n rowSpan = (isNullOrUndefined(cellWidget) || isNullOrUndefined(cellWidget.cellFormat)) ? rowSpan : cellWidget.cellFormat.rowSpan;\n //To update Row height- if row has row span value greater than 1, need to add it in spannedRowCollection \n this.updateSpannedRowCollection(rowSpan, row);\n if (rowIndex - cellWidget.rowIndex === rowSpan - 1) {\n var mergedCellHeight = cellWidget.y + cellWidget.height + cellWidget.margin.bottom - row.y;\n if (row.height < mergedCellHeight) {\n row.height = mergedCellHeight;\n }\n }\n }\n };\n //if row has row span value greater than 1, need to add it in spannedRowCollection\n Layout.prototype.updateSpannedRowCollection = function (rowSpan, row) {\n if (rowSpan > 1 && !isNullOrUndefined(row.ownerTable)) {\n //Checks the rowspan is already exist in the list\n if (!row.ownerTable.spannedRowCollection.containsKey(row.index + rowSpan - 1)) {\n row.ownerTable.spannedRowCollection.add(row.index + rowSpan - 1, row.index);\n }\n }\n };\n /**\n * Updates row height by cell spacing\n * @param rowWidget\n * @param viewer\n * @param row\n */\n Layout.prototype.updateRowHeightByCellSpacing = function (tableCollection, row, viewer) {\n if (row.ownerTable.tableFormat.cellSpacing > 0) {\n // In the Case of tableWidget is greater than one and rowWidget is start at the Top Position of the page. \n // In such case we have update the row height with half of cell spacing.\n // Remaining cases we have to update the entire hight\n // tslint:disable-next-line:max-line-length\n if (tableCollection.length > 1 && row.y === viewer.clientArea.y && viewer instanceof PageLayoutViewer) {\n row.height = row.height - HelperMethods.convertPointToPixel(row.ownerTable.tableFormat.cellSpacing) / 2;\n }\n }\n };\n /**\n * Checks whether row span is end.\n * @param row\n * @param viewer\n */\n Layout.prototype.isRowSpanEnd = function (row, viewer) {\n var rowIndex = row.index;\n var rowSpan = 1;\n for (var i = 0; i < viewer.splittedCellWidgets.length; i++) {\n var splittedCell = viewer.splittedCellWidgets[i];\n // tslint:disable-next-line:max-line-length\n rowSpan = (isNullOrUndefined(splittedCell) || isNullOrUndefined(splittedCell.cellFormat)) ? rowSpan : splittedCell.cellFormat.rowSpan;\n if (rowIndex - splittedCell.rowIndex === rowSpan - 1) {\n return true;\n }\n }\n return false;\n };\n /**\n * Checks whether vertical merged cell to continue or not.\n * @param row\n * @private\n */\n Layout.prototype.isVerticalMergedCellContinue = function (row) {\n var colIndex = 0;\n for (var i = 0; i < row.childWidgets.length; i++) {\n var cell = row.childWidgets[i];\n if (colIndex < cell.columnIndex) {\n return true;\n }\n colIndex += cell.cellFormat.columnSpan;\n }\n return colIndex < row.ownerTable.tableHolder.columns.length;\n };\n /**\n * Splits widgets.\n * @param tableRowWidget\n * @param viewer\n * @param splittedWidget\n * @param row\n */\n // tslint:disable-next-line:max-line-length\n Layout.prototype.splitWidgets = function (tableRowWidget, viewer, tableCollection, rowCollection, splittedWidget) {\n if (this.isFirstLineFitForRow(viewer.clientArea.bottom, tableRowWidget) && tableRowWidget.childWidgets.length > 0) {\n splittedWidget = this.getSplittedWidgetForRow(viewer.clientArea.bottom, tableCollection, rowCollection, tableRowWidget);\n if (viewer.splittedCellWidgets.length > 0 || splittedWidget !== tableRowWidget) {\n //Adds the splitted widget of a vertical merged cell, to next row widget in the next page.\n this.insertSplittedCellWidgets(viewer, tableCollection, splittedWidget, tableRowWidget.indexInOwner - 1);\n }\n }\n else {\n //Adds the splitted widget of a vertical merged cell, to next row widget in the next page.\n this.insertSplittedCellWidgets(viewer, tableCollection, splittedWidget, tableRowWidget.indexInOwner - 1);\n }\n return splittedWidget;\n };\n /**\n * Gets splitted widget for row.\n * @param bottom\n * @param tableRowWidget\n */\n // tslint:disable-next-line:max-line-length\n Layout.prototype.getSplittedWidgetForRow = function (bottom, tableCollection, rowCollection, tableRowWidget) {\n var splittedWidget = undefined;\n var rowIndex = tableRowWidget.index;\n for (var i = 0; i < tableRowWidget.childWidgets.length; i++) {\n var cellWidget = tableRowWidget.childWidgets[i];\n var splittedCell = this.getSplittedWidget(bottom, true, tableCollection, rowCollection, cellWidget);\n if (!isNullOrUndefined(splittedCell)) {\n if (splittedCell === cellWidget) {\n //Returns if the whole content of the row does not fit in current page.\n return tableRowWidget;\n }\n if (tableRowWidget.childWidgets.indexOf(splittedCell) !== -1) {\n tableRowWidget.childWidgets.splice(tableRowWidget.childWidgets.indexOf(splittedCell), 1);\n }\n if (i === 0 || tableRowWidget.height < cellWidget.height + cellWidget.margin.top + cellWidget.margin.bottom) {\n tableRowWidget.height = cellWidget.height + cellWidget.margin.top + cellWidget.margin.bottom;\n }\n if (isNullOrUndefined(splittedWidget)) {\n //Creates new widget, to hold the splitted contents.\n splittedWidget = new TableRowWidget();\n splittedWidget.containerWidget = tableRowWidget.containerWidget;\n splittedWidget.index = tableRowWidget.index;\n splittedWidget.rowFormat = tableRowWidget.rowFormat;\n this.updateWidgetLocation(tableRowWidget, splittedWidget);\n splittedWidget.height = 0;\n rowCollection.push(splittedWidget);\n }\n var rowSpan = 1;\n // tslint:disable-next-line:max-line-length\n rowSpan = (isNullOrUndefined(splittedCell) || isNullOrUndefined(splittedCell.cellFormat)) ? rowSpan : splittedCell.cellFormat.rowSpan;\n if (rowIndex - splittedCell.rowIndex === rowSpan - 1\n && splittedWidget.height < splittedCell.height + splittedCell.margin.top + splittedCell.margin.bottom) {\n splittedWidget.height = splittedCell.height + splittedCell.margin.top + splittedCell.margin.bottom;\n }\n splittedWidget.childWidgets.push(splittedCell);\n splittedCell.containerWidget = splittedWidget;\n }\n }\n return splittedWidget;\n };\n /**\n * Updates widget to table.\n * @param row\n * @param viewer\n */\n /* tslint:disable */\n Layout.prototype.updateWidgetsToTable = function (tableWidgets, rowWidgets, row) {\n var rowHeight = this.getRowHeight(row, [row]);\n var viewer = this.viewer;\n //initializing row properties with default values.\n var isHeader = row.rowFormat.isHeader;\n var isAllowBreakAcrossPages = row.rowFormat.allowBreakAcrossPages;\n var heightType = row.rowFormat.heightType;\n var cellSpacing = 0;\n var count = 0;\n var tableRowWidget = row;\n var moveRowToNextTable = false;\n if (row.ownerTable.continueHeader && !isHeader) {\n row.ownerTable.continueHeader = false;\n }\n cellSpacing = (!isNullOrUndefined(row.ownerTable) && !isNullOrUndefined(row.ownerTable.tableFormat)) ? HelperMethods.convertPointToPixel(row.ownerTable.tableFormat.cellSpacing) : 0;\n while (count < rowWidgets.length) {\n count = rowWidgets.length;\n if (row.ownerTable.isInsideTable || (viewer.splittedCellWidgets.length === 0 && tableRowWidget.y + tableRowWidget.height + cellSpacing <= viewer.clientArea.bottom)) {\n this.addWidgetToTable(viewer, tableWidgets, rowWidgets, tableRowWidget);\n }\n else {\n //Split widget for next page\n if (viewer.splittedCellWidgets.length > 0 && tableRowWidget.y + tableRowWidget.height <= viewer.clientArea.bottom) {\n var isRowSpanEnd = this.isRowSpanEnd(row, viewer);\n if (!isRowSpanEnd) {\n if (this.isVerticalMergedCellContinue(row) && tableRowWidget.y == viewer.clientArea.y) {\n this.insertSplittedCellWidgets(viewer, tableWidgets, tableRowWidget, tableRowWidget.indexInOwner - 1);\n }\n this.addWidgetToTable(viewer, tableWidgets, rowWidgets, tableRowWidget);\n continue;\n }\n }\n var splittedWidget = tableRowWidget;\n var tableWidget = tableWidgets[tableWidgets.length - 1];\n if (rowHeight + tableRowWidget.y > viewer.clientArea.bottom) {\n // tslint:disable-next-line:max-line-length\n if (!isAllowBreakAcrossPages || (isHeader && row.ownerTable.continueHeader) || (heightType === 'AtLeast' && HelperMethods.convertPointToPixel(row.rowFormat.height) < viewer.clientArea.bottom)) {\n // tslint:disable-next-line:max-line-length\n if ((heightType === 'AtLeast' && HelperMethods.convertPointToPixel(row.rowFormat.height) < viewer.clientActiveArea.height && isAllowBreakAcrossPages) || (heightType !== 'Exactly' && tableRowWidget.y === viewer.clientArea.y) || (heightType === 'Auto' && isAllowBreakAcrossPages)) {\n splittedWidget = this.splitWidgets(tableRowWidget, viewer, tableWidgets, rowWidgets, splittedWidget);\n }\n if (heightType === 'Exactly' && tableRowWidget.y === viewer.clientArea.y) {\n this.addWidgetToTable(viewer, tableWidgets, rowWidgets, tableRowWidget);\n count++;\n }\n if (isHeader && row.ownerTable.continueHeader) {\n row.ownerTable.header = false;\n row.ownerTable.continueHeader = false;\n row.ownerTable.headerHeight = 0;\n var pages = undefined;\n // if (viewer instanceof PageLayoutViewer) {\n pages = viewer.pages;\n // }\n if (!isNullOrUndefined(pages)) {\n for (var i = 0; i < pages.length; i++) {\n if (pages[i].repeatHeaderRowTableWidget) {\n pages[i].repeatHeaderRowTableWidget = false;\n }\n }\n }\n }\n }\n else {\n if ((heightType === 'Auto' || heightType === 'AtLeast') && isAllowBreakAcrossPages) {\n // tslint:disable-next-line:max-line-length\n if (!(HelperMethods.convertPointToPixel(row.rowFormat.height) > viewer.clientArea.bottom) || tableRowWidget.y === viewer.clientArea.y) {\n splittedWidget = this.splitWidgets(tableRowWidget, viewer, tableWidgets, rowWidgets, splittedWidget);\n }\n }\n else if (heightType === 'Exactly' && tableRowWidget.y === viewer.clientArea.y) {\n this.addWidgetToTable(viewer, tableWidgets, rowWidgets, tableRowWidget);\n count++;\n }\n }\n }\n else {\n var isInsertSplittedWidgets = false;\n // Splitting handled for the merged cell with allowRowBreakAcross pages. \n if (this.isVerticalMergedCellContinue(row) && (isAllowBreakAcrossPages ||\n (isInsertSplittedWidgets = tableRowWidget.y == viewer.clientArea.y))) {\n splittedWidget = this.splitWidgets(tableRowWidget, viewer, tableWidgets, rowWidgets, splittedWidget);\n }\n }\n //Create New table for splitted widget\n if (!isNullOrUndefined(splittedWidget)) {\n if (splittedWidget !== tableRowWidget) {\n this.addWidgetToTable(viewer, tableWidgets, rowWidgets, tableRowWidget, tableRowWidget.nextRow);\n //Updates the fitted table rows to current page.\n this.updateWidgetsToPage(tableWidgets, rowWidgets, row.ownerTable, tableRowWidget.nextRow);\n var index_2 = tableWidgets.indexOf(tableRowWidget.containerWidget);\n if (index_2 + 1 >= tableWidgets.length) {\n //Creates new table widget for splitted rows.\n this.addTableWidget(viewer.clientActiveArea, tableWidgets, true);\n }\n tableRowWidget = splittedWidget;\n }\n else {\n if (row.index > 0) {\n //Updates the fitted table rows to current page.\n this.updateWidgetsToPage(tableWidgets, rowWidgets, row.ownerTable, row);\n // Need to update on this further\n if (row.previousRenderedWidget instanceof TableRowWidget) {\n // Need to update on this further\n var prevWidget = row.previousRenderedWidget;\n if (HelperMethods.round(tableRowWidget.y, 2) === HelperMethods.round(prevWidget.y + prevWidget.height, 2)) {\n var prevIndex = tableWidgets.indexOf(prevWidget.containerWidget);\n if (prevIndex + 1 >= tableWidgets.length) {\n //Creates new table widget for splitted rows.\n this.addTableWidget(viewer.clientActiveArea, tableWidgets, true);\n }\n }\n else {\n //Creates new table widget for splitted rows.\n this.addTableWidget(viewer.clientActiveArea, tableWidgets, true);\n }\n }\n else {\n //Creates new table widget for splitted rows.\n this.addTableWidget(viewer.clientActiveArea, tableWidgets, true);\n }\n }\n moveRowToNextTable = true;\n count--;\n }\n tableWidget = tableWidgets[tableWidgets.length - 1];\n var prevBodyWidget = undefined;\n if (tableWidgets.length > 1) {\n //Get Previous Splitted Widget container\n prevBodyWidget = tableWidgets[tableWidgets.length - 2].containerWidget;\n }\n else {\n var previousBlock = row.ownerTable.previousRenderedWidget;\n prevBodyWidget = previousBlock.containerWidget;\n }\n var pageIndex = 0;\n if (!isNullOrUndefined(prevBodyWidget)) {\n pageIndex = viewer.pages.indexOf(prevBodyWidget.page);\n }\n var index = row.ownerTable.containerWidget.index;\n var bodyWidget = void 0;\n var block = void 0;\n if (moveRowToNextTable && tableWidgets.length === 1) {\n block = tableWidgets[tableWidgets.length - 1];\n }\n else {\n block = tableWidgets[tableWidgets.length - 2];\n }\n bodyWidget = this.moveBlocksToNextPage(block);\n var curretTable = tableWidgets[tableWidgets.length - 1];\n //Move Next RowWidge to next page\n if (moveRowToNextTable) {\n // tslint:disable-next-line:max-line-length\n if (row.index === 0 && curretTable.containerWidget && curretTable.containerWidget.childWidgets.indexOf(curretTable) !== -1) {\n curretTable.containerWidget.childWidgets.splice(curretTable.containerWidget.childWidgets.indexOf(curretTable), 1);\n }\n }\n bodyWidget.childWidgets.unshift(curretTable);\n curretTable.containerWidget = bodyWidget;\n if (moveRowToNextTable && row.index > 0 || rowWidgets.length > 1) {\n this.moveNextWidgetsToTable(tableWidgets, rowWidgets, !moveRowToNextTable);\n }\n moveRowToNextTable = false;\n if (row.ownerTable.header && tableRowWidget.height < viewer.clientArea.bottom) {\n // if (viewer instanceof PageLayoutViewer) {\n viewer.currentRenderingPage.repeatHeaderRowTableWidget = true;\n // }\n //Updates table widgets location.\n viewer.updateClientAreaForBlock(row.ownerTable, true, tableWidgets);\n // tslint:disable-next-line:max-line-length\n //Update splitted row widget location. if header is repeated update the y position of splitted widget to header height.\n splittedWidget.x = splittedWidget.x;\n splittedWidget.y = tableWidget.y + row.ownerTable.headerHeight;\n // let cellspace: number = viewer instanceof PageLayoutViewer ? cellspacing / 2 : cellspacing;\n var cellspace = cellSpacing / 2;\n this.updateChildLocationForRow(tableWidget.y + row.ownerTable.headerHeight - cellspace, splittedWidget);\n }\n else {\n //Updates table widgets location.\n viewer.updateClientAreaForBlock(row.ownerTable, true, tableWidgets);\n // tslint:disable-next-line:max-line-length\n //Update splitted row widget location. if header is repeated update the y position of splitted widget to header height.\n splittedWidget.x = splittedWidget.x;\n splittedWidget.y = tableWidget.y;\n // let cellspace: number = viewer instanceof PageLayoutViewer ? cellspacing / 2 : cellspacing;\n var cellspace = cellSpacing / 2;\n this.updateChildLocationForRow(tableWidget.y - cellspace, splittedWidget);\n }\n }\n }\n if (isHeader && row.ownerTable.continueHeader) {\n row.ownerTable.header = true;\n row.ownerTable.headerHeight = rowHeight + row.ownerTable.headerHeight;\n }\n if (isHeader && !isNullOrUndefined(this.getHeader(row.ownerTable)) && row.index === this.getHeader(row.ownerTable).index) {\n var headerHeight = this.getHeaderHeight(row.ownerTable, row, rowWidgets);\n if (headerHeight > row.ownerTable.headerHeight || headerHeight > row.ownerTable.headerHeight) {\n row.ownerTable.headerHeight = headerHeight;\n }\n if (row.ownerTable.headerHeight > viewer.clientArea.height) {\n row.ownerTable.header = false;\n row.ownerTable.continueHeader = false;\n row.ownerTable.headerHeight = 0;\n var pages = viewer.pages;\n for (var i = 0; i < pages.length; i++) {\n if (pages[i].repeatHeaderRowTableWidget) {\n pages[i].repeatHeaderRowTableWidget = false;\n }\n }\n }\n }\n if (tableWidgets.length > 2 && row.ownerTable.header && tableRowWidget.height < viewer.clientActiveArea.bottom &&\n !viewer.currentRenderingPage.repeatHeaderRowTableWidget) {\n viewer.currentRenderingPage.repeatHeaderRowTableWidget = true;\n }\n }\n };\n /* tslint:enable */\n /**\n * Gets header.\n * @param table\n * @private\n */\n Layout.prototype.getHeader = function (table) {\n var header = undefined;\n var flag = true;\n table = table.getSplitWidgets()[0];\n for (var i = 0; i < table.childWidgets.length; i++) {\n var row = table.childWidgets[i];\n if (row.rowFormat.isHeader) {\n header = row;\n }\n else {\n flag = false;\n }\n if (!flag) {\n break;\n }\n }\n return header;\n };\n /**\n * Gets header height.\n * @param ownerTable\n * @param row\n */\n Layout.prototype.getHeaderHeight = function (ownerTable, row, rowCollection) {\n var height = 0;\n if (row.ownerTable.childWidgets.length > 0 && ownerTable.childWidgets[0].rowFormat.isHeader) {\n for (var i = 0; i < ownerTable.childWidgets.length; i++) {\n var row_1 = ownerTable.childWidgets[i];\n if (row_1.rowFormat.isHeader) {\n height = height + this.getRowHeight(row_1, rowCollection);\n }\n else {\n break;\n }\n }\n }\n return height;\n };\n /**\n * Updates widgets to row.\n * @param cell\n */\n Layout.prototype.updateWidgetToRow = function (cell) {\n var viewer = this.viewer;\n //Adds table cell widget to owner row widget.\n var rowWidget = cell.ownerRow;\n var cellLeft = rowWidget.x;\n if (rowWidget.childWidgets.length > 0) {\n var lastWidget = rowWidget.childWidgets[rowWidget.childWidgets.length - 1];\n cellLeft = lastWidget.x + lastWidget.width + lastWidget.margin.right;\n }\n // rowWidget.childWidgets.push(cell);\n cell.containerWidget = rowWidget;\n //If the row height is set as Atleast then height is set to atleast height for the first cell of the row.\n // tslint:disable-next-line:max-line-length\n if (!isNullOrUndefined(cell.ownerRow) && cell.ownerRow.rowFormat.heightType !== 'Exactly' && HelperMethods.convertPointToPixel(cell.ownerRow.rowFormat.height) > 0 && cell.cellIndex === 0) {\n rowWidget.height = rowWidget.height + HelperMethods.convertPointToPixel(cell.ownerRow.rowFormat.height);\n }\n //Add condition not cell merged vertically.\n if (cell.cellFormat.rowSpan === 1) {\n var cellHeight = cell.height + cell.margin.top + cell.margin.bottom;\n if (rowWidget.height - HelperMethods.convertPointToPixel(cell.ownerTable.tableFormat.cellSpacing) < cellHeight) {\n rowWidget.height = cellHeight + HelperMethods.convertPointToPixel(cell.ownerTable.tableFormat.cellSpacing);\n }\n }\n };\n /**\n * Updates height for row widget.\n * @param viewer\n * @param isUpdateVerticalPosition\n * @param rowWidget\n */\n // tslint:disable-next-line:max-line-length\n Layout.prototype.updateHeightForRowWidget = function (viewer, isUpdateVerticalPosition, tableCollection, rowCollection, rowWidget, isLayouted, endRowWidget) {\n for (var i = 0; i < rowWidget.childWidgets.length; i++) {\n var cellspacing = 0;\n var cellWidget = undefined;\n var childWidget = rowWidget.childWidgets[i];\n // if (childWidget instanceof TableCellWidget) {\n cellWidget = childWidget;\n // }\n var rowSpan = 1;\n rowSpan = cellWidget.cellFormat.rowSpan;\n cellspacing = HelperMethods.convertPointToPixel(cellWidget.ownerTable.tableFormat.cellSpacing);\n if (rowSpan > 1) {\n var currentRowWidgetIndex = rowWidget.containerWidget.childWidgets.indexOf(rowWidget);\n // tslint:disable-next-line:max-line-length\n var rowSpanWidgetEndIndex = currentRowWidgetIndex + rowSpan - 1 - (rowWidget.index - cellWidget.rowIndex);\n if (viewer.clientArea.bottom < cellWidget.y + cellWidget.height + cellWidget.margin.bottom\n || rowSpanWidgetEndIndex >= currentRowWidgetIndex + 1) {\n this.splitSpannedCellWidget(cellWidget, tableCollection, rowCollection, viewer);\n }\n var spanEndRowWidget = rowWidget;\n if (rowSpanWidgetEndIndex > 0) {\n if (rowSpanWidgetEndIndex < rowWidget.containerWidget.childWidgets.length) {\n var childWidget_1 = rowWidget.containerWidget.childWidgets[rowSpanWidgetEndIndex];\n if (childWidget_1 instanceof TableRowWidget) {\n spanEndRowWidget = childWidget_1;\n if (spanEndRowWidget === endRowWidget) {\n spanEndRowWidget = rowWidget;\n }\n }\n }\n else {\n // tslint:disable-next-line:max-line-length\n spanEndRowWidget = rowWidget.containerWidget.childWidgets[rowWidget.containerWidget.childWidgets.length - 1];\n }\n }\n if (cellWidget.y + cellWidget.height + cellWidget.margin.bottom < spanEndRowWidget.y + spanEndRowWidget.height) {\n cellWidget.height = spanEndRowWidget.y + spanEndRowWidget.height - cellWidget.y - cellWidget.margin.bottom;\n // tslint:disable-next-line:max-line-length\n }\n else if (isLayouted && spanEndRowWidget && (spanEndRowWidget.y !== 0 && spanEndRowWidget.height !== 0) && cellWidget.y + cellWidget.height + cellWidget.margin.bottom > spanEndRowWidget.y + spanEndRowWidget.height) {\n spanEndRowWidget.height = cellWidget.y + cellWidget.height + cellWidget.margin.bottom - spanEndRowWidget.y;\n // tslint:disable-next-line:max-line-length\n //Update the next rowlayout widget location. Reason for the updation is previous row height is updated when cell height is greater. So already layouted next row location has to be updated again.\n // if (rowWidget === spanEndRowWidget && rowWidget.nextWidget instanceof TableRowWidget) {\n // let nextRow: TableRowWidget = rowWidget.nextWidget as TableRowWidget;\n // // Need to update on this further\n // // if (viewer.renderedElements.containsKey(nextRow)) {\n // // let nextWidget: TableRowWidget[] = viewer.renderedElements.get(nextRow) as TableRowWidget[];\n // // if (nextWidget.length > 0) {\n // // nextWidget[0].x = nextWidget[0].x;\n // // nextWidget[0].y = rowWidget.y + rowWidget.height;\n // // }\n // // }\n // }\n }\n }\n else {\n if (cellspacing > 0) {\n // In the Case of tableWidget is greater than one and rowWidget is start at the Top Position of the page. \n // In such case we have update the cell height with half of cell spacing.\n // Remaining cases we have to update the entire hight\n // tslint:disable-next-line:max-line-length\n if (tableCollection.length > 1 && rowWidget.y === viewer.clientArea.y && viewer instanceof PageLayoutViewer) {\n cellspacing = cellspacing / 2;\n }\n }\n cellWidget.height = rowWidget.height - cellWidget.margin.top - cellWidget.margin.bottom - cellspacing;\n }\n this.updateHeightForCellWidget(viewer, tableCollection, rowCollection, cellWidget);\n var widget = rowWidget.containerWidget;\n while (widget.containerWidget instanceof Widget) {\n widget = widget.containerWidget;\n }\n var page = undefined;\n if (widget instanceof BodyWidget) {\n page = widget.page;\n }\n // tslint:disable-next-line:max-line-length\n if ((viewer instanceof PageLayoutViewer && viewer.visiblePages.indexOf(page) !== -1) || isUpdateVerticalPosition) {\n this.updateCellVerticalPosition(cellWidget, false, false);\n }\n //Renders the current table row contents, after relayout based on editing.\n // if (viewer instanceof PageLayoutViewer && (viewer as PageLayoutViewer).visiblePages.indexOf(page) !== -1) {\n // //Added proper undefined condition check for Asynchronous operation.\n // if (!isNullOrUndefined(rowWidget.tableRow) && !isNullOrUndefined(rowWidget.tableRow.rowFormat)) {\n // this.viewer.updateScrollBars();\n // //this.render.renderTableCellWidget(page, cellWidget);\n // }\n // }\n }\n };\n /**\n * Updates height for cell widget.\n * @param viewer\n * @param cellWidget\n */\n // tslint:disable-next-line:max-line-length\n Layout.prototype.updateHeightForCellWidget = function (viewer, tableWidget, rowCollection, cellWidget) {\n for (var i = 0; i < cellWidget.childWidgets.length; i++) {\n if (cellWidget.childWidgets[i] instanceof TableWidget) {\n this.updateHeightForTableWidget(tableWidget, rowCollection, cellWidget.childWidgets[i]);\n }\n }\n };\n /**\n * Gets row height.\n * @param row\n * @private\n */\n Layout.prototype.getRowHeight = function (row, rowCollection) {\n var height = 0;\n if (row.rowFormat.heightType === 'Exactly') {\n height = row.rowFormat.height;\n }\n else {\n for (var i = 0; i < rowCollection.length; i++) {\n if (rowCollection[i] instanceof TableRowWidget) {\n height = rowCollection[i].height + height;\n }\n }\n height = Math.max(height, row.rowFormat.height);\n }\n return height;\n };\n /**\n * splits spanned cell widget.\n * @param cellWidget\n * @param viewer\n */\n // tslint:disable-next-line:max-line-length\n Layout.prototype.splitSpannedCellWidget = function (cellWidget, tableCollection, rowCollection, viewer) {\n var splittedCell = this.getSplittedWidget(viewer.clientArea.bottom, false, tableCollection, rowCollection, cellWidget);\n if (!isNullOrUndefined(splittedCell)) {\n //Adds the splitted contents of a vertical merged cell, in order preserve in next page.\n viewer.splittedCellWidgets.push(splittedCell);\n }\n };\n /**\n * Inserts splitted cell widgets.\n * @param viewer\n * @param rowWidget\n */\n // tslint:disable-next-line:max-line-length\n Layout.prototype.insertSplittedCellWidgets = function (viewer, tableCollection, rowWidget, previousRowIndex) {\n var left = rowWidget.x;\n var tableWidth = 0;\n tableWidth = this.getTableWidth(rowWidget.ownerTable);\n for (var i = 0; i < rowWidget.childWidgets.length; i++) {\n var cellWidget = rowWidget.childWidgets[i];\n if (Math.round(left) < Math.round(cellWidget.x - cellWidget.margin.left)) {\n if (this.insertRowSpannedWidget(rowWidget, viewer, left, i)) {\n i--;\n continue;\n }\n var length_1 = rowWidget.childWidgets.length;\n this.insertEmptySplittedCellWidget(rowWidget, tableCollection, left, i, previousRowIndex);\n if (length_1 < rowWidget.childWidgets.length) {\n i--;\n continue;\n }\n }\n left += cellWidget.margin.left + cellWidget.width + cellWidget.margin.right;\n if (i === rowWidget.childWidgets.length - 1 && Math.round(left) < Math.round(rowWidget.x + tableWidth)) {\n if (this.insertRowSpannedWidget(rowWidget, viewer, left, i + 1)) {\n continue;\n }\n this.insertEmptySplittedCellWidget(rowWidget, tableCollection, left, i + 1, previousRowIndex);\n continue;\n }\n }\n // tslint:disable-next-line:max-line-length\n // Special case: when the child widgets of row is equal to 0 then the splitted widgets in the viewer is added in the table row widgets. \n if ((isNullOrUndefined(rowWidget.childWidgets) || rowWidget.childWidgets.length === 0) && viewer.splittedCellWidgets.length > 0) {\n for (var j = 0; j < viewer.splittedCellWidgets.length; j++) {\n var widget = viewer.splittedCellWidgets[j];\n if (Math.round(left) <= Math.round(widget.x - widget.margin.left)) {\n if (this.insertRowSpannedWidget(rowWidget, viewer, left, j)) {\n j--;\n continue;\n }\n var count = rowWidget.childWidgets.length;\n this.insertEmptySplittedCellWidget(rowWidget, tableCollection, left, j, previousRowIndex);\n if (count < rowWidget.childWidgets.length) {\n j--;\n continue;\n }\n }\n left += widget.margin.left + widget.width + widget.margin.right;\n if (j === rowWidget.childWidgets.length - 1 && Math.round(left) <\n Math.round(rowWidget.x + tableWidth)) {\n if (this.insertRowSpannedWidget(rowWidget, viewer, left, j + 1)) {\n continue;\n }\n this.insertEmptySplittedCellWidget(rowWidget, tableCollection, left, j + 1, previousRowIndex);\n continue;\n }\n }\n }\n if (viewer.splittedCellWidgets.length > 0) {\n viewer.splittedCellWidgets = [];\n }\n };\n /**\n * Inserts spanned row widget.\n * @param rowWidget\n * @param viewer\n * @param left\n * @param index\n */\n Layout.prototype.insertRowSpannedWidget = function (rowWidget, viewer, left, index) {\n var cellSpacing = 0;\n if (rowWidget.ownerTable.tableFormat.cellSpacing > 0) {\n cellSpacing = HelperMethods.convertPointToPixel(rowWidget.ownerTable.tableFormat.cellSpacing);\n }\n for (var i = 0; i < viewer.splittedCellWidgets.length; i++) {\n var splittedCell = viewer.splittedCellWidgets[i];\n if (Math.round(left) === Math.round(splittedCell.x - splittedCell.margin.left)) {\n rowWidget.childWidgets.splice(index, 0, splittedCell);\n splittedCell.containerWidget = rowWidget;\n //If the splitted cell location differs from expected location update the location of row child widgets.\n if (splittedCell.y !== rowWidget.y + splittedCell.margin.top + cellSpacing) {\n this.updateChildLocationForRow(rowWidget.y, rowWidget);\n }\n viewer.splittedCellWidgets = [];\n return true;\n }\n }\n return false;\n };\n /**\n * Inserts empty splitted cell widgets.\n * @param rowWidget\n * @param left\n * @param index\n */\n // tslint:disable-next-line:max-line-length\n Layout.prototype.insertEmptySplittedCellWidget = function (currentRow, tableCollection, left, index, previousRowIndex) {\n var tableWidget = tableCollection[tableCollection.length - 1];\n for (var i = previousRowIndex; i >= 0; i--) {\n var rowWidget = tableWidget.childWidgets[i];\n var previousLeft = rowWidget.x;\n for (var j = 0; j < rowWidget.childWidgets.length; j++) {\n var rowSpan = 1;\n var cellWidget = rowWidget.childWidgets[j];\n if (Math.round(left) === Math.round(previousLeft)) {\n rowSpan = (isNullOrUndefined(cellWidget) || isNullOrUndefined(cellWidget.cellFormat)) ? rowSpan :\n cellWidget.cellFormat.rowSpan;\n if (rowSpan > 1) {\n var emptyCellWidget = this.createCellWidget(cellWidget);\n currentRow.childWidgets.splice(index, 0, emptyCellWidget);\n emptyCellWidget.containerWidget = currentRow;\n }\n return;\n }\n previousLeft += cellWidget.margin.left + cellWidget.width + cellWidget.margin.right;\n }\n }\n };\n /**\n * Gets spllited widget.\n * @param bottom\n * @param splitMinimalWidget\n * @param cellWidget\n */\n // tslint:disable-next-line:max-line-length\n Layout.prototype.getSplittedWidget = function (bottom, splitMinimalWidget, tableCollection, rowCollection, cellWidget) {\n var splittedWidget = undefined;\n if (cellWidget.y + cellWidget.height > bottom - cellWidget.margin.bottom) {\n for (var i = 0; i < cellWidget.childWidgets.length; i++) {\n if (cellWidget.childWidgets[i] instanceof ParagraphWidget) {\n var paragraphWidget = cellWidget.childWidgets[i];\n var splittedPara = this.getSplittedWidgetForPara(bottom - cellWidget.margin.bottom, paragraphWidget);\n if (!isNullOrUndefined(splittedPara)) {\n if (i === 0 && splittedPara === paragraphWidget) {\n //Returns if the whole content of the cell does not fit in current page.\n return cellWidget;\n }\n if (cellWidget.childWidgets.indexOf(splittedPara) !== -1) {\n cellWidget.childWidgets.splice(cellWidget.childWidgets.indexOf(splittedPara), 1);\n i--;\n }\n cellWidget.height -= splittedPara.height;\n if (isNullOrUndefined(splittedWidget)) {\n //Creates new widget, to hold the splitted contents.\n splittedWidget = this.createCellWidget(cellWidget);\n }\n splittedWidget.height += splittedPara.height;\n splittedWidget.childWidgets.push(splittedPara);\n splittedPara.containerWidget = splittedWidget;\n }\n }\n else {\n var tableWidget = cellWidget.childWidgets[i];\n var tableCol = [tableWidget];\n //Check for nested table.\n if (bottom - cellWidget.margin.bottom < tableWidget.y + tableWidget.height) {\n var tableHeight = tableWidget.height;\n // tslint:disable-next-line:max-line-length\n var splittedTable = this.getSplittedWidgetForTable(bottom - cellWidget.margin.bottom, tableCol, tableWidget);\n if (!isNullOrUndefined(splittedTable)) {\n if (i === 0 && splittedTable === tableWidget) {\n //Returns if the whole table does not fit in current page.\n return cellWidget;\n }\n if (cellWidget.childWidgets.indexOf(splittedTable) !== -1) {\n cellWidget.childWidgets.splice(cellWidget.childWidgets.indexOf(splittedTable), 1);\n i--;\n cellWidget.height -= splittedTable.height;\n }\n else {\n cellWidget.height -= tableHeight - tableWidget.height;\n }\n if (isNullOrUndefined(splittedWidget)) {\n //Creates new widget, to hold the splitted contents.\n splittedWidget = this.createCellWidget(cellWidget);\n }\n splittedWidget.height += splittedTable.height;\n splittedWidget.childWidgets.push(splittedTable);\n splittedTable.containerWidget = splittedWidget;\n }\n }\n }\n }\n }\n if (isNullOrUndefined(splittedWidget) && splitMinimalWidget) {\n //Creates new widget, to hold the splitted contents.\n splittedWidget = this.createCellWidget(cellWidget);\n }\n return splittedWidget;\n };\n /**\n * Gets list level pattern\n * @param value\n * @private\n */\n Layout.prototype.getListLevelPattern = function (value) {\n switch (value) {\n case 0:\n return 'Arabic';\n case 1:\n return 'UpRoman';\n case 2:\n return 'LowRoman';\n case 3:\n return 'UpLetter';\n case 4:\n return 'LowLetter';\n case 5:\n return 'Ordinal';\n case 6:\n return 'Number';\n case 7:\n return 'OrdinalText';\n case 8:\n return 'LeadingZero';\n case 9:\n return 'Bullet';\n case 10:\n return 'FarEast';\n case 11:\n return 'Special';\n default:\n return 'None';\n }\n };\n /**\n * Creates cell widget.\n * @param cell\n */\n Layout.prototype.createCellWidget = function (cell) {\n var cellWidget = new TableCellWidget();\n cellWidget.cellFormat = cell.cellFormat;\n cellWidget.index = cell.index;\n cellWidget.rowIndex = cell.rowIndex;\n cellWidget.columnIndex = cell.columnIndex;\n cellWidget.containerWidget = cell.containerWidget;\n this.updateWidgetLocation(cell, cellWidget);\n cellWidget.margin = cell.margin;\n cellWidget.leftBorderWidth = HelperMethods.convertPointToPixel(cell.leftBorderWidth);\n cellWidget.rightBorderWidth = HelperMethods.convertPointToPixel(cell.rightBorderWidth);\n return cellWidget;\n };\n /**\n * Create Table Widget\n */\n Layout.prototype.createTableWidget = function (table) {\n var newTable = new TableWidget();\n if (table.header) {\n newTable.header = table.header;\n newTable.headerHeight = table.headerHeight;\n }\n newTable.index = table.index;\n newTable.tableFormat = table.tableFormat;\n newTable.tableHolder = table.tableHolder;\n newTable.isGridUpdated = table.isGridUpdated;\n return newTable;\n };\n /**\n * Gets splitted widget for paragraph.\n * @param bottom\n * @param paragraphWidget\n */\n Layout.prototype.getSplittedWidgetForPara = function (bottom, paragraphWidget) {\n var lineBottom = paragraphWidget.y;\n var splittedWidget = undefined;\n for (var i = 0; i < paragraphWidget.childWidgets.length; i++) {\n var lineWidget = paragraphWidget.childWidgets[i];\n if (bottom < lineBottom + lineWidget.height) {\n if (i === 0) {\n if (lineWidget.paragraph.containerWidget instanceof TableCellWidget) {\n //checks first line of the page is exceed the page height\n if (lineWidget.paragraph.containerWidget.y === paragraphWidget.y) {\n lineBottom += lineWidget.height;\n continue;\n }\n }\n splittedWidget = paragraphWidget;\n break;\n }\n if (paragraphWidget.childWidgets.indexOf(lineWidget) !== -1) {\n paragraphWidget.childWidgets.splice(paragraphWidget.childWidgets.indexOf(lineWidget), 1);\n i--;\n }\n paragraphWidget.height -= lineWidget.height;\n if (isNullOrUndefined(splittedWidget)) {\n //Creates new widget, to hold the splitted contents.\n splittedWidget = new ParagraphWidget();\n splittedWidget.characterFormat = paragraphWidget.characterFormat;\n splittedWidget.paragraphFormat = paragraphWidget.paragraphFormat;\n splittedWidget.index = paragraphWidget.index;\n this.updateWidgetLocation(paragraphWidget, splittedWidget);\n splittedWidget.height = lineWidget.height;\n }\n else {\n splittedWidget.height += lineWidget.height;\n }\n splittedWidget.childWidgets.push(lineWidget);\n lineWidget.paragraph = splittedWidget;\n }\n lineBottom += lineWidget.height;\n }\n return splittedWidget;\n };\n /**\n * Gets splitted table widget.\n * @param bottom\n * @param tableWidget\n * @private\n */\n // tslint:disable-next-line:max-line-length\n Layout.prototype.getSplittedWidgetForTable = function (bottom, tableCollection, tableWidget) {\n var rowBottom = tableWidget.y;\n var splittedWidget = undefined;\n for (var i = 0; i < tableWidget.childWidgets.length; i++) {\n var rowWidget = undefined;\n var childWidget = tableWidget.childWidgets[i];\n // if (childWidget instanceof TableRowWidget) {\n rowWidget = childWidget;\n // }\n var rowHeight = rowWidget.height;\n if (bottom < rowBottom + rowHeight || !isNullOrUndefined(splittedWidget)) {\n //ToDo: Check whether row included in vertical merge or AllowRowSplitbyPage is true, if so split row.\n //Checks if atleast first line fits in the client area. \n var splittedRow = undefined;\n var allowRowBreakAcrossPages = true;\n if (!isNullOrUndefined(rowWidget) && !isNullOrUndefined(rowWidget.rowFormat)) {\n allowRowBreakAcrossPages = rowWidget.rowFormat.allowBreakAcrossPages;\n }\n if (allowRowBreakAcrossPages) {\n // tslint:disable-next-line:max-line-length\n splittedRow = (isNullOrUndefined(splittedWidget) && this.isFirstLineFitForRow(bottom, rowWidget)) ? this.getSplittedWidgetForRow(bottom, tableCollection, [rowWidget], rowWidget) : rowWidget;\n }\n if (!isNullOrUndefined(splittedRow)) {\n if (i === 0 && splittedRow === rowWidget) {\n //Returns if the whole table does not fit in current page.\n return tableWidget;\n }\n if (tableWidget.childWidgets.indexOf(splittedRow) !== -1) {\n tableWidget.childWidgets.splice(tableWidget.childWidgets.indexOf(splittedRow), 1);\n i--;\n tableWidget.height -= splittedRow.height;\n }\n else {\n tableWidget.height -= rowHeight - rowWidget.height;\n }\n if (isNullOrUndefined(splittedWidget)) {\n //Creates new widget, to hold the splitted contents.\n splittedWidget = this.createTableWidget(tableWidget);\n this.updateWidgetLocation(tableWidget, splittedWidget);\n splittedWidget.height = splittedRow.height;\n }\n else {\n splittedWidget.height += splittedRow.height;\n }\n splittedWidget.childWidgets.push(splittedRow);\n splittedRow.containerWidget = splittedWidget;\n }\n }\n rowBottom += rowWidget.height;\n }\n return splittedWidget;\n };\n /**\n * Checks whether first line fits for paragraph or not.\n * @param bottom\n * @param paraWidget\n */\n Layout.prototype.isFirstLineFitForPara = function (bottom, paraWidget) {\n var lineWidget = paraWidget.childWidgets[0];\n var cellwidget = lineWidget.paragraph.containerWidget;\n // let document: WordDocument = undefined;\n // if (!isNullOrUndefined(lineWidget.paragraph.currentNode) && !isNullOrUndefined(cellwidget.containerWidget)) {\n // document = WordDocument.getDocumentOf(lineWidget.paragraph.currentNode);\n // }\n //checks first line of the page is exceed the page height\n if (this.viewer.isFirstLineFitInShiftWidgets) {\n if (this.viewer.clientActiveArea.y === this.viewer.clientArea.y && paraWidget.y + lineWidget.height >= bottom) {\n return true;\n }\n }\n else {\n // For nested tables,\n if (cellwidget.ownerTable.isInsideTable) {\n // Gets the container cell widgets, consider it as client area for the cell widget.\n var containerCellWidget = undefined;\n if (cellwidget.containerWidget instanceof TableRowWidget &&\n cellwidget.containerWidget.containerWidget instanceof TableWidget\n && cellwidget.containerWidget.containerWidget.containerWidget instanceof TableCellWidget) {\n containerCellWidget = cellwidget.containerWidget.containerWidget.containerWidget;\n }\n if (!isNullOrUndefined(containerCellWidget) && cellwidget.containerWidget.y === containerCellWidget.y\n && paraWidget.y + lineWidget.height >= bottom) {\n return true;\n }\n }\n else if (cellwidget.containerWidget.y === this.viewer.clientArea.y && paraWidget.y + lineWidget.height >= bottom) {\n return true;\n }\n }\n return (paraWidget.y + lineWidget.height <= bottom);\n };\n /**\n * Checks whether first line fits for table or not.\n * @param bottom\n * @param tableWidget\n * @private\n */\n Layout.prototype.isFirstLineFitForTable = function (bottom, tableWidget) {\n var rowWidget = undefined;\n var isFit = false;\n var childWidget = tableWidget.childWidgets[0];\n // if (childWidget instanceof TableRowWidget) {\n rowWidget = childWidget;\n // }\n if (!isNullOrUndefined(rowWidget)) {\n isFit = this.isFirstLineFitForRow(bottom, rowWidget);\n }\n return isFit;\n };\n /**\n * Checks whether first line fits for row or not.\n * @param bottom\n * @param rowWidget\n */\n Layout.prototype.isFirstLineFitForRow = function (bottom, rowWidget) {\n for (var i = 0; i < rowWidget.childWidgets.length; i++) {\n var cellWidget = rowWidget.childWidgets[i];\n if (!this.isFirstLineFitForCell(bottom, cellWidget)) {\n return false;\n }\n }\n return true;\n };\n /**\n * Checks whether first line fits for cell or not.\n * @param bottom\n * @param cellWidget\n */\n Layout.prototype.isFirstLineFitForCell = function (bottom, cellWidget) {\n if (cellWidget.childWidgets.length === 0) {\n return true;\n }\n if (cellWidget.childWidgets[0] instanceof ParagraphWidget) {\n var paraWidget = cellWidget.childWidgets[0];\n return this.isFirstLineFitForPara(bottom - cellWidget.margin.bottom, paraWidget);\n }\n else {\n var tableWidget = cellWidget.childWidgets[0];\n return this.isFirstLineFitForTable(bottom - cellWidget.margin.bottom, tableWidget);\n }\n };\n /**\n * Updates widget location.\n * @param widget\n * @param table\n */\n Layout.prototype.updateWidgetLocation = function (widget, table) {\n table.x = widget.x;\n table.y = widget.y;\n table.width = widget.width;\n };\n /**\n * Updates child location for table.\n * @param top\n * @param tableWidget\n * @private\n */\n Layout.prototype.updateChildLocationForTable = function (top, tableWidget) {\n for (var i = 0; i < tableWidget.childWidgets.length; i++) {\n var rowWidget = tableWidget.childWidgets[i];\n rowWidget.x = rowWidget.x;\n rowWidget.y = top;\n this.updateChildLocationForRow(top, rowWidget);\n top += rowWidget.height;\n }\n };\n /**\n * Updates child location for row.\n * @param top\n * @param rowWidget\n * @private\n */\n Layout.prototype.updateChildLocationForRow = function (top, rowWidget) {\n var spacing = 0;\n if (rowWidget.ownerTable.tableFormat.cellSpacing > 0) {\n spacing = HelperMethods.convertPointToPixel(rowWidget.ownerTable.tableFormat.cellSpacing);\n }\n for (var i = 0; i < rowWidget.childWidgets.length; i++) {\n var cellWidget = rowWidget.childWidgets[i];\n cellWidget.x = cellWidget.x;\n cellWidget.y = top + cellWidget.margin.top + spacing;\n this.updateChildLocationForCell(cellWidget.y, cellWidget);\n }\n };\n /**\n * Updates child location for cell.\n * @param top\n * @param cellWidget\n */\n Layout.prototype.updateChildLocationForCell = function (top, cellWidget) {\n for (var i = 0; i < cellWidget.childWidgets.length; i++) {\n cellWidget.childWidgets[i].x = cellWidget.childWidgets[i].x;\n cellWidget.childWidgets[i].y = top;\n if (cellWidget.childWidgets[i] instanceof TableWidget) {\n this.updateChildLocationForTable(top, cellWidget.childWidgets[i]);\n }\n top += cellWidget.childWidgets[i].height;\n }\n };\n /**\n * Updates cell vertical position.\n * @param cellWidget\n * @param isUpdateToTop\n * @param isInsideTable\n * @private\n */\n Layout.prototype.updateCellVerticalPosition = function (cellWidget, isUpdateToTop, isInsideTable) {\n if (cellWidget.ownerTable.containerWidget instanceof BodyWidget || isInsideTable) {\n var displacement = this.getDisplacement(cellWidget, isUpdateToTop);\n //Update Y position alone for the child widget of cell\n this.updateCellContentVerticalPosition(cellWidget, displacement, isUpdateToTop);\n }\n };\n /**\n * Updates cell content vertical position.\n * @param cellWidget\n * @param displacement\n * @param isUpdateToTop\n */\n Layout.prototype.updateCellContentVerticalPosition = function (cellWidget, displacement, isUpdateToTop) {\n if (displacement === 0) {\n return;\n }\n var location = cellWidget.y + displacement;\n for (var i = 0; i < cellWidget.childWidgets.length; i++) {\n if (cellWidget.childWidgets[i] instanceof ParagraphWidget) {\n cellWidget.childWidgets[i].y = location;\n }\n else {\n location = this.updateTableWidgetLocation(cellWidget.childWidgets[i], location, isUpdateToTop);\n }\n location = location + cellWidget.childWidgets[i].height;\n }\n };\n /**\n * Updates table widget location.\n * @param tableWidget\n * @param location\n * @param isUpdateToTop\n */\n Layout.prototype.updateTableWidgetLocation = function (tableWidget, location, isUpdateToTop) {\n tableWidget.y = location = location + tableWidget.topBorderWidth;\n var cellSpacing = 0;\n for (var i = 0; i < tableWidget.childWidgets.length; i++) {\n var rowWidget = tableWidget.childWidgets[i];\n rowWidget.y = location;\n for (var j = 0; j < rowWidget.childWidgets.length; j++) {\n var cellWidget = rowWidget.childWidgets[j];\n cellWidget.y = location + cellWidget.margin.top + cellSpacing;\n this.updateCellVerticalPosition(cellWidget, isUpdateToTop, true);\n }\n location = location + rowWidget.height;\n }\n return location;\n };\n /**\n * Gets displacement.\n * @param cellWidget\n * @param isUpdateToTop\n */\n Layout.prototype.getDisplacement = function (cellWidget, isUpdateToTop) {\n //Gets the height of row\n var rowHeight = 0;\n var rowWidget = cellWidget.containerWidget;\n var padding = cellWidget.margin.top + cellWidget.margin.bottom;\n if (!isNullOrUndefined(cellWidget.cellFormat) && cellWidget.cellFormat.rowSpan > 1) {\n rowHeight = cellWidget.height;\n }\n else {\n rowHeight = ((!isNullOrUndefined(rowWidget) ? rowWidget.height : 0) - padding);\n }\n //Gets the height of content within the cell\n var cellContentHeight = this.getCellContentHeight(cellWidget);\n //Displacement field holds the value which has reduced from rowHeight and cellContentHeight\n var displacement = 0;\n if (rowHeight > cellContentHeight) {\n displacement = rowHeight - cellContentHeight;\n if (cellWidget.cellFormat.verticalAlignment === 'Center') {\n displacement = displacement / 2;\n }\n else if ((cellWidget.cellFormat.verticalAlignment === 'Top' || isUpdateToTop)) {\n displacement = 0;\n }\n }\n return displacement;\n };\n /**\n * Gets cell content height.\n * @param cellWidget\n */\n Layout.prototype.getCellContentHeight = function (cellWidget) {\n if (isNullOrUndefined(cellWidget.childWidgets)) {\n return 0;\n }\n var contentHeight = 0;\n for (var i = 0; i < cellWidget.childWidgets.length; i++) {\n if (cellWidget.childWidgets[i] instanceof ParagraphWidget) {\n contentHeight += cellWidget.childWidgets[i].height;\n }\n else {\n contentHeight += cellWidget.childWidgets[i].height;\n }\n }\n return contentHeight;\n };\n /**\n * Gets table left borders.\n * @param borders\n * @private\n */\n Layout.prototype.getTableLeftBorder = function (borders) {\n if (!isNullOrUndefined(borders.left)) {\n return borders.left;\n }\n else {\n var border = new WBorder(borders);\n border.lineStyle = 'Single';\n border.lineWidth = 0.66;\n return border;\n }\n };\n /**\n * Gets table right border.\n * @param borders\n * @private\n */\n Layout.prototype.getTableRightBorder = function (borders) {\n if (!isNullOrUndefined(borders.right)) {\n return borders.right;\n }\n else {\n var border = new WBorder(borders);\n border.lineStyle = 'Single';\n border.lineWidth = 0.66;\n return border;\n }\n };\n /**\n * Get table top border.\n * @param borders\n * @private\n */\n Layout.prototype.getTableTopBorder = function (borders) {\n if (!isNullOrUndefined(borders.top)) {\n return borders.top;\n }\n else {\n var border = new WBorder(borders);\n border.lineStyle = 'Single';\n border.lineWidth = 0.66;\n return border;\n }\n };\n /**\n * Gets table bottom border.\n * @param borders\n * @private\n */\n Layout.prototype.getTableBottomBorder = function (borders) {\n if (!isNullOrUndefined(borders.bottom)) {\n return borders.bottom;\n }\n else {\n var border = new WBorder(borders);\n border.lineStyle = 'Single';\n border.lineWidth = 0.66;\n return border;\n }\n };\n /**\n * Get diagonal cell up border.\n * @param tableCell\n * @private\n */\n Layout.prototype.getCellDiagonalUpBorder = function (tableCell) {\n var diagonalUpBorder = undefined;\n var cellBorder = undefined;\n cellBorder = tableCell.cellFormat.borders;\n diagonalUpBorder = cellBorder.diagonalUp;\n return diagonalUpBorder;\n };\n /**\n * Gets diagonal cell down border\n * @param tableCell\n * @private\n */\n Layout.prototype.getCellDiagonalDownBorder = function (tableCell) {\n var diagonalDownBorder = undefined;\n var cellBorder = undefined;\n cellBorder = tableCell.cellFormat.borders;\n diagonalDownBorder = cellBorder.diagonalDown;\n return diagonalDownBorder;\n };\n /**\n * Gets table width.\n * @param table\n * @private\n */\n Layout.prototype.getTableWidth = function (table) {\n var width = 0;\n for (var i = 0; i < table.childWidgets.length; i++) {\n var row = table.childWidgets[i];\n var rowWidth = 0;\n for (var j = 0; j < row.childWidgets.length; j++) {\n var cell = row.childWidgets[j];\n rowWidth += HelperMethods.convertPointToPixel(cell.cellFormat.cellWidth);\n }\n if (width < rowWidth) {\n width = rowWidth;\n }\n }\n return width;\n };\n //#region shifting\n /**\n * @private\n */\n Layout.prototype.layoutNextItemsBlock = function (blockAdv, viewer) {\n var block = blockAdv;\n var splittedWidget = block.getSplitWidgets();\n var nextBlock = splittedWidget[splittedWidget.length - 1].nextRenderedWidget;\n if (isNullOrUndefined(nextBlock) || this.viewer.blockToShift === block) {\n this.viewer.blockToShift = undefined;\n }\n var updateNextBlockList = true;\n while (nextBlock instanceof BlockWidget) {\n var currentWidget = undefined;\n var blocks = block.getSplitWidgets();\n currentWidget = blocks[blocks.length - 1];\n // if (viewer.fieldEndParagraph === block) {\n // //Sets field end paragraph to undefined, inorder to hold reLayouting with this paragraph.\n // viewer.fieldEndParagraph = undefined;\n // }\n block = nextBlock;\n if (viewer.blockToShift === block) {\n viewer.blockToShift = undefined;\n }\n updateNextBlockList = false;\n var nextWidget = undefined;\n nextWidget = block.getSplitWidgets()[0];\n // tslint:disable-next-line:max-line-length\n if (viewer.fieldStacks.length === 0 && !isNullOrUndefined(nextWidget) && currentWidget.containerWidget === nextWidget.containerWidget\n && (HelperMethods.round(nextWidget.y, 2) === HelperMethods.round(currentWidget.y + currentWidget.height, 2))) {\n if (!isNullOrUndefined(viewer.blockToShift)) {\n viewer.blockToShift = block;\n }\n break;\n }\n updateNextBlockList = true;\n if (viewer.owner.isShiftingEnabled && viewer.fieldStacks.length === 0) {\n viewer.blockToShift = block;\n break;\n }\n else {\n block = block.combineWidget(this.viewer);\n var paragraph = void 0;\n if (currentWidget.containerWidget !== block.containerWidget) {\n // tslint:disable-next-line:max-line-length\n this.updateContainerWidget(block, currentWidget.containerWidget, currentWidget.indexInOwner + 1, false);\n }\n if (block instanceof TableWidget) {\n this.clearTableWidget(block, true, true);\n block.isGridUpdated = false;\n paragraph = this.viewer.selection.getFirstParagraphInFirstCell(block);\n }\n else {\n paragraph = block;\n }\n if ((this.viewer.owner.isDocumentLoaded) && this.viewer.owner.editorModule) {\n this.viewer.owner.editorModule.updateWholeListItems(paragraph);\n }\n viewer.updateClientAreaForBlock(block, true);\n this.viewer.layout.layoutBlock(block, 0);\n viewer.updateClientAreaForBlock(block, false);\n }\n splittedWidget = nextBlock.getSplitWidgets();\n nextBlock = splittedWidget[splittedWidget.length - 1].nextRenderedWidget;\n }\n if (!viewer.owner.isShiftingEnabled || this.viewer.blockToShift !== block) {\n this.viewer.owner.editorModule.updateListItemsTillEnd(block, updateNextBlockList);\n }\n };\n /**\n * @private\n */\n Layout.prototype.updateClientAreaForLine = function (paragraph, startLineWidget, elementIndex) {\n //Clears the line widget starting from current line.\n var top = this.viewer.selection.getTop(startLineWidget);\n var left = this.viewer.clientArea.x;\n this.viewer.cutFromTop(top);\n this.viewer.cutFromLeft(left);\n };\n /**\n * @private\n */\n Layout.prototype.getParentTable = function (block) {\n var widget = block;\n while (widget.containerWidget) {\n if (widget.containerWidget instanceof BlockContainer) {\n return widget;\n }\n widget = widget.containerWidget;\n }\n return undefined;\n };\n /**\n * @private\n */\n Layout.prototype.reLayoutParagraph = function (paragraphWidget, lineIndex, elementBoxIndex) {\n if (this.viewer.blockToShift === paragraphWidget) {\n this.layoutBodyWidgetCollection(paragraphWidget.index, paragraphWidget.containerWidget, paragraphWidget, false);\n }\n // let isElementMoved: boolean = elementBoxIndex > 0;\n if (paragraphWidget.isInsideTable) {\n this.reLayoutTable(paragraphWidget);\n }\n else {\n this.reLayoutLine(paragraphWidget, lineIndex);\n }\n if (paragraphWidget.bodyWidget instanceof HeaderFooterWidget &&\n paragraphWidget.bodyWidget.headerFooterType.indexOf('Footer') !== -1) {\n this.shiftFooterChildLocation(paragraphWidget.bodyWidget, this.viewer);\n }\n };\n /**\n * @private\n */\n Layout.prototype.reLayoutTable = function (block) {\n //Get Top level owner of block\n var table = this.getParentTable(block);\n //Combine splitted table in to single table\n // this.combineTableWidgets(this.viewer, table, undefined);\n //Get Parent table\n var currentTable = table.combineWidget(this.viewer);\n currentTable.isGridUpdated = false;\n currentTable.buildTableColumns();\n currentTable.isGridUpdated = true;\n var bodyWidget = currentTable.containerWidget;\n if (this.viewer.owner.enableHeaderAndFooter || block.isInHeaderFooter) {\n bodyWidget.height -= currentTable.height;\n // tslint:disable-next-line:max-line-length\n this.viewer.updateHCFClientAreaWithTop(table.bodyWidget.sectionFormat, this.viewer.isBlockInHeader(table), bodyWidget.page);\n }\n else {\n this.viewer.updateClientArea(bodyWidget.sectionFormat, bodyWidget.page);\n }\n //Clear Hieght for all the content \n if (this.viewer.owner.isDocumentLoaded && this.viewer.owner.editorModule) {\n var block_1 = this.viewer.selection.getFirstParagraphInFirstCell(currentTable);\n this.viewer.owner.editorModule.updateWholeListItems(block_1);\n }\n this.viewer.updateClientAreaForBlock(currentTable, true);\n //Remove border width\n currentTable.x -= currentTable.leftBorderWidth;\n currentTable.y -= currentTable.topBorderWidth;\n //Update Client area for current position\n this.viewer.cutFromTop(currentTable.y);\n this.clearTableWidget(currentTable, true, true);\n this.layoutBlock(currentTable, 0, true);\n this.viewer.updateClientAreaForBlock(currentTable, false);\n this.layoutNextItemsBlock(currentTable, this.viewer);\n };\n /**\n * @private\n */\n Layout.prototype.clearTableWidget = function (table, clearPosition, clearHeight) {\n table.height = 0;\n if (clearPosition) {\n table.y = 0;\n table.x = 0;\n }\n for (var i = 0; i < table.childWidgets.length; i++) {\n var row = table.childWidgets[i];\n this.clearRowWidget(row, clearPosition, clearHeight);\n }\n };\n /**\n * @private\n */\n Layout.prototype.clearRowWidget = function (row, clearPosition, clearHeight) {\n row.height = 0;\n if (clearPosition) {\n row.y = 0;\n row.x = 0;\n }\n for (var i = 0; i < row.childWidgets.length; i++) {\n var cell = row.childWidgets[i];\n this.clearCellWidget(cell, clearPosition, clearHeight);\n }\n };\n /**\n * @private\n */\n Layout.prototype.clearCellWidget = function (cell, clearPosition, clearHeight) {\n cell.height = 0;\n if (clearPosition) {\n cell.y = 0;\n cell.x = 0;\n }\n for (var i = 0; i < cell.childWidgets.length; i++) {\n var block = cell.childWidgets[i];\n if (block instanceof ParagraphWidget) {\n if (clearHeight) {\n block.height = 0;\n }\n }\n else {\n this.clearTableWidget(block, clearPosition, clearHeight);\n }\n }\n };\n /**\n * @param blockIndex\n * @param bodyWidget\n * @param block\n * @private\n */\n // tslint:disable-next-line:max-line-length\n Layout.prototype.layoutBodyWidgetCollection = function (blockIndex, bodyWidget, block, shiftNextWidget) {\n if (!isNullOrUndefined(this.viewer.owner)\n && this.viewer.owner.isLayoutEnabled) {\n if (bodyWidget instanceof BlockContainer) {\n var curretBlock = this.checkAndGetBlock(bodyWidget, blockIndex);\n if (isNullOrUndefined(curretBlock)) {\n return;\n }\n if (bodyWidget instanceof HeaderFooterWidget) {\n // tslint:disable-next-line:max-line-length\n this.viewer.updateHCFClientAreaWithTop(bodyWidget.sectionFormat, bodyWidget.headerFooterType.indexOf('Header') !== -1, bodyWidget.page);\n curretBlock.containerWidget.height -= curretBlock.height;\n }\n else {\n this.viewer.updateClientArea(bodyWidget.sectionFormat, bodyWidget.page);\n }\n if (blockIndex > 0) {\n var prevWidget = curretBlock.getSplitWidgets()[0].previousRenderedWidget;\n this.viewer.cutFromTop(prevWidget.y + prevWidget.height);\n if (curretBlock.containerWidget !== prevWidget.containerWidget) {\n // tslint:disable-next-line:max-line-length\n this.updateContainerWidget(curretBlock, prevWidget.containerWidget, prevWidget.indexInOwner + 1, false);\n }\n }\n var currentParagraph = void 0;\n curretBlock = curretBlock.combineWidget(this.viewer);\n if (curretBlock instanceof TableWidget) {\n this.clearTableWidget(curretBlock, true, true);\n curretBlock.isGridUpdated = false;\n currentParagraph = this.viewer.selection.getFirstParagraphInFirstCell(curretBlock);\n }\n else {\n currentParagraph = curretBlock;\n }\n if ((this.viewer.owner.isDocumentLoaded) && this.viewer.owner.editorModule) {\n this.viewer.owner.editorModule.updateWholeListItems(currentParagraph);\n }\n this.viewer.updateClientAreaForBlock(curretBlock, true);\n this.viewer.layout.layoutBlock(curretBlock, 0, true);\n this.viewer.updateClientAreaForBlock(curretBlock, false);\n if (shiftNextWidget) {\n this.shiftNextWidgets(curretBlock);\n }\n else {\n this.layoutNextItemsBlock(curretBlock, this.viewer);\n }\n }\n else if (bodyWidget instanceof TableCellWidget) {\n var table = this.viewer.layout.getParentTable(bodyWidget.ownerTable.getSplitWidgets()[0]);\n this.reLayoutTable(bodyWidget.ownerTable);\n this.layoutNextItemsBlock(table, this.viewer);\n }\n }\n };\n Layout.prototype.checkAndGetBlock = function (containerWidget, blockIndex) {\n var sectionIndex = containerWidget.index;\n while (containerWidget && containerWidget.index === sectionIndex) {\n if (containerWidget.childWidgets.length > 0 && containerWidget.firstChild.index <= blockIndex &&\n containerWidget.lastChild.index >= blockIndex) {\n for (var i = 0; i < containerWidget.childWidgets.length; i++) {\n var block = containerWidget.childWidgets[i];\n if (block.index === blockIndex) {\n return block;\n }\n }\n }\n if (containerWidget instanceof BodyWidget) {\n containerWidget = containerWidget.nextRenderedWidget;\n }\n else {\n break;\n }\n }\n return undefined;\n };\n //#endregion\n //#region Table\n /**\n * Layouts table.\n * @param table\n * @private\n */\n Layout.prototype.layoutTable = function (table, startIndex) {\n if (!table.isGridUpdated) {\n table.buildTableColumns();\n table.isGridUpdated = true;\n }\n var tableView = [table];\n this.addTableWidget(this.viewer.clientActiveArea, tableView);\n this.viewer.updateClientAreaTopOrLeft(table, true);\n var isHeader = table.childWidgets[0].rowFormat.isHeader;\n if (table.childWidgets.length > 0) {\n table.header = isHeader;\n table.continueHeader = isHeader;\n table.headerHeight = 0;\n }\n var row = table.childWidgets[startIndex];\n while (row) {\n row = this.layoutRow(tableView, row);\n row = row.nextRow;\n }\n this.updateWidgetsToPage(tableView, [], table);\n return tableView[tableView.length - 1];\n };\n /**\n * Adds table widget.\n * @param area\n * @param table\n * @private\n */\n Layout.prototype.addTableWidget = function (area, table, create) {\n var tableWidget = table[table.length - 1];\n if (create) {\n tableWidget = this.createTableWidget(tableWidget);\n table.push(tableWidget);\n }\n tableWidget.width = area.width;\n tableWidget.x = area.x;\n tableWidget.y = area.y;\n //Update the table height of tableWidget when cell spacing has been defined. \n if (tableWidget.tableFormat.cellSpacing > 0) {\n tableWidget.height = tableWidget.height + HelperMethods.convertPointToPixel(tableWidget.tableFormat.cellSpacing);\n // tslint:disable-next-line:max-line-length\n tableWidget.leftBorderWidth = HelperMethods.convertPointToPixel(this.getTableLeftBorder(tableWidget.tableFormat.borders).getLineWidth());\n tableWidget.rightBorderWidth = HelperMethods.convertPointToPixel(this.getTableRightBorder(tableWidget.tableFormat.borders).getLineWidth());\n // tslint:disable-next-line:max-line-length\n tableWidget.topBorderWidth = HelperMethods.convertPointToPixel(this.getTableTopBorder(tableWidget.tableFormat.borders).getLineWidth());\n tableWidget.bottomBorderWidth = HelperMethods.convertPointToPixel(this.getTableBottomBorder(tableWidget.tableFormat.borders).getLineWidth());\n tableWidget.x += tableWidget.leftBorderWidth;\n tableWidget.y += tableWidget.topBorderWidth;\n tableWidget.width -= tableWidget.leftBorderWidth;\n tableWidget.width -= tableWidget.rightBorderWidth;\n tableWidget.height += tableWidget.bottomBorderWidth;\n }\n return tableWidget;\n };\n /**\n * Updates widget to page.\n * @param table\n * @private\n */\n Layout.prototype.updateWidgetsToPage = function (tables, rows, table, endRowWidget) {\n var viewer = this.viewer;\n var tableWidget = tables[tables.length - 1];\n if (!table.isInsideTable) {\n this.updateHeightForTableWidget(tables, rows, tableWidget, endRowWidget);\n if (tableWidget.childWidgets.length > 0 && tableWidget.y !== tableWidget.childWidgets[0].y) {\n tableWidget.y = tableWidget.childWidgets[0].y;\n }\n // Need to update on this further\n //Adds the table widget to owner cell widget.\n // tslint:disable-next-line:max-line-length\n // (viewer.renderedElements.get(table.associatedCell)[viewer.renderedElements.get(table.associatedCell).length - 1] as TableCellWidget).childWidgets.push(tableWidget);\n // tableWidget.containerWidget = viewer.renderedElements.get(table.associatedCell)[viewer.renderedElements.get(table.associatedCell).length - 1] as BodyWidget;\n // tslint:disable-next-line:max-line-length\n // (viewer.renderedElements.get(table.associatedCell)[viewer.renderedElements.get(table.associatedCell).length - 1] as TableCellWidget).height = (viewer.renderedElements.get(table.associatedCell)[viewer.renderedElements.get(table.associatedCell).length - 1] as TableCellWidget).height + tableWidget.height;\n }\n if (table.tableFormat.cellSpacing > 0) {\n // tslint:disable-next-line:max-line-length\n if (tableWidget.y + tableWidget.height + HelperMethods.convertPointToPixel(table.tableFormat.cellSpacing) > viewer.clientArea.bottom && viewer instanceof PageLayoutViewer) {\n //update the table height when split to next page. Which is equivalent Ms Word Behaviour. \n //In Ms Word if the Table Split to next page the bottom spacing of the table will be half of the current spacing.\n //And the Remaining space will be used in next page top of the table.\n tableWidget.height = tableWidget.height - HelperMethods.convertPointToPixel(table.tableFormat.cellSpacing) / 2;\n }\n //Update the current Y position of current clientactivearea.\n viewer.cutFromTop(tableWidget.y + tableWidget.height);\n }\n if (table.bodyWidget instanceof HeaderFooterWidget) {\n table.containerWidget.height += table.height;\n if (this.viewer.owner.enableHeaderAndFooter && table.bodyWidget.headerFooterType.indexOf('Footer') !== -1) {\n this.shiftFooterChildLocation(table.bodyWidget, this.viewer);\n }\n }\n };\n /**\n * Updates height for table widget.\n * @param viewer\n * @param tableWidget\n * @private\n */\n // tslint:disable-next-line:max-line-length\n Layout.prototype.updateHeightForTableWidget = function (tables, rows, tableWidget, endRowWidget) {\n for (var i = 0; i < tableWidget.childWidgets.length; i++) {\n var rowWidget = tableWidget.childWidgets[i];\n if (rowWidget === endRowWidget) {\n break;\n }\n this.updateHeightForRowWidget(this.viewer, true, tables, rows, rowWidget, true, endRowWidget);\n }\n };\n //#endregion\n //#region Row\n /**\n * Layouts table row.\n * @param row\n * @private\n */\n Layout.prototype.layoutRow = function (tableWidget, row) {\n var viewer = this.viewer;\n var rowWidgets = [row];\n var widget = this.addTableRowWidget(viewer.clientActiveArea, rowWidgets);\n viewer.updateClientAreaForRow(row, true);\n for (var i = 0; i < row.childWidgets.length; i++) {\n var cell = row.childWidgets[i];\n // tslint:disable-next-line:max-line-length\n this.layoutCell(cell, this.getMaxTopOrBottomCellMargin(row, 0) + row.topBorderWidth, this.getMaxTopOrBottomCellMargin(row, 1) + row.bottomBorderWidth, widget);\n }\n viewer.updateClientAreaForRow(row, false);\n var rows = [row];\n this.updateWidgetsToTable(tableWidget, rows, row);\n return rows[rows.length - 1];\n };\n /**\n * @param area\n * @param row\n */\n Layout.prototype.addTableRowWidget = function (area, row) {\n var rowWidget = row[row.length - 1];\n rowWidget.x = area.x + rowWidget.rowFormat.gridBeforeWidth;\n rowWidget.y = area.y;\n rowWidget.width = area.width;\n var borderWidth = 0;\n if (!isNullOrUndefined(rowWidget.ownerTable) && !isNullOrUndefined(rowWidget.ownerTable.tableFormat)\n && rowWidget.ownerTable.tableFormat.cellSpacing > 0) {\n rowWidget.height = rowWidget.height + HelperMethods.convertPointToPixel(rowWidget.ownerTable.tableFormat.cellSpacing);\n //Update the table height with the border width to layout the border when the cell spacing is defined..\n for (var j = 0; j < rowWidget.childWidgets.length; j++) {\n if (!isNullOrUndefined(rowWidget.childWidgets[j].cellFormat)\n && !isNullOrUndefined(rowWidget.childWidgets[j].cellFormat.borders)) {\n // tslint:disable-next-line:max-line-length\n var width = TableCellWidget.getCellBottomBorder(rowWidget.childWidgets[j]).getLineWidth();\n if (width > borderWidth) {\n borderWidth = width;\n }\n }\n }\n //Maximum border width is calculated and hold it in a variable to add with the padding of the cells.\n rowWidget.bottomBorderWidth = HelperMethods.convertPointToPixel(borderWidth);\n if (rowWidget.index > 0 && !isNullOrUndefined(rowWidget.previousWidget)) {\n var prevRow = rowWidget.previousWidget;\n borderWidth = 0;\n for (var i = 0; i < prevRow.childWidgets.length; i++) {\n // tslint:disable-next-line:max-line-length\n if (!isNullOrUndefined(prevRow.childWidgets[i].cellFormat) && !isNullOrUndefined(prevRow.childWidgets[i].cellFormat.borders)) {\n var value = TableCellWidget.getCellBottomBorder(prevRow.childWidgets[i]).getLineWidth();\n if (value > borderWidth) {\n borderWidth = value;\n }\n }\n }\n //Maximum border width is calculated and hold it in a variable to add with the padding of the cells.\n rowWidget.topBorderWidth = HelperMethods.convertPointToPixel(borderWidth);\n }\n }\n if (!isNullOrUndefined(rowWidget.childWidgets)) {\n for (var i = 0; i < rowWidget.childWidgets.length; i++) {\n // tslint:disable-next-line:max-line-length\n if (!isNullOrUndefined(rowWidget.childWidgets[i].cellFormat) && !isNullOrUndefined(rowWidget.childWidgets[i].cellFormat.borders)) {\n var value = TableCellWidget.getCellTopBorder(rowWidget.childWidgets[i]).getLineWidth();\n if (value > borderWidth) {\n borderWidth = value;\n }\n }\n }\n }\n //Maximum border width is calculated and hold it in a variable to add with the padding of the cells.\n rowWidget.topBorderWidth = HelperMethods.convertPointToPixel(borderWidth);\n //Update the table height of tableWidget when cell spacing has been defined. \n // tslint:disable-next-line:max-line-length\n if (!isNullOrUndefined(rowWidget.ownerTable) && !isNullOrUndefined(rowWidget.ownerTable.tableFormat) && rowWidget.ownerTable.tableFormat.cellSpacing <= 0 && rowWidget.rowIndex === rowWidget.ownerTable.childWidgets.length - 1) {\n // Update the bottom width for last row .\n for (var i = 0; i < rowWidget.childWidgets.length; i++) {\n // tslint:disable-next-line:max-line-length\n if (!isNullOrUndefined(rowWidget.childWidgets[i].cellFormat) && !isNullOrUndefined(rowWidget.childWidgets[i].cellFormat.borders)) {\n var value = TableCellWidget.getCellBottomBorder(rowWidget.childWidgets[i]).getLineWidth();\n if (value > borderWidth) {\n borderWidth = value;\n }\n }\n }\n //Maximum border width is calculated and hold it in a variable to add with the padding of the cells.\n rowWidget.bottomBorderWidth = HelperMethods.convertPointToPixel(borderWidth);\n }\n //tableRowWidget.ownerWidget = owner;\n return rowWidget;\n };\n /**\n * Gets maximum top or bottom cell margin.\n * @param row\n * @param topOrBottom\n */\n Layout.prototype.getMaxTopOrBottomCellMargin = function (row, topOrBottom) {\n if (isNullOrUndefined(row.childWidgets)) {\n return 0;\n }\n var value = 0;\n for (var i = 0; i < row.childWidgets.length; i++) {\n if (row.childWidgets.length > 0) {\n var cellFormat = row.childWidgets[i].cellFormat;\n if (cellFormat.containsMargins()) {\n if (topOrBottom === 0 && !isNullOrUndefined(cellFormat.topMargin) &&\n HelperMethods.convertPointToPixel(cellFormat.topMargin) > value) {\n value = HelperMethods.convertPointToPixel(cellFormat.topMargin);\n }\n else if (topOrBottom === 1 && !isNullOrUndefined(cellFormat.bottomMargin) &&\n HelperMethods.convertPointToPixel(cellFormat.bottomMargin) > value) {\n value = HelperMethods.convertPointToPixel(cellFormat.bottomMargin);\n }\n }\n else {\n var tableFormat = row.childWidgets[i].ownerTable.tableFormat;\n if (topOrBottom === 0 && HelperMethods.convertPointToPixel(tableFormat.topMargin) > value) {\n value = HelperMethods.convertPointToPixel(tableFormat.topMargin);\n }\n else if (topOrBottom === 1 && HelperMethods.convertPointToPixel(tableFormat.bottomMargin) > value) {\n value = HelperMethods.convertPointToPixel(tableFormat.bottomMargin);\n }\n }\n }\n }\n return value;\n };\n //#endregion Row\n //#region cell\n /**\n * Layouts cell\n * @param cell\n * @param maxCellMarginTop\n * @param maxCellMarginBottom\n */\n Layout.prototype.layoutCell = function (cell, maxCellMarginTop, maxCellMarginBottom, owner) {\n var viewer = this.viewer;\n this.addTableCellWidget(cell, viewer.clientActiveArea, maxCellMarginTop, maxCellMarginBottom);\n viewer.updateClientAreaForCell(cell, true);\n if (cell.childWidgets.length === 0) {\n var paragraphWidget = new ParagraphWidget();\n paragraphWidget.characterFormat = new WCharacterFormat();\n paragraphWidget.paragraphFormat = new WParagraphFormat();\n paragraphWidget.index = 0;\n var lineWidget = new LineWidget(undefined);\n paragraphWidget.childWidgets.push(lineWidget);\n cell.childWidgets.push(paragraphWidget);\n }\n for (var i = 0; i < cell.childWidgets.length; i++) {\n var block = cell.childWidgets[i];\n viewer.updateClientAreaForBlock(block, true);\n block.containerWidget = cell;\n this.layoutBlock(block, 0);\n viewer.updateClientAreaForBlock(block, false);\n }\n this.updateWidgetToRow(cell);\n viewer.updateClientAreaForCell(cell, false);\n };\n //endregion cell\n //#region Shifting\n /**\n * @private\n */\n Layout.prototype.shiftLayoutedItems = function () {\n if (isNullOrUndefined(this.viewer.blockToShift) || isNullOrUndefined(this.viewer.blockToShift.containerWidget)) {\n this.viewer.blockToShift = undefined;\n return;\n }\n var block = this.viewer.blockToShift;\n var sectionIndex = block.bodyWidget.index;\n this.reLayoutOrShiftWidgets(block, this.viewer);\n var updateNextBlockList = true;\n // If flow layout, then all sections are in single page. Hence need to update till last block of last section.\n // Todo: For page layout and section break continuous, need to handle the same.\n var splittedWidget = block.getSplitWidgets();\n var nextBlock = splittedWidget[splittedWidget.length - 1].nextRenderedWidget;\n while (nextBlock instanceof BlockWidget && nextBlock.bodyWidget.index === sectionIndex) {\n var currentWidget = undefined;\n var blocks = block.getSplitWidgets();\n currentWidget = blocks[blocks.length - 1];\n block = nextBlock;\n updateNextBlockList = false;\n var nextWidget = undefined;\n blocks = block.getSplitWidgets();\n if (block instanceof ParagraphWidget) {\n nextWidget = blocks[0];\n }\n else {\n if (block instanceof TableWidget) {\n nextWidget = blocks[0];\n }\n }\n if (currentWidget.containerWidget === nextWidget.containerWidget\n && (HelperMethods.round(nextWidget.y, 2) === HelperMethods.round(this.viewer.clientActiveArea.y, 2)) &&\n isNullOrUndefined(nextWidget.nextWidget)) {\n break;\n }\n updateNextBlockList = true;\n this.reLayoutOrShiftWidgets(block, this.viewer);\n splittedWidget = block.getSplitWidgets();\n nextBlock = splittedWidget[splittedWidget.length - 1].nextRenderedWidget;\n }\n if (this.viewer.owner.editorModule) {\n this.viewer.owner.editorModule.updateListItemsTillEnd(block, updateNextBlockList);\n }\n this.viewer.blockToShift = undefined;\n var viewer = this.viewer;\n // if (viewer instanceof PageLayoutViewer) {\n viewer.removeEmptyPages();\n this.updateFieldElements();\n viewer.updateScrollBars();\n // }\n };\n /**\n * @private\n */\n Layout.prototype.updateFieldElements = function () {\n for (var i = 0; i < this.viewer.fields.length; i++) {\n var fieldBegin = this.viewer.fields[i];\n if (!isNullOrUndefined(this.viewer.selection)) {\n var fieldCode = this.viewer.selection.getFieldCode(fieldBegin);\n if (!isNullOrUndefined(fieldCode) && fieldCode.toLowerCase().match('numpages')) {\n var textElement = fieldBegin.fieldSeparator.nextNode;\n if (!isNullOrUndefined(textElement)) {\n textElement.text = this.viewer.pages.length.toString();\n var paragraph = fieldBegin.line.paragraph;\n if (!isNullOrUndefined(paragraph.bodyWidget) && !isNullOrUndefined(paragraph.bodyWidget.page)) {\n var lineIndex = paragraph.childWidgets.indexOf(fieldBegin.line);\n var elementIndex = fieldBegin.line.children.indexOf(textElement);\n this.reLayoutParagraph(paragraph, lineIndex, elementIndex);\n }\n }\n }\n }\n }\n };\n Layout.prototype.reLayoutOrShiftWidgets = function (blockAdv, viewer) {\n var reLayoutItems = false;\n var block = blockAdv;\n // if (block instanceof ParagraphWidget) {\n // reLayoutItems = viewer.renderedElements.get(block as ParagraphWidget).length === 0;\n // } else {\n // reLayoutItems = viewer.renderedElements.get(block as TableWidget).length === 0;\n // }\n // if (reLayoutItems) {\n // //Handle layouting the block.\n // viewer.updateClientAreaForBlock(block, true);\n // this.layoutMod.layoutBlock(block);\n // viewer.updateClientAreaForBlock(block, false);\n // } else {\n //Handled to check client area and shift layouted widget.\n this.shiftWidgetsBlock(block, viewer);\n //Updates the list value of the rendered paragraph.\n if (this.viewer.owner.editorModule) {\n this.viewer.owner.editorModule.updateRenderedListItems(block);\n }\n // }\n };\n Layout.prototype.shiftWidgetsBlock = function (block, viewer) {\n if (block instanceof ParagraphWidget) {\n this.shiftWidgetsForPara(block, viewer);\n }\n else if (block instanceof TableWidget) {\n this.shiftWidgetsForTable(block, viewer);\n }\n };\n Layout.prototype.shiftWidgetsForPara = function (paragraph, viewer) {\n var prevBodyObj = this.getBodyWidgetOfPreviousBlock(paragraph, 0);\n var prevBodyWidget = prevBodyObj.bodyWidget;\n var index = prevBodyObj.index;\n var prevWidget = undefined;\n for (var i = 0; i < paragraph.getSplitWidgets().length; i++) {\n var widget = paragraph.getSplitWidgets()[i];\n if (!isNullOrUndefined(prevWidget)) {\n this.shiftToPreviousWidget(widget, viewer, prevWidget);\n if (isNullOrUndefined(widget.childWidgets) || widget.childWidgets.length === 0) {\n i--;\n continue;\n }\n prevWidget = undefined;\n if (prevBodyWidget !== widget.containerWidget) {\n prevBodyWidget = widget.containerWidget;\n }\n }\n if (this.isFitInClientArea(widget, viewer)) {\n //Check whether this widget is moved to previous container widget.\n prevWidget = widget;\n widget.y = viewer.clientActiveArea.y;\n viewer.cutFromTop(viewer.clientActiveArea.y + widget.height);\n //Moves the paragraph widget to previous body widget.\n if (!isNullOrUndefined(prevBodyWidget) && prevBodyWidget !== widget.containerWidget) {\n index++;\n this.updateContainerWidget(widget, prevBodyWidget, index, true);\n }\n }\n else {\n var isSplittedToNewPage = this.splitWidget(widget, viewer, prevBodyWidget, index + 1);\n prevWidget = undefined;\n if (prevBodyWidget !== widget.containerWidget) {\n prevBodyWidget = widget.containerWidget;\n i--;\n }\n index = prevBodyWidget.childWidgets.indexOf(widget);\n if (isSplittedToNewPage) {\n prevBodyWidget = paragraph.getSplitWidgets()[i + 1].containerWidget;\n }\n }\n }\n };\n /**\n * @private\n */\n Layout.prototype.shiftTableWidget = function (table, viewer) {\n var tables = [table];\n this.addTableWidget(this.viewer.clientActiveArea, tables);\n this.viewer.updateClientAreaTopOrLeft(table, true);\n var row = table.childWidgets[0];\n while (row) {\n row = this.shiftRowWidget(tables, row);\n row = row.nextRow;\n }\n this.updateWidgetsToPage(tables, [], table);\n return tables[tables.length - 1];\n };\n /**\n * @private\n */\n Layout.prototype.shiftRowWidget = function (tables, row) {\n var viewer = this.viewer;\n var rows = [row];\n var widget = this.addTableRowWidget(viewer.clientActiveArea, rows);\n viewer.updateClientAreaForRow(row, true);\n for (var i = 0; i < row.childWidgets.length; i++) {\n var cell = row.childWidgets[i];\n // tslint:disable-next-line:max-line-length\n this.shiftCellWidget(cell, this.getMaxTopOrBottomCellMargin(row, 0) + row.topBorderWidth, this.getMaxTopOrBottomCellMargin(row, 1) + row.bottomBorderWidth);\n }\n viewer.updateClientAreaForRow(row, false);\n this.updateWidgetsToTable(tables, rows, row);\n return rows[rows.length - 1];\n };\n /**\n * @private\n */\n Layout.prototype.shiftCellWidget = function (cell, maxCellMarginTop, maxCellMarginBottom) {\n var viewer = this.viewer;\n this.addTableCellWidget(cell, viewer.clientActiveArea, maxCellMarginTop, maxCellMarginBottom);\n viewer.updateClientAreaForCell(cell, true);\n for (var i = 0; i < cell.childWidgets.length; i++) {\n var block = cell.childWidgets[i];\n viewer.updateClientAreaForBlock(block, true);\n if (block instanceof ParagraphWidget) {\n this.shiftParagraphWidget(block);\n }\n else {\n this.shiftTableWidget(block, viewer);\n }\n viewer.updateClientAreaForBlock(block, false);\n }\n this.updateWidgetToRow(cell);\n viewer.updateClientAreaForCell(cell, false);\n };\n /**\n * @private\n */\n Layout.prototype.shiftParagraphWidget = function (paragraph) {\n this.addParagraphWidget(this.viewer.clientActiveArea, paragraph);\n this.viewer.cutFromTop(this.viewer.clientActiveArea.y + paragraph.height);\n this.updateWidgetToPage(this.viewer, paragraph);\n };\n Layout.prototype.shiftWidgetsForTable = function (table, viewer) {\n var prevObj = this.getBodyWidgetOfPreviousBlock(table, 0);\n var prevBodyWidget = prevObj.bodyWidget;\n var index = prevObj.index;\n if (prevBodyWidget !== table.containerWidget) {\n this.updateContainerWidget(table, prevBodyWidget, index + 1, true);\n }\n table.y = this.viewer.clientActiveArea.y;\n this.updateVerticalPositionToTop(table, true);\n var isPageLayout = viewer instanceof PageLayoutViewer;\n var combinedTable = table.combineWidget(this.viewer);\n this.viewer.layout.updateChildLocationForTable(combinedTable.y, combinedTable);\n this.clearTableWidget(combinedTable, true, false);\n this.shiftTableWidget(combinedTable, this.viewer);\n this.updateVerticalPositionToTop(table, false);\n };\n Layout.prototype.updateVerticalPositionToTop = function (table, isUpdateTop) {\n //Iterate the tableWidgets counts\n for (var i = 0; i < table.getSplitWidgets().length; i++) {\n var tablewidget = table.getSplitWidgets()[i];\n //Iterate the tableWidget child items\n for (var j = 0; j < tablewidget.childWidgets.length; j++) {\n var rowWidget = tablewidget.childWidgets[j];\n //Iterate the RowWidgets child items\n for (var k = 0; k < rowWidget.childWidgets.length; k++) {\n var cellWidget = rowWidget.childWidgets[k];\n //Iterate the RowWidgets child items\n this.viewer.layout.updateCellVerticalPosition(cellWidget, isUpdateTop, false);\n }\n }\n }\n };\n // tslint:disable-next-line:max-line-length\n Layout.prototype.splitWidget = function (paragraphWidget, viewer, previousBodyWidget, index) {\n var firstLine = paragraphWidget.childWidgets[0];\n var maxElementHeight = this.getMaxElementHeight(firstLine, viewer);\n var paragraphView = paragraphWidget.getSplitWidgets();\n var nextBodyWidget = paragraphWidget.containerWidget;\n if (viewer.clientActiveArea.height >= maxElementHeight) {\n var splittedWidget = undefined;\n var widgetIndex = paragraphView.indexOf(paragraphWidget);\n if (widgetIndex < (paragraphView.length - 1)) {\n splittedWidget = paragraphView[widgetIndex + 1];\n nextBodyWidget = splittedWidget.containerWidget;\n }\n else {\n splittedWidget = new ParagraphWidget();\n splittedWidget.index = paragraphWidget.index;\n splittedWidget.characterFormat = paragraphWidget.characterFormat;\n splittedWidget.paragraphFormat = paragraphWidget.paragraphFormat;\n splittedWidget.width = paragraphWidget.width;\n splittedWidget.x = paragraphWidget.x;\n splittedWidget.y = paragraphWidget.y;\n paragraphView.push(splittedWidget);\n }\n if (previousBodyWidget !== paragraphWidget.containerWidget) {\n this.updateContainerWidget(paragraphWidget, previousBodyWidget, index, true);\n }\n for (var i = paragraphWidget.childWidgets.length - 1; i > 0; i--) {\n if (this.isFitInClientArea(paragraphWidget, viewer)) {\n break;\n }\n else {\n var line = paragraphWidget.childWidgets[i];\n //Moves the line widget to next widget.\n this.updateParagraphWidgetInternal(line, splittedWidget, 0);\n }\n }\n if (isNullOrUndefined(splittedWidget.containerWidget) && splittedWidget.childWidgets.length > 0) {\n var y = viewer.clientActiveArea.y;\n // tslint:disable-next-line:max-line-length\n var clientArea = new Rect(viewer.clientArea.x, viewer.clientArea.y, viewer.clientArea.width, viewer.clientArea.height);\n var activeArea = new Rect(viewer.clientActiveArea.x, viewer.clientActiveArea.y, viewer.clientActiveArea.width, viewer.clientActiveArea.height);\n //Checks whether next node exists, else adds new page.\n nextBodyWidget = this.moveBlocksToNextPage(paragraphWidget);\n // nextBodyWidget = this.createOrGetNextBodyWidget(previousBodyWidget, viewer);\n nextBodyWidget.childWidgets.splice(0, 0, splittedWidget);\n nextBodyWidget.height += splittedWidget.height;\n splittedWidget.containerWidget = nextBodyWidget;\n if (nextBodyWidget.childWidgets.length === 1 && nextBodyWidget.firstChild instanceof ParagraphWidget &&\n nextBodyWidget.firstChild.equals(paragraphWidget)) {\n paragraphWidget.x = paragraphWidget.x;\n paragraphWidget.y = y;\n return true;\n }\n else {\n //Resetting Client area\n viewer.clientArea = clientArea;\n viewer.clientActiveArea = activeArea;\n }\n }\n }\n else {\n nextBodyWidget = this.createOrGetNextBodyWidget(previousBodyWidget, this.viewer);\n if (paragraphWidget.containerWidget !== nextBodyWidget) {\n nextBodyWidget = this.moveBlocksToNextPage(paragraphWidget);\n this.updateContainerWidget(paragraphWidget, nextBodyWidget, 0, true);\n }\n }\n if (previousBodyWidget === paragraphWidget.containerWidget) {\n paragraphWidget.y = viewer.clientActiveArea.y;\n viewer.cutFromTop(viewer.clientActiveArea.y + paragraphWidget.height);\n }\n else {\n //Updates client area based on next body widget.\n viewer.updateClientArea(nextBodyWidget.sectionFormat, nextBodyWidget.page);\n }\n return false;\n };\n Layout.prototype.getMaxElementHeight = function (lineWidget, viewer) {\n var height = 0;\n // tslint:disable-next-line:max-line-length\n if (lineWidget.children.length === 0 || ((lineWidget.children.length === 1 && lineWidget.children[0] instanceof ListTextElementBox) || (lineWidget.children.length === 2 && lineWidget.children[0] instanceof ListTextElementBox && lineWidget.children[1] instanceof ListTextElementBox))) {\n var topMargin = 0;\n var bottomMargin = 0;\n height = viewer.selection.getParagraphMarkSize(lineWidget.paragraph, topMargin, bottomMargin).height;\n height += topMargin;\n if (lineWidget.children.length > 0) {\n var element = lineWidget.children[0];\n if (height < element.margin.top + element.height) {\n height = element.margin.top + element.height;\n }\n }\n }\n else {\n for (var i = 0; i < lineWidget.children.length; i++) {\n var element = lineWidget.children[i];\n if (height < element.margin.top + element.height) {\n height = element.margin.top + element.height;\n }\n }\n }\n return height;\n };\n Layout.prototype.createOrGetNextBodyWidget = function (bodyWidget, viewer) {\n var nextBodyWidget = undefined;\n var pageIndex = 0;\n pageIndex = viewer.pages.indexOf(bodyWidget.page);\n var page = undefined;\n var index = undefined;\n index = bodyWidget.index;\n if (pageIndex === viewer.pages.length - 1\n || viewer.pages[pageIndex + 1].sectionIndex !== index) {\n var currentWidget = new BodyWidget();\n currentWidget.sectionFormat = bodyWidget.sectionFormat;\n currentWidget.index = bodyWidget.index;\n page = viewer.createNewPage(currentWidget);\n if (viewer.pages[pageIndex + 1].sectionIndex !== index) {\n viewer.insertPage(pageIndex + 1, page);\n }\n nextBodyWidget = page.bodyWidgets[0];\n }\n else {\n page = viewer.pages[pageIndex + 1];\n nextBodyWidget = page.bodyWidgets[0];\n }\n return nextBodyWidget;\n };\n Layout.prototype.isFitInClientArea = function (paragraphWidget, viewer) {\n var lastLine = paragraphWidget.childWidgets[paragraphWidget.childWidgets.length - 1];\n var height = paragraphWidget.height;\n var maxElementHeight = this.getMaxElementHeight(lastLine, viewer);\n if (lastLine.height > maxElementHeight) {\n height -= lastLine.height - maxElementHeight;\n }\n return viewer.clientActiveArea.height >= height;\n };\n // tslint:disable-next-line:max-line-length\n Layout.prototype.shiftToPreviousWidget = function (paragraphWidget, viewer, previousWidget) {\n for (var i = 0; i < paragraphWidget.childWidgets.length; i++) {\n var line = paragraphWidget.childWidgets[i];\n var maxElementHeight = this.getMaxElementHeight(line, viewer);\n if (viewer.clientActiveArea.height >= maxElementHeight) {\n //Moves the line widget to previous widget.\n this.updateParagraphWidgetInternal(line, previousWidget, previousWidget.childWidgets.length);\n i--;\n viewer.cutFromTop(viewer.clientActiveArea.y + line.height);\n if (isNullOrUndefined(paragraphWidget.childWidgets)) {\n break;\n }\n }\n else {\n var bodyWidget = previousWidget.containerWidget;\n var nextBodyWidget = this.createOrGetNextBodyWidget(bodyWidget, viewer);\n if (bodyWidget !== nextBodyWidget) {\n this.updateContainerWidget(paragraphWidget, nextBodyWidget, 0, true);\n }\n //Updates client area based on next page.\n viewer.updateClientArea(nextBodyWidget.sectionFormat, nextBodyWidget.page);\n break;\n }\n }\n };\n Layout.prototype.updateParagraphWidgetInternal = function (lineWidget, newParagraphWidget, index) {\n if (!isNullOrUndefined(lineWidget.paragraph)) {\n lineWidget.paragraph.childWidgets.splice(lineWidget.paragraph.childWidgets.indexOf(lineWidget), 1);\n lineWidget.paragraph.height -= lineWidget.height;\n if (!isNullOrUndefined(lineWidget.paragraph.containerWidget)) {\n lineWidget.paragraph.containerWidget.height -= lineWidget.height;\n }\n // tslint:disable-next-line:max-line-length\n if (isNullOrUndefined(lineWidget.paragraph.childWidgets) || lineWidget.paragraph.childWidgets.length === 0) {\n lineWidget.paragraph.destroyInternal(this.viewer);\n }\n }\n newParagraphWidget.childWidgets.splice(index, 0, lineWidget);\n lineWidget.paragraph = newParagraphWidget;\n newParagraphWidget.height += lineWidget.height;\n if (!isNullOrUndefined(newParagraphWidget.containerWidget)) {\n newParagraphWidget.containerWidget.height += lineWidget.height;\n }\n };\n Layout.prototype.shiftNextWidgets = function (blockAdv) {\n var block = blockAdv;\n while (block.nextWidget instanceof BlockWidget) {\n block = block.nextWidget;\n this.reLayoutOrShiftWidgets(block, this.viewer);\n }\n };\n Layout.prototype.updateContainerWidget = function (widget, bodyWidget, index, destroyAndScroll) {\n if (!isNullOrUndefined(widget.containerWidget)) {\n widget.containerWidget.childWidgets.splice(widget.containerWidget.childWidgets.indexOf(widget), 1);\n widget.containerWidget.height -= bodyWidget.height;\n if ((isNullOrUndefined(widget.containerWidget.childWidgets) || widget.containerWidget.childWidgets.length === 0)\n && widget.containerWidget instanceof BodyWidget && widget.containerWidget !== bodyWidget && destroyAndScroll) {\n var page = widget.containerWidget.page;\n if (this.viewer.pages[this.viewer.pages.length - 1] === page &&\n this.viewer.visiblePages.indexOf(page) !== -1) {\n this.viewer.scrollToBottom();\n }\n widget.containerWidget.destroyInternal(this.viewer);\n }\n }\n bodyWidget.childWidgets.splice(index, 0, widget);\n bodyWidget.height += bodyWidget.height;\n widget.containerWidget = bodyWidget;\n };\n Layout.prototype.getBodyWidgetOfPreviousBlock = function (block, index) {\n index = 0;\n var prevBodyWidget = undefined;\n var previousBlock = block.previousRenderedWidget;\n prevBodyWidget = previousBlock ? previousBlock.containerWidget : block.containerWidget;\n index = previousBlock ? prevBodyWidget.childWidgets.indexOf(previousBlock) : block.containerWidget.childWidgets.indexOf(block);\n return { bodyWidget: prevBodyWidget, index: index };\n };\n Layout.prototype.moveBlocksToNextPage = function (block) {\n var body = block.bodyWidget;\n var page = body.page;\n var pageIndex = page.index + 1;\n var nextPage = undefined;\n var nextBody = undefined;\n if (this.viewer.pages.length > pageIndex) {\n nextPage = this.viewer.pages[pageIndex];\n if (nextPage.bodyWidgets.length === 0 || !body.equals(nextPage.bodyWidgets[0])) {\n nextPage = undefined;\n }\n else {\n nextBody = nextPage.bodyWidgets[0];\n this.viewer.updateClientArea(nextBody.sectionFormat, nextBody.page);\n }\n }\n if (isNullOrUndefined(nextPage)) {\n nextBody = this.createSplitBody(body);\n nextPage = this.viewer.createNewPage(nextBody, pageIndex);\n }\n //tslint:disable :no-constant-condition\n do {\n var lastBlock = body.lastChild;\n if (block === lastBlock) {\n break;\n }\n body.childWidgets.pop();\n nextBody.childWidgets.splice(0, 0, lastBlock);\n lastBlock.containerWidget = nextBody;\n nextBody.height += lastBlock.height;\n } while (true);\n return nextBody;\n };\n Layout.prototype.createSplitBody = function (body) {\n var newBody = this.addBodyWidget(this.viewer.clientActiveArea);\n newBody.sectionFormat = body.sectionFormat;\n newBody.index = body.index;\n return newBody;\n };\n //endregion\n //#region Relayout Parargaph \n /**\n * Relayout Paragraph from specified line widget\n * @param paragraph Paragraph to reLayout\n * @param lineIndex start line index to reLayout\n * @private\n */\n Layout.prototype.reLayoutLine = function (paragraph, lineIndex) {\n if (this.viewer.owner.isDocumentLoaded && this.viewer.owner.editorModule) {\n this.viewer.owner.editorModule.updateWholeListItems(paragraph);\n }\n var lineWidget;\n if (paragraph.paragraphFormat.listFormat && paragraph.paragraphFormat.listFormat.listId !== -1) {\n lineWidget = paragraph.getSplitWidgets()[0].firstChild;\n }\n else {\n lineWidget = paragraph.childWidgets[lineIndex];\n }\n var lineToLayout = lineWidget.previousLine;\n if (isNullOrUndefined(lineToLayout)) {\n lineToLayout = lineWidget;\n }\n var currentParagraph = lineToLayout.paragraph;\n var bodyWidget = paragraph.containerWidget;\n bodyWidget.height -= paragraph.height;\n if (this.viewer.owner.enableHeaderAndFooter || paragraph.isInHeaderFooter) {\n // tslint:disable-next-line:max-line-length\n this.viewer.updateHCFClientAreaWithTop(paragraph.bodyWidget.sectionFormat, this.viewer.isBlockInHeader(paragraph), bodyWidget.page);\n }\n else {\n this.viewer.updateClientArea(bodyWidget.sectionFormat, bodyWidget.page);\n }\n this.viewer.updateClientAreaForBlock(paragraph, true);\n if (lineToLayout.paragraph.isEmpty()) {\n this.viewer.cutFromTop(paragraph.y);\n this.layoutParagraph(paragraph, 0);\n }\n else {\n this.updateClientAreaForLine(lineToLayout.paragraph, lineToLayout, 0);\n this.layoutListItems(lineToLayout.paragraph);\n if (lineToLayout.isFirstLine() && !isNullOrUndefined(paragraph.paragraphFormat)) {\n var firstLineIndent = -HelperMethods.convertPointToPixel(paragraph.paragraphFormat.firstLineIndent);\n this.viewer.updateClientWidth(firstLineIndent);\n }\n do {\n lineToLayout = this.layoutLine(lineToLayout, 0);\n paragraph = lineToLayout.paragraph;\n lineToLayout = lineToLayout.nextLine;\n } while (lineToLayout);\n this.updateWidgetToPage(this.viewer, paragraph);\n this.viewer.updateClientAreaForBlock(paragraph, false);\n }\n this.layoutNextItemsBlock(paragraph, this.viewer);\n };\n return Layout;\n}());\nexport { Layout };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Rect, ImageElementBox, ParagraphWidget, ListTextElementBox, TableRowWidget, TableWidget, TableCellWidget, FieldElementBox, TabElementBox } from './page';\nimport { Layout } from './layout';\nimport { HelperMethods } from '../editor/editor-helper';\n/**\n * @private\n */\nvar Renderer = /** @class */ (function () {\n function Renderer(viewer) {\n this.isPrinting = false;\n this.pageLeft = 0;\n this.pageTop = 0;\n this.isFieldCode = false;\n this.viewer = viewer;\n }\n Object.defineProperty(Renderer.prototype, \"pageCanvas\", {\n /**\n * Gets page canvas.\n * @private\n */\n get: function () {\n if (this.isPrinting) {\n if (isNullOrUndefined(this.pageCanvasIn)) {\n this.pageCanvasIn = document.createElement('canvas');\n this.pageCanvasIn.getContext('2d').save();\n }\n return this.pageCanvasIn;\n }\n return isNullOrUndefined(this.viewer) ? undefined : this.viewer.containerCanvas;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Renderer.prototype, \"selectionCanvas\", {\n /**\n * Gets selection canvas.\n */\n get: function () {\n return isNullOrUndefined(this.viewer) ? undefined : this.viewer.selectionCanvas;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Renderer.prototype, \"pageContext\", {\n /**\n * Gets page context.\n */\n get: function () {\n return this.pageCanvas.getContext('2d');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Renderer.prototype, \"selectionContext\", {\n /**\n * Gets selection context.\n */\n get: function () {\n return this.selectionCanvas.getContext('2d');\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Gets the color.\n */\n Renderer.prototype.getColor = function (color) {\n if (color.length > 0) {\n if (color[0] === '#') {\n if (color.length > 7) {\n return color.substr(0, 7);\n }\n }\n }\n return color;\n };\n /**\n * Renders widgets.\n * @param {Page} page\n * @param {number} left\n * @param {number} top\n * @param {number} width\n * @param {number} height\n * @private\n */\n Renderer.prototype.renderWidgets = function (page, left, top, width, height) {\n if (isNullOrUndefined(this.pageCanvas) || isNullOrUndefined(page)) {\n return;\n }\n this.pageContext.fillStyle = this.getColor(this.viewer.backgroundColor);\n this.pageContext.beginPath();\n this.pageContext.fillRect(left, top, width, height);\n this.pageContext.closePath();\n this.pageContext.strokeStyle = this.viewer.owner.pageOutline;\n this.pageContext.strokeRect(left, top, width, height);\n this.pageLeft = left;\n this.pageTop = top;\n if (this.isPrinting) {\n this.setPageSize(page);\n }\n else {\n this.pageContext.beginPath();\n this.pageContext.save();\n this.pageContext.rect(left, top, width, height);\n this.pageContext.clip();\n }\n if (page.headerWidget) {\n this.renderHFWidgets(page, page.headerWidget);\n }\n if (page.footerWidget) {\n this.renderHFWidgets(page, page.footerWidget);\n }\n for (var i = 0; i < page.bodyWidgets.length; i++) {\n this.render(page, page.bodyWidgets[i]);\n }\n if (this.viewer.owner.enableHeaderAndFooter && !this.isPrinting) {\n this.renderHeaderSeparator(page, this.pageLeft, this.pageTop, page.headerWidget);\n }\n this.pageLeft = 0;\n this.pageTop = 0;\n this.pageContext.restore();\n };\n /**\n * Sets page size.\n * @param {Page} page\n */\n Renderer.prototype.setPageSize = function (page) {\n this.pageContext.clearRect(0, 0, this.pageCanvas.width, this.pageCanvas.height);\n this.selectionContext.clearRect(0, 0, this.selectionCanvas.width, this.selectionCanvas.height);\n this.pageContext.restore();\n this.selectionContext.restore();\n var width = page.boundingRectangle.width;\n var height = page.boundingRectangle.height;\n var dpr = Math.max(1, window.devicePixelRatio || 1);\n if (this.pageCanvas.width !== width * dpr || this.pageCanvas.height !== height * dpr) {\n this.pageCanvas.height = height * dpr;\n this.pageCanvas.width = width * dpr;\n this.pageCanvas.style.height = height + 'px';\n this.pageCanvas.style.width = width + 'px';\n this.pageContext.globalAlpha = 1;\n this.pageContext.scale(dpr, dpr);\n }\n };\n /**\n * Renders header footer widget.\n * @param {Page} page\n * @param {HeaderFooterWidget} headFootWidget\n */\n Renderer.prototype.renderHFWidgets = function (page, headFootWidget) {\n this.pageContext.globalAlpha = this.viewer.owner.enableHeaderAndFooter ? 1 : 0.65;\n for (var i = 0; i < headFootWidget.childWidgets.length; i++) {\n var widget = headFootWidget.childWidgets[i];\n this.renderWidget(page, widget);\n }\n this.pageContext.globalAlpha = this.viewer.owner.enableHeaderAndFooter ? 0.65 : 1;\n };\n Renderer.prototype.renderHeaderSeparator = function (page, left, top, widget) {\n //Header Widget\n var topMargin = HelperMethods.convertPointToPixel(page.bodyWidgets[0].sectionFormat.topMargin);\n var y = this.getScaledValue(Math.max((widget.y + widget.height), topMargin));\n var pageWidth = this.getScaledValue(page.boundingRectangle.width);\n var ctx = this.pageContext;\n ctx.save();\n ctx.globalAlpha = 0.65;\n //Dash line Separator\n this.renderDashLine(ctx, left, top + y, pageWidth);\n var type = this.getHeaderFooterType(page, true);\n ctx.font = '9pt Arial';\n var width = ctx.measureText(type).width;\n this.renderHeaderFooterMark(ctx, left + 5, top + y, width + 10, 20);\n this.renderHeaderFooterMarkText(ctx, type, left + 10, y + top + 15);\n if (page.footerWidget) {\n //Footer Widget\n var footerDistance = HelperMethods.convertPointToPixel(page.bodyWidgets[0].sectionFormat.footerDistance);\n // tslint:disable-next-line:max-line-length\n var footerHeight = this.getScaledValue(page.boundingRectangle.height) -\n this.getScaledValue(Math.max(page.footerWidget.height + footerDistance, HelperMethods.convertPointToPixel(page.footerWidget.sectionFormat.bottomMargin)));\n this.renderDashLine(ctx, left, top + footerHeight, pageWidth);\n type = this.getHeaderFooterType(page, false);\n width = ctx.measureText(type).width;\n this.renderHeaderFooterMark(ctx, left + 5, top + footerHeight - 20, width + 10, 20);\n this.renderHeaderFooterMarkText(ctx, type, left + 10, top + footerHeight - 5);\n ctx.restore();\n }\n };\n Renderer.prototype.getHeaderFooterType = function (page, isHeader) {\n var type;\n type = isHeader ? 'Header' : 'Footer';\n if (page.bodyWidgets[0].sectionFormat.differentFirstPage && this.viewer.pages.indexOf(page) === 0) {\n type = isHeader ? 'First Page Header' : 'First Page Footer';\n }\n else if (page.bodyWidgets[0].sectionFormat.differentOddAndEvenPages) {\n if ((this.viewer.pages.indexOf(page) + 1) % 2 === 0) {\n type = isHeader ? 'Even Page Header' : 'Even Page Footer';\n }\n else {\n type = isHeader ? 'Odd Page Header' : 'Odd Page Footer';\n }\n }\n return type;\n };\n Renderer.prototype.renderDashLine = function (ctx, x, y, width) {\n ctx.beginPath();\n ctx.strokeStyle = '#000000';\n ctx.lineWidth = 1;\n ctx.setLineDash([6, 4]);\n ctx.moveTo(x, y);\n ctx.lineTo(x + width, y);\n ctx.stroke();\n ctx.setLineDash([]);\n ctx.closePath();\n };\n Renderer.prototype.renderHeaderFooterMark = function (ctx, x, y, w, h) {\n ctx.beginPath();\n ctx.fillStyle = 'lightgray';\n ctx.fillRect(x, y, w, h);\n ctx.strokeStyle = 'black';\n ctx.strokeRect(x, y, w, h);\n ctx.closePath();\n };\n Renderer.prototype.renderHeaderFooterMarkText = function (ctx, content, x, y) {\n ctx.beginPath();\n ctx.fillStyle = '#000000';\n ctx.textBaseline = 'alphabetic';\n ctx.fillText(content, x, y);\n ctx.closePath();\n };\n /**\n * Renders body widget.\n * @param {Page} page\n * @param {BodyWidget} bodyWidget\n */\n Renderer.prototype.render = function (page, bodyWidget) {\n for (var i = 0; i < bodyWidget.childWidgets.length; i++) {\n var widget = bodyWidget.childWidgets[i];\n if (i === 0 && bodyWidget.childWidgets[0] instanceof TableWidget && page.repeatHeaderRowTableWidget) {\n // tslint:disable-next-line:max-line-length\n this.renderHeader(page, widget, this.viewer.layout.getHeader(bodyWidget.childWidgets[0]));\n }\n this.renderWidget(page, widget);\n }\n };\n /**\n * Renders block widget.\n * @param {Page} page\n * @param {Widget} widget\n */\n Renderer.prototype.renderWidget = function (page, widget) {\n if (widget instanceof ParagraphWidget) {\n this.renderParagraphWidget(page, widget);\n }\n else {\n this.renderTableWidget(page, widget);\n }\n };\n /**\n * Renders header.\n * @param {Page} page\n * @param {TableWidget} widget\n * @param {WRow} header\n * @private\n */\n Renderer.prototype.renderHeader = function (page, widget, header) {\n if (isNullOrUndefined(header)) {\n return;\n }\n var top = page.viewer.clientArea.y;\n for (var i = 0; i <= header.rowIndex; i++) {\n if (header.ownerTable.getSplitWidgets()[0].childWidgets.length === 0) {\n return;\n }\n var row = header.ownerTable.getSplitWidgets()[0].childWidgets[0];\n var headerWidget = row.clone();\n headerWidget.containerWidget = row.containerWidget;\n // tslint:disable-next-line:max-line-length\n page.viewer.updateClientAreaLocation(headerWidget, new Rect(page.viewer.clientArea.x, top, headerWidget.width, headerWidget.height));\n page.viewer.layout.updateChildLocationForRow(top, headerWidget);\n var cell = undefined;\n //Renders table cell outline rectangle - Border and background color.\n for (var j = 0; j < headerWidget.childWidgets.length; j++) {\n cell = headerWidget.childWidgets[j];\n this.renderTableCellWidget(page, cell);\n }\n top += headerWidget.height;\n }\n if (widget.y !== top) {\n //this.Location.Y = top;\n page.viewer.layout.updateChildLocationForTable(top, widget);\n }\n };\n /**\n * Renders paragraph widget.\n * @param {Page} page\n * @param {ParagraphWidget} paraWidget\n */\n Renderer.prototype.renderParagraphWidget = function (page, paraWidget) {\n var top = paraWidget.y;\n var left = paraWidget.x;\n for (var i = 0; i < paraWidget.childWidgets.length; i++) {\n var widget = paraWidget.childWidgets[i];\n this.renderLine(widget, page, left, top);\n top += widget.height;\n }\n };\n /**\n * Renders table widget.\n * @param {Page} page\n * @param {TableWidget} tableWidget\n */\n Renderer.prototype.renderTableWidget = function (page, tableWidget) {\n for (var i = 0; i < tableWidget.childWidgets.length; i++) {\n var widget = tableWidget.childWidgets[i];\n this.renderTableRowWidget(page, widget);\n if (tableWidget.tableFormat.cellSpacing > 0) {\n this.renderTableOutline(tableWidget);\n }\n }\n };\n /**\n * Renders table row widget.\n * @param {Page} page\n * @param {Widget} rowWidget\n */\n Renderer.prototype.renderTableRowWidget = function (page, rowWidget) {\n for (var i = 0; i < rowWidget.childWidgets.length; i++) {\n var widget = rowWidget.childWidgets[i];\n this.renderTableCellWidget(page, widget);\n }\n };\n /**\n * Renders table cell widget.\n * @param {Page} page\n * @param {TableCellWidget} cellWidget\n */\n Renderer.prototype.renderTableCellWidget = function (page, cellWidget) {\n if (!this.isPrinting) {\n if (this.getScaledValue(cellWidget.y, 2) + cellWidget.height * this.viewer.zoomFactor < 0 ||\n this.getScaledValue(cellWidget.y, 2) > this.viewer.visibleBounds.height) {\n return;\n }\n }\n var widgetHeight = 0;\n if (!this.isPrinting && page.viewer.owner.selection && page.viewer.owner.selection.selectedWidgets.length > 0) {\n page.viewer.owner.selection.addSelectionHighlightTable(this.selectionContext, cellWidget);\n }\n this.renderTableCellOutline(page.viewer, cellWidget);\n for (var i = 0; i < cellWidget.childWidgets.length; i++) {\n var widget = cellWidget.childWidgets[i];\n var width = cellWidget.width + cellWidget.margin.left - cellWidget.leftBorderWidth;\n this.clipRect(cellWidget.x, cellWidget.y, this.getScaledValue(width), this.getScaledValue(cellWidget.height));\n this.renderWidget(page, widget);\n this.pageContext.restore();\n }\n };\n /**\n * Renders line widget.\n * @param {LineWidget} lineWidget\n * @param {Page} page\n * @param {number} left\n * @param {number} top\n */\n Renderer.prototype.renderLine = function (lineWidget, page, left, top) {\n if (!this.isPrinting && page.viewer.owner.selection && page.viewer.owner.selection.selectedWidgets.length > 0) {\n page.viewer.owner.selection.addSelectionHighlight(this.selectionContext, lineWidget, top);\n }\n if (lineWidget.isFirstLine()) {\n left += HelperMethods.convertPointToPixel(lineWidget.paragraph.paragraphFormat.firstLineIndent);\n }\n if (this.viewer.owner.optionsPaneModule) {\n // tslint:disable-next-line:max-line-length\n if (!isNullOrUndefined(page.viewer.owner.optionsPaneModule.searchHighlighters) && page.viewer.owner.optionsPaneModule.searchHighlighters.containsKey(lineWidget)) {\n var widgetInfo = page.viewer.owner.optionsPaneModule.searchHighlighters.get(lineWidget);\n for (var i = 0; i < widgetInfo.length; i++) {\n this.pageContext.fillStyle = '#ffe97f';\n // tslint:disable-next-line:max-line-length\n this.pageContext.fillRect(this.getScaledValue(widgetInfo[i].left, 1), this.getScaledValue(top, 2), this.getScaledValue(widgetInfo[i].width), this.getScaledValue(lineWidget.height));\n }\n }\n }\n for (var i = 0; i < lineWidget.children.length; i++) {\n var elementBox = lineWidget.children[i];\n if (elementBox instanceof FieldElementBox || this.isFieldCode ||\n (elementBox.width === 0 && elementBox.height === 0)) {\n if (this.isFieldCode) {\n elementBox.width = 0;\n }\n left += elementBox.width + elementBox.margin.left;\n this.toSkipFieldCode(elementBox);\n continue;\n }\n var underlineY = this.getUnderlineYPosition(lineWidget);\n if (!this.isPrinting) {\n if (this.getScaledValue(top + elementBox.margin.top, 2) + elementBox.height * this.viewer.zoomFactor < 0 ||\n this.getScaledValue(top + elementBox.margin.top, 2) > this.viewer.visibleBounds.height) {\n left += elementBox.width + elementBox.margin.left;\n continue;\n }\n }\n if (elementBox instanceof ListTextElementBox) {\n this.renderListTextElementBox(elementBox, left, top, underlineY);\n }\n else if (elementBox instanceof ImageElementBox) {\n this.renderImageElementBox(elementBox, left, top, underlineY);\n }\n else {\n this.renderTextElementBox(elementBox, left, top, underlineY);\n }\n left += elementBox.width + elementBox.margin.left;\n }\n };\n Renderer.prototype.toSkipFieldCode = function (element) {\n if (element instanceof FieldElementBox) {\n if (element.fieldType === 0) {\n if ((!isNullOrUndefined(element.fieldEnd) || element.hasFieldEnd)) {\n this.isFieldCode = true;\n }\n }\n else if (element.fieldType === 2 || element.fieldType === 1) {\n this.isFieldCode = false;\n }\n }\n };\n /**\n * Gets underline y position.\n * @param {LineWidget} lineWidget\n */\n Renderer.prototype.getUnderlineYPosition = function (lineWidget) {\n var height = 0;\n var lineHeight = 0;\n for (var i = 0; i < lineWidget.children.length; i++) {\n if (lineWidget.children[i] instanceof FieldElementBox ||\n (lineWidget.children[i].width === 0 && lineWidget.children[i].height === 0)) {\n continue;\n }\n if (height < lineWidget.children[i].height + lineWidget.children[i].margin.top) {\n height = lineWidget.children[i].margin.top + lineWidget.children[i].height;\n lineHeight = lineWidget.children[i].height / 20;\n }\n }\n return height - 2 * lineHeight;\n };\n /**\n * Renders list element box\n * @param {ListTextElementBox} elementBox\n * @param {number} left\n * @param {number} top\n * @param {number} underlineY\n */\n Renderer.prototype.renderListTextElementBox = function (elementBox, left, top, underlineY) {\n var topMargin = elementBox.margin.top;\n var leftMargin = elementBox.margin.left;\n var format = elementBox.listLevel.characterFormat;\n var breakCharacterFormat = elementBox.line.paragraph.characterFormat;\n var color = format.fontColor === '#000000' ? breakCharacterFormat.fontColor : format.fontColor;\n this.pageContext.textBaseline = 'top';\n var bold = '';\n var italic = '';\n var fontFamily = format.fontFamily === 'Verdana' ? breakCharacterFormat.fontFamily : format.fontFamily;\n var fontSize = format.fontSize === 11 ? breakCharacterFormat.fontSize : format.fontSize;\n // tslint:disable-next-line:max-line-length\n var baselineAlignment = format.baselineAlignment === 'Normal' ? breakCharacterFormat.baselineAlignment : format.baselineAlignment;\n bold = format.bold ? 'bold' : breakCharacterFormat.bold ? 'bold' : '';\n italic = format.italic ? 'italic' : breakCharacterFormat.italic ? 'italic' : '';\n fontSize = fontSize === 0 ? 0.5 : fontSize / (baselineAlignment === 'Normal' ? 1 : 1.5);\n var strikethrough = format.strikethrough === 'None' ? breakCharacterFormat.strikethrough : format.strikethrough;\n var highlightColor = format.highlightColor === 'NoColor' ? breakCharacterFormat.highlightColor :\n format.highlightColor;\n if (highlightColor !== 'NoColor') {\n if (highlightColor.substring(0, 1) !== '#') {\n this.pageContext.fillStyle = HelperMethods.getHighlightColorCode(highlightColor);\n }\n else {\n this.pageContext.fillStyle = this.getColor(highlightColor);\n }\n // tslint:disable-next-line:max-line-length\n this.pageContext.fillRect(this.getScaledValue(left + leftMargin, 1), this.getScaledValue(top + topMargin, 2), this.getScaledValue(elementBox.width), this.getScaledValue(elementBox.height));\n }\n this.pageContext.font = bold + ' ' + italic + ' ' + fontSize * this.viewer.zoomFactor + 'pt' + ' ' + fontFamily;\n if (baselineAlignment === 'Subscript') {\n topMargin += elementBox.height - elementBox.height / 1.5;\n }\n this.pageContext.fillStyle = this.getColor(color);\n // tslint:disable-next-line:max-line-length\n this.pageContext.fillText(elementBox.text, this.getScaledValue(left + leftMargin, 1), this.getScaledValue(top + topMargin, 2), this.getScaledValue(elementBox.width));\n if (format.underline !== 'None' && !isNullOrUndefined(format.underline)) {\n this.renderUnderline(elementBox, left, top, underlineY, color, format.underline, baselineAlignment);\n }\n if (strikethrough !== 'None') {\n this.renderStrikeThrough(elementBox, left, top, format.strikethrough, color, baselineAlignment);\n }\n };\n /**\n * Renders text element box.\n * @param {TextElementBox} elementBox\n * @param {number} left\n * @param {number} top\n * @param {number} underlineY\n */\n // tslint:disable-next-line:max-line-length\n Renderer.prototype.renderTextElementBox = function (elementBox, left, top, underlineY) {\n var isHeightType = false;\n var containerWidget = elementBox.line.paragraph.containerWidget;\n if (containerWidget instanceof TableCellWidget) {\n isHeightType = (containerWidget.ownerRow.rowFormat.heightType === 'Exactly');\n }\n var topMargin = elementBox.margin.top;\n var leftMargin = elementBox.margin.left;\n if (isHeightType) {\n // tslint:disable-next-line:max-line-length\n this.clipRect(containerWidget.x, containerWidget.y, this.getScaledValue(containerWidget.width), this.getScaledValue(containerWidget.height));\n }\n var format = elementBox.characterFormat;\n if (format.highlightColor !== 'NoColor') {\n if (format.highlightColor.substring(0, 1) !== '#') {\n this.pageContext.fillStyle = HelperMethods.getHighlightColorCode(format.highlightColor);\n }\n else {\n this.pageContext.fillStyle = this.getColor(format.highlightColor);\n }\n // tslint:disable-next-line:max-line-length\n this.pageContext.fillRect(this.getScaledValue(left + leftMargin, 1), this.getScaledValue(top + topMargin, 2), this.getScaledValue(elementBox.width), this.getScaledValue(elementBox.height));\n }\n var color = format.fontColor;\n this.pageContext.textBaseline = 'top';\n var bold = '';\n var italic = '';\n var fontSize = 11;\n bold = format.bold ? 'bold' : '';\n italic = format.italic ? 'italic' : '';\n fontSize = format.fontSize === 0 ? 0.5 : format.fontSize / (format.baselineAlignment === 'Normal' ? 1 : 1.5);\n this.pageContext.font = bold + ' ' + italic + ' ' + fontSize * this.viewer.zoomFactor + 'pt' + ' ' + format.fontFamily;\n if (format.baselineAlignment === 'Subscript') {\n topMargin += elementBox.height - elementBox.height / 1.5;\n }\n this.pageContext.fillStyle = this.getColor(color);\n var scaledWidth = this.getScaledValue(elementBox.width);\n var text = elementBox.text;\n // tslint:disable-next-line:max-line-length\n if (elementBox instanceof TabElementBox) {\n var tabElement = elementBox;\n if (tabElement.tabText === '' && !isNullOrUndefined(tabElement.tabLeader) && tabElement.tabLeader !== 'None') {\n text = this.getTabLeader(elementBox);\n tabElement.tabText = text;\n }\n else if (tabElement.tabText !== '') {\n text = tabElement.tabText;\n }\n }\n // tslint:disable-next-line:max-line-length\n this.pageContext.fillText(text, this.getScaledValue(left + leftMargin, 1), this.getScaledValue(top + topMargin, 2), scaledWidth);\n if (format.underline !== 'None' && !isNullOrUndefined(format.underline)) {\n // tslint:disable-next-line:max-line-length\n this.renderUnderline(elementBox, left, top, underlineY, color, format.underline, format.baselineAlignment);\n }\n if (format.strikethrough !== 'None' && !isNullOrUndefined(format.strikethrough)) {\n this.renderStrikeThrough(elementBox, left, top, format.strikethrough, color, format.baselineAlignment);\n }\n if (isHeightType) {\n this.pageContext.restore();\n }\n };\n /**\n * Returns tab leader\n */\n Renderer.prototype.getTabLeader = function (elementBox) {\n var textWidth = 0;\n var tabString = this.getTabLeaderString(elementBox.tabLeader);\n var tabText = tabString;\n while (elementBox.width > textWidth) {\n textWidth = this.viewer.textHelper.getWidth(tabText, elementBox.characterFormat);\n tabText = tabText + tabString;\n }\n return tabText.slice(0, -1);\n };\n /**\n * Returns tab leader string.\n */\n Renderer.prototype.getTabLeaderString = function (tabLeader) {\n var tabString = '';\n switch (tabLeader) {\n case 'Dot':\n tabString = '.';\n break;\n case 'Hyphen':\n tabString = '-';\n break;\n case 'Underscore':\n tabString = '_';\n break;\n }\n return tabString;\n };\n /**\n * Clips the rectangle with specified position.\n * @param {number} xPos\n * @param {number} yPos\n * @param {number} width\n * @param {number} height\n */\n Renderer.prototype.clipRect = function (xPos, yPos, width, height) {\n this.pageContext.beginPath();\n this.pageContext.save();\n this.pageContext.rect(this.getScaledValue(xPos, 1), this.getScaledValue(yPos, 2), width, height);\n this.pageContext.clip();\n };\n /**\n * Renders underline.\n * @param {ElementBox} elementBox\n * @param {number} left\n * @param {number} top\n * @param {number} underlineY\n * @param {string} color\n * @param {Underline} underline\n * @param {BaselineAlignment} baselineAlignment\n */\n // tslint:disable-next-line:max-line-length\n Renderer.prototype.renderUnderline = function (elementBox, left, top, underlineY, color, underline, baselineAlignment) {\n var renderedHeight = elementBox.height / (baselineAlignment === 'Normal' ? 1 : 1.5);\n var topMargin = elementBox.margin.top;\n var underlineHeight = renderedHeight / 20;\n var y = 0;\n if (baselineAlignment === 'Subscript' || elementBox instanceof ListTextElementBox) {\n y = (renderedHeight - 2 * underlineHeight) + top;\n topMargin += elementBox.height - renderedHeight;\n y += topMargin > 0 ? topMargin : 0;\n }\n else {\n y = underlineY + top;\n }\n // tslint:disable-next-line:max-line-length\n this.pageContext.fillRect(this.getScaledValue(left + elementBox.margin.left, 1), this.getScaledValue(y, 2), this.getScaledValue(elementBox.width), this.getScaledValue(underlineHeight));\n };\n /**\n * Renders strike through.\n * @param {ElementBox} elementBox\n * @param {number} left\n * @param {number} top\n * @param {Strikethrough} strikethrough\n * @param {string} color\n * @param {BaselineAlignment} baselineAlignment\n */\n // tslint:disable-next-line:max-line-length\n Renderer.prototype.renderStrikeThrough = function (elementBox, left, top, strikethrough, color, baselineAlignment) {\n var renderedHeight = elementBox.height / (baselineAlignment === 'Normal' ? 1 : 1.5);\n var topMargin = elementBox.margin.top;\n if (baselineAlignment === 'Subscript') {\n topMargin += elementBox.height - renderedHeight;\n }\n top += topMargin > 0 ? topMargin : 0;\n var lineHeight = renderedHeight / 20;\n var y = (renderedHeight / 2) + (0.5 * lineHeight);\n var lineCount = 0;\n if (strikethrough === 'DoubleStrike') {\n y -= lineHeight;\n }\n while (lineCount < (strikethrough === 'DoubleStrike' ? 2 : 1)) {\n lineCount++;\n // tslint:disable-next-line:max-line-length\n this.pageContext.fillRect(this.getScaledValue(left + elementBox.margin.left, 1), this.getScaledValue(y + top, 2), this.getScaledValue(elementBox.width), this.getScaledValue(lineHeight));\n y += 2 * lineHeight;\n }\n };\n /**\n * Renders image element box.\n * @param {ImageElementBox} elementBox\n * @param {number} left\n * @param {number} top\n * @param {number} underlineY\n */\n // tslint:disable-next-line:max-line-length\n Renderer.prototype.renderImageElementBox = function (elementBox, left, top, underlineY) {\n var topMargin = elementBox.margin.top;\n var leftMargin = elementBox.margin.left;\n var color = 'black';\n this.pageContext.textBaseline = 'top';\n var widgetWidth = 0;\n var isClipped = false;\n if (topMargin < 0 || elementBox.line.paragraph.width < elementBox.width) {\n var containerWid = elementBox.line.paragraph.containerWidget;\n // if (containerWid instanceof BodyWidget) {\n // widgetWidth = containerWid.width + containerWid.x;\n // } else \n if (containerWid instanceof TableCellWidget) {\n var leftIndent = 0;\n if (containerWid.childWidgets[0] instanceof ParagraphWidget) {\n var paraAdv = containerWid.childWidgets[0];\n leftIndent = paraAdv.paragraphFormat.leftIndent;\n }\n widgetWidth = containerWid.width + containerWid.margin.left - containerWid.leftBorderWidth - leftIndent;\n isClipped = true;\n // tslint:disable-next-line:max-line-length\n this.clipRect(left + leftMargin, top + topMargin, this.getScaledValue(widgetWidth), this.getScaledValue(containerWid.height));\n }\n }\n if (elementBox.isMetaFile) {\n /* tslint:disable:no-empty */\n }\n else {\n // tslint:disable-next-line:max-line-length\n this.pageContext.drawImage(elementBox.element, this.getScaledValue(left + leftMargin, 1), this.getScaledValue(top + topMargin, 2), this.getScaledValue(elementBox.width), this.getScaledValue(elementBox.height));\n }\n if (isClipped) {\n this.pageContext.restore();\n }\n };\n /**\n * Renders table outline.\n * @param {TableWidget} tableWidget\n */\n Renderer.prototype.renderTableOutline = function (tableWidget) {\n var layout = new Layout(this.viewer);\n var table = tableWidget;\n tableWidget.width = this.viewer.layout.getTableWidth(table);\n var border = layout.getTableTopBorder(table.tableFormat.borders);\n var lineWidth = 0;\n //ToDo: Need to draw the borders based on the line style.\n // if (!isNullOrUndefined(border )) {\n lineWidth = HelperMethods.convertPointToPixel(border.getLineWidth());\n // tslint:disable-next-line:max-line-length\n this.renderSingleBorder(border, tableWidget.x - tableWidget.margin.left - lineWidth / 2, tableWidget.y, tableWidget.x - tableWidget.margin.left - lineWidth / 2, tableWidget.y + tableWidget.height, lineWidth);\n // }\n border = layout.getTableTopBorder(table.tableFormat.borders);\n lineWidth = 0;\n // if (!isNullOrUndefined(border )) {\n lineWidth = HelperMethods.convertPointToPixel(border.getLineWidth());\n // tslint:disable-next-line:max-line-length\n this.renderSingleBorder(border, tableWidget.x - tableWidget.margin.left - lineWidth, tableWidget.y - lineWidth / 2, tableWidget.x + tableWidget.width + lineWidth + tableWidget.margin.right, tableWidget.y - lineWidth / 2, lineWidth);\n // }\n border = layout.getTableRightBorder(table.tableFormat.borders);\n lineWidth = 0;\n // if (!isNullOrUndefined(border )) {\n lineWidth = HelperMethods.convertPointToPixel(border.getLineWidth());\n // tslint:disable-next-line:max-line-length\n this.renderSingleBorder(border, tableWidget.x + tableWidget.width + tableWidget.margin.right + lineWidth / 2, tableWidget.y, tableWidget.x + tableWidget.width + tableWidget.margin.right + lineWidth / 2, tableWidget.y + tableWidget.height, lineWidth);\n // }\n border = layout.getTableBottomBorder(table.tableFormat.borders);\n lineWidth = 0;\n // if (!isNullOrUndefined(border )) {\n lineWidth = HelperMethods.convertPointToPixel(border.getLineWidth());\n // tslint:disable-next-line:max-line-length\n this.renderSingleBorder(border, tableWidget.x - tableWidget.margin.left - lineWidth, tableWidget.y + tableWidget.height - lineWidth / 2, tableWidget.x + tableWidget.width + lineWidth + tableWidget.margin.right, tableWidget.y + tableWidget.height - lineWidth / 2, lineWidth);\n // }\n };\n /**\n * Renders table cell outline.\n * @param {LayoutViewer} viewer\n * @param {TableCellWidget} cellWidget\n */\n Renderer.prototype.renderTableCellOutline = function (viewer, cellWidget) {\n var layout = viewer.layout;\n var borders = undefined;\n var tableCell = cellWidget;\n var cellTopMargin = 0;\n var cellBottomMargin = 0;\n var cellLeftMargin = 0;\n var cellRightMargin = 0;\n var height = 0;\n borders = tableCell.cellFormat.borders;\n if (cellWidget.containerWidget instanceof TableRowWidget) {\n cellBottomMargin = cellWidget.margin.bottom - cellWidget.containerWidget.bottomBorderWidth;\n cellTopMargin = cellWidget.margin.top - cellWidget.containerWidget.topBorderWidth;\n }\n cellLeftMargin = cellWidget.margin.left - cellWidget.leftBorderWidth;\n cellRightMargin = cellWidget.margin.right - cellWidget.rightBorderWidth;\n if (!isNullOrUndefined(tableCell.ownerRow) && tableCell.ownerRow.rowFormat.heightType === 'Exactly') {\n height = HelperMethods.convertPointToPixel(tableCell.ownerRow.rowFormat.height) + cellTopMargin + cellBottomMargin;\n }\n else {\n if (!isNullOrUndefined(tableCell.ownerRow) && [tableCell.ownerRow].length <= 1) {\n // tslint:disable-next-line:max-line-length\n height = Math.max(HelperMethods.convertPointToPixel(tableCell.ownerRow.rowFormat.height), cellWidget.height) + cellTopMargin + cellBottomMargin;\n }\n else {\n height = cellWidget.height + cellTopMargin + cellBottomMargin;\n }\n }\n this.renderCellBackground(height, cellWidget);\n var border = TableCellWidget.getCellLeftBorder(tableCell);\n var lineWidth = 0;\n // if (!isNullOrUndefined(border )) { \n lineWidth = HelperMethods.convertPointToPixel(border.getLineWidth()); //Renders the cell left border.\n // tslint:disable-next-line:max-line-length\n this.renderSingleBorder(border, cellWidget.x - cellLeftMargin - lineWidth, cellWidget.y - cellTopMargin, cellWidget.x - cellLeftMargin - lineWidth, cellWidget.y + cellWidget.height + cellBottomMargin, lineWidth);\n // }\n border = TableCellWidget.getCellTopBorder(tableCell);\n // if (!isNullOrUndefined(border )) { //Renders the cell top border. \n lineWidth = HelperMethods.convertPointToPixel(border.getLineWidth());\n // tslint:disable-next-line:max-line-length\n this.renderSingleBorder(border, cellWidget.x - cellWidget.margin.left, cellWidget.y - cellWidget.margin.top + lineWidth / 2, cellWidget.x + cellWidget.width + cellWidget.margin.right, cellWidget.y - cellWidget.margin.top + lineWidth / 2, lineWidth);\n // }\n if (tableCell.ownerTable.tableFormat.cellSpacing > 0 || tableCell.cellIndex === tableCell.ownerRow.childWidgets.length - 1) {\n border = TableCellWidget.getCellRightBorder(tableCell);\n // if (!isNullOrUndefined(border )) { //Renders the cell right border. \n lineWidth = HelperMethods.convertPointToPixel(border.getLineWidth());\n // tslint:disable-next-line:max-line-length\n this.renderSingleBorder(border, cellWidget.x + cellWidget.width + cellWidget.margin.right - lineWidth / 2, cellWidget.y - cellTopMargin, cellWidget.x + cellWidget.width + cellWidget.margin.right - lineWidth / 2, cellWidget.y + cellWidget.height + cellBottomMargin, lineWidth);\n // }\n }\n var nextRow = tableCell.ownerRow.nextWidget;\n //Specifies the next row is within the current table widget.\n //True means current row is not rendered at page end; Otherwise False.\n var nextRowIsInCurrentTableWidget = false;\n if (!isNullOrUndefined(nextRow)) {\n var nextRowWidget = undefined;\n // if (viewer.renderedElements.containsKey(nextRow) && viewer.renderedElements.get(nextRow).length > 0) {\n nextRowWidget = nextRow;\n // }\n if (nextRowWidget instanceof TableRowWidget) {\n // tslint:disable-next-line:max-line-length\n if (cellWidget.containerWidget instanceof TableRowWidget && cellWidget.containerWidget.containerWidget instanceof TableWidget) {\n nextRowIsInCurrentTableWidget = cellWidget.containerWidget.containerWidget.childWidgets.indexOf(nextRowWidget) !== -1;\n }\n }\n }\n if (tableCell.ownerTable.tableFormat.cellSpacing > 0 || tableCell.ownerRow.rowIndex === tableCell.ownerTable.childWidgets.length - 1\n || (tableCell.cellFormat.rowSpan > 1\n && tableCell.ownerRow.rowIndex + tableCell.cellFormat.rowSpan === tableCell.ownerTable.childWidgets.length) ||\n !nextRowIsInCurrentTableWidget) {\n // tslint:disable-next-line:max-line-length\n border = (tableCell.cellFormat.rowSpan > 1 && tableCell.ownerRow.rowIndex + tableCell.cellFormat.rowSpan === tableCell.ownerTable.childWidgets.length) ?\n //true part for vertically merged cells specifically.\n tableCell.getBorderBasedOnPriority(tableCell.cellFormat.borders.bottom, TableCellWidget.getCellBottomBorder(tableCell))\n //false part for remaining cases that has been handled inside method. \n : TableCellWidget.getCellBottomBorder(tableCell);\n // if (!isNullOrUndefined(border )) {\n //Renders the cell bottom border.\n lineWidth = HelperMethods.convertPointToPixel(border.getLineWidth());\n // tslint:disable-next-line:max-line-length\n this.renderSingleBorder(border, cellWidget.x - cellWidget.margin.left, cellWidget.y + cellWidget.height + cellBottomMargin + lineWidth / 2, cellWidget.x + cellWidget.width + cellWidget.margin.right, cellWidget.y + cellWidget.height + cellBottomMargin + lineWidth / 2, lineWidth);\n // }\n }\n border = layout.getCellDiagonalUpBorder(tableCell);\n // if (!isNullOrUndefined(border )) {\n //Renders the cell diagonal up border.\n lineWidth = HelperMethods.convertPointToPixel(border.getLineWidth());\n if (lineWidth > 0) {\n // tslint:disable-next-line:max-line-length\n this.renderSingleBorder(border, cellWidget.x - cellLeftMargin, cellWidget.y + cellWidget.height + cellBottomMargin, cellWidget.x + cellWidget.width + cellRightMargin, cellWidget.y - cellTopMargin, lineWidth);\n // }\n }\n border = layout.getCellDiagonalDownBorder(tableCell);\n // if (!isNullOrUndefined(border )) {\n //Renders the cell diagonal down border.\n lineWidth = HelperMethods.convertPointToPixel(border.getLineWidth());\n if (lineWidth > 0) {\n // tslint:disable-next-line:max-line-length\n this.renderSingleBorder(border, cellWidget.x - cellLeftMargin, cellWidget.y - cellTopMargin, cellWidget.x + cellWidget.width + cellRightMargin, cellWidget.y + cellWidget.height + cellBottomMargin, lineWidth);\n }\n // }\n };\n /**\n * Renders cell background.\n * @param {number} height\n * @param {TableCellWidget} cellWidget\n */\n Renderer.prototype.renderCellBackground = function (height, cellWidget) {\n var cellFormat = cellWidget.cellFormat;\n var bgColor = cellFormat.shading.backgroundColor === '#ffffff' ?\n cellWidget.ownerTable.tableFormat.shading.backgroundColor : cellFormat.shading.backgroundColor;\n this.pageContext.beginPath();\n if (bgColor !== 'empty') {\n this.pageContext.fillStyle = this.getColor(bgColor);\n var left = cellWidget.x - cellWidget.margin.left + cellWidget.leftBorderWidth;\n var top_1 = cellWidget.y - HelperMethods.convertPointToPixel(cellWidget.topMargin);\n // tslint:disable-next-line:max-line-length\n var width = cellWidget.width + cellWidget.margin.left + cellWidget.margin.right - cellWidget.leftBorderWidth - cellWidget.rightBorderWidth;\n // tslint:disable-next-line:max-line-length\n this.pageContext.fillRect(this.getScaledValue(left, 1), this.getScaledValue(top_1, 2), this.getScaledValue(width), this.getScaledValue(height));\n this.pageContext.closePath();\n }\n };\n /**\n * Renders single border.\n * @param {WBorder} border\n * @param {number} startX\n * @param {number} startY\n * @param {number} endX\n * @param {number} endY\n * @param {number} lineWidth\n */\n // tslint:disable-next-line:max-line-length\n Renderer.prototype.renderSingleBorder = function (border, startX, startY, endX, endY, lineWidth) {\n this.pageContext.beginPath();\n this.pageContext.moveTo(this.getScaledValue(startX, 1), this.getScaledValue(startY, 2));\n this.pageContext.lineTo(this.getScaledValue(endX, 1), this.getScaledValue(endY, 2));\n this.pageContext.lineWidth = this.getScaledValue(lineWidth);\n // set line color\n this.pageContext.strokeStyle = border.color;\n if (lineWidth > 0) {\n this.pageContext.stroke();\n }\n this.pageContext.closePath();\n };\n /**\n * Gets scaled value.\n * @param {number} value\n * @param {number} type\n * @private\n */\n Renderer.prototype.getScaledValue = function (value, type) {\n if (this.isPrinting) {\n return value;\n }\n if (isNullOrUndefined(type)) {\n type = 0;\n }\n var x = value * this.viewer.zoomFactor;\n return x + (type === 1 ? this.pageLeft : (type === 2 ? this.pageTop : 0));\n };\n /**\n * Destroys the internal objects which is maintained.\n */\n Renderer.prototype.destroy = function () {\n this.viewer = undefined;\n if (!isNullOrUndefined(this.pageCanvasIn)) {\n this.pageCanvasIn.innerHTML = '';\n }\n this.pageCanvasIn = undefined;\n };\n return Renderer;\n}());\nexport { Renderer };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { WCharacterFormat } from '../index';\nimport { HelperMethods } from '../editor/editor-helper';\n/**\n * @private\n */\nvar TextHelper = /** @class */ (function () {\n function TextHelper(viewer) {\n this.owner = viewer;\n if (!isNullOrUndefined(viewer)) {\n this.context = viewer.containerContext;\n }\n }\n Object.defineProperty(TextHelper.prototype, \"paragraphMark\", {\n get: function () {\n return '¶';\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TextHelper.prototype, \"lineBreakMark\", {\n get: function () {\n return '↲';\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @private\n */\n TextHelper.prototype.getParagraphMarkWidth = function (characterFormat) {\n return this.getWidth(this.paragraphMark, characterFormat);\n };\n /**\n * @private\n */\n TextHelper.prototype.getParagraphMarkSize = function (characterFormat) {\n // Gets the text element's width;\n var width = this.getWidth(this.paragraphMark, characterFormat);\n var height = 0;\n var baselineOffset = 0;\n // Calculate the text element's height and baseline offset.\n var textHelper = this.getHeight(characterFormat);\n return {\n 'Width': width, 'Height': textHelper.Height, 'BaselineOffset': textHelper.BaselineOffset\n };\n };\n /**\n * @private\n */\n TextHelper.prototype.getTextSize = function (elementBox, characterFormat) {\n // Gets the text element's width;\n var textTrimEndWidth = 0;\n textTrimEndWidth = this.getWidth(elementBox.text, characterFormat);\n elementBox.width = textTrimEndWidth;\n // Calculate the text element's height and baseline offset.\n var textHelper = this.getHeight(characterFormat);\n elementBox.height = textHelper.Height;\n elementBox.baselineOffset = textHelper.BaselineOffset;\n if (elementBox.text[elementBox.text.length - 1] === ' ') {\n textTrimEndWidth = this.getWidth(HelperMethods.trimEnd(elementBox.text), characterFormat);\n }\n return textTrimEndWidth;\n };\n /**\n * @private\n */\n TextHelper.prototype.getHeight = function (characterFormat) {\n // Get character format property as below predefined structure to make it easy to check and retrieve\n // Predefined static structure `[FontName];[FontSize];bold;italic` to maintain as key in the collection \n var key = this.getFormatText(characterFormat);\n if (!isNullOrUndefined(this.owner.heightInfoCollection[key])) {\n return this.owner.heightInfoCollection[key];\n }\n var sizeInfo = this.getHeightInternal(characterFormat);\n this.owner.heightInfoCollection[key] = sizeInfo;\n return sizeInfo;\n };\n /**\n * @private\n */\n TextHelper.prototype.getFormatText = function (characterFormat) {\n var formatText = characterFormat.fontFamily.toLocaleLowerCase();\n formatText += ';' + characterFormat.fontSize;\n if (characterFormat.bold) {\n formatText += ';' + 'bold';\n }\n if (characterFormat.italic) {\n formatText += ';' + 'italic';\n }\n return formatText;\n };\n /**\n * @private\n */\n TextHelper.prototype.getHeightInternal = function (characterFormat) {\n var textHeight = 0;\n var baselineOffset = 0;\n var spanElement = document.createElement('span');\n spanElement.id = 'tempSpan';\n spanElement.style.whiteSpace = 'nowrap';\n spanElement.innerText = 'm';\n this.applyStyle(spanElement, characterFormat);\n var body = document.getElementsByTagName('body');\n var parentDiv = document.createElement('div');\n parentDiv.style.display = 'inline-block';\n var tempDiv = document.createElement('div');\n tempDiv.setAttribute('style', 'display:inline-block;width: 1px; height: 0px;vertical-align: baseline;');\n parentDiv.appendChild(spanElement);\n parentDiv.appendChild(tempDiv);\n document.body.appendChild(parentDiv);\n // Sets the text element's height.\n textHeight = spanElement.offsetHeight;\n // Calculate the text element's baseline offset.\n var textTopVal = spanElement.offsetTop;\n var tempDivTopVal = tempDiv.offsetTop;\n baselineOffset = tempDivTopVal - textTopVal;\n document.body.removeChild(parentDiv);\n return { 'Height': textHeight, 'BaselineOffset': baselineOffset };\n };\n /**\n * @private\n */\n TextHelper.prototype.measureTextExcludingSpaceAtEnd = function (text, characterFormat) {\n return this.getWidth(HelperMethods.trimEnd(text), characterFormat);\n };\n /**\n * @private\n */\n TextHelper.prototype.getWidth = function (text, characterFormat) {\n if (text.match('\\v')) {\n text.replace('\\v', this.lineBreakMark);\n }\n var bold = '';\n var italic = '';\n var fontFamily = '';\n var fontSize = characterFormat.fontSize;\n bold = characterFormat.bold ? 'bold' : '';\n italic = characterFormat.italic ? 'italic' : '';\n fontFamily = characterFormat.fontFamily;\n fontSize = fontSize === 0 ? 0.5 : fontSize / (characterFormat.baselineAlignment === 'Normal' ? 1 : 1.5);\n this.context.font = bold + ' ' + italic + ' ' + fontSize + 'pt' + ' ' + fontFamily;\n return this.context.measureText(text).width;\n };\n /**\n * @private\n */\n TextHelper.prototype.applyStyle = function (spanElement, characterFormat) {\n if (!isNullOrUndefined(spanElement) && !isNullOrUndefined(characterFormat)) {\n if (characterFormat.fontFamily !== '') {\n spanElement.style.fontFamily = characterFormat.fontFamily;\n }\n var fontSize = characterFormat.fontSize;\n if (fontSize <= 0.5) {\n fontSize = 0.5;\n }\n spanElement.style.fontSize = fontSize.toString() + 'pt';\n if (characterFormat.bold) {\n spanElement.style.fontWeight = 'bold';\n }\n if (characterFormat.italic) {\n spanElement.style.fontStyle = 'italic';\n }\n }\n };\n /**\n * @private\n */\n TextHelper.prototype.measureText = function (text, characterFormat) {\n // Gets the text element's width;\n var width = this.getWidth(text, characterFormat);\n var height = 0;\n var baselineOffset = 0;\n // Calculate the text element's height and baseline offset.\n var textHelper = this.getHeight(characterFormat);\n return {\n 'Width': width, 'Height': textHelper.Height, 'BaselineOffset': textHelper.BaselineOffset\n };\n };\n /**\n * @private\n */\n TextHelper.prototype.updateTextSize = function (elementBox, paragraph) {\n var format = new WCharacterFormat(undefined);\n var listCharacterFormat = elementBox.listLevel.characterFormat;\n var breakCharacterFormat = paragraph.characterFormat;\n format.fontSize = listCharacterFormat.fontSize === 11 ? breakCharacterFormat.fontSize : listCharacterFormat.fontSize;\n format.fontFamily = listCharacterFormat.fontFamily === 'Verdana' ? breakCharacterFormat.fontFamily\n : listCharacterFormat.fontFamily;\n var bold = '';\n var italic = '';\n var baselineAlignment = listCharacterFormat.baselineAlignment === 'Normal' ?\n breakCharacterFormat.baselineAlignment : listCharacterFormat.baselineAlignment;\n bold = listCharacterFormat.bold ? 'bold' : breakCharacterFormat.bold ? 'bold' : '';\n italic = listCharacterFormat.italic ? 'italic' : breakCharacterFormat.italic ? 'italic' : '';\n format.baselineAlignment = baselineAlignment;\n if (bold) {\n format.bold = true;\n }\n if (italic) {\n format.italic = true;\n }\n elementBox.width = this.getWidth(elementBox.text, format);\n // Calculate the text element's height and baseline offset.\n var textHelper = this.getHeight(format);\n elementBox.height = textHelper.Height;\n elementBox.baselineOffset = textHelper.BaselineOffset;\n };\n TextHelper.prototype.destroy = function () {\n this.owner = undefined;\n this.context = undefined;\n };\n return TextHelper;\n}());\nexport { TextHelper };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * @private\n */\nvar Zoom = /** @class */ (function () {\n function Zoom(viewer) {\n var _this = this;\n this.onMouseWheelInternal = function (event) {\n if (event.ctrlKey === true) {\n event.preventDefault();\n var pageX = event.pageX - _this.viewer.viewerContainer.offsetLeft;\n if (pageX < _this.viewer.pageContainer.offsetWidth) {\n var wheel = navigator.userAgent.match('Firefox') ? event.detail < 0 : event.wheelDelta > 0;\n var zoomFactor = _this.viewer.zoomFactor;\n if (wheel) {\n if (zoomFactor <= 4.90) {\n zoomFactor += .10;\n }\n else {\n zoomFactor = 5.00;\n }\n }\n else {\n if (zoomFactor >= .20) {\n zoomFactor -= .10;\n }\n else {\n zoomFactor = 0.10;\n }\n }\n _this.viewer.zoomFactor = zoomFactor;\n }\n }\n };\n this.viewer = viewer;\n }\n Zoom.prototype.setZoomFactor = function (value) {\n this.onZoomFactorChanged();\n if (!isNullOrUndefined(this.viewer.selection)) {\n this.viewer.selection.updateCaretPosition();\n }\n this.viewer.updateTouchMarkPosition();\n if (!isNullOrUndefined(this.viewer.owner.imageResizerModule)) {\n this.viewer.owner.imageResizerModule.updateImageResizerPosition();\n }\n this.viewer.owner.fireZoomFactorChange();\n };\n //Zoom Implementation Starts\n Zoom.prototype.onZoomFactorChanged = function () {\n if (this.viewer.zoomFactor > 5) {\n this.viewer.zoomFactor = 5;\n }\n else if (this.viewer.zoomFactor < 0.1) {\n this.viewer.zoomFactor = 0.1;\n }\n this.zoom();\n };\n Zoom.prototype.zoom = function () {\n var viewer = this.viewer;\n viewer.clearContent();\n viewer.handleZoom();\n viewer.updateFocus();\n };\n return Zoom;\n}());\nexport { Zoom };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { Dictionary } from '../../base/dictionary';\nimport { WAbstractList } from '../list/abstract-list';\nimport { WLevelOverride } from '../list/level-override';\nimport { WCharacterFormat, WParagraphFormat, WStyles } from '../format/index';\nimport { Layout } from './layout';\nimport { Renderer } from './render';\nimport { createElement, Browser } from '@syncfusion/ej2-base';\nimport { Page, Rect, ListTextElementBox, ParagraphWidget, HeaderFooterWidget } from './page';\nimport { LineWidget, TableWidget } from './page';\nimport { HelperMethods, Point } from '../editor/editor-helper';\nimport { TextHelper } from './text-helper';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Zoom } from './zooming';\nimport { Dialog } from '@syncfusion/ej2-popups';\n/**\n * @private\n */\nvar LayoutViewer = /** @class */ (function () {\n //#endregion\n function LayoutViewer(owner) {\n var _this = this;\n /**\n * @private\n */\n this.textWrap = true;\n /**\n * @private\n */\n this.currentPage = undefined;\n this.selectionStartPageIn = undefined;\n this.selectionEndPageIn = undefined;\n /**\n * @private\n */\n this.fieldStacks = [];\n /**\n * @private\n */\n this.splittedCellWidgets = [];\n /**\n * @private\n */\n this.tableLefts = [];\n this.tapCount = 0;\n this.timer = -1;\n this.isTimerStarted = false;\n /**\n * @private\n */\n this.isFirstLineFitInShiftWidgets = false;\n /**\n * @private\n */\n this.preZoomFactor = 0;\n /**\n * @private\n */\n this.preDifference = -1;\n /**\n * @private\n */\n this.fieldEndParagraph = undefined;\n /**\n * @private\n */\n this.fieldToLayout = undefined;\n /**\n * @private\n */\n this.backgroundColor = '#FFFFFF';\n /**\n * @private\n */\n this.containerTop = 0;\n /**\n * @private\n */\n this.containerLeft = 0;\n // Event \n /**\n * @private\n */\n this.isMouseDown = false;\n /**\n * @private\n */\n this.isSelectionChangedOnMouseMoved = false;\n /**\n * @private\n */\n this.isControlPressed = false;\n /**\n * @private\n */\n this.isTouchInput = false;\n /**\n * @private\n */\n this.useTouchSelectionMark = false;\n /**\n * @private\n */\n this.touchDownOnSelectionMark = 0;\n /**\n * @private\n */\n this.isCompositionStart = false;\n /**\n * @private\n */\n this.isCompositionUpdated = false;\n /**\n * @private\n */\n this.isCompositionCanceled = false;\n /**\n * @private\n */\n this.isCompositionEnd = false;\n /**\n * @private\n */\n this.prefix = '';\n /**\n * @private\n */\n this.suffix = '';\n /**\n * @private\n */\n this.fields = [];\n /**\n * @private\n */\n this.heightInfoCollection = {};\n /**\n * @private\n */\n this.defaultTabWidth = 36;\n /**\n * @private\n */\n this.lists = [];\n /**\n * @private\n */\n this.abstractLists = [];\n /**\n * @private\n */\n this.styles = new WStyles();\n /**\n * @private\n */\n this.preDefinedStyles = undefined;\n /**\n * @private\n */\n this.isRowOrCellResizing = false;\n this.isMouseDownInFooterRegion = false;\n this.pageFitTypeIn = 'None';\n /**\n * @private\n */\n this.fieldCollection = [];\n /**\n * @private\n */\n this.isPageField = false;\n /**\n * @private\n */\n this.mouseDownOffset = new Point(0, 0);\n this.zoomFactorInternal = 1;\n /**\n * Fires when composition starts.\n * @private\n */\n this.compositionStart = function (event) {\n event.preventDefault();\n _this.isCompositionStart = true;\n };\n /**\n * Fires on every input during composition.\n * @private\n */\n this.compositionUpdated = function (event) {\n event.preventDefault();\n _this.isCompositionUpdated = true;\n };\n /**\n * Fires when user selects a character/word and finalizes the input.\n * @private\n */\n this.compositionEnd = function (event) {\n event.preventDefault();\n _this.isCompositionUpdated = false;\n _this.isCompositionEnd = true;\n };\n // tslint:disable:no-any \n this.onImageResizer = function (args) {\n if (!isNullOrUndefined(_this.owner.imageResizerModule) && _this.owner.imageResizerModule.isImageResizerVisible\n && _this.owner.imageResizerModule.isImageResizing) {\n if (args instanceof MouseEvent) {\n _this.onMouseUpInternal(args);\n }\n else if (args instanceof TouchEvent) {\n _this.onTouchUpInternal(args);\n }\n }\n };\n // tslint:enable:no-any \n this.onTextInputInternal = function (event) {\n if (!_this.owner.isReadOnlyMode) {\n _this.owner.editorModule.onTextInputInternal(event);\n }\n else {\n _this.editableDiv.innerText = '';\n }\n };\n /**\n * Fired on paste.\n * @param {ClipboardEvent} event\n * @private\n */\n this.onPaste = function (event) {\n if (!_this.owner.isReadOnlyMode) {\n _this.owner.editorModule.pasteInternal(event);\n }\n _this.editableDiv.innerText = '';\n event.preventDefault();\n };\n /**\n * Fires when editable div loses focus.\n * @private\n */\n this.onFocusOut = function () {\n if (!isNullOrUndefined(_this.selection)) {\n if (_this.owner.contextMenuModule && _this.owner.contextMenuModule.contextMenuInstance &&\n _this.owner.contextMenuModule.contextMenuInstance.element.style.display === 'block') {\n return;\n }\n _this.selection.hideCaret();\n }\n };\n /**\n * Updates focus to editor area.\n * @private\n */\n this.updateFocus = function () {\n if (_this.selection) {\n _this.editableDiv.focus();\n _this.selection.showCaret();\n }\n };\n /**\n * Fires on scrolling.\n */\n this.scrollHandler = function () {\n _this.clearContent();\n _this.updateScrollBars();\n var vtHeight = _this.containerTop + _this.visibleBounds.height;\n if (vtHeight > _this.pageContainer.offsetHeight) {\n _this.viewerContainer.scrollTop = _this.containerTop - (vtHeight - _this.pageContainer.offsetHeight);\n }\n var viewer = _this;\n if (viewer instanceof PageLayoutViewer && !isNullOrUndefined(_this.owner)) {\n _this.owner.fireViewChange();\n }\n };\n /**\n * Fires when the window gets resized.\n * @private\n */\n this.onWindowResize = function () {\n var viewer = _this;\n var resizeTimer;\n /* tslint:disable:align */\n resizeTimer = setTimeout(function () {\n if (!isNullOrUndefined(viewer.owner) && !isNullOrUndefined(_this.owner.element)) {\n viewer.updateViewerSizeInternal(document.getElementById(viewer.owner.element.id));\n viewer.updateScrollBars();\n if (!isNullOrUndefined(_this.selection)) {\n _this.selection.updateCaretPosition();\n }\n viewer.updateTouchMarkPosition();\n if (viewer.owner.contextMenuModule && viewer.owner.contextMenuModule.contextMenuInstance) {\n viewer.owner.contextMenuModule.contextMenuInstance.close();\n }\n if (resizeTimer) {\n clearTimeout(resizeTimer);\n }\n }\n }, 100);\n };\n /**\n * @private\n */\n this.onContextMenu = function (event) {\n if (_this.owner.contextMenuModule) {\n _this.owner.contextMenuModule.onContextMenuInternal(event);\n }\n };\n /**\n * Called on mouse down.\n * @param {MouseEvent} event\n * @private\n */\n this.onMouseDownInternal = function (event) {\n if (_this.isTouchInput || event.offsetX > (_this.visibleBounds.width - (_this.visibleBounds.width - _this.viewerContainer.clientWidth))\n || event.offsetY > (_this.visibleBounds.height - (_this.visibleBounds.height - _this.viewerContainer.clientHeight))) {\n return;\n }\n if (!isNullOrUndefined(_this.selection)) {\n _this.updateCursor(event);\n // tslint:disable-next-line:max-line-length\n if (_this.isLeftButtonPressed(event) && !_this.owner.isReadOnlyMode && _this.owner.enableImageResizerMode && !isNullOrUndefined(_this.owner.imageResizerModule.selectedResizeElement)) {\n _this.owner.imageResizerModule.isImageResizing = true;\n }\n event.preventDefault();\n if (!_this.isTouchInput) {\n _this.selection.hideCaret();\n }\n var cursorPoint = new Point(event.offsetX, event.offsetY);\n var touchPoint = _this.findFocusedPage(cursorPoint, true);\n _this.mouseDownOffset.x = touchPoint.x;\n _this.mouseDownOffset.y = touchPoint.y;\n // tslint:disable-next-line:max-line-length\n _this.isMouseDownInFooterRegion = _this.selection.isCursorInsidePageRect(cursorPoint, _this.currentPage) && _this.selection.isCursorInFooterRegion(cursorPoint, _this.currentPage);\n _this.isSelectionChangedOnMouseMoved = false;\n if (!_this.owner.isReadOnlyMode && (_this.owner.editorModule.tableResize.isInCellResizerArea(touchPoint) ||\n _this.owner.editorModule.tableResize.isInRowResizerArea(touchPoint))) {\n _this.selection.hideCaret();\n _this.isMouseDown = true;\n _this.isSelectionChangedOnMouseMoved = false;\n if (_this.isLeftButtonPressed(event)) {\n _this.owner.editorModule.tableResize.startingPoint.x = touchPoint.x;\n _this.owner.editorModule.tableResize.startingPoint.y = touchPoint.y;\n _this.owner.editorModule.tableResize.handleResize(touchPoint);\n }\n return;\n }\n if (event.ctrlKey) {\n _this.isControlPressed = true;\n }\n if (_this.owner.selection.isEmpty) {\n _this.useTouchSelectionMark = false;\n }\n if (event.which === 3 && !_this.owner.selection.isEmpty\n && _this.selection.checkCursorIsInSelection(_this.getLineWidget(touchPoint), touchPoint)) {\n event.preventDefault();\n return;\n }\n _this.isTouchInput = false;\n _this.isMouseDown = true;\n _this.updateFocus();\n /* tslint:disable:align */\n _this.timer = setTimeout(function () {\n _this.tapCount++;\n if (_this.tapCount === 4) {\n _this.tapCount = 1;\n }\n }, 200);\n }\n };\n /**\n * Called on mouse move.\n * @param {MouseEvent} event\n * @private\n */\n this.onMouseMoveInternal = function (event) {\n event.preventDefault();\n if (!isNullOrUndefined(_this.selection)) {\n //For image Resizing\n if (!_this.owner.isReadOnlyMode && _this.owner.enableImageResizerMode\n && _this.owner.imageResizerModule.isImageResizing) {\n if (!_this.owner.imageResizerModule.isImageMoveToNextPage) {\n _this.owner.imageResizerModule.handleImageResizingOnMouse(event);\n }\n return;\n }\n var cursorPoint = new Point(event.offsetX, event.offsetY);\n var touchPoint = _this.findFocusedPage(cursorPoint, !_this.owner.enableHeaderAndFooter);\n if (_this.isMouseDown) {\n if (!isNullOrUndefined(_this.currentPage)) {\n var xPosition = touchPoint.x;\n var yPosition = touchPoint.y;\n if (!_this.owner.isReadOnlyMode && _this.isRowOrCellResizing) {\n _this.owner.editorModule.tableResize.handleResizing(touchPoint);\n }\n else {\n if (!(_this.isTouchInput || _this.isSelectionChangedOnMouseMoved || _this.touchDownOnSelectionMark > 0)) {\n _this.updateTextPositionForSelection(touchPoint, 1);\n }\n if (_this.isLeftButtonPressed(event)) {\n event.preventDefault();\n var touchY = yPosition;\n var textPosition = _this.owner.selection.end;\n var touchPoint_1 = new Point(xPosition, touchY);\n if (!_this.owner.enableImageResizerMode || !_this.owner.imageResizerModule.isImageResizerVisible) {\n _this.owner.selection.moveTextPosition(touchPoint_1, textPosition);\n }\n _this.isSelectionChangedOnMouseMoved = true;\n }\n }\n }\n _this.selection.checkForCursorVisibility();\n }\n if (!_this.isRowOrCellResizing && !_this.isSelectionChangedOnMouseMoved) {\n _this.updateCursor(event);\n }\n if (_this.isRowOrCellResizing) {\n _this.selection.hideCaret();\n }\n }\n };\n /**\n * Fired on double tap.\n * @param {MouseEvent} event\n * @private\n */\n this.onDoubleTap = function (event) {\n if (!isNullOrUndefined(_this.selection)) {\n _this.isTouchInput = false;\n var cursorPoint = new Point(event.offsetX, event.offsetY);\n if (_this.selection.checkAndEnableHeaderFooter(cursorPoint, _this.findFocusedPage(cursorPoint, true))) {\n return;\n }\n // tslint:disable-next-line:max-line-length\n if (_this.selection.isEmpty && !isNullOrUndefined(_this.currentPage) && !isNullOrUndefined(_this.owner.selection.start)) {\n _this.owner.selection.selectCurrentWord();\n _this.selection.checkForCursorVisibility();\n _this.tapCount = 2;\n }\n }\n };\n /**\n * Called on mouse up.\n * @param {MouseEvent} event\n * @private\n */\n this.onMouseUpInternal = function (event) {\n event.preventDefault();\n _this.isListTextSelected = false;\n var cursorPoint = new Point(event.offsetX, event.offsetY);\n var touchPoint = _this.findFocusedPage(cursorPoint, true);\n if (!isNullOrUndefined(_this.selection)) {\n var tapCount = 1;\n if (!Browser.isIE) {\n if (event.detail > 2) {\n tapCount = event.detail;\n }\n }\n else {\n tapCount = _this.tapCount;\n }\n if (_this.isRowOrCellResizing) {\n _this.owner.editorModule.tableResize.updateResizingHistory(touchPoint);\n }\n if (_this.isMouseDown && !_this.isSelectionChangedOnMouseMoved\n && !isNullOrUndefined(_this.currentPage) && !isNullOrUndefined(_this.owner.selection.start)\n && (!_this.owner.enableImageResizerMode || !_this.owner.imageResizerModule.isImageResizing)) {\n if (_this.touchDownOnSelectionMark === 0 && !_this.isRowOrCellResizing) {\n _this.updateTextPositionForSelection(touchPoint, tapCount);\n if (Browser.isIE && tapCount === 2) {\n _this.selection.checkAndEnableHeaderFooter(cursorPoint, touchPoint);\n }\n }\n _this.selection.checkForCursorVisibility();\n }\n if (!isNullOrUndefined(_this.currentPage) && !isNullOrUndefined(_this.owner.selection.start)\n && (_this.owner.selection.isEmpty || _this.owner.selection.isImageSelected) &&\n (((event.ctrlKey && _this.owner.useCtrlClickToFollowHyperlink ||\n !_this.owner.useCtrlClickToFollowHyperlink) && _this.isLeftButtonPressed(event) === true))) {\n _this.selection.navigateHyperLinkOnEvent(touchPoint, false);\n }\n if (!_this.owner.isReadOnlyMode && _this.isSelectionInListText(touchPoint)) {\n _this.selection.selectListText();\n }\n // tslint:disable-next-line:max-line-length\n if (!_this.owner.isReadOnlyMode && _this.owner.enableImageResizerMode && _this.owner.imageResizerModule.isImageResizing) {\n _this.owner.imageResizerModule.mouseUpInternal();\n _this.scrollToPosition(_this.owner.selection.start, _this.owner.selection.end);\n _this.owner.imageResizerModule.isImageResizing = false;\n _this.owner.imageResizerModule.updateHistoryForImageResizer();\n }\n // tslint:disable-next-line:max-line-length\n if (_this.owner.enableImageResizerMode && _this.owner.imageResizerModule.isImageResizerVisible && !isNullOrUndefined(_this.selection.caret)) {\n _this.selection.caret.style.display = 'none';\n }\n _this.isMouseDown = false;\n _this.isSelectionChangedOnMouseMoved = false;\n _this.isTouchInput = false;\n _this.useTouchSelectionMark = true;\n _this.isControlPressed = false;\n _this.updateFocus();\n if (_this.isListTextSelected) {\n _this.selection.hideCaret();\n }\n if (_this.owner.enableImageResizerMode) {\n var imageResizer = _this.owner.imageResizerModule;\n imageResizer.isImageResizing = false;\n imageResizer.isImageMoveToNextPage = false;\n imageResizer.leftValue = undefined;\n imageResizer.topValue = undefined;\n }\n _this.isMouseDownInFooterRegion = false;\n }\n };\n /**\n * Fired on touch start.\n * @param {TouchEvent} event\n * @private\n */\n this.onTouchStartInternal = function (event) {\n if (_this.selection) {\n _this.isCompositionStart = false;\n _this.isCompositionEnd = false;\n _this.isCompositionUpdated = false;\n _this.isCompositionCanceled = true;\n _this.isTouchInput = true;\n if (_this.isTimerStarted) {\n if (_this.tapCount === 1) {\n _this.tapCount = 2;\n }\n else {\n _this.tapCount = 3;\n _this.isTimerStarted = false;\n }\n }\n else {\n _this.isTimerStarted = true;\n _this.tapCount = 1;\n }\n if (event.touches.length === 1) {\n _this.zoomX = event.touches[0].clientX;\n _this.zoomY = event.touches[0].clientY;\n if (_this.owner.selection.isEmpty) {\n _this.useTouchSelectionMark = false;\n }\n _this.isMouseDown = true;\n _this.isSelectionChangedOnMouseMoved = false;\n var point = void 0;\n if (_this.isMouseDown) {\n point = _this.getTouchOffsetValue(event);\n }\n point = _this.findFocusedPage(point, true);\n if (_this.owner.enableImageResizerMode) {\n var resizeObj = _this.owner.imageResizerModule.getImagePointOnTouch(point);\n _this.owner.imageResizerModule.selectedResizeElement = resizeObj.selectedElement;\n }\n // tslint:disable-next-line:max-line-length\n if (_this.owner.enableImageResizerMode && !isNullOrUndefined(_this.owner.imageResizerModule.selectedResizeElement)) {\n _this.owner.imageResizerModule.isImageResizing = true;\n }\n var x = _this.owner.selection.end.location.x;\n var y = _this.selection.getCaretBottom(_this.owner.selection.end, _this.owner.selection.isEmpty) + 9;\n //TouchDownOnSelectionMark will be 2 when touch end is pressed\n _this.touchDownOnSelectionMark = ((point.y <= y && point.y >= y - 20 || point.y >= y && point.y <= y + 20)\n && (point.x <= x && point.x >= x - 20 || point.x >= x && point.x <= x + 20)) ? 1 : 0;\n if (!_this.owner.selection.isEmpty && _this.touchDownOnSelectionMark === 0) {\n x = _this.owner.selection.start.location.x;\n y = _this.selection.getCaretBottom(_this.owner.selection.start, false) + 9;\n //TouchDownOnSelectionMark will be 1 when touch start is pressed\n _this.touchDownOnSelectionMark = ((point.y <= y && point.y >= y - 20 || point.y >= y && point.y <= y + 20)\n && (point.x <= x && point.x >= x - 20 || point.x >= x && point.x <= x + 20)) ? 2 : 0;\n }\n }\n if (!isNullOrUndefined(_this.owner.contextMenuModule) && _this.owner.contextMenuModule.contextMenuInstance) {\n _this.owner.contextMenuModule.contextMenuInstance.close();\n }\n if (_this.touchDownOnSelectionMark || event.touches.length > 1) {\n event.preventDefault();\n }\n _this.timer = setTimeout(function () {\n _this.isTimerStarted = false;\n }, 200);\n }\n };\n /**\n * Fired on touch move.\n * @param {TouchEvent} event\n * @private\n */\n this.onTouchMoveInternal = function (event) {\n var touch = event.touches;\n var cursorPoint;\n if (!isNullOrUndefined(_this.selection)) {\n // tslint:disable-next-line:max-line-length\n if (_this.owner.editorModule && _this.owner.enableImageResizerMode && _this.owner.imageResizerModule.isImageResizing) {\n event.preventDefault();\n if (!_this.owner.imageResizerModule.isImageMoveToNextPage) {\n _this.owner.imageResizerModule.handleImageResizingOnTouch(event);\n _this.selection.caret.style.display = 'none';\n }\n return;\n }\n if (_this.isMouseDown) {\n cursorPoint = _this.getTouchOffsetValue(event);\n var touchPoint = _this.findFocusedPage(cursorPoint, true);\n if (_this.touchDownOnSelectionMark > 0 /*|| !this.useTouchSelectionMark*/) {\n event.preventDefault();\n var touchY = touchPoint.y;\n var textPosition = _this.owner.selection.end;\n var touchPointer = void 0;\n if (touchPoint.y <= 26) {\n touchY -= touchPoint.y < 0 ? 0 : touchPoint.y + 0.5;\n }\n else {\n touchY -= 36.5;\n }\n textPosition = _this.touchDownOnSelectionMark === 2 ? _this.selection.start : _this.selection.end;\n touchPoint = new Point(touchPoint.x, touchY);\n _this.owner.selection.moveTextPosition(touchPoint, textPosition);\n _this.isSelectionChangedOnMouseMoved = true;\n }\n _this.selection.checkForCursorVisibility();\n }\n }\n if (touch.length > 1) {\n event.preventDefault();\n _this.isMouseDown = false;\n _this.zoomX = (touch[0].clientX + touch[1].clientX) / 2;\n _this.zoomY = (touch[0].clientY + touch[1].clientY) / 2;\n // tslint:disable-next-line:max-line-length\n var currentDiff = Math.sqrt(Math.pow((touch[0].clientX - touch[1].clientX), 2) + Math.pow((touch[0].clientY - touch[1].clientY), 2));\n if (_this.preDifference > -1) {\n if (currentDiff > _this.preDifference) {\n _this.onPinchOutInternal(event);\n }\n else if (currentDiff < _this.preDifference) {\n _this.onPinchInInternal(event);\n }\n }\n else if (_this.zoomFactor < 2) {\n if (_this.preDifference !== -1) {\n if (currentDiff > _this.preDifference) {\n _this.onPinchInInternal(event);\n }\n }\n }\n else if (_this.preDifference === -1) {\n if (_this.zoomFactor > 2) {\n if (currentDiff > _this.preDifference) {\n _this.onPinchInInternal(event);\n }\n }\n }\n _this.preDifference = currentDiff;\n }\n };\n /**\n * Fired on touch up.\n * @param {TouchEvent} event\n * @private\n */\n this.onTouchUpInternal = function (event) {\n if (!isNullOrUndefined(_this.selection)) {\n var point = _this.getTouchOffsetValue(event);\n var touchPoint = _this.findFocusedPage(point, true);\n if (event.changedTouches.length === 1) {\n _this.zoomX = undefined;\n _this.zoomY = undefined;\n // tslint:disable-next-line:max-line-length\n if (_this.isMouseDown && !_this.isSelectionChangedOnMouseMoved && !isNullOrUndefined(_this.currentPage) && !isNullOrUndefined(_this.owner.selection.start)) {\n if (_this.touchDownOnSelectionMark === 0) {\n _this.updateTextPositionForSelection(new Point(touchPoint.x, touchPoint.y), _this.tapCount);\n if (_this.tapCount === 2) {\n _this.selection.checkAndEnableHeaderFooter(point, touchPoint);\n }\n }\n if (_this.owner.selection.isEmpty) {\n _this.selection.updateCaretPosition();\n }\n _this.selection.checkForCursorVisibility();\n }\n if (!isNullOrUndefined(_this.currentPage) && !isNullOrUndefined(_this.selection.start)\n && !_this.isSelectionChangedOnMouseMoved && (_this.selection.isEmpty ||\n _this.selection.isImageField() && (!_this.owner.enableImageResizerMode ||\n _this.owner.enableImageResizerMode && !_this.owner.imageResizerModule.isImageResizing))) {\n _this.selection.navigateHyperLinkOnEvent(touchPoint, true);\n }\n _this.isMouseDown = false;\n _this.touchDownOnSelectionMark = 0;\n _this.useTouchSelectionMark = true;\n _this.isSelectionChangedOnMouseMoved = false;\n }\n if (_this.owner.enableImageResizerMode && _this.owner.imageResizerModule.isImageResizing) {\n _this.owner.imageResizerModule.mouseUpInternal();\n _this.owner.imageResizerModule.isImageResizing = false;\n _this.owner.imageResizerModule.isImageMoveToNextPage = false;\n _this.scrollToPosition(_this.owner.selection.start, _this.owner.selection.end);\n _this.owner.imageResizerModule.updateHistoryForImageResizer();\n }\n // tslint:disable-next-line:max-line-length\n if (_this.owner.enableImageResizerMode && _this.owner.imageResizerModule.isImageResizerVisible && _this.isTouchInput) {\n _this.touchStart.style.display = 'none';\n _this.touchEnd.style.display = 'none';\n }\n // if (!this.owner.isReadOnlyMode && this.isSelectionInListText(touchPoint)) {\n // this.selection.selectListText();\n // }\n event.preventDefault();\n }\n _this.preDifference = -1;\n _this.isTouchInput = false;\n if (!_this.isTimerStarted) {\n _this.tapCount = 1;\n }\n if (_this.isListTextSelected) {\n _this.selection.hideCaret();\n }\n };\n /**\n * Fired on keyup event.\n * @private\n */\n this.onKeyUpInternal = function (event) {\n if (Browser.isDevice) {\n if (window.getSelection().anchorOffset !== _this.prefix.length) {\n _this.selection.setEditableDivCaretPosition(_this.editableDiv.innerText.length);\n }\n }\n if (event.ctrlKey || (event.keyCode === 17 || event.which === 17)) {\n _this.isControlPressed = false;\n }\n };\n /**\n * Fired on keydown.\n * @private\n */\n this.onKeyDownInternal = function (event) {\n var isHandled = false;\n var key = event.which || event.keyCode;\n var ctrl = (event.ctrlKey || event.metaKey) ? true : ((key === 17) ? true : false); // ctrl detection \n var shift = event.shiftKey ? event.shiftKey : ((key === 16) ? true : false); // Shift Key detection \n var alt = event.altKey ? event.altKey : ((key === 18) ? true : false); // alt key detection\n if (ctrl && !shift && !alt) {\n switch (key) {\n case 80:\n event.preventDefault();\n _this.owner.print();\n isHandled = true;\n break;\n case 83:\n event.preventDefault();\n _this.owner.save(_this.owner.documentName === '' ? 'sample' : _this.owner.documentName, 'Sfdt');\n isHandled = true;\n break;\n }\n }\n if (!isHandled && !isNullOrUndefined(_this.selection)) {\n _this.selection.onKeyDownInternal(event, ctrl, shift, alt);\n }\n if (isHandled) {\n event.preventDefault();\n }\n };\n this.owner = owner;\n this.pages = [];\n this.render = new Renderer(this);\n this.lists = [];\n this.abstractLists = [];\n this.characterFormat = new WCharacterFormat(this);\n this.paragraphFormat = new WParagraphFormat(this);\n this.renderedLists = new Dictionary();\n this.headersFooters = [];\n this.styles = new WStyles();\n this.preDefinedStyles = new Dictionary();\n this.initalizeStyles();\n this.bookmarks = new Dictionary();\n }\n Object.defineProperty(LayoutViewer.prototype, \"containerCanvas\", {\n //#region Properties\n /**\n * Gets container canvas.\n * @private\n */\n get: function () {\n if (isNullOrUndefined(this.containerCanvasIn)) {\n this.containerCanvasIn = document.createElement('canvas');\n this.containerCanvasIn.getContext('2d').save();\n }\n if (!isNullOrUndefined(this.pageContainer)\n && this.containerCanvasIn.parentElement !== this.pageContainer) {\n this.pageContainer.appendChild(this.containerCanvasIn);\n }\n return this.containerCanvasIn;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(LayoutViewer.prototype, \"selectionCanvas\", {\n /**\n * Gets selection canvas.\n * @private\n */\n get: function () {\n if (isNullOrUndefined(this.selectionCanvasIn)) {\n this.selectionCanvasIn = document.createElement('canvas');\n this.selectionCanvas.getContext('2d').save();\n }\n if (!isNullOrUndefined(this.pageContainer)\n && this.selectionCanvasIn.parentElement !== this.pageContainer) {\n this.pageContainer.appendChild(this.selectionCanvasIn);\n }\n return this.selectionCanvasIn;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(LayoutViewer.prototype, \"containerContext\", {\n /**\n * Gets container context.\n * @private\n */\n get: function () {\n return this.containerCanvas.getContext('2d');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(LayoutViewer.prototype, \"selectionContext\", {\n /**\n * Gets selection context.\n * @private\n */\n get: function () {\n return this.selectionCanvas.getContext('2d');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(LayoutViewer.prototype, \"currentRenderingPage\", {\n /**\n * Gets the current rendering page.\n */\n get: function () {\n if (this.pages.length === 0) {\n return undefined;\n }\n return this.pages[this.pages.length - 1];\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(LayoutViewer.prototype, \"visibleBounds\", {\n /**\n * Gets visible bounds.\n * @private\n */\n get: function () {\n return this.visibleBoundsIn;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(LayoutViewer.prototype, \"zoomFactor\", {\n /**\n * Gets or sets zoom factor.\n * @private\n */\n get: function () {\n return this.zoomFactorInternal;\n },\n set: function (value) {\n if (this.zoomFactorInternal !== value) {\n this.preZoomFactor = this.zoomFactor;\n this.zoomFactorInternal = value;\n this.zoomModule.setZoomFactor(value);\n this.owner.zoomFactor = value;\n }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(LayoutViewer.prototype, \"selection\", {\n /**\n * Gets the selection.\n * @private\n */\n get: function () {\n return this.owner.selection;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(LayoutViewer.prototype, \"selectionStartPage\", {\n /**\n * Gets or sets selection start page.\n * @private\n */\n get: function () {\n return this.selectionStartPageIn;\n },\n set: function (value) {\n this.selectionStartPageIn = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(LayoutViewer.prototype, \"selectionEndPage\", {\n /**\n * Gets or sets selection end page.\n * @private\n */\n get: function () {\n return this.selectionEndPageIn;\n },\n set: function (value) {\n this.selectionEndPageIn = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(LayoutViewer.prototype, \"dialog\", {\n /**\n * Gets the initialized default dialog.\n * @private\n */\n get: function () {\n if (!this.dialogInternal) {\n this.initDialog();\n }\n return this.dialogInternal;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(LayoutViewer.prototype, \"dialog2\", {\n /**\n * Gets the initialized default dialog.\n * @private\n */\n get: function () {\n if (!this.dialogInternal2) {\n this.initDialog2();\n }\n return this.dialogInternal2;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(LayoutViewer.prototype, \"pageFitType\", {\n /**\n * Gets or sets page fit type.\n * @private\n */\n get: function () {\n return this.pageFitTypeIn;\n },\n set: function (value) {\n this.pageFitTypeIn = value;\n this.onPageFitTypeChanged(this.pageFitTypeIn);\n },\n enumerable: true,\n configurable: true\n });\n LayoutViewer.prototype.initalizeStyles = function () {\n /* tslint:disable-next-line:max-line-length */\n this.preDefinedStyles.add('Normal', '{\"type\":\"Paragraph\",\"name\":\"Normal\",\"next\":\"Normal\"}');\n /* tslint:disable-next-line:max-line-length */\n this.preDefinedStyles.add('Heading 1', '{\"type\":\"Paragraph\",\"name\":\"Heading 1\",\"basedOn\":\"Normal\",\"next\":\"Normal\",\"link\":\"Heading 1 Char\",\"characterFormat\":{\"fontSize\":16.0,\"fontFamily\":\"Calibri Light\",\"fontColor\":\"#2F5496\"},\"paragraphFormat\":{\"leftIndent\":0.0,\"rightIndent\":0.0,\"firstLineIndent\":0.0,\"beforeSpacing\":12.0,\"afterSpacing\":0.0,\"lineSpacing\":1.0791666507720947,\"lineSpacingType\":\"Multiple\",\"textAlignment\":\"Left\",\"outlineLevel\":\"Level1\"}}');\n /* tslint:disable-next-line:max-line-length */\n this.preDefinedStyles.add('Heading 2', '{\"type\":\"Paragraph\",\"name\":\"Heading 2\",\"basedOn\":\"Normal\",\"next\":\"Normal\",\"link\":\"Heading 2 Char\",\"characterFormat\":{\"fontSize\":13.0,\"fontFamily\":\"Calibri Light\",\"fontColor\":\"#2F5496\"},\"paragraphFormat\":{\"leftIndent\":0.0,\"rightIndent\":0.0,\"firstLineIndent\":0.0,\"beforeSpacing\":2.0,\"afterSpacing\":0.0,\"lineSpacing\":1.0791666507720947,\"lineSpacingType\":\"Multiple\",\"textAlignment\":\"Left\",\"outlineLevel\":\"Level2\"}}');\n /* tslint:disable-next-line:max-line-length */\n this.preDefinedStyles.add('Heading 3', '{\"type\":\"Paragraph\",\"name\":\"Heading 3\",\"basedOn\":\"Normal\",\"next\":\"Normal\",\"link\":\"Heading 3 Char\",\"characterFormat\":{\"fontSize\":12.0,\"fontFamily\":\"Calibri Light\",\"fontColor\":\"#1F3763\"},\"paragraphFormat\":{\"leftIndent\":0.0,\"rightIndent\":0.0,\"firstLineIndent\":0.0,\"beforeSpacing\":2.0,\"afterSpacing\":0.0,\"lineSpacing\":1.0791666507720947,\"lineSpacingType\":\"Multiple\",\"textAlignment\":\"Left\",\"outlineLevel\":\"Level3\"}}');\n /* tslint:disable-next-line:max-line-length */\n this.preDefinedStyles.add('Heading 4', '{\"type\":\"Paragraph\",\"name\":\"Heading 4\",\"basedOn\":\"Normal\",\"next\":\"Normal\",\"link\":\"Heading 4 Char\",\"characterFormat\":{\"italic\":true,\"fontFamily\":\"Calibri Light\",\"fontColor\":\"#2F5496\"},\"paragraphFormat\":{\"leftIndent\":0.0,\"rightIndent\":0.0,\"firstLineIndent\":0.0,\"beforeSpacing\":2.0,\"afterSpacing\":0.0,\"lineSpacing\":1.0791666507720947,\"lineSpacingType\":\"Multiple\",\"textAlignment\":\"Left\",\"outlineLevel\":\"Level4\"}}');\n /* tslint:disable-next-line:max-line-length */\n this.preDefinedStyles.add('Heading 5', '{\"type\":\"Paragraph\",\"name\":\"Heading 5\",\"basedOn\":\"Normal\",\"next\":\"Normal\",\"link\":\"Heading 5 Char\",\"characterFormat\":{\"fontFamily\":\"Calibri Light\",\"fontColor\":\"#2F5496\"},\"paragraphFormat\":{\"leftIndent\":0.0,\"rightIndent\":0.0,\"firstLineIndent\":0.0,\"beforeSpacing\":2.0,\"afterSpacing\":0.0,\"lineSpacing\":1.0791666507720947,\"lineSpacingType\":\"Multiple\",\"textAlignment\":\"Left\",\"outlineLevel\":\"Level5\"}}');\n /* tslint:disable-next-line:max-line-length */\n this.preDefinedStyles.add('Heading 6', '{\"type\":\"Paragraph\",\"name\":\"Heading 6\",\"basedOn\":\"Normal\",\"next\":\"Normal\",\"link\":\"Heading 6 Char\",\"characterFormat\":{\"fontFamily\":\"Calibri Light\",\"fontColor\":\"#1F3763\"},\"paragraphFormat\":{\"leftIndent\":0.0,\"rightIndent\":0.0,\"firstLineIndent\":0.0,\"beforeSpacing\":2.0,\"afterSpacing\":0.0,\"lineSpacing\":1.0791666507720947,\"lineSpacingType\":\"Multiple\",\"textAlignment\":\"Left\",\"outlineLevel\":\"Level6\"}}');\n /* tslint:disable-next-line:max-line-length */\n this.preDefinedStyles.add('Default Paragraph Font', '{\"type\":\"Character\",\"name\":\"Default Paragraph Font\"}');\n /* tslint:disable-next-line:max-line-length */\n this.preDefinedStyles.add('Heading 1 Char', '{\"type\":\"Character\",\"name\":\"Heading 1 Char\",\"basedOn\":\"Default Paragraph Font\",\"characterFormat\":{\"fontSize\":16.0,\"fontFamily\":\"Calibri Light\",\"fontColor\":\"#2F5496\"}}');\n /* tslint:disable-next-line:max-line-length */\n this.preDefinedStyles.add('Heading 2 Char', '{\"type\":\"Character\",\"name\":\"Heading 2 Char\",\"basedOn\":\"Default Paragraph Font\",\"characterFormat\":{\"fontSize\":13.0,\"fontFamily\":\"Calibri Light\",\"fontColor\":\"#2F5496\"}}');\n /* tslint:disable-next-line:max-line-length */\n this.preDefinedStyles.add('Heading 3 Char', '{\"type\":\"Character\",\"name\":\"Heading 3 Char\",\"basedOn\":\"Default Paragraph Font\",\"characterFormat\":{\"fontSize\":12.0,\"fontFamily\":\"Calibri Light\",\"fontColor\": \"#1F3763\"}}');\n /* tslint:disable-next-line:max-line-length */\n this.preDefinedStyles.add('Heading 4 Char', '{\"type\":\"Character\",\"name\":\"Heading 4 Char\",\"basedOn\":\"Default Paragraph Font\",\"characterFormat\":{\"italic\":true,\"fontFamily\":\"Calibri Light\",\"fontColor\":\"#2F5496\"}}');\n /* tslint:disable-next-line:max-line-length */\n this.preDefinedStyles.add('Heading 5 Char', '{\"type\":\"Character\",\"name\":\"Heading 5 Char\",\"basedOn\":\"Default Paragraph Font\",\"characterFormat\":{\"fontFamily\":\"Calibri Light\",\"fontColor\":\"#2F5496\"}}');\n /* tslint:disable-next-line:max-line-length */\n this.preDefinedStyles.add('Heading 6 Char', '{\"type\":\"Character\",\"name\":\"Heading 6 Char\",\"basedOn\":\"Default Paragraph Font\",\"characterFormat\":{\"fontFamily\":\"Calibri Light\",\"fontColor\":\"#1F3763\"}}');\n /* tslint:disable-next-line:max-line-length */\n this.preDefinedStyles.add('Hyperlink', '{\"type\":\"Character\",\"name\":\"Hyperlink\",\"basedOn\":\"Default Paragraph Font\",\"next\":\"Normal\",\"characterFormat\":{\"fontColor\":\"#0563C1\",\"underline\": \"Single\"}}');\n /* tslint:disable-next-line:max-line-length */\n this.preDefinedStyles.add('Toc1', '{\"type\":\"Paragraph\",\"name\":\"Toc1\",\"basedOn\":\"Normal\",\"next\":\"Normal\",\"paragraphFormat\":{\"afterSpacing\":5.0}}');\n /* tslint:disable-next-line:max-line-length */\n this.preDefinedStyles.add('Toc2', '{\"type\":\"Paragraph\",\"name\":\"Toc2\",\"basedOn\":\"Normal\",\"next\":\"Normal\",\"paragraphFormat\":{\"leftIndent\" :11.0,\"afterSpacing\":5.0}}');\n /* tslint:disable-next-line:max-line-length */\n this.preDefinedStyles.add('Toc3', '{\"type\":\"Paragraph\",\"name\":\"Toc3\",\"basedOn\":\"Normal\",\"next\":\"Normal\",\"paragraphFormat\":{\"leftIndent\" :22.0,\"afterSpacing\":5.0}}');\n /* tslint:disable-next-line:max-line-length */\n this.preDefinedStyles.add('Toc4', '{\"type\":\"Paragraph\",\"name\":\"Toc4\",\"basedOn\":\"Normal\",\"next\":\"Normal\",\"paragraphFormat\":{\"leftIndent\" :33.0,\"afterSpacing\":5.0}}');\n /* tslint:disable-next-line:max-line-length */\n this.preDefinedStyles.add('Toc5', '{\"type\":\"Paragraph\",\"name\":\"Toc5\",\"basedOn\":\"Normal\",\"next\":\"Normal\",\"paragraphFormat\":{\"leftIndent\" :44.0,\"afterSpacing\":5.0}}');\n /* tslint:disable-next-line:max-line-length */\n this.preDefinedStyles.add('Toc6', '{\"type\":\"Paragraph\",\"name\":\"Toc6\",\"basedOn\":\"Normal\",\"next\":\"Normal\",\"paragraphFormat\":{\"leftIndent\" :55.0,\"afterSpacing\":5.0}}');\n /* tslint:disable-next-line:max-line-length */\n this.preDefinedStyles.add('Toc7', '{\"type\":\"Paragraph\",\"name\":\"Toc7\",\"basedOn\":\"Normal\",\"next\":\"Normal\",\"paragraphFormat\":{\"leftIndent\" :66.0,\"afterSpacing\":5.0}}');\n /* tslint:disable-next-line:max-line-length */\n this.preDefinedStyles.add('Toc8', '{\"type\":\"Paragraph\",\"name\":\"Toc8\",\"basedOn\":\"Normal\",\"next\":\"Normal\",\"paragraphFormat\":{\"leftIndent\" :77.0,\"afterSpacing\":5.0}}');\n /* tslint:disable-next-line:max-line-length */\n this.preDefinedStyles.add('Toc9', '{\"type\":\"Paragraph\",\"name\":\"Toc9\",\"basedOn\":\"Normal\",\"next\":\"Normal\",\"paragraphFormat\":{\"leftIndent\" :88.0,\"afterSpacing\":5.0}}');\n };\n /**\n * @private\n */\n LayoutViewer.prototype.clearDocumentItems = function () {\n this.headersFooters = [];\n this.fields = [];\n this.bookmarks.clear();\n this.styles.clear();\n this.characterFormat.clearFormat();\n this.paragraphFormat.clearFormat();\n };\n /**\n * @private\n */\n LayoutViewer.prototype.getAbstractListById = function (id) {\n if (isNullOrUndefined(this.abstractLists)) {\n return undefined;\n }\n for (var i = 0; i < this.abstractLists.length; i++) {\n var abstractList = this.abstractLists[i];\n if (abstractList instanceof WAbstractList && abstractList.abstractListId === id) {\n return abstractList;\n }\n }\n return undefined;\n };\n /**\n * @private\n */\n LayoutViewer.prototype.getListById = function (id) {\n if (isNullOrUndefined(this.lists)) {\n return undefined;\n }\n for (var i = 0; i < this.lists.length; i++) {\n if (!isNullOrUndefined(this.lists[i]) && this.lists[i].listId === id) {\n return this.lists[i];\n }\n }\n return undefined;\n };\n /**\n * @private\n */\n LayoutViewer.getListLevelNumber = function (listLevel) {\n if (listLevel.ownerBase instanceof WLevelOverride) {\n return listLevel.ownerBase.levelNumber;\n }\n else if (listLevel.ownerBase instanceof WAbstractList && !isNullOrUndefined(listLevel.ownerBase.levels)) {\n return listLevel.ownerBase.levels.indexOf(listLevel);\n }\n else {\n return -1;\n }\n };\n /**\n * Gets the bookmarks.\n * @private\n */\n LayoutViewer.prototype.getBookmarks = function (includeHidden) {\n var bookmarks = [];\n for (var i = 0; i < this.bookmarks.keys.length; i++) {\n var bookmark = this.bookmarks.keys[i];\n if (includeHidden || bookmark.indexOf('_') !== 0) {\n bookmarks.push(bookmark);\n }\n }\n return bookmarks;\n };\n /**\n * Initializes components.\n * @private\n */\n LayoutViewer.prototype.initializeComponents = function () {\n if (isNullOrUndefined(this.owner.element)) {\n return;\n }\n var viewer = this;\n var element = document.getElementById(this.owner.element.id);\n this.viewerContainer = createElement('div', { id: this.owner.containerId + '_viewerContainer' });\n this.viewerContainer.style.cssText = 'position:relative;backgroundColor:#FBFBFB;overflow:auto';\n element.appendChild(this.viewerContainer);\n this.viewerContainer.tabIndex = 0;\n this.viewerContainer.style.outline = 'none';\n this.pageContainer = createElement('div', { id: this.owner.containerId + '_pageContainer', className: 'e-de-background' });\n this.viewerContainer.appendChild(this.pageContainer);\n this.pageContainer.style.top = '0px';\n this.pageContainer.style.left = '0px';\n this.pageContainer.style.position = 'relative';\n this.pageContainer.style.pointerEvents = 'none';\n this.editableDiv = document.createElement('div');\n this.editableDiv.contentEditable = 'true';\n this.editableDiv.style.position = 'fixed';\n this.editableDiv.style.left = '-150em';\n this.editableDiv.style.width = '100%';\n this.editableDiv.style.height = '100%';\n this.editableDiv.id = this.owner.containerId + '_editableDiv';\n document.body.appendChild(this.editableDiv);\n this.editableDiv.id = element.id + '_editableDiv';\n document.body.appendChild(this.editableDiv);\n if (this.owner.enableImageResizerMode) {\n this.owner.imageResizerModule.initializeImageResizer();\n }\n this.updateViewerSizeInternal(element);\n this.layout = new Layout(this);\n this.textHelper = new TextHelper(this);\n this.zoomModule = new Zoom(this);\n // let locale: L10n = new L10n('documenteditor', this.owner.defaultLocale);\n // locale.setLocale(this.owner.locale);\n // setCulture(this.owner.locale);\n this.initTouchEllipse();\n this.wireEvent();\n };\n /**\n * Wires events and methods.\n */\n LayoutViewer.prototype.wireEvent = function () {\n if (!isNullOrUndefined(this.selection)) {\n this.selection.initCaret();\n }\n this.editableDiv.addEventListener('paste', this.onPaste);\n this.editableDiv.addEventListener('input', this.onTextInputInternal);\n this.editableDiv.addEventListener('blur', this.onFocusOut);\n this.editableDiv.addEventListener('keydown', this.onKeyDownInternal);\n this.editableDiv.addEventListener('compositionstart', this.compositionStart);\n this.editableDiv.addEventListener('compositionupdate', this.compositionUpdated);\n this.editableDiv.addEventListener('compositionend', this.compositionEnd);\n this.viewerContainer.addEventListener('scroll', this.scrollHandler);\n this.viewerContainer.addEventListener('mousedown', this.onMouseDownInternal);\n this.viewerContainer.addEventListener('mousemove', this.onMouseMoveInternal);\n this.viewerContainer.addEventListener('contextmenu', this.onContextMenu);\n this.viewerContainer.addEventListener('dblclick', this.onDoubleTap);\n this.viewerContainer.addEventListener('mouseup', this.onMouseUpInternal);\n window.addEventListener('resize', this.onWindowResize);\n window.addEventListener('keyup', this.onKeyUpInternal);\n window.addEventListener('mouseup', this.onImageResizer);\n window.addEventListener('touchend', this.onImageResizer);\n this.viewerContainer.addEventListener('touchstart', this.onTouchStartInternal);\n this.viewerContainer.addEventListener('touchmove', this.onTouchMoveInternal);\n this.viewerContainer.addEventListener('touchend', this.onTouchUpInternal);\n if (navigator.userAgent.match('Firefox')) {\n this.viewerContainer.addEventListener('DOMMouseScroll', this.zoomModule.onMouseWheelInternal);\n }\n this.viewerContainer.addEventListener('mousewheel', this.zoomModule.onMouseWheelInternal);\n };\n /**\n * Initializes dialog template.\n */\n LayoutViewer.prototype.initDialog = function () {\n if (!this.dialogInternal) {\n this.dialogTarget = createElement('div', { className: 'e-de-dlg-target' });\n document.body.appendChild(this.dialogTarget);\n this.dialogInternal = new Dialog({\n target: document.body, showCloseIcon: true,\n allowDragging: true, visible: false, width: '1px', isModal: true, position: { X: 'center', Y: 'center' }, zIndex: 20\n });\n this.dialogInternal.open = this.selection.hideCaret;\n this.dialogInternal.beforeClose = this.updateFocus;\n this.dialogInternal.appendTo(this.dialogTarget);\n }\n };\n /**\n * Initializes dialog template.\n */\n LayoutViewer.prototype.initDialog2 = function () {\n if (!this.dialogInternal2) {\n var target = createElement('div', { className: 'e-de-dlg-target' });\n document.body.appendChild(target);\n this.dialogInternal2 = new Dialog({\n target: document.body, showCloseIcon: true,\n allowDragging: true, visible: false, width: '1px', isModal: true, position: { X: 'center', Y: 'Top' }, zIndex: 10\n });\n this.dialogInternal2.appendTo(target);\n }\n };\n /**\n * Clears the context.\n * @private\n */\n LayoutViewer.prototype.clearContent = function () {\n this.containerContext.clearRect(0, 0, this.containerCanvas.width, this.containerCanvas.height);\n this.selectionContext.clearRect(0, 0, this.selectionCanvas.width, this.selectionCanvas.height);\n };\n /**\n * Fired when the document gets changed.\n * @param {WordDocument} document\n */\n LayoutViewer.prototype.onDocumentChanged = function (sections) {\n this.clearContent();\n if (this.owner.editorModule) {\n this.owner.editorModule.tocStyles = {};\n this.owner.editorModule.tocBookmarkId = 0;\n }\n this.heightInfoCollection = {};\n this.owner.isDocumentLoaded = false;\n for (var i = 0; i < this.pages.length; i++) {\n this.pages[i].bodyWidgets[0].destroy();\n }\n this.pages = [];\n if (!isNullOrUndefined(this.renderedLists)) {\n this.renderedLists.clear();\n }\n if (!isNullOrUndefined(this.owner.editorHistory)) {\n this.owner.editorHistory.destroy();\n }\n this.owner.isDocumentLoaded = true;\n this.layout.isInitialLoad = true;\n this.layout.layoutItems(sections);\n if (this.owner.selection) {\n this.owner.selection.selectRange(this.owner.documentStart, this.owner.documentStart);\n }\n if (this.owner.optionsPaneModule) {\n this.owner.optionsPaneModule.showHideOptionsPane(false);\n }\n this.owner.fireDocumentChange();\n };\n /**\n * Initialize touch ellipse.\n */\n LayoutViewer.prototype.initTouchEllipse = function () {\n var style = 'height: 30px;width: 30px;position: absolute;background-color: transparent;margin: 0px;padding: 0px;z-index:5';\n // tslint:disable-next-line:max-line-length\n var ellipse = ' height: 12px;width: 12px;border-radius: 50%;background-color: white;position: absolute;margin: 0px 6px 0px 6px;border-width: 2px;border-style: solid;border-color: #000000;';\n this.touchStart = createElement('div', { className: 'e-touch-ellipse', styles: style });\n var start = createElement('div', { styles: ellipse });\n this.touchEnd = createElement('div', { className: 'e-touch-ellipse', styles: style });\n this.touchStart.style.display = 'none';\n var end = createElement('div', { styles: ellipse });\n this.touchStart.appendChild(start);\n this.touchEnd.appendChild(end);\n this.touchEnd.style.display = 'none';\n this.viewerContainer.appendChild(this.touchStart);\n this.viewerContainer.appendChild(this.touchEnd);\n };\n /**\n * Updates touch mark position.\n * @private\n */\n LayoutViewer.prototype.updateTouchMarkPosition = function () {\n if (this.touchStart.style.display !== 'none' && !isNullOrUndefined(this.selection)) {\n if (!this.selection.isEmpty) {\n var y = this.selection.getCaretBottom(this.selection.start, false);\n var page = this.selection.getPage(this.selection.start.paragraph);\n var viewer = this;\n // tslint:disable-next-line:max-line-length\n var pageTop = (page.boundingRectangle.y - viewer.pageGap * (this.pages.indexOf(page) + 1)) * this.zoomFactor + viewer.pageGap * (this.pages.indexOf(page) + 1);\n // tslint:disable-next-line:max-line-length\n this.touchStart.style.left = page.boundingRectangle.x + (Math.round(this.selection.start.location.x) * this.zoomFactor - 14) + 'px';\n this.touchStart.style.top = pageTop + ((y) * this.zoomFactor) + 'px';\n if (!this.selection.isEmpty) {\n y = this.selection.getCaretBottom(this.selection.end, false);\n page = this.selection.getPage(this.selection.end.paragraph);\n }\n // tslint:disable-next-line:max-line-length\n this.touchEnd.style.left = page.boundingRectangle.x + (Math.round(this.selection.end.location.x) * this.zoomFactor - 14) + 'px';\n this.touchEnd.style.top = pageTop + (y * this.zoomFactor) + 'px';\n }\n else {\n this.selection.updateCaretPosition();\n }\n }\n };\n LayoutViewer.prototype.isSelectionInListText = function (cursorPoint) {\n var widget = this.getLineWidget(cursorPoint);\n if (!isNullOrUndefined(widget) && widget.children[0] instanceof ListTextElementBox) {\n var left = this.getLeftValue(widget);\n var width = widget.children[0].width;\n var height = widget.children[0].height;\n if (this.isInsideRect(left, widget.paragraph.y, width, height, cursorPoint)) {\n this.selectionLineWidget = widget;\n return true;\n }\n }\n return false;\n };\n /**\n * Check whether touch point is inside the rectangle or not.\n * @param x\n * @param y\n * @param width\n * @param height\n * @param touchPoint\n * @private\n */\n LayoutViewer.prototype.isInsideRect = function (x, y, width, height, touchPoint) {\n if ((touchPoint.x > x && touchPoint.x <= x + width) && (touchPoint.y > y && touchPoint.y <= y + height)) {\n return true;\n }\n return false;\n };\n /**\n * @private\n */\n LayoutViewer.prototype.getLeftValue = function (widget) {\n var left = widget.paragraph.x;\n var paragraphFormat = widget.paragraph.paragraphFormat;\n if (this.selection.isParagraphFirstLine(widget)) {\n if (paragraphFormat.textAlignment === 'Right') {\n left -= HelperMethods.convertPointToPixel(paragraphFormat.firstLineIndent);\n left -= HelperMethods.convertPointToPixel(paragraphFormat.leftIndent);\n }\n else {\n left += HelperMethods.convertPointToPixel(paragraphFormat.firstLineIndent);\n }\n }\n var element = widget.children[0];\n if (element instanceof ListTextElementBox) {\n left += element.margin.left;\n }\n return left;\n };\n /**\n * Checks whether left mouse button is pressed or not.\n */\n LayoutViewer.prototype.isLeftButtonPressed = function (event) {\n this.isTouchInput = false;\n var button = event.which || event.button;\n return button === 1;\n };\n /**\n * Gets touch offset value.\n */\n LayoutViewer.prototype.getTouchOffsetValue = function (event) {\n var targetElement = this.viewerContainer;\n var offset = targetElement.getBoundingClientRect();\n var touchOffsetValues = event.touches[0];\n if (isNullOrUndefined(touchOffsetValues)) {\n touchOffsetValues = event.changedTouches[0];\n }\n var offsetX = touchOffsetValues.pageX - offset.left;\n var offsetY = touchOffsetValues.pageY - offset.top;\n return new Point(offsetX, offsetY);\n };\n /**\n * Fired on pinch zoom in.\n * @param {TouchEvent} event\n */\n LayoutViewer.prototype.onPinchInInternal = function (event) {\n this.preZoomFactor = this.zoomFactor;\n var updatedZoomFactor = this.zoomFactor - 0.01;\n if (updatedZoomFactor < 5 && updatedZoomFactor > 2) {\n updatedZoomFactor = updatedZoomFactor - 0.01;\n }\n if (updatedZoomFactor < 0.1) {\n updatedZoomFactor = 0.1;\n }\n this.zoomFactor = updatedZoomFactor;\n };\n /**\n * Fired on pinch zoom out.\n * @param {TouchEvent} event\n */\n LayoutViewer.prototype.onPinchOutInternal = function (event) {\n this.preZoomFactor = this.zoomFactor;\n var updatedZoomFactor = this.zoomFactor + 0.01;\n if (updatedZoomFactor > 2) {\n updatedZoomFactor = updatedZoomFactor + 0.01;\n }\n if (updatedZoomFactor > 5) {\n updatedZoomFactor = 5;\n }\n this.zoomFactor = updatedZoomFactor;\n };\n /**\n * Gets page width.\n * @private\n */\n LayoutViewer.prototype.getPageWidth = function (page) {\n var width = page.boundingRectangle.width;\n return width;\n };\n /**\n * Removes specified page.\n * @private\n */\n LayoutViewer.prototype.removePage = function (page) {\n if (this.currentPage === page) {\n this.currentPage = undefined;\n }\n var index = this.pages.indexOf(page);\n // if (index > -1) {\n this.pages.splice(index, 1);\n // } \n //this.removeRenderedPages();\n var viewer = this;\n if (!isNullOrUndefined(viewer.visiblePages)) {\n if ((viewer.visiblePages).indexOf(page) > -1) {\n var pageIndex = (viewer.visiblePages).indexOf(page);\n (viewer.visiblePages).splice(pageIndex, 1);\n }\n }\n //(viewer as PageLayoutViewer).visiblePages.remove(page);\n var height = 0;\n for (var i = 0; i < this.pages.length; i++) {\n height = height + this.pages[i].boundingRectangle.height;\n }\n //Updates the vertical height.\n height -= page.boundingRectangle.height + 20;\n //ToDo:Update horizontal width, if removed page has max width.\n var top = 20;\n if (index > 0) {\n top += this.pages[index - 1].boundingRectangle.bottom;\n }\n if (index !== -1) {\n for (var i = index; i < this.pages.length; i++) {\n //Update bounding rectangle of next pages in collection.\n page = this.pages[i];\n // tslint:disable-next-line:max-line-length\n page.boundingRectangle = new Rect(page.boundingRectangle.x, top, page.boundingRectangle.width, page.boundingRectangle.height);\n top = page.boundingRectangle.bottom + 20;\n page.repeatHeaderRowTableWidget = false;\n }\n }\n };\n // private removeRenderedPages(): void {\n // for (let i: number = 0; i < this.pages.length; i++) {\n // this.clearContainer(this.pages[i]);\n // }\n // }\n /**\n * Updates viewer size on window resize.\n * @private\n */\n LayoutViewer.prototype.updateViewerSize = function () {\n var viewer = this;\n var element = this.owner.getDocumentEditorElement();\n viewer.updateViewerSizeInternal(element);\n viewer.updateScrollBars();\n if (!isNullOrUndefined(this.selection)) {\n this.selection.updateCaretPosition();\n }\n };\n /**\n * Updates viewer size.\n */\n LayoutViewer.prototype.updateViewerSizeInternal = function (element) {\n if (!isNullOrUndefined(element)) {\n var rect = element.getBoundingClientRect();\n var width = 0;\n var height = 0;\n height = rect.height > 0 ? rect.height : 200;\n if (this.owner.optionsPaneModule && this.owner.optionsPaneModule.isOptionsPaneShow) {\n var optionsRect = this.owner.optionsPaneModule.optionsPane.getBoundingClientRect();\n width = (rect.width - optionsRect.width) > 0 ? (rect.width - optionsRect.width) : 200;\n }\n else {\n width = rect.width > 0 ? rect.width : 200;\n }\n this.viewerContainer.style.height = height.toString() + 'px';\n this.viewerContainer.style.width = Math.ceil(width) + 'px';\n this.visibleBoundsIn = new Rect(0, 0, width, height);\n this.containerCanvas.width = width;\n this.containerCanvas.height = height;\n this.selectionCanvas.width = width;\n this.selectionCanvas.height = height;\n }\n };\n /**\n * Updates client area for block.\n * @private\n */\n LayoutViewer.prototype.updateClientAreaForBlock = function (block, beforeLayout, tableCollection) {\n var leftIndent = HelperMethods.convertPointToPixel(block.leftIndent);\n var rightIndent = HelperMethods.convertPointToPixel(block.rightIndent);\n if (beforeLayout) {\n if (block instanceof TableWidget && tableCollection) {\n var tableWidget = tableCollection[0];\n this.clientActiveArea.x = this.clientArea.x = tableWidget.x;\n this.clientActiveArea.width = this.clientArea.width = tableWidget.width;\n //Updates the location of last item.\n tableWidget = tableCollection[tableCollection.length - 1];\n tableWidget.x = this.clientActiveArea.x;\n tableWidget.y = this.clientActiveArea.y;\n this.clientArea = new Rect(this.clientArea.x, this.clientArea.y, this.clientArea.width, this.clientArea.height);\n // tslint:disable-next-line:max-line-length\n this.clientActiveArea = new Rect(this.clientActiveArea.x, this.clientActiveArea.y, this.clientActiveArea.width, this.clientActiveArea.height);\n }\n else {\n // tslint:disable-next-line:max-line-length\n if (block instanceof TableWidget && !isNullOrUndefined(block.tableFormat) && block.tableFormat.tableAlignment !== 'Left') {\n var tableWidth = this.layout.getTableWidth(block);\n if (block.tableFormat.tableAlignment === 'Center') {\n leftIndent = (this.clientArea.width - tableWidth) / 2;\n }\n else {\n leftIndent = this.clientArea.width - tableWidth;\n }\n this.tableLefts.push(leftIndent);\n }\n this.clientActiveArea.x = this.clientArea.x = this.clientArea.x + leftIndent;\n var width = this.clientArea.width - (leftIndent + rightIndent);\n this.clientActiveArea.width = this.clientArea.width = width > 0 ? width : 0;\n // tslint:disable-next-line:max-line-length\n this.clientArea = new Rect(this.clientArea.x, this.clientArea.y, this.clientArea.width, this.clientArea.height);\n // tslint:disable-next-line:max-line-length\n this.clientActiveArea = new Rect(this.clientActiveArea.x, this.clientActiveArea.y, this.clientActiveArea.width, this.clientActiveArea.height);\n }\n }\n else {\n // tslint:disable-next-line:max-line-length\n if (block instanceof TableWidget && block.tableFormat.tableAlignment !== 'Left' && this.tableLefts.length > 0) {\n leftIndent = this.tableLefts.pop();\n }\n this.clientActiveArea.x = this.clientArea.x = this.clientArea.x - leftIndent;\n var width = this.clientArea.width + leftIndent + rightIndent;\n this.clientActiveArea.width = this.clientArea.width = width > 0 ? width : 0;\n this.clientArea = new Rect(this.clientArea.x, this.clientArea.y, this.clientArea.width, this.clientArea.height);\n // tslint:disable-next-line:max-line-length\n this.clientActiveArea = new Rect(this.clientActiveArea.x, this.clientActiveArea.y, this.clientActiveArea.width, this.clientActiveArea.height);\n }\n };\n /**\n * Updates client active area left.\n * @private\n */\n LayoutViewer.prototype.cutFromLeft = function (x) {\n if (x < this.clientActiveArea.x) {\n x = this.clientActiveArea.x;\n }\n if (x > this.clientActiveArea.right && this.textWrap) {\n x = this.clientActiveArea.right;\n }\n this.clientActiveArea.width = this.clientActiveArea.right > x ? this.clientActiveArea.right - x : 0;\n this.clientActiveArea.x = x;\n };\n /**\n * Updates client active area top.\n * @private\n */\n LayoutViewer.prototype.cutFromTop = function (y) {\n if (y < this.clientActiveArea.y) {\n y = this.clientActiveArea.y;\n }\n if (y > this.clientActiveArea.bottom) {\n y = this.clientActiveArea.bottom;\n }\n this.clientActiveArea.height = this.clientActiveArea.bottom - y;\n this.clientActiveArea.x = this.clientArea.x;\n this.clientActiveArea.width = this.clientArea.width;\n this.clientActiveArea.y = y;\n };\n /**\n * Updates client width.\n * @private\n */\n LayoutViewer.prototype.updateClientWidth = function (width) {\n this.clientActiveArea.x -= width;\n if (this.clientActiveArea.width + width > 0) {\n this.clientActiveArea.width += width;\n }\n else {\n this.clientActiveArea.width = 0;\n }\n };\n /**\n * Inserts page in specified index.\n * @private\n */\n LayoutViewer.prototype.insertPage = function (index, page) {\n if (this.pages.indexOf(page) > -1) {\n this.pages.splice(this.pages.indexOf(page), 1);\n }\n this.pages.splice(this.pages.indexOf(page), 0, page);\n var top = 20;\n if (index > 0) {\n top += this.pages[index - 1].boundingRectangle.bottom;\n }\n for (var i = index; i < this.pages.length; i++) {\n //Update bounding rectangle of next pages in collection.\n page = this.pages[i];\n page.boundingRectangle = new Rect(page.boundingRectangle.x, top, page.boundingRectangle.width, page.boundingRectangle.height);\n top = page.boundingRectangle.bottom + 20;\n }\n };\n /**\n * Updates client area.\n * @private\n */\n LayoutViewer.prototype.updateClientArea = function (sectionFormat, page) {\n var top = 0;\n var headerDistance = 48;\n var footerDistance = 48;\n if (!isNullOrUndefined(sectionFormat)) {\n top = HelperMethods.convertPointToPixel(sectionFormat.topMargin);\n headerDistance = HelperMethods.convertPointToPixel(sectionFormat.headerDistance);\n footerDistance = HelperMethods.convertPointToPixel(sectionFormat.footerDistance);\n }\n if (!isNullOrUndefined(page.headerWidget)) {\n top = Math.max(headerDistance + page.headerWidget.height, top);\n }\n var bottom = 0.667 + HelperMethods.convertPointToPixel(sectionFormat.bottomMargin);\n if (!isNullOrUndefined(page.footerWidget)) {\n // tslint:disable-next-line:max-line-length\n bottom = 0.667 + Math.max(footerDistance + page.footerWidget.height, HelperMethods.convertPointToPixel(sectionFormat.bottomMargin));\n }\n var width = 0;\n var height = 0;\n if (!isNullOrUndefined(sectionFormat)) {\n width = HelperMethods.convertPointToPixel(sectionFormat.pageWidth - sectionFormat.leftMargin - sectionFormat.rightMargin);\n height = HelperMethods.convertPointToPixel(sectionFormat.pageHeight) - top - bottom;\n }\n if (width < 0) {\n width = 0;\n }\n // tslint:disable-next-line:max-line-length\n this.clientArea = new Rect(HelperMethods.convertPointToPixel(sectionFormat.leftMargin), top, width, HelperMethods.convertPointToPixel(sectionFormat.pageHeight) - top - bottom);\n this.clientActiveArea = new Rect(this.clientArea.x, this.clientArea.y, this.clientArea.width, this.clientArea.height);\n };\n /**\n * Updates client area left or top position.\n * @private\n */\n LayoutViewer.prototype.updateClientAreaTopOrLeft = function (tableWidget, beforeLayout) {\n if (beforeLayout) {\n this.clientActiveArea.y = this.clientActiveArea.y + tableWidget.topBorderWidth;\n this.clientActiveArea.x = this.clientActiveArea.x + tableWidget.leftBorderWidth;\n }\n };\n /**\n * Updates client area for table.\n * @private\n */\n LayoutViewer.prototype.updateClientAreaForTable = function (tableWidget) {\n this.clientActiveArea.x = this.clientArea.x = tableWidget.x;\n this.clientActiveArea.width = this.clientArea.width = tableWidget.width;\n };\n /**\n * Updates client area for row.\n * @private\n */\n LayoutViewer.prototype.updateClientAreaForRow = function (row, beforeLayout) {\n // tslint:disable-next-line:max-line-length\n var tableWidget = row.ownerTable;\n if (beforeLayout) {\n //tslint:disable:no-empty\n }\n else {\n this.clientActiveArea.x = this.clientArea.x = tableWidget.x;\n this.clientActiveArea.width = this.clientArea.width = tableWidget.width;\n this.clientArea = new Rect(this.clientArea.x, this.clientArea.y, this.clientArea.width, this.clientArea.height);\n // tslint:disable-next-line:max-line-length\n this.clientActiveArea = new Rect(this.clientActiveArea.x, this.clientActiveArea.y, this.clientActiveArea.width, this.clientActiveArea.height);\n }\n };\n /**\n * Updates client area for cell.\n * @private\n */\n LayoutViewer.prototype.updateClientAreaForCell = function (cell, beforeLayout) {\n // tslint:disable-next-line:max-line-length\n var rowWidget = cell.ownerRow;\n var cellWidget = cell;\n if (beforeLayout) {\n this.clientActiveArea.x = this.clientArea.x = cellWidget.x;\n this.clientActiveArea.y = cellWidget.y;\n this.clientActiveArea.width = this.clientArea.width = cellWidget.width > 0 ? cellWidget.width : 0;\n if (this instanceof PageLayoutViewer) {\n this.clientActiveArea.height = Number.POSITIVE_INFINITY;\n }\n this.clientArea = new Rect(this.clientArea.x, this.clientArea.y, this.clientArea.width, this.clientArea.height);\n // tslint:disable-next-line:max-line-length\n this.clientActiveArea = new Rect(this.clientActiveArea.x, this.clientActiveArea.y, this.clientActiveArea.width, this.clientActiveArea.height);\n }\n else {\n this.clientActiveArea.x = this.clientArea.x = cellWidget.x + cellWidget.width + cellWidget.margin.right;\n if (rowWidget.x + rowWidget.width - this.clientArea.x < 0) {\n this.clientActiveArea.width = this.clientArea.width = 0;\n }\n else {\n this.clientActiveArea.width = this.clientArea.width = rowWidget.x + rowWidget.width - this.clientArea.x;\n }\n // tslint:disable-next-line:max-line-length\n this.clientActiveArea.y = cellWidget.y - cellWidget.margin.top - HelperMethods.convertPointToPixel(cell.ownerTable.tableFormat.cellSpacing);\n if (!cell.ownerTable.isInsideTable) {\n this.clientActiveArea.height = this.clientArea.bottom - rowWidget.y > 0 ? this.clientArea.bottom - rowWidget.y : 0;\n }\n this.clientArea = new Rect(this.clientArea.x, this.clientArea.y, this.clientArea.width, this.clientArea.height);\n // tslint:disable-next-line:max-line-length\n this.clientActiveArea = new Rect(this.clientActiveArea.x, this.clientActiveArea.y, this.clientActiveArea.width, this.clientActiveArea.height);\n }\n };\n //Widget\n /**\n * Updates client area location.\n * @param widget\n * @param area\n * @private\n */\n LayoutViewer.prototype.updateClientAreaLocation = function (widget, area) {\n widget.x = area.x;\n widget.y = area.y;\n widget.width = area.width;\n };\n /**\n * Updates text position for selection.\n * @param cursorPoint\n * @param tapCount\n * @param clearMultiSelection\n * @private\n */\n LayoutViewer.prototype.updateTextPositionForSelection = function (cursorPoint, tapCount) {\n var widget = this.getLineWidget(cursorPoint);\n if (!isNullOrUndefined(widget)) {\n this.selection.updateTextPosition(widget, cursorPoint);\n }\n if (tapCount > 1) {\n this.isMouseDown = false;\n this.useTouchSelectionMark = false;\n if (this.pages.length === 0) {\n return;\n }\n //Double tap/triple tap selection\n if (!isNullOrUndefined(this.currentPage) && !isNullOrUndefined(this.owner.selection.start)) {\n if (tapCount % 2 === 0) {\n this.owner.selection.selectCurrentWord();\n }\n else {\n this.owner.selection.selectCurrentParagraph();\n }\n }\n }\n };\n /**\n * Scrolls to specified position.\n * @param startPosition\n * @param endPosition\n * @private\n */\n LayoutViewer.prototype.scrollToPosition = function (startPosition, endPosition) {\n if (this.owner.enableImageResizerMode && this.owner.imageResizerModule.isImageResizing\n || this.isMouseDownInFooterRegion || this.isRowOrCellResizing) {\n return;\n }\n var lineWidget = this.selection.getLineWidgetInternal(endPosition.currentWidget, endPosition.offset, true);\n if (isNullOrUndefined(lineWidget)) {\n return;\n }\n var top = this.selection.getTop(lineWidget);\n if (this.isMouseDown) {\n var prevLineWidget = this.selection.getLineWidgetInternal(endPosition.currentWidget, endPosition.offset, false);\n var prevTop = this.selection.getTop(prevLineWidget);\n if (prevLineWidget !== lineWidget && endPosition.location.y >= prevTop) {\n lineWidget = prevLineWidget;\n }\n }\n var height = lineWidget.height;\n //Gets current page.\n var endPage = this.selection.getPage(lineWidget.paragraph);\n this.currentPage = endPage;\n var x = 0;\n var y = 0;\n var viewer = this;\n var horizontalWidth = 0;\n var isPageLayout = viewer instanceof PageLayoutViewer;\n if (isPageLayout) {\n var pageLayout = viewer;\n if (isNullOrUndefined(endPage)) {\n return;\n }\n var pageWidth = endPage.boundingRectangle.width;\n x = (this.visibleBounds.width - pageWidth * this.zoomFactor) / 2;\n if (x < 30) {\n x = 30;\n }\n // tslint:disable-next-line:max-line-length\n y = endPage.boundingRectangle.y * this.zoomFactor + (this.pages.indexOf(endPage) + 1) * viewer.pageGap * (1 - this.zoomFactor);\n }\n var scrollTop = this.containerTop;\n var scrollLeft = this.containerLeft;\n var pageHeight = this.visibleBounds.height;\n var caretInfo = this.selection.updateCaretSize(this.owner.selection.end, true);\n var topMargin = caretInfo.topMargin;\n var caretHeight = caretInfo.height;\n x += (endPosition.location.x) * this.zoomFactor;\n y += (endPosition.location.y + topMargin) * this.zoomFactor;\n //vertical scroll bar update\n if ((scrollTop + 20) > y) {\n this.viewerContainer.scrollTop = (y - 10);\n }\n else if (scrollTop + pageHeight < y + caretHeight) {\n this.viewerContainer.scrollTop = y + caretHeight - pageHeight + 10;\n }\n else {\n this.selection.updateCaretToPage(startPosition, endPage);\n }\n this.selection.updateCaretToPage(startPosition, endPage);\n var scrollBarWidth = this.viewerContainer.offsetWidth - this.viewerContainer.clientWidth;\n if (scrollLeft > x) {\n this.viewerContainer.scrollLeft = x - (viewer.pageContainer.offsetWidth / 100) * 20;\n }\n else if (scrollLeft + this.visibleBounds.width < x + scrollBarWidth) {\n this.viewerContainer.scrollLeft = scrollLeft + (viewer.pageContainer.offsetWidth / 100) * 15 + scrollBarWidth;\n }\n };\n /**\n * Gets line widget using cursor point.\n * @private\n */\n LayoutViewer.prototype.getLineWidget = function (cursorPoint) {\n return this.getLineWidgetInternal(cursorPoint, false);\n };\n /**\n * Gets line widget.\n * @private\n */\n LayoutViewer.prototype.getLineWidgetInternal = function (cursorPoint, isMouseDragged) {\n var widget = undefined;\n if (!isNullOrUndefined(this.currentPage)) {\n var childWidgets = void 0;\n if (this.owner.enableHeaderAndFooter) {\n var page = this.currentPage;\n var pageTop = this.selection.getPageTop(page);\n var pageBottom = page.boundingRectangle.height;\n var headerHeight = Math.max((page.headerWidget.y + page.headerWidget.height), HelperMethods.convertPointToPixel(page.bodyWidgets[0].sectionFormat.topMargin)) * this.zoomFactor;\n var footerDistance = HelperMethods.convertPointToPixel(page.bodyWidgets[0].sectionFormat.footerDistance);\n var footerHeight = (page.boundingRectangle.height -\n Math.max(page.footerWidget.height + footerDistance, footerDistance * 2));\n if (isMouseDragged) {\n if (this.isBlockInHeader(this.selection.start.paragraph)) {\n childWidgets = this.currentPage.headerWidget;\n }\n else {\n childWidgets = this.currentPage.footerWidget;\n }\n }\n else {\n if (cursorPoint.y <= pageBottom && cursorPoint.y >= footerHeight) {\n childWidgets = this.currentPage.footerWidget;\n }\n else if ((cursorPoint.y) >= 0 && (cursorPoint.y) <= headerHeight) {\n childWidgets = this.currentPage.headerWidget;\n }\n }\n if (isNullOrUndefined(childWidgets)) {\n return undefined;\n }\n return this.selection.getLineWidgetBodyWidget(childWidgets, cursorPoint);\n }\n else {\n for (var i = 0; i < this.currentPage.bodyWidgets.length; i++) {\n var bodyWidgets = this.currentPage.bodyWidgets[i];\n widget = this.selection.getLineWidgetBodyWidget(bodyWidgets, cursorPoint);\n if (!isNullOrUndefined(widget)) {\n break;\n }\n }\n }\n }\n return widget;\n };\n /**\n * @private\n */\n LayoutViewer.prototype.isBlockInHeader = function (block) {\n while (!(block.containerWidget instanceof HeaderFooterWidget)) {\n if (!block.containerWidget) {\n return false;\n }\n block = block.containerWidget;\n }\n return block.containerWidget.headerFooterType.indexOf('Header') !== -1;\n };\n /**\n * Clears selection highlight.\n * @private\n */\n LayoutViewer.prototype.clearSelectionHighlight = function () {\n var canClear = true;\n canClear = (!this.isControlPressed || !this.isMouseDown);\n // if (this.owner.selection.selectionRanges.length > 0 && canClear) {\n if (this.owner.selection.clearSelectionHighlightInSelectedWidgets()) {\n this.selectionContext.clearRect(0, 0, this.selectionCanvas.width, this.selectionCanvas.height);\n }\n // } else if (!isNullOrUndefined(this.owner.selection.currentSelectionRange) && this.isMouseDown) {\n // this.owner.selection.currentSelectionRange.clearSelectionHighlight();\n // }\n //this.renderVisiblePages();\n };\n /**\n * @private\n */\n LayoutViewer.prototype.removeEmptyPages = function () {\n var scrollToLastPage = false;\n var viewer = this;\n for (var j = 0; j < this.pages.length; j++) {\n var page = this.pages[j];\n if (page.bodyWidgets.length === 0 || page.bodyWidgets[0].childWidgets.length === 0) {\n // tslint:disable-next-line:max-line-length\n if (j === this.pages.length - 1 && viewer instanceof PageLayoutViewer && viewer.visiblePages.indexOf(this.pages[j]) !== -1) {\n scrollToLastPage = true;\n }\n this.removePage(this.pages[j]);\n j--;\n }\n }\n if (scrollToLastPage) {\n this.scrollToBottom();\n }\n };\n /**\n * @private\n */\n LayoutViewer.prototype.scrollToBottom = function () {\n if (this.selection.start.paragraph && this.selection.start.paragraph.bodyWidget) {\n var page = this.selection.start.paragraph.bodyWidget.page;\n var containerHeight = this.visibleBounds.height;\n this.viewerContainer.scrollTop = page.boundingRectangle.bottom - containerHeight;\n }\n };\n /**\n * Returns the field code result.\n * @private\n */\n LayoutViewer.prototype.getFieldResult = function (fieldBegin, page) {\n if (!isNullOrUndefined(page) && !isNullOrUndefined(this.selection)) {\n var fieldCode = this.selection.getFieldCode(fieldBegin);\n var fieldCodes = fieldCode.split('\\*');\n if (fieldCodes.length > 1) {\n var fieldCategory = fieldCodes[0].replace(/[^\\w\\s]/gi, '').trim().toLowerCase();\n var fieldPattern = fieldCodes[1].replace(/[^\\w\\s]/gi, '').trim();\n switch (fieldCategory) {\n case 'page':\n return this.getFieldText(fieldPattern, (page.index + 1));\n case 'numpages':\n return this.getFieldText(fieldPattern, page.viewer.pages.length);\n default:\n break;\n }\n }\n }\n return '';\n };\n /**\n * Returns field text.\n */\n LayoutViewer.prototype.getFieldText = function (pattern, value) {\n switch (pattern) {\n case 'ALPHABETIC':\n return this.layout.getAsLetter(value).toUpperCase();\n case 'alphabetic':\n return this.layout.getAsLetter(value).toLowerCase();\n case 'roman':\n return this.layout.getAsRoman(value).toLowerCase();\n case 'ROMAN':\n return this.layout.getAsRoman(value).toUpperCase();\n default:\n return value.toString();\n }\n };\n /**\n * Destroys the internal objects maintained for control.\n */\n LayoutViewer.prototype.destroy = function () {\n if (!isNullOrUndefined(this.owner)) {\n this.unWireEvent();\n }\n this.pages = [];\n this.pages = undefined;\n this.fieldStacks = [];\n this.fieldStacks = undefined;\n this.splittedCellWidgets = [];\n this.splittedCellWidgets = undefined;\n this.fields = [];\n this.fields = undefined;\n if (this.layout) {\n this.layout.destroy();\n }\n this.layout = undefined;\n if (!isNullOrUndefined(this.render)) {\n this.render.destroy();\n }\n this.render = undefined;\n if (this.dialogInternal) {\n this.dialogInternal.destroy();\n }\n this.dialogInternal = undefined;\n if (this.dialogTarget && this.dialogTarget.parentElement) {\n this.dialogTarget.parentElement.removeChild(this.dialogTarget);\n }\n this.dialogTarget = undefined;\n if (!isNullOrUndefined(this.touchStart)) {\n this.touchStart.innerHTML = '';\n }\n if (this.textHelper) {\n this.textHelper.destroy();\n }\n this.textHelper = undefined;\n this.touchStart = undefined;\n if (!isNullOrUndefined(this.touchEnd)) {\n this.touchEnd.innerHTML = '';\n }\n this.touchEnd = undefined;\n if (!isNullOrUndefined(this.containerCanvasIn)) {\n this.containerCanvasIn.innerHTML = '';\n }\n this.containerCanvasIn = undefined;\n if (!isNullOrUndefined(this.selectionCanvasIn)) {\n this.selectionCanvasIn.innerHTML = '';\n }\n this.selectionCanvasIn = undefined;\n if (!isNullOrUndefined(this.editableDiv)) {\n this.editableDiv.innerHTML = '';\n }\n this.editableDiv = undefined;\n if (!isNullOrUndefined(this.pageContainer)) {\n this.pageContainer.innerHTML = '';\n }\n this.pageContainer = undefined;\n if (!isNullOrUndefined(this.viewerContainer)) {\n this.viewerContainer.innerHTML = '';\n }\n this.viewerContainer = undefined;\n this.owner = undefined;\n this.heightInfoCollection = undefined;\n };\n /**\n * Un-Wires events and methods\n */\n LayoutViewer.prototype.unWireEvent = function () {\n this.viewerContainer.removeEventListener('scroll', this.scrollHandler);\n this.viewerContainer.removeEventListener('mousedown', this.onMouseDownInternal);\n this.viewerContainer.removeEventListener('mousemove', this.onMouseMoveInternal);\n this.editableDiv.removeEventListener('input', this.onTextInputInternal);\n this.editableDiv.removeEventListener('paste', this.onPaste);\n this.viewerContainer.removeEventListener('contextmenu', this.onContextMenu);\n this.editableDiv.removeEventListener('blur', this.onFocusOut);\n this.editableDiv.removeEventListener('keydown', this.onKeyDownInternal);\n this.editableDiv.removeEventListener('compositionstart', this.compositionStart);\n this.editableDiv.removeEventListener('compositionupdate', this.compositionUpdated);\n this.editableDiv.removeEventListener('compositionend', this.compositionEnd);\n this.viewerContainer.removeEventListener('mouseup', this.onMouseUpInternal);\n this.viewerContainer.removeEventListener('dblclick', this.onDoubleTap);\n window.removeEventListener('resize', this.onWindowResize);\n window.removeEventListener('keyup', this.onKeyUpInternal);\n window.removeEventListener('mouseup', this.onImageResizer);\n window.removeEventListener('touchend', this.onImageResizer);\n };\n return LayoutViewer;\n}());\nexport { LayoutViewer };\n/**\n * @private\n */\nvar PageLayoutViewer = /** @class */ (function (_super) {\n __extends(PageLayoutViewer, _super);\n /**\n * Initialize the constructor of PageLayoutViewer\n */\n function PageLayoutViewer(owner) {\n var _this = _super.call(this, owner) || this;\n _this.pageLeft = 30;\n /**\n * @private\n */\n _this.pageGap = 20;\n /**\n * @private\n */\n _this.visiblePages = [];\n if (isNullOrUndefined(owner) || isNullOrUndefined(owner.element)) {\n return _this;\n }\n return _this;\n }\n /**\n * Creates new page.\n * @private\n */\n PageLayoutViewer.prototype.createNewPage = function (section, index) {\n var viewer = this;\n var yPos = this.pageGap;\n if (this.pages.length > 0) {\n yPos = this.pages[this.pages.length - 1].boundingRectangle.bottom + this.pageGap;\n }\n var page = new Page();\n page.viewer = this;\n // tslint:disable-next-line:max-line-length\n var pageWidth = !isNullOrUndefined(section.sectionFormat) ? HelperMethods.convertPointToPixel(section.sectionFormat.pageWidth) : 816;\n // tslint:disable-next-line:max-line-length\n var pageHeight = !isNullOrUndefined(section.sectionFormat) ? HelperMethods.convertPointToPixel(section.sectionFormat.pageHeight) : 1056;\n var xPos = (this.visibleBounds.width - pageWidth * this.zoomFactor) / 2;\n if (xPos < this.pageLeft) {\n xPos = this.pageLeft;\n }\n page.boundingRectangle = new Rect(xPos, yPos, pageWidth, pageHeight);\n if (isNullOrUndefined(index)) {\n this.pages.push(page);\n }\n else {\n this.pages.splice(index, 0, page);\n }\n this.updateClientArea(section.sectionFormat, page);\n page.bodyWidgets.push(section);\n page.bodyWidgets[page.bodyWidgets.length - 1].page = page;\n this.layout.layoutHeaderFooter(section, viewer, page);\n this.updateClientArea(section.sectionFormat, page);\n return page;\n };\n /**\n * Updates cursor.\n */\n PageLayoutViewer.prototype.updateCursor = function (event) {\n var hyperlinkField = undefined;\n var div = this.viewerContainer;\n var point = new Point(event.offsetX, event.offsetY);\n var touchPoint = this.findFocusedPage(point, true);\n var widget = this.getLineWidget(touchPoint);\n var widgetInfo;\n var left;\n var top;\n var editor = !this.owner.isReadOnlyMode ? this.owner.editorModule : undefined;\n var isRowResize = editor ? editor.tableResize.isInRowResizerArea(touchPoint) : false;\n var isCellResize = editor ? editor.tableResize.isInCellResizerArea(touchPoint) : false;\n var resizePosition = '';\n if (this.owner.enableImageResizerMode) {\n var resizeObj = this.owner.imageResizerModule.getImagePoint(touchPoint);\n this.owner.imageResizerModule.selectedResizeElement = resizeObj.selectedElement;\n resizePosition = resizeObj.resizePosition;\n }\n var lineLeft = 0;\n if (!isNullOrUndefined(widget)) {\n lineLeft = this.selection.getLineStartLeft(widget);\n hyperlinkField = this.selection.getHyperLinkFieldInCurrentSelection(widget, touchPoint);\n widgetInfo = this.selection.updateTextPositionIn(widget, undefined, 0, touchPoint, true);\n left = this.selection.getLeft(widget);\n top = this.selection.getTop(widget);\n this.selection.setHyperlinkContentToToolTip(hyperlinkField, widget, touchPoint.x);\n }\n if (!isNullOrUndefined(hyperlinkField) && (event.ctrlKey &&\n this.owner.useCtrlClickToFollowHyperlink || !this.owner.useCtrlClickToFollowHyperlink)) {\n div.style.cursor = 'pointer';\n return;\n }\n else if (touchPoint.x >= lineLeft &&\n event.offsetX < (this.visibleBounds.width - (this.visibleBounds.width - this.viewerContainer.clientWidth)) &&\n event.offsetY < (this.visibleBounds.height - (this.visibleBounds.height - this.viewerContainer.clientHeight))) {\n if (this.selection.isEmpty) {\n div.style.cursor = 'text';\n }\n else {\n div.style.cursor = this.selection.checkCursorIsInSelection(widget, touchPoint) ? 'default' : 'text';\n }\n }\n else {\n div.style.cursor = 'default';\n }\n if (!isNullOrUndefined(resizePosition) && resizePosition !== '') {\n div.style.cursor = resizePosition;\n }\n else if (!isNullOrUndefined(widgetInfo) && widgetInfo.isImageSelected && left < touchPoint.x && top < touchPoint.y &&\n left + widget.width > touchPoint.x && top + widget.height > touchPoint.y) {\n div.style.cursor = 'move';\n }\n if (isRowResize) {\n div.style.cursor = 'row-resize';\n }\n else if (isCellResize) {\n div.style.cursor = 'col-resize';\n }\n };\n /**\n * Finds focused page.\n * @private\n */\n PageLayoutViewer.prototype.findFocusedPage = function (currentPoint, updateCurrentPage) {\n var point = new Point(currentPoint.x, currentPoint.y);\n point.x += this.viewerContainer.scrollLeft;\n point.y += this.viewerContainer.scrollTop;\n for (var i = 0; i < this.pages.length; i++) {\n var page = this.pages[i];\n var pageTop = (page.boundingRectangle.y - this.pageGap * (i + 1)) * this.zoomFactor + this.pageGap * (i + 1);\n var pageHeight = (page.boundingRectangle.height * this.zoomFactor) + this.pageGap;\n var pageLeft = page.boundingRectangle.x;\n var pageRight = ((page.boundingRectangle.right - pageLeft) * this.zoomFactor) + pageLeft;\n if (pageTop <= point.y && pageTop + pageHeight >= point.y) {\n if (updateCurrentPage) {\n this.currentPage = page;\n }\n point.y = (point.y - (pageTop)) / this.zoomFactor;\n if (point.x > pageRight) {\n point.x = page.boundingRectangle.right;\n }\n else if (point.x < pageLeft) {\n point.x = 0;\n }\n else {\n point.x = (point.x - pageLeft) / this.zoomFactor;\n }\n return point;\n }\n }\n return point;\n };\n /**\n * Fired when page fit type changed.\n * @private\n */\n PageLayoutViewer.prototype.onPageFitTypeChanged = function (pageFitType) {\n var width = this.visibleBounds.width;\n var height = this.visibleBounds.height;\n var section = this.visiblePages[0].bodyWidgets[0];\n var pageWidth = HelperMethods.convertPointToPixel(section.sectionFormat.pageWidth);\n var pageHeight = HelperMethods.convertPointToPixel(section.sectionFormat.pageHeight);\n switch (pageFitType) {\n case 'FitOnePage':\n if (height > 0 && pageHeight > 0) {\n var zoomFactor = (this.visibleBounds.height - 2 * this.pageGap - (this.pageGap - 2)) / pageHeight;\n if (zoomFactor === this.zoomFactor) {\n if (!isNullOrUndefined(this.owner.selection) && !isNullOrUndefined(this.owner.selection.start) &&\n !isNullOrUndefined(this.owner.selection.end)) {\n this.scrollToPosition(this.owner.selection.start, this.owner.selection.end);\n }\n }\n else {\n this.zoomFactor = zoomFactor;\n }\n }\n break;\n case 'FitPageWidth':\n if (width > 0 && pageWidth > 0) {\n this.zoomFactor = (this.visibleBounds.width - 80) / pageWidth;\n }\n break;\n default:\n this.zoomFactor = 100 / 100;\n break;\n }\n };\n /**\n * @private\n */\n PageLayoutViewer.prototype.handleZoom = function () {\n var prevScaleFactor = this.preZoomFactor;\n var page = null;\n var verticalHeight = 0;\n var scrollToPosition = false;\n if (this.selection && isNullOrUndefined(this.zoomX && isNullOrUndefined(this.zoomY))) {\n var x = 0;\n var y = 0;\n var endPage = this.selection.getPage(this.selection.end.currentWidget.paragraph);\n x = (this.visibleBounds.width - endPage.boundingRectangle.width * prevScaleFactor) / 2;\n if (x < 30) {\n x = 30;\n }\n // tslint:disable-next-line:max-line-length\n y = endPage.boundingRectangle.y * prevScaleFactor + (this.pages.indexOf(endPage) + 1) * this.pageGap * (1 - prevScaleFactor);\n var caretInfo = this.selection.updateCaretSize(this.owner.selection.end, true);\n var topMargin = caretInfo.topMargin;\n var caretHeight = caretInfo.height;\n x += (this.selection.end.location.x) * prevScaleFactor;\n y += (this.selection.end.location.y + topMargin) * prevScaleFactor;\n if (x >= this.containerLeft && x <= this.visibleBounds.width &&\n y >= this.containerTop && y <= this.containerTop + this.visibleBounds.height) {\n scrollToPosition = true;\n }\n }\n for (var i = 0; i < this.pages.length; i++) {\n verticalHeight = verticalHeight + this.pages[i].boundingRectangle.height;\n }\n var horizontalWidth = 0;\n for (var i = 0; i < this.pages.length; i++) {\n if (horizontalWidth < this.pages[i].boundingRectangle.width) {\n horizontalWidth = this.pages[i].boundingRectangle.width;\n }\n }\n // tslint:disable-next-line:max-line-length\n var height = (verticalHeight * this.zoomFactor + (this.pages.length + 1) * this.pageGap * (1 - this.zoomFactor)) - this.visibleBounds.height;\n var horWidth = horizontalWidth * this.zoomFactor - this.visibleBounds.width;\n if (this.visibleBounds.width - horizontalWidth * this.zoomFactor < 60) {\n horWidth += 60;\n }\n //Update Vertical Scroll bar\n if (height > 0) {\n var value = this.containerTop;\n if (this.visiblePages.length > 0) {\n page = this.visiblePages[0];\n // tslint:disable-next-line:max-line-length\n var prevPageTop = (page.boundingRectangle.y - (page.index + 1) * this.pageGap) * prevScaleFactor + (page.index + 1) * this.pageGap;\n var zoomY = this.zoomY;\n if (isNullOrUndefined) {\n zoomY = this.visibleBounds.height / 2;\n }\n var prevY = value + zoomY;\n while (prevY > prevPageTop + (page.boundingRectangle.height * prevScaleFactor)) {\n var pageIndex = page.index + 1;\n if (pageIndex === this.pages.length) {\n break;\n }\n page = this.pages[pageIndex];\n // tslint:disable-next-line:max-line-length\n prevPageTop = (page.boundingRectangle.y - (page.index + 1) * this.pageGap) * prevScaleFactor + (page.index + 1) * this.pageGap;\n }\n // tslint:disable-next-line:max-line-length\n var currentY = (page.boundingRectangle.y - (page.index + 1) * this.pageGap) * this.zoomFactor + (page.index + 1) * this.pageGap\n + ((prevY - prevPageTop) < 0 ? prevY - prevPageTop : (prevY - prevPageTop) * (this.zoomFactor / prevScaleFactor));\n value = currentY - zoomY;\n zoomY = this.visibleBounds.height / 2;\n }\n this.viewerContainer.scrollTop = value;\n }\n else {\n this.viewerContainer.scrollTop = 0;\n }\n // update Horizontal Scroll Bar\n if (horWidth > 0) {\n var value = this.containerLeft;\n if (this.visiblePages.length > 0) {\n if (page === null) {\n page = this.visiblePages[0];\n }\n var zoomX = this.zoomX;\n if (isNullOrUndefined(zoomX)) {\n zoomX = this.visibleBounds.width / 2;\n }\n var prevValue = (page.boundingRectangle.width * prevScaleFactor) / page.boundingRectangle.width;\n var prevX = value + zoomX;\n // tslint:disable-next-line:max-line-length\n var currentX = page.boundingRectangle.x\n + ((prevX - page.boundingRectangle.x) < 0 ? prevX - page.boundingRectangle.x : (prevX - page.boundingRectangle.x) * (this.zoomFactor / prevValue));\n value = currentX - zoomX;\n zoomX = this.visibleBounds.width / 2;\n }\n this.viewerContainer.scrollLeft = value;\n }\n else {\n this.viewerContainer.scrollLeft = 0;\n }\n this.updateScrollBars();\n if (scrollToPosition) {\n this.scrollToPosition(this.selection.start, this.selection.end);\n }\n };\n /**\n * Gets current page header footer.\n * @private\n */\n PageLayoutViewer.prototype.getCurrentPageHeaderFooter = function (section, isHeader) {\n return this.getCurrentHeaderFooter(this.getHeaderFooterType(section, isHeader), section.index);\n };\n /**\n * Get header footer type\n * @private\n */\n PageLayoutViewer.prototype.getHeaderFooterType = function (section, isHeader) {\n var type;\n type = isHeader ? 'OddHeader' : 'OddFooter';\n // tslint:disable-next-line:max-line-length\n if (section.sectionFormat.differentFirstPage && (this.pages.length === 1 || this.pages[this.pages.length - 1].bodyWidgets[0].index !== section.index)) {\n type = isHeader ? 'FirstPageHeader' : 'FirstPageFooter';\n }\n else if (section.sectionFormat.differentOddAndEvenPages && this.pages.length % 2 === 0) {\n type = isHeader ? 'EvenHeader' : 'EvenFooter';\n }\n return type;\n };\n /**\n * Gets current header footer.\n * @param type\n * @param section\n * @private\n */\n PageLayoutViewer.prototype.getCurrentHeaderFooter = function (type, sectionIndex) {\n if (this.headersFooters[sectionIndex]) {\n var index = this.getHeaderFooter(type);\n var headerFooter = this.headersFooters[sectionIndex][index];\n if (!headerFooter) {\n headerFooter = this.createHeaderFooterWidget(type);\n this.headersFooters[sectionIndex][index] = headerFooter;\n }\n return headerFooter;\n }\n else if (sectionIndex > 0) {\n return this.getCurrentHeaderFooter(type, sectionIndex - 1);\n }\n return undefined;\n };\n PageLayoutViewer.prototype.createHeaderFooterWidget = function (type) {\n var headerFooter = new HeaderFooterWidget(type);\n var paragraph = new ParagraphWidget();\n paragraph.childWidgets.push(new LineWidget(paragraph));\n return headerFooter;\n };\n /**\n * Gets header footer.\n * @param type\n * @private\n */\n PageLayoutViewer.prototype.getHeaderFooter = function (type) {\n switch (type) {\n case 'OddHeader':\n return 0;\n case 'OddFooter':\n return 1;\n case 'EvenHeader':\n return 2;\n case 'EvenFooter':\n return 3;\n case 'FirstPageHeader':\n return 4;\n case 'FirstPageFooter':\n return 5;\n }\n };\n /**\n * Updates header footer client area.\n * @private\n */\n PageLayoutViewer.prototype.updateHFClientArea = function (sectionFormat, isHeader) {\n // tslint:disable-next-line:max-line-length\n var width = HelperMethods.convertPointToPixel(sectionFormat.pageWidth - sectionFormat.leftMargin - sectionFormat.rightMargin);\n if (width < 0) {\n width = 0;\n }\n if (isHeader) {\n // tslint:disable-next-line:max-line-length\n this.clientArea = new Rect(HelperMethods.convertPointToPixel(sectionFormat.leftMargin), HelperMethods.convertPointToPixel(sectionFormat.headerDistance), width, HelperMethods.convertPointToPixel(sectionFormat.pageHeight) - HelperMethods.convertPointToPixel(sectionFormat.headerDistance));\n }\n else {\n // tslint:disable-next-line:max-line-length\n this.clientArea = new Rect(HelperMethods.convertPointToPixel(sectionFormat.leftMargin), HelperMethods.convertPointToPixel(sectionFormat.pageHeight - sectionFormat.footerDistance), width, HelperMethods.convertPointToPixel(sectionFormat.pageHeight - sectionFormat.footerDistance));\n }\n this.clientActiveArea = new Rect(this.clientArea.x, this.clientArea.y, this.clientArea.width, this.clientArea.height);\n };\n /**\n * @private\n */\n PageLayoutViewer.prototype.updateHCFClientAreaWithTop = function (sectionFormat, isHeader, page) {\n this.updateHFClientArea(sectionFormat, isHeader);\n if (!isHeader) {\n if (page.footerWidget.y < this.clientActiveArea.y) {\n // tslint:disable-next-line:max-line-length\n var height = HelperMethods.convertPointToPixel(sectionFormat.pageHeight - sectionFormat.footerDistance) - page.footerWidget.height;\n this.clientActiveArea.y = page.footerWidget.y;\n this.clientActiveArea.height = height;\n }\n }\n };\n /**\n * Scrolls to the specified page\n * @private\n */\n PageLayoutViewer.prototype.scrollToPage = function (pageIndex) {\n var top = 0;\n for (var i = 0; i < this.pages.length; i++) {\n top = this.pages[i].boundingRectangle.y - (this.pageGap / 2);\n if (i === pageIndex) {\n break;\n }\n }\n this.viewerContainer.scrollTop = top;\n this.updateScrollBars();\n };\n /**\n * Updates scroll bars.\n * @private\n */\n PageLayoutViewer.prototype.updateScrollBars = function () {\n var height = 0;\n for (var i = 0; i < this.pages.length; i++) {\n height = height + this.pages[i].boundingRectangle.height;\n }\n var width = 0;\n for (var i = 0; i < this.pages.length; i++) {\n if (width < this.pages[i].boundingRectangle.width) {\n width = this.pages[i].boundingRectangle.width;\n }\n }\n var containerWidth = (width * this.zoomFactor) + (this.pageLeft * 2);\n var containerHeight = (height * this.zoomFactor) + (this.pages.length + 1) * this.pageGap;\n var viewerWidth = this.visibleBounds.width;\n var viewerHeight = this.visibleBounds.height;\n if (this.visibleBounds.width !== this.viewerContainer.clientWidth) {\n viewerWidth -= (this.visibleBounds.width - this.viewerContainer.clientWidth);\n }\n else if (containerHeight > viewerHeight) {\n viewerWidth -= this.viewerContainer.offsetWidth - this.viewerContainer.clientWidth;\n }\n if (containerWidth > viewerWidth) {\n viewerHeight -= (this.visibleBounds.height - this.viewerContainer.clientHeight);\n }\n width = containerWidth > viewerWidth ? containerWidth : viewerWidth;\n height = containerHeight > viewerHeight ? containerHeight : viewerHeight;\n if (parseInt(this.pageContainer.style.width.replace('px', ''), 10) !== width ||\n parseInt(this.pageContainer.style.height.replace('px', ''), 10) !== width) {\n this.pageContainer.style.width = width.toString() + 'px';\n this.pageContainer.style.height = height.toString() + 'px';\n }\n // if (!isNullOrUndefined(this.selection) && !this.selection.isEmpty) {\n // this.selectionContext.clearRect(0, 0, this.selectionCanvas.width, this.selectionCanvas.height);\n // }\n var displayPixelRatio = Math.max(1, window.devicePixelRatio || 1);\n if (this.containerCanvas.width !== Math.floor(viewerWidth * displayPixelRatio)\n || this.containerCanvas.height !== Math.floor(viewerHeight * displayPixelRatio)) {\n this.containerCanvas.width = viewerWidth * displayPixelRatio;\n this.containerCanvas.height = viewerHeight * displayPixelRatio;\n this.containerCanvas.style.width = viewerWidth + 'px';\n this.containerCanvas.style.height = viewerHeight + 'px';\n this.containerContext.scale(displayPixelRatio, displayPixelRatio);\n this.selectionCanvas.width = viewerWidth * displayPixelRatio;\n this.selectionCanvas.height = viewerHeight * displayPixelRatio;\n this.selectionCanvas.style.width = viewerWidth + 'px';\n this.selectionCanvas.style.height = viewerHeight + 'px';\n this.selectionContext.scale(displayPixelRatio, displayPixelRatio);\n }\n this.containerContext.globalAlpha = 1;\n this.selectionContext.globalAlpha = 0.4;\n for (var i = 0; i < this.pages.length; i++) {\n var left = (width - this.pages[i].boundingRectangle.width * this.zoomFactor) / 2;\n if (left > this.pageLeft) {\n // tslint:disable-next-line:max-line-length\n this.pages[i].boundingRectangle = new Rect(left, this.pages[i].boundingRectangle.y, this.pages[i].boundingRectangle.width, this.pages[i].boundingRectangle.height);\n }\n else {\n // tslint:disable-next-line:max-line-length\n this.pages[i].boundingRectangle = new Rect(this.pageLeft, this.pages[i].boundingRectangle.y, this.pages[i].boundingRectangle.width, this.pages[i].boundingRectangle.height);\n }\n }\n this.updateScrollBarPosition(containerWidth, containerHeight, viewerWidth, viewerHeight, width, height);\n };\n // tslint:disable-next-line:max-line-length\n PageLayoutViewer.prototype.updateScrollBarPosition = function (containerWidth, containerHeight, viewerWidth, viewerHeight, width, height) {\n var left = 0;\n var viewerHeight1 = parseFloat(this.viewerContainer.style.height);\n var containerHeight1 = parseFloat(this.pageContainer.style.height);\n this.containerTop = this.viewerContainer.scrollTop;\n this.containerCanvas.style.position = 'absolute';\n this.containerCanvas.style.top = this.containerTop.toString() + 'px';\n this.selectionCanvas.style.position = 'absolute';\n this.selectionCanvas.style.top = this.containerTop.toString() + 'px';\n this.containerLeft = this.viewerContainer.scrollLeft;\n this.containerCanvas.style.left = this.containerLeft + 'px';\n this.selectionCanvas.style.left = this.containerLeft + 'px';\n this.updateVisiblePages();\n };\n /**\n * Updates visible pages.\n * @private\n */\n PageLayoutViewer.prototype.updateVisiblePages = function () {\n var left = 0;\n var width = 0;\n // Clears the container first.\n this.visiblePages = [];\n var height = this.visibleBounds.height;\n var vertical = this.viewerContainer.scrollTop;\n for (var i = 0; i < this.pages.length; i++) {\n var page = this.pages[i];\n var y = (page.boundingRectangle.y - this.pageGap * (i + 1)) * this.zoomFactor + this.pageGap * (i + 1);\n var pageH = page.boundingRectangle.height * this.zoomFactor;\n var left_1 = page.boundingRectangle.x;\n var isTopFit = y >= vertical && y <= vertical + height;\n var isBottomFit = y + pageH >= vertical && y + pageH <= vertical + height;\n var isMiddleFit = y <= vertical && y + pageH >= vertical + height;\n //UI Virtualization\n if (isTopFit || isBottomFit || isMiddleFit) {\n this.addVisiblePage(page, left_1, y);\n }\n }\n };\n /**\n * Adds visible pages.\n */\n PageLayoutViewer.prototype.addVisiblePage = function (page, x, y) {\n var width = page.boundingRectangle.width * this.zoomFactor;\n var height = page.boundingRectangle.height * this.zoomFactor;\n // tslint:disable-next-line:max-line-length\n if (this.owner.enableImageResizerMode && this.owner.imageResizerModule.currentPage !== undefined && this.owner.imageResizerModule.currentPage === page && this.owner.imageResizerModule.isImageResizerVisible) {\n this.owner.imageResizerModule.setImageResizerPositions(x, y, width, height);\n }\n this.visiblePages.push(page);\n this.renderPage(page, x, y, width, height);\n };\n /**\n * Render specified page widgets.\n */\n PageLayoutViewer.prototype.renderPage = function (page, x, y, width, height) {\n this.render.renderWidgets(page, x - this.containerLeft, y - this.containerTop, width, height);\n };\n /**\n * Renders visible pages.\n * @private\n */\n PageLayoutViewer.prototype.renderVisiblePages = function () {\n if (isNullOrUndefined(this.visiblePages) || this.visiblePages.length < 1) {\n return;\n }\n this.clearContent();\n for (var i = 0; i < this.visiblePages.length; i++) {\n var page = this.visiblePages[i];\n var width = page.boundingRectangle.width * this.zoomFactor;\n var height = page.boundingRectangle.height * this.zoomFactor;\n var x = page.boundingRectangle.x;\n var y = (page.boundingRectangle.y - this.pageGap * (i + 1)) * this.zoomFactor + this.pageGap * (i + 1);\n this.renderPage(page, x, y, width, height);\n }\n };\n return PageLayoutViewer;\n}(LayoutViewer));\nexport { PageLayoutViewer };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { WList } from '../list/list';\nimport { WListLevel } from '../list/list-level';\nimport { WAbstractList } from '../list/abstract-list';\nimport { WLevelOverride } from '../list/level-override';\nimport { WCharacterFormat, WListFormat, WParagraphFormat, WCellFormat, WTableFormat, WSectionFormat, WRowFormat } from '../format/index';\nimport { WCharacterStyle, WParagraphStyle, WTabStop } from '../format/index';\nimport { LineWidget, ParagraphWidget, ImageElementBox, BodyWidget, TextElementBox, TableCellWidget, TableRowWidget, TableWidget, FieldElementBox, HeaderFooterWidget, BookmarkElementBox, FieldTextElementBox, TabElementBox } from './page';\nimport { HelperMethods } from '../editor/editor-helper';\n/**\n * @private\n */\nvar SfdtReader = /** @class */ (function () {\n function SfdtReader(viewer) {\n /* tslint:disable:no-any */\n this.viewer = undefined;\n this.viewer = viewer;\n }\n Object.defineProperty(SfdtReader.prototype, \"isPasting\", {\n get: function () {\n return this.viewer && this.viewer.owner.isPastingContent;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @private\n * @param json\n */\n SfdtReader.prototype.convertJsonToDocument = function (json) {\n var sections = [];\n var jsonObject = JSON.parse(json);\n this.parseCharacterFormat(jsonObject.characterFormat, this.viewer.characterFormat);\n this.parseParagraphFormat(jsonObject.paragraphFormat, this.viewer.paragraphFormat);\n if (!isNullOrUndefined(jsonObject.background)) {\n this.viewer.backgroundColor = this.getColor(jsonObject.background.color);\n }\n if (!isNullOrUndefined(jsonObject.abstractLists)) {\n this.parseAbstractList(jsonObject, this.viewer.abstractLists);\n }\n if (!isNullOrUndefined(jsonObject.lists)) {\n this.parseList(jsonObject, this.viewer.lists);\n }\n if (!isNullOrUndefined(jsonObject.styles)) {\n this.parseStyles(jsonObject, this.viewer.styles);\n }\n if (!isNullOrUndefined(jsonObject.sections)) {\n this.parseSections(jsonObject.sections, sections);\n }\n return sections;\n };\n SfdtReader.prototype.parseStyles = function (data, styles) {\n for (var i = 0; i < data.styles.length; i++) {\n if (isNullOrUndefined(this.viewer.styles.findByName(data.styles[i].name))) {\n this.parseStyle(data, data.styles[i], styles);\n }\n }\n };\n SfdtReader.prototype.parseStyle = function (data, style, styles) {\n var wStyle;\n if (!isNullOrUndefined(style.type)) {\n if (style.type === 'Paragraph') {\n wStyle = new WParagraphStyle();\n wStyle.type = 'Paragraph';\n }\n if (style.type === 'Character') {\n wStyle = new WCharacterStyle();\n wStyle.type = 'Character';\n }\n if (!isNullOrUndefined(style.name)) {\n wStyle.name = style.name;\n }\n styles.push(wStyle);\n if (!isNullOrUndefined(style.basedOn)) {\n var basedOn = styles.findByName(style.basedOn);\n if (!isNullOrUndefined(basedOn)) {\n if (basedOn.type === wStyle.type) {\n wStyle.basedOn = basedOn;\n }\n }\n else {\n var basedStyle = this.getStyle(style.basedOn, data);\n var styleString = void 0;\n if (!isNullOrUndefined(basedStyle) && basedStyle.type === wStyle.type) {\n styleString = basedStyle;\n }\n else {\n if (wStyle.type === 'Paragraph') {\n styleString = JSON.parse('{\"type\":\"Paragraph\",\"name\":\"Normal\",\"next\":\"Normal\"}');\n }\n else {\n styleString = JSON.parse('{\"type\": \"Character\",\"name\": \"Default Paragraph Font\"}');\n }\n }\n this.parseStyle(data, styleString, styles);\n wStyle.basedOn = styles.findByName(styleString.name);\n }\n }\n if (!isNullOrUndefined(style.link)) {\n var link = styles.findByName(style.link);\n var linkStyle = this.getStyle(style.link, data);\n var styleString = void 0;\n if (isNullOrUndefined(link)) {\n if (isNullOrUndefined(linkStyle)) {\n //Construct the CharacterStyle string\n var charaStyle = {};\n charaStyle.characterFormat = style.characterFormat;\n charaStyle.name = style.name + ' Char';\n charaStyle.type = 'Character';\n //TODO: Implement basedOn\n charaStyle.basedOn = style.basedOn === 'Normal' ? 'Default Paragraph Font' : (style.basedOn + ' Char');\n styleString = charaStyle;\n }\n else {\n styleString = linkStyle;\n }\n this.parseStyle(data, styleString, styles);\n wStyle.link = isNullOrUndefined(styles.findByName(styleString.name)) ? style.link : styles.findByName(styleString.name);\n }\n else {\n wStyle.link = link;\n }\n }\n if (!isNullOrUndefined(style.characterFormat)) {\n this.parseCharacterFormat(style.characterFormat, wStyle.characterFormat);\n }\n if (!isNullOrUndefined(style.paragraphFormat)) {\n this.parseParagraphFormat(style.paragraphFormat, wStyle.paragraphFormat);\n }\n if (!isNullOrUndefined(style.next)) {\n if (style.next === style.name) {\n wStyle.next = wStyle;\n }\n else {\n var next = styles.findByName(style.next);\n if (!isNullOrUndefined(next) && next.type === wStyle.type) {\n wStyle.next = next;\n }\n else {\n var nextStyleString = this.getStyle(style.next, data);\n if (!isNullOrUndefined(nextStyleString)) {\n this.parseStyle(data, nextStyleString, styles);\n wStyle.next = styles.findByName(nextStyleString.name);\n }\n else {\n wStyle.next = wStyle;\n }\n }\n }\n }\n }\n };\n SfdtReader.prototype.getStyle = function (name, data) {\n for (var i = 0; i < data.styles.length; i++) {\n if (data.styles[i].name === name) {\n return data.styles[i];\n }\n }\n return undefined;\n };\n SfdtReader.prototype.parseAbstractList = function (data, abstractLists) {\n for (var i = 0; i < data.abstractLists.length; i++) {\n var abstractList = new WAbstractList();\n var abstract = data.abstractLists[i];\n abstractLists.push(abstractList);\n if (!isNullOrUndefined(abstract)) {\n if (!isNullOrUndefined(abstract.abstractListId)) {\n abstractList.abstractListId = abstract.abstractListId;\n }\n if (!isNullOrUndefined(abstract.levels)) {\n for (var j = 0; j < abstract.levels.length; j++) {\n var level = abstract.levels[j];\n if (!isNullOrUndefined(level)) {\n var listLevel = this.parseListLevel(level, abstractList);\n abstractList.levels.push(listLevel);\n }\n }\n }\n }\n }\n };\n SfdtReader.prototype.parseListLevel = function (data, owner) {\n var listLevel = new WListLevel(owner);\n if (data.listLevelPattern === 'Bullet') {\n listLevel.listLevelPattern = 'Bullet';\n listLevel.numberFormat = !isNullOrUndefined(data.numberFormat) ? data.numberFormat : '';\n }\n else {\n listLevel.listLevelPattern = data.listLevelPattern;\n listLevel.startAt = data.startAt;\n listLevel.numberFormat = !isNullOrUndefined(data.numberFormat) ? data.numberFormat : '';\n if (data.restartLevel >= 0) {\n listLevel.restartLevel = data.restartLevel;\n }\n else {\n listLevel.restartLevel = data.levelNumber;\n }\n }\n listLevel.followCharacter = data.followCharacter;\n this.parseCharacterFormat(data.characterFormat, listLevel.characterFormat);\n this.parseParagraphFormat(data.paragraphFormat, listLevel.paragraphFormat);\n return listLevel;\n };\n SfdtReader.prototype.parseList = function (data, listCollection) {\n for (var i = 0; i < data.lists.length; i++) {\n var list = new WList();\n var lists = data.lists[i];\n if (!isNullOrUndefined(lists.abstractListId)) {\n list.abstractListId = lists.abstractListId;\n list.abstractList = this.viewer.getAbstractListById(lists.abstractListId);\n }\n listCollection.push(list);\n if (!isNullOrUndefined(lists.listId)) {\n list.listId = lists.listId;\n }\n if (lists.hasOwnProperty('levelOverrides')) {\n this.parseLevelOverride(lists.levelOverrides, list);\n }\n }\n };\n SfdtReader.prototype.parseLevelOverride = function (data, list) {\n if (isNullOrUndefined(data)) {\n return;\n }\n for (var i = 0; i < data.length; i++) {\n var levelOverrides = new WLevelOverride();\n var levelOverride = data[i];\n levelOverrides.startAt = levelOverride.startAt;\n levelOverrides.levelNumber = levelOverride.levelNumber;\n if (!isNullOrUndefined(levelOverride.overrideListLevel)) {\n levelOverrides.overrideListLevel = this.parseListLevel(levelOverride.overrideListLevel, levelOverrides);\n }\n list.levelOverrides.push(levelOverrides);\n }\n };\n SfdtReader.prototype.parseSections = function (data, sections) {\n for (var i = 0; i < data.length; i++) {\n var section = new BodyWidget();\n section.sectionFormat = new WSectionFormat(section);\n section.index = i;\n var item = data[i];\n if (!isNullOrUndefined(item.sectionFormat)) {\n this.parseSectionFormat(item.sectionFormat, section.sectionFormat);\n }\n if (!isNullOrUndefined(item.headersFooters)) {\n this.viewer.headersFooters.push(this.parseHeaderFooter(item.headersFooters, this.viewer.headersFooters));\n }\n this.parseTextBody(item.blocks, section);\n for (var i_1 = 0; i_1 < section.childWidgets.length; i_1++) {\n section.childWidgets[i_1].containerWidget = section;\n }\n sections.push(section);\n }\n };\n /**\n * @private\n */\n SfdtReader.prototype.parseHeaderFooter = function (data, headersFooters) {\n var hfs = {};\n if (!isNullOrUndefined(data.header)) {\n var oddHeader = new HeaderFooterWidget('OddHeader');\n hfs[0] = oddHeader;\n this.parseTextBody(data.header.blocks, oddHeader);\n }\n if (!isNullOrUndefined(data.footer)) {\n var oddFooter = new HeaderFooterWidget('OddFooter');\n hfs[1] = oddFooter;\n this.parseTextBody(data.footer.blocks, oddFooter);\n }\n if (!isNullOrUndefined(data.evenHeader)) {\n var evenHeader = new HeaderFooterWidget('EvenHeader');\n hfs[2] = evenHeader;\n this.parseTextBody(data.evenHeader.blocks, evenHeader);\n }\n if (!isNullOrUndefined(data.evenFooter)) {\n var evenFooter = new HeaderFooterWidget('EvenFooter');\n hfs[3] = evenFooter;\n this.parseTextBody(data.evenFooter.blocks, evenFooter);\n }\n if (!isNullOrUndefined(data.firstPageHeader)) {\n var firstPageHeader = new HeaderFooterWidget('FirstPageHeader');\n hfs[4] = firstPageHeader;\n this.parseTextBody(data.firstPageHeader.blocks, firstPageHeader);\n }\n if (!isNullOrUndefined(data.firstPageFooter)) {\n var firstPageFooter = new HeaderFooterWidget('FirstPageFooter');\n hfs[5] = firstPageFooter;\n this.parseTextBody(data.firstPageFooter.blocks, firstPageFooter);\n }\n return hfs;\n };\n SfdtReader.prototype.parseTextBody = function (data, section) {\n this.parseBody(data, section.childWidgets, section);\n };\n SfdtReader.prototype.parseBody = function (data, blocks, container) {\n if (!isNullOrUndefined(data)) {\n for (var i = 0; i < data.length; i++) {\n var block = data[i];\n if (block.hasOwnProperty('inlines')) {\n var writeInlineFormat = false;\n //writeInlineFormat = this.isPasting && i === data.length - 1;\n var paragraph = new ParagraphWidget();\n paragraph.characterFormat = new WCharacterFormat(paragraph);\n paragraph.paragraphFormat = new WParagraphFormat(paragraph);\n this.parseCharacterFormat(block.characterFormat, paragraph.characterFormat);\n this.parseParagraphFormat(block.paragraphFormat, paragraph.paragraphFormat);\n var styleObj = void 0;\n if (!isNullOrUndefined(block.paragraphFormat) && !isNullOrUndefined(block.paragraphFormat.styleName)) {\n styleObj = this.viewer.styles.findByName(block.paragraphFormat.styleName, 'Paragraph');\n if (!isNullOrUndefined(styleObj)) {\n paragraph.paragraphFormat.ApplyStyle(styleObj);\n }\n }\n if (block.inlines.length > 0) {\n this.parseParagraph(block.inlines, paragraph, writeInlineFormat);\n }\n blocks.push(paragraph);\n paragraph.index = i;\n paragraph.containerWidget = container;\n }\n else if (block.hasOwnProperty('rows')) {\n this.parseTable(block, blocks, i, container);\n }\n }\n }\n };\n SfdtReader.prototype.parseTable = function (block, blocks, index, section) {\n var table = new TableWidget();\n table.index = index;\n table.tableFormat = new WTableFormat(table);\n if (!isNullOrUndefined(block.tableFormat)) {\n this.parseTableFormat(block.tableFormat, table.tableFormat);\n }\n table.title = block.title;\n table.description = block.description;\n for (var i = 0; i < block.rows.length; i++) {\n var row = new TableRowWidget();\n row.rowFormat = new WRowFormat(row);\n var tableRow = block.rows[i];\n if (tableRow.hasOwnProperty('rowFormat')) {\n this.parseRowFormat(tableRow.rowFormat, row.rowFormat);\n this.parseRowGridValues(tableRow, row.rowFormat);\n this.parseRowGridValues(tableRow.rowFormat, row.rowFormat);\n row.index = i;\n for (var j = 0; j < block.rows[i].cells.length; j++) {\n var cell = new TableCellWidget();\n cell.cellFormat = new WCellFormat(cell);\n row.childWidgets.push(cell);\n cell.containerWidget = row;\n cell.index = j;\n cell.rowIndex = i;\n if (block.rows[i].cells[j].hasOwnProperty('cellFormat')) {\n this.parseCellFormat(block.rows[i].cells[j].cellFormat, cell.cellFormat);\n }\n this.parseTextBody(block.rows[i].cells[j].blocks, cell);\n }\n }\n table.childWidgets.push(row);\n row.containerWidget = table;\n }\n table.containerWidget = section;\n blocks.push(table);\n table.isGridUpdated = false;\n };\n SfdtReader.prototype.parseRowGridValues = function (data, rowFormat) {\n if (!isNullOrUndefined(data.gridBefore)) {\n rowFormat.gridBefore = data.gridBefore;\n }\n if (!isNullOrUndefined(data.gridBeforeWidth)) {\n rowFormat.gridBeforeWidth = data.gridBeforeWidth;\n }\n if (!isNullOrUndefined(data.gridBeforeWidthType)) {\n rowFormat.gridBeforeWidthType = data.gridBeforeWidthType;\n }\n if (!isNullOrUndefined(data.gridAfter)) {\n rowFormat.gridAfter = data.gridAfter;\n }\n if (!isNullOrUndefined(data.gridAfterWidth)) {\n rowFormat.gridAfterWidth = data.gridAfterWidth;\n }\n if (!isNullOrUndefined(data.gridAfterWidthType)) {\n rowFormat.gridAfterWidthType = data.gridAfterWidthType;\n }\n };\n SfdtReader.prototype.parseParagraph = function (data, paragraph, writeInlineFormat) {\n var lineWidget = new LineWidget(paragraph);\n for (var i = 0; i < data.length; i++) {\n var inline = data[i];\n if (inline.hasOwnProperty('text')) {\n var textElement = undefined;\n if (this.viewer.isPageField) {\n textElement = new FieldTextElementBox();\n textElement.fieldBegin = this.viewer.fieldStacks[this.viewer.fieldStacks.length - 1];\n }\n else if (inline.text === '\\t') {\n textElement = new TabElementBox();\n }\n else {\n textElement = new TextElementBox();\n }\n textElement.characterFormat = new WCharacterFormat(textElement);\n this.parseCharacterFormat(inline.characterFormat, textElement.characterFormat, writeInlineFormat);\n /*�tslint:disable-next-line:max-line-length */\n if (!isNullOrUndefined(inline.characterFormat) && !isNullOrUndefined(inline.characterFormat.styleName)) {\n var charStyle = this.viewer.styles.findByName(inline.characterFormat.styleName, 'Character');\n textElement.characterFormat.ApplyStyle(charStyle);\n }\n textElement.text = inline.text;\n textElement.line = lineWidget;\n lineWidget.children.push(textElement);\n }\n else if (inline.hasOwnProperty('imageString')) {\n var image = new ImageElementBox(data[i].isInlineImage);\n image.isMetaFile = data[i].isMetaFile;\n image.characterFormat = new WCharacterFormat(image);\n image.line = lineWidget;\n lineWidget.children.push(image);\n image.imageString = inline.imageString;\n image.width = HelperMethods.convertPointToPixel(inline.width);\n image.height = HelperMethods.convertPointToPixel(inline.height);\n this.parseCharacterFormat(inline.characterFormat, image.characterFormat);\n }\n else if (inline.hasOwnProperty('hasFieldEnd') || (inline.hasOwnProperty('fieldType') && inline.fieldType === 0)) {\n var fieldBegin = new FieldElementBox(0);\n fieldBegin.hasFieldEnd = inline.hasFieldEnd;\n this.viewer.fieldStacks.push(fieldBegin);\n fieldBegin.line = lineWidget;\n this.viewer.fields.push(fieldBegin);\n lineWidget.children.push(fieldBegin);\n }\n else if (inline.hasOwnProperty('fieldType')) {\n var field = undefined;\n if (inline.fieldType === 2) {\n field = new FieldElementBox(2);\n this.fieldSeparator = field;\n if (this.viewer.fieldStacks.length > 0) {\n field.fieldBegin = this.viewer.fieldStacks[this.viewer.fieldStacks.length - 1];\n field.fieldBegin.fieldSeparator = field;\n //finds the whether the field is page filed or not\n var lineWidgetCount = lineWidget.children.length;\n if (lineWidgetCount >= 2 && (lineWidget.children[lineWidgetCount - 2] instanceof FieldElementBox)\n && lineWidget.children[lineWidgetCount - 2].hasFieldEnd\n && (lineWidget.children[lineWidgetCount - 1] instanceof TextElementBox)) {\n var fieldElementText = lineWidget.children[lineWidgetCount - 1].text;\n if (fieldElementText.match('PAGE')) {\n this.viewer.isPageField = true;\n }\n }\n }\n }\n else if (inline.fieldType === 1) {\n field = new FieldElementBox(1);\n //For Field End Updated begin and separator. \n if (this.viewer.fieldStacks.length > 0) {\n field.fieldBegin = this.viewer.fieldStacks[this.viewer.fieldStacks.length - 1];\n field.fieldBegin.fieldEnd = field;\n }\n if (!isNullOrUndefined(field.fieldBegin) && field.fieldBegin.fieldSeparator) {\n field.fieldSeparator = field.fieldBegin.fieldSeparator;\n field.fieldBegin.fieldSeparator.fieldEnd = field;\n }\n //After setting all the property clear the field values\n this.viewer.fieldStacks.splice(this.viewer.fieldStacks.length - 1, 1);\n this.fieldSeparator = undefined;\n this.viewer.isPageField = false;\n this.viewer.fieldCollection.push(field.fieldBegin);\n }\n field.line = lineWidget;\n lineWidget.children.push(field);\n }\n else if (inline.hasOwnProperty('bookmarkType')) {\n var bookmark = undefined;\n bookmark = new BookmarkElementBox(inline.bookmarkType);\n bookmark.name = inline.name;\n lineWidget.children.push(bookmark);\n bookmark.line = lineWidget;\n if (inline.bookmarkType === 0) {\n this.viewer.bookmarks.add(bookmark.name, bookmark);\n }\n else if (inline.bookmarkType === 1) {\n if (this.viewer.bookmarks.containsKey(bookmark.name)) {\n var bookmarkStart = this.viewer.bookmarks.get(bookmark.name);\n bookmarkStart.reference = bookmark;\n bookmark.reference = bookmarkStart;\n }\n }\n }\n }\n paragraph.childWidgets.push(lineWidget);\n };\n SfdtReader.prototype.parseTableFormat = function (sourceFormat, tableFormat) {\n this.parseBorders(sourceFormat.borders, tableFormat.borders);\n if (!isNullOrUndefined(sourceFormat.cellSpacing)) {\n tableFormat.cellSpacing = sourceFormat.cellSpacing;\n }\n if (!isNullOrUndefined(sourceFormat.leftMargin)) {\n tableFormat.leftMargin = sourceFormat.leftMargin;\n }\n if (!isNullOrUndefined(sourceFormat.topMargin)) {\n tableFormat.topMargin = sourceFormat.topMargin;\n }\n if (!isNullOrUndefined(sourceFormat.rightMargin)) {\n tableFormat.rightMargin = sourceFormat.rightMargin;\n }\n if (!isNullOrUndefined(sourceFormat.bottomMargin)) {\n tableFormat.bottomMargin = sourceFormat.bottomMargin;\n }\n if (!isNullOrUndefined(sourceFormat.leftIndent)) {\n tableFormat.leftIndent = sourceFormat.leftIndent;\n }\n this.parseShading(sourceFormat.shading, tableFormat.shading);\n if (!isNullOrUndefined(sourceFormat.tableAlignment)) {\n tableFormat.tableAlignment = sourceFormat.tableAlignment;\n }\n if (!isNullOrUndefined(sourceFormat.preferredWidth)) {\n tableFormat.preferredWidth = sourceFormat.preferredWidth;\n }\n if (!isNullOrUndefined(sourceFormat.preferredWidthType)) {\n tableFormat.preferredWidthType = sourceFormat.preferredWidthType;\n }\n };\n SfdtReader.prototype.parseCellFormat = function (sourceFormat, cellFormat) {\n if (!isNullOrUndefined(sourceFormat)) {\n this.parseBorders(sourceFormat.borders, cellFormat.borders);\n if (!sourceFormat.isSamePaddingAsTable) {\n // cellFormat.ClearMargins();\n //else\n this.parseCellMargin(sourceFormat, cellFormat);\n }\n if (!isNullOrUndefined(sourceFormat.cellWidth)) {\n cellFormat.cellWidth = sourceFormat.cellWidth;\n }\n if (!isNullOrUndefined(sourceFormat.columnSpan)) {\n cellFormat.columnSpan = sourceFormat.columnSpan;\n }\n if (!isNullOrUndefined(sourceFormat.rowSpan)) {\n cellFormat.rowSpan = sourceFormat.rowSpan;\n }\n this.parseShading(sourceFormat.shading, cellFormat.shading);\n if (!isNullOrUndefined(sourceFormat.verticalAlignment)) {\n cellFormat.verticalAlignment = sourceFormat.verticalAlignment;\n }\n if (!isNullOrUndefined(sourceFormat.preferredWidthType)) {\n cellFormat.preferredWidthType = sourceFormat.preferredWidthType;\n }\n if (!isNullOrUndefined(sourceFormat.preferredWidth)) {\n cellFormat.preferredWidth = sourceFormat.preferredWidth;\n }\n }\n };\n SfdtReader.prototype.parseCellMargin = function (sourceFormat, cellFormat) {\n if (!isNullOrUndefined(sourceFormat.leftMargin)) {\n cellFormat.leftMargin = sourceFormat.leftMargin;\n }\n if (!isNullOrUndefined(sourceFormat.rightMargin)) {\n cellFormat.rightMargin = sourceFormat.rightMargin;\n }\n if (!isNullOrUndefined(sourceFormat.topMargin)) {\n cellFormat.topMargin = sourceFormat.topMargin;\n }\n if (!isNullOrUndefined(sourceFormat.bottomMargin)) {\n cellFormat.bottomMargin = sourceFormat.bottomMargin;\n }\n };\n SfdtReader.prototype.parseRowFormat = function (sourceFormat, rowFormat) {\n if (!isNullOrUndefined(sourceFormat)) {\n if (!isNullOrUndefined(sourceFormat.allowBreakAcrossPages)) {\n rowFormat.allowBreakAcrossPages = sourceFormat.allowBreakAcrossPages;\n }\n if (!isNullOrUndefined(sourceFormat.isHeader)) {\n rowFormat.isHeader = sourceFormat.isHeader;\n }\n if (!isNullOrUndefined(sourceFormat.heightType)) {\n rowFormat.heightType = sourceFormat.heightType;\n }\n if (!isNullOrUndefined(sourceFormat.height)) {\n rowFormat.height = sourceFormat.height;\n }\n this.parseBorders(sourceFormat.borders, rowFormat.borders);\n }\n };\n SfdtReader.prototype.parseBorders = function (sourceBorders, destBorder) {\n if (!isNullOrUndefined(sourceBorders)) {\n this.parseBorder(sourceBorders.left, destBorder.left);\n this.parseBorder(sourceBorders.right, destBorder.right);\n this.parseBorder(sourceBorders.top, destBorder.top);\n this.parseBorder(sourceBorders.bottom, destBorder.bottom);\n this.parseBorder(sourceBorders.vertical, destBorder.vertical);\n this.parseBorder(sourceBorders.horizontal, destBorder.horizontal);\n this.parseBorder(sourceBorders.diagonalDown, destBorder.diagonalDown);\n this.parseBorder(sourceBorders.diagonalUp, destBorder.diagonalUp);\n }\n };\n SfdtReader.prototype.parseBorder = function (sourceBorder, destBorder) {\n if (!isNullOrUndefined(sourceBorder)) {\n if (!isNullOrUndefined(sourceBorder.color)) {\n destBorder.color = this.getColor(sourceBorder.color);\n }\n if (!isNullOrUndefined(sourceBorder.lineStyle)) {\n destBorder.lineStyle = sourceBorder.lineStyle;\n }\n if (!isNullOrUndefined(sourceBorder.lineWidth)) {\n destBorder.lineWidth = sourceBorder.lineWidth;\n }\n if (!isNullOrUndefined(sourceBorder.hasNoneStyle)) {\n destBorder.hasNoneStyle = sourceBorder.hasNoneStyle;\n }\n }\n };\n SfdtReader.prototype.parseShading = function (sourceShading, destShading) {\n if (!isNullOrUndefined(sourceShading)) {\n if (!isNullOrUndefined(sourceShading.backgroundColor)) {\n destShading.backgroundColor = this.getColor(sourceShading.backgroundColor);\n }\n if (!isNullOrUndefined(sourceShading.foregroundColor)) {\n destShading.foregroundColor = this.getColor(sourceShading.foregroundColor);\n }\n if (!isNullOrUndefined(sourceShading.texture)) {\n destShading.textureStyle = sourceShading.texture;\n }\n }\n };\n SfdtReader.prototype.parseCharacterFormat = function (sourceFormat, characterFormat, writeInlineFormat) {\n if (!isNullOrUndefined(sourceFormat)) {\n if (writeInlineFormat && sourceFormat.hasOwnProperty('inlineFormat')) {\n this.parseCharacterFormat(sourceFormat.inlineFormat, characterFormat);\n return;\n }\n if (!isNullOrUndefined(sourceFormat.baselineAlignment)) {\n characterFormat.baselineAlignment = sourceFormat.baselineAlignment;\n }\n if (!isNullOrUndefined(sourceFormat.underline)) {\n characterFormat.underline = sourceFormat.underline;\n }\n if (!isNullOrUndefined(sourceFormat.strikethrough)) {\n characterFormat.strikethrough = sourceFormat.strikethrough;\n }\n if (!isNullOrUndefined(sourceFormat.fontSize)) {\n characterFormat.fontSize = sourceFormat.fontSize;\n }\n if (!isNullOrUndefined(sourceFormat.fontFamily)) {\n characterFormat.fontFamily = sourceFormat.fontFamily;\n }\n if (!isNullOrUndefined(sourceFormat.bold)) {\n characterFormat.bold = sourceFormat.bold;\n }\n if (!isNullOrUndefined(sourceFormat.italic)) {\n characterFormat.italic = sourceFormat.italic;\n }\n if (!isNullOrUndefined(sourceFormat.highlightColor)) {\n characterFormat.highlightColor = sourceFormat.highlightColor;\n }\n if (!isNullOrUndefined(sourceFormat.fontColor)) {\n characterFormat.fontColor = this.getColor(sourceFormat.fontColor);\n }\n }\n };\n SfdtReader.prototype.getColor = function (color) {\n var convertColor = color;\n return convertColor || '#ffffff';\n };\n SfdtReader.prototype.parseParagraphFormat = function (sourceFormat, paragraphFormat) {\n if (!isNullOrUndefined(sourceFormat)) {\n if (!isNullOrUndefined(sourceFormat.leftIndent)) {\n paragraphFormat.leftIndent = sourceFormat.leftIndent;\n }\n if (!isNullOrUndefined(sourceFormat.rightIndent)) {\n paragraphFormat.rightIndent = sourceFormat.rightIndent;\n }\n if (!isNullOrUndefined(sourceFormat.firstLineIndent)) {\n paragraphFormat.firstLineIndent = sourceFormat.firstLineIndent;\n }\n if (!isNullOrUndefined(sourceFormat.afterSpacing)) {\n paragraphFormat.afterSpacing = sourceFormat.afterSpacing;\n }\n if (!isNullOrUndefined(sourceFormat.beforeSpacing)) {\n paragraphFormat.beforeSpacing = sourceFormat.beforeSpacing;\n }\n if (!isNullOrUndefined(sourceFormat.lineSpacing)) {\n paragraphFormat.lineSpacing = sourceFormat.lineSpacing;\n }\n if (!isNullOrUndefined(sourceFormat.lineSpacingType)) {\n paragraphFormat.lineSpacingType = sourceFormat.lineSpacingType;\n }\n if (!isNullOrUndefined(sourceFormat.textAlignment)) {\n paragraphFormat.textAlignment = sourceFormat.textAlignment;\n }\n if (!isNullOrUndefined(sourceFormat.outlineLevel)) {\n paragraphFormat.outlineLevel = sourceFormat.outlineLevel;\n }\n paragraphFormat.listFormat = new WListFormat();\n if (sourceFormat.hasOwnProperty('listFormat')) {\n this.parseListFormat(sourceFormat, paragraphFormat.listFormat);\n }\n if (sourceFormat.hasOwnProperty('tabs')) {\n this.parseTabStop(sourceFormat.tabs, paragraphFormat.tabs);\n }\n }\n };\n SfdtReader.prototype.parseListFormat = function (block, listFormat) {\n if (!isNullOrUndefined(block.listFormat)) {\n if (!isNullOrUndefined(block.listFormat.listId)) {\n listFormat.listId = block.listFormat.listId;\n listFormat.list = this.viewer.getListById(block.listFormat.listId);\n }\n if (!isNullOrUndefined(block.listFormat.listLevelNumber)) {\n listFormat.listLevelNumber = block.listFormat.listLevelNumber;\n }\n }\n };\n SfdtReader.prototype.parseSectionFormat = function (data, sectionFormat) {\n if (!isNullOrUndefined(data.pageWidth)) {\n sectionFormat.pageWidth = data.pageWidth;\n }\n if (!isNullOrUndefined(data.pageHeight)) {\n sectionFormat.pageHeight = data.pageHeight;\n }\n if (!isNullOrUndefined(data.leftMargin)) {\n sectionFormat.leftMargin = data.leftMargin;\n }\n if (!isNullOrUndefined(data.topMargin)) {\n sectionFormat.topMargin = data.topMargin;\n }\n if (!isNullOrUndefined(data.rightMargin)) {\n sectionFormat.rightMargin = data.rightMargin;\n }\n if (!isNullOrUndefined(data.bottomMargin)) {\n sectionFormat.bottomMargin = data.bottomMargin;\n }\n if (!isNullOrUndefined(data.headerDistance)) {\n sectionFormat.headerDistance = data.headerDistance;\n }\n if (!isNullOrUndefined(data.footerDistance)) {\n sectionFormat.footerDistance = data.footerDistance;\n }\n if (!isNullOrUndefined(data.differentFirstPage)) {\n sectionFormat.differentFirstPage = data.differentFirstPage;\n }\n if (!isNullOrUndefined(data.differentOddAndEvenPages)) {\n sectionFormat.differentOddAndEvenPages = data.differentOddAndEvenPages;\n }\n };\n SfdtReader.prototype.parseTabStop = function (wTabs, tabs) {\n for (var i = 0; i < wTabs.length; i++) {\n var tabStop = new WTabStop();\n tabStop.position = wTabs[i].position;\n tabStop.tabLeader = wTabs[i].tabLeader;\n tabStop.deletePosition = wTabs[i].deletePosition;\n tabStop.tabJustification = wTabs[i].tabJustification;\n tabs.push(tabStop);\n }\n };\n return SfdtReader;\n}());\nexport { SfdtReader };\n","import { WShading } from '../format/index';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { WList } from '../list/list';\nimport { WAbstractList } from '../list/abstract-list';\nimport { WListLevel } from '../list/list-level';\n/**\n * Selection character format implementation\n */\nvar SelectionCharacterFormat = /** @class */ (function () {\n /**\n * @private\n */\n function SelectionCharacterFormat(selection) {\n this.boldIn = undefined;\n this.italicIn = undefined;\n this.underlineIn = undefined;\n this.strikeThroughIn = undefined;\n this.baselineAlignmentIn = undefined;\n this.highlightColorIn = undefined;\n this.fontSizeIn = 0;\n this.fontColorIn = undefined;\n this.selection = selection;\n }\n Object.defineProperty(SelectionCharacterFormat.prototype, \"fontSize\", {\n /**\n * Gets or sets the font size of selected contents.\n */\n get: function () {\n return this.fontSizeIn;\n },\n set: function (value) {\n if (value === this.fontSizeIn) {\n return;\n }\n this.fontSizeIn = value;\n this.notifyPropertyChanged('fontSize');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionCharacterFormat.prototype, \"fontFamily\", {\n /**\n * Gets or sets the font family of selected contents.\n */\n get: function () {\n return this.fontFamilyIn;\n },\n set: function (value) {\n if (value === this.fontFamilyIn) {\n return;\n }\n this.fontFamilyIn = value;\n this.notifyPropertyChanged('fontFamily');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionCharacterFormat.prototype, \"fontColor\", {\n /**\n * Gets or sets the font color of selected contents.\n */\n get: function () {\n return this.fontColorIn;\n },\n set: function (value) {\n if (value === this.fontColorIn) {\n return;\n }\n this.fontColorIn = value;\n this.notifyPropertyChanged('fontColor');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionCharacterFormat.prototype, \"bold\", {\n /**\n * Gets or sets the bold formatting of selected contents.\n */\n get: function () {\n return this.boldIn;\n },\n set: function (value) {\n if (value === this.boldIn) {\n return;\n }\n this.boldIn = value;\n this.notifyPropertyChanged('bold');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionCharacterFormat.prototype, \"italic\", {\n /**\n * Gets or sets the italic formatting of selected contents.\n */\n get: function () {\n return this.italicIn;\n },\n set: function (value) {\n if (value === this.italic) {\n return;\n }\n this.italicIn = value;\n this.notifyPropertyChanged('italic');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionCharacterFormat.prototype, \"strikethrough\", {\n /**\n * Gets or sets the strikethrough property of selected contents.\n */\n get: function () {\n return this.strikeThroughIn;\n },\n set: function (value) {\n if (value === this.strikeThroughIn) {\n return;\n }\n this.strikeThroughIn = value;\n this.notifyPropertyChanged('strikethrough');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionCharacterFormat.prototype, \"baselineAlignment\", {\n /**\n * Gets or sets the baseline alignment property of selected contents.\n */\n get: function () {\n return this.baselineAlignmentIn;\n },\n set: function (value) {\n if (value === this.baselineAlignmentIn) {\n return;\n }\n this.baselineAlignmentIn = value;\n this.notifyPropertyChanged('baselineAlignment');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionCharacterFormat.prototype, \"underline\", {\n /**\n * Gets or sets the underline style of selected contents.\n */\n get: function () {\n return this.underlineIn;\n },\n set: function (value) {\n if (value === this.underlineIn) {\n return;\n }\n this.underlineIn = value;\n this.notifyPropertyChanged('underline');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionCharacterFormat.prototype, \"highlightColor\", {\n /**\n * Gets or sets the highlight color of selected contents.\n */\n get: function () {\n return this.highlightColorIn;\n },\n set: function (value) {\n if (value === this.highlightColorIn) {\n return;\n }\n this.highlightColorIn = value;\n this.notifyPropertyChanged('highlightColor');\n },\n enumerable: true,\n configurable: true\n });\n SelectionCharacterFormat.prototype.getPropertyValue = function (property) {\n switch (property) {\n case 'bold':\n return this.bold;\n case 'italic':\n return this.italic;\n case 'fontSize':\n if (this.fontSize >= 1) {\n return this.fontSize;\n }\n return undefined;\n case 'fontFamily':\n return this.fontFamily;\n case 'strikethrough':\n return this.strikethrough;\n case 'baselineAlignment':\n return this.baselineAlignment;\n case 'highlightColor':\n return this.highlightColor;\n case 'underline':\n return this.underline;\n case 'fontColor':\n return this.fontColor;\n default:\n return undefined;\n }\n };\n /**\n * Notifies whenever property gets changed.\n * @param {string} propertyName\n */\n SelectionCharacterFormat.prototype.notifyPropertyChanged = function (propertyName) {\n // tslint:disable-next-line:max-line-length\n if (!isNullOrUndefined(this.selection) && (this.selection.isCleared || this.selection.owner.isReadOnlyMode || !this.selection.owner.isDocumentLoaded || this.selection.owner.isPastingContent) && !this.selection.isRetrieveFormatting) {\n return;\n }\n if (!isNullOrUndefined(this.selection) && !isNullOrUndefined(this.selection.start) && !this.selection.isRetrieveFormatting) {\n var propertyValue = this.getPropertyValue(propertyName);\n if (!isNullOrUndefined(propertyValue)) {\n this.selection.owner.editorModule.onApplyCharacterFormat(propertyName, propertyValue);\n }\n }\n };\n /**\n * Copies the source format.\n * @param {WCharacterFormat} format\n * @returns void\n * @private\n */\n SelectionCharacterFormat.prototype.copyFormat = function (format) {\n this.styleName = !isNullOrUndefined(format.baseCharStyle) ? format.baseCharStyle.name : 'Default Paragraph Font';\n this.fontSize = format.fontSize;\n this.fontFamily = format.fontFamily;\n this.bold = format.bold;\n this.italic = format.italic;\n this.baselineAlignment = format.baselineAlignment;\n this.underline = format.underline;\n this.fontColor = format.fontColor;\n this.highlightColor = format.highlightColor;\n this.strikethrough = format.strikethrough;\n };\n /**\n * Combines the format.\n * @param {WCharacterFormat} format\n * @private\n */\n SelectionCharacterFormat.prototype.combineFormat = function (format) {\n if (!isNullOrUndefined(this.bold) && this.bold !== format.bold) {\n this.bold = undefined;\n }\n if (!isNullOrUndefined(this.italic) && this.italic !== format.italic) {\n this.italic = undefined;\n }\n if (this.fontSize !== 0 && this.fontSize !== format.fontSize) {\n this.fontSize = 0;\n }\n if (!isNullOrUndefined(this.fontFamily) && this.fontFamily !== format.fontFamily) {\n this.fontFamily = undefined;\n }\n if (!isNullOrUndefined(this.highlightColor) && this.highlightColor !== format.highlightColor) {\n this.highlightColor = undefined;\n }\n if (!isNullOrUndefined(this.baselineAlignment) && this.baselineAlignment !== format.baselineAlignment) {\n this.baselineAlignment = undefined;\n }\n if (!isNullOrUndefined(this.fontColor) && (this.fontColor !== format.fontColor)) {\n this.fontColor = undefined;\n }\n if (!isNullOrUndefined(this.underline) && this.underline !== format.underline) {\n this.underline = undefined;\n }\n if (!isNullOrUndefined(this.strikethrough) && this.strikethrough !== format.strikethrough) {\n this.strikethrough = undefined;\n }\n };\n /**\n * Clones the format.\n * @param {SelectionCharacterFormat} selectionCharacterFormat\n * @returns void\n * @private\n */\n SelectionCharacterFormat.prototype.cloneFormat = function (selectionCharacterFormat) {\n this.bold = selectionCharacterFormat.bold;\n this.italic = selectionCharacterFormat.italic;\n this.underline = selectionCharacterFormat.underline;\n this.strikethrough = selectionCharacterFormat.strikethrough;\n this.baselineAlignment = selectionCharacterFormat.baselineAlignment;\n this.highlightColor = selectionCharacterFormat.highlightColor;\n this.fontSize = selectionCharacterFormat.fontSize;\n this.fontFamily = selectionCharacterFormat.fontFamily;\n this.fontColor = selectionCharacterFormat.fontColor;\n this.styleName = selectionCharacterFormat.styleName;\n };\n /**\n * Checks whether current format is equal to the source format or not.\n * @param {SelectionCharacterFormat} format\n * @returns boolean\n * @private\n */\n SelectionCharacterFormat.prototype.isEqualFormat = function (format) {\n return (this.fontSize === format.fontSize\n && this.strikethrough === format.strikethrough\n && this.bold === format.bold\n && this.fontFamily === format.fontFamily\n && this.underline === format.underline\n && this.highlightColor === format.highlightColor\n && this.italic === format.italic\n && this.baselineAlignment === format.baselineAlignment\n && this.fontColor === format.fontColor);\n };\n /**\n * Clears the format.\n * @returns void\n * @private\n */\n SelectionCharacterFormat.prototype.clearFormat = function () {\n this.fontSizeIn = 0;\n this.boldIn = undefined;\n this.italicIn = undefined;\n this.fontFamilyIn = undefined;\n this.fontColorIn = undefined;\n this.underlineIn = undefined;\n this.strikeThroughIn = undefined;\n this.highlightColorIn = undefined;\n this.baselineAlignmentIn = undefined;\n this.styleName = undefined;\n };\n /**\n * Destroys the maintained resources.\n * @returns void\n * @private\n */\n SelectionCharacterFormat.prototype.destroy = function () {\n this.fontSizeIn = undefined;\n this.boldIn = undefined;\n this.italicIn = undefined;\n this.fontFamilyIn = undefined;\n this.fontColorIn = undefined;\n this.underlineIn = undefined;\n this.strikeThroughIn = undefined;\n this.baselineAlignmentIn = undefined;\n this.highlightColorIn = undefined;\n this.selection = undefined;\n this.styleName = undefined;\n };\n return SelectionCharacterFormat;\n}());\nexport { SelectionCharacterFormat };\n/**\n * Selection paragraph format implementation\n */\nvar SelectionParagraphFormat = /** @class */ (function () {\n /**\n * @private\n */\n function SelectionParagraphFormat(selection, viewer) {\n // Declaring the character format properties.\n this.leftIndentIn = 0;\n this.rightIndentIn = 0;\n this.beforeSpacingIn = 0;\n this.afterSpacingIn = 0;\n this.textAlignmentIn = undefined;\n this.firstLineIndentIn = 0;\n this.lineSpacingIn = 1;\n this.lineSpacingTypeIn = undefined;\n this.listLevelNumberIn = -1;\n this.selection = selection;\n this.viewer = viewer;\n }\n Object.defineProperty(SelectionParagraphFormat.prototype, \"leftIndent\", {\n /**\n * Gets or Sets the left indent for selected paragraphs.\n * @default undefined\n */\n get: function () {\n return this.leftIndentIn;\n },\n set: function (value) {\n if (value === this.leftIndentIn) {\n return;\n }\n this.leftIndentIn = value;\n this.notifyPropertyChanged('leftIndent');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionParagraphFormat.prototype, \"rightIndent\", {\n /**\n * Gets or Sets the right indent for selected paragraphs.\n * @default undefined\n */\n get: function () {\n return this.rightIndentIn;\n },\n set: function (value) {\n if (value === this.rightIndentIn) {\n return;\n }\n this.rightIndentIn = value;\n this.notifyPropertyChanged('rightIndent');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionParagraphFormat.prototype, \"firstLineIndent\", {\n /**\n * Gets or Sets the first line indent for selected paragraphs.\n * @default undefined\n */\n get: function () {\n return this.firstLineIndentIn;\n },\n set: function (value) {\n if (value === this.firstLineIndentIn) {\n return;\n }\n this.firstLineIndentIn = value;\n this.notifyPropertyChanged('firstLineIndent');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionParagraphFormat.prototype, \"textAlignment\", {\n /**\n * Gets or Sets the text alignment for selected paragraphs.\n * @default undefined\n */\n get: function () {\n return this.textAlignmentIn;\n },\n set: function (value) {\n if (value === this.textAlignmentIn) {\n return;\n }\n this.textAlignmentIn = value;\n this.notifyPropertyChanged('textAlignment');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionParagraphFormat.prototype, \"afterSpacing\", {\n /**\n * Gets or Sets the after spacing for selected paragraphs.\n * @default undefined\n */\n get: function () {\n return this.afterSpacingIn;\n },\n set: function (value) {\n if (value === this.afterSpacingIn) {\n return;\n }\n this.afterSpacingIn = value;\n this.notifyPropertyChanged('afterSpacing');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionParagraphFormat.prototype, \"beforeSpacing\", {\n /**\n * Gets or Sets the before spacing for selected paragraphs.\n * @default undefined\n */\n get: function () {\n return this.beforeSpacingIn;\n },\n set: function (value) {\n if (value === this.beforeSpacingIn) {\n return;\n }\n this.beforeSpacingIn = value;\n this.notifyPropertyChanged('beforeSpacing');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionParagraphFormat.prototype, \"lineSpacing\", {\n /**\n * Gets or Sets the line spacing for selected paragraphs.\n * @default undefined\n */\n get: function () {\n return this.lineSpacingIn;\n },\n set: function (value) {\n if (value === this.lineSpacingIn) {\n return;\n }\n this.lineSpacingIn = value;\n this.notifyPropertyChanged('lineSpacing');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionParagraphFormat.prototype, \"lineSpacingType\", {\n /**\n * Gets or Sets the line spacing type for selected paragraphs.\n * @default undefined\n */\n get: function () {\n return this.lineSpacingTypeIn;\n },\n set: function (value) {\n if (value === this.lineSpacingTypeIn) {\n return;\n }\n this.lineSpacingTypeIn = value;\n this.notifyPropertyChanged('lineSpacingType');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionParagraphFormat.prototype, \"listLevelNumber\", {\n /**\n * Gets or Sets the list level number for selected paragraphs.\n * @default undefined\n */\n get: function () {\n return this.listLevelNumberIn;\n },\n set: function (value) {\n if (value === this.listLevelNumberIn) {\n return;\n }\n this.listLevelNumberIn = value;\n this.notifyPropertyChanged('listLevelNumber');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionParagraphFormat.prototype, \"listText\", {\n /**\n * Gets the list text for selected paragraphs.\n */\n get: function () {\n var listFormat = undefined;\n var list = this.viewer.getListById(this.listId);\n if (list instanceof WList && this.listLevelNumberIn > -1 && this.listLevelNumberIn < 9) {\n var listLevel = list.getListLevel(this.listLevelNumber);\n if (listLevel instanceof WListLevel) {\n if (listLevel.listLevelPattern === 'Bullet') {\n listFormat = listLevel.numberFormat;\n }\n else {\n listFormat = listLevel.numberFormat;\n for (var i = 0; i < 9; i++) {\n var levelPattern = '%' + (i + 1);\n if (listFormat.indexOf(levelPattern) > -1) {\n var level = i === this.listLevelNumberIn ? listLevel : list.getListLevel(i);\n var listText = this.selection.owner.viewer.layout.getListTextListLevel(level, 1);\n listFormat = listFormat.replace(levelPattern, listText);\n }\n }\n }\n }\n }\n return listFormat;\n },\n enumerable: true,\n configurable: true\n });\n SelectionParagraphFormat.prototype.getPropertyValue = function (property) {\n switch (property) {\n case 'leftIndent':\n return this.leftIndent;\n case 'rightIndent':\n return this.rightIndent;\n case 'firstLineIndent':\n return this.firstLineIndent;\n case 'beforeSpacing':\n return this.beforeSpacing;\n case 'afterSpacing':\n return this.afterSpacing;\n case 'textAlignment':\n return this.textAlignment;\n case 'lineSpacing':\n return this.lineSpacing;\n case 'lineSpacingType':\n return this.lineSpacingType;\n default:\n return undefined;\n }\n };\n /**\n * Notifies whenever the property gets changed.\n * @param {string} propertyName\n */\n SelectionParagraphFormat.prototype.notifyPropertyChanged = function (propertyName) {\n if (!isNullOrUndefined(this.selection) &&\n (this.selection.owner.isReadOnlyMode || !this.selection.owner.isDocumentLoaded)\n && !this.selection.isRetrieveFormatting) {\n return;\n }\n if (!isNullOrUndefined(this.selection) && !isNullOrUndefined(this.selection.start) && !this.selection.isRetrieveFormatting) {\n var editorModule = this.selection.owner.editorModule;\n var value = this.getPropertyValue(propertyName);\n if ((propertyName === 'leftIndent' || propertyName === 'rightIndent' || propertyName === 'firstLineIndent')\n && !(value >= -1056 && value < 1056)) {\n return;\n }\n if (propertyName === 'listLevelNumber') {\n editorModule.onApplyListInternal(this.viewer.getListById(this.listId), this.listLevelNumber);\n }\n else {\n editorModule.onApplyParagraphFormat(propertyName, value, propertyName === 'textAlignment' ? true : false, false);\n }\n }\n };\n /**\n * Copies the format.\n * @param {WParagraphFormat} format\n * @returns void\n * @private\n */\n SelectionParagraphFormat.prototype.copyFormat = function (format) {\n this.styleName = !isNullOrUndefined(format.baseStyle) ? format.baseStyle.name : 'Normal';\n this.leftIndent = format.leftIndent;\n this.rightIndent = format.rightIndent;\n this.firstLineIndent = format.firstLineIndent;\n this.afterSpacing = format.afterSpacing;\n this.beforeSpacing = format.beforeSpacing;\n this.lineSpacing = format.lineSpacing;\n this.lineSpacingType = format.lineSpacingType;\n this.textAlignment = format.textAlignment;\n if (!isNullOrUndefined(format.listFormat) && !isNullOrUndefined(format.listFormat.listId)) {\n this.listId = format.listFormat.listId;\n this.listLevelNumber = format.listFormat.listLevelNumber;\n }\n else {\n this.listId = undefined;\n this.listLevelNumber = 0;\n }\n };\n /**\n * Copies to format.\n * @param {WParagraphFormat} format\n * @private\n */\n SelectionParagraphFormat.prototype.copyToFormat = function (format) {\n if (isNullOrUndefined(format)) {\n return;\n }\n if (!isNullOrUndefined(this.afterSpacing)) {\n format.afterSpacing = this.afterSpacing;\n }\n if (!isNullOrUndefined(this.beforeSpacing)) {\n format.beforeSpacing = this.beforeSpacing;\n }\n if (!isNullOrUndefined(this.leftIndent)) {\n format.leftIndent = this.leftIndent;\n }\n if (!isNullOrUndefined(this.rightIndent)) {\n format.rightIndent = this.rightIndent;\n }\n if (!isNullOrUndefined(this.textAlignment)) {\n format.textAlignment = this.textAlignment;\n }\n if (!isNullOrUndefined(this.lineSpacing)) {\n format.lineSpacing = this.lineSpacing;\n }\n if (!isNullOrUndefined(this.lineSpacingType)) {\n format.lineSpacingType = this.lineSpacingType;\n }\n if (!isNullOrUndefined(this.firstLineIndent)) {\n format.firstLineIndent = this.firstLineIndent;\n }\n };\n /**\n * Combines the format.\n * @param {WParagraphFormat} format\n * @private\n */\n SelectionParagraphFormat.prototype.combineFormat = function (format) {\n if (!isNullOrUndefined(this.leftIndent) && this.leftIndent !== format.leftIndent) {\n this.leftIndent = undefined;\n }\n if (!isNullOrUndefined(this.rightIndent) && this.rightIndent !== format.rightIndent) {\n this.rightIndent = undefined;\n }\n if (!isNullOrUndefined(this.firstLineIndent) && this.firstLineIndent !== format.firstLineIndent) {\n this.firstLineIndent = undefined;\n }\n if (this.lineSpacing !== 0 && this.lineSpacing !== format.lineSpacing) {\n this.lineSpacing = 0;\n }\n if (this.beforeSpacing !== -1 && this.beforeSpacing !== format.beforeSpacing) {\n this.beforeSpacing = -1;\n }\n if (this.afterSpacing !== -1 && this.afterSpacing !== format.afterSpacing) {\n this.afterSpacing = -1;\n }\n if (!isNullOrUndefined(this.lineSpacingType) && this.lineSpacingType !== format.lineSpacingType) {\n this.lineSpacingType = undefined;\n }\n if (!isNullOrUndefined(this.textAlignment) && this.textAlignment !== format.textAlignment) {\n this.textAlignment = undefined;\n }\n // tslint:disable-next-line:max-line-length\n if (this.listLevelNumber >= 0 && !isNullOrUndefined(this.listId) && (isNullOrUndefined(format.listFormat) || format.listFormat.listLevelNumber !== this.listLevelNumber)) {\n this.listLevelNumber = -1;\n }\n // tslint:disable-next-line:max-line-length\n if (isNullOrUndefined(format.listFormat) || isNullOrUndefined(format.listFormat.listId) || (!isNullOrUndefined(this.listId) && this.listId !== format.listFormat.listId)) {\n this.listId = undefined;\n }\n };\n /**\n * Clears the format.\n * @returns void\n * @private\n */\n SelectionParagraphFormat.prototype.clearFormat = function () {\n this.leftIndent = 0;\n this.rightIndent = 0;\n this.beforeSpacing = 0;\n this.afterSpacing = 0;\n this.firstLineIndent = 0;\n this.lineSpacing = 1;\n this.textAlignment = undefined;\n this.lineSpacingType = undefined;\n this.listId = undefined;\n this.listLevelNumber = -1;\n this.styleName = undefined;\n };\n /**\n * Gets the clone of list at current selection.\n * @returns WList\n * @private\n */\n SelectionParagraphFormat.prototype.getList = function () {\n var list = this.viewer.getListById(this.listId);\n if (!isNullOrUndefined(list)) {\n var listAdv = new WList();\n var abstractList = new WAbstractList();\n var currentAbstractList = this.viewer.getAbstractListById(list.abstractListId);\n var editor = this.selection.owner.editorModule;\n if (!isNullOrUndefined(currentAbstractList)) {\n for (var i = 0; i < currentAbstractList.levels.length; i++) {\n var level = editor.cloneListLevel(currentAbstractList.levels[i]);\n abstractList.levels.push(level);\n level.ownerBase = abstractList;\n }\n }\n else {\n abstractList.levels.push(new WListLevel(abstractList));\n }\n if (!isNullOrUndefined(list.levelOverrides)) {\n for (var i = 0; i < list.levelOverrides.length; i++) {\n var levelOverride = editor.cloneLevelOverride(list.levelOverrides[i]);\n listAdv.levelOverrides.push(levelOverride);\n }\n }\n listAdv.abstractList = abstractList;\n listAdv.abstractListId = abstractList.abstractListId;\n listAdv.sourceListId = list.listId;\n return listAdv;\n }\n return undefined;\n };\n /**\n * Modifies the list at current selection.\n * @param {WList} listAdv\n * @private\n */\n SelectionParagraphFormat.prototype.setList = function (listAdv) {\n if (this.viewer.owner.isReadOnlyMode || !this.viewer.owner.isDocumentLoaded) {\n return;\n }\n var list = this.viewer.getListById(this.listId);\n var collection = undefined;\n var currentAbstractList = listAdv ? this.viewer.getAbstractListById(listAdv.abstractListId) : undefined;\n if (!isNullOrUndefined(list) && !isNullOrUndefined(listAdv)\n && !isNullOrUndefined(currentAbstractList) && listAdv.sourceListId === list.listId) {\n var history_1 = this.viewer.owner.editorHistory;\n var listLevel = this.viewer.layout.getListLevel(list, 1);\n this.selection.owner.isLayoutEnabled = false;\n this.viewer.owner.editorModule.setOffsetValue(this.selection);\n if (history_1) {\n collection = history_1.updateListChangesInHistory(currentAbstractList, list);\n }\n this.viewer.owner.editorModule.updateListParagraphs();\n if (history_1) {\n history_1.applyListChanges(this.selection, collection);\n }\n this.selection.owner.isLayoutEnabled = true;\n this.viewer.renderedLists.clear();\n // this.viewer.pages = [];\n this.viewer.owner.editorModule.layoutWholeDocument();\n this.viewer.owner.editorModule.updateSelectionTextPosition(false);\n if (history_1 && history_1.currentBaseHistoryInfo) {\n if (history_1.currentBaseHistoryInfo.modifiedProperties.length > 0) {\n history_1.currentBaseHistoryInfo.updateSelection();\n }\n history_1.updateHistory();\n }\n this.viewer.owner.editorModule.fireContentChange();\n }\n else if (!isNullOrUndefined(listAdv)) {\n this.selection.owner.isLayoutEnabled = false;\n if (!isNullOrUndefined(currentAbstractList) && this.viewer.abstractLists.indexOf(currentAbstractList) === -1) {\n this.viewer.abstractLists.push(currentAbstractList);\n }\n if (this.viewer.lists.indexOf(listAdv) === -1) {\n this.viewer.lists.push(listAdv);\n }\n //currentAbstractList.listType = 'Numbering';\n this.selection.owner.isLayoutEnabled = true;\n this.selection.owner.editorModule.onApplyList(listAdv);\n }\n else {\n this.selection.owner.editorModule.onApplyList(undefined);\n }\n };\n /**\n * Destroys the managed resources.\n * @returns void\n * @private\n */\n SelectionParagraphFormat.prototype.destroy = function () {\n this.leftIndentIn = undefined;\n this.rightIndentIn = undefined;\n this.beforeSpacingIn = undefined;\n this.afterSpacingIn = undefined;\n this.firstLineIndentIn = undefined;\n this.lineSpacingIn = undefined;\n this.textAlignmentIn = undefined;\n this.lineSpacingTypeIn = undefined;\n this.listId = undefined;\n this.listLevelNumberIn = undefined;\n this.viewer = undefined;\n this.selection = undefined;\n this.styleName = undefined;\n };\n return SelectionParagraphFormat;\n}());\nexport { SelectionParagraphFormat };\n/**\n * Selection section format implementation\n */\nvar SelectionSectionFormat = /** @class */ (function () {\n /**\n * @private\n */\n function SelectionSectionFormat(selection) {\n this.differentFirstPageIn = undefined;\n this.differentOddAndEvenPagesIn = undefined;\n this.selection = selection;\n }\n Object.defineProperty(SelectionSectionFormat.prototype, \"pageHeight\", {\n /**\n * Gets or sets the page height.\n */\n get: function () {\n return this.pageHeightIn;\n },\n set: function (value) {\n this.pageHeightIn = value;\n this.notifyPropertyChanged('pageHeight');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionSectionFormat.prototype, \"pageWidth\", {\n /**\n * Gets or sets the page width.\n */\n get: function () {\n return this.pageWidthIn;\n },\n set: function (value) {\n this.pageWidthIn = value;\n this.notifyPropertyChanged('pageWidth');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionSectionFormat.prototype, \"leftMargin\", {\n /**\n * Gets or sets the page left margin.\n */\n get: function () {\n return this.leftMarginIn;\n },\n set: function (value) {\n this.leftMarginIn = value;\n this.notifyPropertyChanged('leftMargin');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionSectionFormat.prototype, \"bottomMargin\", {\n /**\n * Gets or sets the page bottom margin.\n */\n get: function () {\n return this.bottomMarginIn;\n },\n set: function (value) {\n this.bottomMarginIn = value;\n this.notifyPropertyChanged('bottomMargin');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionSectionFormat.prototype, \"topMargin\", {\n /**\n * Gets or sets the page top margin.\n */\n get: function () {\n return this.topMarginIn;\n },\n set: function (value) {\n this.topMarginIn = value;\n this.notifyPropertyChanged('topMargin');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionSectionFormat.prototype, \"rightMargin\", {\n /**\n * Gets or sets the page right margin.\n */\n get: function () {\n return this.rightMarginIn;\n },\n set: function (value) {\n this.rightMarginIn = value;\n this.notifyPropertyChanged('rightMargin');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionSectionFormat.prototype, \"headerDistance\", {\n /**\n * Gets or sets the header distance.\n */\n get: function () {\n return this.headerDistanceIn;\n },\n set: function (value) {\n this.headerDistanceIn = value;\n this.notifyPropertyChanged('headerDistance');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionSectionFormat.prototype, \"footerDistance\", {\n /**\n * Gets or sets the footer distance.\n */\n get: function () {\n return this.footerDistanceIn;\n },\n set: function (value) {\n this.footerDistanceIn = value;\n this.notifyPropertyChanged('footerDistance');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionSectionFormat.prototype, \"differentFirstPage\", {\n /**\n * Gets or sets a value indicating whether the section has different first page.\n */\n get: function () {\n return this.differentFirstPageIn;\n },\n set: function (value) {\n this.differentFirstPageIn = value;\n this.notifyPropertyChanged('differentFirstPage');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionSectionFormat.prototype, \"differentOddAndEvenPages\", {\n /**\n * Gets or sets a value indicating whether the section has different odd and even page.\n */\n get: function () {\n return this.differentOddAndEvenPagesIn;\n },\n set: function (value) {\n this.differentOddAndEvenPagesIn = value;\n this.notifyPropertyChanged('differentOddAndEvenPages');\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Copies the format.\n * @param {WSectionFormat} format\n * @returns void\n * @private\n */\n SelectionSectionFormat.prototype.copyFormat = function (format) {\n this.pageHeight = format.pageHeight;\n this.pageWidth = format.pageWidth;\n this.leftMargin = format.leftMargin;\n this.topMargin = format.topMargin;\n this.rightMargin = format.rightMargin;\n this.bottomMargin = format.bottomMargin;\n this.headerDistance = format.headerDistance;\n this.footerDistance = format.footerDistance;\n this.differentFirstPage = format.differentFirstPage;\n this.differentOddAndEvenPages = format.differentOddAndEvenPages;\n };\n SelectionSectionFormat.prototype.notifyPropertyChanged = function (propertyName) {\n var selection = this.selection;\n if (!isNullOrUndefined(selection) && (selection.isCleared || selection.owner.isPastingContent\n || selection.owner.isReadOnlyMode || !selection.owner.isDocumentLoaded)\n && !selection.isRetrieveFormatting) {\n return;\n }\n if (!isNullOrUndefined(selection) && !isNullOrUndefined(selection.start) && !selection.isRetrieveFormatting) {\n var value = this.getPropertyvalue(propertyName);\n if (!isNullOrUndefined(value)) {\n selection.owner.editorModule.onApplySectionFormat(propertyName, value);\n }\n }\n };\n SelectionSectionFormat.prototype.getPropertyvalue = function (propertyName) {\n switch (propertyName) {\n case 'pageHeight':\n if (this.pageHeight > 0) {\n return this.pageHeight;\n }\n return undefined;\n case 'pageWidth':\n if (this.pageWidth > 0) {\n return this.pageWidth;\n }\n return undefined;\n case 'leftMargin':\n if (this.leftMargin >= 0) {\n return this.leftMargin;\n }\n return undefined;\n case 'rightMargin':\n if (this.rightMargin >= 0) {\n return this.rightMargin;\n }\n return undefined;\n case 'topMargin':\n if (this.topMargin >= 0) {\n return this.topMargin;\n }\n return undefined;\n case 'bottomMargin':\n if (this.bottomMargin >= 0) {\n return this.bottomMargin;\n }\n return undefined;\n case 'differentFirstPage':\n if (!isNullOrUndefined(this.differentFirstPage)) {\n return this.differentFirstPage;\n }\n return undefined;\n case 'differentOddAndEvenPages':\n if (!isNullOrUndefined(this.differentOddAndEvenPages)) {\n return this.differentOddAndEvenPages;\n }\n return undefined;\n case 'headerDistance':\n return this.headerDistanceIn;\n case 'footerDistance':\n return this.footerDistance;\n default:\n return undefined;\n }\n };\n /**\n * Combines the format.\n * @param {WSectionFormat} format\n * @private\n */\n SelectionSectionFormat.prototype.combineFormat = function (format) {\n if (this.pageHeight > 0 && this.pageHeight !== format.pageHeight) {\n this.pageHeight = 0;\n }\n if (this.pageWidth > 0 && this.pageWidth !== format.pageWidth) {\n this.pageWidth = 0;\n }\n if (this.leftMargin > -1 && this.leftMargin !== format.leftMargin) {\n this.leftMargin = -1;\n }\n if (this.topMargin > -1 && this.topMargin !== format.topMargin) {\n this.topMargin = -1;\n }\n if (this.rightMargin > -1 && this.rightMargin !== format.rightMargin) {\n this.rightMargin = -1;\n }\n if (this.bottomMargin > -1 && this.bottomMargin !== format.bottomMargin) {\n this.bottomMargin = -1;\n }\n if (this.headerDistance !== 0 && this.headerDistance !== format.headerDistance) {\n this.headerDistance = 0;\n }\n if (this.footerDistance !== 0 && this.footerDistance !== format.footerDistance) {\n this.footerDistance = 0;\n }\n if (!isNullOrUndefined(this.differentFirstPage) && this.differentFirstPage !== format.differentFirstPage) {\n this.differentFirstPage = undefined;\n }\n if (!isNullOrUndefined(this.differentOddAndEvenPages) && this.differentOddAndEvenPages !== format.differentOddAndEvenPages) {\n this.differentOddAndEvenPages = undefined;\n }\n };\n /**\n * Clears the format.\n * @returns void\n * @private\n */\n SelectionSectionFormat.prototype.clearFormat = function () {\n this.headerDistance = 0;\n this.footerDistance = 0;\n this.pageHeight = 0;\n this.pageWidth = 0;\n this.leftMargin = -1;\n this.rightMargin = -1;\n this.topMargin = -1;\n this.bottomMargin = -1;\n this.differentFirstPage = undefined;\n this.differentOddAndEvenPages = undefined;\n };\n /**\n * Destroys the managed resources.\n * @returns void\n * @private\n */\n SelectionSectionFormat.prototype.destroy = function () {\n this.headerDistanceIn = undefined;\n this.footerDistanceIn = undefined;\n this.pageHeightIn = undefined;\n this.pageWidthIn = undefined;\n this.leftMarginIn = undefined;\n this.rightMarginIn = undefined;\n this.topMarginIn = undefined;\n this.bottomMarginIn = undefined;\n this.differentFirstPageIn = undefined;\n this.differentOddAndEvenPagesIn = undefined;\n this.selection = undefined;\n };\n return SelectionSectionFormat;\n}());\nexport { SelectionSectionFormat };\n/**\n * Selection table format implementation\n */\nvar SelectionTableFormat = /** @class */ (function () {\n /**\n * @private\n */\n function SelectionTableFormat(selection) {\n this.leftIndentIn = 0;\n this.backgroundIn = undefined;\n this.tableAlignmentIn = undefined;\n this.cellSpacingIn = 0;\n this.leftMarginIn = 0;\n this.rightMarginIn = 0;\n this.topMarginIn = 0;\n this.bottomMarginIn = 0;\n this.preferredWidthIn = 0;\n this.selection = selection;\n }\n Object.defineProperty(SelectionTableFormat.prototype, \"table\", {\n /**\n * Gets or sets the table.\n * @private\n */\n get: function () {\n return this.tableIn;\n },\n set: function (value) {\n this.tableIn = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionTableFormat.prototype, \"leftIndent\", {\n /**\n * Gets or Sets the left indent for selected table.\n * @private\n */\n get: function () {\n return this.leftIndentIn;\n },\n set: function (value) {\n if (value === this.leftIndentIn) {\n return;\n }\n this.leftIndentIn = value;\n this.notifyPropertyChanged('leftIndent');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionTableFormat.prototype, \"topMargin\", {\n /**\n * Gets or Sets the default top margin of cell for selected table.\n * @default undefined\n */\n get: function () {\n return this.topMarginIn;\n },\n set: function (value) {\n if (value === this.topMarginIn) {\n return;\n }\n this.topMarginIn = value;\n this.notifyPropertyChanged('topMargin');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionTableFormat.prototype, \"background\", {\n /**\n * Gets or Sets the background for selected table.\n * @default undefined\n */\n get: function () {\n return this.backgroundIn;\n },\n set: function (value) {\n if (value === this.backgroundIn) {\n return;\n }\n this.backgroundIn = value;\n this.notifyPropertyChanged('background');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionTableFormat.prototype, \"tableAlignment\", {\n /**\n * Gets or Sets the table alignment for selected table.\n * @default undefined\n */\n get: function () {\n return this.tableAlignmentIn;\n },\n set: function (value) {\n if (value === this.tableAlignmentIn) {\n return;\n }\n this.tableAlignmentIn = value;\n this.notifyPropertyChanged('tableAlignment');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionTableFormat.prototype, \"leftMargin\", {\n /**\n * Gets or Sets the default left margin of cell for selected table.\n * @default undefined\n */\n get: function () {\n return this.leftMarginIn;\n },\n set: function (value) {\n if (value === this.leftMarginIn) {\n return;\n }\n this.leftMarginIn = value;\n this.notifyPropertyChanged('leftMargin');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionTableFormat.prototype, \"bottomMargin\", {\n /**\n * Gets or Sets the default bottom margin of cell for selected table.\n * @default undefined\n */\n get: function () {\n return this.bottomMarginIn;\n },\n set: function (value) {\n if (value === this.bottomMarginIn) {\n return;\n }\n this.bottomMarginIn = value;\n this.notifyPropertyChanged('bottomMargin');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionTableFormat.prototype, \"cellSpacing\", {\n /**\n * Gets or Sets the cell spacing for selected table.\n * @default undefined\n */\n get: function () {\n return this.cellSpacingIn;\n },\n set: function (value) {\n if (value === this.cellSpacingIn) {\n return;\n }\n this.cellSpacingIn = value;\n this.notifyPropertyChanged('cellSpacing');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionTableFormat.prototype, \"rightMargin\", {\n /**\n * Gets or Sets the default right margin of cell for selected table.\n * @default undefined\n */\n get: function () {\n return this.rightMarginIn;\n },\n set: function (value) {\n if (value === this.rightMarginIn) {\n return;\n }\n this.rightMarginIn = value;\n this.notifyPropertyChanged('rightMargin');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionTableFormat.prototype, \"preferredWidth\", {\n /**\n * Gets or Sets the preferred width for selected table.\n * @default undefined\n */\n get: function () {\n return this.preferredWidthIn;\n },\n set: function (value) {\n if (value === this.preferredWidthIn) {\n return;\n }\n this.preferredWidthIn = value;\n this.notifyPropertyChanged('preferredWidth');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionTableFormat.prototype, \"preferredWidthType\", {\n /**\n * Gets or Sets the preferred width type for selected table.\n * @default undefined\n */\n get: function () {\n return this.preferredWidthTypeIn;\n },\n set: function (value) {\n if (value === this.preferredWidthTypeIn) {\n return;\n }\n this.preferredWidthTypeIn = value;\n this.notifyPropertyChanged('preferredWidthType');\n },\n enumerable: true,\n configurable: true\n });\n SelectionTableFormat.prototype.getPropertyValue = function (propertyName) {\n switch (propertyName) {\n case 'tableAlignment':\n return this.tableAlignment;\n case 'leftIndent':\n return this.leftIndent;\n case 'cellSpacing':\n return this.cellSpacing;\n case 'leftMargin':\n return this.leftMargin;\n case 'rightMargin':\n return this.rightMargin;\n case 'topMargin':\n return this.topMargin;\n case 'bottomMargin':\n return this.bottomMargin;\n case 'background':\n var shading = new WShading();\n shading.backgroundColor = this.background;\n return shading;\n case 'preferredWidth':\n return this.preferredWidth;\n case 'preferredWidthType':\n return this.preferredWidthType;\n default:\n return undefined;\n }\n };\n SelectionTableFormat.prototype.notifyPropertyChanged = function (propertyName) {\n if (!isNullOrUndefined(this.selection) && (this.selection.isCleared\n || !this.selection.owner.isDocumentLoaded || this.selection.owner.isReadOnlyMode\n || this.selection.owner.isPastingContent) && !this.selection.isRetrieveFormatting) {\n return;\n }\n if (!isNullOrUndefined(this.selection) && !isNullOrUndefined(this.selection.start) && !this.selection.isRetrieveFormatting) {\n var value = this.getPropertyValue(propertyName);\n if (propertyName === 'background') {\n propertyName = 'shading';\n }\n if (!isNullOrUndefined(value)) {\n this.selection.owner.editorModule.onApplyTableFormat(propertyName, value);\n }\n }\n };\n /**\n * Copies the format.\n * @param {WTableFormat} format Format to copy.\n * @returns void\n * @private\n */\n SelectionTableFormat.prototype.copyFormat = function (format) {\n this.leftIndent = format.leftIndent;\n this.background = format.shading.backgroundColor;\n this.tableAlignment = format.tableAlignment;\n this.leftMargin = format.leftMargin;\n this.rightMargin = format.rightMargin;\n this.topMargin = format.topMargin;\n this.bottomMargin = format.bottomMargin;\n this.cellSpacing = format.cellSpacing;\n this.preferredWidth = format.preferredWidth;\n this.preferredWidthType = format.preferredWidthType;\n };\n /**\n * Clears the format.\n * @returns void\n * @private\n */\n SelectionTableFormat.prototype.clearFormat = function () {\n this.table = undefined;\n this.leftIndent = 0;\n this.background = undefined;\n this.leftIndent = 0;\n this.leftMargin = 0;\n this.rightMargin = 0;\n this.topMargin = 0;\n this.bottomMargin = 0;\n this.cellSpacing = 0;\n this.tableAlignment = undefined;\n };\n /**\n * Destroys the managed resources.\n * @returns void\n * @private\n */\n SelectionTableFormat.prototype.destroy = function () {\n this.leftIndentIn = undefined;\n this.backgroundIn = undefined;\n this.leftIndentIn = undefined;\n this.leftMarginIn = undefined;\n this.rightMarginIn = undefined;\n this.topMarginIn = undefined;\n this.bottomMarginIn = undefined;\n this.cellSpacingIn = undefined;\n this.tableAlignmentIn = undefined;\n this.tableIn = undefined;\n this.selection = undefined;\n };\n return SelectionTableFormat;\n}());\nexport { SelectionTableFormat };\n/**\n * Selection cell format implementation\n */\nvar SelectionCellFormat = /** @class */ (function () {\n /**\n * @private\n */\n function SelectionCellFormat(selection) {\n this.verticalAlignmentIn = undefined;\n this.leftMarginIn = 0;\n this.rightMarginIn = 0;\n this.topMarginIn = 0;\n this.bottomMarginIn = 0;\n this.backgroundIn = undefined;\n this.preferredWidthTypeIn = undefined;\n this.selection = selection;\n }\n Object.defineProperty(SelectionCellFormat.prototype, \"verticalAlignment\", {\n /**\n * Gets or sets the vertical alignment of the selected cells.\n * @default undefined\n */\n get: function () {\n return this.verticalAlignmentIn;\n },\n set: function (value) {\n if (value === this.verticalAlignmentIn) {\n return;\n }\n this.verticalAlignmentIn = value;\n this.notifyPropertyChanged('verticalAlignment');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionCellFormat.prototype, \"leftMargin\", {\n /**\n * Gets or Sets the left margin for selected cells.\n * @default undefined\n */\n /* tslint:disable */\n get: function () {\n return this.leftMarginIn;\n },\n set: function (value) {\n if (value === this.leftMarginIn) {\n return;\n }\n this.leftMarginIn = value;\n this.notifyPropertyChanged('leftMargin');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionCellFormat.prototype, \"rightMargin\", {\n /**\n * Gets or Sets the right margin for selected cells.\n * @default undefined\n */\n get: function () {\n return this.rightMarginIn;\n },\n set: function (value) {\n if (value === this.rightMarginIn) {\n return;\n }\n this.rightMarginIn = value;\n this.notifyPropertyChanged('rightMargin');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionCellFormat.prototype, \"topMargin\", {\n /**\n * Gets or Sets the top margin for selected cells.\n * @default undefined\n */\n get: function () {\n return this.topMarginIn;\n },\n set: function (value) {\n if (value === this.topMarginIn) {\n return;\n }\n this.topMarginIn = value;\n this.notifyPropertyChanged('topMargin');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionCellFormat.prototype, \"bottomMargin\", {\n /**\n * Gets or Sets the bottom margin for selected cells.\n * @default undefined\n */\n get: function () {\n return this.bottomMarginIn;\n },\n set: function (value) {\n if (value === this.bottomMarginIn) {\n return;\n }\n this.bottomMarginIn = value;\n this.notifyPropertyChanged('bottomMargin');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionCellFormat.prototype, \"background\", {\n /**\n * Gets or Sets the background for selected cells.\n * @default undefined\n */\n get: function () {\n return this.backgroundIn;\n },\n /* tslint:enable */\n set: function (value) {\n if (value === this.backgroundIn) {\n return;\n }\n this.backgroundIn = value;\n this.notifyPropertyChanged('background');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionCellFormat.prototype, \"preferredWidthType\", {\n /* tslint:disable */\n /**\n * Gets or Sets the preferred width type for selected cells.\n * @default undefined\n */\n get: function () {\n return this.preferredWidthTypeIn;\n },\n set: function (value) {\n if (value === this.preferredWidthTypeIn) {\n return;\n }\n this.preferredWidthTypeIn = value;\n this.notifyPropertyChanged('preferredWidthType');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionCellFormat.prototype, \"preferredWidth\", {\n /**\n * Gets or Sets the preferred width for selected cells.\n * @default undefined\n */\n get: function () {\n return this.preferredWidthIn;\n },\n set: function (value) {\n if (value === this.preferredWidthIn) {\n return;\n }\n this.preferredWidthIn = value;\n this.notifyPropertyChanged('preferredWidth');\n },\n enumerable: true,\n configurable: true\n });\n /* tslint:enable */\n SelectionCellFormat.prototype.notifyPropertyChanged = function (propertyName) {\n var selection = this.selection;\n if (!isNullOrUndefined(selection)) {\n if ((selection.isCleared || !selection.owner.isDocumentLoaded\n || selection.owner.isReadOnlyMode || selection.owner.isPastingContent) && !selection.isRetrieveFormatting) {\n return;\n }\n if (!isNullOrUndefined(this.selection.start) && !this.selection.isRetrieveFormatting) {\n var value = this.getPropertyValue(propertyName);\n if (propertyName === 'background') {\n propertyName = 'shading';\n }\n if (!isNullOrUndefined(value)) {\n this.selection.owner.editorModule.onApplyTableCellFormat(propertyName, value);\n }\n }\n }\n };\n SelectionCellFormat.prototype.getPropertyValue = function (propertyName) {\n switch (propertyName) {\n case 'verticalAlignment':\n return this.verticalAlignment;\n case 'leftMargin':\n return this.leftMargin;\n case 'rightMargin':\n return this.rightMargin;\n case 'topMargin':\n return this.topMargin;\n case 'bottomMargin':\n return this.bottomMargin;\n case 'preferredWidth':\n return this.preferredWidth;\n case 'preferredWidthType':\n return this.preferredWidthType;\n case 'background':\n var shading = new WShading();\n shading.backgroundColor = this.background;\n return shading;\n default:\n return undefined;\n }\n };\n /**\n * Copies the format.\n * @param {WCellFormat} format Source Format to copy.\n * @returns void\n * @private\n */\n SelectionCellFormat.prototype.copyFormat = function (format) {\n this.leftMargin = format.leftMargin;\n this.rightMargin = format.rightMargin;\n this.topMargin = format.topMargin;\n this.bottomMargin = format.bottomMargin;\n this.background = format.shading.backgroundColor;\n this.verticalAlignment = format.verticalAlignment;\n this.preferredWidth = format.preferredWidth;\n this.preferredWidthType = format.preferredWidthType;\n };\n /**\n * Clears the format.\n * @returns void\n * @private\n */\n SelectionCellFormat.prototype.clearCellFormat = function () {\n this.leftMargin = undefined;\n this.rightMargin = undefined;\n this.topMargin = undefined;\n this.bottomMargin = undefined;\n this.background = undefined;\n this.verticalAlignment = undefined;\n };\n /**\n * Combines the format.\n * @param {WCellFormat} format\n * @private\n */\n SelectionCellFormat.prototype.combineFormat = function (format) {\n if (!isNullOrUndefined(this.leftMargin) && this.leftMargin !== format.leftMargin) {\n this.leftMargin = undefined;\n }\n if (!isNullOrUndefined(this.topMargin) && this.topMargin !== format.topMargin) {\n this.topMargin = undefined;\n }\n if (!isNullOrUndefined(this.rightMargin) && this.rightMargin !== format.rightMargin) {\n this.rightMargin = undefined;\n }\n if (!isNullOrUndefined(this.bottomMargin) && this.bottomMargin !== format.bottomMargin) {\n this.bottomMargin = undefined;\n }\n if (!isNullOrUndefined(this.background) && this.background !== format.shading.backgroundColor) {\n this.background = undefined;\n }\n if (!isNullOrUndefined(this.verticalAlignment) && this.verticalAlignment !== format.verticalAlignment) {\n this.verticalAlignment = undefined;\n }\n if (!isNullOrUndefined(this.preferredWidth) && this.preferredWidth !== format.preferredWidth) {\n this.preferredWidth = undefined;\n }\n if (!isNullOrUndefined(this.preferredWidthType) && this.preferredWidthType !== format.preferredWidthType) {\n this.preferredWidthType = undefined;\n }\n };\n /**\n * Clears the format.\n * @returns void\n * @private\n */\n SelectionCellFormat.prototype.clearFormat = function () {\n this.background = undefined;\n this.bottomMargin = 0;\n this.leftMargin = 0;\n this.rightMargin = 0;\n this.topMargin = 0;\n this.verticalAlignment = undefined;\n };\n /**\n * Destroys the manages resources.\n * @returns void\n * @private\n */\n SelectionCellFormat.prototype.destroy = function () {\n this.backgroundIn = undefined;\n this.verticalAlignmentIn = undefined;\n this.bottomMarginIn = undefined;\n this.leftMarginIn = undefined;\n this.rightMarginIn = undefined;\n this.topMarginIn = undefined;\n this.selection = undefined;\n };\n return SelectionCellFormat;\n}());\nexport { SelectionCellFormat };\n/**\n * Selection row format implementation\n */\nvar SelectionRowFormat = /** @class */ (function () {\n /**\n * @private\n */\n function SelectionRowFormat(selection) {\n this.heightIn = undefined;\n this.heightTypeIn = undefined;\n this.isHeaderIn = undefined;\n this.allowRowBreakAcrossPagesIn = undefined;\n this.selection = selection;\n }\n Object.defineProperty(SelectionRowFormat.prototype, \"height\", {\n /**\n * Gets or Sets the height for selected rows.\n * @default undefined\n */\n get: function () {\n return this.heightIn;\n },\n set: function (value) {\n if (value === this.heightIn) {\n return;\n }\n this.heightIn = value;\n this.notifyPropertyChanged('height');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionRowFormat.prototype, \"heightType\", {\n /**\n * Gets or Sets the height type for selected rows.\n * @default undefined\n */\n get: function () {\n return this.heightTypeIn;\n },\n set: function (value) {\n if (value === this.heightTypeIn) {\n return;\n }\n this.heightTypeIn = value;\n this.notifyPropertyChanged('heightType');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionRowFormat.prototype, \"isHeader\", {\n /**\n * Gets or Sets a value indicating whether the selected rows are header rows or not.\n * @default undefined\n */\n get: function () {\n return this.isHeaderIn;\n },\n set: function (value) {\n if (value === this.isHeaderIn) {\n return;\n }\n this.isHeaderIn = value;\n this.notifyPropertyChanged('isHeader');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionRowFormat.prototype, \"allowBreakAcrossPages\", {\n /**\n * Gets or Sets a value indicating whether to allow break across pages for selected rows.\n * @default undefined\n */\n get: function () {\n return this.allowRowBreakAcrossPagesIn;\n },\n set: function (value) {\n if (value === this.allowRowBreakAcrossPagesIn) {\n return;\n }\n this.allowRowBreakAcrossPagesIn = value;\n this.notifyPropertyChanged('allowBreakAcrossPages');\n },\n enumerable: true,\n configurable: true\n });\n SelectionRowFormat.prototype.notifyPropertyChanged = function (propertyName) {\n var selection = this.selection;\n if (!isNullOrUndefined(selection) && (selection.isCleared || selection.owner.isReadOnlyMode\n || !selection.owner.isDocumentLoaded || selection.owner.isPastingContent) && !selection.isRetrieveFormatting) {\n return;\n }\n if (!isNullOrUndefined(selection) && !isNullOrUndefined(selection.start) && !selection.isRetrieveFormatting) {\n var value = this.getPropertyValue(propertyName);\n if (!isNullOrUndefined(value)) {\n selection.owner.editorModule.onApplyTableRowFormat(propertyName, value);\n }\n }\n };\n SelectionRowFormat.prototype.getPropertyValue = function (propertyName) {\n switch (propertyName) {\n case 'height':\n return this.height;\n case 'heightType':\n return this.heightType;\n case 'isHeader':\n return this.isHeader;\n case 'allowBreakAcrossPages':\n return this.allowBreakAcrossPages;\n default:\n return undefined;\n }\n };\n /**\n * Copies the format.\n * @param {WRowFormat} format\n * @returns void\n * @private\n */\n SelectionRowFormat.prototype.copyFormat = function (format) {\n this.height = format.height;\n this.heightType = format.heightType;\n this.allowBreakAcrossPages = format.allowBreakAcrossPages;\n this.isHeader = format.isHeader;\n };\n /**\n * Combines the format.\n * @param {WRowFormat} format\n * @private\n */\n SelectionRowFormat.prototype.combineFormat = function (format) {\n if (!isNullOrUndefined(this.height) && this.height !== format.height) {\n this.height = undefined;\n }\n if (!isNullOrUndefined(this.heightType) && this.heightType !== format.heightType) {\n this.heightType = undefined;\n }\n if (!isNullOrUndefined(this.allowBreakAcrossPages) && this.allowBreakAcrossPages !== format.allowBreakAcrossPages) {\n this.allowBreakAcrossPages = undefined;\n }\n if (!isNullOrUndefined(this.isHeader) && this.isHeader !== format.isHeader) {\n this.isHeader = undefined;\n }\n };\n /**\n * Clears the row format.\n * @returns void\n * @private\n */\n SelectionRowFormat.prototype.clearRowFormat = function () {\n this.height = undefined;\n this.heightType = undefined;\n this.allowBreakAcrossPages = undefined;\n this.isHeader = undefined;\n };\n /**\n * Clears the format.\n * @returns void\n * @private\n */\n SelectionRowFormat.prototype.clearFormat = function () {\n this.height = 0;\n this.heightType = undefined;\n this.allowBreakAcrossPages = undefined;\n this.isHeader = undefined;\n };\n /**\n * Destroys the managed resources.\n * @returns void\n * @private\n */\n SelectionRowFormat.prototype.destroy = function () {\n this.heightIn = undefined;\n this.heightTypeIn = undefined;\n this.allowRowBreakAcrossPagesIn = undefined;\n this.isHeaderIn = undefined;\n this.selection = undefined;\n };\n return SelectionRowFormat;\n}());\nexport { SelectionRowFormat };\n/**\n * Selection image format implementation\n */\nvar SelectionImageFormat = /** @class */ (function () {\n /**\n * @private\n */\n function SelectionImageFormat(selection) {\n this.selection = selection;\n }\n Object.defineProperty(SelectionImageFormat.prototype, \"width\", {\n /**\n * Gets the width of the image.\n */\n get: function () {\n if (this.image) {\n return this.image.width;\n }\n return 0;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionImageFormat.prototype, \"height\", {\n /**\n * Gets the height of the image.\n */\n get: function () {\n if (this.image) {\n return this.image.height;\n }\n return 0;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Resizes the image based on given size.\n * @param width\n * @param height\n */\n SelectionImageFormat.prototype.resize = function (width, height) {\n this.updateImageFormat(width, height);\n };\n /**\n * Update image width and height\n * @private\n */\n SelectionImageFormat.prototype.updateImageFormat = function (width, height) {\n if (this.image) {\n if (this.selection.owner.editorModule) {\n this.selection.owner.editorModule.onImageFormat(this.image, width, height);\n }\n }\n };\n /**\n * @private\n */\n SelectionImageFormat.prototype.copyImageFormat = function (image) {\n this.image = image;\n };\n /**\n * @private\n */\n SelectionImageFormat.prototype.clearImageFormat = function () {\n this.image = undefined;\n };\n return SelectionImageFormat;\n}());\nexport { SelectionImageFormat };\n/* tslint:enable */ \n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { HelperMethods } from '../editor/editor-helper';\n/**\n * @private\n */\nvar HtmlExport = /** @class */ (function () {\n function HtmlExport() {\n /* tslint:disable:no-any */\n this.document = undefined;\n /* tslint:disable:no-any */\n /**\n * @private\n */\n this.fieldCheck = 0;\n /* tslint:enable:no-any */\n }\n /* tslint:disable:no-any */\n /**\n * @private\n */\n HtmlExport.prototype.writeHtml = function (document) {\n this.document = document;\n var html = '';\n for (var i = 0; i < document.sections.length; i++) {\n html = this.serializeSection(document.sections[i]);\n }\n return html;\n };\n /**\n * @private\n */\n HtmlExport.prototype.serializeSection = function (section) {\n var string = '';\n for (var i = 0; i < section.blocks.length; i++) {\n var block = section.blocks[i];\n if (block.hasOwnProperty('inlines')) {\n string += this.serializeParagraph(block);\n }\n else {\n string += this.serializeTable(block);\n }\n }\n return string;\n };\n // Serialize Paragraph \n /**\n * @private\n */\n HtmlExport.prototype.serializeParagraph = function (paragraph) {\n var blockStyle = '';\n var startString = undefined;\n var isList = false;\n var tagAttributes = [];\n tagAttributes.push('style=\"' + this.serializeParagraphStyle(paragraph, '', isList) + '\"');\n blockStyle += this.createAttributesTag('p', tagAttributes);\n if (paragraph.inlines.length === 0) {\n //Handled to preserve non breaking space for empty paragraphs similar to MS Word behavior.\n blockStyle += ' ';\n }\n else {\n blockStyle = this.serializeInlines(paragraph, blockStyle);\n }\n blockStyle += this.endTag('p');\n return blockStyle;\n };\n //SerializeInlines\n /**\n * @private\n */\n HtmlExport.prototype.serializeInlines = function (paragraph, blockStyle) {\n var inline = undefined;\n var i = 0;\n while (paragraph.inlines.length > i) {\n inline = paragraph.inlines[i];\n if (inline.hasOwnProperty('imageString')) {\n blockStyle += this.serializeImageContainer(inline);\n }\n else if (inline.hasOwnProperty('fieldType')) {\n if (inline.fieldType === 0) {\n this.fieldCheck = 1;\n var tagAttributes = [];\n tagAttributes.push('style=\"' + this.serializeInlineStyle(inline.characterFormat, '') + '\"');\n blockStyle += this.createAttributesTag('a', tagAttributes);\n }\n else if (inline.fieldType === 2) {\n this.fieldCheck = 2;\n }\n else {\n blockStyle += this.endTag('a');\n this.fieldCheck = 0;\n }\n }\n else {\n var text = isNullOrUndefined(inline.text) ? '' : inline.text;\n if (this.fieldCheck === 0) {\n blockStyle += this.serializeSpan(text, inline.characterFormat);\n }\n if (this.fieldCheck === 1) {\n var hyperLink = text.replace('\\\"', '');\n blockStyle += ' href= \\\"' + hyperLink.replace('HYPERLINK', '').trim();\n blockStyle += '\\\"';\n blockStyle += '>';\n }\n if (this.fieldCheck === 2) {\n blockStyle += text;\n }\n }\n i++;\n }\n return blockStyle;\n };\n // Serialize Span\n /**\n * @private\n */\n HtmlExport.prototype.serializeSpan = function (spanText, characterFormat) {\n var spanClass = '';\n if (spanText.indexOf('\\v') !== -1) {\n spanClass += '
';\n return spanClass.toString();\n }\n var tagAttributes = [];\n this.serializeInlineStyle(characterFormat, '');\n tagAttributes.push('style=\"' + this.serializeInlineStyle(characterFormat, '') + '\"');\n spanClass += this.createAttributesTag('span', tagAttributes);\n var ignoreFirstSpace = false;\n // Todo: Need to handle it.\n // If the text starts with white-space, need to check whether it is a continuous space.\n // if (characterFormat.ownerBase instanceof WInline) {\n // let inline: WInline = (characterFormat.ownerBase as WInline);\n // tslint:disable:max-line-length \n // if (inline instanceof WSpan && !isNullOrUndefined(inline.text) && inline.text !== '' && (inline as WSpan).text[0] === ' ') {\n // Check previous inline until, it has valid rendered text.\n // do {\n // inline = WInline.getPreviousTextInline((inline as WSpan));\n // } while (inline instanceof WSpan && !isNullOrUndefined(inline.text));\n // } else {\n // inline = undefined;\n // }\n // If current white-space is a continuation of consecutive spaces, this will be set true.\n // ignoreFirstSpace = inline instanceof WSpan && !isNullOrUndefined(inline.text)\n // && (inline as WSpan).text[(inline as WSpan).text.length - 1] === ' ';\n // }\n var text = this.decodeHtmlNames(spanText.toString());\n spanClass += text;\n spanClass += this.endTag('span');\n return spanClass.toString();\n };\n //Serialize Image\n /**\n * @private\n */\n HtmlExport.prototype.serializeImageContainer = function (image) {\n var imageStyle = '';\n var tagAttributes = [];\n this.serializeInlineStyle(image.characterFormat, '');\n var imageSource = '';\n if (!isNullOrUndefined(image.imageString)) {\n imageSource = image.imageString;\n }\n var width = HelperMethods.convertPointToPixel(image.width);\n var height = HelperMethods.convertPointToPixel(image.height);\n tagAttributes.push('width=\"', width.toString() + '\"');\n tagAttributes.push('height=\"', height.toString() + '\"');\n tagAttributes.push('src=\"', imageSource + '\"');\n imageStyle += this.createAttributesTag('img', tagAttributes);\n imageStyle += (this.endTag('img'));\n return imageStyle.toString();\n };\n // Serialize Table Cell\n /**\n * @private\n */\n HtmlExport.prototype.serializeCell = function (cell) {\n var blockStyle = '';\n var tagAttributes = [];\n var cellHtml = '';\n tagAttributes = [];\n if (!isNullOrUndefined(cell.cellFormat)) {\n //if (cell.cellFormat.shading.backgroundColor !== Color.FromArgb(0, 0, 0, 0)) {\n tagAttributes.push('bgcolor=\"' + cell.cellFormat.shading.backgroundColor + '\"');\n // }\n if (cell.cellFormat.columnSpan > 1) {\n tagAttributes.push('colspan=\"' + cell.cellFormat.columnSpan.toString() + '\"');\n }\n if (cell.cellFormat.rowSpan > 1) {\n tagAttributes.push('rowspan=\"' + cell.cellFormat.rowSpan.toString() + '\"');\n }\n if (cell.cellFormat.cellWidth !== 0) {\n tagAttributes.push('width=\"' + cell.cellFormat.cellWidth.toString() + '\"');\n }\n if (cell.cellFormat.verticalAlignment !== 'Top') {\n tagAttributes.push('valign=\"' + cell.cellFormat.verticalAlignment.toString().toLowerCase() + '\"');\n }\n if (!isNullOrUndefined(cell.cellFormat.leftMargin) && cell.cellFormat.leftMargin !== 0) {\n cellHtml += ('padding-left:' + cell.cellFormat.leftMargin.toString() + 'pt;');\n }\n if (!isNullOrUndefined(cell.cellFormat.rightMargin) && cell.cellFormat.rightMargin !== 0) {\n cellHtml += ('padding-right:' + cell.cellFormat.rightMargin.toString() + 'pt;');\n }\n if (!isNullOrUndefined(cell.cellFormat.topMargin) && cell.cellFormat.topMargin !== 0) {\n cellHtml += ('padding-top:' + cell.cellFormat.topMargin.toString() + 'pt;');\n }\n if (!isNullOrUndefined(cell.cellFormat.bottomMargin) && cell.cellFormat.bottomMargin !== 0) {\n cellHtml += ('padding-bottom:' + cell.cellFormat.bottomMargin.toString() + 'pt;');\n }\n if (!isNullOrUndefined(cell.cellFormat.borders)) {\n cellHtml += this.serializeCellBordersStyle(cell.cellFormat.borders);\n }\n }\n if (cellHtml.length !== 0) {\n tagAttributes.push('style=\"' + cellHtml + '\"');\n }\n blockStyle += (this.createAttributesTag('td', tagAttributes));\n for (var k = 0; k < cell.blocks.length; k++) {\n var block = cell.blocks[k];\n if (block.hasOwnProperty('rows')) {\n blockStyle += this.serializeTable(block);\n }\n else {\n blockStyle += this.serializeParagraph(block);\n }\n }\n blockStyle += (this.endTag('td'));\n return blockStyle;\n };\n // Serialize Table\n /**\n * @private\n */\n HtmlExport.prototype.serializeTable = function (table) {\n var html = '';\n html += this.createTableStartTag(table);\n for (var j = 0; j < table.rows.length; j++) {\n html += this.serializeRow(table.rows[j]);\n }\n html += this.createTableEndTag();\n return html;\n };\n // Serialize Row\n /**\n * @private\n */\n HtmlExport.prototype.serializeRow = function (row) {\n var html = '';\n html += this.createRowStartTag(row);\n for (var k = 0; k < row.cells.length; k++) {\n html += this.serializeCell(row.cells[k]);\n }\n return html;\n };\n // Serialize Styles\n /**\n * @private\n */\n HtmlExport.prototype.serializeParagraphStyle = function (paragraph, className, isList) {\n var paragraphClass = '';\n paragraphClass += this.serializeCharacterFormat(paragraph.characterFormat);\n paragraphClass += this.serializeParagraphFormat(paragraph.paragraphFormat, isList);\n return paragraphClass;\n };\n /**\n * @private\n */\n HtmlExport.prototype.serializeInlineStyle = function (characterFormat, className) {\n return this.serializeCharacterFormat(characterFormat);\n };\n /**\n * @private\n */\n HtmlExport.prototype.serializeTableBorderStyle = function (borders) {\n var borderStyle = '';\n borderStyle += ('border-left-style:' + this.convertBorderLineStyle(borders.left.lineStyle));\n borderStyle += ';';\n borderStyle += ('border-left-width:' + borders.left.lineWidth.toString() + 'pt');\n borderStyle += ';';\n borderStyle += ('border-left-color:' + borders.left.color);\n borderStyle += ';';\n borderStyle += ('border-right-style:' + this.convertBorderLineStyle(borders.right.lineStyle));\n borderStyle += ';';\n borderStyle += ('border-right-width:' + borders.right.lineWidth.toString() + 'pt');\n borderStyle += ';';\n borderStyle += ('border-right-color:' + borders.right.color);\n borderStyle += ';';\n borderStyle += ('border-top-style:' + this.convertBorderLineStyle(borders.top.lineStyle));\n borderStyle += ';';\n borderStyle += ('border-top-width:' + borders.top.lineWidth.toString() + 'pt');\n borderStyle += ';';\n borderStyle += ('border-top-color:' + borders.top.color);\n borderStyle += ';';\n borderStyle += ('border-Bottom-style:' + this.convertBorderLineStyle(borders.bottom.lineStyle));\n borderStyle += ';';\n borderStyle += ('border-Bottom-width:' + borders.bottom.lineWidth.toString() + 'pt');\n borderStyle += ';';\n borderStyle += ('border-Bottom-color:' + borders.bottom.color);\n borderStyle += ';';\n return borderStyle;\n };\n /**\n * @private\n */\n HtmlExport.prototype.serializeCellBordersStyle = function (borders) {\n var borderStyle = '';\n borderStyle = 'border:solid 1px;';\n // Todo: handle\n // let border: WBorder = undefined;\n // //LeftBorder\n // border = WCell.getCellLeftBorder(WCell.getCellOf(borders));\n // if (!isNullOrUndefined(border) && border.lineStyle !== 'None') {\n // borderStyle += this.serializeBorderStyle(border, 'left');\n // } else if (!isNullOrUndefined(border) && border.hasNoneStyle) {\n // borderStyle += ('border-left-style:none;');\n // }\n // //RightBorder\n // border = WCell.getCellRightBorder(WCell.getCellOf(borders));\n // if (!isNullOrUndefined(border) && border.lineStyle !== 'None') {\n // borderStyle += this.serializeBorderStyle(border, 'right');\n // } else if (!isNullOrUndefined(border) && border.hasNoneStyle) {\n // borderStyle += ('border-right-style:none');\n // }\n // //TopBorder\n // border = WCell.getCellTopBorder(WCell.getCellOf(borders));\n // if (!isNullOrUndefined(border) && border.lineStyle !== 'None') {\n // borderStyle += this.serializeBorderStyle(border, 'top');\n // } else if (!isNullOrUndefined(border) && border.hasNoneStyle) {\n // borderStyle += ('border-top-style:none');\n // }\n // //BottomBorder\n // border = WCell.getCellBottomBorder(WCell.getCellOf(borders));\n // if (!isNullOrUndefined(border) && border.lineStyle !== 'None') {\n // borderStyle += this.serializeBorderStyle(border, 'bottom');\n // } else if (!isNullOrUndefined(border) && border.hasNoneStyle) {\n // borderStyle += ('border-bottom-style:none');\n // }\n return borderStyle;\n };\n /**\n * @private\n */\n HtmlExport.prototype.serializeBorderStyle = function (border, borderPosition) {\n var borderStyle = '';\n borderStyle += ('border-' + borderPosition + '-style:' + this.convertBorderLineStyle(border.lineStyle));\n borderStyle += ';';\n if (border.lineWidth > 0) {\n borderStyle += ('border-' + borderPosition + '-width:' + border.lineWidth.toString() + 'pt;');\n }\n //if (border.color !== Color.FromArgb(0, 0, 0, 0))\n borderStyle += ('border-' + borderPosition + '-color:' + border.color + ';');\n return borderStyle;\n };\n /**\n * @private\n */\n HtmlExport.prototype.convertBorderLineStyle = function (lineStyle) {\n switch (lineStyle) {\n case 'None':\n return 'none';\n case 'Single':\n return 'solid';\n case 'Dot':\n return 'dotted';\n case 'DashSmallGap':\n case 'DashLargeGap':\n case 'DashDot':\n case 'DashDotDot':\n return 'dashed';\n case 'Double':\n case 'Triple':\n case 'ThinThickSmallGap':\n case 'ThickThinSmallGap':\n case 'ThinThickThinSmallGap':\n case 'ThinThickMediumGap':\n case 'ThickThinMediumGap':\n case 'ThinThickThinMediumGap':\n case 'ThinThickLargeGap':\n case 'ThickThinLargeGap':\n case 'ThinThickThinLargeGap':\n return 'double';\n case 'SingleWavy':\n return 'solid';\n case 'DoubleWavy':\n return 'double';\n case 'DashDotStroked':\n return 'solid';\n case 'Emboss3D':\n return 'ridge';\n case 'Engrave3D':\n return 'groove';\n case 'Outset':\n return 'outset';\n case 'Inset':\n return 'inset';\n default:\n return 'solid';\n }\n };\n // Serialize Format\n /**\n * @private\n */\n HtmlExport.prototype.serializeCharacterFormat = function (characterFormat) {\n if (!isNullOrUndefined(characterFormat.inlineFormat)) {\n return this.serializeCharacterFormat(characterFormat.inlineFormat);\n }\n var propertyValue;\n var charStyle = '';\n if (characterFormat.bold) {\n charStyle += 'font-weight';\n charStyle += ':';\n charStyle += 'bold';\n charStyle += ';';\n }\n charStyle += 'font-style';\n charStyle += ':';\n if (characterFormat.italic) {\n charStyle += 'italic';\n }\n else {\n charStyle += 'normal';\n }\n charStyle += ';';\n // Double strike through will become Single strike through while saving HTML using MS Word.\n if (characterFormat.strikethrough === 'SingleStrike' || characterFormat.strikethrough === 'DoubleStrike') {\n charStyle += 'text-decoration';\n charStyle += ':';\n charStyle += 'line-through';\n charStyle += ';';\n }\n //Text Baseline Alignment\n // tslint:disable-next-line:max-line-length\n if (characterFormat.baselineAlignment === 'Superscript' || characterFormat.baselineAlignment === 'Subscript') {\n charStyle += 'vertical-align';\n charStyle += ':';\n charStyle += characterFormat.baselineAlignment === 'Superscript' ? 'super' : 'sub';\n charStyle += ';';\n }\n //Text Foreground and Background Color \n if (!isNullOrUndefined(characterFormat.highlightColor)) {\n charStyle += 'background-color';\n charStyle += ':';\n charStyle += characterFormat.highlightColor.toString();\n charStyle += ';';\n }\n //Font Color\n propertyValue = characterFormat.fontColor;\n if (!isNullOrUndefined(propertyValue)) {\n charStyle += 'color';\n charStyle += ':';\n charStyle += propertyValue;\n charStyle += ';';\n }\n if (!isNullOrUndefined(characterFormat.underline) && characterFormat.underline !== 'None') {\n charStyle += 'text-decoration';\n charStyle += ':';\n charStyle += 'underline';\n charStyle += ';';\n }\n propertyValue = characterFormat.fontSize;\n if (!isNullOrUndefined(propertyValue)) {\n charStyle += 'font-size';\n charStyle += ':';\n charStyle += propertyValue.toString();\n charStyle += 'pt';\n charStyle += ';';\n }\n propertyValue = characterFormat.fontFamily;\n if (!isNullOrUndefined(propertyValue)) {\n charStyle += 'font-family';\n charStyle += ':';\n charStyle += propertyValue.toString();\n charStyle += ';';\n }\n return charStyle.toString();\n };\n /**\n * @private\n */\n HtmlExport.prototype.serializeParagraphFormat = function (paragraphFormat, isList) {\n if (!isNullOrUndefined(paragraphFormat.inlineFormat)) {\n return this.serializeParagraphFormat(paragraphFormat.inlineFormat, isList);\n }\n var propertyValue;\n var paraStyle = '';\n propertyValue = paragraphFormat.textAlignment;\n if (!isNullOrUndefined(propertyValue)) {\n paraStyle += 'text-align:' + propertyValue.toLowerCase() + ';';\n }\n propertyValue = paragraphFormat.beforeSpacing;\n if (!isNullOrUndefined(propertyValue)) {\n paraStyle += 'margin-top:' + propertyValue.toString() + 'pt; ';\n }\n propertyValue = paragraphFormat.rightIndent;\n if (!isNullOrUndefined(propertyValue)) {\n paraStyle += 'margin-right:' + propertyValue.toString() + 'pt; ';\n }\n propertyValue = paragraphFormat.afterSpacing;\n if (!isNullOrUndefined(propertyValue)) {\n paraStyle += 'margin-bottom:' + propertyValue.toString() + 'pt; ';\n }\n propertyValue = paragraphFormat.leftIndent;\n if (isList) {\n if (isNullOrUndefined(propertyValue)) {\n propertyValue = -48;\n }\n else {\n propertyValue -= 48;\n }\n }\n if (!isNullOrUndefined(propertyValue)) {\n paraStyle += 'margin-left:' + propertyValue.toString() + 'pt; ';\n }\n propertyValue = paragraphFormat.firstLineIndent;\n if (isList) {\n if (isNullOrUndefined(propertyValue)) {\n propertyValue = 24;\n }\n else {\n propertyValue += 24;\n }\n }\n if (!isNullOrUndefined(propertyValue) && propertyValue !== 0) {\n paraStyle += 'text-indent:' + propertyValue.toString() + 'pt;';\n }\n propertyValue = paragraphFormat.lineSpacing;\n if (!isNullOrUndefined(propertyValue)) {\n if (paragraphFormat.lineSpacingType === 'Multiple') {\n propertyValue = (propertyValue * 100).toString() + '%;';\n }\n else {\n propertyValue = propertyValue.toString() + 'pt;';\n }\n paraStyle += 'line-height:' + propertyValue;\n }\n return paraStyle.toString();\n };\n /**\n * @private\n */\n HtmlExport.prototype.createAttributesTag = function (tagValue, localProperties) {\n var sb = '';\n sb += '<';\n sb += tagValue;\n for (var i = 0; i < localProperties.length; i++) {\n sb += ' ';\n sb += localProperties[i];\n }\n if (tagValue !== 'a') {\n sb += '>';\n }\n return sb;\n };\n /**\n * @private\n */\n HtmlExport.prototype.createTag = function (tagValue) {\n var s = '';\n s += '<';\n s += tagValue;\n s += '>';\n return s;\n };\n /**\n * @private\n */\n HtmlExport.prototype.endTag = function (tagValue) {\n var sb = '';\n sb += '<';\n sb += '/';\n sb += tagValue;\n sb += '>';\n return sb;\n };\n /**\n * @private\n */\n HtmlExport.prototype.createTableStartTag = function (table) {\n var blockStyle = '';\n var tableStyle = '';\n var tagAttributes = [];\n tagAttributes.push('border=\"' + '1\"');\n if (!isNullOrUndefined(table.tableFormat)) {\n //if (table.tableFormat.shading.backgroundColor !== Color.FromArgb(0, 0, 0, 0)) {\n tagAttributes.push('bgcolor=\"' + table.tableFormat.shading.backgroundColor + '\"');\n //}\n if (table.tableFormat.leftIndent !== 0) {\n tagAttributes.push('left-indent=\"' + table.tableFormat.leftIndent.toString() + 'pt;');\n }\n if (table.tableFormat.cellSpacing > 0) {\n tagAttributes.push('cellspacing=\"' + (((table.tableFormat.cellSpacing * 72) / 96) * 2).toString() + '\"');\n }\n else {\n tableStyle += ('border-collapse:collapse;');\n }\n tagAttributes.push('cellpadding=\"' + '0\"');\n if (!isNullOrUndefined(table.tableFormat.borders)) {\n tableStyle += this.serializeTableBorderStyle(table.tableFormat.borders);\n }\n }\n if (tableStyle.length !== 0) {\n tagAttributes.push('style=\"', tableStyle.toString() + '\"');\n }\n return blockStyle += (this.createAttributesTag('table', tagAttributes));\n };\n /**\n * @private\n */\n HtmlExport.prototype.createTableEndTag = function () {\n var blockStyle = '';\n blockStyle += (this.endTag('table'));\n return blockStyle;\n };\n /**\n * @private\n */\n HtmlExport.prototype.createRowStartTag = function (row) {\n var blockStyle = '';\n var tagAttributes = [];\n if (row.rowFormat.isHeader) {\n blockStyle += (this.createTag('thead'));\n }\n if (row.rowFormat.height > 0) {\n tagAttributes.push('height=\"' + row.rowFormat.height + '\"');\n }\n return blockStyle + this.createAttributesTag('tr', tagAttributes);\n };\n /**\n * @private\n */\n HtmlExport.prototype.createRowEndTag = function (row) {\n var blockStyle = '';\n blockStyle += (this.endTag('tr'));\n if (row.rowFormat.isHeader) {\n blockStyle += (this.endTag('thead'));\n }\n return blockStyle;\n };\n /**\n * @private\n */\n HtmlExport.prototype.decodeHtmlNames = function (text) {\n if (text === '\\t') {\n return ' ';\n }\n var splittedText = text.split(' ');\n var htmlText = '';\n if (splittedText.length > 0) {\n htmlText = splittedText[0];\n for (var i = 0; i < splittedText.length - 1; i++) {\n htmlText += ' ' + splittedText[i + 1];\n }\n }\n return htmlText;\n };\n return HtmlExport;\n}());\nexport { HtmlExport };\n","import { Widget, TableRowWidget, TableWidget, LineWidget, ElementBox, TextElementBox, ListTextElementBox, ImageElementBox, ParagraphWidget, TableCellWidget, FieldElementBox, BlockContainer, BookmarkElementBox } from '../index';\nimport { HelperMethods } from '../index';\nimport { Point } from '../index';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * @private\n */\nvar TextPosition = /** @class */ (function () {\n function TextPosition(owner) {\n /**\n * @private\n */\n this.location = new Point(0, 0);\n /**\n * @private\n */\n this.isUpdateLocation = true;\n this.owner = owner;\n this.viewer = this.owner.viewer;\n }\n Object.defineProperty(TextPosition.prototype, \"paragraph\", {\n /**\n * @private\n */\n get: function () {\n return this.currentWidget.paragraph;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TextPosition.prototype, \"isAtParagraphStart\", {\n /**\n * @private\n */\n get: function () {\n return this.offset === this.owner.selection.getStartOffset(this.paragraph);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TextPosition.prototype, \"selection\", {\n /**\n * @private\n */\n get: function () {\n return this.owner.selection;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TextPosition.prototype, \"hierarchicalPosition\", {\n /**\n * Gets the hierarchical position of logical text position in the document\n * @returns {string}\n */\n get: function () {\n return this.getHierarchicalIndexInternal();\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Return clone of current text position\n * @private\n */\n TextPosition.prototype.clone = function () {\n var textPosition = new TextPosition(this.owner);\n textPosition.currentWidget = this.currentWidget;\n textPosition.offset = this.offset;\n textPosition.location = this.location;\n return textPosition;\n };\n /**\n * Set text position for paragraph and inline\n * @private\n */\n TextPosition.prototype.setPositionForSelection = function (line, element, index, physicalLocation) {\n //Set the start end position\n var isParagraphEnd = false;\n if (isNullOrUndefined(element)) {\n this.currentWidget = line;\n }\n else {\n this.currentWidget = element.line;\n if (element.nextNode instanceof FieldElementBox && index > element.length) {\n isParagraphEnd = this.selection.isLastRenderedInline(element, element.length);\n }\n }\n this.location = physicalLocation;\n if (isParagraphEnd) {\n this.offset = this.selection.getParagraphLength(this.currentWidget.paragraph) + 1;\n }\n else {\n this.offset = this.currentWidget.getOffset(element, index);\n }\n };\n /**\n * Set text position\n * @private\n */\n TextPosition.prototype.setPositionFromLine = function (line, offset, location) {\n this.currentWidget = line;\n this.offset = offset;\n if (location instanceof Point) {\n this.location.copy(location);\n }\n };\n /**\n * Set text position\n * @private\n */\n TextPosition.prototype.setPosition = function (line, positionAtStart) {\n this.currentWidget = line;\n this.offset = positionAtStart ? this.selection.getStartOffset(line.paragraph)\n : this.selection.getParagraphLength(line.paragraph) + 1;\n this.updatePhysicalPosition(true);\n };\n /**\n * Set position for text position\n * @private\n */\n TextPosition.prototype.setPositionInternal = function (textPosition) {\n this.currentWidget = textPosition.currentWidget;\n this.offset = textPosition.offset;\n this.location = textPosition.location;\n };\n /**\n * Set position for current index\n * @private\n */\n TextPosition.prototype.setPositionForCurrentIndex = function (hierarchicalIndex) {\n var index = { index: hierarchicalIndex };\n var paragraph = this.getParagraphWidget(index); //ref hierarchicalIndex\n this.offset = parseFloat(index.index);\n this.setPositionParagraph(paragraph, this.offset);\n };\n /**\n * Get Page\n */\n TextPosition.prototype.getPage = function (position) {\n var page;\n var index = position.index.indexOf(';');\n var newValue = '0';\n if (index >= 0) {\n newValue = position.index.substring(0, index);\n position.index = position.index.substring(index).replace(';', '');\n }\n index = parseInt(newValue, 10);\n page = this.viewer.pages[index];\n return page;\n };\n /**\n * @private\n */\n TextPosition.prototype.getParagraphWidget = function (position) {\n if (isNullOrUndefined(position.index)) {\n return undefined;\n }\n var page = this.getPage(position);\n var child = this.getLineWidget(undefined, position, page);\n return child;\n };\n /**\n * @private\n */\n TextPosition.prototype.getLineWidget = function (widget, position, page) {\n if (isNullOrUndefined(position.index)) {\n return undefined;\n }\n var index = position.index.indexOf(';');\n var value = '0';\n if (index >= 0) {\n value = position.index.substring(0, index);\n position.index = position.index.substring(index).replace(';', '');\n }\n if (value === 'H' || value === 'F') {\n if (value === 'H') {\n widget = page.headerWidget;\n }\n else {\n widget = page.footerWidget;\n }\n }\n else if (!isNullOrUndefined(page)) {\n widget = page.bodyWidgets[0];\n }\n index = parseInt(value, 10);\n if (widget instanceof BlockContainer) {\n index = position.index.indexOf(';');\n value = '0';\n value = position.index.substring(0, index);\n position.index = position.index.substring(index).replace(';', '');\n index = parseInt(value, 10);\n }\n if (widget instanceof TableRowWidget && index >= widget.childWidgets.length) {\n position.index = '0;0';\n index = widget.childWidgets.length - 1;\n }\n if (index >= 0 && index < widget.childWidgets.length) {\n var child = widget.childWidgets[index];\n if (child instanceof LineWidget) {\n if (position.index.indexOf(';') > 0) {\n position.index = '0';\n }\n return child;\n }\n if (child instanceof Widget) {\n if (position.index.indexOf(';') > 0) {\n return this.getLineWidget(child, position);\n }\n else {\n //If table is shifted to previous text position then return the first paragraph within table.\n if (child instanceof TableWidget) {\n return this.getLineWidget(this.selection.getFirstParagraphInFirstCell(child), position);\n }\n else if (child instanceof TableRowWidget && position.index.indexOf(';') === -1) {\n return this.selection.getFirstParagraphInFirstCell(child.ownerTable).childWidgets[0];\n }\n return undefined;\n }\n }\n }\n else if (widget.nextRenderedWidget instanceof Widget) {\n position.index = '0';\n if (widget.nextRenderedWidget instanceof TableWidget) {\n return this.selection.getFirstParagraphInFirstCell(widget.nextRenderedWidget).firstChild;\n }\n return this.getLineWidget(widget.nextRenderedWidget, position);\n }\n return undefined;\n };\n /**\n * Update physical location of paragraph\n * @private\n */\n TextPosition.prototype.updatePhysicalPosition = function (moveNextLine) {\n if (this.currentWidget && this.owner.isLayoutEnabled && this.isUpdateLocation) {\n this.location = this.selection.getPhysicalPositionInternal(this.currentWidget, this.offset, moveNextLine);\n }\n };\n /**\n * Return true if text position are in same paragraph and offset\n * @private\n */\n TextPosition.prototype.isAtSamePosition = function (textPosition) {\n return this.currentWidget === textPosition.currentWidget\n && this.offset === textPosition.offset;\n };\n /**\n * Return true if text position is in same paragraph\n * @private\n */\n TextPosition.prototype.isInSameParagraph = function (textPosition) {\n if (isNullOrUndefined(textPosition)) {\n throw new Error('textPosition is undefined.');\n }\n return this.paragraph === textPosition.paragraph;\n };\n /**\n * Return true is current text position exist before given text position\n * @private\n */\n TextPosition.prototype.isExistBefore = function (textPosition) {\n if (isNullOrUndefined(textPosition)) {\n throw new Error('textPosition is undefined.');\n }\n if (this.currentWidget === textPosition.currentWidget) {\n return this.offset < textPosition.offset;\n }\n var currentParagraph = this.currentWidget.paragraph;\n var paragraph = textPosition.currentWidget.paragraph;\n if (currentParagraph === paragraph) {\n return currentParagraph.childWidgets.indexOf(this.currentWidget) < paragraph.childWidgets.indexOf(textPosition.currentWidget);\n }\n if (currentParagraph.containerWidget === paragraph.containerWidget) {\n if (currentParagraph.isInsideTable) {\n return currentParagraph.associatedCell.childWidgets.indexOf(currentParagraph) <\n paragraph.associatedCell.childWidgets.indexOf(paragraph);\n //handle after header footer implementation\n // } else if ((this.currentParagraph).owner instanceof WHeaderFooter) {\n // return ((this.currentParagraph).owner as WHeaderFooter).blocks.indexOf((this.currentParagraph)) <\n // ((textPosition.currentParagraph).owner as WHeaderFooter).blocks.indexOf((textPosition.currentParagraph));\n }\n else {\n return (currentParagraph.containerWidget.childWidgets.indexOf(currentParagraph)) <\n (paragraph.containerWidget.childWidgets.indexOf(paragraph));\n }\n }\n return this.owner.selection.isExistBefore(currentParagraph, paragraph);\n };\n /**\n * Return true is current text position exist after given text position\n * @private\n */\n TextPosition.prototype.isExistAfter = function (textPosition) {\n if (isNullOrUndefined(textPosition)) {\n throw new Error('textPosition is undefined.');\n }\n if (this.currentWidget === textPosition.currentWidget) {\n return this.offset > textPosition.offset;\n }\n if (this.currentWidget.paragraph === textPosition.currentWidget.paragraph) {\n return this.currentWidget.paragraph.childWidgets.indexOf(this.currentWidget) >\n textPosition.currentWidget.paragraph.childWidgets.indexOf(textPosition.currentWidget);\n }\n var startParagraph = this.currentWidget.paragraph;\n var endParagraph = textPosition.currentWidget.paragraph;\n if (startParagraph.containerWidget.index === endParagraph.containerWidget.index) {\n if (startParagraph.isInsideTable) {\n return startParagraph.associatedCell.childWidgets.indexOf(startParagraph) >\n endParagraph.associatedCell.childWidgets.indexOf(endParagraph);\n // } else if ((this.currentParagraph).owner instanceof WHeaderFooter) {\n // return ((this.currentParagraph).owner as WHeaderFooter).blocks.indexOf((this.currentParagraph)) >\n // ((textPosition.currentParagraph).owner as WHeaderFooter).blocks.indexOf((textPosition.currentParagraph));\n }\n else {\n return (startParagraph.containerWidget.childWidgets.indexOf(startParagraph) >\n (endParagraph.containerWidget.childWidgets.indexOf(endParagraph)));\n }\n }\n return this.owner.selection.isExistAfter(startParagraph, endParagraph);\n };\n /**\n * Return hierarchical index of current text position\n * @private\n */\n TextPosition.prototype.getHierarchicalIndexInternal = function () {\n return this.getHierarchicalIndex(this.currentWidget, this.offset.toString());\n };\n /**\n * @private\n */\n TextPosition.prototype.getHierarchicalIndex = function (line, hierarchicalIndex) {\n var node = line;\n if (node) {\n return node.getHierarchicalIndex(hierarchicalIndex);\n }\n return hierarchicalIndex;\n };\n /**\n * @private\n */\n TextPosition.prototype.setPositionParagraph = function (line, offsetInLine) {\n this.currentWidget = line;\n this.offset = offsetInLine;\n this.updatePhysicalPosition(true);\n };\n /**\n * @private\n */\n TextPosition.prototype.setPositionForLineWidget = function (lineWidget, offset) {\n var lineLength = this.selection.getLineLength(lineWidget);\n var lineIndex = lineWidget.paragraph.childWidgets.indexOf(lineWidget);\n if (offset > lineLength + 1) {\n var nextLineWidget = void 0;\n if (lineIndex >= lineWidget.paragraph.childWidgets.length - 1) {\n var nextBlock = this.selection.getNextRenderedBlock(lineWidget.paragraph);\n if (nextBlock && nextBlock.index === lineWidget.paragraph.index) {\n nextLineWidget = nextBlock.firstChild;\n }\n }\n else {\n nextLineWidget = lineWidget.paragraph.childWidgets[lineIndex + 1];\n }\n this.setPositionForLineWidget(nextLineWidget, offset - lineLength);\n return;\n }\n else if (offset < 0) {\n var prevLine = lineWidget.paragraph.childWidgets[lineIndex - 1];\n var curretOffSet = this.selection.getLineLength(prevLine) + offset;\n this.setPositionForLineWidget(prevLine, curretOffSet);\n return;\n }\n else {\n this.currentWidget = lineWidget;\n this.offset = offset;\n }\n this.updatePhysicalPosition(true);\n };\n /**\n * move to next text position\n * @private\n */\n TextPosition.prototype.moveNextPosition = function (isNavigate) {\n if (isNullOrUndefined(isNavigate)) {\n isNavigate = true;\n }\n var inline = this.selection.getNextStartInline(this.currentWidget, this.offset);\n if (inline instanceof FieldElementBox && inline.fieldType === 0 && !isNullOrUndefined(inline.fieldEnd)) {\n if (isNavigate) {\n this.moveNextPositionInternal(inline);\n this.moveNextPosition();\n return;\n }\n else {\n var line = inline.fieldEnd.line;\n var fieldEnd = inline.fieldEnd;\n var fieldEndOffset = line.getOffset(fieldEnd, 1);\n var fieldEndIndex = this.getHierarchicalIndex(line, fieldEndOffset.toString());\n if (TextPosition.isForwardSelection(this.selection.end.getHierarchicalIndexInternal(), fieldEndIndex)) {\n //If field end is after selection end, extend selection end to field end.\n this.selection.end.moveToInline(inline.fieldEnd, 1);\n return;\n }\n this.moveToInline(inline.fieldEnd, 1);\n }\n }\n var nextOffset = this.selection.getNextValidOffset(this.currentWidget, this.offset);\n var lineIndex = this.paragraph.childWidgets.indexOf(this.currentWidget);\n var index = 0;\n if (nextOffset > this.offset) {\n this.offset = nextOffset;\n var info = this.currentWidget.getInline(this.offset, index);\n inline = info.element;\n index = info.index;\n if (!isNullOrUndefined(inline) && index === inline.length && inline.nextNode instanceof FieldElementBox) {\n var nextValidInline = this.selection.getNextValidElement(inline.nextNode);\n //Moves to field end mark.\n if (nextValidInline instanceof FieldElementBox && nextValidInline.fieldType === 1) {\n inline = nextValidInline;\n this.offset = this.currentWidget.getOffset(inline, 1);\n }\n }\n }\n else if (lineIndex + 1 < this.paragraph.childWidgets.length) {\n var nextLineWidget = this.paragraph.childWidgets[lineIndex + 1];\n if (nextLineWidget) {\n this.currentWidget = nextLineWidget;\n this.offset = this.selection.getStartLineOffset(this.currentWidget);\n }\n var inlineObj = this.currentWidget.getInline(this.offset, index);\n inline = inlineObj.element;\n index = inlineObj.index;\n if (inline instanceof FieldElementBox && inline.fieldType === 0) {\n this.offset++;\n }\n }\n else {\n this.updateOffsetToNextParagraph(index, false);\n }\n //Gets physical position in current page.\n this.updatePhysicalPosition(true);\n };\n /**\n * Move text position to previous paragraph inside table\n * @private\n */\n TextPosition.prototype.moveToPreviousParagraphInTable = function (selection) {\n var previousParagraph;\n var currentPara = this.currentWidget.paragraph;\n if (currentPara.isInsideTable) {\n previousParagraph = selection.getPreviousSelectionCell(currentPara.associatedCell);\n }\n else {\n previousParagraph = selection.getPreviousParagraphBlock(currentPara);\n }\n if (isNullOrUndefined(previousParagraph)) {\n return;\n }\n this.currentWidget = previousParagraph.childWidgets[previousParagraph.childWidgets.length - 1];\n this.offset = this.currentWidget.getEndOffset() + 1;\n };\n TextPosition.prototype.updateOffsetToNextParagraph = function (indexInInline, isHighlight) {\n //Moves to owner and get next paragraph.\n var inline;\n var positionAtStart = false;\n var nextParagraph = undefined;\n var lineIndex = this.paragraph.childWidgets.indexOf(this.currentWidget);\n if (!isHighlight) {\n nextParagraph = this.selection.getNextParagraphBlock(this.paragraph);\n }\n else if (lineIndex + 1 < this.paragraph.childWidgets.length) {\n var nextLineWidget = this.paragraph.childWidgets[lineIndex + 1];\n if (nextLineWidget) {\n this.currentWidget = nextLineWidget;\n this.offset = 0;\n }\n }\n else {\n nextParagraph = this.selection.getNextSelectionBlock(this.paragraph);\n if (!isNullOrUndefined(nextParagraph)) {\n if (nextParagraph.containerWidget instanceof TableCellWidget) {\n if (this.selection.start.paragraph.isInsideTable) {\n // tslint:disable-next-line:max-line-length\n var containerCell = this.selection.getContainerCellOf(this.selection.start.paragraph.associatedCell, nextParagraph.associatedCell);\n positionAtStart = !containerCell.ownerTable.contains(nextParagraph.associatedCell);\n }\n else {\n positionAtStart = true;\n }\n }\n }\n }\n if (!isNullOrUndefined(nextParagraph) && nextParagraph.childWidgets.length > 0) {\n if (!positionAtStart) {\n this.currentWidget = nextParagraph.firstChild;\n this.offset = isHighlight ? 1 : this.selection.getStartLineOffset(this.currentWidget);\n }\n else {\n this.currentWidget = nextParagraph.childWidgets[nextParagraph.childWidgets.length - 1];\n this.offset = this.selection.getLineLength(this.currentWidget) + 1;\n }\n }\n var inlineObj = this.currentWidget.getInline(this.offset, indexInInline);\n inline = inlineObj.element;\n indexInInline = inlineObj.index;\n if (inline instanceof FieldElementBox && inline.fieldType === 0) {\n this.offset++;\n }\n };\n TextPosition.prototype.updateOffsetToPrevPosition = function (index, isHighlight) {\n var inlineInfo;\n var inline;\n var lineIndex = this.paragraph.childWidgets.indexOf(this.currentWidget);\n var prevOffset = this.selection.getPreviousValidOffset(this.currentWidget.paragraph, this.offset);\n if (this.offset > prevOffset) {\n this.offset = prevOffset;\n }\n else if (lineIndex > 0) {\n var prevLineWidget = this.paragraph.childWidgets[lineIndex - 1];\n if (prevLineWidget) {\n this.currentWidget = prevLineWidget;\n this.offset = this.currentWidget.getEndOffset();\n }\n }\n else {\n //Moves to owner and get previous paragraph.\n var previousParagraph = undefined;\n var positionAtStart = false;\n if (!isHighlight) {\n previousParagraph = this.selection.getPreviousParagraphBlock(this.paragraph);\n }\n else {\n previousParagraph = this.selection.getPreviousSelectionBlock(this.paragraph);\n if (!isNullOrUndefined(previousParagraph)) {\n if (previousParagraph.containerWidget instanceof TableCellWidget) {\n if (this.selection.start.paragraph.isInsideTable) {\n // tslint:disable-next-line:max-line-length\n var containerCell = this.selection.getContainerCellOf(this.selection.start.paragraph.associatedCell, previousParagraph.associatedCell);\n positionAtStart = !containerCell.ownerTable.contains(previousParagraph.associatedCell);\n }\n else {\n positionAtStart = true;\n }\n }\n }\n }\n if (!isNullOrUndefined(previousParagraph)) {\n if (!positionAtStart) {\n this.currentWidget = previousParagraph.childWidgets[previousParagraph.childWidgets.length - 1];\n this.offset = this.currentWidget.getEndOffset();\n }\n else {\n this.currentWidget = previousParagraph.firstChild;\n this.offset = this.selection.getStartLineOffset(this.currentWidget);\n }\n }\n }\n index = 0;\n inlineInfo = this.currentWidget.getInline(this.offset, index);\n inline = inlineInfo.element;\n index = inlineInfo.index;\n if (inline instanceof FieldElementBox && inline.fieldType === 0) {\n this.offset++;\n }\n if (inline instanceof FieldElementBox) {\n //Checks if field character is part of rendered field, otherwise moves to previous rendered content.\n var previousInline = this.selection.getPreviousValidElement(inline);\n if (!isNullOrUndefined(previousInline)) {\n inline = previousInline;\n this.currentWidget = inline.line;\n this.offset = this.currentWidget.getOffset(inline, inline.length);\n if (inline instanceof FieldElementBox && inline.fieldType === 0) {\n this.offset--;\n }\n }\n }\n //Gets physical position in current page.\n this.updatePhysicalPosition(true);\n };\n /**\n * Moves the text position to start of the next paragraph.\n */\n TextPosition.prototype.moveToNextParagraphStartInternal = function () {\n var paragraph = this.currentWidget.paragraph;\n if (!isNullOrUndefined(this.selection.getNextParagraphBlock(paragraph))) {\n // tslint:disable-next-line:max-line-length\n this.currentWidget = this.selection.getNextParagraphBlock(paragraph).firstChild;\n this.offset = this.selection.getStartOffset(paragraph);\n this.updatePhysicalPosition(true);\n }\n };\n /**\n * Move to previous position\n * @private\n */\n TextPosition.prototype.movePreviousPosition = function () {\n var index = 0;\n var inlineInfo = this.currentWidget.getInline(this.offset, index);\n var inline = inlineInfo.element;\n index = inlineInfo.index;\n var lineIndex = this.paragraph.childWidgets.indexOf(this.currentWidget);\n if (inline instanceof FieldElementBox && inline.fieldType === 1 && !isNullOrUndefined(inline.fieldBegin)) {\n this.movePreviousPositionInternal(inline);\n }\n this.updateOffsetToPrevPosition(index, false);\n };\n /**\n * Move to next position\n * @private\n */\n TextPosition.prototype.moveNextPositionInternal = function (fieldBegin) {\n var inline;\n if (isNullOrUndefined(fieldBegin.fieldSeparator)) {\n inline = fieldBegin.fieldEnd;\n }\n else {\n inline = fieldBegin.fieldSeparator;\n this.currentWidget = inline.line;\n // tslint:disable-next-line:max-line-length\n if (this.currentWidget === fieldBegin.fieldEnd.line && !this.selection.hasValidInline(this.paragraph, inline, fieldBegin.fieldEnd)) {\n inline = fieldBegin.fieldEnd;\n }\n }\n this.currentWidget = inline.line;\n this.offset = this.currentWidget.getOffset(inline, 1);\n };\n /**\n * Move text position backward\n * @private\n */\n TextPosition.prototype.moveBackward = function () {\n var indexInInline = 0;\n var inlineObj = this.currentWidget.getInline(this.offset, indexInInline);\n var inline = inlineObj.element;\n indexInInline = inlineObj.index;\n if (!this.owner.selection.isEmpty && !isNullOrUndefined(inline)) {\n var nextInline = this.selection.getNextRenderedElementBox(inline, indexInInline);\n if (nextInline instanceof FieldElementBox && nextInline.fieldType === 0) {\n var hierarchicalIndex = this.owner.selection.start.getHierarchicalIndexInternal();\n // tslint:disable-next-line:max-line-length\n var fieldEndOffset = nextInline.fieldEnd.line.getOffset(nextInline.fieldEnd, 1);\n // tslint:disable-next-line:max-line-length\n var fieldEndIndex = this.getHierarchicalIndex(nextInline.fieldEnd.line, fieldEndOffset.toString());\n if (!TextPosition.isForwardSelection(fieldEndIndex, hierarchicalIndex)) {\n //If field end is after selection start, move selection start to field end.\n // tslint:disable-next-line:max-line-length\n this.owner.selection.start.setPositionParagraph(nextInline.fieldEnd.line, fieldEndOffset);\n return;\n }\n }\n }\n if (inline instanceof FieldElementBox && inline.fieldType === 1 && !isNullOrUndefined(inline.fieldBegin)) {\n var hierarchicalIndex = this.owner.selection.start.getHierarchicalIndexInternal();\n var fieldEndOffset = inline.line.getOffset(inline, 1);\n var fieldEndIndex = this.getHierarchicalIndex(inline.line, fieldEndOffset.toString());\n if (!TextPosition.isForwardSelection(hierarchicalIndex, fieldEndIndex)) {\n //If field end is after selection start, extend selection end to field begin.\n // tslint:disable-next-line:max-line-length\n var fieldBeginOffset = inline.fieldBegin.line.getOffset(inline.fieldBegin, 0);\n this.currentWidget = inline.fieldBegin.line;\n this.offset = fieldBeginOffset;\n //Updates physical position in current page.\n this.updatePhysicalPosition(true);\n return;\n }\n this.movePreviousPositionInternal(inline);\n }\n this.updateOffsetToPrevPosition(indexInInline, true);\n };\n /**\n * Move text position forward\n * @private\n */\n TextPosition.prototype.moveForward = function () {\n var indexInInline = 0;\n var inlineObj = this.currentWidget.getInline(this.offset, indexInInline);\n var inline = inlineObj.element;\n indexInInline = inlineObj.index;\n if (!isNullOrUndefined(inline)) {\n if (!this.owner.selection.isEmpty && indexInInline === inline.length && inline instanceof FieldElementBox\n && inline.fieldType === 1) {\n var hierarchicalIndex = this.owner.selection.start.getHierarchicalIndexInternal();\n // tslint:disable-next-line:max-line-length\n var fieldBeginOffset = inline.fieldBegin.line.getOffset(inline.fieldBegin, 0);\n // tslint:disable-next-line:max-line-length\n var fieldBeginIndex = this.getHierarchicalIndex(inline.fieldBegin.line, fieldBeginOffset.toString());\n if (!TextPosition.isForwardSelection(hierarchicalIndex, fieldBeginIndex)) {\n //If field begin is before selection start, move selection start to field begin.\n // tslint:disable-next-line:max-line-length\n this.owner.selection.start.setPositionParagraph(inline.fieldBegin.line, fieldBeginOffset);\n return;\n }\n }\n inline = this.selection.getNextRenderedElementBox(inline, indexInInline);\n }\n if (inline instanceof FieldElementBox && !isNullOrUndefined(inline.fieldEnd)) {\n var selectionStartParagraph = this.owner.selection.start.paragraph;\n var selectionStartIndex = 0;\n // tslint:disable-next-line:max-line-length\n var selectionStartInlineObj = selectionStartParagraph.getInline(this.owner.selection.start.offset, selectionStartIndex);\n var selectionStartInline = selectionStartInlineObj.element;\n selectionStartIndex = selectionStartInlineObj.index;\n var nextRenderInline = this.selection.getNextRenderedElementBox(selectionStartInline, selectionStartIndex);\n if (nextRenderInline === inline) {\n this.moveNextPositionInternal(inline);\n }\n else {\n //If selection start is before field begin, extend selection end to field end.\n inline = inline.fieldEnd;\n this.currentWidget = inline.line;\n this.offset = this.currentWidget.getOffset(inline, 1);\n //Updates physical position in current page.\n this.updatePhysicalPosition(true);\n return;\n }\n }\n else if ((inline instanceof FieldElementBox)\n && (inline.fieldType === 0 || inline.fieldType === 1)) {\n this.currentWidget = inline.line;\n this.offset = this.currentWidget.getOffset(inline, 1);\n }\n indexInInline = 0;\n var nextOffset = this.selection.getNextValidOffset(this.currentWidget, this.offset);\n var length = this.selection.getLineLength(this.currentWidget);\n var isParagraphEnd = this.selection.isParagraphLastLine(this.currentWidget);\n if (this.offset < nextOffset) {\n this.offset = nextOffset;\n var inlineObj_1 = this.currentWidget.getInline(this.offset, indexInInline);\n inline = inlineObj_1.element;\n indexInInline = inlineObj_1.index;\n if (!isNullOrUndefined(inline) && indexInInline === inline.length && inline.nextNode instanceof FieldElementBox) {\n var nextValidInline = this.selection.getNextValidElement(inline.nextNode);\n //Moves to field end mark.\n if (nextValidInline instanceof FieldElementBox && nextValidInline.fieldType === 1) {\n inline = nextValidInline;\n this.offset = this.currentWidget.getOffset(inline, 1);\n }\n }\n }\n else if (this.offset === nextOffset && this.offset < length + 1 && isParagraphEnd) {\n this.offset = length + 1;\n }\n else {\n this.updateOffsetToNextParagraph(indexInInline, true);\n }\n //Gets physical position in current page.\n this.updatePhysicalPosition(true);\n };\n /**\n * Move to given inline\n * @private\n */\n TextPosition.prototype.moveToInline = function (inline, index) {\n this.currentWidget = inline.line;\n this.offset = this.currentWidget.getOffset(inline, index);\n //Updates physical position in current page.\n this.updatePhysicalPosition(true);\n };\n /**\n * Return true is start element exist before end element\n * @private\n */\n TextPosition.isForwardSelection = function (start, end) {\n if (start === end) {\n return true;\n }\n start = start.replace(/C;/g, '');\n end = end.replace(/C;/g, '');\n start = start.replace(/H;/g, '');\n end = end.replace(/H;/g, '');\n start = start.replace(/F;/g, '');\n end = end.replace(/F;/g, '');\n var selectionStart = start.split(';');\n var selectionEnd = end.split(';');\n var length = selectionStart.length;\n if (length > selectionEnd.length) {\n length = selectionEnd.length - 1;\n }\n for (var i = 0; i < length; i++) {\n var startOffset = parseFloat(selectionStart[i]);\n var endOffset = parseFloat(selectionEnd[i]);\n if (startOffset !== endOffset) {\n return startOffset < endOffset;\n }\n }\n return false;\n };\n /**\n * Move to previous position offset\n * @private\n */\n TextPosition.prototype.movePreviousPositionInternal = function (fieldEnd) {\n var inline;\n if (isNullOrUndefined(fieldEnd.fieldSeparator)) {\n inline = this.selection.getPreviousValidElement(fieldEnd.fieldBegin);\n }\n else {\n inline = this.selection.getPreviousValidElement(fieldEnd);\n }\n this.currentWidget = inline.line;\n this.offset = this.currentWidget.getOffset(inline, inline instanceof FieldElementBox ? 0 : inline.length);\n };\n /**\n * Moves the text position to start of the word.\n * @private\n */\n TextPosition.prototype.moveToWordStartInternal = function (type) {\n var endOffset = this.currentWidget.getEndOffset();\n var currentPara = this.currentWidget.paragraph;\n var selection = this.selection;\n if (type === 2 && (this.offset === endOffset || this.offset === endOffset + 1)) {\n return;\n }\n if (this.offset === endOffset + 1) {\n this.offset = endOffset;\n }\n else if (this.offset === selection.getStartOffset(currentPara) && this.currentWidget === currentPara.childWidgets[0]) {\n var previousParagraph = selection.getPreviousParagraphBlock(currentPara);\n if (isNullOrUndefined(previousParagraph)) {\n return;\n }\n this.currentWidget = previousParagraph.childWidgets[previousParagraph.childWidgets.length - 1];\n this.offset = this.currentWidget.getEndOffset();\n }\n else {\n if (this.offset === selection.getStartLineOffset(this.currentWidget)) {\n var lineIndex = currentPara.childWidgets.indexOf(this.currentWidget);\n if (lineIndex - 1 >= 0) {\n this.currentWidget = currentPara.childWidgets[lineIndex - 1];\n this.offset = this.currentWidget.getEndOffset();\n }\n }\n var isStarted = false;\n var endSelection = false;\n var indexInInline = 0;\n var inlineObj = this.currentWidget.getInline(this.offset, indexInInline);\n var inline = inlineObj.element;\n indexInInline = inlineObj.index;\n // tslint:disable-next-line:max-line-length \n this.getPreviousWordOffset(inline, selection, indexInInline, type, (inline instanceof FieldElementBox && inline.fieldType === 1), isStarted, endSelection, this);\n }\n if (type === 1) {\n this.calculateOffset();\n }\n this.updatePhysicalPosition(true);\n };\n /**\n * Get next word offset\n * @private\n */\n // tslint:disable-next-line:max-line-length\n TextPosition.prototype.getNextWordOffset = function (inline, indexInInline, type, isInField, endSelection, endPosition, excludeSpace) {\n if (inline instanceof TextElementBox) {\n this.getNextWordOffsetSpan(inline, indexInInline, type, isInField, endSelection, endPosition, excludeSpace);\n }\n else if (inline instanceof ImageElementBox) {\n // tslint:disable-next-line:max-line-length\n this.getNextWordOffsetImage(inline, indexInInline, type, isInField, endSelection, endPosition, excludeSpace);\n }\n else if (inline instanceof FieldElementBox && inline.fieldType === 0) {\n // tslint:disable-next-line:max-line-length\n this.getNextWordOffsetFieldBegin(inline, indexInInline, type, isInField, endSelection, endPosition, excludeSpace);\n }\n else if (inline instanceof FieldElementBox && inline.fieldType === 2 || inline instanceof BookmarkElementBox) {\n // tslint:disable-next-line:max-line-length\n this.getNextWordOffsetFieldSeperator(inline, indexInInline, type, isInField, endSelection, endPosition, excludeSpace);\n }\n else if (inline instanceof FieldElementBox && inline.fieldType === 1) {\n // tslint:disable-next-line:max-line-length\n this.getNextWordOffsetFieldEnd(inline, indexInInline, type, isInField, endSelection, endPosition, excludeSpace);\n }\n };\n /**\n * get next word offset from field begin\n * @private\n */\n // tslint:disable-next-line:max-line-length\n TextPosition.prototype.getNextWordOffsetFieldBegin = function (fieldBegin, indexInInline, type, isInField, endSelection, endPosition, excludeSpace) {\n var startOffset = fieldBegin.line.getOffset(fieldBegin, 0);\n var endOffset = startOffset + fieldBegin.length;\n if (isNullOrUndefined(fieldBegin.fieldSeparator)) {\n this.getNextWordOffsetFieldEnd(fieldBegin.fieldEnd, 0, type, isInField, endSelection, endPosition, excludeSpace);\n }\n else if (type === 0) {\n // tslint:disable-next-line:max-line-length\n this.getNextWordOffsetFieldSeperator(fieldBegin.fieldSeparator, 0, type, isInField, endSelection, endPosition, excludeSpace);\n }\n else if (!isNullOrUndefined(fieldBegin.fieldEnd)) {\n var inline = fieldBegin.fieldSeparator;\n // tslint:disable-next-line:max-line-length\n if (inline.line.paragraph === fieldBegin.fieldEnd.line.paragraph && !this.selection.hasValidInline(inline.line.paragraph, inline, fieldBegin.fieldEnd)) {\n inline = fieldBegin.fieldEnd;\n }\n // tslint:disable-next-line:max-line-length\n this.getNextWordOffset(inline, 0, type, !(endPosition.paragraph === fieldBegin.line.paragraph && endPosition.offset === startOffset), endSelection, endPosition, excludeSpace);\n // tslint:disable-next-line:max-line-length\n if (endSelection && !isNullOrUndefined(fieldBegin.fieldSeparator) && (endPosition.paragraph === fieldBegin.line.paragraph) && (endPosition.offset === fieldBegin.fieldSeparator.line.getOffset(fieldBegin.fieldSeparator, fieldBegin.fieldSeparator.length))) {\n endPosition.setPositionParagraph(fieldBegin.line, startOffset);\n return;\n }\n if (!endSelection) {\n // tslint:disable-next-line:max-line-length\n endPosition.setPositionParagraph(fieldBegin.fieldEnd.line, fieldBegin.fieldEnd.line.getOffset(fieldBegin.fieldEnd, fieldBegin.fieldEnd.length));\n }\n }\n };\n /**\n * get next word offset from image\n * @private\n */\n // tslint:disable-next-line:max-line-length\n TextPosition.prototype.getNextWordOffsetImage = function (image, indexInInline, type, isInField, endSelection, endPosition, excludeSpace) {\n if (isInField) {\n endPosition.setPositionParagraph(image.line, image.line.getOffset(image, indexInInline));\n endSelection = false;\n return;\n }\n if (indexInInline === 0) {\n var startOffset = image.line.getOffset(image, 0);\n endSelection = true;\n if (endPosition.offset === startOffset) {\n if (isNullOrUndefined(image.nextNode)) {\n endPosition.setPositionParagraph(image.line, startOffset + image.length);\n }\n else {\n this.getNextWordOffset(image.nextNode, 0, type, isInField, endSelection, endPosition, excludeSpace);\n }\n }\n else {\n endPosition.setPositionParagraph(image.line, startOffset);\n }\n }\n else if (!isNullOrUndefined(image.nextNode)) {\n this.getNextWordOffset(image.nextNode, 0, type, isInField, endSelection, endPosition, excludeSpace);\n }\n };\n /**\n * get next word offset from span\n */\n // tslint:disable-next-line:max-line-length\n TextPosition.prototype.getNextWordOffsetSpan = function (span, indexInInline, type, isInField, endSelection, endPosition, excludeSpace) {\n if (span.text === '\\t' || span.text === '\\v') {\n if (isInField) {\n endPosition.setPositionParagraph(span.line, span.line.getOffset(span, indexInInline));\n endSelection = false;\n return;\n }\n if (indexInInline === 0) {\n endSelection = true;\n var startOffset = span.line.getOffset(span, 0);\n if (endPosition.offset === startOffset) {\n endPosition.setPositionParagraph(span.line, startOffset + span.length);\n }\n else {\n endPosition.setPositionParagraph(span.line, startOffset);\n }\n }\n else if (!isNullOrUndefined(span.nextNode)) {\n this.getNextWordOffset(span.nextNode, 0, type, isInField, endSelection, endPosition, excludeSpace);\n }\n }\n else {\n var wordEndIndex = 0;\n if (indexInInline === 0 && endSelection && (HelperMethods.wordSplitCharacters.indexOf(span.text[0]) === -1)) {\n endPosition.setPositionParagraph(span.line, span.line.getOffset(span, indexInInline));\n if (isInField) {\n return;\n }\n }\n else if (indexInInline < span.length) {\n // tslint:disable-next-line:max-line-length\n var txt = indexInInline > 0 && span.text.length - 1 >= indexInInline ? span.text.slice(indexInInline, span.length) : span.text;\n wordEndIndex = HelperMethods.indexOfAny(txt, HelperMethods.wordSplitCharacters);\n if (wordEndIndex !== -1) {\n if (isInField) {\n endSelection = false;\n return;\n }\n var offset = span.line.getOffset(span, wordEndIndex + indexInInline);\n // tslint:disable-next-line:max-line-length\n if ((excludeSpace || txt[wordEndIndex] !== ' ') && !endSelection && span.line.paragraph === endPosition.paragraph && offset !== endPosition.offset) {\n endSelection = true;\n endPosition.setPositionParagraph(span.line, offset);\n return;\n }\n wordEndIndex++;\n while (wordEndIndex < txt.length && HelperMethods.wordSplitCharacters.indexOf(txt[wordEndIndex]) !== -1) {\n if (txt[wordEndIndex] !== ' ' && txt[wordEndIndex] !== ' ') {\n break;\n }\n wordEndIndex++;\n }\n endSelection = true;\n if (wordEndIndex < txt.length) {\n // tslint:disable-next-line:max-line-length\n endPosition.setPositionParagraph(span.line, span.line.getOffset(span, wordEndIndex + indexInInline));\n }\n else if (!isNullOrUndefined(span.nextNode)) {\n // tslint:disable-next-line:max-line-length\n this.getNextWordOffset(span.nextNode, 0, type, isInField, endSelection, endPosition, excludeSpace);\n }\n else {\n // tslint:disable-next-line:max-line-length\n endPosition.setPositionParagraph(span.line, span.line.getOffset(span, wordEndIndex + indexInInline));\n }\n }\n else if (!isNullOrUndefined(span.nextNode)) {\n this.getNextWordOffset(span.nextNode, 0, type, isInField, endSelection, endPosition, excludeSpace);\n }\n else {\n endPosition.setPositionParagraph(span.line, span.line.getEndOffset());\n }\n }\n else if (!isNullOrUndefined(span.nextNode)) {\n this.getNextWordOffset(span.nextNode, 0, type, isInField, endSelection, endPosition, excludeSpace);\n }\n }\n };\n /**\n * get next word offset from field separator\n * @private\n */\n // tslint:disable-next-line:max-line-length\n TextPosition.prototype.getNextWordOffsetFieldSeperator = function (fieldSeparator, indexInInline, type, isInField, endSelection, endPosition, excludeSpace) {\n if (!isNullOrUndefined(fieldSeparator.nextNode)) {\n this.getNextWordOffset(fieldSeparator.nextNode, 0, type, isInField, endSelection, endPosition, excludeSpace);\n }\n };\n /**\n * get next word offset from field end\n * @private\n */\n // tslint:disable-next-line:max-line-length\n TextPosition.prototype.getNextWordOffsetFieldEnd = function (fieldEnd, indexInInline, type, isInField, endSelection, endPosition, excludeSpace) {\n var startOffset = fieldEnd.line.getOffset(fieldEnd, 0);\n var endOffset = startOffset + fieldEnd.length;\n if (endPosition.offset === startOffset) {\n endPosition.setPositionParagraph(fieldEnd.line, endOffset);\n if (isNullOrUndefined(fieldEnd.nextNode)) {\n return;\n }\n }\n if (!isNullOrUndefined(fieldEnd.nextNode)) {\n this.getNextWordOffset(fieldEnd.nextNode, 0, type, false, endSelection, endPosition, excludeSpace);\n if (endPosition.offset === endOffset) {\n endPosition.setPositionParagraph(fieldEnd.line, startOffset);\n }\n }\n else {\n endPosition.setPositionParagraph(fieldEnd.line, startOffset);\n }\n endSelection = true;\n };\n /**\n * Get previous word offset\n * @private\n */\n // tslint:disable-next-line:max-line-length\n TextPosition.prototype.getPreviousWordOffset = function (inline, selection, indexInInline, type, isInField, isStarted, endSelection, endPosition) {\n if (inline instanceof TextElementBox) {\n // tslint:disable-next-line:max-line-length\n this.getPreviousWordOffsetSpan(inline, selection, indexInInline, type, isInField, isStarted, endSelection, endPosition);\n }\n else if (inline instanceof ImageElementBox) {\n // tslint:disable-next-line:max-line-length\n this.getPreviousWordOffsetImage(inline, selection, indexInInline, type, isInField, isStarted, endSelection, endPosition);\n }\n else if (inline instanceof FieldElementBox && inline.fieldType === 0) {\n // tslint:disable-next-line:max-line-length\n this.getPreviousWordOffsetFieldBegin(inline, selection, indexInInline, type, isInField, isStarted, endSelection, endPosition);\n }\n else if (inline instanceof FieldElementBox && inline.fieldType === 2) {\n // tslint:disable-next-line:max-line-length\n this.getPreviousWordOffsetFieldSeparator(inline, selection, indexInInline, type, isInField, isStarted, endSelection, endPosition);\n }\n else if (inline instanceof FieldElementBox && inline.fieldType === 1) {\n // tslint:disable-next-line:max-line-length\n this.getPreviousWordOffsetFieldEnd(inline, selection, indexInInline, type, isInField, isStarted, endSelection, endPosition);\n }\n else if (inline instanceof BookmarkElementBox) {\n this.getPreviousWordOffsetBookMark(inline, selection, indexInInline, type, isInField, isStarted, endSelection, endPosition);\n }\n else if (inline instanceof ListTextElementBox && inline.previousNode) {\n // tslint:disable-next-line:max-line-length\n this.getPreviousWordOffsetSpan(inline.previousNode, selection, indexInInline, type, isInField, isStarted, endSelection, endPosition);\n }\n };\n // tslint:disable-next-line:max-line-length\n TextPosition.prototype.getPreviousWordOffsetBookMark = function (bookmark, selection, indexInInline, type, isInField, isStarted, endSelection, endPosition) {\n if (bookmark.previousNode) {\n if (bookmark.previousNode instanceof TextElementBox) {\n var inline = bookmark.previousNode;\n if (HelperMethods.lastIndexOfAny(inline.text, HelperMethods.wordSplitCharacters) !== inline.text.length - 1) {\n this.getPreviousWordOffset(inline, selection, indexInInline, type, isInField, isStarted, endSelection, endPosition);\n }\n else {\n endPosition.setPositionParagraph(bookmark.line, bookmark.line.getOffset(bookmark, 0));\n }\n }\n }\n else {\n endPosition.setPositionParagraph(bookmark.line, selection.getStartLineOffset(bookmark.line));\n }\n };\n /**\n * get previous word offset from field end\n * @private\n */\n // tslint:disable-next-line:max-line-length\n TextPosition.prototype.getPreviousWordOffsetFieldEnd = function (fieldEnd, selection, indexInInline, type, isInField, isStarted, endSelection, endPosition) {\n var startOffset = fieldEnd.line.getOffset(fieldEnd, 0);\n var endOffset = startOffset + fieldEnd.length;\n if (isNullOrUndefined(fieldEnd.fieldSeparator)) {\n this.getPreviousWordOffsetFieldBegin(fieldEnd.fieldBegin, selection, 0, type, isInField, isStarted, endSelection, endPosition);\n }\n else if (type === 0 && !isNullOrUndefined(fieldEnd.previousNode)) {\n var inline = fieldEnd.previousNode;\n // tslint:disable-next-line:max-line-length\n this.getPreviousWordOffset(inline, selection, inline.length, type, (inline instanceof FieldElementBox && inline.fieldType === 1), isStarted, endSelection, endPosition);\n }\n else if (!isNullOrUndefined(fieldEnd.fieldBegin) && type !== 0) {\n var inline = fieldEnd.previousNode;\n // tslint:disable-next-line:max-line-length\n if (isNullOrUndefined(inline) || (inline.line.paragraph === fieldEnd.fieldBegin.line.paragraph && !selection.hasValidInline(inline.line.paragraph, inline, fieldEnd.fieldBegin))) {\n inline = fieldEnd.fieldBegin;\n }\n // tslint:disable-next-line:max-line-length\n this.getPreviousWordOffset(inline, selection, inline.length, type, !(endPosition.paragraph === fieldEnd.line.paragraph && endPosition.offset === endOffset), isStarted, endSelection, endPosition);\n if (endSelection && endPosition.paragraph === fieldEnd.line.paragraph\n && endPosition.offset === startOffset) {\n endPosition.setPositionParagraph(fieldEnd.line, endOffset);\n return;\n }\n if (!endSelection) {\n // tslint:disable-next-line:max-line-length\n endPosition.setPositionParagraph(fieldEnd.fieldBegin.line, fieldEnd.fieldBegin.line.getOffset(fieldEnd.fieldBegin, 0));\n }\n }\n };\n /**\n * get previous word offset from field separator\n * @private\n */\n // tslint:disable-next-line:max-line-length\n TextPosition.prototype.getPreviousWordOffsetFieldSeparator = function (fieldSeparator, selection, indexInInline, type, isInField, isStarted, endSelection, endPosition) {\n this.getPreviousWordOffsetFieldBegin(fieldSeparator.fieldBegin, selection, fieldSeparator.fieldBegin.length, type, isInField, isStarted, endSelection, endPosition);\n };\n /**\n * get previous word offset from field begin\n * @private\n */\n // tslint:disable-next-line:max-line-length\n TextPosition.prototype.getPreviousWordOffsetFieldBegin = function (fieldBegin, selection, indexInInline, type, isInField, isStarted, endSelection, endPosition) {\n var startOffset = fieldBegin.line.getOffset(fieldBegin, 0);\n var endOffset = startOffset + fieldBegin.length;\n if (endPosition.offset === endOffset) {\n endPosition.setPositionParagraph(fieldBegin.line, startOffset);\n }\n if (!isNullOrUndefined(fieldBegin.previousNode)) {\n // tslint:disable-next-line:max-line-length\n this.getPreviousWordOffset(fieldBegin.previousNode, selection, fieldBegin.previousNode.length, type, false, isStarted, endSelection, endPosition);\n if (endPosition.offset === startOffset) {\n if (type !== 0 && !isNullOrUndefined(fieldBegin.fieldSeparator)) {\n // tslint:disable-next-line:max-line-length\n endPosition.setPositionParagraph(fieldBegin.line, fieldBegin.fieldSeparator.line.getOffset(fieldBegin.fieldSeparator, fieldBegin.fieldSeparator.length));\n }\n }\n }\n else {\n endPosition.setPositionParagraph(fieldBegin.line, selection.getStartLineOffset(fieldBegin.line));\n }\n };\n /**\n * get previous word offset from image\n * @private\n */\n // tslint:disable-next-line:max-line-length\n TextPosition.prototype.getPreviousWordOffsetImage = function (image, selection, indexInInline, type, isInField, isStarted, endSelection, endPosition) {\n if (isInField) {\n endPosition.setPositionParagraph(image.line, image.line.getOffset(image, indexInInline));\n endSelection = false;\n return;\n }\n if (indexInInline === image.length) {\n var endOffset = image.line.getOffset(image, image.length);\n if (endOffset === endPosition.offset) {\n endPosition.setPositionParagraph(image.line, endOffset - image.length);\n }\n else {\n endPosition.setPositionParagraph(image.line, endOffset);\n }\n }\n else if (!isNullOrUndefined(image.previousNode)) {\n // tslint:disable-next-line:max-line-length\n this.getPreviousWordOffset(image.previousNode, selection, image.previousNode.length, type, isInField, isStarted, endSelection, endPosition);\n }\n };\n /**\n * Get previous word offset from span\n * @private\n */\n // tslint:disable-next-line:max-line-length \n TextPosition.prototype.getPreviousWordOffsetSpan = function (span, selection, indexInInline, type, isInField, isStarted, endSelection, endPosition) {\n if (span.text === '\\t' || span.text === '\\v') {\n if (isInField) {\n endSelection = false;\n return;\n }\n if (indexInInline === span.length) {\n endSelection = true;\n var endOffset = span.line.getOffset(span, span.length);\n if (endOffset === endPosition.offset) {\n endPosition.setPositionParagraph(span.line, endOffset - span.length);\n }\n else {\n endPosition.setPositionParagraph(span.line, endOffset);\n }\n }\n else if (!isNullOrUndefined(span.previousNode)) {\n // tslint:disable-next-line:max-line-length\n this.getPreviousWordOffset(span.previousNode, selection, span.previousNode.length, type, isInField, isStarted, endSelection, endPosition);\n }\n }\n else {\n var wordStartIndex = 0;\n if (!isStarted) {\n while (indexInInline > 0 && span.text[indexInInline - 1] === ' ') {\n indexInInline--;\n }\n endPosition.setPositionParagraph(span.line, span.line.getOffset(span, indexInInline));\n }\n if (indexInInline > 0) {\n isStarted = true;\n if (indexInInline === 0 && endSelection && (HelperMethods.wordSplitCharacters.indexOf(span.text[0])) === -1) {\n endPosition.setPositionParagraph(span.line, span.line.getOffset(span, indexInInline));\n endSelection = true;\n return;\n }\n var txt = span.text.length > indexInInline ? span.text.slice(0, indexInInline) : span.text;\n wordStartIndex = HelperMethods.lastIndexOfAny(txt, HelperMethods.wordSplitCharacters);\n if (wordStartIndex !== -1) {\n if (isInField) {\n endSelection = false;\n return;\n }\n while (wordStartIndex > 0 && endSelection && txt[wordStartIndex] !== ' '\n && (HelperMethods.wordSplitCharacters.indexOf(txt[wordStartIndex - 1])) !== -1) {\n wordStartIndex--;\n }\n if (txt[wordStartIndex] === ' ' || txt[wordStartIndex] === ' ' || !endSelection) {\n wordStartIndex++;\n }\n endSelection = true;\n if (wordStartIndex > 0) {\n var offset = span.line.getOffset(span, wordStartIndex);\n if (span.line.paragraph === endPosition.paragraph && offset === endPosition.offset) {\n // tslint:disable-next-line:max-line-length\n this.getPreviousWordOffsetSpan(span, selection, indexInInline, type, isInField, isStarted, endSelection, endPosition);\n }\n else {\n endPosition.setPositionParagraph(span.line, offset);\n }\n }\n else if (span.previousNode instanceof TextElementBox) {\n // tslint:disable-next-line:max-line-length\n this.getPreviousWordOffset(span.previousNode, selection, span.previousNode.length, type, isInField, isStarted, endSelection, endPosition);\n }\n else {\n endPosition.setPositionParagraph(span.line, span.line.getOffset(span, 0));\n }\n }\n else {\n this.setPreviousWordOffset(span, selection, indexInInline, type, isInField, isStarted, endSelection, endPosition);\n }\n }\n else {\n this.setPreviousWordOffset(span, selection, indexInInline, type, isInField, isStarted, endSelection, endPosition);\n }\n }\n };\n /**\n * set previous word offset in span\n * @private\n */\n // tslint:disable-next-line:max-line-length\n TextPosition.prototype.setPreviousWordOffset = function (span, selection, indexInInline, type, isInField, isStarted, endSelection, endPosition) {\n if (span.previousNode instanceof ElementBox && span.line === span.previousNode.line) {\n // tslint:disable-next-line:max-line-length\n this.getPreviousWordOffset(span.previousNode, selection, span.previousNode.length, type, isInField, isStarted, endSelection, endPosition);\n }\n else {\n endPosition.setPositionParagraph(span.line, selection.getStartLineOffset(span.line));\n }\n };\n /**\n * Validate if text position is in field forward\n * @private\n */\n TextPosition.prototype.validateForwardFieldSelection = function (currentIndex, selectionEndIndex) {\n var textPosition = new TextPosition(this.owner);\n textPosition.setPositionForCurrentIndex(currentIndex);\n textPosition.isUpdateLocation = false;\n var isPositionMoved = false;\n while (currentIndex !== selectionEndIndex && TextPosition.isForwardSelection(currentIndex, selectionEndIndex)) {\n if (!isPositionMoved) {\n textPosition.moveNextPosition(false);\n var nextIndex = textPosition.getHierarchicalIndexInternal();\n //Handled specifically to break infinite looping, if selection ends at last paragraph mark.\n if (currentIndex === nextIndex) {\n break;\n }\n }\n var indexInInline = 0;\n var inlineObj = textPosition.currentWidget.getInline(textPosition.offset, indexInInline);\n var inline = inlineObj.element;\n indexInInline = inlineObj.index;\n if (!isNullOrUndefined(inline)) {\n var selectionStartIndex = this.selection.start.getHierarchicalIndexInternal();\n if (indexInInline === inline.length && inline instanceof FieldElementBox && inline.fieldType === 1) {\n if (inline.line.getOffset(inline, 0) === this.offset) {\n return;\n }\n var lineWidget = inline.fieldBegin.line;\n var fieldBeginOffset = lineWidget.getOffset(inline.fieldBegin, 0);\n var fieldBeginIndex = this.getHierarchicalIndex(lineWidget, fieldBeginOffset.toString());\n if (!TextPosition.isForwardSelection(selectionStartIndex, fieldBeginIndex)) {\n this.selection.start.setPositionParagraph(lineWidget, fieldBeginOffset);\n }\n }\n var nextInline = this.selection.getNextRenderedElementBox(inline, indexInInline);\n if (!isNullOrUndefined(nextInline) && nextInline instanceof ElementBox) {\n inline = nextInline;\n }\n }\n isPositionMoved = (inline instanceof FieldElementBox && inline.fieldType === 0 && !isNullOrUndefined(inline.fieldEnd));\n if (isPositionMoved) {\n if (inline.line.getOffset(inline, 0) === this.offset) {\n return;\n }\n var fieldEnd = inline.fieldEnd;\n var paragraph = fieldEnd.line.paragraph;\n var fieldEndOffset = fieldEnd.line.getOffset(fieldEnd, 1);\n var fieldEndIndex = this.getHierarchicalIndex(fieldEnd.line, fieldEndOffset.toString());\n if (!TextPosition.isForwardSelection(fieldEndIndex, selectionEndIndex)) {\n //If selection end is after field begin, extend selection end to field end.\n this.moveToInline(inline.fieldEnd, 1);\n return;\n }\n textPosition.moveToInline(inline.fieldEnd, 1);\n }\n currentIndex = textPosition.getHierarchicalIndexInternal();\n }\n };\n /**\n * Validate if text position is in field backward\n * @private\n */\n TextPosition.prototype.validateBackwardFieldSelection = function (currentIndex, selectionEndIndex) {\n var textPosition = new TextPosition(this.owner);\n textPosition.setPositionForCurrentIndex(currentIndex);\n textPosition.isUpdateLocation = false;\n var selectionStartIndex = this.selection.start.getHierarchicalIndexInternal();\n while (currentIndex !== selectionEndIndex && TextPosition.isForwardSelection(selectionEndIndex, currentIndex)) {\n var indexInInline = 0;\n var inlineObj = textPosition.currentWidget.getInline(textPosition.offset, indexInInline);\n var inline = inlineObj.element;\n indexInInline = inlineObj.index;\n if (!isNullOrUndefined(inline)) {\n var nextInline = this.selection.getNextRenderedElementBox(inline, indexInInline);\n if (nextInline instanceof FieldElementBox && nextInline.fieldType === 0) {\n var paragraph = nextInline.fieldEnd.line;\n var fieldEndOffset = paragraph.getOffset(nextInline.fieldEnd, 1);\n var fieldEndIndex = this.getHierarchicalIndex(paragraph, fieldEndOffset.toString());\n if (!TextPosition.isForwardSelection(fieldEndIndex, selectionStartIndex)) {\n this.selection.start.setPositionParagraph(paragraph, fieldEndOffset);\n selectionStartIndex = fieldEndIndex;\n }\n }\n }\n if (inline instanceof FieldElementBox && inline.fieldType === 1 && !isNullOrUndefined(inline.fieldBegin)) {\n var line = inline.fieldBegin.line;\n var fieldBegin = inline.fieldBegin;\n var fieldBeginOffset = line.getOffset(fieldBegin, 0);\n var fieldBeginIndex = this.getHierarchicalIndex(line, fieldBeginOffset.toString());\n if (!TextPosition.isForwardSelection(selectionEndIndex, fieldBeginIndex)) {\n //If field begin is before selection end, extend selection end to field begin.\n this.moveToInline(inline.fieldBegin, 0);\n return;\n }\n textPosition.moveToInline(inline.fieldBegin, 0);\n }\n else {\n textPosition.movePreviousPosition();\n }\n currentIndex = textPosition.getHierarchicalIndexInternal();\n }\n };\n /**\n * @private\n */\n TextPosition.prototype.paragraphStartInternal = function (selection, moveToPreviousParagraph) {\n var offset = selection.getStartLineOffset(this.currentWidget);\n if (this.offset === offset && moveToPreviousParagraph) {\n var startParagraph = this.moveToNextParagraphInTableCheck();\n if (startParagraph) {\n this.moveToPreviousParagraphInTable(selection);\n }\n else if (!isNullOrUndefined(selection.getPreviousParagraphBlock(this.currentWidget.paragraph))) {\n var paragraphValue = selection.getPreviousParagraphBlock(this.currentWidget.paragraph);\n this.currentWidget = paragraphValue.childWidgets[0];\n this.offset = selection.getStartLineOffset(this.currentWidget);\n }\n }\n else {\n this.currentWidget = this.currentWidget.paragraph.getSplitWidgets()[0].childWidgets[0];\n this.offset = offset;\n }\n this.calculateOffset();\n };\n /**\n * @private\n */\n TextPosition.prototype.calculateOffset = function () {\n var selectionStartIndex = this.owner.selection.start.getHierarchicalIndexInternal();\n var selectionEndIndex = this.getHierarchicalIndexInternal();\n if (selectionStartIndex !== selectionEndIndex) {\n this.validateBackwardFieldSelection(selectionStartIndex, selectionEndIndex);\n }\n this.updatePhysicalPosition(true);\n };\n /**\n * Moves the text position to start of the paragraph.\n * @private\n */\n TextPosition.prototype.moveToParagraphStartInternal = function (selection, moveToPreviousParagraph) {\n var startOffset = selection.getStartOffset(this.paragraph);\n if (this.offset === startOffset && moveToPreviousParagraph) {\n var paragraphstart = this.moveToNextParagraphInTableCheck();\n if (paragraphstart) {\n this.moveToPreviousParagraphInTable(selection);\n }\n else if (!isNullOrUndefined(selection.getPreviousParagraphBlock(this.paragraph))) {\n this.currentWidget = selection.getPreviousParagraphBlock(this.paragraph).firstChild;\n this.offset = selection.getStartOffset(this.paragraph);\n }\n }\n else {\n this.currentWidget = this.paragraph.firstChild;\n this.offset = selection.getStartLineOffset(this.currentWidget);\n }\n var selectionStartIndex = this.owner.selection.start.getHierarchicalIndexInternal();\n var selectionEndIndex = this.getHierarchicalIndexInternal();\n if (selectionStartIndex !== selectionEndIndex) {\n this.validateBackwardFieldSelection(selectionStartIndex, selectionEndIndex);\n }\n this.updatePhysicalPosition(false);\n };\n /**\n * Moves the text position to end of the paragraph.\n * @private\n */\n TextPosition.prototype.moveToParagraphEndInternal = function (selection, moveToNextParagraph) {\n // tslint:disable-next-line:max-line-length\n var splittedParagraph = this.currentWidget.paragraph;\n while (splittedParagraph.nextSplitWidget) {\n splittedParagraph = splittedParagraph.nextSplitWidget;\n }\n this.currentWidget = splittedParagraph.childWidgets[splittedParagraph.childWidgets.length - 1];\n var endOffset = this.currentWidget.getEndOffset() + 1;\n if (this.offset === endOffset && moveToNextParagraph) {\n var paragraphEnd = this.moveToNextParagraphInTableCheck();\n if (paragraphEnd) {\n this.moveToNextParagraphInTable();\n }\n else if (!isNullOrUndefined(selection.getNextParagraphBlock(this.currentWidget.paragraph))) {\n var endParagraph = selection.getNextParagraphBlock(this.currentWidget.paragraph);\n this.currentWidget = endParagraph.childWidgets[endParagraph.childWidgets.length - 1];\n this.offset = this.currentWidget.getEndOffset() + 1;\n }\n }\n else {\n this.offset = endOffset;\n }\n this.calculateOffset();\n };\n /**\n * @private\n */\n TextPosition.prototype.moveUp = function (selection, left) {\n var paragraph = this.currentWidget.paragraph;\n //Moves text position to start of line.\n this.moveToLineStartInternal(selection, true);\n //Moves previous line starting.\n this.movePreviousPosition();\n var prevLine = undefined;\n var currentParagraph = this.currentWidget.paragraph;\n if (paragraph.isInsideTable && paragraph !== currentParagraph && paragraph.associatedCell !== currentParagraph.associatedCell\n // tslint:disable-next-line:max-line-length\n && (!isNullOrUndefined(currentParagraph.associatedCell) && (paragraph.associatedCell.ownerRow === currentParagraph.associatedCell.ownerRow))) {\n var ownerRow = currentParagraph.associatedCell.ownerRow;\n if (ownerRow.previousRenderedWidget instanceof TableRowWidget) {\n // tslint:disable-next-line:max-line-length\n var cell = selection.getFirstCellInRegion(ownerRow.previousRenderedWidget, currentParagraph.associatedCell, left, true);\n var lastParagraph = selection.getLastParagraph(cell);\n this.setPosition(lastParagraph.childWidgets[lastParagraph.childWidgets.length - 1], false);\n }\n else {\n var prevBlock = ownerRow.ownerTable.previousRenderedWidget;\n do {\n if (prevBlock instanceof TableWidget) {\n prevBlock = selection.getLastBlockInLastCell(prevBlock);\n }\n } while (prevBlock instanceof TableWidget);\n if (prevBlock instanceof ParagraphWidget) {\n this.setPosition(prevBlock.childWidgets[prevBlock.childWidgets.length - 1], false);\n }\n }\n prevLine = selection.getLineWidgetParagraph(this.offset, this.currentWidget);\n }\n else {\n if (!paragraph.isInsideTable && this.currentWidget.paragraph.isInsideTable) {\n // tslint:disable-next-line:max-line-length\n var cell = selection.getFirstCellInRegion(this.currentWidget.paragraph.associatedCell.ownerRow, this.currentWidget.paragraph.associatedCell, this.owner.selection.upDownSelectionLength, true);\n var lastParagraph = selection.getLastParagraph(cell);\n this.setPosition(lastParagraph.childWidgets[lastParagraph.childWidgets.length - 1], false);\n // tslint:disable-next-line:max-line-length\n }\n else if (paragraph.isInsideTable && (!isNullOrUndefined(this.currentWidget.paragraph.associatedCell) && paragraph.associatedCell.ownerRow.previousRenderedWidget !== paragraph.associatedCell.ownerRow.previousSplitWidget &&\n paragraph.associatedCell.ownerRow.previousRenderedWidget === this.currentWidget.paragraph.associatedCell.ownerRow)) {\n // tslint:disable-next-line:max-line-length\n var cell = selection.getLastCellInRegion(this.currentWidget.paragraph.associatedCell.ownerRow, this.currentWidget.paragraph.associatedCell, this.owner.selection.upDownSelectionLength, true);\n var lastParagraph = selection.getLastParagraph(cell);\n this.setPosition(lastParagraph.childWidgets[lastParagraph.childWidgets.length - 1], false);\n }\n prevLine = selection.getLineWidgetParagraph(this.offset, this.currentWidget);\n }\n //Moves till the Up/Down selection width.\n var top = selection.getTop(prevLine);\n selection.updateTextPositionWidget(prevLine, new Point(left, top), this, false);\n };\n /**\n * @private\n */\n TextPosition.prototype.moveDown = function (selection, left) {\n //Moves text position to end of line.\n var prevParagraph = this.currentWidget.paragraph;\n var prevOffset = this.offset;\n this.moveToLineEndInternal(selection, true);\n var length = this.selection.getParagraphLength(this.currentWidget.paragraph);\n if (this.offset > length) {\n this.offset = length;\n }\n //Moves next line starting.\n this.moveNextPosition();\n var nextLine = undefined;\n // tslint:disable-next-line:max-line-length\n if (prevParagraph.isInsideTable && prevParagraph !== this.currentWidget.paragraph && prevParagraph.associatedCell !== this.currentWidget.paragraph.associatedCell && (!isNullOrUndefined(this.currentWidget.paragraph.associatedCell) && prevParagraph.associatedCell.ownerRow === this.currentWidget.paragraph.associatedCell.ownerRow)) {\n var ownerRow = this.currentWidget.paragraph.associatedCell.ownerRow;\n // tslint:disable-next-line:max-line-length\n if (prevParagraph.isInsideTable && this.currentWidget.paragraph.isInsideTable && prevParagraph.associatedCell.cellFormat.rowSpan > 1 && prevParagraph.associatedCell.cellFormat.rowSpan + prevParagraph.associatedCell.ownerRow.rowIndex === prevParagraph.associatedCell.ownerTable.childWidgets.length) {\n //If the prevParagraph owner cell is Verically merged upto the last row, then theposition moved to next column. the position moved to out of the current tabel so owner row is assigned to last row.\n // tslint:disable-next-line:max-line-length\n ownerRow = this.currentWidget.paragraph.associatedCell.ownerTable.childWidgets[this.currentWidget.paragraph.associatedCell.ownerTable.childWidgets.length - 1];\n }\n if (ownerRow.nextRenderedWidget instanceof TableRowWidget) {\n // tslint:disable-next-line:max-line-length\n var cell = this.selection.getLastCellInRegion(ownerRow.nextRenderedWidget, this.currentWidget.paragraph.associatedCell, left, false);\n this.setPosition(this.selection.getFirstParagraph(cell).childWidgets[0], true);\n }\n else {\n var nextBlock = this.selection.getNextRenderedBlock(ownerRow.ownerTable);\n do {\n if (nextBlock instanceof TableWidget) {\n nextBlock = this.selection.getFirstBlockInFirstCell(nextBlock);\n }\n } while (nextBlock instanceof TableWidget);\n if (nextBlock instanceof ParagraphWidget) {\n this.setPosition(nextBlock.childWidgets[0], true);\n }\n }\n nextLine = selection.getLineWidgetParagraph(this.offset, this.currentWidget);\n }\n else {\n if (!prevParagraph.isInsideTable && this.currentWidget.paragraph.isInsideTable) {\n // tslint:disable-next-line:max-line-length\n var cell = this.selection.getLastCellInRegion(this.currentWidget.paragraph.associatedCell.ownerRow, this.currentWidget.paragraph.associatedCell, this.owner.selection.upDownSelectionLength, false);\n this.setPosition(this.selection.getFirstParagraph(cell).childWidgets[0], true);\n // tslint:disable-next-line:max-line-length\n }\n else if (prevParagraph.isInsideTable && (!isNullOrUndefined(this.currentWidget.paragraph.associatedCell) && prevParagraph.associatedCell.ownerRow.nextRenderedWidget !== prevParagraph.associatedCell.ownerRow.nextSplitWidget\n && prevParagraph.associatedCell.ownerRow.nextRenderedWidget === this.currentWidget.paragraph.associatedCell.ownerRow)) {\n // tslint:disable-next-line:max-line-length\n var cell = selection.getLastCellInRegion(this.currentWidget.paragraph.associatedCell.ownerRow, this.currentWidget.paragraph.associatedCell, this.owner.selection.upDownSelectionLength, true);\n this.setPosition(selection.getFirstParagraph(cell).childWidgets[0], false);\n }\n nextLine = selection.getLineWidgetParagraph(this.offset, this.currentWidget);\n }\n //Moves till the Up/Down selection width.\n var top = this.selection.getTop(nextLine);\n this.selection.updateTextPositionWidget(nextLine, new Point(left, top), this, false);\n };\n /**\n * Moves the text position to start of the line.\n * @private\n */\n TextPosition.prototype.moveToLineStartInternal = function (selection, moveToPreviousLine) {\n if (this.location.x > this.viewer.clientActiveArea.right) {\n this.offset = this.offset - 1;\n }\n var currentLine = selection.getLineWidgetInternal(this.currentWidget, this.offset, moveToPreviousLine);\n var firstElement = selection.getFirstElementInternal(currentLine);\n var startOffset = selection.getStartOffset(this.currentWidget.paragraph);\n if (isNullOrUndefined(firstElement) && this.offset > startOffset) {\n var index = 0;\n var inlineObj = this.currentWidget.getInline(this.offset, index);\n var inline = inlineObj.element;\n index = inlineObj.index;\n if (inline instanceof TextElementBox && inline.text !== '\\v') {\n this.offset = startOffset;\n }\n }\n else if (!isNullOrUndefined(firstElement)) {\n var indexInInline = selection.getIndexInInline(firstElement);\n this.currentWidget = firstElement.line;\n this.offset = this.currentWidget.getOffset(firstElement, indexInInline);\n indexInInline = 0;\n var inlineObj = this.currentWidget.getInline(this.offset, indexInInline);\n var inline = inlineObj.element;\n indexInInline = inlineObj.index;\n if (inline instanceof FieldElementBox) {\n //Checks if field character is part of rendered field, otherwise moves to previous rendered content.\n var prevInline = selection.getPreviousValidElement(inline);\n if (!isNullOrUndefined(prevInline)) {\n inline = prevInline;\n this.currentWidget = inline.line;\n this.offset = this.currentWidget.getOffset(inline, inline.length);\n if (inline instanceof FieldElementBox) {\n this.offset--;\n }\n }\n }\n }\n this.updatePhysicalPosition(true);\n };\n /**\n * Check paragraph is inside table\n * @private\n */\n TextPosition.prototype.moveToNextParagraphInTableCheck = function () {\n if ((this.selection.start.paragraph.isInsideTable || this.paragraph.isInsideTable)\n && (this.selection.start.paragraph.associatedCell !== this.paragraph.associatedCell\n || this.selection.isCellSelected(this.selection.start.paragraph.associatedCell, this.selection.start, this))) {\n return true;\n }\n return false;\n };\n /**\n * Moves the text position to end of the word.\n * @private\n */\n TextPosition.prototype.moveToWordEndInternal = function (type, excludeSpace) {\n // type === 0 -------->CTRL+ARROW Navigation\n // type === 1 -------->CTRL+SHIFT+ARROW Selection\n // type === 2 -------->Double-tap Word Selection\n var incrementValue = 0;\n var endOffset = this.currentWidget.getEndOffset();\n if (this.selection.isParagraphFirstLine(this.currentWidget)) {\n if (this.currentWidget.children[0] instanceof ListTextElementBox) {\n incrementValue = 1;\n }\n if (this.currentWidget.children[1] instanceof ListTextElementBox) {\n incrementValue = 2;\n }\n }\n if (this.offset + incrementValue === endOffset || this.offset === endOffset + 1) {\n if (this.offset === endOffset && type !== 0) {\n this.setPositionParagraph(this.currentWidget, endOffset + 1);\n }\n else {\n var nextParagraph = this.selection.getNextParagraphBlock(this.currentWidget.paragraph);\n if (isNullOrUndefined(nextParagraph)) {\n return;\n }\n this.currentWidget = nextParagraph.childWidgets[0];\n this.offset = this.selection.getStartLineOffset(this.currentWidget);\n if (type === 1) {\n // tslint:disable-next-line:max-line-length\n var nextWord = this.moveToNextParagraphInTableCheck();\n if (nextWord) {\n this.moveToNextParagraphInTable();\n }\n else {\n this.moveToWordEndInternal(type, excludeSpace);\n }\n }\n }\n }\n else {\n var indexInInline = 0;\n var endSelection = false;\n var inlineObj = this.currentWidget.getInline(this.offset, indexInInline);\n var inline = inlineObj.element;\n indexInInline = inlineObj.index;\n this.getNextWordOffset(inline, indexInInline, type, false, endSelection, this, excludeSpace);\n }\n if (type !== 0) {\n var selectionStartIndex = this.owner.selection.start.getHierarchicalIndexInternal();\n var selectionEndIndex = this.getHierarchicalIndexInternal();\n if (selectionStartIndex !== selectionEndIndex) {\n this.validateForwardFieldSelection(selectionStartIndex, selectionEndIndex);\n }\n }\n this.updatePhysicalPosition(true);\n };\n /**\n * move text position to next paragraph inside table\n * @private\n */\n TextPosition.prototype.moveToNextParagraphInTable = function () {\n var paragraph = this.currentWidget.paragraph;\n var nextParagraph = (paragraph.isInsideTable) ? this.selection.getNextSelectionCell(paragraph.associatedCell) :\n this.selection.getNextParagraphBlock(paragraph);\n if (isNullOrUndefined(nextParagraph)) {\n return;\n }\n this.currentWidget = nextParagraph.childWidgets[nextParagraph.childWidgets.length - 1];\n this.offset = this.currentWidget.getEndOffset() + 1;\n };\n /**\n * Moves the text position to start of the previous paragraph.\n */\n TextPosition.prototype.moveToPreviousParagraph = function (selection) {\n var startOffset = selection.getStartOffset(this.currentWidget.paragraph);\n // tslint:disable-next-line:max-line-length\n if (this.offset === startOffset && !isNullOrUndefined(selection.getPreviousParagraphBlock(this.currentWidget.paragraph))) {\n var previousParagraph = selection.getPreviousParagraphBlock(this.currentWidget.paragraph);\n this.currentWidget = previousParagraph.childWidgets[0];\n this.offset = selection.getStartOffset(this.currentWidget.paragraph);\n }\n else {\n this.offset = selection.getStartOffset(this.currentWidget.paragraph);\n }\n this.updatePhysicalPosition(true);\n };\n /**\n * Move to previous line from current position\n * @private\n */\n TextPosition.prototype.moveToPreviousLine = function (selection, left) {\n var currentIndex = this.getHierarchicalIndexInternal();\n var currentLine = selection.getLineWidgetParagraph(this.offset, this.currentWidget);\n //Moves text position to start of line.\n this.moveToLineStartInternal(selection, true);\n if (this.currentWidget.paragraph.isInsideTable) {\n this.moveUpInTable(selection);\n }\n else {\n this.moveBackward();\n }\n var prevLine = selection.getLineWidgetParagraph(this.offset, this.currentWidget);\n var lineStart = selection.getLeft(prevLine);\n var lineWidth = selection.getWidth(prevLine, true);\n //Moves till the Up/Down selection width.\n if (lineWidth + lineStart >= left && currentLine !== prevLine) {\n var top_1 = selection.getTop(prevLine);\n var point = new Point(left, top_1);\n selection.updateTextPositionWidget(prevLine, point, this, true);\n }\n //Checks if the current position is between field result, then move to field begin.\n var selectionEndIndex = this.getHierarchicalIndexInternal();\n this.validateBackwardFieldSelection(currentIndex, selectionEndIndex);\n };\n /**\n * @private\n */\n TextPosition.prototype.moveToLineEndInternal = function (selection, moveToNextLine) {\n if (this.location.x > this.viewer.clientActiveArea.right) {\n this.offset = this.offset - 1;\n }\n var currentLine = selection.getLineWidgetParagraph(this.offset, this.currentWidget);\n var firstElement = selection.getFirstElementInternal(currentLine);\n if (isNullOrUndefined(firstElement) && this.offset === selection.getStartLineOffset(this.currentWidget)) {\n this.offset = selection.getParagraphLength(this.paragraph) + 1;\n this.updatePhysicalPosition(true);\n }\n else if (!isNullOrUndefined(firstElement)) {\n var lastElement = currentLine.children[currentLine.children.length - 1];\n var index = 0;\n index += lastElement instanceof TextElementBox ? lastElement.length : 1;\n this.currentWidget = lastElement.line;\n if (index === lastElement.length\n && isNullOrUndefined(lastElement.nextNode) && selection.isParagraphLastLine(this.currentWidget)) {\n var length_1 = selection.getLineLength(this.currentWidget);\n this.offset = moveToNextLine ? length_1 + 1 : length_1;\n }\n else {\n var inline = lastElement;\n while (!isNullOrUndefined(inline) && inline.length === index && inline.nextNode instanceof FieldElementBox) {\n var nextInline = selection.getNextValidElement(inline.nextNode);\n if (inline !== nextInline) {\n inline = nextInline;\n index = 0;\n }\n if (inline instanceof FieldElementBox && inline.fieldType === 0\n && !isNullOrUndefined(inline.fieldEnd)) {\n var fieldBegin = inline;\n if (isNullOrUndefined(fieldBegin.fieldSeparator)) {\n inline = fieldBegin.fieldEnd;\n }\n else {\n inline = fieldBegin.fieldSeparator;\n this.currentWidget = inline.line;\n if (this.currentWidget === fieldBegin.fieldEnd.line\n && !selection.hasValidInline(this.currentWidget.paragraph, inline, fieldBegin.fieldEnd)) {\n inline = fieldBegin.fieldEnd;\n }\n }\n this.currentWidget = inline.line;\n }\n if (inline instanceof FieldElementBox) {\n index = 1;\n }\n }\n if (index === inline.length && isNullOrUndefined(inline.nextNode)) {\n index++;\n }\n if (!moveToNextLine && inline instanceof ElementBox && inline.text === '\\v') {\n index--;\n }\n this.offset = this.currentWidget.getOffset(inline, index);\n }\n this.updatePhysicalPosition(moveToNextLine);\n }\n };\n /**\n * Move to next line\n * @private\n */\n TextPosition.prototype.moveToNextLine = function (left) {\n var selection = this.selection;\n var textPosition = new TextPosition(this.owner);\n textPosition.setPositionInternal(this);\n var currentIndex = this.getHierarchicalIndexInternal();\n var currentLine = selection.getLineWidgetParagraph(this.offset, this.currentWidget);\n var isAtLineStart = this.offset === 0 ? true : false;\n //Moves text position to end of line.\n this.moveToLineEndInternal(selection, true);\n var isMoveToLineEnd = !textPosition.isAtSamePosition(this);\n textPosition.setPositionInternal(this);\n if (this.currentWidget.paragraph.isInsideTable) {\n this.moveDownInTable(selection);\n }\n else {\n this.moveNextPosition();\n this.moveForward();\n }\n var nextLine = selection.getLineWidgetParagraph(this.offset, this.currentWidget);\n var lineStart = selection.getLeft(nextLine);\n var firstElement = selection.getFirstElementInternal(nextLine);\n // tslint:disable-next-line:max-line-length\n var firstItemWidth = isNullOrUndefined(firstElement) ? selection.getWidth(nextLine, true) : selection.getLeftInternal(nextLine, firstElement, 1) - lineStart;\n //Moves till the Up/Down selection width.\n if (lineStart < left && (firstItemWidth / 2 < left - lineStart)) {\n var top_2 = selection.getTop(nextLine);\n var point = new Point(left, top_2);\n selection.updateTextPositionWidget(nextLine, point, this, true);\n var width = selection.getWidth(nextLine, true);\n if (width < left - lineStart) {\n this.moveToLineEndInternal(selection, true);\n }\n }\n else if (isMoveToLineEnd && this.currentWidget.paragraph.isInsideTable\n && this.currentWidget === this.owner.selection.start.currentWidget) {\n this.setPositionInternal(textPosition);\n }\n else if (!isMoveToLineEnd) {\n this.moveToLineEndInternal(selection, true);\n }\n //Checks if the current position is between field result, then move to field end.\n var selectionEndIndex = this.getHierarchicalIndexInternal();\n this.validateForwardFieldSelection(currentIndex, selectionEndIndex);\n };\n /**\n * Move upward in table\n * @private\n */\n TextPosition.prototype.moveUpInTable = function (selection) {\n var isPositionUpdated = false;\n var end = this.owner.selection.end;\n var isBackwardSelection = !this.owner.selection.isEmpty;\n isPositionUpdated = end.paragraph.isInsideTable;\n if (isPositionUpdated) {\n var startCell = this.currentWidget.paragraph.associatedCell;\n var endCell = end.paragraph.associatedCell;\n var containerCell = selection.getContainerCellOf(endCell, startCell);\n isPositionUpdated = containerCell.ownerTable.contains(startCell);\n if (isPositionUpdated) {\n endCell = selection.getSelectedCell(endCell, containerCell);\n startCell = selection.getSelectedCell(startCell, containerCell);\n // tslint:disable-next-line:max-line-length\n var isInContainerCell = selection.containsCell(containerCell, this.currentWidget.paragraph.associatedCell);\n var isContainerCellSelected = selection.isCellSelected(containerCell, this, end);\n if (!isContainerCellSelected) {\n // tslint:disable-next-line:max-line-length\n isContainerCellSelected = this.currentWidget.paragraph === selection.getFirstParagraph(containerCell) && this.isAtParagraphStart;\n }\n if ((isInContainerCell && isContainerCellSelected\n || !isInContainerCell) && !isNullOrUndefined(startCell.ownerRow.previousRenderedWidget)) {\n //Moves to cell in previous row.\n var row = startCell.ownerRow.previousRenderedWidget;\n // tslint:disable-next-line:max-line-length\n var cell = selection.getFirstCellInRegion(row, containerCell, this.owner.selection.upDownSelectionLength, true);\n var previousParagraph = selection.getLastParagraph(cell);\n this.setPosition(previousParagraph.childWidgets[0], true);\n return;\n }\n else if (isInContainerCell && isContainerCellSelected\n && isNullOrUndefined(startCell.ownerRow.previousRenderedWidget) || !isInContainerCell) {\n if (isBackwardSelection) {\n //Moves to first cell of row.\n startCell = startCell.ownerRow.childWidgets[0];\n var previousParagraph = selection.getFirstParagraph(startCell);\n this.setPosition(previousParagraph.childWidgets[0], true);\n }\n else {\n //Moves to last cell of row.\n startCell = startCell.ownerRow.childWidgets[startCell.ownerRow.childWidgets.length - 1];\n var previousParagraph = selection.getLastParagraph(startCell);\n this.setPosition(previousParagraph.childWidgets[0], false);\n }\n }\n }\n }\n if (!isPositionUpdated) {\n //Moves to previous row / previous block.\n var cell = selection.getContainerCell(this.currentWidget.paragraph.associatedCell);\n if (isBackwardSelection) {\n //Moves to first cell of row.\n cell = cell.ownerRow.childWidgets[0];\n var previousParagraph = selection.getFirstParagraph(cell);\n this.setPosition(previousParagraph.childWidgets[0], true);\n }\n else {\n //Moves to end of row.\n cell = cell.ownerRow.childWidgets[cell.ownerRow.childWidgets.length - 1];\n var previousParagraph = selection.getLastParagraph(cell);\n this.setPosition(previousParagraph.childWidgets[0], false);\n }\n }\n //Moves to previous row / previous block.\n this.moveBackward();\n };\n /**\n * Move down inside table\n * @private\n */\n TextPosition.prototype.moveDownInTable = function (selection) {\n var isPositionUpdated = false;\n var isForwardSelection = this.owner.selection.isEmpty || this.owner.selection.isForward;\n isPositionUpdated = this.owner.selection.start.paragraph.isInsideTable;\n if (isPositionUpdated) {\n var startCell = this.owner.selection.start.paragraph.associatedCell;\n var endCell = this.currentWidget.paragraph.associatedCell;\n var containerCell = selection.getContainerCellOf(startCell, endCell);\n isPositionUpdated = containerCell.ownerTable.contains(endCell);\n if (isPositionUpdated) {\n startCell = selection.getSelectedCell(startCell, containerCell);\n endCell = selection.getSelectedCell(endCell, containerCell);\n // tslint:disable-next-line:max-line-length\n var isInContainerCell = selection.containsCell(containerCell, this.currentWidget.paragraph.associatedCell);\n var isContainerCellSelected = selection.isCellSelected(containerCell, this.owner.selection.start, this);\n if ((isInContainerCell && isContainerCellSelected\n || !isInContainerCell) && !isNullOrUndefined(endCell.ownerRow.nextRenderedWidget)) {\n //Moves to cell in next row.\n var row = endCell.ownerRow.nextRenderedWidget;\n // tslint:disable-next-line:max-line-length\n var cell = selection.getLastCellInRegion(row, containerCell, this.owner.selection.upDownSelectionLength, false);\n var lastParagraph = selection.getLastParagraph(cell);\n this.setPosition(lastParagraph.childWidgets[lastParagraph.childWidgets.length - 1], false);\n return;\n }\n else if (isInContainerCell && isContainerCellSelected\n && isNullOrUndefined(endCell.ownerRow.nextRenderedWidget) || !isInContainerCell) {\n if (isForwardSelection) {\n //Moves to last cell of row.\n endCell = endCell.ownerRow.childWidgets[endCell.ownerRow.childWidgets.length - 1];\n var lastParagraph = selection.getLastParagraph(endCell);\n this.setPosition(lastParagraph.childWidgets[lastParagraph.childWidgets.length - 1], false);\n }\n else {\n //Moves to first cell of row.\n endCell = endCell.ownerRow.childWidgets[0];\n var lastParagraph = selection.getFirstParagraph(endCell);\n this.setPosition(lastParagraph.childWidgets[lastParagraph.childWidgets.length - 1], true);\n }\n }\n }\n }\n if (!isPositionUpdated) {\n //Moves to next row / next block.\n var cell = selection.getContainerCell(this.currentWidget.paragraph.associatedCell);\n if (isForwardSelection) {\n //Moves to end of row.\n cell = cell.ownerRow.childWidgets[cell.ownerRow.childWidgets.length - 1];\n var lastParagraph = selection.getLastParagraph(cell);\n this.setPosition(lastParagraph.childWidgets[lastParagraph.childWidgets.length - 1], false);\n }\n else if (cell.ownerRow.nextRenderedWidget) {\n //Moves to first cell of row.\n cell = cell.ownerRow.nextRenderedWidget.childWidgets[0];\n var lastParagraph = selection.getFirstParagraph(cell);\n this.setPosition(lastParagraph.childWidgets[lastParagraph.childWidgets.length - 1], true);\n }\n }\n //Moves to next row / next block.\n this.moveForward();\n };\n /**\n * @private\n */\n TextPosition.prototype.destroy = function () {\n this.offset = undefined;\n this.isUpdateLocation = undefined;\n if (!isNullOrUndefined(this.location)) {\n this.location.destroy();\n }\n this.location = undefined;\n this.currentWidget = undefined;\n this.owner = undefined;\n this.viewer = undefined;\n };\n return TextPosition;\n}());\nexport { TextPosition };\n/**\n * @private\n */\nvar SelectionWidgetInfo = /** @class */ (function () {\n function SelectionWidgetInfo(left, width) {\n this.leftIn = 0;\n this.widthIn = 0;\n this.leftIn = left;\n this.widthIn = width;\n }\n Object.defineProperty(SelectionWidgetInfo.prototype, \"left\", {\n /**\n * @private\n */\n get: function () {\n return this.leftIn;\n },\n /**\n * @private\n */\n set: function (value) {\n this.leftIn = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectionWidgetInfo.prototype, \"width\", {\n /**\n * @private\n */\n get: function () {\n return this.widthIn;\n },\n /**\n * @private\n */\n set: function (value) {\n this.widthIn = value;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @private\n */\n SelectionWidgetInfo.prototype.destroy = function () {\n this.widthIn = undefined;\n this.leftIn = undefined;\n };\n return SelectionWidgetInfo;\n}());\nexport { SelectionWidgetInfo };\n/**\n * @private\n */\nvar Hyperlink = /** @class */ (function () {\n function Hyperlink(fieldBeginAdv, selection) {\n this.linkInternal = '';\n this.localRef = '';\n this.opensNewWindow = false;\n var fieldCode = selection.getFieldCode(fieldBeginAdv);\n var lowercase = fieldCode.toLowerCase();\n if (lowercase.substring(0, 9) === 'hyperlink') {\n this.parseFieldValues(fieldCode.substring(9).trim(), selection);\n }\n }\n Object.defineProperty(Hyperlink.prototype, \"navigationLink\", {\n /**\n * Gets navigation link.\n * @returns string\n * @private\n */\n get: function () {\n return this.linkInternal;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Hyperlink.prototype, \"localReference\", {\n /**\n * Gets the local reference if any.\n * @returns string\n * @private\n */\n get: function () {\n return this.localRef;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Hyperlink.prototype, \"linkType\", {\n /**\n * Gets hyper link type.\n * @returns HyperLinkType\n * @private\n */\n get: function () {\n return this.typeInternal;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Parse field values\n * @param {string} value\n * @returns Void\n */\n Hyperlink.prototype.parseFieldValues = function (value, selection) {\n var codes = value.split(' ');\n var isLocalRef = false;\n for (var i = 0; i < codes.length; i++) {\n var code = codes[i];\n if (code.length < 1) {\n continue;\n }\n if (code === '\\\\t' || code === '\\\\l') {\n isLocalRef = true;\n }\n else if (code === '\\\\n') {\n this.opensNewWindow = true;\n }\n else {\n code = this.parseFieldValue(code, code[0] === '\\\"' ? '\\\"' : undefined);\n if (isLocalRef) {\n this.localRef = code;\n isLocalRef = false;\n }\n else {\n this.linkInternal = code;\n }\n }\n }\n this.setLinkType();\n };\n Hyperlink.prototype.parseFieldValue = function (value, endChar) {\n value = value.substring(1);\n var endIndex = endChar ? value.indexOf(endChar) : -1;\n if (endIndex < 0) {\n endIndex = value.length;\n }\n return value.substring(0, endIndex).trim();\n };\n Hyperlink.prototype.setLinkType = function () {\n // If only local reference.\n if (isNullOrUndefined(this.linkInternal) || this.linkInternal.length < 1) {\n this.typeInternal = 'Bookmark';\n return;\n }\n // Validates link.\n if (this.linkInternal.substring(0, 4) === ('www.')) {\n this.linkInternal = 'http://' + this.navigationLink;\n }\n else if (this.linkInternal[0] === '@') {\n this.linkInternal = 'mailto:' + this.navigationLink;\n }\n // Finds proper link type.\n if (this.linkInternal.substring(0, 7) === 'http://'\n || this.linkInternal.substring(0, 8) === 'https://') {\n this.typeInternal = 'WebPage';\n }\n else if (this.linkInternal.substring(0, 7) === 'mailto:') {\n this.typeInternal = 'Email';\n }\n else {\n this.typeInternal = 'File';\n }\n };\n /**\n * @private\n */\n Hyperlink.prototype.destroy = function () {\n this.linkInternal = undefined;\n this.localRef = undefined;\n this.typeInternal = undefined;\n this.opensNewWindow = undefined;\n };\n return Hyperlink;\n}());\nexport { Hyperlink };\n/**\n * @private\n */\nvar ImageFormat = /** @class */ (function () {\n /**\n * Constructor for image format class\n * @param imageContainer - Specifies for image width and height values.\n */\n function ImageFormat(imageContainer) {\n /**\n * @private\n */\n this.width = 0;\n /**\n * @private\n */\n this.height = 0;\n this.width = imageContainer.width;\n this.height = imageContainer.height;\n }\n /**\n * Dispose the internal objects which are maintained.\n * @private\n */\n ImageFormat.prototype.destroy = function () {\n this.width = undefined;\n this.height = undefined;\n };\n return ImageFormat;\n}());\nexport { ImageFormat };\n","import { Widget, BodyWidget, TableRowWidget, TableWidget, LineWidget, ElementBox, TextElementBox, ListTextElementBox, ImageElementBox, ParagraphWidget, TableCellWidget, FieldElementBox, BlockWidget, HeaderFooterWidget, BlockContainer, BookmarkElementBox } from '../viewer/page';\nimport { HelperMethods } from '../editor/editor-helper';\nimport { SelectionCharacterFormat, SelectionCellFormat, SelectionParagraphFormat, SelectionRowFormat, SelectionSectionFormat, SelectionTableFormat, SelectionImageFormat } from './selection-format';\nimport { Point } from '../editor/editor-helper';\nimport { isNullOrUndefined, createElement, L10n } from '@syncfusion/ej2-base';\nimport { Dictionary } from '../../base/dictionary';\nimport { WParagraphFormat, WParagraphStyle } from '../index';\nimport { HtmlExport } from '../writer/html-export';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport { TextPosition, SelectionWidgetInfo, Hyperlink } from './selection-helper';\n/**\n * Selection\n */\nvar Selection = /** @class */ (function () {\n /**\n * @private\n */\n function Selection(documentEditor) {\n var _this = this;\n /**\n * @private\n */\n this.upDownSelectionLength = 0;\n /**\n * @private\n */\n this.isSkipLayouting = false;\n /**\n * @private\n */\n this.isImageSelected = false;\n this.contextTypeInternal = undefined;\n /**\n * @private\n */\n this.caret = undefined;\n //Format Retrieval Field\n /**\n * @private\n */\n this.isRetrieveFormatting = false;\n /**\n * @private\n */\n this.skipFormatRetrieval = false;\n this.isMoveDownOrMoveUp = false;\n /**\n * @private\n */\n this.selectedWidgets = undefined;\n /**\n * Hides caret.\n * @private\n */\n this.hideCaret = function () {\n _this.caret.style.display = 'none';\n };\n this.owner = documentEditor;\n this.viewer = this.owner.viewer;\n this.start = new TextPosition(this.owner);\n this.end = new TextPosition(this.owner);\n this.selectedWidgets = new Dictionary();\n this.characterFormatIn = new SelectionCharacterFormat(this);\n this.paragraphFormatIn = new SelectionParagraphFormat(this, this.viewer);\n this.sectionFormatIn = new SelectionSectionFormat(this);\n this.rowFormatIn = new SelectionRowFormat(this);\n this.cellFormatIn = new SelectionCellFormat(this);\n this.tableFormatIn = new SelectionTableFormat(this);\n this.imageFormatInternal = new SelectionImageFormat(this);\n }\n Object.defineProperty(Selection.prototype, \"htmlWriter\", {\n /**\n * @private\n */\n get: function () {\n if (isNullOrUndefined(this.htmlWriterIn)) {\n this.htmlWriterIn = new HtmlExport();\n }\n return this.htmlWriterIn;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Selection.prototype, \"start\", {\n /**\n * Gets the start text position of last range in the selection\n * @returns {TextPosition}\n * @private\n */\n get: function () {\n if (!isNullOrUndefined(this.owner) && !isNullOrUndefined(this.viewer)) {\n if (isNullOrUndefined(this.startInternal)) {\n this.startInternal = this.owner.documentStart;\n }\n return this.startInternal;\n }\n return undefined;\n },\n /**\n * @private\n */\n set: function (value) {\n this.startInternal = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Selection.prototype, \"characterFormat\", {\n //Format retrieval properties\n /**\n * Gets the instance of selection character format.\n * @default undefined\n * @return {SelectionCharacterFormat}\n */\n get: function () {\n return this.characterFormatIn;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Selection.prototype, \"paragraphFormat\", {\n /**\n * Gets the instance of selection paragraph format.\n * @default undefined\n * @return {SelectionParagraphFormat}\n */\n get: function () {\n return this.paragraphFormatIn;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Selection.prototype, \"sectionFormat\", {\n /**\n * Gets the instance of selection section format.\n * @default undefined\n * @return {SelectionSectionFormat}\n */\n get: function () {\n return this.sectionFormatIn;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Selection.prototype, \"tableFormat\", {\n /**\n * Gets the instance of selection table format.\n * @default undefined\n * @return {SelectionTableFormat}\n */\n get: function () {\n return this.tableFormatIn;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Selection.prototype, \"cellFormat\", {\n /**\n * Gets the instance of selection cell format.\n * @default undefined\n * @return {SelectionCellFormat}\n */\n get: function () {\n return this.cellFormatIn;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Selection.prototype, \"rowFormat\", {\n /**\n * Gets the instance of selection row format.\n * @default undefined\n * @returns SelectionRowFormat\n */\n get: function () {\n return this.rowFormatIn;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Selection.prototype, \"imageFormat\", {\n /**\n * Gets the instance of selection image format.\n * @default undefined\n * @returns SelectionImageFormat\n */\n get: function () {\n return this.imageFormatInternal;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Selection.prototype, \"end\", {\n /**\n * Gets the start text position of selection range.\n * @private\n */\n get: function () {\n return this.endInternal;\n },\n /**\n * For internal use\n * @private\n */\n set: function (value) {\n this.endInternal = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Selection.prototype, \"startPage\", {\n /**\n * Gets the page number where the selection ends.\n * @private\n */\n get: function () {\n if (!this.owner.isDocumentLoaded || isNullOrUndefined(this.viewer)\n || isNullOrUndefined(this.viewer.selectionStartPage)) {\n return 1;\n }\n return this.viewer.pages.indexOf(this.viewer.selectionStartPage) + 1;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Selection.prototype, \"endPage\", {\n /**\n * Gets the page number where the selection ends.\n * @private\n */\n get: function () {\n if (!this.owner.isDocumentLoaded || isNullOrUndefined(this.viewer)\n || isNullOrUndefined(this.viewer.selectionEndPage)) {\n return 1;\n }\n return this.viewer.pages.indexOf(this.viewer.selectionEndPage) + 1;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Selection.prototype, \"isForward\", {\n /**\n * Determines whether the selection direction is forward or not.\n * @default false\n * @returns {boolean}\n * @private\n */\n get: function () {\n return this.start.isExistBefore(this.end);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Selection.prototype, \"isEmpty\", {\n /**\n * Determines whether the start and end positions are same or not.\n * @default false\n * @returns {boolean}\n * @private\n */\n get: function () {\n if (isNullOrUndefined(this.start)) {\n return true;\n }\n return this.start.isAtSamePosition(this.end);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Selection.prototype, \"text\", {\n /**\n * Gets the text within selection.\n * @default ''\n * @returns {string}\n */\n get: function () {\n return this.getText(false);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Selection.prototype, \"contextType\", {\n /**\n * Gets the context type of the selection.\n */\n get: function () {\n return this.contextTypeInternal;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Selection.prototype, \"isCleared\", {\n /**\n * @private\n */\n get: function () {\n return isNullOrUndefined(this.end);\n },\n enumerable: true,\n configurable: true\n });\n Selection.prototype.getModuleName = function () {\n return 'Selection';\n };\n //Public API\n /**\n * Moves the selection to the header of current page.\n */\n Selection.prototype.goToHeader = function () {\n this.owner.enableHeaderAndFooter = true;\n this.enableHeadersFootersRegion(this.start.paragraph.bodyWidget.page.headerWidget);\n };\n /**\n * Moves the selection to the footer of current page.\n */\n Selection.prototype.goToFooter = function () {\n this.owner.enableHeaderAndFooter = true;\n this.enableHeadersFootersRegion(this.start.paragraph.bodyWidget.page.footerWidget);\n };\n /**\n * Closes the header and footer region.\n */\n Selection.prototype.closeHeaderFooter = function () {\n this.disableHeaderFooter();\n };\n /**\n * Moves the selection to the start of specified page number.\n */\n Selection.prototype.goToPage = function (pageNumber) {\n if (pageNumber >= 1 && pageNumber <= this.viewer.pages.length) {\n var page = this.viewer.pages[pageNumber - 1];\n this.updateTextPositionForBlockContainer(page.bodyWidgets[0]);\n }\n };\n /**\n * Selects the entire table if the context is within table.\n */\n Selection.prototype.selectTable = function () {\n if (!this.owner.enableSelection) {\n return;\n }\n this.selectTableInternal();\n };\n /**\n * Selects the entire row if the context is within table.\n */\n Selection.prototype.selectRow = function () {\n if (!this.owner.enableSelection) {\n return;\n }\n this.selectTableRow();\n };\n /**\n * Selects the entire column if the context is within table.\n */\n Selection.prototype.selectColumn = function () {\n if (!this.owner.enableSelection) {\n return;\n }\n this.selectColumnInternal();\n };\n /**\n * Selects the entire cell if the context is within table.\n */\n Selection.prototype.selectCell = function () {\n if (!this.owner.enableSelection) {\n return;\n }\n this.selectTableCell();\n };\n /**\n * Toggles the bold property of selected contents.\n * @private\n */\n Selection.prototype.toggleBold = function () {\n if (this.owner.editorModule) {\n this.owner.editorModule.toggleBold();\n }\n };\n /**\n * Toggles the italic property of selected contents.\n * @private\n */\n Selection.prototype.toggleItalic = function () {\n if (this.owner.editorModule) {\n this.owner.editorModule.toggleItalic();\n }\n };\n /**\n * Toggles the underline property of selected contents.\n * @param underline Default value of ‘underline’ parameter is Single.\n * @private\n */\n Selection.prototype.toggleUnderline = function (underline) {\n if (this.owner.editor) {\n this.owner.editor.toggleUnderline(underline);\n }\n };\n /**\n * Toggles the strike through property of selected contents.\n * @param {Strikethrough} strikethrough Default value of strikethrough parameter is SingleStrike.\n * @private\n */\n Selection.prototype.toggleStrikethrough = function (strikethrough) {\n if (this.owner.editor) {\n this.owner.editor.toggleStrikethrough(strikethrough);\n }\n };\n /**\n * Toggles the highlight color property of selected contents.\n * @param {HighlightColor} highlightColor Default value of ‘underline’ parameter is Yellow.\n * @private\n */\n Selection.prototype.toggleHighlightColor = function (highlightColor) {\n if (this.owner.editor) {\n this.owner.editor.toggleHighlightColor(highlightColor);\n }\n };\n /**\n * Toggles the subscript formatting of selected contents.\n * @private\n */\n Selection.prototype.toggleSubscript = function () {\n if (this.owner.editor) {\n this.owner.editor.toggleSubscript();\n }\n };\n /**\n * Toggles the superscript formatting of selected contents.\n * @private\n */\n Selection.prototype.toggleSuperscript = function () {\n if (this.owner.editor) {\n this.owner.editor.toggleSuperscript();\n }\n };\n /**\n * Toggles the text alignment property of selected contents.\n * @param {TextAlignment} textAlignment Default value of ‘textAlignment parameter is TextAlignment.Left.\n * @private\n */\n Selection.prototype.toggleTextAlignment = function (textAlignment) {\n if (this.owner.editor) {\n this.owner.editor.toggleTextAlignment(textAlignment);\n }\n };\n /**\n * Increases the left indent of selected paragraphs to a factor of 36 points.\n * @private\n */\n Selection.prototype.increaseIndent = function () {\n if (this.owner.editor) {\n this.owner.editor.increaseIndent();\n }\n };\n /**\n * Decreases the left indent of selected paragraphs to a factor of 36 points.\n * @private\n */\n Selection.prototype.decreaseIndent = function () {\n if (this.owner.editor) {\n this.owner.editor.decreaseIndent();\n }\n };\n /**\n * Fires the `requestNavigate` event if current selection context is in hyperlink.\n */\n Selection.prototype.navigateHyperlink = function () {\n var fieldBegin = this.getHyperlinkField();\n if (fieldBegin) {\n this.fireRequestNavigate(fieldBegin);\n }\n };\n /**\n * Navigate Hyperlink\n * @param fieldBegin\n * @private\n */\n Selection.prototype.fireRequestNavigate = function (fieldBegin) {\n var hyperlink = new Hyperlink(fieldBegin, this);\n var eventArgs = {\n isHandled: false,\n navigationLink: hyperlink.navigationLink,\n linkType: hyperlink.linkType,\n localReference: hyperlink.localReference\n };\n this.owner.trigger('requestNavigate', eventArgs);\n if (!eventArgs.isHandled) {\n this.viewer.selection.navigateBookmark(hyperlink.localReference, true);\n }\n };\n /**\n * Copies the hyperlink URL if the context is within hyperlink.\n */\n Selection.prototype.copyHyperlink = function () {\n var hyperLinkField = this.getHyperlinkField();\n var linkText = this.getLinkText(hyperLinkField);\n this.copyToClipboard(linkText);\n };\n //Selection add, Highlight, remove API starts\n /**\n * @private\n */\n Selection.prototype.highlightSelection = function (isSelectionChanged) {\n if (this.owner.enableImageResizerMode) {\n this.owner.imageResizerModule.hideImageResizer();\n }\n if (this.isEmpty) {\n this.updateCaretPosition();\n }\n else {\n if (this.isForward) {\n this.highlightSelectedContent(this.start, this.end);\n }\n else {\n this.highlightSelectedContent(this.end, this.start);\n }\n }\n this.viewer.updateTouchMarkPosition();\n if (isSelectionChanged) {\n this.viewer.scrollToPosition(this.start, this.end);\n }\n };\n /**\n * @private\n */\n Selection.prototype.createHighlightBorder = function (lineWidget, width, left, top) {\n if (width < 0) {\n width = 0;\n }\n var page = this.getPage(lineWidget.paragraph);\n var height = lineWidget.height;\n var selectionWidget = undefined;\n if (!this.selectedWidgets.containsKey(lineWidget)) {\n selectionWidget = new SelectionWidgetInfo(left, width);\n this.selectedWidgets.add(lineWidget, selectionWidget);\n }\n var viewer = this.viewer;\n var pageTop = this.getPageTop(page);\n var pageLeft = page.boundingRectangle.x;\n if (viewer.containerTop <= pageTop\n || pageTop < viewer.containerTop + viewer.selectionCanvas.height) {\n viewer.selectionContext.fillStyle = 'gray';\n viewer.selectionContext.globalAlpha = 0.4;\n var zoomFactor = viewer.zoomFactor;\n this.clipSelection(page, pageTop);\n // tslint:disable-next-line:max-line-length\n viewer.selectionContext.fillRect((pageLeft + (left * zoomFactor)) - viewer.containerLeft, (pageTop + (top * zoomFactor)) - viewer.containerTop, width * zoomFactor, height * zoomFactor);\n viewer.selectionContext.restore();\n }\n };\n /**\n * Create selection highlight inside table\n * @private\n */\n Selection.prototype.createHighlightBorderInsideTable = function (cellWidget) {\n var page = this.getPage(cellWidget);\n var selectionWidget = undefined;\n var left = cellWidget.x - cellWidget.margin.left + cellWidget.leftBorderWidth;\n var width = cellWidget.width + cellWidget.margin.left\n + cellWidget.margin.right - cellWidget.leftBorderWidth - cellWidget.rightBorderWidth;\n var top = cellWidget.y;\n var height = cellWidget.height;\n var pageTop = this.getPageTop(page);\n var pageLeft = page.boundingRectangle.x;\n var isVisiblePage = this.viewer.containerTop <= pageTop\n || pageTop < this.viewer.containerTop + this.viewer.selectionCanvas.height;\n if (this.selectedWidgets.containsKey(cellWidget)) {\n selectionWidget = this.selectedWidgets.get(cellWidget);\n if (isVisiblePage) {\n // tslint:disable-next-line:max-line-length\n this.viewer.selectionContext.clearRect((pageLeft + (selectionWidget.left * this.viewer.zoomFactor) - this.viewer.containerLeft), (pageTop + (top * this.viewer.zoomFactor)) - this.viewer.containerTop, selectionWidget.width * this.viewer.zoomFactor, height * this.viewer.zoomFactor);\n }\n }\n selectionWidget = new SelectionWidgetInfo(left, width);\n this.selectedWidgets.add(cellWidget, selectionWidget);\n if (isVisiblePage) {\n this.viewer.selectionContext.fillStyle = 'gray';\n this.viewer.selectionContext.globalAlpha = 0.4;\n var zoomFactor = this.viewer.zoomFactor;\n this.clipSelection(page, pageTop);\n // tslint:disable-next-line:max-line-length\n this.viewer.selectionContext.fillRect((pageLeft + (left * zoomFactor)) - this.viewer.containerLeft, (pageTop + (top * zoomFactor)) - this.viewer.containerTop, width * zoomFactor, height * zoomFactor);\n this.viewer.selectionContext.restore();\n }\n };\n /**\n * @private\n */\n Selection.prototype.clipSelection = function (page, pageTop) {\n var viewer = this.viewer;\n var width = page.boundingRectangle.width * viewer.zoomFactor;\n var height = page.boundingRectangle.height * viewer.zoomFactor;\n var left = page.boundingRectangle.x;\n viewer.selectionContext.beginPath();\n viewer.selectionContext.save();\n viewer.selectionContext.rect(left - viewer.containerLeft, pageTop - viewer.containerTop, width, height);\n viewer.selectionContext.clip();\n };\n /**\n * Add selection highlight\n * @private\n */\n Selection.prototype.addSelectionHighlight = function (canvasContext, widget, top) {\n if (this.selectedWidgets.containsKey(widget)) {\n var height = this.viewer.render.getScaledValue(widget.height);\n var widgetInfo = this.selectedWidgets.get(widget);\n var width = this.viewer.render.getScaledValue(widgetInfo.width);\n var left = this.viewer.render.getScaledValue(widgetInfo.left, 1);\n canvasContext.fillStyle = 'gray';\n var page = this.owner.selection.getPage(widget.paragraph);\n this.owner.selection.clipSelection(page, this.owner.selection.getPageTop(page));\n canvasContext.fillRect(left, this.viewer.render.getScaledValue(top, 2), width, height);\n canvasContext.restore();\n }\n };\n /**\n * Add Selection highlight inside table\n * @private\n */\n Selection.prototype.addSelectionHighlightTable = function (canvasContext, tableCellWidget) {\n if (this.selectedWidgets.containsKey(tableCellWidget)) {\n var selectionWidget = this.selectedWidgets.get(tableCellWidget);\n var left = this.viewer.render.getScaledValue(selectionWidget.left, 1);\n var top_1 = this.viewer.render.getScaledValue(tableCellWidget.y, 2);\n var width = this.viewer.render.getScaledValue(selectionWidget.width);\n var height = this.viewer.render.getScaledValue(tableCellWidget.height);\n canvasContext.fillStyle = 'gray';\n var page = this.owner.selection.getPage(tableCellWidget);\n this.owner.selection.clipSelection(page, this.owner.selection.getPageTop(page));\n canvasContext.fillRect(left, top_1, width, height);\n canvasContext.restore();\n }\n };\n /**\n * Remove Selection highlight\n * @private\n */\n Selection.prototype.removeSelectionHighlight = function (widget) {\n var left = 0;\n var top = 0;\n var width = 0;\n var height = 0;\n var page = undefined;\n if (widget instanceof LineWidget) {\n var lineWidget = widget;\n var currentParaWidget = lineWidget.paragraph;\n page = !isNullOrUndefined(currentParaWidget) ?\n this.getPage((lineWidget.paragraph)) : undefined;\n if (isNullOrUndefined(page)) {\n return;\n }\n top = this.getTop(lineWidget);\n height = lineWidget.height;\n }\n else if (widget instanceof TableCellWidget) {\n page = !isNullOrUndefined(widget) ?\n this.getPage(widget) : undefined;\n if (isNullOrUndefined(page)) {\n return;\n }\n top = widget.y;\n height = widget.height;\n }\n if (isNullOrUndefined(page)) {\n return;\n }\n var widgetInfo = this.selectedWidgets.get(widget);\n width = widgetInfo.width;\n left = widgetInfo.left;\n var pageRect = page.boundingRectangle;\n var pageIndex = this.viewer.pages.indexOf(page);\n var pageGap = this.viewer.pageGap;\n var pageTop = (pageRect.y - pageGap * (pageIndex + 1)) * this.viewer.zoomFactor + pageGap * (pageIndex + 1);\n var pageLeft = pageRect.x;\n var zoomFactor = this.viewer.zoomFactor;\n if (this.viewer.containerTop <= pageTop\n || pageTop < this.viewer.containerTop + this.viewer.selectionCanvas.height) {\n // tslint:disable-next-line:max-line-length\n this.viewer.selectionContext.clearRect((pageLeft + (left * zoomFactor) - this.viewer.containerLeft) - 0.5, (pageTop + (top * zoomFactor)) - this.viewer.containerTop - 0.5, width * zoomFactor + 0.5, height * zoomFactor + 0.5);\n }\n };\n /**\n * Select Current word\n * @private\n */\n Selection.prototype.selectCurrentWord = function () {\n var startPosition = this.start.clone();\n var endPosition = this.end.clone();\n this.selectCurrentWordRange(startPosition, endPosition, false);\n this.selectRange(startPosition, endPosition);\n };\n /**\n * Select current paragraph\n * @private\n */\n Selection.prototype.selectCurrentParagraph = function () {\n if (!isNullOrUndefined(this.start)) {\n this.start.paragraphStartInternal(this, false);\n this.end.moveToParagraphEndInternal(this, false);\n this.upDownSelectionLength = this.end.location.x;\n this.fireSelectionChanged(true);\n }\n };\n /**\n * Select current word range\n * @private\n */\n Selection.prototype.selectCurrentWordRange = function (startPosition, endPosition, excludeSpace) {\n if (!isNullOrUndefined(startPosition)) {\n if (startPosition.offset > 0) {\n var wordStart = startPosition.clone();\n var indexInInline = 0;\n var inlineObj = startPosition.currentWidget.getInline(startPosition.offset, indexInInline);\n var inline = inlineObj.element;\n indexInInline = inlineObj.index;\n if (!isNullOrUndefined(inline) && inline instanceof FieldElementBox && inline.fieldType === 1) {\n // tslint:disable-next-line:max-line-length\n if (startPosition.offset > 2 && (!isNullOrUndefined(inline.fieldSeparator) || isNullOrUndefined(inline.fieldBegin))) {\n wordStart.setPositionParagraph(wordStart.currentWidget, startPosition.offset - 2);\n wordStart.moveToWordEndInternal(0, false);\n if (!(wordStart.paragraph === startPosition.paragraph && wordStart.offset === startPosition.offset - 1)) {\n startPosition.moveToWordStartInternal(2);\n }\n }\n else if (startPosition.offset > 3 && isNullOrUndefined(inline.fieldSeparator)) {\n wordStart.setPositionParagraph(wordStart.currentWidget, startPosition.offset - 3);\n wordStart.moveToWordEndInternal(0, false);\n if (!(wordStart.paragraph === startPosition.paragraph && wordStart.offset === startPosition.offset)) {\n startPosition.moveToWordStartInternal(2);\n }\n }\n }\n else {\n wordStart.setPositionParagraph(wordStart.currentWidget, startPosition.offset - 1);\n wordStart.moveToWordEndInternal(0, false);\n if (!(wordStart.paragraph === startPosition.paragraph && wordStart.offset === startPosition.offset)) {\n startPosition.moveToWordStartInternal(2);\n }\n }\n }\n endPosition.moveToWordEndInternal(2, excludeSpace);\n }\n };\n /**\n * Extend selection to paragraph start\n * @private\n */\n Selection.prototype.extendToParagraphStart = function () {\n if (isNullOrUndefined(this.start)) {\n return;\n }\n this.end.paragraphStartInternal(this, true);\n this.upDownSelectionLength = this.end.location.x;\n this.fireSelectionChanged(true);\n };\n /**\n * Extend selection to paragraph end\n * @private\n */\n Selection.prototype.extendToParagraphEnd = function () {\n if (isNullOrUndefined(this.start)) {\n return;\n }\n this.end.moveToParagraphEndInternal(this, true);\n this.upDownSelectionLength = this.end.location.x;\n this.fireSelectionChanged(true);\n };\n /**\n * Move to next text position\n * @private\n */\n Selection.prototype.moveNextPosition = function () {\n if (isNullOrUndefined(this.start)) {\n return;\n }\n if (this.isEmpty) {\n this.start.moveNextPosition();\n this.end.setPositionInternal(this.start);\n }\n this.updateForwardSelection();\n this.upDownSelectionLength = this.start.location.x;\n this.fireSelectionChanged(true);\n };\n /**\n * Move to next paragraph\n * @private\n */\n Selection.prototype.moveToNextParagraph = function () {\n if (isNullOrUndefined(this.start)) {\n return;\n }\n this.end.moveToNextParagraphStartInternal();\n this.start.setPositionInternal(this.end);\n this.upDownSelectionLength = this.end.location.x;\n this.fireSelectionChanged(true);\n };\n /**\n * Move to previous text position\n * @private\n */\n Selection.prototype.movePreviousPosition = function () {\n if (isNullOrUndefined(this.start)) {\n return;\n }\n if (this.isEmpty) {\n this.start.movePreviousPosition();\n this.end.setPositionInternal(this.start);\n }\n this.updateBackwardSelection();\n this.upDownSelectionLength = this.start.location.x;\n this.fireSelectionChanged(true);\n };\n /**\n * Move to previous paragraph\n * @private\n */\n Selection.prototype.moveToPreviousParagraph = function () {\n if (isNullOrUndefined(this.start)) {\n return;\n }\n this.end.moveToPreviousParagraph(this);\n this.start.setPositionInternal(this.end);\n this.upDownSelectionLength = this.end.location.x;\n this.fireSelectionChanged(true);\n };\n /**\n * Extend selection to previous line\n * @private\n */\n Selection.prototype.extendToPreviousLine = function () {\n if (isNullOrUndefined(this.start)) {\n return;\n }\n this.end.moveToPreviousLine(this, this.upDownSelectionLength);\n this.fireSelectionChanged(true);\n };\n /**\n * Extend selection to line end\n * @private\n */\n Selection.prototype.extendToLineEnd = function () {\n if (isNullOrUndefined(this.start)) {\n return;\n }\n this.end.moveToLineEndInternal(this, true);\n this.upDownSelectionLength = this.end.location.x;\n this.fireSelectionChanged(true);\n };\n /**\n * Extend to line start\n * @private\n */\n Selection.prototype.extendToLineStart = function () {\n if (isNullOrUndefined(this.start)) {\n return;\n }\n this.end.moveToLineStartInternal(this, true);\n this.upDownSelectionLength = this.end.location.x;\n this.fireSelectionChanged(true);\n };\n /**\n * @private\n */\n Selection.prototype.moveUp = function () {\n if (isNullOrUndefined(this.start)) {\n return;\n }\n if (!this.isEmpty) {\n if (this.isForward) {\n this.end.setPositionInternal(this.start);\n }\n else {\n this.start.setPositionInternal(this.end);\n }\n this.upDownSelectionLength = this.start.location.x;\n }\n this.upDownSelectionLength = this.start.location.x;\n this.start.moveUp(this, this.upDownSelectionLength);\n this.end.setPositionInternal(this.start);\n this.fireSelectionChanged(true);\n };\n /**\n * @private\n */\n Selection.prototype.moveDown = function () {\n if (isNullOrUndefined(this.start)) {\n return;\n }\n if (!this.isEmpty) {\n if (this.isForward) {\n this.start.setPositionInternal(this.end);\n }\n else {\n this.end.setPositionInternal(this.start);\n }\n this.upDownSelectionLength = this.start.location.x;\n }\n this.start.moveDown(this, this.upDownSelectionLength);\n this.end.setPositionInternal(this.start);\n this.fireSelectionChanged(true);\n };\n Selection.prototype.updateForwardSelection = function () {\n if (!this.isEmpty) {\n if (this.isForward) {\n this.start.setPositionInternal(this.end);\n }\n else {\n this.end.setPositionInternal(this.start);\n }\n }\n };\n Selection.prototype.updateBackwardSelection = function () {\n if (!this.isEmpty) {\n if (this.isForward) {\n this.end.setPositionInternal(this.start);\n }\n else {\n this.start.setPositionInternal(this.end);\n }\n }\n };\n /**\n * @private\n */\n Selection.prototype.getFirstBlockInFirstCell = function (table) {\n if (table.childWidgets.length > 0) {\n var firstrow = table.childWidgets[0];\n if (firstrow.childWidgets.length > 0) {\n var firstcell = firstrow.childWidgets[0];\n if (firstcell.childWidgets.length === 0) {\n return undefined;\n }\n return firstcell.childWidgets[0];\n }\n }\n return undefined;\n };\n /**\n * @private\n */\n // tslint:disable-next-line:max-line-length\n Selection.prototype.getFirstCellInRegion = function (row, startCell, selectionLength, isMovePrevious) {\n var cellStart = this.getCellLeft(row, startCell);\n var cellEnd = cellStart + startCell.cellFormat.cellWidth;\n var flag = true;\n if (cellStart <= selectionLength && selectionLength < cellEnd) {\n for (var k = 0; k < row.childWidgets.length; k++) {\n var left = this.getCellLeft(row, row.childWidgets[k]);\n if (HelperMethods.round(cellStart, 2) <= HelperMethods.round(left, 2) &&\n HelperMethods.round(left, 2) < HelperMethods.round(cellEnd, 2)) {\n flag = false;\n return row.childWidgets[k];\n }\n }\n }\n else {\n for (var j = 0; j < row.childWidgets.length; j++) {\n var cellLeft = this.getCellLeft(row, row.childWidgets[j]);\n if (cellLeft <= selectionLength && cellLeft +\n row.childWidgets[j].cellFormat.cellWidth > selectionLength) {\n flag = false;\n return row.childWidgets[j];\n }\n }\n }\n if (flag) {\n if (!isNullOrUndefined(row.previousRenderedWidget) && isMovePrevious) {\n var previousWidget = row.previousRenderedWidget;\n return this.getFirstCellInRegion(previousWidget, startCell, selectionLength, isMovePrevious);\n }\n else if (!isNullOrUndefined(row.nextRenderedWidget) && !isMovePrevious) {\n return this.getFirstCellInRegion(row.nextRenderedWidget, startCell, selectionLength, isMovePrevious);\n }\n }\n return row.childWidgets[0];\n };\n /**\n * @private\n */\n Selection.prototype.getFirstParagraph = function (tableCell) {\n while (tableCell.previousSplitWidget) {\n tableCell = tableCell.previousSplitWidget;\n }\n var firstBlock = tableCell.firstChild;\n return this.getFirstParagraphBlock(firstBlock);\n };\n /**\n * Get last block in last cell\n * @private\n */\n //Table\n Selection.prototype.getLastBlockInLastCell = function (table) {\n if (table.childWidgets.length > 0) {\n var lastrow = table.childWidgets[table.childWidgets.length - 1];\n var lastcell = lastrow.childWidgets[lastrow.childWidgets.length - 1];\n return lastcell.childWidgets[lastcell.childWidgets.length - 1];\n }\n return undefined;\n };\n /**\n * Move to line start\n * @private\n */\n Selection.prototype.moveToLineStart = function () {\n if (isNullOrUndefined(this.start)) {\n return;\n }\n this.updateBackwardSelection();\n this.start.moveToLineStartInternal(this, false);\n this.end.setPositionInternal(this.start);\n this.upDownSelectionLength = this.start.location.x;\n this.fireSelectionChanged(true);\n };\n /**\n * Move to line end\n * @private\n */\n Selection.prototype.moveToLineEnd = function () {\n if (isNullOrUndefined(this.start)) {\n return;\n }\n this.updateForwardSelection();\n this.start.moveToLineEndInternal(this, false);\n this.end.setPositionInternal(this.start);\n this.upDownSelectionLength = this.start.location.x;\n this.fireSelectionChanged(true);\n };\n /**\n * Get Page top\n * @private\n */\n Selection.prototype.getPageTop = function (page) {\n // tslint:disable-next-line:max-line-length\n return (page.boundingRectangle.y - this.viewer.pageGap * (this.viewer.pages.indexOf(page) + 1)) * this.viewer.zoomFactor + this.viewer.pageGap * (this.viewer.pages.indexOf(page) + 1);\n };\n /**\n * Move text position to cursor point\n * @private\n */\n Selection.prototype.moveTextPosition = function (cursorPoint, textPosition) {\n if (isNullOrUndefined(this.start)) {\n return;\n }\n //Updates the text position based on the cursor position.\n var widget = this.viewer.getLineWidgetInternal(cursorPoint, true);\n if (!isNullOrUndefined(widget)) {\n this.updateTextPositionWidget(widget, cursorPoint, textPosition, true);\n }\n this.upDownSelectionLength = textPosition.location.x;\n var selectionStartIndex = this.start.getHierarchicalIndexInternal();\n var selectionEndIndex = this.end.getHierarchicalIndexInternal();\n if (selectionStartIndex !== selectionEndIndex) {\n // Extends selection end to field begin or field end.\n if (TextPosition.isForwardSelection(selectionStartIndex, selectionEndIndex)) {\n textPosition.validateForwardFieldSelection(selectionStartIndex, selectionEndIndex);\n }\n else {\n textPosition.validateBackwardFieldSelection(selectionStartIndex, selectionEndIndex);\n }\n }\n this.fireSelectionChanged(true);\n };\n //Helper Method Implementation \n //Document\n /**\n * Get document start position\n * @private\n */\n Selection.prototype.getDocumentStart = function () {\n var textPosition = undefined;\n var block = this.viewer.pages[0].bodyWidgets[0].childWidgets[0];\n return this.setPositionForBlock(block, true);\n };\n /**\n * Get document end position\n * @private\n */\n Selection.prototype.getDocumentEnd = function () {\n var textPosition = undefined;\n var documentStart = this.owner.documentStart;\n var lastPage = this.viewer.pages[this.viewer.pages.length - 1];\n if (!isNullOrUndefined(documentStart) && lastPage.bodyWidgets[0].childWidgets.length > 0) {\n var block = undefined;\n var section = lastPage.bodyWidgets[0];\n var blocks = section.childWidgets;\n var lastBlkItem = blocks.length - 1;\n var lastBlock = blocks[lastBlkItem];\n if (lastBlock instanceof BlockWidget) {\n block = lastBlock;\n }\n textPosition = this.setPositionForBlock(block, false);\n }\n return textPosition;\n };\n //Keyboard shortcut internal API\n /**\n * @private\n * Handles control end key.\n */\n Selection.prototype.handleControlEndKey = function () {\n var documentEnd = undefined;\n if (!isNullOrUndefined(this.owner.documentEnd)) {\n documentEnd = this.owner.documentEnd;\n }\n if (!isNullOrUndefined(documentEnd)) {\n this.owner.selection.selectContent(documentEnd, true);\n }\n this.checkForCursorVisibility();\n };\n /**\n * @private\n * Handles control home key.\n */\n Selection.prototype.handleControlHomeKey = function () {\n var documentStart = undefined;\n if (!isNullOrUndefined(this.owner.documentStart)) {\n documentStart = this.owner.documentStart;\n }\n if (!isNullOrUndefined(documentStart)) {\n this.owner.selection.selectContent(documentStart, true);\n }\n this.checkForCursorVisibility();\n };\n /**\n * @private\n * Handles control left key.\n */\n Selection.prototype.handleControlLeftKey = function () {\n this.extendToWordStart(true);\n this.checkForCursorVisibility();\n };\n /**\n * @private\n * Handles control right key.\n */\n Selection.prototype.handleControlRightKey = function () {\n this.extendToWordEnd(true);\n this.checkForCursorVisibility();\n };\n /**\n * Handles control down key.\n * @private\n */\n Selection.prototype.handleControlDownKey = function () {\n this.moveToNextParagraph();\n this.checkForCursorVisibility();\n };\n /**\n * Handles control up key.\n * @private\n */\n Selection.prototype.handleControlUpKey = function () {\n this.moveToPreviousParagraph();\n this.checkForCursorVisibility();\n };\n /**\n * @private\n * Handles shift left key.\n */\n Selection.prototype.handleShiftLeftKey = function () {\n this.extendBackward();\n this.checkForCursorVisibility();\n };\n /**\n * Handles shift up key.\n * @private\n */\n Selection.prototype.handleShiftUpKey = function () {\n this.extendToPreviousLine();\n this.checkForCursorVisibility();\n };\n /**\n * Handles shift right key.\n * @private\n */\n Selection.prototype.handleShiftRightKey = function () {\n this.extendForward();\n this.checkForCursorVisibility();\n };\n /**\n * Handles shift down key.\n * @private\n */\n Selection.prototype.handleShiftDownKey = function () {\n this.extendToNextLine();\n this.checkForCursorVisibility();\n };\n /**\n * @private\n * Handles control shift left key.\n */\n Selection.prototype.handleControlShiftLeftKey = function () {\n this.extendToWordStart(false);\n this.checkForCursorVisibility();\n };\n /**\n * Handles control shift up key.\n * @private\n */\n Selection.prototype.handleControlShiftUpKey = function () {\n this.extendToParagraphStart();\n this.checkForCursorVisibility();\n };\n /**\n * Handles control shift right key\n * @private\n */\n Selection.prototype.handleControlShiftRightKey = function () {\n this.extendToWordEnd(false);\n this.checkForCursorVisibility();\n };\n /**\n * Handles control shift down key.\n * @private\n */\n Selection.prototype.handleControlShiftDownKey = function () {\n this.extendToParagraphEnd();\n this.checkForCursorVisibility();\n };\n /**\n * Handles left key.\n * @private\n */\n Selection.prototype.handleLeftKey = function () {\n this.movePreviousPosition();\n this.checkForCursorVisibility();\n };\n /**\n * Handles up key.\n * @private\n */\n Selection.prototype.handleUpKey = function () {\n this.isMoveDownOrMoveUp = true;\n this.moveUp();\n this.isMoveDownOrMoveUp = false;\n this.checkForCursorVisibility();\n };\n /**\n * Handles right key.\n * @private\n */\n Selection.prototype.handleRightKey = function () {\n this.moveNextPosition();\n this.checkForCursorVisibility();\n };\n /**\n * Handles end key.\n * @private\n */\n Selection.prototype.handleEndKey = function () {\n this.moveToLineEnd();\n this.checkForCursorVisibility();\n };\n /**\n * Handles home key.\n * @private\n */\n Selection.prototype.handleHomeKey = function () {\n this.moveToLineStart();\n this.checkForCursorVisibility();\n };\n /**\n * Handles down key.\n * @private\n */\n Selection.prototype.handleDownKey = function () {\n this.isMoveDownOrMoveUp = true;\n this.moveDown();\n this.isMoveDownOrMoveUp = false;\n this.checkForCursorVisibility();\n };\n /**\n * Handles shift end key.\n * @private\n */\n Selection.prototype.handleShiftEndKey = function () {\n this.extendToLineEnd();\n this.checkForCursorVisibility();\n };\n /**\n * Handles shift home key.\n * @private\n */\n Selection.prototype.handleShiftHomeKey = function () {\n this.extendToLineStart();\n this.checkForCursorVisibility();\n };\n /**\n * Handles control shift end key.\n * @private\n */\n Selection.prototype.handleControlShiftEndKey = function () {\n var documentEnd = undefined;\n if (!isNullOrUndefined(this.owner.documentEnd)) {\n documentEnd = this.owner.documentEnd;\n }\n if (!isNullOrUndefined(documentEnd)) {\n this.end.setPosition(documentEnd.currentWidget, false);\n this.fireSelectionChanged(true);\n }\n this.checkForCursorVisibility();\n };\n /**\n * Handles control shift home key.\n * @private\n */\n Selection.prototype.handleControlShiftHomeKey = function () {\n var documentStart = undefined;\n if (!isNullOrUndefined(this.owner.documentStart)) {\n documentStart = this.owner.documentStart;\n }\n if (!isNullOrUndefined(documentStart)) {\n this.end.setPositionInternal(documentStart);\n this.fireSelectionChanged(true);\n }\n this.checkForCursorVisibility();\n };\n /**\n * Handles tab key.\n * @param isNavigateInCell\n * @param isShiftTab\n * @private\n */\n Selection.prototype.handleTabKey = function (isNavigateInCell, isShiftTab) {\n var start = this.start;\n if (isNullOrUndefined(start)) {\n return;\n }\n if (start.paragraph.isInsideTable && this.end.paragraph.isInsideTable && (isNavigateInCell || isShiftTab)) {\n //Perform tab navigation\n if (isShiftTab) {\n this.selectPreviousCell();\n }\n else {\n this.selectNextCell();\n }\n }\n else if ((isNavigateInCell || isShiftTab) && !isNullOrUndefined(start) && start.offset === this.getStartOffset(start.paragraph)\n && !isNullOrUndefined(start.paragraph.paragraphFormat) && !isNullOrUndefined(start.paragraph.paragraphFormat.listFormat)\n && start.paragraph.paragraphFormat.listFormat.listId !== -1 && !this.owner.isReadOnlyMode) {\n this.owner.editorModule.updateListLevel(isShiftTab ? false : true);\n }\n else if (!this.owner.isReadOnlyMode) {\n this.owner.editorModule.handleTextInput('\\t');\n }\n this.checkForCursorVisibility();\n };\n Selection.prototype.selectPreviousCell = function () {\n var tableCell = this.start.paragraph.associatedCell;\n var tableRow = tableCell.ownerRow;\n var tableAdv = tableRow.ownerTable;\n if (isNullOrUndefined(tableCell.previousWidget)) {\n if (!isNullOrUndefined(tableRow.previousRenderedWidget)) {\n //Move text selection or cursor to previous row's last cell\n var prevRow = undefined;\n if (tableRow.previousRenderedWidget instanceof TableRowWidget) {\n prevRow = tableRow.previousRenderedWidget;\n }\n this.selectTableCellInternal(prevRow.childWidgets[prevRow.childWidgets.length - 1], true);\n }\n }\n else {\n //Move text selection or cursor to next cell in current row\n var prevCell = undefined;\n if (tableCell.previousWidget instanceof TableCellWidget) {\n prevCell = tableCell.previousWidget;\n }\n this.selectTableCellInternal(prevCell, true);\n }\n };\n Selection.prototype.selectNextCell = function () {\n var tableCell = this.start.paragraph.associatedCell;\n var tableRow = tableCell.ownerRow;\n var tableAdv = tableRow.ownerTable;\n if (isNullOrUndefined(tableCell.nextWidget)) {\n if (isNullOrUndefined(tableRow.nextRenderedWidget) && !this.owner.isReadOnlyMode) {\n //Insert new row below \n this.owner.editorModule.insertRow(false);\n }\n else {\n //Move text selection or cursor to next row's first cell\n var nextRow = undefined;\n if (tableRow.nextRenderedWidget instanceof TableRowWidget) {\n nextRow = tableRow.nextRenderedWidget;\n }\n this.selectTableCellInternal(nextRow.childWidgets[0], true);\n }\n // }\n }\n else {\n //Move text selection or cursor to next cell in current row\n var nextCell = undefined;\n if (tableCell.nextRenderedWidget instanceof TableCellWidget) {\n nextCell = tableCell.nextRenderedWidget;\n }\n this.selectTableCellInternal(nextCell, true);\n }\n };\n /**\n * Select given table cell\n * @private\n */\n Selection.prototype.selectTableCellInternal = function (tableCell, clearMultiSelection) {\n var firstParagraph = this.getFirstParagraph(tableCell);\n var lastParagraph = this.getLastParagraph(tableCell);\n if (firstParagraph === lastParagraph && lastParagraph.isEmpty()) {\n this.selectParagraph(lastParagraph, true);\n }\n else {\n var firstLineWidget = lastParagraph.childWidgets[0];\n this.start.setPosition(firstParagraph.childWidgets[0], true);\n this.end.setPositionParagraph(firstLineWidget, firstLineWidget.getEndOffset());\n this.fireSelectionChanged(true);\n }\n };\n /**\n * Select while table\n * @private\n */\n Selection.prototype.selectTableInternal = function () {\n var start = this.start;\n var end = this.end;\n if (!this.isForward) {\n start = this.end;\n end = this.start;\n }\n if (!isNullOrUndefined(start) && !isNullOrUndefined(end) && !isNullOrUndefined(this.getTable(start, end))) {\n var containerCell = this.getContainerCellOf(start.paragraph.associatedCell, end.paragraph.associatedCell);\n var table = containerCell.ownerTable;\n var firstPara = this.getFirstParagraphBlock(table);\n var lastPara = this.getLastParagraphBlock(table);\n var offset = lastPara.lastChild.getEndOffset();\n this.start.setPosition(firstPara.childWidgets[0], true);\n this.end.setPositionParagraph(lastPara.lastChild, offset + 1);\n }\n this.selectPosition(this.start, this.end);\n };\n /**\n * Select single column\n * @private\n */\n Selection.prototype.selectColumnInternal = function () {\n var startTextPos = this.start;\n var endTextPos = this.end;\n if (!this.isForward) {\n startTextPos = this.end;\n endTextPos = this.start;\n }\n // tslint:disable-next-line:max-line-length\n if (!isNullOrUndefined(startTextPos) && !isNullOrUndefined(endTextPos) && !isNullOrUndefined(this.getTable(startTextPos, endTextPos))) {\n var containerCell = this.getContainerCellOf(startTextPos.paragraph.associatedCell, endTextPos.paragraph.associatedCell);\n if (containerCell.ownerTable.contains(endTextPos.paragraph.associatedCell)) {\n var startCell = this.getSelectedCell(startTextPos.paragraph.associatedCell, containerCell);\n var endCell = this.getSelectedCell(endTextPos.paragraph.associatedCell, containerCell);\n if (this.containsCell(containerCell, endTextPos.paragraph.associatedCell)) {\n var row = startCell.ownerRow;\n var columnCells = containerCell.ownerTable.getColumnCellsForSelection(containerCell, containerCell);\n if (columnCells.length > 0) {\n var firstPara = this.getFirstParagraph(columnCells[0]);\n var lastPara = this.getLastParagraph(columnCells[columnCells.length - 1]);\n this.start.setPosition(firstPara.firstChild, true);\n var lastLine = lastPara.lastChild;\n this.end.setPositionParagraph(lastLine, lastLine.getEndOffset() + 1);\n }\n }\n else {\n var startCellColumnCells = containerCell.ownerTable.getColumnCellsForSelection(startCell, startCell);\n var endCellColumnCells = containerCell.ownerTable.getColumnCellsForSelection(endCell, endCell);\n if (startCellColumnCells.length > 0 && endCellColumnCells.length > 0) {\n var firstPara = this.getFirstParagraph(startCellColumnCells[0]);\n // tslint:disable-next-line:max-line-length\n var lastPara = this.getLastParagraph(endCellColumnCells[endCellColumnCells.length - 1]);\n this.start.setPosition(firstPara.firstChild, true);\n var lastLine = lastPara.lastChild;\n this.end.setPositionParagraph(lastLine, lastLine.getEndOffset() + 1);\n }\n }\n }\n }\n this.selectPosition(this.start, this.end);\n };\n /**\n * Select single row\n * @private\n */\n Selection.prototype.selectTableRow = function () {\n var startPos = this.start;\n var endPos = this.end;\n if (!this.isForward) {\n startPos = this.end;\n endPos = this.start;\n }\n if (!isNullOrUndefined(startPos) && !isNullOrUndefined(endPos) && !isNullOrUndefined(this.getTable(startPos, endPos))) {\n var containerCell = void 0;\n containerCell = this.getContainerCellOf(startPos.paragraph.associatedCell, endPos.paragraph.associatedCell);\n if (containerCell.ownerTable.contains(endPos.paragraph.associatedCell)) {\n var startCell = this.getSelectedCell(startPos.paragraph.associatedCell, containerCell);\n var endCell = this.getSelectedCell(endPos.paragraph.associatedCell, containerCell);\n if (this.containsCell(containerCell, endPos.paragraph.associatedCell)) {\n var row = startCell.ownerRow;\n var firstPara = this.getFirstParagraph(row.childWidgets[0]);\n var lastPara = this.getLastParagraph(row.childWidgets[row.childWidgets.length - 1]);\n this.start.setPosition(firstPara.firstChild, true);\n this.end.setPositionParagraph(lastPara.lastChild, lastPara.lastChild.getEndOffset() + 1);\n }\n else {\n var firstPara = this.getFirstParagraph(startCell.ownerRow.childWidgets[0]);\n var lastPara = void 0;\n // tslint:disable-next-line:max-line-length\n lastPara = this.getLastParagraph(endCell.ownerRow.childWidgets[endCell.ownerRow.childWidgets.length - 1]);\n this.start.setPosition(firstPara.firstChild, true);\n this.end.setPositionParagraph(lastPara.lastChild, lastPara.lastChild.getEndOffset() + 1);\n }\n }\n }\n this.selectPosition(this.start, this.end);\n };\n /**\n * Select single cell\n * @private\n */\n Selection.prototype.selectTableCell = function () {\n var start = this.start;\n var end = this.end;\n if (!this.isForward) {\n start = this.end;\n end = this.start;\n }\n if (isNullOrUndefined(this.getTable(start, end))) {\n return;\n }\n if (this.isEmpty) {\n if (start.paragraph.isInsideTable && !isNullOrUndefined(start.paragraph.associatedCell)) {\n var firstPara = this.getFirstParagraph(start.paragraph.associatedCell);\n var lastPara = this.getLastParagraph(end.paragraph.associatedCell);\n if (firstPara === lastPara) {\n this.start.setPosition(lastPara.firstChild, true);\n this.end.setPositionParagraph(lastPara.lastChild, lastPara.lastChild.getEndOffset() + 1);\n }\n else {\n this.start.setPosition(firstPara.firstChild, true);\n this.end.setPositionParagraph(lastPara.lastChild, lastPara.lastChild.getEndOffset() + 1);\n }\n }\n }\n else {\n var containerCell = this.getContainerCell(start.paragraph.associatedCell);\n // tslint:disable-next-line:max-line-length\n if (this.containsCell(containerCell, start.paragraph.associatedCell) && this.containsCell(containerCell, end.paragraph.associatedCell)) {\n var firstPara = this.getFirstParagraph(containerCell);\n var lastPara = this.getLastParagraph(containerCell);\n if (!isNullOrUndefined(firstPara) && !isNullOrUndefined(lastPara)) {\n this.start.setPosition(firstPara.firstChild, true);\n this.end.setPositionParagraph(lastPara.lastChild, lastPara.lastChild.getEndOffset() + 1);\n }\n }\n }\n this.selectPosition(this.start, this.end);\n };\n /**\n * @private\n * Selects the entire document.\n */\n Selection.prototype.selectAll = function () {\n var documentStart;\n var documentEnd;\n if (this.owner.enableHeaderAndFooter) {\n var headerFooter = this.getContainerWidget(this.start.paragraph);\n documentStart = this.setPositionForBlock(headerFooter.firstChild, true);\n documentEnd = this.setPositionForBlock(headerFooter.lastChild, false);\n }\n else {\n documentStart = this.owner.documentStart;\n documentEnd = this.owner.documentEnd;\n }\n //Selects the entire document. \n if (!isNullOrUndefined(documentStart)) {\n this.start.setPositionInternal(documentStart);\n this.end.setPositionParagraph(documentEnd.currentWidget, documentEnd.offset + 1);\n this.upDownSelectionLength = this.end.location.x;\n this.fireSelectionChanged(true);\n }\n };\n /**\n * Extend selection backward\n * @private\n */\n Selection.prototype.extendBackward = function () {\n if (isNullOrUndefined(this.start)) {\n return;\n }\n this.end.moveBackward();\n this.upDownSelectionLength = this.end.location.x;\n this.fireSelectionChanged(true);\n };\n /**\n * Extent selection forward\n * @private\n */\n Selection.prototype.extendForward = function () {\n if (isNullOrUndefined(this.start)) {\n return;\n }\n this.end.moveForward();\n this.upDownSelectionLength = this.end.location.x;\n this.fireSelectionChanged(true);\n };\n /**\n * Extend selection to word start and end\n * @private\n */\n Selection.prototype.extendToWordStartEnd = function () {\n if ((this.start.paragraph.isInsideTable || this.end.paragraph.isInsideTable)\n && (this.start.paragraph.associatedCell !== this.end.paragraph.associatedCell\n || this.isCellSelected(this.start.paragraph.associatedCell, this.start, this.end))) {\n return true;\n }\n return false;\n };\n /**\n * Extend selection to word start\n * @private\n */\n Selection.prototype.extendToWordStart = function (isNavigation) {\n if (isNullOrUndefined(this.start)) {\n return;\n }\n var isCellSelected = this.extendToWordStartEnd();\n if (isCellSelected) {\n this.end.moveToPreviousParagraphInTable(this);\n }\n else {\n this.end.moveToWordStartInternal(isNavigation ? 0 : 1);\n }\n if (isNavigation) {\n this.start.setPositionInternal(this.end);\n }\n this.upDownSelectionLength = this.end.location.x;\n this.fireSelectionChanged(true);\n };\n /**\n * Extent selection to word end\n * @private\n */\n Selection.prototype.extendToWordEnd = function (isNavigation) {\n if (isNullOrUndefined(this.start)) {\n return;\n }\n var isCellSelect = this.extendToWordStartEnd();\n if (isCellSelect) {\n this.end.moveToNextParagraphInTable();\n }\n else {\n this.end.moveToWordEndInternal(isNavigation ? 0 : 1, false);\n }\n if (isNavigation) {\n this.start.setPositionInternal(this.end);\n }\n this.upDownSelectionLength = this.end.location.x;\n this.fireSelectionChanged(true);\n };\n /**\n * Extend selection to next line\n * @private\n */\n Selection.prototype.extendToNextLine = function () {\n if (isNullOrUndefined(this.start)) {\n return;\n }\n this.end.moveToNextLine(this.upDownSelectionLength);\n this.fireSelectionChanged(true);\n };\n //Selection Text get API\n //Selection add, Highlight, remove API enda\n Selection.prototype.getTextPosition = function (hierarchicalIndex) {\n var textPosition = new TextPosition(this.owner);\n textPosition.setPositionForCurrentIndex(hierarchicalIndex);\n return textPosition;\n };\n /**\n * Get Selected text\n * @private\n */\n Selection.prototype.getText = function (includeObject) {\n if (isNullOrUndefined(this.start) || isNullOrUndefined(this.end)\n || isNullOrUndefined(this.start.paragraph) || isNullOrUndefined(this.end.paragraph)) {\n return undefined;\n }\n var startPosition = this.start;\n var endPosition = this.end;\n if (startPosition.isAtSamePosition(endPosition)) {\n return '';\n }\n return this.getTextInternal(startPosition, endPosition, includeObject);\n };\n /**\n * Get selected text\n * @private\n */\n Selection.prototype.getTextInternal = function (start, end, includeObject) {\n if (start.isExistAfter(end)) {\n var temp = end;\n end = start;\n start = temp;\n }\n var startPosition = start;\n var endPosition = end;\n // tslint:disable-next-line:max-line-length\n if (!isNullOrUndefined(start) && !isNullOrUndefined(end) && !isNullOrUndefined(start.paragraph) && !isNullOrUndefined(end.paragraph)) {\n var startIndex = 0;\n var endIndex = 0;\n var startOffset = start.offset;\n var endOffset = end.offset;\n var startInlineObj = start.currentWidget.getInline(startOffset, startIndex);\n startIndex = startInlineObj.index;\n var inline = startInlineObj.element;\n // If the start position is at the beginning of field begin that has field end, then field code should be skipped.\n if (inline instanceof FieldElementBox && !isNullOrUndefined(inline.fieldEnd)) {\n var elementInfo = this.getRenderedInline(inline, startIndex);\n inline = elementInfo.element;\n startIndex = elementInfo.index;\n }\n var endInlineObj = end.currentWidget.getInline(endOffset, endIndex);\n var endInline = endInlineObj.element;\n endIndex = endInlineObj.index;\n var text = '';\n // Retrieves the text from start inline.\n if (inline instanceof ImageElementBox && includeObject && startIndex === 0) {\n text = ElementBox.objectCharacter;\n }\n else if (inline instanceof TextElementBox) {\n // tslint:disable-next-line:max-line-length\n text = ((isNullOrUndefined(inline.text)) || (inline.text) === '') || inline.text.length < startIndex ? text : inline.text.substring(startIndex);\n }\n if (startPosition.paragraph === endPosition.paragraph) {\n if (inline instanceof ElementBox) {\n if (inline === endInline && inline instanceof TextElementBox) {\n text = text.length < endIndex - startIndex ? text : text.substring(0, endIndex - startIndex);\n }\n else if (inline.nextNode instanceof ElementBox) {\n // tslint:disable-next-line:max-line-length\n text = text + this.getTextInline(inline.nextNode, endPosition.paragraph, endInline, endIndex, includeObject);\n }\n }\n }\n else {\n if (inline instanceof ElementBox && inline.nextNode instanceof ElementBox) {\n text = text + this.getTextInline(inline.nextNode, endPosition.paragraph, undefined, 0, includeObject);\n }\n else {\n // tslint:disable-next-line:max-line-length\n var nextParagraphWidget = this.viewer.selection.getNextParagraphBlock(startPosition.paragraph);\n text = text + '\\r';\n while (!isNullOrUndefined(nextParagraphWidget) && nextParagraphWidget.isEmpty()) {\n text = text + '\\r';\n if (nextParagraphWidget === endPosition.paragraph) {\n return text;\n }\n nextParagraphWidget = this.viewer.selection.getNextParagraphBlock(nextParagraphWidget);\n }\n if (!isNullOrUndefined(nextParagraphWidget) && !nextParagraphWidget.isEmpty()) {\n // tslint:disable-next-line:max-line-length\n text = text + this.getTextInline(nextParagraphWidget.childWidgets[0].children[0], endPosition.paragraph, endInline, endIndex, includeObject);\n }\n }\n }\n // If the selection includes end paragraph mark.\n if (endOffset === (endPosition.currentWidget).getEndOffset() + 1) {\n text = text + '\\r';\n }\n return text;\n }\n return undefined;\n };\n /**\n * @private\n */\n // tslint:disable-next-line:max-line-length\n Selection.prototype.getTextInline = function (inlineElement, endParagraphWidget, endInline, endIndex, includeObject) {\n var text = '';\n do {\n if (inlineElement === endInline) {\n if (inlineElement instanceof TextElementBox) {\n var span = inlineElement;\n if (!(isNullOrUndefined(span.text) || span.text === '')) {\n if (span.text.length < endIndex) {\n text = text + span.text;\n }\n else {\n text = text + span.text.substring(0, endIndex);\n }\n }\n // tslint:disable-next-line:max-line-length\n }\n else if (inlineElement instanceof ImageElementBox && includeObject && endIndex === inlineElement.length) {\n text = text + ElementBox.objectCharacter;\n }\n return text;\n }\n if (inlineElement instanceof TextElementBox) {\n text = text + inlineElement.text;\n }\n else if (inlineElement instanceof ImageElementBox && includeObject) {\n text = text + ElementBox.objectCharacter;\n }\n else if (inlineElement instanceof FieldElementBox && !isNullOrUndefined(inlineElement.fieldEnd)) {\n if (!isNullOrUndefined(inlineElement.fieldSeparator)) {\n inlineElement = inlineElement.fieldSeparator;\n }\n else {\n inlineElement = inlineElement.fieldEnd;\n }\n }\n if (isNullOrUndefined(inlineElement.nextNode)) {\n break;\n }\n inlineElement = inlineElement.nextNode;\n } while (!isNullOrUndefined(inlineElement));\n if (endParagraphWidget === inlineElement.line.paragraph) {\n return text;\n }\n // tslint:disable-next-line:max-line-length\n var nextParagraphWidget = this.viewer.selection.getNextParagraphBlock(inlineElement.line.paragraph);\n while (!isNullOrUndefined(nextParagraphWidget) && nextParagraphWidget.isEmpty()) {\n text = text + '\\r';\n if (nextParagraphWidget === endParagraphWidget) {\n return text;\n }\n nextParagraphWidget = this.viewer.selection.getNextParagraphBlock(nextParagraphWidget);\n }\n if (!isNullOrUndefined(nextParagraphWidget) && !nextParagraphWidget.isEmpty()) {\n var lineWidget = nextParagraphWidget.childWidgets[0];\n // tslint:disable-next-line:max-line-length\n text = text + '\\r' + this.getTextInline(lineWidget.children[0], endParagraphWidget, endInline, endIndex, includeObject);\n }\n return text;\n };\n /**\n * Returns field code.\n * @private\n * @param fieldBegin\n */\n Selection.prototype.getFieldCode = function (fieldBegin) {\n var fieldCode = '';\n if (!(fieldBegin.fieldEnd instanceof FieldElementBox)) {\n return fieldCode;\n }\n var paragraph = fieldBegin.paragraph;\n var endParagraph = fieldBegin.fieldEnd.paragraph;\n if (fieldBegin.fieldSeparator instanceof FieldElementBox) {\n endParagraph = fieldBegin.fieldSeparator.paragraph;\n }\n var startLineIndex = fieldBegin.line.indexInOwner;\n var startIndex = fieldBegin.indexInOwner;\n do {\n fieldCode += this.getFieldCodeInternal(paragraph, startLineIndex, startIndex);\n if (paragraph === endParagraph) {\n break;\n }\n paragraph = this.getNextParagraphBlock(paragraph);\n startLineIndex = 0;\n startIndex = 0;\n } while (paragraph instanceof ParagraphWidget);\n return fieldCode.trim();\n };\n Selection.prototype.getFieldCodeInternal = function (paragraph, startLineIndex, inlineIndex) {\n var fieldCode = '';\n for (var i = startLineIndex; i < paragraph.childWidgets.length; i++) {\n var line = paragraph.childWidgets[i];\n for (var i_1 = inlineIndex; i_1 < line.children.length; i_1++) {\n var element = line.children[i_1];\n if (element instanceof TextElementBox) {\n fieldCode += element.text;\n }\n if (element instanceof FieldElementBox\n && (element.fieldType === 2 || element.fieldType === 1)) {\n return fieldCode;\n }\n }\n inlineIndex = 0;\n }\n return fieldCode;\n };\n /**\n * @private\n */\n Selection.prototype.getTocFieldInternal = function () {\n var paragraph = this.start.paragraph;\n if (!this.isEmpty && !this.isForward) {\n paragraph = this.end.paragraph;\n }\n while (paragraph instanceof ParagraphWidget && paragraph.childWidgets.length > 0) {\n var line = paragraph.firstChild;\n if (line.children.length > 0) {\n var element = line.children[0];\n var nextElement = element.nextNode;\n if (element instanceof FieldElementBox && element.fieldType === 0 && nextElement instanceof TextElementBox\n && nextElement.text.trim().toLowerCase().indexOf('toc') === 0) {\n return element;\n }\n }\n paragraph = paragraph.previousRenderedWidget;\n }\n return undefined;\n };\n /**\n * Get next paragraph in bodyWidget\n * @private\n */\n Selection.prototype.getNextParagraph = function (section) {\n if (section.nextRenderedWidget instanceof BodyWidget) {\n var block = section.nextRenderedWidget.childWidgets[0];\n return this.getFirstParagraphBlock(block);\n }\n return undefined;\n };\n /**\n * @private\n */\n Selection.prototype.getPreviousParagraph = function (section) {\n if (section.previousRenderedWidget instanceof BodyWidget) {\n var bodyWidget = section.previousRenderedWidget;\n var block = bodyWidget.childWidgets[bodyWidget.childWidgets.length - 1];\n return this.getLastParagraphBlock(block);\n }\n return undefined;\n };\n /**\n * Get first paragraph in cell\n * @private\n */\n Selection.prototype.getFirstParagraphInCell = function (cell) {\n var firstBlock = cell.childWidgets[0];\n if (firstBlock instanceof ParagraphWidget) {\n return firstBlock;\n }\n else {\n return this.getFirstParagraphInFirstCell(firstBlock);\n }\n };\n /**\n * Get first paragraph in first cell\n * @private\n */\n Selection.prototype.getFirstParagraphInFirstCell = function (table) {\n if (table.childWidgets.length > 0) {\n var firstRow = table.childWidgets[0];\n var cell = firstRow.childWidgets[0];\n var block = cell.childWidgets[0];\n return this.getFirstParagraphBlock(block);\n }\n return undefined;\n };\n /**\n * Get last paragraph in last cell\n * @private\n */\n Selection.prototype.getLastParagraphInLastCell = function (table) {\n if (table.childWidgets.length > 0) {\n var lastrow = table.lastChild;\n var lastcell = lastrow.lastChild;\n var lastBlock = lastcell.lastChild;\n return this.getLastParagraphBlock(lastBlock);\n }\n return undefined;\n };\n /**\n * Get last paragraph in first row\n * @private\n */\n Selection.prototype.getLastParagraphInFirstRow = function (table) {\n if (table.childWidgets.length > 0) {\n var row = table.firstChild;\n var lastcell = row.lastChild;\n var lastBlock = lastcell.lastChild;\n return this.getLastParagraphBlock(lastBlock);\n }\n return undefined;\n };\n /**\n * Get Next start inline\n * @private\n */\n Selection.prototype.getNextStartInline = function (line, offset) {\n var indexInInline = 0;\n var inlineObj = line.getInline(offset, indexInInline);\n var inline = inlineObj.element;\n indexInInline = inlineObj.index;\n if (!isNullOrUndefined(inline) && indexInInline === inline.length && inline.nextNode instanceof FieldElementBox) {\n var nextValidInline = this.getNextValidElement(inline.nextNode);\n if (nextValidInline instanceof FieldElementBox && nextValidInline.fieldType === 0) {\n inline = nextValidInline;\n }\n }\n return inline;\n };\n /**\n * Get previous text inline\n * @private\n */\n Selection.prototype.getPreviousTextInline = function (inline) {\n if (inline.previousNode instanceof TextElementBox) {\n return inline.previousNode;\n }\n if (inline.previousNode instanceof FieldElementBox && HelperMethods.isLinkedFieldCharacter(inline.previousNode)) {\n if (inline.previousNode.fieldType === 0 || inline.previousNode.fieldType === 1) {\n return inline.previousNode;\n }\n return inline.previousNode.fieldBegin;\n }\n if (!isNullOrUndefined(inline.previousNode)) {\n return this.getPreviousTextInline((inline.previousNode));\n }\n return undefined;\n };\n /**\n * Get next text inline\n * @private\n */\n Selection.prototype.getNextTextInline = function (inline) {\n if (inline.nextNode instanceof TextElementBox) {\n return inline.nextNode;\n }\n if (inline.nextNode instanceof FieldElementBox && (HelperMethods.isLinkedFieldCharacter(inline.nextNode))) {\n if (inline.nextNode.fieldType === 1 || inline.nextNode.fieldType === 0) {\n return inline.nextNode;\n }\n return inline.nextNode.fieldEnd;\n }\n if (!isNullOrUndefined(inline.nextNode)) {\n return this.getNextTextInline((inline.nextNode));\n }\n return undefined;\n };\n /**\n * Get container table\n * @private\n */\n Selection.prototype.getContainerTable = function (block) {\n if (block.isInsideTable) {\n if (block.associatedCell.ownerTable.isInsideTable) {\n block = this.getContainerTable(block.associatedCell.ownerTable);\n }\n else {\n block = block.associatedCell.ownerTable;\n }\n }\n if (block instanceof TableWidget) {\n return block;\n }\n return undefined;\n };\n /**\n * @private\n */\n Selection.prototype.isExistBefore = function (start, block) {\n if (start.isInsideTable) {\n var cell1 = start.associatedCell;\n if (block.isInsideTable) {\n var cell2 = block.associatedCell;\n if (cell1 === cell2) {\n return cell1.childWidgets.indexOf(start) < cell1.childWidgets.indexOf(block);\n }\n if (cell1.ownerRow === cell2.ownerRow) {\n return cell1.cellIndex < cell2.cellIndex;\n }\n if (cell1.ownerTable === cell2.ownerTable) {\n return cell1.ownerRow.rowIndex < cell2.ownerRow.rowIndex;\n }\n //Checks if current block exists before the block.\n var containerCell = this.getContainerCellOf(cell1, cell2);\n if (containerCell.ownerTable.contains(cell2)) {\n cell1 = this.getSelectedCell(cell1, containerCell);\n cell2 = this.getSelectedCell(cell2, containerCell);\n if (cell1 === containerCell) {\n return this.isExistBefore(start, cell2.ownerTable);\n }\n if (cell2 === containerCell) {\n return this.isExistBefore(cell1.ownerTable, block);\n }\n if (containerCell.ownerRow === cell2.ownerRow) {\n return containerCell.cellIndex < cell2.cellIndex;\n }\n if (containerCell.ownerTable === cell2.ownerTable) {\n return containerCell.ownerRow.rowIndex < cell2.ownerRow.rowIndex;\n }\n return this.isExistBefore(cell1.ownerTable, cell2.ownerTable);\n }\n return this.isExistBefore(containerCell.ownerTable, this.getContainerTable(cell2.ownerTable));\n }\n else {\n var ownerTable = this.getContainerTable(start);\n return this.isExistBefore(ownerTable, block);\n }\n }\n else if (block.isInsideTable) {\n var ownerTable = this.getContainerTable(block);\n return this.isExistBefore(start, ownerTable);\n }\n else {\n {\n if (start.containerWidget === block.containerWidget) {\n return start.index <\n block.index;\n }\n if (start.containerWidget instanceof BodyWidget && block.containerWidget instanceof BodyWidget) {\n //Splitted blocks \n var startPage = this.viewer.pages.indexOf(start.containerWidget.page);\n var endPage = this.viewer.pages.indexOf(block.containerWidget.page);\n return startPage < endPage;\n }\n }\n }\n return false;\n };\n /**\n * @private\n */\n Selection.prototype.isExistAfter = function (start, block) {\n if (start.isInsideTable) {\n var cell1 = start.associatedCell;\n //Current paragraph in cell, paragraph in cell\n if (block.isInsideTable) {\n var cell2 = block.associatedCell;\n if (cell1 === cell2) {\n return cell1.childWidgets.indexOf(start) > cell1.childWidgets.indexOf(block);\n }\n if (cell1.ownerRow === cell2.ownerRow) {\n return cell1.cellIndex > cell2.cellIndex;\n }\n if (cell1.ownerTable === cell2.ownerTable) {\n return cell1.ownerRow.rowIndex > cell2.ownerRow.rowIndex;\n }\n //Checks if this block exists before block.\n var containerCell = this.getContainerCellOf(cell1, cell2);\n if (containerCell.ownerTable.contains(cell2)) {\n cell1 = this.getSelectedCell(cell1, containerCell);\n cell2 = this.getSelectedCell(cell2, containerCell);\n if (cell1 === containerCell) {\n return this.isExistAfter(start, cell2.ownerTable);\n }\n if (cell2 === containerCell) {\n return this.isExistAfter(cell1.ownerTable, block);\n }\n if (containerCell.ownerRow === cell2.ownerRow) {\n return containerCell.cellIndex > cell2.cellIndex;\n }\n if (containerCell.ownerTable === cell2.ownerTable) {\n return containerCell.ownerRow.rowIndex > cell2.ownerRow.rowIndex;\n }\n return this.isExistAfter(cell1.ownerTable, cell2.ownerTable);\n }\n return this.isExistAfter(containerCell.ownerTable, this.getContainerTable(cell2.ownerTable));\n }\n else {\n var ownerTable = this.getContainerTable(start);\n return this.isExistAfter(ownerTable, block);\n }\n }\n else if (block.isInsideTable) {\n var ownerTable = this.getContainerTable(block);\n return this.isExistAfter(start, ownerTable);\n }\n else {\n if (start.containerWidget === block.containerWidget) {\n return start.index >\n block.index;\n }\n if (start.containerWidget instanceof BodyWidget && block.containerWidget instanceof BodyWidget) {\n //Splitted blocks \n var startPage = this.viewer.pages.indexOf(start.containerWidget.page);\n var endPage = this.viewer.pages.indexOf(block.containerWidget.page);\n return startPage > endPage;\n }\n // if (start.owner instanceof WHeaderFooter) {\n // return (start.owner as WHeaderFooter).childWidgets.indexOf(start) \n // > (block.owner as WHeaderFooter).childWidgets.indexOf(block);\n // } else if (start.section === block.section && start.section instanceof WSection) {\n // return (start.section as WSection).childWidgets.indexOf(start)\n // > (start.section as WSection).childWidgets.indexOf(block);\n // } else if (start.wordDocument instanceof WordDocument) {\n // tslint:disable-next-line:max-line-length\n // return (start.wordDocument as WordDocument).sections.indexOf(start.section as WSection) > (start.wordDocument as WordDocument).sections.indexOf(block.section as WSection);\n }\n return false;\n };\n /**\n * Return true if current inline in exist before inline\n * @private\n */\n Selection.prototype.isExistBeforeInline = function (currentInline, inline) {\n if (currentInline.line === inline.line) {\n return currentInline.line.children.indexOf(currentInline) <\n inline.line.children.indexOf(inline);\n }\n if (currentInline.line.paragraph === inline.line.paragraph) {\n return currentInline.line.paragraph.childWidgets.indexOf(currentInline.line)\n < inline.line.paragraph.childWidgets.indexOf(inline.line);\n }\n var startParagraph = currentInline.line.paragraph;\n var endParagraph = inline.line.paragraph;\n if (startParagraph.containerWidget === endParagraph.containerWidget) {\n if (startParagraph.isInsideTable) {\n return startParagraph.associatedCell.childWidgets.indexOf(startParagraph) <\n endParagraph.associatedCell.childWidgets.indexOf(endParagraph);\n }\n else if (startParagraph.containerWidget instanceof HeaderFooterWidget) {\n // return ((currentInline.owner as WParagraph).owner as WHeaderFooter).blocks.indexOf(currentInline.owner as WParagraph) <\n // ((inline.owner as WParagraph).owner as WHeaderFooter).blocks.indexOf(inline.owner as WParagraph);\n }\n else {\n return startParagraph.containerWidget.childWidgets.indexOf(startParagraph) <\n endParagraph.containerWidget.childWidgets.indexOf(endParagraph);\n }\n }\n return this.isExistBefore(startParagraph, endParagraph);\n };\n /**\n * Return true id current inline is exist after inline\n * @private\n */\n Selection.prototype.isExistAfterInline = function (currentInline, inline) {\n if (currentInline.line === inline.line) {\n return currentInline.line.children.indexOf(currentInline) >\n inline.line.children.indexOf(inline);\n }\n if (currentInline.line.paragraph === inline.line.paragraph) {\n return currentInline.line.paragraph.childWidgets.indexOf(currentInline.line)\n > inline.line.paragraph.childWidgets.indexOf(inline.line);\n }\n var startParagraph = currentInline.line.paragraph;\n var endParagraph = inline.line.paragraph;\n if (startParagraph.containerWidget === endParagraph.containerWidget) {\n if (startParagraph.isInsideTable) {\n return startParagraph.associatedCell.childWidgets.indexOf(startParagraph) >\n endParagraph.associatedCell.childWidgets.indexOf(endParagraph);\n }\n else if (startParagraph.containerWidget instanceof HeaderFooterWidget) {\n // return ((currentInline.owner as WParagraph).owner as WHeaderFooter).blocks.indexOf(currentInline.owner as WParagraph) <\n // ((inline.owner as WParagraph).owner as WHeaderFooter).blocks.indexOf(inline.owner as WParagraph);\n }\n else {\n return startParagraph.containerWidget.childWidgets.indexOf(startParagraph) >\n endParagraph.containerWidget.childWidgets.indexOf(endParagraph);\n }\n }\n return this.isExistAfter(startParagraph, endParagraph);\n };\n /**\n * Get next rendered block\n * @private\n */\n Selection.prototype.getNextRenderedBlock = function (block) {\n if (isNullOrUndefined(block.nextWidget)) {\n return block.nextRenderedWidget;\n }\n return block.nextWidget;\n };\n /**\n * Get next rendered block\n * @private\n */\n Selection.prototype.getPreviousRenderedBlock = function (block) {\n if (isNullOrUndefined(block.previousWidget)) {\n return block.previousRenderedWidget;\n }\n return block.previousWidget;\n };\n /**\n * Get Next paragraph in block\n * @private\n */\n Selection.prototype.getNextParagraphBlock = function (block) {\n if (block.nextRenderedWidget instanceof ParagraphWidget) {\n return block.nextRenderedWidget;\n }\n else if (block.nextRenderedWidget instanceof TableWidget) {\n return this.getFirstParagraphInFirstCell(block.nextRenderedWidget);\n }\n if (block.containerWidget instanceof TableCellWidget) {\n return this.getNextParagraphCell(block.containerWidget);\n }\n else if (block.containerWidget instanceof BodyWidget) {\n var bodyWidget = block.containerWidget;\n return this.getNextParagraph(block.containerWidget);\n }\n else if (block.containerWidget instanceof HeaderFooterWidget && this.isMoveDownOrMoveUp) {\n return this.getFirstBlockInNextHeaderFooter(block);\n }\n return undefined;\n };\n /**\n * @private\n */\n Selection.prototype.getFirstBlockInNextHeaderFooter = function (block) {\n var headerFooter = block.containerWidget;\n var nextBlock;\n if (headerFooter.headerFooterType.indexOf('Header') !== -1) {\n nextBlock = headerFooter.page.footerWidget.firstChild;\n }\n else if (headerFooter.page.nextPage) {\n nextBlock = headerFooter.page.nextPage.headerWidget.firstChild;\n }\n else {\n return undefined;\n }\n if (nextBlock instanceof ParagraphWidget) {\n return nextBlock;\n }\n else {\n return this.getFirstBlockInFirstCell(nextBlock);\n }\n };\n /**\n * @private\n */\n Selection.prototype.getLastBlockInPreviousHeaderFooter = function (block) {\n var headerFooter = block.containerWidget;\n var previousBlock;\n if (headerFooter.headerFooterType.indexOf('Footer') !== -1) {\n previousBlock = headerFooter.page.headerWidget.lastChild;\n }\n else if (headerFooter.page.previousPage) {\n previousBlock = headerFooter.page.previousPage.footerWidget.lastChild;\n }\n else {\n return undefined;\n }\n if (previousBlock instanceof ParagraphWidget) {\n return previousBlock;\n }\n else {\n return this.getFirstBlockInFirstCell(previousBlock);\n }\n };\n /**\n * Get previous paragraph in block\n * @private\n */\n Selection.prototype.getPreviousParagraphBlock = function (block) {\n if (block.previousRenderedWidget instanceof ParagraphWidget) {\n return block.previousRenderedWidget;\n }\n else if (block.previousRenderedWidget instanceof TableWidget) {\n return this.getLastParagraphInLastCell((block.previousRenderedWidget));\n }\n if (block.containerWidget instanceof TableCellWidget) {\n return this.getPreviousParagraphCell((block.containerWidget));\n }\n else if (block.containerWidget instanceof BodyWidget) {\n return this.getPreviousParagraph(block.containerWidget);\n }\n else if (block.containerWidget instanceof HeaderFooterWidget && this.isMoveDownOrMoveUp) {\n return this.getLastBlockInPreviousHeaderFooter(block);\n }\n return undefined;\n };\n /**\n * Get first paragraph in block\n * @private\n */\n Selection.prototype.getFirstParagraphBlock = function (block) {\n if (block instanceof ParagraphWidget) {\n return block;\n }\n else if (block instanceof TableWidget) {\n return this.getFirstParagraphInFirstCell(block);\n }\n return undefined;\n };\n /**\n * Get last paragraph in block\n * @private\n */\n Selection.prototype.getLastParagraphBlock = function (block) {\n if (block instanceof ParagraphWidget) {\n return block;\n }\n else if (block instanceof TableWidget) {\n return this.getLastParagraphInLastCell(block);\n }\n return undefined;\n };\n /**\n * Return true if paragraph has valid inline\n * @private\n */\n Selection.prototype.hasValidInline = function (paragraph, start, end) {\n var index = paragraph.childWidgets.indexOf(start.line);\n for (var i = index; i < paragraph.childWidgets.length; i++) {\n for (var j = 0; j < paragraph.childWidgets[i].children.length; j++) {\n var inline = paragraph.childWidgets[i].children[j];\n if (inline.length === 0) {\n continue;\n }\n if (inline === end) {\n return false;\n }\n if (inline instanceof TextElementBox || inline instanceof ImageElementBox\n || (inline instanceof FieldElementBox && HelperMethods.isLinkedFieldCharacter(inline))) {\n return true;\n }\n }\n }\n return false;\n };\n /**\n * Get paragraph length\n * @private\n */\n Selection.prototype.getParagraphLength = function (paragraph, endLine, elementInfo) {\n var length = 0;\n for (var j = 0; j < paragraph.childWidgets.length; j++) {\n var line = paragraph.childWidgets[j];\n if (endLine instanceof LineWidget && endLine === line) {\n if (elementInfo) {\n length += this.getLineLength(line, elementInfo);\n }\n break;\n }\n length += this.getLineLength(line);\n }\n return length;\n };\n /**\n * Get Line length\n * @private\n */\n Selection.prototype.getLineLength = function (line, elementInfo) {\n var length = 0;\n for (var i = 0; i < line.children.length; i++) {\n var element = line.children[i];\n if (element instanceof ListTextElementBox) {\n continue;\n }\n if (elementInfo && elementInfo.element instanceof ElementBox && elementInfo.element === element) {\n length += elementInfo.index;\n break;\n }\n length += element.length;\n }\n return length;\n };\n /**\n * Get line information\n * @private\n */\n Selection.prototype.getLineInfo = function (paragraph, offset) {\n var line = undefined;\n var length = 0;\n var childLength = paragraph.childWidgets.length;\n for (var j = 0; j < childLength; j++) {\n line = paragraph.childWidgets[j];\n length = this.getLineLength(line);\n if (offset <= length || j === childLength - 1) {\n break;\n }\n else {\n offset = offset - length;\n }\n }\n return { 'line': line, 'offset': offset };\n };\n /**\n * @private\n */\n Selection.prototype.getElementInfo = function (line, offset) {\n var index = 0;\n var element = undefined;\n for (var i = 0; i < line.children.length; i++) {\n element = line.children[i];\n if (element instanceof ListTextElementBox) {\n continue;\n }\n if (offset > element.length\n && (!(offset === element.length + 1 && isNullOrUndefined(element.nextNode)))) {\n offset = offset - element.length;\n }\n else {\n break;\n }\n }\n return { 'element': element, 'index': offset };\n };\n /**\n * Get paragraph start offset\n * @private\n */\n Selection.prototype.getStartOffset = function (paragraph) {\n var startOffset = 0;\n if (paragraph.childWidgets.length > 0) {\n var childWidgets = paragraph.childWidgets[0];\n return this.getStartLineOffset(childWidgets);\n }\n return startOffset;\n };\n /**\n * @private\n */\n Selection.prototype.getStartLineOffset = function (line) {\n var startOffset = 0;\n for (var i = 0; i < line.children.length; i++) {\n var inline = line.children[i];\n if (inline.length === 0) {\n continue;\n }\n if (inline instanceof TextElementBox || inline instanceof ImageElementBox || inline instanceof BookmarkElementBox\n || (inline instanceof FieldElementBox && HelperMethods.isLinkedFieldCharacter(inline))) {\n return startOffset;\n }\n if (inline instanceof ListTextElementBox) {\n continue;\n }\n startOffset += inline.length;\n }\n return startOffset;\n };\n /**\n * Get previous paragraph from selection\n * @private\n */\n Selection.prototype.getPreviousSelectionCell = function (cell) {\n if (!isNullOrUndefined(cell.previousRenderedWidget)) {\n if (!this.isForward) {\n var block = cell.previousRenderedWidget.childWidgets[0];\n if (block instanceof ParagraphWidget) {\n return block;\n }\n else {\n return this.getFirstParagraphInLastRow(block);\n }\n }\n else {\n var widgets = cell.previousRenderedWidget.childWidgets;\n var block = widgets[widgets.length - 1];\n if (block instanceof ParagraphWidget) {\n return block;\n }\n else {\n // tslint:disable-next-line:max-line-length\n return this.getPreviousParagraphSelection(block.childWidgets[block.childWidgets.length - 1]);\n }\n }\n }\n return this.getPreviousSelectionRow(cell.ownerRow);\n };\n /**\n * Get previous paragraph selection in selection\n * @private\n */\n Selection.prototype.getPreviousSelectionRow = function (row) {\n if (!isNullOrUndefined(row.previousRenderedWidget)) {\n if (!this.isForward) {\n var cell = row.previousRenderedWidget.childWidgets[0];\n var block = cell.childWidgets[0];\n return this.getFirstParagraphBlock(block);\n }\n else {\n return this.getPreviousParagraphSelection(row.previousRenderedWidget);\n }\n }\n return this.getPreviousSelectionBlock(row.ownerTable);\n };\n /**\n * @private\n */\n Selection.prototype.getNextSelectionBlock = function (block) {\n if (block.nextRenderedWidget instanceof ParagraphWidget) {\n return block.nextRenderedWidget;\n }\n else if (block.nextRenderedWidget instanceof TableWidget) {\n if (this.isEmpty || this.isForward) {\n return this.getLastParagraphInFirstRow(block.nextRenderedWidget);\n }\n else {\n return this.getNextParagraphSelection(block.nextRenderedWidget.childWidgets[0]);\n }\n }\n if (block.containerWidget instanceof TableCellWidget) {\n return this.getNextSelectionCell(block.containerWidget);\n }\n else if (block.containerWidget instanceof BodyWidget) {\n return this.getNextSelection(block.containerWidget);\n }\n return undefined;\n };\n /**\n * Get next paragraph from selected cell\n * @private\n */\n Selection.prototype.getNextSelectionCell = function (cell) {\n if (!isNullOrUndefined(cell.nextRenderedWidget)) {\n if (this.isEmpty || this.isForward) {\n // tslint:disable-next-line:max-line-length\n var block = cell.nextRenderedWidget.childWidgets[cell.nextRenderedWidget.childWidgets.length - 1];\n return this.getLastParagraphBlock(block);\n }\n else {\n //Return first paragraph in cell. \n var block = cell.nextRenderedWidget.childWidgets[0];\n if (block instanceof ParagraphWidget) {\n return block;\n }\n else {\n return this.getNextParagraphSelection(block.childWidgets[0]);\n }\n }\n }\n return this.getNextSelectionRow(cell.ownerRow);\n };\n /**\n * Get next paragraph in selection\n * @private\n */\n Selection.prototype.getNextSelectionRow = function (row) {\n if (!isNullOrUndefined(row.nextRenderedWidget)) {\n var isForwardSelection = this.isEmpty || this.isForward;\n if (isForwardSelection) {\n // tslint:disable-next-line:max-line-length\n var cell = row.nextRenderedWidget.childWidgets[row.nextRenderedWidget.childWidgets.length - 1];\n var block = cell.childWidgets[cell.childWidgets.length - 1];\n return this.getLastParagraphBlock(block);\n }\n else {\n return this.getNextParagraphSelection(row.nextRenderedWidget);\n }\n }\n return this.getNextSelectionBlock(row.ownerTable);\n };\n /**\n * Get next block with selection\n * @private\n */\n Selection.prototype.getNextSelection = function (section) {\n if (section.nextRenderedWidget instanceof BodyWidget) {\n var block = section.nextRenderedWidget.childWidgets[0];\n if (block instanceof ParagraphWidget) {\n return block;\n }\n else {\n if (this.isEmpty || this.isForward) {\n return this.getLastParagraphInFirstRow(block);\n }\n else {\n return this.getNextParagraphSelection(block.childWidgets[0]);\n }\n }\n }\n return undefined;\n };\n /**\n * @private\n */\n Selection.prototype.getNextParagraphSelection = function (row) {\n //Iterate the exact cell based on UP/Down selection length.\n var cell = row.childWidgets[0];\n if (this.start.paragraph.isInsideTable\n && row.ownerTable.contains(this.start.paragraph.associatedCell)) {\n var startCell = this.getCellInTable(row.ownerTable, this.start.paragraph.associatedCell);\n cell = this.getFirstCellInRegion(row, startCell, this.upDownSelectionLength, false);\n }\n var block = cell.childWidgets[0];\n return this.getFirstParagraphBlock(block);\n };\n /**\n * @private\n */\n Selection.prototype.getPreviousSelectionBlock = function (block) {\n if (block.previousRenderedWidget instanceof ParagraphWidget) {\n return block.previousRenderedWidget;\n }\n else if (block.previousRenderedWidget instanceof TableWidget) {\n if (!this.isForward) {\n return this.getFirstParagraphInLastRow(block.previousRenderedWidget);\n }\n else {\n // tslint:disable-next-line:max-line-length\n return this.getPreviousParagraphSelection(block.previousRenderedWidget.childWidgets[block.previousRenderedWidget.childWidgets.length - 1]);\n }\n }\n if (block.containerWidget instanceof TableCellWidget) {\n return this.getPreviousSelectionCell(block.containerWidget);\n }\n else if (block.containerWidget instanceof BodyWidget) {\n return this.getPreviousSelection(block.containerWidget);\n }\n return undefined;\n };\n /**\n * Get previous paragraph in selection\n * @private\n */\n Selection.prototype.getPreviousSelection = function (section) {\n if (section.previousRenderedWidget instanceof BodyWidget) {\n var prevBodyWidget = section.previousRenderedWidget;\n var block = prevBodyWidget.childWidgets[prevBodyWidget.childWidgets.length - 1];\n if (block instanceof ParagraphWidget) {\n return block;\n }\n else {\n if (!this.isForward) {\n return this.getFirstParagraphInLastRow(block);\n }\n else {\n var tableWidget = block;\n // tslint:disable-next-line:max-line-length\n return this.getPreviousParagraphSelection(tableWidget.childWidgets[tableWidget.childWidgets.length - 1]);\n }\n }\n }\n return undefined;\n };\n /**\n * @private\n */\n Selection.prototype.getPreviousParagraphSelection = function (row) {\n //Iterate the exact cell based on UP/Down selection length.\n var cell = row.childWidgets[row.childWidgets.length - 1];\n if (this.start.paragraph.isInsideTable\n && row.ownerTable.contains(this.start.paragraph.associatedCell)) {\n var startCell = this.getCellInTable(row.ownerTable, this.start.paragraph.associatedCell);\n cell = this.getLastCellInRegion(row, startCell, this.upDownSelectionLength, true);\n }\n var block = cell.childWidgets[cell.childWidgets.length - 1];\n return this.getLastParagraphBlock(block);\n };\n /**\n * Get last cell in the selected region\n * @private\n */\n Selection.prototype.getLastCellInRegion = function (row, startCell, selLength, isMovePrev) {\n var start = this.getCellLeft(row, startCell);\n var end = start + startCell.cellFormat.cellWidth;\n var flag = true;\n if (start <= selLength && selLength < end) {\n for (var i = row.childWidgets.length - 1; i >= 0; i--) {\n var left = this.getCellLeft(row, row.childWidgets[i]);\n if (HelperMethods.round(start, 2) <= HelperMethods.round(left, 2) &&\n HelperMethods.round(left, 2) < HelperMethods.round(end, 2)) {\n flag = false;\n return row.childWidgets[i];\n }\n }\n }\n else {\n for (var i = row.childWidgets.length - 1; i >= 0; i--) {\n var left = this.getCellLeft(row, row.childWidgets[i]);\n if (left <= selLength && left + row.childWidgets[i].cellFormat.cellWidth > selLength) {\n flag = false;\n return row.childWidgets[i];\n }\n }\n }\n if (flag) {\n if (!isNullOrUndefined(row.previousRenderedWidget) && isMovePrev) {\n return this.getLastCellInRegion(row.previousRenderedWidget, startCell, selLength, isMovePrev);\n }\n else if (!isNullOrUndefined(row.nextRenderedWidget) && !isMovePrev) {\n return this.getLastCellInRegion(row.nextRenderedWidget, startCell, selLength, isMovePrev);\n }\n }\n return row.childWidgets[row.childWidgets.length - 1];\n };\n /**\n * Get Container table\n * @private\n */\n Selection.prototype.getCellInTable = function (table, tableCell) {\n while (tableCell.ownerTable.isInsideTable) {\n if (table.equals(tableCell.ownerTable)) {\n return tableCell;\n }\n tableCell = tableCell.ownerTable.associatedCell;\n }\n return tableCell;\n };\n /**\n * Get first paragraph in last row\n * @private\n */\n Selection.prototype.getFirstParagraphInLastRow = function (table) {\n if (table.childWidgets.length > 0) {\n var lastRow = table.childWidgets[table.childWidgets.length - 1];\n var lastCell = lastRow.childWidgets[0];\n var lastBlock = lastCell.childWidgets[0];\n return this.getFirstParagraphBlock(lastBlock);\n }\n return undefined;\n };\n /**\n * Get previous valid offset\n * @private\n */\n Selection.prototype.getPreviousValidOffset = function (paragraph, offset) {\n if (offset === 0) {\n return 0;\n }\n var validOffset = 0;\n var count = 0;\n for (var i = 0; i < paragraph.childWidgets.length; i++) {\n var lineWidget = paragraph.childWidgets[i];\n for (var j = 0; j < lineWidget.children.length; j++) {\n var inline = lineWidget.children[j];\n if (inline.length === 0) {\n continue;\n }\n if (offset <= count + inline.length) {\n return offset - 1 === count ? validOffset : offset - 1;\n }\n if (inline instanceof TextElementBox || inline instanceof ImageElementBox\n || (inline instanceof FieldElementBox && HelperMethods.isLinkedFieldCharacter(inline))) {\n validOffset = count + inline.length;\n }\n count += inline.length;\n }\n }\n return offset - 1 === count ? validOffset : offset - 1;\n };\n /**\n * Get next valid offset\n * @private\n */\n Selection.prototype.getNextValidOffset = function (line, offset) {\n var count = 0;\n for (var i = 0; i < line.children.length; i++) {\n var inline = line.children[i];\n if (inline.length === 0 || inline instanceof ListTextElementBox) {\n continue;\n }\n if (offset < count + inline.length) {\n if (inline instanceof TextElementBox || inline instanceof ImageElementBox\n || (inline instanceof FieldElementBox && HelperMethods.isLinkedFieldCharacter(inline))) {\n return (offset > count ? offset : count) + 1;\n }\n }\n count += inline.length;\n }\n return offset;\n };\n /**\n * Get paragraph mark size info\n * @private\n */\n Selection.prototype.getParagraphMarkSize = function (paragraph, topMargin, bottomMargin) {\n var size = this.viewer.textHelper.getParagraphMarkSize(paragraph.characterFormat);\n var baselineOffset = size.BaselineOffset;\n var maxHeight = size.Height;\n var maxBaselineOffset = baselineOffset;\n if (paragraph instanceof ParagraphWidget) {\n // let paragraphWidget: ParagraphWidget[] = paragraph.renderedElement() as ParagraphWidget[];\n if (paragraph.childWidgets.length > 0) {\n var lineWidget = paragraph.childWidgets[0];\n }\n //Gets line spacing.\n var lineSpacing = this.viewer.layout.getLineSpacing(paragraph, maxHeight);\n var beforeSpacing = this.viewer.layout.getBeforeSpacing(paragraph);\n topMargin = maxBaselineOffset - baselineOffset;\n bottomMargin = maxHeight - maxBaselineOffset - (size.Height - baselineOffset);\n //Updates line spacing, paragraph after/ before spacing and aligns the text to base line offset.\n var lineSpacingType = paragraph.paragraphFormat.lineSpacingType;\n if (lineSpacingType === 'Multiple') {\n if (lineSpacing > maxHeight) {\n bottomMargin += lineSpacing - maxHeight;\n }\n else {\n topMargin += lineSpacing - maxHeight;\n }\n }\n else if (lineSpacingType === 'Exactly') {\n topMargin += lineSpacing - (topMargin + size.Height + bottomMargin);\n }\n else if (lineSpacing > topMargin + size.Height + bottomMargin) {\n topMargin += lineSpacing - (topMargin + size.Height + bottomMargin);\n }\n topMargin += beforeSpacing;\n bottomMargin += paragraph.paragraphFormat.afterSpacing;\n }\n return { 'width': size.Width, 'height': size.Height, 'topMargin': topMargin, 'bottomMargin': bottomMargin };\n };\n /**\n * @private\n */\n Selection.prototype.getPhysicalPositionInternal = function (line, offset, moveNextLine) {\n if (line.paragraph.isEmpty()) {\n var paragraphWidget = line.paragraph;\n var left = paragraphWidget.x;\n if (paragraphWidget.childWidgets.length > 0) {\n var lineWidget = paragraphWidget.childWidgets[0];\n left = this.getLeft(lineWidget);\n }\n var topMargin = 0;\n var bottomMargin = 0;\n var size = this.getParagraphMarkSize(line.paragraph, topMargin, bottomMargin);\n if (offset > 0) {\n left += size.width;\n }\n return new Point(left, paragraphWidget.y + topMargin);\n }\n else {\n var indexInInline = 0;\n var inlineObj = line.getInline(offset, indexInInline);\n var inline = inlineObj.element; //return indexInInline must\n indexInInline = inlineObj.index;\n // tslint:disable-next-line:max-line-length\n // if (inline.length === indexInInline && !isNullOrUndefined(inline.nextNode) && this.viewer.renderedElements.containsKey(inline) &&\n // this.viewer.renderedElements.get(inline).length > 0 && this.viewer.renderedElements.containsKey(inline.nextNode as WInline)\n // && this.viewer.renderedElements.get(inline.nextNode as WInline).length > 0 &&\n // tslint:disable-next-line:max-line-length\n // (this.viewer.renderedElements.get(inline)[this.viewer.renderedElements.get(inline).length - 1] as ElementBox).line !== (this.viewer.renderedElements.get(inline.nextNode as WInline)[0] as ElementBox).line) {\n // //Handled specifically to move the cursor at start of next line.\n // inline = inline.nextNode as WInline;\n // indexInInline = 0;\n // }\n return this.getPhysicalPositionInline(inline, indexInInline, moveNextLine);\n }\n };\n /**\n * Highlight selected content\n * @private\n */\n Selection.prototype.highlightSelectedContent = function (start, end) {\n if (start.paragraph.isInsideTable && (!end.paragraph.isInsideTable\n || (!start.paragraph.associatedCell.equals(end.paragraph.associatedCell))\n || this.isCellSelected(start.paragraph.associatedCell, start, end))) {\n this.highlightCell(start.paragraph.associatedCell, this, start, end);\n }\n else {\n var inline = undefined;\n var index = 0;\n if (!this.owner.isReadOnlyMode && start.paragraph === end.paragraph) {\n if (start.offset + 1 === end.offset) {\n var inlineObj = end.currentWidget.getInline(end.offset, index);\n inline = inlineObj.element; // return index value\n index = inlineObj.index;\n if (inline instanceof ImageElementBox) {\n var startOffset = start.currentWidget.getOffset(inline, 0);\n if (startOffset !== start.offset) {\n inline = undefined;\n }\n }\n }\n else {\n var indexInInline = 0;\n var startInlineObj = start.currentWidget.getInline(start.offset, indexInInline);\n var startInline = startInlineObj.element; //return indexInInline\n indexInInline = startInlineObj.index;\n if (indexInInline === startInline.length) {\n startInline = this.getNextRenderedElementBox(startInline, indexInInline);\n }\n var endInlineObj = end.currentWidget.getInline(end.offset, indexInInline);\n var endInline = endInlineObj.element; //return indexInInline\n indexInInline = endInlineObj.index;\n // tslint:disable-next-line:max-line-length\n if (startInline instanceof FieldElementBox && endInline instanceof FieldElementBox && !isNullOrUndefined(startInline.fieldSeparator)) {\n var fieldValue = startInline.fieldSeparator.nextNode;\n if (fieldValue instanceof ImageElementBox && fieldValue.nextNode === endInline) {\n inline = fieldValue;\n }\n }\n }\n }\n if (!this.owner.isReadOnlyMode && inline instanceof ImageElementBox && this.owner.isDocumentLoaded) {\n var elementBoxObj = this.getElementBoxInternal(inline, index);\n var elementBox = elementBoxObj.element; //return index \n index = elementBoxObj.index;\n if (this.owner.enableImageResizerMode) {\n this.owner.imageResizerModule.positionImageResizer(elementBox);\n this.owner.imageResizerModule.showImageResizer();\n }\n if (this.viewer.isTouchInput) {\n this.viewer.touchStart.style.display = 'none';\n this.viewer.touchEnd.style.display = 'none';\n }\n }\n else {\n this.highlight(start.paragraph, start, end);\n }\n }\n };\n /**\n * @private\n */\n Selection.prototype.highlight = function (paragraph, start, end) {\n var selectionStartIndex = 0;\n var selectionEndIndex = 0;\n var startElement = undefined;\n var endElement = undefined;\n var startLineWidget = undefined;\n var endLineWidget = undefined;\n //return start Element and selection start index\n var startLineObj = this.getStartLineWidget(paragraph, start, startElement, selectionStartIndex);\n startElement = startLineObj.element;\n if (isNullOrUndefined(startElement)) {\n startLineWidget = paragraph.childWidgets[0];\n }\n else {\n startLineWidget = startElement.line;\n }\n selectionStartIndex = startLineObj.index;\n var endLineObj = this.getEndLineWidget(end, endElement, selectionEndIndex);\n endElement = endLineObj.element;\n if (endElement) {\n endLineWidget = endElement.line;\n }\n else {\n endLineWidget = end.paragraph.childWidgets[end.paragraph.childWidgets.length - 1];\n }\n selectionEndIndex = endLineObj.index;\n var top = 0;\n var left = 0;\n if (!isNullOrUndefined(startLineWidget)) {\n top = this.getTop(startLineWidget);\n left = this.getLeftInternal(startLineWidget, startElement, selectionStartIndex);\n }\n if (!isNullOrUndefined(startLineWidget) && startLineWidget === endLineWidget) {\n //Selection ends in current line.\n var right = this.getLeftInternal(endLineWidget, endElement, selectionEndIndex);\n this.createHighlightBorder(startLineWidget, right - left, left, top);\n }\n else {\n if (!isNullOrUndefined(startLineWidget)) {\n var x = startLineWidget.paragraph.x;\n this.createHighlightBorder(startLineWidget, this.getWidth(startLineWidget, true) - (left - x), left, top);\n var lineIndex = startLineWidget.paragraph.childWidgets.indexOf(startLineWidget);\n //Iterates to last item of paragraph or selection end. \n this.highlightParagraph(paragraph, lineIndex + 1, endLineWidget, endElement, selectionEndIndex);\n if (paragraph.childWidgets.indexOf(end.currentWidget) !== -1) {\n return;\n }\n }\n this.highlightNextBlock(paragraph, start, end);\n }\n };\n Selection.prototype.highlightNextBlock = function (paragraph, start, end) {\n var block = paragraph.nextRenderedWidget;\n if (!isNullOrUndefined(block)) {\n if (block instanceof ParagraphWidget) {\n this.highlight(block, start, end);\n }\n else {\n this.highlightTable(block, start, end);\n }\n }\n };\n /**\n * Get start line widget\n * @private\n */\n // tslint:disable-next-line:max-line-length\n Selection.prototype.getStartLineWidget = function (paragraph, start, startElement, selectionStartIndex) {\n var offset = paragraph === start.paragraph ? start.offset : this.getStartOffset(paragraph);\n var startInlineObj = undefined;\n if (paragraph === start.paragraph) {\n startInlineObj = start.currentWidget.getInline(offset, selectionStartIndex);\n }\n else {\n startInlineObj = paragraph.firstChild.getInline(offset, selectionStartIndex);\n }\n startElement = startInlineObj.element; //return selectionStartIndex\n selectionStartIndex = startInlineObj.index;\n if (startElement instanceof FieldElementBox) {\n var inlineInfo = this.getRenderedInline(startElement, selectionStartIndex);\n startElement = inlineInfo.element;\n selectionStartIndex = inlineInfo.index;\n }\n if (offset === this.getParagraphLength(start.paragraph) + 1) {\n selectionStartIndex++;\n }\n return {\n 'index': selectionStartIndex, 'element': startElement\n };\n };\n /**\n * Get end line widget\n * @private\n */\n Selection.prototype.getEndLineWidget = function (end, endElement, selectionEndIndex) {\n var endInlineObj = end.currentWidget.getInline(end.offset, selectionEndIndex);\n endElement = endInlineObj.element; //return selection end index\n selectionEndIndex = endInlineObj.index;\n if (endElement instanceof FieldElementBox) {\n var inlineInfo = this.getRenderedInline(endElement, selectionEndIndex);\n endElement = inlineInfo.element;\n selectionEndIndex = inlineInfo.index;\n }\n var lineIndex = end.paragraph.childWidgets.indexOf(end.currentWidget);\n if (lineIndex === end.paragraph.childWidgets.length - 1 && end.offset === this.getLineLength(end.currentWidget) + 1) {\n selectionEndIndex = endElement ? endElement.length + 1 : 1;\n }\n return { 'index': selectionEndIndex, 'element': endElement };\n };\n /**\n * Get line widget\n * @private\n */\n Selection.prototype.getLineWidgetInternal = function (line, offset, moveToNextLine) {\n var lineWidget = undefined;\n if (line.children.length === 0 && line instanceof LineWidget) {\n lineWidget = line;\n }\n else {\n var indexInInline = 0;\n var inlineInfo = line.getInline(offset, indexInInline);\n var inline = inlineInfo.element;\n indexInInline = inlineInfo.index;\n lineWidget = inline instanceof ElementBox ? inline.line\n : this.getLineWidgetInternalInline(inline, indexInInline, moveToNextLine);\n }\n return lineWidget;\n };\n /**\n * Get last line widget\n * @private\n */\n Selection.prototype.getLineWidgetParagraph = function (offset, line) {\n var linewidget = undefined;\n if (line.children.length === 0) {\n linewidget = line;\n }\n else {\n var indexInInline = 0;\n var inlineInfo = line.getInline(offset, indexInInline);\n var inline = inlineInfo.element;\n indexInInline = inlineInfo.index;\n linewidget = this.getLineWidget(inline, indexInInline);\n }\n return linewidget;\n };\n /**\n * Highlight selected cell\n * @private\n */\n /* tslint:disable */\n // tslint:disable-next-line:max-line-length \n Selection.prototype.highlightCells = function (table, startCell, endCell) {\n var start = this.getCellLeft(startCell.ownerRow, startCell);\n var end = start + startCell.cellFormat.cellWidth;\n var endCellLeft = this.getCellLeft(endCell.ownerRow, endCell);\n var endCellRight = endCellLeft + endCell.cellFormat.cellWidth;\n if (start > endCellLeft) {\n start = endCellLeft;\n }\n if (end < endCellRight) {\n end = endCellRight;\n }\n if (start > this.upDownSelectionLength) {\n start = this.upDownSelectionLength;\n }\n if (end < this.upDownSelectionLength) {\n end = this.upDownSelectionLength;\n }\n var tableWidgetCollection = table.getSplitWidgets();\n var startTableIndex = tableWidgetCollection.indexOf(startCell.ownerRow.ownerTable);\n var endTableIndex = tableWidgetCollection.indexOf(endCell.ownerRow.ownerTable);\n if (startTableIndex === endTableIndex) {\n var count = table.childWidgets.indexOf(endCell.ownerRow);\n for (var i = table.childWidgets.indexOf(startCell.ownerRow); i <= count; i++) {\n this.highlightRow(table.childWidgets[i], start, end);\n }\n }\n else {\n var startRowIndex = 0;\n var endRowIndex = 0;\n for (var i = startTableIndex; i <= endTableIndex; i++) {\n table = tableWidgetCollection[i];\n if (i === startTableIndex) {\n startRowIndex = table.childWidgets.indexOf(startCell.ownerRow);\n }\n else {\n startRowIndex = 0;\n }\n if (i === endTableIndex) {\n endRowIndex = table.childWidgets.indexOf(endCell.ownerRow);\n }\n else {\n endRowIndex = table.childWidgets.length - 1;\n }\n for (var j = startRowIndex; j <= endRowIndex; j++) {\n this.highlightRow(table.childWidgets[j], start, end);\n }\n }\n }\n };\n /* tslint:enable */\n /**\n * highlight selected table\n * @private\n */\n Selection.prototype.highlightTable = function (table, start, end) {\n this.highlightInternal(table.childWidgets[0], start, end);\n if (!end.paragraph.isInsideTable //Selection end is outside the table cell.\n || !table.contains(end.paragraph.associatedCell)) {\n this.highlightNextBlock(table, start, end);\n }\n };\n /**\n * Get cell left\n * @private\n */\n Selection.prototype.getCellLeft = function (row, cell) {\n var left = 0;\n left += cell.x - cell.margin.left;\n return left;\n };\n /**\n * Get next paragraph for row\n * @private\n */\n Selection.prototype.getNextParagraphRow = function (row) {\n if (!isNullOrUndefined(row.nextRenderedWidget)) {\n var cell = row.nextRenderedWidget.childWidgets[0];\n var block = cell.childWidgets[0];\n return this.getFirstParagraphBlock(block);\n }\n return this.getNextParagraphBlock(row.ownerTable);\n };\n /**\n * Get previous paragraph from row\n * @private\n */\n Selection.prototype.getPreviousParagraphRow = function (row) {\n if (!isNullOrUndefined(row.previousRenderedWidget)) {\n // tslint:disable-next-line:max-line-length\n var cell = row.previousRenderedWidget.lastChild;\n var block = cell.lastChild ? cell.lastChild : (cell.previousSplitWidget).lastChild;\n return this.getLastParagraphBlock(block);\n }\n return this.getPreviousParagraphBlock(row.ownerTable);\n };\n /**\n * Return true if row contain cell\n * @private\n */\n Selection.prototype.containsRow = function (row, tableCell) {\n if (row.childWidgets.indexOf(tableCell) !== -1) {\n return true;\n }\n while (tableCell.ownerTable.isInsideTable) {\n if (row.childWidgets.indexOf(tableCell) !== -1) {\n return true;\n }\n tableCell = tableCell.ownerTable.associatedCell;\n }\n return row.childWidgets.indexOf(tableCell) !== -1;\n };\n /**\n * Highlight selected row\n * @private\n */\n Selection.prototype.highlightRow = function (row, start, end) {\n for (var i = 0; i < row.childWidgets.length; i++) {\n var left = this.getCellLeft(row, row.childWidgets[i]);\n if (HelperMethods.round(start, 2) <= HelperMethods.round(left, 2) &&\n HelperMethods.round(left, 2) < HelperMethods.round(end, 2)) {\n this.highlightCellWidget(row.childWidgets[i]);\n }\n }\n };\n /**\n * @private\n */\n // tslint:disable-next-line:max-line-length\n Selection.prototype.highlightInternal = function (row, start, end) {\n for (var i = 0; i < row.childWidgets.length; i++) {\n this.highlightCellWidget(row.childWidgets[i]);\n }\n if (end.paragraph.isInsideTable && this.containsRow(row, end.paragraph.associatedCell)) {\n return;\n }\n else if (row.nextRenderedWidget instanceof TableRowWidget) {\n this.highlightInternal(row.nextRenderedWidget, start, end);\n }\n };\n /**\n * Get last paragraph in cell\n * @private\n */\n Selection.prototype.getLastParagraph = function (cell) {\n while (cell.nextSplitWidget) {\n if (cell.nextSplitWidget.childWidgets.length > 0) {\n cell = cell.nextSplitWidget;\n }\n else {\n break;\n }\n }\n var lastBlock;\n if (cell.childWidgets.length > 0) {\n lastBlock = cell.lastChild;\n }\n else {\n lastBlock = cell.previousSplitWidget.lastChild;\n }\n return this.getLastParagraphBlock(lastBlock);\n };\n /**\n * Return true is source cell contain cell\n * @private\n */\n Selection.prototype.containsCell = function (sourceCell, cell) {\n if (sourceCell.equals(cell)) {\n return true;\n }\n while (cell.ownerTable.isInsideTable) {\n if (sourceCell.equals(cell.ownerTable.associatedCell)) {\n return true;\n }\n cell = cell.ownerTable.associatedCell;\n }\n return false;\n };\n /**\n * Return true if cell is selected\n * @private\n */\n Selection.prototype.isCellSelected = function (cell, startPosition, endPosition) {\n var lastParagraph = this.getLastParagraph(cell);\n // tslint:disable-next-line:max-line-length\n var isAtCellEnd = lastParagraph === endPosition.paragraph && endPosition.offset === this.getParagraphLength(lastParagraph) + 1;\n return isAtCellEnd || (!this.containsCell(cell, startPosition.paragraph.associatedCell) ||\n !this.containsCell(cell, endPosition.paragraph.associatedCell));\n };\n /**\n * Return Container cell\n * @private\n */\n Selection.prototype.getContainerCellOf = function (cell, tableCell) {\n while (cell.ownerTable.isInsideTable) {\n if (cell.ownerTable.contains(tableCell)) {\n return cell;\n }\n cell = cell.ownerTable.associatedCell;\n }\n return cell;\n };\n /**\n * Get Selected cell\n * @private\n */\n Selection.prototype.getSelectedCell = function (cell, containerCell) {\n if (cell.ownerTable.equals(containerCell.ownerTable)) {\n return cell;\n }\n while (cell.ownerTable.isInsideTable) {\n if (cell.ownerTable.associatedCell.equals(containerCell)) {\n return cell;\n }\n cell = cell.ownerTable.associatedCell;\n }\n return cell;\n };\n /**\n * @private\n */\n Selection.prototype.getSelectedCells = function () {\n var cells = [];\n for (var i = 0; i < this.selectedWidgets.keys.length; i++) {\n var widget = this.selectedWidgets.keys[i];\n if (widget instanceof TableCellWidget) {\n cells.push(widget);\n }\n }\n return cells;\n };\n /**\n * Get Next paragraph from cell\n * @private\n */\n Selection.prototype.getNextParagraphCell = function (cell) {\n if (cell.nextRenderedWidget && cell.nextRenderedWidget instanceof TableCellWidget) {\n //Return first paragraph in cell. \n cell = cell.nextRenderedWidget;\n var block = cell.firstChild;\n if (block) {\n return this.getFirstParagraphBlock(block);\n }\n else {\n return this.getNextParagraphCell(cell);\n }\n }\n return this.getNextParagraphRow(cell.containerWidget);\n };\n /**\n * Get previous paragraph from cell\n * @private\n */\n Selection.prototype.getPreviousParagraphCell = function (cell) {\n if (!isNullOrUndefined(cell.previousRenderedWidget) && cell.previousRenderedWidget instanceof TableCellWidget) {\n cell = cell.previousRenderedWidget;\n var block = cell.lastChild;\n return this.getLastParagraphBlock(block);\n }\n return this.getPreviousParagraphRow(cell.ownerRow);\n };\n /**\n * Get cell's container cell\n * @private\n */\n Selection.prototype.getContainerCell = function (cell) {\n while (!isNullOrUndefined(cell.ownerTable) && cell.ownerTable.isInsideTable) {\n cell = cell.ownerTable.associatedCell;\n }\n return cell;\n };\n /**\n * Highlight selected cell\n * @private\n */\n /* tslint:disable */\n Selection.prototype.highlightCell = function (cell, selection, start, end) {\n if (end.paragraph.isInsideTable) {\n var containerCell = this.getContainerCellOf(cell, end.paragraph.associatedCell);\n if (containerCell.ownerTable.contains(end.paragraph.associatedCell)) {\n var startCell = this.getSelectedCell(cell, containerCell);\n var endCell = this.getSelectedCell(end.paragraph.associatedCell, containerCell);\n if (this.containsCell(containerCell, end.paragraph.associatedCell)) {\n /* tslint:enable */\n //Selection end is in container cell.\n if (this.isCellSelected(containerCell, start, end)) {\n this.highlightCellWidget(containerCell);\n }\n else {\n if (startCell === containerCell) {\n this.highlight(start.paragraph, start, end);\n }\n else {\n this.highlightContainer(startCell, start, end);\n }\n }\n }\n else {\n //Selection end is not in container cell.\n this.highlightCellWidget(containerCell);\n if (containerCell.ownerRow.equals(endCell.ownerRow)) {\n //Highlight other selected cells in current row.\n startCell = containerCell;\n while (!isNullOrUndefined(startCell.nextRenderedWidget)) {\n startCell = startCell.nextRenderedWidget;\n this.highlightCellWidget(startCell);\n if (startCell === endCell) {\n break;\n }\n }\n }\n else {\n this.highlightCells(containerCell.ownerTable, containerCell, endCell);\n }\n }\n }\n else {\n this.highlightContainer(containerCell, start, end);\n }\n }\n else {\n var cell1 = this.getContainerCell(cell);\n this.highlightContainer(cell1, start, end);\n }\n };\n /**\n * @private\n */\n Selection.prototype.highlightContainer = function (cell, start, end) {\n this.highlightInternal(cell.containerWidget, start, end);\n this.highlightNextBlock(cell.ownerTable, start, end);\n };\n /**\n * Get previous valid element\n * @private\n */\n Selection.prototype.getPreviousValidElement = function (inline) {\n var previousValidInline = undefined;\n while (inline instanceof FieldElementBox) {\n if (HelperMethods.isLinkedFieldCharacter(inline)) {\n if (inline instanceof FieldElementBox && inline.fieldType === 0) {\n previousValidInline = inline;\n }\n else if (inline instanceof FieldElementBox && inline.fieldType === 1) {\n previousValidInline = inline;\n if (isNullOrUndefined(inline.fieldSeparator)) {\n inline = inline.fieldBegin;\n previousValidInline = inline;\n }\n }\n else {\n inline = inline.fieldBegin;\n previousValidInline = inline;\n }\n }\n inline = inline.previousNode;\n }\n return isNullOrUndefined(previousValidInline) ? inline : previousValidInline;\n };\n /**\n * Get next valid element\n * @private\n */\n Selection.prototype.getNextValidElement = function (inline) {\n var nextValidInline = undefined;\n while (inline instanceof FieldElementBox) {\n if (inline.fieldType === 0 && !isNullOrUndefined(inline.fieldEnd)) {\n return isNullOrUndefined(nextValidInline) ? inline : nextValidInline;\n }\n else if (inline.fieldType === 1 && !isNullOrUndefined(inline.fieldBegin)) {\n nextValidInline = inline;\n }\n inline = inline.nextNode;\n }\n return (isNullOrUndefined(nextValidInline) ? inline : nextValidInline);\n };\n /**\n * Return next valid inline with index\n * @private\n */\n Selection.prototype.validateTextPosition = function (inline, index) {\n if (inline.length === index && inline.nextNode instanceof FieldElementBox) {\n //If inline is last item within field, then set field end as text position.\n var nextInline = this.getNextValidElement(inline.nextNode);\n if (nextInline instanceof FieldElementBox && nextInline.fieldType === 1) {\n inline = nextInline;\n index = 1;\n }\n }\n else if (index === 0 && inline.previousNode instanceof FieldElementBox) {\n var prevInline = this.getPreviousValidElement(inline.previousNode);\n inline = prevInline;\n index = inline instanceof FieldElementBox ? 0 : inline.length;\n if (inline instanceof FieldElementBox && inline.fieldType === 1) {\n index++;\n }\n }\n return { 'element': inline, 'index': index };\n };\n /**\n * Get inline physical location\n * @private\n */\n Selection.prototype.getPhysicalPositionInline = function (inline, index, moveNextLine) {\n var element = undefined;\n element = this.getElementBox(inline, index, moveNextLine).element;\n var lineWidget = undefined;\n if (isNullOrUndefined(element) || isNullOrUndefined(element.line)) {\n if (inline instanceof FieldElementBox || inline instanceof BookmarkElementBox) {\n return this.getFieldCharacterPosition(inline);\n }\n return new Point(0, 0);\n }\n var margin = element.margin;\n var top = 0;\n var left = 0;\n if (element instanceof TextElementBox && element.text === '\\v' && isNullOrUndefined(inline.nextNode)) {\n lineWidget = this.getNextLineWidget(element.line.paragraph, element);\n index = 0;\n }\n else {\n lineWidget = element.line;\n }\n top = this.getTop(lineWidget);\n if (element instanceof ImageElementBox) {\n var format = element.line.paragraph.characterFormat;\n var previousInline = this.getPreviousTextElement(inline);\n if (!isNullOrUndefined(previousInline)) {\n format = previousInline.characterFormat;\n }\n else {\n var nextInline = this.getNextTextElement(inline);\n if (!isNullOrUndefined(nextInline)) {\n format = nextInline.characterFormat;\n }\n }\n var measureObj = this.viewer.textHelper.getHeight(format); //return ascent\n var ascent = measureObj.Height - measureObj.BaselineOffset;\n if (element.margin.top + element.height - ascent > 0) {\n top += element.margin.top + element.height - ascent;\n }\n }\n else if (!(element instanceof FieldElementBox)) {\n top += margin.top > 0 ? margin.top : 0;\n }\n left = (isNullOrUndefined(element) || isNullOrUndefined(lineWidget)) ? 0 : this.getLeftInternal(lineWidget, element, index);\n return new Point(left, top);\n };\n /**\n * Get field character position\n * @private\n */\n Selection.prototype.getFieldCharacterPosition = function (firstInline) {\n var nextValidInline = this.getNextValidElementForField(firstInline);\n //If field separator/end exists at end of paragraph, then move to next paragraph.\n if (isNullOrUndefined(nextValidInline)) {\n var nextParagraph = firstInline.line.paragraph;\n return this.getEndPosition(nextParagraph);\n }\n else {\n return this.getPhysicalPositionInline(nextValidInline, 0, true);\n }\n };\n Selection.prototype.getNextValidElementForField = function (firstInline) {\n if (firstInline instanceof FieldElementBox && firstInline.fieldType === 0\n && HelperMethods.isLinkedFieldCharacter(firstInline)) {\n var fieldBegin = firstInline;\n if (isNullOrUndefined(fieldBegin.fieldSeparator)) {\n firstInline = fieldBegin.fieldEnd;\n }\n else {\n firstInline = fieldBegin.fieldSeparator;\n }\n }\n var nextValidInline = undefined;\n if (!isNullOrUndefined(firstInline.nextNode)) {\n nextValidInline = this.getNextValidElement(firstInline.nextNode);\n }\n return nextValidInline;\n };\n /**\n * Get paragraph end position\n * @private\n */\n Selection.prototype.getEndPosition = function (widget) {\n var left = widget.x;\n var top = widget.y;\n var lineWidget = undefined;\n if (widget.childWidgets.length > 0) {\n lineWidget = widget.childWidgets[widget.childWidgets.length - 1];\n left += this.getWidth(lineWidget, false);\n }\n if (!isNullOrUndefined(lineWidget)) {\n top = this.getTop(lineWidget);\n }\n var topMargin = 0;\n var bottomMargin = 0;\n var size = this.getParagraphMarkSize(widget, topMargin, bottomMargin);\n return new Point(left, top + size.topMargin);\n };\n /**\n * Get element box\n * @private\n */\n Selection.prototype.getElementBox = function (currentInline, index, moveToNextLine) {\n var elementBox = undefined;\n if (!(currentInline instanceof FieldElementBox || currentInline instanceof BookmarkElementBox)) {\n elementBox = currentInline;\n }\n return { 'element': elementBox, 'index': index };\n };\n /**\n * @private\n */\n Selection.prototype.getPreviousTextElement = function (inline) {\n if (inline.previousNode instanceof TextElementBox) {\n return inline.previousNode;\n }\n if (!isNullOrUndefined(inline.previousNode)) {\n return this.getPreviousTextElement(inline.previousNode);\n }\n return undefined;\n };\n /**\n * Get next text inline\n * @private\n */\n Selection.prototype.getNextTextElement = function (inline) {\n if (inline.nextNode instanceof TextElementBox) {\n return inline.nextNode;\n }\n if (!isNullOrUndefined(inline.nextNode)) {\n return this.getNextTextElement(inline.nextNode);\n }\n return undefined;\n };\n /**\n * @private\n */\n Selection.prototype.getNextRenderedElementBox = function (inline, indexInInline) {\n if (inline instanceof FieldElementBox) {\n var fieldBegin = inline;\n if (fieldBegin.fieldType === 0) {\n inline = this.getRenderedField(fieldBegin);\n if (fieldBegin === inline) {\n return fieldBegin;\n }\n }\n indexInInline = 1;\n }\n while (!isNullOrUndefined(inline) && indexInInline === inline.length && inline.nextNode instanceof FieldElementBox) {\n var nextValidInline = this.getNextValidElement((inline.nextNode));\n if (nextValidInline instanceof FieldElementBox && nextValidInline.fieldType === 0) {\n var fieldBegin = nextValidInline;\n inline = this.getRenderedField(fieldBegin);\n if (!isNullOrUndefined(inline) && fieldBegin === inline) {\n return fieldBegin;\n }\n indexInInline = 1;\n }\n else {\n inline = nextValidInline;\n }\n }\n return inline;\n };\n /**\n * @private\n */\n Selection.prototype.getElementBoxInternal = function (inline, index) {\n var element = undefined;\n element = inline;\n return {\n 'element': element, 'index': index\n };\n };\n /**\n * Get Line widget\n * @private\n */\n Selection.prototype.getLineWidget = function (inline, index) {\n return this.getLineWidgetInternalInline(inline, index, true);\n };\n /**\n * @private\n */\n Selection.prototype.getLineWidgetInternalInline = function (inline, index, moveToNextLine) {\n var elementObj = this.getElementBox(inline, index, moveToNextLine);\n var element = elementObj.element; //return index\n index = elementObj.index;\n if (!isNullOrUndefined(element)) {\n if (moveToNextLine && element instanceof TextElementBox && element.text === '\\v' && index === 1) {\n return this.getNextLineWidget(element.line.paragraph, element);\n }\n else {\n return element.line;\n }\n }\n var startInline = inline;\n //ToDo: Check previous inline here.\n var nextValidInline = this.getNextValidElementForField(startInline);\n //If field separator/end exists at end of paragraph, then move to next paragraph.\n if (isNullOrUndefined(nextValidInline)) {\n var lineWidget = undefined;\n var widget = startInline.line.paragraph;\n if (widget.childWidgets.length > 0) {\n lineWidget = widget.childWidgets[widget.childWidgets.length - 1];\n }\n return lineWidget;\n }\n else {\n return this.getLineWidget(nextValidInline, 0);\n }\n };\n /**\n * Get next line widget\n * @private\n */\n Selection.prototype.getNextLineWidget = function (paragraph, element) {\n var lineWidget = undefined;\n var widget = paragraph;\n if (widget.childWidgets.length > 0) {\n var widgetIndex = widget.childWidgets.indexOf(element.line);\n if (widgetIndex === widget.childWidgets.length - 1) {\n widget = paragraph;\n // widget = paragraph.leafWidgets[paragraph.leafWidgets.length - 1];\n widgetIndex = -1;\n }\n else if (widgetIndex > widget.childWidgets.length - 1) {\n widget = this.getNextParagraphBlock(paragraph);\n widgetIndex = -1;\n }\n else if (widgetIndex < 0) {\n // widget = paragraph.leafWidgets[paragraph.leafWidgets.length - 1];\n widget = paragraph;\n widgetIndex = widget.childWidgets.indexOf(element.line);\n }\n lineWidget = widget.childWidgets[widgetIndex + 1];\n }\n return lineWidget;\n };\n /**\n * Get Caret height\n * @private\n */\n // tslint:disable-next-line:max-line-length\n Selection.prototype.getCaretHeight = function (inline, index, format, isEmptySelection, topMargin, isItalic) {\n var elementBoxInfo = this.getElementBox(inline, index, false);\n var element = elementBoxInfo.element;\n var currentInline = inline;\n if (isNullOrUndefined(element)) {\n if (currentInline instanceof FieldElementBox) {\n return this.getFieldCharacterHeight(currentInline, format, isEmptySelection, topMargin, isItalic);\n }\n return { 'height': this.viewer.textHelper.getHeight(format).Height, 'topMargin': topMargin, 'isItalic': isItalic };\n }\n var margin = element.margin;\n var heightElement = element.height;\n var maxLineHeight = 0;\n if (element instanceof ImageElementBox) {\n var previousInline = this.getPreviousTextElement(inline);\n var nextInline = this.getNextTextElement(inline);\n if (isNullOrUndefined(previousInline) && isNullOrUndefined(nextInline)) {\n var top_2 = 0;\n var bottom = 0;\n var paragarph = inline.line.paragraph;\n var sizeInfo = this.getParagraphMarkSize(paragarph, top_2, bottom);\n top_2 = sizeInfo.topMargin;\n bottom = sizeInfo.bottomMargin;\n maxLineHeight = sizeInfo.height;\n isItalic = paragarph.characterFormat.italic;\n if (!isEmptySelection) {\n maxLineHeight += paragarph.paragraphFormat.afterSpacing;\n }\n }\n else if (isNullOrUndefined(previousInline)) {\n isItalic = nextInline.characterFormat.italic;\n return this.getCaretHeight(nextInline, 0, nextInline.characterFormat, isEmptySelection, topMargin, isItalic);\n }\n else {\n if (!isNullOrUndefined(nextInline) && element instanceof ImageElementBox) {\n //Calculates the caret size using image character format.\n var textSizeInfo = this.viewer.textHelper.getHeight(element.characterFormat);\n var charHeight = textSizeInfo.Height;\n var baselineOffset = textSizeInfo.BaselineOffset;\n // tslint:disable-next-line:max-line-length\n maxLineHeight = (element.margin.top < 0 && baselineOffset > element.margin.top + element.height) ? element.margin.top + element.height + charHeight - baselineOffset : charHeight;\n if (!isEmptySelection) {\n maxLineHeight += element.margin.bottom;\n }\n }\n else {\n isItalic = previousInline.characterFormat.italic;\n // tslint:disable-next-line:max-line-length\n return this.getCaretHeight(previousInline, previousInline.length, previousInline.characterFormat, isEmptySelection, topMargin, isItalic);\n }\n }\n }\n else {\n var baselineAlignment = format.baselineAlignment;\n var elementHeight = heightElement;\n if (baselineAlignment !== 'Normal' && isEmptySelection) {\n //Set the caret height as sub/super script text height and updates the top margin for sub script text.\n elementHeight = elementHeight / 1.5;\n if (baselineAlignment === 'Subscript') {\n topMargin = heightElement - elementHeight;\n }\n }\n maxLineHeight = (margin.top < 0 ? margin.top : 0) + elementHeight;\n if (!isEmptySelection) {\n maxLineHeight += margin.bottom;\n }\n }\n if (!isEmptySelection) {\n return { 'height': maxLineHeight, 'topMargin': topMargin, 'isItalic': isItalic };\n }\n var height = this.viewer.textHelper.getHeight(format).Height;\n if (height > maxLineHeight) {\n height = maxLineHeight;\n }\n return { 'height': height, 'topMargin': topMargin, 'isItalic': isItalic };\n };\n /**\n * Get field characters height\n * @private\n */\n // tslint:disable-next-line:max-line-length\n Selection.prototype.getFieldCharacterHeight = function (startInline, format, isEmptySelection, topMargin, isItalic) {\n var nextValidInline = this.getNextValidElementForField(startInline);\n //If field separator/end exists at end of paragraph, then move to next paragraph.\n if (isNullOrUndefined(nextValidInline)) {\n var nextParagraph = startInline.line.paragraph;\n var height = this.viewer.textHelper.getParagraphMarkSize(format).Height;\n var top_3 = 0;\n var bottom = 0;\n var sizeInfo = this.getParagraphMarkSize(nextParagraph, top_3, bottom);\n var maxLineHeight = sizeInfo.height;\n top_3 = sizeInfo.topMargin;\n bottom = sizeInfo.bottomMargin;\n if (!isEmptySelection) {\n maxLineHeight += bottom;\n return { 'height': maxLineHeight, 'topMargin': topMargin, 'isItalic': isItalic };\n }\n if (height > maxLineHeight) {\n height = maxLineHeight;\n }\n return { 'height': height, 'topMargin': topMargin, 'isItalic': isItalic };\n }\n else {\n return this.getCaretHeight(nextValidInline, 0, format, isEmptySelection, topMargin, isItalic);\n }\n };\n /**\n * Get rendered inline\n * @private\n */\n //FieldCharacter\n Selection.prototype.getRenderedInline = function (inline, inlineIndex) {\n var prevInline = this.getPreviousValidElement(inline);\n while (prevInline instanceof FieldElementBox) {\n prevInline = this.getPreviousTextElement(prevInline);\n if (prevInline instanceof FieldElementBox) {\n prevInline = prevInline.previousNode;\n }\n }\n if (!isNullOrUndefined(prevInline)) {\n inlineIndex = prevInline.length;\n return { 'element': prevInline, 'index': inlineIndex };\n }\n inlineIndex = 0;\n var nextInline = this.getNextRenderedElementBox(inline, 0);\n if (nextInline instanceof FieldElementBox && nextInline.fieldType === 0) {\n nextInline = nextInline.fieldSeparator;\n nextInline = nextInline.nextNode;\n while (nextInline instanceof FieldElementBox) {\n if (nextInline instanceof FieldElementBox && nextInline.fieldType === 0\n && HelperMethods.isLinkedFieldCharacter(nextInline)) {\n if (isNullOrUndefined(nextInline.fieldSeparator)) {\n nextInline = nextInline.fieldEnd;\n }\n else {\n nextInline = nextInline.fieldSeparator;\n }\n }\n nextInline = nextInline.nextNode;\n }\n }\n return { 'element': nextInline, 'index': inlineIndex };\n };\n //Field Begin\n /**\n * Get rendered field\n * @private\n */\n Selection.prototype.getRenderedField = function (fieldBegin) {\n var inline = fieldBegin;\n if (isNullOrUndefined(fieldBegin.fieldSeparator)) {\n inline = fieldBegin.fieldEnd;\n }\n else {\n inline = fieldBegin.fieldSeparator;\n var paragraph = inline.line.paragraph;\n if (paragraph === fieldBegin.fieldEnd.line.paragraph\n && !this.hasValidInline(paragraph, inline, fieldBegin.fieldEnd)) {\n inline = fieldBegin.fieldEnd;\n }\n else {\n return inline;\n }\n }\n return inline;\n };\n /**\n * Return true is inline is tha last inline\n * @private\n */\n Selection.prototype.isLastRenderedInline = function (inline, index) {\n while (index === inline.length && inline.nextNode instanceof FieldElementBox) {\n var nextValidInline = this.getNextValidElement(inline.nextNode);\n index = 0;\n if (nextValidInline instanceof FieldElementBox && nextValidInline.fieldType === 0) {\n inline = nextValidInline;\n }\n if (inline instanceof FieldElementBox && inline.fieldType === 0 && !isNullOrUndefined(inline.fieldEnd)) {\n var fieldBegin = inline;\n if (isNullOrUndefined(fieldBegin.fieldSeparator)) {\n inline = fieldBegin.fieldEnd;\n index = 1;\n }\n else {\n inline = fieldBegin.fieldSeparator;\n var paragraph = inline.line.paragraph;\n index = 1;\n if (paragraph === fieldBegin.fieldEnd.line.paragraph\n && !this.hasValidInline(paragraph, inline, fieldBegin.fieldEnd)) {\n inline = fieldBegin.fieldEnd;\n }\n else {\n break;\n }\n }\n }\n }\n return index === inline.length && isNullOrUndefined(inline.nextNode);\n };\n /**\n * Get page\n * @private\n */\n Selection.prototype.getPage = function (widget) {\n var page = undefined;\n if (widget.containerWidget instanceof BlockContainer) {\n var bodyWidget = widget.containerWidget;\n page = widget.containerWidget.page;\n }\n else if (!isNullOrUndefined(widget.containerWidget)) {\n page = this.getPage(widget.containerWidget);\n }\n return page;\n };\n /**\n * Clear Selection highlight\n * @private\n */\n Selection.prototype.clearSelectionHighlightInSelectedWidgets = function () {\n var isNonEmptySelection = false;\n var widgets = this.selectedWidgets.keys;\n for (var i = 0; i < widgets.length; i++) {\n this.removeSelectionHighlight(widgets[i]);\n isNonEmptySelection = true;\n }\n this.selectedWidgets.clear();\n return isNonEmptySelection;\n };\n /**\n * Clear selection highlight\n * @private\n */\n Selection.prototype.clearChildSelectionHighlight = function (widget) {\n for (var i = 0; i < widget.childWidgets.length; i++) {\n if (widget.childWidgets[i] instanceof LineWidget) {\n this.clearSelectionHighlightLineWidget(widget.childWidgets[i]);\n }\n else if (widget.childWidgets[i] instanceof TableCellWidget) {\n this.clearSelectionHighlight(widget.childWidgets[i]);\n }\n else if (widget.childWidgets[i] instanceof Widget) {\n this.clearChildSelectionHighlight(widget.childWidgets[i]);\n }\n }\n };\n /**\n * Get line widget from paragraph widget\n * @private\n */\n //Body Widget\n Selection.prototype.getLineWidgetBodyWidget = function (widget, point) {\n for (var i = 0; i < widget.childWidgets.length; i++) {\n var childWidget = widget.childWidgets[i];\n if (childWidget instanceof Widget && childWidget.y <= point.y\n && (childWidget.y + childWidget.height) >= point.y) {\n if (childWidget instanceof ParagraphWidget) {\n return this.getLineWidgetParaWidget(childWidget, point);\n }\n else {\n return this.getLineWidgetTableWidget(childWidget, point);\n }\n }\n }\n var line = undefined;\n if (widget.childWidgets.length > 0) {\n var firstChild = widget.childWidgets[0];\n if (firstChild instanceof Widget && firstChild.y <= point.y) {\n if (widget.childWidgets[widget.childWidgets.length - 1] instanceof ParagraphWidget) {\n // tslint:disable-next-line:max-line-length\n line = this.getLineWidgetParaWidget(widget.childWidgets[widget.childWidgets.length - 1], point);\n }\n else {\n // tslint:disable-next-line:max-line-length\n line = this.getLineWidgetTableWidget(widget.childWidgets[widget.childWidgets.length - 1], point);\n }\n }\n else {\n var childWidget = undefined;\n if (firstChild instanceof Widget) {\n childWidget = firstChild;\n }\n if (!isNullOrUndefined(childWidget)) {\n if (childWidget instanceof ParagraphWidget) {\n line = this.getLineWidgetParaWidget(firstChild, point);\n }\n else {\n line = this.getLineWidgetTableWidget(firstChild, point);\n }\n }\n }\n }\n return line;\n };\n //ParagraphWidget\n /**\n * Get line widget from paragraph widget\n * @private\n */\n Selection.prototype.getLineWidgetParaWidget = function (widget, point) {\n var childWidgets = widget.childWidgets;\n var top = widget.y;\n for (var i = 0; i < childWidgets.length; i++) {\n if (top <= point.y\n && (top + childWidgets[i].height) >= point.y) {\n return childWidgets[i];\n }\n top += childWidgets[i].height;\n }\n var lineWidget = undefined;\n if (childWidgets.length > 0) {\n if (widget.y <= point.y) {\n lineWidget = childWidgets[childWidgets.length - 1];\n }\n else {\n lineWidget = childWidgets[0];\n }\n }\n return lineWidget;\n };\n /**\n * highlight paragraph widget\n * @private\n */\n // tslint:disable-next-line:max-line-length\n Selection.prototype.highlightParagraph = function (widget, startIndex, endLine, endElement, endIndex) {\n var top = 0;\n for (var i = startIndex; i < widget.childWidgets.length; i++) {\n var line = widget.childWidgets[i];\n if (i === startIndex) {\n top = this.getTop(line);\n }\n var left = this.getLeft(line);\n if (line === endLine) {\n //Selection ends in current line.\n var right = this.getLeftInternal(endLine, endElement, endIndex);\n this.createHighlightBorder(line, right - left, left, top);\n return;\n }\n this.createHighlightBorder(line, this.getWidth(line, true) - (left - widget.x), left, top);\n top += line.height;\n }\n };\n //Table Widget\n /**\n * Get line widget form table widget\n * @private\n */\n Selection.prototype.getLineWidgetTableWidget = function (widget, point) {\n var lineWidget = undefined;\n for (var i = 0; i < widget.childWidgets.length; i++) {\n //Removed the height condition check to handle the vertically merged cells.\n var childWidget = widget.childWidgets[i];\n if (childWidget instanceof TableRowWidget && childWidget.y <= point.y) {\n lineWidget = this.getLineWidgetRowWidget(childWidget, point);\n var cellWidget = undefined;\n if (!isNullOrUndefined(lineWidget) && lineWidget.paragraph.containerWidget instanceof TableCellWidget) {\n cellWidget = lineWidget.paragraph.containerWidget;\n }\n var cellSpacing = 0;\n var rowSpan = 0;\n if (!isNullOrUndefined(cellWidget)) {\n var tableWidget = cellWidget.ownerRow.containerWidget;\n cellSpacing = HelperMethods.convertPointToPixel(tableWidget.tableFormat.cellSpacing);\n rowSpan = cellWidget.cellFormat.rowSpan;\n }\n var leftCellSpacing = 0;\n var rightCellSpacing = 0;\n var topCellSpacing = 0;\n var bottomCellSpacing = 0;\n if (cellSpacing > 0) {\n leftCellSpacing = cellWidget.cellIndex === 0 ? cellSpacing : cellSpacing / 2;\n // tslint:disable-next-line:max-line-length\n rightCellSpacing = cellWidget.cellIndex === cellWidget.ownerRow.childWidgets.length - 1 ? cellSpacing : cellSpacing / 2;\n var rowWidget = undefined;\n if (cellWidget.containerWidget instanceof TableRowWidget) {\n rowWidget = cellWidget.containerWidget;\n }\n var tableWidget = undefined;\n if (cellWidget.containerWidget.containerWidget instanceof TableWidget) {\n tableWidget = cellWidget.containerWidget.containerWidget;\n }\n if (!isNullOrUndefined(rowWidget) && !isNullOrUndefined(tableWidget)) {\n topCellSpacing = cellWidget.ownerRow.rowIndex === 0 ? cellSpacing : cellSpacing / 2;\n if (cellWidget.ownerRow.rowIndex + rowSpan === cellWidget.ownerTable.childWidgets.length) {\n bottomCellSpacing = cellSpacing;\n }\n else {\n bottomCellSpacing = cellSpacing / 2;\n }\n }\n }\n if ((!isNullOrUndefined(lineWidget) && lineWidget.paragraph.x <= point.x\n && lineWidget.paragraph.x + lineWidget.width >= point.x\n && lineWidget.paragraph.y <= point.y && this.getTop(lineWidget) + lineWidget.height >= point.y)\n || (!isNullOrUndefined(cellWidget) && cellWidget.x - cellWidget.margin.left - leftCellSpacing <= point.x\n && cellWidget.x + cellWidget.width + cellWidget.margin.right + rightCellSpacing >= point.x\n && cellWidget.y - cellWidget.margin.top - topCellSpacing <= point.y\n && cellWidget.y + cellWidget.height + cellWidget.margin.bottom + bottomCellSpacing >= point.y)) {\n break;\n }\n }\n }\n return lineWidget;\n };\n //TableRowWidget\n /**\n * Get line widget fom row\n * @private\n */\n Selection.prototype.getLineWidgetRowWidget = function (widget, point) {\n for (var i = 0; i < widget.childWidgets.length; i++) {\n var cellSpacing = 0;\n cellSpacing = HelperMethods.convertPointToPixel(widget.ownerTable.tableFormat.cellSpacing);\n var leftCellSpacing = 0;\n var rightCellSpacing = 0;\n if (cellSpacing > 0) {\n leftCellSpacing = widget.childWidgets[i].columnIndex === 0 ? cellSpacing : cellSpacing / 2;\n // tslint:disable-next-line:max-line-length\n rightCellSpacing = widget.childWidgets[i].cellIndex === widget.childWidgets[i].ownerRow.childWidgets.length - 1 ? cellSpacing : cellSpacing / 2;\n }\n if (widget.childWidgets[i].x -\n // tslint:disable-next-line:max-line-length\n widget.childWidgets[i].margin.left - leftCellSpacing <= point.x && (widget.childWidgets[i].x +\n // tslint:disable-next-line:max-line-length\n widget.childWidgets[i].width) + widget.childWidgets[i].margin.right + rightCellSpacing >= point.x) {\n return this.getLineWidgetCellWidget(widget.childWidgets[i], point);\n }\n }\n var lineWidget = undefined;\n if (widget.childWidgets.length > 0) {\n if (widget.childWidgets[0].x <= point.x) {\n lineWidget = this.getLineWidgetCellWidget(widget.childWidgets[widget.childWidgets.length - 1], point);\n }\n else {\n lineWidget = this.getLineWidgetCellWidget(widget.childWidgets[0], point);\n }\n }\n return lineWidget;\n };\n /**\n * @private\n */\n Selection.prototype.getFirstBlock = function (cell) {\n if (cell.childWidgets.length > 0) {\n return cell.childWidgets[0];\n }\n return undefined;\n };\n //Table Cell Widget\n /**\n * Highlight selected cell widget\n * @private\n */\n Selection.prototype.highlightCellWidget = function (widget) {\n var widgets = [];\n if (widget.previousSplitWidget || widget.nextSplitWidget) {\n widgets = widget.getSplitWidgets();\n }\n else {\n widgets.push(widget);\n }\n for (var i = 0; i < widgets.length; i++) {\n widget = widgets[i];\n //Clears Selection highlight of the child widgets.\n this.clearChildSelectionHighlight(widget);\n //Highlights the entire cell.\n this.createHighlightBorderInsideTable(widget);\n }\n };\n /**\n * Clear selection highlight\n * @private\n */\n Selection.prototype.clearSelectionHighlight = function (widget) {\n if (this.selectedWidgets.containsKey(widget)) {\n this.removeSelectionHighlight(widget);\n this.selectedWidgets.remove(widget);\n }\n };\n /**\n * Get line widget from cell widget\n * @private\n */\n Selection.prototype.getLineWidgetCellWidget = function (widget, point) {\n for (var i = 0; i < widget.childWidgets.length; i++) {\n if (widget.childWidgets[i].y <= point.y\n && (widget.childWidgets[i].y + widget.childWidgets[i].height) >= point.y) {\n if (widget.childWidgets[i] instanceof ParagraphWidget) {\n return this.getLineWidgetParaWidget(widget.childWidgets[i], point);\n }\n else {\n return this.getLineWidgetTableWidget(widget.childWidgets[i], point);\n }\n }\n }\n var lineWidget = undefined;\n if (widget.childWidgets.length > 0) {\n if (widget.childWidgets[0].y <= point.y) {\n if (widget.childWidgets[widget.childWidgets.length - 1] instanceof ParagraphWidget) {\n // tslint:disable-next-line:max-line-length\n lineWidget = this.getLineWidgetParaWidget(widget.childWidgets[widget.childWidgets.length - 1], point);\n }\n else {\n lineWidget = this.getLineWidgetTableWidget(widget.childWidgets[0], point);\n }\n }\n }\n return lineWidget;\n };\n //LineWidget\n /**\n * update text position\n * @private\n */\n Selection.prototype.updateTextPosition = function (widget, point) {\n var caretPosition = point;\n var element = undefined;\n var index = 0;\n var isImageSelected = false;\n var isImageSelectedObj = this.updateTextPositionIn(widget, element, index, point, false);\n if (!isNullOrUndefined(isImageSelectedObj)) {\n element = isImageSelectedObj.element;\n index = isImageSelectedObj.index;\n caretPosition = isImageSelectedObj.caretPosition;\n isImageSelected = isImageSelectedObj.isImageSelected;\n this.isImageSelected = isImageSelected;\n }\n if (isImageSelected) {\n this.selectInternal(widget, element, index, caretPosition);\n if (index === 0) {\n this.extendForward();\n }\n else {\n this.extendBackward();\n }\n }\n else {\n this.selectInternal(widget, element, index, caretPosition);\n }\n };\n /**\n * @private\n */\n /* tslint:disable */\n Selection.prototype.updateTextPositionIn = function (widget, inline, index, caretPosition, includeParagraphMark) {\n var isImageSelected = false;\n var top = this.getTop(widget);\n var left = widget.paragraph.x;\n var elementValues = this.getFirstElement(widget, left);\n var element = elementValues.element;\n left = elementValues.left;\n if (isNullOrUndefined(element)) {\n var topMargin = 0;\n var bottomMargin = 0;\n var size = this.getParagraphMarkSize(widget.paragraph, topMargin, bottomMargin);\n topMargin = size.topMargin;\n bottomMargin = size.bottomMargin;\n var selectParaMark = this.viewer.mouseDownOffset.y >= top && this.viewer.mouseDownOffset.y < top + widget.height ? (this.viewer.mouseDownOffset.x < left + size.width) : true;\n if (selectParaMark && includeParagraphMark && caretPosition.x > left + size.width / 2) {\n left += size.width;\n if (widget.children.length > 0) {\n inline = widget.children[widget.children.length - 1];\n index = inline.length;\n }\n index++;\n }\n caretPosition = new Point(left, topMargin > 0 ? top + topMargin : top);\n }\n else {\n if (!isNullOrUndefined(element)) {\n if (caretPosition.x > left + element.margin.left) {\n for (var i = widget.children.indexOf(element); i < widget.children.length; i++) {\n element = widget.children[i];\n if (caretPosition.x < left + element.margin.left + element.width || i === widget.children.length - 1) {\n break;\n }\n left += element.margin.left + element.width;\n }\n if (caretPosition.x > left + element.margin.left + element.width) {\n //Line End\n index = element instanceof TextElementBox ? element.length : 1;\n left += element.margin.left + element.width;\n }\n else if (element instanceof TextElementBox) {\n var x = caretPosition.x - left - element.margin.left;\n left += element.margin.left;\n var prevWidth = 0;\n var charIndex = 0;\n for (var i = 1; i <= element.length; i++) {\n var width = 0;\n if (i === element.length) {\n width = element.width;\n }\n else {\n width = this.viewer.textHelper.getWidth(element.text.substr(0, i), element.characterFormat);\n }\n if (x < width || i === element.length) {\n //Updates exact left position of the caret.\n var charWidth = width - prevWidth;\n if (x - prevWidth > charWidth / 2) {\n left += width;\n charIndex = i;\n }\n else {\n left += prevWidth;\n charIndex = i - 1;\n if (i === 1 && element !== widget.children[0]) {\n var curIndex = widget.children.indexOf(element);\n if (!(widget.children[curIndex - 1] instanceof ListTextElementBox)) {\n element = widget.children[curIndex - 1];\n charIndex = element instanceof TextElementBox ? element.length : 1;\n }\n }\n }\n break;\n }\n prevWidth = width;\n }\n index = charIndex;\n }\n else {\n isImageSelected = element instanceof ImageElementBox;\n if (caretPosition.x - left - element.margin.left > element.width / 2) {\n index = 1;\n left += element.margin.left + element.width;\n }\n else if (element !== widget.children[0] && !isImageSelected) {\n var curIndex = widget.children.indexOf(element);\n if (!(widget.children[curIndex - 1] instanceof ListTextElementBox)) {\n element = widget.children[curIndex - 1];\n index = element instanceof TextElementBox ? element.length : 1;\n }\n }\n }\n if (element instanceof TextElementBox && element.text === '\\v') {\n index = 0;\n }\n }\n else {\n left += element.margin.left;\n }\n if (element instanceof TextElementBox) {\n top += element.margin.top > 0 ? element.margin.top : 0;\n }\n else {\n var textMetrics = this.viewer.textHelper.getHeight(element.characterFormat); //for ascent and descent\n var height = textMetrics.Height; //after text helper class\n var baselineOffset = textMetrics.BaselineOffset; //baseline calculation\n top += element.margin.top + element.height - baselineOffset;\n }\n inline = element;\n var inlineObj = this.validateTextPosition(inline, index);\n inline = inlineObj.element;\n index = inlineObj.index;\n var isParagraphEnd = isNullOrUndefined(inline.nextNode) && index === inline.length;\n var isLineEnd = isNullOrUndefined(inline.nextNode)\n && inline instanceof TextElementBox && inline.text === '\\v';\n if (includeParagraphMark && inline.nextNode instanceof FieldElementBox && index === inline.length) {\n isParagraphEnd = this.isLastRenderedInline(inline, index);\n }\n if (includeParagraphMark && isParagraphEnd || isLineEnd) {\n var width = 0;\n //Include width of Paragraph mark.\n if (isParagraphEnd) {\n width = this.viewer.textHelper.getParagraphMarkWidth(widget.paragraph.characterFormat);\n var selectParaMark = this.viewer.mouseDownOffset.y >= top && this.viewer.mouseDownOffset.y < top + widget.height ? (this.viewer.mouseDownOffset.x < left + width) : true;\n if (selectParaMark && caretPosition.x > left + width / 2) {\n left += width;\n index = inline.length + 1;\n }\n //Include width of line break mark.\n }\n else if (isLineEnd) {\n width = element.width;\n left += width;\n index = inline.length;\n }\n }\n caretPosition = new Point(left, top);\n }\n }\n return {\n 'element': inline,\n 'index': index,\n 'caretPosition': caretPosition,\n 'isImageSelected': isImageSelected\n };\n };\n /* tslint:enable */\n /**\n * Get text length if the line widget\n * @private\n */\n // public getTextLength(viewer: LayoutViewer, widget: LineWidget, element: ElementBox): number {\n // let length: number = 0;\n // let count: number = widget.children.indexOf(element);\n // if (widget.children.length > 0 && widget.children[0] instanceof ListTextElementBox) {\n // if (widget.children[1] instanceof ListTextElementBox) {\n // count -= 2;\n // } else {\n // count -= 1;\n // }\n // }\n // for (let i: number = 1; i < count; i++) {\n // length += widget.children[i].length;\n // }\n // return length;\n // }\n /**\n * Get Line widget left\n * @private\n */\n Selection.prototype.getLeft = function (widget) {\n var left = widget.paragraph.x;\n var paragraphFormat = widget.paragraph.paragraphFormat;\n if (this.isParagraphFirstLine(widget) && !(paragraphFormat.textAlignment === 'Right')) {\n left += HelperMethods.convertPointToPixel(paragraphFormat.firstLineIndent);\n }\n for (var i = 0; i < widget.children.length; i++) {\n var element = widget.children[i];\n if (element instanceof ListTextElementBox) {\n if (i === 0) {\n left += element.margin.left + element.width;\n }\n else {\n left += element.width;\n }\n }\n else {\n left += element.margin.left;\n break;\n }\n }\n return left;\n };\n /**\n * Get line widget top\n * @private\n */\n Selection.prototype.getTop = function (widget) {\n var top = widget.paragraph.y;\n var count = widget.paragraph.childWidgets.indexOf(widget);\n for (var i = 0; i < count; i++) {\n top += widget.paragraph.childWidgets[i].height;\n }\n return top;\n };\n /**\n * Get first element the widget\n * @private\n */\n Selection.prototype.getFirstElement = function (widget, left) {\n var firstLineIndent = 0;\n if (this.isParagraphFirstLine(widget)) {\n firstLineIndent = HelperMethods.convertPointToPixel(widget.paragraph.paragraphFormat.firstLineIndent);\n }\n left += firstLineIndent;\n var element = undefined;\n for (var i = 0; i < widget.children.length; i++) {\n element = widget.children[i];\n if (element instanceof ListTextElementBox) {\n left += element.margin.left + element.width;\n element = undefined;\n }\n else if (element instanceof FieldElementBox || element instanceof BookmarkElementBox\n || (element.nextNode instanceof FieldElementBox && (element.nextNode.fieldType === 2))) {\n element = undefined;\n }\n else {\n break;\n }\n }\n return { 'element': element, 'left': left };\n };\n /**\n * Return inline index\n * @private\n */\n //ElementBox\n Selection.prototype.getIndexInInline = function (elementBox) {\n var indexInInline = 0;\n if (elementBox instanceof TextElementBox) {\n var count = elementBox.line.children.indexOf(elementBox);\n for (var i = 0; i < count; i++) {\n var element = elementBox.line.children[i];\n if (element instanceof FieldElementBox || element instanceof ListTextElementBox) {\n continue;\n }\n indexInInline += element.length;\n }\n }\n return indexInInline;\n };\n /**\n * Return true if widget is first inline of paragraph\n * @private\n */\n Selection.prototype.isParagraphFirstLine = function (widget) {\n if (isNullOrUndefined(widget.paragraph.previousSplitWidget) &&\n widget === widget.paragraph.firstChild) {\n return true;\n }\n return false;\n };\n /**\n * @private\n */\n Selection.prototype.isParagraphLastLine = function (widget) {\n if (isNullOrUndefined(widget.paragraph.nextSplitWidget)\n && widget === widget.paragraph.lastChild) {\n return true;\n }\n return false;\n };\n /**\n * Return line widget width\n * @private\n */\n Selection.prototype.getWidth = function (widget, includeParagraphMark) {\n var width = 0;\n if (this.isParagraphFirstLine(widget)) {\n width += HelperMethods.convertPointToPixel(widget.paragraph.paragraphFormat.firstLineIndent);\n }\n for (var i = 0; i < widget.children.length; i++) {\n width += widget.children[i].margin.left + widget.children[i].width;\n }\n if (includeParagraphMark && widget.paragraph.childWidgets.indexOf(widget) === widget.paragraph.childWidgets.length - 1\n && isNullOrUndefined(widget.paragraph.nextSplitWidget)) {\n width += this.viewer.textHelper.getParagraphMarkWidth(widget.paragraph.characterFormat);\n }\n return width;\n };\n /**\n * Return line widget left\n * @private\n */\n Selection.prototype.getLeftInternal = function (widget, elementBox, index) {\n var left = widget.paragraph.x;\n if (this.isParagraphFirstLine(widget)) {\n // tslint:disable-next-line:max-line-length\n left += HelperMethods.convertPointToPixel(widget.paragraph.paragraphFormat.firstLineIndent);\n }\n var count = widget.children.indexOf(elementBox);\n if ((widget.children.length === 1 && widget.children[0] instanceof ListTextElementBox) || (widget.children.length === 2\n && widget.children[0] instanceof ListTextElementBox && widget.children[1] instanceof ListTextElementBox)) {\n count = widget.children.length;\n }\n for (var i = 0; i < count; i++) {\n var widgetInternal = widget.children[i];\n if (widgetInternal instanceof FieldElementBox) {\n continue;\n }\n if (i === 1 && widget.children[i] instanceof ListTextElementBox) {\n left += widget.children[i].width;\n }\n else {\n left += widget.children[i].margin.left + widget.children[i].width;\n }\n }\n if (!isNullOrUndefined(elementBox)) {\n left += elementBox.margin.left;\n }\n if (elementBox instanceof TextElementBox) {\n if (index === elementBox.length) {\n left += elementBox.width;\n }\n else if (index > elementBox.length) {\n // tslint:disable-next-line:max-line-length\n left += elementBox.width + this.viewer.textHelper.getParagraphMarkWidth(elementBox.line.paragraph.characterFormat);\n }\n else {\n // tslint:disable-next-line:max-line-length\n left += this.viewer.textHelper.getWidth(elementBox.text.substr(0, index), elementBox.characterFormat);\n }\n }\n else if (index > 0) {\n if (!isNullOrUndefined(elementBox) && !(elementBox instanceof ListTextElementBox)) {\n left += elementBox.width;\n if (index === 2) {\n var paragraph = elementBox.line.paragraph;\n left += this.viewer.textHelper.getParagraphMarkWidth(paragraph.characterFormat);\n }\n }\n else {\n left += this.viewer.textHelper.getParagraphMarkWidth(widget.paragraph.characterFormat);\n }\n }\n return left;\n };\n /**\n * Return line widget start offset\n * @private\n */\n Selection.prototype.getLineStartLeft = function (widget) {\n var left = widget.paragraph.x;\n if (this.isParagraphFirstLine(widget)) {\n left += HelperMethods.convertPointToPixel(widget.paragraph.paragraphFormat.firstLineIndent);\n }\n if (widget.children.length > 0) {\n left += widget.children[0].margin.left;\n }\n return left;\n };\n /**\n * Update text position\n * @private\n */\n Selection.prototype.updateTextPositionWidget = function (widget, point, textPosition, includeParagraphMark) {\n var caretPosition = point;\n var inline = undefined;\n var index = 0;\n var updatePositionObj;\n updatePositionObj = this.updateTextPositionIn(widget, inline, index, caretPosition, includeParagraphMark);\n inline = updatePositionObj.element;\n index = updatePositionObj.index;\n caretPosition = updatePositionObj.caretPosition;\n textPosition.setPositionForSelection(widget, inline, index, caretPosition);\n };\n /**\n * Clear selection highlight\n * @private\n */\n Selection.prototype.clearSelectionHighlightLineWidget = function (widget) {\n if (!isNullOrUndefined(this.owner) && this.selectedWidgets.length > 0) {\n this.clearSelectionHighlight(this);\n }\n };\n /**\n * Return first element from line widget\n * @private\n */\n Selection.prototype.getFirstElementInternal = function (widget) {\n var element = undefined;\n for (var i = 0; i < widget.children.length; i++) {\n element = widget.children[i];\n if (element instanceof ListTextElementBox) {\n element = undefined;\n }\n else {\n break;\n }\n }\n return element;\n };\n //Selection API \n /**\n * Select content between given range\n * @private\n */\n Selection.prototype.selectRange = function (startPosition, endPosition) {\n this.start.setPositionInternal(startPosition);\n this.end.setPositionInternal(endPosition);\n this.upDownSelectionLength = this.end.location.x;\n this.fireSelectionChanged(true);\n };\n /**\n * Selects current paragraph\n * @private\n */\n Selection.prototype.selectParagraph = function (paragraph, positionAtStart) {\n var line = paragraph.firstChild;\n if (positionAtStart) {\n this.start.setPosition(line, positionAtStart);\n }\n else {\n var endOffset = line.getEndOffset();\n this.start.setPositionParagraph(line, endOffset);\n }\n this.end.setPositionInternal(this.start);\n this.upDownSelectionLength = this.start.location.x;\n this.fireSelectionChanged(true);\n };\n /**\n * @private\n */\n Selection.prototype.setPositionForBlock = function (block, selectFirstBlock) {\n var position;\n if (block instanceof TableWidget) {\n if (selectFirstBlock) {\n block = this.getFirstParagraphInFirstCell(block);\n }\n else {\n block = this.getLastParagraphInLastCell(block);\n }\n }\n if (block instanceof ParagraphWidget) {\n position = new TextPosition(this.owner);\n if (selectFirstBlock) {\n position.setPosition(block.firstChild, true);\n }\n else {\n var line = block.lastChild;\n position.setPositionParagraph(line, line.getEndOffset());\n }\n }\n return position;\n };\n /**\n * Select content in given text position\n * @private\n */\n Selection.prototype.selectContent = function (textPosition, clearMultiSelection) {\n if (isNullOrUndefined(textPosition)) {\n throw new Error('textPosition is undefined.');\n }\n this.start.setPositionInternal(textPosition);\n this.end.setPositionInternal(textPosition);\n this.upDownSelectionLength = this.end.location.x;\n this.fireSelectionChanged(true);\n };\n /**\n * Select paragraph\n * @private\n */\n Selection.prototype.selectInternal = function (lineWidget, element, index, physicalLocation) {\n this.start.setPositionForSelection(lineWidget, element, index, physicalLocation);\n this.end.setPositionInternal(this.start);\n this.upDownSelectionLength = physicalLocation.x;\n this.fireSelectionChanged(true);\n };\n /**\n * @private\n */\n Selection.prototype.selects = function (lineWidget, offset, skipSelectionChange) {\n this.viewer.clearSelectionHighlight();\n this.start.setPositionForLineWidget(lineWidget, offset);\n this.end.setPositionInternal(this.start);\n if (!skipSelectionChange) {\n this.fireSelectionChanged(true);\n }\n };\n /**\n * Select content between start and end position\n * @private\n */\n Selection.prototype.selectPosition = function (startPosition, endPosition) {\n if (isNullOrUndefined(startPosition) || isNullOrUndefined(endPosition)) {\n throw new Error('TextPosition cannot be undefined');\n }\n if (isNullOrUndefined(startPosition.paragraph)\n || startPosition.offset > this.getParagraphLength(startPosition.paragraph) + 1) {\n throw new Error('Start TextPosition is not valid.');\n }\n if (isNullOrUndefined(endPosition.paragraph)\n || endPosition.offset > this.getParagraphLength(endPosition.paragraph) + 1) {\n throw new Error('End TextPosition is not valid.');\n }\n if (startPosition.isAtSamePosition(endPosition)) {\n // Select start position.\n this.selectRange(startPosition, startPosition);\n }\n else {\n // If both text position exists within same comment or outside comment, and not at same position.\n if (startPosition.isExistBefore(endPosition)) {\n // tslint:disable-next-line:max-line-length\n endPosition.validateForwardFieldSelection(startPosition.getHierarchicalIndexInternal(), endPosition.getHierarchicalIndexInternal());\n }\n else {\n // tslint:disable-next-line:max-line-length\n startPosition.validateForwardFieldSelection(endPosition.getHierarchicalIndexInternal(), startPosition.getHierarchicalIndexInternal());\n }\n this.selectRange(startPosition, endPosition);\n }\n };\n /**\n * Notify selection change event\n * @private\n */\n Selection.prototype.fireSelectionChanged = function (isSelectionChanged) {\n if (!this.isEmpty) {\n if (this.isForward) {\n this.start.updatePhysicalPosition(true);\n this.end.updatePhysicalPosition(false);\n }\n else {\n this.start.updatePhysicalPosition(false);\n this.end.updatePhysicalPosition(true);\n }\n }\n if (!this.skipFormatRetrieval) {\n this.retrieveCurrentFormatProperties();\n }\n this.viewer.clearSelectionHighlight();\n this.hideToolTip();\n if (this.owner.isLayoutEnabled && !this.owner.isShiftingEnabled) {\n this.highlightSelection(true);\n }\n if (isSelectionChanged) {\n if (this.start.paragraph.isInHeaderFooter && !this.owner.enableHeaderAndFooter) {\n this.owner.enableHeaderAndFooter = true;\n }\n else if (!this.start.paragraph.isInHeaderFooter && this.owner.enableHeaderAndFooter) {\n this.owner.enableHeaderAndFooter = false;\n }\n this.owner.fireSelectionChange();\n }\n this.viewer.updateFocus();\n };\n //Formats Retrieval\n /**\n * Retrieve all current selection format\n * @private\n */\n Selection.prototype.retrieveCurrentFormatProperties = function () {\n this.isRetrieveFormatting = true;\n var startPosition = this.start;\n var endPosition = this.end;\n if (!this.isForward) {\n startPosition = this.end;\n endPosition = this.start;\n }\n this.retrieveImageFormat(startPosition, endPosition);\n this.retrieveCharacterFormat(startPosition, endPosition);\n this.retrieveParagraphFormat(startPosition, endPosition);\n this.retrieveSectionFormat(startPosition, endPosition);\n this.retrieveTableFormat(startPosition, endPosition);\n if (!this.isImageSelected) {\n this.imageFormat.clearImageFormat();\n }\n this.isRetrieveFormatting = false;\n this.setCurrentContextType();\n };\n /**\n * @private\n */\n Selection.prototype.retrieveImageFormat = function (start, end) {\n var image;\n if (start.currentWidget === end.currentWidget && start.offset + 1 === end.offset) {\n var elementInfo = end.currentWidget.getInline(end.offset, 0);\n image = elementInfo.element;\n var index = elementInfo.index;\n if (image instanceof ImageElementBox) {\n var startOffset = start.currentWidget.getOffset(image, 0);\n if (startOffset !== start.offset) {\n image = undefined;\n }\n }\n }\n if (image instanceof ImageElementBox) {\n this.imageFormat.copyImageFormat(image);\n }\n else {\n this.imageFormat.clearImageFormat();\n }\n };\n Selection.prototype.setCurrentContextType = function () {\n var contextIsinImage = this.imageFormat.image ? true : false;\n var contextIsinTable = (isNullOrUndefined(this.tableFormat) || isNullOrUndefined(this.tableFormat.table)) ? false : true;\n var style = this.start.paragraph.paragraphFormat.baseStyle;\n if (style instanceof WParagraphStyle && style.name.toLowerCase().indexOf('toc') === 0) {\n var tocField = this.getTocFieldInternal();\n if (!isNullOrUndefined(tocField)) {\n this.contextTypeInternal = 'TableOfContents';\n return;\n }\n }\n if (this.start.paragraph.isInHeaderFooter) {\n var isInHeader = this.start.paragraph.bodyWidget.headerFooterType.indexOf('Header') !== -1;\n if (contextIsinTable) {\n if (contextIsinImage) {\n this.contextTypeInternal = isInHeader ? 'HeaderTableImage' : 'FooterTableImage';\n }\n else {\n this.contextTypeInternal = isInHeader ? 'HeaderTableText' : 'FooterTableText';\n }\n }\n else {\n if (contextIsinImage) {\n this.contextTypeInternal = isInHeader ? 'HeaderImage' : 'FooterImage';\n }\n else {\n this.contextTypeInternal = isInHeader ? 'HeaderText' : 'FooterText';\n }\n }\n }\n else {\n if (contextIsinTable) {\n this.contextTypeInternal = contextIsinImage ? 'TableImage' : 'TableText';\n }\n else {\n this.contextTypeInternal = contextIsinImage ? 'Image' : 'Text';\n }\n }\n };\n //Table Format retrieval starts\n /**\n * Retrieve selection table format\n * @private\n */\n Selection.prototype.retrieveTableFormat = function (start, end) {\n var tableAdv = this.getTable(start, end);\n if (!isNullOrUndefined(tableAdv)) {\n this.tableFormat.copyFormat(tableAdv.tableFormat);\n this.tableFormat.table = tableAdv;\n this.retrieveCellFormat(start, end);\n this.retrieveRowFormat(start, end);\n }\n else {\n //When the selection is out of table\n this.tableFormat.clearFormat();\n }\n };\n /**\n * Retrieve selection cell format\n * @private\n */\n Selection.prototype.retrieveCellFormat = function (start, end) {\n if (start.paragraph.isInsideTable && end.paragraph.isInsideTable) {\n this.cellFormat.copyFormat(start.paragraph.associatedCell.cellFormat);\n this.getCellFormat(start.paragraph.associatedCell.ownerTable, start, end);\n }\n else {\n //When the selection is out of table\n this.cellFormat.clearCellFormat();\n }\n };\n /**\n * Retrieve selection row format\n * @private\n */\n Selection.prototype.retrieveRowFormat = function (start, end) {\n if (start.paragraph.isInsideTable && end.paragraph.isInsideTable) {\n this.rowFormat.copyFormat(start.paragraph.associatedCell.ownerRow.rowFormat);\n this.getRowFormat(start.paragraph.associatedCell.ownerTable, start, end);\n }\n else {\n //When the selection is out of table\n this.rowFormat.clearRowFormat();\n }\n };\n /**\n * Get selected cell format\n * @private\n */\n Selection.prototype.getCellFormat = function (table, start, end) {\n if (start.paragraph.associatedCell.equals(end.paragraph.associatedCell)) {\n return;\n }\n var isStarted = false;\n for (var i = 0; i < table.childWidgets.length; i++) {\n var row = table.childWidgets[i];\n if (row === start.paragraph.associatedCell.ownerRow) {\n isStarted = true;\n }\n if (isStarted) {\n for (var j = 0; j < row.childWidgets.length; j++) {\n var cell = row.childWidgets[j];\n if (this.isCellSelected(cell, start, end)) {\n this.cellFormat.combineFormat(cell.cellFormat);\n }\n if (cell === end.paragraph.associatedCell) {\n this.cellFormat.combineFormat(cell.cellFormat);\n return;\n }\n }\n }\n }\n };\n /**\n * Get selected row format\n * @private\n */\n Selection.prototype.getRowFormat = function (table, start, end) {\n var tableRow = start.paragraph.associatedCell.ownerRow;\n if (tableRow === end.paragraph.associatedCell.ownerRow) {\n return;\n }\n for (var i = table.childWidgets.indexOf(tableRow) + 1; i < table.childWidgets.length; i++) {\n var tempTableRow = table.childWidgets[i];\n this.rowFormat.combineFormat(tempTableRow.rowFormat);\n if (tempTableRow === end.paragraph.associatedCell.ownerRow) {\n return;\n }\n }\n };\n /**\n * Return table with given text position\n * @private\n */\n Selection.prototype.getTable = function (startPosition, endPosition) {\n if (!isNullOrUndefined(startPosition.paragraph.associatedCell) && !isNullOrUndefined(endPosition.paragraph.associatedCell)) {\n var startTable = startPosition.paragraph.associatedCell.ownerTable;\n var endTable = startPosition.paragraph.associatedCell.ownerTable;\n if (startTable === endTable) {\n return startTable;\n }\n else {\n if (startTable.contains(startPosition.paragraph.associatedCell)) {\n return startTable;\n }\n else if (endTable.contains(startPosition.paragraph.associatedCell)) {\n return endTable;\n }\n else if (!startTable.isInsideTable || !endTable.isInsideTable) {\n return undefined;\n }\n else {\n do {\n startTable = startTable.associatedCell.ownerTable;\n if (startTable === endTable || startTable.contains(endTable.associatedCell)) {\n return startTable;\n }\n else if (endTable.contains(startTable.associatedCell)) {\n return endTable;\n }\n } while (!isNullOrUndefined(startTable.associatedCell));\n }\n }\n }\n return undefined;\n };\n Selection.prototype.getContainerWidget = function (block) {\n var bodyWidget;\n if (block.containerWidget instanceof BlockContainer) {\n bodyWidget = block.containerWidget;\n }\n else {\n bodyWidget = block.containerWidget;\n while (!(bodyWidget instanceof BlockContainer)) {\n bodyWidget = bodyWidget.containerWidget;\n }\n }\n return bodyWidget;\n };\n //Table format retrieval ends\n //Section format retrieval starts\n /**\n * Retrieve selection section format\n * @private\n */\n Selection.prototype.retrieveSectionFormat = function (start, end) {\n var startParaSection = this.getContainerWidget(start.paragraph);\n var endParaSection = this.getContainerWidget(end.paragraph);\n if (!isNullOrUndefined(startParaSection)) {\n this.sectionFormat.copyFormat(startParaSection.sectionFormat);\n var startPageIndex = this.viewer.pages.indexOf(startParaSection.page);\n var endPageIndex = this.viewer.pages.indexOf(endParaSection.page);\n for (var i = startPageIndex + 1; i <= endPageIndex; i++) {\n this.sectionFormat.combineFormat(this.viewer.pages[i].bodyWidgets[0].sectionFormat);\n }\n }\n };\n //section format retrieval ends.\n //Paragraph format retrieval implementation starts.\n /**\n * Retrieve selection paragraph format\n * @private\n */\n Selection.prototype.retrieveParagraphFormat = function (start, end) {\n this.getParagraphFormatForSelection(start.paragraph, this, start, end);\n };\n /**\n * @private\n */\n Selection.prototype.getParagraphFormatForSelection = function (paragraph, selection, start, end) {\n //Selection start in cell.\n if (start.paragraph.isInsideTable && (!end.paragraph.isInsideTable\n || start.paragraph.associatedCell !== end.paragraph.associatedCell\n || this.isCellSelected(start.paragraph.associatedCell, start, end))) {\n this.getParagraphFormatInternalInCell(start.paragraph.associatedCell, start, end);\n }\n else {\n this.getParagraphFormatInternalInParagraph(paragraph, start, end);\n }\n };\n /**\n * @private\n */\n // tslint:disable-next-line:max-line-length\n Selection.prototype.getParagraphFormatInternalInParagraph = function (paragraph, start, end) {\n if (start.paragraph === paragraph) {\n this.paragraphFormat.copyFormat(paragraph.paragraphFormat);\n }\n else {\n this.paragraphFormat.combineFormat(paragraph.paragraphFormat);\n }\n if (end.paragraph === paragraph) {\n return;\n }\n var block = this.getNextRenderedBlock(paragraph);\n if (!isNullOrUndefined(block)) {\n this.getParagraphFormatInternalInBlock(block, start, end);\n }\n };\n /**\n * @private\n */\n Selection.prototype.getParagraphFormatInternalInBlock = function (block, start, end) {\n if (block instanceof ParagraphWidget) {\n this.getParagraphFormatInternalInParagraph(block, start, end);\n }\n else {\n this.getParagraphFormatInternalInTable(block, start, end);\n }\n };\n /**\n * @private\n */\n Selection.prototype.getParagraphFormatInternalInTable = function (table, start, end) {\n for (var i = 0; i < table.childWidgets.length; i++) {\n var tableRow = table.childWidgets[i];\n for (var j = 0; j < tableRow.childWidgets.length; j++) {\n this.getParagraphFormatInCell(tableRow.childWidgets[j]);\n }\n if (end.paragraph.isInsideTable && this.containsRow(tableRow, end.paragraph.associatedCell)) {\n return;\n }\n }\n var block = this.getNextRenderedBlock(table);\n //Goto the next block.\n this.getParagraphFormatInternalInBlock(block, start, end);\n };\n /**\n * Get paragraph format in cell\n * @private\n */\n Selection.prototype.getParagraphFormatInCell = function (cell) {\n for (var i = 0; i < cell.childWidgets.length; i++) {\n this.getParagraphFormatInBlock(cell.childWidgets[i]);\n }\n };\n /**\n * @private\n */\n Selection.prototype.getParagraphFormatInBlock = function (block) {\n if (block instanceof ParagraphWidget) {\n this.getParagraphFormatInParagraph(block);\n }\n else {\n this.getParagraphFormatInTable(block);\n }\n };\n /**\n * @private\n */\n Selection.prototype.getParagraphFormatInTable = function (tableAdv) {\n for (var i = 0; i < tableAdv.childWidgets.length; i++) {\n var tableRow = tableAdv.childWidgets[i];\n for (var j = 0; j < tableRow.childWidgets.length; j++) {\n this.getParagraphFormatInCell(tableRow.childWidgets[j]);\n }\n }\n };\n /**\n * @private\n */\n Selection.prototype.getParagraphFormatInParagraph = function (paragraph) {\n this.paragraphFormat.combineFormat(paragraph.paragraphFormat);\n };\n /**\n * Get paragraph format in cell\n * @private\n */\n Selection.prototype.getParagraphFormatInternalInCell = function (cellAdv, start, end) {\n if (end.paragraph.isInsideTable) {\n var containerCell = this.getContainerCellOf(cellAdv, end.paragraph.associatedCell);\n if (containerCell.ownerTable.contains(end.paragraph.associatedCell)) {\n var startCell = this.getSelectedCell(cellAdv, containerCell);\n var endCell = this.getSelectedCell(end.paragraph.associatedCell, containerCell);\n if (this.containsCell(containerCell, end.paragraph.associatedCell)) {\n //Selection end is in container cell.\n if (this.isCellSelected(containerCell, start, end)) {\n this.getParagraphFormatInCell(containerCell);\n }\n else {\n if (startCell === containerCell) {\n this.getParagraphFormatInternalInParagraph(start.paragraph, start, end);\n }\n else {\n this.getParagraphFormatInRow(startCell.ownerRow, start, end);\n }\n }\n }\n else {\n //Format other selected cells in current table.\n this.getParaFormatForCell(containerCell.ownerTable, containerCell, endCell);\n }\n }\n else {\n this.getParagraphFormatInRow(containerCell.ownerRow, start, end);\n }\n }\n else {\n var cell = this.getContainerCell(cellAdv);\n this.getParagraphFormatInRow(cell.ownerRow, start, end);\n }\n };\n /**\n * @private\n */\n Selection.prototype.getParaFormatForCell = function (table, startCell, endCell) {\n var startCellIn = this.getCellLeft(startCell.ownerRow, startCell);\n var endCellIn = startCellIn + startCell.cellFormat.cellWidth;\n var endCellLeft = this.getCellLeft(endCell.ownerRow, endCell);\n var endCellRight = endCellLeft + endCell.cellFormat.cellWidth;\n if (startCellIn > endCellLeft) {\n startCellIn = endCellLeft;\n }\n if (endCellIn < endCellRight) {\n endCellIn = endCellRight;\n }\n if (startCellIn > this.upDownSelectionLength) {\n startCellIn = this.upDownSelectionLength;\n }\n if (startCellIn < this.upDownSelectionLength) {\n startCellIn = this.upDownSelectionLength;\n }\n var count = table.childWidgets.indexOf(endCell.ownerRow);\n for (var i = table.childWidgets.indexOf(startCell.ownerRow); i <= count; i++) {\n var tableRow = table.childWidgets[i];\n for (var j = 0; j < tableRow.childWidgets.length; j++) {\n var cell = tableRow.childWidgets[j];\n var left = this.getCellLeft(tableRow, cell);\n if (HelperMethods.round(startCellIn, 2) <= HelperMethods.round(left, 2)\n && HelperMethods.round(left, 2) < HelperMethods.round(endCellIn, 2)) {\n this.getParagraphFormatInCell(cell);\n }\n }\n }\n };\n /**\n * Get paragraph format ins row\n * @private\n */\n Selection.prototype.getParagraphFormatInRow = function (tableRow, start, end) {\n for (var i = tableRow.rowIndex; i < tableRow.ownerTable.childWidgets.length; i++) {\n var row = tableRow.ownerTable.childWidgets[i];\n for (var j = 0; j < row.childWidgets.length; j++) {\n this.getParagraphFormatInCell(row.childWidgets[j]);\n }\n if (end.paragraph.isInsideTable && this.containsRow(row, end.paragraph.associatedCell)) {\n return;\n }\n }\n var block = this.getNextRenderedBlock(tableRow.ownerTable);\n //Goto the next block.\n this.getParagraphFormatInternalInBlock(block, start, end);\n };\n // paragraph format retrieval implementation ends\n // Character format retrieval implementation starts.\n /**\n * Retrieve Selection character format\n * @private\n */\n Selection.prototype.retrieveCharacterFormat = function (start, end) {\n this.characterFormat.copyFormat(start.paragraph.characterFormat);\n if (start.paragraph === end.paragraph && start.currentWidget.isLastLine()\n && start.offset === this.getLineLength(start.currentWidget) && start.offset + 1 === end.offset) {\n return;\n }\n var para = start.paragraph;\n if (start.offset === this.getParagraphLength(para) && !this.isEmpty) {\n para = this.getNextParagraphBlock(para);\n }\n while (!isNullOrUndefined(para) && para !== end.paragraph && para.isEmpty()) {\n para = this.getNextParagraphBlock(para);\n }\n var offset = para === start.paragraph ? start.offset : 0;\n var indexInInline = 0;\n if (!isNullOrUndefined(para) && !para.isEmpty()) {\n var position = new TextPosition(this.owner);\n var elemInfo = start.currentWidget.getInline(offset, indexInInline);\n var physicalLocation = this.getPhysicalPositionInternal(start.currentWidget, offset, true);\n position.setPositionForSelection(start.currentWidget, elemInfo.element, elemInfo.index, physicalLocation);\n this.getCharacterFormatForSelection(para, this, position, end);\n }\n };\n /**\n * @private\n */\n // tslint:disable-next-line:max-line-length\n Selection.prototype.getCharacterFormatForSelection = function (paragraph, selection, startPosition, endPosition) {\n //Selection start in cell.\n if (startPosition.paragraph instanceof ParagraphWidget && startPosition.paragraph.isInsideTable\n && (!endPosition.paragraph.isInsideTable\n || startPosition.paragraph.associatedCell !== endPosition.paragraph.associatedCell\n || this.isCellSelected(startPosition.paragraph.associatedCell, startPosition, endPosition))) {\n this.getCharacterFormatInTableCell(startPosition.paragraph.associatedCell, selection, startPosition, endPosition);\n }\n else {\n this.getCharacterFormat(paragraph, startPosition, endPosition);\n }\n };\n /**\n * Get Character format\n * @private\n */\n //Format Retrieval\n Selection.prototype.getCharacterFormatForTableRow = function (tableRowAdv, start, end) {\n for (var i = tableRowAdv.rowIndex; i < tableRowAdv.ownerTable.childWidgets.length; i++) {\n var tableRow = tableRowAdv.ownerTable.childWidgets[i];\n for (var j = 0; j < tableRow.childWidgets.length; j++) {\n this.getCharacterFormatForSelectionCell(tableRow.childWidgets[j], start, end);\n }\n if (end.paragraph.isInsideTable && this.containsRow(tableRow, end.paragraph.associatedCell)) {\n return;\n }\n }\n var block = this.getNextRenderedBlock(tableRowAdv.ownerTable);\n // //Goto the next block.\n this.getCharacterFormatForBlock(block, start, end);\n };\n /**\n * Get Character format in table\n * @private\n */\n Selection.prototype.getCharacterFormatInTableCell = function (tableCell, selection, start, end) {\n if (end.paragraph.isInsideTable) {\n var containerCell = this.getContainerCellOf(tableCell, end.paragraph.associatedCell);\n if (containerCell.ownerTable.contains(end.paragraph.associatedCell)) {\n var startCell = this.getSelectedCell(tableCell, containerCell);\n var endCell = this.getSelectedCell(end.paragraph.associatedCell, containerCell);\n if (this.containsCell(containerCell, end.paragraph.associatedCell)) {\n //Selection end is in container cell.\n if (this.isCellSelected(containerCell, start, end)) {\n this.getCharacterFormatForSelectionCell(containerCell, start, end);\n }\n else {\n if (startCell === containerCell) {\n this.getCharacterFormat(start.paragraph, start, end);\n }\n else {\n this.getCharacterFormatForTableRow(startCell.ownerRow, start, end);\n }\n }\n }\n else {\n //Format other selected cells in current table.\n this.getCharacterFormatInternalInTable(containerCell.ownerTable, containerCell, endCell, start, end);\n }\n }\n else {\n this.getCharacterFormatForTableRow(containerCell.ownerRow, start, end);\n }\n }\n else {\n var cell = this.getContainerCell(tableCell);\n this.getCharacterFormatForTableRow(cell.ownerRow, start, end);\n }\n };\n /**\n * @private\n */\n // tslint:disable-next-line:max-line-length\n Selection.prototype.getCharacterFormatInternalInTable = function (table, startCell, endCell, startPosition, endPosition) {\n var startIn = this.getCellLeft(startCell.ownerRow, startCell);\n var endIn = startIn + startCell.cellFormat.cellWidth;\n var endCellLeft = this.getCellLeft(endCell.ownerRow, endCell);\n var endCellRight = endCellLeft + endCell.cellFormat.cellWidth;\n if (startIn > endCellLeft) {\n startIn = endCellLeft;\n }\n if (endIn < endCellRight) {\n endIn = endCellRight;\n }\n if (startIn > this.upDownSelectionLength) {\n startIn = this.upDownSelectionLength;\n }\n if (endIn < this.upDownSelectionLength) {\n endIn = this.upDownSelectionLength;\n }\n var count = table.childWidgets.indexOf(endCell.ownerRow);\n for (var i = table.childWidgets.indexOf(startCell.ownerRow); i <= count; i++) {\n var row = table.childWidgets[i];\n for (var j = 0; j < row.childWidgets.length; j++) {\n var cell = row.childWidgets[j];\n var left = this.getCellLeft(row, cell);\n if (HelperMethods.round(startIn, 2) <= HelperMethods.round(left, 2) &&\n HelperMethods.round(left, 2) < HelperMethods.round(endIn, 2)) {\n this.getCharacterFormatForSelectionCell(cell, startPosition, endPosition);\n }\n }\n }\n };\n /**\n * Get character format with in selection\n * @private\n */\n Selection.prototype.getCharacterFormat = function (paragraph, start, end) {\n if (paragraph !== start.paragraph && paragraph !== end.paragraph) {\n this.getCharacterFormatInternal(paragraph, this);\n return;\n }\n if (end.paragraph === paragraph && start.paragraph !== paragraph && end.offset === 0) {\n return;\n }\n var startOffset = 0;\n var length = this.getParagraphLength(paragraph);\n if (paragraph === start.paragraph) {\n startOffset = start.offset;\n //Sets selection character format. \n var isUpdated = this.setCharacterFormat(paragraph, start, end, length);\n if (isUpdated) {\n return;\n }\n }\n var startLineWidget = paragraph.childWidgets.indexOf(start.currentWidget) !== -1 ?\n paragraph.childWidgets.indexOf(start.currentWidget) : 0;\n var endLineWidget = paragraph.childWidgets.indexOf(end.currentWidget) !== -1 ?\n paragraph.childWidgets.indexOf(end.currentWidget) : paragraph.childWidgets.length - 1;\n var endOffset = end.offset;\n if (paragraph !== end.paragraph) {\n endOffset = length;\n }\n var isFieldStartSelected = false;\n for (var i = startLineWidget; i <= endLineWidget; i++) {\n var lineWidget = paragraph.childWidgets[i];\n if (i !== startLineWidget) {\n startOffset = this.getStartLineOffset(lineWidget);\n }\n if (lineWidget === end.currentWidget) {\n endOffset = end.offset;\n }\n else {\n endOffset = this.getLineLength(lineWidget);\n }\n var count = 0;\n for (var j = 0; j < lineWidget.children.length; j++) {\n var inline = lineWidget.children[j];\n if (startOffset >= count + inline.length) {\n count += inline.length;\n continue;\n }\n if (inline instanceof FieldElementBox && inline.fieldType === 0\n && HelperMethods.isLinkedFieldCharacter(inline)) {\n var nextInline = isNullOrUndefined(inline.fieldSeparator) ?\n inline.fieldEnd : inline.fieldSeparator;\n do {\n count += inline.length;\n inline = inline.nextNode;\n i++;\n } while (!isNullOrUndefined(inline) && inline !== nextInline);\n isFieldStartSelected = true;\n }\n if (inline instanceof FieldElementBox && inline.fieldType === 1\n && HelperMethods.isLinkedFieldCharacter(inline) && isFieldStartSelected) {\n var fieldInline = inline.fieldBegin;\n do {\n this.characterFormat.combineFormat(fieldInline.characterFormat);\n fieldInline = fieldInline.nextNode;\n } while (!(fieldInline instanceof FieldElementBox));\n }\n if (inline instanceof TextElementBox) {\n this.characterFormat.combineFormat(inline.characterFormat);\n }\n if (isNullOrUndefined(inline) || endOffset <= count + inline.length) {\n break;\n }\n count += inline.length;\n }\n }\n if (end.paragraph === paragraph) {\n return;\n }\n var block = this.getNextRenderedBlock(paragraph);\n if (!isNullOrUndefined(block)) {\n this.getCharacterFormatForBlock(block, start, end);\n }\n };\n Selection.prototype.setCharacterFormat = function (para, startPos, endPos, length) {\n var index = 0;\n var startOffset = startPos.offset;\n var inlineAndIndex = startPos.currentWidget.getInline(startOffset, index);\n index = inlineAndIndex.index;\n var inline = inlineAndIndex.element;\n if (isNullOrUndefined(inline)) {\n var currentLineIndex = startPos.paragraph.childWidgets.indexOf(startPos.currentWidget);\n if (startPos.currentWidget.previousLine) {\n inline = startPos.currentWidget.previousLine.children[startPos.currentWidget.previousLine.children.length - 1];\n this.characterFormat.copyFormat(inline.characterFormat);\n return true;\n }\n }\n if (startOffset < length) {\n if (this.isEmpty) {\n if (inline instanceof TextElementBox || (inline instanceof FieldElementBox\n && (inline.fieldType === 0 || inline.fieldType === 1))) {\n var previousNode = this.getPreviousTextElement(inline);\n if (startOffset === 0 && previousNode) {\n inline = previousNode;\n }\n this.characterFormat.copyFormat(inline.characterFormat);\n }\n else {\n if (!isNullOrUndefined(this.getPreviousTextElement(inline))) {\n this.characterFormat.copyFormat(this.getPreviousTextElement(inline).characterFormat);\n }\n else if (!isNullOrUndefined(this.getNextTextElement(inline))) {\n this.characterFormat.copyFormat(this.getNextTextElement(inline).characterFormat);\n }\n else {\n this.characterFormat.copyFormat(para.characterFormat);\n }\n }\n return true;\n }\n else {\n if (index === inline.length && !isNullOrUndefined(inline.nextNode)) {\n this.characterFormat.copyFormat(this.getNextValidCharacterFormat(inline));\n }\n else if (inline instanceof TextElementBox) {\n this.characterFormat.copyFormat(inline.characterFormat);\n }\n else if (inline instanceof FieldElementBox) {\n this.characterFormat.copyFormat(this.getNextValidCharacterFormatOfField(inline));\n }\n }\n }\n else {\n if (length === endPos.offset) {\n if (inline instanceof TextElementBox || inline instanceof FieldElementBox) {\n this.characterFormat.copyFormat(inline.characterFormat);\n }\n else if (!isNullOrUndefined(inline)) {\n inline = this.getPreviousTextElement(inline);\n if (!isNullOrUndefined(inline)) {\n this.characterFormat.copyFormat(inline.characterFormat);\n }\n }\n else {\n this.characterFormat.copyFormat(para.characterFormat);\n }\n return true;\n }\n }\n return false;\n };\n /**\n * @private\n */\n Selection.prototype.getCharacterFormatForBlock = function (block, start, end) {\n if (block instanceof ParagraphWidget) {\n this.getCharacterFormat(block, start, end);\n }\n else {\n this.getCharacterFormatInTable(block, start, end);\n }\n };\n /**\n * @private\n */\n Selection.prototype.getCharacterFormatInTable = function (table, start, end) {\n for (var i = 0; i < table.childWidgets.length; i++) {\n var row = table.childWidgets[i];\n for (var j = 0; j < row.childWidgets.length; j++) {\n this.getCharacterFormatForSelectionCell(row.childWidgets[j], start, end);\n }\n if (end.paragraph.isInsideTable && this.containsRow(row, end.paragraph.associatedCell)) {\n return;\n }\n }\n var blockAdv = this.getNextRenderedBlock(table);\n // //Goto the next block.\n this.getCharacterFormatForBlock(blockAdv, start, end);\n };\n /**\n * Get character format in selection\n * @private\n */\n Selection.prototype.getCharacterFormatForSelectionCell = function (cell, start, end) {\n for (var i = 0; i < cell.childWidgets.length; i++) {\n this.getCharacterFormatForBlock(cell.childWidgets[i], start, end);\n }\n };\n /**\n * @private\n */\n Selection.prototype.getCharacterFormatInternal = function (paragraph, selection) {\n for (var i = 0; i < paragraph.childWidgets.length; i++) {\n var linewidget = paragraph.childWidgets[i];\n for (var j = 0; j < linewidget.children.length; j++) {\n var element = linewidget.children[j];\n if (!(element instanceof ImageElementBox || element instanceof FieldElementBox)) {\n selection.characterFormat.combineFormat(element.characterFormat);\n }\n }\n }\n };\n /**\n * Get next valid character format from inline\n * @private\n */\n Selection.prototype.getNextValidCharacterFormat = function (inline) {\n var startInline = this.getNextTextElement(inline);\n if (isNullOrUndefined(startInline)) {\n return inline.characterFormat;\n }\n var fieldBegin = undefined;\n if (startInline instanceof FieldElementBox) {\n if (fieldBegin.fieldType === 0) {\n fieldBegin = startInline;\n }\n }\n if (isNullOrUndefined(fieldBegin)) {\n return startInline.characterFormat;\n }\n else {\n return this.getNextValidCharacterFormatOfField(fieldBegin);\n }\n };\n /**\n * Get next valid paragraph format from field\n * @private\n */\n Selection.prototype.getNextValidCharacterFormatOfField = function (fieldBegin) {\n var startInline = fieldBegin;\n if (HelperMethods.isLinkedFieldCharacter(fieldBegin)) {\n if (isNullOrUndefined(fieldBegin.fieldSeparator)) {\n startInline = fieldBegin.fieldEnd;\n }\n else {\n startInline = fieldBegin.fieldSeparator;\n }\n }\n var nextValidInline = undefined;\n if (!isNullOrUndefined(startInline.nextNode)) {\n //Check the next node is a valid and returns inline.\n nextValidInline = this.getNextValidElement(startInline.nextNode);\n }\n //If field separator/end exists at end of paragraph, then move to next paragraph.\n if (isNullOrUndefined(nextValidInline)) {\n return startInline.characterFormat;\n }\n return nextValidInline.characterFormat;\n };\n /**\n * Return true if cursor point with in selection range\n * @private\n */\n Selection.prototype.checkCursorIsInSelection = function (widget, point) {\n if (isNullOrUndefined(this.start) || this.isEmpty || isNullOrUndefined(widget)) {\n return false;\n }\n var isSelected = false;\n do {\n if (this.selectedWidgets.containsKey(widget)) {\n var top_4 = void 0;\n var left = void 0;\n if (widget instanceof LineWidget) {\n top_4 = this.owner.selection.getTop(widget);\n left = this.owner.selection.getLeft(widget);\n }\n else {\n top_4 = widget.y;\n left = widget.x;\n }\n var widgetInfo = this.selectedWidgets.get(widget);\n isSelected = widgetInfo.left <= point.x && top_4 <= point.y &&\n top_4 + widget.height >= point.y && widgetInfo.left + widgetInfo.width >= point.x;\n }\n widget = (widget instanceof LineWidget) ? widget.paragraph : widget.containerWidget;\n } while (!isNullOrUndefined(widget) && !isSelected);\n return isSelected;\n };\n /**\n * Copy paragraph for to selection paragraph format\n * @private\n */\n Selection.prototype.copySelectionParagraphFormat = function () {\n var format = new WParagraphFormat();\n this.paragraphFormat.copyToFormat(format);\n return format;\n };\n /**\n * Get hyperlink display text\n * @private\n */\n // tslint:disable-next-line\n Selection.prototype.getHyperlinkDisplayText = function (paragraph, fieldSeparator, fieldEnd, isNestedField, format) {\n var para = paragraph;\n if (para !== fieldEnd.line.paragraph) {\n isNestedField = true;\n return { displayText: '<>', 'isNestedField': isNestedField, 'format': format };\n }\n var displayText = '';\n var lineIndex = para.childWidgets.indexOf(fieldSeparator.line);\n var index = para.childWidgets[lineIndex].children.indexOf(fieldSeparator);\n for (var j = lineIndex; j < para.childWidgets.length; j++) {\n var lineWidget = para.childWidgets[j];\n if (j !== lineIndex) {\n index = -1;\n }\n for (var i = index + 1; i < lineWidget.children.length; i++) {\n var inline = lineWidget.children[i];\n if (inline === fieldEnd) {\n return { 'displayText': displayText, 'isNestedField': isNestedField, 'format': format };\n }\n if (inline instanceof TextElementBox) {\n displayText += inline.text;\n format = inline.characterFormat;\n }\n else if (inline instanceof FieldElementBox) {\n if (inline instanceof FieldElementBox && inline.fieldType === 0\n && !isNullOrUndefined(inline.fieldEnd)) {\n if (isNullOrUndefined(inline.fieldSeparator)) {\n index = lineWidget.children.indexOf(inline.fieldEnd);\n }\n else {\n index = lineWidget.children.indexOf(inline.fieldSeparator);\n }\n }\n }\n else {\n isNestedField = true;\n return { 'displayText': '<>', 'isNestedField': isNestedField, 'format': format };\n }\n }\n }\n return { 'displayText': displayText, 'isNestedField': isNestedField, 'format': format };\n };\n /**\n * Navigates hyperlink on mouse Event.\n * @private\n */\n Selection.prototype.navigateHyperLinkOnEvent = function (cursorPoint, isTouchInput) {\n var _this = this;\n var widget = this.viewer.getLineWidget(cursorPoint);\n if (!isNullOrUndefined(widget)) {\n var hyperLinkField = this.getHyperLinkFieldInCurrentSelection(widget, cursorPoint);\n //Invokes Hyperlink navigation events.\n if (!isNullOrUndefined(hyperLinkField)) {\n this.viewer.updateTextPositionForSelection(cursorPoint, 1);\n this.fireRequestNavigate(hyperLinkField);\n setTimeout(function () {\n if (_this.viewer) {\n _this.viewer.isTouchInput = isTouchInput;\n _this.viewer.updateFocus();\n _this.viewer.isTouchInput = false;\n }\n });\n }\n }\n };\n /**\n * @private\n */\n Selection.prototype.getLinkText = function (fieldBegin) {\n var hyperlink = new Hyperlink(fieldBegin, this);\n var link = hyperlink.navigationLink;\n if (hyperlink.localReference.length > 0) {\n if (hyperlink.localReference[0] === '_' && (isNullOrUndefined(link) || link.length === 0)) {\n link = 'Current Document';\n }\n else {\n link += '#' + hyperlink.localReference;\n }\n }\n hyperlink.destroy();\n return link;\n };\n /**\n * Set Hyperlink content to tool tip element\n * @private\n */\n Selection.prototype.setHyperlinkContentToToolTip = function (fieldBegin, widget, xPos) {\n if (fieldBegin) {\n if (this.owner.contextMenuModule &&\n this.owner.contextMenuModule.contextMenuInstance.element.style.display === 'block') {\n return;\n }\n if (!this.toolTipElement) {\n this.toolTipElement = createElement('div', { className: 'e-de-tooltip' });\n this.viewer.viewerContainer.appendChild(this.toolTipElement);\n }\n this.toolTipElement.style.display = 'block';\n var l10n = new L10n('documenteditor', this.owner.defaultLocale);\n l10n.setLocale(this.owner.locale);\n var toolTipText = l10n.getConstant('Click to follow link');\n if (this.owner.useCtrlClickToFollowHyperlink) {\n toolTipText = 'Ctrl+' + toolTipText;\n }\n var linkText = this.getLinkText(fieldBegin);\n this.toolTipElement.innerHTML = linkText + '' + toolTipText + '';\n var widgetTop = this.getTop(widget) * this.viewer.zoomFactor;\n var page = this.getPage(widget.paragraph);\n var containerWidth = this.viewer.viewerContainer.getBoundingClientRect().width + this.viewer.viewerContainer.scrollLeft;\n var left = page.boundingRectangle.x + xPos * this.viewer.zoomFactor;\n if ((left + this.toolTipElement.clientWidth + 10) > containerWidth) {\n left = left - ((this.toolTipElement.clientWidth - (containerWidth - left)) + 15);\n }\n var top_5 = this.getPageTop(page) + (widgetTop - this.toolTipElement.offsetHeight);\n top_5 = top_5 > this.viewer.viewerContainer.scrollTop ? top_5 : top_5 + widget.height + this.toolTipElement.offsetHeight;\n this.showToolTip(left, top_5);\n if (!isNullOrUndefined(this.toolTipField) && fieldBegin !== this.toolTipField) {\n this.toolTipObject.position = { X: left, Y: top_5 };\n }\n this.toolTipObject.show();\n this.toolTipField = fieldBegin;\n }\n else {\n this.hideToolTip();\n }\n };\n /**\n * Show hyperlink tooltip\n * @private\n */\n Selection.prototype.showToolTip = function (x, y) {\n if (!this.toolTipObject) {\n this.toolTipObject = new Popup(this.toolTipElement, {\n height: 'auto',\n width: 'auto',\n relateTo: this.viewer.viewerContainer.parentElement,\n position: { X: x, Y: y }\n });\n }\n };\n /**\n * Hide tooltip object\n * @private\n */\n Selection.prototype.hideToolTip = function () {\n this.toolTipField = undefined;\n if (this.toolTipObject) {\n this.toolTipObject.hide();\n this.toolTipObject.destroy();\n this.toolTipObject = undefined;\n this.toolTipElement.style.display = 'none';\n }\n };\n /**\n * Return hyperlink field\n * @private\n */\n Selection.prototype.getHyperLinkFieldInCurrentSelection = function (widget, cursorPosition) {\n var inline = undefined;\n var top = this.getTop(widget);\n var lineStartLeft = this.getLineStartLeft(widget);\n if (cursorPosition.y < top || cursorPosition.y > top + widget.height\n || cursorPosition.x < lineStartLeft || cursorPosition.x > lineStartLeft + widget.paragraph.width) {\n return undefined;\n }\n var left = widget.paragraph.x;\n var elementValues = this.getFirstElement(widget, left);\n left = elementValues.left;\n var element = elementValues.element;\n if (isNullOrUndefined(element)) {\n var width = this.viewer.textHelper.getParagraphMarkWidth(widget.paragraph.characterFormat);\n if (cursorPosition.x <= lineStartLeft + width || cursorPosition.x >= lineStartLeft + width) {\n //Check if paragraph is within a field result.\n var checkedFields = [];\n var field = this.getHyperLinkFields(widget.paragraph, checkedFields);\n checkedFields = [];\n checkedFields = undefined;\n return field;\n }\n }\n else {\n if (cursorPosition.x > left + element.margin.left) {\n for (var i = widget.children.indexOf(element); i < widget.children.length; i++) {\n element = widget.children[i];\n if (cursorPosition.x < left + element.margin.left + element.width || i === widget.children.length - 1) {\n break;\n }\n left += element.margin.left + element.width;\n }\n }\n inline = element;\n var width = element.margin.left + element.width;\n if (isNullOrUndefined(inline.nextNode)) {\n //Include width of Paragraph mark.\n width += this.viewer.textHelper.getParagraphMarkWidth(inline.line.paragraph.characterFormat);\n }\n if (cursorPosition.x <= left + width) {\n //Check if inline is within a field result.\n var checkedFields = [];\n var field = this.getHyperLinkFieldInternal(inline.line.paragraph, inline, checkedFields);\n checkedFields = [];\n checkedFields = undefined;\n return field;\n }\n }\n return undefined;\n };\n /**\n * Return field if paragraph contain hyperlink field\n * @private\n */\n Selection.prototype.getHyperlinkField = function () {\n if (isNullOrUndefined(this.end)) {\n return undefined;\n }\n var index = 0;\n var currentInline = this.end.currentWidget.getInline(this.end.offset, index);\n index = currentInline.index;\n var inline = currentInline.element;\n var checkedFields = [];\n var field = undefined;\n if (isNullOrUndefined(inline)) {\n field = this.getHyperLinkFields(this.end.paragraph, checkedFields);\n }\n else {\n var paragraph = inline.line.paragraph;\n field = this.getHyperLinkFieldInternal(paragraph, inline, checkedFields);\n }\n checkedFields = [];\n return field;\n };\n /**\n * @private\n */\n Selection.prototype.getHyperLinkFields = function (paragraph, checkedFields) {\n for (var i = 0; i < this.viewer.fields.length; i++) {\n if (checkedFields.indexOf(this.viewer.fields[i]) !== -1 || isNullOrUndefined(this.viewer.fields[i].fieldSeparator)) {\n continue;\n }\n else {\n checkedFields.push(this.viewer.fields[i]);\n }\n var field = this.getFieldCode(this.viewer.fields[i]);\n field = field.trim().toLowerCase();\n if (field.match('hyperlink ') && this.paragraphIsInFieldResult(this.viewer.fields[i], paragraph)) {\n return this.viewer.fields[i];\n }\n }\n // if (paragraph.containerWidget instanceof BodyWidget && !(paragraph instanceof WHeaderFooter)) {\n // return this.getHyperLinkFields((paragraph.con as WCompositeNode), checkedFields);\n // }\n return undefined;\n };\n /**\n * @private\n */\n Selection.prototype.getHyperLinkFieldInternal = function (paragraph, inline, fields) {\n for (var i = 0; i < this.viewer.fields.length; i++) {\n if (fields.indexOf(this.viewer.fields[i]) !== -1 || isNullOrUndefined(this.viewer.fields[i].fieldSeparator)) {\n continue;\n }\n else {\n fields.push(this.viewer.fields[i]);\n }\n var fieldCode = this.getFieldCode(this.viewer.fields[i]);\n fieldCode = fieldCode.trim().toLowerCase();\n if (fieldCode.match('hyperlink ') && (this.inlineIsInFieldResult(this.viewer.fields[i], inline) || this.isImageField())) {\n return this.viewer.fields[i];\n }\n }\n if (paragraph.containerWidget instanceof BodyWidget && !(paragraph instanceof HeaderFooterWidget)) {\n return this.getHyperLinkFieldInternal(paragraph.containerWidget, inline, fields);\n }\n return undefined;\n };\n /**\n * @private\n */\n Selection.prototype.getBlock = function (currentIndex) {\n if (currentIndex === '' || isNullOrUndefined(currentIndex)) {\n return undefined;\n }\n var index = { index: currentIndex };\n var page = this.start.getPage(index);\n var bodyIndex = index.index.indexOf(';');\n var value = index.index.substring(0, bodyIndex);\n index.index = index.index.substring(bodyIndex).replace(';', '');\n var bodyWidget = page.bodyWidgets[parseInt(value, 10)];\n return this.getBlockInternal(bodyWidget, index.index);\n };\n /**\n * Return Block relative to position\n * @private\n */\n Selection.prototype.getBlockInternal = function (widget, position) {\n if (position === '' || isNullOrUndefined(position)) {\n return undefined;\n }\n var index = position.indexOf(';');\n var value = position.substring(0, index);\n position = position.substring(index).replace(';', '');\n var node = widget;\n // if (node instanceof Widget && value === 'HF') {\n // //Gets the block in Header footers.\n // let blockObj: BlockInfo = this.getBlock((node as WSection).headersFooters, position);\n // tslint:disable-next-line:max-line-length\n // return { 'node': (!isNullOrUndefined(blockObj)) ? blockObj.node : undefined, 'position': (!isNullOrUndefined(blockObj)) ? blockObj.position : undefined };\n // }\n index = parseInt(value, 10);\n if (index >= 0 && index < widget.childWidgets.length) {\n var child = widget.childWidgets[(index)];\n if (position.indexOf(';') >= 0) {\n if (child instanceof ParagraphWidget) {\n if (position.indexOf(';') >= 0) {\n position = '0';\n }\n return child;\n }\n if (child instanceof BlockWidget) {\n var blockObj = this.getBlockInternal(child, position);\n return blockObj;\n }\n }\n else {\n return child;\n }\n }\n else {\n return node;\n }\n return node;\n };\n /**\n * Return true if inline is in field result\n * @private\n */\n Selection.prototype.inlineIsInFieldResult = function (fieldBegin, inline) {\n if (!isNullOrUndefined(fieldBegin.fieldEnd) && !isNullOrUndefined(fieldBegin.fieldSeparator)) {\n if (this.isExistBeforeInline(fieldBegin.fieldSeparator, inline)) {\n return this.isExistAfterInline(fieldBegin.fieldEnd, inline);\n }\n }\n return false;\n };\n /**\n * Retrieve true if paragraph is in field result\n * @private\n */\n Selection.prototype.paragraphIsInFieldResult = function (fieldBegin, paragraph) {\n if (!isNullOrUndefined(fieldBegin.fieldEnd) && !isNullOrUndefined(fieldBegin.fieldSeparator)) {\n var fieldParagraph = fieldBegin.fieldSeparator.line.paragraph;\n if (fieldBegin.fieldSeparator.line.paragraph === paragraph\n || this.isExistBefore(fieldParagraph, paragraph)) {\n var currentParagraph = fieldBegin.fieldEnd.line.paragraph;\n return (currentParagraph !== paragraph && this.isExistAfter(fieldParagraph, paragraph));\n }\n }\n return false;\n };\n /**\n * Return true if image is In field\n * @private\n */\n Selection.prototype.isImageField = function () {\n if (this.start.paragraph.isEmpty() || this.end.paragraph.isEmpty()) {\n return false;\n }\n var startPosition = this.start;\n var endPosition = this.end;\n if (!this.isForward) {\n startPosition = this.end;\n endPosition = this.start;\n }\n var indexInInline = 0;\n var inlineInfo = startPosition.paragraph.getInline(startPosition.offset, indexInInline);\n var inline = inlineInfo.element;\n indexInInline = inlineInfo.index;\n if (indexInInline === inline.length) {\n inline = this.getNextRenderedElementBox(inline, indexInInline);\n }\n inlineInfo = endPosition.paragraph.getInline(endPosition.offset, indexInInline);\n var endInline = inlineInfo.element;\n indexInInline = inlineInfo.index;\n if (inline instanceof FieldElementBox && inline.fieldType === 0\n && endInline instanceof FieldElementBox && endInline.fieldType === 1 && inline.fieldSeparator) {\n var fieldValue = inline.fieldSeparator.nextNode;\n if (fieldValue instanceof ImageElementBox && fieldValue.nextNode === endInline) {\n return true;\n }\n }\n return false;\n };\n /**\n * Select List Text\n * @private\n */\n Selection.prototype.selectListText = function () {\n var lineWidget = this.viewer.selectionLineWidget;\n var endOffset = '0';\n var selectionIndex = lineWidget.getHierarchicalIndex(endOffset);\n var startPosition = this.getTextPosition(selectionIndex);\n var endPosition = this.getTextPosition(selectionIndex);\n this.selectRange(startPosition, endPosition);\n this.highlightListText(this.viewer.selectionLineWidget);\n this.contextTypeInternal = 'List';\n };\n /**\n * Manually select the list text\n * @private\n */\n Selection.prototype.highlightListText = function (linewidget) {\n var width = linewidget.children[0].width;\n var left = this.viewer.getLeftValue(linewidget);\n var top = linewidget.paragraph.y;\n this.createHighlightBorder(linewidget, width, left, top);\n this.viewer.isListTextSelected = true;\n };\n /**\n * @private\n */\n Selection.prototype.updateImageSize = function (imageFormat) {\n this.owner.isShiftingEnabled = true;\n var startPosition = this.start;\n var endPosition = this.end;\n if (!this.isForward) {\n startPosition = this.end;\n endPosition = this.start;\n }\n var inline = null;\n var index = 0;\n var paragraph = startPosition.paragraph;\n if (paragraph === endPosition.paragraph\n && startPosition.offset + 1 === endPosition.offset) {\n var inlineObj = paragraph.getInline(endPosition.offset, index);\n inline = inlineObj.element;\n index = inlineObj.index;\n }\n if (inline instanceof ImageElementBox) {\n var width = inline.width;\n var height = inline.height;\n inline.width = imageFormat.width;\n inline.height = imageFormat.height;\n imageFormat.width = width;\n imageFormat.height = height;\n if (paragraph != null && paragraph.containerWidget != null && this.owner.editorModule) {\n var lineIndex = paragraph.childWidgets.indexOf(inline.line);\n var elementIndex = inline.line.children.indexOf(inline);\n this.viewer.layout.reLayoutParagraph(paragraph, lineIndex, elementIndex);\n this.highlightSelection(false);\n }\n }\n };\n /**\n * Gets selected table content\n * @private\n */\n Selection.prototype.getSelectedCellsInTable = function (table, startCell, endCell) {\n var startColumnIndex = startCell.columnIndex;\n var endColumnIndex = endCell.columnIndex + endCell.cellFormat.columnSpan - 1;\n var startRowindex = startCell.ownerRow.index;\n var endRowIndex = endCell.ownerRow.index;\n var cells = [];\n for (var i = 0; i < table.childWidgets.length; i++) {\n var row = table.childWidgets[i];\n if (row.index >= startRowindex && row.index <= endRowIndex) {\n for (var j = 0; j < row.childWidgets.length; j++) {\n var cell = row.childWidgets[j];\n if (cell.columnIndex >= startColumnIndex && cell.columnIndex <= endColumnIndex) {\n cells.push(cell);\n }\n }\n }\n if (row.index > endRowIndex) {\n break;\n }\n }\n return cells;\n // return html;\n };\n /**\n * Copies the selected content to clipboard.\n */\n Selection.prototype.copy = function () {\n if (this.isEmpty) {\n return;\n }\n this.copySelectedContent(false);\n };\n /**\n * @private\n */\n Selection.prototype.copySelectedContent = function (isCut) {\n /* tslint:disable:no-any */\n var startPosition = this.start;\n var endPosition = this.end;\n if (!this.isForward) {\n startPosition = this.end;\n endPosition = this.start;\n }\n // tslint:disable-next-line:max-line-length\n var document = this.owner.sfdtExportModule.write(startPosition.currentWidget, startPosition.offset, endPosition.currentWidget, endPosition.offset, true);\n /* tslint:enable:no-any */\n if (this.owner.editorModule) {\n this.owner.editorModule.copiedData = JSON.stringify(document);\n }\n var html = this.htmlWriter.writeHtml(document);\n this.copyToClipboard(html);\n if (isCut) {\n this.owner.editorModule.handleCut(this);\n }\n this.viewer.updateFocus();\n };\n /**\n * Copy content to clipboard\n * @private\n */\n Selection.prototype.copyToClipboard = function (htmlContent) {\n window.getSelection().removeAllRanges();\n var div = document.createElement('div');\n div.style.left = '-10000px';\n div.style.top = '-10000px';\n div.innerHTML = htmlContent;\n document.body.appendChild(div);\n var range = document.createRange();\n range.selectNodeContents(div);\n window.getSelection().addRange(range);\n var copySuccess = false;\n try {\n copySuccess = document.execCommand('copy');\n }\n catch (e) {\n // Copying data to Clipboard can potentially fail - for example, if another application is holding Clipboard open.\n }\n finally {\n window.getSelection().removeAllRanges();\n div.parentNode.removeChild(div);\n this.viewer.viewerContainer.focus();\n }\n return copySuccess;\n };\n // Caret implementation starts\n /**\n * Shows caret in current selection position.\n * @private\n */\n Selection.prototype.showCaret = function () {\n // tslint:disable-next-line:max-line-length\n var page = !isNullOrUndefined(this.viewer.currentPage) ? this.viewer.currentPage : this.viewer.currentRenderingPage;\n if (isNullOrUndefined(page) || this.viewer.isRowOrCellResizing || this.owner.enableImageResizerMode && this.owner.imageResizerModule.isImageResizerVisible) {\n return;\n }\n var left = page.boundingRectangle.x;\n var right = page.boundingRectangle.width * this.viewer.zoomFactor + left;\n if (!this.owner.enableImageResizerMode || !this.owner.imageResizerModule.isImageResizerVisible) {\n // tslint:disable-next-line:max-line-length\n if (this.isEmpty && (!this.owner.isReadOnlyMode || this.owner.enableCursorOnReadOnly)) {\n var caretLeft = parseInt(this.caret.style.left.replace('px', ''), 10);\n if (caretLeft < left || caretLeft > right) {\n this.caret.style.display = 'none';\n }\n else {\n this.caret.style.display = 'block';\n }\n }\n else if (this.isImageSelected && !this.owner.enableImageResizerMode) {\n this.caret.style.display = 'block';\n }\n else {\n if (this.caret.style.display === 'block' || isNullOrUndefined(this)) {\n this.caret.style.display = 'none';\n }\n }\n }\n if (!isNullOrUndefined(this) && this.viewer.isTouchInput && !this.owner.isReadOnlyMode) {\n var caretStartLeft = parseInt(this.viewer.touchStart.style.left.replace('px', ''), 10) + 14;\n var caretEndLeft = parseInt(this.viewer.touchEnd.style.left.replace('px', ''), 10) + 14;\n var page_1 = this.getSelectionPage(this.start);\n if (page_1) {\n if (caretEndLeft < left || caretEndLeft > right) {\n this.viewer.touchEnd.style.display = 'none';\n }\n else {\n this.viewer.touchEnd.style.display = 'block';\n }\n if (!this.isEmpty) {\n left = page_1.boundingRectangle.x;\n right = page_1.boundingRectangle.width * this.viewer.zoomFactor + left;\n }\n if (caretStartLeft < left || caretStartLeft > right) {\n this.viewer.touchStart.style.display = 'none';\n }\n else {\n this.viewer.touchStart.style.display = 'block';\n }\n }\n }\n else {\n this.viewer.touchStart.style.display = 'none';\n this.viewer.touchEnd.style.display = 'none';\n }\n };\n /**\n * To set the editable div caret position\n * @private\n */\n Selection.prototype.setEditableDivCaretPosition = function (index) {\n this.viewer.editableDiv.focus();\n var child = this.viewer.editableDiv.childNodes[this.viewer.editableDiv.childNodes.length - 1];\n if (child) {\n var range = document.createRange();\n range.setStart(child, index);\n range.collapse(true);\n window.getSelection().removeAllRanges();\n window.getSelection().addRange(range);\n }\n };\n /**\n * Initializes caret.\n * @private\n */\n Selection.prototype.initCaret = function () {\n this.caret = createElement('div', {\n styles: 'position:absolute',\n className: 'e-de-blink-cursor e-de-cursor-animation'\n });\n this.viewer.viewerContainer.appendChild(this.caret);\n };\n /**\n * Updates caret position.\n * @private\n */\n Selection.prototype.updateCaretPosition = function () {\n var caretPosition = this.end.location;\n var page = this.getSelectionPage(this.end);\n if (page) {\n this.caret.style.left = page.boundingRectangle.x + (Math.round(caretPosition.x) * this.viewer.zoomFactor) + 'px';\n var caretInfo = this.updateCaretSize(this.owner.selection.end);\n var topMargin = caretInfo.topMargin;\n var caretHeight = caretInfo.height;\n var viewer = this.viewer;\n // tslint:disable-next-line:max-line-length\n var pageTop = (page.boundingRectangle.y - viewer.pageGap * (this.viewer.pages.indexOf(page) + 1)) * this.viewer.zoomFactor + viewer.pageGap * (this.viewer.pages.indexOf(page) + 1);\n this.caret.style.top = pageTop + (Math.round(caretPosition.y + topMargin) * this.viewer.zoomFactor) + 'px';\n if (this.owner.selection.characterFormat.baselineAlignment === 'Subscript') {\n this.caret.style.top = parseFloat(this.caret.style.top) + (parseFloat(this.caret.style.height) / 2) + 'px';\n }\n if (this.viewer.isTouchInput || this.viewer.touchStart.style.display !== 'none') {\n // tslint:disable-next-line:max-line-length\n this.viewer.touchStart.style.left = page.boundingRectangle.x + (Math.round(caretPosition.x) * this.viewer.zoomFactor - 14) + 'px';\n this.viewer.touchStart.style.top = pageTop + ((caretPosition.y + caretInfo.height) * this.viewer.zoomFactor) + 'px';\n // tslint:disable-next-line:max-line-length\n this.viewer.touchEnd.style.left = page.boundingRectangle.x + (Math.round(caretPosition.x) * this.viewer.zoomFactor - 14) + 'px';\n this.viewer.touchEnd.style.top = pageTop + ((caretPosition.y + caretInfo.height) * this.viewer.zoomFactor) + 'px';\n }\n }\n };\n /**\n * Gets current selected page\n */\n Selection.prototype.getSelectionPage = function (position) {\n var lineWidget = this.getLineWidgetInternal(position.currentWidget, position.offset, true);\n if (lineWidget) {\n return this.getPage(lineWidget.paragraph);\n }\n return undefined;\n };\n /**\n * Updates caret size.\n * @private\n */\n Selection.prototype.updateCaretSize = function (textPosition, skipUpdate) {\n var topMargin = 0;\n var isItalic = false;\n var caret;\n var index = 0;\n var caretHeight = 0;\n if (this.characterFormat.italic) {\n isItalic = this.characterFormat.italic;\n }\n if (textPosition.paragraph.isEmpty()) {\n var paragraph = textPosition.paragraph;\n var bottomMargin = 0;\n var paragraphInfo = this.getParagraphMarkSize(paragraph, topMargin, bottomMargin);\n topMargin = paragraphInfo.topMargin;\n bottomMargin = paragraphInfo.bottomMargin;\n var height = paragraphInfo.height;\n caretHeight = topMargin < 0 ? topMargin + height : height;\n if (!skipUpdate) {\n this.caret.style.height = caretHeight * this.viewer.zoomFactor + 'px';\n }\n topMargin = 0;\n }\n else {\n var inlineInfo = textPosition.currentWidget.getInline(textPosition.offset, index);\n index = inlineInfo.index;\n var inline = inlineInfo.element;\n if (!isNullOrUndefined(inline)) {\n caret = this.getCaretHeight(inline, index, inline.characterFormat, true, topMargin, isItalic);\n caretHeight = caret.height;\n if (!skipUpdate) {\n this.caret.style.height = caret.height * this.viewer.zoomFactor + 'px';\n }\n }\n }\n if (!skipUpdate) {\n if (isItalic) {\n this.caret.style.transform = 'rotate(13deg)';\n }\n else {\n this.caret.style.transform = '';\n }\n }\n return {\n 'topMargin': topMargin,\n 'height': caretHeight\n };\n };\n /**\n * Updates caret to page.\n * @private\n */\n Selection.prototype.updateCaretToPage = function (startPosition, endPage) {\n if (!isNullOrUndefined(endPage)) {\n this.viewer.selectionEndPage = endPage;\n if (this.owner.selection.isEmpty) {\n this.viewer.selectionStartPage = endPage;\n }\n else {\n // tslint:disable-next-line:max-line-length\n var startLineWidget = this.getLineWidgetParagraph(startPosition.offset, startPosition.paragraph.childWidgets[0]);\n //Gets start page.\n var startPage = this.getPage(startLineWidget.paragraph);\n if (!isNullOrUndefined(startPage)) {\n this.viewer.selectionStartPage = startPage;\n }\n }\n }\n this.checkForCursorVisibility();\n };\n /**\n * Gets caret bottom position.\n * @private\n */\n Selection.prototype.getCaretBottom = function (textPosition, isEmptySelection) {\n var bottom = textPosition.location.y;\n if (textPosition.paragraph.isEmpty()) {\n var paragraph = textPosition.paragraph;\n var topMargin = 0;\n var bottomMargin = 0;\n var sizeInfo = this.getParagraphMarkSize(paragraph, topMargin, bottomMargin);\n topMargin = sizeInfo.topMargin;\n bottomMargin = sizeInfo.bottomMargin;\n bottom += sizeInfo.height;\n bottom += topMargin;\n if (!isEmptySelection) {\n bottom += bottomMargin;\n }\n }\n else {\n var index = 0;\n var inlineInfo = textPosition.paragraph.getInline(textPosition.offset, index);\n var inline = inlineInfo.element;\n index = inlineInfo.index;\n var topMargin = 0;\n var isItalic = false;\n // tslint:disable-next-line:max-line-length\n var caretHeightInfo = this.getCaretHeight(inline, index, inline.characterFormat, false, topMargin, isItalic);\n topMargin = caretHeightInfo.topMargin;\n isItalic = caretHeightInfo.isItalic;\n bottom += caretHeightInfo.height;\n if (isEmptySelection) {\n bottom -= HelperMethods.convertPointToPixel(textPosition.paragraph.paragraphFormat.afterSpacing);\n }\n }\n return bottom;\n };\n /**\n * Checks for cursor visibility.\n * @param isTouch\n * @private\n */\n Selection.prototype.checkForCursorVisibility = function () {\n this.showCaret();\n };\n // caret implementation ends\n /**\n * Keyboard shortcuts\n * @private\n */\n // tslint:disable:max-func-body-length\n Selection.prototype.onKeyDownInternal = function (event, ctrl, shift, alt) {\n var key = event.which || event.keyCode;\n if (ctrl && !shift && !alt) {\n this.viewer.isControlPressed = true;\n switch (key) {\n // case 9:\n // event.preventDefault();\n // if (this.owner.acceptTab) {\n // this.selection.handleTabKey(false, false);\n // }\n // break;\n case 35:\n this.handleControlEndKey();\n break;\n case 36:\n this.handleControlHomeKey();\n break;\n case 37:\n this.handleControlLeftKey();\n break;\n case 38:\n this.handleControlUpKey();\n break;\n case 39:\n this.handleControlRightKey();\n break;\n case 40:\n this.handleControlDownKey();\n break;\n case 65:\n this.owner.selection.selectAll();\n break;\n case 67:\n event.preventDefault();\n this.copy();\n break;\n case 70:\n event.preventDefault();\n if (!isNullOrUndefined(this.owner.optionsPaneModule)) {\n this.owner.optionsPaneModule.showHideOptionsPane(true);\n }\n break;\n }\n }\n else if (shift && !ctrl && !alt) {\n switch (key) {\n case 35:\n this.handleShiftEndKey();\n event.preventDefault();\n break;\n case 36:\n this.handleShiftHomeKey();\n event.preventDefault();\n break;\n case 37:\n this.handleShiftLeftKey();\n event.preventDefault();\n break;\n case 38:\n this.handleShiftUpKey();\n event.preventDefault();\n break;\n case 39:\n this.handleShiftRightKey();\n event.preventDefault();\n break;\n case 40:\n this.handleShiftDownKey();\n event.preventDefault();\n break;\n }\n }\n else if (shift && ctrl && !alt) {\n switch (key) {\n case 35:\n this.handleControlShiftEndKey();\n break;\n case 36:\n this.handleControlShiftHomeKey();\n break;\n case 37:\n this.handleControlShiftLeftKey();\n break;\n case 38:\n this.handleControlShiftUpKey();\n break;\n case 39:\n this.handleControlShiftRightKey();\n break;\n case 40:\n this.handleControlShiftDownKey();\n break;\n }\n }\n else {\n switch (key) {\n // case 9:\n // event.preventDefault();\n // if (this.owner.acceptTab) {\n // this.handleTabKey(true, false);\n // }\n // break; \n case 33:\n event.preventDefault();\n this.viewer.viewerContainer.scrollTop -= this.viewer.visibleBounds.height;\n break;\n case 34:\n event.preventDefault();\n this.viewer.viewerContainer.scrollTop += this.viewer.visibleBounds.height;\n break;\n case 35:\n this.handleEndKey();\n event.preventDefault();\n break;\n case 36:\n this.handleHomeKey();\n event.preventDefault();\n break;\n case 37:\n this.handleLeftKey();\n event.preventDefault();\n break;\n case 38:\n this.handleUpKey();\n event.preventDefault();\n break;\n case 39:\n this.handleRightKey();\n event.preventDefault();\n break;\n case 40:\n this.handleDownKey();\n event.preventDefault();\n break;\n }\n }\n if (!this.owner.isReadOnlyMode) {\n this.owner.editorModule.onKeyDownInternal(event, ctrl, shift, alt);\n }\n if (this.owner.optionsPaneModule) {\n // tslint:disable-next-line:max-line-length\n if (!isNullOrUndefined(this.owner.optionsPaneModule.searchHighlighters) && this.owner.optionsPaneModule.searchHighlighters.length > 0) {\n this.owner.optionsPaneModule.clearSearchHighlight();\n }\n }\n if (event.keyCode === 27 || event.which === 27) {\n if (!isNullOrUndefined(this.owner.optionsPaneModule)) {\n this.owner.optionsPaneModule.showHideOptionsPane(false);\n }\n if (this.owner.enableHeaderAndFooter) {\n this.disableHeaderFooter();\n }\n }\n };\n //#region Enable or disable Header Footer\n /**\n * @private\n */\n Selection.prototype.checkAndEnableHeaderFooter = function (point, pagePoint) {\n var page = this.viewer.currentPage;\n if (this.isCursorInsidePageRect(point, page)) {\n if (this.isCursorInHeaderRegion(point, page)) {\n if (this.owner.enableHeaderAndFooter) {\n return false;\n }\n return this.enableHeadersFootersRegion(page.headerWidget);\n }\n if (this.isCursorInFooterRegion(point, page)) {\n if (this.owner.enableHeaderAndFooter) {\n return false;\n }\n return this.enableHeadersFootersRegion(page.footerWidget);\n }\n }\n if (this.owner.enableHeaderAndFooter) {\n this.owner.enableHeaderAndFooter = false;\n this.viewer.updateTextPositionForSelection(pagePoint, 1);\n return true;\n }\n return false;\n };\n /**\n * @private\n */\n Selection.prototype.isCursorInsidePageRect = function (point, page) {\n if ((this.viewer.containerLeft + point.x) >= page.boundingRectangle.x &&\n (this.viewer.containerLeft + point.x) <= (page.boundingRectangle.x + (page.boundingRectangle.width * this.viewer.zoomFactor))) {\n return true;\n }\n return false;\n };\n /**\n * @private\n */\n Selection.prototype.isCursorInHeaderRegion = function (point, page) {\n var pageTop = this.getPageTop(page);\n var headerHeight = 0;\n if (page.headerWidget) {\n headerHeight = (page.headerWidget.y + page.headerWidget.height);\n }\n var height = Math.max(headerHeight, HelperMethods.convertPointToPixel(page.bodyWidgets[0].sectionFormat.topMargin))\n * this.viewer.zoomFactor;\n if ((this.viewer.containerTop + point.y) >= pageTop && (this.viewer.containerTop + point.y) <= pageTop + height) {\n return true;\n }\n return false;\n };\n /**\n * @private\n */\n Selection.prototype.isCursorInFooterRegion = function (point, page) {\n var pageRect = page.boundingRectangle;\n var pageTop = this.getPageTop(page);\n var pageBottom = pageTop + (pageRect.height * this.viewer.zoomFactor);\n var footerDistance = HelperMethods.convertPointToPixel(page.bodyWidgets[0].sectionFormat.footerDistance);\n var footerHeight = 0;\n if (page.footerWidget) {\n footerHeight = page.footerWidget.height;\n }\n // tslint:disable-next-line:max-line-length\n var height = (pageRect.height -\n Math.max(footerHeight + footerDistance, HelperMethods.convertPointToPixel(page.bodyWidgets[0].sectionFormat.bottomMargin))) * this.viewer.zoomFactor;\n if ((this.viewer.containerTop + point.y) <= pageBottom && (this.viewer.containerTop + point.y) >= pageTop + height) {\n return true;\n }\n return false;\n };\n /**\n * @private\n */\n Selection.prototype.enableHeadersFootersRegion = function (widget) {\n this.owner.enableHeaderAndFooter = true;\n this.updateTextPositionForBlockContainer(widget);\n return true;\n };\n /**\n * @private\n */\n Selection.prototype.updateTextPositionForBlockContainer = function (widget) {\n var block = widget.firstChild;\n if (block instanceof TableWidget) {\n block = this.getFirstBlockInFirstCell(block);\n }\n this.selectParagraph(block, true);\n };\n /**\n * Disable Header footer\n * @private\n */\n Selection.prototype.disableHeaderFooter = function () {\n var page = this.getPage(this.start.paragraph);\n this.updateTextPositionForBlockContainer(page.bodyWidgets[0]);\n this.owner.enableHeaderAndFooter = false;\n };\n //#endregion\n /**\n * @private\n */\n Selection.prototype.destroy = function () {\n if (!isNullOrUndefined(this.contextTypeInternal)) {\n this.contextTypeInternal = undefined;\n }\n this.caret = undefined;\n this.contextTypeInternal = undefined;\n this.upDownSelectionLength = undefined;\n this.viewer = undefined;\n this.owner = undefined;\n };\n /**\n * Navigates to the specified bookmark.\n * @param name\n * @param moveToStart\n * @private\n */\n Selection.prototype.navigateBookmark = function (name, moveToStart) {\n var bookmarks = this.viewer.bookmarks;\n if (bookmarks.containsKey(name)) {\n //bookmark start element\n var bookmrkElmnt = bookmarks.get(name);\n var offset = bookmrkElmnt.line.getOffset(bookmrkElmnt, 1);\n var startPosition = new TextPosition(this.viewer.owner);\n startPosition.setPositionParagraph(bookmrkElmnt.line, offset);\n if (moveToStart) {\n this.viewer.selection.selectRange(startPosition, startPosition);\n }\n else {\n //bookmark end element\n var bookmrkEnd = bookmrkElmnt.reference;\n var endoffset = bookmrkEnd.line.getOffset(bookmrkEnd, 0);\n var endPosition = new TextPosition(this.viewer.owner);\n endPosition.setPositionParagraph(bookmrkEnd.line, endoffset);\n //selects the bookmark range\n this.viewer.selection.selectRange(startPosition, endPosition);\n }\n }\n };\n /**\n * Selects the specified bookmark.\n * @param name\n */\n Selection.prototype.selectBookmark = function (name) {\n this.navigateBookmark(name);\n };\n /**\n * Returns the toc field from the selection.\n * @private\n */\n Selection.prototype.getTocField = function () {\n var paragraph = this.start.paragraph;\n var tocPara = undefined;\n while ((paragraph !== undefined && this.isTocStyle(paragraph))) {\n tocPara = paragraph;\n paragraph = paragraph.previousRenderedWidget;\n }\n if (tocPara !== undefined) {\n var lineWidget = tocPara.childWidgets[0];\n if (lineWidget !== undefined) {\n return lineWidget.children[0];\n }\n }\n return undefined;\n };\n /**\n * Returns true if the paragraph has toc style.\n */\n Selection.prototype.isTocStyle = function (paragraph) {\n var style = paragraph.paragraphFormat.baseStyle;\n return (style !== undefined && (style.name.toLowerCase().indexOf('toc') !== -1));\n };\n return Selection;\n}());\nexport { Selection };\n","/**\n * @private\n */\nvar TextSearchResult = /** @class */ (function () {\n function TextSearchResult(owner) {\n this.startIn = undefined;\n this.endIn = undefined;\n this.owner = owner;\n }\n Object.defineProperty(TextSearchResult.prototype, \"viewer\", {\n get: function () {\n return this.owner.viewer;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TextSearchResult.prototype, \"start\", {\n get: function () {\n return this.startIn;\n },\n set: function (value) {\n this.startIn = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TextSearchResult.prototype, \"end\", {\n get: function () {\n return this.endIn;\n },\n set: function (value) {\n this.endIn = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TextSearchResult.prototype, \"text\", {\n get: function () {\n return this.viewer.selection.getTextInternal(this.start, this.end, false);\n },\n enumerable: true,\n configurable: true\n });\n TextSearchResult.prototype.destroy = function () {\n this.start = undefined;\n this.end = undefined;\n };\n return TextSearchResult;\n}());\nexport { TextSearchResult };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { TextSearchResult } from './text-search-result';\n/**\n * @private\n */\nvar TextSearchResults = /** @class */ (function () {\n function TextSearchResults(owner) {\n this.currentIndex = -1;\n this.owner = owner;\n }\n Object.defineProperty(TextSearchResults.prototype, \"length\", {\n get: function () {\n if (this.innerList === undefined) {\n return 0;\n }\n return this.innerList.length;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TextSearchResults.prototype, \"currentSearchResult\", {\n get: function () {\n if (this.innerList === undefined || this.currentIndex < 0 || this.currentIndex >= this.length) {\n return undefined;\n }\n return this.innerList[this.currentIndex];\n },\n enumerable: true,\n configurable: true\n });\n TextSearchResults.prototype.addResult = function () {\n var textSearchResult = new TextSearchResult(this.owner);\n if (isNullOrUndefined(this.innerList)) {\n this.innerList = [];\n }\n this.innerList.push(textSearchResult);\n return textSearchResult;\n };\n TextSearchResults.prototype.clearResults = function () {\n this.currentIndex = -1;\n if (!isNullOrUndefined(this.innerList)) {\n for (var i = this.innerList.length - 1; i >= 0; i--) {\n this.innerList[i].destroy();\n this.innerList.splice(i, 1);\n }\n }\n };\n TextSearchResults.prototype.indexOf = function (result) {\n if (isNullOrUndefined(this.innerList)) {\n return -1;\n }\n return this.innerList.indexOf(result);\n };\n TextSearchResults.prototype.destroy = function () {\n if (!isNullOrUndefined(this.innerList)) {\n this.clearResults();\n }\n this.innerList = undefined;\n };\n return TextSearchResults;\n}());\nexport { TextSearchResults };\n","import { Dictionary } from '../../base/dictionary';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { TextPosition } from '../selection/selection-helper';\nimport { TextElementBox, ParagraphWidget, ListTextElementBox, FieldElementBox } from '../viewer/page';\nimport { TextSearchResults } from './text-search-results';\n/**\n * @private\n */\nvar TextSearch = /** @class */ (function () {\n function TextSearch(owner) {\n this.wordBefore = '\\\\b';\n this.wordAfter = '\\\\b';\n this.owner = owner;\n }\n Object.defineProperty(TextSearch.prototype, \"viewer\", {\n get: function () {\n return this.owner.viewer;\n },\n enumerable: true,\n configurable: true\n });\n TextSearch.prototype.find = function (pattern, findOption) {\n return this.findNext(pattern, findOption, '0;0;0');\n };\n // tslint:disable-next-line:max-line-length \n TextSearch.prototype.findNext = function (pattern, findOption, hierarchicalPosition) {\n if (typeof pattern === 'string') {\n pattern = this.stringToRegex(pattern, findOption);\n }\n if (hierarchicalPosition === undefined) {\n hierarchicalPosition = '0;0;0';\n }\n var results = new TextSearchResults(this.owner);\n this.findDocument(results, pattern, true, findOption, hierarchicalPosition);\n return results.length > 0, results.currentSearchResult;\n };\n TextSearch.prototype.stringToRegex = function (textToFind, option) {\n if (textToFind.indexOf('\\\\') > -1) {\n textToFind = textToFind.split('\\\\').join('\\\\\\\\');\n }\n if (textToFind.indexOf('.') > -1) {\n textToFind = '\\\\' + textToFind;\n }\n if (option === 'WholeWord' || option === 'CaseSensitiveWholeWord') {\n textToFind = this.wordBefore + textToFind + this.wordAfter;\n }\n return new RegExp(textToFind, (option === 'CaseSensitive' || option === 'CaseSensitiveWholeWord') ? 'g' : 'ig');\n };\n TextSearch.prototype.isPatternEmpty = function (pattern) {\n var wordEmpty = this.wordBefore + this.wordAfter;\n var patternRegExp = pattern.toString();\n return (patternRegExp.length === 0 || patternRegExp === wordEmpty);\n };\n // tslint:disable-next-line:max-line-length \n TextSearch.prototype.findAll = function (pattern, findOption, hierarchicalPosition) {\n if (typeof pattern === 'string') {\n pattern = this.stringToRegex(pattern, findOption);\n }\n if (hierarchicalPosition === undefined) {\n hierarchicalPosition = '0;0;0';\n }\n var results = new TextSearchResults(this.owner);\n this.findDocument(results, pattern, false, findOption, hierarchicalPosition);\n if (results.length > 0 && results.currentIndex < 0) {\n results.currentIndex = 0;\n }\n if (!isNullOrUndefined(results.currentSearchResult)) {\n return results;\n }\n return undefined;\n };\n // tslint:disable-next-line:max-line-length \n TextSearch.prototype.findDocument = function (results, pattern, isFirstMatch, findOption, hierachicalPosition) {\n if (this.isPatternEmpty(pattern)) {\n return;\n }\n if (findOption === undefined) {\n findOption = 'None';\n }\n var inline = undefined;\n var selectionEnd = undefined;\n if (hierachicalPosition !== undefined) {\n selectionEnd = this.owner.selection.end;\n }\n if (hierachicalPosition !== undefined && isFirstMatch && selectionEnd !== undefined && selectionEnd.paragraph !== undefined) {\n if (selectionEnd.paragraph instanceof ParagraphWidget) {\n var indexInInline = 0;\n // tslint:disable-next-line:max-line-length \n // IndexInInline Handled specifically for simple find operation to start from starting point\n var inlineElement = selectionEnd.currentWidget.getInline(this.owner.selection.start.offset, indexInInline);\n inline = inlineElement.element;\n indexInInline = inlineElement.index;\n if (!isNullOrUndefined(inline)) {\n var nextParagraphWidget = undefined;\n // tslint:disable-next-line:max-line-length \n nextParagraphWidget = this.findInline(inline, pattern, findOption, indexInInline, isFirstMatch, results, selectionEnd);\n while (results.length === 0 && !isNullOrUndefined(nextParagraphWidget)) {\n while (!isNullOrUndefined(nextParagraphWidget) && nextParagraphWidget.childWidgets.length === 0) {\n // tslint:disable-next-line:max-line-length \n nextParagraphWidget = this.owner.selection.getNextParagraph(nextParagraphWidget.containerWidget);\n }\n if (isNullOrUndefined(nextParagraphWidget)) {\n break;\n }\n var lineWidget = nextParagraphWidget.childWidgets[0];\n if (lineWidget.children[0] instanceof ListTextElementBox) {\n inline = (lineWidget.children[2] instanceof TextElementBox) ? lineWidget.children[2] : undefined;\n }\n else {\n inline = lineWidget.children[0];\n }\n if (isNullOrUndefined(inline)) {\n break;\n }\n // tslint:disable-next-line:max-line-length \n nextParagraphWidget = this.findInline(inline, pattern, findOption, 0, isFirstMatch, results, selectionEnd);\n }\n if (results.length > 0) {\n return;\n }\n }\n }\n }\n var section;\n section = this.viewer.pages[0].bodyWidgets[0];\n while (!isNullOrUndefined(section) && section.childWidgets.length === 0) {\n section = section.nextWidget;\n }\n if (isNullOrUndefined(section) || section.childWidgets.length === 0) {\n return;\n }\n var paragraphWidget = this.owner.selection.getFirstParagraphBlock(section.childWidgets[0]);\n // tslint:disable-next-line:max-line-length \n while (!isNullOrUndefined(paragraphWidget) && paragraphWidget.childWidgets.length === 1 && paragraphWidget.childWidgets[0].children.length === 0) {\n paragraphWidget = this.owner.selection.getNextParagraphBlock(paragraphWidget);\n }\n while (!isNullOrUndefined(paragraphWidget) && paragraphWidget.childWidgets.length > 0) {\n var inlineElement = paragraphWidget.childWidgets[0];\n var inlineEle = inlineElement.children[0];\n if (isNullOrUndefined(inlineEle)) {\n break;\n }\n this.findInline(inlineEle, pattern, findOption, 0, isFirstMatch, results, selectionEnd);\n paragraphWidget = this.owner.selection.getNextParagraphBlock(paragraphWidget);\n // tslint:disable-next-line:max-line-length \n while (!isNullOrUndefined(paragraphWidget) && (paragraphWidget.childWidgets.length === 1) && paragraphWidget.childWidgets[0].children.length === 0) {\n paragraphWidget = this.owner.selection.getNextParagraphBlock(paragraphWidget);\n }\n }\n if (isFirstMatch && !isNullOrUndefined(results) && results.length > 0) {\n return;\n }\n };\n // tslint:disable-next-line:max-line-length \n TextSearch.prototype.findInline = function (inlineElement, pattern, option, indexInInline, isFirstMatch, results, selectionEnd) {\n var inlines = inlineElement;\n var stringBuilder = '';\n var spans = new Dictionary();\n //tslint:disable no-constant-condition\n do {\n // tslint:disable-next-line:max-line-length \n if (inlineElement instanceof TextElementBox && (!isNullOrUndefined(inlineElement.text) && inlineElement.text !== '')) {\n spans.add(inlineElement, stringBuilder.length);\n // IndexInInline Handled specifically for simple find operation to start from starting point\n if (inlineElement === inlines) {\n stringBuilder = stringBuilder + (inlineElement.text.substring(indexInInline));\n }\n else {\n stringBuilder = stringBuilder + (inlineElement.text);\n }\n }\n else if (inlineElement instanceof FieldElementBox) {\n var fieldBegin = inlineElement;\n if (!isNullOrUndefined(fieldBegin.fieldEnd)) {\n // tslint:disable-next-line:max-line-length \n inlineElement = isNullOrUndefined(fieldBegin.fieldSeparator) ? fieldBegin.fieldEnd : fieldBegin.fieldSeparator;\n }\n }\n if (!isNullOrUndefined(inlineElement) && isNullOrUndefined(inlineElement.nextNode)) {\n break;\n }\n if (!isNullOrUndefined(inlineElement)) {\n inlineElement = inlineElement.nextNode;\n }\n } while (true);\n var text = stringBuilder.toString();\n var matches = [];\n var matchObject;\n //tslint:disable no-conditional-assignment\n while (!isNullOrUndefined(matchObject = pattern.exec(text))) {\n matches.push(matchObject);\n }\n for (var i = 0; i < matches.length; i++) {\n var match = matches[i];\n var result = results.addResult();\n var spanKeys = spans.keys;\n for (var i_1 = 0; i_1 < spanKeys.length; i_1++) {\n var span = spanKeys[i_1];\n var startIndex = spans.get(span);\n var spanLength = span.length;\n // IndexInInline Handled specifically for simple find operation to start from starting point\n if (span === inlines) {\n spanLength -= indexInInline;\n }\n if (isNullOrUndefined(result.start) && match.index < startIndex + spanLength) {\n var index = match.index - startIndex;\n // IndexInInline Handled specifically for simple find operation to start from starting point\n if (span === inlines) {\n index += indexInInline;\n }\n var offset = (span.line).getOffset(span, index);\n result.start = this.getTextPosition(span.line, offset.toString());\n result.start.location = this.owner.selection.getPhysicalPositionInternal(span.line, offset, true);\n result.start.setPositionParagraph(span.line, offset);\n }\n if (match.index + match[0].length <= startIndex + spanLength) {\n var index = (match.index + match[0].length) - startIndex;\n // IndexInInline Handled specifically for simple find operation to start from starting point\n if (span === inlines) {\n index += indexInInline;\n }\n var offset = (span.line).getOffset(span, index);\n result.end = this.getTextPosition(span.line, offset.toString());\n result.end.location = this.owner.selection.getPhysicalPositionInternal(span.line, offset, true);\n result.end.setPositionParagraph(span.line, offset);\n break;\n }\n }\n if (isFirstMatch) {\n results.currentIndex = 0;\n return undefined;\n }\n else if (results.currentIndex < 0 && selectionEnd.isExistBefore(result.start)) {\n // } else if (results.currentIndex < 0 && ) {\n results.currentIndex = results.indexOf(result);\n }\n }\n // tslint:disable-next-line:max-line-length\n var paragraphWidget = this.owner.selection.getNextParagraphBlock(inlineElement.line.paragraph);\n return paragraphWidget;\n };\n TextSearch.prototype.getTextPosition = function (lineWidget, hierarchicalIndex) {\n var textPosition = new TextPosition(this.owner);\n var index = textPosition.getHierarchicalIndex(lineWidget, hierarchicalIndex);\n textPosition.setPositionForCurrentIndex(index);\n return textPosition;\n };\n return TextSearch;\n}());\nexport { TextSearch };\n/**\n * @private\n */\nvar SearchWidgetInfo = /** @class */ (function () {\n function SearchWidgetInfo(left, width) {\n this.leftInternal = 0;\n this.widthInternal = 0;\n this.leftInternal = left;\n this.widthInternal = width;\n }\n Object.defineProperty(SearchWidgetInfo.prototype, \"left\", {\n get: function () {\n return this.leftInternal;\n },\n set: function (value) {\n this.leftInternal = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SearchWidgetInfo.prototype, \"width\", {\n get: function () {\n return this.widthInternal;\n },\n set: function (value) {\n this.widthInternal = value;\n },\n enumerable: true,\n configurable: true\n });\n return SearchWidgetInfo;\n}());\nexport { SearchWidgetInfo };\n","import { Dictionary } from '../../base/dictionary';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { TextPosition } from '../selection/selection-helper';\nimport { TextElementBox, FieldElementBox } from '../viewer/page';\nimport { TextSearch } from '../search/text-search';\nimport { TextSearchResults } from '../search/text-search-results';\n/**\n * Search module\n */\nvar Search = /** @class */ (function () {\n /**\n * @private\n */\n function Search(owner) {\n this.owner = owner;\n this.textSearch = new TextSearch(this.owner);\n this.textSearchResults = new TextSearchResults(this.owner);\n }\n Object.defineProperty(Search.prototype, \"viewer\", {\n /**\n * @private\n */\n get: function () {\n return this.owner.viewer;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Get the module name.\n */\n Search.prototype.getModuleName = function () {\n return 'Search';\n };\n /**\n * Finds the immediate occurrence of specified text from cursor position in the document.\n * @param {string} text\n * @param {FindOption} findOption? - Default value of ‘findOptions’ parameter is 'None'.\n * @private\n */\n Search.prototype.find = function (text, findOptions) {\n if (isNullOrUndefined(findOptions)) {\n findOptions = 'None';\n }\n var textSearch = new TextSearch(this.owner);\n var result = textSearch.find(text, findOptions);\n if (!isNullOrUndefined(result)) {\n this.navigate(result);\n }\n };\n /**\n * Finds all occurrence of specified text in the document.\n * @param {string} text\n * @param {FindOption} findOption? - Default value of ‘findOptions’ parameter is 'None'.\n * @private\n */\n Search.prototype.findAll = function (text, findOptions) {\n if (isNullOrUndefined(findOptions)) {\n findOptions = 'None';\n }\n var textSearch = new TextSearch(this.owner);\n var results = textSearch.findAll(text, findOptions);\n if (!isNullOrUndefined(results) && results.length > 0) {\n this.navigate(results.innerList[results.currentIndex]);\n this.highlight(results);\n }\n };\n /**\n * Find the textToFind string in current document and replace the specified string.\n * @param {string} textToFind\n * @param {string} textToReplace\n * @param {FindOption} findOptions? - Default value of ‘findOptions’ parameter is FindOption.None.\n * @private\n */\n Search.prototype.replaceAllInternal = function (textToFind, textToReplace, findOptions) {\n if ((textToFind === '' || isNullOrUndefined(textToFind)) || (textToReplace === '' || isNullOrUndefined(textToReplace))) {\n return;\n }\n if (isNullOrUndefined(findOptions)) {\n findOptions = 'None';\n }\n var textSearch = new TextSearch(this.owner);\n var textSearchResults = new TextSearchResults(this.owner);\n var results = textSearch.findAll(textToFind, findOptions);\n if (!isNullOrUndefined(results) && results.length > 0) {\n this.owner.searchModule.navigate(results.innerList[results.currentIndex]);\n this.owner.searchModule.highlight(results);\n this.replaceAll(textToReplace, textSearchResults);\n }\n };\n /**\n * Find the textToFind string in current document and replace the specified string.\n * @param {string} textToFind\n * @param {string} textToReplace\n * @param {FindOption} findOptions? - Default value of ‘findOptions’ parameter is FindOption.None.\n * @private\n */\n Search.prototype.replaceInternal = function (textToFind, textToReplace, findOptions) {\n if ((isNullOrUndefined(textToFind) || textToFind === '') || (textToReplace === '' || isNullOrUndefined(textToReplace))) {\n return;\n }\n if (isNullOrUndefined(findOptions)) {\n findOptions = 'None';\n }\n var textSearch = new TextSearch(this.owner);\n var textSearchResults = new TextSearchResults(this.owner);\n var result = textSearch.find(textToFind, findOptions);\n if (!isNullOrUndefined(result)) {\n this.navigate(result);\n textSearchResults.addResult();\n textSearchResults.innerList[0] = result;\n this.replace(textToReplace, result, textSearchResults);\n var index = this.owner.selection.end.getHierarchicalIndexInternal();\n result = textSearch.findNext(textToFind, findOptions, index);\n textSearchResults.addResult();\n textSearchResults.innerList[0] = result;\n this.owner.searchModule.navigate(result);\n }\n };\n /**\n * @private\n */\n Search.prototype.navigate = function (textSearchResult) {\n var start = textSearchResult.start;\n var end = textSearchResult.end;\n // tslint:disable-next-line:max-line-length\n if (!isNullOrUndefined(this.owner) && !isNullOrUndefined(this.owner.selection) && !isNullOrUndefined(start) && !isNullOrUndefined(end) && !isNullOrUndefined(start.paragraph) && !isNullOrUndefined(end.paragraph)) {\n this.owner.selection.selectRange(start, end);\n }\n };\n /**\n * @private\n */\n Search.prototype.highlight = function (textSearchResults) {\n if (this.owner.optionsPaneModule) {\n this.owner.optionsPaneModule.searchHighlighters = new Dictionary();\n for (var i = 0; i < textSearchResults.innerList.length; i++) {\n var result = textSearchResults.innerList[i];\n this.highlightResult(result);\n }\n this.viewer.renderVisiblePages();\n }\n };\n /**\n * @private\n */\n Search.prototype.highlightResult = function (result) {\n this.owner.optionsPaneModule.highlightSearchResult(result.start.paragraph, result.start, result.end);\n };\n /**\n * @private\n */\n Search.prototype.addSearchResultItems = function (result) {\n if (isNullOrUndefined(result) || result === '') {\n return;\n }\n if (isNullOrUndefined(this.owner.findResultsList)) {\n this.owner.findResultsList = [];\n }\n this.owner.findResultsList.push(result);\n };\n /**\n * @private\n */\n Search.prototype.addFindResultView = function (textSearchResults) {\n for (var i = 0; i < textSearchResults.innerList.length; i++) {\n var result = textSearchResults.innerList[i];\n this.addFindResultViewForSearch(result);\n }\n };\n /**\n * @private\n */\n Search.prototype.addFindResultViewForSearch = function (result) {\n if (result.start != null && result.end != null && result.start.paragraph != null && result.end.paragraph != null) {\n var prefixText = void 0;\n var suffixtext = void 0;\n var currentText = void 0;\n var startIndex = 0;\n var inlineObj = result.start.currentWidget.getInline(result.start.offset, startIndex);\n var inline = inlineObj.element;\n startIndex = inlineObj.index;\n var prefix = '';\n var lastIndex = 0;\n if (inline instanceof FieldElementBox) {\n var elementInfo = this.owner.selection.getRenderedInline(inline, startIndex);\n if (elementInfo.element.nextNode instanceof TextElementBox) {\n inline = elementInfo.element.nextNode;\n startIndex = elementInfo.index;\n }\n else {\n inline = elementInfo.element;\n startIndex = elementInfo.index;\n }\n }\n var boxObj = this.owner.selection.getElementBoxInternal(inline, startIndex);\n var box = boxObj.element;\n startIndex = boxObj.index;\n if (box != null) {\n if (box instanceof TextElementBox && startIndex > 0) {\n prefix = box.text.substring(0, startIndex);\n }\n var boxIndex = box.line.children.indexOf(box);\n // tslint:disable-next-line:max-line-length\n lastIndex = prefix.lastIndexOf(' ');\n while (lastIndex < 0 && boxIndex > 0 && box.line.children[boxIndex - 1] instanceof TextElementBox) {\n prefix = box.line.children[boxIndex - 1].text + prefix;\n boxIndex--;\n lastIndex = prefix.lastIndexOf(' ');\n }\n }\n var shiftIndex = prefix.lastIndexOf('\\v');\n if (shiftIndex > 0) {\n prefix = prefix.substring(0, shiftIndex);\n }\n else {\n lastIndex = prefix.lastIndexOf(' ');\n prefixText = lastIndex < 0 ? prefix : prefix.substring(lastIndex + 1);\n }\n currentText = result.text;\n var endIndex = 0;\n var endInlineObj = result.end.currentWidget.getInline(result.end.offset, endIndex);\n var endInline = endInlineObj.element;\n endIndex = endInlineObj.index;\n suffixtext = '';\n //Checks prefix element box is empty\n if (boxObj != null) {\n // Gets the element box using endIndex of the text and set as suffix\n boxObj = this.owner.selection.getElementBoxInternal(endInline, endIndex);\n box = boxObj.element;\n endIndex = boxObj.index;\n }\n //Checks suffix element box is empty.\n if (box != null) {\n if (box instanceof TextElementBox && endIndex < box.length) {\n suffixtext = box.text.substring(endIndex);\n }\n var boxIndex = box.line.children.indexOf(box);\n // tslint:disable-next-line:max-line-length\n while (boxIndex + 1 < box.line.children.length && (box.line.children[boxIndex + 1] instanceof TextElementBox) || (box.line.children[boxIndex + 1] instanceof FieldElementBox)) {\n if (box.line.children[boxIndex + 1] instanceof FieldElementBox) {\n boxIndex = boxIndex + 2;\n }\n else {\n suffixtext = suffixtext + box.line.children[boxIndex + 1].text;\n boxIndex = boxIndex + 1;\n }\n }\n }\n lastIndex = suffixtext.lastIndexOf(' ');\n suffixtext = suffixtext === '\\v' ? suffixtext = '' : suffixtext;\n // tslint:disable-next-line:max-line-length\n var listElement = '' + prefix + '' + result.text + '' + suffixtext + '';\n this.addSearchResultItems(listElement);\n }\n };\n //Replace and Replace All API \n /**\n * Replace the searched string with specified string\n * @param {string} replaceText\n * @param {TextSearchResult} result\n * @param {TextSearchResults} results\n * @private\n */\n Search.prototype.replace = function (replaceText, result, results) {\n if (isNullOrUndefined(this.viewer.owner.optionsPaneModule)) {\n return 0;\n }\n if (!isNullOrUndefined(this.viewer)) {\n this.viewer.owner.optionsPaneModule.clearSearchHighlight();\n }\n this.viewer.owner.searchModule.navigate(results.innerList[0]);\n var endPosition = this.viewer.selection.start;\n var index = results.indexOf(result);\n if (index < 0) {\n return 0;\n }\n this.owner.editorModule.insertText(replaceText, true);\n var startTextPosition = result.start;\n var endTextPosition = result.end;\n var difference = endTextPosition.offset - (startTextPosition.offset + replaceText.length);\n var startPosition = new TextPosition(this.viewer.owner);\n startPosition.setPositionParagraph(endTextPosition.currentWidget, endPosition.offset - replaceText.length);\n this.viewer.selection.selectRange(endPosition, startPosition);\n return 1;\n };\n /**\n * Replace all the searched string with specified string\n * @param {string} replaceText\n * @param {TextSearchResults} results\n * @private\n */\n Search.prototype.replaceAll = function (replaceText, results) {\n // tslint:disable-next-line:max-line-length\n if (isNullOrUndefined(this.viewer.owner) || this.viewer.owner.isReadOnlyMode || isNullOrUndefined(results) || isNullOrUndefined(this.viewer.owner.optionsPaneModule)) {\n return 0;\n }\n this.viewer.owner.optionsPaneModule.clearSearchHighlight();\n if (this.owner.editorHistory) {\n this.owner.editorHistory.initComplexHistory(this.owner.selection, 'ReplaceAll');\n }\n var count = results.length;\n this.viewer.owner.isLayoutEnabled = false;\n for (var i = count - 1; i >= 0; i--) {\n this.viewer.owner.searchModule.navigate(results.innerList[i]);\n this.owner.editorModule.insertText(replaceText, true);\n results.innerList[i].destroy();\n }\n if (this.owner.editorHistory && !isNullOrUndefined(this.owner.editorHistory.currentHistoryInfo)) {\n this.owner.editorHistory.updateComplexHistory();\n }\n else {\n this.owner.editorModule.updateComplexWithoutHistory(2);\n }\n return count;\n };\n /**\n * @private\n */\n Search.prototype.destroy = function () {\n if (this.textSearchResults) {\n this.textSearchResults.destroy();\n }\n };\n return Search;\n}());\nexport { Search };\n","import { createElement, isNullOrUndefined, L10n, setCulture } from '@syncfusion/ej2-base';\nimport { HelperMethods } from '../editor/editor-helper';\nimport { CheckBox } from '@syncfusion/ej2-buttons';\nimport { Tab } from '@syncfusion/ej2-navigations';\nimport { SearchWidgetInfo } from './text-search';\n/**\n * Options Pane class.\n */\nvar OptionsPane = /** @class */ (function () {\n /**\n * Constructor for Options pane module\n * @param {LayoutViewer} layoutViewer\n * @private\n */\n function OptionsPane(layoutViewer) {\n var _this = this;\n /**\n * @private\n */\n this.isOptionsPaneShow = false;\n this.findOption = 'None';\n this.matchCase = undefined;\n this.wholeWord = undefined;\n this.regular = undefined;\n this.searchText = 'Navigation';\n this.resultsText = 'Results';\n this.messageDivText = 'No matches';\n this.replaceButtonText = 'Replace';\n this.replaceAllButtonText = 'Replace All';\n this.occurrenceDivText = 'We replaced all ';\n this.focusedIndex = -1;\n this.focusedElement = [];\n this.isOptionsPane = true;\n this.replacePaneText = 'Replace';\n this.findPaneText = 'Find';\n this.matchDivReplaceText = 'No matches';\n this.matchDivReplaceAllText = 'All Done!';\n /**\n * @private\n */\n this.tabInstance = undefined;\n /**\n * @private\n */\n this.isReplace = false;\n /**\n * @private\n */\n this.searchHighlighters = undefined;\n /**\n * Gets selected tab item which tab is selected.\n * @param {SelectEventArgs} args - Specifies which tab will be opened.\n * @private\n */\n this.selectedTabItem = function (args) {\n if (args.previousIndex !== args.selectedIndex) {\n var previousTab = document.querySelector('#e-content_' + args.previousIndex);\n var nextTab = document.querySelector('#e-content_' + args.selectedIndex);\n nextTab.insertBefore(previousTab.firstElementChild, nextTab.firstChild);\n }\n if (args.selectedIndex === 0 && !isNullOrUndefined(document.querySelector('#e-content_' + args.selectedIndex))) {\n _this.isOptionsPane = true;\n _this.onFindPane();\n }\n if (args.selectedIndex === 1 && !isNullOrUndefined(document.querySelector('#e-content_' + args.selectedIndex))) {\n _this.isOptionsPane = false;\n _this.onReplacePane();\n }\n };\n this.searchOptionChange = function () {\n _this.clearSearchResultItems();\n _this.clearSearchHighlight();\n var inputText = _this.searchInput.value;\n if (inputText === '') {\n return;\n }\n var pattern = _this.viewer.owner.searchModule.textSearch.stringToRegex(inputText, _this.findOption);\n var endSelection = _this.viewer.selection.end;\n var selectionIndex = endSelection.getHierarchicalIndexInternal();\n _this.results = _this.viewer.owner.searchModule.textSearch.findAll(pattern, _this.findOption, selectionIndex);\n if (_this.results != null && _this.results.length > 0) {\n _this.navigateSearchResult();\n }\n else {\n _this.viewer.renderVisiblePages();\n _this.messageDiv.innerHTML = _this.localeValue.getConstant('No matches');\n _this.resultContainer.style.display = 'block';\n _this.resultsListBlock.style.display = 'none';\n _this.clearFocusElement();\n _this.resultsListBlock.innerHTML = '';\n }\n };\n /**\n * Apply find option based on whole words value.\n * @param {ChangeEventArgs} args - Specifies the search options value.\n * @private\n */\n this.wholeWordsChange = function (args) {\n if (_this.matchInput.checked && _this.wholeInput.checked) {\n _this.findOption = 'CaseSensitiveWholeWord';\n }\n else if (_this.matchInput.checked && !(_this.wholeInput.checked)) {\n _this.findOption = 'CaseSensitive';\n }\n else if (!(_this.matchInput.checked) && _this.wholeInput.checked) {\n _this.findOption = 'WholeWord';\n }\n else {\n _this.findOption = 'None';\n }\n _this.searchOptionChange();\n };\n /**\n * Apply find option based on match value.\n * @param {ChangeEventArgs} args - Specifies the search options value.\n * @private\n */\n this.matchChange = function (args) {\n if (_this.matchInput.checked && _this.wholeInput.checked) {\n _this.findOption = 'CaseSensitiveWholeWord';\n }\n else if (!(_this.matchInput.checked) && _this.wholeInput.checked) {\n _this.findOption = 'WholeWord';\n }\n else if (_this.matchInput.checked && !(_this.wholeInput.checked)) {\n _this.findOption = 'CaseSensitive';\n }\n else {\n _this.findOption = 'None';\n }\n _this.searchOptionChange();\n };\n /**\n * Apply find options based on regular value.\n * @param {ChangeEventArgs} args - Specifies the search options value.\n * @private\n */\n // public regularChange = (args: ChangeEventArgs): void => {\n // if (args.checked) {\n // this.matchCase.element.parentElement.parentElement.classList.add('e-checkbox-disabled');\n // this.wholeWord.element.parentElement.parentElement.classList.add('e-checkbox-disabled');\n // this.matchCase.checked = false;\n // this.wholeWord.checked = false;\n // this.findOption = 'None';\n // this.onKeyDownInternal();\n // } else {\n // this.matchCase.element.parentElement.parentElement.classList.remove('e-checkbox-disabled');\n // this.wholeWord.element.parentElement.parentElement.classList.remove('e-checkbox-disabled');\n // }\n // }\n // tslint:enable:no-any \n /**\n * Binding events from the element when optins pane creation.\n * @private\n */\n this.onWireEvents = function () {\n _this.searchIcon.addEventListener('click', _this.searchIconClickInternal);\n _this.navigateToNextResult.addEventListener('click', _this.navigateNextResultButtonClick);\n _this.navigateToPreviousResult.addEventListener('click', _this.navigatePreviousResultButtonClick);\n _this.searchInput.addEventListener('keydown', _this.onKeyDown);\n _this.searchInput.addEventListener('keyup', _this.onEnableDisableReplaceButton);\n _this.resultsListBlock.addEventListener('click', _this.resultListBlockClick);\n _this.closeButton.addEventListener('click', _this.close);\n _this.replaceButton.addEventListener('click', _this.onReplaceButtonClick);\n _this.replaceAllButton.addEventListener('click', _this.onReplaceAllButtonClick);\n };\n /**\n * Enable find pane only.\n * @private\n */\n this.onFindPane = function () {\n _this.replaceDiv.style.display = 'none';\n _this.occurrenceDiv.style.display = 'none';\n if (!isNullOrUndefined(_this.results) && _this.results.length === 0) {\n _this.matchDiv.style.display = 'none';\n _this.resultsListBlock.innerHTML = '';\n _this.resultsListBlock.style.display = 'none';\n _this.messageDiv.innerHTML = _this.localeValue.getConstant('No matches');\n }\n _this.resultsListBlock.style.height = _this.resultsListBlock.offsetHeight + _this.replaceTabContentDiv.offsetHeight + 'px';\n _this.replaceTabContentDiv.style.display = 'none';\n _this.findDiv.style.display = 'block';\n _this.messageDiv.style.display = 'block';\n _this.focusedElement = [];\n // tslint:disable-next-line:max-line-length\n _this.focusedElement.push(_this.closeButton, _this.findTabButtonHeader, _this.replaceTabButtonHeader, _this.searchInput, _this.searchIcon, _this.navigateToPreviousResult, _this.navigateToNextResult, _this.matchInput, _this.wholeInput);\n _this.focusedIndex = 3;\n _this.searchInput.select();\n _this.getMessageDivHeight();\n };\n this.onEnableDisableReplaceButton = function () {\n if (_this.searchInput.value.length !== 0) {\n _this.replaceButton.disabled = false;\n _this.replaceAllButton.disabled = false;\n }\n else {\n _this.replaceButton.disabled = true;\n _this.replaceAllButton.disabled = true;\n }\n };\n /**\n * Enable replace pane only.\n * @private\n */\n this.onReplacePane = function () {\n _this.findDiv.style.display = 'block';\n _this.replaceDiv.style.display = 'block';\n _this.replaceTabContentDiv.style.display = 'block';\n _this.resultsListBlock.style.height = _this.resultsListBlock.offsetHeight - _this.replaceTabContentDiv.offsetHeight + 'px';\n _this.isOptionsPane = false;\n _this.clearSearchResultItems();\n _this.clearSearchHighlight();\n _this.viewer.renderVisiblePages();\n if (_this.searchInput.value.length !== 0) {\n _this.replaceButton.disabled = false;\n _this.replaceAllButton.disabled = false;\n }\n else {\n _this.replaceButton.disabled = true;\n _this.replaceAllButton.disabled = true;\n }\n _this.focusedElement = [];\n // tslint:disable-next-line:max-line-length\n _this.focusedElement.push(_this.closeButton, _this.findTabButtonHeader, _this.replaceTabButtonHeader, _this.searchInput, _this.searchIcon, _this.navigateToPreviousResult, _this.navigateToNextResult, _this.matchInput, _this.wholeInput, _this.replaceWith, _this.replaceButton, _this.replaceAllButton);\n _this.focusedIndex = 9;\n if (_this.searchInput.value === '') {\n _this.searchInput.select();\n }\n else {\n _this.replaceWith.select();\n }\n if (_this.searchInput.value !== '') {\n _this.searchOptionChange();\n }\n _this.getMessageDivHeight();\n };\n /**\n * Fires on key down on options pane.\n * @param {KeyboardEvent} event - Specifies the focus of current element.\n * @private\n */\n this.onKeyDownOnOptionPane = function (event) {\n // if (event.keyCode === 70) {\n // event.preventDefault();\n // return;\n // }\n if (event.keyCode === 9) {\n event.preventDefault();\n var focusIndex = undefined;\n if (event.shiftKey) {\n focusIndex = (_this.focusedIndex === 0 || isNullOrUndefined(_this.focusedIndex)) ?\n _this.focusedElement.length - 1 : _this.focusedIndex - 1;\n }\n else {\n focusIndex = (_this.focusedElement.length - 1 === _this.focusedIndex || isNullOrUndefined(_this.focusedIndex)) ?\n 0 : _this.focusedIndex + 1;\n }\n var element = _this.focusedElement[focusIndex];\n element.focus();\n if (element instanceof HTMLInputElement) {\n element.select();\n }\n _this.focusedIndex = focusIndex;\n if (element instanceof HTMLLIElement) {\n _this.scrollToPosition(element);\n }\n }\n else if (event.keyCode === 13) {\n // tslint:disable-next-line:max-line-length\n if (event.target !== _this.searchInput && event.target !== _this.closeButton) {\n event.preventDefault();\n var index = _this.focusedElement.indexOf(event.target);\n if (index !== -1) {\n var list = _this.focusedElement[index];\n list.click();\n list.focus();\n _this.focusedIndex = index;\n }\n }\n }\n else if (event.keyCode === 40 || event.keyCode === 38) {\n if (_this.resultsListBlock.style.display !== 'none') {\n var index = void 0;\n var element = void 0;\n if (event.keyCode === 40) {\n if (_this.focusedIndex > 7) {\n if (_this.focusedIndex + 1 < _this.focusedElement.length) {\n element = _this.focusedElement[_this.focusedIndex + 1];\n element.focus();\n _this.focusedIndex = _this.focusedIndex + 1;\n }\n }\n else {\n index = (_this.focusedElement.length - _this.resultsListBlock.children.length) + _this.results.currentIndex + 1;\n if (index < _this.focusedElement.length) {\n element = _this.focusedElement[index];\n element.focus();\n _this.focusedIndex = index;\n }\n }\n }\n else {\n if (_this.focusedIndex > 8) {\n index = _this.focusedIndex - 1;\n element = _this.focusedElement[index];\n element.focus();\n _this.focusedIndex = index;\n }\n }\n }\n }\n };\n /**\n * Fires on replace.\n * @private\n */\n this.onReplaceButtonClick = function () {\n var optionsPane = _this.optionsPane;\n var findText = _this.searchInput.value;\n var replaceText = _this.replaceWith.value;\n var results = _this.viewer.owner.searchModule.textSearchResults;\n if (findText !== '' && !isNullOrUndefined(findText)) {\n if (_this.viewer.owner.selection != null) {\n var selectionText = _this.viewer.owner.selection.text;\n if (!_this.viewer.owner.selection.isEmpty) {\n // if (this.viewer.owner.selection.isForward) {\n // this.viewer.owner.selection.selectContent(this.viewer.owner.selection.start, true);\n // } else {\n // this.viewer.owner.selection.selectContent(this.viewer.owner.selection.end, true);\n // }\n }\n var pattern = _this.viewer.owner.searchModule.textSearch.stringToRegex(findText, _this.findOption);\n var endSelection = _this.viewer.selection.start;\n var index = endSelection.getHierarchicalIndexInternal();\n var result = _this.viewer.owner.searchModule.textSearch.findNext(pattern, _this.findOption, index);\n if (result !== undefined) {\n _this.viewer.owner.searchModule.navigate(result);\n _this.matchDiv.style.display = 'none';\n }\n results.addResult();\n results.innerList[0] = result;\n if (!isNullOrUndefined(result)) {\n if (result.text === selectionText) {\n var replace = isNullOrUndefined(replaceText) ? '' : replaceText;\n _this.viewer.owner.searchModule.replace(replace, result, results);\n var pattern_1 = _this.viewer.owner.searchModule.textSearch.stringToRegex(findText, _this.findOption);\n var endSelection_1 = _this.viewer.selection.end;\n var index_1 = endSelection_1.getHierarchicalIndexInternal();\n result = _this.viewer.owner.searchModule.textSearch.findNext(pattern_1, _this.findOption, index_1);\n results.addResult();\n results.innerList[0] = result;\n if (result !== undefined) {\n _this.matchDiv.style.display = 'none';\n _this.viewer.owner.searchModule.navigate(result);\n }\n else {\n _this.matchDiv.style.display = 'block';\n _this.matchDiv.innerHTML = _this.localeValue.getConstant(_this.matchDivReplaceText);\n }\n }\n }\n else {\n _this.matchDiv.style.display = 'block';\n _this.matchDiv.innerHTML = _this.localeValue.getConstant(_this.matchDivReplaceText);\n }\n }\n }\n _this.resultsListBlock.style.display = 'none';\n };\n /**\n * Fires on replace all.\n * @private\n */\n this.onReplaceAllButtonClick = function () {\n _this.replaceAll();\n _this.resultsListBlock.style.display = 'none';\n };\n /**\n * Fires on search icon.\n * @private\n */\n this.searchIconClickInternal = function () {\n // tslint:disable:no-any \n var inputElement = document.getElementById(_this.viewer.owner.containerId + '_option_search_text_box');\n // tslint:enable:no-any\n var text = inputElement.value;\n if (text === '') {\n return;\n }\n if (_this.searchIcon.classList.contains('e-de-op-search-close-icon')) {\n _this.searchIcon.classList.add('e-de-op-search-icon');\n _this.searchIcon.classList.remove('e-de-op-search-close-icon');\n inputElement.value = '';\n _this.messageDiv.innerHTML = _this.localeValue.getConstant('No matches');\n _this.resultContainer.style.display = 'block';\n _this.resultsListBlock.style.display = 'none';\n _this.clearFocusElement();\n _this.resultsListBlock.innerHTML = '';\n _this.clearSearchResultItems();\n _this.clearSearchHighlight();\n _this.viewer.renderVisiblePages();\n return;\n }\n if (_this.searchIcon.classList.contains('e-de-op-search-icon') && text.length >= 1) {\n _this.searchIcon.classList.add('e-de-op-search-close-icon');\n _this.searchIcon.classList.remove('e-de-op-search-icon');\n _this.onEnableDisableReplaceButton();\n }\n _this.clearSearchResultItems();\n _this.clearSearchHighlight();\n var patterns = _this.viewer.owner.searchModule.textSearch.stringToRegex(text, _this.findOption);\n var endSelection = _this.viewer.selection.end;\n var index = endSelection.getHierarchicalIndexInternal();\n _this.results = _this.viewer.owner.searchModule.textSearch.findAll(patterns, _this.findOption, index);\n if (_this.results != null && _this.results.length > 0) {\n _this.navigateSearchResult();\n _this.getMessageDivHeight();\n var resultsContainerHeight = _this.viewer.owner.getDocumentEditorElement().offsetHeight - 215;\n _this.resultsListBlock.style.height = resultsContainerHeight + 'px';\n }\n else {\n _this.messageDiv.innerHTML = _this.localeValue.getConstant('No matches');\n _this.resultContainer.style.display = 'block';\n _this.resultsListBlock.style.display = 'none';\n _this.clearFocusElement();\n _this.resultsListBlock.innerHTML = '';\n }\n };\n /**\n * Fires on getting next results.\n * @private\n */\n this.navigateNextResultButtonClick = function () {\n if (document.getElementById(_this.viewer.owner.containerId + '_list_box_container') != null &&\n document.getElementById(_this.viewer.owner.containerId + '_list_box_container').style.display !== 'none') {\n if (_this.results.currentIndex < _this.results.length - 1) {\n _this.results.currentIndex = _this.results.currentIndex + 1;\n var currentelement = _this.results.innerList[_this.results.currentIndex];\n // tslint:disable-next-line:max-line-length\n _this.messageDiv.innerHTML = _this.localeValue.getConstant('Result ') + (_this.results.currentIndex + 1) + _this.localeValue.getConstant(' of ') + _this.results.length;\n for (var i = 0; i < _this.resultsListBlock.children.length; i++) {\n var list = _this.resultsListBlock.children[i];\n if (list.classList.contains('e-de-search-result-hglt')) {\n list.classList.remove('e-de-search-result-hglt');\n list.children[0].classList.remove('e-de-op-search-word-text');\n list.classList.add('e-de-search-result-item');\n }\n }\n var listElement = _this.resultsListBlock.children[_this.results.currentIndex];\n if (listElement.classList.contains('e-de-search-result-item')) {\n listElement.classList.remove('e-de-search-result-item');\n listElement.classList.add('e-de-search-result-hglt');\n listElement.children[0].classList.add('e-de-op-search-word-text');\n _this.scrollToPosition(listElement);\n }\n _this.viewer.owner.searchModule.navigate(currentelement);\n _this.viewer.owner.searchModule.highlight(_this.results);\n }\n else {\n var currentelement = _this.results.innerList[0];\n _this.results.currentIndex = 0;\n // tslint:disable-next-line:max-line-length\n _this.messageDiv.innerHTML = _this.localeValue.getConstant('Result ') + (_this.results.currentIndex + 1) + _this.localeValue.getConstant(' of ') + _this.results.length;\n for (var j = 0; j < _this.resultsListBlock.children.length; j++) {\n var lists = _this.resultsListBlock.children[j];\n if (lists.classList.contains('e-de-search-result-hglt')) {\n lists.classList.remove('e-de-search-result-hglt');\n lists.children[0].classList.remove('e-de-op-search-word-text');\n lists.classList.add('e-de-search-result-item');\n }\n }\n var listElementsDiv = _this.resultsListBlock.children[_this.results.currentIndex];\n if (listElementsDiv.classList.contains('e-de-search-result-item')) {\n listElementsDiv.classList.remove('e-de-search-result-item');\n listElementsDiv.classList.add('e-de-search-result-hglt');\n listElementsDiv.children[0].classList.add('e-de-op-search-word-text');\n _this.scrollToPosition(listElementsDiv);\n }\n _this.viewer.owner.searchModule.navigate(currentelement);\n _this.viewer.owner.searchModule.highlight(_this.results);\n }\n _this.focusedIndex = _this.focusedElement.indexOf(_this.navigateToNextResult);\n }\n };\n /**\n * Fires on getting previous results.\n * @private\n */\n this.navigatePreviousResultButtonClick = function () {\n if (document.getElementById(_this.viewer.owner.containerId + '_list_box_container') != null &&\n document.getElementById(_this.viewer.owner.containerId + '_list_box_container').style.display !== 'none') {\n if (_this.results.currentIndex === 0) {\n _this.results.currentIndex = _this.results.length - 1;\n // tslint:disable-next-line:max-line-length\n _this.messageDiv.innerHTML = _this.localeValue.getConstant('Result ') + (_this.results.length) + _this.localeValue.getConstant(' of ') + _this.results.length;\n for (var index = 0; index < _this.resultsListBlock.children.length; index++) {\n var list = _this.resultsListBlock.children[index];\n if (list.classList.contains('e-de-search-result-hglt')) {\n list.classList.remove('e-de-search-result-hglt');\n list.children[0].classList.remove('e-de-op-search-word-text');\n list.classList.add('e-de-search-result-item');\n }\n }\n var liElement = _this.resultsListBlock.children[_this.results.currentIndex];\n if (liElement.classList.contains('e-de-search-result-item')) {\n liElement.classList.remove('e-de-search-result-item');\n liElement.classList.add('e-de-search-result-hglt');\n liElement.children[0].classList.add('e-de-op-search-word-text');\n _this.scrollToPosition(liElement);\n }\n var currentelement = _this.results.innerList[_this.results.currentIndex];\n _this.viewer.owner.searchModule.navigate(currentelement);\n _this.viewer.owner.searchModule.highlight(_this.results);\n }\n else {\n // tslint:disable-next-line:max-line-length\n _this.messageDiv.innerHTML = _this.localeValue.getConstant('Result ') + (_this.results.currentIndex) + _this.localeValue.getConstant(' of ') + _this.results.length;\n _this.results.currentIndex = _this.results.currentIndex - 1;\n for (var j = 0; j < _this.resultsListBlock.children.length; j++) {\n var list = _this.resultsListBlock.children[j];\n if (list.classList.contains('e-de-search-result-hglt')) {\n list.classList.remove('e-de-search-result-hglt');\n list.children[0].classList.remove('e-de-op-search-word-text');\n list.classList.add('e-de-search-result-item');\n }\n }\n var listElements = _this.resultsListBlock.children[_this.results.currentIndex];\n if (listElements.classList.contains('e-de-search-result-item')) {\n listElements.classList.remove('e-de-search-result-item');\n listElements.classList.add('e-de-search-result-hglt');\n listElements.children[0].classList.add('e-de-op-search-word-text');\n _this.scrollToPosition(listElements);\n }\n var currentelement = _this.results.innerList[_this.results.currentIndex];\n _this.viewer.owner.searchModule.navigate(currentelement);\n _this.viewer.owner.searchModule.highlight(_this.results);\n }\n _this.focusedIndex = _this.focusedElement.indexOf(_this.navigateToPreviousResult);\n }\n };\n /**\n * Fires on key down\n * @param {KeyboardEvent} event - Speficies key down actions.\n * @private\n */\n this.onKeyDown = function (event) {\n var code = event.which || event.keyCode;\n if (code === 13 && event.keyCode !== 9 && event.keyCode !== 40) {\n event.preventDefault();\n _this.findDiv.style.height = '';\n _this.onKeyDownInternal();\n }\n else if (code === 8 && (_this.searchInput.value.length === 0)) {\n _this.resultContainer.style.display = 'block';\n }\n else if (event.keyCode !== 9 && event.keyCode !== 40 && event.keyCode !== 27) {\n _this.clearSearchHighlight();\n _this.clearSearchResultItems();\n _this.viewer.renderVisiblePages();\n _this.resultsListBlock.style.display = 'none';\n _this.messageDiv.innerHTML = _this.localeValue.getConstant('No matches');\n _this.resultContainer.style.display = 'none';\n _this.clearFocusElement();\n _this.resultsListBlock.innerHTML = '';\n if (_this.searchIcon.classList.contains('e-de-op-search-close-icon')) {\n _this.searchIcon.classList.add('e-de-op-search-icon');\n _this.searchIcon.classList.remove('e-de-op-search-close-icon');\n }\n }\n else if (code === 27 && event.keyCode === 27) {\n _this.showHideOptionsPane(false);\n }\n };\n /**\n * Close the optios pane.\n * @private\n */\n this.close = function () {\n _this.clearFocusElement();\n _this.showHideOptionsPane(false);\n _this.resultsListBlock.innerHTML = '';\n _this.focusedIndex = 1;\n _this.isOptionsPane = true;\n };\n /**\n * Fires on results list block.\n * @param {MouseEvent} args - Specifies which list was clicked.\n * @private\n */\n this.resultListBlockClick = function (args) {\n var currentlist = args.target;\n var element = _this.resultsListBlock.children;\n var index = 0;\n for (var i = 0; i < element.length; i++) {\n var list_1 = element[i];\n if (list_1.classList.contains('e-de-search-result-hglt')) {\n list_1.classList.remove('e-de-search-result-hglt');\n list_1.children[0].classList.remove('e-de-op-search-word-text');\n list_1.classList.add('e-de-search-result-item');\n }\n }\n var list;\n for (var i = 0; i < element.length; i++) {\n if (currentlist === element[i]) {\n index = i;\n list = element[i];\n if (list.classList.contains('e-de-search-result-item')) {\n list.classList.remove('e-de-search-result-item');\n list.classList.add('e-de-search-result-hglt');\n list.children[0].classList.add('e-de-op-search-word-text');\n _this.focusedIndex = _this.focusedElement.indexOf(list);\n }\n }\n }\n var currentelement = _this.results.innerList[index];\n _this.results.currentIndex = index;\n // tslint:disable-next-line:max-line-length\n _this.messageDiv.innerHTML = _this.localeValue.getConstant('Result ') + (index + 1) + _this.localeValue.getConstant(' of ') + _this.results.length;\n _this.viewer.owner.searchModule.navigate(currentelement);\n _this.viewer.owner.searchModule.highlight(_this.results);\n list.focus();\n };\n this.viewer = layoutViewer;\n }\n /**\n * Get the module name.\n */\n OptionsPane.prototype.getModuleName = function () {\n return 'OptionsPane';\n };\n /**\n * Initialize the options pane.\n * @param {L10n} localeValue - Specifies the localization based on culture.\n * @private\n */\n // tslint:disable:max-func-body-length\n OptionsPane.prototype.initOptionsPane = function (localeValue) {\n var viewer = this.viewer;\n this.localeValue = localeValue;\n this.optionsPane = createElement('div', { className: 'e-de-op', styles: 'display:none;' });\n this.optionsPane.addEventListener('keydown', this.onKeyDownOnOptionPane);\n this.searchDiv = createElement('div', {\n className: this.viewer.owner.containerId + '_searchDiv e-de-op-header',\n innerHTML: localeValue.getConstant(this.searchText)\n });\n this.optionsPane.appendChild(this.searchDiv);\n // tslint:disable-next-line:max-line-length\n this.closeButton = createElement('button', { className: 'e-de-op-close-button e-de-op-icon-btn e-btn e-flat e-icon-btn', id: 'close' });\n this.optionsPane.appendChild(this.closeButton);\n var closeSpan = createElement('span', { className: 'e-de-op-close-icon e-btn-icon e-icons' });\n this.closeButton.appendChild(closeSpan);\n this.focusedElement.push(this.closeButton);\n this.findTab = createElement('div', { id: this.viewer.owner.containerId + '_findTabDiv', className: 'e-de-op-tab' });\n this.optionsPane.appendChild(this.findTab);\n var tabHeader = createElement('div', { className: 'e-tab-header' });\n this.findTab.appendChild(tabHeader);\n this.findTabButton = createElement('div', { innerHTML: localeValue.getConstant(this.findPaneText) });\n this.focusedElement.push(this.findTabButtonHeader);\n tabHeader.appendChild(this.findTabButton);\n this.replaceTabButton = createElement('div', { innerHTML: localeValue.getConstant(this.replacePaneText) });\n this.focusedElement.push(this.replaceTabButtonHeader);\n tabHeader.appendChild(this.replaceTabButton);\n var tabContent = createElement('div', { className: 'e-content' });\n var findTabContent = createElement('div', { id: 'findTabContent' });\n tabContent.appendChild(findTabContent);\n this.findTabContentDiv = createElement('div', { className: 'e-de-search-tab-content' });\n this.searchTextBoxContainer = createElement('div', { className: 'e-input-group e-de-op-input-group' });\n this.findTabContentDiv.appendChild(this.searchTextBoxContainer);\n // tslint:disable-next-line:max-line-length\n this.searchInput = createElement('input', { className: 'e-input e-de-search-input', id: this.viewer.owner.containerId + '_option_search_text_box', attrs: { placeholder: 'Search for' }, styles: 'font-size:14px;' });\n this.searchTextBoxContainer.appendChild(this.searchInput);\n this.searchIcon = createElement('span', {\n className: 'e-de-op-icon e-de-op-search-icon e-input-group-icon e-icon',\n id: this.viewer.owner.containerId + '_search-icon'\n });\n this.searchIcon.tabIndex = 0;\n this.searchTextBoxContainer.appendChild(this.searchIcon);\n this.focusedElement.push(this.searchIcon);\n // tslint:disable-next-line:max-line-length\n this.navigateToPreviousResult = createElement('span', { className: 'e-de-op-icon e-de-op-nav-btn e-arrow-up e-spin-up e-btn-icon e-icon e-input-group-icon' });\n this.navigateToPreviousResult.tabIndex = 0;\n this.searchTextBoxContainer.appendChild(this.navigateToPreviousResult);\n this.focusedElement.push(this.navigateToPreviousResult);\n // tslint:disable-next-line:max-line-length\n this.navigateToNextResult = createElement('span', { className: 'e-de-op-icon e-de-op-nav-btn e-arrow-down e-spin-down e-btn-icon e-icon e-input-group-icon' });\n this.navigateToNextResult.tabIndex = 0;\n this.searchTextBoxContainer.appendChild(this.navigateToNextResult);\n this.focusedElement.push(this.navigateToNextResult);\n var div = createElement('div', { className: 'e-de-op-more-less' });\n this.matchInput = createElement('input', {\n attrs: { type: 'checkbox' },\n id: this.viewer.owner.containerId + '_matchCase'\n });\n div.appendChild(this.matchInput);\n this.matchCase = new CheckBox({ label: 'Match case', checked: false, change: this.matchChange });\n this.matchCase.appendTo(this.matchInput);\n this.focusedElement.push(this.matchInput);\n this.matchInput.tabIndex = 0;\n this.wholeInput = createElement('input', {\n attrs: { type: 'checkbox' },\n id: this.viewer.owner.containerId + '_wholeWord',\n });\n div.appendChild(this.wholeInput);\n this.wholeWord = new CheckBox({ label: 'Whole words', checked: false, change: this.wholeWordsChange });\n this.wholeWord.appendTo(this.wholeInput);\n this.focusedElement.push(this.wholeInput);\n this.wholeInput.tabIndex = 0;\n this.findTabContentDiv.appendChild(div);\n var replaceTabContent = createElement('div');\n tabContent.appendChild(replaceTabContent);\n this.replaceTabContentDiv = createElement('div', { className: 'e-de-op-replacetabcontentdiv', styles: 'display:none;' });\n tabContent.appendChild(this.replaceTabContentDiv);\n this.findTabContentDiv.appendChild(this.replaceTabContentDiv);\n this.createReplacePane();\n this.findDiv = createElement('div', { className: 'findDiv', styles: 'height:250px;display:block;' });\n findTabContent.appendChild(this.findTabContentDiv);\n this.resultContainer = createElement('div', { styles: 'width:85%;display:block;', className: 'e-de-op-result-container' });\n this.findDiv.appendChild(this.resultContainer);\n // tslint:disable-next-line:max-line-length\n this.messageDiv = createElement('div', { className: this.viewer.owner.containerId + '_messageDiv e-de-op-msg', innerHTML: this.localeValue.getConstant(this.messageDivText), id: this.viewer.owner.containerId + '_search_status' });\n this.resultContainer.appendChild(this.messageDiv);\n // tslint:disable-next-line:max-line-length\n this.resultsListBlock = createElement('div', { id: this.viewer.owner.containerId + '_list_box_container', styles: 'display:none;width:270px;list-style:none;padding-right:5px;overflow:auto;', className: 'e-de-result-list-block' });\n this.findDiv.appendChild(this.resultsListBlock);\n this.findTabContentDiv.appendChild(this.findDiv);\n this.findTab.appendChild(tabContent);\n this.tabInstance = new Tab({ selected: this.selectedTabItem });\n this.tabInstance.appendTo(this.findTab);\n var findHeader = this.tabInstance.element.getElementsByClassName('e-item e-toolbar-item')[0];\n this.findTabButtonHeader = findHeader.getElementsByClassName('e-tab-wrap')[0];\n this.findTabButtonHeader.classList.add('e-de-op-find-tab-header');\n this.findTabButtonHeader.tabIndex = 0;\n var replaceHeader = this.tabInstance.element.getElementsByClassName('e-item e-toolbar-item')[1];\n this.replaceTabButtonHeader = replaceHeader.getElementsByClassName('e-tab-wrap')[0];\n this.replaceTabButtonHeader.classList.add('e-de-op-replace-tab-header');\n this.replaceTabButtonHeader.tabIndex = 0;\n this.onWireEvents();\n };\n /**\n * Create replace pane instances.\n */\n OptionsPane.prototype.createReplacePane = function () {\n this.replaceDiv = createElement('div');\n this.replaceTabContentDiv.appendChild(this.replaceDiv);\n this.replaceWith = createElement('input', {\n className: 'e-de-op-replacewith e-input', styles: 'font-size:14px;',\n attrs: { placeholder: 'Replace with' }\n });\n this.replaceDiv.appendChild(this.replaceWith);\n var replaceButtonDiv = createElement('div', { styles: 'text-align:right;', className: 'e-de-op-dlg-footer' });\n this.replaceDiv.appendChild(replaceButtonDiv);\n this.replaceButton = createElement('button', {\n className: 'e-control e-btn e-flat e-replace',\n styles: 'font-size:12px;margin-right:10px;',\n innerHTML: this.localeValue.getConstant(this.replaceButtonText)\n });\n replaceButtonDiv.appendChild(this.replaceButton);\n this.replaceAllButton = createElement('button', {\n className: 'e-control e-btn e-flat e-replaceall',\n styles: 'font-size:12px;',\n innerHTML: this.localeValue.getConstant(this.replaceAllButtonText)\n });\n replaceButtonDiv.appendChild(this.replaceAllButton);\n this.matchDiv = createElement('div', { styles: 'display:none;padding-top:10px;' });\n this.replaceDiv.appendChild(this.matchDiv);\n var emptyDiv6 = createElement('div', { className: 'e-de-op-search-replacediv' });\n this.replaceDiv.appendChild(emptyDiv6);\n this.occurrenceDiv = createElement('div', { styles: 'display:none;' });\n this.replaceDiv.appendChild(this.occurrenceDiv);\n };\n OptionsPane.prototype.navigateSearchResult = function () {\n this.viewer.owner.searchModule.navigate(this.results.innerList[this.results.currentIndex]);\n this.viewer.owner.searchModule.highlight(this.results);\n this.viewer.owner.searchModule.addFindResultView(this.results);\n this.resultsListBlock.style.display = 'block';\n this.resultContainer.style.display = 'block';\n var lists = this.viewer.owner.findResultsList;\n var text = '';\n for (var i = 0; i < lists.length; i++) {\n text += lists[i];\n }\n this.clearFocusElement();\n this.resultsListBlock.innerHTML = text;\n for (var i = 0; i < this.resultsListBlock.children.length; i++) {\n this.focusedElement.push(this.resultsListBlock.children[i]);\n }\n var currentIndexValue = this.results.currentIndex;\n // tslint:disable-next-line:max-line-length\n this.messageDiv.innerHTML = this.localeValue.getConstant('Result ') + (currentIndexValue + 1) + this.localeValue.getConstant(' of ') + this.results.length;\n var listElement = this.resultsListBlock.children[currentIndexValue];\n if (listElement.classList.contains('e-de-search-result-item')) {\n listElement.classList.remove('e-de-search-result-item');\n listElement.classList.add('e-de-search-result-hglt');\n listElement.children[0].classList.add('e-de-op-search-word-text');\n this.scrollToPosition(listElement);\n }\n };\n /**\n * Fires on key down actions done.\n * @private\n */\n OptionsPane.prototype.onKeyDownInternal = function () {\n // tslint:disable-next-line:max-line-length\n var inputElement = document.getElementById(this.viewer.owner.containerId + '_option_search_text_box');\n inputElement.blur();\n var text = inputElement.value;\n if (text === '') {\n return;\n }\n if (text.length >= 1 && this.searchIcon.classList.contains('e-de-op-search-icon')) {\n this.searchIcon.classList.add('e-de-op-search-close-icon');\n this.searchIcon.classList.remove('e-de-op-search-icon');\n }\n var resultsContainerHeight = this.viewer.owner.getDocumentEditorElement().offsetHeight - 215;\n this.clearSearchResultItems();\n this.clearSearchHighlight();\n var pattern = this.viewer.owner.searchModule.textSearch.stringToRegex(text, this.findOption);\n var endSelection = this.viewer.selection.end;\n var index = endSelection.getHierarchicalIndexInternal();\n this.results = this.viewer.owner.searchModule.textSearch.findAll(pattern, this.findOption, index);\n var results = this.results;\n if (isNullOrUndefined(results)) {\n this.viewer.renderVisiblePages();\n }\n if (results != null && results.length > 0) {\n if ((this.focusedElement.indexOf(this.navigateToPreviousResult) === -1) && this.isOptionsPane) {\n this.focusedElement.push(this.navigateToPreviousResult);\n }\n if ((this.focusedElement.indexOf(this.navigateToNextResult) === -1) && this.isOptionsPane) {\n this.focusedElement.push(this.navigateToNextResult);\n }\n this.viewer.owner.searchModule.navigate(this.results.innerList[this.results.currentIndex]);\n this.viewer.owner.searchModule.highlight(results);\n this.viewer.owner.searchModule.addFindResultView(results);\n // if (this.isOptionsPane) {\n this.resultsListBlock.style.display = 'block';\n this.resultsListBlock.style.height = resultsContainerHeight + 'px';\n this.resultContainer.style.display = 'block';\n var list = this.viewer.owner.findResultsList;\n var text_1 = '';\n this.clearFocusElement();\n this.resultsListBlock.innerHTML = '';\n for (var i = 0; i < list.length; i++) {\n text_1 += list[i];\n }\n this.resultsListBlock.innerHTML = text_1;\n for (var i = 0; i < this.resultsListBlock.children.length; i++) {\n this.focusedElement.push(this.resultsListBlock.children[i]);\n }\n var lists = this.resultsListBlock.children;\n var currentIndex = this.results.currentIndex;\n // tslint:disable-next-line:max-line-length\n this.messageDiv.innerHTML = this.localeValue.getConstant('Result ') + (currentIndex + 1) + this.localeValue.getConstant(' of ') + this.results.length;\n var listElement = this.resultsListBlock.children[currentIndex];\n if (listElement.classList.contains('e-de-search-result-item')) {\n listElement.classList.remove('e-de-search-result-item');\n listElement.classList.add('e-de-search-result-hglt');\n listElement.children[0].classList.add('e-de-op-search-word-text');\n }\n this.navigateToNextResult.focus();\n this.focusedIndex = 6;\n this.getMessageDivHeight();\n // } else {\n //this.focusedIndex = 4;\n // }\n }\n else {\n this.messageDiv.innerHTML = this.localeValue.getConstant('No matches');\n this.resultContainer.style.display = 'block';\n this.resultsListBlock.style.display = 'none';\n this.clearFocusElement();\n this.resultsListBlock.innerHTML = '';\n }\n };\n OptionsPane.prototype.getMessageDivHeight = function () {\n if (!this.isOptionsPane && this.messageDiv.classList.contains('e-de-op-msg')) {\n this.messageDiv.classList.add('e-de-op-replace-messagediv');\n this.messageDiv.classList.remove('e-de-op-msg');\n }\n else if (this.isOptionsPane && this.messageDiv.classList.contains('e-de-op-replace-messagediv')) {\n this.messageDiv.classList.add('e-de-op-msg');\n this.messageDiv.classList.remove('e-de-op-replace-messagediv');\n }\n };\n /**\n * Replace all.\n * @private\n */\n OptionsPane.prototype.replaceAll = function () {\n var optionsPane = this.optionsPane;\n var findText = this.searchInput.value;\n var replaceText = this.replaceWith.value;\n if (findText !== '' && !isNullOrUndefined(findText)) {\n var pattern = this.viewer.owner.searchModule.textSearch.stringToRegex(findText, this.findOption);\n var endSelection = this.viewer.selection.end;\n var index = endSelection.getHierarchicalIndexInternal();\n var results = this.viewer.owner.searchModule.textSearch.findAll(pattern, this.findOption, index);\n var replace = isNullOrUndefined(replaceText) ? '' : replaceText;\n this.viewer.owner.searchModule.replaceAll(replace, results);\n this.matchDiv.style.display = 'block';\n this.matchDiv.innerHTML = this.localeValue.getConstant(this.matchDivReplaceAllText);\n this.occurrenceDiv.style.display = 'block';\n var count = isNullOrUndefined(results) ? 0 : results.length;\n // tslint:disable-next-line:max-line-length\n this.occurrenceDiv.innerHTML = this.occurrenceDivText + count + this.localeValue.getConstant(' instances of \"') + findText + this.localeValue.getConstant('\" with \"') + replaceText + '\" ';\n }\n };\n /**\n * Scrolls to position.\n * @param {HTMLElement} list - Specifies the list element.\n * @private\n */\n OptionsPane.prototype.scrollToPosition = function (list) {\n var rect = list.getBoundingClientRect();\n var top;\n if (rect.top > 0) {\n top = rect.top - list.parentElement.getBoundingClientRect().top;\n if ((list.parentElement.offsetHeight - top) <= list.offsetHeight) {\n if (Math.ceil(top + list.offsetHeight) === list.parentElement.scrollHeight) {\n list.parentElement.scrollTop = top;\n }\n list.parentElement.scrollTop = list.parentElement.scrollTop + (list.parentElement.offsetHeight / 100) * 30;\n }\n else if (top < 0) {\n list.parentElement.scrollTop = list.parentElement.scrollTop - (list.parentElement.offsetHeight / 100) * 30;\n }\n }\n else {\n list.parentElement.scrollTop = 0;\n }\n };\n /**\n * Clear the focus elements.\n * @private\n */\n OptionsPane.prototype.clearFocusElement = function () {\n for (var i = 0; i < this.resultsListBlock.children.length; i++) {\n var index = this.focusedElement.indexOf(this.resultsListBlock.children[i]);\n if (index !== -1) {\n this.focusedElement.splice(index, 1);\n }\n }\n this.focusedIndex = 0;\n };\n /**\n * Show or hide option pane based on boolean value.\n * @param {boolean} show - Specifies showing or hiding the options pane.\n * @private\n */\n OptionsPane.prototype.showHideOptionsPane = function (show) {\n if (!isNullOrUndefined(this.viewer.owner.selectionModule)) {\n if (show) {\n this.localeValue = new L10n('documenteditor', this.viewer.owner.defaultLocale);\n this.localeValue.setLocale(this.viewer.owner.locale);\n setCulture(this.viewer.owner.locale);\n if (isNullOrUndefined(this.optionsPane)) {\n this.initOptionsPane(this.localeValue);\n //Add Option Pane\n var element = document.getElementById(this.viewer.owner.element.id);\n var optionPaneContainer = document.createElement('div');\n optionPaneContainer.className = 'e-documenteditor-optionspane';\n optionPaneContainer.setAttribute('style', 'display:inline-flex');\n optionPaneContainer.appendChild(this.viewer.owner.optionsPaneModule.optionsPane);\n this.viewer.owner.getDocumentEditorElement().appendChild(optionPaneContainer);\n optionPaneContainer.appendChild(this.viewer.viewerContainer);\n element.appendChild(optionPaneContainer);\n }\n this.optionsPane.style.display = 'block';\n if (this.viewer.owner.isReadOnlyMode) {\n this.tabInstance.hideTab(1);\n }\n else {\n this.tabInstance.hideTab(1, false);\n }\n if (this.isReplace && !this.viewer.owner.isReadOnlyMode) {\n this.tabInstance.select(1);\n this.isReplace = false;\n this.isOptionsPane = false;\n }\n else {\n this.tabInstance.select(0);\n }\n this.searchDiv.innerHTML = this.localeValue.getConstant(this.searchText);\n this.isOptionsPaneShow = true;\n // tslint:disable-next-line:max-line-length\n var textBox = document.getElementById(this.viewer.owner.getDocumentEditorElement().id + '_option_search_text_box');\n var selectedText = this.viewer.owner.selection.text;\n if (!isNullOrUndefined(selectedText)) {\n var char = ['\\v', '\\r'];\n var index = HelperMethods.indexOfAny(selectedText, char);\n selectedText = index < 0 ? selectedText : selectedText.substring(0, index);\n }\n textBox.value = selectedText;\n textBox.select();\n this.messageDiv.innerHTML = '';\n if (this.searchIcon.classList.contains('e-de-op-search-close-icon')) {\n this.searchIcon.classList.add('e-de-op-search-icon');\n this.searchIcon.classList.remove('e-de-op-search-close-icon');\n }\n this.viewer.selection.caret.style.display = 'none';\n this.focusedIndex = 3;\n this.focusedElement = [];\n if (this.isOptionsPane) {\n // tslint:disable-next-line:max-line-length\n this.focusedElement.push(this.closeButton, this.findTabButtonHeader, this.replaceTabButtonHeader, this.searchInput, this.searchIcon, this.navigateToPreviousResult, this.navigateToNextResult, this.matchInput, this.wholeInput);\n }\n else {\n // tslint:disable-next-line:max-line-length\n this.focusedElement.push(this.closeButton, this.findTabButtonHeader, this.replaceTabButtonHeader, this.searchInput, this.searchIcon, this.navigateToPreviousResult, this.navigateToNextResult, this.matchInput, this.wholeInput, this.replaceWith, this.replaceButton, this.replaceAllButton);\n }\n this.viewer.updateViewerSize();\n }\n else {\n if (!isNullOrUndefined(this.optionsPane)) {\n this.clearSearchResultItems();\n this.clearSearchHighlight();\n this.isOptionsPaneShow = false;\n var resultListBox = document.getElementById(this.viewer.owner.containerId + '_list_box_container');\n var message = document.getElementById(this.viewer.owner.containerId + '_search_status');\n if (!isNullOrUndefined(resultListBox) && !isNullOrUndefined(message)) {\n resultListBox.style.display = 'none';\n this.clearFocusElement();\n resultListBox.innerHTML = '';\n message.innerHTML = this.localeValue.getConstant('No matches');\n }\n }\n this.viewer.updateViewerSize();\n if (!isNullOrUndefined(this.optionsPane)) {\n if (this.optionsPane.style.display !== 'none') {\n this.viewer.selection.updateCaretPosition();\n this.optionsPane.style.display = 'none';\n }\n }\n this.viewer.updateFocus();\n this.viewer.selection.caret.style.display = 'block';\n }\n }\n };\n /**\n * Adds search highlight border.\n * @private\n */\n OptionsPane.prototype.addSearchHighlightBorder = function (lineWidget) {\n var highlighters = undefined;\n if (this.searchHighlighters.containsKey(lineWidget)) {\n highlighters = this.searchHighlighters.get(lineWidget);\n }\n else {\n highlighters = [];\n this.searchHighlighters.add(lineWidget, highlighters);\n }\n var searchHighlight = new SearchWidgetInfo(0, 0);\n highlighters.push(searchHighlight);\n return searchHighlight;\n };\n /**\n * Clears search results.\n * @private\n */\n OptionsPane.prototype.clearSearchResultItems = function () {\n if (!isNullOrUndefined(this.viewer.owner.findResultsList)) {\n this.viewer.owner.findResultsList = [];\n }\n };\n /**\n * Clears search highlight.\n * @private\n */\n OptionsPane.prototype.clearSearchHighlight = function () {\n if (!isNullOrUndefined(this.searchHighlighters)) {\n this.searchHighlighters.clear();\n this.searchHighlighters = undefined;\n }\n };\n /**\n * Highlight search result\n * @private\n */\n OptionsPane.prototype.highlightSearchResult = function (paragraph, start, end) {\n var selectionStartIndex = 0;\n var selectionEndIndex = 0;\n var startElement = null;\n var endElement = null;\n // tslint:disable-next-line:max-line-length\n var lineWidget = this.viewer.selection.getStartLineWidget(paragraph, start, startElement, selectionStartIndex);\n selectionStartIndex = lineWidget.index;\n startElement = lineWidget.element;\n var startLineWidget = startElement ? startElement.line : paragraph.childWidgets[0];\n var endLine = this.viewer.selection.getEndLineWidget(end, endElement, selectionEndIndex);\n selectionEndIndex = endLine.index;\n endElement = endLine.element;\n var endLineWidget = endElement ? endElement.line :\n end.paragraph.childWidgets[end.paragraph.childWidgets.length - 1];\n var top = this.viewer.selection.getTop(startLineWidget);\n var left = this.viewer.selection.getLeftInternal(startLineWidget, startElement, selectionStartIndex);\n if (!isNullOrUndefined(startLineWidget) && startLineWidget === endLineWidget) {\n //find result ends in current line.\n var right = this.viewer.selection.getLeftInternal(endLineWidget, endElement, selectionEndIndex);\n this.createHighlightBorder(startLineWidget, right - left, left, top);\n }\n else {\n if (!isNullOrUndefined(startLineWidget)) {\n if (paragraph !== startLineWidget.paragraph) {\n paragraph = startLineWidget.paragraph;\n }\n // tslint:disable-next-line:max-line-length\n this.createHighlightBorder(startLineWidget, this.viewer.selection.getWidth(startLineWidget, true) - (left - startLineWidget.paragraph.x), left, top);\n var lineIndex = startLineWidget.paragraph.childWidgets.indexOf(startLineWidget);\n //Iterates to last item of paragraph or search result end.\n var startParagraphWidget = void 0;\n for (var i = 0; i < paragraph.childWidgets.length; i++) {\n if (paragraph === startLineWidget.paragraph) {\n lineIndex += 1;\n }\n this.highlightSearchResultParaWidget(paragraph, lineIndex, endLineWidget, endElement, selectionEndIndex);\n if (paragraph === endLineWidget.paragraph) {\n return;\n }\n else {\n lineIndex = 0;\n }\n }\n }\n }\n };\n /**\n * @private\n */\n // tslint:disable-next-line:max-line-length\n OptionsPane.prototype.highlightSearchResultParaWidget = function (widget, startIndex, endLine, endElement, endIndex) {\n var top = 0;\n for (var j = startIndex; j < widget.childWidgets.length; j++) {\n var lineWidget = widget.childWidgets[j];\n if (j === startIndex) {\n top = this.viewer.selection.getTop(lineWidget);\n }\n var left = this.viewer.selection.getLeft(lineWidget);\n if (lineWidget === endLine) {\n //Search result ends in current line.\n var right = this.viewer.selection.getLeftInternal(endLine, endElement, endIndex);\n this.createHighlightBorder(lineWidget, right - left, left, top);\n return;\n }\n this.createHighlightBorder(lineWidget, this.viewer.selection.getWidth(lineWidget, true) - (left - widget.x), left, top);\n top += lineWidget.height;\n }\n };\n /**\n * @private\n */\n OptionsPane.prototype.createHighlightBorder = function (lineWidget, width, left, top) {\n var findHighLight = this.addSearchHighlightBorder(lineWidget);\n var page = this.viewer.owner.selection.getPage(lineWidget.paragraph);\n var pageTop = page.boundingRectangle.y;\n var pageLeft = page.boundingRectangle.x;\n findHighLight.left = Math.ceil(left);\n top = Math.ceil(top);\n findHighLight.width = Math.floor(width);\n var height = Math.floor(lineWidget.height);\n var context = this.viewer.containerContext;\n };\n /**\n * Dispose the internal objects which are maintained.\n * @private\n */\n OptionsPane.prototype.destroy = function () {\n if (this.optionsPane) {\n this.optionsPane.innerHTML = '';\n this.optionsPane = undefined;\n }\n if (this.resultsListBlock) {\n this.resultsListBlock.innerHTML = '';\n this.resultsListBlock = undefined;\n }\n if (this.messageDiv) {\n this.messageDiv.innerHTML = '';\n this.messageDiv = undefined;\n }\n if (this.resultContainer) {\n this.resultContainer.innerHTML = '';\n }\n this.resultContainer = undefined;\n if (this.searchInput) {\n this.searchInput.value = '';\n this.searchInput = undefined;\n }\n if (this.searchDiv) {\n this.searchDiv.innerHTML = '';\n this.searchDiv = undefined;\n }\n if (this.searchTextBoxContainer) {\n this.searchTextBoxContainer.innerHTML = '';\n this.searchTextBoxContainer = undefined;\n }\n if (this.replaceWith) {\n this.replaceWith.innerHTML = '';\n this.replaceWith = undefined;\n }\n if (this.findDiv) {\n this.findDiv.innerHTML = '';\n this.findDiv = undefined;\n }\n if (this.replaceButton) {\n this.replaceButton.innerHTML = '';\n this.replaceButton = undefined;\n }\n if (this.replaceAllButton) {\n this.replaceAllButton.innerHTML = '';\n this.replaceAllButton = undefined;\n }\n if (this.matchInput) {\n this.matchInput.innerHTML = '';\n this.matchCase = undefined;\n }\n if (this.wholeInput) {\n this.wholeInput.innerHTML = '';\n this.wholeWord = undefined;\n }\n if (this.regularInput) {\n this.regularInput.innerHTML = '';\n this.regular = undefined;\n }\n if (!isNullOrUndefined(this.results)) {\n this.results.destroy();\n }\n if (this.focusedElement) {\n this.focusedElement = [];\n }\n this.focusedElement = undefined;\n this.destroyInternal();\n };\n /**\n * Dispose the internal objects which are maintained.\n */\n OptionsPane.prototype.destroyInternal = function () {\n if (this.searchText) {\n this.searchText = undefined;\n }\n if (this.resultsText) {\n this.resultsText = undefined;\n }\n if (this.messageDivText) {\n this.messageDivText = undefined;\n }\n if (this.replaceButtonText) {\n this.replaceButtonText = undefined;\n }\n if (this.replaceAllButtonText) {\n this.replaceAllButtonText = undefined;\n }\n if (this.occurrenceDivText) {\n this.occurrenceDivText = undefined;\n }\n };\n return OptionsPane;\n}());\nexport { OptionsPane };\n","import { TableWidget } from '../index';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Point, HelperMethods } from './editor-helper';\n/**\n * @private\n */\nvar TableResizer = /** @class */ (function () {\n /**\n * @private\n */\n function TableResizer(node) {\n this.resizeNode = 0;\n this.resizerPosition = 0;\n this.currentResizingTable = undefined;\n this.owner = node;\n this.startingPoint = new Point(0, 0);\n }\n Object.defineProperty(TableResizer.prototype, \"viewer\", {\n /**\n * @private\n */\n get: function () {\n return this.owner.viewer;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Gets module name.\n */\n TableResizer.prototype.getModuleName = function () {\n return 'TableResizer';\n };\n /**\n * @private\n */\n TableResizer.prototype.updateResizingHistory = function (touchPoint) {\n if (this.owner.editorHistory) {\n this.owner.editorHistory.updateResizingHistory(touchPoint, this);\n }\n this.viewer.isRowOrCellResizing = false;\n this.resizerPosition = -1;\n };\n TableResizer.prototype.handleResize = function (point) {\n this.owner.viewer.isRowOrCellResizing = true;\n this.startingPoint.x = point.x;\n this.startingPoint.y = point.y;\n //Initialize resizing history.\n this.owner.editorHistory.initResizingHistory(point, this);\n };\n //Table Resizing implementation starts\n /**\n * @private\n */\n TableResizer.prototype.isInRowResizerArea = function (touchPoint) {\n var position = this.getRowReSizerPosition(undefined, touchPoint);\n if (position === -1) {\n return false;\n }\n else {\n this.resizeNode = 1;\n this.resizerPosition = position;\n return true;\n }\n };\n TableResizer.prototype.isInCellResizerArea = function (touchPoint) {\n var position = this.getCellReSizerPosition(touchPoint);\n if (position === -1) {\n return false;\n }\n else {\n this.resizeNode = 0;\n this.resizerPosition = position;\n return true;\n }\n };\n /**\n * Gets cell resizer position.\n * @param {Point} point\n * @private\n */\n TableResizer.prototype.getCellReSizerPosition = function (touchPoint) {\n var position = -1;\n var resizerBoundaryWidth = 2;\n var tableWidget = this.getTableWidget(touchPoint);\n var cellWidget = this.getTableCellWidget(touchPoint);\n var cellSpacing = isNullOrUndefined(tableWidget) ? 0 : tableWidget.tableFormat.cellSpacing;\n if (tableWidget && cellSpacing > 0) {\n this.currentResizingTable = tableWidget;\n // tslint:disable-next-line:max-line-length\n if (this.viewer.isInsideRect(tableWidget.x - HelperMethods.convertPointToPixel(tableWidget.leftBorderWidth) - 0.25, tableWidget.y, HelperMethods.convertPointToPixel(tableWidget.leftBorderWidth) + 0.5, tableWidget.height, touchPoint)) {\n return position = 0;\n }\n var startingPointX = tableWidget.x;\n for (var i = 0; i < tableWidget.tableHolder.columns.length; i++) {\n var preferredWidth = HelperMethods.convertPointToPixel(tableWidget.tableHolder.columns[i].preferredWidth);\n // tslint:disable-next-line:max-line-length\n if ((this.viewer.isInsideRect(startingPointX - 1, tableWidget.y, tableWidget.leftBorderWidth + resizerBoundaryWidth, tableWidget.height, touchPoint))) {\n return position = i > 0 ? i : 0;\n // tslint:disable-next-line:max-line-length\n }\n else if (i > 0 && (this.viewer.isInsideRect(startingPointX + preferredWidth - resizerBoundaryWidth / 2, tableWidget.y, resizerBoundaryWidth, tableWidget.height, touchPoint))) {\n return position = (i + 1);\n }\n startingPointX = startingPointX + preferredWidth;\n }\n }\n else {\n if (!isNullOrUndefined(cellWidget)) {\n this.currentResizingTable = cellWidget.ownerTable;\n // tslint:disable-next-line:max-line-length\n if (this.viewer.isInsideRect(cellWidget.x - cellWidget.margin.left - resizerBoundaryWidth / 2, cellWidget.y - cellWidget.margin.top, resizerBoundaryWidth, cellWidget.height, touchPoint)) {\n return position = cellWidget.columnIndex;\n // tslint:disable-next-line:max-line-length\n }\n else if (isNullOrUndefined(cellWidget.nextRenderedWidget)\n && this.viewer.isInsideRect(cellWidget.x + cellWidget.margin.right + cellWidget.width - resizerBoundaryWidth / 2, cellWidget.y - cellWidget.margin.top, resizerBoundaryWidth, cellWidget.height, touchPoint)) {\n return position = (cellWidget.columnIndex + cellWidget.cellFormat.columnSpan);\n }\n else if (cellWidget.childWidgets.length > 0) {\n return this.getCellReSizerPositionInternal(cellWidget, touchPoint); // Gets the nested table resizer position.\n }\n }\n }\n return position;\n };\n /**\n * Gets cell resizer position.\n * @param {TableCellWidget} cellWidget\n * @param {Point} touchPoint\n */\n TableResizer.prototype.getCellReSizerPositionInternal = function (cellWidget, touchPoint) {\n var position = -1;\n var childTableWidget = this.getTableWidgetFromWidget(touchPoint, cellWidget);\n var childCellWidget = undefined;\n if (!isNullOrUndefined(childTableWidget) && childTableWidget.tableFormat.cellSpacing > 0) {\n this.currentResizingTable = childTableWidget;\n // tslint:disable-next-line:max-line-length\n if (this.viewer.isInsideRect(childTableWidget.x - childTableWidget.leftBorderWidth - 0.25, childTableWidget.y, childTableWidget.leftBorderWidth + 0.5, childTableWidget.height, touchPoint)) {\n return position = 0;\n }\n var startingPointX = childTableWidget.x;\n for (var i = 0; i < childTableWidget.tableHolder.columns.length; i++) {\n // tslint:disable-next-line:max-line-length\n var preferredWidth = HelperMethods.convertPointToPixel(childTableWidget.tableHolder.columns[i].preferredWidth);\n // tslint:disable-next-line:max-line-length\n if ((this.viewer.isInsideRect(startingPointX - 1, childTableWidget.y, childTableWidget.leftBorderWidth + 2, childTableWidget.height, touchPoint))) {\n return position = i > 0 ? i : 0;\n // tslint:disable-next-line:max-line-length\n }\n else if (i > 0 && (this.viewer.isInsideRect(startingPointX + preferredWidth - 1, childTableWidget.y, 2, childTableWidget.height, touchPoint))) {\n return position = (i + 1);\n }\n startingPointX = startingPointX + preferredWidth;\n }\n }\n else {\n if (!isNullOrUndefined(childTableWidget)) {\n childCellWidget = childTableWidget.getTableCellWidget(touchPoint);\n }\n if (!isNullOrUndefined(childCellWidget)) {\n this.currentResizingTable = childCellWidget.ownerTable;\n // tslint:disable-next-line:max-line-length\n if (this.viewer.isInsideRect(childCellWidget.x - childCellWidget.margin.left - 1, childCellWidget.y - childCellWidget.margin.top, 2, childCellWidget.height, touchPoint)) {\n return position = childCellWidget.columnIndex;\n }\n else if (isNullOrUndefined(childCellWidget.nextRenderedWidget)\n // tslint:disable-next-line:max-line-length\n && this.viewer.isInsideRect(childCellWidget.x + childCellWidget.margin.right + childCellWidget.width - 1, childCellWidget.y - childCellWidget.margin.top, 2, childCellWidget.height, touchPoint)) {\n return position = (childCellWidget.columnIndex + childCellWidget.cellFormat.columnSpan);\n }\n else if (childCellWidget.childWidgets.length > 0) {\n return this.getCellReSizerPositionInternal(childCellWidget, touchPoint);\n }\n }\n }\n return position;\n };\n TableResizer.prototype.getRowReSizerPosition = function (widget, touchPoint) {\n var tableWidget = undefined;\n var cellWidget = undefined;\n if (isNullOrUndefined(widget)) {\n tableWidget = this.getTableWidget(touchPoint);\n cellWidget = this.getTableCellWidget(touchPoint);\n }\n else {\n tableWidget = this.getTableWidgetFromWidget(touchPoint, widget);\n }\n var cellSpacing = isNullOrUndefined(tableWidget) ? 0 : tableWidget.tableFormat.cellSpacing;\n if (tableWidget && cellSpacing > 0) {\n this.currentResizingTable = tableWidget;\n // tslint:disable-next-line:max-line-length\n if (this.owner.viewer.isInsideRect(tableWidget.x, tableWidget.y + tableWidget.height - cellSpacing, this.getActualWidth(tableWidget.lastChild), (isNullOrUndefined(tableWidget.nextSplitWidget) ? tableWidget.bottomBorderWidth + cellSpacing : 0), touchPoint)) {\n return tableWidget.lastChild.rowIndex;\n }\n for (var i = 0; i < tableWidget.childWidgets.length; i++) {\n //Need to consider for splitted widgets\n var rowWidget = tableWidget.childWidgets[i];\n if (tableWidget.childWidgets.indexOf(rowWidget) > -1\n // tslint:disable-next-line:max-line-length\n && (this.owner.viewer.isInsideRect(rowWidget.x, rowWidget.y + rowWidget.height + cellSpacing / 2, this.getActualWidth(rowWidget), cellSpacing / 2, touchPoint))) {\n return rowWidget.rowIndex;\n }\n }\n }\n else {\n if (tableWidget && cellWidget) {\n cellWidget = this.getTableCellWidget(touchPoint);\n }\n if (cellWidget) {\n var rowWidget = cellWidget.containerWidget;\n var height = 0;\n if (rowWidget.rowIndex === rowWidget.ownerTable.childWidgets.length - 1) {\n height = rowWidget.bottomBorderWidth + 2;\n }\n else {\n height = rowWidget.nextRenderedWidget.topBorderWidth + 2;\n }\n // tslint:disable-next-line:max-line-length\n if (this.owner.viewer.isInsideRect(rowWidget.x, rowWidget.y + rowWidget.height - height, rowWidget.width, height * 2, touchPoint)) {\n this.currentResizingTable = rowWidget.ownerTable;\n return rowWidget.rowIndex;\n }\n else {\n if (cellWidget.childWidgets.length > 0) {\n return this.getRowReSizerPosition(cellWidget, touchPoint);\n }\n }\n }\n }\n return -1;\n };\n /**\n * To handle Table Row and cell resize\n * @param touchPoint\n * @private\n */\n TableResizer.prototype.handleResizing = function (touchPoint) {\n var dragValue = 0;\n if (this.resizeNode === 0) {\n dragValue = touchPoint.x - this.startingPoint.x;\n this.resizeTableCellColumn(dragValue);\n }\n else {\n dragValue = touchPoint.y - this.startingPoint.y;\n this.resizeTableRow(dragValue);\n }\n };\n TableResizer.prototype.resizeTableRow = function (dragValue) {\n var table = this.currentResizingTable;\n if (isNullOrUndefined(table) || dragValue === 0) {\n return;\n }\n var selection = this.owner.selection;\n if (table.isInsideTable) {\n this.owner.isLayoutEnabled = false; //Layouting is disabled to skip the child table layouting. \n }\n if (this.resizerPosition > -1) {\n var row = table.childWidgets[this.resizerPosition];\n this.updateRowHeight(row, dragValue);\n selection.selectPosition(selection.start, selection.end);\n }\n if (table.isInsideTable) {\n var parentTable = this.owner.viewer.layout.getParentTable(table);\n this.owner.isLayoutEnabled = true; //layouting is enabled to layout the parent table of the nested table.\n table = parentTable;\n }\n this.startingPoint.y += HelperMethods.convertPointToPixel(dragValue);\n this.owner.viewer.layout.reLayoutTable(table);\n this.owner.editorModule.reLayout(this.owner.selection);\n };\n /**\n * Gets the table widget from given cursor point\n * @param cursorPoint\n */\n TableResizer.prototype.getTableWidget = function (cursorPoint) {\n var widget = undefined;\n var currentPage = this.owner.viewer.currentPage;\n if (!isNullOrUndefined(currentPage)) {\n for (var i = 0; i < currentPage.bodyWidgets.length; i++) {\n var bodyWidget = currentPage.bodyWidgets[i];\n widget = this.getTableWidgetFromWidget(cursorPoint, bodyWidget);\n if (!isNullOrUndefined(widget)) {\n break;\n }\n }\n }\n return widget;\n };\n TableResizer.prototype.getTableWidgetFromWidget = function (point, widget) {\n for (var j = 0; j < widget.childWidgets.length; j++) {\n if (widget.childWidgets[j] instanceof TableWidget) {\n var childWidget = widget.childWidgets[j];\n if (childWidget.y <= point.y && (childWidget.y + childWidget.height) >= point.y) {\n return childWidget;\n }\n }\n }\n return undefined;\n };\n /**\n * Return the table cell widget from the given cursor point\n * @param cursorPoint\n * @private\n */\n TableResizer.prototype.getTableCellWidget = function (cursorPoint) {\n var widget = undefined;\n var currentPage = this.owner.viewer.currentPage;\n if (!isNullOrUndefined(currentPage)) {\n for (var i = 0; i < currentPage.bodyWidgets.length; i++) {\n var bodyWidget = currentPage.bodyWidgets[i];\n widget = bodyWidget.getTableCellWidget(cursorPoint);\n if (!isNullOrUndefined(widget)) {\n break;\n }\n }\n }\n return widget;\n };\n TableResizer.prototype.updateRowHeight = function (row, dragValue) {\n var rowFormat = row.rowFormat;\n if (rowFormat.heightType === 'Auto') {\n rowFormat.heightType = 'AtLeast';\n var row_1 = rowFormat.ownerBase;\n var currentHeight = this.owner.viewer.layout.getRowHeight(row_1, [row_1]);\n //the minimum height of the Row in MS word is 2.7 points which is equal to 3.6 pixel.\n if (currentHeight + dragValue >= 2.7 && rowFormat.height !== currentHeight + dragValue) {\n rowFormat.height = currentHeight + dragValue;\n }\n }\n else {\n //the minimum height of the Row in MS word is 2.7 points which is equal to 3.6 pixel.\n if (rowFormat.height + dragValue >= 2.7 && rowFormat.height !== rowFormat.height + dragValue) {\n rowFormat.height = rowFormat.height + dragValue;\n }\n }\n };\n //Resize Table cell\n TableResizer.prototype.resizeTableCellColumn = function (dragValue) {\n var table = this.currentResizingTable;\n if (isNullOrUndefined(table) || dragValue === 0 || isNullOrUndefined(table.childWidgets)) {\n return;\n }\n var selectionFlag = true;\n var selection = this.owner.selection;\n this.owner.editor.setOffsetValue(selection);\n table = table.combineWidget(this.viewer);\n this.owner.isLayoutEnabled = false;\n // table.PreserveGrid = true;\n this.setPreferredWidth(table);\n var containerWidth = table.getOwnerWidth(true);\n var newIndent = table.leftIndent;\n var tableAlignment = table.tableFormat.tableAlignment;\n if (!selection.isEmpty) {\n selectionFlag = this.resizeColumnWithSelection(selection, table, dragValue);\n }\n if (!selectionFlag) {\n this.owner.isLayoutEnabled = true;\n return;\n }\n if (this.resizerPosition === 0) {\n // Todo: need to handle the resizing of first column and table indent.\n var columnIndex = this.resizerPosition;\n var rightColumn = table.tableHolder.columns[columnIndex];\n var width = rightColumn.preferredWidth;\n if (dragValue > 0) {\n var prevDragValue = 0;\n while (dragValue !== prevDragValue) {\n var newWidth = HelperMethods.round(rightColumn.preferredWidth - dragValue, 1);\n if (newWidth >= rightColumn.minWidth) {\n rightColumn.preferredWidth = newWidth;\n newIndent = table.leftIndent + dragValue;\n newIndent = newIndent >= -1440 ? (newIndent <= 1440 ? newIndent : 1440) : -1440;\n prevDragValue = dragValue;\n }\n else {\n prevDragValue = dragValue;\n dragValue += newWidth - rightColumn.minWidth;\n }\n }\n }\n else {\n var prevDragValue = 0;\n while (dragValue !== prevDragValue) {\n var newWidth = HelperMethods.round(rightColumn.preferredWidth - dragValue, 1);\n if (newWidth <= 2112) {\n rightColumn.preferredWidth = newWidth;\n newIndent = table.leftIndent + dragValue;\n newIndent = newIndent >= -1440 ? (newIndent <= 1440 ? newIndent : 1440) : -1440;\n prevDragValue = dragValue;\n }\n else {\n prevDragValue = dragValue;\n dragValue -= newWidth - 2112;\n }\n }\n }\n var dragOffset = dragValue;\n // tslint:disable-next-line:max-line-length\n if (tableAlignment !== 'Left' && (table.tableHolder.getTotalWidth() > containerWidth) && table.tableFormat.preferredWidthType === 'Auto') {\n if (table.tableHolder.isFitColumns(containerWidth, table.tableHolder.tableWidth, table.tableFormat.preferredWidthType === 'Auto')) {\n // tslint:disable-next-line:max-line-length\n table.tableHolder.fitColumns(containerWidth, table.tableHolder.tableWidth, table.tableFormat.preferredWidthType === 'Auto');\n }\n else {\n rightColumn.preferredWidth = width;\n }\n dragOffset = 0;\n }\n if (tableAlignment === 'Center'\n && (table.tableHolder.getTotalWidth() < containerWidth || table.tableFormat.preferredWidthType !== 'Auto')) {\n dragOffset = dragOffset / 2;\n }\n table.tableFormat.leftIndent = tableAlignment === 'Left' ? newIndent : 0;\n table.tableHolder.tableWidth = table.tableHolder.getTotalWidth();\n this.updateCellPreferredWidths(table);\n this.updateGridValue(table, true, dragOffset);\n }\n else if (table !== null && this.resizerPosition === table.tableHolder.columns.length) {\n // Todo: need to handle the resizing of last column and table width.\n this.resizeColumnAtLastColumnIndex(table, dragValue, containerWidth);\n }\n else {\n if (this.resizerPosition === -1) {\n this.owner.isLayoutEnabled = true;\n return;\n }\n this.resizeCellAtMiddle(table, dragValue);\n }\n // table.PreserveGrid = false;\n this.owner.isLayoutEnabled = true;\n selection.selectPosition(selection.start, selection.end);\n };\n /**\n * Resize Selected Cells\n */\n TableResizer.prototype.resizeColumnWithSelection = function (selection, table, dragValue) {\n var newIndent = table.leftIndent;\n var cellwidget = this.getTableCellWidget(this.startingPoint);\n if (cellwidget && (selection.selectedWidgets.containsKey(cellwidget) || (cellwidget.previousWidget\n && selection.selectedWidgets.containsKey((cellwidget.previousWidget))))) {\n var selectedCells = selection.getSelectedCells();\n if (this.resizerPosition === 0) {\n this.resizeColumnAtStart(table, dragValue, selectedCells);\n }\n else if (table !== null && this.resizerPosition === table.tableHolder.columns.length) {\n var leftColumnCollection = this.getColumnCells(table, this.resizerPosition, true);\n for (var i = 0; i < leftColumnCollection.length; i++) {\n var cell = leftColumnCollection[i];\n if (selectedCells.indexOf(cell) !== -1) {\n this.increaseOrDecreaseWidth(cell, dragValue, true);\n }\n }\n //Updates the grid after value for all the rows.\n this.updateRowsGridAfterWidth(table);\n table.updateWidth(dragValue);\n this.updateGridValue(table, true, dragValue);\n }\n else {\n if (this.resizerPosition === -1) {\n return false;\n }\n var columnIndex = this.resizerPosition;\n var leftColumnCollection = this.getColumnCells(table, columnIndex, true);\n var rightColumnCollection = this.getColumnCells(table, columnIndex, false);\n var isColumnResizing = this.isColumnSelected(table, columnIndex);\n if (leftColumnCollection.length > 0 && !isColumnResizing) {\n for (var i = 0; i < leftColumnCollection.length; i++) {\n if (selectedCells.indexOf(leftColumnCollection[i]) === -1) {\n leftColumnCollection.splice(i, 1);\n i--;\n }\n }\n }\n if (rightColumnCollection.length > 0 && !isColumnResizing) {\n for (var i = 0; i < rightColumnCollection.length; i++) {\n if (selectedCells.indexOf(rightColumnCollection[i]) === -1) {\n rightColumnCollection.splice(i, 1);\n i--;\n }\n }\n }\n //Getting the adjacent cell collections for left side selected cells in the right column collection.\n if (leftColumnCollection.length === 0 && rightColumnCollection.length > 0) {\n for (var i = 0; i < rightColumnCollection.length; i++) {\n var cell = rightColumnCollection[i];\n if (cell.previousWidget) {\n leftColumnCollection.push(cell.previousWidget);\n }\n }\n }\n else if (rightColumnCollection.length === 0 && leftColumnCollection.length > 0) {\n for (var i = 0; i < leftColumnCollection.length; i++) {\n var cell = leftColumnCollection[i];\n if (cell.nextWidget) {\n rightColumnCollection.push(cell.nextWidget);\n }\n }\n }\n this.changeWidthOfCells(table, leftColumnCollection, rightColumnCollection, dragValue, true);\n this.updateGridValue(table, true, dragValue);\n }\n selection.selectPosition(selection.start, selection.end);\n }\n return false;\n };\n /**\n * Resize selected cells at resizer position 0\n */\n TableResizer.prototype.resizeColumnAtStart = function (table, dragValue, selectedCells) {\n var newIndent = table.leftIndent;\n var rightColumnCollection = this.getColumnCells(table, this.resizerPosition, false);\n var offset = 0;\n var selectedRow = selectedCells[0].ownerRow;\n var rowFormat = selectedRow.rowFormat;\n if (rowFormat.beforeWidth > 0) {\n var newGridBefore = rowFormat.beforeWidth + dragValue;\n if (newGridBefore > 0) {\n this.updateGridBefore(selectedRow, dragValue);\n }\n else {\n var leastGridBefore = this.getLeastGridBefore(table, selectedRow);\n if (newGridBefore < leastGridBefore && offset !== newGridBefore) {\n newIndent = table.leftIndent + newGridBefore;\n table.tableFormat.leftIndent = newIndent >= -1440 ? (newIndent <= 1440 ? newIndent : 1440) : -1440;\n for (var i = 0; i < table.childWidgets.length; i++) {\n var tableRow = table.childWidgets[i];\n if (selectedRow !== tableRow) {\n this.updateGridBefore(tableRow, -newGridBefore);\n }\n }\n }\n }\n }\n else {\n if (dragValue < 0) {\n newIndent = table.leftIndent + dragValue;\n table.tableFormat.leftIndent = newIndent >= -1440 ? (newIndent <= 1440 ? newIndent : 1440) : -1440;\n this.updateWidthForCells(table, selectedCells, dragValue);\n }\n else {\n var leastGridBefore = this.getLeastGridBefore(table, selectedRow);\n var currentTableIndent = table.tableFormat.leftIndent;\n if (currentTableIndent === 0) {\n for (var i = 0; i < table.childWidgets.length; i++) {\n var tableRow = table.childWidgets[i];\n if (selectedCells.indexOf(tableRow.childWidgets[0]) !== -1) {\n this.updateGridBefore(tableRow, dragValue);\n this.increaseOrDecreaseWidth(tableRow.childWidgets[0], dragValue, false);\n }\n }\n }\n else {\n var difference = leastGridBefore - dragValue;\n if (difference > 0) {\n newIndent = table.leftIndent + dragValue;\n table.tableFormat.leftIndent = newIndent >= -1440 ? (newIndent <= 1440 ? newIndent : 1440) : -1440;\n this.updateWidthForCells(table, selectedCells, dragValue);\n }\n else {\n newIndent = table.leftIndent + leastGridBefore;\n table.tableFormat.leftIndent = newIndent >= -1440 ? (newIndent <= 1440 ? newIndent : 1440) : -1440;\n for (var i = 0; i < table.childWidgets.length; i++) {\n var tableRow = table.childWidgets[i];\n if (selectedCells.indexOf(tableRow.childWidgets[0]) !== -1) {\n this.increaseOrDecreaseWidth(tableRow.childWidgets[0], dragValue, false);\n this.updateGridBefore(tableRow, dragValue - leastGridBefore);\n }\n else {\n this.updateGridBefore(tableRow, -leastGridBefore);\n }\n }\n }\n }\n }\n }\n this.updateGridValue(table, true, dragValue);\n };\n TableResizer.prototype.updateWidthForCells = function (table, selectedCells, dragValue) {\n for (var i = 0; i < table.childWidgets.length; i++) {\n var tableRow = table.childWidgets[i];\n if (selectedCells.indexOf(tableRow.childWidgets[0]) !== -1) {\n this.increaseOrDecreaseWidth(tableRow.childWidgets[0], dragValue, false);\n }\n else {\n this.updateGridBefore(tableRow, -dragValue);\n }\n }\n };\n /**\n * Resize selected cells at last column\n */\n TableResizer.prototype.resizeColumnAtLastColumnIndex = function (table, dragValue, containerWidth) {\n var tableAlignment = table.tableFormat.tableAlignment;\n var preferredWidth = table.tableFormat.preferredWidth;\n var hasTableWidth = preferredWidth;\n var columnIndex = this.resizerPosition;\n var leftColumn = table.tableHolder.columns[columnIndex - 1];\n var prevDragValue = 0;\n while (dragValue !== prevDragValue) {\n var newWidth = HelperMethods.round(leftColumn.preferredWidth + dragValue, 1);\n if (newWidth >= leftColumn.minWidth) {\n leftColumn.preferredWidth = newWidth;\n prevDragValue = dragValue;\n }\n else {\n prevDragValue = dragValue;\n dragValue -= newWidth - leftColumn.minWidth;\n }\n }\n this.updateCellPreferredWidths(table);\n if (hasTableWidth || table.tableHolder.getTotalWidth() > containerWidth) {\n table.updateWidth(dragValue);\n table.tableHolder.tableWidth = table.tableHolder.getTotalWidth();\n }\n var dragOffset = dragValue;\n if (tableAlignment === 'Right') {\n dragOffset = 0;\n }\n else if (tableAlignment === 'Center') {\n dragOffset = dragOffset / 2;\n }\n this.updateGridValue(table, true, dragOffset);\n };\n /**\n * Resize selected cells at middle column\n */\n TableResizer.prototype.resizeCellAtMiddle = function (table, dragValue) {\n var columnIndex = this.resizerPosition;\n var leftColumn = table.tableHolder.columns[columnIndex - 1];\n var rightColumn = table.tableHolder.columns[columnIndex];\n if (dragValue > 0) {\n var isContinue = true;\n while (isContinue) {\n var newWidth = HelperMethods.round(rightColumn.preferredWidth - dragValue, 1);\n if (newWidth >= rightColumn.minWidth) {\n rightColumn.preferredWidth = newWidth;\n leftColumn.preferredWidth = leftColumn.preferredWidth + dragValue;\n isContinue = false;\n }\n else {\n dragValue += newWidth - rightColumn.minWidth;\n }\n }\n }\n else {\n var isContinue = true;\n while (isContinue) {\n var newWidth = HelperMethods.round(leftColumn.preferredWidth + dragValue, 1);\n if (newWidth >= leftColumn.minWidth) {\n leftColumn.preferredWidth = newWidth;\n rightColumn.preferredWidth = rightColumn.preferredWidth - dragValue;\n isContinue = false;\n }\n else {\n dragValue -= newWidth - leftColumn.minWidth;\n }\n }\n }\n // Update the cell widths based on the columns preferred width\n this.updateCellPreferredWidths(table);\n // table.tableFormat.AllowAutoFit = false;\n table.tableHolder.tableWidth = table.tableHolder.getTotalWidth();\n this.updateGridValue(table, true, dragValue);\n };\n TableResizer.prototype.updateGridValue = function (table, isUpdate, dragValue) {\n if (isUpdate) {\n table.calculateGrid();\n table.isGridUpdated = false;\n }\n table.buildTableColumns();\n table.isGridUpdated = true;\n this.viewer.owner.isLayoutEnabled = true;\n if (table.isInsideTable) {\n var parentTable = this.viewer.layout.getParentTable(table);\n this.viewer.layout.reLayoutTable(parentTable); // Need to optmize this.\n }\n else {\n this.viewer.layout.reLayoutTable(table);\n }\n this.owner.editor.getOffsetValue(this.viewer.selection);\n this.owner.editorModule.reLayout(this.owner.selection);\n if (dragValue) {\n this.startingPoint.x += HelperMethods.convertPointToPixel(dragValue);\n this.resizerPosition = this.getCellReSizerPosition(this.startingPoint);\n }\n };\n TableResizer.prototype.getColumnCells = function (table, columnIndex, isLeftSideCollection) {\n var cells = [];\n for (var i = 0; i < table.childWidgets.length; i++) {\n var row = table.childWidgets[i];\n for (var j = 0; j < row.childWidgets.length; j++) {\n var cell = row.childWidgets[j];\n if (isLeftSideCollection) {\n if (cell.columnIndex + cell.cellFormat.columnSpan === columnIndex) {\n cells.push(cell);\n }\n }\n else {\n if (cell.columnIndex === columnIndex) {\n cells.push(cell);\n }\n }\n }\n }\n return cells;\n };\n TableResizer.prototype.updateGridBefore = function (row, offset) {\n if (row.rowFormat.beforeWidth + offset !== row.rowFormat.beforeWidth) {\n row.rowFormat.beforeWidth = row.rowFormat.beforeWidth + offset;\n row.rowFormat.gridBeforeWidth = row.rowFormat.beforeWidth;\n }\n };\n TableResizer.prototype.getLeastGridBefore = function (table, ignoreRow) {\n var gridBefore = 0;\n var flag = 0;\n for (var i = 0; i < table.childWidgets.length; i++) {\n var row = table.childWidgets[i];\n if (row !== ignoreRow) {\n if (flag === 0) {\n gridBefore = row.rowFormat.beforeWidth;\n flag++;\n }\n if (row.rowFormat.beforeWidth <= gridBefore) {\n gridBefore = row.rowFormat.beforeWidth;\n }\n }\n }\n return gridBefore;\n };\n TableResizer.prototype.increaseOrDecreaseWidth = function (cell, dragValue, isIncrease) {\n var preferredWidth = cell.cellFormat.preferredWidth;\n if (cell.cellFormat.preferredWidthType === 'Auto') {\n preferredWidth = cell.cellFormat.cellWidth;\n cell.cellFormat.preferredWidthType = 'Point';\n }\n var minimumWidth = cell.ownerColumn.minWidth;\n if (cell.cellFormat.preferredWidthType === 'Percent') {\n minimumWidth = cell.convertPointToPercent(minimumWidth);\n }\n // Margins properties usedd for internal purpose.\n if (isIncrease) {\n cell.cellFormat.preferredWidth = preferredWidth + dragValue > minimumWidth ? preferredWidth + dragValue : minimumWidth;\n }\n else {\n cell.cellFormat.preferredWidth = preferredWidth - dragValue > minimumWidth ? preferredWidth - dragValue : minimumWidth;\n }\n };\n // tslint:disable-next-line:max-line-length\n TableResizer.prototype.changeWidthOfCells = function (table, leftColumnCollection, rightColumnCollection, dragValue, isSelection) {\n if (leftColumnCollection.length > 0) {\n var flag = false;\n for (var i = 0; i < leftColumnCollection.length; i++) {\n var cell = leftColumnCollection[i];\n this.increaseOrDecreaseWidth(cell, dragValue, true);\n if (cell.cellIndex === cell.ownerRow.childWidgets.length - 1) {\n flag = true;\n }\n }\n if (flag) {\n this.updateRowsGridAfterWidth(table);\n }\n }\n if (rightColumnCollection.length > 0) {\n var diff = 0;\n for (var i = 0; i < rightColumnCollection.length; i++) {\n var cell = rightColumnCollection[i];\n if (cell.cellIndex === 0) {\n var newGridBefore = cell.ownerRow.rowFormat.beforeWidth + dragValue;\n if (newGridBefore >= 0) {\n this.updateGridBefore(cell.ownerRow, dragValue);\n }\n else {\n if (diff !== newGridBefore) {\n diff = newGridBefore;\n }\n cell.ownerRow.rowFormat.gridBeforeWidth = 0;\n cell.ownerRow.rowFormat.gridBeforeWidthType = 'Auto';\n }\n }\n this.increaseOrDecreaseWidth(cell, dragValue, false);\n }\n if (diff !== 0) {\n var newIndent = table.leftIndent + diff;\n table.tableFormat.leftIndent = newIndent >= -1440 ? (newIndent <= 1440 ? newIndent : 1440) : -1440;\n for (var j = 0; j < table.childWidgets.length; j++) {\n var row = table.childWidgets[j];\n if (rightColumnCollection.indexOf(row.childWidgets[0]) === -1) {\n this.updateGridBefore(row, diff > 0 ? diff : -diff);\n }\n }\n }\n }\n };\n TableResizer.prototype.updateRowsGridAfterWidth = function (table) {\n var maxRowWidth = this.getMaxRowWidth(table, true);\n for (var i = 0; i < table.childWidgets.length; i++) {\n var row = table.childWidgets[i];\n var currentRowWidth = this.getRowWidth(row, true);\n if (maxRowWidth >= currentRowWidth && row.rowFormat.afterWidth !== maxRowWidth - currentRowWidth) {\n var value = maxRowWidth - currentRowWidth;\n row.rowFormat.gridAfterWidth = value;\n row.rowFormat.afterWidth = value;\n }\n }\n };\n TableResizer.prototype.getRowWidth = function (row, toUpdateGridAfter) {\n var rowWidth = 0;\n if (toUpdateGridAfter) {\n rowWidth = rowWidth + row.rowFormat.beforeWidth;\n }\n for (var i = 0; i < row.childWidgets.length; i++) {\n var cell = row.childWidgets[i];\n rowWidth += cell.cellFormat.cellWidth;\n }\n return rowWidth;\n };\n TableResizer.prototype.getMaxRowWidth = function (table, toUpdateGridAfter) {\n var width = 0;\n for (var i = 0; i < table.childWidgets.length; i++) {\n var row = table.childWidgets[i];\n var rowWidth = 0;\n if (toUpdateGridAfter) {\n rowWidth = rowWidth + row.rowFormat.beforeWidth;\n }\n for (var i_1 = 0; i_1 < row.childWidgets.length; i_1++) {\n var cell = row.childWidgets[i_1];\n rowWidth += cell.cellFormat.cellWidth;\n }\n if (width < rowWidth) {\n width = rowWidth;\n }\n }\n return width;\n };\n TableResizer.prototype.isColumnSelected = function (table, columnIndex) {\n var selection = this.owner.selection;\n var selectedCells = selection.getSelectedCells();\n var leftColumnCells = this.getColumnCells(table, columnIndex, true);\n var rightColumnCells = this.getColumnCells(table, columnIndex, false);\n var isColumnSelected = false;\n for (var i = 0; i < leftColumnCells.length; i++) {\n var columnCell = leftColumnCells[i];\n isColumnSelected = selectedCells.indexOf(columnCell) !== -1 ? true : false;\n }\n if (!isColumnSelected) {\n for (var i = 0; i < rightColumnCells.length; i++) {\n var columnCell = rightColumnCells[i];\n isColumnSelected = selectedCells.indexOf(columnCell) !== -1 ? true : false;\n }\n }\n return isColumnSelected;\n };\n TableResizer.prototype.applyProperties = function (table, tableHistoryInfo) {\n if (isNullOrUndefined(tableHistoryInfo)) {\n return;\n }\n table = table;\n // PreserveGrid = true;\n if (tableHistoryInfo.tableHolder) {\n table.tableHolder = tableHistoryInfo.tableHolder.clone();\n }\n if (tableHistoryInfo.tableFormat !== null) {\n table.tableFormat.leftIndent = tableHistoryInfo.tableFormat.leftIndent;\n table.tableFormat.preferredWidth = tableHistoryInfo.tableFormat.preferredWidth;\n table.tableFormat.preferredWidthType = tableHistoryInfo.tableFormat.preferredWidthType;\n }\n for (var i = 0; i < table.childWidgets.length; i++) {\n var row = table.childWidgets[i];\n var rowFormat = tableHistoryInfo.rows[i];\n row.rowFormat.gridBefore = rowFormat.gridBefore;\n row.rowFormat.gridBeforeWidth = rowFormat.gridBeforeWidth;\n row.rowFormat.gridBeforeWidthType = rowFormat.gridBeforeWidthType;\n row.rowFormat.gridAfter = rowFormat.gridAfter;\n row.rowFormat.gridAfterWidth = rowFormat.gridAfterWidth;\n row.rowFormat.gridAfterWidthType = rowFormat.gridAfterWidthType;\n for (var j = 0; j < row.childWidgets.length; j++) {\n var cell = row.childWidgets[j];\n var cellFormat = rowFormat.cells[j];\n cell.columnIndex = cellFormat.columnIndex;\n cell.cellFormat.columnSpan = cellFormat.columnSpan;\n cell.cellFormat.preferredWidth = cellFormat.preferredWidth;\n cell.cellFormat.preferredWidthType = cellFormat.preferredWidthType;\n }\n }\n var containerWidth = table.getOwnerWidth(true);\n var tableWidth = table.getTableClientWidth(containerWidth);\n //Sets the width to cells\n table.setWidthToCells(tableWidth, table.tableFormat.preferredWidthType === 'Auto');\n // PreserveGrid = false;\n };\n /**\n * Return table row width\n */\n TableResizer.prototype.getActualWidth = function (row) {\n var width = 0;\n if (row.childWidgets.length > 0) {\n for (var i = 0; i < row.childWidgets.length; i++) {\n width += row.childWidgets[i].cellFormat.cellWidth;\n }\n }\n return width;\n };\n TableResizer.prototype.setPreferredWidth = function (table) {\n for (var i = 0; i < table.childWidgets.length; i++) {\n var rw = table.childWidgets[i];\n var rowFormat = rw.rowFormat;\n if (rowFormat.gridBefore > 0) {\n rowFormat.gridBeforeWidth = rowFormat.beforeWidth;\n rowFormat.gridBeforeWidthType = 'Point';\n }\n for (var j = 0; j < rw.childWidgets.length; j++) {\n var cell = rw.childWidgets[j];\n cell.cellFormat.preferredWidth = cell.cellFormat.cellWidth;\n cell.cellFormat.preferredWidthType = 'Point';\n }\n if (rowFormat.gridAfter > 0) {\n rowFormat.gridAfterWidth = rowFormat.afterWidth;\n rowFormat.gridAfterWidthType = 'Point';\n }\n }\n };\n TableResizer.prototype.updateCellPreferredWidths = function (table) {\n var tableWidth = table.tableHolder.tableWidth;\n var isAutoFit = table.tableFormat.preferredWidthType === 'Auto';\n for (var i = 0; i < table.childWidgets.length; i++) {\n var row = table.childWidgets[i];\n if (row.rowFormat.gridBefore > 0) {\n var width = table.tableHolder.getCellWidth(0, row.rowFormat.gridBefore, tableWidth, isAutoFit);\n this.updateGridBeforeWidth(width, row);\n }\n for (var j = 0; j < row.childWidgets.length; j++) {\n var cell = row.childWidgets[j];\n cell.updateWidth(table.tableHolder.getCellWidth(cell.columnIndex, cell.cellFormat.columnSpan, tableWidth, isAutoFit));\n }\n if (row.rowFormat.gridAfter > 0) {\n // tslint:disable-next-line:max-line-length\n this.updateGridAfterWidth(table.tableHolder.getCellWidth(row.childWidgets.length, row.rowFormat.gridAfter, tableWidth, isAutoFit), row);\n }\n }\n };\n /**\n * Update grid before width value\n */\n TableResizer.prototype.updateGridBeforeWidth = function (width, row) {\n var rowFormat = row.rowFormat;\n if (width !== rowFormat.beforeWidth) {\n rowFormat.beforeWidth = width;\n if (rowFormat.gridBeforeWidthType === 'Auto') {\n rowFormat.gridBeforeWidthType = 'Point';\n }\n if (rowFormat.gridBeforeWidthType === 'Point') {\n rowFormat.gridBeforeWidth = rowFormat.beforeWidth;\n }\n else {\n // The value is calculated from the pixel values hence, its converted to percent using method. \n var ownerWidth = row.ownerTable.getTableClientWidth(row.ownerTable.getOwnerWidth(true));\n var value = row.ownerTable.convertPointToPercent(rowFormat.beforeWidth, ownerWidth);\n rowFormat.gridBeforeWidth = value;\n }\n }\n };\n /**\n * Update grid after width value\n */\n TableResizer.prototype.updateGridAfterWidth = function (width, row) {\n var rowFormat = row.rowFormat;\n if (width !== rowFormat.afterWidth) {\n rowFormat.afterWidth = width;\n }\n if (rowFormat.gridAfterWidthType === 'Auto') {\n rowFormat.gridAfterWidthType = 'Point';\n }\n if (rowFormat.gridAfterWidthType === 'Point') {\n rowFormat.gridAfterWidth = rowFormat.afterWidth;\n }\n else {\n // The value is calculated from the pixel values hence, its converted to percent using method. \n var ownerWidth = row.ownerTable.getTableClientWidth(row.ownerTable.getOwnerWidth(true));\n var value = row.ownerTable.convertPointToPercent(rowFormat.afterWidth, ownerWidth);\n rowFormat.gridAfterWidth = value;\n }\n };\n return TableResizer;\n}());\nexport { TableResizer };\n","import { TextPosition, ImageFormat } from '../selection/selection-helper';\nimport { ParagraphWidget, LineWidget, ElementBox, TextElementBox, Margin, ImageElementBox, BlockWidget, BlockContainer, BodyWidget, TableWidget, TableCellWidget, TableRowWidget, Widget, ListTextElementBox, BookmarkElementBox, HeaderFooterWidget, FieldTextElementBox, TabElementBox } from '../viewer/page';\nimport { WCharacterFormat } from '../format/character-format';\nimport { HelperMethods } from './editor-helper';\nimport { isNullOrUndefined, Browser, classList } from '@syncfusion/ej2-base';\nimport { WParagraphFormat, WSectionFormat, WListFormat, WTableFormat, WRowFormat, WCellFormat, WBorder, WBorders, WTabStop } from '../index';\nimport { WList } from '../list/list';\nimport { WAbstractList } from '../list/abstract-list';\nimport { WListLevel } from '../list/list-level';\nimport { WLevelOverride } from '../list/level-override';\nimport { FieldElementBox } from '../viewer/page';\nimport { WCharacterStyle } from '../format/style';\nimport { TableResizer } from './table-resizer';\nimport { WParagraphStyle } from '../format/style';\n/**\n * Editor module\n */\nvar Editor = /** @class */ (function () {\n /**\n * Initialize the editor module\n * @param {LayoutViewer} viewer\n * @private\n */\n function Editor(viewer) {\n var _this = this;\n this.nodes = [];\n this.editHyperlinkInternal = false;\n this.startParagraph = undefined;\n this.endParagraph = undefined;\n /**\n * @private\n */\n this.isHandledComplex = false;\n /**\n * @private\n */\n this.tableResize = undefined;\n /**\n * @private\n */\n this.tocStyles = {};\n this.refListNumber = undefined;\n this.incrementListNumber = -1;\n this.removedBookmarkElements = [];\n /**\n * @private\n */\n this.tocBookmarkId = 0;\n /**\n * @private\n */\n this.copiedData = undefined;\n this.pageRefFields = {};\n /**\n * @private\n */\n this.isBordersAndShadingDialog = false;\n /**\n * @private\n */\n this.onTextInputInternal = function (event) {\n if (Browser.isDevice) {\n var viewer = _this.viewer;\n var nbsp = new RegExp(String.fromCharCode(160), 'g');\n var lineFeed = new RegExp(String.fromCharCode(10), 'g');\n viewer.prefix = viewer.prefix.replace(nbsp, ' ').replace(lineFeed, ' ');\n var text = viewer.editableDiv.textContent.replace(nbsp, ' ').replace(lineFeed, ' ');\n var textBoxText = text.substring(2);\n if (viewer.isCompositionStart && viewer.isCompositionUpdated) {\n viewer.isCompositionUpdated = false;\n if (!viewer.owner.isReadOnlyMode && viewer.owner.isDocumentLoaded) {\n if (viewer.prefix.substring(2) !== textBoxText) {\n if (_this.selection.isEmpty) {\n // tslint:disable-next-line:max-line-length\n _this.selection.start.setPositionForLineWidget(viewer.selection.start.currentWidget, _this.selection.start.offset - (viewer.prefix.length - 2));\n _this.handleTextInput(textBoxText);\n viewer.prefix = '@' + String.fromCharCode(160) + textBoxText;\n }\n else {\n _this.handleTextInput(textBoxText);\n viewer.prefix = '@' + String.fromCharCode(160) + textBoxText;\n }\n }\n }\n return;\n }\n else if (viewer.isCompositionStart && viewer.isCompositionEnd && viewer.suffix === '') {\n if (viewer.prefix.substring(2) !== textBoxText) {\n if (_this.selection.isEmpty && viewer.isCompositionStart) {\n viewer.isCompositionStart = false;\n // tslint:disable-next-line:max-line-length\n _this.selection.start.setPositionForLineWidget(viewer.selection.start.currentWidget, _this.selection.start.offset - viewer.prefix.substring(2).length);\n _this.selection.retrieveCurrentFormatProperties();\n if (viewer.suffix === '' || textBoxText === '') {\n _this.handleTextInput(textBoxText);\n }\n }\n else if (!_this.selection.isEmpty) {\n viewer.isCompositionStart = false;\n _this.handleTextInput(textBoxText);\n }\n }\n else if (textBoxText === '') {\n viewer.isCompositionStart = false;\n _this.handleBackKey();\n }\n else if (viewer.prefix.substring(2) === textBoxText && viewer.suffix === '') {\n viewer.isCompositionStart = false;\n _this.handleTextInput(' ');\n }\n viewer.isCompositionEnd = false;\n return;\n }\n else if (viewer.isCompositionEnd || viewer.isCompositionStart && !viewer.compositionUpdated) {\n if (textBoxText.length < viewer.prefix.length &&\n textBoxText === viewer.prefix.substring(2, viewer.prefix.length - 1) || viewer.editableDiv.innerText.length < 2) {\n _this.handleBackKey();\n return;\n }\n else if (viewer.suffix !== '' &&\n viewer.editableDiv.innerText[viewer.editableDiv.innerText.length - 1] !== String.fromCharCode(160)) {\n viewer.isCompositionStart = false;\n //When cursor is placed in between a word and chosen a word from predicted words.\n // tslint:disable-next-line:max-line-length\n _this.selection.start.setPositionForLineWidget(viewer.selection.start.currentWidget, _this.selection.start.offset - (viewer.prefix.length - 2));\n _this.selection.end.setPositionForLineWidget(viewer.selection.end.currentWidget, _this.selection.end.offset + viewer.suffix.length);\n //Retrieve the character format properties. Since the selection was changed manually.\n _this.selection.retrieveCurrentFormatProperties();\n _this.handleTextInput(textBoxText);\n return;\n }\n }\n // tslint:disable-next-line:max-line-length\n if (text !== '\\r' && text !== '\\b' && text !== '\\u001B' && !viewer.owner.isReadOnlyMode && viewer.isControlPressed === false) {\n if (text === '@' || text[0] !== '@' || text === '' || text.length < viewer.prefix.length &&\n textBoxText === viewer.prefix.substring(2, viewer.prefix.length - 1)) {\n _this.handleBackKey();\n if (viewer.editableDiv.innerText.length < 2) {\n _this.predictText();\n }\n }\n else if (text.indexOf(viewer.prefix) === 0 && text.length > viewer.prefix.length) {\n _this.handleTextInput(text.substring(viewer.prefix.length));\n }\n else if (text.indexOf(viewer.prefix) === -1 && text[text.length - 1] !== String.fromCharCode(160)\n && text[text.length - 1] !== ' ') {\n if ((textBoxText.charAt(0).toLowerCase() + textBoxText.slice(1)) === viewer.prefix.substring(2)) {\n // tslint:disable-next-line:max-line-length\n _this.selection.start.setPositionParagraph(viewer.selection.start.currentWidget, _this.selection.start.offset - (viewer.prefix.length - 2));\n }\n _this.handleTextInput(textBoxText);\n }\n else if (text.length !== 2) {\n _this.handleTextInput(' ');\n }\n }\n }\n else {\n var text = _this.viewer.editableDiv.innerText;\n if (text !== String.fromCharCode(160)) {\n // tslint:disable-next-line:max-line-length\n if (text !== '\\r' && text !== '\\b' && text !== '\\u001B' && !_this.owner.isReadOnlyMode && _this.viewer.isControlPressed === false) {\n _this.handleTextInput(text);\n }\n }\n else {\n _this.handleTextInput(' ');\n }\n _this.viewer.editableDiv.innerText = '';\n }\n };\n /**\n * Fired on paste.\n * @param {ClipboardEvent} event\n * @private\n */\n this.onPaste = function (event) {\n if (!_this.owner.isReadOnlyMode) {\n _this.pasteInternal(event);\n }\n event.preventDefault();\n };\n this.viewer = viewer;\n this.tableResize = new TableResizer(this.viewer.owner);\n }\n Object.defineProperty(Editor.prototype, \"editorHistory\", {\n get: function () {\n return this.viewer.owner.editorHistory;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Editor.prototype, \"selection\", {\n get: function () {\n if (this.viewer) {\n return this.viewer.selection;\n }\n return undefined;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Editor.prototype, \"owner\", {\n get: function () {\n return this.viewer.owner;\n },\n enumerable: true,\n configurable: true\n });\n Editor.prototype.getModuleName = function () {\n return 'Editor';\n };\n Editor.prototype.insertField = function (code, result) {\n var fieldCode = code;\n if (isNullOrUndefined(result)) {\n if (fieldCode.substring(0, 10) === 'MERGEFIELD') {\n fieldCode = fieldCode.substring(10).trim();\n var index = fieldCode.indexOf('\\\\*');\n result = '<<' + fieldCode.substring(0, index).trim() + '>>';\n }\n }\n var paragraph = new ParagraphWidget();\n var line = new LineWidget(paragraph);\n var fieldBegin = new FieldElementBox(0);\n line.children.push(fieldBegin);\n var fieldCodeSpan = new TextElementBox();\n fieldCodeSpan.text = code;\n line.children.push(fieldCodeSpan);\n var fieldSeparator = new FieldElementBox(2);\n fieldSeparator.fieldBegin = fieldBegin;\n fieldBegin.fieldSeparator = fieldSeparator;\n line.children.push(fieldSeparator);\n var fieldResultSpan = new TextElementBox();\n fieldResultSpan.text = result;\n line.children.push(fieldResultSpan);\n var fieldEnd = new FieldElementBox(1);\n fieldEnd.fieldSeparator = fieldSeparator;\n fieldEnd.fieldBegin = fieldBegin;\n fieldBegin.fieldEnd = fieldEnd;\n fieldSeparator.fieldEnd = fieldEnd;\n line.children.push(fieldEnd);\n fieldBegin.line = line;\n paragraph.childWidgets.push(line);\n this.viewer.fields.push(fieldBegin);\n var widgets = [];\n widgets.push(paragraph);\n this.pasteContentsInternal(widgets);\n };\n // Public Implementation Starts\n /**\n * Moves the selected content in the document editor control to clipboard.\n */\n Editor.prototype.cut = function () {\n if (this.owner.isReadOnlyMode || this.selection.isEmpty) {\n return;\n }\n this.selection.copySelectedContent(true);\n };\n /**\n * Notify content change event\n * @private\n */\n Editor.prototype.fireContentChange = function () {\n if (this.viewer.owner.isLayoutEnabled && !this.viewer.owner.isShiftingEnabled) {\n this.viewer.owner.fireContentChange();\n }\n };\n /**\n * Update physical location for text position\n * @private\n */\n Editor.prototype.updateSelectionTextPosition = function (isSelectionChanged) {\n this.getOffsetValue(this.selection);\n this.selection.start.updatePhysicalPosition(true);\n if (this.selection.isEmpty) {\n this.selection.end.setPositionInternal(this.selection.start);\n }\n else {\n this.selection.end.updatePhysicalPosition(true);\n }\n this.selection.upDownSelectionLength = this.selection.end.location.x;\n this.selection.fireSelectionChanged(isSelectionChanged);\n };\n /**\n * Predict text\n * @private\n */\n Editor.prototype.predictText = function () {\n this.viewer.suffix = '';\n if (this.selection.start.paragraph.isEmpty() || this.selection.start.offset === 0 &&\n this.selection.start.currentWidget.isFirstLine() || this.selection.end.offset === 0 &&\n this.selection.end.currentWidget.isFirstLine()) {\n this.viewer.prefix = '';\n }\n else {\n this.getPrefixAndSuffix();\n }\n this.viewer.prefix = '@' + String.fromCharCode(160) + this.viewer.prefix; // \n this.viewer.editableDiv.innerText = this.viewer.prefix;\n this.viewer.selection.setEditableDivCaretPosition(this.viewer.prefix.length);\n };\n /**\n * Gets prefix and suffix.\n * @private\n */\n /* tslint:disable:max-func-body-length */\n Editor.prototype.getPrefixAndSuffix = function () {\n var viewer = this.viewer;\n if (this.selection.text !== '') {\n viewer.prefix = '';\n return;\n }\n else {\n var startIndex = 0;\n var inlineInfo = this.selection.start.currentWidget.getInline(this.selection.start.offset, startIndex);\n var inline = inlineInfo.element;\n startIndex = inlineInfo.index;\n if (inline !== undefined) {\n var boxInfo = this.selection.getElementBoxInternal(inline, startIndex);\n var box = boxInfo.element;\n startIndex = boxInfo.index;\n var spaceIndex = 0;\n if (!isNullOrUndefined(box)) {\n var prefixAdded = false;\n if (box instanceof TextElementBox && startIndex > 0 && box.line.isFirstLine()) {\n viewer.prefix = '';\n }\n if (!(inline instanceof TextElementBox)) {\n inline = this.selection.getPreviousTextElement(inline);\n }\n /* tslint:disable:no-conditional-assignment */\n while ((spaceIndex = viewer.prefix.lastIndexOf(' ')) < 0 && inline instanceof TextElementBox) {\n if (inline.previousNode instanceof TextElementBox && viewer.prefix.indexOf(' ') === -1) {\n if (!prefixAdded) {\n viewer.prefix = inline.text.substring(0, startIndex);\n prefixAdded = true;\n }\n else {\n viewer.prefix = inline.text + viewer.prefix;\n }\n inline = inline.previousNode;\n // If the line has no elements then break the loop to avoid the exception.\n if (inline instanceof ListTextElementBox) {\n break;\n }\n if (!(inline instanceof TextElementBox)) {\n inline = this.selection.getPreviousTextElement(inline);\n }\n }\n else if (!(inline.previousNode instanceof TextElementBox)) {\n if (!prefixAdded) {\n viewer.prefix = inline.text.substring(0, startIndex);\n prefixAdded = true;\n }\n else {\n viewer.prefix = inline.text + viewer.prefix;\n }\n break;\n }\n }\n if (!(viewer.prefix.length > 1 && viewer.prefix[viewer.prefix.length - 1] === ' ' &&\n viewer.prefix[viewer.prefix.length - 2] === '.')) {\n spaceIndex = viewer.prefix.lastIndexOf(' ');\n }\n else {\n spaceIndex = -1;\n viewer.prefix = '';\n }\n viewer.prefix = spaceIndex < 0 ? viewer.prefix : viewer.prefix.substring(spaceIndex);\n if (viewer.prefix.indexOf(' ') === 0 && viewer.prefix.length >= 1) {\n viewer.prefix = viewer.prefix.substring(1);\n }\n // suffix text prediction\n var endIndex = 0;\n var endInlineInfo = this.selection.end.currentWidget.getInline(this.selection.end.offset, endIndex);\n var endInline = endInlineInfo.element;\n endIndex = endInlineInfo.index;\n boxInfo = this.selection.getElementBoxInternal(endInline, endIndex);\n box = boxInfo.element;\n endIndex = boxInfo.index;\n if (box) {\n var suffixAdded = false;\n if (box instanceof TextElementBox && endIndex < box.length) {\n viewer.suffix = '';\n }\n // boxIndex = renderedElements.get(endInline).indexOf(box);\n while ((spaceIndex = viewer.suffix.indexOf(' ')) < 0 && endInline instanceof TextElementBox) {\n if (endInline.nextNode instanceof TextElementBox && viewer.suffix.indexOf(' ') === -1) {\n if (!suffixAdded) {\n viewer.suffix = box.text.substring(endIndex);\n suffixAdded = true;\n }\n else {\n viewer.suffix = viewer.suffix + endInline.text;\n }\n endInline = endInline.nextNode;\n }\n else if (!(endInline.nextNode instanceof TextElementBox)) {\n if (!suffixAdded) {\n viewer.suffix = box.text.substring(endIndex);\n suffixAdded = true;\n }\n else {\n viewer.suffix = viewer.suffix + endInline.text;\n }\n break;\n }\n }\n spaceIndex = viewer.suffix.indexOf(' ');\n viewer.suffix = spaceIndex < 0 ? viewer.suffix : viewer.suffix.substring(0, spaceIndex);\n }\n }\n }\n }\n };\n /**\n * key action\n * @private\n */\n // tslint:disable:max-func-body-length\n Editor.prototype.onKeyDownInternal = function (event, ctrl, shift, alt) {\n var key = event.which || event.keyCode;\n if (ctrl && !shift && !alt) {\n this.viewer.isControlPressed = true;\n switch (key) {\n case 9:\n event.preventDefault();\n if (this.owner.acceptTab) {\n this.selection.handleTabKey(false, false);\n }\n break;\n case 48:\n event.preventDefault();\n this.onApplyParagraphFormat('beforeSpacing', 0, false, false);\n break;\n case 49:\n event.preventDefault();\n if (!this.owner.isReadOnlyMode) {\n this.onApplyParagraphFormat('lineSpacing', 1, false, false);\n }\n break;\n case 50:\n event.preventDefault();\n if (!this.owner.isReadOnlyMode) {\n this.onApplyParagraphFormat('lineSpacing', 2, false, false);\n }\n break;\n case 53:\n event.preventDefault();\n if (!this.owner.isReadOnlyMode) {\n this.onApplyParagraphFormat('lineSpacing', 1.5, false, false);\n }\n break;\n case 66:\n event.preventDefault();\n if (!this.owner.isReadOnlyMode) {\n this.toggleBold();\n }\n break;\n case 68:\n event.preventDefault();\n if (!this.owner.isReadOnlyMode && this.owner.fontDialogModule) {\n this.owner.fontDialogModule.showFontDialog();\n }\n break;\n case 69:\n if (!this.owner.isReadOnlyMode) {\n this.toggleTextAlignment('Center');\n }\n event.preventDefault();\n break;\n case 72:\n event.preventDefault();\n if (!this.owner.isReadOnly && this.owner.optionsPaneModule) {\n this.owner.optionsPaneModule.isReplace = true;\n this.owner.optionsPaneModule.showHideOptionsPane(true);\n }\n break;\n case 73:\n event.preventDefault();\n if (!this.owner.isReadOnlyMode) {\n this.toggleItalic();\n }\n break;\n case 74:\n if (!this.owner.isReadOnlyMode) {\n this.toggleTextAlignment('Justify');\n }\n event.preventDefault();\n break;\n case 75:\n event.preventDefault();\n if (this.owner.hyperlinkDialogModule && !this.owner.isReadOnlyMode) {\n this.owner.hyperlinkDialogModule.show();\n }\n break;\n case 76:\n if (!this.owner.isReadOnlyMode) {\n this.toggleTextAlignment('Left');\n }\n event.preventDefault();\n break;\n case 77:\n if (!this.owner.isReadOnlyMode) {\n this.owner.selection.increaseIndent();\n }\n event.preventDefault();\n break;\n case 78:\n event.preventDefault();\n if (!this.owner.isReadOnlyMode) {\n this.owner.openBlank();\n }\n break;\n case 82:\n if (!this.owner.isReadOnlyMode) {\n this.toggleTextAlignment('Right');\n }\n event.preventDefault();\n break;\n case 85:\n event.preventDefault();\n if (!this.owner.isReadOnlyMode) {\n this.owner.selection.toggleUnderline('Single');\n }\n break;\n case 88:\n event.preventDefault();\n if (!this.owner.isReadOnlyMode) {\n this.owner.editor.cut();\n }\n break;\n case 89:\n if (this.owner.enableEditorHistory) {\n this.editorHistory.redo();\n event.preventDefault();\n }\n break;\n case 90:\n if (this.owner.enableEditorHistory) {\n this.editorHistory.undo();\n event.preventDefault();\n }\n break;\n case 219:\n event.preventDefault();\n if (!this.owner.isReadOnlyMode) {\n this.onApplyCharacterFormat('fontSize', 'decrement', true);\n }\n break;\n case 221:\n event.preventDefault();\n if (!this.owner.isReadOnlyMode) {\n this.onApplyCharacterFormat('fontSize', 'increment', true);\n }\n break;\n case 187:\n event.preventDefault();\n if (!this.owner.isReadOnlyMode) {\n this.toggleBaselineAlignment('Subscript');\n }\n break;\n }\n }\n else if (shift && !ctrl && !alt) {\n switch (key) {\n case 9:\n event.preventDefault();\n if (this.owner.acceptTab) {\n this.selection.handleTabKey(false, true);\n }\n break;\n case 13:\n this.handleShiftEnter();\n event.preventDefault();\n break;\n }\n }\n else if (shift && ctrl && !alt) {\n switch (key) {\n case 68:\n if (!this.owner.isReadOnlyMode) {\n this.owner.selection.toggleUnderline('Double');\n }\n break;\n case 77:\n if (!this.owner.isReadOnlyMode) {\n this.owner.selection.decreaseIndent();\n }\n event.preventDefault();\n break;\n case 188:\n event.preventDefault();\n if (!this.owner.isReadOnlyMode) {\n this.onApplyCharacterFormat('fontSize', 'decrement', true);\n }\n break;\n case 190:\n event.preventDefault();\n if (!this.owner.isReadOnlyMode) {\n this.onApplyCharacterFormat('fontSize', 'increment', true);\n }\n break;\n case 187:\n event.preventDefault();\n if (!this.owner.isReadOnlyMode) {\n this.toggleBaselineAlignment('Superscript');\n }\n }\n }\n else if (!shift && ctrl && alt) {\n switch (key) {\n case 72:\n event.preventDefault();\n if (!this.owner.isReadOnlyMode && this.owner.isDocumentLoaded) {\n this.toggleHighlightColor();\n }\n break;\n }\n }\n else {\n switch (key) {\n case 8:\n event.preventDefault();\n this.handleBackKey();\n break;\n case 9:\n event.preventDefault();\n if (this.owner.acceptTab) {\n this.selection.handleTabKey(true, false);\n }\n break;\n case 13:\n event.preventDefault();\n this.handleEnterKey();\n break;\n case 46:\n this.handleDelete();\n event.preventDefault();\n break;\n }\n }\n };\n /**\n * @private\n */\n Editor.prototype.handleShiftEnter = function () {\n if (!this.owner.isReadOnlyMode) {\n this.handleTextInput('\\v');\n }\n this.selection.checkForCursorVisibility();\n };\n /**\n * Handles back key.\n * @private\n */\n Editor.prototype.handleBackKey = function () {\n if (!this.owner.isReadOnlyMode) {\n this.owner.editorModule.onBackSpace();\n }\n this.selection.checkForCursorVisibility();\n };\n /**\n * Handles delete\n * @private\n */\n Editor.prototype.handleDelete = function () {\n if (!this.owner.isReadOnlyMode) {\n this.owner.editorModule.onDelete();\n }\n this.selection.checkForCursorVisibility();\n };\n /**\n * Handles enter key.\n * @private\n */\n Editor.prototype.handleEnterKey = function () {\n if (!this.owner.isReadOnlyMode) {\n if (Browser.isDevice) {\n this.viewer.isCompositionStart = false;\n }\n this.owner.editorModule.onEnter();\n }\n this.selection.checkForCursorVisibility();\n };\n /**\n * @private\n */\n Editor.prototype.handleTextInput = function (text) {\n var _this = this;\n if (!this.owner.isReadOnlyMode) {\n if (this.animationTimer) {\n clearTimeout(this.animationTimer);\n }\n classList(this.selection.caret, [], ['e-de-cursor-animation']);\n this.owner.editorModule.insertText(text, false);\n /* tslint:disable:align */\n this.animationTimer = setTimeout(function () {\n if (_this.animationTimer) {\n clearTimeout(_this.animationTimer);\n }\n if (_this.selection && _this.selection.caret) {\n classList(_this.selection.caret, ['e-de-cursor-animation'], []);\n }\n }, 600);\n }\n this.selection.checkForCursorVisibility();\n };\n /**\n * Copies to format.\n * @param {WCharacterFormat} format\n * @private\n */\n Editor.prototype.copyInsertFormat = function (format, copy) {\n var insertFormat = new WCharacterFormat();\n var sFormat = this.selection.characterFormat;\n if (copy) {\n insertFormat.copyFormat(format);\n }\n if (!isNullOrUndefined(sFormat.bold) && format.bold !== sFormat.bold) {\n insertFormat.bold = sFormat.bold;\n }\n if (!isNullOrUndefined(sFormat.italic) && format.italic !== sFormat.italic) {\n insertFormat.italic = sFormat.italic;\n }\n if (sFormat.fontSize > 0 && format.fontSize !== sFormat.fontSize) {\n insertFormat.fontSize = sFormat.fontSize;\n }\n if (!isNullOrUndefined(sFormat.fontFamily) && format.fontFamily !== sFormat.fontFamily) {\n insertFormat.fontFamily = sFormat.fontFamily;\n }\n if (!isNullOrUndefined(sFormat.highlightColor) && format.highlightColor !== sFormat.highlightColor) {\n insertFormat.highlightColor = sFormat.highlightColor;\n }\n if (!isNullOrUndefined(sFormat.baselineAlignment) && format.baselineAlignment !== sFormat.baselineAlignment) {\n insertFormat.baselineAlignment = sFormat.baselineAlignment;\n }\n if (!isNullOrUndefined(sFormat.fontColor) && format.fontColor !== sFormat.fontColor) {\n insertFormat.fontColor = sFormat.fontColor;\n }\n if (!isNullOrUndefined(sFormat.underline) && format.underline !== sFormat.underline) {\n insertFormat.underline = sFormat.underline;\n }\n if (!isNullOrUndefined(sFormat.strikethrough) && format.strikethrough !== sFormat.strikethrough) {\n insertFormat.strikethrough = sFormat.strikethrough;\n }\n return insertFormat;\n };\n /**\n * Inserts the specified text at cursor position\n * @param {string} text\n * @param {boolean} isReplace\n * @private\n */\n //tslint:disable: max-func-body-length\n Editor.prototype.insertText = function (text, isReplace) {\n var selection = this.viewer.selection;\n var insertPosition;\n var isRemoved = true;\n this.isListTextSelected();\n this.initHistory('Insert');\n var paragraphInfo = this.getParagraphInfo(selection.start);\n this.viewer.selection.editPosition = this.getHierarchicalIndex(paragraphInfo.paragraph, paragraphInfo.offset.toString());\n if ((!selection.isEmpty && !this.viewer.selection.isImageSelected) ||\n this.viewer.isListTextSelected && selection.contextType === 'List') {\n selection.isSkipLayouting = true;\n selection.skipFormatRetrieval = true;\n isRemoved = this.removeSelectedContents(selection);\n selection.skipFormatRetrieval = false;\n selection.isSkipLayouting = false;\n }\n paragraphInfo = this.getParagraphInfo(selection.start);\n if (isRemoved) {\n selection.owner.isShiftingEnabled = true;\n this.updateInsertPosition();\n insertPosition = selection.start;\n if (insertPosition.paragraph.isEmpty()) {\n var span = new TextElementBox();\n var insertFormat = this.copyInsertFormat(insertPosition.paragraph.characterFormat, true);\n span.characterFormat.copyFormat(insertFormat);\n span.text = text;\n span.line = insertPosition.paragraph.childWidgets[0];\n span.margin = new Margin(0, 0, 0, 0);\n span.line.children.push(span);\n if ((insertPosition.paragraph.paragraphFormat.textAlignment === 'Center'\n || insertPosition.paragraph.paragraphFormat.textAlignment === 'Right') &&\n insertPosition.paragraph.paragraphFormat.listFormat.listId === -1) {\n insertPosition.paragraph.x = this.viewer.clientActiveArea.x;\n }\n this.viewer.layout.reLayoutParagraph(insertPosition.paragraph, 0, 0);\n }\n else {\n var indexInInline = 0;\n var inlineObj = insertPosition.currentWidget.getInline(insertPosition.offset, indexInInline);\n var inline = inlineObj.element;\n indexInInline = inlineObj.index;\n // Todo: compare selection format\n var insertFormat = this.copyInsertFormat(inline.characterFormat, true);\n if (insertFormat.isSameFormat(inline.characterFormat)) {\n this.insertTextInline(inline, selection, text, indexInInline);\n }\n else {\n var tempSpan = new TextElementBox();\n tempSpan.text = text;\n tempSpan.line = inline.line;\n tempSpan.characterFormat.copyFormat(insertFormat);\n var insertIndex = inline.indexInOwner;\n if (indexInInline === inline.length) {\n inline.line.children.splice(insertIndex + 1, 0, tempSpan);\n }\n else if (indexInInline === 0) {\n inline.line.children.splice(insertIndex, 0, tempSpan);\n }\n else {\n if (inline instanceof TextElementBox) {\n var splittedSpan = new TextElementBox();\n splittedSpan.line = inline.line;\n splittedSpan.characterFormat.copyFormat(inline.characterFormat);\n splittedSpan.text = inline.text.substring(indexInInline);\n inline.text = inline.text.slice(0, indexInInline);\n inline.line.children.splice(insertIndex + 1, 0, splittedSpan);\n }\n inline.line.children.splice(insertIndex + 1, 0, tempSpan);\n }\n this.viewer.layout.reLayoutParagraph(insertPosition.paragraph, inline.line.indexInOwner, 0);\n }\n }\n this.setPositionParagraph(paragraphInfo.paragraph, paragraphInfo.offset + text.length, true);\n this.updateEndPosition();\n // tslint:disable-next-line:max-line-length\n if (!isNullOrUndefined(this.editorHistory) && !isNullOrUndefined(this.editorHistory.currentHistoryInfo) && (this.editorHistory.currentHistoryInfo.action === 'ListSelect') &&\n this.viewer.isListTextSelected) {\n this.editorHistory.updateHistory();\n this.editorHistory.updateComplexHistory();\n }\n // if (!isNullOrUndefined(selection.currentHistoryInfo) && (selection.currentHistoryInfo.action === 'MultiSelection')) {\n // this.updateComplexHistory();\n // } else { \n this.reLayout(selection);\n // }\n }\n else {\n // selection.selectContent(selection.start, true);\n }\n // insertFormat.destroy();\n if (!isReplace && isRemoved && (text === ' ' || text === '\\t' || text === '\\v')) {\n var hyperlinkField = selection.getHyperlinkField();\n var isSelectionOnHyperlink = !isNullOrUndefined(hyperlinkField);\n var isList = false;\n if (!(text === '\\v')) {\n isList = this.checkAndConvertList(selection, text === '\\t');\n }\n if (isSelectionOnHyperlink) {\n return;\n }\n if (!isList) {\n //Checks if the previous text is URL, then it is auto formatted to hyperlink.\n this.checkAndConvertToHyperlink(selection, false);\n }\n }\n };\n //Auto convert List\n Editor.prototype.checkAndConvertList = function (selection, isTab) {\n var list = selection.paragraphFormat.getList();\n if (!isNullOrUndefined(list)) {\n return false;\n }\n var convertList = false;\n var isLeadingZero = false;\n var indexInInline = 0;\n var inlineObj = selection.start.currentWidget.getInline(selection.start.offset - 1, indexInInline);\n var inline = inlineObj.element;\n indexInInline = inlineObj.index;\n if (!(inline instanceof TextElementBox)) {\n return false;\n }\n var span = inline;\n var text = span.text.substring(0, indexInInline);\n var tabValue = 0;\n var length = 0;\n while (!isNullOrUndefined(span.previousNode)) {\n // tslint:disable-next-line:max-line-length\n if (span.previousNode instanceof TextElementBox && (span.previousNode.text === '\\t' || span.previousNode.text.trim().length === 0)) {\n (span.previousNode.text === '\\t') ? tabValue += 36 : length = span.previousNode.text.length * 2.5;\n span = span.previousNode;\n continue;\n }\n return false;\n }\n span = inline;\n var index = 0;\n var tabIndex = text.lastIndexOf('\\t');\n index = (tabIndex >= 0) ? tabIndex + 1 : text.lastIndexOf(' ') + 1;\n while (span.previousNode instanceof TextElementBox && index === 0) {\n span = span.previousNode;\n var previousText = span.text;\n tabIndex = previousText.lastIndexOf('\\t');\n index = (tabIndex >= 0) ? tabIndex + 1 : previousText.lastIndexOf(' ') + 1;\n text = span.text + text;\n text = text.substring(index);\n }\n text = HelperMethods.trimStart(text);\n var numberFormat = text.substring(1, 2);\n var listLevelPattern = this.getListLevelPattern(text.substring(0, 1));\n if (listLevelPattern !== 'None' && this.checkNumberFormat(numberFormat, listLevelPattern === 'Bullet', text)) {\n convertList = true;\n }\n else if (this.checkLeadingZero(text)) {\n isLeadingZero = true;\n convertList = true;\n }\n if (convertList) {\n this.initComplexHistory('AutoList');\n var paragraph = inline.paragraph;\n // tslint:disable-next-line:max-line-length\n selection.start.setPositionParagraph(paragraph.childWidgets[0], paragraph.childWidgets[0].getOffset(inline, indexInInline + 1));\n selection.end.setPositionParagraph(paragraph.childWidgets[0], 0);\n this.initHistory('Delete');\n this.deleteSelectedContents(selection, false);\n this.reLayout(selection, false);\n var followCharacter = isTab ? 'Tab' : 'Space';\n numberFormat = !isLeadingZero ? '%1' + numberFormat : '%1' + text.substring(text.length - 1, text.length);\n var leadingZeroText = text.substring(text.length - 3, text.length - 1);\n listLevelPattern = !isLeadingZero ? listLevelPattern : this.getListLevelPattern(leadingZeroText);\n var listLevel = new WListLevel(undefined);\n listLevel.listLevelPattern = listLevelPattern;\n if (listLevelPattern === 'Bullet') {\n if (text === '*') {\n listLevel.numberFormat = '\\uf0b7';\n listLevel.characterFormat.fontFamily = 'Symbol';\n }\n else if (text === '-') {\n listLevel.numberFormat = '-';\n }\n }\n else {\n listLevel.numberFormat = numberFormat;\n }\n listLevel.followCharacter = followCharacter;\n var leftIndent = selection.paragraphFormat.leftIndent;\n if (tabValue !== 0 || length !== 0) {\n listLevel.paragraphFormat.leftIndent = leftIndent + 18 + tabValue + length;\n }\n else if (indexInInline > 2) {\n listLevel.paragraphFormat.leftIndent = leftIndent + (indexInInline - 2) * 2.5 + 18;\n }\n else if (leftIndent > 0) {\n listLevel.paragraphFormat.leftIndent = leftIndent + 18;\n }\n else {\n listLevel.paragraphFormat.leftIndent = 36;\n }\n listLevel.paragraphFormat.firstLineIndent = -18;\n if ((!isLeadingZero && text.substring(0, 1) === '0') || leadingZeroText === '00') {\n listLevel.startAt = 0;\n }\n else {\n listLevel.startAt = 1;\n }\n this.autoConvertList(selection, listLevel);\n if (this.editorHistory && !isNullOrUndefined(this.editorHistory.currentHistoryInfo)) {\n this.editorHistory.updateComplexHistory();\n }\n else {\n this.reLayout(selection);\n }\n }\n return convertList;\n };\n Editor.prototype.getListLevelPattern = function (value) {\n switch (value) {\n case '0':\n case '1':\n return 'Arabic';\n case 'I':\n return 'UpRoman';\n case 'i':\n return 'LowRoman';\n case 'A':\n return 'UpLetter';\n case 'a':\n return 'LowLetter';\n case '*':\n case '-':\n return 'Bullet';\n case '00':\n case '01':\n return 'LeadingZero';\n default:\n return 'None';\n }\n };\n Editor.prototype.autoConvertList = function (selection, listLevel) {\n var start = selection.start;\n if (!selection.isForward) {\n start = selection.end;\n }\n var newList = new WList();\n if (this.viewer.lists.length > 0) {\n newList.listId = this.viewer.lists[this.viewer.lists.length - 1].listId + 1;\n }\n else {\n newList.listId = 0;\n }\n var newAbstractList = new WAbstractList();\n var layout = this.viewer;\n if (layout.abstractLists.length > 0) {\n newAbstractList.abstractListId = layout.abstractLists[layout.abstractLists.length - 1].abstractListId + 1;\n }\n else {\n newAbstractList.abstractListId = 0;\n }\n newList.abstractListId = newAbstractList.abstractListId;\n layout.abstractLists.push(newAbstractList);\n newAbstractList.levels.push(listLevel);\n listLevel.ownerBase = newAbstractList;\n selection.paragraphFormat.setList(newList);\n selection.paragraphFormat.listLevelNumber = 0;\n };\n Editor.prototype.checkNumberFormat = function (numberFormat, isBullet, text) {\n if (isBullet) {\n return numberFormat === '';\n }\n else {\n var index = text.indexOf(numberFormat);\n return (numberFormat === '.' || numberFormat === ')'\n || numberFormat === '>' || numberFormat === '-') && text.substring(index, text.length - 1) === '';\n }\n };\n Editor.prototype.checkLeadingZero = function (text) {\n var j;\n var isZero = false;\n for (var i = 0; i <= text.length - 1; i++) {\n if (text.charAt(i) === '0') {\n isZero = true;\n continue;\n }\n j = i;\n break;\n }\n var numberFormat = undefined;\n if (text.charAt(j) === '1') {\n numberFormat = text.charAt(j + 1);\n }\n else {\n numberFormat = text.charAt(j);\n }\n return isZero && this.checkNumberFormat(numberFormat, false, text);\n };\n Editor.prototype.getPageFromBlockWidget = function (block) {\n var page = undefined;\n if (block.containerWidget instanceof BodyWidget) {\n page = block.containerWidget.page;\n }\n else if (block.containerWidget instanceof HeaderFooterWidget) {\n page = block.containerWidget.page;\n }\n else if (block.containerWidget instanceof TableCellWidget) {\n page = block.containerWidget.bodyWidget.page;\n }\n return page;\n };\n /**\n * @private\n */\n Editor.prototype.insertTextInline = function (element, selection, text, index) {\n if (element instanceof TextElementBox) {\n element.text = HelperMethods.insert(element.text, index, text);\n var paragraph = element.line.paragraph;\n var lineIndex = paragraph.childWidgets.indexOf(element.line);\n var elementIndex = element.line.children.indexOf(element);\n this.viewer.layout.reLayoutParagraph(paragraph, lineIndex, elementIndex);\n }\n else if (element instanceof ImageElementBox) {\n this.insertImageText(element, selection, text, index);\n }\n else if (element instanceof FieldElementBox) {\n if (element.fieldType === 0) {\n this.insertFieldBeginText(element, selection, text, index);\n }\n else if (element.fieldType === 2) {\n this.insertFieldSeparatorText(element, selection, text, index);\n }\n else {\n this.insertFieldEndText(element, selection, text, index);\n }\n }\n else if (element instanceof BookmarkElementBox) {\n this.insertBookMarkText(element, selection, text, index);\n }\n };\n Editor.prototype.insertFieldBeginText = function (fieldBegin, selection, text, index) {\n var spanObj = new TextElementBox();\n spanObj.text = text;\n var lineIndex = fieldBegin.line.paragraph.childWidgets.indexOf(fieldBegin.line);\n var spanIndex = fieldBegin.line.children.indexOf(fieldBegin);\n spanObj.characterFormat.copyFormat(fieldBegin.characterFormat);\n fieldBegin.line.children.splice(spanIndex, 0, spanObj);\n spanObj.line = fieldBegin.line;\n this.viewer.layout.reLayoutParagraph(fieldBegin.line.paragraph, lineIndex, spanIndex);\n };\n Editor.prototype.insertBookMarkText = function (element, selection, text, index) {\n var spanObj = new TextElementBox();\n spanObj.text = text;\n var lineIndex = element.line.paragraph.childWidgets.indexOf(element.line);\n var spanIndex = element.line.children.indexOf(element);\n spanObj.characterFormat.copyFormat(element.characterFormat);\n element.line.children.splice(spanIndex, 0, spanObj);\n spanObj.line = element.line;\n this.viewer.layout.reLayoutParagraph(element.line.paragraph, lineIndex, spanIndex);\n };\n Editor.prototype.insertFieldSeparatorText = function (fieldSeparator, selection, text, index) {\n var previousInline = selection.getPreviousTextInline(fieldSeparator);\n var nextInline = selection.getNextTextInline(fieldSeparator);\n var span = new TextElementBox();\n span.text = text;\n var spanIndex = fieldSeparator.line.children.indexOf(fieldSeparator);\n if (index === fieldSeparator.length) {\n spanIndex++;\n }\n if (isNullOrUndefined(previousInline) && isNullOrUndefined(nextInline)) {\n span.characterFormat.copyFormat(fieldSeparator.line.paragraph.characterFormat);\n }\n else if (isNullOrUndefined(previousInline)) {\n span.characterFormat.copyFormat(nextInline.characterFormat);\n }\n else {\n span.characterFormat.copyFormat(previousInline.characterFormat);\n }\n fieldSeparator.line.children.splice(spanIndex, 0, span);\n span.line = fieldSeparator.line;\n var lineIndex = fieldSeparator.line.paragraph.childWidgets.indexOf(fieldSeparator.line);\n this.viewer.layout.reLayoutParagraph(fieldSeparator.line.paragraph, lineIndex, spanIndex);\n };\n Editor.prototype.insertFieldEndText = function (fieldEnd, selection, text, index) {\n var span = new TextElementBox();\n span.text = text;\n var spanIndex = fieldEnd.line.children.indexOf(fieldEnd);\n span.characterFormat.copyFormat(fieldEnd.characterFormat);\n fieldEnd.line.children.splice(spanIndex + 1, 0, span);\n span.line = fieldEnd.line;\n var lineIndex = fieldEnd.line.paragraph.childWidgets.indexOf(fieldEnd.line);\n this.viewer.layout.reLayoutParagraph(fieldEnd.line.paragraph, lineIndex, spanIndex);\n };\n Editor.prototype.insertImageText = function (image, selection, text, index) {\n var previousInlineObj = selection.getPreviousTextInline(image);\n var nextInlineObj = selection.getNextTextInline(image);\n var line = image.line;\n var element = new TextElementBox();\n var paragraph = line.paragraph;\n var lineIndex = paragraph.childWidgets.indexOf(line);\n element.text = text;\n var spanIndex = line.children.indexOf(image);\n if (index === image.length) {\n spanIndex++;\n }\n if (isNullOrUndefined(previousInlineObj) && isNullOrUndefined(nextInlineObj)) {\n element.characterFormat.copyFormat(paragraph.characterFormat);\n }\n else if (isNullOrUndefined(previousInlineObj)) {\n element.characterFormat.copyFormat(nextInlineObj.characterFormat);\n }\n else {\n element.characterFormat.copyFormat(previousInlineObj.characterFormat);\n }\n line.children.splice(spanIndex, 0, element);\n element.line = line;\n this.viewer.layout.reLayoutParagraph(paragraph, lineIndex, spanIndex);\n };\n /**\n * @private\n */\n Editor.prototype.isListTextSelected = function () {\n if (this.viewer.isListTextSelected) {\n this.initComplexHistory('ListSelect');\n // tslint:disable-next-line:max-line-length\n if (this.viewer.selection.start.paragraph.paragraphFormat.listFormat && this.viewer.selection.start.paragraph.paragraphFormat.listFormat.listId !== -1) {\n this.onApplyList(undefined);\n }\n }\n };\n //Auto Format and insert Hyperlink Implementation starts\n Editor.prototype.checkAndConvertToHyperlink = function (selection, isEnter, paragraph) {\n var text;\n var span;\n if (isEnter) {\n span = paragraph.lastChild.children[paragraph.lastChild.children.length - 1];\n text = span.text;\n }\n else {\n var indexInInline = 0;\n var inlineObj = selection.start.currentWidget.getInline(selection.start.offset - 1, indexInInline);\n var inline = inlineObj.element;\n indexInInline = inlineObj.index;\n if (!(inline instanceof TextElementBox)) {\n return;\n }\n span = inline;\n text = span.text.substring(0, indexInInline);\n }\n var index = 0;\n var tabCharIndex = text.lastIndexOf('\\t');\n index = (tabCharIndex >= 0) ? tabCharIndex + 1 : text.lastIndexOf(' ') + 1;\n while (span.previousNode instanceof TextElementBox && index === 0) {\n span = span.previousNode;\n var previousText = span.text;\n tabCharIndex = previousText.lastIndexOf('\\t');\n index = (tabCharIndex >= 0) ? tabCharIndex + 1 : previousText.lastIndexOf(' ') + 1;\n text = span.text + text;\n }\n text = text.substring(index);\n var lowerCaseText = text.toLowerCase();\n var containsURL = false;\n if (lowerCaseText.substring(0, 8) === 'file:///'\n || (lowerCaseText.substring(0, 7) === 'http://' && lowerCaseText.length > 7)\n || (lowerCaseText.substring(0, 8) === 'https://' && lowerCaseText.length > 8)\n || (lowerCaseText.substring(0, 4) === 'www.' && lowerCaseText.length > 4)\n || (lowerCaseText.substring(0, 3) === '\\\\' && lowerCaseText.length > 3)\n || (lowerCaseText.substring(0, 7) === 'mailto:' && lowerCaseText.length > 7)) {\n containsURL = true;\n if (lowerCaseText.substring(0, 4) === 'www.' && lowerCaseText.length > 4) {\n text = 'http://' + text;\n }\n }\n else {\n var atIndex = text.indexOf('@');\n var dotIndex = text.indexOf('.');\n if (atIndex > 0 && atIndex < dotIndex && dotIndex < text.length - 1) {\n containsURL = true;\n text = 'mailto:' + text;\n }\n }\n if (containsURL) {\n var startPos = new TextPosition(this.viewer.owner);\n startPos.setPositionParagraph(span.line, span.line.getOffset(span, index));\n var endPos = new TextPosition(this.viewer.owner);\n if (isEnter) {\n endPos.setPositionParagraph(span.line, span.line.getEndOffset());\n }\n else {\n if (selection.end.currentWidget.children.length === 0 && selection.end.offset === 0) {\n var prevLine = selection.end.currentWidget.previousLine;\n endPos.setPositionParagraph(prevLine, prevLine.getEndOffset());\n }\n else {\n endPos.setPositionParagraph(selection.end.currentWidget, selection.end.offset - 1);\n }\n }\n this.autoFormatHyperlink(selection, text, startPos, endPos);\n }\n };\n Editor.prototype.autoFormatHyperlink = function (selection, url, startPosition, endPosition) {\n this.initComplexHistory('AutoFormatHyperlink');\n var blockInfo = this.getParagraphInfo(startPosition);\n var start = this.getHierarchicalIndex(blockInfo.paragraph, blockInfo.offset.toString());\n if (this.editorHistory && this.editorHistory.currentHistoryInfo) {\n this.editorHistory.currentHistoryInfo.insertPosition = start;\n }\n // Moves the selection to URL text start and end position.\n selection.start.setPositionInternal(startPosition);\n selection.end.setPositionInternal(endPosition);\n // Preserves the character format for hyperlink field.\n var temp = this.getCharacterFormat(selection);\n var format = new WCharacterFormat();\n format.copyFormat(temp);\n var fieldEnd = this.createHyperlinkElement(url, startPosition, endPosition, format);\n // Moves the selection to the end of field end position.\n selection.start.setPositionParagraph(fieldEnd.line, (fieldEnd.line).getOffset(fieldEnd, 1));\n // Moves to next text position. (To achieve common behavior for space and enter).\n selection.start.moveNextPosition();\n selection.end.setPositionInternal(selection.start);\n blockInfo = this.getParagraphInfo(selection.end);\n var end = this.getHierarchicalIndex(blockInfo.paragraph, blockInfo.offset.toString());\n if (this.editorHistory && this.editorHistory.currentHistoryInfo) {\n this.editorHistory.currentHistoryInfo.endPosition = end;\n this.editorHistory.updateComplexHistory();\n this.reLayout(selection);\n }\n else {\n this.updateComplexWithoutHistory(0, start, end);\n }\n };\n Editor.prototype.appylingHyperlinkFormat = function (selection) {\n this.initHistory('Underline');\n this.updateCharacterFormatWithUpdate(selection, 'underline', 'Single', false);\n if (this.editorHistory) {\n this.editorHistory.updateHistory();\n }\n this.reLayout(selection, false);\n // Applies font color for field result.\n this.initHistory('FontColor');\n this.updateCharacterFormatWithUpdate(selection, 'fontColor', '#0563c1', false);\n if (this.editorHistory) {\n this.editorHistory.updateHistory();\n }\n this.reLayout(selection, false);\n };\n // tslint:disable-next-line:max-line-length\n Editor.prototype.createHyperlinkElement = function (url, startPosition, endPosition, format) {\n var selection = this.selection;\n this.viewer.layout.allowLayout = false;\n this.appylingHyperlinkFormat(selection);\n this.viewer.layout.allowLayout = true;\n // Adds the field end at the URL text end position.\n var fieldEnd = new FieldElementBox(1);\n fieldEnd.characterFormat.copyFormat(format);\n fieldEnd.line = selection.end.currentWidget;\n selection.start.setPositionInternal(selection.end);\n // this.insertElementInCurrentLine(selection, fieldEnd, true);\n this.initInsertInline(fieldEnd);\n // Moves the selection to URL text start position. \n selection.start.setPositionInternal(startPosition);\n selection.end.setPositionInternal(selection.start);\n // Adds field begin, field code and field separator at the URL text start position.\n var begin = this.insertHyperlinkfield(selection, format, url);\n var lineIndex = selection.start.paragraph.childWidgets.indexOf(begin.line);\n var index = begin.line.children.indexOf(begin);\n fieldEnd.linkFieldCharacter(this.viewer);\n this.viewer.layout.reLayoutParagraph(selection.start.paragraph, lineIndex, index);\n return fieldEnd;\n };\n Editor.prototype.insertHyperlinkfield = function (selection, format, url, isBookmark) {\n // Adds field begin, field code and field separator at the URL text start position.\n var begin = new FieldElementBox(0);\n begin.characterFormat.copyFormat(format);\n begin.line = selection.start.currentWidget;\n this.initInsertInline(begin);\n var span = new TextElementBox();\n span.characterFormat.copyFormat(format);\n if (isBookmark) {\n span.text = ' HYPERLINK \\\\l \\\"' + url + '\\\" ';\n }\n else {\n span.text = ' HYPERLINK \\\"' + url + '\\\" ';\n }\n span.line = selection.start.currentWidget;\n this.initInsertInline(span);\n var separator = new FieldElementBox(2);\n separator.characterFormat.copyFormat(format);\n separator.line = selection.start.currentWidget;\n this.initInsertInline(separator);\n return begin;\n };\n Editor.prototype.unLinkFieldCharacter = function (inline) {\n if (inline instanceof FieldElementBox && inline.fieldType === 0) {\n if (inline.fieldEnd) {\n if (this.viewer) {\n this.viewer.fieldToLayout = inline;\n this.viewer.fieldEndParagraph = inline.line.paragraph;\n }\n // inline.line.paragraph.addFieldCharacter(inline.fieldEnd);\n inline.fieldEnd = undefined;\n }\n }\n if (inline instanceof FieldElementBox && inline.fieldType === 2) {\n if (!isNullOrUndefined(inline.fieldEnd)) {\n if (this.viewer) {\n this.viewer.fieldToLayout = inline.fieldBegin;\n this.viewer.fieldEndParagraph = inline.line.paragraph;\n }\n inline.fieldBegin.fieldSeparator = undefined;\n inline.fieldEnd.fieldSeparator = undefined;\n }\n }\n else if (inline instanceof FieldElementBox && inline.fieldType === 1) {\n if (inline.fieldBegin) {\n if (!isNullOrUndefined(this.viewer)) {\n this.viewer.fieldToLayout = inline.fieldBegin;\n this.viewer.fieldEndParagraph = inline.line.paragraph;\n }\n var fieldIndex = this.viewer.fields.indexOf(inline.fieldBegin);\n if (fieldIndex !== -1) {\n this.viewer.fields.splice(fieldIndex, 1);\n }\n inline.fieldBegin = undefined;\n }\n }\n };\n Editor.prototype.getCharacterFormat = function (selection) {\n if (selection.start.paragraph.isEmpty()) {\n return selection.start.paragraph.characterFormat;\n }\n else {\n var info = selection.start.currentWidget.getInline(selection.start.offset, 0);\n return info.element.characterFormat;\n }\n };\n /**\n * Insert Hyperlink\n * @param {string} url\n * @param {string} displayText\n * @param {boolean} remove\n * @private\n */\n Editor.prototype.insertHyperlink = function (url, displayText, remove, isBookmark) {\n var selection = this.viewer.selection;\n if (selection.start.paragraph.associatedCell !== selection.end.paragraph.associatedCell) {\n return;\n }\n if (remove) {\n //Empty selection Hyperlink insert\n this.insertHyperlinkInternal(selection, url, displayText, isBookmark);\n }\n else {\n //Non-Empty Selection- change the selected text to Field \n // this.preservedFontCol = this.getFontColor();\n var startPosition = selection.start;\n var endPosition = selection.end;\n if (!selection.isForward) {\n startPosition = selection.end;\n endPosition = selection.start;\n }\n var fieldStartPosition = new TextPosition(this.viewer.owner);\n fieldStartPosition.setPositionInternal(startPosition);\n var temp = this.getCharacterFormat(selection);\n var format = new WCharacterFormat(undefined);\n format.copyFormat(temp);\n this.initComplexHistory('InsertHyperlink');\n var blockInfo = this.getParagraphInfo(startPosition);\n var start = this.getHierarchicalIndex(blockInfo.paragraph, blockInfo.offset.toString());\n if (this.editorHistory && this.editorHistory.currentHistoryInfo) {\n // tslint:disable-next-line:max-line-length\n this.editorHistory.currentHistoryInfo.insertPosition = this.getHierarchicalIndex(blockInfo.paragraph, blockInfo.offset.toString());\n }\n this.appylingHyperlinkFormat(selection);\n this.viewer.layout.allowLayout = true;\n startPosition.setPositionInternal(endPosition);\n // Adds the field end at the URL text end position.\n var fieldEnd = new FieldElementBox(1);\n fieldEnd.characterFormat.copyFormat(format);\n fieldEnd.line = selection.end.currentWidget;\n startPosition.setPositionInternal(endPosition);\n // this.insertElementInCurrentLine(selection, fieldEnd, true);\n this.initInsertInline(fieldEnd);\n // Moves the selection to URL text start position. \n startPosition.setPositionInternal(fieldStartPosition);\n endPosition.setPositionInternal(startPosition);\n // Adds field begin, field code and field separator at the URL text start position.\n var begin = this.insertHyperlinkfield(selection, format, url, isBookmark);\n fieldEnd.linkFieldCharacter(this.viewer);\n var lineIndex = selection.start.paragraph.childWidgets.indexOf(begin.line);\n var index = begin.line.children.indexOf(begin);\n this.viewer.layout.reLayoutParagraph(selection.start.paragraph, lineIndex, index);\n var lineWidget = fieldEnd.line;\n selection.selects(lineWidget, lineWidget.getOffset(fieldEnd, fieldEnd.length), true);\n blockInfo = this.getParagraphInfo(endPosition);\n var end = this.getHierarchicalIndex(blockInfo.paragraph, blockInfo.offset.toString());\n if (this.editorHistory && this.editorHistory.currentHistoryInfo) {\n // tslint:disable-next-line:max-line-length\n this.editorHistory.currentHistoryInfo.endPosition = this.getHierarchicalIndex(blockInfo.paragraph, blockInfo.offset.toString());\n this.editorHistory.updateComplexHistory();\n }\n else {\n this.updateComplexWithoutHistory(1, start, end);\n }\n }\n };\n Editor.prototype.insertHyperlinkInternal = function (selection, url, displayText, isBookmark) {\n if (isNullOrUndefined(selection.start)) {\n return;\n }\n if (this.editHyperlink(selection, url, displayText)) {\n return;\n }\n this.initHistory('InsertHyperlink');\n var isRemoved = true;\n if (!selection.isEmpty) {\n isRemoved = this.removeSelectedContents(selection);\n }\n if (isRemoved) {\n // Preserves the character format for hyperlink field.\n var temp = this.getCharacterFormat(selection);\n var format = new WCharacterFormat();\n format.copyFormat(temp);\n this.insertHyperlinkByFormat(selection, url, displayText, format, isBookmark);\n }\n //else\n // this.Select(Start, true);\n };\n // tslint:disable-next-line:max-line-length\n Editor.prototype.insertHyperlinkByFormat = function (selection, url, displayText, format, isBookmark) {\n this.updateInsertPosition();\n selection.owner.isShiftingEnabled = true;\n var indexInInline = 0;\n var initial = indexInInline;\n var element = [];\n var fieldBegin = new FieldElementBox(0);\n element.push(fieldBegin);\n var span = new TextElementBox();\n if (isBookmark) {\n span.text = ' HYPERLINK \\\\l \\\"' + url + '\\\" ';\n }\n else {\n span.text = ' HYPERLINK \\\"' + url + '\\\" ';\n }\n element.push(span);\n var fieldSeparator = new FieldElementBox(2);\n element.push(fieldSeparator);\n if (!isNullOrUndefined(displayText) && displayText !== '') {\n span = new TextElementBox();\n span.characterFormat.underline = 'Single';\n span.characterFormat.fontColor = '#0563c1';\n span.text = displayText;\n element.push(span);\n }\n var fieldEnd = new FieldElementBox(1);\n element.push(fieldEnd);\n this.insertElement(element);\n var paragraph = selection.start.paragraph;\n fieldEnd.linkFieldCharacter(this.viewer);\n if (this.viewer.fields.indexOf(fieldBegin) === -1) {\n this.viewer.fields.push(fieldBegin);\n }\n var offset = fieldEnd.line.getOffset(fieldEnd, 1);\n selection.selects(fieldEnd.line, fieldEnd.line.getOffset(fieldEnd, fieldEnd.length), true);\n this.updateEndPosition();\n this.reLayout(selection, true);\n };\n Editor.prototype.initInsertInline = function (element, insertHyperlink) {\n this.initHistory('InsertInline');\n this.insertInlineInSelection(this.viewer.selection, element);\n if (this.editorHistory) {\n this.editorHistory.updateHistory();\n }\n };\n /**\n * @private\n */\n Editor.prototype.insertElementInCurrentLine = function (selection, inline, isReLayout) {\n if (this.checkIsNotRedoing()) {\n selection.owner.isShiftingEnabled = true;\n }\n if (!selection.isEmpty) {\n this.removeSelectedContents(selection);\n }\n this.updateInsertPosition();\n this.insertElement([inline]);\n if (this.checkEndPosition(selection)) {\n this.updateHistoryPosition(selection.start, false);\n }\n this.fireContentChange();\n };\n /**\n * Edit Hyperlink\n * @param {Selection} selection\n * @param {string} url\n * @param {string} displayText\n * @private\n */\n Editor.prototype.editHyperlink = function (selection, url, displayText, isBookmark) {\n var fieldBegin = selection.getHyperlinkField();\n if (isNullOrUndefined(fieldBegin)) {\n return false;\n }\n this.initHistory('InsertHyperlink');\n this.editHyperlinkInternal = isNullOrUndefined(this.editorHistory)\n || (this.editorHistory && isNullOrUndefined(this.editorHistory.currentBaseHistoryInfo));\n var fieldResult = '';\n var isNestedField = false;\n // Preserves the character format for hyperlink field.\n var temp = this.getCharacterFormat(selection);\n var format = new WCharacterFormat();\n format.copyFormat(temp);\n var fieldSeparator = undefined;\n if (!isNullOrUndefined(fieldBegin.fieldSeparator)) {\n fieldSeparator = fieldBegin.fieldSeparator;\n // tslint:disable-next-line:max-line-length\n var fieldObj = selection.getHyperlinkDisplayText(fieldBegin.fieldSeparator.line.paragraph, fieldBegin.fieldSeparator, fieldBegin.fieldEnd, isNestedField, format);\n fieldResult = fieldObj.displayText;\n isNestedField = fieldObj.isNestedField;\n format = fieldObj.format;\n }\n var offset = fieldBegin.line.getOffset(fieldBegin, 0);\n selection.start.setPositionParagraph(fieldBegin.line, offset);\n offset = fieldBegin.fieldEnd.line.getOffset(fieldBegin.fieldEnd, 1);\n selection.end.setPositionParagraph(fieldBegin.fieldEnd.line, offset);\n this.deleteSelectedContents(selection, false);\n if (!isNestedField && fieldResult !== displayText || isNullOrUndefined(fieldSeparator)) {\n this.insertHyperlinkByFormat(selection, url, displayText, format, isBookmark);\n }\n else {\n //Modify the new hyperlink url. Inserts field begin, url and field separator.\n this.updateInsertPosition();\n var newFieldBegin = new FieldElementBox(0);\n newFieldBegin.characterFormat.copyFormat(fieldBegin.characterFormat);\n newFieldBegin.line = selection.start.currentWidget;\n this.insertInlineInternal(newFieldBegin);\n var span = new TextElementBox();\n span.characterFormat.copyFormat(fieldBegin.characterFormat);\n if (isBookmark) {\n span.text = ' HYPERLINK \\\\l \\\"' + url + '\\\" ';\n }\n else {\n span.text = ' HYPERLINK \\\"' + url + '\\\" ';\n }\n span.line = selection.start.currentWidget;\n this.insertInlineInternal(span);\n var nodes = this.editorHistory && this.editorHistory.currentBaseHistoryInfo ?\n this.editorHistory.currentBaseHistoryInfo.removedNodes : this.nodes;\n this.insertClonedFieldResult(selection, nodes, fieldSeparator);\n var fieldEnd = selection.end.currentWidget.getInline(selection.end.offset, 0).element;\n fieldEnd.linkFieldCharacter(this.viewer);\n var paragraph = newFieldBegin.line.paragraph;\n var lineIndex = newFieldBegin.line.paragraph.childWidgets.indexOf(newFieldBegin.line);\n var elementIndex = newFieldBegin.line.children.indexOf(newFieldBegin);\n this.viewer.layout.reLayoutParagraph(paragraph, lineIndex, elementIndex);\n selection.selects(newFieldBegin.fieldEnd.line, offset, true);\n this.updateEndPosition();\n this.reLayout(selection, true);\n }\n this.editHyperlinkInternal = false;\n this.nodes = [];\n return true;\n };\n /* tslint:disable:no-any */\n Editor.prototype.insertClonedFieldResult = function (selection, nodes, fieldSeparator) {\n var fieldEnd;\n var isStarted = false;\n for (var i = nodes.length - 1; i > -1; i--) {\n var node = nodes[i];\n /* tslint:enable:no-any */\n if (!isStarted) {\n if (fieldSeparator === node) {\n isStarted = true;\n }\n else {\n if (node instanceof ParagraphWidget && node === fieldSeparator.line.paragraph) {\n isStarted = true;\n var paragraph = undefined;\n if (i === nodes.length - 1) {\n paragraph = selection.start.paragraph;\n var fieldParagraph = fieldSeparator.line.paragraph;\n this.getClonedFieldResultWithSel(fieldParagraph, selection, fieldSeparator);\n }\n else {\n paragraph = this.getClonedFieldResult(fieldSeparator.line.paragraph, fieldSeparator);\n this.insertParagraph(paragraph, true);\n }\n selection.selectParagraph(selection.getNextParagraphBlock(paragraph), true);\n }\n continue;\n }\n }\n if (node instanceof ElementBox) {\n this.insertInlineInternal(node.clone());\n }\n else if (node instanceof BlockWidget) {\n this.insertBlock(node.clone());\n }\n // else if (node instanceof WSection)\n // editor.insertSection((node as WSection)._Clone());\n }\n };\n Editor.prototype.getClonedFieldResultWithSel = function (paragraph, selection, fieldSeparator) {\n var lineIndex = paragraph.childWidgets.indexOf(fieldSeparator.line);\n var elementIndex = paragraph.childWidgets[lineIndex].children.indexOf(fieldSeparator);\n for (var j = lineIndex; j < paragraph.childWidgets.length; j++) {\n var lineWidget = paragraph.childWidgets[j];\n if (j !== lineIndex) {\n elementIndex = 0;\n }\n for (var i = elementIndex; i < lineWidget.children.length; i++) {\n this.insertInlineInternal(lineWidget.children[i].clone());\n }\n }\n };\n Editor.prototype.getClonedFieldResult = function (curParagraph, fieldSeparator) {\n var paragraph = new ParagraphWidget();\n paragraph.characterFormat.copyFormat(curParagraph.characterFormat);\n paragraph.paragraphFormat.copyFormat(curParagraph.paragraphFormat);\n var lineIndex = curParagraph.childWidgets.indexOf(fieldSeparator.line);\n var elementIndex = curParagraph.childWidgets[lineIndex].children.indexOf(fieldSeparator);\n for (var j = lineIndex; j < curParagraph.childWidgets.length; j++) {\n var lineWidget = curParagraph.childWidgets[j];\n if (j !== lineIndex) {\n elementIndex = 0;\n }\n for (var i = elementIndex; i < lineWidget.children.length; i++) {\n paragraph.childWidgets[0].children.push(lineWidget.children[i]);\n }\n }\n return paragraph;\n };\n /**\n * Removes the hyperlink if selection is within hyperlink.\n */\n Editor.prototype.removeHyperlink = function () {\n if (this.owner.isReadOnlyMode) {\n return;\n }\n var selection = this.selection;\n var fieldBegin = selection.getHyperlinkField();\n if (isNullOrUndefined(fieldBegin)) {\n return;\n }\n var fieldEnd = fieldBegin.fieldEnd;\n var fieldSeparator = fieldBegin.fieldSeparator;\n var fieldStartPosition = new TextPosition(selection.owner);\n // tslint:disable-next-line:max-line-length\n fieldStartPosition.setPositionParagraph(fieldBegin.line, (fieldBegin.line).getOffset(fieldBegin, 0));\n var fieldSeparatorPosition = new TextPosition(selection.owner);\n // tslint:disable-next-line:max-line-length\n fieldSeparatorPosition.setPositionParagraph(fieldSeparator.line, (fieldSeparator.line).getOffset(fieldSeparator, fieldSeparator.length));\n this.initComplexHistory('RemoveHyperlink');\n selection.start.setPositionParagraph(fieldEnd.line, (fieldEnd.line).getOffset(fieldEnd, 0));\n selection.end.setPositionInternal(selection.start);\n this.onDelete();\n selection.start.setPositionInternal(fieldSeparatorPosition);\n this.initHistory('Underline');\n this.updateCharacterFormatWithUpdate(selection, 'underline', 'None', false);\n if (this.editorHistory) {\n this.editorHistory.updateHistory();\n }\n // Applies font color for field result.\n this.initHistory('FontColor');\n this.updateCharacterFormatWithUpdate(selection, 'fontColor', undefined, false);\n if (this.editorHistory) {\n this.editorHistory.updateHistory();\n }\n this.reLayout(selection, false);\n selection.end.setPositionInternal(selection.start);\n selection.start.setPositionInternal(fieldStartPosition);\n this.initHistory('Delete');\n this.deleteSelectedContents(selection, false);\n this.reLayout(selection, true);\n if (this.editorHistory && !isNullOrUndefined(this.editorHistory.currentHistoryInfo)) {\n this.editorHistory.updateComplexHistory();\n }\n };\n //Paste Implementation starts\n /**\n * Paste copied clipboard content on Paste event\n * @param {ClipboardEvent} event\n * @param {any} pasteWindow?\n * @private\n */\n /* tslint:disable:no-any */\n Editor.prototype.pasteInternal = function (event, pasteWindow) {\n if (this.viewer.owner.enableLocalPaste) {\n this.pasteLocal();\n }\n else {\n if (isNullOrUndefined(pasteWindow)) {\n pasteWindow = window;\n }\n /* tslint:enable:no-any */\n var textContent = '';\n var clipbordData = pasteWindow.clipboardData ? pasteWindow.clipboardData : event.clipboardData;\n textContent = clipbordData.getData('Text');\n if (textContent !== '') {\n this.pasteContents(textContent);\n this.viewer.editableDiv.innerHTML = '';\n }\n }\n this.viewer.updateFocus();\n };\n /**\n * Pastes the data present in local clipboard if any.\n */\n Editor.prototype.pasteLocal = function () {\n /* tslint:disable:no-any */\n if (this.copiedData && this.owner.enableLocalPaste) {\n var document_1 = JSON.parse(this.copiedData);\n this.pasteContents(document_1);\n }\n };\n Editor.prototype.getBlocks = function (pasteContent) {\n var widgets = [];\n if (typeof (pasteContent) === 'string') {\n var startParagraph = this.selection.start.paragraph;\n if (!this.selection.isForward) {\n startParagraph = this.selection.end.paragraph;\n }\n var arr = [];\n var txt = pasteContent;\n txt = txt.replace(/\\r\\n/g, '\\r');\n arr = txt.split('\\r');\n for (var i = 0; i < arr.length; i++) {\n var insertFormat = this.copyInsertFormat(startParagraph.characterFormat, false);\n var insertParaFormat = this.viewer.selection.copySelectionParagraphFormat();\n var paragraph = new ParagraphWidget();\n paragraph.paragraphFormat.copyFormat(insertParaFormat);\n var line = new LineWidget(paragraph);\n if (arr[i].length > 0) {\n var textElement = new TextElementBox();\n textElement.characterFormat.copyFormat(insertFormat);\n textElement.text = arr[i];\n line.children.push(textElement);\n textElement.line = line;\n }\n paragraph.childWidgets.push(line);\n widgets.push(paragraph);\n }\n }\n else {\n for (var i = 0; i < pasteContent.sections.length; i++) {\n this.viewer.owner.parser.parseBody(pasteContent.sections[i].blocks, widgets);\n }\n }\n return widgets;\n };\n Editor.prototype.pasteContents = function (content) {\n this.pasteContentsInternal(this.getBlocks(content));\n };\n Editor.prototype.pasteContentsInternal = function (widgets) {\n /* tslint:enable:no-any */\n var selection = this.viewer.selection;\n var isRemoved = true;\n this.initComplexHistory('Paste');\n if (this.viewer.isListTextSelected) {\n var paragraph = selection.start.paragraph;\n if (paragraph.paragraphFormat.listFormat && paragraph.paragraphFormat.listFormat.listId !== -1) {\n this.onApplyList(undefined);\n }\n }\n this.initHistory('Paste');\n if (!selection.isEmpty || this.viewer.isListTextSelected) {\n isRemoved = this.removeSelectedContentInternal(selection, selection.start, selection.end);\n }\n if (isRemoved) {\n this.pasteContent(widgets);\n }\n else if (this.editorHistory) {\n this.editorHistory.currentBaseHistoryInfo = undefined;\n }\n if (this.editorHistory && this.editorHistory.currentHistoryInfo) {\n this.editorHistory.updateHistory();\n this.editorHistory.updateComplexHistory();\n }\n else {\n this.reLayout(selection, selection.isEmpty);\n }\n };\n /* tslint:disable:no-any */\n Editor.prototype.pasteContent = function (widgets) {\n /* tslint:enable:no-any */\n this.viewer.owner.isShiftingEnabled = true;\n this.updateInsertPosition();\n this.viewer.owner.isLayoutEnabled = true;\n this.viewer.owner.isPastingContent = true;\n this.pasteCopiedData(widgets);\n this.updateEndPosition();\n this.viewer.owner.isPastingContent = false;\n this.viewer.selection.fireSelectionChanged(true);\n };\n Editor.prototype.pasteCopiedData = function (widgets) {\n for (var j = 0; j < widgets.length; j++) {\n var widget = widgets[j];\n if (widget instanceof ParagraphWidget && widget.childWidgets.length === 0) {\n widget.childWidgets[0] = new LineWidget(widget);\n }\n if (j === widgets.length - 1 && widget instanceof ParagraphWidget) {\n var newParagraph = widget;\n if (newParagraph.childWidgets.length > 0\n && newParagraph.childWidgets[0].children.length > 0) {\n this.insertElement(newParagraph.childWidgets[0].children);\n }\n }\n else if (widget instanceof BlockWidget) {\n var startParagraph = this.selection.start.paragraph;\n if (widget instanceof TableWidget && startParagraph.isInsideTable) {\n var table = widget;\n //Handled to resize table based on parent cell width.\n var clientWidth = startParagraph.getContainerWidth();\n table.fitCellsToClientArea(clientWidth);\n }\n if (widget instanceof TableWidget && startParagraph.isEmpty()\n && startParagraph.previousWidget instanceof TableWidget) {\n this.insertTableRows(widget, startParagraph.previousWidget);\n }\n else {\n this.insertBlockInternal(widget);\n }\n }\n }\n };\n /**\n * Insert Table on undo\n * @param {WTable} table\n * @param {WTable} newTable\n * @param {boolean} moveRows\n * @private\n */\n Editor.prototype.insertTableInternal = function (table, newTable, moveRows) {\n //Gets the index of current table.\n var insertIndex = table.getIndex();\n if (moveRows) {\n //Moves the rows to table.\n for (var i = 0, index = 0; i < table.childWidgets.length; i++, index++) {\n var row = table.childWidgets[i];\n newTable.childWidgets.splice(index, 0, row);\n row.containerWidget = newTable;\n table.childWidgets.splice(i, 1);\n i--;\n }\n }\n var owner = table.containerWidget;\n this.removeBlock(table);\n //Inserts table in the current table position. \n var blockAdvCollection = owner.childWidgets;\n blockAdvCollection.splice(insertIndex, 0, newTable);\n newTable.index = table.index;\n table.containerWidget = undefined;\n newTable.containerWidget = owner;\n newTable.isGridUpdated = false;\n newTable.buildTableColumns();\n newTable.isGridUpdated = true;\n this.viewer.layout.clearTableWidget(newTable, true, true);\n this.updateNextBlocksIndex(newTable, true);\n this.viewer.layout.linkFieldInTable(newTable);\n this.viewer.layout.layoutBodyWidgetCollection(newTable.index, owner, newTable, false);\n };\n /**\n * Insert Table on undo\n * @param {Selection} selection\n * @param {WBlock} block\n * @param {WTable} table\n * @private\n */\n Editor.prototype.insertBlockTable = function (selection, block, table) {\n var offset = selection.start.offset;\n var lineIndex = selection.start.paragraph.childWidgets.indexOf(selection.start.currentWidget);\n if (block instanceof ParagraphWidget && offset > 0) {\n //Moves the inline items before selection start to the inserted paragraph.\n // tslint:disable-next-line:max-line-length\n this.moveInlines(selection.start.paragraph, block, 0, 0, selection.start.paragraph.firstChild, offset, selection.start.currentWidget);\n selection.selectParagraph(selection.start.paragraph, true);\n if (this.checkInsertPosition(selection)) {\n this.updateHistoryPosition(this.getHierarchicalIndex(block, offset.toString()), true);\n }\n }\n if (offset > 0 && this.checkInsertPosition(selection)) {\n this.updateHistoryPosition(selection.start, true);\n }\n var index = table.indexInOwner;\n table.containerWidget.childWidgets.splice(index, 0, block);\n block.containerWidget = table.containerWidget;\n block.index = table.index;\n this.updateNextBlocksIndex(block, true);\n this.viewer.layout.layoutBodyWidgetCollection(block.index, block.containerWidget, block, false);\n if (this.checkInsertPosition(selection)) {\n var paragraph = undefined;\n if (block instanceof ParagraphWidget) {\n paragraph = block;\n }\n if (block instanceof TableWidget) {\n paragraph = selection.getFirstParagraphInFirstCell(block);\n }\n this.updateHistoryPosition(this.getHierarchicalIndex(paragraph, '0'), true);\n }\n };\n /**\n * On cut handle selected content remove and relayout\n * @param {Selection} selection\n * @param {TextPosition} startPosition\n * @param {TextPosition} endPosition\n * @private\n */\n Editor.prototype.handleCut = function (selection) {\n var startPosition = selection.start;\n var endPosition = selection.end;\n if (!selection.isForward) {\n startPosition = selection.end;\n endPosition = selection.start;\n }\n // this.owner.isShiftingEnabled = true;\n var blockInfo = this.getParagraphInfo(startPosition);\n selection.editPosition = this.getHierarchicalIndex(blockInfo.paragraph, blockInfo.offset.toString());\n var image = undefined;\n if (startPosition.paragraph === endPosition.paragraph && startPosition.offset + 1 === endPosition.offset) {\n //Gets selected image and copy image to clipboard.\n var index = 0;\n var currentInline = startPosition.paragraph.getInline(endPosition.offset, index);\n var inline = currentInline.element;\n image = inline;\n }\n this.initHistory('Cut');\n selection.owner.isShiftingEnabled = true;\n if (this.editorHistory && this.editorHistory.currentBaseHistoryInfo) {\n if (this.checkInsertPosition(selection)) {\n this.updateHistoryPosition(selection.editPosition, true);\n }\n }\n this.deleteSelectedContent(endPosition.paragraph, selection, startPosition, endPosition, 3);\n var textPosition = new TextPosition(selection.owner);\n this.setPositionForCurrentIndex(textPosition, selection.editPosition);\n selection.selectContent(textPosition, true);\n if (this.editorHistory && this.editorHistory.currentBaseHistoryInfo) {\n if (this.checkEndPosition(selection)) {\n this.updateHistoryPosition(selection.end, false);\n }\n }\n this.reLayout(selection);\n };\n Editor.prototype.insertInlineInternal = function (element) {\n var selection = this.selection;\n var length = element.length;\n var paragraphInfo = this.getParagraphInfo(selection.start);\n if (selection.start.paragraph.isEmpty()) {\n var paragraph = selection.start.paragraph;\n paragraph.childWidgets[0].children.push(element);\n element.line = paragraph.childWidgets[0];\n element.linkFieldCharacter(this.viewer);\n this.viewer.layout.reLayoutParagraph(paragraph, 0, 0);\n }\n else {\n var indexInInline = 0;\n var inlineObj = selection.start.currentWidget.getInline(selection.start.offset, indexInInline);\n var curInline = inlineObj.element;\n indexInInline = inlineObj.index;\n this.insertElementInternal(curInline, element, indexInInline, true);\n }\n this.setPositionParagraph(paragraphInfo.paragraph, paragraphInfo.offset + length, true);\n };\n Editor.prototype.insertElement = function (element) {\n var selection = this.selection;\n var length = 0;\n var paragraph = undefined;\n var lineIndex = -1;\n var lineWidget = undefined;\n var insertIndex = 0;\n var paragraphInfo = this.getParagraphInfo(selection.start);\n if (selection.start.paragraph.isEmpty()) {\n paragraph = selection.start.paragraph;\n lineWidget = paragraph.childWidgets[0];\n lineIndex = 0;\n }\n else {\n var indexInInline = 0;\n var inlineObj = selection.start.currentWidget.getInline(selection.start.offset, indexInInline);\n var curInline = inlineObj.element;\n indexInInline = inlineObj.index;\n paragraph = curInline.line.paragraph;\n lineIndex = paragraph.childWidgets.indexOf(curInline.line);\n insertIndex = curInline.indexInOwner;\n lineWidget = curInline.line;\n if (indexInInline === curInline.length) {\n insertIndex++;\n }\n else if (indexInInline === 0) {\n if (isNullOrUndefined(curInline.previousNode)) {\n insertIndex = 0;\n }\n }\n else {\n insertIndex++;\n var prevElement = new TextElementBox();\n prevElement.characterFormat.copyFormat(curInline.characterFormat);\n prevElement.text = curInline.text.substring(indexInInline);\n curInline.text = curInline.text.substr(0, indexInInline);\n lineWidget.children.splice(insertIndex, 0, prevElement);\n prevElement.line = curInline.line;\n }\n }\n for (var i = 0; i < element.length; i++) {\n length += element[i].length;\n lineWidget.children.splice(insertIndex, 0, element[i]);\n element[i].line = lineWidget;\n element[i].linkFieldCharacter(this.viewer);\n insertIndex++;\n }\n this.viewer.layout.reLayoutParagraph(paragraph, lineIndex, 0);\n this.setPositionParagraph(paragraphInfo.paragraph, paragraphInfo.offset + length, true);\n };\n Editor.prototype.insertElementInternal = function (element, newElement, index, relayout) {\n var line = element.line;\n var paragraph = line.paragraph;\n var lineIndex = line.indexInOwner;\n var insertIndex = element.indexInOwner;\n if (index === element.length) {\n insertIndex++;\n line.children.splice(insertIndex, 0, newElement);\n }\n else if (index === 0) {\n if (isNullOrUndefined(element.previousNode)) {\n element.line.children.splice(0, 0, newElement);\n insertIndex = 0;\n }\n else {\n element.line.children.splice(insertIndex, 0, newElement);\n }\n }\n else {\n insertIndex++;\n var textElement = new TextElementBox();\n textElement.characterFormat.copyFormat(element.characterFormat);\n textElement.text = element.text.substring(index);\n element.text = element.text.substr(0, index);\n line.children.splice(insertIndex, 0, textElement);\n textElement.line = element.line;\n //Inserts the new inline.\n line.children.splice(insertIndex, 0, newElement);\n insertIndex -= 1;\n }\n newElement.line = element.line;\n newElement.linkFieldCharacter(this.viewer);\n if (relayout) {\n this.viewer.layout.reLayoutParagraph(paragraph, lineIndex, insertIndex);\n }\n };\n /**\n * Insert Block on undo\n * @param {Selection} selection\n * @param {WBlock} block\n * @private\n */\n Editor.prototype.insertBlock = function (block) {\n var isRemoved = true;\n var selection = this.selection;\n if (!selection.isEmpty) {\n isRemoved = this.removeSelectedContents(selection);\n }\n if (!isRemoved) {\n selection.selectContent(selection.start, false);\n }\n this.insertBlockInternal(block);\n if (this.checkInsertPosition(selection)) {\n var paragraph = undefined;\n if (block instanceof ParagraphWidget) {\n paragraph = block;\n }\n else {\n paragraph = this.selection.getFirstParagraphInFirstCell(block);\n }\n // tslint:disable-next-line:max-line-length\n this.updateHistoryPosition(this.getHierarchicalIndex(paragraph, '0'), true);\n }\n this.fireContentChange();\n };\n /**\n * Insert new Block on specific index\n * @param {Selection} selection\n * @param {BlockWidget} block\n * @private\n */\n Editor.prototype.insertBlockInternal = function (block) {\n var selection = this.selection;\n var isRemoved = true;\n var startPara = this.selection.start.paragraph;\n if (!selection.start.isAtParagraphStart) {\n if (block instanceof ParagraphWidget) {\n this.insertNewParagraphWidget(block, false);\n return;\n }\n this.updateInsertPosition();\n startPara = startPara.combineWidget(this.viewer);\n // tslint:disable-next-line:max-line-length\n this.splitParagraph(startPara, startPara.firstChild, 0, selection.start.currentWidget, selection.start.offset, false);\n selection.selectParagraph(this.selection.start.paragraph, true);\n }\n var bodyWidget = selection.start.paragraph.containerWidget;\n var blockIndex = selection.start.paragraph.index;\n var insertIndex = bodyWidget.childWidgets.indexOf(selection.start.paragraph);\n if (!isNullOrUndefined(bodyWidget)) {\n bodyWidget.childWidgets.splice(insertIndex, 0, block);\n block.containerWidget = bodyWidget;\n block.index = blockIndex;\n block.height = 0;\n if (block instanceof TableWidget) {\n block.isGridUpdated = false;\n block.buildTableColumns();\n block.isGridUpdated = true;\n }\n this.updateNextBlocksIndex(block, true);\n this.viewer.layout.layoutBodyWidgetCollection(blockIndex, bodyWidget, block, false);\n }\n };\n /**\n * Inserts the image with specified size at cursor position in the document editor.\n * @param {string} imageString Base64 string, web URL or file URL.\n * @param {number} width? Image width\n * @param {number} height? Image height\n */\n Editor.prototype.insertImage = function (imageString, width, height) {\n if (this.owner.isReadOnlyMode) {\n return;\n }\n if (isNullOrUndefined(width)) {\n width = 100;\n }\n if (isNullOrUndefined(height)) {\n height = 100;\n }\n this.insertPicture(imageString, width, height);\n };\n /**\n * Inserts a table of specified size at cursor position\n * in the document editor.\n * @param {number} rows Default value of ‘rows’ parameter is 1.\n * @param {number} columns Default value of ‘columns’ parameter is 1.\n */\n Editor.prototype.insertTable = function (rows, columns) {\n var startPos = this.selection.start;\n if (this.owner.isReadOnlyMode || !startPos.isAtSamePosition(this.selection.end)) {\n return;\n }\n rows = rows || 1;\n columns = columns || 1;\n var table = this.createTable(rows, columns);\n var clientWidth = startPos.paragraph.getContainerWidth();\n table.splitWidthToTableCells(clientWidth);\n var prevBlock = startPos.paragraph.previousWidget;\n if (startPos.currentWidget.isFirstLine() && startPos.offset === 0 && prevBlock instanceof TableWidget) {\n this.insertTableRows(table, prevBlock);\n table.destroy();\n return;\n }\n else {\n this.initHistory('InsertTable');\n this.viewer.owner.isShiftingEnabled = true;\n this.insertBlock(table);\n }\n var startLine = this.selection.getFirstParagraphInFirstCell(table).childWidgets[0];\n startPos.setPosition(startLine, true);\n this.selection.end.setPositionInternal(startPos);\n var lastParagraph = this.selection.getLastParagraphInLastCell(table);\n var endOffset = lastParagraph.getLength() + 1;\n if (this.editorHistory && this.editorHistory.currentBaseHistoryInfo) {\n // tslint:disable-next-line:max-line-length\n this.editorHistory.currentBaseHistoryInfo.endPosition = this.getHierarchicalIndex(lastParagraph, endOffset.toString());\n }\n this.reLayout(this.selection);\n };\n /**\n * Inserts the specified number of rows to the table above or below to the row at cursor position.\n * @param {boolean} above The above parameter is optional and if omitted,\n * it takes the value as false and inserts below the row at cursor position.\n * @param {number} count The count parameter is optional and if omitted, it takes the value as 1.\n */\n Editor.prototype.insertRow = function (above, count) {\n var rowPlacement = above ? 'Above' : 'Below';\n if (this.owner.isReadOnlyMode) {\n return;\n }\n var startPos = this.selection.isForward ? this.selection.start : this.selection.end;\n var endPos = this.selection.isForward ? this.selection.end : this.selection.start;\n if (startPos.paragraph.isInsideTable) {\n if (this.checkIsNotRedoing()) {\n this.initHistory(rowPlacement === 'Above' ? 'InsertRowAbove' : 'InsertRowBelow');\n }\n this.viewer.owner.isShiftingEnabled = true;\n var startCell = this.getOwnerCell(this.selection.isForward);\n var endCell = this.getOwnerCell(!this.selection.isForward);\n var table = startCell.ownerTable.combineWidget(this.viewer);\n var row = rowPlacement === 'Below' ? endCell.ownerRow : startCell.ownerRow;\n if (this.editorHistory) {\n var clonedTable = this.cloneTableToHistoryInfo(table);\n }\n var rowCount = count ? count : this.getRowCountToInsert();\n var rows = [];\n var index = row.rowIndex;\n if (rowPlacement === 'Below') {\n index++;\n var isAffectedByRowSpannedCell = isNullOrUndefined(endCell.previousWidget)\n || endCell.columnIndex === endCell.previousWidget.columnIndex + 1;\n var isRowSpanEnd = endCell.cellIndex !== endCell.columnIndex && isAffectedByRowSpannedCell\n && row.rowIndex + startCell.cellFormat.rowSpan - 1 === endCell.ownerRow.rowIndex;\n if (!isRowSpanEnd) {\n if (endCell.cellFormat.rowSpan > 1) {\n if (!isNullOrUndefined(row.nextWidget) && row.nextWidget instanceof TableRowWidget) {\n endCell.cellFormat.rowSpan += rowCount;\n row = row.nextWidget;\n }\n }\n }\n }\n for (var i = 0; i < rowCount; i++) {\n var cellCountInfo = this.updateRowspan(row, rowPlacement === 'Below' ? endCell : startCell, rowPlacement);\n var newRow = this.createRowAndColumn(cellCountInfo.count, i);\n newRow.rowFormat.copyFormat(row.rowFormat);\n this.updateCellFormatForInsertedRow(newRow, cellCountInfo.cellFormats);\n rows.push(newRow);\n }\n table.insertTableRowsInternal(rows, index);\n var cell = undefined;\n var paragraph = undefined;\n if ((table.childWidgets[index] instanceof TableRowWidget)) {\n cell = table.childWidgets[index].firstChild;\n paragraph = this.selection.getFirstParagraph(cell);\n }\n else {\n var widget = undefined;\n while (!(widget instanceof TableWidget)) {\n widget = table.nextRenderedWidget;\n }\n paragraph = this.selection.getFirstParagraphInFirstCell(widget);\n }\n this.viewer.layout.reLayoutTable(table);\n this.selection.selectParagraph(paragraph, true);\n }\n this.reLayout(this.selection, true);\n };\n Editor.prototype.updateCellFormatForInsertedRow = function (newRow, cellFormats) {\n for (var i = 0; i < newRow.childWidgets.length; i++) {\n newRow.childWidgets[i].cellFormat.copyFormat(cellFormats[i]);\n newRow.childWidgets[i].cellFormat.rowSpan = 1;\n }\n };\n Editor.prototype.updateRowspan = function (row, startCell, rowPlacement) {\n var spannedCells = row.getPreviousRowSpannedCells(true);\n var count = 0;\n var cellFormats = [];\n for (var i = 0; i < row.childWidgets.length; i++) {\n var cell = row.childWidgets[i];\n var isCellIncluded = false;\n // Need to check with all the row spanned cells. if the start cell contains rowspan greater than 1, \n // and when inserting below, need to increment rowspan for all row spanned cells by 1 except\n // if the spanned cells is placed in the same column or cell to be cloned has the same row index of cloned cell row index.\n // and when inserting above, if cloned cell placed in the same row of start cell or\n // if the cloned cell has equal column index, need to skip updating rowspan value of cloned cell.\n // else update row span value for spanned cell except \n // if the spanned cells is placed in the same column or cell to be cloned has the same row index of cloned cell row index.\n var isRowSpanned = (isNullOrUndefined(cell.previousWidget)\n || cell.columnIndex !== cell.previousWidget.columnIndex + 1);\n for (var j = 0; j < spannedCells.length; j++) {\n if (isRowSpanned) {\n var spannedCell = spannedCells[j];\n var clonedRowIndex = spannedCell.ownerRow.rowIndex + spannedCell.cellFormat.rowSpan - 1;\n if (cell.columnIndex < spannedCell.columnIndex && cell.cellIndex !== cell.columnIndex) {\n isCellIncluded = true;\n count++;\n cellFormats.push(cell.cellFormat);\n }\n if (startCell.cellFormat.rowSpan === 1) {\n // Need to check whether cell is affected by a row spanned cell. if cell is placed on the row where it is affected \n // by row spanned cell, then if we are inserting row below, need to add new cell with spanned cell width\n // or if we are inserting above, need to update row span value of the spanned cell.\n // if cell is placed inbetween the spanned cell , \n // then if we are inserting below, need to update row span value of spanned cell or\n // if we are inserting above, need to skip updating row span value except\n // if start cell is placed on the same row of spanned cell or if start cell placed in the same column.\n if (clonedRowIndex > cell.ownerRow.rowIndex) {\n if (rowPlacement === 'Above'\n && spannedCell.ownerRow === startCell.ownerRow) {\n continue;\n }\n else {\n spannedCell.cellFormat.rowSpan += 1;\n spannedCells.splice(j, 1);\n j--;\n }\n }\n else if (cell.cellIndex !== cell.columnIndex && isRowSpanned && clonedRowIndex === cell.ownerRow.rowIndex) {\n if (rowPlacement === 'Above') {\n spannedCell.cellFormat.rowSpan += 1;\n spannedCells.splice(j, 1);\n j--;\n }\n else {\n count++;\n cellFormats.push(spannedCell.cellFormat);\n spannedCells.splice(j, 1);\n j--;\n }\n }\n }\n else {\n if (spannedCell !== startCell) {\n if (rowPlacement === 'Above'\n && (spannedCell.ownerRow === startCell.ownerRow || spannedCell.columnIndex === startCell.columnIndex)) {\n continue;\n }\n else {\n if (spannedCell.columnIndex !== startCell.columnIndex\n && spannedCell.ownerRow.rowIndex !== cell.ownerRow.rowIndex\n && (clonedRowIndex > startCell.ownerRow.rowIndex\n || (rowPlacement === 'Above' && clonedRowIndex === startCell.ownerRow.rowIndex))) {\n spannedCell.cellFormat.rowSpan += 1;\n spannedCells.splice(j, 1);\n j--;\n }\n }\n }\n }\n }\n }\n if (spannedCells.indexOf(cell) === -1 && cell.cellFormat.rowSpan > 1) {\n isCellIncluded = true;\n }\n if (!isCellIncluded) {\n count++;\n cellFormats.push(cell.cellFormat);\n }\n }\n return { count: count, cellFormats: cellFormats };\n };\n Editor.prototype.insertTableRows = function (table, prevBlock) {\n this.initHistory('InsertRowBelow');\n table.containerWidget = prevBlock.containerWidget;\n prevBlock = prevBlock.combineWidget(this.viewer);\n if (this.editorHistory) {\n var clonedTable = this.cloneTableToHistoryInfo(prevBlock);\n }\n var row = prevBlock.childWidgets[prevBlock.childWidgets.length - 1];\n prevBlock.insertTableRowsInternal(table.childWidgets, prevBlock.childWidgets.length);\n var paragraph = this.selection.getFirstParagraph(row.nextWidget.childWidgets[0]);\n this.viewer.layout.reLayoutTable(prevBlock);\n this.selection.selectParagraph(paragraph, true);\n if (this.editorHistory && this.editorHistory.currentBaseHistoryInfo) {\n this.updateHistoryPosition(this.selection.start, true);\n this.updateHistoryPosition(this.selection.end, false);\n }\n this.reLayout(this.selection);\n };\n /**\n * Inserts the specified number of columns to the table left or right to the column at cursor position.\n * @param {number} left The left parameter is optional and if omitted, it takes the value as false and\n * inserts to the right of column at cursor position.\n * @param {number} count The count parameter is optional and if omitted, it takes the value as 1.\n */\n Editor.prototype.insertColumn = function (left, count) {\n if (this.owner.isReadOnlyMode) {\n return;\n }\n var columnPlacement = left ? 'Left' : 'Right';\n if (this.selection.start.paragraph.isInsideTable) {\n if (this.checkIsNotRedoing()) {\n this.initHistory(columnPlacement === 'Left' ? 'InsertColumnLeft' : 'InsertColumnRight');\n }\n this.selection.owner.isShiftingEnabled = true;\n var startCell = this.getOwnerCell(this.selection.isForward);\n var endCell = this.getOwnerCell(!this.selection.isForward);\n var table = startCell.ownerRow.ownerTable.combineWidget(this.viewer);\n if (this.editorHistory) {\n //Clones the entire table to preserve in history.\n var clonedTable = this.cloneTableToHistoryInfo(table);\n }\n this.selection.owner.isLayoutEnabled = false;\n var cellIndex = startCell.columnIndex;\n if (columnPlacement === 'Right') {\n cellIndex = endCell.columnIndex + endCell.cellFormat.columnSpan;\n }\n var startParagraph = undefined;\n var newCell = undefined;\n var columnCount = count ? count : this.getColumnCountToInsert();\n var rowSpannedCells = [];\n var rowSpanCellIndex = cellIndex;\n for (var i = 0; i < columnCount; i++) {\n for (var j = 0; j < table.childWidgets.length; j++) {\n var row = table.childWidgets[j];\n newCell = this.createColumn(this.selection.getLastParagraph(startCell));\n newCell.index = j;\n newCell.rowIndex = row.rowIndex;\n newCell.containerWidget = row;\n newCell.cellFormat.copyFormat(startCell.cellFormat);\n newCell.cellFormat.rowSpan = 1;\n if (isNullOrUndefined(startParagraph)) {\n startParagraph = this.selection.getFirstParagraph(newCell);\n }\n if (cellIndex === 0) {\n row.childWidgets.splice(cellIndex, 0, newCell);\n }\n else {\n var isCellInserted = false;\n for (var j_1 = 0; j_1 < row.childWidgets.length; j_1++) {\n var rowCell = row.childWidgets[j_1];\n // Add the row spanned cells to colection for adding column before / after row spnned cells.\n if (rowCell.cellFormat.rowSpan > 1) {\n rowSpannedCells.push(rowCell);\n }\n if (rowCell.columnIndex + rowCell.cellFormat.columnSpan === cellIndex) {\n row.childWidgets.splice(rowCell.cellIndex + 1, 0, newCell);\n isCellInserted = true;\n }\n else if (cellIndex > rowCell.columnIndex && rowCell.columnIndex + rowCell.cellFormat.columnSpan > cellIndex\n && cellIndex < rowCell.columnIndex + rowCell.cellFormat.columnSpan) {\n row.childWidgets.splice(rowCell.cellIndex, 0, newCell);\n isCellInserted = true;\n }\n if (isCellInserted) {\n break;\n }\n }\n // If the cell is not inserted for row, then check for row spanned cells.\n if (!isCellInserted) {\n if (rowSpannedCells.length > 0) {\n for (var k = 0; k < rowSpannedCells.length; k++) {\n var rowSpannedCell = rowSpannedCells[k];\n if (rowSpannedCell.ownerRow !== row\n && row.rowIndex <= rowSpannedCell.ownerRow.rowIndex + rowSpannedCell.cellFormat.rowSpan - 1) {\n if (rowSpannedCell.columnIndex + rowSpannedCell.cellFormat.columnSpan === cellIndex) {\n if (rowSpannedCell.cellIndex > row.childWidgets.length) {\n row.childWidgets.push(newCell);\n }\n else {\n row.childWidgets.splice(rowSpannedCell.cellIndex, 0, newCell);\n }\n isCellInserted = true;\n }\n else if (cellIndex > rowSpannedCell.columnIndex &&\n rowSpannedCell.columnIndex + rowSpannedCell.cellFormat.columnSpan > cellIndex\n && cellIndex < rowSpannedCell.columnIndex + rowSpannedCell.cellFormat.columnSpan) {\n row.childWidgets.splice(rowSpannedCell.columnIndex, 0, newCell);\n isCellInserted = true;\n }\n }\n if (isCellInserted) {\n break;\n }\n }\n }\n }\n }\n }\n }\n table.updateRowIndex(0);\n var parentTable = this.viewer.layout.getParentTable(table);\n if (parentTable) {\n parentTable.fitChildToClientArea();\n }\n else {\n table.fitChildToClientArea();\n }\n this.selection.owner.isLayoutEnabled = true;\n table.isGridUpdated = false;\n table.buildTableColumns();\n table.isGridUpdated = true;\n this.viewer.layout.reLayoutTable(table);\n this.selection.start.setPosition(startParagraph.firstChild, true);\n this.selection.end.setPosition(this.selection.getLastParagraph(newCell).firstChild, false);\n if (this.checkIsNotRedoing() || isNullOrUndefined(this.editorHistory)) {\n this.reLayout(this.selection);\n }\n }\n };\n /**\n * Creates table with specified rows and columns.\n * @private\n */\n Editor.prototype.createTable = function (rows, columns) {\n var startPara = this.selection.start.paragraph;\n var table = new TableWidget();\n table.tableFormat = new WTableFormat(table);\n table.tableFormat.preferredWidthType = 'Auto';\n table.tableFormat.initializeTableBorders();\n var index = 0;\n while (index < rows) {\n var tableRow = this.createRowAndColumn(columns, index);\n tableRow.rowFormat.heightType = 'Auto';\n tableRow.containerWidget = table;\n table.childWidgets.push(tableRow);\n index++;\n }\n return table;\n };\n Editor.prototype.createRowAndColumn = function (columns, rowIndex) {\n var startPara = this.selection.start.paragraph;\n var tableRow = new TableRowWidget();\n tableRow.rowFormat = new WRowFormat(tableRow);\n tableRow.index = rowIndex;\n for (var i = 0; i < columns; i++) {\n var tableCell = this.createColumn(startPara);\n tableCell.index = i;\n tableCell.rowIndex = rowIndex;\n tableCell.containerWidget = tableRow;\n tableRow.childWidgets.push(tableCell);\n }\n return tableRow;\n };\n Editor.prototype.createColumn = function (paragraph) {\n var tableCell = new TableCellWidget();\n var para = new ParagraphWidget();\n para.paragraphFormat.copyFormat(paragraph.paragraphFormat);\n para.characterFormat.copyFormat(paragraph.characterFormat);\n para.containerWidget = tableCell;\n tableCell.childWidgets.push(para);\n tableCell.cellFormat = new WCellFormat(tableCell);\n return tableCell;\n };\n Editor.prototype.getColumnCountToInsert = function () {\n var count = 1;\n var start = this.selection.start;\n var end = this.selection.end;\n if (!this.selection.isForward) {\n start = this.selection.end;\n end = this.selection.start;\n }\n if (start && end && this.selection.getTable(start, end)) {\n if (start.paragraph.associatedCell === end.paragraph.associatedCell) {\n return count = 1;\n }\n if (start.paragraph.associatedCell.ownerRow === end.paragraph.associatedCell.ownerRow) {\n return count = count + end.paragraph.associatedCell.cellIndex - start.paragraph.associatedCell.cellIndex;\n }\n else {\n count = 0;\n // tslint:disable-next-line:max-line-length\n var selectedCells = start.paragraph.associatedCell.ownerTable.getColumnCellsForSelection(start.paragraph.associatedCell, end.paragraph.associatedCell);\n for (var i = 0; i < selectedCells.length; i++) {\n if (start.paragraph.associatedCell.ownerRow === selectedCells[i].ownerRow) {\n count++;\n }\n }\n }\n }\n return count === 0 ? 1 : count;\n };\n Editor.prototype.getRowCountToInsert = function () {\n var count = 1;\n var start = this.selection.start;\n var end = this.selection.end;\n if (!this.selection.isForward) {\n start = this.selection.end;\n end = this.selection.start;\n }\n if (!isNullOrUndefined(start) && !isNullOrUndefined(end) && !isNullOrUndefined(this.selection.getTable(start, end))) {\n if (start.paragraph.associatedCell === end.paragraph.associatedCell ||\n start.paragraph.associatedCell.ownerRow === end.paragraph.associatedCell.ownerRow) {\n return count = 1;\n }\n else {\n return count = count +\n this.getOwnerRow(!this.selection.isForward).rowIndex - this.getOwnerRow(this.selection.isForward).rowIndex;\n }\n }\n return count === 0 ? 1 : count;\n };\n Editor.prototype.getOwnerCell = function (isStart) {\n var cell = undefined;\n var startCell = isStart ? this.selection.start.paragraph.associatedCell\n : this.selection.end.paragraph.associatedCell;\n var endCell = isStart ? this.selection.end.paragraph.associatedCell\n : this.selection.start.paragraph.associatedCell;\n cell = startCell;\n var owner = cell.ownerTable;\n while (!isNullOrUndefined(owner) && owner.containerWidget instanceof TableCellWidget && owner !== endCell.ownerTable) {\n cell = owner.containerWidget;\n owner = cell.ownerTable;\n }\n return cell;\n };\n Editor.prototype.getOwnerRow = function (isStart) {\n var row;\n var startRow = isStart ? this.selection.start.paragraph.associatedCell.ownerRow\n : this.selection.end.paragraph.associatedCell.ownerRow;\n var endRow = isStart ? this.selection.end.paragraph.associatedCell.ownerRow\n : this.selection.start.paragraph.associatedCell.ownerRow;\n row = startRow;\n var owner = row.ownerTable;\n while (!isNullOrUndefined(owner) && owner.containerWidget instanceof TableCellWidget && owner !== endRow.ownerTable) {\n row = owner.containerWidget.ownerRow;\n owner = row.ownerTable;\n }\n return row;\n };\n Editor.prototype.getOwnerTable = function (isStart) {\n var table = undefined;\n var startTable = this.selection.start.paragraph.associatedCell.ownerTable;\n var endTable = this.selection.end.paragraph.associatedCell.ownerTable;\n table = isStart ? startTable : endTable;\n while (table.containerWidget instanceof TableCellWidget && table !== (isStart ? endTable : startTable)) {\n table = table.containerWidget.ownerTable;\n }\n return table;\n };\n /**\n * Merge Selected cells\n * @private\n */\n Editor.prototype.mergeSelectedCellsInTable = function () {\n if (!this.canMergeCells()) {\n return;\n }\n if (this.checkIsNotRedoing()) {\n this.initHistory('MergeCells');\n }\n this.selection.owner.isShiftingEnabled = true;\n var startPosition = this.selection.start;\n var endPosition = this.selection.end;\n if (!this.selection.isForward) {\n startPosition = this.selection.end;\n endPosition = this.selection.start;\n }\n var startOwnerCell = this.getOwnerCell(this.selection.isForward);\n var endOwnerCell = this.getOwnerCell(!this.selection.isForward);\n var containerCell = this.selection.getContainerCellOf(startOwnerCell, endOwnerCell);\n if (containerCell.ownerTable.contains(endOwnerCell)) {\n if (!this.selection.containsCell(containerCell, endOwnerCell)) {\n //Start and End are in different cells. \n var table = startOwnerCell.ownerTable.combineWidget(this.viewer);\n startOwnerCell = this.selection.getSelectedCell(startOwnerCell, containerCell);\n endOwnerCell = this.selection.getSelectedCell(endOwnerCell, containerCell);\n //Merges the selected cells. \n var mergedCell = this.mergeSelectedCells(table, startOwnerCell, endOwnerCell);\n var lastParagraph = this.selection.getLastParagraph(mergedCell);\n endPosition.setPosition(lastParagraph.lastChild, false);\n }\n }\n if (this.checkIsNotRedoing() || isNullOrUndefined(this.editorHistory)) {\n this.reLayout(this.selection, false);\n }\n };\n Editor.prototype.mergeSelectedCells = function (table, startCell, endCell) {\n //Clones the entire table to preserve in history.\n var clonedTable = this.cloneTableToHistoryInfo(table);\n this.selection.owner.isLayoutEnabled = false;\n //Merges the selected cells.\n var start = this.selection.getCellLeft(startCell.ownerRow, startCell);\n var end = start + startCell.cellFormat.cellWidth;\n var endCellLeft = this.selection.getCellLeft(endCell.ownerRow, endCell);\n var endCellRight = endCellLeft + endCell.cellFormat.cellWidth;\n var cellInfo = this.updateSelectedCellsInTable(start, end, endCellLeft, endCellRight);\n start = cellInfo.start;\n end = cellInfo.end;\n var count = table.childWidgets.indexOf(endCell.ownerRow);\n var rowStartIndex = table.childWidgets.indexOf(startCell.ownerRow);\n var mergedCell = undefined;\n for (var i = rowStartIndex; i <= count; i++) {\n var row = table.childWidgets[i];\n for (var j = 0; j < row.childWidgets.length; j++) {\n var cell = row.childWidgets[j];\n var cellStart = this.selection.getCellLeft(row, cell);\n if (HelperMethods.round(start, 2) <= HelperMethods.round(cellStart, 2)\n && HelperMethods.round(cellStart, 2) < HelperMethods.round(end, 2)) {\n if (isNullOrUndefined(mergedCell)) {\n mergedCell = cell;\n }\n else {\n if (i === rowStartIndex) {\n mergedCell.cellFormat.preferredWidth += cell.cellFormat.preferredWidth;\n mergedCell.cellFormat.columnSpan += cell.cellFormat.columnSpan;\n this.mergeBorders(mergedCell, cell);\n }\n for (var k = 0; k < cell.childWidgets.length; k++) {\n var block = cell.childWidgets[k];\n if (cell.childWidgets.length === 1 && block instanceof ParagraphWidget\n && block.childWidgets.length === 0) {\n break;\n }\n mergedCell.childWidgets.push(block.clone());\n }\n row.childWidgets.splice(j, 1);\n cell.destroy();\n j--;\n }\n }\n }\n if (row.childWidgets.length === 0) {\n var rowIndex = table.childWidgets.indexOf(row);\n row.updateRowBySpannedCells();\n table.childWidgets.splice(rowIndex, 1);\n row.destroy();\n count--;\n i--;\n }\n }\n if (!isNullOrUndefined(mergedCell) && rowStartIndex < count) {\n mergedCell.cellFormat.rowSpan = count - rowStartIndex + 1;\n }\n this.updateBlockIndexAfterMerge(mergedCell);\n table.updateRowIndex(0);\n table.calculateGrid();\n table.isGridUpdated = false;\n table.buildTableColumns();\n table.isGridUpdated = true;\n this.viewer.layout.reLayoutTable(table);\n //Layouts the table after merging cells.\n this.selection.owner.isLayoutEnabled = true;\n return mergedCell;\n };\n Editor.prototype.mergeBorders = function (mergedCell, tableCell) {\n var mergedCellborders = undefined;\n var cellBorders = null;\n if (!isNullOrUndefined(mergedCell.cellFormat.borders)) {\n mergedCellborders = mergedCell.cellFormat.borders;\n }\n if (!isNullOrUndefined(tableCell.cellFormat.borders)) {\n cellBorders = tableCell.cellFormat.borders;\n }\n if (isNullOrUndefined(mergedCellborders) && isNullOrUndefined(cellBorders)) {\n return;\n }\n if (isNullOrUndefined(mergedCellborders)) {\n mergedCellborders = new WBorders(mergedCell.cellFormat);\n mergedCellborders.copyFormat(cellBorders);\n }\n else if (isNullOrUndefined(cellBorders)) {\n return;\n }\n else {\n if (mergedCell.ownerRow.rowIndex === tableCell.ownerRow.rowIndex) {\n mergedCellborders.top = mergedCell.getBorderBasedOnPriority(mergedCellborders.top, cellBorders.bottom);\n mergedCellborders.bottom = mergedCell.getBorderBasedOnPriority(mergedCellborders.bottom, cellBorders.bottom);\n }\n }\n };\n Editor.prototype.updateBlockIndexAfterMerge = function (cell) {\n for (var i = 0; i < cell.childWidgets.length; i++) {\n cell.childWidgets[i].index = i;\n }\n };\n /**\n * Determines whether merge cell operation can be done.\n */\n Editor.prototype.canMergeCells = function () {\n if (this.selection.isEmpty || !this.selection.start.paragraph.isInsideTable || !this.selection.end.paragraph.isInsideTable) {\n return false;\n }\n var startPos = this.selection.start;\n var endPos = this.selection.end;\n if (!this.selection.isForward) {\n startPos = this.selection.end;\n endPos = this.selection.start;\n }\n var startCell = this.getOwnerCell(this.selection.isForward);\n var endCell = this.getOwnerCell(!this.selection.isForward);\n var containerCell = this.selection.getContainerCellOf(startCell, endCell);\n if (containerCell.ownerTable.contains(endCell)) {\n if (!this.selection.containsCell(containerCell, endCell)) {\n startCell = this.selection.getSelectedCell(startCell, containerCell);\n endCell = this.selection.getSelectedCell(endCell, containerCell);\n var rowSpan = 1;\n if (startCell.ownerRow === endCell.ownerRow) {\n var startCellIndex = startCell.ownerRow.childWidgets.indexOf(startCell);\n for (var i = startCellIndex; i <= startCell.ownerRow.childWidgets.indexOf(endCell); i++) {\n var cell = startCell.ownerRow.childWidgets[i];\n var prevCell = cell.previousWidget;\n if (i !== startCellIndex) {\n if (cell.cellFormat.rowSpan !== rowSpan) {\n return false;\n }\n if (!isNullOrUndefined(prevCell)\n && cell.columnIndex !== (prevCell.cellFormat.columnSpan + prevCell.columnIndex)) {\n return false;\n }\n }\n rowSpan = cell.cellFormat.rowSpan;\n }\n return true;\n }\n return this.canMergeSelectedCellsInTable(startCell.ownerTable, startCell, endCell);\n }\n }\n return false;\n };\n Editor.prototype.canMergeSelectedCellsInTable = function (table, startCell, endCell) {\n var count = table.childWidgets.indexOf(endCell.ownerRow);\n var rowStartIndex = table.childWidgets.indexOf(startCell.ownerRow);\n var startLeft = this.selection.getCellLeft(startCell.ownerRow, startCell);\n var endLeft = startLeft + startCell.cellFormat.cellWidth;\n var endCellLeft = this.selection.getCellLeft(endCell.ownerRow, endCell);\n var endCellRight = endCellLeft + endCell.cellFormat.cellWidth;\n var cellInfo = this.updateSelectedCellsInTable(startLeft, endLeft, endCellLeft, endCellRight);\n startLeft = cellInfo.start;\n endLeft = cellInfo.end;\n var selectionLeft = 0;\n var selectionRight = 0;\n var isRowLeftWithinSel = false;\n var isRowRightWithinSel = false;\n var rowSpannedCells = [];\n for (var i = rowStartIndex; i <= count; i++) {\n var row = table.childWidgets[i];\n var rowLeft = 0;\n var rowRight = 0;\n var isStarted = false;\n for (var j = 0; j < row.childWidgets.length; j++) {\n var cell = row.childWidgets[j];\n var cellStart = this.selection.getCellLeft(row, cell);\n if (this.checkCellWithInSelection(startLeft, endLeft, cellStart)) {\n isRowLeftWithinSel = false;\n isRowRightWithinSel = false;\n if (cell.cellFormat.rowSpan > 1) {\n rowSpannedCells.push(cell);\n }\n if (!isStarted) {\n rowLeft = cellStart;\n rowRight = cellStart;\n isStarted = true;\n }\n var prevCell = cell.previousWidget;\n if (rowRight !== 0 && HelperMethods.round(rowRight, 0) !== HelperMethods.round(cellStart, 0)) {\n rowRight = cellStart;\n }\n rowRight += HelperMethods.convertPointToPixel(cell.cellFormat.cellWidth);\n var isPrevCellWithinSel = this.checkPrevOrNextCellIsWithinSel(startLeft, endLeft, cell, true);\n var isNextCellWithinSel = this.checkPrevOrNextCellIsWithinSel(startLeft, endLeft, cell, false);\n // When selected cell not having row spanned cells and column index is not having immediate cell index value,\n // then returned false.\n var isNoRowSpan = rowSpannedCells.length === 0 || rowSpannedCells.length === 1 && rowSpannedCells[0] === cell;\n // checks whether current cell is with in selection.\n var isCellWithInSel = this.checkCurrentCell(rowSpannedCells, cell, isPrevCellWithinSel, isNextCellWithinSel);\n // when last selected row not having equal row span then returned false.\n if (i === count && !isNullOrUndefined(prevCell) && cell.cellFormat.rowSpan > prevCell.cellFormat.rowSpan\n && !isCellWithInSel) {\n return false;\n }\n if (i !== rowStartIndex) {\n for (var m = 0; m < rowSpannedCells.length; m++) {\n {\n var rowSpan = (rowSpannedCells[m].ownerRow.rowIndex + rowSpannedCells[m].cellFormat.rowSpan) - 1;\n if (rowSpan >= row.rowIndex) {\n if (rowSpannedCells[m].columnIndex > cell.columnIndex) {\n isRowRightWithinSel = true;\n }\n else {\n isRowLeftWithinSel = true;\n }\n if (i === count && rowSpannedCells[m] !== cell\n && rowSpan > (cell.ownerRow.rowIndex + cell.cellFormat.rowSpan - 1)) {\n return false;\n }\n if (rowSpan === row.rowIndex && !this.checkPrevOrNextCellIsWithinSel(startLeft, endLeft, cell, false)) {\n rowSpannedCells.splice(rowSpannedCells.indexOf(rowSpannedCells[m]), 1);\n }\n }\n }\n }\n }\n if (isPrevCellWithinSel && !isNullOrUndefined(prevCell)\n && isNoRowSpan\n && (cell.columnIndex !== prevCell.columnIndex + 1 && this.checkCellWidth(cell))) {\n return false;\n }\n }\n }\n if (i === rowStartIndex) {\n selectionLeft = rowLeft;\n selectionRight = rowRight;\n }\n else {\n if (rowRight > 0 && rowLeft > 0) {\n if (!((isRowLeftWithinSel || Math.round(selectionLeft) === Math.round(rowLeft))\n && (isRowRightWithinSel || Math.round(selectionRight) === Math.round(rowRight)))) {\n return false;\n }\n }\n if (i === count) {\n return true;\n }\n }\n }\n return false;\n };\n Editor.prototype.checkCellWidth = function (cell) {\n var prevCell = cell.previousWidget;\n var cellLeft = this.viewer.selection.getCellLeft(cell.ownerRow, cell);\n var prevCellLeft = this.viewer.selection.getCellLeft(cell.ownerRow, prevCell);\n var left = prevCellLeft + HelperMethods.convertPointToPixel(prevCell.cellFormat.cellWidth);\n if (HelperMethods.round(left, 2) !== HelperMethods.round(cellLeft, 2)) {\n return true;\n }\n return false;\n };\n ;\n Editor.prototype.checkCellWithInSelection = function (startLeft, endLeft, cellStart) {\n if (HelperMethods.round(startLeft, 2) <= HelperMethods.round(cellStart, 2)\n && HelperMethods.round(cellStart, 2) < HelperMethods.round(endLeft, 2)) {\n return true;\n }\n return false;\n };\n ;\n Editor.prototype.checkPrevOrNextCellIsWithinSel = function (startLeft, endLeft, cell, isPrev) {\n var prevOrNextCell = isPrev ? cell.previousWidget : cell.nextWidget;\n var cellStart = 0;\n if (isNullOrUndefined(prevOrNextCell)) {\n return false;\n }\n cellStart = this.viewer.selection.getCellLeft(prevOrNextCell.ownerRow, prevOrNextCell);\n return this.checkCellWithInSelection(startLeft, endLeft, cellStart);\n };\n // tslint:disable-next-line:max-line-length\n Editor.prototype.checkCurrentCell = function (rowSpannedCells, cell, isPrevCellWithInSel, isNextCellWithinSel) {\n var cellOwner = cell.ownerRow;\n if (rowSpannedCells.length > 0) {\n for (var i = 0; i < rowSpannedCells.length; i++) {\n var spannedCellOwner = rowSpannedCells[i].ownerRow;\n var rowSpan = (spannedCellOwner.rowIndex + rowSpannedCells[i].cellFormat.rowSpan) - 1;\n if (rowSpannedCells[i] === cell && (rowSpannedCells.length === 1 || this.checkRowSpannedCells(rowSpannedCells, cell))\n && !(isNextCellWithinSel || isPrevCellWithInSel)) {\n return true;\n }\n if (rowSpannedCells[i] !== cell && spannedCellOwner.rowIndex < cellOwner.rowIndex\n && rowSpan === (cellOwner.rowIndex + cell.cellFormat.rowSpan - 1)) {\n return true;\n }\n }\n }\n return false;\n };\n Editor.prototype.checkRowSpannedCells = function (rowSpannedCells, cell) {\n for (var i = 0; i < rowSpannedCells.length; i++) {\n if (rowSpannedCells[i] !== cell && rowSpannedCells[i].columnIndex === cell.columnIndex) {\n return true;\n }\n }\n return false;\n };\n /**\n * @private\n */\n Editor.prototype.insertNewParagraphWidget = function (newParagraph, insertAfter) {\n this.updateInsertPosition();\n this.insertParagraph(newParagraph, insertAfter);\n if (!insertAfter) {\n var nextParagraph = void 0;\n var currentParagraph = newParagraph;\n do {\n nextParagraph = this.selection.getNextParagraphBlock(currentParagraph);\n currentParagraph = nextParagraph;\n } while (nextParagraph && nextParagraph.equals(newParagraph));\n if (!isNullOrUndefined(nextParagraph)) {\n this.selection.selectParagraph(nextParagraph, true);\n }\n else {\n this.selection.selectParagraph(newParagraph, true);\n }\n }\n this.fireContentChange();\n };\n Editor.prototype.insertParagraph = function (newParagraph, insertAfter) {\n var lineWidget = this.selection.start.currentWidget;\n var offset = this.selection.start.offset;\n var currentParagraph = this.selection.start.paragraph;\n currentParagraph = currentParagraph.combineWidget(this.viewer);\n if (insertAfter) {\n // tslint:disable-next-line:max-line-length\n var length_1 = this.selection.getLineLength(currentParagraph.lastChild);\n var insertIndex_1 = newParagraph.firstChild ? newParagraph.firstChild.children.length : 0;\n // tslint:disable-next-line:max-line-length\n this.moveInlines(currentParagraph, newParagraph, insertIndex_1, offset, lineWidget, length_1, currentParagraph.lastChild);\n }\n else if (offset > 0) {\n this.moveInlines(currentParagraph, newParagraph, 0, 0, currentParagraph.firstChild, offset, lineWidget);\n }\n var splittedWidget = currentParagraph.getSplitWidgets();\n currentParagraph = insertAfter ? splittedWidget[splittedWidget.length - 1] : splittedWidget[0];\n var insertIndex = currentParagraph.containerWidget.childWidgets.indexOf(currentParagraph);\n if (insertAfter) {\n insertIndex++;\n }\n var bodyWidget = currentParagraph.containerWidget;\n newParagraph.index = currentParagraph.index;\n newParagraph.containerWidget = bodyWidget;\n bodyWidget.childWidgets.splice(insertIndex, 0, newParagraph);\n this.updateNextBlocksIndex(insertAfter ? currentParagraph : newParagraph, true);\n newParagraph.height = 0;\n this.viewer.layout.layoutBodyWidgetCollection(newParagraph.index, bodyWidget, newParagraph, false);\n };\n // tslint:disable-next-line:max-line-length\n Editor.prototype.moveInlines = function (currentParagraph, newParagraph, insertIndex, startOffset, startLine, endOffset, endLine) {\n if (newParagraph.childWidgets.length === 0) {\n var line = new LineWidget(newParagraph);\n newParagraph.childWidgets.push(line);\n }\n var isMoved = false;\n this.viewer.layout.clearListElementBox(currentParagraph);\n this.viewer.layout.clearListElementBox(newParagraph);\n for (var j = 0; j < currentParagraph.childWidgets.length; j++) {\n var lineWidget = currentParagraph.childWidgets[j];\n if (startLine === lineWidget && endLine === lineWidget) {\n insertIndex = this.moveContent(lineWidget, startOffset, endOffset, insertIndex, newParagraph);\n break;\n }\n if (endLine === lineWidget) {\n insertIndex = this.moveContent(lineWidget, 0, endOffset, insertIndex, newParagraph);\n break;\n }\n else if (startLine === lineWidget) {\n isMoved = true;\n // tslint:disable-next-line:max-line-length\n insertIndex = this.moveContent(lineWidget, startOffset, this.viewer.selection.getLineLength(lineWidget), insertIndex, newParagraph);\n }\n else if (isMoved) {\n insertIndex = this.moveContent(lineWidget, 0, this.viewer.selection.getLineLength(lineWidget), insertIndex, newParagraph);\n }\n }\n this.removeEmptyLine(currentParagraph);\n if (!currentParagraph.isInsideTable) {\n this.viewer.layout.reLayoutParagraph(currentParagraph, 0, 0);\n }\n };\n /**\n * @private\n */\n //tslint:disable-next-line:max-line-length\n Editor.prototype.moveContent = function (lineWidget, startOffset, endOffset, insertIndex, paragraph) {\n var count = 0;\n var lineIndex = lineWidget.paragraph.childWidgets.indexOf(lineWidget);\n for (var i = 0; i < lineWidget.children.length; i++) {\n var inline = lineWidget.children[i];\n if (startOffset >= count + inline.length || inline instanceof ListTextElementBox) {\n if (!(inline instanceof ListTextElementBox)) {\n count += inline.length;\n }\n continue;\n }\n var startIndex = 0;\n if (startOffset > count) {\n startIndex = startOffset - count;\n }\n var endIndex = endOffset - count;\n if (endIndex > inline.length) {\n endIndex = inline.length;\n }\n if (startIndex > 0) {\n count += startIndex;\n }\n if (startIndex === 0 && endIndex === inline.length) {\n paragraph.firstChild.children.splice(insertIndex, 0, inline);\n inline.line = paragraph.firstChild;\n insertIndex++;\n // if (editAction < 4) {\n // this.unLinkFieldCharacter(inline);\n lineWidget.children.splice(i, 1);\n i--;\n // }\n }\n else if (inline instanceof TextElementBox) {\n // if (editAction < 4) {\n var span = new TextElementBox();\n span.characterFormat.copyFormat(inline.characterFormat);\n span.text = inline.text.substr(startIndex, endIndex - startIndex);\n paragraph.firstChild.children.splice(insertIndex, 0, span);\n span.line = paragraph.firstChild;\n insertIndex++;\n inline.text = inline.text.slice(0, startIndex) + inline.text.slice(endIndex);\n }\n if (endOffset <= count + endIndex - startIndex) {\n break;\n }\n count += endIndex - startIndex;\n }\n return insertIndex;\n };\n /**\n * update complex changes when history is not preserved\n * @param {number} action?\n * @param {string} start?\n * @param {string} end?\n * @private\n */\n Editor.prototype.updateComplexWithoutHistory = function (action, start, end) {\n var selection = this.viewer.selection;\n if (action === 0) {\n var startPosition = new TextPosition(selection.owner);\n this.setPositionForCurrentIndex(startPosition, start);\n this.viewer.layout.reLayoutParagraph(startPosition.paragraph, 0, 0);\n this.setPositionForCurrentIndex(selection.start, end);\n this.setPositionForCurrentIndex(selection.end, end);\n }\n if (action === 1) {\n var startPosition = new TextPosition(selection.owner);\n this.setPositionForCurrentIndex(startPosition, start);\n var endPosition = new TextPosition(selection.owner);\n this.setPositionForCurrentIndex(endPosition, end);\n this.viewer.layout.reLayoutParagraph(startPosition.paragraph, 0, 0);\n if (endPosition.paragraph !== startPosition.paragraph) {\n this.viewer.layout.reLayoutParagraph(endPosition.paragraph, 0, 0);\n }\n }\n if (selection.owner.isShiftingEnabled) {\n this.viewer.layout.shiftLayoutedItems();\n if (this.viewer.owner.enableHeaderAndFooter) {\n this.updateHeaderFooterWidget();\n }\n }\n selection.owner.isShiftingEnabled = false;\n selection.start.updatePhysicalPosition(true);\n if (selection.isEmpty) {\n selection.end.setPositionInternal(selection.start);\n }\n else {\n selection.end.updatePhysicalPosition(true);\n }\n selection.upDownSelectionLength = selection.end.location.x;\n selection.fireSelectionChanged(true);\n this.viewer.updateFocus();\n this.viewer.updateScrollBars();\n this.fireContentChange();\n this.isHandledComplex = true;\n };\n /**\n * reLayout\n * @param selection\n * @param isSelectionChanged\n * @private\n */\n Editor.prototype.reLayout = function (selection, isSelectionChanged) {\n if (this.editorHistory && this.editorHistory.isHandledComplexHistory()) {\n if (isNullOrUndefined(this.editorHistory.currentBaseHistoryInfo)\n || (this.editorHistory.currentBaseHistoryInfo\n && !(this.editorHistory.currentBaseHistoryInfo.action === 'ClearCharacterFormat'\n || this.editorHistory.currentBaseHistoryInfo.action === 'ClearParagraphFormat'))) {\n this.startParagraph = undefined;\n this.endParagraph = undefined;\n }\n this.isHandledComplex = false;\n return;\n }\n if (isNullOrUndefined(this.viewer.blockToShift)) {\n this.viewer.removeEmptyPages();\n this.viewer.layout.updateFieldElements();\n this.viewer.updateScrollBars();\n if (!selection.owner.isShiftingEnabled) {\n selection.fireSelectionChanged(true);\n this.startParagraph = undefined;\n this.endParagraph = undefined;\n }\n }\n if (isNullOrUndefined(isSelectionChanged)) {\n isSelectionChanged = selection.isEmpty;\n }\n if (selection.owner.isShiftingEnabled) {\n selection.owner.isShiftingEnabled = false;\n selection.owner.isLayoutEnabled = true;\n this.viewer.layout.shiftLayoutedItems();\n if (this.viewer.owner.enableHeaderAndFooter) {\n this.updateHeaderFooterWidget();\n }\n this.getOffsetValue(selection);\n selection.upDownSelectionLength = selection.end.location.x;\n selection.fireSelectionChanged(true);\n this.viewer.updateFocus();\n this.startParagraph = undefined;\n this.endParagraph = undefined;\n this.viewer.layout.allowLayout = true;\n }\n if (this.editorHistory && this.editorHistory.currentBaseHistoryInfo &&\n ((this.editorHistory.currentBaseHistoryInfo.action !== 'RowResizing'\n && this.editorHistory.currentBaseHistoryInfo.action !== 'CellResizing')\n || (this.editorHistory.isUndoing || this.editorHistory.isRedoing))) {\n if (this.editorHistory.currentBaseHistoryInfo.modifiedProperties.length > 0) {\n this.editorHistory.currentBaseHistoryInfo.updateSelection();\n }\n this.editorHistory.updateHistory();\n }\n this.fireContentChange();\n };\n /**\n * @private\n */\n Editor.prototype.updateHeaderFooterWidget = function () {\n this.updateHeaderFooterWidgetToPage(this.selection.start.paragraph.bodyWidget);\n this.shiftPageContent(this.selection.start.paragraph.bodyWidget);\n };\n /**\n * @private\n */\n Editor.prototype.updateHeaderFooterWidgetToPage = function (node) {\n var currentPage = node.page;\n node = this.viewer.layout.updateHeaderFooterToParent(node);\n var isEvenPage = (node.headerFooterType === 'EvenHeader' || node.headerFooterType === 'EvenFooter');\n for (var i = 0; i < this.viewer.pages.length; i++) {\n var page = this.viewer.pages[i];\n if ((i + 1 === 1) && page.bodyWidgets[0].sectionFormat.differentFirstPage &&\n node.headerFooterType.indexOf('FirstPage') !== -1) {\n return;\n }\n if (page.index === 0 && page.bodyWidgets[0].sectionFormat.differentFirstPage &&\n node.headerFooterType.indexOf('FirstPage') === -1) {\n continue;\n }\n if (currentPage !== page) {\n if (page.bodyWidgets[0].sectionFormat.differentOddAndEvenPages) {\n if (isEvenPage && (i + 1) % 2 === 0) {\n this.updateHeaderFooterWidgetToPageInternal(page, node, node.headerFooterType.indexOf('Header') !== -1);\n }\n else if ((!isEvenPage && (i + 1) % 2 !== 0)) {\n if (page.bodyWidgets[0].sectionFormat.differentFirstPage && (i + 1 !== 1)) {\n this.updateHeaderFooterWidgetToPageInternal(page, node, node.headerFooterType.indexOf('Header') !== -1);\n }\n }\n }\n else {\n this.updateHeaderFooterWidgetToPageInternal(page, node, node.headerFooterType.indexOf('Header') !== -1);\n }\n }\n }\n };\n /**\n * @private\n */\n Editor.prototype.updateHeaderFooterWidgetToPageInternal = function (page, widget, isHeader) {\n if (widget.page !== page) {\n var hfWidget = widget.clone();\n hfWidget.page = page;\n this.viewer.updateHFClientArea(hfWidget.sectionFormat, isHeader);\n hfWidget = this.viewer.layout.layoutHeaderFooterItems(this.viewer, hfWidget);\n var headerOrFooter = void 0;\n if (isHeader) {\n headerOrFooter = page.headerWidget;\n page.headerWidget = hfWidget;\n }\n else {\n headerOrFooter = page.footerWidget;\n page.footerWidget = hfWidget;\n }\n headerOrFooter.destroy();\n }\n };\n /**\n * @private\n */\n Editor.prototype.shiftPageContent = function (headerFooter) {\n var type = headerFooter.headerFooterType;\n var pageIndex;\n if (type === 'FirstPageHeader' || type === 'FirstPageFooter') {\n pageIndex = 0;\n }\n else if (headerFooter.sectionFormat.differentOddAndEvenPages) {\n if (headerFooter.sectionFormat.differentFirstPage) {\n pageIndex = (type === 'EvenHeader' || type === 'EvenFooter') ? 1 : 2;\n }\n else {\n pageIndex = (type.indexOf('Even') === -1) ? 0 : 1;\n }\n }\n else {\n pageIndex = headerFooter.sectionFormat.differentFirstPage ? 1 : 0;\n if (pageIndex === 1 && this.viewer.pages.length === 1) {\n pageIndex = 0;\n }\n }\n var page = this.viewer.pages[pageIndex];\n if (type.indexOf('Header') !== -1) {\n var firstBlock = page.bodyWidgets[0].firstChild;\n var top_1 = HelperMethods.convertPointToPixel(headerFooter.sectionFormat.topMargin);\n var headerDistance = HelperMethods.convertPointToPixel(headerFooter.sectionFormat.headerDistance);\n top_1 = Math.max(headerDistance + page.headerWidget.height, top_1);\n if (firstBlock.y !== top_1) {\n this.viewer.updateClientArea(page.bodyWidgets[0].sectionFormat, page);\n this.viewer.blockToShift = firstBlock;\n }\n }\n else {\n this.checkAndShiftFromBottom(page, headerFooter);\n }\n if (this.viewer.blockToShift) {\n this.viewer.renderedLists.clear();\n this.viewer.layout.shiftLayoutedItems();\n }\n };\n /**\n * @private\n */\n Editor.prototype.checkAndShiftFromBottom = function (page, footerWidget) {\n var bodyWidget = page.bodyWidgets[0];\n var blockToShift;\n for (var i = 0; i < bodyWidget.childWidgets.length; i++) {\n var block = bodyWidget.childWidgets[i];\n if (block.y + block.height > footerWidget.y) {\n blockToShift = block;\n break;\n }\n if (bodyWidget.childWidgets.length - 1 === i && block.y + block.height < footerWidget.y) {\n blockToShift = block;\n break;\n }\n }\n this.viewer.updateClientArea(bodyWidget.sectionFormat, page);\n this.viewer.cutFromTop(blockToShift.y);\n this.viewer.blockToShift = blockToShift;\n };\n //Paste Implementation ends\n //Character Format apply implementation starts\n /**\n * Change HighlightColor\n * @param {HighlightColor} highlightColor\n * Applies character format for selection.\n * @param {string} property\n * @param {Object} value\n * @param {boolean} update\n * @private\n */\n Editor.prototype.onApplyCharacterFormat = function (property, value, update) {\n var selection = this.viewer.selection;\n if (selection.owner.isReadOnlyMode || !selection.owner.isDocumentLoaded) {\n return;\n }\n update = isNullOrUndefined(update) ? false : update;\n var action = (property[0].toUpperCase() + property.slice(1));\n var paragraph = selection.start.paragraph;\n var lastLine = paragraph.childWidgets[paragraph.childWidgets.length - 1];\n if (selection.isEmpty && selection.contextType !== 'List') {\n selection.skipFormatRetrieval = true;\n selection.fireSelectionChanged(true);\n selection.skipFormatRetrieval = false;\n return;\n }\n this.setOffsetValue(selection);\n this.initHistory(action);\n // Todo: Complete Microsoft Word behavior on apply formatting in empty selection\n // if (selection.isEmpty) {\n // this.viewer.owner.isShiftingEnabled = true;\n // this.applyCharFormatValue(paragraph.characterFormat, property, value, update);\n // this.reLayout(this.viewer.selection);\n // this.viewer.updateFocus();\n // return;\n // }\n if (selection.contextType === 'List') {\n // this.updateCharacterFormatForListText(selection, action, value, update);\n this.applyCharacterFormatForListText(selection, property, value, update);\n }\n else {\n //Iterate and update format.\n this.updateSelectionCharacterFormatting(property, value, update);\n }\n };\n /**\n * @private\n */\n // tslint:disable-next-line:max-line-length\n Editor.prototype.applyCharacterFormatForListText = function (selection, property, values, update) {\n var listLevel = this.getListLevel(selection.start.paragraph);\n if (isNullOrUndefined(listLevel)) {\n return;\n }\n var characterFormat = listLevel.characterFormat;\n switch (property) {\n case 'bold':\n this.applyListCharacterFormatByValue(selection, characterFormat, 'bold', !(characterFormat.bold));\n break;\n case 'italic':\n this.applyListCharacterFormatByValue(selection, characterFormat, 'italic', !(characterFormat.italic));\n break;\n case 'fontColor':\n this.applyListCharacterFormatByValue(selection, characterFormat, 'fontColor', values);\n break;\n case 'fontFamily':\n this.applyListCharacterFormatByValue(selection, characterFormat, 'fontFamily', values);\n break;\n case 'fontSize':\n this.applyListCharacterFormatByValue(selection, characterFormat, 'fontSize', values);\n break;\n case 'highlightColor':\n this.applyListCharacterFormatByValue(selection, characterFormat, 'highlightColor', values);\n break;\n case 'baselineAlignment':\n if (characterFormat.baselineAlignment === values) {\n values = 'Normal';\n }\n this.applyListCharacterFormatByValue(selection, characterFormat, 'baselineAlignment', values);\n break;\n case 'strikethrough':\n if (characterFormat.strikethrough === values) {\n values = 'None';\n }\n this.applyListCharacterFormatByValue(selection, characterFormat, 'strikethrough', values);\n break;\n case 'underline':\n if (characterFormat.underline === values) {\n values = 'None';\n }\n this.applyListCharacterFormatByValue(selection, characterFormat, 'underline', values);\n break;\n case 'characterFormat':\n this.applyListCharacterFormatByValue(selection, characterFormat, undefined, values);\n break;\n }\n };\n Editor.prototype.applyListCharacterFormatByValue = function (selection, format, property, value) {\n this.initHistory('ListCharacterFormat');\n this.applyCharFormatValue(format, property, value, false);\n this.editorHistory.updateHistory();\n this.reLayout(selection);\n this.fireContentChange();\n };\n /**\n * @private\n */\n Editor.prototype.updateListCharacterFormat = function (selection, property, value) {\n this.updateListTextSelRange(selection, property, value, false);\n };\n Editor.prototype.updateListTextSelRange = function (selection, property, value, update) {\n this.viewer.owner.isShiftingEnabled = true;\n var startPositionInternal = selection.start;\n var endPositionInternal = selection.end;\n if (!selection.isForward) {\n startPositionInternal = selection.end;\n endPositionInternal = selection.start;\n }\n this.initHistoryPosition(selection, startPositionInternal);\n var listLevel = this.getListLevel(selection.start.paragraph);\n this.applyCharFormatValue(listLevel.characterFormat, property, value, update);\n this.startSelectionReLayouting(startPositionInternal.paragraph, selection, startPositionInternal, endPositionInternal);\n };\n /**\n * @private\n */\n Editor.prototype.getListLevel = function (paragraph) {\n var currentList = undefined;\n var listLevelNumber = 0;\n if (!isNullOrUndefined(paragraph.paragraphFormat) && !isNullOrUndefined(paragraph.paragraphFormat.listFormat)) {\n currentList = this.viewer.getListById(paragraph.paragraphFormat.listFormat.listId);\n listLevelNumber = paragraph.paragraphFormat.listFormat.listLevelNumber;\n }\n if (!isNullOrUndefined(currentList) &&\n !isNullOrUndefined(this.viewer.getAbstractListById(currentList.abstractListId))\n // && !isNullOrUndefined(this.viewer.getAbstractListById(currentList.abstractListId).levels.getItem(listLevelNumber))) {\n && !isNullOrUndefined(this.viewer.getAbstractListById(currentList.abstractListId).levels)) {\n return this.viewer.layout.getListLevel(currentList, listLevelNumber);\n }\n return undefined;\n };\n Editor.prototype.updateInsertPosition = function () {\n var selection = this.viewer.selection;\n var position = selection.start;\n if (!selection.isForward) {\n position = selection.end;\n }\n if (this.editorHistory && !isNullOrUndefined(this.editorHistory.currentBaseHistoryInfo)\n && !isNullOrUndefined(position)) {\n if (isNullOrUndefined(this.editorHistory.currentBaseHistoryInfo.insertPosition)) {\n this.updateHistoryPosition(position, true);\n }\n }\n };\n /**\n * preserve paragraph and offset value for selection\n * @private\n */\n Editor.prototype.setOffsetValue = function (selection) {\n var info = this.getParagraphInfo(selection.start);\n this.startParagraph = info.paragraph;\n this.startOffset = info.offset;\n info = this.getParagraphInfo(selection.end);\n this.endParagraph = info.paragraph;\n this.endOffset = info.offset;\n };\n /**\n * Toggles the highlight color property of selected contents.\n * @param {HighlightColor} highlightColor Default value of ‘underline’ parameter is Yellow.\n */\n Editor.prototype.toggleHighlightColor = function (highlightColor) {\n var selection = this.viewer.selection;\n if (isNullOrUndefined(highlightColor) || highlightColor === 'NoColor') {\n highlightColor = 'Yellow';\n }\n //In Ms Word the highlight color is took from the ribbon. So we Have given yellow as constant.\n if (selection.characterFormat.highlightColor === highlightColor) {\n highlightColor = 'NoColor';\n }\n this.selection.characterFormat.highlightColor = highlightColor;\n };\n /**\n * Toggles the subscript formatting of selected contents.\n */\n Editor.prototype.toggleSubscript = function () {\n if (!this.owner.isReadOnlyMode) {\n var value = this.selection.characterFormat.baselineAlignment === 'Subscript' ? 'Normal' : 'Subscript';\n this.selection.characterFormat.baselineAlignment = value;\n }\n };\n /**\n * Toggles the superscript formatting of selected contents.\n */\n Editor.prototype.toggleSuperscript = function () {\n if (!this.owner.isReadOnlyMode) {\n var value = this.selection.characterFormat.baselineAlignment === 'Superscript' ? 'Normal' : 'Superscript';\n this.selection.characterFormat.baselineAlignment = value;\n }\n };\n /**\n * Toggles the text alignment property of selected contents.\n * @param {TextAlignment} textAlignment Default value of ‘textAlignment parameter is TextAlignment.Left.\n */\n /**\n * Increases the left indent of selected paragraphs to a factor of 36 points.\n */\n Editor.prototype.increaseIndent = function () {\n if (!this.owner.isReadOnlyMode) {\n this.onApplyParagraphFormat('leftIndent', this.viewer.defaultTabWidth, true, false);\n }\n };\n /**\n * Decreases the left indent of selected paragraphs to a factor of 36 points.\n */\n Editor.prototype.decreaseIndent = function () {\n if (!this.owner.isReadOnlyMode) {\n this.onApplyParagraphFormat('leftIndent', -this.viewer.defaultTabWidth, true, false);\n }\n };\n /**\n * Clears the list format for selected paragraphs.\n */\n Editor.prototype.clearList = function () {\n this.selection.owner.editorModule.onApplyList(undefined);\n };\n /**\n * Applies the bullet list to selected paragraphs.\n * @param {string} bullet Bullet character\n * @param {string} fontFamily Bullet font family\n */\n Editor.prototype.applyBullet = function (bullet, fontFamily) {\n if (!this.owner.isReadOnlyMode) {\n this.applyBulletOrNumbering(bullet, 'Bullet', fontFamily);\n }\n };\n /**\n * Applies the numbering list to selected paragraphs.\n * @param numberFormat “%n” representations in ‘numberFormat’ parameter will be replaced by respective list level’s value.\n * `“%1)” will be displayed as “1)” `\n * @param listLevelPattern Default value of ‘listLevelPattern’ parameter is ListLevelPattern.Arabic\n */\n Editor.prototype.applyNumbering = function (numberFormat, listLevelPattern) {\n if (!this.owner.isReadOnlyMode) {\n this.applyBulletOrNumbering(numberFormat, listLevelPattern, 'Verdana');\n }\n };\n /**\n * Toggles the baseline alignment property of selected contents.\n * @param {Selection} selection\n * @param {BaselineAlignment} baseAlignment\n */\n Editor.prototype.toggleBaselineAlignment = function (baseAlignment) {\n this.updateProperty(2, baseAlignment);\n };\n /**\n * Clears the formatting.\n */\n Editor.prototype.clearFormatting = function () {\n var selection = this.viewer.selection;\n this.initComplexHistory('ClearFormat');\n // let startIndex: string = selection.start.getHierarchicalIndexInternal();\n // let endIndex: string = selection.end.getHierarchicalIndexInternal();\n if (selection.isEmpty) {\n selection.start.moveToParagraphStartInternal(selection, false);\n selection.end.moveToParagraphEndInternal(selection, false);\n }\n this.setOffsetValue(selection);\n if (this.editorHistory) {\n this.editorHistory.initializeHistory('ClearCharacterFormat');\n }\n this.updateSelectionCharacterFormatting('ClearCharacterFormat', undefined, false);\n this.getOffsetValue(selection);\n if (this.editorHistory) {\n this.editorHistory.updateHistory();\n }\n this.setOffsetValue(selection);\n if (this.editorHistory) {\n this.editorHistory.initializeHistory('ClearParagraphFormat');\n }\n this.updateParagraphFormatInternal('ClearParagraphFormat', undefined, false);\n if (this.editorHistory) {\n this.editorHistory.updateHistory();\n }\n this.getOffsetValue(selection);\n if (this.editorHistory && !isNullOrUndefined(this.editorHistory.currentHistoryInfo)) {\n this.editorHistory.updateComplexHistory();\n }\n this.startParagraph = undefined;\n this.endParagraph = undefined;\n // else {\n // this.checkAndUpdatedSelection(startIndex, endIndex);\n // }\n };\n /**\n * Toggles the specified property. If property is assigned already. Then property will be changed\n * @param {Selection} selection\n * @param {number} type\n * @param {Object} value\n * @private\n */\n Editor.prototype.updateProperty = function (type, value) {\n var selection = this.selection;\n if (selection.owner.isReadOnlyMode || !selection.owner.isDocumentLoaded) {\n return;\n }\n var startPosition = selection.start;\n var endPosition = selection.end;\n if (!selection.isForward) {\n startPosition = selection.end;\n endPosition = selection.start;\n }\n var indexInInline = 0;\n var inlineObj = startPosition.currentWidget.getInline(startPosition.offset, indexInInline);\n var inline = inlineObj.element;\n indexInInline = inlineObj.index;\n var paragraph = startPosition.paragraph;\n if (!isNullOrUndefined(inline) && inline.length === indexInInline && !this.selection.isEmpty) {\n inline = inline.nextNode;\n }\n if (type === 1) {\n var currentUnderline = 'None';\n if (!isNullOrUndefined(inline)) {\n currentUnderline = inline.characterFormat.underline;\n }\n else if (!isNullOrUndefined(paragraph)) {\n currentUnderline = paragraph.characterFormat.underline;\n }\n this.selection.characterFormat.underline = value === currentUnderline ? 'None' : value;\n }\n else {\n var script = 'Normal';\n if (!isNullOrUndefined(inline)) {\n script = inline.characterFormat.baselineAlignment;\n }\n else if (!isNullOrUndefined(paragraph)) {\n script = paragraph.characterFormat.baselineAlignment;\n }\n if (script === value) {\n value = 'Normal';\n }\n this.selection.characterFormat.baselineAlignment = value;\n }\n };\n /**\n * Update Style for paragraph\n * @private\n */\n Editor.prototype.applyStyle = function (styleName) {\n var style = this.viewer.styles.findByName(styleName);\n if (style !== undefined) {\n this.onApplyParagraphFormat('styleName', style, false, true);\n }\n else {\n // tslint:disable-next-line:max-line-length\n this.viewer.owner.parser.parseStyle(JSON.parse(this.getCompleteStyles()), JSON.parse(this.viewer.preDefinedStyles.get(styleName)), this.viewer.styles);\n this.applyStyle(styleName);\n }\n };\n Editor.prototype.getCompleteStyles = function () {\n var completeStylesString = '{\"styles\":[';\n for (var _i = 0, _a = this.viewer.preDefinedStyles.getItem(); _i < _a.length; _i++) {\n var name_1 = _a[_i];\n completeStylesString += (this.viewer.preDefinedStyles.get(name_1) + ',');\n }\n return completeStylesString.slice(0, -1) + ']}';\n };\n /**\n * Initialize default styles\n * @private\n */\n Editor.prototype.intializeDefaultStyles = function () {\n var existingStyles = this.owner.getStyleNames('Paragraph');\n var defaultStyleNames = ['Normal', 'Heading 1', 'Heading 2', 'Heading 3', 'Heading 4', 'Heading 5', 'Heading 6'];\n var styleNames = defaultStyleNames.filter(function (val) {\n return existingStyles.indexOf(val) === -1;\n });\n for (var _i = 0, styleNames_1 = styleNames; _i < styleNames_1.length; _i++) {\n var name_2 = styleNames_1[_i];\n this.createStyle(this.viewer.preDefinedStyles.get(name_2));\n }\n };\n /**\n * Create a Style.\n * @private\n */\n Editor.prototype.createStyle = function (styleString) {\n /* tslint:disable:no-any */\n var style = JSON.parse(styleString);\n var styleObj = this.viewer.styles.findByName(style.name);\n if (styleObj !== undefined) {\n //Create a new style with new name and add it to collection.\n style.name = this.getUniqueStyleName(style.name);\n }\n this.viewer.owner.parser.parseStyle(JSON.parse(this.getCompleteStyles()), style, this.viewer.styles);\n return this.viewer.styles.findByName(style.name);\n };\n /**\n * @private\n */\n Editor.prototype.getUniqueStyleName = function (name) {\n var uniqueName = this.getUniqueName(name);\n var style = this.viewer.styles.findByName(uniqueName);\n while (!isNullOrUndefined(style)) {\n uniqueName = this.getUniqueStyleName(style.name);\n style = this.viewer.styles.findByName(uniqueName);\n }\n return uniqueName;\n };\n Editor.prototype.getUniqueName = function (name) {\n var matchArray = name.match(/\\d+$/);\n var returnName;\n if (!isNullOrUndefined(matchArray) && matchArray.length > 0) {\n return name.replace(matchArray[0], (parseInt(matchArray[0], 10) + 1).toString());\n }\n else {\n return name + '_1';\n }\n };\n /**\n * Update Character format for selection\n * @private\n */\n Editor.prototype.updateSelectionCharacterFormatting = function (property, values, update) {\n if (isNullOrUndefined(property)) {\n property = 'CharacterFormat';\n }\n switch (property) {\n case 'bold':\n this.updateCharacterFormat('bold', values);\n break;\n case 'italic':\n this.updateCharacterFormat('italic', values);\n break;\n case 'fontColor':\n this.updateCharacterFormat('fontColor', values);\n break;\n case 'fontFamily':\n this.updateCharacterFormat('fontFamily', values);\n break;\n case 'fontSize':\n this.updateCharacterFormatWithUpdate(this.viewer.selection, 'fontSize', values, update);\n break;\n case 'highlightColor':\n this.updateCharacterFormat('highlightColor', values);\n break;\n case 'baselineAlignment':\n this.updateCharacterFormat('baselineAlignment', values);\n break;\n case 'strikethrough':\n this.updateCharacterFormat('strikethrough', values);\n break;\n case 'underline':\n this.updateCharacterFormat('underline', values);\n break;\n case 'styleName':\n this.updateCharacterFormatWithUpdate(this.viewer.selection, 'styleName', values, true);\n break;\n case 'CharacterFormat':\n this.updateCharacterFormat(undefined, values);\n break;\n case 'ClearCharacterFormat':\n this.updateCharacterFormat(undefined, values);\n break;\n }\n this.reLayout(this.viewer.selection);\n };\n /**\n * Update character format for selection range\n * @param {SelectionRange} selectionRange\n * @param {string} property\n * @param {Object} value\n * @returns void\n * @private\n */\n Editor.prototype.updateCharacterFormat = function (property, value) {\n this.updateCharacterFormatWithUpdate(this.viewer.selection, property, value, false);\n };\n Editor.prototype.updateCharacterFormatWithUpdate = function (selection, property, value, update) {\n this.viewer.owner.isShiftingEnabled = true;\n var startPosition = selection.start;\n var endPosition = selection.end;\n if (!selection.isForward) {\n startPosition = selection.end;\n endPosition = selection.start;\n }\n this.applyCharFormatSelectedContent(startPosition.paragraph, selection, startPosition, endPosition, property, value, update);\n };\n // tslint:disable-next-line:max-line-length\n Editor.prototype.applyCharFormatSelectedContent = function (paragraph, selection, start, end, property, value, update) {\n //Selection start in cell.\n if (start.paragraph.isInsideTable && (!end.paragraph.isInsideTable\n || start.paragraph.associatedCell !== end.paragraph.associatedCell\n || selection.isCellSelected(start.paragraph.associatedCell, start, end))) {\n var cell = void 0;\n start.paragraph.associatedCell.ownerTable.combineWidget(this.viewer);\n if (this.checkInsertPosition(selection)) {\n this.updateHistoryPosition(start, true);\n }\n cell = start.paragraph.associatedCell;\n this.applyCharFormatCell(cell, selection, start, end, property, value, update);\n var table = cell.ownerTable;\n // tslint:disable-next-line:max-line-length\n this.viewer.layout.layoutBodyWidgetCollection(table.index, table.containerWidget, table, false);\n }\n else {\n this.applyCharFormat(paragraph, selection, start, end, property, value, update);\n }\n };\n // tslint:disable-next-line:max-line-length\n Editor.prototype.applyCharFormatForSelectedPara = function (paragraph, selection, property, value, update) {\n for (var i = 0; i < paragraph.childWidgets.length; i++) {\n var line = paragraph.childWidgets[i];\n for (var j = 0; j < line.children.length; j++) {\n var element = line.children[j];\n this.applyCharFormatValue(element.characterFormat, property, value, update);\n }\n }\n this.applyCharFormatValue(paragraph.characterFormat, property, value, update);\n };\n Editor.prototype.splittedLastParagraph = function (paragraph) {\n var splittedWidets = paragraph.getSplitWidgets();\n return splittedWidets[splittedWidets.length - 1];\n };\n // tslint:disable-next-line:max-line-length\n Editor.prototype.getNextParagraphForCharacterFormatting = function (block, start, end, property, value, update) {\n var widgetCollection = block.getSplitWidgets();\n block = widgetCollection[widgetCollection.length - 1];\n block = this.viewer.selection.getNextRenderedBlock(block);\n if (!isNullOrUndefined(block)) {\n if (block instanceof ParagraphWidget) {\n this.applyCharFormat(block, this.viewer.selection, start, end, property, value, update);\n }\n else {\n this.applyCharFormatForTable(0, block, this.viewer.selection, start, end, property, value, update);\n }\n }\n };\n // tslint:disable-next-line:max-line-length\n Editor.prototype.applyCharFormat = function (paragraph, selection, start, end, property, value, update) {\n paragraph = paragraph.combineWidget(this.viewer);\n var startOffset = 0;\n var length = selection.getParagraphLength(paragraph);\n var startLineWidget = paragraph.childWidgets.indexOf(start.currentWidget) !== -1 ?\n paragraph.childWidgets.indexOf(start.currentWidget) : 0;\n var endOffset = end.offset;\n var endLineWidget = paragraph.childWidgets.indexOf(end.currentWidget) !== -1 ?\n paragraph.childWidgets.indexOf(end.currentWidget) : paragraph.childWidgets.length - 1;\n if (!isNullOrUndefined(selection)) {\n if (paragraph === start.paragraph) {\n startOffset = start.offset;\n }\n }\n if (!paragraph.equals(end.paragraph)) {\n this.applyCharFormatValue(paragraph.characterFormat, property, value, update);\n endOffset = length;\n }\n else {\n var lastLine = paragraph.childWidgets[paragraph.childWidgets.length - 1];\n if (selection.isParagraphLastLine(lastLine) && end.currentWidget === lastLine\n && endOffset === selection.getLineLength(lastLine) + 1) {\n this.applyCharFormatValue(paragraph.characterFormat, property, value, update);\n }\n }\n // let count: number = 0;\n for (var i = startLineWidget; i <= endLineWidget; i++) {\n var line = paragraph.childWidgets[i];\n if (i !== startLineWidget) {\n startOffset = selection.getStartLineOffset(line);\n }\n if (line === end.currentWidget) {\n endOffset = end.offset;\n }\n else {\n endOffset = selection.getLineLength(line);\n }\n var count = 0;\n for (var j = 0; j < line.children.length; j++) {\n var inlineObj = line.children[j];\n if (inlineObj instanceof ListTextElementBox) {\n continue;\n }\n if (startOffset >= count + inlineObj.length) {\n count += inlineObj.length;\n continue;\n }\n var startIndex = 0;\n if (startOffset > count) {\n startIndex = startOffset - count;\n }\n var endIndex = endOffset - count;\n var inlineLength = inlineObj.length;\n if (endIndex > inlineLength) {\n endIndex = inlineLength;\n }\n j += this.applyCharFormatInline(inlineObj, selection, startIndex, endIndex, property, value, update);\n if (endOffset <= count + inlineLength) {\n break;\n }\n count += inlineLength;\n }\n }\n var endParagraph = end.paragraph;\n this.viewer.layout.reLayoutParagraph(paragraph, startLineWidget, 0);\n if (paragraph.equals(endParagraph)) {\n return;\n }\n this.getNextParagraphForCharacterFormatting(paragraph, start, end, property, value, update);\n };\n /**\n * Toggles the bold property of selected contents.\n */\n Editor.prototype.toggleBold = function () {\n if (this.viewer.owner.isReadOnlyMode) {\n return;\n }\n var value = this.getCurrentSelectionValue('bold');\n this.selection.characterFormat.bold = value;\n };\n /**\n * Toggles the bold property of selected contents.\n */\n Editor.prototype.toggleItalic = function () {\n if (this.viewer.owner.isReadOnlyMode) {\n return;\n }\n var value = this.getCurrentSelectionValue('italic');\n this.selection.characterFormat.italic = value;\n };\n Editor.prototype.getCurrentSelectionValue = function (property) {\n var value = false;\n if ((property === 'bold' || property === 'italic')) {\n var index = 0;\n var start = this.selection.start;\n if (!this.selection.isForward) {\n start = this.selection.end;\n }\n var lineWidget = start.currentWidget;\n var inlineObj = lineWidget.getInline(start.offset, index);\n var inline = inlineObj.element;\n // inline.ownerBase\n index = inlineObj.index;\n var characterFormat = lineWidget.paragraph.characterFormat;\n if (!isNullOrUndefined(inline)) {\n if (!this.selection.isEmpty && index === inline.length) {\n characterFormat = isNullOrUndefined(inline.nextNode) ? lineWidget.paragraph.characterFormat\n : inline.nextNode.characterFormat;\n }\n else {\n characterFormat = inline.characterFormat;\n }\n }\n if (property === 'bold') {\n value = !(characterFormat.bold);\n }\n if (property === 'italic') {\n value = !(characterFormat.italic);\n }\n }\n return value;\n };\n /**\n * Toggles the underline property of selected contents.\n * @param underline Default value of ‘underline’ parameter is Single.\n */\n Editor.prototype.toggleUnderline = function (underline) {\n if (!this.owner.isReadOnlyMode) {\n this.updateProperty(1, underline);\n }\n };\n /**\n * Toggles the strike through property of selected contents.\n * @param {Strikethrough} strikethrough Default value of strikethrough parameter is SingleStrike.\n */\n Editor.prototype.toggleStrikethrough = function (strikethrough) {\n if (!this.owner.isReadOnlyMode) {\n var value = void 0;\n if (isNullOrUndefined(strikethrough)) {\n value = this.selection.characterFormat.strikethrough === 'SingleStrike' ? 'None' : 'SingleStrike';\n }\n else {\n value = strikethrough;\n }\n this.selection.characterFormat.strikethrough = value;\n }\n };\n Editor.prototype.updateFontSize = function (format, value) {\n if (typeof (value) === 'number' && !(value < 0 && format.fontSize === 1)) {\n return format.fontSize + value;\n }\n var fontsizeCollection = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 26, 28, 36, 48, 72];\n if (typeof (value) === 'string' && value === 'increment') {\n if (format.fontSize < 8) {\n return format.fontSize + 1;\n }\n else if (format.fontSize >= 72 && format.fontSize < 80) {\n return 80;\n }\n else if (format.fontSize >= 80) {\n return format.fontSize + 10;\n }\n else {\n for (var i = 0; i < fontsizeCollection.length; i++) {\n if (format.fontSize < fontsizeCollection[i]) {\n return fontsizeCollection[i];\n }\n }\n }\n }\n else if (typeof (value) === 'string' && value === 'decrement' && format.fontSize > 1) {\n if (format.fontSize <= 8) {\n return format.fontSize - 1;\n }\n else if (format.fontSize > 72 && format.fontSize <= 80) {\n return 72;\n }\n else if (format.fontSize > 80) {\n return format.fontSize - 10;\n }\n else {\n for (var i = 0; i < fontsizeCollection.length; i++) {\n if (format.fontSize <= fontsizeCollection[i]) {\n return fontsizeCollection[i - 1];\n }\n }\n }\n }\n return format.fontSize;\n };\n // Inline\n // tslint:disable-next-line:max-line-length\n Editor.prototype.applyCharFormatInline = function (inline, selection, startIndex, endIndex, property, value, update) {\n if (startIndex === 0 && endIndex === inline.length) {\n this.applyCharFormatValue(inline.characterFormat, property, value, update);\n return 0;\n }\n else if (inline instanceof TextElementBox) {\n return this.formatInline(inline, selection, startIndex, endIndex, property, value, update);\n }\n return 0;\n };\n // tslint:disable-next-line:max-line-length\n Editor.prototype.formatInline = function (inline, selection, startIndex, endIndex, property, value, update) {\n var x = 0;\n var node = inline;\n var index = inline.line.children.indexOf(node);\n var paragraph = inline.paragraph;\n var lineIndex = paragraph.childWidgets.indexOf(inline.line);\n var textElement;\n if (startIndex > 0) {\n textElement = new TextElementBox();\n textElement.characterFormat.copyFormat(inline.characterFormat);\n textElement.line = inline.line;\n textElement.text = inline.text.substr(startIndex, endIndex - startIndex);\n this.applyCharFormatValue(textElement.characterFormat, property, value, update);\n index++;\n node.line.children.splice(index, 0, textElement);\n x++;\n // this.addToLinkedFields(span); \n }\n if (endIndex < node.length) {\n textElement = new TextElementBox();\n textElement.characterFormat.copyFormat(inline.characterFormat);\n textElement.text = node.text.substring(endIndex);\n textElement.line = inline.line;\n index++;\n node.line.children.splice(index, 0, textElement);\n x++;\n // this.addToLinkedFields(span); \n }\n if (startIndex === 0) {\n inline.text = inline.text.substr(0, endIndex);\n this.applyCharFormatValue(inline.characterFormat, property, value, update);\n }\n else {\n inline.text = inline.text.substr(0, startIndex);\n }\n return x;\n };\n // Cell\n // tslint:disable-next-line:max-line-length\n Editor.prototype.applyCharFormatCell = function (cell, selection, start, end, property, value, update) {\n if (end.paragraph.isInsideTable) {\n var containerCell = selection.getContainerCellOf(cell, end.paragraph.associatedCell);\n if (containerCell.ownerTable.contains(end.paragraph.associatedCell)) {\n var startCell = selection.getSelectedCell(cell, containerCell);\n var endCell = selection.getSelectedCell(end.paragraph.associatedCell, containerCell);\n if (selection.containsCell(containerCell, end.paragraph.associatedCell)) {\n //Selection end is in container cell.\n if (selection.isCellSelected(containerCell, start, end)) {\n value = this.getCharacterFormatValueOfCell(cell, selection, value, property);\n this.applyCharFormatForSelectedCell(containerCell, selection, property, value, update);\n }\n else {\n if (startCell === containerCell) {\n this.applyCharFormat(start.paragraph, selection, start, end, property, value, update);\n }\n else {\n this.applyCharFormatRow(startCell.ownerRow, selection, start, end, property, value, update);\n }\n }\n }\n else {\n this.applyCharFormatForTableCell(containerCell.ownerTable, selection, containerCell, endCell, property, value, update);\n }\n }\n else {\n this.applyCharFormatRow(containerCell.ownerRow, selection, start, end, property, value, update);\n }\n }\n else {\n var tableCell = selection.getContainerCell(cell);\n this.applyCharFormatRow(tableCell.ownerRow, selection, start, end, property, value, update);\n }\n };\n // tslint:disable-next-line:max-line-length\n Editor.prototype.applyCharFormatForSelectedCell = function (cell, selection, property, value, update) {\n for (var i = 0; i < cell.childWidgets.length; i++) {\n var block = cell.childWidgets[i];\n if (block instanceof ParagraphWidget) {\n this.applyCharFormatForSelectedPara(block, selection, property, value, update);\n }\n else {\n this.applyCharFormatForSelTable(block, selection, property, value, update);\n }\n }\n };\n // Row\n // tslint:disable-next-line:max-line-length\n Editor.prototype.applyCharFormatRow = function (row, selection, start, end, property, value, update) {\n value = this.getCharacterFormatValueOfCell(row.childWidgets[0], selection, value, property);\n this.applyCharFormatForTable(row.rowIndex, row.ownerTable, selection, start, end, property, value, update);\n };\n // Table\n // tslint:disable-next-line:max-line-length\n Editor.prototype.applyCharFormatForTable = function (index, table, selection, start, end, property, value, update) {\n table = table.combineWidget(this.viewer);\n for (var i = index; i < table.childWidgets.length; i++) {\n var row = table.childWidgets[i];\n for (var j = 0; j < row.childWidgets.length; j++) {\n this.applyCharFormatForSelectedCell(row.childWidgets[j], selection, property, value, update);\n }\n if (end.paragraph.isInsideTable && selection.containsRow(row, end.paragraph.associatedCell)) {\n this.viewer.layout.layoutBodyWidgetCollection(table.index, table.containerWidget, table, false);\n return;\n }\n }\n this.viewer.layout.layoutBodyWidgetCollection(table.index, table.containerWidget, table, false);\n this.getNextParagraphForCharacterFormatting(table, start, end, property, value, update);\n };\n // tslint:disable-next-line:max-line-length\n Editor.prototype.applyCharFormatForSelTable = function (tableWidget, selection, property, value, update) {\n for (var i = 0; i < tableWidget.childWidgets.length; i++) {\n var row = tableWidget.childWidgets[i];\n for (var j = 0; j < row.childWidgets.length; j++) {\n this.applyCharFormatForSelectedCell(row.childWidgets[j], selection, property, value, update);\n }\n }\n };\n // tslint:disable-next-line:max-line-length\n Editor.prototype.applyCharFormatForTableCell = function (table, selection, startCell, endCell, property, value, update) {\n var startCellLeft = selection.getCellLeft(startCell.ownerRow, startCell);\n var startCellRight = startCellLeft + startCell.cellFormat.cellWidth;\n var endCellLeft = selection.getCellLeft(endCell.ownerRow, endCell);\n var endCellRight = endCellLeft + endCell.cellFormat.cellWidth;\n var cellInfo = this.updateSelectedCellsInTable(startCellLeft, startCellRight, endCellLeft, endCellRight);\n startCellLeft = cellInfo.start;\n startCellRight = cellInfo.end;\n var count = table.childWidgets.indexOf(endCell.ownerRow);\n var isStarted = false;\n for (var i = table.childWidgets.indexOf(startCell.ownerRow); i <= count; i++) {\n var row = table.childWidgets[i];\n for (var j = 0; j < row.childWidgets.length; j++) {\n var left = selection.getCellLeft(row, row.childWidgets[j]);\n if (HelperMethods.round(startCellLeft, 2) <= HelperMethods.round(left, 2) &&\n HelperMethods.round(left, 2) < HelperMethods.round(startCellRight, 2)) {\n if (!isStarted) {\n value = this.getCharacterFormatValueOfCell(row.childWidgets[j], selection, value, property);\n isStarted = true;\n }\n this.applyCharFormatForSelectedCell(row.childWidgets[j], selection, property, value, update);\n }\n }\n }\n };\n Editor.prototype.updateSelectedCellsInTable = function (start, end, endCellLeft, endCellRight) {\n var selection = this.viewer.selection;\n if (start > endCellLeft) {\n start = endCellLeft;\n }\n if (end < endCellRight) {\n end = endCellRight;\n }\n if (start > selection.upDownSelectionLength) {\n start = selection.upDownSelectionLength;\n }\n if (end < selection.upDownSelectionLength) {\n end = selection.upDownSelectionLength;\n }\n return { start: start, end: end };\n };\n Editor.prototype.getCharacterFormatValueOfCell = function (cell, selection, value, property) {\n if (typeof (value) === 'boolean' || (value === undefined && (property === 'bold' || property === 'italic'))) {\n var firstParagraph = selection.getFirstParagraph(cell);\n var format = firstParagraph.characterFormat;\n if (firstParagraph.childWidgets.length > 0 && firstParagraph.childWidgets[0].children.length > 0) {\n format = firstParagraph.childWidgets[0].children[0].characterFormat;\n }\n value = !format.getPropertyValue(property);\n }\n return value;\n };\n /**\n * Apply Character format for selection\n * @private\n */\n Editor.prototype.applyCharFormatValueInternal = function (selection, format, property, value) {\n this.applyCharFormatValue(format, property, value, false);\n };\n Editor.prototype.copyInlineCharacterFormat = function (sourceFormat, destFormat) {\n destFormat.uniqueCharacterFormat = sourceFormat.uniqueCharacterFormat;\n destFormat.baseCharStyle = sourceFormat.baseCharStyle;\n };\n Editor.prototype.applyCharFormatValue = function (format, property, value, update) {\n if (update && property === 'fontSize') {\n value = this.updateFontSize(format, value);\n }\n if (this.editorHistory && !isNullOrUndefined(this.editorHistory.currentBaseHistoryInfo)) {\n value = this.editorHistory.currentBaseHistoryInfo.addModifiedProperties(format, property, value);\n }\n if (value instanceof WCharacterFormat) {\n if (this.editorHistory && (this.editorHistory.isUndoing || this.editorHistory.isRedoing)) {\n this.copyInlineCharacterFormat(value, format);\n }\n else {\n format.copyFormat(value);\n }\n return;\n }\n if (isNullOrUndefined(value)) {\n format.clearFormat();\n return;\n }\n if (property === 'bold') {\n format.bold = value;\n }\n else if (property === 'italic') {\n format.italic = value;\n }\n else if (property === 'fontColor') {\n format.fontColor = value;\n }\n else if (property === 'fontFamily') {\n format.fontFamily = value;\n }\n else if (property === 'fontSize') {\n format.fontSize = value;\n }\n else if (property === 'highlightColor') {\n format.highlightColor = value;\n }\n else if (property === 'baselineAlignment') {\n format.baselineAlignment = value;\n }\n else if (property === 'strikethrough') {\n format.strikethrough = value;\n }\n else if (property === 'underline') {\n format.underline = value;\n }\n else if (property === 'styleName') {\n format.baseCharStyle = value;\n }\n };\n /**\n * @private\n */\n Editor.prototype.onImageFormat = function (elementBox, width, height) {\n var modifiedFormat = new ImageFormat(elementBox);\n if (this.editorHistory) {\n this.editorHistory.initializeHistory('ImageResizing');\n this.editorHistory.currentBaseHistoryInfo.modifiedProperties.push(modifiedFormat);\n }\n this.setOffsetValue(this.selection);\n elementBox.width = width;\n elementBox.height = height;\n // tslint:disable-next-line:max-line-length\n this.viewer.layout.reLayoutParagraph(elementBox.line.paragraph, elementBox.line.indexInOwner, 0);\n this.reLayout(this.selection, false);\n if (this.viewer.owner.imageResizerModule) {\n this.viewer.owner.imageResizerModule.positionImageResizer(elementBox);\n }\n };\n /**\n * Toggles the text alignment of selected paragraphs.\n * @param {TextAlignment} textAlignment\n */\n Editor.prototype.toggleTextAlignment = function (textAlignment) {\n if (this.viewer.owner.isReadOnlyMode || !this.viewer.owner.isDocumentLoaded) {\n return;\n }\n // Toggle performed based on current selection format similar to MS word behavior.\n // tslint:disable-next-line:max-line-length\n if (!isNullOrUndefined(this.viewer.selection.paragraphFormat.textAlignment) && this.viewer.selection.paragraphFormat.textAlignment === textAlignment) {\n if (textAlignment === 'Left') {\n this.onApplyParagraphFormat('textAlignment', 'Justify', false, true);\n }\n else {\n this.onApplyParagraphFormat('textAlignment', 'Left', false, true);\n }\n }\n else {\n this.onApplyParagraphFormat('textAlignment', textAlignment, false, true);\n }\n };\n /**\n * Applies paragraph format for the selection ranges.\n * @param {string} property\n * @param {Object} value\n * @param {boolean} update\n * @param {boolean} isSelectionChanged\n * @private\n */\n Editor.prototype.onApplyParagraphFormat = function (property, value, update, isSelectionChanged) {\n var action = (property[0].toUpperCase() + property.slice(1));\n this.viewer.owner.isShiftingEnabled = true;\n var selection = this.viewer.selection;\n this.initHistory(action);\n if (this.viewer.owner.isReadOnlyMode || !this.viewer.owner.isDocumentLoaded) {\n return;\n }\n if (property === 'leftIndent') {\n if (selection.paragraphFormat.listId !== -1 && update) {\n this.updateListLevel(value > 0);\n return;\n }\n }\n if (selection.isEmpty) {\n this.setOffsetValue(selection);\n if (update && property === 'leftIndent') {\n value = this.getIndentIncrementValue(selection.start.paragraph, value);\n }\n var para = selection.start.paragraph.combineWidget(this.viewer);\n this.applyParaFormatProperty(para, property, value, update);\n this.layoutItemBlock(para, false);\n }\n else {\n //Iterate and update formatting's. \n this.setOffsetValue(selection);\n this.updateSelectionParagraphFormatting(property, value, update);\n }\n this.reLayout(selection);\n };\n /**\n * Update the list level\n * @param {boolean} increaseLevel\n * @private\n */\n Editor.prototype.updateListLevel = function (increaseLevel) {\n // Increment or Decrement list level for Multilevel lists.\n var viewer = this.viewer;\n var listFormat = this.viewer.selection.start.paragraph.paragraphFormat.listFormat;\n var paragraphFormat = this.viewer.selection.start.paragraph.paragraphFormat;\n var list = viewer.getListById(paragraphFormat.listFormat.listId);\n var listLevel = viewer.layout.getListLevel(list, paragraphFormat.listFormat.listLevelNumber);\n var levelNumber;\n if (increaseLevel) {\n levelNumber = paragraphFormat.listFormat.listLevelNumber + 1;\n }\n else {\n levelNumber = paragraphFormat.listFormat.listLevelNumber - 1;\n }\n var nextListLevel = viewer.layout.getListLevel(list, levelNumber);\n if (!isNullOrUndefined(nextListLevel)) {\n this.onApplyListInternal(list, levelNumber);\n viewer.selection.start.updatePhysicalPosition(true);\n viewer.selection.end.updatePhysicalPosition(true);\n viewer.selection.updateCaretPosition();\n }\n };\n /**\n * Applies list\n * @param {WList} list\n * @param {number} listLevelNumber\n * @private\n */\n Editor.prototype.onApplyListInternal = function (list, listLevelNumber) {\n var selection = this.viewer.selection;\n var listFormat = new WListFormat();\n if (!isNullOrUndefined(list) && listLevelNumber >= 0 && listLevelNumber < 9) {\n listFormat.listId = list.listId;\n listFormat.listLevelNumber = listLevelNumber;\n }\n this.onApplyParagraphFormat('listFormat', listFormat, false, false);\n };\n /**\n * Apply paragraph format to selection range\n * @private\n */\n Editor.prototype.updateSelectionParagraphFormatting = function (property, value, update) {\n var selection = this.viewer.selection;\n if (property === 'leftIndent' && update) {\n if (!isNullOrUndefined(selection.start) && selection.start.isExistBefore(selection.end)) {\n value = this.getIndentIncrementValue(selection.start.paragraph, value);\n }\n else {\n value = this.getIndentIncrementValue(selection.end.paragraph, value);\n }\n }\n this.updateParagraphFormatInternal(property, value, update);\n };\n Editor.prototype.getIndentIncrementValue = function (currentParagraph, incrementFactor) {\n var currentParagraphIndent = currentParagraph.paragraphFormat.leftIndent;\n if (currentParagraphIndent < 0) {\n // In MS Word, if the current paragraph left indent is lesser that or equal to 0\n // then performing decrement indent will set left indent to 0. \n if (incrementFactor < 0 || currentParagraphIndent + incrementFactor >= 0) {\n return -currentParagraphIndent;\n }\n else {\n var incrementValue = -this.getIndentIncrementValueInternal(-currentParagraphIndent, -incrementFactor);\n return incrementValue % incrementFactor === 0 ? incrementValue : incrementValue + incrementFactor;\n }\n }\n else {\n return this.getIndentIncrementValueInternal(currentParagraphIndent, incrementFactor);\n }\n };\n Editor.prototype.getIndentIncrementValueInternal = function (position, incrementFactor) {\n var tabValue = Math.abs(incrementFactor);\n if (position === 0 || tabValue === 0) {\n return incrementFactor > 0 ? tabValue : 0;\n }\n else {\n var diff = ((Math.round(position) * 100) % (Math.round(tabValue) * 100)) / 100;\n var cnt = (Math.round(position) - diff) / Math.round(tabValue);\n var fPosition = cnt * tabValue;\n if (incrementFactor > 0) {\n fPosition += tabValue;\n }\n return (fPosition - position) === 0 ? incrementFactor : fPosition - position;\n }\n };\n Editor.prototype.updateParagraphFormatInternal = function (property, value, update) {\n if (isNullOrUndefined(property)) {\n property = 'ParagraphFormat';\n }\n switch (property) {\n case 'afterSpacing':\n this.updateParagraphFormat('afterSpacing', value, false);\n break;\n case 'beforeSpacing':\n this.updateParagraphFormat('beforeSpacing', value, false);\n break;\n case 'rightIndent':\n this.updateParagraphFormat('rightIndent', value, false);\n break;\n case 'leftIndent':\n this.updateParagraphFormat('leftIndent', value, update);\n break;\n case 'firstLineIndent':\n this.updateParagraphFormat('firstLineIndent', value, false);\n break;\n case 'lineSpacing':\n this.updateParagraphFormat('lineSpacing', value, false);\n break;\n case 'lineSpacingType':\n this.updateParagraphFormat('lineSpacingType', value, false);\n break;\n case 'textAlignment':\n this.updateParagraphFormat('textAlignment', value, false);\n break;\n case 'listFormat':\n this.updateParagraphFormat('listFormat', value, false);\n break;\n case 'ParagraphFormat':\n this.updateParagraphFormat(undefined, value, false);\n break;\n case 'styleName':\n this.updateParagraphFormat('styleName', value, false);\n break;\n case 'ClearParagraphFormat':\n // this.initializeHistory('ClearParagraphFormat', selectionRange);\n this.updateParagraphFormat(undefined, value, false);\n break;\n }\n };\n /**\n * Update paragraph format on undo\n * @param {SelectionRange} selectionRange\n * @param {string} property\n * @param {Object} value\n * @param {boolean} update\n * @private\n */\n Editor.prototype.updateParagraphFormat = function (property, value, update) {\n var selection = this.viewer.selection;\n var startPosition = selection.start;\n var endPosition = selection.end;\n if (!selection.isForward) {\n startPosition = selection.end;\n endPosition = selection.start;\n }\n // this.updateInsertPosition(selection, startPosition);\n this.applyParaFormatSelectedContent(startPosition, endPosition, property, value, update);\n // this.startSelectionReLayouting(startPosition.paragraph, selection, startPosition, endPosition);\n };\n Editor.prototype.applyParaFormatSelectedContent = function (start, end, property, value, update) {\n var selection = this.viewer.selection;\n if (start.paragraph.isInsideTable && (!end.paragraph.isInsideTable\n || start.paragraph.associatedCell !== end.paragraph.associatedCell\n || selection.isCellSelected(start.paragraph.associatedCell, start, end))) {\n var cell = void 0;\n start.paragraph.associatedCell.ownerTable.combineWidget(this.viewer);\n if (this.checkInsertPosition(selection)) {\n this.updateHistoryPosition(start, true);\n }\n cell = start.paragraph.associatedCell;\n this.applyParaFormatInCell(cell, start, end, property, value, update);\n var table = cell.ownerTable;\n this.viewer.layout.layoutBodyWidgetCollection(table.index, table.containerWidget, table, false);\n }\n else {\n // tslint:disable-next-line:max-line-length\n if (!isNullOrUndefined(value) && !this.selection.isEmpty && property === 'styleName' && this.applyCharacterStyle(start.paragraph, start, end, property, value, update)) {\n return;\n }\n else {\n this.applyParaFormat(start.paragraph, start, end, property, value, update);\n }\n }\n };\n /**\n * Apply Paragraph format\n * @private\n */\n Editor.prototype.applyParaFormatProperty = function (paragraph, property, value, update) {\n var format = paragraph.paragraphFormat;\n if (update && property === 'leftIndent') {\n value = format.leftIndent + value;\n }\n if (property === 'listFormat' && value instanceof WListFormat) {\n var listFormat = value;\n if (!listFormat.hasValue('listLevelNumber')) {\n listFormat.listLevelNumber = format.listFormat.listLevelNumber;\n }\n }\n if (this.editorHistory && !isNullOrUndefined(this.editorHistory.currentBaseHistoryInfo)) {\n value = this.editorHistory.currentBaseHistoryInfo.addModifiedPropertiesForParagraphFormat(format, property, value);\n }\n if (value instanceof WParagraphFormat) {\n if (isNullOrUndefined(property)) {\n if (this.editorHistory && (this.editorHistory.isUndoing || this.editorHistory.isRedoing)) {\n this.copyParagraphFormat(value, format);\n }\n else {\n format.copyFormat(value);\n }\n }\n else if (property === 'listFormat') {\n format.listFormat = value.listFormat;\n // this.handleListFormat(format, value as WParagraphFormat);\n }\n }\n if (isNullOrUndefined(value)) {\n format.clearFormat();\n this.viewer.layout.reLayoutParagraph(format.ownerBase, 0, 0);\n return;\n }\n if (property === 'afterSpacing') {\n format.afterSpacing = value;\n }\n else if (property === 'beforeSpacing') {\n format.beforeSpacing = value;\n }\n else if (property === 'leftIndent') {\n format.leftIndent = value;\n }\n else if (property === 'lineSpacingType') {\n format.lineSpacingType = value;\n }\n else if (property === 'lineSpacing') {\n format.lineSpacing = value;\n }\n else if (property === 'rightIndent') {\n format.rightIndent = value;\n }\n else if (property === 'firstLineIndent') {\n format.firstLineIndent = value;\n }\n else if (property === 'textAlignment') {\n format.textAlignment = value;\n this.viewer.layout.allowLayout = false;\n }\n else if (property === 'styleName') {\n if (typeof (value) === 'string') {\n value = this.viewer.styles.findByName(value);\n }\n format.ApplyStyle(value);\n }\n else if (property === 'listFormat') {\n if (value instanceof WParagraphFormat) {\n this.copyFromListLevelParagraphFormat(format, value);\n value = value.listFormat;\n }\n format.listFormat.copyFormat(value);\n this.viewer.layout.clearListElementBox(format.ownerBase);\n this.onListFormatChange(format.ownerBase, value, format);\n this.layoutItemBlock(format.ownerBase, false);\n return;\n }\n };\n Editor.prototype.copyParagraphFormat = function (sourceFormat, destFormat) {\n destFormat.uniqueParagraphFormat = sourceFormat.uniqueParagraphFormat;\n destFormat.listFormat = sourceFormat.listFormat;\n destFormat.baseStyle = sourceFormat.baseStyle;\n };\n Editor.prototype.onListFormatChange = function (paragraph, listFormat, paraFormat) {\n if (listFormat instanceof WListFormat) {\n var currentFormat = listFormat;\n // currentFormat.setOwnerBase(paraFormat);\n this.updateListParagraphFormat(paragraph, listFormat);\n }\n };\n Editor.prototype.updateListParagraphFormat = function (paragraph, listFormat) {\n var list = this.viewer.getListById(listFormat.listId);\n var listlevel = undefined;\n if (!isNullOrUndefined(list)) {\n listlevel = this.viewer.layout.getListLevel(list, listFormat.listLevelNumber);\n }\n if (paragraph instanceof ParagraphWidget && !isNullOrUndefined(listlevel)\n && !isNullOrUndefined(listlevel.paragraphFormat) && !isNullOrUndefined(paragraph.containerWidget)) {\n this.copyFromListLevelParagraphFormat(paragraph.paragraphFormat, listlevel.paragraphFormat);\n }\n else if (isNullOrUndefined(list)) {\n paragraph.paragraphFormat.leftIndent = 0;\n paragraph.paragraphFormat.firstLineIndent = 0;\n }\n };\n /**\n * Copies list level paragraph format\n * @param {WParagraphFormat} oldFormat\n * @param {WParagraphFormat} newFormat\n * @private\n */\n Editor.prototype.copyFromListLevelParagraphFormat = function (oldFormat, newFormat) {\n if (!isNullOrUndefined(newFormat.leftIndent)) {\n oldFormat.leftIndent = newFormat.leftIndent;\n }\n if (!isNullOrUndefined(newFormat.firstLineIndent)) {\n oldFormat.firstLineIndent = newFormat.firstLineIndent;\n }\n };\n /**\n * @private\n */\n Editor.prototype.applyContinueNumbering = function (selection) {\n this.editorHistory.initializeHistory('ContinueNumbering');\n this.applyContinueNumberingInternal(selection);\n };\n /**\n * @private\n */\n Editor.prototype.applyContinueNumberingInternal = function (selection) {\n var paragraph = selection.start.paragraph;\n var numberingInfo = this.getContinueNumberingInfo(paragraph);\n var paraFormat = this.getParagraphFormat(paragraph, numberingInfo.listLevelNumber, numberingInfo.listPattern);\n this.changeListId(numberingInfo.currentList, paragraph, paraFormat, numberingInfo.listLevelNumber, numberingInfo.listPattern);\n this.reLayout(selection, false);\n if (this.editorHistory && !isNullOrUndefined(this.editorHistory.currentBaseHistoryInfo)) {\n this.editorHistory.updateHistory();\n }\n this.viewer.updateFocus();\n };\n /**\n * @private\n */\n Editor.prototype.getContinueNumberingInfo = function (paragraph) {\n var currentList = undefined;\n var listLevelNumber = 0;\n var listPattern = 'None';\n if (!isNullOrUndefined(paragraph.paragraphFormat)\n && !isNullOrUndefined(paragraph.paragraphFormat.listFormat)) {\n currentList = this.viewer.getListById(paragraph.paragraphFormat.listFormat.listId);\n listLevelNumber = paragraph.paragraphFormat.listFormat.listLevelNumber;\n }\n var viewer = this.viewer;\n if (listLevelNumber !== 0 && !isNullOrUndefined(currentList) &&\n !isNullOrUndefined(viewer.getAbstractListById(currentList.abstractListId))\n && !isNullOrUndefined(viewer.getAbstractListById(currentList.abstractListId).levels[listLevelNumber])) {\n var listLevel = this.viewer.layout.getListLevel(currentList, listLevelNumber);\n if (!isNullOrUndefined(listLevel)) {\n listPattern = listLevel.listLevelPattern;\n }\n }\n return {\n currentList: currentList,\n listLevelNumber: listLevelNumber,\n listPattern: listPattern\n };\n };\n /**\n * @private\n */\n Editor.prototype.revertContinueNumbering = function (selection, format) {\n var paragraph = selection.start.paragraph;\n var numberingInfo = this.getContinueNumberingInfo(paragraph);\n this.changeListId(numberingInfo.currentList, paragraph, format, numberingInfo.listLevelNumber, numberingInfo.listPattern);\n this.reLayout(selection, false);\n if (!isNullOrUndefined(this.editorHistory.currentBaseHistoryInfo)) {\n this.editorHistory.updateHistory();\n }\n };\n Editor.prototype.changeListId = function (list, block, format, levelNum, listType) {\n if (isNullOrUndefined(block)) {\n return;\n }\n if (block instanceof ParagraphWidget) {\n if (list.listId === block.paragraphFormat.listFormat.listId\n && levelNum === block.paragraphFormat.listFormat.listLevelNumber) {\n var baseHistoryInfo = this.editorHistory.currentBaseHistoryInfo;\n if (!isNullOrUndefined(baseHistoryInfo)) {\n format = baseHistoryInfo.addModifiedPropertiesForContinueNumbering(block.paragraphFormat, format);\n }\n block.paragraphFormat.copyFormat(format);\n this.viewer.layout.reLayoutParagraph(block, 0, 0);\n }\n }\n return this.changeListId(list, block.nextRenderedWidget, format, levelNum, listType);\n };\n Editor.prototype.getParagraphFormat = function (paragraph, levelNumber, listType) {\n if (!isNullOrUndefined(paragraph.previousRenderedWidget)) {\n if (paragraph.previousRenderedWidget instanceof ParagraphWidget) {\n if (!isNullOrUndefined(paragraph.previousRenderedWidget.paragraphFormat.listFormat)\n && paragraph.previousRenderedWidget.paragraphFormat.listFormat.listId !== -1) {\n var listLevel = this.getListLevel(paragraph.previousRenderedWidget);\n if (levelNumber === 0) {\n return paragraph.previousRenderedWidget.paragraphFormat;\n }\n else if (listType === listLevel.listLevelPattern\n || this.checkNumberArabic(listType, listLevel.listLevelPattern)) {\n return paragraph.previousRenderedWidget.paragraphFormat;\n }\n else {\n return this.getParagraphFormat(paragraph.previousRenderedWidget, levelNumber, listType);\n }\n }\n else {\n return this.getParagraphFormat(paragraph.previousRenderedWidget, levelNumber, listType);\n }\n }\n }\n return undefined;\n };\n Editor.prototype.checkNumberArabic = function (listType, levelPattern) {\n if ((listType === 'Number' && levelPattern === 'Arabic')\n || (levelPattern === 'Number' && listType === 'Arabic')) {\n return true;\n }\n return false;\n };\n /**\n * @private\n */\n Editor.prototype.applyRestartNumbering = function (selection) {\n this.editorHistory.initializeHistory('RestartNumbering');\n this.restartListAt(selection);\n };\n /**\n * @private\n */\n Editor.prototype.restartListAt = function (selection) {\n var currentListLevel = this.getListLevel(selection.start.paragraph);\n var list = new WList();\n list.listId = this.viewer.lists[(this.viewer.lists.length - 1)].listId + 1;\n var abstractList = new WAbstractList();\n abstractList.abstractListId = this.viewer.abstractLists[(this.viewer.abstractLists.length - 1)].abstractListId + 1;\n list.abstractListId = abstractList.abstractListId;\n this.viewer.abstractLists.push(abstractList);\n this.createListLevels(abstractList, currentListLevel, list);\n this.viewer.lists.push(list);\n this.restartListAtInternal(selection, list.listId);\n };\n /**\n * @private\n */\n Editor.prototype.restartListAtInternal = function (selection, listId) {\n var numberingInfo = this.getContinueNumberingInfo(selection.start.paragraph);\n this.changeRestartNumbering(numberingInfo.currentList, selection.start.paragraph, listId);\n this.reLayout(selection, false);\n if (this.editorHistory && !isNullOrUndefined(this.editorHistory.currentBaseHistoryInfo)) {\n this.editorHistory.updateHistory();\n }\n this.incrementListNumber = -1;\n this.refListNumber = undefined;\n this.viewer.updateFocus();\n };\n Editor.prototype.changeRestartNumbering = function (list, block, listId) {\n if (isNullOrUndefined(block)) {\n return;\n }\n if (block instanceof ParagraphWidget) {\n if (list.listId === block.paragraphFormat.listFormat.listId) {\n var baseHistoryInfo = this.editorHistory.currentBaseHistoryInfo;\n if (!isNullOrUndefined(baseHistoryInfo)) {\n listId = baseHistoryInfo.addModifiedPropertiesForRestartNumbering(block.paragraphFormat.listFormat, listId);\n }\n block.paragraphFormat.listFormat.listId = listId;\n if (this.refListNumber !== block.paragraphFormat.listFormat.listLevelNumber) {\n this.incrementListNumber += 1;\n this.refListNumber = block.paragraphFormat.listFormat.listLevelNumber;\n }\n block.paragraphFormat.listFormat.listLevelNumber = this.incrementListNumber;\n this.viewer.layout.reLayoutParagraph(block, 0, 0);\n }\n }\n return this.changeRestartNumbering(list, block.nextRenderedWidget, listId);\n };\n Editor.prototype.createListLevels = function (abstractList, currentListLevel, list) {\n var levelPattern = currentListLevel.listLevelPattern;\n var levelPatterns = [];\n var currentAbstractList = currentListLevel.ownerBase;\n for (var i = 0; i < 3; i++) {\n var listLevel = currentAbstractList.levels[i];\n if (!isNullOrUndefined(listLevel)) {\n levelPatterns.push(listLevel.listLevelPattern);\n }\n }\n var indexOfLevelPattern = levelPatterns.indexOf(levelPattern) === -1 ? 0 : levelPatterns.indexOf(levelPattern);\n for (var i = 0; i < currentAbstractList.levels.length; i++) {\n var listLevel = new WListLevel(abstractList);\n if (i === 0) {\n listLevel.listLevelPattern = levelPattern;\n }\n else {\n if (indexOfLevelPattern === 0 || indexOfLevelPattern < levelPatterns.length - 1) {\n indexOfLevelPattern++;\n }\n else {\n indexOfLevelPattern = 0;\n }\n listLevel.listLevelPattern = levelPatterns[indexOfLevelPattern];\n }\n listLevel.numberFormat = '%' + (i + 1) + '.';\n listLevel.startAt = 1;\n listLevel.characterFormat.copyFormat(currentListLevel.characterFormat);\n listLevel.paragraphFormat.copyFormat(currentListLevel.paragraphFormat);\n listLevel.restartLevel = i;\n abstractList.levels.push(listLevel);\n }\n };\n // tslint:disable-next-line:max-line-length\n Editor.prototype.applyParaFormat = function (paragraph, start, end, property, value, update) {\n this.setOffsetValue(this.selection);\n paragraph = paragraph.combineWidget(this.viewer);\n //Apply Paragraph Format for spitted paragraph\n this.applyParaFormatProperty(paragraph, property, value, update);\n this.layoutItemBlock(paragraph, false);\n this.getOffsetValue(this.selection);\n if (paragraph.equals(end.paragraph)) {\n return;\n }\n this.getNextParagraphForFormatting(paragraph, start, end, property, value, update);\n };\n /* tslint:disable-next-line:max-line-length */\n Editor.prototype.applyCharacterStyle = function (paragraph, start, end, property, value, update) {\n var paragraphWidget = paragraph.getSplitWidgets();\n if ((end.paragraph === paragraph || paragraphWidget.indexOf(end.paragraph) !== -1)) {\n if (((value.type === 'Paragraph') && ((value.link) instanceof WCharacterStyle)) || (value.type === 'Character')) {\n var obj = (value.type === 'Character') ? value : value.link;\n this.updateSelectionCharacterFormatting(property, obj, update);\n return true;\n }\n }\n return false;\n };\n // Cell\n // tslint:disable-next-line:max-line-length\n Editor.prototype.applyParaFormatInCell = function (cell, start, end, property, value, update) {\n var selection = this.viewer.selection;\n if (end.paragraph.isInsideTable) {\n var cellContainer = selection.getContainerCellOf(cell, end.paragraph.associatedCell);\n if (cellContainer.ownerTable.contains(end.paragraph.associatedCell)) {\n var startCell = selection.getSelectedCell(cell, cellContainer);\n var endCell = selection.getSelectedCell(end.paragraph.associatedCell, cellContainer);\n if (selection.containsCell(cellContainer, end.paragraph.associatedCell)) {\n //Selection end is in container cell.\n if (selection.isCellSelected(cellContainer, start, end)) {\n value = this.getParaFormatValueInCell(cellContainer, property, value);\n this.applyParaFormatCellInternal(cellContainer, property, value, update);\n }\n else {\n if (startCell === cellContainer) {\n this.applyParaFormat(start.paragraph, start, end, property, value, update);\n }\n else {\n this.applyParagraphFormatRow(startCell.ownerRow, start, end, property, value, update);\n }\n }\n }\n else {\n //Format other selected cells in current table.\n this.applyParaFormatTableCell(cellContainer.ownerTable, cellContainer, endCell, property, value, update);\n }\n }\n else {\n this.applyParagraphFormatRow(cellContainer.ownerRow, start, end, property, value, update);\n }\n }\n else {\n var wCell = selection.getContainerCell(cell);\n this.applyParagraphFormatRow(wCell.ownerRow, start, end, property, value, update);\n }\n };\n Editor.prototype.applyParaFormatCellInternal = function (cell, property, value, update) {\n for (var i = 0; i < cell.childWidgets.length; i++) {\n var block = cell.childWidgets[i];\n if (block instanceof ParagraphWidget) {\n this.applyParaFormatProperty(block, property, value, update);\n }\n else {\n this.applyParagraphFormatTableInternal(block, property, value, update);\n }\n }\n };\n Editor.prototype.getParaFormatValueInCell = function (cell, property, value) {\n if (typeof value === 'boolean') {\n var firstPara = this.viewer.selection.getFirstParagraph(cell);\n value = !firstPara.paragraphFormat.getPropertyValue(property);\n }\n return value;\n };\n // Row\n // tslint:disable-next-line:max-line-length\n Editor.prototype.applyParagraphFormatRow = function (wRow, start, end, property, value, update) {\n value = this.getParaFormatValueInCell(wRow.childWidgets[0], property, value);\n for (var i = wRow.rowIndex; i < wRow.ownerTable.childWidgets.length; i++) {\n var row = wRow.ownerTable.childWidgets[i];\n for (var j = 0; j < row.childWidgets.length; j++) {\n this.applyParaFormatCellInternal(row.childWidgets[j], property, value, update);\n }\n if (end.paragraph.isInsideTable && this.viewer.selection.containsRow(row, end.paragraph.associatedCell)) {\n return;\n }\n }\n this.getNextParagraphForFormatting(wRow.ownerTable, start, end, property, value, update);\n };\n // Table\n // tslint:disable-next-line:max-line-length\n Editor.prototype.applyParaFormatTableCell = function (table, startCell, endCell, property, value, update) {\n var selection = this.viewer.selection;\n var startValue = selection.getCellLeft(startCell.ownerRow, startCell);\n var endValue = startValue + startCell.cellFormat.cellWidth;\n var endCellLeft = selection.getCellLeft(endCell.ownerRow, endCell);\n var endCellRight = endCellLeft + endCell.cellFormat.cellWidth;\n var cellInfo = this.updateSelectedCellsInTable(startValue, endValue, endCellLeft, endCellRight);\n startValue = cellInfo.start;\n endValue = cellInfo.end;\n var count = table.childWidgets.indexOf(endCell.ownerRow);\n var isStarted = false;\n for (var m = table.childWidgets.indexOf(startCell.ownerRow); m <= count; m++) {\n var row = table.childWidgets[m];\n for (var j = 0; j < row.childWidgets.length; j++) {\n var left = selection.getCellLeft(row, row.childWidgets[j]);\n if (Math.round(startValue) <= Math.round(left) && Math.round(left) < Math.round(endValue)) {\n if (!isStarted) {\n value = this.getParaFormatValueInCell(row.childWidgets[j], property, value);\n isStarted = true;\n }\n this.applyParaFormatCellInternal(row.childWidgets[j], property, value, update);\n }\n }\n }\n };\n // tslint:disable-next-line:max-line-length\n Editor.prototype.applyParaFormatTable = function (table, start, end, property, value, update) {\n table = table.combineWidget(this.viewer);\n var selection = this.viewer.selection;\n for (var m = 0; m < table.childWidgets.length; m++) {\n var tableRow = table.childWidgets[m];\n for (var k = 0; k < tableRow.childWidgets.length; k++) {\n this.applyParaFormatCellInternal(tableRow.childWidgets[k], property, value, update);\n }\n if (end.paragraph.isInsideTable && selection.containsRow(tableRow, end.paragraph.associatedCell)) {\n this.viewer.layout.layoutBodyWidgetCollection(table.index, table.containerWidget, table, false);\n return;\n }\n }\n this.viewer.layout.layoutBodyWidgetCollection(table.index, table.containerWidget, table, false);\n this.getNextParagraphForFormatting(table, start, end, property, value, update);\n };\n // tslint:disable-next-line:max-line-length\n Editor.prototype.getNextParagraphForFormatting = function (block, start, end, property, value, update) {\n var widgetCollection = block.getSplitWidgets();\n block = widgetCollection[widgetCollection.length - 1];\n block = this.viewer.selection.getNextRenderedBlock(block);\n if (!isNullOrUndefined(block)) {\n if (block instanceof ParagraphWidget) {\n this.applyParaFormat(block, start, end, property, value, update);\n }\n else {\n this.applyParaFormatTable(block, start, end, property, value, update);\n }\n }\n };\n Editor.prototype.applyParagraphFormatTableInternal = function (table, property, value, update) {\n for (var x = 0; x < table.childWidgets.length; x++) {\n var row = table.childWidgets[x];\n for (var y = 0; y < row.childWidgets.length; y++) {\n this.applyParaFormatCellInternal(row.childWidgets[y], property, value, update);\n }\n }\n };\n //Paragraph Format apply implementation Ends\n // Apply Selection Section Format Option Implementation Starts\n /**\n * Apply section format selection changes\n * @param {string} property\n * @param {Object} value\n * @private\n */\n Editor.prototype.onApplySectionFormat = function (property, value) {\n if (!isNullOrUndefined(property)) {\n var action = (property[0].toUpperCase() + property.slice(1));\n this.initHistory(action);\n }\n else {\n this.initHistory('SectionFormat');\n }\n this.updateSectionFormat(property, value);\n };\n /**\n * Update section format\n * @param {string} property\n * @param {Object} value\n * @returns TextPosition\n * @private\n */\n Editor.prototype.updateSectionFormat = function (property, value) {\n var selection = this.viewer.selection;\n selection.owner.isShiftingEnabled = true;\n var startPosition = selection.start;\n var endPosition = selection.end;\n if (!selection.isForward) {\n startPosition = selection.end;\n endPosition = selection.start;\n }\n var startPageIndex;\n var endPageIndex;\n this.viewer.clearContent();\n var startSectionIndex = startPosition.paragraph.containerWidget.index;\n var endSectionIndex = endPosition.paragraph.containerWidget.index;\n for (var i = 0; i < this.viewer.pages.length; i++) {\n if (this.viewer.pages[i].bodyWidgets[0].index === startSectionIndex) {\n startPageIndex = i;\n break;\n }\n }\n for (var i = startPageIndex; i < this.viewer.pages.length; i++) {\n var bodyWidget = this.viewer.pages[i].bodyWidgets[0];\n endPageIndex = i;\n if ((bodyWidget.index === startSectionIndex)) {\n continue;\n }\n else if ((bodyWidget.index >= startSectionIndex) && bodyWidget.index <= endSectionIndex) {\n continue;\n }\n else {\n endPageIndex = i - 1;\n break;\n }\n }\n // let startPageIndex: number = this.viewer.pages.indexOf((selection.start.paragraph.containerWidget as BodyWidget).page);\n // let endPageIndex: number = this.viewer.pages.indexOf((selection.end.paragraph.containerWidget as BodyWidget).page);\n var update = true;\n var index = 0;\n for (var i = startPageIndex; i <= endPageIndex; i++) {\n if (index !== this.viewer.pages[i].bodyWidgets[0].index && !update) {\n update = true;\n }\n this.applyPropertyValueForSection(this.viewer.pages[i].bodyWidgets[0].sectionFormat, property, value, update);\n index = this.viewer.pages[i].bodyWidgets[0].index;\n update = false;\n }\n this.layoutWholeDocument();\n this.fireContentChange();\n };\n //Apply Selection Table Format option implementation starts\n /**\n * Apply table format property changes\n * @param {string} property\n * @param {Object} value\n * @private\n */\n Editor.prototype.onApplyTableFormat = function (property, value) {\n var action = this.getTableFormatAction(property);\n this.viewer.owner.isShiftingEnabled = true;\n var selection = this.viewer.selection;\n var table = selection.start.paragraph.associatedCell.ownerTable;\n table = table.combineWidget(this.viewer);\n if (selection.isEmpty) {\n this.initHistory(action);\n this.applyTablePropertyValue(selection, property, value, table);\n }\n else {\n this.updateSelectionTableFormat(this.selection, action, value);\n }\n table.calculateGrid();\n this.selection.owner.isLayoutEnabled = true;\n this.viewer.layout.reLayoutTable(table);\n this.reLayout(selection, false);\n };\n Editor.prototype.getTableFormatAction = function (property) {\n switch (property) {\n case 'tableAlignment':\n return 'TableAlignment';\n case 'leftIndent':\n return 'TableLeftIndent';\n case 'leftMargin':\n return 'DefaultCellLeftMargin';\n case 'rightMargin':\n return 'DefaultCellRightMargin';\n case 'bottomMargin':\n return 'DefaultCellBottomMargin';\n case 'topMargin':\n return 'DefaultCellTopMargin';\n case 'preferredWidth':\n return 'TablePreferredWidth';\n case 'preferredWidthType':\n return 'TablePreferredWidthType';\n case 'shading':\n return 'Shading';\n default:\n return 'DefaultCellSpacing';\n }\n };\n // Apply Selection Row Format Option Implementation Starts\n /**\n * Apply table row format property changes\n * @param {string} property\n * @param {Object} value\n * @private\n */\n Editor.prototype.onApplyTableRowFormat = function (property, value) {\n var action = this.getRowAction(property);\n this.viewer.owner.isShiftingEnabled = true;\n var selection = this.viewer.selection;\n if (selection.isEmpty) {\n this.initHistory(action);\n var table = selection.start.paragraph.associatedCell.ownerRow.ownerTable;\n this.applyRowPropertyValue(selection, property, value, selection.start.paragraph.associatedCell.ownerRow);\n }\n else {\n this.updateSelectionTableFormat(this.selection, action, value);\n }\n this.reLayout(selection, false);\n };\n Editor.prototype.getRowAction = function (property) {\n switch (property) {\n case 'height':\n return 'RowHeight';\n case 'heightType':\n return 'RowHeightType';\n case 'isHeader':\n return 'RowHeader';\n default:\n return 'AllowBreakAcrossPages';\n }\n };\n /**\n * Apply table cell property changes\n * @param {string} property\n * @param {Object} value\n * @private\n */\n Editor.prototype.onApplyTableCellFormat = function (property, value) {\n var action = this.getTableCellAction(property);\n this.viewer.owner.isShiftingEnabled = true;\n var selection = this.viewer.selection;\n var table = selection.start.paragraph.associatedCell.ownerTable;\n table = table.combineWidget(this.viewer);\n if (selection.isEmpty) {\n this.initHistory(action);\n this.applyCellPropertyValue(selection, property, value, selection.start.paragraph.associatedCell.cellFormat);\n table.calculateGrid();\n this.selection.owner.isLayoutEnabled = true;\n this.viewer.layout.reLayoutTable(table);\n }\n else {\n this.updateSelectionTableFormat(this.selection, action, value);\n }\n this.reLayout(selection, false);\n };\n Editor.prototype.getTableCellAction = function (property) {\n switch (property) {\n case 'verticalAlignment':\n return 'CellContentVerticalAlignment';\n case 'leftMargin':\n return 'CellLeftMargin';\n case 'rightMargin':\n return 'CellRightMargin';\n case 'bottomMargin':\n return 'CellBottomMargin';\n case 'topMargin':\n return 'CellTopMargin';\n case 'preferredWidth':\n return 'CellPreferredWidth';\n case 'shading':\n return 'Shading';\n default:\n return 'CellPreferredWidthType';\n }\n };\n Editor.prototype.applyPropertyValueForSection = function (sectionFormat, property, value, update) {\n var selection = this.viewer.selection;\n if (update && this.editorHistory && !isNullOrUndefined(this.editorHistory.currentBaseHistoryInfo)) {\n value = this.editorHistory.currentBaseHistoryInfo.addModifiedPropertiesForSection(sectionFormat, property, value);\n }\n if (isNullOrUndefined(value)) {\n return;\n }\n if (value instanceof WSectionFormat) {\n if (isNullOrUndefined(property)) {\n sectionFormat.copyFormat(value, this.editorHistory);\n }\n return;\n }\n if (property === 'pageHeight') {\n sectionFormat.pageHeight = value;\n }\n else if (property === 'pageWidth') {\n sectionFormat.pageWidth = value;\n }\n else if (property === 'leftMargin') {\n sectionFormat.leftMargin = value;\n }\n else if (property === 'rightMargin') {\n sectionFormat.rightMargin = value;\n }\n else if (property === 'topMargin') {\n sectionFormat.topMargin = value;\n }\n else if (property === 'bottomMargin') {\n sectionFormat.bottomMargin = value;\n }\n else if (property === 'differentFirstPage') {\n sectionFormat.differentFirstPage = value;\n }\n else if (property === 'differentOddAndEvenPages') {\n sectionFormat.differentOddAndEvenPages = value;\n }\n else if (property === 'headerDistance') {\n sectionFormat.headerDistance = value;\n }\n else if (property === 'footerDistance') {\n sectionFormat.footerDistance = value;\n }\n };\n /**\n * @private\n */\n Editor.prototype.layoutWholeDocument = function () {\n var startPosition = this.viewer.selection.start;\n var endPosition = this.viewer.selection.end;\n if (startPosition.isExistAfter(endPosition)) {\n startPosition = this.viewer.selection.end;\n endPosition = this.viewer.selection.start;\n }\n var startInfo = this.getParagraphInfo(startPosition);\n var endInfo = this.getParagraphInfo(startPosition);\n var startIndex = this.getHierarchicalIndex(startInfo.paragraph, startInfo.offset.toString());\n var endIndex = this.getHierarchicalIndex(endInfo.paragraph, endInfo.offset.toString());\n this.viewer.renderedLists.clear();\n // this.viewer.owner.isLayoutEnabled = true;\n var sections = this.combineSection();\n this.viewer.clearContent();\n this.viewer.layout.layoutItems(sections);\n this.viewer.owner.isShiftingEnabled = false;\n this.setPositionForCurrentIndex(startPosition, startIndex);\n this.setPositionForCurrentIndex(endPosition, endIndex);\n this.viewer.selection.selectPosition(startPosition, endPosition);\n this.reLayout(this.viewer.selection);\n };\n Editor.prototype.combineSection = function () {\n var sections = [];\n var nextSection = this.viewer.pages[0].bodyWidgets[0];\n do {\n nextSection = this.combineSectionChild(nextSection, sections);\n } while (nextSection);\n return sections;\n };\n Editor.prototype.combineSectionChild = function (bodyWidget, sections) {\n var previousBodyWidget = bodyWidget;\n var temp = new BodyWidget();\n temp.sectionFormat = bodyWidget.sectionFormat;\n temp.index = previousBodyWidget.index;\n do {\n previousBodyWidget = bodyWidget;\n if (bodyWidget.lastChild) {\n bodyWidget.lastChild.combineWidget(this.viewer);\n }\n bodyWidget = bodyWidget.nextRenderedWidget;\n for (var j = 0; j < previousBodyWidget.childWidgets.length; j++) {\n var block = previousBodyWidget.childWidgets[j];\n if (block instanceof TableWidget) {\n this.viewer.layout.clearTableWidget(block, true, true);\n }\n else {\n block.x = 0;\n block.y = 0;\n block.width = 0;\n block.height = 0;\n }\n temp.childWidgets.push(block);\n previousBodyWidget.childWidgets.splice(j, 1);\n j--;\n block.containerWidget = temp;\n }\n this.viewer.pages.splice(previousBodyWidget.page.index, 1);\n } while (bodyWidget && previousBodyWidget.equals(bodyWidget));\n sections.push(temp);\n return bodyWidget;\n };\n Editor.prototype.updateSelectionTableFormat = function (selection, action, value) {\n switch (action) {\n case 'TableAlignment':\n this.editorHistory.initializeHistory('TableAlignment');\n this.updateTableFormat(selection, 'tableAlignment', value);\n break;\n case 'TableLeftIndent':\n this.editorHistory.initializeHistory('TableLeftIndent');\n this.updateTableFormat(selection, 'leftIndent', value);\n break;\n case 'DefaultCellSpacing':\n this.editorHistory.initializeHistory('DefaultCellSpacing');\n this.updateTableFormat(selection, 'cellSpacing', value);\n break;\n case 'DefaultCellLeftMargin':\n this.editorHistory.initializeHistory('DefaultCellLeftMargin');\n this.updateTableFormat(selection, 'leftMargin', value);\n break;\n case 'DefaultCellRightMargin':\n this.editorHistory.initializeHistory('DefaultCellRightMargin');\n this.updateTableFormat(selection, 'rightMargin', value);\n break;\n case 'DefaultCellTopMargin':\n this.editorHistory.initializeHistory('DefaultCellTopMargin');\n this.updateTableFormat(selection, 'topMargin', value);\n break;\n case 'TablePreferredWidth':\n this.editorHistory.initializeHistory('TablePreferredWidth');\n this.updateTableFormat(selection, 'preferredWidth', value);\n break;\n case 'TablePreferredWidthType':\n this.editorHistory.initializeHistory('TablePreferredWidthType');\n this.updateTableFormat(selection, 'preferredWidthType', value);\n break;\n case 'DefaultCellBottomMargin':\n this.editorHistory.initializeHistory('DefaultCellBottomMargin');\n this.updateTableFormat(selection, 'bottomMargin', value);\n break;\n case 'CellContentVerticalAlignment':\n this.editorHistory.initializeHistory('CellContentVerticalAlignment');\n this.updateCellFormat(selection, 'verticalAlignment', value);\n break;\n case 'CellLeftMargin':\n this.editorHistory.initializeHistory('CellLeftMargin');\n this.updateCellFormat(selection, 'leftMargin', value);\n break;\n case 'CellRightMargin':\n this.editorHistory.initializeHistory('CellRightMargin');\n this.updateCellFormat(selection, 'rightMargin', value);\n break;\n case 'CellTopMargin':\n this.editorHistory.initializeHistory('CellTopMargin');\n this.updateCellFormat(selection, 'topMargin', value);\n break;\n case 'CellBottomMargin':\n this.editorHistory.initializeHistory('CellBottomMargin');\n this.updateCellFormat(selection, 'bottomMargin', value);\n break;\n case 'CellPreferredWidth':\n this.editorHistory.initializeHistory('CellPreferredWidth');\n this.updateCellFormat(selection, 'preferredWidth', value);\n break;\n case 'CellPreferredWidthType':\n this.editorHistory.initializeHistory('CellPreferredWidthType');\n this.updateCellFormat(selection, 'preferredWidthType', value);\n break;\n case 'Shading':\n this.editorHistory.initializeHistory('Shading');\n this.updateCellFormat(selection, 'shading', value);\n break;\n case 'RowHeight':\n this.editorHistory.initializeHistory('RowHeight');\n this.updateRowFormat(selection, 'height', value);\n break;\n case 'RowHeightType':\n this.editorHistory.initializeHistory('RowHeightType');\n this.updateRowFormat(selection, 'heightType', value);\n break;\n case 'RowHeader':\n this.editorHistory.initializeHistory('RowHeader');\n this.updateRowFormat(selection, 'isHeader', value);\n break;\n case 'AllowBreakAcrossPages':\n this.editorHistory.initializeHistory('AllowBreakAcrossPages');\n this.updateRowFormat(selection, 'allowBreakAcrossPages', value);\n break;\n }\n };\n // Update Table Properties\n /**\n * Update Table Format on undo\n * @param {Selection} selection\n * @param {SelectionRange} selectionRange\n * @param {string} property\n * @param {object} value\n * @private\n */\n Editor.prototype.updateTableFormat = function (selection, property, value) {\n var tableStartPosition = selection.start;\n var tableEndPosition = selection.end;\n if (!selection.isForward) {\n tableStartPosition = selection.end;\n tableEndPosition = selection.start;\n }\n this.initHistoryPosition(selection, tableStartPosition);\n // tslint:disable-next-line:max-line-length\n this.applyTablePropertyValue(selection, property, value, tableStartPosition.paragraph.associatedCell.ownerTable);\n };\n /**\n * update cell format on undo\n * @param {Selection} selection\n * @param {SelectionRange} selectionRange\n * @param {string} property\n * @param {Object} value\n * @private\n */\n Editor.prototype.updateCellFormat = function (selection, property, value) {\n selection.owner.isShiftingEnabled = true;\n var newStartPosition = selection.start;\n var newEndPosition = selection.end;\n if (!selection.isForward) {\n newStartPosition = selection.end;\n newEndPosition = selection.start;\n }\n this.initHistoryPosition(selection, newStartPosition);\n this.updateFormatForCell(selection, property, value);\n };\n /**\n * update row format on undo\n * @param {Selection} selection\n * @param {SelectionRange} selectionRange\n * @param {string} property\n * @param {Object} value\n * @private\n */\n Editor.prototype.updateRowFormat = function (selection, property, value) {\n var rowStartPosition = selection.start;\n var rowEndPosition = selection.end;\n if (!selection.isForward) {\n rowStartPosition = selection.end;\n rowEndPosition = selection.start;\n }\n this.initHistoryPosition(selection, rowStartPosition);\n // tslint:disable-next-line:max-line-length\n this.applyRowFormat(rowStartPosition.paragraph.associatedCell.ownerRow, rowStartPosition, rowEndPosition, property, value);\n };\n Editor.prototype.initHistoryPosition = function (selection, position) {\n if (this.viewer.owner.editorHistoryModule && !isNullOrUndefined(this.editorHistory.currentBaseHistoryInfo)) {\n if (!isNullOrUndefined(position)) {\n if (isNullOrUndefined(this.editorHistory.currentBaseHistoryInfo.insertPosition)) {\n this.editorHistory.currentBaseHistoryInfo.insertPosition = position.getHierarchicalIndexInternal();\n }\n }\n else if (isNullOrUndefined(this.editorHistory.currentBaseHistoryInfo.insertPosition)) {\n this.editorHistory.currentBaseHistoryInfo.insertPosition = selection.start.getHierarchicalIndexInternal();\n }\n }\n };\n Editor.prototype.startSelectionReLayouting = function (paragraph, selection, start, end) {\n selection.owner.isLayoutEnabled = true;\n if (start.paragraph.isInsideTable) {\n var table = start.paragraph.associatedCell.ownerTable;\n while (table.isInsideTable) {\n table = table.associatedCell.ownerTable;\n }\n this.reLayoutSelectionOfTable(table, selection, start, end);\n }\n else {\n this.reLayoutSelection(paragraph, selection, start, end);\n }\n };\n Editor.prototype.reLayoutSelectionOfTable = function (table, selection, start, end) {\n var isEnded = false;\n this.viewer.layout.layoutBodyWidgetCollection(table.index, table.containerWidget, table, false);\n // If the selection ends in the current table, need to stop relayouting.\n if (!isNullOrUndefined(end.paragraph.associatedCell) && table.contains(end.paragraph.associatedCell)) {\n return true;\n }\n var block = selection.getNextRenderedBlock(table);\n // Relayout the next block.\n if (!isNullOrUndefined(block)) {\n isEnded = this.reLayoutSelectionOfBlock(block, selection, start, end);\n }\n return isEnded;\n };\n Editor.prototype.reLayoutSelection = function (paragraph, selection, start, end) {\n if (start.paragraph === paragraph) {\n var startOffset = start.offset;\n var length_2 = selection.getParagraphLength(paragraph);\n var indexInInline = 0;\n var index = 0;\n var inlineObj = paragraph.getInline(start.offset, indexInInline);\n var inline = inlineObj.element;\n indexInInline = inlineObj.index;\n if (!isNullOrUndefined(inline)) {\n if (indexInInline === inline.length && !isNullOrUndefined(inline.nextNode)) {\n inline = inline.nextNode;\n }\n index = inline.line.children.indexOf(inline);\n }\n var lineIndex = 0;\n if (start.currentWidget.paragraph === paragraph) {\n lineIndex = paragraph.childWidgets.indexOf(start.currentWidget);\n index = start.currentWidget.children.indexOf(inline);\n }\n // If selection start inline is at new inline, need to relayout from the previous inline.\n if (inline instanceof TextElementBox && !inline.line && index > 0) {\n this.viewer.layout.reLayoutParagraph(paragraph, lineIndex, index - 1);\n }\n else {\n this.viewer.layout.reLayoutParagraph(paragraph, lineIndex, index);\n }\n }\n else {\n this.viewer.layout.reLayoutParagraph(paragraph, 0, 0);\n }\n // If the selection ends at the current paragraph, need to stop relayouting.\n if (end.paragraph === paragraph) {\n return true;\n }\n // _Relayout the next block.\n var block = selection.getNextRenderedBlock(paragraph);\n if (!isNullOrUndefined(block)) {\n return this.reLayoutSelectionOfBlock(block, selection, start, end);\n }\n return false;\n };\n //Relayouting Start \n Editor.prototype.reLayoutSelectionOfBlock = function (block, selection, start, end) {\n if (block instanceof ParagraphWidget) {\n return this.reLayoutSelection(block, selection, start, end);\n }\n else {\n return undefined;\n // return this.reLayoutSelectionOfTable(block as TableWidget, selection, start, end);\n }\n };\n /**\n * @private\n */\n Editor.prototype.layoutItemBlock = function (block, shiftNextWidget) {\n var section = undefined;\n if (block.containerWidget instanceof BlockContainer) {\n section = block.containerWidget;\n var index = section.childWidgets.indexOf(block);\n if (!isNullOrUndefined(this.viewer.owner)\n && this.viewer.owner.isLayoutEnabled) {\n // tslint:disable-next-line:max-line-length\n this.viewer.layout.layoutBodyWidgetCollection(block.index, section, block, false);\n }\n }\n else if (block.containerWidget instanceof TableCellWidget) {\n var cell = block.containerWidget;\n cell = this.viewer.selection.getContainerCell(cell);\n if (!isNullOrUndefined(this.viewer.owner)\n && this.viewer.owner.isLayoutEnabled) {\n this.viewer.layout.reLayoutTable(block);\n }\n }\n };\n /**\n * @private\n */\n Editor.prototype.removeSelectedContents = function (selection) {\n return this.removeSelectedContentInternal(selection, selection.start, selection.end);\n };\n Editor.prototype.removeSelectedContentInternal = function (selection, startPosition, endPosition) {\n var startPos = startPosition;\n var endPos = endPosition;\n if (!startPosition.isExistBefore(endPosition)) {\n startPos = endPosition;\n endPos = startPosition;\n }\n // tslint:disable-next-line:max-line-length\n if (startPos.paragraph === endPos.paragraph && startPos.paragraph.childWidgets.indexOf(startPos.currentWidget) === startPos.paragraph.childWidgets.length - 1 &&\n startPos.offset === selection.getParagraphLength(startPos.paragraph) && startPos.offset + 1 === endPos.offset) {\n selection.owner.isShiftingEnabled = true;\n selection.selectContent(startPos, true);\n return true;\n }\n var paragraphInfo = this.getParagraphInfo(startPos);\n selection.editPosition = this.getHierarchicalIndex(paragraphInfo.paragraph, paragraphInfo.offset.toString());\n var isRemoved = this.removeSelectedContent(endPos.paragraph, selection, startPos, endPos);\n var textPosition = new TextPosition(selection.owner);\n this.setPositionForCurrentIndex(textPosition, selection.editPosition);\n selection.selectContent(textPosition, true);\n return isRemoved;\n };\n Editor.prototype.removeSelectedContent = function (paragraph, selection, start, end) {\n //If end is not table end and start is outside the table, then skip removing the contents and move caret to start position.\n if (end.paragraph.isInsideTable\n && end.paragraph !== selection.getLastParagraphInLastCell(end.paragraph.associatedCell.ownerTable)\n && (!start.paragraph.isInsideTable || start.paragraph.associatedCell.ownerTable !== end.paragraph.associatedCell.ownerTable)) {\n return false;\n }\n selection.owner.isShiftingEnabled = true;\n this.deleteSelectedContent(paragraph, selection, start, end, 2);\n return true;\n };\n // tslint:disable-next-line:max-line-length\n Editor.prototype.deleteSelectedContent = function (paragraph, selection, start, end, editAction) {\n var indexInInline = 0;\n var inlineObj = start.currentWidget.getInline(start.offset, indexInInline);\n var inline = inlineObj.element;\n indexInInline = inlineObj.index;\n // if (!isNullOrUndefined(inline)) {\n // inline = selection.getNextRenderedInline(inline, indexInInline);\n // }\n // if (inline instanceof WFieldBegin && !isNullOrUndefined((inline as WFieldBegin).fieldEnd)) {\n // tslint:disable-next-line:max-line-length\n // let fieldEndOffset: number = ((inline as WFieldBegin).fieldEnd.owner as WParagraph).getOffset((inline as WFieldBegin).fieldEnd, 1);\n // let fieldEndIndex: string = WordDocument.getHierarchicalIndexOf((inline as WFieldBegin).fieldEnd.owner as WParagraph, fieldEndOffset.toString());\n // let selectionEndIndex: string = end.getHierarchicalIndexInternal();\n // if (!TextPosition.isForwardSelection(fieldEndIndex, selectionEndIndex)) {\n // //If selection end is after field begin, moves selection start to field separator.\n // start.moveToInline((inline as WFieldBegin).fieldSeparator, 1);\n // selection.editPosition = start.getHierarchicalIndexInternal();\n // if (!isNullOrUndefined(selection.currentBaseHistoryInfo)) {\n // selection.currentBaseHistoryInfo.insertPosition = selection.editPosition;\n // }\n // }\n // }\n indexInInline = 0;\n inlineObj = end.currentWidget.getInline(end.offset, indexInInline);\n inline = inlineObj.element;\n indexInInline = inlineObj.index;\n // if (!isNullOrUndefined(inline)) {\n // inline = selection.getNextRenderedInline(inline, indexInInline);\n // }\n // if (inline instanceof WFieldEnd && !isNullOrUndefined((inline as WFieldEnd).fieldBegin)) {\n // tslint:disable-next-line:max-line-length\n // let fieldBeginOffset: number = ((inline as WFieldEnd).fieldBegin.owner as WParagraph).getOffset((inline as WFieldEnd).fieldBegin, 0);\n // let fieldBeginIndex: string = WordDocument.getHierarchicalIndexOf((inline as WFieldEnd).fieldBegin.owner as WParagraph, fieldBeginOffset.toString());\n // let selectionStartIndex: string = start.getHierarchicalIndexInternal();\n // if (!TextPosition.isForwardSelection(selectionStartIndex, fieldBeginIndex)) {\n // //If field begin is before selection start, move selection end to inline item before field end.\n // let prevInline: WInline = selection.getPreviousTextInline(inline);\n // if (isNullOrUndefined(prevInline)) {\n // end.moveBackward();\n // } else {\n // end.moveToInline(prevInline, prevInline.length);\n // }\n // }\n // }\n if (end.paragraph !== paragraph) {\n this.deleteSelectedContent(end.paragraph, selection, start, end, editAction);\n return;\n }\n // Selection start in cell.\n if (end.paragraph.isInsideTable && (!start.paragraph.isInsideTable\n || start.paragraph.associatedCell !== end.paragraph.associatedCell\n || selection.isCellSelected(end.paragraph.associatedCell, start, end))) {\n end.paragraph.associatedCell.ownerTable.combineWidget(this.viewer);\n this.deleteTableCell(end.paragraph.associatedCell, selection, start, end, editAction);\n }\n else {\n this.deletePara(paragraph, start, end, editAction);\n }\n };\n /**\n * Merge the selected cells.\n */\n Editor.prototype.mergeCells = function () {\n if (this.owner.isReadOnlyMode || !this.owner.isDocumentLoaded) {\n return;\n }\n if (!isNullOrUndefined(this.viewer) && !this.selection.isEmpty) {\n this.mergeSelectedCellsInTable();\n }\n };\n /**\n * Deletes the entire table at selection.\n */\n Editor.prototype.deleteTable = function () {\n if (this.owner.isReadOnlyMode) {\n return;\n }\n var startPos = this.selection.isForward ? this.selection.start : this.selection.end;\n if (startPos.paragraph.isInsideTable) {\n var table = this.getOwnerTable(this.selection.isForward).combineWidget(this.viewer);\n this.selection.owner.isShiftingEnabled = true;\n if (this.checkIsNotRedoing()) {\n this.initHistory('DeleteTable');\n //Sets the insert position in history info as current table. \n this.updateHistoryPosition(startPos, true);\n }\n var paragraph = this.getParagraphForSelection(table);\n if (this.editorHistory && this.editorHistory.currentBaseHistoryInfo) {\n this.editorHistory.currentBaseHistoryInfo.removedNodes.push(table.clone());\n }\n this.removeBlock(table);\n this.selection.selectParagraph(paragraph, true);\n if (this.checkIsNotRedoing() || isNullOrUndefined(this.editorHistory)) {\n this.reLayout(this.selection);\n }\n }\n };\n /**\n * Deletes the selected column(s).\n */\n Editor.prototype.deleteColumn = function () {\n if (this.owner.isReadOnlyMode) {\n return;\n }\n var startPos = this.selection.isForward ? this.selection.start : this.selection.end;\n var endPos = this.selection.isForward ? this.selection.end : this.selection.start;\n if (startPos.paragraph.isInsideTable) {\n this.selection.owner.isShiftingEnabled = true;\n if (this.checkIsNotRedoing()) {\n this.initHistory('DeleteColumn');\n }\n var startCell = this.getOwnerCell(this.selection.isForward);\n var endCell = this.getOwnerCell(!this.selection.isForward);\n var table = startCell.ownerTable.combineWidget(this.viewer);\n if (this.editorHistory && this.editorHistory.currentBaseHistoryInfo) {\n this.cloneTableToHistoryInfo(table);\n }\n var paragraph = undefined;\n if (endCell.nextWidget) {\n var nextCell = endCell.nextWidget;\n paragraph = this.selection.getFirstParagraph(nextCell);\n }\n else if (startCell.previousWidget) {\n var previousCell = startCell.previousWidget;\n paragraph = this.selection.getFirstParagraph(previousCell);\n }\n if (isNullOrUndefined(paragraph)) {\n paragraph = this.getParagraphForSelection(table);\n }\n //retrieve the cell collection based on start and end cell to remove. \n var deleteCells = table.getColumnCellsForSelection(startCell, endCell);\n for (var i = 0; i < table.childWidgets.length; i++) {\n var row = table.childWidgets[i];\n if (row.childWidgets.length === 1) {\n if (deleteCells.indexOf(row.childWidgets[0]) >= 0) {\n table.childWidgets.splice(table.childWidgets.indexOf(row), 1);\n row.destroy();\n i--;\n }\n }\n else {\n for (var j = 0; j < row.childWidgets.length; j++) {\n var tableCell = row.childWidgets[j];\n if (deleteCells.indexOf(tableCell) >= 0) {\n row.childWidgets.splice(j, 1);\n tableCell.destroy();\n j--;\n }\n }\n if (row.childWidgets.length === 0) {\n table.childWidgets.splice(table.childWidgets.indexOf(row), 1);\n row.destroy();\n i--;\n }\n }\n }\n if (table.childWidgets.length === 0) {\n // Before disposing table reset the paragrph.\n paragraph = this.getParagraphForSelection(table);\n this.removeBlock(table);\n if (this.editorHistory && this.editorHistory.currentBaseHistoryInfo) {\n this.editorHistory.currentBaseHistoryInfo.action = 'DeleteTable';\n }\n table.destroy();\n }\n else {\n table.isGridUpdated = false;\n table.buildTableColumns();\n table.isGridUpdated = true;\n this.viewer.layout.reLayoutTable(table);\n }\n this.selection.selectParagraph(paragraph, true);\n if (isNullOrUndefined(this.editorHistory) || this.checkIsNotRedoing()) {\n this.reLayout(this.selection, true);\n }\n }\n };\n /**\n * Deletes the selected row(s).\n */\n Editor.prototype.deleteRow = function () {\n if (this.owner.isReadOnlyMode) {\n return;\n }\n var startPos = !this.selection.isForward ? this.selection.end : this.selection.start;\n var endPos = !this.selection.isForward ? this.selection.start : this.selection.end;\n if (startPos.paragraph.isInsideTable) {\n var startCell = this.getOwnerCell(this.selection.isForward);\n var endCell = this.getOwnerCell(!this.selection.isForward);\n if (this.checkIsNotRedoing()) {\n this.initHistory('DeleteRow');\n }\n this.selection.owner.isShiftingEnabled = true;\n var table = startCell.ownerTable.combineWidget(this.viewer);\n var row = this.getOwnerRow(true);\n if (this.editorHistory && this.editorHistory.currentBaseHistoryInfo) {\n this.cloneTableToHistoryInfo(table);\n }\n var paragraph = undefined;\n if (row.nextWidget) {\n var nextCell = row.nextWidget.childWidgets[0];\n paragraph = this.selection.getFirstParagraph(nextCell);\n }\n if (isNullOrUndefined(paragraph)) {\n paragraph = this.getParagraphForSelection(table);\n }\n if (!this.selection.isEmpty) {\n //tslint:disable-next-line:max-line-length\n var containerCell = this.selection.getContainerCellOf(startCell, endCell);\n if (containerCell.ownerTable.contains(endCell)) {\n startCell = this.selection.getSelectedCell(startCell, containerCell);\n endCell = this.selection.getSelectedCell(endCell, containerCell);\n if (this.selection.containsCell(containerCell, endCell)) {\n row = startCell.ownerRow;\n this.removeRow(row);\n }\n else {\n row = startCell.ownerRow;\n var endRow = endCell.ownerRow;\n //Update the selection paragraph.\n paragraph = undefined;\n if (endRow.nextWidget) {\n var nextCell = endRow.nextWidget.childWidgets[0];\n paragraph = this.selection.getFirstParagraph(nextCell);\n }\n if (isNullOrUndefined(paragraph)) {\n paragraph = this.getParagraphForSelection(table);\n }\n for (var i = 0; i < table.childWidgets.length; i++) {\n var tableRow = table.childWidgets[i];\n if (tableRow.rowIndex >= row.rowIndex && tableRow.rowIndex <= endRow.rowIndex) {\n table.childWidgets.splice(i, 1);\n tableRow.destroy();\n i--;\n }\n }\n if (table.childWidgets.length === 0) {\n this.removeBlock(table);\n if (this.editorHistory && this.editorHistory.currentBaseHistoryInfo) {\n this.editorHistory.currentBaseHistoryInfo.action = 'DeleteTable';\n }\n table.destroy();\n }\n else {\n this.updateTable(table);\n }\n }\n }\n }\n else {\n this.removeRow(row);\n }\n this.selection.selectParagraph(paragraph, true);\n if (isNullOrUndefined(this.editorHistory) || this.checkIsNotRedoing()) {\n this.reLayout(this.selection, true);\n }\n }\n };\n Editor.prototype.removeRow = function (row) {\n var table = row.ownerTable;\n if (table.childWidgets.length === 1) {\n this.removeBlock(table);\n if (this.editorHistory && this.editorHistory.currentBaseHistoryInfo) {\n this.editorHistory.currentBaseHistoryInfo.action = 'Delete';\n }\n table.destroy();\n }\n else {\n table.childWidgets.splice(table.childWidgets.indexOf(row), 1);\n row.destroy();\n this.updateTable(table);\n }\n };\n Editor.prototype.updateTable = function (table) {\n table.updateRowIndex(0);\n table.isGridUpdated = false;\n table.buildTableColumns();\n table.isGridUpdated = true;\n this.viewer.layout.reLayoutTable(table);\n };\n Editor.prototype.getParagraphForSelection = function (table) {\n var paragraph = undefined;\n var nextWidget = table.nextWidget ? table.nextWidget : table.nextRenderedWidget;\n var previousWidget = table.previousWidget ? table.previousWidget : table.previousRenderedWidget;\n if (nextWidget) {\n paragraph = nextWidget instanceof ParagraphWidget ? nextWidget\n : this.selection.getFirstParagraphInFirstCell(nextWidget);\n }\n else if (previousWidget) {\n paragraph = previousWidget instanceof ParagraphWidget ? previousWidget\n : this.selection.getLastParagraphInLastCell(previousWidget);\n }\n return paragraph;\n };\n Editor.prototype.deletePara = function (paragraph, start, end, editAction) {\n paragraph = paragraph.combineWidget(this.viewer);\n var selection = this.viewer.selection;\n var paragraphStart = selection.getStartOffset(paragraph);\n var endParagraphStartOffset = selection.getStartOffset(end.paragraph);\n var startOffset = paragraphStart;\n var endOffset = 0;\n var isCombineNextParagraph = false;\n var lastLinelength = this.selection.getLineLength(paragraph.lastChild);\n var currentParagraph = paragraph;\n var section = paragraph.bodyWidget instanceof BodyWidget ? paragraph.containerWidget : undefined;\n var startLine = undefined;\n var endLineWidget = undefined;\n if (paragraph === start.paragraph) {\n startOffset = start.offset;\n startLine = start.currentWidget;\n if (end.paragraph.isInsideTable) {\n isCombineNextParagraph = this.isEndInAdjacentTable(paragraph, end.paragraph);\n }\n }\n else {\n startLine = paragraph.firstChild;\n }\n if (paragraph !== start.paragraph && selection.isSkipLayouting) {\n selection.isSkipLayouting = false;\n }\n if (paragraph === end.paragraph) {\n endLineWidget = end.currentWidget;\n endOffset = end.offset;\n }\n else {\n endLineWidget = paragraph.lastChild;\n endOffset = this.viewer.selection.getLineLength(paragraph.lastChild);\n }\n var block = paragraph.previousRenderedWidget;\n if (startOffset > paragraphStart && start.currentWidget === paragraph.lastChild &&\n startOffset === lastLinelength && (paragraph === end.paragraph && end.offset === startOffset + 1 ||\n paragraph.nextRenderedWidget === end.paragraph && end.offset === endParagraphStartOffset)) {\n isCombineNextParagraph = true;\n }\n if (end.paragraph === paragraph && end.currentWidget !== paragraph.lastChild ||\n (end.currentWidget === paragraph.lastChild && end.offset <= selection.getLineLength(paragraph.lastChild))) {\n var isStartParagraph = start.paragraph === paragraph;\n if (end.currentWidget.isFirstLine() && end.offset > paragraphStart || !end.currentWidget.isFirstLine()) {\n //If selection end with this paragraph and selection doesnot include paragraph mark. \n this.removeInlines(paragraph, startLine, startOffset, endLineWidget, endOffset, editAction);\n //Removes the splitted paragraph.\n }\n if (!isNullOrUndefined(block) && !isStartParagraph) {\n var nextSection = block.bodyWidget instanceof BodyWidget ? block.bodyWidget : undefined;\n // if (section !== nextSection) {\n // this.deleteSection(selection, section, nextSection, editAction);\n // }\n this.deleteBlock(block, selection, start, end, editAction);\n }\n }\n else if (start.paragraph === paragraph && (start.currentWidget !== paragraph.firstChild ||\n (start.currentWidget === paragraph.firstChild && startOffset > paragraphStart))) {\n // If selection start is after paragraph start\n //And selection does not end with this paragraph Or selection include paragraph mark.\n if (editAction === 4) {\n return;\n }\n else {\n currentParagraph = this.splitParagraph(paragraph, paragraph.firstChild, 0, startLine, startOffset, true);\n this.insertParagraphPaste(paragraph, currentParagraph, start, end, isCombineNextParagraph, editAction);\n this.addRemovedNodes(paragraph);\n return;\n }\n }\n else {\n var newParagraph = undefined;\n var previousBlock = paragraph.previousWidget;\n var prevParagraph = (previousBlock instanceof ParagraphWidget) ? previousBlock : undefined;\n var nextWidget = paragraph.nextRenderedWidget;\n if (editAction < 4) {\n //Checks whether this is last paragraph of owner text body and previousBlock is not paragraph.\n newParagraph = this.checkAndInsertBlock(paragraph, start, end, editAction, prevParagraph);\n this.removeBlock(paragraph);\n if (this.viewer.blockToShift === paragraph) {\n this.viewer.blockToShift = undefined;\n }\n this.addRemovedNodes(paragraph);\n if (!isNullOrUndefined(newParagraph)) {\n selection.editPosition = this.getHierarchicalIndex(newParagraph, '0');\n var offset = selection.getParagraphLength(newParagraph) + 1;\n if (this.editorHistory && !isNullOrUndefined(this.editorHistory.currentBaseHistoryInfo)) {\n //tslint:disable-next-line:max-line-length\n this.editorHistory.currentBaseHistoryInfo.endPosition = this.getHierarchicalIndex(newParagraph, offset.toString());\n }\n }\n else if (paragraph === start.paragraph && isNullOrUndefined(nextWidget) && !isNullOrUndefined(prevParagraph)) {\n var offset = this.selection.getParagraphLength(prevParagraph);\n // if (isNullOrUndefined(block)) {\n selection.editPosition = this.getHierarchicalIndex(prevParagraph, offset.toString());\n if (this.editorHistory && !isNullOrUndefined(this.editorHistory.currentBaseHistoryInfo)) {\n this.updateHistoryPosition(selection.editPosition, true);\n this.editorHistory.currentBaseHistoryInfo.endPosition = selection.editPosition;\n }\n // } else {\n // let offset: number = selection.getParagraphLength(paragraph) + 1;\n // if (block instanceof ParagraphWidget) {\n // prevParagraph = block as ParagraphWidget;\n // }\n // // if (block instanceof WTable) {\n // // prevParagraph = (block as WTable).getFirstParagraphInFirstCell();\n // // }\n // selection.editPosition = prevLineWidget.getHierarchicalIndex('0');\n // }\n }\n }\n if (start.paragraph !== paragraph && !isNullOrUndefined(block)) {\n var nextSection = block.bodyWidget instanceof BodyWidget ? block.bodyWidget : undefined;\n // if (section !== nextSection) {\n // this.deleteSection(selection, section, nextSection, editAction);\n // }\n this.deleteBlock(block, selection, start, end, editAction);\n }\n }\n this.insertParagraphPaste(paragraph, currentParagraph, start, end, isCombineNextParagraph, editAction);\n };\n //tslint:disable:max-line-length\n /**\n * @private\n */\n Editor.prototype.checkAndInsertBlock = function (block, start, end, editAction, previousParagraph) {\n if (block instanceof ParagraphWidget && block === start.paragraph || block instanceof TableWidget) {\n var newParagraph = void 0; //Adds an empty paragraph, to ensure minimal content.\n if (isNullOrUndefined(block.nextWidget) && (isNullOrUndefined(previousParagraph) || previousParagraph.nextRenderedWidget instanceof TableWidget)) {\n newParagraph = new ParagraphWidget();\n if (editAction === 1 && block instanceof ParagraphWidget) {\n newParagraph.characterFormat.copyFormat(block.characterFormat);\n newParagraph.paragraphFormat.copyFormat(block.paragraphFormat);\n }\n newParagraph.index = block.index + 1;\n newParagraph.containerWidget = block.containerWidget;\n this.viewer.layout.layoutBodyWidgetCollection(newParagraph.index, newParagraph.bodyWidget, newParagraph, false);\n if (block.containerWidget instanceof Widget) {\n block.containerWidget.childWidgets.push(newParagraph);\n }\n }\n return newParagraph;\n }\n return undefined;\n };\n // tslint:disable-next-line:max-line-length\n Editor.prototype.splitParagraph = function (paragraphAdv, startLine, startOffset, endLine, endOffset, removeBlock) {\n var paragraph = new ParagraphWidget();\n paragraph.paragraphFormat = new WParagraphFormat(paragraph);\n paragraph.characterFormat = new WCharacterFormat(paragraph);\n paragraph.paragraphFormat.copyFormat(paragraphAdv.paragraphFormat);\n paragraph.characterFormat.copyFormat(paragraphAdv.characterFormat);\n var lineWidget = new LineWidget(paragraph);\n paragraph.childWidgets.push(lineWidget);\n var blockIndex = paragraphAdv.index;\n var insertIndex = paragraphAdv.indexInOwner;\n this.moveInlines(paragraphAdv, paragraph, 0, startOffset, startLine, endOffset, endLine);\n //Inserts new paragraph in the current text position.\n paragraphAdv.containerWidget.childWidgets.splice(insertIndex, 0, paragraph);\n paragraph.index = blockIndex;\n paragraph.containerWidget = paragraphAdv.containerWidget;\n this.updateNextBlocksIndex(paragraph, true);\n if (removeBlock) {\n this.removeBlock(paragraphAdv);\n }\n // tslint:disable-next-line:max-line-length\n this.viewer.layout.layoutBodyWidgetCollection(blockIndex, paragraph.containerWidget, paragraph, false);\n return paragraph;\n };\n /**\n * @private\n */\n Editor.prototype.removeBlock = function (block) {\n var index;\n var blockCollection;\n var containerWidget;\n this.removeField(block);\n if (block.isInsideTable) {\n containerWidget = block.associatedCell;\n index = block.associatedCell.childWidgets.indexOf(block);\n blockCollection = block.associatedCell.childWidgets;\n this.updateNextBlocksIndex(block, false);\n block.associatedCell.childWidgets.splice(index, 1);\n block.containerWidget = undefined;\n this.viewer.layout.layoutBodyWidgetCollection(block.index, containerWidget, block, false);\n }\n else {\n containerWidget = block.containerWidget;\n index = containerWidget.childWidgets.indexOf(block);\n blockCollection = containerWidget.childWidgets;\n this.updateNextBlocksIndex(block, false);\n containerWidget.childWidgets.splice(index, 1);\n block.containerWidget = undefined;\n containerWidget.height -= block.height;\n this.viewer.layout.layoutBodyWidgetCollection(block.index, containerWidget, block, false);\n }\n };\n Editor.prototype.removeField = function (block) {\n for (var i = 0; i < this.viewer.fields.length; i++) {\n var field = this.viewer.fields[i];\n if (field.line.paragraph === block) {\n this.viewer.fields.splice(i, 1);\n i--;\n }\n }\n };\n Editor.prototype.addRemovedNodes = function (node) {\n if (node instanceof FieldElementBox && node.fieldType === 0) {\n if (this.viewer.fields.indexOf(node) !== -1) {\n this.viewer.fields.splice(this.viewer.fields.indexOf(node), 1);\n }\n }\n if (this.editorHistory && !isNullOrUndefined(this.editorHistory.currentBaseHistoryInfo)) {\n this.editorHistory.currentBaseHistoryInfo.removedNodes.push(node);\n }\n else if (this.editHyperlinkInternal) {\n this.nodes.push(node);\n }\n };\n Editor.prototype.deleteBlock = function (block, selection, start, end, editAction) {\n if (block instanceof ParagraphWidget) {\n this.deletePara(block, start, end, editAction);\n }\n else {\n this.deleteTableBlock(block, selection, start, end, editAction);\n }\n };\n // tslint:disable-next-line:max-line-length\n Editor.prototype.deleteTableCell = function (cellAdv, selection, start, end, editAction) {\n var deletePreviousBlock = !(start.paragraph.isInsideTable && cellAdv.ownerTable.contains(start.paragraph.associatedCell));\n var previousBlock = cellAdv.ownerTable.previousRenderedWidget;\n if (start.paragraph.isInsideTable) {\n var containerCell = selection.getContainerCellOf(cellAdv, start.paragraph.associatedCell);\n if (containerCell.ownerTable.contains(start.paragraph.associatedCell)) {\n var startCell = selection.getSelectedCell(cellAdv, containerCell);\n var endCell = selection.getSelectedCell(start.paragraph.associatedCell, containerCell);\n if (selection.containsCell(containerCell, start.paragraph.associatedCell)) {\n //Selection end is in container cell.\n if (selection.isCellSelected(containerCell, start, end)) {\n //Container cell is completely selected.\n this.updateEditPosition(containerCell, selection);\n if (editAction === 1) {\n //Specifically handled for backspace. Delete selected cell in current table.\n this.deleteCellsInTable(cellAdv.ownerRow.ownerTable, selection, start, end, editAction);\n }\n else {\n //Delete contents within table cell or Copy contents within table cell to clipboard.\n var isCellCleared = this.deleteCell(containerCell, selection, editAction, true);\n if (!isCellCleared && editAction !== 2 && this.editorHistory) {\n this.editorHistory.currentBaseHistoryInfo = undefined;\n }\n }\n }\n else {\n if (startCell === containerCell) {\n this.deletePara(end.paragraph, start, end, editAction);\n }\n else {\n this.deleteContainer(startCell, selection, start, end, editAction);\n }\n }\n }\n else {\n if (editAction === 2) {\n //Delete contents within table cell.\n this.deleteCell(cellAdv, selection, 2, false);\n }\n else {\n //Delete other selected cells in current table.\n this.deleteCellsInTable(containerCell.ownerTable, selection, start, end, editAction);\n }\n }\n }\n else {\n //Selection end is different table.\n this.deleteContainer(containerCell, selection, start, end, editAction);\n }\n }\n else {\n //Selection end is outside table.\n var cell = selection.getContainerCell(cellAdv);\n this.deleteContainer(cell, selection, start, end, editAction);\n }\n if (deletePreviousBlock) {\n var sectionAdv = previousBlock.bodyWidget instanceof BodyWidget ? previousBlock.bodyWidget : undefined;\n // this.deleteContent(cellAdv.ownerTable, selection, editAction);\n if (!isNullOrUndefined(previousBlock)) {\n // let nextSection: WSection = blockAdv.section instanceof WSection ? blockAdv.section as WSection : undefined;\n // if (sectionAdv !== nextSection) {\n // this.deleteSection(selection, sectionAdv, nextSection, editAction);\n // }\n //Goto the next block.\n this.deleteBlock(previousBlock, selection, start, end, editAction);\n }\n }\n };\n // tslint:disable-next-line:max-line-length\n Editor.prototype.deleteCellsInTable = function (table, selection, start, end, editAction) {\n var clonedTable = undefined;\n var isDeleteCells = false;\n var action = 'Delete';\n var startCell = start.paragraph.associatedCell;\n var endCell = end.paragraph.associatedCell;\n if (this.editorHistory && !isNullOrUndefined(this.editorHistory.currentBaseHistoryInfo)) {\n action = this.editorHistory.currentBaseHistoryInfo.action;\n //tslint:disable-next-line:max-line-length\n isDeleteCells = this.editorHistory.currentBaseHistoryInfo.action === 'BackSpace' || this.editorHistory.currentBaseHistoryInfo.action === 'DeleteCells'\n || this.editorHistory.currentBaseHistoryInfo.action === 'InsertTable' || (isNullOrUndefined(startCell.ownerRow.previousWidget)\n && isNullOrUndefined(endCell.ownerRow.nextWidget) && this.editorHistory.currentBaseHistoryInfo.action === 'Cut');\n this.editorHistory.currentBaseHistoryInfo.action = isDeleteCells ? 'DeleteCells' : 'ClearCells';\n clonedTable = this.cloneTableToHistoryInfo(table);\n selection.owner.isLayoutEnabled = false;\n }\n var startColumnIndex = startCell.columnIndex;\n var endColumnIndex = endCell.columnIndex + endCell.cellFormat.columnSpan - 1;\n var startRowIndex = startCell.rowIndex;\n var endRowIndex = endCell.rowIndex;\n var cells = [];\n var isStarted = false;\n var isCellCleared = false;\n for (var i = 0; i < table.childWidgets.length; i++) {\n var row = table.childWidgets[i];\n if (row.index >= startRowIndex && row.index <= endRowIndex) {\n for (var j = 0; j < row.childWidgets.length; j++) {\n var cell = row.childWidgets[j];\n if (cell.columnIndex >= startColumnIndex && cell.columnIndex <= endColumnIndex) {\n if (!isStarted) {\n this.updateEditPosition(cell, selection);\n isStarted = true;\n }\n if (isDeleteCells) {\n //Specific for Backspace and Cut if selection includes all rows.\n var cell_1 = row.childWidgets[j];\n this.updateNextBlocksIndex(cell_1, false);\n row.childWidgets.splice(j, 1);\n j--;\n }\n else if (editAction < 4) {\n isCellCleared = this.deleteCell(cell, selection, editAction, false);\n }\n }\n }\n if (row.childWidgets.length === 0) {\n this.updateNextBlocksIndex(table.childWidgets[i], false);\n table.childWidgets.splice(i, 1);\n i--;\n endRowIndex--;\n }\n }\n }\n //Layouts the table after delete cells.\n selection.owner.isLayoutEnabled = true;\n if (table.childWidgets.length === 0) {\n selection.editPosition = this.getHierarchicalIndex(table, '0');\n this.setActionInternal(selection, action);\n this.removeBlock(table);\n }\n else {\n // Before lay outing need to update table grid.\n table.isGridUpdated = false;\n table.buildTableColumns();\n table.isGridUpdated = true;\n this.viewer.layout.reLayoutTable(table);\n }\n };\n Editor.prototype.deleteCell = function (cell, selection, editAction, copyChildToClipboard) {\n //Checks whether this is last paragraph of owner textbody.\n var block = cell.childWidgets[0];\n if (cell.childWidgets.length === 1 && block instanceof ParagraphWidget && block.isEmpty()) {\n return false;\n }\n for (var i = 0; i < cell.childWidgets.length; i++) {\n block = cell.childWidgets[i];\n if (editAction < 4) {\n //Checks whether this is last paragraph of owner textbody.\n if (block instanceof ParagraphWidget && cell.childWidgets.length === 1) {\n //Preserves empty paragraph, to ensure minimal content.\n var paragraph = block;\n //Removes all the inlines in the paragraph.\n for (var j = 0; j < paragraph.childWidgets.length; j++) {\n var inline = paragraph.childWidgets[j];\n for (var k = 0; k < inline.children.length; k++) {\n var element = inline.children[k];\n this.unLinkFieldCharacter(element);\n inline.children.splice(k, 1);\n // this.layoutInlineCollection(true, paragraph.inlines.indexOf(inline), paragraph.inlines, inline);\n k--;\n if (this.checkClearCells(selection)) {\n this.addRemovedNodes(element);\n }\n }\n if (paragraph.childWidgets.length > 1) {\n paragraph.childWidgets.splice(j, 1);\n j--;\n }\n }\n if (this.checkClearCells(selection)) {\n //Add Index for line Widget\n selection.editPosition = this.getHierarchicalIndex(paragraph, '0');\n this.updateHistoryPosition(selection.editPosition, true);\n }\n break;\n }\n this.removeBlock(block);\n i--;\n if (this.checkClearCells(selection)) {\n this.addRemovedNodes(block);\n }\n }\n }\n return true;\n };\n Editor.prototype.deleteContainer = function (cell, selection, start, end, editAction) {\n var ownerTable = cell.ownerTable;\n if (selection.containsRow(ownerTable.lastChild, end.paragraph.associatedCell)) {\n this.deleteContent(ownerTable, selection, editAction);\n }\n else {\n for (var i = 0; i < ownerTable.childWidgets.length; i++) {\n var row = ownerTable.childWidgets[i];\n if (editAction < 4) {\n this.updateNextBlocksIndex(row, false);\n ownerTable.childWidgets.splice(i, 1);\n this.addRemovedNodes(row);\n i--;\n }\n if (end.paragraph.isInsideTable && selection.containsRow(row, end.paragraph.associatedCell)) {\n this.viewer.layout.reLayoutTable(ownerTable);\n return;\n }\n }\n }\n };\n Editor.prototype.deleteTableBlock = function (table, selection, start, end, editAction) {\n table = table.combineWidget(this.viewer);\n if (start.paragraph.isInsideTable && table.contains(start.paragraph.associatedCell)) {\n var block = table.previousRenderedWidget;\n // tslint:disable-next-line:max-line-length\n var previousBlock = this.checkAndInsertBlock(table, start, end, editAction, block instanceof ParagraphWidget ? block : undefined);\n if (selection.containsRow(table.firstChild, start.paragraph.associatedCell)) {\n this.deleteContent(table, selection, editAction);\n }\n else {\n var newTable = this.splitTable(table, start.paragraph.associatedCell.ownerRow);\n this.deleteContent(table, selection, editAction);\n this.viewer.layout.layoutBodyWidgetCollection(newTable.index, newTable.containerWidget, newTable, false);\n }\n if (!isNullOrUndefined(previousBlock)) {\n selection.editPosition = this.getHierarchicalIndex(previousBlock, '0');\n if (this.editorHistory && !isNullOrUndefined(this.editorHistory.currentBaseHistoryInfo)) {\n this.editorHistory.currentBaseHistoryInfo.endPosition = selection.editPosition;\n }\n }\n }\n else {\n var blockAdv = table.previousRenderedWidget;\n var sectionAdv = table.bodyWidget instanceof BodyWidget ? table.bodyWidget : undefined;\n this.deleteContent(table, selection, editAction);\n if (!isNullOrUndefined(blockAdv)) {\n // let nextSection: WSection = blockAdv.section instanceof WSection ? blockAdv.section as WSection : undefined;\n // if (sectionAdv !== nextSection) {\n // this.deleteSection(selection, sectionAdv, nextSection, editAction);\n // }\n //Goto the next block.\n this.deleteBlock(blockAdv, selection, start, end, editAction);\n }\n }\n };\n Editor.prototype.splitTable = function (table, splitEndRow) {\n var newTable = new TableWidget();\n newTable.tableFormat.copyFormat(table.tableFormat);\n newTable.index = table.index;\n //Moves the rows to new table.\n for (var i = 0; i < table.childWidgets.length; i++) {\n var row = table.childWidgets[i];\n if (row === splitEndRow) {\n break;\n }\n newTable.childWidgets.push(row);\n row.containerWidget = newTable;\n table.childWidgets.splice(i, 1);\n i--;\n }\n //Inserts new table in the current text position.\n var insertIndex = table.getIndex();\n table.containerWidget.childWidgets.splice(insertIndex, 0, newTable);\n newTable.containerWidget = table.containerWidget;\n this.updateNextBlocksIndex(newTable, true);\n return newTable;\n };\n Editor.prototype.updateEditPosition = function (cell, selection) {\n var firstParagraph = selection.getFirstParagraphInCell(cell);\n selection.editPosition = this.getHierarchicalIndex(firstParagraph, '0');\n };\n /**\n * @private\n */\n Editor.prototype.deleteContent = function (table, selection, editAction) {\n if (editAction < 4) {\n this.removeBlock(table);\n this.addRemovedNodes(table);\n }\n };\n Editor.prototype.setActionInternal = function (selection, action) {\n if (this.viewer.owner.enableHistoryMode && !isNullOrUndefined(this.editorHistory.currentBaseHistoryInfo)) {\n this.editorHistory.currentBaseHistoryInfo.action = action;\n }\n };\n Editor.prototype.checkClearCells = function (selection) {\n // tslint:disable-next-line:max-line-length\n return this.editorHistory && this.editorHistory.currentBaseHistoryInfo && this.editorHistory.currentBaseHistoryInfo.action !== 'ClearCells';\n };\n Editor.prototype.isEndInAdjacentTable = function (paragraph, endParagraph) {\n var start = this.getHierarchicalIndex(paragraph, '');\n var end = this.getHierarchicalIndex(endParagraph, '');\n var selectionStart = start.split(';');\n var selectionEnd = end.split(';');\n return selectionStart.length < selectionEnd.length;\n };\n Editor.prototype.cloneTableToHistoryInfo = function (table) {\n if (this.editorHistory && !isNullOrUndefined(this.editorHistory.currentBaseHistoryInfo)) {\n //Clones the entire table to preserve in history.\n var clonedTable = table.clone();\n //Preserves the cloned table in history info, for future undo operation.\n this.editorHistory.currentBaseHistoryInfo.removedNodes.push(clonedTable);\n //Sets the insert position in history info as current table.\n if (this.viewer.selection.start.paragraph.isInsideTable &&\n this.viewer.selection.start.paragraph.associatedCell.ownerTable === table) {\n this.updateHistoryPosition(this.getHierarchicalIndex(table, '0'), true);\n }\n return clonedTable;\n }\n return undefined;\n };\n // tslint:disable-next-line:max-line-length\n Editor.prototype.insertParagraphPaste = function (paragraph, currentParagraph, start, end, isCombineNextParagraph, editAction) {\n if (this.editorHistory && (this.editorHistory.isUndoing || this.editorHistory.isRedoing) && this.editorHistory.currentBaseHistoryInfo.action === 'Paste') {\n var nextParagraph = this.selection.getNextParagraphBlock(currentParagraph);\n if (nextParagraph) {\n if (start.offset > 0 && nextParagraph === end.paragraph && paragraph === start.paragraph\n && this.editorHistory.currentBaseHistoryInfo.action === 'Paste') {\n //Combines the current paragraph with end paragraph specific for undo/redo paste action.\n var insertIndex = 0;\n this.removeBlock(currentParagraph);\n this.viewer.layout.clearListElementBox(nextParagraph);\n this.viewer.layout.clearListElementBox(currentParagraph);\n for (var i = 0; i < currentParagraph.childWidgets.length; i++) {\n var line = currentParagraph.childWidgets[i];\n nextParagraph.childWidgets.splice(insertIndex, 0, line);\n currentParagraph.childWidgets.splice(i, 1);\n i--;\n insertIndex++;\n line.paragraph = nextParagraph;\n }\n this.viewer.layout.reLayoutParagraph(nextParagraph, 0, 0);\n isCombineNextParagraph = false;\n var offset = this.selection.editPosition.substring(this.selection.editPosition.lastIndexOf(';') + 1);\n this.selection.editPosition = this.getHierarchicalIndex(nextParagraph, offset);\n }\n }\n }\n if (isCombineNextParagraph) {\n this.deleteParagraphMark(currentParagraph, this.selection, editAction);\n }\n };\n // tslint:disable-next-line:max-line-length\n Editor.prototype.removeInlines = function (paragraph, startLine, startOffset, endLine, endOffset, editAction) {\n var isRemoved = false;\n this.viewer.layout.clearListElementBox(paragraph);\n var startIndex = paragraph.childWidgets.indexOf(startLine);\n for (var i = paragraph.childWidgets.length - 1; i >= 0; i--) {\n var lineWidget = paragraph.childWidgets[i];\n if (startLine === lineWidget && endLine === lineWidget) {\n this.removeContent(lineWidget, startOffset, endOffset);\n isRemoved = true;\n break;\n }\n if (endLine === lineWidget) {\n isRemoved = true;\n this.removeContent(lineWidget, 0, endOffset);\n }\n else if (startLine === lineWidget) {\n this.removeContent(lineWidget, startOffset, this.viewer.selection.getLineLength(lineWidget));\n break;\n }\n else if (isRemoved) {\n this.removeContent(lineWidget, 0, this.viewer.selection.getLineLength(lineWidget));\n }\n }\n if (isRemoved) {\n this.removeEmptyLine(paragraph);\n this.viewer.layout.reLayoutParagraph(paragraph, 0, 0);\n }\n };\n /**\n * @private\n */\n Editor.prototype.removeContent = function (lineWidget, startOffset, endOffset) {\n var count = this.selection.getLineLength(lineWidget);\n for (var i = lineWidget.children.length - 1; i >= 0; i--) {\n var inline = lineWidget.children[i];\n if (endOffset <= count - inline.length) {\n count -= inline.length;\n continue;\n }\n var endIndex = inline.length;\n if (count > endOffset && (count - endIndex < endOffset)) {\n endIndex = endOffset - (count - inline.length);\n }\n var startIndex = 0;\n if (count - inline.length < startOffset) {\n startIndex = startOffset - (count - inline.length);\n }\n if (count > endOffset) {\n count -= (inline.length - endIndex);\n }\n if (startIndex === 0 && endIndex === inline.length) {\n if (!(this.editorHistory && (this.editorHistory.isUndoing || this.editorHistory.isRedoing))) {\n if (inline instanceof BookmarkElementBox) {\n this.removedBookmarkElements.push(inline);\n }\n }\n // if (editAction < 4) {\n this.unLinkFieldCharacter(inline);\n this.addRemovedNodes(lineWidget.children[i]);\n lineWidget.children.splice(i, 1);\n // }\n }\n else if (inline instanceof TextElementBox) {\n // if (editAction < 4) {\n var span = new TextElementBox();\n span.characterFormat.copyFormat(inline.characterFormat);\n span.text = inline.text.substr(startIndex, endIndex - startIndex);\n this.addRemovedNodes(span);\n inline.text = inline.text.slice(0, startIndex) + inline.text.slice(endIndex);\n }\n if (startOffset >= count - (endIndex - startIndex)) {\n break;\n }\n count -= (endIndex - startIndex);\n }\n };\n /**\n * @private\n */\n Editor.prototype.removeEmptyLine = function (paragraph) {\n if (paragraph.childWidgets.length > 1) {\n for (var i = 0; i < paragraph.childWidgets.length; i++) {\n var lineWidget = paragraph.childWidgets[i];\n if (lineWidget.children.length === 0 && paragraph.childWidgets.length > 1) {\n paragraph.childWidgets.splice(i, 1);\n i--;\n }\n }\n }\n };\n //#endregion\n /**\n * clone the list level\n * @param {WListLevel} source\n * @private\n */\n Editor.prototype.cloneListLevel = function (source) {\n var listLevel = new WListLevel(undefined);\n this.copyListLevel(listLevel, source);\n return listLevel;\n };\n /**\n * Copies the list level\n * @param {WListLevel} destination\n * @param {WListLevel} listLevel\n * @private\n */\n Editor.prototype.copyListLevel = function (destination, listLevel) {\n if (!isNullOrUndefined(listLevel.paragraphFormat)) {\n destination.paragraphFormat = new WParagraphFormat(destination);\n destination.paragraphFormat.copyFormat(listLevel.paragraphFormat);\n }\n if (!isNullOrUndefined(listLevel.characterFormat)) {\n destination.characterFormat = new WCharacterFormat(destination);\n destination.characterFormat.copyFormat(listLevel.characterFormat);\n }\n if (!isNullOrUndefined(listLevel.followCharacter)) {\n destination.followCharacter = listLevel.followCharacter;\n }\n if (!isNullOrUndefined(listLevel.listLevelPattern)) {\n destination.listLevelPattern = listLevel.listLevelPattern;\n }\n if (!isNullOrUndefined(listLevel.numberFormat)) {\n destination.numberFormat = listLevel.numberFormat;\n }\n if (!isNullOrUndefined(listLevel.restartLevel)) {\n destination.restartLevel = listLevel.restartLevel;\n }\n if (!isNullOrUndefined(listLevel.startAt)) {\n destination.startAt = listLevel.startAt;\n }\n };\n /**\n * Clone level override\n * @param {WLevelOverride} source\n * @private\n */\n Editor.prototype.cloneLevelOverride = function (source) {\n var levelOverride = new WLevelOverride();\n if (!isNullOrUndefined(source.startAt)) {\n levelOverride.startAt = source.startAt;\n }\n if (!isNullOrUndefined(source.overrideListLevel)) {\n levelOverride.overrideListLevel = source.overrideListLevel;\n }\n if (!isNullOrUndefined(source.levelNumber)) {\n levelOverride.levelNumber = source.levelNumber;\n }\n return levelOverride;\n };\n /**\n * Update List Paragraph\n * @private\n */\n Editor.prototype.updateListParagraphs = function () {\n this.viewer.listParagraphs = [];\n for (var j = 0; j < this.viewer.pages.length; j++) {\n var bodyWidget = this.viewer.pages[j].bodyWidgets[0];\n for (var i = 0; i < bodyWidget.childWidgets.length; i++) {\n this.updateListParagraphsInBlock(bodyWidget.childWidgets[i]);\n }\n }\n };\n /**\n * @private\n */\n Editor.prototype.updateListParagraphsInBlock = function (block) {\n if (block instanceof ParagraphWidget) {\n if (!isNullOrUndefined(block.paragraphFormat)\n && !isNullOrUndefined(block.paragraphFormat.listFormat)\n && !isNullOrUndefined(block.paragraphFormat.listFormat.listId)) {\n if (isNullOrUndefined(this.viewer.listParagraphs)) {\n this.viewer.listParagraphs = [];\n }\n this.viewer.listParagraphs.push(block);\n }\n }\n else if (block instanceof TableWidget) {\n for (var i = 0; i < block.childWidgets.length; i++) {\n for (var j = 0; j < block.childWidgets[i].childWidgets.length; j++) {\n var cell = block.childWidgets[i].childWidgets[j];\n for (var k = 0; k < cell.childWidgets.length; k++) {\n this.updateListParagraphsInBlock(cell.childWidgets[k]);\n }\n }\n }\n }\n };\n /**\n * Applies list format\n * @param {WList} list\n * @private\n */\n Editor.prototype.onApplyList = function (list) {\n var selection = this.viewer.selection;\n this.setOffsetValue(this.viewer.selection);\n this.initHistory('ListFormat');\n var format = new WListFormat();\n if (!isNullOrUndefined(list)) {\n format.listId = list.listId;\n }\n this.viewer.owner.isShiftingEnabled = true;\n if (selection.isEmpty) {\n this.applyParaFormatProperty(selection.start.paragraph, 'listFormat', format, false);\n this.layoutItemBlock(selection.start.paragraph, false);\n }\n else {\n this.updateSelectionParagraphFormatting('listFormat', format, false);\n }\n this.reLayout(selection);\n };\n /**\n * Applies bullets or numbering list\n * @param {string} format\n * @param {ListLevelPattern} listLevelPattern\n * @param {string} fontFamily\n * @private\n */\n Editor.prototype.applyBulletOrNumbering = function (format, listLevelPattern, fontFamily) {\n var selection = this.viewer.selection;\n var list = selection.paragraphFormat.getList();\n var isUpdate = false;\n var start = selection.start;\n if (!selection.isForward) {\n start = selection.end;\n }\n var currentParagraph = start.paragraph;\n if (isNullOrUndefined(list)) {\n while (!isNullOrUndefined(currentParagraph.previousWidget) && currentParagraph.previousWidget instanceof ParagraphWidget\n && currentParagraph.previousWidget.isEmpty() && currentParagraph.previousWidget.paragraphFormat.listFormat.listId === -1) {\n currentParagraph = currentParagraph.previousWidget;\n }\n if (currentParagraph.previousWidget && currentParagraph.previousWidget instanceof ParagraphWidget\n && currentParagraph.previousWidget.paragraphFormat.listFormat.listId !== -1) {\n currentParagraph = currentParagraph.previousWidget;\n list = this.viewer.getListById(currentParagraph.paragraphFormat.listFormat.listId);\n isUpdate = true;\n }\n }\n var startListLevel = undefined;\n if (!isNullOrUndefined(list)) {\n var tempList = this.viewer.getListById(currentParagraph.paragraphFormat.listFormat.listId);\n startListLevel = this.viewer.layout.getListLevel(tempList, currentParagraph.paragraphFormat.listFormat.listLevelNumber);\n }\n if (isNullOrUndefined(list) || (!isNullOrUndefined(list) && ((startListLevel.listLevelPattern !== listLevelPattern) ||\n startListLevel.numberFormat !== format || (startListLevel.characterFormat.fontFamily !== fontFamily\n && startListLevel.listLevelPattern === 'Bullet')))) {\n isUpdate = false;\n list = new WList();\n if (this.viewer.lists.length > 0) {\n list.listId = this.viewer.lists[this.viewer.lists.length - 1].listId + 1;\n }\n else {\n list.listId = 0;\n }\n var abstractList = new WAbstractList();\n if (this.viewer.abstractLists.length > 0) {\n abstractList.abstractListId = this.viewer.abstractLists[this.viewer.abstractLists.length - 1].abstractListId + 1;\n }\n else {\n abstractList.abstractListId = 0;\n }\n list.abstractListId = abstractList.abstractListId;\n this.viewer.abstractLists.push(abstractList);\n if (format === 'bullet' || format === 'multiLevel' || format === 'numbering') {\n this.addListLevels(abstractList, format, selection);\n }\n else {\n var listLevel = new WListLevel(abstractList);\n listLevel.listLevelPattern = listLevelPattern;\n listLevel.numberFormat = format;\n if (listLevelPattern !== 'Bullet') {\n listLevel.startAt = 1;\n }\n else {\n listLevel.characterFormat.fontFamily = fontFamily;\n }\n listLevel.paragraphFormat.leftIndent = 36;\n listLevel.paragraphFormat.firstLineIndent = -18;\n abstractList.levels.push(listLevel);\n selection.paragraphFormat.listLevelNumber = 0;\n }\n selection.paragraphFormat.setList(list);\n }\n else if (!isNullOrUndefined(list) && isUpdate) {\n selection.paragraphFormat.setList(list);\n }\n else {\n selection.paragraphFormat.setList(undefined);\n }\n };\n Editor.prototype.addListLevels = function (abstractListAdv, listName, selection) {\n var bulletCharacters = ['\\uf076', '\\uf0d8', '\\uf0a7', '\\uf0b7', '\\uf0a8'];\n for (var i = abstractListAdv.levels.length; i < 9; i++) {\n var listLevel = new WListLevel(abstractListAdv);\n if (listName.match('bullet')) {\n listLevel.listLevelPattern = 'Bullet';\n listLevel.numberFormat = bulletCharacters[i < 5 ? i % 5 : i % 5 + 1];\n listLevel.characterFormat.fontFamily = i < 3 || i === 5 ? 'Wingdings' : 'Symbol';\n }\n else {\n if (listName.match('multiLevel')) {\n for (var j = 0; j < i + 1; j++) {\n listLevel.numberFormat += '%' + (j + 1).toString() + '.';\n }\n listLevel.listLevelPattern = 'Number';\n }\n else {\n listLevel.numberFormat = '%' + (i + 1).toString() + ')';\n listLevel.listLevelPattern = i % 3 === 0 ? 'Number'\n : i % 3 === 1 ? 'LowLetter' : 'LowRoman';\n }\n listLevel.startAt = 1;\n listLevel.restartLevel = i;\n }\n if (i === 0) {\n listLevel.paragraphFormat.leftIndent = 36;\n }\n else {\n listLevel.paragraphFormat.leftIndent = 36 * i;\n }\n listLevel.paragraphFormat.firstLineIndent = -18;\n abstractListAdv.levels.push(listLevel);\n selection.paragraphFormat.listLevelNumber = i;\n }\n };\n /**\n * @private\n */\n Editor.prototype.onEnter = function () {\n var selection = this.viewer.selection;\n if (selection.isEmpty) {\n //ToDo: Need to handle the CTRL + Enter (Page Break) and SHIFT + Enter (Line Break) behavior.\n var hyperlinkField = selection.getHyperlinkField();\n var isSelectionOnHyperlink = !isNullOrUndefined(hyperlinkField);\n if (isSelectionOnHyperlink) {\n selection.fireRequestNavigate(hyperlinkField);\n return;\n }\n var paragraph = selection.start.paragraph;\n if (paragraph.isEmpty() && paragraph.paragraphFormat.listFormat.listId !== -1) {\n // tslint:disable-next-line:max-line-length\n this.onApplyListInternal(this.viewer.getListById(paragraph.paragraphFormat.listFormat.listId), paragraph.paragraphFormat.listFormat.listLevelNumber - 1);\n return;\n }\n }\n this.initHistory('Enter');\n var isRemoved = true;\n this.selection.skipFormatRetrieval = true;\n if (!selection.isEmpty) {\n // this.initHistoryWithSelection(selection, 'Enter');\n isRemoved = this.removeSelectedContents(selection);\n }\n if (isRemoved) {\n selection.owner.isShiftingEnabled = true;\n this.updateInsertPosition();\n var blockInfo = this.getParagraphInfo(selection.start);\n var initialStart = this.getHierarchicalIndex(blockInfo.paragraph, blockInfo.offset.toString());\n this.splitParagraphInternal(selection, selection.start.paragraph, selection.start.currentWidget, selection.start.offset);\n this.setPositionForCurrentIndex(selection.start, initialStart);\n var nextNode = selection.start.paragraph.nextWidget;\n if (isNullOrUndefined(nextNode)) {\n nextNode = selection.getNextRenderedBlock(selection.start.paragraph);\n }\n selection.selectParagraph(nextNode, true);\n this.updateEndPosition();\n // if (!isNullOrUndefined(selection.currentHistoryInfo)) {\n // this.updateComplexHistory();\n // } else {\n this.reLayout(selection);\n // }\n var paragraph = selection.start.paragraph.previousWidget;\n if (!isNullOrUndefined(paragraph) && !paragraph.isEmpty() &&\n // tslint:disable-next-line:max-line-length\n paragraph.lastChild.children[paragraph.lastChild.children.length - 1] instanceof TextElementBox) {\n this.checkAndConvertToHyperlink(selection, true, paragraph);\n }\n }\n this.selection.skipFormatRetrieval = false;\n };\n Editor.prototype.splitParagraphInternal = function (selection, paragraphAdv, currentLine, offset) {\n var insertIndex = 0;\n var blockIndex = paragraphAdv.index;\n var paragraph = new ParagraphWidget();\n var lineWidget = new LineWidget(paragraph);\n paragraph.childWidgets.push(lineWidget);\n //Copies the format to new paragraph.\n paragraph.paragraphFormat.ownerBase = paragraph;\n if (currentLine === paragraphAdv.lastChild && offset === selection.getLineLength(currentLine)) {\n // tslint:disable-next-line:max-line-length\n if (paragraphAdv.paragraphFormat.baseStyle\n && paragraphAdv.paragraphFormat.baseStyle.name !== 'Normal' && paragraphAdv.paragraphFormat.baseStyle.next instanceof WParagraphStyle) {\n paragraph.paragraphFormat.baseStyle = paragraphAdv.paragraphFormat.baseStyle.next;\n if (paragraphAdv.paragraphFormat.baseStyle.name === 'List Paragraph') {\n paragraph.paragraphFormat.listFormat.copyFormat(paragraphAdv.paragraphFormat.listFormat);\n }\n this.selection.skipFormatRetrieval = false;\n }\n else {\n paragraph.paragraphFormat.copyFormat(paragraphAdv.paragraphFormat);\n paragraph.characterFormat.copyFormat(paragraphAdv.characterFormat);\n }\n //ToDo in future: Need to skip copying formattings to new paragraph, if the style for following paragraph is same style.\n insertIndex++;\n blockIndex++;\n }\n else {\n paragraph.paragraphFormat.copyFormat(paragraphAdv.paragraphFormat);\n paragraph.characterFormat.copyFormat(paragraphAdv.characterFormat);\n paragraphAdv = paragraphAdv.combineWidget(this.viewer);\n if (offset > 0 || !currentLine.isFirstLine()) {\n this.moveInlines(paragraphAdv, paragraph, 0, 0, paragraphAdv.firstChild, offset, currentLine);\n }\n var paragraphs = paragraphAdv.getSplitWidgets();\n paragraphAdv = paragraphs[0];\n }\n insertIndex += paragraphAdv.getIndex();\n var container = paragraphAdv.containerWidget;\n var childNodes = container.childWidgets;\n childNodes.splice(insertIndex, 0, paragraph);\n paragraph.containerWidget = container;\n paragraph.index = blockIndex;\n this.updateNextBlocksIndex(paragraph, true);\n // tslint:disable-next-line:max-line-length\n this.viewer.layout.layoutBodyWidgetCollection(blockIndex, container, paragraph, false);\n };\n /**\n * @private\n */\n Editor.prototype.updateNextBlocksIndex = function (block, increaseIndex) {\n var nextIndex = block.containerWidget.childWidgets.indexOf(block) + 1;\n if (block.containerWidget instanceof BodyWidget) {\n var currentSectionIndex = block.containerWidget.index;\n for (var j = this.viewer.pages.indexOf(block.containerWidget.page); j < this.viewer.pages.length; j++) {\n var page = this.viewer.pages[j];\n if (page.bodyWidgets[0].index === currentSectionIndex) {\n for (var k = nextIndex; k < page.bodyWidgets[0].childWidgets.length; k++) {\n var childWidget = page.bodyWidgets[0].childWidgets[k];\n this.updateIndex(childWidget, increaseIndex);\n }\n nextIndex = 0;\n }\n else {\n return;\n }\n }\n }\n else if (block.containerWidget instanceof TableCellWidget) {\n var cells = block.containerWidget.getSplitWidgets();\n var currentCellIndex = cells.indexOf(block.containerWidget);\n for (var x = currentCellIndex; x < cells.length; x++) {\n var blocks = cells[x].childWidgets;\n for (var y = nextIndex; y < blocks.length; y++) {\n this.updateIndex(blocks[y], increaseIndex);\n }\n currentCellIndex = 0;\n nextIndex = 0;\n }\n }\n else if (block.containerWidget instanceof TableRowWidget) {\n for (var i = nextIndex; i < block.containerWidget.childWidgets.length; i++) {\n var cell = block.containerWidget.childWidgets[i];\n if (cell.rowIndex === block.containerWidget.index) {\n this.updateIndex(cell, increaseIndex);\n }\n }\n }\n else if (block.containerWidget instanceof TableWidget) {\n for (var i = nextIndex; i < block.containerWidget.childWidgets.length; i++) {\n var row = block.containerWidget.childWidgets[i];\n this.updateIndex(row, increaseIndex);\n for (var j = 0; j < row.childWidgets.length; j++) {\n row.childWidgets[j].rowIndex = row.index;\n }\n }\n //update Row index of all the cell\n }\n else if (block.containerWidget instanceof HeaderFooterWidget) {\n for (var i = nextIndex; i < block.containerWidget.childWidgets.length; i++) {\n var nextBlock = block.containerWidget.childWidgets[i];\n this.updateIndex(nextBlock, increaseIndex);\n }\n }\n };\n Editor.prototype.updateIndex = function (widget, increment) {\n if (increment) {\n widget.index++;\n }\n else {\n widget.index--;\n }\n };\n Editor.prototype.updateEndPosition = function () {\n var selection = this.viewer.selection;\n if (this.editorHistory && !isNullOrUndefined(this.editorHistory.currentBaseHistoryInfo)) {\n this.updateHistoryPosition(selection.start, false);\n }\n };\n /**\n * @private\n */\n Editor.prototype.onBackSpace = function () {\n var selection = this.viewer.selection;\n if (selection.isEmpty) {\n this.singleBackspace(selection, false);\n }\n else {\n this.initHistory('BackSpace');\n var skipBackSpace = this.deleteSelectedContents(selection, true);\n if (this.editorHistory && this.editorHistory.currentBaseHistoryInfo) {\n if (skipBackSpace) {\n this.editorHistory.currentBaseHistoryInfo = undefined;\n }\n else {\n if (this.checkEndPosition(selection)) {\n this.updateHistoryPosition(selection.end, false);\n }\n this.reLayout(selection);\n }\n }\n }\n };\n /**\n * @private\n */\n Editor.prototype.insertRemoveBookMarkElements = function () {\n var isHandledComplexHistory = false;\n for (var i = 0; i < this.removedBookmarkElements.length; i++) {\n var bookMark = this.removedBookmarkElements[i];\n if (bookMark.bookmarkType === 0) {\n var bookMarkStart = bookMark;\n if (bookMarkStart && bookMarkStart.reference && this.removedBookmarkElements.indexOf(bookMarkStart.reference) !== -1) {\n var endIndex = this.removedBookmarkElements.indexOf(bookMarkStart.reference);\n var startIndex = this.removedBookmarkElements.indexOf(bookMarkStart);\n this.removedBookmarkElements.splice(endIndex, 1);\n this.removedBookmarkElements.splice(startIndex, 1);\n }\n else {\n this.initComplexHistory(this.editorHistory.currentBaseHistoryInfo.action);\n this.editorHistory.updateHistory();\n this.initInsertInline(bookMarkStart.clone());\n this.editorHistory.updateComplexHistory();\n isHandledComplexHistory = true;\n }\n }\n else {\n var bookMarkEnd = bookMark;\n if (bookMarkEnd && bookMarkEnd.reference && this.removedBookmarkElements.indexOf(bookMarkEnd.reference) !== -1) {\n var endIndex = this.removedBookmarkElements.indexOf(bookMarkEnd.reference);\n var startIndex = this.removedBookmarkElements.indexOf(bookMarkEnd);\n this.removedBookmarkElements.splice(endIndex, 1);\n this.removedBookmarkElements.splice(startIndex, 1);\n }\n else {\n this.initComplexHistory(this.editorHistory.currentBaseHistoryInfo.action);\n this.editorHistory.updateHistory();\n this.initInsertInline(bookMarkEnd.clone());\n this.editorHistory.updateComplexHistory();\n isHandledComplexHistory = true;\n }\n }\n }\n this.removedBookmarkElements = [];\n return isHandledComplexHistory;\n };\n /**\n * @private\n */\n Editor.prototype.deleteSelectedContents = function (selection, isBackSpace) {\n var skipBackSpace = this.deleteSelectedContentInternal(selection, isBackSpace, selection.start, selection.end);\n var textPosition = new TextPosition(selection.owner);\n var blockInfo = this.getParagraph({ index: selection.editPosition });\n var lineInfo = this.getLineInfo(blockInfo.paragraph, blockInfo.offset);\n textPosition.setPositionForLineWidget(lineInfo.line, lineInfo.offset);\n selection.selectContent(textPosition, true);\n return skipBackSpace;\n };\n /**\n * @private\n */\n Editor.prototype.singleBackspace = function (selection, isRedoing) {\n var history = this.editorHistory;\n // If backspace is pressed after auto format to hyperlink is done, need to undo auto format.\n if (history && !isRedoing && !history.canRedo() && history.canUndo()) {\n var historyInfo = history.undoStack[history.undoStack.length - 1];\n var startBlockInfo = this.getParagraphInfo(selection.start);\n var endBlockInfo = this.getParagraphInfo(selection.end);\n // tslint:disable-next-line:max-line-length\n if (historyInfo.action === 'AutoFormatHyperlink' && historyInfo.insertPosition === this.getHierarchicalIndex(startBlockInfo.paragraph, startBlockInfo.offset.toString()) &&\n historyInfo.endPosition === this.getHierarchicalIndex(endBlockInfo.paragraph, endBlockInfo.offset.toString())) {\n history.undo();\n return;\n }\n }\n var paragraph = selection.start.paragraph;\n var currentLineWidget = selection.start.currentWidget;\n var offset = selection.start.offset;\n var indexInInline = 0;\n var inlineObj = currentLineWidget.getInline(offset, indexInInline);\n var inline = inlineObj.element;\n indexInInline = inlineObj.index;\n var previousInline = inline;\n if (inline instanceof FieldElementBox && inline.fieldType === 2) {\n if (HelperMethods.isLinkedFieldCharacter(inline)) {\n var begin = inline.fieldBegin;\n var end = inline.fieldEnd;\n selection.start.setPositionParagraph(begin.line, begin.line.getOffset(begin, 0));\n selection.end.setPositionParagraph(end.line, end.line.getOffset(end, 0) + 1);\n selection.fireSelectionChanged(true);\n return;\n }\n }\n if (inline instanceof FieldElementBox && inline.fieldType === 1) {\n var prevInline = selection.getPreviousValidElement(inline);\n if (prevInline instanceof FieldElementBox) {\n inline = prevInline.fieldBegin;\n paragraph = inline.line.paragraph;\n offset = inline.line.getOffset(inline, 0);\n selection.end.setPositionParagraph(inline.line, offset); //Selects the entire field.\n selection.fireSelectionChanged(true);\n return;\n }\n else if (prevInline !== inline) {\n inline = prevInline; //Updates the offset to delete next content.\n paragraph = inline.line.paragraph;\n offset = inline.line.getOffset(inline, inline.length);\n }\n }\n if (inline && (inline instanceof BookmarkElementBox && inline.bookmarkType === 1\n || inline.previousNode instanceof BookmarkElementBox)) {\n if (inline instanceof BookmarkElementBox) {\n inline = inline.previousNode;\n paragraph = inline.line.paragraph;\n offset = inline.line.getOffset(inline, inline.length);\n }\n if (inline.length === 1 && inline.nextNode instanceof BookmarkElementBox && inline.previousNode instanceof BookmarkElementBox) {\n var begin = inline.previousNode;\n var end = inline.nextNode;\n selection.start.setPositionParagraph(begin.line, begin.line.getOffset(begin, 0));\n selection.end.setPositionParagraph(end.line, end.line.getOffset(end, 0) + 1);\n this.initHistory('BackSpace');\n this.deleteSelectedContents(selection, true);\n if (this.checkEndPosition(selection)) {\n this.updateHistoryPosition(selection.end, false);\n }\n this.reLayout(selection);\n return;\n }\n }\n if (!isRedoing) {\n this.initHistory('BackSpace');\n }\n if (offset === selection.getStartOffset(paragraph) && selection.start.currentWidget.isFirstLine()) {\n if (paragraph.paragraphFormat.listFormat && paragraph.paragraphFormat.listFormat.listId !== -1) {\n this.onApplyList(undefined);\n return;\n }\n if (paragraph.paragraphFormat.firstLineIndent !== 0) {\n this.onApplyParagraphFormat('firstLineIndent', 0, false, false);\n return;\n }\n if (paragraph.paragraphFormat.leftIndent !== 0) {\n this.onApplyParagraphFormat('leftIndent', 0, false, false);\n return;\n }\n if (paragraph.paragraphFormat.textAlignment !== 'Left') {\n this.onApplyParagraphFormat('textAlignment', 'Left', false, true);\n return;\n }\n if (paragraph.previousRenderedWidget instanceof ParagraphWidget) {\n selection.owner.isShiftingEnabled = true;\n var previousParagraph = paragraph.previousRenderedWidget;\n // if (isNullOrUndefined(previousParagraph)) {\n // previousParagraph = this.viewer.selection.getPreviousBlock(paragraph) as ParagraphWidget;\n // }\n if (previousParagraph.isEmpty()) {\n this.removeBlock(previousParagraph);\n this.addRemovedNodes(previousParagraph);\n }\n else {\n this.removeBlock(paragraph);\n var endOffset = this.viewer.selection.getLineLength(previousParagraph.lastChild);\n var previousIndex = previousParagraph.childWidgets.length - 1;\n var lineWidget = void 0;\n if (!paragraph.isEmpty()) {\n for (var i = 0; i < paragraph.childWidgets.length; i++) {\n lineWidget = paragraph.childWidgets[i];\n previousParagraph.childWidgets.push(lineWidget);\n paragraph.childWidgets.splice(i, 1);\n i--;\n lineWidget.paragraph = previousParagraph;\n }\n }\n this.viewer.layout.reLayoutParagraph(previousParagraph, previousIndex, 0);\n selection.selects(previousParagraph.childWidgets[previousIndex], endOffset, true);\n this.addRemovedNodes(paragraph);\n }\n this.setPositionForHistory();\n // if (!isRedoing) {\n this.reLayout(selection);\n // }\n }\n else {\n if (this.editorHistory) {\n this.editorHistory.currentBaseHistoryInfo = undefined;\n }\n }\n }\n else {\n if (!isRedoing) {\n selection.owner.isShiftingEnabled = true;\n }\n var paragraphInfo = this.getParagraphInfo(selection.start);\n var lineWidget = selection.start.currentWidget;\n var removeOffset = offset - 1;\n if (removeOffset < 0) {\n lineWidget = lineWidget.previousLine;\n removeOffset = this.viewer.selection.getLineLength(lineWidget) + removeOffset;\n }\n this.removeAtOffset(lineWidget, selection, removeOffset);\n this.setPositionParagraph(paragraphInfo.paragraph, paragraphInfo.offset - 1, false);\n this.setPositionForHistory();\n if (!isRedoing) {\n this.reLayout(selection);\n }\n else {\n this.fireContentChange();\n }\n }\n };\n Editor.prototype.setPositionForHistory = function (editPosition) {\n var selection = this.viewer.selection;\n if (this.editorHistory && !isNullOrUndefined(this.editorHistory.currentBaseHistoryInfo)) {\n if (isNullOrUndefined(editPosition)) {\n this.updateHistoryPosition(selection.start, true);\n this.editorHistory.currentBaseHistoryInfo.endPosition = this.editorHistory.currentBaseHistoryInfo.insertPosition;\n }\n else {\n this.editorHistory.currentBaseHistoryInfo.insertPosition = editPosition;\n this.editorHistory.currentBaseHistoryInfo.endPosition = editPosition;\n }\n }\n };\n Editor.prototype.removeAtOffset = function (lineWidget, selection, offset) {\n var count = 0;\n var lineIndex = lineWidget.paragraph.childWidgets.indexOf(lineWidget);\n for (var i = 0; i < lineWidget.children.length; i++) {\n var inline = lineWidget.children[i];\n if (inline instanceof ListTextElementBox) {\n continue;\n }\n if (offset < count + inline.length) {\n var indexInInline = offset - count;\n if (offset === count && inline.length === 1) {\n this.unLinkFieldCharacter(inline);\n lineWidget.children.splice(i, 1);\n this.viewer.layout.reLayoutParagraph(lineWidget.paragraph, lineIndex, i);\n this.addRemovedNodes(inline);\n }\n else {\n var span = new TextElementBox();\n span.characterFormat.copyFormat(inline.characterFormat);\n span.text = inline.text.substr(indexInInline, 1);\n inline.text = HelperMethods.remove(inline.text, indexInInline, 1);\n this.viewer.layout.reLayoutParagraph(lineWidget.paragraph, lineIndex, i);\n this.addRemovedNodes(span);\n }\n break;\n }\n count += inline.length;\n }\n };\n /**\n * @private\n */\n Editor.prototype.onDelete = function () {\n var selection = this.viewer.selection;\n if (selection.isEmpty) {\n this.singleDelete(selection, false);\n }\n else {\n // this.initComplexHistory('MultiSelection');\n // for (let i: number = 0; i < selection.selectionRanges.length; i++) {\n // let selectionRange: SelectionRange = selection.selectionRanges.getRange(i);\n this.initHistory('Delete');\n this.deleteSelectedContentInternal(selection, false, selection.start, selection.end);\n var textPosition = new TextPosition(selection.owner);\n this.setPositionForCurrentIndex(textPosition, selection.editPosition);\n selection.selectContent(textPosition, true);\n // if (this.viewer.owner.enableEditorHistory) {\n this.reLayout(selection);\n // }\n // this.updateSelectionRangeOffSet(selection.start, selection.end);\n // }\n // let textPosition: TextPosition = new TextPosition(selection.owner, this.viewer);\n // this.setPositionForCurrentIndex(textPosition,selection.editPosition);\n // selection.selectContent(textPosition, true);\n // if (!isNullOrUndefined(selection.currentHistoryInfo)) {\n // this.updateComplexHistory();\n // } else {\n // this.updateComplexWithoutHistory();\n // }\n }\n };\n /**\n * Remove single character on right of cursor position\n * @param {Selection} selection\n * @param {boolean} isRedoing\n * @private\n */\n Editor.prototype.singleDelete = function (selection, isRedoing) {\n // tslint:disable-next-line:max-line-length\n var paragraph = selection.start.paragraph;\n var offset = selection.start.offset;\n var indexInInline = 0;\n var inlineObj = paragraph.getInline(selection.start.offset, indexInInline);\n var inline = inlineObj.element;\n indexInInline = inlineObj.index;\n if (paragraph.paragraphFormat.listFormat && paragraph.paragraphFormat.listFormat.listId !== -1 &&\n this.viewer.isListTextSelected && selection.contextType === 'List') {\n this.onApplyList(undefined);\n return;\n }\n if (!isNullOrUndefined(inline) && indexInInline === inline.length && !isNullOrUndefined(inline.nextNode)) {\n inline = inline.nextNode;\n indexInInline = 0;\n }\n if (!isNullOrUndefined(inline)) {\n var nextRenderedInline = undefined;\n var nextInline = selection.getNextValidElement(inline);\n if (nextInline instanceof ElementBox) {\n nextRenderedInline = nextInline;\n }\n if (!isNullOrUndefined(nextRenderedInline) && nextRenderedInline instanceof FieldElementBox\n && nextRenderedInline.fieldType === 0) {\n inline = nextRenderedInline.fieldEnd;\n paragraph = inline.line.paragraph;\n offset = inline.line.getOffset(inline, 1);\n selection.end.setPositionParagraph(inline.line, offset);\n selection.fireSelectionChanged(true);\n return;\n }\n else if (inline !== nextRenderedInline) {\n inline = nextRenderedInline;\n paragraph = inline.line.paragraph;\n offset = inline.line.getOffset(inline, 0);\n if (inline instanceof FieldElementBox && inline.fieldType === 1) {\n offset++;\n }\n }\n }\n if (inline && (inline instanceof BookmarkElementBox && inline.bookmarkType === 0\n || inline.nextNode instanceof BookmarkElementBox)) {\n if (inline instanceof BookmarkElementBox) {\n inline = inline.nextNode;\n paragraph = inline.line.paragraph;\n offset = inline.line.getOffset(inline, 0);\n }\n if (inline.length === 1 && inline.nextNode instanceof BookmarkElementBox\n && inline.previousNode instanceof BookmarkElementBox) {\n var bookMarkBegin = inline.previousNode;\n var bookMarkEnd = inline.nextNode;\n selection.start.setPositionParagraph(bookMarkBegin.line, bookMarkBegin.line.getOffset(bookMarkBegin, 0));\n selection.end.setPositionParagraph(bookMarkEnd.line, bookMarkEnd.line.getOffset(bookMarkEnd, 0) + 1);\n this.initHistory('Delete');\n this.deleteSelectedContentInternal(selection, false, selection.start, selection.end);\n var textPosition = new TextPosition(selection.owner);\n this.setPositionForCurrentIndex(textPosition, selection.editPosition);\n selection.selectContent(textPosition, true);\n this.reLayout(selection);\n return;\n }\n }\n if (selection.start.currentWidget.isLastLine() && offset === this.viewer.selection.getLineLength(selection.start.currentWidget)) {\n if (paragraph.isInsideTable && isNullOrUndefined(paragraph.nextWidget)) {\n return;\n }\n var previousParagraph = undefined;\n var newParagraph = undefined;\n var nextParagraph = selection.getNextParagraphBlock(paragraph);\n if (isNullOrUndefined(nextParagraph)) {\n if (offset > 0) {\n return;\n }\n else {\n if (paragraph.previousWidget instanceof ParagraphWidget) {\n previousParagraph = paragraph.previousWidget;\n }\n if (paragraph.previousWidget instanceof TableWidget) {\n return;\n }\n if (isNullOrUndefined(previousParagraph)) {\n return;\n //Adds an empty paragraph, to ensure minimal content.\n }\n }\n }\n if (!isRedoing) {\n this.initHistory('Delete');\n }\n var blockInfo = this.getParagraphInfo(selection.start);\n selection.editPosition = this.getHierarchicalIndex(blockInfo.paragraph, blockInfo.offset.toString());\n if (this.checkInsertPosition(selection)) {\n this.setPositionForHistory(selection.editPosition);\n }\n selection.owner.isShiftingEnabled = true;\n if (paragraph.isEmpty()) {\n this.removeBlock(paragraph);\n this.addRemovedNodes(paragraph);\n if (isNullOrUndefined(nextParagraph)) {\n if (isNullOrUndefined(previousParagraph)) {\n // selection.selectParagraph(newParagraph, true, true);\n var paraEndOffset = selection.getParagraphLength(newParagraph) + 1;\n if (this.editorHistory && !isNullOrUndefined(this.editorHistory.currentBaseHistoryInfo)) {\n this.updateHistoryPosition(selection.start, true);\n //tslint:disable-next-line:max-line-length\n this.editorHistory.currentBaseHistoryInfo.endPosition = this.getHierarchicalIndex(newParagraph, paraEndOffset.toString());\n }\n }\n else {\n selection.selectParagraph(previousParagraph, false);\n this.setPositionForHistory();\n }\n }\n else {\n selection.selectParagraph(nextParagraph, true);\n }\n }\n else {\n paragraph = paragraph.combineWidget(this.viewer);\n // tslint:disable-next-line:max-line-length\n var currentParagraph = this.splitParagraph(paragraph, paragraph.firstChild, 0, selection.start.currentWidget, selection.start.offset, true);\n this.deleteParagraphMark(currentParagraph, selection, 0);\n this.addRemovedNodes(paragraph);\n this.setPositionForCurrentIndex(selection.start, selection.editPosition);\n selection.selectContent(selection.start, true);\n }\n // if (!isRedoing) {\n this.reLayout(selection);\n // }\n }\n else {\n this.singleDeleteInternal(selection, isRedoing, paragraph);\n }\n };\n Editor.prototype.singleDeleteInternal = function (selection, isRedoing, paragraph) {\n if (!isRedoing) {\n selection.owner.isShiftingEnabled = true;\n this.initHistory('Delete');\n }\n if (this.checkInsertPosition(selection)) {\n this.updateHistoryPosition(selection.start, true);\n this.editorHistory.currentBaseHistoryInfo.endPosition = this.editorHistory.currentBaseHistoryInfo.insertPosition;\n }\n var paragraphInfo = this.getParagraphInfo(selection.start);\n var lineWidget = selection.start.currentWidget;\n var removeOffset = selection.start.offset;\n var lineLength = selection.getLineLength(selection.start.currentWidget);\n if (removeOffset >= lineLength) {\n lineWidget = lineWidget.nextLine;\n removeOffset = removeOffset - lineLength;\n }\n this.removeAtOffset(lineWidget, selection, removeOffset);\n this.setPositionParagraph(paragraphInfo.paragraph, paragraphInfo.offset, false);\n if (!isRedoing) {\n this.reLayout(selection);\n }\n else {\n this.fireContentChange();\n }\n };\n Editor.prototype.deleteParagraphMark = function (paragraph, selection, editAction) {\n if (isNullOrUndefined(paragraph.containerWidget)) {\n return;\n }\n paragraph = paragraph.combineWidget(this.viewer);\n var nextParagraph = selection.getNextParagraphBlock(paragraph);\n if (paragraph.isInsideTable && isNullOrUndefined(paragraph.nextWidget) || isNullOrUndefined(nextParagraph)) {\n return;\n }\n //BodyWidget\n var section = paragraph.containerWidget instanceof BodyWidget ? paragraph.containerWidget : undefined;\n var table = undefined;\n if (selection.getNextRenderedBlock(paragraph) instanceof TableWidget) {\n table = selection.getNextRenderedBlock(paragraph);\n }\n else {\n table = undefined;\n }\n if (nextParagraph.isInsideTable && !isNullOrUndefined(table) && table.contains(nextParagraph.associatedCell)) {\n if (editAction < 4) {\n // let nextSection: BodyWidget = table.containerWidget instanceof BodyWidget ? table.containerWidget : undefined;\n // if (section !== nextSection) {\n // this.combineSection(section, selection, nextSection);\n // }\n var offset = 0;\n this.removeBlock(paragraph);\n this.viewer.layout.clearListElementBox(nextParagraph);\n this.viewer.layout.clearListElementBox(paragraph);\n for (var i = paragraph.childWidgets.length - 1; i >= 0; i--) {\n var line = paragraph.childWidgets[i];\n for (var j = line.children.length - 1; j >= 0; j--) {\n var element = line.children[j];\n offset += element.length;\n nextParagraph.firstChild.children.unshift(element);\n element.line = nextParagraph.firstChild;\n // this.layoutInlineCollection(false, 0, nextParagraph.inlines, inline);\n }\n }\n this.viewer.layout.reLayoutParagraph(nextParagraph, 0, 0);\n if (offset > 0) {\n selection.editPosition = this.getHierarchicalIndex(nextParagraph, offset.toString());\n }\n }\n }\n else {\n if (editAction < 4) {\n // let nextSection: WSection = nextParagraph.section instanceof WSection ? nextParagraph.section as WSection : undefined;\n // if (section !== nextSection) {\n // this.combineSection(section, selection, nextSection);\n // }\n var prevLength = paragraph.childWidgets.length - 1;\n var nextPara = nextParagraph.getSplitWidgets();\n nextParagraph = nextParagraph.combineWidget(this.viewer);\n this.viewer.layout.clearListElementBox(nextParagraph);\n this.viewer.layout.clearListElementBox(paragraph);\n this.updateEditPositionOnMerge(paragraph, nextParagraph);\n for (var i = 0; i < nextParagraph.childWidgets.length; i++) {\n var inline = nextParagraph.childWidgets[i];\n nextParagraph.childWidgets.splice(i, 1);\n paragraph.childWidgets.push(inline);\n inline.paragraph = paragraph;\n i--;\n }\n if (nextParagraph.childWidgets.length === 0) {\n nextParagraph.childWidgets.push(new LineWidget(nextParagraph));\n }\n this.removeBlock(nextParagraph);\n this.viewer.layout.reLayoutParagraph(paragraph, 0, 0);\n this.addRemovedNodes(nextParagraph);\n }\n }\n };\n Editor.prototype.updateEditPositionOnMerge = function (currentParagraph, nextParagraph) {\n if (this.viewer.selection.editPosition === this.getHierarchicalIndex(nextParagraph, '0') &&\n nextParagraph.nextRenderedWidget === undefined) {\n // tslint:disable-next-line:max-line-length\n this.viewer.selection.editPosition = this.getHierarchicalIndex(currentParagraph, this.viewer.selection.getLineLength(currentParagraph.lastChild).toString());\n }\n };\n Editor.prototype.checkEndPosition = function (selection) {\n return (this.editorHistory && !isNullOrUndefined(this.editorHistory.currentBaseHistoryInfo)\n && isNullOrUndefined(this.editorHistory.currentBaseHistoryInfo.endPosition));\n };\n Editor.prototype.checkInsertPosition = function (selection) {\n return (this.editorHistory && !isNullOrUndefined(this.editorHistory.currentBaseHistoryInfo)\n && isNullOrUndefined(this.editorHistory.currentBaseHistoryInfo.insertPosition));\n };\n Editor.prototype.checkIsNotRedoing = function () {\n return this.viewer.owner.enableHistoryMode && !this.editorHistory.isRedoing;\n };\n // tslint:disable-next-line:max-line-length\n Editor.prototype.deleteSelectedContentInternal = function (selection, isBackSpace, startPosition, endPosition) {\n var startPos = startPosition;\n var endPos = endPosition;\n if (!startPosition.isExistBefore(endPosition)) {\n startPos = endPosition;\n endPos = startPosition;\n }\n var blockInfo = this.getParagraphInfo(startPos);\n selection.editPosition = this.getHierarchicalIndex(blockInfo.paragraph, blockInfo.offset.toString());\n var skipBackSpace = false;\n if (isBackSpace && startPos.isInSameParagraph(endPos)) {\n //Handled specifically to skip removal of contents, if selection is only paragraph mark and next rendered block is table.\n if (startPos.offset < endPos.offset && startPos.offset === selection.getParagraphLength(endPos.paragraph)) {\n var nextBlock = selection.getNextRenderedBlock(startPos.paragraph);\n skipBackSpace = nextBlock instanceof TableWidget;\n }\n //Handled specifically to remove paragraph completely (Delete behavior), if the selected paragraph is empty.\n if (endPos.offset === 1 && endPos.offset > selection.getParagraphLength(endPos.paragraph)\n && !(endPos.paragraph.isInsideTable && isNullOrUndefined(endPos.paragraph.nextWidget))) {\n isBackSpace = false;\n }\n }\n if (!skipBackSpace) {\n selection.owner.isShiftingEnabled = true;\n if (this.checkInsertPosition(selection)) {\n this.editorHistory.currentBaseHistoryInfo.insertPosition = selection.editPosition;\n }\n var editAction = (isBackSpace ? 1 : 0);\n this.deleteSelectedContent(endPos.paragraph, selection, startPos, endPos, editAction);\n }\n return skipBackSpace;\n };\n /**\n * Init EditorHistory\n * @private\n */\n Editor.prototype.initHistory = function (action) {\n if (this.viewer.owner.enableHistoryMode) {\n this.editorHistory.initializeHistory(action);\n }\n };\n /**\n * Init Complex EditorHistory\n * @private\n */\n Editor.prototype.initComplexHistory = function (action) {\n if (this.viewer.owner.enableHistoryMode) {\n this.editorHistory.initComplexHistory(this.viewer.selection, action);\n }\n };\n //Insert Picture implementation starts\n /**\n * Insert image\n * @param {string} base64String\n * @param {number} width\n * @param {number} height\n * @private\n */\n Editor.prototype.insertPicture = function (base64String, width, height) {\n var imageElementBox = new ImageElementBox(true);\n imageElementBox.imageString = base64String;\n imageElementBox.width = width;\n imageElementBox.height = height;\n this.insertPictureInternal(imageElementBox);\n };\n Editor.prototype.insertPictureInternal = function (imageElementBox) {\n var selection = this.viewer.selection;\n this.initHistory('InsertInline');\n this.fitImageToPage(selection, imageElementBox);\n this.insertInlineInSelection(selection, imageElementBox);\n this.reLayout(selection);\n };\n Editor.prototype.fitImageToPage = function (selection, imageElementBox) {\n var section = selection.start.paragraph.bodyWidget;\n var pageWidth = section.sectionFormat.pageWidth - section.sectionFormat.leftMargin - section.sectionFormat.rightMargin;\n var pageHeight = section.sectionFormat.pageHeight - section.sectionFormat.topMargin - section.sectionFormat.topMargin;\n //Resizes image to page size.\n if (imageElementBox.width > pageWidth) {\n imageElementBox.height = imageElementBox.height * pageWidth / imageElementBox.width;\n imageElementBox.width = pageWidth;\n }\n if (imageElementBox.height > pageHeight) {\n imageElementBox.width = imageElementBox.width * pageHeight / imageElementBox.height;\n imageElementBox.height = pageHeight;\n }\n };\n //Insert Picture implementation ends\n /**\n * @private\n */\n Editor.prototype.insertInlineInSelection = function (selection, elementBox) {\n if (this.checkIsNotRedoing()) {\n selection.owner.isShiftingEnabled = true;\n }\n if (!selection.isEmpty) {\n this.removeSelectedContents(selection);\n }\n this.updateInsertPosition();\n this.insertInlineInternal(elementBox);\n if (this.checkEndPosition(selection)) {\n this.updateHistoryPosition(selection.start, false);\n }\n this.fireContentChange();\n };\n /**\n * @private\n */\n Editor.prototype.onPortrait = function () {\n var sectionFormat = new WSectionFormat();\n var width = this.viewer.selection.sectionFormat.pageWidth;\n var height = this.viewer.selection.sectionFormat.pageHeight;\n if (width > height) {\n sectionFormat.pageWidth = height;\n sectionFormat.pageHeight = width;\n }\n this.onApplySectionFormat(undefined, sectionFormat);\n };\n /**\n * @private\n */\n Editor.prototype.onLandscape = function () {\n var sectionFormat = new WSectionFormat();\n var width = this.viewer.selection.sectionFormat.pageWidth;\n var height = this.viewer.selection.sectionFormat.pageHeight;\n if (width < height) {\n sectionFormat.pageWidth = height;\n sectionFormat.pageHeight = width;\n }\n this.onApplySectionFormat(undefined, sectionFormat);\n };\n Editor.prototype.copyValues = function () {\n var format = new WSectionFormat();\n format.bottomMargin = this.viewer.selection.sectionFormat.bottomMargin;\n format.topMargin = this.viewer.selection.sectionFormat.topMargin;\n format.leftMargin = this.viewer.selection.sectionFormat.leftMargin;\n format.rightMargin = this.viewer.selection.sectionFormat.rightMargin;\n format.pageHeight = this.viewer.selection.sectionFormat.pageHeight;\n format.pageWidth = this.viewer.selection.sectionFormat.pageWidth;\n format.footerDistance = this.viewer.selection.sectionFormat.footerDistance;\n format.headerDistance = this.viewer.selection.sectionFormat.headerDistance;\n return format;\n };\n /**\n * @private\n */\n Editor.prototype.changeMarginValue = function (property) {\n var sectionFormat = this.copyValues();\n if (property === 'lastCustomSetting' || property === 'normal') {\n sectionFormat.topMargin = 72;\n sectionFormat.bottomMargin = 72;\n sectionFormat.leftMargin = 72;\n sectionFormat.rightMargin = 72;\n }\n else if (property === 'narrow') {\n sectionFormat.topMargin = 36;\n sectionFormat.bottomMargin = 36;\n sectionFormat.leftMargin = 36;\n sectionFormat.rightMargin = 36;\n }\n else if (property === 'moderate') {\n sectionFormat.topMargin = 72;\n sectionFormat.bottomMargin = 72;\n sectionFormat.leftMargin = 54;\n sectionFormat.rightMargin = 54;\n }\n else if (property === 'wide') {\n sectionFormat.topMargin = 72;\n sectionFormat.bottomMargin = 72;\n sectionFormat.leftMargin = 144;\n sectionFormat.rightMargin = 144;\n }\n else if (property === 'mirrored') {\n sectionFormat.topMargin = 72;\n sectionFormat.bottomMargin = 72;\n sectionFormat.leftMargin = 90;\n sectionFormat.rightMargin = 72;\n }\n else if (property === 'office2003Default') {\n sectionFormat.topMargin = 72;\n sectionFormat.bottomMargin = 72;\n sectionFormat.leftMargin = 90;\n sectionFormat.rightMargin = 90;\n }\n this.onApplySectionFormat(undefined, sectionFormat);\n };\n /**\n * @private\n */\n Editor.prototype.onPaperSize = function (property) {\n var sectionFormat = this.copyValues();\n var width = this.viewer.selection.sectionFormat.pageWidth;\n var height = this.viewer.selection.sectionFormat.pageHeight;\n if (property === 'letter') {\n if (width < height) {\n sectionFormat.pageWidth = 611.9;\n sectionFormat.pageHeight = 791.9;\n }\n else {\n sectionFormat.pageWidth = 791.9;\n sectionFormat.pageHeight = 611.9;\n }\n }\n else if (property === 'tabloid') {\n if (width < height) {\n sectionFormat.pageWidth = 791.9;\n sectionFormat.pageHeight = 1223.9;\n }\n else {\n sectionFormat.pageWidth = 1223.9;\n sectionFormat.pageHeight = 791.9;\n }\n }\n else if (property === 'legal') {\n if (width < height) {\n sectionFormat.pageWidth = 611.9;\n sectionFormat.pageHeight = 1007.9;\n }\n else {\n sectionFormat.pageWidth = 1007.9;\n sectionFormat.pageHeight = 611.9;\n }\n }\n else if (property === 'statement') {\n if (width < height) {\n sectionFormat.pageWidth = 396;\n sectionFormat.pageHeight = 611.9;\n }\n else {\n sectionFormat.pageWidth = 611.9;\n sectionFormat.pageHeight = 396;\n }\n }\n else if (property === 'executive') {\n if (width < height) {\n sectionFormat.pageWidth = 521.9;\n sectionFormat.pageHeight = 755.9;\n }\n else {\n sectionFormat.pageWidth = 755.9;\n sectionFormat.pageHeight = 521.9;\n }\n }\n else if (property === 'a3') {\n if (width < height) {\n sectionFormat.pageWidth = 841.8;\n sectionFormat.pageHeight = 1190.4;\n }\n else {\n sectionFormat.pageWidth = 1190.4;\n sectionFormat.pageHeight = 841.8;\n }\n }\n else if (property === 'a4') {\n if (width < height) {\n sectionFormat.pageWidth = 595.2;\n sectionFormat.pageHeight = 841.8;\n }\n else {\n sectionFormat.pageWidth = 841.8;\n sectionFormat.pageHeight = 595.2;\n }\n }\n else if (property === 'a5') {\n if (width < height) {\n sectionFormat.pageWidth = 419.5;\n sectionFormat.pageHeight = 595.2;\n }\n else {\n sectionFormat.pageWidth = 595.2;\n sectionFormat.pageHeight = 419.5;\n }\n }\n else if (property === 'b4') {\n if (width < height) {\n sectionFormat.pageWidth = 728.4;\n sectionFormat.pageHeight = 1031.7;\n }\n else {\n sectionFormat.pageWidth = 1031.7;\n sectionFormat.pageHeight = 728.4;\n }\n }\n else if (property === 'b5') {\n if (width < height) {\n sectionFormat.pageWidth = 515.8;\n sectionFormat.pageHeight = 728.4;\n }\n else {\n sectionFormat.pageWidth = 728.4;\n sectionFormat.pageHeight = 515.8;\n }\n }\n this.onApplySectionFormat(undefined, sectionFormat);\n };\n //Update List Items\n /**\n * @private\n */\n Editor.prototype.updateListItemsTillEnd = function (blockAdv, updateNextBlockList) {\n var block = updateNextBlockList ? this.viewer.selection.getNextRenderedBlock(blockAdv) : blockAdv;\n while (!isNullOrUndefined(block)) {\n //Updates the list value of the rendered paragraph. \n this.updateRenderedListItems(block);\n block = block.getSplitWidgets().pop().nextRenderedWidget;\n }\n };\n /**\n * @private\n */\n Editor.prototype.updateWholeListItems = function (block) {\n this.viewer.renderedLists.clear();\n var sectionIndex = block.bodyWidget.index;\n var currentBlock;\n for (var j = 0; j < this.viewer.pages.length; j++) {\n var page = this.viewer.pages[j];\n if (page.bodyWidgets[0].index === sectionIndex) {\n currentBlock = page.bodyWidgets[0].firstChild;\n break;\n }\n }\n var isListUpdated = false;\n do {\n isListUpdated = this.updateListItems(currentBlock, block);\n if (isListUpdated) {\n break;\n }\n currentBlock = currentBlock.getSplitWidgets().pop().nextRenderedWidget;\n } while (currentBlock);\n };\n Editor.prototype.updateListItems = function (blockAdv, block) {\n var isListUpdated = false;\n if (blockAdv instanceof ParagraphWidget) {\n isListUpdated = this.updateListItemsForPara(blockAdv, block);\n }\n else {\n isListUpdated = this.updateListItemsForTable(blockAdv, block);\n }\n return isListUpdated;\n };\n Editor.prototype.updateListItemsForTable = function (table, block) {\n if (block instanceof TableWidget && table.equals(block)) {\n return true;\n }\n var row = table.firstChild;\n do {\n var isListUpdated = this.updateListItemsForRow(row, block);\n if (isListUpdated) {\n return true;\n }\n row = row.getSplitWidgets().pop().nextRenderedWidget;\n } while (row);\n return false;\n };\n Editor.prototype.updateListItemsForRow = function (row, block) {\n if (block.isInsideTable && row.childWidgets.indexOf(this.viewer.selection.getContainerCell(block.associatedCell)) !== -1) {\n //Returns as list updated, inorder to start list numbering from first list paragraph of this row.\n return true;\n }\n var cell = row.firstChild;\n do {\n this.updateListItemsForCell(cell, block);\n cell = cell.nextRenderedWidget;\n } while (cell);\n return false;\n };\n Editor.prototype.updateListItemsForCell = function (cell, block) {\n if (cell.childWidgets.length === 0) {\n return;\n }\n var currentBlock = cell.firstChild;\n do {\n this.updateListItems(currentBlock, block);\n currentBlock = currentBlock.getSplitWidgets().pop().nextRenderedWidget;\n } while (currentBlock);\n };\n // public abstract updateListParagraphs(): void;\n /**\n * @private\n */\n Editor.prototype.updateRenderedListItems = function (block) {\n if (block instanceof ParagraphWidget) {\n this.updateRenderedListItemsForPara(block);\n }\n else {\n this.updateRenderedListItemsForTable(block);\n }\n };\n Editor.prototype.updateRenderedListItemsForTable = function (table) {\n var row = table.firstChild;\n do {\n this.updateRenderedListItemsForRow(row);\n row = row.getSplitWidgets().pop().nextRenderedWidget;\n } while (row);\n };\n Editor.prototype.updateRenderedListItemsForRow = function (row) {\n var cell = row.firstChild;\n do {\n this.updateRenderedListItemsForCell(cell);\n cell = cell.nextRenderedWidget;\n } while (cell);\n };\n Editor.prototype.updateRenderedListItemsForCell = function (cell) {\n if (cell.childWidgets.length === 0) {\n return;\n }\n var currentBlock = cell.firstChild;\n do {\n this.updateRenderedListItems(currentBlock);\n currentBlock = currentBlock.getSplitWidgets().pop().nextRenderedWidget;\n } while (currentBlock);\n };\n Editor.prototype.updateListItemsForPara = function (paragraph, block) {\n if (paragraph.equals(block)) {\n return true;\n }\n else {\n var currentList = undefined;\n var listLevelNumber = 0;\n if (!isNullOrUndefined(paragraph.paragraphFormat) && !isNullOrUndefined(paragraph.paragraphFormat.listFormat)) {\n currentList = this.viewer.getListById(paragraph.paragraphFormat.listFormat.listId);\n listLevelNumber = paragraph.paragraphFormat.listFormat.listLevelNumber;\n }\n // tslint:disable-next-line:max-line-length\n if (!isNullOrUndefined(currentList) && !isNullOrUndefined(this.viewer.getAbstractListById(currentList.abstractListId))\n // tslint:disable-next-line:max-line-length\n && !isNullOrUndefined(this.viewer.getAbstractListById(currentList.abstractListId).levels[listLevelNumber])) {\n var currentListLevel = this.viewer.layout.getListLevel(currentList, listLevelNumber);\n //Updates the list numbering from document start for reLayouting.\n if (currentListLevel.listLevelPattern !== 'Bullet') {\n this.viewer.layout.getListNumber(paragraph.paragraphFormat.listFormat);\n }\n }\n }\n return false;\n };\n Editor.prototype.updateRenderedListItemsForPara = function (paragraph) {\n if (!isNullOrUndefined(this.viewer.getListById(paragraph.paragraphFormat.listFormat.listId))) {\n var currentList = this.viewer.getListById(paragraph.paragraphFormat.listFormat.listId);\n var listLevelNumber = paragraph.paragraphFormat.listFormat.listLevelNumber;\n if (!isNullOrUndefined(currentList) && !isNullOrUndefined(this.viewer.getAbstractListById(currentList.abstractListId))\n // tslint:disable-next-line:max-line-length\n && !isNullOrUndefined(this.viewer.getAbstractListById(currentList.abstractListId).levels[paragraph.paragraphFormat.listFormat.listLevelNumber])) {\n var currentListLevel = this.viewer.layout.getListLevel(currentList, listLevelNumber);\n //Updates the list numbering from document start for reLayouting.\n if (currentListLevel.listLevelPattern !== 'Bullet') {\n var element = undefined;\n if (paragraph.childWidgets.length > 0) {\n var lineWidget = paragraph.childWidgets[0];\n if (lineWidget.children.length > 0) {\n element = lineWidget.children[0];\n }\n }\n if (!isNullOrUndefined(element)) {\n element.text = this.viewer.layout.getListNumber(paragraph.paragraphFormat.listFormat);\n }\n }\n }\n }\n };\n /**\n * Get logical offset of paragraph.\n * @private\n */\n Editor.prototype.getParagraphInfo = function (position) {\n return this.getParagraphInfoInternal(position.currentWidget, position.offset);\n };\n /**\n * @private\n */\n Editor.prototype.getParagraphInfoInternal = function (line, lineOffset) {\n var paragraph = line.paragraph;\n var offset = this.selection.getParagraphLength(paragraph, line) + lineOffset;\n var previous = paragraph.previousSplitWidget;\n while (previous instanceof ParagraphWidget) {\n paragraph = previous;\n offset += this.viewer.selection.getParagraphLength(paragraph);\n previous = paragraph.previousSplitWidget;\n }\n return { 'paragraph': paragraph, 'offset': offset };\n };\n /**\n * Get offset value to update in selection\n * @private\n */\n Editor.prototype.getOffsetValue = function (selection) {\n if (this.startParagraph) {\n var lineInfo = this.getLineInfo(this.startParagraph, this.startOffset);\n selection.start.setPositionFromLine(lineInfo.line, lineInfo.offset);\n }\n selection.start.updatePhysicalPosition(true);\n if (selection.isEmpty) {\n selection.end.setPositionInternal(selection.start);\n }\n else {\n if (this.endParagraph) {\n var lineInfo = this.getLineInfo(this.endParagraph, this.endOffset);\n selection.end.setPositionFromLine(lineInfo.line, lineInfo.offset);\n }\n selection.end.updatePhysicalPosition(true);\n }\n };\n /**\n * Get offset value to update in selection\n * @private\n */\n Editor.prototype.getLineInfo = function (paragraph, offset) {\n var position = undefined;\n var element = undefined;\n var length = this.selection.getParagraphLength(paragraph);\n var next = paragraph.nextSplitWidget;\n if (offset > length + 1 && isNullOrUndefined(next)) {\n offset = length;\n }\n while (offset > length && next instanceof ParagraphWidget) {\n offset -= length;\n paragraph = next;\n length = this.selection.getParagraphLength(paragraph);\n next = paragraph.nextSplitWidget;\n }\n return this.selection.getLineInfo(paragraph, offset);\n };\n /**\n * @private\n */\n Editor.prototype.setPositionParagraph = function (paragraph, offset, skipSelectionChange) {\n var selection = this.viewer.selection;\n var lineInfo = this.getLineInfo(paragraph, offset);\n selection.start.setPositionFromLine(lineInfo.line, lineInfo.offset);\n selection.end.setPositionInternal(selection.start);\n if (!skipSelectionChange) {\n selection.fireSelectionChanged(true);\n }\n };\n /**\n * @private\n */\n Editor.prototype.setPositionForCurrentIndex = function (textPosition, editPosition) {\n var blockInfo = this.getParagraph({ index: editPosition });\n var lineInfo = this.getLineInfo(blockInfo.paragraph, blockInfo.offset);\n textPosition.setPositionForLineWidget(lineInfo.line, lineInfo.offset);\n };\n /**\n * @private\n */\n Editor.prototype.insertPageNumber = function (numberFormat) {\n if (isNullOrUndefined(numberFormat)) {\n numberFormat = '';\n }\n else {\n numberFormat = ' \\\\*' + numberFormat;\n }\n var fieldCode = 'PAGE ' + numberFormat + ' \\\\* MERGEFORMAT';\n this.createFields(fieldCode);\n };\n /**\n * @private\n */\n Editor.prototype.insertPageCount = function (numberFormat) {\n if (isNullOrUndefined(numberFormat)) {\n numberFormat = '';\n }\n else {\n numberFormat = ' \\*' + numberFormat;\n }\n var fieldCode = 'NUMPAGES ' + numberFormat + ' \\* MERGEFORMAT';\n this.createFields(fieldCode);\n };\n Editor.prototype.createFields = function (fieldCode) {\n var paragraph = new ParagraphWidget();\n var line = new LineWidget(paragraph);\n var fieldBegin = new FieldElementBox(0);\n line.children.push(fieldBegin);\n var fieldtext = new FieldTextElementBox();\n fieldtext.fieldBegin = fieldBegin;\n fieldtext.text = '1';\n var text = new TextElementBox();\n text.text = fieldCode;\n line.children.push(text);\n var fieldSeparator = new FieldElementBox(2);\n fieldSeparator.fieldBegin = fieldBegin;\n fieldBegin.fieldSeparator = fieldSeparator;\n line.children.push(fieldSeparator);\n line.children.push(fieldtext);\n var fieldEnd = new FieldElementBox(1);\n fieldEnd.fieldBegin = fieldBegin;\n fieldEnd.fieldSeparator = fieldSeparator;\n fieldSeparator.fieldEnd = fieldEnd;\n fieldBegin.fieldEnd = fieldEnd;\n line.children.push(fieldEnd);\n fieldBegin.line = line;\n paragraph.childWidgets.push(line);\n var widgets = [];\n widgets.push(paragraph);\n this.viewer.fields.push(fieldBegin);\n this.pasteContentsInternal(widgets);\n };\n /**\n * @private\n */\n Editor.prototype.insertBookmark = function (name) {\n var bookmark = new BookmarkElementBox(0);\n bookmark.name = name;\n var bookmarkEnd = new BookmarkElementBox(1);\n bookmarkEnd.name = name;\n bookmark.reference = bookmarkEnd;\n bookmarkEnd.reference = bookmark;\n this.viewer.bookmarks.add(name, bookmark);\n this.initComplexHistory('InsertBookmark');\n this.insertElements([bookmarkEnd], [bookmark]);\n if (this.editorHistory) {\n this.editorHistory.updateComplexHistoryInternal();\n }\n this.selection.start.setPositionForSelection(bookmark.line, bookmark, 1, this.selection.start.location);\n this.selection.end.setPositionForSelection(bookmarkEnd.line, bookmarkEnd, 0, this.selection.end.location);\n this.selection.fireSelectionChanged(true);\n this.fireContentChange();\n };\n /**\n * @private\n */\n Editor.prototype.deleteBookmark = function (bookmarkName) {\n var bookmarks = this.viewer.bookmarks;\n var bookmark = bookmarks.get(bookmarkName);\n if (bookmark instanceof BookmarkElementBox) {\n var bookmarkEnd = bookmark.reference;\n this.initHistory('DeleteBookmark');\n if (this.editorHistory) {\n this.editorHistory.currentBaseHistoryInfo.setBookmarkInfo(bookmark);\n this.editorHistory.updateHistory();\n }\n this.deleteBookmarkInternal(bookmark);\n }\n this.fireContentChange();\n };\n /**\n * @private\n */\n Editor.prototype.deleteBookmarkInternal = function (bookmark) {\n this.viewer.bookmarks.remove(bookmark.name);\n bookmark.line.children.splice(bookmark.indexInOwner, 1);\n bookmark.reference.line.children.splice(bookmark.reference.indexInOwner, 1);\n };\n /**\n * @private\n */\n Editor.prototype.getSelectionInfo = function () {\n var start = this.selection.start;\n var end = this.selection.end;\n var isEmpty = this.selection.isEmpty;\n if (!this.selection.isForward) {\n start = this.selection.end;\n end = this.selection.start;\n }\n var startElementInfo = start.currentWidget.getInline(start.offset, 0);\n var endElementInfo = end.currentWidget.getInline(end.offset, 0);\n // tslint:disable-next-line:max-line-length\n return { 'start': start.clone(), 'end': end.clone(), 'startElementInfo': startElementInfo, 'endElementInfo': endElementInfo, 'isEmpty': isEmpty };\n };\n /**\n * @private\n */\n Editor.prototype.insertElements = function (endElements, startElements) {\n var info = this.getSelectionInfo();\n if (!isNullOrUndefined(startElements)) {\n this.insertElementsInternal(info.start, startElements);\n }\n if (!isNullOrUndefined(endElements)) {\n this.insertElementsInternal(info.end, endElements);\n }\n };\n /**\n * @private\n */\n Editor.prototype.insertElementsInternal = function (position, elements) {\n this.selection.selectPosition(position, position);\n this.initHistory('InsertElements');\n this.updateInsertPosition();\n var indexInInline = 0;\n var inlineObj = this.selection.start.currentWidget.getInline(this.viewer.selection.start.offset, indexInInline);\n var curInline = inlineObj.element;\n indexInInline = inlineObj.index;\n var firstElement = elements[0];\n this.insertElementInternal(curInline, firstElement, indexInInline, true);\n var index = firstElement.indexInOwner;\n var lastElement = firstElement;\n for (var i = 1; i < elements.length; i++) {\n lastElement = elements[i];\n firstElement.line.children.splice(index + i, 0, lastElement);\n }\n position.setPositionForSelection(lastElement.line, lastElement, lastElement.length, this.selection.start.location);\n this.selection.selectPosition(position, position);\n if (this.editorHistory) {\n if (this.checkEndPosition()) {\n this.updateHistoryPosition(this.selection.start, false);\n }\n this.editorHistory.updateHistory();\n }\n };\n /**\n * @private\n */\n Editor.prototype.getHierarchicalIndex = function (block, offset) {\n var index;\n if (block) {\n if (block instanceof HeaderFooterWidget) {\n var hfString = block.headerFooterType.indexOf('Header') !== -1 ? 'H' : 'F';\n var pageIndex = block.page.index.toString();\n var headerFooterIndex = this.viewer.getHeaderFooter(block.headerFooterType).toString();\n var sectionIndex = block.page.sectionIndex;\n index = sectionIndex + ';' + hfString + ';' + pageIndex + ';' + offset;\n }\n else {\n index = block.index + ';' + offset;\n }\n if (block.containerWidget) {\n if (block instanceof TableCellWidget && block.rowIndex !== block.containerWidget.index) {\n index = block.rowIndex + ';' + index;\n block = block.containerWidget;\n }\n return this.getHierarchicalIndex(block.containerWidget, index);\n }\n }\n return index;\n };\n /**\n * @private\n */\n Editor.prototype.getBlock = function (position) {\n var bodyWidget = this.getBodyWidget(position);\n return this.getBlockInternal(bodyWidget, position);\n };\n /**\n * Return Block relative to position\n * @private\n */\n Editor.prototype.getBlockInternal = function (widget, position) {\n if (position.index === '' || isNullOrUndefined(position)) {\n return undefined;\n }\n var index = position.index.indexOf(';');\n var value = position.index.substring(0, index);\n position.index = position.index.substring(index).replace(';', '');\n var node = widget;\n // if (node instanceof WSection && value === 'HF') {\n // //Gets the block in Header footers.\n // let blockObj: BlockInfo = this.getBlock((node as WSection).headerFooters, position);\n // tslint:disable-next-line:max-line-length\n // return { 'node': (!isNullOrUndefined(blockObj)) ? blockObj.node : undefined, 'position': (!isNullOrUndefined(blockObj)) ? blockObj.position : undefined };\n // }\n index = parseInt(value, 10);\n var childWidget = this.getBlockByIndex(widget, index);\n if (childWidget) {\n var child = childWidget;\n if (position.index.indexOf(';') >= 0) {\n if (child instanceof ParagraphWidget) {\n if (position.index.indexOf(';') >= 0) {\n position.index = '0';\n }\n return { 'node': child, 'position': position };\n }\n if (child instanceof Widget) {\n var blockObj = this.getBlockInternal(child, position);\n // tslint:disable-next-line:max-line-length\n return { 'node': (!isNullOrUndefined(blockObj)) ? blockObj.node : undefined, 'position': (!isNullOrUndefined(blockObj)) ? blockObj.position : undefined };\n }\n }\n else {\n return { 'node': child, 'position': position };\n }\n }\n else {\n return { 'node': node, 'position': position };\n }\n return { 'node': node, 'position': position };\n };\n /**\n * @private\n */\n Editor.prototype.getParagraph = function (position) {\n var paragraph = this.getParagraphInternal(this.getBodyWidget(position), position);\n return { paragraph: paragraph, offset: parseInt(position.index, 10) };\n };\n /**\n * Get paragraph relative to position\n * @private\n */\n Editor.prototype.getParagraphInternal = function (container, position) {\n if (isNullOrUndefined(position.index)) {\n return undefined;\n }\n // let ins: Widget = container;\n var index = position.index.indexOf(';');\n var value = '0';\n if (index >= 0) {\n value = position.index.substring(0, index);\n position.index = position.index.substring(index).replace(';', '');\n }\n // if (container instanceof BodyWidget && value === 'HF') {\n // return this.getParagraph(container.headerFooters, position);\n // }\n index = parseInt(value, 10);\n if (container instanceof TableRowWidget && index >= container.childWidgets.length) {\n position.index = '0;0';\n index = container.childWidgets.length - 1;\n }\n var childWidget = this.getBlockByIndex(container, index);\n if (childWidget) {\n var child = childWidget;\n if (child instanceof ParagraphWidget) {\n if (position.index.indexOf(';') > 0) {\n position.index = '0';\n }\n return child;\n }\n if (child instanceof Widget) {\n if (position.index.indexOf(';') > 0) {\n return this.getParagraphInternal(child, position);\n }\n else {\n //If table is shifted to previous text position then return the first paragraph within table.\n if (child instanceof TableWidget) {\n return this.viewer.selection.getFirstParagraphInFirstCell(child);\n }\n return undefined;\n }\n }\n }\n else if (container) {\n var nextWidget = container.getSplitWidgets().pop().nextRenderedWidget;\n if (nextWidget instanceof Widget) {\n position.index = '0';\n if (nextWidget instanceof TableWidget) {\n return this.viewer.selection.getFirstParagraphInFirstCell(nextWidget);\n }\n return nextWidget;\n }\n }\n return undefined;\n };\n Editor.prototype.getBodyWidget = function (position) {\n var index = position.index.indexOf(';');\n var value = position.index.substring(0, index);\n position.index = position.index.substring(index).replace(';', '');\n var sectionIndex = parseInt(value, 10);\n index = parseInt(value, 10);\n index = position.index.indexOf(';');\n value = position.index.substring(0, index);\n // position = position.substring(index).replace(';', '');\n if (value === 'H' || value === 'F') {\n return this.getHeaderFooterWidget(position);\n }\n index = parseInt(value, 10);\n return this.getBodyWidgetInternal(sectionIndex, index);\n };\n Editor.prototype.getHeaderFooterWidget = function (position) {\n //HEADER OR FOOTER WIDGET\n var index = position.index.indexOf(';');\n var value = position.index.substring(0, index);\n position.index = position.index.substring(index).replace(';', '');\n var isHeader = value === 'H';\n index = position.index.indexOf(';');\n value = position.index.substring(0, index);\n position.index = position.index.substring(index).replace(';', '');\n index = parseInt(value, 10);\n var page = this.viewer.pages[index];\n if (isHeader) {\n return page.headerWidget;\n }\n else {\n return page.footerWidget;\n }\n };\n Editor.prototype.getBodyWidgetInternal = function (sectionIndex, blockIndex) {\n for (var i = 0; i < this.viewer.pages.length; i++) {\n var bodyWidget = this.viewer.pages[i].bodyWidgets[0];\n if (bodyWidget.index === sectionIndex) {\n if (bodyWidget.firstChild.index <= blockIndex && bodyWidget.lastChild.index >= blockIndex) {\n return bodyWidget;\n }\n }\n if (bodyWidget.index > sectionIndex) {\n break;\n }\n }\n return undefined;\n };\n /**\n * @private\n */\n Editor.prototype.getBlockByIndex = function (container, blockIndex) {\n var childWidget;\n if (container) {\n for (var j = 0; j < container.childWidgets.length; j++) {\n if (container.childWidgets[j].index === blockIndex) {\n childWidget = container.childWidgets[j];\n break;\n }\n }\n if (!childWidget && !(container instanceof HeaderFooterWidget)) {\n return this.getBlockByIndex(container.nextSplitWidget, blockIndex);\n }\n }\n return childWidget;\n };\n /**\n * @private\n */\n Editor.prototype.updateHistoryPosition = function (position, isInsertPosition) {\n if (this.editorHistory && !isNullOrUndefined(this.editorHistory.currentBaseHistoryInfo)) {\n var hierarchicalIndex = void 0;\n if (position instanceof TextPosition) {\n var blockInfo = this.getParagraphInfo(position);\n hierarchicalIndex = this.getHierarchicalIndex(blockInfo.paragraph, blockInfo.offset.toString());\n }\n else {\n hierarchicalIndex = position;\n }\n if (isInsertPosition) {\n this.editorHistory.currentBaseHistoryInfo.insertPosition = hierarchicalIndex;\n }\n else {\n this.editorHistory.currentBaseHistoryInfo.endPosition = hierarchicalIndex;\n }\n }\n };\n /**\n * Applies the borders based on given settings.\n * @param {BorderSettings} settings\n */\n Editor.prototype.applyBorders = function (settings) {\n this.initHistory('Borders');\n var startPos = this.selection.isForward ? this.selection.start : this.selection.end;\n var endPos = this.selection.isForward ? this.selection.end : this.selection.start;\n var table = startPos.paragraph.associatedCell.ownerTable;\n table = table.combineWidget(this.viewer);\n if (this.editorHistory) {\n var clonedTable = this.cloneTableToHistoryInfo(table);\n }\n var startCell = startPos.paragraph.associatedCell;\n var endCell = endPos.paragraph.associatedCell;\n var cells;\n var border = this.getBorder(settings.borderColor, settings.lineWidth, settings.borderStyle);\n if (this.selection.isEmpty) {\n //Apply borders for current selected cell initially. \n if (settings.type === 'OutsideBorders' || settings.type === 'AllBorders' ||\n settings.type === 'LeftBorder') {\n endCell.cellFormat.borders.left.copyFormat(border);\n }\n if (settings.type === 'OutsideBorders' || settings.type === 'AllBorders' ||\n settings.type === 'TopBorder') {\n endCell.cellFormat.borders.top.copyFormat(border);\n }\n if (settings.type === 'OutsideBorders' || settings.type === 'AllBorders' ||\n settings.type === 'RightBorder') {\n endCell.cellFormat.borders.right.copyFormat(border);\n }\n if (settings.type === 'OutsideBorders' || settings.type === 'AllBorders' ||\n settings.type === 'BottomBorder') {\n endCell.cellFormat.borders.bottom.copyFormat(border);\n }\n if (settings.type === 'AllBorders' || settings.type === 'InsideBorders'\n || settings.type === 'InsideVerticalBorder') {\n endCell.cellFormat.borders.vertical.copyFormat(border);\n }\n if (settings.type === 'AllBorders' || settings.type === 'InsideBorders'\n || settings.type === 'InsideHorizontalBorder') {\n endCell.cellFormat.borders.horizontal.copyFormat(border);\n }\n if (settings.type === 'NoBorder') {\n this.clearAllBorderValues(endCell.cellFormat.borders);\n }\n }\n else {\n if (settings.type === 'OutsideBorders' || settings.type === 'TopBorder') {\n var selectedCell = this.getTopBorderCellsOnSelection();\n for (var i = 0; i < selectedCell.length; i++) {\n selectedCell[i].cellFormat.borders.top.copyFormat(border);\n }\n }\n if (settings.type === 'OutsideBorders' || settings.type === 'LeftBorder') {\n var selectedCell = this.getLeftBorderCellsOnSelection();\n for (var i = 0; i < selectedCell.length; i++) {\n selectedCell[i].cellFormat.borders.left.copyFormat(border);\n }\n }\n if (settings.type === 'OutsideBorders' || settings.type === 'RightBorder') {\n var selectedCell = this.getRightBorderCellsOnSelection();\n for (var i = 0; i < selectedCell.length; i++) {\n selectedCell[i].cellFormat.borders.right.copyFormat(border);\n }\n }\n if (settings.type === 'OutsideBorders' || settings.type === 'BottomBorder') {\n var selectedCell = this.getBottomBorderCellsOnSelection();\n for (var i = 0; i < selectedCell.length; i++) {\n selectedCell[i].cellFormat.borders.bottom.copyFormat(border);\n }\n }\n }\n //Apply Only borders property to selected cells \n if (settings.type === 'BottomBorder' || settings.type === 'AllBorders' || settings.type === 'OutsideBorders'\n || settings.type === 'NoBorder') {\n cells = this.getAdjacentCellToApplyBottomBorder();\n for (var i = 0; i < cells.length; i++) {\n var cell = cells[i];\n if (settings.type === 'NoBorder') {\n cell.cellFormat.borders.top.copyFormat(this.clearBorder());\n }\n else {\n cell.cellFormat.borders.top.copyFormat(border);\n }\n }\n }\n if (settings.type === 'AllBorders' || settings.type === 'OutsideBorders' || settings.type === 'RightBorder'\n || settings.type === 'NoBorder') {\n cells = this.getAdjacentCellToApplyRightBorder();\n for (var i = 0; i < cells.length; i++) {\n var cell = cells[i];\n if (settings.type === 'NoBorder') {\n cell.cellFormat.borders.left.copyFormat(this.clearBorder());\n }\n else {\n cell.cellFormat.borders.left.copyFormat(border);\n }\n }\n }\n if (settings.type === 'AllBorders' || settings.type === 'NoBorder') {\n this.applyAllBorders(border, settings.type);\n }\n if (settings.type === 'InsideBorders' || settings.type === 'InsideVerticalBorder'\n || settings.type === 'InsideHorizontalBorder' || settings.type === 'NoBorder') {\n this.applyInsideBorders(border, settings.type, table);\n }\n this.updateGridForTableDialog(table, false);\n this.reLayout(this.selection, false);\n this.editorHistory.updateHistory();\n };\n Editor.prototype.applyAllBorders = function (border, borderType) {\n var cells = this.selection.getSelectedCells();\n for (var i = 0; i < cells.length; i++) {\n if (borderType === 'NoBorder') {\n cells[i].cellFormat.borders.left.copyFormat(this.clearBorder());\n cells[i].cellFormat.borders.right.copyFormat(this.clearBorder());\n cells[i].cellFormat.borders.top.copyFormat(this.clearBorder());\n cells[i].cellFormat.borders.bottom.copyFormat(this.clearBorder());\n }\n else {\n cells[i].cellFormat.borders.left.copyFormat(border);\n cells[i].cellFormat.borders.right.copyFormat(border);\n cells[i].cellFormat.borders.top.copyFormat(border);\n cells[i].cellFormat.borders.bottom.copyFormat(border);\n }\n }\n };\n Editor.prototype.applyInsideBorders = function (border, borderType, table) {\n var cells = this.selection.getSelectedCells();\n for (var i = 0; i < cells.length; i++) {\n var cell = cells[i];\n var isLastSelectedRow = cell.ownerRow === cells[cells.length - 1].ownerRow;\n var isLastRightCell = (cell.columnIndex + cell.cellFormat.columnSpan - 1) === cells[cells.length - 1].columnIndex;\n if (borderType === 'NoBorder') {\n cell.cellFormat.borders.right.copyFormat(this.clearBorder());\n cell.cellFormat.borders.bottom.copyFormat(this.clearBorder());\n }\n else {\n if (!isLastRightCell && borderType !== 'InsideHorizontalBorder') {\n cell.cellFormat.borders.right.copyFormat(border);\n }\n if (!isLastSelectedRow && borderType !== 'InsideVerticalBorder') {\n cell.cellFormat.borders.bottom.copyFormat(border);\n }\n }\n if (!isLastSelectedRow && borderType !== 'InsideVerticalBorder') {\n // Apply adjacent bottom borders.\n var nextRowIndex = cell.ownerRow.rowIndex + cell.cellFormat.rowSpan;\n var nextRow = table.childWidgets[nextRowIndex];\n if (nextRow) {\n var selectedCells = this.getAdjacentBottomBorderOnEmptyCells(nextRow, cell, true);\n for (var j = 0; j < selectedCells.length; j++) {\n if (borderType === 'NoBorder') {\n selectedCells[j].cellFormat.borders.top.copyFormat(this.clearBorder());\n }\n else {\n selectedCells[j].cellFormat.borders.top.copyFormat(border);\n }\n }\n }\n }\n if (!isLastRightCell && borderType !== 'InsideHorizontalBorder') {\n // Apply adjacent right borders.\n var rightBorderCells = this.getSelectedCellsNextWidgets(cell, table);\n for (var k = 0; k < rightBorderCells.length; k++) {\n if (borderType === 'NoBorder') {\n rightBorderCells[k].cellFormat.borders.left.copyFormat(this.clearBorder());\n }\n else {\n rightBorderCells[k].cellFormat.borders.left.copyFormat(border);\n }\n }\n }\n }\n };\n /**\n * @private\n */\n Editor.prototype.getTopBorderCellsOnSelection = function () {\n var startPos = this.selection.isForward ? this.selection.start : this.selection.end;\n var startCell = startPos.paragraph.associatedCell;\n var topBorderCells = [];\n var cells = this.selection.getSelectedCells();\n for (var i = 0; i < cells.length; i++) {\n if (cells[i].ownerRow === startCell.ownerRow) {\n topBorderCells.push(cells[i]);\n }\n }\n return topBorderCells;\n };\n /**\n * @private\n */\n Editor.prototype.getLeftBorderCellsOnSelection = function () {\n var startPos = this.selection.isForward ? this.selection.start : this.selection.end;\n var startCell = startPos.paragraph.associatedCell;\n var cells = this.selection.getSelectedCells();\n var leftBorderCells = [];\n for (var i = 0; i < cells.length; i++) {\n if (cells[i].columnIndex === startCell.columnIndex) {\n leftBorderCells.push(cells[i]);\n }\n }\n return leftBorderCells;\n };\n /**\n * @private\n */\n Editor.prototype.getRightBorderCellsOnSelection = function () {\n var cells = this.selection.getSelectedCells();\n var rightBorderCells = [];\n for (var i = 0; i < cells.length; i++) {\n if ((cells[i].columnIndex + cells[i].cellFormat.columnSpan - 1) === cells[cells.length - 1].columnIndex) {\n rightBorderCells.push(cells[i]);\n }\n }\n return rightBorderCells;\n };\n /**\n * @private\n */\n Editor.prototype.getBottomBorderCellsOnSelection = function () {\n var endPos = this.selection.isForward ? this.selection.end : this.selection.start;\n var endCell = endPos.paragraph.associatedCell;\n var cells = this.selection.getSelectedCells();\n var bottomBorderCells = [];\n for (var i = 0; i < cells.length; i++) {\n if (cells[i].ownerRow === endCell.ownerRow) {\n bottomBorderCells.push(cells[i]);\n }\n }\n return bottomBorderCells;\n };\n /**\n * @private\n */\n Editor.prototype.clearAllBorderValues = function (borders) {\n var border = this.clearBorder();\n borders.bottom.copyFormat(border);\n borders.left.copyFormat(border);\n borders.right.copyFormat(border);\n borders.top.copyFormat(border);\n borders.vertical.copyFormat(border);\n borders.horizontal.copyFormat(border);\n };\n Editor.prototype.clearBorder = function () {\n var border = new WBorder();\n border.lineStyle = 'Cleared';\n return border;\n };\n /**\n * @private\n */\n Editor.prototype.getAdjacentCellToApplyBottomBorder = function () {\n var cells = [];\n var startPos = this.selection.start;\n var endPos = this.selection.end;\n if (!this.selection.isForward) {\n startPos = this.selection.end;\n endPos = this.selection.start;\n }\n var table = startPos.paragraph.associatedCell.ownerTable;\n table = table.combineWidget(this.viewer);\n var startCell = startPos.paragraph.associatedCell;\n var endCell = endPos.paragraph.associatedCell;\n var nextRowIndex = endCell.ownerRow.rowIndex + endCell.cellFormat.rowSpan;\n var nextRow = table.childWidgets[nextRowIndex];\n if (nextRow) {\n if (endCell.cellFormat.columnSpan > 1) {\n for (var i = endCell.columnIndex; i < endCell.columnIndex + endCell.cellFormat.columnSpan; i++) {\n cells.push(nextRow.childWidgets[i]);\n }\n }\n else {\n cells = this.getAdjacentBottomBorderOnEmptyCells(nextRow, endCell);\n if (!this.selection.isEmpty) {\n for (var i = 0; i < nextRow.childWidgets.length; i++) {\n var nextCellColIndex = nextRow.childWidgets[i].columnIndex;\n if (nextCellColIndex >= startCell.columnIndex && nextCellColIndex <= endCell.columnIndex) {\n cells.push(nextRow.childWidgets[i]);\n }\n }\n }\n }\n }\n return cells;\n };\n Editor.prototype.getAdjacentBottomBorderOnEmptyCells = function (nextRow, cell, isSingleCell) {\n var cells = [];\n if (cell.cellFormat.columnSpan > 1) {\n for (var i = cell.columnIndex; i < cell.columnIndex + cell.cellFormat.columnSpan; i++) {\n cells.push(nextRow.childWidgets[i]);\n }\n }\n else {\n if (this.selection.isEmpty || isSingleCell) {\n for (var i = 0; i < nextRow.childWidgets.length; i++) {\n if (nextRow.childWidgets[i].columnIndex === cell.columnIndex) {\n cells.push(nextRow.childWidgets[i]);\n }\n }\n }\n }\n return cells;\n };\n /**\n * @private\n */\n Editor.prototype.getAdjacentCellToApplyRightBorder = function () {\n var cells = [];\n var startPosIn = this.selection.start;\n var endPosIn = this.selection.end;\n if (!this.selection.isForward) {\n startPosIn = this.selection.end;\n endPosIn = this.selection.start;\n }\n var table = startPosIn.paragraph.associatedCell.ownerTable;\n table = table.combineWidget(this.viewer);\n var startCell = startPosIn.paragraph.associatedCell;\n var endCell = endPosIn.paragraph.associatedCell;\n if (this.selection.isEmpty) {\n var selectedCell = startPosIn.paragraph.associatedCell;\n cells = this.getSelectedCellsNextWidgets(selectedCell, table);\n }\n else {\n // tslint:disable-next-line:max-line-length\n var selectedCells = this.getRightBorderCellsOnSelection();\n for (var i = 0; i < selectedCells.length; i++) {\n var cell = selectedCells[i];\n cells = cells.concat(this.getSelectedCellsNextWidgets(cell, table));\n }\n }\n return cells;\n };\n Editor.prototype.getSelectedCellsNextWidgets = function (selectedCell, table) {\n var cells = [];\n if (selectedCell.nextWidget) {\n cells.push(selectedCell.nextWidget);\n }\n if (selectedCell.cellFormat.rowSpan > 1) {\n var nextRowIndex = selectedCell.ownerRow.rowIndex + selectedCell.cellFormat.rowSpan;\n for (var i = selectedCell.ownerRow.rowIndex + 1; i < nextRowIndex; i++) {\n var nextRow = table.childWidgets[i];\n if (nextRow) {\n for (var j = 0; j < nextRow.childWidgets.length; j++) {\n if (nextRow.childWidgets[j].columnIndex ===\n selectedCell.nextWidget.columnIndex) {\n cells.push(nextRow.childWidgets[j]);\n }\n }\n }\n }\n }\n return cells;\n };\n /**\n * @private\n */\n Editor.prototype.getBorder = function (borderColor, lineWidth, borderStyle) {\n var border = new WBorder();\n border.color = borderColor || '#000000';\n border.lineWidth = lineWidth || 1;\n border.lineStyle = borderStyle || 'Single';\n return border;\n };\n /**\n * Applies borders\n * @param {WBorders} sourceBorders\n * @param {WBorders} applyBorders\n * @private\n */\n Editor.prototype.applyBordersInternal = function (sourceBorders, applyBorders) {\n if (!isNullOrUndefined(sourceBorders) && !isNullOrUndefined(sourceBorders)) {\n if (!isNullOrUndefined(sourceBorders.top)) {\n this.applyBorder(sourceBorders.top, applyBorders.top);\n }\n if (!isNullOrUndefined(sourceBorders.bottom)) {\n this.applyBorder(sourceBorders.bottom, applyBorders.bottom);\n }\n if (!isNullOrUndefined(sourceBorders.left)) {\n this.applyBorder(sourceBorders.left, applyBorders.left);\n }\n if (!isNullOrUndefined(sourceBorders.right)) {\n this.applyBorder(sourceBorders.right, applyBorders.right);\n }\n if (!isNullOrUndefined(sourceBorders.horizontal)) {\n this.applyBorder(sourceBorders.horizontal, applyBorders.horizontal);\n }\n if (!isNullOrUndefined(sourceBorders.vertical)) {\n this.applyBorder(sourceBorders.vertical, applyBorders.vertical);\n }\n if (!isNullOrUndefined(sourceBorders.diagonalUp)) {\n this.applyBorder(sourceBorders.diagonalUp, applyBorders.diagonalUp);\n }\n if (!isNullOrUndefined(sourceBorders.diagonalDown)) {\n this.applyBorder(sourceBorders.diagonalDown, applyBorders.diagonalDown);\n }\n }\n };\n /**\n * Apply shading to table\n * @param {WShading} sourceShading\n * @param {WShading} applyShading\n * @private\n */\n Editor.prototype.applyShading = function (sourceShading, applyShading) {\n if (!isNullOrUndefined(applyShading) && !isNullOrUndefined(sourceShading)) {\n if (!isNullOrUndefined(applyShading.backgroundColor)\n && sourceShading.backgroundColor !== applyShading.backgroundColor) {\n sourceShading.backgroundColor = applyShading.backgroundColor;\n }\n if (!isNullOrUndefined(applyShading.foregroundColor)\n && sourceShading.foregroundColor !== applyShading.foregroundColor) {\n sourceShading.foregroundColor = applyShading.foregroundColor;\n }\n if (!isNullOrUndefined(applyShading.textureStyle)\n && sourceShading.textureStyle !== applyShading.textureStyle) {\n sourceShading.textureStyle = applyShading.textureStyle;\n }\n }\n };\n Editor.prototype.applyBorder = function (sourceBorder, applyBorder) {\n if (!isNullOrUndefined(sourceBorder) && !isNullOrUndefined(applyBorder)) {\n if (!isNullOrUndefined(applyBorder.color)\n && sourceBorder.color !== applyBorder.color) {\n sourceBorder.color = applyBorder.color;\n }\n if (!isNullOrUndefined(applyBorder.lineStyle)\n && sourceBorder.lineStyle !== applyBorder.lineStyle) {\n sourceBorder.lineStyle = applyBorder.lineStyle;\n }\n if (!isNullOrUndefined(applyBorder.lineWidth)\n && sourceBorder.lineWidth !== applyBorder.lineWidth) {\n sourceBorder.lineWidth = applyBorder.lineWidth;\n }\n if (!isNullOrUndefined(applyBorder.shadow)\n && sourceBorder.shadow !== applyBorder.shadow) {\n sourceBorder.shadow = applyBorder.shadow;\n }\n if (!isNullOrUndefined(applyBorder.space)\n && sourceBorder.space !== applyBorder.space) {\n sourceBorder.space = applyBorder.space;\n }\n }\n };\n /**\n * Apply Table Format changes\n * @param {Selection} selection\n * @param {WTableFormat} format\n * @private\n */\n Editor.prototype.onTableFormat = function (format) {\n if (!isNullOrUndefined(this.selection.tableFormat)) {\n this.viewer.owner.isShiftingEnabled = true;\n this.editorHistory.initializeHistory('TableFormat');\n var table = this.selection.start.paragraph.associatedCell.ownerTable.combineWidget(this.viewer);\n this.applyTableFormat(table, undefined, format);\n this.reLayout(this.selection, false);\n }\n };\n /**\n * @private\n */\n Editor.prototype.applyTableFormat = function (table, property, value) {\n this.applyTablePropertyValue(this.viewer.selection, undefined, value, table);\n };\n // tslint:disable-next-line:max-line-length\n Editor.prototype.applyTablePropertyValue = function (selection, property, value, table) {\n var sourceFormat = table.tableFormat;\n if (!isNullOrUndefined(this.editorHistory.currentBaseHistoryInfo)) {\n value = this.editorHistory.currentBaseHistoryInfo.addModifiedTableProperties(sourceFormat, property, value);\n }\n if (value instanceof WTableFormat) {\n if (isNullOrUndefined(property)) {\n this.handleTableFormat(sourceFormat, value);\n }\n return;\n }\n if (property === 'preferredWidth') {\n sourceFormat.preferredWidth = value;\n }\n else if (property === 'leftIndent') {\n sourceFormat.leftIndent = value;\n }\n else if (property === 'tableAlignment') {\n sourceFormat.tableAlignment = value;\n }\n else if (property === 'cellSpacing') {\n sourceFormat.cellSpacing = value;\n }\n else if (property === 'leftMargin') {\n sourceFormat.leftMargin = value;\n }\n else if (property === 'rightMargin') {\n sourceFormat.rightMargin = value;\n }\n else if (property === 'topMargin') {\n sourceFormat.topMargin = value;\n }\n else if (property === 'bottomMargin') {\n sourceFormat.bottomMargin = value;\n }\n else if (property === 'preferredWidthType') {\n sourceFormat.preferredWidthType = value;\n }\n if (property === 'shading') {\n sourceFormat.shading = value;\n }\n else if (property === 'borders') {\n sourceFormat.borders = value;\n }\n // if (!isNullOrUndefined(table)) {\n // this.layoutItemBlock(table, true);\n // }\n };\n Editor.prototype.handleTableFormat = function (tableFormat, applyFormat) {\n if (this.isBordersAndShadingDialog || this.editorHistory.isUndoing\n || this.editorHistory.isRedoing) {\n if (!isNullOrUndefined(tableFormat.borders)) {\n this.applyBordersInternal(tableFormat.borders, applyFormat.borders);\n }\n if (!isNullOrUndefined(tableFormat.shading)) {\n this.applyShading(tableFormat.shading, applyFormat.shading);\n }\n }\n if (!this.isBordersAndShadingDialog) {\n if (applyFormat.hasValue('preferredWidth') && applyFormat.preferredWidth !== tableFormat.preferredWidth) {\n tableFormat.preferredWidth = applyFormat.preferredWidth;\n }\n if (applyFormat.hasValue('preferredWidthType') && applyFormat.preferredWidthType !== tableFormat.preferredWidthType) {\n tableFormat.preferredWidthType = applyFormat.preferredWidthType;\n }\n if (applyFormat.hasValue('tableAlignment') && applyFormat.tableAlignment !== tableFormat.tableAlignment) {\n tableFormat.tableAlignment = applyFormat.tableAlignment;\n }\n if (applyFormat.hasValue('leftIndent') && applyFormat.leftIndent !== tableFormat.leftIndent) {\n tableFormat.leftIndent = applyFormat.leftIndent;\n }\n }\n this.updateGridForTableDialog(tableFormat.ownerBase, false);\n };\n Editor.prototype.updateGridForTableDialog = function (table, shiftNextItem) {\n if (table.tableHolder) {\n table.updateRowIndex(0);\n table.calculateGrid();\n table.isGridUpdated = false;\n }\n this.viewer.layout.reLayoutTable(table);\n };\n /**\n * Applies Row Format Changes\n * @param {Selection} selection\n * @param {WRowFormat} format\n * @param {WRow} row\n * @private\n */\n Editor.prototype.onRowFormat = function (format) {\n if (isNullOrUndefined(this.selection) || isNullOrUndefined(format)) {\n return;\n }\n this.editorHistory.initializeHistory('RowFormat');\n this.viewer.owner.isShiftingEnabled = true;\n var rowStartPos = this.selection.isForward ? this.selection.start : this.selection.end;\n var rowEndPos = this.selection.isForward ? this.selection.end : this.selection.start;\n var table = rowStartPos.paragraph.associatedCell.ownerTable.combineWidget(this.viewer);\n this.applyRowFormat(rowStartPos.paragraph.associatedCell.ownerRow, rowStartPos, rowEndPos, undefined, format);\n this.reLayout(this.selection, false);\n };\n Editor.prototype.applyRowFormat = function (row, start, end, property, value) {\n this.applyRowPropertyValue(this.viewer.selection, property, value, row);\n if (end.paragraph.associatedCell.ownerRow === row) {\n return;\n }\n var newRow = row.nextWidget;\n if (!isNullOrUndefined(newRow)) {\n this.applyRowFormat(newRow, start, end, property, value);\n }\n };\n Editor.prototype.applyRowPropertyValue = function (selection, property, value, row) {\n var applyFormat = row.rowFormat;\n if (!isNullOrUndefined(this.editorHistory.currentBaseHistoryInfo)) {\n value = this.editorHistory.currentBaseHistoryInfo.addModifiedRowProperties(applyFormat, property, value);\n }\n if (value instanceof WRowFormat) {\n if (isNullOrUndefined(property)) {\n this.handleRowFormat(value, applyFormat);\n }\n return;\n }\n if (property === 'heightType') {\n applyFormat.heightType = value;\n }\n else if (property === 'height') {\n applyFormat.height = value;\n }\n else if (property === 'isHeader') {\n applyFormat.isHeader = value;\n }\n else if (property === 'allowBreakAcrossPages') {\n applyFormat.allowBreakAcrossPages = value;\n }\n if (!isNullOrUndefined(row.ownerTable)) {\n this.layoutItemBlock(row.ownerTable, true);\n }\n };\n Editor.prototype.handleRowFormat = function (format, applyFormat) {\n if (format.hasValue('allowBreakAcrossPages') && format.allowBreakAcrossPages !== applyFormat.allowBreakAcrossPages) {\n applyFormat.allowBreakAcrossPages = format.allowBreakAcrossPages;\n }\n if (format.hasValue('isHeader') && format.isHeader !== applyFormat.isHeader) {\n applyFormat.isHeader = format.isHeader;\n }\n if (format.hasValue('heightType') && format.heightType !== applyFormat.heightType) {\n applyFormat.heightType = format.heightType;\n }\n if (format.hasValue('height') && format.height !== applyFormat.height) {\n applyFormat.height = format.height;\n }\n this.updateGridForTableDialog(applyFormat.ownerBase.ownerTable, true);\n };\n /**\n * Applies Cell Format changes\n * @param {Selection} selection\n * @param {WCellFormat} format\n * @param {WCell} cell\n * @private\n */\n Editor.prototype.onCellFormat = function (format) {\n if (isNullOrUndefined(this.selection) || isNullOrUndefined(format)) {\n return;\n }\n this.editorHistory.initializeHistory('CellFormat');\n this.updateFormatForCell(this.selection, undefined, format);\n this.reLayout(this.selection, false);\n };\n /**\n * @private\n */\n Editor.prototype.updateCellMargins = function (selection, value) {\n var cellStartPosition = selection.start;\n var cellEndPosition = selection.end;\n if (!selection.isForward) {\n cellStartPosition = selection.end;\n cellEndPosition = selection.start;\n }\n this.initHistoryPosition(selection, cellStartPosition);\n // tslint:disable-next-line:max-line-length\n this.viewer.owner.cellOptionsDialogModule.applyCellmarginsValue(cellStartPosition.paragraph.associatedCell.ownerRow, cellStartPosition, cellEndPosition, value);\n };\n /**\n * @private\n */\n Editor.prototype.updateFormatForCell = function (selection, property, value) {\n var start = selection.start;\n var end = selection.end;\n if (!selection.isForward) {\n start = selection.end;\n end = selection.start;\n }\n var startCell = start.paragraph.associatedCell;\n var endCell = end.paragraph.associatedCell;\n var cells;\n var table = startCell.ownerTable.combineWidget(this.viewer);\n var appliedFormat;\n for (var k = startCell.columnIndex; k <= endCell.columnIndex; k++) {\n cells = this.getSelectedCellInColumn(startCell.ownerTable, startCell.ownerRow.rowIndex, k, endCell.ownerRow.rowIndex);\n for (var i = 0; i < cells.length; i++) {\n appliedFormat = this.applyCellPropertyValue(this.viewer.selection, property, value, cells[i].cellFormat);\n }\n }\n this.updateGridForTableDialog(table, false);\n };\n /**\n * @private\n */\n Editor.prototype.getSelectedCellInColumn = function (table, rowStartIndex, columnIndex, rowEndIndex) {\n var cells = [];\n for (var i = rowStartIndex; i <= rowEndIndex; i++) {\n var row = table.childWidgets[i];\n for (var j = 0; j < row.childWidgets.length; j++) {\n if (row.childWidgets[j].columnIndex === columnIndex) {\n cells.push(row.childWidgets[j]);\n }\n }\n }\n return cells;\n };\n Editor.prototype.getColumnCells = function (table, columnIndex, isLeftSideCollection) {\n var cells = [];\n for (var k = 0; k < table.childWidgets.length; k++) {\n var row = table.childWidgets[k];\n for (var i = 0; i < row.childWidgets.length; i++) {\n var cell = row.childWidgets[i];\n if (isLeftSideCollection) {\n if (cell.columnIndex + cell.cellFormat.columnSpan === columnIndex) {\n cells.push(cell);\n }\n }\n else {\n if (cell.columnIndex === columnIndex) {\n cells.push(cell);\n }\n }\n }\n }\n return cells;\n };\n /**\n * @private\n */\n Editor.prototype.getTableWidth = function (table) {\n if (table.tableFormat.preferredWidth !== 0 || table.tableFormat.preferredWidthType === 'Percent') {\n if (table.tableFormat.preferredWidthType === 'Auto' || table.tableFormat.preferredWidthType === 'Point') {\n return table.tableFormat.preferredWidth;\n }\n else {\n if (table.tableFormat.preferredWidth === 0) {\n return 0;\n }\n else {\n return HelperMethods.convertPixelToPoint(this.viewer.clientArea.width) / 100 * table.tableFormat.preferredWidth;\n }\n }\n }\n return HelperMethods.convertPixelToPoint(this.viewer.layout.getTableWidth(table));\n };\n Editor.prototype.applyCellPropertyValue = function (selection, property, value, applyFormat) {\n if (!isNullOrUndefined(this.editorHistory.currentBaseHistoryInfo)) {\n value = this.editorHistory.currentBaseHistoryInfo.addModifiedCellProperties(applyFormat, property, value);\n }\n if (value instanceof WCellFormat) {\n if (isNullOrUndefined(property)) {\n this.handleCellFormat(value, applyFormat);\n }\n return value;\n }\n if (property === 'leftMargin') {\n applyFormat.leftMargin = value;\n }\n else if (property === 'topMargin') {\n applyFormat.topMargin = value;\n }\n else if (property === 'rightMargin') {\n applyFormat.rightMargin = value;\n }\n else if (property === 'bottomMargin') {\n applyFormat.bottomMargin = value;\n }\n else if (property === 'preferredWidth') {\n applyFormat.preferredWidth = value;\n applyFormat.cellWidth = value;\n }\n else if (property === 'cellWidth') {\n applyFormat.cellWidth = value;\n }\n else if (property === 'columnSpan') {\n applyFormat.columnSpan = value;\n }\n else if (property === 'rowSpan') {\n applyFormat.rowSpan = value;\n }\n else if (property === 'preferredWidthType') {\n applyFormat.preferredWidthType = value;\n }\n else if (property === 'verticalAlignment') {\n applyFormat.verticalAlignment = value;\n }\n if (property === 'shading') {\n applyFormat.shading = value;\n }\n else if (property === 'borders') {\n applyFormat.borders = value;\n }\n return undefined;\n };\n Editor.prototype.handleCellFormat = function (cellFormat, applyFormat) {\n if (!isNullOrUndefined(cellFormat) && !isNullOrUndefined(applyFormat)) {\n if (this.isBordersAndShadingDialog) {\n if (!isNullOrUndefined(cellFormat.borders)) {\n this.applyBordersInternal(applyFormat.borders, cellFormat.borders);\n }\n if (!isNullOrUndefined(cellFormat.shading)) {\n this.applyShading(applyFormat.shading, cellFormat.shading);\n }\n // this.layoutRow((applyFormat.ownerBase as TableCellWidget).ownerRow, this.viewer, false);\n }\n else {\n if (cellFormat.hasValue('preferredWidth') && applyFormat.preferredWidth !== cellFormat.preferredWidth) {\n applyFormat.preferredWidth = cellFormat.preferredWidth;\n }\n if (cellFormat.hasValue('preferredWidthType') && applyFormat.preferredWidthType !== cellFormat.preferredWidthType) {\n applyFormat.preferredWidthType = cellFormat.preferredWidthType;\n }\n if (cellFormat.hasValue('verticalAlignment') && applyFormat.verticalAlignment !== cellFormat.verticalAlignment) {\n applyFormat.verticalAlignment = cellFormat.verticalAlignment;\n }\n }\n }\n };\n /**\n * @private\n */\n Editor.prototype.destroy = function () {\n this.viewer = undefined;\n this.nodes = [];\n };\n Editor.prototype.isTocField = function (element) {\n if (element instanceof FieldElementBox) {\n var nextElement = element.nextNode;\n if (element instanceof FieldElementBox && element.fieldType === 0 && nextElement instanceof TextElementBox\n && nextElement.text.trim().toLowerCase().indexOf('toc') === 0) {\n return true;\n }\n }\n return false;\n };\n /**\n * Updates the table of contents.\n * @private\n */\n Editor.prototype.updateToc = function (tocField) {\n if (isNullOrUndefined(tocField)) {\n tocField = this.selection.getTocFieldInternal();\n }\n if (!this.isTocField(tocField)) {\n return;\n }\n // Decode field code to get parameters\n var code = this.selection.getFieldCode(tocField);\n if (code.toLocaleLowerCase().indexOf('toc') !== -1) {\n this.insertTableOfContents(this.validateTocSettings(this.getTocSettings(code, tocField)));\n }\n };\n Editor.prototype.getTocSettings = function (code, tocField) {\n var tocSettings = {};\n tocSettings.includePageNumber = true;\n tocSettings.rightAlign = true;\n // Decode field code to get parameters\n if (code.toLowerCase() === 'toc \\\\mergeformat') {\n tocSettings.startLevel = 1;\n tocSettings.endLevel = 3;\n }\n else {\n var swtiches = code.split('\\\\');\n for (var i = 0; i < swtiches.length; i++) {\n var swtch = swtiches[i];\n if (swtch.length === 0) {\n continue;\n }\n switch (swtch[0]) {\n case 'o':\n if (!isNullOrUndefined(swtch.match(/\\d+/g))) {\n var levels = swtch.match(/\\d+/g).map(Number);\n tocSettings.startLevel = levels[0];\n tocSettings.endLevel = levels[1];\n }\n else {\n tocSettings.startLevel = 1;\n tocSettings.endLevel = 9;\n }\n break;\n case 'h':\n tocSettings.includeHyperlink = true;\n break;\n case 'n':\n tocSettings.includePageNumber = false;\n break;\n case 'p':\n tocSettings.rightAlign = false;\n break;\n case 'u':\n tocSettings.includeOutlineLevels = true;\n break;\n case 't':\n this.decodeTSwitch(tocSettings, swtch);\n break;\n }\n }\n }\n //assigns tab leader.\n var tabs = tocField.paragraph.paragraphFormat.tabs;\n if (tabs.length > 0) {\n tocSettings.tabLeader = tabs[0].tabLeader;\n }\n return tocSettings;\n };\n Editor.prototype.decodeTSwitch = function (tocSettings, tSwitch) {\n tocSettings.levelSettings = {};\n tSwitch = tSwitch.replace('t', '');\n tSwitch = tSwitch.replace('\"', '');\n tSwitch = tSwitch.replace('\"', '');\n tSwitch = tSwitch.trim();\n var levels = tSwitch.split(',');\n for (var index = 0; index < levels.length; index++) {\n tocSettings.levelSettings[levels[index]] = parseInt(levels[index + 1], 10);\n index++;\n }\n };\n /**\n * Inserts, modifies or updates the table of contents based on given settings.\n * @param {TableOfContentsSettings} tableOfContentsSettings\n */\n Editor.prototype.insertTableOfContents = function (tableOfContentsSettings) {\n this.initComplexHistory('TOC');\n if (isNullOrUndefined(tableOfContentsSettings)) {\n //Initializes with default value.\n tableOfContentsSettings = {};\n tableOfContentsSettings.startLevel = 1;\n tableOfContentsSettings.endLevel = 3;\n tableOfContentsSettings.includeHyperlink = true;\n tableOfContentsSettings.includeOutlineLevels = true;\n tableOfContentsSettings.includePageNumber = true;\n tableOfContentsSettings.rightAlign = true;\n tableOfContentsSettings.tabLeader = 'Dot';\n }\n var tocField = undefined;\n var code = undefined;\n if (this.selection.contextType === 'TableOfContents') {\n tocField = this.selection.getTocFieldInternal();\n }\n if (tocField instanceof FieldElementBox) {\n this.selection.start.setPositionForSelection(tocField.line, tocField, 0, this.selection.start.location);\n this.selection.end.setPositionForSelection(tocField.fieldEnd.line, tocField.fieldEnd, 2, this.selection.end.location);\n this.onDelete();\n }\n // Build TOC field code based on parameter\n code = this.constructTocFieldCode(tableOfContentsSettings);\n var isStartParagraph = this.selection.start.isAtParagraphStart;\n var blockInfo = this.getParagraphInfo(this.selection.start);\n var initialStart = this.getHierarchicalIndex(blockInfo.paragraph, blockInfo.offset.toString());\n // Build TOC fields\n // tslint:disable-next-line:max-line-length\n var widgets = this.buildToc(this.validateTocSettings(tableOfContentsSettings), code, true, isStartParagraph);\n if (widgets.length > 0) {\n var tocLastPara = new ParagraphWidget();\n var tocLastLine = new LineWidget(tocLastPara);\n tocLastPara.childWidgets.push(tocLastLine);\n var index = 0;\n if (!isStartParagraph) {\n index = 1;\n }\n var line = widgets[index].childWidgets[0];\n var fieldBegin = line.children[0];\n this.appendEndField(fieldBegin, tocLastLine);\n widgets.push(tocLastPara);\n this.appendEmptyPara(widgets);\n }\n this.setPositionForCurrentIndex(this.selection.start, initialStart);\n this.selection.end.setPositionInternal(this.selection.start);\n this.pasteContentsInternal(widgets);\n this.updatePageRef();\n if (this.editorHistory) {\n this.editorHistory.updateComplexHistoryInternal();\n }\n };\n Editor.prototype.appendEmptyPara = function (widgets) {\n var emptyPara = new ParagraphWidget();\n var emptyLine = new LineWidget(emptyPara);\n emptyPara.childWidgets.push(emptyLine);\n widgets.push(emptyPara);\n };\n Editor.prototype.constructTocFieldCode = function (tocSettings) {\n var tocFieldCode = 'TOC';\n //appends styles level\n // tslint:disable-next-line:max-line-length\n if (!isNullOrUndefined(tocSettings.startLevel) && tocSettings.startLevel !== 0 && !isNullOrUndefined(tocSettings.endLevel) && tocSettings.endLevel !== 0) {\n tocFieldCode = tocFieldCode + ' \\\\o \"' + tocSettings.startLevel + '-' + tocSettings.endLevel + '\"';\n }\n if (tocSettings.includePageNumber && !tocSettings.rightAlign) {\n tocFieldCode = tocFieldCode + ' \\\\p \" \"';\n }\n if (!tocSettings.includePageNumber) {\n tocFieldCode = tocFieldCode + ' \\\\n';\n }\n if (tocSettings.includeHyperlink) {\n tocFieldCode = tocFieldCode + ' \\\\h \\\\z';\n }\n if (tocSettings.includeOutlineLevels) {\n tocFieldCode = tocFieldCode + ' \\\\u';\n }\n var tSwitch = this.constructTSwitch(tocSettings);\n if (tSwitch.length > 6) {\n tocFieldCode = tocFieldCode + tSwitch;\n }\n return tocFieldCode;\n };\n Editor.prototype.constructTSwitch = function (tocSettings) {\n var tSwitch = '';\n var prefix = ' \\\\t ';\n if (!isNullOrUndefined(tocSettings.levelSettings)) {\n for (var _i = 0, _a = Object.keys(tocSettings.levelSettings); _i < _a.length; _i++) {\n var key = _a[_i];\n tSwitch = tSwitch + key + ',' + tocSettings.levelSettings[key].toString() + ',';\n }\n }\n tSwitch = tSwitch.slice(0, -1);\n tSwitch = prefix + '\"' + tSwitch + '\"';\n return tSwitch;\n };\n /**\n * Appends the end filed to the given line.\n */\n Editor.prototype.appendEndField = function (fieldBegin, lineWidget) {\n var fieldEnd = new FieldElementBox(1);\n fieldEnd.fieldSeparator = fieldBegin.fieldSeparator;\n fieldBegin.fieldSeparator.fieldEnd = fieldEnd;\n fieldEnd.fieldBegin = fieldBegin;\n fieldEnd.fieldBegin.fieldEnd = fieldEnd;\n fieldEnd.line = lineWidget;\n lineWidget.children.push(fieldEnd);\n };\n Editor.prototype.validateTocSettings = function (tocSettings) {\n if (isNullOrUndefined(tocSettings.startLevel) || tocSettings.startLevel < 1) {\n tocSettings.startLevel = 1;\n }\n if (isNullOrUndefined(tocSettings.endLevel) || tocSettings.endLevel < tocSettings.endLevel) {\n tocSettings.endLevel = tocSettings.startLevel > 3 ? tocSettings.startLevel : 3;\n }\n if (isNullOrUndefined(tocSettings.includeHyperlink)) {\n tocSettings.includeHyperlink = false;\n }\n if (isNullOrUndefined(tocSettings.includePageNumber)) {\n tocSettings.includePageNumber = false;\n }\n if (isNullOrUndefined(tocSettings.rightAlign)) {\n tocSettings.rightAlign = false;\n }\n if (isNullOrUndefined(tocSettings.levelSettings)) {\n tocSettings.levelSettings = {};\n }\n return tocSettings;\n };\n /**\n * Builds the TOC\n * @private\n */\n // tslint:disable-next-line:max-line-length\n Editor.prototype.buildToc = function (tocSettings, fieldCode, isFirstPara, isStartParagraph) {\n var tocDomBody = this.viewer.pages[0].bodyWidgets[0];\n var widgets = [];\n this.createHeadingLevels(tocSettings);\n if (tocSettings.includeOutlineLevels) {\n this.createOutlineLevels(tocSettings);\n }\n var widget = tocDomBody.childWidgets[0];\n while (widget !== undefined) {\n // tslint:disable-next-line:max-line-length\n if (widget instanceof ParagraphWidget && (this.isHeadingStyle(widget) || (tocSettings.includeOutlineLevels && this.isOutlineLevelStyle(widget)))) {\n var bookmarkName = this.insertTocBookmark(widget);\n // tslint:disable-next-line:max-line-length\n this.createTOCWidgets(widget, widgets, fieldCode, bookmarkName, tocSettings, isFirstPara, isStartParagraph);\n isFirstPara = false;\n }\n widget = this.selection.getNextParagraphBlock(widget);\n }\n this.tocStyles = {};\n return widgets;\n };\n Editor.prototype.createOutlineLevels = function (settings) {\n for (var i = settings.startLevel; i <= settings.endLevel; i++) {\n var levelStyle = 'Level' + i.toString();\n if (isNullOrUndefined(this.tocStyles[levelStyle])) {\n this.tocStyles[levelStyle] = i;\n }\n }\n };\n /**\n * Creates TOC heading styles\n * @param start - lower heading level\n * @param end - higher heading level\n */\n Editor.prototype.createHeadingLevels = function (settings) {\n var normalStyle = 'Normal';\n for (var i = settings.startLevel; i <= settings.endLevel; i++) {\n var headingStyle = 'Heading ' + i.toString();\n if (isNullOrUndefined(this.tocStyles[headingStyle])) {\n this.tocStyles[headingStyle] = i;\n }\n }\n if (!isNullOrUndefined(settings.levelSettings)) {\n for (var _i = 0, _a = Object.keys(settings.levelSettings); _i < _a.length; _i++) {\n var key = _a[_i];\n this.tocStyles[key] = settings.levelSettings[key];\n }\n }\n };\n /**\n * Checks the current style is heading style.\n */\n Editor.prototype.isHeadingStyle = function (para) {\n var style = para.paragraphFormat.baseStyle;\n if (style !== undefined) {\n return isNullOrUndefined(this.tocStyles[style.name]) ? false : true;\n }\n return false;\n };\n Editor.prototype.isOutlineLevelStyle = function (para) {\n var styleName = para.paragraphFormat.outlineLevel;\n return isNullOrUndefined(this.tocStyles[styleName]) ? false : true;\n };\n /**\n * Creates TOC field element.\n */\n Editor.prototype.createTocFieldElement = function (lineWidget, fieldCode) {\n //begin\n var fieldBegin = new FieldElementBox(0);\n fieldBegin.hasFieldEnd = true;\n fieldBegin.line = lineWidget;\n lineWidget.children.push(fieldBegin);\n //format toc\n var textElement = new TextElementBox();\n textElement.text = fieldCode;\n textElement.line = lineWidget;\n lineWidget.children.push(textElement);\n //field separator\n var fieldSeparator = new FieldElementBox(2);\n fieldSeparator.fieldBegin = fieldBegin;\n fieldSeparator.fieldBegin.fieldSeparator = fieldSeparator;\n fieldSeparator.line = lineWidget;\n lineWidget.children.push(fieldSeparator);\n return fieldBegin;\n };\n /**\n * Updates TOC para\n */\n // tslint:disable-next-line:max-line-length\n Editor.prototype.createTOCWidgets = function (widget, widgets, fieldCode, bookmarkName, tocSettings, isFirstPara, isStartParagraph) {\n var fieldBegin = undefined;\n var tocPara = undefined;\n var tocLine = undefined;\n // tslint:disable-next-line:max-line-length\n if (widgets.length === 1 && widgets[0].childWidgets[0].children.length === 3 && !isNullOrUndefined(isFirstPara) && !isFirstPara) {\n tocLine = widgets[0].childWidgets[0];\n }\n else {\n tocPara = new ParagraphWidget();\n var styleName = undefined;\n //Adds toc syles into paragraph\n var headingStyleName = widget.paragraphFormat.baseStyle.name;\n if (tocSettings.includeOutlineLevels && isNullOrUndefined(this.tocStyles[headingStyleName])) {\n styleName = widget.paragraphFormat.outlineLevel;\n }\n else {\n styleName = headingStyleName;\n }\n var tocStyleName = 'Toc' + this.tocStyles[styleName];\n var paraStyle = this.viewer.styles.findByName(tocStyleName, 'Paragraph');\n if (isNullOrUndefined(paraStyle)) {\n // tslint:disable-next-line:max-line-length\n this.viewer.owner.parser.parseStyle(JSON.parse(this.getCompleteStyles()), JSON.parse(this.viewer.preDefinedStyles.get(tocStyleName)), this.viewer.styles);\n paraStyle = this.viewer.styles.findByName(tocStyleName, 'Paragraph');\n }\n tocPara.paragraphFormat.ApplyStyle(paraStyle);\n //Creates right tab for page number.\n if (tocSettings.rightAlign && tocSettings.includePageNumber) {\n var tabStop = new WTabStop();\n tabStop.position = 467.5;\n tabStop.tabLeader = tocSettings.tabLeader;\n tabStop.deletePosition = 0;\n tabStop.tabJustification = 'Right';\n tocPara.paragraphFormat.tabs.push(tabStop);\n }\n tocLine = new LineWidget(tocPara);\n tocPara.childWidgets.push(tocLine);\n }\n //creates toc field element if it is insert\n if ((isFirstPara !== undefined) && isFirstPara) {\n if (!isNullOrUndefined(isStartParagraph) && !isStartParagraph) {\n this.appendEmptyPara(widgets);\n }\n this.createTocFieldElement(tocLine, fieldCode);\n }\n var text = '';\n for (var lineIndex = 0; lineIndex < widget.childWidgets.length; lineIndex++) {\n var lineWidget = widget.childWidgets[lineIndex];\n for (var elementIndex = 0; elementIndex < lineWidget.children.length; elementIndex++) {\n var element = lineWidget.children[elementIndex];\n if (element instanceof TextElementBox) {\n text = text + element.text;\n }\n }\n }\n if (text !== '') {\n // inserts hyperlink\n if (tocSettings.includeHyperlink && (bookmarkName !== undefined)) {\n fieldBegin = this.insertTocHyperlink(tocLine, bookmarkName, text);\n }\n else {\n var span = new TextElementBox();\n span.text = text;\n span.line = tocLine;\n tocLine.children.push(span);\n }\n //inserts page number\n if (tocSettings.includePageNumber && (bookmarkName !== undefined)) {\n if (tocSettings.rightAlign) {\n var tabText = new TabElementBox();\n tabText.text = '\\t';\n tabText.line = tocLine;\n tocLine.children.push(tabText);\n }\n var pageField = this.insertTocPageNumber(bookmarkName, tocLine, tocSettings.rightAlign, widget);\n this.appendEndField(pageField, tocLine);\n }\n if (tocSettings.includeHyperlink && fieldBegin !== undefined) {\n this.appendEndField(fieldBegin, tocLine);\n }\n }\n if (!isNullOrUndefined(tocPara) && (text !== '' || isFirstPara)) {\n widgets.push(tocPara);\n }\n };\n /**\n * Inserts toc hyperlink.\n */\n Editor.prototype.insertTocHyperlink = function (lineWidget, bookmarkName, text) {\n var fieldCode = ' HYPERLINK \\\\l \\\"' + bookmarkName + '\\\" ';\n var fieldBegin = this.createTocFieldElement(lineWidget, fieldCode);\n //text element.\n var span = new TextElementBox();\n span.text = text;\n span.line = lineWidget;\n lineWidget.children.push(span);\n return fieldBegin;\n };\n /**\n * Inserts toc page number.\n */\n // tslint:disable-next-line:max-line-length\n Editor.prototype.insertTocPageNumber = function (bookMarkname, lineWidget, isRightAlign, widget) {\n var fieldCode = ' PAGEREF' + bookMarkname + ' \\\\h ';\n var fieldBegin = this.createTocFieldElement(lineWidget, fieldCode);\n var text = (this.viewer.pages.indexOf(widget.bodyWidget.page) + 1).toString();\n //text element.\n var span = new FieldTextElementBox();\n span.fieldBegin = fieldBegin;\n if (!isRightAlign) {\n text = ' ' + text;\n }\n span.text = text;\n span.line = lineWidget;\n lineWidget.children.push(span);\n this.pageRefFields[bookMarkname] = span;\n return fieldBegin;\n };\n Editor.prototype.updatePageRef = function () {\n for (var _i = 0, _a = Object.keys(this.pageRefFields); _i < _a.length; _i++) {\n var key = _a[_i];\n var bookmark = this.viewer.bookmarks.get(key);\n var pageRef = (bookmark.paragraph.bodyWidget.page.index + 1).toString();\n var span = this.pageRefFields[key];\n if (pageRef !== span.text) {\n span.text = pageRef;\n var paragraph = span.paragraph;\n var lineIndex = paragraph.childWidgets.indexOf(span.line);\n var elementIndex = span.line.children.indexOf(span);\n this.viewer.layout.reLayoutParagraph(paragraph, lineIndex, elementIndex);\n }\n }\n };\n /**\n * Inserts toc bookmark.\n */\n Editor.prototype.insertTocBookmark = function (widget) {\n var bookmarkName = undefined;\n var lineLength = widget.childWidgets.length;\n if (lineLength > 0) {\n var startLine = widget.childWidgets[0];\n var endLine = widget.childWidgets[lineLength - 1];\n if ((startLine !== undefined) && (endLine !== undefined)) {\n var startElement = startLine.children[0];\n //Returns the bookmark if already present for paragraph.\n // tslint:disable-next-line:max-line-length\n if (!isNullOrUndefined(startElement) && startElement instanceof BookmarkElementBox && startElement.bookmarkType === 0 && (startElement.name.toLowerCase().match('^_toc'))) {\n return startElement.name;\n }\n var endElement = endLine.children[endLine.children.length - 1];\n if ((startElement !== undefined) && (endElement !== undefined)) {\n this.selection.start.setPositionForSelection(startLine, startElement, 0, this.selection.start.location);\n this.selection.end.setPositionForSelection(endLine, endElement, endElement.length, this.selection.end.location);\n bookmarkName = this.generateBookmarkName();\n this.insertBookmark(bookmarkName);\n }\n }\n }\n return bookmarkName;\n };\n /**\n * Generates bookmark id.\n */\n Editor.prototype.generateBookmarkName = function () {\n this.tocBookmarkId++;\n var count = 10 - this.tocBookmarkId.toString().length;\n var formatString = '';\n while (count - 1 > 0) {\n formatString = '0' + formatString;\n count--;\n }\n var bookmarkName = '_Toc' + formatString + this.tocBookmarkId;\n return bookmarkName;\n };\n return Editor;\n}());\nexport { Editor };\n","import { WTableHolder } from '../viewer/page';\n/**\n * @private\n */\nvar ModifiedLevel = /** @class */ (function () {\n function ModifiedLevel(owner, modified) {\n this.ownerListLevelIn = undefined;\n this.modifiedListLevelIn = undefined;\n this.ownerListLevel = owner;\n this.modifiedListLevel = modified;\n }\n Object.defineProperty(ModifiedLevel.prototype, \"ownerListLevel\", {\n /**\n * @private\n */\n get: function () {\n return this.ownerListLevelIn;\n },\n /**\n * @private\n */\n set: function (value) {\n this.ownerListLevelIn = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ModifiedLevel.prototype, \"modifiedListLevel\", {\n /**\n * @private\n */\n get: function () {\n return this.modifiedListLevelIn;\n },\n /**\n * @private\n */\n set: function (value) {\n this.modifiedListLevelIn = value;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @private\n */\n ModifiedLevel.prototype.destroy = function () {\n this.ownerListLevel = undefined;\n this.modifiedListLevel = undefined;\n };\n return ModifiedLevel;\n}());\nexport { ModifiedLevel };\n/**\n * @private\n */\nvar ModifiedParagraphFormat = /** @class */ (function () {\n function ModifiedParagraphFormat(ownerFormat, modifiedFormat) {\n this.ownerFormatIn = undefined;\n this.modifiedFormatIn = undefined;\n this.ownerFormat = ownerFormat;\n this.modifiedFormat = modifiedFormat;\n }\n Object.defineProperty(ModifiedParagraphFormat.prototype, \"ownerFormat\", {\n /**\n * @private\n */\n get: function () {\n return this.ownerFormatIn;\n },\n /**\n * @private\n */\n set: function (value) {\n this.ownerFormatIn = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ModifiedParagraphFormat.prototype, \"modifiedFormat\", {\n /**\n * hidden\n */\n get: function () {\n return this.modifiedFormatIn;\n },\n /**\n * @private\n */\n set: function (value) {\n this.modifiedFormatIn = value;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @private\n */\n ModifiedParagraphFormat.prototype.destroy = function () {\n this.ownerFormat = undefined;\n this.modifiedFormat.destroy();\n this.modifiedFormat = undefined;\n };\n return ModifiedParagraphFormat;\n}());\nexport { ModifiedParagraphFormat };\n/**\n * @private\n */\nvar RowHistoryFormat = /** @class */ (function () {\n function RowHistoryFormat(startingPoint, rowFormat) {\n this.startingPoint = startingPoint;\n this.rowFormat = rowFormat;\n this.rowHeightType = rowFormat.heightType;\n }\n RowHistoryFormat.prototype.revertChanges = function (isRedo, owner) {\n //backup current format values.\n var currentRowHeightType = this.rowFormat.heightType;\n //Restore old values.\n owner.editorModule.tableResize.updateRowHeight(this.rowFormat.ownerBase, isRedo ? this.displacement : (-this.displacement));\n owner.viewer.layout.reLayoutTable(this.rowFormat.ownerBase.ownerTable);\n if (this.rowFormat.heightType !== this.rowHeightType) {\n this.rowFormat.heightType = this.rowHeightType;\n }\n //backup the current format values for redo.\n this.rowHeightType = currentRowHeightType;\n };\n return RowHistoryFormat;\n}());\nexport { RowHistoryFormat };\n/**\n * @private\n */\nvar TableHistoryInfo = /** @class */ (function () {\n function TableHistoryInfo(table, owner) {\n this.tableHolder = new WTableHolder();\n this.tableFormat = new TableFormatHistoryInfo();\n this.rows = [];\n this.owner = owner;\n this.copyProperties(table);\n }\n TableHistoryInfo.prototype.copyProperties = function (table) {\n if (table.tableHolder) {\n this.tableHolder = table.tableHolder.clone();\n }\n if (table.tableFormat) {\n this.tableFormat.leftIndent = table.tableFormat.leftIndent;\n this.tableFormat.preferredWidth = table.tableFormat.preferredWidth;\n this.tableFormat.preferredWidthType = table.tableFormat.preferredWidthType;\n }\n for (var i = 0; i < table.childWidgets.length; i++) {\n var row = table.childWidgets[i];\n var rowFormat = new RowFormatHistoryInfo();\n rowFormat.gridBefore = row.rowFormat.gridBefore;\n rowFormat.gridBeforeWidth = row.rowFormat.gridBeforeWidth;\n rowFormat.gridBeforeWidthType = row.rowFormat.gridBeforeWidthType;\n rowFormat.gridAfter = row.rowFormat.gridAfter;\n rowFormat.gridAfterWidth = row.rowFormat.gridAfterWidth;\n rowFormat.gridAfterWidthType = row.rowFormat.gridAfterWidthType;\n for (var j = 0; j < row.childWidgets.length; j++) {\n var cell = row.childWidgets[j];\n var cellFormat = new CellFormatHistoryInfo();\n cellFormat.columnIndex = cell.columnIndex;\n cellFormat.columnSpan = cell.cellFormat.columnSpan;\n cellFormat.preferredWidth = cell.cellFormat.preferredWidth;\n cellFormat.preferredWidthType = cell.cellFormat.preferredWidthType;\n rowFormat.cells.push(cellFormat);\n }\n this.rows.push(rowFormat);\n }\n this.tableHierarchicalIndex = this.owner.editorModule.getHierarchicalIndex(table, '0');\n };\n TableHistoryInfo.prototype.destroy = function () {\n this.tableHierarchicalIndex = undefined;\n if (this.tableHolder) {\n this.tableHolder.destroy();\n this.tableHolder = undefined;\n }\n if (this.tableFormat) {\n this.tableFormat = null;\n }\n if (this.rows) {\n this.rows = [];\n this.rows = undefined;\n }\n };\n return TableHistoryInfo;\n}());\nexport { TableHistoryInfo };\n/**\n * @private\n */\nvar TableFormatHistoryInfo = /** @class */ (function () {\n function TableFormatHistoryInfo() {\n /* tslint:disable:no-empty */\n }\n return TableFormatHistoryInfo;\n}());\nexport { TableFormatHistoryInfo };\n/**\n * @private\n */\nvar RowFormatHistoryInfo = /** @class */ (function () {\n function RowFormatHistoryInfo() {\n this.cells = [];\n }\n return RowFormatHistoryInfo;\n}());\nexport { RowFormatHistoryInfo };\n/**\n * @private\n */\nvar CellFormatHistoryInfo = /** @class */ (function () {\n function CellFormatHistoryInfo() {\n /* tslint:disable:no-empty */\n }\n return CellFormatHistoryInfo;\n}());\nexport { CellFormatHistoryInfo };\n/**\n * @private\n */\nvar CellHistoryFormat = /** @class */ (function () {\n function CellHistoryFormat(point) {\n this.startingPoint = point; // starting point preserved to calculate the displacement on after cell resizing finished.\n }\n return CellHistoryFormat;\n}());\nexport { CellHistoryFormat };\n","import { WParagraphFormat } from '../format/paragraph-format';\nimport { WSectionFormat } from '../format/section-format';\nimport { WCharacterFormat } from '../format/character-format';\nimport { WListFormat } from '../format/list-format';\nimport { ModifiedLevel, RowHistoryFormat, TableHistoryInfo } from './history-helper';\nimport { BlockWidget, ParagraphWidget, BodyWidget, TableCellWidget, TableWidget, TableRowWidget, HeaderFooterWidget } from '../viewer/page';\nimport { Dictionary } from '../../base/dictionary';\nimport { TextPosition, ImageFormat } from '../index';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { ElementBox } from '../viewer/page';\nimport { WTableFormat, WRowFormat, WCellFormat, WParagraphStyle } from '../format/index';\n/**\n * @private\n */\nvar BaseHistoryInfo = /** @class */ (function () {\n function BaseHistoryInfo(node) {\n this.ownerIn = node;\n this.viewer = node.viewer;\n this.modifiedPropertiesIn = [];\n this.modifiedNodeLength = [];\n this.removedNodesIn = [];\n }\n Object.defineProperty(BaseHistoryInfo.prototype, \"owner\", {\n //Properties\n //gets owner control\n /**\n * gets the owner control\n * @private\n */\n get: function () { return this.ownerIn; },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(BaseHistoryInfo.prototype, \"editorHistory\", {\n /**\n * gets or sets action\n * @private\n */\n get: function () {\n return this.owner.editorHistory;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(BaseHistoryInfo.prototype, \"action\", {\n /**\n * gets or sets action\n * @private\n */\n get: function () { return this.actionIn; },\n set: function (value) { this.actionIn = value; },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(BaseHistoryInfo.prototype, \"modifiedProperties\", {\n /**\n * gets modified properties\n * @returns Object\n * @private\n */\n get: function () { return this.modifiedPropertiesIn; },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(BaseHistoryInfo.prototype, \"removedNodes\", {\n /**\n * @private\n */\n get: function () {\n return this.removedNodesIn;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(BaseHistoryInfo.prototype, \"selectionStart\", {\n /**\n * Gets or Sets the selection start\n * @private\n */\n //gets or sets selection start\n get: function () { return this.selectionStartIn; },\n set: function (value) { this.selectionStartIn = value; },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(BaseHistoryInfo.prototype, \"selectionEnd\", {\n /**\n * Gets or Sets the selection end\n * @private\n */\n get: function () { return this.selectionEndIn; },\n set: function (value) { this.selectionEndIn = value; },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(BaseHistoryInfo.prototype, \"insertPosition\", {\n /**\n * Gets or sets the insert position\n * @private\n */\n get: function () { return this.insertPositionIn; },\n set: function (value) { this.insertPositionIn = value; },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(BaseHistoryInfo.prototype, \"endPosition\", {\n /**\n * Gets or sets end position\n * @private\n */\n get: function () { return this.endPositionIn; },\n set: function (value) { this.endPositionIn = value; },\n enumerable: true,\n configurable: true\n });\n /**\n * Update the selection\n * @param selection\n * @private\n */\n BaseHistoryInfo.prototype.updateSelection = function () {\n var blockInfo = this.owner.editorModule.getParagraphInfo(this.owner.selection.start);\n this.selectionStart = this.owner.editorModule.getHierarchicalIndex(blockInfo.paragraph, blockInfo.offset.toString());\n blockInfo = this.owner.editorModule.getParagraphInfo(this.owner.selection.end);\n this.selectionEnd = this.owner.editorModule.getHierarchicalIndex(blockInfo.paragraph, blockInfo.offset.toString());\n };\n BaseHistoryInfo.prototype.setBookmarkInfo = function (bookmark) {\n this.removedNodes.push({ 'bookmark': bookmark, 'startIndex': bookmark.indexInOwner, 'endIndex': bookmark.reference.indexInOwner });\n };\n BaseHistoryInfo.prototype.revertBookmark = function () {\n var bookmarkInfo = this.removedNodes[0];\n var bookmark = bookmarkInfo.bookmark;\n if (this.editorHistory.isUndoing) {\n this.viewer.bookmarks.add(bookmark.name, bookmark);\n bookmark.line.children.splice(bookmarkInfo.startIndex, 0, bookmark);\n bookmark.reference.line.children.splice(bookmarkInfo.endIndex, 0, bookmark.reference);\n this.editorHistory.recordChanges(this);\n }\n else {\n this.owner.editorModule.deleteBookmarkInternal(bookmark);\n this.editorHistory.undoStack.push(this);\n }\n };\n /**\n * Reverts this instance\n * @private\n */\n // tslint:disable: max-func-body-length\n BaseHistoryInfo.prototype.revert = function () {\n if (this.action === 'DeleteBookmark') {\n this.revertBookmark();\n return;\n }\n this.owner.isShiftingEnabled = true;\n var selectionStartTextPosition = undefined;\n var selectionEndTextPosition = undefined;\n var start = this.selectionStart;\n var end = this.selectionEnd;\n var isForwardSelection = TextPosition.isForwardSelection(start, end);\n if (this.modifiedProperties.length > 0 || this.action === 'Selection' || this.action === 'ClearCharacterFormat'\n || this.action === 'ClearParagraphFormat') {\n selectionStartTextPosition = this.getTextPosition(start);\n selectionEndTextPosition = this.getTextPosition(end);\n this.revertModifiedProperties(selectionStartTextPosition, selectionEndTextPosition);\n }\n else {\n var deletedNodes = this.removedNodes;\n this.removedNodesIn = [];\n var isForward = TextPosition.isForwardSelection(this.insertPosition, this.endPosition);\n var insertTextPosition = this.getTextPosition(isForward ? this.insertPosition : this.endPosition);\n var endTextPosition = this.getTextPosition(isForward ? this.endPosition : this.insertPosition);\n if (insertTextPosition.isAtSamePosition(endTextPosition)) {\n this.owner.selection.selectContent(insertTextPosition, true);\n }\n else {\n this.owner.selection.selectPosition(insertTextPosition, endTextPosition);\n }\n if (this.action === 'InsertHyperlink' && this.editorHistory.isRedoing) {\n var fieldBegin = this.owner.selection.getHyperlinkField();\n if (!isNullOrUndefined(fieldBegin)) {\n var offset = (fieldBegin.line).getOffset(fieldBegin, 0);\n insertTextPosition.setPositionParagraph(fieldBegin.line, offset);\n this.owner.selection.start.setPositionInternal(insertTextPosition);\n offset = fieldBegin.fieldEnd.line.getOffset(fieldBegin.fieldEnd, 1);\n endTextPosition.setPositionParagraph(fieldBegin.fieldEnd.line, offset);\n }\n }\n this.editorHistory.currentBaseHistoryInfo = this;\n this.selectionStart = this.insertPosition;\n this.insertPosition = undefined;\n this.selectionEnd = this.endPosition;\n this.endPosition = undefined;\n var isRemoveContent = false;\n if (!insertTextPosition.isAtSamePosition(endTextPosition)) {\n isRemoveContent = this.action === 'BackSpace' || this.action === 'Delete' || this.action === 'ClearCells'\n || this.action === 'DeleteCells';\n if (!(isRemoveContent) && this.action !== 'MergeCells' && this.action !== 'InsertRowAbove'\n && this.action !== 'InsertRowBelow' && this.action !== 'InsertColumnLeft'\n && this.action !== 'InsertColumnRight' && this.action !== 'Borders'\n && this.action !== 'DeleteTable' && this.action !== 'DeleteColumn' && this.action !== 'DeleteRow') {\n this.owner.selection.end.setPositionInternal(endTextPosition);\n if (!this.owner.selection.isEmpty) {\n if (this.editorHistory.isRedoing) {\n this.owner.editorModule.removeSelectedContents(this.owner.selection);\n }\n else {\n this.owner.editorModule.deleteSelectedContents(this.owner.selection, true);\n }\n }\n }\n }\n var isRedoAction = this.editorHistory.isRedoing && !isRemoveContent;\n this.revertModifiedNodes(deletedNodes, isRedoAction, isForwardSelection ? start : end, start === end);\n if (isRemoveContent) {\n this.removeContent(insertTextPosition, endTextPosition);\n }\n //this.owner.editorModule.reLayout(this.viewer.selection);\n }\n var isSelectionChanged = false;\n if ((this.editorHistory.isUndoing && isNullOrUndefined(this.editorHistory.currentHistoryInfo)) ||\n ((this.action === 'InsertRowAbove' || this.action === 'Borders' || this.action === 'InsertRowBelow'\n || this.action === 'InsertColumnLeft'\n || this.action === 'InsertColumnRight') && (this.editorHistory.isRedoing\n || this.editorHistory.currentHistoryInfo.action === 'Paste'))) {\n selectionStartTextPosition = this.getTextPosition(start);\n selectionEndTextPosition = this.getTextPosition(end);\n this.owner.selection.selectRange(selectionStartTextPosition, selectionEndTextPosition);\n isSelectionChanged = true;\n }\n // Updates insert position of history info instance.\n this.insertPosition = start;\n this.endPosition = end;\n this.owner.editorModule.reLayout(this.owner.selection, this.owner.selection.isEmpty);\n if (isSelectionChanged) {\n this.viewer.scrollToPosition(this.owner.selection.start, this.owner.selection.end);\n }\n this.highlightListText();\n };\n BaseHistoryInfo.prototype.highlightListText = function () {\n if (!isNullOrUndefined(this.editorHistory.currentHistoryInfo)) {\n // tslint:disable-next-line:max-line-length\n if (this.action === 'ListCharacterFormat' || (this.editorHistory.currentHistoryInfo.action === 'ListSelect' && this.action === 'ListFormat')) {\n var selectionStartTextPosition = this.getTextPosition(this.selectionStart);\n var widget = selectionStartTextPosition.currentWidget;\n this.viewer.selection.highlightListText(widget);\n }\n }\n };\n BaseHistoryInfo.prototype.removeContent = function (insertTextPosition, endTextPosition) {\n //If the base parent of the insert text position and end text position is null \n //then the paragraphs already removed.\n //Example scenario: In table editing that is delete cells operation \n // we will backed up the entire table ad it will be replaced on undo operation.\n //At that time if the positions are in table \n //which is already replaced in undo (revert modified nodes method) then the base parent of the paragraph will be null.\n //So again, selecting the content and deleting is unnecessary\n // and it will cause improper position updates and null reference exceptions. \n if ((!isNullOrUndefined(insertTextPosition.paragraph.containerWidget) &&\n insertTextPosition.paragraph.containerWidget instanceof BodyWidget &&\n (!isNullOrUndefined(endTextPosition.paragraph.containerWidget)\n && endTextPosition.paragraph.containerWidget instanceof BodyWidget))\n || (!isNullOrUndefined(insertTextPosition.paragraph.containerWidget)\n && !isNullOrUndefined(endTextPosition.paragraph.containerWidget)\n && insertTextPosition.paragraph.containerWidget instanceof TableCellWidget\n && endTextPosition.paragraph.containerWidget instanceof TableCellWidget\n && !isNullOrUndefined(insertTextPosition.paragraph.bodyWidget))) {\n //Removes if any empty paragraph is added while delete.\n this.owner.selection.selectRange(insertTextPosition, endTextPosition);\n var isDelete = (this.action === 'BackSpace') ? true : false;\n this.owner.editorModule.deleteSelectedContents(this.owner.selection, isDelete);\n }\n };\n BaseHistoryInfo.prototype.revertModifiedProperties = function (start, end) {\n if (this.action === 'CellFormat' || this.action === 'CellOptions' || this.action === 'TableOptions') {\n this.owner.isShiftingEnabled = false;\n }\n this.owner.selection.selectRange(start, end);\n if (this.action === 'RowResizing' || this.action === 'CellResizing') {\n this.revertResizing();\n }\n else if (this.action === 'CellOptions' || this.action === 'TableOptions') {\n this.revertTableDialogProperties(this.action);\n }\n else if (this.action !== 'Selection') {\n this.revertProperties();\n }\n };\n // Redoes the Action\n BaseHistoryInfo.prototype.redoAction = function () {\n var editor = this.owner.editorModule;\n switch (this.action) {\n case 'BackSpace':\n editor.singleBackspace(this.owner.selection, true);\n break;\n case 'Delete':\n editor.singleDelete(this.owner.selection, true);\n break;\n case 'DeleteTable':\n editor.deleteTable();\n break;\n case 'DeleteColumn':\n editor.deleteColumn();\n break;\n case 'DeleteRow':\n editor.deleteRow();\n break;\n case 'MergeCells':\n editor.mergeSelectedCellsInTable();\n break;\n case 'InsertRowAbove':\n editor.insertRow(true);\n break;\n case 'InsertRowBelow':\n editor.insertRow(false);\n break;\n case 'InsertColumnLeft':\n editor.insertColumn(true);\n break;\n case 'InsertColumnRight':\n editor.insertColumn(true);\n break;\n }\n };\n /**\n * Revert the modified nodes\n * @param {WNode[]} deletedNodes\n * @param {boolean} isRedoAction\n * @param {string} start\n * @param {boolean} isEmptySelection\n */\n BaseHistoryInfo.prototype.revertModifiedNodes = function (deletedNodes, isRedoAction, start, isEmptySelection) {\n if (isRedoAction && (this.action === 'BackSpace' || this.action === 'Delete' || this.action === 'DeleteTable'\n || this.action === 'DeleteColumn' || this.action === 'DeleteRow' || this.action === 'InsertRowAbove' ||\n this.action === 'InsertRowBelow' || this.action === 'InsertColumnLeft' || this.action === 'InsertColumnRight'\n || this.action === 'MergeCells')) {\n this.redoAction();\n }\n if (deletedNodes.length > 0) {\n if ((this.editorHistory.isUndoing && (this.action === 'DeleteCells' || this.action === 'DeleteColumn'\n || this.action === 'DeleteRow' || this.action === 'MergeCells'))\n || (this.action === 'InsertRowAbove' || this.action === 'InsertRowBelow' || this.action === 'InsertColumnLeft'\n || this.action === 'ClearCells' || this.action === 'InsertColumnRight' || this.action === 'Borders')) {\n var insertIndex = this.selectionStart;\n var block = this.owner.editorModule.getBlock({ index: insertIndex }).node;\n var lastNode = deletedNodes[deletedNodes.length - 1];\n if ((block instanceof TableWidget || block.previousRenderedWidget instanceof TableWidget || block.isInsideTable)\n && lastNode instanceof TableWidget) {\n if (block instanceof ParagraphWidget && !block.isInsideTable) {\n block = block.previousRenderedWidget;\n }\n block = block.combineWidget(this.viewer);\n this.owner.editorModule.insertTableInternal(block, lastNode, false);\n deletedNodes.splice(deletedNodes.indexOf(lastNode), 1);\n }\n else if (lastNode instanceof TableWidget) {\n this.owner.editorModule.insertBlock(lastNode);\n }\n }\n else {\n var initialStart = start;\n var block = this.owner.editorModule.getBlock({ index: initialStart }).node;\n // initialStart = blockObj.position;\n if (deletedNodes.length > 0 && (this.action === 'BackSpace' && isEmptySelection\n || (!(block instanceof TableWidget) && !(block instanceof HeaderFooterWidget)))) {\n var lastNode = deletedNodes[0];\n if (lastNode instanceof ParagraphWidget && this.owner.selection.start.offset > 0) {\n this.owner.editorModule.insertNewParagraphWidget(lastNode, true);\n deletedNodes.splice(deletedNodes.indexOf(lastNode), 1);\n if (isNullOrUndefined(block)) {\n // tslint:disable-next-line:max-line-length\n var nextBlock = this.viewer.selection.getNextParagraphBlock(lastNode.getSplitWidgets().pop());\n this.owner.selection.getNextRenderedBlock(lastNode);\n if (isNullOrUndefined(nextBlock)) {\n //Sets the selection as starting of last paragraph.\n this.owner.selection.selectParagraph(lastNode, true);\n }\n }\n }\n if (lastNode instanceof TableWidget && this.owner.selection.start.offset > 0) {\n var firstBlock = deletedNodes[deletedNodes.length - 1];\n if (firstBlock instanceof ParagraphWidget) {\n this.owner.editorModule.insertNewParagraphWidget(firstBlock, true);\n deletedNodes.splice(deletedNodes.indexOf(firstBlock), 1);\n if (isNullOrUndefined(block)) {\n // tslint:disable-next-line:max-line-length\n var nextBlock = this.viewer.selection.getNextParagraphBlock(firstBlock.getSplitWidgets().pop());\n if (isNullOrUndefined(nextBlock)) {\n //Sets the selection as starting of last paragraph.\n this.owner.selection.selectParagraph(firstBlock, true);\n }\n }\n }\n }\n }\n if (deletedNodes.length > 0) {\n var firstNode = deletedNodes[deletedNodes.length - 1];\n if (block instanceof TableWidget) {\n block = block.combineWidget(this.viewer);\n if (firstNode instanceof TableWidget) {\n this.owner.editorModule.insertTableInternal(block, firstNode, true);\n deletedNodes.splice(deletedNodes.indexOf(firstNode), 1);\n this.insertPosition = start;\n var nextWidget = firstNode.getSplitWidgets().pop();\n if (nextWidget.nextRenderedWidget instanceof TableWidget) {\n block = nextWidget.nextRenderedWidget;\n }\n else {\n initialStart = start;\n block = this.owner.editorModule.getBlock({ index: initialStart }).node;\n }\n }\n }\n //Checks if first node is paragraph and current insert position is paragraph end.\n // tslint:disable-next-line:max-line-length\n if (firstNode instanceof ParagraphWidget && this.owner.selection.start.offset > 0\n && this.owner.selection.start.offset === this.owner.selection.getLineLength(this.owner.selection.start.paragraph.lastChild)) {\n var editor = this.owner.editorModule;\n editor.insertNewParagraphWidget(firstNode, false);\n deletedNodes.splice(deletedNodes.indexOf(firstNode), 1);\n //Removes the intermediate empty paragraph instance.\n if (this.action !== 'Paste') {\n editor.removeBlock(this.owner.selection.start.paragraph);\n }\n // tslint:disable-next-line:max-line-length\n var paragraph = this.viewer.selection.getNextParagraphBlock(firstNode.getSplitWidgets().pop());\n if (!isNullOrUndefined(paragraph)) {\n this.owner.selection.selectParagraph(paragraph, true);\n }\n }\n else if (deletedNodes[0] instanceof TableWidget && deletedNodes.length !== 1) {\n var nextNode = deletedNodes[1];\n if (nextNode instanceof ParagraphWidget && nextNode.isEmpty()) {\n deletedNodes.splice(deletedNodes.indexOf(nextNode), 1);\n }\n }\n }\n if (deletedNodes.length > 0) {\n if (block instanceof TableWidget) {\n block = block.combineWidget(this.viewer);\n }\n this.insertRemovedNodes(deletedNodes, block);\n }\n }\n }\n };\n BaseHistoryInfo.prototype.insertRemovedNodes = function (deletedNodes, block) {\n for (var i = deletedNodes.length - 1, index = 0; i > -1; i--) {\n var node = deletedNodes[i];\n if (node instanceof ElementBox) {\n this.owner.editorModule.insertInlineInSelection(this.owner.selection, node);\n }\n else if (node instanceof BlockWidget) {\n if (node instanceof TableRowWidget) {\n if (block instanceof TableWidget) {\n block.childWidgets.splice(index, 0, node);\n this.owner.editorModule.updateNextBlocksIndex(node, true);\n if (i === 0 || !(deletedNodes[i - 1] instanceof TableRowWidget)) {\n // tslint:disable-next-line:max-line-length\n this.viewer.layout.layoutBodyWidgetCollection(block.index, block.containerWidget, block, false);\n }\n }\n }\n else if (block instanceof TableWidget) {\n this.owner.editorModule.insertBlockTable(this.owner.selection, node, block);\n }\n else {\n this.owner.editorModule.insertBlock(node);\n }\n }\n }\n deletedNodes = [];\n };\n BaseHistoryInfo.prototype.revertResizing = function () {\n this.editorHistory.currentBaseHistoryInfo = this;\n if (this.action === 'RowResizing') {\n if (this.modifiedProperties[0] instanceof RowHistoryFormat) {\n // tslint:disable-next-line:max-line-length\n this.modifiedProperties[0].revertChanges(this.editorHistory.isRedoing, this.owner);\n }\n }\n else {\n if (this.modifiedProperties[0] instanceof TableHistoryInfo) {\n //selected cell resizing the condition checks done based on the selected widgets only. so need to highlight the selection.\n if (this.owner.selection.selectedWidgets.length === 0) {\n this.owner.selection.highlightSelection(true);\n }\n var prevTableHistoryInfo = this.modifiedProperties[0];\n var position = prevTableHistoryInfo.tableHierarchicalIndex;\n var block = this.owner.editorModule.getBlock({ index: position }).node;\n if (block instanceof TableWidget) {\n var tableResize = this.owner.editorModule.tableResize;\n this.owner.editor.setOffsetValue(this.owner.selection);\n block = block.combineWidget(this.owner.viewer);\n tableResize.currentResizingTable = block;\n this.modifiedProperties.splice(0, 1);\n if (this.editorHistory.isUndoing || this.editorHistory.isRedoing) {\n var tableHistoryInfoCurrent = new TableHistoryInfo(block, this.owner);\n this.modifiedProperties.splice(0, 0, tableHistoryInfoCurrent);\n this.owner.isLayoutEnabled = false;\n tableResize.applyProperties(tableResize.currentResizingTable, prevTableHistoryInfo);\n tableResize.currentResizingTable.isGridUpdated = true;\n this.owner.isLayoutEnabled = true;\n tableResize.updateGridValue(tableResize.currentResizingTable, false);\n prevTableHistoryInfo.destroy();\n prevTableHistoryInfo = undefined;\n }\n }\n }\n }\n };\n BaseHistoryInfo.prototype.revertTableDialogProperties = function (action) {\n this.owner.isShiftingEnabled = false;\n this.editorHistory.currentBaseHistoryInfo = this;\n this.currentPropertyIndex = 0;\n if (action === 'CellOptions') {\n var selection = this.owner.selection;\n var cellFormat = this.modifiedProperties[0];\n this.owner.editorModule.updateCellMargins(selection, cellFormat);\n }\n else if (action === 'TableOptions') {\n this.owner.tableOptionsDialogModule.applyTableOptionsHelper(this.modifiedProperties[0]);\n }\n this.currentPropertyIndex = 0;\n this.owner.isShiftingEnabled = true;\n };\n BaseHistoryInfo.prototype.getTextPosition = function (hierarchicalIndex) {\n var textPosition = new TextPosition(this.owner);\n var blockInfo = this.owner.editorModule.getParagraph({ index: hierarchicalIndex });\n var lineInfo = this.owner.editorModule.getLineInfo(blockInfo.paragraph, blockInfo.offset);\n textPosition.setPositionForLineWidget(lineInfo.line, lineInfo.offset);\n return textPosition;\n };\n /**\n * Add modified properties for section format\n * @param {WSectionFormat} format\n * @param {string} property\n * @param {Object} value\n * @private\n */\n BaseHistoryInfo.prototype.addModifiedPropertiesForSection = function (format, property, value) {\n if (this.editorHistory.isUndoing || this.editorHistory.isRedoing) {\n var modifiedProperties = this.modifiedProperties;\n var previousFormat = (this.currentPropertyIndex < modifiedProperties.length ?\n modifiedProperties[this.currentPropertyIndex] : modifiedProperties[modifiedProperties.length - 1]);\n if (isNullOrUndefined(property)) {\n value = previousFormat;\n if (this.currentPropertyIndex < this.modifiedProperties.length) {\n this.modifiedProperties[this.currentPropertyIndex] = format.cloneFormat();\n }\n else {\n this.modifiedProperties[this.modifiedProperties.length - 1] = format.cloneFormat();\n }\n }\n else {\n value = previousFormat.getPropertyValue(property);\n previousFormat.copyFormat(format);\n }\n this.currentPropertyIndex++;\n }\n else {\n if (isNullOrUndefined(property)) {\n this.modifiedProperties.push(format.cloneFormat());\n }\n else {\n var currentFormat = new WSectionFormat();\n currentFormat.copyFormat(format);\n this.modifiedProperties.push(currentFormat);\n }\n }\n return value;\n };\n /**\n * Add the modified properties for character format\n * @param {WCharacterFormat} format\n * @param {string} property\n * @param {Object} value\n * @private\n */\n BaseHistoryInfo.prototype.addModifiedProperties = function (format, property, value) {\n if (this.editorHistory.isUndoing || this.editorHistory.isRedoing) {\n // tslint:disable-next-line:max-line-length \n var previousFormat = (this.currentPropertyIndex < this.modifiedProperties.length ? this.modifiedProperties[this.currentPropertyIndex] : this.modifiedProperties[this.modifiedProperties.length - 1]);\n var skipRemove = false;\n if (format.ownerBase instanceof ElementBox) {\n var prevLength = this.modifiedNodeLength[this.currentPropertyIndex];\n if (format.ownerBase.length < prevLength) {\n skipRemove = true;\n this.modifiedNodeLength[this.currentPropertyIndex] = format.ownerBase.length;\n this.modifiedNodeLength.splice(this.currentPropertyIndex + 1, 0, prevLength - format.ownerBase.length);\n //Adds a copy of character format at next position for splitted inline.\n var nextFormat = new WCharacterFormat(undefined);\n nextFormat.copyFormat(previousFormat);\n this.modifiedProperties.splice(this.currentPropertyIndex + 1, 0, nextFormat);\n }\n }\n if (this.action === 'ClearCharacterFormat') {\n if (this.editorHistory.isUndoing) {\n value = previousFormat;\n if (!skipRemove) {\n this.modifiedProperties.splice(this.currentPropertyIndex, 1);\n this.currentPropertyIndex--;\n }\n }\n else {\n this.modifiedProperties.push(format.cloneFormat());\n }\n }\n else {\n value = previousFormat;\n if (this.currentPropertyIndex < this.modifiedProperties.length) {\n this.modifiedProperties[this.currentPropertyIndex] = format.cloneFormat();\n }\n else {\n this.modifiedProperties[this.modifiedProperties.length - 1] = format.cloneFormat();\n }\n }\n this.currentPropertyIndex++;\n }\n else {\n if (isNullOrUndefined(property)) {\n this.modifiedProperties.push(format.cloneFormat());\n }\n else {\n var currentFormat = new WCharacterFormat(undefined);\n currentFormat.copyFormat(format);\n this.modifiedProperties.push(currentFormat);\n }\n if (format.ownerBase instanceof ElementBox) {\n this.modifiedNodeLength.push(format.ownerBase.length);\n }\n else {\n this.modifiedNodeLength.push(0);\n }\n }\n return value;\n };\n /**\n * Add the modified properties for paragraph format\n * @param {WParagraphFormat} format\n * @param {string} property\n * @param {Object} value\n * @private\n */\n BaseHistoryInfo.prototype.addModifiedPropertiesForParagraphFormat = function (format, property, value) {\n if (this.editorHistory.isUndoing || this.editorHistory.isRedoing) {\n // tslint:disable-next-line:max-line-length\n var previousFormat = (this.currentPropertyIndex < this.modifiedProperties.length ? this.modifiedProperties[this.currentPropertyIndex] : this.modifiedProperties[this.modifiedProperties.length - 1]);\n if (this.action === 'ClearParagraphFormat') {\n if (this.editorHistory.isUndoing) {\n value = previousFormat;\n this.modifiedProperties.splice(this.currentPropertyIndex, 1);\n this.currentPropertyIndex--;\n }\n else {\n this.modifiedProperties.push(format.cloneFormat());\n }\n this.currentPropertyIndex++;\n return value;\n }\n if (isNullOrUndefined(property)) {\n value = previousFormat;\n if (this.currentPropertyIndex < this.modifiedProperties.length) {\n this.modifiedProperties[this.currentPropertyIndex] = format.cloneFormat();\n }\n else {\n this.modifiedProperties[this.modifiedProperties.length - 1] = format.cloneFormat();\n }\n this.currentPropertyIndex++;\n return value;\n }\n if (property === 'listFormat') {\n value = new WParagraphFormat(undefined);\n value.copyFormat(previousFormat);\n previousFormat.listFormat = new WListFormat();\n previousFormat.listFormat.copyFormat(format.listFormat);\n this.currentPropertyIndex++;\n return value;\n }\n if (property === 'styleName') {\n if (!isNullOrUndefined(previousFormat.baseStyle)) {\n value = new WParagraphStyle();\n value.copyStyle(previousFormat.baseStyle);\n this.currentPropertyIndex++;\n return value;\n }\n else {\n return undefined;\n }\n }\n value = previousFormat.getPropertyValue(property);\n previousFormat.copyFormat(format);\n this.currentPropertyIndex++;\n }\n else {\n if (isNullOrUndefined(property)) {\n this.modifiedProperties.push(format.cloneFormat());\n }\n else {\n var currentFormat = new WParagraphFormat(undefined);\n currentFormat.copyFormat(format);\n this.modifiedProperties.push(currentFormat);\n }\n }\n return value;\n };\n /**\n * @private\n */\n BaseHistoryInfo.prototype.addModifiedPropertiesForContinueNumbering = function (paragraphFormat, value) {\n if (this.editorHistory.isUndoing || this.editorHistory.isRedoing) {\n // tslint:disable-next-line:max-line-length\n var previousFormat = (this.currentPropertyIndex < this.modifiedProperties.length ? this.modifiedProperties[this.currentPropertyIndex] : this.modifiedProperties[this.modifiedProperties.length - 1]);\n value = previousFormat;\n if (this.currentPropertyIndex < this.modifiedProperties.length) {\n this.modifiedProperties[this.currentPropertyIndex] = paragraphFormat.cloneFormat();\n }\n else {\n this.modifiedProperties[this.modifiedProperties.length - 1] = paragraphFormat.cloneFormat();\n }\n this.currentPropertyIndex++;\n return value;\n }\n else {\n var currentFormat = new WParagraphFormat();\n currentFormat.copyFormat(paragraphFormat);\n this.modifiedProperties.push(currentFormat);\n }\n return value;\n };\n /**\n * @param listFormat\n * @param value\n * @private\n */\n BaseHistoryInfo.prototype.addModifiedPropertiesForRestartNumbering = function (listFormat, value) {\n if (this.editorHistory.isUndoing || this.editorHistory.isRedoing) {\n // tslint:disable-next-line:max-line-length\n var listId = (this.currentPropertyIndex < this.modifiedProperties.length ? this.modifiedProperties[this.currentPropertyIndex] : this.modifiedProperties[this.modifiedProperties.length - 1]);\n value = listId;\n if (this.currentPropertyIndex < this.modifiedProperties.length) {\n this.modifiedProperties[this.currentPropertyIndex] = listFormat.listId;\n }\n else {\n this.modifiedProperties[this.modifiedProperties.length - 1] = listFormat.listId;\n }\n this.currentPropertyIndex++;\n return value;\n }\n else {\n this.modifiedProperties.push(listFormat.listId);\n }\n return value;\n };\n /**\n * Add modified properties for list format\n * @param {WListLevel} listLevel\n * @private\n */\n BaseHistoryInfo.prototype.addModifiedPropertiesForList = function (listLevel) {\n var value;\n if (this.editorHistory.isUndoing || this.editorHistory.isRedoing) {\n // tslint:disable-next-line:max-line-length\n var previousLevel = (this.currentPropertyIndex < this.modifiedProperties.length ? this.modifiedProperties[this.currentPropertyIndex] : this.modifiedProperties[this.modifiedProperties.length - 1]);\n value = previousLevel;\n previousLevel = new ModifiedLevel(listLevel, this.owner.editorModule.cloneListLevel(listLevel));\n if (this.currentPropertyIndex < this.modifiedProperties.length) {\n this.modifiedProperties[this.currentPropertyIndex] = previousLevel;\n }\n else {\n this.modifiedProperties[this.modifiedProperties.length - 1] = previousLevel;\n }\n this.currentPropertyIndex++;\n }\n else {\n this.modifiedProperties.push(new ModifiedLevel(listLevel, this.owner.editorModule.cloneListLevel(listLevel)));\n value = listLevel;\n }\n return value;\n };\n /**\n * Revert the properties\n * @param {SelectionRange} selectionRange\n */\n BaseHistoryInfo.prototype.revertProperties = function () {\n this.editorHistory.currentBaseHistoryInfo = this;\n this.currentPropertyIndex = 0;\n var property = this.getProperty();\n this.viewer.owner.editorModule.setOffsetValue(this.viewer.selection);\n if (this.action === 'ClearCharacterFormat' || this.modifiedProperties[0] instanceof WCharacterFormat) {\n if (this.action === 'ListCharacterFormat') {\n this.owner.editorModule.updateListCharacterFormat(this.viewer.selection, property, undefined);\n return;\n }\n this.owner.editorModule.updateSelectionCharacterFormatting(property, undefined, false);\n }\n else if (this.action === 'ClearParagraphFormat' || this.modifiedProperties[0] instanceof WParagraphFormat) {\n if (this.action === 'ContinueNumbering') {\n // tslint:disable-next-line:max-line-length\n this.owner.editorModule.revertContinueNumbering(this.owner.selection, this.modifiedProperties[0]);\n return;\n }\n if (this.action === 'StyleName' && this.modifiedProperties[0] instanceof WParagraphFormat) {\n // tslint:disable-next-line:max-line-length\n this.owner.editorModule.updateSelectionParagraphFormatting(property, this.modifiedProperties[0].baseStyle, false);\n return;\n }\n this.owner.editorModule.updateSelectionParagraphFormatting(property, undefined, false);\n }\n else if (this.modifiedProperties[0] instanceof WSectionFormat) {\n this.owner.editorModule.updateSectionFormat(property, undefined);\n }\n else if (this.action === 'RestartNumbering') {\n this.owner.editorModule.restartListAtInternal(this.owner.selection, this.modifiedProperties[0]);\n return;\n }\n else if (this.modifiedProperties[0] instanceof ImageFormat) {\n this.owner.selection.updateImageSize(this.modifiedProperties[0]);\n }\n else if (this.modifiedProperties[0] instanceof ModifiedLevel) {\n var modified = new Dictionary();\n for (var i = 0; i < this.modifiedProperties.length; i++) {\n var modifiedLevel = this.modifiedProperties[i];\n // modified.modifiedLevels.add(modifiedLevel.ownerListLevel.levelNumber, modifiedLevel);\n modified.add(i, modifiedLevel);\n }\n this.editorHistory.updateListChanges(modified);\n modified.destroy();\n modified = undefined;\n }\n else if (this.modifiedProperties[0] instanceof WTableFormat) {\n this.owner.editorModule.updateTableFormat(this.owner.selection, property, undefined);\n }\n else if (this.modifiedProperties[0] instanceof WCellFormat) {\n this.owner.isShiftingEnabled = true;\n this.owner.editorModule.updateCellFormat(this.owner.selection, property, undefined);\n }\n else if (this.modifiedProperties[0] instanceof WRowFormat) {\n this.owner.editorModule.updateRowFormat(this.owner.selection, property, undefined);\n }\n this.currentPropertyIndex = 0;\n if (this.action === 'ClearCharacterFormat' || this.action === 'ClearParagraphFormat') {\n this.owner.editorModule.getOffsetValue(this.viewer.selection);\n }\n };\n /**\n * Add modified properties for cell options dialog\n * @param {WCellFormat} format\n * @param {WTable} table\n * @private\n */\n BaseHistoryInfo.prototype.addModifiedCellOptions = function (applyFormat, format, table) {\n var currentFormat;\n if (isNullOrUndefined(applyFormat.bottomMargin) && isNullOrUndefined(applyFormat.topMargin)\n && isNullOrUndefined(applyFormat.rightMargin) && isNullOrUndefined(applyFormat.leftMargin)) {\n currentFormat = this.copyCellOptions(table.tableFormat);\n }\n else {\n currentFormat = this.copyCellOptions(applyFormat);\n }\n if (this.editorHistory.isUndoing || this.editorHistory.isRedoing) {\n // tslint:disable-next-line:max-line-length\n var previousFormat = (this.currentPropertyIndex < this.modifiedProperties.length ? this.modifiedProperties[this.currentPropertyIndex] : this.modifiedProperties[this.modifiedProperties.length - 1]);\n format = previousFormat;\n if (this.currentPropertyIndex < this.modifiedProperties.length) {\n this.modifiedProperties[this.currentPropertyIndex] = this.copyCellOptions(applyFormat);\n }\n else {\n this.modifiedProperties[this.modifiedProperties.length - 1] = this.copyCellOptions(applyFormat);\n }\n this.currentPropertyIndex++;\n return format;\n }\n else {\n this.modifiedProperties.push(currentFormat);\n }\n return format;\n };\n BaseHistoryInfo.prototype.copyCellOptions = function (format) {\n var cellFormat = new WCellFormat();\n cellFormat.topMargin = format.topMargin;\n cellFormat.rightMargin = format.rightMargin;\n cellFormat.bottomMargin = format.bottomMargin;\n cellFormat.leftMargin = format.leftMargin;\n return cellFormat;\n };\n /**\n * Add modified properties for cell options dialog\n * @param {WTableFormat} format\n * @private\n */\n BaseHistoryInfo.prototype.addModifiedTableOptions = function (format) {\n var currentFormat = this.copyTableOptions(format);\n if (this.editorHistory.isUndoing || this.editorHistory.isRedoing) {\n // tslint:disable-next-line:max-line-length \n var previousFormat = (this.currentPropertyIndex < this.modifiedProperties.length ? this.modifiedProperties[this.currentPropertyIndex] : this.modifiedProperties[this.modifiedProperties.length - 1]);\n if (this.currentPropertyIndex < this.modifiedProperties.length) {\n this.modifiedProperties.splice(this.currentPropertyIndex, 1, currentFormat);\n }\n else {\n this.modifiedProperties.splice(this.modifiedProperties.length - 1, 1, currentFormat);\n }\n this.currentPropertyIndex++;\n }\n else {\n this.modifiedProperties.push(currentFormat);\n }\n };\n BaseHistoryInfo.prototype.copyTableOptions = function (format) {\n var tableFormat = new WTableFormat();\n tableFormat.topMargin = format.topMargin;\n tableFormat.rightMargin = format.rightMargin;\n tableFormat.bottomMargin = format.bottomMargin;\n tableFormat.leftMargin = format.leftMargin;\n tableFormat.cellSpacing = format.cellSpacing;\n return tableFormat;\n };\n BaseHistoryInfo.prototype.getProperty = function () {\n switch (this.action) {\n case 'Bold':\n return 'bold';\n case 'Italic':\n return 'italic';\n case 'FontColor':\n return 'fontColor';\n case 'FontFamily':\n return 'fontFamily';\n case 'FontSize':\n return 'fontSize';\n case 'HighlightColor':\n return 'highlightColor';\n case 'BaselineAlignment':\n return 'baselineAlignment';\n case 'Strikethrough':\n return 'strikethrough';\n case 'Underline':\n return 'underline';\n case 'AfterSpacing':\n return 'afterSpacing';\n case 'BeforeSpacing':\n return 'beforeSpacing';\n case 'LeftIndent':\n return 'leftIndent';\n case 'RightIndent':\n return 'rightIndent';\n case 'FirstLineIndent':\n return 'firstLineIndent';\n case 'LineSpacingType':\n return 'lineSpacingType';\n case 'LineSpacing':\n return 'lineSpacing';\n case 'TextAlignment':\n return 'textAlignment';\n case 'ListFormat':\n return 'listFormat';\n case 'PageHeight':\n return 'pageHeight';\n case 'PageWidth':\n return 'pageWidth';\n case 'TableAlignment':\n return 'tableAlignment';\n case 'TableLeftIndent':\n return 'leftIndent';\n case 'DefaultCellSpacing':\n return 'cellSpacing';\n case 'LeftMargin':\n case 'CellLeftMargin':\n case 'DefaultCellLeftMargin':\n return 'leftMargin';\n case 'RightMargin':\n case 'CellRightMargin':\n case 'DefaultCellRightMargin':\n return 'rightMargin';\n case 'TopMargin':\n case 'CellTopMargin':\n case 'DefaultCellTopMargin':\n return 'topMargin';\n case 'BottomMargin':\n case 'CellBottomMargin':\n case 'DefaultCellBottomMargin':\n return 'bottomMargin';\n case 'CellContentVerticalAlignment':\n return 'verticalAlignment';\n case 'RowHeight':\n return 'height';\n case 'RowHeightType':\n return 'heightType';\n case 'RowHeader':\n return 'isHeader';\n case 'AllowBreakAcrossPages':\n return 'allowBreakAcrossPages';\n case 'TablePreferredWidth':\n case 'CellPreferredWidth':\n return 'preferredWidth';\n case 'TablePreferredWidthType':\n case 'CellPreferredWidthType':\n return 'preferredWidthType';\n case 'Shading':\n return 'shading';\n case 'StyleName':\n return 'styleName';\n }\n return undefined;\n };\n BaseHistoryInfo.prototype.getCharacterPropertyValue = function (property, modifiedProperty) {\n var value;\n if (property === 'bold') {\n value = modifiedProperty.bold;\n }\n else if (property === 'italic') {\n value = modifiedProperty.italic;\n }\n else if (property === 'fontColor') {\n value = modifiedProperty.fontColor;\n }\n else if (property === 'fontFamily') {\n value = modifiedProperty.fontFamily;\n }\n else if (property === 'fontSize') {\n value = modifiedProperty.fontSize;\n }\n else if (property === 'highlightColor') {\n value = modifiedProperty.highlightColor;\n }\n else if (property === 'baselineAlignment') {\n value = modifiedProperty.baselineAlignment;\n }\n else if (property === 'strikethrough') {\n value = modifiedProperty.strikethrough;\n }\n else if (property === 'underline') {\n value = modifiedProperty.underline;\n }\n return value;\n };\n /**\n * Add modified properties for table format\n * @param {WTableFormat} format\n * @param {string} property\n * @param {Object} value\n * @private\n */\n BaseHistoryInfo.prototype.addModifiedTableProperties = function (format, property, value) {\n if (this.editorHistory.isUndoing || this.editorHistory.isRedoing) {\n // tslint:disable-next-line:max-line-length\n var previousTableFormat = (this.currentPropertyIndex < this.modifiedProperties.length ? this.modifiedProperties[this.currentPropertyIndex] : this.modifiedProperties[this.modifiedProperties.length - 1]);\n if (isNullOrUndefined(property)) {\n value = previousTableFormat;\n if (this.currentPropertyIndex < this.modifiedProperties.length) {\n this.modifiedProperties[this.currentPropertyIndex] = format.cloneFormat();\n }\n else {\n this.modifiedProperties[this.modifiedProperties.length - 1] = format.cloneFormat();\n }\n this.currentPropertyIndex++;\n return value;\n }\n if (property === 'shading') {\n value = previousTableFormat.shading;\n }\n else {\n value = previousTableFormat.getPropertyValue(property);\n }\n previousTableFormat.copyFormat(format);\n this.currentPropertyIndex++;\n }\n else {\n var currentFormat = new WTableFormat();\n currentFormat.copyFormat(format);\n this.modifiedProperties.push(currentFormat);\n }\n return value;\n };\n /**\n * Add modified properties for row format\n * @param {WRowFormat} rowFormat\n * @param {string} property\n * @param {Object} value\n * @private\n */\n BaseHistoryInfo.prototype.addModifiedRowProperties = function (rowFormat, property, value) {\n if (this.editorHistory.isUndoing || this.editorHistory.isRedoing) {\n // tslint:disable-next-line:max-line-length\n var previousFormat = (this.currentPropertyIndex < this.modifiedProperties.length ? this.modifiedProperties[this.currentPropertyIndex] : this.modifiedProperties[this.modifiedProperties.length - 1]);\n if (isNullOrUndefined(property)) {\n value = previousFormat;\n if (this.currentPropertyIndex < this.modifiedProperties.length) {\n this.modifiedProperties[this.currentPropertyIndex] = rowFormat.cloneFormat();\n }\n else {\n this.modifiedProperties[this.modifiedProperties.length - 1] = rowFormat.cloneFormat();\n }\n this.currentPropertyIndex++;\n return value;\n }\n value = previousFormat.getPropertyValue(property);\n previousFormat.copyFormat(rowFormat);\n this.currentPropertyIndex++;\n }\n else {\n var currentFormat = new WRowFormat();\n currentFormat.copyFormat(rowFormat);\n this.modifiedProperties.push(currentFormat);\n }\n return value;\n };\n /**\n * Add modified properties for cell format\n * @param {WCellFormat} cellFormat\n * @param {string} property\n * @param {Object} value\n * @private\n */\n BaseHistoryInfo.prototype.addModifiedCellProperties = function (cellFormat, property, value) {\n if (this.editorHistory.isUndoing || this.editorHistory.isRedoing) {\n // tslint:disable-next-line:max-line-length\n var previousFormat = (this.currentPropertyIndex < this.modifiedProperties.length ? this.modifiedProperties[this.currentPropertyIndex] : this.modifiedProperties[this.modifiedProperties.length - 1]);\n if (isNullOrUndefined(property)) {\n value = previousFormat;\n if (this.currentPropertyIndex < this.modifiedProperties.length) {\n this.modifiedProperties[this.currentPropertyIndex] = cellFormat.cloneFormat();\n }\n else {\n this.modifiedProperties[this.modifiedProperties.length - 1] = cellFormat.cloneFormat();\n }\n this.currentPropertyIndex++;\n return value;\n }\n if (property === 'shading') {\n value = previousFormat.shading;\n }\n else {\n value = previousFormat.getPropertyValue(property);\n }\n previousFormat.copyFormat(cellFormat);\n this.currentPropertyIndex++;\n }\n else {\n var currentFormat = new WCellFormat();\n currentFormat.copyFormat(cellFormat);\n this.modifiedProperties.push(currentFormat);\n }\n return value;\n };\n /**\n * @private\n */\n BaseHistoryInfo.prototype.destroy = function () {\n this.selectionStart = undefined;\n this.selectionEnd = undefined;\n this.insertPosition = undefined;\n this.endPosition = undefined;\n if (!isNullOrUndefined(this.modifiedNodeLength)) {\n this.modifiedNodeLength = [];\n this.modifiedNodeLength = undefined;\n }\n if (!isNullOrUndefined(this.modifiedProperties)) {\n for (var i = 0; i < this.modifiedProperties.length; i++) {\n var property = this.modifiedProperties[i];\n if (property instanceof WCharacterFormat) {\n property.destroy();\n }\n else if (property instanceof WParagraphFormat) {\n property.destroy();\n }\n else if (property instanceof WSectionFormat) {\n property.destroy();\n }\n else if (property instanceof ModifiedLevel) {\n property.destroy();\n }\n this.modifiedProperties.splice(this.modifiedProperties.indexOf(property), 1);\n i--;\n }\n this.modifiedPropertiesIn = undefined;\n }\n if (!isNullOrUndefined(this.removedNodes)) {\n for (var i = 0; i < this.removedNodes.length; i++) {\n var node = this.removedNodes[i];\n if (node instanceof ParagraphWidget) {\n node.destroyInternal(this.viewer);\n }\n else if (node instanceof ElementBox) {\n node.destroy();\n }\n this.removedNodes.splice(this.removedNodes.indexOf(node), 1);\n i--;\n }\n this.removedNodesIn = undefined;\n }\n this.ownerIn = undefined;\n };\n return BaseHistoryInfo;\n}());\nexport { BaseHistoryInfo };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { PageLayoutViewer } from '../index';\nimport { Dictionary } from '../../base/dictionary';\nimport { ImageFormat } from '../selection/selection-helper';\nimport { Point, HelperMethods } from './editor-helper';\nimport { BaseHistoryInfo } from '../editor-history/base-history-info';\n/**\n * Image resizer implementation.\n */\nvar ImageResizer = /** @class */ (function () {\n /**\n * Constructor for image resizer module.\n * @param {DocumentEditor} node\n * @param {LayoutViewer} viewer\n * @private\n */\n function ImageResizer(node, viewer) {\n /**\n * @private\n */\n this.resizeContainerDiv = undefined;\n /**\n * @private\n */\n this.topLeftRect = undefined;\n /**\n * @private\n */\n this.topMiddleRect = undefined;\n /**\n * @private\n */\n this.topRightRect = undefined;\n /**\n * @private\n */\n this.bottomLeftRect = undefined;\n /**\n * @private\n */\n this.bottomMiddleRect = undefined;\n /**\n * @private\n */\n this.bottomRightRect = undefined;\n /**\n * @private\n */\n this.leftMiddleRect = undefined;\n /**\n * @private\n */\n this.rightMiddleRect = undefined;\n /**\n * @private\n */\n this.topLeftRectParent = undefined;\n /**\n * @private\n */\n this.topMiddleRectParent = undefined;\n /**\n * @private\n */\n this.topRightRectParent = undefined;\n /**\n * @private\n */\n this.bottomLeftRectParent = undefined;\n /**\n * @private\n */\n this.bottomMiddleRectParent = undefined;\n /**\n * @private\n */\n this.bottomRightRectParent = undefined;\n /**\n * @private\n */\n this.leftMiddleRectParent = undefined;\n /**\n * @private\n */\n this.rightMiddleRectParent = undefined;\n /**\n * @private\n */\n this.resizeMarkSizeIn = 7;\n /**\n * @private\n */\n this.selectedImageWidget = undefined;\n /**\n * @private\n */\n this.baseHistoryInfo = undefined;\n /**\n * @private\n */\n this.isImageResizing = false;\n /**\n * @private\n */\n this.isImageResizerVisible = false;\n /**\n * @private\n */\n this.isImageMoveToNextPage = false;\n /**\n * @private\n */\n this.selectedResizeElement = undefined;\n /**\n * @private\n */\n this.topValue = undefined;\n /**\n * @private\n */\n this.leftValue = undefined;\n this.owner = node;\n this.selectedImageWidget = new Dictionary();\n this.viewer = viewer;\n this.imageResizerPoints = new ImageResizingPoints();\n if (isNullOrUndefined(this.imageResizerDiv) && this.viewer && this.viewer.pageContainer) {\n this.initializeImageResizer();\n }\n }\n Object.defineProperty(ImageResizer.prototype, \"currentImageElementBox\", {\n /**\n * Gets or Sets the current image element box.\n * @private\n */\n get: function () {\n return this.currentImageElementBoxIn;\n },\n /**\n * @private\n */\n set: function (value) {\n this.currentImageElementBoxIn = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ImageResizer.prototype, \"resizeMarkSize\", {\n /**\n * Gets or Sets the resize mark size.\n * @private\n */\n get: function () {\n return this.resizeMarkSizeIn;\n },\n /**\n * @private\n */\n set: function (value) {\n this.resizeMarkSizeIn = value;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Gets module name.\n */\n ImageResizer.prototype.getModuleName = function () {\n return 'ImageResizer';\n };\n //Image Resizing Methods\n /**\n * Sets image resizer position.\n * @param {number} x - Specifies for image resizer left value.\n * @param {number} y - Specifies for image resizer top value.\n * @param {number} width - Specifies for image resizer width value.\n * @param {number} height - Specifies for image resizer height value.\n * @private\n */\n ImageResizer.prototype.setImageResizerPositions = function (x, y, width, height) {\n this.imageResizerDivElement.style.top = y.toString() + 'px';\n this.imageResizerDivElement.style.left = x.toString() + 'px';\n this.imageResizerDivElement.style.borderWidth = '0px';\n this.imageResizerDivElement.style.height = height + 'px';\n this.imageResizerDivElement.style.width = width + 'px';\n this.imageResizerDivElement.style.backgroundColor = 'transparent';\n this.imageResizerDivElement.style.overflow = 'hidden';\n this.imageResizerDivElement.style.position = 'absolute';\n };\n /**\n * Creates image resizer DOM element.\n * @private\n */\n ImageResizer.prototype.initializeImageResizer = function () {\n this.imageResizerDivElement = document.createElement('div');\n this.imageResizerDivElement.style.zIndex = '1';\n this.imageResizerDivElement.style.display = 'none';\n this.viewer.pageContainer.appendChild(this.imageResizerDivElement);\n };\n /**\n * Position an image resizer\n * @param {ImageElementBox} elementBox - Specifies the image position.\n * @private\n */\n ImageResizer.prototype.positionImageResizer = function (elementBox) {\n this.selectedImageWidget.clear();\n // Initializes the image resizer on demand, i.e at the time of selecting an image for the first time.\n var resizeDiv;\n if (!isNullOrUndefined(this.viewer.currentPage)) {\n resizeDiv = this.imageResizerDivElement;\n }\n if (!isNullOrUndefined(resizeDiv) && !resizeDiv.contains(this.imageResizerDiv)) {\n this.imageResizerDiv = this.initResizeMarks(resizeDiv, this);\n }\n this.imageResizerDiv.style.width = (elementBox.width) + 'px';\n this.imageResizerDiv.style.height = (elementBox.height) + 'px';\n this.currentImageElementBox = elementBox;\n var lineWidget = elementBox.line;\n var top = this.viewer.selection.getTop(lineWidget) + elementBox.margin.top;\n var left = this.viewer.selection.getLeftInternal(lineWidget, elementBox, 0);\n var page = this.viewer.selection.getPage(lineWidget.paragraph);\n this.currentPage = page;\n var x = 0;\n var y = 0;\n if (!isNullOrUndefined(resizeDiv)) {\n this.imageResizerDivElement.style.display = 'block';\n resizeDiv.style.width = page.boundingRectangle.width + 'px';\n resizeDiv.style.height = page.boundingRectangle.height + 'px';\n resizeDiv.style.left = page.boundingRectangle.x + 'px';\n resizeDiv.style.top = page.boundingRectangle.y + 'px';\n resizeDiv.style.borderWidth = '0px';\n resizeDiv.style.backgroundColor = 'transparent';\n resizeDiv.style.overflow = 'hidden';\n resizeDiv.style.position = 'absolute';\n }\n var horizontalWidth = 0;\n var pageWidth = this.viewer.getPageWidth(page);\n var pagelayout = this.viewer;\n // tslint:disable-next-line:max-line-length\n horizontalWidth = parseFloat(this.imageResizerDivElement.style.width);\n x = (this.viewer.visibleBounds.width - horizontalWidth * this.viewer.zoomFactor) / 2;\n if (x < 30) {\n x = 30;\n }\n if (pageWidth < horizontalWidth) {\n x += (horizontalWidth - pageWidth) * this.viewer.zoomFactor / 2;\n }\n // tslint:disable-next-line:max-line-length \n y = page.boundingRectangle.y * this.viewer.zoomFactor + (this.viewer.pages.indexOf(page) + 1) * 20 * (1 - this.viewer.zoomFactor);\n var currentPageDiv = this.imageResizerDivElement;\n var currentPageDivWidth = parseFloat(currentPageDiv.style.width);\n var currentPageDivHeight = parseFloat(currentPageDiv.style.height);\n var imageResizerDivWidth = parseFloat(this.imageResizerDiv.style.width);\n var imageResizerDivHeight = parseFloat(this.imageResizerDiv.style.height);\n var margin = (this.resizeMarkSize - 1) / 2;\n var width = imageResizerDivWidth + 2 * margin;\n var height = imageResizerDivHeight + 2 * margin;\n if (width > (currentPageDivWidth - left) * this.viewer.zoomFactor + margin) {\n width = (currentPageDivWidth - left) * this.viewer.zoomFactor;\n }\n if (height > (currentPageDivHeight - top) * this.viewer.zoomFactor + margin) {\n height = (currentPageDivHeight - top) * this.viewer.zoomFactor;\n }\n // if (width < imageResizerDivHeight + margin || height < imageResizerDivHeight + margin) {\n // }\n // tslint:disable-next-line:max-line-length\n this.imageResizerDivElement.style.width = parseInt(this.imageResizerDivElement.style.width.replace('px', ''), 10) * this.viewer.zoomFactor + 'px';\n this.imageResizerDivElement.style.height = parseInt(this.imageResizerDivElement.style.height.replace('px', ''), 10) * this.viewer.zoomFactor + 'px';\n height = this.viewer.render.getScaledValue(elementBox.height);\n width = this.viewer.render.getScaledValue(elementBox.width);\n left = this.viewer.render.getScaledValue(left);\n top = this.viewer.render.getScaledValue(top);\n this.setImageResizerPosition(left, top, width, height, this);\n if (!this.selectedImageWidget.containsKey(lineWidget)) {\n var selectedImageInfo = new SelectedImageInfo(elementBox.height, elementBox.width);\n this.selectedImageWidget.add(lineWidget, selectedImageInfo);\n }\n };\n /**\n * Shows the image resizer.\n * @private\n */\n ImageResizer.prototype.showImageResizer = function () {\n if (!isNullOrUndefined(this.imageResizerDivElement)) {\n this.imageResizerDivElement.style.display = '';\n }\n if (!isNullOrUndefined(this.resizeContainerDiv)) {\n this.resizeContainerDiv.style.display = '';\n }\n if (!isNullOrUndefined(this.bottomLeftRect)) {\n this.bottomLeftRect.style.display = '';\n this.bottomLeftRectParent.style.display = '';\n }\n if (!isNullOrUndefined(this.bottomRightRect)) {\n this.bottomRightRect.style.display = '';\n this.bottomRightRectParent.style.display = '';\n }\n if (!isNullOrUndefined(this.bottomMiddleRect)) {\n this.bottomMiddleRect.style.display = '';\n this.bottomMiddleRectParent.style.display = '';\n }\n if (!isNullOrUndefined(this.rightMiddleRect)) {\n this.rightMiddleRect.style.display = '';\n this.rightMiddleRectParent.style.display = '';\n }\n if (!isNullOrUndefined(this.topRightRect)) {\n this.topRightRect.style.display = '';\n this.topRightRectParent.style.display = '';\n }\n if (!isNullOrUndefined(this.topLeftRect)) {\n this.topLeftRect.style.display = '';\n this.topLeftRectParent.style.display = '';\n }\n if (!isNullOrUndefined(this.leftMiddleRect)) {\n this.leftMiddleRect.style.display = '';\n this.leftMiddleRectParent.style.display = '';\n }\n if (!isNullOrUndefined(this.topMiddleRect)) {\n this.topMiddleRect.style.display = '';\n this.topMiddleRectParent.style.display = '';\n }\n this.isImageResizerVisible = true;\n };\n /**\n * Hides the image resizer.\n * @private\n */\n ImageResizer.prototype.hideImageResizer = function () {\n if (!isNullOrUndefined(this.imageResizerDivElement)) {\n this.imageResizerDivElement.style.display = 'none';\n }\n if (!isNullOrUndefined(this.resizeContainerDiv)) {\n this.resizeContainerDiv.style.display = 'none';\n }\n if (!isNullOrUndefined(this.bottomLeftRect)) {\n this.bottomLeftRect.style.display = 'none';\n this.bottomLeftRectParent.style.display = 'none';\n }\n if (!isNullOrUndefined(this.bottomRightRect)) {\n this.bottomRightRect.style.display = 'none';\n this.bottomRightRectParent.style.display = 'none';\n }\n if (!isNullOrUndefined(this.bottomMiddleRect)) {\n this.bottomMiddleRect.style.display = 'none';\n this.bottomMiddleRectParent.style.display = 'none';\n }\n if (!isNullOrUndefined(this.rightMiddleRect)) {\n this.rightMiddleRect.style.display = 'none';\n this.rightMiddleRectParent.style.display = 'none';\n }\n if (!isNullOrUndefined(this.topRightRect)) {\n this.topRightRect.style.display = 'none';\n this.topRightRectParent.style.display = 'none';\n }\n if (!isNullOrUndefined(this.topLeftRect)) {\n this.topLeftRect.style.display = 'none';\n this.topLeftRectParent.style.display = 'none';\n }\n if (!isNullOrUndefined(this.leftMiddleRect)) {\n this.leftMiddleRect.style.display = 'none';\n this.leftMiddleRectParent.style.display = 'none';\n }\n if (!isNullOrUndefined(this.topMiddleRect)) {\n this.topMiddleRect.style.display = 'none';\n this.topMiddleRectParent.style.display = 'none';\n }\n this.isImageResizerVisible = false;\n this.currentPage = undefined;\n };\n /**\n * Initialize the resize marks.\n * @param {HTMLElement} resizeDiv - Specifies to appending resizer container div element.\n * @param {ImageResizer} imageResizer - Specifies to creating div element of each position.\n * @private\n */\n /* tslint:disable */\n ImageResizer.prototype.initResizeMarks = function (resizeDiv, imageResizer) {\n this.initResizeContainerDiv(imageResizer);\n resizeDiv.appendChild(imageResizer.resizeContainerDiv);\n imageResizer.topRightRectParent = document.createElement('div');\n imageResizer.topRightRectParent.style.cursor = 'ne-resize';\n imageResizer.topRightRectParent.id = this.viewer.owner.containerId + '_TopRightRectParent';\n this.applyProperties(imageResizer.topRightRectParent);\n imageResizer.topRightRectParent.style.width = !this.viewer.isTouchInput ? '14px' : '30px';\n imageResizer.topRightRectParent.style.height = !this.viewer.isTouchInput ? '14px' : '30px';\n imageResizer.topRightRectParent.style.opacity = '-1';\n resizeDiv.appendChild(imageResizer.topRightRectParent);\n imageResizer.topRightRect = document.createElement('div');\n imageResizer.topRightRect.id = this.viewer.owner.containerId + '_TopRightRect';\n imageResizer.topRightRect.style.cursor = 'ne-resize';\n this.applyProperties(imageResizer.topRightRect);\n resizeDiv.appendChild(imageResizer.topRightRect);\n imageResizer.topLeftRectParent = document.createElement('div');\n imageResizer.topLeftRectParent.style.cursor = 'nw-resize';\n imageResizer.topLeftRectParent.id = this.viewer.owner.containerId + '_TopLeftRectParent';\n this.applyProperties(imageResizer.topLeftRectParent);\n imageResizer.topLeftRectParent.style.width = !this.viewer.isTouchInput ? '14px' : '30px';\n imageResizer.topLeftRectParent.style.height = !this.viewer.isTouchInput ? '14px' : '30px';\n imageResizer.topLeftRectParent.style.opacity = '-1';\n resizeDiv.appendChild(imageResizer.topLeftRectParent);\n imageResizer.topLeftRect = document.createElement('div');\n imageResizer.topLeftRect.id = this.viewer.owner.containerId + '_TopLeftRect';\n imageResizer.topLeftRect.style.cursor = 'nw-resize';\n this.applyProperties(imageResizer.topLeftRect);\n resizeDiv.appendChild(imageResizer.topLeftRect);\n imageResizer.topMiddleRectParent = document.createElement('div');\n imageResizer.topMiddleRectParent.style.cursor = 'n-resize';\n imageResizer.topMiddleRectParent.id = this.viewer.owner.containerId + '_TopMiddleRectParent';\n this.applyProperties(imageResizer.topMiddleRectParent);\n imageResizer.topMiddleRectParent.style.width = !this.viewer.isTouchInput ? '14px' : '30px';\n imageResizer.topMiddleRectParent.style.height = !this.viewer.isTouchInput ? '14px' : '30px';\n imageResizer.topMiddleRectParent.style.opacity = '-1';\n resizeDiv.appendChild(imageResizer.topMiddleRectParent);\n imageResizer.topMiddleRect = document.createElement('div');\n imageResizer.topMiddleRect.id = this.viewer.owner.containerId + '_TopMiddleRect';\n imageResizer.topMiddleRect.style.cursor = 'n-resize';\n this.applyProperties(imageResizer.topMiddleRect);\n resizeDiv.appendChild(imageResizer.topMiddleRect);\n imageResizer.bottomRightRectParent = document.createElement('div');\n imageResizer.bottomRightRectParent.style.cursor = 'se-resize';\n imageResizer.bottomRightRectParent.id = this.viewer.owner.containerId + '_BottomRightRectParent';\n this.applyProperties(imageResizer.bottomRightRectParent);\n imageResizer.bottomRightRectParent.style.width = !this.viewer.isTouchInput ? '14px' : '30px';\n imageResizer.bottomRightRectParent.style.height = !this.viewer.isTouchInput ? '14px' : '30px';\n imageResizer.bottomRightRectParent.style.opacity = '-1';\n resizeDiv.appendChild(imageResizer.bottomRightRectParent);\n imageResizer.bottomRightRect = document.createElement('div');\n imageResizer.bottomRightRect.id = this.viewer.owner.containerId + '_BottomRightRect';\n imageResizer.bottomRightRect.style.cursor = 'se-resize';\n this.applyProperties(imageResizer.bottomRightRect);\n resizeDiv.appendChild(imageResizer.bottomRightRect);\n imageResizer.bottomLeftRectParent = document.createElement('div');\n imageResizer.bottomLeftRectParent.style.cursor = 'sw-resize';\n imageResizer.bottomLeftRectParent.id = this.viewer.owner.containerId + '_BottomLeftRectParent';\n this.applyProperties(imageResizer.bottomLeftRectParent);\n imageResizer.bottomLeftRectParent.style.width = !this.viewer.isTouchInput ? '14px' : '30px';\n imageResizer.bottomLeftRectParent.style.height = !this.viewer.isTouchInput ? '14px' : '30px';\n imageResizer.bottomLeftRectParent.style.opacity = '-1';\n resizeDiv.appendChild(imageResizer.bottomLeftRectParent);\n imageResizer.bottomLeftRect = document.createElement('div');\n imageResizer.bottomLeftRect.id = this.viewer.owner.containerId + '_BottomLeftRect';\n imageResizer.bottomLeftRect.style.cursor = 'sw-resize';\n this.applyProperties(imageResizer.bottomLeftRect);\n resizeDiv.appendChild(imageResizer.bottomLeftRect);\n imageResizer.bottomMiddleRectParent = document.createElement('div');\n imageResizer.bottomMiddleRectParent.style.cursor = 's-resize';\n imageResizer.bottomMiddleRectParent.id = this.viewer.owner.containerId + '_BottomMiddleRectParent';\n this.applyProperties(imageResizer.bottomMiddleRectParent);\n imageResizer.bottomMiddleRectParent.style.width = !this.viewer.isTouchInput ? '14px' : '30px';\n imageResizer.bottomMiddleRectParent.style.height = !this.viewer.isTouchInput ? '14px' : '30px';\n imageResizer.bottomMiddleRectParent.style.opacity = '-1';\n resizeDiv.appendChild(imageResizer.bottomMiddleRectParent);\n imageResizer.bottomMiddleRect = document.createElement('div');\n imageResizer.bottomMiddleRect.id = this.viewer.owner.containerId + '_BottomMiddleRect';\n imageResizer.bottomMiddleRect.style.cursor = 's-resize';\n this.applyProperties(imageResizer.bottomMiddleRect);\n resizeDiv.appendChild(imageResizer.bottomMiddleRect);\n imageResizer.rightMiddleRectParent = document.createElement('div');\n imageResizer.rightMiddleRectParent.style.cursor = 'e-resize';\n imageResizer.rightMiddleRectParent.id = this.viewer.owner.containerId + '_RightMiddleRectParent';\n this.applyProperties(imageResizer.rightMiddleRectParent);\n imageResizer.rightMiddleRectParent.style.width = !this.viewer.isTouchInput ? '14px' : '30px';\n imageResizer.rightMiddleRectParent.style.height = !this.viewer.isTouchInput ? '14px' : '30px';\n imageResizer.rightMiddleRectParent.style.opacity = '-1';\n resizeDiv.appendChild(imageResizer.rightMiddleRectParent);\n imageResizer.rightMiddleRect = document.createElement('div');\n imageResizer.rightMiddleRect.id = this.viewer.owner.containerId + '_RightMiddleRect';\n imageResizer.rightMiddleRect.style.cursor = 'e-resize';\n this.applyProperties(imageResizer.rightMiddleRect);\n resizeDiv.appendChild(imageResizer.rightMiddleRect);\n imageResizer.leftMiddleRectParent = document.createElement('div');\n imageResizer.leftMiddleRectParent.style.cursor = 'w-resize';\n imageResizer.leftMiddleRectParent.id = this.viewer.owner.containerId + '_LeftMiddleRectParent';\n this.applyProperties(imageResizer.leftMiddleRectParent);\n imageResizer.leftMiddleRectParent.style.width = !this.viewer.isTouchInput ? '14px' : '30px';\n imageResizer.leftMiddleRectParent.style.height = !this.viewer.isTouchInput ? '14px' : '30px';\n imageResizer.leftMiddleRectParent.style.opacity = '-1';\n resizeDiv.appendChild(imageResizer.leftMiddleRectParent);\n imageResizer.leftMiddleRect = document.createElement('div');\n imageResizer.leftMiddleRect.id = this.viewer.owner.containerId + '_LeftMiddleRect';\n imageResizer.leftMiddleRect.style.cursor = 'w-resize';\n this.applyProperties(imageResizer.leftMiddleRect);\n resizeDiv.appendChild(imageResizer.leftMiddleRect);\n return imageResizer.resizeContainerDiv;\n };\n /**\n * Sets the image resizer position.\n * @param {number} left - Specifies for image resizer left value.\n * @param {number} top - Specifies for image resizer top value.\n * @param {number} width - Specifies for image resizer width value.\n * @param {number} height - Specifies for image resizer height value.\n * @param {ImageResizer} imageResizer - Specifies for image resizer.\n * @private\n */\n ImageResizer.prototype.setImageResizerPosition = function (left, top, width, height, imageResizer) {\n //Positions Updating For Image Resize Div\n imageResizer.resizeContainerDiv.style.width = width + 'px';\n imageResizer.resizeContainerDiv.style.height = height + 'px';\n imageResizer.resizeContainerDiv.style.left = left - 1 + 'px';\n imageResizer.resizeContainerDiv.style.top = top + 'px';\n //Positions Updating For Image Resizing Points\n imageResizer.topRightRect.style.left = ((left + width) - 5) + 'px';\n imageResizer.topRightRect.style.top = (top - 4) + 'px';\n imageResizer.topLeftRect.style.left = (left - 5) + 'px';\n imageResizer.topLeftRect.style.top = (top - 4) + 'px';\n imageResizer.topMiddleRect.style.left = ((parseFloat(imageResizer.topLeftRect.style.left) + (width / 2)) - 4) + 'px';\n imageResizer.topMiddleRect.style.top = (top - 4) + 'px';\n imageResizer.bottomRightRect.style.left = imageResizer.topRightRect.style.left;\n imageResizer.bottomRightRect.style.top = (parseFloat(imageResizer.topRightRect.style.top) + height) + 'px';\n imageResizer.bottomLeftRect.style.left = imageResizer.topLeftRect.style.left;\n imageResizer.bottomLeftRect.style.top = (parseFloat(imageResizer.topLeftRect.style.top) + height) + 'px';\n imageResizer.bottomMiddleRect.style.left = imageResizer.topMiddleRect.style.left;\n imageResizer.bottomMiddleRect.style.top = (parseFloat(imageResizer.topMiddleRect.style.top) + height) + 'px';\n imageResizer.rightMiddleRect.style.left = ((left + width) - 4) + 'px';\n imageResizer.rightMiddleRect.style.top = (parseFloat(imageResizer.topRightRect.style.top) + (height / 2)) + 'px';\n imageResizer.leftMiddleRect.style.left = imageResizer.topLeftRect.style.left;\n imageResizer.leftMiddleRect.style.top = (parseFloat(imageResizer.topLeftRect.style.top) + (height / 2)) + 'px';\n imageResizer.topRightRectParent.style.left = !this.viewer.isTouchInput ? ((left + width) - 8) + 'px' : ((left + width) - 15) + 'px';\n imageResizer.topRightRectParent.style.top = !this.viewer.isTouchInput ? (top - 7) + 'px' : (top - 15) + 'px';\n imageResizer.topLeftRectParent.style.left = !this.viewer.isTouchInput ? (left - 8) + 'px' : (left - 15) + 'px';\n imageResizer.topLeftRectParent.style.top = !this.viewer.isTouchInput ? (top - 7) + 'px' : (top - 15) + 'px';\n imageResizer.topMiddleRectParent.style.left = ((parseFloat(imageResizer.topLeftRectParent.style.left) + (width / 2)) - 4) + 'px';\n imageResizer.topMiddleRectParent.style.top = !this.viewer.isTouchInput ? (top - 7) + 'px' : (top - 15) + 'px';\n imageResizer.bottomRightRectParent.style.left = imageResizer.topRightRectParent.style.left;\n imageResizer.bottomRightRectParent.style.top = (parseFloat(imageResizer.topRightRectParent.style.top) + height) + 'px';\n imageResizer.bottomLeftRectParent.style.left = imageResizer.topLeftRectParent.style.left;\n imageResizer.bottomLeftRectParent.style.top = (parseFloat(imageResizer.topLeftRectParent.style.top) + height) + 'px';\n imageResizer.bottomMiddleRectParent.style.left = imageResizer.topMiddleRectParent.style.left;\n imageResizer.bottomMiddleRectParent.style.top = (parseFloat(imageResizer.topMiddleRectParent.style.top) + height) + 'px';\n imageResizer.rightMiddleRectParent.style.left = !this.viewer.isTouchInput ? ((left + width) - 7) + 'px' : ((left + width) - 15) + 'px';\n imageResizer.rightMiddleRectParent.style.top = (parseFloat(imageResizer.topRightRectParent.style.top) + (height / 2)) + 'px';\n imageResizer.leftMiddleRectParent.style.left = imageResizer.topLeftRectParent.style.left;\n imageResizer.leftMiddleRectParent.style.top = (parseFloat(imageResizer.topLeftRectParent.style.top) + (height / 2)) + 'px';\n this.setImageResizingPoints(imageResizer);\n if (this.viewer.isTouchInput) {\n this.applyPropertiesForTouch();\n }\n else {\n this.applyPropertiesForMouse();\n }\n };\n /**\n * Sets the image resizing points.\n * @param {ImageResizer} imageResizer - Specifies for position of each resizing elements.\n * @private\n */\n ImageResizer.prototype.setImageResizingPoints = function (imageResizer) {\n this.imageResizerPoints.resizeContainerDiv.x = parseFloat(imageResizer.resizeContainerDiv.style.left);\n this.imageResizerPoints.resizeContainerDiv.y = parseFloat(imageResizer.resizeContainerDiv.style.top);\n this.imageResizerPoints.bottomLeftRectParent.x = parseFloat(imageResizer.bottomLeftRectParent.style.left);\n this.imageResizerPoints.bottomLeftRectParent.y = parseFloat(imageResizer.bottomLeftRectParent.style.top);\n this.imageResizerPoints.bottomRightRectParent.x = parseFloat(imageResizer.bottomRightRectParent.style.left);\n this.imageResizerPoints.bottomRightRectParent.y = parseFloat(imageResizer.bottomRightRectParent.style.top);\n this.imageResizerPoints.bottomMiddleRectParent.x = parseFloat(imageResizer.bottomMiddleRectParent.style.left);\n this.imageResizerPoints.bottomMiddleRectParent.y = parseFloat(imageResizer.bottomMiddleRectParent.style.top);\n this.imageResizerPoints.topLeftRectParent.x = parseFloat(imageResizer.topLeftRectParent.style.left);\n this.imageResizerPoints.topLeftRectParent.y = parseFloat(imageResizer.topLeftRectParent.style.top);\n this.imageResizerPoints.topRightRectParent.x = parseFloat(imageResizer.topRightRectParent.style.left);\n this.imageResizerPoints.topRightRectParent.y = parseFloat(imageResizer.topRightRectParent.style.top);\n this.imageResizerPoints.topMiddleRectParent.x = parseFloat(imageResizer.topMiddleRectParent.style.left);\n this.imageResizerPoints.topMiddleRectParent.y = parseFloat(imageResizer.topMiddleRectParent.style.top);\n this.imageResizerPoints.leftMiddleRectParent.x = parseFloat(imageResizer.leftMiddleRectParent.style.left);\n this.imageResizerPoints.leftMiddleRectParent.y = parseFloat(imageResizer.leftMiddleRectParent.style.top);\n this.imageResizerPoints.rightMiddleRectParent.x = parseFloat(imageResizer.rightMiddleRectParent.style.left);\n this.imageResizerPoints.rightMiddleRectParent.y = parseFloat(imageResizer.rightMiddleRectParent.style.top);\n };\n /**\n * Initialize the resize container div element.\n * @param {ImageResizer} imageResizer - Specifies for creating resize container div element.\n * @private\n */\n ImageResizer.prototype.initResizeContainerDiv = function (imageResizer) {\n imageResizer.resizeContainerDiv = document.createElement('div');\n imageResizer.resizeContainerDiv.id = this.viewer.owner.containerId + '_ResizeDivElement';\n imageResizer.resizeContainerDiv.style.position = 'absolute';\n imageResizer.resizeContainerDiv.style.border = '1px solid #bfbfbf';\n imageResizer.resizeContainerDiv.style.zIndex = '30';\n imageResizer.resizeContainerDiv.style.backgroundColor = 'transparent';\n imageResizer.resizeContainerDiv.style.display = 'block';\n };\n /**\n * Apply the properties of each resize rectangle element.\n * @param {HTMLDivElement} resizeRectElement - Specifies for applying properties to resize rectangle element.\n * @private\n */\n ImageResizer.prototype.applyProperties = function (resizeRectElement) {\n resizeRectElement.style.position = 'absolute';\n resizeRectElement.style.width = '8px';\n resizeRectElement.style.height = '8px';\n resizeRectElement.style.fontSize = '0px';\n resizeRectElement.style.zIndex = ' 551';\n resizeRectElement.style.backgroundColor = '#ffffff';\n resizeRectElement.style.border = '1px solid #bfbfbf';\n resizeRectElement.style.boxShadow = '0 1px 2px 0 #bfbfbf 0.35';\n resizeRectElement.style.color = '#000000';\n };\n /**\n * Handles an image resizing.\n * @param {number} x - Specifies for left value while resizing.\n * @param {number} y - Specifies for top value while resizing.\n */\n ImageResizer.prototype.handleImageResizing = function (touchPoint, prevX, prevY) {\n prevX = prevX / this.viewer.zoomFactor;\n prevY = prevY / this.viewer.zoomFactor;\n this.leftValue = isNullOrUndefined(this.leftValue) ? prevX : this.leftValue;\n this.topValue = isNullOrUndefined(this.topValue) ? prevY : this.topValue;\n var points;\n switch (this.selectedResizeElement.id.split('_')[1]) {\n case 'TopRightRectParent':\n points = this.topRightResizing(touchPoint);\n prevX = points.left;\n prevY = points.top;\n break;\n case 'TopLeftRectParent':\n points = this.topLeftResizing(touchPoint);\n prevX = -points.left;\n prevY = -points.top;\n break;\n case 'TopMiddleRectParent':\n prevX = 0;\n prevY = this.topMiddleResizing(touchPoint);\n break;\n case 'BottomRightRectParent':\n points = this.bottomRightResizing(touchPoint);\n prevX = points.left;\n prevY = points.top;\n break;\n case 'BottomLeftRectParent':\n points = this.bottomLeftResizing(touchPoint);\n prevX = -points.left;\n prevY = -points.top;\n break;\n case 'BottomMiddleRectParent':\n prevY = touchPoint.y - prevY;\n prevX = 0;\n break;\n case 'RightMiddleRectParent':\n prevX = touchPoint.x - prevX;\n prevY = 0;\n break;\n case 'LeftMiddleRectParent':\n prevX = this.leftMiddleResizing(touchPoint);\n prevY = 0;\n break;\n default:\n break;\n }\n if (prevX !== 0 || prevY !== 0) {\n var widget = this.currentImageElementBox.line.paragraph;\n var image = this.currentImageElementBox;\n if (!isNullOrUndefined(widget) && widget.isInsideTable) {\n var cellWidget = widget.containerWidget;\n if (!isNullOrUndefined(cellWidget)) {\n var rowWidget = cellWidget.containerWidget;\n var imageHeight = HelperMethods.convertPointToPixel(image.height);\n var widgetHeight = rowWidget.height - imageHeight;\n if (prevY > 0 && rowWidget.y + widgetHeight + imageHeight + prevY > this.viewer.clientArea.bottom) {\n this.isImageMoveToNextPage = true;\n }\n }\n }\n // tslint:disable-next-line:max-line-length \n if (this.owner.enableHistoryMode) {\n this.initHistoryForImageResizer(this.currentImageElementBox);\n }\n if (!isNullOrUndefined(this.currentImageElementBox)) {\n // tslint:disable-next-line:max-line-length \n var width = this.currentImageElementBox.width + prevX > 10 ? this.currentImageElementBox.width + prevX : 10;\n // tslint:disable-next-line:max-line-length \n var height = this.currentImageElementBox.height + prevY > 10 ? this.currentImageElementBox.height + prevY : 10;\n if (this.selectedResizeElement.id.split('_')[1] === 'BottomRightRectParent'\n || this.selectedResizeElement.id.split('_')[1] === 'TopRightRectParent'\n || this.selectedResizeElement.id.split('_')[1] === 'BottomLeftRectParent'\n || this.selectedResizeElement.id.split('_')[1] === 'TopLeftRectParent') {\n height = this.currentImageElementBox.height / this.currentImageElementBox.width * width;\n width = this.currentImageElementBox.width / this.currentImageElementBox.height * height;\n }\n this.currentImageElementBox.width = width;\n this.currentImageElementBox.height = height;\n var owner = this.currentImageElementBox.line.paragraph;\n this.positionImageResizer(this.currentImageElementBox);\n }\n this.isImageResizing = true;\n }\n };\n /**\n * Handles image resizing on mouse.\n * @param {MouseEvent} event - Specifies for image resizing using mouse event.\n * @private\n */\n ImageResizer.prototype.handleImageResizingOnMouse = function (event) {\n if (!isNullOrUndefined(this.selectedResizeElement)) {\n var prevX = parseFloat(this.selectedResizeElement.style.left);\n var prevY = parseFloat(this.selectedResizeElement.style.top);\n var cursorPoint = new Point(event.offsetX, event.offsetY);\n var touchPoint = this.viewer.findFocusedPage(cursorPoint, true);\n this.handleImageResizing(touchPoint, prevX, prevY);\n }\n };\n ImageResizer.prototype.topMiddleResizing = function (touchPoint) {\n var prevY;\n if (this.topValue >= touchPoint.y) {\n prevY = this.topValue / touchPoint.y;\n this.topValue = touchPoint.y;\n if (this.viewer instanceof PageLayoutViewer) {\n if (this.topValue <= this.viewer.pageGap) {\n prevY = 1;\n }\n }\n }\n else {\n prevY = -(touchPoint.y / this.topValue);\n this.topValue = touchPoint.y;\n if (this.topValue === 0) {\n prevY = -1;\n }\n }\n return prevY;\n };\n ImageResizer.prototype.leftMiddleResizing = function (touchPoint) {\n var prevX;\n if (this.leftValue >= touchPoint.x) {\n prevX = this.leftValue / touchPoint.x;\n this.leftValue = touchPoint.x;\n if (this.leftValue === 0) {\n prevX = 1;\n this.leftValue = parseFloat(this.selectedResizeElement.style.left);\n }\n }\n else {\n prevX = -(touchPoint.x / this.leftValue);\n this.leftValue = touchPoint.x;\n }\n return prevX;\n };\n ImageResizer.prototype.topRightResizing = function (touchPoint) {\n var points;\n if (this.leftValue <= touchPoint.x && this.topValue >= touchPoint.y) {\n points = this.getOuterResizingPoint(touchPoint);\n }\n else {\n points = this.getInnerResizingPoint(touchPoint);\n }\n return points;\n };\n ImageResizer.prototype.topLeftResizing = function (touchPoint) {\n var points;\n if (this.leftValue >= touchPoint.x && this.topValue >= touchPoint.y) {\n points = this.getOuterResizingPoint(touchPoint);\n }\n else {\n points = this.getInnerResizingPoint(touchPoint);\n }\n return points;\n };\n ImageResizer.prototype.bottomRightResizing = function (touchPoint) {\n var points;\n if (this.leftValue <= touchPoint.x && this.topValue <= touchPoint.y) {\n points = this.getOuterResizingPoint(touchPoint);\n }\n else {\n points = this.getInnerResizingPoint(touchPoint);\n }\n return points;\n };\n ImageResizer.prototype.bottomLeftResizing = function (touchPoint) {\n var points;\n if (this.leftValue >= touchPoint.x && this.topValue <= touchPoint.y) {\n points = this.getOuterResizingPoint(touchPoint);\n }\n else {\n points = this.getInnerResizingPoint(touchPoint);\n }\n return points;\n };\n ImageResizer.prototype.getOuterResizingPoint = function (touchPoint) {\n var prevX;\n var prevY;\n prevX = touchPoint.x - this.leftValue;\n this.leftValue = touchPoint.x;\n prevY = touchPoint.y - this.topValue;\n this.topValue = touchPoint.y;\n return { left: prevX, top: prevY };\n };\n ImageResizer.prototype.getInnerResizingPoint = function (touchPoint) {\n var prevX;\n var prevY;\n prevX = -(this.leftValue - touchPoint.x);\n this.leftValue = touchPoint.x;\n prevY = -(this.topValue - touchPoint.y);\n this.topValue = touchPoint.y;\n return { left: prevX, top: prevY };\n };\n /**\n * Handles image resizing on touch.\n * @param {TouchEvent} touchEvent - Specifies for image resizing using touch event.\n * @private\n */\n ImageResizer.prototype.handleImageResizingOnTouch = function (touchEvent) {\n if (!isNullOrUndefined(this.selectedResizeElement)) {\n var prevX = parseFloat(this.selectedResizeElement.style.left) + 24;\n var prevY = parseFloat(this.selectedResizeElement.style.top) + 24;\n var touch = touchEvent.touches;\n var cursorPoint = new Point(touch[0].clientX, touch[0].clientY);\n var touchPoint = this.viewer.findFocusedPage(cursorPoint, true);\n if (isNullOrUndefined(this.currentImageElementBox) || isNullOrUndefined(this.currentImageElementBox)) {\n return;\n }\n this.handleImageResizing(touchPoint, prevX, prevY);\n }\n };\n /**\n * Gets the image point of mouse.\n * @param {Point} touchPoint - Specifies for resizer cursor position.\n * @private\n */\n ImageResizer.prototype.getImagePoint = function (touchPoint) {\n var x = this.viewer.render.getScaledValue(touchPoint.x, 1);\n var y = this.viewer.render.getScaledValue(touchPoint.y, 2);\n touchPoint = new Point(x, y);\n var imageResizingPoints = this.imageResizerPoints;\n var resizePosition = '';\n var selectedElement = undefined;\n var bottomMiddle = imageResizingPoints.bottomMiddleRectParent;\n var bottomRight = imageResizingPoints.bottomRightRectParent;\n var bottomLeft = imageResizingPoints.bottomLeftRectParent;\n var topMiddle = imageResizingPoints.topMiddleRectParent;\n var topRight = imageResizingPoints.topRightRectParent;\n var topLeft = imageResizingPoints.topLeftRectParent;\n var rightMiddle = imageResizingPoints.rightMiddleRectParent;\n var leftMiddle = imageResizingPoints.leftMiddleRectParent;\n if (!isNullOrUndefined(this.bottomMiddleRectParent) && this.bottomMiddleRectParent.style.display !== 'none') {\n // tslint:disable-next-line:max-line-length \n if ((touchPoint.x > bottomMiddle.x && touchPoint.x <= bottomMiddle.x + 15) && (touchPoint.y > bottomMiddle.y && touchPoint.y <= bottomMiddle.y + 15)) {\n selectedElement = this.bottomMiddleRectParent;\n resizePosition = 's-resize';\n // tslint:disable-next-line:max-line-length \n }\n else if ((touchPoint.x > bottomRight.x && touchPoint.x <= bottomRight.x + 15) && (touchPoint.y > bottomRight.y && touchPoint.y <= bottomRight.y + 15)) {\n selectedElement = this.bottomRightRectParent;\n resizePosition = 'se-resize';\n // tslint:disable-next-line:max-line-length \n }\n else if ((touchPoint.x > bottomLeft.x && touchPoint.x <= bottomLeft.x + 15) && (touchPoint.y > bottomLeft.y && touchPoint.y <= bottomLeft.y + 15)) {\n selectedElement = this.bottomLeftRectParent;\n resizePosition = 'sw-resize';\n // tslint:disable-next-line:max-line-length \n }\n else if ((touchPoint.x > topMiddle.x && touchPoint.x <= topMiddle.x + 15) && (touchPoint.y > topMiddle.y && touchPoint.y <= topMiddle.y + 15)) {\n selectedElement = this.topMiddleRectParent;\n resizePosition = 'n-resize';\n // tslint:disable-next-line:max-line-length \n }\n else if ((touchPoint.x > topRight.x && touchPoint.x <= topRight.x + 15) && (touchPoint.y > topRight.y && touchPoint.y <= topRight.y + 15)) {\n selectedElement = this.topRightRectParent;\n resizePosition = 'ne-resize';\n // tslint:disable-next-line:max-line-length \n }\n else if ((touchPoint.x > topLeft.x && touchPoint.x <= topLeft.x + 15) && (touchPoint.y > topLeft.y && touchPoint.y <= topLeft.y + 15)) {\n selectedElement = this.topLeftRectParent;\n resizePosition = 'nw-resize';\n // tslint:disable-next-line:max-line-length \n }\n else if ((touchPoint.x > leftMiddle.x && touchPoint.x <= leftMiddle.x + 15) && (touchPoint.y > leftMiddle.y && touchPoint.y <= leftMiddle.y + 15)) {\n selectedElement = this.leftMiddleRectParent;\n resizePosition = 'w-resize';\n // tslint:disable-next-line:max-line-length \n }\n else if ((touchPoint.x > rightMiddle.x && touchPoint.x <= rightMiddle.x + 15) && (touchPoint.y > rightMiddle.y && touchPoint.y <= rightMiddle.y + 15)) {\n selectedElement = this.rightMiddleRectParent;\n resizePosition = 'e-resize';\n // tslint:disable-next-line:max-line-length \n }\n else if (!isNullOrUndefined(this.resizeContainerDiv) && (touchPoint.x > parseFloat(this.resizeContainerDiv.style.left)\n && touchPoint.x <= (parseFloat(this.resizeContainerDiv.style.left) + parseFloat(this.resizeContainerDiv.style.width)))\n && (touchPoint.y > parseFloat(this.resizeContainerDiv.style.top)\n // tslint:disable-next-line:max-line-length \n && touchPoint.y <= (parseFloat(this.resizeContainerDiv.style.top) + parseFloat(this.resizeContainerDiv.style.height)))) {\n resizePosition = 'move';\n }\n }\n return { 'selectedElement': selectedElement, 'resizePosition': resizePosition };\n };\n ImageResizer.prototype.applyPropertiesForMouse = function () {\n if (!isNullOrUndefined(this.bottomLeftRectParent)) {\n this.bottomMiddleRectParent.style.width = '14px';\n this.bottomMiddleRectParent.style.height = '14px';\n this.bottomRightRectParent.style.width = '14px';\n this.bottomRightRectParent.style.height = '14px';\n this.bottomLeftRectParent.style.width = '14px';\n this.bottomLeftRectParent.style.height = '14px';\n this.topMiddleRectParent.style.width = '14px';\n this.topMiddleRectParent.style.height = '14px';\n this.topRightRectParent.style.width = '14px';\n this.topRightRectParent.style.height = '14px';\n this.topLeftRectParent.style.width = '14px';\n this.topLeftRectParent.style.height = '14px';\n this.leftMiddleRectParent.style.width = '14px';\n this.leftMiddleRectParent.style.height = '14px';\n this.rightMiddleRectParent.style.width = '14px';\n this.rightMiddleRectParent.style.height = '14px';\n }\n };\n /**\n * Gets the image point of touch.\n * @param {Point} touchPoints - Specifies for resizer cursor position.\n * @private\n */\n ImageResizer.prototype.getImagePointOnTouch = function (touchPoints) {\n var x = this.viewer.render.getScaledValue(touchPoints.x, 1);\n var y = this.viewer.render.getScaledValue(touchPoints.y, 2);\n touchPoints = new Point(x, y);\n var imageResizingPointsOnTouch = this.imageResizerPoints;\n var resizePosition = '';\n var selectedElements = undefined;\n var bottomMiddle = imageResizingPointsOnTouch.bottomMiddleRectParent;\n var bottomRight = imageResizingPointsOnTouch.bottomRightRectParent;\n var bottomLeft = imageResizingPointsOnTouch.bottomLeftRectParent;\n var topMiddle = imageResizingPointsOnTouch.topMiddleRectParent;\n var topRight = imageResizingPointsOnTouch.topRightRectParent;\n var topLeft = imageResizingPointsOnTouch.topLeftRectParent;\n var rightMiddle = imageResizingPointsOnTouch.rightMiddleRectParent;\n var leftMiddle = imageResizingPointsOnTouch.leftMiddleRectParent;\n if (!isNullOrUndefined(this.bottomMiddleRectParent) && this.bottomMiddleRectParent.style.display !== 'none') {\n // tslint:disable-next-line:max-line-length \n if ((touchPoints.x > bottomMiddle.x && touchPoints.x <= bottomMiddle.x + 25) && (touchPoints.y > bottomMiddle.y && touchPoints.y <= bottomMiddle.y + 25)) {\n selectedElements = this.bottomMiddleRectParent;\n resizePosition = 's-resize';\n // tslint:disable-next-line:max-line-length \n }\n else if ((touchPoints.x > bottomRight.x && touchPoints.x <= bottomRight.x + 25) && (touchPoints.y > bottomRight.y && touchPoints.y <= bottomRight.y + 25)) {\n selectedElements = this.bottomRightRectParent;\n resizePosition = 'se-resize';\n // tslint:disable-next-line:max-line-length \n }\n else if ((touchPoints.x > bottomLeft.x && touchPoints.x <= bottomLeft.x + 25) && (touchPoints.y > bottomLeft.y && touchPoints.y <= bottomLeft.y + 25)) {\n selectedElements = this.bottomLeftRectParent;\n resizePosition = 'sw-resize';\n // tslint:disable-next-line:max-line-length \n }\n else if ((touchPoints.x > topMiddle.x && touchPoints.x <= topMiddle.x + 25) && (touchPoints.y > topMiddle.y && touchPoints.y <= topMiddle.y + 25)) {\n selectedElements = this.topMiddleRectParent;\n resizePosition = 'n-resize';\n // tslint:disable-next-line:max-line-length \n }\n else if ((touchPoints.x > topRight.x && touchPoints.x <= topRight.x + 25) && (touchPoints.y > topRight.y && touchPoints.y <= topRight.y + 25)) {\n selectedElements = this.topRightRectParent;\n resizePosition = 'ne-resize';\n // tslint:disable-next-line:max-line-length \n }\n else if ((touchPoints.x > topLeft.x && touchPoints.x <= topLeft.x + 25) && (touchPoints.y > topLeft.y && touchPoints.y <= topLeft.y + 25)) {\n selectedElements = this.topLeftRectParent;\n resizePosition = 'nw-resize';\n // tslint:disable-next-line:max-line-length \n }\n else if ((touchPoints.x > leftMiddle.x && touchPoints.x <= leftMiddle.x + 25) && (touchPoints.y > leftMiddle.y && touchPoints.y <= leftMiddle.y + 25)) {\n selectedElements = this.leftMiddleRectParent;\n resizePosition = 'w-resize';\n // tslint:disable-next-line:max-line-length \n }\n else if ((touchPoints.x > rightMiddle.x && touchPoints.x <= rightMiddle.x + 25) && (touchPoints.y > rightMiddle.y && touchPoints.y <= rightMiddle.y + 25)) {\n selectedElements = this.rightMiddleRectParent;\n resizePosition = 'e-resize';\n // tslint:disable-next-line:max-line-length \n }\n else if (!isNullOrUndefined(this.resizeContainerDiv) && (touchPoints.x > parseFloat(this.resizeContainerDiv.style.left)\n && touchPoints.x <= (parseFloat(this.resizeContainerDiv.style.left) + parseFloat(this.resizeContainerDiv.style.width)))\n && (touchPoints.y > parseFloat(this.resizeContainerDiv.style.top)\n // tslint:disable-next-line:max-line-length \n && touchPoints.y <= (parseFloat(this.resizeContainerDiv.style.top) + parseFloat(this.resizeContainerDiv.style.height)))) {\n resizePosition = 'move';\n }\n }\n return { 'selectedElement': selectedElements, 'resizePosition': resizePosition };\n };\n ImageResizer.prototype.applyPropertiesForTouch = function () {\n if (!isNullOrUndefined(this.bottomLeftRectParent)) {\n this.bottomMiddleRectParent.style.width = '30px';\n this.bottomMiddleRectParent.style.height = '30px';\n this.bottomRightRectParent.style.width = '30px';\n this.bottomRightRectParent.style.height = '30px';\n this.bottomLeftRectParent.style.width = '30px';\n this.bottomLeftRectParent.style.height = '30px';\n this.topMiddleRectParent.style.width = '30px';\n this.topMiddleRectParent.style.height = '30px';\n this.topRightRectParent.style.width = '30px';\n this.topRightRectParent.style.height = '30px';\n this.topLeftRectParent.style.width = '30px';\n this.topLeftRectParent.style.height = '30px';\n this.leftMiddleRectParent.style.width = '30px';\n this.leftMiddleRectParent.style.height = '30px';\n this.rightMiddleRectParent.style.width = '30px';\n this.rightMiddleRectParent.style.height = '30px';\n }\n };\n /**\n * @private\n */\n ImageResizer.prototype.mouseUpInternal = function () {\n this.currentImageElementBox.width = parseFloat(this.imageResizerDiv.style.width) / this.viewer.zoomFactor;\n this.currentImageElementBox.height = parseFloat(this.imageResizerDiv.style.height) / this.viewer.zoomFactor;\n this.owner.isShiftingEnabled = true;\n this.owner.editorModule.setOffsetValue(this.owner.selection);\n this.viewer.layout.reLayoutParagraph(this.currentImageElementBox.line.paragraph, 0, 0);\n this.owner.editorModule.reLayout(this.owner.selection, true);\n this.viewer.updateScrollBars();\n };\n /**\n * Initialize history for image resizer.\n * @param {ImageResizer} imageResizer - Specifies for image resizer.\n * @param {WImage} imageContainer - Specifies for an image.\n * @private\n */\n ImageResizer.prototype.initHistoryForImageResizer = function (imageContainer) {\n if (!isNullOrUndefined(this.owner) && isNullOrUndefined(this.baseHistoryInfo)) {\n this.baseHistoryInfo = new BaseHistoryInfo(this.owner);\n this.baseHistoryInfo.action = 'ImageResizing';\n this.baseHistoryInfo.updateSelection();\n this.baseHistoryInfo.modifiedProperties.push(new ImageFormat(imageContainer));\n }\n };\n /**\n * Updates histroy for image resizer.\n * @private\n */\n ImageResizer.prototype.updateHistoryForImageResizer = function () {\n if (!isNullOrUndefined(this.owner) && !isNullOrUndefined(this.baseHistoryInfo)) {\n var imageFormat = this.baseHistoryInfo.modifiedProperties[0];\n if (this.currentImageElementBox.width === imageFormat.width\n && this.currentImageElementBox.height === imageFormat.height) {\n this.baseHistoryInfo.modifiedProperties.pop();\n }\n else {\n //Records the image size modifications\n this.owner.editorHistory.recordChanges(this.baseHistoryInfo);\n }\n //Fires the content changed event for the image size modifications\n this.baseHistoryInfo = undefined;\n }\n };\n /**\n * Updates image resize container when applying zooming\n * @private\n */\n ImageResizer.prototype.updateImageResizerPosition = function () {\n if (!isNullOrUndefined(this.currentImageElementBox)) {\n var elementBox = this.currentImageElementBox;\n var lineWidget = elementBox.line;\n var top_1 = this.viewer.selection.getTop(lineWidget) + elementBox.margin.top;\n var left = this.viewer.selection.getLeftInternal(lineWidget, elementBox, 0);\n var topValue = top_1 * this.viewer.zoomFactor;\n var leftValue = left * this.viewer.zoomFactor;\n var height = this.viewer.render.getScaledValue(elementBox.height, 2);\n var width = this.viewer.render.getScaledValue(elementBox.width, 1);\n this.setImageResizerPosition(leftValue, topValue, width, height, this);\n }\n };\n /**\n * Dispose the internal objects which are maintained.\n * @private\n */\n ImageResizer.prototype.destroy = function () {\n if (!isNullOrUndefined(this.resizeContainerDiv)) {\n this.resizeContainerDiv.innerHTML = '';\n }\n if (!isNullOrUndefined(this.topLeftRect)) {\n this.topLeftRect.innerHTML = '';\n }\n if (!isNullOrUndefined(this.topMiddleRect)) {\n this.topMiddleRect.innerHTML = '';\n }\n if (!isNullOrUndefined(this.topRightRect)) {\n this.topRightRect.innerHTML = '';\n }\n if (!isNullOrUndefined(this.bottomLeftRect)) {\n this.bottomLeftRect.innerHTML = '';\n }\n if (!isNullOrUndefined(this.bottomMiddleRect)) {\n this.bottomMiddleRect.innerHTML = '';\n }\n if (!isNullOrUndefined(this.bottomRightRect)) {\n this.bottomRightRect.innerHTML = '';\n }\n if (!isNullOrUndefined(this.leftMiddleRect)) {\n this.leftMiddleRect.innerHTML = '';\n }\n if (!isNullOrUndefined(this.rightMiddleRect)) {\n this.rightMiddleRect.innerHTML = '';\n }\n if (!isNullOrUndefined(this.imageResizerDiv)) {\n this.imageResizerDiv.innerHTML = '';\n }\n if (!isNullOrUndefined(this.selectedImageWidget)) {\n this.selectedImageWidget.destroy();\n }\n if (!isNullOrUndefined(this.imageResizerDivElement)) {\n this.imageResizerDivElement.innerHTML = '';\n }\n this.imageResizerDivElement = undefined;\n this.resizeContainerDiv = undefined;\n this.topLeftRect = undefined;\n this.topMiddleRect = undefined;\n this.topRightRect = undefined;\n this.bottomLeftRect = undefined;\n this.bottomMiddleRect = undefined;\n this.bottomRightRect = undefined;\n this.leftMiddleRect = undefined;\n this.rightMiddleRect = undefined;\n this.imageResizerDiv = undefined;\n this.selectedImageWidget = undefined;\n this.isImageResizing = false;\n this.isImageResizerVisible = false;\n this.currentImageElementBoxIn = undefined;\n //this.baseHistoryInfo = undefined;\n this.resizeMarkSizeIn = undefined;\n this.viewer = undefined;\n this.owner = undefined;\n };\n return ImageResizer;\n}());\nexport { ImageResizer };\n/**\n * @private\n */\nvar ImageResizingPoints = /** @class */ (function () {\n /**\n * Constructor for image resizing points class.\n */\n function ImageResizingPoints() {\n /**\n * @private\n */ this.resizeContainerDiv = new Point(0, 0);\n /**\n * @private\n */\n this.topLeftRectParent = new Point(0, 0);\n /**\n * @private\n */\n this.topMiddleRectParent = new Point(0, 0);\n /**\n * @private\n */\n this.topRightRectParent = new Point(0, 0);\n /**\n * @private\n */\n this.bottomLeftRectParent = new Point(0, 0);\n /**\n * @private\n */\n this.bottomMiddleRectParent = new Point(0, 0);\n /**\n * @private\n */\n this.bottomRightRectParent = new Point(0, 0);\n /**\n * @private\n */\n this.leftMiddleRectParent = new Point(0, 0);\n /**\n * @private\n */\n this.rightMiddleRectParent = new Point(0, 0);\n var text = 'DocumentEditor';\n }\n return ImageResizingPoints;\n}());\nexport { ImageResizingPoints };\n/**\n * @private\n */\nvar SelectedImageInfo = /** @class */ (function () {\n /**\n * Constructor for selected image info class.\n * @param {number} height - Specifies for height value.\n * @param {number} width - Specifies for width value.\n */\n function SelectedImageInfo(height, width) {\n this.heightIn = 0;\n this.widthIn = 0;\n this.heightIn = height;\n this.widthIn = width;\n }\n Object.defineProperty(SelectedImageInfo.prototype, \"height\", {\n /**\n * Gets or Sets the height value.\n * @private\n */\n get: function () {\n return this.heightIn;\n },\n /**\n * @private\n */\n set: function (value) {\n this.heightIn = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(SelectedImageInfo.prototype, \"width\", {\n /**\n * Gets or Sets the width value.\n * @private\n */\n get: function () {\n return this.widthIn;\n },\n /**\n * @private\n */\n set: function (value) {\n this.widthIn = value;\n },\n enumerable: true,\n configurable: true\n });\n return SelectedImageInfo;\n}());\nexport { SelectedImageInfo };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { BaseHistoryInfo } from './base-history-info';\n/**\n * EditorHistory preservation class\n */\n/**\n * @private\n */\nvar HistoryInfo = /** @class */ (function (_super) {\n __extends(HistoryInfo, _super);\n function HistoryInfo(node, isChild) {\n var _this = _super.call(this, node) || this;\n _this.isChildHistoryInfo = false;\n _this.isChildHistoryInfo = isChild;\n return _this;\n }\n Object.defineProperty(HistoryInfo.prototype, \"hasAction\", {\n /**\n * @private\n */\n get: function () {\n return !isNullOrUndefined(this.modifiedActions);\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Adds the modified actions\n * @param {BaseHistoryInfo} baseHistoryInfo\n * @private\n */\n HistoryInfo.prototype.addModifiedAction = function (baseHistoryInfo) {\n // For complex actions such as Replace text, Insert/Remove Hyperlink etc.\n if (!(this.editorHistory.isUndoing || this.editorHistory.isRedoing)) {\n if (isNullOrUndefined(this.modifiedActions)) {\n this.modifiedActions = [];\n }\n this.modifiedActions.push(baseHistoryInfo);\n }\n };\n /**\n * Reverts this instance\n * @private\n */\n HistoryInfo.prototype.revert = function () {\n this.editorHistory.currentHistoryInfo = this;\n if (this.action === 'BordersAndShading') {\n this.owner.editorModule.isBordersAndShadingDialog = true;\n }\n if (!isNullOrUndefined(this.modifiedActions)) {\n if (this.editorHistory.isUndoing) {\n var i = this.modifiedActions.length;\n while (i > 0) {\n var baseHistoryInfo = this.modifiedActions[i - 1];\n baseHistoryInfo.revert();\n i = i - 1;\n }\n }\n else {\n var i = 0;\n while (i < this.modifiedActions.length) {\n var baseHistoryInfo = this.modifiedActions[i];\n baseHistoryInfo.revert();\n i = i + 1;\n }\n }\n }\n if (!this.isChildHistoryInfo) {\n this.editorHistory.updateComplexHistory();\n }\n else {\n this.editorHistory.updateComplexHistoryInternal();\n }\n };\n /**\n * @private\n */\n HistoryInfo.prototype.destroy = function () {\n if (!isNullOrUndefined(this.modifiedActions)) {\n while (this.modifiedActions.length > 0) {\n var baseHistoryInfo = this.modifiedActions[this.modifiedActions.length - 1];\n baseHistoryInfo.destroy();\n this.modifiedActions.splice(this.modifiedActions.indexOf(baseHistoryInfo), 1);\n }\n this.modifiedActions = undefined;\n }\n _super.prototype.destroy.call(this);\n };\n return HistoryInfo;\n}(BaseHistoryInfo));\nexport { HistoryInfo };\n","import { Dictionary } from '../../base/dictionary';\nimport { TextPosition } from '../selection/selection-helper';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { BaseHistoryInfo, } from './base-history-info';\nimport { ModifiedParagraphFormat, ModifiedLevel, RowHistoryFormat, TableHistoryInfo } from './history-helper';\nimport { HistoryInfo } from './history-info';\nimport { WParagraphFormat } from '../format/paragraph-format';\nimport { HelperMethods } from '../editor/editor-helper';\n/**\n * `EditorHistory` Module class is used to handle history preservation\n */\nvar EditorHistory = /** @class */ (function () {\n /**\n * @private\n */\n function EditorHistory(node) {\n //Fields\n this.undoStackIn = [];\n this.redoStackIn = [];\n this.historyInfoStack = [];\n /**\n * @private\n */\n this.isUndoing = false;\n /**\n * @private\n */\n this.isRedoing = false;\n this.owner = node;\n this.viewer = node.viewer;\n this.modifiedParaFormats = new Dictionary();\n this.undoLimitIn = 500;\n this.redoLimitIn = 500;\n }\n Object.defineProperty(EditorHistory.prototype, \"currentHistoryInfo\", {\n /**\n * @private\n */\n get: function () {\n return this.historyInfoStack && this.historyInfoStack.length > 0 ?\n this.historyInfoStack[this.historyInfoStack.length - 1] : undefined;\n },\n set: function (value) {\n if (value instanceof HistoryInfo) {\n this.historyInfoStack.push(value);\n }\n else {\n this.historyInfoStack.pop();\n }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(EditorHistory.prototype, \"undoStack\", {\n //Properties\n /**\n * gets undo stack\n * @private\n */\n get: function () { return this.undoStackIn; },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(EditorHistory.prototype, \"redoStack\", {\n /**\n * gets redo stack\n * @private\n */\n get: function () { return this.redoStackIn; },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(EditorHistory.prototype, \"undoLimit\", {\n /**\n * Gets or Sets the limit of undo operations can be done.\n */\n get: function () {\n return isNullOrUndefined(this.undoLimitIn) ? 0 : this.undoLimitIn;\n },\n set: function (value) {\n if (value < 0) {\n throw new Error('The limit should be greater than or equal to zero.');\n }\n this.undoLimitIn = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(EditorHistory.prototype, \"redoLimit\", {\n /**\n * Gets or Sets the limit of redo operations can be done.\n */\n get: function () {\n return isNullOrUndefined(this.redoLimitIn) ? 0 : this.redoLimitIn;\n },\n set: function (value) {\n if (value < 0) {\n throw new Error('The limit should be greater than or equal to zero.');\n }\n this.redoLimitIn = value;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @private\n */\n EditorHistory.prototype.getModuleName = function () {\n return 'EditorHistory';\n };\n /**\n * Determines whether undo operation can be done.\n * @returns boolean\n */\n EditorHistory.prototype.canUndo = function () {\n return !isNullOrUndefined(this.undoStack) && this.undoStack.length > 0;\n };\n /**\n * Determines whether redo operation can be done.\n * @returns boolean\n */\n EditorHistory.prototype.canRedo = function () {\n return !isNullOrUndefined(this.redoStack) && this.redoStack.length > 0;\n };\n //EditorHistory Initialization \n /**\n * initialize EditorHistory\n * @param {Selection} selection\n * @param {Action} action\n * @param {SelectionRange} selectionRange\n * @private\n */\n EditorHistory.prototype.initializeHistory = function (action) {\n this.currentBaseHistoryInfo = new BaseHistoryInfo(this.owner);\n this.currentBaseHistoryInfo.action = action;\n this.currentBaseHistoryInfo.updateSelection();\n };\n /**\n * Initialize complex history\n * @param {Selection} selection\n * @param {Action} action\n * @private\n */\n EditorHistory.prototype.initComplexHistory = function (selection, action) {\n this.currentHistoryInfo = new HistoryInfo(selection.owner, !isNullOrUndefined(this.currentHistoryInfo));\n this.currentHistoryInfo.action = action;\n this.currentHistoryInfo.updateSelection();\n };\n /**\n * @private\n */\n EditorHistory.prototype.initResizingHistory = function (startingPoint, tableResize) {\n if (tableResize.resizeNode === 1) {\n this.initializeHistory('RowResizing');\n if (!isNullOrUndefined(this.currentBaseHistoryInfo)) {\n // tslint:disable-next-line:max-line-length\n this.currentBaseHistoryInfo.modifiedProperties.push(new RowHistoryFormat(startingPoint, tableResize.currentResizingTable.childWidgets[tableResize.resizerPosition].rowFormat));\n }\n }\n else {\n this.initializeHistory('CellResizing');\n if (this.currentBaseHistoryInfo) {\n tableResize.currentResizingTable = tableResize.currentResizingTable.combineWidget(this.viewer);\n var tableHistoryInfo = new TableHistoryInfo(tableResize.currentResizingTable, this.owner);\n tableHistoryInfo.startingPoint = startingPoint;\n this.currentBaseHistoryInfo.modifiedProperties.push(tableHistoryInfo);\n }\n }\n };\n /**\n * Update resizing history\n * @param {Point} point\n * @param {Selection} selection\n * @private\n */\n EditorHistory.prototype.updateResizingHistory = function (point, tableResize) {\n if (tableResize.resizeNode === 1) {\n if (!isNullOrUndefined(this.currentBaseHistoryInfo)) {\n var rowHistoryFormat = this.currentBaseHistoryInfo.modifiedProperties[0];\n if (rowHistoryFormat.startingPoint.y === point.y) {\n this.currentBaseHistoryInfo.modifiedProperties.length = 0;\n }\n else {\n rowHistoryFormat.displacement = HelperMethods.convertPixelToPoint(point.y - rowHistoryFormat.startingPoint.y);\n this.recordChanges(this.currentBaseHistoryInfo);\n this.currentBaseHistoryInfo = undefined;\n }\n }\n }\n else {\n if (!isNullOrUndefined(this.currentBaseHistoryInfo)) {\n var cellHistoryFormat = this.currentBaseHistoryInfo.modifiedProperties[0];\n if (cellHistoryFormat.startingPoint.x === point.x) {\n this.currentBaseHistoryInfo.modifiedProperties.length = 0;\n }\n else {\n cellHistoryFormat.displacement = HelperMethods.convertPixelToPoint(point.x - cellHistoryFormat.startingPoint.x);\n cellHistoryFormat.endIndex = tableResize.getCellReSizerPosition(point);\n this.owner.editorHistory.recordChanges(this.currentBaseHistoryInfo);\n this.currentBaseHistoryInfo = undefined;\n }\n }\n }\n };\n /**\n * Record the changes\n * @param {BaseHistoryInfo} baseHistoryInfo\n * @private\n */\n EditorHistory.prototype.recordChanges = function (baseHistoryInfo) {\n if (!this.owner.enableHistoryMode) {\n return;\n }\n if (this.isUndoing) {\n if (isNullOrUndefined(this.redoStack)) {\n this.redoStackIn = [];\n }\n if (this.redoStack.length === this.redoLimit && this.redoLimit > 0) {\n var count = this.undoLimit > 20 ? 10 : 1;\n this.redoStackIn.splice(0, count);\n }\n if (this.redoStack.length < this.redoLimit) {\n this.redoStack.push(baseHistoryInfo);\n }\n }\n else {\n if (!this.isRedoing) {\n this.clearRedoStack();\n }\n if (isNullOrUndefined(this.undoStack)) {\n this.undoStackIn = [];\n }\n if (this.undoStack.length === this.undoLimit && this.undoLimit > 0) {\n var count = this.undoLimit > 20 ? 10 : 1;\n this.undoStackIn.splice(0, count);\n }\n if (this.undoStack.length < this.undoLimit) {\n this.undoStackIn.push(baseHistoryInfo);\n }\n }\n };\n /**\n * update EditorHistory\n * @private\n */\n EditorHistory.prototype.updateHistory = function () {\n if (this.viewer.owner.enableHistoryMode && !isNullOrUndefined(this.currentBaseHistoryInfo)) {\n //Updates the current end position\n if (!isNullOrUndefined(this.currentBaseHistoryInfo)\n && isNullOrUndefined(this.currentBaseHistoryInfo.endPosition)) {\n this.currentBaseHistoryInfo.endPosition = this.currentBaseHistoryInfo.insertPosition;\n }\n if (!isNullOrUndefined(this.currentHistoryInfo)) {\n this.currentHistoryInfo.addModifiedAction(this.currentBaseHistoryInfo);\n }\n else {\n this.recordChanges(this.currentBaseHistoryInfo);\n }\n this.currentBaseHistoryInfo = undefined;\n }\n };\n /**\n * @private\n */\n EditorHistory.prototype.isHandledComplexHistory = function () {\n var isHandledComplexHistory = false;\n if (!(this.isUndoing || this.isRedoing)) {\n isHandledComplexHistory = this.owner.editorModule.insertRemoveBookMarkElements();\n }\n if (this.viewer.owner.enableHistoryMode && !isNullOrUndefined(this.currentHistoryInfo)) {\n this.updateHistory();\n isHandledComplexHistory = true;\n }\n else if (this.owner.editorModule.isHandledComplex) {\n isHandledComplexHistory = true;\n }\n return isHandledComplexHistory;\n };\n /**\n * Update complex history\n * @private\n */\n EditorHistory.prototype.updateComplexHistory = function () {\n var selection = this.viewer.selection;\n if (this.currentHistoryInfo.hasAction) {\n if (this.currentHistoryInfo.action === 'AutoFormatHyperlink') {\n var startPosition = new TextPosition(selection.owner);\n this.owner.editorModule.setPositionForCurrentIndex(startPosition, this.currentHistoryInfo.insertPosition);\n // this.reLayoutParagraph(startPosition.paragraph, 0);\n if (selection.owner.editorHistory.isUndoing) {\n this.owner.editorModule.setPositionForCurrentIndex(selection.start, this.currentHistoryInfo.selectionStart);\n this.owner.editorModule.setPositionForCurrentIndex(selection.end, this.currentHistoryInfo.selectionEnd);\n }\n else {\n this.owner.editorModule.setPositionForCurrentIndex(selection.start, this.currentHistoryInfo.endPosition);\n this.owner.editorModule.setPositionForCurrentIndex(selection.end, this.currentHistoryInfo.endPosition);\n }\n }\n if (this.currentHistoryInfo.action === 'InsertHyperlink') {\n var startPosition = new TextPosition(selection.owner);\n this.owner.editorModule.setPositionForCurrentIndex(startPosition, this.currentHistoryInfo.insertPosition);\n var endPosition = new TextPosition(selection.owner);\n this.owner.editorModule.setPositionForCurrentIndex(endPosition, this.currentHistoryInfo.endPosition);\n this.viewer.layout.reLayoutParagraph(startPosition.paragraph, 0, 0);\n if (endPosition.paragraph !== startPosition.paragraph) {\n this.viewer.layout.reLayoutParagraph(endPosition.paragraph, 0, 0);\n }\n }\n if (this.currentHistoryInfo.action === 'ReplaceAll') {\n this.owner.editorModule.layoutWholeDocument();\n }\n else if (selection.owner.isShiftingEnabled) {\n this.viewer.layout.shiftLayoutedItems();\n if (this.owner.enableHeaderAndFooter) {\n this.owner.editorModule.updateHeaderFooterWidget();\n }\n }\n }\n selection.owner.isShiftingEnabled = false;\n selection.owner.isLayoutEnabled = true;\n // // selection.addMultipleSelectionRanges();\n selection.start.updatePhysicalPosition(true);\n if (selection.isEmpty) {\n selection.end.setPositionInternal(selection.start);\n }\n else {\n selection.end.updatePhysicalPosition(true);\n }\n selection.upDownSelectionLength = selection.end.location.x;\n selection.fireSelectionChanged(true);\n this.viewer.updateFocus();\n this.updateComplexHistoryInternal();\n this.viewer.updateScrollBars();\n this.owner.editorModule.fireContentChange();\n };\n /**\n * @private\n */\n EditorHistory.prototype.updateComplexHistoryInternal = function () {\n if (!isNullOrUndefined(this.currentHistoryInfo)) {\n //Updates the current end position\n if (isNullOrUndefined(this.currentHistoryInfo.endPosition)) {\n this.currentHistoryInfo.endPosition = this.currentHistoryInfo.insertPosition;\n }\n if (this.historyInfoStack.length > 1) {\n var historyInfo = this.historyInfoStack[this.historyInfoStack.length - 2];\n historyInfo.addModifiedAction(this.currentHistoryInfo);\n }\n else {\n this.recordChanges(this.currentHistoryInfo);\n }\n this.currentHistoryInfo = undefined;\n }\n };\n //List history preservation undo API\n /**\n * update list changes for history preservation\n * @param {Selection} selection\n * @param {WAbstractList} currentAbstractList\n * @param {WList} list\n * @private\n */\n EditorHistory.prototype.updateListChangesInHistory = function (currentAbstractList, list) {\n this.currentBaseHistoryInfo = new BaseHistoryInfo(this.viewer.owner);\n this.currentBaseHistoryInfo.action = 'List';\n this.currentBaseHistoryInfo.updateSelection();\n var collection = new Dictionary();\n for (var i = 0; i < currentAbstractList.levels.length; i++) {\n var levels = this.viewer.getAbstractListById(list.abstractListId).levels[i];\n var value = this.currentBaseHistoryInfo.addModifiedPropertiesForList(levels);\n var modifiedLevel = new ModifiedLevel(levels, currentAbstractList.levels[i]);\n if (!isNullOrUndefined(levels)) {\n this.viewer.owner.editorModule.copyListLevel(levels, currentAbstractList.levels[i]);\n }\n collection.add(i, modifiedLevel);\n }\n return collection;\n };\n /**\n * Apply list changes\n * @param {Selection} selection\n * @param {Dictionary} modifiedLevelsInternal\n * @private\n */\n EditorHistory.prototype.applyListChanges = function (selection, modifiedLevelsInternal) {\n if (isNullOrUndefined(this.modifiedParaFormats)) {\n this.modifiedParaFormats = new Dictionary();\n }\n var collection = [];\n for (var i = 0; i < this.viewer.listParagraphs.length; i++) {\n var paragraph = this.viewer.listParagraphs[i];\n var paraFormat = paragraph.paragraphFormat;\n var currentList = this.viewer.getListById(paraFormat.listFormat.listId);\n var listLevel = this.viewer.layout.getListLevel(currentList, paraFormat.listFormat.listLevelNumber);\n // tslint:disable-next-line:max-line-length\n if (modifiedLevelsInternal.containsKey(paraFormat.listFormat.listLevelNumber)\n && modifiedLevelsInternal.get(paraFormat.listFormat.listLevelNumber).ownerListLevel === listLevel) {\n var modifiedFormat = new WParagraphFormat(null);\n modifiedFormat.leftIndent = paraFormat.leftIndent;\n modifiedFormat.firstLineIndent = paraFormat.firstLineIndent;\n var modified = new ModifiedParagraphFormat(paraFormat, modifiedFormat);\n collection.push(modified);\n this.owner.editorModule.copyFromListLevelParagraphFormat(paraFormat, listLevel.paragraphFormat);\n }\n }\n this.modifiedParaFormats.add(this.currentBaseHistoryInfo, collection);\n };\n /**\n * Update list changes\n * @param {Dictionary} modifiedCollection\n * @param {Selection} selection\n * @private\n */\n EditorHistory.prototype.updateListChanges = function (modifiedCollection) {\n this.viewer.owner.isLayoutEnabled = false;\n this.owner.editorModule.updateListParagraphs();\n for (var i = 0; i < modifiedCollection.keys.length; i++) {\n var levelNumber = modifiedCollection.keys[0];\n var modifiedLevel = modifiedCollection.get(levelNumber);\n if (!isNullOrUndefined(this.currentBaseHistoryInfo)) {\n // tslint:disable-next-line:max-line-length\n modifiedLevel = this.currentBaseHistoryInfo.addModifiedPropertiesForList(modifiedLevel.ownerListLevel);\n }\n this.owner.editorModule.copyListLevel(modifiedLevel.ownerListLevel, modifiedLevel.modifiedListLevel);\n }\n this.revertListChanges();\n this.viewer.owner.isLayoutEnabled = true;\n this.viewer.renderedLists.clear();\n this.viewer.pages = [];\n this.viewer.layout.layout();\n var selection = this.viewer.selection;\n selection.start.updatePhysicalPosition(true);\n if (selection.isEmpty) {\n selection.end.setPositionInternal(selection.start);\n }\n else {\n selection.end.updatePhysicalPosition(true);\n }\n selection.upDownSelectionLength = selection.end.location.x;\n selection.fireSelectionChanged(false);\n this.updateHistory();\n };\n /**\n * Revert list changes\n * @param {Selection} selection\n */\n EditorHistory.prototype.revertListChanges = function () {\n // tslint:disable-next-line:max-line-length\n if (!isNullOrUndefined(this.currentBaseHistoryInfo)\n && this.viewer.owner.editorHistory.modifiedParaFormats.containsKey(this.currentBaseHistoryInfo)) {\n // tslint:disable-next-line:max-line-length\n var collection = this.modifiedParaFormats.get(this.currentBaseHistoryInfo);\n for (var i = 0; i < collection.length; i++) {\n var modified = new WParagraphFormat(null);\n modified.leftIndent = collection[i].ownerFormat.leftIndent;\n modified.firstLineIndent = collection[i].ownerFormat.firstLineIndent;\n collection[i].ownerFormat.copyFormat(collection[i].modifiedFormat);\n collection[i].modifiedFormat.leftIndent = modified.leftIndent;\n collection[i].modifiedFormat.firstLineIndent = modified.firstLineIndent;\n }\n }\n };\n /**\n * Reverts the last editing action.\n */\n EditorHistory.prototype.undo = function () {\n if (this.owner.isReadOnlyMode || !this.canUndo() || !this.owner.enableHistoryMode) {\n return;\n }\n //this.owner.ClearTextSearchResults();\n var historyInfo = this.undoStack.pop();\n this.isUndoing = true;\n historyInfo.revert();\n this.isUndoing = false;\n this.owner.selection.checkForCursorVisibility();\n this.owner.editorModule.isBordersAndShadingDialog = false;\n };\n /**\n * Performs the last reverted action.\n */\n EditorHistory.prototype.redo = function () {\n if (this.owner.isReadOnlyMode || !this.canRedo() || !this.owner.enableHistoryMode) {\n return;\n }\n //this.owner.ClearTextSearchResults();\n var historyInfo = this.redoStack.pop();\n if (historyInfo.action === 'BordersAndShading') {\n this.owner.editorModule.isBordersAndShadingDialog = true;\n }\n this.isRedoing = true;\n historyInfo.revert();\n this.isRedoing = false;\n this.owner.selection.checkForCursorVisibility();\n this.owner.editorModule.isBordersAndShadingDialog = false;\n };\n /**\n * @private\n */\n EditorHistory.prototype.destroy = function () {\n this.clearHistory();\n this.undoStackIn = undefined;\n this.redoStackIn = undefined;\n };\n EditorHistory.prototype.clearHistory = function () {\n this.clearUndoStack();\n this.clearRedoStack();\n };\n EditorHistory.prototype.clearUndoStack = function () {\n if (this.canUndo()) {\n while (this.undoStack.length > 0) {\n var historyInfo = this.undoStack.pop();\n historyInfo.destroy();\n historyInfo = undefined;\n }\n }\n };\n EditorHistory.prototype.clearRedoStack = function () {\n if (this.canRedo()) {\n while (this.redoStack.length > 0) {\n var historyInfo = this.redoStack.pop();\n historyInfo.destroy();\n historyInfo = undefined;\n }\n }\n };\n return EditorHistory;\n}());\nexport { EditorHistory };\n","import { ZipArchive, ZipArchiveItem } from '@syncfusion/ej2-compression';\nimport { XmlWriter } from '@syncfusion/ej2-file-utils';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Dictionary } from '../../index';\n/**\n * Exports the document to Word format.\n */\nvar WordExport = /** @class */ (function () {\n function WordExport() {\n //Part path\n this.documentPath = 'word/document.xml';\n this.stylePath = 'word/styles.xml';\n this.numberingPath = 'word/numbering.xml';\n this.settingsPath = 'word/settings.xml';\n this.headerPath = 'word/header';\n this.footerPath = 'word/footer';\n //private commentsPath: string = 'word/comments.xml';\n this.imagePath = 'word/media/image';\n // private footnotesPath: string = 'word/footnotes.xml';\n // private endnotesPath: string = 'word/endnotes.xml';\n this.appPath = 'docProps/app.xml';\n this.corePath = 'docProps/core.xml';\n // private CustomPath: string = 'docProps/custom.xml';\n // private FontTablePath: string = 'word/fontTable.xml';\n this.contentTypesPath = '[Content_Types].xml';\n // private ChartsPath: string = 'word/charts/';\n // private DefaultEmbeddingPath: string = 'word/embeddings/';\n // private EmbeddingPath:string = 'word\\embeddings\\';\n // private DrawingPath:string = 'word\\drawings\\';\n // private ThemePath: string = 'word/theme/theme1.xml';\n // private FontsPath:string = 'word\\fonts\\';\n // private DiagramPath:string = \"word/diagrams/';\n // private ControlPath:string = \"word/activeX/';\n // private VbaProject: string = 'vbaProject.bin';\n // private VbaData: string = 'vbaData.xml';\n // private VbaProjectPath: string = 'word/vbaProject.bin';\n // private VbaDataPath: string = 'word/vbaData.xml';\n // private CustomXMLPath:string = 'customXml\\';\n //Relationship path\n this.generalRelationPath = '_rels/.rels';\n this.wordRelationPath = 'word/_rels/document.xml.rels';\n // private FontRelationPath: string = 'word/_rels/fontTable.xml.rels';\n // private CommentsRelationPath: string = 'word/_rels/comments.xml.rels';\n // private FootnotesRelationPath: string = 'word/_rels/footnotes.xml.rels';\n // private EndnotesRelationPath: string = 'word/_rels/endnotes.xml.rels';\n // private NumberingRelationPath: string = 'word/_rels/numbering.xml.rels';\n this.headerRelationPath = 'word/_rels/header';\n this.footerRelationPath = 'word/_rels/footer';\n // private SettingsRelationpath: string = 'word/_rels/settings.xml.rels';\n // private VbaProjectRelsPath: string = 'word/_rels/vbaProject.bin.rels';\n //Content type of the parts\n this.xmlContentType = 'application/xml';\n this.fontContentType = 'application/vnd.openxmlformats-officedocument.obfuscatedFont';\n this.documentContentType = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document.main+xml';\n // private TemplateContentType: string = 'application/vnd.openxmlformats-officedocument.wordprocessingml.template.main+xml';\n // private CommentsContentType: string = 'application/vnd.openxmlformats-officedocument.wordprocessingml.comments+xml';\n this.settingsContentType = 'application/vnd.openxmlformats-officedocument.wordprocessingml.settings+xml';\n // private EndnoteContentType: string = 'application/vnd.openxmlformats-officedocument.wordprocessingml.endnotes+xml';\n // private FontTableContentType: string = 'application/vnd.openxmlformats-officedocument.wordprocessingml.fontTable+xml';\n this.footerContentType = 'application/vnd.openxmlformats-officedocument.wordprocessingml.footer+xml';\n // private FootnoteContentType: string = 'application/vnd.openxmlformats-officedocument.wordprocessingml.footnotes+xml';\n // private GlossaryDocumentContentType: string = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document.glossary+xml';\n this.headerContentType = 'application/vnd.openxmlformats-officedocument.wordprocessingml.header+xml';\n this.numberingContentType = 'application/vnd.openxmlformats-officedocument.wordprocessingml.numbering+xml';\n this.stylesContentType = 'application/vnd.openxmlformats-officedocument.wordprocessingml.styles+xml';\n this.webSettingsContentType = 'application/vnd.openxmlformats-officedocument.wordprocessingml.webSettings+xml';\n this.appContentType = 'application/vnd.openxmlformats-officedocument.extended-properties+xml';\n this.coreContentType = 'application/vnd.openxmlformats-package.core-properties+xml';\n this.customContentType = 'application/vnd.openxmlformats-officedocument.custom-properties+xml';\n this.customXmlContentType = 'application/vnd.openxmlformats-officedocument.customXmlProperties+xml';\n this.relationContentType = 'application/vnd.openxmlformats-package.relationships+xml';\n // private DiagramColor: string = 'application/vnd.openxmlformats-officedocument.drawingml.diagramColors+xml';\n // private DiagramData: string = 'application/vnd.openxmlformats-officedocument.drawingml.diagramData+xml';\n // private DiagramLayout: string = 'application/vnd.openxmlformats-officedocument.drawingml.diagramLayout+xml';\n // private DiagramStyle: string = 'application/vnd.openxmlformats-officedocument.drawingml.diagramStyle+xml';\n // private ChartsContentType: string = 'application/vnd.openxmlformats-officedocument.drawingml.chart+xml';\n // private ThemeContentType: string = 'application/vnd.openxmlformats-officedocument.theme+xml';\n // private ChartDrawingContentType: string = 'application/vnd.openxmlformats-officedocument.drawingml.chartshapes+xml';\n // private ActiveXContentType: string = 'application/vnd.ms-office.activeX+xml';\n // private ActiveXBinContentType: string = 'application/vnd.ms-office.activeX';\n this.tableStyleContentType = 'application/vnd.openxmlformats-officedocument.presentationml.tableStyles+xml';\n // private ChartStyleContentType: string = 'application/vnd.ms-office.chartstyle+xml';\n // private ChartColorStyleContentType: string = 'application/vnd.ms-office.chartcolorstyle+xml';\n // private VbaProjectContentType: string = 'application/vnd.ms-office.vbaProject';\n // private VbaDataContentType: string = 'application/vnd.ms-word.vbaData+xml';\n // private MacroDocumentContentType: string = 'application/vnd.ms-word.document.macroEnabled.main+xml';\n // private MacroTemplateContentType: string = 'application/vnd.ms-word.template.macroEnabledTemplate.main+xml';\n // private OleObjectContentType: string = 'application/vnd.openxmlformats-officedocument.oleObject';\n // Relationship types of document parts\n // private AltChunkRelType: string = 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/aFChunk';\n // private CommentsRelType: string = 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/comments';\n this.settingsRelType = 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/settings';\n // private EndnoteRelType: string = 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/endnotes';\n // private FontTableRelType: string = 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/fontTable';\n this.footerRelType = 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/footer';\n // private FootnoteRelType: string = 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/footnotes';\n this.headerRelType = 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/header';\n this.documentRelType = 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument';\n this.numberingRelType = 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/numbering';\n this.stylesRelType = 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/styles';\n // private OleObjectRelType: string = 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/oleObject';\n // private ChartRelType: string = 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/chart';\n // private ThemeRelType: string = 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/theme';\n this.fontRelType = 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/font';\n this.tableStyleRelType = 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/tableStyles';\n this.coreRelType = 'http://schemas.openxmlformats.org/package/2006/relationships/metadata/core-properties';\n this.appRelType = 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/extended-properties';\n this.customRelType = 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/custom-properties';\n this.imageRelType = 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/image';\n this.hyperlinkRelType = 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/hyperlink';\n this.controlRelType = 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/control';\n this.packageRelType = 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/package';\n // private VbaProjectRelType: string = 'http://schemas.microsoft.com/office/2006/relationships/vbaProject';\n // private VbaDataRelType: string = 'http://schemas.microsoft.com/office/2006/relationships/wordVbaData';\n this.customXmlRelType = 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/customXml';\n this.customUIRelType = 'http://schemas.microsoft.com/office/2006/relationships/ui/extensibility';\n this.attachedTemplateRelType = 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/attachedTemplate';\n // private ChartColorStyleRelType: string = 'http://schemas.microsoft.com/office/2011/relationships/chartColorStyle';\n // private ChartStyleRelType: string = 'http://schemas.microsoft.com/office/2011/relationships/chartStyle';\n // private ChartUserShapesRelType: string = 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/chartUserShapes';\n // private ChartContentType: string = 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/package';\n // Namespaces\n // private PKG_namespace: string = 'http://schemas.microsoft.com/office/2006/xmlPackage';\n this.wNamespace = 'http://schemas.openxmlformats.org/wordprocessingml/2006/main';\n this.wpNamespace = 'http://schemas.openxmlformats.org/drawingml/2006/wordprocessingDrawing';\n this.pictureNamespace = 'http://schemas.openxmlformats.org/drawingml/2006/picture';\n this.aNamespace = 'http://schemas.openxmlformats.org/drawingml/2006/main';\n this.a14Namespace = 'http://schemas.microsoft.com/office/drawing/2010/main';\n // private SVG_namespace: string = 'http://schemas.microsoft.com/office/drawing/2016/SVG/main';\n this.rNamespace = 'http://schemas.openxmlformats.org/officeDocument/2006/relationships';\n this.rpNamespace = 'http://schemas.openxmlformats.org/package/2006/relationships';\n this.vNamespace = 'urn:schemas-microsoft-com:vml';\n this.oNamespace = 'urn:schemas-microsoft-com:office:office';\n this.xmlNamespace = 'http://www.w3.org/XML/1998/namespace';\n this.w10Namespace = 'urn:schemas-microsoft-com:office:word';\n this.cpNamespace = 'http://schemas.openxmlformats.org/package/2006/metadata/core-properties';\n this.dcNamespace = 'http://purl.org/dc/elements/1.1/';\n // private DCTERMS_namespace: string = 'http://purl.org/dc/terms/';\n // private XSI_namespace: string = 'http://www.w3.org/2001/XMLSchema-instance';\n this.docPropsNamespace = 'http://schemas.openxmlformats.org/officeDocument/2006/extended-properties';\n this.veNamespace = 'http://schemas.openxmlformats.org/markup-compatibility/2006';\n this.mNamespace = 'http://schemas.openxmlformats.org/officeDocument/2006/math';\n this.wneNamespace = 'http://schemas.microsoft.com/office/word/2006/wordml';\n // private DCMI_namespace: string = 'http://purl.org/dc/dcmitype/';\n this.customPropsNamespace = 'http://schemas.openxmlformats.org/officeDocument/2006/custom-properties';\n this.vtNamespace = 'http://schemas.openxmlformats.org/officeDocument/2006/docPropsVTypes';\n this.chartNamespace = 'http://schemas.openxmlformats.org/drawingml/2006/chart';\n this.slNamespace = 'http://schemas.openxmlformats.org/schemaLibrary/2006/main';\n //2003WML namespace\n // private amlNamespace: string = 'http://schemas.microsoft.com/aml/2001/core';\n this.dtNamespace = 'uuid:C2F41010-65B3-11d1-A29F-00AA00C14882';\n this.wmlNamespace = 'http://schemas.microsoft.com/office/word/2003/wordml';\n //2010 namespaces\n this.w14Namespace = 'http://schemas.microsoft.com/office/word/2010/wordml';\n this.wpCanvasNamespace = 'http://schemas.microsoft.com/office/word/2010/wordprocessingCanvas';\n this.wpDrawingNamespace = 'http://schemas.microsoft.com/office/word/2010/wordprocessingDrawing';\n this.wpGroupNamespace = 'http://schemas.microsoft.com/office/word/2010/wordprocessingGroup';\n this.wpInkNamespace = 'http://schemas.microsoft.com/office/word/2010/wordprocessingInk';\n this.wpShapeNamespace = 'http://schemas.microsoft.com/office/word/2010/wordprocessingShape';\n //2013 namespaces\n this.w15Namespace = 'http://schemas.microsoft.com/office/word/2012/wordml';\n this.diagramNamespace = 'http://schemas.openxmlformats.org/drawingml/2006/diagram';\n //Encryption namespaces\n this.eNamespace = 'http://schemas.microsoft.com/office/2006/encryption';\n this.pNamespace = 'http://schemas.microsoft.com/office/2006/keyEncryptor/password';\n this.certNamespace = 'http://schemas.microsoft.com/office/2006/keyEncryptor/certificate';\n // Dls xml tags\n this.cRelationshipsTag = 'Relationships';\n this.cRelationshipTag = 'Relationship';\n this.cIdTag = 'Id';\n this.cTypeTag = 'Type';\n this.cTargetTag = 'Target';\n this.cUserShapesTag = 'userShapes';\n this.cExternalData = 'externalData';\n this.twipsInOnePoint = 20;\n this.twentiethOfPoint = 20;\n this.borderMultiplier = 8;\n this.percentageFactor = 50;\n this.emusPerPoint = 12700;\n // private const TOC_SYMBOL:string = (char)0x01;\n // private const FOOTNOTE_SYMBOL:string = (char)0x02;\n // private const PAGENUMBER_SYMBOL:string = (char)0xB;\n // private DEF_FIT_TEXT_TO_SHAPE: string = 'mso-fit-shape-to-text:t';\n // Document tags\n this.cConditionalTableStyleTag = 'tblStylePr';\n this.cTableFormatTag = 'tblPr';\n this.cTowFormatTag = 'trPr';\n this.cCellFormatTag = 'tcPr';\n this.cParagraphFormatTag = 'pPr';\n this.cCharacterFormatTag = 'rPr';\n this.packageType = 'http://schemas.microsoft.com/office/2006/xmlPackage';\n this.relsPartPath = '/_rels/.rels';\n this.documentRelsPartPath = '/word/_rels/document.xml.rels';\n this.webSettingsPath = '/word/webSettings.xml';\n this.wordMLDocumentPath = '/word/document.xml';\n this.wordMLStylePath = '/word/styles.xml';\n this.wordMLNumberingPath = '/word/numbering.xml';\n this.wordMLSettingsPath = '/word/settings.xml';\n this.wordMLHeaderPath = '/word/header';\n this.wordMLFooterPath = '/word/footer';\n this.wordMLCommentsPath = '/word/comments.xml';\n this.wordMLImagePath = '/word/media/image';\n this.wordMLFootnotesPath = '/word/footnotes.xml';\n this.wordMLEndnotesPath = '/word/endnotes.xml';\n this.wordMLAppPath = '/docProps/app.xml';\n this.wordMLCorePath = '/docProps/core.xml';\n this.wordMLCustomPath = '/docProps/custom.xml';\n this.wordMLFontTablePath = '/word/fontTable.xml';\n this.wordMLChartsPath = '/word/charts/';\n this.wordMLDefaultEmbeddingPath = '/word/embeddings/';\n this.wordMLEmbeddingPath = '/word/embeddings/';\n this.wordMLDrawingPath = '/word/drawings/';\n this.wordMLThemePath = '/word/theme/theme1.xml';\n this.wordMLFontsPath = '/word/fonts/';\n this.wordMLDiagramPath = '/word/diagrams/';\n this.wordMLControlPath = '/word/activeX/';\n this.wordMLVbaProject = '/vbaProject.bin';\n this.wordMLVbaData = '/vbaData.xml';\n this.wordMLVbaProjectPath = '/word/vbaProject.bin';\n this.wordMLVbaDataPath = '/word/vbaData.xml';\n // private WordMLCustomXMLPath: string = '/customXml/';\n this.wordMLWebSettingsPath = '/word/webSettings.xml';\n this.wordMLCustomItemProp1Path = '/customXml/itemProps1.xml';\n // private WordMLCustomXMLRelPath: string = '/customXml/_rels/item1.xml.rels';\n this.wordMLFootnoteRelPath = '/word/_rels/footnotes.xml.rels';\n this.wordMLEndnoteRelPath = '/word/_rels/endnotes.xml.rels';\n this.wordMLSettingsRelPath = '/word/_rels/settings.xml.rels';\n this.wordMLNumberingRelPath = '/word/_rels/numbering.xml.rels';\n this.wordMLFontTableRelPath = '/word/_rels/fontTable.xml.rels';\n this.wordMLCustomXmlPropsRelType = 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/customXmlProps';\n this.wordMLControlRelType = 'http://schemas.microsoft.com/office/2006/relationships/activeXControlBinary';\n this.wordMLDiagramContentType = 'application/vnd.ms-office.drawingml.diagramDrawing+xml';\n this.lastSection = false;\n this.mRelationShipID = 0;\n this.mDocPrID = 0;\n this.mDifferentFirstPage = false;\n this.mBookmarks = undefined;\n /* tslint:enable:no-any */\n }\n WordExport.prototype.getModuleName = function () {\n return 'WordExport';\n };\n Object.defineProperty(WordExport.prototype, \"bookmarks\", {\n // Gets the bookmark name\n get: function () {\n if (isNullOrUndefined(this.mBookmarks)) {\n this.mBookmarks = [];\n }\n return this.mBookmarks;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WordExport.prototype, \"documentImages\", {\n // Gets the collection of images present in the document body\n get: function () {\n if (this.mDocumentImages === undefined) {\n this.mDocumentImages = new Dictionary();\n }\n return this.mDocumentImages;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WordExport.prototype, \"externalImages\", {\n // Gets the collection of images present in the document body\n get: function () {\n if (this.mExternalLinkImages === undefined) {\n this.mExternalLinkImages = new Dictionary();\n }\n return this.mExternalLinkImages;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WordExport.prototype, \"headerFooterImages\", {\n // Gets the collections of images present in the HeaderFooters\n get: function () {\n if (this.mHeaderFooterImages === undefined) {\n this.mHeaderFooterImages = new Dictionary();\n }\n return this.mHeaderFooterImages;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(WordExport.prototype, \"headersFooters\", {\n /// Gets the HeaderFooter Collection\n get: function () {\n if (this.mHeaderFooterColl === undefined) {\n this.mHeaderFooterColl = new Dictionary();\n }\n return this.mHeaderFooterColl;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @private\n */\n WordExport.prototype.save = function (viewer, fileName) {\n this.serialize(viewer);\n this.mArchive.save(fileName + '.docx').then(function (mArchive) {\n mArchive.destroy();\n });\n this.close();\n };\n /**\n * @private\n */\n WordExport.prototype.saveAsBlob = function (viewer) {\n var _this = this;\n this.serialize(viewer);\n return new Promise(function (resolve, reject) {\n _this.mArchive.saveAsBlob().then(function (blob) {\n _this.mArchive.destroy();\n blob = new Blob([blob], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });\n resolve(blob);\n });\n });\n };\n /**\n * @private\n */\n WordExport.prototype.destroy = function () {\n this.clearDocument();\n this.mRelationShipID = undefined;\n this.mDocPrID = undefined;\n this.mDifferentFirstPage = undefined;\n if (this.mArchive) {\n this.mArchive.destroy();\n this.mArchive = undefined;\n }\n };\n // Saves the word document in the stream\n WordExport.prototype.serialize = function (viewer) {\n /* tslint:disable:no-any */\n var document = viewer.owner.sfdtExportModule.write();\n this.setDocument(document);\n this.mArchive = new ZipArchive();\n this.mArchive.compressionLevel = 'Normal';\n this.mVerticalMerge = new Dictionary();\n this.mGridSpans = new Dictionary();\n var contenttype;\n //document.xml\n this.serializeDocument();\n //Styles.xml\n this.serializeStyles();\n //numbering.xml\n this.serializeNumberings();\n //theme.xml\n // if (m_document.DocHasThemes && !isNullOrUndefined(m_document.Themes))\n // SerializeThemes();\n // else\n // this.serializeDefaultThemes();\n //settings.xml\n this.serializeSettings();\n //core.xml\n this.serializeCoreProperties();\n //app.xml\n this.serializeAppProperties();\n //fontTable.xml\n this.serializeFontTable(contenttype);\n //custom.xml\n // if (!isNullOrUndefined(this.wordDocument.CustomDocumentProperties) && m_document.CustomDocumentProperties.length > 0) {\n // SerializeCustomProperties();\n // }\n //Settings Relations\n this.serializeSettingsRelation();\n //Numbering relation if the document has picture bullet\n // if (PictureBullets.length > 0) {\n // SerializeNumberingsRelation();\n // }\n this.serializeHeaderFooters();\n //document relations\n this.serializeDocumentRelations();\n // // Add controls to archieve.\n // if (ControlsPathNames.length > 0) {\n // AddControlsToZip(m_document.DocxPackage);\n // }\n // if (!isNullOrUndefined(m_document.CustomUIPartContainer))\n // AddPartContainerToArchive(m_document.CustomUIPartContainer);\n // if (!isNullOrUndefined(m_document.CustomXMLContainer))\n // AddPartContainerToArchive(m_document.CustomXMLContainer);\n //general relations\n this.serializeGeneralRelations();\n //[ContentTypes].xml\n this.serializeContentTypes(contenttype);\n // Clears the internal fields maintained for serializing.\n this.clearDocument();\n };\n // Sets the document\n WordExport.prototype.setDocument = function (document) {\n this.document = document;\n this.mSections = document.sections;\n this.mLists = document.lists;\n this.mAbstractLists = document.abstractLists;\n this.defCharacterFormat = document.characterFormat;\n this.defParagraphFormat = document.paragraphFormat;\n this.defaultTabWidthValue = document.defaultTabWidth;\n this.mStyles = document.styles;\n };\n // Clears the document\n WordExport.prototype.clearDocument = function () {\n // Owner Nodes\n this.section = undefined;\n this.lastSection = undefined;\n this.blockOwner = undefined;\n this.paragraph = undefined;\n this.table = undefined;\n this.row = undefined;\n this.headerFooter = undefined;\n this.document = undefined;\n this.mSections = undefined;\n this.mLists = undefined;\n this.mAbstractLists = undefined;\n this.defCharacterFormat = undefined;\n this.defParagraphFormat = undefined;\n this.defaultTabWidthValue = undefined;\n this.mRelationShipID = 0;\n this.mDocPrID = 0;\n this.mDifferentFirstPage = false;\n if (this.mHeaderFooterColl) {\n this.mHeaderFooterColl.destroy();\n this.mHeaderFooterColl = undefined;\n }\n if (this.mVerticalMerge) {\n this.mVerticalMerge.destroy();\n this.mVerticalMerge = undefined;\n }\n if (this.mGridSpans) {\n this.mGridSpans.destroy();\n this.mGridSpans = undefined;\n }\n if (this.mDocumentImages) {\n this.mDocumentImages.destroy();\n this.mDocumentImages = undefined;\n }\n if (this.mExternalLinkImages) {\n this.mExternalLinkImages.destroy();\n this.mExternalLinkImages = undefined;\n }\n if (this.mHeaderFooterImages) {\n this.mHeaderFooterImages.destroy();\n this.mHeaderFooterImages = undefined;\n }\n };\n // Serializes the document elements (document.xml)\n WordExport.prototype.serializeDocument = function () {\n var writer = new XmlWriter();\n writer.writeStartElement('w', 'document', this.wNamespace);\n this.writeCommonAttributeStrings(writer);\n this.serializeDocumentBody(writer);\n writer.writeEndElement(); //end of document tag\n var archiveItem = new ZipArchiveItem(writer.buffer, this.documentPath);\n this.mArchive.addItem(archiveItem);\n };\n WordExport.prototype.writeCommonAttributeStrings = function (writer) {\n writer.writeAttributeString('xmlns', 'wpc', undefined, this.wpCanvasNamespace);\n this.writeCustom(writer);\n writer.writeAttributeString('xmlns', 'wp14', undefined, this.wpDrawingNamespace);\n writer.writeAttributeString('xmlns', 'wp', undefined, this.wpNamespace);\n writer.writeAttributeString('xmlns', 'w10', undefined, this.w10Namespace);\n writer.writeAttributeString('xmlns', 'w', undefined, this.wNamespace);\n this.writeDup(writer);\n writer.writeAttributeString('xmlns', 'wne', undefined, this.wneNamespace);\n writer.writeAttributeString('xmlns', 'wps', undefined, this.wpShapeNamespace);\n writer.writeAttributeString('mc', 'Ignorable', undefined, 'w14 w15 wp14');\n };\n WordExport.prototype.writeDup = function (writer) {\n writer.writeAttributeString('xmlns', 'w14', undefined, this.w14Namespace);\n writer.writeAttributeString('xmlns', 'w15', undefined, this.w15Namespace);\n writer.writeAttributeString('xmlns', 'wpg', undefined, this.wpGroupNamespace);\n writer.writeAttributeString('xmlns', 'wpi', undefined, this.wpInkNamespace);\n };\n WordExport.prototype.writeCustom = function (writer) {\n writer.writeAttributeString('xmlns', 'mc', undefined, this.veNamespace);\n writer.writeAttributeString('xmlns', 'o', undefined, this.oNamespace);\n writer.writeAttributeString('xmlns', 'r', undefined, this.rNamespace);\n writer.writeAttributeString('xmlns', 'm', undefined, this.mNamespace);\n writer.writeAttributeString('xmlns', 'v', undefined, this.vNamespace);\n };\n // Serializes the document body\n WordExport.prototype.serializeDocumentBody = function (writer) {\n writer.writeStartElement(undefined, 'body', this.wNamespace);\n var count = this.document.sections.length;\n for (var i = 0; i < count; i++) {\n this.section = this.document.sections[i];\n this.lastSection = i === count - 1;\n this.serializeSection(writer, this.section, i === count - 1);\n this.section = undefined;\n }\n writer.writeEndElement();\n };\n // Serializes the Section.\n WordExport.prototype.serializeSection = function (writer, section, last) {\n this.blockOwner = section;\n this.serializeBodyItems(writer, section.blocks, last);\n if (last) {\n this.serializeSectionProperties(writer, section);\n }\n this.blockOwner = undefined;\n };\n // Serialize the section properties.\n WordExport.prototype.serializeSectionProperties = function (writer, section) {\n writer.writeStartElement('w', 'sectPr', this.wNamespace);\n if (section.headersFooters) {\n this.serializeHFReference(writer, section.headersFooters);\n }\n // if (IsNeedToSerializeSectionFootNoteProperties(section))\n // SerializeFootnoteProperties(section);\n // if (IsNeedToSerializeSectionEndNoteProperties(section))\n // SerializeEndnoteProperties(section);\n this.serializeSectionType(writer, 'nextPage');\n this.serializePageSetup(writer, section.sectionFormat);\n this.serializeColumns(writer, section);\n // this.serializeSectionProtection(section);\n // if (section.PageSetup.VerticalAlignment !== PageAlignment.Top) {\n // writer.writeStartElement('vAlign', this.wNamespace);\n // switch (section.PageSetup.VerticalAlignment) {\n // case PageAlignment.Top:\n // writer.WriteAttributeString('val', this.wNamespace, 'top');\n // break;\n // case PageAlignment.Middle:\n // writer.WriteAttributeString('val', this.wNamespace, 'center');\n // break;\n // case PageAlignment.Justified:\n // writer.WriteAttributeString('val', this.wNamespace, 'both');\n // break;\n // case PageAlignment.Bottom:\n // writer.WriteAttributeString('val', this.wNamespace, 'bottom');\n // break;\n // }\n // writer.WriteEndElement();\n // }\n if (section.sectionFormat !== undefined && section.sectionFormat.differentFirstPage) {\n writer.writeStartElement(undefined, 'titlePg', this.wNamespace);\n writer.writeEndElement();\n }\n // SerializeTextDirection(section);\n // if (section.PageSetup.Bidi) {\n // writer.WriteStartElement('bidi', this.wNamespace);\n // writer.WriteEndElement();\n // }\n //rtlGutter\n // SerializeDocGrid(section);\n //printerSettings\n writer.writeEndElement(); //end of sectPr tag\n };\n // Serialize the column properties of section.\n WordExport.prototype.serializeColumns = function (writer, section) {\n writer.writeStartElement(undefined, 'cols', this.wNamespace);\n writer.writeAttributeString(undefined, 'equalWidth', this.wNamespace, '1');\n writer.writeAttributeString(undefined, 'space', this.wNamespace, '0');\n writer.writeEndElement();\n // ColumnCollection columns = section.Columns;\n // writer.WriteStartElement('cols', this.wNamespace);\n // if (columns.length > 0)\n // {\n // writer.WriteAttributeString('num', this.wNamespace, columns.length.ToString());\n // }\n // if (section.PageSetup.DrawLinesBetweenCols)\n // writer.WriteAttributeString('sep', this.wNamespace, '1');\n // if (columns.OwnerSection.PageSetup.EqualColumnWidth)\n // {\n // writer.WriteAttributeString('equalWidth', this.wNamespace, '1');\n // //When the column count is negative, MS word just reset the column's count to zero\n // //To avoid index out of exception, checked the columns count\n // tslint:disable-next-line:max-line-length\n // writer.WriteAttributeString('space', this.wNamespace, ToString(columns.length > 0 ? columns[0].Space * this.TwentiethOfPoint : 0));\n // }\n // else if (columns.length > 0)\n // {\n // writer.WriteAttributeString('equalWidth', this.wNamespace, '0');\n // foreach (Column column in columns)\n // {\n // writer.WriteStartElement('col', this.wNamespace);\n // writer.WriteAttributeString('w', this.wNamespace, ToString(column.Width * this.TwentiethOfPoint));\n // tslint:disable-next-line:max-line-length\n // writer.WriteAttributeString('space', this.wNamespace, ToString(column.Space * this.TwentiethOfPoint));\n // writer.WriteEndElement();\n // }\n // }\n // writer.WriteEndElement();\n };\n // Serialize the page setup properties.\n WordExport.prototype.serializePageSetup = function (writer, pageSetup) {\n if (pageSetup !== undefined) {\n this.serializePageSize(writer, pageSetup);\n this.serializePageMargins(writer, pageSetup);\n }\n // // StartElement paperSrc (if any)\n // if (pageSetup.FirstPageTray > 0 || pageSetup.OtherPagesTray > 0) {\n // writer.WriteStartElement('paperSrc', this.wNamespace);\n // if (pageSetup.FirstPageTray > 0) {\n // writer.WriteAttributeString('first', this.wNamespace, pageSetup.FirstPageTray.ToString());\n // }\n // if (pageSetup.OtherPagesTray > 0) {\n // writer.WriteAttributeString('other', this.wNamespace, pageSetup.OtherPagesTray.ToString());\n // }\n // writer.WriteEndElement();\n // }\n writer.writeStartElement(undefined, 'pgBorders', this.wNamespace);\n // //zOrder\n // if (pageSetup.PageBordersApplyType === PageBordersApplyType.FirstPage)\n // writer.WriteAttributeString('display', this.wNamespace, 'firstPage');\n // else if (pageSetup.PageBordersApplyType === PageBordersApplyType.AllExceptFirstPage)\n // writer.WriteAttributeString('display', this.wNamespace, 'notFirstPage');\n // if (pageSetup.PageBorderOffsetFrom === PageBorderOffsetFrom.PageEdge) {\n // writer.WriteAttributeString('offsetFrom', this.wNamespace, 'page');\n // }\n // //Serializing zOrder of the front page border\n // if (!pageSetup.IsFrontPageBorder) {\n // writer.WriteAttributeString('zOrder', this.wNamespace, 'back');\n // }\n // SerializePageBorders(pageSetup.Borders);\n writer.writeEndElement();\n // this.serializeLineNumberType(writer, pageSetup);\n //this.serializePageNumberType(writer, pageSetup);\n };\n // serialize the page size\n WordExport.prototype.serializePageSize = function (writer, pageSetup) {\n writer.writeStartElement(undefined, 'pgSz', this.wNamespace);\n // tslint:disable-next-line:max-line-length\n writer.writeAttributeString(undefined, 'w', this.wNamespace, this.roundToTwoDecimal(pageSetup.pageWidth * this.twentiethOfPoint).toString());\n // tslint:disable-next-line:max-line-length\n writer.writeAttributeString(undefined, 'h', this.wNamespace, this.roundToTwoDecimal(pageSetup.pageHeight * this.twentiethOfPoint).toString());\n // if (pageSetup.Orientation === PageOrientation.Landscape)\n // {\n // writer.WriteAttributeString('orient', this.wNamespace, 'landscape');\n // }\n writer.writeEndElement();\n };\n // Serialize the border.\n WordExport.prototype.serializePageMargins = function (writer, pageSetup) {\n writer.writeStartElement(undefined, 'pgMar', this.wNamespace);\n var marginValue = Math.round(pageSetup.topMargin * this.twentiethOfPoint);\n writer.writeAttributeString(undefined, 'top', this.wNamespace, marginValue.toString());\n marginValue = Math.round(pageSetup.rightMargin * this.twentiethOfPoint);\n writer.writeAttributeString(undefined, 'right', this.wNamespace, marginValue.toString());\n marginValue = Math.round(pageSetup.bottomMargin * this.twentiethOfPoint);\n writer.writeAttributeString(undefined, 'bottom', this.wNamespace, marginValue.toString());\n marginValue = Math.round(pageSetup.leftMargin * this.twentiethOfPoint);\n writer.writeAttributeString(undefined, 'left', this.wNamespace, marginValue.toString());\n // tslint:disable-next-line:max-line-length\n writer.writeAttributeString(undefined, 'header', this.wNamespace, this.roundToTwoDecimal(pageSetup.headerDistance * this.twentiethOfPoint).toString());\n // tslint:disable-next-line:max-line-length\n writer.writeAttributeString(undefined, 'footer', this.wNamespace, this.roundToTwoDecimal(pageSetup.footerDistance * this.twentiethOfPoint).toString());\n writer.writeAttributeString(undefined, 'gutter', this.wNamespace, '0');\n writer.writeEndElement();\n };\n // Serialize the section type.\n WordExport.prototype.serializeSectionType = function (writer, sectionBreakCode) {\n writer.writeStartElement('w', 'type', this.wNamespace);\n writer.writeAttributeString('w', 'val', this.wNamespace, sectionBreakCode); //GetSectionBreakCode(sectionBreakCode));\n writer.writeEndElement();\n };\n // Serialize the heeader/footer reference.\n WordExport.prototype.serializeHFReference = function (writer, headersFooters) {\n var hfId = '';\n if (headersFooters !== undefined) {\n this.mDifferentFirstPage = this.section.sectionFormat.differentOddAndEvenPages;\n var hf = headersFooters.firstPageHeader;\n if (hf && hf.blocks && hf.blocks.length > 0) {\n writer.writeStartElement(undefined, 'headerReference', this.wNamespace);\n writer.writeAttributeString(undefined, 'type', this.wNamespace, 'first');\n hfId = this.getNextRelationShipID();\n writer.writeAttributeString(undefined, 'id', this.rNamespace, hfId);\n this.addHeaderFooter(hf, 'FirstPageHeader', hfId);\n writer.writeEndElement();\n }\n hf = headersFooters.firstPageFooter;\n if (hf && hf.blocks && hf.blocks.length > 0) {\n writer.writeStartElement(undefined, 'footerReference', this.wNamespace);\n writer.writeAttributeString(undefined, 'type', this.wNamespace, 'first');\n hfId = this.getNextRelationShipID();\n writer.writeAttributeString(undefined, 'id', this.rNamespace, hfId);\n this.addHeaderFooter(hf, 'FirstPageFooter', hfId);\n writer.writeEndElement();\n }\n hf = headersFooters.evenHeader;\n if (hf && hf.blocks && hf.blocks.length > 0) {\n writer.writeStartElement(undefined, 'headerReference', this.wNamespace);\n writer.writeAttributeString(undefined, 'type', this.wNamespace, 'even');\n hfId = this.getNextRelationShipID();\n writer.writeAttributeString(undefined, 'id', this.rNamespace, hfId);\n this.addHeaderFooter(hf, 'EvenHeader', hfId);\n writer.writeEndElement();\n }\n hf = headersFooters.evenFooter;\n if (hf && hf.blocks && hf.blocks.length > 0) {\n writer.writeStartElement(undefined, 'footerReference', this.wNamespace);\n writer.writeAttributeString(undefined, 'type', this.wNamespace, 'even');\n hfId = this.getNextRelationShipID();\n writer.writeAttributeString(undefined, 'id', this.rNamespace, hfId);\n this.addHeaderFooter(hf, 'EvenFooter', hfId);\n writer.writeEndElement();\n }\n hf = headersFooters.header;\n if (hf && hf.blocks && hf.blocks.length > 0) {\n writer.writeStartElement(undefined, 'headerReference', this.wNamespace);\n writer.writeAttributeString(undefined, 'type', this.wNamespace, 'default');\n hfId = this.getNextRelationShipID();\n writer.writeAttributeString(undefined, 'id', this.rNamespace, hfId);\n this.addHeaderFooter(hf, 'OddHeader', hfId);\n writer.writeEndElement();\n }\n hf = headersFooters.footer;\n if (hf && hf.blocks && hf.blocks.length > 0) {\n writer.writeStartElement(undefined, 'footerReference', this.wNamespace);\n writer.writeAttributeString(undefined, 'type', this.wNamespace, 'default');\n hfId = this.getNextRelationShipID();\n writer.writeAttributeString(undefined, 'id', this.rNamespace, hfId);\n this.addHeaderFooter(hf, 'OddFooter', hfId);\n writer.writeEndElement();\n }\n }\n };\n // Adds the header footer details to the collection.\n WordExport.prototype.addHeaderFooter = function (hf, hfType, id) {\n var hfColl = new Dictionary();\n this.headersFooters.add(hfType, hfColl);\n this.headersFooters.get(hfType).add(id, hf);\n };\n // Serializes the bodyItems\n WordExport.prototype.serializeBodyItems = function (writer, blockCollection, isLastSection) {\n for (var i = 0; i < blockCollection.length; i++) {\n this.serializeBodyItem(writer, blockCollection[i], isLastSection);\n }\n };\n // Serialize the TextBody item\n WordExport.prototype.serializeBodyItem = function (writer, item, isLastSection) {\n if (isNullOrUndefined(item)) {\n throw new Error('BodyItem should not be undefined');\n }\n if (item.hasOwnProperty('inlines')) {\n this.paragraph = item;\n this.serializeParagraph(writer, item, isLastSection);\n this.paragraph = undefined;\n }\n else {\n var table = item;\n for (var i = 0; i < table.rows.length; i++) {\n if (table.rows[i].cells.length > 0) {\n this.serializeTable(writer, table);\n break;\n }\n }\n }\n };\n // Serialize the paragraph\n WordExport.prototype.serializeParagraph = function (writer, paragraph, isLastSection) {\n if (isNullOrUndefined(paragraph)) {\n throw new Error('Paragraph should not be undefined');\n }\n var sec = this.blockOwner;\n //Need to write the Section Properties if the Paragraph is last item in the section\n if (!isLastSection && sec.hasOwnProperty('sectionFormat')\n && sec.blocks.indexOf(paragraph) === sec.blocks.length - 1) {\n writer.writeStartElement('w', 'p', this.wNamespace);\n writer.writeStartElement(undefined, 'pPr', this.wNamespace);\n this.serializeSectionProperties(writer, sec);\n writer.writeEndElement();\n writer.writeEndElement();\n }\n // if (paragraph.ParagraphFormat.PageBreakAfter && !IsPageBreakNeedToBeSkipped(paragraph as Entity))\n // paragraph.InsertBreak(BreakType.PageBreak);\n // if (paragraph.ParagraphFormat.ColumnBreakAfter && !IsPageBreakNeedToBeSkipped(paragraph as Entity))\n // paragraph.InsertBreak(BreakType.ColumnBreak);\n //Splits the paragraph based on the newline character\n // paragraph.SplitTextRange();\n writer.writeStartElement('w', 'p', this.wNamespace);\n writer.writeStartElement(undefined, 'pPr', this.wNamespace);\n this.serializeParagraphFormat(writer, paragraph.paragraphFormat, paragraph);\n writer.writeEndElement(); //end of pPr\n // Serialize watermark if paragraph is the first item of Header document.\n // EnsureWatermark(paragraph);\n this.serializeParagraphItems(writer, paragraph.inlines);\n writer.writeEndElement(); //end of paragraph tag.\n };\n // Serialize the paragraph items\n WordExport.prototype.serializeParagraphItems = function (writer, paraItems) {\n var previousNode = undefined;\n for (var i = 0; i < paraItems.length; i++) {\n var item = paraItems[i];\n if (item.hasOwnProperty('fieldType')) {\n this.serializeFieldCharacter(writer, item);\n }\n else if (item.hasOwnProperty('imageString')) {\n this.serializePicture(writer, item);\n }\n else if (item.hasOwnProperty('bookmarkType')) {\n this.serializeBookMark(writer, item);\n }\n else {\n this.serializeTextRange(writer, item, previousNode);\n }\n previousNode = item;\n }\n };\n // Serialize the book mark\n WordExport.prototype.serializeBookMark = function (writer, bookmark) {\n var bookmarkId = this.getBookmarkId(bookmark.name);\n var bookmarkName = bookmark.name;\n if (bookmark.bookmarkType === 0) {\n writer.writeStartElement('w', 'bookmarkStart', this.wNamespace);\n writer.writeAttributeString('w', 'name', this.wNamespace, bookmarkName);\n }\n else if (bookmark.bookmarkType === 1) {\n writer.writeStartElement('w', 'bookmarkEnd', this.wNamespace);\n }\n writer.writeAttributeString('w', 'id', this.wNamespace, bookmarkId.toString());\n writer.writeEndElement();\n };\n WordExport.prototype.getBookmarkId = function (name) {\n var index = this.bookmarks.indexOf(name);\n if (index < 0) {\n index = this.bookmarks.length;\n this.bookmarks.push(name);\n }\n return index;\n };\n // Serialize the picture.\n WordExport.prototype.serializePicture = function (writer, image) {\n if (image.width >= 0 && image.height >= 0) {\n writer.writeStartElement(undefined, 'r', this.wNamespace);\n this.serializeCharacterFormat(writer, image.characterFormat);\n this.serializeDrawing(writer, image);\n writer.writeEndElement(); //end of run element\n }\n };\n // Serialize the drawing element.\n WordExport.prototype.serializeDrawing = function (writer, image) {\n writer.writeStartElement(undefined, 'drawing', this.wNamespace);\n this.serializeInlinePicture(writer, image);\n writer.writeEndElement();\n };\n // Serialize the inline picture.\n WordExport.prototype.serializeInlinePicture = function (writer, image) {\n writer.writeStartElement(undefined, 'inline', this.wpNamespace);\n writer.writeStartElement(undefined, 'extent', this.wpNamespace);\n var cx = Math.round(image.width * this.emusPerPoint);\n writer.writeAttributeString(undefined, 'cx', undefined, cx.toString());\n var cy = Math.round(image.height * this.emusPerPoint);\n writer.writeAttributeString(undefined, 'cy', undefined, cy.toString());\n writer.writeEndElement();\n // double borderWidth = (double)picture.PictureShape.PictureDescriptor.BorderLeft.LineWidth / DLSConstants.BorderLineFactor;\n // if (borderWidth > 0 && picture.DocxProps.length === 0) {\n // long leftTop = 0, rightBottom = 0;\n // picture.PictureShape.GetEffectExtent(borderWidth, ref leftTop, ref rightBottom);\n // m_writer.WriteStartElement('effectExtent', WP_namespace);\n // m_writer.WriteAttributeString('l', leftTop.ToString(CultureInfo.InvariantCulture));\n // m_writer.WriteAttributeString('t', leftTop.ToString(CultureInfo.InvariantCulture));\n // m_writer.WriteAttributeString('r', rightBottom.ToString(CultureInfo.InvariantCulture));\n // m_writer.WriteAttributeString('b', rightBottom.ToString(CultureInfo.InvariantCulture));\n // m_writer.WriteEndElement();\n // }\n //this.serializePicProperties(writer, image);\n this.serializeDrawingGraphics(writer, image);\n writer.writeEndElement();\n };\n WordExport.prototype.startsWith = function (sourceString, startString) {\n return startString.length > 0 && sourceString.substring(0, startString.length) === startString;\n };\n // Serialize the graphics element for pictures.\n WordExport.prototype.serializeDrawingGraphics = function (writer, picture) {\n var id = '';\n id = this.updateShapeId(picture);\n // picture.ShapeId = this.getNextDocPrID();\n // Processing picture\n writer.writeStartElement('wp', 'docPr', this.wpNamespace);\n writer.writeAttributeString(undefined, 'id', undefined, (this.mDocPrID++).toString());\n // if (!isNullOrUndefined(picture.AlternativeText))\n // m_writer.WriteAttributeString('descr', picture.AlternativeText);\n writer.writeAttributeString(undefined, 'name', undefined, '1'.toString());\n // if (!string.IsNullOrEmpty(picture.Title))\n // m_writer.WriteAttributeString('title', picture.Title);\n // else\n writer.writeAttributeString(undefined, 'title', undefined, '');\n // if (!picture.Visible)\n // m_writer.WriteAttributeString('hidden', '1');\n // SerializePictureHyperlink(picture);\n writer.writeEndElement();\n writer.writeStartElement('a', 'graphic', this.aNamespace);\n writer.writeStartElement('a', 'graphicData', this.aNamespace);\n writer.writeAttributeString(undefined, 'uri', undefined, this.pictureNamespace);\n writer.writeStartElement('pic', 'pic', this.pictureNamespace);\n writer.writeStartElement('pic', 'nvPicPr', this.pictureNamespace);\n writer.writeStartElement('pic', 'cNvPr', this.pictureNamespace);\n writer.writeAttributeString(undefined, 'id', undefined, '0');\n writer.writeAttributeString(undefined, 'name', undefined, '');\n writer.writeAttributeString(undefined, 'descr', undefined, '');\n writer.writeEndElement();\n writer.writeStartElement('pic', 'cNvPicPr', this.pictureNamespace);\n writer.writeStartElement('a', 'picLocks', this.aNamespace);\n writer.writeAttributeString(undefined, 'noChangeAspect', undefined, '1');\n writer.writeAttributeString(undefined, 'noChangeArrowheads', undefined, '1');\n writer.writeEndElement();\n writer.writeEndElement();\n writer.writeEndElement();\n writer.writeStartElement('pic', 'blipFill', this.pictureNamespace);\n writer.writeStartElement('a', 'blip', this.aNamespace);\n if (this.startsWith(picture.imageString, 'data:image')) {\n writer.writeAttributeString('r', 'embed', this.rNamespace, id);\n }\n else {\n if (this.documentImages.containsKey(id)) {\n //Remove the image document images collection for this particular key\n //If the picture image data has href means MS Word contains the image in media folder as well as \n //it is having external relationship id\n // if (!this.startsWith(picture.imageString, 'data:image')) {\n this.documentImages.remove(id);\n this.externalImages.add(id, picture.imageString);\n writer.writeAttributeString(undefined, 'link', this.rNamespace, id);\n }\n }\n //End Element Blip\n writer.writeEndElement();\n writer.writeStartElement('a', 'srcRect', this.aNamespace);\n writer.writeEndElement();\n writer.writeStartElement('a', 'stretch', this.aNamespace);\n writer.writeStartElement('a', 'fillRect', this.aNamespace);\n writer.writeEndElement();\n writer.writeEndElement();\n writer.writeEndElement();\n writer.writeStartElement('pic', 'spPr', this.pictureNamespace);\n writer.writeAttributeString(undefined, 'bwMode', undefined, 'auto');\n writer.writeStartElement('a', 'xfrm', this.aNamespace);\n // if (picture.Rotation !== 0)\n // m_writer.WriteAttributeString('rot', picture.Rotation.ToString());\n writer.writeStartElement('a', 'off', this.aNamespace);\n writer.writeAttributeString(undefined, 'x', undefined, '0');\n writer.writeAttributeString(undefined, 'y', undefined, '0');\n writer.writeEndElement();\n writer.writeStartElement('a', 'ext', this.aNamespace);\n var cx = Math.round((picture.width * this.emusPerPoint));\n writer.writeAttributeString(undefined, 'cx', undefined, cx.toString());\n var cy = Math.round((picture.height * this.emusPerPoint));\n writer.writeAttributeString(undefined, 'cy', undefined, cy.toString());\n writer.writeEndElement();\n writer.writeEndElement();\n writer.writeStartElement('a', 'prstGeom', this.aNamespace);\n writer.writeAttributeString(undefined, 'prst', undefined, 'rect');\n writer.writeStartElement('a', 'avLst', this.aNamespace);\n writer.writeEndElement();\n writer.writeEndElement();\n //When the picture border has been added next to effect list\n //if not, Picture border has not been preserved\n // if (picture.HasBorder)\n // {\n // if (picture.TextWrappingStyle === TextWrappingStyle.Inline && picture.IsShape)\n // SerializeInlineShapeLine(picture.PictureShape);\n // else\n // SerializeShapeLine(picture.PictureShape);\n // }\n // if (picture.DocxProps.length > 0)\n // SerializeDocxProps(picture.DocxProps, 'effectLst');\n writer.writeEndElement();\n writer.writeEndElement();\n writer.writeEndElement();\n writer.writeEndElement();\n };\n /// Update the shape id.\n WordExport.prototype.updateShapeId = function (picture) {\n var id = '';\n var tOwner = this.paragraph;\n // Adding picture byte data to the corresponding picture collection \n // depending on its owner subdocument\n if (this.headerFooter) {\n id = this.updateHFImageRels(this.headerFooter, picture);\n }\n else {\n if (id === '') {\n if (tOwner.hasOwnProperty('sectionFormat') || tOwner.hasOwnProperty('inlines')) {\n id = this.addImageRelation(this.documentImages, picture);\n // if (owner is WFootnote)\n // {\n // if ((owner as WFootnote).FootnoteType === FootnoteType.Footnote)\n // id = AddImageRelation(FootnoteImages, picture.ImageRecord);\n // else\n // id = AddImageRelation(EndnoteImages, picture.ImageRecord);\n // }\n // if (owner is WComment)\n // id = AddImageRelation(CommentImages, picture.ImageRecord);\n }\n }\n }\n return id;\n };\n // Adds the image relation.\n WordExport.prototype.addImageRelation = function (imageCollection, image) {\n var relationId = '';\n // if (imageCollection.ContainsValue(imageRecord)) {\n // foreach(string key in imageCollection.keys)\n // {\n // if (imageRecord === imageCollection[key]) {\n // relationId = key;\n // break;\n // }\n // }\n // }\n // else {\n relationId = this.getNextRelationShipID();\n imageCollection.add(relationId, image);\n // }\n return relationId;\n };\n // Update the HeaderFooter image relations.\n WordExport.prototype.updateHFImageRels = function (hf, image) {\n var id = '';\n // UpdateImages(image);\n var headerId = '';\n var types = this.headersFooters.keys;\n for (var i = 0; i < types.length; i++) {\n var hfColl = this.headersFooters.get(types[i]);\n var hfKeys = hfColl.keys;\n for (var j = 0; j < hfKeys.length; j++) {\n if (hfColl.get(hfKeys[j]) === hf) {\n headerId = hfKeys[j];\n var headerImages = void 0;\n if (this.headerFooterImages.containsKey(headerId)) {\n headerImages = this.headerFooterImages.get(headerId);\n id = this.addImageRelation(headerImages, image);\n }\n else {\n headerImages = new Dictionary();\n id = this.addImageRelation(headerImages, image);\n this.headerFooterImages.add(headerId, headerImages);\n }\n }\n }\n }\n return id;\n };\n // Serialize the table\n WordExport.prototype.serializeTable = function (writer, table) {\n if (table.rows.length <= 0) {\n return;\n }\n var owner = this.table;\n this.table = table;\n writer.writeStartElement(undefined, 'tbl', this.wNamespace);\n var tableFormat = table.rows[0].rowFormat;\n this.serializeTableFormat(writer, tableFormat, table);\n this.serializeTableGrid(writer, table);\n this.serializeTableRows(writer, table.rows);\n writer.writeEndElement();\n this.table = owner;\n };\n // Serialize the table grid\n WordExport.prototype.serializeTableGrid = function (writer, table) {\n writer.writeStartElement(undefined, 'tblGrid', this.wNamespace);\n if (table.grid.length !== 0) {\n this.serializeGridColumns(writer, table.grid);\n }\n writer.writeEndElement();\n };\n // Serialize the table rows\n WordExport.prototype.serializeTableRows = function (writer, rows) {\n if (rows.length > 0) {\n for (var i = 0; i < rows.length; i++) {\n var row = rows[i];\n if (row.cells.length > 0) {\n this.serializeRow(writer, row);\n }\n }\n }\n };\n // Serialize the table row\n WordExport.prototype.serializeRow = function (writer, row) {\n var owner = this.row;\n this.row = row;\n writer.writeStartElement(undefined, 'tr', this.wNamespace);\n this.serializeRowFormat(writer, row);\n this.serializeCells(writer, row.cells);\n writer.writeEndElement(); //end od table row 'tr'\n this.row = owner;\n };\n // Serialize the row format\n WordExport.prototype.serializeRowFormat = function (writer, row) {\n writer.writeStartElement(undefined, 'trPr', this.wNamespace);\n //Serialize Row Height\n if (row.rowFormat.height > 0) {\n writer.writeStartElement(undefined, 'trHeight', this.wNamespace);\n if (row.rowFormat.heightType === 'Exactly') {\n writer.writeAttributeString('w', 'hRule', this.wNamespace, 'exact');\n }\n else if (row.rowFormat.heightType === 'AtLeast') {\n writer.writeAttributeString('w', 'hRule', this.wNamespace, 'atLeast');\n }\n var height = this.roundToTwoDecimal(row.rowFormat.height * this.twentiethOfPoint).toString();\n writer.writeAttributeString('w', 'val', this.wNamespace, height);\n writer.writeEndElement();\n }\n var rowFormat = row.rowFormat;\n // //Serialize 'gridBefore' element\n var gridBefore = rowFormat.gridBefore;\n if (gridBefore > 0) {\n writer.writeStartElement(undefined, 'gridBefore', this.wNamespace);\n writer.writeAttributeString('w', 'val', this.wNamespace, gridBefore.toString());\n writer.writeEndElement();\n }\n // //Serialize 'gridAfter' element\n var gridAfter = rowFormat.gridAfter;\n if (gridAfter > 0) {\n writer.writeStartElement(undefined, 'gridAfter', this.wNamespace);\n writer.writeAttributeString('w', 'val', this.wNamespace, gridAfter.toString());\n writer.writeEndElement();\n }\n // //Serialize 'wBefore' element \n if (gridBefore > 0) {\n writer.writeStartElement(undefined, 'wBefore', this.wNamespace);\n switch (rowFormat.gridBeforeWidthType) {\n case 'Percent':\n var width = this.roundToTwoDecimal(rowFormat.gridBeforeWidth * this.percentageFactor).toString();\n writer.writeAttributeString('w', 'val', this.wNamespace, width);\n writer.writeAttributeString('w', 'type', this.wNamespace, 'pct');\n break;\n case 'Point':\n var pointWidth = this.roundToTwoDecimal(rowFormat.gridBeforeWidth * this.twipsInOnePoint).toString();\n writer.writeAttributeString('w', 'val', this.wNamespace, pointWidth);\n writer.writeAttributeString('w', 'type', this.wNamespace, 'dxa');\n break;\n }\n writer.writeEndElement();\n }\n //Serialize 'wAfter' element\n if (gridAfter > 0) {\n writer.writeStartElement(undefined, 'wAfter', this.wNamespace);\n switch (rowFormat.gridAfterWidthType) {\n case 'Percent':\n var width = this.roundToTwoDecimal(rowFormat.gridAfterWidth * this.percentageFactor).toString();\n writer.writeAttributeString('w', 'val', this.wNamespace, width);\n writer.writeAttributeString('w', 'type', this.wNamespace, 'pct');\n break;\n case 'Point':\n var pointWidth = this.roundToTwoDecimal(rowFormat.gridAfterWidth * this.twipsInOnePoint).toString();\n writer.writeAttributeString('w', 'val', this.wNamespace, pointWidth);\n writer.writeAttributeString('w', 'type', this.wNamespace, 'dxa');\n break;\n }\n writer.writeEndElement();\n }\n //Serialize 'cantSplit' element \n if (!rowFormat.allowBreakAcrossPages) {\n writer.writeStartElement(undefined, 'cantSplit', this.wNamespace);\n writer.writeEndElement();\n }\n // //Serialize 'tblHeader' element \n if (rowFormat.isHeader) {\n writer.writeStartElement(undefined, 'tblHeader', this.wNamespace);\n writer.writeEndElement();\n }\n writer.writeEndElement();\n };\n // serialize the table cells\n WordExport.prototype.serializeCells = function (writer, cells) {\n for (var i = 0; i < cells.length; i++) {\n this.serializeCell(writer, cells[i]);\n }\n };\n // Serialize the table cell\n WordExport.prototype.serializeCell = function (writer, cell) {\n var owner = this.blockOwner;\n this.blockOwner = cell;\n writer.writeStartElement(undefined, 'tc', this.wNamespace);\n this.serializeCellFormat(writer, cell.cellFormat);\n if (cell.blocks.length > 0) {\n var itemIndex = 0;\n var item = undefined;\n while (itemIndex < cell.blocks.length) {\n item = cell.blocks[itemIndex];\n this.serializeBodyItem(writer, item, false);\n itemIndex += 1;\n }\n }\n else {\n writer.writeStartElement(undefined, 'p', this.wNamespace);\n writer.writeStartElement(undefined, 'pPr', this.wNamespace);\n writer.writeStartElement(undefined, 'pStyle', this.wNamespace);\n writer.writeAttributeString('w', 'val', this.wNamespace, 'Normal');\n writer.writeEndElement(); //end of pStyle\n writer.writeEndElement(); //end of pPr\n writer.writeEndElement(); //end of P\n }\n writer.writeEndElement(); //end of table cell 'tc' \n this.blockOwner = owner;\n };\n // Serialize the cell formatting\n WordExport.prototype.serializeCellFormat = function (writer, cellFormat) {\n var cell = this.blockOwner;\n //Get the table fomat\n var tf = this.table.tableFormat;\n //Get the row format\n var rf = this.row.rowFormat;\n writer.writeStartElement(undefined, 'tcPr', this.wNamespace);\n //w:cnfStyle - Table Cell Conditional Formatting\n // SerializeCnfStyleElement(cell);\n //w:tcW - Preferred Table Cell Width\n this.serializeCellWidth(writer, cell);\n //w:hMerge - Horizontally Merged Cell and w:vMerge - Vertically Merged Cell\n this.serializeCellMerge(writer, cellFormat);\n //w:gridSpan - Grid Columns Spanned by Current Table Cell\n this.serializeGridSpan(writer, cell);\n //w:tcBorders - Table Cell Borders\n writer.writeStartElement(undefined, 'tcBorders', this.wNamespace);\n this.serializeBorders(writer, cellFormat.borders, 8);\n writer.writeEndElement();\n //w:shd - Table Cell Shading\n this.serializeShading(writer, cell.cellFormat.shading);\n // //w:noWrap - Don't Wrap Cell Content\n // if (cellFormat.HasValue(CellFormat.TextWrapKey)) {\n // m_writer.WriteStartElement('noWrap', W_namespace);\n // if (cellFormat.TextWrap)\n // m_writer.WriteAttributeString('w', 'val', W_namespace, 'false');\n // m_writer.WriteEndElement();\n // }\n // //w:tcMar - Single Table Cell Margins\n // if (!cellFormat.SamePaddingsAsTable) {\n // m_writer.WriteStartElement('tcMar', W_namespace);\n // SerializePaddings(cellFormat.Paddings);\n // m_writer.WriteEndElement();\n // }\n //w:textDirection - Table Cell Text Flow Direction\n this.serializeTableCellDirection(writer, cellFormat);\n // //w:tcFitText - Fit Text Within Cell\n // if (cellFormat.FitText) {\n // m_writer.WriteStartElement('tcFitText', W_namespace);\n // m_writer.WriteEndElement();\n // }\n // //w:hideMark \n // if (cellFormat.HideMark) {\n // m_writer.WriteStartElement('hideMark', W_namespace);\n // m_writer.WriteEndElement();\n // }\n //w:vAlign - Table Cell Vertical Alignment\n // if (cellFormat.HasValue(CellFormat.VrAlignmentKey))\n this.serializeCellVerticalAlign(writer, cellFormat.verticalAlignment);\n // //w:hideMark - Ignore End Of Cell Marker In Row Height Calculation\n // SerializeDocxProps(tempDocxProps, 'hideMark');\n // //w:cellIns - Table Cell Insertion\n // SerializeDocxProps(tempDocxProps, 'cellIns');\n // //w:cellDel - Table Cell Deletion\n // SerializeDocxProps(tempDocxProps, 'cellDel');\n // //w:cellMerge - Vertically Merged/Split Table Cells\n // SerializeDocxProps(tempDocxProps, 'cellMerge');\n // if (cellFormat.OldPropertiesHash.length > 0 && !m_isAlternativeCellFormat) {\n // m_isAlternativeCellFormat = true;\n // SerializeTrackChangeProps('tcPrChange', cellFormat.FormatChangeAuthorName, cellFormat.FormatChangeDateTime);\n // Dictionary < int, object > oldPropertyHash = new Dictionary(cellFormat.OldPropertiesHash);\n // Dictionary < int, object > propertyHash = new Dictionary(cellFormat.PropertiesHash);\n // cellFormat.PropertiesHash.Clear();\n // cellFormat.OldPropertiesHash.Clear();\n // foreach(KeyValuePair < int, object > keyValue in oldPropertyHash)\n // cellFormat.PropertiesHash[keyValue.Key] = keyValue.Value;\n // SerializeCellFormat(cellFormat);\n // cellFormat.PropertiesHash.Clear();\n // foreach(KeyValuePair < int, object > keyValue in propertyHash)\n // cellFormat.PropertiesHash[keyValue.Key] = keyValue.Value;\n // foreach(KeyValuePair < int, object > keyValue in oldPropertyHash)\n // cellFormat.OldPropertiesHash[keyValue.Key] = keyValue.Value;\n // m_writer.WriteEndElement();\n // m_isAlternativeCellFormat = false;\n // }\n writer.writeEndElement();\n };\n // Serialize the cell width\n WordExport.prototype.serializeCellWidth = function (writer, cell) {\n var cf = cell.cellFormat;\n writer.writeStartElement(undefined, 'tcW', this.wNamespace);\n if (cf.preferredWidthType === 'Percent') {\n writer.writeAttributeString(undefined, 'type', this.wNamespace, 'pct');\n // tslint:disable-next-line:max-line-length\n writer.writeAttributeString(undefined, 'w', this.wNamespace, this.roundToTwoDecimal(cf.preferredWidth * this.percentageFactor).toString());\n }\n else if (cf.preferredWidthType === 'Point') {\n // tslint:disable-next-line:max-line-length\n writer.writeAttributeString(undefined, 'w', this.wNamespace, this.roundToTwoDecimal(cf.preferredWidth * this.twipsInOnePoint).toString());\n writer.writeAttributeString(undefined, 'type', this.wNamespace, 'dxa');\n }\n else {\n writer.writeAttributeString(undefined, 'type', this.wNamespace, 'auto');\n writer.writeAttributeString(undefined, 'w', this.wNamespace, '0');\n }\n writer.writeEndElement();\n };\n // Serialize cell merge\n WordExport.prototype.serializeCellMerge = function (writer, cellFormat) {\n var cell = this.blockOwner;\n var isserialized = false;\n var collKey;\n var currentIndex = cell.columnIndex;\n var cellIndex = this.row.cells.indexOf(cell);\n var prevIndex = cellIndex > 0 ? this.row.cells[cellIndex - 1].columnIndex : cell.columnIndex;\n if (cell.columnIndex === cellIndex) {\n collKey = cell.columnIndex;\n isserialized = true;\n }\n else {\n isserialized = false;\n }\n if (!isserialized) {\n if (cellIndex === 0) {\n currentIndex = cell.columnIndex;\n prevIndex = -1;\n }\n for (var i = prevIndex; i < currentIndex; i++) {\n collKey = prevIndex + 1;\n prevIndex += 1;\n if (this.mVerticalMerge.containsKey(collKey)) {\n this.createMerge(writer, collKey, cell);\n }\n }\n }\n if (cellFormat.rowSpan > 1) {\n writer.writeStartElement(undefined, 'vMerge', this.wNamespace);\n this.mVerticalMerge.add(collKey, cellFormat.rowSpan - 1);\n if (cellFormat.columnSpan > 1) {\n this.mGridSpans.add(collKey, cellFormat.columnSpan);\n }\n writer.writeAttributeString('w', 'val', this.wNamespace, 'restart');\n writer.writeEndElement();\n }\n else if (this.mVerticalMerge.containsKey(collKey) && isserialized) {\n this.createMerge(writer, collKey, cell);\n }\n else if (this.mVerticalMerge.containsKey(cellIndex + 1) && isserialized && cell.nextNode === undefined) {\n collKey = cell.columnIndex + 1;\n writer.writeEndElement();\n writer.writeStartElement('w', 'p', this.wNamespace);\n writer.writeEndElement();\n writer.writeEndElement();\n writer.writeStartElement(undefined, 'tc', this.wNamespace);\n writer.writeStartElement(undefined, 'tcPr', this.wNamespace);\n this.serializeColumnSpan(collKey, writer);\n writer.writeStartElement(undefined, 'vMerge', this.wNamespace);\n writer.writeAttributeString('w', 'val', this.wNamespace, 'continue');\n writer.writeEndElement();\n this.checkMergeCell(collKey);\n }\n };\n WordExport.prototype.createMerge = function (writer, collKey, cell) {\n this.serializeColumnSpan(collKey, writer);\n writer.writeStartElement(undefined, 'vMerge', this.wNamespace);\n writer.writeAttributeString('w', 'val', this.wNamespace, 'continue');\n writer.writeEndElement();\n writer.writeEndElement(); //end tcPr\n writer.writeStartElement('w', 'p', this.wNamespace);\n writer.writeEndElement();\n writer.writeEndElement(); //end tc\n writer.writeStartElement(undefined, 'tc', this.wNamespace);\n writer.writeStartElement(undefined, 'tcPr', this.wNamespace);\n this.serializeCellWidth(writer, cell);\n this.checkMergeCell(collKey);\n };\n WordExport.prototype.serializeColumnSpan = function (collKey, writer) {\n if (this.mGridSpans.keys.length > 0 && this.mGridSpans.containsKey(collKey)) {\n writer.writeStartElement(undefined, 'gridSpan', this.wNamespace);\n writer.writeAttributeString('w', 'val', this.wNamespace, this.mGridSpans.get(collKey).toString());\n writer.writeEndElement();\n }\n };\n WordExport.prototype.checkMergeCell = function (collKey) {\n if ((this.mVerticalMerge.get(collKey) - 1) === 0) {\n this.mVerticalMerge.remove(collKey);\n if (this.mGridSpans.keys.length > 0 && this.mGridSpans.containsKey(collKey)) {\n this.mGridSpans.remove(collKey);\n }\n }\n else {\n this.mVerticalMerge.set(collKey, this.mVerticalMerge.get(collKey) - 1);\n }\n };\n // Serialize the grid span element of cell.\n WordExport.prototype.serializeGridSpan = function (writer, cell) {\n // int gridSpan = cell.cellFormat.GridSpan;\n if (cell.cellFormat.columnSpan > 1) {\n var num = cell.cellFormat.columnSpan;\n writer.writeStartElement(undefined, 'gridSpan', this.wNamespace);\n writer.writeAttributeString('w', 'val', this.wNamespace, num.toString());\n writer.writeEndElement();\n }\n };\n // Serialize the table cell direction\n WordExport.prototype.serializeTableCellDirection = function (writer, cellFormat) {\n // if (cellFormat..textDirection !== TextDirection.Horizontal)\n // {\n // m_writer.WriteStartElement('textDirection', W_namespace);\n // switch (cellFormat.TextDirection)\n // {\n // case TextDirection.Horizontal:\n // m_writer.WriteAttributeString('w', 'val', W_namespace, 'lrTb');\n // break;\n // case TextDirection.VerticalBottomToTop:\n // m_writer.WriteAttributeString('w', 'val', W_namespace, 'btLr');\n // break;\n // case TextDirection.VerticalTopToBottom:\n // m_writer.WriteAttributeString('w', 'val', W_namespace, 'tbRl');\n // break;\n // case TextDirection.HorizontalFarEast:\n // m_writer.WriteAttributeString('w', 'val', W_namespace, 'lrTbV');\n // break;\n // case TextDirection.Vertical:\n // m_writer.WriteAttributeString('w', 'val', W_namespace, 'tbLrV');\n // break;\n // case TextDirection.VerticalFarEast:\n // m_writer.WriteAttributeString('w', 'val', W_namespace, 'tbRlV');\n // break;\n // }\n // m_writer.WriteEndElement();\n // }\n };\n // Serialize the cell vertical alignment\n WordExport.prototype.serializeCellVerticalAlign = function (writer, alignment) {\n writer.writeStartElement(undefined, 'vAlign', this.wNamespace);\n switch (alignment) {\n case 'Top':\n writer.writeAttributeString('w', 'val', this.wNamespace, 'top');\n break;\n case 'Center':\n writer.writeAttributeString('w', 'val', this.wNamespace, 'center');\n break;\n default:\n writer.writeAttributeString('w', 'val', this.wNamespace, 'bottom');\n break;\n }\n writer.writeEndElement();\n };\n // Serialize the table grid columns.\n WordExport.prototype.serializeGridColumns = function (writer, grid) {\n for (var i = 1, count = grid.length; i < count; i++) {\n var gridValue = Math.round(grid[i] * 20);\n writer.writeStartElement(undefined, 'gridCol', this.wNamespace);\n writer.writeAttributeString(undefined, 'w', this.wNamespace, gridValue.toString());\n writer.writeEndElement();\n }\n };\n // Serialize the row formattings.\n // Table parameter is passed for serializing table format and undefined for serializing row format.\n WordExport.prototype.serializeTableFormat = function (writer, format, table) {\n // if (!isNullOrUndefined(table))\n // {\n // List tempDocxProps = new List();\n // for (int i = 0, cnt = table.DocxTableFormat.NodeArray.length; i < cnt; i++)\n // tempDocxProps.Add(table.DocxTableFormat.NodeArray[i]);\n writer.writeStartElement(undefined, 'tblPr', this.wNamespace);\n // SerializeTableStlye(format);\n // if (format.WrapTextAround &&!((table.OwnerTextBody.Owner is WTextBox) || \n //(table.OwnerTextBody.Owner is WComment) || (table.OwnerTextBody.Owner is WFootnote)))\n // {\n // SerializeTablePositioning(format.Positioning);\n // if (!format.Positioning.AllowOverlap)\n // {\n // m_writer.WriteStartElement('tblOverlap', W_namespace);\n // m_writer.WriteAttributeString('val', W_namespace, 'never');\n // m_writer.WriteEndElement();\n // }\n // }\n // if (format.Bidi)\n // {\n // m_writer.WriteStartElement('bidiVisual', W_namespace);\n // m_writer.WriteEndElement();\n // }\n // SerializeDocxProps(tempDocxProps, 'tblStyleRowBandSize');\n // SerializeDocxProps(tempDocxProps, 'tblStyleColBandSize');\n this.serializeTableWidth(writer, table);\n this.serializeTableAlignment(writer, table.tableFormat);\n this.serializeCellSpacing(writer, table.tableFormat);\n this.serializeTableIndentation(writer, table.tableFormat);\n this.serializeTableBorders(writer, table.tableFormat);\n this.serializeShading(writer, table.tableFormat.shading);\n this.serializeTblLayout(writer, table.tableFormat);\n // this.serializeTableCellMargin(writer, table.tableFormat);\n // SerializeTableLook(table);\n // if (!isNullOrUndefined(table.Title))\n // SerializeTableTitle(table);\n // if (!isNullOrUndefined(table.Description))\n // SerializeTableDescription(table);\n // }\n // else\n // {\n // SerializeCellSpacing(format);\n // SerializeTableIndentation(format);\n // SerializeTableBorders(format);\n // SerializeTableShading(format);\n // SerializeTblLayout(format);\n // SerializeTableCellMargin(format);\n // }\n // if (!isNullOrUndefined(format.OwnerBase) && format.OwnerBase is WTable\n // && format.OldPropertiesHash.length > 0 && !m_isAlternativeTableFormat)\n // {\n // m_isAlternativeTableFormat = true;\n // SerializeTrackChangeProps('tblPrChange', format.FormatChangeAuthorName, format.FormatChangeDateTime);\n // SerializeTableTrackChanges(format, format.OwnerBase as WTable);\n // m_writer.WriteEndElement();\n // m_isAlternativeTableFormat = false;\n // }\n // if (!isNullOrUndefined(format.OwnerRow) && format.OldPropertiesHash.length > 0)\n // {\n // SerializeTrackChangeProps('tblPrExChange', format.FormatChangeAuthorName, format.FormatChangeDateTime);\n // SerializeTableTrackChanges(format, undefined);\n // m_writer.WriteEndElement();\n // }\n // SerializeTblTrackChanges(format);\n if (!isNullOrUndefined(table)) {\n writer.writeEndElement(); //end of tblPr\n }\n };\n // Serialize the table borders\n WordExport.prototype.serializeShading = function (writer, format) {\n // if (format.textureStyle !== 'TextureNone') {\n writer.writeStartElement(undefined, 'shd', this.wNamespace);\n writer.writeAttributeString(undefined, 'fill', this.wNamespace, this.getColor(format.backgroundColor));\n if (format.foregroundColor === 'empty') {\n writer.writeAttributeString(undefined, 'color', this.wNamespace, 'auto');\n }\n else {\n writer.writeAttributeString(undefined, 'color', this.wNamespace, this.getColor(format.foregroundColor));\n }\n writer.writeAttributeString('w', 'val', this.wNamespace, this.getTextureStyle(format.textureStyle));\n writer.writeEndElement();\n // }\n };\n WordExport.prototype.getTextureStyle = function (textureStyle) {\n switch (textureStyle) {\n case 'Texture5Percent':\n case 'Texture2Pt5Percent':\n case 'Texture7Pt5Percent':\n return 'pct5';\n case 'Texture10Percent':\n return 'pct10';\n case 'Texture12Pt5Percent':\n return 'pct12';\n case 'Texture15Percent':\n case 'Texture17Pt5Percent':\n return 'pct15';\n case 'Texture20Percent':\n case 'Texture22Pt5Percent':\n return 'pct20';\n case 'Texture25Percent':\n case 'Texture27Pt5Percent':\n return 'pct25';\n case 'Texture30Percent':\n case 'Texture32Pt5Percent':\n return 'pct30';\n case 'Texture35Percent':\n return 'pct35';\n case 'Texture37Pt5Percent':\n return 'pct37';\n case 'Texture40Percent':\n case 'Texture42Pt5Percent':\n return 'pct40';\n case 'Texture45Percent':\n case 'Texture47Pt5Percent':\n return 'pct45';\n case 'Texture50Percent':\n case 'Texture52Pt5Percent':\n return 'pct50';\n case 'Texture55Percent':\n case 'Texture57Pt5Percent':\n return 'pct55';\n case 'Texture60Percent':\n return 'pct60';\n case 'Texture62Pt5Percent':\n return 'pct62';\n case 'Texture65Percent':\n case 'Texture67Pt5Percent':\n return 'pct65';\n case 'Texture70Percent':\n case 'Texture72Pt5Percent':\n return 'pct70';\n case 'Texture75Percent':\n case 'Texture77Pt5Percent':\n return 'pct75';\n case 'Texture80Percent':\n case 'Texture82Pt5Percent':\n return 'pct80';\n case 'Texture85Percent':\n return 'pct85';\n case 'Texture87Pt5Percent':\n return 'pct87';\n case 'Texture90Percent':\n case 'Texture92Pt5Percent':\n return 'pct90';\n case 'Texture95Percent':\n case 'Texture97Pt5Percent':\n return 'pct95';\n case 'TextureCross':\n return 'thinHorzCross';\n case 'TextureDarkCross':\n return 'horzCross';\n case 'TextureDarkDiagonalCross':\n return 'diagCross';\n case 'TextureDarkDiagonalDown':\n return 'reverseDiagStripe';\n case 'TextureDarkDiagonalUp':\n return 'diagStripe';\n case 'TextureDarkHorizontal':\n return 'horzStripe';\n case 'TextureDarkVertical':\n return 'vertStripe';\n case 'TextureDiagonalCross':\n return 'thinDiagCross';\n case 'TextureDiagonalDown':\n return 'thinReverseDiagStripe';\n case 'TextureDiagonalUp':\n return 'thinDiagStripe';\n case 'TextureHorizontal':\n return 'thinHorzStripe';\n case 'TextureSolid':\n return 'solid';\n case 'TextureVertical':\n return 'thinVertStripe';\n default:\n return 'clear';\n }\n };\n // Serialize the table borders\n WordExport.prototype.serializeTableBorders = function (writer, format) {\n var borders = format.borders;\n // if (IsNoneBorder(borders))\n // return;\n writer.writeStartElement(undefined, 'tblBorders', this.wNamespace);\n this.serializeBorders(writer, format.borders, 8);\n writer.writeEndElement();\n };\n // Serialize the borders.\n WordExport.prototype.serializeBorders = function (writer, borders, multipler) {\n this.serializeBorder(writer, borders.top, 'top', multipler);\n this.serializeBorder(writer, borders.left, 'left', multipler);\n this.serializeBorder(writer, borders.bottom, 'bottom', multipler);\n this.serializeBorder(writer, borders.right, 'right', multipler);\n this.serializeBorder(writer, borders.horizontal, 'insideH', multipler);\n this.serializeBorder(writer, borders.vertical, 'insideV', multipler);\n this.serializeBorder(writer, borders.diagonalDown, 'tl2br', multipler);\n this.serializeBorder(writer, borders.diagonalUp, 'tr2bl', multipler);\n };\n // Serialize the table layout element\n WordExport.prototype.serializeTblLayout = function (writer, format) {\n //TODO: AUTO size property is not mapped yet\n // if (!format.IsAutoResized)\n // {\n // writer.writeStartElement(undefined, 'tblLayout', this.wNamespace);\n // writer.writeAttributeString(undefined, 'type', this.wNamespace, 'fixed');\n // writer.writeEndElement();\n // }\n };\n // Serializes the Border\n WordExport.prototype.serializeBorder = function (writer, border, tagName, multiplier) {\n var borderStyle = border.lineStyle;\n var sz = (border.lineWidth * multiplier);\n var space = border.space;\n if (borderStyle === 'Cleared') {\n writer.writeStartElement(undefined, tagName, this.wNamespace);\n writer.writeAttributeString('w', 'val', this.wNamespace, 'nil');\n writer.writeEndElement();\n return;\n }\n else if ((borderStyle === 'None' && !border.hasNoneStyle) || sz <= 0) {\n return;\n }\n writer.writeStartElement(undefined, tagName, this.wNamespace);\n writer.writeAttributeString('w', 'val', this.wNamespace, this.getBorderStyle(borderStyle));\n // if (border.color === '#000000')\n // {\n // writer.writeAttributeString(undefined, 'color', this.wNamespace, 'auto');\n // }\n // else\n // {\n writer.writeAttributeString(undefined, 'color', this.wNamespace, this.getColor(border.color));\n // }\n writer.writeAttributeString(undefined, 'sz', this.wNamespace, this.roundToTwoDecimal(sz).toString());\n writer.writeAttributeString(undefined, 'space', this.wNamespace, space.toString());\n if (border.shadow) {\n writer.writeAttributeString(undefined, 'shadow', this.wNamespace, 'on');\n }\n writer.writeEndElement();\n };\n // Get the border style as string\n WordExport.prototype.getBorderStyle = function (borderStyle) {\n switch (borderStyle) {\n case 'Cleared':\n return 'cleared';\n case 'DashSmallGap':\n return 'dashSmallGap';\n case 'Triple':\n return 'triple';\n case 'Dot':\n return 'dotted';\n case 'DashDot':\n return 'dotDash';\n case 'DashLargeGap':\n return 'dashed';\n case 'DashDotDot':\n return 'dotDotDash';\n case 'Double':\n return 'double';\n case 'ThinThickSmallGap':\n return 'thinThickSmallGap';\n case 'ThickThinSmallGap':\n return 'thickThinSmallGap';\n case 'ThinThickThinSmallGap':\n return 'thinThickThinSmallGap';\n case 'ThickThinMediumGap':\n return 'thickThinMediumGap';\n case 'ThinThickMediumGap':\n return 'thinThickMediumGap';\n case 'ThinThickThinMediumGap':\n return 'thinThickThinMediumGap';\n case 'ThickThinLargeGap':\n return 'thickThinLargeGap';\n case 'ThinThickLargeGap':\n return 'thinThickLargeGap';\n case 'ThinThickThinLargeGap':\n return 'thinThickThinLargeGap';\n case 'Thick':\n return 'thick';\n case 'SingleWavy':\n return 'wave';\n case 'DoubleWavy':\n return 'doubleWave';\n case 'DashDotStroked':\n return 'dashDotStroked';\n case 'Engrave3D':\n return 'threeDEngrave';\n case 'Emboss3D':\n return 'threeDEmboss';\n case 'Outset':\n return 'outset';\n case 'Inset':\n return 'inset';\n // case 'None':\n // return 'none';\n default:\n return 'single';\n }\n };\n // Serialize the table indentation.\n WordExport.prototype.serializeTableIndentation = function (writer, format) {\n writer.writeStartElement(undefined, 'tblInd', this.wNamespace);\n var tableIndent = Math.round(format.leftIndent * this.twipsInOnePoint);\n writer.writeAttributeString(undefined, 'w', this.wNamespace, tableIndent.toString());\n writer.writeAttributeString(undefined, 'type', this.wNamespace, 'dxa');\n writer.writeEndElement();\n };\n // Serialize the cell spacing.\n WordExport.prototype.serializeCellSpacing = function (writer, format) {\n if (!isNullOrUndefined(format.cellSpacing) && format.cellSpacing >= 0) {\n writer.writeStartElement(undefined, 'tblCellSpacing', this.wNamespace);\n // tslint:disable-next-line:max-line-length\n writer.writeAttributeString(undefined, 'w', this.wNamespace, this.roundToTwoDecimal(format.cellSpacing * this.twentiethOfPoint).toString());\n writer.writeAttributeString(undefined, 'type', this.wNamespace, 'dxa');\n writer.writeEndElement();\n }\n };\n // Serialize the table width\n WordExport.prototype.serializeTableWidth = function (writer, table) {\n writer.writeStartElement(undefined, 'tblW', this.wNamespace);\n if (table.tableFormat.preferredWidthType === 'Percent') {\n // tslint:disable-next-line:max-line-length\n writer.writeAttributeString(undefined, 'w', this.wNamespace, (table.tableFormat.preferredWidth * this.percentageFactor).toString());\n writer.writeAttributeString(undefined, 'type', this.wNamespace, 'pct');\n }\n else if (table.tableFormat.preferredWidthType === 'Point') {\n var tableWidth = Math.round(table.tableFormat.preferredWidth * this.twipsInOnePoint);\n writer.writeAttributeString(undefined, 'w', this.wNamespace, tableWidth.toString());\n writer.writeAttributeString(undefined, 'type', this.wNamespace, 'dxa');\n }\n else {\n writer.writeAttributeString(undefined, 'w', this.wNamespace, '0');\n writer.writeAttributeString(undefined, 'type', this.wNamespace, 'auto');\n }\n writer.writeEndElement();\n };\n // Serialize the table alignment\n WordExport.prototype.serializeTableAlignment = function (writer, format) {\n writer.writeStartElement(undefined, 'jc', this.wNamespace);\n switch (format.tableAlignment) {\n case 'Right':\n writer.writeAttributeString('w', 'val', this.wNamespace, 'right');\n break;\n case 'Center':\n writer.writeAttributeString('w', 'val', this.wNamespace, 'center');\n break;\n default:\n writer.writeAttributeString('w', 'val', this.wNamespace, 'left');\n break;\n }\n writer.writeEndElement();\n };\n // Serialize the field\n WordExport.prototype.serializeFieldCharacter = function (writer, field) {\n writer.writeStartElement(undefined, 'r', this.wNamespace);\n this.serializeCharacterFormat(writer, field.characterFormat);\n writer.writeStartElement(undefined, 'fldChar', this.wNamespace);\n var type = field.fieldType === 0 ? 'begin'\n : field.fieldType === 1 ? 'end' : 'separate';\n writer.writeAttributeString(undefined, 'fldCharType', this.wNamespace, type);\n writer.writeEndElement();\n writer.writeEndElement();\n };\n // Serialize the text range.\n WordExport.prototype.serializeTextRange = function (writer, span, previousNode) {\n writer.writeStartElement('w', 'r', this.wNamespace);\n this.serializeCharacterFormat(writer, span.characterFormat);\n if (span.text === '\\t') {\n writer.writeElementString(undefined, 'tab', this.wNamespace, undefined);\n }\n else if (span.text === '\\v') {\n writer.writeElementString(undefined, 'br', this.wNamespace, undefined);\n }\n else {\n var isField = !isNullOrUndefined(previousNode)\n && previousNode.hasOwnProperty('fieldType') && previousNode.fieldType !== 2;\n writer.writeStartElement(undefined, isField ? 'instrText' : 't', this.wNamespace);\n writer.writeAttributeString('xml', 'space', this.xmlNamespace, 'preserve');\n writer.writeString(span.text);\n writer.writeEndElement();\n }\n writer.writeEndElement();\n };\n // Serializes the paragraph format\n WordExport.prototype.serializeParagraphFormat = function (writer, paragraphFormat, paragraph) {\n if (!isNullOrUndefined(paragraphFormat.styleName)) {\n writer.writeStartElement(undefined, 'pStyle', this.wNamespace);\n writer.writeAttributeString('w', 'val', this.wNamespace, paragraphFormat.styleName);\n writer.writeEndElement(); //end of pStyle\n }\n if (!isNullOrUndefined(paragraph)) {\n this.serializeListFormat(writer, paragraph.paragraphFormat.listFormat);\n }\n else {\n this.serializeListFormat(writer, paragraphFormat.listFormat);\n }\n this.serializeParagraphSpacing(writer, paragraphFormat);\n this.serializeIndentation(writer, paragraphFormat);\n this.serializeParagraphAlignment(writer, paragraphFormat.textAlignment);\n if (!isNullOrUndefined(paragraphFormat.tabs) && paragraphFormat.tabs.length > 0) {\n this.serializeTabs(writer, paragraphFormat.tabs);\n }\n };\n // Serialize Tabs\n WordExport.prototype.serializeTabs = function (writer, tabStops) {\n writer.writeStartElement('w', 'tabs', this.wNamespace);\n for (var i = 0; i < tabStops.length; i++) {\n this.serializeTab(writer, tabStops[i]);\n }\n writer.writeEndElement();\n };\n WordExport.prototype.serializeTab = function (writer, tabStop) {\n var position = 0;\n writer.writeStartElement('w', 'tab', this.wNamespace);\n if (tabStop.position === 0 && tabStop.deletePosition !== 0) {\n position = tabStop.deletePosition * this.twentiethOfPoint;\n writer.writeAttributeString('w', 'val', this.wNamespace, 'clear');\n }\n else {\n position = tabStop.position * this.twentiethOfPoint;\n writer.writeAttributeString('w', 'val', this.wNamespace, this.getTabJustification(tabStop.tabJustification));\n }\n if (!isNullOrUndefined(tabStop.tabLeader) && (tabStop.tabLeader !== 'None')) {\n writer.writeAttributeString('w', 'leader', this.wNamespace, this.getTabLeader(tabStop.tabLeader));\n }\n writer.writeAttributeString('w', 'pos', this.wNamespace, position.toString() + '');\n writer.writeEndElement();\n };\n WordExport.prototype.getTabLeader = function (tabLeader) {\n switch (tabLeader) {\n case 'Dot':\n return 'dot';\n case 'Hyphen':\n return 'hyphen';\n case 'Underscore':\n return 'underscore';\n default:\n return 'none';\n }\n };\n WordExport.prototype.getTabJustification = function (tabJustification) {\n switch (tabJustification) {\n case 'Bar':\n return 'bar';\n case 'Center':\n return 'center';\n case 'Decimal':\n return 'decimal';\n case 'Left':\n return 'left';\n case 'List':\n return 'num';\n case 'Right':\n return 'right';\n default:\n return 'clear';\n }\n };\n // // Seraializes the pargraph list format\n // private serializeListParagraph(writer: XmlWriter, paragraph: any): void {\n // if (!isNullOrUndefined(paragraph.paragraphFormat.listFormat)) {\n // this.serializeListFormat(writer, paragraph.paragraphFormat.listFormat);\n // }\n // }\n // Serialize the list format\n WordExport.prototype.serializeListFormat = function (writer, lf) {\n // let pStyleName = undefined;\n // if (lf.CurrentListStyle.IsBuiltInStyle && !isNullOrUndefined(lf.OwnerParagraph))\n // {\n // pStyleName = lf.OwnerParagraph.StyleName;\n // }\n // int listId = GetListId(lf);\n // if (!isNullOrUndefined(pStyleName) && string.IsNullOrEmpty(lf.LFOStyleName)) \n // {\n // WordDocument doc = lf.OwnerParagraph.Document;\n // WParagraphStyle style = doc.Styles.FindByName(pStyleName, StyleType.ParagraphStyle) as WParagraphStyle;\n // if (style.ListIndex === -1)\n // {\n // ListStyle lstStyle = lf.OwnerParagraph.Document.ListStyles.FindByName(lf.CustomStyleName);\n // style.ListIndex = listId;\n // if (lstStyle.Levels.length > 1)\n // {\n // style.ListLevel = lf.ListLevelNumber;\n // }\n // pStyleName = pStyleName.Replace(' ', '');\n // lstStyle.Levels[lf.ListLevelNumber].ParaStyleName = pStyleName;\n // }\n // }\n // else\n // {\n // if (!isNullOrUndefined(lf.listId) && !isNullOrUndefined(lf.listLevelNumber)) {\n // this.serializeNumPr(writer, lf.listId, lf.listLevelNumber);\n // }\n // }\n if (!isNullOrUndefined(lf.listId) || !isNullOrUndefined(lf.listLevelNumber)) {\n writer.writeStartElement(undefined, 'numPr', this.wNamespace);\n if (!isNullOrUndefined(lf.listLevelNumber) && lf.listLevelNumber !== -1) {\n writer.writeStartElement(undefined, 'ilvl', this.wNamespace);\n writer.writeAttributeString('w', 'val', this.wNamespace, lf.listLevelNumber.toString());\n writer.writeEndElement();\n }\n if (!isNullOrUndefined(lf.listId) && lf.listId !== -1) {\n writer.writeStartElement(undefined, 'numId', this.wNamespace);\n writer.writeAttributeString('w', 'val', this.wNamespace, (lf.listId + 1).toString());\n writer.writeEndElement();\n }\n writer.writeEndElement();\n }\n };\n // // Serializes the numbering properties to the paragraph\n // private serializeNumPr(writer: XmlWriter, listId: number, listLevel: number): void {\n // writer.writeStartElement(undefined, 'numPr', this.wNamespace);\n // if (listLevel !== -1) {\n // writer.writeStartElement(undefined, 'ilvl', this.wNamespace);\n // writer.writeAttributeString('w', 'val', this.wNamespace, listLevel.toString());\n // writer.writeEndElement();\n // }\n // if (listId !== -1) {\n // writer.writeStartElement(undefined, 'numId', this.wNamespace);\n // writer.writeAttributeString('w', 'val', this.wNamespace, listId.toString());\n // writer.writeEndElement();\n // }\n // writer.writeEndElement();\n // }\n WordExport.prototype.serializeParagraphAlignment = function (writer, txtAlignment) {\n if (!isNullOrUndefined(txtAlignment)) {\n writer.writeStartElement(undefined, 'jc', this.wNamespace);\n var alignment = void 0;\n switch (txtAlignment) {\n case 'Center':\n alignment = 'center';\n break;\n case 'Right':\n alignment = 'right';\n break;\n case 'Justify':\n alignment = 'both';\n break;\n default:\n alignment = 'left';\n break;\n }\n writer.writeAttributeString('w', 'val', this.wNamespace, alignment);\n writer.writeEndElement();\n }\n };\n // Serializes the paragraph spacings\n WordExport.prototype.serializeParagraphSpacing = function (writer, paragraphFormat) {\n writer.writeStartElement(undefined, 'spacing', this.wNamespace);\n // if (paragraphFormat.HasValue(WParagraphFormat.BeforeLinesKey))\n // {\n // short beforeLines = (short)Math.Round(paragraphFormat.BeforeLines * DLSConstants.HundredthsUnit);\n // writer.WriteAttributeString('beforeLines', this.wNamespace, ToString((float)beforeLines)); \n // }\n // if (paragraphFormat.HasValue(WParagraphFormat.AfterLinesKey))\n // {\n // short afterLines = (short)Math.Round(paragraphFormat.AfterLines * DLSConstants.HundredthsUnit);\n // writer.WriteAttributeString('afterLines', this.wNamespace, ToString((float)afterLines)); \n // }\n // tslint:disable-next-line:max-line-length\n if (!isNullOrUndefined(paragraphFormat.beforeSpacing)) {\n writer.writeAttributeString(undefined, 'before', this.wNamespace, this.roundToTwoDecimal(paragraphFormat.beforeSpacing * this.twentiethOfPoint).toString());\n }\n //TODO:ISSUEFIX(paragraphFormat.beforeSpacing * this.twentiethOfPoint).toString());\n // if (paragraphFormat.HasValue(WParagraphFormat.SpacingBeforeAutoKey))\n // {\n // if (paragraphFormat.SpaceBeforeAuto)\n // {\n // writer.WriteAttributeString('beforeAutospacing', this.wNamespace, '1');\n // }\n // else\n // {\n // writer.WriteAttributeString('beforeAutospacing', this.wNamespace, '0');\n // }\n // }\n if (!isNullOrUndefined(paragraphFormat.afterSpacing)) {\n // tslint:disable-next-line:max-line-length\n writer.writeAttributeString(undefined, 'after', this.wNamespace, this.roundToTwoDecimal(paragraphFormat.afterSpacing * this.twentiethOfPoint).toString());\n }\n //TODO:ISSUEFIX(paragraphFormat.afterSpacing * this.twentiethOfPoint).toString());\n // if (paragraphFormat.HasValue(WParagraphFormat.SpacingAfterAutoKey))\n // {\n // if (paragraphFormat.SpaceAfterAuto)\n // {\n // writer.WriteAttributeString('afterAutospacing', this.wNamespace, '1');\n // }\n // else\n // {\n // writer.WriteAttributeString('afterAutospacing', this.wNamespace, '0');\n // }\n // }\n writer.writeAttributeString(undefined, 'line', this.wNamespace, '240');\n //TODO:ISSUEFIX((paragraphFormat.lineSpacing) * this.twentiethOfPoint).toString());\n switch (paragraphFormat.lineSpacingType) {\n case 'AtLeast':\n writer.writeAttributeString(undefined, 'lineRule', this.wNamespace, 'atLeast');\n break;\n case 'Exactly':\n writer.writeAttributeString(undefined, 'lineRule', this.wNamespace, 'exact');\n break;\n default:\n writer.writeAttributeString(undefined, 'lineRule', this.wNamespace, 'auto');\n break;\n }\n writer.writeEndElement();\n };\n // Serializes the paragraph indentation\n WordExport.prototype.serializeIndentation = function (writer, paragraphFormat) {\n writer.writeStartElement(undefined, 'ind', this.wNamespace);\n if (!isNullOrUndefined(paragraphFormat.leftIndent)) {\n // tslint:disable-next-line:max-line-length\n writer.writeAttributeString(undefined, 'left', this.wNamespace, this.roundToTwoDecimal(paragraphFormat.leftIndent * this.twipsInOnePoint).toString());\n }\n if (!isNullOrUndefined(paragraphFormat.rightIndent)) {\n // tslint:disable-next-line:max-line-length\n writer.writeAttributeString(undefined, 'right', this.wNamespace, this.roundToTwoDecimal(paragraphFormat.rightIndent * this.twipsInOnePoint).toString());\n }\n if (!isNullOrUndefined(paragraphFormat.firstLineIndent)) {\n if (paragraphFormat.firstLineIndent < 0) {\n // tslint:disable-next-line:max-line-length\n writer.writeAttributeString(undefined, 'hanging', this.wNamespace, this.roundToTwoDecimal(-1 * paragraphFormat.firstLineIndent * this.twipsInOnePoint).toString());\n }\n else {\n // tslint:disable-next-line:max-line-length\n writer.writeAttributeString(undefined, 'firstLine', this.wNamespace, this.roundToTwoDecimal(paragraphFormat.firstLineIndent * this.twipsInOnePoint).toString());\n }\n }\n writer.writeEndElement();\n };\n // Serialize the styles (styles.xml)\n WordExport.prototype.serializeStyles = function () {\n var writer = new XmlWriter();\n writer.writeStartElement('w', 'styles', this.wNamespace);\n writer.writeAttributeString('xmlns', 'mc', undefined, this.veNamespace);\n writer.writeAttributeString('xmlns', 'r', undefined, this.rNamespace);\n writer.writeAttributeString('xmlns', 'w', undefined, this.wNamespace);\n writer.writeAttributeString('xmlns', 'w14', undefined, this.w14Namespace);\n writer.writeAttributeString('xmlns', 'w15', undefined, this.w15Namespace);\n writer.writeAttributeString('mc', 'Ignorable', undefined, 'w14 w15');\n //writes the document defaults, latent styles and default styles.\n this.serializeDefaultStyles(writer);\n //writes the document styles\n this.serializeDocumentStyles(writer);\n writer.writeEndElement(); //end of styles tag\n var zipArchiveItem = new ZipArchiveItem(writer.buffer, this.stylePath);\n this.mArchive.addItem(zipArchiveItem); //this.stylePath, styleStream, false, FileAttributes.Archive);\n };\n // Serializes the default styles (document default paragraph and character format)\n WordExport.prototype.serializeDefaultStyles = function (writer) {\n writer.writeStartElement(undefined, 'docDefaults', this.wNamespace);\n //if (HasDefaultCharFormat())\n //{\n writer.writeStartElement(undefined, 'rPrDefault', this.wNamespace);\n // if (!isNullOrUndefined(this.mDocument.characterFormat)) {\n this.serializeCharacterFormat(writer, this.defCharacterFormat);\n writer.writeEndElement(); // end of rPrDefault\n // }\n // else {\n // writer.writeStartElement(undefined, 'rPr', this.wNamespace);\n // writer.writeStartElement(undefined, 'rFonts', this.wNamespace);\n // if (!string.IsNullOrEmpty(m_document.StandardAsciiFont))\n // writer.WriteAttributeString('ascii', this.wNamespace, m_document.StandardAsciiFont);\n // if (!string.IsNullOrEmpty(m_document.StandardFarEastFont))\n // writer.WriteAttributeString('eastAsia', this.wNamespace, m_document.StandardFarEastFont);\n // if (!string.IsNullOrEmpty(m_document.StandardNonFarEastFont))\n // writer.WriteAttributeString('hAnsi', this.wNamespace, m_document.StandardNonFarEastFont);\n // if (!string.IsNullOrEmpty(m_document.StandardBidiFont))\n // writer.WriteAttributeString('cs', this.wNamespace, m_document.StandardBidiFont);\n // writer.WriteEndElement();\n // float fontSize = GetDefFontSize(m_document, WCharacterFormat.FontSizeKey);\n // if (fontSize !== 0f)\n // {\n // writer.WriteStartElement('sz', this.wNamespace);\n // writer.WriteAttributeString('val', this.wNamespace, (fontSize * 2).ToString(CultureInfo.InvariantCulture));\n // writer.WriteEndElement();\n // }\n // fontSize = GetDefFontSize(m_document, WCharacterFormat.FontSizeBidiKey);\n // if (fontSize !== 0f)\n // {\n // writer.WriteStartElement('szCs', this.wNamespace);\n // writer.WriteAttributeString('val', this.wNamespace, (fontSize * 2).ToString(CultureInfo.InvariantCulture));\n // writer.WriteEndElement();\n // }\n // writer.WriteEndElement();\n // }\n // writer.WriteEndElement();\n // //}\n writer.writeStartElement(undefined, 'pPrDefault', this.wNamespace);\n if (!isNullOrUndefined(this.defParagraphFormat)) {\n writer.writeStartElement(undefined, 'pPr', this.wNamespace);\n this.serializeParagraphFormat(writer, this.defParagraphFormat, undefined);\n writer.writeEndElement(); //end of pPr\n }\n writer.writeEndElement(); //end of pPrDefault\n // writer.WriteEndElement();\n // SerializeLatentStyles();\n // //Default styles\n // if (m_document.Styles.length === 0 || isNullOrUndefined(m_document.Styles.FindByName('Normal')))\n // {\n // SerializeDefaultParagraphStyle();\n // }\n // if (!IsDocumentContainsDefaultTableStyle())\n // {\n // SerializeTableNormalStyle();\n // }\n // if (isNullOrUndefined(m_document.Styles.FindByName('No List')) && isNullOrUndefined(m_document.Styles.FindByName('NoList')))\n // SerializeNoListStyle();\n // tslint:disable-next-line:max-line-length\n // if (isNullOrUndefined(m_document.Styles.FindByName('Table Grid')) && isNullOrUndefined(m_document.Styles.FindByName('TableGrid')))\n // {\n // SerializeTableGridStyle();\n // }\n // } \n writer.writeEndElement();\n };\n WordExport.prototype.serializeDocumentStyles = function (writer) {\n for (var i = 0; i < this.mStyles.length; i++) {\n var style = this.mStyles[i];\n writer.writeStartElement(undefined, 'style', this.wNamespace);\n var type = style.type === 'Paragraph' ? 'paragraph' : 'character';\n writer.writeAttributeString('w', 'type', this.wNamespace, type);\n writer.writeAttributeString('w', 'styleId', this.wNamespace, style.name);\n //name\n writer.writeStartElement(undefined, 'name', this.wNamespace);\n writer.writeAttributeString('w', 'val', this.wNamespace, style.name);\n writer.writeEndElement();\n //basedOn\n if (!isNullOrUndefined(style.basedOn)) {\n writer.writeStartElement(undefined, 'basedOn', this.wNamespace);\n writer.writeAttributeString('w', 'val', this.wNamespace, style.basedOn);\n writer.writeEndElement();\n }\n //next\n if (!isNullOrUndefined(style.next)) {\n writer.writeStartElement(undefined, 'next', this.wNamespace);\n writer.writeAttributeString('w', 'val', this.wNamespace, style.next);\n writer.writeEndElement();\n }\n //link\n if (!isNullOrUndefined(style.link)) {\n writer.writeStartElement(undefined, 'link', this.wNamespace);\n writer.writeAttributeString('w', 'val', this.wNamespace, style.link);\n writer.writeEndElement();\n }\n if (style.type === 'Paragraph') {\n writer.writeStartElement(undefined, 'pPr', this.wNamespace);\n this.serializeParagraphFormat(writer, style.paragraphFormat, undefined);\n writer.writeEndElement();\n }\n // let value = (style.characterFormat as WCharacterFormat).newgetCharacterFormat();\n this.serializeCharacterFormat(writer, style.characterFormat);\n writer.writeEndElement(); //end of Style\n }\n };\n // Serializes the Character format\n WordExport.prototype.serializeCharacterFormat = function (writer, characterFormat) {\n writer.writeStartElement(undefined, 'rPr', this.wNamespace);\n if (!isNullOrUndefined(characterFormat.styleName)) {\n writer.writeStartElement(undefined, 'rStyle', this.wNamespace);\n writer.writeAttributeString('w', 'val', this.wNamespace, characterFormat.styleName);\n writer.writeEndElement();\n }\n if (!isNullOrUndefined(characterFormat.fontFamily)) {\n writer.writeStartElement(undefined, 'rFonts', this.wNamespace);\n writer.writeAttributeString(undefined, 'ascii', this.wNamespace, characterFormat.fontFamily);\n writer.writeAttributeString(undefined, 'hAnsi', this.wNamespace, characterFormat.fontFamily);\n writer.writeAttributeString(undefined, 'eastAsia', this.wNamespace, characterFormat.fontFamily);\n writer.writeAttributeString(undefined, 'cs', this.wNamespace, characterFormat.fontFamily);\n writer.writeEndElement(); //end \n }\n if (!isNullOrUndefined(characterFormat.bold)) {\n this.serializeBoolProperty(writer, 'b', characterFormat.bold);\n }\n if (!isNullOrUndefined(characterFormat.italic)) {\n this.serializeBoolProperty(writer, 'i', characterFormat.italic);\n }\n if (!isNullOrUndefined(characterFormat.strikethrough)) {\n switch (characterFormat.strikethrough) {\n case 'SingleStrike':\n this.serializeBoolProperty(writer, 'strike', true);\n break;\n case 'DoubleStrike':\n this.serializeBoolProperty(writer, 'dstrike', true);\n break;\n default:\n this.serializeBoolProperty(writer, 'strike', false);\n this.serializeBoolProperty(writer, 'dstrike', false);\n break;\n }\n }\n if (!isNullOrUndefined(characterFormat.fontColor)) {\n writer.writeStartElement(undefined, 'color', this.wNamespace);\n writer.writeAttributeString('w', 'val', this.wNamespace, this.getColor(characterFormat.fontColor));\n writer.writeEndElement();\n }\n if (!isNullOrUndefined(characterFormat.fontSize)) {\n writer.writeStartElement(undefined, 'sz', this.wNamespace);\n // tslint:disable-next-line:max-line-length\n writer.writeAttributeString('w', 'val', this.wNamespace, this.roundToTwoDecimal(characterFormat.fontSize * 2).toString());\n writer.writeEndElement();\n }\n if (!isNullOrUndefined(characterFormat.highlightColor) && characterFormat.highlightColor !== 'NoColor') {\n writer.writeStartElement(undefined, 'highlight', this.wNamespace);\n writer.writeAttributeString('w', 'val', this.wNamespace, this.getHighlightColor(characterFormat.highlightColor));\n writer.writeEndElement();\n }\n if (!isNullOrUndefined(characterFormat.underline) && characterFormat.underline !== 'None') {\n writer.writeStartElement(undefined, 'u', this.wNamespace);\n writer.writeAttributeString('w', 'val', this.wNamespace, this.getUnderlineStyle(characterFormat.underline));\n writer.writeEndElement();\n }\n if (!isNullOrUndefined(characterFormat.baselineAlignment)) {\n writer.writeStartElement(undefined, 'vertAlign', this.wNamespace);\n switch (characterFormat.baselineAlignment) {\n case 'Subscript':\n writer.writeAttributeString('w', 'val', this.wNamespace, 'subscript');\n break;\n case 'Superscript':\n writer.writeAttributeString('w', 'val', this.wNamespace, 'superscript');\n break;\n default:\n writer.writeAttributeString('w', 'val', this.wNamespace, 'baseline');\n break;\n }\n writer.writeEndElement();\n }\n writer.writeEndElement(); //end of rPrChange\n };\n WordExport.prototype.getColor = function (color) {\n if (color.length > 0) {\n if (color[0] === '#') {\n color = color.substr(1);\n }\n if (color.length > 6) {\n color = color.substr(0, 6);\n }\n }\n return color;\n };\n // Get the underline style as string\n WordExport.prototype.getUnderlineStyle = function (underlineStyle) {\n switch (underlineStyle) {\n case 'DotDotDashHeavy':\n return 'dashDotDotHeavy';\n case 'DotDashHeavy':\n return 'dashDotHeavy';\n case 'DashHeavy':\n return 'dashedHeavy';\n case 'DashLong':\n return 'dashLong';\n case 'DashLongHeavy':\n return 'dashLongHeavy';\n case 'DotDash':\n return 'dotDash';\n case 'DotDotDash':\n return 'dotDotDash';\n case 'Dotted':\n return 'dotted';\n case 'DottedHeavy':\n return 'dottedHeavy';\n case 'Double':\n return 'double';\n case 'Single':\n return 'single';\n case 'Thick':\n return 'thick';\n case 'Wavy':\n return 'wave';\n case 'WavyDouble':\n return 'wavyDouble';\n case 'WavyHeavy':\n return 'wavyHeavy';\n case 'Words':\n return 'words';\n default:\n return 'dash';\n }\n };\n WordExport.prototype.getHighlightColor = function (highlight) {\n switch (highlight) {\n // Highlights the content with bright green (#ff00ff00) color.\n case 'BrightGreen':\n return 'green';\n // Highlights the content with turquoise (#ff00ffff) color.\n case 'Turquoise':\n return 'cyan';\n // Highlights the content with pink (#ffff00ff) color.\n case 'Pink':\n return 'magenta';\n // Highlights the content with blue (#ff0000ff) color.\n case 'Blue':\n return 'blue';\n // Highlights the content with red (#ffff0000) color.\n case 'Red':\n return 'red';\n // Highlights the content with dark blue (#ff000080) color.\n case 'DarkBlue':\n return 'darkBlue';\n // Highlights the content with teal (#ff008080) color.\n case 'Teal':\n return 'darkCyan';\n // Highlights the content with green (#ff008000) color.\n case 'Green':\n return 'darkGreen';\n // Highlights the content with violet (#ff800080) color.\n case 'Violet':\n return 'darkMagenta';\n // Highlights the content with dark red (#ff800000) color.\n case 'DarkRed':\n return 'darkRed';\n // Highlights the content with dark yellow (#ff808000) color.\n case 'DarkYellow':\n return 'darkYellow';\n // Highlights the content with gray 50 (#ff808080) color.\n case 'Gray50':\n return 'darkGray';\n // Highlights the content with gray 25 (#ffc0c0c0) color.\n case 'Gray25':\n return 'lightGray';\n // Highlights the content with black (#ff000000) color.\n case 'Black':\n return 'black';\n // Highlights the content with yellow (#ffffff00) color.\n default:\n return 'yellow';\n }\n };\n /*private toggleFirstCahar(text: string) {\n return text.charAt(0).toLowerCase() + text.slice(1);\n }*/\n // Serializes the bool character format property\n WordExport.prototype.serializeBoolProperty = function (writer, tag, value) {\n writer.writeStartElement(undefined, tag, this.wNamespace);\n if (!value) {\n writer.writeAttributeString(undefined, 'val', this.wNamespace, '0');\n }\n writer.writeEndElement();\n };\n // Serialize the list styles and numberings (numberings.xml)\n WordExport.prototype.serializeNumberings = function () {\n if (this.document.lists.length === 0) {\n return;\n }\n var writer = new XmlWriter();\n writer.writeStartElement('w', 'numbering', this.wNamespace);\n this.writeCommonAttributeStrings(writer);\n // this.serializePictureBullets(writer, this.mDocument.lists);\n this.serializeAbstractListStyles(writer, this.document.abstractLists);\n this.serializeListInstances(writer, this.document.lists);\n // SerializeListOverrides(writer, this.mDocument.ridesm_document.ListOverrides);\n writer.writeEndElement();\n var zipArchiveItem = new ZipArchiveItem(writer.buffer, this.numberingPath);\n this.mArchive.addItem(zipArchiveItem);\n };\n // Serializes the abstract list styles\n WordExport.prototype.serializeAbstractListStyles = function (writer, listStyles) {\n for (var i = 0; i < listStyles.length; i++) {\n var abstractList = listStyles[i];\n writer.writeStartElement(undefined, 'abstractNum', this.wNamespace);\n writer.writeAttributeString(undefined, 'abstractNumId', this.wNamespace, abstractList.abstractListId.toString());\n writer.writeStartElement(undefined, 'nsid', this.wNamespace);\n writer.writeAttributeString(undefined, 'val', this.wNamespace, this.generateHex());\n writer.writeEndElement();\n for (var ilvl = 0, cnt = abstractList.levels.length; ilvl < cnt; ilvl++) {\n this.serializeListLevel(writer, abstractList.levels[ilvl], ilvl);\n }\n writer.writeEndElement(); //end of abstractNum\n }\n };\n // Serializes the list styles\n WordExport.prototype.serializeListInstances = function (writer, listStyles) {\n for (var i = 0; i < listStyles.length; i++) {\n var list = listStyles[i];\n writer.writeStartElement(undefined, 'num', this.wNamespace);\n writer.writeAttributeString(undefined, 'numId', this.wNamespace, (list.listId + 1).toString());\n writer.writeStartElement(undefined, 'abstractNumId', this.wNamespace);\n writer.writeAttributeString(undefined, 'val', this.wNamespace, list.abstractListId.toString());\n writer.writeEndElement();\n writer.writeEndElement();\n }\n };\n WordExport.prototype.generateHex = function () {\n return (Math.floor(Math.random() * (4000000000 - 270000000)) + 270000000).toString(16).toUpperCase();\n };\n WordExport.prototype.roundToTwoDecimal = function (num) {\n return Math.round(num); // * 100) / 100;\n };\n // Serialize the list level\n WordExport.prototype.serializeListLevel = function (writer, listLevel, levelIndex) {\n writer.writeStartElement(undefined, 'lvl', this.wNamespace);\n writer.writeAttributeString(undefined, 'ilvl', this.wNamespace, levelIndex.toString());\n writer.writeStartElement(undefined, 'start', this.wNamespace);\n writer.writeAttributeString(undefined, 'val', this.wNamespace, listLevel.startAt.toString());\n writer.writeEndElement();\n writer.writeStartElement(undefined, 'numFmt', this.wNamespace);\n writer.writeAttributeString(undefined, 'val', this.wNamespace, this.getLevelPattern(listLevel.listLevelPattern));\n writer.writeEndElement();\n if (listLevel.restartLevel > 0) {\n writer.writeStartElement(undefined, 'lvlRestart', this.wNamespace);\n writer.writeAttributeString(undefined, 'val', this.wNamespace, '0');\n writer.writeEndElement();\n }\n // if (!isNullOrUndefined(listLevel.paragraphFormat)) {\n // string name = listLevel.ParaStyleName.Substring(0, 1).ToUpper() + listLevel.ParaStyleName.Remove(0, 1);\n // writer.WriteStartElement('pStyle', this.wNamespace);\n // writer.WriteAttributeString('val', this.wNamespace, name);\n // writer.WriteEndElement();\n // }\n // if (listLevel.IsLegalStyleNumbering) {\n // writer.WriteStartElement('isLgl', this.wNamespace);\n // writer.WriteEndElement();\n // }\n this.serializeLevelFollow(writer, listLevel);\n this.serializeLevelText(writer, listLevel, levelIndex + 1);\n // SerializeLegacyProperties(listLevel);\n // if (listLevel.PicBulletId > 0) {\n // writer.WriteStartElement('lvlPicBulletId', this.wNamespace);\n // writer.WriteAttributeString('val', this.wNamespace, listLevel.PicBulletId.ToString());\n // writer.WriteEndElement();\n // }\n // //lvlJc\n // if (listLevel.NumberAlignment !== ListNumberAlignment.Left) {\n // writer.WriteStartElement('lvlJc', this.wNamespace);\n // string alignment = string.Empty;\n // if (listLevel.NumberAlignment === ListNumberAlignment.Right) {\n // alignment = 'right';\n // }\n // else {\n // alignment = 'center';\n // }\n // writer.WriteAttributeString('val', this.wNamespace, alignment);\n // writer.WriteEndElement();\n // }\n writer.writeStartElement(undefined, 'pPr', this.wNamespace);\n this.serializeParagraphFormat(writer, listLevel.paragraphFormat, undefined);\n writer.writeEndElement(); //end of pPr\n this.serializeCharacterFormat(writer, listLevel.characterFormat);\n writer.writeEndElement();\n };\n WordExport.prototype.getLevelPattern = function (levelPattern) {\n var patternType;\n switch (levelPattern) {\n case 'Arabic':\n patternType = 'decimal';\n break;\n case 'UpRoman':\n patternType = 'upperRoman';\n break;\n case 'LowRoman':\n patternType = 'lowerRoman';\n break;\n case 'UpLetter':\n patternType = 'upperLetter';\n break;\n case 'LowLetter':\n patternType = 'lowerLetter';\n break;\n // case 'Ordinal':\n // patternType = 'ordinal';\n // break;\n // case 'Number':\n // patternType = 'cardinalText';\n // break;\n // case 'OrdinalText':\n // patternType = 'ordinalText';\n // break;\n // case 'LeadingZero':\n // patternType = 'decimalZero';\n // break;\n // case 'Bullet':\n default:\n patternType = 'bullet';\n break;\n }\n return patternType;\n };\n // Serializes the level text\n WordExport.prototype.serializeLevelText = function (writer, listLevel, lvlIndex) {\n writer.writeStartElement(undefined, 'lvlText', this.wNamespace);\n writer.writeAttributeString(undefined, 'val', this.wNamespace, (listLevel.numberFormat));\n writer.writeEndElement();\n };\n // Serialize the level follow character\n WordExport.prototype.serializeLevelFollow = function (writer, listLevel) {\n var fc;\n //TODO:Type issue returns number instead of string\n if (listLevel.followCharacter === 'Tab') {\n fc = 'tab';\n }\n else if (listLevel.followCharacter === 'Space') {\n fc = 'space';\n }\n else {\n fc = 'nothing';\n }\n writer.writeStartElement(undefined, 'suff', this.wNamespace);\n writer.writeAttributeString(undefined, 'val', this.wNamespace, fc);\n writer.writeEndElement();\n };\n WordExport.prototype.serializeSettings = function () {\n var writer = new XmlWriter();\n writer.writeStartElement('w', 'settings', this.wNamespace);\n this.writeCustom(writer);\n // writer.writeAttributeString('xmlns', 'mc', undefined, this.veNamespace);\n // writer.writeAttributeString('xmlns', 'o', undefined, this.oNamespace);\n // writer.writeAttributeString('xmlns', 'r', undefined, this.rNamespace);\n // writer.writeAttributeString('xmlns', 'm', undefined, this.mNamespace);\n // writer.writeAttributeString('xmlns', 'v', undefined, this.vNamespace);\n writer.writeAttributeString('xmlns', 'w10', undefined, this.w10Namespace);\n writer.writeAttributeString('xmlns', 'w14', undefined, this.w14Namespace);\n writer.writeAttributeString('xmlns', 'w15', undefined, this.w15Namespace);\n writer.writeAttributeString('xmlns', 'sl', undefined, this.slNamespace);\n writer.writeAttributeString('mc', 'Ignorable', undefined, 'w14 w15');\n // //w:writeProtection - Write Protection\n // if (m_document.WriteProtected)\n // {\n // writer.writeStartElement('w', 'writeProtection', this.wNamespace);\n // writer.writeAttributeString('recommended', this.wNamespace, '1');\n // writer.writeEndElement();\n // }\n //w:view - Document View Setting\n // if (this.mDocument.ViewSetup.DocumentViewType !== DocumentViewType.PrintLayout &&\n // m_document.ViewSetup.DocumentViewType !== DocumentViewType.NormalLayout)\n // {\n // writer.writeStartElement('view', this.wNamespace);\n // string viewTypeStr = string.Empty;\n // if (m_document.ViewSetup.DocumentViewType === DocumentViewType.OutlineLayout)\n // {\n // viewTypeStr = 'outline';\n // }\n // else if (m_document.ViewSetup.DocumentViewType === DocumentViewType.WebLayout)\n // {\n // viewTypeStr = 'web';\n // }\n // writer.writeAttributeString('val', this.wNamespace, viewTypeStr);\n // writer.writeEndElement();\n // }\n //w:zoom - Magnification Setting\n writer.writeStartElement('w', 'zoom', this.wNamespace);\n // switch (m_document.ViewSetup.ZoomType)\n // {\n // case ZoomType.FullPage:\n // writer.writeAttributeString('w', 'val', this.wNamespace, 'fullPage');\n // break;\n // case ZoomType.PageWidth:\n // writer.writeAttributeString('w', 'val', this.wNamespace, 'bestFit');\n // break;\n // case ZoomType.TextFit:\n // writer.writeAttributeString('w', 'val', this.wNamespace, 'textFit');\n // break;\n // default:\n writer.writeAttributeString('w', 'val', this.wNamespace, 'none');\n // break;\n // }\n writer.writeAttributeString('w', 'percent', this.wNamespace, '100');\n writer.writeEndElement();\n //w:displayBackgroundShape - Display Background Objects When Displaying Document\n // if (m_document.Background.Type !== BackgroundType.NoBackground)\n // {\n writer.writeStartElement(undefined, 'displayBackgroundShape', this.wNamespace);\n writer.writeEndElement();\n // }\n //w:defaultTabStop - Distance Between Automatic Tab Stops\n writer.writeStartElement(undefined, 'defaultTabStop', this.wNamespace);\n var tabWidth = Math.round(this.defaultTabWidthValue * this.twipsInOnePoint);\n writer.writeAttributeString(undefined, 'val', this.wNamespace, tabWidth.toString());\n writer.writeEndElement();\n //w:evenAndOddHeaders - Different Even/Odd Page Headers and Footers \n if (this.mDifferentFirstPage) {\n writer.writeStartElement(undefined, 'evenAndOddHeaders', this.wNamespace);\n writer.writeEndElement();\n }\n //w:footnotePr - Document-Wide Footnote Properties and w:endnotePr - Document-Wide Endnote Properties\n // SerializeFootnoteSettings();\n //w:compat - Compatibility Settings\n writer.writeStartElement(undefined, 'compat', this.wNamespace);\n writer.writeStartElement(undefined, 'compatSetting', this.wNamespace);\n writer.writeAttributeString(undefined, 'name', this.wNamespace, 'compatibilityMode');\n writer.writeAttributeString(undefined, 'uri', this.wNamespace, 'http://schemas.microsoft.com/office/word');\n writer.writeAttributeString(undefined, 'val', this.wNamespace, '15');\n writer.writeEndElement();\n writer.writeEndElement();\n writer.writeEndElement();\n var zipArchiveItem = new ZipArchiveItem(writer.buffer, this.settingsPath);\n this.mArchive.addItem(zipArchiveItem);\n };\n WordExport.prototype.serializeCoreProperties = function () {\n //implementation\n };\n WordExport.prototype.serializeAppProperties = function () {\n //implementation\n };\n WordExport.prototype.serializeFontTable = function (contentType) {\n //implementation\n };\n WordExport.prototype.serializeSettingsRelation = function () {\n //implementation\n };\n WordExport.prototype.serializeHeaderFooters = function () {\n this.serializeHeaderFooter('EvenFooter');\n this.serializeHeaderFooter('EvenHeader');\n this.serializeHeaderFooter('FirstPageFooter');\n this.serializeHeaderFooter('FirstPageHeader');\n this.serializeHeaderFooter('OddFooter');\n this.serializeHeaderFooter('OddHeader');\n };\n // Serializes the Header/Footer\n WordExport.prototype.serializeHeaderFooter = function (hfType) {\n if (this.headersFooters.length === 0) {\n return;\n }\n var headerFooterPath;\n var headerFooterRelsPath;\n if (!this.headersFooters.containsKey(hfType)) {\n return;\n }\n var hfColl = this.headersFooters.get(hfType);\n var hf = undefined;\n for (var i = 0; i < hfColl.keys.length; i++) {\n var id = hfColl.keys[i];\n hf = hfColl.get(id);\n if (hfType === 'EvenHeader' || hfType === 'FirstPageHeader' ||\n hfType === 'OddHeader') {\n headerFooterPath = this.headerPath + id.replace('rId', '') + '.xml';\n headerFooterRelsPath = this.headerRelationPath + id.replace('rId', '') + '.xml.rels';\n this.serializeHeader(hf, id, headerFooterPath, headerFooterRelsPath);\n }\n else {\n headerFooterPath = this.footerPath + id.replace('rId', '') + '.xml';\n headerFooterRelsPath = this.footerRelationPath + id.replace('rId', '') + '.xml.rels';\n this.serializeFooter(hf, id, headerFooterPath, headerFooterRelsPath);\n }\n }\n };\n // Serialize the header part\n WordExport.prototype.serializeHeader = function (header, id, headerFooterPath, headerFooterRelsPath) {\n this.headerFooter = header;\n var writer = new XmlWriter();\n writer.writeStartElement('w', 'hdr', this.wNamespace);\n this.writeHFCommonAttributes(writer);\n var owner = this.blockOwner;\n this.blockOwner = header;\n this.serializeBodyItems(writer, header.blocks, true);\n this.blockOwner = owner;\n writer.writeEndElement();\n var zipArchiveItem = new ZipArchiveItem(writer.buffer, headerFooterPath);\n this.mArchive.addItem(zipArchiveItem);\n this.serializeHFRelations(id, headerFooterRelsPath);\n this.headerFooter = undefined;\n };\n // Serializes the HeaderFooter relations\n WordExport.prototype.serializeHFRelations = function (hfId, headerFooterRelsPath) {\n var hasHFImage = this.headerFooterImages.containsKey(hfId);\n // let hasHFHyperlinks = HeaderFooterHyperlinks.ContainsKey(hfId);\n // let hasHFInclPics = HeaderFooterInclPicUrls.ContainsKey(hfId);\n // let hasHFAlternateChunks = HeaderFooterAlternateChunks.ContainsKey(hfId);\n if (hasHFImage) {\n var writer = new XmlWriter();\n writer.writeStartElement(undefined, 'Relationships', this.rpNamespace);\n this.serializeImagesRelations(this.headerFooterImages.get(hfId), writer);\n // if (hasHFHyperlinks)\n // SerializeHyperlinkRelations(stream, HeaderFooterHyperlinks[hfId]);\n // if (hasHFAlternateChunks)\n // SerializeAltChunkRelations(stream, HeaderFooterAlternateChunks[hfId]);\n // if (hasHFInclPics)\n // SerializeIncludePictureUrlRelations(stream, HeaderFooterInclPicUrls[hfId]);\n // if (HFOleContainers.ContainsKey(hfId))\n // {\n // AddOLEToZip(HFOleContainers[hfId]);\n // }\n // if (HFRelations.ContainsKey(hfId))\n // SerializeHFCommonRelations(stream, HFRelations[hfId]);\n writer.writeEndElement();\n var zipArchiveItem = new ZipArchiveItem(writer.buffer, headerFooterRelsPath);\n this.mArchive.addItem(zipArchiveItem);\n }\n else {\n return;\n }\n };\n WordExport.prototype.writeHFCommonAttributes = function (writer) {\n writer.writeAttributeString('xmlns', 'v', undefined, this.vNamespace);\n writer.writeAttributeString('xmlns', 'w10', undefined, this.w10Namespace);\n writer.writeAttributeString('xmlns', 'o', undefined, this.oNamespace);\n writer.writeAttributeString('xmlns', 've', undefined, this.veNamespace);\n writer.writeAttributeString('xmlns', 'r', undefined, this.rNamespace);\n writer.writeAttributeString('xmlns', 'm', undefined, this.mNamespace);\n writer.writeAttributeString('xmlns', 'wne', undefined, this.wneNamespace);\n writer.writeAttributeString('xmlns', 'a', undefined, this.aNamespace);\n writer.writeAttributeString('xmlns', 'pic', undefined, this.pictureNamespace);\n writer.writeAttributeString('xmlns', 'wp', undefined, this.wpNamespace);\n writer.writeAttributeString('xmlns', 'wpc', undefined, this.wpCanvasNamespace);\n writer.writeAttributeString('xmlns', 'wp14', undefined, this.wpDrawingNamespace);\n this.writeDup(writer);\n writer.writeAttributeString('xmlns', 'wps', undefined, this.wpShapeNamespace);\n writer.writeAttributeString('ve', 'Ignorable', undefined, 'w14 w15 wp14');\n };\n // Serailize the footer and its relations\n WordExport.prototype.serializeFooter = function (footer, id, headerFooterPath, headerFooterRelsPath) {\n this.headerFooter = footer;\n var writer = new XmlWriter();\n writer.writeStartElement('w', 'ftr', this.wNamespace);\n this.writeHFCommonAttributes(writer);\n this.serializeBodyItems(writer, footer.blocks, true);\n writer.writeEndElement();\n var zipArchiveItem = new ZipArchiveItem(writer.buffer, headerFooterPath);\n this.mArchive.addItem(zipArchiveItem);\n this.serializeHFRelations(id, headerFooterRelsPath);\n };\n WordExport.prototype.serializeDocumentRelations = function () {\n var writer = new XmlWriter();\n writer.writeStartElement(undefined, 'Relationships', this.rpNamespace);\n this.serializeRelationShip(writer, this.getNextRelationShipID(), this.stylesRelType, 'styles.xml');\n this.serializeRelationShip(writer, this.getNextRelationShipID(), this.settingsRelType, 'settings.xml');\n // this.serializeRelationShip(writer, this.getNextRelationShipID(), this.ThemeRelType, 'theme/theme1.xml');\n if (this.document.lists.length > 0) {\n this.serializeRelationShip(writer, this.getNextRelationShipID(), this.numberingRelType, 'numbering.xml');\n }\n this.serializeHeaderFooterRelations(writer);\n // if (HasFontTable) {\n // SerializeRelationShip(docRelstream, GetNextRelationShipID(), this.FontTableRelType, 'fontTable.xml');\n // }\n // SerializeIncludePictureUrlRelations(docRelstream, InclPicFieldUrl);\n // //// Creating relationships for every hyperlink and image containing in the document\n this.serializeImagesRelations(this.documentImages, writer);\n // SerializeSvgImageRelation();\n //this.serializeExternalLinkImages(writer);\n // if (HasHyperlink && HyperlinkTargets.length > 0) {\n // SerializeHyperlinkRelations(docRelstream, HyperlinkTargets);\n // }\n // if (m_document.HasMacros\n // && IsMacroEnabled)\n // SerializeRelationShip(docRelstream, GetNextRelationShipID(), this.VbaProjectRelType, this.VbaProject);\n writer.writeEndElement();\n var zipArchiveItem = new ZipArchiveItem(writer.buffer, this.wordRelationPath);\n this.mArchive.addItem(zipArchiveItem);\n this.headerFooter = undefined;\n };\n // Serializes the image relations\n WordExport.prototype.serializeImagesRelations = function (images, writer) {\n if (images.length > 0) {\n var imagePath = '';\n var base64ImageString = void 0;\n var keys = images.keys;\n for (var i = 0; i < keys.length; i++) {\n var mImage = images.get(keys[i]);\n base64ImageString = mImage.imageString;\n if (isNullOrUndefined(base64ImageString)) {\n imagePath = this.imagePath + '/0.jpeg';\n this.serializeRelationShip(writer, keys[i], this.imageRelType, imagePath.replace('word/', ''));\n }\n else {\n var extension = '';\n var formatClippedString = '';\n if (this.startsWith(base64ImageString, 'data:image/bmp;base64,')) {\n extension = '.bmp';\n formatClippedString = base64ImageString.replace('data:image/bmp;base64,', '');\n }\n else if (this.startsWith(base64ImageString, 'data:image/x-emf;base64,')) {\n extension = '.emf';\n formatClippedString = base64ImageString.replace('data:image/x-emf;base64,', '');\n }\n else if (this.startsWith(base64ImageString, 'data:image/exif;base64,')) {\n extension = '.exif';\n formatClippedString = base64ImageString.replace('data:image/exif;base64,', '');\n }\n else if (this.startsWith(base64ImageString, 'data:image/gif;base64,')) {\n extension = '.gif';\n formatClippedString = base64ImageString.replace('data:image/gif;base64,', '');\n }\n else if (this.startsWith(base64ImageString, 'data:image/icon;base64,')) {\n extension = '.ico';\n formatClippedString = base64ImageString.replace('data:image/icon;base64,', '');\n }\n else if (this.startsWith(base64ImageString, 'data:image/jpeg;base64,')) {\n extension = '.jpeg';\n formatClippedString = base64ImageString.replace('data:image/jpeg;base64,', '');\n }\n else if (this.startsWith(base64ImageString, 'data:image/jpg;base64,')) {\n extension = '.jpg';\n formatClippedString = base64ImageString.replace('data:image/jpg;base64,', '');\n }\n else if (this.startsWith(base64ImageString, 'data:image/png;base64,')) {\n extension = '.png';\n formatClippedString = base64ImageString.replace('data:image/png;base64,', '');\n }\n else if (this.startsWith(base64ImageString, 'data:image/tiff;base64,')) {\n extension = '.tif';\n formatClippedString = base64ImageString.replace('data:image/tiff;base64,', '');\n }\n else if (this.startsWith(base64ImageString, 'data:image/x-wmf;base64,')) {\n extension = '.wmf';\n formatClippedString = base64ImageString.replace('data:image/x-wmf;base64,', '');\n }\n else {\n extension = '.jpeg';\n }\n imagePath = this.imagePath + keys[i] + extension;\n this.serializeRelationShip(writer, keys[i], this.imageRelType, imagePath.replace('word/', ''));\n //if (m_archive.Find(imagePath.Replace('\\\\', '/')) === -1)\n // {\n var imageBlob = new Blob([this.encodedString(formatClippedString)]);\n var zipArchiveItem = new ZipArchiveItem(imageBlob, imagePath);\n // let TestArchive = new ZipArchive();\n this.mArchive.addItem(zipArchiveItem);\n // TestArchive.save('image.zip').then(function (): void {\n // TestArchive.destroy();\n // });\n // }\n }\n }\n }\n };\n /**\n * @private\n */\n WordExport.prototype.encodedString = function (input) {\n var keyStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';\n var chr1;\n var chr2;\n var chr3;\n var enc1;\n var enc2;\n var enc3;\n var enc4;\n var i = 0;\n var resultIndex = 0;\n /*let dataUrlPrefix: string = 'data:';*/\n input = input.replace(/[^A-Za-z0-9\\+\\/\\=]/g, '');\n var totalLength = input.length * 3 / 4;\n if (input.charAt(input.length - 1) === keyStr.charAt(64)) {\n totalLength--;\n }\n if (input.charAt(input.length - 2) === keyStr.charAt(64)) {\n totalLength--;\n }\n if (totalLength % 1 !== 0) {\n // totalLength is not an integer, the length does not match a valid\n // base64 content. That can happen if:\n // - the input is not a base64 content\n // - the input is *almost* a base64 content, with a extra chars at the\n // beginning or at the end\n // - the input uses a base64 variant (base64url for example)\n throw new Error('Invalid base64 input, bad content length.');\n }\n var output = new Uint8Array(totalLength | 0);\n while (i < input.length) {\n enc1 = keyStr.indexOf(input.charAt(i++));\n enc2 = keyStr.indexOf(input.charAt(i++));\n enc3 = keyStr.indexOf(input.charAt(i++));\n enc4 = keyStr.indexOf(input.charAt(i++));\n chr1 = (enc1 << 2) | (enc2 >> 4);\n chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);\n chr3 = ((enc3 & 3) << 6) | enc4;\n output[resultIndex++] = chr1;\n if (enc3 !== 64) {\n output[resultIndex++] = chr2;\n }\n if (enc4 !== 64) {\n output[resultIndex++] = chr3;\n }\n }\n return output;\n };\n WordExport.prototype.serializeExternalLinkImages = function (writer) {\n var imagePath = '';\n var keys = this.externalImages.keys;\n for (var i = 0; i < this.externalImages.keys.length; i++) {\n this.serializeRelationShip(writer, keys[i], this.imageRelType, this.externalImages.get(keys[i]));\n }\n };\n // Serializes the HeaderFooters relations to the document relations stream\n WordExport.prototype.serializeHeaderFooterRelations = function (writer) {\n this.serializeHFRelation(writer, 'EvenFooter');\n this.serializeHFRelation(writer, 'EvenHeader');\n this.serializeHFRelation(writer, 'FirstPageFooter');\n this.serializeHFRelation(writer, 'FirstPageHeader');\n this.serializeHFRelation(writer, 'OddFooter');\n this.serializeHFRelation(writer, 'OddHeader');\n };\n // Serializes the headers footers relations.\n WordExport.prototype.serializeHFRelation = function (writer, hfType) {\n var headerFooterPath = '';\n var relType;\n if (!this.headersFooters.containsKey(hfType)) {\n return;\n }\n var hfColl = this.headersFooters.get(hfType);\n for (var i = 0; i < hfColl.keys.length; i++) {\n var id = hfColl.keys[i];\n if (hfType === 'EvenHeader' || hfType === 'FirstPageHeader' ||\n hfType === 'OddHeader') {\n headerFooterPath = 'header' + id.replace('rId', '') + '.xml';\n relType = this.headerRelType;\n }\n else {\n headerFooterPath = 'footer' + id.replace('rId', '') + '.xml';\n relType = this.footerRelType;\n }\n this.serializeRelationShip(writer, id, relType, headerFooterPath);\n }\n };\n // Serializes the relationship\n WordExport.prototype.serializeRelationShip = function (writer, relationshipID, relationshipType, targetPath) {\n writer.writeStartElement(undefined, 'Relationship', undefined);\n writer.writeAttributeString(undefined, 'Id', undefined, relationshipID);\n writer.writeAttributeString(undefined, 'Type', undefined, relationshipType);\n writer.writeAttributeString(undefined, 'Target', undefined, targetPath.replace('\\\\', '/').replace('\\v', ''));\n // tslint:disable-next-line:max-line-length\n if (relationshipType === this.hyperlinkRelType || this.startsWith(targetPath, 'http://') || this.startsWith(targetPath, 'https://') || this.startsWith(targetPath, 'file:///')) {\n // Uri targetUri;\n // if ((!targetPath.StartsWith('file:///')) && Uri.TryCreate(targetPath, UriKind.Absolute, out targetUri))\n // {\n // //Handled using Try catch to avoid exception if the Host name type is None because in \n //Silverlight 'HostNameType' property is not available.\n // try\n // {\n // m_writer.WriteAttributeString('Target', targetUri.AbsoluteUri);\n // }\n // catch\n // {\n // m_writer.WriteAttributeString('Target', targetPath.Replace('\\\\', '/').Replace(ControlChar.LineBreak, string.Empty));\n // }\n // }\n // else\n // {\n // m_writer.WriteAttributeString('Target', targetPath.Replace('\\\\', '/').Replace(ControlChar.LineBreak, string.Empty));\n // }\n writer.writeAttributeString(undefined, 'TargetMode', undefined, 'External');\n }\n writer.writeEndElement();\n };\n // Get the next relationship ID\n WordExport.prototype.getNextRelationShipID = function () {\n return 'rId' + (++this.mRelationShipID);\n };\n WordExport.prototype.serializeGeneralRelations = function () {\n var writer = new XmlWriter();\n this.resetRelationShipID();\n writer.writeStartElement(undefined, 'Relationships', this.rpNamespace);\n this.serializeRelationShip(writer, this.getNextRelationShipID(), this.documentRelType, this.documentPath);\n // this.serializeRelationShip(writer, this.getNextRelationShipID(), this.AppRelType, this.appPath);\n // this.serializeRelationShip(writer, this.getNextRelationShipID(), this.CoreRelType, this.corePath);\n //End of Relationships tag\n writer.writeEndElement();\n var zipArchiveItem = new ZipArchiveItem(writer.buffer, this.generalRelationPath);\n this.mArchive.addItem(zipArchiveItem);\n };\n WordExport.prototype.serializeContentTypes = function (contentType) {\n var writer = new XmlWriter();\n writer.writeStartElement(undefined, 'Types', 'http://schemas.openxmlformats.org/package/2006/content-types');\n //if (m_hasOleObject)\n //{\n // //\n // SerializeDefaultContentType(contentStream, 'bin', 'application/vnd.openxmlformats-officedocument.oleObject');\n //}\n this.serializeDefaultContentType(writer, 'rels', this.relationContentType);\n this.serializeDefaultContentType(writer, 'xml', this.xmlContentType);\n // if (m_hasEmbedFonts && !string.IsNullOrEmpty(type))\n // {\n // SerializeDefaultContentType(contentStream,type, this.fontContentType);\n // }\n if (this.documentImages.length > 0 || this.externalImages.length > 0 || this.headerFooterImages.length > 0) {\n this.serializeDefaultContentType(writer, 'png', 'image/png');\n this.serializeDefaultContentType(writer, 'bmp', 'image/bmp');\n this.serializeDefaultContentType(writer, 'emf', 'image/x-emf');\n this.serializeDefaultContentType(writer, 'wmf', 'image/x-wmf');\n this.serializeDefaultContentType(writer, 'gif', 'image/gif');\n this.serializeDefaultContentType(writer, 'ico', 'image/x-icon');\n this.serializeDefaultContentType(writer, 'tif', 'image/tiff');\n this.serializeDefaultContentType(writer, 'tiff', 'image/tiff');\n this.serializeDefaultContentType(writer, 'jpeg', 'image/jpeg');\n this.serializeDefaultContentType(writer, 'jpg', 'image/jpeg');\n this.serializeDefaultContentType(writer, 'svg', 'image/svg+xml');\n }\n // if (m_document.HasMacros\n // && IsMacroEnabled && !m_isSkipBinExtension)\n // {\n // SerializeDefaultContentType(contentStream, 'bin', this.VbaProjectContentType);\n // m_isSkipBinExtension = true;\n // }\n // if (m_hasOleObject)\n // {\n // SerializeOleContentType(contentStream);\n // }\n //document.xml\n this.serializeOverrideContentType(writer, this.documentPath, this.documentContentType);\n // tslint:disable-next-line:max-line-length\n //\n // if (HasNumbering) {\n this.serializeOverrideContentType(writer, this.numberingPath, this.numberingContentType);\n // }\n //Add the header/footer Alternate chunks\n // if (HeaderFooterAlternateChunks.length > 0) {\n // foreach(Dictionary < string, string > item in m_headerFooterAlternateChunks.Values)\n // AddAlternateChunkItem(item);\n // }\n //styles.xml\n this.serializeOverrideContentType(writer, this.stylePath, this.stylesContentType);\n //settings.xml\n this.serializeOverrideContentType(writer, this.settingsPath, this.settingsContentType);\n // //core.xml\n // SerializeOverrideContentType(contentStream, this.corePath, this.CoreContentType);\n // //app.xml\n // SerializeOverrideContentType(contentStream, this.appPath, this.AppContentType);\n // //custom.xml\n // if (!isNullOrUndefined(m_document.CustomDocumentProperties) && m_document.CustomDocumentProperties.length > 0)\n // SerializeOverrideContentType(contentStream, this.CustomPath, this.CustomContentType);\n // #if Chart\n // if (m_hasChart)\n // SerializeChartContentType(contentStream);\n // #endif\n this.serializeHFContentTypes(writer);\n // WriteXmlItemsContentTypes(contentStream);\n //End of Types tag\n writer.writeEndElement();\n var zipArchiveItem = new ZipArchiveItem(writer.buffer, this.contentTypesPath);\n this.mArchive.addItem(zipArchiveItem);\n };\n // Serializes the HeaderFooter content types\n WordExport.prototype.serializeHFContentTypes = function (writer) {\n this.serializeHeaderFootersContentType(writer, 'EvenFooter');\n this.serializeHeaderFootersContentType(writer, 'EvenHeader');\n this.serializeHeaderFootersContentType(writer, 'FirstPageFooter');\n this.serializeHeaderFootersContentType(writer, 'FirstPageHeader');\n this.serializeHeaderFootersContentType(writer, 'OddFooter');\n this.serializeHeaderFootersContentType(writer, 'OddHeader');\n };\n // Serializes the HeaderFooter content types.\n WordExport.prototype.serializeHeaderFootersContentType = function (writer, headerFooterType) {\n var contentType;\n var partName;\n if (!this.headersFooters.containsKey(headerFooterType)) {\n return;\n }\n var hfColl = this.headersFooters.get(headerFooterType);\n for (var i = 0; i < hfColl.keys.length; i++) {\n var id = hfColl.keys[i];\n if (headerFooterType === 'EvenHeader' || headerFooterType === 'FirstPageHeader' ||\n headerFooterType === 'OddHeader') {\n partName = this.headerPath + id.replace('rId', '') + '.xml';\n contentType = this.headerContentType;\n }\n else {\n partName = this.footerPath + id.replace('rId', '') + '.xml';\n contentType = this.footerContentType;\n }\n this.serializeOverrideContentType(writer, partName, contentType);\n }\n };\n // Serializes the Override content type.\n WordExport.prototype.serializeOverrideContentType = function (writer, partName, contentType) {\n writer.writeStartElement(undefined, 'Override', undefined);\n writer.writeAttributeString(undefined, 'PartName', undefined, '/' + partName.replace('\\\\', '/'));\n writer.writeAttributeString(undefined, 'ContentType', undefined, contentType);\n writer.writeEndElement();\n };\n // Serializes the default content type\n WordExport.prototype.serializeDefaultContentType = function (writer, extension, contentType) {\n writer.writeStartElement(undefined, 'Default', undefined);\n writer.writeAttributeString(undefined, 'Extension', undefined, extension);\n writer.writeAttributeString(undefined, 'ContentType', undefined, contentType);\n writer.writeEndElement();\n };\n // Reset the relationship id counter\n WordExport.prototype.resetRelationShipID = function () {\n this.mRelationShipID = 0;\n };\n WordExport.prototype.close = function () {\n //Implement\n };\n return WordExport;\n}());\nexport { WordExport };\n","import { StreamWriter } from '@syncfusion/ej2-file-utils';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * Exports the document to Text format.\n */\nvar TextExport = /** @class */ (function () {\n function TextExport() {\n this.text = '';\n this.curSectionIndex = 0;\n this.inField = false;\n }\n TextExport.prototype.getModuleName = function () {\n return 'TextExport';\n };\n /**\n * @private\n */\n TextExport.prototype.save = function (viewer, fileName) {\n this.serialize(viewer);\n var writer = new StreamWriter();\n this.writeInternal(writer);\n writer.save(fileName + '.txt');\n };\n /**\n * @private\n */\n TextExport.prototype.saveAsBlob = function (viewer) {\n this.serialize(viewer);\n var streamWriter = new StreamWriter();\n this.writeInternal(streamWriter);\n var blob = streamWriter.buffer;\n streamWriter.destroy();\n var promise;\n return new Promise(function (resolve, reject) {\n resolve(blob);\n });\n };\n TextExport.prototype.serialize = function (viewer) {\n var document = viewer.owner.sfdtExportModule.write();\n this.setDocument(document);\n };\n TextExport.prototype.setDocument = function (document) {\n this.document = document;\n this.mSections = document.sections;\n };\n TextExport.prototype.writeInternal = function (streamWriter) {\n var section = undefined;\n var sectionCount = this.document.sections.length - 1;\n var isLastSection = false;\n this.updateLastParagraph();\n for (var i = 0; i <= sectionCount; i++) {\n section = this.document.sections[i];\n isLastSection = (i === sectionCount) ? true : false;\n this.writeBody(streamWriter, section.blocks);\n this.writeNewLine(streamWriter);\n this.writeSectionEnd(section, isLastSection);\n }\n for (var j = 0; j <= sectionCount; j++) {\n section = this.document.sections[j];\n this.writeHeadersFooters(streamWriter, section);\n }\n };\n /// \n /// Writes the specified document content to the text file.\n /// \n TextExport.prototype.writeBody = function (streamWriter, body) {\n var bodyItemsCount = body.length - 1;\n var bodyItem = undefined;\n for (var i = 0; i <= bodyItemsCount; i++) {\n bodyItem = body[i];\n if (bodyItem.hasOwnProperty('inlines')) {\n var isLastPara = (bodyItem === this.lastPara) ? true : false;\n this.writeParagraph(streamWriter, bodyItem, isLastPara);\n }\n else {\n this.writeTable(streamWriter, bodyItem);\n }\n }\n };\n TextExport.prototype.writeParagraph = function (streamWriter, paragraph, isLastPara) {\n for (var i = 0; i < paragraph.inlines.length; i++) {\n var item = paragraph.inlines[i];\n if (item.hasOwnProperty('fieldType')) {\n this.inField = item.fieldType === 0;\n }\n else if (item.hasOwnProperty('text') && !this.inField) {\n this.writeText(streamWriter, item.text);\n }\n }\n if (!isLastPara) {\n this.writeNewLine(streamWriter);\n }\n };\n /// }\n /// \n /// Writes the specified table text content to the text file.\n /// \n TextExport.prototype.writeTable = function (streamWriter, table) {\n for (var i = 0; i < table.rows.length; i++) {\n var row = table.rows[i];\n for (var j = 0; j < row.cells.length; j++) {\n var cell = row.cells[j];\n this.writeBody(streamWriter, cell.blocks);\n }\n }\n };\n /// \n /// Writes the specified Header Footer text content to the text file.\n /// \n TextExport.prototype.writeHeadersFooters = function (streamWriter, section) {\n var headersFooters = section.headersFooters;\n if (isNullOrUndefined(headersFooters)) {\n return;\n }\n if (!isNullOrUndefined(section.headersFooters.header)) {\n this.writeBody(streamWriter, section.headersFooters.header.blocks);\n }\n if (section.headersFooters.footer) {\n this.writeBody(streamWriter, section.headersFooters.footer.blocks);\n }\n if (section.headersFooters.evenFooter) {\n this.writeBody(streamWriter, section.headersFooters.evenFooter.blocks);\n }\n if (section.headersFooters.evenHeader) {\n this.writeBody(streamWriter, section.headersFooters.evenHeader.blocks);\n }\n if (section.headersFooters.firstPageHeader) {\n this.writeBody(streamWriter, section.headersFooters.firstPageHeader.blocks);\n }\n if (section.headersFooters.firstPageFooter) {\n this.writeBody(streamWriter, section.headersFooters.firstPageFooter.blocks);\n }\n };\n /// \n /// Writes the end of the section.\n /// \n TextExport.prototype.writeSectionEnd = function (section, lastSection) {\n this.curSectionIndex++;\n };\n TextExport.prototype.writeNewLine = function (writer) {\n writer.writeLine('');\n };\n TextExport.prototype.writeText = function (writer, text) {\n writer.write(text);\n };\n TextExport.prototype.updateLastParagraph = function () {\n var cnt = this.document.sections.length;\n var sec;\n if (cnt > 0) {\n sec = this.document.sections[cnt - 1];\n }\n if (!isNullOrUndefined(sec)) {\n var paragraphs = [];\n for (var i = 0; i < sec.blocks.length; i++) {\n if (sec.blocks[i].hasOwnProperty('inlines')) {\n paragraphs.push(sec.blocks[i]);\n }\n }\n var pCount = paragraphs.length;\n if (pCount > 0) {\n this.lastPara = paragraphs[pCount - 1];\n }\n }\n };\n /**\n * @private\n */\n TextExport.prototype.destroy = function () {\n this.document = undefined;\n this.lastPara = undefined;\n this.mSections = undefined;\n this.sections = undefined;\n };\n return TextExport;\n}());\nexport { TextExport };\n","import { LineWidget, ParagraphWidget, BodyWidget, TextElementBox, FieldElementBox, TableRowWidget, TableCellWidget, ImageElementBox, ListTextElementBox, BookmarkElementBox } from '../viewer/page';\nimport { BlockWidget } from '../viewer/page';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { HelperMethods } from '../editor/editor-helper';\nimport { StreamWriter } from '@syncfusion/ej2-file-utils';\n/**\n * Exports the document to Sfdt format.\n */\nvar SfdtExport = /** @class */ (function () {\n /**\n * @private\n */\n function SfdtExport(owner) {\n /* tslint:disable:no-any */\n this.endLine = undefined;\n this.endOffset = undefined;\n this.endCell = undefined;\n this.startColumnIndex = undefined;\n this.endColumnIndex = undefined;\n this.lists = undefined;\n this.viewer = undefined;\n this.document = undefined;\n this.writeInlineStyles = undefined;\n this.viewer = owner;\n }\n SfdtExport.prototype.getModuleName = function () {\n return 'SfdtExport';\n };\n SfdtExport.prototype.clear = function () {\n this.writeInlineStyles = undefined;\n this.endLine = undefined;\n this.lists = undefined;\n this.document = undefined;\n };\n /**\n * Serialize the data as Syncfusion document text.\n * @private\n */\n SfdtExport.prototype.serialize = function () {\n return JSON.stringify(this.write());\n };\n /**\n * @private\n */\n SfdtExport.prototype.saveAsBlob = function (viewer) {\n var streamWriter = new StreamWriter();\n streamWriter.write(this.serialize());\n var blob = streamWriter.buffer;\n streamWriter.destroy();\n var promise;\n return new Promise(function (resolve, reject) {\n resolve(blob);\n });\n };\n // tslint:disable-next-line:max-line-length\n /**\n * @private\n */\n SfdtExport.prototype.write = function (line, startOffset, endLine, endOffset, writeInlineStyles) {\n if (writeInlineStyles) {\n this.writeInlineStyles = true;\n }\n this.lists = [];\n this.document = {};\n this.document.sections = [];\n this.document.characterFormat = this.writeCharacterFormat(this.viewer.characterFormat);\n this.document.paragraphFormat = this.writeParagraphFormat(this.viewer.paragraphFormat);\n if (line instanceof LineWidget && endLine instanceof LineWidget) {\n // For selection\n var startPara = line.paragraph;\n var endPara = endLine.paragraph;\n var startCell = startPara.associatedCell;\n var endCell = endPara.associatedCell;\n // Creates section\n var bodyWidget = startPara.bodyWidget;\n var section = this.createSection(line.paragraph.bodyWidget);\n this.document.sections.push(section);\n if (startCell === endCell || isNullOrUndefined(endCell)) {\n this.endLine = endLine;\n this.endOffset = endOffset;\n }\n else {\n // Todo: Handle nested table cases\n if (startCell instanceof TableCellWidget) {\n var startTable = startCell.getContainerTable();\n var endTable = endCell.getContainerTable();\n if (startTable.tableFormat === endTable.tableFormat) {\n this.endCell = endCell;\n this.endColumnIndex = this.endCell.columnIndex + this.endCell.cellFormat.columnSpan;\n this.startColumnIndex = startCell.columnIndex;\n }\n }\n else {\n this.endCell = endCell;\n }\n }\n if (startCell === endCell || isNullOrUndefined(startCell)) {\n var paragraph = this.createParagraph(line.paragraph);\n section.blocks.push(paragraph);\n if (!this.writeParagraph(line.paragraph, paragraph, section.blocks, line.indexInOwner, startOffset)) {\n // Todo:continue in next section\n }\n }\n else {\n var table = this.createTable(startCell.ownerTable);\n section.blocks.push(table);\n this.writeTable(startCell.ownerTable, table, startCell.ownerRow.indexInOwner, section.blocks);\n }\n }\n else {\n if (this.viewer.pages.length > 0) {\n var page = this.viewer.pages[0];\n if (page.bodyWidgets.length > 0) {\n this.writeBodyWidget(page.bodyWidgets[0], 0);\n }\n }\n }\n this.writeStyles(this.viewer);\n this.writeLists(this.viewer);\n var doc = this.document;\n this.clear();\n return doc;\n };\n SfdtExport.prototype.writeBodyWidget = function (bodyWidget, index) {\n if (!(bodyWidget instanceof BodyWidget)) {\n return true;\n }\n var section = this.createSection(bodyWidget);\n this.document.sections.push(section);\n this.writeHeaderFooters(this.viewer.headersFooters[bodyWidget.index], section);\n if (this.writeBlock(bodyWidget.childWidgets[index], 0, section.blocks)) {\n return true;\n }\n var next = bodyWidget;\n do {\n bodyWidget = next;\n next = next.nextRenderedWidget;\n } while (next instanceof BodyWidget && next.index === bodyWidget.index);\n return this.writeBodyWidget(next, index);\n };\n SfdtExport.prototype.writeHeaderFooters = function (hfs, section) {\n if (isNullOrUndefined(hfs)) {\n return;\n }\n section.headersFooters.header = this.writeHeaderFooter(hfs[0]);\n section.headersFooters.footer = this.writeHeaderFooter(hfs[1]);\n section.headersFooters.evenHeader = this.writeHeaderFooter(hfs[2]);\n section.headersFooters.evenFooter = this.writeHeaderFooter(hfs[3]);\n section.headersFooters.firstPageHeader = this.writeHeaderFooter(hfs[4]);\n section.headersFooters.firstPageFooter = this.writeHeaderFooter(hfs[5]);\n };\n SfdtExport.prototype.writeHeaderFooter = function (widget) {\n if (isNullOrUndefined(widget)) {\n return undefined;\n }\n var headerFooter = {};\n if (widget && widget.childWidgets && widget.childWidgets.length > 0) {\n headerFooter.blocks = [];\n this.writeBlock(widget.firstChild, 0, headerFooter.blocks);\n }\n return headerFooter;\n };\n SfdtExport.prototype.createSection = function (bodyWidget) {\n var section = {};\n section.sectionFormat = {};\n section.sectionFormat.pageWidth = bodyWidget.sectionFormat.pageWidth;\n section.sectionFormat.pageHeight = bodyWidget.sectionFormat.pageHeight;\n section.sectionFormat.leftMargin = bodyWidget.sectionFormat.leftMargin;\n section.sectionFormat.rightMargin = bodyWidget.sectionFormat.rightMargin;\n section.sectionFormat.topMargin = bodyWidget.sectionFormat.topMargin;\n section.sectionFormat.bottomMargin = bodyWidget.sectionFormat.bottomMargin;\n section.sectionFormat.differentFirstPage = bodyWidget.sectionFormat.differentFirstPage;\n section.sectionFormat.differentOddAndEvenPages = bodyWidget.sectionFormat.differentOddAndEvenPages;\n section.sectionFormat.headerDistance = bodyWidget.sectionFormat.headerDistance;\n section.sectionFormat.footerDistance = bodyWidget.sectionFormat.footerDistance;\n section.blocks = [];\n section.headersFooters = {};\n return section;\n };\n SfdtExport.prototype.writeBlock = function (widget, index, blocks) {\n if (!(widget instanceof BlockWidget)) {\n return true;\n }\n if (widget instanceof ParagraphWidget) {\n var paragraph = this.createParagraph(widget);\n blocks.push(paragraph);\n if (this.writeParagraph(widget, paragraph, blocks)) {\n return true;\n }\n }\n else {\n var tableWidget = widget;\n var table = this.createTable(tableWidget);\n blocks.push(table);\n if (this.writeTable(tableWidget, table, 0, blocks)) {\n return true;\n }\n }\n return false;\n };\n SfdtExport.prototype.writeNextBlock = function (widget, blocks) {\n var next = widget.nextRenderedWidget;\n if (next instanceof BlockWidget && next.containerWidget.index === widget.containerWidget.index) {\n return this.writeBlock(widget.nextRenderedWidget, 0, blocks);\n }\n return false;\n };\n SfdtExport.prototype.writeParagraph = function (paragraphWidget, paragraph, blocks, lineIndex, start) {\n if (isNullOrUndefined(lineIndex)) {\n lineIndex = 0;\n }\n if (isNullOrUndefined(start)) {\n start = 0;\n }\n var next = paragraphWidget;\n while (next instanceof ParagraphWidget) {\n if (this.writeLines(next, lineIndex, start, paragraph.inlines)) {\n return true;\n }\n lineIndex = 0;\n start = 0;\n paragraphWidget = next;\n next = paragraphWidget.nextSplitWidget;\n }\n return this.writeNextBlock(paragraphWidget, blocks);\n };\n SfdtExport.prototype.writeInlines = function (line, inlines) {\n for (var i = 0; i < line.children.length; i++) {\n var element = line.children[i];\n if (element instanceof ListTextElementBox) {\n continue;\n }\n var inline = this.writeInline(element);\n if (!isNullOrUndefined(inline)) {\n inlines.push(inline);\n }\n }\n };\n SfdtExport.prototype.writeInline = function (element) {\n var inline = {};\n inline.characterFormat = this.writeCharacterFormat(element.characterFormat);\n if (element instanceof FieldElementBox) {\n inline.fieldType = element.fieldType;\n }\n else if (element instanceof ImageElementBox) {\n inline.imageString = element.imageString;\n inline.width = HelperMethods.convertPixelToPoint(element.width);\n inline.height = HelperMethods.convertPixelToPoint(element.height);\n }\n else if (element instanceof BookmarkElementBox) {\n inline.bookmarkType = element.bookmarkType;\n inline.name = element.name;\n }\n else if (element instanceof TextElementBox) {\n inline.text = element.text;\n }\n else {\n inline = undefined;\n }\n return inline;\n };\n SfdtExport.prototype.writeLines = function (paragraph, lineIndex, offset, inlines) {\n var startIndex = lineIndex;\n var endParagraph = this.endLine instanceof LineWidget && this.endLine.paragraph === paragraph;\n var endIndex = endParagraph ? this.endLine.indexInOwner : paragraph.childWidgets.length - 1;\n for (var i = startIndex; i <= endIndex; i++) {\n var child = paragraph.childWidgets[i];\n if (this.endLine === child || (lineIndex === i && offset !== 0)) {\n this.writeLine(child, offset, inlines);\n }\n else {\n this.writeInlines(child, inlines);\n }\n }\n return endParagraph;\n };\n SfdtExport.prototype.writeLine = function (line, offset, inlines) {\n var isEnd = line === this.endLine;\n var started = false;\n var ended = false;\n var length = 0;\n for (var j = 0; j < line.children.length; j++) {\n var element = line.children[j];\n if (element instanceof ListTextElementBox) {\n continue;\n }\n var inline = undefined;\n length += element.length;\n started = length > offset;\n ended = isEnd && length >= this.endOffset;\n if (!started) {\n continue;\n }\n inline = this.writeInline(element);\n inlines[inlines.length] = inline;\n if (length > offset || ended) {\n if (inline.hasOwnProperty('text')) {\n var startIndex = length - element.length;\n var indexInInline = offset - startIndex;\n var endIndex = ended ? this.endOffset - startIndex : element.length;\n inline.text = inline.text.substring(indexInInline, endIndex);\n }\n offset = -1;\n }\n if (ended) {\n break;\n }\n }\n };\n SfdtExport.prototype.createParagraph = function (paragraphWidget) {\n var paragraph = {};\n paragraph.paragraphFormat = this.writeParagraphFormat(paragraphWidget.paragraphFormat);\n paragraph.characterFormat = this.writeCharacterFormat(paragraphWidget.characterFormat);\n paragraph.inlines = [];\n return paragraph;\n };\n /**\n * @private\n */\n SfdtExport.prototype.writeCharacterFormat = function (format, isInline) {\n var characterFormat = {};\n HelperMethods.writeCharacterFormat(characterFormat, isInline, format);\n if (this.writeInlineStyles && !isInline) {\n characterFormat.inlineFormat = this.writeCharacterFormat(format, true);\n }\n return characterFormat;\n };\n SfdtExport.prototype.writeParagraphFormat = function (format, isInline) {\n var paragraphFormat = {};\n paragraphFormat.leftIndent = isInline ? format.leftIndent : format.getValue('leftIndent');\n paragraphFormat.rightIndent = isInline ? format.rightIndent : format.getValue('rightIndent');\n paragraphFormat.firstLineIndent = isInline ? format.firstLineIndent : format.getValue('firstLineIndent');\n paragraphFormat.textAlignment = isInline ? format.textAlignment : format.getValue('textAlignment');\n paragraphFormat.beforeSpacing = isInline ? format.beforeSpacing : format.getValue('beforeSpacing');\n paragraphFormat.afterSpacing = isInline ? format.afterSpacing : format.getValue('afterSpacing');\n paragraphFormat.lineSpacing = isInline ? format.lineSpacing : format.getValue('lineSpacing');\n paragraphFormat.lineSpacingType = isInline ? format.lineSpacingType : format.getValue('lineSpacingType');\n paragraphFormat.styleName = !isNullOrUndefined(format.baseStyle) ? format.baseStyle.name : undefined;\n paragraphFormat.outlineLevel = isInline ? format.outlineLevel : format.getValue('outlineLevel');\n paragraphFormat.listFormat = this.writeListFormat(format.listFormat, isInline);\n paragraphFormat.tabs = this.writeTabs(format.tabs);\n if (this.writeInlineStyles && !isInline) {\n paragraphFormat.inlineFormat = this.writeParagraphFormat(format, true);\n }\n return paragraphFormat;\n };\n SfdtExport.prototype.writeTabs = function (tabStops) {\n if (isNullOrUndefined(tabStops) || tabStops.length < 1) {\n return undefined;\n }\n var tabs = [];\n for (var i = 0; i < tabStops.length; i++) {\n var tabStop = tabStops[i];\n var tab = {};\n tab.position = tabStop.position;\n tab.deletePosition = tabStop.deletePosition;\n tab.tabJustification = tabStop.tabJustification;\n tab.tabLeader = tabStop.tabLeader;\n tabs.push(tab);\n }\n return tabs;\n };\n /**\n * @private\n */\n SfdtExport.prototype.writeListFormat = function (format, isInline) {\n var listFormat = {};\n var listIdValue = format.getValue('listId');\n if (!isNullOrUndefined(listIdValue) && listIdValue > -1) {\n listFormat.listId = listIdValue;\n listFormat.listLevelNumber = format.getValue('listLevelNumber');\n if (this.lists.indexOf(format.listId) < 0) {\n this.lists.push(format.listId);\n }\n }\n return listFormat;\n };\n SfdtExport.prototype.writeTable = function (tableWidget, table, index, blocks) {\n var widget = tableWidget.childWidgets[index];\n if (widget instanceof TableRowWidget) {\n if (this.writeRow(widget, table.rows)) {\n return true;\n }\n }\n var next = tableWidget;\n do {\n tableWidget = next;\n next = tableWidget.nextSplitWidget;\n } while (next instanceof BlockWidget);\n return this.writeNextBlock(tableWidget, blocks);\n };\n SfdtExport.prototype.writeRow = function (rowWidget, rows) {\n if (!(rowWidget instanceof TableRowWidget)) {\n return false;\n }\n var row = this.createRow(rowWidget);\n rows.push(row);\n for (var i = 0; i < rowWidget.childWidgets.length; i++) {\n var widget = rowWidget.childWidgets[i];\n if (widget instanceof TableCellWidget) {\n if (rowWidget.index === widget.rowIndex\n && (isNullOrUndefined(this.startColumnIndex) || widget.columnIndex >= this.startColumnIndex)\n && (isNullOrUndefined(this.endColumnIndex) || widget.columnIndex < this.endColumnIndex)) {\n if (this.writeCell(widget, row.cells)) {\n return true;\n }\n }\n }\n }\n var next = rowWidget;\n do {\n rowWidget = next;\n next = rowWidget.nextRenderedWidget;\n } while (next instanceof TableRowWidget && next.index === rowWidget.index);\n return this.writeRow(next, rows);\n };\n SfdtExport.prototype.writeCell = function (cellWidget, cells) {\n var cell = this.createCell(cellWidget);\n cells.push(cell);\n if (this.writeBlock(cellWidget.firstChild, 0, cell.blocks)) {\n return true;\n }\n return this.endCell instanceof TableCellWidget ? this.endCell.cellFormat === cellWidget.cellFormat : false;\n };\n SfdtExport.prototype.createTable = function (tableWidget) {\n var table = {};\n table.rows = [];\n table.grid = [];\n for (var i = 0; i < tableWidget.tableHolder.columns.length; i++) {\n table.grid[i] = tableWidget.tableHolder.columns[i].preferredWidth;\n }\n table.tableFormat = this.writeTableFormat(tableWidget.tableFormat);\n table.description = tableWidget.description;\n table.title = tableWidget.title;\n return table;\n };\n SfdtExport.prototype.createRow = function (rowWidget) {\n var row = {};\n row.cells = [];\n row.rowFormat = this.writeRowFormat(rowWidget.rowFormat);\n return row;\n };\n SfdtExport.prototype.createCell = function (cellWidget) {\n var cell = {};\n cell.blocks = [];\n cell.cellFormat = this.writeCellFormat(cellWidget.cellFormat);\n cell.columnIndex = cellWidget.columnIndex;\n return cell;\n };\n SfdtExport.prototype.writeShading = function (wShading) {\n var shading = {};\n shading.backgroundColor = wShading.backgroundColor;\n shading.foregroundColor = wShading.foregroundColor;\n shading.textureStyle = wShading.textureStyle;\n return shading;\n };\n SfdtExport.prototype.writeBorder = function (wBorder) {\n var border = {};\n border.color = wBorder.color;\n border.hasNoneStyle = wBorder.hasNoneStyle;\n border.lineStyle = wBorder.lineStyle;\n border.lineWidth = wBorder.lineWidth;\n border.shadow = wBorder.shadow;\n border.space = wBorder.space;\n return border;\n };\n SfdtExport.prototype.writeBorders = function (wBorders) {\n var borders = {};\n borders.top = this.writeBorder(wBorders.top);\n borders.left = this.writeBorder(wBorders.left);\n borders.right = this.writeBorder(wBorders.right);\n borders.bottom = this.writeBorder(wBorders.bottom);\n borders.diagonalDown = this.writeBorder(wBorders.diagonalDown);\n borders.diagonalUp = this.writeBorder(wBorders.diagonalUp);\n borders.horizontal = this.writeBorder(wBorders.horizontal);\n borders.vertical = this.writeBorder(wBorders.vertical);\n return borders;\n };\n SfdtExport.prototype.writeCellFormat = function (wCellFormat) {\n var cellFormat = {};\n cellFormat.borders = this.writeBorders(wCellFormat.borders);\n cellFormat.shading = this.writeShading(wCellFormat.shading);\n cellFormat.topMargin = wCellFormat.topMargin;\n cellFormat.rightMargin = wCellFormat.rightMargin;\n cellFormat.leftMargin = wCellFormat.leftMargin;\n cellFormat.bottomMargin = wCellFormat.bottomMargin;\n cellFormat.preferredWidth = wCellFormat.preferredWidth;\n cellFormat.preferredWidthType = wCellFormat.preferredWidthType;\n cellFormat.cellWidth = wCellFormat.cellWidth;\n cellFormat.columnSpan = wCellFormat.columnSpan;\n cellFormat.rowSpan = wCellFormat.rowSpan;\n cellFormat.verticalAlignment = wCellFormat.verticalAlignment;\n return cellFormat;\n };\n SfdtExport.prototype.writeRowFormat = function (wRowFormat) {\n var rowFormat = {};\n rowFormat.height = wRowFormat.height;\n rowFormat.allowBreakAcrossPages = wRowFormat.allowBreakAcrossPages;\n rowFormat.heightType = wRowFormat.heightType;\n rowFormat.isHeader = wRowFormat.isHeader;\n rowFormat.borders = this.writeBorders(wRowFormat.borders);\n rowFormat.gridBefore = wRowFormat.gridBefore;\n rowFormat.gridBeforeWidth = wRowFormat.gridBeforeWidth;\n rowFormat.gridBeforeWidthType = wRowFormat.gridBeforeWidthType;\n rowFormat.gridAfter = wRowFormat.gridAfter;\n rowFormat.gridAfterWidth = wRowFormat.gridAfterWidth;\n rowFormat.gridAfterWidthType = wRowFormat.gridAfterWidthType;\n return rowFormat;\n };\n SfdtExport.prototype.writeTableFormat = function (wTableFormat) {\n var tableFormat = {};\n tableFormat.borders = this.writeBorders(wTableFormat.borders);\n tableFormat.shading = this.writeShading(wTableFormat.shading);\n tableFormat.cellSpacing = wTableFormat.cellSpacing;\n tableFormat.leftIndent = wTableFormat.leftIndent;\n tableFormat.tableAlignment = wTableFormat.tableAlignment;\n tableFormat.topMargin = wTableFormat.topMargin;\n tableFormat.rightMargin = wTableFormat.rightMargin;\n tableFormat.leftMargin = wTableFormat.leftMargin;\n tableFormat.bottomMargin = wTableFormat.bottomMargin;\n tableFormat.preferredWidth = wTableFormat.preferredWidth;\n tableFormat.preferredWidthType = wTableFormat.preferredWidthType;\n return tableFormat;\n };\n SfdtExport.prototype.writeStyles = function (viewer) {\n var styles = [];\n this.document.styles = [];\n for (var i = 0; i < viewer.styles.length; i++) {\n this.document.styles.push(this.writeStyle(viewer.styles.getItem(i)));\n }\n };\n SfdtExport.prototype.writeStyle = function (style) {\n var wStyle = {};\n wStyle.name = style.name;\n if (style.type === 'Paragraph') {\n wStyle.type = 'Paragraph';\n wStyle.paragraphFormat = this.writeParagraphFormat(style.paragraphFormat);\n wStyle.characterFormat = this.writeCharacterFormat(style.characterFormat);\n }\n if (style.type === 'Character') {\n wStyle.type = 'Character';\n wStyle.characterFormat = this.writeCharacterFormat(style.characterFormat);\n }\n if (!isNullOrUndefined(style.basedOn)) {\n wStyle.basedOn = style.basedOn.name;\n }\n if (!isNullOrUndefined(style.link)) {\n wStyle.link = style.link.name;\n }\n if (!isNullOrUndefined(style.next)) {\n wStyle.next = style.next.name;\n }\n return wStyle;\n };\n SfdtExport.prototype.writeLists = function (viewer) {\n var abstractLists = [];\n this.document.lists = [];\n for (var i = 0; i < viewer.lists.length; i++) {\n var list = viewer.lists[i];\n if (this.lists.indexOf(list.listId) > -1) {\n this.document.lists.push(this.writeList(list));\n if (abstractLists.indexOf(list.abstractListId) < 0) {\n abstractLists.push(list.abstractListId);\n }\n }\n }\n this.document.abstractLists = [];\n for (var i = 0; i < viewer.abstractLists.length; i++) {\n var abstractList = viewer.abstractLists[i];\n if (this.lists.indexOf(abstractList.abstractListId) > -1) {\n this.document.abstractLists.push(this.writeAbstractList(abstractList));\n }\n }\n };\n SfdtExport.prototype.writeAbstractList = function (wAbstractList) {\n var abstractList = {};\n abstractList.abstractListId = wAbstractList.abstractListId;\n abstractList.levels = [];\n for (var i = 0; i < wAbstractList.levels.length; i++) {\n abstractList.levels[i] = this.writeListLevel(wAbstractList.levels[i]);\n }\n return abstractList;\n };\n SfdtExport.prototype.writeList = function (wList) {\n var list = {};\n list.abstractListId = wList.abstractListId;\n //list.levelOverrides = wList.levelOverrides;\n list.listId = wList.listId;\n return list;\n };\n SfdtExport.prototype.writeListLevel = function (wListLevel) {\n var listLevel = {};\n listLevel.characterFormat = this.writeCharacterFormat(wListLevel.characterFormat);\n listLevel.paragraphFormat = this.writeParagraphFormat(wListLevel.paragraphFormat);\n listLevel.followCharacter = wListLevel.followCharacter;\n listLevel.listLevelPattern = wListLevel.listLevelPattern;\n listLevel.numberFormat = wListLevel.numberFormat;\n listLevel.restartLevel = wListLevel.restartLevel;\n listLevel.startAt = wListLevel.startAt;\n return listLevel;\n };\n /**\n * @private\n */\n SfdtExport.prototype.destroy = function () {\n this.lists = undefined;\n this.endLine = undefined;\n this.endOffset = undefined;\n this.viewer = undefined;\n };\n return SfdtExport;\n}());\nexport { SfdtExport };\n","import { createElement, isNullOrUndefined, L10n, setCulture } from '@syncfusion/ej2-base';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nimport { CheckBox } from '@syncfusion/ej2-buttons';\n/**\n * The Hyperlink dialog is used to insert or edit hyperlink at selection.\n */\n/* tslint:disable:max-line-length */\nvar HyperlinkDialog = /** @class */ (function () {\n /**\n * @private\n */\n function HyperlinkDialog(viewer) {\n var _this = this;\n this.displayText = '';\n this.navigationUrl = undefined;\n this.bookmarkDropdown = undefined;\n this.bookmarkCheckbox = undefined;\n this.bookmarks = [];\n /**\n * @private\n */\n this.onKeyUpOnUrlBox = function (event) {\n if (event.keyCode === 13) {\n if (_this.displayTextBox.value !== '' && _this.urlTextBox.value !== '') {\n _this.onInsertHyperlink();\n }\n return;\n }\n var selectedText = _this.owner.selection.text;\n var urlValue = _this.urlTextBox.value;\n if (urlValue.substring(0, 4).toLowerCase() === 'www.') {\n _this.urlTextBox.value = 'http://' + urlValue;\n }\n if (_this.displayText === '') {\n _this.displayTextBox.value = urlValue;\n }\n _this.enableOrDisableInsertButton();\n };\n /**\n * @private\n */\n this.onKeyUpOnDisplayBox = function () {\n _this.displayText = _this.displayTextBox.value;\n _this.enableOrDisableInsertButton();\n };\n /**\n * @private\n */\n this.onInsertButtonClick = function () {\n _this.onInsertHyperlink();\n };\n /**\n * @private\n */\n this.onCancelButtonClick = function () {\n _this.owner.dialog.hide();\n _this.clearValue();\n };\n /**\n * @private\n */\n this.loadHyperlinkDialog = function () {\n _this.owner.updateFocus();\n _this.bookmarks = [];\n for (var i = 0; i < _this.owner.bookmarks.keys.length; i++) {\n var bookmark = _this.owner.bookmarks.keys[i];\n if (bookmark.indexOf('_') !== 0) {\n _this.bookmarks.push(bookmark);\n }\n }\n var fieldBegin = _this.owner.selection.getHyperlinkField();\n if (!isNullOrUndefined(fieldBegin)) {\n if (!isNullOrUndefined(fieldBegin.fieldSeparator)) {\n var format = undefined;\n // tslint:disable-next-line:max-line-length\n var fieldObj = _this.owner.selection.getHyperlinkDisplayText(fieldBegin.fieldSeparator.line.paragraph, fieldBegin.fieldSeparator, fieldBegin.fieldEnd, false, format);\n _this.displayText = fieldObj.displayText;\n _this.displayTextBox.disabled = fieldObj.isNestedField;\n }\n _this.displayTextBox.value = _this.displayText;\n var link = _this.owner.selection.getLinkText(fieldBegin);\n _this.urlTextBox.value = _this.navigationUrl = link;\n _this.owner.dialog.header = _this.localObj.getConstant('Edit Hyperlink');\n }\n else {\n _this.displayText = _this.owner.selection.getText(true);\n if (_this.displayText !== '') {\n if (_this.displayText.indexOf(String.fromCharCode(65532)) !== -1 ||\n _this.displayText.indexOf('\\r') !== -1 && (_this.displayText.lastIndexOf('\\r') !== -1 &&\n _this.displayText.slice(0, -1).indexOf('\\r') !== -1)) {\n _this.displayTextBox.value = '<>';\n _this.displayTextBox.disabled = true;\n }\n else {\n _this.displayTextBox.value = _this.displayText;\n }\n }\n }\n _this.bookmarkDiv.style.display = 'none';\n _this.addressText.style.display = 'block';\n _this.urlTextBox.style.display = 'block';\n _this.bookmarkCheckbox.checked = false;\n _this.bookmarkDropdown.dataSource = _this.owner.bookmarks.keys;\n _this.insertButton = document.getElementsByClassName('e-hyper-insert')[0];\n _this.enableOrDisableInsertButton();\n _this.urlTextBox.focus();\n if (_this.owner.selection.caret.style.display !== 'none') {\n _this.owner.selection.caret.style.display = 'none';\n }\n };\n /**\n * @private\n */\n this.closeHyperlinkDialog = function () {\n _this.clearValue();\n _this.owner.updateFocus();\n };\n /* tslint:disable:no-any */\n this.onUseBookmarkChange = function (args) {\n if (args.checked) {\n _this.bookmarkDiv.style.display = 'block';\n _this.bookmarkDropdown.dataSource = _this.bookmarks;\n _this.addressText.style.display = 'none';\n _this.urlTextBox.style.display = 'none';\n }\n else {\n _this.bookmarkDiv.style.display = 'none';\n _this.addressText.style.display = 'block';\n _this.urlTextBox.style.display = 'block';\n }\n };\n this.onBookmarkchange = function (args) {\n if (_this.bookmarkDropdown.value !== '') {\n _this.insertButton.disabled = false;\n }\n };\n this.owner = viewer;\n }\n /**\n * @private\n */\n HyperlinkDialog.prototype.getModuleName = function () {\n return 'HyperlinkDialog';\n };\n /**\n * @private\n */\n HyperlinkDialog.prototype.initHyperlinkDialog = function (localValue) {\n var instance = this;\n var id = this.owner.owner.containerId + '_insert_hyperlink';\n this.target = createElement('div', { id: id, className: 'e-de-hyperlink' });\n var container = createElement('div');\n var displayText = createElement('div', { className: 'e-de-hyperlink-dlg-title', innerHTML: localValue.getConstant('Text to display') });\n this.displayTextBox = createElement('input', { id: this.owner.owner.containerId + '_display_text', className: 'e-input e-de-hyperlink-dlg-input' });\n this.displayTextBox.addEventListener('keyup', instance.onKeyUpOnDisplayBox);\n container.appendChild(displayText);\n container.appendChild(this.displayTextBox);\n this.addressText = createElement('div', { className: 'e-de-hyperlink-dlg-title', innerHTML: localValue.getConstant('Address') });\n this.urlTextBox = createElement('input', { id: this.owner.owner.containerId + '_url_text', className: 'e-input e-de-hyperlink-dlg-input', attrs: { autofocus: 'true' } });\n this.urlTextBox.addEventListener('input', instance.onKeyUpOnUrlBox);\n this.urlTextBox.addEventListener('keyup', instance.onKeyUpOnUrlBox);\n container.appendChild(this.addressText);\n container.appendChild(this.urlTextBox);\n this.bookmarkDiv = createElement('div', { styles: 'display:none;' });\n var bookmarkText = createElement('div', { className: 'e-de-hyperlink-dlg-title', innerHTML: localValue.getConstant('Bookmark') });\n var bookmarkTextElement = createElement('div', { className: 'e-de-hyperlink-dlg-bookmark' });\n // tslint:disable-next-line:max-line-length\n var bookmarkValue = createElement('input', { id: 'e-de-hyperlink-dlg-bookmark-value' });\n bookmarkTextElement.appendChild(bookmarkValue);\n // tslint:disable-next-line:max-line-length\n this.bookmarkDropdown = new DropDownList({ dataSource: [], change: this.onBookmarkchange, popupHeight: '230px', width: '230px', noRecordsTemplate: localValue.getConstant('No bookmarks found') });\n this.bookmarkDropdown.appendTo(bookmarkValue);\n this.bookmarkDiv.appendChild(bookmarkText);\n this.bookmarkDiv.appendChild(bookmarkTextElement);\n container.appendChild(this.bookmarkDiv);\n // tslint:disable-next-line:max-line-length\n var bookmarkCheckDiv = createElement('div', { className: 'e-de-hyperlink-bookmark-check e-de-hyperlink-dlg-title' });\n var bookmarkCheck = createElement('input', { attrs: { type: 'checkbox' }, id: this.target.id + '_bookmark', className: this.target.id + '_bookmarkcheck' });\n bookmarkCheckDiv.appendChild(bookmarkCheck);\n this.bookmarkCheckbox = new CheckBox({ label: localValue.getConstant('Use bookmarks'), change: this.onUseBookmarkChange });\n this.bookmarkCheckbox.appendTo(bookmarkCheck);\n container.appendChild(bookmarkCheckDiv);\n this.target.appendChild(container);\n };\n /**\n * @private\n */\n HyperlinkDialog.prototype.show = function () {\n this.localObj = new L10n('documenteditor', this.owner.owner.defaultLocale);\n this.localObj.setLocale(this.owner.owner.locale);\n setCulture(this.owner.owner.locale);\n if (!this.target) {\n this.initHyperlinkDialog(this.localObj);\n }\n this.owner.dialog.header = this.localObj.getConstant('Insert Hyperlink');\n this.owner.dialog.height = 'auto';\n this.owner.dialog.width = 'auto';\n this.owner.dialog.content = this.target;\n this.owner.dialog.buttons = [{\n click: this.onInsertButtonClick,\n buttonModel: { content: this.localObj.getConstant('Ok'), cssClass: 'e-flat e-hyper-insert', isPrimary: true }\n },\n {\n click: this.onCancelButtonClick,\n buttonModel: { content: this.localObj.getConstant('Cancel'), cssClass: 'e-flat e-hyper-cancel' }\n }];\n this.owner.dialog.dataBind();\n this.owner.dialog.beforeOpen = this.loadHyperlinkDialog;\n this.owner.dialog.close = this.closeHyperlinkDialog;\n this.owner.dialog.show();\n };\n /**\n * @private\n */\n HyperlinkDialog.prototype.hide = function () {\n this.closeHyperlinkDialog();\n };\n HyperlinkDialog.prototype.enableOrDisableInsertButton = function () {\n if (!isNullOrUndefined(this.insertButton)) {\n // tslint:disable-next-line:max-line-length\n this.insertButton.disabled = (this.urlTextBox.value === '' || this.displayTextBox.value === '');\n }\n };\n /**\n * @private\n */\n HyperlinkDialog.prototype.onInsertHyperlink = function () {\n var displayText = this.displayTextBox.value.trim();\n var address = this.urlTextBox.value.trim();\n var isBookmark = false;\n if (!isNullOrUndefined(this.bookmarkDropdown.value) && this.bookmarkDropdown.value !== '') {\n address = this.bookmarkDropdown.value;\n isBookmark = true;\n }\n if (address === '') {\n this.owner.dialog.hide();\n return;\n }\n if (displayText === '' && address !== '') {\n displayText = address;\n }\n else {\n displayText = this.displayTextBox.value;\n }\n if (!isNullOrUndefined(this.navigationUrl)) {\n this.owner.owner.editorModule.editHyperlink(this.owner.selection, address, displayText, isBookmark);\n }\n else {\n var remove = this.owner.selection.text !== displayText && !this.displayTextBox.disabled;\n this.owner.owner.editorModule.insertHyperlink(address, displayText, remove, isBookmark);\n }\n this.owner.dialog.hide();\n this.navigationUrl = undefined;\n };\n /* tslint:enable:no-any */\n /**\n * @private\n */\n HyperlinkDialog.prototype.clearValue = function () {\n this.displayTextBox.value = '';\n this.urlTextBox.value = '';\n this.displayText = '';\n this.displayTextBox.disabled = false;\n this.bookmarks = [];\n };\n /**\n * @private\n */\n HyperlinkDialog.prototype.destroy = function () {\n if (this.displayTextBox) {\n this.displayTextBox.innerHTML = '';\n this.displayTextBox = undefined;\n }\n if (this.urlTextBox) {\n this.urlTextBox.parentElement.removeChild(this.urlTextBox);\n this.urlTextBox = undefined;\n }\n this.owner = undefined;\n if (!isNullOrUndefined(this.target)) {\n if (this.target.parentElement) {\n this.target.parentElement.removeChild(this.target);\n }\n this.target.innerHTML = '';\n this.target = undefined;\n }\n };\n return HyperlinkDialog;\n}());\nexport { HyperlinkDialog };\n","import { NumericTextBox } from '@syncfusion/ej2-inputs';\nimport { L10n, createElement, setCulture, isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * The Table dialog is used to insert table at selection.\n */\nvar TableDialog = /** @class */ (function () {\n /**\n * @private\n */\n function TableDialog(viewer) {\n var _this = this;\n /**\n * @private\n */\n this.keyUpInsertTable = function (event) {\n if (event.keyCode === 13) {\n if (_this.rowsCountBox.value !== '' && _this.columnsCountBox.value !== '') {\n _this.onInsertTableClick();\n }\n }\n };\n /**\n * @private\n */\n this.onCancelButtonClick = function () {\n _this.owner.dialog.hide();\n };\n /**\n * @private\n */\n this.onInsertTableClick = function () {\n var rowCount = _this.rowValueTextBox.value;\n var columnCount = _this.columnValueTexBox.value;\n if (!(isNullOrUndefined(rowCount) && isNullOrUndefined(columnCount))) {\n _this.owner.owner.editor.insertTable(rowCount, columnCount);\n }\n _this.owner.dialog.hide();\n };\n this.owner = viewer;\n }\n TableDialog.prototype.getModuleName = function () {\n return 'TableDialog';\n };\n /**\n * @private\n */\n TableDialog.prototype.initTableDialog = function (localValue) {\n var instance = this;\n var id = this.owner.owner.containerId + '_insert_Table';\n this.target = createElement('div', { id: id, className: 'e-de-insert-table' });\n var parentDiv = createElement('div');\n var columnContainer = createElement('div', {\n className: 'e-de-insert-table-dlg-sub-header', innerHTML: localValue.getConstant('Column Size')\n });\n var columnValue = createElement('div', { className: 'e-de-insert-table-dlg-input' });\n this.columnsCountBox = createElement('input', {\n attrs: { type: 'text' }, id: this.owner.owner.containerId + '_column'\n });\n columnValue.appendChild(this.columnsCountBox);\n var rowContainer = createElement('div', {\n className: 'e-de-insert-table-dlg-sub-header', innerHTML: localValue.getConstant('Row Size')\n });\n var rowValue = createElement('div', { className: 'e-de-insert-table-dlg-input' });\n this.rowsCountBox = createElement('input', {\n attrs: { type: 'text' }, id: this.owner.owner.containerId + 'row'\n });\n rowValue.appendChild(this.rowsCountBox);\n parentDiv.appendChild(columnContainer);\n parentDiv.appendChild(columnValue);\n parentDiv.appendChild(rowContainer);\n parentDiv.appendChild(rowValue);\n this.target.appendChild(parentDiv);\n this.columnsCountBox.addEventListener('keyup', instance.keyUpInsertTable);\n this.rowsCountBox.addEventListener('keyup', instance.keyUpInsertTable);\n this.rowValueTextBox = new NumericTextBox({\n format: '#',\n value: 2,\n min: 1,\n max: 32767,\n enablePersistence: false\n });\n this.rowValueTextBox.appendTo(this.rowsCountBox);\n this.columnValueTexBox = new NumericTextBox({\n format: '#',\n value: 2,\n min: 1,\n max: 63,\n enablePersistence: false\n });\n this.columnValueTexBox.appendTo(this.columnsCountBox);\n };\n /**\n * @private\n */\n TableDialog.prototype.show = function () {\n var localValue = new L10n('documenteditor', this.owner.owner.defaultLocale);\n localValue.setLocale(this.owner.owner.locale);\n setCulture(this.owner.owner.locale);\n if (!this.target) {\n this.initTableDialog(localValue);\n }\n if (this.owner.selection.caret.style.display !== 'none') {\n this.owner.selection.caret.style.display = 'none';\n }\n this.owner.dialog.header = localValue.getConstant('Insert Table');\n this.owner.dialog.height = 'auto';\n this.owner.dialog.width = 'auto';\n this.owner.dialog.content = this.target;\n this.owner.dialog.beforeOpen = this.owner.updateFocus;\n this.owner.dialog.buttons = [{\n click: this.onInsertTableClick,\n buttonModel: { content: localValue.getConstant('Ok'), cssClass: 'e-flat e-table-ok', isPrimary: true }\n },\n {\n click: this.onCancelButtonClick,\n buttonModel: { content: localValue.getConstant('Cancel'), cssClass: 'e-flat e-table-cancel' }\n }];\n this.rowValueTextBox.value = 2;\n this.columnValueTexBox.value = 2;\n this.owner.dialog.close = this.owner.updateFocus;\n this.owner.dialog.dataBind();\n this.owner.dialog.show();\n };\n /**\n * @private\n */\n TableDialog.prototype.destroy = function () {\n if (this.columnsCountBox) {\n if (this.columnsCountBox.parentElement) {\n this.columnsCountBox.parentElement.removeChild(this.columnsCountBox);\n }\n this.columnsCountBox = undefined;\n }\n if (this.rowsCountBox) {\n if (this.rowsCountBox.parentElement) {\n this.rowsCountBox.parentElement.removeChild(this.rowsCountBox);\n }\n this.rowsCountBox = undefined;\n }\n if (this.columnValueTexBox) {\n this.columnValueTexBox.destroy();\n this.columnValueTexBox = undefined;\n }\n if (this.rowValueTextBox) {\n this.rowValueTextBox.destroy();\n this.rowValueTextBox = undefined;\n }\n this.columnsCountBox = undefined;\n this.rowsCountBox = undefined;\n this.owner = undefined;\n if (!isNullOrUndefined(this.target)) {\n if (this.target.parentElement) {\n this.target.parentElement.removeChild(this.target);\n }\n for (var i = 0; i < this.target.childNodes.length; i++) {\n this.target.removeChild(this.target.childNodes[i]);\n i--;\n }\n this.target = undefined;\n }\n };\n return TableDialog;\n}());\nexport { TableDialog };\n","import { ListView } from '@syncfusion/ej2-lists';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { createElement, L10n, setCulture } from '@syncfusion/ej2-base';\n/**\n * The Bookmark dialog is used to add, navigate or delete bookmarks.\n */\nvar BookmarkDialog = /** @class */ (function () {\n /**\n * @private\n */\n function BookmarkDialog(viewer) {\n var _this = this;\n this.addBookmark = function () {\n _this.owner.owner.editorModule.insertBookmark(_this.textBoxInput.value);\n _this.owner.dialog.hide();\n };\n /* tslint:disable:no-any */\n this.selectHandler = function (args) {\n _this.textBoxInput.value = args.text;\n /* tslint:disable:no-any */\n var value = document.getElementById('bookmark_text_box');\n value.setSelectionRange(0, args.text.length);\n value.focus();\n };\n this.gotoBookmark = function () {\n _this.owner.selection.selectBookmark(_this.textBoxInput.value);\n };\n this.deleteBookmark = function () {\n _this.owner.owner.editorModule.deleteBookmark(_this.textBoxInput.value);\n _this.show();\n };\n this.owner = viewer;\n }\n /**\n * @private\n */\n BookmarkDialog.prototype.getModuleName = function () {\n return 'BookmarkDialog';\n };\n /**\n * @private\n */\n BookmarkDialog.prototype.initBookmarkDialog = function (localValue, bookmarks) {\n var instance = this;\n var id = this.owner.owner.containerId + '_insert_bookmark';\n this.target = createElement('div', { id: id, className: 'e-de-bookmark' });\n var headerValue = localValue.getConstant('Bookmark name:');\n var dlgFields = createElement('div', { innerHTML: headerValue, className: 'e-bookmark-dlgfields' });\n this.target.appendChild(dlgFields);\n var commonDiv = createElement('div', { className: 'e-bookmark-common' });\n this.target.appendChild(commonDiv);\n var searchDiv = createElement('div', { className: 'e-bookmark-list' });\n commonDiv.appendChild(searchDiv);\n var textBoxDiv = createElement('div', { className: 'e-bookmark-textboxdiv' });\n searchDiv.appendChild(textBoxDiv);\n // tslint:disable-next-line:max-line-length\n this.textBoxInput = createElement('input', { className: 'e-input e-bookmark-textbox-input', id: 'bookmark_text_box' });\n this.textBoxInput.setAttribute('type', 'text');\n textBoxDiv.appendChild(this.textBoxInput);\n var listviewDiv = createElement('div', { className: 'e-bookmark-listViewDiv', id: 'bookmark_listview' });\n searchDiv.appendChild(listviewDiv);\n var arts = this.owner.bookmarks.keys;\n this.listviewInstance = new ListView({\n dataSource: bookmarks,\n cssClass: 'e-bookmark-listview',\n });\n this.listviewInstance.appendTo(listviewDiv);\n this.listviewInstance.addEventListener('select', this.selectHandler);\n var buttonDiv = createElement('div', { className: 'e-bookmark-button' });\n commonDiv.appendChild(buttonDiv);\n var addbuttonDiv = createElement('div', { className: 'e-bookmark-addbutton' });\n buttonDiv.appendChild(addbuttonDiv);\n var addButtonElement = createElement('button', { innerHTML: 'Add', id: 'add' });\n addbuttonDiv.appendChild(addButtonElement);\n var addbutton = new Button({ cssClass: 'e-button-custom' });\n addbutton.appendTo(addButtonElement);\n addButtonElement.addEventListener('click', this.addBookmark);\n var deleteButtonDiv = createElement('div', { className: 'e-bookmark-deletebutton' });\n buttonDiv.appendChild(deleteButtonDiv);\n var deleteButtonElement = createElement('button', { innerHTML: 'Delete', id: 'delete' });\n deleteButtonDiv.appendChild(deleteButtonElement);\n var deletebutton = new Button({ cssClass: 'e-button-custom' });\n deletebutton.appendTo(deleteButtonElement);\n deleteButtonElement.addEventListener('click', this.deleteBookmark);\n var gotoButtonDiv = createElement('div', { className: 'e-bookmark-gotobutton' });\n buttonDiv.appendChild(gotoButtonDiv);\n var gotoButtonElement = createElement('button', { innerHTML: 'Go To', id: 'goto' });\n gotoButtonDiv.appendChild(gotoButtonElement);\n var gotobutton = new Button({ cssClass: 'e-button-custom' });\n gotobutton.appendTo(gotoButtonElement);\n gotoButtonElement.addEventListener('click', this.gotoBookmark);\n };\n /**\n * @private\n */\n BookmarkDialog.prototype.show = function () {\n var bookmarks = this.owner.getBookmarks();\n var localObj = new L10n('documenteditor', this.owner.owner.defaultLocale);\n localObj.setLocale(this.owner.owner.locale);\n setCulture(this.owner.owner.locale);\n // if (!this.target) {\n this.initBookmarkDialog(localObj, bookmarks);\n //}\n this.owner.dialog.header = 'Bookmark';\n this.owner.dialog.height = 'auto';\n this.owner.dialog.width = 'auto';\n this.owner.dialog.content = this.target;\n this.owner.dialog.beforeOpen = this.owner.updateFocus;\n this.owner.dialog.close = this.owner.updateFocus;\n this.owner.dialog.buttons = [{\n click: this.removeObjects.bind(this),\n buttonModel: { content: localObj.getConstant('Cancel'), cssClass: 'e-flat e-hyper-insert', isPrimary: true }\n }];\n this.owner.dialog.dataBind();\n this.owner.dialog.show();\n };\n BookmarkDialog.prototype.removeObjects = function () {\n this.owner.dialog.hide();\n };\n /**\n * @private\n */\n BookmarkDialog.prototype.destroy = function () {\n if (this.textBoxInput) {\n this.textBoxInput.remove();\n this.textBoxInput = undefined;\n }\n if (this.listviewInstance) {\n this.listviewInstance.destroy();\n this.listviewInstance = undefined;\n }\n };\n return BookmarkDialog;\n}());\nexport { BookmarkDialog };\n","import { L10n, setCulture, createElement, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { CheckBox, Button } from '@syncfusion/ej2-buttons';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nimport { NumericTextBox } from '@syncfusion/ej2-inputs';\nimport { ListView } from '@syncfusion/ej2-lists';\n/**\n * The Table of contents dialog is used to insert or edit table of contents at selection.\n */\nvar TableOfContentsDialog = /** @class */ (function () {\n /**\n * @private\n */\n function TableOfContentsDialog(viewer) {\n var _this = this;\n /**\n * @private\n */\n this.loadTableofContentDialog = function () {\n _this.owner.updateFocus();\n _this.pageNumber.checked = true;\n _this.rightAlign.disabled = false;\n _this.rightAlign.checked = true;\n _this.tabLeader.enabled = true;\n _this.hyperlink.checked = true;\n _this.style.checked = true;\n _this.outline.checked = true;\n _this.outline.disabled = false;\n _this.showLevel.enabled = true;\n };\n /**\n * @private\n */\n this.closeTableOfContentDialog = function () {\n _this.unWireEventsAndBindings();\n _this.owner.updateFocus();\n };\n /**\n * @private\n */\n this.onCancelButtonClick = function () {\n _this.owner.dialog.hide();\n _this.unWireEventsAndBindings();\n };\n /* tslint:disable:no-any */\n this.selectHandler = function (args) {\n _this.textBoxInput.value = args.text;\n /* tslint:disable:no-any */\n var value = document.getElementById('toclist');\n value.setSelectionRange(0, args.text.length);\n value.focus();\n };\n this.showStyleDialog = function () {\n if (!isNullOrUndefined(_this.owner.owner.styleDialogModule)) {\n _this.owner.owner.styleDialogModule.show(_this.textBoxInput.value);\n }\n };\n this.changeShowLevelValue = function (event) {\n var levels = event.value;\n var values = [];\n switch (levels) {\n case 1:\n values = ['1', null, null, null, null, null, null, null, null];\n _this.changeByValue(values);\n break;\n case 2:\n values = ['1', '2', null, null, null, null, null, null, null];\n _this.changeByValue(values);\n break;\n case 3:\n values = ['1', '2', '3', null, null, null, null, null, null];\n _this.changeByValue(values);\n break;\n case 4:\n values = ['1', '2', '3', '4', null, null, null, null, null];\n _this.changeByValue(values);\n break;\n case 5:\n values = ['1', '2', '3', '4', '5', null, null, null, null];\n _this.changeByValue(values);\n break;\n case 6:\n values = ['1', '2', '3', '4', '5', '6', null, null, null];\n _this.changeByValue(values);\n break;\n case 7:\n values = ['1', '2', '3', '4', '5', '6', '7', null, null];\n _this.changeByValue(values);\n break;\n case 8:\n values = ['1', '2', '3', '4', '5', '6', '7', '8', null];\n _this.changeByValue(values);\n break;\n case 9:\n values = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];\n _this.changeByValue(values);\n break;\n }\n };\n this.changeByValue = function (headings) {\n _this.heading1.value = headings[0];\n _this.heading2.value = headings[1];\n _this.heading3.value = headings[2];\n _this.heading4.value = headings[3];\n _this.heading5.value = headings[4];\n _this.heading6.value = headings[5];\n _this.heading7.value = headings[6];\n _this.heading8.value = headings[7];\n _this.heading9.value = headings[8];\n };\n this.reset = function () {\n _this.showLevel.enabled = true;\n _this.showLevel.value = 3;\n _this.outline.disabled = false;\n _this.outline.checked = true;\n var values = ['1', '2', '3', null, null, null, null, null, null];\n _this.changeByValue(values);\n _this.normal.value = null;\n };\n this.changeStyle = function (args) {\n var headingValue = args.srcElement.value;\n var value = _this.getElementValue(args.srcElement);\n if (headingValue !== value && headingValue !== '') {\n _this.showLevel.enabled = false;\n }\n else {\n _this.showLevel.enabled = true;\n _this.checkLevel();\n }\n };\n this.changeHeadingStyle = function (args) {\n var headingValue = args.srcElement.value;\n if (headingValue === '') {\n _this.showLevel.enabled = true;\n }\n else {\n _this.showLevel.enabled = false;\n }\n if (_this.normal === args.srcElement) {\n _this.outline.checked = false;\n _this.outline.disabled = true;\n }\n };\n /**\n * @private\n */\n this.changePageNumberValue = function (args) {\n if (args.checked) {\n _this.rightAlign.checked = true;\n _this.rightAlign.disabled = false;\n _this.tabLeader.enabled = true;\n }\n else {\n _this.rightAlign.disabled = true;\n _this.tabLeader.enabled = false;\n }\n };\n /**\n * @private\n */\n this.changeRightAlignValue = function (args) {\n if (args.checked) {\n _this.tabLeader.enabled = true;\n }\n else {\n _this.tabLeader.enabled = false;\n }\n };\n /**\n * @private\n */\n this.changeStyleValue = function (args) {\n if (args.checked) {\n _this.heading1.disabled = false;\n _this.heading2.disabled = false;\n _this.heading3.disabled = false;\n _this.heading4.disabled = false;\n _this.heading5.disabled = false;\n _this.heading6.disabled = false;\n _this.heading7.disabled = false;\n _this.heading8.disabled = false;\n _this.heading9.disabled = false;\n _this.normal.disabled = false;\n }\n else {\n _this.heading1.disabled = true;\n _this.heading2.disabled = true;\n _this.heading3.disabled = true;\n _this.heading4.disabled = true;\n _this.heading5.disabled = true;\n _this.heading6.disabled = true;\n _this.heading7.disabled = true;\n _this.heading8.disabled = true;\n _this.heading9.disabled = true;\n _this.normal.disabled = true;\n }\n };\n /**\n * @private\n */\n this.applyTableOfContentProperties = function () {\n var tocSettings = {\n startLevel: 1,\n endLevel: _this.showLevel.value,\n includeHyperlink: _this.hyperlink.checked,\n includePageNumber: _this.pageNumber.checked,\n rightAlign: _this.rightAlign.checked,\n tabLeader: _this.tabLeader.value,\n includeOutlineLevels: _this.outline.checked\n };\n _this.applyLevelSetting(tocSettings);\n _this.owner.owner.editorModule.insertTableOfContents(tocSettings);\n _this.owner.dialog.hide();\n };\n /**\n * @private\n */\n this.unWireEventsAndBindings = function () {\n _this.pageNumber.checked = false;\n _this.rightAlign.checked = false;\n _this.tabLeader.value = '';\n _this.hyperlink.checked = false;\n _this.style.checked = false;\n _this.outline.checked = false;\n _this.normal.value = '';\n };\n this.owner = viewer;\n }\n TableOfContentsDialog.prototype.getModuleName = function () {\n return 'TableOfContentsDialog';\n };\n /*tslint:disable max-func-body-length*/\n /**\n * @private\n */\n TableOfContentsDialog.prototype.initTableOfContentDialog = function (locale) {\n var instance = this;\n var ownerId = this.owner.owner.containerId;\n var id = ownerId + '_toc_dialog';\n this.target = createElement('div', { id: id, className: 'e-de-toc-dlg-container' });\n this.owner.owner.element.appendChild(this.target);\n // tslint:disable-next-line:max-line-length\n var generalDiv = createElement('div', { id: 'general_div', className: 'e-de-toc-dlg-sub-container' });\n this.target.appendChild(generalDiv);\n // tslint:disable-next-line:max-line-length\n var genLabel = createElement('div', { id: ownerId + '_genLabel', className: 'e-de-toc-dlg-main-heading', styles: 'margin-bottom: 13px;', innerHTML: locale.getConstant('General') });\n generalDiv.appendChild(genLabel);\n // tslint:disable-next-line:max-line-length\n var leftGeneralDiv = createElement('div', { id: 'left_general', styles: 'float:left;position:relative;' });\n generalDiv.appendChild(leftGeneralDiv);\n // tslint:disable-next-line:max-line-length\n var rightGeneralDiv = createElement('div', { styles: 'position:relative;', className: 'e-de-toc-dlg-right-general-div' });\n generalDiv.appendChild(rightGeneralDiv);\n // tslint:disable-next-line:max-line-length\n var leftBottomGeneralDiv = createElement('div', { id: 'leftBottom_general', styles: 'float:left;position:absolute;top:210px;' });\n generalDiv.appendChild(leftBottomGeneralDiv);\n // tslint:disable-next-line:max-line-length\n var rightBottomGeneralDiv = createElement('div', { className: 'e-de-toc-dlg-right-sub-container', styles: 'float:right;' });\n generalDiv.appendChild(rightBottomGeneralDiv);\n // tslint:disable-next-line:max-line-length\n var pageNumberDiv = createElement('div', { id: 'pageNumber_div', className: 'e-de-toc-dlg-sub-container' });\n var pageNumber = createElement('input', {\n attrs: { 'type': 'checkbox' }, id: this.target.id + '_pageNumber'\n });\n pageNumberDiv.appendChild(pageNumber);\n // tslint:disable-next-line:max-line-length\n var rightAlignDiv = createElement('div', { id: 'rightAlign_div', className: 'e-de-toc-dlg-sub-container' });\n var rightAlign = createElement('input', {\n attrs: { 'type': 'checkbox' }, id: this.target.id + '_rightAlign'\n });\n rightAlignDiv.appendChild(rightAlign);\n // tslint:disable-next-line:max-line-length\n this.pageNumber = new CheckBox({ label: locale.getConstant('Show page numbers'), checked: true, change: this.changePageNumberValue });\n // tslint:disable-next-line:max-line-length\n this.rightAlign = new CheckBox({ label: locale.getConstant('Right align page numbers'), checked: true, change: this.changeRightAlignValue });\n this.pageNumber.appendTo(pageNumber);\n this.rightAlign.appendTo(rightAlign);\n var tabDiv = createElement('div', { id: 'tab_div', className: 'e-de-toc-dlg-tab-div' });\n // tslint:disable-next-line:max-line-length\n var tabLeaderLabelDiv = createElement('div', { id: 'tabLeaderLabel_div' });\n // tslint:disable-next-line:max-line-length\n var tabLeaderLabel = createElement('label', { id: ownerId + '_tabLeaderLabel', className: 'e-de-toc-dlg-heading', innerHTML: locale.getConstant('Tab leader:') });\n tabLeaderLabelDiv.appendChild(tabLeaderLabel);\n var tabLeaderDiv = createElement('div', { id: 'tabLeader_div' });\n var tabLeader = createElement('select', {\n id: ownerId + '_tabLeader',\n innerHTML: ''\n });\n tabLeaderDiv.appendChild(tabLeader);\n tabDiv.appendChild(tabLeaderLabelDiv);\n tabDiv.appendChild(tabLeaderDiv);\n leftGeneralDiv.appendChild(pageNumberDiv);\n leftGeneralDiv.appendChild(rightAlignDiv);\n leftGeneralDiv.appendChild(tabDiv);\n this.tabLeader = new DropDownList({ width: 210 });\n this.tabLeader.appendTo(tabLeader);\n var hyperlink = createElement('input', {\n attrs: { 'type': 'checkbox' }, id: this.target.id + '_hyperlink'\n });\n rightGeneralDiv.appendChild(hyperlink);\n this.hyperlink = new CheckBox({ label: locale.getConstant('Use hyperlinks instead of page numbers'), checked: true });\n this.hyperlink.appendTo(hyperlink);\n // tslint:disable-next-line:max-line-length\n var showDiv = createElement('div', { id: 'show_div', className: 'e-de-toc-dlg-style-label' });\n // tslint:disable-next-line:max-line-length\n var showLevelLabelDiv = createElement('div', { id: 'showLevelLabel_div', className: 'e-de-toc-dlg-show-level-div' });\n // tslint:disable-next-line:max-line-length\n var showLevelLabel = createElement('label', { id: ownerId + '_showLevelLabel', className: 'e-de-toc-dlg-heading', innerHTML: locale.getConstant('Show levels:') });\n showLevelLabelDiv.appendChild(showLevelLabel);\n // tslint:disable-next-line:max-line-length\n var showLevelDiv = createElement('div', { id: 'showLevel_div', className: 'e-de-toc-dlg-showlevel-div' });\n // tslint:disable-next-line:max-line-length\n var showLevel = createElement('input', { id: ownerId + '_showLevel', attrs: { 'type': 'text' } });\n showLevelDiv.appendChild(showLevel);\n showDiv.appendChild(showLevelLabelDiv);\n showDiv.appendChild(showLevelDiv);\n rightGeneralDiv.appendChild(showDiv);\n this.showLevel = new NumericTextBox({ format: '#', value: 3, min: 1, max: 9, width: 210, change: this.changeShowLevelValue });\n this.showLevel.appendTo(showLevel);\n // tslint:disable-next-line:max-line-length\n var buildTableDiv = createElement('div', { id: 'buildTable_div', className: 'e-de-toc-dlg-sub-container' });\n // tslint:disable-next-line:max-line-length\n var buildTableLabel = createElement('div', { id: ownerId + '_buildTableLabel', className: 'e-de-toc-dlg-main-heading e-de-toc-dlg-build-table', styles: 'margin-bottom: 13px;', innerHTML: locale.getConstant('Build table of contents from:') });\n leftBottomGeneralDiv.appendChild(buildTableDiv);\n leftBottomGeneralDiv.appendChild(buildTableLabel);\n var style = createElement('input', {\n attrs: { 'type': 'checkbox' }, id: this.target.id + '_style',\n });\n leftBottomGeneralDiv.appendChild(style);\n this.style = new CheckBox({ label: locale.getConstant('Styles'), checked: true, change: this.changeStyleValue });\n this.style.appendTo(style);\n var table = createElement('TABLE', { styles: 'margin-top:3px;' });\n var tr1 = createElement('tr');\n var td1 = createElement('td', { styles: 'width:120px;padding-left:10px;' });\n var availableLabel = createElement('label', {\n // tslint:disable-next-line:max-line-length\n innerHTML: locale.getConstant('Available Styles:'), className: 'e-de-toc-dlg-main-heading e-de-toc-dlg-sub-level-heading', id: this.target.id + '_availableLabel'\n });\n td1.appendChild(availableLabel);\n var td2 = createElement('td');\n var tocLabel = createElement('label', {\n innerHTML: locale.getConstant('TOC level:'), className: 'e-de-toc-dlg-main-heading e-de-toc-dlg-sub-level-heading',\n id: this.target.id + '_tocLabel'\n });\n td2.appendChild(tocLabel);\n tr1.appendChild(td1);\n tr1.appendChild(td2);\n table.appendChild(tr1);\n // tslint:disable-next-line:max-line-length\n var tableDiv = createElement('div', { id: 'table_div', className: 'e-de-toc-table-div' });\n var table1 = createElement('TABLE');\n var tr2 = createElement('tr');\n var td3 = createElement('td');\n var heading1Label = createElement('label', {\n innerHTML: locale.getConstant('Heading 1'),\n className: 'e-de-toc-dlg-sub-heading', id: this.target.id + '_heading1Label'\n });\n td3.appendChild(heading1Label);\n var td4 = createElement('td');\n this.heading1 = createElement('input', { id: '_heading1', className: 'e-input e-de-toc-dlg-toc-level' });\n this.heading1.value = '1';\n this.heading1.addEventListener('keyup', this.changeStyle);\n td4.appendChild(this.heading1);\n tr2.appendChild(td3);\n tr2.appendChild(td4);\n var tr3 = createElement('tr');\n var td5 = createElement('td');\n var heading2Label = createElement('label', {\n innerHTML: locale.getConstant('Heading 2'),\n className: 'e-de-toc-dlg-sub-heading', id: this.target.id + '_heading2Label'\n });\n td5.appendChild(heading2Label);\n var td6 = createElement('td');\n this.heading2 = createElement('input', { id: '_heading2', className: 'e-input e-de-toc-dlg-toc-level' });\n this.heading2.value = '2';\n this.heading2.addEventListener('keyup', this.changeStyle);\n td6.appendChild(this.heading2);\n tr3.appendChild(td5);\n tr3.appendChild(td6);\n var tr4 = createElement('tr');\n var td7 = createElement('td');\n var heading3Label = createElement('label', {\n innerHTML: locale.getConstant('Heading 3'),\n className: 'e-de-toc-dlg-sub-heading', id: this.target.id + '_heading3Label'\n });\n td7.appendChild(heading3Label);\n var td8 = createElement('td');\n this.heading3 = createElement('input', { id: '_heading3', className: 'e-input e-de-toc-dlg-toc-level' });\n this.heading3.value = '3';\n this.heading3.addEventListener('keyup', this.changeStyle);\n td8.appendChild(this.heading3);\n tr4.appendChild(td7);\n tr4.appendChild(td8);\n var tr5 = createElement('tr');\n var td9 = createElement('td');\n var heading4Label = createElement('label', {\n innerHTML: locale.getConstant('Heading 4'),\n className: 'e-de-toc-dlg-sub-heading', id: this.target.id + '_heading4Label'\n });\n td9.appendChild(heading4Label);\n var td10 = createElement('td');\n this.heading4 = createElement('input', { id: '_heading4', className: 'e-input e-de-toc-dlg-toc-level' });\n this.heading4.addEventListener('keyup', this.changeStyle);\n td10.appendChild(this.heading4);\n tr5.appendChild(td9);\n tr5.appendChild(td10);\n var tr6 = createElement('tr');\n var td11 = createElement('td');\n var heading5Label = createElement('label', {\n innerHTML: locale.getConstant('Heading 5'),\n className: 'e-de-toc-dlg-sub-heading', id: this.target.id + '_heading5Label'\n });\n td11.appendChild(heading5Label);\n var td12 = createElement('td');\n this.heading5 = createElement('input', { id: '_heading5', className: 'e-input e-de-toc-dlg-toc-level' });\n this.heading5.addEventListener('keyup', this.changeStyle);\n td12.appendChild(this.heading5);\n tr6.appendChild(td11);\n tr6.appendChild(td12);\n var tr7 = createElement('tr');\n var td13 = createElement('td');\n var heading6Label = createElement('label', {\n innerHTML: locale.getConstant('Heading 6'),\n className: 'e-de-toc-dlg-sub-heading', id: this.target.id + '_heading6Label'\n });\n td13.appendChild(heading6Label);\n var td14 = createElement('td');\n this.heading6 = createElement('input', { id: '_heading6', className: 'e-input e-de-toc-dlg-toc-level' });\n this.heading6.addEventListener('keyup', this.changeStyle);\n td14.appendChild(this.heading6);\n tr7.appendChild(td13);\n tr7.appendChild(td14);\n var tr8 = createElement('tr');\n var td15 = createElement('td');\n var heading7Label = createElement('label', {\n innerHTML: locale.getConstant('Heading 7'),\n className: 'e-de-toc-dlg-sub-heading', id: this.target.id + '_heading7Label'\n });\n td15.appendChild(heading7Label);\n var td16 = createElement('td');\n this.heading7 = createElement('input', { id: '_heading7', className: 'e-input e-de-toc-dlg-toc-level' });\n this.heading7.addEventListener('keyup', this.changeStyle);\n td16.appendChild(this.heading7);\n tr8.appendChild(td15);\n tr8.appendChild(td16);\n var tr9 = createElement('tr');\n var td17 = createElement('td');\n var heading8Label = createElement('label', {\n innerHTML: locale.getConstant('Heading 8'),\n className: 'e-de-toc-dlg-sub-heading', id: this.target.id + '_heading8Label'\n });\n td17.appendChild(heading8Label);\n var td18 = createElement('td');\n this.heading8 = createElement('input', { id: '_heading8', className: 'e-input e-de-toc-dlg-toc-level' });\n this.heading8.addEventListener('keyup', this.changeStyle);\n td18.appendChild(this.heading8);\n tr9.appendChild(td17);\n tr9.appendChild(td18);\n var tr10 = createElement('tr');\n var td19 = createElement('td');\n var heading9Label = createElement('label', {\n innerHTML: locale.getConstant('Heading 9'),\n className: 'e-de-toc-dlg-sub-heading', id: this.target.id + '_heading9Label'\n });\n td19.appendChild(heading9Label);\n var td20 = createElement('td');\n this.heading9 = createElement('input', { id: '_heading9', className: 'e-input e-de-toc-dlg-toc-level' });\n this.heading9.addEventListener('keyup', this.changeStyle);\n td20.appendChild(this.heading9);\n tr10.appendChild(td19);\n tr10.appendChild(td20);\n var tr12 = createElement('tr');\n var td23 = createElement('td');\n var normalLabel = createElement('label', {\n innerHTML: locale.getConstant('Normal'),\n className: 'e-de-toc-dlg-sub-heading', id: this.target.id + '_normalLabel'\n });\n td23.appendChild(normalLabel);\n var td24 = createElement('td');\n this.normal = createElement('input', { id: '_normal', className: 'e-input e-de-toc-dlg-toc-level' });\n this.normal.addEventListener('keyup', this.changeHeadingStyle);\n td24.appendChild(this.normal);\n tr12.appendChild(td23);\n tr12.appendChild(td24);\n table1.appendChild(tr2);\n table1.appendChild(tr3);\n table1.appendChild(tr4);\n table1.appendChild(tr5);\n table1.appendChild(tr6);\n table1.appendChild(tr7);\n table1.appendChild(tr8);\n table1.appendChild(tr9);\n table1.appendChild(tr10);\n table1.appendChild(tr12);\n tableDiv.appendChild(table1);\n var stylesLevelDiv = createElement('div', { className: 'e-de-toc-styles-table-div' });\n stylesLevelDiv.appendChild(table);\n stylesLevelDiv.appendChild(tableDiv);\n leftBottomGeneralDiv.appendChild(stylesLevelDiv);\n //leftBottomGeneralDiv.appendChild(table); leftBottomGeneralDiv.appendChild(tableDiv);\n var fieldsDiv = createElement('div', { id: 'fields_div', styles: 'display: flex;' });\n leftBottomGeneralDiv.appendChild(fieldsDiv);\n var outDiv = createElement('div', { id: 'out_div' });\n // tslint:disable-next-line:max-line-length\n var outlineDiv = createElement('div', { id: 'outline_div', className: 'e-de-toc-dlg-sub-container e-de-toc-dlg-outline-levels' });\n var outline = createElement('input', {\n attrs: { 'type': 'checkbox' }, id: '_outline'\n });\n outlineDiv.appendChild(outline);\n outDiv.appendChild(outlineDiv);\n fieldsDiv.appendChild(outDiv);\n this.outline = new CheckBox({ label: locale.getConstant('Outline levels'), checked: true });\n this.outline.appendTo(outline);\n var resetButtonDiv = createElement('div', { className: 'e-de-toc-reset-button' });\n fieldsDiv.appendChild(resetButtonDiv);\n var resetElement = createElement('button', { innerHTML: 'Reset', id: 'reset' });\n resetButtonDiv.appendChild(resetElement);\n var resetButton = new Button({ cssClass: 'e-btn e-flat' });\n resetButton.appendTo(resetElement);\n resetElement.addEventListener('click', this.reset);\n // tslint:disable-next-line:max-line-length\n var tocStylesDiv = createElement('div', { id: 'tocStyles_div', className: 'e-de-toc-dlg-sub-container' });\n // tslint:disable-next-line:max-line-length\n var tocStylesLabel = createElement('div', {\n id: ownerId + '_tocStylesLabel', className: 'e-de-toc-dlg-main-heading e-de-toc-dlg-styles',\n innerHTML: locale.getConstant('Styles:')\n });\n rightBottomGeneralDiv.appendChild(tocStylesDiv);\n rightBottomGeneralDiv.appendChild(tocStylesLabel);\n var textBoxDiv = createElement('div', { className: 'e-de-toc-dlg-style-input' });\n rightBottomGeneralDiv.appendChild(textBoxDiv);\n this.textBoxInput = createElement('input', { className: 'e-input', id: 'toclist' });\n this.textBoxInput.setAttribute('type', 'text');\n textBoxDiv.appendChild(this.textBoxInput);\n var listViewDiv = createElement('div', { className: 'e-de-toc-list-view' });\n var styleValues = ['TOC 1', 'TOC 2', 'TOC 3', 'TOC 4', 'TOC 5', 'TOC 6', 'TOC 7', 'TOC 8', 'TOC 9'];\n this.listViewInstance = new ListView({ dataSource: styleValues, cssClass: 'e-toc-list-view' });\n this.listViewInstance.appendTo(listViewDiv);\n this.listViewInstance.addEventListener('select', this.selectHandler);\n rightBottomGeneralDiv.appendChild(listViewDiv);\n var modifyButtonDiv = createElement('div', { className: 'e-de-toc-modify-button' });\n rightBottomGeneralDiv.appendChild(modifyButtonDiv);\n var modifyElement = createElement('button', { innerHTML: 'Modify', id: 'modify' });\n modifyButtonDiv.appendChild(modifyElement);\n var modifyButton = new Button({ cssClass: 'e-btn e-flat' });\n modifyButton.appendTo(modifyElement);\n modifyElement.addEventListener('click', this.showStyleDialog);\n };\n /**\n * @private\n */\n TableOfContentsDialog.prototype.show = function () {\n var localValue = new L10n('documenteditor', this.owner.owner.defaultLocale);\n localValue.setLocale(this.owner.owner.locale);\n setCulture(this.owner.owner.locale);\n if (!this.target) {\n this.initTableOfContentDialog(localValue);\n }\n this.owner.dialog.header = localValue.getConstant('Table of Contents');\n this.owner.dialog.width = 'auto';\n this.owner.dialog.height = 'auto';\n this.owner.dialog.content = this.target;\n this.owner.dialog.beforeOpen = this.loadTableofContentDialog;\n this.owner.dialog.close = this.closeTableOfContentDialog;\n this.owner.dialog.buttons = [{\n click: this.applyTableOfContentProperties,\n buttonModel: { content: localValue.getConstant('Ok'), cssClass: 'e-flat e-toc-okay', isPrimary: true }\n },\n {\n click: this.onCancelButtonClick,\n buttonModel: { content: localValue.getConstant('Cancel'), cssClass: 'e-flat e-toc-cancel' }\n }];\n this.owner.dialog.dataBind();\n this.owner.dialog.show();\n };\n TableOfContentsDialog.prototype.checkLevel = function () {\n if (this.heading1.value !== '') {\n this.showLevel.value = 1;\n }\n if (this.heading2.value !== '') {\n this.showLevel.value = 2;\n }\n if (this.heading3.value !== '') {\n this.showLevel.value = 3;\n }\n if (this.heading4.value !== '') {\n this.showLevel.value = 4;\n }\n if (this.heading5.value !== '') {\n this.showLevel.value = 5;\n }\n if (this.heading6.value !== '') {\n this.showLevel.value = 6;\n }\n if (this.heading7.value !== '') {\n this.showLevel.value = 7;\n }\n if (this.heading8.value !== '') {\n this.showLevel.value = 8;\n }\n if (this.heading9.value !== '') {\n this.showLevel.value = 9;\n }\n };\n TableOfContentsDialog.prototype.getElementValue = function (element) {\n switch (element) {\n case this.heading1:\n return '1';\n case this.heading2:\n return '2';\n case this.heading3:\n return '3';\n case this.heading4:\n return '4';\n case this.heading5:\n return '5';\n case this.heading6:\n return '6';\n case this.heading7:\n return '7';\n case this.heading8:\n return '8';\n case this.heading9:\n return '9';\n default:\n return '1';\n }\n };\n TableOfContentsDialog.prototype.getHeadingLevel = function (index) {\n switch (index) {\n case 1:\n return parseInt(this.heading1.value);\n case 2:\n return parseInt(this.heading2.value);\n case 3:\n return parseInt(this.heading3.value);\n case 4:\n return parseInt(this.heading4.value);\n case 5:\n return parseInt(this.heading5.value);\n case 6:\n return parseInt(this.heading6.value);\n case 7:\n return parseInt(this.heading7.value);\n case 8:\n return parseInt(this.heading8.value);\n case 9:\n return parseInt(this.heading9.value);\n default:\n return 0;\n }\n };\n TableOfContentsDialog.prototype.applyLevelSetting = function (tocSettings) {\n tocSettings.levelSettings = {};\n var headingPrefix = 'Heading ';\n var newStartLevel = 0;\n var newEndLevel = 0;\n var isEndLevel = false;\n for (var i = 1; i <= tocSettings.endLevel; i++) {\n var outlineLevel = this.getHeadingLevel(i);\n if (i === outlineLevel) {\n if (newStartLevel === 0) {\n newStartLevel = i;\n isEndLevel = false;\n }\n if (!isEndLevel) {\n newEndLevel = i;\n }\n }\n else {\n isEndLevel = true;\n if (outlineLevel !== 0) {\n var headingStyle = headingPrefix + i.toString();\n tocSettings.levelSettings[headingStyle] = outlineLevel;\n }\n }\n }\n tocSettings.startLevel = newStartLevel;\n tocSettings.endLevel = newEndLevel;\n if (this.normal.value !== '') {\n tocSettings.levelSettings['Normal'] = +this.normal.value;\n }\n };\n /**\n * @private\n */\n TableOfContentsDialog.prototype.destroy = function () {\n if (this.pageNumber) {\n this.pageNumber.destroy();\n this.pageNumber = undefined;\n }\n if (this.rightAlign) {\n this.rightAlign.destroy();\n this.rightAlign = undefined;\n }\n if (this.tabLeader) {\n this.tabLeader.destroy();\n this.tabLeader = undefined;\n }\n if (this.showLevel) {\n this.showLevel.destroy();\n this.showLevel = undefined;\n }\n if (this.hyperlink) {\n this.hyperlink.destroy();\n this.hyperlink = undefined;\n }\n if (this.style) {\n this.style.destroy();\n this.style = undefined;\n }\n if (this.outline) {\n this.outline.destroy();\n this.outline = undefined;\n }\n if (this.listViewInstance) {\n this.listViewInstance.destroy();\n this.listViewInstance = undefined;\n }\n this.heading1 = undefined;\n this.heading2 = undefined;\n this.heading3 = undefined;\n this.heading4 = undefined;\n this.heading5 = undefined;\n this.heading6 = undefined;\n this.heading7 = undefined;\n this.heading8 = undefined;\n this.heading9 = undefined;\n this.normal = undefined;\n this.textBoxInput = undefined;\n this.owner = undefined;\n if (!isNullOrUndefined(this.target)) {\n if (this.target.parentElement) {\n this.target.parentElement.removeChild(this.target);\n }\n for (var count = 0; count < this.target.childNodes.length; count++) {\n this.target.removeChild(this.target.childNodes[count]);\n count--;\n }\n this.target = undefined;\n }\n };\n return TableOfContentsDialog;\n}());\nexport { TableOfContentsDialog };\n","import { NumericTextBox } from '@syncfusion/ej2-inputs';\nimport { createElement, L10n, setCulture } from '@syncfusion/ej2-base';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nimport { CheckBox, RadioButton } from '@syncfusion/ej2-buttons';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { WSectionFormat } from './../../implementation/format/index';\nimport { Tab } from '@syncfusion/ej2-navigations';\n/**\n * The Page setup dialog is used to modify formatting of selected sections.\n */\nvar PageSetupDialog = /** @class */ (function () {\n /**\n * @private\n */\n function PageSetupDialog(viewer) {\n var _this = this;\n this.isPortrait = true;\n /**\n * @private\n */\n this.loadPageSetupDialog = function () {\n _this.owner.updateFocus();\n var sectionFormat = _this.owner.selection.sectionFormat;\n _this.topMarginBox.value = sectionFormat.topMargin;\n _this.leftMarginBox.value = sectionFormat.leftMargin;\n _this.bottomMarginBox.value = sectionFormat.bottomMargin;\n _this.rightMarginBox.value = sectionFormat.rightMargin;\n _this.widthBox.value = sectionFormat.pageWidth;\n _this.heightBox.value = sectionFormat.pageHeight;\n _this.checkBox1.checked = sectionFormat.differentOddAndEvenPages;\n _this.checkBox2.checked = sectionFormat.differentFirstPage;\n _this.headerBox.value = sectionFormat.headerDistance;\n _this.footerBox.value = sectionFormat.footerDistance;\n if (_this.widthBox.value > _this.heightBox.value) {\n _this.landscape.checked = true;\n }\n else {\n _this.portrait.checked = true;\n }\n };\n /**\n * @private\n */\n this.closePageSetupDialog = function () {\n _this.unWireEventsAndBindings();\n _this.owner.updateFocus();\n };\n /**\n * @private\n */\n this.onCancelButtonClick = function () {\n _this.owner.dialog.hide();\n _this.unWireEventsAndBindings();\n };\n /**\n * @private\n */\n this.keyUpInsertPageSettings = function (event) {\n if (event.keyCode === 13) {\n _this.applyPageSetupProperties();\n }\n };\n /**\n * @private\n */\n this.applyPageSetupProperties = function () {\n var sectionFormat = new WSectionFormat();\n sectionFormat.bottomMargin = _this.bottomMarginBox.value;\n sectionFormat.topMargin = _this.topMarginBox.value;\n sectionFormat.leftMargin = _this.leftMarginBox.value;\n sectionFormat.rightMargin = _this.rightMarginBox.value;\n sectionFormat.pageWidth = _this.widthBox.value;\n sectionFormat.pageHeight = _this.heightBox.value;\n sectionFormat.differentOddAndEvenPages = _this.checkBox1.checked;\n sectionFormat.differentFirstPage = _this.checkBox2.checked;\n sectionFormat.headerDistance = _this.headerBox.value;\n sectionFormat.footerDistance = _this.footerBox.value;\n _this.owner.owner.editorModule.onApplySectionFormat(undefined, sectionFormat);\n _this.owner.dialog.hide();\n };\n /**\n * @private\n */\n this.changeByPaperSize = function (event) {\n var value = event.value;\n var sectionFormat = _this.owner.selection.sectionFormat;\n var width = sectionFormat.pageWidth;\n var height = sectionFormat.pageHeight;\n if (_this.owner.selection.sectionFormat.pageWidth > _this.owner.selection.sectionFormat.pageHeight || _this.landscape.checked) {\n _this.isPortrait = false;\n }\n else {\n _this.isPortrait = true;\n }\n if (value === 'letter') {\n if (_this.isPortrait) {\n _this.widthBox.value = 612;\n _this.heightBox.value = 792;\n }\n else {\n _this.widthBox.value = 792;\n _this.heightBox.value = 612;\n }\n }\n else if (value === 'tabloid') {\n if (_this.isPortrait) {\n _this.widthBox.value = 792;\n _this.heightBox.value = 1224;\n }\n else {\n _this.widthBox.value = 1224;\n _this.heightBox.value = 792;\n }\n }\n else if (value === 'legal') {\n if (_this.isPortrait) {\n _this.widthBox.value = 612;\n _this.heightBox.value = 1008;\n }\n else {\n _this.widthBox.value = 1008;\n _this.heightBox.value = 612;\n }\n }\n else if (value === 'statement') {\n if (_this.isPortrait) {\n _this.widthBox.value = 392;\n _this.heightBox.value = 612;\n }\n else {\n _this.widthBox.value = 612;\n _this.heightBox.value = 392;\n }\n }\n else if (value === 'executive') {\n if (_this.isPortrait) {\n _this.widthBox.value = 522;\n _this.heightBox.value = 756;\n }\n else {\n _this.widthBox.value = 756;\n _this.heightBox.value = 522;\n }\n }\n else if (value === 'a3') {\n if (_this.isPortrait) {\n _this.widthBox.value = 841.9;\n _this.heightBox.value = 1190.55;\n }\n else {\n _this.widthBox.value = 1190.55;\n _this.heightBox.value = 841.9;\n }\n }\n else if (value === 'a4') {\n if (_this.isPortrait) {\n _this.widthBox.value = 595.3;\n _this.heightBox.value = 841.9;\n }\n else {\n _this.widthBox.value = 841.9;\n _this.heightBox.value = 595.3;\n }\n }\n else if (value === 'a5') {\n if (_this.isPortrait) {\n _this.widthBox.value = 419.55;\n _this.heightBox.value = 595.3;\n }\n else {\n _this.widthBox.value = 595.3;\n _this.heightBox.value = 419.55;\n }\n }\n else if (value === 'b4') {\n if (_this.isPortrait) {\n _this.widthBox.value = 728.5;\n _this.heightBox.value = 1031.8;\n }\n else {\n _this.widthBox.value = 1031.8;\n _this.heightBox.value = 728.5;\n }\n }\n else if (value === 'b5') {\n if (_this.isPortrait) {\n _this.widthBox.value = 515.9;\n _this.heightBox.value = 728.5;\n }\n else {\n _this.widthBox.value = 728.5;\n _this.heightBox.value = 515.9;\n }\n }\n else if (value === 'customsize') {\n if (_this.isPortrait) {\n _this.widthBox.value = 515.9;\n _this.heightBox.value = 728.5;\n }\n else {\n _this.widthBox.value = 728.5;\n _this.heightBox.value = 515.9;\n }\n }\n };\n /**\n * @private\n */\n this.onPortrait = function (event) {\n _this.landscape.checked = false;\n var width = _this.widthBox.value;\n var height = _this.heightBox.value;\n if (width > height) {\n _this.widthBox.value = height;\n _this.heightBox.value = width;\n }\n };\n /**\n * @private\n */\n this.onLandscape = function (event) {\n _this.portrait.checked = false;\n var width = _this.widthBox.value;\n var height = _this.heightBox.value;\n if (width < height) {\n _this.widthBox.value = height;\n _this.heightBox.value = width;\n }\n };\n /**\n * @private\n */\n this.unWireEventsAndBindings = function () {\n _this.paperSize.value = undefined;\n _this.topMarginBox.value = undefined;\n _this.bottomMarginBox.value = undefined;\n _this.leftMarginBox.value = undefined;\n _this.rightMarginBox.value = undefined;\n _this.headerBox.value = undefined;\n _this.footerBox.value = undefined;\n _this.widthBox.value = undefined;\n _this.heightBox.value = undefined;\n _this.checkBox1.checked = false;\n _this.checkBox2.checked = false;\n _this.portrait.checked = false;\n _this.landscape.checked = false;\n };\n this.owner = viewer;\n }\n PageSetupDialog.prototype.getModuleName = function () {\n return 'PageSetupDialog';\n };\n /**\n * @private\n */\n PageSetupDialog.prototype.initPageSetupDialog = function (locale) {\n var id = this.owner.owner.containerId + '_pagesetup_dialog';\n this.target = createElement('div', { id: id, className: 'e-de-pagesetup-dlg-container' });\n this.owner.owner.element.appendChild(this.target);\n var ejtabContainer = createElement('div', { id: this.target.id + '_MarginTabContainer' });\n this.target.appendChild(ejtabContainer);\n this.marginTab = createElement('div', {\n id: this.target.id + '_marginPropertyTab', styles: 'position: relative;width:400px;'\n });\n this.paperTab = createElement('div', {\n id: this.target.id + '_paperSizePropertyTab', styles: 'position: relative;width:400px;'\n });\n this.layoutTab = createElement('div', {\n id: this.target.id + '_CellPropertiesDialogTab', styles: 'position: relative;width:400px;'\n });\n // tslint:disable-next-line:max-line-length\n var ejtab = createElement('div', { id: this.target.id + '_PageSetupDialogTab', className: 'e-de-page-setup-ppty-tab' });\n var headerContainer = createElement('div', { className: 'e-tab-header' });\n var marginHeader = createElement('div', {\n id: this.target.id + '_marginHeader', innerHTML: locale.getConstant('Margin')\n });\n var paperHeader = createElement('div', {\n id: this.target.id + '_paperHeader', innerHTML: locale.getConstant('Paper')\n });\n var layoutHeader = createElement('div', {\n id: this.target.id + '_layoutHeader', innerHTML: locale.getConstant('Layout')\n });\n headerContainer.appendChild(marginHeader);\n headerContainer.appendChild(paperHeader);\n headerContainer.appendChild(layoutHeader);\n var contentContainer = createElement('div', { className: 'e-content' });\n var marginContent = createElement('div', { id: this.target.id + '_marginContent' });\n var paperContent = createElement('div', { id: this.target.id + '_paperContent' });\n var layoutContent = createElement('div', { id: this.target.id + '_layoutContent' });\n marginContent.appendChild(this.marginTab);\n paperContent.appendChild(this.paperTab);\n layoutContent.appendChild(this.layoutTab);\n contentContainer.appendChild(marginContent);\n contentContainer.appendChild(paperContent);\n contentContainer.appendChild(layoutContent);\n ejtab.appendChild(headerContainer);\n ejtab.appendChild(contentContainer);\n ejtabContainer.appendChild(ejtab);\n this.initMarginProperties(this.marginTab, locale);\n this.initPaperSizeProperties(this.paperTab, locale);\n this.initLayoutProperties(this.layoutTab, locale);\n var tabObj = new Tab({}, ejtab);\n this.target.addEventListener('keyup', this.keyUpInsertPageSettings);\n var marginTabHeader = tabObj.element.getElementsByClassName('e-item e-toolbar-item')[0];\n var marginTabHeaderItem = marginTabHeader.getElementsByClassName('e-tab-wrap')[0];\n marginTabHeaderItem.classList.add('e-de-page-setup-dlg-margin-tab-header');\n };\n /**\n * @private\n */\n PageSetupDialog.prototype.initMarginProperties = function (element, locale) {\n var marginDiv = createElement('div', {\n id: 'margin_div',\n className: 'e-de-page-setup-dlg-sub-container', styles: 'height:135px;'\n });\n // tslint:disable-next-line:max-line-length\n var leftMarginDiv = createElement('div', { id: 'left_margin', className: 'e-de-page-setup-dlg-left-sub-container' });\n marginDiv.appendChild(leftMarginDiv);\n // tslint:disable-next-line:max-line-length\n var rightMarginDiv = createElement('div', { className: 'e-de-page-setup-dlg-right-sub-container' });\n marginDiv.appendChild(rightMarginDiv);\n var topLabel = createElement('label', {\n innerHTML: locale.getConstant('Top'), className: 'e-de-page-setup-dlg-sub-header',\n id: this.target.id + '_TopLabel', styles: 'padding-top:0px;width:190px;'\n });\n var topTextBox = createElement('input', {\n attrs: { 'type': 'text' }, id: this.target.id + '_Top'\n });\n var bottomBoxLabel = createElement('label', {\n innerHTML: locale.getConstant('Bottom'),\n className: 'e-de-page-setup-dlg-sub-title-header', id: this.target.id + '_bottomLabel'\n });\n var bottomTextBox = createElement('input', {\n attrs: { 'type': 'text' },\n id: this.target.id + '_bottom'\n });\n leftMarginDiv.appendChild(topLabel);\n leftMarginDiv.appendChild(topTextBox);\n leftMarginDiv.appendChild(bottomBoxLabel);\n leftMarginDiv.appendChild(bottomTextBox);\n var leftBoxLabel = createElement('label', {\n innerHTML: locale.getConstant('Left'), className: 'e-de-page-setup-dlg-sub-header', styles: 'padding-top:0px;width:190px;',\n id: this.target.id + '_leftLabel'\n });\n var leftTextBox = createElement('input', {\n attrs: { 'type': 'text' }, id: this.target.id + '_left'\n });\n var rightLabel = createElement('label', {\n innerHTML: locale.getConstant('Right'),\n id: this.target.id + '_rightLabel', className: 'e-de-page-setup-dlg-sub-title-header'\n });\n var rightTextBox = createElement('input', {\n attrs: { 'type': 'text' },\n id: this.target.id + '_right'\n });\n rightMarginDiv.appendChild(leftBoxLabel);\n rightMarginDiv.appendChild(leftTextBox);\n rightMarginDiv.appendChild(rightLabel);\n rightMarginDiv.appendChild(rightTextBox);\n element.appendChild(marginDiv);\n this.topMarginBox = new NumericTextBox({ value: 71, width: 170, decimals: 2 });\n this.topMarginBox.appendTo(topTextBox);\n this.leftMarginBox = new NumericTextBox({ value: 73, width: 170, decimals: 2 });\n this.leftMarginBox.appendTo(leftTextBox);\n this.bottomMarginBox = new NumericTextBox({ value: 72, width: 170, decimals: 2 });\n this.bottomMarginBox.appendTo(bottomTextBox);\n this.rightMarginBox = new NumericTextBox({ value: 74, width: 170, decimals: 2 });\n this.rightMarginBox.appendTo(rightTextBox);\n // tslint:disable-next-line:max-line-length\n var orientationDiv = createElement('div', { id: 'orientation_div', className: 'e-de-page-setup-dlg-sub-container-port' });\n // tslint:disable-next-line:max-line-length\n var orientationLabeldiv = createElement('div', { id: '_orientationLabelDiv', className: 'e-de-page-setup-dlg-sub-label', innerHTML: locale.getConstant('Orientation') });\n var orientationPropDiv = createElement('div', { id: '_orientationPropDiv', styles: 'display: flex;', className: 'e-de-page-setup-dlg-orientation-prop' });\n var portraitDiv = createElement('div', { id: '_portraitDiv', styles: 'padding-right: 30px;' });\n var portrait = createElement('input', {\n attrs: { 'type': 'radiobutton' }, id: this.target.id + '_portrait'\n });\n var landscapeDiv = createElement('div', { id: '_landscapeDiv' });\n var landscape = createElement('input', {\n attrs: { 'type': 'radiobutton' }, id: this.target.id + '_landscape'\n });\n portraitDiv.appendChild(portrait);\n landscapeDiv.appendChild(landscape);\n orientationPropDiv.appendChild(portraitDiv);\n orientationPropDiv.appendChild(landscapeDiv);\n orientationDiv.appendChild(orientationLabeldiv);\n orientationDiv.appendChild(orientationPropDiv);\n this.portrait = new RadioButton({ label: locale.getConstant('Portrait'), checked: true, change: this.onPortrait });\n this.landscape = new RadioButton({ label: locale.getConstant('Landscape'), change: this.onLandscape });\n this.portrait.appendTo(portrait);\n this.landscape.appendTo(landscape);\n element.appendChild(orientationDiv);\n };\n /**\n * @private\n */\n PageSetupDialog.prototype.initPaperSizeProperties = function (element, locale) {\n var sizeDiv = createElement('div', {\n id: 'size_div',\n className: 'e-de-page-setup-dlg-sub-size-container'\n });\n // tslint:disable-next-line:max-line-length\n var leftSizeDiv = createElement('div', { id: 'left_size', className: 'e-de-page-setup-dlg-left-sub-container' });\n sizeDiv.appendChild(leftSizeDiv);\n // tslint:disable-next-line:max-line-length\n var rightSizeDiv = createElement('div', { className: 'e-de-page-setup-dlg-right-sub-container' });\n sizeDiv.appendChild(rightSizeDiv);\n var widthLabel = createElement('label', {\n innerHTML: locale.getConstant('Width'), className: 'e-de-page-setup-dlg-sub-header',\n id: this.target.id + '_widthLabel', styles: 'padding-top:0px;width:190px;'\n });\n var widthTextBox = createElement('input', {\n attrs: { 'type': 'text' }, id: this.target.id + '_Width'\n });\n leftSizeDiv.appendChild(widthLabel);\n leftSizeDiv.appendChild(widthTextBox);\n var heightLabel = createElement('label', {\n innerHTML: locale.getConstant('Height'), className: 'e-de-page-setup-dlg-sub-header', styles: 'padding-top:0px;width:190px;',\n id: this.target.id + '_heightLabel'\n });\n var heightTextBox = createElement('input', {\n attrs: { 'type': 'text' }, id: this.target.id + '_height'\n });\n rightSizeDiv.appendChild(heightLabel);\n rightSizeDiv.appendChild(heightTextBox);\n element.appendChild(sizeDiv);\n this.widthBox = new NumericTextBox({ value: 612, width: 170, decimals: 2 });\n this.widthBox.appendTo(widthTextBox);\n this.heightBox = new NumericTextBox({ value: 792, width: 170, decimals: 2 });\n this.heightBox.appendTo(heightTextBox);\n // tslint:disable-next-line:max-line-length\n var paperSizeDiv = createElement('div', { id: '_paperSizeDiv', styles: 'height:37px;', className: 'e-de-page-setup-dlg-sub-container' });\n var paperSize = createElement('select', {\n id: this.target.id + '_papersize', styles: 'width:170px;padding-bottom: 20px;',\n innerHTML: ''\n });\n paperSizeDiv.appendChild(paperSize);\n this.paperSize = new DropDownList({ change: this.changeByPaperSize, width: '170px' });\n this.paperSize.appendTo(paperSize);\n element.appendChild(paperSizeDiv);\n };\n /**\n * @private\n */\n PageSetupDialog.prototype.initLayoutProperties = function (element, locale) {\n // tslint:disable-next-line:max-line-length\n var layoutDiv = createElement('div', { id: '_layoutDiv', className: 'e-de-page-setup-dlg-layout-sub-container', });\n // tslint:disable-next-line:max-line-length\n var firstPageDiv = createElement('div', { id: '_firstPageDiv', styles: 'height: 27px;', className: 'e-de-page-setup-dlg-first-page-prop' });\n var checkBox1 = createElement('input', {\n attrs: { 'type': 'checkbox' }, id: this.target.id + '_oddoreven'\n });\n firstPageDiv.appendChild(checkBox1);\n // tslint:disable-next-line:max-line-length\n var oddOrEvenDiv = createElement('div', { id: '_oddOrEvenDiv', styles: 'height: 27px;', className: 'e-de-page-setup-dlg-odd-or-even-prop' });\n var checkBox2 = createElement('input', {\n attrs: { 'type': 'checkbox' }, id: this.target.id + '_even'\n });\n oddOrEvenDiv.appendChild(checkBox2);\n layoutDiv.appendChild(firstPageDiv);\n layoutDiv.appendChild(oddOrEvenDiv);\n this.checkBox1 = new CheckBox({ label: locale.getConstant('Different odd and even') });\n this.checkBox2 = new CheckBox({ label: locale.getConstant('Different first page') });\n this.checkBox1.appendTo(checkBox1);\n this.checkBox2.appendTo(checkBox2);\n element.appendChild(layoutDiv);\n // tslint:disable-next-line:max-line-length\n var textLabelDiv = createElement('div', { id: '_textLabelDiv', className: 'e-de-page-setup-dlg-sub-label' });\n var textLabel = createElement('label', {\n innerHTML: locale.getConstant('From edge'), id: this.target.id + '_textLabel'\n });\n textLabelDiv.appendChild(textLabel);\n element.appendChild(textLabelDiv);\n // tslint:disable-next-line:max-line-length\n var propertyDiv = createElement('div', { id: '_headerFooeterPropDiv', className: 'e-de-page-setup-dlg-sub-container', styles: 'height: 65px;' });\n // tslint:disable-next-line:max-line-length\n var leftLayoutDiv = createElement('div', { id: '_leftLayoutDiv', className: 'e-de-page-setup-dlg-left-layout-container' });\n propertyDiv.appendChild(leftLayoutDiv);\n // tslint:disable-next-line:max-line-length\n var rightLayoutDiv = createElement('div', { className: 'e-de-page-setup-dlg-right-layout-container' });\n propertyDiv.appendChild(rightLayoutDiv);\n var headerLabel = createElement('label', {\n innerHTML: locale.getConstant('Header'), className: 'e-de-page-setup-dlg-sub-header',\n id: this.target.id + '_headerLabel', styles: 'padding-top:0px;width:190px;'\n });\n var headerBox = createElement('input', {\n attrs: { 'type': 'text' }, id: this.target.id + '_header'\n });\n leftLayoutDiv.appendChild(headerLabel);\n leftLayoutDiv.appendChild(headerBox);\n var footerLabel = createElement('label', {\n innerHTML: locale.getConstant('Footer'), className: 'e-de-page-setup-dlg-sub-header', styles: 'padding-top:0px;width:190px;',\n id: this.target.id + '_footerLabel'\n });\n var footerBox = createElement('input', {\n attrs: { 'type': 'text' }, id: this.target.id + '_footer'\n });\n rightLayoutDiv.appendChild(footerLabel);\n rightLayoutDiv.appendChild(footerBox);\n element.appendChild(propertyDiv);\n this.headerBox = new NumericTextBox({ value: 612, width: 170, decimals: 2 });\n this.headerBox.appendTo(headerBox);\n this.footerBox = new NumericTextBox({ value: 792, width: 170, decimals: 2 });\n this.footerBox.appendTo(footerBox);\n };\n /**\n * @private\n */\n PageSetupDialog.prototype.show = function () {\n var localValue = new L10n('documenteditor', this.owner.owner.defaultLocale);\n localValue.setLocale(this.owner.owner.locale);\n setCulture(this.owner.owner.locale);\n if (!this.target) {\n this.initPageSetupDialog(localValue);\n }\n this.owner.dialog.header = localValue.getConstant('Page Setup');\n this.owner.dialog.width = 'auto';\n this.owner.dialog.height = 'auto';\n this.owner.dialog.content = this.target;\n this.owner.dialog.beforeOpen = this.loadPageSetupDialog;\n this.owner.dialog.close = this.closePageSetupDialog;\n this.owner.dialog.buttons = [{\n click: this.applyPageSetupProperties,\n buttonModel: { content: localValue.getConstant('Ok'), cssClass: 'e-flat e-layout-ppty-okay', isPrimary: true }\n },\n {\n click: this.onCancelButtonClick,\n buttonModel: { content: localValue.getConstant('Cancel'), cssClass: 'e-flat e-layout-ppty-cancel' }\n }];\n this.owner.dialog.dataBind();\n this.owner.dialog.show();\n };\n /**\n * @private\n */\n PageSetupDialog.prototype.destroy = function () {\n if (this.topMarginBox) {\n this.topMarginBox.destroy();\n this.topMarginBox = undefined;\n }\n if (this.leftMarginBox) {\n this.leftMarginBox.destroy();\n this.leftMarginBox = undefined;\n }\n if (this.bottomMarginBox) {\n this.bottomMarginBox.destroy();\n this.bottomMarginBox = undefined;\n }\n if (this.rightMarginBox) {\n this.rightMarginBox.destroy();\n this.rightMarginBox = undefined;\n }\n if (this.headerBox) {\n this.headerBox.destroy();\n this.headerBox = undefined;\n }\n if (this.footerBox) {\n this.footerBox.destroy();\n this.footerBox = undefined;\n }\n if (this.widthBox) {\n this.widthBox.destroy();\n this.widthBox = undefined;\n }\n if (this.heightBox) {\n this.heightBox.destroy();\n this.heightBox = undefined;\n }\n if (this.paperSize) {\n this.paperSize.destroy();\n this.paperSize = undefined;\n }\n if (this.checkBox1) {\n this.checkBox1.destroy();\n this.checkBox1 = undefined;\n }\n if (this.checkBox2) {\n this.checkBox2.destroy();\n this.checkBox2 = undefined;\n }\n if (this.portrait) {\n this.portrait.destroy();\n this.portrait = undefined;\n }\n if (this.landscape) {\n this.landscape.destroy();\n this.landscape = undefined;\n }\n this.owner = undefined;\n if (!isNullOrUndefined(this.target)) {\n if (this.target.parentElement) {\n this.target.parentElement.removeChild(this.target);\n }\n for (var s = 0; s < this.target.childNodes.length; s++) {\n this.target.removeChild(this.target.childNodes[s]);\n s--;\n }\n this.target = undefined;\n }\n };\n return PageSetupDialog;\n}());\nexport { PageSetupDialog };\n","import { NumericTextBox } from '@syncfusion/ej2-inputs';\nimport { createElement, L10n, setCulture } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nimport { WParagraphFormat } from '../index';\n/**\n * The Paragraph dialog is used to modify formatting of selected paragraphs.\n */\nvar ParagraphDialog = /** @class */ (function () {\n /**\n * @private\n */\n function ParagraphDialog(viewer) {\n var _this = this;\n //paragraph Format properties\n this.leftIndent = undefined;\n this.rightIndent = undefined;\n this.beforeSpacing = undefined;\n this.afterSpacing = undefined;\n this.textAlignment = undefined;\n this.firstLineIndent = undefined;\n this.lineSpacingIn = undefined;\n this.lineSpacingType = undefined;\n this.paragraphFormat = undefined;\n /**\n * @private\n */\n this.keyUpParagraphSettings = function (event) {\n if (event.keyCode === 13) {\n _this.applyParagraphFormat();\n }\n };\n this.changeBeforeSpacing = function (event) {\n _this.beforeSpacing = event.value;\n };\n this.changeAfterSpacing = function (event) {\n _this.afterSpacing = event.value;\n };\n this.changeLeftIndent = function (event) {\n _this.leftIndent = event.value;\n };\n this.changeRightIndent = function (event) {\n _this.rightIndent = event.value;\n };\n this.changeLineSpacingValue = function (event) {\n _this.lineSpacingIn = event.value;\n };\n this.changeFirstLineIndent = function (event) {\n _this.firstLineIndent = event.value;\n };\n this.changeByTextAlignment = function (args) {\n _this.textAlignment = args.value;\n };\n /**\n * @private\n */\n this.changeByValue = function (event) {\n var paragraphFormat = _this.owner.selection.paragraphFormat;\n switch (_this.special.index) {\n case 0:\n if (paragraphFormat.firstLineIndent !== 0) {\n _this.byIn.value = 0;\n }\n break;\n case 1:\n if (paragraphFormat.firstLineIndent === 0 || isNullOrUndefined(paragraphFormat.firstLineIndent)) {\n _this.byIn.value = 0.1;\n }\n else if (paragraphFormat.firstLineIndent < 0) {\n _this.byIn.value = -(paragraphFormat.firstLineIndent);\n }\n break;\n case 2:\n if (paragraphFormat.firstLineIndent === 0 || isNullOrUndefined(paragraphFormat.firstLineIndent)) {\n paragraphFormat.firstLineIndent = -0.1;\n }\n else if (paragraphFormat.firstLineIndent > 0) {\n _this.byIn.value = -(paragraphFormat.firstLineIndent);\n }\n break;\n }\n };\n /**\n * @private\n */\n this.changeBySpacing = function (event) {\n if (isNullOrUndefined(_this.lineSpacing)) {\n return;\n }\n switch (_this.lineSpacing.index) {\n case 0:\n _this.lineSpacingType = 'AtLeast';\n _this.atIn.value = 12;\n break;\n case 1:\n _this.lineSpacingType = 'Exactly';\n _this.atIn.value = 12;\n break;\n case 2:\n _this.lineSpacingType = 'Multiple';\n _this.atIn.value = 1;\n break;\n }\n };\n /* tslint:enable */\n /**\n * @private\n */\n this.loadParagraphDialog = function () {\n var selectionFormat;\n if (_this.paragraphFormat) {\n selectionFormat = _this.paragraphFormat;\n }\n else {\n selectionFormat = _this.owner.selection.paragraphFormat;\n }\n var alignValue = _this.alignment.index;\n if (selectionFormat.textAlignment === 'Center') {\n alignValue = 0;\n }\n else if (selectionFormat.textAlignment === 'Left') {\n alignValue = 1;\n }\n else if (selectionFormat.textAlignment === 'Right') {\n alignValue = 2;\n }\n else {\n alignValue = 3;\n }\n _this.alignment.index = alignValue;\n _this.beforeSpacingIn.value = selectionFormat.beforeSpacing;\n _this.afterSpacingIn.value = selectionFormat.afterSpacing;\n _this.leftIndentIn.value = selectionFormat.leftIndent;\n _this.rightIndentIn.value = selectionFormat.rightIndent;\n _this.byIn.value = selectionFormat.firstLineIndent;\n var lineSpaceValue = _this.lineSpacing.index;\n if (selectionFormat.lineSpacingType === 'AtLeast') {\n lineSpaceValue = 0;\n }\n else if (selectionFormat.lineSpacingType === 'Exactly') {\n lineSpaceValue = 1;\n }\n else {\n lineSpaceValue = 2;\n }\n _this.lineSpacing.index = lineSpaceValue;\n _this.atIn.value = selectionFormat.lineSpacing;\n if (_this.owner.selection.caret.style.display !== 'none') {\n _this.owner.selection.caret.style.display = 'none';\n }\n };\n /**\n * @private\n */\n this.applyParagraphFormat = function () {\n var paraFormat;\n var isApply;\n if (_this.paragraphFormat) {\n paraFormat = _this.paragraphFormat;\n isApply = false;\n }\n else {\n paraFormat = new WParagraphFormat();\n isApply = true;\n }\n if (!isNullOrUndefined(_this.beforeSpacing)) {\n paraFormat.beforeSpacing = _this.beforeSpacing;\n }\n if (!isNullOrUndefined(_this.afterSpacing)) {\n paraFormat.afterSpacing = _this.afterSpacing;\n }\n if (!isNullOrUndefined(_this.lineSpacingType)) {\n paraFormat.lineSpacingType = _this.lineSpacingType;\n }\n if (!isNullOrUndefined(_this.leftIndent)) {\n paraFormat.leftIndent = _this.leftIndent;\n }\n if (!isNullOrUndefined(_this.rightIndent)) {\n paraFormat.rightIndent = _this.rightIndent;\n }\n if (!isNullOrUndefined(_this.lineSpacingIn)) {\n paraFormat.lineSpacing = _this.lineSpacingIn;\n }\n if (!isNullOrUndefined(_this.firstLineIndent)) {\n paraFormat.firstLineIndent = _this.firstLineIndent;\n }\n if (!isNullOrUndefined(_this.textAlignment)) {\n paraFormat.textAlignment = _this.textAlignment;\n }\n if (isApply) {\n _this.onParagraphFormat(paraFormat);\n }\n else {\n _this.owner.owner.styleDialogModule.updateParagraphFormat();\n }\n _this.owner.dialog.hide();\n };\n /**\n * @private\n */\n this.closeParagraphDialog = function () {\n _this.leftIndent = undefined;\n _this.afterSpacing = undefined;\n _this.beforeSpacing = undefined;\n _this.firstLineIndent = undefined;\n _this.textAlignment = undefined;\n _this.rightIndent = undefined;\n _this.lineSpacingIn = undefined;\n _this.lineSpacingType = undefined;\n _this.paragraphFormat = undefined;\n _this.owner.dialog.hide();\n _this.owner.updateFocus();\n };\n this.owner = viewer;\n }\n /**\n * @private\n */\n ParagraphDialog.prototype.getModuleName = function () {\n return 'ParagraphDialog';\n };\n /*tslint:disable max-func-body-length*/\n /**\n * @private\n */\n ParagraphDialog.prototype.initParagraphDialog = function (locale) {\n var instance = this;\n var ownerId = this.owner.owner.containerId;\n var id = ownerId + '_paragraph_dialog';\n this.target = createElement('div', { id: id, className: 'e-de-para-dlg-container' });\n // tslint:disable-next-line:max-line-length\n var div = createElement('div', { id: 'property_div', styles: 'width:400px;' });\n var generalDiv = createElement('div', { id: 'genral_div', styles: 'width:200px;height:85px;', className: 'e-de-para-dlg-sub-container' });\n // tslint:disable-next-line:max-line-length\n var genLabel = createElement('div', { id: ownerId + '_genLabel', className: 'e-de-para-dlg-heading', innerHTML: locale.getConstant('General') });\n var alignLabel = createElement('div', { id: ownerId + '_AlignLabel', className: 'e-de-dlg-sub-header', innerHTML: locale.getConstant('Alignment') });\n var alignment = createElement('select', {\n id: ownerId + '_Alignment',\n innerHTML: ''\n });\n generalDiv.appendChild(genLabel);\n generalDiv.appendChild(alignLabel);\n generalDiv.appendChild(alignment);\n // tslint:disable-next-line:max-line-length\n var indentionDiv = createElement('div', { id: 'indention_div', styles: 'width: 400px;height: 150px;', className: 'e-de-para-dlg-sub-container' });\n var leftIndentionDiv = createElement('div', { id: 'left_indention', styles: 'float:left;position:relative;' });\n indentionDiv.appendChild(leftIndentionDiv);\n // tslint:disable-next-line:max-line-length\n var rightIndentionDiv = createElement('div', { className: 'e-de-para-dlg-right-sub-container', styles: 'float:right;position:relative;' });\n indentionDiv.appendChild(rightIndentionDiv);\n // tslint:disable-next-line:max-line-length\n var spacingDiv = createElement('div', { id: 'spacing_div', styles: 'width: 400px;height: 150px;', className: 'e-de-para-dlg-sub-container' });\n var leftSpacingDiv = createElement('div', { id: 'left_spacing', styles: 'float:left;position:relative;' });\n spacingDiv.appendChild(leftSpacingDiv);\n // tslint:disable-next-line:max-line-length\n var rightSpacingDiv = createElement('div', { className: 'e-de-para-dlg-right-sub-container', styles: 'float:right;position:relative;' });\n spacingDiv.appendChild(rightSpacingDiv);\n // tslint:disable-next-line:max-line-length\n var indentLabel = createElement('div', {\n id: ownerId + '_indentLabel', className: 'e-de-para-dlg-heading', innerHTML: locale.getConstant('Indentation')\n });\n var beforeTextLabel = createElement('div', {\n id: ownerId + '_bfTextLabel',\n className: 'e-de-dlg-sub-header', innerHTML: locale.getConstant('Before Text')\n });\n // tslint:disable-next-line:max-line-length\n var leftIndent = createElement('input', { id: ownerId + '_leftIndent', attrs: { 'type': 'text' } });\n var specialLabel = createElement('div', { id: ownerId + '_specialLabel', className: 'e-de-dlg-sub-header', innerHTML: locale.getConstant('Special') });\n var special = createElement('select', {\n id: ownerId + '_special',\n innerHTML: ' '\n });\n leftIndentionDiv.appendChild(indentLabel);\n leftIndentionDiv.appendChild(beforeTextLabel);\n leftIndentionDiv.appendChild(leftIndent);\n leftIndentionDiv.appendChild(specialLabel);\n leftIndentionDiv.appendChild(special);\n // tslint:disable-next-line:max-line-length\n var afterTextLabel = createElement('div', { id: ownerId + '_afTextLabel', className: 'e-de-dlg-sub-header', innerHTML: locale.getConstant('After Text') });\n var rightIndent = createElement('input', { id: ownerId + '_rightIndent', attrs: { 'type': 'text' } });\n // tslint:disable-next-line:max-line-length\n var byLabel = createElement('label', { id: ownerId + '_byLabel', className: 'e-de-dlg-sub-header', innerHTML: locale.getConstant('By') });\n var by = createElement('input', { id: ownerId + '_By', attrs: { 'type': 'text' } });\n rightIndentionDiv.appendChild(afterTextLabel);\n rightIndentionDiv.appendChild(rightIndent);\n rightIndentionDiv.appendChild(byLabel);\n rightIndentionDiv.appendChild(by);\n // tslint:disable-next-line:max-line-length\n var spaceLabel = createElement('div', { innerHTML: locale.getConstant('Spacing'), className: 'e-de-para-dlg-heading', id: ownerId + '_spaceLabel' });\n var beforeLabel = createElement('div', { className: 'e-de-dlg-sub-header', innerHTML: locale.getConstant('Before'), id: ownerId + '_beforeLabel' });\n // tslint:disable-next-line:max-line-length\n var beforeSpacing = createElement('input', { id: ownerId + '_beforeSpacing', attrs: { 'type': 'text' } });\n var lineSpaceLabel = createElement('div', { id: ownerId + '_lineSpaceLabel', className: 'e-de-dlg-sub-header', innerHTML: locale.getConstant('Line Spacing') });\n // tslint:disable-next-line:max-line-length\n var lineSpacing = createElement('select', {\n id: ownerId + '_lineSpacing', styles: 'width:180px;',\n innerHTML: ''\n });\n leftSpacingDiv.appendChild(spaceLabel);\n leftSpacingDiv.appendChild(beforeLabel);\n leftSpacingDiv.appendChild(beforeSpacing);\n leftSpacingDiv.appendChild(lineSpaceLabel);\n leftSpacingDiv.appendChild(lineSpacing);\n // tslint:disable-next-line:max-line-length\n var afterLabel = createElement('div', { innerHTML: locale.getConstant('After'), className: 'e-de-dlg-sub-header', id: ownerId + '_afterLabel' });\n var afterSpacing = createElement('input', { id: ownerId + '_afterSpacing', attrs: { 'type': 'text' } });\n // tslint:disable-next-line:max-line-length\n var atLabel = createElement('div', { innerHTML: locale.getConstant('At'), id: ownerId + '_atLabel', className: 'e-de-dlg-sub-header' });\n var lineSpacingAt = createElement('input', { id: ownerId + '_lineSpacingAt', attrs: { 'type': 'text' } });\n rightSpacingDiv.appendChild(afterLabel);\n rightSpacingDiv.appendChild(afterSpacing);\n rightSpacingDiv.appendChild(atLabel);\n rightSpacingDiv.appendChild(lineSpacingAt);\n div.appendChild(generalDiv);\n div.appendChild(indentionDiv);\n div.appendChild(spacingDiv);\n this.target.appendChild(div);\n this.leftIndentIn = new NumericTextBox({\n format: 'n1', value: 0, min: -1584, max: 1584, width: 180, enablePersistence: false, change: this.changeLeftIndent\n });\n this.leftIndentIn.appendTo(leftIndent);\n this.rightIndentIn = new NumericTextBox({\n format: 'n1', value: 0, min: -1584, max: 1584, width: 180, enablePersistence: false, change: this.changeRightIndent\n });\n this.rightIndentIn.appendTo(rightIndent);\n this.byIn = new NumericTextBox({\n format: 'n1', value: 0, min: 0, max: 1584, width: 180, enablePersistence: false, change: this.changeFirstLineIndent\n });\n this.byIn.appendTo(by);\n this.beforeSpacingIn = new NumericTextBox({\n format: 'n1', value: 0, min: 0, max: 1584, width: 180, step: 6, enablePersistence: false,\n change: this.changeBeforeSpacing\n });\n this.beforeSpacingIn.appendTo(beforeSpacing);\n this.afterSpacingIn = new NumericTextBox({\n format: 'n1', value: 0, min: 0, max: 1584, width: 180, step: 6, enablePersistence: false,\n change: this.changeAfterSpacing\n });\n this.afterSpacingIn.appendTo(afterSpacing);\n this.atIn = new NumericTextBox({\n format: 'n1', value: 0, min: 1, max: 1584, width: 180, step: 0.5, enablePersistence: false, change: this.changeLineSpacingValue\n });\n this.special = new DropDownList({ change: this.changeByValue, width: 180 });\n this.special.appendTo(special);\n this.lineSpacing = new DropDownList({ change: this.changeBySpacing, width: '180px' });\n this.lineSpacing.appendTo(lineSpacing);\n this.alignment = new DropDownList({ width: 180, change: this.changeByTextAlignment });\n this.alignment.appendTo(alignment);\n this.atIn.appendTo(lineSpacingAt);\n this.target.addEventListener('keyup', instance.keyUpParagraphSettings);\n };\n /**\n * Applies Paragraph Format\n * @param {WParagraphFormat} paragraphFormat\n * @private\n */\n ParagraphDialog.prototype.onParagraphFormat = function (paragraphFormat) {\n this.owner.owner.editorModule.initHistory('ParagraphFormat');\n var selection = this.owner.selection;\n this.owner.owner.isShiftingEnabled = true;\n if (this.owner.selection.isEmpty) {\n this.owner.owner.editorModule.applyParaFormatProperty(selection.start.paragraph, undefined, paragraphFormat, false);\n }\n else {\n this.owner.owner.editorModule.updateSelectionParagraphFormatting('ParagraphFormat', paragraphFormat, false);\n }\n this.owner.owner.editorModule.reLayout(selection);\n };\n /**\n * @private\n */\n ParagraphDialog.prototype.show = function (paragraphFormat) {\n if (paragraphFormat) {\n this.paragraphFormat = paragraphFormat;\n }\n var local = new L10n('documenteditor', this.owner.owner.defaultLocale);\n local.setLocale(this.owner.owner.locale);\n setCulture(this.owner.owner.locale);\n if (!this.target) {\n this.initParagraphDialog(local);\n }\n this.loadParagraphDialog();\n this.owner.dialog.header = 'Paragraph';\n this.owner.dialog.content = this.target;\n this.owner.dialog.height = 'auto';\n this.owner.dialog.width = 'auto';\n this.owner.dialog.buttons = [{\n click: this.applyParagraphFormat,\n buttonModel: { content: local.getConstant('Ok'), cssClass: 'e-flat e-para-okay', isPrimary: true }\n },\n {\n click: this.closeParagraphDialog,\n buttonModel: { content: local.getConstant('Cancel'), cssClass: 'e-flat e-para-cancel' }\n }];\n this.owner.dialog.beforeOpen = this.owner.updateFocus;\n this.owner.dialog.close = this.owner.updateFocus;\n this.owner.dialog.dataBind();\n this.owner.dialog.show();\n };\n /**\n * @private\n */\n ParagraphDialog.prototype.destroy = function () {\n if (this.afterSpacingIn) {\n this.afterSpacingIn.destroy();\n this.afterSpacingIn = undefined;\n }\n if (this.beforeSpacingIn) {\n this.beforeSpacingIn.destroy();\n this.beforeSpacingIn = undefined;\n }\n if (this.leftIndentIn) {\n this.leftIndentIn.destroy();\n this.leftIndentIn = undefined;\n }\n if (this.rightIndentIn) {\n this.rightIndentIn.destroy();\n this.rightIndentIn = undefined;\n }\n if (this.byIn) {\n this.byIn.destroy();\n this.byIn = undefined;\n }\n if (this.atIn) {\n this.atIn.destroy();\n this.atIn = undefined;\n }\n if (this.alignment) {\n this.alignment.change = undefined;\n this.alignment.destroy();\n }\n this.alignment = undefined;\n if (this.lineSpacing) {\n this.lineSpacing.change = undefined;\n this.lineSpacing.destroy();\n }\n this.lineSpacing = undefined;\n if (this.special) {\n this.special.change = undefined;\n this.special.destroy();\n }\n this.special = undefined;\n this.owner = undefined;\n if (!isNullOrUndefined(this.target)) {\n if (this.target.parentElement) {\n this.target.parentElement.removeChild(this.target);\n }\n for (var q = 0; q < this.target.childNodes.length; q++) {\n this.target.removeChild(this.target.childNodes[q]);\n q--;\n }\n this.target = undefined;\n }\n };\n return ParagraphDialog;\n}());\nexport { ParagraphDialog };\n","import { WCharacterFormat, WParagraphFormat } from '../format/index';\nimport { WList } from '../list/list';\nimport { WAbstractList } from '../list/abstract-list';\nimport { WListLevel } from '../list/list-level';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * List view model implementation\n * @private\n */\nvar ListViewModel = /** @class */ (function () {\n /**\n * @private\n */\n function ListViewModel() {\n this.listIn = undefined;\n this.levelNumberIn = undefined;\n /**\n * @private\n */\n this.dialog = undefined;\n this.levelNumber = 0;\n }\n Object.defineProperty(ListViewModel.prototype, \"levelNumber\", {\n /**\n * @private\n */\n get: function () {\n return this.levelNumberIn;\n },\n /**\n * @private\n */\n set: function (value) {\n this.levelNumberIn = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ListViewModel.prototype, \"list\", {\n /**\n * @private\n */\n get: function () {\n return this.listIn;\n },\n /**\n * @private\n */\n set: function (value) {\n if (isNullOrUndefined(value)) {\n this.createList();\n }\n else {\n this.listIn = value;\n }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ListViewModel.prototype, \"listLevel\", {\n /**\n * @private\n */\n get: function () {\n if (!isNullOrUndefined(this.list) && this.levelNumber >= 0 && this.levelNumber < 9) {\n if (!isNullOrUndefined(this.dialog.owner.getAbstractListById(this.list.abstractListId))) {\n if (this.dialog.owner.getAbstractListById(this.list.abstractListId).levels.length <= this.levelNumber) {\n this.addListLevels();\n }\n return this.dialog.owner.getAbstractListById(this.list.abstractListId).levels[this.levelNumber];\n }\n else {\n this.dialog.owner.lists.push(this.list);\n var abstractList = this.list.abstractList;\n if (!this.list.abstractList) {\n abstractList = new WAbstractList();\n abstractList.abstractListId = this.list.abstractListId;\n }\n var listLevelAdv = new WListLevel(abstractList);\n listLevelAdv.characterFormat = new WCharacterFormat(listLevelAdv);\n listLevelAdv.paragraphFormat = new WParagraphFormat(listLevelAdv);\n listLevelAdv.paragraphFormat.leftIndent = (1) * 48;\n listLevelAdv.paragraphFormat.firstLineIndent = -24;\n listLevelAdv.numberFormat = '%' + (1).toString() + '.';\n listLevelAdv.listLevelPattern = 'UpRoman';\n listLevelAdv.followCharacter = 'Tab';\n listLevelAdv.startAt = 1;\n listLevelAdv.restartLevel = 1;\n this.dialog.owner.abstractLists.push(abstractList);\n return this.dialog.owner.getAbstractListById(this.list.abstractListId).levels[0];\n // return this.dialog.owner.getAbstractListById(this.list.abstractListId).levels.getItem(0);\n }\n }\n return undefined;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ListViewModel.prototype, \"listLevelPattern\", {\n /**\n * @private\n */\n get: function () {\n if (!isNullOrUndefined(this.listLevel)) {\n return this.listLevel.listLevelPattern;\n }\n return 'Arabic';\n },\n /**\n * @private\n */\n set: function (value) {\n if (!isNullOrUndefined(this.listLevel)) {\n this.listLevel.listLevelPattern = value;\n }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ListViewModel.prototype, \"followCharacter\", {\n /**\n * @private\n */\n get: function () {\n if (!isNullOrUndefined(this.listLevel)) {\n return this.listLevel.followCharacter;\n }\n return 'None';\n },\n /**\n * @private\n */\n set: function (value) {\n if (!isNullOrUndefined(this.listLevel)) {\n this.listLevel.followCharacter = value;\n }\n },\n enumerable: true,\n configurable: true\n });\n ListViewModel.prototype.createList = function () {\n this.list = new WList();\n this.list.listId = this.dialog.owner.lists.length + 1;\n var abstractList = new WAbstractList();\n abstractList.abstractListId = this.dialog.owner.abstractLists.length + 1;\n this.list.abstractListId = abstractList.abstractListId;\n this.dialog.owner.lists.push(this.list);\n var listLevel = new WListLevel(abstractList);\n listLevel.paragraphFormat = new WParagraphFormat(listLevel);\n listLevel.paragraphFormat.leftIndent = 48;\n listLevel.paragraphFormat.firstLineIndent = -24;\n listLevel.characterFormat = new WCharacterFormat(listLevel);\n listLevel.numberFormat = '%1.';\n listLevel.startAt = 1;\n abstractList.levels.push(listLevel);\n this.dialog.owner.abstractLists.push(abstractList);\n };\n ListViewModel.prototype.addListLevels = function () {\n if (!isNullOrUndefined(this.list) && !isNullOrUndefined(this.list.abstractListId)) {\n for (var i = this.dialog.owner.getAbstractListById(this.list.abstractListId).levels.length; i < 9; i++) {\n var listLevelAdv = new WListLevel(this.dialog.owner.getAbstractListById(this.list.abstractListId));\n listLevelAdv.characterFormat = new WCharacterFormat(listLevelAdv);\n listLevelAdv.paragraphFormat = new WParagraphFormat(listLevelAdv);\n listLevelAdv.paragraphFormat.leftIndent = (i + 1) * 48;\n listLevelAdv.paragraphFormat.firstLineIndent = -24;\n listLevelAdv.numberFormat = '%' + (i + 1).toString() + '.';\n listLevelAdv.listLevelPattern = 'Arabic';\n listLevelAdv.followCharacter = 'Tab';\n listLevelAdv.startAt = 1;\n listLevelAdv.restartLevel = i;\n (this.dialog.owner).getAbstractListById(this.list.abstractListId).levels.push(listLevelAdv);\n }\n }\n };\n /**\n * @private\n */\n ListViewModel.prototype.destroy = function () {\n this.list = undefined;\n this.followCharacter = undefined;\n this.levelNumber = undefined;\n this.listLevelPattern = undefined;\n };\n return ListViewModel;\n}());\nexport { ListViewModel };\n","import { NumericTextBox } from '@syncfusion/ej2-inputs';\nimport { createElement, L10n, setCulture } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\n// tslint:disable-next-line:max-line-length\nimport { WCharacterFormat, WParagraphFormat } from '../format/index';\nimport { WAbstractList } from '../list/abstract-list';\nimport { WLevelOverride } from '../list/level-override';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nimport { Tooltip } from '@syncfusion/ej2-popups';\nimport { ListViewModel } from './list-view-model';\n/**\n * The List dialog is used to create or modify lists.\n */\n/* tslint:disable:no-any */\nvar ListDialog = /** @class */ (function () {\n /**\n * @private\n */\n function ListDialog(viewer) {\n var _this = this;\n /**\n * @private\n */\n this.dialog = undefined;\n this.target = undefined;\n /**\n * @private\n */\n this.owner = undefined;\n this.viewModel = undefined;\n this.startAt = undefined;\n this.textIndent = undefined;\n this.alignedAt = undefined;\n this.listLevelElement = undefined;\n this.followNumberWith = undefined;\n this.numberStyle = undefined;\n this.numberFormat = undefined;\n this.restartBy = undefined;\n /**\n * @private\n */\n this.isListCharacterFormat = false;\n this.onTextIndentChanged = function (args) {\n _this.viewModel.listLevel.paragraphFormat.leftIndent = args.value;\n };\n this.onStartValueChanged = function (args) {\n _this.viewModel.listLevel.startAt = args.value;\n };\n this.onListLevelValueChanged = function (args) {\n _this.viewModel.levelNumber = parseInt(args.value.slice(args.value.length - 1), 10) - 1;\n if (isNullOrUndefined(_this.listLevel)) {\n return;\n }\n if (isNullOrUndefined(_this.listLevel.characterFormat)) {\n _this.listLevel.characterFormat = new WCharacterFormat(_this.viewModel.listLevel);\n }\n if (!isNullOrUndefined(_this.listLevel.paragraphFormat)) {\n _this.listLevel.paragraphFormat = new WParagraphFormat(_this.viewModel.listLevel);\n }\n _this.updateDialogValues();\n _this.updateRestartLevelBox();\n };\n this.onNumberFormatChanged = function (args) {\n _this.viewModel.listLevel.numberFormat = args.target.value;\n };\n this.onAlignedAtValueChanged = function (args) {\n _this.viewModel.listLevel.paragraphFormat.firstLineIndent = args.value;\n };\n this.onFollowCharacterValueChanged = function (args) {\n if (args.value) {\n _this.viewModel.followCharacter = args.value;\n }\n };\n this.onLevelPatternValueChanged = function (args) {\n _this.viewModel.listLevelPattern = args.value;\n var numberFormat = '%' + (_this.levelNumber + 1).toString();\n // tslint:disable-next-line:max-line-length\n var numberFormatTextBox = document.getElementById(_this.owner.owner.containerId + '_numberFormat');\n if (_this.listLevel.listLevelPattern === 'Bullet') {\n _this.listLevel.numberFormat = '\\uf0b7';\n numberFormatTextBox.value = _this.listLevel.numberFormat;\n _this.listLevel.characterFormat.fontFamily = 'Wingdings';\n }\n else {\n if (_this.listLevel.listLevelPattern === 'None') {\n _this.listLevel.numberFormat = '';\n }\n if (!_this.listLevel.numberFormat.match(numberFormat) && _this.listLevel.listLevelPattern !== 'None') {\n _this.listLevel.numberFormat = numberFormat + '.';\n }\n numberFormatTextBox.value = _this.listLevel.numberFormat;\n }\n };\n this.loadListDialog = function () {\n _this.owner.updateFocus();\n if (isNullOrUndefined(_this.owner.owner)) {\n return;\n }\n _this.viewModel = new ListViewModel();\n _this.viewModel.dialog = _this;\n if (_this.owner.selection.paragraphFormat.listLevelNumber > 0) {\n _this.viewModel.levelNumber = _this.owner.selection.paragraphFormat.listLevelNumber;\n }\n _this.viewModel.list = _this.owner.selection.paragraphFormat.getList();\n if (isNullOrUndefined(_this.listLevel)) {\n return;\n }\n if (isNullOrUndefined(_this.listLevel.characterFormat)) {\n _this.listLevel.characterFormat = new WCharacterFormat(_this.viewModel.listLevel);\n }\n if (isNullOrUndefined(_this.listLevel.paragraphFormat)) {\n _this.listLevel.paragraphFormat = new WParagraphFormat(_this.viewModel.listLevel);\n }\n _this.updateDialogValues();\n if (_this.owner.selection.caret.style.display !== 'none') {\n _this.owner.selection.caret.style.display = 'none';\n }\n };\n this.showFontDialog = function () {\n _this.owner.owner.fontDialogModule.showFontDialog(_this.listLevel.characterFormat);\n };\n this.onApplyList = function () {\n if (!isNullOrUndefined(_this.owner)) {\n _this.owner.selection.paragraphFormat.setList(_this.list);\n }\n _this.owner.dialog2.hide();\n _this.owner.updateFocus();\n };\n this.onCancelButtonClick = function () {\n _this.disposeBindingForListUI();\n _this.owner.dialog2.hide();\n _this.owner.updateFocus();\n _this.isListCharacterFormat = false;\n };\n this.closeListDialog = function () {\n _this.disposeBindingForListUI();\n _this.owner.updateFocus();\n _this.isListCharacterFormat = false;\n };\n this.owner = viewer;\n this.viewModel = new ListViewModel();\n }\n Object.defineProperty(ListDialog.prototype, \"listLevel\", {\n /**\n * @private\n */\n get: function () {\n if (!isNullOrUndefined(this.viewModel)) {\n return this.viewModel.listLevel;\n }\n return undefined;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ListDialog.prototype, \"list\", {\n /**\n * @private\n */\n get: function () {\n if (!isNullOrUndefined(this.viewModel)) {\n return this.viewModel.list;\n }\n return undefined;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ListDialog.prototype, \"levelNumber\", {\n /**\n * @private\n */\n get: function () {\n if (this.listLevel.ownerBase instanceof WLevelOverride) {\n return this.listLevel.ownerBase.levelNumber;\n // tslint:disable-next-line:max-line-length\n }\n else if (this.listLevel.ownerBase instanceof WAbstractList && !isNullOrUndefined(this.listLevel.ownerBase.levels)) {\n return this.listLevel.ownerBase.levels.indexOf(this.listLevel);\n }\n else {\n return -1;\n }\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @private\n */\n ListDialog.prototype.getModuleName = function () {\n return 'ListDialog';\n };\n /**\n * @private\n */\n ListDialog.prototype.showListDialog = function () {\n var locale = new L10n('documenteditor', this.owner.owner.defaultLocale);\n locale.setLocale(this.owner.owner.locale);\n setCulture(this.owner.owner.locale);\n if (!this.target) {\n this.initListDialog(locale);\n }\n this.isListCharacterFormat = true;\n this.owner.dialog2.header = locale.getConstant('List');\n this.owner.dialog2.height = 'auto';\n this.owner.dialog2.width = 'auto';\n this.owner.dialog2.content = this.target;\n this.owner.dialog2.buttons = [{\n click: this.showFontDialog,\n buttonModel: { content: locale.getConstant('Font'), cssClass: 'e-flat e-list-dlg-font e-font' }\n }, {\n click: this.onApplyList,\n buttonModel: { content: locale.getConstant('Ok'), cssClass: 'e-flat e-list-dlg', isPrimary: true }\n },\n {\n click: this.onCancelButtonClick,\n buttonModel: { content: locale.getConstant('Cancel'), cssClass: 'e-flat e-list-dlg' }\n }];\n this.owner.dialog2.dataBind();\n this.owner.dialog2.beforeOpen = this.loadListDialog;\n this.owner.dialog2.close = this.closeListDialog;\n this.owner.dialog2.position = { X: 'center', Y: 'top' };\n this.owner.dialog2.show();\n };\n /**\n * Shows the table properties dialog\n * @private\n */\n ListDialog.prototype.initListDialog = function (locale) {\n var instance = this;\n var containerId = this.owner.owner.containerId;\n var id = containerId + '_insert_list';\n this.target = createElement('div', { id: id, className: 'e-de-list-dlg' });\n this.owner.owner.element.appendChild(this.target);\n // tslint:disable-next-line:max-line-length\n var listLevelDiv = createElement('div', { innerHTML: '' });\n this.target.appendChild(listLevelDiv);\n var div = createElement('div');\n // tslint:disable-next-line:max-line-length\n var numberStyleDiv = createElement('div', { innerHTML: '' });\n div.appendChild(numberFormatDiv);\n this.target.appendChild(div);\n // tslint:disable-next-line:max-line-length\n var indentsDiv = createElement('div', { innerHTML: '', });\n this.target.appendChild(indentsDiv);\n var startAtTextBox = document.getElementById(containerId + '_startAt');\n var textIndentAtTextBox = document.getElementById(containerId + '_textIndent');\n var alignedAtTextBox = document.getElementById(containerId + '_alignedAt');\n this.startAt = new NumericTextBox({\n format: '#',\n decimals: 0,\n min: 0,\n max: 50,\n width: '180px',\n enablePersistence: false,\n });\n this.startAt.addEventListener('change', instance.onStartValueChanged);\n this.startAt.appendTo(startAtTextBox);\n this.textIndent = new NumericTextBox({\n format: '#',\n decimals: 0,\n min: 0,\n max: 1584,\n width: '180px',\n step: 4,\n enablePersistence: false\n });\n this.textIndent.addEventListener('change', instance.onTextIndentChanged);\n this.textIndent.appendTo(textIndentAtTextBox);\n this.alignedAt = new NumericTextBox({\n format: '#',\n max: 1584,\n step: 6,\n width: '180px',\n enablePersistence: false\n });\n this.alignedAt.addEventListener('change', instance.onAlignedAtValueChanged);\n this.alignedAt.appendTo(alignedAtTextBox);\n var listLevel = document.getElementById(containerId + '_listLevel');\n this.listLevelElement = new DropDownList({ popupHeight: '150px', width: '180px', change: instance.onListLevelValueChanged });\n this.listLevelElement.appendTo(listLevel);\n var followCharacterElement = document.getElementById(containerId + '_followCharacter');\n this.followNumberWith = new DropDownList({ popupHeight: '150px', width: '180px', change: instance.onFollowCharacterValueChanged });\n this.followNumberWith.appendTo(followCharacterElement);\n var numberStyleEle = document.getElementById(containerId + '_numberStyle');\n this.numberStyle = new DropDownList({ popupHeight: '150px', width: '180px', change: instance.onLevelPatternValueChanged });\n this.numberStyle.appendTo(numberStyleEle);\n this.numberFormat = document.getElementById(containerId + '_numberFormat');\n this.numberFormat.addEventListener('change', instance.onNumberFormatChanged);\n var restartElement = document.getElementById(containerId + '_restartBy');\n this.restartBy = new DropDownList({ popupHeight: '150px', width: '180px' });\n this.restartBy.appendTo(restartElement);\n var button = document.getElementById(containerId + '_list_info');\n this.formatInfoToolTip = new Tooltip({ width: 200 });\n // tslint:disable-next-line:max-line-length\n this.formatInfoToolTip.content = locale.getConstant('listInfo');\n this.formatInfoToolTip.position = 'RightTop';\n this.formatInfoToolTip.appendTo(button);\n };\n ListDialog.prototype.updateRestartLevelBox = function () {\n var containerId = this.owner.owner.containerId;\n var listLevel = document.getElementById(containerId + '_listLevel');\n var restartBy = document.getElementById(containerId + '_restartBy');\n for (var i = 0; i < restartBy.options.length; i) {\n restartBy.options.remove(i);\n }\n if (listLevel.selectedIndex === 0) {\n var option = document.createElement('option');\n option.value = 'No Restart';\n option.innerHTML = 'No Restart';\n restartBy.appendChild(option);\n }\n else {\n for (var i = listLevel.selectedIndex; i > 0; i--) {\n var option_1 = document.createElement('option');\n option_1.value = 'Level ' + i;\n option_1.innerHTML = 'Level ' + i;\n restartBy.appendChild(option_1);\n }\n var option = document.createElement('option');\n option.value = 'No Restart';\n option.innerHTML = 'No Restart';\n restartBy.appendChild(option);\n }\n restartBy.selectedIndex = 0;\n };\n ListDialog.prototype.listPatternConverter = function (listLevelPattern) {\n switch (listLevelPattern) {\n case 'Arabic': return 0;\n case 'UpRoman': return 1;\n case 'LowRoman': return 2;\n case 'UpLetter': return 3;\n case 'LowLetter': return 4;\n case 'Number': return 5;\n case 'LeadingZero': return 6;\n case 'Bullet': return 7;\n case 'Ordinal': return 8;\n case 'OrdinalText': return 9;\n case 'Special': return 10;\n case 'FarEast': return 11;\n default: return 12;\n }\n };\n ListDialog.prototype.followCharacterConverter = function (followCharacter) {\n switch (followCharacter) {\n case 'Tab':\n return 0;\n case 'Space':\n return 1;\n default:\n return 2;\n }\n };\n ListDialog.prototype.updateDialogValues = function () {\n // tslint:disable-next-line:max-line-length\n var restartByTextBox = document.getElementById(this.owner.owner.containerId + '_restartBy');\n this.startAt.value = this.viewModel.listLevel.startAt;\n this.textIndent.value = this.viewModel.listLevel.paragraphFormat.leftIndent;\n this.alignedAt.value = this.viewModel.listLevel.paragraphFormat.firstLineIndent;\n this.followNumberWith.index = this.followCharacterConverter(this.viewModel.followCharacter);\n this.numberFormat.value = this.viewModel.listLevel.numberFormat;\n this.numberStyle.index = this.listPatternConverter(this.viewModel.listLevelPattern);\n this.listLevelElement.index = this.viewModel.levelNumber;\n this.viewModel.levelNumber = this.viewModel.levelNumber;\n };\n ListDialog.prototype.disposeBindingForListUI = function () {\n this.followNumberWith.index = -1;\n this.numberFormat.value = ' ';\n this.numberStyle.index = -1;\n this.listLevelElement.index = -1;\n this.restartBy.index = -1;\n this.viewModel.destroy();\n };\n /**\n * @private\n */\n ListDialog.prototype.destroy = function () {\n if (this.alignedAt) {\n this.alignedAt.destroy();\n }\n this.alignedAt = undefined;\n this.dialog = undefined;\n if (this.followNumberWith) {\n this.followNumberWith.destroy();\n }\n this.followNumberWith = undefined;\n if (this.listLevelElement) {\n this.listLevelElement.destroy();\n }\n this.listLevelElement = undefined;\n if (this.textIndent) {\n this.textIndent.destroy();\n }\n this.textIndent = undefined;\n if (this.startAt) {\n this.startAt.destroy();\n }\n this.startAt = undefined;\n if (this.numberStyle) {\n this.numberStyle.destroy();\n }\n this.numberStyle = undefined;\n this.numberFormat = undefined;\n if (this.restartBy) {\n this.restartBy.destroy();\n }\n this.restartBy = undefined;\n if (!isNullOrUndefined(this.target)) {\n if (this.target.parentElement) {\n this.target.parentElement.removeChild(this.target);\n }\n for (var l = 0; l < this.target.childNodes.length; l++) {\n this.target.removeChild(this.target.childNodes[l]);\n l--;\n }\n this.target = undefined;\n }\n this.owner = undefined;\n this.viewModel = undefined;\n };\n return ListDialog;\n}());\nexport { ListDialog };\n/* tslint:enable:no-any */ \n","import { createElement, isNullOrUndefined, L10n, setCulture } from '@syncfusion/ej2-base';\nimport { DropDownList, ComboBox } from '@syncfusion/ej2-dropdowns';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { WCharacterStyle, WParagraphStyle } from '../../implementation/format/style';\nimport { BulletsAndNumberingDialog } from './index';\nimport { WAbstractList } from '../list/abstract-list';\nimport { ColorPicker } from '@syncfusion/ej2-inputs';\nimport { DropDownButton } from '@syncfusion/ej2-splitbuttons';\n/**\n * The Style dialog is used to create or modify styles.\n */\nvar StyleDialog = /** @class */ (function () {\n /**\n * @private\n */\n function StyleDialog(viewer) {\n var _this = this;\n this.target = undefined;\n this.styleType = undefined;\n this.styleBasedOn = undefined;\n this.styleParagraph = undefined;\n this.onlyThisDocument = undefined;\n this.template = undefined;\n this.fontFamily = undefined;\n this.fontSize = undefined;\n this.characterFormat = undefined;\n this.paragraphFormat = undefined;\n /* tslint:disable-next-line:no-any */\n this.openDialog = function (args) {\n switch (args.item.id) {\n case 'style_font':\n _this.showFontDialog();\n break;\n case 'style_paragraph':\n _this.showParagraphDialog();\n break;\n case 'style_numbering':\n _this.showNumberingBulletDialog();\n break;\n }\n };\n this.setBoldProperty = function () {\n _this.characterFormat.bold = !_this.characterFormat.bold;\n _this.fontButtonClicked(undefined);\n };\n this.setItalicProperty = function () {\n _this.characterFormat.italic = !_this.characterFormat.italic;\n _this.fontButtonClicked(undefined);\n };\n this.setUnderlineProperty = function () {\n _this.characterFormat.underline = _this.characterFormat.underline === 'None' ? 'Single' : 'None';\n _this.fontButtonClicked(undefined);\n };\n /* tslint:disable-next-line:no-any */\n this.fontButtonClicked = function (args) {\n if (_this.characterFormat.bold) {\n if (!_this.bold.classList.contains('e-active')) {\n _this.bold.classList.add('e-active');\n }\n }\n else {\n if (_this.bold.classList.contains('e-active')) {\n _this.bold.classList.remove('e-active');\n }\n }\n if (_this.characterFormat.italic) {\n if (!_this.italic.classList.contains('e-active')) {\n _this.italic.classList.add('e-active');\n }\n }\n else {\n if (_this.italic.classList.contains('e-active')) {\n _this.italic.classList.remove('e-active');\n }\n }\n if (_this.characterFormat.underline !== undefined && _this.characterFormat.underline !== 'None') {\n if (!_this.underline.classList.contains('e-active')) {\n _this.underline.classList.add('e-active');\n _this.characterFormat.underline = 'Single';\n }\n }\n else {\n if (_this.underline.classList.contains('e-active')) {\n _this.underline.classList.remove('e-active');\n _this.characterFormat.underline = 'None';\n }\n }\n };\n /* tslint:disable-next-line:no-any */\n this.fontSizeUpdate = function (args) {\n _this.characterFormat.fontSize = args.value;\n };\n /* tslint:disable-next-line:no-any */\n this.fontFamilyChanged = function (args) {\n _this.characterFormat.fontFamily = args.value;\n };\n /* tslint:disable-next-line:no-any */\n this.fontColorUpdate = function (args) {\n _this.characterFormat.fontColor = args.currentValue.rgba;\n };\n this.setLeftAlignment = function () {\n if (_this.paragraphFormat.textAlignment === 'Left') {\n _this.paragraphFormat.textAlignment = 'Justify';\n }\n else {\n _this.paragraphFormat.textAlignment = 'Left';\n }\n _this.updateParagraphFormat();\n };\n this.setRightAlignment = function () {\n if (_this.paragraphFormat.textAlignment === 'Right') {\n _this.paragraphFormat.textAlignment = 'Left';\n }\n else {\n _this.paragraphFormat.textAlignment = 'Right';\n }\n _this.updateParagraphFormat();\n };\n this.setCenterAlignment = function () {\n if (_this.paragraphFormat.textAlignment === 'Center') {\n _this.paragraphFormat.textAlignment = 'Left';\n }\n else {\n _this.paragraphFormat.textAlignment = 'Center';\n }\n _this.updateParagraphFormat();\n };\n this.setJustifyAlignment = function () {\n if (_this.paragraphFormat.textAlignment === 'Justify') {\n _this.paragraphFormat.textAlignment = 'Left';\n }\n else {\n _this.paragraphFormat.textAlignment = 'Justify';\n }\n _this.updateParagraphFormat();\n };\n this.increaseBeforeAfterSpacing = function () {\n _this.paragraphFormat.beforeSpacing += 6;\n _this.paragraphFormat.afterSpacing += 6;\n };\n this.decreaseBeforeAfterSpacing = function () {\n if (_this.paragraphFormat.beforeSpacing >= 6) {\n _this.paragraphFormat.beforeSpacing -= 6;\n }\n else {\n _this.paragraphFormat.beforeSpacing = 0;\n }\n if (_this.paragraphFormat.afterSpacing >= 6) {\n _this.paragraphFormat.afterSpacing -= 6;\n }\n else {\n _this.paragraphFormat.afterSpacing = 0;\n }\n };\n /**\n * @private\n */\n this.updateNextStyle = function (args) {\n var typedName = args.srcElement.value;\n if (_this.getTypeValue() === 'Paragraph' && !isNullOrUndefined(typedName) && typedName !== '' && !_this.isUserNextParaUpdated) {\n var styles = _this.owner.owner.viewer.styles.getStyleNames(_this.getTypeValue());\n if (_this.isEdit) {\n styles = styles.filter(function (e) { return e !== _this.editStyleName; });\n }\n styles.push(typedName);\n _this.styleParagraph.dataSource = styles;\n _this.styleParagraph.index = null;\n _this.styleParagraph.index = styles.indexOf(typedName);\n _this.styleParagraph.dataBind();\n }\n };\n /**\n * @private\n */\n this.updateOkButton = function () {\n var styleName = _this.target.getElementsByClassName('e-input e-de-style-dlg-name-input').item(0).value;\n _this.enableOrDisableOkButton();\n };\n /**\n * @private\n */\n /* tslint:disable-next-line:no-any */\n this.styleTypeChange = function (args) {\n if (args.isInteracted) {\n var type = void 0;\n if (args.value === 'Character') {\n _this.style = new WCharacterStyle();\n type = 'Character';\n }\n if (args.value === 'Paragraph' || args.value === 'Linked(Paragraph and Character)') {\n _this.style = new WParagraphStyle();\n type = 'Paragraph';\n }\n _this.toggleDisable();\n _this.updateStyleNames(type);\n }\n };\n /* tslint:disable-next-line:no-any */\n this.styleBasedOnChange = function (args) {\n //Based on change\n };\n /**\n * @private\n */\n /* tslint:disable-next-line:no-any */\n this.styleParagraphChange = function (args) {\n if (args.isInteracted) {\n _this.isUserNextParaUpdated = true;\n }\n //Next change\n };\n /**\n * @private\n */\n this.showFontDialog = function () {\n if (!isNullOrUndefined(_this.owner.owner.fontDialogModule)) {\n _this.owner.owner.showFontDialog(_this.characterFormat);\n }\n _this.updateCharacterFormat();\n };\n /**\n * @private\n */\n this.showParagraphDialog = function () {\n if (!isNullOrUndefined(_this.owner.owner.paragraphDialogModule)) {\n _this.owner.owner.showParagraphDialog(_this.paragraphFormat);\n }\n };\n /**\n * @private\n */\n this.showNumberingBulletDialog = function () {\n _this.numberingBulletDialog = new BulletsAndNumberingDialog(_this.owner.owner.viewer);\n _this.numberingBulletDialog.showNumberBulletDialog(_this.style.paragraphFormat.listFormat, _this.abstractList);\n };\n /**\n * @private\n */\n this.onOkButtonClick = function () {\n var styleName = _this.styleNameElement.value;\n if (styleName.length > 0) {\n var style = _this.owner.owner.viewer.styles.findByName(styleName);\n var name_1;\n if (!isNullOrUndefined(style)) {\n _this.style.type = _this.getTypeValue();\n _this.style.basedOn = _this.owner.owner.viewer.styles.findByName(_this.styleBasedOn.value);\n if (_this.styleType.value === 'Paragraph' || _this.styleType.value === 'Linked(Paragraph and Character)') {\n _this.style.next = _this.owner.owner.viewer.styles.findByName(_this.styleParagraph.value);\n _this.style.characterFormat.mergeFormat(style.characterFormat);\n _this.style.paragraphFormat.mergeFormat(style.paragraphFormat);\n _this.updateList();\n // tslint:disable-next-line:max-line-length\n _this.style.link = (_this.styleType.value === 'Linked(Paragraph and Character)') ? _this.createLinkStyle(styleName, _this.isEdit) : undefined;\n }\n //Updating existing style implementation\n _this.style.name = style.name;\n name_1 = style.name;\n style = _this.style;\n _this.owner.owner.isShiftingEnabled = true;\n _this.owner.owner.editorModule.layoutWholeDocument();\n _this.owner.owner.isShiftingEnabled = false;\n }\n else {\n /* tslint:disable-next-line:no-any */\n var basedOn = _this.owner.owner.viewer.styles.findByName(_this.styleBasedOn.value);\n if (_this.styleType.value === 'Paragraph' || _this.styleType.value === 'Linked(Paragraph and Character)') {\n if (styleName === _this.styleParagraph.value) {\n _this.style.next = _this.style;\n }\n else {\n _this.style.next = _this.owner.owner.viewer.styles.findByName(_this.styleParagraph.value);\n }\n _this.updateList();\n }\n // tslint:disable-next-line:max-line-length\n _this.style.link = (_this.styleType.value === 'Linked(Paragraph and Character)') ? _this.createLinkStyle(styleName) : undefined;\n _this.style.type = _this.getTypeValue();\n _this.style.name = styleName;\n _this.style.basedOn = basedOn;\n /* tslint:disable-next-line:no-any */\n _this.owner.owner.viewer.styles.push(_this.style);\n name_1 = styleName;\n _this.owner.owner.editorModule.applyStyle(name_1);\n }\n _this.owner.owner.viewer.dialog2.hide();\n }\n else {\n throw new Error('Enter valid Style name');\n }\n if (_this.style) {\n //this.style.destroy();\n }\n };\n /* tslint:disable-next-line:no-any */\n this.loadStyleDialog = function (args) {\n _this.owner.owner.viewer.updateFocus();\n _this.isUserNextParaUpdated = false;\n /* tslint:disable-next-line:max-line-length */\n _this.styleNameElement = _this.target.getElementsByClassName('e-input e-de-style-dlg-name-input').item(0);\n _this.styleNameElement.value = null;\n if (!_this.isEdit) {\n _this.styleType.index = 0; //Set to paragraph \n }\n var name;\n if (_this.isEdit) {\n _this.styleNameElement.value = _this.editStyleName;\n name = _this.editStyleName;\n }\n /* tslint:disable-next-line:max-line-length */\n _this.okButton = _this.owner.dialog2.element.getElementsByClassName('e-flat e-style-okay').item(0);\n _this.enableOrDisableOkButton();\n _this.updateStyleNames(_this.getTypeValue(), name);\n _this.updateCharacterFormat(_this.style.characterFormat);\n _this.updateParagraphFormat(_this.style.paragraphFormat);\n };\n /**\n * @private\n */\n this.onCancelButtonClick = function () {\n if (!_this.isEdit && _this.style) {\n _this.style.destroy();\n }\n _this.owner.owner.viewer.dialog2.hide();\n };\n /**\n * @private\n */\n this.closeStyleDialog = function () {\n _this.owner.owner.viewer.updateFocus();\n };\n this.owner = viewer;\n }\n /**\n * @private\n */\n StyleDialog.prototype.getModuleName = function () {\n return 'StyleDialog';\n };\n /**\n * @private\n */\n //tslint:disable: max-func-body-length\n StyleDialog.prototype.initStyleDialog = function (localValue) {\n var instance = this;\n var id = this.owner.owner.containerId + '_style';\n this.target = createElement('div', { id: id, className: 'e-de-style-dialog' });\n var container = createElement('div');\n // tslint:disable-next-line:max-line-length\n var properties = createElement('div', { className: 'e-de-style-properties', innerHTML: localValue.getConstant('Properties') });\n container.appendChild(properties);\n var styleNameTypeDiv = createElement('div', { styles: 'display:flex', className: 'e-de-style-nametype-div' });\n container.appendChild(styleNameTypeDiv);\n var nameWholeDiv = createElement('div', { className: 'e-de-style-left-div' });\n styleNameTypeDiv.appendChild(nameWholeDiv);\n var name = createElement('div', { className: 'e-de-style-name', innerHTML: localValue.getConstant('Name') + ':' });\n nameWholeDiv.appendChild(name);\n // tslint:disable-next-line:max-line-length\n var nameValue = createElement('input', { id: this.owner.owner.containerId + '_style_name', styles: 'width:210px;', className: 'e-input e-de-style-dlg-name-input' });\n nameValue.addEventListener('keyup', this.updateOkButton);\n nameValue.addEventListener('input', this.updateOkButton);\n nameValue.addEventListener('blur', this.updateNextStyle);\n nameWholeDiv.appendChild(nameValue);\n var styleTypeWholeDiv = createElement('div');\n styleNameTypeDiv.appendChild(styleTypeWholeDiv);\n // tslint:disable-next-line:max-line-length\n var styleType = createElement('div', { className: 'e-de-style-styletype', innerHTML: localValue.getConstant('Style type') + ':' });\n styleTypeWholeDiv.appendChild(styleType);\n var styleTypeDivElement = createElement('div', { className: 'e-de-style-style-type-div' });\n var styleTypeValue = createElement('select', { id: 'e-de-style-style-type' });\n // tslint:disable-next-line:max-line-length\n styleTypeValue.innerHTML = ''; //';\n styleTypeDivElement.appendChild(styleTypeValue);\n this.styleType = new DropDownList({ change: this.styleTypeChange, popupHeight: '253px', width: '210px' });\n this.styleType.appendTo(styleTypeValue);\n styleTypeWholeDiv.appendChild(styleTypeDivElement);\n // tslint:disable-next-line:max-line-length\n var styleBasedParaDiv = createElement('div', { styles: 'display:flex', className: 'e-de-style-based-para-div' });\n container.appendChild(styleBasedParaDiv);\n var styleBasedOnWholeDiv = createElement('div', { className: 'e-de-style-left-div' });\n styleBasedParaDiv.appendChild(styleBasedOnWholeDiv);\n // tslint:disable-next-line:max-line-length\n var styleBasedOn = createElement('div', { className: 'e-de-style-style-based-on', innerHTML: localValue.getConstant('Style based on') + ':' });\n styleBasedOnWholeDiv.appendChild(styleBasedOn);\n var styleBasedOnDivElement = createElement('div', { className: 'e-de-style-style-based-on-div' });\n // tslint:disable-next-line:max-line-length\n var styleBasedOnValue = createElement('input', { id: 'e-de-style-style-based-on-value' });\n //styleBasedOnValue.innerHTML = '';\n styleBasedOnDivElement.appendChild(styleBasedOnValue);\n this.styleBasedOn = new DropDownList({ dataSource: [], select: this.styleBasedOnChange, popupHeight: '253px', width: '210px' });\n this.styleBasedOn.appendTo(styleBasedOnValue);\n styleBasedOnWholeDiv.appendChild(styleBasedOnDivElement);\n var styleParagraphWholeDiv = createElement('div', { className: 'e-de-style-left-div' });\n styleBasedParaDiv.appendChild(styleParagraphWholeDiv);\n // tslint:disable-next-line:max-line-length\n var styleParagraph = createElement('div', { className: 'e-de-style-style-paragraph', innerHTML: localValue.getConstant('Style for following paragraph') + ':' });\n styleParagraphWholeDiv.appendChild(styleParagraph);\n var styleParagraphDivElement = createElement('div', { className: 'e-de-style-style-paragraph-div' });\n // tslint:disable-next-line:max-line-length\n var styleParagraphValue = createElement('input', { id: 'e-de-style-style-paragraph-value' });\n // tslint:disable-next-line:max-line-length\n //styleParagraphValue.innerHTML = '';\n styleParagraphDivElement.appendChild(styleParagraphValue);\n this.styleParagraph = new DropDownList({ dataSource: [], select: this.styleParagraphChange, popupHeight: '253px', width: '210px' });\n this.styleParagraph.appendTo(styleParagraphValue);\n styleParagraphWholeDiv.appendChild(styleParagraphDivElement);\n // tslint:disable-next-line:max-line-length\n var formatting = createElement('div', { className: 'e-de-style-formatting', innerHTML: localValue.getConstant('Formatting') });\n container.appendChild(formatting);\n var optionsDiv = createElement('div', { className: 'e-de-style-options-div' });\n container.appendChild(optionsDiv);\n var fontOptionsDiv = createElement('div', { styles: 'display:flex;margin-bottom: 15px;' });\n optionsDiv.appendChild(fontOptionsDiv);\n this.createFontOptions(fontOptionsDiv);\n var paragraphOptionsDiv = createElement('div', { styles: 'display:flex', className: 'e-style-paragraph' });\n optionsDiv.appendChild(paragraphOptionsDiv);\n this.createParagraphOptions(paragraphOptionsDiv);\n // let radioOptionsDiv: HTMLElement = createElement('div', { styles: 'display:flex' });\n // container.appendChild(radioOptionsDiv);\n // let onlyThisDocumentDiv: HTMLElement = createElement('div', { className: 'e-de-style-radio-button' });\n // tslint:disable-next-line:max-line-length\n // let onlyThisDocument: HTMLInputElement = createElement('input', { className: 'e-de-style-only-this-doc', attrs: { type: 'radio' } }) as HTMLInputElement;\n // onlyThisDocumentDiv.appendChild(onlyThisDocument);\n // tslint:disable-next-line:max-line-length\n // this.onlyThisDocument = new RadioButton({ label: 'Only in this document', value: 'only in this document', checked: true, name: 'styles' });\n // this.onlyThisDocument.appendTo(onlyThisDocument);\n // radioOptionsDiv.appendChild(onlyThisDocumentDiv);\n // let templateDiv: HTMLElement = createElement('div', { className: 'e-de-style-radio-button' });\n // tslint:disable-next-line:max-line-length\n // let template: HTMLInputElement = createElement('input', { className: 'e-de-style-temp', attrs: { type: 'radio' } }) as HTMLInputElement;\n // templateDiv.appendChild(template);\n // this.template = new RadioButton({ label: 'Template', value: 'template', name: 'styles' });\n // this.template.appendTo(template);\n // radioOptionsDiv.appendChild(templateDiv);\n this.createFormatDropdown(container, localValue);\n this.target.appendChild(container);\n };\n StyleDialog.prototype.createFormatDropdown = function (parentDiv, localValue) {\n var _this = this;\n var formatBtn = createElement('button', { id: 'style_format_dropdown', innerHTML: localValue.getConstant('Format') });\n formatBtn.style.height = '35px';\n parentDiv.appendChild(formatBtn);\n var items = [{ text: localValue.getConstant('Font..'), id: 'style_font' },\n { text: localValue.getConstant('Paragraph..'), id: 'style_paragraph' },\n { text: localValue.getConstant('Numbering..'), id: 'style_numbering' }];\n var dropDownbtn = new DropDownButton({\n items: items, cssClass: 'e-de-style-format-dropdwn',\n beforeItemRender: function (args) {\n if (_this.styleType.value === 'Character') {\n if (args.item.text === 'Paragraph') {\n args.element.classList.add('e-disabled');\n }\n if (args.item.text === 'Numbering') {\n args.element.classList.add('e-disabled');\n }\n }\n else {\n if (args.item.text === 'Paragraph') {\n args.element.classList.remove('e-disabled');\n }\n if (args.item.text === 'Numbering') {\n args.element.classList.remove('e-disabled');\n }\n }\n }\n });\n dropDownbtn.appendTo(formatBtn);\n dropDownbtn.addEventListener('select', this.openDialog);\n };\n StyleDialog.prototype.createFontOptions = function (parentDiv) {\n var fontFamilyElement = createElement('select', { id: this.target.id + '_fontName' });\n fontFamilyElement.innerHTML = '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '';\n parentDiv.appendChild(fontFamilyElement);\n this.fontFamily = new ComboBox({\n width: '123px', popupWidth: '123px',\n cssClass: 'e-style-font-fmaily-right', change: this.fontFamilyChanged\n });\n this.fontFamily.showClearButton = false;\n this.fontFamily.appendTo(fontFamilyElement);\n var fontSizeElement = createElement('input');\n parentDiv.appendChild(fontSizeElement);\n var sizeDataSource = [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72];\n this.fontSize = new ComboBox({\n dataSource: sizeDataSource, width: '73px', cssClass: 'e-style-font-fmaily-right',\n change: this.fontSizeUpdate\n });\n this.fontSize.showClearButton = false;\n this.fontSize.appendTo(fontSizeElement);\n var fontGroupButton = createElement('div', { className: 'e-de-style-font-group-button' });\n parentDiv.appendChild(fontGroupButton);\n // tslint:disable-next-line:max-line-length\n this.bold = this.createButtonElement(fontGroupButton, 'e-de-bold', 'e-de-style-bold-button-size', this.owner.owner.containerId + '_style_bold');\n this.bold.addEventListener('click', this.setBoldProperty);\n // tslint:disable-next-line:max-line-length\n this.italic = this.createButtonElement(fontGroupButton, 'e-de-italic', 'e-de-style-icon-button-size', this.owner.owner.containerId + '_style_italic');\n this.italic.addEventListener('click', this.setItalicProperty);\n // tslint:disable-next-line:max-line-length\n this.underline = this.createButtonElement(fontGroupButton, 'e-de-underline', 'e-de-style-icon-button-size', this.owner.owner.containerId + '_style_underline');\n this.underline.addEventListener('click', this.setUnderlineProperty);\n var fontColorElement = createElement('input', { attrs: { type: 'color' }, className: 'e-de-style-icon-button-size' });\n parentDiv.appendChild(fontColorElement);\n this.fontColor = new ColorPicker({ cssClass: 'e-de-style-font-color-picker', change: this.fontColorUpdate });\n this.fontColor.appendTo(fontColorElement);\n };\n StyleDialog.prototype.createParagraphOptions = function (parentDiv) {\n var _this = this;\n var alignmentDiv = createElement('div', { className: 'e-de-style-paragraph-group-button' });\n parentDiv.appendChild(alignmentDiv);\n this.leftAlign = this.createButtonElement(alignmentDiv, 'e-de-align-left', 'e-de-style-icon-button-size');\n this.leftAlign.addEventListener('click', this.setLeftAlignment);\n this.centerAlign = this.createButtonElement(alignmentDiv, 'e-de-align-center', 'e-de-style-icon-button-size');\n this.centerAlign.addEventListener('click', this.setCenterAlignment);\n this.rightAlign = this.createButtonElement(alignmentDiv, 'e-de-align-right', 'e-de-style-icon-button-size');\n this.rightAlign.addEventListener('click', this.setRightAlignment);\n this.justify = this.createButtonElement(alignmentDiv, 'e-de-justify', 'e-de-style-icon-button-last-size');\n this.justify.addEventListener('click', this.setJustifyAlignment);\n var lineSpacingDiv = createElement('div', { className: 'e-de-style-paragraph-group-button' });\n parentDiv.appendChild(lineSpacingDiv);\n this.singleLineSpacing = this.createButtonElement(lineSpacingDiv, 'e-de-single-spacing', 'e-de-style-icon-button-first-size');\n this.singleLineSpacing.addEventListener('click', function () {\n _this.paragraphFormat.lineSpacing = 1;\n _this.updateParagraphFormat();\n });\n // tslint:disable-next-line:max-line-length\n this.onePointFiveLineSpacing = this.createButtonElement(lineSpacingDiv, 'e-de-one-point-five-spacing', 'e-de-style-icon-button-size');\n this.onePointFiveLineSpacing.addEventListener('click', function () {\n _this.paragraphFormat.lineSpacing = 1.5;\n _this.updateParagraphFormat();\n });\n this.doubleLineSpacing = this.createButtonElement(lineSpacingDiv, 'e-de-double-spacing', 'e-de-style-icon-button-last-size');\n this.doubleLineSpacing.addEventListener('click', function () {\n _this.paragraphFormat.lineSpacing = 2;\n _this.updateParagraphFormat();\n });\n var spacingDiv = createElement('div', { className: 'e-de-style-paragraph-group-button' });\n parentDiv.appendChild(spacingDiv);\n var beforeSpacing = this.createButtonElement(spacingDiv, 'e-de-before-spacing', 'e-de-style-icon-button-first-size');\n var afterSpacing = this.createButtonElement(spacingDiv, 'e-de-after-spacing', 'e-de-style-icon-button-last-size');\n beforeSpacing.addEventListener('click', this.increaseBeforeAfterSpacing);\n afterSpacing.addEventListener('click', this.decreaseBeforeAfterSpacing);\n var indentingDiv = createElement('div', { className: 'e-de-style-paragraph-indent-group-button' });\n parentDiv.appendChild(indentingDiv);\n var decreaseIndent = this.createButtonElement(indentingDiv, 'e-de-indent', 'e-de-style-icon-button-first-size');\n decreaseIndent.addEventListener('click', function () {\n if (_this.paragraphFormat.leftIndent >= 36) {\n _this.paragraphFormat.leftIndent -= 36;\n }\n else {\n _this.paragraphFormat.leftIndent = 0;\n }\n });\n var increaseindent = this.createButtonElement(indentingDiv, 'e-de-outdent', 'e-de-style-icon-button-size');\n increaseindent.addEventListener('click', function () {\n _this.paragraphFormat.leftIndent += 36;\n });\n };\n StyleDialog.prototype.createButtonElement = function (parentDiv, iconCss, className, id) {\n var buttonElement = createElement('button');\n if (!isNullOrUndefined(id)) {\n buttonElement.id = id;\n }\n parentDiv.appendChild(buttonElement);\n var button = new Button({ iconCss: iconCss, cssClass: className });\n button.appendTo(buttonElement);\n return buttonElement;\n };\n StyleDialog.prototype.toggleDisable = function () {\n if (this.styleType.value === 'Character') {\n this.styleParagraph.enabled = false;\n // tslint:disable-next-line:max-line-length\n this.target.getElementsByClassName('e-style-paragraph').item(0).setAttribute('style', 'display:flex;pointer-events:none;opacity:0.5');\n }\n else {\n this.styleParagraph.enabled = true;\n this.target.getElementsByClassName('e-style-paragraph').item(0).removeAttribute('style');\n this.target.getElementsByClassName('e-style-paragraph').item(0).setAttribute('style', 'display:flex');\n }\n this.styleBasedOn.enabled = true;\n };\n /**\n * @private\n */\n StyleDialog.prototype.show = function (styleName, header) {\n var localObj = new L10n('documenteditor', this.owner.owner.defaultLocale);\n this.isEdit = (!isNullOrUndefined(styleName) && styleName.length > 0) ? true : false;\n this.editStyleName = styleName;\n this.abstractList = new WAbstractList();\n // tslint:disable-next-line:max-line-length\n var style = this.owner.owner.viewer.styles.findByName(styleName);\n this.style = !this.isEdit ? new WParagraphStyle() : style ? style : this.getStyle(styleName);\n localObj.setLocale(this.owner.owner.locale);\n setCulture(this.owner.owner.locale);\n if (!this.target) {\n this.initStyleDialog(localObj);\n }\n if (isNullOrUndefined(header)) {\n header = localObj.getConstant('Create New Style');\n }\n this.owner.owner.viewer.dialog2.header = header;\n this.owner.owner.viewer.dialog2.height = 'auto';\n this.owner.owner.viewer.dialog2.width = 'auto';\n this.owner.owner.viewer.dialog2.content = this.target;\n this.owner.owner.viewer.dialog2.buttons = [{\n click: this.onOkButtonClick,\n buttonModel: { content: localObj.getConstant('Ok'), cssClass: 'e-flat e-style-okay', isPrimary: true }\n },\n {\n click: this.onCancelButtonClick,\n buttonModel: { content: localObj.getConstant('Cancel'), cssClass: 'e-flat e-style-cancel' }\n }];\n this.toggleDisable();\n this.owner.owner.viewer.dialog2.dataBind();\n this.owner.owner.viewer.dialog2.beforeOpen = this.loadStyleDialog;\n this.owner.owner.viewer.dialog2.close = this.closeStyleDialog;\n this.owner.owner.viewer.dialog2.position = { X: 'center', Y: 'center' };\n this.owner.owner.viewer.dialog2.show();\n };\n StyleDialog.prototype.updateList = function () {\n var listId = this.style.paragraphFormat.listFormat.listId;\n if (listId > -1) {\n if (this.owner.owner.viewer.lists.filter(function (a) { return (a.listId === listId); }).length === 0) {\n this.owner.owner.viewer.lists.push(this.style.paragraphFormat.listFormat.list);\n }\n else {\n this.owner.owner.viewer.lists = this.owner.owner.viewer.lists.filter(function (a) { return (a.listId !== listId); });\n this.owner.owner.viewer.lists.push(this.style.paragraphFormat.listFormat.list);\n }\n }\n if (this.abstractList.abstractListId !== -1) {\n this.owner.owner.viewer.abstractLists.push(this.abstractList);\n }\n };\n StyleDialog.prototype.createLinkStyle = function (name, isEdit) {\n var charStyle;\n if (isEdit) {\n charStyle = this.owner.owner.viewer.styles.findByName((name + ' Char'), 'Character');\n }\n else {\n charStyle = new WCharacterStyle();\n }\n charStyle.type = 'Character';\n charStyle.name = name + ' Char';\n charStyle.characterFormat = this.style.characterFormat.cloneFormat();\n charStyle.basedOn = this.style.basedOn;\n if (!isEdit) {\n this.owner.owner.viewer.styles.push(charStyle);\n }\n return this.owner.owner.viewer.styles.findByName(charStyle.name, 'Character');\n };\n /**\n * @private\n */\n StyleDialog.prototype.updateCharacterFormat = function (characterFormat) {\n if (!isNullOrUndefined(characterFormat)) {\n this.characterFormat = characterFormat;\n }\n this.fontFamily.value = this.characterFormat.fontFamily;\n this.fontSize.value = this.characterFormat.fontSize;\n this.fontColor.value = this.characterFormat.fontColor;\n this.fontButtonClicked(undefined);\n };\n /**\n * @private\n */\n StyleDialog.prototype.updateParagraphFormat = function (paragraphFOrmat) {\n if (!isNullOrUndefined(paragraphFOrmat)) {\n this.paragraphFormat = paragraphFOrmat;\n }\n if (this.paragraphFormat.textAlignment === 'Left') {\n if (!this.leftAlign.classList.contains('e-active')) {\n this.leftAlign.classList.add('e-active');\n }\n if (this.rightAlign.classList.contains('e-active')) {\n this.rightAlign.classList.remove('e-active');\n }\n if (this.centerAlign.classList.contains('e-active')) {\n this.centerAlign.classList.remove('e-active');\n }\n if (this.justify.classList.contains('e-active')) {\n this.justify.classList.remove('e-active');\n }\n }\n else if (this.paragraphFormat.textAlignment === 'Right') {\n if (this.leftAlign.classList.contains('e-active')) {\n this.leftAlign.classList.remove('e-active');\n }\n if (!this.rightAlign.classList.contains('e-active')) {\n this.rightAlign.classList.add('e-active');\n }\n if (this.centerAlign.classList.contains('e-active')) {\n this.centerAlign.classList.remove('e-active');\n }\n if (this.justify.classList.contains('e-active')) {\n this.justify.classList.remove('e-active');\n }\n }\n else if (this.paragraphFormat.textAlignment === 'Center') {\n if (this.leftAlign.classList.contains('e-active')) {\n this.leftAlign.classList.remove('e-active');\n }\n if (this.rightAlign.classList.contains('e-active')) {\n this.rightAlign.classList.remove('e-active');\n }\n if (!this.centerAlign.classList.contains('e-active')) {\n this.centerAlign.classList.add('e-active');\n }\n if (this.justify.classList.contains('e-active')) {\n this.justify.classList.remove('e-active');\n }\n }\n else if (this.paragraphFormat.textAlignment === 'Justify') {\n if (this.leftAlign.classList.contains('e-active')) {\n this.leftAlign.classList.remove('e-active');\n }\n if (this.rightAlign.classList.contains('e-active')) {\n this.rightAlign.classList.remove('e-active');\n }\n if (this.centerAlign.classList.contains('e-active')) {\n this.centerAlign.classList.remove('e-active');\n }\n if (!this.justify.classList.contains('e-active')) {\n this.justify.classList.add('e-active');\n }\n }\n if (this.paragraphFormat.lineSpacing === 1) {\n this.singleLineSpacing.classList.add('e-active');\n this.onePointFiveLineSpacing.classList.remove('e-active');\n this.doubleLineSpacing.classList.remove('e-active');\n }\n else if (this.paragraphFormat.lineSpacing === 1.5) {\n this.singleLineSpacing.classList.remove('e-active');\n this.onePointFiveLineSpacing.classList.add('e-active');\n this.doubleLineSpacing.classList.remove('e-active');\n }\n else if (this.paragraphFormat.lineSpacing === 2) {\n this.singleLineSpacing.classList.remove('e-active');\n this.onePointFiveLineSpacing.classList.remove('e-active');\n this.doubleLineSpacing.classList.add('e-active');\n }\n else {\n this.singleLineSpacing.classList.remove('e-active');\n this.onePointFiveLineSpacing.classList.remove('e-active');\n this.doubleLineSpacing.classList.remove('e-active');\n }\n };\n StyleDialog.prototype.enableOrDisableOkButton = function () {\n if (!isNullOrUndefined(this.okButton)) {\n this.okButton.disabled = (this.styleNameElement.value === '');\n }\n };\n StyleDialog.prototype.getTypeValue = function () {\n var type;\n if (this.styleType.value === 'Linked(Paragraph and Character)' || this.styleType.value === 'Paragraph') {\n return 'Paragraph';\n }\n else {\n return 'Character';\n }\n };\n StyleDialog.prototype.updateStyleNames = function (type, name) {\n var styles = this.owner.owner.viewer.styles.getStyleNames(type);\n this.styleParagraph.dataSource = styles;\n this.styleParagraph.index = null;\n if (name) {\n this.styleBasedOn.dataSource = styles.filter(function (e) { return e !== name; });\n this.styleBasedOn.index = null;\n var style = this.getStyle(name);\n if (style.basedOn instanceof String || isNullOrUndefined(style.basedOn)) {\n this.styleBasedOn.enabled = false;\n }\n else {\n /* tslint:disable-next-line:max-line-length */\n this.styleBasedOn.index = styles.indexOf(style.basedOn.name) > -1 ? styles.indexOf(style.basedOn.name) : 0;\n }\n if (style.type === 'Paragraph') {\n if (!isNullOrUndefined(style.link)) {\n this.styleType.index = 2;\n }\n else {\n this.styleType.index = 0;\n }\n }\n else {\n this.styleType.index = 1;\n }\n if (!isNullOrUndefined(style.next)) {\n var nxtName = style.next.name;\n var index = 0;\n if (styles.indexOf(nxtName) > -1) {\n index = styles.indexOf(nxtName);\n }\n this.styleParagraph.index = index;\n this.isUserNextParaUpdated = (nxtName === name) ? false : true;\n }\n }\n else {\n this.styleBasedOn.dataSource = styles;\n this.styleBasedOn.index = null;\n var basedOnIndex = 0;\n if (this.owner.owner.selectionModule) {\n var styleName = void 0;\n if (type === 'Character') {\n styleName = this.owner.owner.selection.characterFormat.styleName;\n }\n else {\n styleName = this.owner.owner.selection.paragraphFormat.styleName;\n }\n basedOnIndex = styles.indexOf(styleName);\n }\n this.styleBasedOn.index = basedOnIndex;\n this.styleParagraph.index = 0;\n }\n if (this.isEdit) {\n this.styleType.enabled = false;\n }\n else {\n this.styleType.enabled = true;\n }\n this.styleBasedOn.dataBind();\n this.styleParagraph.dataBind();\n };\n StyleDialog.prototype.getStyle = function (styleName) {\n /* tslint:disable-next-line:max-line-length */\n if (isNullOrUndefined(this.owner.owner.viewer.styles.findByName(styleName))) {\n /* tslint:disable-next-line:max-line-length */\n this.owner.owner.editor.createStyle(this.owner.owner.viewer.preDefinedStyles.get(styleName));\n }\n return this.owner.owner.viewer.styles.findByName(styleName);\n };\n /**\n * @private\n */\n StyleDialog.prototype.destroy = function () {\n this.owner = undefined;\n if (!isNullOrUndefined(this.target)) {\n if (this.target.parentElement) {\n this.target.parentElement.removeChild(this.target);\n }\n for (var n = 0; n < this.target.childNodes.length; n++) {\n this.target.removeChild(this.target.childNodes[n]);\n n--;\n }\n this.target = undefined;\n }\n if (this.styleType) {\n this.styleType.destroy();\n }\n this.styleType = undefined;\n if (this.styleBasedOn) {\n this.styleBasedOn.destroy();\n }\n this.styleBasedOn = undefined;\n if (this.styleParagraph) {\n this.styleParagraph.destroy();\n }\n this.styleParagraph = undefined;\n if (this.onlyThisDocument) {\n this.onlyThisDocument.destroy();\n }\n this.onlyThisDocument = undefined;\n if (this.template) {\n this.template.destroy();\n }\n this.template = undefined;\n if (this.style) {\n this.style = undefined;\n }\n if (this.abstractList) {\n this.abstractList = undefined;\n }\n if (this.numberingBulletDialog) {\n this.numberingBulletDialog.destroy();\n }\n this.numberingBulletDialog = undefined;\n };\n return StyleDialog;\n}());\nexport { StyleDialog };\n","import { createElement, isNullOrUndefined, L10n, setCulture } from '@syncfusion/ej2-base';\nimport { Tab } from '@syncfusion/ej2-navigations';\nimport { WList } from '../list/list';\nimport { WAbstractList } from '../list/abstract-list';\nimport { WListLevel } from '../list/list-level';\nimport { WListFormat } from '../../implementation/format/list-format';\n/**\n * The Bullets and Numbering dialog is used to apply list format for a paragraph style.\n */\n/* tslint:disable:no-any */\nvar BulletsAndNumberingDialog = /** @class */ (function () {\n /**\n * @private\n */\n function BulletsAndNumberingDialog(layoutViewer) {\n var _this = this;\n this.isBullet = false;\n /**\n * @private\n */\n this.numberListClick = function (args) {\n _this.isBullet = false;\n _this.setActiveElement(args);\n if (args.currentTarget.classList.contains('e-de-list-numbered-none')) {\n _this.numberFormat = undefined;\n _this.listLevelPattern = undefined;\n }\n else if (args.currentTarget.classList.contains('e-de-list-numbered-number-dot')) {\n _this.numberFormat = '%1.';\n _this.listLevelPattern = 'Arabic';\n }\n else if (args.currentTarget.classList.contains('e-de-list-numbered-number-brace')) {\n _this.numberFormat = '%1)';\n _this.listLevelPattern = 'Arabic';\n }\n else if (args.currentTarget.classList.contains('e-de-list-numbered-up-roman')) {\n _this.numberFormat = '%1.';\n _this.listLevelPattern = 'UpRoman';\n }\n else if (args.currentTarget.classList.contains('e-de-list-numbered-up-letter')) {\n _this.numberFormat = '%1.';\n _this.listLevelPattern = 'UpLetter';\n }\n else if (args.currentTarget.classList.contains('e-de-list-numbered-low-letter-brace')) {\n _this.numberFormat = '%1)';\n _this.listLevelPattern = 'LowLetter';\n }\n else if (args.currentTarget.classList.contains('e-de-numbered-low-letter-dot')) {\n _this.numberFormat = '%1.';\n _this.listLevelPattern = 'LowLetter';\n }\n else if (args.currentTarget.classList.contains('e-de-list-numbered-low-roman')) {\n _this.numberFormat = '%1.';\n _this.listLevelPattern = 'LowRoman';\n }\n };\n /**\n * @private\n */\n this.bulletListClick = function (args) {\n _this.isBullet = true;\n _this.setActiveElement(args);\n if (args.currentTarget.classList.contains('e-bullet-none')) {\n _this.symbol = undefined;\n _this.fontFamily = undefined;\n }\n else if (args.currentTarget.classList.contains('e-bullet-dot')) {\n _this.symbol = '\\uf0b7';\n _this.fontFamily = 'Symbol';\n }\n else if (args.currentTarget.classList.contains('e-bullet-circle')) {\n _this.symbol = '\\uf06f' + '\\u0020';\n _this.fontFamily = 'Symbol';\n }\n else if (args.currentTarget.classList.contains('e-bullet-square')) {\n _this.symbol = '\\uf0a7';\n _this.fontFamily = 'Wingdings';\n }\n else if (args.currentTarget.classList.contains('e-bullet-flower')) {\n _this.symbol = '\\uf076';\n _this.fontFamily = 'Wingdings';\n }\n else if (args.currentTarget.classList.contains('e-bullet-arrow')) {\n _this.symbol = '\\uf0d8';\n _this.fontFamily = 'Wingdings';\n }\n else if (args.currentTarget.classList.contains('e-bullet-tick')) {\n _this.symbol = '\\uf0fc';\n _this.fontFamily = 'Wingdings';\n }\n };\n /**\n * @private\n */\n this.loadNumberingBulletDialog = function () {\n //Load \n _this.owner.updateFocus();\n };\n /**\n * @private\n */\n this.closeNumberingBulletDialog = function () {\n _this.unWireEventsAndBindings();\n _this.owner.updateFocus();\n };\n /**\n * @private\n */\n this.onCancelButtonClick = function () {\n _this.isBullet = false;\n _this.listLevelPattern = undefined;\n _this.numberFormat = undefined;\n _this.symbol = undefined;\n _this.fontFamily = undefined;\n _this.owner.dialog.hide();\n _this.unWireEventsAndBindings();\n };\n /**\n * @private\n */\n this.onOkButtonClick = function () {\n if (_this.owner.owner.viewer.lists.length > 0) {\n _this.listFormat.list.listId = _this.owner.owner.viewer.lists[_this.owner.owner.viewer.lists.length - 1].listId + 1;\n _this.listFormat.listId = _this.listFormat.list.listId;\n }\n else {\n _this.listFormat.list.listId = 0;\n _this.listFormat.listId = 0;\n }\n if (_this.owner.owner.viewer.abstractLists.length > 0) {\n /* tslint:disable-next-line:max-line-length */\n _this.abstractList.abstractListId = _this.owner.owner.viewer.abstractLists[_this.owner.owner.viewer.abstractLists.length - 1].abstractListId + 1;\n }\n else {\n _this.abstractList.abstractListId = 0;\n }\n _this.listFormat.list.abstractListId = _this.abstractList.abstractListId;\n var listLevel = new WListLevel(_this.abstractList);\n listLevel.listLevelPattern = !isNullOrUndefined(_this.listLevelPattern) ? _this.listLevelPattern : 'Bullet';\n listLevel.numberFormat = _this.isBullet ? _this.symbol : _this.numberFormat;\n if (listLevel.listLevelPattern !== 'Bullet') {\n listLevel.startAt = 1;\n }\n listLevel.characterFormat.fontFamily = !isNullOrUndefined(_this.fontFamily) ? _this.fontFamily : 'Verdana';\n listLevel.paragraphFormat.leftIndent = 36;\n listLevel.paragraphFormat.firstLineIndent = -18;\n _this.abstractList.levels.push(listLevel);\n _this.listFormat.listLevelNumber = 0;\n _this.listFormat.list.abstractList = _this.abstractList;\n _this.owner.dialog.hide();\n };\n this.owner = layoutViewer;\n }\n /**\n * @private\n */\n BulletsAndNumberingDialog.prototype.getModuleName = function () {\n return 'BulletsAndNumberingDialog';\n };\n /**\n * @private\n */\n BulletsAndNumberingDialog.prototype.initNumberingBulletDialog = function (locale) {\n var instance = this;\n var id = this.owner.owner.containerId;\n this.target = createElement('div', { id: id + '_insertNumberBulletDialog', className: 'e-de-number-bullet-dlg' });\n var tabTarget = createElement('div', { id: id + '_tabNumberBulletDialog', className: 'e-de-tab-number-bullet-dlg' });\n this.target.appendChild(tabTarget);\n this.createNumberList(id);\n this.createBulletList(id);\n //Initialize Tab component\n var tabObj = new Tab({\n items: [\n {\n header: { 'text': locale.getConstant('Numbering') },\n /* tslint:disable-next-line:max-line-length */\n content: ('#' + id + '_Number'),\n },\n {\n header: { 'text': locale.getConstant('Bullets') },\n /* tslint:disable-next-line:max-line-length */\n content: ('#' + id + '_Bullet'),\n },\n ],\n heightAdjustMode: 'None',\n width: 272,\n });\n //Render initialized Tab component\n tabObj.appendTo(tabTarget);\n this.owner.owner.element.appendChild(this.target);\n tabObj.refresh();\n };\n BulletsAndNumberingDialog.prototype.createNumberList = function (id) {\n var numberListDiv = createElement('div', { className: 'e-de-style-numbered-list', id: id + '_Number' });\n numberListDiv.style.display = 'none';\n numberListDiv.style.height = '270px';\n var ulTag = createElement('ul', {\n styles: 'display: block; outline: 0px;',\n id: 'listMenu',\n className: 'e-de-ui-wfloating-menu e-de-ui-bullets-menu e-de-list-container e-de-list-thumbnail'\n });\n numberListDiv.appendChild(ulTag);\n var numberedNone = this.createNumberNoneListTag(ulTag);\n var numberedNumberDot = this.createNumberListTag(ulTag, '1.', '2.', '3.', 'e-de-list-numbered-number-dot');\n var numberedNumberBrace = this.createNumberListTag(ulTag, '1)', '2)', '3)', 'e-de-list-numbered-number-brace');\n var numberedUpRoman = this.createNumberListTag(ulTag, 'I.', 'II.', 'III.', 'e-de-list-numbered-up-roman');\n var numberedUpLettter = this.createNumberListTag(ulTag, 'A.', 'B.', 'C.', 'e-de-list-numbered-up-letter');\n var numberedLowLetterDot = this.createNumberListTag(ulTag, 'a.', 'b.', 'c.', 'e-de-numbered-low-letter-dot');\n var numberedLowLetterBrace = this.createNumberListTag(ulTag, 'a)', 'b)', 'c)', 'e-de-list-numbered-low-letter-brace');\n var numberedLowRoman = this.createNumberListTag(ulTag, 'i.', 'ii.', 'iii.', 'e-de-list-numbered-low-roman');\n numberedNone.addEventListener('click', this.numberListClick);\n numberedNumberDot.addEventListener('click', this.numberListClick);\n numberedNumberBrace.addEventListener('click', this.numberListClick);\n numberedUpRoman.addEventListener('click', this.numberListClick);\n numberedUpLettter.addEventListener('click', this.numberListClick);\n numberedLowLetterBrace.addEventListener('click', this.numberListClick);\n numberedLowLetterDot.addEventListener('click', this.numberListClick);\n numberedLowRoman.addEventListener('click', this.numberListClick);\n this.target.appendChild(numberListDiv);\n };\n BulletsAndNumberingDialog.prototype.createNumberListTag = function (ulTag, text1, text2, text3, className) {\n var liTag = createElement('li', {\n styles: 'display:block',\n className: 'e-de-ui-wfloating-menuitem e-de-ui-wfloating-menuitem-md e-de-list-items e-de-list-item-size ' + className\n });\n ulTag.appendChild(liTag);\n /* tslint:disable-next-line:max-line-length */\n var innerHTML = '' + text1 + '
' + text2 + '';\n innerHTML += '
' + text3 + '
';\n var liInnerDiv = createElement('div', {\n className: 'e-de-ui-list-header-presetmenu',\n id: 'e-de-ui-zlist0', innerHTML: innerHTML\n });\n liTag.style.cssFloat = 'left';\n liTag.appendChild(liInnerDiv);\n return liTag;\n };\n BulletsAndNumberingDialog.prototype.createNumberNoneListTag = function (ulTag) {\n var liTag = createElement('li', {\n styles: 'display:block',\n /* tslint:disable-next-line:max-line-length */\n className: 'e-de-ui-wfloating-menuitem e-de-ui-wfloating-menuitem-md e-de-list-items e-de-list-item-size e-de-list-numbered-none'\n });\n ulTag.appendChild(liTag);\n var innerHTML = 'None
';\n var liInnerDiv = createElement('div', {\n className: 'e-de-ui-list-header-presetmenu',\n id: 'e-de-ui-zlist0', innerHTML: innerHTML\n });\n liTag.style.cssFloat = 'left';\n liTag.appendChild(liInnerDiv);\n return liTag;\n };\n BulletsAndNumberingDialog.prototype.createBulletListTag = function (ulTag, iconCss, className) {\n var liTag = createElement('li', {\n styles: 'display:block;',\n className: 'e-de-ui-wfloating-menuitem e-de-ui-wfloating-bullet-menuitem-md e-de-list-items e-de-list-item-size ' + className\n });\n ulTag.appendChild(liTag);\n /* tslint:disable-next-line:max-line-length */\n var liInnerDiv = createElement('div', { className: 'e-de-ui-bullet-list-header-presetmenu e-de-bullet-icon-size', id: 'e-de-ui-zlist0' });\n var liNextDiv = createElement('div', { className: iconCss });\n liInnerDiv.appendChild(liNextDiv);\n liTag.appendChild(liInnerDiv);\n return liTag;\n };\n BulletsAndNumberingDialog.prototype.createBulletList = function (id) {\n var bulletListDiv = createElement('div', { className: 'e-de-ui-bullet-list-header-presetmenu', id: id + '_Bullet' });\n bulletListDiv.style.display = 'none';\n bulletListDiv.style.height = '270px';\n var ulTag = createElement('ul', {\n styles: 'display: block; outline: 0px;', id: 'listMenu',\n className: 'e-de-ui-wfloating-menu e-de-ui-bullets-menu e-de-list-container e-de-list-thumbnail'\n });\n bulletListDiv.appendChild(ulTag);\n var bulletNone = this.createBulletListTag(ulTag, 'e-de-icon-bullet-list-none e-de-bullet-icons', 'e-bullet-none');\n var bulletDot = this.createBulletListTag(ulTag, 'e-de-icon-bullet-list-dot e-de-bullet-icons', 'e-bullet-dot');\n /* tslint:disable-next-line:max-line-length */\n var bulletCircle = this.createBulletListTag(ulTag, 'e-de-icon-bullet-list-circle e-de-bullet-icons', 'e-bullet-circle');\n var bulletSquare = this.createBulletListTag(ulTag, 'e-de-icon-bullet-list-square e-de-bullet-icons', 'e-bullet-square');\n /* tslint:disable-next-line:max-line-length */\n var bulletFlower = this.createBulletListTag(ulTag, 'e-de-icon-bullet-list-flower e-de-bullet-icons', 'e-bullet-flower');\n var bulletArrow = this.createBulletListTag(ulTag, 'e-de-icon-bullet-list-arrow e-de-bullet-icons', 'e-bullet-arrow');\n var bulletTick = this.createBulletListTag(ulTag, 'e-de-icon-bullet-list-tick e-de-bullet-icons', 'e-bullet-tick');\n bulletNone.addEventListener('click', this.bulletListClick);\n bulletDot.addEventListener('click', this.bulletListClick);\n bulletCircle.addEventListener('click', this.bulletListClick);\n bulletSquare.addEventListener('click', this.bulletListClick);\n bulletFlower.addEventListener('click', this.bulletListClick);\n bulletArrow.addEventListener('click', this.bulletListClick);\n bulletTick.addEventListener('click', this.bulletListClick);\n // bulletListDiv.appendChild(table1); \n this.target.appendChild(bulletListDiv);\n };\n /**\n * @private\n */\n BulletsAndNumberingDialog.prototype.showNumberBulletDialog = function (listFormat, abstractList) {\n if (!isNullOrUndefined(listFormat)) {\n this.listFormat = listFormat;\n }\n else {\n this.listFormat = new WListFormat();\n }\n if (isNullOrUndefined(this.listFormat.list)) {\n this.listFormat.list = new WList();\n }\n if (!isNullOrUndefined(abstractList)) {\n this.abstractList = abstractList;\n }\n else {\n this.abstractList = new WAbstractList();\n }\n var locale = new L10n('documenteditor', this.owner.owner.defaultLocale);\n locale.setLocale(this.owner.owner.locale);\n setCulture(this.owner.owner.locale);\n if (!this.target) {\n this.initNumberingBulletDialog(locale);\n }\n this.owner.dialog.header = locale.getConstant('Numbering and Bullets');\n this.owner.dialog.width = 'auto';\n this.owner.dialog.height = 'auto';\n this.owner.dialog.content = this.target;\n this.owner.dialog.beforeOpen = this.loadNumberingBulletDialog;\n this.owner.dialog.close = this.closeNumberingBulletDialog;\n this.owner.dialog.position = { X: 'center', Y: 'center' };\n this.owner.dialog.buttons = [{\n click: this.onOkButtonClick,\n buttonModel: { content: locale.getConstant('Ok'), cssClass: 'e-flat e-numbering-bullet-okay', isPrimary: true }\n },\n {\n click: this.onCancelButtonClick,\n buttonModel: { content: locale.getConstant('Cancel'), cssClass: 'e-flat e-numbering-bullet-cancel' }\n }];\n this.owner.dialog.dataBind();\n this.owner.dialog.show();\n };\n BulletsAndNumberingDialog.prototype.setActiveElement = function (args) {\n var html = args.currentTarget.parentElement;\n for (var i = 0; i < html.childElementCount; i++) {\n if (html.childNodes[i].classList.contains('e-de-list-active')) {\n html.childNodes[i].classList.remove('e-de-list-active');\n }\n }\n args.currentTarget.classList.add('e-de-list-active');\n };\n /**\n * @private\n */\n BulletsAndNumberingDialog.prototype.unWireEventsAndBindings = function () {\n //Unwire events\n };\n /**\n * @private\n */\n BulletsAndNumberingDialog.prototype.destroy = function () {\n this.owner = undefined;\n if (this.listFormat) {\n this.listFormat.destroy();\n this.listFormat = undefined;\n }\n if (this.abstractList) {\n this.abstractList.destroy();\n this.abstractList = undefined;\n }\n if (this.target && this.target.parentElement) {\n this.target.parentElement.removeChild(this.target);\n for (var m = 0; m < this.target.childNodes.length; m++) {\n this.target.removeChild(this.target.childNodes[m]);\n m--;\n }\n this.target = undefined;\n }\n };\n return BulletsAndNumberingDialog;\n}());\nexport { BulletsAndNumberingDialog };\n/* tslint:enable:no-any */ \n","import { createElement, isNullOrUndefined, L10n, setCulture } from '@syncfusion/ej2-base';\nimport { DropDownList, ComboBox } from '@syncfusion/ej2-dropdowns';\nimport { CheckBox } from '@syncfusion/ej2-buttons';\nimport { WCharacterFormat } from '../format/character-format';\nimport { ColorPicker } from '@syncfusion/ej2-inputs';\n/**\n * The Font dialog is used to modify formatting of selected text.\n */\n/* tslint:disable:no-any */\nvar FontDialog = /** @class */ (function () {\n /**\n * @private\n */\n function FontDialog(layoutViewer) {\n var _this = this;\n this.fontStyleInternal = undefined;\n this.fontNameList = undefined;\n this.fontStyleText = undefined;\n this.fontSizeText = undefined;\n this.colorPicker = undefined;\n this.underlineDrop = undefined;\n this.strikethroughBox = undefined;\n this.doublestrikethrough = undefined;\n this.superscript = undefined;\n this.subscript = undefined;\n //Character Format Property\n this.bold = undefined;\n this.italic = undefined;\n this.underline = undefined;\n this.strikethrough = undefined;\n this.baselineAlignment = undefined;\n this.fontSize = undefined;\n this.fontFamily = undefined;\n this.fontColor = undefined;\n /**\n * @private\n */\n this.characterFormat = undefined;\n /**\n * @private\n */\n this.loadFontDialog = function () {\n _this.owner.updateFocus();\n var characterFormat;\n if (_this.characterFormat) {\n characterFormat = _this.characterFormat;\n }\n else {\n characterFormat = _this.owner.owner.selection.characterFormat;\n }\n _this.fontNameList.value = characterFormat.fontFamily;\n if (!characterFormat.bold && !characterFormat.italic) {\n _this.fontStyleText.value = _this.fontSizeText.value;\n _this.fontStyleText.index = 0;\n }\n else if (characterFormat.bold && !characterFormat.italic) {\n _this.fontStyleText.value = _this.fontSizeText.value;\n _this.fontStyleText.index = 1;\n }\n else if (!characterFormat.bold && characterFormat.italic) {\n _this.fontStyleText.value = _this.fontSizeText.value;\n _this.fontStyleText.index = 2;\n }\n else if (characterFormat.bold && characterFormat.italic) {\n _this.fontStyleText.value = _this.fontSizeText.value;\n _this.fontStyleText.index = 3;\n }\n if (!isNullOrUndefined(characterFormat.fontSize)) {\n for (var i = 0; i <= 15; i++) {\n var items = _this.fontSizeText.getItems();\n if (characterFormat.fontSize.toString() === items[i].innerHTML) {\n _this.fontSizeText.value = characterFormat.fontSize;\n _this.fontSizeText.index = i;\n break;\n }\n }\n }\n if (!isNullOrUndefined(characterFormat.fontColor)) {\n _this.colorPicker.value = characterFormat.fontColor;\n }\n else {\n _this.colorPicker.value = '#000000';\n }\n if (characterFormat.underline === 'None') {\n _this.underlineDrop.index = 0;\n }\n else if (characterFormat.underline === 'Single') {\n _this.underlineDrop.index = 1;\n }\n if (characterFormat.strikethrough === 'SingleStrike') {\n _this.strikethroughBox.checked = true;\n }\n else if (characterFormat.strikethrough === 'DoubleStrike') {\n _this.doublestrikethrough.checked = true;\n }\n else {\n _this.strikethroughBox.checked = false;\n _this.doublestrikethrough.checked = false;\n }\n if (characterFormat.baselineAlignment === 'Superscript') {\n _this.superscript.checked = true;\n }\n else if (characterFormat.baselineAlignment === 'Subscript') {\n _this.subscript.checked = true;\n }\n else {\n _this.superscript.checked = false;\n _this.subscript.checked = false;\n }\n if (_this.owner.selection.caret.style.display !== 'none') {\n _this.owner.selection.caret.style.display = 'none';\n }\n };\n /**\n * @private\n */\n this.closeFontDialog = function () {\n _this.unWireEventsAndBindings();\n _this.owner.updateFocus();\n };\n /**\n * @private\n */\n this.onCancelButtonClick = function () {\n _this.owner.dialog.hide();\n _this.unWireEventsAndBindings();\n };\n /**\n * @private\n */\n this.onInsertFontFormat = function () {\n var format;\n if (_this.characterFormat) {\n format = _this.characterFormat;\n }\n else {\n format = new WCharacterFormat(undefined);\n }\n if (!isNullOrUndefined(_this.bold)) {\n format.bold = _this.bold;\n }\n if (!isNullOrUndefined(_this.italic)) {\n format.italic = _this.italic;\n }\n if (!isNullOrUndefined(_this.fontSize) && _this.fontSize > 0) {\n format.fontSize = _this.fontSize;\n }\n if (!isNullOrUndefined(_this.fontColor)) {\n format.fontColor = _this.fontColor;\n }\n if (!isNullOrUndefined(_this.baselineAlignment)) {\n format.baselineAlignment = _this.baselineAlignment;\n }\n if (!isNullOrUndefined(_this.strikethrough)) {\n format.strikethrough = _this.strikethrough;\n }\n if (!isNullOrUndefined(_this.underline)) {\n format.underline = _this.underline;\n }\n if (!isNullOrUndefined(_this.fontFamily)) {\n format.fontFamily = _this.fontFamily;\n }\n if (!_this.characterFormat) {\n _this.onCharacterFormat(_this.owner.selection, format);\n }\n else {\n _this.owner.owner.styleDialogModule.updateCharacterFormat();\n }\n _this.owner.dialog.hide();\n };\n this.fontSizeUpdate = function (args) {\n _this.fontSize = args.value;\n };\n this.fontStyleUpdate = function (args) {\n _this.fontStyle = args.value;\n };\n this.fontFamilyUpdate = function (args) {\n _this.fontFamily = args.value;\n };\n this.underlineUpdate = function (args) {\n _this.underline = args.value;\n };\n this.fontColorUpdate = function (args) {\n if (!isNullOrUndefined(args.currentValue)) {\n _this.fontColor = args.currentValue.hex;\n }\n };\n this.singleStrikeUpdate = function (args) {\n _this.enableCheckBoxProperty(args);\n if (args.checked) {\n _this.strikethrough = 'SingleStrike';\n }\n else {\n _this.strikethrough = 'None';\n }\n };\n this.doubleStrikeUpdate = function (args) {\n _this.enableCheckBoxProperty(args);\n if (args.checked) {\n _this.strikethrough = 'DoubleStrike';\n }\n else {\n _this.strikethrough = 'None';\n }\n };\n this.superscriptUpdate = function (args) {\n _this.enableCheckBoxProperty(args);\n if (args.checked) {\n _this.baselineAlignment = 'Superscript';\n }\n else {\n _this.baselineAlignment = 'Normal';\n }\n };\n this.subscriptUpdate = function (args) {\n _this.enableCheckBoxProperty(args);\n if (args.checked) {\n _this.baselineAlignment = 'Subscript';\n }\n else {\n _this.baselineAlignment = 'Normal';\n }\n };\n this.owner = layoutViewer;\n }\n Object.defineProperty(FontDialog.prototype, \"fontStyle\", {\n /**\n * @private\n */\n get: function () {\n return this.fontStyleInternal;\n },\n /**\n * @private\n */\n set: function (value) {\n this.fontStyleInternal = value;\n switch (this.fontStyle) {\n case 'Bold':\n this.bold = true;\n this.italic = false;\n break;\n case 'Italic':\n this.bold = false;\n this.italic = true;\n break;\n case 'BoldItalic':\n this.bold = true;\n this.italic = true;\n break;\n case 'Regular':\n this.bold = false;\n this.italic = false;\n break;\n }\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @private\n */\n FontDialog.prototype.getModuleName = function () {\n return 'FontDialog';\n };\n FontDialog.prototype.createInputElement = function (type, id, className) {\n var element = createElement('input', {\n attrs: { type: type },\n id: id,\n className: className\n });\n return element;\n };\n /**\n * @private\n */\n FontDialog.prototype.initFontDialog = function (locale) {\n var instance = this;\n var effectLabel;\n var strikeThroughElement;\n var superScriptElement;\n var subScriptElement;\n var doubleStrikeThroughElement;\n var id = this.owner.owner.containerId;\n this.target = createElement('div', { id: id + '_insertFontDialog', className: 'e-de-font-dlg' });\n var fontDiv = this.getFontDiv(locale);\n this.target.appendChild(fontDiv);\n var sizeDiv = this.getFontSizeDiv(locale);\n this.target.appendChild(sizeDiv);\n var colorDiv = createElement('div', { id: id + '_fontColor', styles: 'margin-top:15px;' });\n this.fontColorDiv = createElement('div', { id: id + '_fontColorDiv', className: 'e-de-font-dlg-display' });\n var fontColorLabel = createElement('label', {\n className: 'e-de-font-dlg-header-font-color e-de-font-color-margin', innerHTML: locale.getConstant('Font Color')\n });\n this.fontColorDiv.appendChild(fontColorLabel);\n var fontColorElement = this.createInputElement('color', this.target.id + '_ColorDiv', 'e-de-font-dlg-color');\n this.fontColorDiv.appendChild(fontColorElement);\n colorDiv.appendChild(this.fontColorDiv);\n this.target.appendChild(colorDiv);\n var fontEffectsDiv = createElement('div', { id: id + '_fontEffectsDiv' });\n var fontEffectSubDiv1 = createElement('div', {\n className: 'e-de-font-color-label e-de-font-dlg-display',\n id: this.target.id + '_fontEffectsSubDiv1'\n });\n effectLabel = createElement('label', { className: 'e-de-font-dlg-header-effects', innerHTML: locale.getConstant('Effects') });\n fontEffectSubDiv1.appendChild(effectLabel);\n strikeThroughElement = this.createInputElement('checkbox', this.target.id + '_strikeThrough', '');\n fontEffectSubDiv1.appendChild(strikeThroughElement);\n superScriptElement = this.createInputElement('checkbox', this.target.id + '_superScript', '');\n fontEffectSubDiv1.appendChild(superScriptElement);\n fontEffectsDiv.appendChild(fontEffectSubDiv1);\n var fontEffectSubDiv2 = createElement('div', { className: 'e-de-font-checkbox', id: id + '_fontEffectsSubDiv2' });\n subScriptElement = this.createInputElement('checkbox', this.target.id + '_subScript', '');\n fontEffectSubDiv2.appendChild(subScriptElement);\n doubleStrikeThroughElement = this.createInputElement('checkbox', this.target.id + '_doubleStrikeThrough', '');\n fontEffectSubDiv2.appendChild(doubleStrikeThroughElement);\n fontEffectsDiv.appendChild(fontEffectSubDiv2);\n this.target.appendChild(fontEffectsDiv);\n this.owner.owner.element.appendChild(this.target);\n this.colorPicker = new ColorPicker({\n change: this.fontColorUpdate, value: '#000000',\n });\n this.colorPicker.appendTo(fontColorElement);\n this.strikethroughBox = new CheckBox({\n change: this.singleStrikeUpdate,\n cssClass: 'e-de-font-content-label',\n label: locale.getConstant('Strikethrough')\n });\n this.strikethroughBox.appendTo(strikeThroughElement);\n this.doublestrikethrough = new CheckBox({\n change: this.doubleStrikeUpdate,\n cssClass: 'e-de-font-content-checkbox-label',\n label: locale.getConstant('Double Strikethrough')\n });\n this.doublestrikethrough.appendTo(doubleStrikeThroughElement);\n this.subscript = new CheckBox({\n label: locale.getConstant('Subscript'),\n change: this.subscriptUpdate\n });\n this.subscript.appendTo(subScriptElement);\n this.superscript = new CheckBox({\n label: locale.getConstant('Superscript'),\n cssClass: 'e-de-font-content-label', change: this.superscriptUpdate\n });\n this.superscript.appendTo(superScriptElement);\n };\n FontDialog.prototype.getFontSizeDiv = function (locale) {\n var fontSize;\n var sizeDiv;\n var id = this.owner.owner.containerId;\n sizeDiv = createElement('div', { id: id + '_fontSizeAndUnderlineDiv', className: 'e-de-font-dlg-padding e-de-font-dlg-display' });\n var sizeSubDiv1 = createElement('div', { id: id + '_fontSizeAndUnderlineSubDiv1' });\n var sizeLabel = createElement('label', { className: 'e-de-font-dlg-header', innerHTML: locale.getConstant('Size') });\n var styles = 'font-family:Roboto;font-size:14px;opacity:0.8;';\n fontSize = createElement('select', { id: this.target.id + '_fontSize', styles: styles });\n fontSize.innerHTML = '' +\n '' +\n '';\n sizeSubDiv1.appendChild(sizeLabel);\n sizeSubDiv1.appendChild(fontSize);\n sizeDiv.appendChild(sizeSubDiv1);\n var sizeSubDiv2 = createElement('div', {\n className: 'e-de-font-dlg-cb-right',\n id: id + '_fontSizeAndUnderlineSubDiv2'\n });\n var html = locale.getConstant('Underline');\n var underlineLabel = createElement('label', { className: 'e-de-font-dlg-header', innerHTML: html });\n var underlineElement;\n underlineElement = createElement('select', { id: this.target.id + '_underLine', styles: styles });\n underlineElement.innerHTML = '';\n sizeSubDiv2.appendChild(underlineLabel);\n sizeSubDiv2.appendChild(underlineElement);\n sizeDiv.appendChild(sizeSubDiv2);\n this.fontSizeText = new ComboBox({ change: this.fontSizeUpdate, popupHeight: '170px', width: '170px' });\n this.fontSizeText.showClearButton = false;\n this.fontSizeText.appendTo(fontSize);\n this.underlineDrop = new DropDownList({ change: this.underlineUpdate, popupHeight: '100px', width: '170px' });\n this.underlineDrop.appendTo(underlineElement);\n return sizeDiv;\n };\n FontDialog.prototype.getFontDiv = function (locale) {\n var id = this.owner.owner.containerId;\n var fontDiv = createElement('div', { id: id + '_fontDiv', className: 'e-de-font-dlg-display' });\n var fontSubDiv1 = createElement('div', { id: id + '_fontSubDiv1' });\n var fontNameLabel = createElement('label', {\n className: 'e-de-font-dlg-header',\n innerHTML: locale.getConstant('Font')\n });\n var fontNameValues = createElement('select', { id: this.target.id + '_fontName' });\n fontNameValues.innerHTML = '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '';\n fontSubDiv1.appendChild(fontNameLabel);\n fontSubDiv1.appendChild(fontNameValues);\n fontDiv.appendChild(fontSubDiv1);\n var fontSubDiv2;\n var fontStyleLabel;\n var fontStyleValues;\n fontSubDiv2 = createElement('div', { className: 'e-de-font-dlg-cb-right', id: id + '_fontSubDiv2', styles: 'float:right;' });\n fontStyleLabel = createElement('label', { className: 'e-de-font-dlg-header', innerHTML: locale.getConstant('Font Style') });\n var fontStyle = 'font-family:Roboto;font-size:14px;opacity:0.8;';\n fontStyleValues = createElement('select', { id: this.target.id + '_fontStyle', styles: fontStyle });\n fontStyleValues.innerHTML = '';\n fontSubDiv2.appendChild(fontStyleLabel);\n fontSubDiv2.appendChild(fontStyleValues);\n fontDiv.appendChild(fontSubDiv2);\n this.fontNameList = new ComboBox({ change: this.fontFamilyUpdate, popupHeight: '200px', width: '170px' });\n this.fontNameList.showClearButton = false;\n this.fontNameList.appendTo(fontNameValues);\n this.fontStyleText = new DropDownList({ change: this.fontStyleUpdate, popupHeight: '170px', width: '170px' });\n this.fontStyleText.appendTo(fontStyleValues);\n return fontDiv;\n };\n /**\n * @private\n */\n FontDialog.prototype.showFontDialog = function (characterFormat) {\n if (characterFormat) {\n this.characterFormat = characterFormat;\n }\n var locale = new L10n('documenteditor', this.owner.owner.defaultLocale);\n locale.setLocale(this.owner.owner.locale);\n setCulture(this.owner.owner.locale);\n if (!this.target) {\n this.initFontDialog(locale);\n }\n this.owner.dialog.header = locale.getConstant('Font');\n this.owner.dialog.width = 'auto';\n this.owner.dialog.height = 'auto';\n this.owner.dialog.content = this.target;\n this.owner.dialog.beforeOpen = this.loadFontDialog;\n this.owner.dialog.close = this.closeFontDialog;\n this.owner.dialog.buttons = [{\n click: this.onInsertFontFormat,\n buttonModel: { content: locale.getConstant('Ok'), cssClass: 'e-flat e-font-okay', isPrimary: true }\n },\n {\n click: this.onCancelButtonClick,\n buttonModel: { content: locale.getConstant('Cancel'), cssClass: 'e-flat e-font-cancel' }\n }];\n this.owner.dialog.dataBind();\n this.owner.dialog.show();\n };\n /**\n * Applies character format\n * @param {Selection} selection\n * @param {WCharacterFormat} format\n * @private\n */\n FontDialog.prototype.onCharacterFormat = function (selection, format) {\n this.owner.owner.editorModule.initHistory('CharacterFormat');\n if (selection.isEmpty) {\n if (selection.start.offset === selection.getParagraphLength(selection.start.paragraph)) {\n // tslint:disable-next-line:max-line-length\n this.owner.owner.editorModule.applyCharFormatValueInternal(selection, selection.start.paragraph.characterFormat, undefined, format);\n this.owner.owner.editorModule.reLayout(selection);\n }\n this.owner.updateFocus();\n return;\n }\n else {\n //Iterate and update formating.\n this.owner.owner.editorModule.setOffsetValue(this.owner.selection);\n this.owner.owner.editorModule.updateSelectionCharacterFormatting('CharacterFormat', format, false);\n }\n };\n /**\n * @private\n */\n FontDialog.prototype.enableCheckBoxProperty = function (args) {\n if (this.strikethroughBox.checked && this.doublestrikethrough.checked) {\n this.strikethroughBox.checked = false;\n this.doublestrikethrough.checked = false;\n if (args.event.currentTarget.id === this.target.id + '_doubleStrikeThrough') {\n this.doublestrikethrough.checked = true;\n }\n else {\n this.strikethroughBox.checked = true;\n }\n }\n if (this.superscript.checked && this.subscript.checked) {\n this.subscript.checked = false;\n this.superscript.checked = false;\n if (args.event.currentTarget.id === this.target.id + '_subScript') {\n this.subscript.checked = true;\n }\n else {\n this.superscript.checked = true;\n }\n }\n };\n /**\n * @private\n */\n FontDialog.prototype.unWireEventsAndBindings = function () {\n this.fontNameList.value = '';\n this.fontSizeText.value = '';\n this.fontStyleText.value = '';\n this.strikethroughBox.checked = false;\n this.doublestrikethrough.checked = false;\n this.superscript.checked = false;\n this.subscript.checked = false;\n this.bold = undefined;\n this.italic = undefined;\n this.underline = undefined;\n this.strikethrough = undefined;\n this.baselineAlignment = undefined;\n this.colorPicker.change = undefined;\n this.fontColor = undefined;\n this.fontSize = undefined;\n this.fontFamily = undefined;\n };\n /**\n * @private\n */\n FontDialog.prototype.destroy = function () {\n this.owner = undefined;\n if (this.characterFormat) {\n this.characterFormat.destroy();\n this.characterFormat = undefined;\n }\n if (!isNullOrUndefined(this.target)) {\n if (this.target.parentElement) {\n this.target.parentElement.removeChild(this.target);\n }\n for (var m = 0; m < this.target.childNodes.length; m++) {\n this.target.removeChild(this.target.childNodes[m]);\n m--;\n }\n this.target = undefined;\n }\n if (this.fontNameList) {\n this.fontNameList.destroy();\n }\n this.fontNameList = undefined;\n if (this.fontStyleText) {\n this.fontStyleText.destroy();\n }\n this.fontStyleText = undefined;\n if (this.fontSizeText) {\n this.fontSizeText.destroy();\n }\n this.fontSizeText = undefined;\n if (this.colorPicker) {\n this.colorPicker.destroy();\n }\n this.colorPicker = undefined;\n if (this.underlineDrop) {\n this.underlineDrop.destroy();\n }\n this.underlineDrop = undefined;\n if (this.strikethroughBox) {\n this.strikethroughBox.destroy();\n }\n this.strikethroughBox = undefined;\n if (this.doublestrikethrough) {\n this.doublestrikethrough.destroy();\n }\n this.doublestrikethrough = undefined;\n if (this.superscript) {\n this.superscript.destroy();\n }\n this.superscript = undefined;\n if (this.subscript) {\n this.subscript.destroy();\n }\n this.subscript = undefined;\n };\n return FontDialog;\n}());\nexport { FontDialog };\n/* tslint:enable:no-any */ \n","import { createElement, isNullOrUndefined, L10n, setCulture } from '@syncfusion/ej2-base';\nimport { NumericTextBox } from '@syncfusion/ej2-inputs';\nimport { WTableFormat, WRowFormat, WCellFormat } from '../format/index';\nimport { CheckBox } from '@syncfusion/ej2-buttons';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nimport { Tab } from '@syncfusion/ej2-navigations';\nimport { classList } from '@syncfusion/ej2-base';\nimport { HelperMethods } from '../editor/editor-helper';\n/**\n * The Table properties dialog is used to modify properties of selected table.\n */\nvar TablePropertiesDialog = /** @class */ (function () {\n /**\n * @private\n */\n function TablePropertiesDialog(viewer) {\n var _this = this;\n this.hasTableWidth = false;\n this.hasCellWidth = false;\n /**\n * @private\n */\n this.isTableBordersAndShadingUpdated = false;\n /**\n * @private\n */\n this.isCellBordersAndShadingUpdated = false;\n this.tabObj = undefined;\n /**\n * @private\n */\n this.isCellOptionsUpdated = false;\n /**\n * @private\n */\n this.isTableOptionsUpdated = false;\n this.onBeforeOpen = function () {\n _this.owner.updateFocus();\n _this.loadTableProperties.bind(_this);\n };\n /**\n * @private\n */\n this.onCloseTablePropertyDialog = function () {\n _this.unWireEvent.bind(_this);\n _this.owner.updateFocus();\n };\n /**\n * @private\n */\n this.applyTableProperties = function () {\n var selection = _this.owner.selection;\n if (!_this.preferCheckBox.checked && !_this.preferCheckBox.indeterminate) {\n if (isNullOrUndefined(selection.tableFormat.preferredWidth) || selection.tableFormat.preferredWidth !== 0) {\n _this.tableFormat.preferredWidth = 0;\n _this.tableFormat.preferredWidthType = 'Point';\n }\n }\n if (_this.tableFormat.hasValue('tableAlignment') && _this.tableFormat.tableAlignment !== 'Left') {\n if (isNullOrUndefined(selection.tableFormat.leftIndent) || selection.tableFormat.leftIndent !== 0) {\n _this.tableFormat.leftIndent = 0;\n }\n }\n if (!_this.rowHeightCheckBox.checked && !_this.rowHeightCheckBox.indeterminate) {\n if (isNullOrUndefined(selection.rowFormat.height) || selection.rowFormat.height !== 0) {\n _this.rowFormat.heightType = 'AtLeast';\n _this.rowFormat.height = 0;\n }\n }\n if (!_this.preferredCellWidthCheckBox.checked && !_this.preferredCellWidthCheckBox.indeterminate) {\n if (isNullOrUndefined(selection.cellFormat.preferredWidth) || selection.cellFormat.preferredWidth !== 0) {\n _this.cellFormat.preferredWidthType = 'Point';\n _this.cellFormat.preferredWidth = 0;\n }\n }\n else {\n if (_this.cellFormat.preferredWidthType === 'Percent') {\n if (!_this.tableFormat.hasValue('preferredWidth') && !_this.tableFormat.hasValue('preferredWidthType')\n && _this.owner.selection.start.paragraph.associatedCell.ownerTable.tableFormat.preferredWidth === 0) {\n // tslint:disable-next-line:max-line-length\n var containerWidth = _this.owner.selection.start.paragraph.associatedCell.ownerTable.getOwnerWidth(true);\n var tableWidth = _this.owner.selection.start.paragraph.associatedCell.ownerTable.getTableClientWidth(containerWidth);\n _this.tableFormat.preferredWidthType = 'Percent';\n _this.tableFormat.preferredWidth = tableWidth / HelperMethods.convertPixelToPoint(_this.owner.clientArea.width) * 100;\n }\n }\n }\n if (_this.rowHeightValue) {\n _this.rowFormat.height = _this.rowHeightValue;\n }\n _this.owner.owner.editorModule.initComplexHistory('TableProperties');\n _this.owner.owner.editorModule.onTableFormat(_this.tableFormat);\n _this.owner.owner.editorModule.onRowFormat(_this.rowFormat);\n _this.owner.owner.editorModule.onCellFormat(_this.cellFormat);\n _this.owner.owner.editorHistory.updateComplexHistory();\n _this.closeTablePropertiesDialog();\n _this.owner.updateFocus();\n };\n /**\n * @private\n */\n this.applyTableSubProperties = function () {\n if (_this.isCellOptionsUpdated) {\n var cellFormat = _this.owner.owner.cellOptionsDialogModule.cellFormat;\n _this.owner.owner.cellOptionsDialogModule.applySubCellOptions(cellFormat);\n }\n if (_this.isTableOptionsUpdated) {\n var tableFormat = _this.owner.owner.tableOptionsDialogModule.tableFormat;\n _this.owner.owner.tableOptionsDialogModule.applySubTableOptions(tableFormat);\n }\n _this.isCellOptionsUpdated = false;\n _this.isTableOptionsUpdated = false;\n };\n /**\n * @private\n */\n this.unWireEvent = function () {\n //Table Format\n _this.preferCheckBox.change = undefined;\n _this.tableWidthBox.change = undefined;\n _this.tableWidthType.change = undefined;\n _this.leftIndentBox.change = undefined;\n //Row Format\n _this.rowHeightCheckBox.change = undefined;\n _this.rowHeightBox.change = undefined;\n _this.rowHeightType.change = undefined;\n _this.repeatHeader.change = undefined;\n _this.allowRowBreak.change = undefined;\n //Cell Format\n _this.preferredCellWidthCheckBox.change = undefined;\n _this.cellWidthBox.change = undefined;\n _this.cellWidthType.change = undefined;\n _this.cellFormat.destroy();\n _this.rowFormat.destroy();\n _this.tableFormat.destroy();\n _this.rowHeightValue = undefined;\n _this.owner.dialog2.open = _this.owner.selection.hideCaret.bind(_this.owner);\n };\n /**\n * @private\n */\n this.closeTablePropertiesDialog = function () {\n _this.owner.dialog2.hide();\n _this.owner.updateFocus();\n };\n /**\n * @private\n */\n this.changeTableCheckBox = function () {\n var enable = (_this.preferCheckBox.checked || _this.preferCheckBox.indeterminate);\n _this.tableWidthBox.enabled = enable;\n _this.tableWidthType.enabled = enable;\n if (enable) {\n _this.tableFormat.preferredWidthType = (_this.tableWidthType.value === 'Points') ?\n 'Point' : _this.tableWidthType.value;\n }\n else {\n _this.tableFormat.preferredWidthType = _this.owner.selection.tableFormat.preferredWidthType;\n }\n };\n /**\n * @private\n */\n this.changeTableAlignment = function (event) {\n _this.updateClassForAlignmentProperties(_this.tableTab);\n var element = event.target;\n classList(element, ['e-de-table-alignment-active'], ['e-de-table-properties-alignment']);\n if (element.classList.contains('e-de-table-left-alignment')) {\n _this.leftIndentBox.enabled = true;\n }\n else {\n _this.leftIndentBox.enabled = false;\n }\n _this.tableFormat.tableAlignment = _this.getTableAlignment();\n };\n /**\n * @private\n */\n this.changeTableRowCheckBox = function () {\n _this.rowHeightType.enabled = _this.rowHeightCheckBox.checked;\n _this.rowHeightBox.enabled = _this.rowHeightCheckBox.checked;\n if (_this.rowHeightType.enabled) {\n _this.rowFormat.heightType = _this.rowHeightType.value;\n }\n else {\n _this.rowFormat.heightType = _this.owner.selection.rowFormat.heightType;\n }\n };\n /**\n * @private\n */\n this.changeTableCellCheckBox = function () {\n _this.cellWidthType.enabled = _this.preferredCellWidthCheckBox.checked;\n _this.cellWidthBox.enabled = _this.preferredCellWidthCheckBox.checked;\n };\n /**\n * @private\n */\n this.changeCellAlignment = function (event) {\n _this.updateClassForCellAlignment(_this.cellTab);\n var element = event.target;\n classList(element, ['e-de-table-alignment-active'], ['e-de-tablecell-alignment']);\n _this.cellFormat.verticalAlignment = _this.getCellAlignment();\n };\n //#endregion\n /**\n * @private\n */\n this.showTableOptionsDialog = function () {\n _this.owner.owner.tableOptionsDialogModule.show();\n _this.owner.dialog2.element.style.pointerEvents = 'none';\n };\n /**\n * @private\n */\n this.showBordersShadingsPropertiesDialog = function () {\n _this.owner.owner.bordersAndShadingDialogModule.show();\n _this.owner.dialog2.element.style.pointerEvents = 'none';\n };\n /**\n * @private\n */\n this.showCellOptionsDialog = function () {\n _this.owner.owner.cellOptionsDialogModule.show();\n _this.owner.dialog2.element.style.pointerEvents = 'none';\n };\n this.owner = viewer;\n }\n Object.defineProperty(TablePropertiesDialog.prototype, \"cellFormat\", {\n /**\n * @private\n */\n get: function () {\n if (isNullOrUndefined(this.cellFormatIn)) {\n return this.cellFormatIn = new WCellFormat();\n }\n return this.cellFormatIn;\n },\n /**\n * @private\n */\n set: function (value) {\n this.cellFormatIn = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TablePropertiesDialog.prototype, \"tableFormat\", {\n /**\n * @private\n */\n get: function () {\n if (isNullOrUndefined(this.tableFormatIn)) {\n this.tableFormatIn = new WTableFormat();\n return this.tableFormatIn;\n }\n return this.tableFormatIn;\n },\n /**\n * @private\n */\n set: function (value) {\n this.tableFormatIn = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TablePropertiesDialog.prototype, \"rowFormat\", {\n /**\n * @private\n */\n get: function () {\n if (isNullOrUndefined(this.rowFormatInternal)) {\n this.rowFormatInternal = new WRowFormat();\n return this.rowFormatInternal;\n }\n return this.rowFormatInternal;\n },\n enumerable: true,\n configurable: true\n });\n TablePropertiesDialog.prototype.getModuleName = function () {\n return 'TablePropertiesDialog';\n };\n /**\n * @private\n */\n TablePropertiesDialog.prototype.initTablePropertyDialog = function (localValue) {\n var id = this.owner.owner.containerId + '_TablePropertiesDialog';\n this.target = createElement('div', { id: id, className: 'e-de-table-properties-dlg' });\n this.owner.owner.element.appendChild(this.target);\n var ejtabContainer = createElement('div', { id: this.target.id + '_TabContainer' });\n this.target.appendChild(ejtabContainer);\n this.tableTab = createElement('div', {\n id: this.target.id + '_TablePropertiesContentDialogTab', className: 'e-de-table-ppty-dlg-tabs'\n });\n this.rowTab = createElement('div', {\n id: this.target.id + '_RowPropertiesDialogTab', className: 'e-de-table-ppty-dlg-tabs'\n });\n this.cellTab = createElement('div', {\n id: this.target.id + '_CellPropertiesDialogTab', className: 'e-de-table-ppty-dlg-tabs'\n });\n var separatorLine = createElement('div', { className: 'e-de-table-dialog-separator-line' });\n // tslint:disable-next-line:max-line-length\n var ejtab = createElement('div', { id: this.target.id + '_TablePropertiesDialogTab', className: 'e-de-table-ppty-tab' });\n var headerContainer = createElement('div', { className: 'e-tab-header' });\n var tableHeader = createElement('div', {\n id: this.target.id + '_tableHeader', innerHTML: localValue.getConstant('Table')\n });\n var rowHeader = createElement('div', {\n id: this.target.id + '_rowHeader', innerHTML: localValue.getConstant('Row')\n });\n var cellHeader = createElement('div', {\n id: this.target.id + '_cellHeader', innerHTML: localValue.getConstant('Cell')\n });\n headerContainer.appendChild(tableHeader);\n headerContainer.appendChild(rowHeader);\n headerContainer.appendChild(cellHeader);\n var contentContainer = createElement('div', { className: 'e-content' });\n var tableContent = createElement('div', { id: this.target.id + '_tableContent' });\n var rowContent = createElement('div', { id: this.target.id + '_rowContent' });\n var cellContent = createElement('div', { id: this.target.id + '_cellContent' });\n tableContent.appendChild(this.tableTab);\n rowContent.appendChild(this.rowTab);\n cellContent.appendChild(this.cellTab);\n contentContainer.appendChild(tableContent);\n contentContainer.appendChild(rowContent);\n contentContainer.appendChild(cellContent);\n ejtab.appendChild(headerContainer);\n ejtab.appendChild(contentContainer);\n ejtabContainer.appendChild(ejtab);\n this.initTableProperties(this.tableTab, localValue);\n this.initTableRowProperties(this.rowTab, localValue);\n this.initTableCellProperties(this.cellTab, localValue);\n this.tabObj = new Tab({}, ejtab);\n this.target.appendChild(separatorLine);\n var alignMentButtons = this.tableTab.getElementsByClassName(this.tableTab.id + 'e-de-table-alignment');\n for (var i = 0; i < alignMentButtons.length; i++) {\n alignMentButtons[i].addEventListener('click', this.changeTableAlignment);\n }\n var cellAlignment = this.cellTab.getElementsByClassName(this.cellTab.id + 'e-de-table-cell-alignment');\n for (var i = 0; i < cellAlignment.length; i++) {\n cellAlignment[i].addEventListener('click', this.changeCellAlignment);\n }\n var tableTabHeader = this.tabObj.element.getElementsByClassName('e-item e-toolbar-item')[0];\n var tableTabHeaderItem = tableTabHeader.getElementsByClassName('e-tab-wrap')[0];\n tableTabHeaderItem.classList.add('e-de-table-ppty-dlg-table-header');\n var rowTabHeader = this.tabObj.element.getElementsByClassName('e-item e-toolbar-item')[1];\n var rowTabHeaderItem = rowTabHeader.getElementsByClassName('e-tab-wrap')[0];\n rowTabHeaderItem.classList.add('e-de-table-ppty-dlg-row-header');\n var cellTabHeader = this.tabObj.element.getElementsByClassName('e-item e-toolbar-item')[2];\n var cellTabHeaderItem = cellTabHeader.getElementsByClassName('e-tab-wrap')[0];\n cellTabHeaderItem.classList.add('e-de-table-ppty-dlg-cell-header');\n this.tabObj.element.getElementsByClassName('e-indicator')[0].style.right = '155px';\n };\n /**\n * @private\n */\n TablePropertiesDialog.prototype.show = function () {\n var localValue = new L10n('documenteditor', this.owner.owner.defaultLocale);\n localValue.setLocale(this.owner.owner.locale);\n setCulture(this.owner.owner.locale);\n if (!this.target) {\n this.initTablePropertyDialog(localValue);\n }\n if (this.owner.selection.caret.style.display !== 'none') {\n this.owner.selection.caret.style.display = 'none';\n }\n this.owner.dialog2.header = localValue.getConstant('Table Properties');\n this.owner.dialog2.position = { X: 'center', Y: 'center' };\n this.owner.dialog2.width = 'auto';\n this.owner.dialog2.height = 'auto';\n this.owner.dialog2.content = this.target;\n this.owner.dialog2.beforeOpen = this.onBeforeOpen;\n this.owner.dialog2.close = this.onCloseTablePropertyDialog;\n this.owner.dialog2.open = this.wireEvent.bind(this);\n this.owner.dialog2.buttons = [{\n click: this.applyTableProperties,\n buttonModel: { content: localValue.getConstant('Ok'), cssClass: 'e-flat e-table-ppty-okay', isPrimary: true }\n },\n {\n click: this.closeTablePropertiesDialog,\n buttonModel: { content: localValue.getConstant('Cancel'), cssClass: 'e-flat e-table-ppty-cancel' }\n }];\n //this.tabObj.select(0);\n this.owner.dialog2.dataBind();\n this.owner.dialog2.show();\n };\n /**\n * @private\n */\n TablePropertiesDialog.prototype.calculateGridValue = function (table) {\n table.calculateGrid();\n table.isGridUpdated = false;\n table.buildTableColumns();\n table.isGridUpdated = true;\n this.owner.selection.owner.isLayoutEnabled = true;\n this.owner.layout.reLayoutTable(table);\n this.owner.owner.editorModule.reLayout(this.owner.selection);\n this.owner.owner.editorModule.updateSelectionTextPosition(true);\n var history = this.owner.owner.editorHistory;\n if (history && history.currentBaseHistoryInfo) {\n if (history.currentBaseHistoryInfo.modifiedProperties.length > 0) {\n history.currentBaseHistoryInfo.updateSelection();\n }\n history.updateHistory();\n }\n this.owner.owner.editorModule.fireContentChange();\n };\n /**\n * @private\n */\n TablePropertiesDialog.prototype.loadTableProperties = function () {\n this.setTableProperties();\n this.setTableRowProperties();\n this.setTableCellProperties();\n if (!this.owner.owner.bordersAndShadingDialogModule) {\n this.bordersAndShadingButton.disabled = true;\n }\n else {\n this.bordersAndShadingButton.disabled = false;\n }\n // if (!this.owner.owner.tableOptionsDialogModule) {\n // this.tableOptionButton.disabled = true;\n // } else {\n this.tableOptionButton.disabled = false;\n // }\n // if (!this.owner.owner.cellOptionsDialogModule) {\n // this.cellOptionButton.disabled = true;\n // } else {\n this.cellOptionButton.disabled = false;\n // }\n };\n /**\n * @private\n */\n TablePropertiesDialog.prototype.wireEvent = function () {\n this.owner.selection.hideCaret();\n //Table Format\n this.preferCheckBox.change = this.changeTableCheckBox.bind(this);\n this.tableWidthBox.change = this.onTableWidthChange.bind(this);\n this.tableWidthType.change = this.onTableWidthTypeChange.bind(this);\n this.leftIndentBox.change = this.onLeftIndentChange.bind(this);\n //Row Format\n this.rowHeightCheckBox.change = this.changeTableRowCheckBox.bind(this);\n this.rowHeightBox.change = this.onRowHeightChange.bind(this);\n this.rowHeightType.change = this.onRowHeightTypeChange.bind(this);\n this.allowRowBreak.change = this.onAllowBreakAcrossPage.bind(this);\n this.repeatHeader.change = this.onRepeatHeader.bind(this);\n //Cell Format\n this.preferredCellWidthCheckBox.change = this.changeTableCellCheckBox.bind(this);\n this.cellWidthBox.change = this.onCellWidthChange.bind(this);\n this.cellWidthType.change = this.onCellWidthTypeChange.bind(this);\n };\n //#region Table Format\n /**\n * @private\n */\n // tslint:disable-next-line:max-func-body-length\n TablePropertiesDialog.prototype.initTableProperties = function (element, localValue) {\n var container = createElement('div', { id: element.id + '_table_TabContainer' });\n var sizeHeader = createElement('div', {\n id: container.id + '_sizeLabel', innerHTML: localValue.getConstant('Size'),\n styles: 'width:100%;margin:0px;padding-top: 20px;padding-bottom: 0px;', className: 'e-de-table-dialog-options-label'\n });\n var parentContainer = createElement('div', { styles: 'display: inline-flex;' });\n var childContainer1 = createElement('div', {\n styles: 'float: left;',\n className: 'e-de-table-container-div'\n });\n var childContainer2 = createElement('div', {\n className: 'e-de-table-ppty-dlg-preferred-width-div'\n });\n var child1 = createElement('div', {\n styles: 'display: inline;',\n className: 'e-de-table-ppty-dlg-measure-div'\n });\n var child2 = createElement('div', {\n styles: 'display: inline;position: absolute;',\n className: 'e-de-table-ppty-dlg-measure-drop-down-div'\n });\n var childContainer3 = createElement('div');\n var preferCheckBox = createElement('input', {\n id: element.id + '_Prefer_Width_CheckBox', attrs: { 'type': 'checkbox' }\n });\n this.preferredWidth = createElement('input', { id: element.id + 'preferred_Width' });\n var controlDiv = createElement('div');\n var tableWidthType = createElement('select', {\n innerHTML: '', id: element.id + '_width_dropdown'\n });\n var labeltext = createElement('label', {\n innerHTML: localValue.getConstant('Measure in'), styles: 'width: 60px;font-size: 11px; font-weight: normal;'\n });\n var alignmentHeader = createElement('div', {\n innerHTML: localValue.getConstant('Alignment'), className: 'e-de-table-dialog-options-label',\n styles: 'width: 100%;margin: 0px;padding-bottom: 15px'\n });\n var alignmentContainer = createElement('div', { styles: 'height:70px;' });\n var classDivName = element.id + 'e-de-table-alignment';\n var leftAlignDiv = createElement('div', { className: 'e-de-table-dia-align-div' });\n this.left = createElement('div', {\n className: 'e-icons e-de-table-properties-alignment e-de-table-left-alignment ' + classDivName,\n id: element.id + '_left_alignment', styles: 'width:54px;height:54px;margin:2px'\n });\n leftAlignDiv.appendChild(this.left);\n var centerAlignDiv = createElement('div', { className: 'e-de-table-dia-align-div' });\n this.center = createElement('div', {\n className: 'e-icons e-de-table-properties-alignment e-de-table-center-alignment ' + classDivName,\n id: element.id + '_center_alignment', styles: 'width:54px;height:54px;margin:2px'\n });\n centerAlignDiv.appendChild(this.center);\n this.right = createElement('div', {\n styles: 'width:54px;height:54px;margin:2px', id: element.id + '_right_alignment',\n className: 'e-icons e-de-table-properties-alignment e-de-table-right-alignment ' + classDivName\n });\n var rightAlignDiv = createElement('div', { className: 'e-de-table-dia-align-div' });\n rightAlignDiv.appendChild(this.right);\n var leftlabel = createElement('label', {\n innerHTML: localValue.getConstant('Left'), className: 'e-de-table-dia-align-label'\n });\n var centerlabel = createElement('label', {\n innerHTML: localValue.getConstant('Center'), className: 'e-de-table-dia-align-label'\n });\n var rightlabel = createElement('label', {\n innerHTML: localValue.getConstant('Right'), className: 'e-de-table-dia-align-label'\n });\n var leftIndenetContainer = createElement('div', {\n className: 'e-de-table-ppty-dlg-left-indent-container'\n });\n var leftIndentLabel = createElement('label', {\n innerHTML: localValue.getConstant('Indent from Left'),\n styles: 'font-weight: normal;font-size: 11px;float:right;margin-right:121px;'\n });\n var leftIndentBox = createElement('div', {\n styles: 'margin-top: 27px;'\n });\n this.leftIndent = createElement('input', { id: element.id + '_left_indent' });\n var tableOptionContiner = createElement('div', {\n className: 'e-de-tbl-dlg-border-btn'\n });\n this.bordersAndShadingButton = createElement('button', {\n innerHTML: localValue.getConstant('Borders and Shading'),\n id: element.id + '_borders_and_shadings', className: 'e-control e-btn e-flat e-de-ok-button'\n });\n this.tableOptionButton = createElement('button', {\n className: 'e-control e-btn e-flat', innerHTML: localValue.getConstant('Options'),\n id: element.id + '_table_cellmargin'\n });\n this.tableOptionButton.addEventListener('click', this.showTableOptionsDialog);\n this.bordersAndShadingButton.addEventListener('click', this.showBordersShadingsPropertiesDialog);\n tableOptionContiner.appendChild(this.bordersAndShadingButton);\n tableOptionContiner.appendChild(this.tableOptionButton);\n leftIndenetContainer.appendChild(leftIndentLabel);\n leftIndentBox.appendChild(this.leftIndent);\n leftIndenetContainer.appendChild(leftIndentBox);\n alignmentContainer.appendChild(leftAlignDiv);\n alignmentContainer.appendChild(centerAlignDiv);\n alignmentContainer.appendChild(rightAlignDiv);\n leftAlignDiv.appendChild(leftlabel);\n centerAlignDiv.appendChild(centerlabel);\n rightAlignDiv.appendChild(rightlabel);\n alignmentContainer.appendChild(leftIndenetContainer);\n container.appendChild(sizeHeader);\n element.appendChild(container);\n childContainer1.appendChild(preferCheckBox);\n parentContainer.appendChild(childContainer1);\n childContainer2.appendChild(this.preferredWidth);\n parentContainer.appendChild(childContainer2);\n controlDiv.appendChild(tableWidthType);\n child1.appendChild(labeltext);\n child2.appendChild(controlDiv);\n childContainer3.appendChild(child1);\n childContainer3.appendChild(child2);\n parentContainer.appendChild(childContainer3);\n element.appendChild(parentContainer);\n element.appendChild(alignmentHeader);\n element.appendChild(alignmentContainer);\n element.appendChild(tableOptionContiner);\n this.tableWidthBox = new NumericTextBox({\n value: 0, decimals: 2, min: 0, max: 1584, width: 120, enablePersistence: false\n });\n this.tableWidthBox.appendTo(this.preferredWidth);\n this.leftIndentBox = new NumericTextBox({\n value: 0, decimals: 2, min: -1584, max: 1584, width: 140, enablePersistence: false\n });\n this.leftIndentBox.appendTo(this.leftIndent);\n this.preferCheckBox = new CheckBox({\n label: localValue.getConstant('Preferred Width')\n });\n this.preferCheckBox.appendTo(preferCheckBox);\n this.tableWidthType = new DropDownList({ width: '120px' });\n this.tableWidthType.appendTo(tableWidthType);\n };\n /**\n * @private\n */\n TablePropertiesDialog.prototype.onTableWidthChange = function () {\n this.tableFormat.preferredWidth = this.tableWidthBox.value;\n };\n /**\n * @private\n */\n TablePropertiesDialog.prototype.onTableWidthTypeChange = function () {\n var value;\n var table = this.owner.selection.start.paragraph.associatedCell.ownerTable;\n var width = HelperMethods.convertPixelToPoint(this.owner.clientArea.width);\n if (this.tableWidthType.text === 'Percent' && this.owner.selection.tableFormat.preferredWidthType !== 'Percent') {\n value = this.tableWidthBox.value / width * 100;\n this.formatNumericTextBox(this.tableWidthBox, 'Percent', value);\n }\n else if (this.tableWidthType.text === 'Points' && this.owner.selection.tableFormat.preferredWidthType !== 'Point') {\n value = width / 100 * this.tableWidthBox.value;\n this.formatNumericTextBox(this.tableWidthBox, 'Point', value);\n }\n else {\n if (this.tableWidthBox.format === '#\\'\\%\\'') {\n if (this.tableWidthType.text === 'Points') {\n value = width / 100 * this.tableWidthBox.value;\n }\n else {\n value = this.tableWidthBox.value;\n }\n }\n else {\n if (this.tableWidthType.text === 'Percent') {\n value = this.tableWidthBox.value / width * 100;\n }\n else {\n value = this.tableWidthBox.value;\n }\n }\n // tslint:disable-next-line:max-line-length\n this.formatNumericTextBox(this.tableWidthBox, (this.tableWidthType.text === 'Points') ? 'Point' : this.tableWidthType.text, value);\n }\n this.tableFormat.preferredWidthType = (this.tableWidthType.text === 'Points') ? 'Point' : this.tableWidthType.text;\n };\n /**\n * @private\n */\n TablePropertiesDialog.prototype.onLeftIndentChange = function () {\n this.tableFormat.leftIndent = this.leftIndentBox.value;\n };\n TablePropertiesDialog.prototype.setTableProperties = function () {\n //instance of Table Property values\n var tableFormat = this.owner.selection.tableFormat;\n var tableHasWidth = tableFormat.preferredWidth > 0;\n var preferredWidth = tableFormat.preferredWidth;\n if (isNullOrUndefined(tableFormat.preferredWidth)) {\n this.preferCheckBox.indeterminate = true;\n var startTable = this.owner.selection.start.paragraph.associatedCell.ownerTable;\n var table = startTable.combineWidget(this.owner);\n preferredWidth = table.tableFormat.preferredWidth;\n }\n else {\n this.preferCheckBox.checked = tableHasWidth;\n }\n this.tableWidthBox.enabled = tableHasWidth;\n this.tableWidthType.enabled = tableHasWidth;\n this.formatNumericTextBox(this.tableWidthBox, tableFormat.preferredWidthType, preferredWidth);\n if (tableFormat.preferredWidthType === 'Auto' || tableFormat.preferredWidthType === 'Point') {\n this.tableWidthType.index = 0;\n }\n else {\n this.tableWidthType.index = 1;\n }\n this.leftIndentBox.value = tableFormat.leftIndent;\n this.leftIndentBox.enabled = tableFormat.tableAlignment === 'Left';\n classList(this.left, [], ['e-de-table-alignment-active']);\n classList(this.right, [], ['e-de-table-alignment-active']);\n classList(this.center, [], ['e-de-table-alignment-active']);\n if (tableFormat.tableAlignment === 'Left') {\n this.left.classList.add('e-de-table-alignment-active');\n }\n else if (tableFormat.tableAlignment === 'Center') {\n this.center.classList.add('e-de-table-alignment-active');\n }\n else if (tableFormat.tableAlignment === 'Right') {\n this.right.classList.add('e-de-table-alignment-active');\n }\n };\n /**\n * @private\n */\n TablePropertiesDialog.prototype.getTableAlignment = function () {\n var id = this.tableTab.id;\n var groupButtons = this.tableTab.getElementsByClassName(id + 'e-de-table-alignment');\n for (var j = 0; j < groupButtons.length; j++) {\n var groupButton = groupButtons[j];\n if (groupButton.classList.contains('e-de-table-alignment-active')) {\n if (j === 0) {\n return 'Left';\n }\n else if (j === 1) {\n return 'Center';\n }\n else {\n return 'Right';\n }\n }\n }\n return undefined;\n };\n /**\n * @private\n */\n TablePropertiesDialog.prototype.updateClassForAlignmentProperties = function (element) {\n var id = element.id;\n var groupButtons = element.getElementsByClassName(id + 'e-de-table-alignment');\n for (var j = 0; j < groupButtons.length; j++) {\n var groupButton = groupButtons[j];\n if (groupButton.classList.contains('e-de-table-alignment-active')) {\n classList(groupButton, ['e-de-table-properties-alignment'], ['e-de-table-alignment-active']);\n }\n }\n };\n //#endregion\n //#region Row Format\n /**\n * @private\n */\n TablePropertiesDialog.prototype.initTableRowProperties = function (element, localValue) {\n var rowDiv = createElement('div', { styles: 'width: 100%;' });\n var sizeLabeldiv = createElement('div', {\n innerHTML: localValue.getConstant('Size'),\n styles: 'width: 100%;padding-top: 20px;padding-bottom: 10px;',\n className: 'e-de-table-dialog-options-label'\n });\n var parentDiv = createElement('div', { styles: 'display: inline;width: 100%;' });\n var childDiv1 = createElement('div', {\n styles: 'display: inline;float: left;',\n className: 'e-de-table-header-div'\n });\n var rowHeightCheckBox = createElement('input', {\n attrs: { 'type': 'checkbox' }, id: element.id + '_height_CheckBox'\n });\n var childdiv2 = createElement('div', {\n styles: 'display: inline-block;',\n className: 'e-de-row-ht-top'\n });\n this.rowHeight = createElement('input', {\n attrs: { 'type': 'text' }, 'id': element.id + '_table_row_height'\n });\n var child2 = createElement('div', {\n styles: 'float: right;display: inline;width: auto;margin-top: 5px;'\n });\n var child3 = createElement('div', {\n styles: 'display: inline;',\n className: 'e-de-table-ppty-dlg-row-height-label'\n });\n var child4 = createElement('div', {\n styles: 'display: inline;',\n className: 'e-de-table-subheader-div'\n });\n var controlDiv = createElement('div');\n var rowHeightType = createElement('select', {\n innerHTML: '',\n id: element.id + '_height_type'\n });\n var labeltext = createElement('label', {\n innerHTML: localValue.getConstant('Row height is'), styles: 'font-size: 11px;font-weight: normal;width: 75px;'\n });\n rowDiv.appendChild(sizeLabeldiv);\n element.appendChild(rowDiv);\n childDiv1.appendChild(rowHeightCheckBox);\n parentDiv.appendChild(childDiv1);\n childdiv2.appendChild(this.rowHeight);\n parentDiv.appendChild(childdiv2);\n controlDiv.appendChild(rowHeightType);\n child3.appendChild(labeltext);\n child4.appendChild(controlDiv);\n child2.appendChild(child3);\n child2.appendChild(child4);\n parentDiv.appendChild(child2);\n element.appendChild(parentDiv);\n var alignmentDiv = createElement('div', {\n innerHTML: localValue.getConstant('Options'), styles: 'width: 100%;',\n className: 'e-de-table-dialog-options-label'\n });\n // tslint:disable-next-line:max-line-length\n var allowRowContainer = createElement('div', { className: 'e-de-table-ppty-options-break' });\n var repeatHeaderContaniner = createElement('div', { className: 'e-de-table-ppty-options-header-row' });\n var allowRowBreak = createElement('input', {\n attrs: { 'type': 'checkbox' }, id: element.id + '_allow_row_break'\n });\n var repeatHeader = createElement('input', {\n attrs: { 'type': 'checkbox' }, 'id': element.id + '_repeat_header'\n });\n allowRowContainer.appendChild(allowRowBreak);\n repeatHeaderContaniner.appendChild(repeatHeader);\n element.appendChild(alignmentDiv);\n element.appendChild(allowRowContainer);\n element.appendChild(repeatHeaderContaniner);\n this.rowHeightBox = new NumericTextBox({\n value: 0, decimals: 2, min: 0, max: 1584, width: 120, enablePersistence: false\n });\n this.rowHeightBox.appendTo(this.rowHeight);\n this.rowHeightCheckBox = new CheckBox({\n label: localValue.getConstant('Specify height')\n });\n this.rowHeightCheckBox.appendTo(rowHeightCheckBox);\n this.rowHeightType = new DropDownList({ width: '120px' });\n this.rowHeightType.appendTo(rowHeightType);\n this.allowRowBreak = new CheckBox({\n label: localValue.getConstant('Allow row to break across pages')\n });\n this.allowRowBreak.appendTo(allowRowBreak);\n this.repeatHeader = new CheckBox({\n label: localValue.getConstant('Repeat as header row at the top of each page')\n });\n this.repeatHeader.appendTo(repeatHeader);\n };\n TablePropertiesDialog.prototype.setTableRowProperties = function () {\n var rowFormat = this.owner.selection.rowFormat;\n var enableRowHeight = (rowFormat.height > 0 || rowFormat.heightType === 'Exactly');\n //instance of table row values\n if (enableRowHeight) {\n this.rowHeightCheckBox.checked = true;\n }\n else {\n if (rowFormat.heightType === undefined) {\n this.rowHeightCheckBox.indeterminate = true;\n enableRowHeight = true;\n }\n else {\n this.rowHeightCheckBox.checked = false;\n }\n }\n this.rowHeightBox.enabled = enableRowHeight;\n this.rowHeightType.enabled = enableRowHeight;\n // let enabledHeader: boolean = this.enableRepeatHeader() ? false : true;\n var enabledHeader = true;\n if (isNullOrUndefined(this.owner.selection.rowFormat.isHeader)) {\n this.repeatHeader.indeterminate = true;\n this.repeatHeader.disabled = true;\n }\n else if (this.owner.selection.rowFormat.isHeader) {\n this.repeatHeader.checked = !enabledHeader;\n this.repeatHeader.indeterminate = enabledHeader;\n this.repeatHeader.disabled = enabledHeader;\n }\n else {\n this.repeatHeader.checked = false;\n this.repeatHeader.indeterminate = false;\n this.repeatHeader.disabled = enabledHeader;\n }\n if (isNullOrUndefined(rowFormat.allowBreakAcrossPages)) {\n this.allowRowBreak.indeterminate = true;\n }\n else {\n this.allowRowBreak.checked = rowFormat.allowBreakAcrossPages;\n }\n this.rowHeightBox.value = rowFormat.height;\n if (rowFormat.heightType === 'Auto' || rowFormat.heightType === 'AtLeast') {\n this.rowHeightType.index = 0;\n }\n else {\n this.rowHeightType.index = 1;\n }\n };\n /**\n * @private\n */\n TablePropertiesDialog.prototype.onRowHeightChange = function () {\n this.rowHeightValue = this.rowHeightBox.value;\n };\n /**\n * @private\n */\n TablePropertiesDialog.prototype.onRowHeightTypeChange = function () {\n this.rowFormat.heightType = this.rowHeightType.text;\n };\n /**\n * @private\n */\n TablePropertiesDialog.prototype.onAllowBreakAcrossPage = function () {\n this.rowFormat.allowBreakAcrossPages = this.allowRowBreak.checked;\n };\n /**\n * @private\n */\n TablePropertiesDialog.prototype.onRepeatHeader = function () {\n this.rowFormat.isHeader = this.repeatHeader.checked;\n };\n /**\n * @private\n */\n // public enableRepeatHeader(): boolean {\n // let isFirstRow: number = 0;\n // for (let i: number = 0; i < this.owner.selection.selectionRanges.length; i++) {\n // let range: SelectionRange = this.owner.selection.selectionRanges.getRange(i);\n // let table: WTable = range.start.paragraph.associatedCell.ownerTable;\n // if (table.childNodes.indexOf(range.start.paragraph.associatedCell.ownerRow) === 0 ||\n // table.childNodes.indexOf(range.start.paragraph.associatedCell.ownerRow) === 0) {\n // isFirstRow++;\n // }\n // }\n // return isFirstRow === this.owner.selection.selectionRanges.length;\n // }\n //#endregion\n //#region Cell Format\n /**\n * @private\n */\n TablePropertiesDialog.prototype.initTableCellProperties = function (element, localValue) {\n var sizeDiv = createElement('div', { styles: 'width: 100%;' });\n var div = createElement('div', {\n innerHTML: localValue.getConstant('Size'), className: 'e-de-table-dialog-options-label',\n styles: 'width: 100%;padding-top: 20px;padding-bottom: 10px;',\n });\n var parentdiv = createElement('div', { styles: 'display: inline;width: 100%;' });\n var childdiv1 = createElement('div', {\n styles: 'display: inline;float: left;',\n className: 'e-de-table-cell-header-div'\n });\n var preferredCellWidthCheckBox = createElement('input', {\n attrs: { 'type': 'checkbox' }, id: element.id + '_Prefer_Width_CheckBox_cell'\n });\n var childdiv2 = createElement('div', {\n styles: 'display: inline-block;',\n className: 'e-de-cell-width-top'\n });\n this.preferredCellWidth = createElement('input', {\n id: element.id + 'tablecell_Width_textBox', attrs: { 'type': 'text' }\n });\n var child2 = createElement('div', {\n styles: 'float: right;display: inline;width: auto;margin-top: 5px;'\n });\n var child3 = createElement('div', {\n styles: 'display: inline;',\n className: 'e-de-table-ppty-dlg-cell-tab-measure-label'\n });\n var child4 = createElement('div', {\n styles: 'display: inline;float: right;', className: 'e-de-table-cell-subheader-div'\n });\n var controlDiv = createElement('div');\n var cellWidthType = createElement('select', {\n innerHTML: '', 'id': element.id + '_measure_type_cell'\n });\n var labeltext = createElement('label', {\n innerHTML: localValue.getConstant('Measure in'),\n styles: 'font-size: 11px;font-weight: normal;'\n });\n sizeDiv.appendChild(div);\n element.appendChild(sizeDiv);\n childdiv1.appendChild(preferredCellWidthCheckBox);\n parentdiv.appendChild(childdiv1);\n childdiv2.appendChild(this.preferredCellWidth);\n parentdiv.appendChild(childdiv2);\n controlDiv.appendChild(cellWidthType);\n child3.appendChild(labeltext);\n child4.appendChild(controlDiv);\n child2.appendChild(child3);\n child2.appendChild(child4);\n parentdiv.appendChild(child2);\n element.appendChild(parentdiv);\n var alignmentDiv = createElement('div', {\n innerHTML: localValue.getConstant('Vertical alignment'),\n styles: 'width: 100%;margin: 0px;',\n className: 'e-de-table-dialog-options-label'\n });\n var classDivName = element.id + 'e-de-table-cell-alignment';\n var divAlignment = createElement('div', {\n styles: 'width: 100%;height: 100px;'\n });\n var divStyle = 'width:54px;height:54px;margin:2px;border-style:solid;border-width:1px';\n var topAlignDiv = createElement('div', { className: 'e-de-table-dia-align-div' });\n this.cellTopAlign = createElement('div', {\n styles: divStyle, id: element.id + '_cell_top-alignment',\n className: 'e-icons e-de-tablecell-alignment e-de-tablecell-top-alignment ' + classDivName\n });\n topAlignDiv.appendChild(this.cellTopAlign);\n var centerAlignDiv = createElement('div', { className: 'e-de-table-dia-align-div' });\n this.cellCenterAlign = createElement('div', {\n styles: divStyle, id: element.id + '_cell_center-alignment',\n className: 'e-icons e-de-tablecell-alignment e-de-tablecell-center-alignment ' + classDivName\n });\n centerAlignDiv.appendChild(this.cellCenterAlign);\n var bottomAlignDiv = createElement('div', { className: 'e-de-table-dia-align-div' });\n this.cellBottomAlign = createElement('div', {\n styles: divStyle, id: element.id + '_cell_bottom-alignment',\n className: 'e-icons e-de-tablecell-alignment e-de-tablecell-bottom-alignment ' + classDivName\n });\n bottomAlignDiv.appendChild(this.cellBottomAlign);\n var topLabel = createElement('label', {\n innerHTML: localValue.getConstant('Top'), className: 'e-de-table-dia-align-label'\n });\n var centerLabel = createElement('label', {\n innerHTML: localValue.getConstant('Center'), className: 'e-de-table-dia-align-label'\n });\n var bottomLabel = createElement('label', {\n innerHTML: localValue.getConstant('Bottom'), className: 'e-de-table-dia-align-label'\n });\n this.cellOptionButton = createElement('button', {\n innerHTML: localValue.getConstant('Options'), id: element.id + '_table_cellmargin',\n className: 'e-de-tbl-dlg-op-btn e-control e-btn e-flat e-de-cell-options',\n });\n divAlignment.appendChild(topAlignDiv);\n divAlignment.appendChild(centerAlignDiv);\n divAlignment.appendChild(bottomAlignDiv);\n topAlignDiv.appendChild(topLabel);\n centerAlignDiv.appendChild(centerLabel);\n bottomAlignDiv.appendChild(bottomLabel);\n element.appendChild(alignmentDiv);\n element.appendChild(divAlignment);\n element.appendChild(this.cellOptionButton);\n this.cellOptionButton.addEventListener('click', this.showCellOptionsDialog);\n this.cellWidthBox = new NumericTextBox({\n value: 0, decimals: 2, min: 0, max: 1584, width: 120, enablePersistence: false\n });\n this.cellWidthBox.appendTo(this.preferredCellWidth);\n this.preferredCellWidthCheckBox = new CheckBox({ label: localValue.getConstant('Preferred Width') });\n this.preferredCellWidthCheckBox.appendTo(preferredCellWidthCheckBox);\n this.cellWidthType = new DropDownList({ width: '120px' });\n this.cellWidthType.appendTo(cellWidthType);\n };\n TablePropertiesDialog.prototype.setTableCellProperties = function () {\n var cellFormat = this.owner.selection.cellFormat;\n //instance of table cell Values\n this.hasCellWidth = cellFormat.preferredWidth > 0;\n var preferredWidth = cellFormat.preferredWidth;\n if (isNullOrUndefined(cellFormat.preferredWidth)) {\n this.preferredCellWidthCheckBox.indeterminate = true;\n preferredWidth = this.owner.selection.start.paragraph.associatedCell.cellFormat.preferredWidth;\n }\n else {\n this.preferredCellWidthCheckBox.checked = this.hasCellWidth;\n }\n this.cellWidthBox.enabled = this.hasCellWidth;\n this.cellWidthType.enabled = this.hasCellWidth;\n if (cellFormat.preferredWidthType === 'Auto' || cellFormat.preferredWidthType === 'Point') {\n this.cellWidthType.index = 0;\n }\n else {\n this.cellWidthType.index = 1;\n }\n this.formatNumericTextBox(this.cellWidthBox, cellFormat.preferredWidthType, preferredWidth);\n classList(this.cellTopAlign, ['e-de-tablecell-alignment'], ['e-de-table-alignment-active']);\n classList(this.cellCenterAlign, ['e-de-tablecell-alignment'], ['e-de-table-alignment-active']);\n classList(this.cellBottomAlign, ['e-de-tablecell-alignment'], ['e-de-table-alignment-active']);\n if (cellFormat.verticalAlignment === 'Top') {\n this.cellTopAlign.classList.add('e-de-table-alignment-active');\n }\n else if (cellFormat.verticalAlignment === 'Center') {\n this.cellCenterAlign.classList.add('e-de-table-alignment-active');\n }\n else if (cellFormat.verticalAlignment === 'Bottom') {\n this.cellBottomAlign.classList.add('e-de-table-alignment-active');\n }\n };\n /**\n * @private\n */\n TablePropertiesDialog.prototype.updateClassForCellAlignment = function (element) {\n var cellAlignments = element.getElementsByClassName(element.id + 'e-de-table-cell-alignment');\n for (var j = 0; j < cellAlignments.length; j++) {\n var cellAlignment = cellAlignments[j];\n if (cellAlignment.classList.contains('e-de-table-alignment-active')) {\n classList(cellAlignment, ['e-de-tablecell-alignment'], ['e-de-table-alignment-active']);\n }\n }\n };\n /**\n * @private\n */\n TablePropertiesDialog.prototype.formatNumericTextBox = function (textBox, format, value) {\n if (format === 'Auto' || format === 'Point') {\n textBox.format = 'n2';\n }\n else {\n textBox.format = '#\\'\\%\\'';\n }\n textBox.step = 1;\n textBox.decimals = 2;\n textBox.value = value;\n };\n /**\n * @private\n */\n TablePropertiesDialog.prototype.getCellAlignment = function () {\n var id = this.cellTab.id;\n var groupButtons = this.cellTab.getElementsByClassName(id + 'e-de-table-cell-alignment');\n for (var j = 0; j < groupButtons.length; j++) {\n var groupButton = groupButtons[j];\n if (groupButton.classList.contains('e-de-table-alignment-active')) {\n if (j === 0) {\n return 'Top';\n }\n else if (j === 1) {\n return 'Center';\n }\n else {\n return 'Bottom';\n }\n }\n }\n return this.owner.selection.cellFormat.verticalAlignment;\n };\n /**\n * @private\n */\n TablePropertiesDialog.prototype.onCellWidthChange = function () {\n this.cellFormat.preferredWidth = this.cellWidthBox.value;\n };\n /**\n * @private\n */\n TablePropertiesDialog.prototype.onCellWidthTypeChange = function () {\n var value;\n var table = this.owner.selection.start.paragraph.associatedCell.ownerTable;\n var containerWidth = table.getOwnerWidth(true);\n var tableWidth = table.getTableClientWidth(containerWidth);\n if (this.cellWidthType.text === 'Percent' && this.owner.selection.cellFormat.preferredWidthType !== 'Percent') {\n value = this.cellWidthBox.value / tableWidth * 100;\n this.formatNumericTextBox(this.cellWidthBox, 'Percent', value);\n }\n else if (this.cellWidthType.text === 'Points' && this.owner.selection.cellFormat.preferredWidthType !== 'Point') {\n value = tableWidth / 100 * this.cellWidthBox.value;\n this.formatNumericTextBox(this.cellWidthBox, 'Point', value);\n }\n else {\n if (this.cellWidthBox.format === '#\\'\\%\\'') {\n if (this.cellWidthType.text === 'Points') {\n value = tableWidth / 100 * this.cellWidthBox.value;\n }\n else {\n value = this.cellWidthBox.value;\n }\n }\n else {\n if (this.cellWidthType.text === 'Percent') {\n value = this.cellWidthBox.value / tableWidth * 100;\n }\n else {\n value = this.cellWidthBox.value;\n }\n }\n // tslint:disable-next-line:max-line-length\n this.formatNumericTextBox(this.cellWidthBox, (this.cellWidthType.text === 'Points') ? 'Point' : this.cellWidthType.text, value);\n }\n this.cellFormat.preferredWidthType = (this.cellWidthType.text === 'Points') ? 'Point' : this.cellWidthType.text;\n };\n /**\n * @private\n */\n TablePropertiesDialog.prototype.destroy = function () {\n if (!isNullOrUndefined(this.target)) {\n if (this.target.parentElement) {\n this.target.parentElement.removeChild(this.target);\n }\n for (var s = 0; s < this.target.childNodes.length; s++) {\n this.target.removeChild(this.target.childNodes[s]);\n s--;\n }\n this.target = undefined;\n }\n this.dialog = undefined;\n this.target = undefined;\n this.cellAlignment = undefined;\n this.tableAlignment = undefined;\n this.owner = undefined;\n this.preferCheckBox = undefined;\n this.tableWidthType = undefined;\n this.preferredWidth = undefined;\n this.rowHeightType = undefined;\n this.rowHeightCheckBox = undefined;\n this.rowHeight = undefined;\n this.cellWidthType = undefined;\n this.preferredCellWidthCheckBox = undefined;\n this.preferredCellWidth = undefined;\n this.tableTab = undefined;\n this.rowTab = undefined;\n this.cellTab = undefined;\n this.left = undefined;\n this.center = undefined;\n this.right = undefined;\n this.leftIndent = undefined;\n this.allowRowBreak = undefined;\n this.repeatHeader = undefined;\n this.cellTopAlign = undefined;\n this.cellCenterAlign = undefined;\n this.cellBottomAlign = undefined;\n this.tableFormat.destroy();\n this.cellFormat.destroy();\n this.tableFormat = undefined;\n this.cellFormat = undefined;\n };\n return TablePropertiesDialog;\n}());\nexport { TablePropertiesDialog };\n","import { createElement, isNullOrUndefined, L10n, setCulture } from '@syncfusion/ej2-base';\nimport { NumericTextBox } from '@syncfusion/ej2-inputs';\nimport { WTableFormat, WBorder, WBorders, WShading, WCellFormat } from '../format/index';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nimport { ColorPicker } from '@syncfusion/ej2-inputs';\n/**\n * The Borders and Shading dialog is used to modify borders and shading options for selected table or cells.\n */\nvar BordersAndShadingDialog = /** @class */ (function () {\n /**\n * @private\n */\n function BordersAndShadingDialog(viewer) {\n var _this = this;\n this.cellFormat = new WCellFormat();\n this.tableFormat = new WTableFormat();\n this.applyBordersShadingsProperties = function () {\n var tablePropertiesDialog = _this.owner.owner.tablePropertiesDialogModule;\n var selectedCell = _this.owner.selection.start.paragraph.associatedCell;\n //Need to bind the properties with current cell and current table formats.\n var borders = undefined;\n if (_this.checkClassName(_this.previewDivTopTop) || _this.checkClassName(_this.previewDivTopBottom)\n || _this.checkClassName(_this.previewDivTopCenter) || _this.checkClassName(_this.previewDivBottomcenter)\n || _this.checkClassName(_this.previewDivBottomLeft) || _this.checkClassName(_this.previewDivBottomRight)\n || _this.checkClassName(_this.previewDivDiagonalRight) || _this.checkClassName(_this.previewDivLeftDiagonal)) {\n borders = new WBorders();\n if (_this.checkClassName(_this.previewDivTopTop)) {\n borders.top = _this.getBorder();\n }\n if (_this.checkClassName(_this.previewDivTopBottom)) {\n borders.bottom = _this.getBorder();\n }\n if (_this.checkClassName(_this.previewDivBottomLeft)) {\n borders.left = _this.getBorder();\n }\n if (_this.checkClassName(_this.previewDivBottomRight)) {\n borders.right = _this.getBorder();\n }\n if (_this.checkClassName(_this.previewDivTopCenter)) {\n borders.horizontal = _this.getBorder();\n }\n if (_this.checkClassName(_this.previewDivBottomcenter)) {\n borders.vertical = _this.getBorder();\n }\n if (_this.checkClassName(_this.previewDivLeftDiagonal)) {\n borders.diagonalDown = _this.getBorder();\n }\n if (_this.checkClassName(_this.previewDivDiagonalRight)) {\n borders.diagonalUp = _this.getBorder();\n }\n }\n var shading = new WShading();\n var editorModule = _this.owner.owner.editorModule;\n shading.backgroundColor = _this.shadingColorPicker.value;\n if (_this.ulelementShading.index === 0) {\n _this.applyTo = 0;\n if (tablePropertiesDialog) {\n tablePropertiesDialog.isCellBordersAndShadingUpdated = true;\n }\n _this.cellFormat.borders = new WBorders();\n if (!isNullOrUndefined(borders)) {\n editorModule.applyBordersInternal(_this.cellFormat.borders, borders);\n }\n else if (_this.noneDiv.classList.contains('e-de-table-border-inside-setting-click')) {\n editorModule.applyBordersInternal(_this.cellFormat.borders, new WBorders());\n }\n // Once option has been added for texture and foreground, need to handle this similar to Shading Fill.\n if (!isNullOrUndefined(selectedCell.cellFormat.shading)) {\n shading.foregroundColor = selectedCell.cellFormat.shading.foregroundColor;\n shading.textureStyle = selectedCell.cellFormat.shading.textureStyle;\n }\n _this.cellFormat.shading = new WShading();\n editorModule.applyShading(_this.cellFormat.shading, shading);\n }\n else {\n if (tablePropertiesDialog) {\n tablePropertiesDialog.isTableBordersAndShadingUpdated = true;\n }\n _this.applyTo = 1;\n var currentTableFormat = _this.owner.owner.selection.tableFormat.table.tableFormat;\n _this.tableFormat.copyFormat(currentTableFormat);\n _this.tableFormat.borders = new WBorders();\n if (!isNullOrUndefined(borders)) {\n editorModule.applyBordersInternal(_this.tableFormat.borders, borders);\n }\n else if (_this.noneDiv.classList.contains('e-de-table-border-inside-setting-click')) {\n editorModule.applyBordersInternal(_this.tableFormat.borders, new WBorders());\n }\n // Once option has been added for texture and foreground, need to handle this similar to Shading Fill.\n if (!isNullOrUndefined(currentTableFormat.shading)) {\n shading.foregroundColor = currentTableFormat.shading.foregroundColor;\n shading.textureStyle = currentTableFormat.shading.textureStyle;\n }\n _this.tableFormat.shading = new WShading();\n editorModule.applyShading(_this.tableFormat.shading, shading);\n }\n _this.applyFormat();\n _this.closeDialog();\n };\n /**\n * @private\n */\n this.closeDialog = function () {\n _this.owner.dialog.hide();\n _this.closeBordersShadingsDialog();\n };\n this.closeBordersShadingsDialog = function () {\n _this.owner.dialog2.element.style.pointerEvents = '';\n _this.owner.updateFocus();\n };\n this.handleSettingCheckBoxAction = function (event) {\n var targetId = event.target.id;\n var tableBorderDialogId = _this.target.id;\n var targetDiv;\n if (targetId === tableBorderDialogId + '_None_Div' || targetId === tableBorderDialogId + '_None_Div_Container'\n || targetId === tableBorderDialogId + '_None_Div_Transparent') {\n _this.updateClassForSettingDivElements();\n _this.noneDiv.classList.add('e-de-table-border-inside-setting-click');\n _this.setSettingPreviewDivElement('none');\n }\n else if (targetId === tableBorderDialogId + '_Box_Div' || targetId === tableBorderDialogId + '_Box_Div_Container'\n || targetId === tableBorderDialogId + '_Box_Div_Transparent') {\n _this.updateClassForSettingDivElements();\n _this.boxDiv.classList.add('e-de-table-border-inside-setting-click');\n _this.setSettingPreviewDivElement('box');\n }\n else if (targetId === tableBorderDialogId + '_All_Div' || targetId === tableBorderDialogId + '_All_Div_Container'\n || targetId === tableBorderDialogId + '_All_Div_Transparent') {\n _this.updateClassForSettingDivElements();\n _this.allDiv.classList.add('e-de-table-border-inside-setting-click');\n _this.setSettingPreviewDivElement('all');\n }\n else {\n _this.updateClassForSettingDivElements();\n _this.customDiv.classList.add('e-de-table-border-inside-setting-click');\n _this.setSettingPreviewDivElement('customDiv');\n }\n };\n this.handlePreviewCheckBoxAction = function (event) {\n var target = event.target;\n var targetId = target.id;\n var tableBorderDialog = _this.target;\n var tableBorderDialogId = _this.target.id;\n var checkBox;\n var compareClass = 'e-de-table-border-inside-preview-click';\n _this.customDiv.click();\n if (targetId === tableBorderDialogId + '_Preview_Div_TopTop_Container' || targetId === tableBorderDialogId + '_Preview_Div_TopTop'\n || targetId === tableBorderDialogId + '_previewDivTopTopTransParent') {\n _this.handlePreviewCheckBoxShowHide(tableBorderDialogId, compareClass, _this.previewDivTopTop);\n _this.showHidePreviewDivElements(tableBorderDialogId, compareClass, '_Preview_Div', '_Preview_Div_TopTop', 'TopTop');\n }\n else if (targetId === tableBorderDialogId + '_Preview_Div_TopCenter_Container'\n || targetId === tableBorderDialogId + '_Preview_Div_TopCenter'\n || targetId === tableBorderDialogId + '_previewDivTopCenterTransParent') {\n _this.handlePreviewCheckBoxShowHide(tableBorderDialogId, compareClass, _this.previewDivTopCenter);\n // tslint:disable-next-line:max-line-length\n _this.showHidePreviewDivElements(tableBorderDialogId, compareClass, '_Preview_Div_Horizontal', '_Preview_Div_TopCenter', 'TopCenter');\n }\n else if (targetId === tableBorderDialogId + '_Preview_Div_TopBottom_Container' || targetId === tableBorderDialogId + '_Preview_Div_TopBottom'\n || targetId === tableBorderDialogId + '_previewDivTopBottomTransParent') {\n _this.handlePreviewCheckBoxShowHide(tableBorderDialogId, compareClass, _this.previewDivTopBottom);\n _this.showHidePreviewDivElements(tableBorderDialogId, compareClass, '_Preview_Div', '_Preview_Div_TopBottom', 'TopBottom');\n }\n else if (targetId === tableBorderDialogId + '_Preview_Div_LeftDiagonal_Container'\n || targetId === tableBorderDialogId + '_Preview_Div_LeftDiagonal'\n || targetId === tableBorderDialogId + '_previewDivLeftDiagonalTransParent') {\n _this.handlePreviewCheckBoxShowHide(tableBorderDialogId, compareClass, _this.previewDivLeftDiagonal);\n // tslint:disable-next-line:max-line-length\n _this.showHidePreviewDivElements(tableBorderDialogId, compareClass, '_Preview_Div_Left_Diagonal', '_Preview_Div_LeftDiagonal', 'LeftDiagonal');\n }\n else if (targetId === tableBorderDialogId + '_Preview_Div_BottomLeft_Container' || targetId === tableBorderDialogId + '_Preview_Div_BottomLeft'\n || targetId === tableBorderDialogId + '_previewDivBottomLeftTransparent') {\n _this.handlePreviewCheckBoxShowHide(tableBorderDialogId, compareClass, _this.previewDivBottomLeft);\n _this.showHidePreviewDivElements(tableBorderDialogId, compareClass, '_Preview_Div', '_Preview_Div_BottomLeft', 'BottomLeft');\n }\n else if (targetId === tableBorderDialogId + '_Preview_Div_BottomCenter_Container'\n || targetId === tableBorderDialogId + '_Preview_Div_BottomCenter'\n || targetId === tableBorderDialogId + '_previewDivBottomcenterTransparent') {\n _this.handlePreviewCheckBoxShowHide(tableBorderDialogId, compareClass, _this.previewDivBottomcenter);\n // tslint:disable-next-line:max-line-length\n _this.showHidePreviewDivElements(tableBorderDialogId, compareClass, '_Preview_Div_Vertical', '_Preview_Div_BottomCenter', 'BottomCenter');\n }\n else if (targetId === tableBorderDialogId + '_Preview_Div_BottomRight_Container' || targetId === tableBorderDialogId + '_Preview_Div_BottomRight'\n || targetId === tableBorderDialogId + '_previewDivBottomRightTransparent') {\n _this.handlePreviewCheckBoxShowHide(tableBorderDialogId, compareClass, _this.previewDivBottomRight);\n _this.showHidePreviewDivElements(tableBorderDialogId, compareClass, '_Preview_Div', '_Preview_Div_BottomRight', 'BottomRight');\n }\n else if (targetId === tableBorderDialogId + '_Preview_Div_RightDiagonal_Container'\n || targetId === tableBorderDialogId + '_Preview_Div_RightDiagonal'\n || targetId === tableBorderDialogId + '_previewDivDiagonalRightTransparent') {\n _this.handlePreviewCheckBoxShowHide(tableBorderDialogId, compareClass, _this.previewDivDiagonalRight);\n // tslint:disable-next-line:max-line-length\n _this.showHidePreviewDivElements(tableBorderDialogId, compareClass, '_Preview_Div_Right_Diagonal', '_Preview_Div_RightDiagonal', 'RightDiagonal');\n }\n };\n this.applyTableCellPreviewBoxes = function () {\n _this.customDiv.click();\n if (!isNullOrUndefined(_this.ulelementShading)) {\n if (_this.ulelementShading.index === 0) {\n _this.previewDivBottomcenterContainer.style.display = 'none';\n _this.previewDivTopCenterContainer.style.display = 'none';\n _this.previewVerticalDiv.style.display = 'none';\n _this.previewHorizontalDiv.style.display = 'none';\n _this.previewDivLeftDiagonal.style.display = '';\n _this.previewDivDiagonalRight.style.display = '';\n _this.previewDivBottomRightContainer.style.left = '80px';\n }\n else {\n _this.previewDivLeftDiagonal.style.display = 'none';\n _this.previewDivDiagonalRight.style.display = 'none';\n _this.previewDivBottomcenterContainer.style.display = '';\n _this.previewDivTopCenterContainer.style.display = '';\n _this.previewVerticalDiv.style.display = '';\n _this.previewHorizontalDiv.style.display = '';\n _this.previewDivBottomRightContainer.style.left = '110px';\n }\n }\n };\n this.applyPreviewTableBackgroundColor = function (args) {\n if (!isNullOrUndefined(args.currentValue)) {\n var color = args.currentValue.hex;\n _this.previewDiv.style.backgroundColor = color;\n }\n };\n this.applyPreviewTableBorderColor = function (args) {\n if (!isNullOrUndefined(args.currentValue)) {\n var color = args.currentValue.hex;\n _this.previewDiv.style.borderColor = color;\n _this.previewRightDiagonalDiv.style.backgroundColor = color;\n _this.previewLeftDiagonalDiv.style.backgroundColor = color;\n _this.previewVerticalDiv.style.backgroundColor = color;\n _this.previewHorizontalDiv.style.backgroundColor = color;\n }\n };\n this.owner = viewer;\n }\n BordersAndShadingDialog.prototype.getModuleName = function () {\n return 'BordersAndShadingDialog';\n };\n /**\n * @private\n */\n // tslint:disable-next-line:max-func-body-length\n BordersAndShadingDialog.prototype.initBordersAndShadingsDialog = function (localeValue) {\n var instance = this;\n this.target = createElement('div', {\n id: instance.owner.owner.containerId + '_table_border_shadings',\n className: 'e-de-table-border-shading-dlg'\n });\n this.owner.owner.element.appendChild(this.target);\n var displayText = createElement('div', {\n innerHTML: localeValue.getConstant('Borders'), styles: 'position: absolute;top: 65px;',\n id: this.target.id + '_border_label', className: 'e-de-table-border-heading'\n });\n var settingsContiner = createElement('div', {\n styles: 'display: inline-block;position: absolute;top: 105px;width: 100px;height: 235px;border-style: none;',\n id: this.target.id + '_border_settings'\n });\n var styleContainer = createElement('div', {\n // tslint:disable-next-line:max-line-length\n styles: 'display: inline-block;position: absolute;left: 125px;top: 125px;width: 150px;height: 235px;padding-left: 40px;border-style: none;padding-right: 40px;',\n id: this.target.id + '_border_style'\n });\n var previewContiner = createElement('div', {\n // tslint:disable-next-line:max-line-length\n styles: 'display: inline-block;position: absolute;left: 345px;top: 87px;width: 180px;height: 235px;padding: 0px;border-style: none;',\n id: this.target.id + '_border_preview'\n });\n var styleText = createElement('div', {\n innerHTML: localeValue.getConstant('Style'), styles: 'width: 100%;padding-bottom: 10px;',\n className: 'e-de-table-element-subheading'\n });\n var dropDownList = createElement('select', {\n id: this.target.id + '_border_style_dropDown'\n });\n dropDownList.innerHTML = '';\n var widthText = createElement('div', {\n innerHTML: localeValue.getConstant('Width'), styles: 'width:100%;padding-top: 20px;padding-bottom: 10px;',\n className: 'e-de-table-element-subheading'\n });\n var widthNumeric = createElement('input', {\n id: this.target.id + '_width'\n });\n var colorText = createElement('div', {\n innerHTML: localeValue.getConstant('Color'), styles: 'padding-top: 25px;',\n className: 'e-de-table-setting-heading'\n });\n var borderColorPickerElement = createElement('input', {\n attrs: { 'type': 'color' },\n id: this.target.id + '_border_color',\n styles: 'width: 30px;position: absolute;left: 90px;',\n className: 'e-dlg-clr-pkr-top'\n });\n var settingText = createElement('div', {\n innerHTML: localeValue.getConstant('Setting'), styles: 'width: 100%;position: absolute;',\n className: 'e-de-table-setting-heading'\n });\n var noneDivContainer = createElement('div', {\n id: this.target.id + '_None_Div_Container', className: 'e-de-table-border-none'\n });\n this.noneDiv = createElement('div', {\n id: this.target.id + '_None_Div',\n className: 'e-de-table-border-inside-setting e-de-table-border-setting-genral'\n });\n var noneDivLabel = createElement('label', {\n innerHTML: localeValue.getConstant('None'), className: 'e-de-table-setting-labels-heading',\n styles: 'padding-left: 10px;top: 20px;position: absolute;',\n id: this.target.id + '_None_Div_Label'\n });\n var boxDivContainer = createElement('div', {\n id: this.target.id + '_Box_Div_Container', className: 'e-de-table-border-box'\n });\n this.boxDiv = createElement('div', {\n id: this.target.id + '_Box_Div',\n className: 'e-de-table-border-inside-setting e-de-table-border-setting-genral'\n });\n var boxDivLabel = createElement('label', {\n innerHTML: localeValue.getConstant('Box'), className: 'e-de-table-setting-labels-heading',\n styles: 'padding-left: 10px;top: 20px;position: absolute;',\n id: this.target.id + '_Box_Div_Label'\n });\n var allDivContainer = createElement('div', {\n id: this.target.id + '_All_Div_Container', className: 'e-de-table-border-all'\n });\n this.allDiv = createElement('div', {\n id: this.target.id + '_All_Div',\n className: 'e-de-table-border-inside-setting e-de-table-border-setting-genral'\n });\n var allDivLabel = createElement('label', {\n innerHTML: localeValue.getConstant('All'), className: 'e-de-table-setting-labels-heading',\n styles: 'padding-left: 10px;top: 25px;position: absolute;',\n id: this.target.id + '_All_Div_Label'\n });\n var customDivContainer = createElement('div', {\n id: this.target.id + '_Custom_Div_Container', className: 'e-de-table-border-custom'\n });\n this.customDiv = createElement('div', {\n id: this.target.id + '_Custom_Div',\n className: 'e-de-table-border-inside-setting e-de-table-border-setting-genral'\n });\n var customDivLabel = createElement('label', {\n innerHTML: localeValue.getConstant('Custom'), className: 'e-de-table-setting-labels-heading',\n styles: 'padding-left: 10px;top: 25px;position: absolute;',\n id: this.target.id + '_Custom_Div_Label'\n });\n this.noneDivTransparent = createElement('div', {\n id: this.target.id + '_None_Div_Transparent', className: 'e-icons e-de-table-border-setting e-de-table-border-none-setting'\n });\n this.boxDivTransparent = createElement('div', {\n id: this.target.id + '_Box_Div_Transparent', className: 'e-icons e-de-table-border-setting e-de-table-border-box-setting'\n });\n this.allDivTransparent = createElement('div', {\n id: this.target.id + '_All_Div_Transparent', className: 'e-icons e-de-table-border-setting e-de-table-border-all-setting'\n });\n this.customDivTransparent = createElement('div', {\n id: this.target.id + '_Custom_Div_Transparent', className: 'e-icons e-de-table-border-setting e-de-table-border-custom-setting'\n });\n var previewText = createElement('div', {\n innerHTML: localeValue.getConstant('Preview'), className: 'e-de-table-setting-heading',\n styles: 'position: absolute;top: 20px;left: 10px;'\n });\n this.previewDiv = createElement('div', {\n styles: 'width: 80px;height: 80px;position: absolute; left: 50px;top: 50px;',\n id: this.target.id + '_Preview_Div', className: 'e-de-border-dlg-preview-div'\n });\n this.previewRightDiagonalDiv = createElement('div', {\n styles: 'position: absolute;width:1px;height:113px;left: 90px;top: 34px;transform: rotate(135deg);',\n id: this.target.id + '_Preview_Div_Right_Diagonal',\n className: 'e-de-border-dlg-preview-inside-divs'\n });\n this.previewLeftDiagonalDiv = createElement('div', {\n styles: 'position: absolute;width: 1px;height: 113px;left: 90px;top: 34px;transform:rotate(45deg);',\n id: this.target.id + '_Preview_Div_Left_Diagonal',\n className: 'e-de-border-dlg-preview-inside-divs'\n });\n this.previewVerticalDiv = createElement('div', {\n styles: 'width: 1px;height: 81px;position: absolute;left: 90px;top: 50px;',\n id: this.target.id + '_Preview_Div_Vertical',\n className: 'e-de-border-dlg-preview-inside-divs'\n });\n this.previewHorizontalDiv = createElement('div', {\n styles: 'width: 81px;height: 1px;position: absolute;left: 50px;top: 90px;',\n id: this.target.id + '_Preview_Div_Horizontal',\n className: 'e-de-border-dlg-preview-inside-divs'\n });\n this.previewDivTopTopContainer = createElement('div', {\n styles: 'top: 50px;position: absolute;left: 10px;', id: this.target.id + '_Preview_Div_TopTop_Container'\n });\n this.previewDivTopTop = createElement('div', {\n id: this.target.id + '_Preview_Div_TopTop',\n className: 'e-de-table-border-inside-preview e-de-table-border-preview-genral'\n });\n this.previewDivTopCenterContainer = createElement('div', {\n styles: 'top: 80px;position: absolute;left: 10px;', id: this.target.id + '_Preview_Div_TopCenter_Container'\n });\n this.previewDivTopCenter = createElement('div', {\n id: this.target.id + '_Preview_Div_TopCenter',\n className: 'e-de-table-border-inside-preview e-de-table-border-preview-genral'\n });\n this.previewDivTopBottomContainer = createElement('div', {\n styles: 'top: 110px;position: absolute;left: 10px;', id: this.target.id + '_Preview_Div_TopBottom_Container'\n });\n this.previewDivTopBottom = createElement('div', {\n id: this.target.id + '_Preview_Div_TopBottom',\n className: 'e-de-table-border-inside-preview e-de-table-border-preview-genral'\n });\n this.previewDivLeftDiagonalContainer = createElement('div', {\n styles: 'top: 145px;position: absolute;left: 10px;', id: this.target.id + '_Preview_Div_LeftDiagonal_Container'\n });\n this.previewDivLeftDiagonal = createElement('div', {\n id: this.target.id + '_Preview_Div_LeftDiagonal',\n className: 'e-de-table-border-inside-preview e-de-table-border-preview-genral'\n });\n this.previewDivBottomLeftContainer = createElement('div', {\n styles: 'top: 145px;position: absolute;left: 50px', id: this.target.id + '_Preview_Div_BottomLeft_Container'\n });\n this.previewDivBottomLeft = createElement('div', {\n id: this.target.id + '_Preview_Div_BottomLeft',\n className: 'e-de-table-border-inside-preview e-de-table-border-preview-genral'\n });\n this.previewDivBottomcenterContainer = createElement('div', {\n styles: 'top: 145px;position: absolute;left: 80px;', id: this.target.id + '_Preview_Div_BottomCenter_Container'\n });\n this.previewDivBottomcenter = createElement('div', {\n id: this.target.id + '_Preview_Div_BottomCenter',\n className: 'e-de-table-border-inside-preview e-de-table-border-preview-genral'\n });\n this.previewDivBottomRightContainer = createElement('div', {\n styles: 'top: 145px;position: absolute;left: 110px;', id: this.target.id + '_Preview_Div_BottomRight_Container'\n });\n this.previewDivBottomRight = createElement('div', {\n id: this.target.id + '_Preview_Div_BottomRight',\n className: 'e-de-table-border-inside-preview e-de-table-border-preview-genral'\n });\n this.previewDivDiagonalRightContainer = createElement('div', {\n styles: 'top: 145px; position: absolute; left: 110px;', id: this.target.id + '_Preview_Div_RightDiagonal_Container'\n });\n this.previewDivDiagonalRight = createElement('div', {\n id: this.target.id + '_Preview_Div_RightDiagonal',\n className: 'e-de-table-border-inside-preview e-de-table-border-preview-genral'\n });\n this.previewDivTopTopTransParent = createElement('div', {\n id: this.target.id + '_previewDivTopTopTransParent',\n className: 'e-icons e-de-table-border-preview e-de-table-border-toptop-alignment'\n });\n this.previewDivTopCenterTransParent = createElement('div', {\n id: this.target.id + '_previewDivTopCenterTransParent',\n className: 'e-icons e-de-table-border-preview e-de-table-border-topcenter-alignment'\n });\n this.previewDivTopBottomTransParent = createElement('div', {\n id: this.target.id + '_previewDivTopBottomTransParent',\n className: 'e-icons e-de-table-border-preview e-de-table-border-topbottom-alignment'\n });\n this.previewDivLeftDiagonalTransParent = createElement('div', {\n id: this.target.id + '_previewDivLeftDiagonalTransParent',\n className: 'e-icons e-de-table-border-preview e-de-table-border-diagionalup-alignment'\n });\n this.previewDivBottomLeftTransparent = createElement('div', {\n id: this.target.id + '_previewDivBottomLeftTransparent',\n className: 'e-icons e-de-table-border-preview e-de-table-border-bottomleft-alignment'\n });\n this.previewDivBottomcenterTransparent = createElement('div', {\n id: this.target.id + '_previewDivBottomcenterTransparent',\n className: 'e-icons e-de-table-border-preview e-de-table-border-bottomcenter-alignment'\n });\n this.previewDivBottomRightTransparent = createElement('div', {\n id: this.target.id + '_previewDivBottomRightTransparent',\n className: 'e-icons e-de-table-border-preview e-de-table-border-bottomright-alignment'\n });\n this.previewDivDiagonalRightTransparent = createElement('div', {\n id: this.target.id + '_previewDivDiagonalRightTransparent',\n className: 'e-icons e-de-table-border-preview e-de-table-border-diagionaldown-alignment'\n });\n this.shadingContiner = createElement('div', {\n /* tslint:disable:max-line-length */\n styles: 'display:inline-block;position:absolute;left:17px;width:400px;height:100px;padding:0px;border-style: none;margin-left:10px;',\n id: this.target.id + '_shading_preview', className: 'e-de-table-shading-preview'\n });\n var shadingText = createElement('div', {\n innerHTML: localeValue.getConstant('Shading'), className: 'e-de-table-border-heading',\n styles: 'padding-top: 30px;left: 5px;'\n });\n var shadings = createElement('div', { styles: 'display:flex;' });\n var label = createElement('div', {\n innerHTML: localeValue.getConstant('Fill'), className: 'e-de-table-setting-heading e-de-table-border-fill',\n styles: 'top: 50px;left: 10px;'\n });\n var shadingColorPickerElement = createElement('input', {\n attrs: { 'type': 'color' },\n id: this.target.id + '_shading_color', styles: 'position: absolute;top: 75px;left: 40px;width: 30px;'\n });\n var shdApply = createElement('div', {\n styles: 'position:absolute;top:41px;left:150px;width:180px;'\n });\n var div = createElement('div', {\n styles: 'width:100px;padding-bottom: 10px;', innerHTML: localeValue.getConstant('Apply To'),\n className: 'e-de-table-element-subheading'\n });\n var divsion = createElement('div', { styles: 'width:100px;position:absolute;' });\n var ulelementShading = createElement('select', {\n innerHTML: ''\n + '',\n id: this.target.id + '_shading'\n });\n divsion.appendChild(ulelementShading);\n this.noneDiv.appendChild(this.noneDivTransparent);\n this.boxDiv.appendChild(this.boxDivTransparent);\n this.allDiv.appendChild(this.allDivTransparent);\n this.customDiv.appendChild(this.customDivTransparent);\n noneDivContainer.appendChild(this.noneDiv);\n noneDivContainer.appendChild(noneDivLabel);\n boxDivContainer.appendChild(this.boxDiv);\n boxDivContainer.appendChild(boxDivLabel);\n allDivContainer.appendChild(this.allDiv);\n allDivContainer.appendChild(allDivLabel);\n customDivContainer.appendChild(this.customDiv);\n customDivContainer.appendChild(customDivLabel);\n settingsContiner.appendChild(settingText);\n settingsContiner.appendChild(noneDivContainer);\n settingsContiner.appendChild(boxDivContainer);\n settingsContiner.appendChild(allDivContainer);\n settingsContiner.appendChild(customDivContainer);\n this.previewDivBottomcenter.appendChild(this.previewDivBottomcenterTransparent);\n this.previewDivBottomRight.appendChild(this.previewDivBottomRightTransparent);\n this.previewDivBottomLeft.appendChild(this.previewDivBottomLeftTransparent);\n this.previewDivTopTop.appendChild(this.previewDivTopTopTransParent);\n this.previewDivTopCenter.appendChild(this.previewDivTopCenterTransParent);\n this.previewDivTopBottom.appendChild(this.previewDivTopBottomTransParent);\n this.previewDivDiagonalRight.appendChild(this.previewDivDiagonalRightTransparent);\n this.previewDivLeftDiagonal.appendChild(this.previewDivLeftDiagonalTransParent);\n this.previewDivBottomcenterContainer.appendChild(this.previewDivBottomcenter);\n this.previewDivBottomLeftContainer.appendChild(this.previewDivBottomLeft);\n this.previewDivBottomRightContainer.appendChild(this.previewDivBottomRight);\n this.previewDivDiagonalRightContainer.appendChild(this.previewDivDiagonalRight);\n this.previewDivLeftDiagonalContainer.appendChild(this.previewDivLeftDiagonal);\n this.previewDivTopBottomContainer.appendChild(this.previewDivTopBottom);\n this.previewDivTopCenterContainer.appendChild(this.previewDivTopCenter);\n this.previewDivTopTopContainer.appendChild(this.previewDivTopTop);\n previewContiner.appendChild(previewText);\n previewContiner.appendChild(this.previewDiv);\n previewContiner.appendChild(this.previewRightDiagonalDiv);\n previewContiner.appendChild(this.previewHorizontalDiv);\n previewContiner.appendChild(this.previewLeftDiagonalDiv);\n previewContiner.appendChild(this.previewVerticalDiv);\n previewContiner.appendChild(this.previewDivBottomcenterContainer);\n previewContiner.appendChild(this.previewDivBottomLeftContainer);\n previewContiner.appendChild(this.previewDivBottomRightContainer);\n previewContiner.appendChild(this.previewDivDiagonalRightContainer);\n previewContiner.appendChild(this.previewDivLeftDiagonalContainer);\n previewContiner.appendChild(this.previewDivTopBottomContainer);\n previewContiner.appendChild(this.previewDivTopCenterContainer);\n previewContiner.appendChild(this.previewDivTopTopContainer);\n shdApply.appendChild(div);\n shdApply.appendChild(divsion);\n shadings.appendChild(label);\n shadings.appendChild(shadingColorPickerElement);\n shadings.appendChild(shdApply);\n this.shadingContiner.appendChild(shadingText);\n this.shadingContiner.appendChild(shadings);\n styleContainer.appendChild(styleText);\n styleContainer.appendChild(dropDownList);\n styleContainer.appendChild(widthText);\n styleContainer.appendChild(widthNumeric);\n styleContainer.appendChild(colorText);\n styleContainer.appendChild(borderColorPickerElement);\n this.target.appendChild(displayText);\n this.target.appendChild(settingsContiner);\n this.target.appendChild(styleContainer);\n this.target.appendChild(previewContiner);\n this.target.appendChild(this.shadingContiner);\n // Handling Setting Container\n noneDivContainer.addEventListener('click', this.handleSettingCheckBoxAction);\n boxDivContainer.addEventListener('click', this.handleSettingCheckBoxAction);\n allDivContainer.addEventListener('click', this.handleSettingCheckBoxAction);\n customDivContainer.addEventListener('click', this.handleSettingCheckBoxAction);\n // Handling Preview Div Container\n this.previewDivBottomcenterContainer.addEventListener('click', this.handlePreviewCheckBoxAction);\n this.previewDivBottomLeftContainer.addEventListener('click', this.handlePreviewCheckBoxAction);\n this.previewDivBottomRightContainer.addEventListener('click', this.handlePreviewCheckBoxAction);\n this.previewDivTopTopContainer.addEventListener('click', this.handlePreviewCheckBoxAction);\n this.previewDivTopBottomContainer.addEventListener('click', this.handlePreviewCheckBoxAction);\n this.previewDivTopCenterContainer.addEventListener('click', this.handlePreviewCheckBoxAction);\n this.previewDivDiagonalRightContainer.addEventListener('click', this.handlePreviewCheckBoxAction);\n this.previewDivLeftDiagonalContainer.addEventListener('click', this.handlePreviewCheckBoxAction);\n // handling dropdown change\n this.borderWidth = new NumericTextBox({\n value: 0, min: 0, max: 6, decimals: 2,\n width: 150, enablePersistence: false\n });\n this.borderWidth.appendTo(widthNumeric);\n this.borderStyle = new DropDownList({\n width: '150px', popupHeight: '150px', index: 1\n });\n this.borderStyle.appendTo(dropDownList);\n this.ulelementShading = new DropDownList({\n width: '150px', change: this.applyTableCellPreviewBoxes, index: 1\n });\n this.ulelementShading.appendTo(ulelementShading);\n this.borderColorPicker = new ColorPicker({\n value: '#000000', change: this.applyPreviewTableBorderColor\n });\n this.borderColorPicker.appendTo(borderColorPickerElement);\n this.shadingColorPicker = new ColorPicker({\n value: '#000000', change: this.applyPreviewTableBackgroundColor\n });\n this.shadingColorPicker.appendTo(shadingColorPickerElement);\n };\n BordersAndShadingDialog.prototype.applyFormat = function () {\n var selection = this.owner.selection;\n var editorModule = this.owner.owner.editorModule;\n editorModule.initComplexHistory('BordersAndShading');\n editorModule.isBordersAndShadingDialog = true;\n if (this.applyTo === 0) {\n editorModule.onCellFormat(this.cellFormat);\n }\n else {\n editorModule.onTableFormat(this.tableFormat);\n }\n if (!isNullOrUndefined(this.owner.owner.editorHistory.currentHistoryInfo)) {\n this.owner.owner.editorHistory.updateComplexHistory();\n }\n editorModule.isBordersAndShadingDialog = false;\n };\n BordersAndShadingDialog.prototype.getBorder = function () {\n var border = new WBorder();\n border.color = this.borderColorPicker.value;\n border.lineStyle = this.borderStyle.text;\n border.lineWidth = this.borderWidth.value;\n return border;\n };\n BordersAndShadingDialog.prototype.checkClassName = function (element) {\n return element.classList.contains('e-de-table-border-inside-preview-click');\n };\n /**\n * @private\n */\n BordersAndShadingDialog.prototype.show = function () {\n var localeValue = new L10n('documenteditor', this.owner.owner.defaultLocale);\n localeValue.setLocale(this.owner.owner.locale);\n setCulture(this.owner.owner.locale);\n if (!this.target) {\n this.initBordersAndShadingsDialog(localeValue);\n }\n this.loadBordersShadingsPropertiesDialog();\n this.owner.dialog.content = this.target;\n this.owner.dialog.header = localeValue.getConstant('Borders and Shading');\n this.owner.dialog.beforeOpen = this.owner.updateFocus;\n this.owner.dialog.close = this.closeBordersShadingsDialog;\n this.owner.dialog.position = { X: 'center', Y: 'top' };\n this.owner.dialog.width = 'auto';\n this.owner.dialog.height = 'auto';\n this.owner.dialog.buttons = [{\n click: this.applyBordersShadingsProperties,\n buttonModel: { content: localeValue.getConstant('Ok'), cssClass: 'e-flat e-table-border-shading-okay', isPrimary: true }\n },\n {\n click: this.closeDialog,\n buttonModel: { content: localeValue.getConstant('Cancel'), cssClass: 'e-flat e-table-border-shading-cancel' }\n }];\n this.owner.dialog.dataBind();\n this.owner.dialog.show();\n };\n BordersAndShadingDialog.prototype.updateClassForSettingDivElements = function () {\n var settingDivs = this.target.getElementsByClassName('e-de-table-border-inside-setting');\n for (var j = 0; j < settingDivs.length; j++) {\n if (settingDivs[j].className.indexOf('e-de-table-border-inside-setting-click') !== -1) {\n var tempClassName = settingDivs[j].className;\n tempClassName = tempClassName.replace('e-de-table-border-inside-setting-click', '');\n settingDivs[j].className = tempClassName;\n }\n }\n };\n BordersAndShadingDialog.prototype.setSettingPreviewDivElement = function (position) {\n switch (position) {\n case 'none':\n this.previewDivTopTop.classList.remove('e-de-table-border-inside-preview-click');\n this.previewDivTopCenter.classList.remove('e-de-table-border-inside-preview-click');\n this.previewDivTopBottom.classList.remove('e-de-table-border-inside-preview-click');\n this.previewDivLeftDiagonal.classList.remove('e-de-table-border-inside-preview-click');\n this.previewDivDiagonalRight.classList.remove('e-de-table-border-inside-preview-click');\n this.previewDivBottomRight.classList.remove('e-de-table-border-inside-preview-click');\n this.previewDivBottomLeft.classList.remove('e-de-table-border-inside-preview-click');\n this.previewDivBottomcenter.classList.remove('e-de-table-border-inside-preview-click');\n this.isShowHidePreviewTableElements('none');\n break;\n case 'box':\n this.previewDivTopCenter.classList.remove('e-de-table-border-inside-preview-click');\n this.previewDivLeftDiagonal.classList.remove('e-de-table-border-inside-preview-click');\n this.previewDivDiagonalRight.classList.remove('e-de-table-border-inside-preview-click');\n this.previewDivBottomcenter.classList.remove('e-de-table-border-inside-preview-click');\n this.previewDivTopTop.classList.add('e-de-table-border-inside-preview-click');\n this.previewDivTopBottom.classList.add('e-de-table-border-inside-preview-click');\n this.previewDivBottomRight.classList.add('e-de-table-border-inside-preview-click');\n this.previewDivBottomLeft.classList.add('e-de-table-border-inside-preview-click');\n this.isShowHidePreviewTableElements('box');\n break;\n case 'all':\n this.previewDivLeftDiagonal.classList.remove('e-de-table-border-inside-preview-click');\n this.previewDivDiagonalRight.classList.remove('e-de-table-border-inside-preview-click');\n this.previewDivBottomcenter.classList.add('e-de-table-border-inside-preview-click');\n this.previewDivTopTop.classList.add('e-de-table-border-inside-preview-click');\n this.previewDivTopBottom.classList.add('e-de-table-border-inside-preview-click');\n this.previewDivBottomRight.classList.add('e-de-table-border-inside-preview-click');\n this.previewDivBottomLeft.classList.add('e-de-table-border-inside-preview-click');\n this.previewDivTopCenter.classList.add('e-de-table-border-inside-preview-click');\n this.isShowHidePreviewTableElements('all');\n break;\n }\n };\n BordersAndShadingDialog.prototype.isShowHidePreviewTableElements = function (settingDiv) {\n switch (settingDiv) {\n case 'none':\n this.previewDiv.style.border = 'none';\n this.previewRightDiagonalDiv.style.display = 'none';\n this.previewLeftDiagonalDiv.style.display = 'none';\n this.previewHorizontalDiv.style.display = 'none';\n this.previewVerticalDiv.style.display = 'none';\n break;\n case 'box':\n this.previewDiv.style.border = '1px solid rgba(0, 0, 0, .54)';\n this.previewRightDiagonalDiv.style.display = 'none';\n this.previewLeftDiagonalDiv.style.display = 'none';\n this.previewHorizontalDiv.style.display = 'none';\n this.previewVerticalDiv.style.display = 'none';\n break;\n case 'all':\n this.previewDiv.style.border = '1px solid rgba(0, 0, 0, .54)';\n this.previewRightDiagonalDiv.style.display = 'none';\n this.previewLeftDiagonalDiv.style.display = 'none';\n this.previewHorizontalDiv.style.display = 'block';\n this.previewVerticalDiv.style.display = 'block';\n break;\n }\n };\n BordersAndShadingDialog.prototype.handlePreviewCheckBoxShowHide = function (tableBorderDialogId, compareClass, element) {\n if (element.classList.contains(compareClass)) {\n element.classList.remove(compareClass);\n }\n else {\n element.classList.add(compareClass);\n }\n };\n // tslint:disable-next-line:max-line-length\n BordersAndShadingDialog.prototype.showHidePreviewDivElements = function (tableBorderDialogId, compareClass, elementClass, compareElementClass, position) {\n var setElement = document.getElementById(tableBorderDialogId + elementClass);\n var compareElement = document.getElementById(tableBorderDialogId + compareElementClass);\n if (position === 'TopTop') {\n this.setPropertyPreviewDivElement(setElement, compareElement, compareClass, 'border-top');\n }\n else if (position === 'TopCenter') {\n this.setPropertyPreviewDivElement(setElement, compareElement, compareClass, 'display');\n }\n else if (position === 'TopBottom') {\n this.setPropertyPreviewDivElement(setElement, compareElement, compareClass, 'border-bottom');\n }\n else if (position === 'LeftDiagonal') {\n this.setPropertyPreviewDivElement(setElement, compareElement, compareClass, 'display');\n }\n else if (position === 'BottomLeft') {\n this.setPropertyPreviewDivElement(setElement, compareElement, compareClass, 'border-left');\n }\n else if (position === 'BottomCenter') {\n this.setPropertyPreviewDivElement(setElement, compareElement, compareClass, 'display');\n }\n else if (position === 'BottomRight') {\n this.setPropertyPreviewDivElement(setElement, compareElement, compareClass, 'border-right');\n }\n else if (position === 'RightDiagonal') {\n this.setPropertyPreviewDivElement(setElement, compareElement, compareClass, 'display');\n }\n };\n BordersAndShadingDialog.prototype.setPropertyPreviewDivElement = function (ele, compareElement, compareClass, property) {\n if (compareElement.classList.contains(compareClass) && property.split('-')[0] === 'border') {\n /* tslint:disable:no-any */\n ele.style[property] = '1px solid rgba(0, 0, 0, .54)';\n }\n else if (compareElement.classList.contains(compareClass) && property === 'display') {\n ele.style[property] = 'block';\n }\n else {\n ele.style[property] = 'none';\n /* tslint:enable:no-any */\n }\n };\n BordersAndShadingDialog.prototype.loadBordersShadingsPropertiesDialog = function () {\n var tableFormat = this.owner.selection.tableFormat.table.tableFormat;\n var lineStyle;\n var borderColor;\n var fillColor;\n var borderWidth;\n if (!isNullOrUndefined(tableFormat) && !isNullOrUndefined(tableFormat.borders)) {\n if (isNullOrUndefined(tableFormat.borders) || isNullOrUndefined(tableFormat.borders.top)) {\n lineStyle = 1;\n borderColor = '#000000';\n borderWidth = 0;\n fillColor = '#000000';\n }\n else {\n lineStyle = this.getLineStyle(tableFormat.borders.top.lineStyle);\n borderColor = tableFormat.borders.top.color;\n borderWidth = tableFormat.borders.top.getLineWidth();\n fillColor = tableFormat.shading.backgroundColor;\n }\n }\n if (!this.customDiv.classList.contains('e-de-table-border-inside-setting-click')) {\n this.customDiv.classList.add('e-de-table-border-inside-setting-click');\n this.noneDiv.classList.remove('e-de-table-border-inside-setting-click');\n this.boxDiv.classList.remove('e-de-table-border-inside-setting-click');\n this.allDiv.classList.remove('e-de-table-border-inside-setting-click');\n }\n this.setSettingPreviewDivElement('all');\n this.borderColorPicker.value = borderColor;\n this.shadingColorPicker.value = fillColor;\n /* tslint:disable:no-any */\n var colorPickerEvent = {\n target: this.borderColorPicker, ctrlKey: false,\n shiftKey: false, which: 0\n };\n var fillColorEvent = {\n target: this.shadingColorPicker, ctrlKey: false,\n shiftKey: false, which: 0\n };\n /* tslint:enable:no-any */\n this.applyPreviewTableBackgroundColor(fillColorEvent);\n this.applyPreviewTableBorderColor(colorPickerEvent);\n this.ulelementShading.index = 1;\n this.previewDivLeftDiagonal.style.display = 'none';\n this.previewDivDiagonalRight.style.display = 'none';\n this.borderWidth.value = borderWidth;\n this.borderStyle.index = lineStyle;\n };\n BordersAndShadingDialog.prototype.getLineStyle = function (lineStyle) {\n switch (lineStyle) {\n case 'Single': return 1;\n case 'Dot': return 2;\n case 'DashSmallGap': return 3;\n case 'DashLargeGap': return 4;\n case 'DashDot': return 5;\n case 'DashDotDot': return 6;\n case 'Double': return 7;\n case 'Triple': return 8;\n case 'ThinThickSmallGap': return 9;\n case 'ThickThinSmallGap': return 10;\n case 'ThinThickThinSmallGap': return 11;\n case 'ThinThickMediumGap': return 12;\n case 'ThickThinMediumGap': return 13;\n case 'ThinThickThinMediumGap': return 14;\n case 'ThinThickLargeGap': return 15;\n case 'ThickThinLargeGap': return 16;\n case 'ThinThickThinLargeGap': return 17;\n case 'SingleWavy': return 18;\n case 'DoubleWavy': return 19;\n case 'DashDotStroked': return 20;\n case 'Emboss3D': return 21;\n case 'Engrave3D': return 22;\n case 'Outset': return 23;\n case 'Inset': return 24;\n case 'Thick': return 25;\n }\n return 0;\n };\n /**\n * @private\n */\n BordersAndShadingDialog.prototype.destroy = function () {\n if (!isNullOrUndefined(this.target)) {\n if (this.target.parentElement) {\n this.target.parentElement.removeChild(this.target);\n }\n for (var k = 0; k < this.target.childNodes.length; k++) {\n this.target.removeChild(this.target.childNodes[k]);\n k--;\n }\n this.target = undefined;\n }\n if (this.cellFormat) {\n this.cellFormat.destroy();\n this.cellFormat = undefined;\n }\n if (this.tableFormat) {\n this.tableFormat.destroy();\n this.tableFormat = undefined;\n }\n this.dialog = undefined;\n this.target = undefined;\n if (!isNullOrUndefined(this.borderStyle)) {\n this.borderStyle.destroy();\n }\n this.borderStyle = undefined;\n this.borderColorPicker = undefined;\n this.noneDivTransparent = undefined;\n this.boxDivTransparent = undefined;\n this.allDivTransparent = undefined;\n this.customDivTransparent = undefined;\n this.previewDiv = undefined;\n this.previewRightDiagonalDiv = undefined;\n this.previewLeftDiagonalDiv = undefined;\n this.previewVerticalDiv = undefined;\n this.previewHorizontalDiv = undefined;\n this.previewDivTopTopContainer = undefined;\n this.previewDivTopTop = undefined;\n this.previewDivTopCenterContainer = undefined;\n this.previewDivTopCenter = undefined;\n this.previewDivTopBottomContainer = undefined;\n this.previewDivTopBottom = undefined;\n this.previewDivLeftDiagonalContainer = undefined;\n this.previewDivLeftDiagonal = undefined;\n this.previewDivBottomLeftContainer = undefined;\n this.previewDivBottomLeft = undefined;\n this.previewDivBottomcenterContainer = undefined;\n this.previewDivBottomcenter = undefined;\n this.previewDivBottomRightContainer = undefined;\n this.previewDivBottomRight = undefined;\n this.previewDivDiagonalRightContainer = undefined;\n this.previewDivDiagonalRight = undefined;\n this.previewDivTopTopTransParent = undefined;\n this.previewDivTopCenterTransParent = undefined;\n this.previewDivTopBottomTransParent = undefined;\n this.previewDivLeftDiagonalTransParent = undefined;\n this.previewDivBottomLeftTransparent = undefined;\n this.previewDivBottomcenterTransparent = undefined;\n this.previewDivBottomRightTransparent = undefined;\n this.previewDivDiagonalRightTransparent = undefined;\n this.shadingContiner = undefined;\n this.shadingColorPicker = undefined;\n this.ulelementShading = undefined;\n };\n return BordersAndShadingDialog;\n}());\nexport { BordersAndShadingDialog };\n","import { CheckBox } from '@syncfusion/ej2-buttons';\nimport { NumericTextBox } from '@syncfusion/ej2-inputs';\nimport { WTableFormat } from '../index';\nimport { isNullOrUndefined, L10n, createElement, setCulture } from '@syncfusion/ej2-base';\nimport { CellOptionsDialog } from './index';\n/**\n * The Table options dialog is used to modify default cell margins and cell spacing of selected table.\n */\nvar TableOptionsDialog = /** @class */ (function () {\n /**\n * @private\n */\n function TableOptionsDialog(viewer) {\n var _this = this;\n /**\n * @private\n */\n this.applyTableCellProperties = function () {\n var tableFormat = _this.owner.selection.tableFormat;\n if (!isNullOrUndefined(_this.bottomMarginBox.value || _this.leftMarginBox.value\n || _this.rightMarginBox.value || _this.topMarginBox.value || _this.cellSpaceTextBox.value)\n && (tableFormat.bottomMargin !== _this.bottomMarginBox.value\n || tableFormat.leftMargin !== _this.leftMarginBox.value\n || tableFormat.rightMargin !== _this.rightMarginBox.value\n || tableFormat.topMargin !== _this.topMarginBox.value\n || tableFormat.cellSpacing !== _this.cellSpaceTextBox.value)) {\n _this.owner.owner.tablePropertiesDialogModule.isTableOptionsUpdated = true;\n _this.applyTableOptions(_this.tableFormat);\n _this.owner.owner.tablePropertiesDialogModule.applyTableSubProperties();\n }\n _this.closeCellMarginsDialog();\n };\n /**\n * @private\n */\n this.closeCellMarginsDialog = function () {\n _this.owner.dialog.hide();\n _this.owner.dialog.element.style.pointerEvents = '';\n _this.owner.updateFocus();\n };\n /**\n * @private\n */\n this.changeAllowSpaceCheckBox = function () {\n if (_this.allowSpaceCheckBox.checked) {\n _this.cellSpaceTextBox.enabled = true;\n }\n else {\n _this.cellSpaceTextBox.enabled = false;\n }\n };\n /**\n * @private\n */\n this.removeEvents = function () {\n _this.owner.dialog2.element.style.pointerEvents = '';\n _this.owner.updateFocus();\n };\n this.owner = viewer;\n }\n Object.defineProperty(TableOptionsDialog.prototype, \"tableFormat\", {\n /**\n * @private\n */\n get: function () {\n if (isNullOrUndefined(this.tableFormatIn)) {\n return this.tableFormatIn = new WTableFormat();\n }\n return this.tableFormatIn;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @private\n */\n TableOptionsDialog.prototype.getModuleName = function () {\n return 'TableOptionsDialog';\n };\n /**\n * @private\n */\n TableOptionsDialog.prototype.initTableOptionsDialog = function (localValue) {\n var instance = this.owner;\n this.target = createElement('div', {\n id: this.owner.owner.containerId + '_insertCellMarginsDialog', className: 'e-de-table-options-dlg'\n });\n this.owner.owner.element.appendChild(this.target);\n var innerDiv = createElement('div', { styles: 'width: 475px;position: relative;height: 180px;' });\n var innerDivLabel = createElement('Label', {\n id: this.target.id + '_innerDivLabel', className: 'e-de-cell-dia-options-label',\n innerHTML: localValue.getConstant('Default Cell Margins')\n });\n innerDiv.appendChild(innerDivLabel);\n CellOptionsDialog.getCellMarginDialogElements(this, innerDiv, localValue);\n var div = createElement('div', { styles: 'width: 475px; position: relative;' });\n var cellSpaceLabel = createElement('Label', {\n className: 'e-de-cell-dia-options-label',\n id: this.target.id + '_cellSpaceLabel'\n });\n cellSpaceLabel.innerHTML = localValue.getConstant('Default Cell Spacing');\n div.appendChild(cellSpaceLabel);\n var table2 = createElement('TABLE', {\n styles: 'height: 30px;padding-bottom: 15px;'\n });\n var tr3 = createElement('tr');\n var td5 = createElement('td');\n var allowSpaceCheckBox = createElement('input', {\n attrs: { 'type': 'checkbox' }, id: this.target.id + '_cellcheck'\n });\n var td6 = createElement('td', { styles: 'padding-left: 15px;', });\n this.cellspacingTextBox = createElement('input', {\n attrs: { 'type': 'text' }, id: this.target.id + '_cellspacing'\n });\n td5.appendChild(allowSpaceCheckBox);\n td6.appendChild(this.cellspacingTextBox);\n tr3.appendChild(td5);\n tr3.appendChild(td6);\n table2.appendChild(tr3);\n div.appendChild(table2);\n var divBtn = document.createElement('div');\n this.target.appendChild(div);\n this.target.appendChild(divBtn);\n this.cellSpaceTextBox = new NumericTextBox({\n value: 0, min: 0, max: 264.5, width: 150,\n decimals: 2, enablePersistence: false\n });\n this.cellSpaceTextBox.appendTo(this.cellspacingTextBox);\n this.allowSpaceCheckBox = new CheckBox({\n label: localValue.getConstant('Allow Spacing Between Cells'),\n change: this.changeAllowSpaceCheckBox,\n cssClass: 'e-de-tbl-margin-sub-header',\n });\n this.allowSpaceCheckBox.appendTo(allowSpaceCheckBox);\n };\n /**\n * @private\n */\n TableOptionsDialog.prototype.loadCellMarginsDialog = function () {\n var tableFormat = this.owner.selection.tableFormat;\n this.cellSpaceTextBox.value = tableFormat.cellSpacing;\n this.bottomMarginBox.value = tableFormat.bottomMargin;\n this.topMarginBox.value = tableFormat.topMargin;\n this.rightMarginBox.value = tableFormat.rightMargin;\n this.leftMarginBox.value = tableFormat.leftMargin;\n if (tableFormat.cellSpacing > 0) {\n this.allowSpaceCheckBox.checked = true;\n this.cellSpaceTextBox.enabled = true;\n }\n else {\n this.allowSpaceCheckBox.checked = false;\n this.cellSpaceTextBox.enabled = false;\n }\n };\n /**\n * @private\n */\n TableOptionsDialog.prototype.applySubTableOptions = function (tableFormat) {\n this.owner.owner.editorHistory.initComplexHistory(this.owner.selection, 'TableMarginsSelection');\n this.applyTableOptionsHistory(tableFormat);\n if (!isNullOrUndefined(this.owner.owner.editorHistory.currentHistoryInfo)) {\n this.owner.owner.editorHistory.updateComplexHistory();\n }\n };\n /**\n * @private\n */\n TableOptionsDialog.prototype.applyTableOptionsHelper = function (tableFormat) {\n this.applySubTableOptionsHelper(tableFormat);\n };\n /**\n * @private\n */\n TableOptionsDialog.prototype.applyTableOptionsHistory = function (tableFormat) {\n this.owner.owner.editorModule.initHistory('TableOptions');\n this.applySubTableOptionsHelper(tableFormat);\n };\n /**\n * @private\n */\n TableOptionsDialog.prototype.applySubTableOptionsHelper = function (tableFormat) {\n var ownerTable = this.owner.selection.start.currentWidget.paragraph.associatedCell.ownerTable;\n ownerTable = ownerTable.combineWidget(this.owner);\n var currentTableFormat = ownerTable.tableFormat;\n if (!isNullOrUndefined(this.owner.owner.editorHistory.currentBaseHistoryInfo)) {\n this.owner.owner.editorHistory.currentBaseHistoryInfo.addModifiedTableOptions(currentTableFormat);\n }\n currentTableFormat.cellSpacing = tableFormat.cellSpacing;\n currentTableFormat.leftMargin = tableFormat.leftMargin;\n currentTableFormat.topMargin = tableFormat.topMargin;\n currentTableFormat.rightMargin = tableFormat.rightMargin;\n currentTableFormat.bottomMargin = tableFormat.bottomMargin;\n this.owner.owner.tablePropertiesDialogModule.calculateGridValue(ownerTable);\n };\n /**\n * @private\n */\n TableOptionsDialog.prototype.applyTableOptions = function (tableFormat) {\n tableFormat.leftMargin = this.leftMarginBox.value;\n tableFormat.topMargin = this.topMarginBox.value;\n tableFormat.bottomMargin = this.bottomMarginBox.value;\n tableFormat.rightMargin = this.rightMarginBox.value;\n if (this.allowSpaceCheckBox.checked) {\n tableFormat.cellSpacing = this.cellSpaceTextBox.value;\n }\n };\n /**\n * @private\n */\n TableOptionsDialog.prototype.show = function () {\n var documentLocale = new L10n('documenteditor', this.owner.owner.defaultLocale);\n documentLocale.setLocale(this.owner.owner.locale);\n setCulture(this.owner.owner.locale);\n if (!this.target) {\n this.initTableOptionsDialog(documentLocale);\n }\n this.loadCellMarginsDialog();\n this.owner.dialog.header = documentLocale.getConstant('Table Options');\n this.owner.dialog.content = this.target;\n this.owner.dialog.beforeOpen = undefined;\n this.owner.dialog.position = { X: 'center', Y: 'top' };\n // this.owner.dialog.cssClass = 'e-de-table-margin-size';\n this.owner.dialog.height = 'auto';\n this.owner.dialog.width = 'auto';\n this.owner.dialog.open = undefined;\n this.owner.dialog.beforeOpen = this.owner.updateFocus;\n this.owner.dialog.close = this.removeEvents;\n this.owner.dialog.buttons = [{\n click: this.applyTableCellProperties,\n buttonModel: { content: documentLocale.getConstant('Ok'), cssClass: 'e-flat e-table-cell-okay', isPrimary: true }\n },\n {\n click: this.closeCellMarginsDialog,\n buttonModel: { content: documentLocale.getConstant('Cancel'), cssClass: 'e-flat e-table-cell-cancel' }\n }];\n this.owner.dialog.dataBind();\n this.owner.dialog.show();\n };\n /**\n * @private\n */\n TableOptionsDialog.prototype.destroy = function () {\n if (!isNullOrUndefined(this.target)) {\n if (this.target.parentElement) {\n this.target.parentElement.removeChild(this.target);\n }\n for (var p = 0; p < this.target.childNodes.length; p++) {\n this.target.removeChild(this.target.childNodes[p]);\n p--;\n }\n this.target = undefined;\n }\n this.dialog = undefined;\n this.target = undefined;\n this.owner = undefined;\n this.cellspacingTextBox = undefined;\n this.allowSpaceCheckBox = undefined;\n };\n return TableOptionsDialog;\n}());\nexport { TableOptionsDialog };\n","import { CheckBox } from '@syncfusion/ej2-buttons';\nimport { NumericTextBox } from '@syncfusion/ej2-inputs';\nimport { WCellFormat } from '../index';\nimport { isNullOrUndefined, L10n, createElement, setCulture } from '@syncfusion/ej2-base';\n/**\n * The Cell options dialog is used to modify margins of selected cells.\n */\nvar CellOptionsDialog = /** @class */ (function () {\n /**\n * @private\n */\n function CellOptionsDialog(viewer) {\n var _this = this;\n /**\n * @private\n */\n this.removeEvents = function () {\n _this.owner.dialog2.element.style.pointerEvents = '';\n _this.owner.updateFocus();\n };\n /**\n * @private\n */\n this.changeSameAsTable = function () {\n if (_this.sameAsTableCheckBox.checked) {\n _this.leftMarginBox.enabled = false;\n _this.rightMarginBox.enabled = false;\n _this.bottomMarginBox.enabled = false;\n _this.topMarginBox.enabled = false;\n }\n else {\n _this.leftMarginBox.enabled = true;\n _this.rightMarginBox.enabled = true;\n _this.bottomMarginBox.enabled = true;\n _this.topMarginBox.enabled = true;\n }\n };\n /**\n * @private\n */\n this.applyTableCellProperties = function () {\n var cellFormat = _this.owner.selection.cellFormat;\n if (!isNullOrUndefined(_this.bottomMarginBox.value || _this.leftMarginBox.value\n || _this.rightMarginBox.value || _this.topMarginBox.value) &&\n (cellFormat.bottomMargin !== _this.bottomMarginBox.value || cellFormat.leftMargin !== _this.leftMarginBox.value\n || cellFormat.rightMargin !== _this.rightMarginBox.value || cellFormat.topMargin !== _this.topMarginBox.value)) {\n _this.owner.owner.tablePropertiesDialogModule.isCellOptionsUpdated = true;\n _this.applyTableOptions(_this.cellFormat);\n _this.owner.owner.tablePropertiesDialogModule.applyTableSubProperties();\n }\n _this.closeCellMarginsDialog();\n };\n /**\n * @private\n */\n this.closeCellMarginsDialog = function () {\n _this.owner.dialog.hide();\n _this.owner.dialog.element.style.pointerEvents = '';\n };\n this.owner = viewer;\n }\n Object.defineProperty(CellOptionsDialog.prototype, \"cellFormat\", {\n /**\n * @private\n */\n get: function () {\n if (isNullOrUndefined(this.cellFormatIn)) {\n return this.cellFormatIn = new WCellFormat();\n }\n return this.cellFormatIn;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @private\n */\n CellOptionsDialog.prototype.getModuleName = function () {\n return 'CellOptionsDialog';\n };\n /**\n * @private\n */\n CellOptionsDialog.prototype.initCellMarginsDialog = function (localValue) {\n var instance = this.owner;\n this.target = createElement('div', {\n id: this.owner.owner.containerId + '_tableCellMarginsDialog', className: 'e-de-table-cell-margin-dlg'\n });\n this.owner.owner.element.appendChild(this.target);\n var innerDiv = createElement('div', { styles: 'width: 475px;position: relative;height: 165px;' });\n var innerDivLabel = createElement('Label', {\n className: 'e-de-cell-dia-options-label', id: this.target.id + '_innerDivLabel'\n });\n innerDivLabel.innerHTML = localValue.getConstant('Cell Margins');\n innerDiv.appendChild(innerDivLabel);\n var table = createElement('TABLE', {\n styles: 'height: 40px;padding-bottom: 0px;', className: 'e-de-cell-margin-top'\n });\n var tr = createElement('tr');\n var td = createElement('td', { className: 'e-de-tbl-btn-seperator' });\n var sameAsTableCheckBox = createElement('input', {\n attrs: { 'type': 'checkbox' }, id: this.target.id + '_sameAsCheckBox'\n });\n td.appendChild(sameAsTableCheckBox);\n tr.appendChild(td);\n table.appendChild(tr);\n innerDiv.appendChild(table);\n CellOptionsDialog.getCellMarginDialogElements(this, innerDiv, localValue);\n var divBtn = document.createElement('div');\n this.target.appendChild(divBtn);\n this.sameAsTableCheckBox = new CheckBox({\n label: localValue.getConstant('Same as the whole table'),\n change: this.changeSameAsTable\n });\n this.sameAsTableCheckBox.appendTo(sameAsTableCheckBox);\n this.sameAsTableCheckBox.addEventListener('change', this.changeSameAsTable);\n };\n /**\n * @private\n */\n CellOptionsDialog.prototype.show = function () {\n var localizeValue = new L10n('documenteditor', this.owner.owner.defaultLocale);\n localizeValue.setLocale(this.owner.owner.locale);\n setCulture(this.owner.owner.locale);\n if (!this.target) {\n this.initCellMarginsDialog(localizeValue);\n }\n this.loadCellMarginsDialog();\n this.owner.dialog.header = localizeValue.getConstant('Cell Options');\n this.owner.dialog.position = { X: 'center', Y: 'top' };\n this.owner.dialog.height = 'auto';\n this.owner.dialog.width = 'auto';\n this.owner.dialog.content = this.target;\n this.owner.dialog.beforeOpen = undefined;\n this.owner.dialog.open = undefined;\n this.owner.dialog.close = this.removeEvents;\n this.owner.dialog.buttons = [{\n click: this.applyTableCellProperties,\n buttonModel: { content: localizeValue.getConstant('Ok'), cssClass: 'e-flat e-table-cell-margin-okay', isPrimary: true }\n },\n {\n click: this.closeCellMarginsDialog,\n buttonModel: { content: localizeValue.getConstant('Cancel'), cssClass: 'e-flat e-table-cell-margin-cancel' }\n }];\n this.owner.dialog.show();\n };\n /**\n * @private\n */\n CellOptionsDialog.prototype.loadCellMarginsDialog = function () {\n var cellFormat = this.owner.selection.cellFormat;\n this.sameAsTable = isNullOrUndefined(cellFormat.leftMargin || cellFormat.topMargin\n || cellFormat.rightMargin || cellFormat.bottomMargin);\n if (this.sameAsTable) {\n var tableFormat = this.owner.selection.tableFormat;\n this.loadCellProperties(tableFormat, false, true);\n }\n else {\n this.loadCellProperties(cellFormat, true, false);\n }\n };\n CellOptionsDialog.prototype.loadCellProperties = function (format, enableTextBox, enableCheckBox) {\n this.leftMarginBox.value = format.leftMargin;\n this.rightMarginBox.value = format.rightMargin;\n this.topMarginBox.value = format.topMargin;\n this.bottomMarginBox.value = format.bottomMargin;\n this.leftMarginBox.enabled = enableTextBox;\n this.rightMarginBox.enabled = enableTextBox;\n this.topMarginBox.enabled = enableTextBox;\n this.bottomMarginBox.enabled = enableTextBox;\n this.sameAsTableCheckBox.checked = enableCheckBox;\n };\n /**\n * @private\n */\n CellOptionsDialog.prototype.applySubCellOptions = function (cellFormat) {\n this.owner.owner.editorHistory.initComplexHistory(this.owner.selection, 'CellMarginsSelection');\n this.owner.owner.editorModule.initHistory('CellOptions');\n /* tslint:disable:max-line-length */\n var startTable = this.owner.selection.start.paragraph.associatedCell.ownerTable;\n startTable = startTable.combineWidget(this.owner);\n this.applyCellmarginsValue(this.owner.selection.start.paragraph.associatedCell.ownerRow.combineWidget(this.owner), this.owner.selection.start, this.owner.selection.end, cellFormat);\n this.owner.owner.editorModule.reLayout(this.owner.selection, false);\n if (!isNullOrUndefined(this.owner.owner.editorHistory.currentHistoryInfo)) {\n this.owner.owner.editorHistory.updateComplexHistory();\n }\n };\n /**\n * @private\n */\n CellOptionsDialog.prototype.applyCellmarginsValue = function (row, start, end, cellFormat) {\n this.applyCellMarginsInternal(row, cellFormat);\n if (end.paragraph.associatedCell.ownerRow === row) {\n return;\n }\n var newRow = row.nextWidget;\n if (!isNullOrUndefined(newRow)) {\n this.applyCellmarginsValue(newRow, start, end, cellFormat);\n }\n };\n CellOptionsDialog.prototype.applyCellMarginsInternal = function (row, cellFormat) {\n if (!isNullOrUndefined(this.owner.owner.editorHistory.currentBaseHistoryInfo)) {\n var currentFormat = row.childWidgets[0].cellFormat;\n /* tslint:disable:max-line-length */\n cellFormat = this.owner.owner.editorHistory.currentBaseHistoryInfo.addModifiedCellOptions(currentFormat, cellFormat, row.ownerTable);\n }\n if (!isNullOrUndefined(cellFormat)) {\n this.applyCellMarginsForCells(row, cellFormat);\n }\n };\n /**\n * @private\n */\n CellOptionsDialog.prototype.applyCellMarginsForCells = function (row, cellFormat) {\n var rowCells = row.childWidgets;\n this.iterateCells(rowCells, cellFormat);\n };\n /**\n * @private\n */\n CellOptionsDialog.prototype.iterateCells = function (cells, cellFormat) {\n for (var i = 0; i < cells.length; i++) {\n this.applySubCellMargins(cells[i].cellFormat, cellFormat);\n }\n this.owner.owner.tablePropertiesDialogModule.calculateGridValue(cells[0].ownerTable);\n };\n /**\n * @private\n */\n CellOptionsDialog.prototype.applySubCellMargins = function (sourceFormat, cellFormat) {\n sourceFormat.leftMargin = cellFormat.leftMargin;\n sourceFormat.topMargin = cellFormat.topMargin;\n sourceFormat.rightMargin = cellFormat.rightMargin;\n sourceFormat.bottomMargin = cellFormat.bottomMargin;\n };\n /**\n * @private\n */\n CellOptionsDialog.prototype.applyTableOptions = function (cellFormat) {\n if (!this.sameAsTableCheckBox.checked) {\n cellFormat.leftMargin = this.leftMarginBox.value;\n cellFormat.topMargin = this.topMarginBox.value;\n cellFormat.bottomMargin = this.bottomMarginBox.value;\n cellFormat.rightMargin = this.rightMarginBox.value;\n }\n };\n /**\n * @private\n */\n CellOptionsDialog.prototype.destroy = function () {\n if (!isNullOrUndefined(this.target)) {\n if (this.target.parentElement) {\n this.target.parentElement.removeChild(this.target);\n }\n for (var n = 0; n < this.target.childNodes.length; n++) {\n this.target.removeChild(this.target.childNodes[n]);\n n--;\n }\n this.target = undefined;\n }\n this.dialog = undefined;\n this.target = undefined;\n this.owner = undefined;\n this.sameAsTableCheckBox = undefined;\n };\n /**\n * @private\n */\n CellOptionsDialog.getCellMarginDialogElements = function (dialog, div, locale) {\n if (!isNullOrUndefined(dialog)) {\n var table = createElement('TABLE', { className: 'e-de-cell-margin-top' });\n var tr1 = createElement('tr', { styles: 'height: 50px;color:black;' });\n var td1 = createElement('td');\n var topLabel = createElement('label', {\n innerHTML: locale.getConstant('Top'), className: 'e-de-cell-dia-label-common',\n id: dialog.target.id + '_TopLabel'\n });\n var topTextBox = createElement('input', {\n attrs: { 'type': 'text' }, styles: 'width:100%', id: dialog.target.id + '_Top'\n });\n td1.appendChild(topLabel);\n td1.appendChild(topTextBox);\n var td2 = createElement('td', { className: 'e-de-tbl-btn-seperator' });\n var leftLabel = createElement('label', {\n innerHTML: locale.getConstant('Left'), className: 'e-de-cell-dia-label-common',\n id: dialog.target.id + '_leftLabel'\n });\n var leftTextBox = createElement('input', {\n attrs: { 'type': 'text' },\n styles: 'width:100%', id: dialog.target.id + '_left'\n });\n td2.appendChild(leftLabel);\n td2.appendChild(leftTextBox);\n tr1.appendChild(td1);\n tr1.appendChild(td2);\n var tr2 = createElement('tr', { styles: 'height: 50px;color:black;' });\n var td3 = createElement('td', { styles: 'width:40%;' });\n var bottomLabel = createElement('label', {\n innerHTML: locale.getConstant('Bottom'),\n className: 'e-de-cell-dia-label-common', id: dialog.target.id + '_bottomLabel'\n });\n var bottomTextBox = createElement('input', {\n attrs: { 'type': 'text' },\n styles: 'width:100%', id: dialog.target.id + '_bottom'\n });\n td3.appendChild(bottomLabel);\n td3.appendChild(bottomTextBox);\n var td4 = createElement('td', { styles: 'width:40%;' });\n var rightLabel = createElement('label', {\n innerHTML: locale.getConstant('Right'), id: dialog.target.id + '_rightLabel',\n className: 'e-de-cell-dia-label-common'\n });\n var rightTextBox = createElement('input', {\n attrs: { 'type': 'text' },\n styles: 'width:100%', id: dialog.target.id + '_right'\n });\n td4.appendChild(rightLabel);\n td4.appendChild(rightTextBox);\n tr2.appendChild(td3);\n tr2.appendChild(td4);\n table.appendChild(tr1);\n table.appendChild(tr2);\n div.appendChild(table);\n dialog.target.appendChild(div);\n dialog.topMarginBox = new NumericTextBox({\n value: 0, min: 0, max: 1584, width: 150, decimals: 2,\n enablePersistence: false\n });\n dialog.topMarginBox.appendTo(topTextBox);\n dialog.leftMarginBox = new NumericTextBox({\n value: 0, min: 0, max: 1584, width: 150,\n decimals: 2, enablePersistence: false\n });\n dialog.leftMarginBox.appendTo(leftTextBox);\n dialog.bottomMarginBox = new NumericTextBox({\n value: 0, min: 0, max: 1584, width: 150, decimals: 2,\n enablePersistence: false\n });\n dialog.bottomMarginBox.appendTo(bottomTextBox);\n dialog.rightMarginBox = new NumericTextBox({\n value: 0, min: 0, max: 1584, width: 150,\n decimals: 2, enablePersistence: false\n });\n dialog.rightMarginBox.appendTo(rightTextBox);\n }\n };\n return CellOptionsDialog;\n}());\nexport { CellOptionsDialog };\n","import { ListView } from '@syncfusion/ej2-lists';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { createElement, L10n, setCulture } from '@syncfusion/ej2-base';\n/**\n * The Styles dialog is used to create or modify styles.\n */\nvar StylesDialog = /** @class */ (function () {\n /**\n * @private\n */\n function StylesDialog(viewer) {\n var _this = this;\n this.updateStyleNames = function () {\n var collection = _this.owner.owner.viewer.styles.getStyleNames('Paragraph');\n var defaultStyleNames = ['Normal', 'Heading 1', 'Heading 2', 'Heading 3', 'Heading 4', 'Heading 5', 'Heading 6'];\n var finalList = collection.concat(defaultStyleNames).filter(function (v, i, a) { return a.indexOf(v) === i; });\n return finalList;\n };\n this.modifyStyles = function () {\n _this.owner.dialog.hide();\n _this.owner.owner.styleDialogModule.show(_this.styleName, _this.localValue.getConstant('Modify Style'));\n };\n /* tslint:disable:no-any */\n this.selectHandler = function (args) {\n _this.styleName = args.text;\n };\n this.addNewStyles = function () {\n _this.owner.dialog.hide();\n _this.owner.owner.styleDialogModule.show();\n };\n this.owner = viewer;\n }\n /**\n * @private\n */\n StylesDialog.prototype.getModuleName = function () {\n return 'StylesDialog';\n };\n /**\n * @private\n */\n StylesDialog.prototype.initStylesDialog = function (localValue, styles) {\n var instance = this;\n var id = this.owner.owner.containerId + '_insert_styles';\n this.target = createElement('div', { id: id, className: 'e-de-styles' });\n var headerValue = localValue.getConstant('Styles');\n var dlgFields = createElement('div', { innerHTML: headerValue, className: 'e-styles-dlgfields' });\n this.target.appendChild(dlgFields);\n var commonDiv = createElement('div', { className: 'e-styles-common' });\n this.target.appendChild(commonDiv);\n var searchDiv = createElement('div', { className: 'e-styles-list' });\n commonDiv.appendChild(searchDiv);\n var listviewDiv = createElement('div', { className: 'e-styles-listViewDiv', id: 'styles_listview' });\n searchDiv.appendChild(listviewDiv);\n this.listviewInstance = new ListView({\n dataSource: styles,\n cssClass: 'e-styles-listview',\n });\n this.listviewInstance.appendTo(listviewDiv);\n this.listviewInstance.addEventListener('select', this.selectHandler);\n var buttonDiv = createElement('div', { className: 'e-styles-button' });\n commonDiv.appendChild(buttonDiv);\n var newButtonDiv = createElement('div', { className: 'e-styles-addbutton' });\n buttonDiv.appendChild(newButtonDiv);\n var newButtonElement = createElement('button', { innerHTML: localValue.getConstant('New'), id: 'new' });\n newButtonDiv.appendChild(newButtonElement);\n var newbutton = new Button({ cssClass: 'e-button-custom' });\n newbutton.appendTo(newButtonElement);\n newButtonElement.addEventListener('click', this.addNewStyles);\n var modifybuttonDiv = createElement('div', { className: 'e-styles-addbutton' });\n buttonDiv.appendChild(modifybuttonDiv);\n var modifyButtonElement = createElement('button', { innerHTML: localValue.getConstant('Modify'), id: 'modify' });\n modifybuttonDiv.appendChild(modifyButtonElement);\n var addbutton = new Button({ cssClass: 'e-button-custom' });\n addbutton.appendTo(modifyButtonElement);\n modifyButtonElement.addEventListener('click', this.modifyStyles);\n };\n /**\n * @private\n */\n StylesDialog.prototype.show = function () {\n var styles = this.updateStyleNames();\n var localValue = new L10n('documenteditor', this.owner.owner.defaultLocale);\n localValue.setLocale(this.owner.owner.locale);\n setCulture(this.owner.owner.locale);\n this.localValue = localValue;\n this.initStylesDialog(localValue, styles);\n this.owner.dialog.content = this.target;\n this.owner.dialog.beforeOpen = this.owner.updateFocus;\n this.owner.dialog.close = this.owner.updateFocus;\n this.owner.dialog.header = 'Styles';\n this.owner.dialog.height = 'auto';\n this.owner.dialog.width = 'auto';\n this.owner.dialog.buttons = [{\n click: this.hideObjects.bind(this),\n buttonModel: { content: localValue.getConstant('Cancel'), cssClass: 'e-flat e-hyper-insert', isPrimary: true }\n }];\n this.owner.dialog.dataBind();\n this.owner.dialog.show();\n };\n StylesDialog.prototype.hideObjects = function () {\n this.owner.dialog.hide();\n };\n /**\n * @private\n */\n StylesDialog.prototype.destroy = function () {\n if (this.listviewInstance) {\n this.listviewInstance.destroy();\n this.listviewInstance = undefined;\n }\n };\n return StylesDialog;\n}());\nexport { StylesDialog };\n","import * as index from '@syncfusion/ej2-documenteditor';\nindex.DocumentEditor.Inject( index.Print,index.SfdtExport,index.WordExport,index.TextExport,index.Selection,index.Search,index.Editor,index.EditorHistory,index.OptionsPane,index.ContextMenu,index.ImageResizer,index.HyperlinkDialog,index.TableDialog,index.BookmarkDialog,index.TableOfContentsDialog,index.PageSetupDialog,index.ParagraphDialog,index.ListDialog,index.StyleDialog,index.StylesDialog,index.BulletsAndNumberingDialog,index.FontDialog,index.TablePropertiesDialog,index.BordersAndShadingDialog,index.TableOptionsDialog,index.CellOptionsDialog);\nexport * from '@syncfusion/ej2-documenteditor';\n","import * as index from '@syncfusion/ej2-dropdowns';\nindex.MultiSelect.Inject( index.CheckBoxSelection);\nexport * from '@syncfusion/ej2-dropdowns';\n","/**\n * Defines types of Cell\n * @hidden\n */\nexport var CellType;\n(function (CellType) {\n /** Defines CellType as Data */\n CellType[CellType[\"Data\"] = 0] = \"Data\";\n /** Defines CellType as Header */\n CellType[CellType[\"Header\"] = 1] = \"Header\";\n /** Defines CellType as Summary */\n CellType[CellType[\"Summary\"] = 2] = \"Summary\";\n /** Defines CellType as GroupSummary */\n CellType[CellType[\"GroupSummary\"] = 3] = \"GroupSummary\";\n /** Defines CellType as CaptionSummary */\n CellType[CellType[\"CaptionSummary\"] = 4] = \"CaptionSummary\";\n /** Defines CellType as Filter */\n CellType[CellType[\"Filter\"] = 5] = \"Filter\";\n /** Defines CellType as Indent */\n CellType[CellType[\"Indent\"] = 6] = \"Indent\";\n /** Defines CellType as GroupCaption */\n CellType[CellType[\"GroupCaption\"] = 7] = \"GroupCaption\";\n /** Defines CellType as GroupCaptionEmpty */\n CellType[CellType[\"GroupCaptionEmpty\"] = 8] = \"GroupCaptionEmpty\";\n /** Defines CellType as Expand */\n CellType[CellType[\"Expand\"] = 9] = \"Expand\";\n /** Defines CellType as HeaderIndent */\n CellType[CellType[\"HeaderIndent\"] = 10] = \"HeaderIndent\";\n /** Defines CellType as StackedHeader */\n CellType[CellType[\"StackedHeader\"] = 11] = \"StackedHeader\";\n /** Defines CellType as DetailHeader */\n CellType[CellType[\"DetailHeader\"] = 12] = \"DetailHeader\";\n /** Defines CellType as DetailExpand */\n CellType[CellType[\"DetailExpand\"] = 13] = \"DetailExpand\";\n /** Defines CellType as CommandColumn */\n CellType[CellType[\"CommandColumn\"] = 14] = \"CommandColumn\";\n})(CellType || (CellType = {}));\n/**\n * Defines types of Render\n * @hidden\n */\nexport var RenderType;\n(function (RenderType) {\n /** Defines RenderType as Header */\n RenderType[RenderType[\"Header\"] = 0] = \"Header\";\n /** Defines RenderType as Content */\n RenderType[RenderType[\"Content\"] = 1] = \"Content\";\n /** Defines RenderType as Summary */\n RenderType[RenderType[\"Summary\"] = 2] = \"Summary\";\n})(RenderType || (RenderType = {}));\n/**\n * Defines Predefined toolbar items.\n * @hidden\n */\nexport var ToolbarItem;\n(function (ToolbarItem) {\n ToolbarItem[ToolbarItem[\"Add\"] = 0] = \"Add\";\n ToolbarItem[ToolbarItem[\"Edit\"] = 1] = \"Edit\";\n ToolbarItem[ToolbarItem[\"Update\"] = 2] = \"Update\";\n ToolbarItem[ToolbarItem[\"Delete\"] = 3] = \"Delete\";\n ToolbarItem[ToolbarItem[\"Cancel\"] = 4] = \"Cancel\";\n ToolbarItem[ToolbarItem[\"Print\"] = 5] = \"Print\";\n ToolbarItem[ToolbarItem[\"Search\"] = 6] = \"Search\";\n ToolbarItem[ToolbarItem[\"ColumnChooser\"] = 7] = \"ColumnChooser\";\n ToolbarItem[ToolbarItem[\"PdfExport\"] = 8] = \"PdfExport\";\n ToolbarItem[ToolbarItem[\"ExcelExport\"] = 9] = \"ExcelExport\";\n ToolbarItem[ToolbarItem[\"CsvExport\"] = 10] = \"CsvExport\";\n ToolbarItem[ToolbarItem[\"WordExport\"] = 11] = \"WordExport\";\n})(ToolbarItem || (ToolbarItem = {}));\n","/**\n * CellStyle class\n */\nvar CellStyle = /** @class */ (function () {\n function CellStyle() {\n this.numFmtId = 0;\n this.backColor = 'none';\n this.fontName = 'Calibri';\n this.fontSize = 14;\n this.fontColor = '#000000';\n this.italic = false;\n this.bold = false;\n this.underline = false;\n this.wrapText = false;\n this.hAlign = 'general';\n this.vAlign = 'bottom';\n this.indent = 0;\n this.numberFormat = 'GENERAL';\n this.type = 'datetime';\n this.borders = new Borders();\n this.isGlobalStyle = false;\n }\n return CellStyle;\n}());\nexport { CellStyle };\nvar Font = /** @class */ (function () {\n function Font() {\n this.sz = 14;\n this.name = 'Calibri';\n this.u = false;\n this.b = false;\n this.i = false;\n this.color = 'FF000000';\n }\n return Font;\n}());\nexport { Font };\nvar CellXfs = /** @class */ (function () {\n function CellXfs() {\n }\n return CellXfs;\n}());\nexport { CellXfs };\nvar Alignment = /** @class */ (function () {\n function Alignment() {\n }\n return Alignment;\n}());\nexport { Alignment };\nvar CellStyleXfs = /** @class */ (function () {\n function CellStyleXfs() {\n }\n return CellStyleXfs;\n}());\nexport { CellStyleXfs };\nvar CellStyles = /** @class */ (function () {\n function CellStyles() {\n this.name = 'Normal';\n this.xfId = 0;\n }\n return CellStyles;\n}());\nexport { CellStyles };\nvar NumFmt = /** @class */ (function () {\n function NumFmt(id, code) {\n this.numFmtId = id;\n this.formatCode = code;\n }\n return NumFmt;\n}());\nexport { NumFmt };\n/**\n * Border class\n */\nvar Border = /** @class */ (function () {\n function Border(mLine, mColor) {\n this.lineStyle = mLine;\n this.color = mColor;\n }\n return Border;\n}());\nexport { Border };\n/**\n * Border class\n */\nvar Borders = /** @class */ (function () {\n function Borders() {\n this.left = new Border('none', '#FFFFFF');\n this.right = new Border('none', '#FFFFFF');\n this.top = new Border('none', '#FFFFFF');\n this.bottom = new Border('none', '#FFFFFF');\n this.all = new Border('none', '#FFFFFF');\n }\n return Borders;\n}());\nexport { Borders };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * Worksheet class\n */\nvar Cell = /** @class */ (function () {\n function Cell() {\n }\n return Cell;\n}());\nexport { Cell };\n/**\n * Rows class\n */\nvar Cells = /** @class */ (function (_super) {\n __extends(Cells, _super);\n function Cells() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.add = function (cell) {\n var inserted = false;\n var count = 0;\n for (var _i = 0, _a = _this; _i < _a.length; _i++) {\n var c = _a[_i];\n if (c.index === cell.index) {\n _this[count] = cell;\n inserted = true;\n }\n count++;\n }\n if (!inserted) {\n _this.push(cell);\n }\n };\n return _this;\n }\n return Cells;\n}(Array));\nexport { Cells };\n","/**\n * Column class\n */\nvar Column = /** @class */ (function () {\n function Column() {\n }\n return Column;\n}());\nexport { Column };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * Worksheet class\n */\nvar Row = /** @class */ (function () {\n function Row() {\n }\n return Row;\n}());\nexport { Row };\n/**\n * Rows class\n */\nvar Rows = /** @class */ (function (_super) {\n __extends(Rows, _super);\n function Rows() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.add = function (row) {\n var inserted = false;\n var count = 0;\n for (var _i = 0, _a = _this; _i < _a.length; _i++) {\n var r = _a[_i];\n if (r.index === row.index) {\n _this[count] = row;\n inserted = true;\n }\n count++;\n }\n if (!inserted) {\n _this.push(row);\n }\n };\n return _this;\n }\n return Rows;\n}(Array));\nexport { Rows };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * Worksheets class\n */\nvar Worksheets = /** @class */ (function (_super) {\n __extends(Worksheets, _super);\n function Worksheets() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n return Worksheets;\n}(Array));\nexport { Worksheets };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * Worksheet class\n */\nvar Worksheet = /** @class */ (function () {\n function Worksheet() {\n this.isSummaryRowBelow = true;\n }\n return Worksheet;\n}());\nexport { Worksheet };\nvar HyperLink = /** @class */ (function () {\n function HyperLink() {\n }\n return HyperLink;\n}());\nexport { HyperLink };\nvar Grouping = /** @class */ (function () {\n function Grouping() {\n }\n return Grouping;\n}());\nexport { Grouping };\nvar FreezePane = /** @class */ (function () {\n function FreezePane() {\n }\n return FreezePane;\n}());\nexport { FreezePane };\nvar MergeCell = /** @class */ (function () {\n function MergeCell() {\n }\n return MergeCell;\n}());\nexport { MergeCell };\n/**\n * MergeCells class\n */\nvar MergeCells = /** @class */ (function (_super) {\n __extends(MergeCells, _super);\n function MergeCells() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.add = function (mergeCell) {\n var inserted = false;\n var count = 0;\n for (var _i = 0, _a = _this; _i < _a.length; _i++) {\n var mCell = _a[_i];\n if (MergeCells.isIntersecting(mCell, mergeCell)) {\n var intersectingCell = new MergeCell();\n intersectingCell.x = Math.min(mCell.x, mergeCell.x);\n intersectingCell.y = Math.min(mCell.Y, mergeCell.y);\n intersectingCell.width = Math.max(mCell.Width + mCell.X, mergeCell.width + mergeCell.x);\n intersectingCell.height = Math.max(mCell.Height + mCell.Y, mergeCell.height + mergeCell.y);\n intersectingCell.ref = (_this[count].ref.split(':')[0]) + ':' + (mergeCell.ref.split(':')[1]);\n _this[count] = intersectingCell;\n mergeCell = intersectingCell;\n inserted = true;\n }\n count++;\n }\n if (!inserted) {\n _this.push(mergeCell);\n }\n return mergeCell;\n };\n return _this;\n }\n MergeCells.isIntersecting = function (base, compare) {\n return (base.x <= compare.x + compare.width)\n && (compare.x <= base.x + base.width)\n && (base.y <= compare.y + compare.height)\n && (compare.y <= base.y + base.height);\n };\n return MergeCells;\n}(Array));\nexport { MergeCells };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Internationalization } from '@syncfusion/ej2-base';\n// import { IValueFormatter } from '../base/interface';\n/**\n * ValueFormatter class to globalize the value.\n * @hidden\n */\nvar ValueFormatter = /** @class */ (function () {\n function ValueFormatter(cultureName) {\n this.intl = new Internationalization();\n // if (!isNullOrUndefined(cultureName)) {\n // this.intl.culture = cultureName;\n // }\n }\n ValueFormatter.prototype.getFormatFunction = function (format) {\n if (format.type) {\n return this.intl.getDateFormat(format);\n }\n else {\n return this.intl.getNumberFormat(format);\n }\n };\n // public getParserFunction(format: NumberFormatOptions | DateFormatOptions): Function {\n // if ((format).type) {\n // return this.intl.getDateParser(format);\n // } else {\n // return this.intl.getNumberParser(format);\n // }\n // }\n // public fromView(value: string, format: Function, type?: string): string | number | Date {\n // if (type === 'date' || type === 'datetime' || type === 'number') {\n // return format(value);\n // } else {\n // return value;\n // }\n // }\n ValueFormatter.prototype.toView = function (value, format) {\n var result = value;\n if (!isNullOrUndefined(format) && !isNullOrUndefined(value)) {\n result = format(value);\n }\n return result;\n };\n // public setCulture(cultureName: string): void {\n // if (!isNullOrUndefined(cultureName)) {\n // setCulture(cultureName);\n // }\n // }\n /* tslint:disable:no-any */\n ValueFormatter.prototype.displayText = function (value, format) {\n return this.toView(value, this.getFormatFunction(format));\n };\n return ValueFormatter;\n}());\nexport { ValueFormatter };\n","import { ValueFormatter } from './value-formatter';\n/**\n * CsvHelper class\n */\nvar CsvHelper = /** @class */ (function () {\n /* tslint:disable:no-any */\n function CsvHelper(json) {\n this.csvStr = '';\n this.formatter = new ValueFormatter();\n this.isMicrosoftBrowser = !(!navigator.msSaveBlob);\n if (json.styles !== null && json.styles !== undefined) {\n this.globalStyles = new Map();\n for (var i = 0; i < json.styles.length; i++) {\n if (json.styles[i].name !== undefined && json.styles[i].numberFormat !== undefined) {\n this.globalStyles.set(json.styles[i].name, json.styles[i].numberFormat);\n }\n }\n }\n // Parses Worksheets data to DOM. \n if (json.worksheets !== null && json.worksheets !== undefined) {\n this.parseWorksheet(json.worksheets[0]);\n }\n //this.csvStr = 'a1,a2,a3\\nb1,b2,b3';\n }\n CsvHelper.prototype.parseWorksheet = function (json) {\n //Rows\n if (json.rows !== null && json.rows !== undefined) {\n this.parseRows(json.rows);\n }\n };\n /* tslint:disable:no-any */\n CsvHelper.prototype.parseRows = function (rows) {\n var count = 1;\n for (var _i = 0, rows_1 = rows; _i < rows_1.length; _i++) {\n var row = rows_1[_i];\n //Row index\n if (row.index !== null && row.index !== undefined) {\n while (count < row.index) {\n this.csvStr += '\\n';\n count++;\n }\n this.parseRow(row);\n }\n else {\n throw Error('Row index is missing.');\n }\n }\n };\n /* tslint:disable:no-any */\n CsvHelper.prototype.parseRow = function (row) {\n if (row.cells !== null && row.cells !== undefined) {\n var count = 1;\n for (var _i = 0, _a = row.cells; _i < _a.length; _i++) {\n var cell = _a[_i];\n //cell index\n if (cell.index !== null && cell.index !== undefined) {\n while (count < cell.index) {\n this.csvStr += ',';\n count++;\n }\n this.parseCell(cell);\n }\n else {\n throw Error('Cell index is missing.');\n }\n }\n }\n };\n /* tslint:disable:no-any */\n CsvHelper.prototype.parseCell = function (cell) {\n var csv = this.csvStr;\n if (cell.value !== undefined) {\n if (cell.value instanceof Date) {\n if (cell.style !== undefined && cell.style.numberFormat !== undefined) {\n /* tslint:disable-next-line:max-line-length */\n csv += this.parseCellValue(this.formatter.displayText(cell.value, { type: 'dateTime', skeleton: cell.style.numberFormat }));\n }\n else if (cell.style !== undefined && cell.style.name !== undefined && this.globalStyles.has(cell.style.name)) {\n /* tslint:disable-next-line:max-line-length */\n csv += this.parseCellValue(this.formatter.displayText(cell.value, { type: 'dateTime', skeleton: this.globalStyles.get(cell.style.name) }));\n }\n else {\n csv += cell.value;\n }\n }\n else if (typeof (cell.value) === 'boolean') {\n csv += cell.value ? 'TRUE' : 'FALSE';\n }\n else if (typeof (cell.value) === 'number') {\n if (cell.style !== undefined && cell.style.numberFormat !== undefined) {\n /* tslint:disable-next-line:max-line-length */\n csv += this.parseCellValue(this.formatter.displayText(cell.value, { format: cell.style.numberFormat }));\n }\n else if (cell.style !== undefined && cell.style.name !== undefined && this.globalStyles.has(cell.style.name)) {\n /* tslint:disable-next-line:max-line-length */\n csv += this.parseCellValue(this.formatter.displayText(cell.value, { format: this.globalStyles.get(cell.style.name) }));\n }\n else {\n csv += cell.value;\n }\n }\n else {\n csv += this.parseCellValue(cell.value);\n }\n }\n this.csvStr = csv;\n };\n CsvHelper.prototype.parseCellValue = function (value) {\n if (value.indexOf(',') !== -1) {\n return value = '\\\"' + value + '\\\"';\n }\n else {\n return value;\n }\n };\n /**\n * Saves the file with specified name and sends the file to client browser\n * @param {string} fileName- file name to save.\n * @param {Blob} buffer- the content to write in file\n */\n CsvHelper.prototype.save = function (fileName) {\n this.buffer = new Blob(['\\ufeff' + this.csvStr], { type: 'text/csv;charset=UTF-8' });\n if (this.isMicrosoftBrowser) {\n navigator.msSaveBlob(this.buffer, fileName);\n }\n else {\n var dataUrl_1 = window.URL.createObjectURL(this.buffer);\n var dwlLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');\n dwlLink.download = fileName;\n dwlLink.href = dataUrl_1;\n var event_1 = document.createEvent('MouseEvent');\n event_1.initEvent('click', true, true);\n dwlLink.dispatchEvent(event_1);\n setTimeout(function () {\n window.URL.revokeObjectURL(dataUrl_1);\n });\n }\n };\n CsvHelper.prototype.saveAsBlob = function () {\n return new Blob(['\\ufeff' + this.csvStr], { type: 'text/csv;charset=UTF-8' });\n };\n return CsvHelper;\n}());\nexport { CsvHelper };\n","/**\n * BlobHelper class\n */\nvar BlobHelper = /** @class */ (function () {\n function BlobHelper() {\n /* tslint:disable:no-any */\n this.parts = [];\n }\n /* tslint:disable:no-any */\n BlobHelper.prototype.append = function (part) {\n this.parts.push(part);\n this.blob = undefined; // Invalidate the blob\n };\n BlobHelper.prototype.getBlob = function () {\n return new Blob(this.parts, { type: 'text/plain' });\n };\n return BlobHelper;\n}());\nexport { BlobHelper };\n","import { Worksheets } from './worksheets';\nimport { Worksheet, FreezePane, MergeCell, MergeCells, HyperLink, Grouping } from './worksheet';\nimport { CellStyle, Font, Borders, CellXfs, Alignment, NumFmt, CellStyleXfs, CellStyles } from './cell-style';\nimport { Column } from './column';\nimport { Row, Rows } from './row';\nimport { Cell, Cells } from './cell';\nimport { ZipArchive, ZipArchiveItem } from '@syncfusion/ej2-compression';\nimport { CsvHelper } from './csv-helper';\nimport { Internationalization, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { BlobHelper } from './blob-helper';\n/**\n * Workbook class\n */\nvar Workbook = /** @class */ (function () {\n /* tslint:disable:no-any */\n function Workbook(json, saveType, culture, currencyString) {\n this.sharedStringCount = 0;\n this.unitsProportions = [\n 96 / 75.0,\n 96 / 300.0,\n 96,\n 96 / 25.4,\n 96 / 2.54,\n 1,\n 96 / 72.0,\n 96 / 72.0 / 12700,\n ];\n /* tslint:disable:no-any */\n this.hyperlinkStyle = { fontColor: '#0000FF', underline: true };\n if (culture !== undefined) {\n this.culture = culture;\n }\n else {\n this.culture = 'en-US';\n }\n if (currencyString !== undefined) {\n this.currency = currencyString;\n }\n else {\n this.currency = 'USD';\n }\n this.intl = new Internationalization(this.culture);\n this.mSaveType = saveType;\n if (saveType === 'xlsx') {\n this.mArchive = new ZipArchive();\n this.sharedString = [];\n this.mFonts = [];\n this.mBorders = [];\n this.mStyles = [];\n this.printTitles = new Map();\n this.cellStyles = new Map();\n this.mNumFmt = new Map();\n this.mFills = new Map();\n this.mStyles.push(new CellStyle());\n this.mFonts.push(new Font());\n /* tslint:disable */\n this.cellStyles.set('Normal', new CellStyles());\n /* tslint:enable */\n this.mCellXfs = [];\n this.mCellStyleXfs = [];\n if (json.styles !== null && json.styles !== undefined) {\n /* tslint:disable-next-line:no-any */\n this.globalStyles = new Map();\n for (var i = 0; i < json.styles.length; i++) {\n if (json.styles[i].name !== undefined) {\n if (!this.cellStyles.has(json.styles[i].name)) {\n var cellStyle = new CellStyle();\n cellStyle.isGlobalStyle = true;\n this.parserCellStyle(json.styles[i], cellStyle, 'none');\n var cellStylesIn = new CellStyles();\n cellStylesIn.name = cellStyle.name;\n cellStylesIn.xfId = (cellStyle.index - 1);\n this.cellStyles.set(cellStylesIn.name, cellStylesIn);\n /* tslint:disable-next-line:no-any */\n var tFormat = {};\n if (json.styles[i].numberFormat !== undefined) {\n tFormat.format = json.styles[i].numberFormat;\n }\n if (json.styles[i].type !== undefined) {\n tFormat.type = json.styles[i].type;\n }\n else {\n tFormat.type = 'datetime';\n }\n if (tFormat.format !== undefined) {\n this.globalStyles.set(json.styles[i].name, tFormat);\n }\n }\n else {\n throw Error('Style name ' + json.styles[i].name + ' is already existed');\n }\n }\n }\n }\n // Parses Worksheets data to DOM. \n if (json.worksheets !== null && json.worksheets !== undefined) {\n this.parserWorksheets(json.worksheets);\n }\n else {\n throw Error('Worksheet is expected.');\n }\n // Parses the BuiltInProperties data to DOM. \n if (json.builtInProperties !== null && json.builtInProperties !== undefined) {\n this.builtInProperties = new BuiltInProperties();\n this.parserBuiltInProperties(json.builtInProperties, this.builtInProperties);\n }\n }\n else {\n this.csvHelper = new CsvHelper(json);\n }\n }\n /* tslint:disable:no-any */\n Workbook.prototype.parserBuiltInProperties = function (jsonBuiltInProperties, builtInProperties) {\n //Author\n if (jsonBuiltInProperties.author !== null && jsonBuiltInProperties.author !== undefined) {\n builtInProperties.author = jsonBuiltInProperties.author;\n }\n //Comments\n if (jsonBuiltInProperties.comments !== null && jsonBuiltInProperties.comments !== undefined) {\n builtInProperties.comments = jsonBuiltInProperties.comments;\n }\n //Category\n if (jsonBuiltInProperties.category !== null && jsonBuiltInProperties.category !== undefined) {\n builtInProperties.category = jsonBuiltInProperties.category;\n }\n //Company\n if (jsonBuiltInProperties.company !== null && jsonBuiltInProperties.company !== undefined) {\n builtInProperties.company = jsonBuiltInProperties.company;\n }\n //Manager\n if (jsonBuiltInProperties.manager !== null && jsonBuiltInProperties.manager !== undefined) {\n builtInProperties.manager = jsonBuiltInProperties.manager;\n }\n //Subject\n if (jsonBuiltInProperties.subject !== null && jsonBuiltInProperties.subject !== undefined) {\n builtInProperties.subject = jsonBuiltInProperties.subject;\n }\n //Title\n if (jsonBuiltInProperties.title !== null && jsonBuiltInProperties.title !== undefined) {\n builtInProperties.title = jsonBuiltInProperties.title;\n }\n //Creation date\n if (jsonBuiltInProperties.createdDate !== null && jsonBuiltInProperties.createdDate !== undefined) {\n builtInProperties.createdDate = jsonBuiltInProperties.createdDate;\n }\n //Modified date\n if (jsonBuiltInProperties.modifiedDate !== null && jsonBuiltInProperties.modifiedDate !== undefined) {\n builtInProperties.modifiedDate = jsonBuiltInProperties.modifiedDate;\n }\n //Tags\n if (jsonBuiltInProperties.tags !== null && jsonBuiltInProperties.tags !== undefined) {\n builtInProperties.tags = jsonBuiltInProperties.tags;\n }\n //Status\n if (jsonBuiltInProperties.status !== null && jsonBuiltInProperties.status !== undefined) {\n builtInProperties.status = jsonBuiltInProperties.status;\n }\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parserWorksheets = function (json) {\n this.worksheets = new Worksheets();\n var length = json.length;\n for (var i = 0; i < length; i++) {\n var jsonSheet = json[i];\n var sheet = new Worksheet();\n this.mergeCells = new MergeCells();\n this.mergedCellsStyle = new Map();\n this.mHyperLinks = [];\n //Name\n if (jsonSheet.name !== null && jsonSheet.name !== undefined) {\n sheet.name = jsonSheet.name;\n }\n else {\n sheet.name = 'Sheet' + (i + 1).toString();\n }\n sheet.index = (i + 1);\n //Columns\n if (jsonSheet.columns !== null && jsonSheet.columns !== undefined) {\n this.parserColumns(jsonSheet.columns, sheet);\n }\n //Rows\n if (jsonSheet.rows !== null && jsonSheet.rows !== undefined) {\n this.parserRows(jsonSheet.rows, sheet);\n }\n //FreezePanes\n if (jsonSheet.freeze !== null && jsonSheet.freeze !== undefined) {\n this.parserFreezePanes(jsonSheet.freeze, sheet);\n }\n //Print Title\n if (jsonSheet.printTitle !== null && jsonSheet.printTitle !== undefined) {\n this.parserPrintTitle(jsonSheet.printTitle, sheet);\n }\n if (jsonSheet.pageSetup !== undefined) {\n if (jsonSheet.pageSetup.isSummaryRowBelow !== undefined) {\n sheet.isSummaryRowBelow = jsonSheet.pageSetup.isSummaryRowBelow;\n }\n }\n sheet.index = (i + 1);\n sheet.mergeCells = this.mergeCells;\n sheet.hyperLinks = this.mHyperLinks;\n this.worksheets.push(sheet);\n }\n };\n /* tslint:disable:no-any */\n Workbook.prototype.mergeOptions = function (fromJson, toJson) {\n /* tslint:disable:no-any */\n var result = {};\n this.applyProperties(fromJson, result);\n this.applyProperties(toJson, result);\n return result;\n };\n /* tslint:disable:no-any */\n Workbook.prototype.applyProperties = function (sourceJson, destJson) {\n var keys = Object.keys(sourceJson);\n for (var index = 0; index < keys.length; index++) {\n if (keys[index] !== 'name') {\n destJson[keys[index]] = sourceJson[keys[index]];\n }\n }\n };\n Workbook.prototype.getCellName = function (row, column) {\n return this.getColumnName(column) + row.toString();\n };\n Workbook.prototype.getColumnName = function (col) {\n col--;\n var strColumnName = '';\n do {\n var iCurrentDigit = col % 26;\n col = col / 26 - 1;\n strColumnName = String.fromCharCode(65 + iCurrentDigit) + strColumnName;\n } while (col >= 0);\n return strColumnName;\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parserPrintTitle = function (json, sheet) {\n var printTitleName = '';\n var titleRowName;\n if (json.fromRow !== null && json.fromRow !== undefined) {\n var fromRow = json.fromRow;\n var toRow = void 0;\n if (json.toRow !== null && json.toRow !== undefined) {\n toRow = json.toRow;\n }\n else {\n toRow = json.fromRow;\n }\n titleRowName = '$' + fromRow + ':$' + toRow;\n }\n var titleColName;\n if (json.fromColumn !== null && json.fromColumn !== undefined) {\n var fromColumn = json.fromColumn;\n var toColumn = void 0;\n if (json.toColumn !== null && json.toColumn !== undefined) {\n toColumn = json.toColumn;\n }\n else {\n toColumn = json.fromColumn;\n }\n titleColName = '$' + this.getColumnName(fromColumn) + ':$' + this.getColumnName(toColumn);\n }\n if (titleRowName !== undefined) {\n printTitleName += (sheet.name + '!' + titleRowName);\n }\n if (titleColName !== undefined && titleRowName !== undefined) {\n printTitleName += ',' + (sheet.name + '!' + titleColName);\n }\n else if (titleColName !== undefined) {\n printTitleName += (sheet.name + '!' + titleColName);\n }\n if (printTitleName !== '') {\n this.printTitles.set(sheet.index - 1, printTitleName);\n }\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parserFreezePanes = function (json, sheet) {\n sheet.freezePanes = new FreezePane();\n if (json.row !== null && json.row !== undefined) {\n sheet.freezePanes.row = json.row;\n }\n else {\n sheet.freezePanes.row = 0;\n }\n if (json.column !== null && json.column !== undefined) {\n sheet.freezePanes.column = json.column;\n }\n else {\n sheet.freezePanes.column = 0;\n }\n sheet.freezePanes.leftCell = this.getCellName(sheet.freezePanes.row + 1, sheet.freezePanes.column + 1);\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parserColumns = function (json, sheet) {\n var columnsLength = json.length;\n sheet.columns = [];\n for (var column = 0; column < columnsLength; column++) {\n var col = new Column();\n if (json[column].index !== null && json[column].index !== undefined) {\n col.index = json[column].index;\n }\n else {\n throw Error('Column index is missing.');\n }\n if (json[column].width !== null && json[column].width !== undefined) {\n col.width = json[column].width;\n }\n sheet.columns.push(col);\n }\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parserRows = function (json, sheet) {\n var rowsLength = json.length;\n sheet.rows = new Rows();\n var rowId = 0;\n for (var r = 0; r < rowsLength; r++) {\n var row = this.parserRow(json[r], rowId);\n rowId = row.index;\n sheet.rows.add(row);\n }\n this.insertMergedCellsStyle(sheet);\n };\n Workbook.prototype.insertMergedCellsStyle = function (sheet) {\n var _this = this;\n if (this.mergeCells.length > 0) {\n this.mergedCellsStyle.forEach(function (value, key) {\n var row = sheet.rows.filter(function (item) {\n return item.index === value.y;\n })[0];\n if (!isNullOrUndefined(row)) {\n var cell = row.cells.filter(function (item) {\n return item.index === value.x;\n })[0];\n if (!isNullOrUndefined(cell)) {\n cell.styleIndex = value.styleIndex;\n }\n else {\n var cells = row.cells.filter(function (item) {\n return item.index <= value.x;\n });\n var insertIndex = 0;\n if (cells.length > 0) {\n insertIndex = row.cells.indexOf(cells[cells.length - 1]) + 1;\n }\n row.cells.splice(insertIndex, 0, _this.createCell(value, key));\n }\n }\n else {\n var rows = sheet.rows.filter(function (item) {\n return item.index <= value.y;\n });\n var rowToInsert = new Row();\n rowToInsert.index = value.y;\n rowToInsert.cells = new Cells();\n rowToInsert.cells.add(_this.createCell(value, key));\n var insertIndex = 0;\n if (rows.length > 0) {\n insertIndex = sheet.rows.indexOf(rows[rows.length - 1]) + 1;\n }\n sheet.rows.splice(insertIndex, 0, rowToInsert);\n }\n });\n }\n };\n Workbook.prototype.createCell = function (value, key) {\n var cellToInsert = new Cell();\n cellToInsert.refName = key;\n cellToInsert.index = value.x;\n cellToInsert.cellStyle = new CellStyle();\n cellToInsert.styleIndex = value.styleIndex;\n return cellToInsert;\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parserRow = function (json, rowIndex) {\n var row = new Row();\n //Row Height\n if (json.height !== null && json.height !== undefined) {\n row.height = json.height;\n }\n //Row index\n if (json.index !== null && json.index !== undefined) {\n row.index = json.index;\n }\n else {\n throw Error('Row index is missing.');\n }\n if (json.grouping !== null && json.grouping !== undefined) {\n this.parseGrouping(json.grouping, row);\n }\n this.parseCells(json.cells, row);\n return row;\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parseGrouping = function (json, row) {\n row.grouping = new Grouping();\n if (json.outlineLevel !== undefined) {\n row.grouping.outlineLevel = json.outlineLevel;\n }\n if (json.isCollapsed !== undefined) {\n row.grouping.isCollapsed = json.isCollapsed;\n }\n if (json.isHidden !== undefined) {\n row.grouping.isHidden = json.isHidden;\n }\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parseCells = function (json, row) {\n row.cells = new Cells();\n var cellsLength = json !== undefined ? json.length : 0;\n var spanMin = 1;\n var spanMax = 1;\n var curCellIndex = 0;\n for (var cellId = 0; cellId < cellsLength; cellId++) {\n /* tslint:disable:no-any */\n var jsonCell = json[cellId];\n var cell = new Cell();\n //cell index\n if (jsonCell.index !== null && jsonCell.index !== undefined) {\n cell.index = jsonCell.index;\n }\n else {\n throw Error('Cell index is missing.');\n }\n if (cell.index < spanMin) {\n spanMin = cell.index;\n }\n else if (cell.index > spanMax) {\n spanMax = cell.index;\n }\n //Update the Cell name\n cell.refName = this.getCellName(row.index, cell.index);\n //Row span\n if (jsonCell.rowSpan !== null && jsonCell.rowSpan !== undefined) {\n cell.rowSpan = jsonCell.rowSpan - 1;\n }\n else {\n cell.rowSpan = 0;\n }\n //Column span\n if (jsonCell.colSpan !== null && jsonCell.colSpan !== undefined) {\n cell.colSpan = jsonCell.colSpan - 1;\n }\n else {\n cell.colSpan = 0;\n }\n //Hyperlink\n if (jsonCell.hyperlink !== null && jsonCell.hyperlink !== undefined) {\n var hyperLink = new HyperLink();\n if (jsonCell.hyperlink.target !== undefined) {\n hyperLink.target = jsonCell.hyperlink.target;\n if (jsonCell.hyperlink.displayText !== undefined) {\n cell.value = jsonCell.hyperlink.displayText;\n }\n else {\n cell.value = jsonCell.hyperlink.target;\n }\n cell.type = this.getCellValueType(cell.value);\n hyperLink.ref = cell.refName;\n hyperLink.rId = (this.mHyperLinks.length + 1);\n this.mHyperLinks.push(hyperLink);\n cell.cellStyle = new CellStyle();\n /* tslint:disable-next-line:max-line-length */\n this.parserCellStyle((jsonCell.style !== undefined ? this.mergeOptions(jsonCell.style, this.hyperlinkStyle) : this.hyperlinkStyle), cell.cellStyle, 'string');\n cell.styleIndex = cell.cellStyle.index;\n }\n }\n //Cell value\n if (jsonCell.value !== null && jsonCell.value !== undefined) {\n cell.value = jsonCell.value;\n cell.type = this.getCellValueType(cell.value);\n }\n if (jsonCell.style !== null && jsonCell.style !== undefined && cell.styleIndex === undefined) {\n cell.cellStyle = new CellStyle();\n if (cell.value instanceof Date) {\n this.parserCellStyle(jsonCell.style, cell.cellStyle, cell.type, 14);\n }\n else {\n this.parserCellStyle(jsonCell.style, cell.cellStyle, cell.type);\n }\n cell.styleIndex = cell.cellStyle.index;\n }\n else if (cell.value instanceof Date) {\n cell.cellStyle = new CellStyle();\n this.parserCellStyle({}, cell.cellStyle, cell.type, 14);\n cell.styleIndex = cell.cellStyle.index;\n }\n this.parseCellType(cell);\n this.mergeCells = this.processMergeCells(cell, row.index, this.mergeCells);\n row.cells.add(cell);\n curCellIndex = (cell.index + 1);\n }\n row.spans = (spanMin) + ':' + (spanMax);\n };\n Workbook.prototype.applyGlobalStyle = function (json, cellStyle) {\n var index = 0;\n if (this.cellStyles.has(json.name)) {\n cellStyle.index = this.mStyles.filter(function (a) { return (a.name === json.name); })[0].index;\n cellStyle.name = json.name;\n }\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parserCellStyle = function (json, cellStyle, cellType, defStyleIndex) {\n //name\n if (json.name !== null && json.name !== undefined) {\n if (cellStyle.isGlobalStyle) {\n cellStyle.name = json.name;\n }\n else {\n this.applyGlobalStyle(json, cellStyle);\n return;\n }\n }\n //background color\n if (json.backColor !== null && json.backColor !== undefined) {\n cellStyle.backColor = json.backColor;\n }\n //borders\n //leftBorder\n cellStyle.borders = new Borders();\n //AllBorder\n if (json.borders !== null && json.borders !== undefined) {\n this.parserBorder(json.borders, cellStyle.borders.all);\n }\n //leftborder\n if (json.leftBorder !== null && json.leftBorder !== undefined) {\n this.parserBorder(json.leftBorder, cellStyle.borders.left);\n }\n //rightBorder\n if (json.rightBorder !== null && json.rightBorder !== undefined) {\n this.parserBorder(json.rightBorder, cellStyle.borders.right);\n }\n //topBorder\n if (json.topBorder !== null && json.topBorder !== undefined) {\n this.parserBorder(json.topBorder, cellStyle.borders.top);\n }\n //bottomBorder\n if (json.bottomBorder !== null && json.bottomBorder !== undefined) {\n this.parserBorder(json.bottomBorder, cellStyle.borders.bottom);\n }\n //fontName\n if (json.fontName !== null && json.fontName !== undefined) {\n cellStyle.fontName = json.fontName;\n }\n //fontSize\n if (json.fontSize !== null && json.fontSize !== undefined) {\n cellStyle.fontSize = json.fontSize;\n }\n //fontColor\n if (json.fontColor !== null && json.fontColor !== undefined) {\n cellStyle.fontColor = json.fontColor;\n }\n //italic\n if (json.italic !== null && json.italic !== undefined) {\n cellStyle.italic = json.italic;\n }\n //bold\n if (json.bold !== null && json.bold !== undefined) {\n cellStyle.bold = json.bold;\n }\n //hAlign\n if (json.hAlign !== null && json.hAlign !== undefined) {\n cellStyle.hAlign = json.hAlign;\n }\n //indent\n if (json.indent !== null && json.indent !== undefined) {\n cellStyle.indent = json.indent;\n if (!(cellStyle.hAlign === 'left' || cellStyle.hAlign === 'right')) {\n cellStyle.hAlign = 'left';\n }\n }\n //vAlign\n if (json.vAlign !== null && json.vAlign !== undefined) {\n cellStyle.vAlign = json.vAlign;\n }\n //underline\n if (json.underline !== null && json.underline !== undefined) {\n cellStyle.underline = json.underline;\n }\n //wrapText\n if (json.wrapText !== null && json.wrapText !== undefined) {\n cellStyle.wrapText = json.wrapText;\n }\n //numberFormat\n if (json.numberFormat !== null && json.numberFormat !== undefined) {\n if (json.type !== null && json.type !== undefined) {\n cellStyle.numberFormat = this.getNumberFormat(json.numberFormat, json.type);\n }\n else {\n cellStyle.numberFormat = this.getNumberFormat(json.numberFormat, cellType);\n }\n }\n else if (defStyleIndex !== undefined) {\n cellStyle.numFmtId = 14;\n cellStyle.numberFormat = 'GENERAL';\n }\n else {\n cellStyle.numberFormat = 'GENERAL';\n }\n cellStyle.index = this.processCellStyle(cellStyle);\n };\n Workbook.prototype.switchNumberFormat = function (numberFormat, type) {\n var format = this.getNumberFormat(numberFormat, type);\n if (format !== numberFormat) {\n var numFmt = this.mNumFmt.get(numberFormat);\n if (numFmt !== undefined) {\n numFmt.formatCode = format;\n if (this.mNumFmt.has(format)) {\n for (var _i = 0, _a = this.mCellStyleXfs; _i < _a.length; _i++) {\n var cellStyleXfs = _a[_i];\n if (cellStyleXfs.numFmtId === numFmt.numFmtId) {\n cellStyleXfs.numFmtId = this.mNumFmt.get(format).numFmtId;\n }\n }\n for (var _b = 0, _c = this.mCellXfs; _b < _c.length; _b++) {\n var cellXfs = _c[_b];\n if (cellXfs.numFmtId === numFmt.numFmtId) {\n cellXfs.numFmtId = this.mNumFmt.get(format).numFmtId;\n }\n }\n }\n }\n }\n };\n Workbook.prototype.getNumberFormat = function (numberFormat, type) {\n var returnFormat;\n switch (type) {\n case 'number':\n try {\n returnFormat = this.intl.getNumberPattern({ format: numberFormat, currency: this.currency });\n }\n catch (error) {\n returnFormat = numberFormat;\n }\n break;\n case 'datetime':\n try {\n returnFormat = this.intl.getDatePattern({ skeleton: numberFormat, type: 'dateTime' }, true);\n }\n catch (error) {\n returnFormat = numberFormat;\n }\n break;\n case 'date':\n try {\n returnFormat = this.intl.getDatePattern({ skeleton: numberFormat, type: 'date' }, true);\n }\n catch (error) {\n returnFormat = numberFormat;\n }\n break;\n case 'time':\n try {\n returnFormat = this.intl.getDatePattern({ skeleton: numberFormat, type: 'time' }, true);\n }\n catch (error) {\n returnFormat = numberFormat;\n }\n break;\n default:\n returnFormat = numberFormat;\n break;\n }\n return returnFormat;\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parserBorder = function (json, border) {\n if (json.color !== null && json.color !== undefined) {\n border.color = json.color;\n }\n else {\n border.color = '#000000';\n }\n if (json.lineStyle !== null && json.lineStyle !== undefined) {\n border.lineStyle = json.lineStyle;\n }\n else {\n border.lineStyle = 'thin';\n }\n };\n Workbook.prototype.processCellStyle = function (style) {\n if (style.isGlobalStyle) {\n this.processNumFormatId(style);\n this.mStyles.push(style);\n return this.mStyles.length;\n }\n else {\n var compareResult = this.compareStyle(style);\n if (!compareResult.result) {\n this.processNumFormatId(style);\n this.mStyles.push(style);\n return this.mStyles.length;\n }\n else {\n //Return the index of the already existing style.\n return compareResult.index;\n }\n }\n };\n Workbook.prototype.processNumFormatId = function (style) {\n if (style.numberFormat !== 'GENERAL' && !this.mNumFmt.has(style.numberFormat)) {\n var id = this.mNumFmt.size + 164;\n this.mNumFmt.set(style.numberFormat, new NumFmt(id, style.numberFormat));\n }\n };\n Workbook.prototype.isNewFont = function (toCompareStyle) {\n var result = false;\n var index = 0;\n for (var _i = 0, _a = this.mFonts; _i < _a.length; _i++) {\n var font = _a[_i];\n index++;\n var fontColor = undefined;\n if (toCompareStyle.fontColor !== undefined) {\n fontColor = ('FF' + toCompareStyle.fontColor.replace('#', ''));\n }\n result = font.color === fontColor &&\n font.b === toCompareStyle.bold &&\n font.i === toCompareStyle.italic &&\n font.u === toCompareStyle.underline &&\n font.name === toCompareStyle.fontName &&\n font.sz === toCompareStyle.fontSize;\n if (result) {\n break;\n }\n }\n index = index - 1;\n return { index: index, result: result };\n };\n Workbook.prototype.isNewBorder = function (toCompareStyle) {\n var bStyle = new CellStyle();\n if (this.isAllBorder(toCompareStyle.borders)) {\n return (bStyle.borders.all.color === toCompareStyle.borders.all.color &&\n bStyle.borders.all.lineStyle === toCompareStyle.borders.all.lineStyle);\n }\n else {\n return (bStyle.borders.left.color === toCompareStyle.borders.left.color &&\n bStyle.borders.left.lineStyle === toCompareStyle.borders.left.lineStyle &&\n bStyle.borders.right.color === toCompareStyle.borders.right.color &&\n bStyle.borders.right.lineStyle === toCompareStyle.borders.right.lineStyle &&\n bStyle.borders.top.color === toCompareStyle.borders.top.color &&\n bStyle.borders.top.lineStyle === toCompareStyle.borders.top.lineStyle &&\n bStyle.borders.bottom.color === toCompareStyle.borders.bottom.color &&\n bStyle.borders.bottom.lineStyle === toCompareStyle.borders.bottom.lineStyle);\n }\n };\n Workbook.prototype.isAllBorder = function (toCompareBorder) {\n var allBorderStyle = new CellStyle();\n return allBorderStyle.borders.all.color !== toCompareBorder.all.color &&\n allBorderStyle.borders.all.lineStyle !== toCompareBorder.all.lineStyle;\n };\n Workbook.prototype.compareStyle = function (toCompareStyle) {\n var result = true;\n var index = 0;\n var globalStyleIndex = 0;\n for (var _i = 0, _a = this.mStyles; _i < _a.length; _i++) {\n var baseStyle = _a[_i];\n result = baseStyle.isGlobalStyle ? false : (baseStyle.backColor === toCompareStyle.backColor &&\n baseStyle.bold === toCompareStyle.bold &&\n baseStyle.numFmtId === toCompareStyle.numFmtId &&\n baseStyle.numberFormat === toCompareStyle.numberFormat &&\n baseStyle.type === toCompareStyle.type &&\n baseStyle.fontColor === toCompareStyle.fontColor &&\n baseStyle.fontName === toCompareStyle.fontName &&\n baseStyle.fontSize === toCompareStyle.fontSize &&\n baseStyle.hAlign === toCompareStyle.hAlign &&\n baseStyle.italic === toCompareStyle.italic &&\n baseStyle.underline === toCompareStyle.underline &&\n baseStyle.vAlign === toCompareStyle.vAlign &&\n baseStyle.indent === toCompareStyle.indent &&\n baseStyle.wrapText === toCompareStyle.wrapText &&\n (baseStyle.borders.all.color === toCompareStyle.borders.all.color &&\n baseStyle.borders.all.lineStyle === toCompareStyle.borders.all.lineStyle) &&\n (baseStyle.borders.left.color === toCompareStyle.borders.left.color &&\n baseStyle.borders.left.lineStyle === toCompareStyle.borders.left.lineStyle &&\n baseStyle.borders.right.color === toCompareStyle.borders.right.color &&\n baseStyle.borders.right.lineStyle === toCompareStyle.borders.right.lineStyle &&\n baseStyle.borders.top.color === toCompareStyle.borders.top.color &&\n baseStyle.borders.top.lineStyle === toCompareStyle.borders.top.lineStyle &&\n baseStyle.borders.bottom.color === toCompareStyle.borders.bottom.color &&\n baseStyle.borders.bottom.lineStyle === toCompareStyle.borders.bottom.lineStyle));\n if (result) {\n index = baseStyle.index;\n break;\n }\n }\n return { index: index, result: result };\n };\n Workbook.prototype.contains = function (array, item) {\n var index = array.indexOf(item);\n return index > -1 && index < array.length;\n };\n Workbook.prototype.getCellValueType = function (value) {\n if (value instanceof Date) {\n return 'datetime';\n }\n else if (typeof (value) === 'boolean') {\n return 'boolean';\n }\n else if (typeof (value) === 'number') {\n return 'number';\n }\n else {\n return 'string';\n }\n };\n Workbook.prototype.parseCellType = function (cell) {\n var type = cell.type;\n var saveType;\n var value = cell.value;\n switch (type) {\n case 'datetime':\n value = this.toOADate(value);\n if (cell.cellStyle !== undefined && cell.cellStyle.name !== undefined) {\n if (this.globalStyles.has(cell.cellStyle.name)) {\n var value_1 = this.globalStyles.get(cell.cellStyle.name);\n this.switchNumberFormat(value_1.format, value_1.type);\n }\n }\n saveType = 'n';\n break;\n //TODO: Update the number format index and style\n case 'boolean':\n value = value ? 1 : 0;\n saveType = 'b';\n break;\n case 'number':\n saveType = 'n';\n if (cell.cellStyle !== undefined && cell.cellStyle.name !== undefined) {\n if (this.globalStyles.has(cell.cellStyle.name)) {\n this.switchNumberFormat(this.globalStyles.get(cell.cellStyle.name).format, 'number');\n }\n }\n break;\n case 'string':\n this.sharedStringCount++;\n saveType = 's';\n if (!this.contains(this.sharedString, value)) {\n this.sharedString.push(value);\n }\n value = this.sharedString.indexOf(value);\n break;\n default:\n break;\n }\n cell.saveType = saveType;\n cell.value = value;\n };\n Workbook.prototype.saveAsBlob = function (blobSaveType) {\n var _this = this;\n switch (blobSaveType) {\n case 'text/csv':\n return new Promise(function (resolve, reject) {\n var obj = {};\n obj.blobData = _this.csvHelper.saveAsBlob();\n resolve(obj);\n });\n default:\n return new Promise(function (resolve, reject) {\n _this.saveInternal();\n _this.mArchive.saveAsBlob().then(function (blob) {\n var obj = {};\n obj.blobData = new Blob([blob], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });\n resolve(obj);\n });\n });\n }\n };\n Workbook.prototype.save = function (fileName, proxyUrl) {\n var _this = this;\n if (fileName === null || fileName === undefined || fileName === '') {\n throw new Error('Argument Null Exception: fileName cannot be null or empty');\n }\n var xlsxMatch = fileName.match('.xlsx$');\n var csvMatch = fileName.match('.csv$');\n if (xlsxMatch !== null && xlsxMatch[0] === ('.' + this.mSaveType)) {\n this.saveInternal();\n this.mArchive.save(fileName).then(function () {\n _this.mArchive.destroy();\n });\n }\n else if (csvMatch !== null && csvMatch[0] === ('.' + this.mSaveType)) {\n this.csvHelper.save(fileName);\n }\n else {\n throw Error('Save type and file extension is different.');\n }\n };\n Workbook.prototype.saveInternal = function () {\n this.saveWorkbook();\n this.saveWorksheets();\n this.saveSharedString();\n this.saveStyles();\n this.saveApp(this.builtInProperties);\n this.saveCore(this.builtInProperties);\n this.saveContentType();\n this.saveTopLevelRelation();\n this.saveWorkbookRelation();\n };\n Workbook.prototype.saveWorkbook = function () {\n /* tslint:disable-next-line:max-line-length */\n var workbookTemp = '';\n var sheets = '';\n var length = this.worksheets.length;\n for (var i = 0; i < length; i++) {\n /* tslint:disable-next-line:max-line-length */\n sheets += '';\n }\n sheets += '';\n workbookTemp += sheets;\n if (this.printTitles.size > 0) {\n var printTitle_1 = '';\n this.printTitles.forEach(function (value, key) {\n printTitle_1 += '' + value + '';\n });\n printTitle_1 += '';\n workbookTemp += printTitle_1;\n }\n this.addToArchive(workbookTemp + '', 'xl/workbook.xml');\n };\n Workbook.prototype.saveWorksheets = function () {\n var length = this.worksheets.length;\n for (var i = 0; i < length; i++) {\n this.saveWorksheet(this.worksheets[i], i);\n }\n };\n Workbook.prototype.saveWorksheet = function (sheet, index) {\n var sheetBlob = new BlobHelper();\n /* tslint:disable-next-line:max-line-length */\n var sheetString = '';\n if (!sheet.isSummaryRowBelow) {\n sheetString += ('' + '' + '' + '');\n }\n else {\n sheetString += ('');\n }\n if (sheet.freezePanes !== undefined) {\n sheetString += (this.saveFreezePanes(sheet));\n }\n if (sheet.columns !== undefined) {\n var colString = '';\n for (var _i = 0, _a = sheet.columns; _i < _a.length; _i++) {\n var column = _a[_i];\n /* tslint:disable-next-line:max-line-length */\n if (column.width !== undefined) {\n colString += '';\n }\n else {\n colString += '';\n }\n }\n sheetString += (colString + '');\n }\n sheetString += ('');\n sheetBlob.append(sheetString);\n sheetString = '';\n if (sheet.rows !== undefined) {\n for (var _b = 0, _c = sheet.rows; _b < _c.length; _b++) {\n var row = _c[_b];\n var rowString = '');\n for (var _d = 0, _e = row.cells; _d < _e.length; _d++) {\n var cell = _e[_d];\n if (cell !== undefined && (cell.value !== undefined || cell.cellStyle !== undefined)) {\n rowString += ('');\n if (cell.value !== undefined) {\n rowString += ('' + cell.value + '');\n }\n else {\n rowString += ('');\n }\n }\n }\n rowString += ('
');\n sheetBlob.append(rowString);\n }\n }\n sheetString += ('');\n if (sheet.mergeCells.length > 0) {\n sheetString += ('');\n for (var _f = 0, _g = sheet.mergeCells; _f < _g.length; _f++) {\n var mCell = _g[_f];\n sheetString += ('');\n }\n sheetString += ('');\n }\n if (sheet.hyperLinks.length > 0) {\n sheetString += ('');\n for (var _h = 0, _j = sheet.hyperLinks; _h < _j.length; _h++) {\n var hLink = _j[_h];\n sheetString += ('');\n }\n sheetString += ('');\n this.addToArchive(this.saveSheetRelations(sheet), ('xl/worksheets/_rels/sheet' + sheet.index + '.xml.rels'));\n }\n /* tslint:disable-next-line:max-line-length */\n sheetString += ('');\n sheetBlob.append(sheetString);\n this.addToArchive(sheetBlob.getBlob(), 'xl/worksheets' + '/sheet' + (index + 1) + '.xml');\n };\n Workbook.prototype.pixelsToColumnWidth = function (pixels) {\n var dDigitWidth = 7;\n var val = (pixels > dDigitWidth + 5) ?\n this.trunc((pixels - 5) / dDigitWidth * 100 + 0.5) / 100 :\n pixels / (dDigitWidth + 5);\n return (val > 1) ?\n ((val * dDigitWidth + 5) / dDigitWidth * 256.0) / 256.0 :\n (val * (dDigitWidth + 5) / dDigitWidth * 256.0) / 256.0;\n };\n Workbook.prototype.trunc = function (x) {\n var n = x - x % 1;\n return n === 0 && (x < 0 || (x === 0 && (1 / x !== 1 / 0))) ? -0 : n;\n };\n Workbook.prototype.pixelsToRowHeight = function (pixels) {\n return (pixels * this.unitsProportions[5] / this.unitsProportions[6]);\n };\n Workbook.prototype.saveSheetRelations = function (sheet) {\n /* tslint:disable-next-line:max-line-length */\n var relStr = '';\n for (var _i = 0, _a = sheet.hyperLinks; _i < _a.length; _i++) {\n var hLink = _a[_i];\n /* tslint:disable-next-line:max-line-length */\n relStr += '';\n }\n relStr += '';\n return relStr;\n };\n Workbook.prototype.saveFreezePanes = function (sheet) {\n var paneString = ' 0) {\n /* tslint:disable-next-line:max-line-length */\n var sstStart = '';\n var si = '';\n for (var i = 0; i < length; i++) {\n si += '';\n si += this.processString(this.sharedString[i]);\n si += '';\n }\n si += '';\n this.addToArchive(sstStart + si, 'xl/sharedStrings.xml');\n }\n };\n Workbook.prototype.processString = function (value) {\n if (value.indexOf('&') !== -1) {\n value = value.replace(/&/g, '&');\n }\n if (value.indexOf('<') !== -1) {\n value = value.replace(/') !== -1) {\n value = value.replace(/>/g, '>');\n }\n return value;\n };\n Workbook.prototype.saveStyles = function () {\n this.updateCellXfsStyleXfs();\n /* tslint:disable-next-line:max-line-length */\n var styleTemp = '';\n styleTemp += this.saveNumberFormats();\n styleTemp += this.saveFonts();\n styleTemp += this.saveFills();\n styleTemp += this.saveBorders();\n styleTemp += this.saveCellStyleXfs();\n styleTemp += this.saveCellXfs();\n styleTemp += this.saveCellStyles();\n this.addToArchive(styleTemp + '', 'xl/styles.xml');\n };\n Workbook.prototype.updateCellXfsStyleXfs = function () {\n for (var _i = 0, _a = this.mStyles; _i < _a.length; _i++) {\n var style = _a[_i];\n var cellXfs = undefined;\n if (style.isGlobalStyle) {\n cellXfs = new CellStyleXfs();\n cellXfs.xfId = (style.index - 1);\n }\n else {\n cellXfs = new CellXfs();\n cellXfs.xfId = 0;\n }\n //Add font\n var compareFontResult = this.isNewFont(style);\n if (!compareFontResult.result) {\n var font = new Font();\n font.b = style.bold;\n font.i = style.italic;\n font.name = style.fontName;\n font.sz = style.fontSize;\n font.u = style.underline;\n font.color = ('FF' + style.fontColor.replace('#', ''));\n this.mFonts.push(font);\n cellXfs.fontId = this.mFonts.length - 1;\n }\n else {\n cellXfs.fontId = compareFontResult.index;\n }\n //Add fill\n if (style.backColor !== 'none') {\n var backColor = 'FF' + style.backColor.replace('#', '');\n if (this.mFills.has(backColor)) {\n var fillId = this.mFills.get(backColor);\n cellXfs.fillId = fillId;\n }\n else {\n var fillId = this.mFills.size + 2;\n this.mFills.set(backColor, fillId);\n cellXfs.fillId = (fillId);\n }\n }\n else {\n cellXfs.fillId = 0;\n }\n //Add border \n if (!this.isNewBorder(style)) {\n this.mBorders.push(style.borders);\n cellXfs.borderId = this.mBorders.length;\n }\n else {\n cellXfs.borderId = 0;\n }\n //Add Number Format \n if (style.numberFormat !== 'GENERAL') {\n if (this.mNumFmt.has(style.numberFormat)) {\n var numFmt = this.mNumFmt.get(style.numberFormat);\n cellXfs.numFmtId = numFmt.numFmtId;\n }\n else {\n var id = this.mNumFmt.size + 164;\n this.mNumFmt.set(style.numberFormat, new NumFmt(id, style.numberFormat));\n cellXfs.numFmtId = id;\n }\n }\n else {\n if (style.numberFormat === 'GENERAL' && style.numFmtId === 14) {\n cellXfs.numFmtId = 14;\n }\n else {\n cellXfs.numFmtId = 0;\n }\n }\n //Add alignment \n if (!style.isGlobalStyle) {\n cellXfs.applyAlignment = 1;\n }\n cellXfs.alignment = new Alignment();\n cellXfs.alignment.indent = style.indent;\n cellXfs.alignment.horizontal = style.hAlign;\n cellXfs.alignment.vertical = style.vAlign;\n cellXfs.alignment.wrapText = style.wrapText ? 1 : 0;\n if (style.isGlobalStyle) {\n this.mCellStyleXfs.push(cellXfs);\n this.mCellXfs.push(cellXfs);\n }\n else {\n //Add cellxfs\n this.mCellXfs.push(cellXfs);\n }\n }\n };\n Workbook.prototype.saveNumberFormats = function () {\n if (this.mNumFmt.size >= 1) {\n var numFmtStyle_1 = '';\n this.mNumFmt.forEach(function (value, key) {\n numFmtStyle_1 += '';\n });\n return (numFmtStyle_1 += '');\n }\n else {\n return '';\n }\n };\n Workbook.prototype.saveFonts = function () {\n /* tslint:disable-next-line:max-line-length */\n var fontStyle = '';\n if (this.mFonts.length >= 1) {\n for (var _i = 0, _a = this.mFonts; _i < _a.length; _i++) {\n var font = _a[_i];\n fontStyle += '';\n if (font.b) {\n fontStyle += '';\n }\n if (font.i) {\n fontStyle += '';\n }\n if (font.u) {\n fontStyle += '';\n }\n fontStyle += '';\n fontStyle += '';\n fontStyle += '';\n }\n }\n return fontStyle + '';\n };\n Workbook.prototype.saveFills = function () {\n /* tslint:disable-next-line:max-line-length */\n var fillsStyle = '';\n if (this.mFills.size >= 1) {\n this.mFills.forEach(function (value, key) {\n /* tslint:disable-next-line:max-line-length */\n fillsStyle += '';\n });\n }\n return fillsStyle + '';\n };\n Workbook.prototype.saveBorders = function () {\n /* tslint:disable-next-line:max-line-length */\n var bordersStyle = '';\n if (this.mBorders.length >= 1) {\n for (var _i = 0, _a = this.mBorders; _i < _a.length; _i++) {\n var borders = _a[_i];\n if (this.isAllBorder(borders)) {\n var color = borders.all.color.replace('#', '');\n var lineStyle = borders.all.lineStyle;\n /* tslint:disable-next-line:max-line-length */\n bordersStyle += '';\n }\n else {\n /* tslint:disable-next-line:max-line-length */\n bordersStyle += '';\n }\n }\n }\n return bordersStyle + '';\n };\n Workbook.prototype.saveCellStyles = function () {\n var _this = this;\n var cellStyleString = '';\n this.cellStyles.forEach(function (value, key) {\n cellStyleString += '';\n if (this.mCellStyleXfs.length >= 1) {\n for (var _i = 0, _a = this.mCellStyleXfs; _i < _a.length; _i++) {\n var cellStyleXf = _a[_i];\n /* tslint:disable-next-line:max-line-length */\n cellXfsStyle += '';\n }\n else {\n cellXfsStyle += ' />';\n }\n }\n }\n return cellXfsStyle + '';\n };\n Workbook.prototype.saveCellXfs = function () {\n /* tslint:disable-next-line:max-line-length */\n var cellXfsStyle = '';\n if (this.mCellXfs.length >= 1) {\n for (var _i = 0, _a = this.mCellXfs; _i < _a.length; _i++) {\n var cellXf = _a[_i];\n /* tslint:disable-next-line:max-line-length */\n cellXfsStyle += '';\n }\n }\n return cellXfsStyle + '';\n };\n Workbook.prototype.saveAlignment = function (cellXf) {\n var alignString = '';\n return alignString;\n };\n Workbook.prototype.saveApp = function (builtInProperties) {\n /* tslint:disable-next-line:max-line-length */\n var appString = 'Essential XlsIO';\n if (builtInProperties !== undefined) {\n if (builtInProperties.manager !== undefined) {\n appString += '' + builtInProperties.manager + '';\n }\n if (builtInProperties.company !== undefined) {\n appString += '' + builtInProperties.company + '';\n }\n }\n this.addToArchive((appString + ''), 'docProps/app.xml');\n };\n Workbook.prototype.saveCore = function (builtInProperties) {\n var createdDate = new Date();\n /* tslint:disable-next-line:max-line-length */\n var coreString = '';\n if (this.builtInProperties !== undefined) {\n if (builtInProperties.author !== undefined) {\n coreString += '' + builtInProperties.author + '';\n }\n if (builtInProperties.subject !== undefined) {\n coreString += '' + builtInProperties.subject + '';\n }\n if (builtInProperties.category !== undefined) {\n coreString += '' + builtInProperties.category + '';\n }\n if (builtInProperties.comments !== undefined) {\n coreString += '' + builtInProperties.comments + '';\n }\n if (builtInProperties.title !== undefined) {\n coreString += '' + builtInProperties.title + '';\n }\n if (builtInProperties.tags !== undefined) {\n coreString += '' + builtInProperties.tags + '';\n }\n if (builtInProperties.status !== undefined) {\n coreString += '' + builtInProperties.status + '';\n }\n if (builtInProperties.createdDate !== undefined) {\n /* tslint:disable-next-line:max-line-length */\n coreString += '' + builtInProperties.createdDate.toISOString() + '';\n }\n else {\n coreString += '' + createdDate.toISOString() + '';\n }\n if (builtInProperties.modifiedDate !== undefined) {\n /* tslint:disable-next-line:max-line-length */\n coreString += '' + builtInProperties.modifiedDate.toISOString() + '';\n }\n else {\n coreString += '' + createdDate.toISOString() + '';\n }\n }\n else {\n coreString += '' + createdDate.toISOString() + '';\n coreString += '' + createdDate.toISOString() + '';\n }\n /* tslint:disable-next-line:max-line-length */\n coreString += '';\n this.addToArchive(coreString, 'docProps/core.xml');\n };\n Workbook.prototype.saveTopLevelRelation = function () {\n /* tslint:disable-next-line:max-line-length */\n var topRelation = '';\n this.addToArchive(topRelation, '_rels/.rels');\n };\n Workbook.prototype.saveWorkbookRelation = function () {\n /* tslint:disable-next-line:max-line-length */\n var wbRelation = '';\n var length = this.worksheets.length;\n var count = 0;\n for (var i = 0; i < length; i++, count++) {\n /* tslint:disable-next-line:max-line-length */\n wbRelation += '';\n }\n /* tslint:disable-next-line:max-line-length */\n wbRelation += '';\n if (this.sharedStringCount > 0) {\n /* tslint:disable-next-line:max-line-length */\n wbRelation += '';\n }\n this.addToArchive((wbRelation + ''), 'xl/_rels/workbook.xml.rels');\n };\n Workbook.prototype.saveContentType = function () {\n /* tslint:disable-next-line:max-line-length */\n var contentTypeString = '';\n var sheetsOverride = '';\n var length = this.worksheets.length;\n for (var i = 0; i < length; i++) {\n /* tslint:disable-next-line:max-line-length */\n sheetsOverride += '';\n }\n if (this.sharedStringCount > 0) {\n /* tslint:disable-next-line:max-line-length */\n contentTypeString += '';\n }\n this.addToArchive((contentTypeString + sheetsOverride + ''), '[Content_Types].xml');\n };\n Workbook.prototype.addToArchive = function (xmlString, itemName) {\n if (typeof (xmlString) === 'string') {\n var blob = new Blob([xmlString], { type: 'text/plain' });\n var archiveItem = new ZipArchiveItem(blob, itemName);\n this.mArchive.addItem(archiveItem);\n }\n else {\n var archiveItem = new ZipArchiveItem(xmlString, itemName);\n this.mArchive.addItem(archiveItem);\n }\n };\n Workbook.prototype.processMergeCells = function (cell, rowIndex, mergeCells) {\n if (cell.rowSpan !== 0 || cell.colSpan !== 0) {\n var mCell = new MergeCell();\n mCell.x = cell.index;\n mCell.width = cell.colSpan;\n mCell.y = rowIndex;\n mCell.height = cell.rowSpan;\n var startCell = this.getCellName(mCell.y, mCell.x);\n var endCell = this.getCellName(rowIndex + mCell.height, cell.index + mCell.width);\n mCell.ref = startCell + ':' + endCell;\n var mergedCell = mergeCells.add(mCell);\n var start = { x: mCell.x, y: mCell.y };\n var end = {\n x: (cell.index + mCell.width), y: (rowIndex + mCell.height)\n };\n this.updatedMergedCellStyles(start, end, cell);\n }\n return mergeCells;\n };\n Workbook.prototype.updatedMergedCellStyles = function (sCell, eCell, cell) {\n for (var x = sCell.x; x <= eCell.x; x++) {\n for (var y = sCell.y; y <= eCell.y; y++) {\n this.mergedCellsStyle.set(this.getCellName(y, x), { x: x, y: y, styleIndex: cell.styleIndex });\n }\n }\n };\n /**\n * Returns the tick count corresponding to the given year, month, and day.\n * @param year number value of year\n * @param month number value of month\n * @param day number value of day\n */\n Workbook.prototype.dateToTicks = function (year, month, day) {\n var ticksPerDay = 10000 * 1000 * 60 * 60 * 24;\n var daysToMonth365 = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334, 365];\n var daysToMonth366 = [0, 31, 60, 91, 121, 152, 182, 213, 244, 274, 305, 335, 366];\n if (year >= 1 && year <= 9999 && month >= 1 && month <= 12) {\n var days = this.isLeapYear(year) ? daysToMonth366 : daysToMonth365;\n var y = year - 1;\n var n = y * 365 + ((y / 4) | 0) - ((y / 100) | 0) + ((y / 400) | 0) + days[month - 1] + day - 1;\n return n * ticksPerDay;\n }\n throw new Error('Not a valid date');\n };\n /**\n * Return the tick count corresponding to the given hour, minute, second.\n * @param hour number value of hour\n * @param minute number value if minute\n * @param second number value of second\n */\n Workbook.prototype.timeToTicks = function (hour, minute, second) {\n if (hour >= 0 && hour < 24 && minute >= 0 && minute < 60 && second >= 0 && second < 60) {\n var totalSeconds = hour * 3600 + minute * 60 + second;\n return totalSeconds * 10000 * 1000;\n }\n throw new Error('Not valid time');\n };\n /**\n * Checks if given year is a leap year.\n * @param year Year value.\n */\n Workbook.prototype.isLeapYear = function (year) {\n return year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);\n };\n /**\n * Converts `DateTime` to the equivalent OLE Automation date.\n */\n Workbook.prototype.toOADate = function (date) {\n var ticks = 0;\n /* tslint:disable-next-line:max-line-length */\n ticks = this.dateToTicks(date.getFullYear(), (date.getMonth() + 1), date.getDate()) + this.timeToTicks(date.getHours(), date.getMinutes(), date.getSeconds());\n if (ticks === 0) {\n return 0.0;\n }\n var ticksPerDay = 10000 * 1000 * 60 * 60 * 24;\n var daysTo1899 = (((365 * 4 + 1) * 25 - 1) * 4 + 1) * 4 + ((365 * 4 + 1) * 25 - 1) * 3 - 367;\n var doubleDateOffset = daysTo1899 * ticksPerDay;\n var oaDateMinAsTicks = (((365 * 4 + 1) * 25 - 1) - 365) * ticksPerDay;\n if (ticks < oaDateMinAsTicks) {\n throw new Error('Arg_OleAutDateInvalid');\n }\n var millisPerDay = 1000 * 60 * 60 * 24;\n return ((ticks - doubleDateOffset) / 10000) / millisPerDay;\n };\n return Workbook;\n}());\nexport { Workbook };\nvar BuiltInProperties = /** @class */ (function () {\n function BuiltInProperties() {\n }\n return BuiltInProperties;\n}());\nexport { BuiltInProperties };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Internationalization, setCulture } from '@syncfusion/ej2-base';\n/**\n * ValueFormatter class to globalize the value.\n * @hidden\n */\nvar ValueFormatter = /** @class */ (function () {\n function ValueFormatter(cultureName) {\n this.intl = new Internationalization();\n if (!isNullOrUndefined(cultureName)) {\n this.intl.culture = cultureName;\n }\n }\n ValueFormatter.prototype.getFormatFunction = function (format) {\n if (format.type) {\n return this.intl.getDateFormat(format);\n }\n else {\n return this.intl.getNumberFormat(format);\n }\n };\n ValueFormatter.prototype.getParserFunction = function (format) {\n if (format.type) {\n return this.intl.getDateParser(format);\n }\n else {\n return this.intl.getNumberParser(format);\n }\n };\n ValueFormatter.prototype.fromView = function (value, format, type) {\n if (type === 'date' || type === 'datetime' || type === 'number') {\n return format(value);\n }\n else {\n return value;\n }\n };\n ValueFormatter.prototype.toView = function (value, format) {\n var result = value;\n if (!isNullOrUndefined(format) && !isNullOrUndefined(value)) {\n result = format(value);\n }\n return result;\n };\n ValueFormatter.prototype.setCulture = function (cultureName) {\n if (!isNullOrUndefined(cultureName)) {\n setCulture(cultureName);\n }\n };\n return ValueFormatter;\n}());\nexport { ValueFormatter };\n","import { merge, isNullOrUndefined, getValue } from '@syncfusion/ej2-base';\nimport { Query, DataUtil } from '@syncfusion/ej2-data';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { getUid, templateCompiler, getForeignData } from '../base/util';\n/**\n * Represents Grid `Column` model class.\n */\nvar Column = /** @class */ (function () {\n function Column(options) {\n var _this = this;\n /**\n * If `allowSorting` set to false, then it disables sorting option of a particular column.\n * By default all columns are sortable.\n * @default true\n */\n this.allowSorting = true;\n /**\n * If `allowResizing` is set to false, it disables resize option of a particular column.\n * By default all the columns can be resized.\n * @default true\n */\n this.allowResizing = true;\n /**\n * If `allowFiltering` set to false, then it disables filtering option and filter bar element of a particular column.\n * By default all columns are filterable.\n * @default true\n */\n this.allowFiltering = true;\n /**\n * If `allowGrouping` set to false, then it disables grouping of a particular column.\n * By default all columns are groupable.\n * @default true\n */\n this.allowGrouping = true;\n /**\n * If `allowReordering` set to false, then it disables reorder of a particular column.\n * By default all columns can be reorder.\n * @default true\n */\n this.allowReordering = true;\n /**\n * If `showColumnMenu` set to false, then it disable the column menu of a particular column.\n * By default column menu will show for all columns\n * @default true\n */\n this.showColumnMenu = true;\n /**\n * If `enableGroupByFormat` set to true, then it groups the particular column by formatted values.\n * @default true\n */\n this.enableGroupByFormat = false;\n /**\n * If `allowEditing` set to false, then it disables editing of a particular column.\n * By default all columns are editable.\n * @default true\n */\n this.allowEditing = true;\n /**\n * It is used to customize the default filter options for a specific columns.\n * * type - Specifies the filter type as menu or checkbox.\n * * ui - to render custom component for specific column it has following functions.\n * * ui.create – It is used for creating custom components.\n * * ui.read - It is used for read the value from the component.\n * * ui.write - It is used to apply component model as dynamically.\n * {% codeBlock src=\"grid/filter-menu-api/index.ts\" %}{% endcodeBlock %}\n *\n * > Check the [`Filter UI`](./filtering.html#custom-component-in-filter-menu) for its customization.\n * @default null\n */\n this.filter = {};\n /**\n * If `showInColumnChooser` set to false, then hide the particular column in column chooser.\n * By default all columns are displayed in column Chooser.\n * @default true\n */\n this.showInColumnChooser = true;\n /**\n * Defines the `IEditCell` object to customize default edit cell.\n * @default {}\n */\n this.edit = {};\n this.sortDirection = 'Descending';\n merge(this, options);\n this.uid = getUid('grid-column');\n var valueFormatter = new ValueFormatter();\n if (options.format && (options.format.skeleton || options.format.format)) {\n this.setFormatter(valueFormatter.getFormatFunction(options.format));\n this.setParser(valueFormatter.getParserFunction(options.format));\n }\n if (!this.field) {\n this.allowFiltering = false;\n this.allowGrouping = false;\n this.allowSorting = false;\n }\n if (this.commands && !this.textAlign) {\n this.textAlign = 'Right';\n }\n if (this.template || this.commandsTemplate) {\n this.templateFn = templateCompiler(this.template || this.commandsTemplate);\n }\n if (this.headerTemplate) {\n this.headerTemplateFn = templateCompiler(this.headerTemplate);\n }\n if (this.filter.itemTemplate) {\n this.fltrTemplateFn = templateCompiler(this.filter.itemTemplate);\n }\n if (this.isForeignColumn() && (isNullOrUndefined(this.editType) || this.editType === 'dropdownedit')) {\n this.editType = 'dropdownedit';\n this.edit.params = {\n dataSource: this.dataSource,\n query: new Query(), fields: { value: this.foreignKeyField || this.field, text: this.foreignKeyValue }\n };\n }\n if (this.sortComparer) {\n var a_1 = this.sortComparer;\n this.sortComparer = function comparer(x, y) {\n if (this.sortDirection === 'Descending') {\n var z = x;\n x = y;\n y = z;\n }\n return a_1(x, y);\n };\n }\n if (!this.sortComparer && this.isForeignColumn()) {\n this.sortComparer = function (x, y) {\n x = getValue(_this.foreignKeyValue, getForeignData(_this, {}, x)[0]);\n y = getValue(_this.foreignKeyValue, getForeignData(_this, {}, y)[0]);\n return _this.sortDirection === 'Descending' ? DataUtil.fnDescending(x, y) : DataUtil.fnAscending(x, y);\n };\n }\n }\n /** @hidden */\n Column.prototype.getSortDirection = function () {\n return this.sortDirection;\n };\n /** @hidden */\n Column.prototype.setSortDirection = function (direction) {\n this.sortDirection = direction;\n };\n /** @hidden */\n Column.prototype.setProperties = function (column) {\n //Angular two way binding\n var keys = Object.keys(column);\n for (var i = 0; i < keys.length; i++) {\n this[keys[i]] = column[keys[i]];\n }\n };\n /**\n * @hidden\n * It defines the column is foreign key column or not.\n */\n Column.prototype.isForeignColumn = function () {\n return !!(this.dataSource && this.foreignKeyValue);\n };\n /** @hidden */\n Column.prototype.getFormatter = function () {\n return this.formatFn;\n };\n /** @hidden */\n Column.prototype.setFormatter = function (value) {\n this.formatFn = value;\n };\n /** @hidden */\n Column.prototype.getParser = function () {\n return this.parserFn;\n };\n /** @hidden */\n Column.prototype.setParser = function (value) {\n this.parserFn = value;\n };\n /** @hidden */\n Column.prototype.getColumnTemplate = function () {\n return this.templateFn;\n };\n /** @hidden */\n Column.prototype.getHeaderTemplate = function () {\n return this.headerTemplateFn;\n };\n /** @hidden */\n Column.prototype.getFilterItemTemplate = function () {\n return this.fltrTemplateFn;\n };\n /** @hidden */\n Column.prototype.getDomSetter = function () {\n return this.disableHtmlEncode ? 'textContent' : 'innerHTML';\n };\n return Column;\n}());\nexport { Column };\n","/** @hidden */\nexport var created = 'create';\n/** @hidden */\nexport var destroyed = 'destroy';\n/** @hidden */\nexport var load = 'load';\n/** @hidden */\nexport var rowDataBound = 'rowDataBound';\n/** @hidden */\nexport var queryCellInfo = 'queryCellInfo';\n/** @hidden */\nexport var headerCellInfo = 'headerCellInfo';\n/** @hidden */\nexport var actionBegin = 'actionBegin';\n/** @hidden */\nexport var actionComplete = 'actionComplete';\n/** @hidden */\nexport var actionFailure = 'actionFailure';\n/** @hidden */\nexport var dataBound = 'dataBound';\n/** @hidden */\nexport var rowSelecting = 'rowSelecting';\n/** @hidden */\nexport var rowSelected = 'rowSelected';\n/** @hidden */\nexport var rowDeselecting = 'rowDeselecting';\n/** @hidden */\nexport var rowDeselected = 'rowDeselected';\n/** @hidden */\nexport var cellSelecting = 'cellSelecting';\n/** @hidden */\nexport var cellSelected = 'cellSelected';\n/** @hidden */\nexport var cellDeselecting = 'cellDeselecting';\n/** @hidden */\nexport var cellDeselected = 'cellDeselected';\n/** @hidden */\nexport var columnDragStart = 'columnDragStart';\n/** @hidden */\nexport var columnDrag = 'columnDrag';\n/** @hidden */\nexport var columnDrop = 'columnDrop';\n/** @hidden */\nexport var rowDragStart = 'rowDragStart';\n/** @hidden */\nexport var rowDrag = 'rowDrag';\n/** @hidden */\nexport var rowDrop = 'rowDrop';\n/** @hidden */\nexport var beforePrint = 'beforePrint';\n/** @hidden */\nexport var printComplete = 'printComplete';\n/** @hidden */\nexport var detailDataBound = 'detailDataBound';\n/** @hidden */\nexport var toolbarClick = 'toolbarClick';\n/** @hidden */\nexport var batchAdd = 'batchAdd';\n/** @hidden */\nexport var batchCancel = 'batchCancel';\n/** @hidden */\nexport var batchDelete = 'batchDelete';\n/** @hidden */\nexport var beforeBatchAdd = 'beforeBatchAdd';\n/** @hidden */\nexport var beforeBatchDelete = 'beforeBatchDelete';\n/** @hidden */\nexport var beforeBatchSave = 'beforeBatchSave';\n/** @hidden */\nexport var beginEdit = 'beginEdit';\n/** @hidden */\nexport var cellEdit = 'cellEdit';\n/** @hidden */\nexport var cellSave = 'cellSave';\n/** @hidden */\nexport var endAdd = 'endAdd';\n/** @hidden */\nexport var endDelete = 'endDelete';\n/** @hidden */\nexport var endEdit = 'endEdit';\n/** @hidden */\nexport var recordDoubleClick = 'recordDoubleClick';\n/** @hidden */\nexport var recordClick = 'recordClick';\n/** @hidden */\nexport var beforeDataBound = 'beforeDataBound';\n/** @hidden */\nexport var beforeOpenColumnChooser = 'beforeOpenColumnChooser';\n/** @hidden */\nexport var resizeStart = 'resizeStart';\n/** @hidden */\nexport var onResize = 'resizing';\n/** @hidden */\nexport var resizeStop = 'resizeStop';\n/** @hidden */\nexport var checkBoxChange = 'checkBoxChange';\n/** @hidden */\nexport var beforeCopy = 'beforeCopy';\n/** @hidden */\nexport var filterChoiceRequest = 'filterchoicerequest';\n/** @hidden */\nexport var filterAfterOpen = 'filterafteropen';\n/** @hidden */\nexport var filterBeforeOpen = 'filterbeforeopen';\nexport var filterSearchBegin = 'filtersearchbegin';\n/**\n * Specifies grid internal events\n */\n/** @hidden */\nexport var initialLoad = 'initial-load';\n/** @hidden */\nexport var initialEnd = 'initial-end';\n/** @hidden */\nexport var dataReady = 'data-ready';\n/** @hidden */\nexport var contentReady = 'content-ready';\n/** @hidden */\nexport var uiUpdate = 'ui-update';\n/** @hidden */\nexport var onEmpty = 'on-empty';\n/** @hidden */\nexport var inBoundModelChanged = 'inbound-model-changed';\n/** @hidden */\nexport var modelChanged = 'model-changed';\n/** @hidden */\nexport var colGroupRefresh = 'colgroup-refresh';\n/** @hidden */\nexport var headerRefreshed = 'header-refreshed';\n/** @hidden */\nexport var pageBegin = 'paging-begin';\n/** @hidden */\nexport var pageComplete = 'paging-complete';\n/** @hidden */\nexport var sortBegin = 'sorting-begin';\n/** @hidden */\nexport var sortComplete = 'sorting-complete';\n/** @hidden */\nexport var filterBegin = 'filtering-begin';\n/** @hidden */\nexport var filterComplete = 'filtering-complete';\n/** @hidden */\nexport var searchBegin = 'searching-begin';\n/** @hidden */\nexport var searchComplete = 'searching-complete';\n/** @hidden */\nexport var reorderBegin = 'reorder-begin';\n/** @hidden */\nexport var reorderComplete = 'reorder-complete';\n/** @hidden */\nexport var rowDragAndDropBegin = 'rowdraganddrop-begin';\n/** @hidden */\nexport var rowDragAndDropComplete = 'rowdraganddrop-complete';\n/** @hidden */\nexport var groupBegin = 'grouping-begin';\n/** @hidden */\nexport var groupComplete = 'grouping-complete';\n/** @hidden */\nexport var ungroupBegin = 'ungrouping-begin';\n/** @hidden */\nexport var ungroupComplete = 'ungrouping-complete';\n/** @hidden */\nexport var rowSelectionBegin = 'rowselecting';\n/** @hidden */\nexport var rowSelectionComplete = 'rowselected';\n/** @hidden */\nexport var columnSelectionBegin = 'columnselecting';\n/** @hidden */\nexport var columnSelectionComplete = 'columnselected';\n/** @hidden */\nexport var cellSelectionBegin = 'cellselecting';\n/** @hidden */\nexport var cellSelectionComplete = 'cellselected';\n/** @hidden */\nexport var beforeCellFocused = 'beforecellfocused';\n/** @hidden */\nexport var cellFocused = 'cellfocused';\n/** @hidden */\nexport var keyPressed = 'key-pressed';\n/** @hidden */\nexport var click = 'click';\n/** @hidden */\nexport var destroy = 'destroy';\n/** @hidden */\nexport var columnVisibilityChanged = 'column-visible-changed';\n/** @hidden */\nexport var scroll = 'scroll';\n/** @hidden */\nexport var columnWidthChanged = 'column-width-changed';\n/** @hidden */\nexport var columnPositionChanged = 'column-position-changed';\n/** @hidden */\nexport var rowDragAndDrop = 'row-drag-and-drop';\n/** @hidden */\nexport var rowsAdded = 'rows-added';\n/** @hidden */\nexport var rowsRemoved = 'rows-removed';\n/** @hidden */\nexport var columnDragStop = 'column-drag-stop';\n/** @hidden */\nexport var headerDrop = 'header-drop';\n/** @hidden */\nexport var dataSourceModified = 'datasource-modified';\n/** @hidden */\nexport var refreshComplete = 'refresh-complete';\n/** @hidden */\nexport var refreshVirtualBlock = 'refresh-virtual-block';\n/** @hidden */\nexport var dblclick = 'dblclick';\n/** @hidden */\nexport var toolbarRefresh = 'toolbar-refresh';\n/** @hidden */\nexport var bulkSave = 'bulk-save';\n/** @hidden */\nexport var autoCol = 'auto-col';\n/** @hidden */\nexport var tooltipDestroy = 'tooltip-destroy';\n/** @hidden */\nexport var updateData = 'update-data';\n/** @hidden */\nexport var editBegin = 'edit-begin';\n/** @hidden */\nexport var editComplete = 'edit-complete';\n/** @hidden */\nexport var addBegin = 'add-begin';\n/** @hidden */\nexport var addComplete = 'add-complete';\n/** @hidden */\nexport var saveComplete = 'save-complete';\n/** @hidden */\nexport var deleteBegin = 'delete-begin';\n/** @hidden */\nexport var deleteComplete = 'delete-complete';\n/** @hidden */\nexport var preventBatch = 'prevent-batch';\n/** @hidden */\nexport var dialogDestroy = 'dialog-destroy';\n/** @hidden */\nexport var crudAction = 'crud-Action';\n/** @hidden */\nexport var addDeleteAction = 'add-delete-Action';\n/** @hidden */\nexport var destroyForm = 'destroy-form';\n/** @hidden */\nexport var doubleTap = 'double-tap';\n/** @hidden */\nexport var beforeExcelExport = 'beforeExcelExport';\n/** @hidden */\nexport var excelExportComplete = 'excelExportComplete';\n/** @hidden */\nexport var excelQueryCellInfo = 'excelQueryCellInfo';\n/** @hidden */\nexport var excelHeaderQueryCellInfo = 'excelHeaderQueryCellInfo';\n/** @hidden */\nexport var beforePdfExport = 'beforePdfExport';\n/** @hidden */\nexport var pdfExportComplete = 'pdfExportComplete';\n/** @hidden */\nexport var pdfQueryCellInfo = 'pdfQueryCellInfo';\n/** @hidden */\nexport var pdfHeaderQueryCellInfo = 'pdfHeaderQueryCellInfo';\n/** @hidden */\nexport var accessPredicate = 'access-predicate';\n/** @hidden */\nexport var contextMenuClick = 'contextMenuClick';\n/** @hidden */\nexport var freezeRender = 'freezerender';\n/** @hidden */\nexport var freezeRefresh = 'freezerefresh';\n/** @hidden */\nexport var contextMenuOpen = 'contextMenuOpen';\n/** @hidden */\nexport var columnMenuClick = 'columnMenuClick';\n/** @hidden */\nexport var columnMenuOpen = 'columnMenuOpen';\n/** @hidden */\nexport var filterOpen = 'filterOpen';\n/** @hidden */\nexport var filterDialogCreated = 'filterDialogCreated';\n/** @hidden */\nexport var filterMenuClose = 'filter-menu-close';\n/** @hidden */\nexport var initForeignKeyColumn = 'initForeignKeyColumn';\n/** @hidden */\nexport var getForeignKeyData = 'getForeignKeyData';\n/** @hidden */\nexport var generateQuery = 'generateQuery';\n/** @hidden */\nexport var showEmptyGrid = 'showEmptyGrid';\n/** @hidden */\nexport var foreignKeyData = 'foreignKeyData';\n/** @hidden */\nexport var dataStateChange = 'dataStateChange';\n/** @hidden */\nexport var dataSourceChanged = 'dataSourceChanged';\n/** @hidden */\nexport var rtlUpdated = 'rtl-updated';\n/** @hidden */\nexport var beforeFragAppend = 'beforeFragAppend';\n/** @hidden */\nexport var frozenHeight = 'frozenHeight';\n","/* tslint:disable-next-line:max-line-length */\nimport { EventHandler, isNullOrUndefined, extend, classList, addClass, removeClass, Browser, getValue, setValue } from '@syncfusion/ej2-base';\nimport { parentsUntil, getUid, appendChildren, getDatePredicate } from '../base/util';\nimport { remove, createElement, debounce } from '@syncfusion/ej2-base';\nimport { DataUtil, Query, DataManager, Predicate, UrlAdaptor, Deferred } from '@syncfusion/ej2-data';\nimport { createCheckBox } from '@syncfusion/ej2-buttons';\nimport * as events from '../base/constant';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { getForeignData } from '../base/util';\nimport { Dialog } from '@syncfusion/ej2-popups';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';\nimport { getFilterMenuPostion, toogleCheckbox, createCboxWithWrap, removeAddCboxClasses, getColumnByForeignKeyValue } from '../base/util';\n/**\n * @hidden\n * `CheckBoxFilter` module is used to handle filtering action.\n */\nvar CheckBoxFilter = /** @class */ (function () {\n /**\n * Constructor for checkbox filtering module\n * @hidden\n */\n function CheckBoxFilter(parent, filterSettings, serviceLocator) {\n this.existingPredicate = {};\n this.filterState = true;\n this.values = {};\n this.cBoxTrue = createCheckBox(false, { checked: true, label: ' ' });\n this.cBoxFalse = createCheckBox(false, { checked: false, label: ' ' });\n this.parent = parent;\n this.id = this.parent.element.id;\n this.serviceLocator = serviceLocator;\n this.filterSettings = filterSettings;\n this.valueFormatter = new ValueFormatter(this.parent.locale);\n this.cBoxTrue.insertBefore(createElement('input', {\n className: 'e-chk-hidden', attrs: { type: 'checkbox' }\n }), this.cBoxTrue.firstChild);\n this.cBoxFalse.insertBefore(createElement('input', {\n className: 'e-chk-hidden', attrs: { 'type': 'checkbox' }\n }), this.cBoxFalse.firstChild);\n this.cBoxFalse.querySelector('.e-frame').classList.add('e-uncheck');\n if (this.parent.enableRtl) {\n addClass([this.cBoxTrue, this.cBoxFalse], ['e-rtl']);\n }\n }\n /**\n * To destroy the filter bar.\n * @return {void}\n * @hidden\n */\n CheckBoxFilter.prototype.destroy = function () {\n this.closeDialog();\n };\n CheckBoxFilter.prototype.wireEvents = function () {\n EventHandler.add(this.dlg, 'click', this.clickHandler, this);\n this.searchHandler = debounce(this.searchBoxKeyUp, 200);\n EventHandler.add(this.dlg.querySelector('.e-searchinput'), 'keyup', this.searchHandler, this);\n };\n CheckBoxFilter.prototype.unWireEvents = function () {\n EventHandler.remove(this.dlg, 'click', this.clickHandler);\n var elem = this.dlg.querySelector('.e-searchinput');\n if (elem) {\n EventHandler.remove(elem, 'keyup', this.searchHandler);\n }\n };\n CheckBoxFilter.prototype.searchBoxClick = function (e) {\n var target = e.target;\n if (target.classList.contains('e-searchclear')) {\n this.sInput.value = '';\n this.refreshCheckboxes();\n this.updateSearchIcon();\n this.sInput.focus();\n }\n };\n CheckBoxFilter.prototype.searchBoxKeyUp = function (e) {\n this.refreshCheckboxes();\n this.updateSearchIcon();\n };\n CheckBoxFilter.prototype.updateSearchIcon = function () {\n if (this.sInput.value.length) {\n classList(this.sIcon, ['e-chkcancel-icon'], ['e-search-icon']);\n }\n else {\n classList(this.sIcon, ['e-search-icon'], ['e-chkcancel-icon']);\n }\n };\n /**\n * Gets the localized label by locale keyword.\n * @param {string} key\n * @return {string}\n */\n CheckBoxFilter.prototype.getLocalizedLabel = function (key) {\n return this.localeObj.getConstant(key);\n };\n CheckBoxFilter.prototype.updateDataSource = function () {\n var dataSource = this.options.dataSource;\n if (!(dataSource instanceof DataManager)) {\n for (var i = 0; i < dataSource.length; i++) {\n if (typeof dataSource !== 'object') {\n var obj = {};\n obj[this.options.field] = dataSource[i];\n dataSource[i] = obj;\n }\n }\n }\n };\n CheckBoxFilter.prototype.updateModel = function (options) {\n this.options = options;\n this.existingPredicate = options.actualPredicate || {};\n this.options.dataSource = options.dataSource;\n this.updateDataSource();\n this.options.type = options.type || 'string';\n this.options.format = options.format || '';\n this.options.filteredColumns = options.filteredColumns || this.parent.filterSettings.columns;\n this.options.sortedColumns = options.sortedColumns || this.parent.sortSettings.columns;\n this.options.query = options.query || new Query();\n this.options.allowCaseSensitive = options.allowCaseSensitive || false;\n this.values = {};\n this.localeObj = options.localeObj;\n this.isFiltered = options.filteredColumns.length;\n };\n CheckBoxFilter.prototype.getAndSetChkElem = function (options) {\n this.dlg = createElement('div', {\n id: this.id + this.options.type + '_excelDlg',\n className: 'e-checkboxfilter e-filter-popup'\n });\n this.sBox = createElement('div', { className: 'e-searchcontainer' });\n if (!options.hideSearchbox) {\n this.sInput = createElement('input', {\n id: this.id + '_SearchBox',\n className: 'e-searchinput'\n });\n this.sIcon = createElement('span', {\n className: 'e-searchclear e-search-icon e-icons e-input-group-icon', attrs: {\n type: 'text', title: this.getLocalizedLabel('Search')\n }\n });\n this.searchBox = createElement('span', { className: 'e-searchbox e-fields' });\n this.searchBox.appendChild(this.sInput);\n this.sBox.appendChild(this.searchBox);\n Input.createInput({\n element: this.sInput, floatLabelType: 'Never', properties: {\n placeholder: this.getLocalizedLabel('Search')\n }\n });\n this.searchBox.querySelector('.e-input-group').appendChild(this.sIcon);\n }\n this.spinner = createElement('div', { className: 'e-spinner' }); //for spinner\n this.cBox = createElement('div', {\n id: this.id + this.options.type + '_CheckBoxList',\n className: 'e-checkboxlist e-fields'\n });\n this.spinner.appendChild(this.cBox);\n this.sBox.appendChild(this.spinner);\n return this.sBox;\n };\n CheckBoxFilter.prototype.showDialog = function (options) {\n var args = {\n requestType: events.filterBeforeOpen, filterModel: this,\n columnName: this.options.field, columnType: this.options.type, cancel: false\n };\n this.parent.trigger(events.actionBegin, args);\n if (args.cancel) {\n return;\n }\n this.dialogObj = new Dialog({\n visible: false, content: this.sBox,\n close: this.closeDialog.bind(this),\n width: (!isNullOrUndefined(parentsUntil(options.target, 'e-bigger')))\n || this.parent.element.classList.contains('e-device') ? 260 : 255,\n target: this.parent.element, animationSettings: { effect: 'None' },\n buttons: [{\n click: this.btnClick.bind(this),\n buttonModel: {\n content: this.getLocalizedLabel(this.isExcel ? 'OKButton' : 'FilterButton'),\n cssClass: 'e-primary', isPrimary: true\n }\n },\n {\n click: this.btnClick.bind(this),\n buttonModel: { cssClass: 'e-flat', content: this.getLocalizedLabel(this.isExcel ? 'CancelButton' : 'ClearButton') }\n }],\n created: this.dialogCreated.bind(this),\n open: this.dialogOpen.bind(this)\n });\n this.dialogObj.appendTo(this.dlg);\n this.dialogObj.element.style.maxHeight = '800px';\n this.dialogObj.show();\n this.wireEvents();\n createSpinner({ target: this.spinner });\n showSpinner(this.spinner);\n this.getAllData();\n };\n CheckBoxFilter.prototype.dialogCreated = function (e) {\n if (!Browser.isDevice) {\n getFilterMenuPostion(this.options.target, this.dialogObj, this.parent);\n }\n else {\n this.dialogObj.position = { X: 'center', Y: 'center' };\n }\n this.parent.notify(events.filterDialogCreated, e);\n };\n CheckBoxFilter.prototype.openDialog = function (options) {\n this.updateModel(options);\n this.getAndSetChkElem(options);\n this.showDialog(options);\n };\n CheckBoxFilter.prototype.closeDialog = function () {\n if (this.dialogObj && !this.dialogObj.isDestroyed) {\n this.parent.notify(events.filterMenuClose, { field: this.options.field });\n this.dialogObj.destroy();\n this.unWireEvents();\n remove(this.dlg);\n this.dlg = null;\n }\n };\n CheckBoxFilter.prototype.clearFilter = function () {\n this.options.handler({ action: 'clear-filter', field: this.options.field });\n };\n CheckBoxFilter.prototype.btnClick = function (e) {\n if (this.filterState) {\n if (e.target.tagName.toLowerCase() === 'input') {\n var args = {\n action: 'filtering', filterCollection: {\n field: this.options.field,\n operator: this.options.column.type === 'date' || this.options.column.type === 'datetime' ? 'equal' : 'contains',\n value: e.target.value, matchCase: false, type: this.options.column.type\n },\n field: this.options.field\n };\n e.target.value ? this.options.handler(args) : this.closeDialog();\n }\n else {\n var text = e.target.firstChild.textContent.toLowerCase();\n if (this.getLocalizedLabel(this.isExcel ? 'OKButton' : 'FilterButton').toLowerCase() === text) {\n this.fltrBtnHandler();\n }\n else if (this.getLocalizedLabel('ClearButton').toLowerCase() === text) {\n this.clearFilter();\n }\n }\n this.closeDialog();\n }\n else if (!(e.target.tagName.toLowerCase() === 'input')) {\n this.clearFilter();\n this.closeDialog();\n }\n };\n CheckBoxFilter.prototype.fltrBtnHandler = function () {\n var checked = [].slice.call(this.cBox.querySelectorAll('.e-check:not(.e-selectall)'));\n var optr = 'equal';\n var caseSen = this.options.type === 'string' ?\n this.options.allowCaseSensitive : true;\n var defaults = {\n field: this.options.field, predicate: 'or',\n operator: optr, matchCase: caseSen, ignoreAccent: this.parent.filterSettings.ignoreAccent\n };\n var isNotEqual = this.itemsCnt !== checked.length && this.itemsCnt - checked.length < checked.length;\n if (isNotEqual) {\n optr = 'notequal';\n checked = [].slice.call(this.cBox.querySelectorAll('.e-uncheck:not(.e-selectall)'));\n defaults.predicate = 'and';\n defaults.operator = 'notequal';\n }\n var value;\n var fObj;\n var coll = [];\n var searchInput = this.searchBox.querySelector('.e-searchinput');\n if (checked.length !== this.itemsCnt || (searchInput.value && searchInput.value !== '')) {\n for (var i = 0; i < checked.length; i++) {\n value = this.values[parentsUntil(checked[i], 'e-ftrchk').getAttribute('uid')];\n fObj = extend({}, { value: value }, defaults);\n if (value && !value.toString().length) {\n fObj.operator = isNotEqual ? 'notequal' : 'equal';\n }\n coll.push(fObj);\n }\n this.initiateFilter(coll);\n }\n else {\n this.clearFilter();\n }\n };\n CheckBoxFilter.prototype.initiateFilter = function (fColl) {\n var firstVal = fColl[0];\n var predicate;\n if (!isNullOrUndefined(firstVal)) {\n predicate = firstVal.ejpredicate ? firstVal.ejpredicate :\n new Predicate(firstVal.field, firstVal.operator, firstVal.value, !firstVal.matchCase, firstVal.ignoreAccent);\n for (var j = 1; j < fColl.length; j++) {\n predicate = fColl[j].ejpredicate !== undefined ?\n predicate[fColl[j].predicate](fColl[j].ejpredicate) :\n predicate[fColl[j].predicate](fColl[j].field, fColl[j].operator, fColl[j].value, !fColl[j].matchCase, fColl[j].ignoreAccent);\n }\n var args = {\n action: 'filtering', filterCollection: fColl, field: this.options.field,\n ejpredicate: Predicate.or(predicate)\n };\n this.options.handler(args);\n }\n };\n CheckBoxFilter.prototype.refreshCheckboxes = function () {\n var val = this.sInput.value;\n var query = this.options.query.clone();\n var parsed = (this.options.type !== 'string' && parseFloat(val)) ? parseFloat(val) : val;\n var operator = this.options.type ? 'startswith' : 'contains';\n var matchCase = true;\n var ignoreAccent = this.parent.filterSettings.ignoreAccent;\n parsed = (parsed === '' || parsed === undefined) ? undefined : parsed;\n var predicte;\n if (this.options.type === 'boolean') {\n if (parsed !== undefined &&\n this.getLocalizedLabel('FilterTrue').toLowerCase().indexOf(parsed.toLowerCase()) !== -1) {\n parsed = 'true';\n }\n else if (parsed !== undefined &&\n this.getLocalizedLabel('FilterFalse').toLowerCase().indexOf(parsed.toLowerCase()) !== -1) {\n parsed = 'false';\n }\n parsed = parsed === 'true';\n operator = 'equal';\n }\n var args = {\n requestType: events.filterSearchBegin,\n filterModel: this, columnName: this.options.field, column: this.options.column,\n operator: operator, matchCase: matchCase, ignoreAccent: ignoreAccent, filterChoiceCount: null,\n query: query\n };\n this.parent.trigger(events.actionBegin, args);\n predicte = new Predicate(this.options.field, args.operator, parsed, args.matchCase, args.ignoreAccent);\n if (this.options.type === 'date' || this.options.type === 'datetime') {\n parsed = this.valueFormatter.fromView(val, this.options.parserFn, this.options.type);\n operator = 'equal';\n if (isNullOrUndefined(parsed) && val.length) {\n return;\n }\n predicte = getDatePredicate({\n field: this.options.field, operator: operator, value: parsed, matchCase: matchCase,\n ignoreAccent: ignoreAccent\n });\n }\n if (val.length) {\n query.where(predicte);\n }\n args.filterChoiceCount = !isNullOrUndefined(args.filterChoiceCount) ? args.filterChoiceCount : 1000;\n query.take(args.filterChoiceCount);\n if (this.parent.dataSource && 'result' in this.parent.dataSource) {\n this.filterEvent(args, query);\n }\n else {\n this.processSearch(query);\n }\n };\n CheckBoxFilter.prototype.getPredicateFromCols = function (columns) {\n var predicate;\n var predicates = CheckBoxFilter.getPredicate(columns);\n var predicateList = [];\n var fPredicate = {};\n var foreignColumn = this.parent.getForeignKeyColumns();\n for (var _i = 0, _a = Object.keys(predicates); _i < _a.length; _i++) {\n var prop = _a[_i];\n var col = getColumnByForeignKeyValue(prop, foreignColumn);\n if (col) {\n this.parent.notify(events.generateQuery, { predicate: fPredicate, column: col });\n if (fPredicate.predicate.predicates.length) {\n predicateList.push(Predicate.or(fPredicate.predicate.predicates));\n }\n }\n else {\n predicateList.push(predicates[prop]);\n }\n }\n return predicateList.length && Predicate.and(predicateList);\n };\n CheckBoxFilter.prototype.getAllData = function () {\n var query = new Query();\n query = this.parent.query.clone();\n query.requiresCount(); //consider take query\n var args = {\n requestType: events.filterChoiceRequest, filterModel: this, query: query, filterChoiceCount: null\n };\n this.parent.trigger(events.actionBegin, args);\n args.filterChoiceCount = !isNullOrUndefined(args.filterChoiceCount) ? args.filterChoiceCount : 1000;\n query.take(args.filterChoiceCount);\n if (this.parent.dataSource && 'result' in this.parent.dataSource) {\n this.filterEvent(args, query);\n }\n else {\n this.processDataOperation(query);\n }\n };\n CheckBoxFilter.prototype.filterEvent = function (args, query) {\n var _this = this;\n var def = this.eventPromise(args, query);\n def.promise.then(function (e) {\n _this.dataSuccess(e);\n });\n };\n CheckBoxFilter.prototype.eventPromise = function (args, query) {\n var state;\n state = this.getStateEventArgument(query);\n var def = new Deferred();\n state.dataSource = def.resolve;\n state.action = args;\n this.parent.trigger(events.dataStateChange, state);\n return def;\n };\n ;\n CheckBoxFilter.prototype.getStateEventArgument = function (query) {\n var adaptr = new UrlAdaptor();\n var dm = new DataManager({ url: '', adaptor: new UrlAdaptor });\n var state = adaptr.processQuery(dm, query);\n var data = JSON.parse(state.data);\n return data;\n };\n ;\n CheckBoxFilter.prototype.processDataOperation = function (query) {\n var _this = this;\n this.options.dataSource = this.options.dataSource instanceof DataManager ?\n this.options.dataSource : new DataManager(this.options.dataSource);\n var allPromise = [];\n var runArray = [];\n if (this.options.column.isForeignColumn()) {\n allPromise.push(this.options.column.dataSource.executeQuery(new Query()));\n runArray.push(function (data) { return _this.foreignKeyData = data; });\n }\n allPromise.push(this.options.dataSource.executeQuery(query));\n runArray.push(this.dataSuccess.bind(this));\n var i = 0;\n Promise.all(allPromise).then(function (e) {\n e.forEach(function (data) {\n runArray[i++](data.result);\n });\n });\n };\n CheckBoxFilter.prototype.dataSuccess = function (e) {\n this.fullData = e;\n var query = new Query();\n if ((this.options.filteredColumns.length)) {\n var cols = [];\n for (var i = 0; i < this.options.filteredColumns.length; i++) {\n if (!(this.options.filteredColumns[i].field === this.options.field ||\n this.options.filteredColumns[i].field === this.options.foreignKeyValue)) {\n cols.push(this.options.filteredColumns[i]);\n }\n }\n var predicate = this.getPredicateFromCols(cols);\n if (predicate) {\n query.where(predicate);\n }\n }\n // query.select(this.options.field);\n var result = new DataManager(this.fullData).executeLocal(query);\n var col = this.options.column;\n var res = CheckBoxFilter.getDistinct(result, this.options.field, col, this.foreignKeyData);\n this.filteredData = res.records || [];\n this.processDataSource(null, true, this.filteredData);\n this.sInput.focus();\n var args = {\n requestType: events.filterAfterOpen,\n filterModel: this, columnName: this.options.field, columnType: this.options.type\n };\n this.parent.trigger(events.actionComplete, args);\n };\n CheckBoxFilter.prototype.processDataSource = function (query, isInitial, dataSource) {\n showSpinner(this.spinner);\n // query = query ? query : this.options.query.clone();\n // query.requiresCount();\n // let result: Object = new DataManager(dataSource as JSON[]).executeLocal(query);\n // let res: { result: Object[] } = result as { result: Object[] };\n this.updateResult();\n this.createFilterItems(dataSource, isInitial);\n };\n CheckBoxFilter.prototype.processSearch = function (query) {\n this.processDataOperation(query);\n };\n CheckBoxFilter.prototype.updateResult = function () {\n this.result = {};\n var predicate = this.getPredicateFromCols(this.options.filteredColumns);\n var query = new Query();\n if (predicate) {\n query.where(predicate);\n }\n var result = new DataManager(this.fullData).executeLocal(query);\n for (var _i = 0, result_1 = result; _i < result_1.length; _i++) {\n var res = result_1[_i];\n this.result[getValue(this.options.field, res)] = true;\n }\n };\n CheckBoxFilter.prototype.clickHandler = function (e) {\n var target = e.target;\n var elem = parentsUntil(target, 'e-checkbox-wrapper');\n if (parentsUntil(target, 'e-searchbox')) {\n this.searchBoxClick(e);\n }\n if (elem) {\n var selectAll = elem.querySelector('.e-selectall');\n if (selectAll) {\n this.updateAllCBoxes(!selectAll.classList.contains('e-check'));\n }\n else {\n toogleCheckbox(elem.parentElement);\n }\n this.updateIndeterminatenBtn();\n elem.querySelector('.e-chk-hidden').focus();\n }\n };\n CheckBoxFilter.prototype.updateAllCBoxes = function (checked) {\n var cBoxes = [].slice.call(this.cBox.querySelectorAll('.e-frame'));\n for (var _i = 0, cBoxes_1 = cBoxes; _i < cBoxes_1.length; _i++) {\n var cBox = cBoxes_1[_i];\n removeAddCboxClasses(cBox, checked);\n }\n };\n CheckBoxFilter.prototype.dialogOpen = function () {\n if (this.parent.element.classList.contains('e-device')) {\n this.dialogObj.element.querySelector('.e-input-group').classList.remove('e-input-focus');\n this.dialogObj.element.querySelector('.e-btn').focus();\n }\n };\n CheckBoxFilter.prototype.createCheckbox = function (value, checked) {\n var elem = checked ? this.cBoxTrue.cloneNode(true) :\n this.cBoxFalse.cloneNode(true);\n var label = elem.querySelector('.e-label');\n label.innerHTML = !isNullOrUndefined(value) && value.toString().length ? value :\n this.getLocalizedLabel('Blanks');\n if (this.options.template) {\n label.innerHTML = '';\n var args = {};\n args[this.options.field] = value;\n appendChildren(label, this.options.template(args));\n }\n return elem;\n };\n CheckBoxFilter.prototype.updateIndeterminatenBtn = function () {\n var cnt = this.cBox.children.length - 1;\n var className = [];\n var elem = this.cBox.querySelector('.e-selectall');\n var selected = this.cBox.querySelectorAll('.e-check:not(.e-selectall)').length;\n var btn = this.dialogObj.btnObj[0];\n btn.disabled = false;\n if (cnt === selected) {\n className = ['e-check'];\n }\n else if (selected) {\n className = ['e-stop'];\n }\n else {\n className = ['e-uncheck'];\n btn.disabled = true;\n }\n this.filterState = !btn.disabled;\n btn.dataBind();\n removeClass([elem], ['e-check', 'e-stop', 'e-uncheck']);\n addClass([elem], className);\n };\n CheckBoxFilter.prototype.createFilterItems = function (data, isInitial) {\n var cBoxes = createElement('div');\n var btn = this.dialogObj.btnObj[0];\n this.itemsCnt = data.length;\n if (data.length) {\n var selectAll = createCboxWithWrap(getUid('cbox'), this.createCheckbox(this.getLocalizedLabel('SelectAll'), false), 'e-ftrchk');\n selectAll.querySelector('.e-frame').classList.add('e-selectall');\n cBoxes.appendChild(selectAll);\n var predicate = new Predicate('field', 'equal', this.options.field);\n if (this.options.foreignKeyValue) {\n predicate = predicate.or('field', 'equal', this.options.foreignKeyValue);\n }\n var isColFiltered = new DataManager(this.options.filteredColumns).executeLocal(new Query().where(predicate)).length;\n for (var i = 0; i < data.length; i++) {\n var uid = getUid('cbox');\n this.values[uid] = getValue('ejValue', data[i]);\n var value = this.valueFormatter.toView(getValue(this.options.field, data[i]), this.options.formatFn);\n cBoxes.appendChild(createCboxWithWrap(uid, this.createCheckbox(value, this.getCheckedState(isColFiltered, this.values[uid])), 'e-ftrchk'));\n }\n this.cBox.innerHTML = cBoxes.innerHTML;\n this.updateIndeterminatenBtn();\n btn.disabled = false;\n }\n else {\n cBoxes.appendChild(createElement('span', { innerHTML: this.getLocalizedLabel('NoResult') }));\n this.cBox.innerHTML = cBoxes.innerHTML;\n btn.disabled = true;\n }\n this.filterState = !btn.disabled;\n btn.dataBind();\n var args = { requestType: events.filterChoiceRequest, filterModel: this, dataSource: data };\n this.parent.trigger(events.actionComplete, args);\n hideSpinner(this.spinner);\n };\n CheckBoxFilter.prototype.getCheckedState = function (isColFiltered, value) {\n if (!this.isFiltered || !isColFiltered) {\n return true;\n }\n else {\n return this.result[value];\n }\n };\n CheckBoxFilter.getDistinct = function (json, field, column, foreignKeyData) {\n var len = json.length;\n var result = [];\n var value;\n var ejValue = 'ejValue';\n var lookup = {};\n var isForeignKey = column && column.isForeignColumn();\n while (len--) {\n value = json[len];\n value = getValue(field, value); //local remote diff, check with mdu \n if (!isNullOrUndefined(value)) {\n if (!(value in lookup)) {\n var obj = {};\n obj[ejValue] = value;\n lookup[value] = true;\n value = isForeignKey ? getValue(column.foreignKeyValue, getForeignData(column, {}, value, foreignKeyData)[0]) : value;\n setValue(field, isNullOrUndefined(value) ? null : value, obj);\n result.push(obj);\n }\n }\n }\n return DataUtil.group(DataUtil.sort(result, field, DataUtil.fnAscending), 'ejValue');\n };\n CheckBoxFilter.getPredicate = function (columns) {\n var cols = CheckBoxFilter.getDistinct(columns, 'field').records || [];\n var collection = [];\n var pred = {};\n for (var i = 0; i < cols.length; i++) {\n collection = new DataManager(columns).executeLocal(new Query().where('field', 'equal', cols[i].field));\n if (collection.length !== 0) {\n pred[cols[i].field] = CheckBoxFilter.generatePredicate(collection);\n }\n }\n return pred;\n };\n CheckBoxFilter.generatePredicate = function (cols) {\n var len = cols ? cols.length : 0;\n var predicate;\n var first;\n first = CheckBoxFilter.updateDateFilter(cols[0]);\n first.ignoreAccent = !isNullOrUndefined(first.ignoreAccent) ? first.ignoreAccent : false;\n if (first.type === 'date' || first.type === 'datetime') {\n predicate = getDatePredicate(first);\n }\n else {\n predicate = first.ejpredicate ? first.ejpredicate :\n new Predicate(first.field, first.operator, first.value, !CheckBoxFilter.getCaseValue(first), first.ignoreAccent);\n }\n for (var p = 1; p < len; p++) {\n cols[p] = CheckBoxFilter.updateDateFilter(cols[p]);\n if (len > 2 && p > 1 && cols[p].predicate === 'or') {\n if (cols[p].type === 'date' || cols[p].type === 'datetime') {\n predicate.predicates.push(getDatePredicate(cols[p]));\n }\n else {\n predicate.predicates.push(new Predicate(cols[p].field, cols[p].operator, cols[p].value, !CheckBoxFilter.getCaseValue(cols[p]), cols[p].ignoreAccent));\n }\n }\n else {\n if (cols[p].type === 'date' || cols[p].type === 'datetime') {\n predicate = predicate[(cols[p].predicate)](getDatePredicate(cols[p]), cols[p].ignoreAccent);\n }\n else {\n predicate = cols[p].ejpredicate ?\n predicate[cols[p].predicate](cols[p].ejpredicate) :\n predicate[(cols[p].predicate)](cols[p].field, cols[p].operator, cols[p].value, !CheckBoxFilter.getCaseValue(cols[p]), cols[p].ignoreAccent);\n }\n }\n }\n return predicate || null;\n };\n CheckBoxFilter.getCaseValue = function (filter) {\n if (isNullOrUndefined(filter.matchCase)) {\n return true;\n }\n else {\n return filter.matchCase;\n }\n };\n CheckBoxFilter.updateDateFilter = function (filter) {\n if ((filter.type === 'date' || filter.type === 'datetime' || filter.value instanceof Date)) {\n filter.type = filter.type || 'date';\n }\n return filter;\n };\n /**\n * For internal use only - Get the module name.\n * @private\n */\n CheckBoxFilter.prototype.getModuleName = function () {\n return 'checkboxFilter';\n };\n return CheckBoxFilter;\n}());\nexport { CheckBoxFilter };\n","import { isNullOrUndefined, extend } from '@syncfusion/ej2-base';\nimport { Query, DataManager, Predicate, Deferred, UrlAdaptor } from '@syncfusion/ej2-data';\nimport { setFormatter, getDatePredicate, getColumnByForeignKeyValue } from '../base/util';\nimport * as events from '../base/constant';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { CheckBoxFilter } from '../actions/checkbox-filter';\n/**\n * Grid data module is used to generate query and data source.\n * @hidden\n */\nvar Data = /** @class */ (function () {\n /**\n * Constructor for data module.\n * @hidden\n */\n function Data(parent, serviceLocator) {\n this.dataState = { isPending: false, resolver: null, group: [] };\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n this.initDataManager();\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.rowsAdded, this.addRows, this);\n this.parent.on(events.rowsRemoved, this.removeRows, this);\n this.parent.on(events.dataSourceModified, this.initDataManager, this);\n this.parent.on(events.destroy, this.destroy, this);\n this.parent.on(events.updateData, this.crudActions, this);\n this.parent.on(events.addDeleteAction, this.getData, this);\n }\n /**\n * The function used to initialize dataManager and external query\n * @return {void}\n */\n Data.prototype.initDataManager = function () {\n var gObj = this.parent;\n this.dataManager = gObj.dataSource instanceof DataManager ? gObj.dataSource :\n (isNullOrUndefined(gObj.dataSource) ? new DataManager() : new DataManager(gObj.dataSource));\n gObj.query = gObj.query instanceof Query ? gObj.query : new Query();\n };\n /**\n * The function is used to generate updated Query from Grid model.\n * @return {Query}\n * @hidden\n */\n Data.prototype.generateQuery = function (skipPage) {\n var gObj = this.parent;\n var query = gObj.query.clone();\n this.filterQuery(query);\n this.searchQuery(query);\n this.aggregateQuery(query);\n this.sortQuery(query);\n this.pageQuery(query, skipPage);\n this.groupQuery(query);\n return query;\n };\n Data.prototype.aggregateQuery = function (query, isForeign) {\n this.parent.aggregates.forEach(function (row) {\n row.columns.forEach(function (column) {\n var types = column.type instanceof Array ? column.type : [column.type];\n types.forEach(function (type) { return query.aggregate(type.toLowerCase(), column.field); });\n });\n });\n return query;\n };\n Data.prototype.pageQuery = function (query, skipPage) {\n var gObj = this.parent;\n if ((gObj.allowPaging || gObj.enableVirtualization) && skipPage !== true) {\n gObj.pageSettings.currentPage = Math.max(1, gObj.pageSettings.currentPage);\n if (gObj.pageSettings.pageCount <= 0) {\n gObj.pageSettings.pageCount = 8;\n }\n if (gObj.pageSettings.pageSize <= 0) {\n gObj.pageSettings.pageSize = 12;\n }\n query.page(gObj.pageSettings.currentPage, gObj.pageSettings.pageSize);\n }\n return query;\n };\n Data.prototype.groupQuery = function (query) {\n var gObj = this.parent;\n if (gObj.allowGrouping && gObj.groupSettings.columns.length) {\n var columns = gObj.groupSettings.columns;\n for (var i = 0, len = columns.length; i < len; i++) {\n var column = this.getColumnByField(columns[i]);\n var isGrpFmt = column.enableGroupByFormat;\n var format = column.format;\n if (isGrpFmt) {\n query.group(columns[i], this.formatGroupColumn.bind(this), format);\n }\n else {\n query.group(columns[i], null);\n }\n }\n }\n return query;\n };\n Data.prototype.sortQuery = function (query) {\n var gObj = this.parent;\n if ((gObj.allowSorting || gObj.allowGrouping) && gObj.sortSettings.columns.length) {\n var columns = gObj.sortSettings.columns;\n var sortGrp = [];\n for (var i = columns.length - 1; i > -1; i--) {\n var col = this.getColumnByField(columns[i].field);\n if (col) {\n col.setSortDirection(columns[i].direction);\n }\n var fn = col.sortComparer && !this.isRemote() ? col.sortComparer.bind(col) : columns[i].direction;\n if (gObj.groupSettings.columns.indexOf(columns[i].field) === -1) {\n query.sortBy(col.field, fn);\n }\n else {\n sortGrp.push({ direction: fn, field: col.field });\n }\n }\n for (var i = 0, len = sortGrp.length; i < len; i++) {\n query.sortBy(sortGrp[i].field, sortGrp[i].direction);\n }\n }\n return query;\n };\n Data.prototype.searchQuery = function (query) {\n var _this = this;\n var sSettings = this.parent.searchSettings;\n var fields = sSettings.fields.length ? sSettings.fields : this.parent.getColumns().map(function (f) { return f.field; });\n var predicateList = [];\n if (this.parent.searchSettings.key.length) {\n var predicate = void 0;\n if (this.parent.getForeignKeyColumns().length) {\n fields.forEach(function (columnName) {\n var column = _this.getColumnByField(columnName);\n var sQuery = new Query();\n if (column.isForeignColumn()) {\n predicateList = _this.fGeneratePredicate(column, predicateList);\n }\n else {\n predicateList.push(new Predicate(column.field, sSettings.operator, sSettings.key, sSettings.ignoreCase, sSettings.ignoreAccent));\n }\n });\n query.where(Predicate.or(predicateList));\n }\n else {\n query.search(sSettings.key, fields, sSettings.operator, sSettings.ignoreCase, sSettings.ignoreAccent);\n }\n }\n return query;\n };\n Data.prototype.filterQuery = function (query, column, skipFoerign) {\n var gObj = this.parent;\n var predicateList = [];\n var fPredicate = {};\n var actualFilter = [];\n var foreignColumn = this.parent.getForeignKeyColumns();\n if (gObj.allowFiltering && gObj.filterSettings.columns.length) {\n var columns = column ? column : gObj.filterSettings.columns;\n var colType = {};\n for (var _i = 0, _a = gObj.columns; _i < _a.length; _i++) {\n var col = _a[_i];\n colType[col.field] = col.filter.type ? col.filter.type : gObj.filterSettings.type;\n }\n var checkBoxCols = [];\n var defaultFltrCols = [];\n for (var _b = 0, columns_1 = columns; _b < columns_1.length; _b++) {\n var col = columns_1[_b];\n if (colType[col.field] === 'CheckBox' || colType[col.field] === 'Excel') {\n checkBoxCols.push(col);\n }\n else {\n defaultFltrCols.push(col);\n }\n }\n if (checkBoxCols.length) {\n var excelPredicate = CheckBoxFilter.getPredicate(checkBoxCols);\n for (var _c = 0, _d = Object.keys(excelPredicate); _c < _d.length; _c++) {\n var prop = _d[_c];\n var col = getColumnByForeignKeyValue(prop, foreignColumn);\n if (col && !skipFoerign) {\n predicateList = this.fGeneratePredicate(col, predicateList);\n actualFilter.push(col);\n }\n else {\n predicateList.push(excelPredicate[prop]);\n }\n }\n }\n if (defaultFltrCols.length) {\n for (var _e = 0, defaultFltrCols_1 = defaultFltrCols; _e < defaultFltrCols_1.length; _e++) {\n var col = defaultFltrCols_1[_e];\n var column_1 = this.getColumnByField(col.field) ||\n getColumnByForeignKeyValue(col.field, this.parent.getForeignKeyColumns());\n var sType = column_1.type;\n if (getColumnByForeignKeyValue(col.field, foreignColumn) && !skipFoerign) {\n actualFilter.push(col);\n predicateList = this.fGeneratePredicate(column_1, predicateList);\n }\n else {\n if (sType !== 'date' && sType !== 'datetime') {\n predicateList.push(new Predicate(col.field, col.operator, col.value, !col.matchCase, this.parent.filterSettings.ignoreAccent));\n }\n else {\n predicateList.push(getDatePredicate(col));\n }\n }\n }\n }\n if (predicateList.length) {\n query.where(Predicate.and(predicateList));\n }\n else {\n this.parent.notify(events.showEmptyGrid, {});\n }\n }\n return query;\n };\n Data.prototype.fGeneratePredicate = function (col, predicateList) {\n var fPredicate = {};\n if (col) {\n this.parent.notify(events.generateQuery, { predicate: fPredicate, column: col });\n if (fPredicate.predicate.predicates.length) {\n predicateList.push(fPredicate.predicate);\n }\n }\n return predicateList;\n };\n /**\n * The function is used to get dataManager promise by executing given Query.\n * @param {Query} query - Defines the query which will execute along with data processing.\n * @return {Promise