From 3b6975b9db953ed94314dd787cca26e4da3a4af9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= Date: Fri, 15 Nov 2024 15:15:30 -0800 Subject: [PATCH] add graph projection demo for spreadsheets --- demo/event-propagator.html | 4 +- demo/index.html | 2 + demo/spreadsheet-graph.html | 219 +++++++++++++++++++++++++++++++++ deno.json | 2 +- src/spreadsheet/spreadsheet.ts | 11 +- 5 files changed, 231 insertions(+), 7 deletions(-) create mode 100644 demo/spreadsheet-graph.html diff --git a/demo/event-propagator.html b/demo/event-propagator.html index 9563c0b..b0927fc 100644 --- a/demo/event-propagator.html +++ b/demo/event-propagator.html @@ -29,9 +29,7 @@ - Hello World + Hello World Ink
  • Maps
  • Music
    • +
  • Perf
  • Shapes
  • Spreadsheet
    • +
  • Spreadsheet Graph
    • diff --git a/demo/spreadsheet-graph.html b/demo/spreadsheet-graph.html new file mode 100644 index 0000000..1944ae4 --- /dev/null +++ b/demo/spreadsheet-graph.html @@ -0,0 +1,219 @@ + + + + + + Spreadsheet Graph + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/deno.json b/deno.json index 5d57ea8..6a68624 100644 --- a/deno.json +++ b/deno.json @@ -2,7 +2,7 @@ "tasks": { "dev": "vite demo", "build": "vite build demo --base=/folk-canvas", - "preview": "deno run build && vite preview demo" + "preview": "vite build demo && vite preview demo" }, "imports": { "perfect-arrows": "npm:perfect-arrows@^0.3.7", diff --git a/src/spreadsheet/spreadsheet.ts b/src/spreadsheet/spreadsheet.ts index fe73d24..e3f874b 100644 --- a/src/spreadsheet/spreadsheet.ts +++ b/src/spreadsheet/spreadsheet.ts @@ -24,6 +24,7 @@ textarea { background-color: rgba(255, 255, 255, 0.75); grid-column: var(--text-column, 0); grid-row: var(--text-row, 0); + z-index: 11; } s-columns { @@ -105,7 +106,7 @@ s-columns, s-rows, s-body { ::slotted(s-cell:focus) { outline: 2px solid #1b73e8; - z-index: 2; + z-index: 4; } `); @@ -151,9 +152,9 @@ export class SpreadsheetTable extends HTMLElement { static tagName = 's-table'; static register() { + customElements.define(this.tagName, this); SpreadsheetCell.register(); SpreadsheetHeader.register(); - customElements.define(this.tagName, this); } #shadow = this.attachShadow({ mode: 'open' }); @@ -225,6 +226,10 @@ export class SpreadsheetTable extends HTMLElement { this.#range = range; } + getCell(column: string, row: number | string): SpreadsheetCell | null { + return this.querySelector(`s-cell[column="${column}"][row="${row}"]`); + } + handleEvent(event: Event) { switch (event.type) { case 'keydown': { @@ -454,7 +459,7 @@ export class SpreadsheetCell extends HTMLElement { } #getCell(column: string, row: number | string): SpreadsheetCell | null { - return document.querySelector(`s-cell[column="${column}"][row="${row}"]`); + return this.parentElement!.querySelector(`s-cell[column="${column}"][row="${row}"]`); } get cellAbove() {