Clean up selection logic and rename next/prev to above/below

example/src/index.ts

@@ -212,13 +212,13 @@ function main(): void {
   {
     category: 'Notebook Cell',
     text: 'Extend Selection Above',
-    shortcut: 'Accel J',
+    shortcut: 'Shift J',
     handler: () => { nbManager.extendSelectionAbove() ; }
   },
   {
     category: 'Notebook Cell',
     text: 'Extend Selection Below',
-    shortcut: 'Accel K',
+    shortcut: 'Shift K',
     handler: () => { nbManager.extendSelectionBelow() ; }
   },
   {
@@ -247,15 +247,15 @@ function main(): void {
   },
   {
     category: 'Notebook Cell',
-    text: 'Select Previous',
+    text: 'Select Above',
     shortcut: 'ArrowUp',
-    handler: () => { nbManager.selectPrev(); }
+    handler: () => { nbManager.selectAbove(); }
   },
   {
     category: 'Notebook Cell',
-    text: 'Select Next',
+    text: 'Select Below',
     shortcut: 'ArrowDown',
-    handler: () => { nbManager.selectNext(); }
+    handler: () => { nbManager.selectBelow(); }
   },
   ];
   pModel.addItems(items);
@@ -349,22 +349,22 @@ function main(): void {
   {
     selector: '.jp-Notebook.jp-mod-commandMode',
     sequence: ['J'],
-    handler: () => { nbManager.selectNext(); }
+    handler: () => { nbManager.selectBelow(); }
   },
   {
     selector: '.jp-Notebook.jp-mod-commandMode',
     sequence: ['ArrowDown'],
-    handler: () => { nbManager.selectNext(); }
+    handler: () => { nbManager.selectBelow(); }
   },
   {
     selector: '.jp-Notebook.jp-mod-commandMode',
     sequence: ['K'],
-    handler: () => { nbManager.selectPrev(); }
+    handler: () => { nbManager.selectAbove(); }
   },
   {
     selector: '.jp-Notebook.jp-mod-commandMode',
     sequence: ['ArrowUp'],
-    handler: () => { nbManager.selectPrev(); }
+    handler: () => { nbManager.selectAbove(); }
   },
   {
     selector: '.jp-Notebook.jp-mod-commandMode',

src/notebook/notebook/manager.ts

@@ -56,7 +56,7 @@ class NotebookManager {
     let model = this.model;
     for (let i = 0; i < model.cells.length; i++) {
       let cell = model.cells.get(i);
-      if (i === model.activeCellIndex || model.isSelected(cell)) {
+      if (model.isSelected(cell)) {
         undelete.push(this.cloneCell(cell));
         model.cells.remove(cell);
       }
@@ -97,7 +97,7 @@ class NotebookManager {
     let model = this.model;
     for (let i = 0; i < model.cells.length; i++) {
       let cell = model.cells.get(i);
-      if (i === model.activeCellIndex || model.isSelected(cell)) {
+      if (model.isSelected(cell)) {
         toMerge.push(cell.input.textEditor.text);
       }
       if (i === model.activeCellIndex) {
@@ -155,7 +155,7 @@ class NotebookManager {
     let model = this.model;
     for (let i = 0; i < model.cells.length; i++) {
       let cell = model.cells.get(i);
-      if (i === model.activeCellIndex || model.isSelected(cell)) {
+      if (model.isSelected(cell)) {
         this._copied.push(this.cloneCell(cell));
       }
     }
@@ -171,7 +171,7 @@ class NotebookManager {
     let model = this.model;
     for (let i = 0; i < model.cells.length; i++) {
       let cell = model.cells.get(i);
-      if (i === model.activeCellIndex || model.isSelected(cell)) {
+      if (model.isSelected(cell)) {
         this._cut.push(this.cloneCell(cell));
         model.cells.remove(cell);
       }
@@ -210,7 +210,7 @@ class NotebookManager {
     let model = this.model;
     for (let i = 0; i < model.cells.length; i++) {
       let cell = model.cells.get(i);
-      if (i !== model.activeCellIndex && !model.isSelected(cell)) {
+      if (!model.isSelected(cell)) {
         continue;
       }
       let newCell: ICellModel;
@@ -241,15 +241,14 @@ class NotebookManager {
     let selected: ICellModel[] = [];
     for (let i = 0; i < cells.length; i++) {
       let cell = cells.get(i);
-      if (i === model.activeCellIndex || model.isSelected(cell)) {
+      if (model.isSelected(cell)) {
         selected.push(cell);
       }
     }
     for (let cell of selected) {
-       model.activeCellIndex = cells.indexOf(cell);
-       model.runActiveCell();
+      model.activeCellIndex = cells.indexOf(cell);
+      model.runActiveCell();
     }
-    this.deselectCells();
   }
 
   /**
@@ -309,9 +308,9 @@ class NotebookManager {
   }
 
   /**
-   * Select the next cell.
+   * Select the cell below the active cell.
    */
-  selectNext(): void {
+  selectBelow(): void {
     if (this.model.activeCellIndex === this.model.cells.length - 1) {
       return;
     }
@@ -320,9 +319,9 @@ class NotebookManager {
   }
 
   /**
-   * Select the previous cell.
+   * Select the above the active cell.
    */
-  selectPrev(): void {
+  selectAbove(): void {
     if (this.model.activeCellIndex === 0) {
       return;
     }
@@ -331,7 +330,7 @@ class NotebookManager {
   }
 
   /**
-   * Extend the selection to the previous cell.
+   * Extend the selection to the cell above.
    */
   extendSelectionAbove(): void {
     let model = this.model;
@@ -341,9 +340,7 @@ class NotebookManager {
       return;
     }
     let current = cells.get(model.activeCellIndex);
-    model.select(current);
-    model.activeCellIndex -= 1;
-    let prev = cells.get(model.activeCellIndex);
+    let prev = cells.get(model.activeCellIndex - 1);
     if (model.isSelected(prev)) {
       model.deselect(current);
       if (model.activeCellIndex >= 1) {
@@ -355,12 +352,13 @@ class NotebookManager {
         model.deselect(prev);
       }
     } else {
-      this.model.select(prev);
+      model.select(current);
     }
+    model.activeCellIndex -= 1;
   }
 
   /**
-   * Extend the selection to the next cell.
+   * Extend the selection to the cell below.
    */
   extendSelectionBelow(): void {
     let model = this.model;
@@ -370,9 +368,7 @@ class NotebookManager {
       return;
     }
     let current = cells.get(model.activeCellIndex);
-    model.select(current);
-    model.activeCellIndex += 1;
-    let next = cells.get(model.activeCellIndex);
+    let next = cells.get(model.activeCellIndex + 1);
     if (model.isSelected(next)) {
       model.deselect(current);
       if (model.activeCellIndex < cells.length - 1) {
@@ -384,8 +380,9 @@ class NotebookManager {
         model.deselect(next);
       }
     } else {
-      this.model.select(next);
+      model.select(current);
     }
+    model.activeCellIndex += 1;
   }
 
   /**

src/notebook/notebook/model.ts

@@ -400,8 +400,7 @@ class NotebookModel implements INotebookModel {
    * The index of the active cell.
    *
    * #### Notes
-   * The value will be clamped.  When setting this, all other cells
-   * will be marked as inactive.
+   * The value will be clamped.  The active cell is considered to be selected.
    */
   get activeCellIndex(): number {
     return this._activeCellIndex;
@@ -496,6 +495,9 @@ class NotebookModel implements INotebookModel {
 
   /**
    * Deselect a cell.
+   *
+   * #### Notes
+   * This has no effect on the "active" cell.
    */
   deselect(cell: ICellModel): void {
     NotebookModelPrivate.selectedProperty.set(cell, false);
@@ -503,10 +505,11 @@ class NotebookModel implements INotebookModel {
   }
 
   /**
-   * Weheter a cell is selected.
+   * Whether a cell is selected.
    */
   isSelected(cell: ICellModel): boolean {
-    return NotebookModelPrivate.selectedProperty.get(cell);
+    return (NotebookModelPrivate.selectedProperty.get(cell) ||
+            this.cells.indexOf(cell) === this.activeCellIndex);
   }
 
   /**

src/notebook/notebook/widget.ts

@@ -180,6 +180,11 @@ const ACTIVE_CLASS = 'jp-mod-active';
  */
 const SELECTED_CLASS = 'jp-mod-selected';
 
+/**
+ * The class name added to an active cell when there are other selected cells.
+ */
+const OTHER_SELECTED_CLASS = 'jp-mod-multiSelected';
+
 
 /**
  * A panel which contains a toolbar and a notebook.
@@ -437,18 +442,25 @@ class NotebookWidget extends Widget {
     if (widget) {
       widget.addClass(ACTIVE_CLASS);
     }
+    let count = 0;
     for (let i = 0; i < layout.childCount(); i++) {
       let cell = model.cells.get(i);
       widget = layout.childAt(i) as BaseCellWidget;
       if (i !== model.activeCellIndex) {
         widget.removeClass(ACTIVE_CLASS);
       }
+      widget.removeClass(OTHER_SELECTED_CLASS);
       if (model.isSelected(cell)) {
         widget.addClass(SELECTED_CLASS);
+        count++;
       } else {
         widget.removeClass(SELECTED_CLASS);
       }
     }
+    if (count > 1) {
+      widget = layout.childAt(model.activeCellIndex) as BaseCellWidget;
+      widget.addClass(OTHER_SELECTED_CLASS);
+    }
   }
 
   /**

src/notebook/theme.css

@@ -105,14 +105,14 @@
 }
 
 
-.jp-Notebook.jp-mod-commandMode .jp-Notebook-cell.jp-mod-active {
+.jp-Notebook.jp-mod-commandMode .jp-Notebook-cell.jp-mod-active.jp-mod-selected {
   border-color: #ABABAB;
   border-left-width: 1px;
   background: linear-gradient(to right, #42A5F5 -40px, #42A5F5 5px, transparent 5px, transparent 100%);
 }
 
 
-.jp-Notebook.jp-mod-commandMode .jp-Notebook-cell.jp-mod-selected.jp-mod-active {
+.jp-Notebook.jp-mod-commandMode .jp-Notebook-cell.jp-mod-otherSelected.jp-mod-active {
   background: linear-gradient(to right, #42A5F5 -40px, #42A5F5 7px, #E3F2FD 7px, #E3F2FD 100%);
 }