1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
import Ratio from "./math/Ratio";
import { Cell, CellRef, Doc, Grid } from "./types";
import { ActiveCellSelection, PendingSelection, Selection } from "./selection";
import renderGrid, { RenderedGrid } from "./components/grid/renderGrid";
function defaultDoc(): Doc {
const defaultCells: Cell[] = Array.from({ length: 16 }, () => ({
widthRatio: new Ratio(1, 16),
}));
return {
grids: [
{
id: window.crypto.randomUUID(),
baseCellSize: 48,
baseCellWidthRatio: new Ratio(1, 16),
parts: [
{
rows: Array.from({ length: 4 }, () => ({
cells: [...defaultCells],
})),
},
],
},
{
id: window.crypto.randomUUID(),
baseCellSize: 48,
baseCellWidthRatio: new Ratio(1, 16),
parts: [
{
rows: Array.from({ length: 4 }, () => ({
cells: [...defaultCells],
})),
},
],
},
],
};
}
export default class Notive {
doc: Doc = defaultDoc();
gridsById = Object.fromEntries(
this.doc.grids.map((grid) => [grid.id, renderGrid(grid)]),
);
selection?: Selection;
pendingSelection?: Selection;
getGrid(id: string): RenderedGrid | undefined {
return this.gridsById[id];
}
selectCell(gridId: string, cellRef: CellRef) {
const previousSelection = this.selection;
this.selection = new ActiveCellSelection(gridId, cellRef);
window.dispatchEvent(
new CustomEvent("ntv:selection-changed", {
detail: { selection: this.selection, previousSelection },
}),
);
}
}
window.notive = new Notive();
|
