fix termsize calculations for canvas renderer 7.2px not 8px

src/main.tsx

@@ -11,12 +11,10 @@ import cn from "classnames";
 import {TermWrap} from "./term";
 import type {SessionDataType, LineType, CmdDataType, RemoteType, RemoteStateType, RemoteInstanceType, RemotePtrType, HistoryItem, HistoryQueryOpts, RemoteEditType} from "./types";
 import localizedFormat from 'dayjs/plugin/localizedFormat';
-import {GlobalModel, GlobalCommandRunner, Session, Cmd, Window, Screen, ScreenWindow, riToRPtr, widthToCols} from "./model";
+import {GlobalModel, GlobalCommandRunner, Session, Cmd, Window, Screen, ScreenWindow, riToRPtr, widthToCols, termWidthFromCols, termHeightFromRows} from "./model";
 
 dayjs.extend(localizedFormat)
 
-const CellHeightPx = 16;
-const CellWidthPx = 8;
 const RemotePtyRows = 8;
 const RemotePtyCols = 80;
 const PasswordUnchangedSentinel = "--unchanged--";
@@ -352,9 +350,8 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width
             );
         }
         let termLoaded = this.termLoaded.get();
-        let termWidth = Math.max(Math.trunc((width - 20)/CellWidthPx), 10);
         let usedRows = sw.getUsedRows(cmd, width);
-        let totalHeight = CellHeightPx * usedRows;
+        let termHeight = termHeightFromRows(usedRows);
         let remote = model.getRemote(cmd.remoteId);
         let status = cmd.getStatus();
         let termOpts = cmd.getTermOpts();
@@ -390,7 +387,7 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width
                     <If condition={!isFocused}>
                         <div className="term-block" onClick={this.clickTermBlock}></div>
                     </If>
-                    <div className="terminal" id={"term-" + getLineId(line)} data-cmdid={line.cmdid} style={{height: totalHeight}}></div>
+                    <div className="terminal" id={"term-" + getLineId(line)} data-cmdid={line.cmdid} style={{height: termHeight}}></div>
                     <If condition={!termLoaded}><div style={{position: "absolute", top: 60, left: 30}}>(loading)</div></If>
                 </div>
             </div>
@@ -917,14 +914,14 @@ class InfoRemoteShow extends React.Component<{}, {}> {
                         </div>
                     </If>
                 </div>
-                <div key="term" className={cn("terminal-wrapper", {"focus": isTermFocused}, (remote != null ? "status-" + remote.status : null))} style={{overflowY: "hidden", display: (ptyRemoteId == null ? "none" : "block"), width: CellWidthPx*RemotePtyCols+15}}>
+                <div key="term" className={cn("terminal-wrapper", {"focus": isTermFocused}, (remote != null ? "status-" + remote.status : null))} style={{overflowY: "hidden", display: (ptyRemoteId == null ? "none" : "block"), width: termWidthFromCols(RemotePtyCols)}}>
                     <If condition={!isTermFocused}>
                         <div key="termblock" className="term-block" onClick={this.clickTermBlock}></div>
                     </If>
                     <If condition={inputModel.showNoInputMsg.get()}>
                         <div key="termtag" className="term-tag">input is only allowed while status is 'connecting'</div>
                     </If>
-                    <div key="terminal" className="terminal" id="term-remote" data-remoteid={ptyRemoteId} style={{height: CellHeightPx*RemotePtyRows}}></div>
+                    <div key="terminal" className="terminal" id="term-remote" data-remoteid={ptyRemoteId} style={{height: termHeightFromRows(RemotePtyRows)}}></div>
                 </div>
             </>
         );
@@ -1619,10 +1616,10 @@ class CmdInput extends React.Component<{}, {}> {
         let infoMsg = inputModel.infoMsg.get();
         let hasInfo = (infoMsg != null);
         let remoteShow = (infoMsg != null && !isBlank(infoMsg.ptyremoteid));
-        let focusVal = model.getFocusedLine();
+        let focusVal = inputModel.physicalInputFocused.get();
         return (
             <div className={cn("cmd-input has-background-black", {"has-info": infoShow}, {"has-history": historyShow}, {"has-remote": remoteShow})}>
-                <div key="focus" className={cn("focus-indicator", {"active": focusVal && focusVal.cmdInputFocus})}/>
+                <div key="focus" className={cn("focus-indicator", {"active": focusVal})}/>
                 <div key="minmax" onClick={this.onInfoToggle} className="input-minmax-control">
                     <If condition={infoShow || historyShow}>
                         <i className="fa fa-chevron-down"/>

src/model.ts

@@ -2,26 +2,34 @@ import * as mobx from "mobx";
 import {sprintf} from "sprintf-js";
 import {boundMethod} from "autobind-decorator";
 import {debounce} from "throttle-debounce";
-import {handleJsonFetchResponse, base64ToArray, genMergeData, genMergeSimpleData} from "./util";
+import {handleJsonFetchResponse, base64ToArray, genMergeData, genMergeSimpleData, boundInt} from "./util";
 import {TermWrap} from "./term";
 import {v4 as uuidv4} from "uuid";
 import type {SessionDataType, WindowDataType, LineType, RemoteType, HistoryItem, RemoteInstanceType, RemotePtrType, CmdDataType, FeCmdPacketType, TermOptsType, RemoteStateType, ScreenDataType, ScreenWindowType, ScreenOptsType, LayoutType, PtyDataUpdateType, ModelUpdateType, UpdateMessage, InfoType, CmdLineUpdateType, UIContextType, HistoryInfoType, HistoryQueryOpts, FeInputPacketType, TermWinSize, RemoteInputPacketType} from "./types";
 import {WSControl} from "./ws";
 
 var GlobalUser = "sawka";
-const DefaultCellWidth = 8;
+const DefaultCellWidth = 7.203125;
 const DefaultCellHeight = 16;
 const RemotePtyRows = 8; // also in main.tsx
 const RemotePtyCols = 80;
+const MinTermCols = 10;
+const MaxTermCols = 1024;
 
 function widthToCols(width : number) : number {
     let cols = Math.trunc((width - 25) / DefaultCellWidth) - 1;
-    if (cols < 0) {
+    cols = boundInt(cols, MinTermCols, MaxTermCols);
-        return 0;
-    }
     return cols;
 }
 
+function termWidthFromCols(cols : number) : number {
+    return Math.ceil(DefaultCellWidth*cols) + 15;
+}
+
+function termHeightFromRows(rows : number) : number {
+    return Math.ceil(DefaultCellHeight*rows);
+}
+
 type OV<V> = mobx.IObservableValue<V>;
 type OArr<V> = mobx.IObservableArray<V>;
 type OMap<K,V> = mobx.ObservableMap<K,V>;
@@ -1963,6 +1971,6 @@ if ((window as any).GlobalModal == null) {
 GlobalModel = (window as any).GlobalModel;
 GlobalCommandRunner = (window as any).GlobalCommandRunner;
 
-export {Model, Session, Window, GlobalModel, GlobalCommandRunner, Cmd, Screen, ScreenWindow, riToRPtr, widthToCols};
+export {Model, Session, Window, GlobalModel, GlobalCommandRunner, Cmd, Screen, ScreenWindow, riToRPtr, widthToCols, termWidthFromCols, termHeightFromRows};
 
 

src/sh2.less

@@ -456,6 +456,7 @@ html, body, #main {
     border-top: 1px solid #777;
     overflow: hidden;
     flex-shrink: 0;
+    position: relative;
 
     &:nth-child(2) {
         margin: 0px 5px 5px 5px;

src/term.ts

@@ -3,7 +3,8 @@ import {Terminal} from 'xterm';
 import {sprintf} from "sprintf-js";
 import {boundMethod} from "autobind-decorator";
 import {v4 as uuidv4} from "uuid";
-import {GlobalModel} from "./model";
+import {GlobalModel, widthToCols} from "./model";
+import {boundInt} from "./util";
 import type {TermOptsType, TermWinSize} from "./types";
 
 type DataUpdate = {
@@ -16,21 +17,9 @@ type WindowSize = {
     width: number,
 };
 
-const DefaultCellWidth = 8;
-const DefaultCellHeight = 16;
 const MinTermCols = 10;
 const MaxTermCols = 1024;
 
-function boundInt(ival : number, minVal : number, maxVal : number) : number {
-    if (ival < minVal) {
-        return minVal;
-    }
-    if (ival > maxVal) {
-        return maxVal;
-    }
-    return ival;
-}
-
 type TermContext = {sessionId? : string, cmdId? : string, remoteId? : string};
 
 // cmd-instance
@@ -67,11 +56,10 @@ class TermWrap {
             this.termSize = {rows: termOpts.rows, cols: termOpts.cols};
         }
         else {
-            let cols = Math.trunc((winSize.width - 25) / DefaultCellWidth) - 1;
+            let cols = widthToCols(winSize.width);
-            cols = boundInt(cols, MinTermCols, MaxTermCols);
             this.termSize = {rows: termOpts.rows, cols: cols};
         }
-        this.terminal = new Terminal({rows: this.termSize.rows, cols: this.termSize.cols, fontSize: 14, theme: {foreground: "#d3d7cf"}});
+        this.terminal = new Terminal({rows: this.termSize.rows, cols: this.termSize.cols, fontSize: 12, fontFamily: "JetBrains Mono", theme: {foreground: "#d3d7cf"}});
         this.terminal._core._inputHandler._parser.setErrorHandler((state) => {
             this.numParseErrors++;
             return state;

src/util.ts

@@ -162,4 +162,14 @@ function parseEnv0(envStr64 : string) : Map<string, string> {
     return rtn;
 }
 
-export {handleJsonFetchResponse, base64ToArray, genMergeData, genMergeSimpleData, parseEnv0};
+function boundInt(ival : number, minVal : number, maxVal : number) : number {
+    if (ival < minVal) {
+        return minVal;
+    }
+    if (ival > maxVal) {
+        return maxVal;
+    }
+    return ival;
+}
+
+export {handleJsonFetchResponse, base64ToArray, genMergeData, genMergeSimpleData, parseEnv0, boundInt};