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

components library for dp visualization

"use strict";

Object.defineProperty(exports, "__esModule", {
    value: !0
}), exports.Controller = void 0;

const vutils_1 = require("@visactor/vutils"), base_1 = require("../../core/base"), assets_1 = require("./assets"), icon_1 = require("./icon"), constant_1 = require("./constant");

class Controller extends base_1.AbstractComponent {
    constructor(attributes, options) {
        super((null == options ? void 0 : options.skipDefault) ? attributes : (0, vutils_1.merge)({}, Controller.defaultAttributes, attributes)), 
        this._isPaused = !0, this.updateAttributes = () => {
            this._startAttr = {
                style: Object.assign(Object.assign(Object.assign({
                    symbolType: assets_1.iconPlay
                }, Controller.defaultControllerAttr), {
                    visible: this.attribute.start.visible
                }), this.attribute.start.style)
            }, this._pauseAttr = {
                style: Object.assign(Object.assign(Object.assign({
                    symbolType: assets_1.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 : assets_1.iconLeft, 
            this._forwardAttr.style.symbolType = null !== (_b = this._forwardAttr.style.symbolType) && void 0 !== _b ? _b : assets_1.iconRight) : "vertical" === this._layout && (this._backwardAttr.style.symbolType = null !== (_c = this._backwardAttr.style.symbolType) && void 0 !== _c ? _c : assets_1.iconUp, 
            this._forwardAttr.style.symbolType = null !== (_d = this._forwardAttr.style.symbolType) && void 0 !== _d ? _d : assets_1.iconDown);
        }, this._initPlay = () => {
            (0, vutils_1.isNil)(this._playController) && (this._playController = new icon_1.PlayerIcon(Object.assign({}, this._startAttr.style)), 
            this.add(this._playController));
        }, this._initBackward = () => {
            (0, vutils_1.isNil)(this._backwardController) && (this._backwardController = new icon_1.PlayerIcon(Object.assign({}, this._backwardAttr.style)), 
            this.add(this._backwardController));
        }, this._initForward = () => {
            (0, vutils_1.isNil)(this._forwardController) && (this._forwardController = new icon_1.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(constant_1.ControllerEventEnum.OnPlay);
        }, this.pause = () => {
            this._dispatchEvent(constant_1.ControllerEventEnum.OnPause);
        }, this.forward = () => {
            this._dispatchEvent(constant_1.ControllerEventEnum.OnForward);
        }, this.backward = () => {
            this._dispatchEvent(constant_1.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();
    }
}

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