cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
165 lines (164 loc) • 6.24 kB
JavaScript
import { __extends } from "../../../../tslib/tslib.es6.mjs";
import { retrieve, each, bind, map, clone } from "../../../../zrender/lib/core/util.mjs";
import VisualMapView from "./VisualMapView.mjs";
import { createSymbol } from "../../util/symbol.mjs";
import { box } from "../../util/layout.mjs";
import { makeHighDownBatch, getItemAlign } from "./helper.mjs";
import { createTextStyle } from "../../label/labelStyle.mjs";
import Group from "../../../../zrender/lib/graphic/Group.mjs";
import ZRText from "../../../../zrender/lib/graphic/Text.mjs";
var PiecewiseVisualMapView = function(_super) {
__extends(PiecewiseVisualMapView2, _super);
function PiecewiseVisualMapView2() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.type = PiecewiseVisualMapView2.type;
return _this;
}
PiecewiseVisualMapView2.prototype.doRender = function() {
var thisGroup = this.group;
thisGroup.removeAll();
var visualMapModel = this.visualMapModel;
var textGap = visualMapModel.get("textGap");
var textStyleModel = visualMapModel.textStyleModel;
var textFont = textStyleModel.getFont();
var textFill = textStyleModel.getTextColor();
var itemAlign = this._getItemAlign();
var itemSize = visualMapModel.itemSize;
var viewData = this._getViewData();
var endsText = viewData.endsText;
var showLabel = retrieve(visualMapModel.get("showLabel", true), !endsText);
endsText && this._renderEndsText(thisGroup, endsText[0], itemSize, showLabel, itemAlign);
each(viewData.viewPieceList, function(item) {
var piece = item.piece;
var itemGroup = new Group();
itemGroup.onclick = bind(this._onItemClick, this, piece);
this._enableHoverLink(itemGroup, item.indexInModelPieceList);
var representValue = visualMapModel.getRepresentValue(piece);
this._createItemSymbol(itemGroup, representValue, [0, 0, itemSize[0], itemSize[1]]);
if (showLabel) {
var visualState = this.visualMapModel.getValueState(representValue);
itemGroup.add(new ZRText({
style: {
x: itemAlign === "right" ? -textGap : itemSize[0] + textGap,
y: itemSize[1] / 2,
text: piece.text,
verticalAlign: "middle",
align: itemAlign,
font: textFont,
fill: textFill,
opacity: visualState === "outOfRange" ? 0.5 : 1
}
}));
}
thisGroup.add(itemGroup);
}, this);
endsText && this._renderEndsText(thisGroup, endsText[1], itemSize, showLabel, itemAlign);
box(visualMapModel.get("orient"), thisGroup, visualMapModel.get("itemGap"));
this.renderBackground(thisGroup);
this.positionGroup(thisGroup);
};
PiecewiseVisualMapView2.prototype._enableHoverLink = function(itemGroup, pieceIndex) {
var _this = this;
itemGroup.on("mouseover", function() {
return onHoverLink("highlight");
}).on("mouseout", function() {
return onHoverLink("downplay");
});
var onHoverLink = function(method) {
var visualMapModel = _this.visualMapModel;
visualMapModel.option.hoverLink && _this.api.dispatchAction({
type: method,
batch: makeHighDownBatch(visualMapModel.findTargetDataIndices(pieceIndex), visualMapModel)
});
};
};
PiecewiseVisualMapView2.prototype._getItemAlign = function() {
var visualMapModel = this.visualMapModel;
var modelOption = visualMapModel.option;
if (modelOption.orient === "vertical") {
return getItemAlign(visualMapModel, this.api, visualMapModel.itemSize);
} else {
var align = modelOption.align;
if (!align || align === "auto") {
align = "left";
}
return align;
}
};
PiecewiseVisualMapView2.prototype._renderEndsText = function(group, text, itemSize, showLabel, itemAlign) {
if (!text) {
return;
}
var itemGroup = new Group();
var textStyleModel = this.visualMapModel.textStyleModel;
itemGroup.add(new ZRText({
style: createTextStyle(textStyleModel, {
x: showLabel ? itemAlign === "right" ? itemSize[0] : 0 : itemSize[0] / 2,
y: itemSize[1] / 2,
verticalAlign: "middle",
align: showLabel ? itemAlign : "center",
text
})
}));
group.add(itemGroup);
};
PiecewiseVisualMapView2.prototype._getViewData = function() {
var visualMapModel = this.visualMapModel;
var viewPieceList = map(visualMapModel.getPieceList(), function(piece, index) {
return {
piece,
indexInModelPieceList: index
};
});
var endsText = visualMapModel.get("text");
var orient = visualMapModel.get("orient");
var inverse = visualMapModel.get("inverse");
if (orient === "horizontal" ? inverse : !inverse) {
viewPieceList.reverse();
} else if (endsText) {
endsText = endsText.slice().reverse();
}
return {
viewPieceList,
endsText
};
};
PiecewiseVisualMapView2.prototype._createItemSymbol = function(group, representValue, shapeParam) {
group.add(createSymbol(
this.getControllerVisual(representValue, "symbol"),
shapeParam[0],
shapeParam[1],
shapeParam[2],
shapeParam[3],
this.getControllerVisual(representValue, "color")
));
};
PiecewiseVisualMapView2.prototype._onItemClick = function(piece) {
var visualMapModel = this.visualMapModel;
var option = visualMapModel.option;
var selectedMode = option.selectedMode;
if (!selectedMode) {
return;
}
var selected = clone(option.selected);
var newKey = visualMapModel.getSelectedMapKey(piece);
if (selectedMode === "single" || selectedMode === true) {
selected[newKey] = true;
each(selected, function(o, key) {
selected[key] = key === newKey;
});
} else {
selected[newKey] = !selected[newKey];
}
this.api.dispatchAction({
type: "selectDataRange",
from: this.uid,
visualMapId: this.visualMapModel.id,
selected
});
};
PiecewiseVisualMapView2.type = "visualMap.piecewise";
return PiecewiseVisualMapView2;
}(VisualMapView);
var PiecewiseView = PiecewiseVisualMapView;
export { PiecewiseView as default };