medsurf-draw
Version:
Draw annotations on jpg/zoomify images, based on PIXI.js
185 lines • 8.42 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 { Design } from "../../config/design";
import { BaseContainer, BaseContainerImageModel } from "../../bases/elements/BaseContainer";
var MenuEntryModel = (function () {
function MenuEntryModel() {
}
return MenuEntryModel;
}());
export { MenuEntryModel };
var MenuElementModel = (function (_super) {
__extends(MenuElementModel, _super);
function MenuElementModel() {
return _super !== null && _super.apply(this, arguments) || this;
}
return MenuElementModel;
}(BaseContainerImageModel));
export { MenuElementModel };
var MenuElement = (function (_super) {
__extends(MenuElement, _super);
function MenuElement(model) {
var _this = _super.call(this, model) || this;
_this.zIndex = Design.menu.zIndex;
_this.on("added", function () {
_this.image.moveInteraction.on("onMove", _this.onMove, _this);
_this.image.zoomInteraction.on("onZoom", _this.onZoom, _this);
});
_this.on("removed", function () {
_this.image.moveInteraction.off("onMove", _this.onMove, _this);
_this.image.zoomInteraction.off("onZoom", _this.onZoom, _this);
});
return _this;
}
MenuElement.prototype.init = function () {
this._buttonTextElement = new MedsurfDraw.Text({
text: "",
style: new PIXI.TextStyle({
fontSize: Design.menu.fontSize,
fill: 0xffffff,
align: 'center',
breakWords: true,
fontFamily: 'proxima_nova_altsemibold'
})
});
this._buttonTextElement.anchor.set(0.5, 0.5);
this._buttonTextElement.hideItem();
this.addChild(this._buttonTextElement);
this.sortChildren();
this.emit("debounceDraw");
};
MenuElement.prototype.draw = function () {
var _this = this;
if (this.menuElements) {
this.menuElements.forEach(function (menuElement) {
var angle = Design.menu.anglePositions[menuElement.order];
var x = _this.circle.radius * Math.cos(angle * Math.PI / 180);
var y = _this.circle.radius * Math.sin(angle * Math.PI / 180);
menuElement.element.position.set(x, y);
if (menuElement.element instanceof MedsurfDraw.IndexedRoundButtonElement
|| menuElement.element instanceof MedsurfDraw.RoundSubMenuElement
|| menuElement.element instanceof MedsurfDraw.SubMenuElement) {
menuElement.element.angle = angle;
}
menuElement.element.draw();
});
}
};
MenuElement.prototype.destroy = function (options) {
if (this.menuElements && this.menuElements.length > 0) {
this._unsetMenu(this.menuElements);
}
_super.prototype.destroy.call(this, options);
};
MenuElement.prototype.setMousePosition = function (point) {
this._point = point;
this.position.set(this.image.position.x + point.x * this.imageScale.x, this.image.position.y + point.y * this.imageScale.y);
};
MenuElement.prototype._setMenu = function (menuElements) {
var _this = this;
if (menuElements && menuElements.length > 0) {
menuElements.forEach(function (menuElement) {
_this.addChild(menuElement.element);
menuElement.element.modeInteraction.setDefaultMode('default');
menuElement.element.on("onHover", _this._showText.bind(_this, menuElement.element.description, menuElement.element.descriptionFontSize), _this);
menuElement.element.on("onOut", _this._hideText, _this);
if (menuElement.element instanceof MedsurfDraw.RoundSubMenuElement || menuElement.element instanceof MedsurfDraw.SubMenuElement) {
menuElement.element.menuElements.forEach(function (me) {
me.element.on("onHover", _this._showText.bind(_this, me.element.description, me.element.descriptionFontSize), _this);
me.element.on("onOut", _this._hideText, _this);
});
}
});
this.emit("debounceDraw");
}
};
MenuElement.prototype._unsetMenu = function (menuElements) {
var _this = this;
if (menuElements && menuElements.length > 0) {
menuElements.forEach(function (menuElement) {
_this.removeChild(menuElement.element);
menuElement.element.off("onHover", _this._showText.bind(_this, menuElement.element.description, menuElement.element.descriptionFontSize), _this);
menuElement.element.off("onOut", _this._hideText, _this);
if (menuElement.element instanceof MedsurfDraw.RoundSubMenuElement || menuElement.element instanceof MedsurfDraw.SubMenuElement) {
menuElement.element.menuElements.forEach(function (me) {
me.element.off("onHover", _this._showText.bind(_this, me.element.description, me.element.descriptionFontSize), _this);
me.element.off("onOut", _this._hideText, _this);
});
}
});
}
};
MenuElement.prototype._showText = function (text, fontSize) {
this._buttonTextElement.text = text;
if (fontSize < Design.menu.minFontSize) {
this._buttonTextElement.hideItem();
}
else {
this._buttonTextElement.style.fontSize = fontSize;
this._buttonTextElement.showItem();
}
};
MenuElement.prototype._hideText = function () {
this._buttonTextElement.hideItem();
};
MenuElement.prototype.onMove = function (event, dX, dY) {
if (!this._point) {
return;
}
this.position.set(this.image.position.x + this._point.x * this.imageScale.x, this.image.position.y + this._point.y * this.imageScale.y);
};
MenuElement.prototype.onZoom = function () {
if (!this._point) {
return;
}
this.position.set(this.image.position.x + this._point.x * this.imageScale.x, this.image.position.y + this._point.y * this.imageScale.y);
};
MenuElement.prototype.hideItem = function () {
var _a;
_super.prototype.hideItem.call(this);
(_a = this.menuElements) === null || _a === void 0 ? void 0 : _a.filter(function (me) { return me.element instanceof MedsurfDraw.RoundSubMenuElement || me.element instanceof MedsurfDraw.SubMenuElement; }).forEach(function (me) {
me.element.hideMenu(new PIXI.InteractionEvent());
});
};
Object.defineProperty(MenuElement.prototype, "circle", {
get: function () {
return this.data.circle || new PIXI.Circle(0, 0, Design.menu.radius);
},
set: function (value) {
this.data.circle = value;
this.emit("debounceDraw");
},
enumerable: false,
configurable: true
});
Object.defineProperty(MenuElement.prototype, "menuElements", {
get: function () {
return this.data.menuElements;
},
set: function (value) {
this._unsetMenu(this.menuElements);
this.data.menuElements = value;
this._setMenu(this.menuElements);
},
enumerable: false,
configurable: true
});
return MenuElement;
}(BaseContainer));
export { MenuElement };
//# sourceMappingURL=MenuElement.js.map