fix: keep active cell selection in first column from going offscreen (#…

…1823)

- change cell input to not go off edge
- makes activeCellSelectionBorderWidth a theme variable, so it can be
shared with js and css
- change canvas active cell outline to only stick to edge if at left
edge of screen, not in any column
- re-style active cell input to match latest input variables
- change outline of input to use selection border color

active cell input in the first column fully onscreen, before:

![image](https://github.com/deephaven/web-client-ui/assets/1576283/468083d3-8ee7-4624-94c2-191cc7a541d9)

after:

![image](https://github.com/deephaven/web-client-ui/assets/1576283/53d0372a-225d-44b7-8bdc-b08cd9a1cef1)

cell selected but not active, and partially scrolled offscreen, before:

![image](https://github.com/deephaven/web-client-ui/assets/1576283/6be27c0e-763d-482d-8cee-1af545fdd15c)

after:

![image](https://github.com/deephaven/web-client-ui/assets/1576283/ed556685-fcfa-4069-bc98-12ec9d4a6d92)

packages/grid/src/Grid.tsx

@@ -2133,6 +2133,7 @@ class Grid extends PureComponent<GridProps, GridState> {
  const { selectionRange, value, isQuickEdit } = editingCell;
  const { column, row } = editingCell;
  const {
+ scrollX,
  gridX,
  gridY,
  allColumnXs,
@@ -2141,19 +2142,27 @@ class Grid extends PureComponent<GridProps, GridState> {
  allRowHeights,
  } = metrics;
 
+ const { activeCellSelectionBorderWidth } = this.getTheme();
+
  const x = allColumnXs.get(column);
  const y = allRowYs.get(row);
  const w = allColumnWidths.get(column);
  const h = allRowHeights.get(row);
 
+ // make sure cell doeesn't go off the left side of the grid
+ const leftBorderOffset =
+ gridX + (x ?? 0) <= 0 && scrollX <= 0
+ ? activeCellSelectionBorderWidth
+ : 0;
+
  // If the cell isn't visible, we still need to display an invisible cell for focus purposes
  const wrapperStyle: CSSProperties =
  x != null && y != null && w != null && h != null
  ? {
  position: 'absolute',
- left: gridX + x,
+ left: gridX + x + leftBorderOffset,
  top: gridY + y,
- width: w,
+ width: w - leftBorderOffset,
  height: h,
  }
  : { opacity: 0 };

packages/grid/src/GridRenderer.ts

@@ -30,9 +30,6 @@ export class GridRenderer {
  // Default radius in pixels for corners for some elements (like the active cell)
  static DEFAULT_EDGE_RADIUS = 2;
 
- // Default width in pixels for the border of the active cell
- static ACTIVE_CELL_BORDER_WIDTH = 2;
-
  protected textCellRenderer = new TextCellRenderer();
 
  protected dataBarCellRenderer = new DataBarCellRenderer();
@@ -2151,11 +2148,18 @@ export class GridRenderer {
  context: CanvasRenderingContext2D,
  state: GridRenderState,
  column: VisibleIndex,
- row: VisibleIndex,
- borderWidth = GridRenderer.ACTIVE_CELL_BORDER_WIDTH
+ row: VisibleIndex
  ): void {
  const { metrics, theme } = state;
- const { allColumnWidths, allColumnXs, allRowHeights, allRowYs } = metrics;
+ const {
+ scrollX,
+ scrollY,
+ allColumnWidths,
+ allColumnXs,
+ allRowHeights,
+ allRowYs,
+ } = metrics;
+ const { activeCellSelectionBorderWidth: borderWidth } = theme;
  const cellX = getOrThrow(allColumnXs, column);
  const cellY = getOrThrow(allRowYs, row);
  const cellW = getOrThrow(allColumnWidths, column);
@@ -2168,13 +2172,13 @@ export class GridRenderer {
  let h = cellH + borderWidth;
 
  // Make sure the outline is interior on the edge
- if (x <= 0) {
- w += x - 1;
- x = 1;
+ if (x <= 0 && scrollX <= 0) {
+ w -= borderWidth - x;
+ x = borderWidth * 0.5;
  }
- if (y <= 0) {
- h += y - 1;
- y = 1;
+ if (y <= 0 && scrollY <= 0) {
+ h -= borderWidth - y;
+ y = borderWidth * 0.5;
  }
 
  const { lineWidth } = context;

packages/grid/src/GridTheme.ts

@@ -84,6 +84,7 @@ export type GridTheme = {
  scrollBarActiveSelectionTickColor: NullableGridColor;
 
  // Look of the current selection
+ activeCellSelectionBorderWidth: number;
  selectionColor: GridColor;
  selectionOutlineColor: GridColor;
  selectionOutlineCasingColor: GridColor;
@@ -187,6 +188,7 @@ const defaultTheme: GridTheme = Object.freeze({
  scrollBarCasingWidth: 1,
  scrollSnapToColumn: false,
  scrollSnapToRow: false,
+ activeCellSelectionBorderWidth: 2,
  selectionColor: '#4286f433',
  selectionOutlineColor: '#4286f4',
  selectionOutlineCasingColor: '#222222',

packages/iris-grid/src/IrisGrid.scss

@@ -14,10 +14,11 @@ $iris-grid-bar-max-height: 250px;
 $iris-grid-bar-max-width: $table-sidebar-max-width;
 $transition-iris-grid-bar-flash: 1s;
 $cell-box-shadow:
- 0 0 0 2px var(--dh-color-accent),
+ 0 0 0 $active-cell-selection-border-width
+ var(--dh-color-grid-selection-outline),
  0 0 0 5px accent-opacity(25);
 $cell-invalid-box-shadow:
- 0 0 0 2px var(--dh-color-negative),
+ 0 0 0 $active-cell-selection-border-width var(--dh-color-negative),
  0 0 0 5px negative-opacity(25);
 
 .iris-grid {
@@ -134,8 +135,8 @@ $cell-invalid-box-shadow:
  }
 
  .grid-cell-input-field {
- color: $gray-200;
- background: $gray-800;
+ color: var(--dh-color-input-fg);
+ background: var(--dh-color-input-bg);
 
  &:focus {
  box-shadow: $cell-box-shadow;

packages/iris-grid/src/IrisGridTheme.module.scss

@@ -4,6 +4,7 @@
 $font-size: 12px;
 $row-height: 19px;
 $header-height: 30px;
+$active-cell-selection-border-width: 2px;
 
 :export {
  grid-bg: var(--dh-color-grid-bg);
@@ -29,6 +30,7 @@ $header-height: 30px;
  row-height: $row-height;
  row-background-colors: var(--dh-color-grid-row-0-bg)
  var(--dh-color-grid-row-1-bg);
+ active-cell-selection-border-width: $active-cell-selection-border-width;
  selection-color: var(--dh-color-grid-selection);
  selection-outline-color: var(--dh-color-grid-selection-outline);
  selection-outline-casing-color: var(--dh-color-grid-selection-outline-casing);

packages/iris-grid/src/IrisGridTheme.ts

@@ -150,6 +150,9 @@ export function createDefaultIrisGridTheme(): IrisGridThemeType {
  reverseHeaderBarHeight: 4,
  filterBarHorizontalPadding: 4,
 
+ activeCellSelectionBorderWidth:
+ parseInt(IrisGridTheme['active-cell-selection-border-width'], 10) || 2,
+
  shadowAlpha: parseFloat(IrisGridTheme['row-shadow-alpha']) || 0.15,
 
  // Amount of blur to apply to the bottom of the scrim while animating in

packages/iris-grid/src/__snapshots__/IrisGridTheme.test.ts.snap

@@ -2,6 +2,7 @@
 
 exports[`createDefaultIrisGridTheme should derive the default Iris grid theme 1`] = `
 {
+ "activeCellSelectionBorderWidth": 2,
  "allowColumnReorder": true,
  "allowColumnResize": true,
  "allowRowReorder": true,