medsurf-draw
Version:
Draw annotations on jpg/zoomify images, based on PIXI.js
486 lines • 21.2 kB
JavaScript
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, ColorMode, NumberMode } from "../../bases/elements/BaseElementContainer";
import { debounce } from "debounce";
var LegendRow = (function (_super) {
__extends(LegendRow, _super);
function LegendRow(image, model) {
var _this = _super.call(this, { image: image, model: model }) || this;
_this.modeInteraction.on('default', _this._modeDefault, _this);
_this.modeInteraction.on("marker", _this._modeDefault, _this);
_this.modeInteraction.on("selftest", _this._modeSelftest, _this);
_this.modeInteraction.on("author", _this._modeDefault, _this);
_this.modeInteraction.on('select_column', _this._modeSelectColumn, _this);
_this.modeInteraction.on("remove-select_column", _this._removeModeSelectColumn, _this);
_this.modeInteraction.on('select_item', _this._modeSelectItem, _this);
_this.modeInteraction.on("remove-select_item", _this._removeModeSelectItem, _this);
_this.modeInteraction.on('blocked_item', _this._modeBlockedItem, _this);
_this.modeInteraction.on("remove-blocked_item", _this._removeModeBlockedItem, _this);
_this.modeInteraction.on('choose_select', _this._modeChooseSelect, _this);
_this.modeInteraction.on('remove-choose_select', _this._removeModeChooseSelect, _this);
_this.modeInteraction.on('choose_unselect', _this._modeChooseUnselect, _this);
_this.modeInteraction.on('remove-choose_unselect', _this._removeModeChooseUnselect, _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;
}
LegendRow.prototype.init = function () {
var style = this._getCorrectStyle();
this._indexElement = new MedsurfDraw.Text({
text: "",
style: style
});
this.addChild(this._indexElement);
this._textElement = new MedsurfDraw.Text({
text: this.model.text,
style: style
});
this._textElement.style.breakWords = true;
this._textElement.style.wordWrap = true;
this._textElement.position.x += Design.legendRow.enumerationPadding;
this.addChild(this._textElement);
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,
});
};
LegendRow.prototype.draw = function () {
};
LegendRow.prototype.destroy = function (options) {
this._indexElement.destroy(options);
this._textElement.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);
};
LegendRow.getInstance = function (image, model, imageWidth) {
return new LegendRow(image, {
dirty: true,
id: uuidv4(),
type: Models.ImageObjectType.LEGENDROW,
isStatic: false,
zIndex: 0,
col: model,
text: "Neue Reihe",
style: {
fontSize: 12 / imageWidth,
fill: 0xffffff,
align: 'left',
breakWords: true,
fontFamily: 'proxima_nova_altsemibold'
},
});
};
LegendRow.prototype.setPositionX = function (x) {
this._indexElement.position.x = x;
this._textElement.position.x = x + Design.legendRow.enumerationPadding;
};
LegendRow.prototype.setPositionY = function (y) {
this._indexElement.position.y = y;
this._textElement.position.y = y;
};
LegendRow.prototype.setWordWrapWidth = function (width) {
this._textElement.style.wordWrapWidth = width - Design.legendRow.enumerationPadding;
};
LegendRow.prototype.editNewText = function () {
this._textElement.text = '';
this.editText();
};
LegendRow.prototype.editText = function () {
this.controlSelectItem();
this.modeInteraction.setModeItem("select_child");
this._textElement.modeInteraction.setMode("select_item");
};
LegendRow.prototype._getCorrectStyle = function () {
var imageWidth = this.imageDimensions.width;
var fontSize = 1;
if (this.model.style.fontSize) {
if (typeof this.model.style.fontSize === 'string') {
fontSize = parseFloat(this.model.style.fontSize);
}
else {
fontSize = this.model.style.fontSize;
}
fontSize *= imageWidth;
}
return new PIXI.TextStyle({
align: this.model.style.align,
fontSize: fontSize,
fill: this.model.style.fill,
fontFamily: this.model.style.fontFamily,
breakWords: this.model.style.breakWords,
});
};
LegendRow.prototype._modeDefault = function () {
this._textElement.onImageZoom(this.imageScale.x, this.imageScale.y);
this.showItem();
};
LegendRow.prototype._modeSelftest = function () {
var postition = this.parent.parent.getSelftestPosition();
this.setPositionX(postition.x);
this.setPositionY(postition.y);
this.hideItem();
};
LegendRow.prototype._modeSelectColumn = 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();
};
LegendRow.prototype._removeModeSelectColumn = 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);
};
LegendRow.prototype._modeSelectItem = function () {
this.onOut();
this.interactive = true;
this.image.controlUpdateElements();
this.showItem();
this.emit("pointerover", new PIXI.InteractionEvent());
};
LegendRow.prototype._removeModeSelectItem = function (parent, mode) {
this.collapseAllMenus(new PIXI.InteractionEvent());
if (!mode.startsWith('select_parent') && mode !== 'select_child' && !mode.startsWith('select_item')
&& !mode.startsWith('choose_select') && !mode.startsWith('choose_parent') && !mode.startsWith('blocked_item')) {
this.parent.emit("debounceControlSelectItem");
}
};
LegendRow.prototype._modeBlockedItem = function () {
this._indexElement.alpha = Design.blocked.fillAlpha;
this._textElement.alpha = Design.blocked.fillAlpha;
};
LegendRow.prototype._removeModeBlockedItem = function () {
this._indexElement.alpha = 1;
this._textElement.alpha = 1;
};
LegendRow.prototype._modeChooseSelect = function () {
this.interactive = true;
this.cursor = "select";
this._indexElement.style.fill = Design.selftest.lineColorSelect;
this._textElement.style.fill = Design.selftest.lineColorSelect;
this.emit("debounceDraw");
};
LegendRow.prototype._removeModeChooseSelect = function () {
var imageWidth = this.imageDimensions.width;
var style = Object.assign({}, this.model.style);
if (style.fontSize) {
if (typeof style.fontSize === 'string') {
style.fontSize = parseFloat(style.fontSize);
}
style.fontSize *= imageWidth;
}
this.interactive = false;
this._indexElement.style = new PIXI.TextStyle(style);
this._textElement.style = new PIXI.TextStyle(style);
this.emit("debounceDraw");
};
LegendRow.prototype._modeChooseUnselect = function () {
this.interactive = true;
this.cursor = "select";
this._indexElement.style.fill = Design.selftest.lineColorUnselect;
this._textElement.style.fill = Design.selftest.lineColorUnselect;
this.emit("debounceDraw");
};
LegendRow.prototype._removeModeChooseUnselect = function () {
var imageWidth = this.imageDimensions.width;
var style = Object.assign({}, this.model.style);
if (style.fontSize) {
if (typeof style.fontSize === 'string') {
style.fontSize = parseFloat(style.fontSize);
}
style.fontSize *= imageWidth;
}
this.interactive = false;
this._indexElement.style = new PIXI.TextStyle(style);
this._textElement.style = new PIXI.TextStyle(style);
this.emit("debounceDraw");
};
LegendRow.prototype.collapseAllMenus = function (event) {
this._moveToFrontButtonElement.toggleMenu(event, false);
};
LegendRow.prototype.onButtonEdit = function () {
this.collapseAllMenus(new PIXI.InteractionEvent());
this.image.controlHideMenu();
this.image.editLegendRow(this.model, this.parent.model, this.parent.parent.model);
};
LegendRow.prototype.onButtonMoveToFront = function () {
this.model.zIndex++;
this.zIndex = this.model.zIndex;
this.image.sortChildren();
this.image.updateLegendRow(this.model);
};
LegendRow.prototype.onButtonMoveToBack = function () {
this.model.zIndex--;
this.zIndex = this.model.zIndex;
this.image.sortChildren();
this.image.updateLegendRow(this.model);
};
LegendRow.prototype.onButtonDelete = function (event) {
var _this = this;
this.collapseAllMenus(new PIXI.InteractionEvent());
this.image.controlHideMenu();
setTimeout(function () {
_this.parent.removeLegendRow(_this.model);
}, 300);
};
LegendRow.prototype.onButtonDegroup = function (unselectElement) {
if (unselectElement === void 0) { unselectElement = true; }
this.collapseAllMenus(new PIXI.InteractionEvent());
this.image.controlHideMenu();
this.parent.onButtonDegroup(unselectElement);
};
LegendRow.prototype.onButtonDuplicate = function () {
this.collapseAllMenus(new PIXI.InteractionEvent());
this.image.controlHideMenu();
this.parent.onButtonDuplicate();
};
LegendRow.prototype.onButtonClipboard = function () {
this.collapseAllMenus(new PIXI.InteractionEvent());
this.image.controlHideMenu();
this.parent.onButtonClipboard();
};
LegendRow.prototype.onColor = function (mode, has, color, colorAlpha) {
if (!color) {
return;
}
if (mode === ColorMode.TEXT) {
this.model.style.fill = color;
this._textElement.style.fill = color;
this.emit("debounceDraw");
this.image.updateLegendRow(this.model);
}
};
LegendRow.prototype.onNumber = function (mode, number) {
if (mode === NumberMode.SIZE) {
number = Math.round(number);
this.model.style.fontSize = number / this.imageDimensions.width;
this._textElement.style.fontSize = number;
this.emit("debounceDraw");
this.emit("onBackgroundNumber");
this.image.updateLegendRow(this.model);
}
};
LegendRow.prototype.onButtonStatic = function (override) {
this.model.isStatic = override || !this.model.isStatic;
this.emit("debounceDraw");
this.image.updateLegendRow(this.model);
};
LegendRow.prototype.controlSelectItem = function () {
this.image.selectLegendRow(this.model, this.parent.model, this.parent.parent.model);
this.externControlSelectItem();
};
LegendRow.prototype.externControlSelectItem = function () {
var _this = this;
this.image.getImageObjects()
.filter(function (imageObject) { return imageObject !== _this.parent.parent; })
.forEach(function (imageObject) {
imageObject.modeInteraction.setMode('blocked_item');
});
this.parent.modeInteraction.setModeItem('select_child');
this.parent.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_row');
this.modeInteraction.setModeItem('select_item');
};
LegendRow.prototype.controlChooseItem = function () {
var _this = this;
this.image.getImageObjects()
.filter(function (imageObject) { return imageObject !== _this; })
.forEach(function (imageObject) {
imageObject.modeInteraction.setMode('choose_unselect');
});
this.modeInteraction.setModeChildren('choose_parent');
this.modeInteraction.setModeItem('choose_item');
};
LegendRow.prototype.onHover = function () {
this._indexElement.style.fill = Design.legendRow.fillColorHover;
this._textElement.style.fill = Design.legendRow.fillColorHover;
};
LegendRow.prototype.onOut = function () {
var style = this._getCorrectStyle();
this._indexElement.style = style;
this._textElement.style = style;
};
LegendRow.prototype.onPointerDown = function (event, preventSelectItem) {
if (preventSelectItem === void 0) { preventSelectItem = false; }
event.stopPropagation();
};
LegendRow.prototype.onSelectStart = function (event, preventSelectItem) {
if (preventSelectItem === void 0) { preventSelectItem = false; }
event.stopPropagation();
var lastMode = this.modeInteraction.lastMode;
if (lastMode === 'select_column') {
this.controlSelectItem();
}
};
LegendRow.prototype.getRectangle = function () {
var rect = _super.prototype.getRectangle.call(this);
var position = this.parent.getRectangle();
return new PIXI.Rectangle(position.x + rect.x, position.y + rect.y, rect.width, rect.height);
};
Object.defineProperty(LegendRow.prototype, "index", {
get: function () {
return this._index;
},
set: function (value) {
this._index = value;
this._indexElement.text = this._index.toString();
},
enumerable: false,
configurable: true
});
return LegendRow;
}(BaseElementContainer));
export { LegendRow };
//# sourceMappingURL=LegendRow.js.map