@syncfusion/ej2-maps 28.2.9 → 29.1.34

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

@@ -34,6 +34,12 @@ var Zoom = /** @class */ (function () {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.startTouches = [];
         /** @private */
+        this.isCancellation = false;
+        this.pinchTileZoomScale = 1;
+        this.tileZoomLevel = 1;
+        this.pinchZoomScale = 1;
+        this.isPinchZooming = false;
+        /** @private */
         this.mouseDownLatLong = { x: 0, y: 0 };
         /** @private */
         this.mouseMoveLatLong = { x: 0, y: 0 };
@@ -228,6 +234,22 @@ var Zoom = /** @class */ (function () {
         map.tileTranslatePoint.y = (currentLevel === 1) ? ((bounds.height / 2) - ((tileDefaultSize * 2) / 2) + (padding * 2)) :
             position.y - ((y * totalSize) / 100);
     };
+    Zoom.prototype.getTileTranslate = function (currentLevel, type) {
+        var map = this.maps;
+        var padding = type === 'ZoomOut' ? 10 : (type === 'Reset' && currentLevel > 1) ? 0 : 10;
+        var bounds = map.availableSize;
+        var totalSize = Math.pow(2, currentLevel) * 256;
+        var x = (bounds.width / 2) - (totalSize / 2);
+        var y = (bounds.height / 2) - (totalSize / 2);
+        var position = convertTileLatLongToPoint(new MapLocation(this.pinchStartLatLong['longitude'], this.pinchStartLatLong['latitude']), currentLevel, { x: x, y: y }, true);
+        x -= position.x - (bounds.width / 2);
+        y = y - (position.y - (bounds.height / 2)) + padding;
+        var scale = Math.pow(2, currentLevel - 1);
+        map.tileTranslatePoint.x = x;
+        map.tileTranslatePoint.y = y;
+        map.translatePoint.x = (x - (0.01 * this.tileZoomLevel)) / scale;
+        map.translatePoint.y = (y - (0.01 * this.tileZoomLevel)) / scale;
+    };
     /**
      * @returns {void}
      * @private
@@ -308,6 +330,11 @@ var Zoom = /** @class */ (function () {
             this.setInteraction(null);
         }
     };
+    Zoom.prototype.tilePinchingProcess = function (scale) {
+        this.tileZoomLevel = Math.round(scale);
+        this.getTileTranslate(this.tileZoomLevel);
+        this.maps.mapLayerPanel.generateTiles(this.tileZoomLevel, this.maps.tileTranslatePoint, null, null, null, true);
+    };
     /**
      * @param {PointerEvent} e - Specifies the vent in the map
      * @returns {void}
@@ -367,48 +394,112 @@ var Zoom = /** @class */ (function () {
             }
         }
         else {
-            var touchCenter = this.getTouchCenterPoint();
-            var distance = Math.sqrt(Math.pow((this.touchMoveList[0].pageX - this.touchMoveList[1].pageX), 2) + Math.pow((this.touchMoveList[0].pageY - this.touchMoveList[1].pageY), 2));
-            var factor = map.tileZoomLevel;
+            this.isPinchZooming = true;
+            var touchCenter = this.touchCenter;
+            var touchOnePoint = this.getMousePosition(this.touchMoveList[0].pageX, this.touchMoveList[0].pageY);
+            var touchTwoPoint = this.getMousePosition(this.touchMoveList[1].pageX, this.touchMoveList[1].pageY);
+            var distance = Math.sqrt(Math.pow((touchOnePoint.x - touchTwoPoint.x), 2) + Math.pow((touchOnePoint.y - touchTwoPoint.y), 2));
+            var pinchScale = distance / this.startDistance;
             if (!isNullOrUndefined(this.pinchDistance)) {
+                var pinchZoomFactor = Math.log2(pinchScale * (256 * Math.pow(2, prevLevel)) / 256);
+                pinchZoomFactor = Math.min(map.zoomSettings.maxZoom, Math.max(map.zoomSettings.minZoom, pinchZoomFactor));
+                var scaleFactor = this.pinchDistance > distance ? (prevLevel * pinchScale) : pinchZoomFactor;
+                var factor = pinchZoomFactor;
+                var isZoomOut = false;
                 if (this.pinchDistance > distance) {
-                    factor = factor - 1;
+                    factor = (scaleFactor % 1);
+                    isZoomOut = true;
                 }
                 else if (this.pinchDistance < distance) {
-                    factor = factor + 1;
-                }
-                factor = Math.min(this.maps.zoomSettings.maxZoom, Math.max(this.maps.zoomSettings.minZoom, factor));
-                if (factor !== map.tileZoomLevel) {
-                    this.pinchFactor = factor;
-                    map.previousScale = map.scale;
-                    map.tileZoomLevel = this.pinchFactor;
-                    map.scale = Math.pow(2, map.tileZoomLevel - 1);
-                    this.getTileTranslatePosition(prevLevel, this.pinchFactor, { x: touchCenter.x, y: touchCenter.y }, null);
-                    map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.scale)) / map.scale;
-                    map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.scale)) / map.scale;
-                    isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
-                    if (isZoomCancelled) {
-                        map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
-                        map.scale = map.previousScale;
-                        map.tileZoomLevel = prevLevel;
-                        map.zoomSettings.zoomFactor = map.previousScale;
+                    factor = (scaleFactor % 1) + 1;
+                }
+                var zoomFactor = Math.ceil(scaleFactor);
+                if (zoomFactor > map.zoomSettings.minZoom && zoomFactor <= map.zoomSettings.maxZoom) {
+                    var element = document.getElementById(map.element.id);
+                    if (element) {
+                        element.style.overflow = 'hidden';
                     }
-                    else {
-                        map.mapLayerPanel.generateTiles(factor, map.tileTranslatePoint);
+                    this.tileZoomLevel = zoomFactor;
+                    var transformOriginX = (touchCenter.x / (map.mapAreaRect.width - map.mapAreaRect.x)) * 100;
+                    var transformOriginY = (touchCenter.y / (map.mapAreaRect.height - map.mapAreaRect.y)) * 100;
+                    var tilesParent = document.getElementById(map.element.id + '_tile_parent');
+                    var copyTilesParent = document.getElementById(map.element.id + '_tiles');
+                    if (!copyTilesParent) {
+                        copyTilesParent = document.createElement('div');
+                        copyTilesParent.id = map.element.id + '_tiles';
+                        map.element.appendChild(copyTilesParent);
+                        this.copyStyles(tilesParent, copyTilesParent);
+                        copyTilesParent.style.zIndex = '0';
+                    }
+                    copyTilesParent.style.visibility = 'hidden';
+                    tilesParent.style.transformOrigin = transformOriginX + "% " + transformOriginY + "%";
+                    tilesParent.style.transform = "scale(" + factor + ")";
+                    var svgElement = document.getElementById(map.element.id + '_Tile_SVG_Parent');
+                    svgElement.style.transformOrigin = transformOriginX + "% " + transformOriginY + "%";
+                    svgElement.style.transform = "scale(" + factor + ")";
+                    if (!this.isCancellation && (0.2 >= scaleFactor % 1 && scaleFactor % 1 >= 0.1 && !isZoomOut) || (scaleFactor % 1 <= 0.9 && isZoomOut)) {
+                        var animateTile = document.getElementById(map.element.id + '_animates_tiles');
+                        if (!animateTile) {
+                            animateTile = document.createElement('div');
+                            animateTile.id = map.element.id + '_animates_tiles';
+                            animateTile.classList.add(this.tileZoomLevel.toString());
+                            copyTilesParent.appendChild(animateTile);
+                        }
+                        if (animateTile.childElementCount === 0) {
+                            this.pinchZoomScale = isZoomOut ? Math.floor(scaleFactor) : Math.ceil(scaleFactor);
+                            this.tilePinchingProcess(this.pinchZoomScale);
+                            this.isCancellation = true;
+                        }
+                    }
+                    if (this.isCancellation && (scaleFactor % 1 >= 0.99 && !isZoomOut) || (scaleFactor % 1 <= 0.1 && isZoomOut)) {
+                        if (tilesParent.style.transformOrigin !== '' && this.isCancellation) {
+                            tilesParent.style.transformOrigin = '';
+                            tilesParent.style.transform = '';
+                            svgElement.style.transformOrigin = '';
+                            svgElement.style.transform = '';
+                            this.pinchTileZoomScale = isZoomOut ? Math.floor(scaleFactor) : Math.ceil(scaleFactor);
+                            this.getTileTranslate(this.pinchTileZoomScale);
+                            var targetElement_1 = document.getElementById(map.element.id + '_animated_tiles');
+                            var sourceElement = document.getElementById(map.element.id + '_animates_tiles');
+                            while (targetElement_1.firstChild) {
+                                targetElement_1.removeChild(targetElement_1.firstChild);
+                            }
+                            Array.from(sourceElement.children).forEach(function (child) {
+                                targetElement_1.appendChild(child.cloneNode(true));
+                            });
+                            document.getElementById(map.element.id + '_animated_tiles')['className'] = this.pinchTileZoomScale.toFixed(0);
+                            if (sourceElement) {
+                                while (sourceElement.firstChild) {
+                                    sourceElement.removeChild(sourceElement.firstChild);
+                                }
+                            }
+                            this.isCancellation = false;
+                            map.mapScaleValue = this.pinchTileZoomScale;
+                            map.scale = Math.pow(2, this.pinchTileZoomScale - 1);
+                            this.applyTransform(map);
+                        }
                     }
                 }
             }
             this.pinchDistance = distance;
         }
-        map.mapScaleValue = zoomCalculationFactor;
-        if (!isZoomCancelled) {
-            this.applyTransform(map);
+        if (!map.isTileMap) {
+            map.mapScaleValue = zoomCalculationFactor;
+            if (!isZoomCancelled) {
+                this.applyTransform(map);
+            }
+            this.triggerZoomComplete(map, prevLevel, '');
         }
-        this.triggerZoomComplete(map, prevLevel, '');
         if (Browser.isDevice) {
             this.removeToolbarOpacity(map.isTileMap ? Math.round(map.tileZoomLevel) : map.scale, map.element.id + '_Zooming_');
         }
     };
+    Zoom.prototype.copyStyles = function (sourceElement, targetElement) {
+        var sourceStyles = window.getComputedStyle(sourceElement);
+        Array.from(sourceStyles).forEach(function (style) {
+            targetElement.style[style] = sourceStyles.getPropertyValue(style);
+        });
+    };
     Zoom.prototype.getTouchCenterPoint = function () {
         var touchList = [];
         for (var i = 0; i < this.touchMoveList.length; i++) {
@@ -472,6 +563,7 @@ var Zoom = /** @class */ (function () {
                 height: map.availableSize.height,
                 style: 'position: absolute;'
             });
+            rectSVGObject.style.position = 'absolute';
             var rectOption = new RectOption(map.element.id + '_ZoomRect', this.maps.themeStyle.rectangleZoomFillColor, border, this.maps.themeStyle.rectangleZoomFillOpacity, this.zoomingRect, 0, 0, '', '3');
             rectSVGObject.appendChild(map.renderer.drawRectangle(rectOption));
             getElementByID(map.element.id + '_Secondary_Element').appendChild(rectSVGObject);
@@ -549,17 +641,17 @@ var Zoom = /** @class */ (function () {
                             if (maps.isTileMap && (currentEle.id.indexOf('_line_Group') > -1)) {
                                 currentEle.remove();
                                 if (layerElement.children.length > 0 && layerElement.children[0]) {
-                                    layerElement.insertBefore(maps.navigationLineModule.renderNavigation(this_1.currentLayer, maps.tileZoomLevel, this_1.index), layerElement.children[1]);
+                                    layerElement.insertBefore(maps.navigationLineModule.renderNavigation(this_1.currentLayer, this_1.isPinchZooming ? this_1.pinchZoomScale : maps.tileZoomLevel, this_1.index), layerElement.children[1]);
                                 }
                                 else {
-                                    layerElement.appendChild(maps.navigationLineModule.renderNavigation(this_1.currentLayer, maps.tileZoomLevel, this_1.index));
+                                    layerElement.appendChild(maps.navigationLineModule.renderNavigation(this_1.currentLayer, this_1.isPinchZooming ? this_1.pinchZoomScale : maps.tileZoomLevel, this_1.index));
                                 }
                             }
                             else if (maps.isTileMap && (currentEle.id.indexOf('_Polygons_Group') > -1)) {
                                 if (this_1.currentLayer.polygonSettings.polygons.length > 0) {
                                     this_1.currentLayer.polygonSettings.polygons.map(function (polygonSettings, polygonIndex) {
                                         var markerData = polygonSettings.points;
-                                        var path = calculatePolygonPath(maps, maps.tileZoomLevel, _this.currentLayer, markerData);
+                                        var path = calculatePolygonPath(maps, _this.isPinchZooming ? _this.pinchZoomScale : maps.tileZoomLevel, _this.currentLayer, markerData);
                                         var element = document.getElementById(maps.element.id + '_LayerIndex_' + _this.index + '_PolygonIndex_' + polygonIndex);
                                         if (!isNullOrUndefined(element)) {
                                             element.setAttribute('d', path);
@@ -789,7 +881,7 @@ var Zoom = /** @class */ (function () {
                         if (!eventArgs.cancel && markerSettings.visible && !isNullOrUndefined(long) && !isNullOrUndefined(lati)) {
                             var markerID = _this.maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
                                 + markerIndex + '_dataIndex_' + dataIndex;
-                            var location_1 = (_this.maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(long, lati), _this.maps.tileZoomLevel, _this.maps.tileTranslatePoint, true) : convertGeoToPoint(lati, long, factor, currentLayers, _this.maps);
+                            var location_1 = (_this.maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(long, lati), _this.isPinchZooming ? _this.pinchZoomScale : _this.maps.tileZoomLevel, _this.maps.tileTranslatePoint, true) : convertGeoToPoint(lati, long, factor, currentLayers, _this.maps);
                             var transPoint = { x: x, y: y };
                             if (eventArgs.template && (!isNaN(location_1.x) && !isNaN(location_1.y))) {
                                 markerTemplateCounts++;
@@ -1077,7 +1169,7 @@ var Zoom = /** @class */ (function () {
                 !isNullOrUndefined(marker.dataSource[dataIndex]['latitude']) ? parseFloat(marker.dataSource[dataIndex]['latitude']) :
                     !isNullOrUndefined(marker.dataSource[dataIndex]['Latitude']) ? parseFloat(marker.dataSource[dataIndex]['Latitude']) : 0;
             var duration = this.currentLayer.animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.currentLayer.animationDuration;
-            var location_2 = (this.maps.isTileMap) ? convertTileLatLongToPoint(new Point(lng, lat), this.maps.tileZoomLevel, this.maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, layer, this.maps);
+            var location_2 = (this.maps.isTileMap) ? convertTileLatLongToPoint(new Point(lng, lat), this.isPinchZooming ? this.pinchZoomScale : this.maps.tileZoomLevel, this.maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, layer, this.maps);
             if (this.maps.isTileMap) {
                 if (type === 'Template') {
                     element.style.left = (location_2.x + marker.offset.x) + 'px';
@@ -2009,6 +2101,7 @@ var Zoom = /** @class */ (function () {
         var pageY;
         var target;
         var touches = null;
+        this.isPinchZooming = false;
         //eslint-disable-next-line @typescript-eslint/no-unused-vars
         var element = e.target;
         if (e.type === 'touchstart') {
@@ -2043,6 +2136,16 @@ var Zoom = /** @class */ (function () {
             this.pinchFactor = this.maps.scale;
             this.fingers = touches.length;
         }
+        if (this.maps.isTileMap && this.isTouch && e['touches'].length > 1) {
+            var startTouch = this.getMousePosition(e['touches'][0].pageX, e['touches'][0].pageY);
+            var endTouch = this.getMousePosition(e['touches'][1].pageX, e['touches'][1].pageY);
+            this.startDistance = Math.sqrt(Math.pow((startTouch.x - endTouch.x), 2) + Math.pow((startTouch.y - endTouch.y), 2));
+            this.touchCenter = { x: (startTouch.x + endTouch.x) / 2, y: (startTouch.y + endTouch.y) / 2 };
+            this.pinchStartLatLong = this.maps.pointToLatLong((startTouch.x + endTouch.x) / 2, (startTouch.y + endTouch.y) / 2);
+            this.isCancellation = false;
+            this.pinchTileZoomScale = this.maps.tileZoomLevel;
+            this.pinchDistance = null;
+        }
         this.isSingleClick = true;
     };
     /**
@@ -2080,7 +2183,7 @@ var Zoom = /** @class */ (function () {
             }
         }
         if (this.isTouch) {
-            if (this.maps.zoomSettings.pinchZooming && touches !== null) {
+            if (this.maps.zoomSettings.enable && this.maps.zoomSettings.pinchZooming && touches !== null) {
                 if (this.firstMove && touches.length === 2) {
                     this.rectZoomingStart = false;
                     this.updateInteraction();
@@ -2088,7 +2191,9 @@ var Zoom = /** @class */ (function () {
                 }
                 else if (touches.length === 2 && this.touchStartList.length === 2) {
                     this.touchMoveList = targetTouches(e);
-                    e.preventDefault();
+                    if (e.cancelable) {
+                        e.preventDefault();
+                    }
                     this.rectZoomingStart = false;
                     this.performPinchZooming(e);
                 }
@@ -2096,7 +2201,7 @@ var Zoom = /** @class */ (function () {
             }
         }
         this.mouseMovePoints = this.getMousePosition(pageX, pageY);
-        if (zoom.enable && this.isPanModeEnabled && this.maps.markerDragId.indexOf('_MarkerIndex_') === -1 && ((Browser.isDevice && touches.length >= 1) || !Browser.isDevice)) {
+        if (!this.isPinchZooming && (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 };
@@ -2108,7 +2213,7 @@ var Zoom = /** @class */ (function () {
                 this.mouseDownLatLong['y'] = pageY;
             }
         }
-        if (this.isTouch ? (touches !== null && touches.length === 1 && this.rectZoomingStart) : this.rectZoomingStart) {
+        if (!this.isPinchZooming && (this.isTouch ? (touches !== null && touches.length === 1 && this.rectZoomingStart) : this.rectZoomingStart)) {
             e.preventDefault();
             var scale = this.maps.isTileMap ? Math.round(this.maps.tileZoomLevel) : Math.round(this.maps.mapScaleValue);
             if (this.maps.zoomSettings.enableSelectionZooming && scale < this.maps.zoomSettings.maxZoom) {
@@ -2132,7 +2237,26 @@ var Zoom = /** @class */ (function () {
         this.touchStartList = [];
         this.touchMoveList = [];
         this.lastScale = 1;
+        this.isCancellation = false;
         this.maps.element.style.cursor = 'auto';
+        if (this.isPinchZooming && this.maps.isTileMap) {
+            this.isPinchZooming = false;
+            var tilesParent = document.getElementById(this.maps.element.id + '_tile_parent');
+            var svgElement = document.getElementById(this.maps.element.id + '_Tile_SVG_Parent');
+            tilesParent.style.transformOrigin = '';
+            tilesParent.style.transform = '';
+            svgElement.style.transformOrigin = '';
+            svgElement.style.transform = '';
+            this.maps.tileZoomLevel = this.maps.mapScaleValue = this.maps.zoomSettings.zoomFactor = this.pinchZoomScale;
+            this.maps.scale = Math.pow(2, this.pinchZoomScale - 1);
+            this.tileZoomLevel = Math.round(this.pinchZoomScale);
+            this.getTileTranslate(this.tileZoomLevel);
+            this.maps.mapLayerPanel.generateTiles(this.tileZoomLevel, this.maps.tileTranslatePoint);
+            this.applyTransform(this.maps);
+            if (document.getElementById(this.maps.element.id + '_animates_tiles')) {
+                document.getElementById(this.maps.element.id + '_animates_tiles').remove();
+            }
+        }
         if (this.isPanModeEnabled && this.maps.zoomSettings.enablePanning && !isNullOrUndefined(this.maps.previousPoint) &&
             (!this.maps.isTileMap ? (this.maps.translatePoint.x !== this.maps.previousPoint.x && this.maps.translatePoint.y !== this.maps.previousPoint.y)
                 : this.isPanningInProgress)) {
@@ -2332,10 +2456,13 @@ var Zoom = /** @class */ (function () {
         this.startTouches = [];
         this.mouseDownLatLong = null;
         this.mouseMoveLatLong = null;
-        this.removeEventListener();
         this.layerCollectionEle = null;
         this.currentLayer = null;
         this.pinchDistance = null;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (!this.maps.refreshing) {
+            this.maps = null;
+        }
     };
     return Zoom;
 }());

package/src/maps/utils/helper.js

@@ -1356,7 +1356,6 @@ export function mergeSeparateCluster(sameMarkerData, maps) {
     var markerIndex = sameMarkerData[0].markerIndex;
     var dataIndex = sameMarkerData[0].dataIndex;
     var markerId = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex;
-    var marker = maps.layers[layerIndex].markerSettings[markerIndex];
     var clusterId = markerId + '_dataIndex_' + dataIndex + '_cluster_' + clusterIndex;
     var clusterEle = maps.layers[layerIndex].markerClusterSettings.shape === 'Balloon' ? getElement(clusterId + '_Group') : getElement(clusterId);
     var clusterEleLabel = getElement(clusterId + '_datalabel_' + clusterIndex);