1 | import { __assign, __extends, __values } from "tslib";
|
2 | import ColorUtil from '@antv/color-util';
|
3 | import { get, isNumber } from '@antv/util';
|
4 | import { FIELD_ORIGIN } from '../constant';
|
5 | import Geometry from './base';
|
6 |
|
7 |
|
8 |
|
9 | var Heatmap = (function (_super) {
|
10 | __extends(Heatmap, _super);
|
11 | function Heatmap() {
|
12 | var _this = _super !== null && _super.apply(this, arguments) || this;
|
13 | _this.type = 'heatmap';
|
14 | _this.paletteCache = {};
|
15 | return _this;
|
16 | }
|
17 | Heatmap.prototype.updateElements = function (mappingDataArray, isUpdate) {
|
18 | if (isUpdate === void 0) { isUpdate = false; }
|
19 | for (var i = 0; i < mappingDataArray.length; i++) {
|
20 | var mappingData = mappingDataArray[i];
|
21 | var range = this.prepareRange(mappingData);
|
22 | var radius = this.prepareSize();
|
23 | var blur_1 = get(this.styleOption, ['cfg', 'shadowBlur']);
|
24 | if (!isNumber(blur_1)) {
|
25 | blur_1 = radius / 2;
|
26 | }
|
27 | this.prepareGreyScaleBlurredCircle(radius, blur_1);
|
28 | this.drawWithRange(mappingData, range, radius, blur_1);
|
29 | }
|
30 | };
|
31 |
|
32 | Heatmap.prototype.color = function (field, cfg) {
|
33 | this.createAttrOption('color', field, typeof cfg !== 'function' ? cfg : '');
|
34 | return this;
|
35 | };
|
36 | |
37 |
|
38 |
|
39 | Heatmap.prototype.clear = function () {
|
40 | _super.prototype.clear.call(this);
|
41 | this.clearShadowCanvasCtx();
|
42 | this.paletteCache = {};
|
43 | };
|
44 | Heatmap.prototype.prepareRange = function (data) {
|
45 | var colorAttr = this.getAttribute('color');
|
46 | var colorField = colorAttr.getFields()[0];
|
47 | var min = Infinity;
|
48 | var max = -Infinity;
|
49 | data.forEach(function (row) {
|
50 | var value = row[FIELD_ORIGIN][colorField];
|
51 | if (value > max) {
|
52 | max = value;
|
53 | }
|
54 | if (value < min) {
|
55 | min = value;
|
56 | }
|
57 | });
|
58 | if (min === max) {
|
59 | min = max - 1;
|
60 | }
|
61 | return [min, max];
|
62 | };
|
63 | Heatmap.prototype.prepareSize = function () {
|
64 | var radius = this.getDefaultValue('size');
|
65 | if (!isNumber(radius)) {
|
66 | radius = this.getDefaultSize();
|
67 | }
|
68 | return radius;
|
69 | };
|
70 | Heatmap.prototype.prepareGreyScaleBlurredCircle = function (radius, blur) {
|
71 | var grayScaleBlurredCanvas = this.getGrayScaleBlurredCanvas();
|
72 | var r2 = radius + blur;
|
73 | var ctx = grayScaleBlurredCanvas.getContext('2d');
|
74 | grayScaleBlurredCanvas.width = grayScaleBlurredCanvas.height = r2 * 2;
|
75 | ctx.clearRect(0, 0, grayScaleBlurredCanvas.width, grayScaleBlurredCanvas.height);
|
76 | ctx.shadowOffsetX = ctx.shadowOffsetY = r2 * 2;
|
77 | ctx.shadowBlur = blur;
|
78 | ctx.shadowColor = 'black';
|
79 | ctx.beginPath();
|
80 | ctx.arc(-r2, -r2, radius, 0, Math.PI * 2, true);
|
81 | ctx.closePath();
|
82 | ctx.fill();
|
83 | };
|
84 | Heatmap.prototype.drawWithRange = function (data, range, radius, blur) {
|
85 | var e_1, _a;
|
86 |
|
87 | var _b = this.coordinate, start = _b.start, end = _b.end;
|
88 | var width = this.coordinate.getWidth();
|
89 | var height = this.coordinate.getHeight();
|
90 |
|
91 | var colorAttr = this.getAttribute('color');
|
92 | var valueField = colorAttr.getFields()[0];
|
93 |
|
94 | this.clearShadowCanvasCtx();
|
95 | var ctx = this.getShadowCanvasCtx();
|
96 |
|
97 | if (range) {
|
98 | data = data.filter(function (row) {
|
99 | return row[FIELD_ORIGIN][valueField] <= range[1] && row[FIELD_ORIGIN][valueField] >= range[0];
|
100 | });
|
101 | }
|
102 |
|
103 | var scale = this.scales[valueField];
|
104 | try {
|
105 | for (var data_1 = __values(data), data_1_1 = data_1.next(); !data_1_1.done; data_1_1 = data_1.next()) {
|
106 | var obj = data_1_1.value;
|
107 | var _c = this.getDrawCfg(obj), x = _c.x, y = _c.y;
|
108 | var alpha = scale.scale(obj[FIELD_ORIGIN][valueField]);
|
109 | this.drawGrayScaleBlurredCircle(x - start.x, y - end.y, radius + blur, alpha, ctx);
|
110 | }
|
111 | }
|
112 | catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
113 | finally {
|
114 | try {
|
115 | if (data_1_1 && !data_1_1.done && (_a = data_1.return)) _a.call(data_1);
|
116 | }
|
117 | finally { if (e_1) throw e_1.error; }
|
118 | }
|
119 |
|
120 | var colored = ctx.getImageData(0, 0, width, height);
|
121 | this.clearShadowCanvasCtx();
|
122 | this.colorize(colored);
|
123 | ctx.putImageData(colored, 0, 0);
|
124 | var imageShape = this.getImageShape();
|
125 | imageShape.attr('x', start.x);
|
126 | imageShape.attr('y', end.y);
|
127 | imageShape.attr('width', width);
|
128 | imageShape.attr('height', height);
|
129 | imageShape.attr('img', ctx.canvas);
|
130 | imageShape.set('origin', this.getShapeInfo(data));
|
131 | };
|
132 | Heatmap.prototype.getDefaultSize = function () {
|
133 | var position = this.getAttribute('position');
|
134 | var coordinate = this.coordinate;
|
135 | return Math.min(coordinate.getWidth() / (position.scales[0].ticks.length * 4), coordinate.getHeight() / (position.scales[1].ticks.length * 4));
|
136 | };
|
137 | Heatmap.prototype.clearShadowCanvasCtx = function () {
|
138 | var ctx = this.getShadowCanvasCtx();
|
139 | ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
140 | };
|
141 | Heatmap.prototype.getShadowCanvasCtx = function () {
|
142 | var canvas = this.shadowCanvas;
|
143 | if (!canvas) {
|
144 | canvas = document.createElement('canvas');
|
145 | this.shadowCanvas = canvas;
|
146 | }
|
147 | canvas.width = this.coordinate.getWidth();
|
148 | canvas.height = this.coordinate.getHeight();
|
149 | return canvas.getContext('2d');
|
150 | };
|
151 | Heatmap.prototype.getGrayScaleBlurredCanvas = function () {
|
152 | if (!this.grayScaleBlurredCanvas) {
|
153 | this.grayScaleBlurredCanvas = document.createElement('canvas');
|
154 | }
|
155 | return this.grayScaleBlurredCanvas;
|
156 | };
|
157 | Heatmap.prototype.drawGrayScaleBlurredCircle = function (x, y, r, alpha, ctx) {
|
158 | var grayScaleBlurredCanvas = this.getGrayScaleBlurredCanvas();
|
159 | ctx.globalAlpha = alpha;
|
160 | ctx.drawImage(grayScaleBlurredCanvas, x - r, y - r);
|
161 | };
|
162 | Heatmap.prototype.colorize = function (img) {
|
163 | var colorAttr = this.getAttribute('color');
|
164 | var pixels = img.data;
|
165 | var paletteCache = this.paletteCache;
|
166 | for (var i = 3; i < pixels.length; i += 4) {
|
167 | var alpha = pixels[i];
|
168 | if (isNumber(alpha)) {
|
169 | var palette = paletteCache[alpha] ? paletteCache[alpha] : ColorUtil.rgb2arr(colorAttr.gradient(alpha / 256));
|
170 | pixels[i - 3] = palette[0];
|
171 | pixels[i - 2] = palette[1];
|
172 | pixels[i - 1] = palette[2];
|
173 | pixels[i] = alpha;
|
174 | }
|
175 | }
|
176 | };
|
177 | Heatmap.prototype.getImageShape = function () {
|
178 | var imageShape = this.imageShape;
|
179 | if (imageShape) {
|
180 | return imageShape;
|
181 | }
|
182 | var container = this.container;
|
183 | imageShape = container.addShape({
|
184 | type: 'image',
|
185 | attrs: {},
|
186 | });
|
187 | this.imageShape = imageShape;
|
188 | return imageShape;
|
189 | };
|
190 | Heatmap.prototype.getShapeInfo = function (mappingData) {
|
191 | var shapeCfg = this.getDrawCfg(mappingData[0]);
|
192 | var data = mappingData.map(function (obj) {
|
193 | return obj[FIELD_ORIGIN];
|
194 | });
|
195 | return __assign(__assign({}, shapeCfg), { mappingData: mappingData, data: data });
|
196 | };
|
197 | return Heatmap;
|
198 | }(Geometry));
|
199 | export default Heatmap;
|
200 |
|
\ | No newline at end of file |