medsurf-draw
Version:
Draw annotations on jpg/zoomify images, based on PIXI.js
301 lines • 14.5 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 NumberSliderElementModel = (function (_super) {
__extends(NumberSliderElementModel, _super);
function NumberSliderElementModel() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.squareWidth = 20;
_this.squareHeight = 20;
_this.gab = 1;
return _this;
}
return NumberSliderElementModel;
}(BaseContainerImageModel));
export { NumberSliderElementModel };
var NumberSliderElement = (function (_super) {
__extends(NumberSliderElement, _super);
function NumberSliderElement(model) {
var _this = _super.call(this, model) || this;
_this._valueRange = _this.maxValue - _this.minValue;
_this._minDisplayValue = (_this.value || _this.minValue) - Design.numberSliderElement.maxVisibleSnapPoints / 2;
if (_this._minDisplayValue < _this.minValue) {
_this._minDisplayValue = _this.minValue;
}
_this._maxDisplayValue = (_this.value || _this.minValue) + Design.numberSliderElement.maxVisibleSnapPoints / 2;
if (_this._maxDisplayValue > _this.maxValue) {
_this._maxDisplayValue = _this.maxValue;
}
_this._gabWidth = _this._valueRange < Design.numberSliderElement.maxVisibleSnapPoints ? _this.squareWidth / _this._valueRange / _this.gab : _this.squareWidth / Design.numberSliderElement.maxVisibleSnapPoints / _this.gab;
_this.zIndex = Design.numberSliderElement.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;
}
NumberSliderElement.prototype.init = function (parent) {
this.interactive = true;
this._backgroundElement = new PIXI.Graphics();
this.addChild(this._backgroundElement);
this._sliderElement = new MedsurfDraw.Rectangle({
rectangle: new PIXI.Rectangle(0, 0, Design.numberSliderElement.sliderWidth, this.squareHeight),
options: { hasLine: false, hasFill: true, fillColor: Design.numberSliderElement.fillColor, fillAlpha: Design.numberSliderElement.fillAlpha },
lineWidth: undefined
});
this.addChild(this._sliderElement);
this.createSliderBackground();
};
NumberSliderElement.prototype.draw = function () {
this._sliderElement.rectangle = new PIXI.Rectangle(0, 0, Design.numberSliderElement.sliderWidth, this.squareHeight);
this._sliderElement.draw();
this._sliderElement.position.x = ((this.value || this.minValue) - this._minDisplayValue) * this._gabWidth;
};
NumberSliderElement.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._sliderElement) {
this._sliderElement.destroy(options);
}
_super.prototype.destroy.call(this, options);
};
NumberSliderElement.prototype.createSliderBackground = function () {
this._backgroundElement.clear();
this._backgroundElement.lineStyle(Design.numberSliderElement.borderLineWidth, Design.numberSliderElement.borderLineColor, Design.numberSliderElement.borderLineAlpha);
this._backgroundElement.beginFill(Design.numberSliderElement.borderLineColor, 0.5);
this._backgroundElement.drawRect(0, 0, this.squareWidth, this.squareHeight);
this._backgroundElement.endFill();
for (var i = 1; i === i; i) {
this._backgroundElement.lineStyle(Design.numberSliderElement.borderLineWidth, Design.numberSliderElement.borderLineColor, Design.numberSliderElement.borderLineAlpha);
this._backgroundElement.moveTo(this._gabWidth * i, 0);
this._backgroundElement.lineTo(this._gabWidth * i, 4);
this._backgroundElement.endFill();
if (this._gabWidth * ++i > this.squareWidth) {
break;
}
}
};
NumberSliderElement.prototype.onStartMove = function (event) {
var globalPosition = this.getGlobalPosition();
this._x = Math.round(event.data.global.x - globalPosition.x) / this.imageScale.x;
var modX = this._x % this._gabWidth;
var posX = 0;
if (modX < this._gabWidth / 2) {
posX = this._x - modX;
}
else {
posX = this._x + (this._gabWidth - modX);
}
if (posX < 0) {
posX = 0;
}
if (posX >= this.squareWidth) {
posX = this.squareWidth - 1;
}
var pos = Math.round(posX / this._gabWidth);
var diffX = (this._minDisplayValue + pos) - (this.value || this.minValue);
if (!this.data.value) {
this.data.value = this.data.minValue;
}
this.data.value += diffX;
if ((this.value || this.minValue) < this.minValue) {
this.data.value = this.minValue;
}
if ((this.value || this.minValue) > this.maxValue) {
this.data.value = this.maxValue;
}
this._minDisplayValue = (this.value || this.minValue) - Design.numberSliderElement.maxVisibleSnapPoints / 2;
this._maxDisplayValue = (this.value || this.minValue) + Design.numberSliderElement.maxVisibleSnapPoints / 2;
if (this._minDisplayValue <= this.minValue) {
this._minDisplayValue = this.minValue;
this._maxDisplayValue = this.minValue + (Design.numberSliderElement.maxVisibleSnapPoints + 1);
}
if (this._maxDisplayValue >= this.maxValue) {
this._minDisplayValue = this.maxValue - (Design.numberSliderElement.maxVisibleSnapPoints + 1);
this._maxDisplayValue = this.maxValue;
}
if (this._minDisplayValue < this.minValue) {
this._minDisplayValue = this.minValue;
}
if (this._maxDisplayValue > this.maxValue) {
this._maxDisplayValue = this.maxValue;
}
this._sliderElement.position.x = ((this.value || this.minValue) - this._minDisplayValue) * this._gabWidth;
this.emit("number", this.value);
};
NumberSliderElement.prototype.onMove = function (event, dX, dY) {
this._x += dX;
var modX = this._x % this._gabWidth;
var posX = 0;
if (modX < this._gabWidth / 2) {
posX = this._x - modX;
}
else {
posX = this._x + (this._gabWidth - modX);
}
if (posX < 0) {
posX = 0;
}
if (posX >= this.squareWidth) {
posX = this.squareWidth - 1;
}
var pos = Math.round(posX / this._gabWidth);
var diffX = (this._minDisplayValue + pos) - (this.value || this.minValue);
if (!this.data.value) {
this.data.value = this.minValue;
}
this.data.value += diffX;
if ((this.value || this.minValue) < this.minValue) {
this.data.value = this.minValue;
}
if ((this.value || this.minValue) > this.maxValue) {
this.data.value = this.maxValue;
}
this._minDisplayValue = (this.value || this.minValue) - Design.numberSliderElement.maxVisibleSnapPoints / 2;
this._maxDisplayValue = (this.value || this.minValue) + Design.numberSliderElement.maxVisibleSnapPoints / 2;
if (this._minDisplayValue <= this.minValue) {
this._minDisplayValue = this.minValue;
this._maxDisplayValue = this.minValue + (Design.numberSliderElement.maxVisibleSnapPoints + 1);
}
if (this._maxDisplayValue >= this.maxValue) {
this._minDisplayValue = this.maxValue - (Design.numberSliderElement.maxVisibleSnapPoints + 1);
this._maxDisplayValue = this.maxValue;
}
if (this._minDisplayValue < this.minValue) {
this._minDisplayValue = this.minValue;
}
if (this._maxDisplayValue > this.maxValue) {
this._maxDisplayValue = this.maxValue;
}
this._sliderElement.position.x = ((this.value || this.minValue) - this._minDisplayValue) * this._gabWidth;
this.emit("number", this.value);
};
Object.defineProperty(NumberSliderElement.prototype, "value", {
get: function () {
return this.data.value;
},
set: function (value) {
this.data.value = value;
this._minDisplayValue = (this.value || this.minValue) - Design.numberSliderElement.maxVisibleSnapPoints / 2;
if (this._minDisplayValue < this.minValue) {
this._minDisplayValue = this.minValue;
}
this._maxDisplayValue = (this.value || this.minValue) + Design.numberSliderElement.maxVisibleSnapPoints / 2;
if (this._maxDisplayValue > this.maxValue) {
this._maxDisplayValue = this.maxValue;
}
this.createSliderBackground();
},
enumerable: false,
configurable: true
});
Object.defineProperty(NumberSliderElement.prototype, "minValue", {
get: function () {
return this.data.minValue;
},
set: function (value) {
this.data.minValue = value;
this._valueRange = this.maxValue - this.minValue;
this._minDisplayValue = (this.value || this.minValue) - Design.numberSliderElement.maxVisibleSnapPoints / 2;
if (this._minDisplayValue < this.minValue) {
this._minDisplayValue = this.minValue;
}
this._gabWidth = this._valueRange < Design.numberSliderElement.maxVisibleSnapPoints ? this.squareWidth / this._valueRange / this.gab : this.squareWidth / Design.numberSliderElement.maxVisibleSnapPoints / this.gab;
this.createSliderBackground();
},
enumerable: false,
configurable: true
});
Object.defineProperty(NumberSliderElement.prototype, "maxValue", {
get: function () {
return this.data.maxValue;
},
set: function (value) {
this.data.maxValue = value;
this._valueRange = this.maxValue - this.minValue;
this._maxDisplayValue = (this.value || this.minValue) + Design.numberSliderElement.maxVisibleSnapPoints / 2;
if (this._maxDisplayValue > this.maxValue) {
this._maxDisplayValue = this.maxValue;
}
this._gabWidth = this._valueRange < Design.numberSliderElement.maxVisibleSnapPoints ? this.squareWidth / this._valueRange / this.gab : this.squareWidth / Design.numberSliderElement.maxVisibleSnapPoints / this.gab;
this.createSliderBackground();
},
enumerable: false,
configurable: true
});
Object.defineProperty(NumberSliderElement.prototype, "squareWidth", {
get: function () {
return this.data.squareWidth;
},
set: function (value) {
this.data.squareWidth = value;
this._gabWidth = this._valueRange < Design.numberSliderElement.maxVisibleSnapPoints ? this.squareWidth / this._valueRange / this.gab : this.squareWidth / Design.numberSliderElement.maxVisibleSnapPoints / this.gab;
this.createSliderBackground();
},
enumerable: false,
configurable: true
});
Object.defineProperty(NumberSliderElement.prototype, "squareHeight", {
get: function () {
return this.data.squareHeight;
},
set: function (value) {
this.data.squareHeight = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(NumberSliderElement.prototype, "gab", {
get: function () {
return this.data.gab;
},
set: function (value) {
this.data.gab = value;
this._gabWidth = this._valueRange < Design.numberSliderElement.maxVisibleSnapPoints ? this.squareWidth / this._valueRange / this.gab : this.squareWidth / Design.numberSliderElement.maxVisibleSnapPoints / this.gab;
this.createSliderBackground();
},
enumerable: false,
configurable: true
});
Object.defineProperty(NumberSliderElement.prototype, "moveInteraction", {
get: function () {
return this._moveInteraction;
},
set: function (value) {
this._moveInteraction = value;
},
enumerable: false,
configurable: true
});
return NumberSliderElement;
}(BaseContainer));
export { NumberSliderElement };
//# sourceMappingURL=NumberSliderElement.js.map