medsurf-draw
Version:
Draw annotations on jpg/zoomify images, based on PIXI.js
1,135 lines • 62.1 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 __());
};
})();
import * as PIXI from "pixi.js-legacy";
import * as MedsurfDraw from "../../public-api";
import * as Models from '@ascii-dev-user/medsurf-lib/models';
import { v4 as uuidv4 } from 'uuid';
import { Design } from "../../config/design";
import { BaseElementContainer, ColorMode, NumberMode } from "../../bases/elements/BaseElementContainer";
import { debounce } from "debounce";
export var LineTypes;
(function (LineTypes) {
LineTypes[LineTypes["NOT_INITIALIZED"] = 0] = "NOT_INITIALIZED";
LineTypes[LineTypes["LINEAR"] = 1] = "LINEAR";
LineTypes[LineTypes["QUADRATIC"] = 2] = "QUADRATIC";
LineTypes[LineTypes["BEZIER"] = 3] = "BEZIER";
})(LineTypes || (LineTypes = {}));
export var LineDirection;
(function (LineDirection) {
LineDirection[LineDirection["START_END"] = 0] = "START_END";
LineDirection[LineDirection["END_START"] = 1] = "END_START";
})(LineDirection || (LineDirection = {}));
var GraphicLine = (function () {
function GraphicLine() {
}
return GraphicLine;
}());
export { GraphicLine };
var ControlPoints = (function () {
function ControlPoints() {
}
return ControlPoints;
}());
export { ControlPoints };
var Line = (function (_super) {
__extends(Line, _super);
function Line(image, model) {
var _this = _super.call(this, { image: image, model: model }) || this;
_this.start = null;
_this.end = null;
_this.zIndex = Design.line.zIndexDefault + _this.model.zIndex;
_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_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("startMove", _this.startMove, _this);
_this.moveInteraction.on("onMove", _this.onMove, _this);
_this.moveInteraction.on("endMove", _this.endMove, _this);
_this.selectInteraction = new MedsurfDraw.SelectInteraction(_this);
_this.selectInteraction.on("onHover", _this.onHover, _this);
_this.selectInteraction.on("onOut", _this.onOut, _this);
_this.selectInteraction.on("onSelectStart", _this.onSelectStart, _this);
_this._debounceControlSelectItemMethod = debounce(_this.controlSelectItem.bind(_this), 10).bind(_this);
_this._debounceControlUnselectItemMethod = debounce(_this.controlUnselectItem.bind(_this), 10).bind(_this);
_this.on("added", function () {
_this.on("onPointUpdate", _this.onPointUpdate, _this);
_this.on("startMove", _this.showControlPoints, _this);
_this.on("endMove", _this.hideControlPoints, _this);
_this.on("debounceControlSelectItem", _this._debounceControlSelectItemMethod);
_this.on("debounceControlUnselectItem", _this._debounceControlUnselectItemMethod);
});
_this.on("removed", function () {
_this.off("onPointUpdate", _this.onPointUpdate, _this);
_this.off("startMove", _this.showControlPoints, _this);
_this.off("endMove", _this.hideControlPoints, _this);
_this.off("debounceControlSelectItem", _this._debounceControlSelectItemMethod);
_this.off("debounceControlUnselectItem", _this._debounceControlUnselectItemMethod);
});
return _this;
}
Line.prototype.init = function () {
var image = this.image;
this.start = image.getChildByName(this.model.start);
this.end = image.getChildByName(this.model.end);
if (this.start instanceof MedsurfDraw.PositionPoint) {
this.start.on("onPositionPointMove", this.onMove, this);
this.start.moveInteraction.on("startMove", this.startMove, this);
this.start.moveInteraction.on("endMove", this.endMove, this);
}
else {
this.start.on("onFillMove", this.onMove, this);
this.start.on("draw", this.onPointUpdate, this);
}
this.start.on("removed", this.onButtonDelete, this);
if (this.end instanceof MedsurfDraw.PositionPoint) {
this.end.on("onPositionPointMove", this.onMove, this);
this.end.moveInteraction.on("startMove", this.startMove, this);
this.end.moveInteraction.on("endMove", this.endMove, this);
}
else {
this.end.on("onFillMove", this.onMove, this);
this.end.on("draw", this.onPointUpdate, this);
}
this.end.on("removed", this.onButtonDelete, this);
this._lineCornerElement = new MedsurfDraw.LineCorner({
image: this.image,
points: undefined,
options: Object.assign({}, this.model.options),
lineWidth: Math.round(this.model.strokeWidth * this.imageDimensions.width * 100) / 100,
});
this.addChild(this._lineCornerElement);
this._lineControlPointElement = new MedsurfDraw.LineControlPoint({
image: this.image,
points: undefined,
options: {
hasLine: true,
lineColor: Design.line.bezierLineColor,
lineAlpha: Design.line.bezierLineAlpha,
hasFill: true,
fillColor: Design.line.bezierPointColor,
fillAlpha: Design.line.bezierPointAlpha
},
lineWidth: Design.line.bezierLineWidth,
radius: Design.line.bezierPointRadius
});
this._lineControlPointElement.hideItem();
this.addChild(this._lineControlPointElement);
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,
});
};
Line.prototype.startDrawing = function () {
_super.prototype.startDrawing.call(this);
this.moveInteraction.on("onMove", this.onMove, this);
if (this.start) {
if (this.start instanceof MedsurfDraw.PositionPoint) {
this.start.on("onPositionPointMove", this.onMove, this);
this.start.moveInteraction.on("startMove", this.startMove, this);
this.start.moveInteraction.on("endMove", this.endMove, this);
}
else {
this.start.on("onFillMove", this.onMove, this);
this.start.on("draw", this.onPointUpdate, this);
}
}
if (this.end) {
if (this.end instanceof MedsurfDraw.PositionPoint) {
this.end.on("onPositionPointMove", this.onMove, this);
this.end.moveInteraction.on("startMove", this.startMove, this);
this.end.moveInteraction.on("endMove", this.endMove, this);
}
else {
this.end.on("onFillMove", this.onMove, this);
this.end.on("draw", this.onPointUpdate, this);
}
}
this.emit("debounceDraw");
};
Line.prototype.stopDrawing = function (selfheal_timeout) {
_super.prototype.stopDrawing.call(this, selfheal_timeout);
this.moveInteraction.off("onMove", this.onMove, this);
if (this.start) {
this.start.off("onPositionPointMove", this.onMove, this);
if (this.start instanceof MedsurfDraw.PositionPoint) {
this.start.moveInteraction.off("onMove", this.onMove, this);
}
this.start.off("onFillMove", this.onMove, this);
this.start.off("draw", this.onPointUpdate, this);
}
if (this.end) {
this.end.off("onPositionPointMove", this.onMove, this);
if (this.end instanceof MedsurfDraw.PositionPoint) {
this.end.moveInteraction.off("onMove", this.onMove, this);
}
this.end.off("onFillMove", this.onMove, this);
this.end.off("draw", this.onPointUpdate, this);
}
};
Line.prototype.draw = function () {
if (this._lineElement || this.type === LineTypes.NOT_INITIALIZED) {
var oldType = this.type;
try {
var points = this._getLinePointsModel();
if (points) {
this._lineCornerElement.points = points;
this._lineControlPointElement.points = points;
if (this.type !== oldType) {
if (this._lineElement) {
this._lineElement.destroy();
}
var result = this._getLineObject(points);
if (result) {
this._lineElement = result;
this.addChild(this._lineElement);
}
}
else {
if (this._lineElement) {
this._lineElement.points = points;
}
}
if (this._lineElement) {
this._lineElement.draw();
}
this._lineCornerElement.renderable = true;
this._lineControlPointElement.renderable = true;
}
else {
if (this._lineElement) {
this._lineElement.destroy();
delete this._lineElement;
this.type = LineTypes.NOT_INITIALIZED;
}
if (this._lineCornerElement) {
this._lineCornerElement.renderable = false;
}
if (this._lineControlPointElement) {
this._lineControlPointElement.renderable = false;
}
}
}
catch (e) {
this.stopDrawing(2000);
}
}
if (this._lineCornerElement) {
this._lineCornerElement.draw();
}
if (this._lineControlPointElement) {
this._lineControlPointElement.draw();
}
};
Line.prototype.destroy = function (options) {
if (this.start) {
this.start.off("onPositionPointMove", this.onMove, this);
if (this.start instanceof MedsurfDraw.PositionPoint) {
this.start.moveInteraction.off("startMove", this.startMove, this);
this.start.moveInteraction.off("onMove", this.onMove, this);
this.start.moveInteraction.off("endMove", this.endMove, this);
}
this.start.off("onFillMove", this.onMove, this);
this.start.off("removed", this.onButtonDelete, this);
this.start.off("draw", this.onPointUpdate, this);
}
if (this.end) {
this.end.off("onPositionPointMove", this.onMove, this);
if (this.end instanceof MedsurfDraw.PositionPoint) {
this.end.moveInteraction.off("startMove", this.startMove, this);
this.end.moveInteraction.off("onMove", this.onMove, this);
this.end.moveInteraction.off("endMove", this.endMove, this);
}
this.end.off("onFillMove", this.onMove, this);
this.end.off("removed", this.onButtonDelete, this);
this.end.off("draw", this.onPointUpdate, this);
}
if (this.moveInteraction) {
this.moveInteraction.removeAllListeners();
}
if (this.selectInteraction) {
this.selectInteraction.removeAllListeners();
}
if (this._lineElement) {
this._lineElement.destroy(options);
}
if (this._lineCornerElement) {
this._lineCornerElement.destroy(options);
}
if (this._lineControlPointElement) {
this._lineControlPointElement.destroy(options);
}
if (this._editButtonElement) {
this._editButtonElement.destroy(options);
}
if (this._moveToBackButtonElement) {
this._moveToBackButtonElement.destroy(options);
}
if (this._moveToFrontButtonElement) {
this._moveToFrontButtonElement.destroy(options);
}
if (this._deleteButtonElement) {
this._deleteButtonElement.destroy(options);
}
if (this._degroupButtonElement) {
this._degroupButtonElement.destroy(options);
}
if (this._duplicateButtonElement) {
this._duplicateButtonElement.destroy(options);
}
if (this._clipboardButtonElement) {
this._clipboardButtonElement.destroy(options);
}
_super.prototype.destroy.call(this, options);
};
Line.getInstance = function (image, startPositionPoint, endPositionPoint, bezierCourve, imageWidth) {
return new Line(image, {
dirty: true,
id: uuidv4(),
type: Models.ImageObjectType.LINE,
isStatic: false,
zIndex: 0,
start: startPositionPoint,
end: endPositionPoint,
isBezier: bezierCourve,
interactWithLines: true,
strokeWidth: 4 / imageWidth,
options: {
hasLine: true,
lineColor: 0xffffff,
hasFill: false
}
});
};
Line.prototype.hasPositionPoint = function (point) {
return point === this.start || point === this.end;
};
Line.prototype._getLineObject = function (points) {
var model = {
points: points,
options: Object.assign({}, this.model.options),
lineWidth: Math.round(this.model.strokeWidth * this.imageDimensions.width * 100) / 100,
};
switch (this.type) {
case LineTypes.LINEAR:
return new MedsurfDraw.StraightLine(model);
case LineTypes.QUADRATIC:
return new MedsurfDraw.QuadraticCurve(model);
case LineTypes.BEZIER:
return new MedsurfDraw.BezierLine(model);
}
return undefined;
};
Line.prototype._getLinePointsModel = function () {
var _this = this;
if (!this.start || !this.end || !this.parent) {
return;
}
try {
if (isNaN(this.start.x) || isNaN(this.start.y) || isNaN(this.end.x) || isNaN(this.start.y)) {
return;
}
}
catch (e) {
this.stopDrawing(20000);
if (!this.start.destroyed && !this.end.destroyed) {
this.image.sendError(e);
}
return;
}
this.type = LineTypes.NOT_INITIALIZED;
this.direction = LineDirection.START_END;
this.controlStart = null;
this.controlEnd = null;
if (this.model.isBezier) {
var image = this.image;
var startLines = [];
if (this.start instanceof MedsurfDraw.PositionPoint) {
startLines = image.getLinesByPositionPoint(this.start).filter(function (line) { return line !== _this && line.model.interactWithLines; });
}
var endLines = [];
if (this.end instanceof MedsurfDraw.PositionPoint) {
endLines = image.getLinesByPositionPoint(this.end).filter(function (line) { return line !== _this && line.model.interactWithLines; });
}
if (startLines.length == 0 && endLines.length == 0) {
var points = this._getStraightLinePointsModel(this.start, this.end);
if (points) {
this.type = LineTypes.LINEAR;
return points;
}
}
else if (startLines.length == 0 || endLines.length == 0) {
var points = this._getQuadraticCurvePointsModel(this.start, this.end, startLines, endLines);
if (points) {
this.type = LineTypes.QUADRATIC;
this.controlStart = points.controlPointsPrevious.c2;
return points;
}
}
else {
var points = this._getBezierLinePointsModel(this.start, this.end, startLines, endLines);
if (points) {
this.type = LineTypes.BEZIER;
this.controlStart = points.controlPointsPrevious.c2;
this.controlEnd = points.controlPointsNext.c1;
return points;
}
}
}
else {
var points = this._getStraightLinePointsModel(this.start, this.end);
if (points) {
this.type = LineTypes.LINEAR;
return points;
}
}
return undefined;
};
Line.prototype._getStraightLinePointsModel = function (start, end) {
var startPoint = undefined;
var endPoint = undefined;
var startSet = false;
if (start instanceof MedsurfDraw.PositionPoint) {
try {
startPoint = start.position;
startSet = true;
}
catch (e) {
return undefined;
}
}
var endSet = false;
if (end instanceof MedsurfDraw.PositionPoint) {
try {
endPoint = end.position;
endSet = true;
}
catch (e) {
return undefined;
}
}
if (!startSet) {
if (!endSet) {
throw 'Not implemented';
}
else {
if (endPoint === undefined) {
return undefined;
}
if (start.isPointInPolygon(endPoint)) {
return undefined;
}
startPoint = start.getNearestPointForPoint(endPoint);
}
}
else if (!endSet) {
if (startPoint === undefined) {
return undefined;
}
if (end.isPointInPolygon(startPoint)) {
return undefined;
}
endPoint = end.getNearestPointForPoint(startPoint);
}
return { start: startPoint, end: endPoint };
};
Line.prototype._getQuadraticCurvePointsModel = function (start, end, startLines, endLines) {
var _this = this;
var controlPoint;
var controlPointsPrevious;
if (startLines.length == 0) {
var startPoint = void 0;
if (start instanceof MedsurfDraw.FillCollection) {
startPoint = start.getNearestPointForPoint(end.position);
}
else {
startPoint = start.position;
}
this.direction = LineDirection.END_START;
if (endLines.length > 1) {
var controlX_1 = 0;
var controlY_1 = 0;
endLines.forEach(function (line) {
if (!line.start || !line.end) {
return;
}
if (line.start == start || line.start == end) {
controlX_1 += line.end.x;
controlY_1 += line.end.y;
}
else {
controlX_1 += line.start.x;
controlY_1 += line.start.y;
}
});
controlPoint = new PIXI.Point(controlX_1 / endLines.length, controlY_1 / endLines.length);
}
else {
if (endLines[0].start == start || endLines[0].start == end) {
if (!endLines[0].end) {
throw "error";
}
controlPoint = new PIXI.Point(endLines[0].end.x, endLines[0].end.y);
}
else {
if (!endLines[0].start) {
throw "error";
}
controlPoint = new PIXI.Point(endLines[0].start.x, endLines[0].start.y);
}
}
controlPointsPrevious = Line._findControlPoints(controlPoint, end.position, startPoint);
return {
start: end.position,
end: startPoint,
controlPoint: controlPoint,
controlPointsPrevious: controlPointsPrevious
};
}
var endPoint;
if (end instanceof MedsurfDraw.FillCollection) {
endPoint = end.getNearestPointForPoint(start.position);
}
else {
endPoint = end.position;
}
if (startLines.length > 1) {
var controlX_2 = 0;
var controlY_2 = 0;
startLines.forEach(function (line) {
if (!line.start || !line.end) {
return;
}
if (line.start == _this.start || line.start == _this.end) {
controlX_2 += line.end.x;
controlY_2 += line.end.y;
}
else {
controlX_2 += line.start.x;
controlY_2 += line.start.y;
}
});
controlPoint = new PIXI.Point(controlX_2 / startLines.length, controlY_2 / startLines.length);
}
else {
if (startLines[0].start == this.start || startLines[0].start == this.end) {
if (!startLines[0].end) {
throw "error";
}
controlPoint = new PIXI.Point(startLines[0].end.x, startLines[0].end.y);
}
else {
if (!startLines[0].start) {
throw "error";
}
controlPoint = new PIXI.Point(startLines[0].start.x, startLines[0].start.y);
}
}
controlPointsPrevious = Line._findControlPoints(controlPoint, start.position, endPoint);
return {
start: start.position,
end: endPoint,
controlPoint: controlPoint,
controlPointsPrevious: controlPointsPrevious
};
};
Line.prototype._getBezierLinePointsModel = function (start, end, startLines, endLines) {
var controlPointPrevious;
if (startLines.length > 1) {
var controlX_3 = 0;
var controlY_3 = 0;
startLines.forEach(function (line) {
if (!line.start || !line.end) {
return;
}
if (line.start == start || line.start == end) {
controlX_3 += line.end.x;
controlY_3 += line.end.y;
}
else {
controlX_3 += line.start.x;
controlY_3 += line.start.y;
}
});
controlPointPrevious = new PIXI.Point(controlX_3 / startLines.length, controlY_3 / startLines.length);
}
else {
if (startLines[0].start == start || startLines[0].start == end) {
if (!startLines[0].end) {
throw "error";
}
controlPointPrevious = new PIXI.Point(startLines[0].end.x, startLines[0].end.y);
}
else {
if (!startLines[0].start) {
throw "error";
}
controlPointPrevious = new PIXI.Point(startLines[0].start.x, startLines[0].start.y);
}
}
var controlPointsPrevious = Line._findControlPoints(controlPointPrevious, start.position, end.position);
var controlPointNext;
if (endLines.length > 1) {
var controlX_4 = 0;
var controlY_4 = 0;
endLines.forEach(function (line) {
if (!line.start || !line.end) {
return;
}
if (line.start == start || line.start == end) {
controlX_4 += line.end.x;
controlY_4 += line.end.y;
}
else {
controlX_4 += line.start.x;
controlY_4 += line.start.y;
}
});
controlPointNext = new PIXI.Point(controlX_4 / endLines.length, controlY_4 / endLines.length);
}
else {
if (endLines[0].start == start || endLines[0].start == end) {
if (!endLines[0].end) {
throw "error";
}
controlPointNext = new PIXI.Point(endLines[0].end.x, endLines[0].end.y);
}
else {
if (!endLines[0].start) {
throw "error";
}
controlPointNext = new PIXI.Point(endLines[0].start.x, endLines[0].start.y);
}
}
var controlPointsNext = Line._findControlPoints(start.position, end.position, controlPointNext);
return {
start: start.position,
end: end.position,
controlPointsPrevious: controlPointsPrevious,
controlPointsNext: controlPointsNext
};
};
Line._findControlPoints = function (p1, p2, p3) {
var dx1 = p1.x - p2.x, dy1 = p1.y - p2.y;
var dx2 = p2.x - p3.x, dy2 = p2.y - p3.y;
var l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
var l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
var m1 = { x: (p1.x + p2.x) / 2.0, y: (p1.y + p2.y) / 2.0 };
var m2 = { x: (p2.x + p3.x) / 2.0, y: (p2.y + p3.y) / 2.0 };
var dxm = (m1.x - m2.x);
var dym = (m1.y - m2.y);
var k = l2 / (l1 + l2);
var cm = { x: m2.x + dxm * k, y: m2.y + dym * k };
var tx = p2.x - cm.x, ty = p2.y - cm.y;
var c1 = new PIXI.Point(m1.x + tx, m1.y + ty);
var c2 = new PIXI.Point(m2.x + tx, m2.y + ty);
return { c1: c1, c2: c2, l1: Math.floor(l1), l2: Math.floor(l2) };
};
Line.prototype._removeModeInit = function () {
try {
var points = this._getLinePointsModel();
if (!points) {
return;
}
var result = this._getLineObject(points);
if (result) {
this._lineElement = result;
this.addChild(this._lineElement);
this._lineCornerElement.points = result.points;
this._lineControlPointElement.points = result.points;
}
this.sortChildren();
this.emit("debounceDraw");
}
catch (e) {
this.type = LineTypes.NOT_INITIALIZED;
this.emit("debounceDraw");
}
};
Line.prototype._modeDefault = function () {
if (this.model.isStatic) {
this.showItem();
}
else {
this.hideItem();
}
};
Line.prototype._removeModeDefault = function () {
};
Line.prototype._modeMarker = function () {
this.showItem();
};
Line.prototype._removeModeMarker = function () {
};
Line.prototype._modeSelftest = function () {
if (this.model.isStatic) {
this.showItem();
}
else {
this.hideItem();
}
};
Line.prototype._removeModeSelftest = 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.onSelftest, this.selectInteraction);
};
Line.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();
};
Line.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);
};
Line.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();
};
Line.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);
};
Line.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();
};
Line.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);
};
Line.prototype._modeSelectItem = function () {
this.onOut();
this.interactive = true;
if (this.start) {
this.start.moveInteraction.on("startMove", this.startMovePoint, this);
this.start.moveInteraction.on("endMove", this.endMovePoint, this);
this.start.modeInteraction.setModeItem("select_line");
}
if (this.end) {
this.end.moveInteraction.on("startMove", this.startMovePoint, this);
this.end.moveInteraction.on("endMove", this.endMovePoint, this);
this.end.modeInteraction.setModeItem("select_line");
}
this.image.controlUpdateElements();
this.showItem();
this.emit("pointerover", new PIXI.InteractionEvent());
};
Line.prototype._removeModeSelectItem = function (parent, mode) {
this.interactive = false;
if (this.start) {
this.start.moveInteraction.on("startMove", this.startMovePoint, this);
this.start.moveInteraction.on("endMove", this.endMovePoint, this);
}
if (this.end) {
this.end.moveInteraction.on("startMove", this.startMovePoint, this);
this.end.moveInteraction.on("endMove", this.endMovePoint, this);
}
this.collapseAllMenus(new PIXI.InteractionEvent());
if (mode === 'author') {
this.emit("debounceControlUnselectItem", this.image);
}
};
Line.prototype._modeBlockedItem = function () {
if (this._lineElement) {
this._lineElement.options.lineAlpha = Design.blocked.lineAlpha;
this._lineElement.options.fillAlpha = Design.blocked.fillAlpha;
}
this.emit("debounceDraw");
};
Line.prototype._removeModeBlockedItem = function () {
if (this._lineElement) {
this._lineElement.options = Object.assign({}, this.model.options);
}
this.emit("debounceDraw");
};
Line.prototype._modeDrawItem = function () {
};
Line.prototype._removeModeDrawItem = function () {
};
Line.prototype._modeChooseSelect = function () {
this.interactive = true;
this.cursor = "select";
if (this._lineElement) {
this._lineElement.options.lineColor = Design.selftest.lineColorSelect;
this._lineElement.options.fillColor = Design.selftest.fillColorSelect;
}
this.emit("debounceDraw");
};
Line.prototype._removeModeChooseSelect = function () {
this.interactive = false;
if (this._lineElement) {
this._lineElement.options = Object.assign({}, this.model.options);
}
this.emit("debounceDraw");
};
Line.prototype._modeChooseUnselect = function () {
this.interactive = true;
this.cursor = "select";
if (this._lineElement) {
this._lineElement.options.lineColor = Design.selftest.lineColorUnselect;
this._lineElement.options.fillColor = Design.selftest.fillColorUnselect;
}
this.emit("debounceDraw");
};
Line.prototype._removeModeChooseUnselect = function () {
this.interactive = false;
if (this._lineElement) {
this._lineElement.options = Object.assign({}, this.model.options);
}
this.emit("debounceDraw");
};
Line.prototype._modeCloneItem = function () {
};
Line.prototype._removeModeCloneItem = function () {
this.moveInteraction.reset();
};
Line.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);
if (this.start) {
this.start.emit("debounceDeleteItem", image);
}
if (this.end) {
this.end.emit("debounceDeleteItem", image);
}
image.deleteImageObject(this.model);
}
this.destroy();
image.controlHideMenu();
image.controlUpdateElements();
};
Line.prototype.collapseAllMenus = function (event) {
this._moveToFrontButtonElement.toggleMenu(event, false);
};
Line.prototype.onButtonEdit = function () {
this.collapseAllMenus(new PIXI.InteractionEvent());
this.image.controlHideMenu();
this.image.editImageObject(this.model);
};
Line.prototype.onButtonMoveToFront = function () {
this.model.zIndex++;
this.zIndex = Design.line.zIndexDefault + this.model.zIndex;
this.image.sortChildren();
this.image.updateImageObject(this.model);
};
Line.prototype.onButtonMoveToBack = function () {
this.model.zIndex--;
this.zIndex = Design.line.zIndexDefault + this.model.zIndex;
this.image.sortChildren();
this.image.updateImageObject(this.model);
};
Line.prototype.onButtonDelete = function (event) {
var _this = this;
this.collapseAllMenus(new PIXI.InteractionEvent());
this.image.controlHideMenu();
setTimeout(function () {
_this.modeInteraction.setMode("delete");
}, 300);
};
Line.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);
}
};
Line.prototype.onButtonDuplicate = function () {
this.collapseAllMenus(new PIXI.InteractionEvent());
this.image.controlHideMenu();
this.image.copyImageObject(this.model);
};
Line.prototype.onButtonClipboard = function () {
this.collapseAllMenus(new PIXI.InteractionEvent());
this.image.controlHideMenu();
this.image.clipboardImageObject(this.model);
};
Line.prototype.onButtonBezier = function (override) {
this.model.isBezier = override || !this.model.isBezier;
this.emit("debounceDraw");
this.image.updateImageObject(this.model);
};
Line.prototype.onColor = function (mode, has, color, colorAlpha) {
if (mode === ColorMode.LINE) {
this.model.options.hasLine = has;
this.model.options.lineColor = color;
this.model.options.lineAlpha = colorAlpha;
if (this._lineElement) {
this._lineElement.options = Object.assign({}, this.model.options);
}
this.emit("debounceDraw");
this.image.updateImageObject(this.model);
}
};
Line.prototype.onNumber = function (mode, number) {
if (mode === NumberMode.WIDTH) {
this.model.strokeWidth = number / this.imageDimensions.width;
if (this._lineElement) {
this._lineElement.lineWidth = Math.round(this.model.strokeWidth * this.imageDimensions.width * 100) / 100;
}
this.emit("debounceDraw");
this.emit("onBackgroundNumber");
this.image.updateImageObject(this.model);
}
};
Line.prototype.onButtonInteractWithLines = function (override) {
this.model.interactWithLines = override || !this.model.interactWithLines;
this.emit("debounceDraw");
this.image.updateImageObject(this.model);
};
Line.prototype.onButtonStatic = function (override) {
this.model.isStatic = override || !this.model.isStatic;
this.emit("debounceDraw");
this.image.updateImageObject(this.model);
};
Line.prototype.onButtonAddMiddlePoint = function (image, layerGroup) {
var _this = this;
if (!this.start || !this.end || !this._lineElement) {
return;
}
var points = this._lineElement.geometry.graphicsData[0].shape.points;
var valuesX = points.filter(function (v, i) { return i % 2 === 0; })
.sort(function (a, b) { return a - b; });
var valuesY = points.filter(function (v, i) { return i % 2 === 1; })
.sort(function (a, b) { return a - b; });
var posX;
var posY;
if (this.type !== LineTypes.LINEAR) {
if (valuesX.length % 2 === 0) {
var pointIndex = valuesX.length / 2;
posX = (valuesX[pointIndex] + valuesX[pointIndex + 1]) / 2;
posY = (valuesY[pointIndex] + valuesY[pointIndex + 1]) / 2;
}
else {
var pointIndex = valuesX.length / 2;
posX = valuesX[pointIndex];
posY = valuesY[pointIndex];
}
}
else {
var startX = this.start.position.x;
var startY = this.start.position.y;
var endX = this.end.position.x;
var endY = this.end.position.y;
var precision = 1;
var index = valuesX.length - 1;
if (this.start instanceof MedsurfDraw.FillCollection) {
if (this.end instanceof MedsurfDraw.FillCollection) {
startX = valuesX[0];
startY = valuesY[0];
}
else {
if ((valuesX[0] - precision) <= endX && endX <= (valuesX[0] + precision)) {
startX = valuesX[index];
startY = valuesY[index];
}
else {
startX = valuesX[0];
startY = valuesY[0];
}
}
}
if (this.end instanceof MedsurfDraw.FillCollection) {
if ((valuesX[0] - precision) <= startX && startX <= (valuesX[0] + precision)) {
endX = valuesX[index];
endY = valuesY[index];
}
else {
endX = valuesX[0];
endY = valuesY[0];
}
}
posX = (startX + endX) / 2;
posY = (startY + endY) / 2;
}
var img = this.image;
var imageWidth = img.imageDimensions.width;
var positionPoint = MedsurfDraw.PositionPoint.getInstance(this.image);
positionPoint.model.position.x = posX / imageWidth;
positionPoint.model.position.y = posY / imageWidth;
img.addChild(positionPoint);
positionPoint.modeInteraction.setDefaultMode("author");
var startLine = MedsurfDraw.Line.getInstance(img, this.start.model.id, positionPoint.model.id, this.model.isBezier, imageWidth);
startLine.model.isStatic = this.model.isStatic;
startLine.model.interactWithLines = this.model.interactWithLines;
startLine.model.strokeWidth = this.model.strokeWidth;
startLine.model.options.lineColor = this.model.options.lineColor;
startLine.model.options.lineAlpha = this.model.options.lineAlpha;
img.addChild(startLine);
startLine.modeInteraction.setDefaultMode("author");
var endLine = MedsurfDraw.Line.getInstance(img, positionPoint.model.id, this.end.model.id, this.model.isBezier, imageWidth);
endLine.model.isStatic = this.model.isStatic;
endLine.model.interactWithLines = this.model.interactWithLines;
endLine.model.strokeWidth = this.model.strokeWidth;
endLine.model.options.lineColor = this.model.options.line