EffectLine.js 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
  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. /**
  42. * Provide effect for line
  43. */
  44. import * as graphic from '../../util/graphic.js';
  45. import Line from './Line.js';
  46. import * as zrUtil from 'zrender/lib/core/util.js';
  47. import { createSymbol } from '../../util/symbol.js';
  48. import * as vec2 from 'zrender/lib/core/vector.js';
  49. import * as curveUtil from 'zrender/lib/core/curve.js';
  50. var EffectLine =
  51. /** @class */
  52. function (_super) {
  53. __extends(EffectLine, _super);
  54. function EffectLine(lineData, idx, seriesScope) {
  55. var _this = _super.call(this) || this;
  56. _this.add(_this.createLine(lineData, idx, seriesScope));
  57. _this._updateEffectSymbol(lineData, idx);
  58. return _this;
  59. }
  60. EffectLine.prototype.createLine = function (lineData, idx, seriesScope) {
  61. return new Line(lineData, idx, seriesScope);
  62. };
  63. EffectLine.prototype._updateEffectSymbol = function (lineData, idx) {
  64. var itemModel = lineData.getItemModel(idx);
  65. var effectModel = itemModel.getModel('effect');
  66. var size = effectModel.get('symbolSize');
  67. var symbolType = effectModel.get('symbol');
  68. if (!zrUtil.isArray(size)) {
  69. size = [size, size];
  70. }
  71. var lineStyle = lineData.getItemVisual(idx, 'style');
  72. var color = effectModel.get('color') || lineStyle && lineStyle.stroke;
  73. var symbol = this.childAt(1);
  74. if (this._symbolType !== symbolType) {
  75. // Remove previous
  76. this.remove(symbol);
  77. symbol = createSymbol(symbolType, -0.5, -0.5, 1, 1, color);
  78. symbol.z2 = 100;
  79. symbol.culling = true;
  80. this.add(symbol);
  81. } // Symbol may be removed if loop is false
  82. if (!symbol) {
  83. return;
  84. } // Shadow color is same with color in default
  85. symbol.setStyle('shadowColor', color);
  86. symbol.setStyle(effectModel.getItemStyle(['color']));
  87. symbol.scaleX = size[0];
  88. symbol.scaleY = size[1];
  89. symbol.setColor(color);
  90. this._symbolType = symbolType;
  91. this._symbolScale = size;
  92. this._updateEffectAnimation(lineData, effectModel, idx);
  93. };
  94. EffectLine.prototype._updateEffectAnimation = function (lineData, effectModel, idx) {
  95. var symbol = this.childAt(1);
  96. if (!symbol) {
  97. return;
  98. }
  99. var points = lineData.getItemLayout(idx);
  100. var period = effectModel.get('period') * 1000;
  101. var loop = effectModel.get('loop');
  102. var roundTrip = effectModel.get('roundTrip');
  103. var constantSpeed = effectModel.get('constantSpeed');
  104. var delayExpr = zrUtil.retrieve(effectModel.get('delay'), function (idx) {
  105. return idx / lineData.count() * period / 3;
  106. }); // Ignore when updating
  107. symbol.ignore = true;
  108. this._updateAnimationPoints(symbol, points);
  109. if (constantSpeed > 0) {
  110. period = this._getLineLength(symbol) / constantSpeed * 1000;
  111. }
  112. if (period !== this._period || loop !== this._loop || roundTrip !== this._roundTrip) {
  113. symbol.stopAnimation();
  114. var delayNum = void 0;
  115. if (zrUtil.isFunction(delayExpr)) {
  116. delayNum = delayExpr(idx);
  117. } else {
  118. delayNum = delayExpr;
  119. }
  120. if (symbol.__t > 0) {
  121. delayNum = -period * symbol.__t;
  122. }
  123. this._animateSymbol(symbol, period, delayNum, loop, roundTrip);
  124. }
  125. this._period = period;
  126. this._loop = loop;
  127. this._roundTrip = roundTrip;
  128. };
  129. EffectLine.prototype._animateSymbol = function (symbol, period, delayNum, loop, roundTrip) {
  130. if (period > 0) {
  131. symbol.__t = 0;
  132. var self_1 = this;
  133. var animator = symbol.animate('', loop).when(roundTrip ? period * 2 : period, {
  134. __t: roundTrip ? 2 : 1
  135. }).delay(delayNum).during(function () {
  136. self_1._updateSymbolPosition(symbol);
  137. });
  138. if (!loop) {
  139. animator.done(function () {
  140. self_1.remove(symbol);
  141. });
  142. }
  143. animator.start();
  144. }
  145. };
  146. EffectLine.prototype._getLineLength = function (symbol) {
  147. // Not so accurate
  148. return vec2.dist(symbol.__p1, symbol.__cp1) + vec2.dist(symbol.__cp1, symbol.__p2);
  149. };
  150. EffectLine.prototype._updateAnimationPoints = function (symbol, points) {
  151. symbol.__p1 = points[0];
  152. symbol.__p2 = points[1];
  153. symbol.__cp1 = points[2] || [(points[0][0] + points[1][0]) / 2, (points[0][1] + points[1][1]) / 2];
  154. };
  155. EffectLine.prototype.updateData = function (lineData, idx, seriesScope) {
  156. this.childAt(0).updateData(lineData, idx, seriesScope);
  157. this._updateEffectSymbol(lineData, idx);
  158. };
  159. EffectLine.prototype._updateSymbolPosition = function (symbol) {
  160. var p1 = symbol.__p1;
  161. var p2 = symbol.__p2;
  162. var cp1 = symbol.__cp1;
  163. var t = symbol.__t < 1 ? symbol.__t : 2 - symbol.__t;
  164. var pos = [symbol.x, symbol.y];
  165. var lastPos = pos.slice();
  166. var quadraticAt = curveUtil.quadraticAt;
  167. var quadraticDerivativeAt = curveUtil.quadraticDerivativeAt;
  168. pos[0] = quadraticAt(p1[0], cp1[0], p2[0], t);
  169. pos[1] = quadraticAt(p1[1], cp1[1], p2[1], t); // Tangent
  170. var tx = symbol.__t < 1 ? quadraticDerivativeAt(p1[0], cp1[0], p2[0], t) : quadraticDerivativeAt(p2[0], cp1[0], p1[0], 1 - t);
  171. var ty = symbol.__t < 1 ? quadraticDerivativeAt(p1[1], cp1[1], p2[1], t) : quadraticDerivativeAt(p2[1], cp1[1], p1[1], 1 - t);
  172. symbol.rotation = -Math.atan2(ty, tx) - Math.PI / 2; // enable continuity trail for 'line', 'rect', 'roundRect' symbolType
  173. if (this._symbolType === 'line' || this._symbolType === 'rect' || this._symbolType === 'roundRect') {
  174. if (symbol.__lastT !== undefined && symbol.__lastT < symbol.__t) {
  175. symbol.scaleY = vec2.dist(lastPos, pos) * 1.05; // make sure the last segment render within endPoint
  176. if (t === 1) {
  177. pos[0] = lastPos[0] + (pos[0] - lastPos[0]) / 2;
  178. pos[1] = lastPos[1] + (pos[1] - lastPos[1]) / 2;
  179. }
  180. } else if (symbol.__lastT === 1) {
  181. // After first loop, symbol.__t does NOT start with 0, so connect p1 to pos directly.
  182. symbol.scaleY = 2 * vec2.dist(p1, pos);
  183. } else {
  184. symbol.scaleY = this._symbolScale[1];
  185. }
  186. }
  187. symbol.__lastT = symbol.__t;
  188. symbol.ignore = false;
  189. symbol.x = pos[0];
  190. symbol.y = pos[1];
  191. };
  192. EffectLine.prototype.updateLayout = function (lineData, idx) {
  193. this.childAt(0).updateLayout(lineData, idx);
  194. var effectModel = lineData.getItemModel(idx).getModel('effect');
  195. this._updateEffectAnimation(lineData, effectModel, idx);
  196. };
  197. return EffectLine;
  198. }(graphic.Group);
  199. export default EffectLine;