@syncfusion/ej2-maps 24.2.9 → 25.1.37

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

@@ -45,6 +45,7 @@ var MapsTooltip = /** @class */ (function () {
             }
         }
         var option;
+        var polygonTooltipOption;
         var currentData = '';
         var targetId = target.id;
         var tooltipEle;
@@ -57,10 +58,30 @@ var MapsTooltip = /** @class */ (function () {
         var markerFill;
         var location = getMousePosition(pageX, pageY, this.maps.svgObject);
         this.tooltipTargetID = targetId;
+        var polygonTextStyle;
+        var polygonFill;
+        var polygon;
+        var latitude = null;
+        var longitude = null;
+        var latLongValue = this.maps.getClickLocation(targetId, e.pageX, e.pageY, target, e['layerX'], e['layerY'], 'tooltip');
+        if (!isNullOrUndefined(latLongValue)) {
+            latitude = latLongValue.latitude;
+            longitude = latLongValue.longitude;
+        }
+        var isPolygon = targetId.indexOf('_PolygonIndex_') > -1;
         var istooltipRender = (targetId.indexOf('_shapeIndex_') > -1)
-            || (targetId.indexOf('_MarkerIndex_') > -1) || (targetId.indexOf('_BubbleIndex_') > -1);
+            || (targetId.indexOf('_MarkerIndex_') > -1) || (targetId.indexOf('_BubbleIndex_') > -1)
+            || (targetId.indexOf('_PolygonIndex_') > -1);
         if (istooltipRender && this.maps.markerDragArgument === null) {
-            if (targetId.indexOf('_shapeIndex_') > -1) {
+            if (targetId.indexOf('_PolygonIndex_') > -1) {
+                var polygonIndex = parseInt(targetId.split('_PolygonIndex_')[1].split('_')[0], 10);
+                polygonTooltipOption = layer.polygonSettings.tooltipSettings;
+                polygon = layer.polygonSettings.polygons[polygonIndex];
+                polygonTextStyle = polygonTooltipOption.textStyle;
+                polygonFill = polygonTooltipOption.fill;
+                tooltipContent.push(polygon.tooltipText);
+            }
+            else if (targetId.indexOf('_shapeIndex_') > -1) {
                 option = layer.tooltipSettings;
                 var shape = parseInt(targetId.split('_shapeIndex_')[1].split('_')[0], 10);
                 if (isNullOrUndefined(layer.layerData) || isNullOrUndefined(layer.layerData[shape])) {
@@ -163,116 +184,135 @@ var MapsTooltip = /** @class */ (function () {
                 }
                 //location.y = this.template(option, location);
             }
-            if (document.getElementById(this.tooltipId)) {
-                tooltipEle = document.getElementById(this.tooltipId);
-            }
-            else {
-                tooltipEle = createElement('div', {
-                    id: this.maps.element.id + '_mapsTooltip',
-                    className: 'EJ2-maps-Tooltip'
-                });
-                if (isNullOrUndefined(option.template) || option.template === '' || this.maps.tooltipDisplayMode === 'MouseMove') {
-                    tooltipEle.style.cssText = 'position: absolute;pointer-events:none;';
+            if (isPolygon ? polygonTooltipOption.visible : option.visible) {
+                if (document.getElementById(this.tooltipId)) {
+                    tooltipEle = document.getElementById(this.tooltipId);
                 }
                 else {
-                    tooltipEle.style.position = 'absolute';
-                }
-                document.getElementById(this.maps.element.id + '_Secondary_Element').appendChild(tooltipEle);
-            }
-            if (typeof option.template !== 'function' && option.template !== null && Object.keys(typeof option.template === 'object' ? option.template : {}).length === 1) {
-                option.template = option.template[Object.keys(option.template)[0]];
-            }
-            templateData = this.setTooltipContent(option, templateData);
-            var tooltipTextStyle = {
-                color: option.textStyle.color, fontFamily: option.textStyle.fontFamily, fontStyle: option.textStyle.fontStyle,
-                fontWeight: option.textStyle.fontWeight, opacity: option.textStyle.opacity, size: option.textStyle.size
-            };
-            var tooltipOption = {
-                location: location, text: tooltipContent, data: templateData,
-                textStyle: tooltipTextStyle,
-                template: option.template
-            };
-            tooltipArgs = {
-                cancel: false, name: tooltipRender,
-                options: tooltipOption,
-                fill: option.fill,
-                maps: this.maps,
-                element: target, eventArgs: e, content: !isNullOrUndefined(currentData) ? currentData.toString() : ''
-            };
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            this.maps.trigger(tooltipRender, tooltipArgs, function (args) {
-                if (!tooltipArgs.cancel && option.visible && !isNullOrUndefined(currentData) &&
-                    (targetId.indexOf('_cluster_') === -1 && targetId.indexOf('_dataLabel_') === -1)) {
-                    _this.maps['isProtectedOnChange'] = true;
-                    tooltipArgs.options['textStyle']['size'] = tooltipArgs.options['textStyle']['size']
-                        || _this.maps.themeStyle.fontSize;
-                    tooltipArgs.options['textStyle']['color'] = tooltipArgs.options['textStyle']['color']
-                        || _this.maps.themeStyle.tooltipFontColor;
-                    tooltipArgs.options['textStyle']['fontFamily'] = tooltipArgs.options['textStyle']['fontFamily']
-                        || _this.maps.themeStyle.fontFamily;
-                    tooltipArgs.options['textStyle']['fontWeight'] = tooltipArgs.options['textStyle']['fontWeight']
-                        || _this.maps.themeStyle.fontWeight;
-                    tooltipArgs.options['textStyle']['opacity'] = tooltipArgs.options['textStyle']['opacity']
-                        || _this.maps.themeStyle.tooltipTextOpacity;
-                    if (tooltipArgs.cancel) {
-                        _this.svgTooltip = new Tooltip({
-                            enable: true,
-                            header: '',
-                            data: option['data'],
-                            template: option['template'],
-                            content: tooltipArgs.content.toString() !== currentData.toString() ? [tooltipArgs.content.toString()] :
-                                [currentData.toString()],
-                            shapes: [],
-                            location: option['location'],
-                            palette: [markerFill],
-                            areaBounds: _this.maps.mapAreaRect,
-                            textStyle: option['textStyle'],
-                            availableSize: _this.maps.availableSize,
-                            fill: option.fill || _this.maps.themeStyle.tooltipFillColor,
-                            enableShadow: true
-                        });
+                    tooltipEle = createElement('div', {
+                        id: this.maps.element.id + '_mapsTooltip',
+                        className: 'EJ2-maps-Tooltip'
+                    });
+                    if (isNullOrUndefined(isPolygon ? polygon.tooltipTemplate : option.template) || (isPolygon ? polygon.tooltipTemplate === '' : option.template === '') || this.maps.tooltipDisplayMode === 'MouseMove') {
+                        tooltipEle.style.cssText = 'position: absolute;pointer-events:none;';
                     }
                     else {
-                        _this.svgTooltip = new Tooltip({
-                            enable: true,
-                            header: '',
-                            data: tooltipArgs.options['data'],
-                            template: tooltipArgs.options['template'],
-                            content: tooltipArgs.content.toString() !== currentData.toString() ? [tooltipArgs.content.toString()] :
-                                [currentData.toString()],
-                            shapes: [],
-                            location: tooltipArgs.options['location'],
-                            palette: [markerFill],
-                            areaBounds: _this.maps.mapAreaRect,
-                            textStyle: tooltipArgs.options['textStyle'],
-                            availableSize: _this.maps.availableSize,
-                            fill: tooltipArgs.fill || _this.maps.themeStyle.tooltipFillColor,
-                            enableShadow: true
-                        });
+                        tooltipEle.style.position = 'absolute';
                     }
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    if (_this.maps.isVue || _this.maps.isVue3) {
-                        _this.svgTooltip.controlInstance = _this.maps;
+                    document.getElementById(this.maps.element.id + '_Secondary_Element').appendChild(tooltipEle);
+                }
+                if (typeof (isPolygon ? polygon.tooltipTemplate !== 'function' : option.template !== 'function') && (isPolygon ? polygon.tooltipTemplate !== null : option.template !== null) && Object.keys(typeof (isPolygon ? polygon.tooltipTemplate === 'object' : option.template === 'object') ? (isPolygon ? polygon.tooltipTemplate : option.template) : {}).length === 1) {
+                    if (isPolygon) {
+                        polygon.tooltipTemplate = polygon.tooltipTemplate[Object.keys(polygon.tooltipTemplate)[0]];
+                    }
+                    else {
+                        option.template = option.template[Object.keys(option.template)[0]];
                     }
-                    _this.svgTooltip.opacity = _this.maps.themeStyle.tooltipFillOpacity || _this.svgTooltip.opacity;
-                    _this.svgTooltip.appendTo(tooltipEle);
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    _this.maps.renderReactTemplates();
+                }
+                templateData = this.setTooltipContent(option, templateData);
+                var tooltipTextStyle = {
+                    // eslint-disable-next-line max-len
+                    color: isPolygon ? polygonTextStyle.color : option.textStyle.color, fontFamily: isPolygon ? polygonTextStyle.fontFamily : option.textStyle.fontFamily, fontStyle: isPolygon ? polygonTextStyle.fontStyle : option.textStyle.fontStyle,
+                    // eslint-disable-next-line max-len
+                    fontWeight: isPolygon ? polygonTextStyle.fontWeight : option.textStyle.fontWeight, opacity: isPolygon ? polygonTextStyle.opacity : option.textStyle.opacity, size: isPolygon ? polygonTextStyle.size : option.textStyle.size
+                };
+                var tooltipOption = {
+                    location: location, text: tooltipContent, data: templateData,
+                    textStyle: tooltipTextStyle,
+                    template: isPolygon ? polygon.tooltipTemplate : option.template
+                };
+                tooltipArgs = {
+                    cancel: false, name: tooltipRender,
+                    options: tooltipOption,
+                    fill: isPolygon ? polygonFill : option.fill,
+                    maps: this.maps, latitude: latitude, longitude: longitude,
+                    element: target, eventArgs: e, content: isPolygon ? polygon.tooltipText : !isNullOrUndefined(currentData) ? currentData.toString() : ''
+                };
+                if (tooltipArgs.content !== '' || tooltipArgs.options['template'] !== '') {
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    this.maps.trigger(tooltipRender, tooltipArgs, function (args) {
+                        if (!tooltipArgs.cancel && !isNullOrUndefined(currentData) &&
+                            (targetId.indexOf('_cluster_') === -1 && targetId.indexOf('_dataLabel_') === -1)) {
+                            _this.maps['isProtectedOnChange'] = true;
+                            tooltipArgs.options['textStyle']['size'] = tooltipArgs.options['textStyle']['size']
+                                || _this.maps.themeStyle.fontSize;
+                            tooltipArgs.options['textStyle']['color'] = tooltipArgs.options['textStyle']['color']
+                                || _this.maps.themeStyle.tooltipFontColor;
+                            tooltipArgs.options['textStyle']['fontFamily'] = tooltipArgs.options['textStyle']['fontFamily']
+                                || _this.maps.themeStyle.fontFamily;
+                            tooltipArgs.options['textStyle']['fontWeight'] = tooltipArgs.options['textStyle']['fontWeight']
+                                || _this.maps.themeStyle.fontWeight;
+                            tooltipArgs.options['textStyle']['opacity'] = tooltipArgs.options['textStyle']['opacity']
+                                || _this.maps.themeStyle.tooltipTextOpacity;
+                            if (tooltipArgs.cancel) {
+                                _this.svgTooltip = new Tooltip({
+                                    enable: true,
+                                    header: '',
+                                    data: option['data'],
+                                    template: option['template'],
+                                    content: tooltipArgs.content.toString() !== currentData.toString() ? [tooltipArgs.content.toString()] :
+                                        [currentData.toString()],
+                                    shapes: [],
+                                    location: option['location'],
+                                    palette: [markerFill],
+                                    areaBounds: _this.maps.mapAreaRect,
+                                    textStyle: option['textStyle'],
+                                    availableSize: _this.maps.availableSize,
+                                    fill: option.fill || _this.maps.themeStyle.tooltipFillColor,
+                                    enableShadow: true,
+                                    border: isPolygon ? polygonTooltipOption.border : option.border
+                                });
+                            }
+                            else {
+                                _this.svgTooltip = new Tooltip({
+                                    enable: true,
+                                    header: '',
+                                    data: tooltipArgs.options['data'],
+                                    template: tooltipArgs.options['template'],
+                                    content: tooltipArgs.content.toString() !== currentData.toString() ? [tooltipArgs.content.toString()] :
+                                        [currentData.toString()],
+                                    shapes: [],
+                                    location: tooltipArgs.options['location'],
+                                    palette: [markerFill],
+                                    areaBounds: _this.maps.mapAreaRect,
+                                    textStyle: tooltipArgs.options['textStyle'],
+                                    availableSize: _this.maps.availableSize,
+                                    fill: tooltipArgs.fill || _this.maps.themeStyle.tooltipFillColor,
+                                    enableShadow: true,
+                                    border: isPolygon ? polygonTooltipOption.border : option.border
+                                });
+                            }
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            if (_this.maps.isVue || _this.maps.isVue3) {
+                                _this.svgTooltip.controlInstance = _this.maps;
+                            }
+                            _this.svgTooltip.opacity = _this.maps.themeStyle.tooltipFillOpacity || _this.svgTooltip.opacity;
+                            _this.svgTooltip.appendTo(tooltipEle);
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            _this.maps.renderReactTemplates();
+                        }
+                        else {
+                            _this.clearTooltip(e.target);
+                        }
+                    });
                 }
                 else {
-                    _this.clearTooltip(e.target);
+                    this.clearTooltip(e.target);
+                }
+                if (this.svgTooltip) {
+                    this.maps.trigger('tooltipRenderComplete', {
+                        cancel: false, name: 'tooltipRenderComplete', maps: this.maps, options: tooltipOption,
+                        element: this.svgTooltip.element
+                    });
+                }
+                if (this.svgTooltip) {
+                    this.maps.trigger('tooltipRenderComplete', {
+                        cancel: false, name: 'tooltipRenderComplete', maps: this.maps, options: tooltipOption, element: this.svgTooltip.element
+                    });
+                }
+                else {
+                    this.clearTooltip(e.target);
                 }
-            });
-            if (this.svgTooltip) {
-                this.maps.trigger('tooltipRenderComplete', {
-                    cancel: false, name: 'tooltipRenderComplete', maps: this.maps, options: tooltipOption,
-                    element: this.svgTooltip.element
-                });
-            }
-            if (this.svgTooltip) {
-                this.maps.trigger('tooltipRenderComplete', {
-                    cancel: false, name: 'tooltipRenderComplete', maps: this.maps, options: tooltipOption, element: this.svgTooltip.element
-                });
             }
             else {
                 this.clearTooltip(e.target);
@@ -323,10 +363,12 @@ var MapsTooltip = /** @class */ (function () {
      * @private
      */
     MapsTooltip.prototype.mouseUpHandler = function (e) {
-        this.renderTooltip(e);
-        if (this.maps.tooltipDisplayMode === 'MouseMove') {
-            clearTimeout(this.clearTimeout);
-            this.clearTimeout = setTimeout(this.removeTooltip.bind(this), 2000);
+        if (!isNullOrUndefined(this.maps)) {
+            this.renderTooltip(e);
+            if (this.maps.tooltipDisplayMode === 'MouseMove') {
+                clearTimeout(this.clearTimeout);
+                this.clearTimeout = setTimeout(this.removeTooltip.bind(this), 2000);
+            }
         }
     };
     /**
@@ -380,7 +422,7 @@ var MapsTooltip = /** @class */ (function () {
                 return;
             }
             if (this.maps.tooltipDisplayMode === 'DoubleClick') {
-                this.maps.off('dblclick', this.removeTooltip);
+                this.maps.off('dblclick', this.renderTooltip);
             }
             else if (this.maps.tooltipDisplayMode === 'Click') {
                 this.maps.off(Browser.touchEndEvent, this.mouseUpHandler);
@@ -411,8 +453,7 @@ var MapsTooltip = /** @class */ (function () {
             this.svgTooltip.destroy();
         }
         this.svgTooltip = null;
-        //TODO: Calling the below code throws spec issue.
-        //this.maps = null;
+        this.maps = null;
     };
     return MapsTooltip;
 }());

package/src/maps/user-interaction/zoom.d.ts

@@ -18,7 +18,7 @@ export declare class Zoom {
     private zoomElements;
     private panElements;
     /** @private */
-    isPanning: boolean;
+    isPanModeEnabled: boolean;
     /** @private */
     mouseEnter: boolean;
     /** @private */
@@ -64,10 +64,7 @@ export declare class Zoom {
     private lastScale;
     private pinchFactor;
     private startTouches;
-    private zoomshapewidth;
     private index;
-    /** @private */
-    intersect: any[];
     private templateCount;
     private distanceX;
     private distanceY;
@@ -103,6 +100,7 @@ export declare class Zoom {
      * @private
      */
     performPinchZooming(e: PointerEvent | TouchEvent): void;
+    private triggerZoomComplete;
     /**
      * @private
      */
@@ -121,7 +119,7 @@ export declare class Zoom {
     /**
      * @private
      */
-    applyTransform(maps: Maps, animate?: boolean): void;
+    applyTransform(maps: Maps, animate?: boolean, isPanning?: boolean): void;
     private markerTranslates;
     /**
      * To translate the layer template elements