From 3c57063632dd56606ce4872170bf739533719bd5 Mon Sep 17 00:00:00 2001
From: Alistair Buxton <a.j.buxton@gmail.com>
Date: Sat, 31 Oct 2020 00:23:41 +0000
Subject: [PATCH] Render the flipped columns in reverse order

This completes the per-image flip implementation. Tile bounds are
re-positioned within the image. When rendering, the x ordinals are
remapped to the flipped ones.

To use, set "flipped" on the image instead of the viewer. The code
is compatible with rotations and wrapping.

Implements #1553
---
 src/tiledimage.js | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/tiledimage.js b/src/tiledimage.js
index 2b9efd26..1e55b914 100644
--- a/src/tiledimage.js
+++ b/src/tiledimage.js
@@ -404,6 +404,9 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
         var xMod    = ( numTiles.x + ( x % numTiles.x ) ) % numTiles.x;
         var yMod    = ( numTiles.y + ( y % numTiles.y ) ) % numTiles.y;
         var bounds = this.source.getTileBounds(level, xMod, yMod);
+        if (this.getFlip()) {
+            bounds.x = 1 - bounds.x - bounds.width;
+        }
         bounds.x += (x - xMod) / numTiles.x;
         bounds.y += (this._worldHeightCurrent / this._worldWidthCurrent) * ((y - yMod) / numTiles.y);
         return bounds;
@@ -1279,10 +1282,32 @@ function updateLevel(tiledImage, haveDrawn, drawLevel, level, levelOpacity,
 
     var viewportCenter = tiledImage.viewport.pixelFromPoint(
         tiledImage.viewport.getCenter());
+
+    if (tiledImage.getFlip()) {
+        // The right-most tile can be narrower than the others. When flipped,
+        // this tile is now on the left. Because it is narrower than the normal
+        // left-most tile, the subsequent tiles may not be wide enough to completely
+        // fill the viewport. Fix this by rendering an extra column of tiles. If we
+        // are not wrapping, make sure we never render more than the number of tiles
+        // in the image.
+        bottomRightTile.x += 1;
+        if (!tiledImage.wrapHorizontal) {
+            bottomRightTile.x  = Math.min(bottomRightTile.x, numberOfTiles.x - 1);
+        }
+    }
+
     for (var x = topLeftTile.x; x <= bottomRightTile.x; x++) {
         for (var y = topLeftTile.y; y <= bottomRightTile.y; y++) {
 
-            if (drawArea.intersection(tiledImage.getTileBounds(level, x, y)) === null) {
+            var flippedX;
+            if (tiledImage.getFlip()) {
+                var xMod = ( numberOfTiles.x + ( x % numberOfTiles.x ) ) % numberOfTiles.x;
+                flippedX = x + numberOfTiles.x - xMod - xMod - 1;
+            } else {
+                flippedX = x;
+            }
+
+            if (drawArea.intersection(tiledImage.getTileBounds(level, flippedX, y)) === null) {
                 // This tile is outside of the viewport, no need to draw it
                 continue;
             }
@@ -1291,7 +1316,7 @@ function updateLevel(tiledImage, haveDrawn, drawLevel, level, levelOpacity,
                 tiledImage,
                 drawLevel,
                 haveDrawn,
-                x, y,
+                flippedX, y,
                 level,
                 levelOpacity,
                 levelVisibility,