@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/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,15 @@ 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 = options.headerRowHeight ??
|
|
20082
|
-
const summaryRowHeight = options.summaryRowHeight ??
|
|
20083
|
-
const groupingBarHeight = params.groupBarVisible ?
|
|
20151
|
+
const headerRowHeight = options.headerRowHeight ?? rowHeight;
|
|
20152
|
+
const summaryRowHeight = options.summaryRowHeight ?? rowHeight;
|
|
20153
|
+
const groupingBarHeight = params.groupBarVisible ? rowHeight : 0;
|
|
20084
20154
|
const columnHeaderHeight = (headerInfo.maxDepth + 1) * headerRowHeight;
|
|
20085
20155
|
const headerHeight = groupingBarHeight + columnHeaderHeight;
|
|
20086
20156
|
const hasConfiguredSummary = leafColumns.some(
|
|
@@ -20286,11 +20356,11 @@ function buildListTableRenderSnapshot(params) {
|
|
|
20286
20356
|
scrollRowCount: plainRowWindow.totalRowCount
|
|
20287
20357
|
});
|
|
20288
20358
|
}
|
|
20289
|
-
|
|
20359
|
+
let columnMetrics = resolveColumnMetrics({
|
|
20290
20360
|
columns: leafColumns,
|
|
20291
20361
|
tableWidth: width
|
|
20292
20362
|
});
|
|
20293
|
-
|
|
20363
|
+
let viewportResult = computeViewport({
|
|
20294
20364
|
width,
|
|
20295
20365
|
height,
|
|
20296
20366
|
headerHeight,
|
|
@@ -20301,6 +20371,59 @@ function buildListTableRenderSnapshot(params) {
|
|
|
20301
20371
|
fixedWidthRight: columnMetrics.fixedWidthRight,
|
|
20302
20372
|
scroll
|
|
20303
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
|
+
});
|
|
20304
20427
|
const nextScroll = viewportResult.scroll;
|
|
20305
20428
|
const columnSegments = resolveColumnSegments({
|
|
20306
20429
|
metrics: columnMetrics,
|
|
@@ -20308,8 +20431,8 @@ function buildListTableRenderSnapshot(params) {
|
|
|
20308
20431
|
swapAnimation
|
|
20309
20432
|
});
|
|
20310
20433
|
const scrollbarLayout = computeScrollbarLayout({
|
|
20311
|
-
width,
|
|
20312
|
-
height,
|
|
20434
|
+
width: hostWidth,
|
|
20435
|
+
height: hostHeight,
|
|
20313
20436
|
bodyTop: bodyState.bodyLayout.scrollBodyTop,
|
|
20314
20437
|
bodyHeight: bodyState.bodyLayout.scrollBodyHeight,
|
|
20315
20438
|
centerVisibleWidth: columnMetrics.availableCenterWidth,
|
|
@@ -20507,8 +20630,8 @@ function resolveUngroupedDataRowCount(visibleRows) {
|
|
|
20507
20630
|
function updateListTableRenderSnapshotScroll(params) {
|
|
20508
20631
|
const { snapshot, width, height, scroll, options } = params;
|
|
20509
20632
|
const viewportResult = computeViewport({
|
|
20510
|
-
width,
|
|
20511
|
-
height,
|
|
20633
|
+
width: snapshot.width,
|
|
20634
|
+
height: snapshot.height,
|
|
20512
20635
|
headerHeight: snapshot.bodyLayout.scrollBodyTop - snapshot.bodyLayout.topFrozenHeight,
|
|
20513
20636
|
bodyHeight: snapshot.bodyLayout.scrollBodyHeight,
|
|
20514
20637
|
totalWidth: snapshot.columnMetrics.totalWidth,
|
|
@@ -20944,7 +21067,7 @@ function resolveListTableRenderHostSize(params) {
|
|
|
20944
21067
|
}
|
|
20945
21068
|
|
|
20946
21069
|
// src/rendering/primitives/draw-scrollbars.ts
|
|
20947
|
-
function drawScrollbars(ctx, layout, descriptors, opacity = 1, interactive = true) {
|
|
21070
|
+
function drawScrollbars(ctx, layout, descriptors, borderColor, opacity = 1, interactive = true) {
|
|
20948
21071
|
const alpha = Number.isFinite(opacity) ? Math.min(Math.max(opacity, 0), 1) : 1;
|
|
20949
21072
|
if (alpha <= 1e-3) {
|
|
20950
21073
|
return;
|
|
@@ -20952,14 +21075,28 @@ function drawScrollbars(ctx, layout, descriptors, opacity = 1, interactive = tru
|
|
|
20952
21075
|
ctx.save();
|
|
20953
21076
|
ctx.globalAlpha = alpha;
|
|
20954
21077
|
if (layout.horizontal) {
|
|
20955
|
-
drawAxisScrollbar(
|
|
21078
|
+
drawAxisScrollbar(
|
|
21079
|
+
ctx,
|
|
21080
|
+
layout.horizontal,
|
|
21081
|
+
"horizontal",
|
|
21082
|
+
descriptors,
|
|
21083
|
+
borderColor,
|
|
21084
|
+
interactive
|
|
21085
|
+
);
|
|
20956
21086
|
}
|
|
20957
21087
|
if (layout.vertical) {
|
|
20958
|
-
drawAxisScrollbar(
|
|
21088
|
+
drawAxisScrollbar(
|
|
21089
|
+
ctx,
|
|
21090
|
+
layout.vertical,
|
|
21091
|
+
"vertical",
|
|
21092
|
+
descriptors,
|
|
21093
|
+
borderColor,
|
|
21094
|
+
interactive
|
|
21095
|
+
);
|
|
20959
21096
|
}
|
|
20960
21097
|
ctx.restore();
|
|
20961
21098
|
}
|
|
20962
|
-
function drawAxisScrollbar(ctx, layout, axis, descriptors, interactive) {
|
|
21099
|
+
function drawAxisScrollbar(ctx, layout, axis, descriptors, borderColor, interactive) {
|
|
20963
21100
|
const kind = axis === "horizontal" ? "horizontal-scrollbar" : "vertical-scrollbar";
|
|
20964
21101
|
if (interactive) {
|
|
20965
21102
|
descriptors.push({
|
|
@@ -20987,16 +21124,19 @@ function drawAxisScrollbar(ctx, layout, axis, descriptors, interactive) {
|
|
|
20987
21124
|
scrollbarRole: "increase-button"
|
|
20988
21125
|
});
|
|
20989
21126
|
}
|
|
20990
|
-
drawTrack(ctx, layout.track);
|
|
21127
|
+
drawTrack(ctx, layout.track, borderColor);
|
|
20991
21128
|
drawButton(ctx, layout.decreaseButton, axis, "decrease");
|
|
20992
21129
|
drawButton(ctx, layout.increaseButton, axis, "increase");
|
|
20993
21130
|
drawThumb(ctx, layout.thumb);
|
|
20994
21131
|
}
|
|
20995
|
-
function drawTrack(ctx, rect) {
|
|
21132
|
+
function drawTrack(ctx, rect, borderColor) {
|
|
20996
21133
|
ctx.save();
|
|
20997
21134
|
ctx.fillStyle = "rgba(148, 163, 184, 0.16)";
|
|
21135
|
+
ctx.strokeStyle = borderColor;
|
|
21136
|
+
ctx.lineWidth = 1;
|
|
20998
21137
|
roundRect(ctx, rect.x, rect.y, rect.width, rect.height, rect.height / 2);
|
|
20999
21138
|
ctx.fill();
|
|
21139
|
+
ctx.stroke();
|
|
21000
21140
|
ctx.restore();
|
|
21001
21141
|
}
|
|
21002
21142
|
function drawThumb(ctx, rect) {
|
|
@@ -23835,7 +23975,7 @@ function executeListTableRenderPipeline(params) {
|
|
|
23835
23975
|
renderer.drawEmpty(
|
|
23836
23976
|
width,
|
|
23837
23977
|
bodyAreaHeight,
|
|
23838
|
-
options.emptyText ?? "\
|
|
23978
|
+
options.emptyText ?? "\u6682\u65E0\u6570\u636E",
|
|
23839
23979
|
headerHeight
|
|
23840
23980
|
);
|
|
23841
23981
|
} else {
|
|
@@ -24002,6 +24142,7 @@ function executeListTableRenderPipeline(params) {
|
|
|
24002
24142
|
ctx,
|
|
24003
24143
|
snapshot.scrollbarLayout,
|
|
24004
24144
|
descriptors,
|
|
24145
|
+
theme.borderColor,
|
|
24005
24146
|
scrollbarOpacity,
|
|
24006
24147
|
isScrollbarInteractive
|
|
24007
24148
|
);
|
|
@@ -24352,7 +24493,7 @@ var ListTableRenderController = class {
|
|
|
24352
24493
|
const layoutWidth = hostSize.width / zoom;
|
|
24353
24494
|
const layoutAvailableHeight = availableHeight / zoom;
|
|
24354
24495
|
const currentSnapshot = this.currentRenderSnapshot;
|
|
24355
|
-
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);
|
|
24356
24497
|
if (!measureSnapshot) {
|
|
24357
24498
|
this.options.setFittedHeight(null);
|
|
24358
24499
|
return;
|
|
@@ -24365,7 +24506,7 @@ var ListTableRenderController = class {
|
|
|
24365
24506
|
topFrozenHeight: measureSnapshot.bodyLayout.topFrozenHeight,
|
|
24366
24507
|
totalBodyHeight: Math.max(
|
|
24367
24508
|
measureSnapshot.bodyLayout.totalBodyHeight,
|
|
24368
|
-
measureSnapshot.displayRows.length === 0 ? measureSnapshot.rowHeight : 0
|
|
24509
|
+
measureSnapshot.displayRows.length === 0 ? Math.max(measureSnapshot.rowHeight, DEFAULT_EMPTY_BODY_HEIGHT) : 0
|
|
24369
24510
|
),
|
|
24370
24511
|
bottomFrozenHeight: measureSnapshot.bodyLayout.bottomFrozenHeight,
|
|
24371
24512
|
summaryHeight: measureSnapshot.bodyLayout.summaryHeight
|
|
@@ -25667,9 +25808,7 @@ function assembleListTableCoreControllers(core, options) {
|
|
|
25667
25808
|
draggingScrollbar: core.draggingScrollbar != null,
|
|
25668
25809
|
continuousScrollActive: core.eventController.isContinuousScrollActive(),
|
|
25669
25810
|
hover: core.storeFacade.hover,
|
|
25670
|
-
scrollbarActiveUntil: core.animationController.getScrollbarActiveUntil()
|
|
25671
|
-
now: Date.now()
|
|
25672
|
-
});
|
|
25811
|
+
scrollbarActiveUntil: core.animationController.getScrollbarActiveUntil()});
|
|
25673
25812
|
const applyRenderResult = (result) => {
|
|
25674
25813
|
applyListTableRenderPassResult({
|
|
25675
25814
|
didRender: result.didRender,
|
|
@@ -25975,6 +26114,7 @@ function assembleListTableCoreControllers(core, options) {
|
|
|
25975
26114
|
}
|
|
25976
26115
|
},
|
|
25977
26116
|
isEditing: () => core.editingController.getSession() != null,
|
|
26117
|
+
resetSummaryValues: () => core.summaryController.reset(),
|
|
25978
26118
|
requestRender: () => render()
|
|
25979
26119
|
});
|
|
25980
26120
|
core.contentActionController = new ListTableContentActionController({
|
|
@@ -26003,6 +26143,7 @@ function assembleListTableCoreControllers(core, options) {
|
|
|
26003
26143
|
domHost: core.domHost,
|
|
26004
26144
|
canvasHost: core.canvasHost,
|
|
26005
26145
|
refreshRuntimeColumns,
|
|
26146
|
+
resetSummaryValues: () => core.summaryController.reset(),
|
|
26006
26147
|
requestRender: () => render()
|
|
26007
26148
|
});
|
|
26008
26149
|
core.carouselController = new ListTableCarouselController({
|
|
@@ -26465,6 +26606,14 @@ var ListTableCore = class {
|
|
|
26465
26606
|
resetFilter() {
|
|
26466
26607
|
this.headerActionController.resetFilters();
|
|
26467
26608
|
}
|
|
26609
|
+
/**
|
|
26610
|
+
* 设置内置表格密度。
|
|
26611
|
+
*/
|
|
26612
|
+
changeDensity(density) {
|
|
26613
|
+
this.headerActionController.changeTableDensity(
|
|
26614
|
+
density === 32 ? "compact" : density === 56 ? "comfortable" : "middle"
|
|
26615
|
+
);
|
|
26616
|
+
}
|
|
26468
26617
|
/**
|
|
26469
26618
|
* 销毁实例。
|
|
26470
26619
|
*/
|
|
@@ -26587,6 +26736,12 @@ var ListTable = class {
|
|
|
26587
26736
|
resetFilter() {
|
|
26588
26737
|
this.core?.resetFilter();
|
|
26589
26738
|
}
|
|
26739
|
+
/**
|
|
26740
|
+
* 设置并持久化内置表格密度。
|
|
26741
|
+
*/
|
|
26742
|
+
changeDensity(density) {
|
|
26743
|
+
this.core?.changeDensity(density);
|
|
26744
|
+
}
|
|
26590
26745
|
/**
|
|
26591
26746
|
* 销毁实例。
|
|
26592
26747
|
*/
|