LargeSymbolDraw.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309
  1. /*
  2. * Licensed to the Apache Software Foundation (ASF) under one
  3. * or more contributor license agreements. See the NOTICE file
  4. * distributed with this work for additional information
  5. * regarding copyright ownership. The ASF licenses this file
  6. * to you under the Apache License, Version 2.0 (the
  7. * "License"); you may not use this file except in compliance
  8. * with the License. You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing,
  13. * software distributed under the License is distributed on an
  14. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  15. * KIND, either express or implied. See the License for the
  16. * specific language governing permissions and limitations
  17. * under the License.
  18. */
  19. /**
  20. * AUTO-GENERATED FILE. DO NOT MODIFY.
  21. */
  22. /*
  23. * Licensed to the Apache Software Foundation (ASF) under one
  24. * or more contributor license agreements. See the NOTICE file
  25. * distributed with this work for additional information
  26. * regarding copyright ownership. The ASF licenses this file
  27. * to you under the Apache License, Version 2.0 (the
  28. * "License"); you may not use this file except in compliance
  29. * with the License. You may obtain a copy of the License at
  30. *
  31. * http://www.apache.org/licenses/LICENSE-2.0
  32. *
  33. * Unless required by applicable law or agreed to in writing,
  34. * software distributed under the License is distributed on an
  35. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  36. * KIND, either express or implied. See the License for the
  37. * specific language governing permissions and limitations
  38. * under the License.
  39. */
  40. import { __extends } from "tslib";
  41. /* global Float32Array */
  42. // TODO Batch by color
  43. import * as graphic from '../../util/graphic.js';
  44. import { createSymbol } from '../../util/symbol.js';
  45. import { getECData } from '../../util/innerStore.js';
  46. var BOOST_SIZE_THRESHOLD = 4;
  47. var LargeSymbolPathShape = /** @class */function () {
  48. function LargeSymbolPathShape() {}
  49. return LargeSymbolPathShape;
  50. }();
  51. var LargeSymbolPath = /** @class */function (_super) {
  52. __extends(LargeSymbolPath, _super);
  53. function LargeSymbolPath(opts) {
  54. var _this = _super.call(this, opts) || this;
  55. _this._off = 0;
  56. _this.hoverDataIdx = -1;
  57. return _this;
  58. }
  59. LargeSymbolPath.prototype.getDefaultShape = function () {
  60. return new LargeSymbolPathShape();
  61. };
  62. LargeSymbolPath.prototype.reset = function () {
  63. this.notClear = false;
  64. this._off = 0;
  65. };
  66. LargeSymbolPath.prototype.buildPath = function (path, shape) {
  67. var points = shape.points;
  68. var size = shape.size;
  69. var symbolProxy = this.symbolProxy;
  70. var symbolProxyShape = symbolProxy.shape;
  71. var ctx = path.getContext ? path.getContext() : path;
  72. var canBoost = ctx && size[0] < BOOST_SIZE_THRESHOLD;
  73. var softClipShape = this.softClipShape;
  74. var i;
  75. // Do draw in afterBrush.
  76. if (canBoost) {
  77. this._ctx = ctx;
  78. return;
  79. }
  80. this._ctx = null;
  81. for (i = this._off; i < points.length;) {
  82. var x = points[i++];
  83. var y = points[i++];
  84. if (isNaN(x) || isNaN(y)) {
  85. continue;
  86. }
  87. if (softClipShape && !softClipShape.contain(x, y)) {
  88. continue;
  89. }
  90. symbolProxyShape.x = x - size[0] / 2;
  91. symbolProxyShape.y = y - size[1] / 2;
  92. symbolProxyShape.width = size[0];
  93. symbolProxyShape.height = size[1];
  94. symbolProxy.buildPath(path, symbolProxyShape, true);
  95. }
  96. if (this.incremental) {
  97. this._off = i;
  98. this.notClear = true;
  99. }
  100. };
  101. LargeSymbolPath.prototype.afterBrush = function () {
  102. var shape = this.shape;
  103. var points = shape.points;
  104. var size = shape.size;
  105. var ctx = this._ctx;
  106. var softClipShape = this.softClipShape;
  107. var i;
  108. if (!ctx) {
  109. return;
  110. }
  111. // PENDING If style or other canvas status changed?
  112. for (i = this._off; i < points.length;) {
  113. var x = points[i++];
  114. var y = points[i++];
  115. if (isNaN(x) || isNaN(y)) {
  116. continue;
  117. }
  118. if (softClipShape && !softClipShape.contain(x, y)) {
  119. continue;
  120. }
  121. // fillRect is faster than building a rect path and draw.
  122. // And it support light globalCompositeOperation.
  123. ctx.fillRect(x - size[0] / 2, y - size[1] / 2, size[0], size[1]);
  124. }
  125. if (this.incremental) {
  126. this._off = i;
  127. this.notClear = true;
  128. }
  129. };
  130. LargeSymbolPath.prototype.findDataIndex = function (x, y) {
  131. // TODO ???
  132. // Consider transform
  133. var shape = this.shape;
  134. var points = shape.points;
  135. var size = shape.size;
  136. var w = Math.max(size[0], 4);
  137. var h = Math.max(size[1], 4);
  138. // Not consider transform
  139. // Treat each element as a rect
  140. // top down traverse
  141. for (var idx = points.length / 2 - 1; idx >= 0; idx--) {
  142. var i = idx * 2;
  143. var x0 = points[i] - w / 2;
  144. var y0 = points[i + 1] - h / 2;
  145. if (x >= x0 && y >= y0 && x <= x0 + w && y <= y0 + h) {
  146. return idx;
  147. }
  148. }
  149. return -1;
  150. };
  151. LargeSymbolPath.prototype.contain = function (x, y) {
  152. var localPos = this.transformCoordToLocal(x, y);
  153. var rect = this.getBoundingRect();
  154. x = localPos[0];
  155. y = localPos[1];
  156. if (rect.contain(x, y)) {
  157. // Cache found data index.
  158. var dataIdx = this.hoverDataIdx = this.findDataIndex(x, y);
  159. return dataIdx >= 0;
  160. }
  161. this.hoverDataIdx = -1;
  162. return false;
  163. };
  164. LargeSymbolPath.prototype.getBoundingRect = function () {
  165. // Ignore stroke for large symbol draw.
  166. var rect = this._rect;
  167. if (!rect) {
  168. var shape = this.shape;
  169. var points = shape.points;
  170. var size = shape.size;
  171. var w = size[0];
  172. var h = size[1];
  173. var minX = Infinity;
  174. var minY = Infinity;
  175. var maxX = -Infinity;
  176. var maxY = -Infinity;
  177. for (var i = 0; i < points.length;) {
  178. var x = points[i++];
  179. var y = points[i++];
  180. minX = Math.min(x, minX);
  181. maxX = Math.max(x, maxX);
  182. minY = Math.min(y, minY);
  183. maxY = Math.max(y, maxY);
  184. }
  185. rect = this._rect = new graphic.BoundingRect(minX - w / 2, minY - h / 2, maxX - minX + w, maxY - minY + h);
  186. }
  187. return rect;
  188. };
  189. return LargeSymbolPath;
  190. }(graphic.Path);
  191. var LargeSymbolDraw = /** @class */function () {
  192. function LargeSymbolDraw() {
  193. this.group = new graphic.Group();
  194. }
  195. /**
  196. * Update symbols draw by new data
  197. */
  198. LargeSymbolDraw.prototype.updateData = function (data, opt) {
  199. this._clear();
  200. var symbolEl = this._create();
  201. symbolEl.setShape({
  202. points: data.getLayout('points')
  203. });
  204. this._setCommon(symbolEl, data, opt);
  205. };
  206. LargeSymbolDraw.prototype.updateLayout = function (data) {
  207. var points = data.getLayout('points');
  208. this.group.eachChild(function (child) {
  209. if (child.startIndex != null) {
  210. var len = (child.endIndex - child.startIndex) * 2;
  211. var byteOffset = child.startIndex * 4 * 2;
  212. points = new Float32Array(points.buffer, byteOffset, len);
  213. }
  214. child.setShape('points', points);
  215. // Reset draw cursor.
  216. child.reset();
  217. });
  218. };
  219. LargeSymbolDraw.prototype.incrementalPrepareUpdate = function (data) {
  220. this._clear();
  221. };
  222. LargeSymbolDraw.prototype.incrementalUpdate = function (taskParams, data, opt) {
  223. var lastAdded = this._newAdded[0];
  224. var points = data.getLayout('points');
  225. var oldPoints = lastAdded && lastAdded.shape.points;
  226. // Merging the exists. Each element has 1e4 points.
  227. // Consider the performance balance between too much elements and too much points in one shape(may affect hover optimization)
  228. if (oldPoints && oldPoints.length < 2e4) {
  229. var oldLen = oldPoints.length;
  230. var newPoints = new Float32Array(oldLen + points.length);
  231. // Concat two array
  232. newPoints.set(oldPoints);
  233. newPoints.set(points, oldLen);
  234. // Update endIndex
  235. lastAdded.endIndex = taskParams.end;
  236. lastAdded.setShape({
  237. points: newPoints
  238. });
  239. } else {
  240. // Clear
  241. this._newAdded = [];
  242. var symbolEl = this._create();
  243. symbolEl.startIndex = taskParams.start;
  244. symbolEl.endIndex = taskParams.end;
  245. symbolEl.incremental = true;
  246. symbolEl.setShape({
  247. points: points
  248. });
  249. this._setCommon(symbolEl, data, opt);
  250. }
  251. };
  252. LargeSymbolDraw.prototype.eachRendered = function (cb) {
  253. this._newAdded[0] && cb(this._newAdded[0]);
  254. };
  255. LargeSymbolDraw.prototype._create = function () {
  256. var symbolEl = new LargeSymbolPath({
  257. cursor: 'default'
  258. });
  259. symbolEl.ignoreCoarsePointer = true;
  260. this.group.add(symbolEl);
  261. this._newAdded.push(symbolEl);
  262. return symbolEl;
  263. };
  264. LargeSymbolDraw.prototype._setCommon = function (symbolEl, data, opt) {
  265. var hostModel = data.hostModel;
  266. opt = opt || {};
  267. var size = data.getVisual('symbolSize');
  268. symbolEl.setShape('size', size instanceof Array ? size : [size, size]);
  269. symbolEl.softClipShape = opt.clipShape || null;
  270. // Create symbolProxy to build path for each data
  271. symbolEl.symbolProxy = createSymbol(data.getVisual('symbol'), 0, 0, 0, 0);
  272. // Use symbolProxy setColor method
  273. symbolEl.setColor = symbolEl.symbolProxy.setColor;
  274. var extrudeShadow = symbolEl.shape.size[0] < BOOST_SIZE_THRESHOLD;
  275. symbolEl.useStyle(
  276. // Draw shadow when doing fillRect is extremely slow.
  277. hostModel.getModel('itemStyle').getItemStyle(extrudeShadow ? ['color', 'shadowBlur', 'shadowColor'] : ['color']));
  278. var globalStyle = data.getVisual('style');
  279. var visualColor = globalStyle && globalStyle.fill;
  280. if (visualColor) {
  281. symbolEl.setColor(visualColor);
  282. }
  283. var ecData = getECData(symbolEl);
  284. // Enable tooltip
  285. // PENDING May have performance issue when path is extremely large
  286. ecData.seriesIndex = hostModel.seriesIndex;
  287. symbolEl.on('mousemove', function (e) {
  288. ecData.dataIndex = null;
  289. var dataIndex = symbolEl.hoverDataIdx;
  290. if (dataIndex >= 0) {
  291. // Provide dataIndex for tooltip
  292. ecData.dataIndex = dataIndex + (symbolEl.startIndex || 0);
  293. }
  294. });
  295. };
  296. LargeSymbolDraw.prototype.remove = function () {
  297. this._clear();
  298. };
  299. LargeSymbolDraw.prototype._clear = function () {
  300. this._newAdded = [];
  301. this.group.removeAll();
  302. };
  303. return LargeSymbolDraw;
  304. }();
  305. export default LargeSymbolDraw;