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