fix conflicts

* center imageview images

* fix terminal selection colors #442

* add firacode font

public/themes/term-default.css

@@ -3,7 +3,7 @@
 
 :root {
     /* 
-     * term colors (16 + 5) form the base terminal theme 
+     * term colors (16 + 6) form the base terminal theme 
      * for consistency these colors should be used by plugins/applications
      */
     --term-black: #000000;
@@ -27,5 +27,6 @@
     --term-cmdtext: #ffffff;
     --term-foreground: #d3d7cf;
     --term-background: #000000;
-    --term-selection-background: #ffffff40;
+    --term-selection-background: #ffffff90;
+    --term-cursor-accent: #000000;
 }

public/themes/term-light.css

@@ -6,5 +6,6 @@
     --term-foreground: #000000;
     --term-background: #fefefe;
     --term-cmdtext: #000000;
-    --term-selection-background: #00000018;
+    --term-selection-background: #00000040;
+    --term-cursor-accent: #000000;
 }

src/app/clientsettings/clientsettings.tsx

@@ -87,6 +87,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         const availableFontFamilies: DropdownItem[] = [];
         availableFontFamilies.push({ label: "JetBrains Mono", value: "JetBrains Mono" });
         availableFontFamilies.push({ label: "Hack", value: "Hack" });
+        availableFontFamilies.push({ label: "Fira Code", value: "Fira Code" });
         return availableFontFamilies;
     }
 

src/app/common/modals/alert.tsx

@@ -44,7 +44,7 @@ class AlertModal extends React.Component<{}, {}> {
                         <Markdown text={message?.message ?? ""} extraClassName="bottom-margin" />
                     </If>
                     <If condition={!message?.markdown}>{message?.message}</If>
-                    <If condition={message.confirmflag}>
+                    <If condition={message?.confirmflag}>
                         <Checkbox
                             onChange={this.handleDontShowAgain}
                             label={"Don't show me this again"}

src/app/line/renderer/basicrenderer.tsx

@@ -0,0 +1,276 @@
+// Copyright 2023, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import * as React from "react";
+import * as mobxReact from "mobx-react";
+import * as mobx from "mobx";
+
+import { debounce } from "throttle-debounce";
+import * as util from "@/util/util";
+import { GlobalModel } from "@/models";
+
+class SimpleBlobRendererModel {
+    context: RendererContext;
+    opts: RendererOpts;
+    isDone: OV<boolean>;
+    api: RendererModelContainerApi;
+    savedHeight: number;
+    loading: OV<boolean>;
+    loadError: OV<string> = mobx.observable.box(null, {
+        name: "renderer-loadError",
+    });
+    lineState: LineStateType;
+    ptyData: PtyDataType;
+    ptyDataSource: (termContext: TermContextUnion) => Promise<PtyDataType>;
+    dataBlob: Blob;
+    readOnly: boolean;
+    notFound: boolean;
+
+    initialize(params: RendererModelInitializeParams): void {
+        this.loading = mobx.observable.box(true, { name: "renderer-loading" });
+        this.isDone = mobx.observable.box(params.isDone, {
+            name: "renderer-isDone",
+        });
+        this.context = params.context;
+        this.opts = params.opts;
+        this.api = params.api;
+        this.lineState = params.lineState;
+        this.savedHeight = params.savedHeight;
+        this.ptyDataSource = params.ptyDataSource;
+        if (this.isDone.get()) {
+            setTimeout(() => this.reload(0), 10);
+        }
+    }
+
+    dispose(): void {
+        return;
+    }
+
+    giveFocus(): void {
+        return;
+    }
+
+    updateOpts(update: RendererOptsUpdate): void {
+        Object.assign(this.opts, update);
+    }
+
+    updateHeight(newHeight: number): void {
+        if (this.savedHeight != newHeight) {
+            this.savedHeight = newHeight;
+            this.api.saveHeight(newHeight);
+        }
+    }
+
+    setIsDone(): void {
+        if (this.isDone.get()) {
+            return;
+        }
+        mobx.action(() => {
+            this.isDone.set(true);
+        })();
+        this.reload(0);
+    }
+
+    reload(delayMs: number): void {
+        mobx.action(() => {
+            this.loading.set(true);
+        })();
+        if (delayMs == 0) {
+            this.reload_noDelay();
+        } else {
+            setTimeout(() => {
+                this.reload_noDelay();
+            }, delayMs);
+        }
+    }
+
+    reload_noDelay(): void {
+        let source = this.lineState["prompt:source"] || "pty";
+        if (source == "pty") {
+            this.reloadPtyData();
+        } else if (source == "file") {
+            this.reloadFileData();
+        } else {
+            mobx.action(() => {
+                this.loadError.set("error: invalid load source: " + source);
+            })();
+        }
+    }
+
+    reloadFileData(): void {
+        // todo add file methods to API, so we don't have a GlobalModel dependency here!
+        let path = this.lineState["prompt:file"];
+        if (util.isBlank(path)) {
+            mobx.action(() => {
+                this.loadError.set("renderer has file source, but no prompt:file specified");
+            })();
+            return;
+        }
+        let rtnp = GlobalModel.readRemoteFile(this.context.screenId, this.context.lineId, path);
+        rtnp.then((file) => {
+            this.notFound = (file as any).notFound;
+            this.readOnly = (file as any).readOnly;
+            this.dataBlob = file;
+            mobx.action(() => {
+                this.loading.set(false);
+                this.loadError.set(null);
+            })();
+        }).catch((e) => {
+            mobx.action(() => {
+                this.loadError.set("error loading file data: " + e);
+            })();
+        });
+    }
+
+    reloadPtyData(): void {
+        this.readOnly = true;
+        let rtnp = this.ptyDataSource(this.context);
+        if (rtnp == null) {
+            console.log("no promise returned from ptyDataSource (simplerenderer)", this.context);
+            return;
+        }
+        rtnp.then((ptydata) => {
+            this.ptyData = ptydata;
+            this.dataBlob = new Blob([this.ptyData.data]);
+            mobx.action(() => {
+                this.loading.set(false);
+                this.loadError.set(null);
+            })();
+        }).catch((e) => {
+            mobx.action(() => {
+                this.loadError.set("error loading data: " + e);
+            })();
+        });
+    }
+
+    receiveData(pos: number, data: Uint8Array, reason?: string): void {
+        // this.dataBuf.receiveData(pos, data, reason);
+    }
+}
+
+@mobxReact.observer
+class SimpleBlobRenderer extends React.Component<
+    {
+        rendererContainer: RendererContainerType;
+        lineId: string;
+        plugin: RendererPluginType;
+        onHeightChange: () => void;
+        initParams: RendererModelInitializeParams;
+        scrollToBringIntoViewport: () => void;
+        isSelected: boolean;
+        shouldFocus: boolean;
+    },
+    {}
+> {
+    model: SimpleBlobRendererModel;
+    wrapperDivRef: React.RefObject<any> = React.createRef();
+    rszObs: ResizeObserver;
+    updateHeight_debounced: (newHeight: number) => void;
+
+    constructor(props: any) {
+        super(props);
+        let { rendererContainer, lineId, plugin, initParams } = this.props;
+        this.model = new SimpleBlobRendererModel();
+        this.model.initialize(initParams);
+        rendererContainer.registerRenderer(lineId, this.model);
+        this.updateHeight_debounced = debounce(1000, this.updateHeight.bind(this));
+    }
+
+    updateHeight(newHeight: number): void {
+        this.model.updateHeight(newHeight);
+    }
+
+    handleResize(entries: ResizeObserverEntry[]): void {
+        if (this.model.loading.get()) {
+            return;
+        }
+        if (this.props.onHeightChange) {
+            this.props.onHeightChange();
+        }
+        if (!this.model.loading.get() && this.wrapperDivRef.current != null) {
+            let height = this.wrapperDivRef.current.offsetHeight;
+            this.updateHeight_debounced(height);
+        }
+    }
+
+    checkRszObs() {
+        if (this.rszObs != null) {
+            return;
+        }
+        if (this.wrapperDivRef.current == null) {
+            return;
+        }
+        this.rszObs = new ResizeObserver(this.handleResize.bind(this));
+        this.rszObs.observe(this.wrapperDivRef.current);
+    }
+
+    componentDidMount() {
+        this.checkRszObs();
+    }
+
+    componentWillUnmount() {
+        let { rendererContainer, lineId } = this.props;
+        rendererContainer.unloadRenderer(lineId);
+        if (this.rszObs != null) {
+            this.rszObs.disconnect();
+            this.rszObs = null;
+        }
+    }
+
+    componentDidUpdate() {
+        this.checkRszObs();
+    }
+
+    render() {
+        let { plugin } = this.props;
+        let model = this.model;
+        if (model.loadError.get() != null) {
+            let errorText = model.loadError.get();
+            let height = this.model.savedHeight;
+            return (
+                <div ref={this.wrapperDivRef} style={{ minHeight: height, fontSize: model.opts.termFontSize }}>
+                    <div className="load-error-text">ERROR: {errorText}</div>
+                </div>
+            );
+        }
+        if (model.loading.get()) {
+            let height = this.model.savedHeight;
+            return (
+                <div
+                    ref={this.wrapperDivRef}
+                    className="renderer-loading"
+                    style={{ minHeight: height, fontSize: model.opts.termFontSize }}
+                >
+                    loading content <i className="fa fa-ellipsis fa-fade" />
+                </div>
+            );
+        }
+        let Comp = plugin.simpleComponent;
+        if (Comp == null) {
+            <div ref={this.wrapperDivRef}>(no component found in plugin)</div>;
+        }
+        let { festate, cmdstr, exitcode } = this.props.initParams.rawCmd;
+        return (
+            <div ref={this.wrapperDivRef} className="sr-wrapper">
+                <Comp
+                    cwd={festate.cwd}
+                    cmdstr={cmdstr}
+                    exitcode={exitcode}
+                    data={model.dataBlob as ExtBlob}
+                    readOnly={model.readOnly}
+                    notFound={model.notFound}
+                    lineState={model.lineState}
+                    context={model.context}
+                    opts={model.opts}
+                    savedHeight={model.savedHeight}
+                    scrollToBringIntoViewport={this.props.scrollToBringIntoViewport}
+                    isSelected={this.props.isSelected}
+                    shouldFocus={this.props.shouldFocus}
+                    rendererApi={model.api}
+                />
+            </div>
+        );
+    }
+}
+
+export { SimpleBlobRendererModel, SimpleBlobRenderer };

src/electron/emain.ts

@@ -303,21 +303,16 @@ function shFrameNavHandler(event: Electron.Event<Electron.WebContentsWillFrameNa
         // only use this handler to process iframe events (non-iframe events go to shNavHandler)
         return;
     }
+    event.preventDefault();
     const url = event.url;
     console.log(`frame-navigation url=${url} frame=${event.frame.name}`);
     if (event.frame.name == "webview") {
         // "webview" links always open in new window
         // this will *not* effect the initial load because srcdoc does not count as an electron navigation
         console.log("open external, frameNav", url);
-        event.preventDefault();
         electron.shell.openExternal(url);
         return;
     }
-    if (event.frame.name == "pdfview" && url.startsWith("blob:file:///")) {
-        // allowed
-        return;
-    }
-    event.preventDefault();
     console.log("frame navigation canceled");
 }
 

src/models/bookmarks.ts

@@ -206,7 +206,7 @@ class BookmarksModel {
     }
 
     handleDocKeyDown(e: any): void {
-        let waveEvent = adaptFromReactOrNativeKeyEvent(e);
+        const waveEvent = adaptFromReactOrNativeKeyEvent(e);
         if (checkKeyPressed(waveEvent, "Escape")) {
             e.preventDefault();
             if (this.editingBookmark.get() != null) {

src/models/clientsettingsview.ts

@@ -3,6 +3,7 @@
 
 import * as mobx from "mobx";
 import { Model } from "./model";
+import { checkKeyPressed, adaptFromReactOrNativeKeyEvent } from "@/util/keyutil";
 
 class ClientSettingsViewModel {
     globalModel: Model;
@@ -21,6 +22,15 @@ class ClientSettingsViewModel {
             this.globalModel.activeMainView.set("clientsettings");
         })();
     }
+
+    handleDocKeyDown(e: any): void {
+        const waveEvent = adaptFromReactOrNativeKeyEvent(e);
+        if (checkKeyPressed(waveEvent, "Escape")) {
+            e.preventDefault();
+            this.closeView();
+            return;
+        }
+    }
 }
 
 export { ClientSettingsViewModel };

src/models/connectionsview.ts

@@ -3,6 +3,7 @@
 
 import * as mobx from "mobx";
 import { Model } from "./model";
+import { checkKeyPressed, adaptFromReactOrNativeKeyEvent } from "@/util/keyutil";
 
 class ConnectionsViewModel {
     globalModel: Model;
@@ -21,6 +22,15 @@ class ConnectionsViewModel {
             this.globalModel.activeMainView.set("connections");
         })();
     }
+
+    handleDocKeyDown(e: any): void {
+        const waveEvent = adaptFromReactOrNativeKeyEvent(e);
+        if (checkKeyPressed(waveEvent, "Escape")) {
+            e.preventDefault();
+            this.closeView();
+            return;
+        }
+    }
 }
 
 export { ConnectionsViewModel };

src/models/historyview.ts

@@ -291,7 +291,7 @@ class HistoryViewModel {
     }
 
     handleDocKeyDown(e: any): void {
-        let waveEvent = adaptFromReactOrNativeKeyEvent(e);
+        const waveEvent = adaptFromReactOrNativeKeyEvent(e);
         if (checkKeyPressed(waveEvent, "Escape")) {
             e.preventDefault();
             this.closeView();

src/models/modals.ts

@@ -18,10 +18,11 @@ class ModalsModel {
         }
     }
 
-    popModal() {
+    popModal(callback?: () => void) {
         mobx.action(() => {
             this.store.pop();
         })();
+        callback && callback();
     }
 }
 

src/models/model.ts

@@ -372,7 +372,6 @@ class Model {
     cancelAlert(): void {
         mobx.action(() => {
             this.alertMessage.set(null);
-            this.modalsModel.popModal();
         })();
         if (this.alertPromiseResolver != null) {
             this.alertPromiseResolver(false);
@@ -493,7 +492,7 @@ class Model {
         if (this.alertMessage.get() != null) {
             if (checkKeyPressed(waveEvent, "Escape")) {
                 e.preventDefault();
-                this.cancelAlert();
+                this.modalsModel.popModal(() => this.cancelAlert());
                 return;
             }
             if (checkKeyPressed(waveEvent, "Enter")) {
@@ -503,6 +502,10 @@ class Model {
             }
             return;
         }
+        if (checkKeyPressed(waveEvent, "Escape") && this.modalsModel.store.length > 0) {
+            this.modalsModel.popModal();
+            return;
+        }
         if (this.activeMainView.get() == "bookmarks") {
             this.bookmarksModel.handleDocKeyDown(e);
         }
@@ -510,10 +513,10 @@ class Model {
             this.historyViewModel.handleDocKeyDown(e);
         }
         if (this.activeMainView.get() == "connections") {
-            this.historyViewModel.handleDocKeyDown(e);
+            this.connectionViewModel.handleDocKeyDown(e);
         }
         if (this.activeMainView.get() == "clientsettings") {
-            this.historyViewModel.handleDocKeyDown(e);
+            this.clientSettingsViewModel.handleDocKeyDown(e);
         } else {
             if (checkKeyPressed(waveEvent, "Escape")) {
                 e.preventDefault();
@@ -521,9 +524,6 @@ class Model {
                     this.showSessionView();
                     return;
                 }
-                if (this.clearModals()) {
-                    return;
-                }
                 const inputModel = this.inputModel;
                 inputModel.toggleInfoMsg();
                 if (inputModel.inputMode.get() != null) {
@@ -643,33 +643,6 @@ class Model {
         return screen.getTermWrap(line.lineid);
     }
 
-    clearModals(): boolean {
-        let didSomething = false;
-        mobx.action(() => {
-            if (this.screenSettingsModal.get()) {
-                this.screenSettingsModal.set(null);
-                didSomething = true;
-            }
-            if (this.sessionSettingsModal.get()) {
-                this.sessionSettingsModal.set(null);
-                didSomething = true;
-            }
-            if (this.screenSettingsModal.get()) {
-                this.screenSettingsModal.set(null);
-                didSomething = true;
-            }
-            if (this.clientSettingsModal.get()) {
-                this.clientSettingsModal.set(false);
-                didSomething = true;
-            }
-            if (this.lineSettingsModal.get()) {
-                this.lineSettingsModal.set(null);
-                didSomething = true;
-            }
-        })();
-        return didSomething;
-    }
-
     restartWaveSrv(): void {
         getApi().restartWaveSrv();
     }
@@ -1583,15 +1556,12 @@ class Model {
         return remote.remotecanonicalname;
     }
 
-    readRemoteFile(screenId: string, lineId: string, path: string, mimetype?: string): Promise<ExtFile> {
-        const urlParams: Record<string, string> = {
+    readRemoteFile(screenId: string, lineId: string, path: string): Promise<ExtFile> {
+        const urlParams = {
             screenid: screenId,
             lineid: lineId,
             path: path,
         };
-        if (mimetype != null) {
-            urlParams["mimetype"] = mimetype;
-        }
         const usp = new URLSearchParams(urlParams);
         const url = new URL(this.getBaseHostPort() + "/api/read-file?" + usp.toString());
         const fetchHeaders = this.getFetchHeaders();

src/plugins/image/image.less

@@ -1,4 +1,10 @@
 .image-renderer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding-top: var(--termpad);
+
     img {
         display: block;
     }

src/plugins/pdf/pdf.less

@@ -1,7 +0,0 @@
-.pdf-renderer {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    padding-top: var(--termpad);
-}

src/plugins/pdf/pdf.tsx

@@ -1,49 +0,0 @@
-// Copyright 2024, Command Line Inc.
-// SPDX-License-Identifier: Apache-2.0
-
-import * as React from "react";
-import * as mobx from "mobx";
-import * as mobxReact from "mobx-react";
-
-import "./pdf.less";
-
-@mobxReact.observer
-class SimplePdfRenderer extends React.Component<
-    { data: ExtBlob; context: RendererContext; opts: RendererOpts; savedHeight: number },
-    {}
-> {
-    objUrl: string = null;
-
-    componentWillUnmount() {
-        if (this.objUrl != null) {
-            URL.revokeObjectURL(this.objUrl);
-        }
-    }
-
-    render() {
-        let dataBlob = this.props.data;
-        if (dataBlob == null || dataBlob.notFound) {
-            return (
-                <div className="pdf-renderer" style={{ fontSize: this.props.opts.termFontSize }}>
-                    <div className="load-error-text">
-                        ERROR: file {dataBlob && dataBlob.name ? JSON.stringify(dataBlob.name) : ""} not found
-                    </div>
-                </div>
-            );
-        }
-        if (this.objUrl == null) {
-            const pdfBlob = new File([dataBlob], "test.pdf", { type: "application/pdf" });
-            this.objUrl = URL.createObjectURL(pdfBlob);
-        }
-        const opts = this.props.opts;
-        const maxHeight = opts.maxSize.height - 10;
-        const maxWidth = opts.maxSize.width - 10;
-        return (
-            <div className="pdf-renderer">
-                <iframe src={this.objUrl} width={maxWidth} height={maxHeight} name="pdfview" />
-            </div>
-        );
-    }
-}
-
-export { SimplePdfRenderer };

src/plugins/plugins.ts

@@ -7,7 +7,6 @@ import { SourceCodeRenderer } from "./code/code";
 import { SimpleMustacheRenderer } from "./mustache/mustache";
 import { CSVRenderer } from "./csv/csv";
 import { OpenAIRenderer, OpenAIRendererModel } from "./openai/openai";
-import { SimplePdfRenderer } from "./pdf/pdf";
 import { isBlank } from "@/util/util";
 import { sprintf } from "sprintf-js";
 
@@ -79,16 +78,6 @@ const PluginConfigs: RendererPluginType[] = [
         mimeTypes: ["image/*"],
         simpleComponent: SimpleImageRenderer,
     },
-    {
-        name: "pdf",
-        rendererType: "simple",
-        heightType: "pixels",
-        dataType: "blob",
-        collapseType: "hide",
-        globalCss: null,
-        mimeTypes: ["application/pdf"],
-        simpleComponent: SimplePdfRenderer,
-    },
 ];
 
 class PluginModelClass {

src/plugins/terminal/term.ts

@@ -58,6 +58,9 @@ function getThemeFromCSSVars(): ITheme {
     theme.brightCyan = rootStyle.getPropertyValue("--term-bright-cyan");
     theme.brightWhite = rootStyle.getPropertyValue("--term-bright-white");
     theme.selectionBackground = rootStyle.getPropertyValue("--term-selection-background");
+    theme.selectionInactiveBackground = rootStyle.getPropertyValue("--term-selection-background");
+    theme.cursor = rootStyle.getPropertyValue("--term-selection-background");
+    theme.cursorAccent = rootStyle.getPropertyValue("--term-cursor-accent");
     return theme;
 }
 

src/util/fontutil.ts

@@ -5,6 +5,7 @@ let isJetBrainsMonoLoaded = false;
 let isLatoFontLoaded = false;
 let isHackFontLoaded = false;
 let isBaseFontsLoaded = false;
+let isFiraCodeLoaded = false;
 
 function addToFontFaceSet(fontFaceSet: FontFaceSet, fontFace: FontFace) {
     // any cast to work around typing issue
@@ -55,6 +56,25 @@ function loadLatoFont() {
     latoFontBold.load();
 }
 
+function loadFiraCodeFont() {
+    if (isFiraCodeLoaded) {
+        return;
+    }
+    isFiraCodeLoaded = true;
+    let firaCodeRegular = new FontFace("Fira Code", "url('public/fonts/firacode-regular.woff2')", {
+        style: "normal",
+        weight: "400",
+    });
+    let firaCodeBold = new FontFace("Fira Code", "url('public/fonts/firacode-bold.woff2')", {
+        style: "normal",
+        weight: "700",
+    });
+    addToFontFaceSet(document.fonts, firaCodeRegular);
+    addToFontFaceSet(document.fonts, firaCodeBold);
+    firaCodeRegular.load();
+    firaCodeBold.load();
+}
+
 function loadHackFont() {
     if (isHackFontLoaded) {
         return;
@@ -104,6 +124,7 @@ function loadFonts() {
     loadLatoFont();
     loadJetBrainsMonoFont();
     loadHackFont();
+    loadFiraCodeFont();
 }
 
 export { loadFonts };