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() {