waveterm/backup
0
0
Fork 0
mirror of https://github.com/wavetermdev/backup.git synced 2026-08-05 13:57:07 -07:00
Code Issues Packages Projects Releases Wiki Activity

big update to support screen consolidation

Browse Source
This commit is contained in:
sawka
2023-03-13 12:09:17 -07:00
parent ed6737157b
commit 0afacbd6d2
5 changed files with 315 additions and 456 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/history.tsx
+1 -1
View File
@@ -545,7 +545,7 @@ class LineContainer extends React.Component<{historyId : string, width : number}
<If condition={session == null}>
<div className="no-line-context"/>
</If>
<Line sw={hvm.specialLineContainer} line={this.line} width={width} staticRender={false} visible={this.visible} onHeightChange={this.handleHeightChange} overrideCollapsed={this.overrideCollapsed} topBorder={false} renderMode="normal"/>
<Line screen={hvm.specialLineContainer} line={this.line} width={width} staticRender={false} visible={this.visible} onHeightChange={this.handleHeightChange} overrideCollapsed={this.overrideCollapsed} topBorder={false} renderMode="normal"/>
</div>
);
}
src/linecomps.tsx
+47 -47
View File
@@ -7,7 +7,7 @@ import dayjs from "dayjs";
import localizedFormat from 'dayjs/plugin/localizedFormat';
import {ImageRendererModel} from "./imagerenderer";
import {If, For, When, Otherwise, Choose} from "tsx-control-statements/components";
import {GlobalModel, GlobalCommandRunner, Session, Cmd, Window, Screen, ScreenWindow, windowWidthToCols, windowHeightToRows, termHeightFromRows, termWidthFromCols} from "./model";
import {GlobalModel, GlobalCommandRunner, Session, Cmd, Window, Screen, windowWidthToCols, windowHeightToRows, termHeightFromRows, termWidthFromCols} from "./model";
import type {LineType, CmdDataType, FeStateType, RemoteType, RemotePtrType, RenderModeType} from "./types";
import cn from "classnames";
import {TermWrap} from "./term";
@@ -20,7 +20,7 @@ type OArr<V> = mobx.IObservableArray<V>;
type OMap<K,V> = mobx.ObservableMap<K,V>;
type HeightChangeCallbackType = (lineNum : number, newHeight : number, oldHeight : number) => void;
type RendererComponentProps = {sw : LineContainerModel, line : LineType, width : number, staticRender : boolean, visible : OV<boolean>, onHeightChange : HeightChangeCallbackType, collapsed : boolean};
type RendererComponentProps = {screen : LineContainerModel, line : LineType, width : number, staticRender : boolean, visible : OV<boolean>, onHeightChange : HeightChangeCallbackType, collapsed : boolean};
type RendererComponentType = { new(props : RendererComponentProps) : React.Component<RendererComponentProps, {}> };
function isBlank(s : string) : boolean {
@@ -125,7 +125,7 @@ class LineAvatar extends React.Component<{line : LineType, cmd : Cmd}, {}> {
@mobxReact.observer
class LineCmd extends React.Component<{sw : LineContainerModel, line : LineType, width : number, staticRender : boolean, visible : OV<boolean>, onHeightChange : HeightChangeCallbackType, topBorder : boolean, renderMode : RenderModeType, overrideCollapsed : OV<boolean>, noSelect? : boolean}, {}> {
class LineCmd extends React.Component<{screen : LineContainerModel, line : LineType, width : number, staticRender : boolean, visible : OV<boolean>, onHeightChange : HeightChangeCallbackType, topBorder : boolean, renderMode : RenderModeType, overrideCollapsed : OV<boolean>, noSelect? : boolean}, {}> {
lineRef : React.RefObject<any> = React.createRef();
cmdTextRef : React.RefObject<any> = React.createRef();
rtnStateDiff : mobx.IObservableValue<string> = mobx.observable.box(null, {name: "linecmd-rtn-state-diff"});
@@ -139,7 +139,7 @@ class LineCmd extends React.Component<{sw : LineContainerModel, line : LineType,
}
checkStateDiffLoad() : void {
let {sw, line, staticRender, visible} = this.props;
let {screen, line, staticRender, visible} = this.props;
if (staticRender || this.isCollapsed()) {
return;
}
@@ -150,7 +150,7 @@ class LineCmd extends React.Component<{sw : LineContainerModel, line : LineType,
}
return;
}
let cmd = sw.getCmd(line);
let cmd = screen.getCmd(line);
if (cmd == null || !cmd.getRtnState() || this.rtnStateDiffFetched) {
return;
}
@@ -200,9 +200,9 @@ class LineCmd extends React.Component<{sw : LineContainerModel, line : LineType,
@boundMethod
doRefresh() {
let {sw, line} = this.props;
let {screen, line} = this.props;
let model = GlobalModel;
let termWrap = sw.getRenderer(line.cmdid);
let termWrap = screen.getRenderer(line.cmdid);
if (termWrap != null) {
termWrap.reload(500);
}
@@ -321,7 +321,7 @@ class LineCmd extends React.Component<{sw : LineContainerModel, line : LineType,
return;
}
}
GlobalCommandRunner.swSelectLine(String(line.linenum), "cmd");
GlobalCommandRunner.screenSelectLine(String(line.linenum), "cmd");
}
@boundMethod
@@ -377,8 +377,8 @@ class LineCmd extends React.Component<{sw : LineContainerModel, line : LineType,
}
renderSimple() {
let {sw, line, width, topBorder, renderMode} = this.props;
let cmd = sw.getCmd(line);
let {screen, line, width, topBorder, renderMode} = this.props;
let cmd = screen.getCmd(line);
let isCollapsed = this.isCollapsed();
let mainDivCn = cn(
"line",
@@ -394,7 +394,7 @@ class LineCmd extends React.Component<{sw : LineContainerModel, line : LineType,
// else: 53+(lines*lineheight)
let height = (isCollapsed ? 30 : 42); // height of zero height terminal
if (!isCollapsed) {
let usedRows = sw.getUsedRows(line, cmd, width);
let usedRows = screen.getUsedRows(line, cmd, width);
if (usedRows > 0) {
height = 53 + termHeightFromRows(usedRows, GlobalModel.termFontSize.get());
}
@@ -427,7 +427,7 @@ class LineCmd extends React.Component<{sw : LineContainerModel, line : LineType,
}
render() {
let {sw, line, width, staticRender, visible, topBorder, renderMode} = this.props;
let {screen, line, width, staticRender, visible, topBorder, renderMode} = this.props;
let model = GlobalModel;
let lineid = line.lineid;
let isVisible = visible.get();
@@ -435,7 +435,7 @@ class LineCmd extends React.Component<{sw : LineContainerModel, line : LineType,
return this.renderSimple();
}
let formattedTime = getLineDateTimeStr(line.ts);
let cmd = sw.getCmd(line);
let cmd = screen.getCmd(line);
if (cmd == null) {
return (
<div className="line line-invalid" id={this.getLineDomId()} ref={this.lineRef} data-lineid={line.lineid} data-linenum={line.linenum} data-windowid={line.windowid}>
@@ -445,15 +445,15 @@ class LineCmd extends React.Component<{sw : LineContainerModel, line : LineType,
}
let status = cmd.getStatus();
let lineNumStr = (line.linenumtemp ? "~" : "") + String(line.linenum);
let isSelected = mobx.computed(() => (sw.getSelectedLine() == line.linenum), {name: "computed-isSelected"}).get();
let isPhysicalFocused = mobx.computed(() => sw.getIsFocused(line.linenum), {name: "computed-getIsFocused"}).get();
let isSelected = mobx.computed(() => (screen.getSelectedLine() == line.linenum), {name: "computed-isSelected"}).get();
let isPhysicalFocused = mobx.computed(() => screen.getIsFocused(line.linenum), {name: "computed-getIsFocused"}).get();
let isFocused = mobx.computed(() => {
let swFocusType = sw.getFocusType();
return isPhysicalFocused && (swFocusType == "cmd" || swFocusType == "cmd-fg")
let screenFocusType = screen.getFocusType();
return isPhysicalFocused && (screenFocusType == "cmd" || screenFocusType == "cmd-fg")
}, {name: "computed-isFocused"}).get();
let isFgFocused = mobx.computed(() => {
let swFocusType = sw.getFocusType();
return isPhysicalFocused && swFocusType == "cmd-fg"
let screenFocusType = screen.getFocusType();
return isPhysicalFocused && screenFocusType == "cmd-fg"
}, {name: "computed-isFgFocused"}).get();
let isStatic = staticRender;
let isRunning = cmd.isRunning()
@@ -500,7 +500,7 @@ class LineCmd extends React.Component<{sw : LineContainerModel, line : LineType,
</If>
</div>
</div>
<RendererComponent sw={sw} line={line} width={width} staticRender={staticRender} visible={visible} onHeightChange={this.handleHeightChange} collapsed={isCollapsed}/>
<RendererComponent screen={screen} line={line} width={width} staticRender={staticRender} visible={visible} onHeightChange={this.handleHeightChange} collapsed={isCollapsed}/>
<If condition={!isCollapsed && cmd.getRtnState()}>
<div key="rtnstate" className="cmd-rtnstate" style={{visibility: ((cmd.getStatus() == "done") ? "visible" : "hidden")}}>
<If condition={rsdiff == null || rsdiff == ""}>
@@ -520,7 +520,7 @@ class LineCmd extends React.Component<{sw : LineContainerModel, line : LineType,
}
@mobxReact.observer
class Line extends React.Component<{sw : LineContainerModel, line : LineType, width : number, staticRender : boolean, visible : OV<boolean>, onHeightChange : HeightChangeCallbackType, overrideCollapsed : OV<boolean>, topBorder : boolean, renderMode : RenderModeType, noSelect? : boolean}, {}> {
class Line extends React.Component<{screen : LineContainerModel, line : LineType, width : number, staticRender : boolean, visible : OV<boolean>, onHeightChange : HeightChangeCallbackType, overrideCollapsed : OV<boolean>, topBorder : boolean, renderMode : RenderModeType, noSelect? : boolean}, {}> {
render() {
let line = this.props.line;
if (line.archived) {
@@ -537,7 +537,7 @@ class Line extends React.Component<{sw : LineContainerModel, line : LineType, wi
}
@mobxReact.observer
class MarkdownRenderer extends React.Component<{sw : ScreenWindow, line : LineType, width : number, staticRender : boolean, visible : OV<boolean>, onHeightChange : HeightChangeCallbackType}, {}> {
class MarkdownRenderer extends React.Component<{s : Screen, line : LineType, width : number, staticRender : boolean, visible : OV<boolean>, onHeightChange : HeightChangeCallbackType}, {}> {
render() {
return null;
}
@@ -574,21 +574,21 @@ class Prompt extends React.Component<{rptr : RemotePtrType, festate : FeStateTyp
}
@mobxReact.observer
class LineText extends React.Component<{sw : LineContainerModel, line : LineType, renderMode : RenderModeType, topBorder : boolean, noSelect? : boolean}, {}> {
class LineText extends React.Component<{screen : LineContainerModel, line : LineType, renderMode : RenderModeType, topBorder : boolean, noSelect? : boolean}, {}> {
@boundMethod
clickHandler() {
let {line, noSelect} = this.props;
if (noSelect) {
return;
}
GlobalCommandRunner.swSelectLine(String(line.linenum));
GlobalCommandRunner.screenSelectLine(String(line.linenum));
}
render() {
let {sw, line, topBorder, renderMode} = this.props;
let {screen, line, topBorder, renderMode} = this.props;
let formattedTime = getLineDateTimeStr(line.ts);
let isSelected = mobx.computed(() => (sw.getSelectedLine() == line.linenum), {name: "computed-isSelected"}).get();
let isFocused = mobx.computed(() => (sw.getFocusType() == "cmd"), {name: "computed-isFocused"}).get();
let isSelected = mobx.computed(() => (screen.getSelectedLine() == line.linenum), {name: "computed-isSelected"}).get();
let isFocused = mobx.computed(() => (screen.getFocusType() == "cmd"), {name: "computed-isFocused"}).get();
let isCollapsed = (renderMode == "collapsed");
let mainClass = cn(
"line",
@@ -615,7 +615,7 @@ class LineText extends React.Component<{sw : LineContainerModel, line : LineType
}
@mobxReact.observer
class ImageRenderer extends React.Component<{sw : LineContainerModel, line : LineType, width : number, staticRender : boolean, visible : OV<boolean>, onHeightChange : () => void, collapsed : boolean}, {}> {
class ImageRenderer extends React.Component<{screen : LineContainerModel, line : LineType, width : number, staticRender : boolean, visible : OV<boolean>, onHeightChange : () => void, collapsed : boolean}, {}> {
elemRef : React.RefObject<any> = React.createRef();
imageDivRef : React.RefObject<any> = React.createRef();
imageLoaded : mobx.IObservableValue<boolean> = mobx.observable.box(false, {name: "imageLoaded"});
@@ -679,9 +679,9 @@ class ImageRenderer extends React.Component<{sw : LineContainerModel, line : Lin
}
loadImage() : void {
let {sw, line} = this.props;
let {screen, line} = this.props;
let model = GlobalModel;
let cmd = sw.getCmd(line);
let cmd = screen.getCmd(line);
if (cmd == null) {
return;
}
@@ -690,13 +690,13 @@ class ImageRenderer extends React.Component<{sw : LineContainerModel, line : Lin
console.log("cannot load image, no elem found");
return;
}
this.imageModel = sw.loadImageRenderer(this.imageDivRef.current, line, cmd);
this.imageModel = screen.loadImageRenderer(this.imageDivRef.current, line, cmd);
mobx.action(() => this.imageLoaded.set(true))();
}
unloadImage(unmount : boolean) : void {
let {sw, line} = this.props;
sw.unloadRenderer(line.cmdid);
let {screen, line} = this.props;
screen.unloadRenderer(line.cmdid);
this.imageModel = null;
if (!unmount) {
mobx.action(() => this.imageLoaded.set(false))();
@@ -724,7 +724,7 @@ class ImageRenderer extends React.Component<{sw : LineContainerModel, line : Lin
}
@mobxReact.observer
class TerminalRenderer extends React.Component<{sw : LineContainerModel, line : LineType, width : number, staticRender : boolean, visible : OV<boolean>, onHeightChange : () => void, collapsed : boolean}, {}> {
class TerminalRenderer extends React.Component<{screen : LineContainerModel, line : LineType, width : number, staticRender : boolean, visible : OV<boolean>, onHeightChange : () => void, collapsed : boolean}, {}> {
termLoaded : mobx.IObservableValue<boolean> = mobx.observable.box(false, {name: "linecmd-term-loaded"});
elemRef : React.RefObject<any> = React.createRef();
@@ -786,9 +786,9 @@ class TerminalRenderer extends React.Component<{sw : LineContainerModel, line :
}
loadTerminal() : void {
let {sw, line} = this.props;
let {screen, line} = this.props;
let model = GlobalModel;
let cmd = sw.getCmd(line);
let cmd = screen.getCmd(line);
if (cmd == null) {
return;
}
@@ -798,13 +798,13 @@ class TerminalRenderer extends React.Component<{sw : LineContainerModel, line :
console.log("cannot load terminal, no term elem found", termId);
return;
}
sw.loadTerminalRenderer(termElem, line, cmd, this.props.width);
screen.loadTerminalRenderer(termElem, line, cmd, this.props.width);
mobx.action(() => this.termLoaded.set(true))();
}
unloadTerminal(unmount : boolean) : void {
let {sw, line} = this.props;
sw.unloadRenderer(line.cmdid);
let {screen, line} = this.props;
screen.unloadRenderer(line.cmdid);
if (!unmount) {
mobx.action(() => this.termLoaded.set(false))();
let termId = "term-" + getLineId(line);
@@ -817,24 +817,24 @@ class TerminalRenderer extends React.Component<{sw : LineContainerModel, line :
@boundMethod
clickTermBlock(e : any) {
let {sw, line} = this.props;
let {screen, line} = this.props;
let model = GlobalModel;
let termWrap = sw.getRenderer(line.cmdid);
let termWrap = screen.getRenderer(line.cmdid);
if (termWrap != null) {
termWrap.giveFocus();
}
}
render() {
let {sw, line, width, staticRender, visible, collapsed} = this.props;
let {screen, line, width, staticRender, visible, collapsed} = this.props;
let isVisible = visible.get(); // for reaction
let isPhysicalFocused = mobx.computed(() => sw.getIsFocused(line.linenum), {name: "computed-getIsFocused"}).get();
let isPhysicalFocused = mobx.computed(() => screen.getIsFocused(line.linenum), {name: "computed-getIsFocused"}).get();
let isFocused = mobx.computed(() => {
let swFocusType = sw.getFocusType();
return isPhysicalFocused && (swFocusType == "cmd" || swFocusType == "cmd-fg")
let screenFocusType = screen.getFocusType();
return isPhysicalFocused && (screenFocusType == "cmd" || screenFocusType == "cmd-fg")
}, {name: "computed-isFocused"}).get();
let cmd = sw.getCmd(line); // will not be null
let usedRows = sw.getUsedRows(line, cmd, width);
let cmd = screen.getCmd(line); // will not be null
let usedRows = screen.getUsedRows(line, cmd, width);
let termHeight = termHeightFromRows(usedRows, GlobalModel.termFontSize.get());
let termLoaded = this.termLoaded.get();
return (
src/main.tsx
+78 -86
View File
@@ -11,7 +11,7 @@ import cn from "classnames";
import type {SessionDataType, LineType, CmdDataType, RemoteType, RemoteStateType, RemoteInstanceType, RemotePtrType, HistoryItem, HistoryQueryOpts, RemoteEditType, FeStateType, ContextMenuOpts, BookmarkType, RenderModeType} from "./types";
import type * as T from "./types";
import localizedFormat from 'dayjs/plugin/localizedFormat';
import {GlobalModel, GlobalCommandRunner, Session, Cmd, Window, Screen, ScreenWindow, riToRPtr, windowWidthToCols, windowHeightToRows, termHeightFromRows, termWidthFromCols} from "./model";
import {GlobalModel, GlobalCommandRunner, Session, Cmd, Window, Screen, riToRPtr, windowWidthToCols, windowHeightToRows, termHeightFromRows, termWidthFromCols} from "./model";
import {isModKeyPress} from "./util";
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
@@ -125,9 +125,9 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> {
}
componentDidMount() {
let activeSW = GlobalModel.getActiveSW();
if (activeSW != null) {
let focusType = activeSW.focusType.get();
let activeScreen = GlobalModel.getActiveScreen();
if (activeScreen != null) {
let focusType = activeScreen.focusType.get();
if (focusType == "input") {
this.setFocus();
}
@@ -137,9 +137,9 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> {
}
componentDidUpdate() {
let activeSW = GlobalModel.getActiveSW();
if (activeSW != null) {
let focusType = activeSW.focusType.get();
let activeScreen = GlobalModel.getActiveScreen();
if (activeScreen != null) {
let focusType = activeScreen.focusType.get();
if (this.lastFocusType != focusType && focusType == "input") {
this.setFocus();
}
@@ -195,10 +195,10 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> {
if (!ctrlMod) {
if (GlobalModel.inputModel.isEmpty()) {
let activeWindow = GlobalModel.getActiveWindow();
let activeSW = GlobalModel.getActiveSW();
if (activeSW != null && activeWindow != null && activeWindow.lines.length > 0) {
activeSW.setSelectedLine(0);
GlobalCommandRunner.swSelectLine("E");
let activeScreen = GlobalModel.getActiveScreen();
if (activeScreen != null && activeWindow != null && activeWindow.lines.length > 0) {
activeScreen.setSelectedLine(0);
GlobalCommandRunner.screenSelectLine("E");
}
return;
}
@@ -477,9 +477,9 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> {
if (disabled) {
displayLines = 1;
}
let activeSW = GlobalModel.getActiveSW();
if (activeSW != null) {
activeSW.focusType.get(); // for reaction
let activeScreen = GlobalModel.getActiveScreen();
if (activeScreen != null) {
activeScreen.focusType.get(); // for reaction
}
return (
<div className="control cmd-input-control is-expanded" ref={this.controlRef}>
@@ -1448,12 +1448,12 @@ class CmdInput extends React.Component<{}, {}> {
render() {
let model = GlobalModel;
let inputModel = model.inputModel;
let win = GlobalModel.getActiveWindow();
let screen = GlobalModel.getActiveScreen();
let ri : RemoteInstanceType = null;
let rptr : RemotePtrType = null;
if (win != null) {
ri = win.getCurRemoteInstance();
rptr = win.curRemote.get();
if (screen != null) {
ri = screen.getCurRemoteInstance();
rptr = screen.curRemote.get();
}
let remote : RemoteType = null;
let remoteState : FeStateType = null;
@@ -1538,7 +1538,7 @@ function getLineDateStr(todayDate : string, yesterdayDate : string, ts : number)
}
@mobxReact.observer
class LinesView extends React.Component<{sw : ScreenWindow, width : number, lines : LineType[], renderMode : RenderModeType}, {}> {
class LinesView extends React.Component<{screen : Screen, width : number, lines : LineType[], renderMode : RenderModeType}, {}> {
rszObs : any;
linesRef : React.RefObject<any>;
staticRender : OV<boolean> = mobx.observable.box(true, {name: "static-render"});
@@ -1574,15 +1574,15 @@ class LinesView extends React.Component<{sw : ScreenWindow, width : number, line
}
computeAnchorLine() : void {
let {sw} = this.props;
let {screen} = this.props;
let linesElem = this.linesRef.current;
if (linesElem == null) {
sw.setAnchorFields(null, 0, "no-lines");
screen.setAnchorFields(null, 0, "no-lines");
return;
}
let lineElemArr = linesElem.querySelectorAll(".line");
if (lineElemArr == null || lineElemArr.length == 0) {
sw.setAnchorFields(null, 0, "no-line");
screen.setAnchorFields(null, 0, "no-line");
return;
}
let scrollTop = linesElem.scrollTop;
@@ -1599,7 +1599,7 @@ class LinesView extends React.Component<{sw : ScreenWindow, width : number, line
if (anchorElem == null) {
anchorElem = lineElemArr[0];
}
sw.setAnchorFields(parseInt(anchorElem.dataset.linenum), containerBottom - (anchorElem.offsetTop + anchorElem.offsetHeight), "computeAnchorLine");
screen.setAnchorFields(parseInt(anchorElem.dataset.linenum), containerBottom - (anchorElem.offsetTop + anchorElem.offsetHeight), "computeAnchorLine");
}
computeVisibleMap() : void {
@@ -1649,40 +1649,40 @@ class LinesView extends React.Component<{sw : ScreenWindow, width : number, line
}
restoreAnchorOffset(reason : string) : void {
let {sw} = this.props;
let {screen} = this.props;
let linesElem = this.linesRef.current;
if (linesElem == null) {
return;
}
if (sw.anchorLine == null || sw.anchorLine == 0) {
if (screen.anchorLine == null || screen.anchorLine == 0) {
return;
}
let anchorElem = linesElem.querySelector(sprintf(".line[data-linenum=\"%d\"]", sw.anchorLine));
let anchorElem = linesElem.querySelector(sprintf(".line[data-linenum=\"%d\"]", screen.anchorLine));
if (anchorElem == null) {
return;
}
let isLastLine = sw.isLastLine(sw.anchorLine);
let isLastLine = screen.isLastLine(screen.anchorLine);
let scrollTop = linesElem.scrollTop;
let height = linesElem.clientHeight;
let containerBottom = scrollTop + height;
let curAnchorOffset = containerBottom - (anchorElem.offsetTop + anchorElem.offsetHeight);
let newAnchorOffset = sw.anchorOffset;
let newAnchorOffset = screen.anchorOffset;
if (isLastLine && newAnchorOffset == 0) {
newAnchorOffset = 10;
}
if (curAnchorOffset != newAnchorOffset) {
let offsetDiff = curAnchorOffset - newAnchorOffset;
let newScrollTop = scrollTop - offsetDiff;
// console.log("update scrolltop", reason, "line=" + sw.anchorLine, -offsetDiff, linesElem.scrollTop, "=>", newScrollTop);
// console.log("update scrolltop", reason, "line=" + screen.anchorLine, -offsetDiff, linesElem.scrollTop, "=>", newScrollTop);
linesElem.scrollTop = newScrollTop;
this.ignoreNextScroll = true;
}
}
componentDidMount() : void {
let {sw, lines} = this.props;
let {screen, lines} = this.props;
let linesElem = this.linesRef.current;
let anchorLineObj = sw.getLineByNum(sw.anchorLine);
let anchorLineObj = screen.getLineByNum(screen.anchorLine);
if (anchorLineObj == null) {
// scroll to bottom
if (linesElem != null) {
@@ -1693,7 +1693,7 @@ class LinesView extends React.Component<{sw : ScreenWindow, width : number, line
else {
this.restoreAnchorOffset("re-mount");
}
this.lastSelectedLine = sw.getSelectedLine();
this.lastSelectedLine = screen.getSelectedLine();
this.lastLinesLength = lines.length;
if (linesElem != null) {
@@ -1754,35 +1754,35 @@ class LinesView extends React.Component<{sw : ScreenWindow, width : number, line
}
updateSelectedLine() : void {
let {sw, lines} = this.props;
let {screen, lines} = this.props;
let linesElem = this.linesRef.current;
if (linesElem == null) {
return null;
}
let newLine = sw.getSelectedLine();
let newLine = screen.getSelectedLine();
if (newLine == 0) {
return;
}
this.setLineVisible(newLine, true);
// console.log("update selected line", this.lastSelectedLine, "=>", newLine, sprintf("anchor=%d:%d", sw.anchorLine, sw.anchorOffset));
// console.log("update selected line", this.lastSelectedLine, "=>", newLine, sprintf("anchor=%d:%d", screen.anchorLine, screen.anchorOffset));
let viewInfo = this.getLineViewInfo(newLine);
if (viewInfo == null) {
return;
}
sw.setAnchorFields(newLine, viewInfo.anchorOffset, "updateSelectedLine");
screen.setAnchorFields(newLine, viewInfo.anchorOffset, "updateSelectedLine");
let isFirst = (newLine == lines[0].linenum);
let isLast = (newLine == lines[lines.length-1].linenum);
if (viewInfo.botOffset > 0) {
linesElem.scrollTop = linesElem.scrollTop + viewInfo.botOffset + (isLast ? 10 : 0);
this.ignoreNextScroll = true;
sw.anchorOffset = (isLast ? 10 : 0);
screen.anchorOffset = (isLast ? 10 : 0);
}
else if (viewInfo.topOffset < 0) {
linesElem.scrollTop = linesElem.scrollTop + viewInfo.topOffset + (isFirst ? -10 : 0);
this.ignoreNextScroll = true;
sw.anchorOffset = linesElem.clientHeight - viewInfo.height;
screen.anchorOffset = linesElem.clientHeight - viewInfo.height;
}
// console.log("new anchor", sw.getAnchorStr());
// console.log("new anchor", screen.getAnchorStr());
}
setLineVisible(lineNum : number, vis : boolean) : void {
@@ -1800,10 +1800,10 @@ class LinesView extends React.Component<{sw : ScreenWindow, width : number, line
}
componentDidUpdate(prevProps, prevState, snapshot) : void {
let {sw, lines} = this.props;
if (sw.getSelectedLine() != this.lastSelectedLine) {
let {screen, lines} = this.props;
if (screen.getSelectedLine() != this.lastSelectedLine) {
this.updateSelectedLine();
this.lastSelectedLine = sw.getSelectedLine();
this.lastSelectedLine = screen.getSelectedLine();
} else if (lines.length != this.lastLinesLength) {
this.restoreAnchorOffset("line-length-change");
}
@@ -1861,8 +1861,8 @@ class LinesView extends React.Component<{sw : ScreenWindow, width : number, line
}
render() {
let {sw, width, lines, renderMode} = this.props;
let selectedLine = sw.getSelectedLine(); // for re-rendering
let {screen, width, lines, renderMode} = this.props;
let selectedLine = screen.getSelectedLine(); // for re-rendering
let line : LineType = null;
for (let i=0; i<lines.length; i++) {
let key = String(lines[i].linenum);
@@ -1893,7 +1893,7 @@ class LinesView extends React.Component<{sw : ScreenWindow, width : number, line
lineElements.push(sepElem);
}
let topBorder = (dateSepStr == null) && this.hasTopBorder(lines, idx);
let lineElem = <Line key={line.lineid} line={line} sw={sw} width={width} visible={this.visibleMap.get(lineNumStr)} staticRender={this.staticRender.get()} onHeightChange={this.onHeightChange} overrideCollapsed={this.collapsedMap.get(lineNumStr)} topBorder={topBorder} renderMode={renderMode}/>;
let lineElem = <Line key={line.lineid} line={line} screen={screen} width={width} visible={this.visibleMap.get(lineNumStr)} staticRender={this.staticRender.get()} onHeightChange={this.onHeightChange} overrideCollapsed={this.collapsedMap.get(lineNumStr)} topBorder={topBorder} renderMode={renderMode}/>;
lineElements.push(lineElem);
}
return (
@@ -1905,9 +1905,9 @@ class LinesView extends React.Component<{sw : ScreenWindow, width : number, line
}
}
// sw is not null
// screen is not null
@mobxReact.observer
class ScreenWindowView extends React.Component<{sw : ScreenWindow}, {}> {
class ScreenWindowView extends React.Component<{screen : Screen}, {}> {
rszObs : any;
windowViewRef : React.RefObject<any>;
@@ -1924,8 +1924,8 @@ class ScreenWindowView extends React.Component<{sw : ScreenWindow}, {}> {
}
setSize(width : number, height : number) : void {
let {sw} = this.props;
if (sw == null) {
let {screen} = this.props;
if (screen == null) {
return;
}
mobx.action(() => {
@@ -1934,10 +1934,10 @@ class ScreenWindowView extends React.Component<{sw : ScreenWindow}, {}> {
let cols = windowWidthToCols(width, GlobalModel.termFontSize.get());
let rows = windowHeightToRows(height, GlobalModel.termFontSize.get());
if (cols == 0 || rows == 0) {
console.log("cannot set sw size", rows, cols);
console.log("cannot set screen size", rows, cols);
return;
}
sw.termSizeCallback(rows, cols);
screen.termSizeCallback(rows, cols);
})();
}
@@ -1969,10 +1969,10 @@ class ScreenWindowView extends React.Component<{sw : ScreenWindow}, {}> {
}
getWindow() : Window {
let {sw} = this.props;
let win = GlobalModel.getWindowById(sw.sessionId, sw.windowId);
let {screen} = this.props;
let win = GlobalModel.getWindowById(screen.sessionId, screen.windowId);
if (win == null) {
win = GlobalModel.loadWindow(sw.sessionId, sw.windowId);
win = GlobalModel.loadWindow(screen.sessionId, screen.screenId, screen.windowId);
}
return win;
}
@@ -1990,11 +1990,11 @@ class ScreenWindowView extends React.Component<{sw : ScreenWindow}, {}> {
}
renderError(message : string, fade : boolean) {
let {sw} = this.props;
let {screen} = this.props;
return (
<div className="window-view" style={this.getWindowViewStyle()} ref={this.windowViewRef} data-windowid={sw.windowId}>
<div className="window-view" style={this.getWindowViewStyle()} ref={this.windowViewRef} data-windowid={screen.windowId}>
<div key="window-tag" className="window-tag">
<span>{sw.name.get()}</span>
<span>{screen.name.get()}</span>
</div>
<div key="lines" className="lines"></div>
<div key="window-empty" className={cn("window-empty", {"should-fade": fade})}>
@@ -2005,7 +2005,7 @@ class ScreenWindowView extends React.Component<{sw : ScreenWindow}, {}> {
}
render() {
let {sw} = this.props;
let {screen} = this.props;
let win = this.getWindow();
if (win == null || !win.loaded.get()) {
return this.renderError("...", true);
@@ -2022,16 +2022,15 @@ class ScreenWindowView extends React.Component<{sw : ScreenWindow}, {}> {
}
let idx = 0;
let line : LineType = null;
let screen = GlobalModel.getScreenById(sw.sessionId, sw.screenId);
let session = GlobalModel.getSessionById(sw.sessionId);
let isActive = sw.isActive();
let selectedLine = sw.getSelectedLine();
let session = GlobalModel.getSessionById(screen.sessionId);
let isActive = screen.isActive();
let selectedLine = screen.getSelectedLine();
let lines = win.getNonArchivedLines();
let renderMode = this.renderMode.get();
return (
<div className="window-view" style={this.getWindowViewStyle()} ref={this.windowViewRef}>
<div key="window-tag" className={cn("window-tag", {"is-active": isActive})}>
<div className="window-name">{sw.name.get()}</div>
<div className="window-name">{screen.name.get()}</div>
<div className="render-mode" onClick={this.toggleRenderMode}>
<If condition={renderMode == "normal"}>
<i title="collapse" className="fa-sharp fa-solid fa-arrows-to-line"/>
@@ -2042,11 +2041,11 @@ class ScreenWindowView extends React.Component<{sw : ScreenWindow}, {}> {
</div>
</div>
<If condition={lines.length > 0}>
<LinesView sw={sw} width={this.width.get()} lines={lines} renderMode={renderMode}/>
<LinesView screen={screen} width={this.width.get()} lines={lines} renderMode={renderMode}/>
</If>
<If condition={lines.length == 0}>
<div key="window-empty" className="window-empty">
<div><code>[session="{session.name.get()}" screen="{screen.name.get()}" window="{sw.name.get()}"]</code></div>
<div><code>[session="{session.name.get()}" screen="{screen.name.get()}" window="{screen.name.get()}"]</code></div>
</div>
</If>
</div>
@@ -2058,22 +2057,17 @@ class ScreenWindowView extends React.Component<{sw : ScreenWindow}, {}> {
class ScreenView extends React.Component<{screen : Screen}, {}> {
render() {
let {screen} = this.props;
let sw : ScreenWindow = null;
if (screen != null) {
sw = screen.getActiveSW();
}
if (screen == null || sw == null) {
if (screen == null) {
return (
<div className="screen-view">
(no screen or window)
(no screen found)
</div>
);
}
let fontSize = GlobalModel.termFontSize.get();
let swKey = sw.windowId + "-fs" + fontSize;
return (
<div className="screen-view" data-screenid={sw.screenId}>
<ScreenWindowView key={swKey} sw={sw}/>
<div className="screen-view" data-screenid={screen.screenId}>
<ScreenWindowView key={screen.screenId} screen={screen}/>
</div>
);
}
@@ -2160,7 +2154,8 @@ class ScreenTabs extends React.Component<{session : Session}, {}> {
let index = 0;
let showingScreens = [];
let activeScreenId = session.activeScreenId.get();
for (let screen of session.screens) {
let screens = GlobalModel.getSessionScreens(session.sessionId);
for (let screen of screens) {
if (!screen.archived.get() || activeScreenId == screen.screenId) {
showingScreens.push(screen);
}
@@ -2328,17 +2323,14 @@ class MainSideBar extends React.Component<{}, {}> {
let model = GlobalModel;
let activeSessionId = model.activeSessionId.get();
let activeWindow = model.getActiveWindow();
let activeScreen = model.getActiveScreen();
let activeRemoteId : string = null;
if (activeWindow != null) {
let rptr = activeWindow.curRemote.get();
if (activeScreen != null) {
let rptr = activeScreen.curRemote.get();
if (rptr != null && !isBlank(rptr.remoteid)) {
activeRemoteId = rptr.remoteid;
}
}
let sw : ScreenWindow = null;
if (GlobalModel.debugSW.get()) {
sw = GlobalModel.getActiveSW();
}
let session : Session = null;
let remotes = model.remotes ?? [];
let remote : RemoteType = null;
@@ -2397,7 +2389,7 @@ class MainSideBar extends React.Component<{}, {}> {
<li className="menu-history"><a onClick={this.handleHistoryClick} className={cn({"is-active": (mainView == "history")})}><i className="fa-sharp fa-solid fa-clock"/> HISTORY</a></li>
</ul>
<ul className="menu-list">
<li className="menu-bookmarks"><a onClick={this.handleBookmarksClick} className={cn({"is-active": (mainView == "bookmarks")})}><i className="fa-sharp fa-solid fa-bookmark"/> BOOKMARKS</a></li>
<li className="menu-bookmarks"><a onClick={this.handleBookmarksClick} className={cn({"is-active": (mainView == "bookmarks")})}><i className="fa-sharp fa-solid fa-bookmark"/> BOOKMARKS <span>&#x2318;B</span></a></li>
</ul>
<p className="menu-label display-none">
Playbooks
@@ -2407,11 +2399,11 @@ class MainSideBar extends React.Component<{}, {}> {
<li key="prompt-dev"><a onClick={this.handlePlaybookClick}><i className="fa-sharp fa-solid fa-file-lines"/> prompt-dev</a></li>
</ul>
<div className="spacer"></div>
<If condition={GlobalModel.debugSW.get() && sw != null}>
<If condition={GlobalModel.debugScreen.get() && activeScreen != null}>
<div>
focus={sw.focusType.get()}<br/>
sline={sw.getSelectedLine()}<br/>
termfocus={sw.termLineNumFocus.get()}<br/>
focus={activeScreen.focusType.get()}<br/>
sline={activeScreen.getSelectedLine()}<br/>
termfocus={activeScreen.termLineNumFocus.get()}<br/>
</div>
</If>
<ul className="menu-list">
src/model.ts
+171 -278
View File
File diff suppressed because it is too large Load Diff
src/types.ts
+18 -44
View File
@@ -1,6 +1,7 @@
import * as mobx from "mobx";
type ShareModeType = "local" | "private" | "view" | "shared";
type FocusTypeStrs = "input"|"cmd"|"cmd-fg";
type SessionDataType = {
sessionid : string,
@@ -10,7 +11,6 @@ type SessionDataType = {
sessionidx : number,
sharemode : ShareModeType,
archived? : boolean,
screens : ScreenDataType[],
remotes : RemoteInstanceType[],
// for updates
@@ -42,47 +42,25 @@ type LineType = {
type ScreenOptsType = {
tabcolor? : string,
pterm? : string,
}
type ScreenDataType = {
sessionid : string,
screenid : string,
windowid : string,
screenidx : number,
activewindowid : string,
name : string,
archived? : boolean,
windows : ScreenWindowType[],
screenopts : ScreenOptsType,
// for updates
remove? : boolean,
full? : boolean,
};
type LayoutType = {
type : string,
parent? : string,
zindex? : number,
float? : boolean,
top? : string,
bottom? : string,
left? : string,
right? : string,
width? : string,
height? : string,
};
type ScreenWindowType = {
sessionid : string,
screenid : string,
windowid : string,
name : string,
layout : LayoutType,
curremote : RemotePtrType,
nextlinenum : number,
selectedline : number,
focustype : "input"|"cmd"|"cmd-fg",
focustype : FocusTypeStrs,
anchor : {anchorline : number, anchoroffset : number},
// for updates
full? : boolean,
remove? : boolean,
};
@@ -142,18 +120,6 @@ type RemotePtrType = {
name? : string,
};
type WindowDataType = {
sessionid : string,
windowid : string,
curremote : RemotePtrType,
nextlinenum : number,
lines : LineType[],
cmds : CmdDataType[],
// for updates
remove? : boolean,
};
type HistoryItem = {
historyid : string,
ts : number,
@@ -273,12 +239,20 @@ type PtyDataUpdateType = {
ptydatalen : number,
};
type ScreenLinesType = {
sessionid : string,
screenid : string,
windowid : string,
lines : LineType[],
cmds : CmdDataType[],
};
type ModelUpdateType = {
interactive : boolean,
sessions? : SessionDataType[],
activesessionid? : string,
windows? : WindowDataType[],
screenwindows? : ScreenWindowType[],
screens? : ScreenDataType[],
screenlines? : ScreenLinesType,
line? : LineType,
lines? : LineType[],
cmd? : CmdDataType,
@@ -445,4 +419,4 @@ type HistorySearchParams = {
type RenderModeType = "normal" | "collapsed";
export type {SessionDataType, LineType, RemoteType, RemoteStateType, RemoteInstanceType, WindowDataType, HistoryItem, CmdRemoteStateType, FeCmdPacketType, TermOptsType, CmdStartPacketType, CmdDataType, ScreenDataType, ScreenOptsType, ScreenWindowType, LayoutType, PtyDataUpdateType, ModelUpdateType, UpdateMessage, InfoType, CmdLineUpdateType, RemotePtrType, UIContextType, HistoryInfoType, HistoryQueryOpts, WatchScreenPacketType, TermWinSize, FeInputPacketType, RemoteInputPacketType, RemoteEditType, FeStateType, ContextMenuOpts, RendererContext, WindowSize, RendererModel, PtyDataType, BookmarkType, ClientDataType, PlaybookType, PlaybookEntryType, HistoryViewDataType, RenderModeType, AlertMessageType, HistorySearchParams};
export type {SessionDataType, LineType, RemoteType, RemoteStateType, RemoteInstanceType, HistoryItem, CmdRemoteStateType, FeCmdPacketType, TermOptsType, CmdStartPacketType, CmdDataType, ScreenDataType, ScreenOptsType, PtyDataUpdateType, ModelUpdateType, UpdateMessage, InfoType, CmdLineUpdateType, RemotePtrType, UIContextType, HistoryInfoType, HistoryQueryOpts, WatchScreenPacketType, TermWinSize, FeInputPacketType, RemoteInputPacketType, RemoteEditType, FeStateType, ContextMenuOpts, RendererContext, WindowSize, RendererModel, PtyDataType, BookmarkType, ClientDataType, PlaybookType, PlaybookEntryType, HistoryViewDataType, RenderModeType, AlertMessageType, HistorySearchParams, ScreenLinesType, FocusTypeStrs};