@dlh.io/bideux 0.1.0
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/LICENSE +202 -0
- package/README.md +90 -0
- package/dist/all.d.ts +14 -0
- package/dist/all.js +15 -0
- package/dist/all.js.map +1 -0
- package/dist/chunk-62IQGXLW.js +11470 -0
- package/dist/chunk-62IQGXLW.js.map +1 -0
- package/dist/chunk-75CRTQK7.js +315 -0
- package/dist/chunk-75CRTQK7.js.map +1 -0
- package/dist/chunk-FVO6E22Z.js +225 -0
- package/dist/chunk-FVO6E22Z.js.map +1 -0
- package/dist/chunk-GRITOB4M.js +337 -0
- package/dist/chunk-GRITOB4M.js.map +1 -0
- package/dist/chunk-HPFHIZWO.js +40 -0
- package/dist/chunk-HPFHIZWO.js.map +1 -0
- package/dist/chunk-IMNUQGHE.js +2864 -0
- package/dist/chunk-IMNUQGHE.js.map +1 -0
- package/dist/chunk-LHD445PJ.js +571 -0
- package/dist/chunk-LHD445PJ.js.map +1 -0
- package/dist/chunk-LPLBBHOW.js +386 -0
- package/dist/chunk-LPLBBHOW.js.map +1 -0
- package/dist/chunk-NGM5R3LW.js +881 -0
- package/dist/chunk-NGM5R3LW.js.map +1 -0
- package/dist/chunk-OMPR32AR.js +1320 -0
- package/dist/chunk-OMPR32AR.js.map +1 -0
- package/dist/chunk-QDQ5VVTC.js +255 -0
- package/dist/chunk-QDQ5VVTC.js.map +1 -0
- package/dist/chunk-RRWZKNDZ.js +1004 -0
- package/dist/chunk-RRWZKNDZ.js.map +1 -0
- package/dist/chunk-SRWIBMEB.js +178 -0
- package/dist/chunk-SRWIBMEB.js.map +1 -0
- package/dist/element/chunk-AOKCBPMV.js +1646 -0
- package/dist/element/chunk-AOKCBPMV.js.map +1 -0
- package/dist/element/chunk-B67SYRQP.js +281 -0
- package/dist/element/chunk-B67SYRQP.js.map +1 -0
- package/dist/element/chunk-FNRVFA2C.js +55 -0
- package/dist/element/chunk-FNRVFA2C.js.map +1 -0
- package/dist/element/chunk-G3C722QP.js +4707 -0
- package/dist/element/chunk-G3C722QP.js.map +1 -0
- package/dist/element/chunk-H5IFOSQP.js +346 -0
- package/dist/element/chunk-H5IFOSQP.js.map +1 -0
- package/dist/element/chunk-LXR3CLCN.js +30 -0
- package/dist/element/chunk-LXR3CLCN.js.map +1 -0
- package/dist/element/chunk-TFV4CJR4.js +183 -0
- package/dist/element/chunk-TFV4CJR4.js.map +1 -0
- package/dist/element/chunk-TXSK3CIN.js +859 -0
- package/dist/element/chunk-TXSK3CIN.js.map +1 -0
- package/dist/element/chunk-WDTTBY3S.js +45 -0
- package/dist/element/chunk-WDTTBY3S.js.map +1 -0
- package/dist/element/chunk-ZI3RYCAR.js +233 -0
- package/dist/element/chunk-ZI3RYCAR.js.map +1 -0
- package/dist/element/element.d.ts +3044 -0
- package/dist/element/element.js +146554 -0
- package/dist/element/element.js.map +1 -0
- package/dist/element/revo-grid.entry-7FHEBN3O.js +4817 -0
- package/dist/element/revo-grid.entry-7FHEBN3O.js.map +1 -0
- package/dist/element/revogr-attribution_7.entry-LSOFVZRA.js +1328 -0
- package/dist/element/revogr-attribution_7.entry-LSOFVZRA.js.map +1 -0
- package/dist/element/revogr-clipboard_3.entry-V74UIBPJ.js +494 -0
- package/dist/element/revogr-clipboard_3.entry-V74UIBPJ.js.map +1 -0
- package/dist/element/revogr-data_4.entry-2UBOKTFN.js +1041 -0
- package/dist/element/revogr-data_4.entry-2UBOKTFN.js.map +1 -0
- package/dist/element/revogr-filter-panel.entry-B24PLQU4.js +552 -0
- package/dist/element/revogr-filter-panel.entry-B24PLQU4.js.map +1 -0
- package/dist/index.d.ts +1041 -0
- package/dist/index.js +10 -0
- package/dist/index.js.map +1 -0
- package/dist/react.d.ts +1915 -0
- package/dist/react.js +14 -0
- package/dist/react.js.map +1 -0
- package/dist/renderers/echarts.d.ts +44 -0
- package/dist/renderers/echarts.js +6 -0
- package/dist/renderers/echarts.js.map +1 -0
- package/dist/renderers/index.d.ts +48 -0
- package/dist/renderers/index.js +12 -0
- package/dist/renderers/index.js.map +1 -0
- package/dist/renderers/revogrid.d.ts +76 -0
- package/dist/renderers/revogrid.js +6 -0
- package/dist/renderers/revogrid.js.map +1 -0
- package/dist/renderers/tabulator.d.ts +37 -0
- package/dist/renderers/tabulator.js +6 -0
- package/dist/renderers/tabulator.js.map +1 -0
- package/dist/result-table-CPls-277.d.ts +1885 -0
- package/dist/schema/dashboard.schema.json +4374 -0
- package/dist/schema/semantic-model.schema.json +1200 -0
- package/dist/schema/widget.schema.json +1793 -0
- package/dist/styles.css +156 -0
- package/dist/theme.css +1789 -0
- package/dist/types-CHFSsU_X.d.ts +1007 -0
- package/package.json +119 -0
|
@@ -0,0 +1,1328 @@
|
|
|
1
|
+
import { verifyTouchTarget, ViewportStore, calculateRowHeaderSize, getPropertyFromEvent } from './chunk-H5IFOSQP.js';
|
|
2
|
+
import { isEditInput, isShortcutModifier, isClear, isTab, isEnterKeyValue, isCopy, isCut, isPaste, isAll } from './chunk-FNRVFA2C.js';
|
|
3
|
+
import { getScrollbarSize, timeout } from './chunk-LXR3CLCN.js';
|
|
4
|
+
import { LocalScrollTimer, LocalScrollService, getContentSize, throttle } from './chunk-ZI3RYCAR.js';
|
|
5
|
+
import { ColumnService, getCellData, getCellEditor, getRange, isRangeSingleCell, HEADER_SLOT } from './chunk-TXSK3CIN.js';
|
|
6
|
+
import { codesLetter, getSourceItem, SELECTION_BORDER_CLASS, MOBILE_CLASS, DataStore, ROW_HEADER_TYPE, FOCUS_CLASS, TMP_SELECTION_BG_CLASS, getItemByIndex, RESIZE_INTERVAL, CELL_HANDLER_CLASS, getItemByPosition } from './chunk-AOKCBPMV.js';
|
|
7
|
+
import { debounce } from './chunk-TFV4CJR4.js';
|
|
8
|
+
import { registerInstance, h, Host, createEvent, getElement } from './chunk-G3C722QP.js';
|
|
9
|
+
|
|
10
|
+
// ../../node_modules/.pnpm/@revolist+revogrid@4.25.2/node_modules/@revolist/revogrid/dist/esm/revogr-attribution_7.entry.js
|
|
11
|
+
var Attribution = class {
|
|
12
|
+
constructor(hostRef) {
|
|
13
|
+
registerInstance(this, hostRef);
|
|
14
|
+
}
|
|
15
|
+
render() {
|
|
16
|
+
return h(Host, { key: "3d66475a019010c24b6c610ccc047e01c35178f9" }, h("a", { key: "777afddffef0309a697b9c14ee73c0001ac22b71", href: "https://rv-grid.com/guide/attribution", target: "_blank", rel: "noopener noreferrer", title: "Made with \u2764\uFE0F by Revolist OU Team", class: "value" }, "RevoGrid"));
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
var RevoGridExtra = class {
|
|
20
|
+
constructor(hostRef) {
|
|
21
|
+
registerInstance(this, hostRef);
|
|
22
|
+
this.nodes = [];
|
|
23
|
+
this.update = 1;
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* Refreshes the extra component. Useful if you want to manually
|
|
27
|
+
* force the component to re-render.
|
|
28
|
+
*/
|
|
29
|
+
async refresh() {
|
|
30
|
+
this.update *= -1;
|
|
31
|
+
}
|
|
32
|
+
render() {
|
|
33
|
+
var _a;
|
|
34
|
+
return (_a = this.nodes) === null || _a === void 0 ? void 0 : _a.map((node) => {
|
|
35
|
+
if (typeof node === "function") {
|
|
36
|
+
const config = {};
|
|
37
|
+
const getNodes = () => [node({ refresh: () => {
|
|
38
|
+
var _a2;
|
|
39
|
+
return (_a2 = config.refresh) === null || _a2 === void 0 ? void 0 : _a2.call(config);
|
|
40
|
+
} })];
|
|
41
|
+
return h("revogr-extra", { nodes: getNodes(), ref: (el) => {
|
|
42
|
+
if (el) {
|
|
43
|
+
config.refresh = () => {
|
|
44
|
+
el.nodes = getNodes();
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
} });
|
|
48
|
+
}
|
|
49
|
+
return node;
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
function collectModelsOfRange(data, store) {
|
|
54
|
+
const models = {};
|
|
55
|
+
for (let i in data) {
|
|
56
|
+
const rowIndex = parseInt(i, 10);
|
|
57
|
+
models[rowIndex] = getSourceItem(store, rowIndex);
|
|
58
|
+
}
|
|
59
|
+
return models;
|
|
60
|
+
}
|
|
61
|
+
function getFocusCellBasedOnEvent(e, data) {
|
|
62
|
+
if (e.defaultPrevented) {
|
|
63
|
+
return null;
|
|
64
|
+
}
|
|
65
|
+
const x = getPropertyFromEvent(e, "clientX");
|
|
66
|
+
const y = getPropertyFromEvent(e, "clientY");
|
|
67
|
+
if (x === null || y === null) {
|
|
68
|
+
return null;
|
|
69
|
+
}
|
|
70
|
+
const focusCell = getCurrentCell({ x, y }, data);
|
|
71
|
+
if (isAfterLast(focusCell, data.lastCell)) {
|
|
72
|
+
return null;
|
|
73
|
+
}
|
|
74
|
+
return focusCell;
|
|
75
|
+
}
|
|
76
|
+
function getCurrentCell({ x, y }, { el, rows, cols }) {
|
|
77
|
+
const { top, left, height, width } = el.getBoundingClientRect();
|
|
78
|
+
let cellY = y - top;
|
|
79
|
+
let cellX = x - left;
|
|
80
|
+
if (cellY >= height) {
|
|
81
|
+
cellY = height - 1;
|
|
82
|
+
}
|
|
83
|
+
if (cellX >= width) {
|
|
84
|
+
cellX = width - 1;
|
|
85
|
+
}
|
|
86
|
+
const rgRow = getItemByPosition(rows, cellY + (rows.renderOffset || 0));
|
|
87
|
+
const rgCol = getItemByPosition(cols, cellX + (cols.renderOffset || 0));
|
|
88
|
+
if (rgCol.itemIndex < 0) {
|
|
89
|
+
rgCol.itemIndex = 0;
|
|
90
|
+
}
|
|
91
|
+
if (rgRow.itemIndex < 0) {
|
|
92
|
+
rgRow.itemIndex = 0;
|
|
93
|
+
}
|
|
94
|
+
return { x: rgCol.itemIndex, y: rgRow.itemIndex };
|
|
95
|
+
}
|
|
96
|
+
function getCoordinate(range, focus, changes, isMulti = false) {
|
|
97
|
+
const updateCoordinate = (c, pos = 0) => {
|
|
98
|
+
const start = { x: range.x, y: range.y };
|
|
99
|
+
const end = isMulti ? { x: range.x1, y: range.y1 } : start;
|
|
100
|
+
const point = end[c] > focus[c] ? end : start;
|
|
101
|
+
point[c] += pos;
|
|
102
|
+
return { start, end };
|
|
103
|
+
};
|
|
104
|
+
if (changes.x) {
|
|
105
|
+
return updateCoordinate("x", changes["x"]);
|
|
106
|
+
}
|
|
107
|
+
if (changes.y) {
|
|
108
|
+
return updateCoordinate("y", changes["y"]);
|
|
109
|
+
}
|
|
110
|
+
return null;
|
|
111
|
+
}
|
|
112
|
+
function isAfterLast({ x, y }, lastCell) {
|
|
113
|
+
return x >= lastCell.x || y >= lastCell.y;
|
|
114
|
+
}
|
|
115
|
+
function isBeforeFirst({ x, y }) {
|
|
116
|
+
return x < 0 || y < 0;
|
|
117
|
+
}
|
|
118
|
+
function styleByCellProps(styles) {
|
|
119
|
+
return {
|
|
120
|
+
left: `${styles.left}px`,
|
|
121
|
+
top: `${styles.top}px`,
|
|
122
|
+
width: `${styles.width}px`,
|
|
123
|
+
height: `${styles.height}px`
|
|
124
|
+
};
|
|
125
|
+
}
|
|
126
|
+
function getCell({ x, y, x1, y1 }, dimensionRow, dimensionCol) {
|
|
127
|
+
const rowOffset = dimensionRow.renderOffset || 0;
|
|
128
|
+
const colOffset = dimensionCol.renderOffset || 0;
|
|
129
|
+
const top = getItemByIndex(dimensionRow, y).start - rowOffset;
|
|
130
|
+
const left = getItemByIndex(dimensionCol, x).start - colOffset;
|
|
131
|
+
const bottom = getItemByIndex(dimensionRow, y1).end - rowOffset;
|
|
132
|
+
const right = getItemByIndex(dimensionCol, x1).end - colOffset;
|
|
133
|
+
return {
|
|
134
|
+
left,
|
|
135
|
+
right,
|
|
136
|
+
top,
|
|
137
|
+
bottom,
|
|
138
|
+
width: right - left,
|
|
139
|
+
height: bottom - top
|
|
140
|
+
};
|
|
141
|
+
}
|
|
142
|
+
var revogrFocusStyleCss = () => `revogr-focus.focused-cell{box-shadow:-1px 0 0 var(--rg-theme-selection-border) inset, 1px 0 0 var(--rg-theme-selection-border) inset, 0 -1px 0 var(--rg-theme-selection-border) inset, 0 1px 0 var(--rg-theme-selection-border) inset;position:absolute;pointer-events:none;z-index:9;display:block !important}`;
|
|
143
|
+
var RevogrFocus$1 = class RevogrFocus {
|
|
144
|
+
constructor(hostRef) {
|
|
145
|
+
registerInstance(this, hostRef);
|
|
146
|
+
this.beforeFocusRender = createEvent(this, "beforefocusrender", 7);
|
|
147
|
+
this.beforeScrollIntoView = createEvent(this, "beforescrollintoview", 7);
|
|
148
|
+
this.afterFocus = createEvent(this, "afterfocus", 7);
|
|
149
|
+
this.focusTemplate = null;
|
|
150
|
+
this.activeFocus = null;
|
|
151
|
+
}
|
|
152
|
+
componentDidRender() {
|
|
153
|
+
var _a, _b;
|
|
154
|
+
const currentFocus = this.selectionStore.get("focus");
|
|
155
|
+
if (((_a = this.activeFocus) === null || _a === void 0 ? void 0 : _a.x) === (currentFocus === null || currentFocus === void 0 ? void 0 : currentFocus.x) && ((_b = this.activeFocus) === null || _b === void 0 ? void 0 : _b.y) === (currentFocus === null || currentFocus === void 0 ? void 0 : currentFocus.y)) {
|
|
156
|
+
return;
|
|
157
|
+
}
|
|
158
|
+
this.activeFocus = currentFocus;
|
|
159
|
+
if (currentFocus && this.el) {
|
|
160
|
+
const beforeScrollIn = this.beforeScrollIntoView.emit({ el: this.el });
|
|
161
|
+
if (!beforeScrollIn.defaultPrevented) {
|
|
162
|
+
this.el.scrollIntoView({
|
|
163
|
+
block: "nearest",
|
|
164
|
+
inline: "nearest"
|
|
165
|
+
});
|
|
166
|
+
}
|
|
167
|
+
const model = getSourceItem(this.dataStore, currentFocus.y);
|
|
168
|
+
const column = getSourceItem(this.colData, currentFocus.x);
|
|
169
|
+
this.afterFocus.emit({
|
|
170
|
+
model,
|
|
171
|
+
column,
|
|
172
|
+
rowType: this.rowType,
|
|
173
|
+
colType: this.colType,
|
|
174
|
+
rowIndex: currentFocus.y,
|
|
175
|
+
colIndex: currentFocus.x
|
|
176
|
+
});
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
render() {
|
|
180
|
+
var _a;
|
|
181
|
+
const editCell = this.selectionStore.get("edit");
|
|
182
|
+
if (editCell) {
|
|
183
|
+
return;
|
|
184
|
+
}
|
|
185
|
+
const focusCell = this.selectionStore.get("focus");
|
|
186
|
+
if (!focusCell) {
|
|
187
|
+
return;
|
|
188
|
+
}
|
|
189
|
+
const event = this.beforeFocusRender.emit({
|
|
190
|
+
range: Object.assign(Object.assign({}, focusCell), { x1: focusCell.x, y1: focusCell.y }),
|
|
191
|
+
rowType: this.rowType,
|
|
192
|
+
colType: this.colType,
|
|
193
|
+
rowDimension: Object.assign({}, this.dimensionRow.state),
|
|
194
|
+
colDimension: Object.assign({}, this.dimensionCol.state)
|
|
195
|
+
});
|
|
196
|
+
if (event.defaultPrevented) {
|
|
197
|
+
return h("slot", null);
|
|
198
|
+
}
|
|
199
|
+
const { detail } = event;
|
|
200
|
+
const cell = getCell(detail.range, event.detail.rowDimension, event.detail.colDimension);
|
|
201
|
+
const styles = styleByCellProps(cell);
|
|
202
|
+
const extra = (_a = this.focusTemplate) === null || _a === void 0 ? void 0 : _a.call(this, h, detail);
|
|
203
|
+
const props = {
|
|
204
|
+
class: { [FOCUS_CLASS]: true },
|
|
205
|
+
style: styles
|
|
206
|
+
};
|
|
207
|
+
return h(Host, Object.assign({}, props), h("slot", null), extra);
|
|
208
|
+
}
|
|
209
|
+
get el() {
|
|
210
|
+
return getElement(this);
|
|
211
|
+
}
|
|
212
|
+
};
|
|
213
|
+
RevogrFocus$1.style = revogrFocusStyleCss();
|
|
214
|
+
var DIRECTION_CODES = [
|
|
215
|
+
codesLetter.TAB,
|
|
216
|
+
codesLetter.ARROW_UP,
|
|
217
|
+
codesLetter.ARROW_DOWN,
|
|
218
|
+
codesLetter.ARROW_LEFT,
|
|
219
|
+
codesLetter.ARROW_RIGHT
|
|
220
|
+
];
|
|
221
|
+
var KeyboardService = class {
|
|
222
|
+
constructor(sv) {
|
|
223
|
+
this.sv = sv;
|
|
224
|
+
}
|
|
225
|
+
/**
|
|
226
|
+
* Appends printable key input that arrives after edit mode was requested
|
|
227
|
+
* but before the editor input has mounted or received focus.
|
|
228
|
+
*/
|
|
229
|
+
appendPendingEditValue(e) {
|
|
230
|
+
if (isShortcutModifier(e) || e.key.length !== 1 || e.target instanceof HTMLElement && isEditInput(e.target)) {
|
|
231
|
+
return false;
|
|
232
|
+
}
|
|
233
|
+
const editCell = this.sv.selectionStore.get("edit");
|
|
234
|
+
if (typeof (editCell === null || editCell === void 0 ? void 0 : editCell.val) !== "string") {
|
|
235
|
+
return false;
|
|
236
|
+
}
|
|
237
|
+
e.preventDefault();
|
|
238
|
+
this.sv.selectionStore.set("edit", Object.assign(Object.assign({}, editCell), { val: `${editCell.val}${e.key}` }));
|
|
239
|
+
return true;
|
|
240
|
+
}
|
|
241
|
+
async keyDown(e, canRange, isEditMode, { range, focus }) {
|
|
242
|
+
if (isEditMode) {
|
|
243
|
+
if (this.appendPendingEditValue(e)) {
|
|
244
|
+
return;
|
|
245
|
+
}
|
|
246
|
+
switch (e.code) {
|
|
247
|
+
case codesLetter.ESCAPE:
|
|
248
|
+
this.sv.cancel();
|
|
249
|
+
break;
|
|
250
|
+
case codesLetter.TAB:
|
|
251
|
+
this.keyChangeSelection(e, canRange);
|
|
252
|
+
break;
|
|
253
|
+
}
|
|
254
|
+
return;
|
|
255
|
+
}
|
|
256
|
+
if (range && isClear(e.code)) {
|
|
257
|
+
this.sv.clearCell();
|
|
258
|
+
return;
|
|
259
|
+
}
|
|
260
|
+
if (!focus) {
|
|
261
|
+
return;
|
|
262
|
+
}
|
|
263
|
+
if (isTab(e.code)) {
|
|
264
|
+
this.keyChangeSelection(e, canRange);
|
|
265
|
+
return;
|
|
266
|
+
}
|
|
267
|
+
if (isEnterKeyValue(e.key)) {
|
|
268
|
+
this.sv.change();
|
|
269
|
+
return;
|
|
270
|
+
}
|
|
271
|
+
if (isCopy(e)) {
|
|
272
|
+
return;
|
|
273
|
+
}
|
|
274
|
+
if (isCut(e)) {
|
|
275
|
+
return;
|
|
276
|
+
}
|
|
277
|
+
if (isPaste(e)) {
|
|
278
|
+
this.sv.internalPaste();
|
|
279
|
+
return;
|
|
280
|
+
}
|
|
281
|
+
if (isAll(e)) {
|
|
282
|
+
if (canRange) {
|
|
283
|
+
this.selectAll(e);
|
|
284
|
+
}
|
|
285
|
+
return;
|
|
286
|
+
}
|
|
287
|
+
if (!isShortcutModifier(e) && e.key.length === 1) {
|
|
288
|
+
if (this.sv.change(e.key)) {
|
|
289
|
+
e.preventDefault();
|
|
290
|
+
}
|
|
291
|
+
return;
|
|
292
|
+
}
|
|
293
|
+
if (await this.keyChangeSelection(e, canRange)) {
|
|
294
|
+
return;
|
|
295
|
+
}
|
|
296
|
+
}
|
|
297
|
+
selectAll(e) {
|
|
298
|
+
const range = this.sv.selectionStore.get("range");
|
|
299
|
+
const focus = this.sv.selectionStore.get("focus");
|
|
300
|
+
if (!range || !focus) {
|
|
301
|
+
return;
|
|
302
|
+
}
|
|
303
|
+
e.preventDefault();
|
|
304
|
+
this.sv.selectAll();
|
|
305
|
+
}
|
|
306
|
+
async keyChangeSelection(e, canRange) {
|
|
307
|
+
const data = this.changeDirectionKey(e, canRange);
|
|
308
|
+
if (!data) {
|
|
309
|
+
return false;
|
|
310
|
+
}
|
|
311
|
+
await timeout(RESIZE_INTERVAL + 30);
|
|
312
|
+
const range = this.sv.selectionStore.get("range");
|
|
313
|
+
const focus = this.sv.selectionStore.get("focus");
|
|
314
|
+
return this.keyPositionChange(data.changes, range, focus, data.isMulti);
|
|
315
|
+
}
|
|
316
|
+
keyPositionChange(changes, range, focus, isMulti = false) {
|
|
317
|
+
if (!range || !focus) {
|
|
318
|
+
return false;
|
|
319
|
+
}
|
|
320
|
+
const data = getCoordinate(range, focus, changes, isMulti);
|
|
321
|
+
if (!data) {
|
|
322
|
+
return false;
|
|
323
|
+
}
|
|
324
|
+
const eData = this.sv.getData();
|
|
325
|
+
if (isMulti) {
|
|
326
|
+
const isOutOfBounds = [data.start, data.end].some((cell) => isAfterLast(cell, eData.lastCell) || isBeforeFirst(cell));
|
|
327
|
+
if (isOutOfBounds) {
|
|
328
|
+
return false;
|
|
329
|
+
}
|
|
330
|
+
const range2 = getRange(data.start, data.end);
|
|
331
|
+
return this.sv.range(range2);
|
|
332
|
+
}
|
|
333
|
+
return this.sv.focus(data.start, changes, isAfterLast(data.start, eData.lastCell) ? 1 : isBeforeFirst(data.start) ? -1 : 0);
|
|
334
|
+
}
|
|
335
|
+
/** Monitor key direction changes */
|
|
336
|
+
changeDirectionKey(e, canRange) {
|
|
337
|
+
const isMulti = canRange && e.shiftKey;
|
|
338
|
+
if (DIRECTION_CODES.includes(e.code)) {
|
|
339
|
+
e.preventDefault();
|
|
340
|
+
}
|
|
341
|
+
if (e.shiftKey) {
|
|
342
|
+
switch (e.code) {
|
|
343
|
+
case codesLetter.TAB:
|
|
344
|
+
return { changes: { x: -1 }, isMulti: false };
|
|
345
|
+
}
|
|
346
|
+
}
|
|
347
|
+
switch (e.code) {
|
|
348
|
+
case codesLetter.ARROW_UP:
|
|
349
|
+
return { changes: { y: -1 }, isMulti };
|
|
350
|
+
case codesLetter.ARROW_DOWN:
|
|
351
|
+
return { changes: { y: 1 }, isMulti };
|
|
352
|
+
case codesLetter.ARROW_LEFT:
|
|
353
|
+
return { changes: { x: -1 }, isMulti };
|
|
354
|
+
case codesLetter.TAB:
|
|
355
|
+
case codesLetter.ARROW_RIGHT:
|
|
356
|
+
return { changes: { x: 1 }, isMulti };
|
|
357
|
+
}
|
|
358
|
+
}
|
|
359
|
+
};
|
|
360
|
+
var AutoFillService = class {
|
|
361
|
+
constructor(sv) {
|
|
362
|
+
this.sv = sv;
|
|
363
|
+
this.autoFillType = null;
|
|
364
|
+
this.autoFillInitial = null;
|
|
365
|
+
this.autoFillStart = null;
|
|
366
|
+
this.autoFillLast = null;
|
|
367
|
+
}
|
|
368
|
+
/**
|
|
369
|
+
* Render autofill box
|
|
370
|
+
* @param range
|
|
371
|
+
* @param selectionFocus
|
|
372
|
+
*/
|
|
373
|
+
renderAutofill(range, selectionFocus, isMobile = false) {
|
|
374
|
+
let handlerStyle;
|
|
375
|
+
if (range) {
|
|
376
|
+
handlerStyle = getCell(range, this.sv.dimensionRow.state, this.sv.dimensionCol.state);
|
|
377
|
+
} else {
|
|
378
|
+
handlerStyle = getCell(Object.assign(Object.assign({}, selectionFocus), { x1: selectionFocus.x, y1: selectionFocus.y }), this.sv.dimensionRow.state, this.sv.dimensionCol.state);
|
|
379
|
+
}
|
|
380
|
+
return h("div", { class: {
|
|
381
|
+
[CELL_HANDLER_CLASS]: true,
|
|
382
|
+
[MOBILE_CLASS]: isMobile
|
|
383
|
+
}, style: {
|
|
384
|
+
left: `${handlerStyle.right}px`,
|
|
385
|
+
top: `${handlerStyle.bottom}px`
|
|
386
|
+
}, onMouseDown: (e) => this.autoFillHandler(e), onTouchStart: (e) => this.autoFillHandler(e) });
|
|
387
|
+
}
|
|
388
|
+
autoFillHandler(e, type = "AutoFill") {
|
|
389
|
+
let target = null;
|
|
390
|
+
if (e.target instanceof Element) {
|
|
391
|
+
target = e.target;
|
|
392
|
+
}
|
|
393
|
+
if (!target) {
|
|
394
|
+
return;
|
|
395
|
+
}
|
|
396
|
+
this.selectionStart(target, this.sv.getData(), type);
|
|
397
|
+
e.preventDefault();
|
|
398
|
+
}
|
|
399
|
+
get isAutoFill() {
|
|
400
|
+
return !!this.autoFillType;
|
|
401
|
+
}
|
|
402
|
+
/**
|
|
403
|
+
* Process mouse move events
|
|
404
|
+
*/
|
|
405
|
+
selectionMouseMove(e) {
|
|
406
|
+
if (!this.onMouseMoveAutofill) {
|
|
407
|
+
this.onMouseMoveAutofill = debounce((e2, data) => this.doAutofillMouseMove(e2, data), 5);
|
|
408
|
+
}
|
|
409
|
+
if (this.isAutoFill) {
|
|
410
|
+
this.onMouseMoveAutofill(e, this.sv.getData());
|
|
411
|
+
}
|
|
412
|
+
}
|
|
413
|
+
getFocus(focus, range) {
|
|
414
|
+
if (!focus && range) {
|
|
415
|
+
focus = { x: range.x, y: range.y };
|
|
416
|
+
}
|
|
417
|
+
return focus || null;
|
|
418
|
+
}
|
|
419
|
+
/**
|
|
420
|
+
* Autofill logic:
|
|
421
|
+
* on mouse move apply based on previous direction (if present)
|
|
422
|
+
*/
|
|
423
|
+
doAutofillMouseMove(event, data) {
|
|
424
|
+
if (!this.autoFillInitial) {
|
|
425
|
+
return;
|
|
426
|
+
}
|
|
427
|
+
const x = getPropertyFromEvent(event, "clientX", MOBILE_CLASS);
|
|
428
|
+
const y = getPropertyFromEvent(event, "clientY", MOBILE_CLASS);
|
|
429
|
+
if (x === null || y === null) {
|
|
430
|
+
return;
|
|
431
|
+
}
|
|
432
|
+
const current = getCurrentCell({ x, y }, data);
|
|
433
|
+
if (!this.autoFillLast) {
|
|
434
|
+
if (!this.autoFillLast) {
|
|
435
|
+
this.autoFillLast = this.autoFillStart;
|
|
436
|
+
}
|
|
437
|
+
}
|
|
438
|
+
if (isAfterLast(current, data.lastCell)) {
|
|
439
|
+
return;
|
|
440
|
+
}
|
|
441
|
+
this.autoFillLast = current;
|
|
442
|
+
const isSame = current.x === this.autoFillInitial.x && current.y === this.autoFillInitial.y;
|
|
443
|
+
if (isSame) {
|
|
444
|
+
this.sv.setTempRange(null);
|
|
445
|
+
} else {
|
|
446
|
+
const area = getRange(this.autoFillInitial, this.autoFillLast);
|
|
447
|
+
this.sv.setTempRange({
|
|
448
|
+
area,
|
|
449
|
+
type: this.autoFillType
|
|
450
|
+
});
|
|
451
|
+
}
|
|
452
|
+
}
|
|
453
|
+
/**
|
|
454
|
+
* Range selection started
|
|
455
|
+
* Mode @param type:
|
|
456
|
+
* Can be triggered from MouseDown selection on element
|
|
457
|
+
* Or can be triggered on corner square drag
|
|
458
|
+
*/
|
|
459
|
+
selectionStart(target, data, type = "Selection") {
|
|
460
|
+
const { top, left } = target.getBoundingClientRect();
|
|
461
|
+
this.autoFillInitial = this.getFocus(data.focus, data.range);
|
|
462
|
+
this.autoFillType = type;
|
|
463
|
+
this.autoFillStart = getCurrentCell({ x: left, y: top }, data);
|
|
464
|
+
}
|
|
465
|
+
/**
|
|
466
|
+
* Clear current range selection on mouse up and mouse leave events
|
|
467
|
+
*/
|
|
468
|
+
clearAutoFillSelection(focus, oldRange) {
|
|
469
|
+
if (this.autoFillInitial) {
|
|
470
|
+
this.autoFillInitial = this.getFocus(focus, oldRange);
|
|
471
|
+
if (this.autoFillType === "AutoFill") {
|
|
472
|
+
const range = getRange(this.autoFillInitial, this.autoFillLast);
|
|
473
|
+
if (range) {
|
|
474
|
+
const { defaultPrevented: stopApply, detail: { range: newRange } } = this.sv.clearRangeDataApply({
|
|
475
|
+
range
|
|
476
|
+
});
|
|
477
|
+
if (!stopApply && oldRange) {
|
|
478
|
+
this.applyRangeWithData(newRange, oldRange);
|
|
479
|
+
} else {
|
|
480
|
+
this.sv.setTempRange(null);
|
|
481
|
+
}
|
|
482
|
+
}
|
|
483
|
+
} else {
|
|
484
|
+
this.applyRangeOnly(this.autoFillInitial, this.autoFillLast);
|
|
485
|
+
}
|
|
486
|
+
}
|
|
487
|
+
this.resetAutoFillState();
|
|
488
|
+
}
|
|
489
|
+
/**
|
|
490
|
+
* Reset autofill state
|
|
491
|
+
*/
|
|
492
|
+
resetAutoFillState() {
|
|
493
|
+
this.autoFillType = null;
|
|
494
|
+
this.autoFillInitial = null;
|
|
495
|
+
this.autoFillLast = null;
|
|
496
|
+
this.autoFillStart = null;
|
|
497
|
+
}
|
|
498
|
+
/**
|
|
499
|
+
* Trigger range apply events and handle responses
|
|
500
|
+
*/
|
|
501
|
+
onRangeApply(newData, newRange, oldRange) {
|
|
502
|
+
this.sv.rangeDataApply({
|
|
503
|
+
data: newData,
|
|
504
|
+
models: collectModelsOfRange(newData, this.sv.dataStore),
|
|
505
|
+
type: this.sv.dataStore.get("type"),
|
|
506
|
+
oldRange,
|
|
507
|
+
newRange
|
|
508
|
+
});
|
|
509
|
+
this.sv.setRange(newRange);
|
|
510
|
+
}
|
|
511
|
+
/** Apply range and copy data during range application */
|
|
512
|
+
applyRangeWithData(newRange, rangeToCopy) {
|
|
513
|
+
const rangeData = {
|
|
514
|
+
type: this.sv.dataStore.get("type"),
|
|
515
|
+
colType: this.sv.columnService.type,
|
|
516
|
+
newData: {},
|
|
517
|
+
mapping: {},
|
|
518
|
+
newRange,
|
|
519
|
+
oldRange: rangeToCopy
|
|
520
|
+
};
|
|
521
|
+
const { mapping, changed } = this.sv.columnService.getRangeData(rangeData, this.sv.columnService.columns);
|
|
522
|
+
rangeData.newData = changed;
|
|
523
|
+
rangeData.mapping = mapping;
|
|
524
|
+
let e = this.sv.selectionChanged(rangeData);
|
|
525
|
+
if (e.defaultPrevented) {
|
|
526
|
+
this.sv.setTempRange(null);
|
|
527
|
+
return;
|
|
528
|
+
}
|
|
529
|
+
e = this.sv.rangeCopy(rangeData);
|
|
530
|
+
if (e.defaultPrevented) {
|
|
531
|
+
this.sv.setRange(newRange);
|
|
532
|
+
return;
|
|
533
|
+
}
|
|
534
|
+
this.onRangeApply(rangeData.newData, newRange, rangeToCopy);
|
|
535
|
+
}
|
|
536
|
+
/**
|
|
537
|
+
* Update range selection only,
|
|
538
|
+
* no data change (mouse selection)
|
|
539
|
+
*/
|
|
540
|
+
applyRangeOnly(start, end) {
|
|
541
|
+
if (!start || !end) {
|
|
542
|
+
return;
|
|
543
|
+
}
|
|
544
|
+
const newRange = getRange(start, end);
|
|
545
|
+
this.sv.setRange(newRange);
|
|
546
|
+
}
|
|
547
|
+
};
|
|
548
|
+
function getRangeFillClipboardData(data, useClipboard) {
|
|
549
|
+
var _a;
|
|
550
|
+
if (!isClipboardRangeFillEnabled(useClipboard)) {
|
|
551
|
+
return null;
|
|
552
|
+
}
|
|
553
|
+
const normalized = trimTrailingEmptyClipboardRows(data);
|
|
554
|
+
return normalized.length === 1 && ((_a = normalized[0]) === null || _a === void 0 ? void 0 : _a.length) === 1 ? normalized : null;
|
|
555
|
+
}
|
|
556
|
+
function isClipboardRangeFillEnabled(useClipboard) {
|
|
557
|
+
return typeof useClipboard === "object" && useClipboard.rangeFill === true;
|
|
558
|
+
}
|
|
559
|
+
function trimTrailingEmptyClipboardRows(data) {
|
|
560
|
+
const rows = [...data];
|
|
561
|
+
while (rows.length > 1 && isEmptyClipboardRow(rows[rows.length - 1])) {
|
|
562
|
+
rows.pop();
|
|
563
|
+
}
|
|
564
|
+
return rows;
|
|
565
|
+
}
|
|
566
|
+
function isEmptyClipboardRow(row) {
|
|
567
|
+
return !row || row.every((cell) => cell === "");
|
|
568
|
+
}
|
|
569
|
+
var revogrOverlayStyleCss = () => `revogr-overlay-selection{display:block;position:relative;width:100%}revogr-overlay-selection .autofill-handle{position:absolute;width:14px;height:14px;margin-left:-13px;margin-top:-13px;z-index:10;cursor:crosshair}revogr-overlay-selection .autofill-handle::before{content:"";position:absolute;right:0;bottom:0;width:10px;height:10px;background:var(--rg-theme-autofill-handle-bg);border:1px solid var(--rg-theme-autofill-handle-border);box-sizing:border-box}revogr-overlay-selection.mobile .autofill-handle{position:absolute;width:30px;height:30px;margin-left:-29px;margin-top:-29px;z-index:10;cursor:crosshair}revogr-overlay-selection.mobile .autofill-handle::before{content:"";position:absolute;right:0;bottom:0;width:12px;height:12px;background:var(--rg-theme-autofill-handle-bg);border:1px solid var(--rg-theme-autofill-handle-border);box-sizing:border-box}revogr-overlay-selection .selection-border-range{position:absolute;pointer-events:none;z-index:9;background-color:var(--rg-theme-selection-bg)}revogr-overlay-selection .selection-border-range .range-handlers{height:100%;background-color:transparent;width:75%;max-width:50px;min-width:20px;left:50%;transform:translateX(-50%);position:absolute}revogr-overlay-selection .selection-border-range .range-handlers>span{pointer-events:auto;height:20px;width:20px;position:absolute;left:50%;transform:translateX(-50%)}revogr-overlay-selection .selection-border-range .range-handlers>span:before,revogr-overlay-selection .selection-border-range .range-handlers>span:after{position:absolute;border-radius:5px;width:15px;height:5px;left:50%;transform:translateX(-50%);background-color:var(--rg-theme-range-handle-bg)}revogr-overlay-selection .selection-border-range .range-handlers>span:first-child{top:-7px}revogr-overlay-selection .selection-border-range .range-handlers>span:first-child:before{content:"";top:0}revogr-overlay-selection .selection-border-range .range-handlers>span:last-child{bottom:-7px}revogr-overlay-selection .selection-border-range .range-handlers>span:last-child:after{content:"";bottom:0}revogr-overlay-selection .selection-border-range{box-shadow:-1px 0 0 var(--rg-theme-selection-border) inset, 1px 0 0 var(--rg-theme-selection-border) inset, 0 -1px 0 var(--rg-theme-selection-border) inset, 0 1px 0 var(--rg-theme-selection-border) inset}revogr-overlay-selection revogr-edit{z-index:10}`;
|
|
570
|
+
var OverlaySelection = class {
|
|
571
|
+
constructor(hostRef) {
|
|
572
|
+
registerInstance(this, hostRef);
|
|
573
|
+
this.beforeCopyRegion = createEvent(this, "beforecopyregion", 7);
|
|
574
|
+
this.beforeRegionPaste = createEvent(this, "beforepasteregion", 7);
|
|
575
|
+
this.cellEditApply = createEvent(this, "celleditapply", 7);
|
|
576
|
+
this.beforeFocusCell = createEvent(this, "beforecellfocusinit", 7);
|
|
577
|
+
this.beforeNextViewportFocus = createEvent(this, "beforenextvpfocus", 7);
|
|
578
|
+
this.setEdit = createEvent(this, "setedit", 7);
|
|
579
|
+
this.beforeApplyRange = createEvent(this, "beforeapplyrange", 7);
|
|
580
|
+
this.beforeSetRange = createEvent(this, "beforesetrange", 7);
|
|
581
|
+
this.setRange = createEvent(this, "setrange", 7);
|
|
582
|
+
this.beforeEditRender = createEvent(this, "beforeeditrender", 7);
|
|
583
|
+
this.selectAll = createEvent(this, "selectall", 7);
|
|
584
|
+
this.cancelEdit = createEvent(this, "canceledit", 7);
|
|
585
|
+
this.setTempRange = createEvent(this, "settemprange", 7);
|
|
586
|
+
this.beforeSetTempRange = createEvent(this, "beforesettemprange", 7);
|
|
587
|
+
this.applyFocus = createEvent(this, "applyfocus", 7);
|
|
588
|
+
this.focusCell = createEvent(this, "focuscell", 7);
|
|
589
|
+
this.beforeRangeDataApply = createEvent(this, "beforerangedataapply", 7);
|
|
590
|
+
this.selectionChange = createEvent(this, "selectionchangeinit", 7);
|
|
591
|
+
this.beforeRangeCopyApply = createEvent(this, "beforerangecopyapply", 7);
|
|
592
|
+
this.rangeEditApply = createEvent(this, "rangeeditapply", 7);
|
|
593
|
+
this.rangeClipboardCopy = createEvent(this, "clipboardrangecopy", 7);
|
|
594
|
+
this.rangeClipboardPaste = createEvent(this, "clipboardrangepaste", 7);
|
|
595
|
+
this.beforeKeyDown = createEvent(this, "beforekeydown", 7);
|
|
596
|
+
this.beforeKeyUp = createEvent(this, "beforekeyup", 7);
|
|
597
|
+
this.beforeCellSave = createEvent(this, "beforecellsave", 7);
|
|
598
|
+
this.cellEditDone = createEvent(this, "celledit", 7);
|
|
599
|
+
this.applyChangesOnClose = false;
|
|
600
|
+
this.keyboardService = null;
|
|
601
|
+
this.autoFillService = null;
|
|
602
|
+
this.unsubscribeSelectionStore = [];
|
|
603
|
+
}
|
|
604
|
+
// #endregion
|
|
605
|
+
// #region Listeners
|
|
606
|
+
onMouseMove(e) {
|
|
607
|
+
var _a;
|
|
608
|
+
if (this.selectionStore.get("focus")) {
|
|
609
|
+
(_a = this.autoFillService) === null || _a === void 0 ? void 0 : _a.selectionMouseMove(e);
|
|
610
|
+
}
|
|
611
|
+
}
|
|
612
|
+
/**
|
|
613
|
+
* Action finished inside the document.
|
|
614
|
+
* Pointer left document, clear any active operation.
|
|
615
|
+
*/
|
|
616
|
+
onMouseUp() {
|
|
617
|
+
var _a;
|
|
618
|
+
(_a = this.autoFillService) === null || _a === void 0 ? void 0 : _a.clearAutoFillSelection(this.selectionStore.get("focus"), this.selectionStore.get("range"));
|
|
619
|
+
}
|
|
620
|
+
/**
|
|
621
|
+
* Row drag started.
|
|
622
|
+
* This event is fired when drag action started on cell.
|
|
623
|
+
*/
|
|
624
|
+
onCellDrag(e) {
|
|
625
|
+
var _a;
|
|
626
|
+
(_a = this.orderEditor) === null || _a === void 0 ? void 0 : _a.dragStart(e.detail);
|
|
627
|
+
}
|
|
628
|
+
/**
|
|
629
|
+
* Get keyboard down from element.
|
|
630
|
+
* This event is fired when keyboard key is released.
|
|
631
|
+
*/
|
|
632
|
+
onKeyUp(e) {
|
|
633
|
+
this.beforeKeyUp.emit(Object.assign({ original: e }, this.getData()));
|
|
634
|
+
}
|
|
635
|
+
/**
|
|
636
|
+
* Get keyboard down from element.
|
|
637
|
+
* This event is fired when keyboard key is pressed.
|
|
638
|
+
*/
|
|
639
|
+
onKeyDown(e) {
|
|
640
|
+
var _a;
|
|
641
|
+
const proxy = this.beforeKeyDown.emit(Object.assign({ original: e }, this.getData()));
|
|
642
|
+
if (e.defaultPrevented || proxy.defaultPrevented) {
|
|
643
|
+
return;
|
|
644
|
+
}
|
|
645
|
+
(_a = this.keyboardService) === null || _a === void 0 ? void 0 : _a.keyDown(e, this.range, !!this.selectionStore.get("edit"), {
|
|
646
|
+
focus: this.selectionStore.get("focus"),
|
|
647
|
+
range: this.selectionStore.get("range")
|
|
648
|
+
});
|
|
649
|
+
}
|
|
650
|
+
// #endregion
|
|
651
|
+
/**
|
|
652
|
+
* Selection & Keyboard
|
|
653
|
+
*/
|
|
654
|
+
selectionServiceSet(selectionStore) {
|
|
655
|
+
this.unsubscribeSelectionStore.forEach((v) => v());
|
|
656
|
+
this.unsubscribeSelectionStore.length = 0;
|
|
657
|
+
this.unsubscribeSelectionStore.push(selectionStore.onChange("nextFocus", (v) => v && this.doFocus(v, v)));
|
|
658
|
+
this.keyboardService = new KeyboardService({
|
|
659
|
+
selectionStore,
|
|
660
|
+
range: (r) => !!r && this.triggerRangeEvent(r),
|
|
661
|
+
focus: (f, changes, focusNextViewport) => {
|
|
662
|
+
if (focusNextViewport) {
|
|
663
|
+
this.beforeNextViewportFocus.emit(f);
|
|
664
|
+
return false;
|
|
665
|
+
} else {
|
|
666
|
+
return this.doFocus(f, f, changes);
|
|
667
|
+
}
|
|
668
|
+
},
|
|
669
|
+
change: (val) => this.doEdit(val),
|
|
670
|
+
cancel: async () => {
|
|
671
|
+
var _a;
|
|
672
|
+
await ((_a = this.revogrEdit) === null || _a === void 0 ? void 0 : _a.cancelChanges());
|
|
673
|
+
this.closeEdit();
|
|
674
|
+
},
|
|
675
|
+
clearCell: () => !this.readonly && this.clearCell(),
|
|
676
|
+
internalPaste: () => !this.readonly && this.beforeRegionPaste.emit(),
|
|
677
|
+
getData: () => this.getData(),
|
|
678
|
+
selectAll: () => this.selectAll.emit()
|
|
679
|
+
});
|
|
680
|
+
this.createAutoFillService();
|
|
681
|
+
}
|
|
682
|
+
/** Autofill */
|
|
683
|
+
createAutoFillService() {
|
|
684
|
+
this.autoFillService = new AutoFillService({
|
|
685
|
+
dimensionRow: this.dimensionRow,
|
|
686
|
+
dimensionCol: this.dimensionCol,
|
|
687
|
+
columnService: this.columnService,
|
|
688
|
+
dataStore: this.dataStore,
|
|
689
|
+
clearRangeDataApply: (e) => this.beforeRangeDataApply.emit(Object.assign(Object.assign(Object.assign({}, e), this.types), { rowDimension: Object.assign({}, this.dimensionRow.state), colDimension: Object.assign({}, this.dimensionCol.state) })),
|
|
690
|
+
setTempRange: (e) => {
|
|
691
|
+
const tempRangeEvent = this.beforeSetTempRange.emit(Object.assign(Object.assign({ tempRange: e }, this.getData()), this.types));
|
|
692
|
+
if (tempRangeEvent.defaultPrevented) {
|
|
693
|
+
return null;
|
|
694
|
+
}
|
|
695
|
+
return this.setTempRange.emit(tempRangeEvent.detail.tempRange);
|
|
696
|
+
},
|
|
697
|
+
selectionChanged: (e) => this.selectionChange.emit(e),
|
|
698
|
+
rangeCopy: (e) => this.beforeRangeCopyApply.emit(e),
|
|
699
|
+
rangeDataApply: (e) => this.rangeEditApply.emit(e),
|
|
700
|
+
setRange: (e) => !!e && this.triggerRangeEvent(e),
|
|
701
|
+
getData: () => this.getData()
|
|
702
|
+
});
|
|
703
|
+
}
|
|
704
|
+
/** Columns */
|
|
705
|
+
columnServiceSet() {
|
|
706
|
+
var _a;
|
|
707
|
+
(_a = this.columnService) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
708
|
+
this.columnService = new ColumnService(this.dataStore, this.colData);
|
|
709
|
+
this.createAutoFillService();
|
|
710
|
+
}
|
|
711
|
+
connectedCallback() {
|
|
712
|
+
this.columnServiceSet();
|
|
713
|
+
this.selectionServiceSet(this.selectionStore);
|
|
714
|
+
}
|
|
715
|
+
disconnectedCallback() {
|
|
716
|
+
var _a;
|
|
717
|
+
this.unsubscribeSelectionStore.forEach((v) => v());
|
|
718
|
+
this.unsubscribeSelectionStore.length = 0;
|
|
719
|
+
(_a = this.columnService) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
720
|
+
}
|
|
721
|
+
async componentWillRender() {
|
|
722
|
+
var _a, _b;
|
|
723
|
+
const editCell = this.selectionStore.get("edit");
|
|
724
|
+
if (!editCell) {
|
|
725
|
+
await ((_b = (_a = this.revogrEdit) === null || _a === void 0 ? void 0 : _a.beforeDisconnect) === null || _b === void 0 ? void 0 : _b.call(_a));
|
|
726
|
+
}
|
|
727
|
+
}
|
|
728
|
+
renderRange(range) {
|
|
729
|
+
const cell = getCell(range, this.dimensionRow.state, this.dimensionCol.state);
|
|
730
|
+
const styles = styleByCellProps(cell);
|
|
731
|
+
return [
|
|
732
|
+
h("div", { class: SELECTION_BORDER_CLASS, style: styles }, this.isMobileDevice && h("div", { class: "range-handlers" }, h("span", { class: MOBILE_CLASS }), h("span", { class: MOBILE_CLASS })))
|
|
733
|
+
];
|
|
734
|
+
}
|
|
735
|
+
renderEditor() {
|
|
736
|
+
const editCell = this.selectionStore.get("edit");
|
|
737
|
+
if (this.readonly || !editCell) {
|
|
738
|
+
return null;
|
|
739
|
+
}
|
|
740
|
+
const enteredOrModelValue = editCell.val || getCellData(this.columnService.rowDataModel(editCell.y, editCell.x).value);
|
|
741
|
+
const editable = Object.assign(Object.assign({}, editCell), this.columnService.getSaveData(editCell.y, editCell.x, enteredOrModelValue));
|
|
742
|
+
const renderEvent = this.beforeEditRender.emit(Object.assign(Object.assign({ range: Object.assign(Object.assign({}, editCell), { x1: editCell.x, y1: editCell.y }) }, this.types), { rowDimension: Object.assign({}, this.dimensionRow.state), colDimension: Object.assign({}, this.dimensionCol.state) }));
|
|
743
|
+
if (renderEvent.defaultPrevented) {
|
|
744
|
+
return null;
|
|
745
|
+
}
|
|
746
|
+
const cell = getCell(renderEvent.detail.range, renderEvent.detail.rowDimension, renderEvent.detail.colDimension);
|
|
747
|
+
const styles = styleByCellProps(cell);
|
|
748
|
+
return h("revogr-edit", { style: styles, ref: (el) => this.revogrEdit = el, additionalData: this.additionalData, editCell: editable, saveOnClose: this.applyChangesOnClose, onCelleditinit: (e) => {
|
|
749
|
+
this.cellEditDone.emit(e.detail);
|
|
750
|
+
}, column: this.columnService.rowDataModel(editCell.y, editCell.x), editor: getCellEditor(this.columnService.columns[editCell.x], this.editors) });
|
|
751
|
+
}
|
|
752
|
+
onEditCell(e) {
|
|
753
|
+
if (e.defaultPrevented) {
|
|
754
|
+
return;
|
|
755
|
+
}
|
|
756
|
+
const saveEv = this.beforeCellSave.emit(e.detail);
|
|
757
|
+
if (!saveEv.defaultPrevented) {
|
|
758
|
+
this.cellEdit(saveEv.detail);
|
|
759
|
+
}
|
|
760
|
+
if (!saveEv.detail.preventFocus) {
|
|
761
|
+
this.focusNext();
|
|
762
|
+
}
|
|
763
|
+
}
|
|
764
|
+
render() {
|
|
765
|
+
var _a;
|
|
766
|
+
const nodes = [];
|
|
767
|
+
const editCell = this.renderEditor();
|
|
768
|
+
if (editCell) {
|
|
769
|
+
nodes.push(editCell);
|
|
770
|
+
} else {
|
|
771
|
+
const range = this.selectionStore.get("range");
|
|
772
|
+
const focus = this.selectionStore.get("focus");
|
|
773
|
+
if ((range || focus) && this.useClipboard) {
|
|
774
|
+
nodes.push(h("revogr-clipboard", { readonly: this.readonly, onCopyregion: (e) => this.onCopy(e.detail), onClearregion: () => !this.readonly && this.clearCell(), ref: (e) => this.clipboard = e, onPasteregion: (e) => this.onPaste(e.detail) }));
|
|
775
|
+
}
|
|
776
|
+
if (range) {
|
|
777
|
+
nodes.push(...this.renderRange(range));
|
|
778
|
+
}
|
|
779
|
+
if (focus && !this.readonly && this.range) {
|
|
780
|
+
nodes.push((_a = this.autoFillService) === null || _a === void 0 ? void 0 : _a.renderAutofill(range, focus, this.isMobileDevice));
|
|
781
|
+
}
|
|
782
|
+
if (this.canDrag) {
|
|
783
|
+
nodes.push(h("revogr-order-editor", { ref: (e) => this.orderEditor = e, dataStore: this.dataStore, dimensionRow: this.dimensionRow, dimensionCol: this.dimensionCol, parent: this.element, rowType: this.types.rowType, onRowdragstartinit: (e) => this.rowDragStart(e) }));
|
|
784
|
+
}
|
|
785
|
+
}
|
|
786
|
+
return h(Host, {
|
|
787
|
+
key: "2d8dc4fd40a883fe59b24b2cfac1c370b9f0ac16",
|
|
788
|
+
class: { mobile: this.isMobileDevice },
|
|
789
|
+
onDblClick: (e) => this.onElementDblClick(e),
|
|
790
|
+
onMouseDown: (e) => this.onElementMouseDown(e),
|
|
791
|
+
onTouchStart: (e) => this.onElementMouseDown(e, true),
|
|
792
|
+
onCloseedit: (e) => this.closeEdit(e),
|
|
793
|
+
// it's done to be able to throw events from different levels, not just from editor
|
|
794
|
+
onCelledit: (e) => this.onEditCell(e)
|
|
795
|
+
}, nodes, h("slot", { key: "8ad5df55904ca6a8b2fb0e69c5f608ec7264a0f1", name: "data" }));
|
|
796
|
+
}
|
|
797
|
+
/**
|
|
798
|
+
* Executes the focus operation on the specified range of cells.
|
|
799
|
+
*/
|
|
800
|
+
doFocus(focus, end, changes, originalEvent) {
|
|
801
|
+
const { defaultPrevented } = this.beforeFocusCell.emit(Object.assign(Object.assign({}, this.columnService.getSaveData(focus.y, focus.x)), { originalEvent }));
|
|
802
|
+
if (defaultPrevented) {
|
|
803
|
+
return false;
|
|
804
|
+
}
|
|
805
|
+
const evData = Object.assign(Object.assign({ range: Object.assign(Object.assign({}, focus), { x1: end.x, y1: end.y }), next: changes }, this.types), { rowDimension: Object.assign({}, this.dimensionRow.state), colDimension: Object.assign({}, this.dimensionCol.state), originalEvent });
|
|
806
|
+
const applyEvent = this.applyFocus.emit(evData);
|
|
807
|
+
if (applyEvent.defaultPrevented) {
|
|
808
|
+
return false;
|
|
809
|
+
}
|
|
810
|
+
const { range } = applyEvent.detail;
|
|
811
|
+
return !this.focusCell.emit(Object.assign({ focus: {
|
|
812
|
+
x: range.x,
|
|
813
|
+
y: range.y
|
|
814
|
+
}, end: {
|
|
815
|
+
x: range.x1,
|
|
816
|
+
y: range.y1
|
|
817
|
+
} }, applyEvent.detail)).defaultPrevented;
|
|
818
|
+
}
|
|
819
|
+
triggerRangeEvent(range, originalEvent) {
|
|
820
|
+
const type = this.types.rowType;
|
|
821
|
+
const applyEvent = this.beforeApplyRange.emit(Object.assign(Object.assign({ range: Object.assign({}, range) }, this.types), { rowDimension: Object.assign({}, this.dimensionRow.state), colDimension: Object.assign({}, this.dimensionCol.state), originalEvent }));
|
|
822
|
+
if (applyEvent.defaultPrevented) {
|
|
823
|
+
return false;
|
|
824
|
+
}
|
|
825
|
+
const data = this.columnService.getRangeTransformedToProps(applyEvent.detail.range, this.dataStore);
|
|
826
|
+
let e = this.beforeSetRange.emit(data);
|
|
827
|
+
if (e.defaultPrevented) {
|
|
828
|
+
return false;
|
|
829
|
+
}
|
|
830
|
+
e = this.setRange.emit(Object.assign(Object.assign({}, applyEvent.detail.range), { type }));
|
|
831
|
+
if (e.defaultPrevented) {
|
|
832
|
+
return false;
|
|
833
|
+
}
|
|
834
|
+
return !e.defaultPrevented;
|
|
835
|
+
}
|
|
836
|
+
/**
|
|
837
|
+
* Open Editor on DblClick
|
|
838
|
+
*/
|
|
839
|
+
onElementDblClick(e) {
|
|
840
|
+
if (e.defaultPrevented) {
|
|
841
|
+
return;
|
|
842
|
+
}
|
|
843
|
+
const data = this.getData();
|
|
844
|
+
const focusCell = getFocusCellBasedOnEvent(e, data);
|
|
845
|
+
if (!focusCell) {
|
|
846
|
+
return;
|
|
847
|
+
}
|
|
848
|
+
this.doEdit();
|
|
849
|
+
}
|
|
850
|
+
/**
|
|
851
|
+
* Handle mouse down event on Host element
|
|
852
|
+
*/
|
|
853
|
+
onElementMouseDown(e, touch = false) {
|
|
854
|
+
var _a;
|
|
855
|
+
const targetElement = e.target;
|
|
856
|
+
if (isEditInput(targetElement) || e.defaultPrevented) {
|
|
857
|
+
return;
|
|
858
|
+
}
|
|
859
|
+
const data = this.getData();
|
|
860
|
+
const focusCell = getFocusCellBasedOnEvent(e, data);
|
|
861
|
+
if (!focusCell) {
|
|
862
|
+
return;
|
|
863
|
+
}
|
|
864
|
+
this.focus(focusCell, this.range && e.shiftKey, e);
|
|
865
|
+
if (this.range) {
|
|
866
|
+
targetElement && ((_a = this.autoFillService) === null || _a === void 0 ? void 0 : _a.selectionStart(targetElement, this.getData()));
|
|
867
|
+
if (!touch) {
|
|
868
|
+
e.preventDefault();
|
|
869
|
+
} else if (verifyTouchTarget(e.touches[0], MOBILE_CLASS)) {
|
|
870
|
+
e.preventDefault();
|
|
871
|
+
}
|
|
872
|
+
}
|
|
873
|
+
}
|
|
874
|
+
/**
|
|
875
|
+
* Start cell editing
|
|
876
|
+
*/
|
|
877
|
+
doEdit(val = "") {
|
|
878
|
+
if (!this.canEdit()) {
|
|
879
|
+
return false;
|
|
880
|
+
}
|
|
881
|
+
const focus = this.selectionStore.get("focus");
|
|
882
|
+
if (!focus) {
|
|
883
|
+
return false;
|
|
884
|
+
}
|
|
885
|
+
const data = this.columnService.getSaveData(focus.y, focus.x);
|
|
886
|
+
const event = this.setEdit.emit(Object.assign(Object.assign({}, data), { val }));
|
|
887
|
+
return !event.defaultPrevented;
|
|
888
|
+
}
|
|
889
|
+
/**
|
|
890
|
+
* Close editor event triggered
|
|
891
|
+
* @param details - if it requires focus next
|
|
892
|
+
*/
|
|
893
|
+
async closeEdit(e) {
|
|
894
|
+
this.cancelEdit.emit();
|
|
895
|
+
if (e === null || e === void 0 ? void 0 : e.detail) {
|
|
896
|
+
await this.focusNext();
|
|
897
|
+
}
|
|
898
|
+
}
|
|
899
|
+
/**
|
|
900
|
+
* Edit finished.
|
|
901
|
+
* Close Editor and save.
|
|
902
|
+
*/
|
|
903
|
+
cellEdit(e) {
|
|
904
|
+
const dataToSave = this.columnService.getSaveData(e.rgRow, e.rgCol, e.val);
|
|
905
|
+
this.cellEditApply.emit(dataToSave);
|
|
906
|
+
}
|
|
907
|
+
getRegion() {
|
|
908
|
+
const focus = this.selectionStore.get("focus");
|
|
909
|
+
let range = this.selectionStore.get("range");
|
|
910
|
+
if (!range) {
|
|
911
|
+
range = getRange(focus, focus);
|
|
912
|
+
}
|
|
913
|
+
return range;
|
|
914
|
+
}
|
|
915
|
+
onCopy(e) {
|
|
916
|
+
var _a;
|
|
917
|
+
const range = this.getRegion();
|
|
918
|
+
const canCopyEvent = this.beforeCopyRegion.emit(range);
|
|
919
|
+
if (canCopyEvent.defaultPrevented) {
|
|
920
|
+
return false;
|
|
921
|
+
}
|
|
922
|
+
let rangeData;
|
|
923
|
+
if (range) {
|
|
924
|
+
const { data, mapping } = this.columnService.copyRangeArray(range, this.dataStore);
|
|
925
|
+
const event = this.rangeClipboardCopy.emit(Object.assign({
|
|
926
|
+
range,
|
|
927
|
+
data,
|
|
928
|
+
mapping
|
|
929
|
+
}, this.types));
|
|
930
|
+
if (!event.defaultPrevented) {
|
|
931
|
+
rangeData = event.detail.data;
|
|
932
|
+
}
|
|
933
|
+
}
|
|
934
|
+
(_a = this.clipboard) === null || _a === void 0 ? void 0 : _a.doCopy(e, rangeData);
|
|
935
|
+
return true;
|
|
936
|
+
}
|
|
937
|
+
onPaste(data) {
|
|
938
|
+
var _a;
|
|
939
|
+
const focus = this.selectionStore.get("focus");
|
|
940
|
+
const isEditing = this.selectionStore.get("edit") !== null;
|
|
941
|
+
if (!focus || isEditing) {
|
|
942
|
+
return;
|
|
943
|
+
}
|
|
944
|
+
const rangeFillData = getRangeFillClipboardData(data, this.useClipboard);
|
|
945
|
+
const targetRange = rangeFillData ? this.getClipboardPasteTargetRange() : null;
|
|
946
|
+
let { changed, range } = this.columnService.getTransformedDataToApply({
|
|
947
|
+
start: focus,
|
|
948
|
+
data: rangeFillData || data,
|
|
949
|
+
targetRange
|
|
950
|
+
});
|
|
951
|
+
const { defaultPrevented: canPaste } = this.rangeClipboardPaste.emit(Object.assign({ data: changed, models: collectModelsOfRange(changed, this.dataStore), range }, this.types));
|
|
952
|
+
if (canPaste) {
|
|
953
|
+
return;
|
|
954
|
+
}
|
|
955
|
+
(_a = this.autoFillService) === null || _a === void 0 ? void 0 : _a.onRangeApply(changed, range, range);
|
|
956
|
+
}
|
|
957
|
+
getClipboardPasteTargetRange() {
|
|
958
|
+
const range = this.selectionStore.get("range");
|
|
959
|
+
return range && !isRangeSingleCell(range) ? range : null;
|
|
960
|
+
}
|
|
961
|
+
async focusNext() {
|
|
962
|
+
var _a;
|
|
963
|
+
const canFocus = await ((_a = this.keyboardService) === null || _a === void 0 ? void 0 : _a.keyChangeSelection(new KeyboardEvent("keydown", {
|
|
964
|
+
code: codesLetter.ARROW_DOWN
|
|
965
|
+
}), this.range));
|
|
966
|
+
if (!canFocus) {
|
|
967
|
+
this.closeEdit();
|
|
968
|
+
}
|
|
969
|
+
}
|
|
970
|
+
clearCell() {
|
|
971
|
+
var _a;
|
|
972
|
+
const range = this.selectionStore.get("range");
|
|
973
|
+
if (range && !isRangeSingleCell(range)) {
|
|
974
|
+
const data = this.columnService.getRangeStaticData(range, "");
|
|
975
|
+
(_a = this.autoFillService) === null || _a === void 0 ? void 0 : _a.onRangeApply(data, range, range);
|
|
976
|
+
} else if (this.canEdit()) {
|
|
977
|
+
const focused = this.selectionStore.get("focus");
|
|
978
|
+
if (!focused) {
|
|
979
|
+
return;
|
|
980
|
+
}
|
|
981
|
+
const cell = this.columnService.getSaveData(focused.y, focused.x);
|
|
982
|
+
this.cellEdit({
|
|
983
|
+
rgRow: focused.y,
|
|
984
|
+
rgCol: focused.x,
|
|
985
|
+
val: "",
|
|
986
|
+
type: cell.type,
|
|
987
|
+
prop: cell.prop
|
|
988
|
+
});
|
|
989
|
+
}
|
|
990
|
+
}
|
|
991
|
+
rowDragStart({ detail }) {
|
|
992
|
+
detail.text = getCellData(this.columnService.rowDataModel(detail.cell.y, detail.cell.x).value);
|
|
993
|
+
}
|
|
994
|
+
/**
|
|
995
|
+
* Verify if edit allowed.
|
|
996
|
+
*/
|
|
997
|
+
canEdit() {
|
|
998
|
+
var _a;
|
|
999
|
+
if (this.readonly) {
|
|
1000
|
+
return false;
|
|
1001
|
+
}
|
|
1002
|
+
const focus = this.selectionStore.get("focus");
|
|
1003
|
+
return focus && !((_a = this.columnService) === null || _a === void 0 ? void 0 : _a.isReadOnly(focus.y, focus.x));
|
|
1004
|
+
}
|
|
1005
|
+
get edited() {
|
|
1006
|
+
return this.selectionStore.get("edit");
|
|
1007
|
+
}
|
|
1008
|
+
/**
|
|
1009
|
+
* Sets the focus on a cell and optionally edits a range.
|
|
1010
|
+
*/
|
|
1011
|
+
focus(cell, isRangeEdit = false, originalEvent) {
|
|
1012
|
+
if (!cell)
|
|
1013
|
+
return false;
|
|
1014
|
+
const end = cell;
|
|
1015
|
+
const start = this.selectionStore.get("focus");
|
|
1016
|
+
if (isRangeEdit && start) {
|
|
1017
|
+
const range = getRange(start, end);
|
|
1018
|
+
if (range) {
|
|
1019
|
+
return this.triggerRangeEvent(range, originalEvent);
|
|
1020
|
+
}
|
|
1021
|
+
}
|
|
1022
|
+
return this.doFocus(cell, end, void 0, originalEvent);
|
|
1023
|
+
}
|
|
1024
|
+
get types() {
|
|
1025
|
+
return {
|
|
1026
|
+
rowType: this.dataStore.get("type"),
|
|
1027
|
+
colType: this.columnService.type
|
|
1028
|
+
};
|
|
1029
|
+
}
|
|
1030
|
+
/**
|
|
1031
|
+
* Collect data
|
|
1032
|
+
*/
|
|
1033
|
+
getData() {
|
|
1034
|
+
return {
|
|
1035
|
+
el: this.element,
|
|
1036
|
+
rows: this.dimensionRow.state,
|
|
1037
|
+
cols: this.dimensionCol.state,
|
|
1038
|
+
lastCell: this.lastCell,
|
|
1039
|
+
focus: this.selectionStore.get("focus"),
|
|
1040
|
+
range: this.selectionStore.get("range"),
|
|
1041
|
+
edit: this.selectionStore.get("edit")
|
|
1042
|
+
};
|
|
1043
|
+
}
|
|
1044
|
+
get element() {
|
|
1045
|
+
return getElement(this);
|
|
1046
|
+
}
|
|
1047
|
+
static get watchers() {
|
|
1048
|
+
return {
|
|
1049
|
+
"selectionStore": [{
|
|
1050
|
+
"selectionServiceSet": 0
|
|
1051
|
+
}],
|
|
1052
|
+
"dimensionRow": [{
|
|
1053
|
+
"createAutoFillService": 0
|
|
1054
|
+
}],
|
|
1055
|
+
"dimensionCol": [{
|
|
1056
|
+
"createAutoFillService": 0
|
|
1057
|
+
}],
|
|
1058
|
+
"dataStore": [{
|
|
1059
|
+
"columnServiceSet": 0
|
|
1060
|
+
}],
|
|
1061
|
+
"colData": [{
|
|
1062
|
+
"columnServiceSet": 0
|
|
1063
|
+
}]
|
|
1064
|
+
};
|
|
1065
|
+
}
|
|
1066
|
+
};
|
|
1067
|
+
OverlaySelection.style = revogrOverlayStyleCss();
|
|
1068
|
+
var RowHeaderRender = (s) => (__, { rowIndex: i }) => s + i;
|
|
1069
|
+
var RevogrRowHeaders = class {
|
|
1070
|
+
constructor(hostRef) {
|
|
1071
|
+
registerInstance(this, hostRef);
|
|
1072
|
+
this.scrollViewport = createEvent(this, "scrollview", 3);
|
|
1073
|
+
this.elementToScroll = createEvent(this, "ref", 3);
|
|
1074
|
+
this.jobsBeforeRender = [];
|
|
1075
|
+
}
|
|
1076
|
+
render() {
|
|
1077
|
+
const dataViews = [];
|
|
1078
|
+
const viewport = new ViewportStore("colPinStart");
|
|
1079
|
+
let totalLength = 1;
|
|
1080
|
+
for (let data of this.dataPorts) {
|
|
1081
|
+
const itemCount = data.dataStore.get("items").length;
|
|
1082
|
+
const dataStore = new DataStore(data.type, Object.assign({}, data.dataStore.state));
|
|
1083
|
+
const colData = new DataStore("colPinStart");
|
|
1084
|
+
const column = Object.assign({ cellTemplate: RowHeaderRender(totalLength) }, this.rowHeaderColumn);
|
|
1085
|
+
colData.updateData([column]);
|
|
1086
|
+
dataViews.push(h("revogr-data", Object.assign({}, data, { colType: "rowHeaders", jobsBeforeRender: this.jobsBeforeRender, rowClass: this.rowClass, dataStore: dataStore.store, colData: colData.store, viewportCol: viewport.store, readonly: true, range: false })));
|
|
1087
|
+
totalLength += itemCount;
|
|
1088
|
+
}
|
|
1089
|
+
const colSize = calculateRowHeaderSize(totalLength, this.rowHeaderColumn);
|
|
1090
|
+
viewport.setViewport({
|
|
1091
|
+
realCount: 1,
|
|
1092
|
+
virtualSize: 0,
|
|
1093
|
+
items: [
|
|
1094
|
+
{
|
|
1095
|
+
size: colSize,
|
|
1096
|
+
start: 0,
|
|
1097
|
+
end: colSize,
|
|
1098
|
+
itemIndex: 0
|
|
1099
|
+
}
|
|
1100
|
+
]
|
|
1101
|
+
});
|
|
1102
|
+
const viewportScroll = {
|
|
1103
|
+
contentHeight: this.height,
|
|
1104
|
+
contentWidth: 0,
|
|
1105
|
+
style: { minWidth: `${colSize}px` },
|
|
1106
|
+
colType: "rowHeaders",
|
|
1107
|
+
ref: (el) => this.elementToScroll.emit(el),
|
|
1108
|
+
onScrollviewport: (e) => this.scrollViewport.emit(e.detail)
|
|
1109
|
+
};
|
|
1110
|
+
const viewportHeader = Object.assign(Object.assign({}, this.headerProp), {
|
|
1111
|
+
// groups not present on row headers
|
|
1112
|
+
groups: [],
|
|
1113
|
+
colData: typeof this.rowHeaderColumn === "object" ? [this.rowHeaderColumn] : [],
|
|
1114
|
+
viewportCol: viewport.store,
|
|
1115
|
+
canResize: false,
|
|
1116
|
+
type: ROW_HEADER_TYPE,
|
|
1117
|
+
// parent,
|
|
1118
|
+
slot: HEADER_SLOT
|
|
1119
|
+
});
|
|
1120
|
+
return h(Host, { class: { [ROW_HEADER_TYPE]: true }, key: ROW_HEADER_TYPE }, h("revogr-viewport-scroll", Object.assign({ key: "c401e82e02e4bdb7afb25f2f49c6776f2e115c81" }, viewportScroll, { "row-header": true }), h("revogr-header", Object.assign({ key: "3c73d27bd96e23a34fc0cf47eda4d2e65751df98" }, viewportHeader)), dataViews));
|
|
1121
|
+
}
|
|
1122
|
+
};
|
|
1123
|
+
var AutohideScrollPlugin = class {
|
|
1124
|
+
constructor(element) {
|
|
1125
|
+
this.element = element;
|
|
1126
|
+
this.autohideScrollTimeout = 0;
|
|
1127
|
+
}
|
|
1128
|
+
/**
|
|
1129
|
+
* When scroll size updates set it up for autohide
|
|
1130
|
+
*/
|
|
1131
|
+
setScrollSize(s) {
|
|
1132
|
+
if (!s) {
|
|
1133
|
+
this.element.setAttribute("autohide", "true");
|
|
1134
|
+
} else {
|
|
1135
|
+
this.element.removeAttribute("autohide");
|
|
1136
|
+
}
|
|
1137
|
+
}
|
|
1138
|
+
/**
|
|
1139
|
+
* On each scroll check if it's time to show
|
|
1140
|
+
*/
|
|
1141
|
+
checkScroll({ scrollSize, contentSize, virtualSize }) {
|
|
1142
|
+
const hasScroll = contentSize > virtualSize;
|
|
1143
|
+
const isHidden = !scrollSize && hasScroll;
|
|
1144
|
+
if (isHidden) {
|
|
1145
|
+
this.element.setAttribute("visible", "true");
|
|
1146
|
+
this.autohideScrollTimeout = this.show(this.element, this.autohideScrollTimeout);
|
|
1147
|
+
}
|
|
1148
|
+
}
|
|
1149
|
+
show(element, timeout2) {
|
|
1150
|
+
clearTimeout(timeout2);
|
|
1151
|
+
return Number(setTimeout(() => {
|
|
1152
|
+
element === null || element === void 0 ? void 0 : element.removeAttribute("visible");
|
|
1153
|
+
}, 1e3));
|
|
1154
|
+
}
|
|
1155
|
+
clear() {
|
|
1156
|
+
clearTimeout(this.autohideScrollTimeout);
|
|
1157
|
+
}
|
|
1158
|
+
};
|
|
1159
|
+
var revogrScrollStyleCss = () => `revogr-scroll-virtual[autohide]{position:absolute;z-index:100 !important}revogr-scroll-virtual[autohide].vertical{top:0;right:0}revogr-scroll-virtual[autohide].vertical[visible]{min-width:20px !important}revogr-scroll-virtual[autohide].horizontal{bottom:0;left:0}revogr-scroll-virtual[autohide].horizontal[visible]{min-height:20px !important}revogr-scroll-virtual.vertical{overflow-y:auto;overflow-x:hidden;height:100%}revogr-scroll-virtual.vertical>div{width:1px}revogr-scroll-virtual.horizontal{overflow-x:auto;overflow-y:hidden;width:100%}revogr-scroll-virtual.horizontal>div{height:1px}`;
|
|
1160
|
+
var RevogrScrollVirtual = class {
|
|
1161
|
+
constructor(hostRef) {
|
|
1162
|
+
registerInstance(this, hostRef);
|
|
1163
|
+
this.scrollVirtual = createEvent(this, "scrollvirtual", 7);
|
|
1164
|
+
this.dimension = "rgRow";
|
|
1165
|
+
this.scrollSize = 0;
|
|
1166
|
+
}
|
|
1167
|
+
async setScroll(e) {
|
|
1168
|
+
var _a;
|
|
1169
|
+
if (this.dimension !== e.dimension) {
|
|
1170
|
+
return;
|
|
1171
|
+
}
|
|
1172
|
+
this.localScrollTimer.latestScrollUpdate(e.dimension);
|
|
1173
|
+
(_a = this.localScrollService) === null || _a === void 0 ? void 0 : _a.setScroll(e);
|
|
1174
|
+
if (e.coordinate) {
|
|
1175
|
+
this.autohideScrollPlugin.checkScroll({
|
|
1176
|
+
scrollSize: this.scrollSize,
|
|
1177
|
+
contentSize: this.realSize,
|
|
1178
|
+
virtualSize: this.virtualSize
|
|
1179
|
+
});
|
|
1180
|
+
}
|
|
1181
|
+
}
|
|
1182
|
+
/**
|
|
1183
|
+
* Update if `delta` exists in case we don't know current position or if it's external change
|
|
1184
|
+
*/
|
|
1185
|
+
async changeScroll(e) {
|
|
1186
|
+
if (e.delta) {
|
|
1187
|
+
const scrollProperty = e.dimension === "rgRow" ? "scrollTop" : "scrollLeft";
|
|
1188
|
+
const currentPhysicalCoordinate = this.element[scrollProperty];
|
|
1189
|
+
return this.localScrollService.setScrollByDelta(e, currentPhysicalCoordinate);
|
|
1190
|
+
}
|
|
1191
|
+
return e;
|
|
1192
|
+
}
|
|
1193
|
+
connectedCallback() {
|
|
1194
|
+
this.autohideScrollPlugin = new AutohideScrollPlugin(this.element);
|
|
1195
|
+
this.localScrollTimer = new LocalScrollTimer("ontouchstart" in document.documentElement ? 0 : 10);
|
|
1196
|
+
this.localScrollService = new LocalScrollService({
|
|
1197
|
+
runScroll: (e) => this.scrollVirtual.emit(e),
|
|
1198
|
+
applyScroll: (e) => {
|
|
1199
|
+
this.localScrollTimer.setCoordinate(e);
|
|
1200
|
+
const type = e.dimension === "rgRow" ? "scrollTop" : "scrollLeft";
|
|
1201
|
+
this.element[type] = e.coordinate;
|
|
1202
|
+
}
|
|
1203
|
+
});
|
|
1204
|
+
}
|
|
1205
|
+
disconnectedCallback() {
|
|
1206
|
+
this.autohideScrollPlugin.clear();
|
|
1207
|
+
}
|
|
1208
|
+
componentWillLoad() {
|
|
1209
|
+
this.scrollSize = getScrollbarSize(document);
|
|
1210
|
+
}
|
|
1211
|
+
componentDidRender() {
|
|
1212
|
+
let scrollSize = 0;
|
|
1213
|
+
if (this.dimension === "rgRow") {
|
|
1214
|
+
scrollSize = this.element.scrollHeight > this.element.clientHeight ? this.scrollSize : 0;
|
|
1215
|
+
this.element.style.minWidth = `${scrollSize}px`;
|
|
1216
|
+
} else {
|
|
1217
|
+
scrollSize = this.element.scrollWidth > this.element.clientWidth ? this.scrollSize : 0;
|
|
1218
|
+
this.element.style.minHeight = `${scrollSize}px`;
|
|
1219
|
+
}
|
|
1220
|
+
this.autohideScrollPlugin.setScrollSize(scrollSize);
|
|
1221
|
+
this.localScrollService.setParams({
|
|
1222
|
+
contentSize: this.realSize,
|
|
1223
|
+
clientSize: this.dimension === "rgRow" ? this.element.clientHeight : this.element.clientWidth,
|
|
1224
|
+
virtualSize: this.clientSize
|
|
1225
|
+
}, this.dimension);
|
|
1226
|
+
}
|
|
1227
|
+
onScroll(e) {
|
|
1228
|
+
if (!(e.target instanceof Element)) {
|
|
1229
|
+
return;
|
|
1230
|
+
}
|
|
1231
|
+
const target = e.target;
|
|
1232
|
+
let type = "scrollLeft";
|
|
1233
|
+
if (this.dimension === "rgRow") {
|
|
1234
|
+
type = "scrollTop";
|
|
1235
|
+
}
|
|
1236
|
+
const setScroll = () => {
|
|
1237
|
+
var _a;
|
|
1238
|
+
(_a = this.localScrollService) === null || _a === void 0 ? void 0 : _a.scroll(target[type] || 0, this.dimension);
|
|
1239
|
+
};
|
|
1240
|
+
if (this.localScrollTimer.isReady(this.dimension, target[type])) {
|
|
1241
|
+
setScroll();
|
|
1242
|
+
} else {
|
|
1243
|
+
this.localScrollTimer.throttleLastScrollUpdate(this.dimension, target[type] || 0, () => setScroll());
|
|
1244
|
+
}
|
|
1245
|
+
}
|
|
1246
|
+
render() {
|
|
1247
|
+
const size = getContentSize(this.realSize, this.dimension === "rgRow" ? this.element.clientHeight : this.element.clientWidth, this.clientSize);
|
|
1248
|
+
return h(Host, { key: "7213817ef941eee4050b714266598ec0c2961ee9", onScroll: (e) => this.onScroll(e) }, h("div", { key: "501da49c63253ab943172494b9dbf5399be56cee", style: {
|
|
1249
|
+
[this.dimension === "rgRow" ? "height" : "width"]: `${size}px`
|
|
1250
|
+
} }));
|
|
1251
|
+
}
|
|
1252
|
+
get element() {
|
|
1253
|
+
return getElement(this);
|
|
1254
|
+
}
|
|
1255
|
+
};
|
|
1256
|
+
RevogrScrollVirtual.style = revogrScrollStyleCss();
|
|
1257
|
+
var revogrTempRangeStyleCss = () => `.temp-bg-range{display:block !important;position:absolute;pointer-events:none;z-index:9;border:1px solid var(--rg-theme-temporary-range-border);box-sizing:border-box}.temp-bg-range.Selection{border:1px dashed var(--rg-theme-temporary-selection-border)}.temp-bg-range>div{width:1px;height:1px;position:absolute}.temp-bg-range>div.top{top:-1px}.temp-bg-range>div.bottom{bottom:-1px}.temp-bg-range>div.left{left:-1px}.temp-bg-range>div.right{right:-1px}`;
|
|
1258
|
+
var RevogrFocus2 = class {
|
|
1259
|
+
constructor(hostRef) {
|
|
1260
|
+
registerInstance(this, hostRef);
|
|
1261
|
+
this.onChange = throttle((e) => this.doChange(e), 300);
|
|
1262
|
+
}
|
|
1263
|
+
doChange(e) {
|
|
1264
|
+
e === null || e === void 0 ? void 0 : e.scrollIntoView({
|
|
1265
|
+
block: "nearest",
|
|
1266
|
+
inline: "nearest"
|
|
1267
|
+
});
|
|
1268
|
+
}
|
|
1269
|
+
componentDidRender() {
|
|
1270
|
+
if (this.el) {
|
|
1271
|
+
this.onChange(this.el);
|
|
1272
|
+
}
|
|
1273
|
+
}
|
|
1274
|
+
render() {
|
|
1275
|
+
const data = this.selectionStore.get("tempRange");
|
|
1276
|
+
const type = this.selectionStore.get("tempRangeType");
|
|
1277
|
+
if (!data) {
|
|
1278
|
+
return;
|
|
1279
|
+
}
|
|
1280
|
+
let directionY = "bottom";
|
|
1281
|
+
let derectionX = "right";
|
|
1282
|
+
const range = this.getRange();
|
|
1283
|
+
if (!range) {
|
|
1284
|
+
return;
|
|
1285
|
+
}
|
|
1286
|
+
if (data.y < range.y) {
|
|
1287
|
+
directionY = "top";
|
|
1288
|
+
}
|
|
1289
|
+
if (data.x < range.x) {
|
|
1290
|
+
derectionX = "left";
|
|
1291
|
+
}
|
|
1292
|
+
const directionClass = `${derectionX} ${directionY}`;
|
|
1293
|
+
const cell = getCell(data, this.dimensionRow.state, this.dimensionCol.state);
|
|
1294
|
+
const styles = styleByCellProps(cell);
|
|
1295
|
+
const props = {
|
|
1296
|
+
class: {
|
|
1297
|
+
[TMP_SELECTION_BG_CLASS]: true,
|
|
1298
|
+
[type || ""]: true
|
|
1299
|
+
},
|
|
1300
|
+
style: styles,
|
|
1301
|
+
hidden: false
|
|
1302
|
+
};
|
|
1303
|
+
return h(Host, Object.assign({}, props), h("div", { class: directionClass, ref: (e) => this.el = e }));
|
|
1304
|
+
}
|
|
1305
|
+
getRange() {
|
|
1306
|
+
const range = this.selectionStore.get("range");
|
|
1307
|
+
if (range) {
|
|
1308
|
+
return range;
|
|
1309
|
+
}
|
|
1310
|
+
const focus = this.selectionStore.get("focus");
|
|
1311
|
+
if (!focus) {
|
|
1312
|
+
return null;
|
|
1313
|
+
}
|
|
1314
|
+
return Object.assign(Object.assign({}, focus), { x1: focus.x, y1: focus.y });
|
|
1315
|
+
}
|
|
1316
|
+
};
|
|
1317
|
+
RevogrFocus2.style = revogrTempRangeStyleCss();
|
|
1318
|
+
/*! Bundled license information:
|
|
1319
|
+
|
|
1320
|
+
@revolist/revogrid/dist/esm/revogr-attribution_7.entry.js:
|
|
1321
|
+
(*!
|
|
1322
|
+
* Built by Revolist OU ❤️
|
|
1323
|
+
*)
|
|
1324
|
+
*/
|
|
1325
|
+
|
|
1326
|
+
export { Attribution as revogr_attribution, RevoGridExtra as revogr_extra, RevogrFocus$1 as revogr_focus, OverlaySelection as revogr_overlay_selection, RevogrRowHeaders as revogr_row_headers, RevogrScrollVirtual as revogr_scroll_virtual, RevogrFocus2 as revogr_temp_range };
|
|
1327
|
+
//# sourceMappingURL=revogr-attribution_7.entry-LSOFVZRA.js.map
|
|
1328
|
+
//# sourceMappingURL=revogr-attribution_7.entry-LSOFVZRA.js.map
|