Fixed button group bug.

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

255
dist/iwmlib.pixi.js vendored
View File

@ -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,8 +8576,7 @@
}
}
}
if (count > 0)
console.log("Sweeping textures", count);
if (count > 0) console.log('Sweeping textures', count);
}
}
@ -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.
@ -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];
@ -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();

View File

@ -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 = []