checkpoint on updates. can switch screens using commands

src/emain.ts

@@ -40,6 +40,10 @@ electron.Menu.setApplicationMenu(menu);
 
 let MainWindow = null;
 
+function getMods(input : any) {
+    return {meta: input.meta, shift: input.shift, ctrl: input.ctrl, alt: input.alt};
+}
+
 function createWindow() {
     let win = new electron.BrowserWindow({
         width: 1800,
@@ -53,21 +57,33 @@ function createWindow() {
         if (input.type != "keyDown") {
             return;
         }
+        let mods = getMods(input);
         if (input.meta) {
             console.log("before-input", input.code, input.modifiers);
         }
         if (input.code == "KeyT" && input.meta) {
-            win.webContents.send("cmd-t");
+            win.webContents.send("t-cmd", mods);
             e.preventDefault();
             return;
         }
-        if (input.code == "BracketRight" && input.meta) {
-            win.webContents.send("switch-screen", {relative: 1});
-            e.preventDefault();
+        if (input.code == "KeyI" && input.meta) {
+            if (!input.alt) {
+                win.webContents.send("i-cmd", mods);
+                e.preventDefault();
+            }
             return;
         }
-        if (input.code == "BracketLeft" && input.meta) {
-            win.webContents.send("switch-screen", {relative: -1});
+        if (input.code.startsWith("Digit") && input.meta) {
+            let digitNum = parseInt(input.code.substr(5));
+            if (isNaN(digitNum) || digitNum < 1 || digitNum > 9) {
+                return;
+            }
+            e.preventDefault();
+            win.webContents.send("digit-cmd", {digit: digitNum}, mods);
+        }
+        if ((input.code == "BracketRight" || input.code == "BracketLeft") && input.meta) {
+            let rel = (input.code == "BracketRight" ? 1 : -1);
+            win.webContents.send("bracket-cmd", {relative: rel}, mods);
             e.preventDefault();
             return;
         }

src/main.tsx

@@ -187,7 +187,6 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width
                         <div className="meta">
                             <div className="user" style={{display: "none"}}>{line.userid}</div>
                             <div className="ts">{formattedTime}</div>
-                            width={this.props.width}, cellwidth={termWidth}
                         </div>
                         <div className="meta">
                             <div className="metapart-mono" style={{display: "none"}}>
@@ -417,7 +416,14 @@ class ScreenWindowView extends React.Component<{sw : ScreenWindow}, {}> {
 
     getWindow() : Window {
         let {sw} = this.props;
-        return GlobalModel.getWindowById(sw.sessionId, sw.windowId);
+        if (sw == null) {
+            return null;
+        }
+        let win = GlobalModel.getWindowById(sw.sessionId, sw.windowId);
+        if (win == null) {
+            win = GlobalModel.loadWindow(sw.sessionId, sw.windowId);
+        }
+        return win;
     }
 
     getLinesDOMId() {
@@ -475,12 +481,12 @@ class ScreenWindowView extends React.Component<{sw : ScreenWindow}, {}> {
             return this.renderError("(no screen window)");
         }
         let win = this.getWindow();
-        if (win == null) {
-            return this.renderError("(no window)");
-        }
-        if (!win.linesLoaded.get()) {
+        if (win == null || !win.loaded.get()) {
             return this.renderError("(loading)");
         }
+        if (win.loadError.get() != null) {
+            return this.renderError(sprintf("(%s)", win.loadError.get()));
+        }
         if (this.width.get() == 0) {
             return this.renderError("");
         }
@@ -562,11 +568,15 @@ class ScreenTabs extends React.Component<{session : Session}, {}> {
             return null;
         }
         let screen : Screen = null;
+        let index = 0;
         return (
             <div className="screen-tabs">
-                <For each="screen" of={session.screens}>
+                <For each="screen" index="index" of={session.screens}>
                     <div key={screen.screenId} className={cn("screen-tab", {"is-active": session.activeScreenId.get() == screen.screenId})} onClick={() => this.handleSwitchScreen(screen.screenId)}>
                         {screen.name.get()}
+                        <If condition={index+1 <= 9}>
+                            <div className="tab-index">&#x2318;{index+1}</div>
+                        </If>
                     </div>
                 </For>
                 <div key="new-screen" className="screen-tab new-screen" onClick={this.handleNewScreen}>

src/preload.js

@@ -2,6 +2,8 @@ let {contextBridge, ipcRenderer} = require("electron");
 
 contextBridge.exposeInMainWorld("api", {
     getId: () => ipcRenderer.sendSync("get-id"),
-    onCmdT: (callback) => ipcRenderer.on("cmd-t", callback),
-    onSwitchScreen: (callback) => ipcRenderer.on("switch-screen", callback),
+    onTCmd: (callback) => ipcRenderer.on("t-cmd", callback),
+    onICmd: (callback) => ipcRenderer.on("i-cmd", callback),
+    onBracketCmd: (callback) => ipcRenderer.on("bracket-cmd", callback),
+    onDigitCmd: (callback) => ipcRenderer.on("digit-cmd", callback),
 });

src/sh2.less

@@ -33,7 +33,7 @@ html, body, #main {
                 min-width: 80px;
                 width: 150px;
                 flex-shrink: 1;
-                background-color: darken(#4e9a06, 15%);
+                background-color: darken(#4e9a06, 10%);
                 display: flex;
                 justify-content: center;
                 align-items: center;
@@ -43,16 +43,28 @@ html, body, #main {
                 padding-left: 10px;
                 padding-right: 10px;
                 cursor: pointer;
+                position: relative;
 
                 &:hover {
                     background-color: #4e9a06;
                 }
 
                 &.is-active {
-                    background-color: #4e9a06;
+                    background-color: lighten(#4e9a06, 10%);
                 }
 
                 border-right: 1px solid #ccc;
+
+                .tab-index {
+                    position: absolute;
+                    right: 5px;
+                    font-weight: normal;
+                    display: none;
+                }
+            }
+
+            &:hover .screen-tab .tab-index {
+                display: block;
             }
 
             .screen-tab.new-screen {

src/types.ts

@@ -3,12 +3,14 @@ import * as mobx from "mobx";
 type SessionDataType = {
     sessionid : string,
     name : string,
+    notifynum : number,
     activescreenid : string,
-    windows : WindowDataType[],
+    sessionidx : number,
     screens : ScreenDataType[],
-    screenwindows : ScreenWindowType[],
-    cmds : CmdDataType[],
-    remove : boolean,
+
+    // for updates
+    remove? : boolean,
+    full? : boolean,
 };
 
 type LineType = {
@@ -34,6 +36,10 @@ type ScreenDataType = {
     name : string,
     windows : ScreenWindowType[],
     screenopts : ScreenOptsType,
+
+    // for updates
+    remove? : boolean,
+    full? : boolean,
 };
 
 type LayoutType = {
@@ -55,6 +61,9 @@ type ScreenWindowType = {
     windowid : string,
     name : string,
     layout : LayoutType,
+
+    // for updates
+    remove? : boolean,
 };
 
 type RemoteType = {
@@ -88,7 +97,9 @@ type WindowDataType = {
     history : HistoryItem[],
     cmds : CmdDataType[],
     remotes : RemoteInstanceType[],
-    remove : boolean,
+
+    // for updates
+    remove? : boolean,
 };
 
 type HistoryItem = {
@@ -104,6 +115,7 @@ type CmdRemoteStateType = {
 type FeCmdPacketType = {
     type : string,
     sessionid : string,
+    screenid : string,
     windowid : string,
     userid : string,
     cmdstr : string,
@@ -161,4 +173,13 @@ type PtyDataUpdateType = {
     ptydatalen : number,
 };
 
-export type {SessionDataType, LineType, RemoteType, RemoteStateType, RemoteInstanceType, WindowDataType, HistoryItem, CmdRemoteStateType, FeCmdPacketType, TermOptsType, CmdStartPacketType, CmdDonePacketType, CmdDataType, ScreenDataType, ScreenOptsType, ScreenWindowType, LayoutType, PtyDataUpdateType};
+type SessionUpdateType = {
+    sessions: SessionDataType[],
+};
+
+type WindowUpdateType = {
+    window: WindowDataType,
+    remove: boolean,
+}
+
+export type {SessionDataType, LineType, RemoteType, RemoteStateType, RemoteInstanceType, WindowDataType, HistoryItem, CmdRemoteStateType, FeCmdPacketType, TermOptsType, CmdStartPacketType, CmdDonePacketType, CmdDataType, ScreenDataType, ScreenOptsType, ScreenWindowType, LayoutType, PtyDataUpdateType, SessionUpdateType, WindowUpdateType};

src/util.ts

@@ -1,3 +1,4 @@
+import * as mobx from "mobx";
 import {sprintf} from "sprintf-js";
 
 function fetchJsonData(resp : any, ctErr : boolean) : Promise<any> {
@@ -42,4 +43,62 @@ function base64ToArray(b64 : string) : Uint8Array {
     return rtnArr;
 }
 
-export {handleJsonFetchResponse, base64ToArray};
+interface IDataType {
+    remove? : boolean;
+    full? : boolean;
+}
+
+interface IObjType<DataType> {
+    dispose : () => void;
+    mergeData : (data : DataType) => void,
+}
+
+function genMergeData<ObjType extends IObjType<DataType>, DataType extends IDataType>(
+    objs : mobx.IObservableArray<ObjType>,
+    dataArr : DataType[],
+    objIdFn : (obj : ObjType) => string,
+    dataIdFn : (data : DataType) => string,
+    ctorFn : (data : DataType) => ObjType,
+    sortIdxFn : (obj : ObjType) => number,
+) {
+    if (dataArr == null || dataArr.length == 0) {
+        return;
+    }
+    let objMap : Record<string, ObjType> = {};
+    for (let i=0; i<objs.length; i++) {
+        let obj = objs[i];
+        let id = objIdFn(obj);
+        objMap[id] = obj;
+    }
+    for (let i=0; i<dataArr.length; i++) {
+        let dataItem = dataArr[i];
+        let id = dataIdFn(dataItem);
+        let obj = objMap[id];
+        if (dataItem.remove) {
+            if (obj != null) {
+                obj.dispose();
+                delete objMap[id];
+            }
+            continue;
+        }
+        if (obj == null) {
+            if (!dataItem.full) {
+                console.log("cannot create object, dataitem is not full", objs, dataItem);
+                continue
+            }
+            obj = ctorFn(dataItem);
+            objMap[id] = obj;
+            continue;
+        }
+        obj.mergeData(dataItem);
+    }
+    let newObjs = Object.values(objMap);
+    if (sortIdxFn) {
+        newObjs.sort((a, b) => {
+            return sortIdxFn(a) - sortIdxFn(b);
+        });
+    }
+    objs.replace(newObjs);
+}
+
+export {handleJsonFetchResponse, base64ToArray, genMergeData};