medsurf-draw
Version:
Draw annotations on jpg/zoomify images, based on PIXI.js
272 lines • 12.1 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 { Image } from "./Image";
import { Design } from "../../config/design";
import { debounce } from "debounce";
var DeepZoomImage = (function (_super) {
__extends(DeepZoomImage, _super);
function DeepZoomImage(model) {
var _this = _super.call(this, model, MedsurfDraw.ImageTypes.DEEPZOOM) || this;
_this._tilesUrl = model.url;
var tileSize = _this.dimensions.tileSize || Design.image.tileSize;
_this._imageSizes = [new PIXI.Point(_this.dimensions.width, _this.dimensions.height)];
_this._gridSizes = [new PIXI.Point(_this.dimensions.width / tileSize, _this.dimensions.height / tileSize)];
var currentImageSize = new PIXI.Point(_this.dimensions.width, _this.dimensions.height);
while (currentImageSize.x > tileSize || currentImageSize.y > tileSize) {
currentImageSize.x = currentImageSize.x / 2;
currentImageSize.y = currentImageSize.y / 2;
_this._imageSizes.push(new PIXI.Point(currentImageSize.x, currentImageSize.y));
_this._gridSizes.push(new PIXI.Point(currentImageSize.x / tileSize, currentImageSize.y / tileSize));
}
_this._gridSizes.reverse();
_this._minLevel = 0;
_this._maxLevel = _this._gridSizes.length - 1;
_this._levelScaleCache = [];
for (var i = 0; i <= _this._maxLevel; i++) {
_this._levelScaleCache[i] = 1 / Math.pow(2, _this._maxLevel - i);
}
_this.moveInteraction.on("onMove", _this.onTileMove, _this);
_this.moveInteraction.on("endMove", _this.onTileMove, _this);
_this.zoomInteraction.on("onZoom", _this.onTileZoom, _this);
_this._debounceLoadVisibleTilesMethod = debounce(_this.loadVisibleTiles.bind(_this), Design.deepZoomImage.loadDebounce).bind(_this);
_this._callbackId = _this.loader.onLoad.add(_this.onLoad.bind(_this));
_this.on("added", function () {
_this.on("debounceLoadVisibleTiles", _this._debounceLoadVisibleTilesMethod);
});
_this.on("removed", function () {
_this.off("debounceLoadVisibleTiles", _this._debounceLoadVisibleTilesMethod);
});
return _this;
}
DeepZoomImage.prototype.destroy = function (options) {
if (this.moveInteraction) {
this.moveInteraction.off("onMove", this.onTileMove, this);
this.moveInteraction.off("endMove", this.onTileMove, this);
}
if (this.zoomInteraction) {
this.zoomInteraction.off("onZoom", this.onTileZoom, this);
}
this.loader.onLoad.detach(this._callbackId);
if (this._tileContainer) {
this._tileContainer.destroy(options);
}
_super.prototype.destroy.call(this, options);
};
DeepZoomImage.prototype.getCurrentLevel = function () {
var factor = this.canvas.width * this.getNavigatorScale().x;
var currentZeroRatio = this._getPixelRatio(0).x * factor;
return Math.max(Math.min(Math.abs(this._maxLevel), Math.abs(Math.floor(Math.log(currentZeroRatio / Design.deepZoomImage.minPixelRatio) / Math.log(2)))), this._minLevel || 0);
};
DeepZoomImage.prototype._getPixelRatio = function (level) {
var factor = this._levelScaleCache[level];
var imageSizeScaled = new PIXI.Point(this.dimensions.width * factor, this.dimensions.height * factor);
return new PIXI.Point(1.0 / imageSizeScaled.x, 1.0 / imageSizeScaled.y);
};
DeepZoomImage.prototype._modeRemoveInit = function () {
this._tileContainer = new MedsurfDraw.Container({ image: this });
this.addChild(this._tileContainer);
for (var level = 0; level <= Design.deepZoomImage.initialLoadingLevel; level++) {
this.loadWholeLevel(level);
}
};
DeepZoomImage.prototype.loadWholeLevel = function (level) {
var gridSize = this._gridSizes[level];
for (var x = 0; x <= Math.ceil(gridSize.x); x++) {
for (var y = 0; y <= Math.ceil(gridSize.y); y++) {
this.loadTile(level, x, y);
}
}
};
DeepZoomImage.prototype.loadVisibleTiles = function () {
var level = this.getCurrentLevel();
if (level <= Design.deepZoomImage.initialLoadingLevel) {
return;
}
var tileSize = this.dimensions && this.dimensions.tileSize ? this.dimensions.tileSize : 256;
var bounds = this.getBounds(true);
var scale = this.getNavigatorScale();
var leftX = (((bounds.x < 0) ? bounds.x / scale.x * -1 : 0) || 0);
if (leftX < 0) {
leftX = 0;
}
var topY = (((bounds.y < 0) ? bounds.y / scale.y * -1 : 0) || 0);
if (topY < 0) {
topY = 0;
}
var rightX = bounds.width / scale.x;
if ((bounds.x + bounds.width) > this.canvas.width) {
rightX = (bounds.x - this.canvas.width) * -1 / scale.x;
}
var bottomY = bounds.height / scale.y;
if ((bounds.y + bounds.height) > this.canvas.height) {
bottomY = (bounds.y - this.canvas.height) * -1 / scale.y;
}
var gridSize = this._gridSizes[level];
var gridImgWidth = gridSize.x * tileSize;
var gridImgHeight = gridSize.y * tileSize;
var minX = Math.floor(leftX / this.actualWidth * gridImgWidth / tileSize) - Design.deepZoomImage.tileMargin;
if (minX < 0) {
minX = 0;
}
var minY = Math.floor(topY / this.actualHeight * gridImgHeight / tileSize) - Design.deepZoomImage.tileMargin;
if (minY < 0) {
minY = 0;
}
var maxX = Math.ceil(rightX / this.actualWidth * gridImgWidth / tileSize) + Design.deepZoomImage.tileMargin;
if (maxX > gridSize.x) {
maxX = Math.ceil(gridSize.x);
}
var maxY = Math.ceil(bottomY / this.actualHeight * gridImgHeight / tileSize) + Design.deepZoomImage.tileMargin;
if (maxY > gridSize.y) {
maxY = Math.ceil(gridSize.y);
}
if (this.loader.loading) {
this.loader.reset();
}
this.loadFromMidToBounds(level, minX, maxX, minY, maxY);
for (var x = minX; x <= maxX; x++) {
for (var y = minY; y <= maxY; y++) {
this.loadTile(level, x, y);
}
}
this.loader.load();
this.loader.loading = false;
};
DeepZoomImage.prototype.hideTiles = function () {
var _this = this;
var level = this.getCurrentLevel();
if (level > 3) {
this._tileContainer.children
.filter(function (sprite) { return !sprite.name.startsWith(_this.id + '-' + level); })
.forEach(function (sprite) {
sprite.hideItem();
});
}
};
DeepZoomImage.prototype.loadFromMidToBounds = function (level, minX, maxX, minY, maxY) {
var midX = (maxX + minX) / 2;
var xDecimal = midX % 1 !== 0;
var lowMidX = Math.floor(midX);
var highMidX = Math.ceil(midX);
var midY = (maxY + minY) / 2;
var yDecimal = midY % 1 !== 0;
var lowMidY = Math.floor(midY);
var highMidY = Math.ceil(midY);
for (var x = 0; x + highMidX <= maxX; x++) {
for (var y = 0; y + highMidY <= maxY; y++) {
this.loadTile(level, highMidX + x, highMidY + y);
if (xDecimal) {
this.loadTile(level, lowMidX - x, highMidY + y);
if (yDecimal) {
this.loadTile(level, lowMidY - x, lowMidY - y);
}
}
if (yDecimal) {
this.loadTile(level, highMidX + x, lowMidY - y);
}
}
}
};
DeepZoomImage.prototype.loadTile = function (level, x, y) {
if (!this.loader.resources[this.id + '-' + level + '-' + x + '-' + y]) {
var url = this.getTileUrl(level, x, y);
this.loader.add(this.id + '-' + level + '-' + x + '-' + y, url, { crossOrigin: true });
}
else {
this.drawTile(this.loader.resources[this.id + '-' + level + '-' + x + '-' + y]);
}
};
DeepZoomImage.prototype.drawTile = function (resource) {
if (!resource.isComplete || !resource.texture) {
return;
}
var name = /^[0-9]+-([0-9]+)-([0-9]+)-([0-9]+)/.exec(resource.name);
if (!name) {
return;
}
var level = parseInt(name[1]);
var x = parseInt(name[2]);
var y = parseInt(name[3]);
var tileSize = this.dimensions && this.dimensions.tileSize ? this.dimensions.tileSize : 256;
var gridSize = this._gridSizes[level];
var tile = this._tileContainer.getChildByName(name[0]);
if (!tile) {
var sprite = new MedsurfDraw.Sprite({
texture: resource.texture
});
sprite.zIndex = 13 + level;
sprite.name = name[0];
var width = this.dimensions.width / gridSize.x;
var height = this.dimensions.height / gridSize.y;
sprite.width = sprite.texture.width / tileSize * width;
sprite.height = sprite.texture.height / tileSize * height;
sprite.position.x = x * width;
sprite.position.y = y * height;
this._tileContainer.addChild(sprite);
}
else {
tile.showItem();
}
this.sortChildren();
this.emit("debounceDraw");
};
DeepZoomImage.prototype.getTileUrl = function (level, x, y) {
var tileSize = this.dimensions && this.dimensions.tileSize ? this.dimensions.tileSize : 256;
var result = Math.floor(this.calculateAbsoluteTileNumber(level, x, y) / tileSize);
return this._tilesUrl + 'TileGroup' + result + '/' + level + '-' + x + '-' + y + '.jpg';
};
DeepZoomImage.prototype.calculateAbsoluteTileNumber = function (level, x, y) {
var num = 0;
var size;
for (var z = 0; z < level; z++) {
size = this._gridSizes[z];
num += Math.ceil(size.x) * Math.ceil(size.y);
}
size = this._gridSizes[level];
num += Math.ceil(size.x) * y + x;
return num;
};
DeepZoomImage.prototype.onLoad = function (loader, resource) {
if (resource.name.startsWith(this.id + '-')) {
this.drawTile(resource);
}
};
DeepZoomImage.prototype.onTileMove = function () {
this.emit("debounceLoadVisibleTiles");
};
DeepZoomImage.prototype.onTileZoom = function () {
this.emit("debounceLoadVisibleTiles");
};
Object.defineProperty(DeepZoomImage.prototype, "minZoomFactor", {
get: function () {
return this.data.minZoomFactor || Design.deepZoomImage.minZoomFactor;
},
enumerable: false,
configurable: true
});
Object.defineProperty(DeepZoomImage.prototype, "maxZoomFactor", {
get: function () {
return this.data.maxZoomFactor || Design.deepZoomImage.maxZoomFactor;
},
enumerable: false,
configurable: true
});
return DeepZoomImage;
}(Image));
export { DeepZoomImage };
//# sourceMappingURL=DeepZoomImage.js.map