@syncfusion/ej2-maps
Version:
The Maps component is used to visualize the geographical data and represent the statistical data of a particular geographical area on earth with user interactivity, and provides various customizing options
803 lines (802 loc) • 156 kB
JavaScript
import { click, legendRendering } from '../index';
import { Rect, measureText, PathOption, textTrim, drawBalloon, removeClass, querySelector, maintainStyleClass, getValueFromObject, getTemplateFunction } from '../utils/helper';
import { RectOption, Size, TextOption, Point, renderTextElement, drawSymbol, checkPropertyPath, getElement } from '../utils/helper';
import { isNullOrUndefined, Browser, EventHandler, remove, extend } from '@syncfusion/ej2-base';
import { Theme } from '../model/theme';
/**
* Legend module is used to render legend for the maps
*/
var Legend = /** @class */ (function () {
function Legend(maps) {
/**
* @private
*/
this.legendBorderRect = new Rect(0, 0, 0, 0);
/**
* @private
*/
this.initialMapAreaRect = new Rect(0, 0, 0, 0);
/**
* @private
*/
this.legendTotalRect = new Rect(0, 0, 0, 0);
/**
* @private
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.totalPages = [];
this.page = 0;
/**
* @private
*/
this.currentPage = 0;
this.legendItemRect = new Rect(0, 0, 0, 0);
this.heightIncrement = 0;
this.widthIncrement = 0;
this.textMaxWidth = 0;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.shapeHighlightCollection = [];
/**
* @private
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.legendHighlightCollection = [];
/**
* @private
*/
this.shapePreviousColor = [];
/**
* @private
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.selectedNonLegendShapes = [];
/**
* @private
*/
this.shapeToggled = true;
/**
* @private
*/
this.legendElement = null;
this.maps = maps;
this.addEventListener();
}
/**
* To calculate legend bounds and draw the legend shape and text.
*
* @returns {void}
* @private
*/
Legend.prototype.renderLegend = function () {
this.legendRenderingCollections = [];
this.legendCollection = [];
this.totalPages = [];
this.widthIncrement = 0;
this.heightIncrement = 0;
this.defsElement = this.maps.renderer.createDefs();
this.maps.svgObject.appendChild(this.defsElement);
this.initialMapAreaRect = this.maps.mapAreaRect;
this.calculateLegendBounds();
this.drawLegend();
};
Legend.prototype.calculateLegendBounds = function () {
var _this = this;
var map = this.maps;
var legend = map.legendSettings;
this.legendCollection = [];
var spacing = 10;
var leftPadding = 10;
var topPadding = map.mapAreaRect.y;
this.legendRenderingCollections = [];
Array.prototype.forEach.call(map.layersCollection, function (layer, layerIndex) {
if (!isNullOrUndefined(layer.shapeData)) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var layerData = layer.shapeData['features'];
var dataPath = layer.shapeDataPath;
var propertyPath = layer.shapePropertyPath;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var dataSource = layer.dataSource;
var colorValuePath = void 0;
var colorMapping = void 0;
if (legend.type === 'Layers' && layer.visible) {
colorValuePath = layer.shapeSettings.colorValuePath;
colorMapping = layer.shapeSettings.colorMapping;
_this.getLegends(layerIndex, layerData, colorMapping, dataSource, dataPath, colorValuePath, propertyPath);
}
else if (legend.type === 'Bubbles') {
for (var _i = 0, _a = layer.bubbleSettings; _i < _a.length; _i++) {
var bubble = _a[_i];
if (bubble.visible) {
colorValuePath = bubble.colorValuePath;
colorMapping = bubble.colorMapping;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
dataSource = bubble.dataSource;
_this.getLegends(layerIndex, layerData, colorMapping, dataSource, dataPath, colorValuePath, propertyPath);
}
}
}
}
if (legend.type === 'Markers') {
_this.getMarkersLegendCollections(layerIndex, layer.markerSettings);
}
});
if (this.legendCollection.length > 0) {
for (var i = 0; i < this.legendCollection.length; i++) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var legendItem = this.legendCollection[i];
var eventArgs = {
name: legendRendering, cancel: false, fill: legendItem['fill'], shape: legend.shape,
shapeBorder: legend.shapeBorder,
text: typeof legendItem['text'] === 'number' ? legendItem['text'].toString() : legendItem['text']
};
map.trigger('legendRendering', eventArgs);
legendItem['fill'] = eventArgs.fill;
legendItem['shape'] = eventArgs.shape;
legendItem['shapeBorder'] = eventArgs.shapeBorder;
legendItem['text'] = eventArgs.text;
if (eventArgs.cancel) {
this.legendCollection.splice(i, 1);
i--;
}
}
}
var defaultSize = 25;
var legendTitle = map.legendSettings.title.text;
var titleTextStyle = map.legendSettings.titleStyle;
if (this.legendCollection.length > 0) {
var legendMode = legend.mode;
var shapeX = 0;
var shapeY = 0;
var textX = 0;
var textY = 0;
var shapePadding = legend.shapePadding;
var textPadding = 10;
var shapeHeight = legend.shapeHeight;
var shapeWidth = legend.shapeWidth;
var shapeLocation = [];
var textLocation = [];
var position = legend.position;
var labelAction = legend.labelDisplayMode;
var arrangement = (legend.orientation === 'None') ? ((position === 'Top' || position === 'Bottom')
? 'Horizontal' : 'Vertical') : legend.orientation;
var legendWidth = (legend.width.length > 1) ? (legend.width.indexOf('%') > -1) ? (map.availableSize.width / 100)
* parseInt(legend.width, 10) : parseInt(legend.width, 10) : null;
var legendHeight = (legend.height.length > 1) ? (legend.height.indexOf('%') > -1) ? (map.availableSize.height / 100) *
parseInt(legend.height, 10) : parseInt(legend.height, 10) : null;
var legendItemStartX_1;
var legendItemStartY_1;
var startX = 0;
var startY = 0;
var legendtitleSize = measureText(legendTitle, titleTextStyle);
if (legendMode === 'Interactive') {
var itemTextStyle = legend.textStyle;
var legendLength = this.legendCollection.length;
var rectWidth = (arrangement === 'Horizontal') ? (isNullOrUndefined(legendWidth)) ? (map.mapAreaRect.width / legendLength) :
(legendWidth / legendLength) : (isNullOrUndefined(legendWidth)) ? defaultSize : legendWidth;
var rectHeight = (arrangement === 'Horizontal') ? (isNullOrUndefined(legendHeight)) ? defaultSize : legendHeight :
(isNullOrUndefined(legendHeight)) ? (map.mapAreaRect.height / legendLength) : (legendHeight / legendLength);
startX = 0;
startY = legendtitleSize.height + spacing;
var position_1 = legend.labelPosition;
var textX_1 = 0;
var textY_1 = 0;
var textPadding_1 = 10;
var itemStartX = 0;
var itemStartY = 0;
var maxTextHeight = 0;
var maxTextWidth = 0;
for (var i = 0; i < this.legendCollection.length; i++) {
startX = (arrangement === 'Horizontal') ? (startX + rectWidth) : startX;
startY = (arrangement === 'Horizontal') ? startY : (startY + rectHeight);
var legendText = this.legendCollection[i]['text'];
var itemTextSize = new Size(0, 0);
if (labelAction === 'None') {
itemTextSize = measureText(legendText, itemTextStyle);
}
else if (labelAction === 'Trim') {
legendText = textTrim((arrangement === 'Horizontal' ? rectWidth : rectHeight), legendText, itemTextStyle);
itemTextSize = measureText(legendText, itemTextStyle);
}
else {
legendText = '';
}
if (legend.position === 'Left' || legend.position === 'Right' || legend.position === 'Float') {
for (var i_1 = 0; i_1 < this.legendCollection.length; i_1++) {
var legendItem = this.legendCollection[i_1];
var legendTextSize = measureText(legendItem['text'], legend.textStyle);
this.textMaxWidth = Math.max(this.textMaxWidth, legendTextSize.width);
}
}
maxTextHeight = Math.max(maxTextHeight, itemTextSize.height);
maxTextWidth = Math.max(maxTextWidth, itemTextSize.width);
if (itemTextSize.width > 0 && itemTextSize.height > 0) {
if (arrangement === 'Horizontal') {
textX_1 = startX + (rectWidth / 2);
textY_1 = (position_1 === 'After') ? (startY + rectHeight + (itemTextSize.height / 2)) + textPadding_1 :
(startY - textPadding_1);
}
else {
textX_1 = (position_1 === 'After') ? startX - (this.textMaxWidth / 2) - textPadding_1
: (startX + rectWidth + this.textMaxWidth / 2) + textPadding_1;
textY_1 = startY + (rectHeight / 2) + (itemTextSize.height / 4);
}
}
if (i === 0) {
itemStartX = (arrangement === 'Horizontal') ? startX : (position_1 === 'After') ?
textX_1 - (this.textMaxWidth / 2) : startX;
itemStartY = (arrangement === 'Horizontal') ? (position_1 === 'After') ? startY :
textY_1 - (itemTextSize.height / 2) : startY;
if (this.legendCollection.length === 1) {
legendWidth = (arrangement === 'Horizontal') ? Math.abs((startX + rectWidth) - itemStartX) :
(rectWidth + this.textMaxWidth + textPadding_1);
legendHeight = (arrangement === 'Horizontal') ? (rectHeight + (maxTextHeight / 2) + textPadding_1) :
Math.abs((startY + rectHeight) - itemStartY);
}
}
else if (i === this.legendCollection.length - 1) {
legendWidth = (arrangement === 'Horizontal') ? Math.abs((startX + rectWidth) - itemStartX) :
(rectWidth + this.textMaxWidth + textPadding_1);
legendHeight = (arrangement === 'Horizontal') ? (rectHeight + (maxTextHeight / 2) + textPadding_1) :
Math.abs((startY + rectHeight) - itemStartY);
}
this.legendRenderingCollections.push({
fill: this.legendCollection[i]['fill'], x: startX, y: startY,
width: rectWidth, height: rectHeight,
text: legendText, textX: textX_1, textY: textY_1,
textWidth: itemTextSize.width, textHeight: itemTextSize.height,
shapeBorder: this.legendCollection[i]['shapeBorder']
});
}
if (this.legendCollection.length === 1) {
legendHeight = maxTextHeight + textPadding_1;
legendWidth = rectWidth;
}
this.legendItemRect = { x: itemStartX, y: itemStartY, width: legendWidth, height: legendHeight };
}
else {
legendWidth = (isNullOrUndefined(legendWidth)) ? map.mapAreaRect.width : legendWidth;
legendHeight = (isNullOrUndefined(legendHeight)) ? map.mapAreaRect.height : legendHeight;
var j = 0;
this.page = 0;
for (var i = 0; i < this.legendCollection.length; i++) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var legendItem = this.legendCollection[i];
if (isNullOrUndefined(this.totalPages[this.page])) {
this.totalPages[this.page] = { Page: (this.page + 1), Collection: [] };
}
var legendTextSize = measureText(legendItem['text'], legend.textStyle);
this.textMaxWidth = Math.max(this.textMaxWidth, legendTextSize.width);
if (i === 0) {
startX = shapeX = (leftPadding + (shapeWidth / 2));
startY = shapeY = topPadding + legendtitleSize.height + (shapeHeight > legendTextSize.height ? shapeHeight / 2
: (legendTextSize.height / 4));
}
else {
var maxSize = (legendTextSize.height > shapeHeight) ? legendTextSize.height : shapeHeight;
if (arrangement === 'Horizontal') {
var prvePositionX = (textLocation[j - 1].x + textLocation[j - 1].width) + textPadding + shapeWidth;
if ((prvePositionX + shapePadding + legendTextSize.width) > legendWidth) {
var nextPositionY = (textLocation[j - 1].y > (shapeLocation[j - 1].y + (shapeHeight / 2)) ?
textLocation[j - 1].y : (shapeLocation[j - 1].y + (shapeHeight / 2))) + topPadding;
if ((nextPositionY + maxSize) > legendHeight) {
this.getPageChanged();
j = 0;
shapeLocation = [];
textLocation = [];
shapeX = startX;
shapeY = startY;
}
else {
shapeX = (shapeLocation[0].x);
shapeY = (nextPositionY + (maxSize / 2));
}
}
else {
shapeX = (prvePositionX - (shapeWidth / 2));
shapeY = (shapeLocation[j - 1]).y;
}
}
else {
var prevPositionY = textLocation[j - 1].y > shapeLocation[j - 1].y + (shapeHeight / 2) ?
textLocation[j - 1].y : shapeLocation[j - 1].y + (shapeHeight / 2);
if ((prevPositionY + topPadding + maxSize) > legendHeight) {
var nextPositionX = (textLocation[j - 1].x + this.textMaxWidth + textPadding);
if ((nextPositionX + shapePadding + legendTextSize.width) > legendWidth) {
shapeX = startX;
shapeY = startY;
textLocation = [];
shapeLocation = [];
this.getPageChanged();
j = 0;
}
else {
shapeX = nextPositionX + (shapeWidth / 2);
shapeY = (shapeLocation[0].y);
}
}
else {
var padding = 10;
shapeX = shapeLocation[j - 1].x;
shapeY = prevPositionY + padding + (shapeHeight / 2);
}
}
}
textX = shapeX + (shapeWidth / 2) + shapePadding;
textY = shapeY + (legendTextSize.height / 4);
shapeLocation.push({ x: shapeX, y: shapeY });
textLocation.push({ x: textX, y: textY, width: legendTextSize.width, height: (legendTextSize.height / 2) });
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.totalPages[this.page]['Collection'].push({
DisplayText: legendItem['text'],
ImageSrc: legendItem['imageSrc'],
Shape: { x: shapeX, y: shapeY },
Text: { x: textX, y: textY },
Fill: legendItem['fill'],
legendShape: legendItem['shape'],
shapeBorder: legendItem['shapeBorder'],
idIndex: i,
Rect: {
x: shapeLocation[j].x - (shapeWidth / 2),
y: (shapeLocation[j].y - (shapeHeight / 2)) < (textY - legendTextSize.height) ?
(shapeLocation[j].y - (shapeHeight / 2)) : (textY - legendTextSize.height),
width: Math.abs((shapeLocation[j].x - (shapeWidth / 2)) - (textX + legendTextSize.width)),
height: ((shapeHeight > legendTextSize.height) ? shapeHeight : legendTextSize.height)
}
});
j++;
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var collection = this.totalPages[0]['Collection'];
// eslint-disable-next-line @typescript-eslint/no-explicit-any
Array.prototype.forEach.call(collection, function (legendObj, index) {
var legendRect = new Rect(legendObj['Rect']['x'], legendObj['Rect']['y'], legendObj['Rect']['width'], legendObj['Rect']['height']);
if (index === 0) {
legendItemStartX_1 = legendRect.x;
legendItemStartY_1 = legendRect.y;
}
_this.widthIncrement = Math.max(_this.widthIncrement, Math.abs(legendItemStartX_1 - (legendRect.x + legendRect.width)));
_this.heightIncrement = Math.max(_this.heightIncrement, Math.abs(legendItemStartY_1 - (legendRect.y + legendRect.height)));
});
legendWidth = ((this.widthIncrement < legendWidth) ? this.widthIncrement : legendWidth);
legendHeight = ((this.heightIncrement < legendHeight) ? this.heightIncrement : legendHeight);
this.legendItemRect = {
x: collection[0]['Rect']['x'], y: collection[0]['Rect']['y'],
width: legendWidth, height: legendHeight
};
}
}
};
/**
* Get the legend collections
*
* @param {number} layerIndex - Specifies the layer index
* @param {any[]} layerData - Specifies the layer data
* @param {ColorMappingSettings[]} colorMapping - Specifies the color mapping
* @param {any[]} dataSource - Specifies the data source
* @param {string} dataPath - Specifies the data path
* @param {string} colorValuePath - Specifies the color value path
* @param {string | string[]} propertyPath - Specifies the property path
* @returns {void}
*/
Legend.prototype.getLegends = function (
// eslint-disable-next-line @typescript-eslint/no-explicit-any
layerIndex, layerData, colorMapping, dataSource, dataPath, colorValuePath, propertyPath) {
this.getRangeLegendCollection(layerIndex, layerData, colorMapping, dataSource, dataPath, colorValuePath, propertyPath);
this.getEqualLegendCollection(layerIndex, layerData, colorMapping, dataSource, dataPath, colorValuePath, propertyPath);
this.getDataLegendCollection(layerIndex, layerData, colorMapping, dataSource, dataPath, colorValuePath, propertyPath);
};
Legend.prototype.getPageChanged = function () {
this.page++;
if (isNullOrUndefined(this.totalPages[this.page])) {
this.totalPages[this.page] = { Page: (this.page + 1), Collection: [] };
}
};
Legend.prototype.legendTextTrim = function (maxWidth, text, font, legendRectSize) {
var label = text;
var size = measureText(text, font).width;
var legendWithoutTextSize = legendRectSize - size;
if (legendRectSize > maxWidth) {
var textLength = text.length;
for (var i = textLength - 1; i >= 0; --i) {
label = text.substring(0, i) + '...';
size = measureText(label, font).width;
var totalSize = legendWithoutTextSize + size;
if (totalSize <= maxWidth || label.length < 4) {
if (label.length < 4) {
label = ' ';
}
return label;
}
}
}
return label;
};
// eslint-disable-next-line valid-jsdoc
/**
* To draw the legend shape and text.
*
* @private
*/
Legend.prototype.drawLegend = function () {
var map = this.maps;
var legend = map.legendSettings;
var render = map.renderer;
var textOptions;
var textFont = {
size: legend.textStyle.size,
color: legend.textStyle.color,
fontFamily: legend.textStyle.fontFamily,
fontWeight: legend.textStyle.fontWeight,
fontStyle: legend.textStyle.fontStyle,
opacity: legend.textStyle.opacity
};
this.legendGroup = render.createGroup({ id: map.element.id + '_Legend_Group' });
if (legend.mode === 'Interactive') {
for (var i = 0; i < this.legendRenderingCollections.length; i++) {
var itemId = map.element.id + '_Legend_Index_' + i;
var textId = map.element.id + '_Legend_Index_' + i + '_Text';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var item = this.legendRenderingCollections[i];
var bounds = new Rect(item['x'], item['y'], item['width'], item['height']);
if (i === 0) {
this.renderLegendBorder();
}
var textLocation = new Point(item['textX'], item['textY']);
textFont.color = (textFont.color !== null) ? textFont.color : this.maps.themeStyle.legendTextColor;
var rectOptions = new RectOption(itemId, item['fill'], item['shapeBorder'], legend.opacity, bounds);
textOptions = new TextOption(textId, textLocation.x, textLocation.y, 'middle', item['text'], '', '');
textFont.fontFamily = !isNullOrUndefined(textFont.fontFamily) ? textFont.fontFamily : this.maps.themeStyle.fontFamily;
textFont.size = textFont.size || map.themeStyle.legendFontSize;
var textElement = renderTextElement(textOptions, textFont, textFont.color, this.legendGroup);
textElement.setAttribute('aria-label', item['text']);
textElement.setAttribute('role', 'region');
var rectElement = render.drawRectangle(rectOptions);
this.legendGroup.appendChild(rectElement);
if (map.legendSettings.toggleLegendSettings.enable && (legend.type === 'Layers' || legend.type === 'Markers')) {
this.maintainLegendToggle(i, rectElement, textElement);
}
this.legendToggle();
}
}
else {
this.drawLegendItem(this.currentPage);
}
};
/**
* @param {number} page - Specifies the legend page.
* @returns {void}
* @private
*/
Legend.prototype.drawLegendItem = function (page) {
var map = this.maps;
var legend = map.legendSettings;
var spacing = 10;
var shapeSize = new Size(legend.shapeWidth, legend.shapeHeight);
var textOptions;
var render = map.renderer;
var legendShape = legend.shape;
if (page >= 0 && page < this.totalPages.length) {
if (querySelector(this.legendGroup.id, this.maps.element.id)) {
remove(querySelector(this.legendGroup.id, this.maps.element.id));
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
for (var i = 0; i < this.totalPages[page]['Collection'].length; i++) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var collection = this.totalPages[page]['Collection'][i];
var shapeBorder = collection['shapeBorder'];
var legendElement = render.createGroup({ id: map.element.id + '_Legend_Index_' + collection['idIndex'] });
var legendText = collection['DisplayText'];
var pagingArrowPadding = 4;
var strokeColor = (legend.shape === 'HorizontalLine' || legend.shape === 'VerticalLine'
|| legend.shape === 'Cross') ? isNullOrUndefined(legend.fill) ? '#000000' : legend.fill : shapeBorder.color;
var strokeWidth = (legend.shape === 'HorizontalLine' || legend.shape === 'VerticalLine'
|| legend.shape === 'Cross') ? (shapeBorder.width === 0) ?
1 : shapeBorder.width : shapeBorder.width;
var shapeId = map.element.id + '_Legend_Shape_Index_' + collection['idIndex'];
var textId = map.element.id + '_Legend_Text_Index_' + collection['idIndex'];
var shapeLocation = new Point(collection['Shape']['x'], (collection['Shape']['y'] - pagingArrowPadding));
var textLocation = new Point(collection['Text']['x'], (collection['Text']['y'] - pagingArrowPadding));
var renderOptions = new PathOption(shapeId, collection['Fill'], strokeWidth, strokeColor, legend.opacity, isNullOrUndefined(shapeBorder.opacity) ? legend.opacity : shapeBorder.opacity, '');
var legendTextStyle = {
fontFamily: legend.textStyle.fontFamily, fontStyle: legend.textStyle.fontStyle,
fontWeight: legend.textStyle.fontWeight, size: legend.textStyle.size, color: legend.textStyle.color,
opacity: legend.textStyle.opacity
};
legendTextStyle.color = (legendTextStyle.color !== null) ? legendTextStyle.color :
this.maps.themeStyle.legendTextColor;
legendTextStyle.fontFamily = !isNullOrUndefined(legendTextStyle.fontFamily) ? legendTextStyle.fontFamily :
this.maps.themeStyle.fontFamily;
legendTextStyle.size = legendTextStyle.size || map.themeStyle.legendFontSize;
legendTextStyle.fontWeight = legendTextStyle.fontWeight || map.themeStyle.fontWeight;
if (i === 0) {
this.renderLegendBorder();
}
if (legend.type === 'Markers' && legend.useMarkerShape) {
var legendShapeData = this.legendCollection[collection['idIndex']].data[0];
var marker = map.layers[legendShapeData['layerIndex']].markerSettings[legendShapeData['markerIndex']];
legendShape = !isNullOrUndefined(marker.dataSource[legendShapeData['dataIndex']][marker['shapeValuePath']]) && marker.dataSource[legendShapeData['dataIndex']][marker['shapeValuePath']] !== '' ? marker.dataSource[legendShapeData['dataIndex']][marker['shapeValuePath']] : marker.shape;
}
if (legendShape === 'Balloon') {
legendElement.appendChild(drawBalloon(map, renderOptions, shapeSize, { x: shapeLocation.x, y: (shapeLocation.y + 5) }, 'Legend'));
}
else {
legendElement.appendChild(drawSymbol(shapeLocation, legendShape, shapeSize, collection['ImageSrc'], renderOptions));
}
var legendRectSize = collection['Rect']['x'] + collection['Rect']['width'];
if (legendRectSize > this.legendBorderRect.width) {
var trimmedText = this.legendTextTrim(this.legendBorderRect.width, legendText, legendTextStyle, legendRectSize);
legendText = trimmedText;
}
textOptions = new TextOption(textId, textLocation.x, textLocation.y, 'start', legendText, '', '');
var textElement = renderTextElement(textOptions, legendTextStyle, legendTextStyle.color, legendElement);
textElement.setAttribute('aria-label', legendText);
textElement.setAttribute('role', 'region');
this.legendGroup.appendChild(legendElement);
if (map.legendSettings.toggleLegendSettings.enable && (legend.type === 'Layers' || legend.type === 'Markers')) {
var legendShapeElement = legendElement.childNodes[0];
this.maintainLegendToggle(collection['idIndex'], legendShapeElement, textElement);
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
if (i === (this.totalPages[page]['Collection'].length - 1)) {
var pagingGroup = void 0;
var width = spacing;
var height = (spacing / 2);
if (this.page !== 0) {
var pagingText = (page + 1) + '/' + this.totalPages.length;
var pagingFont = legend.textStyle;
var pagingTextSize = measureText(pagingText, pagingFont);
var leftPageX = (this.legendItemRect.x + this.legendItemRect.width) - pagingTextSize.width -
(width * 2) - (spacing * 2) + (pagingArrowPadding / 2);
var rightPageX = (this.legendItemRect.x + this.legendItemRect.width);
var pageTextX = rightPageX - width - (pagingTextSize.width / 2) - (spacing / 2) - pagingArrowPadding;
var locY = (this.legendItemRect.y + this.legendItemRect.height) + (height / 2) + spacing;
pagingGroup = render.createGroup({ id: map.element.id + '_Legend_Paging_Group' });
var leftPageElement = render.createGroup({ id: map.element.id + '_Legend_Left_Paging_Group' });
var rightPageElement = render.createGroup({ id: map.element.id + '_Legend_Right_Paging_Group' });
var rightPath = ' M ' + rightPageX + ' ' + locY + ' L ' + (rightPageX - width) + ' ' + (locY - height) +
' L ' + (rightPageX - width) + ' ' + (locY + height) + ' z ';
var leftPath = ' M ' + leftPageX + ' ' + locY + ' L ' + (leftPageX + width) + ' ' + (locY - height) +
' L ' + (leftPageX + width) + ' ' + (locY + height) + ' z ';
var leftPageOptions = new PathOption(map.element.id + '_Left_Page', this.maps.themeStyle.legendTextColor, 0, this.maps.themeStyle.legendTextColor, ((page + 1) === 1 ? 0.5 : 1), 1, '', leftPath);
leftPageElement.appendChild(render.drawPath(leftPageOptions));
var leftRectPageOptions = new RectOption(map.element.id + '_Left_Page_Rect', 'transparent', {}, 1, new Rect(leftPageX - (width / 2), (locY - (height * 2)), width * 2, spacing * 2), null, null, '', '');
var pathEle = render.drawRectangle(leftRectPageOptions);
pathEle.setAttribute('aria-label', 'Navigate to the previous legend items');
pathEle.setAttribute('role', 'button');
pathEle.tabIndex = (page + 1) === 1 ? -1 : map.tabIndex;
if ((page + 1) === 1) {
pathEle.style.cursor = 'default';
pathEle.style.setProperty('outline', 'none');
}
else {
pathEle.style.cursor = 'pointer';
pathEle.style.removeProperty('outline');
}
leftPageElement.appendChild(pathEle);
this.wireEvents(leftPageElement);
var rightPageOptions = new PathOption(map.element.id + '_Right_Page', this.maps.themeStyle.legendTextColor, 0, this.maps.themeStyle.legendTextColor, ((page + 1) === this.totalPages.length ? 0.5 : 1), 1, '', rightPath);
rightPageElement.appendChild(render.drawPath(rightPageOptions));
var rightRectPageOptions = new RectOption(map.element.id + '_Right_Page_Rect', 'transparent', {}, 1, new Rect(rightPageX - spacing - (width / 2), (locY - (height * 2)), width * 2, spacing * 2), null, null, '', '');
pathEle = render.drawRectangle(rightRectPageOptions);
pathEle.setAttribute('aria-label', 'Navigate to the next legend items');
pathEle.setAttribute('role', 'button');
pathEle.tabIndex = (page + 1) === this.totalPages.length ? -1 : map.tabIndex;
if ((page + 1) === this.totalPages.length) {
pathEle.style.cursor = 'default';
pathEle.style.setProperty('outline', 'none');
}
else {
pathEle.style.cursor = 'pointer';
pathEle.style.removeProperty('outline');
}
rightPageElement.appendChild(pathEle);
this.wireEvents(rightPageElement);
pagingGroup.appendChild(leftPageElement);
pagingGroup.appendChild(rightPageElement);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var pageTextOptions = {
'id': map.element.id + '_Paging_Text',
'x': pageTextX,
'y': locY + (pagingTextSize.height / 4),
'fill': this.maps.themeStyle.legendTextColor,
'font-size': '14px',
'font-style': pagingFont.fontStyle,
'font-family': pagingFont.fontFamily,
'font-weight': pagingFont.fontWeight,
'text-anchor': 'middle',
'transform': '',
'opacity': 1,
'dominant-baseline': ''
};
var pagingTextElement = render.createText(pageTextOptions, pagingText);
pagingTextElement.style.cssText = 'user-select: none;';
pagingTextElement.setAttribute('aria-label', pagingText);
pagingTextElement.setAttribute('role', 'region');
pagingGroup.appendChild(pagingTextElement);
this.legendGroup.appendChild(pagingGroup);
}
this.legendToggle();
}
}
}
};
/**
* @param {number} legendIndex - Specifies the legend index.
* @param {Element} legendShapeElement - Specifies the legend shape element.
* @param {Element} legendTextElement - Specifies the legend text element.
* @returns {void}
* @private
*/
Legend.prototype.maintainLegendToggle = function (legendIndex, legendShapeElement, legendTextElement) {
if (this.maps.legendSettings.toggleLegendSettings.enable &&
!isNullOrUndefined(this.maps.toggledLegendId) && this.maps.toggledLegendId.indexOf(legendIndex) > -1 &&
!isNullOrUndefined(this.maps.toggledElementId) && this.maps.toggledElementId.length > 0) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var currentItem = this.legendCollection[legendIndex]['data'];
if (!this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
this.setToggleAttributes(legendTextElement, legendShapeElement, this.maps.legendSettings.toggleLegendSettings.fill, this.maps.legendSettings.toggleLegendSettings.opacity, this.maps.legendSettings.toggleLegendSettings.border.color, this.maps.legendSettings.toggleLegendSettings.border.width, isNullOrUndefined(this.maps.legendSettings.toggleLegendSettings.border.opacity) ?
this.maps.legendSettings.toggleLegendSettings.opacity :
this.maps.legendSettings.toggleLegendSettings.border.opacity, this.maps.legendSettings.toggleLegendSettings.fill);
}
else {
var layerIndex = currentItem[currentItem.length - 1].layerIndex;
this.setToggleAttributes(legendTextElement, legendShapeElement, this.maps.layers[layerIndex].shapeSettings.fill, this.maps.layers[layerIndex].shapeSettings.opacity,
/* eslint-disable-next-line max-len */
this.maps.layers[layerIndex].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor, isNullOrUndefined(this.maps.layers[layerIndex].shapeSettings.border.width)
? 0 : this.maps.layers[layerIndex].shapeSettings.border.width, isNullOrUndefined(this.maps.layers[layerIndex].shapeSettings.border.opacity)
? this.maps.layers[layerIndex].shapeSettings.opacity
: this.maps.layers[layerIndex].shapeSettings.border.opacity, this.maps.layers[layerIndex].shapeSettings.fill);
}
currentItem['_isVisible'] = false;
}
};
Legend.prototype.legendHighLightAndSelection = function (targetElement, value) {
var shapeIndex;
var layerIndex;
var dataIndex;
var pointIndex;
var legend = this.maps.legendSettings;
var textEle = legend.mode === 'Default' ? document.getElementById(targetElement.id.replace('Shape', 'Text')) :
document.getElementById(targetElement.id + '_Text');
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var collection = this.maps.legendModule.legendCollection;
var length;
var multiSelectEnable = !isNullOrUndefined(collection[0]['data'][0]['layerIndex']) ? this.maps.layers[collection[0]['data'][0]['layerIndex']].selectionSettings.enableMultiSelect : false;
var selectLength = 0;
var interactProcess = true;
var idIndex = parseFloat(targetElement.id.charAt(targetElement.id.length - 1));
this.updateLegendElement();
var toggleLegendCheck = this.maps.toggledLegendId.indexOf(idIndex);
if (this.maps.legendSettings.toggleLegendSettings.enable && value === 'highlight' && toggleLegendCheck !== -1) {
var collectionIndex = this.getIndexofLegend(this.legendHighlightCollection, targetElement);
if (collectionIndex !== -1) {
this.legendHighlightCollection.splice(collectionIndex, 1);
}
this.removeLegendHighlightCollection();
return null;
}
if (value === 'selection') {
this.shapeHighlightCollection = [];
if (!this.maps.shapeSelections && !multiSelectEnable) {
this.removeAllSelections();
this.maps.shapeSelections = true;
}
if (this.maps.legendSelectionCollection.length > 0 && (!multiSelectEnable ? this.maps.shapeSelections : true)) {
for (var k = 0; k < this.maps.legendSelectionCollection.length; k++) {
if (targetElement === this.maps.legendSelectionCollection[k]['legendElement']) {
this.maps.legendSelectionCollection[k]['legendElement'] = targetElement;
interactProcess = false;
this.removeLegendSelectionCollection(this.maps.legendSelectionCollection[k]['legendElement']);
this.maps.selectedLegendElementId.splice(this.maps.selectedLegendElementId.indexOf(idIndex), 1);
this.maps.legendSelectionCollection.splice(k, 1);
this.maps.legendSelection = this.maps.legendSelectionCollection.length > 0 ? false : true;
break;
}
else if (!multiSelectEnable) {
if (this.maps.legendSelectionCollection.length > 1) {
for (var z = 0; z < this.maps.legendSelectionCollection.length; z++) {
this.removeLegendSelectionCollection(this.maps.legendSelectionCollection[z]['legendElement']);
}
this.maps.legendSelectionCollection = [];
}
else {
this.removeLegendSelectionCollection(this.maps.legendSelectionCollection[k]['legendElement']);
this.maps.legendSelectionCollection.splice(k, 1);
}
}
}
}
}
else {
if (this.maps.legendSelectionCollection.length > 0) {
for (var k = 0; k < this.maps.legendSelectionCollection.length; k++) {
if ((targetElement.id.indexOf('_Legend_Shape') > -1 || targetElement.id.indexOf('_Legend_Index')) &&
targetElement === this.maps.legendSelectionCollection[k]['legendElement']) {
interactProcess = false;
break;
}
else {
this.removeLegendHighlightCollection();
}
}
}
this.removeLegendHighlightCollection();
}
if (interactProcess) {
for (var i = 0; i < collection.length; i++) {
var idIndex_1 = this.maps.legendSettings.mode === 'Interactive' ?
parseFloat(targetElement.id.split('_Legend_Index_')[1]) :
parseFloat(targetElement.id.split('_Legend_Shape_Index_')[1]);
if (textEle.textContent === collection[i]['text'] && collection[i]['data'].length > 0
&& idIndex_1 === i) {
var layer = this.maps.layers[collection[i]['data'][0]['layerIndex']];
var enable = void 0;
var legendModule = void 0;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var data = void 0;
if (!isNullOrUndefined(layer)) {
enable = (value === 'selection') ? layer.selectionSettings.enable : layer.highlightSettings.enable;
legendModule = void 0;
legendModule = (value === 'selection') ? layer.selectionSettings : layer.highlightSettings;
data = collection[i]['data'];
}
if (enable) {
for (var j = 0; j < data.length; j++) {
var shapeElement = void 0;
shapeIndex = data[j]['shapeIndex'];
layerIndex = data[j]['layerIndex'];
dataIndex = data[j]['dataIndex'];
pointIndex = data[j]['pointIndex'];
if (pointIndex === -1) {
shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex);
}
else {
shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex + '_multiLine_' + pointIndex);
}
if (shapeElement !== null) {
var shapeMatch = true;
if (this.maps.legendSelectionCollection !== null) {
for (var i_2 = 0; i_2 < this.maps.legendSelectionCollection.length; i_2++) {
if (this.maps.legendSelectionCollection[i_2]['legendElement'] === targetElement) {
shapeMatch = false;
break;
}
}
}
if (value === 'highlight' && shapeMatch) {
if (j === 0) {
this.legendHighlightCollection = [];
this.pushCollection(targetElement, this.legendHighlightCollection, collection[i], layer.shapeSettings);
}
length = this.legendHighlightCollection.length;
var legendHighlightColor = this.legendHighlightCollection[length - 1]['legendOldFill'];
this.legendHighlightCollection[length - 1]['MapShapeCollection']['Elements'].push(shapeElement);
var shapeItemCount = this.legendHighlightCollection[length - 1]['MapShapeCollection']['Elements'].length - 1;
var shapeOldFillColor = shapeElement.getAttribute('fill');
var shapeOldOpacity = shapeElement.getAttribute('fill-opacity');
this.legendHighlightCollection[length - 1]['shapeOldFillColor'].push(shapeOldFillColor);
this.legendHighlightCollection[length - 1]['shapeOldOpacity'] = shapeOldOpacity;
var shapeOldColor = this.legendHighlightCollection[length - 1]['shapeOldFillColor'][shapeItemCount];
var shapeOldFillOpacity = this.legendHighlightCollection[length - 1]['shapeOldOpacity'];
this.shapePreviousColor = this.legendHighlightCollection[length - 1]['shapeOldFillColor'];
this.setColor(shapeElement, !isNullOrUndefined(legendModule.fill) ? legendModule.fill : shapeOldColor, isNullOrUndefined(legendModule.opacity) ? shapeOldFillOpacity : legendModule.opacity.toString(), legendModule.border.color, legendModule.border.width.toString(), 'highlight');
this.setColor(targetElement, !isNullOrUndefined(legendModule.fill) ? legendModule.fill : legendHighlightColor, isNullOrUndefined(legendModule.opacity) ? shapeOldFillOpacity : legendModule.opacity.toString(), legendModule.border.color, legendModule.border.width.toString(), 'highlight');
}
else if (value === 'selection') {
this.legendHighlightCollection = [];
this.maps.legendSelectionClass = legendModule;
if (j === 0) {
this.pushCollection(targetElement, this.maps.legendSelectionCollection, collection[i], layer.shapeSettings);
if (multiSelectEnable) {
this.maps.selectedLegendElementId.push(i);
}
else {
if (this.maps.selectedLegendElementId.length === 0) {
this.maps.selectedLegendElementId.push(i);
}
else {
this.maps.selectedLegendElementId = [];
this.maps.selectedLegendElementId.push(i);
}