From 507c79463c44225f495494dc045b15bebd305d84 Mon Sep 17 00:00:00 2001 From: sawka Date: Thu, 13 Apr 2023 12:55:07 -0700 Subject: [PATCH] simplify focus types, better input focus, add ability to expand main input --- src/linecomps.tsx | 10 +++------- src/main.tsx | 22 ++++++++++++++++++---- src/model.ts | 19 +++++++++++++++---- src/types.ts | 2 +- 4 files changed, 37 insertions(+), 16 deletions(-) diff --git a/src/linecomps.tsx b/src/linecomps.tsx index e69e69a4..4bcd21b2 100644 --- a/src/linecomps.tsx +++ b/src/linecomps.tsx @@ -510,12 +510,8 @@ class LineCmd extends React.Component<{screen : LineContainerModel, line : LineT let isPhysicalFocused = mobx.computed(() => screen.getIsFocused(line.linenum), {name: "computed-getIsFocused"}).get(); let isFocused = mobx.computed(() => { let screenFocusType = screen.getFocusType(); - return isPhysicalFocused && (screenFocusType == "cmd" || screenFocusType == "cmd-fg") + return isPhysicalFocused && (screenFocusType == "cmd"); }, {name: "computed-isFocused"}).get(); - let isFgFocused = mobx.computed(() => { - let screenFocusType = screen.getFocusType(); - return isPhysicalFocused && screenFocusType == "cmd-fg" - }, {name: "computed-isFgFocused"}).get(); let isStatic = staticRender; let isRunning = cmd.isRunning() let isCollapsed = this.isCollapsed(); @@ -541,7 +537,7 @@ class LineCmd extends React.Component<{screen : LineContainerModel, line : LineT
-
+
@@ -816,7 +812,7 @@ class TerminalRenderer extends React.Component<{screen : LineContainerModel, lin let isPhysicalFocused = mobx.computed(() => screen.getIsFocused(line.linenum), {name: "computed-getIsFocused"}).get(); let isFocused = mobx.computed(() => { let screenFocusType = screen.getFocusType(); - return isPhysicalFocused && (screenFocusType == "cmd" || screenFocusType == "cmd-fg") + return isPhysicalFocused && (screenFocusType == "cmd"); }, {name: "computed-isFocused"}).get(); let cmd = screen.getCmd(line); // will not be null let usedRows = screen.getUsedRows(lineutil.getRendererContext(line), line, cmd, width); diff --git a/src/main.tsx b/src/main.tsx index 657d7856..c6287132 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -166,6 +166,10 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> { } mobx.action(() => inputModel.forceCursorPos.set(null))(); } + if (inputModel.forceInputFocus) { + inputModel.forceInputFocus = false; + this.setFocus(); + } this.checkHeight(true); } @@ -234,6 +238,12 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> { } return; } + if (e.code == "KeyE" && e.getModifierState("Meta")) { + e.preventDefault(); + e.stopPropagation(); + let inputModel = GlobalModel.inputModel; + inputModel.toggleExpandInput(); + } if (e.code == "KeyC" && e.getModifierState("Control")) { e.preventDefault(); inputModel.resetInput(); @@ -557,6 +567,9 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> { if (displayLines > 5) { displayLines = 5; } + if (inputModel.inputExpanded.get()) { + displayLines = 5; + } let disabled = inputModel.historyShow.get(); if (disabled) { displayLines = 1; @@ -565,11 +578,11 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> { if (activeScreen != null) { activeScreen.focusType.get(); // for reaction } - let computedHeight = (displayLines*24)+14; + let computedHeight = (displayLines*24)+14+2; // 24 = height of line, 14 = padding, 2 = border return (
- - + +
); } @@ -953,13 +966,14 @@ class CmdInput extends React.Component<{}, {}> {
-
+
+
{inputModel.inputExpanded.get() ? "shrink" : "expand"} input ({renderCmdText("E")})
focus input ({renderCmdText("I")})
{historyShow ? "close history (esc)" : "show history (ctrl-r)"}
diff --git a/src/model.ts b/src/model.ts index 12ac77cf..105799e8 100644 --- a/src/model.ts +++ b/src/model.ts @@ -42,7 +42,7 @@ type LineContainerModel = { getIsFocused : (lineNum : number) => boolean, getTermWrap : (cmdId : string) => TermWrap; getRenderer : (cmdId : string) => RendererModel, - getFocusType : () => "input" | "cmd" | "cmd-fg", + getFocusType : () => FocusTypeStrs, getSelectedLine : () => number, getCmd : (line : LineType) => Cmd, setTermFocus : (lineNum : number, focus : boolean) => void, @@ -355,7 +355,7 @@ class Screen { } refocusLine(sdata : ScreenDataType, oldFocusType : string, oldSelectedLine : number) : void { - let isCmdFocus = (sdata.focustype == "cmd" || sdata.focustype == "cmd-fg"); + let isCmdFocus = (sdata.focustype == "cmd"); if (!isCmdFocus) { return; } @@ -639,7 +639,7 @@ class Screen { onUpdateContentHeight: (termContext : RendererContext, height : number) => { GlobalModel.setContentHeight(termContext, height); }, }); this.terminals[cmdId] = termWrap; - if ((this.focusType.get() == "cmd" || this.focusType.get() == "cmd-fg") && this.selectedLine.get() == line.linenum) { + if ((this.focusType.get() == "cmd") && this.selectedLine.get() == line.linenum) { termWrap.giveFocus(); } return; @@ -974,6 +974,7 @@ class InputModel { infoMsg : OV = mobx.observable.box(null); infoTimeoutId : any = null; inputMode : OV = mobx.observable.box(null); + inputExpanded : OV = mobx.observable.box(false, {name: "inputExpanded"}); // cursor forceCursorPos : OV = mobx.observable.box(null); @@ -982,6 +983,7 @@ class InputModel { inputFocused : OV = mobx.observable.box(false); lineFocused : OV = mobx.observable.box(false); physicalInputFocused : OV = mobx.observable.box(false); + forceInputFocus : boolean = false; constructor() { this.filteredHistoryItems = mobx.computed(() => { @@ -1500,10 +1502,19 @@ class InputModel { this.resetHistory(); this.dropModHistory(false); this.infoMsg.set(null); + this.inputExpanded.set(false); this._clearInfoTimeout(); })(); } + @boundMethod + toggleExpandInput() : void { + mobx.action(() => { + this.inputExpanded.set(!this.inputExpanded.get()); + this.forceInputFocus = true; + })(); + } + getCurLine() : string { let model = GlobalModel; let hidx = this.historyIndex.get(); @@ -1678,7 +1689,7 @@ class SpecialHistoryViewLineContainer { return this.terminal; } - getFocusType() : "input" | "cmd" | "cmd-fg" { + getFocusType() : FocusTypeStrs { return "input"; } diff --git a/src/types.ts b/src/types.ts index 6a53af73..738f9374 100644 --- a/src/types.ts +++ b/src/types.ts @@ -2,7 +2,7 @@ import * as React from "react"; import * as mobx from "mobx"; type ShareModeType = "local" | "web"; -type FocusTypeStrs = "input"|"cmd"|"cmd-fg"; +type FocusTypeStrs = "input"|"cmd"; type HistoryTypeStrs = "global" | "session" | "screen"; type RemoteStatusTypeStrs = "connected" | "connecting" | "disconnected" | "error";