Added path to gulpfile.

gulpfile.js

@@ -50,9 +50,12 @@ function preload() {
 }
 
 function prettify() {
-    return src(['./lib/*.js', './lib/card/*.js', './lib/pixi/*.js', '!./lib/bootstrap.babel.js'], {
+    return src(
-        base: './lib'
+        ['./lib/*.js', './lib/card/*.js', './lib/pixi/*.js', './lib/pixi/deepzoom/*.js', '!./lib/bootstrap.babel.js'],
-    })
+        {
+            base: './lib'
+        }
+    )
         .pipe(
             prettier({
                 singleQuote: true,

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 = this.urlTileTemplate || '{path}/{level}/{column}_{row}.{format}'
-            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
+     *  of the image. Note that this includes the level 0, i.e. 0 ... 4
-    * means that 5 levels exist.
+     * 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(
+            console.log(' ' + i + ' -> ' + this.getScale(i) + ' [' + this.dimensions(i) + ']')
-                ' ' +
-                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 (
+        return this.nw === null && this.ne === null && this.sw === null && this.se === null
-            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
+        this.resolution = highResolution ? Math.round(window.devicePixelRatio) : 1
-            ? 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(
+        let bounds = new PIXI.Rectangle(topLeft.x, topLeft.y, bottomRight.x - topLeft.x, bottomRight.y - topLeft.y)
-            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())
+        if (tiles.isComplete()) return
-            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(
+        let tiles = new Tiles(level, this, invScale, cols, rows, w, h, this.info.tileSize, this.info.overlap)
-            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.
+     *Activates the textures on the DeepZoomImage.
-   *
+     *
-   * @memberof 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.
+     *Dectivates the textures on the DeepZoomImage.
-   *
+     *
-   * @memberof DeepZoomImage
+     * @memberof DeepZoomImage
-   */
+     */
     deactivate() {
         this.active = false
         this.destroyAllTiles()

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)
+        if (this.destroyed) return
-            return
         this._loadOneTile()
     }
 
     /** Load all scheduled tiles **/
     loadAll() {
-        if (this.destroyed)
+        if (this.destroyed) return
-            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) {
-        catch (err) {
+            console.warn('Texture unavailable: ' + err.message)
-            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)
+                        console.log('Resource already added', url)
-                    }
+                    } else {
-                    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(
+                let compressed = CompressedImage.loadFromArrayBuffer(xhr.response, url)
-                    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()

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)
+            if (debug) console.log('Tile.register', url, tiles.size)
-        }
+        } else {
-        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)
+                if (debug) console.log('Tile.destroy', registeredTiles.size, opts)
-            }
+            } else {
-            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)
+            if (count > 0) console.log('Sweeping textures', count)
-                console.log("Sweeping textures", count)
         }
     }
 
     /**
      * Texture received too late. We do not need it.
-     * @param {*} url 
+     * @param {*} url
-     * @param {*} texture 
+     * @param {*} texture
      */
     static lateTexture(url, texture) {
         lateTextures.set(url, texture)

lib/pixi/deepzoom/tileloader.js

@@ -4,50 +4,48 @@ const batchSize = 8
 const debug = false
 
 function load() {
-  
+    while (loadQueue.length > 0 && pendingRequests.size < batchSize) {
-    while(loadQueue.length>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)
+    if (loadQueue.length > 0) setTimeout(load, 1000 / 120)
-        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)
     }
 }

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(
+    constructor(level, view, scale, cols, rows, width, height, tileSize, overlap, fadeInTime = 0.33) {
-        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 +
+                    this.level +
-                ' scale: ' +
+                    ' scale: ' +
-                this.scale.x +
+                    this.scale.x +
-                ' cols: ' +
+                    ' cols: ' +
-                this.cols +
+                    this.cols +
-                ' rows: ' +
+                    ' rows: ' +
-                this.rows +
+                    this.rows +
-                ' w: ' +
+                    ' w: ' +
-                this.pixelWidth +
+                    this.pixelWidth +
-                ' h: ' +
+                    ' h: ' +
-                this.pixelHeight +
+                    this.pixelHeight +
-                ' tsize:' +
+                    ' tsize:' +
-                this.tileSize
+                    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)
+        if (count && this.debug) console.log('destroyTiles', this.level, count)
-            console.log('destroyTiles', this.level, count)
     }
 
     destroyUnneededTiles() {
@@ -288,8 +273,7 @@ export class Tiles extends PIXI.Container {
                 count += 1
             }
         }
-        if (count && this.debug)
+        if (count && this.debug) console.log('destroyUnneededTiles', this.level, count)
-            console.log('destroyUnneededTiles', this.level, count)
     }
 
     highlightInfos() {