diff --git a/dist/iwmlib.pixi.js b/dist/iwmlib.pixi.js index 9af57e2..c3997c7 100644 --- a/dist/iwmlib.pixi.js +++ b/dist/iwmlib.pixi.js @@ -2662,7 +2662,6 @@ // badge //-------------------- if (this.badge) { - this.removeChild(this.badge); const width = this.width; const height = this.height; @@ -3231,6 +3230,7 @@ this.addChildAt(background, 0); this.__initWidth = this.container.width; + this.__initHeight = this.container.height; } return this @@ -3401,7 +3401,6 @@ onMove(event) { if (this.__dragging) { this.capture(event); - if (this.opts.orientation === 'horizontal') { this.container.position.x = event.data.global.x + this.__delta.x; } else { @@ -3426,20 +3425,34 @@ const throwProps = { x: { velocity: 'auto' }, y: { velocity: 'auto' } }; if (this.opts.orientation === 'horizontal') { - const distanceToLeft = this.container.x; - const distanceToRight = this.opts.maxWidth - this.container.x - this.__initWidth; - if (distanceToLeft > 0 && distanceToLeft > distanceToRight) { + if (this.__initWidth > this.opts.maxWidth) { + // stack! + const distanceToLeft = this.container.x; + const distanceToRight = this.opts.maxWidth - this.container.x - this.__initWidth; + + if (distanceToLeft > 0) { + throwProps.x.end = 0; + } else if (distanceToRight > 0) { + throwProps.x.end = this.opts.maxWidth - this.__initWidth; + } + } else { + // just magnetize throwProps.x.end = 0; - } else if (distanceToRight > 0 && distanceToRight > distanceToLeft) { - throwProps.x.end = this.opts.maxWidth - this.__initWidth; } } else { - const distanceToTop = this.container.y; - const distanceToBottom = this.opts.maxHeight - this.container.y - this.container.height; - if (distanceToTop > 0 && distanceToTop > distanceToBottom) { + if (this.__initHeight > this.opts.maxHeight) { + // stack! + const distanceToTop = this.container.y; + const distanceToBottom = this.opts.maxHeight - this.container.y - this.container.height; + + if (distanceToTop > 0) { + throwProps.y.end = 0; + } else if (distanceToBottom > 0) { + throwProps.y.end = this.opts.maxHeight - this.__initHeight; + } + } else { + // just magnetize throwProps.y.end = 0; - } else if (distanceToBottom > 0 && distanceToBottom > distanceToTop) { - throwProps.y.end = this.opts.maxHeight - this.container.height; } } @@ -3503,7 +3516,7 @@ } /** - * + * @private */ stack() { if (this.opts.maxWidth) { @@ -3514,7 +3527,7 @@ } /** - * + * @private */ _stackHorizontal() { const sorted = []; @@ -3571,7 +3584,7 @@ } /** - * + * @private */ _stackVertical() { const sorted = []; @@ -8442,11 +8455,10 @@ 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); } } @@ -8479,32 +8491,31 @@ 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; } } @@ -8537,10 +8548,9 @@ 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); } } @@ -8566,15 +8576,14 @@ } } } - 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); @@ -8660,7 +8669,7 @@ _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 { @@ -8668,9 +8677,8 @@ 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); } - } } @@ -8680,7 +8688,6 @@ * Calls the Tiles.tileAvailable method if the texture is available. **/ class PIXITileLoader extends TileLoader { - constructor(tiles, compression) { super(tiles); this.destroyed = false; @@ -8722,15 +8729,13 @@ /** 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(); } @@ -8741,7 +8746,7 @@ try { this.loader.reset(); } catch (error) { - console.warn("Error while resetting loader", error); + console.warn('Error while resetting loader', error); } } @@ -8760,15 +8765,14 @@ 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); } } @@ -8814,9 +8818,8 @@ 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; } @@ -8829,20 +8832,18 @@ } } - /** * 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. **/ 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) @@ -8860,7 +8861,7 @@ 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] }); } } @@ -8871,16 +8872,16 @@ 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(); @@ -8903,18 +8904,7 @@ * @param {number} fadeInTime - time needed to fade in tiles if TweenLite is set **/ 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; @@ -8951,8 +8941,6 @@ this.destroyed = false; } - - /** Tests whether all tiles are loaded. **/ isComplete() { return this.cols * this.rows === this.children.length @@ -8991,19 +8979,19 @@ 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 ); } @@ -9151,8 +9139,8 @@ } /* 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()) { @@ -9161,8 +9149,7 @@ count += 1; } } - if (count && this.debug) - console.log('destroyTiles', this.level, count); + if (count && this.debug) console.log('destroyTiles', this.level, count); } destroyUnneededTiles() { @@ -9173,8 +9160,7 @@ count += 1; } } - if (count && this.debug) - console.log('destroyUnneededTiles', this.level, count); + if (count && this.debug) console.log('destroyUnneededTiles', this.level, count); } highlightInfos() { @@ -9256,15 +9242,14 @@ // 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; @@ -9447,15 +9432,7 @@ 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)); } @@ -9495,12 +9472,7 @@ **/ 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 @@ -9539,7 +9511,6 @@ } } - /** * 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 @@ -9557,7 +9528,7 @@ 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 = '', @@ -9572,9 +9543,7 @@ 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; @@ -9764,7 +9733,7 @@ **/ 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. @@ -9779,7 +9748,6 @@ 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. @@ -9849,7 +9817,7 @@ } 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) { @@ -9887,11 +9855,7 @@ 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; @@ -9936,9 +9900,6 @@ 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 @@ -9991,8 +9952,7 @@ * @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); @@ -10003,8 +9963,7 @@ let scaledTileSize = tiles.tileSize * tiles.tileScale; referenceCol = Math.floor(refPoint.x / scaledTileSize); referenceRow = Math.floor(refPoint.y / scaledTileSize); - } - else { + } else { referenceCol = centerCol; referenceRow = centerRow; } @@ -10042,17 +10001,7 @@ 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]; @@ -10155,7 +10104,6 @@ }); } - /** * Destroy tiles in all layers that are no longer needed * @@ -10200,8 +10148,8 @@ } /* 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]; @@ -10213,7 +10161,7 @@ /** * Ensure that the given tiles layer is the topmost one and visible. - * @param {*} tiles + * @param {*} tiles */ bringTilesToFront(tiles) { this.tileContainer.addChild(tiles); @@ -10247,8 +10195,7 @@ }); if (this.fastLoads == 3) { this.fastLoads = 0; - } - else { + } else { return } } @@ -10276,10 +10223,10 @@ } /** - *Activates the textures on the DeepZoomImage. - * - * @memberof DeepZoomImage - */ + *Activates the textures on the DeepZoomImage. + * + * @memberof DeepZoomImage + */ activate() { this.active = true; this.destroyTilesAboveLevel(this.currentLevel); @@ -10288,10 +10235,10 @@ } /** - *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/buttongroup.js b/lib/pixi/buttongroup.js index 841619a..76ec22d 100644 --- a/lib/pixi/buttongroup.js +++ b/lib/pixi/buttongroup.js @@ -292,6 +292,7 @@ export default class ButtonGroup extends PIXI.Container { this.addChildAt(background, 0) this.__initWidth = this.container.width + this.__initHeight = this.container.height } return this @@ -462,7 +463,6 @@ export default class ButtonGroup extends PIXI.Container { onMove(event) { if (this.__dragging) { this.capture(event) - if (this.opts.orientation === 'horizontal') { this.container.position.x = event.data.global.x + this.__delta.x } else { @@ -487,20 +487,34 @@ export default class ButtonGroup extends PIXI.Container { const throwProps = { x: { velocity: 'auto' }, y: { velocity: 'auto' } } if (this.opts.orientation === 'horizontal') { - const distanceToLeft = this.container.x - const distanceToRight = this.opts.maxWidth - this.container.x - this.__initWidth - if (distanceToLeft > 0 && distanceToLeft > distanceToRight) { + if (this.__initWidth > this.opts.maxWidth) { + // stack! + const distanceToLeft = this.container.x + const distanceToRight = this.opts.maxWidth - this.container.x - this.__initWidth + + if (distanceToLeft > 0) { + throwProps.x.end = 0 + } else if (distanceToRight > 0) { + throwProps.x.end = this.opts.maxWidth - this.__initWidth + } + } else { + // just magnetize throwProps.x.end = 0 - } else if (distanceToRight > 0 && distanceToRight > distanceToLeft) { - throwProps.x.end = this.opts.maxWidth - this.__initWidth } } else { - const distanceToTop = this.container.y - const distanceToBottom = this.opts.maxHeight - this.container.y - this.container.height - if (distanceToTop > 0 && distanceToTop > distanceToBottom) { + if (this.__initHeight > this.opts.maxHeight) { + // stack! + const distanceToTop = this.container.y + const distanceToBottom = this.opts.maxHeight - this.container.y - this.container.height + + if (distanceToTop > 0) { + throwProps.y.end = 0 + } else if (distanceToBottom > 0) { + throwProps.y.end = this.opts.maxHeight - this.__initHeight + } + } else { + // just magnetize throwProps.y.end = 0 - } else if (distanceToBottom > 0 && distanceToBottom > distanceToTop) { - throwProps.y.end = this.opts.maxHeight - this.container.height } } @@ -564,7 +578,7 @@ export default class ButtonGroup extends PIXI.Container { } /** - * + * @private */ stack() { if (this.opts.maxWidth) { @@ -575,7 +589,7 @@ export default class ButtonGroup extends PIXI.Container { } /** - * + * @private */ _stackHorizontal() { const sorted = [] @@ -632,7 +646,7 @@ export default class ButtonGroup extends PIXI.Container { } /** - * + * @private */ _stackVertical() { const sorted = []