medsurf-draw
Version:
Draw annotations on jpg/zoomify images, based on PIXI.js
188 lines • 7.74 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 ButtonElementModel = (function (_super) {
__extends(ButtonElementModel, _super);
function ButtonElementModel() {
return _super !== null && _super.apply(this, arguments) || this;
}
return ButtonElementModel;
}(BaseContainerImageModel));
export { ButtonElementModel };
var ButtonElement = (function (_super) {
__extends(ButtonElement, _super);
function ButtonElement(model) {
var _this = _super.call(this, model) || this;
_this.zIndex = Design.button.zIndex;
_this.position.set(_this.rectangle.x, _this.rectangle.y);
_this.selectInteraction = new MedsurfDraw.SelectInteraction(_this);
_this.selectInteraction.on("onRelease", _this.onRelease, _this);
_this.on("added", function () {
_this.on("pointerover", _this.selectInteraction.onHover, _this.selectInteraction);
_this.on("mousedown", _this.selectInteraction.onSelect, _this.selectInteraction);
_this.on("mouseup", _this.selectInteraction.onRelease, _this.selectInteraction);
});
_this.on("removed", function () {
_this.off("pointerover", _this.selectInteraction.onHover, _this.selectInteraction);
_this.off("mousedown", _this.selectInteraction.onSelect, _this.selectInteraction);
_this.off("mouseup", _this.selectInteraction.onRelease, _this.selectInteraction);
});
return _this;
}
ButtonElement.prototype.init = function (parent) {
this.interactive = true;
var fontSize = this.fontSize;
if (fontSize < 1) {
fontSize = 1;
}
this._rectangleElement = new MedsurfDraw.Rectangle({
rectangle: new PIXI.Rectangle(0, 0, this.rectangle.width, this.rectangle.height),
options: { hasLine: true, lineColor: Design.button.lineColor, lineAlpha: Design.button.lineAlpha, hasFill: true, fillColor: Design.button.fillColor, fillAlpha: Design.button.fillAlpha },
lineWidth: Design.button.lineWidth
});
this.addChild(this._rectangleElement);
this._iconElement = new MedsurfDraw.Text({
text: this.text,
style: new PIXI.TextStyle({ align: "left", fill: 0x000000, fontSize: fontSize, fontFamily: "Font Awesome 5 Pro", fontStyle: "normal", fontWeight: "500" })
});
this._iconElement.anchor.set(0.5, 0.5);
this._rectangleElement.addChild(this._iconElement);
this.sortChildren();
this.emit("debounceDraw");
};
ButtonElement.prototype.draw = function () {
var fontSize = this.fontSize;
if (fontSize < 1) {
fontSize = 1;
}
this._rectangleElement.rectangle = new PIXI.Rectangle(0, 0, this.rectangle.width, this.rectangle.height);
this._rectangleElement.draw();
this._iconElement.style.fontSize = fontSize;
this._iconElement.position.set(this._rectangleElement.rectangle.width / 2, this._rectangleElement.rectangle.height / 2);
};
ButtonElement.prototype.destroy = function (options) {
if (this.selectInteraction) {
this.selectInteraction.removeAllListeners();
}
if (this._iconElement) {
this._iconElement.destroy(options);
}
if (this._rectangleElement) {
this._rectangleElement.destroy(options);
}
_super.prototype.destroy.call(this, options);
};
ButtonElement.prototype.setIconAngle = function (angle) {
this._iconElement.angle = angle;
};
ButtonElement.prototype.onRelease = function (event) {
event.stopPropagation();
this.emit("button", event);
};
Object.defineProperty(ButtonElement.prototype, "text", {
get: function () {
return this.data.text;
},
set: function (value) {
this.data.text = value;
this._iconElement.text = this.text;
},
enumerable: false,
configurable: true
});
Object.defineProperty(ButtonElement.prototype, "description", {
get: function () {
return this.data.description;
},
set: function (value) {
this.data.description = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(ButtonElement.prototype, "descriptionFontSize", {
get: function () {
return this.data.descriptionFontSize;
},
set: function (value) {
this.data.descriptionFontSize = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(ButtonElement.prototype, "rectangle", {
get: function () {
return this.data.rectangle || new PIXI.Rectangle(0, 0, 20, 20);
},
set: function (value) {
this.data.rectangle = value;
this._rectangleElement.rectangle = this.rectangle;
this.emit("debounceDraw");
},
enumerable: false,
configurable: true
});
Object.defineProperty(ButtonElement.prototype, "options", {
get: function () {
return this.data.options || { hasLine: true, lineColor: Design.menuButton.lineColor, lineAlpha: Design.menuButton.lineAlpha, hasFill: true, fillColor: Design.menuButton.fillColor, fillAlpha: Design.menuButton.fillAlpha };
},
set: function (value) {
this.data.options = value;
this._rectangleElement.options = this.options;
this.emit("debounceDraw");
},
enumerable: false,
configurable: true
});
Object.defineProperty(ButtonElement.prototype, "fontSize", {
get: function () {
return this.data.fontSize || 20;
},
set: function (value) {
this.data.fontSize = value;
this._iconElement.style.fontSize = this.fontSize;
},
enumerable: false,
configurable: true
});
Object.defineProperty(ButtonElement.prototype, "fontColor", {
get: function () {
return this.data.fontColor || 0x000000;
},
set: function (value) {
this.data.fontColor = value;
this._iconElement.style.fill = this.fontColor;
},
enumerable: false,
configurable: true
});
Object.defineProperty(ButtonElement.prototype, "selectInteraction", {
get: function () {
return this._selectInteraction;
},
set: function (value) {
this._selectInteraction = value;
},
enumerable: false,
configurable: true
});
return ButtonElement;
}(BaseContainer));
export { ButtonElement };
//# sourceMappingURL=ButtonElement.js.map