medsurf-draw/dist/lib/elements/legends/LegendColumn.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 * as Models from '@ascii-dev-user/medsurf-lib/models';
import { v4 as uuidv4 } from 'uuid';
import { Design } from "../../config/design";
import { BaseElementContainer } from "../../bases/elements/BaseElementContainer";
import { debounce } from "debounce";
var LegendColumn = (function (_super) {
    __extends(LegendColumn, _super);
    function LegendColumn(image, model) {
        var _this = _super.call(this, { image: image, model: model }) || this;
        _this.legendRows = [];
        _this.zIndex = Design.legendColumn.zIndex;
        _this.modeInteraction.on('select_legend', _this._modeSelectLegend, _this);
        _this.modeInteraction.on("remove-select_legend", _this._removeModeSelectLegend, _this);
        _this.modeInteraction.on('select_item', _this._modeSelectItem, _this);
        _this.modeInteraction.on("remove-select_item", _this._removeModeSelectItem, _this);
        _this.modeInteraction.on('select_child', _this._modeSelectChild, _this);
        _this.modeInteraction.on("remove-select_child", _this._removeModeSelectChild, _this);
        _this.modeInteraction.on('blocked_item', _this._modeBlockedItem, _this);
        _this.modeInteraction.on("remove-blocked_item", _this._removeModeBlockedItem, _this);
        _this._debounceControlSelectItemMethod = debounce(_this.controlSelectItem.bind(_this), 10).bind(_this);
        _this.on("added", function () {
            _this.on("debounceControlSelectItem", _this._debounceControlSelectItemMethod);
        });
        _this.on("removed", function () {
            _this.off("debounceControlSelectItem", _this._debounceControlSelectItemMethod);
        });
        return _this;
    }
    LegendColumn.prototype.init = function () {
        var imageWidth = this.imageDimensions.width;
        for (var row = 0; row < this.model.rows.length; row++) {
            var legendRow = new MedsurfDraw.LegendRow(this.image, this.model.rows[row]);
            this.addChild(legendRow);
            this.legendRows.push(legendRow);
        }
        this._editButtonElement = new MedsurfDraw.RoundButtonElement({
            image: this.image,
            text: '\uf3f0',
            description: 'Bearbeiten',
            descriptionFontSize: Design.subMenu.descriptionFontSize,
            circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
            fontSize: Design.subMenu.fontSize,
            fontColor: Design.subMenu.fontColor
        });
        this._editButtonElement.on("onHover", this.collapseAllMenus, this);
        this._editButtonElement.on("button", this.onButtonEdit, this);
        this.imageObjectMenu.push({
            element: this._editButtonElement,
            order: 0,
        });
        this._moveToBackButtonElement = new MedsurfDraw.RoundButtonElement({
            image: this.image,
            text: '\uf87f',
            description: 'Nach Hinten\nverschieben',
            descriptionFontSize: Design.subMenu.descriptionFontSize,
            circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
            fontSize: Design.subMenu.fontSize,
            fontColor: Design.subMenu.fontColor
        });
        this._moveToBackButtonElement.on("button", this.onButtonMoveToBack, this);
        this._moveToFrontButtonElement = new MedsurfDraw.RoundSubMenuElement({
            image: this.image,
            text: '\uf856',
            description: 'Nach Vorne\nverschieben',
            descriptionFontSize: Design.subMenu.descriptionFontSize,
            menuElements: [
                {
                    element: this._moveToBackButtonElement,
                    order: 0,
                }
            ],
            circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius)
        });
        this._moveToFrontButtonElement.on("onHover", this._moveToFrontButtonElement.showMenu, this._moveToFrontButtonElement);
        this._moveToFrontButtonElement.on("button", this.onButtonMoveToFront, this);
        this.imageObjectMenu.push({
            element: this._moveToFrontButtonElement,
            order: 7,
        });
        this._deleteButtonElement = new MedsurfDraw.RoundButtonElement({
            image: this.image,
            text: '\uf1f8',
            description: 'Löschen',
            descriptionFontSize: 6,
            circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
            fontSize: Design.subMenu.fontSize,
            fontColor: Design.subMenu.fontColor
        });
        this._deleteButtonElement.on("onHover", this.collapseAllMenus, this);
        this._deleteButtonElement.on("button", this.onButtonDelete, this);
        this.imageObjectMenu.push({
            element: this._deleteButtonElement,
            order: 6,
        });
        this._degroupButtonElement = new MedsurfDraw.RoundButtonElement({
            image: this.image,
            text: '\uf248',
            description: 'Aus Gruppe\nentfernen',
            descriptionFontSize: 6,
            circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
            fontSize: Design.subMenu.fontSize,
            fontColor: Design.subMenu.fontColor
        });
        this._degroupButtonElement.on("onHover", this.collapseAllMenus, this);
        this._degroupButtonElement.on("button", this.onButtonDegroup, this);
        this.imageObjectMenu.push({
            element: this._degroupButtonElement,
            order: 4,
        });
        this._duplicateButtonElement = new MedsurfDraw.RoundButtonElement({
            image: this.image,
            text: '\uf24d',
            description: 'Duplizieren',
            descriptionFontSize: 6,
            circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
            fontSize: Design.subMenu.fontSize,
            fontColor: Design.subMenu.fontColor
        });
        this._duplicateButtonElement.on("onHover", this.collapseAllMenus, this);
        this._duplicateButtonElement.on("button", this.onButtonDuplicate, this);
        this.imageObjectMenu.push({
            element: this._duplicateButtonElement,
            order: 2,
        });
        this._clipboardButtonElement = new MedsurfDraw.RoundButtonElement({
            image: this.image,
            text: '\uf0c5',
            description: 'Kopieren',
            descriptionFontSize: 6,
            circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
            fontSize: Design.subMenu.fontSize,
            fontColor: Design.subMenu.fontColor
        });
        this._clipboardButtonElement.on("onHover", this.collapseAllMenus, this);
        this._clipboardButtonElement.on("button", this.onButtonClipboard, this);
        this.imageObjectMenu.push({
            element: this._clipboardButtonElement,
            order: 1,
        });
    };
    LegendColumn.prototype.draw = function () {
        for (var _i = 0, _a = this.legendRows; _i < _a.length; _i++) {
            var legendRow = _a[_i];
            legendRow.draw();
        }
    };
    LegendColumn.prototype.destroy = function (options) {
        for (var _i = 0, _a = this.legendRows; _i < _a.length; _i++) {
            var legendRow = _a[_i];
            legendRow.destroy(options);
        }
        if (this._editButtonElement) {
            this._editButtonElement.destroy(options);
        }
        if (this._moveToBackButtonElement) {
            this._moveToBackButtonElement.destroy(options);
        }
        if (this._moveToFrontButtonElement) {
            this._moveToFrontButtonElement.destroy(options);
        }
        if (this._deleteButtonElement) {
            this._deleteButtonElement.destroy(options);
        }
        if (this._degroupButtonElement) {
            this._degroupButtonElement.destroy(options);
        }
        if (this._duplicateButtonElement) {
            this._duplicateButtonElement.destroy(options);
        }
        if (this._clipboardButtonElement) {
            this._clipboardButtonElement.destroy(options);
        }
        _super.prototype.destroy.call(this, options);
    };
    LegendColumn.getInstance = function (image, model) {
        return new LegendColumn(image, {
            dirty: true,
            id: uuidv4(),
            type: Models.ImageObjectType.LEGENDCOLUMN,
            isStatic: false,
            zIndex: 0,
            table: model,
            rows: []
        });
    };
    LegendColumn.prototype.addLegendRow = function (model) {
        var imageWidth = this.image.imageDimensions.width;
        var legendRow = MedsurfDraw.LegendRow.getInstance(this.image, model, imageWidth);
        this.addChild(legendRow);
        this.legendRows.push(legendRow);
        this.parent.draw();
        this.model.rows.push(legendRow.model);
        this.image.updateLegendColumn(this.model);
        legendRow.controlSelectItem();
    };
    LegendColumn.prototype.removeLegendRow = function (model) {
        var legendRowIndex = this.legendRows.findIndex(function (lr) { return lr.model.id === model.id; });
        var legendRow = this.legendRows[legendRowIndex];
        if (!legendRow) {
            return;
        }
        this.removeChild(legendRow);
        this.legendRows.splice(legendRowIndex, 1);
        this.parent.draw();
        this.model.rows.splice(legendRowIndex, 1);
        this.image.updateLegendColumn(this.model);
    };
    LegendColumn.prototype._modeSelectLegend = function () {
        this.interactive = true;
        this.on("pointerover", this.onHover, this);
        this.on("pointerout", this.onOut, this);
        this.on("mousedown", this.onPointerDown, this);
        this.on("mouseup", this.onSelectStart, this);
        this.showItem();
    };
    LegendColumn.prototype._removeModeSelectLegend = function () {
        this.interactive = false;
        this.off("pointerover", this.onHover, this);
        this.off("pointerout", this.onOut, this);
        this.off("mousedown", this.onPointerDown, this);
        this.off("mouseup", this.onSelectStart, this);
    };
    LegendColumn.prototype._modeSelectItem = function () {
        this.onOut();
        this.interactive = true;
        this.image.controlUpdateElements();
        this.showItem();
        this.emit("pointerover", new PIXI.InteractionEvent());
    };
    LegendColumn.prototype._removeModeSelectItem = function (parent, mode) {
        this.collapseAllMenus(new PIXI.InteractionEvent());
        if (mode !== 'select_child' && !mode.startsWith('select_item')) {
            this.parent.emit("debounceControlSelectItem");
        }
    };
    LegendColumn.prototype._modeSelectChild = function () {
    };
    LegendColumn.prototype._removeModeSelectChild = function () {
    };
    LegendColumn.prototype._modeBlockedItem = function () {
        var blockedFilter = new PIXI.filters.ColorMatrixFilter();
        blockedFilter.greyscale(0, true);
        this.filters = [blockedFilter];
    };
    LegendColumn.prototype._removeModeBlockedItem = function () {
        this.filters = [];
    };
    LegendColumn.prototype.collapseAllMenus = function (event) {
        this._moveToFrontButtonElement.toggleMenu(event, false);
    };
    LegendColumn.prototype.onButtonEdit = function () {
        this.collapseAllMenus(new PIXI.InteractionEvent());
        this.image.controlHideMenu();
        this.image.editLegendColumn(this.model, this.parent.model);
    };
    LegendColumn.prototype.onButtonMoveToFront = function () {
        this.model.zIndex++;
        this.zIndex = this.model.zIndex;
        this.image.sortChildren();
        this.image.updateLegendColumn(this.model);
    };
    LegendColumn.prototype.onButtonMoveToBack = function () {
        this.model.zIndex--;
        this.zIndex = this.model.zIndex;
        this.image.sortChildren();
        this.image.updateLegendColumn(this.model);
    };
    LegendColumn.prototype.onButtonDelete = function (event) {
        var _this = this;
        this.collapseAllMenus(new PIXI.InteractionEvent());
        this.image.controlHideMenu();
        setTimeout(function () {
            _this.parent.removeLegendColumn(_this.model);
        }, 300);
    };
    LegendColumn.prototype.onButtonDegroup = function (unselectElement) {
        if (unselectElement === void 0) { unselectElement = true; }
        this.collapseAllMenus(new PIXI.InteractionEvent());
        this.image.controlHideMenu();
        this.parent.onButtonDegroup(unselectElement);
    };
    LegendColumn.prototype.onButtonDuplicate = function () {
        this.collapseAllMenus(new PIXI.InteractionEvent());
        this.image.controlHideMenu();
        this.parent.onButtonDuplicate();
    };
    LegendColumn.prototype.onButtonClipboard = function () {
        this.collapseAllMenus(new PIXI.InteractionEvent());
        this.parent.onButtonClipboard();
    };
    LegendColumn.prototype.onButtonAddLegendRow = function () {
        this.addLegendRow(this.model);
    };
    LegendColumn.prototype.controlSelectItem = function () {
        this.image.selectLegendColumn(this.model, this.parent.model);
        this.externControlSelectItem();
    };
    LegendColumn.prototype.externControlSelectItem = function () {
        var _this = this;
        this.image.getImageObjects()
            .filter(function (imageObject) { return imageObject !== _this.parent; })
            .forEach(function (imageObject) {
            imageObject.modeInteraction.setMode('blocked_item');
        });
        this.parent.modeInteraction.setModeItem('select_child');
        this.parent.children
            .filter(function (imageObject) { return imageObject !== _this; })
            .forEach(function (imageObject) {
            imageObject.modeInteraction.setMode('blocked_item');
        });
        this.modeInteraction.setModeChildren('select_column');
        this.modeInteraction.setModeItem('select_item');
    };
    LegendColumn.prototype.onHover = function () {
        this.legendRows.forEach(function (legendRow) {
            legendRow.onHover();
        });
    };
    LegendColumn.prototype.onOut = function () {
        this.legendRows.forEach(function (legendRow) {
            legendRow.onOut();
        });
    };
    LegendColumn.prototype.onPointerDown = function (event, preventSelectItem) {
        if (preventSelectItem === void 0) { preventSelectItem = false; }
        event.stopPropagation();
    };
    LegendColumn.prototype.onSelectStart = function (event, preventSelectItem) {
        if (preventSelectItem === void 0) { preventSelectItem = false; }
        event.stopPropagation();
        var lastMode = this.modeInteraction.lastMode;
        if (lastMode === 'select_legend') {
            this.controlSelectItem();
        }
    };
    LegendColumn.prototype.getRectangle = function () {
        var rect = _super.prototype.getRectangle.call(this);
        var position = this.parent.position;
        return new PIXI.Rectangle(position.x + rect.x, position.y + rect.y, rect.width, rect.height);
    };
    return LegendColumn;
}(BaseElementContainer));
export { LegendColumn };
//# sourceMappingURL=LegendColumn.js.map