From 208364147ab31efdad082de46d74da3b305d0ad3 Mon Sep 17 00:00:00 2001
From: Daniel Imms <2193314+Tyriar@users.noreply.github.com>
Date: Sun, 31 Jul 2022 11:35:12 -0700
Subject: [PATCH] Allow texture atlas to be zoomed on hover

---
 demo/client.ts  | 10 +++++++---
 demo/index.html |  1 +
 demo/style.css  | 14 ++++++++++++++
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/demo/client.ts b/demo/client.ts
index 98c60f70..85355dae 100644
--- a/demo/client.ts
+++ b/demo/client.ts
@@ -239,8 +239,8 @@ function createTerminal(): void {
   addons.fit.instance!.fit();
   typedTerm.loadAddon(addons.webgl.instance);
   setTimeout(() => {
-    document.body.appendChild(addons.webgl.instance.textureAtlas);
-    addons.webgl.instance.onChangeTextureAtlas(e => document.body.appendChild(e));
+    addTextureAtlas(addons.webgl.instance.textureAtlas);
+    addons.webgl.instance.onChangeTextureAtlas(e => addTextureAtlas(e));
   }, 0);
   term.focus();
 
@@ -412,6 +412,7 @@ function initOptions(term: TerminalType): void {
       }
       if (['cols', 'rows', 'letterSpacing', 'lineHeight'].includes(o)) {
         updateTerminalSize();
+      }
     });
   });
   Object.keys(stringOptions).forEach(o => {
@@ -503,7 +504,7 @@ function initAddons(term: TerminalType): void {
         addon.instance = new addon.ctor();
         term.loadAddon(addon.instance);
         if (name === 'webgl') {
-          (addon.instance as WebglAddon).onChangeTextureAtlas(e => document.body.appendChild(e));
+          (addon.instance as WebglAddon).onChangeTextureAtlas(e => addTextureAtlas(e));
         } else if (name === 'unicode11') {
           term.unicode.activeVersion = '11';
         } else if (name === 'search') {
@@ -587,6 +588,9 @@ function htmlSerializeButtonHandler(): void {
   document.getElementById("htmlserialize-output-result").innerText = "Copied to clipboard";
 }
 
+function addTextureAtlas(e: HTMLCanvasElement) {
+  document.querySelector('#texture-atlas').appendChild(e);
+}
 
 function writeCustomGlyphHandler() {
   term.write('\n\r');
diff --git a/demo/index.html b/demo/index.html
index bff5b4b2..214dd25f 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -87,6 +87,7 @@
         </div>
       </div>
     </div>
+    <div id="texture-atlas"></div>
       <script src="dist/client-bundle.js" defer ></script>
       <script>
       var tab = localStorage.getItem("tab");
diff --git a/demo/style.css b/demo/style.css
index 04e8a570..0e9b35bf 100644
--- a/demo/style.css
+++ b/demo/style.css
@@ -89,3 +89,17 @@ pre {
     max-height: 100vh;
     overflow-y: auto;
 }
+
+#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;
+}