medsurf-draw
Version:
Draw annotations on jpg/zoomify images, based on PIXI.js
213 lines • 9.8 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 AlphaSliderElementModel = (function (_super) {
__extends(AlphaSliderElementModel, _super);
function AlphaSliderElementModel() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.squareWidth = 20;
_this.squareHeight = 20;
return _this;
}
return AlphaSliderElementModel;
}(BaseContainerImageModel));
export { AlphaSliderElementModel };
var AlphaSliderElement = (function (_super) {
__extends(AlphaSliderElement, _super);
function AlphaSliderElement(model) {
var _this = _super.call(this, model) || this;
_this.zIndex = Design.alphaSliderElement.zIndex;
_this.moveInteraction = new MedsurfDraw.MoveInteraction(_this);
_this.moveInteraction.on("startMove", _this.onStartMove, _this);
_this.moveInteraction.on("onMove", _this.onMove, _this);
_this.on("mousedown", _this.moveInteraction.startMove, _this.moveInteraction);
_this.on("pointermove", _this.moveInteraction.onMove, _this.moveInteraction);
_this.on("mouseup", _this.moveInteraction.endMove, _this.moveInteraction);
_this.on("pointerout", _this.moveInteraction.endMove, _this.moveInteraction);
return _this;
}
AlphaSliderElement.prototype.init = function (parent) {
this.interactive = true;
this._canvas = document.createElement("canvas");
this._canvas.width = Design.alphaSliderElement.qualityWidth;
this._canvas.height = Design.alphaSliderElement.qualityHeight;
var ctx = this._canvas.getContext('2d');
if (!ctx) {
throw 'No canvas context created';
}
this._canvasContext = ctx;
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.squareWidth;
this._transparentElement.height = this.squareHeight;
this.addChild(this._transparentElement);
this._backgroundElement = new PIXI.Sprite();
this._backgroundElement.width = this.squareWidth;
this._backgroundElement.height = this.squareHeight;
this.addChild(this._backgroundElement);
this._borderElement = new MedsurfDraw.Rectangle({
rectangle: new PIXI.Rectangle(0, 0, this.squareWidth, this.squareHeight),
options: { hasLine: true, lineColor: Design.colorSliderElement.borderLineColor, lineAlpha: Design.colorSliderElement.borderLineAlpha, hasFill: false },
lineWidth: Design.colorSliderElement.borderLineWidth
});
this.addChild(this._borderElement);
this._sliderElement = new MedsurfDraw.Rectangle({
rectangle: new PIXI.Rectangle(0, 0, Design.alphaSliderElement.sliderWidth, this.squareHeight),
options: { hasLine: false, hasFill: true, fillColor: Design.colorSliderElement.fillColor, fillAlpha: Design.colorSliderElement.fillAlpha },
lineWidth: undefined
});
this.addChild(this._sliderElement);
this.createSliderBackground(this.color);
};
AlphaSliderElement.prototype.draw = function () {
this._borderElement.draw();
this._sliderElement.draw();
this._sliderElement.position.x = (this.squareWidth - Design.alphaSliderElement.sliderWidth) * (this.colorAlpha || 0);
};
AlphaSliderElement.prototype.destroy = function (options) {
if (this.moveInteraction) {
this.off("mousedown", this.moveInteraction.startMove, this.moveInteraction);
this.off("pointermove", this.moveInteraction.onMove, this.moveInteraction);
this.off("mouseup", this.moveInteraction.endMove, this.moveInteraction);
this.off("pointerout", this.moveInteraction.endMove, this.moveInteraction);
this.moveInteraction.off("startMove", this.onStartMove, this);
this.moveInteraction.off("onMove", this.onMove, this);
}
if (this._transparentElement) {
this._transparentElement.destroy(options);
}
if (this._backgroundElement) {
this._backgroundElement.destroy(options);
}
if (this._borderElement) {
this._borderElement.destroy(options);
}
if (this._sliderElement) {
this._sliderElement.destroy(options);
}
_super.prototype.destroy.call(this, options);
};
AlphaSliderElement.prototype.createSliderBackground = function (color) {
if (color === undefined) {
color = 0xff0000;
}
var r = ((color >> 16) & 0x0ff);
var g = ((color >> 8) & 0x0ff);
var b = (color & 0x0ff);
this._canvasContext.clearRect(0, 0, Design.alphaSliderElement.qualityWidth, Design.alphaSliderElement.qualityHeight);
var grad = this._canvasContext.createLinearGradient(0, 0, Design.alphaSliderElement.qualityWidth, 0);
grad.addColorStop(0, 'rgba(' + r + ', ' + g + ', ' + b + ', 0)');
grad.addColorStop(1, 'rgba(' + r + ', ' + g + ', ' + b + ', 1)');
this._canvasContext.fillStyle = grad;
this._canvasContext.fillRect(0, 0, Design.alphaSliderElement.qualityWidth, Design.alphaSliderElement.qualityHeight);
this._backgroundElement.texture = PIXI.Texture.from(this._canvas);
this._backgroundElement.texture.update();
};
AlphaSliderElement.prototype._emitAlpha = function () {
this.colorAlpha = this._sliderElement.position.x / (this.squareWidth - Design.alphaSliderElement.sliderWidth);
this.emit("alpha", this.colorAlpha);
};
AlphaSliderElement.prototype.onStartMove = function (event) {
var globalPosition = this.getGlobalPosition();
this._sliderElement.position.x = Math.floor(event.data.global.x - globalPosition.x) / this.imageScale.x;
if (this._sliderElement.position.x < 0) {
this._sliderElement.position.x = 0;
}
if (this._sliderElement.position.x >= (this.squareWidth - Design.alphaSliderElement.sliderWidth)) {
this._sliderElement.position.x = Design.alphaSliderElement.sliderWidth - 1;
}
this._emitAlpha();
};
AlphaSliderElement.prototype.onMove = function (event, dX, dY) {
this._sliderElement.position.x += dX;
if (this._sliderElement.position.x < 0) {
this._sliderElement.position.x = 0;
}
if (this._sliderElement.position.x >= (this.squareWidth - Design.alphaSliderElement.sliderWidth)) {
this._sliderElement.position.x = (this.squareWidth - Design.alphaSliderElement.sliderWidth) - 1;
}
this._emitAlpha();
};
Object.defineProperty(AlphaSliderElement.prototype, "loader", {
get: function () {
return this.image.loader;
},
enumerable: false,
configurable: true
});
Object.defineProperty(AlphaSliderElement.prototype, "color", {
get: function () {
return this.data.color;
},
set: function (value) {
this.data.color = value;
this.createSliderBackground(this.color);
},
enumerable: false,
configurable: true
});
Object.defineProperty(AlphaSliderElement.prototype, "colorAlpha", {
get: function () {
return this.data.colorAlpha;
},
set: function (value) {
this.data.colorAlpha = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(AlphaSliderElement.prototype, "squareWidth", {
get: function () {
return this.data.squareWidth;
},
set: function (value) {
this.data.squareWidth = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(AlphaSliderElement.prototype, "squareHeight", {
get: function () {
return this.data.squareHeight;
},
set: function (value) {
this.data.squareHeight = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(AlphaSliderElement.prototype, "moveInteraction", {
get: function () {
return this._moveInteraction;
},
set: function (value) {
this._moveInteraction = value;
},
enumerable: false,
configurable: true
});
return AlphaSliderElement;
}(BaseContainer));
export { AlphaSliderElement };
//# sourceMappingURL=AlphaSliderElement.js.map