mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-22 05:06:09 +03:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/tiledimage.js
View File

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

4
test/demo/flipping.html
View File

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