| 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
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368 | 1×
1×
1×
1×
492×
492×
492×
492×
492×
492×
492×
1×
446×
446×
446×
446×
446×
446×
446×
446×
446×
446×
446×
446×
446×
446×
1×
445×
445×
445×
445×
445×
445×
445×
445×
445×
445×
445×
445×
445×
445×
445×
445×
445×
1×
443×
443×
443×
443×
443×
443×
443×
443×
443×
443×
443×
443×
443×
443×
443×
443×
443×
1×
442×
442×
442×
442×
442×
442×
442×
442×
442×
442×
442×
442×
442×
442×
442×
1×
455×
455×
455×
455×
455×
455×
455×
455×
455×
455×
455×
455×
452×
452×
3×
3×
3×
455×
455×
1×
2231×
2231×
2231×
1×
14×
14×
14×
14×
14×
14×
14×
14×
14×
14×
14×
7×
14×
9×
14×
12×
1×
732×
10×
10×
732×
732×
732×
7×
7×
732×
5×
5×
732×
1×
35×
35×
1×
34×
34×
34×
34×
31×
3×
34×
34×
34×
34×
34×
34×
68×
68×
68×
68×
68×
68×
68×
68×
68×
68×
68×
6×
34×
34×
34×
1×
34×
34×
34×
34×
34×
34×
34×
34×
2×
2×
2×
2×
2×
2×
2×
1×
32×
34×
34×
34×
34×
34×
34×
1×
19×
19×
1×
2×
2×
2×
1×
2×
2×
2×
2×
2×
2×
2×
2×
1×
1×
2×
2×
2×
2×
2×
2×
1×
94×
94×
94×
94×
94×
94×
94×
94×
3×
3×
3×
3×
3×
94×
94×
94×
93×
94×
94×
94×
1×
23×
23×
23×
23×
18×
18×
18×
18×
18×
18×
18×
18×
18×
18×
36×
36×
36×
24×
24×
24×
24×
24×
24×
24×
24×
24×
24×
24×
24×
18×
18×
18×
1×
192×
193×
1×
1×
| define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../../common/utils/helper", "../../common/utils/helper", "@syncfusion/ej2-svg-base", "./zooming", "../../common/model/constants"], function (require, exports, ej2_base_1, ej2_base_2, helper_1, helper_2, ej2_svg_base_1, zooming_1, constants_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Toolkit = (function () {
function Toolkit(chart) {
this.iconRectOverFill = 'transparent';
this.iconRectSelectionFill = 'transparent';
this.zoomCompleteEvtCollection = [];
this.isZoomed = false;
this.chart = chart;
this.elementId = chart.element.id;
this.chart.svgRenderer = new ej2_svg_base_1.SvgRenderer(this.elementId);
}
Toolkit.prototype.createPanButton = function (childElement, parentElement) {
var render = this.chart.svgRenderer;
var fillColor = this.chart.zoomModule.isPanning ? this.chart.themeStyle.toolkitSelectionColor :
this.chart.themeStyle.toolkitFill;
var direction = 'M5,3h2.3L7.275,5.875h1.4L8.65,3H11L8,0L5,3z M3,11V8.7l2.875,0.025v-1.4L3,7.35V5L0,8L3,';
direction += '11z M11,13H8.7l0.025-2.875h-1.4L7.35,13H5l3,3L11,13z M13,5v2.3l-2.875-0.025v1.4L13,8.65V11l3-3L13,5z';
this.elementOpacity = !this.chart.zoomModule.isZoomed && this.chart.zoomSettings.showToolbar ? '0.2' : '1';
childElement.setAttribute('opacity', this.chart.theme === 'Fluent2HighContrast' ? '1' : this.elementOpacity);
childElement.id = this.elementId + '_Zooming_Pan';
childElement.setAttribute('role', 'button');
childElement.setAttribute('aria-label', this.chart.getLocalizedLabel('Pan'));
this.panElements = childElement;
childElement.appendChild(render.drawRectangle(new helper_1.RectOption(this.elementId + '_Zooming_Pan_1', 'transparent', {}, 1, this.chart.themeStyle.toolkitIconRect, this.chart.theme.indexOf('Fluent2') > -1 || this.chart.theme.indexOf('Bootstrap5') > -1 ? 4 : 0, this.chart.theme.indexOf('Fluent2') > -1 || this.chart.theme.indexOf('Bootstrap5') > -1 ? 4 : 0)));
childElement.appendChild(render.drawPath(new ej2_svg_base_1.PathOption(this.elementId + '_Zooming_Pan_2', this.chart.theme === 'Fluent2HighContrast' && this.elementOpacity === '0.2' ? '#3FF23F' : fillColor, null, null, 1, null, direction)));
parentElement.appendChild(childElement);
this.wireEvents(childElement, this.pan);
};
Toolkit.prototype.createZoomButton = function (childElement, parentElement) {
var render = this.chart.svgRenderer;
var fillColor = this.chart.zoomModule.isPanning || (!this.chart.zoomModule.isZoomed &&
this.chart.zoomSettings.showToolbar) ? this.chart.themeStyle.toolkitFill : this.chart.themeStyle.toolkitSelectionColor;
this.elementOpacity = !this.chart.zoomModule.isPanning && !this.chart.zoomModule.isZoomed && this.chart.zoomSettings.showToolbar ? '0.2' : '1';
var rectColor = this.chart.zoomModule.isPanning ? 'transparent' : this.chart.themeStyle.toolkitIconRectSelectionFill;
var direction = 'M0.001,14.629L1.372,16l4.571-4.571v-0.685l0.228-0.274c1.051,0.868,2.423,1.417,3.885,1.417c3.291,0,';
direction += '5.943-2.651,5.943-5.943S13.395,0,10.103,0S4.16,2.651,4.16,5.943c0,1.508,0.503,2.834,1.417,3.885l-0.274,0.228H4.571';
direction = direction + 'L0.001,14.629L0.001,14.629z M5.943,5.943c0-2.285,1.828-4.114,4.114-4.114s4.114,1.828,4.114,';
childElement.id = this.elementId + '_Zooming_Zoom';
childElement.setAttribute('role', 'button');
childElement.setAttribute('aria-label', this.chart.getLocalizedLabel('Zoom'));
childElement.setAttribute('opacity', this.elementOpacity);
this.zoomElements = childElement;
this.selectedID = this.chart.zoomModule.isPanning ? this.chart.element.id + '_Zooming_Pan_1' : this.elementId + '_Zooming_Zoom_1';
childElement.appendChild(render.drawRectangle(new helper_1.RectOption(this.elementId + '_Zooming_Zoom_1', rectColor, {}, 1, this.chart.themeStyle.toolkitIconRect, this.chart.theme.indexOf('Fluent2') > -1 || this.chart.theme.indexOf('Bootstrap5') > -1 ? 4 : 0, this.chart.theme.indexOf('Fluent2') > -1 || this.chart.theme.indexOf('Bootstrap5') > -1 ? 4 : 0)));
childElement.appendChild(render.drawPath(new ej2_svg_base_1.PathOption(this.elementId + '_Zooming_Zoom_3', fillColor, null, null, 1, null, direction + '4.114s-1.828,4.114-4.114,4.114S5.943,8.229,5.943,5.943z')));
parentElement.appendChild(childElement);
this.wireEvents(childElement, this.zoom);
};
Toolkit.prototype.createZoomInButton = function (childElement, parentElement, chart) {
var render = this.chart.svgRenderer;
var fillColor = this.chart.themeStyle.toolkitFill;
var direction = 'M10.103,0C6.812,0,4.16,2.651,4.16,5.943c0,1.509,0.503,2.834,1.417,3.885l-0.274,0.229H4.571L0,';
direction += '14.628l0,0L1.372,16l4.571-4.572v-0.685l0.228-0.275c1.052,0.868,2.423,1.417,3.885,1.417c3.291,0,5.943-2.651,';
direction += '5.943-5.943C16,2.651,13.395,0,10.103,0z M10.058,10.058c-2.286,0-4.114-1.828-4.114-4.114c0-2.286,1.828-4.114,';
childElement.id = this.elementId + '_Zooming_ZoomIn';
childElement.setAttribute('role', 'button');
childElement.setAttribute('aria-label', this.chart.getLocalizedLabel('ZoomIn'));
var polygonDirection = '12.749,5.466 10.749,5.466 10.749,3.466 9.749,3.466 9.749,5.466 7.749,5.466 7.749,6.466';
childElement.appendChild(render.drawRectangle(new helper_1.RectOption(this.elementId + '_Zooming_ZoomIn_1', 'transparent', {}, 1, this.chart.themeStyle.toolkitIconRect, this.chart.theme.indexOf('Fluent2') > -1 ? 4 : this.chart.theme.indexOf('Bootstrap5') > -1 ? 2 : 0, this.chart.theme.indexOf('Fluent2') > -1 ? 4 : this.chart.theme.indexOf('Bootstrap5') > -1 ? 2 : 0)));
childElement.appendChild(render.drawPath(new ej2_svg_base_1.PathOption(this.elementId + '_Zooming_ZoomIn_2', fillColor, null, null, 1, null, direction + '4.114-4.114c2.286,0,4.114,1.828,4.114,4.114C14.172,8.229,12.344,10.058,10.058,10.058z')));
childElement.appendChild(render.drawPolygon(new helper_1.PolygonOption(this.elementId + '_Zooming_ZoomIn_3', polygonDirection + ' 9.749,6.466 9.749,8.466 10.749,8.466 10.749,6.466 12.749,6.466', fillColor)));
this.zoomInElements = childElement;
this.elementOpacity = chart.zoomModule.isPanning || (!chart.zoomModule.isZoomed && !chart.zoomSettings.showToolbar && !this.enableZoomButton) ? '0.2' : '1';
childElement.setAttribute('opacity', this.elementOpacity);
parentElement.appendChild(childElement);
this.wireEvents(childElement, this.zoomIn);
};
Toolkit.prototype.createZoomOutButton = function (childElement, parentElement, chart) {
var render = this.chart.svgRenderer;
var fillColor = this.chart.themeStyle.toolkitFill;
var direction = 'M0,14.622L1.378,16l4.533-4.533v-0.711l0.266-0.266c1.022,0.889,2.4,1.422,3.866,';
direction += '1.422c3.289,0,5.955-2.666,5.955-5.955S13.333,0,10.044,0S4.089,2.667,4.134,5.911c0,1.466,0.533,2.844,';
direction += '1.422,3.866l-0.266,0.266H4.578L0,14.622L0,14.622z M5.911,5.911c0-2.311,1.822-4.133,4.133-4.133s4.133,1.822,4.133,';
childElement.id = this.elementId + '_Zooming_ZoomOut';
childElement.setAttribute('role', 'button');
childElement.setAttribute('aria-label', this.chart.getLocalizedLabel('ZoomOut'));
childElement.appendChild(render.drawRectangle(new helper_1.RectOption(this.elementId + '_Zooming_ZoomOut_1', 'transparent', {}, 1, this.chart.themeStyle.toolkitIconRect, this.chart.theme.indexOf('Fluent2') > -1 || this.chart.theme.indexOf('Bootstrap5') > -1 ? 4 : 0, this.chart.theme.indexOf('Fluent2') > -1 || this.chart.theme.indexOf('Bootstrap5') > -1 ? 4 : 0)));
childElement.appendChild(render.drawPath(new ej2_svg_base_1.PathOption(this.elementId + '_Zooming_ZoomOut_2', (chart.theme === 'Fluent2HighContrast' && !chart.zoomModule.isZoomed) || (chart.theme === 'Fluent2HighContrast' && chart.zoomModule.isPanning) ? '#3FF23F' : fillColor, null, null, 1, null, direction + '4.133s-1.866,4.133-4.133,4.133S5.911,8.222,5.911,5.911z M12.567,6.466h-5v-1h5V6.466z')));
this.zoomOutElements = childElement;
this.elementOpacity = chart.zoomModule.isPanning || (!chart.zoomModule.isZoomed && chart.zoomSettings.showToolbar && !this.enableZoomButton) ? '0.2' : '1';
childElement.setAttribute('opacity', chart.theme === 'Fluent2HighContrast' ? '1' : this.elementOpacity);
parentElement.appendChild(childElement);
this.wireEvents(childElement, this.zoomOut);
};
Toolkit.prototype.createResetButton = function (childElement, parentElement, chart, isDevice) {
var render = this.chart.svgRenderer;
var fillColor = this.chart.themeStyle.toolkitFill;
var size;
var direction = 'M12.364,8h-2.182l2.909,3.25L16,8h-2.182c0-3.575-2.618-6.5-5.818-6.5c-1.128,0-2.218,0.366-3.091,';
direction += '1.016l1.055,1.178C6.581,3.328,7.272,3.125,8,3.125C10.4,3.125,12.363,5.319,12.364,8L12.364,8z M11.091,';
direction += '13.484l-1.055-1.178C9.419,12.672,8.728,12.875,8,12.875c-2.4,0-4.364-2.194-4.364-4.875h2.182L2.909,4.75L0,8h2.182c0,';
childElement.id = this.elementId + '_Zooming_Reset';
childElement.setAttribute('role', 'button');
childElement.setAttribute('aria-label', this.chart.getLocalizedLabel('Reset'));
this.elementOpacity = !chart.zoomModule.isZoomed && chart.zoomSettings.showToolbar ? '0.2' : '1';
childElement.setAttribute('opacity', chart.theme === 'Fluent2HighContrast' ? '1' : this.elementOpacity);
if (!isDevice) {
childElement.appendChild(render.drawRectangle(new helper_1.RectOption(this.elementId + '_Zooming_Reset_1', 'transparent', {}, 1, this.chart.themeStyle.toolkitIconRect, this.chart.theme.indexOf('Fluent2') > -1 || this.chart.theme.indexOf('Bootstrap5') > -1 ? 4 : 0, this.chart.theme.indexOf('Fluent2') > -1 || this.chart.theme.indexOf('Bootstrap5') > -1 ? 4 : 0)));
childElement.appendChild(render.drawPath(new ej2_svg_base_1.PathOption(this.elementId + '_Zooming_Reset_2', chart.theme === 'Fluent2HighContrast' && this.elementOpacity === '0.2' ? '#3FF23F' : fillColor, null, null, 1, null, direction + '3.575,2.618,6.5,5.818,6.5C9.128,14.5,10.219,14.134,11.091,13.484L11.091,13.484z')));
}
else {
size = ej2_svg_base_1.measureText(this.chart.getLocalizedLabel('ResetZoom'), { size: '12px' }, { size: '12px', fontStyle: 'Normal', fontWeight: '400', fontFamily: 'Segoe UI' });
childElement.appendChild(render.drawRectangle(new helper_1.RectOption(this.elementId + '_Zooming_Reset_1', 'transparent', {}, 1, new ej2_svg_base_1.Rect(0, 0, size.width, size.height))));
helper_2.textElement(chart.renderer, new ej2_svg_base_1.TextOption(this.elementId + '_Zooming_Reset_2', 0 + size.width / 2, 0 + size.height * 3 / 4, 'middle', this.chart.getLocalizedLabel('ResetZoom'), 'rotate(0,' + (0) + ',' + (0) + ')', 'auto'), { size: '12px' }, this.chart.theme === 'Material3Dark' || this.chart.theme === 'Fluent2Dark' || this.chart.theme === 'Fluent2HighContrast' ? 'White' : 'black', childElement, null, null, null, null, null, null, null, null, chart.enableCanvas, null, { size: '12px', fontStyle: 'Normal', fontWeight: '400', fontFamily: 'Segoe UI' });
}
parentElement.appendChild(childElement);
this.wireEvents(childElement, this.reset);
};
Toolkit.prototype.wireEvents = function (element, process) {
ej2_base_1.EventHandler.add(element, 'mousedown touchstart', process, this);
ej2_base_1.EventHandler.add(element, 'mouseover', this.showTooltip, this);
ej2_base_1.EventHandler.add(element, 'mouseout', this.removeTooltip, this);
};
Toolkit.prototype.showTooltip = function (event) {
var text = event.currentTarget.id.split('_Zooming_')[1];
var left = (event.pageX - (ej2_svg_base_1.measureText(text, { size: '10px' }, { size: '10px', fontStyle: 'Normal', fontWeight: '400', fontFamily: 'Segoe UI' }).width + 5));
var rect = helper_1.getElement(event.currentTarget.id + '_1');
var icon2 = helper_1.getElement(event.currentTarget.id + '_2');
var icon3 = helper_1.getElement(event.currentTarget.id + '_3');
Eif (event.currentTarget.getAttribute('opacity') === '1') {
event.currentTarget.setAttribute('cursor', 'pointer');
}
else {
event.currentTarget.setAttribute('cursor', 'auto');
}
Eif (rect) {
this.hoveredID = rect.id;
rect.setAttribute('fill', this.chart.theme === 'Fluent2HighContrast' && event.currentTarget.childNodes[1].getAttribute('fill') === '#3FF23F' ? 'transparent' : this.chart.themeStyle.toolkitIconRectOverFill);
}
if (icon2) {
icon2.setAttribute('fill', this.chart.theme === 'Fluent2HighContrast' && event.currentTarget.childNodes[1].getAttribute('fill') === '#3FF23F' ? '#3FF23F' : this.chart.themeStyle.toolkitSelectionColor);
}
if (icon3) {
icon3.setAttribute('fill', this.chart.theme === 'Fluent2HighContrast' && event.currentTarget.childNodes[1].getAttribute('fill') === '#3FF23F' ? '#3FF23F' : this.chart.themeStyle.toolkitSelectionColor);
}
if (!this.chart.isTouch) {
helper_1.createTooltip('EJ2_Chart_ZoomTip', this.chart.getLocalizedLabel(text), (event.pageY + 10), left, '10px');
}
};
Toolkit.prototype.removeTooltip = function () {
if (this.hoveredID && helper_1.getElement(this.hoveredID)) {
var rectColor = this.chart.zoomModule.isPanning ? (this.hoveredID.indexOf('_Pan_') > -1) ? this.chart.themeStyle.toolkitIconRectSelectionFill : 'transparent' : (this.hoveredID.indexOf('_Zoom_') > -1) && (this.elementOpacity !== '0.2' && this.chart.theme !== 'Fluent2HighContrast') ? this.chart.themeStyle.toolkitIconRectSelectionFill : 'transparent';
helper_1.getElement(this.hoveredID).setAttribute('fill', rectColor);
}
var icon2 = this.hoveredID ? helper_1.getElement(this.hoveredID.replace('_1', '_2')) : null;
var icon3 = this.hoveredID ? helper_1.getElement(this.hoveredID.replace('_1', '_3')) : null;
if (icon2) {
var iconColor = this.chart.zoomModule.isPanning ? (this.hoveredID.indexOf('_Pan_') > -1) ? this.chart.themeStyle.toolkitSelectionColor : this.elementOpacity === '0.2' && this.chart.theme === 'Fluent2HighContrast' && helper_1.getElement(this.hoveredID).nextElementSibling.getAttribute('fill') === '#3FF23F' ? '#3FF23F' : this.chart.themeStyle.toolkitFill : (this.hoveredID.indexOf('_Zoom_') > -1) ? this.chart.themeStyle.toolkitSelectionColor : this.chart.theme === 'Fluent2HighContrast' && helper_1.getElement(this.hoveredID).nextElementSibling.getAttribute('fill') === '#3FF23F' ? '#3FF23F' : this.chart.themeStyle.toolkitFill;
icon2.setAttribute('fill', iconColor);
}
if (icon3) {
var iconColor = this.chart.zoomModule.isPanning || (!this.chart.isZoomed && this.chart.zoomSettings.showToolbar) ? this.chart.theme === 'Fluent2HighContrast' && helper_1.getElement(this.hoveredID).nextElementSibling.getAttribute('fill') === '#3FF23F' && this.elementOpacity === '0.2' ? '#3FF23F' : this.chart.themeStyle.toolkitFill : (this.hoveredID.indexOf('_Zoom_') > -1) ? this.chart.themeStyle.toolkitSelectionColor : this.chart.theme === 'Fluent2HighContrast' && helper_1.getElement(this.hoveredID).nextElementSibling.getAttribute('fill') === '#3FF23F' ? '#3FF23F' : this.chart.themeStyle.toolkitFill;
icon3.setAttribute('fill', iconColor);
}
helper_1.removeElement('EJ2_Chart_ZoomTip');
};
Toolkit.prototype.reset = function (event) {
var _this = this;
if (!this.chart.zoomModule.isZoomed) {
return false;
}
var chart = this.chart;
this.enableZoomButton = false;
chart.redraw = chart.enableCanvas ? chart.redraw : chart.zoomSettings.enableAnimation;
if (!chart.zoomModule.isDevice) {
ej2_base_2.remove(chart.zoomModule.toolkitElements);
}
else Iif (event.type === 'touchstart') {
event.stopPropagation();
}
var argsData;
this.removeTooltip();
chart.svgObject.setAttribute('cursor', 'auto');
var zoomedAxisCollection = [];
this.zoomCompleteEvtCollection = [];
for (var _i = 0, _a = chart.axisCollections; _i < _a.length; _i++) {
var axis = _a[_i];
argsData = {
cancel: false, name: constants_1.zoomComplete, axis: axis, previousZoomFactor: axis.zoomFactor,
previousZoomPosition: axis.zoomPosition, currentZoomFactor: 1, currentZoomPosition: 0,
previousVisibleRange: axis.visibleRange, currentVisibleRange: null
};
axis.zoomFactor = 1;
axis.zoomPosition = 0;
Iif (axis.zoomingScrollBar) {
axis.zoomingScrollBar.isScrollUI = false;
}
Eif (!argsData.cancel) {
axis.zoomFactor = argsData.currentZoomFactor;
axis.zoomPosition = argsData.currentZoomPosition;
this.zoomCompleteEvtCollection.push(argsData);
}
zoomedAxisCollection.push({
zoomFactor: axis.zoomFactor, zoomPosition: axis.zoomFactor, axisName: axis.name,
axisRange: axis.visibleRange
});
if (chart.zoomModule.isDevice && !this.chart.isBlazor) {
chart.trigger(constants_1.zoomComplete, argsData);
}
}
var zoomingEventArgs = { cancel: false, axisCollection: zoomedAxisCollection, name: constants_1.onZooming };
Iif (!zoomingEventArgs.cancel && this.chart.isBlazor) {
this.chart.trigger(constants_1.onZooming, zoomingEventArgs, function () {
_this.setDefferedZoom(chart);
});
return false;
}
else {
return (this.setDefferedZoom(chart));
}
};
Toolkit.prototype.setDefferedZoom = function (chart) {
chart.disableTrackTooltip = false;
var chartDuration = chart.duration;
chart.duration = 600;
chart.zoomModule.isZoomed = chart.zoomModule.isPanning = chart.isChartDrag = chart.delayRedraw = false;
chart.zoomModule.touchMoveList = chart.zoomModule.touchStartList = [];
chart.zoomModule.pinchTarget = null;
chart.zoomRedraw = chart.zoomSettings.enableAnimation;
if (chart.redraw) {
var zoomToolBar = helper_1.getElement(chart.element.id + '_Zooming_KitCollection');
Iif (zoomToolBar) {
zoomToolBar.remove();
}
Eif (chart.tooltipModule) {
Iif (helper_1.getElement(chart.element.id + '_tooltip')) {
helper_1.getElement(chart.element.id + '_tooltip').remove();
}
for (var _i = 0, _a = chart.visibleSeries; _i < _a.length; _i++) {
var series = _a[_i];
if (!ej2_base_1.isNullOrUndefined(series) && (series.marker.visible || chart.tooltip.shared || series.type === 'Scatter' || series.type === 'Bubble')) {
chart.markerRender.removeHighlightedMarker(series, null, true);
}
}
}
}
else {
chart.removeSvg();
}
chart.refreshAxis();
chart.refreshBound();
this.elementOpacity = '1';
chart.duration = chartDuration;
chart.redraw = false;
return false;
};
Toolkit.prototype.zoomIn = function () {
this.zoomInOutCalculation(1, this.chart, this.chart.axisCollections, this.chart.zoomSettings.mode);
return false;
};
Toolkit.prototype.zoomOut = function () {
this.enableZoomButton = false;
this.zoomInOutCalculation(-1, this.chart, this.chart.axisCollections, this.chart.zoomSettings.mode);
return false;
};
Toolkit.prototype.zoom = function () {
this.chart.zoomModule.isPanning = false;
this.elementOpacity = '1';
this.chart.svgObject.setAttribute('cursor', 'auto');
this.zoomInElements.setAttribute('opacity', this.elementOpacity);
this.elementOpacity = (!this.chart.zoomModule.isZoomed && this.chart.zoomSettings.showToolbar) ? '0.2' : '1';
this.zoomOutElements.setAttribute('opacity', this.elementOpacity);
this.applySelection(this.zoomElements.childNodes, this.chart.themeStyle.toolkitSelectionColor);
if (this.chart.theme === 'Fluent2HighContrast') {
this.applySelection(this.zoomInElements.childNodes, this.chart.themeStyle.toolkitFill);
this.applySelection(this.zoomOutElements.childNodes, this.chart.themeStyle.toolkitFill);
}
this.applySelection(this.panElements.childNodes, '#737373');
Eif (helper_1.getElement(this.selectedID)) {
helper_1.getElement(this.selectedID).setAttribute('fill', 'transparent');
}
this.selectedID = this.chart.element.id + '_Zooming_Zoom_1';
helper_1.getElement(this.selectedID).setAttribute('fill', this.chart.themeStyle.toolkitIconRectSelectionFill);
return false;
};
Toolkit.prototype.pan = function () {
Iif (!this.chart.zoomModule.isZoomed) {
return false;
}
var element;
this.chart.zoomModule.isPanning = true;
this.chart.svgObject.setAttribute('cursor', 'pointer');
this.elementOpacity = '0.2';
element = this.zoomInElements ? this.zoomInElements.setAttribute('opacity', this.elementOpacity) : null;
element = this.zoomOutElements ? this.zoomOutElements.setAttribute('opacity', this.elementOpacity) : null;
if (this.chart.theme === 'Fluent2HighContrast') {
helper_1.getElement(this.chart.element.id + '_Zooming_ZoomOut').setAttribute('opacity', '1');
helper_1.getElement(this.chart.element.id + '_Zooming_ZoomIn').setAttribute('opacity', '1');
helper_1.getElement(this.chart.element.id + '_Zooming_ZoomOut_2').setAttribute('fill', '#3FF23F');
helper_1.getElement(this.chart.element.id + '_Zooming_ZoomIn_2').setAttribute('fill', '#3FF23F');
helper_1.getElement(this.chart.element.id + '_Zooming_ZoomIn_3').setAttribute('fill', '#3FF23F');
}
element = this.panElements ? this.applySelection(this.panElements.childNodes, this.chart.themeStyle.toolkitSelectionColor) : null;
element = this.zoomElements ? this.applySelection(this.zoomElements.childNodes, '#737373') : null;
if (helper_1.getElement(this.selectedID)) {
helper_1.getElement(this.selectedID).setAttribute('fill', 'transparent');
}
this.selectedID = this.chart.element.id + '_Zooming_Pan_1';
helper_1.getElement(this.selectedID).setAttribute('fill', this.chart.themeStyle.toolkitIconRectSelectionFill);
return false;
};
Toolkit.prototype.zoomInOutCalculation = function (scale, chart, axes, mode) {
var _this = this;
this.isZoomed = true;
Iif (chart.zoomSettings.showToolbar) {
this.elementOpacity = this.zoomInElements.getAttribute('opacity');
}
if (!chart.zoomModule.isPanning && this.elementOpacity !== '0.2') {
Iif ((chart.zoomSettings.showToolbar && !chart.isZoomed)) {
chart.zoomModule.isZoomed = true;
}
var zoomFactor = void 0;
var zoomPosition = void 0;
var cumulative = void 0;
chart.disableTrackTooltip = true;
chart.delayRedraw = true;
var argsData = void 0;
this.zoomCompleteEvtCollection = [];
var zoomedAxisCollection = [];
for (var _i = 0, _a = axes; _i < _a.length; _i++) {
var axis = _a[_i];
argsData = {
cancel: false, name: constants_1.zoomComplete, axis: axis, previousZoomFactor: axis.zoomFactor,
previousZoomPosition: axis.zoomPosition, currentZoomFactor: axis.zoomFactor, currentZoomPosition: axis.zoomPosition,
previousVisibleRange: axis.visibleRange, currentVisibleRange: null
};
if ((axis.orientation === 'Horizontal' && mode !== 'Y') ||
(axis.orientation === 'Vertical' && mode !== 'X')) {
cumulative = Math.max(Math.max(1 / helper_1.minMax(axis.zoomFactor, 0, 1), 1) + (0.25 * scale), 1);
zoomFactor = (cumulative === 1) ? 1 : helper_1.minMax(1 / cumulative, 0, 1);
zoomPosition = (cumulative === 1) ? 0 : axis.zoomPosition + ((axis.zoomFactor - zoomFactor) * 0.5);
Eif (axis.zoomPosition !== zoomPosition || axis.zoomFactor !== zoomFactor) {
zoomFactor = (zoomPosition + zoomFactor) > 1 ? (1 - zoomPosition) : zoomFactor;
}
argsData.currentZoomFactor = zoomFactor;
argsData.currentZoomPosition = zoomPosition;
Eif (!argsData.cancel) {
axis.zoomFactor = argsData.currentZoomFactor;
axis.zoomPosition = argsData.currentZoomPosition;
this.zoomCompleteEvtCollection.push(argsData);
}
zoomedAxisCollection.push({
zoomFactor: axis.zoomFactor, zoomPosition: axis.zoomFactor, axisName: axis.name,
axisRange: axis.visibleRange
});
}
}
var zoomingEventArgs_1 = { cancel: false, axisCollection: zoomedAxisCollection, name: constants_1.onZooming };
this.chart.trigger(constants_1.onZooming, zoomingEventArgs_1, function () {
Iif (zoomingEventArgs_1.cancel) {
var zoom = new zooming_1.Zoom(chart);
zoom.zoomCancel(axes, _this.zoomCompleteEvtCollection);
}
});
}
};
Toolkit.prototype.applySelection = function (elements, color) {
for (var i = 1, length_1 = elements.length; i < length_1; i++) {
elements[i].setAttribute('fill', color);
}
};
return Toolkit;
}());
exports.Toolkit = Toolkit;
});
|