Force reload tiles when the tile's flip doesn't match the image

Flipping an image changes the bounds of each tile. The existing
code assumes that cannot happen. getTile() calculates the tile
bounds the first time it is asked for a particular tile. It then
caches and returns the same time on every subsequent call.

getTile() has a check to test if a tile exists in the cache. If
it does not, the tile is created and inserted. In order to make
tiles be rebuilt after a flip, we only need to check if the tile's
flip matches the image's flip. If not, we can recreate the tile
as if it did not exist.

To make this a bit clearer, the tile's flipped flag is now set
in getTile() rather than positionTile().

This makes setFlip() work.
This commit is contained in:
Alistair Buxton 2021-03-22 06:30:06 +00:00
parent 3161808a9d
commit 7552806a47
2 changed files with 5 additions and 5 deletions

View File

@ -866,7 +866,6 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
setFlip: function(flip) {
this.flipped = !!flip;
this._needsDraw = true;
this._raiseBoundsChange();
},
/**
@ -1501,7 +1500,7 @@ function getTile(
tilesMatrix[ level ][ x ] = {};
}
if ( !tilesMatrix[ level ][ x ][ y ] ) {
if ( !tilesMatrix[ level ][ x ][ y ] || ((!!tilesMatrix[ level ][ x ][ y ].flipped) !== (!!tiledImage.flipped)) ) {
xMod = ( numTiles.x + ( x % numTiles.x ) ) % numTiles.x;
yMod = ( numTiles.y + ( y % numTiles.y ) ) % numTiles.y;
bounds = tiledImage.getTileBounds( level, x, y );
@ -1550,6 +1549,8 @@ function getTile(
tile.isBottomMost = true;
}
tile.flipped = tiledImage.flipped;
tilesMatrix[ level ][ x ][ y ] = tile;
}
@ -1749,7 +1750,6 @@ function positionTile( tile, overlap, viewport, viewportCenter, levelVisibility,
tile.size = sizeC;
tile.squaredDistance = tileSquaredDistance;
tile.visibility = levelVisibility;
tile.flipped = tiledImage.getFlip();
}
/**

View File

@ -36,7 +36,7 @@
First
<div class="button">
<input type="checkbox" id="ffirst" onchange="flip(0, this.checked)">
<label for="ffirst">Flip (Partially Implemented)</label>
<label for="ffirst">Flip</label>
</div>
<div class="button">
<input type="checkbox" id="rfirst" onchange="rotate(0, this.checked * 45)">
@ -48,7 +48,7 @@
Second
<div class="button">
<input type="checkbox" id="fsecond" onchange="flip(1, this.checked)" checked>
<label for="fsecond">Flip (Partially Implemented)</label>
<label for="fsecond">Flip</label>
</div>
<div class="button">
<input type="checkbox" id="rsecond" onchange="rotate(1, this.checked * 45)">