@syncfusion/ej2-maps 24.2.9 → 25.1.35

package/src/maps/user-interaction/zoom.js

@@ -1,4 +1,4 @@
-import { Point, getElementByID, PathOption, Rect, convertGeoToPoint, CircleOption, convertTileLatLongToPoint } from '../utils/helper';
+import { Point, getElementByID, PathOption, Rect, convertGeoToPoint, CircleOption, convertTileLatLongToPoint, measureTextElement } from '../utils/helper';
 import { RectOption, createTooltip, calculateScale, getTouchCenter, getTouches, targetTouches } from '../utils/helper';
 import { MapLocation, zoomAnimate, smoothTranslate, measureText, textTrim, clusterTemplate, marker } from '../utils/helper';
 import { markerTemplate, removeElement, getElement, clusterSeparate, markerColorChoose, calculatePolygonPath } from '../utils/helper';
@@ -13,7 +13,7 @@ import { getValueFromObject } from '../utils/helper';
 var Zoom = /** @class */ (function () {
     function Zoom(maps) {
         /** @private */
-        this.isPanning = false;
+        this.isPanModeEnabled = false;
         /** @private */
         this.mouseEnter = false;
         /** @private */
@@ -34,9 +34,6 @@ var Zoom = /** @class */ (function () {
         this.startTouches = [];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         /** @private */
-        this.intersect = [];
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        /** @private */
         this.mouseDownLatLong = { x: 0, y: 0 };
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         /** @private */
@@ -173,6 +170,7 @@ var Zoom = /** @class */ (function () {
                     }, animationDuration);
                 }
             }
+            this.triggerZoomComplete(map, prevLevel, type);
         }
         this.maps.zoomNotApplied = false;
         if (this.maps.isDevice) {
@@ -261,12 +259,12 @@ var Zoom = /** @class */ (function () {
                     map.translatePoint = new Point(translatePointX, translatePointY);
                 }
                 map.scale = zoomCalculationFactor < this.maps.zoomSettings.maxZoom ? zoomCalculationFactor : this.maps.zoomSettings.maxZoom;
-                map.zoomTranslatePoint = map.translatePoint;
                 isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
                 if (isZoomCancelled) {
                     map.translatePoint = map.previousPoint;
                     map.scale = map.previousScale;
                 }
+                map.zoomTranslatePoint = map.translatePoint;
             }
             else {
                 zoomCalculationFactor = prevLevel + (Math.round(prevLevel + (((size.width / zoomRect.width) + (size.height / zoomRect.height)) / 2)));
@@ -296,6 +294,7 @@ var Zoom = /** @class */ (function () {
             }
         }
         this.isZoomFinal = this.isZoomSelection && Math.round(map.scale) === this.maps.zoomSettings.maxZoom;
+        this.triggerZoomComplete(map, prevLevel, '');
         this.removeToolbarOpacity(map.scale, this.maps.element.id + '_Zooming_');
     };
     Zoom.prototype.setInteraction = function (newInteraction) {
@@ -389,10 +388,41 @@ var Zoom = /** @class */ (function () {
         if (!isZoomCancelled) {
             this.applyTransform(map);
         }
+        this.triggerZoomComplete(map, prevLevel, '');
         if (Browser.isDevice) {
             this.removeToolbarOpacity(map.isTileMap ? Math.round(map.tileZoomLevel) : map.scale, map.element.id + '_Zooming_');
         }
     };
+    Zoom.prototype.triggerZoomComplete = function (map, prevLevel, type) {
+        if (map.zoomSettings.enable) {
+            var zoomArgs = void 0;
+            if (map.isTileMap) {
+                map.mapScaleValue = isNullOrUndefined(map.mapScaleValue) ? 1 : map.mapScaleValue;
+                map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
+                map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
+            }
+            var minMaxLatitudeLongitude = this.maps.getMinMaxLatitudeLongitude();
+            if (!map.isTileMap) {
+                zoomArgs = {
+                    cancel: false, name: 'zoomComplete', type: type, maps: map,
+                    tileTranslatePoint: {}, translatePoint: { previous: map.previousPoint, current: map.translatePoint },
+                    tileZoomLevel: {}, scale: { previous: map.previousScale, current: map.scale },
+                    minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
+                    minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
+                };
+            }
+            else {
+                zoomArgs = {
+                    cancel: false, name: 'zoomComplete', type: type, maps: map,
+                    tileTranslatePoint: { previous: map.tileTranslatePoint, current: map.tileTranslatePoint }, translatePoint: { previous: map.previousPoint, current: map.translatePoint },
+                    tileZoomLevel: { previous: prevLevel, current: map.tileZoomLevel }, scale: { previous: map.previousScale, current: map.scale },
+                    minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
+                    minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
+                };
+            }
+            this.maps.trigger('zoomComplete', zoomArgs);
+        }
+    };
     /**
      * @private
      */
@@ -446,7 +476,7 @@ var Zoom = /** @class */ (function () {
     /**
      * @private
      */
-    Zoom.prototype.applyTransform = function (maps, animate) {
+    Zoom.prototype.applyTransform = function (maps, animate, isPanning) {
         var _this = this;
         var layerIndex;
         this.templateCount = 0;
@@ -458,6 +488,7 @@ var Zoom = /** @class */ (function () {
         var scale = maps.scale;
         var x = maps.translatePoint.x;
         var y = maps.translatePoint.y;
+        var currentLabelIndex = 0;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var collection = [];
         maps.zoomShapeCollection = [];
@@ -504,7 +535,7 @@ var Zoom = /** @class */ (function () {
                             }
                         }
                         else if (currentEle.id.indexOf('_Markers_Group') > -1) {
-                            if ((!this_1.isPanning) && !isNullOrUndefined(currentEle.childNodes[0])) {
+                            if ((!this_1.isPanModeEnabled) && !isNullOrUndefined(currentEle.childNodes[0])) {
                                 this_1.markerTranslates(currentEle.childNodes[0], factor_1, x, y, scale, 'Marker', layerElement, animate);
                             }
                             currentEle = layerElement.childNodes[j];
@@ -528,7 +559,7 @@ var Zoom = /** @class */ (function () {
                                             }
                                         }
                                     }
-                                    if (((_this.currentLayer.animationDuration > 0 || animationMode === 'Enable') || ((maps.layersCollection[0].animationDuration > 0 || animationMode === 'Enable') && _this.currentLayer.type === 'SubLayer')) && !_this.isPanning) {
+                                    if (((_this.currentLayer.animationDuration > 0 || animationMode === 'Enable') || ((maps.layersCollection[0].animationDuration > 0 || animationMode === 'Enable') && _this.currentLayer.type === 'SubLayer')) && !_this.isPanModeEnabled) {
                                         if (maps.isTileMap) {
                                             var groupElement = document.querySelector('.GroupElement');
                                             if (groupElement && !(document.querySelector('.ClusterGroupElement')) && markerAnimation_1) {
@@ -541,7 +572,7 @@ var Zoom = /** @class */ (function () {
                                         }
                                     }
                                 });
-                                if (this_1.isPanning && maps.markerModule.sameMarkerData.length > 0) {
+                                if (this_1.isPanModeEnabled && maps.markerModule.sameMarkerData.length > 0) {
                                     clusterSeparate(maps.markerModule.sameMarkerData, maps, currentEle, true);
                                 }
                                 else if (maps.markerModule.sameMarkerData.length > 0) {
@@ -551,7 +582,7 @@ var Zoom = /** @class */ (function () {
                                     }
                                 }
                                 if (document.getElementById(maps.element.id + '_mapsTooltip') && maps.mapsTooltipModule.tooltipTargetID.indexOf('_MarkerIndex_')
-                                    && !this_1.isPanning) {
+                                    && !this_1.isPanModeEnabled) {
                                     var mapsTooltip = maps.mapsTooltipModule;
                                     var tooltipElement = currentEle.querySelector('#' + mapsTooltip.tooltipTargetID);
                                     if (!isNullOrUndefined(tooltipElement)) {
@@ -602,24 +633,25 @@ var Zoom = /** @class */ (function () {
                             }
                         }
                         else if (currentEle.id.indexOf('_dataLableIndex_Group') > -1 && !isNullOrUndefined(maps.layers[this_1.index])) {
-                            this_1.intersect = [];
                             maps.zoomLabelPositions = [];
                             maps.zoomLabelPositions = maps.dataLabelModule.dataLabelCollections;
-                            var labelAnimate = !maps.isTileMap && animate;
-                            for (var k = 0; k < currentEle.childElementCount; k++) {
+                            var labelAnimate_1 = !maps.isTileMap && animate;
+                            var intersect_1 = [];
+                            Array.prototype.forEach.call(currentEle.childNodes, function (childNode, k) {
                                 if (currentEle.childNodes[k]['id'].indexOf('_LabelIndex_') > -1) {
                                     var labelIndex = parseFloat(currentEle.childNodes[k]['id'].split('_LabelIndex_')[1].split('_')[0]);
-                                    this_1.zoomshapewidth = currentEle.childNodes[k].getBoundingClientRect();
-                                    maps.zoomShapeCollection.push(this_1.zoomshapewidth);
-                                    this_1.dataLabelTranslate(currentEle.childNodes[k], factor_1, x, y, scale, 'DataLabel', labelAnimate);
-                                    var dataLabel = maps.layers[this_1.index].dataLabelSettings;
+                                    var zoomShapeWidth = currentEle.childNodes[k].id;
+                                    maps.zoomShapeCollection.push(zoomShapeWidth);
+                                    _this.dataLabelTranslate(currentEle.childNodes[k], factor_1, x, y, scale, 'DataLabel', labelAnimate_1, currentLabelIndex, isPanning, intersect_1);
+                                    currentLabelIndex++;
+                                    var dataLabel = maps.layers[_this.index].dataLabelSettings;
                                     var border = dataLabel.border;
                                     if (k > 0 && border['width'] > 1) {
                                         if (currentEle.childNodes[k - 1]['id'].indexOf('_rectIndex_') > -1 && !isNullOrUndefined(maps.zoomLabelPositions[labelIndex])) {
                                             var labelX = ((maps.zoomLabelPositions[labelIndex]['location']['x'] + x) * scale);
                                             var labelY = ((maps.zoomLabelPositions[labelIndex]['location']['y'] + y) * scale);
                                             var zoomtext = currentEle.childNodes[k]['textContent'];
-                                            var style = maps.layers[this_1.index].dataLabelSettings.textStyle;
+                                            var style = maps.layers[_this.index].dataLabelSettings.textStyle;
                                             var zoomtextSize = measureText(zoomtext, style);
                                             var padding = 5;
                                             var rectElement = currentEle.childNodes[k - 1];
@@ -630,7 +662,7 @@ var Zoom = /** @class */ (function () {
                                         }
                                     }
                                 }
-                            }
+                            });
                         }
                     };
                     for (var j = 0; j < elementCount; j++) {
@@ -779,6 +811,7 @@ var Zoom = /** @class */ (function () {
      * @private
      */
     Zoom.prototype.processTemplate = function (x, y, scale, maps) {
+        var currentLabelIndex = 0;
         for (var i = 0; i < this.templateCount; i++) {
             var factor = maps.mapLayerPanel.calculateFactor(this.currentLayer);
             var markerTemplateElement = getElementByID(maps.element.id + '_LayerIndex_' +
@@ -795,7 +828,8 @@ var Zoom = /** @class */ (function () {
             }
             if ((!isNullOrUndefined(datalabelTemplateElemement)) && datalabelTemplateElemement.childElementCount > 0) {
                 for (var k = 0; k < datalabelTemplateElemement.childElementCount; k++) {
-                    this.dataLabelTranslate(datalabelTemplateElemement.childNodes[k], factor, x, y, scale, 'Template');
+                    this.dataLabelTranslate(datalabelTemplateElemement.childNodes[k], factor, x, y, scale, 'Template', false, currentLabelIndex);
+                    currentLabelIndex++;
                 }
             }
             if (!isNullOrUndefined(polygonElement)) {
@@ -806,7 +840,7 @@ var Zoom = /** @class */ (function () {
             }
         }
     };
-    Zoom.prototype.dataLabelTranslate = function (element, factor, x, y, scale, type, animate) {
+    Zoom.prototype.dataLabelTranslate = function (element, factor, x, y, scale, type, animate, currentLabelIndex, isPanning, intersect) {
         if (animate === void 0) { animate = false; }
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var labelCollection = this.maps.dataLabelModule.dataLabelCollections;
@@ -823,77 +857,80 @@ var Zoom = /** @class */ (function () {
             labelIndex = parseFloat(element.id.split('_LabelIndex_')[1].split('_')[0]);
         }
         var duration = this.currentLayer.animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.currentLayer.animationDuration;
-        for (var l = 0; l < labelCollection.length; l++) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            var label = labelCollection[l];
-            if (label['layerIndex'] === layerIndex && label['shapeIndex'] === shapeIndex
-                && label['labelIndex'] === labelIndex) {
-                var labelX = label['location']['x'];
-                var labelY = label['location']['y'];
-                if (type === 'Template') {
-                    var locationX = 0;
-                    var locationY = 0;
-                    if (this.maps.isTileMap) {
-                        zoomtext = label['dataLabelText'];
-                        zoomtextSize = measureText(zoomtext, style);
-                        locationX = ((labelX + x) * scale) - (zoomtextSize['width'] / 2);
-                        locationY = ((labelY + y) * scale) - (zoomtextSize['height']);
-                    }
-                    else {
-                        var layerEle = getElementByID(this.maps.element.id + '_Layer_Collections');
-                        labelX = ((Math.abs(this.maps.baseMapRectBounds['min']['x'] - labelX)) * scale);
-                        labelY = ((Math.abs(this.maps.baseMapRectBounds['min']['y'] - labelY)) * scale);
-                        var layerOffset = layerEle.getBoundingClientRect();
-                        var elementOffset = element.parentElement.getBoundingClientRect();
-                        locationX = ((labelX) + (layerOffset.left - elementOffset.left));
-                        locationY = ((labelY) + (layerOffset.top - elementOffset.top));
-                    }
-                    element.style.left = locationX + 'px';
-                    element.style.top = locationY + 'px';
-                }
-                else {
-                    labelX = ((labelX + x) * scale);
-                    labelY = ((labelY + y) * scale);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var label = labelCollection[currentLabelIndex];
+        var index = currentLabelIndex;
+        if (label['layerIndex'] === layerIndex && label['shapeIndex'] === shapeIndex
+            && label['labelIndex'] === labelIndex) {
+            var labelX = label['location']['x'];
+            var labelY = label['location']['y'];
+            if (type === 'Template') {
+                var locationX = 0;
+                var locationY = 0;
+                if (this.maps.isTileMap) {
                     zoomtext = label['dataLabelText'];
                     zoomtextSize = measureText(zoomtext, style);
-                    var start = labelY - zoomtextSize['height'] / 4;
-                    var end = labelY + zoomtextSize['height'] / 4;
+                    locationX = ((labelX + x) * scale) - (zoomtextSize['width'] / 2);
+                    locationY = ((labelY + y) * scale) - (zoomtextSize['height']);
+                }
+                else {
+                    var layerEle = getElementByID(this.maps.element.id + '_Layer_Collections');
+                    labelX = ((Math.abs(this.maps.baseMapRectBounds['min']['x'] - labelX)) * scale);
+                    labelY = ((Math.abs(this.maps.baseMapRectBounds['min']['y'] - labelY)) * scale);
+                    var layerOffset = layerEle.getBoundingClientRect();
+                    var elementOffset = element.parentElement.getBoundingClientRect();
+                    locationX = ((labelX) + (layerOffset.left - elementOffset.left));
+                    locationY = ((labelY) + (layerOffset.top - elementOffset.top));
+                }
+                element.style.left = locationX + 'px';
+                element.style.top = locationY + 'px';
+            }
+            else {
+                labelX = ((labelX + x) * scale);
+                labelY = ((labelY + y) * scale);
+                zoomtext = label['dataLabelText'];
+                if (!animate || duration === 0) {
+                    element.setAttribute('transform', 'translate( ' + labelX + ' ' + labelY + ' )');
+                }
+                if ((isNullOrUndefined(isPanning) || !isPanning) && (this.maps.layers[this.index].dataLabelSettings.smartLabelMode !== 'None' ||
+                    this.maps.layers[this.index].dataLabelSettings.intersectionAction !== 'None')) {
+                    zoomtextSize = measureTextElement(zoomtext, style);
+                    var start = labelY - zoomtextSize['height'] / 2;
+                    var end = labelY + zoomtextSize['height'] / 2;
                     var xpositionEnds = labelX + zoomtextSize['width'] / 2;
                     var xpositionStart = labelX - zoomtextSize['width'] / 2;
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     var textLocations = { rightWidth: xpositionEnds, leftWidth: xpositionStart, heightTop: start, heightBottom: end };
-                    if (!animate || duration === 0) {
-                        element.setAttribute('transform', 'translate( ' + labelX + ' ' + labelY + ' )');
-                    }
                     if (this.maps.layers[this.index].dataLabelSettings.smartLabelMode === 'Hide') {
                         if (scale > 1) {
-                            text = ((this.maps.dataLabelShape[l] * scale) >= zoomtextSize['width']) ? zoomtext : '';
+                            text = ((this.maps.dataLabelShape[index] * scale) >= zoomtextSize['width']) ? zoomtext : '';
                             element.textContent = text;
                         }
                         else {
-                            text = (this.maps.dataLabelShape[l] >= zoomtextSize['width']) ? zoomtext : '';
+                            text = (this.maps.dataLabelShape[index] >= zoomtextSize['width']) ? zoomtext : '';
                             element.textContent = text;
                         }
                     }
+                    var widthList = [];
                     if (this.maps.layers[this.index].dataLabelSettings.smartLabelMode === 'Trim') {
                         if (scale > 1) {
-                            zoomtrimLabel = textTrim((this.maps.dataLabelShape[l] * scale), zoomtext, style);
+                            zoomtrimLabel = textTrim((this.maps.dataLabelShape[index] * scale), zoomtext, style, zoomtextSize.width, true, widthList);
                             text = zoomtrimLabel;
                             element.textContent = text;
                         }
                         else {
-                            zoomtrimLabel = textTrim(this.maps.dataLabelShape[l], zoomtext, style);
+                            zoomtrimLabel = textTrim(this.maps.dataLabelShape[index], zoomtext, style, zoomtextSize.width, true, widthList);
                             text = zoomtrimLabel;
                             element.textContent = text;
                         }
                     }
                     if (this.maps.layers[this.index].dataLabelSettings.intersectionAction === 'Hide') {
-                        for (var m = 0; m < this.intersect.length; m++) {
-                            if (!isNullOrUndefined(this.intersect[m])) {
-                                if (textLocations['leftWidth'] > this.intersect[m]['rightWidth']
-                                    || textLocations['rightWidth'] < this.intersect[m]['leftWidth']
-                                    || textLocations['heightTop'] > this.intersect[m]['heightBottom']
-                                    || textLocations['heightBottom'] < this.intersect[m]['heightTop']) {
+                        for (var m = 0; m < intersect.length; m++) {
+                            if (!isNullOrUndefined(intersect[m])) {
+                                if (textLocations['leftWidth'] > intersect[m]['rightWidth']
+                                    || textLocations['rightWidth'] < intersect[m]['leftWidth']
+                                    || textLocations['heightTop'] > intersect[m]['heightBottom']
+                                    || textLocations['heightBottom'] < intersect[m]['heightTop']) {
                                     text = !isNullOrUndefined(text) ? text : zoomtext;
                                     element.textContent = text;
                                 }
@@ -904,50 +941,53 @@ var Zoom = /** @class */ (function () {
                                 }
                             }
                         }
-                        this.intersect.push(textLocations);
+                        intersect.push(textLocations);
                     }
                     if (this.maps.layers[this.index].dataLabelSettings.intersectionAction === 'Trim') {
-                        for (var j = 0; j < this.intersect.length; j++) {
-                            if (!isNullOrUndefined(this.intersect[j])) {
-                                if (textLocations['rightWidth'] < this.intersect[j]['leftWidth']
-                                    || textLocations['leftWidth'] > this.intersect[j]['rightWidth']
-                                    || textLocations['heightBottom'] < this.intersect[j]['heightTop']
-                                    || textLocations['heightTop'] > this.intersect[j]['heightBottom']) {
+                        for (var j = 0; j < intersect.length; j++) {
+                            if (!isNullOrUndefined(intersect[j])) {
+                                if (textLocations['rightWidth'] < intersect[j]['leftWidth']
+                                    || textLocations['leftWidth'] > intersect[j]['rightWidth']
+                                    || textLocations['heightBottom'] < intersect[j]['heightTop']
+                                    || textLocations['heightTop'] > intersect[j]['heightBottom']) {
                                     trimmedLable = !isNullOrUndefined(text) ? text : zoomtext;
                                     if (scale > 1) {
-                                        trimmedLable = textTrim((this.maps.dataLabelShape[l] * scale), trimmedLable, style);
+                                        var trimmedWidth = widthList.length > 0 ? widthList[0] : zoomtextSize.width;
+                                        trimmedLable = textTrim((this.maps.dataLabelShape[index] * scale), trimmedLable, style, trimmedWidth, true);
                                     }
                                     element.textContent = trimmedLable;
                                 }
                                 else {
-                                    if (textLocations['leftWidth'] > this.intersect[j]['leftWidth']) {
-                                        var width = this.intersect[j]['rightWidth'] - textLocations['leftWidth'];
+                                    if (textLocations['leftWidth'] > intersect[j]['leftWidth']) {
+                                        var width = intersect[j]['rightWidth'] - textLocations['leftWidth'];
                                         var difference = width - (textLocations['rightWidth'] - textLocations['leftWidth']);
                                         text = !isNullOrUndefined(text) ? text : zoomtext;
-                                        trimmedLable = textTrim(difference, text, style);
+                                        var trimmedWidth = widthList.length > 0 ? widthList[0] : zoomtextSize.width;
+                                        trimmedLable = textTrim(difference, text, style, trimmedWidth, true);
                                         element.textContent = trimmedLable;
                                         break;
                                     }
-                                    if (textLocations['leftWidth'] < this.intersect[j]['leftWidth']) {
-                                        var width = textLocations['rightWidth'] - this.intersect[j]['leftWidth'];
+                                    if (textLocations['leftWidth'] < intersect[j]['leftWidth']) {
+                                        var width = textLocations['rightWidth'] - intersect[j]['leftWidth'];
                                         var difference = Math.abs(width - (textLocations['rightWidth'] - textLocations['leftWidth']));
                                         text = !isNullOrUndefined(text) ? text : zoomtext;
-                                        trimmedLable = textTrim(difference, text, style);
+                                        var trimmedWidth = widthList.length > 0 ? widthList[0] : zoomtextSize.width;
+                                        trimmedLable = textTrim(difference, text, style, trimmedWidth, true);
                                         element.textContent = trimmedLable;
                                         break;
                                     }
                                 }
                             }
                         }
-                        this.intersect.push(textLocations);
+                        intersect.push(textLocations);
                         if (isNullOrUndefined(trimmedLable)) {
-                            trimmedLable = textTrim((this.maps.dataLabelShape[l] * scale), zoomtext, style);
+                            trimmedLable = textTrim((this.maps.dataLabelShape[index] * scale), zoomtext, style, zoomtextSize.width, true);
                             element.textContent = trimmedLable;
                         }
                     }
-                    if (animate || duration > 0) {
-                        smoothTranslate(element, 0, duration, new MapLocation(labelX, labelY));
-                    }
+                }
+                if (animate || duration > 0) {
+                    smoothTranslate(element, 0, duration, new MapLocation(labelX, labelY));
                 }
             }
         }
@@ -1093,15 +1133,15 @@ var Zoom = /** @class */ (function () {
             if (!panArgs.cancel) {
                 if (panningXDirection && panningYDirection) {
                     map.translatePoint = new Point(x, y);
-                    this.applyTransform(map);
+                    this.applyTransform(map, false, true);
                 }
                 else if (panningXDirection) {
                     map.translatePoint = new Point(x, map.translatePoint.y);
-                    this.applyTransform(map);
+                    this.applyTransform(map, false, true);
                 }
                 else if (panningYDirection) {
                     map.translatePoint = new Point(map.translatePoint.x, y);
-                    this.applyTransform(map);
+                    this.applyTransform(map, false, true);
                 }
             }
             this.maps.zoomNotApplied = false;
@@ -1132,7 +1172,7 @@ var Zoom = /** @class */ (function () {
             };
             map.trigger(pan, panArgs);
             map.mapLayerPanel.generateTiles(map.tileZoomLevel, map.tileTranslatePoint, 'Pan');
-            this.applyTransform(map);
+            this.applyTransform(map, false, true);
         }
         map.zoomTranslatePoint = map.translatePoint;
         this.mouseDownPoints = this.mouseMovePoints;
@@ -1257,6 +1297,7 @@ var Zoom = /** @class */ (function () {
             }
             this.maps.zoomNotApplied = false;
         }
+        this.triggerZoomComplete(map, prevLevel, type);
     };
     /**
      * @private
@@ -1548,7 +1589,7 @@ var Zoom = /** @class */ (function () {
     };
     Zoom.prototype.panningStyle = function (toolbar) {
         var svg = getElementByID(this.maps.element.id + '_svg');
-        if (toolbar === 'pan' || (this.isPanning && toolbar !== 'reset')) {
+        if (toolbar === 'pan' || (this.isPanModeEnabled && toolbar !== 'reset')) {
             svg.setAttribute('class', 'e-maps-panning');
         }
         else {
@@ -1895,8 +1936,8 @@ var Zoom = /** @class */ (function () {
             this.isTouch = true;
             touches = e.touches;
             target = e.target;
-            pageX = touches[0].clientX;
-            pageY = touches[0].clientY;
+            pageX = touches[0].pageX;
+            pageY = touches[0].pageY;
         }
         else {
             pageX = e.pageX;
@@ -1904,11 +1945,11 @@ var Zoom = /** @class */ (function () {
             target = e.target;
         }
         if (!this.maps.zoomSettings.enablePanning) {
-            this.isPan = this.isPanning = this.panColor !== this.selectionColor ? this.maps.zoomSettings.enablePanning
+            this.isPan = this.isPanModeEnabled = this.panColor !== this.selectionColor ? this.maps.zoomSettings.enablePanning
                 : this.zoomColor === this.selectionColor;
         }
         else {
-            this.isPan = this.isPanning = !this.isZoomSelection;
+            this.isPan = this.isPanModeEnabled = !this.isZoomSelection;
         }
         this.mouseDownLatLong = { x: pageX, y: pageY };
         var scale = this.maps.isTileMap ? Math.round(this.maps.tileZoomLevel) : Math.round(this.maps.mapScaleValue);
@@ -1936,8 +1977,8 @@ var Zoom = /** @class */ (function () {
             this.isTouch = true;
             target = e.target;
             touches = e.touches;
-            pageX = touches[0].clientX;
-            pageY = touches[0].clientY;
+            pageX = touches[0].pageX;
+            pageY = touches[0].pageY;
         }
         else {
             pageX = e.pageX;
@@ -1971,7 +2012,7 @@ var Zoom = /** @class */ (function () {
         this.mouseMovePoints = this.getMousePosition(pageX, pageY);
         var targetId = e.target['id'];
         var targetEle = e.target;
-        if (zoom.enable && this.isPanning && this.maps.markerDragId.indexOf('_MarkerIndex_') == -1 && ((Browser.isDevice && touches.length >= 1) || !Browser.isDevice)) {
+        if (zoom.enable && this.isPanModeEnabled && this.maps.markerDragId.indexOf('_MarkerIndex_') == -1 && ((Browser.isDevice && touches.length >= 1) || !Browser.isDevice)) {
             e.preventDefault();
             this.maps.element.style.cursor = 'pointer';
             this.mouseMoveLatLong = { x: pageX, y: pageY };
@@ -2002,13 +2043,66 @@ var Zoom = /** @class */ (function () {
         var isDragZoom;
         var map = this.maps;
         this.rectZoomingStart = false;
-        this.isPanning = false;
         this.isSingleClick = this.isSingleClick ? true : false;
         this.isTouch = false;
         this.touchStartList = [];
         this.touchMoveList = [];
         this.lastScale = 1;
         this.maps.element.style.cursor = 'auto';
+        // eslint-disable-next-line max-len
+        if (this.isPanModeEnabled && this.maps.zoomSettings.enablePanning && !isNullOrUndefined(this.maps.previousPoint) &&
+            (this.maps.translatePoint.x !== this.maps.previousPoint.x && this.maps.translatePoint.y !== this.maps.previousPoint.y)) {
+            var pageX = void 0;
+            var pageY = void 0;
+            var layerX = 0;
+            var layerY = 0;
+            var target = void 0;
+            var rect = this.maps.element.getBoundingClientRect();
+            var element = e.target;
+            if (e.type.indexOf('touch') !== -1) {
+                var touchArg = e;
+                layerX = pageX = touchArg.changedTouches[0].pageX;
+                pageY = touchArg.changedTouches[0].pageY;
+                layerY = pageY - (this.maps.isTileMap ? 10 : 0);
+                target = touchArg.target;
+                this.maps.mouseClickEvent = { x: pageX, y: pageY };
+            }
+            else {
+                pageX = e.pageX;
+                pageY = e.pageY;
+                layerX = e['layerX'];
+                layerY = e['layerY'] - (this.maps.isTileMap ? 10 : 0);
+                target = e.target;
+            }
+            var panCompleteEventArgs = void 0;
+            var minMaxLatitudeLongitude = this.maps.getMinMaxLatitudeLongitude();
+            if (!this.maps.isTileMap) {
+                this.maps.mouseClickEvent['x'] = this.maps.mouseDownEvent['x'];
+                this.maps.mouseClickEvent['y'] = this.maps.mouseDownEvent['y'];
+                var location_5 = this.maps.getClickLocation(element.id, pageX, pageY, element, pageX, pageY);
+                panCompleteEventArgs = {
+                    cancel: false, name: 'panComplete', maps: this.maps,
+                    tileTranslatePoint: {}, translatePoint: { previous: this.maps.previousPoint, current: this.maps.translatePoint },
+                    scale: this.maps.scale, tileZoomLevel: this.maps.tileZoomLevel, latitude: !isNullOrUndefined(location_5) ?
+                        location_5.latitude : 0, longitude: !isNullOrUndefined(location_5) ? location_5.longitude : 0,
+                    minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
+                    minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
+                };
+            }
+            else {
+                var location_6 = this.maps.getTileGeoLocation(layerX, layerY);
+                panCompleteEventArgs = {
+                    cancel: false, name: 'panComplete', maps: this.maps,
+                    tileTranslatePoint: { previous: this.maps.tileTranslatePoint, current: this.maps.tileTranslatePoint },
+                    translatePoint: { previous: this.maps.previousPoint, current: this.maps.translatePoint }, scale: this.maps.scale,
+                    tileZoomLevel: this.maps.tileZoomLevel, latitude: location_6.latitude, longitude: location_6.longitude,
+                    minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
+                    minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
+                };
+            }
+            this.maps.trigger('panComplete', panCompleteEventArgs);
+        }
+        this.isPanModeEnabled = false;
         if ((!isNullOrUndefined(this.distanceX) || !isNullOrUndefined(this.distanceY)) && (!isNullOrUndefined(this.currentLayer) && this.currentLayer.type === 'SubLayer')) {
             this.toAlignSublayer();
             this.distanceX = this.distanceY = null;
@@ -2026,7 +2120,7 @@ var Zoom = /** @class */ (function () {
      * @private
      */
     Zoom.prototype.mouseCancelHandler = function (e) {
-        this.isPanning = false;
+        this.isPanModeEnabled = false;
         this.isTouch = false;
         this.rectZoomingStart = false;
         var zoomRectElement = getElementByID(this.maps.element.id + '_Selection_Rect_Zooming');
@@ -2106,7 +2200,7 @@ var Zoom = /** @class */ (function () {
         this.maps.off(Browser.touchMoveEvent, this.mouseMoveHandler);
         this.maps.off(Browser.touchStartEvent, this.mouseDownHandler);
         this.maps.off(Browser.touchEndEvent, this.mouseUpHandler);
-        this.maps.off(this.cancelEvent, this.mouseCancelHandler);
+        EventHandler.remove(this.maps.element, this.cancelEvent, this.mouseCancelHandler);
     };
     /**
      * Get module name.
@@ -2135,14 +2229,12 @@ var Zoom = /** @class */ (function () {
         this.mouseDownPoints = null;
         this.mouseMovePoints = null;
         this.startTouches = [];
-        this.zoomshapewidth = null;
-        this.intersect = [];
         this.mouseDownLatLong = null;
         this.mouseMoveLatLong = null;
         this.removeEventListener();
-        //TODO: Calling the below code throws spec issue.
-        //this.maps = null;
+        this.layerCollectionEle = null;
         this.currentLayer = null;
+        this.maps = null;
     };
     return Zoom;
 }());

package/src/maps/utils/helper.d.ts

@@ -219,6 +219,8 @@ export declare class GeoLocation {
  * @private
  */
 export declare function measureText(text: string, font: FontModel): Size;
+/** @private */
+export declare function measureTextElement(text: string, font: FontModel): Size;
 /**
  * Internal use of text options
  *
@@ -484,6 +486,10 @@ export declare function markerShapeChoose(eventArgs: IMarkerRenderingEventArgs,
  * @private
  */
 export declare function clusterTemplate(currentLayer: LayerSettings, markerTemplate: HTMLElement | Element, maps: Maps, layerIndex: number, markerCollection: Element, layerElement: Element, check: boolean, zoomCheck: boolean): boolean;
+/** @private */
+export declare function markerClusterListHandler(maps: Maps, currentZoomFactor: number, layerIndex: number, index: number, indexCollection: number[]): void;
+/** @private */
+export declare function markerBoundsComparer(tempElement: Element, markerBounds: ClientRect, colloideBounds: ClientRect[], indexCollection: number[], p: number): void;
 /**
  *
  * @param {MarkerClusterData[]} sameMarkerData - Specifies the marker data
@@ -816,7 +822,7 @@ export declare function isCustomPath(layerData: any[]): boolean;
  * @returns {string} - Returns the string
  * @private
  */
-export declare function textTrim(maxWidth: number, text: string, font: FontModel): string;
+export declare function textTrim(maxWidth: number, text: string, font: FontModel, width?: number, isCanvasMeasure?: boolean, widthList?: number[]): string;
 /**
  * Method to calculate x position of title
  *