medsurf-draw
Version:
Draw annotations on jpg/zoomify images, based on PIXI.js
185 lines • 8.76 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 ColorSliderElementModel = (function (_super) {
__extends(ColorSliderElementModel, _super);
function ColorSliderElementModel() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.squareWidth = 20;
_this.squareHeight = 20;
return _this;
}
return ColorSliderElementModel;
}(BaseContainerImageModel));
export { ColorSliderElementModel };
var ColorSliderElement = (function (_super) {
__extends(ColorSliderElement, _super);
function ColorSliderElement(model) {
var _this = _super.call(this, model) || this;
_this.zIndex = Design.colorSliderElement.zIndex;
_this.rotation = Math.PI / 2;
_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;
}
ColorSliderElement.prototype.init = function (parent) {
this.interactive = true;
this._canvas = document.createElement("canvas");
this._canvas.width = Design.colorSliderElement.qualityWidth;
this._canvas.height = Design.colorSliderElement.qualityHeight;
var ctx = this._canvas.getContext('2d');
if (!ctx) {
throw 'No canvas context created';
}
this._canvasContext = ctx;
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.colorSliderElement.sliderWidth, this.squareHeight),
options: { hasLine: false, hasFill: true, fillColor: Design.colorSliderElement.fillColor, fillAlpha: Design.colorSliderElement.fillAlpha },
lineWidth: undefined
});
this.addChild(this._sliderElement);
this.createSliderBackground();
};
ColorSliderElement.prototype.draw = function () {
this._borderElement.draw();
this._sliderElement.draw();
var hsl = MedsurfDraw.ColorElement.colorToHSL(this.color);
this._sliderElement.position.x = this.squareWidth * (hsl.h / 360);
this.pivot.set(0, this.height);
};
ColorSliderElement.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._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);
};
ColorSliderElement.prototype.createSliderBackground = function () {
this._canvasContext.clearRect(0, 0, Design.colorSliderElement.qualityWidth, Design.colorSliderElement.qualityHeight);
var grad = this._canvasContext.createLinearGradient(0, 0, Design.colorSliderElement.qualityWidth, 0);
grad.addColorStop(0, '#ff0000');
grad.addColorStop(0.17, '#ffff00');
grad.addColorStop(0.33, '#00ff00');
grad.addColorStop(0.5, '#00ffff');
grad.addColorStop(0.67, '#0000ff');
grad.addColorStop(0.83, '#ff00ff');
grad.addColorStop(1, '#ff0000');
this._canvasContext.fillStyle = grad;
this._canvasContext.fillRect(0, 0, Design.colorSliderElement.qualityWidth, Design.colorSliderElement.qualityHeight);
this._backgroundElement.texture = PIXI.Texture.from(this._canvas);
};
ColorSliderElement.prototype._emitColor = function () {
var imageData = this._canvasContext.getImageData(this._sliderElement.position.x * (Design.colorSliderElement.qualityWidth / this.squareWidth), this._sliderElement.position.y * (Design.colorSliderElement.qualityHeight / this.squareHeight), 1, 1);
this.color = ((imageData.data[0] & 0x0ff) << 16) | ((imageData.data[1] & 0x0ff) << 8) | (imageData.data[2] & 0x0ff);
this.emit("color", this.color);
};
ColorSliderElement.prototype.onStartMove = function (event) {
var globalPosition = this.getGlobalPosition();
this._sliderElement.position.x = Math.floor(event.data.global.y - globalPosition.y) / this.imageScale.x;
if (this._sliderElement.position.x < 0) {
this._sliderElement.position.x = 0;
}
if (this._sliderElement.position.x >= this.squareWidth) {
this._sliderElement.position.x = Design.colorSliderElement.sliderWidth - 1;
}
this._emitColor();
};
ColorSliderElement.prototype.onMove = function (event, dX, dY) {
var scale = this.imageScale;
this._sliderElement.position.x += dY * scale.x / this.imageScale.x;
if (this._sliderElement.position.x < 0) {
this._sliderElement.position.x = 0;
}
if (this._sliderElement.position.x >= this.squareWidth) {
this._sliderElement.position.x = this.squareWidth - 1;
}
this._emitColor();
};
Object.defineProperty(ColorSliderElement.prototype, "color", {
get: function () {
return this.data.color;
},
set: function (value) {
this.data.color = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(ColorSliderElement.prototype, "squareWidth", {
get: function () {
return this.data.squareWidth;
},
set: function (value) {
this.data.squareWidth = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(ColorSliderElement.prototype, "squareHeight", {
get: function () {
return this.data.squareHeight;
},
set: function (value) {
this.data.squareHeight = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(ColorSliderElement.prototype, "moveInteraction", {
get: function () {
return this._moveInteraction;
},
set: function (value) {
this._moveInteraction = value;
},
enumerable: false,
configurable: true
});
return ColorSliderElement;
}(BaseContainer));
export { ColorSliderElement };
//# sourceMappingURL=ColorSliderElement.js.map