@deephaven/grid 0.6.1-beta.0 → 0.6.3-alpha.5

package/dist/GridRenderer.js

@@ -78,7 +78,7 @@ class GridRenderer {
     var hi = Math.min(str.length - 1, end);
     var result = str;
 
-    while (hi > lo) {
+    while (hi >= lo) {
       var mid = Math.ceil((hi + lo) / 2);
       var truncatedStr = GridRenderer.truncate(str, mid);
 
@@ -90,6 +90,10 @@ class GridRenderer {
         }
 
         lo = mid;
+      } else if (mid === 0) {
+        // We already truncated to zero chars and it still doesn't fit, no need to keep looking
+        result = truncatedStr;
+        break;
       } else {
         hi = mid - 1;
       }
@@ -105,6 +109,7 @@ class GridRenderer {
    * @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
    */
 
 
@@ -112,10 +117,13 @@ class GridRenderer {
     var fontWidth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : GridRenderer.DEFAULT_FONT_WIDTH;
 
     if (width <= 0 || str.length <= 0) {
-      return null;
-    }
+      return '';
+    } // Estimate the possible low and high boundaries for truncating the text
+    // Use the width of the space divided by the estimated width of each character,
+    // and take half that as the low (minus 5 just to be extra safe), and double that as the high.
+
 
-    var lo = Math.min(Math.floor(width / fontWidth / 2), str.length);
+    var lo = Math.min(Math.max(0, Math.floor(width / fontWidth / 2) - 5), str.length);
     var hi = Math.min(Math.ceil(width / fontWidth * 2), str.length);
     return GridRenderer.binaryTruncateToWidth(context, str, width, lo, hi);
   }
@@ -262,7 +270,8 @@ class GridRenderer {
       visibleRows,
       visibleColumnXs,
       visibleColumnWidths,
-      width
+      width,
+      height
     } = metrics;
 
     if (floatingColumns.length === 0) {
@@ -276,16 +285,21 @@ class GridRenderer {
 
     if (draggingRow == null && draggingColumn == null) {
       this.drawFloatingMouseRowHover(context, state);
-    }
+    } // Clip floated column grid lines.
 
+
+    context.save();
+    context.beginPath();
+    context.rect(0, 0, floatingLeftWidth, height);
+    context.clip();
     this.drawGridLinesForItems(context, state, floatingColumns, visibleRows, theme.floatingGridColumnColor, theme.floatingGridRowColor);
+    context.restore();
     this.drawCellBackgroundsForItems(context, state, floatingColumns, visibleRows);
     this.drawFloatingBorders(context, state); // Draw the floating column selection...
 
     if (floatingLeftColumnCount > 0) {
       this.drawSelectedRanges(context, state, {
         left: 0,
-        right: floatingLeftColumnCount,
         maxX: visibleColumnXs.get(floatingLeftColumnCount - 1) + visibleColumnWidths.get(floatingLeftColumnCount - 1)
       }, true);
     }
@@ -738,8 +752,9 @@ class GridRenderer {
     } = state;
     var {
       visibleRowYs,
-      maxX
-    } = metrics; // Draw row lines
+      maxX: metricsMaxX
+    } = metrics;
+    var maxX = metricsMaxX; // Draw row lines
 
     for (var i = 0; i < rows.length; i += 1) {
       var row = rows[i];
@@ -913,7 +928,7 @@ class GridRenderer {
       var fontWidth = fontWidths.get(context.font);
       var truncatedText = this.getCachedTruncatedString(context, text, textWidth - cellHorizontalPadding * 2, fontWidth);
 
-      if (truncatedText != null) {
+      if (truncatedText) {
         context.fillText(truncatedText, textX, textY);
       }
     }
@@ -1054,11 +1069,13 @@ class GridRenderer {
     } = state;
     var {
       columnHeaderHeight,
+      floatingColumns,
       gridX,
       width,
       visibleColumns,
       visibleColumnWidths,
-      visibleColumnXs
+      visibleColumnXs,
+      floatingLeftColumnCount
     } = metrics;
 
     if (columnHeaderHeight <= 0) {
@@ -1075,31 +1092,88 @@ class GridRenderer {
     } = theme;
     var hiddenSeparatorHeight = columnHeaderHeight * 0.5;
     var hiddenY = columnHeaderHeight * 0.5 - hiddenSeparatorHeight * 0.5;
+    var containsFrozenColumns = floatingLeftColumnCount > 0;
+    var floatingLeftColumnsWidth = 0;
     context.save();
     context.beginPath(); // Fill in the background
 
     context.fillStyle = headerBackgroundColor;
-    context.fillRect(0, 0, width, columnHeaderHeight); // Draw the separators
+    context.fillRect(0, 0, width, columnHeaderHeight);
+    context.fillStyle = headerColor; // Visible columns.
+
+    for (var i = 0; i < visibleColumns.length; i += 1) {
+      var column = visibleColumns[i];
+      var columnWidth = visibleColumnWidths.get(column);
+      var x = visibleColumnXs.get(column) + gridX;
+      this.drawColumnHeader(context, state, column, x, columnWidth);
+    }
+
+    if (containsFrozenColumns) {
+      floatingLeftColumnsWidth = visibleColumnXs.get(floatingLeftColumnCount - 1) + visibleColumnWidths.get(floatingLeftColumnCount - 1); // Frozen columns' background
+
+      context.fillStyle = headerBackgroundColor;
+      context.fillRect(gridX, 0, floatingLeftColumnsWidth, columnHeaderHeight); // Frozen columns.
+
+      context.fillStyle = headerColor;
+
+      for (var _i5 = 0; _i5 < floatingColumns.length; _i5 += 1) {
+        var _column = floatingColumns[_i5];
+
+        var _columnWidth = visibleColumnWidths.get(_column);
+
+        var _x4 = visibleColumnXs.get(_column) + gridX;
+
+        this.drawColumnHeader(context, state, _column, _x4, _columnWidth);
+      }
+    } // Draw the separators, visible columns then floating columns.
+
 
     if (headerSeparatorColor) {
       context.strokeStyle = headerSeparatorColor;
       context.beginPath();
-      var hiddenColumns = [];
+      var hiddenColumns = []; // Draw visible column separators.
+
       var isPreviousColumnHidden = false;
 
-      for (var i = 0; i < visibleColumns.length; i += 1) {
-        var column = visibleColumns[i];
-        var columnX = visibleColumnXs.get(column);
-        var columnWidth = visibleColumnWidths.get(column);
+      for (var _i6 = 0; _i6 < visibleColumns.length; _i6 += 1) {
+        var _column2 = visibleColumns[_i6];
+        var columnX = visibleColumnXs.get(_column2);
+
+        var _columnWidth2 = visibleColumnWidths.get(_column2);
+
+        if (!(columnX < floatingLeftColumnsWidth - _columnWidth2)) {
+          if (_columnWidth2 > 0) {
+            var _x5 = gridX + columnX + _columnWidth2 + 0.5;
+
+            context.moveTo(_x5, 0);
+            context.lineTo(_x5, columnHeaderHeight - 0.5);
+            isPreviousColumnHidden = false;
+          } else if (!isPreviousColumnHidden) {
+            isPreviousColumnHidden = true;
+            hiddenColumns.push(_column2);
+          }
+        }
+      } // Draw floating column separators.
+
 
-        if (columnWidth > 0) {
-          var x = gridX + columnX + columnWidth + 0.5;
-          context.moveTo(x, 0);
-          context.lineTo(x, columnHeaderHeight - 0.5);
+      isPreviousColumnHidden = false;
+
+      for (var _i7 = 0; _i7 < floatingColumns.length; _i7 += 1) {
+        var _column3 = floatingColumns[_i7];
+
+        var _columnX = visibleColumnXs.get(_column3);
+
+        var _columnWidth3 = visibleColumnWidths.get(_column3);
+
+        if (_columnWidth3 > 0) {
+          var _x6 = gridX + _columnX + _columnWidth3 + 0.5;
+
+          context.moveTo(_x6, 0);
+          context.lineTo(_x6, columnHeaderHeight - 0.5);
           isPreviousColumnHidden = false;
         } else if (!isPreviousColumnHidden) {
           isPreviousColumnHidden = true;
-          hiddenColumns.push(column);
+          hiddenColumns.push(_column3);
         }
       } // Bottom Border, should be interior to the header height
 
@@ -1111,14 +1185,14 @@ class GridRenderer {
       context.beginPath();
       context.fillStyle = headerSeparatorColor;
 
-      for (var _i5 = 0; _i5 < hiddenColumns.length; _i5 += 1) {
-        var _column = hiddenColumns[_i5];
+      for (var _i8 = 0; _i8 < hiddenColumns.length; _i8 += 1) {
+        var _column4 = hiddenColumns[_i8];
 
-        var _columnX = visibleColumnXs.get(_column);
+        var _columnX2 = visibleColumnXs.get(_column4);
 
-        var _columnWidth = visibleColumnWidths.get(_column);
+        var _columnWidth4 = visibleColumnWidths.get(_column4);
 
-        var minX = gridX + _columnX + _columnWidth + 0.5 - headerHiddenSeparatorSize * 0.5;
+        var minX = gridX + _columnX2 + _columnWidth4 + 0.5 - headerHiddenSeparatorSize * 0.5;
         context.rect(minX, hiddenY, headerHiddenSeparatorSize, hiddenSeparatorHeight);
       }
 
@@ -1135,47 +1209,35 @@ class GridRenderer {
       if (highlightedSeparator != null && (!isDragging || draggingColumnSeparator != null)) {
         context.strokeStyle = headerSeparatorHoverColor;
 
-        var _columnX2 = visibleColumnXs.get(highlightedSeparator);
+        var _columnX3 = visibleColumnXs.get(highlightedSeparator);
 
-        var _columnWidth2 = visibleColumnWidths.get(highlightedSeparator);
+        var _columnWidth5 = visibleColumnWidths.get(highlightedSeparator);
 
-        var _x4 = gridX + _columnX2 + _columnWidth2 + 0.5;
+        var _x7 = gridX + _columnX3 + _columnWidth5 + 0.5;
 
         var visibleColumnIndex = visibleColumns.indexOf(highlightedSeparator);
         var nextColumn = visibleColumnIndex < visibleColumns.length - 1 ? visibleColumns[visibleColumnIndex + 1] : null;
         var nextColumnWidth = nextColumn != null ? visibleColumnWidths.get(nextColumn) : null;
-        var isColumnHidden = _columnWidth2 === 0;
+        var isColumnHidden = _columnWidth5 === 0;
         var isNextColumnHidden = nextColumnWidth != null && nextColumnWidth === 0;
 
         if (isColumnHidden) {
           context.strokeStyle = headerHiddenSeparatorHoverColor;
           context.fillStyle = headerHiddenSeparatorHoverColor;
-          context.fillRect(_x4, hiddenY, headerHiddenSeparatorSize * 0.5, hiddenSeparatorHeight);
+          context.fillRect(_x7, hiddenY, headerHiddenSeparatorSize * 0.5, hiddenSeparatorHeight);
         } else if (isNextColumnHidden) {
           context.fillStyle = headerSeparatorHoverColor;
-          context.fillRect(_x4 - headerHiddenSeparatorSize * 0.5, hiddenY, headerHiddenSeparatorSize * 0.5, hiddenSeparatorHeight);
+          context.fillRect(_x7 - headerHiddenSeparatorSize * 0.5, hiddenY, headerHiddenSeparatorSize * 0.5, hiddenSeparatorHeight);
         } // column seperator hover line
 
 
         context.beginPath();
-        context.moveTo(_x4, 0);
-        context.lineTo(_x4, columnHeaderHeight - 1);
+        context.moveTo(_x7, 0);
+        context.lineTo(_x7, columnHeaderHeight - 1);
         context.stroke();
       }
     }
 
-    context.fillStyle = headerColor;
-
-    for (var _i6 = 0; _i6 < visibleColumns.length; _i6 += 1) {
-      var _column2 = visibleColumns[_i6];
-
-      var _columnWidth3 = visibleColumnWidths.get(_column2);
-
-      var _x5 = visibleColumnXs.get(_column2) + gridX;
-
-      this.drawColumnHeader(context, state, _column2, _x5, _columnWidth3);
-    }
-
     context.restore();
   }
 
@@ -1194,11 +1256,6 @@ class GridRenderer {
     } = metrics;
     var modelColumn = modelColumns.get(column);
     var text = model.textForColumnHeader(modelColumn);
-
-    if (!text) {
-      return;
-    }
-
     var {
       headerHorizontalPadding
     } = theme;
@@ -1225,12 +1282,12 @@ class GridRenderer {
       context.textAlign = 'left';
       context.fillText(text, x, y);
     } else {
-      var _x6 = columnX + columnWidth * 0.5;
+      var _x8 = columnX + columnWidth * 0.5;
 
       var _y5 = columnHeaderHeight * 0.5;
 
       context.textAlign = 'center';
-      context.fillText(text, _x6, _y5);
+      context.fillText(text, _x8, _y5);
     }
 
     context.restore();
@@ -1305,8 +1362,8 @@ class GridRenderer {
       context.beginPath();
       context.fillStyle = headerSeparatorColor;
 
-      for (var _i7 = 0; _i7 < hiddenRows.length; _i7 += 1) {
-        var _row4 = hiddenRows[_i7];
+      for (var _i9 = 0; _i9 < hiddenRows.length; _i9 += 1) {
+        var _row4 = hiddenRows[_i9];
 
         var _rowY = visibleRowYs.get(_row4);
 
@@ -1364,8 +1421,8 @@ class GridRenderer {
     context.fillStyle = headerColor;
     context.textAlign = 'right';
 
-    for (var _i8 = 0; _i8 < visibleRows.length; _i8 += 1) {
-      var _row5 = visibleRows[_i8];
+    for (var _i10 = 0; _i10 < visibleRows.length; _i10 += 1) {
+      var _row5 = visibleRows[_i10];
 
       var _rowHeight3 = visibleRowHeights.get(_row5);
 
@@ -1474,8 +1531,8 @@ class GridRenderer {
       context.beginPath();
       context.fillStyle = headerSeparatorColor;
 
-      for (var _i9 = 0; _i9 < hiddenRows.length; _i9 += 1) {
-        var _row6 = hiddenRows[_i9];
+      for (var _i11 = 0; _i11 < hiddenRows.length; _i11 += 1) {
+        var _row6 = hiddenRows[_i11];
 
         var _rowY3 = visibleRowYs.get(_row6);
 
@@ -1534,8 +1591,8 @@ class GridRenderer {
     context.textAlign = 'left';
     var textX = x + cellHorizontalPadding;
 
-    for (var _i10 = 0; _i10 < visibleRows.length; _i10 += 1) {
-      var _row7 = visibleRows[_i10];
+    for (var _i12 = 0; _i12 < visibleRows.length; _i12 += 1) {
+      var _row7 = visibleRows[_i12];
 
       var _rowHeight6 = visibleRowHeights.get(_row7);
 
@@ -1614,25 +1671,25 @@ 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 _x7 = startColumn >= left && visibleColumnXs.has(startColumn) ? Math.round(visibleColumnXs.get(startColumn)) + 0.5 : minX;
+        var _x9 = startColumn >= left && visibleColumnXs.has(startColumn) ? Math.round(visibleColumnXs.get(startColumn)) + 0.5 : minX;
 
         var _y9 = startRow >= top && visibleRowYs.has(startRow) ? Math.max(Math.round(visibleRowYs.get(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;
-        context.rect(_x7, _y9, endX - _x7, endY - _y9);
+        context.rect(_x9, _y9, endX - _x9, endY - _y9);
       } // draw the inner transparent fill
 
 
       context.fillStyle = theme.selectionColor;
       context.fill();
-      /* 
-      draw an "inner stroke" that's clipped to just inside of the rects
-      to act as a casing to the outer stroke. 3px width because 1px is outside
-      the rect (but clipped), 1px is "on" the rect (technically this pixel is
-      a half pixel clip as well due to rects offset, but we are immediately painting
-      over it), and then the 1px inside (which is the desired pixel).
-      */
+      /**
+       * draw an "inner stroke" that's clipped to just inside of the rects
+       * to act as a casing to the outer stroke. 3px width because 1px is outside
+       * the rect (but clipped), 1px is "on" the rect (technically this pixel is
+       * a half pixel clip as well due to rects offset, but we are immediately painting
+       * over it), and then the 1px inside (which is the desired pixel).
+       */
 
       context.save();
       context.clip();
@@ -1914,15 +1971,15 @@ class GridRenderer {
     }
 
     if (hasVerticalBar) {
-      var _x8 = width - rowHeaderWidth - vScrollBarSize;
+      var _x10 = width - rowHeaderWidth - vScrollBarSize;
 
       var _y10 = scrollY; // scrollbar casing
 
       context.fillStyle = scrollBarCasingColor;
-      context.fillRect(_x8, 0, vScrollBarSize - scrollBarCasingWidth, barHeight); // scrollbar track
+      context.fillRect(_x10, 0, vScrollBarSize - scrollBarCasingWidth, barHeight); // scrollbar track
 
       context.fillStyle = isVerticalBarHover ? scrollBarHoverBackgroundColor : scrollBarBackgroundColor;
-      context.fillRect(_x8 + scrollBarCasingWidth, 0, vScrollBarSize - scrollBarCasingWidth, barHeight); // scrollbar thumb
+      context.fillRect(_x10 + scrollBarCasingWidth, 0, vScrollBarSize - scrollBarCasingWidth, barHeight); // scrollbar thumb
 
       if (isDraggingVerticalScrollBar) {
         context.fillStyle = scrollBarActiveColor;
@@ -1932,7 +1989,7 @@ class GridRenderer {
         context.fillStyle = scrollBarColor;
       }
 
-      context.fillRect(_x8 + scrollBarCasingWidth, _y10, vScrollBarSize - scrollBarCasingWidth, handleHeight);
+      context.fillRect(_x10 + scrollBarCasingWidth, _y10, vScrollBarSize - scrollBarCasingWidth, handleHeight);
     }
 
     context.translate(-rowHeaderWidth, -columnHeaderHeight);