From 7552806a4717f59aaf93b7d584b624228476a1cd Mon Sep 17 00:00:00 2001
From: Alistair Buxton <a.j.buxton@gmail.com>
Date: Mon, 22 Mar 2021 06:30:06 +0000
Subject: [PATCH] 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.
---
 src/tiledimage.js       | 6 +++---
 test/demo/flipping.html | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/tiledimage.js b/src/tiledimage.js
index 61de4e08..e2459660 100644
--- a/src/tiledimage.js
+++ b/src/tiledimage.js
@@ -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();
 }
 
 /**
diff --git a/test/demo/flipping.html b/test/demo/flipping.html
index 080d0f68..f31b8ebc 100644
--- a/test/demo/flipping.html
+++ b/test/demo/flipping.html
@@ -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)">