all files / maps/layers/ data-label.js

97.03% Statements 261/269
86.79% Branches 230/265
100% Functions 15/15
97.03% Lines 261/269
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400   164× 164× 164×   18023× 18023× 18023× 223036× 223036×   223036× 223036× 223036× 8488× 8488×     18023×   8635× 8635× 8635× 8635× 8635× 8635× 8635× 8635× 8635× 8635× 8635× 8635× 8635× 8635× 8635× 8635× 8635× 8635× 8635× 8635× 8635× 8635× 8635× 8635× 8635× 8635× 8635× 8635× 8635× 8635×   8635× 8635× 8635× 8635×     8635× 8635× 8635× 8635× 8635× 8635×   8635× 8635× 9390× 9388× 9388× 9388× 4244×       8635× 8635× 8635× 8635× 5395× 5395× 5395× 5395× 5395×     3240× 3234× 3234× 33079× 33079× 33079× 9534× 9534×         8635×   8635×   352× 352× 352× 352×       8635× 176×   8635× 300×   8635× 8635× 8635×                 8635×   8635× 8635× 8578× 51× 51× 669× 51× 51× 51× 51×       51× 51× 51× 51×   8578× 8578× 51× 51× 51× 51×       8578×         8578× 8578×     8578× 8578×     8578× 7766× 7766×   8578×   8578× 8578× 8578× 8578× 8578× 8578× 8578× 8578× 8578×   5303× 5303×       5303× 5303× 5303×         8578× 8578× 8578× 8578× 8578× 937× 937×   937× 937× 937×         937× 937×   937×     7641× 7641× 560× 560× 560× 560×   7641× 6367×   7641× 714× 714×   7641× 7641×   7641× 7641× 613× 13421× 13421×       212× 212×       613× 613×   7641× 7641× 357× 8379× 8379×       8333× 8333×     46× 26× 26× 26× 26×   20× 20× 20× 20× 20×         357× 357× 357×   7641× 6671×   7641× 7337× 7337× 350× 350× 350× 350× 350× 350× 350× 350×         350× 350×   350× 350× 350× 350× 350×     7641× 7641× 7641× 7641× 7641× 51×   51× 51×     7590×     7641×   8578×               8578× 12× 12×   8578× 153× 51× 51× 51×             102× 102×       816× 714× 714× 714×       102× 102×       38474× 12×         38472× 5322372×     38474×   3430×   163× 163× 163×        
define(["require", "exports", "../utils/helper", "@syncfusion/ej2-base", "../model/constants"], function (require, exports, helper_1, ej2_base_1, constants_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var DataLabel = (function () {
        function DataLabel(maps) {
            this.value = { rightWidth: 0, leftWidth: 0, heightTop: 0, heightBottom: 0 };
            this.maps = maps;
            this.dataLabelCollections = [];
        }
        DataLabel.prototype.getDataLabel = function (dataSource, labelPath, shapeName, shapeDataPath) {
            var text;
            var shapeNameValue;
            for (var i = 0; i < (ej2_base_1.isNullOrUndefined(dataSource) ? 0 : dataSource.length); i++) {
                var data = dataSource[i];
                var dataShapePathValue = !ej2_base_1.isNullOrUndefined(data[shapeDataPath]) && isNaN(data[shapeDataPath]) &&
                    typeof data[shapeDataPath] === 'string' ? data[shapeDataPath].toLowerCase() : data[shapeDataPath];
                shapeName = !ej2_base_1.isNullOrUndefined(shapeName) && typeof shapeName === 'string' ? shapeName.toString() : shapeName;
                shapeNameValue = !ej2_base_1.isNullOrUndefined(shapeName) && typeof shapeName === 'string' ? shapeName.toLowerCase() : shapeName;
                if ((dataShapePathValue) === shapeNameValue) {
                    text = data;
                    break;
                }
            }
            return text;
        };
        DataLabel.prototype.renderLabel = function (layer, layerIndex, shape, layerData, group, labelTemplateElement, index, intersect) {
            var _this = this;
            var dataLabel = layer.dataLabelSettings;
            var style = layer.dataLabelSettings.textStyle;
            var templateFn;
            var options;
            var dataLabelSettings = layer.dataLabelSettings;
            var labelpath = layer.dataLabelSettings.labelPath;
            var shapePoint = [[]];
            var midIndex = 0;
            var pointsLength = 0;
            var shapeData = shape;
            var element;
            var rect;
            var text = '';
            var datasrcObj;
            var currentLength = 0;
            var oldIndex;
            var location;
            var sublayerIndexLabel = false;
            var shapeProperties = shape['properties'];
            var labelId = this.maps.element.id + '_LayerIndex_' + layerIndex + '_shapeIndex_' + index + '_LabelIndex_' + index;
            var textLocation = new helper_1.Point(0, 0);
            var shapes = layerData[index];
            var locationX;
            var locationY;
            style.fontFamily = this.maps.theme.toLowerCase() !== 'material' ? this.maps.themeStyle.labelFontFamily : style.fontFamily;
            style.fontWeight = style.fontWeight || this.maps.themeStyle.fontWeight;
            style.size = style.size || this.maps.themeStyle.fontSize;
            shape = !ej2_base_1.isNullOrUndefined(shapes) ? shapes['property'] : null;
            var properties = (Object.prototype.toString.call(layer.shapePropertyPath) === '[object Array]' ?
                layer.shapePropertyPath : [layer.shapePropertyPath]);
            var propertyPath;
            var isPoint = false;
            var animate = (layer.animationDuration !== 0 || ej2_base_1.animationMode === 'Enable') || ej2_base_1.isNullOrUndefined(this.maps.zoomModule);
            var translate = (this.maps.isTileMap) ? new Object() : ((this.maps.zoomSettings.zoomFactor > 1 &&
                !ej2_base_1.isNullOrUndefined(this.maps.zoomModule)) ? helper_1.getZoomTranslate(this.maps, layer, animate) :
                helper_1.getTranslate(this.maps, layer, animate));
            var scale = (this.maps.isTileMap) ? this.maps.scale : translate['scale'];
            var transPoint = (this.maps.isTileMap) ? this.maps.translatePoint : translate['location'];
            var zoomTransPoint = this.maps.zoomTranslatePoint;
            var shapeWidth;
            var scaleZoomValue = !ej2_base_1.isNullOrUndefined(this.maps.scale) ? Math.floor(this.maps.scale) : 1;
            var zoomLabelsPosition = this.maps.zoomSettings.enable ? !ej2_base_1.isNullOrUndefined(this.maps.zoomShapeCollection) &&
                this.maps.zoomShapeCollection.length > 0 && !this.maps.isAddLayer : this.maps.zoomSettings.enable;
            this.maps.translateType = 'labels';
            for (var j = 0; j < properties.length; j++) {
                if (shapeProperties[properties[j]]) {
                    propertyPath = properties[j];
                    datasrcObj = this.getDataLabel(layer.dataSource, layer.shapeDataPath, shapeData['properties'][propertyPath], layer.shapeDataPath);
                    if (datasrcObj) {
                        break;
                    }
                }
            }
            datasrcObj = this.getDataLabel(layer.dataSource, layer.shapeDataPath, shapeData['properties'][propertyPath], layer.shapeDataPath);
            Eif (!ej2_base_1.isNullOrUndefined(shapes) && !ej2_base_1.isNullOrUndefined(shapes['property'])) {
                shapePoint = [[]];
                if (!layerData[index]['_isMultiPolygon'] && layerData[index]['type'] !== 'Point' && layerData[index]['type'] !== 'MultiPoint') {
                    shapePoint.push(this.getPoint(layerData[index], []));
                    currentLength = shapePoint[shapePoint.length - 1].length;
                    Eif (pointsLength < currentLength) {
                        pointsLength = currentLength;
                        midIndex = shapePoint.length - 1;
                    }
                }
                else if (layerData[index]['type'] !== 'Point' && layerData[index]['type'] !== 'MultiPoint') {
                    var layer_1 = layerData[index];
                    for (var j = 0; j < layer_1.length; j++) {
                        shapePoint.push(this.getPoint(layer_1[j], []));
                        currentLength = shapePoint[shapePoint.length - 1].length;
                        if (pointsLength < currentLength) {
                            pointsLength = currentLength;
                            midIndex = shapePoint.length - 1;
                        }
                    }
                }
            }
            text = (!ej2_base_1.isNullOrUndefined(datasrcObj)) ? !ej2_base_1.isNullOrUndefined(datasrcObj[labelpath]) ?
                datasrcObj[labelpath].toString() : datasrcObj[layer.shapeDataPath] : shapeData['properties'][labelpath];
            if ((Object.prototype.toString.call(layer.shapePropertyPath) === '[object Array]') &&
                (ej2_base_1.isNullOrUndefined(text) && (!ej2_base_1.isNullOrUndefined(layer.dataSource) && layer.dataSource['length'] === 0))) {
                for (var l = 0; l < layer.shapePropertyPath.length; l++) {
                    Eif (shapeData['properties'][layer.shapePropertyPath[l]]) {
                        text = shapeData['properties'][layer.shapePropertyPath[l]];
                        break;
                    }
                }
            }
            if (ej2_base_1.isNullOrUndefined(text) && (layer.dataLabelSettings.template !== '' && layer.dataSource['length'] === 0)) {
                text = shapeData['properties'][layer.shapePropertyPath];
            }
            if (ej2_base_1.isNullOrUndefined(text) && (!ej2_base_1.isNullOrUndefined(layer.dataSource) && layer.dataSource['length'] > 0)) {
                text = '';
            }
            var dataLabelText = text;
            var projectionType = this.maps.projectionType;
            Iif (isPoint) {
                location = {
                    x: shapePoint[midIndex][index]['x'], y: shapePoint[midIndex][index]['y'],
                    rightMin: 0, rightMax: 0, leftMin: 0, leftMax: 0,
                    points: shapePoint[midIndex][index], topMax: 0, topMin: 0,
                    bottomMax: 0, bottomMin: 0, height: 0
                };
            }
            else {
                location = helper_1.findMidPointOfPolygon(shapePoint[midIndex], projectionType, layer.geometryType);
            }
            var firstLevelMapLocation = location;
            if (!ej2_base_1.isNullOrUndefined(text) && !ej2_base_1.isNullOrUndefined(location)) {
                if (zoomLabelsPosition && scaleZoomValue > 1 && !this.maps.zoomNotApplied && dataLabel.template === '') {
                    Eif (layerIndex > 0) {
                        for (var k = 0; k < this.maps.zoomLabelPositions.length; k++) {
                            if (this.maps.zoomLabelPositions[k]['dataLabelText'] === text) {
                                oldIndex = index;
                                index = k;
                                sublayerIndexLabel = true;
                                break;
                            }
                        }
                    }
                    locationX = location['x'];
                    locationY = location['y'];
                    location['x'] = ((location['x'] + zoomTransPoint['x']) * scale);
                    location['y'] = ((location['y'] + zoomTransPoint['y']) * scale);
                }
                location['y'] = (this.maps.projectionType === 'Mercator') || layer.geometryType === 'Normal' ? location['y'] : (-location['y']);
                if (!ej2_base_1.isNullOrUndefined(this.maps.format) && !isNaN(Number(text)) && !isNaN(parseFloat(text))) {
                    Eif (this.maps.useGroupingSeparator) {
                        text = helper_1.Internalize(this.maps, parseFloat(text));
                        Eif (!ej2_base_1.isNullOrUndefined(datasrcObj)) {
                            datasrcObj[labelpath] = text;
                        }
                    }
                }
                var eventargs_1 = {
                    name: constants_1.dataLabelRendering, maps: this.maps, cancel: false, border: { color: dataLabel.border.color,
                        width: dataLabel.border.width, opacity: dataLabel.border.opacity }, datalabel: dataLabel,
                    fill: dataLabel.fill, template: dataLabel.template, text: text, offsetX: 0, offsetY: 0
                };
                this.maps.trigger('dataLabelRendering', eventargs_1, function (labelArgs) {
                    Iif (eventargs_1.cancel) {
                        return;
                    }
                    var position = [];
                    var width = zoomLabelsPosition && scaleZoomValue > 1 && !_this.maps.zoomNotApplied
                        && _this.maps.zoomShapeCollection.length > index ? (_this.maps.dataLabelShape[index]) * scale :
                        (location['rightMax']['x'] - location['leftMax']['x']) * scale;
                    if (!ej2_base_1.isNullOrUndefined(_this.maps.dataLabelShape) && !_this.maps.isReset) {
                        shapeWidth = firstLevelMapLocation['rightMax']['x'] - firstLevelMapLocation['leftMax']['x'];
                        _this.maps.dataLabelShape.push(shapeWidth);
                    }
                    if (eventargs_1.text !== text && !eventargs_1.cancel) {
                        text = eventargs_1.text;
                    }
                    var textSize = helper_1.measureTextElement(text, style);
                    var trimmedLable = text;
                    var elementSize = textSize;
                    var startY = location['y'] - textSize['height'] / 2;
                    var endY = location['y'] + textSize['height'] / 2;
                    var start = ((location['y'] + transPoint['y']) * scale) - textSize['height'] / 2;
                    var end = ((location['y'] + transPoint['y']) * scale) + textSize['height'] / 2;
                    position = helper_1.filter(shapePoint[midIndex], startY, endY);
                    if (!isPoint && position.length > 5 && (shapeData['geometry']['type'] !== 'MultiPolygon') &&
                        (shapeData['type'] !== 'MultiPolygon')) {
                        var location1 = helper_1.findMidPointOfPolygon(position, projectionType, layer.geometryType);
                        Iif (zoomLabelsPosition && scaleZoomValue > 1 && !_this.maps.zoomNotApplied && eventargs_1.template === '') {
                            location1['x'] = ((_this.maps.zoomLabelPositions[index]['location']['x'] + zoomTransPoint['x']) * scale);
                            location1['y'] = ((_this.maps.zoomLabelPositions[index]['location']['y'] + zoomTransPoint['y']) * scale);
                        }
                        locationX = location1['x'];
                        location['x'] = location1['x'];
                        width = zoomLabelsPosition && scaleZoomValue > 1 && !_this.maps.zoomNotApplied
                            && _this.maps.zoomShapeCollection.length > index ? (_this.maps.dataLabelShape[index]) * scale :
                            ((location1['rightMax']['x'] - location1['leftMax']['x']) * scale) > 0 ?
                                ((location1['rightMax']['x'] - location1['leftMax']['x']) * scale) : width;
                    }
                    var xpositionEnds = ((location['x'] + transPoint['x']) * scale) + textSize['width'] / 2;
                    var xpositionStart = ((location['x'] + transPoint['x']) * scale) - textSize['width'] / 2;
                    _this.value[index] = { rightWidth: xpositionEnds, leftWidth: xpositionStart, heightTop: start, heightBottom: end };
                    var labelElement;
                    if (eventargs_1.template !== '') {
                        templateFn = helper_1.getTemplateFunction(eventargs_1.template, _this.maps);
                        var templateElement = templateFn ? templateFn(!ej2_base_1.isNullOrUndefined(datasrcObj) ?
                            datasrcObj : shapeData['properties'], _this.maps, eventargs_1.template, _this.maps.element.id + '_LabelTemplate', false) : document.createElement('div');
                        templateElement.innerHTML = !templateFn ? eventargs_1.template : '';
                        labelElement = helper_1.convertElementFromLabel(templateElement, labelId, !ej2_base_1.isNullOrUndefined(datasrcObj) ? datasrcObj : shapeData['properties']);
                        Iif (_this.maps.isTileMap) {
                            labelElement.style.left = (((location['x'] + transPoint['x']) * scale) - (textSize['width'] / 2)) + 'px';
                            labelElement.style.top = (((location['y'] + transPoint['y']) * scale) - textSize['height']) + 'px';
                        }
                        else {
                            labelElement.style.left = ((Math.abs(_this.maps.baseMapRectBounds['min']['x'] - location['x'])) * scale) + labelArgs.offsetX + 'px';
                            labelElement.style.top = ((Math.abs(_this.maps.baseMapRectBounds['min']['y'] - location['y'])) * scale) + labelArgs.offsetY + 'px';
                        }
                        labelTemplateElement.appendChild(labelElement);
                    }
                    else {
                        var smartLabelMode = !ej2_base_1.isNullOrUndefined(dataLabelSettings.smartLabelMode) ? dataLabelSettings.smartLabelMode.toString() : 'None';
                        if (smartLabelMode === 'Trim') {
                            var textType = typeof text === 'number' ? text.toString() : text;
                            trimmedLable = helper_1.textTrim(width, textType, style, null, true);
                            elementSize = helper_1.measureTextElement(trimmedLable, style);
                            options = new helper_1.TextOption(labelId, textLocation.x, textLocation.y, 'middle', trimmedLable, '', '');
                        }
                        if (smartLabelMode === 'None') {
                            options = new helper_1.TextOption(labelId, (textLocation.x), textLocation.y, 'middle', text, '', '');
                        }
                        if (smartLabelMode === 'Hide') {
                            text = (width >= textSize['width']) ? text : '';
                            options = new helper_1.TextOption(labelId, (textLocation.x), (textLocation.y), 'middle', text, '', '');
                        }
                        Eif (!ej2_base_1.isNullOrUndefined(options)) {
                            text = options['text'];
                        }
                        var intersectionAction = !ej2_base_1.isNullOrUndefined(dataLabelSettings.intersectionAction) ? dataLabelSettings.intersectionAction.toString() : 'None';
                        if (intersectionAction === 'Hide') {
                            for (var i = 0; i < intersect.length; i++) {
                                Eif (!ej2_base_1.isNullOrUndefined(intersect[i])) {
                                    if (!(_this.value[index]['leftWidth'] > intersect[i]['rightWidth']
                                        || _this.value[index]['rightWidth'] < intersect[i]['leftWidth']
                                        || _this.value[index]['heightTop'] > intersect[i]['heightBottom']
                                        || _this.value[index]['heightBottom'] < intersect[i]['heightTop'])) {
                                        text = '';
                                        break;
                                    }
                                }
                            }
                            intersect.push(_this.value[index]);
                            options = new helper_1.TextOption(labelId, textLocation.x, textLocation.y, 'middle', text, '', '');
                        }
                        var difference = void 0;
                        if (intersectionAction === 'Trim') {
                            for (var j = 0; j < intersect.length; j++) {
                                Eif (!ej2_base_1.isNullOrUndefined(intersect[j])) {
                                    if (intersect[j]['rightWidth'] < _this.value[index]['leftWidth']
                                        || intersect[j]['leftWidth'] > _this.value[index]['rightWidth']
                                        || intersect[j]['heightBottom'] < _this.value[index]['heightTop']
                                        || intersect[j]['heightTop'] > _this.value[index]['heightBottom']) {
                                        trimmedLable = text;
                                        difference = 0;
                                    }
                                    else {
                                        if (_this.value[index]['leftWidth'] > intersect[j]['leftWidth']) {
                                            width = intersect[j]['rightWidth'] - _this.value[index]['leftWidth'];
                                            difference = width - (_this.value[index]['rightWidth'] - _this.value[index]['leftWidth']);
                                            trimmedLable = helper_1.textTrim(difference, text, style, null, true);
                                            break;
                                        }
                                        Eif (_this.value[index]['leftWidth'] < intersect[j]['leftWidth']) {
                                            width = _this.value[index]['rightWidth'] - intersect[j]['leftWidth'];
                                            difference = Math.abs(width - (_this.value[index]['rightWidth'] - _this.value[index]['leftWidth']));
                                            trimmedLable = helper_1.textTrim(difference, text, style, null, true);
                                            break;
                                        }
                                    }
                                }
                            }
                            elementSize = helper_1.measureTextElement(trimmedLable, style);
                            intersect.push(_this.value[index]);
                            options = new helper_1.TextOption(labelId, textLocation.x, (textLocation.y), 'middle', trimmedLable, '', '');
                        }
                        if (intersectionAction === 'None') {
                            options = new helper_1.TextOption(labelId, (textLocation.x), (textLocation.y), 'middle', text, '', '');
                        }
                        if (trimmedLable.length > 1) {
                            var border = eventargs_1.border;
                            if (border['width'] > 1) {
                                var fill = eventargs_1.fill;
                                var opacity = dataLabelSettings.opacity;
                                var rx = dataLabelSettings.rx;
                                var ry = dataLabelSettings.ry;
                                var x = void 0;
                                var y = void 0;
                                var padding = 5;
                                Iif (zoomLabelsPosition && scaleZoomValue > 1 && !_this.maps.zoomNotApplied) {
                                    x = ((location['x'])) - textSize['width'] / 2;
                                    y = ((location['y'])) - textSize['height'] / 2 - padding;
                                }
                                else {
                                    x = ((location['x'] + transPoint['x']) * scale) - textSize['width'] / 2;
                                    y = ((location['y'] + transPoint['y']) * scale) - textSize['height'] / 2;
                                }
                                border.opacity = ej2_base_1.isNullOrUndefined(border.opacity) ? opacity : border.opacity;
                                var rectOptions = new helper_1.RectOption(_this.maps.element.id + '_LayerIndex_' + layerIndex + '_shapeIndex_' + index + '_rectIndex_' + index, fill, border, opacity, new helper_1.Rect((x + labelArgs.offsetX), (y + labelArgs.offsetY), textSize['width'], textSize['height']), rx, ry);
                                rect = _this.maps.renderer.drawRectangle(rectOptions);
                                rect.setAttribute('visibility', layer.dataLabelSettings.animationDuration > 0 || ej2_base_1.animationMode === 'Enable' ? 'hidden' : 'visibile');
                                group.appendChild(rect);
                            }
                        }
                        element = helper_1.renderTextElement(options, style, style.color || _this.maps.themeStyle.dataLabelFontColor, group);
                        element.setAttribute('aria-label', text);
                        element.setAttribute('role', 'region');
                        element.setAttribute('visibility', layer.dataLabelSettings.animationDuration > 0 || ej2_base_1.animationMode === 'Enable' ? 'hidden' : 'visibile');
                        if (zoomLabelsPosition && scaleZoomValue > 1 && !_this.maps.zoomNotApplied) {
                            element.setAttribute('transform', 'translate( ' + ((location['x'] + labelArgs.offsetX)) + ' '
                                + (((location['y'] + labelArgs.offsetY))) + ' )');
                            location['x'] = locationX;
                            location['y'] = locationY;
                        }
                        else {
                            element.setAttribute('transform', 'translate( ' + (((location['x'] + transPoint.x) * scale) + labelArgs.offsetX) + ' '
                                + ((((location['y'] + transPoint.y) * scale) + (elementSize.height / 2)) + labelArgs.offsetY) + ' )');
                        }
                        group.appendChild(element);
                    }
                    _this.dataLabelCollections.push({
                        location: { x: location['x'] + labelArgs.offsetX, y: location['y'] + labelArgs.offsetY },
                        element: ej2_base_1.isNullOrUndefined(labelElement) ? element : labelElement,
                        layerIndex: layerIndex,
                        shapeIndex: sublayerIndexLabel ? oldIndex : index,
                        labelIndex: sublayerIndexLabel ? oldIndex : index,
                        dataLabelText: dataLabelText
                    });
                    if (labelTemplateElement.childElementCount > 0 && !_this.maps.element.contains(labelTemplateElement)) {
                        document.getElementById(_this.maps.element.id + '_Secondary_Element').appendChild(labelTemplateElement);
                        _this.maps.renderReactTemplates();
                    }
                    if (layer.dataLabelSettings.animationDuration > 0 || ej2_base_1.animationMode === 'Enable') {
                        if (!ej2_base_1.isNullOrUndefined(element)) {
                            _this.datalabelAnimate(element, dataLabelSettings.animationDuration, style.opacity, false);
                            Eif (!ej2_base_1.isNullOrUndefined(rect)) {
                                _this.datalabelAnimate(rect, dataLabelSettings.animationDuration, dataLabelSettings.opacity, true);
                            }
                        }
                    }
                });
            }
        };
        DataLabel.prototype.datalabelAnimate = function (element, duration, opacity, isRect) {
            var height = 0;
            new ej2_base_1.Animation({}).animate(element, {
                duration: (duration === 0 && ej2_base_1.animationMode === 'Enable') ? 1000 : duration,
                delay: 0,
                progress: function (args) {
                    if (args.timeStamp > args.delay) {
                        height = ((args.timeStamp - args.delay) / args.duration);
                        element.setAttribute('style', 'user-select: none; visibility: visible;');
                        element.setAttribute(isRect ? 'fill-opacity' : 'opacity', (opacity * height).toString());
                    }
                },
                end: function () {
                    element.style.visibility = 'visible';
                    element.setAttribute(isRect ? 'fill-opacity' : 'opacity', opacity.toString());
                }
            });
        };
        DataLabel.prototype.getPoint = function (shapes, points) {
            if (shapes['type'] === 'MultiLineString') {
                Array.prototype.forEach.call(shapes, function (current) {
                    Array.prototype.forEach.call(current, function (shape) {
                        points.push(new helper_1.Point(shape['point']['x'], shape['point']['y']));
                    });
                });
            }
            else {
                Array.prototype.forEach.call(shapes, function (current) {
                    points.push(new helper_1.Point(current['point']['x'], current['point']['y']));
                });
            }
            return points;
        };
        DataLabel.prototype.getModuleName = function () {
            return 'DataLabel';
        };
        DataLabel.prototype.destroy = function () {
            this.dataLabelCollections = [];
            this.value = null;
            this.maps = null;
        };
        return DataLabel;
    }());
    exports.DataLabel = DataLabel;
});