| 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 | 1×
247×
1729×
1482×
247×
247×
247×
1×
1×
1×
1×
182×
182×
182×
182×
1×
248×
248×
248×
248×
248×
248×
248×
2×
2×
2×
2×
2×
246×
246×
246×
246×
248×
248×
248×
248×
248×
248×
248×
248×
248×
247×
247×
247×
247×
247×
247×
247×
96×
151×
247×
194×
53×
53×
53×
247×
247×
247×
247×
247×
247×
247×
247×
247×
247×
247×
247×
1×
1×
1×
247×
247×
247×
247×
247×
247×
247×
245×
245×
245×
245×
245×
2×
2×
1×
1×
1×
1×
1×
5×
4×
4×
1×
183×
183×
183×
1×
182×
27×
155×
155×
1×
943×
1×
182×
51×
182×
182×
182×
182×
1×
1×
| var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
Eif (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
t[p[i]] = s[p[i]];
return t;
};
define(["require", "exports", "@syncfusion/ej2-svg-base", "@syncfusion/ej2-base", "../utils/helper", "../model/constants"], function (require, exports, ej2_svg_base_1, ej2_base_1, helper_1, constants_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var TreeMapTooltip = (function () {
function TreeMapTooltip(treeMap) {
this.treemap = treeMap;
this.tooltipSettings = this.treemap.tooltipSettings;
this.tooltipId = this.treemap.element.id + '_TreeMapTooltip';
this.addEventListener();
}
TreeMapTooltip.prototype.renderTooltip = function (e) {
var _this = this;
var pageX;
var pageY;
var target;
var touchArg;
var tootipArgs;
if (e.type.indexOf('touch') !== -1) {
this.isTouch = true;
touchArg = e;
pageX = touchArg.changedTouches[0].pageX;
pageY = touchArg.changedTouches[0].pageY;
target = touchArg.target;
}
else {
this.isTouch = e.pointerType === 'touch';
pageX = e.pageX;
pageY = e.pageY;
target = e.target;
}
var value;
var targetId = target.id;
var item = {};
var tooltipEle;
var location;
var toolTipData = {};
var tooltipContent = [];
var markerFill;
if (targetId.indexOf('_Item_Index') > -1) {
item = this.treemap.layout.renderItems[parseFloat(targetId.split('_Item_Index_')[1])];
Eif (!ej2_base_1.isNullOrUndefined(item)) {
value = item['weight'];
toolTipData = item['data'];
Eif (!ej2_base_1.isNullOrUndefined(item['options'])) {
markerFill = item['options']['fill'];
}
if (this.treemap.enableRtl) {
tooltipContent = [(!ej2_base_1.isNullOrUndefined(this.tooltipSettings.format) ?
helper_1.textFormatter(this.tooltipSettings.format, toolTipData, this.treemap) : null)
|| helper_1.formatValue(value, this.treemap) + ' : ' + this.treemap.weightValuePath.toString()];
}
else {
tooltipContent = [(!ej2_base_1.isNullOrUndefined(this.tooltipSettings.format) ?
helper_1.textFormatter(this.tooltipSettings.format, toolTipData, this.treemap) : null)
|| this.treemap.weightValuePath.toString() + ' : ' + helper_1.formatValue(value, this.treemap)];
}
if (document.getElementById(this.tooltipId)) {
tooltipEle = document.getElementById(this.tooltipId);
}
else {
tooltipEle = ej2_base_1.createElement('div', {
id: this.treemap.element.id + '_TreeMapTooltip',
className: 'EJ2-TreeMap-Tooltip'
});
tooltipEle.style.cssText = 'position: absolute;pointer-events:none;';
document.getElementById(this.treemap.element.id + '_Secondary_Element').appendChild(tooltipEle);
}
location = helper_1.getMousePosition(pageX, pageY, this.treemap.svgObject);
location.y = (this.tooltipSettings.template) ? location.y + 10 : location.y;
this.tooltipSettings.textStyle.size = this.tooltipSettings.textStyle.size || this.treemap.themeStyle.tooltipFontSize;
this.tooltipSettings.textStyle.fontFamily = this.tooltipSettings.textStyle.fontFamily || this.treemap.themeStyle.fontFamily;
this.tooltipSettings.textStyle.fontStyle = !ej2_base_1.isNullOrUndefined(this.tooltipSettings.textStyle.fontStyle) ? this.tooltipSettings.textStyle.fontStyle : 'Normal';
this.tooltipSettings.textStyle.fontWeight = this.tooltipSettings.textStyle.fontWeight || this.treemap.themeStyle.fontWeight;
this.tooltipSettings.textStyle.color = this.tooltipSettings.textStyle.color || this.treemap.themeStyle.tooltipFontColor;
this.tooltipSettings.textStyle.opacity = this.tooltipSettings.textStyle.opacity || this.treemap.themeStyle.tooltipTextOpacity;
var border = {
width: this.tooltipSettings.border.width || this.treemap.themeStyle.tooltipBorderWidth || 0,
color: this.tooltipSettings.border.color || this.treemap.themeStyle.tooltipBorderColor || 'transparent'
};
tootipArgs = {
cancel: false, name: constants_1.tooltipRendering, item: item,
options: {
location: location, text: tooltipContent, data: toolTipData, border: border,
textStyle: this.tooltipSettings.textStyle, template: this.tooltipSettings.template
},
treemap: this.treemap,
element: target, eventArgs: e
};
this.treemap.trigger(constants_1.tooltipRendering, tootipArgs, function (args) {
_this.addTooltip(tootipArgs, markerFill, tooltipEle);
});
}
}
else {
this.removeTooltip();
this.treemap.clearTemplate();
}
};
TreeMapTooltip.prototype.addTooltip = function (tootipArgs, markerFill, tooltipEle, eventArgs) {
var cancel;
var args;
Eif (!ej2_base_1.isNullOrUndefined(tootipArgs)) {
var c = tootipArgs.cancel, otherArgs = __rest(tootipArgs, ["cancel"]);
cancel = c;
args = otherArgs.options;
}
else {
cancel = eventArgs.cancel;
args = eventArgs;
}
if (!cancel) {
this.svgTooltip = new ej2_svg_base_1.Tooltip({
theme: this.treemap.theme,
enable: true,
header: '',
data: args['data'],
template: args['template'],
content: args['text'],
shapes: [],
location: args['location'],
palette: [markerFill],
areaBounds: this.treemap.areaRect,
textStyle: args['textStyle'],
fill: this.treemap.tooltipSettings.fill ? this.treemap.tooltipSettings.fill : this.treemap.themeStyle.tooltipFillColor,
border: args['border'],
enableShadow: true
});
Iif (this.treemap.isVue || this.treemap.isVue3) {
this.svgTooltip.controlInstance = this.treemap;
}
this.svgTooltip.opacity = this.treemap.themeStyle.tooltipFillOpacity || this.svgTooltip.opacity;
this.svgTooltip.appendTo(tooltipEle);
this.treemap.renderReactTemplates();
}
else {
this.removeTooltip();
this.treemap.clearTemplate();
}
};
TreeMapTooltip.prototype.mouseUpHandler = function (e) {
this.renderTooltip(e);
clearTimeout(this.clearTimeout);
this.clearTimeout = setTimeout(this.removeTooltip.bind(this), 2000);
};
TreeMapTooltip.prototype.removeTooltip = function () {
if (document.getElementsByClassName('EJ2-TreeMap-Tooltip').length > 0) {
var tooltipElementId = document.getElementsByClassName('EJ2-TreeMap-Tooltip')[0];
tooltipElementId.parentNode.removeChild(tooltipElementId);
}
};
TreeMapTooltip.prototype.addEventListener = function () {
Iif (this.treemap.isDestroyed) {
return;
}
this.treemap.on(ej2_base_1.Browser.touchMoveEvent, this.renderTooltip, this);
this.treemap.on(ej2_base_1.Browser.touchEndEvent, this.mouseUpHandler, this);
};
TreeMapTooltip.prototype.removeEventListener = function () {
if (this.treemap.isDestroyed) {
return;
}
this.treemap.off(ej2_base_1.Browser.touchMoveEvent, this.renderTooltip);
this.treemap.off(ej2_base_1.Browser.touchEndEvent, this.mouseUpHandler);
};
TreeMapTooltip.prototype.getModuleName = function () {
return 'treeMapTooltip';
};
TreeMapTooltip.prototype.destroy = function () {
if (!ej2_base_1.isNullOrUndefined(this.svgTooltip)) {
this.svgTooltip.destroy();
}
this.svgTooltip = null;
this.tooltipSettings = null;
this.removeEventListener();
this.treemap = null;
};
return TreeMapTooltip;
}());
exports.TreeMapTooltip = TreeMapTooltip;
});
|