jeffemmett
/
folk-canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

spreadsheet

This commit is contained in:
“chrisshank” 2024-10-15 14:43:01 -07:00
parent 60930f2283
commit 32dbe887ee
1 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/spreadsheet/spreadsheet.ts
View File

@ -17,7 +17,7 @@ styles.replaceSync(`
} }
textarea { textarea {
background-color: rgba(255, 255, 255, 0.6); background-color: rgba(255, 255, 255, 0.75);
grid-column: var(--text-column, 0); grid-column: var(--text-column, 0);
grid-row: var(--text-row, 0); grid-row: var(--text-row, 0);
} }
@ -215,7 +215,8 @@ export class SpreadsheetTable extends HTMLElement {
const composedTarget = event.composedPath()[0]; const composedTarget = event.composedPath()[0];
if (composedTarget === this.#textarea) { if (composedTarget === this.#textarea) {
if (event.code === 'Escape' || (event.code === 'Enter' && event.shiftKey)) { if (event.code === 'Escape' || (event.code === 'Enter' && event.shiftKey)) {
this.#resetTextarea(); // Focusing out of the textarea will clean it up.
this.#textarea.blur();
} }
} }
return; return;
@ -266,7 +267,6 @@ export class SpreadsheetTable extends HTMLElement {
this.#textarea.value = cell.expression; this.#textarea.value = cell.expression;
this.#textarea.hidden = false; this.#textarea.hidden = false;
this.#textarea.focus(); this.#textarea.focus();
console.log();
} }
#resetTextarea() { #resetTextarea() {
@ -274,6 +274,7 @@ export class SpreadsheetTable extends HTMLElement {
this.#textarea.style.setProperty('--text-column', '0'); this.#textarea.style.setProperty('--text-column', '0');
this.#textarea.style.setProperty('--text-row', '0'); this.#textarea.style.setProperty('--text-row', '0');
this.#editedCell.expression = this.#textarea.value; this.#editedCell.expression = this.#textarea.value;
this.#textarea.value = '';
this.#editedCell.focus(); this.#editedCell.focus();
this.#textarea.hidden = true; this.#textarea.hidden = true;
this.#editedCell = null; this.#editedCell = null;
@ -352,9 +353,7 @@ export class SpreadsheetCell extends HTMLElement {
this.#dependencies.forEach((dep) => dep.removeEventListener('propagate', this)); this.#dependencies.forEach((dep) => dep.removeEventListener('propagate', this));
if (expression === '') { if (expression === '') return;
return;
}
if (!expression.includes('return ')) { if (!expression.includes('return ')) {
expression = `return ${expression}`; expression = `return ${expression}`;
@ -404,6 +403,7 @@ export class SpreadsheetCell extends HTMLElement {
#evaluate() { #evaluate() {
try { try {
this.#invalidated = false;
const args = this.#dependencies.map((dep) => dep.value); const args = this.#dependencies.map((dep) => dep.value);
const value = this.#function.apply(null, args); const value = this.#function.apply(null, args);
@ -419,10 +419,15 @@ export class SpreadsheetCell extends HTMLElement {
} }
} }
#invalidated = false;
handleEvent(event: Event) { handleEvent(event: Event) {
switch (event.type) { switch (event.type) {
case 'propagate': { case 'propagate': {
this.#evaluate(); // This deduplicates call similar to a topological sort algorithm.
if (this.#invalidated) return;
this.#invalidated = true;
queueMicrotask(() => this.#evaluate());
return; return;
} }
} }