diff --git a/CHANGELOG.md b/CHANGELOG.md index 2d1e557af2ab136f3f586b10457b6d0e26ba573c..046453356cd50c125cd10fc70ad277579cff023a 100644 --- a/CHANGELOG.md +++ b/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 ----- diff --git a/examples/index.html b/examples/index.html index c714d54ca42ca03192bcc0810a3a600bae51e3ef..9245dc83496aba753838e4040d3f1a0978765e5e 100644 --- a/examples/index.html +++ b/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; } diff --git a/src/ftxui/component/screen_interactive.cpp b/src/ftxui/component/screen_interactive.cpp index a0353e37f10c93d90bd86dbb6be40f1cf97d9f82..d836ac270f6048b1e3c80c84f11a47724376ed78 100644 --- a/src/ftxui/component/screen_interactive.cpp +++ b/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 diff --git a/src/ftxui/screen/terminal.cpp b/src/ftxui/screen/terminal.cpp index 4ea48a6b71ecd55e3ce0dcd065597212fd9c96ff..4e1dd263dd1dd9d999190b562a19dfce724143df 100644 --- a/src/ftxui/screen/terminal.cpp +++ b/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; }