medsurf-draw
Version:
Draw annotations on jpg/zoomify images, based on PIXI.js
174 lines • 7.14 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 { BaseTilingSprite } from "../../bases/elements/BaseTilingSprite";
var ColorButtonElementModel = (function (_super) {
__extends(ColorButtonElementModel, _super);
function ColorButtonElementModel() {
return _super !== null && _super.apply(this, arguments) || this;
}
return ColorButtonElementModel;
}(BaseContainerImageModel));
export { ColorButtonElementModel };
var ColorButtonElement = (function (_super) {
__extends(ColorButtonElement, _super);
function ColorButtonElement(model) {
var _this = _super.call(this, model) || this;
_this.zIndex = Design.colorButton.zIndex;
_this.selectInteraction = new MedsurfDraw.SelectInteraction(_this);
_this.selectInteraction.on("onSelect", _this.onSelect, _this);
_this.on("added", function (parent) {
_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 (parent) {
_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;
}
ColorButtonElement.prototype.init = function (parent) {
this.interactive = true;
this.position.set(this.rectangle.x, this.rectangle.y);
var texture = this.loader.resources['transparent'].texture;
if (!texture || !texture.baseTexture) {
throw 'No texture created';
}
texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
this._transparentElement = new BaseTilingSprite({ image: this.image, texture: texture });
this._transparentElement.width = this.rectangle.width;
this._transparentElement.height = this.rectangle.height;
this.addChild(this._transparentElement);
this._colorElement = new MedsurfDraw.Rectangle({
rectangle: new PIXI.Rectangle(0, 0, this.rectangle.width, this.rectangle.height),
options: { hasLine: true, lineColor: Design.colorButton.lineColor, lineAlpha: Design.colorButton.lineAlpha, hasFill: true, fillColor: this.color, fillAlpha: this.colorAlpha },
lineWidth: Design.colorButton.lineWidth
});
this.addChild(this._colorElement);
this.sortChildren();
this.emit("debounceDraw");
};
ColorButtonElement.prototype.draw = function () {
this._colorElement.draw();
};
ColorButtonElement.prototype.destroy = function (options) {
if (this.selectInteraction) {
this.selectInteraction.removeAllListeners();
}
if (this._transparentElement) {
this._transparentElement.destroy(options);
}
if (this._colorElement) {
this._colorElement.destroy(options);
}
_super.prototype.destroy.call(this, options);
};
ColorButtonElement.prototype.onSelect = function (event) {
event.stopPropagation();
this.emit("button", event, this._colorElement.options.fillColor, this._colorElement.options.fillAlpha);
};
Object.defineProperty(ColorButtonElement.prototype, "description", {
get: function () {
return this.data.description;
},
set: function (value) {
this.data.description = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(ColorButtonElement.prototype, "descriptionFontSize", {
get: function () {
return this.data.descriptionFontSize;
},
set: function (value) {
this.data.descriptionFontSize = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(ColorButtonElement.prototype, "loader", {
get: function () {
return this.data.loader;
},
set: function (value) {
this.data.loader = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(ColorButtonElement.prototype, "hasFill", {
get: function () {
return this.data.hasFill;
},
set: function (value) {
this.data.hasFill = value;
this._colorElement.options.hasFill = this.hasFill;
},
enumerable: false,
configurable: true
});
Object.defineProperty(ColorButtonElement.prototype, "color", {
get: function () {
return this.data.color;
},
set: function (value) {
this.data.color = value;
this._colorElement.options.fillColor = this.color;
},
enumerable: false,
configurable: true
});
Object.defineProperty(ColorButtonElement.prototype, "colorAlpha", {
get: function () {
return this.data.colorAlpha;
},
set: function (value) {
this.data.colorAlpha = value;
this._colorElement.options.fillAlpha = this.colorAlpha;
},
enumerable: false,
configurable: true
});
Object.defineProperty(ColorButtonElement.prototype, "rectangle", {
get: function () {
return this.data.rectangle || new PIXI.Rectangle(0, 0, 20, 20);
},
set: function (value) {
this.data.rectangle = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(ColorButtonElement.prototype, "selectInteraction", {
get: function () {
return this._selectInteraction;
},
set: function (value) {
this._selectInteraction = value;
},
enumerable: false,
configurable: true
});
return ColorButtonElement;
}(BaseContainer));
export { ColorButtonElement };
//# sourceMappingURL=ColorButtonElement.js.map