Support grid selection with Ctrl+Shift+Arrow (#615)

app/client/components/GridView.js

@@ -316,6 +316,20 @@ GridView.gridCommands = {
     this._shiftSelect(-1, this.cellSelector.col.end, selector.ROW,
                       this.viewSection.viewFields().peekLength - 1);
   },
+  ctrlShiftDown: function () {
+    this._shiftSelectUntilContent(selector.COL, 1, this.cellSelector.row.end, this.getLastDataRowIndex());
+  },
+  ctrlShiftUp: function () {
+    this._shiftSelectUntilContent(selector.COL, -1, this.cellSelector.row.end, this.getLastDataRowIndex());
+  },
+  ctrlShiftRight: function () {
+    this._shiftSelectUntilContent(selector.ROW, 1, this.cellSelector.col.end,
+      this.viewSection.viewFields().peekLength - 1);
+  },
+  ctrlShiftLeft: function () {
+    this._shiftSelectUntilContent(selector.ROW, -1, this.cellSelector.col.end,
+      this.viewSection.viewFields().peekLength - 1);
+  },
   fillSelectionDown: function() { this.fillSelectionDown(); },
   selectAll: function() { this.selectAll(); },
 
@@ -403,6 +417,120 @@ GridView.prototype._shiftSelect = function(step, selectObs, exemptType, maxVal)
   selectObs(newVal);
 };
 
+GridView.prototype._shiftSelectUntilContent = function(type, direction, selectObs, maxVal) {
+  const selection = {
+    colStart: this.cellSelector.col.start(),
+    colEnd: this.cellSelector.col.end(),
+    rowStart: this.cellSelector.row.start(),
+    rowEnd: this.cellSelector.row.end(),
+  };
+
+  const steps = this._stepsToContent(type, direction, selection, maxVal);
+  if (steps > 0) { this._shiftSelect(direction * steps, selectObs, type, maxVal); }
+}
+
+GridView.prototype._stepsToContent = function (type, direction, selection, maxVal) {
+  const {colEnd: colEnd, rowEnd: rowEnd} = selection;
+  let selectionData;
+
+  const cursorCol = this.cursor.fieldIndex();
+  const cursorRow = this.cursor.rowIndex();
+
+  if (type === selector.ROW && direction > 0) {
+    if (colEnd + 1 > maxVal) { return 0; }
+
+    selectionData = this._selectionData({colStart: colEnd, colEnd: maxVal, rowStart: cursorRow, rowEnd: cursorRow});
+  } else if (type === selector.ROW && direction < 0) {
+    if (colEnd - 1 < 0) { return 0; }
+
+    selectionData = this._selectionData({colStart: 0, colEnd, rowStart: cursorRow, rowEnd: cursorRow});
+  } else if (type === selector.COL && direction > 0) {
+    if (rowEnd + 1 > maxVal) { return 0; }
+
+    selectionData = this._selectionData({colStart: cursorCol, colEnd: cursorCol, rowStart: rowEnd, rowEnd: maxVal});
+  } else if (type === selector.COL && direction < 0) {
+    if (rowEnd - 1 > maxVal) { return 0; }
+
+    selectionData = this._selectionData({colStart: cursorCol, colEnd: cursorCol, rowStart: 0, rowEnd});
+  }
+
+  const {fields, rowIndices} = selectionData;
+  if (type === selector.ROW && direction < 0) {
+    // When moving selection left, we step through fields in reverse order.
+    fields.reverse();
+  }
+  if (type === selector.COL && direction < 0) {
+    // When moving selection up, we step through rows in reverse order.
+    rowIndices.reverse();
+  }
+
+  const colValuesByIndex = {};
+  for (const field of fields) {
+    const displayColId = field.displayColModel.peek().colId.peek();
+    colValuesByIndex[field._index()] = this.tableModel.tableData.getColValues(displayColId);
+  }
+
+  let steps = 0;
+
+  if (type === selector.ROW) {
+    const rowIndex = rowIndices[0];
+    const isLastColEmpty = this._isCellValueEmpty(colValuesByIndex[colEnd][rowIndex]);
+    const isNextColEmpty = this._isCellValueEmpty(colValuesByIndex[colEnd + direction][rowIndex]);
+    const shouldStopOnEmptyValue = !isLastColEmpty && !isNextColEmpty;
+    for (let i = 1; i < fields.length; i++) {
+      const hasEmptyValues = this._isCellValueEmpty(colValuesByIndex[fields[i]._index()][rowIndex]);
+      if (hasEmptyValues && shouldStopOnEmptyValue) {
+        return steps;
+      } else if (!hasEmptyValues && !shouldStopOnEmptyValue) {
+        return steps + 1;
+      }
+
+      steps += 1;
+    }
+  } else {
+    const colValues = colValuesByIndex[fields[0]._index()];
+    const isLastRowEmpty = this._isCellValueEmpty(colValues[rowIndices[0]]);
+    const isNextRowEmpty = this._isCellValueEmpty(colValues[rowIndices[1]]);
+    const shouldStopOnEmptyValue = !isLastRowEmpty && !isNextRowEmpty;
+    for (let i = 1; i < rowIndices.length; i++) {
+      const hasEmptyValues = this._isCellValueEmpty(colValues[rowIndices[i]]);
+      if (hasEmptyValues && shouldStopOnEmptyValue) {
+        return steps;
+      } else if (!hasEmptyValues && !shouldStopOnEmptyValue) {
+        return steps + 1;
+      }
+
+      steps += 1;
+    }
+  }
+
+  return steps;
+}
+
+GridView.prototype._selectionData = function({colStart, colEnd, rowStart, rowEnd}) {
+  const fields = [];
+  for (let i = colStart; i <= colEnd; i++) {
+    const field = this.viewSection.viewFields().at(i);
+    if (!field) { continue; }
+
+    fields.push(field);
+  }
+
+  const rowIndices = [];
+  for (let i = rowStart; i <= rowEnd; i++) {
+    const rowId = this.viewData.getRowId(i);
+    if (!rowId) { continue; }
+
+    rowIndices.push(this.tableModel.tableData.getRowIdIndex(rowId));
+  }
+
+  return {fields, rowIndices};
+}
+
+GridView.prototype._isCellValueEmpty = function(value) {
+  return value === null || value === undefined || value === '' || value === 'false';
+}
+
 /**
  * Pastes the provided data at the current cursor.
  *
@@ -532,15 +660,15 @@ GridView.prototype.fillSelectionDown = function() {
 
 
 /**
- * Returns a GridSelection of the selected rows and cols
+ * Returns a CopySelection of the selected rows and cols
  * @returns {Object} CopySelection
  */
 GridView.prototype.getSelection = function() {
-  var rowIds = [], fields = [], rowStyle = {}, colStyle = {};
-  var colStart = this.cellSelector.colLower();
-  var colEnd = this.cellSelector.colUpper();
-  var rowStart = this.cellSelector.rowLower();
-  var rowEnd = this.cellSelector.rowUpper();
+  let rowIds = [], fields = [], rowStyle = {}, colStyle = {};
+  let colStart = this.cellSelector.colLower();
+  let colEnd = this.cellSelector.colUpper();
+  let rowStart = this.cellSelector.rowLower();
+  let rowEnd = this.cellSelector.rowUpper();
 
   // If there is no selection, just copy/paste the cursor cell
   if (this.cellSelector.isCurrentSelectType(selector.NONE)) {

app/client/components/commandList.ts

@@ -50,6 +50,10 @@ export type CommandName =
   | 'shiftUp'
   | 'shiftRight'
   | 'shiftLeft'
+  | 'ctrlShiftDown'
+  | 'ctrlShiftUp'
+  | 'ctrlShiftRight'
+  | 'ctrlShiftLeft'
   | 'selectAll'
   | 'copyLink'
   | 'editField'
@@ -373,6 +377,22 @@ export const groups: CommendGroupDef[] = [{
      name: 'shiftLeft',
      keys: ['Shift+Left'],
      desc: 'Adds the element to the left of the cursor to the selected range'
+    }, {
+      name: 'ctrlShiftDown',
+      keys: ['Mod+Shift+Down'],
+      desc: 'Adds all elements below the cursor to the selected range'
+    }, {
+      name: 'ctrlShiftUp',
+      keys: ['Mod+Shift+Up'],
+      desc: 'Adds all elements above the cursor to the selected range'
+    }, {
+      name: 'ctrlShiftRight',
+      keys: ['Mod+Shift+Right'],
+      desc: 'Adds all elements to the right of the cursor to the selected range'
+    }, {
+      name: 'ctrlShiftLeft',
+      keys: ['Mod+Shift+Left'],
+      desc: 'Adds all elements to the left of the cursor to the selected range'
     }, {
       name: 'selectAll',
       keys: ['Mod+A'],