From 0a49a5dde1afd433ce354de06bb6e7f54a55089f Mon Sep 17 00:00:00 2001
From: Daniel Imms <2193314+Tyriar@users.noreply.github.com>
Date: Sat, 29 Oct 2022 13:01:41 -0700
Subject: [PATCH] Make texture atlas presentation nicer for multiple pages

---
 demo/index.html                             |  2 ++
 demo/style.css                              | 12 +++++-------
 src/browser/renderer/shared/TextureAtlas.ts |  1 +
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index a65b8bbc..446d1d5b 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -91,6 +91,8 @@
         </div>
       </div>
     </div>
+    <input type="checkbox" id="texture-atlas-zoom"/>
+    <label for="texture-atlas-zoom">Zoom texture atlas</label>
     <div id="texture-atlas"></div>
       <script src="dist/client-bundle.js" defer ></script>
       <script>
diff --git a/demo/style.css b/demo/style.css
index 0e9b35bf..70ef8ed1 100644
--- a/demo/style.css
+++ b/demo/style.css
@@ -90,16 +90,14 @@ pre {
     overflow-y: auto;
 }
 
+#texture-atlas-zoom:checked + label + #texture-atlas canvas {
+    /* Zoom atlas to the width of the container*/
+    width: 100% !important;
+    height: auto !important;
+}
 #texture-atlas {
     width: 100%;
-    height: 600px;
-    overflow: scroll;
 }
 #texture-atlas canvas {
     image-rendering: pixelated;
 }
-#texture-atlas canvas:hover {
-    /* zoom to 4x on hover */
-    width: 4096px;
-    height: 4096px;
-}
diff --git a/src/browser/renderer/shared/TextureAtlas.ts b/src/browser/renderer/shared/TextureAtlas.ts
index 1bb72c3e..ff5e6db1 100644
--- a/src/browser/renderer/shared/TextureAtlas.ts
+++ b/src/browser/renderer/shared/TextureAtlas.ts
@@ -109,6 +109,7 @@ export class TextureAtlas implements ITextureAtlas {
     const page = this._pages[this._pages.length - 1];
     // TODO: Fill the page completely
     if (page.currentRow.y > Math.floor(page.canvas.height * 0.8)) {
+      // TODO: Clear all pages and restart if the maximum page count is reached
       // TODO: Support drawing to multiple pages at once
       console.log(`Add page #${this._pages.length + 1}`);
       const newPage = new AtlasPage(this._document, this._config.devicePixelRatio);