LargeLineDraw.js 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372
  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"; // TODO Batch by color
  41. import * as graphic from '../../util/graphic.js';
  42. import * as lineContain from 'zrender/lib/contain/line.js';
  43. import * as quadraticContain from 'zrender/lib/contain/quadratic.js';
  44. import { getECData } from '../../util/innerStore.js';
  45. var LargeLinesPathShape =
  46. /** @class */
  47. function () {
  48. function LargeLinesPathShape() {
  49. this.polyline = false;
  50. this.curveness = 0;
  51. this.segs = [];
  52. }
  53. return LargeLinesPathShape;
  54. }();
  55. var LargeLinesPath =
  56. /** @class */
  57. function (_super) {
  58. __extends(LargeLinesPath, _super);
  59. function LargeLinesPath(opts) {
  60. var _this = _super.call(this, opts) || this;
  61. _this._off = 0;
  62. _this.hoverDataIdx = -1;
  63. return _this;
  64. }
  65. LargeLinesPath.prototype.reset = function () {
  66. this.notClear = false;
  67. this._off = 0;
  68. };
  69. LargeLinesPath.prototype.getDefaultStyle = function () {
  70. return {
  71. stroke: '#000',
  72. fill: null
  73. };
  74. };
  75. LargeLinesPath.prototype.getDefaultShape = function () {
  76. return new LargeLinesPathShape();
  77. };
  78. LargeLinesPath.prototype.buildPath = function (ctx, shape) {
  79. var segs = shape.segs;
  80. var curveness = shape.curveness;
  81. var i;
  82. if (shape.polyline) {
  83. for (i = this._off; i < segs.length;) {
  84. var count = segs[i++];
  85. if (count > 0) {
  86. ctx.moveTo(segs[i++], segs[i++]);
  87. for (var k = 1; k < count; k++) {
  88. ctx.lineTo(segs[i++], segs[i++]);
  89. }
  90. }
  91. }
  92. } else {
  93. for (i = this._off; i < segs.length;) {
  94. var x0 = segs[i++];
  95. var y0 = segs[i++];
  96. var x1 = segs[i++];
  97. var y1 = segs[i++];
  98. ctx.moveTo(x0, y0);
  99. if (curveness > 0) {
  100. var x2 = (x0 + x1) / 2 - (y0 - y1) * curveness;
  101. var y2 = (y0 + y1) / 2 - (x1 - x0) * curveness;
  102. ctx.quadraticCurveTo(x2, y2, x1, y1);
  103. } else {
  104. ctx.lineTo(x1, y1);
  105. }
  106. }
  107. }
  108. if (this.incremental) {
  109. this._off = i;
  110. this.notClear = true;
  111. }
  112. };
  113. LargeLinesPath.prototype.findDataIndex = function (x, y) {
  114. var shape = this.shape;
  115. var segs = shape.segs;
  116. var curveness = shape.curveness;
  117. var lineWidth = this.style.lineWidth;
  118. if (shape.polyline) {
  119. var dataIndex = 0;
  120. for (var i = 0; i < segs.length;) {
  121. var count = segs[i++];
  122. if (count > 0) {
  123. var x0 = segs[i++];
  124. var y0 = segs[i++];
  125. for (var k = 1; k < count; k++) {
  126. var x1 = segs[i++];
  127. var y1 = segs[i++];
  128. if (lineContain.containStroke(x0, y0, x1, y1, lineWidth, x, y)) {
  129. return dataIndex;
  130. }
  131. }
  132. }
  133. dataIndex++;
  134. }
  135. } else {
  136. var dataIndex = 0;
  137. for (var i = 0; i < segs.length;) {
  138. var x0 = segs[i++];
  139. var y0 = segs[i++];
  140. var x1 = segs[i++];
  141. var y1 = segs[i++];
  142. if (curveness > 0) {
  143. var x2 = (x0 + x1) / 2 - (y0 - y1) * curveness;
  144. var y2 = (y0 + y1) / 2 - (x1 - x0) * curveness;
  145. if (quadraticContain.containStroke(x0, y0, x2, y2, x1, y1, lineWidth, x, y)) {
  146. return dataIndex;
  147. }
  148. } else {
  149. if (lineContain.containStroke(x0, y0, x1, y1, lineWidth, x, y)) {
  150. return dataIndex;
  151. }
  152. }
  153. dataIndex++;
  154. }
  155. }
  156. return -1;
  157. };
  158. LargeLinesPath.prototype.contain = function (x, y) {
  159. var localPos = this.transformCoordToLocal(x, y);
  160. var rect = this.getBoundingRect();
  161. x = localPos[0];
  162. y = localPos[1];
  163. if (rect.contain(x, y)) {
  164. // Cache found data index.
  165. var dataIdx = this.hoverDataIdx = this.findDataIndex(x, y);
  166. return dataIdx >= 0;
  167. }
  168. this.hoverDataIdx = -1;
  169. return false;
  170. };
  171. LargeLinesPath.prototype.getBoundingRect = function () {
  172. // Ignore stroke for large symbol draw.
  173. var rect = this._rect;
  174. if (!rect) {
  175. var shape = this.shape;
  176. var points = shape.segs;
  177. var minX = Infinity;
  178. var minY = Infinity;
  179. var maxX = -Infinity;
  180. var maxY = -Infinity;
  181. for (var i = 0; i < points.length;) {
  182. var x = points[i++];
  183. var y = points[i++];
  184. minX = Math.min(x, minX);
  185. maxX = Math.max(x, maxX);
  186. minY = Math.min(y, minY);
  187. maxY = Math.max(y, maxY);
  188. }
  189. rect = this._rect = new graphic.BoundingRect(minX, minY, maxX, maxY);
  190. }
  191. return rect;
  192. };
  193. return LargeLinesPath;
  194. }(graphic.Path);
  195. var LargeLineDraw =
  196. /** @class */
  197. function () {
  198. function LargeLineDraw() {
  199. this.group = new graphic.Group();
  200. }
  201. /**
  202. * Update symbols draw by new data
  203. */
  204. LargeLineDraw.prototype.updateData = function (data) {
  205. this._clear();
  206. var lineEl = this._create();
  207. lineEl.setShape({
  208. segs: data.getLayout('linesPoints')
  209. });
  210. this._setCommon(lineEl, data);
  211. };
  212. ;
  213. /**
  214. * @override
  215. */
  216. LargeLineDraw.prototype.incrementalPrepareUpdate = function (data) {
  217. this.group.removeAll();
  218. this._clear();
  219. };
  220. ;
  221. /**
  222. * @override
  223. */
  224. LargeLineDraw.prototype.incrementalUpdate = function (taskParams, data) {
  225. var lastAdded = this._newAdded[0];
  226. var linePoints = data.getLayout('linesPoints');
  227. var oldSegs = lastAdded && lastAdded.shape.segs; // Merging the exists. Each element has 1e4 points.
  228. // Consider the performance balance between too much elements and too much points in one shape(may affect hover optimization)
  229. if (oldSegs && oldSegs.length < 2e4) {
  230. var oldLen = oldSegs.length;
  231. var newSegs = new Float32Array(oldLen + linePoints.length); // Concat two array
  232. newSegs.set(oldSegs);
  233. newSegs.set(linePoints, oldLen);
  234. lastAdded.setShape({
  235. segs: newSegs
  236. });
  237. } else {
  238. // Clear
  239. this._newAdded = [];
  240. var lineEl = this._create();
  241. lineEl.incremental = true;
  242. lineEl.setShape({
  243. segs: linePoints
  244. });
  245. this._setCommon(lineEl, data);
  246. lineEl.__startIndex = taskParams.start;
  247. }
  248. };
  249. /**
  250. * @override
  251. */
  252. LargeLineDraw.prototype.remove = function () {
  253. this._clear();
  254. };
  255. LargeLineDraw.prototype.eachRendered = function (cb) {
  256. this._newAdded[0] && cb(this._newAdded[0]);
  257. };
  258. LargeLineDraw.prototype._create = function () {
  259. var lineEl = new LargeLinesPath({
  260. cursor: 'default',
  261. ignoreCoarsePointer: true
  262. });
  263. this._newAdded.push(lineEl);
  264. this.group.add(lineEl);
  265. return lineEl;
  266. };
  267. LargeLineDraw.prototype._setCommon = function (lineEl, data, isIncremental) {
  268. var hostModel = data.hostModel;
  269. lineEl.setShape({
  270. polyline: hostModel.get('polyline'),
  271. curveness: hostModel.get(['lineStyle', 'curveness'])
  272. });
  273. lineEl.useStyle(hostModel.getModel('lineStyle').getLineStyle());
  274. lineEl.style.strokeNoScale = true;
  275. var style = data.getVisual('style');
  276. if (style && style.stroke) {
  277. lineEl.setStyle('stroke', style.stroke);
  278. }
  279. lineEl.setStyle('fill', null);
  280. var ecData = getECData(lineEl); // Enable tooltip
  281. // PENDING May have performance issue when path is extremely large
  282. ecData.seriesIndex = hostModel.seriesIndex;
  283. lineEl.on('mousemove', function (e) {
  284. ecData.dataIndex = null;
  285. var dataIndex = lineEl.hoverDataIdx;
  286. if (dataIndex > 0) {
  287. // Provide dataIndex for tooltip
  288. ecData.dataIndex = dataIndex + lineEl.__startIndex;
  289. }
  290. });
  291. };
  292. ;
  293. LargeLineDraw.prototype._clear = function () {
  294. this._newAdded = [];
  295. this.group.removeAll();
  296. };
  297. ;
  298. return LargeLineDraw;
  299. }();
  300. export default LargeLineDraw;