@deephaven/grid 0.7.3-beta.8 → 0.8.0

package/dist/GridRenderer.js

@@ -3,6 +3,10 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import memoizeClear from "./memoizeClear.js";
 import GridUtils from "./GridUtils.js";
 import GridColorUtils from "./GridColorUtils.js";
+import { isExpandableGridModel } from "./ExpandableGridModel.js";
+import { getOrThrow } from "./GridMetricCalculator.js";
+import { isEditableGridModel } from "./EditableGridModel.js";
+
 /* eslint react/destructuring-assignment: "off" */
 
 /* eslint class-methods-use-this: "off" */
@@ -14,8 +18,7 @@ import GridColorUtils from "./GridColorUtils.js";
  * This default rendering just renders a basic grid. Extend this class and implement
  * your own methods to customize drawing of the grid (eg. Draw icons or special features)
  */
-
-class GridRenderer {
+export class GridRenderer {
   constructor() {
     _defineProperty(this, "getCachedTruncatedString", memoizeClear((context, text, width, fontWidth) => GridRenderer.truncateToWidth(context, text, width, fontWidth), {
       max: 10000
@@ -39,9 +42,10 @@ class GridRenderer {
   }
 
   /**
-   * Truncate a string and add ellipses if necessary
-   * @param {string} str The string to truncate
-   * @param {number} len The length to truncate the string to. If longer than the actual string, just returns the string
+   * Truncate a string to the specified length and add ellipses if necessary
+   * @param str The string to truncate
+   * @param len The length to truncate the string to. If longer than the actual string, just returns the string
+   * @returns The truncated string
    */
   static truncate(str, len) {
     if (len < str.length) {
@@ -53,11 +57,12 @@ class GridRenderer {
   }
   /**
    * Uses binary search to truncate a string to fit in the provided width
-   * @param {Context} context The drawing context to measure the text in
-   * @param {string} str The string to get the maximum length it can draw
-   * @param {number} width The width to truncate it to
-   * @param {number} start The low boundary to start the search
-   * @param {number} end The high boundary to start the search
+   * @param context The drawing context to measure the text in
+   * @param str The string to get the maximum length it can draw
+   * @param width The width to truncate it to
+   * @param start The low boundary to start the search
+   * @param end The high boundary to start the search
+   * @returns The truncated string
    */
 
 
@@ -105,11 +110,11 @@ class GridRenderer {
    * Truncate a string (if necessary) to fit in the specified width.
    * First uses the estimated font width to calculate a lower/upper bound
    * Then uses binary search within those bounds to find the exact max length
-   * @param {Context} context The drawing context
-   * @param {string} str The string to calculate max length for
-   * @param {number} width The width to truncate within
-   * @param {number} fontWidth The estimated width of each character
-   * @returns {string} The truncated string that fits within the width provided
+   * @param context The drawing context
+   * @param str The string to calculate max length for
+   * @param width The width to truncate within
+   * @param fontWidth The estimated width of each character
+   * @returns The truncated string that fits within the width provided
    */
 
 
@@ -128,9 +133,8 @@ class GridRenderer {
     return GridRenderer.binaryTruncateToWidth(context, str, width, lo, hi);
   }
   /**
-   *
-   * @param {CanvasRenderingContext2D} context The context to draw the grid in
-   * @param {GridState} state State of the grid, { left, top, mouseX, mouseY, selectedRanges, theme, model, metrics }
+   * Draw the grid canvas with the state provided
+   * @param state The state of the grid
    */
 
 
@@ -192,12 +196,12 @@ class GridRenderer {
 
   drawFloatingRows(context, state) {
     var {
+      draggingRow,
+      draggingColumn,
       metrics,
       theme
     } = state;
     var {
-      draggingRow,
-      draggingColumn,
       floatingTopRowCount,
       floatingBottomRowCount,
       floatingRows,
@@ -227,17 +231,17 @@ class GridRenderer {
       this.drawSelectedRanges(context, state, {
         top: 0,
         bottom: floatingTopRowCount - 1,
-        maxY: visibleRowYs.get(floatingTopRowCount - 1) + visibleRowHeights.get(floatingTopRowCount - 1) - 0.5
-      }, true);
+        maxY: getOrThrow(visibleRowYs, floatingTopRowCount - 1) + getOrThrow(visibleRowHeights, floatingTopRowCount - 1) - 0.5
+      });
     }
 
     if (floatingBottomRowCount > 0) {
       this.drawSelectedRanges(context, state, {
         top: rowCount - floatingBottomRowCount - 1,
         bottom: rowCount - 1,
-        minY: visibleRowYs.get(rowCount - floatingBottomRowCount) + 0.5,
-        maxY: visibleRowYs.get(rowCount - 1) + visibleRowHeights.get(rowCount - 1) - 0.5
-      }, true);
+        minY: getOrThrow(visibleRowYs, rowCount - floatingBottomRowCount) + 0.5,
+        maxY: getOrThrow(visibleRowYs, rowCount - 1) + getOrThrow(visibleRowHeights, rowCount - 1) - 0.5
+      });
     } // Draw the cell content...
 
 
@@ -253,12 +257,12 @@ class GridRenderer {
 
   drawFloatingColumns(context, state) {
     var {
+      draggingRow,
+      draggingColumn,
       metrics,
       theme
     } = state;
     var {
-      draggingRow,
-      draggingColumn,
       floatingLeftColumnCount,
       floatingRightColumnCount,
       floatingLeftWidth,
@@ -300,17 +304,17 @@ class GridRenderer {
     if (floatingLeftColumnCount > 0) {
       this.drawSelectedRanges(context, state, {
         left: 0,
-        maxX: visibleColumnXs.get(floatingLeftColumnCount - 1) + visibleColumnWidths.get(floatingLeftColumnCount - 1)
-      }, true);
+        maxX: getOrThrow(visibleColumnXs, floatingLeftColumnCount - 1) + getOrThrow(visibleColumnWidths, floatingLeftColumnCount - 1)
+      });
     }
 
     if (floatingRightColumnCount > 0) {
       this.drawSelectedRanges(context, state, {
         left: columnCount - floatingRightColumnCount,
         right: columnCount - 1,
-        minX: visibleColumnXs.get(columnCount - floatingRightColumnCount) + 0.5,
-        maxX: visibleColumnXs.get(columnCount - 1) + visibleColumnWidths.get(columnCount - 1)
-      }, true);
+        minX: getOrThrow(visibleColumnXs, columnCount - floatingRightColumnCount) + 0.5,
+        maxX: getOrThrow(visibleColumnXs, columnCount - 1) + getOrThrow(visibleColumnWidths, columnCount - 1)
+      });
     } // Draw the cell content...
 
 
@@ -352,26 +356,26 @@ class GridRenderer {
     context.strokeStyle = floatingDividerOuterColor;
 
     if (floatingTopRowCount > 0) {
-      var y = visibleRowYs.get(floatingTopRowCount - 1) + visibleRowHeights.get(floatingTopRowCount - 1) + 0.5;
+      var y = getOrThrow(visibleRowYs, floatingTopRowCount - 1) + getOrThrow(visibleRowHeights, floatingTopRowCount - 1) + 0.5;
       context.moveTo(0.5, y);
       context.lineTo(maxX - 0.5, y);
     }
 
     if (floatingBottomRowCount > 0) {
-      var _y = visibleRowYs.get(rowCount - floatingBottomRowCount) - 0.5;
+      var _y = getOrThrow(visibleRowYs, rowCount - floatingBottomRowCount) - 0.5;
 
       context.moveTo(0.5, _y);
       context.lineTo(maxX - 0.5, _y);
     }
 
     if (floatingLeftColumnCount > 0) {
-      var x = visibleColumnXs.get(floatingLeftColumnCount - 1) + visibleColumnWidths.get(floatingLeftColumnCount - 1) + 0.5;
+      var x = getOrThrow(visibleColumnXs, floatingLeftColumnCount - 1) + getOrThrow(visibleColumnWidths, floatingLeftColumnCount - 1) + 0.5;
       context.moveTo(x, 0.5);
       context.lineTo(x, maxY - 0.5);
     }
 
     if (floatingRightColumnCount > 0) {
-      var _x = visibleColumnXs.get(columnCount - floatingRightColumnCount) - 0.5;
+      var _x = getOrThrow(visibleColumnXs, columnCount - floatingRightColumnCount) - 0.5;
 
       context.moveTo(_x, 0.5);
       context.lineTo(_x, maxY - 0.5);
@@ -383,28 +387,28 @@ class GridRenderer {
     context.strokeStyle = floatingDividerInnerColor;
 
     if (floatingTopRowCount > 0) {
-      var _y2 = visibleRowYs.get(floatingTopRowCount - 1) + visibleRowHeights.get(floatingTopRowCount - 1) + 0.5;
+      var _y2 = getOrThrow(visibleRowYs, floatingTopRowCount - 1) + getOrThrow(visibleRowHeights, floatingTopRowCount - 1) + 0.5;
 
       context.moveTo(0.5, _y2);
       context.lineTo(maxX - 0.5, _y2);
     }
 
     if (floatingBottomRowCount > 0) {
-      var _y3 = visibleRowYs.get(rowCount - floatingBottomRowCount) - 0.5;
+      var _y3 = getOrThrow(visibleRowYs, rowCount - floatingBottomRowCount) - 0.5;
 
       context.moveTo(0.5, _y3);
       context.lineTo(maxX - 0.5, _y3);
     }
 
     if (floatingLeftColumnCount > 0) {
-      var _x2 = visibleColumnXs.get(floatingLeftColumnCount - 1) + visibleColumnWidths.get(floatingLeftColumnCount - 1) + 0.5;
+      var _x2 = getOrThrow(visibleColumnXs, floatingLeftColumnCount - 1) + getOrThrow(visibleColumnWidths, floatingLeftColumnCount - 1) + 0.5;
 
       context.moveTo(_x2, 0.5);
       context.lineTo(_x2, maxY - 0.5);
     }
 
     if (floatingRightColumnCount > 0) {
-      var _x3 = visibleColumnXs.get(columnCount - floatingRightColumnCount) - 0.5;
+      var _x3 = getOrThrow(visibleColumnXs, columnCount - floatingRightColumnCount) - 0.5;
 
       context.moveTo(_x3, 0.5);
       context.lineTo(_x3, maxY - 0.5);
@@ -433,7 +437,7 @@ class GridRenderer {
       floatingBottomRowCount,
       floatingLeftColumnCount,
       floatingRightColumnCount,
-      floatingTopColumnCount,
+      floatingTopRowCount,
       columnCount,
       rowCount,
       visibleRowHeights,
@@ -446,10 +450,10 @@ class GridRenderer {
     this.drawSelectedRanges(context, state, {
       bottom: Math.min(bottom, rowCount - floatingBottomRowCount - 1),
       right: Math.min(right, columnCount - floatingRightColumnCount - 1),
-      minX: floatingLeftColumnCount > 0 && visibleColumnXs.has(floatingLeftColumnCount + 1) ? visibleColumnXs.get(floatingLeftColumnCount + 1) : -10,
-      minY: floatingTopColumnCount > 0 && visibleRowYs.has(floatingTopColumnCount + 1) ? visibleRowYs.get(floatingTopColumnCount + 1) : -10,
-      maxX: floatingRightColumnCount > 0 && visibleColumnXs.has(columnCount - floatingRightColumnCount - 1) ? visibleColumnXs.get(columnCount - floatingRightColumnCount - 1) + visibleColumnWidths.get(columnCount - floatingRightColumnCount - 1) - 0.5 : width + 10,
-      maxY: floatingBottomRowCount > 0 && visibleRowYs.has(rowCount - floatingBottomRowCount - 1) ? visibleRowYs.get(rowCount - floatingBottomRowCount - 1) + visibleRowHeights.get(rowCount - floatingBottomRowCount - 1) - 0.5 : height + 10
+      minX: floatingLeftColumnCount > 0 && visibleColumnXs.has(floatingLeftColumnCount + 1) ? getOrThrow(visibleColumnXs, floatingLeftColumnCount + 1) : -10,
+      minY: floatingTopRowCount > 0 && visibleRowYs.has(floatingTopRowCount + 1) ? getOrThrow(visibleRowYs, floatingTopRowCount + 1) : -10,
+      maxX: floatingRightColumnCount > 0 && visibleColumnXs.has(columnCount - floatingRightColumnCount - 1) ? getOrThrow(visibleColumnXs, columnCount - floatingRightColumnCount - 1) + getOrThrow(visibleColumnWidths, columnCount - floatingRightColumnCount - 1) - 0.5 : width + 10,
+      maxY: floatingBottomRowCount > 0 && visibleRowYs.has(rowCount - floatingBottomRowCount - 1) ? getOrThrow(visibleRowYs, rowCount - floatingBottomRowCount - 1) + getOrThrow(visibleRowHeights, rowCount - floatingBottomRowCount - 1) - 0.5 : height + 10
     });
   }
 
@@ -497,7 +501,7 @@ class GridRenderer {
     var bottomShadowRows = [];
 
     var addRowToColorMap = (row, rowAbove) => {
-      var depth = model.depthForRow(row);
+      var depth = isExpandableGridModel(model) ? model.depthForRow(row) : 0;
       var colorSet = colorSets[row % colorSets.length];
       var color = colorSet[Math.min(depth, colorSet.length - 1)];
 
@@ -508,7 +512,7 @@ class GridRenderer {
       colorRowMap.get(color).push(row);
 
       if (rowAbove != null) {
-        var depthAbove = model.depthForRow(rowAbove);
+        var depthAbove = isExpandableGridModel(model) ? model.depthForRow(rowAbove) : 0;
 
         if (depthAbove < depth) {
           topShadowRows.push(row);
@@ -521,7 +525,7 @@ class GridRenderer {
 
     for (var i = 0; i < rows.length; i += 1) {
       var row = rows[i];
-      var rowAbove = i > 0 ? rows[i - 1] : null;
+      var rowAbove = i > 0 ? rows[i - 1] : undefined;
       addRowToColorMap(row, rowAbove);
     }
 
@@ -531,8 +535,8 @@ class GridRenderer {
 
       for (var _i = 0; _i < colorRows.length; _i += 1) {
         var _row = colorRows[_i];
-        var y = visibleRowYs.get(_row);
-        var rowHeight = visibleRowHeights.get(_row);
+        var y = getOrThrow(visibleRowYs, _row);
+        var rowHeight = getOrThrow(visibleRowHeights, _row);
         context.rect(minX, y, maxX, rowHeight);
       }
 
@@ -550,7 +554,7 @@ class GridRenderer {
 
       for (var _i2 = 0; _i2 < topShadowRows.length; _i2 += 1) {
         var _row2 = topShadowRows[_i2];
-        var y = visibleRowYs.get(_row2); // Use a translate so we can reuse the gradient
+        var y = getOrThrow(visibleRowYs, _row2); // Use a translate so we can reuse the gradient
 
         context.translate(0, y);
         context.fillRect(minX, 0, maxX, shadowBlur);
@@ -578,9 +582,9 @@ class GridRenderer {
       for (var _i3 = 0; _i3 < bottomShadowRows.length; _i3 += 1) {
         var _row3 = bottomShadowRows[_i3];
 
-        var _y4 = visibleRowYs.get(_row3);
+        var _y4 = getOrThrow(visibleRowYs, _row3);
 
-        var rowHeight = visibleRowHeights.get(_row3);
+        var rowHeight = getOrThrow(visibleRowHeights, _row3);
         var gradientY = _y4 + rowHeight - shadowBlur; // Use a translate so we can reuse the gradient
 
         context.translate(0, gradientY);
@@ -599,6 +603,7 @@ class GridRenderer {
       theme,
       metrics
     } = state;
+    if (mouseX == null || mouseY == null) return;
     var mouseColumn = GridUtils.getColumnAtX(mouseX, metrics);
 
     if (mouseColumn == null || !theme.columnHoverBackgroundColor) {
@@ -615,8 +620,8 @@ class GridRenderer {
       return;
     }
 
-    var x = visibleColumnXs.get(mouseColumn);
-    var columnWidth = visibleColumnWidths.get(mouseColumn);
+    var x = getOrThrow(visibleColumnXs, mouseColumn);
+    var columnWidth = getOrThrow(visibleColumnWidths, mouseColumn);
     context.fillStyle = theme.columnHoverBackgroundColor;
     context.fillRect(x, 0, columnWidth, maxY);
   }
@@ -628,6 +633,7 @@ class GridRenderer {
       theme,
       metrics
     } = state;
+    if (mouseX == null || mouseY == null) return;
     var {
       maxX
     } = metrics;
@@ -660,7 +666,7 @@ class GridRenderer {
       rowFooterWidth
     } = metrics;
 
-    if (mouseX > maxX + rowFooterWidth || !theme.rowHoverBackgroundColor) {
+    if (mouseX == null || mouseY == null || mouseX > maxX + rowFooterWidth || !theme.rowHoverBackgroundColor) {
       return;
     }
 
@@ -682,13 +688,24 @@ class GridRenderer {
       visibleRowYs,
       maxX
     } = metrics;
-    var y = visibleRowYs.get(row);
-    var rowHeight = visibleRowHeights.get(row);
-    context.fillStyle = theme.rowHoverBackgroundColor;
+    var y = getOrThrow(visibleRowYs, row);
+    var rowHeight = getOrThrow(visibleRowHeights, row);
+
+    if (theme.rowHoverBackgroundColor) {
+      context.fillStyle = theme.rowHoverBackgroundColor;
+    }
 
     for (var i = 0; i < selectedRanges.length; i += 1) {
-      if (selectedRanges[i].startRow <= row && selectedRanges[i].endRow >= row) {
-        context.fillStyle = theme.selectedRowHoverBackgroundColor;
+      var {
+        startRow,
+        endRow
+      } = selectedRanges[i];
+
+      if (startRow != null && endRow != null && startRow <= row && endRow >= row) {
+        if (theme.selectedRowHoverBackgroundColor) {
+          context.fillStyle = theme.selectedRowHoverBackgroundColor;
+        }
+
         break;
       }
     }
@@ -740,7 +757,7 @@ class GridRenderer {
 
     for (var i = 0; i < columns.length; i += 1) {
       var column = columns[i];
-      var x = visibleColumnXs.get(column) + 0.5;
+      var x = getOrThrow(visibleColumnXs, column) + 0.5;
       context.moveTo(x, 0);
       context.lineTo(x, maxY);
     }
@@ -758,7 +775,7 @@ class GridRenderer {
 
     for (var i = 0; i < rows.length; i += 1) {
       var row = rows[i];
-      var y = visibleRowYs.get(row) + 0.5;
+      var y = getOrThrow(visibleRowYs, row) + 0.5;
       context.moveTo(0.5, y);
       context.lineTo(maxX - 0.5, y);
     }
@@ -783,7 +800,7 @@ class GridRenderer {
 
       for (var j = 0; j < rows.length; j += 1) {
         var row = rows[j];
-        var rowAfter = j + 1 < rows.length ? rows[j + 1] : null;
+        var rowAfter = j + 1 < rows.length ? rows[j + 1] : undefined;
         this.drawCellBackground(context, state, column, row, rowAfter);
       }
     }
@@ -795,9 +812,6 @@ class GridRenderer {
     var {
       metrics,
       model,
-      model: {
-        hasExpandableRows
-      },
       theme
     } = state;
     var {
@@ -809,16 +823,17 @@ class GridRenderer {
       visibleRowYs,
       visibleRowHeights
     } = metrics;
-    var modelRow = modelRows.get(row);
-    var modelColumn = modelColumns.get(column);
+    var modelRow = getOrThrow(modelRows, row);
+    var modelColumn = getOrThrow(modelColumns, column);
     var backgroundColor = model.backgroundColorForCell(modelColumn, modelRow, theme);
     var isFirstColumn = column === firstColumn;
+    var hasExpandableRows = isExpandableGridModel(model) && model.hasExpandableRows;
 
     if (backgroundColor) {
-      var x = visibleColumnXs.get(column) + 1;
-      var y = visibleRowYs.get(row) + 1;
-      var columnWidth = visibleColumnWidths.get(column) - 1;
-      var rowHeight = visibleRowHeights.get(row) - 1;
+      var x = getOrThrow(visibleColumnXs, column) + 1;
+      var y = getOrThrow(visibleRowYs, row) + 1;
+      var columnWidth = getOrThrow(visibleColumnWidths, column) - 1;
+      var rowHeight = getOrThrow(visibleRowHeights, row) - 1;
       context.fillStyle = backgroundColor;
       context.fillRect(x, y, columnWidth, rowHeight);
     }
@@ -852,8 +867,8 @@ class GridRenderer {
       visibleRows,
       height
     } = metrics;
-    var x = visibleColumnXs.get(column);
-    var columnWidth = visibleColumnWidths.get(column);
+    var x = getOrThrow(visibleColumnXs, column);
+    var columnWidth = getOrThrow(visibleColumnWidths, column);
     context.save();
     context.beginPath();
     context.rect(x, 0, columnWidth, height);
@@ -871,9 +886,6 @@ class GridRenderer {
     var {
       metrics,
       model,
-      model: {
-        hasExpandableRows
-      },
       theme
     } = state;
     var {
@@ -892,23 +904,25 @@ class GridRenderer {
       treeHorizontalPadding,
       textColor
     } = theme;
-    var x = visibleColumnXs.get(column);
-    var y = visibleRowYs.get(row);
-    var columnWidth = visibleColumnWidths.get(column);
-    var rowHeight = visibleRowHeights.get(row);
-    var modelRow = modelRows.get(row);
-    var modelColumn = modelColumns.get(column);
+    var x = getOrThrow(visibleColumnXs, column);
+    var y = getOrThrow(visibleRowYs, row);
+    var columnWidth = getOrThrow(visibleColumnWidths, column);
+    var rowHeight = getOrThrow(visibleRowHeights, row);
+    var modelRow = getOrThrow(modelRows, row);
+    var modelColumn = getOrThrow(modelColumns, column);
     var text = model.textForCell(modelColumn, modelRow);
     var isFirstColumn = column === firstColumn;
 
     if (text && rowHeight > 0) {
+      var _fontWidths$get;
+
       var textAlign = model.textAlignForCell(modelColumn, modelRow) || 'left';
       context.textAlign = textAlign;
       var color = model.colorForCell(modelColumn, modelRow, theme) || textColor;
       context.fillStyle = color;
       var treeIndent = 0;
 
-      if (hasExpandableRows && isFirstColumn) {
+      if (isExpandableGridModel(model) && model.hasExpandableRows && isFirstColumn) {
         treeIndent = treeDepthIndent * (model.depthForRow(row) + 1) + treeHorizontalPadding;
       }
 
@@ -925,7 +939,7 @@ class GridRenderer {
       }
 
       textX += treeIndent;
-      var fontWidth = fontWidths.get(context.font);
+      var fontWidth = (_fontWidths$get = fontWidths.get(context.font)) !== null && _fontWidths$get !== void 0 ? _fontWidths$get : GridRenderer.DEFAULT_FONT_WIDTH;
       var truncatedText = this.getCachedTruncatedString(context, text, textWidth - cellHorizontalPadding * 2, fontWidth);
 
       if (truncatedText) {
@@ -933,7 +947,7 @@ class GridRenderer {
       }
     }
 
-    if (isFirstColumn && hasExpandableRows) {
+    if (isFirstColumn && isExpandableGridModel(model) && model.hasExpandableRows) {
       this.drawCellRowTreeMarker(context, state, row);
     }
   }
@@ -960,18 +974,18 @@ class GridRenderer {
       treeMarkerColor,
       treeMarkerHoverColor
     } = theme;
-    var columnX = visibleColumnXs.get(firstColumn);
-    var columnWidth = visibleColumnWidths.get(firstColumn);
-    var rowY = visibleRowYs.get(row);
-    var rowHeight = visibleRowHeights.get(row);
-    var isExpandable = model.isRowExpandable(row);
-    var isExpanded = model.isRowExpanded(row);
-
-    if (isExpandable) {
-      var treeBox = visibleRowTreeBoxes.get(row);
-      var color = mouseX >= gridX + columnX && mouseX <= gridX + columnX + columnWidth && mouseY >= gridY + rowY && mouseY <= gridY + rowY + rowHeight ? treeMarkerHoverColor : treeMarkerColor;
-      this.drawTreeMarker(context, state, columnX, rowY, treeBox, color, isExpanded);
+    var columnX = getOrThrow(visibleColumnXs, firstColumn);
+    var columnWidth = getOrThrow(visibleColumnWidths, firstColumn);
+    var rowY = getOrThrow(visibleRowYs, row);
+    var rowHeight = getOrThrow(visibleRowHeights, row);
+
+    if (!isExpandableGridModel(model) || !model.isRowExpandable(row)) {
+      return;
     }
+
+    var treeBox = getOrThrow(visibleRowTreeBoxes, row);
+    var color = mouseX != null && mouseY != null && mouseX >= gridX + columnX && mouseX <= gridX + columnX + columnWidth && mouseY >= gridY + rowY && mouseY <= gridY + rowY + rowHeight ? treeMarkerHoverColor : treeMarkerColor;
+    this.drawTreeMarker(context, state, columnX, rowY, treeBox, color, model.isRowExpanded(row));
   }
 
   drawTreeMarker(context, state, columnX, rowY, treeBox, color, isExpanded) {
@@ -995,6 +1009,7 @@ class GridRenderer {
       model,
       theme
     } = state;
+    if (!isExpandableGridModel(model)) return;
     var depth = model.depthForRow(row);
     if (depth === 0) return;
     var {
@@ -1008,10 +1023,10 @@ class GridRenderer {
       treeHorizontalPadding,
       treeLineColor
     } = theme;
-    var columnX = visibleColumnXs.get(firstColumn);
-    var rowY = visibleRowYs.get(row);
-    var rowHeight = visibleRowHeights.get(row);
-    var depthRowAfter = model.depthForRow(rowAfter);
+    var columnX = getOrThrow(visibleColumnXs, firstColumn);
+    var rowY = getOrThrow(visibleRowYs, row);
+    var rowHeight = getOrThrow(visibleRowHeights, row);
+    var depthRowAfter = rowAfter !== undefined ? model.depthForRow(rowAfter) : 0;
     var depthDiff = depth > depthRowAfter ? depth - depthRowAfter : 0;
     context.strokeStyle = treeLineColor;
     context.lineWidth = 1; // draw normal depth lines
@@ -1108,13 +1123,13 @@ class GridRenderer {
 
     for (var i = 0; i < visibleColumns.length; i += 1) {
       var column = visibleColumns[i];
-      var columnWidth = visibleColumnWidths.get(column);
-      var x = visibleColumnXs.get(column) + gridX;
+      var columnWidth = getOrThrow(visibleColumnWidths, column);
+      var x = getOrThrow(visibleColumnXs, column) + gridX;
       this.drawColumnHeader(context, state, column, x, columnWidth);
     }
 
     if (containsFrozenColumns) {
-      floatingLeftColumnsWidth = visibleColumnXs.get(floatingLeftColumnCount - 1) + visibleColumnWidths.get(floatingLeftColumnCount - 1); // Frozen columns' background
+      floatingLeftColumnsWidth = getOrThrow(visibleColumnXs, floatingLeftColumnCount - 1) + getOrThrow(visibleColumnWidths, floatingLeftColumnCount - 1); // Frozen columns' background
 
       context.fillStyle = headerBackgroundColor;
       context.fillRect(gridX, 0, floatingLeftColumnsWidth, columnHeaderHeight); // Frozen columns.
@@ -1124,9 +1139,9 @@ class GridRenderer {
       for (var _i5 = 0; _i5 < floatingColumns.length; _i5 += 1) {
         var _column = floatingColumns[_i5];
 
-        var _columnWidth = visibleColumnWidths.get(_column);
+        var _columnWidth = getOrThrow(visibleColumnWidths, _column);
 
-        var _x4 = visibleColumnXs.get(_column) + gridX;
+        var _x4 = getOrThrow(visibleColumnXs, _column) + gridX;
 
         this.drawColumnHeader(context, state, _column, _x4, _columnWidth);
       }
@@ -1142,9 +1157,9 @@ class GridRenderer {
 
       for (var _i6 = 0; _i6 < visibleColumns.length; _i6 += 1) {
         var _column2 = visibleColumns[_i6];
-        var columnX = visibleColumnXs.get(_column2);
+        var columnX = getOrThrow(visibleColumnXs, _column2);
 
-        var _columnWidth2 = visibleColumnWidths.get(_column2);
+        var _columnWidth2 = getOrThrow(visibleColumnWidths, _column2);
 
         if (!(columnX < floatingLeftColumnsWidth - _columnWidth2)) {
           if (_columnWidth2 > 0) {
@@ -1166,9 +1181,9 @@ class GridRenderer {
       for (var _i7 = 0; _i7 < floatingColumns.length; _i7 += 1) {
         var _column3 = floatingColumns[_i7];
 
-        var _columnX = visibleColumnXs.get(_column3);
+        var _columnX = getOrThrow(visibleColumnXs, _column3);
 
-        var _columnWidth3 = visibleColumnWidths.get(_column3);
+        var _columnWidth3 = getOrThrow(visibleColumnWidths, _column3);
 
         if (_columnWidth3 > 0) {
           var _x6 = gridX + _columnX + _columnWidth3 + 0.5;
@@ -1193,9 +1208,9 @@ class GridRenderer {
       for (var _i8 = 0; _i8 < hiddenColumns.length; _i8 += 1) {
         var _column4 = hiddenColumns[_i8];
 
-        var _columnX2 = visibleColumnXs.get(_column4);
+        var _columnX2 = getOrThrow(visibleColumnXs, _column4);
 
-        var _columnWidth4 = visibleColumnWidths.get(_column4);
+        var _columnWidth4 = getOrThrow(visibleColumnWidths, _column4);
 
         var minX = gridX + _columnX2 + _columnWidth4 + 0.5 - headerHiddenSeparatorSize * 0.5;
         context.rect(minX, hiddenY, headerHiddenSeparatorSize, hiddenSeparatorHeight);
@@ -1207,16 +1222,16 @@ class GridRenderer {
     if (headerSeparatorHoverColor) {
       var highlightedSeparator = draggingColumnSeparator;
 
-      if (highlightedSeparator == null) {
+      if (highlightedSeparator == null && mouseX != null && mouseY != null) {
         highlightedSeparator = GridUtils.getColumnSeparatorIndex(mouseX, mouseY, metrics, theme);
       }
 
       if (highlightedSeparator != null && (!isDragging || draggingColumnSeparator != null)) {
         context.strokeStyle = headerSeparatorHoverColor;
 
-        var _columnX3 = visibleColumnXs.get(highlightedSeparator);
+        var _columnX3 = getOrThrow(visibleColumnXs, highlightedSeparator);
 
-        var _columnWidth5 = visibleColumnWidths.get(highlightedSeparator);
+        var _columnWidth5 = getOrThrow(visibleColumnWidths, highlightedSeparator);
 
         var _x7 = gridX + _columnX3 + _columnWidth5 + 0.5;
 
@@ -1259,7 +1274,7 @@ class GridRenderer {
     var {
       modelColumns
     } = metrics;
-    var modelColumn = modelColumns.get(column);
+    var modelColumn = getOrThrow(modelColumns, column);
     var text = model.textForColumnHeader(modelColumn);
     var {
       headerHorizontalPadding
@@ -1345,8 +1360,8 @@ class GridRenderer {
 
       for (var i = 0; i < visibleRows.length; i += 1) {
         var row = visibleRows[i];
-        var rowY = visibleRowYs.get(row);
-        var rowHeight = visibleRowHeights.get(row);
+        var rowY = getOrThrow(visibleRowYs, row);
+        var rowHeight = getOrThrow(visibleRowHeights, row);
 
         if (rowHeight > 0) {
           var y = gridY + rowY + rowHeight + 0.5;
@@ -1370,9 +1385,9 @@ class GridRenderer {
       for (var _i9 = 0; _i9 < hiddenRows.length; _i9 += 1) {
         var _row4 = hiddenRows[_i9];
 
-        var _rowY = visibleRowYs.get(_row4);
+        var _rowY = getOrThrow(visibleRowYs, _row4);
 
-        var _rowHeight = visibleRowHeights.get(_row4);
+        var _rowHeight = getOrThrow(visibleRowHeights, _row4);
 
         var minY = gridY + _rowY + _rowHeight + 0.5 - headerHiddenSeparatorSize * 0.5;
         context.rect(hiddenX, minY, hiddenSeparatorWidth, headerHiddenSeparatorSize);
@@ -1384,16 +1399,16 @@ class GridRenderer {
     if (headerSeparatorHoverColor) {
       var highlightedSeparator = draggingRowSeparator;
 
-      if (highlightedSeparator == null) {
+      if (highlightedSeparator == null && mouseX != null && mouseY != null) {
         highlightedSeparator = GridUtils.getRowSeparatorIndex(mouseX, mouseY, metrics, theme);
       }
 
       if (highlightedSeparator != null) {
         context.strokeStyle = headerSeparatorHoverColor;
 
-        var _rowY2 = visibleRowYs.get(highlightedSeparator);
+        var _rowY2 = getOrThrow(visibleRowYs, highlightedSeparator);
 
-        var _rowHeight2 = visibleRowHeights.get(highlightedSeparator);
+        var _rowHeight2 = getOrThrow(visibleRowHeights, highlightedSeparator);
 
         var _y6 = gridY + _rowY2 + _rowHeight2 + 0.5;
 
@@ -1429,9 +1444,9 @@ class GridRenderer {
     for (var _i10 = 0; _i10 < visibleRows.length; _i10 += 1) {
       var _row5 = visibleRows[_i10];
 
-      var _rowHeight3 = visibleRowHeights.get(_row5);
+      var _rowHeight3 = getOrThrow(visibleRowHeights, _row5);
 
-      var _y7 = visibleRowYs.get(_row5) + gridY;
+      var _y7 = getOrThrow(visibleRowYs, _row5) + gridY;
 
       this.drawRowHeader(context, state, _row5, _y7, _rowHeight3);
     }
@@ -1453,7 +1468,7 @@ class GridRenderer {
       modelRows,
       rowHeaderWidth
     } = metrics;
-    var modelRow = modelRows.get(row);
+    var modelRow = getOrThrow(modelRows, row);
     var x = rowHeaderWidth - theme.cellHorizontalPadding;
     var y = rowY + rowHeight * 0.5;
     context.fillText(model.textForRowHeader(modelRow), x, y);
@@ -1514,8 +1529,8 @@ class GridRenderer {
 
       for (var i = 0; i < visibleRows.length; i += 1) {
         var row = visibleRows[i];
-        var rowY = visibleRowYs.get(row);
-        var rowHeight = visibleRowHeights.get(row);
+        var rowY = getOrThrow(visibleRowYs, row);
+        var rowHeight = getOrThrow(visibleRowHeights, row);
 
         if (rowHeight > 0) {
           var y = gridY + rowY + rowHeight + 0.5;
@@ -1539,9 +1554,9 @@ class GridRenderer {
       for (var _i11 = 0; _i11 < hiddenRows.length; _i11 += 1) {
         var _row6 = hiddenRows[_i11];
 
-        var _rowY3 = visibleRowYs.get(_row6);
+        var _rowY3 = getOrThrow(visibleRowYs, _row6);
 
-        var _rowHeight4 = visibleRowHeights.get(_row6);
+        var _rowHeight4 = getOrThrow(visibleRowHeights, _row6);
 
         var minY = gridY + _rowY3 + _rowHeight4 + 0.5 - headerHiddenSeparatorSize * 0.5;
         context.rect(x + hiddenX, minY, hiddenSeparatorWidth, headerHiddenSeparatorSize);
@@ -1553,16 +1568,16 @@ class GridRenderer {
     if (headerSeparatorHoverColor) {
       var highlightedSeparator = draggingRowSeparator;
 
-      if (highlightedSeparator == null) {
+      if (highlightedSeparator == null && mouseX != null && mouseY != null) {
         highlightedSeparator = GridUtils.getRowSeparatorIndex(mouseX, mouseY, metrics, theme);
       }
 
       if (highlightedSeparator != null) {
         context.strokeStyle = headerSeparatorHoverColor;
 
-        var _rowY4 = visibleRowYs.get(highlightedSeparator);
+        var _rowY4 = getOrThrow(visibleRowYs, highlightedSeparator);
 
-        var _rowHeight5 = visibleRowHeights.get(highlightedSeparator);
+        var _rowHeight5 = getOrThrow(visibleRowHeights, highlightedSeparator);
 
         var _y8 = gridY + _rowY4 + _rowHeight5 + 0.5;
 
@@ -1599,12 +1614,12 @@ class GridRenderer {
     for (var _i12 = 0; _i12 < visibleRows.length; _i12 += 1) {
       var _row7 = visibleRows[_i12];
 
-      var _rowHeight6 = visibleRowHeights.get(_row7);
+      var _rowHeight6 = getOrThrow(visibleRowHeights, _row7);
 
       if (_rowHeight6 > 0) {
-        var _rowY5 = visibleRowYs.get(_row7) + gridY;
+        var _rowY5 = getOrThrow(visibleRowYs, _row7) + gridY;
 
-        var modelRow = modelRows.get(_row7);
+        var modelRow = getOrThrow(modelRows, _row7);
         var textY = _rowY5 + _rowHeight6 * 0.5;
         context.fillText(model.textForRowFooter(modelRow), textX, textY);
       }
@@ -1649,14 +1664,14 @@ class GridRenderer {
       return;
     }
 
-    var isCursorVisible = model.isEditable && editingCell == null && draggingRow == null && draggingColumn == null && visibleColumnXs.has(column) && visibleRowYs.has(row);
+    var isCursorVisible = isEditableGridModel(model) && model.isEditable && editingCell == null && draggingRow == null && draggingColumn == null && column != null && row != null && visibleColumnXs.has(column) && visibleRowYs.has(row);
 
     if (isCursorVisible) {
       // Punch a hole out where the active cell is, it gets styled differently.
-      var x = visibleColumnXs.get(column);
-      var y = visibleRowYs.get(row);
-      var w = visibleColumnWidths.get(column);
-      var h = visibleRowHeights.get(row);
+      var x = getOrThrow(visibleColumnXs, column);
+      var y = getOrThrow(visibleRowYs, row);
+      var w = getOrThrow(visibleColumnWidths, column);
+      var h = getOrThrow(visibleRowHeights, row);
       context.save();
       context.beginPath();
       context.rect(0, 0, width, height);
@@ -1676,12 +1691,12 @@ class GridRenderer {
 
       if (endRow >= top && bottom >= startRow && endColumn >= left && right >= startColumn) {
         // Need to offset the x/y coordinates so that the line draws nice and crisp
-        var _x9 = startColumn >= left && visibleColumnXs.has(startColumn) ? Math.round(visibleColumnXs.get(startColumn)) + 0.5 : minX;
+        var _x9 = startColumn >= left && visibleColumnXs.has(startColumn) ? Math.round(getOrThrow(visibleColumnXs, startColumn)) + 0.5 : minX;
 
-        var _y9 = startRow >= top && visibleRowYs.has(startRow) ? Math.max(Math.round(visibleRowYs.get(startRow)) + 0.5, 0.5) : minY;
+        var _y9 = startRow >= top && visibleRowYs.has(startRow) ? Math.max(Math.round(getOrThrow(visibleRowYs, startRow)) + 0.5, 0.5) : minY;
 
-        var endX = endColumn <= right && visibleColumnXs.has(endColumn) ? Math.round(visibleColumnXs.get(endColumn) + visibleColumnWidths.get(endColumn)) - 0.5 : maxX;
-        var endY = endRow <= bottom && visibleRowYs.has(endRow) ? Math.round(visibleRowYs.get(endRow) + visibleRowHeights.get(endRow)) - 0.5 : maxY;
+        var endX = endColumn <= right && visibleColumnXs.has(endColumn) ? Math.round(getOrThrow(visibleColumnXs, endColumn) + getOrThrow(visibleColumnWidths, endColumn)) - 0.5 : maxX;
+        var endY = endRow <= bottom && visibleRowYs.has(endRow) ? Math.round(getOrThrow(visibleRowYs, endRow) + getOrThrow(visibleRowHeights, endRow)) - 0.5 : maxY;
         context.rect(_x9, _y9, endX - _x9, endY - _y9);
       } // draw the inner transparent fill
 
@@ -1708,7 +1723,7 @@ class GridRenderer {
       context.stroke();
     }
 
-    if (isCursorVisible) {
+    if (isCursorVisible && column != null && row != null) {
       context.restore();
       this.drawActiveCell(context, state, column, row);
     }
@@ -1726,10 +1741,10 @@ class GridRenderer {
       visibleRowHeights,
       visibleRowYs
     } = metrics;
-    var cellX = visibleColumnXs.get(column);
-    var cellY = visibleRowYs.get(row);
-    var cellW = visibleColumnWidths.get(column);
-    var cellH = visibleRowHeights.get(row); // Now get the outline for the active cell
+    var cellX = getOrThrow(visibleColumnXs, column);
+    var cellY = getOrThrow(visibleRowYs, row);
+    var cellW = getOrThrow(visibleColumnWidths, column);
+    var cellH = getOrThrow(visibleRowHeights, row); // Now get the outline for the active cell
 
     var x = cellX - borderWidth * 0.5;
     var y = cellY - borderWidth * 0.5;
@@ -1759,12 +1774,12 @@ class GridRenderer {
   /**
    * Draws a rounded rectangle using the current state of the canvas.
    *
-   * @param {CanvasRenderingContext2D} ctx
-   * @param {number} x coordinate of the left side
-   * @param {number} y coordinate of the top side
-   * @param {number} w width of the rectangle
-   * @param {number} h height of the rectangle
-   * @param {number} r corner radius of the rectangle
+   * @param context The canvas context
+   * @param x coordinate of the left side
+   * @param y coordinate of the top side
+   * @param w width of the rectangle
+   * @param h height of the rectangle
+   * @param r corner radius of the rectangle
    */
 
 
@@ -1792,7 +1807,7 @@ class GridRenderer {
       theme
     } = state;
 
-    if (draggingColumn == null) {
+    if (draggingColumn == null || mouseX == null) {
       return;
     }
 
@@ -1803,8 +1818,8 @@ class GridRenderer {
       visibleColumnWidths,
       height
     } = metrics;
-    var x = visibleColumnXs.get(draggingColumn);
-    var columnWidth = visibleColumnWidths.get(draggingColumn) + 1;
+    var x = getOrThrow(visibleColumnXs, draggingColumn);
+    var columnWidth = getOrThrow(visibleColumnWidths, draggingColumn) + 1;
     var {
       backgroundColor,
       font,
@@ -1818,7 +1833,7 @@ class GridRenderer {
 
     context.fillStyle = backgroundColor;
     context.fillRect(x, 0, columnWidth, height);
-    context.translate(mouseX - x - gridX - draggingColumnOffset, gridY + reorderOffset); // Then draw the shadow of the moving column
+    context.translate(mouseX - x - gridX - (draggingColumnOffset !== null && draggingColumnOffset !== void 0 ? draggingColumnOffset : 0), gridY + reorderOffset); // Then draw the shadow of the moving column
 
     context.save();
     context.shadowColor = shadowColor;
@@ -1849,7 +1864,7 @@ class GridRenderer {
       theme
     } = state;
 
-    if (draggingRow == null) {
+    if (draggingRow == null || mouseY == null) {
       return;
     }
 
@@ -1860,8 +1875,8 @@ class GridRenderer {
       visibleRowHeights,
       width
     } = metrics;
-    var y = visibleRowYs.get(draggingRow);
-    var rowHeight = visibleRowHeights.get(draggingRow) + 1;
+    var y = getOrThrow(visibleRowYs, draggingRow);
+    var rowHeight = getOrThrow(visibleRowHeights, draggingRow) + 1;
     var {
       backgroundColor,
       font,
@@ -1875,7 +1890,7 @@ class GridRenderer {
 
     context.fillStyle = backgroundColor;
     context.fillRect(0, y, width, rowHeight);
-    context.translate(gridX + reorderOffset, mouseY - y - gridY - draggingRowOffset); // Then draw the shadow of the moving row
+    context.translate(gridX + reorderOffset, mouseY - y - gridY - (draggingRowOffset !== null && draggingRowOffset !== void 0 ? draggingRowOffset : 0)); // Then draw the shadow of the moving row
 
     context.save();
     context.shadowColor = shadowColor;
@@ -1938,10 +1953,10 @@ class GridRenderer {
       scrollBarHoverSize,
       scrollBarCasingWidth
     } = theme;
-    var isInbounds = mouseX <= width && mouseY <= height;
-    var isVerticalBarHover = isDraggingVerticalScrollBar || hasVerticalBar && !isDraggingHorizontalScrollBar && !isDragging && mouseX >= width - scrollBarHoverSize && mouseY <= barHeight + columnHeaderHeight && isInbounds;
+    var isInbounds = mouseX != null && mouseY != null && mouseX <= width && mouseY <= height;
+    var isVerticalBarHover = isDraggingVerticalScrollBar || hasVerticalBar && !isDraggingHorizontalScrollBar && !isDragging && mouseX != null && mouseY != null && mouseX >= width - scrollBarHoverSize && mouseY <= barHeight + columnHeaderHeight && isInbounds;
     var isHorizontalBarHover = isDraggingHorizontalScrollBar || hasHorizontalBar && !isDraggingVerticalScrollBar && !isDragging && !isVerticalBarHover && // vert bar gets priorty in overlapped corner hover area
-    mouseY >= height - scrollBarHoverSize && mouseX <= barWidth - rowHeaderWidth && isInbounds;
+    mouseX != null && mouseY != null && mouseY >= height - scrollBarHoverSize && mouseX <= barWidth - rowHeaderWidth && isInbounds;
     var hScrollBarSize = isHorizontalBarHover ? scrollBarHoverSize : scrollBarSize;
     var vScrollBarSize = isVerticalBarHover ? scrollBarHoverSize : scrollBarSize;
     context.translate(rowHeaderWidth, columnHeaderHeight);