@visactor/vrender-components
Version:
components library for dp visualization
179 lines (175 loc) • 11.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: !0
}), exports.DataZoomInteraction = void 0;
const type_1 = require("./type"), event_1 = require("../util/event"), vrender_core_1 = require("@visactor/vrender-core"), vutils_1 = require("@visactor/vutils"), delayMap = {
debounce: vutils_1.debounce,
throttle: vutils_1.throttle
};
class DataZoomInteraction extends vutils_1.EventEmitter {
constructor(props) {
super(), this._activeState = !1, this._activeCache = {
startPos: {
x: 0,
y: 0
},
lastPos: {
x: 0,
y: 0
}
}, this._layoutCache = {
attPos: "x",
attSize: "width",
size: 0
}, this._handleTouchMove = e => {
this._activeState && e.preventDefault();
}, this._onHandlerPointerDown = (e, tag) => {
this.clearDragEvents(), "start" === tag ? (this._activeTag = type_1.DataZoomActiveTag.startHandler,
this._activeItem = this._startHandlerMask) : "end" === tag ? (this._activeTag = type_1.DataZoomActiveTag.endHandler,
this._activeItem = this._endHandlerMask) : "middleRect" === tag ? (this._activeTag = type_1.DataZoomActiveTag.middleHandler,
this._activeItem = this._middleHandlerRect) : "middleSymbol" === tag ? (this._activeTag = type_1.DataZoomActiveTag.middleHandler,
this._activeItem = this._middleHandlerSymbol) : "background" === tag && (this._activeTag = type_1.DataZoomActiveTag.background,
this._activeItem = this._background), this._activeState = !0, this._activeCache.startPos = this._eventPosToStagePos(e),
this._activeCache.lastPos = this._eventPosToStagePos(e);
const evtTarget = "browser" === vrender_core_1.vglobal.env ? vrender_core_1.vglobal : this.stage, triggers = (0,
event_1.getEndTriggersOfDrag)();
evtTarget.addEventListener("pointermove", this._onHandlerPointerMove, {
capture: !0
}), this.on("pointermove", this._onHandlerPointerMove, {
capture: !0
}), triggers.forEach((trigger => {
evtTarget.addEventListener(trigger, this._onHandlerPointerUp);
}));
}, this._pointerMove = e => {
const {brushSelect: brushSelect} = this.attribute, {position: position} = this._getLayoutAttrFromConfig(), pos = this._eventPosToStagePos(e), {attPos: attPos, size: size, attSize: attSize} = this._layoutCache, dis = (pos[attPos] - this._activeCache.lastPos[attPos]) / size, statePos = (pos[attPos] - position[attPos]) / this._getLayoutAttrFromConfig()[attSize];
let {start: start, end: end} = this._getState(), shouldRender = !0;
this._activeState && (this._activeTag === type_1.DataZoomActiveTag.middleHandler ? ({start: start, end: end} = this._moveZoomWithMiddle(dis)) : this._activeTag === type_1.DataZoomActiveTag.startHandler ? ({start: start, end: end} = this._moveZoomWithHandler(statePos, "start")) : this._activeTag === type_1.DataZoomActiveTag.endHandler ? ({start: start, end: end} = this._moveZoomWithHandler(statePos, "end")) : this._activeTag === type_1.DataZoomActiveTag.background && brushSelect && (({start: start, end: end} = this._moveZoomWithBackground(statePos)),
shouldRender = !1, this._dispatchEvent(type_1.IDataZoomInteractiveEvent.maskUpdate)),
this._activeCache.lastPos = pos), this._getState().start === start && this._getState().end === end || (this._setStateAttr(start, end),
this._dispatchEvent(type_1.IDataZoomInteractiveEvent.stateUpdate, {
start: this._getState().start,
end: this._getState().end,
shouldRender: shouldRender,
tag: this._activeTag
}), this.attribute.realTime && this._dispatchEvent(type_1.IDataZoomInteractiveEvent.dataZoomUpdate, {
start: this._getState().start,
end: this._getState().end,
shouldRender: !0,
tag: this._activeTag
}));
}, this._onHandlerPointerUp = e => {
this._activeState && this._activeTag === type_1.DataZoomActiveTag.background && (this._setStateAttr(this._getState().start, this._getState().end),
this._dispatchEvent(type_1.IDataZoomInteractiveEvent.stateUpdate, {
start: this._getState().start,
end: this._getState().end,
shouldRender: !0,
tag: this._activeTag
})), this._activeState = !1, this._dispatchEvent(type_1.IDataZoomInteractiveEvent.dataZoomUpdate, {
start: this._getState().start,
end: this._getState().end,
shouldRender: !0,
tag: this._activeTag
}), this.clearDragEvents();
}, this._initAttrs(props);
}
setAttributes(props) {
var _a, _b, _c, _d, _e, _f;
this._initAttrs(props), this._onHandlerPointerMove = 0 === (null !== (_b = null === (_a = this.attribute) || void 0 === _a ? void 0 : _a.delayTime) && void 0 !== _b ? _b : 0) ? this._pointerMove : delayMap[null !== (_d = null === (_c = this.attribute) || void 0 === _c ? void 0 : _c.delayType) && void 0 !== _d ? _d : "debounce"](this._pointerMove, null !== (_f = null === (_e = this.attribute) || void 0 === _e ? void 0 : _e.delayTime) && void 0 !== _f ? _f : 0);
}
_initAttrs(props) {
this.stage = props.stage, this.attribute = props.attribute, this._startHandlerMask = props.startHandlerMask,
this._endHandlerMask = props.endHandlerMask, this._middleHandlerSymbol = props.middleHandlerSymbol,
this._middleHandlerRect = props.middleHandlerRect, this._selectedBackground = props.selectedBackground,
this._background = props.background, this._previewGroup = props.previewGroup, this._selectedPreviewGroup = props.selectedPreviewGroup,
this._getLayoutAttrFromConfig = props.getLayoutAttrFromConfig, this._getState = props.getState,
this._setState = props.setState;
const {width: width, height: height} = this._getLayoutAttrFromConfig();
this._spanCache = this._getState().end - this._getState().start;
const isHorizontal = "top" === this.attribute.orient || "bottom" === this.attribute.orient;
this._layoutCache.size = isHorizontal ? width : height, this._layoutCache.attPos = isHorizontal ? "x" : "y",
this._layoutCache.attSize = isHorizontal ? "width" : "height", this._getGlobalTransMatrix = props.getGlobalTransMatrix;
}
clearDragEvents() {
const evtTarget = "browser" === vrender_core_1.vglobal.env ? vrender_core_1.vglobal : this.stage, triggers = (0,
event_1.getEndTriggersOfDrag)();
evtTarget.removeEventListener("pointermove", this._onHandlerPointerMove, {
capture: !0
}), triggers.forEach((trigger => {
evtTarget.removeEventListener(trigger, this._onHandlerPointerUp);
})), this.off("pointermove", this._onHandlerPointerMove, {
capture: !0
});
}
clearVGlobalEvents() {
("browser" === vrender_core_1.vglobal.env ? vrender_core_1.vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
passive: !1
});
}
bindEvents() {
var _a, _b, _c, _d, _e, _f, _g, _h;
const {brushSelect: brushSelect} = this.attribute;
null === (_a = this._startHandlerMask) || void 0 === _a || _a.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, "start"))),
null === (_b = this._endHandlerMask) || void 0 === _b || _b.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, "end"))),
null === (_c = this._middleHandlerSymbol) || void 0 === _c || _c.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, "middleSymbol"))),
null === (_d = this._middleHandlerRect) || void 0 === _d || _d.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, "middleRect")));
const selectedTag = brushSelect ? "background" : "middleRect";
null === (_e = this._selectedBackground) || void 0 === _e || _e.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, selectedTag))),
brushSelect && (null === (_f = this._background) || void 0 === _f || _f.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, "background")))),
brushSelect && (null === (_g = this._previewGroup) || void 0 === _g || _g.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, "background")))),
null === (_h = this._selectedPreviewGroup) || void 0 === _h || _h.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, selectedTag))),
("browser" === vrender_core_1.vglobal.env ? vrender_core_1.vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
passive: !1
});
}
_setStateAttr(start, end) {
const {zoomLock: zoomLock = !1, minSpan: minSpan = 0, maxSpan: maxSpan = 1} = this.attribute, span = end - start;
span !== this._spanCache && (zoomLock || span < minSpan || span > maxSpan) || (this._spanCache = span,
this._setState({
start: start,
end: end
}));
}
_moveZoomWithMiddle(dis) {
const {start: staetState, end: endState} = this._getState();
return dis > 0 && endState + dis > 1 ? dis = 1 - endState : dis < 0 && staetState + dis < 0 && (dis = -staetState),
{
start: (0, vutils_1.clamp)(staetState + dis, 0, 1),
end: (0, vutils_1.clamp)(endState + dis, 0, 1)
};
}
_moveZoomWithHandler(statePos, handler) {
const {start: start, end: end} = this._getState();
let newStart = start, newEnd = end;
return "start" === handler ? statePos > end ? (newStart = end, newEnd = statePos,
this._activeTag = type_1.DataZoomActiveTag.endHandler) : newStart = statePos : "end" === handler && (statePos < start ? (newEnd = start,
newStart = statePos, this._activeTag = type_1.DataZoomActiveTag.startHandler) : newEnd = statePos),
{
start: (0, vutils_1.clamp)(newStart, 0, 1),
end: (0, vutils_1.clamp)(newEnd, 0, 1)
};
}
_moveZoomWithBackground(statePos) {
const {position: position} = this._getLayoutAttrFromConfig(), {attSize: attSize} = this._layoutCache, startPos = (this._activeCache.startPos[this._layoutCache.attPos] - position[this._layoutCache.attPos]) / this._getLayoutAttrFromConfig()[attSize], endPos = statePos;
let start = (0, vutils_1.clamp)(startPos, 0, 1), end = (0, vutils_1.clamp)(endPos, 0, 1);
return start > end && ([start, end] = [ end, start ]), {
start: start,
end: end
};
}
_eventPosToStagePos(e) {
var _a, _b;
const result = {
x: 0,
y: 0
}, stagePoints = null !== (_b = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.eventPointTransform(e)) && void 0 !== _b ? _b : {
x: 0,
y: 0
};
return this._getGlobalTransMatrix().transformPoint(stagePoints, result), result;
}
_dispatchEvent(eventName, details) {
this.emit(eventName, details);
}
}
exports.DataZoomInteraction = DataZoomInteraction;
//# sourceMappingURL=interaction.js.map