LargeSymbolDraw.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323
  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. import { validateUpstreamOutputRange } from '../../util/model.js';
  47. var BOOST_SIZE_THRESHOLD = 4;
  48. var LargeSymbolPathShape = /** @class */function () {
  49. function LargeSymbolPathShape() {}
  50. return LargeSymbolPathShape;
  51. }();
  52. var LargeSymbolPath = /** @class */function (_super) {
  53. __extends(LargeSymbolPath, _super);
  54. function LargeSymbolPath(opts) {
  55. var _this = _super.call(this, opts) || this;
  56. _this._off = 0;
  57. _this.hoverDataIdx = -1;
  58. return _this;
  59. }
  60. LargeSymbolPath.prototype.getDefaultShape = function () {
  61. return new LargeSymbolPathShape();
  62. };
  63. LargeSymbolPath.prototype.reset = function () {
  64. this.notClear = false;
  65. this._off = 0;
  66. };
  67. LargeSymbolPath.prototype.beforeBrush = function (param) {
  68. if (param && !param.contentRetained) {
  69. this.reset();
  70. }
  71. };
  72. LargeSymbolPath.prototype.buildPath = function (path, shape) {
  73. var points = shape.points;
  74. var size = shape.size;
  75. var symbolProxy = this.symbolProxy;
  76. var symbolProxyShape = symbolProxy.shape;
  77. var ctx = path.getContext ? path.getContext() : path;
  78. var canBoost = ctx && size[0] < BOOST_SIZE_THRESHOLD;
  79. var softClipShape = this.softClipShape;
  80. var i;
  81. // Do draw in afterBrush.
  82. if (canBoost) {
  83. this._ctx = ctx;
  84. return;
  85. }
  86. this._ctx = null;
  87. for (i = this._off; i < points.length;) {
  88. var x = points[i++];
  89. var y = points[i++];
  90. if (isNaN(x) || isNaN(y)) {
  91. continue;
  92. }
  93. if (softClipShape && !softClipShape.contain(x, y)) {
  94. continue;
  95. }
  96. symbolProxyShape.x = x - size[0] / 2;
  97. symbolProxyShape.y = y - size[1] / 2;
  98. symbolProxyShape.width = size[0];
  99. symbolProxyShape.height = size[1];
  100. symbolProxy.buildPath(path, symbolProxyShape, true);
  101. }
  102. if (this.incremental) {
  103. this._off = i;
  104. this.notClear = true;
  105. }
  106. };
  107. LargeSymbolPath.prototype.afterBrush = function () {
  108. var shape = this.shape;
  109. var points = shape.points;
  110. var size = shape.size;
  111. var ctx = this._ctx;
  112. var softClipShape = this.softClipShape;
  113. var i;
  114. if (!ctx) {
  115. return;
  116. }
  117. // PENDING If style or other canvas status changed?
  118. for (i = this._off; i < points.length;) {
  119. var x = points[i++];
  120. var y = points[i++];
  121. if (isNaN(x) || isNaN(y)) {
  122. continue;
  123. }
  124. if (softClipShape && !softClipShape.contain(x, y)) {
  125. continue;
  126. }
  127. // fillRect is faster than building a rect path and draw.
  128. // And it support light globalCompositeOperation.
  129. ctx.fillRect(x - size[0] / 2, y - size[1] / 2, size[0], size[1]);
  130. }
  131. if (this.incremental) {
  132. this._off = i;
  133. this.notClear = true;
  134. }
  135. };
  136. LargeSymbolPath.prototype.findDataIndex = function (x, y) {
  137. // TODO ???
  138. // Consider transform
  139. var shape = this.shape;
  140. var points = shape.points;
  141. var size = shape.size;
  142. var w = Math.max(size[0], 4);
  143. var h = Math.max(size[1], 4);
  144. // Not consider transform
  145. // Treat each element as a rect
  146. // top down traverse
  147. for (var idx = points.length / 2 - 1; idx >= 0; idx--) {
  148. var i = idx * 2;
  149. var x0 = points[i] - w / 2;
  150. var y0 = points[i + 1] - h / 2;
  151. if (x >= x0 && y >= y0 && x <= x0 + w && y <= y0 + h) {
  152. return idx;
  153. }
  154. }
  155. return -1;
  156. };
  157. LargeSymbolPath.prototype.contain = function (x, y) {
  158. var localPos = this.transformCoordToLocal(x, y);
  159. var rect = this.getBoundingRect();
  160. x = localPos[0];
  161. y = localPos[1];
  162. if (rect.contain(x, y)) {
  163. // Cache found data index.
  164. var dataIdx = this.hoverDataIdx = this.findDataIndex(x, y);
  165. return dataIdx >= 0;
  166. }
  167. this.hoverDataIdx = -1;
  168. return false;
  169. };
  170. LargeSymbolPath.prototype.getBoundingRect = function () {
  171. // Ignore stroke for large symbol draw.
  172. var rect = this._rect;
  173. if (!rect) {
  174. var shape = this.shape;
  175. var points = shape.points;
  176. var size = shape.size;
  177. var w = size[0];
  178. var h = size[1];
  179. var minX = Infinity;
  180. var minY = Infinity;
  181. var maxX = -Infinity;
  182. var maxY = -Infinity;
  183. for (var i = 0; i < points.length;) {
  184. var x = points[i++];
  185. var y = points[i++];
  186. minX = Math.min(x, minX);
  187. maxX = Math.max(x, maxX);
  188. minY = Math.min(y, minY);
  189. maxY = Math.max(y, maxY);
  190. }
  191. rect = this._rect = new graphic.BoundingRect(minX - w / 2, minY - h / 2, maxX - minX + w, maxY - minY + h);
  192. }
  193. return rect;
  194. };
  195. return LargeSymbolPath;
  196. }(graphic.Path);
  197. var LargeSymbolDraw = /** @class */function () {
  198. function LargeSymbolDraw() {
  199. this.group = new graphic.Group();
  200. }
  201. /**
  202. * Update symbols draw by new data
  203. */
  204. LargeSymbolDraw.prototype.updateData = function (data, opt) {
  205. this._clear();
  206. this._data = data;
  207. var symbolEl = this._create();
  208. symbolEl.setShape({
  209. points: data.getLayout('points')
  210. });
  211. this._setCommon(symbolEl, data, opt);
  212. };
  213. LargeSymbolDraw.prototype.updateLayout = function (opt) {
  214. var data = this._data;
  215. if (!data) {
  216. return;
  217. }
  218. var points = data.getLayout('points');
  219. this.group.eachChild(function (child) {
  220. if (child.startIndex != null) {
  221. var len = (child.endIndex - child.startIndex) * 2;
  222. var byteOffset = child.startIndex * 4 * 2;
  223. points = new Float32Array(points.buffer, byteOffset, len);
  224. }
  225. child.setShape('points', points);
  226. // Reset draw cursor.
  227. child.reset();
  228. child.stopAnimation();
  229. });
  230. };
  231. LargeSymbolDraw.prototype.incrementalPrepareUpdate = function (data) {
  232. this._clear();
  233. };
  234. LargeSymbolDraw.prototype.incrementalUpdate = function (taskParams, data, incrementalId, opt) {
  235. var lastAdded = this._newAdded[0];
  236. var points = data.getLayout('points');
  237. var oldPoints = lastAdded && lastAdded.shape.points;
  238. if (process.env.NODE_ENV !== 'production') {
  239. validateUpstreamOutputRange(data.getLayout('pointsRange'), taskParams);
  240. }
  241. // Merging the exists. Each element has 1e4 points.
  242. // Consider the performance balance between too much elements and too much points in one shape(may affect hover optimization)
  243. if (oldPoints && oldPoints.length < 2e4) {
  244. var oldLen = oldPoints.length;
  245. var newPoints = new Float32Array(oldLen + points.length);
  246. // Concat two array
  247. newPoints.set(oldPoints);
  248. newPoints.set(points, oldLen);
  249. // Update endIndex
  250. lastAdded.endIndex = taskParams.end;
  251. lastAdded.setShape({
  252. points: newPoints
  253. });
  254. } else {
  255. this._newAdded = [];
  256. var symbolEl = this._create();
  257. symbolEl.startIndex = taskParams.start;
  258. symbolEl.endIndex = taskParams.end;
  259. symbolEl.incremental = incrementalId;
  260. symbolEl.setShape({
  261. points: points
  262. });
  263. this._setCommon(symbolEl, data, opt);
  264. }
  265. };
  266. LargeSymbolDraw.prototype.eachRendered = function (cb) {
  267. this._newAdded[0] && cb(this._newAdded[0]);
  268. };
  269. LargeSymbolDraw.prototype._create = function () {
  270. var symbolEl = new LargeSymbolPath({
  271. cursor: 'default'
  272. });
  273. symbolEl.ignoreCoarsePointer = true;
  274. this.group.add(symbolEl);
  275. this._newAdded.push(symbolEl);
  276. return symbolEl;
  277. };
  278. LargeSymbolDraw.prototype._setCommon = function (symbolEl, data, opt) {
  279. var hostModel = data.hostModel;
  280. opt = opt || {};
  281. var size = data.getVisual('symbolSize');
  282. symbolEl.setShape('size', size instanceof Array ? size : [size, size]);
  283. symbolEl.softClipShape = opt.clipShape || null;
  284. // Create symbolProxy to build path for each data
  285. symbolEl.symbolProxy = createSymbol(data.getVisual('symbol'), 0, 0, 0, 0);
  286. // Use symbolProxy setColor method
  287. symbolEl.setColor = symbolEl.symbolProxy.setColor;
  288. var extrudeShadow = symbolEl.shape.size[0] < BOOST_SIZE_THRESHOLD;
  289. symbolEl.useStyle(
  290. // Draw shadow when doing fillRect is extremely slow.
  291. hostModel.getModel('itemStyle').getItemStyle(extrudeShadow ? ['color', 'shadowBlur', 'shadowColor'] : ['color']));
  292. var globalStyle = data.getVisual('style');
  293. var visualColor = globalStyle && globalStyle.fill;
  294. if (visualColor) {
  295. symbolEl.setColor(visualColor);
  296. }
  297. var ecData = getECData(symbolEl);
  298. // Enable tooltip
  299. // PENDING May have performance issue when path is extremely large
  300. ecData.seriesIndex = hostModel.seriesIndex;
  301. symbolEl.on('mousemove', function (e) {
  302. ecData.dataIndex = null;
  303. var dataIndex = symbolEl.hoverDataIdx;
  304. if (dataIndex >= 0) {
  305. // Provide dataIndex for tooltip
  306. ecData.dataIndex = dataIndex + (symbolEl.startIndex || 0);
  307. }
  308. });
  309. };
  310. LargeSymbolDraw.prototype.remove = function () {
  311. this._clear();
  312. };
  313. LargeSymbolDraw.prototype._clear = function () {
  314. this._newAdded = [];
  315. this.group.removeAll();
  316. };
  317. return LargeSymbolDraw;
  318. }();
  319. export default LargeSymbolDraw;