From 80e8b2339d265ceb73df4179f39971853751dd97 Mon Sep 17 00:00:00 2001
From: n1474335 <n1474335@gmail.com>
Date: Wed, 8 Mar 2023 18:08:17 +0000
Subject: [PATCH] Improved HTML output sizing

---
 src/core/operations/Entropy.mjs            | 2 +-
 src/core/operations/IndexOfCoincidence.mjs | 2 +-
 src/core/operations/ShowOnMap.mjs          | 8 +-------
 src/web/stylesheets/layout/_io.css         | 8 ++++++++
 src/web/waiters/OutputWaiter.mjs           | 6 ++++++
 5 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/core/operations/Entropy.mjs b/src/core/operations/Entropy.mjs
index 3e93cc57..296d5ee8 100644
--- a/src/core/operations/Entropy.mjs
+++ b/src/core/operations/Entropy.mjs
@@ -358,7 +358,7 @@ class Entropy extends Operation {
 
         <br><script>
             var canvas = document.getElementById("chart-area"),
-                parentRect = canvas.parentNode.getBoundingClientRect(),
+                parentRect = canvas.closest(".cm-scroller").getBoundingClientRect(),
                 entropy = ${entropy},
                 height = parentRect.height * 0.25;
 
diff --git a/src/core/operations/IndexOfCoincidence.mjs b/src/core/operations/IndexOfCoincidence.mjs
index f99c2f23..8655ccd7 100644
--- a/src/core/operations/IndexOfCoincidence.mjs
+++ b/src/core/operations/IndexOfCoincidence.mjs
@@ -78,7 +78,7 @@ The graph shows the IC of the input data. A low IC generally means that the text
 
 <script type='application/javascript'>
   var canvas = document.getElementById("chart-area"),
-      parentRect = canvas.parentNode.getBoundingClientRect(),
+      parentRect = canvas.closest(".cm-scroller").getBoundingClientRect(),
       ic = ${ic};
 
   canvas.width = parentRect.width * 0.95;
diff --git a/src/core/operations/ShowOnMap.mjs b/src/core/operations/ShowOnMap.mjs
index 291a8a8f..c2ac1c6e 100644
--- a/src/core/operations/ShowOnMap.mjs
+++ b/src/core/operations/ShowOnMap.mjs
@@ -94,14 +94,8 @@ class ShowOnMap extends Operation {
     #output-text .cm-content,
     #output-text .cm-line,
     #output-html {
-        display: block;
-        white-space: normal;
         padding: 0;
-        height: 100%;
-    }
-    #output-text .cm-line .cm-widgetBuffer,
-    #output-text .cm-line br {
-        display: none;
+        white-space: normal;
     }
 </style>
 <div id="presentedMap" style="width: 100%; height: 100%;"></div>
diff --git a/src/web/stylesheets/layout/_io.css b/src/web/stylesheets/layout/_io.css
index e3938dd5..0146bf27 100755
--- a/src/web/stylesheets/layout/_io.css
+++ b/src/web/stylesheets/layout/_io.css
@@ -17,9 +17,17 @@
     user-select: auto;
 }
 
+#output-text.html-output .cm-content,
+#output-text.html-output .cm-line,
 #output-html {
+    display: block;
+    height: 100%;
     user-select: auto;
 }
+#output-text.html-output .cm-line .cm-widgetBuffer,
+#output-text.html-output .cm-line>br {
+    display: none;
+}
 
 .cm-editor {
     height: 100%;
diff --git a/src/web/waiters/OutputWaiter.mjs b/src/web/waiters/OutputWaiter.mjs
index 776f66b5..1d0ff3d8 100755
--- a/src/web/waiters/OutputWaiter.mjs
+++ b/src/web/waiters/OutputWaiter.mjs
@@ -240,6 +240,9 @@ class OutputWaiter {
         this.currentOutputCache = data;
         this.toggleLoader(true);
 
+        // Remove class to #output-text to change display settings
+        this.outputTextEl.classList.remove("html-output");
+
         // If data is an ArrayBuffer, convert to a string in the correct character encoding
         const tabNum = this.manager.tabs.getActiveTab("output");
         this.manager.timing.recordTime("outputDecodingStart", tabNum);
@@ -311,6 +314,9 @@ class OutputWaiter {
             effects: this.outputEditorConf.drawSelection.reconfigure([])
         });
 
+        // Add class to #output-text to change display settings
+        this.outputTextEl.classList.add("html-output");
+
         // Execute script sections
         const outputHTML = document.getElementById("output-html");
         const scriptElements = outputHTML ? outputHTML.querySelectorAll("script") : [];