Make texture atlas presentation nicer for multiple pages

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>

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;
-}

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);