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

Fixed button group bug.

Browse Source
This commit is contained in:
Sebastian Kupke 2019-08-07 14:57:07 +02:00
parent 141d27d4f1
commit caffee4b15
2 changed files with 133 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

187
dist/iwmlib.pixi.js vendored
View File

@ -2662,7 +2662,6 @@
// badge // badge
//-------------------- //--------------------
if (this.badge) { if (this.badge) {
this.removeChild(this.badge); this.removeChild(this.badge);
const width = this.width; const width = this.width;
const height = this.height; const height = this.height;
@ -3231,6 +3230,7 @@
this.addChildAt(background, 0); this.addChildAt(background, 0);
this.__initWidth = this.container.width; this.__initWidth = this.container.width;
this.__initHeight = this.container.height;
} }
return this return this
@ -3401,7 +3401,6 @@
onMove(event) { onMove(event) {
if (this.__dragging) { if (this.__dragging) {
this.capture(event); this.capture(event);
if (this.opts.orientation === 'horizontal') { if (this.opts.orientation === 'horizontal') {
this.container.position.x = event.data.global.x + this.__delta.x; this.container.position.x = event.data.global.x + this.__delta.x;
} else { } else {
@ -3426,20 +3425,34 @@
const throwProps = { x: { velocity: 'auto' }, y: { velocity: 'auto' } }; const throwProps = { x: { velocity: 'auto' }, y: { velocity: 'auto' } };
if (this.opts.orientation === 'horizontal') { if (this.opts.orientation === 'horizontal') {
if (this.__initWidth > this.opts.maxWidth) {
// stack!
const distanceToLeft = this.container.x; const distanceToLeft = this.container.x;
const distanceToRight = this.opts.maxWidth - this.container.x - this.__initWidth; const distanceToRight = this.opts.maxWidth - this.container.x - this.__initWidth;
if (distanceToLeft > 0 && distanceToLeft > distanceToRight) {
if (distanceToLeft > 0) {
throwProps.x.end = 0; throwProps.x.end = 0;
} else if (distanceToRight > 0 && distanceToRight > distanceToLeft) { } else if (distanceToRight > 0) {
throwProps.x.end = this.opts.maxWidth - this.__initWidth; throwProps.x.end = this.opts.maxWidth - this.__initWidth;
} }
} else { } else {
// just magnetize
throwProps.x.end = 0;
}
} else {
if (this.__initHeight > this.opts.maxHeight) {
// stack!
const distanceToTop = this.container.y; const distanceToTop = this.container.y;
const distanceToBottom = this.opts.maxHeight - this.container.y - this.container.height; const distanceToBottom = this.opts.maxHeight - this.container.y - this.container.height;
if (distanceToTop > 0 && distanceToTop > distanceToBottom) {
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; 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() { stack() {
if (this.opts.maxWidth) { if (this.opts.maxWidth) {
@ -3514,7 +3527,7 @@
} }
/** /**
* * @private
*/ */
_stackHorizontal() { _stackHorizontal() {
const sorted = []; const sorted = [];
@ -3571,7 +3584,7 @@
} }
/** /**
* * @private
*/ */
_stackVertical() { _stackVertical() {
const sorted = []; const sorted = [];
@ -8442,11 +8455,10 @@
if (registeredTiles.has(url)) { if (registeredTiles.has(url)) {
let tiles = registeredTiles.get(url); let tiles = registeredTiles.get(url);
tiles.add(this); 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])); 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 }); keptTextures.push({ url: this.url, texture: this.texture });
let opts = { children: true, texture: false, baseTexture: false }; 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); super.destroy(opts);
while (keptTextures.length > keepTextures) { while (keptTextures.length > keepTextures) {
let { url, texture } = keptTextures.shift(); let { url, texture } = keptTextures.shift();
if (Tile.isObsolete(url)) { if (Tile.isObsolete(url)) {
texture.destroy(true); // Destroy base as well 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 // 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 }; let opts = { children: true, texture: true, baseTexture: true };
super.destroy(opts); 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 }; 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); super.destroy(opts);
} }
if (this.parent != null) { if (this.parent != null) {
// UO: Emit warning and remove // UO: Emit warning and remove
console.warn("Destroying tile with parent. Hiding instead"); console.warn('Destroying tile with parent. Hiding instead');
this.visible = false; this.visible = false;
} }
} }
@ -8537,10 +8548,9 @@
renderWebGL(renderer) { renderWebGL(renderer) {
try { try {
super.renderWebGL(renderer); super.renderWebGL(renderer);
} } catch (e) {
catch (e) {
// We want persistent logging here // We want persistent logging here
Logging.error("Error in Tile.renderWebGL: " + e.message); Logging.error('Error in Tile.renderWebGL: ' + e.message);
} }
} }
@ -8566,8 +8576,7 @@
} }
} }
} }
if (count > 0) if (count > 0) console.log('Sweeping textures', count);
console.log("Sweeping textures", count);
} }
} }
@ -8660,7 +8669,7 @@
_textureAvailable(url, col, row, texture) { _textureAvailable(url, col, row, texture) {
let tile = this.loaded.get(url); let tile = this.loaded.get(url);
if (tile != null) { if (tile != null) {
console.warn("Tile already loaded"); console.warn('Tile already loaded');
tile.unregister(); tile.unregister();
} }
try { try {
@ -8668,9 +8677,8 @@
this.loaded.set(url, tile); this.loaded.set(url, tile);
this.tiles.tileAvailable(tile, col, row, url); this.tiles.tileAvailable(tile, col, row, url);
} catch (error) { } 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. * Calls the Tiles.tileAvailable method if the texture is available.
**/ **/
class PIXITileLoader extends TileLoader { class PIXITileLoader extends TileLoader {
constructor(tiles, compression) { constructor(tiles, compression) {
super(tiles); super(tiles);
this.destroyed = false; this.destroyed = false;
@ -8722,15 +8729,13 @@
/** Load one and only one of the scheduled tiles **/ /** Load one and only one of the scheduled tiles **/
loadOneTile() { loadOneTile() {
if (this.destroyed) if (this.destroyed) return
return
this._loadOneTile(); this._loadOneTile();
} }
/** Load all scheduled tiles **/ /** Load all scheduled tiles **/
loadAll() { loadAll() {
if (this.destroyed) if (this.destroyed) return
return
this._loadAllTiles(); this._loadAllTiles();
} }
@ -8741,7 +8746,7 @@
try { try {
this.loader.reset(); this.loader.reset();
} catch (error) { } 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 texture = resource.texture;
let url = resource.url; let url = resource.url;
Tile.lateTexture(url, texture); Tile.lateTexture(url, texture);
console.warn("Received resource after destroy", texture); console.warn('Received resource after destroy', texture);
return return
} }
try { try {
let [col, row] = this.map.get(resource.url); let [col, row] = this.map.get(resource.url);
this._textureAvailable(resource.url, col, row, resource.texture); this._textureAvailable(resource.url, col, row, resource.texture);
} } catch (err) {
catch (err) { console.warn('Texture unavailable: ' + err.message);
console.warn("Texture unavailable: " + err.message);
} }
} }
@ -8814,9 +8818,8 @@
if (!this.loaded.has(url)) { if (!this.loaded.has(url)) {
let resource = this.loader.resources[url]; let resource = this.loader.resources[url];
if (resource) { if (resource) {
console.log("Resource already added", url); console.log('Resource already added', url);
} } else {
else {
urls.push(url); urls.push(url);
i += 1; i += 1;
} }
@ -8829,20 +8832,18 @@
} }
} }
/** /**
* Uses Workers but can be replaced with other loaders implementing * Uses Workers but can be replaced with other loaders implementing
* the public methods without underscore. * the public methods without underscore.
* Calls the Tiles.tileAvailable method if the texture is available. * Calls the Tiles.tileAvailable method if the texture is available.
**/ **/
class WorkerTileLoader extends TileLoader { class WorkerTileLoader extends TileLoader {
constructor(tiles, workerPath) { constructor(tiles, workerPath) {
super(tiles); 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) { if (event.data.success) {
let { url, col, row, buffer } = event.data; let { url, col, row, buffer } = event.data;
//console.log("WorkerTileLoader.loaded", url, buffer) //console.log("WorkerTileLoader.loaded", url, buffer)
@ -8860,7 +8861,7 @@
let url = this.loadQueue.pop(); let url = this.loadQueue.pop();
let [col, row] = this.map.get(url); let [col, row] = this.map.get(url);
let tile = [col, row, 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); let [col, row] = this.map.get(url);
tiles.push([col, row, url]); tiles.push([col, row, url]);
} }
this.worker.postMessage({ command: "load", tiles }); this.worker.postMessage({ command: 'load', tiles });
} }
cancel() { cancel() {
super.cancel(); super.cancel();
this.worker.postMessage({ command: "abort" }); this.worker.postMessage({ command: 'abort' });
} }
destroy() { destroy() {
this.worker.postMessage({ command: "abort" }); this.worker.postMessage({ command: 'abort' });
this.worker.terminate(); this.worker.terminate();
this.worker = null; this.worker = null;
super.destroy(); super.destroy();
@ -8903,18 +8904,7 @@
* @param {number} fadeInTime - time needed to fade in tiles if TweenLite is set * @param {number} fadeInTime - time needed to fade in tiles if TweenLite is set
**/ **/
class Tiles extends PIXI.Container { 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(); super();
this.debug = false; this.debug = false;
this.showGrid = false; this.showGrid = false;
@ -8951,8 +8941,6 @@
this.destroyed = false; this.destroyed = false;
} }
/** Tests whether all tiles are loaded. **/ /** Tests whether all tiles are loaded. **/
isComplete() { isComplete() {
return this.cols * this.rows === this.children.length return this.cols * this.rows === this.children.length
@ -9161,8 +9149,7 @@
count += 1; count += 1;
} }
} }
if (count && this.debug) if (count && this.debug) console.log('destroyTiles', this.level, count);
console.log('destroyTiles', this.level, count);
} }
destroyUnneededTiles() { destroyUnneededTiles() {
@ -9173,8 +9160,7 @@
count += 1; count += 1;
} }
} }
if (count && this.debug) if (count && this.debug) console.log('destroyUnneededTiles', this.level, count);
console.log('destroyUnneededTiles', this.level, count);
} }
highlightInfos() { highlightInfos() {
@ -9256,8 +9242,7 @@
// number in the file system for the folder with tiles // number in the file system for the folder with tiles
this.clip = this.clip || null; // e.g. { level: 12, col: 301436, row: 354060 } this.clip = this.clip || null; // e.g. { level: 12, col: 301436, row: 354060 }
this.type = this.type || 'dzi'; 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(); this.setupDimensions();
} }
@ -9447,15 +9432,7 @@
test() { test() {
//console.log("w=" + this.width + " h=" + this.height + " maxlevel=" + this.maxLevel + " base=" + this.baseLevel) //console.log("w=" + this.width + " h=" + this.height + " maxlevel=" + this.maxLevel + " base=" + this.baseLevel)
for (let i = 0; i <= this.maxLevel; i++) { 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)); console.log(this.urlForTile(this.baseLevel, 0, 0));
} }
@ -9495,12 +9472,7 @@
**/ **/
noQuads() { noQuads() {
if (this.previous === null) return false 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 /** Unlink the given quad node
@ -9539,7 +9511,6 @@
} }
} }
/** /**
* The main class of a deeply zoomable image that is represented by a hierarchy * 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 * of tile layers for each zoom level. This gives the user the impression that
@ -9572,9 +9543,7 @@
this.shadow = shadow; this.shadow = shadow;
this.world = world; this.world = world;
this.useWorker = useWorker; this.useWorker = useWorker;
this.resolution = highResolution this.resolution = highResolution ? Math.round(window.devicePixelRatio) : 1;
? Math.round(window.devicePixelRatio)
: 1;
this.alpha = alpha; this.alpha = alpha;
this.fastLoads = 0; this.fastLoads = 0;
this.active = true; this.active = true;
@ -9764,7 +9733,7 @@
**/ **/
get maxScale() { get maxScale() {
let delta = this.info.maxLevel - this.info.baseLevel; 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. /** Getter for the current width.
@ -9779,7 +9748,6 @@
return this.pixelSize[1] return this.pixelSize[1]
} }
/* Overrides PIXI.Container.hitArea() /* Overrides PIXI.Container.hitArea()
* Allows to optimize the hit testing. Container with hit areas are directly * Allows to optimize the hit testing. Container with hit areas are directly
* hit tested without consideration of children. * hit tested without consideration of children.
@ -9887,11 +9855,7 @@
let topLeft = tiles.toLocal(worldTopLeft); let topLeft = tiles.toLocal(worldTopLeft);
let bottomRight = tiles.toLocal(worldBottomRight); let bottomRight = tiles.toLocal(worldBottomRight);
tiles._centerPoint = tilesCenter; 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; tiles._boundsRect = bounds;
@ -9936,9 +9900,6 @@
return { centerCol, centerRow, needed } return { centerCol, centerRow, needed }
} }
/** Returns all changed tiles for a given level. /** Returns all changed tiles for a given level.
* @param {Tiles} tiles - the grid of tiles * @param {Tiles} tiles - the grid of tiles
* @param {number} level - The zoom level of the grid * @param {number} level - The zoom level of the grid
@ -9991,8 +9952,7 @@
* @param {PIXI.Point} about - point of interaction * @param {PIXI.Point} about - point of interaction
*/ */
populateTiles(tiles, level, { onlyone = false, about = null } = {}) { populateTiles(tiles, level, { onlyone = false, about = null } = {}) {
if (tiles.isComplete()) if (tiles.isComplete()) return
return
let referenceCol = -1; let referenceCol = -1;
let referenceRow = -1; let referenceRow = -1;
let { centerCol, centerRow, changed } = this.changedTiles(tiles, level); let { centerCol, centerRow, changed } = this.changedTiles(tiles, level);
@ -10003,8 +9963,7 @@
let scaledTileSize = tiles.tileSize * tiles.tileScale; let scaledTileSize = tiles.tileSize * tiles.tileScale;
referenceCol = Math.floor(refPoint.x / scaledTileSize); referenceCol = Math.floor(refPoint.x / scaledTileSize);
referenceRow = Math.floor(refPoint.y / scaledTileSize); referenceRow = Math.floor(refPoint.y / scaledTileSize);
} } else {
else {
referenceCol = centerCol; referenceCol = centerCol;
referenceRow = centerRow; referenceRow = centerRow;
} }
@ -10042,17 +10001,7 @@
let [cols, rows, w, h] = this.info.dimensions(level); let [cols, rows, w, h] = this.info.dimensions(level);
let increasedLevels = level - this.info.baseLevel; let increasedLevels = level - this.info.baseLevel;
let invScale = Math.pow(0.5, increasedLevels); 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); this.addTiles(key, tiles);
if (this.info.clip) { if (this.info.clip) {
let rest = this.info.rests[level]; let rest = this.info.rests[level];
@ -10155,7 +10104,6 @@
}); });
} }
/** /**
* Destroy tiles in all layers that are no longer needed * Destroy tiles in all layers that are no longer needed
* *
@ -10247,8 +10195,7 @@
}); });
if (this.fastLoads == 3) { if (this.fastLoads == 3) {
this.fastLoads = 0; this.fastLoads = 0;
} } else {
else {
return return
} }
} }

32
lib/pixi/buttongroup.js
View File

@ -292,6 +292,7 @@ export default class ButtonGroup extends PIXI.Container {
this.addChildAt(background, 0) this.addChildAt(background, 0)
this.__initWidth = this.container.width this.__initWidth = this.container.width
this.__initHeight = this.container.height
} }
return this return this
@ -462,7 +463,6 @@ export default class ButtonGroup extends PIXI.Container {
onMove(event) { onMove(event) {
if (this.__dragging) { if (this.__dragging) {
this.capture(event) this.capture(event)
if (this.opts.orientation === 'horizontal') { if (this.opts.orientation === 'horizontal') {
this.container.position.x = event.data.global.x + this.__delta.x this.container.position.x = event.data.global.x + this.__delta.x
} else { } else {
@ -487,20 +487,34 @@ export default class ButtonGroup extends PIXI.Container {
const throwProps = { x: { velocity: 'auto' }, y: { velocity: 'auto' } } const throwProps = { x: { velocity: 'auto' }, y: { velocity: 'auto' } }
if (this.opts.orientation === 'horizontal') { if (this.opts.orientation === 'horizontal') {
if (this.__initWidth > this.opts.maxWidth) {
// stack!
const distanceToLeft = this.container.x const distanceToLeft = this.container.x
const distanceToRight = this.opts.maxWidth - this.container.x - this.__initWidth const distanceToRight = this.opts.maxWidth - this.container.x - this.__initWidth
if (distanceToLeft > 0 && distanceToLeft > distanceToRight) {
if (distanceToLeft > 0) {
throwProps.x.end = 0 throwProps.x.end = 0
} else if (distanceToRight > 0 && distanceToRight > distanceToLeft) { } else if (distanceToRight > 0) {
throwProps.x.end = this.opts.maxWidth - this.__initWidth throwProps.x.end = this.opts.maxWidth - this.__initWidth
} }
} else { } else {
// just magnetize
throwProps.x.end = 0
}
} else {
if (this.__initHeight > this.opts.maxHeight) {
// stack!
const distanceToTop = this.container.y const distanceToTop = this.container.y
const distanceToBottom = this.opts.maxHeight - this.container.y - this.container.height const distanceToBottom = this.opts.maxHeight - this.container.y - this.container.height
if (distanceToTop > 0 && distanceToTop > distanceToBottom) {
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 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() { stack() {
if (this.opts.maxWidth) { if (this.opts.maxWidth) {
@ -575,7 +589,7 @@ export default class ButtonGroup extends PIXI.Container {
} }
/** /**
* * @private
*/ */
_stackHorizontal() { _stackHorizontal() {
const sorted = [] const sorted = []
@ -632,7 +646,7 @@ export default class ButtonGroup extends PIXI.Container {
} }
/** /**
* * @private
*/ */
_stackVertical() { _stackVertical() {
const sorted = [] const sorted = []