medsurf-draw/dist/lib/elements/buttons/IndexedRoundButtonElement.js

Draw annotations on jpg/zoomify images, based on PIXI.js

var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        if (typeof b !== "function" && b !== null)
            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import * as PIXI from "pixi.js-legacy";
import * as MedsurfDraw from "../../public-api";
import { Design } from "../../config/design";
import { BaseContainer, BaseContainerImageModel } from "../../bases/elements/BaseContainer";
var IndexedRoundButtonElementModel = (function (_super) {
    __extends(IndexedRoundButtonElementModel, _super);
    function IndexedRoundButtonElementModel() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    return IndexedRoundButtonElementModel;
}(BaseContainerImageModel));
export { IndexedRoundButtonElementModel };
var IndexedRoundButtonElement = (function (_super) {
    __extends(IndexedRoundButtonElement, _super);
    function IndexedRoundButtonElement(model) {
        var _this = _super.call(this, model) || this;
        _this.zIndex = Design.roundButton.zIndex;
        _this.position.set(_this.circle.x, _this.circle.y);
        _this.selectInteraction = new MedsurfDraw.SelectInteraction(_this);
        _this.selectInteraction.on("onHover", _this.onHover, _this);
        _this.selectInteraction.on("onOut", _this.onOut, _this);
        _this.selectInteraction.on("onRelease", _this.onRelease, _this);
        _this.on("added", function () {
            _this.on("pointerover", _this.selectInteraction.onHover, _this.selectInteraction);
            _this.on("pointerout", _this.selectInteraction.onOut, _this.selectInteraction);
            _this.on("mousedown", _this.selectInteraction.onSelect, _this.selectInteraction);
            _this.on("mouseup", _this.selectInteraction.onRelease, _this.selectInteraction);
        });
        _this.on("removed", function () {
            _this.off("pointerover", _this.selectInteraction.onHover, _this.selectInteraction);
            _this.off("pointerout", _this.selectInteraction.onOut, _this.selectInteraction);
            _this.off("mousedown", _this.selectInteraction.onSelect, _this.selectInteraction);
            _this.off("mouseup", _this.selectInteraction.onRelease, _this.selectInteraction);
        });
        return _this;
    }
    IndexedRoundButtonElement.prototype.init = function (parent) {
        this.interactive = true;
        var lineWidth = Design.roundButton.lineWidth;
        if (lineWidth < Design.roundButton.minLineWidth) {
            lineWidth = Design.roundButton.minLineWidth;
        }
        var fontSize = this.fontSize;
        if (fontSize < Design.roundButton.minFontSize) {
            fontSize = Design.roundButton.minFontSize;
        }
        this._circleElement = new MedsurfDraw.Circle({
            circle: new PIXI.Circle(0, 0, this.circle.radius),
            options: this.options,
            lineWidth: lineWidth
        });
        this.addChild(this._circleElement);
        this._textElement = new MedsurfDraw.Text({
            text: this.text,
            style: new PIXI.TextStyle({ align: "left", fill: this.fontColor, fontSize: fontSize, fontFamily: "Font Awesome 5 Pro", fontStyle: "normal", fontWeight: "500" })
        });
        this._textElement.anchor.set(0.5, 0.5);
        this._circleElement.addChild(this._textElement);
        this._indexElement = new MedsurfDraw.Text({
            text: this.index,
            style: new PIXI.TextStyle({ align: "left", fill: this.fontColor, fontSize: Math.floor(fontSize / Design.indexedRoundButton.indexAspect), fontFamily: "Font Awesome 5 Pro", fontStyle: "normal", fontWeight: "500" })
        });
        this._indexElement.anchor.set(0, 0);
        this._circleElement.addChild(this._indexElement);
        this._iconTextMaskElement = new MedsurfDraw.IndexedRoundButtonMaskElement({
            image: this.image,
            textRectangle: this._textElement.getRectangle(),
            indexRectangle: this._indexElement.getRectangle(),
        });
        this._textElement.mask = this._iconTextMaskElement;
        this._circleElement.addChild(this._iconTextMaskElement);
        this.sortChildren();
        this.emit("debounceDraw");
    };
    IndexedRoundButtonElement.prototype.draw = function () {
        var lineWidth = Design.roundButton.lineWidth;
        if (lineWidth < Design.roundButton.minLineWidth) {
            lineWidth = Design.roundButton.minLineWidth;
        }
        var fontSize = this.fontSize;
        if (fontSize < Design.roundButton.minFontSize) {
            fontSize = Design.roundButton.minFontSize;
        }
        this._circleElement.circle = new PIXI.Circle(0, 0, this.circle.radius);
        this._circleElement.lineWidth = lineWidth;
        this._circleElement.draw();
        this._textElement.style.fontSize = fontSize;
        this._indexElement.style.fontSize = Math.floor(fontSize / Design.indexedRoundButton.indexAspect);
        this._iconTextMaskElement.textRectangle = this._textElement.getRectangle();
        this._iconTextMaskElement.indexRectangle = this._indexElement.getRectangle();
        this._iconTextMaskElement.draw();
        this._textElement.updateText(false);
    };
    IndexedRoundButtonElement.prototype.destroy = function (options) {
        if (this.selectInteraction) {
            this.selectInteraction.removeAllListeners();
        }
        if (this._iconTextMaskElement) {
            this._iconTextMaskElement.destroy(options);
        }
        if (this._indexElement) {
            this._indexElement.destroy(options);
        }
        if (this._textElement) {
            this._textElement.destroy(options);
        }
        if (this._circleElement) {
            this._circleElement.destroy(options);
        }
        _super.prototype.destroy.call(this, options);
    };
    IndexedRoundButtonElement.prototype.setIconAngle = function (angle) {
        this._textElement.angle = angle;
        this._indexElement.angle = angle;
        this._iconTextMaskElement.angle = angle;
    };
    IndexedRoundButtonElement.prototype.onHover = function (event) {
        event.stopPropagation();
        this._circleElement.options.lineAlpha = 1;
        this._circleElement.options.fillAlpha = 1;
        this.emit("debounceDraw");
        this.emit("onHover", event);
    };
    IndexedRoundButtonElement.prototype.onOut = function (event) {
        event.stopPropagation();
        this._circleElement.options = this.options;
        this.emit("debounceDraw");
        this.emit("onOut", event);
    };
    IndexedRoundButtonElement.prototype.onRelease = function (event) {
        event.stopPropagation();
        this.emit("button", event);
    };
    Object.defineProperty(IndexedRoundButtonElement.prototype, "text", {
        get: function () {
            return this.data.text;
        },
        set: function (value) {
            this.data.text = value;
            this._textElement.text = this.text;
            this._iconTextMaskElement.textRectangle = this._textElement.getRectangle();
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IndexedRoundButtonElement.prototype, "description", {
        get: function () {
            return this.data.description;
        },
        set: function (value) {
            this.data.description = value;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IndexedRoundButtonElement.prototype, "descriptionFontSize", {
        get: function () {
            return this.data.descriptionFontSize;
        },
        set: function (value) {
            this.data.descriptionFontSize = value;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IndexedRoundButtonElement.prototype, "index", {
        get: function () {
            return this.data.index;
        },
        set: function (value) {
            this.data.index = value;
            this._indexElement.text = this.index;
            this._iconTextMaskElement.indexRectangle = this._indexElement.getRectangle();
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IndexedRoundButtonElement.prototype, "circle", {
        get: function () {
            return this.data.circle || new PIXI.Circle(0, 0, 20);
        },
        set: function (value) {
            this.data.circle = value;
            this._circleElement.circle = this.circle;
            this.emit("debounceDraw");
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IndexedRoundButtonElement.prototype, "options", {
        get: function () {
            return this.data.options || { hasLine: true, lineColor: Design.roundButton.lineColor, lineAlpha: Design.roundButton.lineAlpha, hasFill: true, fillColor: Design.roundButton.fillColor, fillAlpha: Design.roundButton.fillAlpha };
        },
        set: function (value) {
            this.data.options = value;
            this._circleElement.options = this.options;
            this.emit("debounceDraw");
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IndexedRoundButtonElement.prototype, "fontSize", {
        get: function () {
            return this.data.fontSize || Design.roundButton.fontSize;
        },
        set: function (value) {
            this.data.fontSize = value;
            this._textElement.style.fontSize = this.fontSize;
            this._indexElement.style.fontSize = Math.floor(this.fontSize / Design.indexedRoundButton.indexAspect);
            this._iconTextMaskElement.textRectangle = this._textElement.getRectangle();
            this._iconTextMaskElement.indexRectangle = this._indexElement.getRectangle();
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IndexedRoundButtonElement.prototype, "fontColor", {
        get: function () {
            return this.data.fontColor || Design.roundButton.fontColor;
        },
        set: function (value) {
            this.data.fontColor = value;
            this._textElement.style.fill = this.fontColor;
            this._indexElement.style.fill = this.fontColor;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IndexedRoundButtonElement.prototype, "selectInteraction", {
        get: function () {
            return this._selectInteraction;
        },
        set: function (value) {
            this._selectInteraction = value;
        },
        enumerable: false,
        configurable: true
    });
    return IndexedRoundButtonElement;
}(BaseContainer));
export { IndexedRoundButtonElement };
//# sourceMappingURL=IndexedRoundButtonElement.js.map