medsurf-draw
Version:
Draw annotations on jpg/zoomify images, based on PIXI.js
776 lines • 38.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 BackgroundRectanglePrimitive = (function (_super) {
__extends(BackgroundRectanglePrimitive, _super);
function BackgroundRectanglePrimitive(image, model) {
var _this = _super.call(this, { image: image, model: model }) || this;
_this.primitive = null;
_this.zIndex = Design.backgroundRectangleElement.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('select_item_color_line', _this._modeSelectItemColor, _this);
_this.modeInteraction.on('remove-select_item_color_line', _this._removeModeSelectItemColorLine, _this);
_this.modeInteraction.on('select_item_color_fill', _this._modeSelectItemColor, _this);
_this.modeInteraction.on("remove-select_item_color_fill", _this._removeModeSelectItemColorFill, _this);
_this.modeInteraction.on('select_item_number_line_width', _this._modeSelectItemNumber, _this);
_this.modeInteraction.on("remove-select_item_number_line_width", _this._removeModeSelectItemNumber, _this);
_this.modeInteraction.on('select_item_number_pad', _this._modeSelectItemNumber, _this);
_this.modeInteraction.on('remove-select_item_number_pad', _this._removeModeSelectItemNumber, _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.modeInteraction.on("delete", _this._modeDelete, _this);
_this.modeInteraction.on("delete_draw", _this._modeDelete, _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._debounceControlSelectItemMethod = debounce(_this.controlSelectItem.bind(_this), 10).bind(_this);
_this._debounceControlUnselectItemMethod = debounce(_this.controlUnselectItem.bind(_this), 10).bind(_this);
_this.on("added", function () {
_this.on("debounceControlSelectItem", _this._debounceControlSelectItemMethod);
_this.on("debounceControlUnselectItem", _this._debounceControlUnselectItemMethod);
});
_this.on("removed", function () {
_this.off("debounceControlSelectItem", _this._debounceControlSelectItemMethod);
_this.off("debounceControlUnselectItem", _this._debounceControlUnselectItemMethod);
});
return _this;
}
BackgroundRectanglePrimitive.prototype.init = function () {
var _this = this;
var imageWidth = this.imageDimensions.width;
this.primitive = this.image.getImageObjects()
.filter(function (child) { return child instanceof MedsurfDraw.PositionPoint; })
.map(function (positionPoint) { return positionPoint.getChildByName(_this.model.primitiveId); })
.filter(function (result) { return result; })[0];
var rectangle = this.getBackgroundRectangle();
this._rectangleElement = new MedsurfDraw.Rectangle({
rectangle: rectangle,
options: Object.assign({}, this.model.options),
lineWidth: this.model.strokeWidth ? Math.round(this.model.strokeWidth * imageWidth * 100) / 100 : undefined
});
this.addChild(this._rectangleElement);
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,
});
this.primitive.modeInteraction.on("delete", this._modeDelete, this);
this.primitive.moveInteraction.on("onMove", this._updateRectangle, this);
this.primitive.scaleInteraction.on("onScale", this._updateRectangle, this);
this.primitive.on("onBackgroundRotate", this.onRotate, this);
this.primitive.on("onBackgroundText", this._updateRectangle, this);
this.primitive.on("onBackgroundNumber", this._updateRectangle, this);
this.parent.sortChildren();
this.sortChildren();
this.emit("debounceDraw");
};
BackgroundRectanglePrimitive.prototype.draw = function () {
this._rectangleElement.draw();
};
BackgroundRectanglePrimitive.prototype.destroy = function (options) {
if (this.selectInteraction) {
this.selectInteraction.removeAllListeners();
}
if (this._rectangleElement) {
this._rectangleElement.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);
}
if (this.primitive) {
this.primitive.modeInteraction.off("delete", this._modeDelete, this);
this.primitive.moveInteraction.off("onMove", this._updateRectangle, this);
this.primitive.scaleInteraction.off("onScale", this._updateRectangle, this);
this.primitive.off("onBackgroundRotate", this.onRotate, this);
this.primitive.off("onBackgroundText", this._updateRectangle, this);
this.primitive.off("onBackgroundNumber", this._updateRectangle, this);
}
_super.prototype.destroy.call(this, options);
};
BackgroundRectanglePrimitive.getInstance = function (image, primitiveId, rotateWithLine, imageWidth) {
return new BackgroundRectanglePrimitive(image, {
dirty: true,
id: uuidv4(),
type: Models.ImageObjectType.BACKGROUNDRECTANGLE,
isStatic: false,
zIndex: 0,
primitiveId: primitiveId,
rotateWithLine: rotateWithLine,
strokeWidth: 1 / imageWidth,
dashFill: 2,
dashEmpty: 2,
options: {
hasLine: true,
lineColor: 0xffffff,
lineAlpha: 1,
hasFill: true,
fillColor: 0xffffff,
fillAlpha: 0.3,
}
});
};
BackgroundRectanglePrimitive.prototype.getBackgroundRectangle = function () {
if (!this.primitive) {
return new PIXI.Rectangle(0, 0, 0, 0);
}
var imageWidth = this.imageDimensions.width;
var pad = this.model.pad ? Math.round(this.model.pad * imageWidth * 100) / 100 : Design.backgroundRectangleElement.padDefault;
var elementRect = this.primitive.getElementRectangle();
var rectangle = new PIXI.Rectangle(0, 0, elementRect.width + pad, elementRect.height + pad);
this.pivot.set(rectangle.width / 2, rectangle.height / 2);
this.position.set(this.primitive.position.x, this.primitive.position.y);
return rectangle;
};
BackgroundRectanglePrimitive.prototype._updateRectangle = function () {
var rectangle = this.getBackgroundRectangle();
this._rectangleElement.rectangle = rectangle;
this.draw();
};
BackgroundRectanglePrimitive.prototype._modeDefault = function () {
if (this.model.isStatic) {
this.showItem();
}
else {
this.hideItem();
}
};
BackgroundRectanglePrimitive.prototype._removeModeDefault = function () {
};
BackgroundRectanglePrimitive.prototype._modeMarker = function () {
this.showItem();
};
BackgroundRectanglePrimitive.prototype._removeModeMarker = function () {
};
BackgroundRectanglePrimitive.prototype._modeSelftest = function () {
var positionPoint = this.parent;
if (this.model.isStatic) {
this.interactive = true;
this.cursor = "select";
positionPoint.selectInteraction.reset();
this.on("pointerover", positionPoint.selectInteraction.onHover, positionPoint.selectInteraction);
this.on("pointerout", positionPoint.selectInteraction.onOut, positionPoint.selectInteraction);
this.on("mousedown", positionPoint.selectInteraction.onPointerDown, positionPoint.selectInteraction);
this.on("mouseup", positionPoint.selectInteraction.onSelftest, positionPoint.selectInteraction);
this.showItem();
}
else {
this.hideItem();
}
};
BackgroundRectanglePrimitive.prototype._removeModeSelftest = function () {
var positionPoint = this.parent;
this.interactive = false;
this._rectangleElement.showItem();
this.off("pointerover", positionPoint.selectInteraction.onHover, positionPoint.selectInteraction);
this.off("pointerout", positionPoint.selectInteraction.onOut, positionPoint.selectInteraction);
this.off("mousedown", positionPoint.selectInteraction.onPointerDown, positionPoint.selectInteraction);
this.off("mouseup", positionPoint.selectInteraction.onSelftest, positionPoint.selectInteraction);
};
BackgroundRectanglePrimitive.prototype._modeAuthor = function () {
this.interactive = true;
this.on("pointerover", this.selectInteraction.onHover, this.selectInteraction);
this.on("pointerout", this.selectInteraction.onOut, this.selectInteraction);
this.on("mouseup", this.selectInteraction.onSelect, this.selectInteraction);
this.showItem();
};
BackgroundRectanglePrimitive.prototype._removeModeAuthor = function () {
this.interactive = false;
this.off("pointerover", this.selectInteraction.onHover, this.selectInteraction);
this.off("pointerout", this.selectInteraction.onOut, this.selectInteraction);
this.off("mouseup", this.selectInteraction.onSelect, this.selectInteraction);
};
BackgroundRectanglePrimitive.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("mouseup", this.selectInteraction.onSelect, this.selectInteraction);
this.showItem();
};
BackgroundRectanglePrimitive.prototype._removeModeSelectLayerGroup = function () {
this.interactive = false;
this.off("pointerover", this.selectInteraction.onHover, this.selectInteraction);
this.off("pointerout", this.selectInteraction.onOut, this.selectInteraction);
this.off("mouseup", this.selectInteraction.onSelect, this.selectInteraction);
};
BackgroundRectanglePrimitive.prototype._modeSelectGrouping = function () {
this.interactive = true;
this.on("pointerover", this.selectInteraction.onHover, this.selectInteraction);
this.on("pointerout", this.selectInteraction.onOut, this.selectInteraction);
this.on("mouseup", this.selectInteraction.onSelect, this.selectInteraction);
this.showItem();
};
BackgroundRectanglePrimitive.prototype._removeModeSelectGrouping = function () {
this.interactive = false;
this.off("pointerover", this.selectInteraction.onHover, this.selectInteraction);
this.off("pointerout", this.selectInteraction.onOut, this.selectInteraction);
this.off("mouseup", this.selectInteraction.onSelect, this.selectInteraction);
};
BackgroundRectanglePrimitive.prototype._modeSelectItem = function () {
this.onOut();
this.interactive = true;
this.on("mouseup", this.selectInteraction.onSelect, this.selectInteraction);
this.image.controlUpdateElements();
this.showItem();
this.emit("pointerover", new PIXI.InteractionEvent());
};
BackgroundRectanglePrimitive.prototype._removeModeSelectItem = function (parent, mode) {
this.interactive = false;
this.off("mouseup", this.selectInteraction.onSelect, this.selectInteraction);
this.collapseAllMenus(new PIXI.InteractionEvent());
if (mode === 'author') {
this.emit("debounceControlUnselectItem", this.parent);
}
};
BackgroundRectanglePrimitive.prototype._modeSelectItemColor = function () {
this.onOut();
this.image.controlUpdateElements();
this.showItem();
this.emit("pointerover", new PIXI.InteractionEvent());
};
BackgroundRectanglePrimitive.prototype._removeModeSelectItemColorLine = function (parent, mode) {
this.image.controlSaveColor(this.model.options.lineColor, this.model.options.lineAlpha);
this._removeModeSelectItemColor(parent, mode);
};
BackgroundRectanglePrimitive.prototype._removeModeSelectItemColorFill = function (parent, mode) {
this.image.controlSaveColor(this.model.options.fillColor, this.model.options.fillAlpha);
this._removeModeSelectItemColor(parent, mode);
};
BackgroundRectanglePrimitive.prototype._removeModeSelectItemColor = function (parent, mode) {
if (mode !== 'select_child' && !mode.startsWith('select_item_color')) {
this.emit("debounceControlSelectItem");
}
};
BackgroundRectanglePrimitive.prototype._modeSelectItemNumber = function () {
this.onOut();
this.image.controlUpdateElements();
this.showItem();
this.emit("pointerover", new PIXI.InteractionEvent());
};
BackgroundRectanglePrimitive.prototype._removeModeSelectItemNumber = function (parent, mode) {
if (mode !== 'select_child' && !mode.startsWith('select_item_number')) {
this.emit("debounceControlSelectItem");
}
};
BackgroundRectanglePrimitive.prototype._modeBlockedItem = function (parent, mode) {
this._rectangleElement.options.lineAlpha = Design.blocked.lineAlpha;
this._rectangleElement.options.fillAlpha = Design.blocked.fillAlpha;
if (!mode.startsWith('delete')) {
this.emit("debounceDraw");
}
};
BackgroundRectanglePrimitive.prototype._removeModeBlockedItem = function () {
this._rectangleElement.options = Object.assign({}, this.model.options);
this.emit("debounceDraw");
};
BackgroundRectanglePrimitive.prototype._modeChooseSelect = function () {
this.interactive = true;
this.cursor = "select";
this._rectangleElement.options.lineColor = Design.selftest.lineColorSelect;
this._rectangleElement.options.fillColor = Design.selftest.fillColorSelect;
this.emit("debounceDraw");
};
BackgroundRectanglePrimitive.prototype._removeModeChooseSelect = function () {
this.interactive = false;
this._rectangleElement.options = Object.assign({}, this.model.options);
this.emit("debounceDraw");
};
BackgroundRectanglePrimitive.prototype._modeChooseUnselect = function () {
this.interactive = true;
this.cursor = "select";
this._rectangleElement.options.lineColor = Design.selftest.lineColorUnselect;
this._rectangleElement.options.fillColor = Design.selftest.fillColorUnselect;
this.emit("debounceDraw");
};
BackgroundRectanglePrimitive.prototype._removeModeChooseUnselect = function () {
this.interactive = false;
this._rectangleElement.options = Object.assign({}, this.model.options);
this.emit("debounceDraw");
};
BackgroundRectanglePrimitive.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);
image.deletePrimitive(this.model);
}
}
image.controlHideMenu();
image.controlUpdateElements();
}
this.destroy();
};
BackgroundRectanglePrimitive.prototype.collapseAllMenus = function (event) {
this._moveToFrontButtonElement.toggleMenu(event, false);
this._verticalMirrorButtonElement.toggleMenu(event, false);
};
BackgroundRectanglePrimitive.prototype.onButtonEdit = function () {
this.collapseAllMenus(new PIXI.InteractionEvent());
this.image.controlHideMenu();
this.image.editPrimitive(this.model);
};
BackgroundRectanglePrimitive.prototype.onButtonMoveToFront = function () {
this.model.zIndex++;
this.zIndex = this.model.zIndex;
this.image.sortChildren();
this.image.updatePrimitive(this.model);
};
BackgroundRectanglePrimitive.prototype.onButtonMoveToBack = function () {
this.model.zIndex--;
this.zIndex = this.model.zIndex;
this.image.sortChildren();
this.image.updatePrimitive(this.model);
};
BackgroundRectanglePrimitive.prototype.onMenuLayer = function (event, visible) {
if (visible) {
this._verticalMirrorButtonElement.toggleMenu(event, false);
}
};
BackgroundRectanglePrimitive.prototype.onButtonDelete = function (event) {
var _this = this;
this.collapseAllMenus(new PIXI.InteractionEvent());
this.image.controlHideMenu();
setTimeout(function () {
_this.modeInteraction.setMode("delete");
}, 300);
};
BackgroundRectanglePrimitive.prototype.onButtonDegroup = function (unselectElement) {
if (unselectElement === void 0) { unselectElement = true; }
this.collapseAllMenus(new PIXI.InteractionEvent());
this.image.controlHideMenu();
this.parent.onButtonDegroup(false);
if (unselectElement) {
this.image.unselectLayerGroup();
this.image.selectPrimitive(this.model, this.parent.model);
}
};
BackgroundRectanglePrimitive.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);
};
BackgroundRectanglePrimitive.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);
};
BackgroundRectanglePrimitive.prototype.onMenuMirror = function (event, visible) {
if (visible) {
this._moveToFrontButtonElement.toggleMenu(event, false);
}
};
BackgroundRectanglePrimitive.prototype.onButtonDuplicate = function () {
this.collapseAllMenus(new PIXI.InteractionEvent());
this.image.controlHideMenu();
this.parent.onButtonDuplicate();
};
BackgroundRectanglePrimitive.prototype.onButtonClipboard = function () {
this.collapseAllMenus(new PIXI.InteractionEvent());
this.image.controlHideMenu();
this.parent.onButtonClipboard();
};
BackgroundRectanglePrimitive.prototype.onColor = function (mode, has, color, colorAlpha) {
if (mode === ColorMode.LINE) {
this.model.options.hasLine = has;
this.model.options.lineColor = color;
this.model.options.lineAlpha = colorAlpha;
this._rectangleElement.options = Object.assign({}, this.model.options);
this.emit("debounceDraw");
this.image.updatePrimitive(this.model);
}
else if (mode === ColorMode.FILL) {
this.model.options.hasFill = has;
this.model.options.fillColor = color;
this.model.options.fillAlpha = colorAlpha;
this._rectangleElement.options = Object.assign({}, this.model.options);
this.emit("debounceDraw");
this.image.updatePrimitive(this.model);
}
};
BackgroundRectanglePrimitive.prototype.onNumber = function (mode, number) {
if (mode === NumberMode.WIDTH) {
this.model.strokeWidth = number / this.imageDimensions.width;
this._rectangleElement.lineWidth = this.model.strokeWidth ? Math.round(this.model.strokeWidth * this.imageDimensions.width * 100) / 100 : undefined;
this.emit("debounceDraw");
}
else if (mode === NumberMode.PAD) {
this.model.pad = number / this.imageDimensions.width;
this._rectangleElement.rectangle.pad(this.model.pad, this.model.pad);
this.emit("debounceDraw");
}
};
BackgroundRectanglePrimitive.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);
};
BackgroundRectanglePrimitive.prototype.onButtonStatic = function (override) {
this.model.isStatic = override || !this.model.isStatic;
this.emit("debounceDraw");
this.image.updatePrimitive(this.model);
};
BackgroundRectanglePrimitive.prototype.controlSelectItem = function () {
this.image.selectPrimitive(this.model, this.parent.model);
this.externControlSelectItem();
};
BackgroundRectanglePrimitive.prototype.controlUnselectItem = function (parent) {
var image = parent.image;
if (!parent.controlSelectLayerGroup(image)) {
image.externControlSelectImage();
image.unselectPrimitive();
}
};
BackgroundRectanglePrimitive.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 {
legendRow.element.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');
};
BackgroundRectanglePrimitive.prototype.controlDrawItem = function () {
this.modeInteraction.setModeChildren('draw_parent');
this.modeInteraction.setModeItem('draw_item');
};
BackgroundRectanglePrimitive.prototype.onHover = function () {
var _this = this;
this.parent.children.filter(function (element) { return element instanceof BaseElementContainer && element.model.id === _this.model.primitiveId; })[0].onHover();
};
BackgroundRectanglePrimitive.prototype.onOut = function () {
var _this = this;
this.parent.children.filter(function (element) { return element instanceof BaseElementContainer && element.model.id === _this.model.primitiveId; })[0].onOut();
};
BackgroundRectanglePrimitive.prototype.onSelectStart = function (event) {
var _this = this;
this.parent.children.filter(function (element) { return element instanceof BaseElementContainer && element.model.id === _this.model.primitiveId; })[0].onSelectStart(event);
};
BackgroundRectanglePrimitive.prototype.startRotate = function () {
this.rotation = (Math.round(this.rotation / Math.PI * 180) * Math.PI / 180);
};
BackgroundRectanglePrimitive.prototype.onRotate = function (degree) {
this.rotation += degree;
this.model.angle = this.rotation;
this._updateRectangle();
};
BackgroundRectanglePrimitive.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);
};
BackgroundRectanglePrimitive.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(BackgroundRectanglePrimitive.prototype, "primitive", {
get: function () {
return this._primitive;
},
set: function (value) {
this._primitive = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(BackgroundRectanglePrimitive.prototype, "selectInteraction", {
get: function () {
return this._selectInteraction;
},
set: function (value) {
this._selectInteraction = value;
},
enumerable: false,
configurable: true
});
return BackgroundRectanglePrimitive;
}(BaseElementContainer));
export { BackgroundRectanglePrimitive };
//# sourceMappingURL=BackgroundRectanglePrimitive.js.map