From e7217cba19eb6be7d9d2e472e4213fc6de6f3bb1 Mon Sep 17 00:00:00 2001 From: David Figatner Date: Thu, 30 Jan 2025 12:31:10 -0800 Subject: [PATCH] fix column lines in floating column names --- .../src/app/gridGL/cells/tables/Table.ts | 4 ---- .../gridGL/cells/tables/TableColumnHeaders.ts | 3 --- .../tables}/TableColumnHeadersGridLines.ts | 18 +++++++++--------- .../src/app/gridGL/cells/tables/TableHeader.ts | 14 +++++++++----- 4 files changed, 18 insertions(+), 21 deletions(-) rename quadratic-client/src/app/{grid/sheet => gridGL/cells/tables}/TableColumnHeadersGridLines.ts (72%) diff --git a/quadratic-client/src/app/gridGL/cells/tables/Table.ts b/quadratic-client/src/app/gridGL/cells/tables/Table.ts index 821a3e53d2..ebed3da186 100644 --- 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 index 569ba6c179..e44c6f0217 100644 --- 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/quadratic-client/src/app/grid/sheet/TableColumnHeadersGridLines.ts b/quadratic-client/src/app/gridGL/cells/tables/TableColumnHeadersGridLines.ts similarity index 72% rename from quadratic-client/src/app/grid/sheet/TableColumnHeadersGridLines.ts rename to quadratic-client/src/app/gridGL/cells/tables/TableColumnHeadersGridLines.ts index 1780e20464..9e84693e88 100644 --- a/quadratic-client/src/app/grid/sheet/TableColumnHeadersGridLines.ts +++ b/quadratic-client/src/app/gridGL/cells/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 index 67a079f6b8..75a959b8e9 100644 --- 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,7 +50,9 @@ 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 { @@ -57,8 +60,10 @@ export class TableHeader extends Container { 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() {