Merge branch 'data-tables-v1' of github.com:quadratichq/quadratic int…

…o data-tables-v1
quadratichq · Jan 30, 2025 · a6f596b · a6f596b
2 parents 652cc71 + e7217cb
commit a6f596b
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 21 deletions.
diff --git a/quadratic-client/src/app/gridGL/cells/tables/Table.ts b/quadratic-client/src/app/gridGL/cells/tables/Table.ts
@@ -203,10 +203,6 @@ export class Table extends Container {
     return this.header.getSortDialogPosition();
   }
 
-  getColumnHeaderLines(): { y0: number; y1: number; lines: number[] } {
-    return this.header.getColumnHeaderLines();
-  }
-
   // resizes an image or html table to its overlapping size
   resize(width: number, height: number) {
     this.tableBounds.width = width;

diff --git a/quadratic-client/src/app/gridGL/cells/tables/TableColumnHeaders.ts b/quadratic-client/src/app/gridGL/cells/tables/TableColumnHeaders.ts
@@ -184,9 +184,6 @@ export class TableColumnHeaders extends Container {
 
   pointerMove(world: Point): boolean {
     const adjustedWorld = world.clone();
-    // need to adjust the y position in the case of sticky headers
-    // adjustedWorld.y -= this.y ? this.y - this.table.y : 0;
-    // TDOO!~!!!
     const found = this.columns.children.find((column) => column.pointerMove(adjustedWorld));
     if (!found) {
       this.tableCursor = undefined;

diff --git a/...grid/sheet/TableColumnHeadersGridLines.ts → ...lls/tables/TableColumnHeadersGridLines.ts b/...grid/sheet/TableColumnHeadersGridLines.ts → ...lls/tables/TableColumnHeadersGridLines.ts
@@ -1,18 +1,17 @@
 //! Draws the grid lines for column headers when they are sticky.
 
-import type { Table } from '@/app/gridGL/cells/tables/Table';
+import type { TableHeader } from '@/app/gridGL/cells/tables/TableHeader';
 import { pixiApp } from '@/app/gridGL/pixiApp/PixiApp';
-import { pixiAppSettings } from '@/app/gridGL/pixiApp/PixiAppSettings';
 import { getCSSVariableTint } from '@/app/helpers/convertColor';
 import { sharedEvents } from '@/shared/sharedEvents';
 import { Graphics } from 'pixi.js';
 
 export class TableColumnHeadersGridLines extends Graphics {
-  private table: Table;
+  private header: TableHeader;
 
-  constructor(table: Table) {
+  constructor(header: TableHeader) {
     super();
-    this.table = table;
+    this.header = header;
 
     sharedEvents.on('changeThemeAccentColor', this.update);
   }
@@ -24,13 +23,15 @@ export class TableColumnHeadersGridLines extends Graphics {
 
   update = () => {
     this.clear();
-    if (pixiAppSettings.showGridLines && pixiApp.gridLines?.visible) {
-      const { y0, y1, lines } = this.table.getColumnHeaderLines();
+    if (pixiApp.gridLines?.visible) {
+      const tableLines = this.header.getColumnHeaderLines();
+      if (!tableLines) return;
+      const { y0, y1, lines } = tableLines;
       const currentLineStyle = pixiApp.gridLines.currentLineStyle;
       if (!currentLineStyle) return;
 
       lines.forEach((line, index) => {
-        if (pixiApp.cellsSheet().tables.isActive(this.table) && (index === 0 || index === lines.length - 1)) {
+        if (index === 0 || index === lines.length - 1) {
           this.lineStyle({
             color: getCSSVariableTint('primary'),
             width: 2,
@@ -42,7 +43,6 @@ export class TableColumnHeadersGridLines extends Graphics {
 
         this.moveTo(line, y0).lineTo(line, y1);
       });
-
       this.lineStyle(currentLineStyle);
       this.moveTo(lines[0], y0).lineTo(lines[lines.length - 1], y0);
       this.moveTo(lines[0], y1).lineTo(lines[lines.length - 1], y1);

diff --git a/quadratic-client/src/app/gridGL/cells/tables/TableHeader.ts b/quadratic-client/src/app/gridGL/cells/tables/TableHeader.ts
@@ -1,13 +1,14 @@
-import { TableColumnHeadersGridLines } from '@/app/grid/sheet/TableColumnHeadersGridLines';
 import type { Table } from '@/app/gridGL/cells/tables/Table';
 import { TableColumnHeaders } from '@/app/gridGL/cells/tables/TableColumnHeaders';
+import { TableColumnHeadersGridLines } from '@/app/gridGL/cells/tables/TableColumnHeadersGridLines';
 import { TableName } from '@/app/gridGL/cells/tables/TableName';
 import type { TablePointerDownResult } from '@/app/gridGL/cells/tables/Tables';
 import type { JsCoordinate } from '@/app/quadratic-core-types';
 import { Container, type Point, type Rectangle } from 'pixi.js';
 
 export class TableHeader extends Container {
-  private table: Table;
+  table: Table;
+
   private tableName: TableName;
   private columnHeaders: TableColumnHeaders;
   private columnHeadersGridLines: TableColumnHeadersGridLines;
@@ -22,7 +23,7 @@ export class TableHeader extends Container {
     this.table = table;
     this.tableName = this.addChild(new TableName(table));
     this.columnHeaders = this.addChild(new TableColumnHeaders(table));
-    this.columnHeadersGridLines = this.addChild(new TableColumnHeadersGridLines(table));
+    this.columnHeadersGridLines = this.addChild(new TableColumnHeadersGridLines(this));
     this.update(false);
   }
 
@@ -49,16 +50,20 @@ export class TableHeader extends Container {
         if (this.table.codeCell.show_columns) {
           this.columnHeaders.visible = true;
           this.columnHeaders.y = this.table.sheet.offsets.getRowHeight(this.table.codeCell.y);
+          this.columnHeadersGridLines.y = this.columnHeaders.y;
         } else {
+          this.columnHeadersGridLines.visible = false;
           this.columnHeaders.visible = false;
         }
       } else {
         this.tableName.visible = false;
         if (this.table.codeCell.show_columns) {
           this.columnHeaders.visible = true;
           this.columnHeaders.y = 0;
+          this.columnHeadersGridLines.y = 0;
         } else {
           this.columnHeaders.visible = false;
+          this.columnHeadersGridLines.visible = false;
         }
       }
     }
@@ -75,8 +80,7 @@ export class TableHeader extends Container {
         this.height;
     }
 
-    // todo...
-    // this.columnHeadersGridLines.update();
+    this.columnHeadersGridLines.update();
   }
 
   toGrid() {