Add support for resizing the lab window

Add observers to the JavaScript code to detect lab size changes and send the new dimensions to the guacamole client.
mrtmm · Feb 3, 2025 · 30746dd · 30746dd
1 parent 5b36637
commit 30746dd
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 6 deletions.
diff --git a/hastexo/public/js/client.js b/hastexo/public/js/client.js
@@ -240,6 +240,10 @@ function HastexoGuacamoleClient(configuration) {
 
         onidle(pause) {
             return pause;
+        },
+
+        sendSize(height, width) {
+            guac_client.sendSize(height, width);
         }
     }
 

diff --git a/hastexo/public/js/main.js b/hastexo/public/js/main.js
@@ -90,6 +90,15 @@ function HastexoXBlock(runtime, element, configuration) {
         /* Show the terminal.  */
         $("#terminal").append(terminal_element);
 
+        // Observe the lab size in the browser and adjust when necessary
+        var lab = $('#terminal')[0];
+        const resizeObserver = new ResizeObserver(entries => {
+            for (const entry of entries) {
+                terminal_client.sendSize(entry.contentRect.width, entry.contentRect.height);
+            }
+        });
+        resizeObserver.observe(lab);
+
         /* Disconnect on tab close. */
         window.onunload = function() {
             terminal_client.disconnect();

diff --git a/hastexo/static/html/lab.html b/hastexo/static/html/lab.html
@@ -44,6 +44,15 @@
             terminal_element = terminal_client.getDisplay().getElement();
             display.appendChild(terminal_element);
 
+            // Observe the lab size in the browser and adjust when necessary
+            var lab = document.getElementById('terminal');
+            const resizeObserver = new ResizeObserver(entries => {
+                for (const entry of entries) {
+                    terminal_client.sendSize(entry.contentRect.width, entry.contentRect.height);
+                }
+            });
+            resizeObserver.observe(lab);
+
             // Error handler
             terminal_client.onerror = function(error) {
                 alert(error.message);
@@ -73,12 +82,6 @@
                 }
             }
 
-            // reload the window on resize to reconnect with new
-            // height and width.
-            window.onresize = function() {
-                location.reload();
-            }
-
             /* Disconnect on tab close. */
             window.onunload = function() {
                 terminal_client.disconnect();