@deephaven/grid 0.104.1-virtual-webgl.11 → 0.105.1-beta.0

package/dist/GridMetricCalculator.js

@@ -68,7 +68,9 @@ export class GridMetricCalculator {
   /** User set row heights */
   /** Calculated column widths based on cell contents */
   /** Calculated row heights based on cell contents */
-  /** Cache of fonts to estimated width of one char */
+  /** Cache of fonts to estimated width of the smallest char */
+  /** Cache of fonts to estimated width of the largest char */
+  /** Cache of fonts to width of all chars */
   /** Map from visible index to model index for rows (e.g. reversing movedRows operations) */
   /** Map from visible index to model index for columns (e.g. reversing movedColumns operations) */
   /** List of moved row operations. Need to track the previous value so we know if modelRows needs to be cleared. */
@@ -79,7 +81,9 @@ export class GridMetricCalculator {
       userRowHeights = new Map(),
       calculatedColumnWidths = new Map(),
       calculatedRowHeights = new Map(),
-      fontWidths = new Map(),
+      fontWidthsLower = new Map(),
+      fontWidthsUpper = new Map(),
+      allCharWidths = new Map(),
       modelRows = new Map(),
       modelColumns = new Map(),
       movedRows = [],
@@ -93,7 +97,9 @@ export class GridMetricCalculator {
     _defineProperty(this, "userRowHeights", void 0);
     _defineProperty(this, "calculatedColumnWidths", void 0);
     _defineProperty(this, "calculatedRowHeights", void 0);
-    _defineProperty(this, "fontWidths", void 0);
+    _defineProperty(this, "fontWidthsLower", void 0);
+    _defineProperty(this, "fontWidthsUpper", void 0);
+    _defineProperty(this, "allCharWidths", void 0);
     _defineProperty(this, "modelRows", void 0);
     _defineProperty(this, "modelColumns", void 0);
     _defineProperty(this, "movedRows", void 0);
@@ -102,7 +108,9 @@ export class GridMetricCalculator {
     this.userRowHeights = userRowHeights;
     this.calculatedRowHeights = calculatedRowHeights;
     this.calculatedColumnWidths = calculatedColumnWidths;
-    this.fontWidths = fontWidths;
+    this.allCharWidths = allCharWidths;
+    this.fontWidthsLower = fontWidthsLower;
+    this.fontWidthsUpper = fontWidthsUpper;
 
     // Need to track the last moved rows/columns array so we know if we need to reset our models cache
     this.modelRows = modelRows;
@@ -266,7 +274,8 @@ export class GridMetricCalculator {
     var bottomVisible = lastTop > 0 ? this.getBottomVisible(state, allRowYs, allRowHeights, visibleRows, gridY) : bottom;
     var rightVisible = lastLeft > 0 ? this.getRightVisible(state, allColumnXs, allColumnWidths, visibleColumns, gridX) : right;
     var {
-      fontWidths,
+      fontWidthsLower,
+      fontWidthsUpper,
       userColumnWidths,
       userRowHeights,
       calculatedRowHeights,
@@ -371,7 +380,8 @@ export class GridMetricCalculator {
       movedRows,
       movedColumns,
       // Map of the width of the fonts
-      fontWidths,
+      fontWidthsLower,
+      fontWidthsUpper,
       // Map of user set column/row width/height
       userColumnWidths,
       userRowHeights,
@@ -1292,8 +1302,8 @@ export class GridMetricCalculator {
       } = theme;
       return _columnWidth;
     }
-    var headerWidth = this.calculateColumnHeaderWidth(modelColumn, state);
-    var dataWidth = this.calculateColumnDataWidth(modelColumn, state);
+    var headerWidth = this.calculateColumnHeaderWidth(modelColumn, state, maxColumnWidth);
+    var dataWidth = this.calculateColumnDataWidth(modelColumn, state, maxColumnWidth);
     var cachedValue = this.calculatedColumnWidths.get(modelColumn);
     var columnWidth = Math.ceil(Math.max(headerWidth, dataWidth));
     columnWidth = Math.max(minColumnWidth, columnWidth);
@@ -1316,21 +1326,24 @@ export class GridMetricCalculator {
    * @param state The grid metric state
    * @returns The calculated width of the column header
    */
-  calculateColumnHeaderWidth(modelColumn, state) {
+  calculateColumnHeaderWidth(modelColumn, state, maxColumnWidth) {
     var {
       model,
-      theme
+      theme,
+      context
     } = state;
     var {
-      headerFont,
-      headerHorizontalPadding
+      headerHorizontalPadding,
+      headerFont
     } = theme;
+    this.calculateLowerFontWidth(headerFont, context);
+    this.calculateUpperFontWidth(headerFont, context);
+    var totalPadding = headerHorizontalPadding * 2;
     var headerText = model.textForColumnHeader(modelColumn, 0);
     if (headerText !== undefined && headerText !== '') {
-      var headerFontWidth = this.getWidthForFont(headerFont, state);
-      return headerText.length * headerFontWidth + headerHorizontalPadding * 2;
+      return this.getTextWidth(context, headerFont, headerText, maxColumnWidth - totalPadding) + totalPadding;
     }
-    return headerHorizontalPadding * 2;
+    return totalPadding;
   }
 
   /**
@@ -1339,13 +1352,14 @@ export class GridMetricCalculator {
    * @param state The grid metric state
    * @returns The calculated width of the column data
    */
-  calculateColumnDataWidth(modelColumn, state) {
+  calculateColumnDataWidth(modelColumn, state, maxColumnWidth) {
     var {
       top,
       height,
       width,
       model,
-      theme
+      theme,
+      context
     } = state;
     var {
       floatingTopRowCount,
@@ -1361,27 +1375,52 @@ export class GridMetricCalculator {
       scrollBarSize,
       dataBarHorizontalPadding
     } = theme;
+    this.calculateLowerFontWidth(font, context);
+    this.calculateUpperFontWidth(font, context);
     var columnWidth = 0;
-    var fontWidth = this.getWidthForFont(font, state);
     var rowsPerPage = height / rowHeight;
     var bottom = Math.ceil(top + rowsPerPage);
+    var cellPadding = cellHorizontalPadding * 2;
     GridUtils.iterateAllItems(top, bottom, floatingTopRowCount, floatingBottomRowCount, rowCount, row => {
       var modelRow = this.getModelRow(row, state);
       var text = model.textForCell(modelColumn, modelRow);
       var cellRenderType = model.renderTypeForCell(modelColumn, modelRow);
       var cellWidth = 0;
       if (text) {
-        var cellPadding = cellHorizontalPadding * 2;
-        cellWidth = text.length * fontWidth + cellPadding;
+        cellWidth = this.getTextWidth(context, font, text, maxColumnWidth - cellPadding) + cellPadding;
       }
       if (cellRenderType === 'dataBar') {
         cellWidth += dataBarHorizontalPadding;
       }
       columnWidth = Math.max(columnWidth, cellWidth);
     });
-    columnWidth = Math.max(Math.min(columnWidth, (width - rowHeaderWidth - scrollBarSize - rowFooterWidth) * GridMetricCalculator.MAX_COLUMN_WIDTH), cellHorizontalPadding * 2);
+    columnWidth = Math.max(Math.min(columnWidth, (width - rowHeaderWidth - scrollBarSize - rowFooterWidth) * GridMetricCalculator.MAX_COLUMN_WIDTH), cellPadding);
     return columnWidth;
   }
+  getTextWidth(context, font, text, maxWidth) {
+    if (!this.allCharWidths.has(font)) {
+      this.allCharWidths.set(font, new Map());
+    }
+    var charWidths = getOrThrow(this.allCharWidths, font);
+    var width = 0;
+    for (var i = 0; i < text.length; i += 1) {
+      var char = text[i];
+      if (charWidths.has(char)) {
+        width += getOrThrow(charWidths, char);
+      } else {
+        var textMetrics = context.measureText(char);
+        var {
+          width: charWidth
+        } = textMetrics;
+        charWidths.set(char, charWidth);
+        width += charWidth;
+      }
+      if (maxWidth !== undefined && width > maxWidth) {
+        return maxWidth;
+      }
+    }
+    return width;
+  }
 
   /**
    * The coordinate for where the tree padding should be drawn
@@ -1414,30 +1453,47 @@ export class GridMetricCalculator {
   }
 
   /**
-   * Get the width of the provided font. Exploits the fact that we're
-   * using tabular figures so every character is same width
+   * Calculates the lower bound width of a character of the provided font.
    * @param font The font to get the width for
    * @param state The grid metric state
-   * @returns Width of the char `8` for the specified font
    */
-  getWidthForFont(font, state) {
-    if (this.fontWidths.has(font)) {
-      return getOrThrow(this.fontWidths, font);
+  calculateLowerFontWidth(font, context) {
+    if (this.fontWidthsLower.has(font)) {
+      return;
     }
+    context.font = font;
+    // Assume char `.` is the smallest character
+    var textMetrics = context.measureText('.');
     var {
-      context
-    } = state;
+      width
+    } = textMetrics;
+
+    // context.font changes the string a little bit, e.g. '10px Arial, sans serif' => '10px Arial, "sans serif"'
+    // Rather than require checking with the correct font def (theme, or context font), just key it to both
+    this.fontWidthsLower.set(font, width);
+    this.fontWidthsLower.set(context.font, width);
+  }
+
+  /**
+   * Calculates the upper bound width of a character of the provided font.
+   * @param font The font to get the width for
+   * @param state The grid metric state
+   */
+  calculateUpperFontWidth(font, context) {
+    if (this.fontWidthsUpper.has(font)) {
+      return;
+    }
     context.font = font;
-    var textMetrics = context.measureText('8');
+    // Assume char `m` is the largest character
+    var textMetrics = context.measureText('m');
     var {
       width
     } = textMetrics;
 
     // context.font changes the string a little bit, e.g. '10px Arial, sans serif' => '10px Arial, "sans serif"'
     // Rather than require checking with the correct font def (theme, or context font), just key it to both
-    this.fontWidths.set(font, width);
-    this.fontWidths.set(context.font, width);
-    return width;
+    this.fontWidthsUpper.set(font, width);
+    this.fontWidthsUpper.set(context.font, width);
   }
 
   /**