@canvas-components/list-table 0.2.4 → 0.2.6
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/README.md +1 -1
- package/dist/index.cjs +231 -62
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +20 -9
- package/dist/index.d.ts +20 -9
- package/dist/index.js +232 -63
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { stringifyDataIndex, getValueByDataIndex, clamp, copyTextSync, copyText, exportTableToXlsx, formatPreciseNumber, addPreciseNumbers, comparePreciseNumbers, dividePreciseNumber, roundPreciseNumber, parseNumberValue, formatNumberValue, formatPercentValue, formatScientificValue, formatChineseNumber, parseChineseNumber,
|
|
1
|
+
import { stringifyDataIndex, getValueByDataIndex, clamp, copyTextSync, copyText, exportTableToXlsx, formatPreciseNumber, addPreciseNumbers, comparePreciseNumbers, dividePreciseNumber, roundPreciseNumber, parseNumberValue, formatNumberValue, formatPercentValue, formatScientificValue, formatChineseNumber, parseChineseNumber, exportTableToTxt, exportTableToCsv, downloadJsonFile, mapRowsToExportRecords, copyJson, copyRows, isDateTimeFormatPattern, normalizeDecimalPlaces, formatDateTimeValue, formatCustomNumberPattern, isSameDataIndex, isPointInRect as isPointInRect$1 } from '@canvas-components/utils';
|
|
2
2
|
import { drawBarcodeToCanvas } from '@canvas-components/barcode';
|
|
3
3
|
import { drawCanvasChartToCanvas, getCanvasChartRenderer, resolveCanvasChartTooltipText } from '@canvas-components/chart';
|
|
4
4
|
import { drawQrCodeToCanvas } from '@canvas-components/qrcode';
|
|
@@ -237,11 +237,18 @@ var CanvasRenderer = class {
|
|
|
237
237
|
height: Math.max(height, 0)
|
|
238
238
|
} : this.resolveCoverSize(width, height);
|
|
239
239
|
this.ctx.fillRect(0, safeTop, cover.width, cover.height);
|
|
240
|
+
const centerX = cover.width / 2;
|
|
241
|
+
const centerY = safeTop + cover.height / 2;
|
|
242
|
+
const showImage = cover.width >= 80 && cover.height >= 72;
|
|
243
|
+
if (showImage) {
|
|
244
|
+
const imageTop = centerY - 36;
|
|
245
|
+
drawSimpleEmptyIllustration(this.ctx, centerX - 32, imageTop);
|
|
246
|
+
}
|
|
240
247
|
this.ctx.fillStyle = this.theme.emptyTextColor;
|
|
241
248
|
this.ctx.font = `${this.theme.fontSize}px ${this.theme.fontFamily}`;
|
|
242
249
|
this.ctx.textAlign = "center";
|
|
243
250
|
this.ctx.textBaseline = "middle";
|
|
244
|
-
this.ctx.fillText(text,
|
|
251
|
+
this.ctx.fillText(text, centerX, showImage ? centerY + 28 : centerY);
|
|
245
252
|
this.ctx.restore();
|
|
246
253
|
}
|
|
247
254
|
/**
|
|
@@ -255,6 +262,49 @@ var CanvasRenderer = class {
|
|
|
255
262
|
};
|
|
256
263
|
}
|
|
257
264
|
};
|
|
265
|
+
function drawSimpleEmptyIllustration(ctx, left, top) {
|
|
266
|
+
ctx.save();
|
|
267
|
+
ctx.translate(left, top + 1);
|
|
268
|
+
ctx.beginPath();
|
|
269
|
+
ctx.ellipse(32, 33, 32, 7, 0, 0, Math.PI * 2);
|
|
270
|
+
ctx.fillStyle = "#f5f5f5";
|
|
271
|
+
ctx.fill();
|
|
272
|
+
ctx.strokeStyle = "#d9d9d9";
|
|
273
|
+
ctx.lineWidth = 1;
|
|
274
|
+
ctx.beginPath();
|
|
275
|
+
ctx.moveTo(55, 12.76);
|
|
276
|
+
ctx.lineTo(44.854, 1.258);
|
|
277
|
+
ctx.bezierCurveTo(44.367, 0.474, 43.656, 0, 42.907, 0);
|
|
278
|
+
ctx.lineTo(21.093, 0);
|
|
279
|
+
ctx.bezierCurveTo(20.344, 0, 19.633, 0.474, 19.146, 1.257);
|
|
280
|
+
ctx.lineTo(9, 12.761);
|
|
281
|
+
ctx.lineTo(9, 22);
|
|
282
|
+
ctx.lineTo(55, 22);
|
|
283
|
+
ctx.lineTo(55, 12.76);
|
|
284
|
+
ctx.closePath();
|
|
285
|
+
ctx.stroke();
|
|
286
|
+
ctx.beginPath();
|
|
287
|
+
ctx.moveTo(41.613, 15.931);
|
|
288
|
+
ctx.bezierCurveTo(41.613, 14.326, 42.607, 13.001, 43.84, 13);
|
|
289
|
+
ctx.lineTo(55, 13);
|
|
290
|
+
ctx.lineTo(55, 31.137);
|
|
291
|
+
ctx.bezierCurveTo(55, 33.26, 53.68, 35, 52.05, 35);
|
|
292
|
+
ctx.lineTo(11.95, 35);
|
|
293
|
+
ctx.bezierCurveTo(10.32, 35, 9, 33.259, 9, 31.137);
|
|
294
|
+
ctx.lineTo(9, 13);
|
|
295
|
+
ctx.lineTo(20.16, 13);
|
|
296
|
+
ctx.bezierCurveTo(21.393, 13, 22.387, 14.323, 22.387, 15.928);
|
|
297
|
+
ctx.lineTo(22.387, 15.95);
|
|
298
|
+
ctx.bezierCurveTo(22.387, 17.555, 23.392, 18.851, 24.624, 18.851);
|
|
299
|
+
ctx.lineTo(39.376, 18.851);
|
|
300
|
+
ctx.bezierCurveTo(40.608, 18.851, 41.613, 17.543, 41.613, 15.938);
|
|
301
|
+
ctx.lineTo(41.613, 15.931);
|
|
302
|
+
ctx.closePath();
|
|
303
|
+
ctx.fillStyle = "#fafafa";
|
|
304
|
+
ctx.fill();
|
|
305
|
+
ctx.stroke();
|
|
306
|
+
ctx.restore();
|
|
307
|
+
}
|
|
258
308
|
|
|
259
309
|
// src/domain/columns/compute-column-widths.ts
|
|
260
310
|
function computeColumnWidths(columns) {
|
|
@@ -928,10 +978,11 @@ function collectLeafColumns(columns) {
|
|
|
928
978
|
}
|
|
929
979
|
|
|
930
980
|
// src/domain/constants.ts
|
|
931
|
-
var DEFAULT_ROW_HEIGHT =
|
|
932
|
-
var DEFAULT_HEADER_ROW_HEIGHT =
|
|
981
|
+
var DEFAULT_ROW_HEIGHT = 32;
|
|
982
|
+
var DEFAULT_HEADER_ROW_HEIGHT = DEFAULT_ROW_HEIGHT;
|
|
933
983
|
var HORIZONTAL_SCROLL_STEP = 120;
|
|
934
|
-
var DEFAULT_SUMMARY_ROW_HEIGHT =
|
|
984
|
+
var DEFAULT_SUMMARY_ROW_HEIGHT = DEFAULT_ROW_HEIGHT;
|
|
985
|
+
var DEFAULT_EMPTY_BODY_HEIGHT = 96;
|
|
935
986
|
var DEFAULT_PAGINATION_PAGE_SIZE = 10;
|
|
936
987
|
var FALLBACK_TABLE_WIDTH = 320;
|
|
937
988
|
var FALLBACK_TABLE_HEIGHT = 240;
|
|
@@ -1505,8 +1556,8 @@ var defaultListTableTheme = {
|
|
|
1505
1556
|
hoverBackgroundColor: "#edf4ff",
|
|
1506
1557
|
selectionBackgroundColor: "#dbeafe",
|
|
1507
1558
|
textSelectionBackgroundColor: "#99c2ff",
|
|
1508
|
-
emptyBackgroundColor: "#
|
|
1509
|
-
emptyTextColor: "#
|
|
1559
|
+
emptyBackgroundColor: "#ffffff",
|
|
1560
|
+
emptyTextColor: "#8c8c8c",
|
|
1510
1561
|
debugStrokeColor: "#ef4444",
|
|
1511
1562
|
debugFillColor: "rgba(239, 68, 68, 0.08)",
|
|
1512
1563
|
fontFamily: '"Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif',
|
|
@@ -5872,6 +5923,9 @@ function drawBodyTextContent(params) {
|
|
|
5872
5923
|
searchMatch,
|
|
5873
5924
|
fragmentKey = `content:${contentIndex}`
|
|
5874
5925
|
} = params;
|
|
5926
|
+
if (params.content.visible === false || params.content.style?.display === "none") {
|
|
5927
|
+
return void 0;
|
|
5928
|
+
}
|
|
5875
5929
|
ctx.save();
|
|
5876
5930
|
ctx.globalAlpha *= resolveContentOpacity(content);
|
|
5877
5931
|
applyTextContentStyle(
|
|
@@ -5983,6 +6037,9 @@ function drawBodyTextContent(params) {
|
|
|
5983
6037
|
return width;
|
|
5984
6038
|
}
|
|
5985
6039
|
function measureTextContentWidth(ctx, content, theme) {
|
|
6040
|
+
if (content.visible === false || content.style?.display === "none") {
|
|
6041
|
+
return 0;
|
|
6042
|
+
}
|
|
5986
6043
|
applyTextContentStyle(ctx, content, theme.textColor, theme);
|
|
5987
6044
|
const intrinsicWidth = Math.max(
|
|
5988
6045
|
ctx.measureText(content.text).width + resolveContentTextIndent(content),
|
|
@@ -6173,6 +6230,11 @@ var CONTENT_HORIZONTAL_PADDING = 12;
|
|
|
6173
6230
|
var CONTENT_GAP = 8;
|
|
6174
6231
|
var CONTENT_VERTICAL_PADDING = 6;
|
|
6175
6232
|
function resolveBodyCellContents(params) {
|
|
6233
|
+
return resolveRawBodyCellContents(params).filter(
|
|
6234
|
+
(content) => content.visible !== false && content.style?.display !== "none"
|
|
6235
|
+
);
|
|
6236
|
+
}
|
|
6237
|
+
function resolveRawBodyCellContents(params) {
|
|
6176
6238
|
const { record, rowIndex, column } = params;
|
|
6177
6239
|
const value = getValueByDataIndex(record, column.dataIndex);
|
|
6178
6240
|
const rendered = column.render?.(value, record, rowIndex, column);
|
|
@@ -6317,7 +6379,9 @@ function normalizeCellContents(contents) {
|
|
|
6317
6379
|
return [normalizeCellContentItem(contents)];
|
|
6318
6380
|
}
|
|
6319
6381
|
function normalizeDrawableCellContents(contents) {
|
|
6320
|
-
return contents.
|
|
6382
|
+
return contents.filter(
|
|
6383
|
+
(content) => content.visible !== false && content.style?.display !== "none"
|
|
6384
|
+
).map(normalizeCellContentItem);
|
|
6321
6385
|
}
|
|
6322
6386
|
function normalizeCellContentItem(content) {
|
|
6323
6387
|
if (content.type !== "money") {
|
|
@@ -6327,6 +6391,7 @@ function normalizeCellContentItem(content) {
|
|
|
6327
6391
|
type: "text",
|
|
6328
6392
|
text: formatMoneyValue(content.value, content),
|
|
6329
6393
|
key: content.key,
|
|
6394
|
+
visible: content.visible,
|
|
6330
6395
|
style: content.style,
|
|
6331
6396
|
cursor: content.cursor,
|
|
6332
6397
|
onClick: content.onClick,
|
|
@@ -7997,15 +8062,11 @@ function resolvePointerHitWithScrollbars(result, x, y, scrollbarLayout) {
|
|
|
7997
8062
|
return result;
|
|
7998
8063
|
}
|
|
7999
8064
|
function resolveScrollbarVisibility(params) {
|
|
8000
|
-
const
|
|
8001
|
-
|
|
8002
|
-
if (scrollbarOption?.visible === true) {
|
|
8065
|
+
const scrollbarOption = params.options.scrollbar;
|
|
8066
|
+
if (scrollbarOption?.visible !== false) {
|
|
8003
8067
|
return true;
|
|
8004
8068
|
}
|
|
8005
|
-
|
|
8006
|
-
return false;
|
|
8007
|
-
}
|
|
8008
|
-
return draggingScrollbar || continuousScrollActive || hover.area === "horizontal-scrollbar" || hover.area === "vertical-scrollbar" || hover.area !== "empty" || now2 < scrollbarActiveUntil;
|
|
8069
|
+
return false;
|
|
8009
8070
|
}
|
|
8010
8071
|
|
|
8011
8072
|
// src/services/pointer-hit-service.ts
|
|
@@ -13621,13 +13682,13 @@ function showHeaderContextMenu(params) {
|
|
|
13621
13682
|
return true;
|
|
13622
13683
|
}
|
|
13623
13684
|
function resolveContextMenuDensity(rowHeight) {
|
|
13624
|
-
if (rowHeight ===
|
|
13685
|
+
if (rowHeight === 56) {
|
|
13625
13686
|
return "comfortable";
|
|
13626
13687
|
}
|
|
13627
13688
|
if (rowHeight === 32) {
|
|
13628
13689
|
return "compact";
|
|
13629
13690
|
}
|
|
13630
|
-
return "middle";
|
|
13691
|
+
return rowHeight === 48 ? "middle" : "compact";
|
|
13631
13692
|
}
|
|
13632
13693
|
|
|
13633
13694
|
// src/features/tooltip/tooltip-feature.ts
|
|
@@ -15197,7 +15258,7 @@ var ListTableEventController = class {
|
|
|
15197
15258
|
headerTree: this.host.headerTree,
|
|
15198
15259
|
headerRowsCache: this.host.headerRowsCache,
|
|
15199
15260
|
pointerX: position.x,
|
|
15200
|
-
headerRowHeight: DEFAULT_HEADER_ROW_HEIGHT,
|
|
15261
|
+
headerRowHeight: this.host.currentRenderSnapshot?.headerRowHeight ?? DEFAULT_HEADER_ROW_HEIGHT,
|
|
15201
15262
|
allowGrouping: this.host.groupBarVisible,
|
|
15202
15263
|
getMovableLeafColumns: (node, hitRect) => getHeaderNodeMovableLeafColumns({
|
|
15203
15264
|
node,
|
|
@@ -15534,7 +15595,7 @@ var ListTableEventController = class {
|
|
|
15534
15595
|
},
|
|
15535
15596
|
summaryVisible: Boolean(this.host.currentRenderSnapshot?.hasSummary),
|
|
15536
15597
|
onToggleSummary: () => {
|
|
15537
|
-
this.host.options.summaryRowHeight = this.host.currentRenderSnapshot?.hasSummary ? 0 : DEFAULT_SUMMARY_ROW_HEIGHT;
|
|
15598
|
+
this.host.options.summaryRowHeight = this.host.currentRenderSnapshot?.hasSummary ? 0 : this.host.currentRenderSnapshot?.rowHeight ?? DEFAULT_SUMMARY_ROW_HEIGHT;
|
|
15538
15599
|
this.host.persistColumnConfig();
|
|
15539
15600
|
this.host.render();
|
|
15540
15601
|
},
|
|
@@ -17399,9 +17460,9 @@ function resolveToggleHeaderColumnVisibilityAction(params) {
|
|
|
17399
17460
|
function resolveDensitySizes(density) {
|
|
17400
17461
|
if (density === "comfortable") {
|
|
17401
17462
|
return {
|
|
17402
|
-
rowHeight:
|
|
17403
|
-
headerRowHeight:
|
|
17404
|
-
summaryRowHeight:
|
|
17463
|
+
rowHeight: 56,
|
|
17464
|
+
headerRowHeight: 56,
|
|
17465
|
+
summaryRowHeight: 56
|
|
17405
17466
|
};
|
|
17406
17467
|
}
|
|
17407
17468
|
if (density === "compact") {
|
|
@@ -17412,9 +17473,9 @@ function resolveDensitySizes(density) {
|
|
|
17412
17473
|
};
|
|
17413
17474
|
}
|
|
17414
17475
|
return {
|
|
17415
|
-
rowHeight:
|
|
17416
|
-
headerRowHeight:
|
|
17417
|
-
summaryRowHeight:
|
|
17476
|
+
rowHeight: 48,
|
|
17477
|
+
headerRowHeight: 48,
|
|
17478
|
+
summaryRowHeight: 48
|
|
17418
17479
|
};
|
|
17419
17480
|
}
|
|
17420
17481
|
|
|
@@ -17565,6 +17626,9 @@ var ListTableHeaderActionController = class {
|
|
|
17565
17626
|
headerRowHeight: nextSize.headerRowHeight,
|
|
17566
17627
|
summaryRowHeight: nextSize.summaryRowHeight
|
|
17567
17628
|
});
|
|
17629
|
+
this.options.resetSummaryValues();
|
|
17630
|
+
options.ui?.onDensityChange?.(nextSize.rowHeight);
|
|
17631
|
+
this.options.persistColumnConfig();
|
|
17568
17632
|
this.options.hideHeaderContextMenu();
|
|
17569
17633
|
this.options.requestRender();
|
|
17570
17634
|
}
|
|
@@ -18034,7 +18098,7 @@ function applyStoredColumnConfig(columns, storedColumns) {
|
|
|
18034
18098
|
};
|
|
18035
18099
|
applyToColumns(columns);
|
|
18036
18100
|
}
|
|
18037
|
-
function buildStoredColumnConfig(columns, sortState, filterState, zoom, summaryRowHeight) {
|
|
18101
|
+
function buildStoredColumnConfig(columns, sortState, filterState, zoom, summaryRowHeight, density) {
|
|
18038
18102
|
const result = {};
|
|
18039
18103
|
const collectColumns = (cols) => {
|
|
18040
18104
|
for (const col of cols) {
|
|
@@ -18069,7 +18133,8 @@ function buildStoredColumnConfig(columns, sortState, filterState, zoom, summaryR
|
|
|
18069
18133
|
},
|
|
18070
18134
|
filters: filterState,
|
|
18071
18135
|
...typeof zoom === "number" && Number.isFinite(zoom) && zoom > 0 ? { zoom } : null,
|
|
18072
|
-
...typeof summaryRowHeight === "number" && Number.isFinite(summaryRowHeight) && summaryRowHeight >= 0 ? { summaryRowHeight } : null
|
|
18136
|
+
...typeof summaryRowHeight === "number" && Number.isFinite(summaryRowHeight) && summaryRowHeight >= 0 ? { summaryRowHeight } : null,
|
|
18137
|
+
...density === 32 || density === 48 || density === 56 ? { density } : null
|
|
18073
18138
|
};
|
|
18074
18139
|
}
|
|
18075
18140
|
|
|
@@ -18081,7 +18146,8 @@ function persistListTableColumnConfig(params) {
|
|
|
18081
18146
|
sortState,
|
|
18082
18147
|
filterState,
|
|
18083
18148
|
zoom,
|
|
18084
|
-
summaryRowHeight
|
|
18149
|
+
summaryRowHeight,
|
|
18150
|
+
density
|
|
18085
18151
|
} = params;
|
|
18086
18152
|
if (!storageKey) {
|
|
18087
18153
|
return;
|
|
@@ -18094,7 +18160,8 @@ function persistListTableColumnConfig(params) {
|
|
|
18094
18160
|
sortState,
|
|
18095
18161
|
filterState,
|
|
18096
18162
|
zoom,
|
|
18097
|
-
summaryRowHeight
|
|
18163
|
+
summaryRowHeight,
|
|
18164
|
+
density
|
|
18098
18165
|
)
|
|
18099
18166
|
);
|
|
18100
18167
|
}
|
|
@@ -18116,7 +18183,8 @@ async function loadListTableStoredConfig(params) {
|
|
|
18116
18183
|
} : null,
|
|
18117
18184
|
filterState: stored.filters ? stored.filters : null,
|
|
18118
18185
|
zoom: typeof stored.zoom === "number" && Number.isFinite(stored.zoom) && stored.zoom > 0 ? stored.zoom : null,
|
|
18119
|
-
summaryRowHeight: typeof stored.summaryRowHeight === "number" && Number.isFinite(stored.summaryRowHeight) && stored.summaryRowHeight >= 0 ? stored.summaryRowHeight : null
|
|
18186
|
+
summaryRowHeight: typeof stored.summaryRowHeight === "number" && Number.isFinite(stored.summaryRowHeight) && stored.summaryRowHeight >= 0 ? stored.summaryRowHeight : null,
|
|
18187
|
+
density: stored.density === 32 || stored.density === 48 || stored.density === 56 ? stored.density : null
|
|
18120
18188
|
};
|
|
18121
18189
|
}
|
|
18122
18190
|
|
|
@@ -18147,13 +18215,26 @@ var ListTablePersistenceController = class {
|
|
|
18147
18215
|
this.options.domHost.setContentZoom(nextZoom);
|
|
18148
18216
|
this.options.canvasHost.setContentZoom(nextZoom);
|
|
18149
18217
|
}
|
|
18218
|
+
let currentOptions = this.options.getOptions();
|
|
18219
|
+
if (stored.density != null) {
|
|
18220
|
+
currentOptions = {
|
|
18221
|
+
...currentOptions,
|
|
18222
|
+
rowHeight: stored.density,
|
|
18223
|
+
headerRowHeight: stored.density,
|
|
18224
|
+
summaryRowHeight: stored.density
|
|
18225
|
+
};
|
|
18226
|
+
}
|
|
18150
18227
|
if (stored.summaryRowHeight != null) {
|
|
18151
|
-
|
|
18152
|
-
|
|
18153
|
-
|
|
18154
|
-
|
|
18155
|
-
|
|
18156
|
-
|
|
18228
|
+
currentOptions = {
|
|
18229
|
+
...currentOptions,
|
|
18230
|
+
summaryRowHeight: stored.summaryRowHeight
|
|
18231
|
+
};
|
|
18232
|
+
}
|
|
18233
|
+
if (currentOptions !== this.options.getOptions()) {
|
|
18234
|
+
this.options.setOptions(currentOptions);
|
|
18235
|
+
if (stored.density != null) {
|
|
18236
|
+
this.options.resetSummaryValues();
|
|
18237
|
+
currentOptions.ui?.onDensityChange?.(stored.density);
|
|
18157
18238
|
}
|
|
18158
18239
|
}
|
|
18159
18240
|
this.options.refreshRuntimeColumns();
|
|
@@ -18167,7 +18248,8 @@ var ListTablePersistenceController = class {
|
|
|
18167
18248
|
sortState: this.options.getSortState(),
|
|
18168
18249
|
filterState: this.options.getFilterState(),
|
|
18169
18250
|
zoom: this.options.getTableZoom(),
|
|
18170
|
-
summaryRowHeight: tableOptions.summaryRowHeight
|
|
18251
|
+
summaryRowHeight: tableOptions.summaryRowHeight,
|
|
18252
|
+
density: tableOptions.rowHeight
|
|
18171
18253
|
});
|
|
18172
18254
|
}
|
|
18173
18255
|
};
|
|
@@ -18527,7 +18609,7 @@ function computeScrollbarLayout(params) {
|
|
|
18527
18609
|
};
|
|
18528
18610
|
}
|
|
18529
18611
|
const verticalTrackHeight = Math.max(
|
|
18530
|
-
params.bodyHeight - verticalTop - verticalBottom
|
|
18612
|
+
params.bodyHeight - verticalTop - verticalBottom,
|
|
18531
18613
|
0
|
|
18532
18614
|
);
|
|
18533
18615
|
const verticalTrackX = params.width - thickness - verticalRight;
|
|
@@ -19981,7 +20063,6 @@ function resolveExpandedRowHeight2(height, record, index) {
|
|
|
19981
20063
|
|
|
19982
20064
|
// src/services/layout-service.ts
|
|
19983
20065
|
var AUTO_ROW_HEIGHT_SAMPLE_COUNT = 200;
|
|
19984
|
-
var LIST_TABLE_GROUPING_BAR_HEIGHT = 44;
|
|
19985
20066
|
function buildListTableRenderSnapshot(params) {
|
|
19986
20067
|
if (params.cache?.snapshot && params.cache.snapshot.groupIndex === params.cache.groupIndex && isSameRenderCacheInputs(params.cache.inputs, params)) {
|
|
19987
20068
|
const snapshotStartedAt2 = resolvePerformanceNow2();
|
|
@@ -20008,8 +20089,8 @@ function buildListTableRenderSnapshot(params) {
|
|
|
20008
20089
|
const {
|
|
20009
20090
|
options,
|
|
20010
20091
|
theme,
|
|
20011
|
-
width,
|
|
20012
|
-
height,
|
|
20092
|
+
width: hostWidth,
|
|
20093
|
+
height: hostHeight,
|
|
20013
20094
|
scroll,
|
|
20014
20095
|
selectedRowKeys,
|
|
20015
20096
|
query,
|
|
@@ -20020,6 +20101,9 @@ function buildListTableRenderSnapshot(params) {
|
|
|
20020
20101
|
baseRowsOverride,
|
|
20021
20102
|
displayRowsOverride
|
|
20022
20103
|
} = params;
|
|
20104
|
+
const scrollbarThickness = options.scrollbar?.visible === false ? 0 : Math.max(options.scrollbar?.thickness ?? 10, 6);
|
|
20105
|
+
let width = hostWidth;
|
|
20106
|
+
let height = hostHeight;
|
|
20023
20107
|
const sourceNormalizedColumns = normalizeColumns(
|
|
20024
20108
|
getResolvedColumns(options, selectedRowKeys)
|
|
20025
20109
|
);
|
|
@@ -20058,15 +20142,15 @@ function buildListTableRenderSnapshot(params) {
|
|
|
20058
20142
|
const expandableState = resolveExpandableState({
|
|
20059
20143
|
expandable: options.expandable
|
|
20060
20144
|
});
|
|
20061
|
-
const rowHeight = options.rowHeight
|
|
20145
|
+
const rowHeight = options.rowHeight === "auto" ? resolveAutoRowHeight({
|
|
20062
20146
|
rows: queryRows.displayRows,
|
|
20063
20147
|
leafColumns,
|
|
20064
20148
|
theme,
|
|
20065
20149
|
cache: params.cache
|
|
20066
20150
|
}) : options.rowHeight ?? DEFAULT_ROW_HEIGHT;
|
|
20067
|
-
const headerRowHeight = options.headerRowHeight ??
|
|
20068
|
-
const summaryRowHeight = options.summaryRowHeight ??
|
|
20069
|
-
const groupingBarHeight = params.groupBarVisible ?
|
|
20151
|
+
const headerRowHeight = options.headerRowHeight ?? rowHeight;
|
|
20152
|
+
const summaryRowHeight = options.summaryRowHeight ?? rowHeight;
|
|
20153
|
+
const groupingBarHeight = params.groupBarVisible ? rowHeight : 0;
|
|
20070
20154
|
const columnHeaderHeight = (headerInfo.maxDepth + 1) * headerRowHeight;
|
|
20071
20155
|
const headerHeight = groupingBarHeight + columnHeaderHeight;
|
|
20072
20156
|
const hasConfiguredSummary = leafColumns.some(
|
|
@@ -20272,11 +20356,11 @@ function buildListTableRenderSnapshot(params) {
|
|
|
20272
20356
|
scrollRowCount: plainRowWindow.totalRowCount
|
|
20273
20357
|
});
|
|
20274
20358
|
}
|
|
20275
|
-
|
|
20359
|
+
let columnMetrics = resolveColumnMetrics({
|
|
20276
20360
|
columns: leafColumns,
|
|
20277
20361
|
tableWidth: width
|
|
20278
20362
|
});
|
|
20279
|
-
|
|
20363
|
+
let viewportResult = computeViewport({
|
|
20280
20364
|
width,
|
|
20281
20365
|
height,
|
|
20282
20366
|
headerHeight,
|
|
@@ -20287,6 +20371,59 @@ function buildListTableRenderSnapshot(params) {
|
|
|
20287
20371
|
fixedWidthRight: columnMetrics.fixedWidthRight,
|
|
20288
20372
|
scroll
|
|
20289
20373
|
});
|
|
20374
|
+
for (let index = 0; index < 2 && scrollbarThickness > 0; index += 1) {
|
|
20375
|
+
const nextWidth = Math.max(
|
|
20376
|
+
hostWidth - (viewportResult.viewport.maxScrollTop > 0 ? scrollbarThickness : 0),
|
|
20377
|
+
0
|
|
20378
|
+
);
|
|
20379
|
+
const nextHeight = Math.max(
|
|
20380
|
+
hostHeight - (viewportResult.viewport.maxScrollLeft > 0 ? scrollbarThickness : 0),
|
|
20381
|
+
0
|
|
20382
|
+
);
|
|
20383
|
+
if (nextWidth === width && nextHeight === height) {
|
|
20384
|
+
break;
|
|
20385
|
+
}
|
|
20386
|
+
width = nextWidth;
|
|
20387
|
+
height = nextHeight;
|
|
20388
|
+
bodyState = resolveCurrentBodyState();
|
|
20389
|
+
if (plainRowWindow) {
|
|
20390
|
+
bodyState.frozenRows.scroll.windowed = true;
|
|
20391
|
+
bodyState.frozenRows.scroll.rowIndexMap = plainRowWindow.rowIndexMap;
|
|
20392
|
+
bodyState.frozenRows.scroll.rowOffsetMap = plainRowWindow.rowOffsetMap;
|
|
20393
|
+
bodyState.bodyLayout = resolveBodyLayout({
|
|
20394
|
+
height,
|
|
20395
|
+
headerHeight,
|
|
20396
|
+
summaryRowHeight,
|
|
20397
|
+
hasSummary,
|
|
20398
|
+
rowHeight,
|
|
20399
|
+
totalBodyHeight: plainRowWindow.totalBodyHeight,
|
|
20400
|
+
topFrozenRowCount: 0,
|
|
20401
|
+
bottomFrozenRowCount: 0,
|
|
20402
|
+
scrollRowCount: plainRowWindow.totalRowCount
|
|
20403
|
+
});
|
|
20404
|
+
}
|
|
20405
|
+
columnMetrics = resolveColumnMetrics({
|
|
20406
|
+
columns: leafColumns,
|
|
20407
|
+
tableWidth: width
|
|
20408
|
+
});
|
|
20409
|
+
viewportResult = computeViewport({
|
|
20410
|
+
width,
|
|
20411
|
+
height,
|
|
20412
|
+
headerHeight,
|
|
20413
|
+
bodyHeight: bodyState.bodyLayout.scrollBodyHeight,
|
|
20414
|
+
totalWidth: columnMetrics.totalWidth,
|
|
20415
|
+
totalBodyHeight: bodyState.bodyLayout.totalBodyHeight,
|
|
20416
|
+
fixedWidthLeft: columnMetrics.fixedWidthLeft,
|
|
20417
|
+
fixedWidthRight: columnMetrics.fixedWidthRight,
|
|
20418
|
+
scroll
|
|
20419
|
+
});
|
|
20420
|
+
}
|
|
20421
|
+
scrollPageSize = resolveScrollPageSize({
|
|
20422
|
+
options,
|
|
20423
|
+
pageSize: query.pagination.pageSize,
|
|
20424
|
+
bodyHeight: bodyState.bodyLayout.scrollBodyHeight,
|
|
20425
|
+
rowHeight
|
|
20426
|
+
});
|
|
20290
20427
|
const nextScroll = viewportResult.scroll;
|
|
20291
20428
|
const columnSegments = resolveColumnSegments({
|
|
20292
20429
|
metrics: columnMetrics,
|
|
@@ -20294,8 +20431,8 @@ function buildListTableRenderSnapshot(params) {
|
|
|
20294
20431
|
swapAnimation
|
|
20295
20432
|
});
|
|
20296
20433
|
const scrollbarLayout = computeScrollbarLayout({
|
|
20297
|
-
width,
|
|
20298
|
-
height,
|
|
20434
|
+
width: hostWidth,
|
|
20435
|
+
height: hostHeight,
|
|
20299
20436
|
bodyTop: bodyState.bodyLayout.scrollBodyTop,
|
|
20300
20437
|
bodyHeight: bodyState.bodyLayout.scrollBodyHeight,
|
|
20301
20438
|
centerVisibleWidth: columnMetrics.availableCenterWidth,
|
|
@@ -20493,8 +20630,8 @@ function resolveUngroupedDataRowCount(visibleRows) {
|
|
|
20493
20630
|
function updateListTableRenderSnapshotScroll(params) {
|
|
20494
20631
|
const { snapshot, width, height, scroll, options } = params;
|
|
20495
20632
|
const viewportResult = computeViewport({
|
|
20496
|
-
width,
|
|
20497
|
-
height,
|
|
20633
|
+
width: snapshot.width,
|
|
20634
|
+
height: snapshot.height,
|
|
20498
20635
|
headerHeight: snapshot.bodyLayout.scrollBodyTop - snapshot.bodyLayout.topFrozenHeight,
|
|
20499
20636
|
bodyHeight: snapshot.bodyLayout.scrollBodyHeight,
|
|
20500
20637
|
totalWidth: snapshot.columnMetrics.totalWidth,
|
|
@@ -20930,7 +21067,7 @@ function resolveListTableRenderHostSize(params) {
|
|
|
20930
21067
|
}
|
|
20931
21068
|
|
|
20932
21069
|
// src/rendering/primitives/draw-scrollbars.ts
|
|
20933
|
-
function drawScrollbars(ctx, layout, descriptors, opacity = 1, interactive = true) {
|
|
21070
|
+
function drawScrollbars(ctx, layout, descriptors, borderColor, opacity = 1, interactive = true) {
|
|
20934
21071
|
const alpha = Number.isFinite(opacity) ? Math.min(Math.max(opacity, 0), 1) : 1;
|
|
20935
21072
|
if (alpha <= 1e-3) {
|
|
20936
21073
|
return;
|
|
@@ -20938,14 +21075,28 @@ function drawScrollbars(ctx, layout, descriptors, opacity = 1, interactive = tru
|
|
|
20938
21075
|
ctx.save();
|
|
20939
21076
|
ctx.globalAlpha = alpha;
|
|
20940
21077
|
if (layout.horizontal) {
|
|
20941
|
-
drawAxisScrollbar(
|
|
21078
|
+
drawAxisScrollbar(
|
|
21079
|
+
ctx,
|
|
21080
|
+
layout.horizontal,
|
|
21081
|
+
"horizontal",
|
|
21082
|
+
descriptors,
|
|
21083
|
+
borderColor,
|
|
21084
|
+
interactive
|
|
21085
|
+
);
|
|
20942
21086
|
}
|
|
20943
21087
|
if (layout.vertical) {
|
|
20944
|
-
drawAxisScrollbar(
|
|
21088
|
+
drawAxisScrollbar(
|
|
21089
|
+
ctx,
|
|
21090
|
+
layout.vertical,
|
|
21091
|
+
"vertical",
|
|
21092
|
+
descriptors,
|
|
21093
|
+
borderColor,
|
|
21094
|
+
interactive
|
|
21095
|
+
);
|
|
20945
21096
|
}
|
|
20946
21097
|
ctx.restore();
|
|
20947
21098
|
}
|
|
20948
|
-
function drawAxisScrollbar(ctx, layout, axis, descriptors, interactive) {
|
|
21099
|
+
function drawAxisScrollbar(ctx, layout, axis, descriptors, borderColor, interactive) {
|
|
20949
21100
|
const kind = axis === "horizontal" ? "horizontal-scrollbar" : "vertical-scrollbar";
|
|
20950
21101
|
if (interactive) {
|
|
20951
21102
|
descriptors.push({
|
|
@@ -20973,16 +21124,19 @@ function drawAxisScrollbar(ctx, layout, axis, descriptors, interactive) {
|
|
|
20973
21124
|
scrollbarRole: "increase-button"
|
|
20974
21125
|
});
|
|
20975
21126
|
}
|
|
20976
|
-
drawTrack(ctx, layout.track);
|
|
21127
|
+
drawTrack(ctx, layout.track, borderColor);
|
|
20977
21128
|
drawButton(ctx, layout.decreaseButton, axis, "decrease");
|
|
20978
21129
|
drawButton(ctx, layout.increaseButton, axis, "increase");
|
|
20979
21130
|
drawThumb(ctx, layout.thumb);
|
|
20980
21131
|
}
|
|
20981
|
-
function drawTrack(ctx, rect) {
|
|
21132
|
+
function drawTrack(ctx, rect, borderColor) {
|
|
20982
21133
|
ctx.save();
|
|
20983
21134
|
ctx.fillStyle = "rgba(148, 163, 184, 0.16)";
|
|
21135
|
+
ctx.strokeStyle = borderColor;
|
|
21136
|
+
ctx.lineWidth = 1;
|
|
20984
21137
|
roundRect(ctx, rect.x, rect.y, rect.width, rect.height, rect.height / 2);
|
|
20985
21138
|
ctx.fill();
|
|
21139
|
+
ctx.stroke();
|
|
20986
21140
|
ctx.restore();
|
|
20987
21141
|
}
|
|
20988
21142
|
function drawThumb(ctx, rect) {
|
|
@@ -23821,7 +23975,7 @@ function executeListTableRenderPipeline(params) {
|
|
|
23821
23975
|
renderer.drawEmpty(
|
|
23822
23976
|
width,
|
|
23823
23977
|
bodyAreaHeight,
|
|
23824
|
-
options.emptyText ?? "\
|
|
23978
|
+
options.emptyText ?? "\u6682\u65E0\u6570\u636E",
|
|
23825
23979
|
headerHeight
|
|
23826
23980
|
);
|
|
23827
23981
|
} else {
|
|
@@ -23988,6 +24142,7 @@ function executeListTableRenderPipeline(params) {
|
|
|
23988
24142
|
ctx,
|
|
23989
24143
|
snapshot.scrollbarLayout,
|
|
23990
24144
|
descriptors,
|
|
24145
|
+
theme.borderColor,
|
|
23991
24146
|
scrollbarOpacity,
|
|
23992
24147
|
isScrollbarInteractive
|
|
23993
24148
|
);
|
|
@@ -24338,7 +24493,7 @@ var ListTableRenderController = class {
|
|
|
24338
24493
|
const layoutWidth = hostSize.width / zoom;
|
|
24339
24494
|
const layoutAvailableHeight = availableHeight / zoom;
|
|
24340
24495
|
const currentSnapshot = this.currentRenderSnapshot;
|
|
24341
|
-
const measureSnapshot = currentSnapshot && currentSnapshot.width === layoutWidth && currentSnapshot.groupingBarHeight === (this.options.getGroupBarVisible?.() ?
|
|
24496
|
+
const measureSnapshot = currentSnapshot && currentSnapshot.width === layoutWidth && currentSnapshot.groupingBarHeight === (this.options.getGroupBarVisible?.() ? currentSnapshot.rowHeight : 0) && currentSnapshot.groupingColumns.map((column) => column.key).join("") === (this.options.getGroupColumnKeys?.() ?? []).join("") ? currentSnapshot : this.buildSnapshot(layoutWidth, layoutAvailableHeight, false);
|
|
24342
24497
|
if (!measureSnapshot) {
|
|
24343
24498
|
this.options.setFittedHeight(null);
|
|
24344
24499
|
return;
|
|
@@ -24351,7 +24506,7 @@ var ListTableRenderController = class {
|
|
|
24351
24506
|
topFrozenHeight: measureSnapshot.bodyLayout.topFrozenHeight,
|
|
24352
24507
|
totalBodyHeight: Math.max(
|
|
24353
24508
|
measureSnapshot.bodyLayout.totalBodyHeight,
|
|
24354
|
-
measureSnapshot.displayRows.length === 0 ? measureSnapshot.rowHeight : 0
|
|
24509
|
+
measureSnapshot.displayRows.length === 0 ? Math.max(measureSnapshot.rowHeight, DEFAULT_EMPTY_BODY_HEIGHT) : 0
|
|
24355
24510
|
),
|
|
24356
24511
|
bottomFrozenHeight: measureSnapshot.bodyLayout.bottomFrozenHeight,
|
|
24357
24512
|
summaryHeight: measureSnapshot.bodyLayout.summaryHeight
|
|
@@ -25653,9 +25808,7 @@ function assembleListTableCoreControllers(core, options) {
|
|
|
25653
25808
|
draggingScrollbar: core.draggingScrollbar != null,
|
|
25654
25809
|
continuousScrollActive: core.eventController.isContinuousScrollActive(),
|
|
25655
25810
|
hover: core.storeFacade.hover,
|
|
25656
|
-
scrollbarActiveUntil: core.animationController.getScrollbarActiveUntil()
|
|
25657
|
-
now: Date.now()
|
|
25658
|
-
});
|
|
25811
|
+
scrollbarActiveUntil: core.animationController.getScrollbarActiveUntil()});
|
|
25659
25812
|
const applyRenderResult = (result) => {
|
|
25660
25813
|
applyListTableRenderPassResult({
|
|
25661
25814
|
didRender: result.didRender,
|
|
@@ -25961,6 +26114,7 @@ function assembleListTableCoreControllers(core, options) {
|
|
|
25961
26114
|
}
|
|
25962
26115
|
},
|
|
25963
26116
|
isEditing: () => core.editingController.getSession() != null,
|
|
26117
|
+
resetSummaryValues: () => core.summaryController.reset(),
|
|
25964
26118
|
requestRender: () => render()
|
|
25965
26119
|
});
|
|
25966
26120
|
core.contentActionController = new ListTableContentActionController({
|
|
@@ -25989,6 +26143,7 @@ function assembleListTableCoreControllers(core, options) {
|
|
|
25989
26143
|
domHost: core.domHost,
|
|
25990
26144
|
canvasHost: core.canvasHost,
|
|
25991
26145
|
refreshRuntimeColumns,
|
|
26146
|
+
resetSummaryValues: () => core.summaryController.reset(),
|
|
25992
26147
|
requestRender: () => render()
|
|
25993
26148
|
});
|
|
25994
26149
|
core.carouselController = new ListTableCarouselController({
|
|
@@ -26451,6 +26606,14 @@ var ListTableCore = class {
|
|
|
26451
26606
|
resetFilter() {
|
|
26452
26607
|
this.headerActionController.resetFilters();
|
|
26453
26608
|
}
|
|
26609
|
+
/**
|
|
26610
|
+
* 设置内置表格密度。
|
|
26611
|
+
*/
|
|
26612
|
+
changeDensity(density) {
|
|
26613
|
+
this.headerActionController.changeTableDensity(
|
|
26614
|
+
density === 32 ? "compact" : density === 56 ? "comfortable" : "middle"
|
|
26615
|
+
);
|
|
26616
|
+
}
|
|
26454
26617
|
/**
|
|
26455
26618
|
* 销毁实例。
|
|
26456
26619
|
*/
|
|
@@ -26573,6 +26736,12 @@ var ListTable = class {
|
|
|
26573
26736
|
resetFilter() {
|
|
26574
26737
|
this.core?.resetFilter();
|
|
26575
26738
|
}
|
|
26739
|
+
/**
|
|
26740
|
+
* 设置并持久化内置表格密度。
|
|
26741
|
+
*/
|
|
26742
|
+
changeDensity(density) {
|
|
26743
|
+
this.core?.changeDensity(density);
|
|
26744
|
+
}
|
|
26576
26745
|
/**
|
|
26577
26746
|
* 销毁实例。
|
|
26578
26747
|
*/
|