@deephaven/grid 0.7.3-beta.0 → 0.8.0

package/dist/Grid.js

@@ -12,21 +12,21 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import memoize from 'memoize-one';
-import PropTypes from 'prop-types';
 import clamp from 'lodash.clamp';
 import GridMetricCalculator from "./GridMetricCalculator.js";
-import GridModel from "./GridModel.js";
-import GridMouseHandler from "./GridMouseHandler.js";
 import GridTheme from "./GridTheme.js";
-import GridRange from "./GridRange.js";
+import GridRange, { SELECTION_DIRECTION } from "./GridRange.js";
 import GridRenderer from "./GridRenderer.js";
 import GridUtils from "./GridUtils.js";
 import { GridSelectionMouseHandler, GridColumnMoveMouseHandler, GridColumnSeparatorMouseHandler, GridHorizontalScrollBarMouseHandler, GridRowMoveMouseHandler, GridRowSeparatorMouseHandler, GridRowTreeMouseHandler, GridScrollBarCornerMouseHandler, GridVerticalScrollBarMouseHandler, EditMouseHandler } from "./mouse-handlers/index.js";
 import "./Grid.css";
-import KeyHandler from "./KeyHandler.js";
 import { EditKeyHandler, PasteKeyHandler, SelectionKeyHandler, TreeKeyHandler } from "./key-handlers/index.js";
 import CellInputField from "./CellInputField.js";
 import PasteError from "./errors/PasteError.js";
+import { isExpandableGridModel } from "./ExpandableGridModel.js";
+import { assertIsEditableGridModel, isEditableGridModel } from "./EditableGridModel.js";
+import { assertIsDefined } from "./errors/index.js";
+
 /**
  * High performance, extendible, themeable grid component.
  * Architectured to be fast and handle billions of rows/columns by default.
@@ -41,23 +41,66 @@ import PasteError from "./errors/PasteError.js";
  * Add an onViewChanged callback to page in/out data as user moves around the grid
  * Can also add onClick and onContextMenu handlers to add custom functionality and menus.
  */
-
 class Grid extends PureComponent {
   // use same constant as chrome source for windows
   // https://github.com/chromium/chromium/blob/973af9d461b6b5dc60208c8d3d66adc27e53da78/ui/events/blink/web_input_event_builders_win.cc#L285
+
+  /**
+   * On some devices there may be different scaling required for high DPI. Get the scale required for the canvas.
+   * @param context The canvas context
+   * @returns The scale to use
+   */
   static getScale(context) {
-    var devicePixelRatio = window.devicePixelRatio || 1;
-    var backingStorePixelRatio = context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1;
+    var devicePixelRatio = window.devicePixelRatio || 1; // backingStorePixelRatio is deprecated, but check it just in case
+
+    var legacyContext = context;
+    var backingStorePixelRatio = legacyContext.webkitBackingStorePixelRatio || legacyContext.mozBackingStorePixelRatio || legacyContext.msBackingStorePixelRatio || legacyContext.oBackingStorePixelRatio || legacyContext.backingStorePixelRatio || 1;
     return devicePixelRatio / backingStorePixelRatio;
   }
+  /**
+   * Get the class name from the cursor provided
+   * @param cursor The grid cursor to use
+   * @returns Class name with the grid-cursor prefix or null if no cursor provided
+   */
+
 
   static getCursorClassName(cursor) {
     return cursor ? "grid-cursor-".concat(cursor) : null;
-  }
+  } // Need to disable react/sort-comp so I can put the fields here
+
+  /* eslint-disable react/sort-comp */
 
+
+  /* eslint-enable react/sort-comp */
   constructor(props) {
     super(props);
 
+    _defineProperty(this, "renderer", void 0);
+
+    _defineProperty(this, "metricCalculator", void 0);
+
+    _defineProperty(this, "canvas", void 0);
+
+    _defineProperty(this, "canvasContext", void 0);
+
+    _defineProperty(this, "animationFrame", void 0);
+
+    _defineProperty(this, "prevMetrics", void 0);
+
+    _defineProperty(this, "metrics", void 0);
+
+    _defineProperty(this, "isStuckToBottom", void 0);
+
+    _defineProperty(this, "isStuckToRight", void 0);
+
+    _defineProperty(this, "documentCursor", void 0);
+
+    _defineProperty(this, "dragTimer", void 0);
+
+    _defineProperty(this, "keyHandlers", void 0);
+
+    _defineProperty(this, "mouseHandlers", void 0);
+
     _defineProperty(this, "getCachedKeyHandlers", memoize(keyHandlers => [...keyHandlers, ...this.keyHandlers].sort((a, b) => a.order - b.order)));
 
     _defineProperty(this, "getCachedMouseHandlers", memoize(mouseHandlers => [...mouseHandlers, ...this.mouseHandlers].sort((a, b) => a.order - b.order)));
@@ -148,11 +191,13 @@ class Grid extends PureComponent {
   }
 
   componentDidMount() {
+    var _this$canvas;
+
     this.initContext(); // Need to explicitly add wheel event to canvas so we can preventDefault/avoid passive listener issue
     // Otherwise React attaches listener at doc level and you can't prevent default
     // https://github.com/facebook/react/issues/14856
 
-    this.canvas.addEventListener('wheel', this.handleWheel, {
+    (_this$canvas = this.canvas) === null || _this$canvas === void 0 ? void 0 : _this$canvas.addEventListener('wheel', this.handleWheel, {
       passive: false
     });
     window.addEventListener('resize', this.handleResize);
@@ -167,20 +212,25 @@ class Grid extends PureComponent {
       movedColumns,
       movedRows,
       onMovedColumnsChanged,
-      onMoveColumnComplete
+      onMoveColumnComplete,
+      onMovedRowsChanged,
+      onMoveRowComplete
     } = this.props;
     var {
       isStickyBottom: prevIsStickyBottom,
       isStickyRight: prevIsStickyRight,
       movedColumns: prevPropMovedColumns,
-      movedRows: prevMovedRows
+      movedRows: prevPropMovedRows
     } = prevProps;
     var {
-      movedColumns: prevStateMovedColumns
+      movedColumns: prevStateMovedColumns,
+      movedRows: prevStateMovedRows
     } = prevState;
     var {
       draggingColumn,
-      movedColumns: currentStateMovedColumns
+      draggingRow,
+      movedColumns: currentStateMovedColumns,
+      movedRows: currentStateMovedRows
     } = this.state;
 
     if (prevPropMovedColumns !== movedColumns) {
@@ -189,7 +239,7 @@ class Grid extends PureComponent {
       });
     }
 
-    if (prevMovedRows !== movedRows) {
+    if (prevPropMovedRows !== movedRows) {
       this.setState({
         movedRows
       });
@@ -203,6 +253,14 @@ class Grid extends PureComponent {
       onMoveColumnComplete(currentStateMovedColumns);
     }
 
+    if (prevStateMovedRows !== currentStateMovedRows) {
+      onMovedRowsChanged(currentStateMovedRows);
+    }
+
+    if (prevState.draggingRow != null && draggingRow == null) {
+      onMoveRowComplete(currentStateMovedRows);
+    }
+
     if (isStickyBottom !== prevIsStickyBottom) {
       this.isStuckToBottom = false;
     }
@@ -262,13 +320,13 @@ class Grid extends PureComponent {
   }
 
   componentWillUnmount() {
+    var _this$canvas2;
+
     if (this.animationFrame != null) {
       cancelAnimationFrame(this.animationFrame);
     }
 
-    this.canvas.removeEventListener('wheel', this.handleWheel, {
-      passive: false
-    });
+    (_this$canvas2 = this.canvas) === null || _this$canvas2 === void 0 ? void 0 : _this$canvas2.removeEventListener('wheel', this.handleWheel);
     window.removeEventListener('mousemove', this.handleMouseDrag, true);
     window.removeEventListener('mouseup', this.handleMouseUp, true);
     window.removeEventListener('resize', this.handleResize);
@@ -283,6 +341,7 @@ class Grid extends PureComponent {
   }
 
   getGridPointFromEvent(event) {
+    assertIsDefined(this.canvas);
     var rect = this.canvas.getBoundingClientRect();
     var x = event.clientX - rect.left;
     var y = event.clientY - rect.top;
@@ -290,6 +349,7 @@ class Grid extends PureComponent {
   }
 
   getGridPointFromXY(x, y) {
+    if (!this.metrics) throw new Error('metrics must be set');
     return GridUtils.getGridPointFromXY(x, y, this.metrics);
   }
 
@@ -300,6 +360,11 @@ class Grid extends PureComponent {
       model,
       stateOverride
     } = this.props;
+
+    if (!this.canvasContext || !this.canvas) {
+      throw new Error('Canvas and context must be defined to get metrics');
+    }
+
     var context = this.canvasContext;
     var width = this.canvas.clientWidth;
     var height = this.canvas.clientHeight;
@@ -343,33 +408,56 @@ class Grid extends PureComponent {
     } = this.props;
     return this.getCachedMouseHandlers(mouseHandlers);
   }
+  /**
+   * Translate from the provided visible index to the model index
+   * @param columnIndex The column index to get the model for
+   * @returns The model index
+   */
+
 
   getModelColumn(columnIndex) {
     var _this$metrics, _this$metrics$modelCo;
 
-    return (_this$metrics = this.metrics) === null || _this$metrics === void 0 ? void 0 : (_this$metrics$modelCo = _this$metrics.modelColumns) === null || _this$metrics$modelCo === void 0 ? void 0 : _this$metrics$modelCo.get(columnIndex);
+    var modelIndex = (_this$metrics = this.metrics) === null || _this$metrics === void 0 ? void 0 : (_this$metrics$modelCo = _this$metrics.modelColumns) === null || _this$metrics$modelCo === void 0 ? void 0 : _this$metrics$modelCo.get(columnIndex);
+
+    if (modelIndex === undefined) {
+      throw new Error("Unable to get ModelIndex for column ".concat(columnIndex));
+    }
+
+    return modelIndex;
   }
+  /**
+   * Translate from the provided visible index to the model index
+   * @param rowIndex The row index to get the model for
+   * @returns The model index
+   */
+
 
   getModelRow(rowIndex) {
     var _this$metrics2, _this$metrics2$modelR;
 
-    return (_this$metrics2 = this.metrics) === null || _this$metrics2 === void 0 ? void 0 : (_this$metrics2$modelR = _this$metrics2.modelRows) === null || _this$metrics2$modelR === void 0 ? void 0 : _this$metrics2$modelR.get(rowIndex);
+    var modelIndex = (_this$metrics2 = this.metrics) === null || _this$metrics2 === void 0 ? void 0 : (_this$metrics2$modelR = _this$metrics2.modelRows) === null || _this$metrics2$modelR === void 0 ? void 0 : _this$metrics2$modelR.get(rowIndex);
+
+    if (modelIndex === undefined) {
+      throw new Error("Unable to get ModelIndex for row ".concat(rowIndex));
+    }
+
+    return modelIndex;
   }
+  /**
+   * Toggle a row between expanded and collapsed states
+   * @param row The row to toggle expansion for
+   */
+
 
   toggleRowExpanded(row) {
-    var {
-      metrics
-    } = this;
-    var {
-      modelRows
-    } = metrics;
-    var modelRow = modelRows.get(row);
+    var modelRow = this.getModelRow(row);
     var {
       model
     } = this.props; // We only want to set expansion if the row is expandable
     // If it's not, still move the cursor to that position, as it may be outside of the current viewport and we don't know if it's expandable yet
 
-    if (model.isRowExpandable(modelRow)) {
+    if (isExpandableGridModel(model) && model.isRowExpandable(modelRow)) {
       model.setRowExpanded(modelRow, !model.isRowExpanded(modelRow));
     }
 
@@ -380,7 +468,11 @@ class Grid extends PureComponent {
     this.commitSelection();
     this.isStuckToBottom = false;
   }
-  /** Allows the selected range to be set programatically */
+  /**
+   * Allows the selected ranges to be set programatically
+   * Will update the cursor and selection start/end based on the new ranges
+   * @param gridRanges The new selected ranges to set
+   */
 
 
   setSelectedRanges(gridRanges) {
@@ -431,6 +523,7 @@ class Grid extends PureComponent {
     var {
       canvasOptions
     } = this.props;
+    if (!canvas) throw new Error('Canvas not set');
     this.canvasContext = canvas.getContext('2d', canvasOptions);
   }
 
@@ -441,6 +534,7 @@ class Grid extends PureComponent {
 
     this.animationFrame = requestAnimationFrame(() => {
       this.animationFrame = null;
+      if (!this.metrics) throw new Error('Metrics not set');
       this.updateCanvas(this.metrics);
     });
   }
@@ -460,6 +554,9 @@ class Grid extends PureComponent {
       canvas,
       canvasContext
     } = this;
+    if (!canvas) throw new Error('canvas not set');
+    if (!canvasContext) throw new Error('canvasContext not set');
+    if (!canvas.parentElement) throw new Error('Canvas has no parent element');
     var scale = Grid.getScale(canvasContext); // the parent wrapper has 100% width/height, and is used for determining size
     // we don't want to stretch the canvas to 100%, to avoid fractional pixels.
     // A wrapper element must be used for sizing, and canvas size must be
@@ -486,6 +583,11 @@ class Grid extends PureComponent {
     this.metrics = metricCalculator.getMetrics(metricState);
     return this.metrics;
   }
+  /**
+   * Check if the selection state has changed, and call the onSelectionChanged callback if they have
+   * @param prevState The previous grid state
+   */
+
 
   checkSelectionChange(prevState) {
     var {
@@ -502,6 +604,11 @@ class Grid extends PureComponent {
       onSelectionChanged(selectedRanges);
     }
   }
+  /**
+   * Validate the current selection, and reset if it is invalid
+   * @returns True if the selection is valid, false if the selection was invalid and has been reset
+   */
+
 
   validateSelection() {
     var {
@@ -530,6 +637,10 @@ class Grid extends PureComponent {
 
     return true;
   }
+  /**
+   * Clears all selected ranges
+   */
+
 
   clearSelectedRanges() {
     var {
@@ -554,6 +665,12 @@ class Grid extends PureComponent {
       });
     }
   }
+  /**
+   * Begin a selection operation at the provided location
+   * @param column Column where the selection is beginning
+   * @param row Row where the selection is beginning
+   */
+
 
   beginSelection(column, row) {
     this.setState({
@@ -567,10 +684,10 @@ class Grid extends PureComponent {
   }
   /**
    * Moves the selection to the cell specified
-   * @param {number} column The column index to move the cursor to
-   * @param {number} row The row index to move the cursor to
-   * @param {boolean} extendSelection Whether to extend the current selection (eg. holding Shift)
-   * @param {boolean} maximizePreviousRange When true, maximize/add to the previous range only, ignoring where the selection was started.
+   * @param column The column index to move the cursor to
+   * @param row The row index to move the cursor to
+   * @param extendSelection Whether to extend the current selection (eg. holding Shift)
+   * @param maximizePreviousRange When true, maximize/add to the previous range only, ignoring where the selection was started.
    */
 
 
@@ -599,10 +716,12 @@ class Grid extends PureComponent {
         var bottom = null;
 
         if (maximizePreviousRange) {
-          left = autoSelectRow ? null : Math.min(column, lastSelectedRange.startColumn);
-          top = autoSelectColumn ? null : Math.min(row, lastSelectedRange.startRow);
-          right = autoSelectRow ? null : Math.max(column, lastSelectedRange.endColumn);
-          bottom = autoSelectColumn ? null : Math.max(row, lastSelectedRange.endRow);
+          var _lastSelectedRange$st, _lastSelectedRange$st2, _lastSelectedRange$en, _lastSelectedRange$en2;
+
+          left = autoSelectRow ? null : Math.min(column !== null && column !== void 0 ? column : 0, (_lastSelectedRange$st = lastSelectedRange.startColumn) !== null && _lastSelectedRange$st !== void 0 ? _lastSelectedRange$st : 0);
+          top = autoSelectColumn ? null : Math.min(row !== null && row !== void 0 ? row : 0, (_lastSelectedRange$st2 = lastSelectedRange.startRow) !== null && _lastSelectedRange$st2 !== void 0 ? _lastSelectedRange$st2 : 0);
+          right = autoSelectRow ? null : Math.max(column !== null && column !== void 0 ? column : 0, (_lastSelectedRange$en = lastSelectedRange.endColumn) !== null && _lastSelectedRange$en !== void 0 ? _lastSelectedRange$en : 0);
+          bottom = autoSelectColumn ? null : Math.max(row !== null && row !== void 0 ? row : 0, (_lastSelectedRange$en2 = lastSelectedRange.endRow) !== null && _lastSelectedRange$en2 !== void 0 ? _lastSelectedRange$en2 : 0);
         } else {
           left = lastSelectedRange.startColumn;
           top = lastSelectedRange.startRow;
@@ -627,8 +746,7 @@ class Grid extends PureComponent {
           return null;
         }
 
-        var _newRanges = [].concat(selectedRanges);
-
+        var _newRanges = [...selectedRanges];
         _newRanges[_newRanges.length - 1] = selectedRange;
         return {
           selectedRanges: _newRanges,
@@ -637,7 +755,7 @@ class Grid extends PureComponent {
         };
       }
 
-      var newRanges = [].concat(selectedRanges);
+      var newRanges = [...selectedRanges];
       var selectedColumn = autoSelectRow ? null : column;
       var selectedRow = autoSelectColumn ? null : row;
       newRanges.push(GridRange.makeNormalized(selectedColumn, selectedRow, selectedColumn, selectedRow));
@@ -676,7 +794,9 @@ class Grid extends PureComponent {
         // For if we click on one cell multiple times.
         return {
           selectedRanges: [],
-          lastSelectedRanges: []
+          lastSelectedRanges: [],
+          cursorColumn,
+          cursorRow
         };
       }
 
@@ -736,6 +856,10 @@ class Grid extends PureComponent {
       };
     });
   }
+  /**
+   * Set the selection to the entire grid
+   */
+
 
   selectAll() {
     var {
@@ -752,6 +876,13 @@ class Grid extends PureComponent {
     var right = autoSelectRow ? null : model.columnCount - 1;
     this.setSelectedRanges([new GridRange(left, top, right, bottom)]);
   }
+  /**
+   * Move the cursor in relation to the current cursor position
+   * @param deltaColumn Number of columns to move the cursor
+   * @param deltaRow Number of rows to move the cursor
+   * @param extendSelection True if the current selection should be extended, false to start a new selection
+   */
+
 
   moveCursor(deltaColumn, deltaRow, extendSelection) {
     var {
@@ -787,7 +918,7 @@ class Grid extends PureComponent {
   }
   /**
    * Move the cursor in the provided selection direction
-   * @param {string} direction The direction to move the cursor in
+   * @param direction The direction to move the cursor in
    */
 
 
@@ -843,11 +974,11 @@ class Grid extends PureComponent {
   }
   /**
    * Move a cursor to the specified position in the grid.
-   * @param {number|null} column The column index to move the cursor to
-   * @param {number|null} row The row index to move the cursor to
-   * @param {boolean} extendSelection Whether to extend the current selection (eg. holding Shift)
-   * @param {boolean} keepCursorInView Whether to move the viewport so that the cursor is in view
-   * @param {boolean} maximizePreviousRange With this and `extendSelection` true, it will maximize/add to the previous range only, ignoring where the selection was started
+   * @param column The column index to move the cursor to
+   * @param row The row index to move the cursor to
+   * @param extendSelection Whether to extend the current selection (eg. holding Shift)
+   * @param keepCursorInView Whether to move the viewport so that the cursor is in view
+   * @param maximizePreviousRange With this and `extendSelection` true, it will maximize/add to the previous range only, ignoring where the selection was started
    */
 
 
@@ -869,12 +1000,13 @@ class Grid extends PureComponent {
   /**
    * Moves the view to make the specified cell visible
    *
-   * @param {number|null} column The column index to bring into view
-   * @param {number|null} row The row index to bring into view
+   * @param column The column index to bring into view
+   * @param row The row index to bring into view
    */
 
 
   moveViewToCell(column, row) {
+    if (!this.metrics) throw new Error('metrics not set');
     var {
       metricCalculator
     } = this;
@@ -922,13 +1054,14 @@ class Grid extends PureComponent {
   /**
    * Checks the `top` and `left` properties that are set and updates the isStuckToBottom/Right properties
    * Should be called when user interaction occurs
-   * @param {object} viewState New state properties to set.
-   * @param {boolean} forceUpdate Whether to force an update.
+   * @param viewState New state properties to set.
+   * @param forceUpdate Whether to force an update.
    */
 
 
   setViewState(viewState) {
     var forceUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (!this.metrics) throw new Error('metrics not set');
     var {
       isStickyBottom,
       isStickyRight
@@ -959,21 +1092,22 @@ class Grid extends PureComponent {
   /**
    * Start editing the data at the given index
    *
-   * @param {number} column The visible column index to start editing
-   * @param {number} row The visible row index to start editing
-   * @param {boolean} isQuickEdit If this is a quick edit (the arrow keys can commit)
-   * @param {number[]|null} selectionRange The tuple [start,end] text selection range of the value to select when editing
-   * @param {string?} value The value to start with in the edit field. Leave undefined to use the current value.
+   * @param column The visible column index to start editing
+   * @param row The visible row index to start editing
+   * @param isQuickEdit If this is a quick edit (the arrow keys can commit)
+   * @param selectionRange The tuple [start,end] text selection range of the value to select when editing
+   * @param value The value to start with in the edit field. Leave undefined to use the current value.
    */
 
 
   startEditing(column, row) {
     var isQuickEdit = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-    var selectionRange = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
-    var value = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : undefined;
+    var selectionRange = arguments.length > 3 ? arguments[3] : undefined;
+    var value = arguments.length > 4 ? arguments[4] : undefined;
     var {
       model
     } = this.props;
+    if (!isEditableGridModel(model)) throw new Error('model is not editable');
     var modelColumn = this.getModelColumn(column);
     var modelRow = this.getModelRow(row);
     var cell = {
@@ -990,6 +1124,14 @@ class Grid extends PureComponent {
     });
     this.moveViewToCell(column, row);
   }
+  /**
+   * Check if a value is valid for a specific cell
+   * @param column Column index of the cell to check
+   * @param row Row index of the cell to check
+   * @param value Value to check
+   * @returns True if the value is valid for the provided cell, false otherwise
+   */
+
 
   isValidForCell(column, row, value) {
     var {
@@ -997,13 +1139,13 @@ class Grid extends PureComponent {
     } = this.props;
     var modelColumn = this.getModelColumn(column);
     var modelRow = this.getModelRow(row);
-    return model.isValidForCell(modelColumn, modelRow, value);
+    return isEditableGridModel(model) && model.isValidForCell(modelColumn, modelRow, value);
   }
   /**
    * Paste a value with the current selection
    * It first needs to validate that the pasted table is valid for the given selection.
    * Also may update selection if single cells are selected and a table is pasted.
-   * @param {string[][] | string} value Table or a string that is being pasted
+   * @param value Table or a string that is being pasted
    */
 
 
@@ -1021,6 +1163,8 @@ class Grid extends PureComponent {
       } = _this.state;
 
       try {
+        assertIsEditableGridModel(model);
+
         if (!model.isEditable || !selectedRanges.every(range => model.isEditableRange(range))) {
           throw new PasteError("Can't paste in to read-only area.");
         }
@@ -1033,10 +1177,10 @@ class Grid extends PureComponent {
           // Just paste the value into all the selected cells
           var _edits = [];
           var modelRanges = GridUtils.getModelRanges(selectedRanges, movedColumns, movedRows);
-          GridRange.forEachCell(modelRanges, (x, y) => {
+          GridRange.forEachCell(modelRanges, (column, row) => {
             _edits.push({
-              x,
-              y,
+              column,
+              row,
               text: value
             });
           });
@@ -1051,31 +1195,43 @@ class Grid extends PureComponent {
           columnCount,
           rowCount
         } = model;
-        var ranges = selectedRanges; // If each cell is a single selection, we need to update the selection to map to the newly pasted data
+        var _ranges = selectedRanges; // If each cell is a single selection, we need to update the selection to map to the newly pasted data
 
-        if (ranges.every(range => GridRange.cellCount([range]) === 1 && range.startColumn + tableWidth <= columnCount && range.startRow + tableHeight <= rowCount)) {
+        if (_ranges.every(range => {
+          var _range$startColumn, _range$startRow;
+
+          return GridRange.cellCount([range]) === 1 && ((_range$startColumn = range.startColumn) !== null && _range$startColumn !== void 0 ? _range$startColumn : 0) + tableWidth <= columnCount && ((_range$startRow = range.startRow) !== null && _range$startRow !== void 0 ? _range$startRow : 0) + tableHeight <= rowCount;
+        })) {
           // Remap the selected ranges
-          ranges = ranges.map(range => new GridRange(range.startColumn, range.startRow, range.startColumn + tableWidth - 1, range.startRow + tableHeight - 1));
+          _ranges = _ranges.map(range => {
+            var _range$startColumn2, _range$startRow2;
+
+            return new GridRange(range.startColumn, range.startRow, ((_range$startColumn2 = range.startColumn) !== null && _range$startColumn2 !== void 0 ? _range$startColumn2 : 0) + tableWidth - 1, ((_range$startRow2 = range.startRow) !== null && _range$startRow2 !== void 0 ? _range$startRow2 : 0) + tableHeight - 1);
+          });
 
-          _this.setSelectedRanges(ranges);
+          _this.setSelectedRanges(_ranges);
         }
 
-        if (!ranges.every(range => GridRange.rowCount([range]) === tableHeight && GridRange.columnCount([range]) === tableWidth)) {
+        if (!_ranges.every(range => GridRange.rowCount([range]) === tableHeight && GridRange.columnCount([range]) === tableWidth)) {
           throw new PasteError('Copy and paste area are not same size.');
         }
 
         var edits = [];
-        ranges.forEach(range => {
+
+        _ranges.forEach(range => {
           for (var x = 0; x < tableWidth; x += 1) {
             for (var y = 0; y < tableHeight; y += 1) {
+              var _range$startColumn3, _range$startRow3;
+
               edits.push({
-                x: range.startColumn + x,
-                y: range.startRow + y,
+                column: ((_range$startColumn3 = range.startColumn) !== null && _range$startColumn3 !== void 0 ? _range$startColumn3 : 0) + x,
+                row: ((_range$startRow3 = range.startRow) !== null && _range$startRow3 !== void 0 ? _range$startRow3 : 0) + y,
                 text: value[y][x]
               });
             }
           }
         });
+
         yield model.setValues(edits);
       } catch (e) {
         var {
@@ -1085,18 +1241,36 @@ class Grid extends PureComponent {
       }
     })();
   }
+  /**
+   * Set a value to a specific cell. If the value is not valid for that cell, do not set it
+   * @param column Column index to set the value for
+   * @param row Row index to set the value for
+   * @param value Value to set at that cell
+   * @returns true If the value was valid and attempted to be set, false is it was not valid
+   */
+
 
   setValueForCell(column, row, value) {
     var {
       model
     } = this.props;
+    assertIsEditableGridModel(model);
     var modelColumn = this.getModelColumn(column);
     var modelRow = this.getModelRow(row);
 
     if (model.isValidForCell(modelColumn, modelRow, value)) {
       model.setValueForCell(modelColumn, modelRow, value);
+      return true;
     }
+
+    return false;
   }
+  /**
+   * Set a value on all the ranges provided
+   * @param ranges Ranges to set
+   * @param value The value to set on all the ranges
+   */
+
 
   setValueForRanges(ranges, value) {
     var {
@@ -1107,8 +1281,18 @@ class Grid extends PureComponent {
       movedRows
     } = this.state;
     var modelRanges = GridUtils.getModelRanges(ranges, movedColumns, movedRows);
-    model.setValueForRanges(modelRanges, value);
+
+    if (isEditableGridModel(model)) {
+      model.setValueForRanges(modelRanges, value);
+    }
   }
+  /**
+   * Check if a given cell is within the current selection
+   * @param row Row to check
+   * @param column Column to check
+   * @returns True if the cell is in the current selection, false otherwise
+   */
+
 
   isSelected(row, column) {
     var {
@@ -1116,9 +1300,11 @@ class Grid extends PureComponent {
     } = this.state;
 
     for (var i = 0; i < selectedRanges.length; i += 1) {
+      var _selectedRange$endRow, _selectedRange$endCol;
+
       var selectedRange = selectedRanges[i];
-      var rowSelected = selectedRange.startRow === null || selectedRange.startRow <= row && row <= selectedRange.endRow;
-      var columnSelected = selectedRange.startColumn === null || selectedRange.startColumn <= column && column <= selectedRange.endColumn;
+      var rowSelected = selectedRange.startRow === null || selectedRange.startRow <= row && row <= ((_selectedRange$endRow = selectedRange.endRow) !== null && _selectedRange$endRow !== void 0 ? _selectedRange$endRow : 0);
+      var columnSelected = selectedRange.startColumn === null || selectedRange.startColumn <= column && column <= ((_selectedRange$endCol = selectedRange.endColumn) !== null && _selectedRange$endCol !== void 0 ? _selectedRange$endCol : 0);
 
       if (rowSelected && columnSelected) {
         return true;
@@ -1131,9 +1317,17 @@ class Grid extends PureComponent {
   addDocumentCursor() {
     var cursor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     if (this.documentCursor === Grid.getCursorClassName(cursor)) return;
-    document.documentElement.classList.remove(this.documentCursor);
+
+    if (this.documentCursor) {
+      document.documentElement.classList.remove(this.documentCursor);
+    }
+
     this.documentCursor = Grid.getCursorClassName(cursor);
-    document.documentElement.classList.add(this.documentCursor);
+
+    if (this.documentCursor) {
+      document.documentElement.classList.add(this.documentCursor);
+    }
+
     document.documentElement.classList.add('grid-block-events');
   }
 
@@ -1147,7 +1341,7 @@ class Grid extends PureComponent {
 
   startDragTimer(event) {
     this.stopDragTimer();
-    var mouseEvent = new MouseEvent('custom', event);
+    var mouseEvent = new MouseEvent('custom', event.nativeEvent);
     this.dragTimer = setTimeout(() => {
       this.handleMouseDrag(mouseEvent);
     }, Grid.dragTimeout);
@@ -1160,13 +1354,17 @@ class Grid extends PureComponent {
     }
   }
   /**
+   * Draw the grid with the metrics provided
    * When scrolling you've have to re-draw the whole canvas. As a consequence, all these drawing methods
    * must be very quick.
+   * @param metrics Metrics to use for rendering the grid
    */
 
 
   drawCanvas() {
     var metrics = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.updateMetrics();
+    if (!this.canvas) throw new Error('canvas is not set');
+    if (!this.canvasContext) throw new Error('context not set');
     var {
       left,
       top,
@@ -1228,16 +1426,35 @@ class Grid extends PureComponent {
     renderer.drawCanvas(renderState);
     context.restore();
   }
+  /**
+   * Set focus to this grid element
+   */
+
 
   focus() {
-    this.canvas.focus();
+    var _this$canvas3;
+
+    (_this$canvas3 = this.canvas) === null || _this$canvas3 === void 0 ? void 0 : _this$canvas3.focus();
   }
+  /**
+   * Check if this grid is currently focused
+   * @returns True if the active element is this grid
+   */
+
 
   isFocused() {
     return document.activeElement === this.canvas;
   }
+  /**
+   * Handle a mouse click event. Pass the event to the registered mouse handlers until one handles it.
+   * Focuses the grid after the click.
+   * @param event The mouse event
+   */
+
 
   handleClick(event) {
+    var _this$canvas4;
+
     var gridPoint = this.getGridPointFromEvent(event);
     var mouseHandlers = this.getMouseHandlers();
 
@@ -1251,8 +1468,13 @@ class Grid extends PureComponent {
       }
     }
 
-    this.canvas.focus();
+    (_this$canvas4 = this.canvas) === null || _this$canvas4 === void 0 ? void 0 : _this$canvas4.focus();
   }
+  /**
+   * Handle a mouse context menu event. Pass the event to the registered mouse handlers until one handles it.
+   * @param event The mouse event triggering the context menu
+   */
+
 
   handleContextMenu(event) {
     var gridPoint = this.getGridPointFromEvent(event);
@@ -1268,29 +1490,35 @@ class Grid extends PureComponent {
       }
     }
   }
+  /**
+   * Handle a key down event from the keyboard. Pass the event to the registered keyboard handlers until one handles it.
+   * @param event Keyboard event
+   */
+
 
-  handleKeyDown(e) {
+  handleKeyDown(event) {
     var keyHandlers = this.getKeyHandlers();
 
     for (var i = 0; i < keyHandlers.length; i += 1) {
       var keyHandler = keyHandlers[i];
-      var result = keyHandler.onDown(e, this);
+      var result = keyHandler.onDown(event, this);
 
       if (result) {
-        var _result$stopPropagati, _result$preventDefaul;
+        var _options$stopPropagat, _options$preventDefau;
 
-        if ((_result$stopPropagati = result === null || result === void 0 ? void 0 : result.stopPropagation) !== null && _result$stopPropagati !== void 0 ? _result$stopPropagati : true) e.stopPropagation();
-        if ((_result$preventDefaul = result === null || result === void 0 ? void 0 : result.preventDefault) !== null && _result$preventDefaul !== void 0 ? _result$preventDefaul : true) e.preventDefault();
+        var options = result;
+        if ((_options$stopPropagat = options === null || options === void 0 ? void 0 : options.stopPropagation) !== null && _options$stopPropagat !== void 0 ? _options$stopPropagat : true) event.stopPropagation();
+        if ((_options$preventDefau = options === null || options === void 0 ? void 0 : options.preventDefault) !== null && _options$preventDefau !== void 0 ? _options$preventDefau : true) event.preventDefault();
         break;
       }
     }
   }
   /**
    * Notify all of the mouse handlers for this grid of a mouse event.
-   * @param {String} functionName The name of the function in the mouse handler to call
-   * @param {MouseEvent} event The mouse event to notify
-   * @param {Boolean} updateCoordinates Whether to update the mouse coordinates
-   * @param {Boolean} addCursorToDocument Whether to add a cursor overlay or not (for dragging)
+   * @param functionName The name of the function in the mouse handler to call
+   * @param event The mouse event to notify
+   * @param updateCoordinates Whether to update the mouse coordinates
+   * @param addCursorToDocument Whether to add a cursor overlay or not (for dragging)
    */
 
 
@@ -1306,7 +1534,7 @@ class Grid extends PureComponent {
       var result = mouseHandler[functionName] && mouseHandler[functionName](gridPoint, this, event);
 
       if (result) {
-        var _result$stopPropagati2, _result$preventDefaul2;
+        var _options$stopPropagat2, _options$preventDefau2;
 
         if (mouseHandler.cursor != null) {
           ({
@@ -1319,8 +1547,9 @@ class Grid extends PureComponent {
         } // result is bool or object, events are stopped by default
 
 
-        if ((_result$stopPropagati2 = result === null || result === void 0 ? void 0 : result.stopPropagation) !== null && _result$stopPropagati2 !== void 0 ? _result$stopPropagati2 : true) event.stopPropagation();
-        if ((_result$preventDefaul2 = result === null || result === void 0 ? void 0 : result.preventDefault) !== null && _result$preventDefaul2 !== void 0 ? _result$preventDefaul2 : true) event.preventDefault();
+        var options = result;
+        if ((_options$stopPropagat2 = options === null || options === void 0 ? void 0 : options.stopPropagation) !== null && _options$stopPropagat2 !== void 0 ? _options$stopPropagat2 : true) event.stopPropagation();
+        if ((_options$preventDefau2 = options === null || options === void 0 ? void 0 : options.preventDefault) !== null && _options$preventDefau2 !== void 0 ? _options$preventDefau2 : true) event.preventDefault();
         break;
       }
     }
@@ -1349,20 +1578,20 @@ class Grid extends PureComponent {
       return;
     }
 
-    this.notifyMouseHandlers(GridMouseHandler.FUNCTION_NAMES.DOWN, event);
+    this.notifyMouseHandlers('onDown', event);
     this.startDragTimer(event);
   }
 
   handleDoubleClick(event) {
-    this.notifyMouseHandlers(GridMouseHandler.FUNCTION_NAMES.DOUBLE_CLICK, event);
+    this.notifyMouseHandlers('onDoubleClick', event);
   }
 
   handleMouseMove(event) {
-    this.notifyMouseHandlers(GridMouseHandler.FUNCTION_NAMES.MOVE, event);
+    this.notifyMouseHandlers('onMove', event);
   }
 
   handleMouseLeave(event) {
-    this.notifyMouseHandlers(GridMouseHandler.FUNCTION_NAMES.LEAVE, event, false);
+    this.notifyMouseHandlers('onLeave', event, false);
     this.setState({
       mouseX: null,
       mouseY: null
@@ -1373,7 +1602,7 @@ class Grid extends PureComponent {
     this.setState({
       isDragging: true
     });
-    this.notifyMouseHandlers(GridMouseHandler.FUNCTION_NAMES.DRAG, event, true, true);
+    this.notifyMouseHandlers('onDrag', event, true, true);
     this.stopDragTimer();
   }
 
@@ -1385,7 +1614,7 @@ class Grid extends PureComponent {
       return;
     }
 
-    this.notifyMouseHandlers(GridMouseHandler.FUNCTION_NAMES.UP, event, false);
+    this.notifyMouseHandlers('onUp', event, false);
     this.stopDragTimer();
     this.removeDocumentCursor();
   }
@@ -1403,10 +1632,10 @@ class Grid extends PureComponent {
     this.forceUpdate();
   }
 
-  handleWheel(e) {
-    this.notifyMouseHandlers(GridMouseHandler.FUNCTION_NAMES.WHEEL, e);
+  handleWheel(event) {
+    this.notifyMouseHandlers('onWheel', event);
 
-    if (e.defaultPrevented) {
+    if (event.defaultPrevented) {
       return;
     }
 
@@ -1415,6 +1644,7 @@ class Grid extends PureComponent {
       metrics
     } = this;
     var metricState = this.getMetricState();
+    if (!metrics) throw new Error('metrics not set');
     var {
       lastTop,
       lastLeft
@@ -1429,7 +1659,7 @@ class Grid extends PureComponent {
     var {
       deltaX,
       deltaY
-    } = GridUtils.getScrollDelta(e, metrics.barWidth, metrics.barHeight, metrics.rowHeight, metrics.rowHeight); // iterate through each column to determine column width and figure out how far to scroll
+    } = GridUtils.getScrollDelta(event, metrics.barWidth, metrics.barHeight, metrics.rowHeight, metrics.rowHeight); // iterate through each column to determine column width and figure out how far to scroll
     // get column width of next column to scroll to, and subract it from the remaining distance to travel
 
     while (deltaX !== 0) {
@@ -1532,9 +1762,13 @@ class Grid extends PureComponent {
       leftOffset,
       topOffset
     });
-    e.stopPropagation();
-    e.preventDefault();
+    event.stopPropagation();
+    event.preventDefault();
   }
+  /**
+   * Handle cancelling the cell edit action
+   */
+
 
   handleEditCellCancel() {
     this.setState({
@@ -1542,34 +1776,60 @@ class Grid extends PureComponent {
     });
     this.focus();
   }
+  /**
+   * Handle a change in the value in an editing cell
+   * @param value New value set
+   */
+
 
   handleEditCellChange(value) {
     this.setState(_ref => {
       var {
         editingCell
       } = _ref;
-      return {
-        editingCell: _objectSpread(_objectSpread({}, editingCell), {}, {
-          value
-        })
-      };
+
+      try {
+        assertIsDefined(editingCell);
+        return {
+          editingCell: _objectSpread(_objectSpread({}, editingCell), {}, {
+            value
+          })
+        };
+      } catch (e) {
+        // This case should _never_ happen, since the editingCell shouldn't be null if this method is called
+        var {
+          onError
+        } = this.props;
+        onError(e);
+        return null;
+      }
     });
   }
+  /**
+   * Commit an edit for the currently editing cell
+   * @param value Value that was committed
+   * @param options Options for committing
+   */
+
 
   handleEditCellCommit(value) {
     var {
-      direction = GridRange.SELECTION_DIRECTION.DOWN,
+      direction = SELECTION_DIRECTION.DOWN,
       fillRange = false
     } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     var {
-      cursorColumn: column,
-      cursorRow: row,
+      editingCell,
       selectedRanges
     } = this.state;
+    if (!editingCell) throw new Error('editingCell not set');
+    var {
+      column,
+      row
+    } = editingCell;
 
     if (!this.isValidForCell(column, row, value)) {
       // Don't allow an invalid value to be commited, the editing cell should show an error
-      if (direction == null) {
+      if (direction === null) {
         // If they clicked off of the editing cell, just remove focus
         this.setState({
           editingCell: null
@@ -1585,7 +1845,7 @@ class Grid extends PureComponent {
       this.setValueForCell(column, row, value);
     }
 
-    if (direction != null) {
+    if (direction !== null) {
       this.moveCursorInDirection(direction);
     }
 
@@ -1606,19 +1866,19 @@ class Grid extends PureComponent {
       metrics
     } = this;
 
-    if (editingCell == null || metrics == null) {
+    if (editingCell == null || metrics == null || !isEditableGridModel(model)) {
       return null;
     }
 
     var {
-      selectionRange = null,
+      selectionRange,
       value,
       isQuickEdit
     } = editingCell;
     var {
-      cursorRow: row,
-      cursorColumn: column
-    } = this.state;
+      column,
+      row
+    } = editingCell;
     var {
       gridX,
       gridY,
@@ -1630,10 +1890,9 @@ class Grid extends PureComponent {
     var x = visibleColumnXs.get(column);
     var y = visibleRowYs.get(row);
     var w = visibleColumnWidths.get(column);
-    var h = visibleRowHeights.get(row);
-    var isVisible = x != null && y != null && w != null && h != null; // If the cell isn't visible, we still need to display an invisible cell for focus purposes
+    var h = visibleRowHeights.get(row); // If the cell isn't visible, we still need to display an invisible cell for focus purposes
 
-    var wrapperStyle = isVisible ? {
+    var wrapperStyle = x != null && y != null && w != null && h != null ? {
       position: 'absolute',
       left: gridX + x,
       top: gridY + y,
@@ -1646,7 +1905,7 @@ class Grid extends PureComponent {
     var modelRow = this.getModelRow(row);
     var inputStyle = modelColumn != null && modelRow != null ? {
       textAlign: model.textAlignForCell(modelColumn, modelRow)
-    } : null;
+    } : undefined;
     var isValid = model.isValidForCell(modelColumn, modelRow, value);
     return /*#__PURE__*/React.createElement("div", {
       style: wrapperStyle
@@ -1687,62 +1946,35 @@ class Grid extends PureComponent {
 
 }
 
-_defineProperty(Grid, "pixelsPerLine", 100 / 3);
-
-_defineProperty(Grid, "dragTimeout", 1000);
-
-_defineProperty(Grid, "getTheme", memoize(userTheme => _objectSpread(_objectSpread({}, GridTheme), userTheme)));
-
-Grid.propTypes = {
-  canvasOptions: PropTypes.shape({}),
-  isStickyBottom: PropTypes.bool,
-  isStickyRight: PropTypes.bool,
-  metricCalculator: PropTypes.instanceOf(GridMetricCalculator),
-  model: PropTypes.instanceOf(GridModel).isRequired,
-  keyHandlers: PropTypes.arrayOf(PropTypes.instanceOf(KeyHandler)),
-  mouseHandlers: PropTypes.arrayOf(PropTypes.instanceOf(GridMouseHandler)),
-  movedColumns: PropTypes.arrayOf(PropTypes.shape({
-    from: PropTypes.number.isRequired,
-    to: PropTypes.number.isRequired
-  })),
-  movedRows: PropTypes.arrayOf(PropTypes.shape({
-    from: PropTypes.number.isRequired,
-    to: PropTypes.number.isRequired
-  })),
-  onError: PropTypes.func,
-  onSelectionChanged: PropTypes.func,
-  onMovedColumnsChanged: PropTypes.func,
-  onMoveColumnComplete: PropTypes.func,
-  onViewChanged: PropTypes.func,
-  renderer: PropTypes.instanceOf(GridRenderer),
-  stateOverride: PropTypes.shape({}),
-  theme: PropTypes.shape({
-    autoSelectColumn: PropTypes.bool,
-    autoSelectRow: PropTypes.bool
-  })
-};
-Grid.defaultProps = {
+_defineProperty(Grid, "defaultProps", {
   canvasOptions: {
     alpha: false
   },
   isStickyBottom: false,
   isStickyRight: false,
-  metricCalculator: null,
   keyHandlers: [],
   mouseHandlers: [],
   movedColumns: [],
   movedRows: [],
-  onError: () => {},
-  onSelectionChanged: () => {},
-  onMovedColumnsChanged: () => {},
-  onMoveColumnComplete: () => {},
-  onViewChanged: () => {},
-  renderer: null,
+  onError: () => undefined,
+  onSelectionChanged: () => undefined,
+  onMovedColumnsChanged: () => undefined,
+  onMoveColumnComplete: () => undefined,
+  onMovedRowsChanged: () => undefined,
+  onMoveRowComplete: () => undefined,
+  onViewChanged: () => undefined,
   stateOverride: {},
   theme: {
     autoSelectColumn: false,
     autoSelectRow: false
   }
-};
+});
+
+_defineProperty(Grid, "pixelsPerLine", 100 / 3);
+
+_defineProperty(Grid, "dragTimeout", 1000);
+
+_defineProperty(Grid, "getTheme", memoize(userTheme => _objectSpread(_objectSpread({}, GridTheme), userTheme)));
+
 export default Grid;
 //# sourceMappingURL=Grid.js.map