@canvas-components/list-table 0.2.5 → 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 +216 -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 +216 -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,15 @@ 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 = options.headerRowHeight ??
|
|
20084
|
-
const summaryRowHeight = options.summaryRowHeight ??
|
|
20085
|
-
const groupingBarHeight = params.groupBarVisible ?
|
|
20153
|
+
const headerRowHeight = options.headerRowHeight ?? rowHeight;
|
|
20154
|
+
const summaryRowHeight = options.summaryRowHeight ?? rowHeight;
|
|
20155
|
+
const groupingBarHeight = params.groupBarVisible ? rowHeight : 0;
|
|
20086
20156
|
const columnHeaderHeight = (headerInfo.maxDepth + 1) * headerRowHeight;
|
|
20087
20157
|
const headerHeight = groupingBarHeight + columnHeaderHeight;
|
|
20088
20158
|
const hasConfiguredSummary = leafColumns.some(
|
|
@@ -20288,11 +20358,11 @@ function buildListTableRenderSnapshot(params) {
|
|
|
20288
20358
|
scrollRowCount: plainRowWindow.totalRowCount
|
|
20289
20359
|
});
|
|
20290
20360
|
}
|
|
20291
|
-
|
|
20361
|
+
let columnMetrics = resolveColumnMetrics({
|
|
20292
20362
|
columns: leafColumns,
|
|
20293
20363
|
tableWidth: width
|
|
20294
20364
|
});
|
|
20295
|
-
|
|
20365
|
+
let viewportResult = computeViewport({
|
|
20296
20366
|
width,
|
|
20297
20367
|
height,
|
|
20298
20368
|
headerHeight,
|
|
@@ -20303,6 +20373,59 @@ function buildListTableRenderSnapshot(params) {
|
|
|
20303
20373
|
fixedWidthRight: columnMetrics.fixedWidthRight,
|
|
20304
20374
|
scroll
|
|
20305
20375
|
});
|
|
20376
|
+
for (let index = 0; index < 2 && scrollbarThickness > 0; index += 1) {
|
|
20377
|
+
const nextWidth = Math.max(
|
|
20378
|
+
hostWidth - (viewportResult.viewport.maxScrollTop > 0 ? scrollbarThickness : 0),
|
|
20379
|
+
0
|
|
20380
|
+
);
|
|
20381
|
+
const nextHeight = Math.max(
|
|
20382
|
+
hostHeight - (viewportResult.viewport.maxScrollLeft > 0 ? scrollbarThickness : 0),
|
|
20383
|
+
0
|
|
20384
|
+
);
|
|
20385
|
+
if (nextWidth === width && nextHeight === height) {
|
|
20386
|
+
break;
|
|
20387
|
+
}
|
|
20388
|
+
width = nextWidth;
|
|
20389
|
+
height = nextHeight;
|
|
20390
|
+
bodyState = resolveCurrentBodyState();
|
|
20391
|
+
if (plainRowWindow) {
|
|
20392
|
+
bodyState.frozenRows.scroll.windowed = true;
|
|
20393
|
+
bodyState.frozenRows.scroll.rowIndexMap = plainRowWindow.rowIndexMap;
|
|
20394
|
+
bodyState.frozenRows.scroll.rowOffsetMap = plainRowWindow.rowOffsetMap;
|
|
20395
|
+
bodyState.bodyLayout = resolveBodyLayout({
|
|
20396
|
+
height,
|
|
20397
|
+
headerHeight,
|
|
20398
|
+
summaryRowHeight,
|
|
20399
|
+
hasSummary,
|
|
20400
|
+
rowHeight,
|
|
20401
|
+
totalBodyHeight: plainRowWindow.totalBodyHeight,
|
|
20402
|
+
topFrozenRowCount: 0,
|
|
20403
|
+
bottomFrozenRowCount: 0,
|
|
20404
|
+
scrollRowCount: plainRowWindow.totalRowCount
|
|
20405
|
+
});
|
|
20406
|
+
}
|
|
20407
|
+
columnMetrics = resolveColumnMetrics({
|
|
20408
|
+
columns: leafColumns,
|
|
20409
|
+
tableWidth: width
|
|
20410
|
+
});
|
|
20411
|
+
viewportResult = computeViewport({
|
|
20412
|
+
width,
|
|
20413
|
+
height,
|
|
20414
|
+
headerHeight,
|
|
20415
|
+
bodyHeight: bodyState.bodyLayout.scrollBodyHeight,
|
|
20416
|
+
totalWidth: columnMetrics.totalWidth,
|
|
20417
|
+
totalBodyHeight: bodyState.bodyLayout.totalBodyHeight,
|
|
20418
|
+
fixedWidthLeft: columnMetrics.fixedWidthLeft,
|
|
20419
|
+
fixedWidthRight: columnMetrics.fixedWidthRight,
|
|
20420
|
+
scroll
|
|
20421
|
+
});
|
|
20422
|
+
}
|
|
20423
|
+
scrollPageSize = resolveScrollPageSize({
|
|
20424
|
+
options,
|
|
20425
|
+
pageSize: query.pagination.pageSize,
|
|
20426
|
+
bodyHeight: bodyState.bodyLayout.scrollBodyHeight,
|
|
20427
|
+
rowHeight
|
|
20428
|
+
});
|
|
20306
20429
|
const nextScroll = viewportResult.scroll;
|
|
20307
20430
|
const columnSegments = resolveColumnSegments({
|
|
20308
20431
|
metrics: columnMetrics,
|
|
@@ -20310,8 +20433,8 @@ function buildListTableRenderSnapshot(params) {
|
|
|
20310
20433
|
swapAnimation
|
|
20311
20434
|
});
|
|
20312
20435
|
const scrollbarLayout = computeScrollbarLayout({
|
|
20313
|
-
width,
|
|
20314
|
-
height,
|
|
20436
|
+
width: hostWidth,
|
|
20437
|
+
height: hostHeight,
|
|
20315
20438
|
bodyTop: bodyState.bodyLayout.scrollBodyTop,
|
|
20316
20439
|
bodyHeight: bodyState.bodyLayout.scrollBodyHeight,
|
|
20317
20440
|
centerVisibleWidth: columnMetrics.availableCenterWidth,
|
|
@@ -20509,8 +20632,8 @@ function resolveUngroupedDataRowCount(visibleRows) {
|
|
|
20509
20632
|
function updateListTableRenderSnapshotScroll(params) {
|
|
20510
20633
|
const { snapshot, width, height, scroll, options } = params;
|
|
20511
20634
|
const viewportResult = computeViewport({
|
|
20512
|
-
width,
|
|
20513
|
-
height,
|
|
20635
|
+
width: snapshot.width,
|
|
20636
|
+
height: snapshot.height,
|
|
20514
20637
|
headerHeight: snapshot.bodyLayout.scrollBodyTop - snapshot.bodyLayout.topFrozenHeight,
|
|
20515
20638
|
bodyHeight: snapshot.bodyLayout.scrollBodyHeight,
|
|
20516
20639
|
totalWidth: snapshot.columnMetrics.totalWidth,
|
|
@@ -20946,7 +21069,7 @@ function resolveListTableRenderHostSize(params) {
|
|
|
20946
21069
|
}
|
|
20947
21070
|
|
|
20948
21071
|
// src/rendering/primitives/draw-scrollbars.ts
|
|
20949
|
-
function drawScrollbars(ctx, layout, descriptors, opacity = 1, interactive = true) {
|
|
21072
|
+
function drawScrollbars(ctx, layout, descriptors, borderColor, opacity = 1, interactive = true) {
|
|
20950
21073
|
const alpha = Number.isFinite(opacity) ? Math.min(Math.max(opacity, 0), 1) : 1;
|
|
20951
21074
|
if (alpha <= 1e-3) {
|
|
20952
21075
|
return;
|
|
@@ -20954,14 +21077,28 @@ function drawScrollbars(ctx, layout, descriptors, opacity = 1, interactive = tru
|
|
|
20954
21077
|
ctx.save();
|
|
20955
21078
|
ctx.globalAlpha = alpha;
|
|
20956
21079
|
if (layout.horizontal) {
|
|
20957
|
-
drawAxisScrollbar(
|
|
21080
|
+
drawAxisScrollbar(
|
|
21081
|
+
ctx,
|
|
21082
|
+
layout.horizontal,
|
|
21083
|
+
"horizontal",
|
|
21084
|
+
descriptors,
|
|
21085
|
+
borderColor,
|
|
21086
|
+
interactive
|
|
21087
|
+
);
|
|
20958
21088
|
}
|
|
20959
21089
|
if (layout.vertical) {
|
|
20960
|
-
drawAxisScrollbar(
|
|
21090
|
+
drawAxisScrollbar(
|
|
21091
|
+
ctx,
|
|
21092
|
+
layout.vertical,
|
|
21093
|
+
"vertical",
|
|
21094
|
+
descriptors,
|
|
21095
|
+
borderColor,
|
|
21096
|
+
interactive
|
|
21097
|
+
);
|
|
20961
21098
|
}
|
|
20962
21099
|
ctx.restore();
|
|
20963
21100
|
}
|
|
20964
|
-
function drawAxisScrollbar(ctx, layout, axis, descriptors, interactive) {
|
|
21101
|
+
function drawAxisScrollbar(ctx, layout, axis, descriptors, borderColor, interactive) {
|
|
20965
21102
|
const kind = axis === "horizontal" ? "horizontal-scrollbar" : "vertical-scrollbar";
|
|
20966
21103
|
if (interactive) {
|
|
20967
21104
|
descriptors.push({
|
|
@@ -20989,16 +21126,19 @@ function drawAxisScrollbar(ctx, layout, axis, descriptors, interactive) {
|
|
|
20989
21126
|
scrollbarRole: "increase-button"
|
|
20990
21127
|
});
|
|
20991
21128
|
}
|
|
20992
|
-
drawTrack(ctx, layout.track);
|
|
21129
|
+
drawTrack(ctx, layout.track, borderColor);
|
|
20993
21130
|
drawButton(ctx, layout.decreaseButton, axis, "decrease");
|
|
20994
21131
|
drawButton(ctx, layout.increaseButton, axis, "increase");
|
|
20995
21132
|
drawThumb(ctx, layout.thumb);
|
|
20996
21133
|
}
|
|
20997
|
-
function drawTrack(ctx, rect) {
|
|
21134
|
+
function drawTrack(ctx, rect, borderColor) {
|
|
20998
21135
|
ctx.save();
|
|
20999
21136
|
ctx.fillStyle = "rgba(148, 163, 184, 0.16)";
|
|
21137
|
+
ctx.strokeStyle = borderColor;
|
|
21138
|
+
ctx.lineWidth = 1;
|
|
21000
21139
|
roundRect(ctx, rect.x, rect.y, rect.width, rect.height, rect.height / 2);
|
|
21001
21140
|
ctx.fill();
|
|
21141
|
+
ctx.stroke();
|
|
21002
21142
|
ctx.restore();
|
|
21003
21143
|
}
|
|
21004
21144
|
function drawThumb(ctx, rect) {
|
|
@@ -23837,7 +23977,7 @@ function executeListTableRenderPipeline(params) {
|
|
|
23837
23977
|
renderer.drawEmpty(
|
|
23838
23978
|
width,
|
|
23839
23979
|
bodyAreaHeight,
|
|
23840
|
-
options.emptyText ?? "\
|
|
23980
|
+
options.emptyText ?? "\u6682\u65E0\u6570\u636E",
|
|
23841
23981
|
headerHeight
|
|
23842
23982
|
);
|
|
23843
23983
|
} else {
|
|
@@ -24004,6 +24144,7 @@ function executeListTableRenderPipeline(params) {
|
|
|
24004
24144
|
ctx,
|
|
24005
24145
|
snapshot.scrollbarLayout,
|
|
24006
24146
|
descriptors,
|
|
24147
|
+
theme.borderColor,
|
|
24007
24148
|
scrollbarOpacity,
|
|
24008
24149
|
isScrollbarInteractive
|
|
24009
24150
|
);
|
|
@@ -24354,7 +24495,7 @@ var ListTableRenderController = class {
|
|
|
24354
24495
|
const layoutWidth = hostSize.width / zoom;
|
|
24355
24496
|
const layoutAvailableHeight = availableHeight / zoom;
|
|
24356
24497
|
const currentSnapshot = this.currentRenderSnapshot;
|
|
24357
|
-
const measureSnapshot = currentSnapshot && currentSnapshot.width === layoutWidth && currentSnapshot.groupingBarHeight === (this.options.getGroupBarVisible?.() ?
|
|
24498
|
+
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
24499
|
if (!measureSnapshot) {
|
|
24359
24500
|
this.options.setFittedHeight(null);
|
|
24360
24501
|
return;
|
|
@@ -24367,7 +24508,7 @@ var ListTableRenderController = class {
|
|
|
24367
24508
|
topFrozenHeight: measureSnapshot.bodyLayout.topFrozenHeight,
|
|
24368
24509
|
totalBodyHeight: Math.max(
|
|
24369
24510
|
measureSnapshot.bodyLayout.totalBodyHeight,
|
|
24370
|
-
measureSnapshot.displayRows.length === 0 ? measureSnapshot.rowHeight : 0
|
|
24511
|
+
measureSnapshot.displayRows.length === 0 ? Math.max(measureSnapshot.rowHeight, DEFAULT_EMPTY_BODY_HEIGHT) : 0
|
|
24371
24512
|
),
|
|
24372
24513
|
bottomFrozenHeight: measureSnapshot.bodyLayout.bottomFrozenHeight,
|
|
24373
24514
|
summaryHeight: measureSnapshot.bodyLayout.summaryHeight
|
|
@@ -25669,9 +25810,7 @@ function assembleListTableCoreControllers(core, options) {
|
|
|
25669
25810
|
draggingScrollbar: core.draggingScrollbar != null,
|
|
25670
25811
|
continuousScrollActive: core.eventController.isContinuousScrollActive(),
|
|
25671
25812
|
hover: core.storeFacade.hover,
|
|
25672
|
-
scrollbarActiveUntil: core.animationController.getScrollbarActiveUntil()
|
|
25673
|
-
now: Date.now()
|
|
25674
|
-
});
|
|
25813
|
+
scrollbarActiveUntil: core.animationController.getScrollbarActiveUntil()});
|
|
25675
25814
|
const applyRenderResult = (result) => {
|
|
25676
25815
|
applyListTableRenderPassResult({
|
|
25677
25816
|
didRender: result.didRender,
|
|
@@ -25977,6 +26116,7 @@ function assembleListTableCoreControllers(core, options) {
|
|
|
25977
26116
|
}
|
|
25978
26117
|
},
|
|
25979
26118
|
isEditing: () => core.editingController.getSession() != null,
|
|
26119
|
+
resetSummaryValues: () => core.summaryController.reset(),
|
|
25980
26120
|
requestRender: () => render()
|
|
25981
26121
|
});
|
|
25982
26122
|
core.contentActionController = new ListTableContentActionController({
|
|
@@ -26005,6 +26145,7 @@ function assembleListTableCoreControllers(core, options) {
|
|
|
26005
26145
|
domHost: core.domHost,
|
|
26006
26146
|
canvasHost: core.canvasHost,
|
|
26007
26147
|
refreshRuntimeColumns,
|
|
26148
|
+
resetSummaryValues: () => core.summaryController.reset(),
|
|
26008
26149
|
requestRender: () => render()
|
|
26009
26150
|
});
|
|
26010
26151
|
core.carouselController = new ListTableCarouselController({
|
|
@@ -26467,6 +26608,14 @@ var ListTableCore = class {
|
|
|
26467
26608
|
resetFilter() {
|
|
26468
26609
|
this.headerActionController.resetFilters();
|
|
26469
26610
|
}
|
|
26611
|
+
/**
|
|
26612
|
+
* 设置内置表格密度。
|
|
26613
|
+
*/
|
|
26614
|
+
changeDensity(density) {
|
|
26615
|
+
this.headerActionController.changeTableDensity(
|
|
26616
|
+
density === 32 ? "compact" : density === 56 ? "comfortable" : "middle"
|
|
26617
|
+
);
|
|
26618
|
+
}
|
|
26470
26619
|
/**
|
|
26471
26620
|
* 销毁实例。
|
|
26472
26621
|
*/
|
|
@@ -26589,6 +26738,12 @@ var ListTable = class {
|
|
|
26589
26738
|
resetFilter() {
|
|
26590
26739
|
this.core?.resetFilter();
|
|
26591
26740
|
}
|
|
26741
|
+
/**
|
|
26742
|
+
* 设置并持久化内置表格密度。
|
|
26743
|
+
*/
|
|
26744
|
+
changeDensity(density) {
|
|
26745
|
+
this.core?.changeDensity(density);
|
|
26746
|
+
}
|
|
26592
26747
|
/**
|
|
26593
26748
|
* 销毁实例。
|
|
26594
26749
|
*/
|