Improved HTML output sizing

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;
 

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;

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>

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

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") : [];