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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
import Ratio from "./math/Ratio";
import { Cell, CellRef, Doc, Grid, mapRowsInRange } from "./types";
import { ActiveCellSelection, Selection } from "./selection";
import renderGrid, {
getRenderedCell,
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: 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: 2 }, () => ({
cells: [...defaultCells],
})),
},
{
rows: Array.from({ length: 2 }, () => ({
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:selectionchange"));
}
subdivideSelection(subdivisions: number) {
const selection = this.selection;
if (!selection) return;
const newDoc = mapRowsInRange(
this.doc,
selection.gridId,
selection.startCellRef(),
selection.endCellRef(),
(row, rowRef) => {
return row;
},
);
}
}
window.notive = new Notive();
|
