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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
import Ratio from "./math/Ratio";
import { Cell, CellRef, Doc, Grid } from "./types";
import { ActiveCellSelection, Selection } from "./selection";
import renderGrid, { RenderedGrid } from "./components/grid/renderGrid";
import cellAtCoord from "./components/grid/cellAtCoord";
function defaultDoc(): Doc {
const defaultCells: Cell[] = Array.from({ length: 16 }, () => ({
widthRatio: new Ratio(1, 16),
}));
return {
grids: [
{
id: window.crypto.randomUUID(),
baseCellSize: 42,
baseCellWidthRatio: new Ratio(1, 16),
parts: [
{
rows: Array.from({ length: 4 }, () => ({
cells: [...defaultCells],
})),
},
],
},
{
id: window.crypto.randomUUID(),
baseCellSize: 42,
baseCellWidthRatio: new Ratio(1, 16),
parts: [
{
rows: Array.from({ length: 4 }, () => ({
cells: [...defaultCells],
})),
},
],
},
],
};
}
export default class Notive {
#doc: Doc = defaultDoc();
get doc() {
return this.#doc;
}
#gridsById = Object.fromEntries(
this.#doc.grids.map((grid) => [grid.id, renderGrid(grid)]),
);
getGrid(id: string): RenderedGrid | undefined {
return this.#gridsById[id];
}
#selection?: Selection;
get selection() {
return this.#selection;
}
#pendingSelection?: Selection;
get pendingSelection() {
return this.#pendingSelection;
}
selectCell(gridId: string, cellRef: CellRef) {
this.#selection = new ActiveCellSelection(gridId, cellRef);
this.#dispatchSelectionChanged();
}
startSelecting(gridId: string, cellRef: CellRef) {
this.#pendingSelection = new ActiveCellSelection(gridId, cellRef);
this.#dispatchSelectionChanged();
}
extendSelection(cellRef: CellRef) {
const newSelection = this.pendingSelection?.extend(cellRef);
if (newSelection !== this.pendingSelection) {
this.#pendingSelection = newSelection;
this.#dispatchSelectionChanged();
}
}
finishSelecting() {
this.#selection = this.pendingSelection;
this.#pendingSelection = undefined;
this.#dispatchSelectionChanged();
}
#dispatchSelectionChanged() {
window.dispatchEvent(new CustomEvent("ntv:selection-changed"));
}
}
window.notive = new Notive();
|
