@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/dist/index.js
CHANGED
|
@@ -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',
|
|
@@ -8011,15 +8062,11 @@ function resolvePointerHitWithScrollbars(result, x, y, scrollbarLayout) {
|
|
|
8011
8062
|
return result;
|
|
8012
8063
|
}
|
|
8013
8064
|
function resolveScrollbarVisibility(params) {
|
|
8014
|
-
const
|
|
8015
|
-
|
|
8016
|
-
if (scrollbarOption?.visible === true) {
|
|
8065
|
+
const scrollbarOption = params.options.scrollbar;
|
|
8066
|
+
if (scrollbarOption?.visible !== false) {
|
|
8017
8067
|
return true;
|
|
8018
8068
|
}
|
|
8019
|
-
|
|
8020
|
-
return false;
|
|
8021
|
-
}
|
|
8022
|
-
return draggingScrollbar || continuousScrollActive || hover.area === "horizontal-scrollbar" || hover.area === "vertical-scrollbar" || hover.area !== "empty" || now2 < scrollbarActiveUntil;
|
|
8069
|
+
return false;
|
|
8023
8070
|
}
|
|
8024
8071
|
|
|
8025
8072
|
// src/services/pointer-hit-service.ts
|
|
@@ -13635,13 +13682,13 @@ function showHeaderContextMenu(params) {
|
|
|
13635
13682
|
return true;
|
|
13636
13683
|
}
|
|
13637
13684
|
function resolveContextMenuDensity(rowHeight) {
|
|
13638
|
-
if (rowHeight ===
|
|
13685
|
+
if (rowHeight === 56) {
|
|
13639
13686
|
return "comfortable";
|
|
13640
13687
|
}
|
|
13641
13688
|
if (rowHeight === 32) {
|
|
13642
13689
|
return "compact";
|
|
13643
13690
|
}
|
|
13644
|
-
return "middle";
|
|
13691
|
+
return rowHeight === 48 ? "middle" : "compact";
|
|
13645
13692
|
}
|
|
13646
13693
|
|
|
13647
13694
|
// src/features/tooltip/tooltip-feature.ts
|
|
@@ -15211,7 +15258,7 @@ var ListTableEventController = class {
|
|
|
15211
15258
|
headerTree: this.host.headerTree,
|
|
15212
15259
|
headerRowsCache: this.host.headerRowsCache,
|
|
15213
15260
|
pointerX: position.x,
|
|
15214
|
-
headerRowHeight: DEFAULT_HEADER_ROW_HEIGHT,
|
|
15261
|
+
headerRowHeight: this.host.currentRenderSnapshot?.headerRowHeight ?? DEFAULT_HEADER_ROW_HEIGHT,
|
|
15215
15262
|
allowGrouping: this.host.groupBarVisible,
|
|
15216
15263
|
getMovableLeafColumns: (node, hitRect) => getHeaderNodeMovableLeafColumns({
|
|
15217
15264
|
node,
|
|
@@ -15548,7 +15595,7 @@ var ListTableEventController = class {
|
|
|
15548
15595
|
},
|
|
15549
15596
|
summaryVisible: Boolean(this.host.currentRenderSnapshot?.hasSummary),
|
|
15550
15597
|
onToggleSummary: () => {
|
|
15551
|
-
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;
|
|
15552
15599
|
this.host.persistColumnConfig();
|
|
15553
15600
|
this.host.render();
|
|
15554
15601
|
},
|
|
@@ -17413,9 +17460,9 @@ function resolveToggleHeaderColumnVisibilityAction(params) {
|
|
|
17413
17460
|
function resolveDensitySizes(density) {
|
|
17414
17461
|
if (density === "comfortable") {
|
|
17415
17462
|
return {
|
|
17416
|
-
rowHeight:
|
|
17417
|
-
headerRowHeight:
|
|
17418
|
-
summaryRowHeight:
|
|
17463
|
+
rowHeight: 56,
|
|
17464
|
+
headerRowHeight: 56,
|
|
17465
|
+
summaryRowHeight: 56
|
|
17419
17466
|
};
|
|
17420
17467
|
}
|
|
17421
17468
|
if (density === "compact") {
|
|
@@ -17426,9 +17473,9 @@ function resolveDensitySizes(density) {
|
|
|
17426
17473
|
};
|
|
17427
17474
|
}
|
|
17428
17475
|
return {
|
|
17429
|
-
rowHeight:
|
|
17430
|
-
headerRowHeight:
|
|
17431
|
-
summaryRowHeight:
|
|
17476
|
+
rowHeight: 48,
|
|
17477
|
+
headerRowHeight: 48,
|
|
17478
|
+
summaryRowHeight: 48
|
|
17432
17479
|
};
|
|
17433
17480
|
}
|
|
17434
17481
|
|
|
@@ -17579,6 +17626,9 @@ var ListTableHeaderActionController = class {
|
|
|
17579
17626
|
headerRowHeight: nextSize.headerRowHeight,
|
|
17580
17627
|
summaryRowHeight: nextSize.summaryRowHeight
|
|
17581
17628
|
});
|
|
17629
|
+
this.options.resetSummaryValues();
|
|
17630
|
+
options.ui?.onDensityChange?.(nextSize.rowHeight);
|
|
17631
|
+
this.options.persistColumnConfig();
|
|
17582
17632
|
this.options.hideHeaderContextMenu();
|
|
17583
17633
|
this.options.requestRender();
|
|
17584
17634
|
}
|
|
@@ -18048,7 +18098,7 @@ function applyStoredColumnConfig(columns, storedColumns) {
|
|
|
18048
18098
|
};
|
|
18049
18099
|
applyToColumns(columns);
|
|
18050
18100
|
}
|
|
18051
|
-
function buildStoredColumnConfig(columns, sortState, filterState, zoom, summaryRowHeight) {
|
|
18101
|
+
function buildStoredColumnConfig(columns, sortState, filterState, zoom, summaryRowHeight, density) {
|
|
18052
18102
|
const result = {};
|
|
18053
18103
|
const collectColumns = (cols) => {
|
|
18054
18104
|
for (const col of cols) {
|
|
@@ -18083,7 +18133,8 @@ function buildStoredColumnConfig(columns, sortState, filterState, zoom, summaryR
|
|
|
18083
18133
|
},
|
|
18084
18134
|
filters: filterState,
|
|
18085
18135
|
...typeof zoom === "number" && Number.isFinite(zoom) && zoom > 0 ? { zoom } : null,
|
|
18086
|
-
...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
|
|
18087
18138
|
};
|
|
18088
18139
|
}
|
|
18089
18140
|
|
|
@@ -18095,7 +18146,8 @@ function persistListTableColumnConfig(params) {
|
|
|
18095
18146
|
sortState,
|
|
18096
18147
|
filterState,
|
|
18097
18148
|
zoom,
|
|
18098
|
-
summaryRowHeight
|
|
18149
|
+
summaryRowHeight,
|
|
18150
|
+
density
|
|
18099
18151
|
} = params;
|
|
18100
18152
|
if (!storageKey) {
|
|
18101
18153
|
return;
|
|
@@ -18108,7 +18160,8 @@ function persistListTableColumnConfig(params) {
|
|
|
18108
18160
|
sortState,
|
|
18109
18161
|
filterState,
|
|
18110
18162
|
zoom,
|
|
18111
|
-
summaryRowHeight
|
|
18163
|
+
summaryRowHeight,
|
|
18164
|
+
density
|
|
18112
18165
|
)
|
|
18113
18166
|
);
|
|
18114
18167
|
}
|
|
@@ -18130,7 +18183,8 @@ async function loadListTableStoredConfig(params) {
|
|
|
18130
18183
|
} : null,
|
|
18131
18184
|
filterState: stored.filters ? stored.filters : null,
|
|
18132
18185
|
zoom: typeof stored.zoom === "number" && Number.isFinite(stored.zoom) && stored.zoom > 0 ? stored.zoom : null,
|
|
18133
|
-
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
|
|
18134
18188
|
};
|
|
18135
18189
|
}
|
|
18136
18190
|
|
|
@@ -18161,13 +18215,26 @@ var ListTablePersistenceController = class {
|
|
|
18161
18215
|
this.options.domHost.setContentZoom(nextZoom);
|
|
18162
18216
|
this.options.canvasHost.setContentZoom(nextZoom);
|
|
18163
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
|
+
}
|
|
18164
18227
|
if (stored.summaryRowHeight != null) {
|
|
18165
|
-
|
|
18166
|
-
|
|
18167
|
-
|
|
18168
|
-
|
|
18169
|
-
|
|
18170
|
-
|
|
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);
|
|
18171
18238
|
}
|
|
18172
18239
|
}
|
|
18173
18240
|
this.options.refreshRuntimeColumns();
|
|
@@ -18181,7 +18248,8 @@ var ListTablePersistenceController = class {
|
|
|
18181
18248
|
sortState: this.options.getSortState(),
|
|
18182
18249
|
filterState: this.options.getFilterState(),
|
|
18183
18250
|
zoom: this.options.getTableZoom(),
|
|
18184
|
-
summaryRowHeight: tableOptions.summaryRowHeight
|
|
18251
|
+
summaryRowHeight: tableOptions.summaryRowHeight,
|
|
18252
|
+
density: tableOptions.rowHeight
|
|
18185
18253
|
});
|
|
18186
18254
|
}
|
|
18187
18255
|
};
|
|
@@ -18541,7 +18609,7 @@ function computeScrollbarLayout(params) {
|
|
|
18541
18609
|
};
|
|
18542
18610
|
}
|
|
18543
18611
|
const verticalTrackHeight = Math.max(
|
|
18544
|
-
params.bodyHeight - verticalTop - verticalBottom
|
|
18612
|
+
params.bodyHeight - verticalTop - verticalBottom,
|
|
18545
18613
|
0
|
|
18546
18614
|
);
|
|
18547
18615
|
const verticalTrackX = params.width - thickness - verticalRight;
|
|
@@ -19995,7 +20063,6 @@ function resolveExpandedRowHeight2(height, record, index) {
|
|
|
19995
20063
|
|
|
19996
20064
|
// src/services/layout-service.ts
|
|
19997
20065
|
var AUTO_ROW_HEIGHT_SAMPLE_COUNT = 200;
|
|
19998
|
-
var LIST_TABLE_GROUPING_BAR_HEIGHT = 44;
|
|
19999
20066
|
function buildListTableRenderSnapshot(params) {
|
|
20000
20067
|
if (params.cache?.snapshot && params.cache.snapshot.groupIndex === params.cache.groupIndex && isSameRenderCacheInputs(params.cache.inputs, params)) {
|
|
20001
20068
|
const snapshotStartedAt2 = resolvePerformanceNow2();
|
|
@@ -20022,8 +20089,8 @@ function buildListTableRenderSnapshot(params) {
|
|
|
20022
20089
|
const {
|
|
20023
20090
|
options,
|
|
20024
20091
|
theme,
|
|
20025
|
-
width,
|
|
20026
|
-
height,
|
|
20092
|
+
width: hostWidth,
|
|
20093
|
+
height: hostHeight,
|
|
20027
20094
|
scroll,
|
|
20028
20095
|
selectedRowKeys,
|
|
20029
20096
|
query,
|
|
@@ -20034,6 +20101,9 @@ function buildListTableRenderSnapshot(params) {
|
|
|
20034
20101
|
baseRowsOverride,
|
|
20035
20102
|
displayRowsOverride
|
|
20036
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;
|
|
20037
20107
|
const sourceNormalizedColumns = normalizeColumns(
|
|
20038
20108
|
getResolvedColumns(options, selectedRowKeys)
|
|
20039
20109
|
);
|
|
@@ -20072,15 +20142,19 @@ function buildListTableRenderSnapshot(params) {
|
|
|
20072
20142
|
const expandableState = resolveExpandableState({
|
|
20073
20143
|
expandable: options.expandable
|
|
20074
20144
|
});
|
|
20075
|
-
const rowHeight = options.rowHeight
|
|
20145
|
+
const rowHeight = options.rowHeight === "auto" ? resolveAutoRowHeight({
|
|
20076
20146
|
rows: queryRows.displayRows,
|
|
20077
20147
|
leafColumns,
|
|
20078
20148
|
theme,
|
|
20079
20149
|
cache: params.cache
|
|
20080
20150
|
}) : options.rowHeight ?? DEFAULT_ROW_HEIGHT;
|
|
20081
|
-
const headerRowHeight =
|
|
20082
|
-
|
|
20083
|
-
|
|
20151
|
+
const headerRowHeight = resolveListTableHeaderRowHeight({
|
|
20152
|
+
rowHeight: options.rowHeight,
|
|
20153
|
+
resolvedRowHeight: rowHeight,
|
|
20154
|
+
headerRowHeight: options.headerRowHeight
|
|
20155
|
+
});
|
|
20156
|
+
const summaryRowHeight = options.summaryRowHeight ?? rowHeight;
|
|
20157
|
+
const groupingBarHeight = params.groupBarVisible ? rowHeight : 0;
|
|
20084
20158
|
const columnHeaderHeight = (headerInfo.maxDepth + 1) * headerRowHeight;
|
|
20085
20159
|
const headerHeight = groupingBarHeight + columnHeaderHeight;
|
|
20086
20160
|
const hasConfiguredSummary = leafColumns.some(
|
|
@@ -20286,11 +20360,11 @@ function buildListTableRenderSnapshot(params) {
|
|
|
20286
20360
|
scrollRowCount: plainRowWindow.totalRowCount
|
|
20287
20361
|
});
|
|
20288
20362
|
}
|
|
20289
|
-
|
|
20363
|
+
let columnMetrics = resolveColumnMetrics({
|
|
20290
20364
|
columns: leafColumns,
|
|
20291
20365
|
tableWidth: width
|
|
20292
20366
|
});
|
|
20293
|
-
|
|
20367
|
+
let viewportResult = computeViewport({
|
|
20294
20368
|
width,
|
|
20295
20369
|
height,
|
|
20296
20370
|
headerHeight,
|
|
@@ -20301,6 +20375,59 @@ function buildListTableRenderSnapshot(params) {
|
|
|
20301
20375
|
fixedWidthRight: columnMetrics.fixedWidthRight,
|
|
20302
20376
|
scroll
|
|
20303
20377
|
});
|
|
20378
|
+
for (let index = 0; index < 2 && scrollbarThickness > 0; index += 1) {
|
|
20379
|
+
const nextWidth = Math.max(
|
|
20380
|
+
hostWidth - (viewportResult.viewport.maxScrollTop > 0 ? scrollbarThickness : 0),
|
|
20381
|
+
0
|
|
20382
|
+
);
|
|
20383
|
+
const nextHeight = Math.max(
|
|
20384
|
+
hostHeight - (viewportResult.viewport.maxScrollLeft > 0 ? scrollbarThickness : 0),
|
|
20385
|
+
0
|
|
20386
|
+
);
|
|
20387
|
+
if (nextWidth === width && nextHeight === height) {
|
|
20388
|
+
break;
|
|
20389
|
+
}
|
|
20390
|
+
width = nextWidth;
|
|
20391
|
+
height = nextHeight;
|
|
20392
|
+
bodyState = resolveCurrentBodyState();
|
|
20393
|
+
if (plainRowWindow) {
|
|
20394
|
+
bodyState.frozenRows.scroll.windowed = true;
|
|
20395
|
+
bodyState.frozenRows.scroll.rowIndexMap = plainRowWindow.rowIndexMap;
|
|
20396
|
+
bodyState.frozenRows.scroll.rowOffsetMap = plainRowWindow.rowOffsetMap;
|
|
20397
|
+
bodyState.bodyLayout = resolveBodyLayout({
|
|
20398
|
+
height,
|
|
20399
|
+
headerHeight,
|
|
20400
|
+
summaryRowHeight,
|
|
20401
|
+
hasSummary,
|
|
20402
|
+
rowHeight,
|
|
20403
|
+
totalBodyHeight: plainRowWindow.totalBodyHeight,
|
|
20404
|
+
topFrozenRowCount: 0,
|
|
20405
|
+
bottomFrozenRowCount: 0,
|
|
20406
|
+
scrollRowCount: plainRowWindow.totalRowCount
|
|
20407
|
+
});
|
|
20408
|
+
}
|
|
20409
|
+
columnMetrics = resolveColumnMetrics({
|
|
20410
|
+
columns: leafColumns,
|
|
20411
|
+
tableWidth: width
|
|
20412
|
+
});
|
|
20413
|
+
viewportResult = computeViewport({
|
|
20414
|
+
width,
|
|
20415
|
+
height,
|
|
20416
|
+
headerHeight,
|
|
20417
|
+
bodyHeight: bodyState.bodyLayout.scrollBodyHeight,
|
|
20418
|
+
totalWidth: columnMetrics.totalWidth,
|
|
20419
|
+
totalBodyHeight: bodyState.bodyLayout.totalBodyHeight,
|
|
20420
|
+
fixedWidthLeft: columnMetrics.fixedWidthLeft,
|
|
20421
|
+
fixedWidthRight: columnMetrics.fixedWidthRight,
|
|
20422
|
+
scroll
|
|
20423
|
+
});
|
|
20424
|
+
}
|
|
20425
|
+
scrollPageSize = resolveScrollPageSize({
|
|
20426
|
+
options,
|
|
20427
|
+
pageSize: query.pagination.pageSize,
|
|
20428
|
+
bodyHeight: bodyState.bodyLayout.scrollBodyHeight,
|
|
20429
|
+
rowHeight
|
|
20430
|
+
});
|
|
20304
20431
|
const nextScroll = viewportResult.scroll;
|
|
20305
20432
|
const columnSegments = resolveColumnSegments({
|
|
20306
20433
|
metrics: columnMetrics,
|
|
@@ -20308,8 +20435,8 @@ function buildListTableRenderSnapshot(params) {
|
|
|
20308
20435
|
swapAnimation
|
|
20309
20436
|
});
|
|
20310
20437
|
const scrollbarLayout = computeScrollbarLayout({
|
|
20311
|
-
width,
|
|
20312
|
-
height,
|
|
20438
|
+
width: hostWidth,
|
|
20439
|
+
height: hostHeight,
|
|
20313
20440
|
bodyTop: bodyState.bodyLayout.scrollBodyTop,
|
|
20314
20441
|
bodyHeight: bodyState.bodyLayout.scrollBodyHeight,
|
|
20315
20442
|
centerVisibleWidth: columnMetrics.availableCenterWidth,
|
|
@@ -20507,8 +20634,8 @@ function resolveUngroupedDataRowCount(visibleRows) {
|
|
|
20507
20634
|
function updateListTableRenderSnapshotScroll(params) {
|
|
20508
20635
|
const { snapshot, width, height, scroll, options } = params;
|
|
20509
20636
|
const viewportResult = computeViewport({
|
|
20510
|
-
width,
|
|
20511
|
-
height,
|
|
20637
|
+
width: snapshot.width,
|
|
20638
|
+
height: snapshot.height,
|
|
20512
20639
|
headerHeight: snapshot.bodyLayout.scrollBodyTop - snapshot.bodyLayout.topFrozenHeight,
|
|
20513
20640
|
bodyHeight: snapshot.bodyLayout.scrollBodyHeight,
|
|
20514
20641
|
totalWidth: snapshot.columnMetrics.totalWidth,
|
|
@@ -20784,6 +20911,9 @@ function resolveAutoRowHeightMeasureRows(rows, sampleCount = AUTO_ROW_HEIGHT_SAM
|
|
|
20784
20911
|
}
|
|
20785
20912
|
return rows.slice(0, sampleCount);
|
|
20786
20913
|
}
|
|
20914
|
+
function resolveListTableHeaderRowHeight(params) {
|
|
20915
|
+
return params.headerRowHeight ?? (params.rowHeight === "auto" ? DEFAULT_ROW_HEIGHT : params.resolvedRowHeight);
|
|
20916
|
+
}
|
|
20787
20917
|
function buildListTableDebugSnapshot(params) {
|
|
20788
20918
|
const {
|
|
20789
20919
|
snapshot,
|
|
@@ -20944,7 +21074,7 @@ function resolveListTableRenderHostSize(params) {
|
|
|
20944
21074
|
}
|
|
20945
21075
|
|
|
20946
21076
|
// src/rendering/primitives/draw-scrollbars.ts
|
|
20947
|
-
function drawScrollbars(ctx, layout, descriptors, opacity = 1, interactive = true) {
|
|
21077
|
+
function drawScrollbars(ctx, layout, descriptors, borderColor, opacity = 1, interactive = true) {
|
|
20948
21078
|
const alpha = Number.isFinite(opacity) ? Math.min(Math.max(opacity, 0), 1) : 1;
|
|
20949
21079
|
if (alpha <= 1e-3) {
|
|
20950
21080
|
return;
|
|
@@ -20952,14 +21082,28 @@ function drawScrollbars(ctx, layout, descriptors, opacity = 1, interactive = tru
|
|
|
20952
21082
|
ctx.save();
|
|
20953
21083
|
ctx.globalAlpha = alpha;
|
|
20954
21084
|
if (layout.horizontal) {
|
|
20955
|
-
drawAxisScrollbar(
|
|
21085
|
+
drawAxisScrollbar(
|
|
21086
|
+
ctx,
|
|
21087
|
+
layout.horizontal,
|
|
21088
|
+
"horizontal",
|
|
21089
|
+
descriptors,
|
|
21090
|
+
borderColor,
|
|
21091
|
+
interactive
|
|
21092
|
+
);
|
|
20956
21093
|
}
|
|
20957
21094
|
if (layout.vertical) {
|
|
20958
|
-
drawAxisScrollbar(
|
|
21095
|
+
drawAxisScrollbar(
|
|
21096
|
+
ctx,
|
|
21097
|
+
layout.vertical,
|
|
21098
|
+
"vertical",
|
|
21099
|
+
descriptors,
|
|
21100
|
+
borderColor,
|
|
21101
|
+
interactive
|
|
21102
|
+
);
|
|
20959
21103
|
}
|
|
20960
21104
|
ctx.restore();
|
|
20961
21105
|
}
|
|
20962
|
-
function drawAxisScrollbar(ctx, layout, axis, descriptors, interactive) {
|
|
21106
|
+
function drawAxisScrollbar(ctx, layout, axis, descriptors, borderColor, interactive) {
|
|
20963
21107
|
const kind = axis === "horizontal" ? "horizontal-scrollbar" : "vertical-scrollbar";
|
|
20964
21108
|
if (interactive) {
|
|
20965
21109
|
descriptors.push({
|
|
@@ -20987,16 +21131,19 @@ function drawAxisScrollbar(ctx, layout, axis, descriptors, interactive) {
|
|
|
20987
21131
|
scrollbarRole: "increase-button"
|
|
20988
21132
|
});
|
|
20989
21133
|
}
|
|
20990
|
-
drawTrack(ctx, layout.track);
|
|
21134
|
+
drawTrack(ctx, layout.track, borderColor);
|
|
20991
21135
|
drawButton(ctx, layout.decreaseButton, axis, "decrease");
|
|
20992
21136
|
drawButton(ctx, layout.increaseButton, axis, "increase");
|
|
20993
21137
|
drawThumb(ctx, layout.thumb);
|
|
20994
21138
|
}
|
|
20995
|
-
function drawTrack(ctx, rect) {
|
|
21139
|
+
function drawTrack(ctx, rect, borderColor) {
|
|
20996
21140
|
ctx.save();
|
|
20997
21141
|
ctx.fillStyle = "rgba(148, 163, 184, 0.16)";
|
|
21142
|
+
ctx.strokeStyle = borderColor;
|
|
21143
|
+
ctx.lineWidth = 1;
|
|
20998
21144
|
roundRect(ctx, rect.x, rect.y, rect.width, rect.height, rect.height / 2);
|
|
20999
21145
|
ctx.fill();
|
|
21146
|
+
ctx.stroke();
|
|
21000
21147
|
ctx.restore();
|
|
21001
21148
|
}
|
|
21002
21149
|
function drawThumb(ctx, rect) {
|
|
@@ -23835,7 +23982,7 @@ function executeListTableRenderPipeline(params) {
|
|
|
23835
23982
|
renderer.drawEmpty(
|
|
23836
23983
|
width,
|
|
23837
23984
|
bodyAreaHeight,
|
|
23838
|
-
options.emptyText ?? "\
|
|
23985
|
+
options.emptyText ?? "\u6682\u65E0\u6570\u636E",
|
|
23839
23986
|
headerHeight
|
|
23840
23987
|
);
|
|
23841
23988
|
} else {
|
|
@@ -24002,6 +24149,7 @@ function executeListTableRenderPipeline(params) {
|
|
|
24002
24149
|
ctx,
|
|
24003
24150
|
snapshot.scrollbarLayout,
|
|
24004
24151
|
descriptors,
|
|
24152
|
+
theme.borderColor,
|
|
24005
24153
|
scrollbarOpacity,
|
|
24006
24154
|
isScrollbarInteractive
|
|
24007
24155
|
);
|
|
@@ -24352,7 +24500,7 @@ var ListTableRenderController = class {
|
|
|
24352
24500
|
const layoutWidth = hostSize.width / zoom;
|
|
24353
24501
|
const layoutAvailableHeight = availableHeight / zoom;
|
|
24354
24502
|
const currentSnapshot = this.currentRenderSnapshot;
|
|
24355
|
-
const measureSnapshot = currentSnapshot && currentSnapshot.width === layoutWidth && currentSnapshot.groupingBarHeight === (this.options.getGroupBarVisible?.() ?
|
|
24503
|
+
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);
|
|
24356
24504
|
if (!measureSnapshot) {
|
|
24357
24505
|
this.options.setFittedHeight(null);
|
|
24358
24506
|
return;
|
|
@@ -24365,7 +24513,7 @@ var ListTableRenderController = class {
|
|
|
24365
24513
|
topFrozenHeight: measureSnapshot.bodyLayout.topFrozenHeight,
|
|
24366
24514
|
totalBodyHeight: Math.max(
|
|
24367
24515
|
measureSnapshot.bodyLayout.totalBodyHeight,
|
|
24368
|
-
measureSnapshot.displayRows.length === 0 ? measureSnapshot.rowHeight : 0
|
|
24516
|
+
measureSnapshot.displayRows.length === 0 ? Math.max(measureSnapshot.rowHeight, DEFAULT_EMPTY_BODY_HEIGHT) : 0
|
|
24369
24517
|
),
|
|
24370
24518
|
bottomFrozenHeight: measureSnapshot.bodyLayout.bottomFrozenHeight,
|
|
24371
24519
|
summaryHeight: measureSnapshot.bodyLayout.summaryHeight
|
|
@@ -25667,9 +25815,7 @@ function assembleListTableCoreControllers(core, options) {
|
|
|
25667
25815
|
draggingScrollbar: core.draggingScrollbar != null,
|
|
25668
25816
|
continuousScrollActive: core.eventController.isContinuousScrollActive(),
|
|
25669
25817
|
hover: core.storeFacade.hover,
|
|
25670
|
-
scrollbarActiveUntil: core.animationController.getScrollbarActiveUntil()
|
|
25671
|
-
now: Date.now()
|
|
25672
|
-
});
|
|
25818
|
+
scrollbarActiveUntil: core.animationController.getScrollbarActiveUntil()});
|
|
25673
25819
|
const applyRenderResult = (result) => {
|
|
25674
25820
|
applyListTableRenderPassResult({
|
|
25675
25821
|
didRender: result.didRender,
|
|
@@ -25975,6 +26121,7 @@ function assembleListTableCoreControllers(core, options) {
|
|
|
25975
26121
|
}
|
|
25976
26122
|
},
|
|
25977
26123
|
isEditing: () => core.editingController.getSession() != null,
|
|
26124
|
+
resetSummaryValues: () => core.summaryController.reset(),
|
|
25978
26125
|
requestRender: () => render()
|
|
25979
26126
|
});
|
|
25980
26127
|
core.contentActionController = new ListTableContentActionController({
|
|
@@ -26003,6 +26150,7 @@ function assembleListTableCoreControllers(core, options) {
|
|
|
26003
26150
|
domHost: core.domHost,
|
|
26004
26151
|
canvasHost: core.canvasHost,
|
|
26005
26152
|
refreshRuntimeColumns,
|
|
26153
|
+
resetSummaryValues: () => core.summaryController.reset(),
|
|
26006
26154
|
requestRender: () => render()
|
|
26007
26155
|
});
|
|
26008
26156
|
core.carouselController = new ListTableCarouselController({
|
|
@@ -26465,6 +26613,14 @@ var ListTableCore = class {
|
|
|
26465
26613
|
resetFilter() {
|
|
26466
26614
|
this.headerActionController.resetFilters();
|
|
26467
26615
|
}
|
|
26616
|
+
/**
|
|
26617
|
+
* 设置内置表格密度。
|
|
26618
|
+
*/
|
|
26619
|
+
changeDensity(density) {
|
|
26620
|
+
this.headerActionController.changeTableDensity(
|
|
26621
|
+
density === 32 ? "compact" : density === 56 ? "comfortable" : "middle"
|
|
26622
|
+
);
|
|
26623
|
+
}
|
|
26468
26624
|
/**
|
|
26469
26625
|
* 销毁实例。
|
|
26470
26626
|
*/
|
|
@@ -26587,6 +26743,12 @@ var ListTable = class {
|
|
|
26587
26743
|
resetFilter() {
|
|
26588
26744
|
this.core?.resetFilter();
|
|
26589
26745
|
}
|
|
26746
|
+
/**
|
|
26747
|
+
* 设置并持久化内置表格密度。
|
|
26748
|
+
*/
|
|
26749
|
+
changeDensity(density) {
|
|
26750
|
+
this.core?.changeDensity(density);
|
|
26751
|
+
}
|
|
26590
26752
|
/**
|
|
26591
26753
|
* 销毁实例。
|
|
26592
26754
|
*/
|