@visactor/vchart
Version:
charts lib based @visactor/VGrammar
215 lines (206 loc) • 12.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: !0
}), exports.registerPlayer = exports.Player = void 0;
const factory_1 = require("./../../core/factory"), vrender_components_1 = require("@visactor/vrender-components"), vutils_1 = require("@visactor/vutils"), type_1 = require("../interface/type"), base_component_1 = require("../base/base-component"), transform_1 = require("./utils/transform"), orient_1 = require("./utils/orient"), layout_1 = require("../../constant/layout"), event_1 = require("../../constant/event"), player_1 = require("../../theme/builtin/common/component/player");
class Player extends base_component_1.BaseComponent {
constructor() {
super(...arguments), this.layoutZIndex = layout_1.LayoutZIndex.Player, this.layoutLevel = layout_1.LayoutLevel.Player,
this.specKey = "player", this.type = type_1.ComponentTypeEnum.player, this._orient = "bottom",
this._getPlayerAttrs = () => {
var _a, _b, _c, _d, _e, _f;
const type = this._spec.type, layoutAttrs = {
size: {
width: this._width,
height: this._height
},
dx: null !== (_a = this._spec.dx) && void 0 !== _a ? _a : 0 + this._dx,
dy: null !== (_b = this._spec.dy) && void 0 !== _b ? _b : 0 + this._dy
};
return "discrete" === type ? Object.assign(Object.assign(Object.assign({}, (0, transform_1.transformDiscreteSpecToAttrs)(this._spec, this._specs)), layoutAttrs), {
disableTriggerEvent: this._option.disableTriggerEvent,
loop: null === (_d = null === (_c = this._spec) || void 0 === _c ? void 0 : _c.loop) || void 0 === _d || _d
}) : Object.assign(Object.assign(Object.assign({}, (0, transform_1.transformContinuousSpecToAttrs)(this._spec, this._specs)), layoutAttrs), {
disableTriggerEvent: this._option.disableTriggerEvent,
loop: null === (_f = null === (_e = this._spec) || void 0 === _e ? void 0 : _e.loop) || void 0 === _f || _f
});
}, this._createOrUpdatePlayerComponent = () => {
const attrs = Object.assign({}, this._getPlayerAttrs()), container = this.getContainer();
this._playerComponent ? (0, vutils_1.isEqual)(attrs, this._cacheAttrs) || (this._cacheAttrs = attrs,
this._playerComponent.setAttributes(attrs), this._playerComponent._initAttributes(),
this._playerComponent.render()) : ("discrete" === attrs.type ? this._playerComponent = new vrender_components_1.DiscretePlayer(attrs) : this._playerComponent = new vrender_components_1.ContinuousPlayer(attrs),
this._cacheAttrs = attrs, this._playerComponent.name = "player", container.add(this._playerComponent),
this._initEvent());
}, this._maxSize = () => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
return Math.max(...(0, vutils_1.array)(null === (_b = null === (_a = this._spec.controller.start) || void 0 === _a ? void 0 : _a.style) || void 0 === _b ? void 0 : _b.size), ...(0,
vutils_1.array)(null === (_d = null === (_c = this._spec.controller.pause) || void 0 === _c ? void 0 : _c.style) || void 0 === _d ? void 0 : _d.size), ...(0,
vutils_1.array)(null === (_f = null === (_e = this._spec.controller.backward) || void 0 === _e ? void 0 : _e.style) || void 0 === _f ? void 0 : _f.size), ...(0,
vutils_1.array)(null === (_h = null === (_g = this._spec.controller.forward) || void 0 === _g ? void 0 : _g.style) || void 0 === _h ? void 0 : _h.size), null !== (_j = (0,
orient_1.isVertical)(this._orient) ? this._spec.slider.railStyle.width : this._spec.slider.railStyle.height) && void 0 !== _j ? _j : 10);
}, this._sliderExceededSize = () => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
const sliderHeight = null !== (_a = (0, orient_1.isVertical)(this._orient) ? this._spec.slider.railStyle.width : this._spec.slider.railStyle.height) && void 0 !== _a ? _a : 10, controllersHeight = Math.max(...(0,
vutils_1.array)(null === (_c = null === (_b = this._spec.controller.start) || void 0 === _b ? void 0 : _b.style) || void 0 === _c ? void 0 : _c.size), ...(0,
vutils_1.array)(null === (_e = null === (_d = this._spec.controller.pause) || void 0 === _d ? void 0 : _d.style) || void 0 === _e ? void 0 : _e.size), ...(0,
vutils_1.array)(null === (_g = null === (_f = this._spec.controller.backward) || void 0 === _f ? void 0 : _f.style) || void 0 === _g ? void 0 : _g.size), ...(0,
vutils_1.array)(null === (_j = null === (_h = this._spec.controller.forward) || void 0 === _h ? void 0 : _h.style) || void 0 === _j ? void 0 : _j.size));
return sliderHeight >= controllersHeight ? sliderHeight - controllersHeight : 0;
}, this._initEvent = () => {
this._option.disableTriggerEvent || (this._option.globalInstance.on(event_1.ChartEvent.rendered, (() => {
var _a;
(null === (_a = this._spec) || void 0 === _a ? void 0 : _a.auto) && this._playerComponent.play();
})), this._playerComponent.addEventListener(vrender_components_1.PlayerEventEnum.end, (() => {
var _a;
this.event.emit(event_1.ChartEvent.playerEnd, {
model: this
}), this._alternate && "discrete" === this._spec.type && (this._direction = "default" === this._direction ? "reverse" : "default",
this._playerComponent.setAttributes({
direction: this._direction,
dataIndex: "reverse" === this._direction ? this._specs.length - 2 : 1
})), (null === (_a = this._spec) || void 0 === _a ? void 0 : _a.loop) && this._playerComponent.play();
})), this._playerComponent.addEventListener(vrender_components_1.PlayerEventEnum.change, (e => {
const {index: index} = e.detail;
this.changePlayerIndex(index);
})), this._playerComponent.addEventListener(vrender_components_1.PlayerEventEnum.backward, (e => {
const {index: index} = e.detail, spec = this._specs[index];
this.event.emit(event_1.ChartEvent.playerBackward, {
model: this,
value: {
spec: spec,
index: index,
specs: this._specs
}
});
})), this._playerComponent.addEventListener(vrender_components_1.PlayerEventEnum.forward, (e => {
const {index: index} = e.detail, spec = this._specs[index];
this.event.emit(event_1.ChartEvent.playerForward, {
model: this,
value: {
spec: spec,
index: index,
specs: this._specs
}
});
})), this._playerComponent.addEventListener(vrender_components_1.PlayerEventEnum.play, (e => {
const {index: index} = e.detail, spec = this._specs[index];
this.event.emit(event_1.ChartEvent.playerPlay, {
model: this,
value: {
spec: spec,
index: index,
specs: this._specs
}
});
})), this._playerComponent.addEventListener(vrender_components_1.PlayerEventEnum.pause, (e => {
const {index: index} = e.detail, spec = this._specs[index];
this.event.emit(event_1.ChartEvent.playerPause, {
model: this,
value: {
spec: spec,
index: index,
specs: this._specs
}
});
})));
};
}
get orient() {
return this._orient;
}
set layoutOrient(v) {
this._orient = v;
}
setAttrFromSpec() {
var _a, _b, _c, _d, _e, _f, _g, _h;
super.setAttrFromSpec(), this._orient = null !== (_a = this._spec.orient) && void 0 !== _a ? _a : "bottom",
this._specs = null !== (_b = this._spec.specs) && void 0 !== _b ? _b : [], this._direction = null !== (_c = this._spec.direction) && void 0 !== _c ? _c : "default",
this._alternate = null !== (_d = this._spec.alternate) && void 0 !== _d && _d, this._dx = null !== (_e = this._spec.dx) && void 0 !== _e ? _e : 0,
this._dy = null !== (_f = this._spec.dy) && void 0 !== _f ? _f : 0, this._position = null !== (_g = this._spec.position) && void 0 !== _g ? _g : "middle",
this._visible = null === (_h = this._spec.visible) || void 0 === _h || _h;
}
afterSetLayoutStartPoint(pos) {
if (super.afterSetLayoutStartPoint(pos), (0, vutils_1.isValidNumber)(pos.x)) {
const offsetX = (0, orient_1.isVertical)(this._orient) ? pos.x + this._sliderExceededSize() / 2 : pos.x;
this._playerComponent && this._playerComponent.setAttribute("x", offsetX);
}
if ((0, vutils_1.isValidNumber)(pos.y)) {
const offsetY = (0, orient_1.isHorizontal)(this._orient) ? pos.y + this._sliderExceededSize() / 2 : pos.y;
this._playerComponent && this._playerComponent.setAttribute("y", offsetY);
}
}
getBoundsInRect(rect, fullSpace) {
this._width = this._computeWidth(rect), this._height = this._computeHeight(rect),
this._dx = this._computeDx(fullSpace), this._dy = this._computeDy(fullSpace);
const bounds = this._computeLayoutRect(rect, this._width, this._height);
return this._createOrUpdatePlayerComponent(), bounds;
}
_getNeedClearVRenderComponents() {
return [ this._playerComponent ];
}
_computeLayoutRect(rect, width, height) {
if (!1 === this._visible) return {
x1: 0,
x2: 0,
y1: 0,
y2: 0
};
switch (this._orient) {
case "top":
case "left":
return {
x1: 0,
y1: 0,
x2: width,
y2: height
};
case "right":
return {
x1: rect.width - width,
y1: 0,
x2: rect.width,
y2: rect.height
};
default:
return {
x1: 0,
y1: rect.height - height,
x2: rect.width,
y2: rect.height
};
}
}
_computeWidth(rect) {
return (0, vutils_1.isNumber)(this._spec.width) ? Math.min(rect.width, Number(this._spec.width)) : (0,
orient_1.isVertical)(this._orient) ? this._maxSize() : rect.width;
}
_computeHeight(rect) {
return (0, vutils_1.isNumber)(this._spec.height) ? (this._height = this._spec.height,
Math.min(rect.height, Number(this._spec.height))) : (0, orient_1.isHorizontal)(this._orient) ? this._maxSize() : rect.height;
}
_computeDx(rect) {
return (0, orient_1.isVertical)(this._orient) || "start" === this._position ? 0 : "middle" === this._position ? (rect.width - this._width) / 2 : rect.width - this._width;
}
_computeDy(rect) {
return (0, orient_1.isHorizontal)(this._orient) || "start" === this._position ? 0 : "middle" === this._position ? (rect.height - this._height) / 2 : rect.height - this._height;
}
changePlayerIndex(index) {
const spec = this._specs[index];
this._option.globalInstance.updateFullData(spec.data), this.event.emit(event_1.ChartEvent.playerChange, {
model: this,
value: {
spec: spec,
index: index,
specs: this._specs
}
});
}
}
exports.Player = Player, Player.builtInTheme = {
player: player_1.player
}, Player.specKey = "player", Player.type = type_1.ComponentTypeEnum.player;
const registerPlayer = () => {
factory_1.Factory.registerComponent(Player.type, Player);
};
exports.registerPlayer = registerPlayer;
//# sourceMappingURL=player.js.map