medsurf-draw/dist/lib/elements/colors/ColorSquareElement.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 ColorSquareElementModel = (function (_super) {
    __extends(ColorSquareElementModel, _super);
    function ColorSquareElementModel() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.squareWidth = 20;
        _this.squareHeight = 20;
        return _this;
    }
    return ColorSquareElementModel;
}(BaseContainerImageModel));
export { ColorSquareElementModel };
var ColorSquareElement = (function (_super) {
    __extends(ColorSquareElement, _super);
    function ColorSquareElement(model) {
        var _this = _super.call(this, model) || this;
        _this.zIndex = Design.colorSquareElement.zIndex;
        _this.moveInteraction = new MedsurfDraw.MoveInteraction(_this);
        _this.moveInteraction.on("startMove", _this.onStartMove, _this);
        _this.moveInteraction.on("onMove", _this.onMove, _this);
        _this.on("mousedown", _this.moveInteraction.startMove, _this.moveInteraction);
        _this.on("pointermove", _this.moveInteraction.onMove, _this.moveInteraction);
        _this.on("mouseup", _this.moveInteraction.endMove, _this.moveInteraction);
        _this.on("pointerout", _this.moveInteraction.endMove, _this.moveInteraction);
        return _this;
    }
    ColorSquareElement.prototype.init = function (parent) {
        this.interactive = true;
        this._canvas = document.createElement("canvas");
        this._canvas.width = Design.colorSquareElement.qualityWidth;
        this._canvas.height = Design.colorSquareElement.qualityHeight;
        var ctx = this._canvas.getContext('2d');
        if (!ctx) {
            throw 'No canvas context created';
        }
        this._canvasContext = ctx;
        this._backgroundElement = new PIXI.Sprite();
        this._backgroundElement.width = this.squareWidth;
        this._backgroundElement.height = this.squareHeight;
        this.addChild(this._backgroundElement);
        this._borderElement = new MedsurfDraw.Rectangle({
            rectangle: new PIXI.Rectangle(0, 0, this.squareWidth, this.squareHeight),
            options: { hasLine: true, lineColor: Design.colorSquareElement.borderLineColor, lineAlpha: Design.colorSquareElement.borderLineAlpha, hasFill: false },
            lineWidth: Design.colorSquareElement.borderLineWidth
        });
        this.addChild(this._borderElement);
        this._pointElement = new MedsurfDraw.Circle({
            circle: new PIXI.Circle(0, 0, Design.colorSquareElement.circleRadius),
            options: { hasLine: true, lineColor: Design.colorSquareElement.lineColor, lineAlpha: Design.colorSquareElement.lineAlpha, hasFill: true, fillColor: Design.colorSquareElement.fillColor, fillAlpha: Design.colorSquareElement.fillAlpha },
            lineWidth: Design.colorSquareElement.lineWidth
        });
        this.addChild(this._pointElement);
        this.createSliderBackground(MedsurfDraw.ColorElement.colorToHSL(this.color).h);
    };
    ColorSquareElement.prototype.draw = function () {
        this._borderElement.draw();
        this._pointElement.draw();
        var hsl = MedsurfDraw.ColorElement.colorToHSL(this.color);
        this._pointElement.position.x = this.squareWidth * hsl.s;
        this._pointElement.position.y = this.squareHeight - (this.squareHeight * hsl.v);
    };
    ColorSquareElement.prototype.destroy = function (options) {
        if (this.moveInteraction) {
            this.off("mousedown", this.moveInteraction.startMove, this.moveInteraction);
            this.off("pointermove", this.moveInteraction.onMove, this.moveInteraction);
            this.off("mouseup", this.moveInteraction.endMove, this.moveInteraction);
            this.off("pointerout", this.moveInteraction.endMove, this.moveInteraction);
            this.moveInteraction.off("startMove", this.onStartMove, this);
            this.moveInteraction.off("onMove", this.onMove, this);
        }
        if (this._backgroundElement) {
            this._backgroundElement.destroy(options);
        }
        if (this._borderElement) {
            this._borderElement.destroy(options);
        }
        if (this._pointElement) {
            this._pointElement.destroy(options);
        }
        _super.prototype.destroy.call(this, options);
    };
    ColorSquareElement.prototype.createSliderBackground = function (hue) {
        this._canvasContext.clearRect(0, 0, Design.colorSquareElement.qualityWidth, Design.colorSquareElement.qualityHeight);
        for (var row = 0; row < Design.colorSquareElement.qualityHeight; row++) {
            var grad = this._canvasContext.createLinearGradient(0, 0, Design.colorSquareElement.qualityWidth, 0);
            grad.addColorStop(0, 'hsl(' + hue + ', 0%, ' + ((Design.colorSquareElement.qualityHeight - row) / Design.colorSquareElement.qualityHeight * 100) + '%)');
            grad.addColorStop(1, 'hsl(' + hue + ', 100%, ' + ((Design.colorSquareElement.qualityHeight / 2 - row / 2) / Design.colorSquareElement.qualityHeight * 100) + '%)');
            this._canvasContext.fillStyle = grad;
            this._canvasContext.fillRect(0, row, Design.colorSquareElement.qualityWidth, 1);
        }
        this._backgroundElement.texture = PIXI.Texture.from(this._canvas);
        this._backgroundElement.texture.update();
    };
    ColorSquareElement.prototype._emitColor = function () {
        var imageData = this._canvasContext.getImageData(this._pointElement.position.x * (Design.colorSquareElement.qualityWidth / this.squareWidth), this._pointElement.position.y * (Design.colorSquareElement.qualityHeight / this.squareHeight), 1, 1);
        this.color = ((imageData.data[0] & 0x0ff) << 16) | ((imageData.data[1] & 0x0ff) << 8) | (imageData.data[2] & 0x0ff);
        this.emit("color", this.color);
    };
    ColorSquareElement.prototype.onStartMove = function (event) {
        var globalPosition = this.getGlobalPosition();
        this._pointElement.position.x = Math.floor(event.data.global.x - globalPosition.x) / this.imageScale.x;
        if (this._pointElement.position.x < 0) {
            this._pointElement.position.x = 0;
        }
        if (this._pointElement.position.x >= this.squareWidth) {
            this._pointElement.position.x = this.squareWidth - 1;
        }
        this._pointElement.position.y = Math.floor(event.data.global.y - globalPosition.y) / this.imageScale.x;
        if (this._pointElement.position.y < 0) {
            this._pointElement.position.y = 0;
        }
        if (this._pointElement.position.y >= this.squareHeight) {
            this._pointElement.position.y = this.squareHeight - 1;
        }
        this._emitColor();
    };
    ColorSquareElement.prototype.onMove = function (event, dX, dY) {
        var scale = this.imageScale;
        this._pointElement.position.x += dX;
        if (this._pointElement.position.x < 0) {
            this._pointElement.position.x = 0;
        }
        if (this._pointElement.position.x >= this.squareWidth) {
            this._pointElement.position.x = this.squareWidth - 1;
        }
        this._pointElement.position.y += dY;
        if (this._pointElement.position.y < 0) {
            this._pointElement.position.y = 0;
        }
        if (this._pointElement.position.y >= this.squareHeight) {
            this._pointElement.position.y = this.squareHeight - 1;
        }
        this._emitColor();
    };
    Object.defineProperty(ColorSquareElement.prototype, "color", {
        get: function () {
            return this.data.color;
        },
        set: function (value) {
            this.data.color = value;
            this.createSliderBackground(MedsurfDraw.ColorElement.colorToHSL(this.color).h);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(ColorSquareElement.prototype, "squareWidth", {
        get: function () {
            return this.data.squareWidth;
        },
        set: function (value) {
            this.data.squareWidth = value;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(ColorSquareElement.prototype, "squareHeight", {
        get: function () {
            return this.data.squareHeight;
        },
        set: function (value) {
            this.data.squareHeight = value;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(ColorSquareElement.prototype, "moveInteraction", {
        get: function () {
            return this._moveInteraction;
        },
        set: function (value) {
            this._moveInteraction = value;
        },
        enumerable: false,
        configurable: true
    });
    return ColorSquareElement;
}(BaseContainer));
export { ColorSquareElement };
//# sourceMappingURL=ColorSquareElement.js.map