line settings modal checkpoint

src/linecomps.tsx

@@ -101,6 +101,18 @@ function getLineDateTimeStr(ts : number) : string {
 
 @mobxReact.observer
 class LineAvatar extends React.Component<{line : LineType, cmd : Cmd}, {}> {
+    @boundMethod
+    handleRightClick(e : any) {
+        e.preventDefault();
+        e.stopPropagation();
+        let {line} = this.props;
+        if (line != null) {
+            mobx.action(() => {
+                GlobalModel.lineSettingsModal.set(this.props.line);
+            })();
+        }
+    }
+    
     render() {
         let {line, cmd} = this.props;
         let lineNumStr = (line.linenumtemp ? "~" : "") + String(line.linenum);
@@ -108,7 +120,7 @@ class LineAvatar extends React.Component<{line : LineType, cmd : Cmd}, {}> {
         let rtnstate = (cmd != null ? cmd.getRtnState() : false);
         let isComment = (line.linetype == "text");
         return (
-            <div className={cn("avatar", "num-"+lineNumStr.length, "status-" + status, {"ephemeral": line.ephemeral}, {"rtnstate": rtnstate})}>
+            <div onContextMenu={(e) => this.handleRightClick(e)} className={cn("avatar", "num-"+lineNumStr.length, "status-" + status, {"ephemeral": line.ephemeral}, {"rtnstate": rtnstate})}>
                 {lineNumStr}
                 <If condition={status == "hangup" || status == "error"}>
                     <i className="fa-sharp fa-solid fa-triangle-exclamation status-icon"/>
@@ -497,7 +509,8 @@ class LineCmd extends React.Component<{screen : LineContainerModel, line : LineT
             {"top-border": topBorder},
         );
         let rendererPlugin : RendererPluginType = null;
-        if (!isBlank(line.renderer) && line.renderer != "terminal") {
+        let isNoneRenderer = (line.renderer == "none");
+        if (!isBlank(line.renderer) && line.renderer != "terminal" && !isNoneRenderer) {
             rendererPlugin = GlobalModel.getRendererPluginByName(line.renderer);
         }
         let rendererType = getRendererType(line);
@@ -527,7 +540,7 @@ class LineCmd extends React.Component<{screen : LineContainerModel, line : LineT
                         </If>
                     </div>
                 </div>
-                <If condition={rendererPlugin == null}>
+                <If condition={rendererPlugin == null && !isNoneRenderer}>
                     <TerminalRenderer screen={screen} line={line} width={width} staticRender={staticRender} visible={visible} onHeightChange={this.handleHeightChange} collapsed={isCollapsed}/>
                 </If>
                 <If condition={rendererPlugin != null}>

src/main.tsx

@@ -18,7 +18,7 @@ import remarkGfm from 'remark-gfm'
 import {BookmarksView} from "./bookmarks";
 import {HistoryView} from "./history";
 import {Line, Prompt} from "./linecomps";
-import {ScreenSettingsModal, SessionSettingsModal} from "./settings";
+import {ScreenSettingsModal, SessionSettingsModal, LineSettingsModal} from "./settings";
 import {renderCmdText} from "./elements";
 
 dayjs.extend(localizedFormat)
@@ -2798,6 +2798,7 @@ class Main extends React.Component<{}, {}> {
 
     @boundMethod
     handleContextMenu(e : any) {
+        console.log("main contextmenu");
         let isInNonTermInput = false;
         let activeElem = document.activeElement;
         if (activeElem != null && activeElem.nodeName == "TEXTAREA") {
@@ -2826,6 +2827,7 @@ class Main extends React.Component<{}, {}> {
     render() {
         let screenSettingsModal = GlobalModel.screenSettingsModal.get();
         let sessionSettingsModal = GlobalModel.sessionSettingsModal.get();
+        let lineSettingsModal = GlobalModel.lineSettingsModal.get();
         return (
             <div id="main" onContextMenu={this.handleContextMenu}>
                 <div className="main-content">
@@ -2847,6 +2849,9 @@ class Main extends React.Component<{}, {}> {
                 <If condition={sessionSettingsModal != null}>
                     <SessionSettingsModal key={sessionSettingsModal} sessionId={sessionSettingsModal}/>
                 </If>
+                <If condition={lineSettingsModal != null}>
+                    <LineSettingsModal key={lineSettingsModal.lineid} line={lineSettingsModal}/>
+                </If>
             </div>
         );
     }

src/model.ts

@@ -2356,6 +2356,7 @@ class Model {
     welcomeModalOpen : OV<boolean> = mobx.observable.box(false, {name: "welcomeModalOpen"});
     screenSettingsModal : OV<{sessionId : string, screenId : string}> = mobx.observable.box(null, {name: "screenSettingsModal"});
     sessionSettingsModal : OV<string> = mobx.observable.box(null, {name: "sessionSettingsModal"});
+    lineSettingsModal : OV<LineType> = mobx.observable.box(null, {name: "lineSettingsModal"});
     rendererPlugins : RendererPluginType[] = [];
 
     inputModel : InputModel;

src/settings.tsx

@@ -7,6 +7,7 @@ import {If, For, When, Otherwise, Choose} from "tsx-control-statements/component
 import cn from "classnames";
 import {GlobalModel, GlobalCommandRunner, TabColors} from "./model";
 import {Toggle} from "./elements";
+import {LineType} from "./types";
 
 type OV<V> = mobx.IObservableValue<V>;
 type OArr<V> = mobx.IObservableArray<V>;
@@ -229,4 +230,59 @@ class SessionSettingsModal extends React.Component<{sessionId : string}, {}> {
     }
 }
 
-export {ScreenSettingsModal, SessionSettingsModal};
+@mobxReact.observer
+class LineSettingsModal extends React.Component<{line : LineType}, {}> {
+    constructor(props : any) {
+        super(props);
+    }
+    
+    @boundMethod
+    closeModal() : void {
+        mobx.action(() => {
+            GlobalModel.lineSettingsModal.set(null);
+        })();
+    }
+
+    @boundMethod
+    handleOK() : void {
+        mobx.action(() => {
+            GlobalModel.lineSettingsModal.set(null);
+        })();
+    }
+
+    render() {
+        let {line} = this.props;
+        if (line == null) {
+            return null;
+        }
+        return (
+            <div className={cn("modal line-settings-modal settings-modal prompt-modal is-active")}>
+                <div className="modal-background"/>
+                <div className="modal-content">
+                    <header>
+                        <div className="modal-title">line settings ({line.linenum})</div>
+                        <div className="close-icon">
+                            <i onClick={this.closeModal} className="fa-sharp fa-solid fa-times"/>
+                        </div>
+                    </header>
+                    <div className="inner-content">
+                        <div className="settings-field">
+                            <div className="settings-label">
+                                Renderer
+                            </div>
+                            <div className="settings-input">
+                                xxx
+                            </div>
+                        </div>
+                    </div>
+                    <footer>
+                        <div onClick={this.closeModal} className="button is-prompt-cancel is-outlined is-small">Cancel</div>
+                        <div onClick={this.handleOK} className="button is-prompt-green is-outlined is-small">OK</div>
+                    </footer>
+                </div>
+            </div>
+        );
+    }
+}
+
+export {ScreenSettingsModal, SessionSettingsModal, LineSettingsModal};