@syncfusion/ej2-treemap 19.2.60 → 19.4.48
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.
- package/.eslintrc.json +1 -1
- package/.github/PULL_REQUEST_TEMPLATE/Bug.md +72 -0
- package/.github/PULL_REQUEST_TEMPLATE/Feature.md +49 -0
- package/CHANGELOG.md +0 -14
- package/README.md +1 -1
- package/dist/ej2-treemap.umd.min.js +2 -2
- package/dist/ej2-treemap.umd.min.js.map +1 -1
- package/dist/es6/ej2-treemap.es2015.js +110 -192
- package/dist/es6/ej2-treemap.es2015.js.map +1 -1
- package/dist/es6/ej2-treemap.es5.js +110 -192
- package/dist/es6/ej2-treemap.es5.js.map +1 -1
- package/dist/global/ej2-treemap.min.js +2 -2
- package/dist/global/ej2-treemap.min.js.map +1 -1
- package/dist/global/index.d.ts +1 -1
- package/package.json +11 -11
- package/src/treemap/layout/legend.js +1 -18
- package/src/treemap/layout/render-panel.js +1 -16
- package/src/treemap/model/base-model.d.ts +0 -2
- package/src/treemap/model/base.d.ts +0 -2
- package/src/treemap/model/pdf-export.js +1 -1
- package/src/treemap/model/theme.js +68 -0
- package/src/treemap/treemap-model.d.ts +1 -19
- package/src/treemap/treemap.d.ts +0 -20
- package/src/treemap/treemap.js +19 -99
- package/src/treemap/user-interaction/highlight-selection.js +5 -39
- package/src/treemap/user-interaction/tooltip.js +4 -21
- package/src/treemap/utils/enum.d.ts +5 -1
- package/src/treemap/utils/helper.d.ts +1 -0
- package/src/treemap/utils/helper.js +13 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Ajax, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, NotifyPropertyChanges, Property, compile, createElement, extend,
|
|
1
|
+
import { Ajax, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, NotifyPropertyChanges, Property, compile, createElement, extend, isNullOrUndefined, merge, print, remove } from '@syncfusion/ej2-base';
|
|
2
2
|
import { SvgRenderer, Tooltip } from '@syncfusion/ej2-svg-base';
|
|
3
3
|
import { DataManager, Query } from '@syncfusion/ej2-data';
|
|
4
4
|
import { PdfBitmap, PdfDocument, PdfPageOrientation } from '@syncfusion/ej2-pdf-export';
|
|
@@ -851,6 +851,19 @@ function renderTextElement(options, font, color, parent, isMinus) {
|
|
|
851
851
|
}
|
|
852
852
|
return htmlObject;
|
|
853
853
|
}
|
|
854
|
+
function setItemTemplateContent(targetId, targetElement, contentItemTemplate) {
|
|
855
|
+
var itemSelect = targetId.split('_RectPath')[0];
|
|
856
|
+
var itemTemplate;
|
|
857
|
+
if (targetId.indexOf('_LabelTemplate') > -1) {
|
|
858
|
+
itemTemplate = targetElement;
|
|
859
|
+
}
|
|
860
|
+
else {
|
|
861
|
+
itemTemplate = document.querySelector('#' + itemSelect + '_LabelTemplate');
|
|
862
|
+
}
|
|
863
|
+
if (!isNullOrUndefined(itemTemplate)) {
|
|
864
|
+
itemTemplate.innerHTML = contentItemTemplate;
|
|
865
|
+
}
|
|
866
|
+
}
|
|
854
867
|
function getElement(id) {
|
|
855
868
|
return document.getElementById(id);
|
|
856
869
|
}
|
|
@@ -1653,15 +1666,6 @@ function removeElement(id) {
|
|
|
1653
1666
|
return element ? remove(element) : null;
|
|
1654
1667
|
}
|
|
1655
1668
|
|
|
1656
|
-
var __rest$1 = (undefined && undefined.__rest) || function (s, e) {
|
|
1657
|
-
var t = {};
|
|
1658
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
1659
|
-
t[p] = s[p];
|
|
1660
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
1661
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
|
|
1662
|
-
t[p[i]] = s[p[i]];
|
|
1663
|
-
return t;
|
|
1664
|
-
};
|
|
1665
1669
|
/**
|
|
1666
1670
|
* To calculate and render the shape layer
|
|
1667
1671
|
*/
|
|
@@ -2187,10 +2191,6 @@ var LayoutPanel = /** @__PURE__ @class */ (function () {
|
|
|
2187
2191
|
cancel: false, name: itemRendering, treemap: this_1.treemap, text: renderText,
|
|
2188
2192
|
currentItem: item, RenderItems: this_1.renderItems, options: item['options']
|
|
2189
2193
|
};
|
|
2190
|
-
if (this_1.treemap.isBlazor) {
|
|
2191
|
-
var treemap = eventArgs.treemap, RenderItems = eventArgs.RenderItems, blazorEventArgs = __rest$1(eventArgs, ["treemap", "RenderItems"]);
|
|
2192
|
-
eventArgs = blazorEventArgs;
|
|
2193
|
-
}
|
|
2194
2194
|
this_1.treemap.trigger(itemRendering, eventArgs, function (observedArgs) {
|
|
2195
2195
|
if (!observedArgs.cancel) {
|
|
2196
2196
|
rectPath = ' M ' + rect.x + ' ' + rect.y + ' L ' + (rect.x + rect.width) + ' ' + rect.y +
|
|
@@ -2223,8 +2223,6 @@ var LayoutPanel = /** @__PURE__ @class */ (function () {
|
|
|
2223
2223
|
}
|
|
2224
2224
|
if (templateGroup.childNodes.length > 0) {
|
|
2225
2225
|
secondaryEle.appendChild(templateGroup);
|
|
2226
|
-
updateBlazorTemplate(this.treemap.element.id + '_HeaderTemplate', 'HeaderTemplate', levels[levels.length - 1]);
|
|
2227
|
-
updateBlazorTemplate(this.treemap.element.id + '_LabelTemplate', 'LabelTemplate', leaf);
|
|
2228
2226
|
}
|
|
2229
2227
|
this.treemap.svgObject.appendChild(this.layoutGroup);
|
|
2230
2228
|
};
|
|
@@ -2497,6 +2495,74 @@ function getThemeStyle(theme) {
|
|
|
2497
2495
|
labelFontFamily: 'Inter'
|
|
2498
2496
|
};
|
|
2499
2497
|
break;
|
|
2498
|
+
case 'bootstrap5':
|
|
2499
|
+
style = {
|
|
2500
|
+
backgroundColor: 'rgba(255,255,255, 0.0)',
|
|
2501
|
+
titleFontColor: '#212529',
|
|
2502
|
+
subTitleFontColor: '#212529',
|
|
2503
|
+
tooltipFillColor: '#212529',
|
|
2504
|
+
tooltipFontColor: '#F9FAFB',
|
|
2505
|
+
tooltipFillOpacity: 1,
|
|
2506
|
+
tooltipTextOpacity: 1,
|
|
2507
|
+
legendTitleColor: '#212529',
|
|
2508
|
+
legendTextColor: '#212529',
|
|
2509
|
+
fontFamily: 'Helvetica Neue',
|
|
2510
|
+
fontSize: '14px',
|
|
2511
|
+
legendFontSize: '12px',
|
|
2512
|
+
labelFontFamily: 'Helvetica Neue'
|
|
2513
|
+
};
|
|
2514
|
+
break;
|
|
2515
|
+
case 'bootstrap5dark':
|
|
2516
|
+
style = {
|
|
2517
|
+
backgroundColor: 'rgba(255,255,255, 0.0)',
|
|
2518
|
+
titleFontColor: '#FFFFFF',
|
|
2519
|
+
subTitleFontColor: '#FFFFFF',
|
|
2520
|
+
tooltipFillColor: '#E9ECEF',
|
|
2521
|
+
tooltipFontColor: '#212529',
|
|
2522
|
+
tooltipFillOpacity: 1,
|
|
2523
|
+
tooltipTextOpacity: 1,
|
|
2524
|
+
legendTitleColor: '#FFFFFF',
|
|
2525
|
+
legendTextColor: '#FFFFFF',
|
|
2526
|
+
fontFamily: 'Helvetica Neue',
|
|
2527
|
+
fontSize: '14px',
|
|
2528
|
+
legendFontSize: '12px',
|
|
2529
|
+
labelFontFamily: 'Helvetica Neue'
|
|
2530
|
+
};
|
|
2531
|
+
break;
|
|
2532
|
+
case 'fluentui':
|
|
2533
|
+
style = {
|
|
2534
|
+
backgroundColor: 'rgba(255,255,255, 0.0)',
|
|
2535
|
+
titleFontColor: '#201F1E',
|
|
2536
|
+
subTitleFontColor: '#201F1E',
|
|
2537
|
+
tooltipFillColor: '#FFFFFF',
|
|
2538
|
+
tooltipFontColor: '#323130',
|
|
2539
|
+
tooltipFillOpacity: 1,
|
|
2540
|
+
tooltipTextOpacity: 1,
|
|
2541
|
+
legendTitleColor: '#201F1E',
|
|
2542
|
+
legendTextColor: '#201F1E',
|
|
2543
|
+
fontFamily: 'Segoe UI',
|
|
2544
|
+
fontSize: '14px',
|
|
2545
|
+
legendFontSize: '12px',
|
|
2546
|
+
labelFontFamily: 'Segoe UI'
|
|
2547
|
+
};
|
|
2548
|
+
break;
|
|
2549
|
+
case 'fluentuidark':
|
|
2550
|
+
style = {
|
|
2551
|
+
backgroundColor: 'rgba(255,255,255, 0.0)',
|
|
2552
|
+
titleFontColor: '#F3F2F1',
|
|
2553
|
+
subTitleFontColor: '#F3F2F1',
|
|
2554
|
+
tooltipFillColor: '#252423',
|
|
2555
|
+
tooltipFontColor: '#F3F2F1',
|
|
2556
|
+
tooltipFillOpacity: 1,
|
|
2557
|
+
tooltipTextOpacity: 1,
|
|
2558
|
+
legendTitleColor: '#F3F2F1',
|
|
2559
|
+
legendTextColor: '#F3F2F1',
|
|
2560
|
+
fontFamily: 'Segoe UI',
|
|
2561
|
+
fontSize: '14px',
|
|
2562
|
+
legendFontSize: '12px',
|
|
2563
|
+
labelFontFamily: 'Segoe UI'
|
|
2564
|
+
};
|
|
2565
|
+
break;
|
|
2500
2566
|
default:
|
|
2501
2567
|
style = {
|
|
2502
2568
|
backgroundColor: '#FFFFFF',
|
|
@@ -2731,7 +2797,7 @@ var PdfExport = /** @__PURE__ @class */ (function () {
|
|
|
2731
2797
|
var backgroundElement = exportElement.childNodes[0];
|
|
2732
2798
|
if (!isNullOrUndefined(backgroundElement)) {
|
|
2733
2799
|
var backgroundColor = backgroundElement.getAttribute('fill');
|
|
2734
|
-
if ((_this.control.theme === 'Tailwind' || _this.control.theme === 'TailwindDark')
|
|
2800
|
+
if ((_this.control.theme === 'Tailwind' || _this.control.theme === 'TailwindDark' || _this.control.theme === 'Bootstrap5' || _this.control.theme === 'Bootstrap5Dark')
|
|
2735
2801
|
&& (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
|
|
2736
2802
|
exportElement.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
|
|
2737
2803
|
}
|
|
@@ -2802,15 +2868,6 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
|
|
|
2802
2868
|
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
2803
2869
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
2804
2870
|
};
|
|
2805
|
-
var __rest = (undefined && undefined.__rest) || function (s, e) {
|
|
2806
|
-
var t = {};
|
|
2807
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
2808
|
-
t[p] = s[p];
|
|
2809
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
2810
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
|
|
2811
|
-
t[p[i]] = s[p[i]];
|
|
2812
|
-
return t;
|
|
2813
|
-
};
|
|
2814
2871
|
/**
|
|
2815
2872
|
* Represents the treemap component.
|
|
2816
2873
|
* ```html
|
|
@@ -2848,8 +2905,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
|
|
|
2848
2905
|
}
|
|
2849
2906
|
TreeMap.prototype.preRender = function () {
|
|
2850
2907
|
var _this = this;
|
|
2851
|
-
this.
|
|
2852
|
-
this.trigger(load, { treemap: this.isBlazor ? null : this }, function () {
|
|
2908
|
+
this.trigger(load, { treemap: this }, function () {
|
|
2853
2909
|
_this.initPrivateVariable();
|
|
2854
2910
|
_this.unWireEVents();
|
|
2855
2911
|
_this.createSvg();
|
|
@@ -2912,7 +2968,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
|
|
|
2912
2968
|
this.layout.processLayoutPanel();
|
|
2913
2969
|
this.element.appendChild(this.svgObject);
|
|
2914
2970
|
this.elementChange();
|
|
2915
|
-
this.trigger(loaded,
|
|
2971
|
+
this.trigger(loaded, { treemap: this, isResized: this.isResize });
|
|
2916
2972
|
this.isResize = false;
|
|
2917
2973
|
this.renderComplete();
|
|
2918
2974
|
};
|
|
@@ -2925,14 +2981,6 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
|
|
|
2925
2981
|
remove(this.svgObject);
|
|
2926
2982
|
}
|
|
2927
2983
|
}
|
|
2928
|
-
if (this.leafItemSettings.labelTemplate) {
|
|
2929
|
-
resetBlazorTemplate(this.element.id + '_LabelTemplate', 'LabelTemplate');
|
|
2930
|
-
}
|
|
2931
|
-
for (var i = 0; i < this.levels.length; i++) {
|
|
2932
|
-
if (this.levels[i].headerTemplate) {
|
|
2933
|
-
resetBlazorTemplate(this.element.id + '_HeaderTemplate', 'HeaderTemplate');
|
|
2934
|
-
}
|
|
2935
|
-
}
|
|
2936
2984
|
this.clearTemplate();
|
|
2937
2985
|
var containerWidth = this.element.clientWidth;
|
|
2938
2986
|
var containerHeight = this.element.clientHeight;
|
|
@@ -2970,7 +3018,8 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
|
|
|
2970
3018
|
}
|
|
2971
3019
|
};
|
|
2972
3020
|
TreeMap.prototype.elementChange = function () {
|
|
2973
|
-
if (this.treeMapLegendModule && this.legendSettings.visible && this.treeMapLegendModule.legendGroup && this.layout.layoutGroup
|
|
3021
|
+
if (this.treeMapLegendModule && this.legendSettings.visible && this.treeMapLegendModule.legendGroup && this.layout.layoutGroup
|
|
3022
|
+
&& !isNullOrUndefined(this.svgObject)) {
|
|
2974
3023
|
this.svgObject.insertBefore(this.layout.layoutGroup, this.treeMapLegendModule.legendGroup);
|
|
2975
3024
|
}
|
|
2976
3025
|
};
|
|
@@ -3394,12 +3443,8 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
|
|
|
3394
3443
|
cancel: false,
|
|
3395
3444
|
previousSize: this.availableSize,
|
|
3396
3445
|
currentSize: new Size(0, 0),
|
|
3397
|
-
treemap: this
|
|
3446
|
+
treemap: this
|
|
3398
3447
|
};
|
|
3399
|
-
if (this.isBlazor) {
|
|
3400
|
-
var treemap = args.treemap, blazorEventArgs = __rest(args, ["treemap"]);
|
|
3401
|
-
args = blazorEventArgs;
|
|
3402
|
-
}
|
|
3403
3448
|
if (this.resizeTo) {
|
|
3404
3449
|
clearTimeout(this.resizeTo);
|
|
3405
3450
|
}
|
|
@@ -3429,8 +3474,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
|
|
|
3429
3474
|
var itemIndex;
|
|
3430
3475
|
var labelText = targetEle.innerHTML;
|
|
3431
3476
|
var clickArgs = { cancel: false, name: click, treemap: this, mouseEvent: e };
|
|
3432
|
-
|
|
3433
|
-
this.trigger(click, this.isBlazor ? clickBlazorArgs : clickArgs);
|
|
3477
|
+
this.trigger(click, clickArgs);
|
|
3434
3478
|
if (targetId.indexOf('_Item_Index') > -1) {
|
|
3435
3479
|
e.preventDefault();
|
|
3436
3480
|
itemIndex = parseFloat(targetId.split('_')[6]);
|
|
@@ -3439,22 +3483,6 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
|
|
|
3439
3483
|
groupIndex: this.layout.renderItems[itemIndex]['groupIndex'], groupName: this.layout.renderItems[itemIndex]['name'],
|
|
3440
3484
|
text: labelText, contentItemTemplate: labelText
|
|
3441
3485
|
};
|
|
3442
|
-
if (this.isBlazor) {
|
|
3443
|
-
var data = {
|
|
3444
|
-
groupIndex: eventArgs.item['groupIndex'],
|
|
3445
|
-
groupName: eventArgs.item['groupName'],
|
|
3446
|
-
isDrilled: eventArgs.item['isDrilled'],
|
|
3447
|
-
isLeafItem: eventArgs.item['isLeafItem'],
|
|
3448
|
-
itemArea: eventArgs.item['itemArea'],
|
|
3449
|
-
levelOrderName: eventArgs.item['levelOrderName'],
|
|
3450
|
-
name: eventArgs.item['name'],
|
|
3451
|
-
options: eventArgs.item['options'],
|
|
3452
|
-
rect: eventArgs.item['rect']
|
|
3453
|
-
};
|
|
3454
|
-
eventArgs.item = this.layout.renderItems[itemIndex]['data'];
|
|
3455
|
-
var treemap = eventArgs.treemap, blazorEventArgs = __rest(eventArgs, ["treemap"]);
|
|
3456
|
-
eventArgs = blazorEventArgs;
|
|
3457
|
-
}
|
|
3458
3486
|
this.trigger(itemClick, eventArgs, function (observedArgs) {
|
|
3459
3487
|
if (observedArgs.text !== labelText || observedArgs.contentItemTemplate !== labelText) {
|
|
3460
3488
|
if (isNullOrUndefined(_this.leafItemSettings.labelTemplate)) {
|
|
@@ -3462,26 +3490,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
|
|
|
3462
3490
|
targetEle.innerHTML = observedArgs.text;
|
|
3463
3491
|
}
|
|
3464
3492
|
else {
|
|
3465
|
-
|
|
3466
|
-
var itemTemplate = void 0;
|
|
3467
|
-
if (targetId.indexOf('_LabelTemplate') > -1) {
|
|
3468
|
-
itemTemplate = targetEle;
|
|
3469
|
-
}
|
|
3470
|
-
else {
|
|
3471
|
-
itemTemplate = document.querySelector('#' + itemSelect + '_LabelTemplate');
|
|
3472
|
-
}
|
|
3473
|
-
if (!isNullOrUndefined(itemTemplate)) {
|
|
3474
|
-
if (_this.isBlazor) {
|
|
3475
|
-
var templateElement = createElement('div');
|
|
3476
|
-
templateElement.innerHTML = observedArgs.contentItemTemplate;
|
|
3477
|
-
var currentTemplateElement = templateElement.children[0].firstElementChild;
|
|
3478
|
-
itemTemplate['style']['left'] = Number(itemTemplate['style']['left'].split('px')[0])
|
|
3479
|
-
- (currentTemplateElement['style']['width'].split('px')[0] / 2) + 'px';
|
|
3480
|
-
itemTemplate['style']['top'] = Number(itemTemplate['style']['top'].split('px')[0])
|
|
3481
|
-
- (currentTemplateElement['style']['height'].split('px')[0] / 2) + 'px';
|
|
3482
|
-
}
|
|
3483
|
-
itemTemplate.innerHTML = observedArgs.contentItemTemplate;
|
|
3484
|
-
}
|
|
3493
|
+
setItemTemplateContent(targetId, targetEle, observedArgs.contentItemTemplate);
|
|
3485
3494
|
}
|
|
3486
3495
|
}
|
|
3487
3496
|
});
|
|
@@ -3502,8 +3511,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
|
|
|
3502
3511
|
*/
|
|
3503
3512
|
TreeMap.prototype.doubleClickOnTreeMap = function (e) {
|
|
3504
3513
|
var doubleClickArgs = { cancel: false, name: doubleClick, treemap: this, mouseEvent: e };
|
|
3505
|
-
|
|
3506
|
-
this.trigger(doubleClick, this.isBlazor ? doubleClickBlazorArgs : doubleClickArgs);
|
|
3514
|
+
this.trigger(doubleClick, doubleClickArgs);
|
|
3507
3515
|
//this.notify('dblclick', e);
|
|
3508
3516
|
};
|
|
3509
3517
|
/**
|
|
@@ -3513,8 +3521,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
|
|
|
3513
3521
|
*/
|
|
3514
3522
|
TreeMap.prototype.rightClickOnTreeMap = function (e) {
|
|
3515
3523
|
var rightClickArgs = { cancel: false, name: rightClick, treemap: this, mouseEvent: e };
|
|
3516
|
-
|
|
3517
|
-
this.trigger(rightClick, this.isBlazor ? rightClickBlazorArgs : rightClickArgs);
|
|
3524
|
+
this.trigger(rightClick, rightClickArgs);
|
|
3518
3525
|
};
|
|
3519
3526
|
/**
|
|
3520
3527
|
* This method handles the mouse down event in the treemap.
|
|
@@ -3539,8 +3546,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
|
|
|
3539
3546
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
3540
3547
|
var item;
|
|
3541
3548
|
var moveArgs = { cancel: false, name: mouseMove, treemap: this, mouseEvent: e };
|
|
3542
|
-
|
|
3543
|
-
this.trigger(mouseMove, this.isBlazor ? moveBlazorArgs : moveArgs);
|
|
3549
|
+
this.trigger(mouseMove, moveArgs);
|
|
3544
3550
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
3545
3551
|
var childItems;
|
|
3546
3552
|
if (targetId.indexOf('_Item_Index') > -1) {
|
|
@@ -3550,22 +3556,6 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
|
|
|
3550
3556
|
this.element.style.cursor = (!item['isLeafItem'] && childItems && childItems.length > 0 && this.enableDrillDown) ?
|
|
3551
3557
|
'pointer' : 'auto';
|
|
3552
3558
|
eventArgs = { cancel: false, name: itemMove, treemap: this, item: item, mouseEvent: e };
|
|
3553
|
-
if (this.isBlazor) {
|
|
3554
|
-
var data = {
|
|
3555
|
-
isLeafItem: eventArgs.item['isLeafItem'],
|
|
3556
|
-
groupIndex: eventArgs.item['groupIndex'],
|
|
3557
|
-
groupName: eventArgs.item['groupName'],
|
|
3558
|
-
isDrilled: eventArgs.item['isDrilled'],
|
|
3559
|
-
itemArea: eventArgs.item['itemArea'],
|
|
3560
|
-
levelOrderName: eventArgs.item['levelOrderName'],
|
|
3561
|
-
name: eventArgs.item['name'],
|
|
3562
|
-
rect: eventArgs.item['rect'],
|
|
3563
|
-
options: eventArgs.item['options']
|
|
3564
|
-
};
|
|
3565
|
-
eventArgs.item = data;
|
|
3566
|
-
var treemap = eventArgs.treemap, blazorEventArgs = __rest(eventArgs, ["treemap"]);
|
|
3567
|
-
eventArgs = blazorEventArgs;
|
|
3568
|
-
}
|
|
3569
3559
|
this.trigger(itemMove, eventArgs);
|
|
3570
3560
|
}
|
|
3571
3561
|
this.notify(Browser.touchMoveEvent, e);
|
|
@@ -3684,9 +3674,10 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
|
|
|
3684
3674
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
3685
3675
|
var templateID = this.element.id + '_Label_Template_Group';
|
|
3686
3676
|
var drillLevelValues;
|
|
3687
|
-
var endBlazorEvent;
|
|
3688
3677
|
if (targetId.indexOf('_Item_Index') > -1 && this.enableDrillDown && !this.drillMouseMove) {
|
|
3689
|
-
e.
|
|
3678
|
+
if (e.cancelable) {
|
|
3679
|
+
e.preventDefault();
|
|
3680
|
+
}
|
|
3690
3681
|
index = parseFloat(targetId.split('_')[6]);
|
|
3691
3682
|
item = this.layout.renderItems[index];
|
|
3692
3683
|
var labelText = targetEle.innerHTML;
|
|
@@ -3741,18 +3732,14 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
|
|
|
3741
3732
|
newDrillItem[item['groupName']] = [item];
|
|
3742
3733
|
}
|
|
3743
3734
|
startEvent = {
|
|
3744
|
-
cancel: false, name: drillStart, treemap: this
|
|
3735
|
+
cancel: false, name: drillStart, treemap: this,
|
|
3745
3736
|
element: targetEle, groupIndex: this.enableBreadcrumb &&
|
|
3746
3737
|
this.drilledItems.length !== 0 && !isNullOrUndefined(drillLevel) ?
|
|
3747
3738
|
this.drilledItems[this.drilledItems.length - 1]['data']['groupIndex'] : item['groupIndex'],
|
|
3748
3739
|
groupName: this.enableBreadcrumb && this.drilledItems.length !== 0 && !isNullOrUndefined(drillLevel) ?
|
|
3749
3740
|
this.drilledItems[this.drilledItems.length - 1]['data']['name'] : item['name'],
|
|
3750
|
-
rightClick: e.which === 3 ? true : false, childItems: null, item:
|
|
3741
|
+
rightClick: e.which === 3 ? true : false, childItems: null, item: newDrillItem
|
|
3751
3742
|
};
|
|
3752
|
-
if (this.isBlazor) {
|
|
3753
|
-
var treemap = startEvent.treemap, blazorEventArgs = __rest(startEvent, ["treemap"]);
|
|
3754
|
-
startEvent = blazorEventArgs;
|
|
3755
|
-
}
|
|
3756
3743
|
this.trigger(drillStart, startEvent, function (observedArgs) {
|
|
3757
3744
|
_this.currentLevel = item['isDrilled'] && isNullOrUndefined(drillLevel) ? item['groupIndex'] :
|
|
3758
3745
|
(!isNullOrUndefined(drillLevel) && _this.enableBreadcrumb && item['isDrilled']) ? drillLevel : null;
|
|
@@ -3795,8 +3782,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
|
|
|
3795
3782
|
}
|
|
3796
3783
|
});
|
|
3797
3784
|
endEvent = { cancel: false, name: drillEnd, treemap: this, renderItems: this.layout.renderItems };
|
|
3798
|
-
|
|
3799
|
-
this.trigger(drillEnd, this.isBlazor ? endBlazorEvent : endEvent);
|
|
3785
|
+
this.trigger(drillEnd, endEvent);
|
|
3800
3786
|
if (process) {
|
|
3801
3787
|
if (!directLevel && isNullOrUndefined(drillLevel)) {
|
|
3802
3788
|
this.drilledItems.push({ name: item['levelOrderName'], data: item });
|
|
@@ -4138,15 +4124,6 @@ var LevelsData = /** @__PURE__ @class */ (function () {
|
|
|
4138
4124
|
return LevelsData;
|
|
4139
4125
|
}());
|
|
4140
4126
|
|
|
4141
|
-
var __rest$2 = (undefined && undefined.__rest) || function (s, e) {
|
|
4142
|
-
var t = {};
|
|
4143
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4144
|
-
t[p] = s[p];
|
|
4145
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
4146
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
|
|
4147
|
-
t[p[i]] = s[p[i]];
|
|
4148
|
-
return t;
|
|
4149
|
-
};
|
|
4150
4127
|
/* eslint-disable @typescript-eslint/naming-convention */
|
|
4151
4128
|
/* eslint-disable @typescript-eslint/dot-notation */
|
|
4152
4129
|
/* eslint-disable max-len */
|
|
@@ -4187,10 +4164,6 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
|
|
|
4187
4164
|
cancel: false, name: legendRendering, treemap: this.treemap, _changePosition: this.treemap.legendSettings.position,
|
|
4188
4165
|
position: this.treemap.legendSettings.position
|
|
4189
4166
|
};
|
|
4190
|
-
if (this.treemap.isBlazor) {
|
|
4191
|
-
var treemap = eventArgs.treemap, blazorEventArgs = __rest$2(eventArgs, ["treemap"]);
|
|
4192
|
-
eventArgs = blazorEventArgs;
|
|
4193
|
-
}
|
|
4194
4167
|
this.treemap.trigger(legendRendering, eventArgs, function (observedArgs) {
|
|
4195
4168
|
// eslint-disable-next-line no-underscore-dangle
|
|
4196
4169
|
if (!observedArgs.cancel && observedArgs._changePosition !== _this.treemap.legendSettings.position) {
|
|
@@ -4794,13 +4767,9 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
|
|
|
4794
4767
|
textLocation = legendRtlLocation['textLocation'];
|
|
4795
4768
|
}
|
|
4796
4769
|
eventArgs = {
|
|
4797
|
-
cancel: false, name: legendItemRendering, treemap:
|
|
4770
|
+
cancel: false, name: legendItemRendering, treemap: treemap, fill: collection['Fill'],
|
|
4798
4771
|
shape: legend.shape, imageUrl: legend.imageUrl
|
|
4799
4772
|
};
|
|
4800
|
-
if (this_1.treemap.isBlazor) {
|
|
4801
|
-
var treemap_1 = eventArgs.treemap, blazorEventArgs = __rest$2(eventArgs, ["treemap"]);
|
|
4802
|
-
eventArgs = blazorEventArgs;
|
|
4803
|
-
}
|
|
4804
4773
|
this_1.treemap.trigger(legendItemRendering, eventArgs, function (observedArgs) {
|
|
4805
4774
|
var renderOptions = new PathOption(shapeId, observedArgs.fill, strokeWidth_1, isLineShape_1 ? collection['Fill'] : strokeColor_1, legend.opacity, '');
|
|
4806
4775
|
legendElement.appendChild(drawSymbol(shapeLocation, observedArgs.shape, shapeSize, observedArgs.imageUrl, renderOptions, legendText));
|
|
@@ -5153,15 +5122,6 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
|
|
|
5153
5122
|
return TreeMapLegend;
|
|
5154
5123
|
}());
|
|
5155
5124
|
|
|
5156
|
-
var __rest$3 = (undefined && undefined.__rest) || function (s, e) {
|
|
5157
|
-
var t = {};
|
|
5158
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5159
|
-
t[p] = s[p];
|
|
5160
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
5161
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
|
|
5162
|
-
t[p[i]] = s[p[i]];
|
|
5163
|
-
return t;
|
|
5164
|
-
};
|
|
5165
5125
|
/**
|
|
5166
5126
|
* Performing treemap highlight
|
|
5167
5127
|
*/
|
|
@@ -5191,7 +5151,6 @@ var TreeMapHighlight = /** @__PURE__ @class */ (function () {
|
|
|
5191
5151
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
5192
5152
|
var eventArgs;
|
|
5193
5153
|
var items = [];
|
|
5194
|
-
var eventBlazorArgs;
|
|
5195
5154
|
var highlight = this.treemap.highlightSettings;
|
|
5196
5155
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
5197
5156
|
var item;
|
|
@@ -5260,8 +5219,7 @@ var TreeMapHighlight = /** @__PURE__ @class */ (function () {
|
|
|
5260
5219
|
this.highLightId = targetId;
|
|
5261
5220
|
}
|
|
5262
5221
|
eventArgs = { cancel: false, name: itemHighlight, treemap: treemap, items: items, elements: highLightElements };
|
|
5263
|
-
|
|
5264
|
-
treemap.trigger(itemHighlight, treemap.isBlazor ? eventBlazorArgs : eventArgs);
|
|
5222
|
+
treemap.trigger(itemHighlight, eventArgs);
|
|
5265
5223
|
}
|
|
5266
5224
|
else {
|
|
5267
5225
|
processHighlight = false;
|
|
@@ -5392,7 +5350,6 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
|
|
|
5392
5350
|
var targetEle = e.target;
|
|
5393
5351
|
var eventArgs;
|
|
5394
5352
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
5395
|
-
var eventBlazorArgs;
|
|
5396
5353
|
var treemap = this.treemap;
|
|
5397
5354
|
treemap.levelSelection = [];
|
|
5398
5355
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -5466,31 +5423,9 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
|
|
|
5466
5423
|
}
|
|
5467
5424
|
eventArgs = { cancel: false, name: itemSelected, treemap: treemap, items: items, elements: selectionElements,
|
|
5468
5425
|
text: labelText, contentItemTemplate: labelText };
|
|
5469
|
-
|
|
5470
|
-
if (treemap.isBlazor) {
|
|
5471
|
-
var treemap_1 = eventArgs.treemap, items_1 = eventArgs.items, elements = eventArgs.elements, blazorEventArgs = __rest$3(eventArgs, ["treemap", "items", "elements"]);
|
|
5472
|
-
eventBlazorArgs = blazorEventArgs;
|
|
5473
|
-
}
|
|
5474
|
-
treemap.trigger(itemSelected, treemap.isBlazor ? eventBlazorArgs : eventArgs, function (observedArgs) {
|
|
5426
|
+
treemap.trigger(itemSelected, eventArgs, function (observedArgs) {
|
|
5475
5427
|
if (observedArgs.contentItemTemplate !== labelText) {
|
|
5476
|
-
|
|
5477
|
-
var itemTemplate = void 0;
|
|
5478
|
-
if (targetId.indexOf('_LabelTemplate') > -1) {
|
|
5479
|
-
itemTemplate = targetEle;
|
|
5480
|
-
}
|
|
5481
|
-
else {
|
|
5482
|
-
itemTemplate = document.querySelector('#' + itemSelect + '_LabelTemplate');
|
|
5483
|
-
}
|
|
5484
|
-
if (!isNullOrUndefined(itemTemplate)) {
|
|
5485
|
-
if (treemap.isBlazor) {
|
|
5486
|
-
var templateCreated = createElement('div');
|
|
5487
|
-
templateCreated.innerHTML = observedArgs.contentItemTemplate;
|
|
5488
|
-
var templateElement = templateCreated.children[0].firstElementChild;
|
|
5489
|
-
itemTemplate['style']['left'] = Number(itemTemplate['style']['left'].split('px')[0]) - (templateElement['style']['width'].split('px')[0] / 2) + 'px';
|
|
5490
|
-
itemTemplate['style']['top'] = Number(itemTemplate['style']['top'].split('px')[0]) - (templateElement['style']['height'].split('px')[0] / 2) + 'px';
|
|
5491
|
-
}
|
|
5492
|
-
itemTemplate.innerHTML = observedArgs.contentItemTemplate;
|
|
5493
|
-
}
|
|
5428
|
+
setItemTemplateContent(targetId, targetEle, observedArgs.contentItemTemplate);
|
|
5494
5429
|
}
|
|
5495
5430
|
});
|
|
5496
5431
|
}
|
|
@@ -5687,7 +5622,7 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
|
|
|
5687
5622
|
return TreeMapSelection;
|
|
5688
5623
|
}());
|
|
5689
5624
|
|
|
5690
|
-
var __rest
|
|
5625
|
+
var __rest = (undefined && undefined.__rest) || function (s, e) {
|
|
5691
5626
|
var t = {};
|
|
5692
5627
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5693
5628
|
t[p] = s[p];
|
|
@@ -5780,25 +5715,9 @@ var TreeMapTooltip = /** @__PURE__ @class */ (function () {
|
|
|
5780
5715
|
treemap: this.treemap,
|
|
5781
5716
|
element: target, eventArgs: e
|
|
5782
5717
|
};
|
|
5783
|
-
|
|
5784
|
-
|
|
5785
|
-
|
|
5786
|
-
location: tootipArgs.options['location'],
|
|
5787
|
-
text: tootipArgs.options['text'],
|
|
5788
|
-
textStyle: tootipArgs.options['textStyle'],
|
|
5789
|
-
data: tootipArgs.options['data'],
|
|
5790
|
-
template: tootipArgs.options['template'],
|
|
5791
|
-
name: tooltipRendering
|
|
5792
|
-
};
|
|
5793
|
-
this.treemap.trigger(tooltipRendering, tooltipArgs_1, function (args) {
|
|
5794
|
-
_this.addTooltip(null, markerFill, tooltipEle, tooltipArgs_1);
|
|
5795
|
-
});
|
|
5796
|
-
}
|
|
5797
|
-
else {
|
|
5798
|
-
this.treemap.trigger(tooltipRendering, tootipArgs, function (args) {
|
|
5799
|
-
_this.addTooltip(tootipArgs, markerFill, tooltipEle);
|
|
5800
|
-
});
|
|
5801
|
-
}
|
|
5718
|
+
this.treemap.trigger(tooltipRendering, tootipArgs, function (args) {
|
|
5719
|
+
_this.addTooltip(tootipArgs, markerFill, tooltipEle);
|
|
5720
|
+
});
|
|
5802
5721
|
}
|
|
5803
5722
|
}
|
|
5804
5723
|
else {
|
|
@@ -5812,7 +5731,7 @@ var TreeMapTooltip = /** @__PURE__ @class */ (function () {
|
|
|
5812
5731
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
5813
5732
|
var args;
|
|
5814
5733
|
if (!isNullOrUndefined(tootipArgs)) {
|
|
5815
|
-
var c = tootipArgs.cancel, otherArgs = __rest
|
|
5734
|
+
var c = tootipArgs.cancel, otherArgs = __rest(tootipArgs, ["cancel"]);
|
|
5816
5735
|
cancel = c;
|
|
5817
5736
|
args = otherArgs.options;
|
|
5818
5737
|
}
|
|
@@ -5833,8 +5752,7 @@ var TreeMapTooltip = /** @__PURE__ @class */ (function () {
|
|
|
5833
5752
|
palette: [markerFill],
|
|
5834
5753
|
areaBounds: this.treemap.areaRect,
|
|
5835
5754
|
textStyle: args['textStyle'],
|
|
5836
|
-
fill: this.treemap.tooltipSettings.fill ? this.treemap.tooltipSettings.fill : this.treemap.themeStyle.tooltipFillColor
|
|
5837
|
-
blazorTemplate: { name: 'TooltipTemplate', parent: this.treemap.tooltipSettings }
|
|
5755
|
+
fill: this.treemap.tooltipSettings.fill ? this.treemap.tooltipSettings.fill : this.treemap.themeStyle.tooltipFillColor
|
|
5838
5756
|
});
|
|
5839
5757
|
this.svgTooltip.opacity = this.treemap.themeStyle.tooltipFillOpacity || this.svgTooltip.opacity;
|
|
5840
5758
|
this.svgTooltip.appendTo(tooltipEle);
|
|
@@ -5912,5 +5830,5 @@ var TreeMapTooltip = /** @__PURE__ @class */ (function () {
|
|
|
5912
5830
|
* exporting all modules from tree map index
|
|
5913
5831
|
*/
|
|
5914
5832
|
|
|
5915
|
-
export { TreeMap, LevelsData, Border, Margin, Font, CommonTitleSettings, SubTitleSettings, TitleSettings, ColorMapping, LegendSettings, InitialDrillSettings, LeafItemSettings, TooltipSettings, SelectionSettings, HighlightSettings, LevelSettings, load, loaded, beforePrint, itemRendering, drillStart, drillEnd, itemSelected, itemHighlight, tooltipRendering, itemClick, itemMove, click, doubleClick, rightClick, mouseMove, legendItemRendering, legendRendering, resize, defaultFont, Theme, getThemeStyle, Size, stringToNumber, Rect, RectOption, PathOption, measureText, TextOption, textTrim, Location, findPosition, createTextStyle, renderTextElement, getElement, itemsToOrder, isContainsData, findChildren, findHightLightItems, getTemplateFunction, convertElement, findLabelLocation, measureElement, getArea, getShortestEdge, convertToContainer, convertToRect, getMousePosition, colorMap, deSaturationColor, colorCollections, rgbToHex, getColorByValue, getGradientColor, getPercentageColor, getPercentage, wordWrap, textWrap, hide, orderByArea, maintainSelection, legendMaintain, removeClassNames, applyOptions, textFormatter, formatValue, ColorValue, convertToHexCode, componentToHex, convertHexToColor, colorNameToHex, drawSymbol, renderLegendShape, isParentItem, TreeMapAjax, removeShape, removeLegend, setColor, removeSelectionWithHighlight, getLegendIndex, pushCollection, triggerDownload, removeElement, TreeMapLegend, LayoutPanel, TreeMapHighlight, TreeMapSelection, TreeMapTooltip, ImageExport, PdfExport, Print };
|
|
5833
|
+
export { TreeMap, LevelsData, Border, Margin, Font, CommonTitleSettings, SubTitleSettings, TitleSettings, ColorMapping, LegendSettings, InitialDrillSettings, LeafItemSettings, TooltipSettings, SelectionSettings, HighlightSettings, LevelSettings, load, loaded, beforePrint, itemRendering, drillStart, drillEnd, itemSelected, itemHighlight, tooltipRendering, itemClick, itemMove, click, doubleClick, rightClick, mouseMove, legendItemRendering, legendRendering, resize, defaultFont, Theme, getThemeStyle, Size, stringToNumber, Rect, RectOption, PathOption, measureText, TextOption, textTrim, Location, findPosition, createTextStyle, renderTextElement, setItemTemplateContent, getElement, itemsToOrder, isContainsData, findChildren, findHightLightItems, getTemplateFunction, convertElement, findLabelLocation, measureElement, getArea, getShortestEdge, convertToContainer, convertToRect, getMousePosition, colorMap, deSaturationColor, colorCollections, rgbToHex, getColorByValue, getGradientColor, getPercentageColor, getPercentage, wordWrap, textWrap, hide, orderByArea, maintainSelection, legendMaintain, removeClassNames, applyOptions, textFormatter, formatValue, ColorValue, convertToHexCode, componentToHex, convertHexToColor, colorNameToHex, drawSymbol, renderLegendShape, isParentItem, TreeMapAjax, removeShape, removeLegend, setColor, removeSelectionWithHighlight, getLegendIndex, pushCollection, triggerDownload, removeElement, TreeMapLegend, LayoutPanel, TreeMapHighlight, TreeMapSelection, TreeMapTooltip, ImageExport, PdfExport, Print };
|
|
5916
5834
|
//# sourceMappingURL=ej2-treemap.es5.js.map
|