@dxos/lit-grid 0.6.12 → 0.6.13-main.09887cd
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/dx-grid-axis-resize-handle.d.ts +16 -0
- package/dist/src/dx-grid-axis-resize-handle.d.ts.map +1 -0
- package/dist/src/dx-grid-axis-resize-handle.js +96 -0
- package/dist/src/dx-grid-axis-resize-handle.js.map +1 -0
- package/dist/src/dx-grid.d.ts +117 -0
- package/dist/src/dx-grid.d.ts.map +1 -0
- package/dist/src/dx-grid.js +1070 -0
- package/dist/src/dx-grid.js.map +1 -0
- package/dist/src/dx-grid.lit-stories.d.ts +42 -0
- package/dist/src/dx-grid.lit-stories.d.ts.map +1 -0
- package/dist/src/dx-grid.lit-stories.js +166 -0
- package/dist/src/dx-grid.lit-stories.js.map +1 -0
- package/dist/src/index.d.ts +3 -0
- package/dist/src/index.d.ts.map +1 -0
- package/dist/src/index.js +6 -0
- package/dist/src/index.js.map +1 -0
- package/dist/src/types.d.ts +110 -0
- package/dist/src/types.d.ts.map +1 -0
- package/dist/src/types.js +44 -0
- package/dist/src/types.js.map +1 -0
- package/dist/src/util.d.ts +9 -0
- package/dist/src/util.d.ts.map +1 -0
- package/dist/src/util.js +19 -0
- package/dist/src/util.js.map +1 -0
- package/dist/types/src/dx-grid-axis-resize-handle.d.ts +16 -0
- package/dist/types/src/dx-grid-axis-resize-handle.d.ts.map +1 -0
- package/dist/types/src/dx-grid-axis-resize-handle.js +96 -0
- package/dist/types/src/dx-grid-axis-resize-handle.js.map +1 -0
- package/dist/types/src/dx-grid.d.ts +95 -61
- package/dist/types/src/dx-grid.d.ts.map +1 -1
- package/dist/types/src/dx-grid.js +1070 -0
- package/dist/types/src/dx-grid.js.map +1 -0
- package/dist/types/src/dx-grid.lit-stories.d.ts +27 -2
- package/dist/types/src/dx-grid.lit-stories.d.ts.map +1 -1
- package/dist/types/src/dx-grid.lit-stories.js +166 -0
- package/dist/types/src/dx-grid.lit-stories.js.map +1 -0
- package/dist/types/src/index.js +6 -0
- package/dist/types/src/index.js.map +1 -0
- package/dist/types/src/types.d.ts +102 -1
- package/dist/types/src/types.d.ts.map +1 -1
- package/dist/types/src/types.js +44 -0
- package/dist/types/src/types.js.map +1 -0
- package/dist/types/src/util.d.ts +9 -0
- package/dist/types/src/util.d.ts.map +1 -0
- package/dist/types/src/util.js +19 -0
- package/dist/types/src/util.js.map +1 -0
- package/package.json +5 -6
- package/src/dx-grid-axis-resize-handle.ts +87 -0
- package/src/dx-grid.lit-stories.ts +148 -21
- package/src/dx-grid.pcss +72 -68
- package/src/dx-grid.ts +934 -329
- package/src/types.ts +139 -1
- package/src/util.ts +28 -0
- package/dist/lib/browser/index.mjs +0 -578
- package/dist/lib/browser/index.mjs.map +0 -7
- package/dist/lib/browser/meta.json +0 -1
|
@@ -1,578 +0,0 @@
|
|
|
1
|
-
// packages/ui/lit-grid/src/dx-grid.ts
|
|
2
|
-
import { LitElement, html } from "lit";
|
|
3
|
-
import { customElement, state, property, eventOptions } from "lit/decorators.js";
|
|
4
|
-
import { ref, createRef } from "lit/directives/ref.js";
|
|
5
|
-
|
|
6
|
-
// packages/ui/lit-grid/src/types.ts
|
|
7
|
-
var DxAxisResize = class extends Event {
|
|
8
|
-
constructor(props) {
|
|
9
|
-
super("dx-axis-resize");
|
|
10
|
-
this.axis = props.axis;
|
|
11
|
-
this.index = props.index;
|
|
12
|
-
this.size = props.size;
|
|
13
|
-
}
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
// packages/ui/lit-grid/src/dx-grid.ts
|
|
17
|
-
function _ts_decorate(decorators, target, key, desc) {
|
|
18
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
19
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
20
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
21
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
22
|
-
}
|
|
23
|
-
var gap = 1;
|
|
24
|
-
var resizeTolerance = 8;
|
|
25
|
-
var overscanCol = 1;
|
|
26
|
-
var overscanRow = 1;
|
|
27
|
-
var sizeColMin = 32;
|
|
28
|
-
var sizeColMax = 1024;
|
|
29
|
-
var sizeRowMin = 16;
|
|
30
|
-
var sizeRowMax = 1024;
|
|
31
|
-
var separator = ",";
|
|
32
|
-
var colToA1Notation = (col) => {
|
|
33
|
-
return (col >= 26 ? String.fromCharCode("A".charCodeAt(0) + Math.floor(col / 26) - 1) : "") + String.fromCharCode("A".charCodeAt(0) + col % 26);
|
|
34
|
-
};
|
|
35
|
-
var rowToA1Notation = (row) => {
|
|
36
|
-
return `${row + 1}`;
|
|
37
|
-
};
|
|
38
|
-
var localChId = (c0) => `ch--${c0}`;
|
|
39
|
-
var localRhId = (r0) => `rh--${r0}`;
|
|
40
|
-
var getPage = (axis, event) => axis === "col" ? event.pageX : event.pageY;
|
|
41
|
-
var DxGrid = class extends LitElement {
|
|
42
|
-
constructor() {
|
|
43
|
-
super(...arguments);
|
|
44
|
-
this.rowDefault = {
|
|
45
|
-
size: 32
|
|
46
|
-
};
|
|
47
|
-
this.columnDefault = {
|
|
48
|
-
size: 180
|
|
49
|
-
};
|
|
50
|
-
this.rows = {};
|
|
51
|
-
this.columns = {};
|
|
52
|
-
this.cells = {};
|
|
53
|
-
//
|
|
54
|
-
// `pos`, short for ‘position’, is the position in pixels of the viewport from the origin.
|
|
55
|
-
//
|
|
56
|
-
this.posInline = 0;
|
|
57
|
-
this.posBlock = 0;
|
|
58
|
-
//
|
|
59
|
-
// `size` (when not suffixed with ‘row’ or ‘col’, see above) is the size in pixels of the viewport.
|
|
60
|
-
//
|
|
61
|
-
this.sizeInline = 0;
|
|
62
|
-
this.sizeBlock = 0;
|
|
63
|
-
//
|
|
64
|
-
// `overscan` is the amount in pixels to offset the grid content due to the number of overscanned columns or rows.
|
|
65
|
-
//
|
|
66
|
-
this.overscanInline = 0;
|
|
67
|
-
this.overscanBlock = 0;
|
|
68
|
-
//
|
|
69
|
-
// `bin`, not short for anything, is the range in pixels within which virtualization does not need to reassess.
|
|
70
|
-
//
|
|
71
|
-
this.binInlineMin = 0;
|
|
72
|
-
this.binInlineMax = this.colSize(0);
|
|
73
|
-
this.binBlockMin = 0;
|
|
74
|
-
this.binBlockMax = this.rowSize(0);
|
|
75
|
-
//
|
|
76
|
-
// `vis`, short for ‘visible’, is the range in numeric index of the columns or rows which should be rendered within
|
|
77
|
-
// the viewport. These start with naïve values that are updated before first contentful render.
|
|
78
|
-
//
|
|
79
|
-
this.visColMin = 0;
|
|
80
|
-
this.visColMax = 1;
|
|
81
|
-
this.visRowMin = 0;
|
|
82
|
-
this.visRowMax = 1;
|
|
83
|
-
//
|
|
84
|
-
// `template` is the rendered value of `grid-{axis}-template`.
|
|
85
|
-
//
|
|
86
|
-
this.templateColumns = `${this.colSize(0)}px`;
|
|
87
|
-
this.templateRows = `${this.rowSize(0)}px`;
|
|
88
|
-
//
|
|
89
|
-
// Resize state and handlers
|
|
90
|
-
//
|
|
91
|
-
this.colSizes = {};
|
|
92
|
-
this.rowSizes = {};
|
|
93
|
-
this.resizing = null;
|
|
94
|
-
this.handlePointerDown = (event) => {
|
|
95
|
-
const actionEl = event.target?.closest("[data-dx-grid-action]");
|
|
96
|
-
const action = actionEl?.getAttribute("data-dx-grid-action");
|
|
97
|
-
if (action) {
|
|
98
|
-
if (action.startsWith("resize")) {
|
|
99
|
-
const [resize, index] = action.split(",");
|
|
100
|
-
const [_, axis] = resize.split("-");
|
|
101
|
-
this.resizing = {
|
|
102
|
-
axis,
|
|
103
|
-
size: axis === "col" ? this.colSize(index) : this.rowSize(index),
|
|
104
|
-
page: getPage(axis, event),
|
|
105
|
-
index
|
|
106
|
-
};
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
};
|
|
110
|
-
this.handlePointerUp = (_event) => {
|
|
111
|
-
if (this.resizing) {
|
|
112
|
-
const resizeEvent = new DxAxisResize({
|
|
113
|
-
axis: this.resizing.axis,
|
|
114
|
-
index: this.resizing.index,
|
|
115
|
-
size: this[this.resizing.axis === "col" ? "colSize" : "rowSize"](this.resizing.index)
|
|
116
|
-
});
|
|
117
|
-
this.dispatchEvent(resizeEvent);
|
|
118
|
-
this.resizing = null;
|
|
119
|
-
}
|
|
120
|
-
};
|
|
121
|
-
this.handlePointerMove = (event) => {
|
|
122
|
-
if (this.resizing) {
|
|
123
|
-
const delta = getPage(this.resizing.axis, event) - this.resizing.page;
|
|
124
|
-
if (this.resizing.axis === "col") {
|
|
125
|
-
const nextSize = Math.max(sizeColMin, Math.min(sizeColMax, this.resizing.size + delta));
|
|
126
|
-
this.colSizes = {
|
|
127
|
-
...this.colSizes,
|
|
128
|
-
[this.resizing.index]: nextSize
|
|
129
|
-
};
|
|
130
|
-
this.updateVisInline();
|
|
131
|
-
} else {
|
|
132
|
-
const nextSize = Math.max(sizeRowMin, Math.min(sizeRowMax, this.resizing.size + delta));
|
|
133
|
-
this.rowSizes = {
|
|
134
|
-
...this.rowSizes,
|
|
135
|
-
[this.resizing.index]: nextSize
|
|
136
|
-
};
|
|
137
|
-
this.updateVisBlock();
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
};
|
|
141
|
-
//
|
|
142
|
-
// Resize & reposition handlers, observer, ref
|
|
143
|
-
//
|
|
144
|
-
this.observer = new ResizeObserver((entries) => {
|
|
145
|
-
const { inlineSize, blockSize } = entries?.[0]?.contentBoxSize?.[0] ?? {
|
|
146
|
-
inlineSize: 0,
|
|
147
|
-
blockSize: 0
|
|
148
|
-
};
|
|
149
|
-
if (Math.abs(inlineSize - this.sizeInline) > resizeTolerance || Math.abs(blockSize - this.sizeBlock) > resizeTolerance) {
|
|
150
|
-
this.sizeInline = inlineSize;
|
|
151
|
-
this.sizeBlock = blockSize;
|
|
152
|
-
this.updateVis();
|
|
153
|
-
}
|
|
154
|
-
});
|
|
155
|
-
this.viewportRef = createRef();
|
|
156
|
-
this.handleWheel = ({ deltaX, deltaY }) => {
|
|
157
|
-
this.posInline = Math.max(0, this.posInline + deltaX);
|
|
158
|
-
this.posBlock = Math.max(0, this.posBlock + deltaY);
|
|
159
|
-
if (this.posInline >= this.binInlineMin && this.posInline < this.binInlineMax && this.posBlock >= this.binBlockMin && this.posBlock < this.binBlockMax) {
|
|
160
|
-
} else {
|
|
161
|
-
this.updateVis();
|
|
162
|
-
}
|
|
163
|
-
};
|
|
164
|
-
// Focus handlers
|
|
165
|
-
this.focusedCell = {
|
|
166
|
-
col: 0,
|
|
167
|
-
row: 0
|
|
168
|
-
};
|
|
169
|
-
this.focusActive = false;
|
|
170
|
-
}
|
|
171
|
-
//
|
|
172
|
-
// Accessors
|
|
173
|
-
//
|
|
174
|
-
colSize(c) {
|
|
175
|
-
return this.colSizes?.[c] ?? this.columnDefault.size;
|
|
176
|
-
}
|
|
177
|
-
rowSize(r) {
|
|
178
|
-
return this.rowSizes?.[r] ?? this.rowDefault.size;
|
|
179
|
-
}
|
|
180
|
-
getCell(c, r) {
|
|
181
|
-
return this.cells[`${c}${separator}${r}`];
|
|
182
|
-
}
|
|
183
|
-
updateVisInline() {
|
|
184
|
-
let colIndex = 0;
|
|
185
|
-
let pxInline = this.colSize(colIndex);
|
|
186
|
-
while (pxInline < this.posInline) {
|
|
187
|
-
colIndex += 1;
|
|
188
|
-
pxInline += this.colSize(colIndex) + gap;
|
|
189
|
-
}
|
|
190
|
-
this.visColMin = colIndex - overscanCol;
|
|
191
|
-
this.binInlineMin = pxInline - this.colSize(colIndex) - gap;
|
|
192
|
-
this.binInlineMax = pxInline + gap;
|
|
193
|
-
this.overscanInline = [
|
|
194
|
-
...Array(overscanCol)
|
|
195
|
-
].reduce((acc, _, c0) => {
|
|
196
|
-
acc += this.colSize(this.visColMin + c0);
|
|
197
|
-
return acc;
|
|
198
|
-
}, 0) + gap * (overscanCol - 1);
|
|
199
|
-
while (pxInline < this.binInlineMax + this.sizeInline + gap) {
|
|
200
|
-
colIndex += 1;
|
|
201
|
-
pxInline += this.colSize(colIndex) + gap;
|
|
202
|
-
}
|
|
203
|
-
this.visColMax = colIndex + overscanCol;
|
|
204
|
-
this.templateColumns = [
|
|
205
|
-
...Array(this.visColMax - this.visColMin)
|
|
206
|
-
].map((_, c0) => `${this.colSize(this.visColMin + c0)}px`).join(" ");
|
|
207
|
-
}
|
|
208
|
-
updateVisBlock() {
|
|
209
|
-
let rowIndex = 0;
|
|
210
|
-
let pxBlock = this.rowSize(rowIndex);
|
|
211
|
-
while (pxBlock < this.posBlock) {
|
|
212
|
-
rowIndex += 1;
|
|
213
|
-
pxBlock += this.rowSize(rowIndex) + gap;
|
|
214
|
-
}
|
|
215
|
-
this.visRowMin = rowIndex - overscanRow;
|
|
216
|
-
this.binBlockMin = pxBlock - this.rowSize(rowIndex) - gap;
|
|
217
|
-
this.binBlockMax = pxBlock + gap;
|
|
218
|
-
this.overscanBlock = [
|
|
219
|
-
...Array(overscanRow)
|
|
220
|
-
].reduce((acc, _, r0) => {
|
|
221
|
-
acc += this.rowSize(this.visRowMin + r0);
|
|
222
|
-
return acc;
|
|
223
|
-
}, 0) + gap * (overscanRow - 1);
|
|
224
|
-
while (pxBlock < this.binBlockMax + this.sizeBlock) {
|
|
225
|
-
rowIndex += 1;
|
|
226
|
-
pxBlock += this.rowSize(rowIndex) + gap;
|
|
227
|
-
}
|
|
228
|
-
this.visRowMax = rowIndex + overscanRow;
|
|
229
|
-
this.templateRows = [
|
|
230
|
-
...Array(this.visRowMax - this.visRowMin)
|
|
231
|
-
].map((_, r0) => `${this.rowSize(this.visRowMin + r0)}px`).join(" ");
|
|
232
|
-
}
|
|
233
|
-
updateVis() {
|
|
234
|
-
this.updateVisInline();
|
|
235
|
-
this.updateVisBlock();
|
|
236
|
-
}
|
|
237
|
-
handleFocus(event) {
|
|
238
|
-
const target = event.target;
|
|
239
|
-
const action = target.getAttribute("data-dx-grid-action");
|
|
240
|
-
if (action === "cell") {
|
|
241
|
-
const c = parseInt(target.getAttribute("aria-colindex") ?? "never");
|
|
242
|
-
const r = parseInt(target.getAttribute("aria-rowindex") ?? "never");
|
|
243
|
-
this.focusedCell = {
|
|
244
|
-
col: c,
|
|
245
|
-
row: r
|
|
246
|
-
};
|
|
247
|
-
this.focusActive = true;
|
|
248
|
-
}
|
|
249
|
-
}
|
|
250
|
-
handleBlur(event) {
|
|
251
|
-
if (!event.relatedTarget || event.relatedTarget.closest(".dx-grid__viewport") !== this.viewportRef.value) {
|
|
252
|
-
this.focusActive = false;
|
|
253
|
-
}
|
|
254
|
-
}
|
|
255
|
-
/**
|
|
256
|
-
* Moves focus to the cell with actual focus, otherwise moves focus to the viewport.
|
|
257
|
-
*/
|
|
258
|
-
refocus() {
|
|
259
|
-
(this.focusedCell.row < this.visRowMin || this.focusedCell.row > this.visRowMax || this.focusedCell.col < this.visColMin || this.focusedCell.col > this.visColMax ? this.viewportRef.value : this.viewportRef.value?.querySelector(`[aria-colindex="${this.focusedCell.col}"][aria-rowindex="${this.focusedCell.row}"]`))?.focus({
|
|
260
|
-
preventScroll: true
|
|
261
|
-
});
|
|
262
|
-
}
|
|
263
|
-
/**
|
|
264
|
-
* Updates `pos` so that a cell in focus is fully within the viewport
|
|
265
|
-
*/
|
|
266
|
-
snapPosToFocusedCell() {
|
|
267
|
-
if (this.focusedCell.col < this.visColMin || this.focusedCell.col > this.visColMax || this.focusedCell.row < this.visRowMin || this.focusedCell.row > this.visRowMax) {
|
|
268
|
-
} else if (this.focusedCell.col > this.visColMin + overscanCol && this.focusedCell.col < this.visColMax - overscanCol - 1 && this.focusedCell.row > this.visRowMin + overscanRow && this.focusedCell.row < this.visRowMax - overscanRow - 1) {
|
|
269
|
-
} else {
|
|
270
|
-
if (this.focusedCell.col <= this.visColMin + overscanCol) {
|
|
271
|
-
this.posInline = this.binInlineMin;
|
|
272
|
-
this.updateVisInline();
|
|
273
|
-
} else if (this.focusedCell.col >= this.visColMax - overscanCol - 1) {
|
|
274
|
-
const sizeSumCol = [
|
|
275
|
-
...Array(this.focusedCell.col - this.visColMin)
|
|
276
|
-
].reduce((acc, _, c0) => {
|
|
277
|
-
acc += this.colSize(this.visColMin + overscanCol + c0) + gap;
|
|
278
|
-
return acc;
|
|
279
|
-
}, 0);
|
|
280
|
-
this.posInline = this.binInlineMin + sizeSumCol + gap * 2 - this.sizeInline;
|
|
281
|
-
this.updateVisInline();
|
|
282
|
-
}
|
|
283
|
-
if (this.focusedCell.row <= this.visRowMin + overscanRow) {
|
|
284
|
-
this.posBlock = this.binBlockMin;
|
|
285
|
-
this.updateVisBlock();
|
|
286
|
-
} else if (this.focusedCell.row >= this.visRowMax - overscanRow - 1) {
|
|
287
|
-
const sizeSumRow = [
|
|
288
|
-
...Array(this.focusedCell.row - this.visRowMin)
|
|
289
|
-
].reduce((acc, _, r0) => {
|
|
290
|
-
acc += this.rowSize(this.visRowMin + overscanRow + r0) + gap;
|
|
291
|
-
return acc;
|
|
292
|
-
}, 0);
|
|
293
|
-
this.posBlock = this.binBlockMin + sizeSumRow + gap * 2 - this.sizeBlock;
|
|
294
|
-
this.updateVisBlock();
|
|
295
|
-
}
|
|
296
|
-
}
|
|
297
|
-
}
|
|
298
|
-
// Keyboard interactions
|
|
299
|
-
handleKeydown(event) {
|
|
300
|
-
if (this.focusActive) {
|
|
301
|
-
switch (event.key) {
|
|
302
|
-
case "ArrowDown":
|
|
303
|
-
this.focusedCell = {
|
|
304
|
-
...this.focusedCell,
|
|
305
|
-
row: this.focusedCell.row + 1
|
|
306
|
-
};
|
|
307
|
-
break;
|
|
308
|
-
case "ArrowUp":
|
|
309
|
-
this.focusedCell = {
|
|
310
|
-
...this.focusedCell,
|
|
311
|
-
row: Math.max(0, this.focusedCell.row - 1)
|
|
312
|
-
};
|
|
313
|
-
break;
|
|
314
|
-
case "ArrowRight":
|
|
315
|
-
this.focusedCell = {
|
|
316
|
-
...this.focusedCell,
|
|
317
|
-
col: this.focusedCell.col + 1
|
|
318
|
-
};
|
|
319
|
-
break;
|
|
320
|
-
case "ArrowLeft":
|
|
321
|
-
this.focusedCell = {
|
|
322
|
-
...this.focusedCell,
|
|
323
|
-
col: Math.max(0, this.focusedCell.col - 1)
|
|
324
|
-
};
|
|
325
|
-
break;
|
|
326
|
-
}
|
|
327
|
-
switch (event.key) {
|
|
328
|
-
case "ArrowDown":
|
|
329
|
-
case "ArrowUp":
|
|
330
|
-
case "ArrowRight":
|
|
331
|
-
case "ArrowLeft":
|
|
332
|
-
event.preventDefault();
|
|
333
|
-
this.snapPosToFocusedCell();
|
|
334
|
-
break;
|
|
335
|
-
}
|
|
336
|
-
}
|
|
337
|
-
}
|
|
338
|
-
//
|
|
339
|
-
// Render and other lifecycle methods
|
|
340
|
-
//
|
|
341
|
-
render() {
|
|
342
|
-
const visibleCols = this.visColMax - this.visColMin;
|
|
343
|
-
const visibleRows = this.visRowMax - this.visRowMin;
|
|
344
|
-
const offsetInline = gap + this.binInlineMin - this.posInline - this.overscanInline;
|
|
345
|
-
const offsetBlock = gap + this.binBlockMin - this.posBlock - this.overscanBlock;
|
|
346
|
-
return html`<div
|
|
347
|
-
role="none"
|
|
348
|
-
class="dx-grid"
|
|
349
|
-
@pointerdown=${this.handlePointerDown}
|
|
350
|
-
@pointerup=${this.handlePointerUp}
|
|
351
|
-
@pointermove=${this.handlePointerMove}
|
|
352
|
-
@focus=${this.handleFocus}
|
|
353
|
-
@blur=${this.handleBlur}
|
|
354
|
-
@keydown=${this.handleKeydown}
|
|
355
|
-
>
|
|
356
|
-
<div role="none" class="dx-grid__corner"></div>
|
|
357
|
-
<div role="none" class="dx-grid__columnheader">
|
|
358
|
-
<div
|
|
359
|
-
role="none"
|
|
360
|
-
class="dx-grid__columnheader__content"
|
|
361
|
-
style="transform:translate3d(${offsetInline}px,0,0);grid-template-columns:${this.templateColumns};"
|
|
362
|
-
>
|
|
363
|
-
${[
|
|
364
|
-
...Array(visibleCols)
|
|
365
|
-
].map((_, c0) => {
|
|
366
|
-
const c = this.visColMin + c0;
|
|
367
|
-
return html`<div
|
|
368
|
-
role="columnheader"
|
|
369
|
-
?inert=${c < 0}
|
|
370
|
-
style="block-size:${this.rowDefault.size}px;grid-column:${c0 + 1}/${c0 + 2};"
|
|
371
|
-
>
|
|
372
|
-
<span id=${localChId(c0)}>${colToA1Notation(c)}</span>
|
|
373
|
-
${(this.columns[c]?.resizeable ?? this.columnDefault.resizeable) && html`<button class="dx-grid__resize-handle" data-dx-grid-action=${`resize-col,${c}`}>
|
|
374
|
-
<span class="sr-only">Resize</span>
|
|
375
|
-
</button>`}
|
|
376
|
-
</div>`;
|
|
377
|
-
})}
|
|
378
|
-
</div>
|
|
379
|
-
</div>
|
|
380
|
-
<div role="none" class="dx-grid__corner"></div>
|
|
381
|
-
<div role="none" class="dx-grid__rowheader">
|
|
382
|
-
<div
|
|
383
|
-
role="none"
|
|
384
|
-
class="dx-grid__rowheader__content"
|
|
385
|
-
style="transform:translate3d(0,${offsetBlock}px,0);grid-template-rows:${this.templateRows};"
|
|
386
|
-
>
|
|
387
|
-
${[
|
|
388
|
-
...Array(visibleRows)
|
|
389
|
-
].map((_, r0) => {
|
|
390
|
-
const r = this.visRowMin + r0;
|
|
391
|
-
return html`<div role="rowheader" ?inert=${r < 0} style="grid-row:${r0 + 1}/${r0 + 2}">
|
|
392
|
-
<span id=${localRhId(r0)}>${rowToA1Notation(r)}</span>
|
|
393
|
-
${(this.rows[r]?.resizeable ?? this.rowDefault.resizeable) && html`<button class="dx-grid__resize-handle" data-dx-grid-action=${`resize-row,${r}`}>
|
|
394
|
-
<span class="sr-only">Resize</span>
|
|
395
|
-
</button>`}
|
|
396
|
-
</div>`;
|
|
397
|
-
})}
|
|
398
|
-
</div>
|
|
399
|
-
</div>
|
|
400
|
-
<div role="grid" class="dx-grid__viewport" tabindex="0" @wheel=${this.handleWheel} ${ref(this.viewportRef)}>
|
|
401
|
-
<div
|
|
402
|
-
role="none"
|
|
403
|
-
class="dx-grid__content"
|
|
404
|
-
style="transform:translate3d(${offsetInline}px,${offsetBlock}px,0);grid-template-columns:${this.templateColumns};grid-template-rows:${this.templateRows};"
|
|
405
|
-
>
|
|
406
|
-
${[
|
|
407
|
-
...Array(visibleCols)
|
|
408
|
-
].map((_, c0) => {
|
|
409
|
-
return [
|
|
410
|
-
...Array(visibleRows)
|
|
411
|
-
].map((_2, r0) => {
|
|
412
|
-
const c = c0 + this.visColMin;
|
|
413
|
-
const r = r0 + this.visRowMin;
|
|
414
|
-
const cell = this.getCell(c, r);
|
|
415
|
-
return html`<div
|
|
416
|
-
role="gridcell"
|
|
417
|
-
tabindex="0"
|
|
418
|
-
?inert=${c < 0 || r < 0}
|
|
419
|
-
aria-rowindex=${r}
|
|
420
|
-
aria-colindex=${c}
|
|
421
|
-
data-dx-grid-action="cell"
|
|
422
|
-
style="grid-column:${c0 + 1};grid-row:${r0 + 1}"
|
|
423
|
-
>
|
|
424
|
-
${cell?.value}
|
|
425
|
-
</div>`;
|
|
426
|
-
});
|
|
427
|
-
})}
|
|
428
|
-
</div>
|
|
429
|
-
</div>
|
|
430
|
-
<div role="none" class="dx-grid__scrollbar" aria-orientation="vertical">
|
|
431
|
-
<div role="none" class="dx-grid__scrollbar__thumb"></div>
|
|
432
|
-
</div>
|
|
433
|
-
<div role="none" class="dx-grid__corner"></div>
|
|
434
|
-
<div role="none" class="dx-grid__scrollbar" aria-orientation="horizontal">
|
|
435
|
-
<div role="none" class="dx-grid__scrollbar__thumb"></div>
|
|
436
|
-
</div>
|
|
437
|
-
<div role="none" class="dx-grid__corner"></div>
|
|
438
|
-
</div>`;
|
|
439
|
-
}
|
|
440
|
-
firstUpdated() {
|
|
441
|
-
this.observer.observe(this.viewportRef.value);
|
|
442
|
-
this.colSizes = Object.entries(this.columns).reduce((acc, [colId, colMeta]) => {
|
|
443
|
-
if (colMeta?.size) {
|
|
444
|
-
acc[colId] = colMeta.size;
|
|
445
|
-
}
|
|
446
|
-
return acc;
|
|
447
|
-
}, {});
|
|
448
|
-
this.rowSizes = Object.entries(this.rows).reduce((acc, [rowId, rowMeta]) => {
|
|
449
|
-
if (rowMeta?.size) {
|
|
450
|
-
acc[rowId] = rowMeta.size;
|
|
451
|
-
}
|
|
452
|
-
return acc;
|
|
453
|
-
}, {});
|
|
454
|
-
}
|
|
455
|
-
updated(changedProperties) {
|
|
456
|
-
if (this.focusActive && (changedProperties.has("visRowMin") || changedProperties.has("visColMin") || changedProperties.has("focusedCell"))) {
|
|
457
|
-
this.refocus();
|
|
458
|
-
}
|
|
459
|
-
}
|
|
460
|
-
disconnectedCallback() {
|
|
461
|
-
super.disconnectedCallback();
|
|
462
|
-
if (this.viewportRef.value) {
|
|
463
|
-
this.observer.unobserve(this.viewportRef.value);
|
|
464
|
-
}
|
|
465
|
-
}
|
|
466
|
-
createRenderRoot() {
|
|
467
|
-
return this;
|
|
468
|
-
}
|
|
469
|
-
};
|
|
470
|
-
_ts_decorate([
|
|
471
|
-
property({
|
|
472
|
-
type: Object
|
|
473
|
-
})
|
|
474
|
-
], DxGrid.prototype, "rowDefault", void 0);
|
|
475
|
-
_ts_decorate([
|
|
476
|
-
property({
|
|
477
|
-
type: Object
|
|
478
|
-
})
|
|
479
|
-
], DxGrid.prototype, "columnDefault", void 0);
|
|
480
|
-
_ts_decorate([
|
|
481
|
-
property({
|
|
482
|
-
type: Object
|
|
483
|
-
})
|
|
484
|
-
], DxGrid.prototype, "rows", void 0);
|
|
485
|
-
_ts_decorate([
|
|
486
|
-
property({
|
|
487
|
-
type: Object
|
|
488
|
-
})
|
|
489
|
-
], DxGrid.prototype, "columns", void 0);
|
|
490
|
-
_ts_decorate([
|
|
491
|
-
property({
|
|
492
|
-
type: Object
|
|
493
|
-
})
|
|
494
|
-
], DxGrid.prototype, "cells", void 0);
|
|
495
|
-
_ts_decorate([
|
|
496
|
-
state()
|
|
497
|
-
], DxGrid.prototype, "posInline", void 0);
|
|
498
|
-
_ts_decorate([
|
|
499
|
-
state()
|
|
500
|
-
], DxGrid.prototype, "posBlock", void 0);
|
|
501
|
-
_ts_decorate([
|
|
502
|
-
state()
|
|
503
|
-
], DxGrid.prototype, "sizeInline", void 0);
|
|
504
|
-
_ts_decorate([
|
|
505
|
-
state()
|
|
506
|
-
], DxGrid.prototype, "sizeBlock", void 0);
|
|
507
|
-
_ts_decorate([
|
|
508
|
-
state()
|
|
509
|
-
], DxGrid.prototype, "overscanInline", void 0);
|
|
510
|
-
_ts_decorate([
|
|
511
|
-
state()
|
|
512
|
-
], DxGrid.prototype, "overscanBlock", void 0);
|
|
513
|
-
_ts_decorate([
|
|
514
|
-
state()
|
|
515
|
-
], DxGrid.prototype, "binInlineMin", void 0);
|
|
516
|
-
_ts_decorate([
|
|
517
|
-
state()
|
|
518
|
-
], DxGrid.prototype, "binInlineMax", void 0);
|
|
519
|
-
_ts_decorate([
|
|
520
|
-
state()
|
|
521
|
-
], DxGrid.prototype, "binBlockMin", void 0);
|
|
522
|
-
_ts_decorate([
|
|
523
|
-
state()
|
|
524
|
-
], DxGrid.prototype, "binBlockMax", void 0);
|
|
525
|
-
_ts_decorate([
|
|
526
|
-
state()
|
|
527
|
-
], DxGrid.prototype, "visColMin", void 0);
|
|
528
|
-
_ts_decorate([
|
|
529
|
-
state()
|
|
530
|
-
], DxGrid.prototype, "visColMax", void 0);
|
|
531
|
-
_ts_decorate([
|
|
532
|
-
state()
|
|
533
|
-
], DxGrid.prototype, "visRowMin", void 0);
|
|
534
|
-
_ts_decorate([
|
|
535
|
-
state()
|
|
536
|
-
], DxGrid.prototype, "visRowMax", void 0);
|
|
537
|
-
_ts_decorate([
|
|
538
|
-
state()
|
|
539
|
-
], DxGrid.prototype, "templateColumns", void 0);
|
|
540
|
-
_ts_decorate([
|
|
541
|
-
state()
|
|
542
|
-
], DxGrid.prototype, "templateRows", void 0);
|
|
543
|
-
_ts_decorate([
|
|
544
|
-
state()
|
|
545
|
-
], DxGrid.prototype, "colSizes", void 0);
|
|
546
|
-
_ts_decorate([
|
|
547
|
-
state()
|
|
548
|
-
], DxGrid.prototype, "rowSizes", void 0);
|
|
549
|
-
_ts_decorate([
|
|
550
|
-
state()
|
|
551
|
-
], DxGrid.prototype, "resizing", void 0);
|
|
552
|
-
_ts_decorate([
|
|
553
|
-
state()
|
|
554
|
-
], DxGrid.prototype, "observer", void 0);
|
|
555
|
-
_ts_decorate([
|
|
556
|
-
state()
|
|
557
|
-
], DxGrid.prototype, "focusedCell", void 0);
|
|
558
|
-
_ts_decorate([
|
|
559
|
-
state()
|
|
560
|
-
], DxGrid.prototype, "focusActive", void 0);
|
|
561
|
-
_ts_decorate([
|
|
562
|
-
eventOptions({
|
|
563
|
-
capture: true
|
|
564
|
-
})
|
|
565
|
-
], DxGrid.prototype, "handleFocus", null);
|
|
566
|
-
_ts_decorate([
|
|
567
|
-
eventOptions({
|
|
568
|
-
capture: true
|
|
569
|
-
})
|
|
570
|
-
], DxGrid.prototype, "handleBlur", null);
|
|
571
|
-
DxGrid = _ts_decorate([
|
|
572
|
-
customElement("dx-grid")
|
|
573
|
-
], DxGrid);
|
|
574
|
-
export {
|
|
575
|
-
DxAxisResize,
|
|
576
|
-
DxGrid
|
|
577
|
-
};
|
|
578
|
-
//# sourceMappingURL=index.mjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/dx-grid.ts", "../../../src/types.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { LitElement, html } from 'lit';\nimport { customElement, state, property, eventOptions } from 'lit/decorators.js';\nimport { ref, createRef, type Ref } from 'lit/directives/ref.js';\n\nimport { DxAxisResize, type DxAxisResizeProps, type DxGridAxis } from './types';\n\n/**\n * The size in pixels of the gap between cells\n */\nconst gap = 1;\n\n/**\n * This should be about the width of the `1` numeral so resize is triggered as the row header column’s intrinsic size\n * changes when scrolling vertically.\n */\nconst resizeTolerance = 8;\n\n//\n// `overscan` is the number of columns or rows to render outside of the viewport\n//\nconst overscanCol = 1;\nconst overscanRow = 1;\n\n//\n// `size`, when suffixed with ‘row’ or ‘col’, are limits on size applied when resizing\n//\nconst sizeColMin = 32;\nconst sizeColMax = 1024;\nconst sizeRowMin = 16;\nconst sizeRowMax = 1024;\n\n/**\n * Separator for serializing cell position vectors\n */\nconst separator = ',';\n\n//\n// A1 notation is the fallback for numbering columns and rows.\n//\n\nconst colToA1Notation = (col: number): string => {\n return (\n (col >= 26 ? String.fromCharCode('A'.charCodeAt(0) + Math.floor(col / 26) - 1) : '') +\n String.fromCharCode('A'.charCodeAt(0) + (col % 26))\n );\n};\n\nconst rowToA1Notation = (row: number): string => {\n return `${row + 1}`;\n};\n\nexport type CellValue = {\n /**\n * The content value\n */\n value: string;\n /**\n * If this is a merged cell, the bottomright-most of the range in numeric notation, otherwise undefined.\n */\n end?: string;\n /**\n * CSS inline styles to apply to the gridcell element\n */\n style?: string;\n};\n\ntype AxisMeta = {\n size: number;\n description?: string;\n resizeable?: boolean;\n};\n\nexport type DxGridProps = Partial<Pick<DxGrid, 'cells' | 'rows' | 'columns' | 'rowDefault' | 'columnDefault'>>;\n\nconst localChId = (c0: number) => `ch--${c0}`;\nconst localRhId = (r0: number) => `rh--${r0}`;\n\nconst getPage = (axis: string, event: PointerEvent) => (axis === 'col' ? event.pageX : event.pageY);\n\n@customElement('dx-grid')\nexport class DxGrid extends LitElement {\n @property({ type: Object })\n rowDefault: AxisMeta = { size: 32 };\n\n @property({ type: Object })\n columnDefault: AxisMeta = { size: 180 };\n\n @property({ type: Object })\n rows: Record<string, AxisMeta> = {};\n\n @property({ type: Object })\n columns: Record<string, AxisMeta> = {};\n\n @property({ type: Object })\n cells: Record<string, CellValue> = {};\n\n //\n // `pos`, short for ‘position’, is the position in pixels of the viewport from the origin.\n //\n\n @state()\n posInline = 0;\n\n @state()\n posBlock = 0;\n\n //\n // `size` (when not suffixed with ‘row’ or ‘col’, see above) is the size in pixels of the viewport.\n //\n\n @state()\n sizeInline = 0;\n\n @state()\n sizeBlock = 0;\n\n //\n // `overscan` is the amount in pixels to offset the grid content due to the number of overscanned columns or rows.\n //\n\n @state()\n overscanInline = 0;\n\n @state()\n overscanBlock = 0;\n\n //\n // `bin`, not short for anything, is the range in pixels within which virtualization does not need to reassess.\n //\n\n @state()\n binInlineMin = 0;\n\n @state()\n binInlineMax = this.colSize(0);\n\n @state()\n binBlockMin = 0;\n\n @state()\n binBlockMax = this.rowSize(0);\n\n //\n // `vis`, short for ‘visible’, is the range in numeric index of the columns or rows which should be rendered within\n // the viewport. These start with naïve values that are updated before first contentful render.\n //\n\n @state()\n visColMin = 0;\n\n @state()\n visColMax = 1;\n\n @state()\n visRowMin = 0;\n\n @state()\n visRowMax = 1;\n\n //\n // `template` is the rendered value of `grid-{axis}-template`.\n //\n @state()\n templateColumns = `${this.colSize(0)}px`;\n\n @state()\n templateRows = `${this.rowSize(0)}px`;\n\n //\n // Resize state and handlers\n //\n\n @state()\n colSizes: Record<string, number> = {};\n\n @state()\n rowSizes: Record<string, number> = {};\n\n @state()\n resizing: null | (DxAxisResizeProps & { page: number }) = null;\n\n handlePointerDown = (event: PointerEvent) => {\n const actionEl = (event.target as HTMLElement)?.closest('[data-dx-grid-action]');\n const action = actionEl?.getAttribute('data-dx-grid-action');\n if (action) {\n if (action.startsWith('resize')) {\n const [resize, index] = action.split(',');\n const [_, axis] = resize.split('-');\n this.resizing = {\n axis: axis as DxGridAxis,\n size: axis === 'col' ? this.colSize(index) : this.rowSize(index),\n page: getPage(axis, event),\n index,\n };\n }\n }\n };\n\n handlePointerUp = (_event: PointerEvent) => {\n if (this.resizing) {\n const resizeEvent = new DxAxisResize({\n axis: this.resizing.axis,\n index: this.resizing.index,\n size: this[this.resizing.axis === 'col' ? 'colSize' : 'rowSize'](this.resizing.index),\n });\n this.dispatchEvent(resizeEvent);\n this.resizing = null;\n }\n };\n\n handlePointerMove = (event: PointerEvent) => {\n if (this.resizing) {\n const delta = getPage(this.resizing.axis, event) - this.resizing.page;\n if (this.resizing.axis === 'col') {\n const nextSize = Math.max(sizeColMin, Math.min(sizeColMax, this.resizing.size + delta));\n this.colSizes = { ...this.colSizes, [this.resizing.index]: nextSize };\n this.updateVisInline();\n } else {\n const nextSize = Math.max(sizeRowMin, Math.min(sizeRowMax, this.resizing.size + delta));\n this.rowSizes = { ...this.rowSizes, [this.resizing.index]: nextSize };\n this.updateVisBlock();\n }\n }\n };\n\n //\n // Accessors\n //\n\n private colSize(c: number | string) {\n return this.colSizes?.[c] ?? this.columnDefault.size;\n }\n\n private rowSize(r: number | string) {\n return this.rowSizes?.[r] ?? this.rowDefault.size;\n }\n\n private getCell(c: number | string, r: number | string) {\n return this.cells[`${c}${separator}${r}`];\n }\n\n //\n // Resize & reposition handlers, observer, ref\n //\n\n @state()\n observer = new ResizeObserver((entries) => {\n const { inlineSize, blockSize } = entries?.[0]?.contentBoxSize?.[0] ?? {\n inlineSize: 0,\n blockSize: 0,\n };\n if (\n Math.abs(inlineSize - this.sizeInline) > resizeTolerance ||\n Math.abs(blockSize - this.sizeBlock) > resizeTolerance\n ) {\n // console.info('[updating bounds]', 'resize', [inlineSize - this.sizeInline, blockSize - this.sizeBlock]);\n this.sizeInline = inlineSize;\n this.sizeBlock = blockSize;\n this.updateVis();\n }\n });\n\n viewportRef: Ref<HTMLDivElement> = createRef();\n\n handleWheel = ({ deltaX, deltaY }: WheelEvent) => {\n this.posInline = Math.max(0, this.posInline + deltaX);\n this.posBlock = Math.max(0, this.posBlock + deltaY);\n if (\n this.posInline >= this.binInlineMin &&\n this.posInline < this.binInlineMax &&\n this.posBlock >= this.binBlockMin &&\n this.posBlock < this.binBlockMax\n ) {\n // do nothing\n } else {\n // console.info(\n // '[updating bounds]',\n // 'wheel',\n // [this.binInlineMin, this.posInline, this.binInlineMax],\n // [this.binBlockMin, this.posBlock, this.binBlockMax],\n // );\n this.updateVis();\n }\n };\n\n private updateVisInline() {\n // todo: avoid starting from zero\n let colIndex = 0;\n let pxInline = this.colSize(colIndex);\n\n while (pxInline < this.posInline) {\n colIndex += 1;\n pxInline += this.colSize(colIndex) + gap;\n }\n\n this.visColMin = colIndex - overscanCol;\n\n this.binInlineMin = pxInline - this.colSize(colIndex) - gap;\n this.binInlineMax = pxInline + gap;\n\n this.overscanInline =\n [...Array(overscanCol)].reduce((acc, _, c0) => {\n acc += this.colSize(this.visColMin + c0);\n return acc;\n }, 0) +\n gap * (overscanCol - 1);\n\n while (pxInline < this.binInlineMax + this.sizeInline + gap) {\n colIndex += 1;\n pxInline += this.colSize(colIndex) + gap;\n }\n\n this.visColMax = colIndex + overscanCol;\n\n this.templateColumns = [...Array(this.visColMax - this.visColMin)]\n .map((_, c0) => `${this.colSize(this.visColMin + c0)}px`)\n .join(' ');\n }\n\n private updateVisBlock() {\n // todo: avoid starting from zero\n let rowIndex = 0;\n let pxBlock = this.rowSize(rowIndex);\n\n while (pxBlock < this.posBlock) {\n rowIndex += 1;\n pxBlock += this.rowSize(rowIndex) + gap;\n }\n\n this.visRowMin = rowIndex - overscanRow;\n\n this.binBlockMin = pxBlock - this.rowSize(rowIndex) - gap;\n this.binBlockMax = pxBlock + gap;\n\n this.overscanBlock =\n [...Array(overscanRow)].reduce((acc, _, r0) => {\n acc += this.rowSize(this.visRowMin + r0);\n return acc;\n }, 0) +\n gap * (overscanRow - 1);\n\n while (pxBlock < this.binBlockMax + this.sizeBlock) {\n rowIndex += 1;\n pxBlock += this.rowSize(rowIndex) + gap;\n }\n\n this.visRowMax = rowIndex + overscanRow;\n\n this.templateRows = [...Array(this.visRowMax - this.visRowMin)]\n .map((_, r0) => `${this.rowSize(this.visRowMin + r0)}px`)\n .join(' ');\n }\n\n private updateVis() {\n this.updateVisInline();\n this.updateVisBlock();\n }\n\n // Focus handlers\n\n @state()\n focusedCell: Record<DxGridAxis, number> = { col: 0, row: 0 };\n\n @state()\n focusActive: boolean = false;\n\n @eventOptions({ capture: true })\n handleFocus(event: FocusEvent) {\n const target = event.target as HTMLElement;\n const action = target.getAttribute('data-dx-grid-action');\n if (action === 'cell') {\n const c = parseInt(target.getAttribute('aria-colindex') ?? 'never');\n const r = parseInt(target.getAttribute('aria-rowindex') ?? 'never');\n this.focusedCell = { col: c, row: r };\n this.focusActive = true;\n }\n }\n\n @eventOptions({ capture: true })\n handleBlur(event: FocusEvent) {\n // Only unset `focusActive` if focus is not moving to an element within the grid.\n if (\n !event.relatedTarget ||\n (event.relatedTarget as HTMLElement).closest('.dx-grid__viewport') !== this.viewportRef.value\n ) {\n this.focusActive = false;\n }\n }\n\n /**\n * Moves focus to the cell with actual focus, otherwise moves focus to the viewport.\n */\n refocus() {\n (this.focusedCell.row < this.visRowMin ||\n this.focusedCell.row > this.visRowMax ||\n this.focusedCell.col < this.visColMin ||\n this.focusedCell.col > this.visColMax\n ? this.viewportRef.value\n : (this.viewportRef.value?.querySelector(\n `[aria-colindex=\"${this.focusedCell.col}\"][aria-rowindex=\"${this.focusedCell.row}\"]`,\n ) as HTMLElement | null)\n )?.focus({ preventScroll: true });\n }\n\n /**\n * Updates `pos` so that a cell in focus is fully within the viewport\n */\n snapPosToFocusedCell() {\n if (\n this.focusedCell.col < this.visColMin ||\n this.focusedCell.col > this.visColMax ||\n this.focusedCell.row < this.visRowMin ||\n this.focusedCell.row > this.visRowMax\n ) {\n // console.warn('Snapping position to a focused cell that is not already mounted is unsupported.');\n } else if (\n this.focusedCell.col > this.visColMin + overscanCol &&\n this.focusedCell.col < this.visColMax - overscanCol - 1 &&\n this.focusedCell.row > this.visRowMin + overscanRow &&\n this.focusedCell.row < this.visRowMax - overscanRow - 1\n ) {\n // console.log(\n // '[within bounds]',\n // this.focusedCell,\n // [this.visColMin, this.visColMax, overscanCol],\n // [this.visRowMin, this.visRowMax, overscanRow],\n // );\n } else {\n if (this.focusedCell.col <= this.visColMin + overscanCol) {\n this.posInline = this.binInlineMin;\n this.updateVisInline();\n } else if (this.focusedCell.col >= this.visColMax - overscanCol - 1) {\n const sizeSumCol = [...Array(this.focusedCell.col - this.visColMin)].reduce((acc, _, c0) => {\n acc += this.colSize(this.visColMin + overscanCol + c0) + gap;\n return acc;\n }, 0);\n this.posInline = this.binInlineMin + sizeSumCol + gap * 2 - this.sizeInline;\n this.updateVisInline();\n }\n\n if (this.focusedCell.row <= this.visRowMin + overscanRow) {\n this.posBlock = this.binBlockMin;\n this.updateVisBlock();\n } else if (this.focusedCell.row >= this.visRowMax - overscanRow - 1) {\n const sizeSumRow = [...Array(this.focusedCell.row - this.visRowMin)].reduce((acc, _, r0) => {\n acc += this.rowSize(this.visRowMin + overscanRow + r0) + gap;\n return acc;\n }, 0);\n this.posBlock = this.binBlockMin + sizeSumRow + gap * 2 - this.sizeBlock;\n this.updateVisBlock();\n }\n }\n }\n\n // Keyboard interactions\n handleKeydown(event: KeyboardEvent) {\n if (this.focusActive) {\n // Adjust state\n switch (event.key) {\n case 'ArrowDown':\n this.focusedCell = { ...this.focusedCell, row: this.focusedCell.row + 1 };\n break;\n case 'ArrowUp':\n this.focusedCell = { ...this.focusedCell, row: Math.max(0, this.focusedCell.row - 1) };\n break;\n case 'ArrowRight':\n this.focusedCell = { ...this.focusedCell, col: this.focusedCell.col + 1 };\n break;\n case 'ArrowLeft':\n this.focusedCell = { ...this.focusedCell, col: Math.max(0, this.focusedCell.col - 1) };\n break;\n }\n // Handle virtualization & focus consequences\n switch (event.key) {\n case 'ArrowDown':\n case 'ArrowUp':\n case 'ArrowRight':\n case 'ArrowLeft':\n event.preventDefault();\n this.snapPosToFocusedCell();\n break;\n }\n }\n }\n\n //\n // Render and other lifecycle methods\n //\n\n override render() {\n const visibleCols = this.visColMax - this.visColMin;\n const visibleRows = this.visRowMax - this.visRowMin;\n const offsetInline = gap + this.binInlineMin - this.posInline - this.overscanInline;\n const offsetBlock = gap + this.binBlockMin - this.posBlock - this.overscanBlock;\n\n return html`<div\n role=\"none\"\n class=\"dx-grid\"\n @pointerdown=${this.handlePointerDown}\n @pointerup=${this.handlePointerUp}\n @pointermove=${this.handlePointerMove}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n @keydown=${this.handleKeydown}\n >\n <div role=\"none\" class=\"dx-grid__corner\"></div>\n <div role=\"none\" class=\"dx-grid__columnheader\">\n <div\n role=\"none\"\n class=\"dx-grid__columnheader__content\"\n style=\"transform:translate3d(${offsetInline}px,0,0);grid-template-columns:${this.templateColumns};\"\n >\n ${[...Array(visibleCols)].map((_, c0) => {\n const c = this.visColMin + c0;\n return html`<div\n role=\"columnheader\"\n ?inert=${c < 0}\n style=\"block-size:${this.rowDefault.size}px;grid-column:${c0 + 1}/${c0 + 2};\"\n >\n <span id=${localChId(c0)}>${colToA1Notation(c)}</span>\n ${(this.columns[c]?.resizeable ?? this.columnDefault.resizeable) &&\n html`<button class=\"dx-grid__resize-handle\" data-dx-grid-action=${`resize-col,${c}`}>\n <span class=\"sr-only\">Resize</span>\n </button>`}\n </div>`;\n })}\n </div>\n </div>\n <div role=\"none\" class=\"dx-grid__corner\"></div>\n <div role=\"none\" class=\"dx-grid__rowheader\">\n <div\n role=\"none\"\n class=\"dx-grid__rowheader__content\"\n style=\"transform:translate3d(0,${offsetBlock}px,0);grid-template-rows:${this.templateRows};\"\n >\n ${[...Array(visibleRows)].map((_, r0) => {\n const r = this.visRowMin + r0;\n return html`<div role=\"rowheader\" ?inert=${r < 0} style=\"grid-row:${r0 + 1}/${r0 + 2}\">\n <span id=${localRhId(r0)}>${rowToA1Notation(r)}</span>\n ${(this.rows[r]?.resizeable ?? this.rowDefault.resizeable) &&\n html`<button class=\"dx-grid__resize-handle\" data-dx-grid-action=${`resize-row,${r}`}>\n <span class=\"sr-only\">Resize</span>\n </button>`}\n </div>`;\n })}\n </div>\n </div>\n <div role=\"grid\" class=\"dx-grid__viewport\" tabindex=\"0\" @wheel=${this.handleWheel} ${ref(this.viewportRef)}>\n <div\n role=\"none\"\n class=\"dx-grid__content\"\n style=\"transform:translate3d(${offsetInline}px,${offsetBlock}px,0);grid-template-columns:${this\n .templateColumns};grid-template-rows:${this.templateRows};\"\n >\n ${[...Array(visibleCols)].map((_, c0) => {\n return [...Array(visibleRows)].map((_, r0) => {\n const c = c0 + this.visColMin;\n const r = r0 + this.visRowMin;\n const cell = this.getCell(c, r);\n return html`<div\n role=\"gridcell\"\n tabindex=\"0\"\n ?inert=${c < 0 || r < 0}\n aria-rowindex=${r}\n aria-colindex=${c}\n data-dx-grid-action=\"cell\"\n style=\"grid-column:${c0 + 1};grid-row:${r0 + 1}\"\n >\n ${cell?.value}\n </div>`;\n });\n })}\n </div>\n </div>\n <div role=\"none\" class=\"dx-grid__scrollbar\" aria-orientation=\"vertical\">\n <div role=\"none\" class=\"dx-grid__scrollbar__thumb\"></div>\n </div>\n <div role=\"none\" class=\"dx-grid__corner\"></div>\n <div role=\"none\" class=\"dx-grid__scrollbar\" aria-orientation=\"horizontal\">\n <div role=\"none\" class=\"dx-grid__scrollbar__thumb\"></div>\n </div>\n <div role=\"none\" class=\"dx-grid__corner\"></div>\n </div>`;\n }\n\n override firstUpdated() {\n this.observer.observe(this.viewportRef.value!);\n this.colSizes = Object.entries(this.columns).reduce((acc: Record<string, number>, [colId, colMeta]) => {\n if (colMeta?.size) {\n acc[colId] = colMeta.size;\n }\n return acc;\n }, {});\n this.rowSizes = Object.entries(this.rows).reduce((acc: Record<string, number>, [rowId, rowMeta]) => {\n if (rowMeta?.size) {\n acc[rowId] = rowMeta.size;\n }\n return acc;\n }, {});\n }\n\n override updated(changedProperties: Map<string, any>) {\n // Update the focused element if there is a change in bounds (otherwise Lit keeps focus on the relative element).\n if (\n this.focusActive &&\n (changedProperties.has('visRowMin') || changedProperties.has('visColMin') || changedProperties.has('focusedCell'))\n ) {\n this.refocus();\n }\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n // console.log('[disconnected]', this.viewportRef.value);\n // TODO(thure): Will this even work?\n if (this.viewportRef.value) {\n this.observer.unobserve(this.viewportRef.value);\n }\n }\n\n override createRenderRoot() {\n return this;\n }\n}\n", "//\n// Copyright 2024 DXOS.org\n//\n\nexport type DxGridAxis = 'row' | 'col';\n\nexport type DxAxisResizeProps = Pick<DxAxisResize, 'axis' | 'index' | 'size'>;\n\nexport class DxAxisResize extends Event {\n public readonly axis: DxGridAxis;\n public readonly index: string;\n public readonly size: number;\n constructor(props: DxAxisResizeProps) {\n super('dx-axis-resize');\n this.axis = props.axis;\n this.index = props.index;\n this.size = props.size;\n }\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["LitElement", "html", "customElement", "state", "property", "eventOptions", "ref", "createRef", "DxAxisResize", "Event", "constructor", "props", "axis", "index", "size", "gap", "resizeTolerance", "overscanCol", "overscanRow", "sizeColMin", "sizeColMax", "sizeRowMin", "sizeRowMax", "separator", "colToA1Notation", "col", "String", "fromCharCode", "charCodeAt", "Math", "floor", "rowToA1Notation", "row", "localChId", "c0", "localRhId", "r0", "getPage", "axis", "event", "pageX", "pageY", "DxGrid", "LitElement", "rowDefault", "size", "columnDefault", "rows", "columns", "cells", "posInline", "posBlock", "sizeInline", "sizeBlock", "overscanInline", "overscanBlock", "binInlineMin", "binInlineMax", "colSize", "binBlockMin", "binBlockMax", "rowSize", "visColMin", "visColMax", "visRowMin", "visRowMax", "templateColumns", "templateRows", "colSizes", "rowSizes", "resizing", "handlePointerDown", "actionEl", "target", "closest", "action", "getAttribute", "startsWith", "resize", "index", "split", "_", "page", "handlePointerUp", "_event", "resizeEvent", "DxAxisResize", "dispatchEvent", "handlePointerMove", "delta", "nextSize", "max", "min", "updateVisInline", "updateVisBlock", "observer", "ResizeObserver", "entries", "inlineSize", "blockSize", "contentBoxSize", "abs", "updateVis", "viewportRef", "createRef", "handleWheel", "deltaX", "deltaY", "focusedCell", "focusActive", "c", "r", "getCell", "colIndex", "pxInline", "Array", "reduce", "acc", "map", "join", "rowIndex", "pxBlock", "handleFocus", "parseInt", "handleBlur", "relatedTarget", "value", "refocus", "querySelector", "focus", "preventScroll", "snapPosToFocusedCell", "sizeSumCol", "sizeSumRow", "handleKeydown", "key", "preventDefault", "render", "visibleCols", "visibleRows", "offsetInline", "offsetBlock", "html", "resizeable", "ref", "cell", "firstUpdated", "observe", "Object", "colId", "colMeta", "rowId", "rowMeta", "updated", "changedProperties", "has", "disconnectedCallback", "unobserve", "createRenderRoot", "property", "type", "state", "eventOptions", "capture", "customElement"]
|
|
7
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/lit-grid/src/types.ts":{"bytes":1636,"imports":[],"format":"esm"},"packages/ui/lit-grid/src/dx-grid.ts":{"bytes":69997,"imports":[{"path":"lit","kind":"import-statement","external":true},{"path":"lit/decorators.js","kind":"import-statement","external":true},{"path":"lit/directives/ref.js","kind":"import-statement","external":true},{"path":"packages/ui/lit-grid/src/types.ts","kind":"import-statement","original":"./types"}],"format":"esm"},"packages/ui/lit-grid/src/index.ts":{"bytes":572,"imports":[{"path":"packages/ui/lit-grid/src/dx-grid.ts","kind":"import-statement","original":"./dx-grid"},{"path":"packages/ui/lit-grid/src/types.ts","kind":"import-statement","original":"./types"}],"format":"esm"}},"outputs":{"packages/ui/lit-grid/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":33648},"packages/ui/lit-grid/dist/lib/browser/index.mjs":{"imports":[{"path":"lit","kind":"import-statement","external":true},{"path":"lit/decorators.js","kind":"import-statement","external":true},{"path":"lit/directives/ref.js","kind":"import-statement","external":true}],"exports":["DxAxisResize","DxGrid"],"entryPoint":"packages/ui/lit-grid/src/index.ts","inputs":{"packages/ui/lit-grid/src/dx-grid.ts":{"bytesInOutput":18568},"packages/ui/lit-grid/src/types.ts":{"bytesInOutput":186},"packages/ui/lit-grid/src/index.ts":{"bytesInOutput":0}},"bytes":18943}}}
|