335 lines
10 KiB
JavaScript
335 lines
10 KiB
JavaScript
|
import { Colors } from '../../utils.js'
|
||
|
|
import { WorkerTileLoader, PIXITileLoader } from "./loader.js"
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* A layer of tiles that represents a zoom level of a DeepZoomImage as a grid
|
||
|
|
* of sprites.
|
||
|
|
* @constructor
|
||
|
|
* @param {number} level - the zoom level of the tile layer
|
||
|
|
* @param {DeepZoomImage} view - the zoomable image the layer belongs to
|
||
|
|
* @param {number} scale - the scale of the tile layer
|
||
|
|
* @param {number} cols - the number of columns of the layer
|
||
|
|
* @param {number} rows - the number of rows of the layer
|
||
|
|
* @param {number} width - the width of the layer in pixel
|
||
|
|
* @param {number} height - the height of the layer in pixel
|
||
|
|
* @param {number} tileSize - the size of a single tile in pixel
|
||
|
|
* @param {number} overlap - the overlap of the tiles in pixel
|
||
|
|
* @param {number} fadeInTime - time needed to fade in tiles if TweenLite is set
|
||
|
|
**/
|
||
|
|
export class Tiles extends PIXI.Container {
|
||
|
|
constructor(
|
||
|
|
level,
|
||
|
|
view,
|
||
|
|
scale,
|
||
|
|
cols,
|
||
|
|
rows,
|
||
|
|
width,
|
||
|
|
height,
|
||
|
|
tileSize,
|
||
|
|
overlap,
|
||
|
|
fadeInTime = 0.33
|
||
|
|
) {
|
||
|
|
super()
|
||
|
|
this.debug = false
|
||
|
|
this.showGrid = false
|
||
|
|
this.view = view
|
||
|
|
this.level = level
|
||
|
|
this.cols = cols
|
||
|
|
this.rows = rows
|
||
|
|
this.pixelWidth = width
|
||
|
|
this.pixelHeight = height
|
||
|
|
this.tileSize = tileSize
|
||
|
|
this.overlap = overlap
|
||
|
|
this.needed = new Map() // url as key, [col, row] as value
|
||
|
|
this.requested = new Set()
|
||
|
|
this.available = new Map()
|
||
|
|
this.scale.set(scale, scale)
|
||
|
|
this.tileScale = scale
|
||
|
|
this.fadeInTime = fadeInTime
|
||
|
|
this.keep = false
|
||
|
|
if (this.view.preferWorker && view.info.compression.length > 0)
|
||
|
|
this.loader = new WorkerTileLoader(this)
|
||
|
|
else
|
||
|
|
this.loader = new PIXITileLoader(this, view.info.compression)
|
||
|
|
this.interactive = false
|
||
|
|
this._highlight = null
|
||
|
|
|
||
|
|
this._info = null
|
||
|
|
|
||
|
|
this._centerPoint = null
|
||
|
|
this._boundsRect = null
|
||
|
|
|
||
|
|
this.infoColor = Colors.random()
|
||
|
|
this.pprint()
|
||
|
|
this.destroyed = false
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/** Tests whether all tiles are loaded. **/
|
||
|
|
isComplete() {
|
||
|
|
return this.cols * this.rows === this.children.length
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Returns the highligh graphics layer for debugging purposes.
|
||
|
|
**/
|
||
|
|
get highlight() {
|
||
|
|
if (this._highlight == null) {
|
||
|
|
let graphics = new PIXI.Graphics()
|
||
|
|
graphics.beginFill(0xffff00, 0.1)
|
||
|
|
graphics.lineStyle(2, 0xffff00)
|
||
|
|
graphics.drawRect(1, 1, this.tileSize - 2, this.tileSize - 2)
|
||
|
|
graphics.endFill()
|
||
|
|
graphics.interactive = false
|
||
|
|
this._highlight = graphics
|
||
|
|
}
|
||
|
|
return this._highlight
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Returns the highligh graphics layer for debugging purposes.
|
||
|
|
**/
|
||
|
|
get info() {
|
||
|
|
if (this._info == null) {
|
||
|
|
let graphics = new PIXI.Graphics()
|
||
|
|
graphics.lineStyle(4, 0xff0000)
|
||
|
|
graphics.interactive = false
|
||
|
|
this._info = graphics
|
||
|
|
this.addChild(this._info)
|
||
|
|
}
|
||
|
|
return this._info
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Helper method pretty printing debug information. **/
|
||
|
|
pprint() {
|
||
|
|
if (this.debug)
|
||
|
|
console.log(
|
||
|
|
'Tiles level: ' +
|
||
|
|
this.level +
|
||
|
|
' scale: ' +
|
||
|
|
this.scale.x +
|
||
|
|
' cols: ' +
|
||
|
|
this.cols +
|
||
|
|
' rows: ' +
|
||
|
|
this.rows +
|
||
|
|
' w: ' +
|
||
|
|
this.pixelWidth +
|
||
|
|
' h: ' +
|
||
|
|
this.pixelHeight +
|
||
|
|
' tsize:' +
|
||
|
|
this.tileSize
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Computes the tile position and obeys the overlap.
|
||
|
|
* @param {number} col - The column of the tile
|
||
|
|
* @param {number} row - The row of the tile
|
||
|
|
* @returns {PIXI.Point} obj
|
||
|
|
**/
|
||
|
|
tilePosition(col, row) {
|
||
|
|
let x = col * this.tileSize
|
||
|
|
let y = row * this.tileSize
|
||
|
|
let overlap = this.overlap
|
||
|
|
if (col != 0) {
|
||
|
|
x -= overlap
|
||
|
|
}
|
||
|
|
if (row != 0) {
|
||
|
|
y -= overlap
|
||
|
|
}
|
||
|
|
return new PIXI.Point(x, y)
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Computes the tile size without overlap
|
||
|
|
* @param {number} col - The column of the tile
|
||
|
|
* @param {number} row - The row of the tile
|
||
|
|
* @returns {PIXI.Point} obj
|
||
|
|
**/
|
||
|
|
tileDimensions(col, row) {
|
||
|
|
let w = this.tileSize
|
||
|
|
let h = this.tileSize
|
||
|
|
let pos = this.tilePosition(col, row)
|
||
|
|
if (col == this.cols - 1) {
|
||
|
|
w = this.pixelWidth - pos.x
|
||
|
|
}
|
||
|
|
if (row == this.rows - 1) {
|
||
|
|
h = this.pixelHeight - pos.y
|
||
|
|
}
|
||
|
|
return new PIXI.Point(w, h)
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Method to support debugging. Highlights the specified tile at col, row **/
|
||
|
|
highlightTile(col, row) {
|
||
|
|
if (col > -1 && row > -1 && col < this.cols && row < this.rows) {
|
||
|
|
let graphics = this.highlight
|
||
|
|
let dim = this.tileDimensions(col, row)
|
||
|
|
graphics.position = this.tilePosition(col, row)
|
||
|
|
graphics.clear()
|
||
|
|
graphics.beginFill(0xff00ff, 0.1)
|
||
|
|
graphics.lineStyle(2, 0xffff00)
|
||
|
|
graphics.drawRect(1, 1, dim.x - 2, dim.y - 2)
|
||
|
|
graphics.endFill()
|
||
|
|
this.addChild(this.highlight)
|
||
|
|
} else {
|
||
|
|
this.removeChild(this.highlight)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Loads the tiles for the given urls and adds the tiles as sprites.
|
||
|
|
* @param {array} urlpos - An array of URL, pos pairs
|
||
|
|
* @param {boolean} onlyone - Loads only on tile at a time if true
|
||
|
|
**/
|
||
|
|
loadTiles(urlpos, onlyone, refCol, refRow) {
|
||
|
|
if (this.showGrid) {
|
||
|
|
this.highlightTile(refCol, refRow)
|
||
|
|
}
|
||
|
|
urlpos.forEach(d => {
|
||
|
|
let [url, col, row] = d
|
||
|
|
if (this.loader.schedule(url, col, row)) {
|
||
|
|
if (onlyone) {
|
||
|
|
return this.loader.loadOneTile()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
this.loader.loadAll()
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Private method: add a red border to a tile for debugging purposes. **/
|
||
|
|
_addTileBorder(tile, col, row) {
|
||
|
|
let dim = this.tileDimensions(col, row)
|
||
|
|
let graphics = new PIXI.Graphics()
|
||
|
|
graphics.beginFill(0, 0)
|
||
|
|
graphics.lineStyle(2, 0xff0000)
|
||
|
|
graphics.drawRect(1, 1, dim.x - 2, dim.y - 2)
|
||
|
|
graphics.endFill()
|
||
|
|
tile.addChild(graphics)
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Adds a tile. **/
|
||
|
|
addTile(tile, col, row, url) {
|
||
|
|
if (this.available.has(url)) {
|
||
|
|
console.warn('Trying to add available tile')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
this.addChildAt(tile, 0)
|
||
|
|
this.available.set(url, tile)
|
||
|
|
if (this.destroyed) {
|
||
|
|
console.warn('Adding to destroyed tiles layer')
|
||
|
|
}
|
||
|
|
// this._addTileBorder(tile, col, row)
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Called by the loader after each successfull loading of a single tile.
|
||
|
|
* Adds the sprite to the tile layer.
|
||
|
|
* @param {Object} tile - the loaded tile sprite
|
||
|
|
* @param {Number} col - the col position
|
||
|
|
* @param {Number} row - the rowposition
|
||
|
|
**/
|
||
|
|
tileAvailable(tile, col, row, url) {
|
||
|
|
let pos = this.tilePosition(col, row)
|
||
|
|
if (this.showGrid) {
|
||
|
|
this._addTileBorder(tile, col, row)
|
||
|
|
}
|
||
|
|
tile.position = pos
|
||
|
|
tile.interactive = false
|
||
|
|
if (TweenLite) {
|
||
|
|
tile.alpha = 0
|
||
|
|
TweenLite.to(tile, this.fadeInTime, { alpha: this.alpha })
|
||
|
|
}
|
||
|
|
this.addTile(tile, col, row, url)
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Destroys the tiles layer and destroys the loader. Async load calls are
|
||
|
|
* cancelled.
|
||
|
|
**/
|
||
|
|
destroy() {
|
||
|
|
this.destroyed = true
|
||
|
|
this.loader.destroy()
|
||
|
|
super.destroy({ children: true }) // Calls destroyChildren
|
||
|
|
this.available.clear()
|
||
|
|
this.requested.clear()
|
||
|
|
this.needed.clear()
|
||
|
|
}
|
||
|
|
|
||
|
|
destroyTile(url, tile) {
|
||
|
|
this.loader.unschedule(url)
|
||
|
|
this.removeChild(tile)
|
||
|
|
tile.destroy()
|
||
|
|
this.available.delete(url)
|
||
|
|
}
|
||
|
|
|
||
|
|
destroyTileByUrl(url) {
|
||
|
|
if (this.available.has(url)) {
|
||
|
|
let tile = this.available.get(url)
|
||
|
|
this.destroyTile(url, tile)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Destroys the tiles which are not with the bounds of the app to free
|
||
|
|
* memory.
|
||
|
|
**/
|
||
|
|
destroyTiles(quadTrees) {
|
||
|
|
let count = 0
|
||
|
|
for (let [url, tile] of this.available.entries()) {
|
||
|
|
if (!quadTrees.has(url)) {
|
||
|
|
this.destroyTile(url, tile)
|
||
|
|
count += 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (count && this.debug)
|
||
|
|
console.log('destroyTiles', this.level, count)
|
||
|
|
}
|
||
|
|
|
||
|
|
destroyUnneededTiles() {
|
||
|
|
let count = 0
|
||
|
|
for (let [url, tile] of this.available.entries()) {
|
||
|
|
if (!this.needed.has(url)) {
|
||
|
|
this.destroyTile(url, tile)
|
||
|
|
count += 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (count && this.debug)
|
||
|
|
console.log('destroyUnneededTiles', this.level, count)
|
||
|
|
}
|
||
|
|
|
||
|
|
highlightInfos() {
|
||
|
|
let graphics = this.info
|
||
|
|
let color = this.infoColor
|
||
|
|
graphics.clear()
|
||
|
|
graphics.lineStyle(2, color)
|
||
|
|
for (let [col, row] of this.needed.values()) {
|
||
|
|
let dim = this.tileDimensions(col, row)
|
||
|
|
let pos = this.tilePosition(col, row)
|
||
|
|
graphics.beginFill(color, 0.2)
|
||
|
|
graphics.drawRect(pos.x + 1, pos.y + 1, dim.x - 2, dim.y - 2)
|
||
|
|
graphics.endFill()
|
||
|
|
}
|
||
|
|
let r = this._boundsRect
|
||
|
|
if (r != null) {
|
||
|
|
graphics.lineStyle(20, color)
|
||
|
|
graphics.drawRect(r.x, r.y, r.width, r.height)
|
||
|
|
graphics.moveTo(r.x, r.y)
|
||
|
|
graphics.lineTo(r.x + r.width, r.y + r.height)
|
||
|
|
|
||
|
|
graphics.moveTo(r.x, r.y + r.height)
|
||
|
|
graphics.lineTo(r.x + r.width, r.y)
|
||
|
|
}
|
||
|
|
|
||
|
|
let p = this._centerPoint
|
||
|
|
if (p != null) {
|
||
|
|
graphics.drawCircle(p.x, p.y, 20)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
tintTiles(quadTrees) {
|
||
|
|
for (let [url, tile] of this.available.entries()) {
|
||
|
|
if (!quadTrees.has(url)) tile.tint = 0xff0000
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
untintTiles() {
|
||
|
|
for (let [url, tile] of this.available.entries()) {
|
||
|
|
tile.tint = 0xffffff
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|