medsurf-draw/dist/lib/elements/colors/ColorPaletteElement.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 ColorPaletteElementModel = (function (_super) {
    __extends(ColorPaletteElementModel, _super);
    function ColorPaletteElementModel() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    return ColorPaletteElementModel;
}(BaseContainerImageModel));
export { ColorPaletteElementModel };
var ColorPaletteElement = (function (_super) {
    __extends(ColorPaletteElement, _super);
    function ColorPaletteElement(model) {
        var _this = _super.call(this, model) || this;
        _this._selectionPalette = [];
        if (_this.localStorageKey && window.localStorage) {
            try {
                _this._selectionPalette = window.localStorage[_this.localStorageKey].split(";");
            }
            catch (e) { }
        }
        _this.zIndex = Design.colorPaletteElement.zIndex;
        return _this;
    }
    ColorPaletteElement.prototype.init = function (parent) {
        var _this = this;
        var dY = 0;
        this._presetButtons = [];
        Design.colorPaletteElement.presetColors.forEach(function (color) {
            var colorButtonElement = new MedsurfDraw.ColorButtonElement({
                image: _this.image,
                description: _this.description,
                descriptionFontSize: _this.descriptionFontSize,
                loader: _this.loader,
                hasFill: true,
                color: color,
                colorAlpha: 1,
                rectangle: new PIXI.Rectangle(0, 0, Design.colorPaletteElement.buttonWidth, Design.colorPaletteElement.buttonWidth),
            });
            colorButtonElement.on("button", _this.onColor, _this);
            _this.addChild(colorButtonElement);
            var length = _this._presetButtons.length;
            if (length !== 0 && length % 5 === 0) {
                dY++;
            }
            else if (length > 0) {
                var position = _this._presetButtons[length - 1].position;
                colorButtonElement.position.x += position.x + Design.colorPaletteElement.buttonWidth + Design.colorPaletteElement.buttonCap;
            }
            colorButtonElement.position.y = dY * Design.colorPaletteElement.buttonWidth + dY * Design.colorPaletteElement.buttonCap;
            _this._presetButtons.push(colorButtonElement);
        });
        this._storedButtons = [];
        this._selectionPalette.forEach(function (selection) {
            _this._createButton(selection);
        });
    };
    ColorPaletteElement.prototype.draw = function () {
    };
    ColorPaletteElement.prototype.destroy = function (options) {
        var _this = this;
        this._presetButtons.forEach(function (button) {
            button.off("button", _this.onColor, _this);
            button.destroy(options);
        });
        this._storedButtons.forEach(function (button) {
            button.off("button", _this.onColor, _this);
            button.destroy(options);
        });
        _super.prototype.destroy.call(this, options);
    };
    ColorPaletteElement.prototype.saveColor = function (color, colorAlpha) {
        var _this = this;
        if (color !== undefined && colorAlpha !== undefined) {
            var selection = ((color >> 16) & 0x0ff) + ',' + ((color >> 8) & 0x0ff) + ',' + ((color) & 0x0ff) + ',' + colorAlpha;
            if (this._selectionPalette.indexOf(selection) === -1 && !(Design.colorPaletteElement.presetColors.indexOf(color) > 0 && colorAlpha === 1)) {
                this._selectionPalette.push(selection);
                this._createButton(selection);
            }
        }
        if (this._selectionPalette.length > Design.colorPaletteElement.maxStoredValues) {
            this._storedButtons.forEach(function (button) {
                _this.removeChild(button);
                button.destroy();
            });
            this._storedButtons = [];
            this._selectionPalette.shift();
            this._selectionPalette.forEach(function (selection) {
                _this._createButton(selection);
            });
        }
        window.localStorage[this.localStorageKey] = this._selectionPalette.join(";");
    };
    ColorPaletteElement.prototype._createButton = function (selection) {
        var parts = selection.split(',');
        if (parts.length !== 4) {
            return;
        }
        var color = ((parseInt(parts[0]) & 0x0ff) << 16) | ((parseInt(parts[1]) & 0x0ff) << 8) | (parseInt(parts[2]) & 0x0ff);
        var colorAlpha = parseFloat(parts[3]);
        var colorButtonElement = new MedsurfDraw.ColorButtonElement({
            image: this.image,
            description: this.description,
            descriptionFontSize: this.descriptionFontSize,
            loader: this.loader,
            hasFill: true,
            color: color,
            colorAlpha: colorAlpha,
            rectangle: new PIXI.Rectangle(0, 0, Design.colorPaletteElement.buttonWidth, Design.colorPaletteElement.buttonWidth),
        });
        colorButtonElement.name = "selection";
        colorButtonElement.on("button", this.onColor, this);
        this.addChild(colorButtonElement);
        var length = this._storedButtons.length;
        var dY = Math.floor(length / 5) + 3;
        if (length > 0 && length % 5 !== 0) {
            var position = this._storedButtons[length - 1].position;
            colorButtonElement.position.x += position.x + Design.colorPaletteElement.buttonWidth + Design.colorPaletteElement.buttonCap;
        }
        colorButtonElement.position.y = dY * Design.colorPaletteElement.buttonWidth + dY * Design.colorPaletteElement.buttonCap;
        this._storedButtons.push(colorButtonElement);
    };
    ColorPaletteElement.prototype.onColor = function (event, color, colorAlpha) {
        this.emit("color", color, colorAlpha);
    };
    Object.defineProperty(ColorPaletteElement.prototype, "description", {
        get: function () {
            return this.data.description;
        },
        set: function (value) {
            this.data.description = value;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(ColorPaletteElement.prototype, "descriptionFontSize", {
        get: function () {
            return this.data.descriptionFontSize;
        },
        set: function (value) {
            this.data.descriptionFontSize = value;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(ColorPaletteElement.prototype, "loader", {
        get: function () {
            return this.image.loader;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(ColorPaletteElement.prototype, "localStorageKey", {
        get: function () {
            return this.data.localStorageKey;
        },
        set: function (value) {
            this.data.localStorageKey = value;
        },
        enumerable: false,
        configurable: true
    });
    return ColorPaletteElement;
}(BaseContainer));
export { ColorPaletteElement };
//# sourceMappingURL=ColorPaletteElement.js.map