@canvas-components/list-table 0.2.5 → 0.2.7
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 +223 -61
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +17 -8
- package/dist/index.d.ts +17 -8
- package/dist/index.js +223 -61
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -80,7 +80,7 @@ table.mount();
|
|
|
80
80
|
| `carouselScroll` | `ListTableCarouselScrollOptions` | 自动轮播滚动配置 |
|
|
81
81
|
| `stretchColumns` | `boolean` | 列总宽不足时是否拉伸补齐 |
|
|
82
82
|
| `resizable` | `boolean` | 是否开启列宽拖拽 |
|
|
83
|
-
| `storageKey` | `string` |
|
|
83
|
+
| `storageKey` | `string` | 列配置、查询、缩放和密度持久化键 |
|
|
84
84
|
| `draggable` | `boolean` | 是否开启列拖拽排序 |
|
|
85
85
|
| `tableId` | `string` | 表格唯一标识 |
|
|
86
86
|
| `rowDrag` | `ListTableRowDragOptions` | 行拖拽配置 |
|
package/dist/index.cjs
CHANGED
|
@@ -239,11 +239,18 @@ var CanvasRenderer = class {
|
|
|
239
239
|
height: Math.max(height, 0)
|
|
240
240
|
} : this.resolveCoverSize(width, height);
|
|
241
241
|
this.ctx.fillRect(0, safeTop, cover.width, cover.height);
|
|
242
|
+
const centerX = cover.width / 2;
|
|
243
|
+
const centerY = safeTop + cover.height / 2;
|
|
244
|
+
const showImage = cover.width >= 80 && cover.height >= 72;
|
|
245
|
+
if (showImage) {
|
|
246
|
+
const imageTop = centerY - 36;
|
|
247
|
+
drawSimpleEmptyIllustration(this.ctx, centerX - 32, imageTop);
|
|
248
|
+
}
|
|
242
249
|
this.ctx.fillStyle = this.theme.emptyTextColor;
|
|
243
250
|
this.ctx.font = `${this.theme.fontSize}px ${this.theme.fontFamily}`;
|
|
244
251
|
this.ctx.textAlign = "center";
|
|
245
252
|
this.ctx.textBaseline = "middle";
|
|
246
|
-
this.ctx.fillText(text,
|
|
253
|
+
this.ctx.fillText(text, centerX, showImage ? centerY + 28 : centerY);
|
|
247
254
|
this.ctx.restore();
|
|
248
255
|
}
|
|
249
256
|
/**
|
|
@@ -257,6 +264,49 @@ var CanvasRenderer = class {
|
|
|
257
264
|
};
|
|
258
265
|
}
|
|
259
266
|
};
|
|
267
|
+
function drawSimpleEmptyIllustration(ctx, left, top) {
|
|
268
|
+
ctx.save();
|
|
269
|
+
ctx.translate(left, top + 1);
|
|
270
|
+
ctx.beginPath();
|
|
271
|
+
ctx.ellipse(32, 33, 32, 7, 0, 0, Math.PI * 2);
|
|
272
|
+
ctx.fillStyle = "#f5f5f5";
|
|
273
|
+
ctx.fill();
|
|
274
|
+
ctx.strokeStyle = "#d9d9d9";
|
|
275
|
+
ctx.lineWidth = 1;
|
|
276
|
+
ctx.beginPath();
|
|
277
|
+
ctx.moveTo(55, 12.76);
|
|
278
|
+
ctx.lineTo(44.854, 1.258);
|
|
279
|
+
ctx.bezierCurveTo(44.367, 0.474, 43.656, 0, 42.907, 0);
|
|
280
|
+
ctx.lineTo(21.093, 0);
|
|
281
|
+
ctx.bezierCurveTo(20.344, 0, 19.633, 0.474, 19.146, 1.257);
|
|
282
|
+
ctx.lineTo(9, 12.761);
|
|
283
|
+
ctx.lineTo(9, 22);
|
|
284
|
+
ctx.lineTo(55, 22);
|
|
285
|
+
ctx.lineTo(55, 12.76);
|
|
286
|
+
ctx.closePath();
|
|
287
|
+
ctx.stroke();
|
|
288
|
+
ctx.beginPath();
|
|
289
|
+
ctx.moveTo(41.613, 15.931);
|
|
290
|
+
ctx.bezierCurveTo(41.613, 14.326, 42.607, 13.001, 43.84, 13);
|
|
291
|
+
ctx.lineTo(55, 13);
|
|
292
|
+
ctx.lineTo(55, 31.137);
|
|
293
|
+
ctx.bezierCurveTo(55, 33.26, 53.68, 35, 52.05, 35);
|
|
294
|
+
ctx.lineTo(11.95, 35);
|
|
295
|
+
ctx.bezierCurveTo(10.32, 35, 9, 33.259, 9, 31.137);
|
|
296
|
+
ctx.lineTo(9, 13);
|
|
297
|
+
ctx.lineTo(20.16, 13);
|
|
298
|
+
ctx.bezierCurveTo(21.393, 13, 22.387, 14.323, 22.387, 15.928);
|
|
299
|
+
ctx.lineTo(22.387, 15.95);
|
|
300
|
+
ctx.bezierCurveTo(22.387, 17.555, 23.392, 18.851, 24.624, 18.851);
|
|
301
|
+
ctx.lineTo(39.376, 18.851);
|
|
302
|
+
ctx.bezierCurveTo(40.608, 18.851, 41.613, 17.543, 41.613, 15.938);
|
|
303
|
+
ctx.lineTo(41.613, 15.931);
|
|
304
|
+
ctx.closePath();
|
|
305
|
+
ctx.fillStyle = "#fafafa";
|
|
306
|
+
ctx.fill();
|
|
307
|
+
ctx.stroke();
|
|
308
|
+
ctx.restore();
|
|
309
|
+
}
|
|
260
310
|
|
|
261
311
|
// src/domain/columns/compute-column-widths.ts
|
|
262
312
|
function computeColumnWidths(columns) {
|
|
@@ -930,10 +980,11 @@ function collectLeafColumns(columns) {
|
|
|
930
980
|
}
|
|
931
981
|
|
|
932
982
|
// src/domain/constants.ts
|
|
933
|
-
var DEFAULT_ROW_HEIGHT =
|
|
934
|
-
var DEFAULT_HEADER_ROW_HEIGHT =
|
|
983
|
+
var DEFAULT_ROW_HEIGHT = 32;
|
|
984
|
+
var DEFAULT_HEADER_ROW_HEIGHT = DEFAULT_ROW_HEIGHT;
|
|
935
985
|
var HORIZONTAL_SCROLL_STEP = 120;
|
|
936
|
-
var DEFAULT_SUMMARY_ROW_HEIGHT =
|
|
986
|
+
var DEFAULT_SUMMARY_ROW_HEIGHT = DEFAULT_ROW_HEIGHT;
|
|
987
|
+
var DEFAULT_EMPTY_BODY_HEIGHT = 96;
|
|
937
988
|
var DEFAULT_PAGINATION_PAGE_SIZE = 10;
|
|
938
989
|
var FALLBACK_TABLE_WIDTH = 320;
|
|
939
990
|
var FALLBACK_TABLE_HEIGHT = 240;
|
|
@@ -1507,8 +1558,8 @@ var defaultListTableTheme = {
|
|
|
1507
1558
|
hoverBackgroundColor: "#edf4ff",
|
|
1508
1559
|
selectionBackgroundColor: "#dbeafe",
|
|
1509
1560
|
textSelectionBackgroundColor: "#99c2ff",
|
|
1510
|
-
emptyBackgroundColor: "#
|
|
1511
|
-
emptyTextColor: "#
|
|
1561
|
+
emptyBackgroundColor: "#ffffff",
|
|
1562
|
+
emptyTextColor: "#8c8c8c",
|
|
1512
1563
|
debugStrokeColor: "#ef4444",
|
|
1513
1564
|
debugFillColor: "rgba(239, 68, 68, 0.08)",
|
|
1514
1565
|
fontFamily: '"Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif',
|
|
@@ -8013,15 +8064,11 @@ function resolvePointerHitWithScrollbars(result, x, y, scrollbarLayout) {
|
|
|
8013
8064
|
return result;
|
|
8014
8065
|
}
|
|
8015
8066
|
function resolveScrollbarVisibility(params) {
|
|
8016
|
-
const
|
|
8017
|
-
|
|
8018
|
-
if (scrollbarOption?.visible === true) {
|
|
8067
|
+
const scrollbarOption = params.options.scrollbar;
|
|
8068
|
+
if (scrollbarOption?.visible !== false) {
|
|
8019
8069
|
return true;
|
|
8020
8070
|
}
|
|
8021
|
-
|
|
8022
|
-
return false;
|
|
8023
|
-
}
|
|
8024
|
-
return draggingScrollbar || continuousScrollActive || hover.area === "horizontal-scrollbar" || hover.area === "vertical-scrollbar" || hover.area !== "empty" || now2 < scrollbarActiveUntil;
|
|
8071
|
+
return false;
|
|
8025
8072
|
}
|
|
8026
8073
|
|
|
8027
8074
|
// src/services/pointer-hit-service.ts
|
|
@@ -13637,13 +13684,13 @@ function showHeaderContextMenu(params) {
|
|
|
13637
13684
|
return true;
|
|
13638
13685
|
}
|
|
13639
13686
|
function resolveContextMenuDensity(rowHeight) {
|
|
13640
|
-
if (rowHeight ===
|
|
13687
|
+
if (rowHeight === 56) {
|
|
13641
13688
|
return "comfortable";
|
|
13642
13689
|
}
|
|
13643
13690
|
if (rowHeight === 32) {
|
|
13644
13691
|
return "compact";
|
|
13645
13692
|
}
|
|
13646
|
-
return "middle";
|
|
13693
|
+
return rowHeight === 48 ? "middle" : "compact";
|
|
13647
13694
|
}
|
|
13648
13695
|
|
|
13649
13696
|
// src/features/tooltip/tooltip-feature.ts
|
|
@@ -15213,7 +15260,7 @@ var ListTableEventController = class {
|
|
|
15213
15260
|
headerTree: this.host.headerTree,
|
|
15214
15261
|
headerRowsCache: this.host.headerRowsCache,
|
|
15215
15262
|
pointerX: position.x,
|
|
15216
|
-
headerRowHeight: DEFAULT_HEADER_ROW_HEIGHT,
|
|
15263
|
+
headerRowHeight: this.host.currentRenderSnapshot?.headerRowHeight ?? DEFAULT_HEADER_ROW_HEIGHT,
|
|
15217
15264
|
allowGrouping: this.host.groupBarVisible,
|
|
15218
15265
|
getMovableLeafColumns: (node, hitRect) => getHeaderNodeMovableLeafColumns({
|
|
15219
15266
|
node,
|
|
@@ -15550,7 +15597,7 @@ var ListTableEventController = class {
|
|
|
15550
15597
|
},
|
|
15551
15598
|
summaryVisible: Boolean(this.host.currentRenderSnapshot?.hasSummary),
|
|
15552
15599
|
onToggleSummary: () => {
|
|
15553
|
-
this.host.options.summaryRowHeight = this.host.currentRenderSnapshot?.hasSummary ? 0 : DEFAULT_SUMMARY_ROW_HEIGHT;
|
|
15600
|
+
this.host.options.summaryRowHeight = this.host.currentRenderSnapshot?.hasSummary ? 0 : this.host.currentRenderSnapshot?.rowHeight ?? DEFAULT_SUMMARY_ROW_HEIGHT;
|
|
15554
15601
|
this.host.persistColumnConfig();
|
|
15555
15602
|
this.host.render();
|
|
15556
15603
|
},
|
|
@@ -17415,9 +17462,9 @@ function resolveToggleHeaderColumnVisibilityAction(params) {
|
|
|
17415
17462
|
function resolveDensitySizes(density) {
|
|
17416
17463
|
if (density === "comfortable") {
|
|
17417
17464
|
return {
|
|
17418
|
-
rowHeight:
|
|
17419
|
-
headerRowHeight:
|
|
17420
|
-
summaryRowHeight:
|
|
17465
|
+
rowHeight: 56,
|
|
17466
|
+
headerRowHeight: 56,
|
|
17467
|
+
summaryRowHeight: 56
|
|
17421
17468
|
};
|
|
17422
17469
|
}
|
|
17423
17470
|
if (density === "compact") {
|
|
@@ -17428,9 +17475,9 @@ function resolveDensitySizes(density) {
|
|
|
17428
17475
|
};
|
|
17429
17476
|
}
|
|
17430
17477
|
return {
|
|
17431
|
-
rowHeight:
|
|
17432
|
-
headerRowHeight:
|
|
17433
|
-
summaryRowHeight:
|
|
17478
|
+
rowHeight: 48,
|
|
17479
|
+
headerRowHeight: 48,
|
|
17480
|
+
summaryRowHeight: 48
|
|
17434
17481
|
};
|
|
17435
17482
|
}
|
|
17436
17483
|
|
|
@@ -17581,6 +17628,9 @@ var ListTableHeaderActionController = class {
|
|
|
17581
17628
|
headerRowHeight: nextSize.headerRowHeight,
|
|
17582
17629
|
summaryRowHeight: nextSize.summaryRowHeight
|
|
17583
17630
|
});
|
|
17631
|
+
this.options.resetSummaryValues();
|
|
17632
|
+
options.ui?.onDensityChange?.(nextSize.rowHeight);
|
|
17633
|
+
this.options.persistColumnConfig();
|
|
17584
17634
|
this.options.hideHeaderContextMenu();
|
|
17585
17635
|
this.options.requestRender();
|
|
17586
17636
|
}
|
|
@@ -18050,7 +18100,7 @@ function applyStoredColumnConfig(columns, storedColumns) {
|
|
|
18050
18100
|
};
|
|
18051
18101
|
applyToColumns(columns);
|
|
18052
18102
|
}
|
|
18053
|
-
function buildStoredColumnConfig(columns, sortState, filterState, zoom, summaryRowHeight) {
|
|
18103
|
+
function buildStoredColumnConfig(columns, sortState, filterState, zoom, summaryRowHeight, density) {
|
|
18054
18104
|
const result = {};
|
|
18055
18105
|
const collectColumns = (cols) => {
|
|
18056
18106
|
for (const col of cols) {
|
|
@@ -18085,7 +18135,8 @@ function buildStoredColumnConfig(columns, sortState, filterState, zoom, summaryR
|
|
|
18085
18135
|
},
|
|
18086
18136
|
filters: filterState,
|
|
18087
18137
|
...typeof zoom === "number" && Number.isFinite(zoom) && zoom > 0 ? { zoom } : null,
|
|
18088
|
-
...typeof summaryRowHeight === "number" && Number.isFinite(summaryRowHeight) && summaryRowHeight >= 0 ? { summaryRowHeight } : null
|
|
18138
|
+
...typeof summaryRowHeight === "number" && Number.isFinite(summaryRowHeight) && summaryRowHeight >= 0 ? { summaryRowHeight } : null,
|
|
18139
|
+
...density === 32 || density === 48 || density === 56 ? { density } : null
|
|
18089
18140
|
};
|
|
18090
18141
|
}
|
|
18091
18142
|
|
|
@@ -18097,7 +18148,8 @@ function persistListTableColumnConfig(params) {
|
|
|
18097
18148
|
sortState,
|
|
18098
18149
|
filterState,
|
|
18099
18150
|
zoom,
|
|
18100
|
-
summaryRowHeight
|
|
18151
|
+
summaryRowHeight,
|
|
18152
|
+
density
|
|
18101
18153
|
} = params;
|
|
18102
18154
|
if (!storageKey) {
|
|
18103
18155
|
return;
|
|
@@ -18110,7 +18162,8 @@ function persistListTableColumnConfig(params) {
|
|
|
18110
18162
|
sortState,
|
|
18111
18163
|
filterState,
|
|
18112
18164
|
zoom,
|
|
18113
|
-
summaryRowHeight
|
|
18165
|
+
summaryRowHeight,
|
|
18166
|
+
density
|
|
18114
18167
|
)
|
|
18115
18168
|
);
|
|
18116
18169
|
}
|
|
@@ -18132,7 +18185,8 @@ async function loadListTableStoredConfig(params) {
|
|
|
18132
18185
|
} : null,
|
|
18133
18186
|
filterState: stored.filters ? stored.filters : null,
|
|
18134
18187
|
zoom: typeof stored.zoom === "number" && Number.isFinite(stored.zoom) && stored.zoom > 0 ? stored.zoom : null,
|
|
18135
|
-
summaryRowHeight: typeof stored.summaryRowHeight === "number" && Number.isFinite(stored.summaryRowHeight) && stored.summaryRowHeight >= 0 ? stored.summaryRowHeight : null
|
|
18188
|
+
summaryRowHeight: typeof stored.summaryRowHeight === "number" && Number.isFinite(stored.summaryRowHeight) && stored.summaryRowHeight >= 0 ? stored.summaryRowHeight : null,
|
|
18189
|
+
density: stored.density === 32 || stored.density === 48 || stored.density === 56 ? stored.density : null
|
|
18136
18190
|
};
|
|
18137
18191
|
}
|
|
18138
18192
|
|
|
@@ -18163,13 +18217,26 @@ var ListTablePersistenceController = class {
|
|
|
18163
18217
|
this.options.domHost.setContentZoom(nextZoom);
|
|
18164
18218
|
this.options.canvasHost.setContentZoom(nextZoom);
|
|
18165
18219
|
}
|
|
18220
|
+
let currentOptions = this.options.getOptions();
|
|
18221
|
+
if (stored.density != null) {
|
|
18222
|
+
currentOptions = {
|
|
18223
|
+
...currentOptions,
|
|
18224
|
+
rowHeight: stored.density,
|
|
18225
|
+
headerRowHeight: stored.density,
|
|
18226
|
+
summaryRowHeight: stored.density
|
|
18227
|
+
};
|
|
18228
|
+
}
|
|
18166
18229
|
if (stored.summaryRowHeight != null) {
|
|
18167
|
-
|
|
18168
|
-
|
|
18169
|
-
|
|
18170
|
-
|
|
18171
|
-
|
|
18172
|
-
|
|
18230
|
+
currentOptions = {
|
|
18231
|
+
...currentOptions,
|
|
18232
|
+
summaryRowHeight: stored.summaryRowHeight
|
|
18233
|
+
};
|
|
18234
|
+
}
|
|
18235
|
+
if (currentOptions !== this.options.getOptions()) {
|
|
18236
|
+
this.options.setOptions(currentOptions);
|
|
18237
|
+
if (stored.density != null) {
|
|
18238
|
+
this.options.resetSummaryValues();
|
|
18239
|
+
currentOptions.ui?.onDensityChange?.(stored.density);
|
|
18173
18240
|
}
|
|
18174
18241
|
}
|
|
18175
18242
|
this.options.refreshRuntimeColumns();
|
|
@@ -18183,7 +18250,8 @@ var ListTablePersistenceController = class {
|
|
|
18183
18250
|
sortState: this.options.getSortState(),
|
|
18184
18251
|
filterState: this.options.getFilterState(),
|
|
18185
18252
|
zoom: this.options.getTableZoom(),
|
|
18186
|
-
summaryRowHeight: tableOptions.summaryRowHeight
|
|
18253
|
+
summaryRowHeight: tableOptions.summaryRowHeight,
|
|
18254
|
+
density: tableOptions.rowHeight
|
|
18187
18255
|
});
|
|
18188
18256
|
}
|
|
18189
18257
|
};
|
|
@@ -18543,7 +18611,7 @@ function computeScrollbarLayout(params) {
|
|
|
18543
18611
|
};
|
|
18544
18612
|
}
|
|
18545
18613
|
const verticalTrackHeight = Math.max(
|
|
18546
|
-
params.bodyHeight - verticalTop - verticalBottom
|
|
18614
|
+
params.bodyHeight - verticalTop - verticalBottom,
|
|
18547
18615
|
0
|
|
18548
18616
|
);
|
|
18549
18617
|
const verticalTrackX = params.width - thickness - verticalRight;
|
|
@@ -19997,7 +20065,6 @@ function resolveExpandedRowHeight2(height, record, index) {
|
|
|
19997
20065
|
|
|
19998
20066
|
// src/services/layout-service.ts
|
|
19999
20067
|
var AUTO_ROW_HEIGHT_SAMPLE_COUNT = 200;
|
|
20000
|
-
var LIST_TABLE_GROUPING_BAR_HEIGHT = 44;
|
|
20001
20068
|
function buildListTableRenderSnapshot(params) {
|
|
20002
20069
|
if (params.cache?.snapshot && params.cache.snapshot.groupIndex === params.cache.groupIndex && isSameRenderCacheInputs(params.cache.inputs, params)) {
|
|
20003
20070
|
const snapshotStartedAt2 = resolvePerformanceNow2();
|
|
@@ -20024,8 +20091,8 @@ function buildListTableRenderSnapshot(params) {
|
|
|
20024
20091
|
const {
|
|
20025
20092
|
options,
|
|
20026
20093
|
theme,
|
|
20027
|
-
width,
|
|
20028
|
-
height,
|
|
20094
|
+
width: hostWidth,
|
|
20095
|
+
height: hostHeight,
|
|
20029
20096
|
scroll,
|
|
20030
20097
|
selectedRowKeys,
|
|
20031
20098
|
query,
|
|
@@ -20036,6 +20103,9 @@ function buildListTableRenderSnapshot(params) {
|
|
|
20036
20103
|
baseRowsOverride,
|
|
20037
20104
|
displayRowsOverride
|
|
20038
20105
|
} = params;
|
|
20106
|
+
const scrollbarThickness = options.scrollbar?.visible === false ? 0 : Math.max(options.scrollbar?.thickness ?? 10, 6);
|
|
20107
|
+
let width = hostWidth;
|
|
20108
|
+
let height = hostHeight;
|
|
20039
20109
|
const sourceNormalizedColumns = normalizeColumns(
|
|
20040
20110
|
getResolvedColumns(options, selectedRowKeys)
|
|
20041
20111
|
);
|
|
@@ -20074,15 +20144,19 @@ function buildListTableRenderSnapshot(params) {
|
|
|
20074
20144
|
const expandableState = resolveExpandableState({
|
|
20075
20145
|
expandable: options.expandable
|
|
20076
20146
|
});
|
|
20077
|
-
const rowHeight = options.rowHeight
|
|
20147
|
+
const rowHeight = options.rowHeight === "auto" ? resolveAutoRowHeight({
|
|
20078
20148
|
rows: queryRows.displayRows,
|
|
20079
20149
|
leafColumns,
|
|
20080
20150
|
theme,
|
|
20081
20151
|
cache: params.cache
|
|
20082
20152
|
}) : options.rowHeight ?? DEFAULT_ROW_HEIGHT;
|
|
20083
|
-
const headerRowHeight =
|
|
20084
|
-
|
|
20085
|
-
|
|
20153
|
+
const headerRowHeight = resolveListTableHeaderRowHeight({
|
|
20154
|
+
rowHeight: options.rowHeight,
|
|
20155
|
+
resolvedRowHeight: rowHeight,
|
|
20156
|
+
headerRowHeight: options.headerRowHeight
|
|
20157
|
+
});
|
|
20158
|
+
const summaryRowHeight = options.summaryRowHeight ?? rowHeight;
|
|
20159
|
+
const groupingBarHeight = params.groupBarVisible ? rowHeight : 0;
|
|
20086
20160
|
const columnHeaderHeight = (headerInfo.maxDepth + 1) * headerRowHeight;
|
|
20087
20161
|
const headerHeight = groupingBarHeight + columnHeaderHeight;
|
|
20088
20162
|
const hasConfiguredSummary = leafColumns.some(
|
|
@@ -20288,11 +20362,11 @@ function buildListTableRenderSnapshot(params) {
|
|
|
20288
20362
|
scrollRowCount: plainRowWindow.totalRowCount
|
|
20289
20363
|
});
|
|
20290
20364
|
}
|
|
20291
|
-
|
|
20365
|
+
let columnMetrics = resolveColumnMetrics({
|
|
20292
20366
|
columns: leafColumns,
|
|
20293
20367
|
tableWidth: width
|
|
20294
20368
|
});
|
|
20295
|
-
|
|
20369
|
+
let viewportResult = computeViewport({
|
|
20296
20370
|
width,
|
|
20297
20371
|
height,
|
|
20298
20372
|
headerHeight,
|
|
@@ -20303,6 +20377,59 @@ function buildListTableRenderSnapshot(params) {
|
|
|
20303
20377
|
fixedWidthRight: columnMetrics.fixedWidthRight,
|
|
20304
20378
|
scroll
|
|
20305
20379
|
});
|
|
20380
|
+
for (let index = 0; index < 2 && scrollbarThickness > 0; index += 1) {
|
|
20381
|
+
const nextWidth = Math.max(
|
|
20382
|
+
hostWidth - (viewportResult.viewport.maxScrollTop > 0 ? scrollbarThickness : 0),
|
|
20383
|
+
0
|
|
20384
|
+
);
|
|
20385
|
+
const nextHeight = Math.max(
|
|
20386
|
+
hostHeight - (viewportResult.viewport.maxScrollLeft > 0 ? scrollbarThickness : 0),
|
|
20387
|
+
0
|
|
20388
|
+
);
|
|
20389
|
+
if (nextWidth === width && nextHeight === height) {
|
|
20390
|
+
break;
|
|
20391
|
+
}
|
|
20392
|
+
width = nextWidth;
|
|
20393
|
+
height = nextHeight;
|
|
20394
|
+
bodyState = resolveCurrentBodyState();
|
|
20395
|
+
if (plainRowWindow) {
|
|
20396
|
+
bodyState.frozenRows.scroll.windowed = true;
|
|
20397
|
+
bodyState.frozenRows.scroll.rowIndexMap = plainRowWindow.rowIndexMap;
|
|
20398
|
+
bodyState.frozenRows.scroll.rowOffsetMap = plainRowWindow.rowOffsetMap;
|
|
20399
|
+
bodyState.bodyLayout = resolveBodyLayout({
|
|
20400
|
+
height,
|
|
20401
|
+
headerHeight,
|
|
20402
|
+
summaryRowHeight,
|
|
20403
|
+
hasSummary,
|
|
20404
|
+
rowHeight,
|
|
20405
|
+
totalBodyHeight: plainRowWindow.totalBodyHeight,
|
|
20406
|
+
topFrozenRowCount: 0,
|
|
20407
|
+
bottomFrozenRowCount: 0,
|
|
20408
|
+
scrollRowCount: plainRowWindow.totalRowCount
|
|
20409
|
+
});
|
|
20410
|
+
}
|
|
20411
|
+
columnMetrics = resolveColumnMetrics({
|
|
20412
|
+
columns: leafColumns,
|
|
20413
|
+
tableWidth: width
|
|
20414
|
+
});
|
|
20415
|
+
viewportResult = computeViewport({
|
|
20416
|
+
width,
|
|
20417
|
+
height,
|
|
20418
|
+
headerHeight,
|
|
20419
|
+
bodyHeight: bodyState.bodyLayout.scrollBodyHeight,
|
|
20420
|
+
totalWidth: columnMetrics.totalWidth,
|
|
20421
|
+
totalBodyHeight: bodyState.bodyLayout.totalBodyHeight,
|
|
20422
|
+
fixedWidthLeft: columnMetrics.fixedWidthLeft,
|
|
20423
|
+
fixedWidthRight: columnMetrics.fixedWidthRight,
|
|
20424
|
+
scroll
|
|
20425
|
+
});
|
|
20426
|
+
}
|
|
20427
|
+
scrollPageSize = resolveScrollPageSize({
|
|
20428
|
+
options,
|
|
20429
|
+
pageSize: query.pagination.pageSize,
|
|
20430
|
+
bodyHeight: bodyState.bodyLayout.scrollBodyHeight,
|
|
20431
|
+
rowHeight
|
|
20432
|
+
});
|
|
20306
20433
|
const nextScroll = viewportResult.scroll;
|
|
20307
20434
|
const columnSegments = resolveColumnSegments({
|
|
20308
20435
|
metrics: columnMetrics,
|
|
@@ -20310,8 +20437,8 @@ function buildListTableRenderSnapshot(params) {
|
|
|
20310
20437
|
swapAnimation
|
|
20311
20438
|
});
|
|
20312
20439
|
const scrollbarLayout = computeScrollbarLayout({
|
|
20313
|
-
width,
|
|
20314
|
-
height,
|
|
20440
|
+
width: hostWidth,
|
|
20441
|
+
height: hostHeight,
|
|
20315
20442
|
bodyTop: bodyState.bodyLayout.scrollBodyTop,
|
|
20316
20443
|
bodyHeight: bodyState.bodyLayout.scrollBodyHeight,
|
|
20317
20444
|
centerVisibleWidth: columnMetrics.availableCenterWidth,
|
|
@@ -20509,8 +20636,8 @@ function resolveUngroupedDataRowCount(visibleRows) {
|
|
|
20509
20636
|
function updateListTableRenderSnapshotScroll(params) {
|
|
20510
20637
|
const { snapshot, width, height, scroll, options } = params;
|
|
20511
20638
|
const viewportResult = computeViewport({
|
|
20512
|
-
width,
|
|
20513
|
-
height,
|
|
20639
|
+
width: snapshot.width,
|
|
20640
|
+
height: snapshot.height,
|
|
20514
20641
|
headerHeight: snapshot.bodyLayout.scrollBodyTop - snapshot.bodyLayout.topFrozenHeight,
|
|
20515
20642
|
bodyHeight: snapshot.bodyLayout.scrollBodyHeight,
|
|
20516
20643
|
totalWidth: snapshot.columnMetrics.totalWidth,
|
|
@@ -20786,6 +20913,9 @@ function resolveAutoRowHeightMeasureRows(rows, sampleCount = AUTO_ROW_HEIGHT_SAM
|
|
|
20786
20913
|
}
|
|
20787
20914
|
return rows.slice(0, sampleCount);
|
|
20788
20915
|
}
|
|
20916
|
+
function resolveListTableHeaderRowHeight(params) {
|
|
20917
|
+
return params.headerRowHeight ?? (params.rowHeight === "auto" ? DEFAULT_ROW_HEIGHT : params.resolvedRowHeight);
|
|
20918
|
+
}
|
|
20789
20919
|
function buildListTableDebugSnapshot(params) {
|
|
20790
20920
|
const {
|
|
20791
20921
|
snapshot,
|
|
@@ -20946,7 +21076,7 @@ function resolveListTableRenderHostSize(params) {
|
|
|
20946
21076
|
}
|
|
20947
21077
|
|
|
20948
21078
|
// src/rendering/primitives/draw-scrollbars.ts
|
|
20949
|
-
function drawScrollbars(ctx, layout, descriptors, opacity = 1, interactive = true) {
|
|
21079
|
+
function drawScrollbars(ctx, layout, descriptors, borderColor, opacity = 1, interactive = true) {
|
|
20950
21080
|
const alpha = Number.isFinite(opacity) ? Math.min(Math.max(opacity, 0), 1) : 1;
|
|
20951
21081
|
if (alpha <= 1e-3) {
|
|
20952
21082
|
return;
|
|
@@ -20954,14 +21084,28 @@ function drawScrollbars(ctx, layout, descriptors, opacity = 1, interactive = tru
|
|
|
20954
21084
|
ctx.save();
|
|
20955
21085
|
ctx.globalAlpha = alpha;
|
|
20956
21086
|
if (layout.horizontal) {
|
|
20957
|
-
drawAxisScrollbar(
|
|
21087
|
+
drawAxisScrollbar(
|
|
21088
|
+
ctx,
|
|
21089
|
+
layout.horizontal,
|
|
21090
|
+
"horizontal",
|
|
21091
|
+
descriptors,
|
|
21092
|
+
borderColor,
|
|
21093
|
+
interactive
|
|
21094
|
+
);
|
|
20958
21095
|
}
|
|
20959
21096
|
if (layout.vertical) {
|
|
20960
|
-
drawAxisScrollbar(
|
|
21097
|
+
drawAxisScrollbar(
|
|
21098
|
+
ctx,
|
|
21099
|
+
layout.vertical,
|
|
21100
|
+
"vertical",
|
|
21101
|
+
descriptors,
|
|
21102
|
+
borderColor,
|
|
21103
|
+
interactive
|
|
21104
|
+
);
|
|
20961
21105
|
}
|
|
20962
21106
|
ctx.restore();
|
|
20963
21107
|
}
|
|
20964
|
-
function drawAxisScrollbar(ctx, layout, axis, descriptors, interactive) {
|
|
21108
|
+
function drawAxisScrollbar(ctx, layout, axis, descriptors, borderColor, interactive) {
|
|
20965
21109
|
const kind = axis === "horizontal" ? "horizontal-scrollbar" : "vertical-scrollbar";
|
|
20966
21110
|
if (interactive) {
|
|
20967
21111
|
descriptors.push({
|
|
@@ -20989,16 +21133,19 @@ function drawAxisScrollbar(ctx, layout, axis, descriptors, interactive) {
|
|
|
20989
21133
|
scrollbarRole: "increase-button"
|
|
20990
21134
|
});
|
|
20991
21135
|
}
|
|
20992
|
-
drawTrack(ctx, layout.track);
|
|
21136
|
+
drawTrack(ctx, layout.track, borderColor);
|
|
20993
21137
|
drawButton(ctx, layout.decreaseButton, axis, "decrease");
|
|
20994
21138
|
drawButton(ctx, layout.increaseButton, axis, "increase");
|
|
20995
21139
|
drawThumb(ctx, layout.thumb);
|
|
20996
21140
|
}
|
|
20997
|
-
function drawTrack(ctx, rect) {
|
|
21141
|
+
function drawTrack(ctx, rect, borderColor) {
|
|
20998
21142
|
ctx.save();
|
|
20999
21143
|
ctx.fillStyle = "rgba(148, 163, 184, 0.16)";
|
|
21144
|
+
ctx.strokeStyle = borderColor;
|
|
21145
|
+
ctx.lineWidth = 1;
|
|
21000
21146
|
roundRect(ctx, rect.x, rect.y, rect.width, rect.height, rect.height / 2);
|
|
21001
21147
|
ctx.fill();
|
|
21148
|
+
ctx.stroke();
|
|
21002
21149
|
ctx.restore();
|
|
21003
21150
|
}
|
|
21004
21151
|
function drawThumb(ctx, rect) {
|
|
@@ -23837,7 +23984,7 @@ function executeListTableRenderPipeline(params) {
|
|
|
23837
23984
|
renderer.drawEmpty(
|
|
23838
23985
|
width,
|
|
23839
23986
|
bodyAreaHeight,
|
|
23840
|
-
options.emptyText ?? "\
|
|
23987
|
+
options.emptyText ?? "\u6682\u65E0\u6570\u636E",
|
|
23841
23988
|
headerHeight
|
|
23842
23989
|
);
|
|
23843
23990
|
} else {
|
|
@@ -24004,6 +24151,7 @@ function executeListTableRenderPipeline(params) {
|
|
|
24004
24151
|
ctx,
|
|
24005
24152
|
snapshot.scrollbarLayout,
|
|
24006
24153
|
descriptors,
|
|
24154
|
+
theme.borderColor,
|
|
24007
24155
|
scrollbarOpacity,
|
|
24008
24156
|
isScrollbarInteractive
|
|
24009
24157
|
);
|
|
@@ -24354,7 +24502,7 @@ var ListTableRenderController = class {
|
|
|
24354
24502
|
const layoutWidth = hostSize.width / zoom;
|
|
24355
24503
|
const layoutAvailableHeight = availableHeight / zoom;
|
|
24356
24504
|
const currentSnapshot = this.currentRenderSnapshot;
|
|
24357
|
-
const measureSnapshot = currentSnapshot && currentSnapshot.width === layoutWidth && currentSnapshot.groupingBarHeight === (this.options.getGroupBarVisible?.() ?
|
|
24505
|
+
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);
|
|
24358
24506
|
if (!measureSnapshot) {
|
|
24359
24507
|
this.options.setFittedHeight(null);
|
|
24360
24508
|
return;
|
|
@@ -24367,7 +24515,7 @@ var ListTableRenderController = class {
|
|
|
24367
24515
|
topFrozenHeight: measureSnapshot.bodyLayout.topFrozenHeight,
|
|
24368
24516
|
totalBodyHeight: Math.max(
|
|
24369
24517
|
measureSnapshot.bodyLayout.totalBodyHeight,
|
|
24370
|
-
measureSnapshot.displayRows.length === 0 ? measureSnapshot.rowHeight : 0
|
|
24518
|
+
measureSnapshot.displayRows.length === 0 ? Math.max(measureSnapshot.rowHeight, DEFAULT_EMPTY_BODY_HEIGHT) : 0
|
|
24371
24519
|
),
|
|
24372
24520
|
bottomFrozenHeight: measureSnapshot.bodyLayout.bottomFrozenHeight,
|
|
24373
24521
|
summaryHeight: measureSnapshot.bodyLayout.summaryHeight
|
|
@@ -25669,9 +25817,7 @@ function assembleListTableCoreControllers(core, options) {
|
|
|
25669
25817
|
draggingScrollbar: core.draggingScrollbar != null,
|
|
25670
25818
|
continuousScrollActive: core.eventController.isContinuousScrollActive(),
|
|
25671
25819
|
hover: core.storeFacade.hover,
|
|
25672
|
-
scrollbarActiveUntil: core.animationController.getScrollbarActiveUntil()
|
|
25673
|
-
now: Date.now()
|
|
25674
|
-
});
|
|
25820
|
+
scrollbarActiveUntil: core.animationController.getScrollbarActiveUntil()});
|
|
25675
25821
|
const applyRenderResult = (result) => {
|
|
25676
25822
|
applyListTableRenderPassResult({
|
|
25677
25823
|
didRender: result.didRender,
|
|
@@ -25977,6 +26123,7 @@ function assembleListTableCoreControllers(core, options) {
|
|
|
25977
26123
|
}
|
|
25978
26124
|
},
|
|
25979
26125
|
isEditing: () => core.editingController.getSession() != null,
|
|
26126
|
+
resetSummaryValues: () => core.summaryController.reset(),
|
|
25980
26127
|
requestRender: () => render()
|
|
25981
26128
|
});
|
|
25982
26129
|
core.contentActionController = new ListTableContentActionController({
|
|
@@ -26005,6 +26152,7 @@ function assembleListTableCoreControllers(core, options) {
|
|
|
26005
26152
|
domHost: core.domHost,
|
|
26006
26153
|
canvasHost: core.canvasHost,
|
|
26007
26154
|
refreshRuntimeColumns,
|
|
26155
|
+
resetSummaryValues: () => core.summaryController.reset(),
|
|
26008
26156
|
requestRender: () => render()
|
|
26009
26157
|
});
|
|
26010
26158
|
core.carouselController = new ListTableCarouselController({
|
|
@@ -26467,6 +26615,14 @@ var ListTableCore = class {
|
|
|
26467
26615
|
resetFilter() {
|
|
26468
26616
|
this.headerActionController.resetFilters();
|
|
26469
26617
|
}
|
|
26618
|
+
/**
|
|
26619
|
+
* 设置内置表格密度。
|
|
26620
|
+
*/
|
|
26621
|
+
changeDensity(density) {
|
|
26622
|
+
this.headerActionController.changeTableDensity(
|
|
26623
|
+
density === 32 ? "compact" : density === 56 ? "comfortable" : "middle"
|
|
26624
|
+
);
|
|
26625
|
+
}
|
|
26470
26626
|
/**
|
|
26471
26627
|
* 销毁实例。
|
|
26472
26628
|
*/
|
|
@@ -26589,6 +26745,12 @@ var ListTable = class {
|
|
|
26589
26745
|
resetFilter() {
|
|
26590
26746
|
this.core?.resetFilter();
|
|
26591
26747
|
}
|
|
26748
|
+
/**
|
|
26749
|
+
* 设置并持久化内置表格密度。
|
|
26750
|
+
*/
|
|
26751
|
+
changeDensity(density) {
|
|
26752
|
+
this.core?.changeDensity(density);
|
|
26753
|
+
}
|
|
26592
26754
|
/**
|
|
26593
26755
|
* 销毁实例。
|
|
26594
26756
|
*/
|