EffectSymbol.js 7.5 KB

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