medsurf-draw
Version:
Draw annotations on jpg/zoomify images, based on PIXI.js
976 lines • 66.6 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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
import * as PIXI from "pixi.js-legacy";
import * as MedsurfDraw from "../../public-api";
import { BaseContainer, BaseContainerModel } from "../../bases/elements/BaseContainer";
import { Design } from "../../config/design";
import { debounce } from "debounce";
export var ImageTypes;
(function (ImageTypes) {
ImageTypes[ImageTypes["NORMAL"] = 0] = "NORMAL";
ImageTypes[ImageTypes["DEEPZOOM"] = 1] = "DEEPZOOM";
ImageTypes[ImageTypes["VIDEO"] = 2] = "VIDEO";
})(ImageTypes || (ImageTypes = {}));
var Dimensions = (function () {
function Dimensions() {
}
return Dimensions;
}());
export { Dimensions };
var ImageModel = (function (_super) {
__extends(ImageModel, _super);
function ImageModel() {
return _super !== null && _super.apply(this, arguments) || this;
}
return ImageModel;
}(BaseContainerModel));
export { ImageModel };
var ControlModel = (function () {
function ControlModel() {
}
return ControlModel;
}());
export { ControlModel };
var Image = (function (_super) {
__extends(Image, _super);
function Image(model, type) {
if (type === void 0) { type = ImageTypes.NORMAL; }
var _this = _super.call(this, model) || this;
if (_this.data.dimensions.width === undefined) {
throw 'Dimension width not set correctly';
}
if (_this.data.dimensions.height === undefined) {
throw 'Dimension height not set correctly';
}
_this.name = _this.imageId;
_this.imageObjectMenu = [];
_this.groupingMenu = [];
_this.layerGroups = [];
_this.zIndex = Design.image.zIndex;
_this.cursor = "move";
_this.cursor = "default";
_this.modeInteraction.on("remove-init", _this._modeRemoveInit, _this);
_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("drawing", _this._modeDrawing, _this);
_this.modeInteraction.on("remove-drawing", _this._removeModeDrawing, _this);
_this.modeInteraction.on("choosing", _this._modeChoosing, _this);
_this.modeInteraction.on("remove-choosing", _this._removeModeChoosing, _this);
_this.modeInteraction.on("cloning", _this._modeCloning, _this);
_this.modeInteraction.on("remove-cloning", _this._removeModeCloning, _this);
_this.contextInteraction = new MedsurfDraw.ContextInteraction(_this);
_this.contextInteraction.on("endRight", _this.endRight, _this);
_this.moveInteraction = new MedsurfDraw.MoveInteraction(_this, true);
_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.zoomInteraction = new MedsurfDraw.ZoomInteraction(_this);
_this.zoomInteraction.on("onZoom", _this.onZoom, _this);
_this._debounceUnselectLayerGroupMethod = debounce(_this.unselectLayerGroup.bind(_this), 50).bind(_this);
_this._debounceUnselectGroupingMethod = debounce(_this.unselectGrouping.bind(_this), 50).bind(_this);
_this._wheelMethod = _this.zoomInteraction.onZoom.bind(_this.zoomInteraction);
_this.on("added", function (parent) {
parent.on("resize", _this.onResize, _this);
parent.on("mousedown", _this.moveInteraction.startMove, _this.moveInteraction);
parent.on("pointermove", _this.moveInteraction.onMove, _this.moveInteraction);
parent.on("mouseup", _this.moveInteraction.endMove, _this.moveInteraction);
_this.on("debouncedUnselectLayerGroup", _this._debounceUnselectLayerGroupMethod);
_this.on("debouncedUnselectGrouping", _this._debounceUnselectGroupingMethod);
_this.canvas.addEventListener("wheel", _this._wheelMethod);
});
_this.on("removed", function (parent) {
parent.off("resize", _this.onResize, _this);
parent.off("mousedown", _this.moveInteraction.startMove, _this.moveInteraction);
parent.off("pointermove", _this.moveInteraction.onMove, _this.moveInteraction);
parent.off("mouseup", _this.moveInteraction.endMove, _this.moveInteraction);
_this.off("debouncedUnselectLayerGroup", _this._debounceUnselectLayerGroupMethod);
_this.off("debouncedUnselectGrouping", _this._debounceUnselectGroupingMethod);
_this.canvas.removeEventListener("wheel", _this._wheelMethod);
});
return _this;
}
Image.prototype.init = function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4, this.onResize()];
case 1:
_a.sent();
this._selectGroupElement = new MedsurfDraw.SelectGroupElement({
image: this
});
this.addChild(this._selectGroupElement);
this._selectItemElement = new MedsurfDraw.SelectItemElement({
image: this
});
this.addChild(this._selectItemElement);
this._imageObjectMenuElement = new MedsurfDraw.MenuElement({
image: this,
menuElements: undefined
});
this.parent.addChild(this._imageObjectMenuElement);
this._groupingMenuElement = new MedsurfDraw.MenuElement({
image: this,
menuElements: undefined
});
this.parent.addChild(this._groupingMenuElement);
this._clipboardButtonElement = new MedsurfDraw.RoundButtonElement({
image: this,
text: '\uf0ea',
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.groupingMenu.push({
element: this._clipboardButtonElement,
order: 1,
});
this._interactiveAreaButtonElement = new MedsurfDraw.IndexedRoundButtonElement({
image: this,
text: '\uf304',
description: 'Zeichenstift\n(Interaktiv)',
descriptionFontSize: Design.subMenu.descriptionFontSize,
index: '\uf277',
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
});
this._interactiveAreaButtonElement.on("button", this.onButtonInteractiveArea, this);
this._polygonButtonElement = new MedsurfDraw.RoundSubMenuElement({
image: this,
text: '\uf304',
description: 'Zeichenstift',
descriptionFontSize: Design.subMenu.descriptionFontSize,
menuElements: [
{
element: this._interactiveAreaButtonElement,
order: 0,
}
],
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius)
});
this._polygonButtonElement.on("onHover", this._polygonButtonElement.showMenu, this._polygonButtonElement);
this._polygonButtonElement.on("button", this.onButtonPolygon, this);
this._polygonButtonElement.on("toggleMenu", this.onMenuPolygon, this);
this.imageObjectMenu.push({
element: this._polygonButtonElement,
order: 0,
});
this._legendButtonElement = new MedsurfDraw.IndexedRoundButtonElement({
image: this,
text: '\uf893',
description: 'Text\n(Legende)',
descriptionFontSize: Design.subMenu.descriptionFontSize,
index: '\uf0cb',
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
});
this._legendButtonElement.on("button", this.onButtonLegendGrouping, this);
this._textButtonElement = new MedsurfDraw.RoundSubMenuElement({
image: this,
text: '\uf893',
description: 'Text',
descriptionFontSize: Design.subMenu.descriptionFontSize,
menuElements: [
{
element: this._legendButtonElement,
order: 0,
}
],
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius)
});
this._textButtonElement.on("onHover", this._textButtonElement.showMenu, this._textButtonElement);
this._textButtonElement.on("button", this.onButtonText, this);
this._textButtonElement.on("toggleMenu", this.onMenuText, this);
this.imageObjectMenu.push({
element: this._textButtonElement,
order: 7,
});
this._arrowTextGroupingButtonElement = new MedsurfDraw.IndexedRoundButtonElement({
image: this,
text: '\uf124',
description: 'Pfeil\n(Farbgruppe)',
descriptionFontSize: Design.subMenu.descriptionFontSize,
index: '\uf53f',
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
});
this._arrowTextGroupingButtonElement.on("button", this.onButtonArrowTextGrouping, this);
this._arrowButtonElement = new MedsurfDraw.RoundSubMenuElement({
image: this,
text: '\uf124',
description: 'Pfeil',
descriptionFontSize: Design.subMenu.descriptionFontSize,
menuElements: [
{
element: this._arrowTextGroupingButtonElement,
order: 0,
}
],
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius)
});
this._arrowButtonElement.on("onHover", this._arrowButtonElement.showMenu, this._arrowButtonElement);
this._arrowButtonElement.on("button", this.onButtonArrow, this);
this._arrowButtonElement.on("toggleMenu", this.onMenuArrow, this);
this.imageObjectMenu.push({
element: this._arrowButtonElement,
order: 6,
});
this._ellipseInteractiveGroupingButtonElement = new MedsurfDraw.IndexedRoundButtonElement({
image: this,
text: '\uf5ed',
description: 'Ellipse\n(Interaktiv)',
descriptionFontSize: Design.subMenu.descriptionFontSize,
index: '\uf277',
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
});
this._ellipseInteractiveGroupingButtonElement.on("button", this.onButtonEllipseInteractiveGrouping, this);
this._ellipseButtonElement = new MedsurfDraw.RoundSubMenuElement({
image: this,
text: '\uf5ed',
description: 'Ellipse',
descriptionFontSize: Design.subMenu.descriptionFontSize,
menuElements: [
{
element: this._ellipseInteractiveGroupingButtonElement,
order: 0,
}
],
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius)
});
this._ellipseButtonElement.on("onHover", this._ellipseButtonElement.showMenu, this._ellipseButtonElement);
this._ellipseButtonElement.on("button", this.onButtonEllipse, this);
this._ellipseButtonElement.on("toggleMenu", this.onMenuEllipse, this);
this.imageObjectMenu.push({
element: this._ellipseButtonElement,
order: 5,
});
this._rectangleInteractiveGroupingButtonElement = new MedsurfDraw.IndexedRoundButtonElement({
image: this,
text: '\uf5ef',
description: 'Rechteck\n(Interaktiv)',
descriptionFontSize: Design.subMenu.descriptionFontSize,
index: '\uf277',
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
});
this._rectangleInteractiveGroupingButtonElement.on("button", this.onButtonRectangleInteractiveGrouping, this);
this._rectangleButtonElement = new MedsurfDraw.RoundSubMenuElement({
image: this,
text: '\uf5ef',
description: 'Rechteck',
descriptionFontSize: Design.subMenu.descriptionFontSize,
menuElements: [
{
element: this._rectangleInteractiveGroupingButtonElement,
order: 0,
}
],
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius)
});
this._rectangleButtonElement.on("onHover", this._rectangleButtonElement.showMenu, this._rectangleButtonElement);
this._rectangleButtonElement.on("button", this.onButtonRectangle, this);
this._rectangleButtonElement.on("toggleMenu", this.onMenuRectangle, this);
this.imageObjectMenu.push({
element: this._rectangleButtonElement,
order: 4,
});
this._arrowMarkerButtonElement = new MedsurfDraw.RoundButtonElement({
image: this,
text: '\uf30a',
description: 'Marker\n(Pfeil)',
descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor,
});
this._arrowMarkerButtonElement.on("onHover", this.collapseAllMenus, this);
this._arrowMarkerButtonElement.on("button", this.onButtonArrowMarker, this);
this.imageObjectMenu.push({
element: this._arrowMarkerButtonElement,
order: 3,
});
this._ellipseMarkerButtonElement = new MedsurfDraw.RoundButtonElement({
image: this,
text: '\uf276',
description: 'Marker\n(Punkt)',
descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
});
this._ellipseMarkerButtonElement.on("onHover", this.collapseAllMenus, this);
this._ellipseMarkerButtonElement.on("button", this.onButtonEllipseMarker, this);
this.imageObjectMenu.push({
element: this._ellipseMarkerButtonElement,
order: 2,
});
this._imageObjectMenuElement.menuElements = this.imageObjectMenu;
this._imageObjectMenuElement.hideItem();
this._interactiveGroupingButtonElement = new MedsurfDraw.RoundButtonElement({
image: this,
text: '\uf277',
description: 'Interaktive\nFläche\n(Gruppe)',
descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
});
this._interactiveGroupingButtonElement.on("onHover", this.collapseAllMenus, this);
this._interactiveGroupingButtonElement.on("button", this.onButtonInteractiveGrouping, this);
this.groupingMenu.push({
element: this._interactiveGroupingButtonElement,
order: 0,
});
this._poiGroupingButtonElement = new MedsurfDraw.RoundButtonElement({
image: this,
text: '\uf649',
description: 'POI\n(Gruppe)',
descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
});
this._poiGroupingButtonElement.on("onHover", this.collapseAllMenus, this);
this._poiGroupingButtonElement.on("button", this.onButtonPoiGrouping, this);
this.groupingMenu.push({
element: this._poiGroupingButtonElement,
order: 5,
});
this._textGroupingButtonElement = new MedsurfDraw.RoundButtonElement({
image: this,
text: '\uf53f',
description: 'Farbgruppe',
descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
});
this._textGroupingButtonElement.on("onHover", this.collapseAllMenus, this);
this._textGroupingButtonElement.on("button", this.onButtonTextGrouping, this);
this.groupingMenu.push({
element: this._textGroupingButtonElement,
order: 6,
});
this._legendGroupingButtonElement = new MedsurfDraw.RoundButtonElement({
image: this,
text: '\uf0cb',
description: 'Legende\n(Gruppe)',
descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
});
this._legendGroupingButtonElement.on("onHover", this.collapseAllMenus, this);
this._legendGroupingButtonElement.on("button", this.onButtonLegendGrouping, this);
this.groupingMenu.push({
element: this._legendGroupingButtonElement,
order: 7,
});
this._groupingMenuElement.menuElements = this.groupingMenu;
this._groupingMenuElement.hideItem();
return [2, Promise.resolve()];
}
});
});
};
Image.prototype.draw = function () {
this._imageObjectMenuElement.draw();
this._groupingMenuElement.draw();
};
Image.prototype.destroy = function (options) {
if (this.modeInteraction) {
this.modeInteraction.off("remove-init", this._modeRemoveInit, this);
this.modeInteraction.off("default", this._modeDefault, this);
this.modeInteraction.off("remove-default", this._removeModeDefault, this);
this.modeInteraction.off("marker", this._modeMarker, this);
this.modeInteraction.off("remove-marker", this._removeModeMarker, this);
this.modeInteraction.off("selftest", this._modeSelftest, this);
this.modeInteraction.off("remove-selftest", this._removeModeSelftest, this);
this.modeInteraction.off("author", this._modeAuthor, this);
this.modeInteraction.off("remove-author", this._removeModeAuthor, this);
this.modeInteraction.off("drawing", this._modeDrawing, this);
this.modeInteraction.off("remove-drawing", this._removeModeDrawing, this);
this.modeInteraction.off("choosing", this._modeChoosing, this);
this.modeInteraction.off("remove-choosing", this._removeModeChoosing, this);
this.modeInteraction.off("cloning", this._modeCloning, this);
this.modeInteraction.off("remove-cloning", this._removeModeCloning, this);
}
if (this.contextInteraction) {
this.contextInteraction.off("endRight", this.endRight, this);
}
if (this.moveInteraction) {
this.moveInteraction.off("onMove", this.onMove, this);
}
if (this.zoomInteraction) {
this.zoomInteraction.off("onZoom", this.onZoom, this);
}
if (this._selectGroupElement) {
this._selectGroupElement.destroy(options);
}
if (this._selectItemElement) {
this._selectItemElement.destroy(options);
}
if (this._imageObjectMenuElement) {
this._imageObjectMenuElement.destroy(options);
}
if (this._groupingMenuElement) {
this._groupingMenuElement.destroy(options);
}
if (this._spriteElement) {
this._spriteElement.destroy(options);
}
if (this._clipboardButtonElement) {
this._clipboardButtonElement.destroy(options);
}
if (this._interactiveAreaButtonElement) {
this._interactiveAreaButtonElement.destroy(options);
}
if (this._polygonButtonElement) {
this._polygonButtonElement.destroy(options);
}
if (this._legendButtonElement) {
this._legendButtonElement.destroy(options);
}
if (this._textButtonElement) {
this._textButtonElement.destroy(options);
}
if (this._arrowTextGroupingButtonElement) {
this._arrowTextGroupingButtonElement.destroy(options);
}
if (this._arrowButtonElement) {
this._arrowButtonElement.destroy(options);
}
if (this._ellipseInteractiveGroupingButtonElement) {
this._ellipseInteractiveGroupingButtonElement.destroy(options);
}
if (this._ellipseButtonElement) {
this._ellipseButtonElement.destroy(options);
}
if (this._rectangleInteractiveGroupingButtonElement) {
this._rectangleInteractiveGroupingButtonElement.destroy(options);
}
if (this._rectangleButtonElement) {
this._rectangleButtonElement.destroy(options);
}
if (this._arrowMarkerButtonElement) {
this._arrowMarkerButtonElement.destroy(options);
}
if (this._ellipseMarkerButtonElement) {
this._ellipseMarkerButtonElement.destroy(options);
}
_super.prototype.destroy.call(this, options);
};
Image.prototype.getImageObjects = function () {
return this.children
.filter(function (displayObject) {
return displayObject instanceof MedsurfDraw.PositionPoint
|| displayObject instanceof MedsurfDraw.Line
|| displayObject instanceof MedsurfDraw.FillCollection
|| displayObject instanceof MedsurfDraw.LegendCollection;
});
};
Image.prototype.getLinesByPositionPoint = function (point) {
return this.getImageObjects().filter(function (element) { return element instanceof MedsurfDraw.Line && element.hasPositionPoint(point); });
};
Image.prototype.resetGenerator = function () {
};
Image.prototype.getTexture = function () {
return this._spriteElement.texture;
};
Image.prototype.getMousePosition = function () {
return this.renderer.plugins.interaction.mouse.getLocalPosition(this);
};
Image.prototype.getGroupImageFromGrouping = function (grouping) {
var _this = this;
if (grouping.groupImages) {
return grouping.groupImages.find(function (gi) { return !gi.deleted && gi.image.id === _this.imageId; });
}
return undefined;
};
Image.prototype.getDisplayObjectsByGrouping = function (grouping) {
var _this = this;
var groupImage = this.getGroupImageFromGrouping(grouping);
if (groupImage && groupImage.layerGroupObjects) {
var imageObjects_1 = [];
groupImage.layerGroupObjects.filter(function (lgo) { return !lgo.deleted; }).forEach(function (lgo) {
var _a;
var layerGroup = _this.layerGroups.find(function (lg) { return !lg.deleted && lg.id === lgo.layerGroup; });
if (layerGroup) {
(_a = _this.getLayerGroupDisplayObjectsByLayerGroup(layerGroup)) === null || _a === void 0 ? void 0 : _a.forEach(function (imageObject) {
if (imageObjects_1.findIndex(function (io) { return io === imageObject; }) === -1) {
imageObjects_1.push(imageObject);
}
});
}
});
return imageObjects_1;
}
return undefined;
};
Image.prototype.getLayerGroupByImageObject = function (imageObject) {
if (this.layerGroups) {
for (var _i = 0, _a = this.layerGroups; _i < _a.length; _i++) {
var group = _a[_i];
var tmpImageObjects = group.layerImageObjects ? group.layerImageObjects.filter(function (lio) { return !lio.deleted; }).map(function (io) { return io.imageObject; }) || [] : [];
if (tmpImageObjects.filter(function (id) { return id === imageObject.id; })[0]) {
return group;
}
}
}
return undefined;
};
Image.prototype.getLayerGroupDisplayObjectsByImageObject = function (imageObject) {
var layerGroup = this.getLayerGroupByImageObject(imageObject);
if (layerGroup) {
return this.getLayerGroupDisplayObjectsByLayerGroup(layerGroup);
}
return undefined;
};
Image.prototype.getLayerGroupDisplayObjectsByLayerGroup = function (layerGroup) {
var _a;
var layerImageObjects = (_a = layerGroup.layerImageObjects) === null || _a === void 0 ? void 0 : _a.filter(function (lio) { return !lio.deleted; });
if (layerImageObjects) {
var layerGroupImageObjects_1 = layerImageObjects.map(function (imageObject) { return imageObject.imageObject; });
return this.getImageObjects().filter(function (imageObject) { return layerGroupImageObjects_1.indexOf(imageObject.name) > -1; });
}
return undefined;
};
Image.prototype.getLineForElements = function (start, end) {
return this.children.find(function (element) { return element instanceof MedsurfDraw.Line && element.hasPositionPoint(start) && element.hasPositionPoint(end); });
};
Image.prototype.getNavigatorScale = function () {
return new PIXI.Point(1 / this._scaleX * this.scale.x, 1 / this._scaleY * this.scale.y);
};
Image.prototype._fitToScreen = function (width, height) {
return __awaiter(this, void 0, void 0, function () {
var height1, width2;
return __generator(this, function (_a) {
if (!this) {
return [2];
}
height1 = this.dimensions.height * width / this.dimensions.width;
width2 = this.dimensions.width * height / this.dimensions.height;
if (height1 > height) {
this._scaleX = Math.floor(width2 / this.dimensions.width * 1000) / 1000;
this._scaleY = Math.floor(height / this.dimensions.height * 1000) / 1000;
}
else {
this._scaleX = Math.floor(width / this.dimensions.width * 1000) / 1000;
this._scaleY = Math.floor(height1 / this.dimensions.height * 1000) / 1000;
}
this.scale.set(this._scaleX, this._scaleY);
this.position.set((this.canvas.width - this.dimensions.width * this._scaleX) / 2, (this.canvas.height - this.dimensions.height * this._scaleY) / 2);
debounce(this.emit.bind(this, "imageZoom", this.scale.x, this.scale.y), 50)();
return [2, Promise.resolve()];
});
});
};
Image.prototype._setActualValues = function () {
return __awaiter(this, void 0, void 0, function () {
var tmpWidth, tmpHeight;
return __generator(this, function (_a) {
tmpWidth = this.dimensions.width / this.dimensions.height * this.canvas.height;
tmpHeight = this.dimensions.height / this.dimensions.width * this.canvas.width;
if (tmpHeight > this.canvas.height) {
this._actualWidth = tmpWidth;
this._actualHeight = this.canvas.height;
}
else {
this._actualWidth = this.canvas.width;
this._actualHeight = tmpHeight;
}
return [2, Promise.resolve()];
});
});
};
Image.prototype._modeRemoveInit = function () {
this._spriteElement = new MedsurfDraw.Sprite({
texture: PIXI.Texture.from(this.url, { resourceOptions: { crossorigin: true } }) || PIXI.Texture.EMPTY
});
this.addChild(this._spriteElement);
this.sortChildren();
this.emit("debounceDraw");
};
Image.prototype._modeDefault = function () {
};
Image.prototype._removeModeDefault = function () {
};
Image.prototype._modeMarker = function () {
};
Image.prototype._removeModeMarker = function () {
};
Image.prototype._modeSelftest = function () {
};
Image.prototype._removeModeSelftest = function () {
};
Image.prototype._modeAuthor = function () {
this.parent.on("rightup", this.contextInteraction.endRight, this.contextInteraction);
};
Image.prototype._removeModeAuthor = function () {
this.parent.off("rightup", this.contextInteraction.endRight, this.contextInteraction);
};
Image.prototype._modeDrawing = function () {
};
Image.prototype._removeModeDrawing = function () {
};
Image.prototype._modeChoosing = function () {
};
Image.prototype._removeModeChoosing = function () {
};
Image.prototype._modeCloning = function () {
};
Image.prototype._removeModeCloning = function () {
};
Image.prototype.displayMenu = function () {
if (this._selectGroupElement.visible || this._selectItemElement.visible) {
return;
}
var point = this.image.getMousePosition();
var scale = this.imageScale;
if (MedsurfDraw.Keyboard.isKeyDown("KeyG")) {
this._groupingMenuElement.setMousePosition(point);
this._groupingMenuElement.showItem();
}
else {
this._imageObjectMenuElement.setMousePosition(point);
this._imageObjectMenuElement.showItem();
}
this.image.moveInteraction.off("endMoveLock", this.image.endMoveLock, this.image);
this.image.moveInteraction.once("endMoveLock", this.image.endMoveMenu, this.image);
};
Image.prototype.collapseAllMenus = function (event) {
this._polygonButtonElement.toggleMenu(event, false);
this._textButtonElement.toggleMenu(event, false);
this._arrowButtonElement.toggleMenu(event, false);
this._ellipseButtonElement.toggleMenu(event, false);
this._rectangleButtonElement.toggleMenu(event, false);
};
Image.prototype.onButtonClipboard = function () {
this._imageObjectMenuElement.hideItem();
this.cloneFromClipboard();
};
Image.prototype.onButtonInteractiveArea = function () {
this._imageObjectMenuElement.hideItem();
this.createInteractiveArea();
};
Image.prototype.onButtonPolygon = function () {
this._imageObjectMenuElement.hideItem();
this.createFill();
};
Image.prototype.onMenuPolygon = function (event, visible) {
if (visible) {
this._textButtonElement.toggleMenu(event, false);
this._arrowButtonElement.toggleMenu(event, false);
this._ellipseButtonElement.toggleMenu(event, false);
this._rectangleButtonElement.toggleMenu(event, false);
}
};
Image.prototype.onButtonText = function () {
this._imageObjectMenuElement.hideItem();
this.createText();
};
Image.prototype.onMenuText = function (event, visible) {
if (visible) {
this._polygonButtonElement.toggleMenu(event, false);
this._arrowButtonElement.toggleMenu(event, false);
this._ellipseButtonElement.toggleMenu(event, false);
this._rectangleButtonElement.toggleMenu(event, false);
}
};
Image.prototype.onButtonArrowInteractiveGrouping = function () {
this._imageObjectMenuElement.hideItem();
this.createArrowWithInteractiveGrouping();
};
Image.prototype.onButtonArrowPoiGrouping = function () {
this._imageObjectMenuElement.hideItem();
this.createArrowWithPoiGrouping();
};
Image.prototype.onButtonArrowTextGrouping = function () {
this._imageObjectMenuElement.hideItem();
this.createArrowWithTextGrouping();
};
Image.prototype.onButtonArrow = function () {
this._imageObjectMenuElement.hideItem();
this.createArrow();
};
Image.prototype.onMenuArrow = function (event, visible) {
if (visible) {
this._polygonButtonElement.toggleMenu(event, false);
this._textButtonElement.toggleMenu(event, false);
this._ellipseButtonElement.toggleMenu(event, false);
this._rectangleButtonElement.toggleMenu(event, false);
}
};
Image.prototype.onButtonEllipseInteractiveGrouping = function () {
this._imageObjectMenuElement.hideItem();
this.createEllipseWithInteractiveGrouping();
};
Image.prototype.onButtonEllipsePoiGrouping = function () {
this._imageObjectMenuElement.hideItem();
this.createEllipseWithPoiGrouping();
};
Image.prototype.onButtonEllipseTextGrouping = function () {
this._imageObjectMenuElement.hideItem();
this.createEllipseWithTextGrouping();
};
Image.prototype.onButtonEllipse = function () {
this._imageObjectMenuElement.hideItem();
this.createEllipse();
};
Image.prototype.onMenuEllipse = function (event, visible) {
if (visible) {
this._polygonButtonElement.toggleMenu(event, false);
this._textButtonElement.toggleMenu(event, false);
this._arrowButtonElement.toggleMenu(event, false);
this._rectangleButtonElement.toggleMenu(event, false);
}
};
Image.prototype.onButtonRectangleInteractiveGrouping = function () {
this._imageObjectMenuElement.hideItem();
this.createRectangleWithInteractiveGrouping();
};
Image.prototype.onButtonRectanglePoiGrouping = function () {
this._imageObjectMenuElement.hideItem();
this.createRectangleWithPoiGrouping();
};
Image.prototype.onButtonRectangleTextGrouping = function () {
this._imageObjectMenuElement.hideItem();
this.createRectangleWithTextGrouping();
};
Image.prototype.onButtonRectangle = function () {
this._imageObjectMenuElement.hideItem();
this.createRectangle();
};
Image.prototype.onMenuRectangle = function (event, visible) {
if (visible) {
this._polygonButtonElement.toggleMenu(event, false);
this._textButtonElement.toggleMenu(event, false);
this._arrowButtonElement.toggleMenu(event, false);
this._ellipseButtonElement.toggleMenu(event, false);
}
};
Image.prototype.onButtonArrowMarker = function () {
this._imageObjectMenuElement.hideItem();
this.createArrowMarker();
};
Image.prototype.onButtonEllipseMarker = function () {
this._imageObjectMenuElement.hideItem();
this.createEllipseMarker();
};
Image.prototype.onButtonInteractiveGrouping = function () {
this._groupingMenuElement.hideItem();
this.createInteractiveGrouping();
};
Image.prototype.onButtonPoiGrouping = function () {
this._groupingMenuElement.hideItem();
this.createPoiGrouping();
};
Image.prototype.onButtonTextGrouping = function () {
this._groupingMenuElement.hideItem();
this.createTextGrouping();
};
Image.prototype.onButtonLegendGrouping = function () {
this._imageObjectMenuElement.hideItem();
this._groupingMenuElement.hideItem();
this.createLegendGrouping();
};
Image.prototype.controlHideMenu = function () {
if (this._selectGroupElement) {
this._selectGroupElement.controlHideMenu();
}
if (this._selectItemElement) {
this._selectItemElement.controlHideMenu();
}
if (this._imageObjectMenuElement) {
this._imageObjectMenuElement.hideItem();
}
if (this._groupingMenuElement) {
this._groupingMenuElement.hideItem();
}
};
Image.prototype.controlSetDefaultMode = function (event) {
event.stopPropagation();
this.modeInteraction.setDefaultMode(this.modeInteraction.defaultMode);
};
Image.prototype.controlUpdateElements = function () {
if (this._selectGroupElement) {
this._selectGroupElement.controlSetDefaultMode();
}
if (this._selectItemElement) {
this._selectItemElement.controlSetDefaultMode();
}
};
Image.prototype.controlSaveColor = function (color, colorAlpha) {
this._selectItemElement.saveColor(color, colorAlpha);
};
Image.prototype.sendError = function (e) {
console.error("-< Send ERROR >-");
this.emit("sendError", e);
};
Image.prototype.unselectGrouping = function () {
if (!this._selectGroupElement.visible && !this._selectItemElement.visible) {
this.emit("unselectGrouping");
}
};
Image.prototype.degroupGroupImageLayerGroups = function () {
var groupImage = this.image.getGroupImageFromGrouping(this._selectGroupElement.grouping);
if (groupImage) {
this.emit("degroupGroupImageLayerGroups", groupImage);
}
};
Image.prototype.editImageObjectGrouping = function () {
if (this._selectGroupElement.grouping) {
this.emit("editGrouping", this._selectGroupElement.grouping);
}
else {
this.emit("editLayerGroup", this._selectGroupElement.layerGroup);
}
};
Image.prototype.selectLayerGroup = function (layerGroup) {
this.endMoveMenu();
this.emit("selectLayerGroup", layerGroup);
};
Image.prototype.selectLayerGroupByImageObject = function (imageObject) {
this.endMoveMenu();
this.emit("selectLayerGroupByImageObject", imageObject);
};
Image.prototype.unselectLayerGroup = function () {
if (!this._selectGroupElement.visible && !this._selectItemElement.visible) {
this.emit("unselectLayerGroup");
}
};
Image.prototype.addLayerGroup = function (layerGroup, image) {
this.emit("addLayerGroup", layerGroup, image);
};
Image.prototype.addLayerGroupByName = function (name, image) {
this.emit("addLayerGroupByName", name, image);
};
Image.prototype.copyLayerGroup = function (layerGroup) {
this.emit("copyLayerGroup", layerGroup);
};
Image.prototype.clipboardLayerGroup = function (layerGroup) {
this.emit("clipboardLayerGroup", layerGroup);
};
Image.prototype.updateLayerGroup = function (layerGroup) {
this.emit("updateLayerGroup", layerGroup);
};
Image.prototype.deleteLayerGroup = function (layerGroup) {
this.emit("deleteLayerGroup", layerGroup);
};
Image.prototype.degroupLayerGroupImageObject = function (imageObject) {
this.emit("degroupLayerGroupImageObject", this._selectGroupElement.layerGroup, imageObject);
};
Image.prototype.selectImageObject = function (imageObject) {
this.endMoveMenu();
this.emit("selectImageObject", imageObject);
};
Image.prototype.unselectImageObject = function () {
this.emit("unselectImageObject");
};
Image.prototype.addImageObject = function (imageObject, layerGroup, image) {
this.emit("addImageObject", imageObject, layerGroup, image);
};
Image.prototype.copyImageObject = function (imageObject) {
this.emit("copyImageObject", imageObject);
};
Image.prototype.clipboardImageObject = function (imageObject) {
this.emit("clipboardImageObject", imageObject);
};
Image.prototype.editImageObject = function (imageObject) {
this.emit("editImageObject", imageObject);
};
Image.prototype.updateImageObject = function (imageObject) {
this.emit("updateImageObject", imageObject);
};
Image.prototype.deleteImageObject = function (imageObject) {
this.emit("deleteImageObject", imageObject);
};
Image.prototype.selectPrimitive = function (primitive, positionPoint) {
this.endMoveMenu();
this.emit("selectPrimitive", primitive, positionPoint);
};
Image.prototype.unselectPrimitive = function () {
this.emit("unselectPrimitive");
};
Image.prototype.editPrimitive = function (primitive) {
this.emit("editPrimitive", primitive);
};
Image.prototype.updatePrimitive = function (primitive) {
this.emit("updatePrimitive", primitive);
};
Image.prototype.deletePrimitive = function (primitive) {
this.emit("deletePrimitive", primitive);
};
Image.prototype.selectLegendColumn = function (legendColumn, legend) {
this.endMoveMenu();
this.emit