@visactor/vrender-components/es/player/controller/controller.js

components library for dp visualization

import { isNil, merge } from "@visactor/vutils";

import { AbstractComponent } from "../../core/base";

import { iconRight, iconPause, iconPlay, iconLeft, iconUp, iconDown } from "./assets";

import { PlayerIcon } from "./icon";

import { ControllerEventEnum, ControllerTypeEnum } from "./constant";

export class Controller extends AbstractComponent {
    constructor(attributes, options) {
        super((null == options ? void 0 : options.skipDefault) ? attributes : merge({}, Controller.defaultAttributes, attributes)), 
        this._isPaused = !0, this.updateAttributes = () => {
            this._startAttr = {
                style: Object.assign(Object.assign(Object.assign({
                    symbolType: iconPlay
                }, Controller.defaultControllerAttr), {
                    visible: this.attribute.start.visible
                }), this.attribute.start.style)
            }, this._pauseAttr = {
                style: Object.assign(Object.assign(Object.assign({
                    symbolType: iconPause
                }, Controller.defaultControllerAttr), {
                    visible: this.attribute.pause.visible
                }), this.attribute.pause.style)
            }, this._forwardAttr = {
                style: Object.assign(Object.assign(Object.assign({}, Controller.defaultControllerAttr), {
                    visible: this.attribute.forward.visible
                }), this.attribute.forward.style)
            }, this._backwardAttr = {
                style: Object.assign(Object.assign(Object.assign({}, Controller.defaultControllerAttr), {
                    visible: this.attribute.backward.visible
                }), this.attribute.backward.style)
            }, this.updateLayout();
        }, this.updateLayout = () => {
            var _a, _b, _c, _d;
            this._layout = this.attribute.layout, "horizontal" === this._layout ? (this._backwardAttr.style.symbolType = null !== (_a = this._backwardAttr.style.symbolType) && void 0 !== _a ? _a : iconLeft, 
            this._forwardAttr.style.symbolType = null !== (_b = this._forwardAttr.style.symbolType) && void 0 !== _b ? _b : iconRight) : "vertical" === this._layout && (this._backwardAttr.style.symbolType = null !== (_c = this._backwardAttr.style.symbolType) && void 0 !== _c ? _c : iconUp, 
            this._forwardAttr.style.symbolType = null !== (_d = this._forwardAttr.style.symbolType) && void 0 !== _d ? _d : iconDown);
        }, this._initPlay = () => {
            isNil(this._playController) && (this._playController = new PlayerIcon(Object.assign({}, this._startAttr.style)), 
            this.add(this._playController));
        }, this._initBackward = () => {
            isNil(this._backwardController) && (this._backwardController = new PlayerIcon(Object.assign({}, this._backwardAttr.style)), 
            this.add(this._backwardController));
        }, this._initForward = () => {
            isNil(this._forwardController) && (this._forwardController = new PlayerIcon(Object.assign({}, this._forwardAttr.style)), 
            this.add(this._forwardController));
        }, this._initEvents = () => {
            this.attribute.disableTriggerEvent || (this._playController.addEventListener("pointerdown", (e => {
                e.stopPropagation(), !0 === this._isPaused ? this.play() : this.pause();
            })), this._backwardController.addEventListener("pointerdown", (e => {
                e.stopPropagation(), this.backward();
            })), this._forwardController.addEventListener("pointerdown", (e => {
                e.stopPropagation(), this.forward();
            })));
        }, this.renderPlay = () => {
            this._isPaused ? this._playController.setAttributes(Object.assign({
                symbolType: this._playController.getComputedAttribute("symbolType")
            }, this._startAttr.style)) : this._playController.setAttributes(Object.assign({
                symbolType: this._playController.getComputedAttribute("symbolType")
            }, this._pauseAttr.style));
        }, this.renderBackward = () => {
            this._backwardController.setAttributes(this._backwardAttr.style);
        }, this.renderForward = () => {
            this._forwardController.setAttributes(this._forwardAttr.style);
        }, this.play = () => {
            this._dispatchEvent(ControllerEventEnum.OnPlay);
        }, this.pause = () => {
            this._dispatchEvent(ControllerEventEnum.OnPause);
        }, this.forward = () => {
            this._dispatchEvent(ControllerEventEnum.OnForward);
        }, this.backward = () => {
            this._dispatchEvent(ControllerEventEnum.OnBackward);
        }, this.togglePlay = () => {
            this._playController.setAttributes(this._startAttr.style), this._isPaused = !0;
        }, this.togglePause = () => {
            this._playController.setAttributes(this._pauseAttr.style), this._isPaused = !1;
        }, this.updateAttributes(), this._initPlay(), this._initBackward(), this._initForward(), 
        this._initEvents();
    }
    render() {
        this.updateAttributes(), this.renderPlay(), this.renderBackward(), this.renderForward();
    }
}

Controller.defaultControllerAttr = {
    visible: !0,
    x: 0,
    y: 0,
    size: 20,
    fill: "#91caff",
    pickMode: "imprecise",
    cursor: "pointer"
}, Controller.defaultAttributes = {
    [ControllerTypeEnum.Start]: {},
    [ControllerTypeEnum.Pause]: {},
    [ControllerTypeEnum.Backward]: {},
    [ControllerTypeEnum.Forward]: {}
};
//# sourceMappingURL=controller.js.map