medsurf-draw
Version:
Draw annotations on jpg/zoomify images, based on PIXI.js
215 lines • 8.56 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";
import { debounce } from "debounce";
var SubMenuEntryModel = (function () {
function SubMenuEntryModel() {
}
return SubMenuEntryModel;
}());
export { SubMenuEntryModel };
var SubMenuElementModel = (function (_super) {
__extends(SubMenuElementModel, _super);
function SubMenuElementModel() {
return _super !== null && _super.apply(this, arguments) || this;
}
return SubMenuElementModel;
}(BaseContainerImageModel));
export { SubMenuElementModel };
var SubMenuElement = (function (_super) {
__extends(SubMenuElement, _super);
function SubMenuElement(model) {
var _this = _super.call(this, model) || this;
_this.zIndex = Design.subMenu.zIndex;
_this._debounceToggleMenuMethod = debounce(_this.toggleMenu.bind(_this), 50).bind(_this);
_this.on("added", function () {
_this.on("debounceToggleMenu", _this._debounceToggleMenuMethod);
});
_this.on("removed", function () {
_this.off("debounceToggleMenu", _this._debounceToggleMenuMethod);
});
return _this;
}
SubMenuElement.prototype.init = function () {
var _this = this;
this._buttonElement = new MedsurfDraw.ButtonElement({
image: this.image,
text: this.text,
description: this.description,
descriptionFontSize: this.descriptionFontSize,
rectangle: new PIXI.Rectangle(0, 0, this.rectangle.width, this.rectangle.height),
fontSize: this.fontSize,
fontColor: this.fontColor,
});
this._buttonElement.on('button', this.toggleMenu, this);
this._buttonElement.on('button', this._emitButtonEvent, this);
this.addChild(this._buttonElement);
this._containerElement = new MedsurfDraw.Container({ image: this.image });
this._containerElement.position.x = this._buttonElement.width + Design.subMenu.buttonGab;
this._containerElement.hideItem();
this.addChild(this._containerElement);
if (this.menuElements && this.menuElements.length > 0) {
this.menuElements.forEach(function (menuElement) {
_this._containerElement.addChild(menuElement.element);
});
}
this.sortChildren();
this.emit("debounceDraw");
};
SubMenuElement.prototype.draw = function () {
var _this = this;
this._buttonElement.setIconAngle(360 - this.angle);
this._containerElement.position.x = this._buttonElement.width + Design.subMenu.buttonGab;
if (this.menuElements) {
var prevElement_1;
this.menuElements.forEach(function (menuElement) {
if (prevElement_1) {
menuElement.element.position.x = prevElement_1.element.position.x + prevElement_1.element.width + menuElement.order * Design.subMenuItems.buttonGab;
}
else {
menuElement.element.position.x = menuElement.order * Design.subMenuItems.buttonGab;
}
prevElement_1 = menuElement;
if (menuElement.element instanceof MedsurfDraw.ButtonElement || menuElement.element instanceof MedsurfDraw.IndexedRoundButtonElement || menuElement.element instanceof MedsurfDraw.RoundButtonElement) {
menuElement.element.setIconAngle(360 - _this.angle);
}
menuElement.element.draw();
});
}
};
SubMenuElement.prototype.destroy = function (options) {
var _this = this;
if (this.menuElements && this.menuElements.length > 0) {
this.menuElements.forEach(function (menuElement) {
if (_this._containerElement) {
_this._containerElement.removeChild(menuElement.element);
}
});
}
if (this._buttonElement) {
this._buttonElement.off('button', this.toggleMenu, this);
this._buttonElement.off('button', this._emitButtonEvent, this);
this._buttonElement.destroy(options);
}
if (this._containerElement) {
this._containerElement.destroy(options);
}
_super.prototype.destroy.call(this, options);
};
SubMenuElement.prototype.showMenu = function (event) {
this.toggleMenu(event, true);
};
SubMenuElement.prototype.hideMenu = function (event) {
this.toggleMenu(event, false);
};
SubMenuElement.prototype.toggleMenu = function (event, override) {
if (override === void 0) { override = undefined; }
event.stopPropagation();
if (this._containerElement) {
if (override !== undefined) {
this._containerElement.visible = override;
}
else {
this._containerElement.visible = !this._containerElement.visible;
}
}
};
SubMenuElement.prototype._emitButtonEvent = function (event) {
this.hideMenu(event);
this.emit("debounceToggleMenu", event, this._containerElement.visible);
};
SubMenuElement.prototype.onImageZoom = function (scaleX, scaleY) {
this.emit("debounceDraw");
};
Object.defineProperty(SubMenuElement.prototype, "text", {
get: function () {
return this.data.text;
},
set: function (value) {
this.data.text = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SubMenuElement.prototype, "description", {
get: function () {
return this.data.description;
},
set: function (value) {
this.data.description = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SubMenuElement.prototype, "descriptionFontSize", {
get: function () {
return this.data.descriptionFontSize;
},
set: function (value) {
this.data.descriptionFontSize = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SubMenuElement.prototype, "menuElements", {
get: function () {
return this.data.menuElements;
},
set: function (value) {
this.data.menuElements = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SubMenuElement.prototype, "rectangle", {
get: function () {
return this.data.rectangle;
},
set: function (value) {
this.data.rectangle = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SubMenuElement.prototype, "fontSize", {
get: function () {
return this.data.fontSize || Design.subMenu.fontSize;
},
set: function (value) {
this.data.fontSize = value;
this._buttonElement.fontSize = this.fontSize;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SubMenuElement.prototype, "fontColor", {
get: function () {
return this.data.fontColor || Design.subMenu.fontColor;
},
set: function (value) {
this.data.fontColor = value;
this._buttonElement.fontColor = this.fontColor;
},
enumerable: false,
configurable: true
});
return SubMenuElement;
}(BaseContainer));
export { SubMenuElement };
//# sourceMappingURL=SubMenuElement.js.map