cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
542 lines (541 loc) • 21.2 kB
JavaScript
import { __extends } from "../../../../tslib/tslib.es6.mjs";
import { isArray, retrieve, extend, each } from "../../../../zrender/lib/core/util.mjs";
import * as graphic from "../../util/graphic.mjs";
import { toggleHoverEmphasis } from "../../util/states.mjs";
import { normalizeSymbolOffset, createSymbol } from "../../util/symbol.mjs";
import { parsePercent, isNumeric } from "../../util/number.mjs";
import ChartView from "../../view/Chart.mjs";
import { getDefaultLabel } from "../helper/labelHelper.mjs";
import { setLabelStyle, getLabelStatesModels } from "../../label/labelStyle.mjs";
import ZRImage from "../../../../zrender/lib/graphic/Image.mjs";
import { getECData } from "../../util/innerStore.mjs";
import Circle from "../../../../zrender/lib/graphic/shape/Circle.mjs";
import Group from "../../../../zrender/lib/graphic/Group.mjs";
import { updateProps, removeElement } from "../../animation/basicTransition.mjs";
import Rect from "../../../../zrender/lib/graphic/shape/Rect.mjs";
var BAR_BORDER_WIDTH_QUERY = ["itemStyle", "borderWidth"];
var LAYOUT_ATTRS = [{
xy: "x",
wh: "width",
index: 0,
posDesc: ["left", "right"]
}, {
xy: "y",
wh: "height",
index: 1,
posDesc: ["top", "bottom"]
}];
var pathForLineWidth = new Circle();
var PictorialBarView = function(_super) {
__extends(PictorialBarView2, _super);
function PictorialBarView2() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.type = PictorialBarView2.type;
return _this;
}
PictorialBarView2.prototype.render = function(seriesModel, ecModel, api) {
var group = this.group;
var data = seriesModel.getData();
var oldData = this._data;
var cartesian = seriesModel.coordinateSystem;
var baseAxis = cartesian.getBaseAxis();
var isHorizontal = baseAxis.isHorizontal();
var coordSysRect = cartesian.master.getRect();
var opt = {
ecSize: {
width: api.getWidth(),
height: api.getHeight()
},
seriesModel,
coordSys: cartesian,
coordSysExtent: [[coordSysRect.x, coordSysRect.x + coordSysRect.width], [coordSysRect.y, coordSysRect.y + coordSysRect.height]],
isHorizontal,
valueDim: LAYOUT_ATTRS[+isHorizontal],
categoryDim: LAYOUT_ATTRS[1 - +isHorizontal]
};
data.diff(oldData).add(function(dataIndex) {
if (!data.hasValue(dataIndex)) {
return;
}
var itemModel = getItemModel(data, dataIndex);
var symbolMeta = getSymbolMeta(data, dataIndex, itemModel, opt);
var bar = createBar(data, opt, symbolMeta);
data.setItemGraphicEl(dataIndex, bar);
group.add(bar);
updateCommon(bar, opt, symbolMeta);
}).update(function(newIndex, oldIndex) {
var bar = oldData.getItemGraphicEl(oldIndex);
if (!data.hasValue(newIndex)) {
group.remove(bar);
return;
}
var itemModel = getItemModel(data, newIndex);
var symbolMeta = getSymbolMeta(data, newIndex, itemModel, opt);
var pictorialShapeStr = getShapeStr(data, symbolMeta);
if (bar && pictorialShapeStr !== bar.__pictorialShapeStr) {
group.remove(bar);
data.setItemGraphicEl(newIndex, null);
bar = null;
}
if (bar) {
updateBar(bar, opt, symbolMeta);
} else {
bar = createBar(data, opt, symbolMeta, true);
}
data.setItemGraphicEl(newIndex, bar);
bar.__pictorialSymbolMeta = symbolMeta;
group.add(bar);
updateCommon(bar, opt, symbolMeta);
}).remove(function(dataIndex) {
var bar = oldData.getItemGraphicEl(dataIndex);
bar && removeBar(oldData, dataIndex, bar.__pictorialSymbolMeta.animationModel, bar);
}).execute();
this._data = data;
return this.group;
};
PictorialBarView2.prototype.remove = function(ecModel, api) {
var group = this.group;
var data = this._data;
if (ecModel.get("animation")) {
if (data) {
data.eachItemGraphicEl(function(bar) {
removeBar(data, getECData(bar).dataIndex, ecModel, bar);
});
}
} else {
group.removeAll();
}
};
PictorialBarView2.type = "pictorialBar";
return PictorialBarView2;
}(ChartView);
function getSymbolMeta(data, dataIndex, itemModel, opt) {
var layout = data.getItemLayout(dataIndex);
var symbolRepeat = itemModel.get("symbolRepeat");
var symbolClip = itemModel.get("symbolClip");
var symbolPosition = itemModel.get("symbolPosition") || "start";
var symbolRotate = itemModel.get("symbolRotate");
var rotation = (symbolRotate || 0) * Math.PI / 180 || 0;
var symbolPatternSize = itemModel.get("symbolPatternSize") || 2;
var isAnimationEnabled2 = itemModel.isAnimationEnabled();
var symbolMeta = {
dataIndex,
layout,
itemModel,
symbolType: data.getItemVisual(dataIndex, "symbol") || "circle",
style: data.getItemVisual(dataIndex, "style"),
symbolClip,
symbolRepeat,
symbolRepeatDirection: itemModel.get("symbolRepeatDirection"),
symbolPatternSize,
rotation,
animationModel: isAnimationEnabled2 ? itemModel : null,
hoverScale: isAnimationEnabled2 && itemModel.get(["emphasis", "scale"]),
z2: itemModel.getShallow("z", true) || 0
};
prepareBarLength(itemModel, symbolRepeat, layout, opt, symbolMeta);
prepareSymbolSize(data, dataIndex, layout, symbolRepeat, symbolClip, symbolMeta.boundingLength, symbolMeta.pxSign, symbolPatternSize, opt, symbolMeta);
prepareLineWidth(itemModel, symbolMeta.symbolScale, rotation, opt, symbolMeta);
var symbolSize = symbolMeta.symbolSize;
var symbolOffset = normalizeSymbolOffset(itemModel.get("symbolOffset"), symbolSize);
prepareLayoutInfo(itemModel, symbolSize, layout, symbolRepeat, symbolClip, symbolOffset, symbolPosition, symbolMeta.valueLineWidth, symbolMeta.boundingLength, symbolMeta.repeatCutLength, opt, symbolMeta);
return symbolMeta;
}
function prepareBarLength(itemModel, symbolRepeat, layout, opt, outputSymbolMeta) {
var valueDim = opt.valueDim;
var symbolBoundingData = itemModel.get("symbolBoundingData");
var valueAxis = opt.coordSys.getOtherAxis(opt.coordSys.getBaseAxis());
var zeroPx = valueAxis.toGlobalCoord(valueAxis.dataToCoord(0));
var pxSignIdx = 1 - +(layout[valueDim.wh] <= 0);
var boundingLength;
if (isArray(symbolBoundingData)) {
var symbolBoundingExtent = [convertToCoordOnAxis(valueAxis, symbolBoundingData[0]) - zeroPx, convertToCoordOnAxis(valueAxis, symbolBoundingData[1]) - zeroPx];
symbolBoundingExtent[1] < symbolBoundingExtent[0] && symbolBoundingExtent.reverse();
boundingLength = symbolBoundingExtent[pxSignIdx];
} else if (symbolBoundingData != null) {
boundingLength = convertToCoordOnAxis(valueAxis, symbolBoundingData) - zeroPx;
} else if (symbolRepeat) {
boundingLength = opt.coordSysExtent[valueDim.index][pxSignIdx] - zeroPx;
} else {
boundingLength = layout[valueDim.wh];
}
outputSymbolMeta.boundingLength = boundingLength;
if (symbolRepeat) {
outputSymbolMeta.repeatCutLength = layout[valueDim.wh];
}
outputSymbolMeta.pxSign = boundingLength > 0 ? 1 : -1;
}
function convertToCoordOnAxis(axis, value) {
return axis.toGlobalCoord(axis.dataToCoord(axis.scale.parse(value)));
}
function prepareSymbolSize(data, dataIndex, layout, symbolRepeat, symbolClip, boundingLength, pxSign, symbolPatternSize, opt, outputSymbolMeta) {
var valueDim = opt.valueDim;
var categoryDim = opt.categoryDim;
var categorySize = Math.abs(layout[categoryDim.wh]);
var symbolSize = data.getItemVisual(dataIndex, "symbolSize");
var parsedSymbolSize;
if (isArray(symbolSize)) {
parsedSymbolSize = symbolSize.slice();
} else {
if (symbolSize == null) {
parsedSymbolSize = ["100%", "100%"];
} else {
parsedSymbolSize = [symbolSize, symbolSize];
}
}
parsedSymbolSize[categoryDim.index] = parsePercent(parsedSymbolSize[categoryDim.index], categorySize);
parsedSymbolSize[valueDim.index] = parsePercent(parsedSymbolSize[valueDim.index], symbolRepeat ? categorySize : Math.abs(boundingLength));
outputSymbolMeta.symbolSize = parsedSymbolSize;
var symbolScale = outputSymbolMeta.symbolScale = [parsedSymbolSize[0] / symbolPatternSize, parsedSymbolSize[1] / symbolPatternSize];
symbolScale[valueDim.index] *= (opt.isHorizontal ? -1 : 1) * pxSign;
}
function prepareLineWidth(itemModel, symbolScale, rotation, opt, outputSymbolMeta) {
var valueLineWidth = itemModel.get(BAR_BORDER_WIDTH_QUERY) || 0;
if (valueLineWidth) {
pathForLineWidth.attr({
scaleX: symbolScale[0],
scaleY: symbolScale[1],
rotation
});
pathForLineWidth.updateTransform();
valueLineWidth /= pathForLineWidth.getLineScale();
valueLineWidth *= symbolScale[opt.valueDim.index];
}
outputSymbolMeta.valueLineWidth = valueLineWidth || 0;
}
function prepareLayoutInfo(itemModel, symbolSize, layout, symbolRepeat, symbolClip, symbolOffset, symbolPosition, valueLineWidth, boundingLength, repeatCutLength, opt, outputSymbolMeta) {
var categoryDim = opt.categoryDim;
var valueDim = opt.valueDim;
var pxSign = outputSymbolMeta.pxSign;
var unitLength = Math.max(symbolSize[valueDim.index] + valueLineWidth, 0);
var pathLen = unitLength;
if (symbolRepeat) {
var absBoundingLength = Math.abs(boundingLength);
var symbolMargin = retrieve(itemModel.get("symbolMargin"), "15%") + "";
var hasEndGap = false;
if (symbolMargin.lastIndexOf("!") === symbolMargin.length - 1) {
hasEndGap = true;
symbolMargin = symbolMargin.slice(0, symbolMargin.length - 1);
}
var symbolMarginNumeric = parsePercent(symbolMargin, symbolSize[valueDim.index]);
var uLenWithMargin = Math.max(unitLength + symbolMarginNumeric * 2, 0);
var endFix = hasEndGap ? 0 : symbolMarginNumeric * 2;
var repeatSpecified = isNumeric(symbolRepeat);
var repeatTimes = repeatSpecified ? symbolRepeat : toIntTimes((absBoundingLength + endFix) / uLenWithMargin);
var mDiff = absBoundingLength - repeatTimes * unitLength;
symbolMarginNumeric = mDiff / 2 / (hasEndGap ? repeatTimes : Math.max(repeatTimes - 1, 1));
uLenWithMargin = unitLength + symbolMarginNumeric * 2;
endFix = hasEndGap ? 0 : symbolMarginNumeric * 2;
if (!repeatSpecified && symbolRepeat !== "fixed") {
repeatTimes = repeatCutLength ? toIntTimes((Math.abs(repeatCutLength) + endFix) / uLenWithMargin) : 0;
}
pathLen = repeatTimes * uLenWithMargin - endFix;
outputSymbolMeta.repeatTimes = repeatTimes;
outputSymbolMeta.symbolMargin = symbolMarginNumeric;
}
var sizeFix = pxSign * (pathLen / 2);
var pathPosition = outputSymbolMeta.pathPosition = [];
pathPosition[categoryDim.index] = layout[categoryDim.wh] / 2;
pathPosition[valueDim.index] = symbolPosition === "start" ? sizeFix : symbolPosition === "end" ? boundingLength - sizeFix : boundingLength / 2;
if (symbolOffset) {
pathPosition[0] += symbolOffset[0];
pathPosition[1] += symbolOffset[1];
}
var bundlePosition = outputSymbolMeta.bundlePosition = [];
bundlePosition[categoryDim.index] = layout[categoryDim.xy];
bundlePosition[valueDim.index] = layout[valueDim.xy];
var barRectShape = outputSymbolMeta.barRectShape = extend({}, layout);
barRectShape[valueDim.wh] = pxSign * Math.max(Math.abs(layout[valueDim.wh]), Math.abs(pathPosition[valueDim.index] + sizeFix));
barRectShape[categoryDim.wh] = layout[categoryDim.wh];
var clipShape = outputSymbolMeta.clipShape = {};
clipShape[categoryDim.xy] = -layout[categoryDim.xy];
clipShape[categoryDim.wh] = opt.ecSize[categoryDim.wh];
clipShape[valueDim.xy] = 0;
clipShape[valueDim.wh] = layout[valueDim.wh];
}
function createPath(symbolMeta) {
var symbolPatternSize = symbolMeta.symbolPatternSize;
var path = createSymbol(
symbolMeta.symbolType,
-symbolPatternSize / 2,
-symbolPatternSize / 2,
symbolPatternSize,
symbolPatternSize
);
path.attr({
culling: true
});
path.type !== "image" && path.setStyle({
strokeNoScale: true
});
return path;
}
function createOrUpdateRepeatSymbols(bar, opt, symbolMeta, isUpdate) {
var bundle = bar.__pictorialBundle;
var symbolSize = symbolMeta.symbolSize;
var valueLineWidth = symbolMeta.valueLineWidth;
var pathPosition = symbolMeta.pathPosition;
var valueDim = opt.valueDim;
var repeatTimes = symbolMeta.repeatTimes || 0;
var index = 0;
var unit = symbolSize[opt.valueDim.index] + valueLineWidth + symbolMeta.symbolMargin * 2;
eachPath(bar, function(path2) {
path2.__pictorialAnimationIndex = index;
path2.__pictorialRepeatTimes = repeatTimes;
if (index < repeatTimes) {
updateAttr(path2, null, makeTarget(index), symbolMeta, isUpdate);
} else {
updateAttr(path2, null, {
scaleX: 0,
scaleY: 0
}, symbolMeta, isUpdate, function() {
bundle.remove(path2);
});
}
index++;
});
for (; index < repeatTimes; index++) {
var path = createPath(symbolMeta);
path.__pictorialAnimationIndex = index;
path.__pictorialRepeatTimes = repeatTimes;
bundle.add(path);
var target = makeTarget(index);
updateAttr(path, {
x: target.x,
y: target.y,
scaleX: 0,
scaleY: 0
}, {
scaleX: target.scaleX,
scaleY: target.scaleY,
rotation: target.rotation
}, symbolMeta, isUpdate);
}
function makeTarget(index2) {
var position = pathPosition.slice();
var pxSign = symbolMeta.pxSign;
var i = index2;
if (symbolMeta.symbolRepeatDirection === "start" ? pxSign > 0 : pxSign < 0) {
i = repeatTimes - 1 - index2;
}
position[valueDim.index] = unit * (i - repeatTimes / 2 + 0.5) + pathPosition[valueDim.index];
return {
x: position[0],
y: position[1],
scaleX: symbolMeta.symbolScale[0],
scaleY: symbolMeta.symbolScale[1],
rotation: symbolMeta.rotation
};
}
}
function createOrUpdateSingleSymbol(bar, opt, symbolMeta, isUpdate) {
var bundle = bar.__pictorialBundle;
var mainPath = bar.__pictorialMainPath;
if (!mainPath) {
mainPath = bar.__pictorialMainPath = createPath(symbolMeta);
bundle.add(mainPath);
updateAttr(mainPath, {
x: symbolMeta.pathPosition[0],
y: symbolMeta.pathPosition[1],
scaleX: 0,
scaleY: 0,
rotation: symbolMeta.rotation
}, {
scaleX: symbolMeta.symbolScale[0],
scaleY: symbolMeta.symbolScale[1]
}, symbolMeta, isUpdate);
} else {
updateAttr(mainPath, null, {
x: symbolMeta.pathPosition[0],
y: symbolMeta.pathPosition[1],
scaleX: symbolMeta.symbolScale[0],
scaleY: symbolMeta.symbolScale[1],
rotation: symbolMeta.rotation
}, symbolMeta, isUpdate);
}
}
function createOrUpdateBarRect(bar, symbolMeta, isUpdate) {
var rectShape = extend({}, symbolMeta.barRectShape);
var barRect = bar.__pictorialBarRect;
if (!barRect) {
barRect = bar.__pictorialBarRect = new Rect({
z2: 2,
shape: rectShape,
silent: true,
style: {
stroke: "transparent",
fill: "transparent",
lineWidth: 0
}
});
barRect.disableMorphing = true;
bar.add(barRect);
} else {
updateAttr(barRect, null, {
shape: rectShape
}, symbolMeta, isUpdate);
}
}
function createOrUpdateClip(bar, opt, symbolMeta, isUpdate) {
if (symbolMeta.symbolClip) {
var clipPath = bar.__pictorialClipPath;
var clipShape = extend({}, symbolMeta.clipShape);
var valueDim = opt.valueDim;
var animationModel = symbolMeta.animationModel;
var dataIndex = symbolMeta.dataIndex;
if (clipPath) {
updateProps(clipPath, {
shape: clipShape
}, animationModel, dataIndex);
} else {
clipShape[valueDim.wh] = 0;
clipPath = new Rect({
shape: clipShape
});
bar.__pictorialBundle.setClipPath(clipPath);
bar.__pictorialClipPath = clipPath;
var target = {};
target[valueDim.wh] = symbolMeta.clipShape[valueDim.wh];
graphic[isUpdate ? "updateProps" : "initProps"](clipPath, {
shape: target
}, animationModel, dataIndex);
}
}
}
function getItemModel(data, dataIndex) {
var itemModel = data.getItemModel(dataIndex);
itemModel.getAnimationDelayParams = getAnimationDelayParams;
itemModel.isAnimationEnabled = isAnimationEnabled;
return itemModel;
}
function getAnimationDelayParams(path) {
return {
index: path.__pictorialAnimationIndex,
count: path.__pictorialRepeatTimes
};
}
function isAnimationEnabled() {
return this.parentModel.isAnimationEnabled() && !!this.getShallow("animation");
}
function createBar(data, opt, symbolMeta, isUpdate) {
var bar = new Group();
var bundle = new Group();
bar.add(bundle);
bar.__pictorialBundle = bundle;
bundle.x = symbolMeta.bundlePosition[0];
bundle.y = symbolMeta.bundlePosition[1];
if (symbolMeta.symbolRepeat) {
createOrUpdateRepeatSymbols(bar, opt, symbolMeta);
} else {
createOrUpdateSingleSymbol(bar, opt, symbolMeta);
}
createOrUpdateBarRect(bar, symbolMeta, isUpdate);
createOrUpdateClip(bar, opt, symbolMeta, isUpdate);
bar.__pictorialShapeStr = getShapeStr(data, symbolMeta);
bar.__pictorialSymbolMeta = symbolMeta;
return bar;
}
function updateBar(bar, opt, symbolMeta) {
var animationModel = symbolMeta.animationModel;
var dataIndex = symbolMeta.dataIndex;
var bundle = bar.__pictorialBundle;
updateProps(bundle, {
x: symbolMeta.bundlePosition[0],
y: symbolMeta.bundlePosition[1]
}, animationModel, dataIndex);
if (symbolMeta.symbolRepeat) {
createOrUpdateRepeatSymbols(bar, opt, symbolMeta, true);
} else {
createOrUpdateSingleSymbol(bar, opt, symbolMeta, true);
}
createOrUpdateBarRect(bar, symbolMeta, true);
createOrUpdateClip(bar, opt, symbolMeta, true);
}
function removeBar(data, dataIndex, animationModel, bar) {
var labelRect = bar.__pictorialBarRect;
labelRect && labelRect.removeTextContent();
var paths = [];
eachPath(bar, function(path) {
paths.push(path);
});
bar.__pictorialMainPath && paths.push(bar.__pictorialMainPath);
bar.__pictorialClipPath && (animationModel = null);
each(paths, function(path) {
removeElement(path, {
scaleX: 0,
scaleY: 0
}, animationModel, dataIndex, function() {
bar.parent && bar.parent.remove(bar);
});
});
data.setItemGraphicEl(dataIndex, null);
}
function getShapeStr(data, symbolMeta) {
return [data.getItemVisual(symbolMeta.dataIndex, "symbol") || "none", !!symbolMeta.symbolRepeat, !!symbolMeta.symbolClip].join(":");
}
function eachPath(bar, cb, context) {
each(bar.__pictorialBundle.children(), function(el) {
el !== bar.__pictorialBarRect && cb.call(context, el);
});
}
function updateAttr(el, immediateAttrs, animationAttrs, symbolMeta, isUpdate, cb) {
immediateAttrs && el.attr(immediateAttrs);
if (symbolMeta.symbolClip && !isUpdate) {
animationAttrs && el.attr(animationAttrs);
} else {
animationAttrs && graphic[isUpdate ? "updateProps" : "initProps"](el, animationAttrs, symbolMeta.animationModel, symbolMeta.dataIndex, cb);
}
}
function updateCommon(bar, opt, symbolMeta) {
var dataIndex = symbolMeta.dataIndex;
var itemModel = symbolMeta.itemModel;
var emphasisModel = itemModel.getModel("emphasis");
var emphasisStyle = emphasisModel.getModel("itemStyle").getItemStyle();
var blurStyle = itemModel.getModel(["blur", "itemStyle"]).getItemStyle();
var selectStyle = itemModel.getModel(["select", "itemStyle"]).getItemStyle();
var cursorStyle = itemModel.getShallow("cursor");
var focus = emphasisModel.get("focus");
var blurScope = emphasisModel.get("blurScope");
var hoverScale = emphasisModel.get("scale");
eachPath(bar, function(path) {
if (path instanceof ZRImage) {
var pathStyle = path.style;
path.useStyle(extend({
image: pathStyle.image,
x: pathStyle.x,
y: pathStyle.y,
width: pathStyle.width,
height: pathStyle.height
}, symbolMeta.style));
} else {
path.useStyle(symbolMeta.style);
}
var emphasisState = path.ensureState("emphasis");
emphasisState.style = emphasisStyle;
if (hoverScale) {
emphasisState.scaleX = path.scaleX * 1.1;
emphasisState.scaleY = path.scaleY * 1.1;
}
path.ensureState("blur").style = blurStyle;
path.ensureState("select").style = selectStyle;
cursorStyle && (path.cursor = cursorStyle);
path.z2 = symbolMeta.z2;
});
var barPositionOutside = opt.valueDim.posDesc[+(symbolMeta.boundingLength > 0)];
var barRect = bar.__pictorialBarRect;
setLabelStyle(barRect, getLabelStatesModels(itemModel), {
labelFetcher: opt.seriesModel,
labelDataIndex: dataIndex,
defaultText: getDefaultLabel(opt.seriesModel.getData(), dataIndex),
inheritColor: symbolMeta.style.fill,
defaultOpacity: symbolMeta.style.opacity,
defaultOutsidePosition: barPositionOutside
});
toggleHoverEmphasis(bar, focus, blurScope, emphasisModel.get("disabled"));
}
function toIntTimes(times) {
var roundedTimes = Math.round(times);
return Math.abs(times - roundedTimes) < 1e-4 ? roundedTimes : Math.ceil(times);
}
var PictorialBarView$1 = PictorialBarView;
export { PictorialBarView$1 as default };