1 | "use strict";
|
2 | Object.defineProperty(exports, "__esModule", { value: true });
|
3 | var tslib_1 = require("tslib");
|
4 | var util_1 = require("@antv/util");
|
5 | var constant_1 = require("../constant");
|
6 | var engine_1 = require("../engine");
|
7 | var dom_1 = require("../util/dom");
|
8 | var view_1 = (0, tslib_1.__importDefault)(require("./view"));
|
9 |
|
10 |
|
11 |
|
12 | var Chart = (function (_super) {
|
13 | (0, tslib_1.__extends)(Chart, _super);
|
14 |
|
15 | function Chart(props) {
|
16 | var _this = this;
|
17 | var container = props.container, width = props.width, height = props.height, _a = props.autoFit, autoFit = _a === void 0 ? false : _a, padding = props.padding, appendPadding = props.appendPadding, _b = props.renderer, renderer = _b === void 0 ? 'canvas' : _b, pixelRatio = props.pixelRatio, _c = props.localRefresh, localRefresh = _c === void 0 ? true : _c, _d = props.visible, visible = _d === void 0 ? true : _d, _e = props.supportCSSTransform, supportCSSTransform = _e === void 0 ? false : _e, _f = props.defaultInteractions, defaultInteractions = _f === void 0 ? ['tooltip', 'legend-filter', 'legend-active', 'continuous-filter', 'ellipsis-text'] : _f, options = props.options, limitInPlot = props.limitInPlot, theme = props.theme, syncViewPadding = props.syncViewPadding;
|
18 | var ele = (0, util_1.isString)(container) ? document.getElementById(container) : container;
|
19 |
|
20 | var wrapperElement = (0, dom_1.createDom)('<div style="position:relative;"></div>');
|
21 | ele.appendChild(wrapperElement);
|
22 |
|
23 | var size = (0, dom_1.getChartSize)(ele, autoFit, width, height);
|
24 | var G = (0, engine_1.getEngine)(renderer);
|
25 | var canvas = new G.Canvas((0, tslib_1.__assign)({ container: wrapperElement, pixelRatio: pixelRatio, localRefresh: localRefresh, supportCSSTransform: supportCSSTransform }, size));
|
26 |
|
27 | _this = _super.call(this, {
|
28 | parent: null,
|
29 | canvas: canvas,
|
30 |
|
31 | backgroundGroup: canvas.addGroup({ zIndex: constant_1.GROUP_Z_INDEX.BG }),
|
32 | middleGroup: canvas.addGroup({ zIndex: constant_1.GROUP_Z_INDEX.MID }),
|
33 | foregroundGroup: canvas.addGroup({ zIndex: constant_1.GROUP_Z_INDEX.FORE }),
|
34 | padding: padding,
|
35 | appendPadding: appendPadding,
|
36 | visible: visible,
|
37 | options: options,
|
38 | limitInPlot: limitInPlot,
|
39 | theme: theme,
|
40 | syncViewPadding: syncViewPadding,
|
41 | }) || this;
|
42 | |
43 |
|
44 |
|
45 | _this.onResize = (0, util_1.debounce)(function () {
|
46 | _this.forceFit();
|
47 | }, 300);
|
48 | _this.ele = ele;
|
49 | _this.canvas = canvas;
|
50 | _this.width = size.width;
|
51 | _this.height = size.height;
|
52 | _this.autoFit = autoFit;
|
53 | _this.localRefresh = localRefresh;
|
54 | _this.renderer = renderer;
|
55 | _this.wrapperElement = wrapperElement;
|
56 |
|
57 | _this.updateCanvasStyle();
|
58 | _this.bindAutoFit();
|
59 | _this.initDefaultInteractions(defaultInteractions);
|
60 | return _this;
|
61 | }
|
62 | Chart.prototype.initDefaultInteractions = function (interactions) {
|
63 | var _this = this;
|
64 | (0, util_1.each)(interactions, function (interaction) {
|
65 | _this.interaction(interaction);
|
66 | });
|
67 | };
|
68 | |
69 |
|
70 |
|
71 |
|
72 | Chart.prototype.aria = function (ariaOption) {
|
73 | var ATTR = 'aria-label';
|
74 | if (ariaOption === false) {
|
75 | this.ele.removeAttribute(ATTR);
|
76 | }
|
77 | else {
|
78 | this.ele.setAttribute(ATTR, ariaOption.label);
|
79 | }
|
80 | };
|
81 | |
82 |
|
83 |
|
84 |
|
85 |
|
86 |
|
87 | Chart.prototype.changeSize = function (width, height) {
|
88 |
|
89 | if (this.width === width && this.height === height) {
|
90 | return this;
|
91 | }
|
92 | this.emit(constant_1.VIEW_LIFE_CIRCLE.BEFORE_CHANGE_SIZE);
|
93 | this.width = width;
|
94 | this.height = height;
|
95 | this.canvas.changeSize(width, height);
|
96 |
|
97 | this.render(true);
|
98 | this.emit(constant_1.VIEW_LIFE_CIRCLE.AFTER_CHANGE_SIZE);
|
99 | return this;
|
100 | };
|
101 | |
102 |
|
103 |
|
104 | Chart.prototype.clear = function () {
|
105 | _super.prototype.clear.call(this);
|
106 | this.aria(false);
|
107 | };
|
108 | |
109 |
|
110 |
|
111 |
|
112 | Chart.prototype.destroy = function () {
|
113 | _super.prototype.destroy.call(this);
|
114 | this.unbindAutoFit();
|
115 | this.canvas.destroy();
|
116 | (0, dom_1.removeDom)(this.wrapperElement);
|
117 | this.wrapperElement = null;
|
118 | };
|
119 | |
120 |
|
121 |
|
122 |
|
123 |
|
124 | Chart.prototype.changeVisible = function (visible) {
|
125 | _super.prototype.changeVisible.call(this, visible);
|
126 | this.wrapperElement.style.display = visible ? '' : 'none';
|
127 | return this;
|
128 | };
|
129 | |
130 |
|
131 |
|
132 | Chart.prototype.forceFit = function () {
|
133 |
|
134 | if (!this.destroyed) {
|
135 |
|
136 | var _a = (0, dom_1.getChartSize)(this.ele, true, this.width, this.height), width = _a.width, height = _a.height;
|
137 | this.changeSize(width, height);
|
138 | }
|
139 | };
|
140 | Chart.prototype.updateCanvasStyle = function () {
|
141 | (0, dom_1.modifyCSS)(this.canvas.get('el'), {
|
142 | display: 'inline-block',
|
143 | verticalAlign: 'middle',
|
144 | });
|
145 | };
|
146 | Chart.prototype.bindAutoFit = function () {
|
147 | if (this.autoFit) {
|
148 | window.addEventListener('resize', this.onResize);
|
149 | }
|
150 | };
|
151 | Chart.prototype.unbindAutoFit = function () {
|
152 | if (this.autoFit) {
|
153 | window.removeEventListener('resize', this.onResize);
|
154 | }
|
155 | };
|
156 | return Chart;
|
157 | }(view_1.default));
|
158 | exports.default = Chart;
|
159 |
|
\ | No newline at end of file |