import { Capabilities } from '../../capabilities.js' import { Points } from '../../utils.js' import Tile from './tile.js' import { Tiles } from './tiles.js' function isEven(n) { return n % 2 == 0 } /** * A utility class that holds information typically provided by DZI files, i.e. * height and width of the overall image, overlap, and image type. * * @constructor * @param {obj} attrs - A JSON-Object holding the listed keys and values * @example * { * "tileSize": 1024, * "format": "jpeg", * "overlap": 1, * "height": 4794, * "width": 4095, * "clip": { "minLevel": 12, "maxLevel": 20, "startCol": 301436, "startRow": 354060 }, * // optional: minLevel and maxLevel define the level bounds * // startCol: first col at maxLevel * // startRow: first row at maxLevel * "path": "var/Vermeer/Vermeer_files", * "type": "dzi", // optional: dzi (default) or map * "urlTileTemplate": "{path}/{level}/{column}/{row}.{format}" * // optional: {path}/{level}/{column}_{row}.{format} (default) or * // a template String with the format of the URL * } */ export class DeepZoomInfo { constructor(attrs) { for (let key in attrs) { this[key] = attrs[key] } this.maxLevel = 0 // The highest level number, typically corresponds to the // 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.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. **/ numLevels() { let maxDimension = Math.max(this.width, this.height) let boundary = this.type === 'dzi' ? 1 : this.tileSize let numLevels = 0 while (maxDimension >= boundary) { maxDimension /= 2 numLevels++ } return numLevels } /** Computes the scale at the given level. * @param {number} level - The level of the wanted layer * @returns {number} scale **/ getScale(level) { let scale = 1 if (this.type === 'dzi') { scale = Math.pow(0.5, this.maxLevel - level + 1) } else { scale = Math.pow(0.5, this.maxLevel - level) } return scale } /** Computes the scaled width and height of the given level. * @param {number} level - The level of the wanted layer * @returns {array} size - The width and height **/ getDimensions(level) { let scale = this.getScale(level) let w = Math.ceil(this.width * scale) let h = Math.ceil(this.height * scale) return [w, h] } /** Computes the number of cols and rows of tiles. * @param {number} level - The level of the wanted layer * @returns {array} size - The cols and rows **/ getNumTiles(level) { let dim = this.getDimensions(level) let cols = Math.ceil(dim[0] / this.tileSize) let rows = Math.ceil(dim[1] / this.tileSize) if (this.clip) { let rest = this.rests[level] if (rest) { if (rest.restCol) { cols += 1 } if (rest.restRows) { rows += 1 } } } return [cols, rows] } setupDimensions(loadBaseImage = false) { /** Setup instance variables and load the base image, i.e. the largest image that can be represented as a single tile. @private **/ let ww = this.width let hh = this.height let scale = 1.0 let level = 0 let single = 0 const tsize = this.tileSize if (this.clip) { this.baseLevel = this.clip.minLevel this.maxLevel = this.clip.maxLevel this.baseImage = null this.size = this.getDimensions(this.baseLevel) this.offsets = {} this.rests = {} let startCol = this.clip.startCol let startRow = this.clip.startRow let floatStartCol = startCol let floatStartRow = startRow for (let i = this.maxLevel; i >= this.baseLevel; i--) { this.offsets[i] = { startCol, startRow } let restCol = floatStartCol % 1 let restRow = floatStartRow % 1 this.rests[i] = { restCol, restRow } startCol = Math.floor(startCol / 2) startRow = Math.floor(startRow / 2) floatStartCol /= 2 floatStartRow /= 2 } } else { const boundary = this.type === 'dzi' ? 1.0 : tsize while (ww > boundary && hh > boundary) { if (ww >= tsize && hh >= tsize) { single += 1 } scale = scale / 2.0 ww = Math.ceil(this.width * scale) hh = Math.ceil(this.height * scale) level += 1 } this.baseLevel = level - single this.maxLevel = this.numLevels() - 1 this.baseURL = this.urlForTile(this.baseLevel, 0, 0, false) if (loadBaseImage) { this.imageForURL(this.baseURL, e => { this.size = [e.target.naturalWidth, e.target.naturalHeight] this.baseImage = e.target }) } else { this.baseImage = null this.size = this.getDimensions(this.baseLevel) } } } get maxLoadableLevel() { if (this.clip) { return this.maxLevel } return this.type === 'dzi' ? this.maxLevel : this.maxLevel } /** Computes the url for the given level, column and and row. * @param {number} level - The level of the wanted layer * @param {number} column - The column of the tile * @param {number} row - The row of the tile * @returns {string} url **/ urlForTile(level, column, row, compressed = true) { let format = this.format if (compressed && this.compression) { let supported = Capabilities.isIOS ? 'pvr' : 'dds' if (this.compression.indexOf(supported) >= 0) { format = supported } } if (this.clip) { let offset = this.offsets[level] if (offset) { let { startCol, startRow } = offset column += startCol row += startRow } } let url = this.urlTileTemplate .replace(/\{path\}/g, this.path) .replace(/\{level\}/g, level) .replace(/\{row\}/g, row) .replace(/\{column\}/g, column) .replace(/\{format\}/g, format) return url } /** Loads the image for the given url and executes a callback function on completion. * @param {string} url - The url of the tile * @param {function} complete - The callback function * @returns {Image} obj **/ imageForURL(url, complete) { let img = new Image() img.onload = complete.bind(this) img.src = url return img } /** Computes the columns and rows as well as scaled width and height. * @param {number} level - The level of the wanted layer * @returns {array} [cols, rows, width, height] **/ dimensions(level) { let dim = this.getDimensions(level) let tiles = this.getNumTiles(level) return [tiles[0], tiles[1], dim[0], dim[1]] } 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(this.urlForTile(this.baseLevel, 0, 0)) } } /** * A utility class that describes a quad tree of tiles. Each tile on a given * level has up to four corresponding tiles on the next level. A TileQuadNode * uses the attributes nw (i.e. northwest), ne, sw, se to link to the * quad nodes on the next level. The previous attributes links to the quad * one level below that holds the given quad as nw, ne, sw, or se. * We use this node class because we need a representation of tiles that are * needed but not loaded yet to compute tiles which can be abandoned to reduce * the memory pressure. * * @constructor * @param {level} Number - The level the quad node belongs to * @param {col} Number - The col of the quad * @param {row} Number - The level the quad node belongs to * @param {url} String - The level the quad node belongs to */ class TileQuadNode { constructor(level, col, row, url) { this.level = level this.col = col this.row = row this.url = url this.nw = null this.ne = null this.sw = null this.se = null this.previous = null } /** Return True if this node has no successors and can be used as an indicator of tiles to free. **/ noQuads() { if (this.previous === null) return false return this.nw === null && this.ne === null && this.sw === null && this.se === null } /** Unlink the given quad node * @param {node} TileQuadNode - The TileQuadNode to remove **/ unlink(node) { if (this.nw === node) this.nw = null if (this.ne === node) this.ne = null if (this.sw === node) this.sw = null if (this.se === node) this.se = null } /** Link this quad node to the given previous node. Use the north * and west flags to address nw, ne, sw, and se. * @param {node} TileQuadNode - The TileQuadNode to remove * @param {north} Boolean - Link to north (true) or south (false) * @param {west} Boolean - Link to west (true) or east (false) **/ link(north, west, previous) { this.previous = previous if (north) { if (west) { previous.nw = this } else { previous.ne = this } } else { if (west) { previous.sw = this } else { previous.se = this } } } } /** * 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 * even huge pictures (up to gigapixel-images) can be zoomed instantaneously, * since the tiles at smaller levels are scaled immediately and overloaded by * more detailed tiles at the larger level as fast as possible. * @constructor * @param {DeepZoomInfo} deepZoomInfo - Information extracted from a JSON-Object */ export class DeepZoomImage extends PIXI.Container { constructor( deepZoomInfo, { debug = false, shadow = false, center = false, world = null, // Defines the world bounds the images lives in highResolution = true, autoLoadTiles = true, useWorker = '', minimumLevel = 0, alpha = 1, app = window.app } = {} ) { super() this.app = app this.debug = debug this.shadow = shadow this.world = world this.useWorker = useWorker this.resolution = highResolution ? Math.round(window.devicePixelRatio) : 1 this.alpha = alpha this.fastLoads = 0 this.active = true this.autoLoadTiles = autoLoadTiles this.minimumLevel = minimumLevel this.quadTrees = new Map() // url as keys, TileQuadNodes as values this.setup(deepZoomInfo, center) } get point() { if (this._point == null) { let graphics = new PIXI.Graphics() graphics.lineStyle(2, 0x00ff00) graphics.drawCircle(0, 0, 2) graphics.interactive = false this._point = graphics } return this._point } /** Reads the DeepZoomInfo object and initializes all tile layers. * Called by the constructor. * Creates the sprite for the loaded texture and add the sprite to the tile * layer. * @param {Object} deepZoomInfo - the DeepZoomInfo instance * @param {boolean} center - If true ensures that the pivot is set to the center **/ setup(deepZoomInfo, center) { this.info = deepZoomInfo this.interactive = true this.tileLayers = {} this._foreground = null this.tileContainer = new PIXI.Container() this.tileContainer.interactive = false let [w, h] = this.baseSize if (this.shadow) { this.filters = [new PIXI.filters.DropShadowFilter(45, 3)] } this.addChild(this.tileContainer) if (deepZoomInfo.clip) { let mask = new PIXI.Graphics() mask.beginFill(1, 1) mask.drawRect(0, 0, w, h) mask.endFill() this.mask = mask mask.alpha = 0 this.addChild(mask) this.minimumLevel = deepZoomInfo.baseLevel } this.currentLevel = Math.max(this.minimumLevel, deepZoomInfo.baseLevel) //console.log("autoLoadTiles", this.autoLoadTiles) if (this.autoLoadTiles) { this.setupTiles(center) } } /** Default setup method for tiles. Loads all tiles of the current level. Can be overwritten in subclasses. @param {boolean} center - If true ensures that the pivot is set to the center **/ setupTiles(center = false) { // First load background tile let tiles = this.ensureAllTiles(this.currentLevel) if (center) { this.pivot.set(w / 2, h / 2) } let scaleLevel = this.levelForScale(1) this.ensureAllTiles(scaleLevel) } removeTileQuadNode(level, col, row, url) { if (this.quadTrees.has(url)) { let quad = this.quadTrees.get(url) this.tileQuadRemoved(quad) this.quadTrees.delete(url) } } addTileQuadNode(level, col, row, url) { if (this.quadTrees.has(url)) return this.quadTrees.get(url) let quad = new TileQuadNode(level, col, row, url) this.quadTrees.set(url, quad) this.tileQuadAdded(quad) return quad } tileQuadRemoved(quad) { let below = quad.previous // if (this.debug) console.log("tileQuadRemoved", quad) if (below) { below.unlink(quad) if (below.noQuads()) { if (this.debug) console.log('Removed tile below') let levelBelow = quad.level - 1 if (levelBelow < this.minimumLevel) return let c = Math.floor(quad.col / 2) let r = Math.floor(quad.row / 2) let urlBelow = this.info.urlForTile(levelBelow, c, r) if (this.quadTrees.has(urlBelow)) { this.removeTileQuadNode(levelBelow, c, r, urlBelow) } } } } tileQuadAdded(quad) { let levelBelow = quad.level - 1 if (levelBelow < this.minimumLevel) return //if (this.debug) console.log("tileQuadAdded", quad) let c = Math.floor(quad.col / 2) let r = Math.floor(quad.row / 2) let urlBelow = this.info.urlForTile(levelBelow, c, r) let below = null if (!this.quadTrees.has(urlBelow)) { below = this.addTileQuadNode(levelBelow, c, r, urlBelow) quad.link(isEven(quad.row), isEven(quad.col), below) } } /** Returns the tile layer level that corresponds to the given scale. * @param {number} scale - the scale factor **/ levelForScale(scale) { let level = Math.round(Math.log2(scale * this.resolution)) // Math.floor(Math.log2(event.scale))+1 let newLevel = this.info.baseLevel + Math.max(level, 0) return Math.min(newLevel, this.info.maxLoadableLevel) } /** Returns the tile layer level that corresponds to the given scale. * @param {number} scale - the scale factor **/ levelAndAlphaForScale(scale) { let value = Math.log2(scale * this.resolution) let level = Math.round(value) let newLevel = this.info.baseLevel + Math.max(level, 0) return { level: Math.min(newLevel, this.info.maxLoadableLevel), alpha: value - level } } /** Adds a tile layer to the DeepZoomImage. * @param {string} key - the access key * @param {Tiles} tiles - the tile layer object **/ addTiles(key, tiles) { if (key in this.tileLayers) { console.warn('Tiles already availabl', key) } this.tileContainer.addChild(tiles) this.tileLayers[key] = tiles } destroyTiles(key) { let tiles = this.tileLayers[key] this.tileContainer.removeChild(tiles) tiles.destroy() delete this.tileLayers[key] } /** Getter for PIXI.Container foreground layer. * Adds a PIXI.Container if necessary. **/ get foreground() { if (this._foreground == null) { this._foreground = new PIXI.Container() this.addChild(this._foreground) } return this._foreground } /** Getter for the DeepZoomInfo base level size. **/ get baseSize() { return this.info.getDimensions(this.info.baseLevel) } /** Getter for the current scaled size in pixels. **/ get pixelSize() { let [w, h] = this.baseSize return [w * this.scale.x, h * this.scale.y] } /** Getter for the max scale factor. **/ get maxScale() { let delta = this.info.maxLevel - this.info.baseLevel return (Math.pow(2, delta) / this.resolution) * 2 } /** Getter for the current width. **/ get width() { return this.pixelSize[0] } /** Getter for the current height. **/ get height() { 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. */ get hitArea() { // Defining the hitArea resulted hitting the scatter in masked area // when a mask was used (@Tüsch[submaps]). Removing the hitArea() altogether // broke the interaction in other projects (@googleart). // Fix: When masked, the hitArea is ignored by returning null. // TODO: test if childs are hittested, without setting interactiveChildren. // Opel, 03-05-2018 if (this.mask) { return null } return this } /* Overrides PIXI.Container.contains() * Allows to optimize the hit testing. */ contains(x, y) { let [w, h] = this.baseSize return x >= 0 && x <= w && y >= 0 && y <= h } /** Overrides PIXI.Container._calculateBounds() * Only considers the base size and reduces the calculation to a single * rect. */ _calculateBounds() { let [w, h] = this.baseSize this._bounds.addFrame(this.transform, 0, 0, w, h) } /** Overrides PIXI.Container.calculateBounds() * Skips the children and only considers the deep zoom base size. Calls * the also overwritten _calculateBounds method. */ calculateBounds() { this._bounds.clear() this._calculateBounds() this._lastBoundsID = this._boundsID } /** Returns a single sprite that can be used a thumbnail representation of * large images. * @return {Sprite} sprite - A sprite with a single tile texture */ thumbnail() { return new PIXI.Sprite.from(this.info.baseURL) } /** Returns a list of all tiles of a given level. * @param {Tiles} tiles - the grid of tiles * @param {number} level - The zoom level of the grid * @return {Array[]} - An array of [url, col, row] arrays **/ allTiles(tiles, level) { let result = [] for (let col = 0; col < tiles.cols; col++) { for (let row = 0; row < tiles.rows; row++) { let url = this.info.urlForTile(level, col, row) result.push([url, col, row]) } } return result } worldBounds() { 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) { let bounds = this.world.bounds let x = Math.max(-bounds.width, bounds.x) let y = Math.max(-bounds.height, bounds.y) let width = Math.min(viewBounds.width, bounds.width) let height = Math.min(viewBounds.height, bounds.height) //console.log("worldBounds new", { x, y, width, height }) return { x, y, width, height } } //console.log("worldBounds old", viewBounds) return viewBounds } /** Loads all tiles that are needed to fill the app bounds. * @param {Tiles} tiles - the grid of tiles * @param {number} level - The zoom level of the grid * @param {boolean} debug * @return {Array[]} - An array of [url, col, row] arrays */ neededTiles(tiles, level, debug = false) { let needed = [] let tsize = tiles.tileSize let worldBounds = this.worldBounds() let maxWidth = worldBounds.width let maxHeight = worldBounds.height let pointInWindow = new PIXI.Point() let worldTopLeft = new PIXI.Point(worldBounds.x, worldBounds.y) let worldBottomRight = new PIXI.Point(worldBounds.x + maxWidth, worldBounds.y + maxHeight) let worldCenter = new PIXI.Point(worldBounds.x + maxWidth / 2, worldBounds.y + maxHeight / 2) let tilesCenter = tiles.toLocal(worldCenter) 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) tiles._boundsRect = bounds /* UO: we need a toLocal call here since the transform may need an update which is guaranteed by the toLocal method. */ let centerCol = Math.floor(tilesCenter.x / tsize) let centerRow = Math.floor(tilesCenter.y / tsize) // Expand because we want to test for included centers bounds.x -= tsize / 2 bounds.y -= tsize / 2 bounds.width += tsize bounds.height += tsize try { let maxTilesWidth = Math.ceil(maxWidth / tsize) let maxTilesHeight = Math.ceil(maxHeight / tsize) maxTilesWidth += 2 maxTilesHeight += 2 let startCol = Math.max(0, centerCol - maxTilesWidth) let endCol = Math.min(tiles.cols, centerCol + maxTilesWidth) let startRow = Math.max(0, centerRow - maxTilesHeight) let endRow = Math.min(tiles.rows, centerRow + maxTilesHeight) for (let col = startCol; col < endCol; col++) { let cx = (col + 0.5) * tsize for (let row = startRow; row < endRow; row++) { let cy = (row + 0.5) * tsize let tileCenter = new PIXI.Point(cx, cy) if (bounds.contains(tileCenter.x, tileCenter.y)) { let url = this.info.urlForTile(level, col, row) needed.push([url, col, row]) } } } } catch (error) { console.warn(error.message) } 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 * @return {object} - An object with the keys added and removed which values are [url, col, row] arrays */ changedTiles(tiles, level) { if (this.debug) console.time('changedTiles') let changed = { added: [], removed: [] } let newNeeded = new Map() let { centerCol, centerRow, needed } = this.neededTiles(tiles, level) needed.forEach(d => { let [url, col, row] = d newNeeded.set(url, [col, row]) if (!tiles.requested.has(url)) { changed.added.push(d) } }) for (let url of tiles.needed.keys()) { if (!newNeeded.has(url)) { let [col, row] = tiles.needed.get(url) changed.removed.push([url, col, row]) } } tiles.needed = newNeeded if (this.debug) console.log(newNeeded) if (this.debug) console.timeEnd('changedTiles') return { centerCol, centerRow, changed } } /** Populates all tiles for a given level. * @param {Tiles} tiles - the grid of tiles * @param {number} level - The zoom level of the grid */ populateAllTiles(tiles, level) { let all = this.allTiles(tiles, level) for (let [url, col, row] of all) { this.addTileQuadNode(level, col, row, url) } tiles.loadTiles(all, false, 0, 0) } /** Loads all tiles that are needed to fill the browser window. * If the optional about parameter is provided (as a point with col as x, * and row as y attr) the tiles are sorted by the distance to this point. * * @param {Tiles} tiles - the grid of tiles * @param {number} level - The zoom level of the grid * Optional parameter: * @param {boolean} onlyone - if true only one tile is loaded * @param {PIXI.Point} about - point of interaction */ populateTiles(tiles, level, { onlyone = false, about = null } = {}) { if (tiles.isComplete()) return let referenceCol = -1 let referenceRow = -1 let { centerCol, centerRow, changed } = this.changedTiles(tiles, level) if (about != null) { // We want to load tiles in the focus of the user first, therefore // we sort according to the distance of the focus of interaction let refPoint = this.toLocal(about) let scaledTileSize = tiles.tileSize * tiles.tileScale referenceCol = Math.floor(refPoint.x / scaledTileSize) referenceRow = Math.floor(refPoint.y / scaledTileSize) } else { referenceCol = centerCol referenceRow = centerRow } referenceCol = centerCol referenceRow = centerRow let removed = changed.removed for (let [url, col, row] of removed) { this.removeTileQuadNode(level, col, row, url) } let added = changed.added if (added.length == 0) return for (let [url, col, row] of added) { this.addTileQuadNode(level, col, row, url) } let ref = new PIXI.Point(referenceCol, referenceRow) // Note: The array must be sorted in a way that the nearest tiles // are at the end of the array since the load queue uses Array.push // Array.pop added.sort((a, b) => { let aa = new PIXI.Point(a[1], a[2]) let bb = new PIXI.Point(b[1], b[2]) let da = Points.distance(aa, ref) let db = Points.distance(bb, ref) return db - da }) tiles.loadTiles(added, onlyone, referenceCol, referenceRow) } /** Private method: creates all tiles for a given level. * @param {number} level - The zoom level of the grid * @return {Tiles} - tiles */ _createTiles(key, level) { 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) this.addTiles(key, tiles) if (this.info.clip) { let rest = this.info.rests[level] if (rest) { let x = rest.restCol * this.info.tileSize * invScale let y = rest.restRow * this.info.tileSize * invScale tiles.x = -x tiles.y = -y } } return tiles } /** Ensures that all needed tiles of a given level are loaded. Creates * a new Tiles layer if necessary * @param {number} level - The zoom level of the grid * @return {Tiles} tiles */ ensureTiles(level, about) { let key = level.toString() if (key in this.tileLayers) { let tiles = this.tileLayers[key] this.populateTiles(tiles, level, { about: about }) return tiles } let tiles = this._createTiles(key, level) this.populateTiles(tiles, level, { about: about }) //console.log("ensureTiles", level) return tiles } untintTiles(level) { let key = level.toString() if (key in this.tileLayers) { let tiles = this.tileLayers[key] } } /** Ensures that all tiles of a given level are loaded. * @param {number} level - The zoom level of the grid */ ensureAllTiles(level) { let key = level.toString() if (key in this.tileLayers) { let tiles = this.tileLayers[key] this.populateAllTiles(tiles, level) tiles.keep = true return } let tiles = this._createTiles(key, level) this.populateAllTiles(tiles, level) tiles.keep = true return tiles } hideTilesAboveLevel(level) { Object.keys(this.tileLayers).forEach(key => { let tiles = this.tileLayers[key] if (tiles.level > level) { tiles.visible = false } }) } /** Destroys all tiles above a given level to ensure that the memory can * be reused. * @param {number} level - The zoom level of the grid */ destroyTilesAboveLevel(level) { Object.keys(this.tileLayers).forEach(key => { let tiles = this.tileLayers[key] if (tiles.level > level && !tiles.keep) { for (let url of tiles.available.keys()) { let quad = this.quadTrees.get(url) if (quad) this.removeTileQuadNode(quad) } this.destroyTiles(key) } }) } destroyAllTiles() { Object.keys(this.tileLayers).forEach(key => { this.destroyTiles(key) }) } /** * Tint tiles in all layers that are no longer needed * * @memberof DeepZoomImage */ tintObsoleteTiles() { Object.keys(this.tileLayers).forEach(key => { let tiles = this.tileLayers[key] tiles.untintTiles() if (!tiles.keep) { tiles.tintObsoleteTiles() } }) } /** * Destroy tiles in all layers that are no longer needed * * @memberof DeepZoomImage */ destroyUnneededTiles() { Object.keys(this.tileLayers).forEach(key => { let tiles = this.tileLayers[key] if (!tiles.keep) { tiles.destroyUnneededTiles() } }) } /** * Destroy tiles in all layers that are no longer needed * * @memberof DeepZoomImage */ destroyObsoleteTiles() { Object.keys(this.tileLayers).forEach(key => { let tiles = this.tileLayers[key] if (!tiles.keep) { tiles.destroyObsoleteTiles() } }) } /** * Destroy tiles in all layers that are not part of the * visible quadTrees * * @memberof DeepZoomImage */ destroyTiles() { Object.keys(this.tileLayers).forEach(key => { let tiles = this.tileLayers[key] if (!tiles.keep) { tiles.destroyTiles(this.quadTrees) } }) } /* Tint all tiles * @param {number} level - The zoom level of the grid */ tintTilesBelowLevel(level) { Object.keys(this.tileLayers).forEach(key => { let tiles = this.tileLayers[key] if (tiles.level < level) { tiles.tintTiles(this.quadTrees) } }) } /** * Ensure that the given tiles layer is the topmost one and visible. * @param {*} tiles */ bringTilesToFront(tiles) { this.tileContainer.addChild(tiles) tiles.visible = true } /** A callback function that can be used by a Scatter view to inform * the zoomable image that it has been moved, rotated or scaled, and should * load tiles accordingly. * @param {PIXI.Point} translated - the movement of the scatter * @param {number} scale - the zoom factor * @param {PIXI.Point} about - the anchor point of the zoom * @param {boolean} fast - informs the callback to return as fast as possible, * i.e. after loading a single tile * @param {boolean} debug - log debug infos */ transformed(event) { if (!this.active) { return } let key = this.currentLevel.toString() let currentTiles = this.tileLayers[key] if (typeof currentTiles == 'undefined') { return } if (event.fast) { this.fastLoads += 1 this.populateTiles(currentTiles, this.currentLevel, { onlyone: false, about: event.about }) if (this.fastLoads == 3) { this.fastLoads = 0 } else { return } } if (event.scale == null) { this.ensureTiles(this.currentLevel, event.about) return } let level = this.levelForScale(event.scale) let newLevel = Math.max(level, this.minimumLevel) if (newLevel != this.currentLevel) { if (!currentTiles.keep) { currentTiles.loader.cancel() } this.hideTilesAboveLevel(newLevel) currentTiles = this.ensureTiles(newLevel, event.about) this.currentLevel = newLevel } else { this.ensureTiles(this.currentLevel, event.about) } this.bringTilesToFront(currentTiles) if (this._foreground) { this.addChild(this._foreground) } } /** *Activates the textures on the DeepZoomImage. * * @memberof DeepZoomImage */ activate() { this.active = true this.destroyTilesAboveLevel(this.currentLevel) this.ensureTiles(this.currentLevel, null) //console.log("Activate Textures!", this.currentLevel) } /** *Dectivates the textures on the DeepZoomImage. * * @memberof DeepZoomImage */ deactivate() { this.active = false this.destroyAllTiles() this.tileContainer.destroy({ children: true }) } throwFinished() { //console.log("throwFinished") let key = this.currentLevel.toString() let currentTiles = this.tileLayers[key] if (typeof currentTiles == 'undefined') { return } this.ensureTiles(this.currentLevel) } }