Skip to content

Better TypeScript support for CellMetadata #255

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
texodus merged 1 commit into from
Feb 4, 2026
Merged

Better TypeScript support for CellMetadata #255

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions src/ts/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,6 @@
// ┃ * [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). * ┃
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

// Singleton `WeakMap`s to store metadata for td/th elements, as well as the
// datagrids themselves for each `<perspective-viewer>`
export const METADATA_MAP = new WeakMap();

// Output runtime debug info like FPS.
export const DEBUG = true;

Expand Down
8 changes: 4 additions & 4 deletions src/ts/events.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@
// ┃ * [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). * ┃
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

import { METADATA_MAP } from "./constants";
import { RegularVirtualTableViewModel } from "./scroll_panel";
import { throttle_tag } from "./utils";
import { CellMetadata } from "./types";
import { METADATA_MAP } from "./view_model";

/**
* When enabled, override iOS overscroll behavior by emulating scroll position
Expand Down Expand Up @@ -180,7 +180,7 @@ export class RegularViewEventModel extends RegularVirtualTableViewModel {
}

const metadata = METADATA_MAP.get(element);
if (is_resize) {
if (is_resize && metadata) {
event.stopImmediatePropagation();

// Clear column size data
Expand Down Expand Up @@ -215,7 +215,7 @@ export class RegularViewEventModel extends RegularVirtualTableViewModel {
: this.table_model.body.cells) {
for (const td of event.shiftKey
? row
: [row[metadata._virtual_x]]) {
: [row[metadata.virtual_x!]]) {
if (!td) {
continue;
}
Expand Down Expand Up @@ -250,7 +250,7 @@ export class RegularViewEventModel extends RegularVirtualTableViewModel {
}

const metadata = METADATA_MAP.get(element);
if (is_resize) {
if (is_resize && metadata) {
this._on_resize_column(
event,
element as HTMLTableCellElement,
Expand Down
93 changes: 52 additions & 41 deletions src/ts/regular-table.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,16 @@
// ┃ * [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). * ┃
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

import { METADATA_MAP } from "./constants";
import { RegularViewEventModel } from "./events";
import { RegularTableViewModel } from "./table";
import { DataListener, SetDataListenerOptions } from "./types";
import {
CellMetadata,
DataListener,
FPSRecord,
SetDataListenerOptions,
} from "./types";
import { get_draw_fps } from "./utils";
import { METADATA_MAP } from "./view_model";

type VirtualMode = "both" | "horizontal" | "vertical" | "none";

Expand Down Expand Up @@ -55,26 +60,6 @@ export class RegularTableElement extends RegularViewEventModel {
}
}

/**
* Reset the viewport of this regular table.
*/
private _reset_viewport(): void {
this._start_row = undefined;
this._end_row = undefined;
this._start_col = undefined;
this._end_col = undefined;
}

/**
* Reset the scroll position of this regular table back to the origin.
*/
private _reset_scroll(): void {
this._column_sizes.indices = [];
this.scrollTop = 0;
this.scrollLeft = 0;
this._reset_viewport();
}

/**
* Reset column autosizing, such that column sizes will be recalculated
* on the next draw() call.
Expand Down Expand Up @@ -202,30 +187,38 @@ export class RegularTableElement extends RegularViewEventModel {
* coordinates-like object to refer to metadata by logical position.
* @returns {MetaData} The metadata associated with the element.
*/
getMeta(element: HTMLElement | any): any {
if (typeof element === "undefined") {
getMeta(element?: HTMLElement | CellMetadata): CellMetadata | undefined {
if (element === undefined) {
return;
} else if (element instanceof HTMLElement) {
return METADATA_MAP.get(element);
} else if (element.row_header_x >= 0) {
if (element.row_header_x < this._view_cache.row_headers_length) {
} else if (
"row_header_x" in element &&
element.row_header_x &&
element.row_header_x >= 0
) {
if (element.row_header_x! < this._view_cache.row_headers_length) {
const td = this.table_model.body._fetch_cell(
element.y,
element.row_header_x,
element.y!,
element.row_header_x!,
);
return this.getMeta(td);
}
} else if (element.column_header_y >= 0) {
} else if (
"column_header_y" in element &&
element.column_header_y! >= 0
) {
if (
element.column_header_y < this._view_cache.column_headers_length
element.column_header_y! <
this._view_cache.column_headers_length
) {
const td = this.table_model.body._fetch_cell(
element.column_header_y,
element.y,
const td = this.table_model.header._fetch_cell(
element.column_header_y!,
element.x!,
);
return this.getMeta(td);
}
} else {
} else if ("dx" in element) {
return this.getMeta(
this.table_model.body._fetch_cell(
element.dy,
Expand Down Expand Up @@ -253,13 +246,7 @@ export class RegularTableElement extends RegularViewEventModel {
* @returns {Performance} Performance data aggregated since the last
* call to `getDrawFPS()`.
*/
getDrawFPS(): {
avg: number;
real_fps: number;
virtual_fps: number;
num_frames: number;
elapsed: number;
} {
getDrawFPS(): FPSRecord {
return get_draw_fps();
}

Expand Down Expand Up @@ -362,3 +349,27 @@ export class RegularTableElement extends RegularViewEventModel {
if (document.createElement("regular-table").constructor === HTMLElement) {
window.customElements.define("regular-table", RegularTableElement);
}

// Custom Elements extensions
declare global {
namespace JSX {
interface IntrinsicElements {
"regular-table": RegularTableElement;
}
}
}

declare global {
interface Document {
createElement(
tagName: "regular-table",
options?: ElementCreationOptions,
): RegularTableElement;
querySelector<E extends Element = Element>(selectors: string): E | null;
querySelector(selectors: "regular-table"): RegularTableElement | null;
}

interface CustomElementRegistry {
get(tagName: "regular-table"): typeof RegularTableElement;
}
}
19 changes: 8 additions & 11 deletions src/ts/table.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -257,9 +257,10 @@ abstract class RegularTableViewModelBase {
x0: number,
): Promise<FetchResult> {
let missing_cidx = Math.max(dcidx + Math.floor(x0), 0);
viewport.start_col = missing_cidx;
const new_viewport = structuredClone(viewport);
new_viewport.start_col = missing_cidx;
this._calculateViewportExtension(
viewport,
new_viewport,
view_state,
container_width,
num_columns,
Expand All @@ -268,10 +269,10 @@ abstract class RegularTableViewModelBase {
);

const new_col = await view(
Math.floor(viewport.start_col),
Math.floor(viewport.start_row),
Math.ceil(viewport.end_col),
Math.ceil(viewport.end_row),
Math.floor(new_viewport.start_col),
Math.floor(new_viewport.start_row),
Math.ceil(new_viewport.end_col),
Math.ceil(new_viewport.end_row),
);

let column_header_merge_depth: number | undefined;
Expand All @@ -289,7 +290,7 @@ abstract class RegularTableViewModelBase {
return { column_header_merge_depth, merge_headers };
}

viewport.end_col = viewport.start_col + new_col.data.length;
viewport.end_col = new_viewport.start_col + new_col.data.length;
for (let i = 0; i < new_col.data.length; i++) {
view_response.data[dcidx + i] = new_col.data[i];
if (new_col.metadata && view_response.metadata) {
Expand Down Expand Up @@ -415,10 +416,6 @@ export class RegularTableViewModel extends RegularTableViewModelBase {
}
}

clearWidthStyles() {
this._columnWidthStyleSheet?.replaceSync("");
}

/**
* Updates column width styles for all columns using adoptedStyleSheets.
* Generates CSS rules with :nth-child selectors for both auto-sized and
Expand Down
26 changes: 20 additions & 6 deletions src/ts/tbody.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
import {
BodyDrawResult,
CellMetadata,
CellMetadataBuilder,
CellScalar,
ColumnState,
ViewState,
Expand All @@ -32,7 +33,7 @@ export class RegularBodyViewModel extends ViewModel {
{ column_name }: ColumnState,
{ ridx_offset }: ViewState,
size_key: number,
): { td: HTMLTableCellElement; metadata: CellMetadata } {
): { td: HTMLTableCellElement; metadata: CellMetadataBuilder } {
const td = this._get_cell(tagName, ridx, cidx);
const metadata = this._get_or_create_metadata(td);
metadata.y = ridx + Math.floor(ridx_offset);
Expand Down Expand Up @@ -83,7 +84,7 @@ export class RegularBodyViewModel extends ViewModel {
column_data_listener_metadata,
} = column_state;
let { row_height } = view_state;
let metadata: CellMetadata | undefined;
let metadata: CellMetadataBuilder | undefined;
const ridx_offset: number[] = [];
const tds: Array<{ td: HTMLTableCellElement; metadata: CellMetadata }> =
[];
Expand All @@ -103,7 +104,10 @@ export class RegularBodyViewModel extends ViewModel {

for (const val of column_data) {
let obj:
| { td: HTMLTableCellElement; metadata: CellMetadata }
| {
td: HTMLTableCellElement;
metadata: CellMetadataBuilder;
}
| undefined;
if (th) {
const valArray = val as CellScalar[];
Expand All @@ -113,6 +117,7 @@ export class RegularBodyViewModel extends ViewModel {
ridx - ridx_off_i,
cidx_i,
);

const prev_row_metadata =
this._get_or_create_metadata(prev_row);

Expand Down Expand Up @@ -153,11 +158,13 @@ export class RegularBodyViewModel extends ViewModel {
view_state,
i,
);

const td = obj.td;
const meta = obj.metadata;
td.style.display = "";
td.removeAttribute("rowspan");
td.removeAttribute("colspan");
meta.type = "row_header";
meta.row_header = valArray;
meta.row_header_x = i;
meta.y0 = y0_floor;
Expand All @@ -168,7 +175,10 @@ export class RegularBodyViewModel extends ViewModel {
}
ridx_offset[i] = 1;
cidx_offset[ridx] = 1;
tds[i] = obj;
tds[i] = obj as {
td: HTMLTableCellElement;
metadata: CellMetadata;
};
}
} else {
obj = this._draw_td(
Expand All @@ -185,7 +195,8 @@ export class RegularBodyViewModel extends ViewModel {
meta.user = column_data_listener_metadata[ridx];
}

meta.x = x_floor;
meta.type = "body";
meta.x = x_floor || 0;
meta.x1 = x1_ceil;
meta.row_header = row_headers?.[ridx] || [];
meta.y0 = y0_floor;
Expand All @@ -197,7 +208,10 @@ export class RegularBodyViewModel extends ViewModel {
meta.x0 = x0_floor;
}

tds[0] = obj;
tds[0] = obj as {
td: HTMLTableCellElement;
metadata: CellMetadata;
};
}

ridx++;
Expand Down
Loading