@visactor/vchart
Version:
charts lib based @visactor/VGrammar
115 lines (110 loc) • 7.2 kB
JavaScript
import { clamp, abs, merge, mixin, isValid, isBoolean, isValidNumber } from "@visactor/vutils";
import { Zoomable } from "../../interaction/zoom";
import { getDirectionByOrient, getOrient } from "../axis/cartesian/util";
export class DataFilterEvent {
enableInteraction() {
this._activeRoam = !0;
}
disableInteraction() {
this._activeRoam = !1;
}
zoomIn(location) {
this.handleChartZoom({
zoomDelta: 1.2,
zoomX: null == location ? void 0 : location.x,
zoomY: null == location ? void 0 : location.y
});
}
zoomOut(location) {
this.handleChartZoom({
zoomDelta: .8,
zoomX: null == location ? void 0 : location.x,
zoomY: null == location ? void 0 : location.y
});
}
constructor(type, spec, handleChange, getLayoutRect, getState, getRegions, getOption, getEvent) {
this._activeRoam = !0, this._zoomAttr = {
enable: !0,
rate: 1,
focus: !0
}, this._dragAttr = {
enable: !0,
rate: 1,
reverse: !0
}, this._scrollAttr = {
enable: !0,
rate: 1,
reverse: !0
}, this.initZoomEvent = () => {
var _a, _b, _c, _d, _e, _f, _g;
const option = {
delayType: null !== (_b = null === (_a = this._spec) || void 0 === _a ? void 0 : _a.delayType) && void 0 !== _b ? _b : "throttle",
delayTime: isValid(null === (_c = this._spec) || void 0 === _c ? void 0 : _c.delayType) ? null !== (_e = null === (_d = this._spec) || void 0 === _d ? void 0 : _d.delayTime) && void 0 !== _e ? _e : 30 : 0,
realTime: null === (_g = null === (_f = this._spec) || void 0 === _f ? void 0 : _f.realTime) || void 0 === _g || _g,
allowComponentZoom: !0
};
this._zoomAttr.enable && this.initZoomEventOfRegions(this.getRegions(), null, this.handleChartZoom, option),
this._scrollAttr.enable && this.initScrollEventOfRegions(this.getRegions(), null, this.handleChartScroll, option),
this._dragAttr.enable && this.initDragEventOfRegions(this.getRegions(), null, this.handleChartDrag, option);
}, this.handleChartZoom = (params, e) => {
var _a, _b;
if (!this._activeRoam || this._zoomAttr.filter && !this._zoomAttr.filter(params, e)) return;
const {zoomDelta: zoomDelta, zoomX: zoomX, zoomY: zoomY} = params, {x: x, y: y} = this.getRegions()[0].getLayoutStartPoint(), {width: width, height: height} = this.getRegions()[0].getLayoutRect(), delta = Math.abs(this.getState().start - this.getState().end), zoomRate = null !== (_b = null === (_a = this._spec.roamZoom) || void 0 === _a ? void 0 : _a.rate) && void 0 !== _b ? _b : 1;
if (delta >= 1 && zoomDelta < 1) return;
if (delta <= .01 && zoomDelta > 1) return;
const focusLoc = this._isHorizontal ? zoomX : zoomY, totalValue = delta * (zoomDelta - 1) * zoomRate;
let startValue = totalValue / 2, endValue = totalValue / 2;
if (focusLoc) {
const startLoc = this._isHorizontal ? x : y, endLoc = this._isHorizontal ? width : height;
startValue = Math.abs(startLoc - focusLoc) / Math.abs(endLoc - startLoc) * totalValue,
endValue = Math.abs(endLoc - focusLoc) / Math.abs(endLoc - startLoc) * totalValue;
}
const start = clamp(this.getState().start + startValue, 0, 1), end = clamp(this.getState().end - endValue, 0, 1);
this._handleChange(Math.min(start, end), Math.max(start, end), !0);
}, this.handleChartScroll = (params, e) => {
var _a;
if (!this._activeRoam || this._scrollAttr.filter && !this._scrollAttr.filter(params, e)) return !1;
const {scrollX: scrollX, scrollY: scrollY} = params;
let value = this._isHorizontal ? scrollX : scrollY;
const active = this._isHorizontal ? abs(scrollX / scrollY) >= .5 : abs(scrollY / scrollX) >= .5;
if (this._scrollAttr.reverse || (value = -value), active) {
const scrollStep = this._spec.scrollStep;
if (isValidNumber(scrollStep)) {
value = (value > 0 ? 1 : -1) * (scrollStep * (this.getState().end - this.getState().start) / 1);
}
this.handleChartMove(value, null !== (_a = this._scrollAttr.rate) && void 0 !== _a ? _a : 1);
}
const hasChange = 0 !== this.getState().start && 1 !== this.getState().end;
return active && hasChange;
}, this.handleChartDrag = (delta, e) => {
var _a;
if (!this._activeRoam || this._dragAttr.filter && !this._dragAttr.filter(delta, e)) return;
const [dx, dy] = delta;
let value = this._isHorizontal ? dx : dy;
this._dragAttr.reverse && (value = -value), this.handleChartMove(value, null !== (_a = this._dragAttr.rate) && void 0 !== _a ? _a : 1);
}, this.handleChartMove = (value, rate) => {
const totalValue = this._isHorizontal ? this.getLayoutRect().width : this.getLayoutRect().height;
if (Math.abs(value) >= 1e-6) if (value > 0 && this.getState().end < 1) {
const moveDelta = Math.min(1 - this.getState().end, value / totalValue) * rate;
this._handleChange(this.getState().start + moveDelta, this.getState().end + moveDelta, !0);
} else if (value < 0 && this.getState().start > 0) {
const moveDelta = Math.max(-this.getState().start, value / totalValue) * rate;
this._handleChange(this.getState().start + moveDelta, this.getState().end + moveDelta, !0);
}
return !1;
}, this._type = type, this._spec = spec, this._handleChange = handleChange, this.getLayoutRect = getLayoutRect,
this.getState = getState, this.getRegions = getRegions, this._regions = getRegions(),
this.getOption = getOption, this._option = getOption(), this.getEvent = getEvent,
this._isHorizontal = "horizontal" === getDirectionByOrient(getOrient(spec));
}
setEventAttrFromSpec() {
!0 === this._spec.roamZoom || this._spec.roamZoom ? this._zoomAttr = merge({}, this._zoomAttr, this._spec.roamZoom) : this._zoomAttr.enable = !1,
!0 === this._spec.roamDrag || this._spec.roamDrag ? this._dragAttr = merge({}, this._dragAttr, this._spec.roamDrag) : this._dragAttr.enable = !1,
!0 === this._spec.roamScroll || this._spec.roamScroll ? this._scrollAttr = merge({}, this._scrollAttr, this._spec.roamScroll) : this._scrollAttr.enable = !1,
isBoolean(this._spec.roam) && (this._zoomAttr.enable = "scrollBar" !== this._type && this._spec.roam,
this._dragAttr.enable = this._spec.roam, this._scrollAttr.enable = this._spec.roam),
(this._zoomAttr.enable || this._dragAttr.enable || this._scrollAttr.enable) && this.initZoomable(this.getEvent(), this._option.mode);
}
}
mixin(DataFilterEvent, Zoomable);
//# sourceMappingURL=data-filter-event.js.map