@visactor/vrender-components
Version:
components library for dp visualization
166 lines (157 loc) • 8.5 kB
JavaScript
import { array, isFunction, isValid, merge } from "@visactor/vutils";
import { AbstractComponent } from "../core/base";
import { IDataZoomEvent, IDataZoomInteractiveEvent } from "./type";
import { DataZoomRenderer } from "./renderer";
import { DataZoomInteraction } from "./interaction";
import { loadDataZoomComponent } from "./register";
import { DEFAULT_DATA_ZOOM_ATTRIBUTES } from "./config";
loadDataZoomComponent();
export class DataZoom extends AbstractComponent {
constructor(attributes, options) {
super((null == options ? void 0 : options.skipDefault) ? attributes : merge({}, DataZoom.defaultAttributes, attributes)),
this.name = "dataZoom", this._state = {
start: 0,
end: 1
}, this.getLayoutAttrFromConfig = () => {
var _a, _b, _c, _d, _e, _f;
if (this._layoutCacheFromConfig) return this._layoutCacheFromConfig;
const {position: positionConfig, size: size, orient: orient, middleHandlerStyle: middleHandlerStyle = {}, startHandlerStyle: startHandlerStyle = {}, endHandlerStyle: endHandlerStyle = {}, backgroundStyle: backgroundStyle = {}} = this.attribute, {width: widthConfig, height: heightConfig} = size, middleHandlerSize = null !== (_b = null === (_a = middleHandlerStyle.background) || void 0 === _a ? void 0 : _a.size) && void 0 !== _b ? _b : 10;
let width, height, position;
middleHandlerStyle.visible ? this._isHorizontal ? (width = widthConfig, height = heightConfig - middleHandlerSize,
position = {
x: positionConfig.x,
y: positionConfig.y + middleHandlerSize
}) : (width = widthConfig - middleHandlerSize, height = heightConfig, position = {
x: positionConfig.x + ("left" === orient ? middleHandlerSize : 0),
y: positionConfig.y
}) : (width = widthConfig, height = heightConfig, position = positionConfig);
const startHandlerSize = null !== (_c = startHandlerStyle.size) && void 0 !== _c ? _c : this._isHorizontal ? height : width, endHandlerSize = null !== (_d = endHandlerStyle.size) && void 0 !== _d ? _d : this._isHorizontal ? height : width;
return startHandlerStyle.visible && (this._isHorizontal ? (width -= (startHandlerSize + endHandlerSize) / 2,
position = {
x: position.x + startHandlerSize / 2,
y: position.y
}) : (height -= (startHandlerSize + endHandlerSize) / 2, position = {
x: position.x,
y: position.y + startHandlerSize / 2
})), height += (null !== (_e = backgroundStyle.lineWidth) && void 0 !== _e ? _e : 2) / 2,
width += (null !== (_f = backgroundStyle.lineWidth) && void 0 !== _f ? _f : 2) / 2,
this._layoutCacheFromConfig = {
position: position,
width: width,
height: height
}, this._layoutCacheFromConfig;
};
const {start: start, end: end, orient: orient} = this.attribute;
this._isHorizontal = "top" === orient || "bottom" === orient, start && (this._state.start = start),
end && (this._state.end = end), this._renderer = new DataZoomRenderer(this._getRendererAttrs()),
this._interaction = new DataZoomInteraction(this._getInteractionAttrs());
}
_getRendererAttrs() {
return {
attribute: this.attribute,
getLayoutAttrFromConfig: this.getLayoutAttrFromConfig,
setState: state => {
this._state = state;
},
getState: () => this._state,
getContainer: () => this._container
};
}
_getInteractionAttrs() {
return {
stage: this.stage,
attribute: this.attribute,
startHandlerMask: this._renderer.startHandlerMask,
endHandlerMask: this._renderer.endHandlerMask,
middleHandlerSymbol: this._renderer.middleHandlerSymbol,
middleHandlerRect: this._renderer.middleHandlerRect,
selectedBackground: this._renderer.selectedBackground,
background: this._renderer.background,
previewGroup: this._renderer.previewGroup,
selectedPreviewGroup: this._renderer.selectedPreviewGroup,
getLayoutAttrFromConfig: this.getLayoutAttrFromConfig,
setState: state => {
this._state = state;
},
getState: () => this._state,
getGlobalTransMatrix: () => this.globalTransMatrix
};
}
bindEvents() {
this.attribute.disableTriggerEvent ? this.setAttribute("childrenPickable", !1) : (this._interaction.bindEvents(),
this._interaction.on(IDataZoomInteractiveEvent.stateUpdate, (({shouldRender: shouldRender}) => {
shouldRender && this._renderer.renderDataZoom(!0);
})), this._interaction.on(IDataZoomInteractiveEvent.dataZoomUpdate, (({start: start, end: end, tag: tag}) => {
this._dispatchEvent(IDataZoomEvent.dataZoomChange, {
start: start,
end: end,
tag: tag
});
})), this._interaction.on(IDataZoomInteractiveEvent.maskUpdate, (() => {
this._renderer.renderDragMask();
})), "auto" === this.attribute.showDetail && (this._container.addEventListener("pointerenter", (() => {
this._renderer.showText = !0, this._renderer.renderText();
})), this._container.addEventListener("pointerleave", (() => {
this._renderer.showText = !1, this._renderer.renderText();
}))));
}
setAttributes(params, forceUpdateTag) {
var _a, _b;
const {start: start, end: end} = this.attribute;
start && (this._state.start = null !== (_a = params.start) && void 0 !== _a ? _a : start),
end && (this._state.end = null !== (_b = params.end) && void 0 !== _b ? _b : end),
this._renderer.setAttributes(this._getRendererAttrs()), this._interaction.setAttributes(this._getInteractionAttrs()),
super.setAttributes(params, forceUpdateTag);
}
render() {
this._layoutCacheFromConfig = null, this._container = this.createOrUpdateChild("datazoom-container", {}, "group"),
this._renderer.renderDataZoom(), this._interaction.setAttributes(this._getInteractionAttrs());
}
release(all) {
super.release(all), this._interaction.clearDragEvents();
}
setStartAndEnd(start, end) {
const {start: startState, end: endState} = this._state;
isValid(start) && isValid(end) && (start !== startState || end !== endState) && (this._state = {
start: start,
end: end
}, this._renderer.renderDataZoom(!0), this._dispatchEvent(IDataZoomEvent.dataZoomChange, {
start: start,
end: end
}));
}
setPreviewData(data) {
this._renderer.previewData = data;
}
setText(text, tag) {
"start" === tag ? this._renderer.startText.setAttribute("text", text) : this._renderer.endText.setAttribute("text", text);
}
getStartValue() {
return this._renderer.startValue;
}
getEndTextValue() {
return this._renderer.endValue;
}
getMiddleHandlerSize() {
var _a, _b, _c, _d;
const {middleHandlerStyle: middleHandlerStyle = {}} = this.attribute, middleHandlerRectSize = null !== (_b = null === (_a = middleHandlerStyle.background) || void 0 === _a ? void 0 : _a.size) && void 0 !== _b ? _b : 10, middleHandlerSymbolSize = null !== (_d = null === (_c = middleHandlerStyle.icon) || void 0 === _c ? void 0 : _c.size) && void 0 !== _d ? _d : 10;
return Math.max(middleHandlerRectSize, ...array(middleHandlerSymbolSize));
}
setPreviewPointsX(callback) {
isFunction(callback) && (this._renderer.previewPointsX = callback);
}
setPreviewPointsY(callback) {
isFunction(callback) && (this._renderer.previewPointsY = callback);
}
setPreviewPointsX1(callback) {
isFunction(callback) && (this._renderer.previewPointsX1 = callback);
}
setPreviewPointsY1(callback) {
isFunction(callback) && (this._renderer.previewPointsY1 = callback);
}
setStatePointToData(callback) {
isFunction(callback) && (this._renderer.statePointToData = callback);
}
}
DataZoom.defaultAttributes = DEFAULT_DATA_ZOOM_ATTRIBUTES;
//# sourceMappingURL=data-zoom.js.map