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

style spreadsheet cells properly

This commit is contained in:
“chrisshank” 2024-11-08 15:21:23 -08:00
parent a061cb13b3
commit 49ef97508d
2 changed files with 50 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
demo/spreadsheet.html
View File

@ -14,15 +14,10 @@
position: relative; position: relative;
margin: 0; margin: 0;
} }
s-table {
height: 100%;
width: 100%;
}
</style> </style>
</head> </head>
<body> <body>
<fc-geometry x="50" y="50" height="300" width="500"> <fc-geometry x="50" y="50" width="500">
<s-table> <s-table>
<s-cell column="A" row="1" expression="1"></s-cell> <s-cell column="A" row="1" expression="1"></s-cell>
<s-cell column="B" row="1"></s-cell> <s-cell column="B" row="1"></s-cell>
@ -129,12 +124,10 @@
<script type="module"> <script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
import { SpreadsheetTable, SpreadsheetHeader, SpreadsheetCell } from '../src/spreadsheet/spreadsheet.ts'; import { SpreadsheetTable } from '../src/spreadsheet/spreadsheet.ts';
FolkGeometry.register(); FolkGeometry.register();
SpreadsheetTable.register(); SpreadsheetTable.register();
SpreadsheetHeader.register();
SpreadsheetCell.register();
</script> </script>
</body> </body>
</html> </html>

55
src/spreadsheet/spreadsheet.ts
View File

@ -90,6 +90,7 @@ s-columns, s-rows, s-body {
} }
::slotted(s-cell) { ::slotted(s-cell) {
box-sizing: border-box;
align-items: center; align-items: center;
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
display: flex; display: flex;
@ -140,10 +141,18 @@ export function templateCells(numberOfRows: number, numberOfColumns: number, exp
return cells.join('\n'); return cells.join('\n');
} }
declare global {
interface HTMLElementTagNameMap {
's-table': SpreadsheetTable;
}
}
export class SpreadsheetTable extends HTMLElement { export class SpreadsheetTable extends HTMLElement {
static tagName = 's-table'; static tagName = 's-table';
static register() { static register() {
SpreadsheetCell.register();
SpreadsheetHeader.register();
customElements.define(this.tagName, this); customElements.define(this.tagName, this);
} }
@ -168,14 +177,33 @@ export class SpreadsheetTable extends HTMLElement {
connectedCallback() { connectedCallback() {
this.#shadow.textContent = ''; this.#shadow.textContent = '';
const cells = this.querySelector('s-cell'); const columnNames = new Set();
const rowNames = new Set();
const columnHeaders = Array.from({ length: 10 }) const cells = this.querySelectorAll('s-cell');
.map((_, i) => `<s-header column="${getColumnName(i)}">${getColumnName(i)}</s-header>`)
.join(''); cells.forEach((cell) => {
const rowHeaders = Array.from({ length: 10 }) columnNames.add(cell.column);
.map((_, i) => `<s-header row="${i + 1}">${i + 1}</s-header>`) rowNames.add(cell.row);
.join(''); });
const columns = Array.from({ length: columnNames.size }).map((_, i) => getColumnName(i));
const rows = Array.from({ length: rowNames.size }).map((_, i) => i + 1);
const columnHeaders = columns.map((column) => `<s-header column="${column}">${column}</s-header>`).join('\n');
const rowHeaders = rows.map((row) => `<s-header row="${row}">${row}</s-header>`).join('\n');
const style = `<style>
${columns
.map(
(column) =>
`s-header[column="${column}"], ::slotted(s-cell[column="${column}"]) { grid-column: ${
getColumnIndex(column) + 1
}; }`
)
.join('\n')}
${rows.map((row) => `s-header[row="${row}"], ::slotted(s-cell[row="${row}"]) { grid-row: ${row}; }`).join('\n')}
</style>`;
this.#shadow.innerHTML = ` this.#shadow.innerHTML = `
<s-header empty></s-header> <s-header empty></s-header>
@ -183,6 +211,7 @@ export class SpreadsheetTable extends HTMLElement {
<s-rows>${rowHeaders}</s-rows> <s-rows>${rowHeaders}</s-rows>
<s-body><slot></slot></s-body> <s-body><slot></slot></s-body>
<textarea hidden></textarea> <textarea hidden></textarea>
${style}
`; `;
this.#textarea = this.#shadow.querySelector('textarea')!; this.#textarea = this.#shadow.querySelector('textarea')!;
@ -300,6 +329,12 @@ export class SpreadsheetTable extends HTMLElement {
} }
} }
declare global {
interface HTMLElementTagNameMap {
's-header': SpreadsheetHeader;
}
}
export class SpreadsheetHeader extends HTMLElement { export class SpreadsheetHeader extends HTMLElement {
static tagName = 's-header'; static tagName = 's-header';
@ -324,6 +359,12 @@ export class SpreadsheetHeader extends HTMLElement {
} }
} }
declare global {
interface HTMLElementTagNameMap {
's-cell': SpreadsheetCell;
}
}
export class SpreadsheetCell extends HTMLElement { export class SpreadsheetCell extends HTMLElement {
static tagName = 's-cell'; static tagName = 's-cell';