medsurf-draw/dist/lib/elements/rotatings/RotateScaleElement.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";
import { BaseGraphics, BaseGraphicsImageModel } from "../../bases/elements/BaseGraphics";
var DegreeElementModel = (function (_super) {
    __extends(DegreeElementModel, _super);
    function DegreeElementModel() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.options = { hasLine: true, lineColor: 0xFFFFFF, lineAlpha: 1, hasFill: false };
        _this.lineWidth = 1;
        return _this;
    }
    return DegreeElementModel;
}(BaseGraphicsImageModel));
export { DegreeElementModel };
var RotateScaleElementModel = (function (_super) {
    __extends(RotateScaleElementModel, _super);
    function RotateScaleElementModel() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    return RotateScaleElementModel;
}(BaseContainerImageModel));
export { RotateScaleElementModel };
var RotateScaleElement = (function (_super) {
    __extends(RotateScaleElement, _super);
    function RotateScaleElement(model) {
        var _this = _super.call(this, model) || this;
        _this.zIndex = Design.rotateScale.zIndex;
        return _this;
    }
    RotateScaleElement.prototype.init = function () {
        this._degreeGraphicElement = new BaseGraphics({
            image: this.image,
            rectangle: this.rotateElement.rectangle,
            options: { hasLine: true, lineColor: 0xFFFFAA, lineAlpha: 1, hasFill: false },
            lineWidth: 15
        });
        this.addChild(this._degreeGraphicElement);
        this._degreeTextElement = new MedsurfDraw.Text({
            text: this._formatDegree(),
            style: new PIXI.TextStyle({
                fill: Design.rotateScale.textColor,
                fontSize: Design.rotateScale.textFontSize,
            })
        });
        this._degreeTextElement.anchor.set(1, 1);
        this.addChild(this._degreeTextElement);
        this.rotateElement.rotateInteraction.on("onRotate", this.onRotate, this);
        this.sortChildren();
        this.emit("debounceDraw");
    };
    RotateScaleElement.prototype.draw = function () {
        var scale = this.imageScale.x * Design.rotateScale.scaleAspect;
        if (scale > 1) {
            scale = 1;
        }
        var lineWidth = Design.rotateScale.lineWidth / scale;
        var lineLength = Design.rotateScale.lineLength / scale;
        var radius = this.rotateElement.rectangle.y - this.rotateElement.rectangle.height / 2 - Design.rotate.rotationDY;
        this._degreeGraphicElement.clear();
        this._degreeGraphicElement.lineStyle(lineWidth, Design.rotateScale.lineColor, Design.rotateScale.lineAlpha);
        this._degreeGraphicElement.beginFill(Design.rotateScale.fillColor, Design.rotateScale.fillAlpha);
        this._degreeGraphicElement.drawCircle(0, 0, Math.abs(radius));
        this._degreeGraphicElement.endFill();
        this._degreeGraphicElement.lineStyle(lineWidth, Design.rotateScale.lineColor, Design.rotateScale.lineAlpha);
        this._degreeGraphicElement.moveTo(0, radius);
        this._degreeGraphicElement.lineTo(0, radius + lineLength);
        this._degreeGraphicElement.endFill();
        this._degreeGraphicElement.lineStyle(lineWidth, Design.rotateScale.lineColor, Design.rotateScale.lineAlpha);
        this._degreeGraphicElement.moveTo(-radius * Math.cos(45 * Math.PI / 180), radius * Math.cos(45 * Math.PI / 180));
        this._degreeGraphicElement.lineTo((-radius - lineLength / 2) * Math.cos(45 * Math.PI / 180), (radius + lineLength / 2) * Math.cos(45 * Math.PI / 180));
        this._degreeGraphicElement.endFill();
        this._degreeGraphicElement.lineStyle(lineWidth, Design.rotateScale.lineColor, Design.rotateScale.lineAlpha);
        this._degreeGraphicElement.moveTo(-radius, 0);
        this._degreeGraphicElement.lineTo(-radius - lineLength, 0);
        this._degreeGraphicElement.endFill();
        this._degreeGraphicElement.lineStyle(lineWidth, Design.rotateScale.lineColor, Design.rotateScale.lineAlpha);
        this._degreeGraphicElement.moveTo(radius * Math.cos(135 * Math.PI / 180), radius * Math.cos(135 * Math.PI / 180));
        this._degreeGraphicElement.lineTo((radius + lineLength / 2) * Math.cos(135 * Math.PI / 180), (radius + lineLength / 2) * Math.cos(135 * Math.PI / 180));
        this._degreeGraphicElement.endFill();
        this._degreeGraphicElement.lineStyle(lineWidth, Design.rotateScale.lineColor, Design.rotateScale.lineAlpha);
        this._degreeGraphicElement.moveTo(0, -radius);
        this._degreeGraphicElement.lineTo(0, -radius - lineLength);
        this._degreeGraphicElement.endFill();
        this._degreeGraphicElement.lineStyle(lineWidth, Design.rotateScale.lineColor, Design.rotateScale.lineAlpha);
        this._degreeGraphicElement.moveTo(radius * Math.cos(45 * Math.PI / 180), -radius * Math.cos(45 * Math.PI / 180));
        this._degreeGraphicElement.lineTo((radius + lineLength / 2) * Math.cos(45 * Math.PI / 180), (-radius - lineLength / 2) * Math.cos(45 * Math.PI / 180));
        this._degreeGraphicElement.endFill();
        this._degreeGraphicElement.lineStyle(lineWidth, Design.rotateScale.lineColor, Design.rotateScale.lineAlpha);
        this._degreeGraphicElement.moveTo(radius, 0);
        this._degreeGraphicElement.lineTo(radius + lineLength, 0);
        this._degreeGraphicElement.endFill();
        this._degreeGraphicElement.lineStyle(lineWidth, Design.rotateScale.lineColor, Design.rotateScale.lineAlpha);
        this._degreeGraphicElement.moveTo(-radius * Math.cos(135 * Math.PI / 180), -radius * Math.cos(135 * Math.PI / 180));
        this._degreeGraphicElement.lineTo((-radius - lineLength / 2) * Math.cos(135 * Math.PI / 180), (-radius - lineLength / 2) * Math.cos(135 * Math.PI / 180));
        this._degreeGraphicElement.endFill();
        this._degreeTextElement.text = this._formatDegree();
        this._degreeTextElement.position.set(radius, radius);
        this._degreeTextElement.style.fontSize = Design.rotateScale.textFontSize / scale;
    };
    RotateScaleElement.prototype.destroy = function (options) {
        if (this._degreeGraphicElement) {
            this._degreeGraphicElement.destroy(options);
        }
        if (this._degreeTextElement) {
            this._degreeTextElement.destroy(options);
        }
        this.rotateElement.rotateInteraction.off("onRotate", this.onRotate, this);
        _super.prototype.destroy.call(this, options);
    };
    RotateScaleElement.prototype._formatDegree = function () {
        var rotation = (Math.round((this.rotateElement.rotation / Math.PI * 180))) % 360;
        if (rotation < 0) {
            rotation = 360 + rotation;
        }
        return rotation + "°";
    };
    RotateScaleElement.prototype.onRotate = function (degree) {
        this._degreeTextElement.text = this._formatDegree();
    };
    RotateScaleElement.prototype.onImageZoom = function (scaleX, scaleY) {
        this.emit("debounceDraw");
    };
    Object.defineProperty(RotateScaleElement.prototype, "rotateElement", {
        get: function () {
            return this.data.rotateElement;
        },
        set: function (value) {
            this.data.rotateElement = value;
        },
        enumerable: false,
        configurable: true
    });
    return RotateScaleElement;
}(BaseContainer));
export { RotateScaleElement };
//# sourceMappingURL=RotateScaleElement.js.map