medsurf-draw
Version:
Draw annotations on jpg/zoomify images, based on PIXI.js
515 lines • 24.8 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 { BaseContainer, BaseContainerImageModel } from "../../bases/elements/BaseContainer";
import { Design } from "../../config/design";
import { debounce } from "debounce";
var SelectImageObjectElementModel = (function (_super) {
__extends(SelectImageObjectElementModel, _super);
function SelectImageObjectElementModel() {
return _super !== null && _super.apply(this, arguments) || this;
}
return SelectImageObjectElementModel;
}(BaseContainerImageModel));
export { SelectImageObjectElementModel };
var SelectItemElement = (function (_super) {
__extends(SelectItemElement, _super);
function SelectItemElement(model) {
var _this = _super.call(this, model) || this;
_this._menuShown = false;
_this.displayObject = undefined;
_this.zIndex = Design.selectImageObjectElement.zIndex;
_this._debounceUpdateRectangleMethod = debounce(_this.updateRectangle.bind(_this), 20).bind(_this);
_this._debounceOnMoveMethod = debounce(_this.controlSetDefaultMode.bind(_this), 50).bind(_this);
_this.on("added", function () {
_this.image.modeInteraction.on("default", _this._modeDefault, _this);
_this.image.modeInteraction.on("remove-default", _this._removeModeDefault, _this);
_this.image.modeInteraction.on("author", _this._modeAuthor, _this);
_this.image.modeInteraction.on("remove-author", _this._removeModeAuthor, _this);
_this.image.modeInteraction.on("setDefaultMode", _this.controlSetDefaultMode, _this);
_this.on("debounceUpdateRectangle", _this._debounceUpdateRectangleMethod);
});
_this.on("removed", function () {
_this.image.modeInteraction.off("default", _this._modeDefault, _this);
_this.image.modeInteraction.off("remove-default", _this._removeModeDefault, _this);
_this.image.modeInteraction.off("author", _this._modeAuthor, _this);
_this.image.modeInteraction.off("remove-author", _this._removeModeAuthor, _this);
_this.image.modeInteraction.off("setDefaultMode", _this.controlSetDefaultMode, _this);
_this.off("debounceUpdateRectangle", _this._debounceUpdateRectangleMethod);
});
return _this;
}
SelectItemElement.prototype.init = function () {
this.displayObject = undefined;
this.hideItem();
this.position.set(0, 0);
this._scaleElement = new MedsurfDraw.ScaleElement({
image: this.image,
type: MedsurfDraw.ScaleElementType.NOT_SCALEABLE,
rectangle: new PIXI.Rectangle(0, 0, 0, 0)
});
this._scaleElement.on("startScale", this.startScale, this);
this._scaleElement.on("onScale", this.onScale, this);
this._scaleElement.on("endScale", this.endScale, this);
this.addChild(this._scaleElement);
this._rotateElement = new MedsurfDraw.RotateElement({
image: this.image,
rectangle: new PIXI.Rectangle(0, 0, 0, 0)
});
this._rotateElement.rotateInteraction.on("startRotate", this.startRotate, this);
this._rotateElement.rotateInteraction.on("onRotate", this.onRotate, this);
this._rotateElement.rotateInteraction.on("endRotate", this.endRotate, this);
this.addChild(this._rotateElement);
this._rotateScaleElement = new MedsurfDraw.RotateScaleElement({
image: this.image,
rotateElement: this._rotateElement
});
this._rotateScaleElement.hideItem();
this.addChild(this._rotateScaleElement);
this._caretElement = new MedsurfDraw.CaretElement({
image: this.image,
textElement: undefined
});
this.addChild(this._caretElement);
this._selectionElement = new MedsurfDraw.SelectionElement({
image: this.image,
textElement: undefined
});
this.addChild(this._selectionElement);
this._menuElement = new MedsurfDraw.MenuElement({
image: this.image,
menuElements: undefined
});
this.image.parent.addChild(this._menuElement);
this._colorElement = new MedsurfDraw.ColorElement({
image: this.image,
rectangle: new PIXI.Rectangle(0, 0, 0, 0),
color: 0x000000,
colorAlpha: 0,
showAlpha: true,
});
this._colorElement.on("color", this.onColor, this);
this.addChild(this._colorElement);
this._numberElement = new MedsurfDraw.NumberElement({
image: this.image,
rectangle: new PIXI.Rectangle(0, 0, 0, 0),
value: 1,
minValue: 0,
maxValue: 10,
gab: 1,
});
this._numberElement.on('number', this.onNumber, this);
this.addChild(this._numberElement);
this.sortChildren();
this._setElements();
};
SelectItemElement.prototype.draw = function () {
this._scaleElement.draw();
this._rotateElement.draw();
this._rotateScaleElement.draw();
this._caretElement.draw();
this._selectionElement.draw();
this._menuElement.draw();
this._colorElement.draw();
this._numberElement.draw();
};
SelectItemElement.prototype.destroy = function (options) {
if (this._scaleElement) {
this._scaleElement.off("startScale", this.startScale, this);
this._scaleElement.off("onScale", this.onScale, this);
this._scaleElement.off("endScale", this.endScale, this);
this._scaleElement.destroy(options);
}
if (this._rotateElement) {
this._rotateElement.rotateInteraction.off("startRotate", this.startRotate, this);
this._rotateElement.rotateInteraction.off("onRotate", this.onRotate, this);
this._rotateElement.rotateInteraction.off("endRotate", this.endRotate, this);
this._rotateElement.destroy(options);
}
if (this._rotateScaleElement) {
this._rotateScaleElement.destroy(options);
}
if (this._caretElement) {
this._caretElement.destroy(options);
}
if (this._selectionElement) {
this._selectionElement.destroy(options);
}
if (this._menuElement) {
this._menuElement.destroy(options);
}
if (this._colorElement) {
this._colorElement.off("color", this.onColor, this);
this._colorElement.destroy(options);
}
if (this._numberElement) {
this._numberElement.off('number', this.onNumber, this);
this._numberElement.destroy(options);
}
_super.prototype.destroy.call(this, options);
};
SelectItemElement.prototype.updateRectangle = function () {
var displayObject = this._getSelectedDisplayObject();
var rectangle = undefined;
if (displayObject) {
rectangle = this._getSelectedItemsRectangle(displayObject);
if (rectangle) {
var pivotWidth = rectangle.width / 2;
var pivotHeight = rectangle.height / 2;
var rotation = displayObject.getRotation();
rectangle.pad(Design.selectElement.groupPad, Design.selectElement.groupPad);
this.position.set(rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2);
this._scaleElement.rectangle = new PIXI.Rectangle(0, 0, rectangle.width, rectangle.height);
this._scaleElement.rotation = rotation;
this._scaleElement.draw();
this._rotateElement.rectangle = new PIXI.Rectangle(0, 0, rectangle.width, rectangle.height);
this._rotateElement.rotation = rotation;
this._rotateElement.draw();
this._rotateScaleElement.draw();
this._caretElement.pivot.set(pivotWidth, pivotHeight);
this._caretElement.rotation = rotation;
this._caretElement.draw();
this._selectionElement.pivot.set(pivotWidth, pivotHeight);
this._selectionElement.rotation = rotation;
this._selectionElement.draw();
this._colorElement.rectangle = new PIXI.Rectangle(0, 0, rectangle.width, rectangle.height);
this._colorElement.draw();
this._numberElement.rectangle = new PIXI.Rectangle(0, 0, rectangle.width, rectangle.height);
this._numberElement.draw();
}
}
return { displayObject: displayObject, rectangle: rectangle };
};
SelectItemElement.prototype.saveColor = function (color, colorAlpha) {
this._colorElement.saveColor(color, colorAlpha);
};
SelectItemElement.prototype._setElements = function () {
this.hideItem();
if (!this.parent) {
return;
}
var data = this.updateRectangle();
if (data.rectangle) {
this.displayObject = data.displayObject;
this.showItem();
}
else {
this.displayObject = undefined;
}
this.emit("debounceDraw");
};
SelectItemElement.prototype._getSelectedDisplayObject = function () {
if (this.image.modeInteraction.lastMode.startsWith('select_item')) {
return this.image;
}
var imageObjects = this.image.getImageObjects();
var displayObjects;
for (var i = 0; i <= Design.selectImageObjectElement.displayObjectDepth; i++) {
displayObjects = imageObjects.filter(function (displayObject) { return displayObject.modeInteraction && displayObject.modeInteraction.lastMode.startsWith('select_item'); });
if (displayObjects.length > 0) {
return displayObjects[0];
}
imageObjects = imageObjects
.filter(function (displayObject) { return displayObject.modeInteraction && displayObject.modeInteraction.lastMode === 'select_child'; })
.map(function (displayObject) { return displayObject.children; })
.reduce(function (cur, acc) { return __spreadArray(__spreadArray([], cur, true), acc, true); }, []);
}
return undefined;
};
SelectItemElement.prototype._getSelectedItemsRectangle = function (displayObject) {
if (displayObject) {
return displayObject.getElementRectangle();
}
else {
return undefined;
}
};
SelectItemElement.prototype._setEventsForDisplayObjects = function (displayObject) {
if (displayObject instanceof MedsurfDraw.EditableText) {
displayObject.writeInteraction.on("onCaret", this._caretElement.onCaret, this._caretElement);
displayObject.writeInteraction.on("onSelection", this._selectionElement.onSelection, this._selectionElement);
}
if (displayObject instanceof MedsurfDraw.Line) {
displayObject.on("startMovePoint", this.controlStartMove, this);
displayObject.on("endMovePoint", this.controlSetDefaultMode, this);
}
if (displayObject && displayObject.moveInteraction) {
displayObject.moveInteraction.on("startMove", this.controlStartMove, this);
displayObject.moveInteraction.on("endMove", this.controlSetDefaultMode, this);
this._displayObject = displayObject;
}
};
SelectItemElement.prototype._unsetEventsForDisplayObjects = function (displayObject) {
if (displayObject instanceof MedsurfDraw.EditableText) {
displayObject.writeInteraction.off("onCaret", this._caretElement.onCaret, this._caretElement);
displayObject.writeInteraction.off("onSelection", this._selectionElement.onSelection, this._selectionElement);
}
if (displayObject instanceof MedsurfDraw.Line) {
displayObject.off("startMovePoint", this.controlStartMove, this);
displayObject.off("endMovePoint", this.controlSetDefaultMode, this);
}
if (displayObject && displayObject.moveInteraction) {
displayObject.moveInteraction.off("startMove", this.controlStartMove, this);
displayObject.moveInteraction.off("endMove", this.controlSetDefaultMode, this);
}
};
SelectItemElement.prototype._modeDefault = function () {
this.hideItem();
};
SelectItemElement.prototype._removeModeDefault = function () {
this.hideItem();
};
SelectItemElement.prototype._modeAuthor = function () {
this.hideItem();
};
SelectItemElement.prototype._removeModeAuthor = function () {
this.hideItem();
};
SelectItemElement.prototype.displayMenu = function (event) {
var _this = this;
if (!this.visible) {
return;
}
event.stopPropagation();
this._menuShown = true;
var point = this.image.getMousePosition();
this._menuElement.setMousePosition(point);
this._menuElement.showItem();
this.image.moveInteraction.once("startMove", function () {
_this._menuElement.hideItem();
});
this.image.moveInteraction.once("endMoveLock", function () {
_this._menuShown = false;
});
};
SelectItemElement.prototype.controlHideMenu = function () {
this._menuElement.hideItem();
};
SelectItemElement.prototype.controlStartMove = function () {
this.hideItem();
};
SelectItemElement.prototype.controlSetDefaultMode = function () {
this._setElements();
};
SelectItemElement.prototype.startScale = function (event, scaleSide) {
if (this.displayObject.scaleInteraction) {
this.displayObject.scaleInteraction.startScale(event, scaleSide);
}
};
SelectItemElement.prototype.onScale = function (event) {
if (this.displayObject.scaleInteraction) {
this.displayObject.scaleInteraction.onScale(event);
}
this.updateRectangle();
};
SelectItemElement.prototype.endScale = function (event) {
if (this.displayObject.scaleInteraction) {
this.displayObject.scaleInteraction.endScale(event);
}
};
SelectItemElement.prototype.startRotate = function () {
this.displayObject.startRotate();
this._scaleElement.hideItem();
this._rotateScaleElement.showItem();
this._menuElement.hideItem();
};
SelectItemElement.prototype.onRotate = function (degree) {
this.displayObject.onRotate(degree);
this.updateRectangle();
};
SelectItemElement.prototype.endRotate = function () {
this.displayObject.endRotate();
this._scaleElement.showItem();
this._rotateScaleElement.hideItem();
};
SelectItemElement.prototype.onColor = function (hasLine, color, colorAlpha) {
this.displayObject.onColor(hasLine, color, colorAlpha);
};
SelectItemElement.prototype.onNumber = function (number) {
this.displayObject.onNumber(number);
};
SelectItemElement.prototype.onImageZoom = function (scaleX, scaleY) {
this.emit("debounceUpdateRectangle");
};
Object.defineProperty(SelectItemElement.prototype, "displayObject", {
get: function () {
return this._displayObject;
},
set: function (value) {
this._unsetEventsForDisplayObjects(this.displayObject);
this._displayObject = value;
this.image.off('rightup', this.displayMenu, this);
if (this.displayObject) {
if (this.displayObject.modeInteraction.lastMode === 'select_item') {
if (this.displayObject instanceof MedsurfDraw.PositionPoint
|| this.displayObject instanceof MedsurfDraw.FillCollection
|| this.displayObject instanceof MedsurfDraw.LegendCollection
|| this.displayObject instanceof MedsurfDraw.LegendColumn
|| this.displayObject instanceof MedsurfDraw.LegendRow
|| this.displayObject instanceof MedsurfDraw.Line) {
this._scaleElement.type = MedsurfDraw.ScaleElementType.NOT_SCALEABLE;
this._scaleElement.showItem();
this._rotateElement.hideItem();
}
else if (this.displayObject instanceof MedsurfDraw.Text) {
this._scaleElement.type = MedsurfDraw.ScaleElementType.TEXT;
this._scaleElement.showItem();
this._rotateElement.hideItem();
}
else {
this._scaleElement.type = MedsurfDraw.ScaleElementType.SCALEABLE;
this._scaleElement.showItem();
if (this.displayObject instanceof MedsurfDraw.LegendCollection) {
this._rotateElement.hideItem();
}
else if (this._displayObject !== undefined) {
this._rotateElement.showItem();
}
}
if (this.displayObject instanceof MedsurfDraw.EditableText) {
this._caretElement.textElement = this.displayObject;
this._caretElement.onCaret();
this._caretElement.showItem();
}
else {
this._caretElement.hideItem();
}
if (this.displayObject instanceof MedsurfDraw.EditableText) {
this._selectionElement.textElement = this.displayObject;
this._selectionElement.showItem();
}
else {
this._selectionElement.hideItem();
}
if (!(this.displayObject instanceof MedsurfDraw.Text)) {
this._menuElement.menuElements = this.displayObject.imageObjectMenu;
this.image.parent.on('rightup', this.displayMenu, this);
}
else {
this._menuElement.hideItem();
}
this._colorElement.hideItem();
this._numberElement.hideItem();
}
else if (this.displayObject.modeInteraction.lastMode.startsWith('select_item_color')) {
this._scaleElement.hideItem();
this._rotateElement.hideItem();
this._caretElement.hideItem();
this._selectionElement.hideItem();
this._menuElement.hideItem();
if (this.displayObject instanceof MedsurfDraw.ArrowPrimitive
|| this.displayObject instanceof MedsurfDraw.EllipsePrimitive
|| this.displayObject instanceof MedsurfDraw.RectanglePrimitive) {
if (this.displayObject.modeInteraction.lastMode === 'select_item_color_line') {
this._colorElement.showAlpha = true;
this._colorElement.color = this.displayObject.model.options.lineColor;
this._colorElement.colorAlpha = this.displayObject.model.options.lineAlpha;
}
else if (this.displayObject.modeInteraction.lastMode === 'select_item_color_fill') {
this._colorElement.showAlpha = true;
this._colorElement.color = this.displayObject.model.options.fillColor;
this._colorElement.colorAlpha = this.displayObject.model.options.fillAlpha;
}
}
if (this.displayObject instanceof MedsurfDraw.TextPrimitive) {
if (this.displayObject.modeInteraction.lastMode === 'select_item_color_font') {
this._colorElement.showAlpha = false;
this._colorElement.color = this.displayObject.model.style.fill;
this._colorElement.colorAlpha = undefined;
}
}
this._colorElement.showItem();
this._numberElement.hideItem();
}
else if (this.displayObject.modeInteraction.lastMode.startsWith('select_item_number')) {
this._scaleElement.hideItem();
this._rotateElement.hideItem();
this._caretElement.hideItem();
this._selectionElement.hideItem();
this._menuElement.hideItem();
this._colorElement.hideItem();
if (this.displayObject instanceof MedsurfDraw.ArrowPrimitive
|| this.displayObject instanceof MedsurfDraw.EllipsePrimitive
|| this.displayObject instanceof MedsurfDraw.RectanglePrimitive
|| this.displayObject instanceof MedsurfDraw.TextPrimitive) {
var numberData = this.displayObject.getNumberData();
this._numberElement.value = numberData.value;
this._numberElement.minValue = numberData.minValue;
this._numberElement.maxValue = numberData.maxValue;
this._numberElement.gab = numberData.gab;
}
this._numberElement.showItem();
}
else {
this._scaleElement.hideItem();
this._rotateElement.hideItem();
this._caretElement.hideItem();
this._selectionElement.hideItem();
this._menuElement.hideItem();
this._colorElement.hideItem();
this._numberElement.hideItem();
}
}
else {
if (this._scaleElement) {
this._scaleElement.hideItem();
}
if (this._rotateElement) {
this._rotateElement.hideItem();
}
if (this._caretElement) {
this._caretElement.hideItem();
}
if (this._selectionElement) {
this._selectionElement.hideItem();
}
if (this._menuElement) {
this._menuElement.menuElements = undefined;
this._menuElement.hideItem();
}
if (this._colorElement) {
this._colorElement.hideItem();
}
if (this._numberElement) {
this._numberElement.hideItem();
}
}
this._setEventsForDisplayObjects(this.displayObject);
},
enumerable: false,
configurable: true
});
Object.defineProperty(SelectItemElement.prototype, "menuShown", {
get: function () {
return this._menuShown;
},
enumerable: false,
configurable: true
});
return SelectItemElement;
}(BaseContainer));
export { SelectItemElement };
//# sourceMappingURL=SelectItemElement.js.map