webgl, fallback to canvas renderer

Author: sawka

frontend/app/view/term/term-model.ts

@@ -155,7 +155,7 @@ export class TermViewModel implements ViewModel {
             if (isCmd) {
                 const blockMeta = get(this.blockAtom)?.meta;
                 let cmdText = blockMeta?.["cmd"];
-                let cmdArgs = blockMeta?.["cmd:args"];
+                const cmdArgs = blockMeta?.["cmd:args"];
                 if (cmdArgs != null && Array.isArray(cmdArgs) && cmdArgs.length > 0) {
                     cmdText += " " + cmdArgs.join(" ");
                 }
@@ -242,7 +242,7 @@ export class TermViewModel implements ViewModel {
         });
         this.termTransparencyAtom = useBlockAtom(blockId, "termtransparencyatom", () => {
             return jotai.atom<number>((get) => {
-                let value = get(getOverrideConfigAtom(this.blockId, "term:transparency")) ?? 0.5;
+                const value = get(getOverrideConfigAtom(this.blockId, "term:transparency")) ?? 0.5;
                 return boundNumber(value, 0, 1);
             });
         });
@@ -517,6 +517,10 @@ export class TermViewModel implements ViewModel {
         });
     }
 
+    getTermRenderer(): "webgl" | "canvas" {
+        return this.termRef.current?.getTermRenderer() ?? "canvas";
+    }
+
     isWebGlEnabled(): boolean {
         return this.termRef.current?.isWebGlEnabled() ?? false;
     }
@@ -525,11 +529,8 @@ export class TermViewModel implements ViewModel {
         if (!this.termRef.current) {
             return;
         }
-        if (this.termRef.current.isWebGlEnabled()) {
-            this.termRef.current.disableWebGl();
-        } else {
-            this.termRef.current.enableWebGl();
-        }
+        const renderer = this.termRef.current.getTermRenderer() === "webgl" ? "canvas" : "webgl";
+        this.termRef.current.setTermRenderer(renderer);
     }
 
     triggerRestartAtom() {
@@ -598,7 +599,7 @@ export class TermViewModel implements ViewModel {
             console.log("search is open, not giving focus");
             return true;
         }
-        let termMode = globalStore.get(this.termMode);
+        const termMode = globalStore.get(this.termMode);
         if (termMode == "term") {
             if (this.termRef?.current?.terminal) {
                 this.termRef.current.terminal.focus();

frontend/app/view/term/termwrap.ts

@@ -18,6 +18,7 @@ import {
 import * as services from "@/store/services";
 import { PLATFORM, PlatformMacOS } from "@/util/platformutil";
 import { base64ToArray, fireAndForget } from "@/util/util";
+import { CanvasAddon } from "@xterm/addon-canvas";
 import { SearchAddon } from "@xterm/addon-search";
 import { SerializeAddon } from "@xterm/addon-serialize";
 import { WebLinksAddon } from "@xterm/addon-web-links";
@@ -86,6 +87,7 @@ export class TermWrap {
     onSearchResultsDidChange?: (result: { resultIndex: number; resultCount: number }) => void;
     private toDispose: TermTypes.IDisposable[] = [];
     webglAddon: WebglAddon | null = null;
+    canvasAddon: CanvasAddon | null = null;
     webglEnabledAtom: jotai.PrimitiveAtom<boolean>;
     pasteActive: boolean = false;
     lastUpdated: number;
@@ -182,9 +184,7 @@ export class TermWrap {
                 }
             )
         );
-        if (WebGLSupported && waveOptions.useWebGl) {
-            this.loadWebGlAddon();
-        }
+        this.setTermRenderer(WebGLSupported && waveOptions.useWebGl ? "webgl" : "canvas");
         // Register OSC handlers
         this.terminal.parser.registerOscHandler(7, (data: string) => {
             return handleOsc7Command(data, this.blockId, this.loaded);
@@ -300,42 +300,57 @@ export class TermWrap {
         this.terminal.options.cursorBlink = cursorBlink ?? false;
     }
 
-    loadWebGlAddon() {
-        const addon = new WebglAddon();
-        this.toDispose.push(
-            addon.onContextLoss(() => {
-                if (addon === this.webglAddon) {
-                    this.disableWebGl();
-                }
-            })
-        );
-        this.terminal.loadAddon(addon);
-        this.webglAddon = addon;
-        globalStore.set(this.webglEnabledAtom, true);
-        if (!loggedWebGL) {
-            console.log("loaded webgl!");
-            loggedWebGL = true;
+    setTermRenderer(renderer: "webgl" | "canvas") {
+        if (renderer === "webgl") {
+            if (this.webglAddon != null) {
+                return;
+            }
+            if (!WebGLSupported) {
+                renderer = "canvas";
+            }
+        } else {
+            if (this.canvasAddon != null) {
+                return;
+            }
+        }
+        if (this.webglAddon != null) {
+            this.webglAddon.dispose();
+            this.webglAddon = null;
+            globalStore.set(this.webglEnabledAtom, false);
+        }
+        if (this.canvasAddon != null) {
+            this.canvasAddon.dispose();
+            this.canvasAddon = null;
+        }
+        if (renderer === "webgl") {
+            const addon = new WebglAddon();
+            this.toDispose.push(
+                addon.onContextLoss(() => {
+                    if (addon === this.webglAddon) {
+                        this.setTermRenderer("canvas");
+                    }
+                })
+            );
+            this.terminal.loadAddon(addon);
+            this.webglAddon = addon;
+            globalStore.set(this.webglEnabledAtom, true);
+            if (!loggedWebGL) {
+                console.log("loaded webgl!");
+                loggedWebGL = true;
+            }
+        } else {
+            const addon = new CanvasAddon();
+            this.terminal.loadAddon(addon);
+            this.canvasAddon = addon;
         }
     }
 
-    isWebGlEnabled(): boolean {
-        return this.webglAddon != null;
-    }
-
-    enableWebGl() {
-        if (!WebGLSupported || this.webglAddon != null) {
-            return;
-        }
-        this.loadWebGlAddon();
+    getTermRenderer(): "webgl" | "canvas" {
+        return this.webglAddon != null ? "webgl" : "canvas";
     }
 
-    disableWebGl() {
-        if (this.webglAddon == null) {
-            return;
-        }
-        this.webglAddon.dispose();
-        this.webglAddon = null;
-        globalStore.set(this.webglEnabledAtom, false);
+    isWebGlEnabled(): boolean {
+        return this.webglAddon != null;
     }
 
     resetCompositionState() {

package-lock.json

@@ -82,6 +82,7 @@
         "@table-nav/react": "^0.0.7",
         "@tanstack/react-table": "^8.21.3",
         "@tanstack/react-virtual": "^3.13.19",
+        "@xterm/addon-canvas": "^0.7.0",
         "@xterm/addon-fit": "^0.10.0",
         "@xterm/addon-search": "^0.15.0",
         "@xterm/addon-serialize": "^0.13.0",