iwmlib/lib/pixi/deepzoom/loader.js

367 lines
12 KiB
JavaScript
Raw Permalink Normal View History

import Tile from './tile.js'
2019-03-21 09:57:27 +01:00
/**
* A Tile Loader component that can be plugged into a Tiles Layer.
*/
export class TileLoader {
constructor(tiles) {
this.debug = false
this.tiles = tiles
this.setup()
}
/** Setup collections and instance vars. */
setup() {
this.map = new Map() // Map {url : [ col, row]}
this.loading = new Set() // Set url
this.loaded = new Map() // Map {url : sprite }
this.loadQueue = []
}
/** Schedules a tile url for loading. The loading itself must be triggered
by a call to loadOneTile or loadAll
* @param {String} url - the url of the texture / tile
* @param {Number} col - the tile col
* @param {Number} row - the tile row
**/
schedule(url, col, row) {
if (this.loaded.has(url)) return false
if (this.loading.has(url)) return false
//Tile.schedule(url)
2019-03-21 09:57:27 +01:00
this.map.set(url, [col, row])
this.loading.add(url)
this.loadQueue.push(url)
return true
}
unschedule(url) {
if (this.loaded.has(url)) this.loaded.delete(url)
if (this.loading.has(url)) this.loading.delete(url)
//Tile.unschedule(url)
2019-03-21 09:57:27 +01:00
this.loadQueue = this.loadQueue.filter(item => item != url)
}
/** Cancels loading by clearing the load queue **/
cancel() {
this.loadQueue = []
this.loading.clear()
}
/** Destroys alls collections. **/
destroy() {
this.setup()
}
/** Private method. Informs the tile layer about a texture for a given url.
* Creates the sprite for the loaded texture and informs the tile layer.
* @param {String} url - the url
* @param {Object} texture - the loaded resource
**/
_textureAvailable(url, col, row, texture) {
let tile = this.loaded.get(url)
if (tile != null) {
2019-08-06 15:34:57 +02:00
console.warn('Tile already loaded')
2019-03-21 09:57:27 +01:00
tile.unregister()
}
2019-05-31 16:10:46 +02:00
try {
tile = new Tile(texture, url)
this.loaded.set(url, tile)
this.tiles.tileAvailable(tile, col, row, url)
} catch (error) {
2019-08-06 15:34:57 +02:00
console.warn('Tile loading error', error)
2019-05-31 16:10:46 +02:00
}
2019-03-21 09:57:27 +01:00
}
}
/**
* Uses the PIXI Loader but can be replaced with othe loaders implementing
* the public methods without underscore.
* Calls the Tiles.tileAvailable method if the texture is available.
**/
export class PIXITileLoader extends TileLoader {
constructor(tiles, compression) {
super(tiles)
this.destroyed = false
2019-09-10 16:34:59 +02:00
this.loader = new PIXI.Loader()
this.loader.onLoad.add(this._onLoaded.bind(this))
this.loader.onError.add(this._onError.bind(this))
2019-03-21 09:57:27 +01:00
if (compression) {
2019-09-19 13:38:24 +02:00
this.loader.use(PIXI.compressedTextures.ImageParser.use)
2019-03-21 09:57:27 +01:00
}
}
schedule(url, col, row) {
// Overwritten schedule to avoid BaseTexture and Texture already loaded errors.
if (this.loaded.has(url)) return false
if (this.loading.has(url)) return false
//Tile.schedule(url)
let reusableTexture = Tile.textureAvailable(url)
if (reusableTexture) {
if (this.debug) console.log('Texture reusable', reusableTexture)
this._textureAvailable(url, col, row, reusableTexture)
return false
2019-03-21 09:57:27 +01:00
}
let texture = PIXI.utils.TextureCache[url]
if (texture) {
if (this.debug) console.log('Texture already loaded', texture)
this._textureAvailable(url, col, row, texture)
return false
}
let base = PIXI.utils.BaseTextureCache[url]
if (base) {
if (this.debug) console.log('BaseTexture already loaded', base)
let texture = new PIXI.Texture(base)
this._textureAvailable(url, col, row, texture)
return false
}
return super.schedule(url, col, row)
}
/** Load one and only one of the scheduled tiles **/
loadOneTile() {
2019-08-06 15:34:57 +02:00
if (this.destroyed) return
2019-03-21 09:57:27 +01:00
this._loadOneTile()
}
/** Load all scheduled tiles **/
loadAll() {
2019-08-06 15:34:57 +02:00
if (this.destroyed) return
2019-03-21 09:57:27 +01:00
this._loadAllTiles()
}
/** Destroys the loader completly **/
destroy() {
this.destroyed = true
super.destroy()
try {
this.loader.reset()
} catch (error) {
2019-08-06 15:34:57 +02:00
console.warn('Error while resetting loader', error)
2019-03-21 09:57:27 +01:00
}
}
_onError(loader, error) {
console.warn('Cannot load', error)
}
/** Private method. Called by the PIXI loader after each successfull
* loading of a single tile.
* Creates the sprite for the loaded texture and informs the tile layer.
* @param {Object} loader - the loader instance
* @param {Object} resource - the loaded resource with url and texture attr
**/
_onLoaded(loader, resource) {
if (this.destroyed) {
let texture = resource.texture
2019-06-01 12:31:38 +02:00
let url = resource.url
Tile.lateTexture(url, texture)
2019-08-06 15:34:57 +02:00
console.warn('Received resource after destroy', texture)
2019-03-21 09:57:27 +01:00
return
}
try {
let [col, row] = this.map.get(resource.url)
this._textureAvailable(resource.url, col, row, resource.texture)
2019-08-06 15:34:57 +02:00
} catch (err) {
console.warn('Texture unavailable: ' + err.message)
2019-03-21 09:57:27 +01:00
}
}
/** Private method: loads one tile from the queue. **/
_loadOneTile(retry = 1) {
//console.log("_loadOneTile")
if (this.destroyed) {
//console.warn("_loadOneTile after destroy")
return
}
if (this.loader.loading) {
setTimeout(() => {
this._loadOneTile()
}, retry)
return
}
if (this.loadQueue.length > 0) {
let url = this.loadQueue.pop()
this.loader.add(url, url)
this.loader.load()
}
}
/** Private method: loads all tiles from the queue in batches. Batches are
helpfull to avoid loading tiles that are no longer needed because the
user has already zoomed to a different level.**/
_loadAllTiles(batchSize = 8, retry = 16) {
if (this.destroyed) {
return
}
if (this.loadQueue.length > 0) {
if (this.loader.loading) {
//console.log("Loader busy", this.loadQueue.length)
setTimeout(() => {
this._loadAllTiles()
}, retry)
return
}
let i = 0
let urls = []
while (i < batchSize && this.loadQueue.length > 0) {
let url = this.loadQueue.pop()
if (!this.loaded.has(url)) {
let resource = this.loader.resources[url]
if (resource) {
2019-08-06 15:34:57 +02:00
console.log('Resource already added', url)
} else {
2019-03-21 09:57:27 +01:00
urls.push(url)
i += 1
}
}
}
this.loader.add(urls).load(() => {
this._loadAllTiles()
})
}
}
}
/**
* Uses XMLHttpRequests but can be replaced with other loaders implementing
* the public methods without underscore.
* Calls the Tiles.tileAvailable method if the texture is available.
**/
export class RequestTileLoader extends TileLoader {
constructor(tiles, compression) {
super(tiles)
this.compression = compression
}
schedule(url, col, row) {
this._load(url, col, row)
return super.schedule(url, col, row)
}
_load(url, col, row, callback = null) {
if (this.compression) {
let xhr = new XMLHttpRequest()
xhr.open('GET', url, false)
xhr.responseType = 'arraybuffer'
xhr.onload = e => {
let CompressedImage = PIXI.compressedTextures.CompressedImage
2019-08-06 15:34:57 +02:00
let compressed = CompressedImage.loadFromArrayBuffer(xhr.response, url)
2019-03-21 09:57:27 +01:00
let base = new PIXI.BaseTexture(compressed)
let texture = new PIXI.Texture(base)
this._textureAvailable(url, col, row, texture)
if (callback) callback()
}
xhr.send()
} else {
2019-09-10 16:34:59 +02:00
let texture = PIXI.Texture.from('assets/image.png')
2019-03-21 09:57:27 +01:00
this._textureAvailable(url, col, row, texture)
if (callback) callback()
}
}
/** Load one and only one of the scheduled tiles **/
loadOneTile() {
this._loadOneTile()
}
/** Load all scheduled tiles **/
loadAll() {
this._loadAllTiles()
}
/** Private method: loads one tile from the queue. **/
_loadOneTile(retry = 1) {
if (this.loadQueue.length > 0) {
let url = this.loadQueue.pop()
let [col, row] = this.map.get(url)
this._load(url, col, row)
}
}
/** Private method: loads all tiles from the queue in batches. Batches are
helpfull to avoid loading tiles that are no longer needed because the
user has already zoomed to a different level.**/
_loadAllTiles(batchSize = 8, retry = 16) {
if (this.loadQueue.length > 0) {
let i = 0
let urls = []
while (i < batchSize && this.loadQueue.length > 0) {
let url = this.loadQueue.pop()
if (this.debug) console.time(url)
if (!this.loaded.has(url)) {
urls.push(url)
i += 1
}
}
let total = urls.length
let count = 0
for (let url of urls) {
let [col, row] = this.map.get(url)
this._load(url, col, row, () => {
count++
if (count == total) this._loadAllTiles()
})
}
}
}
}
/**
* Uses Workers but can be replaced with other loaders implementing
* the public methods without underscore.
* Calls the Tiles.tileAvailable method if the texture is available.
**/
export class WorkerTileLoader extends TileLoader {
2019-07-04 09:17:43 +02:00
constructor(tiles, workerPath) {
2019-03-21 09:57:27 +01:00
super(tiles)
2019-07-04 09:17:43 +02:00
2019-08-06 15:34:57 +02:00
let worker = (this.worker = new Worker(workerPath))
2019-07-04 09:17:43 +02:00
2019-08-06 15:34:57 +02:00
worker.onmessage = event => {
2019-03-21 09:57:27 +01:00
if (event.data.success) {
let { url, col, row, buffer } = event.data
//console.log("WorkerTileLoader.loaded", url, buffer)
2019-09-19 13:53:12 +02:00
//let CompressedImage = PIXI.compressedTextures.CompressedImage
let compressed = PIXI.compressedTextures.loadFromArrayBuffer(buffer, url)
2019-03-21 09:57:27 +01:00
let base = new PIXI.BaseTexture(compressed)
let texture = new PIXI.Texture(base)
this._textureAvailable(url, col, row, texture)
}
}
}
loadOne() {
if (this.loadQueue.length > 0) {
let url = this.loadQueue.pop()
let [col, row] = this.map.get(url)
let tile = [col, row, url]
2019-08-06 15:34:57 +02:00
this.worker.postMessage({ command: 'load', tiles: [tile] })
2019-03-21 09:57:27 +01:00
}
}
loadAll() {
let tiles = []
while (this.loadQueue.length > 0) {
let url = this.loadQueue.pop()
let [col, row] = this.map.get(url)
tiles.push([col, row, url])
}
2019-08-06 15:34:57 +02:00
this.worker.postMessage({ command: 'load', tiles })
2019-03-21 09:57:27 +01:00
}
cancel() {
super.cancel()
2019-08-06 15:34:57 +02:00
this.worker.postMessage({ command: 'abort' })
2019-03-21 09:57:27 +01:00
}
destroy() {
2019-08-06 15:34:57 +02:00
this.worker.postMessage({ command: 'abort' })
2019-03-21 09:57:27 +01:00
this.worker.terminate()
this.worker = null
super.destroy()
}
}