@syncfusion/ej2-maps 19.4.53 → 19.4.56-105067

package/dist/ts/maps/user-interaction/annotation.ts

@@ -0,0 +1,127 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable jsdoc/require-param */
+import { Maps, IAnnotationRenderingEventArgs, annotationRendering, Annotation } from '../index';
+import { createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { getTemplateFunction, Size, getElementOffset, getElementByID } from '../utils/helper';
+
+/**
+ * Represents the annotation elements for map.
+ */
+
+export class Annotations {
+
+    private map: Maps;
+    constructor(map: Maps) {
+        this.map = map;
+    }
+
+    public renderAnnotationElements(): void {
+        const secondaryID: string = this.map.element.id + '_Secondary_Element';
+        const annotationGroup: HTMLElement = createElement('div', { id: this.map.element.id + '_Annotations_Group' });
+        annotationGroup.style.position = 'absolute';
+        annotationGroup.style.top = '0px';
+        annotationGroup.style.left = '0px';
+        this.map.annotations.map((annotation: Annotation, index: number): void => {
+            if (annotation.content !== null) {
+                this.createAnnotationTemplate(annotationGroup, annotation, index);
+            }
+        });
+        if (annotationGroup.childElementCount > 0 && !(isNullOrUndefined(getElementByID(secondaryID)))) {
+            getElementByID(secondaryID).appendChild(annotationGroup);
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (this.map as any).renderReactTemplates();
+    }
+
+    // eslint-disable-next-line valid-jsdoc
+    /**
+     * To create annotation elements
+     */
+    public createAnnotationTemplate(parentElement: HTMLElement, annotation: Annotation, annotationIndex: number): void {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let left: number; let top: number; let templateFn: any;
+        const map: Maps = this.map; let templateElement: HTMLCollection;
+        const availSize: Size = map.availableSize;
+        const id: string = map.element.id + '_Annotation_' + annotationIndex;
+        const childElement: HTMLElement = createElement('div', {
+            id: map.element.id + '_Annotation_' + annotationIndex, styles: 'position: absolute; z-index:' + annotation.zIndex + ';'
+        });
+        const argsData: IAnnotationRenderingEventArgs = {
+            cancel: false, name: annotationRendering, content: annotation.content,
+            annotation: annotation
+        };
+        this.map.trigger(annotationRendering, argsData, (annotationArgs: IAnnotationRenderingEventArgs) => {
+            if (argsData.cancel) {
+                return;
+            }
+            templateFn = getTemplateFunction(argsData.content, this.map);
+            if (templateFn && templateFn(
+                this.map, this.map, argsData.content, this.map.element.id + '_ContentTemplate_' + annotationIndex).length) {
+                templateElement = Array.prototype.slice.call(templateFn(
+                    this.map, this.map, argsData.content, this.map.element.id + '_ContentTemplate_' + annotationIndex));
+                const length: number = templateElement.length;
+                for (let i: number = 0; i < length; i++) {
+                    childElement.appendChild(templateElement[i]);
+                }
+            } else {
+                childElement.appendChild(createElement('div', {
+                    innerHTML: argsData.content
+                }));
+            }
+        });
+
+        const offset: Size = getElementOffset(<HTMLElement>childElement.cloneNode(true), map.element);
+        const elementRect: ClientRect = map.element.getBoundingClientRect();
+        const bounds: ClientRect = map.svgObject.getBoundingClientRect();
+        left = Math.abs(bounds.left - elementRect.left);
+        top = Math.abs(bounds.top - elementRect.top);
+        const annotationXValue: number = (annotation.x.indexOf('%') > -1) ? (availSize.width / 100) * parseFloat(annotation.x) :
+            parseFloat(annotation.x);
+        const annotationYValue: number = (annotation.y.indexOf('%') > -1) ? (availSize.height / 100) * parseFloat(annotation.y) :
+            parseFloat(annotation.y);
+        left = (annotation.horizontalAlignment === 'None') ? (left + annotationXValue) : left;
+        top = (annotation.verticalAlignment === 'None') ? (top + annotationYValue) : top;
+        switch (annotation.verticalAlignment) {
+        case 'Near':
+            top = (top + annotationYValue);
+            break;
+        case 'Center':
+            top = (top + annotationYValue) + ((bounds.height / 2) - (offset.height / 2));
+            break;
+        case 'Far':
+            top = (top + bounds.height + annotationYValue) - offset.height;
+            break;
+        }
+        switch (annotation.horizontalAlignment) {
+        case 'Near':
+            left = (left + annotationXValue);
+            break;
+        case 'Center':
+            left = (left + annotationXValue) + ((bounds.width / 2) - (offset.width / 2));
+            break;
+        case 'Far':
+            left = (left + bounds.width + annotationXValue) - offset.width;
+            break;
+        }
+        childElement.style.left = left + 'px';
+        childElement.style.top = top + 'px';
+        parentElement.appendChild(childElement);
+    }
+
+    /*
+   * Get module name.
+   */
+    protected getModuleName(): string {
+        return 'Annotations';
+    }
+    /**
+     * To destroy the annotation.
+     *
+     * @returns {void}
+     * @private
+     */
+    public destroy(): void {
+        this.map = null;
+    }
+
+}

package/dist/ts/maps/user-interaction/highlight.ts

@@ -0,0 +1,233 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable jsdoc/require-param */
+/* eslint-disable max-len */
+import { Maps } from '../../index';
+import { HighlightSettingsModel, ISelectionEventArgs, itemHighlight } from '../index';
+import { Browser, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { getElementsByClassName, getElement, removeClass, createStyle, customizeStyle, getTargetElement } from '../utils/helper';
+import { BorderModel } from '../model/base-model';
+/**
+ * Highlight module class
+ */
+
+export class Highlight {
+    private maps: Maps;
+    /**
+     * @private
+     */
+    public highlightSettings: HighlightSettingsModel;
+    constructor(maps: Maps) {
+        this.maps = maps;
+        this.addEventListener();
+    }
+    /**
+     * To bind events for highlight module
+     *
+     * @returns {void}
+     */
+    private addEventListener(): void {
+        if (this.maps.isDestroyed) {
+            return;
+        }
+        this.maps.on(Browser.touchMoveEvent, this.mouseMove, this);
+        this.maps.on(Browser.touchStartEvent, this.mouseMove, this);
+    }
+    /**
+     * To unbind events for highlight module
+     *
+     * @returns {void}
+     */
+    private removeEventListener(): void {
+        if (this.maps.isDestroyed) {
+            return;
+        }
+        this.maps.off(Browser.touchMoveEvent, this.mouseMove);
+        this.maps.off(Browser.touchStartEvent, this.mouseMove);
+    }
+    // eslint-disable-next-line valid-jsdoc
+    /**
+     * Public method for highlight module
+     */
+    public addHighlight(layerIndex: number, name: string, enable: boolean): void {
+        const targetEle: Element = getTargetElement(layerIndex, name, enable, this.maps);
+        if (enable) {
+            this.mapHighlight(targetEle, null, null);
+        } else {
+            removeClass(targetEle);
+        }
+    }
+    private mouseMove(e: PointerEvent): void {
+        let targetEle: Element = <Element>e.target;
+        let layerIndex: number;
+        const isTouch: boolean = e.pointerType === 'touch' || e.pointerType === '2' || (e.type.indexOf('touch') > -1);
+        if ((targetEle.id.indexOf('LayerIndex') !== -1 || targetEle.id.indexOf('NavigationIndex') > -1) &&
+            targetEle.getAttribute('class') !== 'ShapeselectionMapStyle' && !isTouch &&
+            targetEle.getAttribute('class') !== 'MarkerselectionMapStyle' &&
+            targetEle.getAttribute('class') !== 'BubbleselectionMapStyle' &&
+            targetEle.getAttribute('class') !== 'navigationlineselectionMapStyle' &&
+            targetEle.getAttribute('class') !== 'LineselectionMapStyle') {
+            layerIndex = parseInt(targetEle.id.split('_LayerIndex_')[1].split('_')[0], 10);
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            let shapeData: any;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            let data: any;
+            let shapeIn: number;
+            let dataIndex: number;
+            if (targetEle.id.indexOf('shapeIndex') > -1) {
+                shapeIn = parseInt(targetEle.id.split('_shapeIndex_')[1].split('_')[0], 10);
+                shapeData = this.maps.layers[layerIndex].shapeData['features'] &&
+                !isNullOrUndefined(this.maps.layersCollection[layerIndex].layerData[shapeIn]) ?
+                this.maps.layersCollection[layerIndex].layerData[shapeIn]['property'] : null;
+                dataIndex = parseInt(targetEle.id.split('_dataIndex_')[1].split('_')[0], 10);
+                data = isNullOrUndefined(dataIndex) ? null : this.maps.layers[layerIndex].dataSource[dataIndex];
+                this.highlightSettings = this.maps.layers[layerIndex].highlightSettings;
+            } else if (targetEle.id.indexOf('BubbleIndex') > -1) {
+                const bubble: number = parseInt(targetEle.id.split('_BubbleIndex_')[1].split('_')[0], 10);
+                dataIndex = parseInt(targetEle.id.split('_dataIndex_')[1].split('_')[0], 10);
+                data = this.maps.layers[layerIndex].bubbleSettings[bubble].dataSource[dataIndex];
+                this.highlightSettings = this.maps.layers[layerIndex].bubbleSettings[bubble].highlightSettings;
+            } else if (targetEle.id.indexOf('MarkerIndex') > -1) {
+                const marker: number = parseInt(targetEle.id.split('_MarkerIndex_')[1].split('_')[0], 10);
+                dataIndex = parseInt(targetEle.id.split('_dataIndex_')[1].split('_')[0], 10);
+                data = this.maps.layers[layerIndex].markerSettings[marker].dataSource[dataIndex];
+                this.highlightSettings = this.maps.layers[layerIndex].markerSettings[marker].highlightSettings;
+            } else {
+                const index: number = parseInt(targetEle.id.split('_NavigationIndex_')[1].split('_')[0], 10);
+                layerIndex = parseInt(targetEle.id.split('_LayerIndex_')[1].split('_')[0], 10);
+                shapeData = null;
+                data = {
+                    latitude: this.maps.layers[layerIndex].navigationLineSettings[index].latitude,
+                    longitude: this.maps.layers[layerIndex].navigationLineSettings[index].longitude
+                };
+                this.highlightSettings = this.maps.layers[layerIndex].navigationLineSettings[index].highlightSettings;
+            }
+            if (this.highlightSettings.enable) {
+                this.handleHighlight(targetEle, layerIndex, data, shapeData);
+            } else {
+                const element: Element = document.getElementsByClassName('highlightMapStyle')[0];
+                if (!isNullOrUndefined(element)) {
+                    removeClass(element);
+                    if (element.id.indexOf('NavigationIndex') > -1) {
+                        const index: number = parseInt(element.id.split('_NavigationIndex_')[1].split('_')[0], 10);
+                        const layerIndex: number = parseInt(element.parentElement.id.split('_LayerIndex_')[1].split('_')[0], 10);
+                        element.setAttribute(
+                            'stroke-width', this.maps.layers[layerIndex].navigationLineSettings[index].width.toString());
+                        element.setAttribute('stroke', this.maps.layers[layerIndex].navigationLineSettings[index].color);
+                    }
+                }
+            }
+        } else if (getElementsByClassName('highlightMapStyle').length > 0) {
+            targetEle = <Element>getElementsByClassName('highlightMapStyle')[0];
+            if (targetEle.id.indexOf('NavigationIndex') > -1) {
+                const index: number = parseInt(targetEle.id.split('_NavigationIndex_')[1].split('_')[0], 10);
+                layerIndex = parseInt(targetEle.parentElement.id.split('_LayerIndex_')[1].split('_')[0], 10);
+                targetEle.setAttribute('stroke-width', this.maps.layers[layerIndex].navigationLineSettings[index].width.toString());
+                targetEle.setAttribute('stroke', this.maps.layers[layerIndex].navigationLineSettings[index].color);
+            }
+            removeClass(targetEle);
+            if (this.maps.legendSettings.visible && this.maps.legendModule) {
+                this.maps.legendModule.removeShapeHighlightCollection();
+            }
+        } else if ((targetEle.id.indexOf(this.maps.element.id + '_Legend_Shape_Index') !== -1 ||
+            targetEle.id.indexOf(this.maps.element.id + '_Legend_Index') !== -1) && this.maps.legendModule &&
+            this.maps.legendSettings.visible && targetEle.id.indexOf('_Text') === -1) {
+            this.maps.legendModule.legendHighLightAndSelection(targetEle, 'highlight');
+        } else {
+            if (this.maps.legendSettings.visible && this.maps.legendModule) {
+                this.maps.legendModule.removeLegendHighlightCollection();
+            }
+        }
+    }
+
+    /**
+     * @private
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public handleHighlight(targetElement: Element, layerIndex: number, data: any, shapeData: any): void {
+        if (this.maps.legendSettings.visible && targetElement.id.indexOf('_MarkerIndex_') === -1 && this.maps.legendModule
+            && this.maps.legendSettings.type === 'Layers') {
+            this.maps.legendModule.shapeHighLightAndSelection(
+                targetElement, data, this.highlightSettings, 'highlight', layerIndex);
+        }
+        const selectHighLight: boolean = targetElement.id.indexOf('shapeIndex') > -1 && (this.maps.legendSettings.visible && this.maps.legendModule) ?
+            this.maps.legendModule.shapeToggled : true;
+        if (selectHighLight) {
+            this.mapHighlight(targetElement, shapeData, data);
+        }
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    private mapHighlight(targetEle: Element, shapeData: any, data: any): void {
+        const layerIndex: number = parseInt(targetEle.id.split('_LayerIndex_')[1].split('_')[0], 10);
+        let isMarkerSelect: boolean = false;
+        if (targetEle.id.indexOf('MarkerIndex') > -1) {
+            const marker: number = parseInt(targetEle.id.split('_MarkerIndex_')[1].split('_')[0], 10);
+            isMarkerSelect = this.maps.layers[layerIndex].markerSettings[marker].highlightSettings.enable;
+        }
+        const border: BorderModel = {
+            color: (targetEle.parentElement.id.indexOf('LineString') === -1) ? this.highlightSettings.border.color : (this.highlightSettings.fill || this.highlightSettings.border.color),
+            width: (targetEle.parentElement.id.indexOf('LineString') === -1) ? (this.highlightSettings.border.width / (isMarkerSelect ? 1 : this.maps.scale)) : (this.highlightSettings.border.width / this.maps.scale),
+            opacity: this.highlightSettings.border.opacity
+        };
+        const eventArgs: ISelectionEventArgs = {
+            opacity: this.highlightSettings.opacity,
+            fill: (targetEle.parentElement.id.indexOf('LineString') === -1) ? (targetEle.id.indexOf('NavigationIndex') === -1 ? !isNullOrUndefined(this.highlightSettings.fill)
+                ? this.highlightSettings.fill : targetEle.getAttribute('fill') : 'none') : 'transparent',
+            border: border,
+            name: itemHighlight,
+            target: targetEle.id,
+            cancel: false,
+            shapeData: shapeData,
+            data: data,
+            maps: this.maps
+        };
+        this.maps.trigger(itemHighlight, eventArgs, () => {
+            eventArgs.border.opacity = isNullOrUndefined(this.highlightSettings.border.opacity) ? this.highlightSettings.opacity : this.highlightSettings.border.opacity;
+            this.highlightMap(targetEle, eventArgs);
+        });
+    }
+    private highlightMap(targetEle: Element, eventArgs: ISelectionEventArgs): void {
+        let parentElement: Element;
+        let children: HTMLCollection;
+        if (targetEle.getAttribute('class') === 'highlightMapStyle') {
+            return;
+        } else {
+            if (getElementsByClassName('highlightMapStyle').length > 0) {
+                const elem: Element = <Element>getElementsByClassName('highlightMapStyle')[0];
+                removeClass(elem);
+                if (elem.id.indexOf('NavigationIndex') > -1) {
+                    const index: number = parseInt(elem.id.split('_NavigationIndex_')[1].split('_')[0], 10);
+                    const layerIndex: number = parseInt(elem.parentElement.id.split('_LayerIndex_')[1].split('_')[0], 10);
+                    elem.setAttribute('stroke-width', this.maps.layers[layerIndex].navigationLineSettings[index].width.toString());
+                    elem.setAttribute('stroke', this.maps.layers[layerIndex].navigationLineSettings[index].color);
+                }
+            }
+            if (!getElement('highlightMap')) {
+                document.body.appendChild(createStyle('highlightMap', 'highlightMapStyle', eventArgs));
+            } else {
+                customizeStyle('highlightMap', 'highlightMapStyle', eventArgs);
+            }
+            targetEle.setAttribute('class', 'highlightMapStyle');
+        }
+    }
+    /**
+     * Get module name.
+     *
+     * @returns {string} - Specifies the module name
+     */
+    protected getModuleName(): string {
+        return 'Highlight';
+    }
+
+    /**
+     * To destroy the highlight.
+     *
+     * @returns {void}
+     * @private
+     */
+    public destroy(): void {
+        this.highlightSettings = null;
+        this.removeEventListener();
+        this.maps = null;
+    }
+}