Split Panes (#693)

* npm: add .npmrc with save-exact=true

* split panes: create initial implementation

This allows users to split their Hyperterm terms into
multiple nested splits, both vertical and horizontal.

Fixes #56

* split panes: suport closing tabs and individual panes

* split panes: ensure new splits are placed at the correct index

New split panes should be placed after the currently active
pane, not at the end like they were previously.

* split panes: add explicit dependency to uuid

* split panes: implement split pane cycling

This adds menu buttons for moving back and forward between
open split panes in the currect terminal tab.
Doesn't add a hotkey yet, needs some bikeshedding.

* split panes: move activeSessionUid to its own object

It made little sense to have so many objects with `activeSessionUid`
set to `null` when it only mattered on the top level.
Now it's an object mapping term-group `uid` to `sessionUid` instead.

* split panes: make sure closing the last split pane exits the app

* split panes: fix a crash after closing specific panes

Sometimes the terminal would crash when a specific
split pane was closed, because the `activeSessions`
mapping wasn't updated correctly.

* split panes: fix a bug that caused initial session sizing to be wrong

* fix all our focus / blur issues in one fell swoop :O (famous last words)

* get rid of react warning

* hterm: make sure not to lose focus when VT listens on clicks

* term: restore onactive callback

* add missing `return` to override (just in case)

* split pane: new split pane implementation

* goodbye react-split-pane

* added term group resizing action and reducer

* terms: supply border color so that we can use it for splits

* term-group: add resizing hook

* term-groups: add resizing constant

* remove split pane css side-effect

* split panes: pass existing hterm instances to Term

* split panes: add keybindings for split pane cycling

* split panes: remove unused action

* split panes: remove unused styling

* split-pane: remove `console.log`

* split-pane: remove `console.log`

* split panes: rebalance sizes on insert/removal

* split panes: pass existing hterm instances to Term

* split panes: add keybindings for split pane cycling

* split panes: remove unused action

* split panes: remove unused styling

* split panes: rebalance sizes on insert/removal

* split panes: set a minimum size for resizing

* split-pane: fix vertical splits

* css :|

* package: bump electron

* split panes: attach onFocus listener to webviews

* 1.4.1 and 1.4.2 are broken. they have the following regression:
- open google.com on the main window
- open a new tab
- come back to previous tab. webview is gone :|

* split panes: handle PTY exits

* split panes: add linux friendly keybindings

.npmrc

@@ -0,0 +1 @@
+save-exact=true

app/.npmrc

@@ -0,0 +1 @@
+save-exact=true

app/index.js

@@ -155,7 +155,7 @@ app.on('ready', () => installDevExtensions(isDev).then(() => {
       // If no callback is passed to createWindow,
       // a new session will be created by default.
       if (!fn) {
-        fn = win => win.rpc.emit('session add req');
+        fn = win => win.rpc.emit('termgroup add req');
       }
 
       // app.windowCallback is the createWindow callback
@@ -173,14 +173,17 @@ app.on('ready', () => installDevExtensions(isDev).then(() => {
       }
     });
 
-    rpc.on('new', ({rows = 40, cols = 100, cwd = process.env.HOME}) => {
+    rpc.on('new', ({rows = 40, cols = 100, cwd = process.env.HOME, splitDirection}) => {
       const shell = cfg.shell;
       const shellArgs = cfg.shellArgs && Array.from(cfg.shellArgs);
 
       initSession({rows, cols, cwd, shell, shellArgs}, (uid, session) => {
         sessions.set(uid, session);
         rpc.emit('session add', {
+          rows,
+          cols,
           uid,
+          splitDirection,
           shell: session.shell,
           pid: session.pty.pid
         });
@@ -242,10 +245,9 @@ app.on('ready', () => installDevExtensions(isDev).then(() => {
       win.maximize();
     });
 
-    rpc.on('resize', ({cols, rows}) => {
-      sessions.forEach(session => {
-        session.resize({cols, rows});
-      });
+    rpc.on('resize', ({uid, cols, rows}) => {
+      const session = sessions.get(uid);
+      session.resize({cols, rows});
     });
 
     rpc.on('data', ({uid, data}) => {

app/menu.js

@@ -73,7 +73,7 @@ module.exports = function createMenu({createWindow, updatePlugins}) {
         accelerator: 'CmdOrCtrl+T',
         click(item, focusedWindow) {
           if (focusedWindow) {
-            focusedWindow.rpc.emit('session add req');
+            focusedWindow.rpc.emit('termgroup add req');
           } else {
             createWindow();
           }
@@ -82,12 +82,33 @@ module.exports = function createMenu({createWindow, updatePlugins}) {
       {
         type: 'separator'
       },
+      {
+        label: 'Split Vertically',
+        accelerator: 'Ctrl+Shift+E',
+        click(item, focusedWindow) {
+          if (focusedWindow) {
+            focusedWindow.rpc.emit('split request vertical');
+          }
+        }
+      },
+      {
+        label: 'Split Horizontally',
+        accelerator: 'Ctrl+Shift+O',
+        click(item, focusedWindow) {
+          if (focusedWindow) {
+            focusedWindow.rpc.emit('split request horizontal');
+          }
+        }
+      },
+      {
+        type: 'separator'
+      },
       {
         label: 'Close',
         accelerator: 'CmdOrCtrl+W',
         click(item, focusedWindow) {
           if (focusedWindow) {
-            focusedWindow.rpc.emit('session close req');
+            focusedWindow.rpc.emit('termgroup close req');
           }
         }
       },
@@ -264,6 +285,27 @@ module.exports = function createMenu({createWindow, updatePlugins}) {
       {
         type: 'separator'
       },
+      {
+        label: 'Select Next Pane',
+        accelerator: 'Ctrl+Alt+Tab',
+        click(item, focusedWindow) {
+          if (focusedWindow) {
+            focusedWindow.rpc.emit('next pane req');
+          }
+        }
+      },
+      {
+        label: 'Select Previous Pane',
+        accelerator: 'Ctrl+Shift+Alt+Tab',
+        click(item, focusedWindow) {
+          if (focusedWindow) {
+            focusedWindow.rpc.emit('prev pane req');
+          }
+        }
+      },
+      {
+        type: 'separator'
+      },
       {
         role: 'front'
       },

lib/actions/header.js

@@ -1,16 +1,15 @@
 import {CLOSE_TAB, CHANGE_TAB} from '../constants/tabs';
 import {UI_WINDOW_MAXIMIZE, UI_WINDOW_UNMAXIMIZE} from '../constants/ui';
 import rpc from '../rpc';
-
-import {userExitSession, setActiveSession} from './sessions';
+import {userExitTermGroup, setActiveGroup} from './term-groups';
 
 export function closeTab(uid) {
   return dispatch => {
     dispatch({
       type: CLOSE_TAB,
       uid,
       effect() {
-        dispatch(userExitSession(uid));
+        dispatch(userExitTermGroup(uid));
       }
     });
   };
@@ -22,7 +21,7 @@ export function changeTab(uid) {
       type: CHANGE_TAB,
       uid,
       effect() {
-        dispatch(setActiveSession(uid));
+        dispatch(setActiveGroup(uid));
       }
     });
   };

lib/actions/sessions.js

@@ -1,6 +1,7 @@
 import rpc from '../rpc';
 import getURL from '../utils/url-command';
 import {keys} from '../utils/object';
+import {findBySession} from '../utils/term-groups';
 import {
   SESSION_ADD,
   SESSION_RESIZE,
@@ -9,7 +10,6 @@ import {
   SESSION_PTY_DATA,
   SESSION_PTY_EXIT,
   SESSION_USER_EXIT,
-  SESSION_USER_EXIT_ACTIVE,
   SESSION_SET_ACTIVE,
   SESSION_CLEAR_ACTIVE,
   SESSION_USER_DATA,
@@ -19,13 +19,18 @@ import {
   SESSION_SET_PROCESS_TITLE
 } from '../constants/sessions';
 
-export function addSession(uid, shell, pid) {
-  return dispatch => {
+export function addSession({uid, shell, pid, cols, rows, splitDirection}) {
+  return (dispatch, getState) => {
+    const {sessions} = getState();
     dispatch({
       type: SESSION_ADD,
       uid,
       shell,
-      pid
+      pid,
+      cols,
+      rows,
+      splitDirection,
+      activeUid: sessions.activeUid
     });
   };
 }
@@ -72,33 +77,16 @@ export function addSessionData(uid, data) {
   };
 }
 
-export function sessionExit(uid) {
-  return (dispatch, getState) => {
+function createExitAction(type) {
+  return uid => (dispatch, getState) => {
     return dispatch({
-      type: SESSION_PTY_EXIT,
+      type,
       uid,
       effect() {
-        // we reiterate the same logic as below
-        // for SESSION_USER_EXIT since the exit
-        // could happen pty side or optimistic
-        const sessions = keys(getState().sessions.sessions);
-        if (!sessions.length) {
-          window.close();
+        if (type === SESSION_USER_EXIT) {
+          rpc.emit('exit', {uid});
         }
-      }
-    });
-  };
-}
 
-// we want to distinguish an exit
-// that's UI initiated vs pty initiated
-export function userExitSession(uid) {
-  return (dispatch, getState) => {
-    return dispatch({
-      type: SESSION_USER_EXIT,
-      uid,
-      effect() {
-        rpc.emit('exit', {uid});
         const sessions = keys(getState().sessions.sessions);
         if (!sessions.length) {
           window.close();
@@ -108,17 +96,10 @@ export function userExitSession(uid) {
   };
 }
 
-export function userExitActiveSession() {
-  return (dispatch, getState) => {
-    dispatch({
-      type: SESSION_USER_EXIT_ACTIVE,
-      effect() {
-        const uid = getState().sessions.activeUid;
-        dispatch(userExitSession(uid));
-      }
-    });
-  };
-}
+// we want to distinguish an exit
+// that's UI initiated vs pty initiated
+export const userExitSession = createExitAction(SESSION_USER_EXIT);
+export const ptyExitSession = createExitAction(SESSION_PTY_EXIT);
 
 export function setActiveSession(uid) {
   return (dispatch, getState) => {
@@ -163,13 +144,20 @@ export function setSessionXtermTitle(uid, title) {
 }
 
 export function resizeSession(uid, cols, rows) {
-  return {
-    type: SESSION_RESIZE,
-    cols,
-    rows,
-    effect() {
-      rpc.emit('resize', {cols, rows});
-    }
+  return (dispatch, getState) => {
+    const {termGroups} = getState();
+    const group = findBySession(termGroups, uid);
+    const isStandaloneTerm = !group.parentUid && !group.children.length;
+    dispatch({
+      type: SESSION_RESIZE,
+      uid,
+      cols,
+      rows,
+      isStandaloneTerm,
+      effect() {
+        rpc.emit('resize', {uid, cols, rows});
+      }
+    });
   };
 }