sideral/Graphic/Graphic.js

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var Module_1 = require("./../Module");
var Tool_1 = require("./../Tool");
var index_1 = require("./../index");
var Graphic = (function (_super) {
    __extends(Graphic, _super);
    /* LIFECYCLE */
    function Graphic() {
        var _this = _super.call(this) || this;
        /**
         * Graphics object
         */
        _this.graphics = {};
        /**
         * State of the graphic
         */
        _this.state = Tool_1.Enum.STATE.DEFAULT;
        /**
         * The PIXI Container of a Graphics
         */
        _this.container = new index_1.PIXI.Graphics();
        _this.signals.stateChange = new Tool_1.SignalEvent();
        _this.signals.propChange.bind("disabled", _this.onDisabledChange.bind(_this));
        _this.signals.propChange.bind("activable", _this.onActivableChange.bind(_this));
        return _this;
    }
    Graphic.prototype.initialize = function (props) {
        _super.prototype.initialize.call(this, props);
        this.onDisabledChange();
        this.onActivableChange();
    };
    /* METHODS */
    /**
     * Add a new graphic chaine
     * @param name - Name of the graphic
     * @param Item - Class of the item to be instanciated if the graphic doesnot exists
     * @param props - Properties to pass to the graphic
     * @param stateProps - Properties to pass to the graphic relative to the state of the current object
     * @param afterCallback - Function to be called after the item was created
     * @return Current instance
     */
    Graphic.prototype.graphic = function (name, Item, props, stateProps, afterCallback) {
        if (stateProps === void 0) { stateProps = {}; }
        var item = this.graphics[name] ? this.graphics[name].item : new Item();
        if (typeof props === "function") {
            props = props(item);
        }
        if (!this.graphics[name]) {
            this.graphics[name] = {
                item: this.add(item),
                default: Object.assign({}, props)
            };
        }
        var graphic = this.graphics[name];
        if (props) {
            graphic.default = Object.assign({}, graphic.default, props);
        }
        if (stateProps) {
            Object.keys(stateProps).forEach(function (state) { return graphic[state] = Object.assign({}, graphic[state] || {}, stateProps[state]); });
        }
        this.updateGraphic(name);
        if (afterCallback) {
            afterCallback(graphic.item);
        }
        return this;
    };
    /**
     * Helper to create a shape as a graphic
     * @param name - Name of the shape
     * @param props - Properties to pass to the shape
     * @param stateProps - Properties to pass to the shape relative to the state of the current object
     * @param afterCallback - Function to be called after the item was created
     * @return Current instace
     */
    Graphic.prototype.shape = function (name, props, stateProps, afterCallback) {
        if (stateProps === void 0) { stateProps = {}; }
        return this.graphic(name, Module_1.Shape, props, stateProps, afterCallback);
    };
    /**
     * Helper to create a Text as a graphic
     * @param name - Name of the text
     * @param props - Properties to pass to the text
     * @param stateProps - Properties to pass to the text relative to the state of the current object
     * @param afterCallback - Function to be called after the item was created
     * @return Current instance
     */
    Graphic.prototype.text = function (name, props, stateProps, afterCallback) {
        if (stateProps === void 0) { stateProps = {}; }
        return this.graphic(name, Module_1.Text, props, stateProps, afterCallback);
    };
    /**
     * Remove a graphic object by its name
     * @param name - Name of the graphic to remove
     * @returns Current instance
     */
    Graphic.prototype.removeGraphic = function (name) {
        var item = this.graphics[name];
        if (item) {
            item.item.kill();
            delete this.graphics[name];
        }
        return this;
    };
    /**
     * Update the properties of a graphic object
     * @param name - Name of the graphic to update
     * @param drawDefaultBefore - If true, it will draw the default theme if the state is different
     * @returns Current instance
     */
    Graphic.prototype.updateGraphic = function (name) {
        var graphic = this.graphics[name], props = graphic && (this.state === Tool_1.Enum.STATE.DEFAULT ? graphic[this.state] : Object.assign({}, graphic.default, graphic[this.state]));
        if (props) {
            Object.keys(props).forEach(function (key) { return graphic.item.props[key] = props[key]; });
        }
        return this;
    };
    /**
     * Get the graphic item by its name
     * @param name - Name of the graphic to get
     * @return The graphic item
     */
    Graphic.prototype.getGraphicItem = function (name) {
        var graphic = this.graphics[name];
        return graphic && graphic.item;
    };
    /**
     * Change the state of the graphic
     * @param state - The next state of the graphic
     */
    Graphic.prototype.setState = function (state) {
        this.state = state || Tool_1.Enum.STATE.DEFAULT;
        Object.keys(this.graphics).forEach(this.updateGraphic.bind(this));
        this.signals.stateChange.dispatch(this.state);
    };
    /**
     * Show the graphic
     */
    Graphic.prototype.show = function (duration) {
        if (duration === void 0) { duration = 250; }
        this.addTransition("opacity", duration, {
            to: 1
        });
    };
    /**
     * Hide the graphic
     */
    Graphic.prototype.hide = function (duration) {
        if (duration === void 0) { duration = 250; }
        this.addTransition("opacity", duration, {
            to: 0
        });
    };
    /**
     * Toggle the graphic
     */
    Graphic.prototype.toggle = function () {
        if (this.props.opacity > 0.5) {
            this.hide();
        }
        else {
            this.show();
        }
    };
    /**
     * Disable the graphic
     * @returns Current instance
     */
    Graphic.prototype.disable = function () {
        this.props.isActive = false;
        this.props.isDisabled = true;
        this.setState(Tool_1.Enum.STATE.DISABLED);
        return this;
    };
    /**
     * Active the graphic
     * @returns Current instance
     */
    Graphic.prototype.active = function () {
        this.props.isDisabled = false;
        this.props.isActive = this.props.activable;
        if (this.props.activable) {
            this.setState(Tool_1.Enum.STATE.ACTIVE);
        }
        return this;
    };
    /* EVENTS */
    /**
     * When "disabled" property has changed
     */
    Graphic.prototype.onDisabledChange = function () {
        if (this.props.isDisabled) {
            this.signals.hoverStart.remove(this._onHoverStartEvent.bind(this));
            this.signals.hoverEnd.remove(this._onHoverEndEvent.bind(this));
            this.disable();
        }
        else {
            this.signals.hoverStart.add(this._onHoverStartEvent.bind(this));
            this.signals.hoverEnd.add(this._onHoverEndEvent.bind(this));
            if (this.state === Tool_1.Enum.STATE.DISABLED) {
                this.setState(Tool_1.Enum.STATE.DEFAULT);
            }
        }
    };
    /**
     * When "activable" property has changed
     */
    Graphic.prototype.onActivableChange = function () {
        if (this.props.activable) {
            this.signals.click.add(this._onClickEvent.bind(this));
        }
        else {
            this.signals.click.remove(this._onClickEvent.bind(this));
        }
    };
    /**
     * Event fired on hover
     */
    Graphic.prototype._onHoverStartEvent = function () {
        if (!this.props.isDisabled && this.state !== Tool_1.Enum.STATE.ACTIVE) {
            this.setState(Tool_1.Enum.STATE.HOVER);
        }
    };
    /**
     * Event fired after hover
     */
    Graphic.prototype._onHoverEndEvent = function () {
        if (!this.props.isDisabled && this.state !== Tool_1.Enum.STATE.ACTIVE) {
            this.setState(Tool_1.Enum.STATE.DEFAULT);
        }
    };
    /**
     * Event fired on click
     */
    Graphic.prototype._onClickEvent = function () {
        if (!this.props.isDisabled) {
            this.props.isActive = this.props.activable ? !this.props.isActive : false;
            this.setState(this.props.isActive ? Tool_1.Enum.STATE.ACTIVE : Tool_1.Enum.STATE.DEFAULT);
        }
    };
    return Graphic;
}(Module_1.Module));
exports.Graphic = Graphic;