medsurf-draw
Version:
Draw annotations on jpg/zoomify images, based on PIXI.js
980 lines • 46.4 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 __());
};
})();
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
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 TextPrimitive = (function (_super) {
__extends(TextPrimitive, _super);
function TextPrimitive(image, model) {
var _this = _super.call(this, { image: image, model: model }) || this;
_this._selftestSelected = false;
_this.zIndex = Design.textPrimitive.zIndexDefault + _this.model.zIndex;
_this.rotation = _this.model.angle || 0;
_this.modeInteraction.on("default", _this._modeDefault, _this);
_this.modeInteraction.on("remove-default", _this._removeModeDefault, _this);
_this.modeInteraction.on("marker", _this._modeMarker, _this);
_this.modeInteraction.on("remove-marker", _this._removeModeMarker, _this);
_this.modeInteraction.on("selftest", _this._modeSelftest, _this);
_this.modeInteraction.on("remove-selftest", _this._removeModeSelftest, _this);
_this.modeInteraction.on("author", _this._modeAuthor, _this);
_this.modeInteraction.on("remove-author", _this._removeModeAuthor, _this);
_this.modeInteraction.on('select_layer_group', _this._modeSelectLayerGroup, _this);
_this.modeInteraction.on('remove-select_layer_group', _this._removeModeSelectLayerGroup, _this);
_this.modeInteraction.on('select_grouping', _this._modeSelectGrouping, _this);
_this.modeInteraction.on('remove-select_grouping', _this._removeModeSelectGrouping, _this);
_this.modeInteraction.on('select_item', _this._modeSelectItem, _this);
_this.modeInteraction.on("remove-select_item", _this._removeModeSelectItem, _this);
_this.modeInteraction.on("remove-select_child", _this._removeModeSelectChild, _this);
_this.modeInteraction.on('select_item_color_font', _this._modeSelectItemColor, _this);
_this.modeInteraction.on('remove-select_item_color_font', _this._removeModeSelectItemColor, _this);
_this.modeInteraction.on('select_item_number_font_size', _this._modeSelectItemNumber, _this);
_this.modeInteraction.on("remove-select_item_number_font_size", _this._removeModeSelectItemNumber, _this);
_this.modeInteraction.on('blocked_item', _this._modeBlockedItem, _this);
_this.modeInteraction.on("remove-blocked_item", _this._removeModeBlockedItem, _this);
_this.modeInteraction.on('draw_item', _this._modeDrawItem, _this);
_this.modeInteraction.on("remove-draw_item", _this._removeModeDrawItem, _this);
_this.modeInteraction.on('draw_clickable', _this._modeDrawSelect, _this);
_this.modeInteraction.on('remove-draw_clickable', _this._removeModeDrawSelect, _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.modeInteraction.on("delete", _this._modeDelete, _this);
_this.modeInteraction.on("delete_draw", _this._modeDelete, _this);
_this.moveInteraction = new MedsurfDraw.MoveInteraction(_this);
_this.moveInteraction.on("startMove", _this.startMove, _this);
_this.moveInteraction.on("onMove", _this.onMove, _this);
_this.moveInteraction.on("endMove", _this.endMove, _this);
_this.moveInteraction.on("endMoveLock", _this.endMoveLock, _this);
_this.scaleInteraction = new MedsurfDraw.ScaleInteraction(_this);
_this.scaleInteraction.on("onScale", _this.onScale, _this);
_this.selectInteraction = new MedsurfDraw.SelectInteraction(_this);
_this.selectInteraction.on("onHover", _this.onHover, _this);
_this.selectInteraction.on("onOut", _this.onOut, _this);
_this.selectInteraction.on("onSelectStart", _this.onSelectStart, _this);
_this.selectInteraction.on("onSelftest", _this.onSelftest, _this);
_this._debounceEditNewTextMethod = debounce(_this.editNewText.bind(_this), 10).bind(_this);
_this._debounceControlSelectItemMethod = debounce(_this.controlSelectItem.bind(_this), 10).bind(_this);
_this._debounceControlUnselectItemMethod = debounce(_this.controlUnselectItem.bind(_this), 10).bind(_this);
_this.on("added", function (parent) {
_this.on("debounceEditNewText", _this._debounceEditNewTextMethod);
_this.on("debounceControlSelectItem", _this._debounceControlSelectItemMethod);
_this.on("debounceControlUnselectItem", _this._debounceControlUnselectItemMethod);
parent.on("endPositionPointMove", _this.endPositionPointMove, _this);
parent.on("selftestChanged", _this.selftestChanged, _this);
_this._selftestElement.selectInteraction.on("onSelftest", _this.onSelftest, _this);
});
_this.on("removed", function (parent) {
_this.off("debounceEditNewText", _this._debounceEditNewTextMethod);
_this.off("debounceControlSelectItem", _this._debounceControlSelectItemMethod);
_this.off("debounceControlUnselectItem", _this._debounceControlUnselectItemMethod);
parent.off("endPositionPointMove", _this.endPositionPointMove, _this);
parent.off("selftestChanged", _this.selftestChanged, _this);
_this._selftestElement.selectInteraction.off("onSelftest", _this.onSelftest, _this);
});
return _this;
}
TextPrimitive.prototype.init = function () {
var _this = this;
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.position.set(this.model.rectangle.x * imageWidth, this.model.rectangle.y * imageWidth);
this._textElement = new MedsurfDraw.EditableText({
image: this.image,
text: this.model.text,
style: new PIXI.TextStyle(style)
});
this._textElement.on("onText", this.onText, this);
this._textElement.on("endText", this.endText, this);
this.addChild(this._textElement);
this._selftestElement = new MedsurfDraw.SelftestPoint({
image: this.image,
isSelftest: this.parent.model.isSelftest,
selftestPoint: new PIXI.Point(this.parent.x + this.model.rectangle.x * imageWidth, this.parent.y + this.model.rectangle.y * imageWidth),
options: { hasLine: true, lineColor: style.fill, lineAlpha: 1, hasFill: true, fillColor: style.fill, fillAlpha: 1 },
});
this.image.parent.addChild(this._selftestElement);
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._moveToFrontButtonElement.on("toggleMenu", this.onMenuLayer, this);
this.imageObjectMenu.push({
element: this._moveToFrontButtonElement,
order: 7,
});
this._deleteButtonElement = new MedsurfDraw.RoundButtonElement({
image: this.image,
text: '\uf1f8',
description: 'Löschen',
descriptionFontSize: Design.subMenu.descriptionFontSize,
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: Design.subMenu.descriptionFontSize,
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._horizontalMirrorButtonElement = new MedsurfDraw.RoundButtonElement({
image: this.image,
text: '\uf89c',
description: 'Horizontal\nspiegeln',
descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
});
this._horizontalMirrorButtonElement.on("button", this.onButtonHorizontalMirror, this);
this._verticalMirrorButtonElement = new MedsurfDraw.RoundSubMenuElement({
image: this.image,
text: '\uf89d',
description: 'Vertikal\nspiegeln',
descriptionFontSize: Design.subMenu.descriptionFontSize,
menuElements: [
{
element: this._horizontalMirrorButtonElement,
order: 0,
}
],
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius)
});
this._verticalMirrorButtonElement.on("onHover", this._verticalMirrorButtonElement.showMenu, this._verticalMirrorButtonElement);
this._verticalMirrorButtonElement.on("button", this.onButtonVerticalMirror, this);
this._verticalMirrorButtonElement.on("toggleMenu", this.onMenuMirror, this);
this.imageObjectMenu.push({
element: this._verticalMirrorButtonElement,
order: 3,
});
this._duplicateButtonElement = new MedsurfDraw.RoundButtonElement({
image: this.image,
text: '\uf24d',
description: 'Duplizieren',
descriptionFontSize: Design.subMenu.descriptionFontSize,
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: Design.subMenu.descriptionFontSize,
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,
});
if (this.model.rotateWithLine) {
this.parent.on("onRotateWithLine", this.onRotateWithLine, this);
this.onRotateWithLine(new PIXI.InteractionEvent());
}
this.sortChildren();
this.emit("debounceDraw");
setTimeout(function () {
_this._textElement.style = new PIXI.TextStyle(style);
_this.emit("debounceDraw");
}, 500);
};
TextPrimitive.prototype.draw = function () {
this.updateTransform();
this.pivot.set(this._textElement.width / 2, this._textElement.height / 2);
};
TextPrimitive.prototype.destroy = function (options) {
if (this.parent) {
this.parent.off("onRotateWithLine", this.onRotateWithLine, this);
}
if (this.moveInteraction) {
this.moveInteraction.removeAllListeners();
}
if (this.scaleInteraction) {
this.scaleInteraction.removeAllListeners();
}
if (this.selectInteraction) {
this.selectInteraction.removeAllListeners();
}
if (this._textElement) {
this._textElement.off("onText", this.onText, this);
this._textElement.off("endText", this.endText, this);
this._textElement.destroy(options);
}
if (this._selftestElement) {
this._selftestElement.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._horizontalMirrorButtonElement) {
this._horizontalMirrorButtonElement.destroy(options);
}
if (this._verticalMirrorButtonElement) {
this._verticalMirrorButtonElement.destroy(options);
}
if (this._duplicateButtonElement) {
this._duplicateButtonElement.destroy(options);
}
if (this._clipboardButtonElement) {
this._clipboardButtonElement.destroy(options);
}
_super.prototype.destroy.call(this, options);
};
TextPrimitive.getInstance = function (image, rotateWithLine, imageWidth) {
return new TextPrimitive(image, {
dirty: true,
id: uuidv4(),
type: Models.ImageObjectType.TEXT,
isStatic: false,
zIndex: 0,
rotateWithLine: rotateWithLine,
text: 'Neuer Text',
rectangle: {
x: 0,
y: 0,
width: 21 / imageWidth,
height: 21 / imageWidth
},
style: {
fill: 0xffffff,
fontSize: 32 / imageWidth,
fontFamily: "proxima_nova_altsemibold",
align: 'left',
breakWords: false,
}
});
};
TextPrimitive.prototype.editNewText = function () {
this._textElement.selectAllText();
this.editText();
};
TextPrimitive.prototype.editText = function () {
this.controlSelectItem();
this.modeInteraction.setModeItem("select_child");
this._textElement.modeInteraction.setMode("select_item");
};
TextPrimitive.prototype._modeDefault = function () {
this._selftestSelected = false;
this._textElement.onImageZoom(this.imageScale.x, this.imageScale.y);
if (this.model.isStatic) {
this.showItem();
}
else {
this.hideItem();
}
};
TextPrimitive.prototype._removeModeDefault = function () {
};
TextPrimitive.prototype._modeMarker = function () {
this._selftestSelected = false;
this.showItem();
};
TextPrimitive.prototype._removeModeMarker = function () {
};
TextPrimitive.prototype._modeSelftest = function () {
var positionPoint = this.parent;
if (this.model.isStatic) {
this.interactive = true;
this.cursor = "select";
this.showItem();
this.emit("debounceDraw");
}
else if (positionPoint.model.isSelftest) {
this.interactive = true;
this.cursor = "select";
this._textElement.hideItem();
this.showItem();
this.emit("debounceDraw");
}
else {
this.hideItem();
}
};
TextPrimitive.prototype._removeModeSelftest = function () {
this.interactive = false;
this._textElement.showItem();
};
TextPrimitive.prototype._modeAuthor = function () {
this.interactive = true;
this._selftestSelected = false;
this.on("pointerover", this.selectInteraction.onHover, this.selectInteraction);
this.on("pointerout", this.selectInteraction.onOut, this.selectInteraction);
this.on("mousedown", this.selectInteraction.onPointerDown, this.selectInteraction);
this.on("mouseup", this.selectInteraction.onSelect, this.selectInteraction);
this.showItem();
};
TextPrimitive.prototype._removeModeAuthor = function () {
this.interactive = false;
this.off("pointerover", this.selectInteraction.onHover, this.selectInteraction);
this.off("pointerout", this.selectInteraction.onOut, this.selectInteraction);
this.off("mousedown", this.selectInteraction.onPointerDown, this.selectInteraction);
this.off("mouseup", this.selectInteraction.onSelect, this.selectInteraction);
};
TextPrimitive.prototype._modeSelectLayerGroup = function () {
this.onOut();
this.interactive = true;
this.on("pointerover", this.selectInteraction.onHover, this.selectInteraction);
this.on("pointerout", this.selectInteraction.onOut, this.selectInteraction);
this.on("mousedown", this.selectInteraction.onPointerDown, this.selectInteraction);
this.on("mouseup", this.selectInteraction.onSelect, this.selectInteraction);
this.showItem();
};
TextPrimitive.prototype._removeModeSelectLayerGroup = function () {
this.interactive = false;
this.off("pointerover", this.selectInteraction.onHover, this.selectInteraction);
this.off("pointerout", this.selectInteraction.onOut, this.selectInteraction);
this.off("mousedown", this.selectInteraction.onPointerDown, this.selectInteraction);
this.off("mouseup", this.selectInteraction.onSelect, this.selectInteraction);
};
TextPrimitive.prototype._modeSelectGrouping = function () {
this.interactive = true;
this.on("pointerover", this.selectInteraction.onHover, this.selectInteraction);
this.on("pointerout", this.selectInteraction.onOut, this.selectInteraction);
this.on("mousedown", this.selectInteraction.onPointerDown, this.selectInteraction);
this.on("mouseup", this.selectInteraction.onSelect, this.selectInteraction);
this.showItem();
};
TextPrimitive.prototype._removeModeSelectGrouping = function () {
this.interactive = false;
this.off("pointerover", this.selectInteraction.onHover, this.selectInteraction);
this.off("pointerout", this.selectInteraction.onOut, this.selectInteraction);
this.off("mousedown", this.selectInteraction.onPointerDown, this.selectInteraction);
this.off("mouseup", this.selectInteraction.onSelect, this.selectInteraction);
};
TextPrimitive.prototype._modeSelectItem = function () {
this.onOut();
this.interactive = true;
this.on("pointerover", this.moveInteraction.onMoveHover, this.moveInteraction);
this.on("mousedown", this.moveInteraction.startMove, this.moveInteraction);
this.on("pointermove", this.moveInteraction.onMove, this.moveInteraction);
this.on("mouseup", this.moveInteraction.endMove, this.moveInteraction);
MedsurfDraw.Keyboard.events.on("down_ArrowUp", "onPositionPointMoveUp", this.moveInteraction.moveUp.bind(this.moveInteraction));
MedsurfDraw.Keyboard.events.on("down_ArrowRight", "onPositionPointMoveRight", this.moveInteraction.moveRight.bind(this.moveInteraction));
MedsurfDraw.Keyboard.events.on("down_ArrowDown", "onPositionPointMoveDown", this.moveInteraction.moveDown.bind(this.moveInteraction));
MedsurfDraw.Keyboard.events.on("down_ArrowLeft", "onPositionPointMoveLeft", this.moveInteraction.moveLeft.bind(this.moveInteraction));
MedsurfDraw.Keyboard.events.on("released_ArrowUp", "onPositionPointMoveUpEnd", this.moveInteraction.moveRelease.bind(this.moveInteraction));
MedsurfDraw.Keyboard.events.on("released_ArrowRight", "onPositionPointMoveRightEnd", this.moveInteraction.moveRelease.bind(this.moveInteraction));
MedsurfDraw.Keyboard.events.on("released_ArrowDown", "onPositionPointMoveDownEnd", this.moveInteraction.moveRelease.bind(this.moveInteraction));
MedsurfDraw.Keyboard.events.on("released_ArrowLeft", "onPositionPointMoveLeftEnd", this.moveInteraction.moveRelease.bind(this.moveInteraction));
this.image.controlUpdateElements();
this.showItem();
this.emit("pointerover", new PIXI.InteractionEvent());
};
TextPrimitive.prototype._removeModeSelectItem = function (parent, mode) {
this.interactive = false;
this.off("pointerover", this.moveInteraction.onMoveHover, 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);
MedsurfDraw.Keyboard.events.remove("down_ArrowUp", "onPositionPointMoveUp");
MedsurfDraw.Keyboard.events.remove("down_ArrowRight", "onPositionPointMoveRight");
MedsurfDraw.Keyboard.events.remove("down_ArrowDown", "onPositionPointMoveDown");
MedsurfDraw.Keyboard.events.remove("down_ArrowLeft", "onPositionPointMoveLeft");
MedsurfDraw.Keyboard.events.remove("released_ArrowUp", "onPositionPointMoveUpEnd");
MedsurfDraw.Keyboard.events.remove("released_ArrowRight", "onPositionPointMoveRightEnd");
MedsurfDraw.Keyboard.events.remove("released_ArrowDown", "onPositionPointMoveDownEnd");
MedsurfDraw.Keyboard.events.remove("released_ArrowLeft", "onPositionPointMoveLeftEnd");
this.collapseAllMenus(new PIXI.InteractionEvent());
if (mode === 'author') {
this.emit("debounceControlUnselectItem", this.parent);
}
};
TextPrimitive.prototype._removeModeSelectChild = function (parent, mode) {
this.image.updatePrimitive(this.model);
this.emit("debounceControlSelectItem");
};
TextPrimitive.prototype._modeSelectItemColor = function () {
this.onOut();
this.image.controlUpdateElements();
this.showItem();
this.emit("pointerover", new PIXI.InteractionEvent());
};
TextPrimitive.prototype._removeModeSelectItemColor = function (parent, mode) {
this.image.controlSaveColor(this.model.style.fill, 1);
if (mode !== 'select_child' && !mode.startsWith('select_item_color')) {
this.emit("debounceControlSelectItem");
}
};
TextPrimitive.prototype._modeSelectItemNumber = function () {
this.onOut();
this.image.controlUpdateElements();
this.showItem();
this.emit("pointerover", new PIXI.InteractionEvent());
};
TextPrimitive.prototype._removeModeSelectItemNumber = function (parent, mode) {
if (mode !== 'select_child' && !mode.startsWith('select_item_number')) {
this.emit("debounceControlSelectItem");
}
};
TextPrimitive.prototype._modeBlockedItem = function () {
this._textElement.alpha = Design.blocked.fillAlpha;
};
TextPrimitive.prototype._removeModeBlockedItem = function () {
this._textElement.alpha = 1;
};
TextPrimitive.prototype._modeDrawItem = function () {
};
TextPrimitive.prototype._modeDrawSelect = function () {
this.interactive = true;
this.cursor = "select";
this._textElement.style.fill = Design.positionPoint.fillColorGroup;
this.emit("debounceDraw");
};
TextPrimitive.prototype._removeModeDrawSelect = function (parent, mode) {
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._textElement.style = new PIXI.TextStyle(style);
if (!mode.startsWith('delete')) {
this.emit("debounceDraw");
}
};
TextPrimitive.prototype._removeModeDrawItem = function (parent, mode) {
this.scaleInteraction.reset();
if (!mode.startsWith('delete')) {
this.emit("debounceEditNewText");
}
};
TextPrimitive.prototype._modeChooseSelect = function () {
this.interactive = true;
this.cursor = "select";
this._textElement.style.fill = Design.selftest.lineColorSelect;
this.emit("debounceDraw");
};
TextPrimitive.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._textElement.style = new PIXI.TextStyle(style);
this.emit("debounceDraw");
};
TextPrimitive.prototype._modeChooseUnselect = function () {
this.interactive = true;
this.cursor = "select";
this._textElement.style.fill = Design.selftest.lineColorUnselect;
this.emit("debounceDraw");
};
TextPrimitive.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._textElement.style = new PIXI.TextStyle(style);
this.emit("debounceDraw");
};
TextPrimitive.prototype._modeDelete = function () {
var _this = this;
var parent = this.parent;
if (parent) {
var image = parent.image;
if (parent.model.primitives) {
var index = parent.model.primitives.findIndex(function (primitive) { return primitive.id === _this.model.id; });
if (index > -1) {
if (['delete_draw'].indexOf(this.modeInteraction.lastMode) === -1) {
this.emit("debounceControlUnselectItem", parent);
}
parent.model.primitives.splice(index, 1);
parent.removeChild(this);
parent.emit("debounceDeleteItem", image);
image.deletePrimitive(this.model);
}
}
image.controlHideMenu();
image.controlUpdateElements();
}
this.destroy();
};
TextPrimitive.prototype.collapseAllMenus = function (event) {
this._moveToFrontButtonElement.toggleMenu(event, false);
this._verticalMirrorButtonElement.toggleMenu(event, false);
};
TextPrimitive.prototype.onButtonEdit = function () {
this.collapseAllMenus(new PIXI.InteractionEvent());
this.image.controlHideMenu();
this.image.editPrimitive(this.model);
};
TextPrimitive.prototype.onButtonMoveToFront = function () {
this.model.zIndex++;
this.zIndex = this.model.zIndex;
this.image.sortChildren();
this.image.updatePrimitive(this.model);
};
TextPrimitive.prototype.onButtonMoveToBack = function () {
this.model.zIndex--;
this.zIndex = this.model.zIndex;
this.image.sortChildren();
this.image.updatePrimitive(this.model);
};
TextPrimitive.prototype.onMenuLayer = function (event, visible) {
if (visible) {
this._verticalMirrorButtonElement.toggleMenu(event, false);
}
};
TextPrimitive.prototype.onButtonDelete = function (event) {
var _this = this;
this.collapseAllMenus(new PIXI.InteractionEvent());
this.image.controlHideMenu();
setTimeout(function () {
_this.modeInteraction.setMode("delete");
}, 300);
};
TextPrimitive.prototype.onButtonDegroup = function (unselectElement) {
if (unselectElement === void 0) { unselectElement = true; }
this.collapseAllMenus(new PIXI.InteractionEvent());
this.image.controlHideMenu();
this.parent.onButtonDegroup(true);
if (unselectElement) {
this.image.unselectLayerGroup();
this.image.selectPrimitive(this.model, this.parent.model);
}
};
TextPrimitive.prototype.onButtonVerticalMirror = function () {
if (this.model.rotateWithLine) {
return;
}
var rotation = (Math.round(((this.model.angle || 0) / Math.PI * 180) * 100) / 100) % 360;
if (rotation < 0) {
rotation = 360 + rotation;
}
this.rotation = Math.round(180 - rotation) % 360 * (2 * Math.PI / 360);
this.model.angle = this.rotation;
this.image.controlUpdateElements();
this.image.updatePrimitive(this.model);
};
TextPrimitive.prototype.onButtonHorizontalMirror = function () {
if (this.model.rotateWithLine) {
return;
}
var rotation = (Math.round(((this.model.angle || 0) / Math.PI * 180) * 100) / 100) % 360;
if (rotation < 0) {
rotation = 360 + rotation;
}
this.rotation = Math.round(360 - rotation) % 360 * (2 * Math.PI / 360);
this.model.angle = this.rotation;
this.image.controlUpdateElements();
this.image.updatePrimitive(this.model);
};
TextPrimitive.prototype.onMenuMirror = function (event, visible) {
if (visible) {
this._moveToFrontButtonElement.toggleMenu(event, false);
}
};
TextPrimitive.prototype.onButtonDuplicate = function () {
this.collapseAllMenus(new PIXI.InteractionEvent());
this.image.controlHideMenu();
this.parent.onButtonDuplicate();
};
TextPrimitive.prototype.onButtonClipboard = function () {
this.collapseAllMenus(new PIXI.InteractionEvent());
this.image.controlHideMenu();
this.parent.onButtonClipboard();
};
TextPrimitive.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._selftestElement.options = { hasLine: true, lineColor: color, lineAlpha: 1,
hasFill: true, fillColor: color, fillAlpha: 1 };
this.emit("debounceDraw");
this.image.updatePrimitive(this.model);
}
};
TextPrimitive.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.updatePrimitive(this.model);
}
};
TextPrimitive.prototype.onButtonRotateWithLine = function (override) {
this.model.rotateWithLine = override || !this.model.rotateWithLine;
this.onRotateWithLine(new PIXI.InteractionEvent());
if (this.model.rotateWithLine) {
this.parent.on("onRotateWithLine", this.onRotateWithLine, this);
}
else {
this.parent.off("onRotateWithLine", this.onRotateWithLine, this);
}
this.image.updatePrimitive(this.model);
};
TextPrimitive.prototype.onButtonStatic = function (override) {
this.model.isStatic = override || !this.model.isStatic;
this.emit("debounceDraw");
this.image.updatePrimitive(this.model);
};
TextPrimitive.prototype.onText = function (text) {
this.model.text = text;
this._textElement.text = text;
this.draw();
this.image.controlUpdateElements();
this.emit("onBackgroundText");
};
TextPrimitive.prototype.endText = function () {
this.controlSelectItem();
};
TextPrimitive.prototype.onButtonAddBackgroundRectangle = function () {
var image = this.image;
var imageWidth = image.imageDimensions.width;
var parent = this.parent;
var backgroundRectangle = MedsurfDraw.BackgroundRectanglePrimitive.getInstance(this.image, this.model.id, this.model.rotateWithLine, imageWidth);
parent.addChild(backgroundRectangle);
backgroundRectangle.modeInteraction.setDefaultMode("author");
backgroundRectangle.draw();
parent.sortChildren();
if (!parent.model.primitives) {
parent.model.primitives = [];
}
parent.model.primitives.push(backgroundRectangle.model);
this.image.updateImageObject(parent.model);
backgroundRectangle.controlSelectItem();
};
TextPrimitive.prototype.controlSelectItem = function () {
this.image.selectPrimitive(this.model, this.parent.model);
this.externControlSelectItem();
};
TextPrimitive.prototype.controlUnselectItem = function (parent) {
var image = parent.image;
if (!parent.controlSelectLayerGroup(image)) {
image.externControlSelectImage();
image.unselectPrimitive();
}
};
TextPrimitive.prototype.externControlSelectItem = function () {
var parent = this.parent;
this.image.getImageObjects()
.filter(function (imageObject) { return imageObject !== parent; })
.forEach(function (imageObject) {
if (parent.model.selftestItems && parent.model.selftestItems.indexOf(imageObject.name) > -1) {
imageObject.modeInteraction.setMode('choose_select');
}
else if (parent.model.selftestItems && imageObject instanceof MedsurfDraw.LegendCollection) {
var legendRows = imageObject.legendColumns.map(function (lc) { return lc.legendRows; })
.reduce(function (cur, acc) { return __spreadArray(__spreadArray([], cur, true), acc, true); }, [])
.map(function (lr) { return { name: lr.model.id, element: lr }; });
for (var _i = 0, legendRows_1 = legendRows; _i < legendRows_1.length; _i++) {
var legendRow = legendRows_1[_i];
if (parent.model.selftestItems.indexOf(legendRow.name) > -1) {
legendRow.element.modeInteraction.setMode('choose_select');
}
else {
imageObject.modeInteraction.setMode('blocked_item');
}
}
}
else {
imageObject.modeInteraction.setMode('blocked_item');
}
});
parent.modeInteraction.setModeItem('select_child');
this.modeInteraction.setModeChildren('select_parent');
this.modeInteraction.setModeItem('select_item');
};
TextPrimitive.prototype.controlDrawItem = function () {
this.modeInteraction.setModeChildren('draw_parent');
this.modeInteraction.setModeItem('draw_item');
};
TextPrimitive.prototype.startMove = function (event) {
this.parent.moveInteraction.emit("startMove", event);
};
TextPrimitive.prototype.onMove = function (event, dX, dY) {
var imageWidth = this.imageDimensions.width;
if (MedsurfDraw.Keyboard.isKeyDown("ControlLeft") || MedsurfDraw.Keyboard.isKeyDown("ControlRight")) {
this.position.x += dX;
this.position.y += dY;
this.model.rectangle.x = this.position.x / imageWidth;
this.model.rectangle.y = this.position.y / imageWidth;
this._selftestElement.selftestPoint = new PIXI.Point(this.parent.x + this.model.rectangle.x * this.imageDimensions.width, this.parent.y + this.model.rectangle.y * this.imageDimensions.width);
this.parent.emit("childMove", event);
}
else {
this.parent.moveInteraction.emit("onMove", event, dX, dY);
}
};
TextPrimitive.prototype.endMove = function (event) {
this.parent.moveInteraction.emit("endMove", event);
};
TextPrimitive.prototype.endMoveLock = function (event) {
this._textElement.selectEndText();
this.editText();
};
TextPrimitive.prototype.endPositionPointMove = function () {
this._selftestElement.selftestPoint = new PIXI.Point(this.parent.x + this.model.rectangle.x * this.imageDimensions.width, this.parent.y + this.model.rectangle.y * this.imageDimensions.width);
};
TextPrimitive.prototype.onHover = function () {
this._textElement.style.fill = Design.primitive.lineColorHover;
this.emit("debounceDraw");
};
TextPrimitive.prototype.onOut = 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._textElement.style = new PIXI.TextStyle(style);
this.emit("debounceDraw");
};
TextPrimitive.prototype.onSelectStart = function (event, preventSelectItem) {
if (preventSelectItem === void 0) { preventSelectItem = false; }
event.stopPropagation();
var lastMode = this.modeInteraction.lastMode;
if (lastMode === 'select_layer_group' || lastMode === 'select_parent') {
this.controlSelectItem();
}
else {
if (!this.parent.controlSelectLayerGroup(this.image) && !preventSelectItem) {
this.controlSelectItem();
}
}
};
TextPrimitive.prototype.onSelftest = function () {
this._selftestSelected = true;
this.parent.onSelftest();
this.emit("debounceDraw");
};
TextPrimitive.prototype.startScale = function () {
};
TextPrimitive.prototype.onScale = function (scaleSide, dX, dY, dW, dH) {
var imageWidth = this.imageDimensions.width;
if (dW != 0) {
var width = this._textElement.width + dW;
this._textElement.style.fontSize = Math.round(Math.max(2, width / this._textElement.width * this._textElement.style.fontSize));
}
if (dH != 0) {
var height = this._textElement.height + dH;
this._textElement.style.fontSize = Math.round(Math.max(2, height / this._textElement.height * this._textElement.style.fontSize));
}
this.model.style.fontSize = this._textElement.style.fontSize / imageWidth;
this._textElement.onImageZoom(this.imageScale.x, this.imageScale.y);
this.draw();
};
TextPrimitive.prototype.endScale = function () {
this.image.updatePrimitive(this.model);
};
TextPrimitive.prototype.startRotate = function () {
this.rotation = (Math.round(this.rotation / Math.PI * 180) * Math.PI / 180);
};
TextPrimitive.prototype.onRotate = function (degree) {
this.rotation += degree;
this.model.angle = this.rotation;
this.emit("onBackgroundRotate", degree);
};
TextPrimitive.prototype.endRotate = function () {
this.image.updatePrimitive(this.model);
};
TextPrimitive.prototype.onRotateWithLine = function (event) {
var parent = this.parent;
var lineStartX = 0;
var lineStartY = 0;
var lineEndX = 0;
var lineEndY = 0;
var lines = parent.getLines();
if (lines.length === 0) {
return;
}
for (var _i = 0, lines_1 = lines; _i < lines_1.length; _i++) {
var line = lines_1[_i];
if (line.start === parent) {
if (!line.start || !line.end) {
return;
}
lineStartX += line.start.x;
lineStartY += line.start.y;
lineEndX += line.end.x;
lineEndY += line.end.y;
}
else {
if (!line.start || !line.end) {
return;
}
lineStartX += line.end.x;
lineStartY += line.end.y;
lineEndX += line.start.x;
lineEndY += line.start.y;
}
}
lineStartX /= lines.length;
lineStartY /= lines.length;
lineEndX /= lines.length;
lineEndY /= lines.length;
var degree = Math.atan2(lineEndY - lineStartY, lineEndX - lineStartX) - (90 * Math.PI / 180) || 0;
this.rotation = degree + Math.PI / 2;
this.model.angle = this.rotation;
this.emit("onBackgroundRotate", degree);
};
TextPrimitive.prototype.onImageZoom = function (scaleX, scaleY) {
this.emit("debounceDraw");
};
TextPrimitive.prototype.selftestChanged = function () {
this._selftestElement.isSelftest = this.parent.model.isSelftest;
};
TextPrimitive.prototype.getRectangle = function () {
var rect = _super.prototype.getRectangle.call(this);
var position = this.parent.position;
return new PIXI.Rectangle(position.x + rect.x - rect.width / 2, position.y + rect.y - rect.height / 2, rect.width, rect.height);
};
Object.defineProperty(TextPrimitive.prototype, "moveInteraction", {
get: function () {
return this._moveInteraction;
},
set: function (value) {
this._moveInteraction = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(TextPrimitive.prototype, "scaleInteraction", {
get: function () {
return this._scaleInteraction;
},
set: function (value) {
this._scaleInteraction = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(TextPrimitive.prototype, "selectInteraction", {
get: function () {
return this._selectInteraction;
},
set: function (value) {
this._selectInteraction = value;
},
enumerable: false,
configurable: true
});
return TextPrimitive;
}(BaseElementContainer));
export { TextPrimitive };
//# sourceMappingURL=TextPrimitive.js.map