EffectSymbol.js 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  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. import { createSymbol, normalizeSymbolOffset, normalizeSymbolSize } from '../../util/symbol.js';
  42. import { Group } from '../../util/graphic.js';
  43. import { enterEmphasis, leaveEmphasis, toggleHoverEmphasis } from '../../util/states.js';
  44. import SymbolClz from './Symbol.js';
  45. function updateRipplePath(rippleGroup, effectCfg) {
  46. var color = effectCfg.rippleEffectColor || effectCfg.color;
  47. rippleGroup.eachChild(function (ripplePath) {
  48. ripplePath.attr({
  49. z: effectCfg.z,
  50. zlevel: effectCfg.zlevel,
  51. style: {
  52. stroke: effectCfg.brushType === 'stroke' ? color : null,
  53. fill: effectCfg.brushType === 'fill' ? color : null
  54. }
  55. });
  56. });
  57. }
  58. var EffectSymbol =
  59. /** @class */
  60. function (_super) {
  61. __extends(EffectSymbol, _super);
  62. function EffectSymbol(data, idx) {
  63. var _this = _super.call(this) || this;
  64. var symbol = new SymbolClz(data, idx);
  65. var rippleGroup = new Group();
  66. _this.add(symbol);
  67. _this.add(rippleGroup);
  68. _this.updateData(data, idx);
  69. return _this;
  70. }
  71. EffectSymbol.prototype.stopEffectAnimation = function () {
  72. this.childAt(1).removeAll();
  73. };
  74. EffectSymbol.prototype.startEffectAnimation = function (effectCfg) {
  75. var symbolType = effectCfg.symbolType;
  76. var color = effectCfg.color;
  77. var rippleNumber = effectCfg.rippleNumber;
  78. var rippleGroup = this.childAt(1);
  79. for (var i = 0; i < rippleNumber; i++) {
  80. // If width/height are set too small (e.g., set to 1) on ios10
  81. // and macOS Sierra, a circle stroke become a rect, no matter what
  82. // the scale is set. So we set width/height as 2. See #4136.
  83. var ripplePath = createSymbol(symbolType, -1, -1, 2, 2, color);
  84. ripplePath.attr({
  85. style: {
  86. strokeNoScale: true
  87. },
  88. z2: 99,
  89. silent: true,
  90. scaleX: 0.5,
  91. scaleY: 0.5
  92. });
  93. var delay = -i / rippleNumber * effectCfg.period + effectCfg.effectOffset;
  94. ripplePath.animate('', true).when(effectCfg.period, {
  95. scaleX: effectCfg.rippleScale / 2,
  96. scaleY: effectCfg.rippleScale / 2
  97. }).delay(delay).start();
  98. ripplePath.animateStyle(true).when(effectCfg.period, {
  99. opacity: 0
  100. }).delay(delay).start();
  101. rippleGroup.add(ripplePath);
  102. }
  103. updateRipplePath(rippleGroup, effectCfg);
  104. };
  105. /**
  106. * Update effect symbol
  107. */
  108. EffectSymbol.prototype.updateEffectAnimation = function (effectCfg) {
  109. var oldEffectCfg = this._effectCfg;
  110. var rippleGroup = this.childAt(1); // Must reinitialize effect if following configuration changed
  111. var DIFFICULT_PROPS = ['symbolType', 'period', 'rippleScale', 'rippleNumber'];
  112. for (var i = 0; i < DIFFICULT_PROPS.length; i++) {
  113. var propName = DIFFICULT_PROPS[i];
  114. if (oldEffectCfg[propName] !== effectCfg[propName]) {
  115. this.stopEffectAnimation();
  116. this.startEffectAnimation(effectCfg);
  117. return;
  118. }
  119. }
  120. updateRipplePath(rippleGroup, effectCfg);
  121. };
  122. /**
  123. * Highlight symbol
  124. */
  125. EffectSymbol.prototype.highlight = function () {
  126. enterEmphasis(this);
  127. };
  128. /**
  129. * Downplay symbol
  130. */
  131. EffectSymbol.prototype.downplay = function () {
  132. leaveEmphasis(this);
  133. };
  134. EffectSymbol.prototype.getSymbolType = function () {
  135. var symbol = this.childAt(0);
  136. return symbol && symbol.getSymbolType();
  137. };
  138. /**
  139. * Update symbol properties
  140. */
  141. EffectSymbol.prototype.updateData = function (data, idx) {
  142. var _this = this;
  143. var seriesModel = data.hostModel;
  144. this.childAt(0).updateData(data, idx);
  145. var rippleGroup = this.childAt(1);
  146. var itemModel = data.getItemModel(idx);
  147. var symbolType = data.getItemVisual(idx, 'symbol');
  148. var symbolSize = normalizeSymbolSize(data.getItemVisual(idx, 'symbolSize'));
  149. var symbolStyle = data.getItemVisual(idx, 'style');
  150. var color = symbolStyle && symbolStyle.fill;
  151. var emphasisModel = itemModel.getModel('emphasis');
  152. rippleGroup.setScale(symbolSize);
  153. rippleGroup.traverse(function (ripplePath) {
  154. ripplePath.setStyle('fill', color);
  155. });
  156. var symbolOffset = normalizeSymbolOffset(data.getItemVisual(idx, 'symbolOffset'), symbolSize);
  157. if (symbolOffset) {
  158. rippleGroup.x = symbolOffset[0];
  159. rippleGroup.y = symbolOffset[1];
  160. }
  161. var symbolRotate = data.getItemVisual(idx, 'symbolRotate');
  162. rippleGroup.rotation = (symbolRotate || 0) * Math.PI / 180 || 0;
  163. var effectCfg = {};
  164. effectCfg.showEffectOn = seriesModel.get('showEffectOn');
  165. effectCfg.rippleScale = itemModel.get(['rippleEffect', 'scale']);
  166. effectCfg.brushType = itemModel.get(['rippleEffect', 'brushType']);
  167. effectCfg.period = itemModel.get(['rippleEffect', 'period']) * 1000;
  168. effectCfg.effectOffset = idx / data.count();
  169. effectCfg.z = seriesModel.getShallow('z') || 0;
  170. effectCfg.zlevel = seriesModel.getShallow('zlevel') || 0;
  171. effectCfg.symbolType = symbolType;
  172. effectCfg.color = color;
  173. effectCfg.rippleEffectColor = itemModel.get(['rippleEffect', 'color']);
  174. effectCfg.rippleNumber = itemModel.get(['rippleEffect', 'number']);
  175. if (effectCfg.showEffectOn === 'render') {
  176. this._effectCfg ? this.updateEffectAnimation(effectCfg) : this.startEffectAnimation(effectCfg);
  177. this._effectCfg = effectCfg;
  178. } else {
  179. // Not keep old effect config
  180. this._effectCfg = null;
  181. this.stopEffectAnimation();
  182. this.onHoverStateChange = function (toState) {
  183. if (toState === 'emphasis') {
  184. if (effectCfg.showEffectOn !== 'render') {
  185. _this.startEffectAnimation(effectCfg);
  186. }
  187. } else if (toState === 'normal') {
  188. if (effectCfg.showEffectOn !== 'render') {
  189. _this.stopEffectAnimation();
  190. }
  191. }
  192. };
  193. }
  194. this._effectCfg = effectCfg;
  195. toggleHoverEmphasis(this, emphasisModel.get('focus'), emphasisModel.get('blurScope'), emphasisModel.get('disabled'));
  196. };
  197. ;
  198. EffectSymbol.prototype.fadeOut = function (cb) {
  199. cb && cb();
  200. };
  201. ;
  202. return EffectSymbol;
  203. }(Group);
  204. export default EffectSymbol;