medsurf-draw
Version:
Draw annotations on jpg/zoomify images, based on PIXI.js
365 lines • 18.3 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 { BaseContainer, BaseContainerImageModel } from "../../bases/elements/BaseContainer";
import { BaseSprite } from "../../bases/elements/BaseSprite";
import { Design } from "../../config/design";
var NavigatorElementModel = (function (_super) {
__extends(NavigatorElementModel, _super);
function NavigatorElementModel() {
return _super !== null && _super.apply(this, arguments) || this;
}
return NavigatorElementModel;
}(BaseContainerImageModel));
export { NavigatorElementModel };
var NavigatorElement = (function (_super) {
__extends(NavigatorElement, _super);
function NavigatorElement(model) {
var _this = _super.call(this, model) || this;
_this.navigationHeight = Math.round(_this.canvas.height / 6);
_this.zIndex = Design.imageNavigator.zIndex;
_this.modeInteraction.on("default", _this._modeDefault, _this);
_this.modeInteraction.on("remove-default", _this._removeModeDefault, _this);
_this.modeInteraction.on("hidden", _this._modeHidden, _this);
_this.modeInteraction.on("remove-hidden", _this._removeModeHidden, _this);
_this.modeInteraction.on("delete", _this._modeDelete, _this);
_this.moveInteraction = new MedsurfDraw.MoveInteraction(_this, true);
_this.moveInteraction.on("onMove", _this._onMove, _this);
_this.zoomInteraction = new MedsurfDraw.ZoomInteraction(_this, false);
_this.zoomInteraction.on("onZoom", _this._onZoom, _this);
_this.on("added", function () {
_this.image.on("onResize", _this._onResize, _this);
_this._wheelMethod = _this.zoomInteraction.onZoom.bind(_this.zoomInteraction);
_this.canvas.addEventListener("wheel", _this._wheelMethod);
});
_this.on("removed", function () {
_this.image.off("onResize", _this._onResize, _this);
_this.canvas.removeEventListener("wheel", _this._wheelMethod);
});
return _this;
}
NavigatorElement.prototype.init = function () {
this._baseTexture = new PIXI.BaseRenderTexture({ width: this.canvas.width, height: this.canvas.height });
this._texture = new PIXI.RenderTexture(this._baseTexture);
var buttonSize = this.navigationHeight / Design.imageNavigator.buttonSizeAspect;
var buttonFontSize = Math.round(buttonSize / Design.imageNavigator.buttonTextAspect);
this._backgroundElement = new MedsurfDraw.Rectangle({
rectangle: new PIXI.Rectangle(0, 0, this.canvas.width / this.canvas.height * this.navigationHeight, this.navigationHeight),
options: { hasLine: false, hasFill: true, fillColor: this.renderer.backgroundColor, fillAlpha: 1 },
lineWidth: undefined
});
this._backgroundElement.zIndex = 10;
this.addChild(this._backgroundElement);
this._spriteElement = new BaseSprite({
image: this.image,
texture: this._texture
});
this._spriteElement.interactive = true;
this._spriteElement.zIndex = 20;
this.addChild(this._spriteElement);
this._visibleAreaElement = new MedsurfDraw.Rectangle({
rectangle: new PIXI.Rectangle(),
options: { hasLine: true, lineColor: Design.imageNavigator.lineColor, lineAlpha: Design.imageNavigator.lineAlpha, hasFill: true, fillColor: Design.imageNavigator.fillColor, fillAlpha: Design.imageNavigator.fillAlpha },
lineWidth: Design.imageNavigator.lineWidth
});
this._visibleAreaElement.zIndex = 30;
this.addChild(this._visibleAreaElement);
this._zoomInButtonElement = new MedsurfDraw.ButtonElement({
image: this.image,
text: "\uf00e",
description: "Hineinzoomen",
descriptionFontSize: 6,
rectangle: new PIXI.Rectangle(0, 0, buttonSize, buttonSize),
fontSize: buttonFontSize
});
this._zoomInButtonElement.on("button", this._onZoomIn, this);
this.addChild(this._zoomInButtonElement);
this._toggleButtonElement = new MedsurfDraw.ButtonElement({
image: this.image,
text: this._spriteElement.visible ? "\uf070" : "\uf06e",
description: "Sichtbar",
descriptionFontSize: 6,
rectangle: new PIXI.Rectangle(0, 0, buttonSize, buttonSize),
fontSize: buttonFontSize
});
this._toggleButtonElement.on("button", this._onToggle, this);
this.addChild(this._toggleButtonElement);
this._zoomOutButtonElement = new MedsurfDraw.ButtonElement({
image: this.image,
text: "\uf010",
description: "Herrauszoomen",
descriptionFontSize: 6,
rectangle: new PIXI.Rectangle(0, 0, buttonSize, buttonSize),
fontSize: buttonFontSize
});
this._zoomOutButtonElement.on("button", this._onZoomOut, this);
this.addChild(this._zoomOutButtonElement);
this.sortChildren();
this.draw();
};
NavigatorElement.prototype.draw = function () {
this._backgroundElement.draw();
this._visibleAreaElement.draw();
this._zoomInButtonElement.draw();
this._toggleButtonElement.draw();
this._zoomOutButtonElement.draw();
var bounds = this.getLocalBounds();
this.position.set(this.canvas.width - bounds.width, 0);
};
NavigatorElement.prototype.destroy = function (options) {
if (this.moveInteraction) {
this.moveInteraction.removeAllListeners();
}
if (this.zoomInteraction) {
this.zoomInteraction.removeAllListeners();
}
if (this._backgroundElement) {
this._backgroundElement.destroy(options);
}
if (this._spriteElement) {
this._spriteElement.destroy(options);
}
if (this._visibleAreaElement) {
this._visibleAreaElement.destroy(options);
}
if (this._zoomInButtonElement) {
this._zoomInButtonElement.off("button", this._onZoomIn, this);
this._zoomInButtonElement.destroy(options);
}
if (this._toggleButtonElement) {
this._toggleButtonElement.off("button", this._onToggle, this);
this._toggleButtonElement.destroy(options);
}
if (this._zoomOutButtonElement) {
this._zoomOutButtonElement.off("button", this._onZoomOut, this);
this._zoomOutButtonElement.destroy(options);
}
_super.prototype.destroy.call(this, options);
};
NavigatorElement.prototype.updateTexture = function () {
this.renderer.render(this.image, this._texture);
};
NavigatorElement.prototype._onResize = function () {
this._scale = this.image.scale;
this.navigationHeight = Math.round(this.canvas.height / 6);
var buttonSize = this.navigationHeight / Design.imageNavigator.buttonSizeAspect;
var buttonFontSize = Math.round(buttonSize / Design.imageNavigator.buttonTextAspect);
this._baseTexture = new PIXI.BaseRenderTexture({ width: this.canvas.width, height: this.canvas.height });
this.updateTexture();
this._backgroundElement.rectangle = new PIXI.Rectangle(0, 0, this.canvas.width / this.canvas.height * this.navigationHeight, this.navigationHeight);
this._spriteElement.width = this.canvas.width / this.canvas.height * this.navigationHeight;
this._spriteElement.height = this.navigationHeight;
this._visibleAreaElement.rectangle = new PIXI.Rectangle(0, 0, this.canvas.width / this.canvas.height * this.navigationHeight, this.navigationHeight);
this._zoomInButtonElement.rectangle = new PIXI.Rectangle(0, 0, buttonSize, buttonSize);
this._zoomInButtonElement.fontSize = buttonFontSize;
this._zoomInButtonElement.position.set(this._spriteElement.width, 0);
this._toggleButtonElement.rectangle = new PIXI.Rectangle(0, 0, buttonSize, buttonSize);
this._toggleButtonElement.fontSize = buttonFontSize;
this._toggleButtonElement.position.set(this._spriteElement.width, buttonSize);
this._zoomOutButtonElement.rectangle = new PIXI.Rectangle(0, 0, buttonSize, buttonSize);
this._zoomOutButtonElement.fontSize = buttonFontSize;
this._zoomOutButtonElement.position.set(this._spriteElement.width, 2 * buttonSize);
this.draw();
this._onImage();
};
NavigatorElement.prototype._modeDefault = function () {
this.interactive = true;
if (this._spriteElement) {
this._spriteElement.on("pointerover", this._onHover, this);
this._spriteElement.on("pointerout", this._onRelease, 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("pointerupoutside", this._moveInteraction.endMove, this._moveInteraction);
if (this.image) {
this.image.moveInteraction.on("onMove", this._onImage, this);
this.image.zoomInteraction.on("onZoom", this._onImage, this);
this.image.on("onSetPosition", this._onImage, this);
this.image.on("onSetZoom", this._onImage, this);
}
};
NavigatorElement.prototype._removeModeDefault = function () {
this.interactive = false;
if (this._spriteElement) {
this._spriteElement.off("pointerover", this._onHover, this);
this._spriteElement.off("pointerout", this._onRelease, this);
}
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("pointerupoutside", this._moveInteraction.endMove, this._moveInteraction);
if (this.image) {
this.image.moveInteraction.off("onMove", this._onImage, this);
this.image.zoomInteraction.off("onZoom", this._onImage, this);
this.image.off("onSetPosition", this._onImage, this);
this.image.off("onSetZoom", this._onImage, this);
}
};
NavigatorElement.prototype._modeHidden = function () {
this._backgroundElement.hideItem();
this._spriteElement.hideItem();
this._visibleAreaElement.hideItem();
this._toggleButtonElement.text = "\uf06e";
};
NavigatorElement.prototype._removeModeHidden = function () {
this._backgroundElement.showItem();
this._spriteElement.showItem();
this._visibleAreaElement.showItem();
this._toggleButtonElement.text = "\uf070";
this._onImage();
};
NavigatorElement.prototype._modeDelete = function () {
this.destroy();
};
NavigatorElement.prototype._onMove = function (event, dX, dY) {
event.stopPropagation();
var scale = this.imageScale;
var scaledX = -1 * dX / this._spriteElement.width * this.canvas.width * scale.x;
var scaledY = -1 * dY / this._spriteElement.height * this.canvas.height * scale.y;
this.image.moveInteraction.emit("onMove", event, scaledX, scaledY);
};
NavigatorElement.prototype._onZoom = function (event, x, y, factor) {
event.stopPropagation();
var scale = this.imageScale;
var scaledX = (x - this.position.x) / this._spriteElement.width * this.canvas.width / scale.x;
var scaledY = y / this._spriteElement.height * this.canvas.height / scale.y;
this.image.zoomInteraction.emit("onZoom", event, scaledX, scaledY, factor);
};
NavigatorElement.prototype._onToggle = function (event) {
event.stopPropagation();
this.modeInteraction.setMode(this._spriteElement.visible ? "hidden" : "default");
};
NavigatorElement.prototype._onZoomIn = function (event) {
var factor = (1 + Design.imageNavigator.zoomStep);
var scaledX = (this._visibleAreaElement.rectangle.x + this._visibleAreaElement.rectangle.width / 2) / this._spriteElement.width * this.canvas.width;
var scaledY = (this._visibleAreaElement.rectangle.y + this._visibleAreaElement.rectangle.height / 2) / this._spriteElement.height * this.canvas.height;
this.image.zoomInteraction.emit("onZoom", event, scaledX, scaledY, factor);
};
NavigatorElement.prototype._onZoomOut = function (event) {
var factor = (1 + -1 * Design.imageNavigator.zoomStep);
var scaledX = (this._visibleAreaElement.rectangle.x + this._visibleAreaElement.rectangle.width / 2) / this._spriteElement.width * this.canvas.width;
var scaledY = (this._visibleAreaElement.rectangle.y + this._visibleAreaElement.rectangle.height / 2) / this._spriteElement.height * this.canvas.height;
this.image.zoomInteraction.emit("onZoom", event, scaledX, scaledY, factor);
};
NavigatorElement.prototype._onHover = function (event) {
this.image.zoomInteraction.active = false;
this.zoomInteraction.active = true;
};
NavigatorElement.prototype._onRelease = function (event) {
this.image.zoomInteraction.active = true;
this.zoomInteraction.active = false;
};
NavigatorElement.prototype._onImage = function () {
if (!this._visibleAreaElement.rectangle) {
return;
}
if (this.image.imageType === MedsurfDraw.ImageTypes.DEEPZOOM) {
}
else {
var scaleX = 1 + this._scale.x - this.imageScale.x;
var scaleY = 1 + this._scale.y - this.imageScale.y;
var widthAspect = this._backgroundElement.width / this.canvas.width;
var heightAspect = this._backgroundElement.height / this.canvas.height;
this._visibleAreaElement.rectangle = new PIXI.Rectangle((this.canvas.width / 2 - this.image.width / 2 - this.image.position.x) * scaleX * widthAspect, (this.canvas.height / 2 - this.image.height / 2 - this.image.position.y) * scaleY * heightAspect, this._backgroundElement.width, this._backgroundElement.height);
}
if (this._visibleAreaElement.rectangle.x < 0) {
this._visibleAreaElement.rectangle.width += this._visibleAreaElement.rectangle.x;
this._visibleAreaElement.rectangle.x = 0;
}
else if (this._visibleAreaElement.rectangle.x + this._visibleAreaElement.rectangle.width > this._spriteElement.width) {
this._visibleAreaElement.rectangle.width = this._spriteElement.width - this._visibleAreaElement.rectangle.x;
}
if (this._visibleAreaElement.rectangle.y < 0) {
this._visibleAreaElement.rectangle.height += this._visibleAreaElement.rectangle.y;
this._visibleAreaElement.rectangle.y = 0;
}
else if (this._visibleAreaElement.rectangle.y + this._visibleAreaElement.rectangle.height > this._spriteElement.height) {
this._visibleAreaElement.rectangle.height = this._spriteElement.height - this._visibleAreaElement.rectangle.y;
}
if (this._visibleAreaElement.rectangle.width > this._backgroundElement.width) {
this._visibleAreaElement.rectangle.width = this._backgroundElement.width;
}
if (this._visibleAreaElement.rectangle.height > this._backgroundElement.height) {
this._visibleAreaElement.rectangle.height = this._backgroundElement.height;
}
this.draw();
};
Object.defineProperty(NavigatorElement.prototype, "moveInteraction", {
get: function () {
return this._moveInteraction;
},
set: function (value) {
this._moveInteraction = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(NavigatorElement.prototype, "zoomInteraction", {
get: function () {
return this._zoomInteraction;
},
set: function (value) {
this._zoomInteraction = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(NavigatorElement.prototype, "renderer", {
get: function () {
return this.data.renderer;
},
set: function (value) {
this.data.renderer = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(NavigatorElement.prototype, "canvas", {
get: function () {
return this.data.canvas;
},
set: function (value) {
this.data.canvas = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(NavigatorElement.prototype, "image", {
get: function () {
return this.data.image;
},
set: function (value) {
this.data.image = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(NavigatorElement.prototype, "navigationHeight", {
get: function () {
return this._navigationHeight;
},
set: function (value) {
this._navigationHeight = value;
},
enumerable: false,
configurable: true
});
return NavigatorElement;
}(BaseContainer));
export { NavigatorElement };
//# sourceMappingURL=NavigatorElement.js.map