diff --git a/src/main.tsx b/src/main.tsx index 5b580cb68..476669e08 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -3,6 +3,7 @@ import * as mobxReact from "mobx-react"; import * as mobx from "mobx"; import {sprintf} from "sprintf-js"; import {boundMethod} from "autobind-decorator"; +import {debounce} from "throttle-debounce"; import {v4 as uuidv4} from "uuid"; import dayjs from "dayjs"; import {If, For, When, Otherwise, Choose} from "tsx-control-statements/components"; @@ -10,7 +11,7 @@ import cn from "classnames"; import {TermWrap} from "./term"; import type {SessionDataType, LineType, CmdDataType, RemoteType, RemoteStateType, RemoteInstanceType, RemotePtrType, HistoryItem, HistoryQueryOpts} from "./types"; import localizedFormat from 'dayjs/plugin/localizedFormat'; -import {GlobalModel, GlobalCommandRunner, Session, Cmd, Window, Screen, ScreenWindow, riToRPtr} from "./model"; +import {GlobalModel, GlobalCommandRunner, Session, Cmd, Window, Screen, ScreenWindow, riToRPtr, widthToCols} from "./model"; dayjs.extend(localizedFormat) @@ -1018,8 +1019,24 @@ class ScreenWindowView extends React.Component<{sw : ScreenWindow}, {}> { randomId : string; lastHeight : number = null; + width : mobx.IObservableValue = mobx.observable.box(0); + setWidth_debounced : (width : number) => void; + constructor(props : any) { super(props); + this.setWidth_debounced = debounce(1000, this.setWidth.bind(this)); + } + + setWidth(width : number) : void { + mobx.action(() => { + this.width.set(width); + let {sw} = this.props; + let cols = widthToCols(width); + if (sw == null || cols == 0) { + return; + } + sw.colsCallback(cols); + })(); } scrollToBottom(reason : string) { @@ -1061,6 +1078,8 @@ class ScreenWindowView extends React.Component<{sw : ScreenWindow}, {}> { } let wvElem = document.getElementById(this.getWindowViewDOMId()); if (wvElem != null) { + let width = wvElem.offsetWidth; + this.setWidth(width); this.rszObs = new ResizeObserver(this.handleResize.bind(this)); this.rszObs.observe(wvElem); } @@ -1076,7 +1095,6 @@ class ScreenWindowView extends React.Component<{sw : ScreenWindow}, {}> { if (this.interObs) { this.interObs.disconnect(); } - this.props.sw.setWidth(0); } handleResize(entries : any) { @@ -1085,7 +1103,7 @@ class ScreenWindowView extends React.Component<{sw : ScreenWindow}, {}> { } let entry = entries[0]; let width = entry.target.offsetWidth; - this.props.sw.setWidth(width); + this.setWidth_debounced(width); if (this.lastHeight == null) { this.lastHeight = entry.target.offsetHeight; return; @@ -1166,7 +1184,7 @@ class ScreenWindowView extends React.Component<{sw : ScreenWindow}, {}> { if (win.loadError.get() != null) { return this.renderError(sprintf("(%s)", win.loadError.get())); } - if (sw.width.get() == 0) { + if (this.width.get() == 0) { return this.renderError(""); } let idx = 0; @@ -1191,7 +1209,7 @@ class ScreenWindowView extends React.Component<{sw : ScreenWindow}, {}> {
- win.lines.length-1-7}/> + win.lines.length-1-7}/>
diff --git a/src/model.ts b/src/model.ts index 67d123119..84e1a980a 100644 --- a/src/model.ts +++ b/src/model.ts @@ -253,9 +253,7 @@ class ScreenWindow { name : OV; layout : OV; shouldFollow : OV = mobx.observable.box(true); - width : OV = mobx.observable.box(0); - widthInCols : number; - colsCallback_debounced : (cols : number) => void; + lastCols : number; // cmdid => TermWrap terms : Record = {}; @@ -266,8 +264,6 @@ class ScreenWindow { this.windowId = swdata.windowid; this.name = mobx.observable.box(swdata.name); this.layout = mobx.observable.box(swdata.layout); - this.colsCallback_debounced = debounce(1000, this.colsCallback.bind(this)); - this.widthInCols = 0; } updatePtyData(ptyMsg : PtyDataUpdateType) { @@ -289,27 +285,19 @@ class ScreenWindow { } colsCallback(cols : number) : void { - if (!this.isActive()) { + if (!this.isActive() || cols == 0) { return; } - console.log("cols set", cols); + if (cols == this.lastCols) { + return; + } + this.lastCols = cols; for (let cmdid in this.terms) { this.terms[cmdid].resizeCols(cols); } GlobalCommandRunner.resizeWindow(this.windowId, cols); } - setWidth(width : number) : void { - mobx.action(() => { - let oldCols = this.widthInCols; - this.width.set(width); - this.widthInCols = widthToCols(width); - if (this.widthInCols > 0 && this.widthInCols != oldCols) { - this.colsCallback_debounced(this.widthInCols); - } - })(); - } - getTermWrap(cmdId : string) : TermWrap { return this.terms[cmdId]; } @@ -1296,7 +1284,7 @@ class Model { } let sw = screen.getActiveSW(); if (sw != null) { - rtn.termopts.cols = widthToCols(sw.width.get()); + rtn.termopts.cols = sw.lastCols; } } }