IWMBrowser/iwmlib
IWMBrowser
/
iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity

Added path to gulpfile.

This commit is contained in:
Sebastian Kupke 2019-08-06 15:34:57 +02:00
parent a42427f987
commit 141d27d4f1
6 changed files with 96 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
gulpfile.js
View File

@ -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,

91
lib/pixi/deepzoom/image.js
View File

@ -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()

46
lib/pixi/deepzoom/loader.js
View File

@ -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()

38
lib/pixi/deepzoom/tile.js
View File

@ -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)

24
lib/pixi/deepzoom/tileloader.js
View File

@ -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)
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)
}
}

54
lib/pixi/deepzoom/tiles.js
View File

@ -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() {