@syncfusion/ej2-treemap 28.2.3 → 29.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/README.md +2 -2
  2. package/dist/ej2-treemap.min.js +2 -2
  3. package/dist/ej2-treemap.umd.min.js +2 -2
  4. package/dist/ej2-treemap.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-treemap.es2015.js +284 -106
  6. package/dist/es6/ej2-treemap.es2015.js.map +1 -1
  7. package/dist/es6/ej2-treemap.es5.js +284 -106
  8. package/dist/es6/ej2-treemap.es5.js.map +1 -1
  9. package/dist/global/ej2-treemap.min.js +2 -2
  10. package/dist/global/ej2-treemap.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +12 -12
  13. package/src/treemap/layout/legend.js +7 -2
  14. package/src/treemap/layout/render-panel.js +2 -1
  15. package/src/treemap/treemap.d.ts +26 -1
  16. package/src/treemap/treemap.js +100 -0
  17. package/src/treemap/user-interaction/highlight-selection.d.ts +19 -3
  18. package/src/treemap/user-interaction/highlight-selection.js +138 -84
  19. package/src/treemap/user-interaction/tooltip.js +4 -2
  20. package/src/treemap/utils/helper.js +34 -18
package/src/treemap/user-interaction/highlight-selection.js CHANGED
@@ -18,16 +18,27 @@ var TreeMapHighlight = /** @class */ (function () {
18
18
  this.addEventListener();
19
19
  }
20
20
  /**
21
- * Mouse down event in highlight
21
+ * Mouse Move event in highlight
22
22
  *
23
23
  * @param {PointerEvent} e - Specifies the pointer argument.
24
24
  * @returns {boolean} - return the highlight process is true or false.
25
25
  * @private
26
26
  */
27
27
  TreeMapHighlight.prototype.mouseMove = function (e) {
28
+ var targetEle = e.target;
29
+ return this.highlightOnMouseMove(targetEle);
30
+ };
31
+ /**
32
+ * This method highlights the target element for mouse move event.
33
+ *
34
+ * @param {Element} targetElement - Specifies the target element to highlight.
35
+ * @returns {boolean} - return the highlight process is true or false.
36
+ * @private
37
+ */
38
+ TreeMapHighlight.prototype.highlightOnMouseMove = function (targetElement) {
28
39
  var treemap = this.treemap;
29
40
  var processHighlight;
30
- var targetId = e.target.id;
41
+ var targetId = targetElement.id;
31
42
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
32
43
  var eventArgs;
33
44
  var items = [];
@@ -55,7 +66,8 @@ var TreeMapHighlight = /** @class */ (function () {
55
66
  }
56
67
  }
57
68
  if (targetId.indexOf('_Item_Index') > -1 && !shapeSelected) {
58
- if (this.highLightId !== targetId) {
69
+ if (this.highLightId !== targetId ||
70
+ (this.legendHighlightCollection[0] ? this.legendHighlightCollection[0]['ShapeCollection']['Elements'].length > 1 : false)) {
59
71
  treeMapElement = document.getElementById(treemap.element.id + '_TreeMap_' + treemap.layoutType + '_Layout');
60
72
  var selectionElements = document.getElementsByClassName('treeMapSelection');
61
73
  item = this.treemap.layout.renderItems[parseFloat(targetId.split('_Item_Index_')[1])];
@@ -67,10 +79,16 @@ var TreeMapHighlight = /** @class */ (function () {
67
79
  index = (!treemap.legendSettings.removeDuplicateLegend && treemap.palette && treemap.palette.length > 0 &&
68
80
  treemap.leafItemSettings.colorMapping.length === 0 && treemap.levels.length === 0) ?
69
81
  parseFloat(targetId.split('_Item_Index_')[1]) : getLegendIndex(length_1, item, treemap);
82
+ if (isNullOrUndefined(index)) {
83
+ removeLegend(this.legendHighlightCollection, treemap);
84
+ removeLegend(this.shapeHighlightCollection, treemap);
85
+ this.legendHighlightCollection = [];
86
+ treemap.treeMapLegendModule.removeInteractivePointer();
87
+ }
70
88
  this.shapeElement = this.treemap.legendSettings.mode === 'Default' ? document.getElementById(this.treemap.element.id + '_Legend_Shape_Index_' + index) : document.getElementById(this.treemap.element.id + '_Legend_Index_' + index);
71
- if (this.shapeElement !== null && (selectionModule ? this.shapeElement.getAttribute('id') !== selectionModule.legendSelectId : true)) {
72
- var legendShapeElement = selectionModule ? selectionModule.shapeElement : null;
73
- if (selectionModule ? this.shapeElement !== legendShapeElement : true) {
89
+ if (this.shapeElement !== null) {
90
+ if (selectionModule ? this.shapeElement.id !== ((selectionModule && selectionModule.shapeElement)
91
+ ? selectionModule.shapeElement.id : null) : true) {
74
92
  this.currentElement.push({ currentElement: this.shapeElement });
75
93
  removeLegend(this.shapeHighlightCollection, treemap);
76
94
  this.shapeHighlightCollection.push({ legendEle: this.shapeElement, oldFill: collection[index]['legendFill'],
@@ -79,7 +97,7 @@ var TreeMapHighlight = /** @class */ (function () {
79
97
  });
80
98
  var legendText = this.treemap.legendSettings.mode === 'Default' ? document.getElementById(this.treemap.element.id + '_Legend_Text_Index_' + index)
81
99
  : document.getElementById(this.treemap.element.id + '_Legend_Index_' + index + '_Text');
82
- setColor(legendText, highlight.fill, highlight.opacity, highlight.border.color, highlight.border.width.toString());
100
+ setColor(legendText, highlight.fill, highlight.opacity, null, null);
83
101
  setColor(this.shapeElement, highlight.fill, highlight.opacity, highlight.border.color, highlight.border.width.toString());
84
102
  this.target = 'highlight';
85
103
  }
@@ -88,52 +106,39 @@ var TreeMapHighlight = /** @class */ (function () {
88
106
  this.highLightId = '';
89
107
  }
90
108
  }
91
- else if (this.currentElement.length > 0 && this.currentElement[this.currentElement.length - 1]['currentElement'] !== this.shapeElement) {
92
- removeSelectionWithHighlight(this.shapeHighlightCollection, this.currentElement, treemap);
93
- this.highLightId = '';
94
- if (this.treemap.legendSettings.mode === 'Interactive') {
95
- this.treemap.treeMapLegendModule.removeInteractivePointer();
96
- }
97
- }
98
109
  }
99
110
  orders = findHightLightItems(item, [], highlight.mode, treemap);
100
- if (this.treemap.legendSettings.visible ? selectionModule ? this.shapeElement ? this.shapeElement.getAttribute('id') !== selectionModule.legendSelectId : true : true : true) {
101
- if (this.treemap.legendSettings.visible ? selectionModule ?
102
- this.shapeElement !== selectionModule.shapeElement : true : true) {
103
- for (var i = 0; i < treeMapElement.childElementCount; i++) {
104
- element = treeMapElement.childNodes[i];
105
- process = true;
106
- var valuePath = treemap.rangeColorValuePath;
107
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
108
- var targetItem = treemap.layout.renderItems[parseFloat(targetId.split('_Item_Index_')[1])];
109
- item = treemap.layout.renderItems[parseFloat(element.id.split('_Item_Index_')[1])];
110
- for (var j = 0; j < selectionElements.length; j++) {
111
- if (element.id === selectionElements[j].id) {
112
- process = false;
113
- break;
114
- }
115
- }
116
- if (orders.indexOf(item['levelOrderName']) > -1 && process &&
117
- (!isNullOrUndefined(valuePath) && valuePath !== '' ?
118
- item['data'][valuePath] === targetItem['data'][valuePath] : true)) {
119
- highLightElements.push(element);
120
- items.push(item);
121
- }
122
- }
123
- removeClassNames(document.getElementsByClassName('treeMapHighLight'), 'treeMapHighLight', treemap);
124
- for (var k = 0; k < highLightElements.length; k++) {
125
- element = highLightElements[k];
126
- applyOptions(element.childNodes[0], { border: highlight.border, fill: highlight.fill, opacity: highlight.opacity });
127
- element.classList.add('treeMapHighLight');
128
- this.highLightId = targetId;
111
+ for (var i = 0; i < treeMapElement.childElementCount; i++) {
112
+ element = treeMapElement.childNodes[i];
113
+ process = true;
114
+ var valuePath = (treemap.rangeColorValuePath !== '') ? treemap.rangeColorValuePath : null;
115
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
116
+ var targetItem = treemap.layout.renderItems[parseFloat(targetId.split('_Item_Index_')[1])];
117
+ item = treemap.layout.renderItems[parseFloat(element.id.split('_Item_Index_')[1])];
118
+ for (var j = 0; j < selectionElements.length; j++) {
119
+ if (element.id === selectionElements[j].id ||
120
+ element.id === selectionElements[j].parentElement.id) {
121
+ process = false;
122
+ break;
129
123
  }
130
- eventArgs = { cancel: false, name: itemHighlight, treemap: treemap, items: items, elements: highLightElements };
131
- treemap.trigger(itemHighlight, eventArgs);
132
124
  }
133
- else {
134
- processHighlight = false;
125
+ if (orders.indexOf(item['levelOrderName']) > -1 && process &&
126
+ (!isNullOrUndefined(valuePath) ?
127
+ (item['data'][valuePath] === targetItem['data'][valuePath] ||
128
+ (highlight.mode !== 'Item' && treemap.levels.length > 0)) : true)) {
129
+ highLightElements.push(element);
130
+ items.push(item);
135
131
  }
136
132
  }
133
+ removeClassNames(document.getElementsByClassName('treeMapHighLight'), 'treeMapHighLight', treemap);
134
+ for (var k = 0; k < highLightElements.length; k++) {
135
+ element = highLightElements[k];
136
+ applyOptions(element.childNodes[0], { border: highlight.border, fill: highlight.fill, opacity: highlight.opacity });
137
+ element.classList.add('treeMapHighLight');
138
+ this.highLightId = targetId;
139
+ }
140
+ eventArgs = { cancel: false, name: itemHighlight, treemap: treemap, items: items, elements: highLightElements };
141
+ treemap.trigger(itemHighlight, eventArgs);
137
142
  }
138
143
  }
139
144
  else if (targetId.indexOf('_Legend_Shape') > -1 || targetId.indexOf('_Legend_Index') > -1 || targetId.indexOf('_Legend_Text_Index') > -1) {
@@ -149,7 +154,7 @@ var TreeMapHighlight = /** @class */ (function () {
149
154
  var itemIndex = void 0;
150
155
  var groupIndex = void 0;
151
156
  var length_2;
152
- var valuePath = treemap.rangeColorValuePath;
157
+ var valuePath = (treemap.rangeColorValuePath !== '') ? treemap.rangeColorValuePath : null;
153
158
  var targetEle = document.getElementById(targetId);
154
159
  if (this.shapeTarget === 'highlight') {
155
160
  removeLegend(this.legendHighlightCollection, this.treemap);
@@ -161,7 +166,8 @@ var TreeMapHighlight = /** @class */ (function () {
161
166
  var collection = this.treemap.treeMapLegendModule.legendCollections;
162
167
  for (var i = 0; i < dataLength; i++) {
163
168
  for (var j = 0; j < this.treemap.layout.renderItems.length; j++) {
164
- if ((!isNullOrUndefined(valuePath) && valuePath !== '' && treemap.leafItemSettings.colorMapping.length > 0)
169
+ if ((!isNullOrUndefined(valuePath) && treemap.leafItemSettings.colorMapping.length > 0 &&
170
+ treemap.levels.length === 0)
165
171
  ? treemap.treeMapLegendModule.legendCollections[targetIndex]['legendData'][i]['data'][valuePath] === treemap.layout.renderItems[j]['data'][valuePath]
166
172
  : (treemap.treeMapLegendModule.legendCollections[targetIndex]['legendData'][i]['levelOrderName'] === treemap.layout.renderItems[j]['levelOrderName'])) {
167
173
  itemIndex = j;
@@ -173,17 +179,20 @@ var TreeMapHighlight = /** @class */ (function () {
173
179
  length_2 = this.legendHighlightCollection.length;
174
180
  this.legendHighlightCollection[length_2 - 1]['ShapeCollection'] = { Elements: [] };
175
181
  }
176
- setColor(targetEle, highlight.fill, highlight.opacity, highlight.border.color, highlight.border.width.toString());
177
- var legendItem = void 0;
182
+ var legendShape = void 0;
183
+ var legendText = void 0;
178
184
  if (targetEle.id.indexOf('Text') > -1) {
179
- legendItem = this.treemap.legendSettings.mode === 'Interactive' ? document.getElementById(targetEle.id.replace('_Text', ''))
185
+ legendShape = this.treemap.legendSettings.mode === 'Interactive' ? document.getElementById(targetEle.id.replace('_Text', ''))
180
186
  : document.getElementById(this.treemap.element.id + '_Legend_Shape_Index_' + targetIndex);
187
+ setColor(targetEle, highlight.fill, highlight.opacity, null, null);
188
+ setColor(legendShape, highlight.fill, highlight.opacity, highlight.border.color, highlight.border.width.toString());
181
189
  }
182
190
  else {
183
- legendItem = this.treemap.legendSettings.mode === 'Interactive' ? document.getElementById(targetEle.id + '_Text')
191
+ legendText = this.treemap.legendSettings.mode === 'Interactive' ? document.getElementById(targetEle.id + '_Text')
184
192
  : document.getElementById(this.treemap.element.id + '_Legend_Text_Index_' + targetIndex);
193
+ setColor(legendText, highlight.fill, highlight.opacity, null, null);
194
+ setColor(targetEle, highlight.fill, highlight.opacity, highlight.border.color, highlight.border.width.toString());
185
195
  }
186
- setColor(legendItem, highlight.fill, highlight.opacity, highlight.border.color, highlight.border.width.toString());
187
196
  setColor(nodeEle, highlight.fill, highlight.opacity, highlight.border.color, highlight.border.width.toString());
188
197
  length_2 = this.legendHighlightCollection.length;
189
198
  this.legendHighlightCollection[length_2 - 1]['ShapeCollection']['Elements'].push(nodeEle);
@@ -194,7 +203,8 @@ var TreeMapHighlight = /** @class */ (function () {
194
203
  for (var j = 0; j < this.treemap.layout.renderItems.length; j++) {
195
204
  if ((this.treemap.treeMapLegendModule.legendCollections[targetIndex]['levelOrderName'] === this.treemap.layout.renderItems[j]['levelOrderName'] ||
196
205
  this.treemap.layout.renderItems[j]['levelOrderName'].indexOf(this.treemap.treeMapLegendModule.legendCollections[targetIndex]['levelOrderName']) > -1) &&
197
- ((!this.treemap.legendSettings.removeDuplicateLegend && treemap.palette && treemap.palette.length > 0) ?
206
+ ((!this.treemap.legendSettings.removeDuplicateLegend && treemap.palette && treemap.palette.length > 0 &&
207
+ !this.treemap.layout.renderItems[j].parent.isDrilled) ?
198
208
  targetIndex === j : true)) {
199
209
  itemIndex = j;
200
210
  groupIndex = this.treemap.layout.renderItems[j]['groupIndex'];
@@ -206,13 +216,15 @@ var TreeMapHighlight = /** @class */ (function () {
206
216
  if (targetEle.id.indexOf('Text') > -1) {
207
217
  legendItem = this.treemap.legendSettings.mode === 'Interactive' ? document.getElementById(targetEle.id.replace('_Text', ''))
208
218
  : document.getElementById(this.treemap.element.id + '_Legend_Shape_Index_' + targetIndex);
219
+ setColor(targetEle, highlight.fill, highlight.opacity, null, null);
220
+ setColor(legendItem, highlight.fill, highlight.opacity, highlight.border.color, highlight.border.width.toString());
209
221
  }
210
222
  else {
211
223
  legendItem = this.treemap.legendSettings.mode === 'Interactive' ? document.getElementById(targetEle.id + '_Text')
212
224
  : document.getElementById(this.treemap.element.id + '_Legend_Text_Index_' + targetIndex);
225
+ setColor(legendItem, highlight.fill, highlight.opacity, null, null);
226
+ setColor(targetEle, highlight.fill, highlight.opacity, highlight.border.color, highlight.border.width.toString());
213
227
  }
214
- setColor(legendItem, highlight.fill, highlight.opacity, highlight.border.color, highlight.border.width.toString());
215
- setColor(targetEle, highlight.fill, highlight.opacity, highlight.border.color, highlight.border.width.toString());
216
228
  setColor(nodeEle, highlight.fill, highlight.opacity, highlight.border.color, highlight.border.width.toString());
217
229
  length_2 = this.legendHighlightCollection.length;
218
230
  this.legendHighlightCollection[length_2 - 1]['ShapeCollection']['Elements'].push(nodeEle);
@@ -220,6 +232,11 @@ var TreeMapHighlight = /** @class */ (function () {
220
232
  }
221
233
  }
222
234
  }
235
+ else {
236
+ removeClassNames(document.getElementsByClassName('treeMapHighLight'), 'treeMapHighLight', treemap);
237
+ removeLegend(this.legendHighlightCollection, treemap);
238
+ this.legendHighlightCollection = [];
239
+ }
223
240
  }
224
241
  else {
225
242
  if (selectionModule ? this.shapeElement ? this.shapeElement.getAttribute('id') !== selectionModule.legendSelectId : true : true) {
@@ -314,8 +331,24 @@ var TreeMapSelection = /** @class */ (function () {
314
331
  */
315
332
  TreeMapSelection.prototype.mouseDown = function (e) {
316
333
  var targetEle = e.target;
334
+ e.preventDefault();
335
+ this.selectionOnMouseDown(targetEle);
336
+ };
337
+ /**
338
+ * This method selects the target element for mouse down event.
339
+ *
340
+ * @param {Element} targetEle - Specifies the target element that was clicked.
341
+ * @returns {void}
342
+ * @private
343
+ */
344
+ TreeMapSelection.prototype.selectionOnMouseDown = function (targetEle) {
317
345
  var eventArgs;
318
346
  var treemap = this.treemap;
347
+ targetEle.setAttribute('tabindex', '-1');
348
+ targetEle.style.outline = 'none';
349
+ if (!targetEle.id.includes('Legend_Shape_Index')) {
350
+ targetEle.focus();
351
+ }
319
352
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
320
353
  var items = [];
321
354
  var targetId = targetEle.id;
@@ -331,10 +364,13 @@ var TreeMapSelection = /** @class */ (function () {
331
364
  var layoutID = treemap.element.id + '_TreeMap_' + treemap.layoutType + '_Layout';
332
365
  item = treemap.layout.renderItems[parseFloat(targetId.split('_Item_Index_')[1])];
333
366
  var isDrillItem = (item && !item.isLeafItem && treemap.enableDrillDown) &&
334
- (targetEle.nextSibling.textContent.indexOf('[+]') > -1 || targetEle.nextSibling.textContent.indexOf('[-]') > -1);
367
+ (targetEle.textContent.indexOf('[+]') > -1 || targetEle.textContent.indexOf('[-]') > -1 ||
368
+ (!isNullOrUndefined(targetEle.nextElementSibling) &&
369
+ (targetEle.nextSibling.textContent.indexOf('[+]') > -1 || targetEle.nextSibling.textContent.indexOf('[-]') > -1)));
335
370
  if (targetId.indexOf('_Item_Index') > -1 && !isDrillItem) {
336
- e.preventDefault();
337
- if (this.treemap.selectionId !== targetId) {
371
+ if ((this.treemap.selectionId !== targetId &&
372
+ (treemap.selectionId ? parseFloat(treemap.selectionId.split('_Item_Index_')[1]) !== parseFloat(targetId.split('_Item_Index_')[1]) : true)) ||
373
+ (this.legendSelectionCollection[0] ? this.legendSelectionCollection[0]['ShapeCollection']['Elements'].length > 1 : false)) {
338
374
  treemap.levelSelection = [];
339
375
  treemap.legendId = [];
340
376
  this.shapeSelectId = '';
@@ -366,7 +402,7 @@ var TreeMapSelection = /** @class */ (function () {
366
402
  });
367
403
  var legendText = this.treemap.legendSettings.mode === 'Default' ? document.getElementById(this.treemap.element.id + '_Legend_Text_Index_' + index)
368
404
  : document.getElementById(this.treemap.element.id + '_Legend_Index_' + index + '_Text');
369
- setColor(legendText, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
405
+ setColor(legendText, selection.fill, selection.opacity, null, null);
370
406
  setColor(this.shapeElement, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
371
407
  treemap.legendId.push(this.shapeElement.id);
372
408
  treemap.legendId.push(legendText.id);
@@ -378,13 +414,14 @@ var TreeMapSelection = /** @class */ (function () {
378
414
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
379
415
  var targetItem = treemap.layout.renderItems[parseFloat(targetId.split('_Item_Index_')[1])];
380
416
  item = treemap.layout.renderItems[parseFloat(element.id.split('_Item_Index_')[1])];
381
- var valuePath = treemap.rangeColorValuePath;
417
+ var valuePath = (treemap.rangeColorValuePath !== '') ? treemap.rangeColorValuePath : null;
382
418
  if (orders.indexOf(item['levelOrderName']) > -1 &&
383
- (!isNullOrUndefined(valuePath) && valuePath !== '' ?
384
- item['data'][valuePath] === targetItem['data'][valuePath] : true)) {
419
+ (!isNullOrUndefined(valuePath) ?
420
+ (item['data'][valuePath] === targetItem['data'][valuePath] ||
421
+ (selection.mode !== 'Item' && treemap.levels.length > 0)) : true)) {
385
422
  selectionElements.push(element);
386
423
  if (targetId.indexOf('_RectPath') > -1) {
387
- treemap.levelSelection.push(targetId);
424
+ treemap.levelSelection.push(element.id);
388
425
  }
389
426
  items.push(item);
390
427
  }
@@ -417,14 +454,17 @@ var TreeMapSelection = /** @class */ (function () {
417
454
  }
418
455
  }
419
456
  else {
457
+ removeLegend(this.legendSelectionCollection, treemap);
420
458
  removeLegend(this.shapeSelectionCollection, treemap);
421
459
  this.treemap.legendId = [];
422
460
  this.shapeSelectionCollection = [];
461
+ this.legendSelectionCollection = [];
423
462
  this.shapeElement = undefined;
424
463
  this.shapeSelect = true;
425
464
  this.shapeSelectId = '';
426
465
  this.treemap.levelSelection = [];
427
- if (this.legendSelect) {
466
+ this.legendSelectId = '';
467
+ if (this.legendSelect || this.shapeSelect) {
428
468
  removeClassNames(document.getElementsByClassName('treeMapSelection'), 'treeMapSelection', treemap);
429
469
  this.treemap.selectionId = '';
430
470
  }
@@ -454,13 +494,14 @@ var TreeMapSelection = /** @class */ (function () {
454
494
  highlightModule.shapeTarget = 'selection';
455
495
  highlightModule.legendHighlightCollection = [];
456
496
  }
457
- var valuePath = treemap.rangeColorValuePath;
497
+ var valuePath = (treemap.rangeColorValuePath !== '') ? treemap.rangeColorValuePath : null;
458
498
  var index = this.treemap.legendSettings.mode === 'Default' ? (targetId.indexOf('Text') === -1 ? parseFloat(targetId.split('_Legend_Shape_Index_')[1]) : parseFloat(targetId.split('_Legend_Text_Index_')[1]))
459
499
  : parseFloat(targetId.split('_Legend_Index_')[1]);
460
500
  var dataLength = this.treemap.treeMapLegendModule.legendCollections[index]['legendData'].length;
461
501
  for (var k = 0; k < dataLength; k++) {
462
502
  for (var l = 0; l < this.treemap.layout.renderItems.length; l++) {
463
- if ((!isNullOrUndefined(valuePath) && valuePath !== '' && treemap.leafItemSettings.colorMapping.length > 0) ?
503
+ if ((!isNullOrUndefined(valuePath) && treemap.leafItemSettings.colorMapping.length > 0 &&
504
+ treemap.levels.length === 0) ?
464
505
  (treemap.treeMapLegendModule.legendCollections[index]['legendData'][k]['data'][valuePath] === treemap.layout.renderItems[l]['data'][valuePath])
465
506
  : (this.treemap.treeMapLegendModule.legendCollections[index]['legendData'][k]['levelOrderName'] === this.treemap.layout.renderItems[l]['levelOrderName'])) {
466
507
  itemIndex = l;
@@ -473,29 +514,30 @@ var TreeMapSelection = /** @class */ (function () {
473
514
  this.legendSelectionCollection[length_4 - 1]['ShapeCollection'] = { Elements: [] };
474
515
  }
475
516
  this.treemap.selectionId = nodeEle.id;
476
- var legendItem = void 0;
517
+ var legendShape = void 0;
518
+ var legendText = void 0;
477
519
  if (targetEle_1.id.indexOf('Text') > -1) {
478
- legendItem = this.treemap.legendSettings.mode === 'Interactive' ? document.getElementById(targetEle_1.id.replace('_Text', ''))
520
+ legendShape = this.treemap.legendSettings.mode === 'Interactive' ? document.getElementById(targetEle_1.id.replace('_Text', ''))
479
521
  : document.getElementById(this.treemap.element.id + '_Legend_Shape_Index_' + index);
480
- this.legendSelectId = legendItem.id;
481
- this.shapeElement = legendItem;
522
+ setColor(legendShape, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
523
+ setColor(targetEle_1, selection.fill, selection.opacity, null, null);
524
+ this.legendSelectId = legendShape.id;
525
+ this.shapeElement = legendShape;
526
+ treemap.legendId.push(targetEle_1.id);
527
+ treemap.legendId.push(legendShape.id);
482
528
  }
483
529
  else {
484
- legendItem = this.treemap.legendSettings.mode === 'Interactive' ? document.getElementById(targetEle_1.id + '_Text')
530
+ legendText = this.treemap.legendSettings.mode === 'Interactive' ? document.getElementById(targetEle_1.id + '_Text')
485
531
  : document.getElementById(this.treemap.element.id + '_Legend_Text_Index_' + index);
532
+ setColor(legendText, selection.fill, selection.opacity, null, null);
533
+ setColor(targetEle_1, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
486
534
  this.shapeElement = targetEle_1;
535
+ treemap.legendId.push(targetEle_1.id);
536
+ treemap.legendId.push(legendText.id);
487
537
  }
488
- setColor(legendItem, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
489
- setColor(targetEle_1, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
490
538
  setColor(nodeEle, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
491
539
  length_4 = this.legendSelectionCollection.length;
492
540
  treemap.levelSelection.push(nodeEle.id);
493
- if (treemap.legendId.indexOf(targetEle_1.id) === -1) {
494
- treemap.legendId.push(targetEle_1.id);
495
- }
496
- if (treemap.legendId.indexOf(legendItem.id) === -1) {
497
- treemap.legendId.push(legendItem.id);
498
- }
499
541
  this.legendSelectionCollection[length_4 - 1]['ShapeCollection']['Elements'].push(nodeEle);
500
542
  }
501
543
  }
@@ -504,7 +546,8 @@ var TreeMapSelection = /** @class */ (function () {
504
546
  for (var j = 0; j < this.treemap.layout.renderItems.length; j++) {
505
547
  if ((this.treemap.treeMapLegendModule.legendCollections[index]['levelOrderName'] === this.treemap.layout.renderItems[j]['levelOrderName'] ||
506
548
  this.treemap.layout.renderItems[j]['levelOrderName'].indexOf(this.treemap.treeMapLegendModule.legendCollections[index]['levelOrderName']) > -1) &&
507
- ((!this.treemap.legendSettings.removeDuplicateLegend && treemap.palette && treemap.palette.length > 0) ?
549
+ ((!this.treemap.legendSettings.removeDuplicateLegend && treemap.palette && treemap.palette.length > 0 &&
550
+ !this.treemap.layout.renderItems[j].parent.isDrilled) ?
508
551
  index === j : true)) {
509
552
  itemIndex = j;
510
553
  groupIndex = this.treemap.layout.renderItems[j]['groupIndex'];
@@ -517,17 +560,19 @@ var TreeMapSelection = /** @class */ (function () {
517
560
  if (targetEle_1.id.indexOf('Text') > -1) {
518
561
  legendItem = this.treemap.legendSettings.mode === 'Interactive' ? document.getElementById(targetEle_1.id.replace('_Text', ''))
519
562
  : document.getElementById(this.treemap.element.id + '_Legend_Shape_Index_' + index);
563
+ setColor(targetEle_1, selection.fill, selection.opacity, null, null);
564
+ setColor(legendItem, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
520
565
  this.legendSelectId = legendItem.id;
521
566
  this.shapeElement = legendItem;
522
567
  }
523
568
  else {
524
569
  legendItem = this.treemap.legendSettings.mode === 'Interactive' ? document.getElementById(targetEle_1.id + '_Text')
525
570
  : document.getElementById(this.treemap.element.id + '_Legend_Text_Index_' + index);
571
+ setColor(legendItem, selection.fill, selection.opacity, null, null);
572
+ setColor(targetEle_1, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
526
573
  this.legendSelectId = targetId;
527
574
  this.shapeElement = targetEle_1;
528
575
  }
529
- setColor(legendItem, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
530
- setColor(targetEle_1, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
531
576
  setColor(nodeEle, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
532
577
  treemap.levelSelection.push(nodeEle.id);
533
578
  if (treemap.legendId.indexOf(legendItem.id) === -1) {
@@ -544,6 +589,7 @@ var TreeMapSelection = /** @class */ (function () {
544
589
  }
545
590
  else {
546
591
  removeLegend(this.legendSelectionCollection, this.treemap);
592
+ removeLegend(this.shapeSelectionCollection, this.treemap);
547
593
  this.legendSelectionCollection = [];
548
594
  if (highlightModule) {
549
595
  highlightModule.shapeTarget = 'highlight';
@@ -552,6 +598,12 @@ var TreeMapSelection = /** @class */ (function () {
552
598
  this.legendSelectId = '';
553
599
  this.treemap.legendId = [];
554
600
  this.treemap.levelSelection = [];
601
+ this.shapeElement = null;
602
+ this.shapeSelectId = '';
603
+ if (this.legendSelect || this.shapeSelect) {
604
+ removeClassNames(document.getElementsByClassName('treeMapSelection'), 'treeMapSelection', treemap);
605
+ this.treemap.selectionId = '';
606
+ }
555
607
  }
556
608
  }
557
609
  else if (isDrillItem) {
@@ -561,6 +613,8 @@ var TreeMapSelection = /** @class */ (function () {
561
613
  this.legendSelectId = '';
562
614
  this.treemap.legendId = [];
563
615
  this.treemap.levelSelection = [];
616
+ this.treemap.selectionId = '';
617
+ this.shapeElement = null;
564
618
  }
565
619
  };
566
620
  /**
package/src/treemap/user-interaction/tooltip.js CHANGED
@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
9
9
  };
10
10
  import { Tooltip } from '@syncfusion/ej2-svg-base';
11
11
  import { Browser, createElement, isNullOrUndefined, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
12
- import { getMousePosition, textFormatter, formatValue } from '../utils/helper';
12
+ import { getMousePosition, textFormatter, formatValue, removeElement } from '../utils/helper';
13
13
  import { tooltipRendering } from '../model/constants';
14
14
  /**
15
15
  * Render Tooltip
@@ -51,7 +51,7 @@ var TreeMapTooltip = /** @class */ (function () {
51
51
  var toolTipData = {};
52
52
  var tooltipContent = [];
53
53
  var markerFill;
54
- if (targetId.indexOf('_Item_Index') > -1) {
54
+ if (targetId.indexOf('_Item_Index') > -1 && e.type.indexOf('key') === -1) {
55
55
  item = this.treemap.layout.renderItems[parseFloat(targetId.split('_Item_Index_')[1])];
56
56
  if (!isNullOrUndefined(item)) {
57
57
  value = item['weight'];
@@ -220,6 +220,8 @@ var TreeMapTooltip = /** @class */ (function () {
220
220
  TreeMapTooltip.prototype.destroy = function () {
221
221
  if (!isNullOrUndefined(this.svgTooltip)) {
222
222
  this.svgTooltip.destroy();
223
+ this.svgTooltip.controlInstance = null;
224
+ removeElement(this.treemap.element.id + '_TreeMapTooltip');
223
225
  }
224
226
  this.svgTooltip = null;
225
227
  this.tooltipSettings = null;
package/src/treemap/utils/helper.js CHANGED
@@ -585,12 +585,10 @@ export function colorMap(colorMapping, equalValue, value) {
585
585
  for (var i = 0; i < colorMapping.length; i++) {
586
586
  var isEqualColor = false;
587
587
  var dataValue = value;
588
- var colorMappingValue = colorMapping[i].value ? colorMapping[i].value.toString() :
589
- colorMapping[i].value;
590
588
  if (!isNullOrUndefined(colorMapping[i].from) && !isNullOrUndefined(colorMapping[i].to)
591
589
  && !isNullOrUndefined(colorMapping[i].value)) {
592
590
  if ((value >= colorMapping[i].from && colorMapping[i].to >= value) &&
593
- (colorMappingValue === equalValue)) {
591
+ (colorMapping[i].value === equalValue)) {
594
592
  isEqualColor = true;
595
593
  if (Object.prototype.toString.call(colorMapping[i].color) === '[object Array]') {
596
594
  fill = !isEqualColor ? colorCollections(colorMapping[i], dataValue) : colorMapping[i].color[0];
@@ -603,8 +601,8 @@ export function colorMap(colorMapping, equalValue, value) {
603
601
  else if ((!isNullOrUndefined(colorMapping[i].from) && !isNullOrUndefined(colorMapping[i].to))
604
602
  || !isNullOrUndefined((colorMapping[i].value))) {
605
603
  if ((value >= colorMapping[i].from && colorMapping[i].to >= value)
606
- || (colorMappingValue === equalValue)) {
607
- if (colorMappingValue === equalValue) {
604
+ || (colorMapping[i].value === equalValue)) {
605
+ if (colorMapping[i].value === equalValue) {
608
606
  isEqualColor = true;
609
607
  }
610
608
  if (Object.prototype.toString.call(colorMapping[i].color) === '[object Array]') {
@@ -616,7 +614,7 @@ export function colorMap(colorMapping, equalValue, value) {
616
614
  }
617
615
  }
618
616
  if (((value >= colorMapping[i].from && value <= colorMapping[i].to)
619
- || (colorMappingValue === equalValue))
617
+ || (colorMapping[i].value === equalValue))
620
618
  && !isNullOrUndefined(colorMapping[i].minOpacity) && !isNullOrUndefined(colorMapping[i].maxOpacity)
621
619
  && fill) {
622
620
  opacity = deSaturationColor(colorMapping[i], value);
@@ -893,7 +891,7 @@ export function maintainSelection(treemap, element, className) {
893
891
  for (var index = 0; index < elementId.length; index++) {
894
892
  if (element.getAttribute('id') === elementId[index] ||
895
893
  element.children[0].id === elementId[index]) {
896
- if (element.childElementCount > 0) {
894
+ if (element.childElementCount > 0 && element.children[0].id.indexOf('_Group') === -1) {
897
895
  element.children[0].setAttribute('class', className);
898
896
  applyOptions(element.childNodes[0], {
899
897
  border: treemap.selectionSettings.border, fill: treemap.selectionSettings.fill,
@@ -923,9 +921,15 @@ export function legendMaintain(treemap, legendGroup) {
923
921
  parseFloat(legendGroup.childNodes[j]['id'].split('Index_')[1]) === parseFloat(elementId[i].split('Index_')[1])) {
924
922
  var treemapSVGRectElement = legendGroup.childNodes[j];
925
923
  treemapSVGRectElement.setAttribute('fill', treemap.selectionSettings.fill);
926
- treemapSVGRectElement.setAttribute('stroke', treemap.selectionSettings.border.color);
927
- treemapSVGRectElement.setAttribute('stroke-width', (treemap.selectionSettings.border.width).toString());
928
924
  treemapSVGRectElement.setAttribute('opacity', treemap.selectionSettings.opacity);
925
+ if (treemapSVGRectElement.id.indexOf('Text') === -1) {
926
+ treemapSVGRectElement.setAttribute('stroke-width', (treemap.selectionSettings.border.width).toString());
927
+ treemapSVGRectElement.setAttribute('stroke', treemap.selectionSettings.border.color);
928
+ }
929
+ else {
930
+ treemapSVGRectElement.setAttribute('stroke', null);
931
+ treemapSVGRectElement.setAttribute('stroke-width', null);
932
+ }
929
933
  }
930
934
  }
931
935
  }
@@ -933,9 +937,15 @@ export function legendMaintain(treemap, legendGroup) {
933
937
  var legendItem = document.getElementById(elementId[i]);
934
938
  if (!isNullOrUndefined(legendItem)) {
935
939
  legendItem.setAttribute('fill', treemap.selectionSettings.fill);
936
- legendItem.setAttribute('stroke', treemap.selectionSettings.border.color);
937
- legendItem.setAttribute('stroke-width', (treemap.selectionSettings.border.width).toString());
938
940
  legendItem.setAttribute('opacity', treemap.selectionSettings.opacity);
941
+ if (legendItem.id.indexOf('Text') === -1) {
942
+ legendItem.setAttribute('stroke', treemap.selectionSettings.border.color);
943
+ legendItem.setAttribute('stroke-width', (treemap.selectionSettings.border.width).toString());
944
+ }
945
+ else {
946
+ legendItem.setAttribute('stroke', null);
947
+ legendItem.setAttribute('stroke-width', null);
948
+ }
939
949
  }
940
950
  }
941
951
  }
@@ -1243,10 +1253,10 @@ export function removeLegend(collection, treeMap) {
1243
1253
  ? document.getElementById(shapeId + '_Text')
1244
1254
  : document.getElementById(treeMap.element.id + '_Legend_Text_Index_' + legendIndex);
1245
1255
  if (!isNullOrUndefined(legendShape)) {
1246
- setColor(legendShape, item['oldFill'], item['oldOpacity'], item['oldBorderColor'], item['oldBorderWidth']);
1256
+ setColor(legendShape, item['oldFill'], item['oldOpacity'], 'none', '0px');
1247
1257
  }
1248
1258
  if (!isNullOrUndefined(legendText)) {
1249
- setColor(legendText, treeMap.legendSettings.textStyle.color, item['oldOpacity'], item['oldBorderColor'], item['oldBorderWidth']);
1259
+ setColor(legendText, treeMap.legendSettings.textStyle.color || treeMap.themeStyle.legendTextColor, item['oldOpacity'], null, null);
1250
1260
  }
1251
1261
  var dataCount = !isNullOrUndefined(item['ShapeCollection']) ? item['ShapeCollection']['Elements'].length : 0;
1252
1262
  for (var k = 0; k < dataCount; k++) {
@@ -1270,8 +1280,12 @@ export function removeLegend(collection, treeMap) {
1270
1280
  export function setColor(element, fill, opacity, borderColor, borderWidth) {
1271
1281
  element.setAttribute('fill', fill);
1272
1282
  element.setAttribute('opacity', opacity);
1273
- element.setAttribute('stroke', borderColor);
1274
- element.setAttribute('stroke-width', borderWidth);
1283
+ if (!isNullOrUndefined(borderColor)) {
1284
+ element.setAttribute('stroke', borderColor);
1285
+ }
1286
+ if (!isNullOrUndefined(borderWidth)) {
1287
+ element.setAttribute('stroke-width', borderWidth);
1288
+ }
1275
1289
  }
1276
1290
  /**
1277
1291
  *
@@ -1294,16 +1308,18 @@ export function removeSelectionWithHighlight(collection, element, treemap) {
1294
1308
  */
1295
1309
  export function getLegendIndex(length, item, treemap) {
1296
1310
  var index;
1297
- var valuePath = treemap.rangeColorValuePath;
1298
- for (var i = 0; i < length; i++) {
1311
+ var valuePath = (treemap.rangeColorValuePath !== '') ? treemap.rangeColorValuePath : null;
1312
+ var indexFound = false;
1313
+ for (var i = 0; i < length && !indexFound; i++) {
1299
1314
  var dataLength = treemap.treeMapLegendModule.legendCollections[i]['legendData'].length;
1300
1315
  if (dataLength > 0) {
1301
1316
  for (var j = 0; j < dataLength; j++) {
1302
- if ((!isNullOrUndefined(valuePath) && valuePath !== '' && treemap.leafItemSettings.colorMapping.length > 0 ?
1317
+ if ((!isNullOrUndefined(valuePath) && treemap.leafItemSettings.colorMapping.length > 0 ?
1303
1318
  (treemap.treeMapLegendModule.legendCollections[i]['legendData'][j]['data'][valuePath] === item['data'][valuePath])
1304
1319
  : treemap.treeMapLegendModule.legendCollections[i]['legendData'][j]['levelOrderName'] === item['levelOrderName']
1305
1320
  || item['levelOrderName'].indexOf(treemap.treeMapLegendModule.legendCollections[i]['legendName']) > -1)) {
1306
1321
  index = i;
1322
+ indexFound = true;
1307
1323
  break;
1308
1324
  }
1309
1325
  }