1056 lines
35 KiB
JavaScript
Executable File
1056 lines
35 KiB
JavaScript
Executable File
import { Capabilities } from '../../capabilities.js'
|
|
import { Points } from '../../utils.js'
|
|
import Tile from './tile.js'
|
|
import { Tiles } from './tiles.js'
|
|
|
|
function isEven(n) {
|
|
return n % 2 == 0
|
|
}
|
|
|
|
/**
|
|
* A utility class that holds information typically provided by DZI files, i.e.
|
|
* height and width of the overall image, overlap, and image type.
|
|
*
|
|
* @constructor
|
|
* @param {obj} attrs - A JSON-Object holding the listed keys and values
|
|
* @example
|
|
* {
|
|
* "tileSize": 1024,
|
|
* "format": "jpeg",
|
|
* "overlap": 1,
|
|
* "height": 4794,
|
|
* "width": 4095,
|
|
* "clip": { "minLevel": 12, "maxLevel": 20, "startCol": 301436, "startRow": 354060 },
|
|
* // optional: minLevel and maxLevel define the level bounds
|
|
* // startCol: first col at maxLevel
|
|
* // startRow: first row at maxLevel
|
|
* "path": "var/Vermeer/Vermeer_files",
|
|
* "type": "dzi", // optional: dzi (default) or map
|
|
* "urlTileTemplate": "{path}/{level}/{column}/{row}.{format}"
|
|
* // optional: {path}/{level}/{column}_{row}.{format} (default) or
|
|
* // a template String with the format of the URL
|
|
* }
|
|
*/
|
|
export class DeepZoomInfo {
|
|
constructor(attrs) {
|
|
for (let key in attrs) {
|
|
this[key] = attrs[key]
|
|
}
|
|
this.maxLevel = 0 // The highest level number, typically corresponds to the
|
|
// number in the file system for the folder with tiles
|
|
this.clip = this.clip || null // e.g. { level: 12, col: 301436, row: 354060 }
|
|
this.type = this.type || 'dzi'
|
|
this.urlTileTemplate = this.urlTileTemplate || '{path}/{level}/{column}_{row}.{format}'
|
|
this.setupDimensions()
|
|
}
|
|
|
|
/* Computes the needed number of layers from the width and height
|
|
* of the image. Note that this includes the level 0, i.e. 0 ... 4
|
|
* means that 5 levels exist.
|
|
**/
|
|
numLevels() {
|
|
let maxDimension = Math.max(this.width, this.height)
|
|
let boundary = this.type === 'dzi' ? 1 : this.tileSize
|
|
let numLevels = 0
|
|
while (maxDimension >= boundary) {
|
|
maxDimension /= 2
|
|
numLevels++
|
|
}
|
|
return numLevels
|
|
}
|
|
|
|
/** Computes the scale at the given level.
|
|
* @param {number} level - The level of the wanted layer
|
|
* @returns {number} scale
|
|
**/
|
|
getScale(level) {
|
|
let scale = 1
|
|
if (this.type === 'dzi') {
|
|
scale = Math.pow(0.5, this.maxLevel - level + 1)
|
|
} else {
|
|
scale = Math.pow(0.5, this.maxLevel - level)
|
|
}
|
|
return scale
|
|
}
|
|
|
|
/** Computes the scaled width and height of the given level.
|
|
* @param {number} level - The level of the wanted layer
|
|
* @returns {array} size - The width and height
|
|
**/
|
|
getDimensions(level) {
|
|
let scale = this.getScale(level)
|
|
let w = Math.ceil(this.width * scale)
|
|
let h = Math.ceil(this.height * scale)
|
|
return [w, h]
|
|
}
|
|
|
|
/** Computes the number of cols and rows of tiles.
|
|
* @param {number} level - The level of the wanted layer
|
|
* @returns {array} size - The cols and rows
|
|
**/
|
|
getNumTiles(level) {
|
|
let dim = this.getDimensions(level)
|
|
let cols = Math.ceil(dim[0] / this.tileSize)
|
|
let rows = Math.ceil(dim[1] / this.tileSize)
|
|
if (this.clip) {
|
|
let rest = this.rests[level]
|
|
if (rest) {
|
|
if (rest.restCol) {
|
|
cols += 1
|
|
}
|
|
if (rest.restRows) {
|
|
rows += 1
|
|
}
|
|
}
|
|
}
|
|
return [cols, rows]
|
|
}
|
|
|
|
setupDimensions(loadBaseImage = false) {
|
|
/** Setup instance variables and load the base image, i.e. the largest
|
|
image that can be represented as a single tile.
|
|
@private
|
|
**/
|
|
let ww = this.width
|
|
let hh = this.height
|
|
let scale = 1.0
|
|
let level = 0
|
|
let single = 0
|
|
const tsize = this.tileSize
|
|
|
|
if (this.clip) {
|
|
this.baseLevel = this.clip.minLevel
|
|
this.maxLevel = this.clip.maxLevel
|
|
this.baseImage = null
|
|
this.size = this.getDimensions(this.baseLevel)
|
|
this.offsets = {}
|
|
this.rests = {}
|
|
let startCol = this.clip.startCol
|
|
let startRow = this.clip.startRow
|
|
let floatStartCol = startCol
|
|
let floatStartRow = startRow
|
|
for (let i = this.maxLevel; i >= this.baseLevel; i--) {
|
|
this.offsets[i] = { startCol, startRow }
|
|
let restCol = floatStartCol % 1
|
|
let restRow = floatStartRow % 1
|
|
this.rests[i] = { restCol, restRow }
|
|
startCol = Math.floor(startCol / 2)
|
|
startRow = Math.floor(startRow / 2)
|
|
floatStartCol /= 2
|
|
floatStartRow /= 2
|
|
}
|
|
} else {
|
|
const boundary = this.type === 'dzi' ? 1.0 : tsize
|
|
while (ww > boundary && hh > boundary) {
|
|
if (ww >= tsize && hh >= tsize) {
|
|
single += 1
|
|
}
|
|
scale = scale / 2.0
|
|
ww = Math.ceil(this.width * scale)
|
|
hh = Math.ceil(this.height * scale)
|
|
level += 1
|
|
}
|
|
this.baseLevel = level - single
|
|
this.maxLevel = this.numLevels() - 1
|
|
this.baseURL = this.urlForTile(this.baseLevel, 0, 0, false)
|
|
|
|
if (loadBaseImage) {
|
|
this.imageForURL(this.baseURL, e => {
|
|
this.size = [e.target.naturalWidth, e.target.naturalHeight]
|
|
this.baseImage = e.target
|
|
})
|
|
} else {
|
|
this.baseImage = null
|
|
this.size = this.getDimensions(this.baseLevel)
|
|
}
|
|
}
|
|
}
|
|
|
|
get maxLoadableLevel() {
|
|
if (this.clip) {
|
|
return this.maxLevel
|
|
}
|
|
return this.type === 'dzi' ? this.maxLevel : this.maxLevel
|
|
}
|
|
|
|
/** Computes the url for the given level, column and and row.
|
|
* @param {number} level - The level of the wanted layer
|
|
* @param {number} column - The column of the tile
|
|
* @param {number} row - The row of the tile
|
|
* @returns {string} url
|
|
**/
|
|
urlForTile(level, column, row, compressed = true) {
|
|
let format = this.format
|
|
if (compressed && this.compression) {
|
|
let supported = Capabilities.isIOS ? 'pvr' : 'dds'
|
|
if (this.compression.indexOf(supported) >= 0) {
|
|
format = supported
|
|
}
|
|
}
|
|
if (this.clip) {
|
|
let offset = this.offsets[level]
|
|
if (offset) {
|
|
let { startCol, startRow } = offset
|
|
column += startCol
|
|
row += startRow
|
|
}
|
|
}
|
|
let url = this.urlTileTemplate
|
|
.replace(/\{path\}/g, this.path)
|
|
.replace(/\{level\}/g, level)
|
|
.replace(/\{row\}/g, row)
|
|
.replace(/\{column\}/g, column)
|
|
.replace(/\{format\}/g, format)
|
|
return url
|
|
}
|
|
|
|
/** Loads the image for the given url and executes a callback function
|
|
on completion.
|
|
* @param {string} url - The url of the tile
|
|
* @param {function} complete - The callback function
|
|
* @returns {Image} obj
|
|
**/
|
|
imageForURL(url, complete) {
|
|
let img = new Image()
|
|
img.onload = complete.bind(this)
|
|
img.src = url
|
|
return img
|
|
}
|
|
|
|
/** Computes the columns and rows as well as scaled width and height.
|
|
* @param {number} level - The level of the wanted layer
|
|
* @returns {array} [cols, rows, width, height]
|
|
**/
|
|
dimensions(level) {
|
|
let dim = this.getDimensions(level)
|
|
let tiles = this.getNumTiles(level)
|
|
return [tiles[0], tiles[1], dim[0], dim[1]]
|
|
}
|
|
|
|
test() {
|
|
//console.log("w=" + this.width + " h=" + this.height + " maxlevel=" + this.maxLevel + " base=" + this.baseLevel)
|
|
for (let i = 0; i <= this.maxLevel; i++) {
|
|
console.log(' ' + i + ' -> ' + this.getScale(i) + ' [' + this.dimensions(i) + ']')
|
|
}
|
|
console.log(this.urlForTile(this.baseLevel, 0, 0))
|
|
}
|
|
}
|
|
|
|
/**
|
|
* A utility class that describes a quad tree of tiles. Each tile on a given
|
|
* level has up to four corresponding tiles on the next level. A TileQuadNode
|
|
* uses the attributes nw (i.e. northwest), ne, sw, se to link to the
|
|
* quad nodes on the next level. The previous attributes links to the quad
|
|
* one level below that holds the given quad as nw, ne, sw, or se.
|
|
* We use this node class because we need a representation of tiles that are
|
|
* needed but not loaded yet to compute tiles which can be abandoned to reduce
|
|
* the memory pressure.
|
|
*
|
|
* @constructor
|
|
* @param {level} Number - The level the quad node belongs to
|
|
* @param {col} Number - The col of the quad
|
|
* @param {row} Number - The level the quad node belongs to
|
|
* @param {url} String - The level the quad node belongs to
|
|
*/
|
|
class TileQuadNode {
|
|
constructor(level, col, row, url) {
|
|
this.level = level
|
|
this.col = col
|
|
this.row = row
|
|
this.url = url
|
|
this.nw = null
|
|
this.ne = null
|
|
this.sw = null
|
|
this.se = null
|
|
this.previous = null
|
|
}
|
|
|
|
/** Return True if this node has no successors and can be used as
|
|
an indicator of tiles to free.
|
|
**/
|
|
noQuads() {
|
|
if (this.previous === null) return false
|
|
return this.nw === null && this.ne === null && this.sw === null && this.se === null
|
|
}
|
|
|
|
/** Unlink the given quad node
|
|
|
|
* @param {node} TileQuadNode - The TileQuadNode to remove
|
|
**/
|
|
unlink(node) {
|
|
if (this.nw === node) this.nw = null
|
|
if (this.ne === node) this.ne = null
|
|
if (this.sw === node) this.sw = null
|
|
if (this.se === node) this.se = null
|
|
}
|
|
|
|
/** Link this quad node to the given previous node. Use the north
|
|
* and west flags to address nw, ne, sw, and se.
|
|
|
|
* @param {node} TileQuadNode - The TileQuadNode to remove
|
|
* @param {north} Boolean - Link to north (true) or south (false)
|
|
* @param {west} Boolean - Link to west (true) or east (false)
|
|
**/
|
|
link(north, west, previous) {
|
|
this.previous = previous
|
|
if (north) {
|
|
if (west) {
|
|
previous.nw = this
|
|
} else {
|
|
previous.ne = this
|
|
}
|
|
} else {
|
|
if (west) {
|
|
previous.sw = this
|
|
} else {
|
|
previous.se = this
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* The main class of a deeply zoomable image that is represented by a hierarchy
|
|
* of tile layers for each zoom level. This gives the user the impression that
|
|
* even huge pictures (up to gigapixel-images) can be zoomed instantaneously,
|
|
* since the tiles at smaller levels are scaled immediately and overloaded by
|
|
* more detailed tiles at the larger level as fast as possible.
|
|
|
|
* @constructor
|
|
* @param {DeepZoomInfo} deepZoomInfo - Information extracted from a JSON-Object
|
|
*/
|
|
export class DeepZoomImage extends PIXI.Container {
|
|
constructor(
|
|
deepZoomInfo,
|
|
{
|
|
debug = false,
|
|
shadow = false,
|
|
center = false,
|
|
world = null, // Defines the world bounds the images lives in
|
|
highResolution = true,
|
|
autoLoadTiles = true,
|
|
useWorker = '',
|
|
minimumLevel = 0,
|
|
alpha = 1,
|
|
app = window.app
|
|
} = {}
|
|
) {
|
|
super()
|
|
this.app = app
|
|
this.debug = debug
|
|
this.shadow = shadow
|
|
this.world = world
|
|
this.useWorker = useWorker
|
|
this.resolution = highResolution ? Math.round(window.devicePixelRatio) : 1
|
|
this.alpha = alpha
|
|
this.fastLoads = 0
|
|
this.active = true
|
|
this.autoLoadTiles = autoLoadTiles
|
|
this.minimumLevel = minimumLevel
|
|
this.quadTrees = new Map() // url as keys, TileQuadNodes as values
|
|
this.setup(deepZoomInfo, center)
|
|
}
|
|
|
|
get point() {
|
|
if (this._point == null) {
|
|
let graphics = new PIXI.Graphics()
|
|
graphics.lineStyle(2, 0x00ff00)
|
|
graphics.drawCircle(0, 0, 2)
|
|
graphics.interactive = false
|
|
this._point = graphics
|
|
}
|
|
return this._point
|
|
}
|
|
|
|
/** Reads the DeepZoomInfo object and initializes all tile layers.
|
|
* Called by the constructor.
|
|
* Creates the sprite for the loaded texture and add the sprite to the tile
|
|
* layer.
|
|
* @param {Object} deepZoomInfo - the DeepZoomInfo instance
|
|
* @param {boolean} center - If true ensures that the pivot is set to the center
|
|
**/
|
|
setup(deepZoomInfo, center) {
|
|
this.info = deepZoomInfo
|
|
this.interactive = true
|
|
this.tileLayers = {}
|
|
|
|
this._foreground = null
|
|
this.tileContainer = new PIXI.Container()
|
|
this.tileContainer.interactive = false
|
|
|
|
let [w, h] = this.baseSize
|
|
if (this.shadow) {
|
|
this.filters = [new PIXI.filters.DropShadowFilter(45, 3)]
|
|
}
|
|
this.addChild(this.tileContainer)
|
|
|
|
if (deepZoomInfo.clip) {
|
|
let mask = new PIXI.Graphics()
|
|
mask.beginFill(1, 1)
|
|
mask.drawRect(0, 0, w, h)
|
|
mask.endFill()
|
|
this.mask = mask
|
|
mask.alpha = 0
|
|
this.addChild(mask)
|
|
this.minimumLevel = deepZoomInfo.baseLevel
|
|
}
|
|
this.currentLevel = Math.max(this.minimumLevel, deepZoomInfo.baseLevel)
|
|
//console.log("autoLoadTiles", this.autoLoadTiles)
|
|
if (this.autoLoadTiles) {
|
|
this.setupTiles(center)
|
|
}
|
|
}
|
|
|
|
/** Default setup method for tiles. Loads all tiles of the current level.
|
|
Can be overwritten in subclasses.
|
|
@param {boolean} center - If true ensures that the pivot is set to the center
|
|
**/
|
|
setupTiles(center = false) {
|
|
// First load background tile
|
|
let tiles = this.ensureAllTiles(this.currentLevel)
|
|
if (center) {
|
|
this.pivot.set(w / 2, h / 2)
|
|
}
|
|
let scaleLevel = this.levelForScale(1)
|
|
this.ensureAllTiles(scaleLevel)
|
|
}
|
|
|
|
removeTileQuadNode(level, col, row, url) {
|
|
if (this.quadTrees.has(url)) {
|
|
let quad = this.quadTrees.get(url)
|
|
this.tileQuadRemoved(quad)
|
|
this.quadTrees.delete(url)
|
|
}
|
|
}
|
|
|
|
addTileQuadNode(level, col, row, url) {
|
|
if (this.quadTrees.has(url)) return this.quadTrees.get(url)
|
|
let quad = new TileQuadNode(level, col, row, url)
|
|
this.quadTrees.set(url, quad)
|
|
this.tileQuadAdded(quad)
|
|
return quad
|
|
}
|
|
|
|
tileQuadRemoved(quad) {
|
|
let below = quad.previous
|
|
// if (this.debug) console.log("tileQuadRemoved", quad)
|
|
if (below) {
|
|
below.unlink(quad)
|
|
if (below.noQuads()) {
|
|
if (this.debug) console.log('Removed tile below')
|
|
let levelBelow = quad.level - 1
|
|
if (levelBelow < this.minimumLevel) return
|
|
let c = Math.floor(quad.col / 2)
|
|
let r = Math.floor(quad.row / 2)
|
|
let urlBelow = this.info.urlForTile(levelBelow, c, r)
|
|
if (this.quadTrees.has(urlBelow)) {
|
|
this.removeTileQuadNode(levelBelow, c, r, urlBelow)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
tileQuadAdded(quad) {
|
|
let levelBelow = quad.level - 1
|
|
if (levelBelow < this.minimumLevel) return
|
|
//if (this.debug) console.log("tileQuadAdded", quad)
|
|
let c = Math.floor(quad.col / 2)
|
|
let r = Math.floor(quad.row / 2)
|
|
let urlBelow = this.info.urlForTile(levelBelow, c, r)
|
|
let below = null
|
|
if (!this.quadTrees.has(urlBelow)) {
|
|
below = this.addTileQuadNode(levelBelow, c, r, urlBelow)
|
|
quad.link(isEven(quad.row), isEven(quad.col), below)
|
|
}
|
|
}
|
|
|
|
/** Returns the tile layer level that corresponds to the given scale.
|
|
* @param {number} scale - the scale factor
|
|
**/
|
|
levelForScale(scale) {
|
|
let level = Math.round(Math.log2(scale * this.resolution)) // Math.floor(Math.log2(event.scale))+1
|
|
let newLevel = this.info.baseLevel + Math.max(level, 0)
|
|
return Math.min(newLevel, this.info.maxLoadableLevel)
|
|
}
|
|
|
|
/** Returns the tile layer level that corresponds to the given scale.
|
|
* @param {number} scale - the scale factor
|
|
**/
|
|
levelAndAlphaForScale(scale) {
|
|
let value = Math.log2(scale * this.resolution)
|
|
let level = Math.round(value)
|
|
let newLevel = this.info.baseLevel + Math.max(level, 0)
|
|
|
|
return { level: Math.min(newLevel, this.info.maxLoadableLevel), alpha: value - level }
|
|
}
|
|
|
|
/** Adds a tile layer to the DeepZoomImage.
|
|
* @param {string} key - the access key
|
|
* @param {Tiles} tiles - the tile layer object
|
|
**/
|
|
addTiles(key, tiles) {
|
|
if (key in this.tileLayers) {
|
|
console.warn('Tiles already availabl', key)
|
|
}
|
|
this.tileContainer.addChild(tiles)
|
|
this.tileLayers[key] = tiles
|
|
}
|
|
|
|
destroyTiles(key) {
|
|
let tiles = this.tileLayers[key]
|
|
this.tileContainer.removeChild(tiles)
|
|
tiles.destroy()
|
|
delete this.tileLayers[key]
|
|
}
|
|
|
|
/** Getter for PIXI.Container foreground layer.
|
|
* Adds a PIXI.Container if necessary.
|
|
**/
|
|
get foreground() {
|
|
if (this._foreground == null) {
|
|
this._foreground = new PIXI.Container()
|
|
this.addChild(this._foreground)
|
|
}
|
|
return this._foreground
|
|
}
|
|
|
|
/** Getter for the DeepZoomInfo base level size.
|
|
**/
|
|
get baseSize() {
|
|
return this.info.getDimensions(this.info.baseLevel)
|
|
}
|
|
|
|
/** Getter for the current scaled size in pixels.
|
|
**/
|
|
get pixelSize() {
|
|
let [w, h] = this.baseSize
|
|
return [w * this.scale.x, h * this.scale.y]
|
|
}
|
|
|
|
/** Getter for the max scale factor.
|
|
**/
|
|
get maxScale() {
|
|
let delta = this.info.maxLevel - this.info.baseLevel
|
|
return (Math.pow(2, delta) / this.resolution) * 2
|
|
}
|
|
|
|
/** Getter for the current width.
|
|
**/
|
|
get width() {
|
|
return this.pixelSize[0]
|
|
}
|
|
|
|
/** Getter for the current height.
|
|
**/
|
|
get height() {
|
|
return this.pixelSize[1]
|
|
}
|
|
|
|
/* Overrides PIXI.Container.hitArea()
|
|
* Allows to optimize the hit testing. Container with hit areas are directly
|
|
* hit tested without consideration of children.
|
|
*/
|
|
get hitArea() {
|
|
// Defining the hitArea resulted hitting the scatter in masked area
|
|
// when a mask was used (@Tüsch[submaps]). Removing the hitArea() altogether
|
|
// broke the interaction in other projects (@googleart).
|
|
// Fix: When masked, the hitArea is ignored by returning null.
|
|
// TODO: test if childs are hittested, without setting interactiveChildren.
|
|
// Opel, 03-05-2018
|
|
if (this.mask) {
|
|
return null
|
|
}
|
|
return this
|
|
}
|
|
|
|
/* Overrides PIXI.Container.contains()
|
|
* Allows to optimize the hit testing.
|
|
*/
|
|
contains(x, y) {
|
|
let [w, h] = this.baseSize
|
|
return x >= 0 && x <= w && y >= 0 && y <= h
|
|
}
|
|
|
|
/** Overrides PIXI.Container._calculateBounds()
|
|
* Only considers the base size and reduces the calculation to a single
|
|
* rect.
|
|
*/
|
|
_calculateBounds() {
|
|
let [w, h] = this.baseSize
|
|
this._bounds.addFrame(this.transform, 0, 0, w, h)
|
|
}
|
|
|
|
/** Overrides PIXI.Container.calculateBounds()
|
|
* Skips the children and only considers the deep zoom base size. Calls
|
|
* the also overwritten _calculateBounds method.
|
|
*/
|
|
calculateBounds() {
|
|
this._bounds.clear()
|
|
this._calculateBounds()
|
|
this._lastBoundsID = this._boundsID
|
|
}
|
|
|
|
/** Returns a single sprite that can be used a thumbnail representation of
|
|
* large images.
|
|
* @return {Sprite} sprite - A sprite with a single tile texture
|
|
*/
|
|
thumbnail() {
|
|
return new PIXI.Sprite.from(this.info.baseURL)
|
|
}
|
|
|
|
/** Returns a list of all tiles of a given level.
|
|
* @param {Tiles} tiles - the grid of tiles
|
|
* @param {number} level - The zoom level of the grid
|
|
* @return {Array[]} - An array of [url, col, row] arrays
|
|
**/
|
|
allTiles(tiles, level) {
|
|
let result = []
|
|
for (let col = 0; col < tiles.cols; col++) {
|
|
for (let row = 0; row < tiles.rows; row++) {
|
|
let url = this.info.urlForTile(level, col, row)
|
|
result.push([url, col, row])
|
|
}
|
|
}
|
|
return result
|
|
}
|
|
|
|
worldBounds() {
|
|
let viewBounds = this.app.scene.bounds || this.app.scene.getBounds()
|
|
// Using getBounds extends visible scope after loading tiles and leads
|
|
// to excessive loading. So we prefer bounds over getBounds()
|
|
if (this.world != null) {
|
|
let bounds = this.world.bounds
|
|
let x = Math.max(-bounds.width, bounds.x)
|
|
let y = Math.max(-bounds.height, bounds.y)
|
|
let width = Math.min(viewBounds.width, bounds.width)
|
|
let height = Math.min(viewBounds.height, bounds.height)
|
|
//console.log("worldBounds new", { x, y, width, height })
|
|
return { x, y, width, height }
|
|
}
|
|
//console.log("worldBounds old", viewBounds)
|
|
return viewBounds
|
|
}
|
|
|
|
/** Loads all tiles that are needed to fill the app bounds.
|
|
* @param {Tiles} tiles - the grid of tiles
|
|
* @param {number} level - The zoom level of the grid
|
|
* @param {boolean} debug
|
|
* @return {Array[]} - An array of [url, col, row] arrays
|
|
*/
|
|
neededTiles(tiles, level, debug = false) {
|
|
let needed = []
|
|
let tsize = tiles.tileSize
|
|
let worldBounds = this.worldBounds()
|
|
let maxWidth = worldBounds.width
|
|
let maxHeight = worldBounds.height
|
|
|
|
let pointInWindow = new PIXI.Point()
|
|
let worldTopLeft = new PIXI.Point(worldBounds.x, worldBounds.y)
|
|
let worldBottomRight = new PIXI.Point(worldBounds.x + maxWidth, worldBounds.y + maxHeight)
|
|
let worldCenter = new PIXI.Point(worldBounds.x + maxWidth / 2, worldBounds.y + maxHeight / 2)
|
|
let tilesCenter = tiles.toLocal(worldCenter)
|
|
|
|
let topLeft = tiles.toLocal(worldTopLeft)
|
|
let bottomRight = tiles.toLocal(worldBottomRight)
|
|
tiles._centerPoint = tilesCenter
|
|
let bounds = new PIXI.Rectangle(topLeft.x, topLeft.y, bottomRight.x - topLeft.x, bottomRight.y - topLeft.y)
|
|
|
|
tiles._boundsRect = bounds
|
|
|
|
/* UO: we need a toLocal call here since the transform may need an update
|
|
which is guaranteed by the toLocal method. */
|
|
let centerCol = Math.floor(tilesCenter.x / tsize)
|
|
let centerRow = Math.floor(tilesCenter.y / tsize)
|
|
|
|
// Expand because we want to test for included centers
|
|
bounds.x -= tsize / 2
|
|
bounds.y -= tsize / 2
|
|
bounds.width += tsize
|
|
bounds.height += tsize
|
|
|
|
try {
|
|
let maxTilesWidth = Math.ceil(maxWidth / tsize)
|
|
let maxTilesHeight = Math.ceil(maxHeight / tsize)
|
|
|
|
maxTilesWidth += 2
|
|
maxTilesHeight += 2
|
|
|
|
let startCol = Math.max(0, centerCol - maxTilesWidth)
|
|
let endCol = Math.min(tiles.cols, centerCol + maxTilesWidth)
|
|
|
|
let startRow = Math.max(0, centerRow - maxTilesHeight)
|
|
let endRow = Math.min(tiles.rows, centerRow + maxTilesHeight)
|
|
|
|
for (let col = startCol; col < endCol; col++) {
|
|
let cx = (col + 0.5) * tsize
|
|
for (let row = startRow; row < endRow; row++) {
|
|
let cy = (row + 0.5) * tsize
|
|
let tileCenter = new PIXI.Point(cx, cy)
|
|
if (bounds.contains(tileCenter.x, tileCenter.y)) {
|
|
let url = this.info.urlForTile(level, col, row)
|
|
needed.push([url, col, row])
|
|
}
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.warn(error.message)
|
|
}
|
|
return { centerCol, centerRow, needed }
|
|
}
|
|
|
|
/** Returns all changed tiles for a given level.
|
|
* @param {Tiles} tiles - the grid of tiles
|
|
* @param {number} level - The zoom level of the grid
|
|
* @return {object} - An object with the keys added and removed which values are [url, col, row] arrays
|
|
*/
|
|
changedTiles(tiles, level) {
|
|
if (this.debug) console.time('changedTiles')
|
|
let changed = { added: [], removed: [] }
|
|
let newNeeded = new Map()
|
|
let { centerCol, centerRow, needed } = this.neededTiles(tiles, level)
|
|
needed.forEach(d => {
|
|
let [url, col, row] = d
|
|
newNeeded.set(url, [col, row])
|
|
if (!tiles.requested.has(url)) {
|
|
changed.added.push(d)
|
|
}
|
|
})
|
|
for (let url of tiles.needed.keys()) {
|
|
if (!newNeeded.has(url)) {
|
|
let [col, row] = tiles.needed.get(url)
|
|
changed.removed.push([url, col, row])
|
|
}
|
|
}
|
|
tiles.needed = newNeeded
|
|
if (this.debug) console.log(newNeeded)
|
|
if (this.debug) console.timeEnd('changedTiles')
|
|
return { centerCol, centerRow, changed }
|
|
}
|
|
|
|
/** Populates all tiles for a given level.
|
|
* @param {Tiles} tiles - the grid of tiles
|
|
* @param {number} level - The zoom level of the grid
|
|
*/
|
|
populateAllTiles(tiles, level) {
|
|
let all = this.allTiles(tiles, level)
|
|
for (let [url, col, row] of all) {
|
|
this.addTileQuadNode(level, col, row, url)
|
|
}
|
|
tiles.loadTiles(all, false, 0, 0)
|
|
}
|
|
|
|
/** Loads all tiles that are needed to fill the browser window.
|
|
* If the optional about parameter is provided (as a point with col as x,
|
|
* and row as y attr) the tiles are sorted by the distance to this point.
|
|
*
|
|
* @param {Tiles} tiles - the grid of tiles
|
|
* @param {number} level - The zoom level of the grid
|
|
* Optional parameter:
|
|
* @param {boolean} onlyone - if true only one tile is loaded
|
|
* @param {PIXI.Point} about - point of interaction
|
|
*/
|
|
populateTiles(tiles, level, { onlyone = false, about = null } = {}) {
|
|
if (tiles.isComplete()) return
|
|
let referenceCol = -1
|
|
let referenceRow = -1
|
|
let { centerCol, centerRow, changed } = this.changedTiles(tiles, level)
|
|
if (about != null) {
|
|
// We want to load tiles in the focus of the user first, therefore
|
|
// we sort according to the distance of the focus of interaction
|
|
let refPoint = this.toLocal(about)
|
|
let scaledTileSize = tiles.tileSize * tiles.tileScale
|
|
referenceCol = Math.floor(refPoint.x / scaledTileSize)
|
|
referenceRow = Math.floor(refPoint.y / scaledTileSize)
|
|
} else {
|
|
referenceCol = centerCol
|
|
referenceRow = centerRow
|
|
}
|
|
referenceCol = centerCol
|
|
referenceRow = centerRow
|
|
|
|
let removed = changed.removed
|
|
for (let [url, col, row] of removed) {
|
|
this.removeTileQuadNode(level, col, row, url)
|
|
}
|
|
let added = changed.added
|
|
if (added.length == 0) return
|
|
for (let [url, col, row] of added) {
|
|
this.addTileQuadNode(level, col, row, url)
|
|
}
|
|
let ref = new PIXI.Point(referenceCol, referenceRow)
|
|
// Note: The array must be sorted in a way that the nearest tiles
|
|
// are at the end of the array since the load queue uses Array.push
|
|
// Array.pop
|
|
added.sort((a, b) => {
|
|
let aa = new PIXI.Point(a[1], a[2])
|
|
let bb = new PIXI.Point(b[1], b[2])
|
|
let da = Points.distance(aa, ref)
|
|
let db = Points.distance(bb, ref)
|
|
return db - da
|
|
})
|
|
tiles.loadTiles(added, onlyone, referenceCol, referenceRow)
|
|
}
|
|
|
|
/** Private method: creates all tiles for a given level.
|
|
* @param {number} level - The zoom level of the grid
|
|
* @return {Tiles} - tiles
|
|
*/
|
|
_createTiles(key, level) {
|
|
let [cols, rows, w, h] = this.info.dimensions(level)
|
|
let increasedLevels = level - this.info.baseLevel
|
|
let invScale = Math.pow(0.5, increasedLevels)
|
|
let tiles = new Tiles(level, this, invScale, cols, rows, w, h, this.info.tileSize, this.info.overlap)
|
|
this.addTiles(key, tiles)
|
|
if (this.info.clip) {
|
|
let rest = this.info.rests[level]
|
|
if (rest) {
|
|
let x = rest.restCol * this.info.tileSize * invScale
|
|
let y = rest.restRow * this.info.tileSize * invScale
|
|
tiles.x = -x
|
|
tiles.y = -y
|
|
}
|
|
}
|
|
return tiles
|
|
}
|
|
|
|
/** Ensures that all needed tiles of a given level are loaded. Creates
|
|
* a new Tiles layer if necessary
|
|
* @param {number} level - The zoom level of the grid
|
|
* @return {Tiles} tiles
|
|
*/
|
|
ensureTiles(level, about) {
|
|
let key = level.toString()
|
|
if (key in this.tileLayers) {
|
|
let tiles = this.tileLayers[key]
|
|
this.populateTiles(tiles, level, { about: about })
|
|
return tiles
|
|
}
|
|
let tiles = this._createTiles(key, level)
|
|
this.populateTiles(tiles, level, { about: about })
|
|
//console.log("ensureTiles", level)
|
|
return tiles
|
|
}
|
|
|
|
untintTiles(level) {
|
|
let key = level.toString()
|
|
if (key in this.tileLayers) {
|
|
let tiles = this.tileLayers[key]
|
|
}
|
|
}
|
|
|
|
/** Ensures that all tiles of a given level are loaded.
|
|
* @param {number} level - The zoom level of the grid
|
|
*/
|
|
ensureAllTiles(level) {
|
|
let key = level.toString()
|
|
if (key in this.tileLayers) {
|
|
let tiles = this.tileLayers[key]
|
|
this.populateAllTiles(tiles, level)
|
|
tiles.keep = true
|
|
return
|
|
}
|
|
let tiles = this._createTiles(key, level)
|
|
this.populateAllTiles(tiles, level)
|
|
tiles.keep = true
|
|
return tiles
|
|
}
|
|
|
|
hideTilesAboveLevel(level) {
|
|
Object.keys(this.tileLayers).forEach(key => {
|
|
let tiles = this.tileLayers[key]
|
|
if (tiles.level > level) {
|
|
tiles.visible = false
|
|
}
|
|
})
|
|
}
|
|
|
|
/** Destroys all tiles above a given level to ensure that the memory can
|
|
* be reused.
|
|
* @param {number} level - The zoom level of the grid
|
|
*/
|
|
destroyTilesAboveLevel(level) {
|
|
Object.keys(this.tileLayers).forEach(key => {
|
|
let tiles = this.tileLayers[key]
|
|
if (tiles.level > level && !tiles.keep) {
|
|
for (let url of tiles.available.keys()) {
|
|
let quad = this.quadTrees.get(url)
|
|
if (quad) this.removeTileQuadNode(quad)
|
|
}
|
|
this.destroyTiles(key)
|
|
}
|
|
})
|
|
}
|
|
|
|
destroyAllTiles() {
|
|
Object.keys(this.tileLayers).forEach(key => {
|
|
this.destroyTiles(key)
|
|
})
|
|
}
|
|
|
|
/**
|
|
* Tint tiles in all layers that are no longer needed
|
|
*
|
|
* @memberof DeepZoomImage
|
|
*/
|
|
tintObsoleteTiles() {
|
|
Object.keys(this.tileLayers).forEach(key => {
|
|
let tiles = this.tileLayers[key]
|
|
tiles.untintTiles()
|
|
if (!tiles.keep) {
|
|
tiles.tintObsoleteTiles()
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* Destroy tiles in all layers that are no longer needed
|
|
*
|
|
* @memberof DeepZoomImage
|
|
*/
|
|
destroyUnneededTiles() {
|
|
Object.keys(this.tileLayers).forEach(key => {
|
|
let tiles = this.tileLayers[key]
|
|
if (!tiles.keep) {
|
|
tiles.destroyUnneededTiles()
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* Destroy tiles in all layers that are no longer needed
|
|
*
|
|
* @memberof DeepZoomImage
|
|
*/
|
|
destroyObsoleteTiles() {
|
|
Object.keys(this.tileLayers).forEach(key => {
|
|
let tiles = this.tileLayers[key]
|
|
if (!tiles.keep) {
|
|
tiles.destroyObsoleteTiles()
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* Destroy tiles in all layers that are not part of the
|
|
* visible quadTrees
|
|
*
|
|
* @memberof DeepZoomImage
|
|
*/
|
|
destroyTiles() {
|
|
Object.keys(this.tileLayers).forEach(key => {
|
|
let tiles = this.tileLayers[key]
|
|
if (!tiles.keep) {
|
|
tiles.destroyTiles(this.quadTrees)
|
|
}
|
|
})
|
|
}
|
|
|
|
/* Tint all tiles
|
|
* @param {number} level - The zoom level of the grid
|
|
*/
|
|
tintTilesBelowLevel(level) {
|
|
Object.keys(this.tileLayers).forEach(key => {
|
|
let tiles = this.tileLayers[key]
|
|
if (tiles.level < level) {
|
|
tiles.tintTiles(this.quadTrees)
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* Ensure that the given tiles layer is the topmost one and visible.
|
|
* @param {*} tiles
|
|
*/
|
|
bringTilesToFront(tiles) {
|
|
this.tileContainer.addChild(tiles)
|
|
tiles.visible = true
|
|
}
|
|
|
|
/** A callback function that can be used by a Scatter view to inform
|
|
* the zoomable image that it has been moved, rotated or scaled, and should
|
|
* load tiles accordingly.
|
|
* @param {PIXI.Point} translated - the movement of the scatter
|
|
* @param {number} scale - the zoom factor
|
|
* @param {PIXI.Point} about - the anchor point of the zoom
|
|
* @param {boolean} fast - informs the callback to return as fast as possible,
|
|
* i.e. after loading a single tile
|
|
* @param {boolean} debug - log debug infos
|
|
*/
|
|
transformed(event) {
|
|
if (!this.active) {
|
|
return
|
|
}
|
|
let key = this.currentLevel.toString()
|
|
let currentTiles = this.tileLayers[key]
|
|
if (typeof currentTiles == 'undefined') {
|
|
return
|
|
}
|
|
if (event.fast) {
|
|
this.fastLoads += 1
|
|
this.populateTiles(currentTiles, this.currentLevel, {
|
|
onlyone: false,
|
|
about: event.about
|
|
})
|
|
if (this.fastLoads == 3) {
|
|
this.fastLoads = 0
|
|
} else {
|
|
return
|
|
}
|
|
}
|
|
if (event.scale == null) {
|
|
this.ensureTiles(this.currentLevel, event.about)
|
|
return
|
|
}
|
|
|
|
let level = this.levelForScale(event.scale)
|
|
let newLevel = Math.max(level, this.minimumLevel)
|
|
if (newLevel != this.currentLevel) {
|
|
if (!currentTiles.keep) {
|
|
currentTiles.loader.cancel()
|
|
}
|
|
this.hideTilesAboveLevel(newLevel)
|
|
currentTiles = this.ensureTiles(newLevel, event.about)
|
|
this.currentLevel = newLevel
|
|
} else {
|
|
this.ensureTiles(this.currentLevel, event.about)
|
|
}
|
|
this.bringTilesToFront(currentTiles)
|
|
if (this._foreground) {
|
|
this.addChild(this._foreground)
|
|
}
|
|
}
|
|
|
|
/**
|
|
*Activates the textures on the DeepZoomImage.
|
|
*
|
|
* @memberof DeepZoomImage
|
|
*/
|
|
activate() {
|
|
this.active = true
|
|
this.destroyTilesAboveLevel(this.currentLevel)
|
|
this.ensureTiles(this.currentLevel, null)
|
|
//console.log("Activate Textures!", this.currentLevel)
|
|
}
|
|
|
|
/**
|
|
*Dectivates the textures on the DeepZoomImage.
|
|
*
|
|
* @memberof DeepZoomImage
|
|
*/
|
|
deactivate() {
|
|
this.active = false
|
|
this.destroyAllTiles()
|
|
this.tileContainer.destroy({ children: true })
|
|
}
|
|
|
|
throwFinished() {
|
|
//console.log("throwFinished")
|
|
let key = this.currentLevel.toString()
|
|
let currentTiles = this.tileLayers[key]
|
|
if (typeof currentTiles == 'undefined') {
|
|
return
|
|
}
|
|
this.ensureTiles(this.currentLevel)
|
|
}
|
|
}
|