1 | "use strict";
|
2 | Object.defineProperty(exports, "__esModule", { value: true });
|
3 | var tslib_1 = require("tslib");
|
4 | var g_base_1 = require("@antv/g-base");
|
5 | var hit_1 = require("./util/hit");
|
6 | var Shape = require("./shape");
|
7 | var group_1 = require("./group");
|
8 | var util_1 = require("./util/util");
|
9 | var draw_1 = require("./util/draw");
|
10 | var Canvas = (function (_super) {
|
11 | tslib_1.__extends(Canvas, _super);
|
12 | function Canvas() {
|
13 | return _super !== null && _super.apply(this, arguments) || this;
|
14 | }
|
15 | Canvas.prototype.getDefaultCfg = function () {
|
16 | var cfg = _super.prototype.getDefaultCfg.call(this);
|
17 |
|
18 | cfg['renderer'] = 'canvas';
|
19 |
|
20 | cfg['autoDraw'] = true;
|
21 |
|
22 | cfg['localRefresh'] = true;
|
23 | cfg['refreshElements'] = [];
|
24 |
|
25 | cfg['clipView'] = true;
|
26 |
|
27 | cfg['quickHit'] = false;
|
28 | return cfg;
|
29 | };
|
30 | |
31 |
|
32 |
|
33 |
|
34 | Canvas.prototype.onCanvasChange = function (changeType) {
|
35 | |
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 | if (changeType === 'attr' || changeType === 'sort' || changeType === 'changeSize') {
|
42 | this.set('refreshElements', [this]);
|
43 | this.draw();
|
44 | }
|
45 | };
|
46 | Canvas.prototype.getShapeBase = function () {
|
47 | return Shape;
|
48 | };
|
49 | Canvas.prototype.getGroupBase = function () {
|
50 | return group_1.default;
|
51 | };
|
52 | |
53 |
|
54 |
|
55 | Canvas.prototype.getPixelRatio = function () {
|
56 | var pixelRatio = this.get('pixelRatio') || util_1.getPixelRatio();
|
57 |
|
58 | return pixelRatio >= 1 ? Math.ceil(pixelRatio) : 1;
|
59 | };
|
60 | Canvas.prototype.getViewRange = function () {
|
61 | return {
|
62 | minX: 0,
|
63 | minY: 0,
|
64 | maxX: this.cfg.width,
|
65 | maxY: this.cfg.height,
|
66 | };
|
67 | };
|
68 |
|
69 | Canvas.prototype.createDom = function () {
|
70 | var element = document.createElement('canvas');
|
71 | var context = element.getContext('2d');
|
72 |
|
73 | this.set('context', context);
|
74 | return element;
|
75 | };
|
76 | Canvas.prototype.setDOMSize = function (width, height) {
|
77 | _super.prototype.setDOMSize.call(this, width, height);
|
78 | var context = this.get('context');
|
79 | var el = this.get('el');
|
80 | var pixelRatio = this.getPixelRatio();
|
81 | el.width = pixelRatio * width;
|
82 | el.height = pixelRatio * height;
|
83 |
|
84 | if (pixelRatio > 1) {
|
85 | context.scale(pixelRatio, pixelRatio);
|
86 | }
|
87 | };
|
88 |
|
89 | Canvas.prototype.clear = function () {
|
90 | _super.prototype.clear.call(this);
|
91 | this._clearFrame();
|
92 | var context = this.get('context');
|
93 | var element = this.get('el');
|
94 | context.clearRect(0, 0, element.width, element.height);
|
95 | };
|
96 | Canvas.prototype.getShape = function (x, y) {
|
97 | var shape;
|
98 | if (this.get('quickHit')) {
|
99 | shape = hit_1.getShape(this, x, y);
|
100 | }
|
101 | else {
|
102 | shape = _super.prototype.getShape.call(this, x, y, null);
|
103 | }
|
104 | return shape;
|
105 | };
|
106 |
|
107 | Canvas.prototype._getRefreshRegion = function () {
|
108 | var elements = this.get('refreshElements');
|
109 | var viewRegion = this.getViewRange();
|
110 | var region;
|
111 |
|
112 | if (elements.length && elements[0] === this) {
|
113 | region = viewRegion;
|
114 | }
|
115 | else {
|
116 | region = draw_1.getMergedRegion(elements);
|
117 | if (region) {
|
118 | region.minX = Math.floor(region.minX);
|
119 | region.minY = Math.floor(region.minY);
|
120 | region.maxX = Math.ceil(region.maxX);
|
121 | region.maxY = Math.ceil(region.maxY);
|
122 | region.maxY += 1;
|
123 | var clipView = this.get('clipView');
|
124 |
|
125 | if (clipView) {
|
126 | region = draw_1.mergeView(region, viewRegion);
|
127 | }
|
128 | }
|
129 | }
|
130 | return region;
|
131 | };
|
132 | |
133 |
|
134 |
|
135 |
|
136 | Canvas.prototype.refreshElement = function (element) {
|
137 | var refreshElements = this.get('refreshElements');
|
138 | refreshElements.push(element);
|
139 |
|
140 |
|
141 |
|
142 | };
|
143 |
|
144 | Canvas.prototype._clearFrame = function () {
|
145 | var drawFrame = this.get('drawFrame');
|
146 | if (drawFrame) {
|
147 |
|
148 | util_1.clearAnimationFrame(drawFrame);
|
149 | this.set('drawFrame', null);
|
150 | this.set('refreshElements', []);
|
151 | }
|
152 | };
|
153 |
|
154 | Canvas.prototype.draw = function () {
|
155 | var drawFrame = this.get('drawFrame');
|
156 | if (this.get('autoDraw') && drawFrame) {
|
157 | return;
|
158 | }
|
159 | this._startDraw();
|
160 | };
|
161 |
|
162 | Canvas.prototype._drawAll = function () {
|
163 | var context = this.get('context');
|
164 | var element = this.get('el');
|
165 | var children = this.getChildren();
|
166 | context.clearRect(0, 0, element.width, element.height);
|
167 | draw_1.applyAttrsToContext(context, this);
|
168 | draw_1.drawChildren(context, children);
|
169 |
|
170 | this.set('refreshElements', []);
|
171 | };
|
172 |
|
173 | Canvas.prototype._drawRegion = function () {
|
174 | var context = this.get('context');
|
175 | var refreshElements = this.get('refreshElements');
|
176 | var children = this.getChildren();
|
177 | var region = this._getRefreshRegion();
|
178 |
|
179 |
|
180 | if (region) {
|
181 |
|
182 | context.clearRect(region.minX, region.minY, region.maxX - region.minX, region.maxY - region.minY);
|
183 |
|
184 | context.save();
|
185 | context.beginPath();
|
186 | context.rect(region.minX, region.minY, region.maxX - region.minX, region.maxY - region.minY);
|
187 | context.clip();
|
188 | draw_1.applyAttrsToContext(context, this);
|
189 |
|
190 | draw_1.checkRefresh(this, children, region);
|
191 |
|
192 | draw_1.drawChildren(context, children, region);
|
193 | context.restore();
|
194 | }
|
195 | else if (refreshElements.length) {
|
196 |
|
197 |
|
198 |
|
199 |
|
200 |
|
201 | draw_1.clearChanged(refreshElements);
|
202 | }
|
203 | util_1.each(refreshElements, function (element) {
|
204 | if (element.get('hasChanged')) {
|
205 |
|
206 |
|
207 | element.set('hasChanged', false);
|
208 | }
|
209 | });
|
210 | this.set('refreshElements', []);
|
211 | };
|
212 |
|
213 | Canvas.prototype._startDraw = function () {
|
214 | var _this = this;
|
215 | var drawFrame = this.get('drawFrame');
|
216 | if (!drawFrame) {
|
217 | drawFrame = util_1.requestAnimationFrame(function () {
|
218 | if (_this.get('localRefresh')) {
|
219 | _this._drawRegion();
|
220 | }
|
221 | else {
|
222 | _this._drawAll();
|
223 | }
|
224 | _this.set('drawFrame', null);
|
225 | });
|
226 | this.set('drawFrame', drawFrame);
|
227 | }
|
228 | };
|
229 | Canvas.prototype.skipDraw = function () { };
|
230 | return Canvas;
|
231 | }(g_base_1.AbstractCanvas));
|
232 | exports.default = Canvas;
|
233 |
|
\ | No newline at end of file |