@visactor/vrender-components
Version:
components library for dp visualization
94 lines (88 loc) • 6.34 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: !0
}), exports.DiscretePlayer = void 0;
const vutils_1 = require("@visactor/vutils"), vrender_core_1 = require("@visactor/vrender-core"), base_player_1 = require("./base-player"), type_1 = require("./type"), utils_1 = require("./utils"), constant_1 = require("./controller/constant"), register_1 = require("./register");
(0, register_1.loadDiscretePlayerComponent)();
class DiscretePlayer extends base_player_1.BasePlayer {
constructor(attributes, options) {
super((null == options ? void 0 : options.skipDefault) ? attributes : (0, vutils_1.merge)({}, attributes)),
this._activeIndex = -1, this._isReachEnd = !1, this._initAttributes = () => {
var _a, _b, _c;
super._initAttributes(), this._alternate = null !== (_a = this.attribute.alternate) && void 0 !== _a && _a,
this._interval = null !== (_b = this.attribute.interval) && void 0 !== _b ? _b : 1e3,
this._direction = null !== (_c = this.attribute.direction) && void 0 !== _c ? _c : type_1.DirectionEnum.Default;
}, this._initDataIndex = () => {
var _a;
this._dataIndex = (0, vutils_1.isNil)(this.attribute.dataIndex) ? "default" === this._direction ? this._minIndex : this._maxIndex : null !== (_a = this.attribute.dataIndex) && void 0 !== _a ? _a : 0,
this._slider.setAttribute("value", this._dataIndex);
}, this._initEvents = () => {
this.attribute.disableTriggerEvent || (this._controller.addEventListener(constant_1.ControllerEventEnum.OnPlay, (e => {
e.stopPropagation(), this.play();
})), this._controller.addEventListener(constant_1.ControllerEventEnum.OnPause, (e => {
e.stopPropagation(), this.pause();
})), this._controller.addEventListener(constant_1.ControllerEventEnum.OnForward, (e => {
e.stopPropagation(), this.forward();
})), this._controller.addEventListener(constant_1.ControllerEventEnum.OnBackward, (e => {
e.stopPropagation(), this.backward();
})), this._slider.addEventListener("change", (e => {
const middle = Math.floor(e.detail.value) + .5;
this._dataIndex = e.detail.value >= middle ? Math.ceil(e.detail.value) : Math.floor(e.detail.value),
this._slider.setValue(this._dataIndex), this.dispatchCustomEvent(type_1.PlayerEventEnum.change);
})));
}, this.play = () => {
this._isPlaying || 1 !== this._data.length && (this._controller.togglePause(), this._isPlaying = !0,
((0, utils_1.isReachEnd)({
dataIndex: this._dataIndex,
maxIndex: this._maxIndex,
minIndex: this._minIndex,
direction: this._direction
}) || (0, utils_1.isReachStart)({
dataIndex: this._dataIndex,
maxIndex: this._maxIndex,
minIndex: this._minIndex,
direction: this._direction
})) && (this._direction === type_1.DirectionEnum.Default ? this._updateDataIndex(this._minIndex) : this._updateDataIndex(this._maxIndex)),
this.dispatchCustomEvent(type_1.PlayerEventEnum.play), this._isReachEnd = !1, this._tickTime = Date.now(),
this._rafId = vrender_core_1.vglobal.getRequestAnimationFrame()(this._play.bind(this, !0)));
}, this._play = isFirstPlay => {
const now = Date.now();
if (this._isReachEnd && now - this._tickTime >= this._interval) return this._isReachEnd = !1,
void this._playEnd();
isFirstPlay && this._activeIndex !== this._dataIndex ? (this.dispatchCustomEvent(type_1.PlayerEventEnum.change),
this._activeIndex = this._dataIndex) : now - this._tickTime >= this._interval && (this._tickTime = now,
this._updateDataIndex((0, utils_1.forwardStep)(this._direction, this._dataIndex, this._minIndex, this._maxIndex)),
this._activeIndex = this._dataIndex, this.dispatchCustomEvent(type_1.PlayerEventEnum.change)),
("default" === this._direction && this._dataIndex >= this._maxIndex || "reverse" === this._direction && this._dataIndex <= this._minIndex) && (this._isReachEnd = !0),
this._rafId = vrender_core_1.vglobal.getRequestAnimationFrame()(this._play.bind(this, !1));
}, this._updateDataIndex = dataIndex => {
this._dataIndex = dataIndex, this._slider.setValue(this._dataIndex);
}, this._playEnd = () => {
this._isPlaying = !1, this._controller.togglePlay(), vrender_core_1.vglobal.getCancelAnimationFrame()(this._rafId),
this._activeIndex = -1, this.dispatchCustomEvent(type_1.PlayerEventEnum.end);
}, this.pause = () => {
this._isPlaying && (this._isPlaying = !1, vrender_core_1.vglobal.getCancelAnimationFrame()(this._rafId),
this._controller.togglePlay(), this.dispatchCustomEvent(type_1.PlayerEventEnum.pause));
}, this.backward = () => {
const {loop: loop = !1} = this.attribute;
let index;
index = loop ? this._dataIndex - 1 < this._minIndex ? this._maxIndex : this._dataIndex - 1 : Math.max(this._dataIndex - 1, this._minIndex),
this._updateDataIndex(index), this.dispatchCustomEvent(type_1.PlayerEventEnum.change),
this.dispatchCustomEvent(type_1.PlayerEventEnum.backward);
}, this.forward = () => {
const {loop: loop = !1} = this.attribute;
let index;
index = loop ? this._dataIndex + 1 > this._maxIndex ? this._minIndex : this._dataIndex + 1 : Math.min(this._dataIndex + 1, this._maxIndex),
this._updateDataIndex(index), this.dispatchCustomEvent(type_1.PlayerEventEnum.change),
this.dispatchCustomEvent(type_1.PlayerEventEnum.forward);
}, this._initAttributes(), this._initDataIndex(), this._initEvents();
}
setAttributes(params, forceUpdateTag) {
super.setAttributes(params, forceUpdateTag), this._initAttributes();
}
dispatchCustomEvent(event) {
super.dispatchCustomEvent(event, this._dataIndex);
}
}
exports.DiscretePlayer = DiscretePlayer;
//# sourceMappingURL=discrete-player.js.map