Add support for emscripten screen resize. (#463)

This resolves:
https://github.com/ArthurSonzogni/FTXUI/issues/432

CHANGELOG.md

@@ -11,6 +11,7 @@ current (development)
   requested
 - Bugfix: Forward the selected/focused area from the child in gridbox.
 - Bugfix: Fix incorrect Canvas computed dimensions.
+- Bugfix: Support `vscroll_indicator` with a zero inner size.
 
 ### Component:
 - Feature: Add the `Modal` component.
@@ -20,6 +21,8 @@ current (development)
 
 ### Screen
 - Feature: add `Box::Union(a,b) -> Box`
+- Bugfix: Fix resetting `dim` clashing with resetting of `bold`.
+- Feature: Add emscripten screen resize support.
 
 3.0.0
 -----

examples/index.html

@@ -4,6 +4,7 @@
     <title>FTXUI examples WebAssembly</title>
     <script src="https://cdn.jsdelivr.net/npm/xterm@4.18.0/lib/xterm.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/xterm-addon-webgl@0.11.4/lib/xterm-addon-webgl.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.5.0/lib/xterm-addon-fit.min.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@4.11.0/css/xterm.css"></link>
     <!--Add COOP/COEP via a ServiceWorker to use SharedArrayBuffer-->
     <script>
@@ -79,9 +80,12 @@
       }
     }
     const term = new Terminal();
-    term.open(document.querySelector('#terminal'));
-    term.resize(140,43);
-    term.loadAddon(new (WebglAddon.WebglAddon)());
+    const term_element = document.querySelector('#terminal');
+    term.open(term_element);
+
+    const webgl_addon = new (WebglAddon.WebglAddon)();
+    term.loadAddon(webgl_addon);
+
     const onBinary = e => {
       for(c of e)
         stdin_buffer.push(c.charCodeAt(0));
@@ -93,7 +97,23 @@
         FS.init(stdin, stdout, stderr);
       },
       postRun: [],
-      onRuntimeInitialized: () => {},
+      onRuntimeInitialized: () => {
+        // Handle screen resize:
+        const fit_addon = new (FitAddon.FitAddon)();
+        term.loadAddon(fit_addon);
+        fit_addon.fit();
+        const resize_handler = () => {
+          const {cols, rows} = fit_addon.proposeDimensions();
+          term.resize(cols, rows);
+          window.Module._ftxui_on_resize(cols, rows);
+        };
+        const resize_observer = new ResizeObserver(resize_handler);
+        resize_observer.observe(term_element);
+        resize_handler();
+
+        // Disable scrollbar
+        term.write('\x1b[?47h')
+      },
     };
 
     const words = example.split('/')
@@ -137,9 +157,11 @@
     }
 
     #terminal {
-      padding:10px;
+      width:100%;
+      height: 500px;
+      height: calc(clamp(200px, 100vh - 300px, 900px));
+      overflow: hidden;
       border:none;
-      background-color:black;
       padding:auto;
     }
 

src/ftxui/component/screen_interactive.cpp

@@ -135,6 +135,17 @@ void EventListener(std::atomic<bool>* quit, Sender<Task> out) {
   }
 }
 
+extern "C" {
+  EMSCRIPTEN_KEEPALIVE
+  void ftxui_on_resize(int columns, int rows) {
+    Terminal::SetFallbackSize({
+        columns,
+        rows,
+    });
+    std::raise(SIGWINCH);
+  }
+}
+
 #else
 #include <sys/time.h>  // for timeval
 

src/ftxui/screen/terminal.cpp

@@ -38,7 +38,10 @@ Dimensions& FallbackSize() {
   constexpr int fallback_width = 80;
   constexpr int fallback_height = 24;
 #endif
-  static Dimensions g_fallback_size{fallback_width, fallback_height};
+  static Dimensions g_fallback_size{
+      fallback_width,
+      fallback_height,
+  };
   return g_fallback_size;
 }