From 141d27d4f138a1c5564b78917a72acce756bd58d Mon Sep 17 00:00:00 2001 From: Sebastian Kupke Date: Tue, 6 Aug 2019 15:34:57 +0200 Subject: [PATCH] Added path to gulpfile. --- gulpfile.js | 9 ++-- lib/pixi/deepzoom/image.js | 91 ++++++++++----------------------- lib/pixi/deepzoom/loader.js | 46 ++++++----------- lib/pixi/deepzoom/tile.js | 38 ++++++-------- lib/pixi/deepzoom/tileloader.js | 24 ++++----- lib/pixi/deepzoom/tiles.js | 54 +++++++------------ 6 files changed, 96 insertions(+), 166 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 751ce24..f093541 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -50,9 +50,12 @@ function preload() { } function prettify() { - return src(['./lib/*.js', './lib/card/*.js', './lib/pixi/*.js', '!./lib/bootstrap.babel.js'], { - base: './lib' - }) + return src( + ['./lib/*.js', './lib/card/*.js', './lib/pixi/*.js', './lib/pixi/deepzoom/*.js', '!./lib/bootstrap.babel.js'], + { + base: './lib' + } + ) .pipe( prettier({ singleQuote: true, diff --git a/lib/pixi/deepzoom/image.js b/lib/pixi/deepzoom/image.js index a15b576..f49b222 100755 --- a/lib/pixi/deepzoom/image.js +++ b/lib/pixi/deepzoom/image.js @@ -40,15 +40,14 @@ export class DeepZoomInfo { // 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.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. - **/ + * 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 @@ -231,15 +230,7 @@ export class DeepZoomInfo { 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(' ' + i + ' -> ' + this.getScale(i) + ' [' + this.dimensions(i) + ']') } console.log(this.urlForTile(this.baseLevel, 0, 0)) } @@ -279,12 +270,7 @@ class TileQuadNode { **/ noQuads() { if (this.previous === null) return false - return ( - this.nw === null && - this.ne === null && - this.sw === null && - this.se === null - ) + return this.nw === null && this.ne === null && this.sw === null && this.se === null } /** Unlink the given quad node @@ -323,7 +309,6 @@ class TileQuadNode { } } - /** * 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 @@ -341,7 +326,7 @@ export class DeepZoomImage extends PIXI.Container { debug = false, shadow = false, center = false, - world = null, // Defines the world bounds the images lives in + world = null, // Defines the world bounds the images lives in highResolution = true, autoLoadTiles = true, useWorker = '', @@ -356,9 +341,7 @@ export class DeepZoomImage extends PIXI.Container { this.shadow = shadow this.world = world this.useWorker = useWorker - this.resolution = highResolution - ? Math.round(window.devicePixelRatio) - : 1 + this.resolution = highResolution ? Math.round(window.devicePixelRatio) : 1 this.alpha = alpha this.fastLoads = 0 this.active = true @@ -548,7 +531,7 @@ export class DeepZoomImage extends PIXI.Container { **/ get maxScale() { let delta = this.info.maxLevel - this.info.baseLevel - return Math.pow(2, delta) / this.resolution * 2 + return (Math.pow(2, delta) / this.resolution) * 2 } /** Getter for the current width. @@ -563,7 +546,6 @@ export class DeepZoomImage extends PIXI.Container { 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. @@ -633,7 +615,7 @@ export class DeepZoomImage extends PIXI.Container { } worldBounds() { - let viewBounds = this.app.scene.bounds || this.app.scene.getBounds() + 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) { @@ -671,11 +653,7 @@ export class DeepZoomImage extends PIXI.Container { 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) + let bounds = new PIXI.Rectangle(topLeft.x, topLeft.y, bottomRight.x - topLeft.x, bottomRight.y - topLeft.y) tiles._boundsRect = bounds @@ -720,9 +698,6 @@ export class DeepZoomImage extends PIXI.Container { 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 @@ -775,8 +750,7 @@ export class DeepZoomImage extends PIXI.Container { * @param {PIXI.Point} about - point of interaction */ populateTiles(tiles, level, { onlyone = false, about = null } = {}) { - if (tiles.isComplete()) - return + if (tiles.isComplete()) return let referenceCol = -1 let referenceRow = -1 let { centerCol, centerRow, changed } = this.changedTiles(tiles, level) @@ -787,8 +761,7 @@ export class DeepZoomImage extends PIXI.Container { let scaledTileSize = tiles.tileSize * tiles.tileScale referenceCol = Math.floor(refPoint.x / scaledTileSize) referenceRow = Math.floor(refPoint.y / scaledTileSize) - } - else { + } else { referenceCol = centerCol referenceRow = centerRow } @@ -826,17 +799,7 @@ export class DeepZoomImage extends PIXI.Container { 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 - ) + 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] @@ -939,7 +902,6 @@ export class DeepZoomImage extends PIXI.Container { }) } - /** * Destroy tiles in all layers that are no longer needed * @@ -984,8 +946,8 @@ export class DeepZoomImage extends PIXI.Container { } /* Tint all tiles - * @param {number} level - The zoom level of the grid - */ + * @param {number} level - The zoom level of the grid + */ tintTilesBelowLevel(level) { Object.keys(this.tileLayers).forEach(key => { let tiles = this.tileLayers[key] @@ -997,7 +959,7 @@ export class DeepZoomImage extends PIXI.Container { /** * Ensure that the given tiles layer is the topmost one and visible. - * @param {*} tiles + * @param {*} tiles */ bringTilesToFront(tiles) { this.tileContainer.addChild(tiles) @@ -1031,8 +993,7 @@ export class DeepZoomImage extends PIXI.Container { }) if (this.fastLoads == 3) { this.fastLoads = 0 - } - else { + } else { return } } @@ -1060,10 +1021,10 @@ export class DeepZoomImage extends PIXI.Container { } /** - *Activates the textures on the DeepZoomImage. - * - * @memberof DeepZoomImage - */ + *Activates the textures on the DeepZoomImage. + * + * @memberof DeepZoomImage + */ activate() { this.active = true this.destroyTilesAboveLevel(this.currentLevel) @@ -1072,10 +1033,10 @@ export class DeepZoomImage extends PIXI.Container { } /** - *Dectivates the textures on the DeepZoomImage. - * - * @memberof DeepZoomImage - */ + *Dectivates the textures on the DeepZoomImage. + * + * @memberof DeepZoomImage + */ deactivate() { this.active = false this.destroyAllTiles() diff --git a/lib/pixi/deepzoom/loader.js b/lib/pixi/deepzoom/loader.js index 81a5878..594b9a6 100644 --- a/lib/pixi/deepzoom/loader.js +++ b/lib/pixi/deepzoom/loader.js @@ -62,7 +62,7 @@ export class TileLoader { _textureAvailable(url, col, row, texture) { let tile = this.loaded.get(url) if (tile != null) { - console.warn("Tile already loaded") + console.warn('Tile already loaded') tile.unregister() } try { @@ -70,9 +70,8 @@ export class TileLoader { this.loaded.set(url, tile) this.tiles.tileAvailable(tile, col, row, url) } catch (error) { - console.warn("Tile loading error", error) + console.warn('Tile loading error', error) } - } } @@ -82,7 +81,6 @@ export class TileLoader { * Calls the Tiles.tileAvailable method if the texture is available. **/ export class PIXITileLoader extends TileLoader { - constructor(tiles, compression) { super(tiles) this.destroyed = false @@ -124,15 +122,13 @@ export class PIXITileLoader extends TileLoader { /** Load one and only one of the scheduled tiles **/ loadOneTile() { - if (this.destroyed) - return + if (this.destroyed) return this._loadOneTile() } /** Load all scheduled tiles **/ loadAll() { - if (this.destroyed) - return + if (this.destroyed) return this._loadAllTiles() } @@ -143,7 +139,7 @@ export class PIXITileLoader extends TileLoader { try { this.loader.reset() } catch (error) { - console.warn("Error while resetting loader", error) + console.warn('Error while resetting loader', error) } } @@ -162,15 +158,14 @@ export class PIXITileLoader extends TileLoader { let texture = resource.texture let url = resource.url Tile.lateTexture(url, texture) - console.warn("Received resource after destroy", texture) + console.warn('Received resource after destroy', texture) return } try { let [col, row] = this.map.get(resource.url) this._textureAvailable(resource.url, col, row, resource.texture) - } - catch (err) { - console.warn("Texture unavailable: " + err.message) + } catch (err) { + console.warn('Texture unavailable: ' + err.message) } } @@ -216,9 +211,8 @@ export class PIXITileLoader extends TileLoader { if (!this.loaded.has(url)) { let resource = this.loader.resources[url] if (resource) { - console.log("Resource already added", url) - } - else { + console.log('Resource already added', url) + } else { urls.push(url) i += 1 } @@ -237,7 +231,6 @@ export class PIXITileLoader extends TileLoader { * Calls the Tiles.tileAvailable method if the texture is available. **/ export class RequestTileLoader extends TileLoader { - constructor(tiles, compression) { super(tiles) this.compression = compression @@ -255,10 +248,7 @@ export class RequestTileLoader extends TileLoader { xhr.responseType = 'arraybuffer' xhr.onload = e => { let CompressedImage = PIXI.compressedTextures.CompressedImage - let compressed = CompressedImage.loadFromArrayBuffer( - xhr.response, - url - ) + let compressed = CompressedImage.loadFromArrayBuffer(xhr.response, url) let base = new PIXI.BaseTexture(compressed) let texture = new PIXI.Texture(base) this._textureAvailable(url, col, row, texture) @@ -319,20 +309,18 @@ export class RequestTileLoader extends TileLoader { } } - /** * 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 { - constructor(tiles, workerPath) { super(tiles) - let worker = this.worker = new Worker(workerPath) + let worker = (this.worker = new Worker(workerPath)) - worker.onmessage = (event) => { + worker.onmessage = event => { if (event.data.success) { let { url, col, row, buffer } = event.data //console.log("WorkerTileLoader.loaded", url, buffer) @@ -350,7 +338,7 @@ export class WorkerTileLoader extends TileLoader { let url = this.loadQueue.pop() let [col, row] = this.map.get(url) let tile = [col, row, url] - this.worker.postMessage({ command: "load", tiles: [tile] }) + this.worker.postMessage({ command: 'load', tiles: [tile] }) } } @@ -361,16 +349,16 @@ export class WorkerTileLoader extends TileLoader { let [col, row] = this.map.get(url) tiles.push([col, row, url]) } - this.worker.postMessage({ command: "load", tiles }) + this.worker.postMessage({ command: 'load', tiles }) } cancel() { super.cancel() - this.worker.postMessage({ command: "abort" }) + this.worker.postMessage({ command: 'abort' }) } destroy() { - this.worker.postMessage({ command: "abort" }) + this.worker.postMessage({ command: 'abort' }) this.worker.terminate() this.worker = null super.destroy() diff --git a/lib/pixi/deepzoom/tile.js b/lib/pixi/deepzoom/tile.js index 21186bb..79abd6e 100644 --- a/lib/pixi/deepzoom/tile.js +++ b/lib/pixi/deepzoom/tile.js @@ -77,11 +77,10 @@ export default class Tile extends PIXI.Sprite { if (registeredTiles.has(url)) { let tiles = registeredTiles.get(url) tiles.add(this) - if (debug) console.log("Tile.register", url, tiles.size) - } - else { + if (debug) console.log('Tile.register', url, tiles.size) + } else { registeredTiles.set(url, new Set([this])) - if (debug) console.log("Tile.register", url, 1) + if (debug) console.log('Tile.register', url, 1) } } @@ -114,32 +113,31 @@ export default class Tile extends PIXI.Sprite { keptTextures.push({ url: this.url, texture: this.texture }) let opts = { children: true, texture: false, baseTexture: false } - if (debug) console.log("Tile.destroy", registeredTiles.size, opts) + if (debug) console.log('Tile.destroy', registeredTiles.size, opts) super.destroy(opts) while (keptTextures.length > keepTextures) { let { url, texture } = keptTextures.shift() if (Tile.isObsolete(url)) { texture.destroy(true) // Destroy base as well - if (debug) console.log("Destroying texture and baseTexture", url) + if (debug) console.log('Destroying texture and baseTexture', url) } } - } - else { + } else { // No longer registered and not pending - if (count <= 0) { // && !Tile.isPending(this.url) + if (count <= 0) { + // && !Tile.isPending(this.url) let opts = { children: true, texture: true, baseTexture: true } super.destroy(opts) - if (debug) console.log("Tile.destroy", registeredTiles.size, opts) - } - else { + if (debug) console.log('Tile.destroy', registeredTiles.size, opts) + } else { let opts = { children: true, texture: false, baseTexture: false } - if (debug) console.log("Tile.destroy", registeredTiles.size, opts) + if (debug) console.log('Tile.destroy', registeredTiles.size, opts) super.destroy(opts) } if (this.parent != null) { // UO: Emit warning and remove - console.warn("Destroying tile with parent. Hiding instead") + console.warn('Destroying tile with parent. Hiding instead') this.visible = false } } @@ -172,10 +170,9 @@ export default class Tile extends PIXI.Sprite { renderWebGL(renderer) { try { super.renderWebGL(renderer) - } - catch (e) { + } catch (e) { // We want persistent logging here - Logging.error("Error in Tile.renderWebGL: " + e.message) + Logging.error('Error in Tile.renderWebGL: ' + e.message) } } @@ -201,15 +198,14 @@ export default class Tile extends PIXI.Sprite { } } } - if (count > 0) - console.log("Sweeping textures", count) + if (count > 0) console.log('Sweeping textures', count) } } /** * Texture received too late. We do not need it. - * @param {*} url - * @param {*} texture + * @param {*} url + * @param {*} texture */ static lateTexture(url, texture) { lateTextures.set(url, texture) diff --git a/lib/pixi/deepzoom/tileloader.js b/lib/pixi/deepzoom/tileloader.js index 88215b1..740938e 100644 --- a/lib/pixi/deepzoom/tileloader.js +++ b/lib/pixi/deepzoom/tileloader.js @@ -4,50 +4,48 @@ const batchSize = 8 const debug = false function load() { - - while(loadQueue.length>0 && pendingRequests.size 0 && pendingRequests.size < batchSize) { let tile = loadQueue.shift() let [col, row, url] = tile let xhr = new XMLHttpRequest() xhr.responseType = 'arraybuffer' - xhr.onload = (event) => { + xhr.onload = event => { pendingRequests.delete(url) let buffer = xhr.response - postMessage({ success: true, url, col, row, buffer}, [buffer]) + postMessage({ success: true, url, col, row, buffer }, [buffer]) } - xhr.onerror = (event) => { + xhr.onerror = event => { pendingRequests.delete(url) let buffer = null - postMessage({ success: false, url, col, row, buffer}) + postMessage({ success: false, url, col, row, buffer }) } xhr.open('GET', url, true) xhr.send() pendingRequests.set(url, xhr) } - if (loadQueue.length>0) - setTimeout(load, 1000/120) + if (loadQueue.length > 0) setTimeout(load, 1000 / 120) else { if (debug) console.log('Ready') } } -self.onmessage = (event) => { +self.onmessage = event => { let msg = event.data - switch(msg.command) { + switch (msg.command) { case 'load': - for(let tile of msg.tiles) { + for (let tile of msg.tiles) { loadQueue.push(tile) } load() break case 'abort': loadQueue = [] - for(let xhr of pendingRequests.values()) { + for (let xhr of pendingRequests.values()) { xhr.abort() } if (debug) console.log('Abort') break default: - console.warn('Unknown worker command: ' + msg.command) + console.warn('Unknown worker command: ' + msg.command) } } diff --git a/lib/pixi/deepzoom/tiles.js b/lib/pixi/deepzoom/tiles.js index c0bab2f..c940fe2 100644 --- a/lib/pixi/deepzoom/tiles.js +++ b/lib/pixi/deepzoom/tiles.js @@ -1,6 +1,5 @@ import { Colors } from '../../utils.js' -import { WorkerTileLoader, PIXITileLoader } from "./loader.js" - +import { WorkerTileLoader, PIXITileLoader } from './loader.js' /** * A layer of tiles that represents a zoom level of a DeepZoomImage as a grid @@ -18,18 +17,7 @@ import { WorkerTileLoader, PIXITileLoader } from "./loader.js" * @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 - ) { + constructor(level, view, scale, cols, rows, width, height, tileSize, overlap, fadeInTime = 0.33) { super() this.debug = false this.showGrid = false @@ -66,8 +54,6 @@ export class Tiles extends PIXI.Container { this.destroyed = false } - - /** Tests whether all tiles are loaded. **/ isComplete() { return this.cols * this.rows === this.children.length @@ -106,19 +92,19 @@ export class Tiles extends PIXI.Container { 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 + this.level + + ' scale: ' + + this.scale.x + + ' cols: ' + + this.cols + + ' rows: ' + + this.rows + + ' w: ' + + this.pixelWidth + + ' h: ' + + this.pixelHeight + + ' tsize:' + + this.tileSize ) } @@ -266,8 +252,8 @@ export class Tiles extends PIXI.Container { } /* Destroys the tiles which are not with the bounds of the app to free - * memory. - **/ + * memory. + **/ destroyTiles(quadTrees) { let count = 0 for (let [url, tile] of this.available.entries()) { @@ -276,8 +262,7 @@ export class Tiles extends PIXI.Container { count += 1 } } - if (count && this.debug) - console.log('destroyTiles', this.level, count) + if (count && this.debug) console.log('destroyTiles', this.level, count) } destroyUnneededTiles() { @@ -288,8 +273,7 @@ export class Tiles extends PIXI.Container { count += 1 } } - if (count && this.debug) - console.log('destroyUnneededTiles', this.level, count) + if (count && this.debug) console.log('destroyUnneededTiles', this.level, count) } highlightInfos() {