Remove negative space + UI improvements

quadratic-client/package.json

@@ -43,6 +43,7 @@
     "@sentry/vite-plugin": "^2.15.0",
     "@szhsin/react-menu": "^4.0.2",
     "@tailwindcss/container-queries": "^0.1.1",
+    "@types/lodash.debounce": "^4.0.9",
     "@types/react-avatar-editor": "^13.0.2",
     "@types/ua-parser-js": "^0.7.39",
     "bignumber.js": "^9.1.2",
@@ -55,6 +56,7 @@
     "fontfaceobserver": "^2.3.0",
     "fuzzysort": "^2.0.4",
     "localforage": "^1.10.0",
+    "lodash.debounce": "^4.0.8",
     "mixpanel-browser": "^2.46.0",
     "monaco-editor": "^0.40.0",
     "next-themes": "^0.3.0",

quadratic-client/src/app/grid/controller/Sheets.ts

@@ -167,6 +167,7 @@ class Sheets {
           offsets: '',
           bounds: { type: 'empty' },
           bounds_without_formatting: { type: 'empty' },
+          sheet_size: null,
         },
         true
       );
@@ -185,7 +186,6 @@ class Sheets {
       this._current = value;
       pixiApp.viewport.dirty = true;
       pixiApp.gridLines.dirty = true;
-      pixiApp.axesLines.dirty = true;
       pixiApp.headings.dirty = true;
       pixiApp.cursor.dirty = true;
       pixiApp.multiplayerCursor.dirty = true;

quadratic-client/src/app/grid/sheet/Sheet.ts

@@ -7,6 +7,7 @@ import { Rectangle } from 'pixi.js';
 import { Coordinate } from '../../gridGL/types/size';
 import { sheets } from '../controller/Sheets';
 import { RectangleLike, SheetCursor } from './SheetCursor';
+import { pixiApp } from '@/app/gridGL/pixiApp/PixiApp';
 
 export class Sheet {
   id: string;
@@ -15,7 +16,7 @@ export class Sheet {
   name: string;
   order: string;
   color?: string;
-
+  sheetSize?: [bigint, bigint];
   offsets: SheetOffsets;
   bounds: GridBounds;
   boundsWithoutFormatting: GridBounds;
@@ -35,6 +36,7 @@ export class Sheet {
     this.bounds = info.bounds;
     this.boundsWithoutFormatting = info.bounds_without_formatting;
     this.gridOverflowLines = new GridOverflowLines();
+    this.sheetSize = info.sheet_size ?? undefined;
     events.on('sheetBounds', this.updateBounds);
     events.on('sheetValidations', this.sheetValidations);
   }
@@ -55,6 +57,7 @@ export class Sheet {
         offsets: '',
         bounds: { type: 'empty' },
         bounds_without_formatting: { type: 'empty' },
+        sheet_size: null,
       },
       true
     );
@@ -82,6 +85,11 @@ export class Sheet {
     this.order = info.order;
     this.color = info.color ?? undefined;
     this.offsets = SheetOffsetsWasm.load(info.offsets);
+    if (this.sheetSize !== info.sheet_size) {
+      this.sheetSize = info.sheet_size ?? undefined;
+      pixiApp.gridLines.dirty = true;
+      pixiApp.setViewportDirty();
+    }
   }
 
   //#endregion
@@ -157,4 +165,26 @@ export class Sheet {
   getValidationById(id: string): Validation | undefined {
     return this.validations.find((v) => v.id === id);
   }
+
+  // @returns the screen bounds of the sheet
+  getSheetSize(): Rectangle | undefined {
+    if (this.bounds.type === 'empty') return;
+    const sheetSize = this.sheetSize;
+    const start = this.getCellOffsets(this.bounds.min.x, this.bounds.min.y);
+    const maxX = sheetSize ? Math.max(Number(sheetSize[0]), Number(this.bounds.max.x)) : Number(this.bounds.max.x);
+    const maxY = sheetSize ? Math.max(Number(sheetSize[1]), Number(this.bounds.max.y)) : Number(this.bounds.max.y);
+    const end = this.getCellOffsets(maxX, maxY);
+    return new Rectangle(start.x, start.y, end.x - start.x, end.y - start.y);
+  }
+
+  // @returns the cell coordinate bounds of the sheet
+  // note: returns (0,0,Infinity,Infinity) if sheetSize is not set
+  getCellSheetSize(): Rectangle {
+    const sheetSize = this.sheetSize;
+    if (sheetSize) {
+      return new Rectangle(0, 0, Number(sheetSize[0]), Number(sheetSize[1]));
+    } else {
+      return new Rectangle(0, 0, Infinity, Infinity);
+    }
+  }
 }

quadratic-client/src/app/gridGL/UI/GridLines.ts

@@ -8,6 +8,7 @@ import { colors } from '../../theme/colors';
 import { pixiApp } from '../pixiApp/PixiApp';
 import { pixiAppSettings } from '../pixiApp/PixiAppSettings';
 import { calculateAlphaForGridLines } from './gridUtils';
+import { outOfBoundsBottom, outOfBoundsRight } from './gridHeadings/outOfBounds';
 
 interface GridLine {
   column?: number;
@@ -26,7 +27,6 @@ export class GridLines extends Graphics {
   gridLinesY: GridLine[] = [];
 
   draw(bounds: Rectangle): void {
-    this.lineStyle({ width: 1, color: colors.gridLines, alpha: 0.125, alignment: 0.5, native: false });
     const range = this.drawHorizontalLines(bounds);
     this.drawVerticalLines(bounds, range);
     this.dirty = false;
@@ -53,9 +53,14 @@ export class GridLines extends Graphics {
       this.alpha = gridAlpha;
       this.visible = true;
 
-      this.lineStyle(1, colors.gridLines, 0.125, 0.5, true);
+      this.lineStyle({ width: 1, color: colors.gridLines, alignment: 0.5, native: true });
       this.gridLinesX = [];
       this.gridLinesY = [];
+
+      bounds.width += bounds.x < 0 ? -bounds.x : 0;
+      bounds.height += bounds.y < 0 ? -bounds.y : 0;
+      bounds.x = Math.min(bounds.x, 0);
+      bounds.y = Math.min(bounds.y, 0);
       const range = this.drawHorizontalLines(bounds);
       this.drawVerticalLines(bounds, range);
     }
@@ -71,9 +76,26 @@ export class GridLines extends Graphics {
     let column = index;
     const offset = bounds.left - position;
     let size = 0;
-    for (let x = bounds.left; x <= bounds.right + size - 1; x += size) {
-      // don't draw grid lines when hidden
+
+    // draw out of bounds (left)
+    this.lineStyle({ width: 1, color: colors.gridLinesOutOfBounds, alignment: 0.5, native: true });
+    let x = bounds.left;
+    // this can be optimized to start at the first column that is not out of bounds
+    while (column < 0) {
+      // this.moveTo(x - offset, bounds.top);
+      // this.lineTo(x - offset, bounds.bottom);
+      size = sheets.sheet.offsets.getColumnWidth(column);
+      x += size;
+      column++;
+    }
+
+    const oobRight = outOfBoundsRight(bounds.right);
+    const oobBottom = outOfBoundsBottom(bounds.bottom);
+
+    // draw content
+    while (x < (oobRight ?? bounds.right) + size - 1) {
       if (size !== 0) {
+        // todo...need to take into account out of bounds for getLinesInRange
         const lines = gridOverflowLines.getLinesInRange(column, range);
         if (lines) {
           for (const [y0, y1] of lines) {
@@ -83,14 +105,56 @@ export class GridLines extends Graphics {
             this.lineTo(x - offset, end);
           }
         } else {
-          this.moveTo(x - offset, bounds.top);
-          this.lineTo(x - offset, bounds.bottom);
+          if (bounds.top < 0) {
+            // draw out of bounds above
+            this.lineStyle({ width: 1, color: colors.gridLinesOutOfBounds, alignment: 0.5, native: true });
+            // this.moveTo(x - offset, bounds.top);
+            this.moveTo(x - offset, Math.max(0, bounds.top));
+
+            this.lineStyle({ width: 1, color: colors.gridLines, alignment: 0.5, native: true });
+            if (oobBottom !== undefined) {
+              this.lineTo(x - offset, oobBottom);
+              this.gridLinesX.push({ column, x: x - offset, y: 0, w: 1, h: oobBottom });
+
+              // draw out of bounds below
+              this.lineStyle({ width: 1, color: colors.gridLinesOutOfBounds, alignment: 0.5, native: true });
+              this.lineTo(x - offset, bounds.bottom);
+            } else {
+              this.lineTo(x - offset, bounds.bottom);
+              this.gridLinesX.push({ column, x: x - offset, y: 0, w: 1, h: bounds.bottom });
+            }
+          } else {
+            this.lineStyle({ width: 1, color: colors.gridLines, alignment: 0.5, native: true });
+            if (oobBottom !== undefined) {
+              this.moveTo(x - offset, bounds.top);
+              this.lineTo(x - offset, oobBottom);
+              this.gridLinesX.push({ column, x: x - offset, y: bounds.top, w: 1, h: oobBottom - bounds.top });
+              this.lineStyle({ width: 1, color: colors.gridLinesOutOfBounds, alignment: 0.5, native: true });
+              this.lineTo(x - offset, bounds.bottom);
+            } else {
+              this.moveTo(x - offset, bounds.top);
+              this.lineTo(x - offset, bounds.bottom);
+              this.gridLinesX.push({ column, x: x - offset, y: bounds.top, w: 1, h: bounds.bottom - bounds.top });
+            }
+          }
         }
-        this.gridLinesX.push({ column, x: x - offset, y: bounds.top, w: 1, h: bounds.bottom - bounds.top });
       }
       size = sheets.sheet.offsets.getColumnWidth(column);
+      x += size;
       column++;
     }
+
+    // draw out of bounds (right)
+    if (oobRight !== undefined) {
+      this.lineStyle({ width: 1, color: colors.gridLinesOutOfBounds, alignment: 0.5, native: true });
+      while (x < bounds.right + size - 1) {
+        this.moveTo(x - offset, bounds.top);
+        this.lineTo(x - offset, bounds.bottom);
+        size = sheets.sheet.offsets.getColumnWidth(column);
+        x += size;
+        column++;
+      }
+    }
   }
 
   // @returns the vertical range of [rowStart, rowEnd]
@@ -103,14 +167,70 @@ export class GridLines extends Graphics {
     let row = index;
     const offset = bounds.top - position;
     let size = 0;
-    for (let y = bounds.top; y <= bounds.bottom + size - 1; y += size) {
-      // don't draw grid lines when hidden
+
+    const oobRight = outOfBoundsRight(bounds.right);
+    const oobBottom = outOfBoundsBottom(bounds.bottom);
+
+    // draw out of bounds (top)
+    this.lineStyle({ width: 1, color: colors.gridLinesOutOfBounds, alignment: 0.5, native: true });
+    let y = bounds.top;
+    // this can be optimized to start at the first row that is not out of bounds
+    while (row < 0) {
+      // this.moveTo(bounds.left, y - offset);
+      // this.lineTo(bounds.right, y - offset);
+      size = offsets.getRowHeight(row);
+      y += size;
+      row++;
+    }
+
+    // draw content
+    while (y < bounds.bottom + size - 1) {
       if (size !== 0) {
-        this.moveTo(bounds.left, y - offset);
-        this.lineTo(bounds.right, y - offset);
-        this.gridLinesY.push({ row, x: bounds.left, y: y - offset, w: bounds.right - bounds.left, h: 1 });
+        // draw out of bounds (bottom)
+        if (oobBottom && y > oobBottom) {
+          this.lineStyle({ width: 1, color: colors.gridLinesOutOfBounds, alignment: 0.5, native: true });
+          this.moveTo(bounds.left, y - offset);
+          this.lineTo(bounds.right, y - offset);
+        } else {
+          if (bounds.left < 0) {
+            // draw out of bounds (left)
+            this.lineStyle({ width: 1, color: colors.gridLinesOutOfBounds, alignment: 0.5, native: true });
+            // this.moveTo(bounds.left, y - offset);
+            this.moveTo(Math.max(bounds.left, 0), y - offset);
+
+            this.lineStyle({ width: 1, color: colors.gridLines, alignment: 0.5, native: true });
+            if (oobRight !== undefined) {
+              this.lineTo(oobRight, y - offset);
+              this.gridLinesY.push({ row, x: 0, y: y - offset, w: oobRight, h: 1 });
+
+              // draw out of bounds below
+              this.lineStyle({ width: 1, color: colors.gridLinesOutOfBounds, alignment: 0.5, native: true });
+              this.lineTo(bounds.right, y - offset);
+            } else {
+              this.lineTo(bounds.right, y - offset);
+              this.gridLinesY.push({ row, x: 0, y: y - offset, w: 1, h: 1 });
+            }
+          } else {
+            if (oobRight !== undefined) {
+              this.lineStyle({ width: 1, color: colors.gridLines, alignment: 0.5, native: true });
+              this.moveTo(bounds.left, y - offset);
+              this.lineTo(oobRight, y - offset);
+              this.gridLinesY.push({ row, x: bounds.left, y: y - offset, w: bounds.right - bounds.left, h: 1 });
+
+              // draw out of bounds below
+              this.lineStyle({ width: 1, color: colors.gridLinesOutOfBounds, alignment: 0.5, native: true });
+              this.lineTo(oobRight, y - offset);
+            } else {
+              this.lineStyle({ width: 1, color: colors.gridLines, alignment: 0.5, native: true });
+              this.moveTo(bounds.left, y - offset);
+              this.lineTo(bounds.right, y - offset);
+              this.gridLinesY.push({ row, x: bounds.left, y: y - offset, w: bounds.right - bounds.left, h: 1 });
+            }
+          }
+        }
       }
       size = offsets.getRowHeight(row);
+      y += size;
       row++;
     }
     return [index, row - 1];