| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225 | 1×
1×
1×
1×
55×
55×
1×
55×
55×
55×
1×
54×
13×
41×
41×
1×
2×
2×
1×
1×
1×
47×
47×
47×
47×
26×
26×
26×
26×
26×
26×
19×
19×
19×
19×
19×
7×
2×
2×
2×
2×
5×
1×
1×
1×
1×
4×
1×
1×
1×
3×
3×
3×
3×
3×
26×
24×
2×
2×
1×
1×
1×
1×
1×
1×
21×
4×
4×
1×
1×
1×
1×
4×
4×
2×
17×
11×
6×
5×
1×
25×
16×
25×
25×
24×
1×
25×
25×
25×
25×
1×
1×
25×
25×
25×
25×
25×
25×
19×
25×
25×
25×
25×
25×
25×
25×
25×
25×
1×
25×
2×
23×
4×
4×
4×
1×
1×
1×
1×
23×
1×
22×
23×
1×
3430×
1×
54×
54×
54×
1×
1×
| define(["require", "exports", "../index", "@syncfusion/ej2-base", "../utils/helper"], function (require, exports, index_1, ej2_base_1, helper_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Highlight = (function () {
function Highlight(maps) {
this.maps = maps;
this.addEventListener();
}
Highlight.prototype.addEventListener = function () {
Iif (this.maps.isDestroyed) {
return;
}
this.maps.on(ej2_base_1.Browser.touchMoveEvent, this.mouseMove, this);
this.maps.on(ej2_base_1.Browser.touchStartEvent, this.mouseMove, this);
};
Highlight.prototype.removeEventListener = function () {
if (this.maps.isDestroyed) {
return;
}
this.maps.off(ej2_base_1.Browser.touchMoveEvent, this.mouseMove);
this.maps.off(ej2_base_1.Browser.touchStartEvent, this.mouseMove);
};
Highlight.prototype.addHighlight = function (layerIndex, name, enable) {
var targetEle = helper_1.getTargetElement(layerIndex, name, enable, this.maps);
if (enable) {
this.mapHighlight(targetEle, null, null);
}
else {
helper_1.removeClass(targetEle);
}
};
Highlight.prototype.mouseMove = function (e) {
var targetEle = e.target;
var layerIndex;
var isTouch = 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') !== 'PolygonselectionMapStyle' &&
targetEle.getAttribute('class') !== 'LineselectionMapStyle') {
layerIndex = parseInt(targetEle.id.split('_LayerIndex_')[1].split('_')[0], 10);
var shapeData = void 0;
var data = void 0;
var shapeIn = void 0;
var dataIndex = void 0;
if (targetEle.id.indexOf('shapeIndex') > -1) {
shapeIn = parseInt(targetEle.id.split('_shapeIndex_')[1].split('_')[0], 10);
shapeData = this.maps.layers[layerIndex].shapeData['features'] &&
!ej2_base_1.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 = ej2_base_1.isNullOrUndefined(dataIndex) ? null : this.maps.layers[layerIndex].dataSource[dataIndex];
this.highlightSettings = this.maps.layers[layerIndex].highlightSettings;
}
else if (targetEle.id.indexOf('BubbleIndex') > -1) {
var bubble = 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) {
var marker = 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 if (targetEle.id.indexOf('_PolygonIndex_') > -1) {
dataIndex = parseInt(targetEle.id.split('_PolygonIndex_')[1].split('_')[0], 10);
data = this.maps.layers[layerIndex].polygonSettings.polygons[dataIndex].points;
this.highlightSettings = this.maps.layers[layerIndex].polygonSettings.highlightSettings;
}
else {
var index = 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 {
var element = document.getElementsByClassName('highlightMapStyle')[0];
if (!ej2_base_1.isNullOrUndefined(element)) {
helper_1.removeClass(element);
Eif (element.id.indexOf('NavigationIndex') > -1) {
var index = parseInt(element.id.split('_NavigationIndex_')[1].split('_')[0], 10);
var layerIndex_1 = parseInt(element.parentElement.id.split('_LayerIndex_')[1].split('_')[0], 10);
element.setAttribute('stroke-width', this.maps.layers[layerIndex_1].navigationLineSettings[index].width.toString());
element.setAttribute('stroke', this.maps.layers[layerIndex_1].navigationLineSettings[index].color);
}
}
}
}
else if (helper_1.getElementsByClassName('highlightMapStyle').length > 0) {
targetEle = helper_1.getElementsByClassName('highlightMapStyle')[0];
if (targetEle.id.indexOf('NavigationIndex') > -1) {
var index = 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);
}
helper_1.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();
}
}
};
Highlight.prototype.handleHighlight = function (targetElement, layerIndex, data, shapeData) {
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);
}
var selectHighLight = targetElement.id.indexOf('shapeIndex') > -1 && (this.maps.legendSettings.visible && this.maps.legendModule) ?
this.maps.legendModule.shapeToggled : true;
if (selectHighLight) {
this.mapHighlight(targetElement, shapeData, data);
}
};
Highlight.prototype.mapHighlight = function (targetEle, shapeData, data) {
var _this = this;
var layerIndex = parseInt(targetEle.id.split('_LayerIndex_')[1].split('_')[0], 10);
var isMarkerSelect = false;
if (targetEle.id.indexOf('MarkerIndex') > -1) {
var marker = parseInt(targetEle.id.split('_MarkerIndex_')[1].split('_')[0], 10);
isMarkerSelect = this.maps.layers[layerIndex].markerSettings[marker].highlightSettings.enable;
}
var borderColor = (targetEle.parentElement.id.indexOf('LineString') === -1) ? this.highlightSettings.border.color : (this.highlightSettings.fill || this.highlightSettings.border.color);
var borderWidth = (targetEle.parentElement.id.indexOf('LineString') === -1) ? (this.highlightSettings.border.width / (isMarkerSelect ? 1 : this.maps.scale)) : (this.highlightSettings.border.width / this.maps.scale);
var borderOpacity = ej2_base_1.isNullOrUndefined(this.highlightSettings.border.opacity) ? this.highlightSettings.opacity :
this.highlightSettings.border.opacity;
var eventArgs = {
opacity: this.highlightSettings.opacity,
fill: (targetEle.parentElement.id.indexOf('LineString') === -1) ? (targetEle.id.indexOf('NavigationIndex') === -1 ? !ej2_base_1.isNullOrUndefined(this.highlightSettings.fill)
? this.highlightSettings.fill : targetEle.getAttribute('fill') : 'none') : 'transparent',
border: { color: borderColor, width: borderWidth, opacity: borderOpacity },
cancel: false
};
var shapeEventArgs = {
opacity: eventArgs.opacity,
fill: eventArgs.fill,
border: { color: borderColor, width: borderWidth, opacity: borderOpacity },
name: index_1.shapeHighlight,
target: targetEle.id,
cancel: false,
shapeData: shapeData,
data: data,
maps: this.maps
};
if (targetEle.id.indexOf('shapeIndex') > -1) {
this.maps.trigger(index_1.shapeHighlight, shapeEventArgs, function () { });
}
var itemEventArgs = {
opacity: eventArgs.opacity,
fill: eventArgs.fill,
border: { color: borderColor, width: borderWidth, opacity: borderOpacity },
name: index_1.itemHighlight,
target: targetEle.id,
cancel: false,
shapeData: shapeData,
data: data,
maps: this.maps
};
this.maps.trigger(index_1.itemHighlight, itemEventArgs, function () {
itemEventArgs.cancel = eventArgs.cancel !== itemEventArgs.cancel ? itemEventArgs.cancel : targetEle.id.indexOf('shapeIndex') > -1 ? shapeEventArgs.cancel : eventArgs.cancel;
itemEventArgs.fill = eventArgs.fill !== itemEventArgs.fill ? itemEventArgs.fill : targetEle.id.indexOf('shapeIndex') > -1 ? shapeEventArgs.fill : eventArgs.fill;
itemEventArgs.opacity = eventArgs.opacity !== itemEventArgs.opacity ? itemEventArgs.opacity : targetEle.id.indexOf('shapeIndex') > -1 ? shapeEventArgs.opacity : eventArgs.opacity;
itemEventArgs.border.color = eventArgs.border.color !== itemEventArgs.border.color ? itemEventArgs.border.color : targetEle.id.indexOf('shapeIndex') > -1 ? shapeEventArgs.border.color : eventArgs.border.color;
itemEventArgs.border.width = eventArgs.border.width !== itemEventArgs.border.width ? itemEventArgs.border.width : targetEle.id.indexOf('shapeIndex') > -1 ? shapeEventArgs.border.width : eventArgs.border.width;
itemEventArgs.border.opacity = eventArgs.border.opacity !== itemEventArgs.border.opacity ? itemEventArgs.border.opacity : targetEle.id.indexOf('shapeIndex') > -1 ? shapeEventArgs.border.opacity : eventArgs.border.opacity;
_this.highlightMap(targetEle, itemEventArgs);
});
};
Highlight.prototype.highlightMap = function (targetEle, eventArgs) {
if (targetEle.getAttribute('class') === 'highlightMapStyle' || eventArgs.cancel) {
return;
}
else {
if (helper_1.getElementsByClassName('highlightMapStyle').length > 0) {
var elem = helper_1.getElementsByClassName('highlightMapStyle')[0];
helper_1.removeClass(elem);
if (elem.id.indexOf('NavigationIndex') > -1) {
var index = parseInt(elem.id.split('_NavigationIndex_')[1].split('_')[0], 10);
var layerIndex = 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 (!helper_1.getElement('highlightMap')) {
document.body.appendChild(helper_1.createStyle('highlightMap', 'highlightMapStyle', eventArgs));
}
else {
helper_1.customizeStyle('highlightMap', 'highlightMapStyle', eventArgs);
}
targetEle.setAttribute('class', 'highlightMapStyle');
}
};
Highlight.prototype.getModuleName = function () {
return 'Highlight';
};
Highlight.prototype.destroy = function () {
this.highlightSettings = null;
this.removeEventListener();
this.maps = null;
};
return Highlight;
}());
exports.Highlight = Highlight;
});
|