cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
148 lines (147 loc) • 5.74 kB
JavaScript
import { __extends } from "../../../../tslib/tslib.es6.mjs";
import { createSymbol, normalizeSymbolSize, normalizeSymbolOffset } from "../../util/symbol.mjs";
import "../../util/graphic.mjs";
import { enterEmphasis, leaveEmphasis, toggleHoverEmphasis } from "../../util/states.mjs";
import SymbolClz from "./Symbol.mjs";
import Group from "../../../../zrender/lib/graphic/Group.mjs";
function updateRipplePath(rippleGroup, effectCfg) {
var color = effectCfg.rippleEffectColor || effectCfg.color;
rippleGroup.eachChild(function(ripplePath) {
ripplePath.attr({
z: effectCfg.z,
zlevel: effectCfg.zlevel,
style: {
stroke: effectCfg.brushType === "stroke" ? color : null,
fill: effectCfg.brushType === "fill" ? color : null
}
});
});
}
var EffectSymbol = function(_super) {
__extends(EffectSymbol2, _super);
function EffectSymbol2(data, idx) {
var _this = _super.call(this) || this;
var symbol = new SymbolClz(data, idx);
var rippleGroup = new Group();
_this.add(symbol);
_this.add(rippleGroup);
_this.updateData(data, idx);
return _this;
}
EffectSymbol2.prototype.stopEffectAnimation = function() {
this.childAt(1).removeAll();
};
EffectSymbol2.prototype.startEffectAnimation = function(effectCfg) {
var symbolType = effectCfg.symbolType;
var color = effectCfg.color;
var rippleNumber = effectCfg.rippleNumber;
var rippleGroup = this.childAt(1);
for (var i = 0; i < rippleNumber; i++) {
var ripplePath = createSymbol(symbolType, -1, -1, 2, 2, color);
ripplePath.attr({
style: {
strokeNoScale: true
},
z2: 99,
silent: true,
scaleX: 0.5,
scaleY: 0.5
});
var delay = -i / rippleNumber * effectCfg.period + effectCfg.effectOffset;
ripplePath.animate("", true).when(effectCfg.period, {
scaleX: effectCfg.rippleScale / 2,
scaleY: effectCfg.rippleScale / 2
}).delay(delay).start();
ripplePath.animateStyle(true).when(effectCfg.period, {
opacity: 0
}).delay(delay).start();
rippleGroup.add(ripplePath);
}
updateRipplePath(rippleGroup, effectCfg);
};
EffectSymbol2.prototype.updateEffectAnimation = function(effectCfg) {
var oldEffectCfg = this._effectCfg;
var rippleGroup = this.childAt(1);
var DIFFICULT_PROPS = ["symbolType", "period", "rippleScale", "rippleNumber"];
for (var i = 0; i < DIFFICULT_PROPS.length; i++) {
var propName = DIFFICULT_PROPS[i];
if (oldEffectCfg[propName] !== effectCfg[propName]) {
this.stopEffectAnimation();
this.startEffectAnimation(effectCfg);
return;
}
}
updateRipplePath(rippleGroup, effectCfg);
};
EffectSymbol2.prototype.highlight = function() {
enterEmphasis(this);
};
EffectSymbol2.prototype.downplay = function() {
leaveEmphasis(this);
};
EffectSymbol2.prototype.getSymbolType = function() {
var symbol = this.childAt(0);
return symbol && symbol.getSymbolType();
};
EffectSymbol2.prototype.updateData = function(data, idx) {
var _this = this;
var seriesModel = data.hostModel;
this.childAt(0).updateData(data, idx);
var rippleGroup = this.childAt(1);
var itemModel = data.getItemModel(idx);
var symbolType = data.getItemVisual(idx, "symbol");
var symbolSize = normalizeSymbolSize(data.getItemVisual(idx, "symbolSize"));
var symbolStyle = data.getItemVisual(idx, "style");
var color = symbolStyle && symbolStyle.fill;
var emphasisModel = itemModel.getModel("emphasis");
rippleGroup.setScale(symbolSize);
rippleGroup.traverse(function(ripplePath) {
ripplePath.setStyle("fill", color);
});
var symbolOffset = normalizeSymbolOffset(data.getItemVisual(idx, "symbolOffset"), symbolSize);
if (symbolOffset) {
rippleGroup.x = symbolOffset[0];
rippleGroup.y = symbolOffset[1];
}
var symbolRotate = data.getItemVisual(idx, "symbolRotate");
rippleGroup.rotation = (symbolRotate || 0) * Math.PI / 180 || 0;
var effectCfg = {};
effectCfg.showEffectOn = seriesModel.get("showEffectOn");
effectCfg.rippleScale = itemModel.get(["rippleEffect", "scale"]);
effectCfg.brushType = itemModel.get(["rippleEffect", "brushType"]);
effectCfg.period = itemModel.get(["rippleEffect", "period"]) * 1e3;
effectCfg.effectOffset = idx / data.count();
effectCfg.z = seriesModel.getShallow("z") || 0;
effectCfg.zlevel = seriesModel.getShallow("zlevel") || 0;
effectCfg.symbolType = symbolType;
effectCfg.color = color;
effectCfg.rippleEffectColor = itemModel.get(["rippleEffect", "color"]);
effectCfg.rippleNumber = itemModel.get(["rippleEffect", "number"]);
if (effectCfg.showEffectOn === "render") {
this._effectCfg ? this.updateEffectAnimation(effectCfg) : this.startEffectAnimation(effectCfg);
this._effectCfg = effectCfg;
} else {
this._effectCfg = null;
this.stopEffectAnimation();
this.onHoverStateChange = function(toState) {
if (toState === "emphasis") {
if (effectCfg.showEffectOn !== "render") {
_this.startEffectAnimation(effectCfg);
}
} else if (toState === "normal") {
if (effectCfg.showEffectOn !== "render") {
_this.stopEffectAnimation();
}
}
};
}
this._effectCfg = effectCfg;
toggleHoverEmphasis(this, emphasisModel.get("focus"), emphasisModel.get("blurScope"), emphasisModel.get("disabled"));
};
EffectSymbol2.prototype.fadeOut = function(cb) {
cb && cb();
};
return EffectSymbol2;
}(Group);
var EffectSymbol$1 = EffectSymbol;
export { EffectSymbol$1 as default };