@visactor/vchart/esm/component/player/player.js

charts lib based @visactor/VGrammar

import { Factory } from "./../../core/factory";

import { DiscretePlayer, ContinuousPlayer, PlayerEventEnum } from "@visactor/vrender-components";

import { isNumber, array, isEqual, isValidNumber } from "@visactor/vutils";

import { ComponentTypeEnum } from "../interface/type";

import { BaseComponent } from "../base/base-component";

import { transformContinuousSpecToAttrs, transformDiscreteSpecToAttrs } from "./utils/transform";

import { isHorizontal, isVertical } from "./utils/orient";

import { LayoutLevel, LayoutZIndex } from "../../constant/layout";

import { ChartEvent } from "../../constant/event";

import { player } from "../../theme/builtin/common/component/player";

export class Player extends BaseComponent {
    constructor() {
        super(...arguments), this.layoutZIndex = LayoutZIndex.Player, this.layoutLevel = LayoutLevel.Player, 
        this.specKey = "player", this.type = 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({}, 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({}, 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 ? isEqual(attrs, this._cacheAttrs) || (this._cacheAttrs = attrs, 
            this._playerComponent.setAttributes(attrs), this._playerComponent._initAttributes(), 
            this._playerComponent.render()) : ("discrete" === attrs.type ? this._playerComponent = new DiscretePlayer(attrs) : this._playerComponent = new 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(...array(null === (_b = null === (_a = this._spec.controller.start) || void 0 === _a ? void 0 : _a.style) || void 0 === _b ? void 0 : _b.size), ...array(null === (_d = null === (_c = this._spec.controller.pause) || void 0 === _c ? void 0 : _c.style) || void 0 === _d ? void 0 : _d.size), ...array(null === (_f = null === (_e = this._spec.controller.backward) || void 0 === _e ? void 0 : _e.style) || void 0 === _f ? void 0 : _f.size), ...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 = 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 = isVertical(this._orient) ? this._spec.slider.railStyle.width : this._spec.slider.railStyle.height) && void 0 !== _a ? _a : 10, controllersHeight = Math.max(...array(null === (_c = null === (_b = this._spec.controller.start) || void 0 === _b ? void 0 : _b.style) || void 0 === _c ? void 0 : _c.size), ...array(null === (_e = null === (_d = this._spec.controller.pause) || void 0 === _d ? void 0 : _d.style) || void 0 === _e ? void 0 : _e.size), ...array(null === (_g = null === (_f = this._spec.controller.backward) || void 0 === _f ? void 0 : _f.style) || void 0 === _g ? void 0 : _g.size), ...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(ChartEvent.rendered, (() => {
                var _a;
                (null === (_a = this._spec) || void 0 === _a ? void 0 : _a.auto) && this._playerComponent.play();
            })), this._playerComponent.addEventListener(PlayerEventEnum.end, (() => {
                var _a;
                this.event.emit(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(PlayerEventEnum.change, (e => {
                const {index: index} = e.detail;
                this.changePlayerIndex(index);
            })), this._playerComponent.addEventListener(PlayerEventEnum.backward, (e => {
                const {index: index} = e.detail, spec = this._specs[index];
                this.event.emit(ChartEvent.playerBackward, {
                    model: this,
                    value: {
                        spec: spec,
                        index: index,
                        specs: this._specs
                    }
                });
            })), this._playerComponent.addEventListener(PlayerEventEnum.forward, (e => {
                const {index: index} = e.detail, spec = this._specs[index];
                this.event.emit(ChartEvent.playerForward, {
                    model: this,
                    value: {
                        spec: spec,
                        index: index,
                        specs: this._specs
                    }
                });
            })), this._playerComponent.addEventListener(PlayerEventEnum.play, (e => {
                const {index: index} = e.detail, spec = this._specs[index];
                this.event.emit(ChartEvent.playerPlay, {
                    model: this,
                    value: {
                        spec: spec,
                        index: index,
                        specs: this._specs
                    }
                });
            })), this._playerComponent.addEventListener(PlayerEventEnum.pause, (e => {
                const {index: index} = e.detail, spec = this._specs[index];
                this.event.emit(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), isValidNumber(pos.x)) {
            const offsetX = isVertical(this._orient) ? pos.x + this._sliderExceededSize() / 2 : pos.x;
            this._playerComponent && this._playerComponent.setAttribute("x", offsetX);
        }
        if (isValidNumber(pos.y)) {
            const offsetY = 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 isNumber(this._spec.width) ? Math.min(rect.width, Number(this._spec.width)) : isVertical(this._orient) ? this._maxSize() : rect.width;
    }
    _computeHeight(rect) {
        return isNumber(this._spec.height) ? (this._height = this._spec.height, Math.min(rect.height, Number(this._spec.height))) : isHorizontal(this._orient) ? this._maxSize() : rect.height;
    }
    _computeDx(rect) {
        return isVertical(this._orient) || "start" === this._position ? 0 : "middle" === this._position ? (rect.width - this._width) / 2 : rect.width - this._width;
    }
    _computeDy(rect) {
        return 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(ChartEvent.playerChange, {
            model: this,
            value: {
                spec: spec,
                index: index,
                specs: this._specs
            }
        });
    }
}

Player.builtInTheme = {
    player: player
}, Player.specKey = "player", Player.type = ComponentTypeEnum.player;

export const registerPlayer = () => {
    Factory.registerComponent(Player.type, Player);
};
//# sourceMappingURL=player.js.map