medsurf-draw
Version:
Draw annotations on jpg/zoomify images, based on PIXI.js
1,060 lines • 50.9 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 { BaseGraphics } from '../../bases/elements/BaseGraphics';
import { debounce } from 'debounce';
var FillCollection = (function (_super) {
__extends(FillCollection, _super);
function FillCollection(image, model) {
var _this = _super.call(this, { image: image, model: model }) || this;
_this.lines = [];
_this.options = Object.assign({}, _this.model.options);
_this.zIndex = Design.fillCollection.zIndexDefault + _this.model.zIndex || 0;
_this.modeInteraction.on("remove-init", _this._removeModeInit, _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('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('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('choose_item', _this._modeChooseItem, _this);
_this.modeInteraction.on("remove-choose_item", _this._removeModeChooseItem, _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('clone_item', _this._modeCloneItem, _this);
_this.modeInteraction.on("remove-clone_item", _this._removeModeCloneItem, _this);
_this.modeInteraction.on('clone_item_new', _this._modeCloneItem, _this);
_this.modeInteraction.on("remove-clone_item_new", _this._removeModeCloneItem, _this);
_this.modeInteraction.on("delete", _this._modeDelete, _this);
_this.modeInteraction.on("delete_multiple", _this._modeDelete, _this);
_this.modeInteraction.on('delete_draw', _this._modeDelete, _this);
_this.modeInteraction.on('delete_clone', _this._modeDelete, _this);
_this.moveInteraction = new MedsurfDraw.MoveInteraction(_this);
_this.moveInteraction.on("onMove", _this.onMove, _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("onInteractive", _this.onInteractive, _this);
_this.chooseInteraction = new MedsurfDraw.ChooseInteraction(_this, MedsurfDraw.ChooseTypes.Primitives);
_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;
}
FillCollection.prototype.init = function () {
var _this = this;
this.lines = this.model.lines.map(function (id) {
return _this.image.getChildByName(id);
});
this._fillElement = new BaseGraphics({ image: this.image });
this.addChild(this._fillElement);
this._editButtonElement = new MedsurfDraw.RoundButtonElement({
image: this.image,
text: '\uf3f0',
description: 'Bearbeiten',
descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
});
this._editButtonElement.on("onHover", this.collapseAllMenus, this);
this._editButtonElement.on("button", this.onButtonEdit, this);
this.imageObjectMenu.push({
element: this._editButtonElement,
order: 0,
});
this._moveToBackButtonElement = new MedsurfDraw.RoundButtonElement({
image: this.image,
text: '\uf87f',
description: 'Nach Hinten\nverschieben',
descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
});
this._moveToBackButtonElement.on("button", this.onButtonMoveToBack, this);
this._moveToFrontButtonElement = new MedsurfDraw.RoundSubMenuElement({
image: this.image,
text: '\uf856',
description: 'Nach Vorne\nverschieben',
descriptionFontSize: Design.subMenu.descriptionFontSize,
menuElements: [
{
element: this._moveToBackButtonElement,
order: 0,
}
],
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius)
});
this._moveToFrontButtonElement.on("onHover", this._moveToFrontButtonElement.showMenu, this._moveToFrontButtonElement);
this._moveToFrontButtonElement.on("button", this.onButtonMoveToFront, this);
this.imageObjectMenu.push({
element: this._moveToFrontButtonElement,
order: 7,
});
this._deleteButtonElement = new MedsurfDraw.RoundButtonElement({
image: this.image,
text: '\uf1f8',
description: 'Löschen',
descriptionFontSize: 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._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.lines.forEach(function (line) {
line.on("onPointUpdate", _this.draw.bind(_this), _this);
line.on("onPointUpdate", _this.emit.bind(_this, "onFillMove"), _this);
});
};
FillCollection.prototype.startDrawing = function () {
var _this = this;
_super.prototype.startDrawing.call(this);
this.lines.forEach(function (line) {
line.on("onPointUpdate", _this.draw.bind(_this), _this);
line.on("onPointUpdate", _this.emit.bind(_this, "onFillMove"), _this);
});
this.emit("debounceDraw");
};
FillCollection.prototype.stopDrawing = function (selfheal_timeout) {
var _this = this;
_super.prototype.stopDrawing.call(this, selfheal_timeout);
this.lines.forEach(function (line) {
line.off("onPointUpdate", _this.draw, _this);
line.off("onPointUpdate", _this.emit.bind(_this, "onFillMove"), _this);
});
};
FillCollection.prototype.draw = function () {
if (this._fillElement && this._fillElement._geometry) {
this._fillElement.clear();
}
if (!this.validate()) {
return;
}
if (this.options.hasFill) {
this._fillElement.beginFill(this.options.fillColor, this.options.fillAlpha);
}
else {
this._fillElement.beginFill(Design.fillCollection.fillColorDefault, 0.00000001);
}
var line = this.lines[0];
if (!line.start || !line.end) {
return;
}
var startPoint;
var endPoint;
if (line.direction === MedsurfDraw.LineDirection.START_END) {
startPoint = line.start;
endPoint = line.end;
}
else {
startPoint = line.end;
endPoint = line.start;
}
this._fillElement.moveTo(startPoint.x, startPoint.y);
for (var i = 0; i < this.lines.length; i++) {
switch (line.type) {
case MedsurfDraw.LineTypes.LINEAR:
this._fillElement.lineTo(endPoint.x, endPoint.y);
break;
case MedsurfDraw.LineTypes.QUADRATIC:
if (line.controlStart) {
this._fillElement.quadraticCurveTo(line.controlStart.x, line.controlStart.y, endPoint.x, endPoint.y);
}
break;
case MedsurfDraw.LineTypes.BEZIER:
if (line.controlStart && line.controlEnd) {
var controlStart = (startPoint === line.start) ? line.controlStart : line.controlEnd;
var controlEnd = (startPoint === line.start) ? line.controlEnd : line.controlStart;
this._fillElement.bezierCurveTo(controlStart.x, controlStart.y, controlEnd.x, controlEnd.y, endPoint.x, endPoint.y);
}
break;
}
var nextLine = this.lines.find(function (nextLine) {
return nextLine !== line && (nextLine.start === endPoint || nextLine.end === endPoint);
});
if (nextLine) {
line = nextLine;
if (nextLine.start === endPoint) {
startPoint = nextLine.start;
endPoint = nextLine.end;
}
else {
startPoint = nextLine.end;
endPoint = nextLine.start;
}
}
else {
throw new Error('we messed up something');
}
}
this._fillElement.endFill();
};
FillCollection.prototype.destroy = function (options) {
var _this = this;
if (this.moveInteraction) {
this.moveInteraction.removeAllListeners();
}
if (this.selectInteraction) {
this.selectInteraction.removeAllListeners();
}
if (this.chooseInteraction) {
this.chooseInteraction.removeAllListeners();
}
if (this._fillElement) {
this._fillElement.destroy(options);
}
if (this.lines) {
this.lines.forEach(function (line) {
line.off("onPointUpdate", _this.draw, _this);
});
}
if (this._editButtonElement) {
this._editButtonElement.destroy(options);
}
if (this._moveToBackButtonElement) {
this._moveToBackButtonElement.destroy(options);
}
if (this._moveToFrontButtonElement) {
this._moveToFrontButtonElement.destroy(options);
}
if (this._deleteButtonElement) {
this._deleteButtonElement.destroy(options);
}
if (this._degroupButtonElement) {
this._degroupButtonElement.destroy(options);
}
if (this._duplicateButtonElement) {
this._duplicateButtonElement.destroy(options);
}
if (this._clipboardButtonElement) {
this._clipboardButtonElement.destroy(options);
}
_super.prototype.destroy.call(this, options);
};
FillCollection.getInstance = function (image, ids) {
return new FillCollection(image, {
dirty: true,
id: uuidv4(),
type: Models.ImageObjectType.FILLCOLLECTION,
isStatic: false,
zIndex: 0,
isInteractive: false,
lines: ids,
interactiveItems: [],
options: {
hasLine: true,
lineColor: 0x000000,
lineAlpha: 1,
hasFill: true,
fillColor: 0xffffff,
fillAlpha: 0.3
}
});
};
FillCollection.prototype.validate = function () {
var _this = this;
if (this.lines.length === 0) {
return false;
}
var positionPointReference = [];
var positionPointReferenceCount = [];
this.lines.find(function (line) {
if (!line.start || !line.end) {
return false;
}
try {
if (!line.start.x || !line.start.y || !line.end.x || !line.start.y) {
return false;
}
}
catch (e) {
_this.stopDrawing(20000);
_this.image.sendError(e);
return false;
}
var startIndex = positionPointReference.findIndex(function (ref) { return ref === line.start; });
var endIndex = positionPointReference.findIndex(function (ref) { return ref === line.end; });
if (startIndex > -1) {
positionPointReferenceCount[startIndex]++;
}
else {
positionPointReference.push(line.start);
positionPointReferenceCount.push(1);
}
if (endIndex > -1) {
positionPointReferenceCount[endIndex]++;
}
else {
positionPointReference.push(line.end);
positionPointReferenceCount.push(1);
}
});
if (positionPointReferenceCount.some(function (count) { return count !== 2; })) {
return false;
}
return true;
};
FillCollection.prototype.isPointInPolygon = function (point) {
if (this._fillElement.geometry.graphicsData.length === 0) {
return false;
}
var polygon = this._fillElement.geometry.graphicsData[0].shape.points.slice(0, -2);
var inside = false;
var minX = polygon[0], maxX = polygon[0];
var minY = polygon[1].y, maxY = polygon[1];
for (var n = 1; n < polygon.length; n += 2) {
var qx = polygon[n];
var qy = polygon[n + 1];
minX = Math.min(qx, minX);
maxX = Math.max(qx, maxX);
minY = Math.min(qy, minY);
maxY = Math.max(qy, maxY);
}
if (point.x < minX || point.x > maxX || point.y < minY || point.y > maxY) {
return false;
}
var i, j;
for (i = 0, j = polygon.length - 1; i < polygon.length; j = i, i += 2) {
if (((polygon[i + 1] > point.y) != (polygon[j + 1] > point.y))
&& (point.x < (polygon[j] - polygon[i]) * (point.y - polygon[i + 1])
/ (polygon[j + 1] - polygon[i + 1]) + polygon[i]))
inside = !inside;
}
return inside;
};
FillCollection.prototype.getNearestPointForPoint = function (point) {
var _this = this;
var line;
var nearestDelta = undefined;
var nearestPoint;
var footDelta;
var foot;
this.lines.forEach(function (l, i) {
var tmpStart = new PIXI.Point(l.start.position.x, l.start.position.y);
var tmpEnd = new PIXI.Point(l.end.position.x, l.end.position.y);
var dStart = Math.abs(point.x - tmpStart.x) + Math.abs(point.y - tmpStart.y);
var dEnd = Math.abs(point.x - tmpEnd.x) + Math.abs(point.y - tmpEnd.y);
if (!nearestDelta) {
nearestPoint = (dStart < dEnd) ? tmpStart : tmpEnd;
nearestDelta = (dStart < dEnd) ? dStart : dEnd;
}
else {
if (nearestDelta > ((dStart < dEnd) ? dStart : dEnd)) {
nearestPoint = (dStart < dEnd) ? tmpStart : tmpEnd;
nearestDelta = (dStart < dEnd) ? dStart : dEnd;
}
}
var tmpFoot = _this._foot(tmpStart, tmpEnd, point);
if (!_this._isOnLine(tmpStart, tmpEnd, tmpFoot)) {
return;
}
var tmpDelta = Math.abs(point.x - tmpFoot.x) + Math.abs(point.y - tmpFoot.y);
if (line === undefined) {
footDelta = tmpDelta;
foot = tmpFoot;
line = l;
}
else {
if (tmpDelta < footDelta) {
footDelta = tmpDelta;
foot = tmpFoot;
line = l;
}
}
});
if (nearestPoint) {
if (foot) {
if (Math.round(footDelta * 100) / 100 <= Math.round(nearestDelta * 100) / 100) {
if (line) {
if (line.model.isBezier && line.controlStart !== null) {
var rDelta = undefined;
var rX = void 0;
var rY = void 0;
for (var i = 0; i < line._lineElement.geometry.graphicsData[0].shape.points.length; i = i + 2) {
var tmpX = line._lineElement.geometry.graphicsData[0].shape.points[i];
var tmpY = line._lineElement.geometry.graphicsData[0].shape.points[i + 1];
var tmpDelta = Math.abs(point.x - tmpX) + Math.abs(point.y - tmpY);
if (rDelta === undefined) {
rDelta = tmpDelta;
rX = tmpX;
rY = tmpY;
}
else {
if (tmpDelta < rDelta) {
rDelta = tmpDelta;
rX = tmpX;
rY = tmpY;
}
}
}
if (rX && rY) {
return new PIXI.Point(rX, rY);
}
}
}
return foot;
}
}
return nearestPoint;
}
throw 'No point found';
};
FillCollection.prototype.addLine = function (line) {
this.lines.push(line);
this.model.lines.push(line.model.id);
line.on("onPointUpdate", this.draw.bind(this), this);
line.on("onPointUpdate", this.emit.bind(this, "onFillMove"), this);
};
FillCollection.prototype.removeLine = function (line) {
var lineIndex = this.lines.indexOf(line);
if (lineIndex > -1) {
this.lines.splice(lineIndex, 1);
this.model.lines.splice(lineIndex, 1);
line.off("onPointUpdate", this.draw, this);
return true;
}
return false;
};
FillCollection.prototype._foot = function (start, end, point) {
var line = {
x: end.x - start.x,
y: end.y - start.y
};
var k = ((point.x - start.x) * line.x + (point.y - start.y) * line.y) / (line.x * line.x + line.y * line.y);
return new PIXI.Point(start.x + k * line.x, start.y + k * line.y);
};
FillCollection.prototype._isOnLine = function (start, end, foot) {
var dxc = foot.x - start.x;
var dyc = foot.y - start.y;
var dxl = end.x - start.x;
var dyl = end.y - start.y;
var cross = dxc * dyl - dyc * dxl;
if (Math.abs(cross) < 0.000001) {
if (Math.abs(dxl) >= Math.abs(dyl)) {
if ((dxl > 0) ? (start.x <= foot.x && foot.x <= end.x) : (end.x <= foot.x && foot.x <= start.x)) {
return true;
}
}
else {
if ((dyl > 0) ? (start.y <= foot.y && foot.y <= end.y) : (end.y <= foot.y && foot.y <= start.y)) {
return true;
}
}
}
return false;
};
FillCollection.prototype._removeModeInit = function () {
this.sortChildren();
this.emit("debounceDraw");
};
FillCollection.prototype._modeDefault = function () {
if (this.model.isInteractive) {
this.options.fillAlpha = Design.fillCollection.fillAlphaInteractive;
this.interactive = true;
this.on("pointerover", this.selectInteraction.onInteractive, this.selectInteraction);
this.on("pointerout", this.selectInteraction.onRelease, this.selectInteraction);
this.showItem();
}
else {
if (this.model.isStatic) {
this.showItem();
}
else {
this.hideItem();
}
}
};
FillCollection.prototype._removeModeDefault = function () {
this.options = Object.assign({}, this.model.options);
this.interactive = false;
this.off("pointerover", this.selectInteraction.onInteractive, this.selectInteraction);
this.off("pointerout", this.selectInteraction.onRelease, this.selectInteraction);
this.emit("debounceDraw");
};
FillCollection.prototype._modeMarker = function () {
this.showItem();
};
FillCollection.prototype._removeModeMarker = function () {
};
FillCollection.prototype._modeSelftest = function () {
if (this.model.isInteractive) {
this.interactive = true;
this.cursor = "select";
this.options.fillAlpha = Design.fillCollection.fillAlphaInteractive;
this.selectInteraction.reset();
this.on("pointerover", this.selectInteraction.onInteractive, this.selectInteraction);
this.on("pointerout", this.selectInteraction.onRelease, this.selectInteraction);
this.showItem();
}
else {
if (this.model.isStatic) {
this.showItem();
}
else {
this.hideItem();
}
}
};
FillCollection.prototype._removeModeSelftest = function () {
this.options = Object.assign({}, this.model.options);
this.interactive = false;
this.off("pointerover", this.selectInteraction.onInteractive, this.selectInteraction);
this.off("pointerout", this.selectInteraction.onRelease, this.selectInteraction);
this.emit("debounceDraw");
};
FillCollection.prototype._modeAuthor = 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();
};
FillCollection.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);
};
FillCollection.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();
};
FillCollection.prototype._removeModeSelectLayerGroup = function (parent, mode) {
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);
};
FillCollection.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();
};
FillCollection.prototype._removeModeSelectGrouping = function (parent, mode) {
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);
};
FillCollection.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());
};
FillCollection.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.image);
}
};
FillCollection.prototype._modeBlockedItem = function () {
this.options.lineAlpha = Design.blocked.lineAlpha;
this.options.fillAlpha = Design.blocked.fillAlpha;
this.emit("debounceDraw");
};
FillCollection.prototype._removeModeBlockedItem = function () {
this.options = Object.assign({}, this.model.options);
this.emit("debounceDraw");
};
FillCollection.prototype._modeDrawItem = function () {
};
FillCollection.prototype._removeModeDrawItem = function () {
};
FillCollection.prototype._modeChooseItem = function () {
this.chooseInteraction.on("chooseElement", this.chooseElement, this);
};
FillCollection.prototype._removeModeChooseItem = function () {
this.chooseInteraction.off("chooseElement", this.chooseElement, this);
};
FillCollection.prototype._modeChooseSelect = function () {
this.interactive = true;
this.cursor = "select";
this.options.lineColor = Design.selftest.lineColorSelect;
this.options.fillColor = Design.selftest.fillColorSelect;
this.emit("debounceDraw");
};
FillCollection.prototype._removeModeChooseSelect = function () {
this.interactive = false;
this.options = Object.assign({}, this.model.options);
this.emit("debounceDraw");
};
FillCollection.prototype._modeChooseUnselect = function () {
this.interactive = true;
this.cursor = "select";
this.options.lineColor = Design.selftest.lineColorUnselect;
this.options.fillColor = Design.selftest.fillColorUnselect;
this.emit("debounceDraw");
};
FillCollection.prototype._removeModeChooseUnselect = function () {
this.interactive = false;
this.options = Object.assign({}, this.model.options);
this.emit("debounceDraw");
};
FillCollection.prototype._modeCloneItem = function () {
this.validate();
this.emit("debounceDraw");
};
FillCollection.prototype._removeModeCloneItem = function () {
this.moveInteraction.reset();
};
FillCollection.prototype._modeDelete = function () {
var image = this.image;
if (image) {
if (['delete_multiple', 'delete_draw', 'delete_clone'].indexOf(this.modeInteraction.lastMode) === -1) {
this.controlUnselectItem(image);
}
image.removeChild(this);
image.deleteImageObject(this.model);
}
this.destroy();
image.controlHideMenu();
image.controlUpdateElements();
};
FillCollection.prototype.collapseAllMenus = function (event) {
this._moveToFrontButtonElement.toggleMenu(event, false);
};
FillCollection.prototype.onButtonEdit = function () {
this.collapseAllMenus(new PIXI.InteractionEvent());
this.image.controlHideMenu();
this.image.editImageObject(this.model);
};
FillCollection.prototype.onButtonMoveToFront = function () {
this.model.zIndex++;
this.zIndex = Design.fillCollection.zIndexDefault + this.model.zIndex;
this.image.sortChildren();
this.image.updateImageObject(this.model);
};
FillCollection.prototype.onButtonMoveToBack = function () {
this.model.zIndex--;
this.zIndex = Design.fillCollection.zIndexDefault + this.model.zIndex;
this.image.sortChildren();
this.image.updateImageObject(this.model);
};
FillCollection.prototype.onButtonDelete = function (event) {
var _this = this;
this.collapseAllMenus(new PIXI.InteractionEvent());
this.image.controlHideMenu();
setTimeout(function () {
_this.modeInteraction.setMode("delete");
}, 300);
};
FillCollection.prototype.onButtonDegroup = function (unselectElement) {
if (unselectElement === void 0) { unselectElement = true; }
this.collapseAllMenus(new PIXI.InteractionEvent());
this.image.controlHideMenu();
this.image.degroupLayerGroupImageObject(this.model);
if (unselectElement) {
this.image.unselectLayerGroup();
this.image.selectImageObject(this.model);
}
};
FillCollection.prototype.onButtonDuplicate = function () {
this.collapseAllMenus(new PIXI.InteractionEvent());
this.image.controlHideMenu();
this.image.copyImageObject(this.model);
};
FillCollection.prototype.onButtonClipboard = function () {
this.collapseAllMenus(new PIXI.InteractionEvent());
this.image.controlHideMenu();
this.image.clipboardImageObject(this.model);
};
FillCollection.prototype.onButtonSetInteractive = function (override) {
this.model.isInteractive = !this.model.isInteractive;
if (this.model.isInteractive) {
}
else {
var imageObjects_1 = this.image.getImageObjects();
var items = this.model.interactiveItems;
this.model.interactiveItems = [];
if (items) {
items.forEach(function (item) {
var element = imageObjects_1.find(function (io) { return io.name === item; });
if (element) {
element.modeInteraction.setMode('blocked_item');
}
});
}
}
this.emit("debounceDraw");
this.image.updateImageObject(this.model);
};
FillCollection.prototype.onButtonBezier = function (override) {
this.lines.forEach(function (line) { return line.onButtonBezier(override); });
this.emit("debounceDraw");
this.image.controlUpdateElements();
};
FillCollection.prototype.onColor = function (mode, has, color, colorAlpha) {
if (mode === ColorMode.LINE) {
this.lines.forEach(function (line) {
line.onColor(mode, has, color, colorAlpha);
});
}
else if (mode === ColorMode.FILL) {
this.model.options.hasFill = has;
this.model.options.fillColor = color;
this.model.options.fillAlpha = colorAlpha;
this.options = Object.assign({}, this.model.options);
this.emit("debounceDraw");
this.image.updateImageObject(this.model);
}
};
FillCollection.prototype.onNumber = function (mode, number) {
if (mode === NumberMode.WIDTH) {
this.lines.forEach(function (line) {
line.onNumber(mode, number);
});
}
};
FillCollection.prototype.onButtonStatic = function (override) {
this.model.isStatic = override || !this.model.isStatic;
this.emit("debounceDraw");
this.image.updateImageObject(this.model);
};
FillCollection.prototype.controlSelectItem = function () {
this.image.selectImageObject(this.model);
this.externControlSelectItem();
};
FillCollection.prototype.controlUnselectItem = function (image) {
if (!this.controlSelectLayerGroup(image)) {
image.externControlSelectImage();
image.unselectImageObject();
}
};
FillCollection.prototype.externControlSelectItem = function () {
var _this = this;
this.image.getImageObjects()
.filter(function (imageObject) { return imageObject !== _this; })
.forEach(function (imageObject) {
if (_this.model.interactiveItems && _this.model.interactiveItems.indexOf(imageObject.name) > -1) {
imageObject.modeInteraction.setMode('choose_select');
}
else if (_this.model.interactiveItems && 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 (_this.model.interactiveItems.indexOf(legendRow.name) > -1) {
legendRow.element.modeInteraction.setMode('choose_select');
}
else {
legendRow.element.modeInteraction.setMode('blocked_item');
}
}
}
else {
imageObject.modeInteraction.setMode('blocked_item');
}
});
this.modeInteraction.setModeChildren('select_parent');
this.modeInteraction.setModeItem('select_item');
};
FillCollection.prototype.controlSelectLayerGroup = function (image) {
var layerGroup = image.getLayerGroupByImageObject(this.model);
if (layerGroup) {
image.selectLayerGroup(layerGroup);
return image.externControlSelectLayerGroup(layerGroup);
}
return false;
};
FillCollection.prototype.controlUnselectLayerGroup = function () {
this.image.unselectLayerGroup();
};
FillCollection.prototype.controlDrawItem = function () {
this.modeInteraction.setModeChildren('draw_parent');
this.modeInteraction.setModeItem('draw_item');
};
FillCollection.prototype.controlChooseItem = function () {
var _this = this;
this.image.getImageObjects()
.filter(function (imageObject) { return imageObject !== _this; })
.forEach(function (imageObject) {
if (_this.model.interactiveItems && _this.model.interactiveItems.indexOf(imageObject.name) > -1) {
imageObject.modeInteraction.setMode('choose_select');
}
else if (_this.model.interactiveItems && 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_2 = legendRows; _i < legendRows_2.length; _i++) {
var legendRow = legendRows_2[_i];
if (_this.model.interactiveItems.indexOf(legendRow.name) > -1) {
legendRow.element.modeInteraction.setMode('choose_select');
}
else {
legendRow.element.modeInteraction.setMode('choose_unselect');
}
}
}
else {
imageObject.modeInteraction.setMode('choose_unselect');
}
});
this.modeInteraction.setModeChildren('choose_parent');
this.modeInteraction.setModeItem('choose_item');
};
FillCollection.prototype.controlCloneItem = function () {
var _this = this;
this.image.getImageObjects()
.filter(function (imageObject) { return imageObject !== _this && !imageObject.modeInteraction.lastMode.startsWith('clone'); })
.forEach(function (imageObject) {
imageObject.modeInteraction.setMode('blocked_item');
});
this.modeInteraction.setModeChildren('clone_parent');
this.modeInteraction.setModeItem('clone_item_new');
};
FillCollection.prototype.onMove = function (event, dX, dY) {
this.lines.forEach(function (line) {
if (line.direction === MedsurfDraw.LineDirection.START_END) {
if (line.start instanceof MedsurfDraw.PositionPoint || line.start instanceof MedsurfDraw.FillCollection) {
line.start.moveInteraction.emit("onMove", event, dX, dY);
}
}
else {
if (line.end instanceof MedsurfDraw.PositionPoint || line.end instanceof MedsurfDraw.FillCollection) {
line.end.moveInteraction.emit("onMove", event, dX, dY);
}
}
});
this.emit("onFillMove");
};
FillCollection.prototype.onHover = function () {
this.options.lineColor = Design.primitive.lineColorHover;
this.options.fillColor = Design.primitive.fillColorHover;
this.emit("debounceDraw");
};
FillCollection.prototype.onOut = function () {
this.options = Object.assign({}, this.model.options);
this.emit("debounceDraw");
};
FillCollection.prototype.onSelectStart = function (event, preventSelectItem) {
if (preventSelectItem === void 0) { preventSelectItem = false; }
event.stopPropagation();
var lastMode = this.modeInteraction.lastMode;
if (lastMode === 'select_layer_group') {
this.controlSelectItem();
}
else {
if (!this.controlSelectLayerGroup(this.image) && !preventSelectItem) {
this.controlSelectItem();
}
}
};
FillCollection.prototype.onInteractive = function () {
var _this = this;
this.image.getImageObjects()
.filter(function (imageObject) { return imageObject !== _this; })
.forEach(function (imageObject) {
if (_this.model.interactiveItems) {
if (_this.model.interactiveItems && _this.model.interactiveItems.indexOf(imageObject.name) > -1) {
imageObject.showItem();
}
else if (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_3 = legendRows; _i < legendRows_3.length; _i++) {
var legendRow = legendRows_3[_i];
if (_this.model.interactiveItems.indexOf(legendRow.name) > -1) {
legendRow.element.showItem();
}
}
}
else {
imageObject.hideItem();
}
}
else {
imageObject.hideItem();
}
});
this.selectInteraction.once('onRelease', this.onInteractiveRelease, this);
this.options = Object.assign({}, this.model.options);
this.emit("debounceDraw");
};
FillCollection.prototype.onInteractiveRelease = function (event) {
var _this = this;
this.selectInteraction.onRelease(event);
var defaultMode = this.image.modeInteraction.defaultMode;
this.image.getImageObjects()
.filter(function (imageObject) { return imageObject !== _this; })
.forEach(function (imageObject) {
imageObject.modeInteraction.setMode(defaultMode);
});
this.options.fillAlpha = Design.fillCollection.fillAlphaInteractive;
this.emit("debounceDraw");
};
FillCollection.prototype.chooseElement = function (event, element) {
if (!this.model.interactiveItems) {
this.model.interactiveItems = [];
}
var index = this.model.interactiveItems.findIndex(function (item) { return item === element.name; });
if (index > -1) {
this.model.interactiveItems.splice(index, 1);
element.modeInteraction.setMode('choose_unselect');
}
else {
this.model.interactiveItems.push(element.name);
element.modeInteraction.setMode('choose_select');
}
};
Object.defineProperty(FillCollection.prototype, "moveInteraction", {
get: function () {
return this._moveInteraction;
},
set: function (value) {
this._moveInteraction = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(FillCollection.prototype, "selectInteraction", {
get: function () {
return this._selectInteraction;
},
set: function (value) {
this._selectInteraction = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(FillCollection.prototype, "chooseInteraction",