diff --git a/common/config/rush/version-policies.json b/common/config/rush/version-policies.json index f2e90f606..a2147593e 100644 --- a/common/config/rush/version-policies.json +++ b/common/config/rush/version-policies.json @@ -1 +1 @@ -[{"definitionName":"lockStepVersion","policyName":"vtableMain","version":"0.20.0","mainProject":"@visactor/vtable","nextBump":"minor"}] +[{"definitionName":"lockStepVersion","policyName":"vtableMain","version":"0.20.1","mainProject":"@visactor/vtable","nextBump":"patch"}] diff --git a/docs/assets/api/en/methods.md b/docs/assets/api/en/methods.md index 692db9a51..f4235a7f5 100644 --- a/docs/assets/api/en/methods.md +++ b/docs/assets/api/en/methods.md @@ -303,6 +303,22 @@ Note: ListTable specific interface getTableIndexByRecordIndex: (recordIndex: number) => number; ``` +## getRecordIndexByCell(Function) + +Get the number of data in the current cell in the data source. + +If it is a table in tree mode, an array will be returned, such as [1,2], the 3rd item in the children of the 2nd item in the data source. + +** ListTable proprietary ** + +``` + /** Get the number of the data in the current cell in the data source. + * If it is a table in tree mode, an array will be returned, such as [1,2], the 3rd item in the children of the 2nd item in the data source + * Note: ListTable specific interface */ + getRecordIndexByCell(col: number, row: number): number | number[] +** ListTable proprietary ** +``` + ## getTableIndexByField(Function) Get the index row number or column number displayed in the table according to the field of the data source (Related to transposition, the non-transposition obtains the row number, and the transposed table obtains the column number). diff --git a/docs/assets/api/zh/methods.md b/docs/assets/api/zh/methods.md index 2bbf791be..cacc07a8c 100644 --- a/docs/assets/api/zh/methods.md +++ b/docs/assets/api/zh/methods.md @@ -301,6 +301,22 @@ setRecords(records: Array, sort?: SortState | SortState[]) //** 基本表 getTableIndexByRecordIndex: (recordIndex: number) => number; ``` +## getRecordIndexByCell(Function) + +获取当前单元格的数据是数据源中的第几条。 + +如果是树形模式的表格，将返回数组，如[1,2] 数据源中第2条数据中children中的第3条。 + +** ListTable 专有 ** + +``` + /** 获取当前单元格的数据是数据源中的第几条。 + * 如果是树形模式的表格，将返回数组，如[1,2] 数据源中第2条数据中children中的第3条 + * 注：ListTable特有接口 */ + getRecordIndexByCell(col: number, row: number): number | number[] +** ListTable 专有 ** +``` + ## getTableIndexByField(Function) 根据数据源的 field 获取显示到表格中的 index 行号或者列号（与转置相关，非转置获取的是行号，转置表获取的是列号）。 diff --git a/docs/assets/changelog/en/release.md b/docs/assets/changelog/en/release.md index c2000a7d9..e3a163d5b 100644 --- a/docs/assets/changelog/en/release.md +++ b/docs/assets/changelog/en/release.md @@ -1,3 +1,30 @@ +# v0.20.0 + +2024-02-23 + + +**🆕 New feature** + +- **@visactor/vtable**: add aggregation for list table column +- **@visactor/vtable**: add api getAggregateValuesByField +- **@visactor/vtable**: add custom aggregation +- **@visactor/vtable**: chartSpec support function [#1115](https://github.com/VisActor/VTable/issues/1115) +- **@visactor/vtable**: add filter data config [#607](https://github.com/VisActor/VTable/issues/607) + +**🐛 Bug fix** + +- **@visactor/vtable**: edit right frozen cell input position error +- **@visactor/vtable**: mouseleave_cell event trigger [#1112](https://github.com/VisActor/VTable/issues/1112) +- **@visactor/vtable**: fix cellBgColor judgement in isCellHover() +- **@visactor/vtable**: fix custom merge cell computed height&width +- **@visactor/vtable**: fix content position update problem +- **@visactor/vtable**: merge cell update in setDropDownMenuHighlight() +- **@visactor/vtable**: fix react-vtable display error in react strict mode [#990](https://github.com/VisActor/VTable/issues/990) + + + +[more detail about v0.20.0](https://github.com/VisActor/VTable/releases/tag/v0.20.0) + # v0.19.1 2024-02-06 diff --git a/docs/assets/changelog/zh/release.md b/docs/assets/changelog/zh/release.md index 724d438c7..eb030e069 100644 --- a/docs/assets/changelog/zh/release.md +++ b/docs/assets/changelog/zh/release.md @@ -1,3 +1,29 @@ +# v0.20.0 + +2024-02-23 + + +**🆕 新增功能** + +- **@visactor/vtable**：添加列表列的聚合 +- **@visactor/vtable**：添加 api getAggregateValuesByField +- **@visactor/vtable**：添加自定义聚合 +- **@visactor/vtable**：chartSpec 支持函数 [#1115](https://github.com/VisActor/VTable/issues/1115) +- **@visactor/vtable**：添加基本表格的过滤能力 [#607](https://github.com/VisActor/VTable/issues/607) + +**🐛 功能修复** + +- **@visactor/vtable**：编辑右冻结单元格输入位置错误 +- **@visactor/vtable**：mouseleave_cell 事件触发器 [#1112](https://github.com/VisActor/VTable/issues/1112) +- **@visactor/vtable**：修复 isCellHover() 中的 cellBgColor 判断 +- **@visactor/vtable**：修复自定义合并单元计算的高度和宽度 +- **@visactor/vtable**：修复内容位置更新问题 +- **@visactor/vtable**：在 setDropDownMenuHighlight() 中合并单元格更新 +- **@visactor/vtable**：修复react严格模式下的react-vtable显示错误[#990](https://github.com/VisActor/VTable/issues/990) + + +[更多详情请查看 v0.20.0](https://github.com/VisActor/VTable/releases/tag/v0.20.0) + # v0.19.1 2024-02-06 diff --git a/docs/assets/demo/en/list-table-data-analysis/list-table-aggregation-multiple.md b/docs/assets/demo/en/list-table-data-analysis/list-table-aggregation-multiple.md index 636017f85..3f9de5b0d 100644 --- a/docs/assets/demo/en/list-table-data-analysis/list-table-aggregation-multiple.md +++ b/docs/assets/demo/en/list-table-data-analysis/list-table-aggregation-multiple.md @@ -3,7 +3,7 @@ category: examples group: list-table-data-analysis title: Set multiple aggregation and aggregation summary methods for the same column of data cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/list-table-multiple-aggregation.png -link: '../guide/table_type/Pivot_table/list_table_dataAnalysis' +link: '../guide/data_analysis/list_table_dataAnalysis' option: ListTable-columns-text#aggregation(Aggregation%20%7C%20CustomAggregation%20%7C%20Array) --- diff --git a/docs/assets/demo/en/list-table-data-analysis/list-table-aggregation.md b/docs/assets/demo/en/list-table-data-analysis/list-table-aggregation.md index b7d6377f0..95d39946d 100644 --- a/docs/assets/demo/en/list-table-data-analysis/list-table-aggregation.md +++ b/docs/assets/demo/en/list-table-data-analysis/list-table-aggregation.md @@ -3,7 +3,7 @@ category: examples group: list-table-data-analysis title: List Table data aggregation summary cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/list-table-aggregation.png -link: '../guide/table_type/Pivot_table/list_table_dataAnalysis' +link: '../guide/data_analysis/list_table_dataAnalysis' option: ListTable-columns-text#aggregation(Aggregation%20%7C%20CustomAggregation%20%7C%20Array) --- diff --git a/docs/assets/demo/en/list-table-data-analysis/list-table-data-filter.md b/docs/assets/demo/en/list-table-data-analysis/list-table-data-filter.md index 872b0df2e..d66c6424e 100644 --- a/docs/assets/demo/en/list-table-data-analysis/list-table-data-filter.md +++ b/docs/assets/demo/en/list-table-data-analysis/list-table-data-filter.md @@ -3,7 +3,7 @@ category: examples group: list-table-data-analysis title: List table data filtering cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/list-table-filter.gif -link: '../guide/table_type/Pivot_table/list_table_dataAnalysis' +link: '../guide/data_analysis/list_table_dataAnalysis' --- # List table data filtering diff --git a/docs/assets/demo/zh/list-table-data-analysis/list-table-aggregation-multiple.md b/docs/assets/demo/zh/list-table-data-analysis/list-table-aggregation-multiple.md index 2cfd7ce6a..b38121d38 100644 --- a/docs/assets/demo/zh/list-table-data-analysis/list-table-aggregation-multiple.md +++ b/docs/assets/demo/zh/list-table-data-analysis/list-table-aggregation-multiple.md @@ -3,7 +3,7 @@ category: examples group: list-table-data-analysis title: 同一列数据设置多种聚合汇总方式 cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/list-table-multiple-aggregation.png -link: '../guide/table_type/Pivot_table/list_table_dataAnalysis' +link: '../guide/data_analysis/list_table_dataAnalysis' option: ListTable-columns-text#aggregation(Aggregation%20%7C%20CustomAggregation%20%7C%20Array) --- diff --git a/docs/assets/demo/zh/list-table-data-analysis/list-table-aggregation.md b/docs/assets/demo/zh/list-table-data-analysis/list-table-aggregation.md index b60febfa7..b83808d9a 100644 --- a/docs/assets/demo/zh/list-table-data-analysis/list-table-aggregation.md +++ b/docs/assets/demo/zh/list-table-data-analysis/list-table-aggregation.md @@ -3,7 +3,7 @@ category: examples group: list-table-data-analysis title: 基本表格数据聚合分析 cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/list-table-aggregation.png -link: '../guide/table_type/Pivot_table/list_table_dataAnalysis' +link: '../guide/data_analysis/list_table_dataAnalysis' option: ListTable-columns-text#aggregation(Aggregation%20%7C%20CustomAggregation%20%7C%20Array) --- diff --git a/docs/assets/demo/zh/list-table-data-analysis/list-table-data-filter.md b/docs/assets/demo/zh/list-table-data-analysis/list-table-data-filter.md index 5caba692b..97f48f9f7 100644 --- a/docs/assets/demo/zh/list-table-data-analysis/list-table-data-filter.md +++ b/docs/assets/demo/zh/list-table-data-analysis/list-table-data-filter.md @@ -3,7 +3,7 @@ category: examples group: list-table-data-analysis title: 基本表格数据过滤 cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/list-table-filter.gif -link: '../guide/table_type/Pivot_table/list_table_dataAnalysis' +link: '../guide/data_analysis/list_table_dataAnalysis' --- # 基本表格数据过滤 diff --git a/docs/assets/faq/en/21-How to cancel the bubbling of the table event.md b/docs/assets/faq/en/21-How to cancel the bubbling of the table event.md new file mode 100644 index 000000000..f11da3e46 --- /dev/null +++ b/docs/assets/faq/en/21-How to cancel the bubbling of the table event.md @@ -0,0 +1,44 @@ +# How to cancel the bubbling of the table mousedown event + +## Problem Description + +In my business scenario, I need to drag the entire table to move the position. However, if the mouse point is dragged on the cell, it will trigger the box selection interaction of the table. In this way, I do not expect to drag the entire table. When the mouse point is clicked, Then respond to the entire table dragging behavior in the blank area of the table. + +Based on this demand background, how to determine whether the click is on a cell or a blank area of the table? + +## solution + +This problem can be handled in VTable by listening to the `mousedown_cell` event, but it should be noted that VTable internally listens to pointer events! + +Therefore, if you cancel bubbling directly, you can only cancel the pointerdown event. +``` + tableInstance.on('mousedown_cell', arg => { + arg.event.stopPropagation(); + }); +``` +Therefore, you need to listen to mousedown again to determine the organization event. For correct processing, you can see the following example: + +## Code Example + +```javascript + const tableInstance = new VTable.ListTable(option); + window.tableInstance = tableInstance; + let isPointerDownOnTable = false; + tableInstance.on('mousedown_cell', arg => { + isPointerDownOnTable = true; + setTimeout(() => { + isPointerDownOnTable = false; + }, 0); + arg.event?.stopPropagation(); + }); + tableInstance.getElement().addEventListener('mousedown', e => { + if (isPointerDownOnTable) { + e.stopPropagation(); + } + }); +``` + +## Related documents + +- [Tutorial](https://visactor.io/vtable/guide/Event/event_list) +- [github](https://github.com/VisActor/VTable) \ No newline at end of file diff --git a/docs/assets/faq/menu.json b/docs/assets/faq/menu.json index 0bcc40396..540535d70 100644 --- a/docs/assets/faq/menu.json +++ b/docs/assets/faq/menu.json @@ -140,6 +140,13 @@ "zh": "20.如何在Vue中使用Vtable？", "en": "20.How to use VTable in Vue?" } + }, + { + "path": "21-How to cancel the bubbling of the table event", + "title": { + "zh": "21.怎么取消表格mousedown事件的冒泡？", + "en": "21.How to cancel the bubbling of the table event?" + } } ] } \ No newline at end of file diff --git a/docs/assets/faq/zh/21-How to cancel the bubbling of the table event.md b/docs/assets/faq/zh/21-How to cancel the bubbling of the table event.md new file mode 100644 index 000000000..6e51976e0 --- /dev/null +++ b/docs/assets/faq/zh/21-How to cancel the bubbling of the table event.md @@ -0,0 +1,44 @@ +# 怎么取消表格mousedown事件的冒泡 + +## 问题描述 + +在我的业务场景中需要对表格整体进行拖拽来移动位置，但是如果鼠标点在单元格上拖拽会触发表格的框选交互，这样我就预期不进行整表拖拽了，当鼠标点在表格空白区域再响应整表拖拽行为。 + +基于这个需求背景，怎么判断是点击在了单元格上还是表格空白区域呢？ + +## 解决方案 + +在 VTable 中可以通过监听`mousedown_cell`事件来处理这个问题，不过需要注意的是VTable内部都是监听的pointer事件哦！ + +所以如果直接取消冒泡，也仅能取消pointerdown事件。 +``` + tableInstance.on('mousedown_cell', arg => { + arg.event.stopPropagation(); + }); +``` +所以需要再监听mousedown来判断组织事件，正确处理可以看下面示例： + +## 代码示例 + +```javascript + const tableInstance = new VTable.ListTable(option); + window.tableInstance = tableInstance; + let isPointerDownOnTable = false; + tableInstance.on('mousedown_cell', arg => { + isPointerDownOnTable = true; + setTimeout(() => { + isPointerDownOnTable = false; + }, 0); + arg.event?.stopPropagation(); + }); + tableInstance.getElement().addEventListener('mousedown', e => { + if (isPointerDownOnTable) { + e.stopPropagation(); + } + }); +``` + +## 相关文档 + +- [教程](https://visactor.io/vtable/guide/Event/event_list) +- [github](https://github.com/VisActor/VTable) diff --git a/packages/react-vtable/package.json b/packages/react-vtable/package.json index cc27be3b3..71bddedf7 100644 --- a/packages/react-vtable/package.json +++ b/packages/react-vtable/package.json @@ -1,6 +1,6 @@ { "name": "@visactor/react-vtable", - "version": "0.20.0", + "version": "0.20.1", "description": "The react version of VTable", "keywords": [ "react", diff --git a/packages/react-vtable/src/components/component/menu.tsx b/packages/react-vtable/src/components/component/menu.tsx index 7065db12a..282e09123 100644 --- a/packages/react-vtable/src/components/component/menu.tsx +++ b/packages/react-vtable/src/components/component/menu.tsx @@ -8,7 +8,7 @@ export type MenuProps = { /** 内置下拉菜单的全局设置项 目前只针对基本表格有效 会对每个表头单元格开启默认的下拉菜单功能。代替原来的option.dropDownMenu*/ defaultHeaderMenuItems?: TYPES.MenuListItem[]; /** 右键菜单。代替原来的option.contextmenu */ - contextMenuItems?: TYPES.MenuListItem[] | ((field: string, row: number) => TYPES.MenuListItem[]); + contextMenuItems?: TYPES.MenuListItem[] | ((field: string, row: number, col: number) => TYPES.MenuListItem[]); /** 设置选中状态的菜单。代替原来的option.dropDownMenuHighlight */ dropDownMenuHighlight?: TYPES.DropDownMenuHighlightInfo[]; } & BaseComponentProps; diff --git a/packages/react-vtable/src/tables/base-table.tsx b/packages/react-vtable/src/tables/base-table.tsx index a626a4bd5..a8027810e 100644 --- a/packages/react-vtable/src/tables/base-table.tsx +++ b/packages/react-vtable/src/tables/base-table.tsx @@ -191,7 +191,9 @@ const BaseTable: React.FC = React.forwardRef((props, ref) => { !isEqual(eventsBinded.current.records, props.records, { skipFunction: skipFunctionDiff }) ) { eventsBinded.current = props; - tableContext.current.table.setRecords(props.records); + tableContext.current.table.setRecords(props.records, { + restoreHierarchyState: props.option.restoreHierarchyState + }); handleTableRender(); } return; @@ -202,7 +204,7 @@ const BaseTable: React.FC = React.forwardRef((props, ref) => { if ( !isEqual(newOption, prevOption.current, { skipFunction: skipFunctionDiff }) || // tableContext.current.isChildrenUpdated - !isEqual(newOptionFromChildren, optionFromChildren.current) + !isEqual(newOptionFromChildren, optionFromChildren.current, { skipFunction: skipFunctionDiff }) ) { prevOption.current = newOption; optionFromChildren.current = newOptionFromChildren; @@ -212,7 +214,9 @@ const BaseTable: React.FC = React.forwardRef((props, ref) => { handleTableRender(); } else if (hasRecords && !isEqual(props.records, prevRecords.current, { skipFunction: skipFunctionDiff })) { prevRecords.current = props.records; - tableContext.current.table.setRecords(props.records); + tableContext.current.table.setRecords(props.records, { + restoreHierarchyState: props.option.restoreHierarchyState + }); handleTableRender(); } // tableContext.current = { diff --git a/packages/vtable-editors/package.json b/packages/vtable-editors/package.json index e34714b92..70848d722 100644 --- a/packages/vtable-editors/package.json +++ b/packages/vtable-editors/package.json @@ -1,6 +1,6 @@ { "name": "@visactor/vtable-editors", - "version": "0.20.0", + "version": "0.20.1", "description": "", "sideEffects": false, "main": "cjs/index.js", diff --git a/packages/vtable-export/package.json b/packages/vtable-export/package.json index dfb34ebce..a9cbd3bdc 100644 --- a/packages/vtable-export/package.json +++ b/packages/vtable-export/package.json @@ -1,6 +1,6 @@ { "name": "@visactor/vtable-export", - "version": "0.20.0", + "version": "0.20.1", "description": "The export util of VTable", "author": { "name": "VisActor", diff --git a/packages/vtable/CHANGELOG.json b/packages/vtable/CHANGELOG.json index c7dc6eb03..61f85bcc7 100644 --- a/packages/vtable/CHANGELOG.json +++ b/packages/vtable/CHANGELOG.json @@ -1,6 +1,51 @@ { "name": "@visactor/vtable", "entries": [ + { + "version": "0.20.1", + "tag": "@visactor/vtable_v0.20.1", + "date": "Thu, 29 Feb 2024 11:57:42 GMT", + "comments": { + "none": [ + { + "comment": "fix: hideColumnsSubheader with three levels show error #1105\n\n" + }, + { + "comment": "feat: add api getRecordIndexByCell #1121\n\n" + }, + { + "comment": "refactor: rename resize_column_end event arguments #1129\n\n" + }, + { + "comment": "refactor: api return value type\n\n" + }, + { + "comment": "refactor: setRecords support restoreHierarchyState #1148\n\n" + }, + { + "comment": "fix: customlayout flex render error #1163\n\n" + }, + { + "comment": "refactor: vtable not stop event bubble #892" + }, + { + "comment": "fix: when scroll tooltip hide #905\n\n" + }, + { + "comment": "fix: fix axis innerOffset" + }, + { + "comment": "fix-contextMenuItems-add-col-param" + }, + { + "comment": "fix: add skipFunctionDiff in react-vtable" + }, + { + "comment": "refactor: remove Circular dependency\n\n" + } + ] + } + }, { "version": "0.20.0", "tag": "@visactor/vtable_v0.20.0", diff --git a/packages/vtable/CHANGELOG.md b/packages/vtable/CHANGELOG.md index f600d2d7f..0a595defb 100644 --- a/packages/vtable/CHANGELOG.md +++ b/packages/vtable/CHANGELOG.md @@ -1,6 +1,40 @@ # Change Log - @visactor/vtable -This log was last generated on Fri, 23 Feb 2024 10:06:24 GMT and should not be manually modified. +This log was last generated on Thu, 29 Feb 2024 11:57:42 GMT and should not be manually modified. + +## 0.20.1 +Thu, 29 Feb 2024 11:57:42 GMT + +### Updates + +- fix: hideColumnsSubheader with three levels show error #1105 + + +- feat: add api getRecordIndexByCell #1121 + + +- refactor: rename resize_column_end event arguments #1129 + + +- refactor: api return value type + + +- refactor: setRecords support restoreHierarchyState #1148 + + +- fix: customlayout flex render error #1163 + + +- refactor: vtable not stop event bubble #892 +- fix: when scroll tooltip hide #905 + + +- fix: fix axis innerOffset +- fix-contextMenuItems-add-col-param +- fix: add skipFunctionDiff in react-vtable +- refactor: remove Circular dependency + + ## 0.20.0 Fri, 23 Feb 2024 10:06:24 GMT diff --git a/packages/vtable/examples/list/list-tree.ts b/packages/vtable/examples/list/list-tree.ts index 019880993..2cd4a05e3 100644 --- a/packages/vtable/examples/list/list-tree.ts +++ b/packages/vtable/examples/list/list-tree.ts @@ -165,7 +165,7 @@ export function createTable() { sort: true } ], - showPin: true, //显示VTable内置冻结列图标 + showFrozenIcon: true, //显示VTable内置冻结列图标 widthMode: 'standard', autoFillHeight: true, // heightMode: 'adaptive', diff --git a/packages/vtable/examples/style/border.ts b/packages/vtable/examples/style/border.ts index f1db2a667..2177184d0 100644 --- a/packages/vtable/examples/style/border.ts +++ b/packages/vtable/examples/style/border.ts @@ -311,8 +311,8 @@ export function createTable() { menu: { renderMode: 'html', defaultHeaderMenuItems: ['升序排序', '降序排序', '冻结列'], - contextMenuItems: (field: string, row: number) => { - console.log(field, row); + contextMenuItems: (field: string, row: number, col: number) => { + console.log(field, row, col); return [ { text: '复制表头', menuKey: '复制表头$1' }, { text: '复制单元格', menuKey: '复制单元格$1' } diff --git a/packages/vtable/package.json b/packages/vtable/package.json index 558d753cf..81a9493b1 100644 --- a/packages/vtable/package.json +++ b/packages/vtable/package.json @@ -1,6 +1,6 @@ { "name": "@visactor/vtable", - "version": "0.20.0", + "version": "0.20.1", "description": "canvas table width high performance", "keywords": [ "grid", diff --git a/packages/vtable/src/ListTable.ts b/packages/vtable/src/ListTable.ts index 305879fb1..e774b002e 100644 --- a/packages/vtable/src/ListTable.ts +++ b/packages/vtable/src/ListTable.ts @@ -89,7 +89,7 @@ export class ListTable extends BaseTable implements ListTableAPI { if (options.dataSource) { _setDataSource(this, options.dataSource); } else if (options.records) { - this.setRecords(options.records as any, internalProps.sortState); + this.setRecords(options.records as any, { sortState: internalProps.sortState }); } else { this.setRecords([]); } @@ -119,7 +119,7 @@ export class ListTable extends BaseTable implements ListTableAPI { } get records() { - return this.dataSource.source; + return this.dataSource?.source; } get recordsCount() { @@ -267,10 +267,19 @@ export class ListTable extends BaseTable implements ListTableAPI { /** 获取当前单元格在body部分的展示索引 即(row / col)-headerLevelCount。注：ListTable特有接口 */ getRecordShowIndexByCell(col: number, row: number): number { const { layoutMap } = this.internalProps; - return layoutMap.getRecordIndexByCell(col, row); + return layoutMap.getRecordShowIndexByCell(col, row); } - getTableIndexByRecordIndex(recordIndex: number) { + /** 获取当前单元格的数据是数据源中的第几条。 + * 如果是树形模式的表格，将返回数组，如[1,2] 数据源中第2条数据中children中的第3条 + * 注：ListTable特有接口 */ + getRecordIndexByCell(col: number, row: number): number | number[] { + const { layoutMap } = this.internalProps; + const recordShowIndex = layoutMap.getRecordShowIndexByCell(col, row); + return this.dataSource.currentPagerIndexedData[recordShowIndex]; + } + + getTableIndexByRecordIndex(recordIndex: number | number[]) { if (this.transpose) { return this.dataSource.getTableIndex(recordIndex) + this.rowHeaderLevelCount; } @@ -342,7 +351,7 @@ export class ListTable extends BaseTable implements ListTableAPI { } return ifCan; } - updateOption(options: ListTableConstructorOptions, accelerateFirstScreen = false) { + updateOption(options: ListTableConstructorOptions & { restoreHierarchyState?: boolean }) { const internalProps = this.internalProps; super.updateOption(options); internalProps.frozenColDragHeaderMode = options.frozenColDragHeaderMode; @@ -379,7 +388,10 @@ export class ListTable extends BaseTable implements ListTableAPI { if (options.dataSource) { _setDataSource(this, options.dataSource); } else if (options.records) { - this.setRecords(options.records as any, options.sortState); + this.setRecords(options.records as any, { + restoreHierarchyState: options.restoreHierarchyState, + sortState: options.sortState + }); } else { this._resetFrozenColCount(); // 生成单元格场景树 @@ -735,7 +747,8 @@ export class ListTable extends BaseTable implements ListTableAPI { const result: DropDownMenuEventInfo = { field: this.getHeaderField(col, row), value: this.getCellValue(col, row), - cellLocation: this.getCellLocation(col, row) + cellLocation: this.getCellLocation(col, row), + event: undefined }; return result; } @@ -850,7 +863,17 @@ export class ListTable extends BaseTable implements ListTableAPI { * @param records * @param sort */ - setRecords(records: Array, sort?: SortState | SortState[]): void { + setRecords( + records: Array, + option?: { restoreHierarchyState?: boolean; sortState?: SortState | SortState[] } + ): void { + let sort: SortState | SortState[]; + if (Array.isArray(option) || (option as any)?.order) { + //兼容之前第二个参数为sort的情况 + sort = option; + } else { + sort = option?.sortState; + } const time = typeof window !== 'undefined' ? window.performance.now() : 0; const oldHoverState = { col: this.stateManager.hover.cellPos.col, row: this.stateManager.hover.cellPos.row }; // 清空单元格内容 @@ -861,6 +884,11 @@ export class ListTable extends BaseTable implements ListTableAPI { this.internalProps.sortState = sort; this.stateManager.setSortState((this as any).sortState as SortState); } + // restoreHierarchyState逻辑，保留树形结构展开收起的状态 + const currentPagerIndexedData = this.dataSource?._currentPagerIndexedData; + const currentIndexedData = this.dataSource?.currentIndexedData; + const treeDataHierarchyState = this.dataSource?.treeDataHierarchyState; + const oldRecordLength = this.records?.length ?? 0; if (records) { _setRecords(this, records); if ((this as any).sortState) { @@ -884,10 +912,23 @@ export class ListTable extends BaseTable implements ListTableAPI { } } } + if (option?.restoreHierarchyState && oldRecordLength === this.records?.length) { + // restoreHierarchyState逻辑，保留树形结构展开收起的状态 + this.dataSource._currentPagerIndexedData = currentPagerIndexedData; + this.dataSource.currentIndexedData = currentIndexedData; + this.dataSource.treeDataHierarchyState = treeDataHierarchyState; + } this.refreshRowColCount(); } else { _setRecords(this, records); + if (option?.restoreHierarchyState && oldRecordLength === this.records?.length) { + // restoreHierarchyState逻辑，保留树形结构展开收起的状态 + this.dataSource._currentPagerIndexedData = currentPagerIndexedData; + this.dataSource.currentIndexedData = currentIndexedData; + this.dataSource.treeDataHierarchyState = treeDataHierarchyState; + } } + this.stateManager.initCheckedState(records); // this.internalProps.frozenColCount = this.options.frozenColCount || this.rowHeaderLevelCount; // 生成单元格场景树 diff --git a/packages/vtable/src/PivotChart.ts b/packages/vtable/src/PivotChart.ts index 687264418..0d6781154 100644 --- a/packages/vtable/src/PivotChart.ts +++ b/packages/vtable/src/PivotChart.ts @@ -176,7 +176,7 @@ export class PivotChart extends BaseTable implements PivotChartAPI { } return ifCan; } - updateOption(options: PivotChartConstructorOptions, accelerateFirstScreen = false) { + updateOption(options: PivotChartConstructorOptions) { const internalProps = this.internalProps; //维护选中状态 // const range = internalProps.selection.range; //保留原有单元格选中状态 @@ -722,7 +722,8 @@ export class PivotChart extends BaseTable implements PivotChartAPI { dimensionKey: dimensionInfos[dimensionInfos.length - 1].dimensionKey, value: this.getCellValue(col, row), cellLocation: this.getCellLocation(col, row), - isPivotCorner: this.isCornerHeader(col, row) + isPivotCorner: this.isCornerHeader(col, row), + event: undefined }; return result; } diff --git a/packages/vtable/src/PivotTable.ts b/packages/vtable/src/PivotTable.ts index bc70f12aa..69114ce9f 100644 --- a/packages/vtable/src/PivotTable.ts +++ b/packages/vtable/src/PivotTable.ts @@ -206,7 +206,7 @@ export class PivotTable extends BaseTable implements PivotTableAPI { } return ifCan; } - updateOption(options: PivotTableConstructorOptions, accelerateFirstScreen = false) { + updateOption(options: PivotTableConstructorOptions) { const internalProps = this.internalProps; //维护选中状态 // const range = internalProps.selection.range; //保留原有单元格选中状态 @@ -995,7 +995,8 @@ export class PivotTable extends BaseTable implements PivotTableAPI { dimensionKey: dimensionInfos[dimensionInfos.length - 1].dimensionKey, value: this.getCellValue(col, row), cellLocation: this.getCellLocation(col, row), - isPivotCorner: this.isCornerHeader(col, row) + isPivotCorner: this.isCornerHeader(col, row), + event: undefined }; return result; } diff --git a/packages/vtable/src/components/axis/axis.ts b/packages/vtable/src/components/axis/axis.ts index 064e7098e..ddca94e1e 100644 --- a/packages/vtable/src/components/axis/axis.ts +++ b/packages/vtable/src/components/axis/axis.ts @@ -57,14 +57,18 @@ export class CartesianAxis { ); if (this.orient === 'left' || this.orient === 'right') { - const innerOffsetTop = this.option.innerOffset?.top ?? 0; - const innerOffsetBottom = this.option.innerOffset?.bottom ?? 0; + // const innerOffsetTop = this.option.innerOffset?.top ?? 0; + // const innerOffsetBottom = this.option.innerOffset?.bottom ?? 0; + const innerOffsetTop = 0; + const innerOffsetBottom = 0; this.width = width; this.height = height - padding[2] - innerOffsetBottom; this.y = padding[0] + innerOffsetTop; } else if (this.orient === 'top' || this.orient === 'bottom') { - const innerOffsetLeft = this.option.innerOffset?.left ?? 0; - const innerOffsetRight = this.option.innerOffset?.right ?? 0; + // const innerOffsetLeft = this.option.innerOffset?.left ?? 0; + // const innerOffsetRight = this.option.innerOffset?.right ?? 0; + const innerOffsetLeft = 0; + const innerOffsetRight = 0; this.width = width - padding[1] - innerOffsetRight; this.height = height; this.x = padding[3] + innerOffsetLeft; @@ -247,16 +251,23 @@ export class CartesianAxis { } updateScaleRange() { + const right = this.option.innerOffset?.right ?? 0; + const left = this.option.innerOffset?.left ?? 0; + const top = this.option.innerOffset?.top ?? 0; + const bottom = this.option.innerOffset?.bottom ?? 0; + const { width, height } = this.getLayoutRect(); const inverse = (this.option as any).inverse || false; let newRange: [number, number] = [0, 0]; if (isXAxis(this.orient)) { if (isValidNumber(width)) { - newRange = inverse ? [width, 0] : [0, width]; + // newRange = inverse ? [width, 0] : [0, width]; + newRange = inverse ? [width - right, left] : [left, width - right]; } } else { if (isValidNumber(height)) { - newRange = inverse ? [0, height] : [height, 0]; + // newRange = inverse ? [0, height] : [height, 0]; + newRange = inverse ? [top, height - bottom] : [height - bottom, top]; } } diff --git a/packages/vtable/src/components/menu/dom/MenuHandler.ts b/packages/vtable/src/components/menu/dom/MenuHandler.ts index bcf50a26f..f720a7488 100644 --- a/packages/vtable/src/components/menu/dom/MenuHandler.ts +++ b/packages/vtable/src/components/menu/dom/MenuHandler.ts @@ -203,7 +203,7 @@ export class MenuHandler { const abstractPos = table._getMouseAbstractPoint(e.event, false); let menu = null; if (abstractPos.inTable && typeof table.internalProps.menu?.contextMenuItems === 'function') { - menu = table.internalProps.menu.contextMenuItems(table.getHeaderField(e.col, e.row) as string, e.row); + menu = table.internalProps.menu.contextMenuItems(table.getHeaderField(e.col, e.row) as string, e.row, e.col); } else if (abstractPos.inTable && Array.isArray(table.internalProps.menu?.contextMenuItems)) { menu = table.internalProps.menu?.contextMenuItems; } diff --git a/packages/vtable/src/components/menu/dom/logic/MenuContainer.ts b/packages/vtable/src/components/menu/dom/logic/MenuContainer.ts index 62306bbee..b7b152d88 100644 --- a/packages/vtable/src/components/menu/dom/logic/MenuContainer.ts +++ b/packages/vtable/src/components/menu/dom/logic/MenuContainer.ts @@ -59,7 +59,8 @@ export class MenuContainer { // dropDownIndex, text, highlight, - cellLocation: table.getCellLocation(col, row) + cellLocation: table.getCellLocation(col, row), + event: e }); table.fireListeners(TABLE_EVENT_TYPE.DROPDOWN_MENU_CLEAR, null); // 清除菜单 diff --git a/packages/vtable/src/components/menu/dom/logic/MenuElement.ts b/packages/vtable/src/components/menu/dom/logic/MenuElement.ts index 6e82511c2..682c78101 100644 --- a/packages/vtable/src/components/menu/dom/logic/MenuElement.ts +++ b/packages/vtable/src/components/menu/dom/logic/MenuElement.ts @@ -139,7 +139,8 @@ export class MenuElement { // dropDownIndex, text, highlight, - cellLocation: table.getCellLocation(col, row) + cellLocation: table.getCellLocation(col, row), + event: e }); table.fireListeners(TABLE_EVENT_TYPE.DROPDOWN_MENU_CLEAR, null); // 清除菜单 @@ -175,7 +176,8 @@ export class MenuElement { // dropDownIndex, text, highlight, - cellLocation: table.getCellLocation(col, row) + cellLocation: table.getCellLocation(col, row), + event: e }); table.fireListeners(TABLE_EVENT_TYPE.DROPDOWN_MENU_CLEAR, null); // 清除菜单 @@ -321,7 +323,8 @@ export class MenuElement { menuKey, text, highlight, - cellLocation: table.getCellLocation(col, row) + cellLocation: table.getCellLocation(col, row), + event: e }); table.fireListeners(TABLE_EVENT_TYPE.DROPDOWN_MENU_CLEAR, null); // 清除菜单 diff --git a/packages/vtable/src/components/tooltip/TooltipHandler.ts b/packages/vtable/src/components/tooltip/TooltipHandler.ts index a21d32a45..d8a99022d 100644 --- a/packages/vtable/src/components/tooltip/TooltipHandler.ts +++ b/packages/vtable/src/components/tooltip/TooltipHandler.ts @@ -204,13 +204,14 @@ export class TooltipHandler { this._unbindFromCell(); }); table.on(TABLE_EVENT_TYPE.SCROLL, e => { - const info = this._attachInfo; - if (info?.tooltipOptions && info?.range?.start) { - const { col, row } = info.range.start; - const rect = table.getCellRangeRelativeRect({ col, row }); - info.tooltipOptions.referencePosition.rect = rect; - this._move(info.range.start.col, info.range.start.row, info.tooltipOptions); - } + this._unbindFromCell(); + // const info = this._attachInfo; + // if (info?.tooltipOptions && info?.range?.start) { + // const { col, row } = info.range.start; + // const rect = table.getCellRangeRelativeRect({ col, row }); + // info.tooltipOptions.referencePosition.rect = rect; + // this._move(info.range.start.col, info.range.start.row, info.tooltipOptions); + // } }); } _getTooltipInstanceInfo(col: number, row: number): BaseTooltip | null { diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts index 247d0b536..0451b1d69 100644 --- a/packages/vtable/src/core/BaseTable.ts +++ b/packages/vtable/src/core/BaseTable.ts @@ -2427,7 +2427,10 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { field: FieldDef, fieldKey?: FieldKeyDef ): ((v1: any, v2: any, order: string) => 0 | 1 | -1) | undefined; - abstract setRecords(records: Array, sort?: SortState | SortState[]): void; + abstract setRecords( + records: Array, + option?: { restoreHierarchyState: boolean; sort?: SortState | SortState[] } + ): void; abstract refreshHeader(): void; abstract refreshRowColCount(): void; abstract getHierarchyState(col: number, row: number): HierarchyState | null; @@ -2981,16 +2984,16 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { this.options.autoWrapText ); } else { - let defaultStyle; - if (layoutMap.isColumnHeader(col, row) || layoutMap.isBottomFrozenRow(col, row)) { - defaultStyle = this.theme.headerStyle; - } else if (this.internalProps.transpose && layoutMap.isRowHeader(col, row)) { - defaultStyle = this.theme.headerStyle; - } else if (layoutMap.isRowHeader(col, row) || layoutMap.isRightFrozenColumn(col, row)) { - defaultStyle = this.theme.rowHeaderStyle; - } else { - defaultStyle = this.theme.cornerHeaderStyle; - } + // let defaultStyle; + // if (layoutMap.isColumnHeader(col, row) || layoutMap.isBottomFrozenRow(col, row)) { + // defaultStyle = this.theme.headerStyle; + // } else if (this.internalProps.transpose && layoutMap.isRowHeader(col, row)) { + // defaultStyle = this.theme.headerStyle; + // } else if (layoutMap.isRowHeader(col, row) || layoutMap.isRightFrozenColumn(col, row)) { + // defaultStyle = this.theme.rowHeaderStyle; + // } else { + // defaultStyle = this.theme.cornerHeaderStyle; + // } // const styleClass = hd.headerType.StyleClass; //BaseHeader文件 // const { style } = hd; const style = hd?.style || {}; @@ -2999,12 +3002,12 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { } cacheStyle = headerStyleContents.of( style, - defaultStyle, - // layoutMap.isColumnHeader(col, row) || layoutMap.isBottomFrozenRow(col, row) - // ? this.theme.headerStyle - // : layoutMap.isRowHeader(col, row) || layoutMap.isRightFrozenColumn(col, row) - // ? this.theme.rowHeaderStyle - // : this.theme.cornerHeaderStyle, + // defaultStyle, + layoutMap.isColumnHeader(col, row) || layoutMap.isBottomFrozenRow(col, row) + ? this.theme.headerStyle + : layoutMap.isRowHeader(col, row) || layoutMap.isRightFrozenColumn(col, row) + ? this.theme.rowHeaderStyle + : this.theme.cornerHeaderStyle, { col, row, diff --git a/packages/vtable/src/core/tableHelper.ts b/packages/vtable/src/core/tableHelper.ts index 86b141a63..b534bb3e6 100644 --- a/packages/vtable/src/core/tableHelper.ts +++ b/packages/vtable/src/core/tableHelper.ts @@ -43,7 +43,7 @@ export function _dealWithUpdateDataSource(table: BaseTableAPI, fn: (table: BaseT table.internalProps.dataSourceEventIds = [ table.internalProps.handler.on(table.internalProps.dataSource, DataSource.EVENT_TYPE.CHANGE_ORDER, () => { - if (table.dataSource.enableHierarchyState) { + if (table.dataSource.hierarchyExpandLevel) { table.refreshRowColCount(); } table.render(); diff --git a/packages/vtable/src/data/DataSource.ts b/packages/vtable/src/data/DataSource.ts index e6cd02202..45e2c8ab8 100644 --- a/packages/vtable/src/data/DataSource.ts +++ b/packages/vtable/src/data/DataSource.ts @@ -18,7 +18,7 @@ import { applyChainSafe, getOrApply, obj, isPromise, emptyFn } from '../tools/he import { EventTarget } from '../event/EventTarget'; import { getValueByPath, isAllDigits } from '../tools/util'; import { calculateArrayDiff } from '../tools/diff-cell'; -import { cloneDeep, isValid } from '@visactor/vutils'; +import { arrayEqual, cloneDeep, isValid } from '@visactor/vutils'; import type { BaseTableAPI } from '../ts-types/base-table'; import { RecordAggregator, @@ -158,17 +158,17 @@ export class DataSource extends EventTarget implements DataSourceAPI { private lastOrderFn: (a: any, b: any, order: string) => number; private lastOrderField: FieldDef; /** 每一行对应源数据的索引 */ - protected currentIndexedData: (number | number[])[] | null = []; + currentIndexedData: (number | number[])[] | null = []; protected userPagination: IPagination; protected pagination: IPagination; /** 当前页每一行对应源数据的索引 */ - protected _currentPagerIndexedData: (number | number[])[]; + _currentPagerIndexedData: (number | number[])[]; // 当前是否为层级的树形结构 排序时判断该值确实是否继续进行子节点排序 - enableHierarchyState = false; + hierarchyExpandLevel: number = 0; static get EVENT_TYPE(): typeof EVENT_TYPE { return EVENT_TYPE; } - protected treeDataHierarchyState: Map = new Map(); + treeDataHierarchyState: Map = new Map(); beforeChangedRecordsMap: Record[] = []; // 注册聚合类型 @@ -205,34 +205,40 @@ export class DataSource extends EventTarget implements DataSourceAPI { currentPage: 0 }; if (hierarchyExpandLevel >= 1) { - this.enableHierarchyState = true; + this.hierarchyExpandLevel = hierarchyExpandLevel; } - // 初始化currentIndexedData 正常未排序。设置其状态 this.currentIndexedData = Array.from({ length: this._sourceLength }, (_, i) => i); - if (this.enableHierarchyState) { + // 初始化currentIndexedData 正常未排序。设置其状态 + this.initTreeHierarchyState(); + this.updatePagerData(); + } + initTreeHierarchyState() { + if (this.hierarchyExpandLevel) { + this.treeDataHierarchyState = new Map(); for (let i = 0; i < this._sourceLength; i++) { //expandLevel为有效值即需要按tree分析展示数据 const nodeData = this.getOriginalRecord(i); (nodeData as any).children && this.treeDataHierarchyState.set(i, HierarchyState.collapse); } - } - if (hierarchyExpandLevel > 1) { - let nodeLength = this._sourceLength; - for (let i = 0; i < nodeLength; i++) { - const indexKey = this.currentIndexedData[i]; - const nodeData = this.getOriginalRecord(indexKey); - if ((nodeData as any).children?.length > 0) { - this.treeDataHierarchyState.set( - Array.isArray(indexKey) ? indexKey.join(',') : indexKey, - HierarchyState.expand - ); - const childrenLength = this.initChildrenNodeHierarchy(indexKey, hierarchyExpandLevel, 2, nodeData); - i += childrenLength; - nodeLength += childrenLength; + + this.currentIndexedData = Array.from({ length: this._sourceLength }, (_, i) => i); + if (this.hierarchyExpandLevel > 1) { + let nodeLength = this._sourceLength; + for (let i = 0; i < nodeLength; i++) { + const indexKey = this.currentIndexedData[i]; + const nodeData = this.getOriginalRecord(indexKey); + if ((nodeData as any).children?.length > 0) { + this.treeDataHierarchyState.set( + Array.isArray(indexKey) ? indexKey.join(',') : indexKey, + HierarchyState.expand + ); + const childrenLength = this.initChildrenNodeHierarchy(indexKey, this.hierarchyExpandLevel, 2, nodeData); + i += childrenLength; + nodeLength += childrenLength; + } } } } - this.updatePagerData(); } //将聚合类型注册 收集到aggregators registerAggregator(type: string, aggregator: any) { @@ -416,7 +422,10 @@ export class DataSource extends EventTarget implements DataSourceAPI { getIndexKey(index: number): number | number[] { return _getIndex(this.currentPagerIndexedData, index); } - getTableIndex(colOrRow: number): number { + getTableIndex(colOrRow: number | number[]): number { + if (Array.isArray(colOrRow)) { + return this.currentPagerIndexedData.findIndex(value => arrayEqual(value, colOrRow)); + } return this.currentPagerIndexedData.findIndex(value => value === colOrRow); } /** 获取数据源中第index位置的field字段数据。传入col row是因为后面的format函数参数使用*/ @@ -628,7 +637,7 @@ export class DataSource extends EventTarget implements DataSourceAPI { this.source.splice(index, 0, record); this.currentIndexedData.push(this.currentIndexedData.length); this._sourceLength += 1; - + this.initTreeHierarchyState(); if (this.userPagination) { //如果用户配置了分页 this.pagination.totalCount = this._sourceLength; @@ -836,7 +845,7 @@ export class DataSource extends EventTarget implements DataSourceAPI { ); } this.currentIndexedData = sortedIndexArray; - if (this.enableHierarchyState) { + if (this.hierarchyExpandLevel) { let nodeLength = sortedIndexArray.length; const t0 = window.performance.now(); for (let i = 0; i < nodeLength; i++) { diff --git a/packages/vtable/src/event/event.ts b/packages/vtable/src/event/event.ts index a708da566..57af2b27f 100644 --- a/packages/vtable/src/event/event.ts +++ b/packages/vtable/src/event/event.ts @@ -29,8 +29,8 @@ export class EventManager { table: BaseTableAPI; // _col: number; // _resizing: boolean = false; - /** 为了能够判断canvas mousedown 事件 以阻止事件冒泡 */ - isPointerDownOnTable: boolean = false; + // /** 为了能够判断canvas mousedown 事件 以阻止事件冒泡 */ + // isPointerDownOnTable: boolean = false; isTouchdown: boolean; // touch scrolling mode on touchMovePoints: { x: number; @@ -90,12 +90,12 @@ export class EventManager { // 图标点击 this.table.on(TABLE_EVENT_TYPE.ICON_CLICK, iconInfo => { - const { col, row, x, y, funcType, icon } = iconInfo; + const { col, row, x, y, funcType, icon, event } = iconInfo; // 下拉菜单按钮点击 if (funcType === IconFuncTypeEnum.dropDown) { - stateManager.triggerDropDownMenu(col, row, x, y); + stateManager.triggerDropDownMenu(col, row, x, y, event); } else if (funcType === IconFuncTypeEnum.sort) { - stateManager.triggerSort(col, row, icon); + stateManager.triggerSort(col, row, icon, event); } else if (funcType === IconFuncTypeEnum.frozen) { stateManager.triggerFreeze(col, row, icon); } else if (funcType === IconFuncTypeEnum.drillDown) { @@ -361,7 +361,8 @@ export class EventManager { col, row, funcType: icon.attribute.funcType, - icon + icon, + event }); return true; @@ -376,7 +377,8 @@ export class EventManager { col, row, funcType: (icon.attribute as any).funcType, - icon: icon as unknown as Icon + icon: icon as unknown as Icon, + event }); return true; } diff --git a/packages/vtable/src/event/listener/container-dom.ts b/packages/vtable/src/event/listener/container-dom.ts index 3cbcd075f..daa87a9cb 100644 --- a/packages/vtable/src/event/listener/container-dom.ts +++ b/packages/vtable/src/event/listener/container-dom.ts @@ -11,11 +11,11 @@ export function bindContainerDomListener(eventManager: EventManager) { const stateManager = table.stateManager; const handler: EventHandler = table.internalProps.handler; - handler.on(table.getElement(), 'mousedown', (e: MouseEvent) => { - if (table.eventManager.isPointerDownOnTable) { - e.stopPropagation(); - } - }); + // handler.on(table.getElement(), 'mousedown', (e: MouseEvent) => { + // if (table.eventManager.isPointerDownOnTable) { + // e.stopPropagation(); + // } + // }); handler.on(table.getElement(), 'blur', (e: MouseEvent) => { eventManager.dealTableHover(); diff --git a/packages/vtable/src/event/listener/table-group.ts b/packages/vtable/src/event/listener/table-group.ts index 8f4024f3c..955203b3b 100644 --- a/packages/vtable/src/event/listener/table-group.ts +++ b/packages/vtable/src/event/listener/table-group.ts @@ -360,15 +360,16 @@ export function bindTableGroupListener(eventManager: EventManager) { table.scenegraph.tableGroup.addEventListener('pointerdown', (e: FederatedPointerEvent) => { console.log('tableGroup pointerdown'); - table.eventManager.isPointerDownOnTable = true; - setTimeout(() => { - table.eventManager.isPointerDownOnTable = false; - }, 0); + // table.eventManager.isPointerDownOnTable = true; + // setTimeout(() => { + // table.eventManager.isPointerDownOnTable = false; + // }, 0); table.eventManager.isDown = true; table.eventManager.LastBodyPointerXY = { x: e.x, y: e.y }; - // 避免在调整列宽等拖拽操作触发外层组件的拖拽逻辑 - // 如果鼠标位置在表格内（加调整列宽的热区），将mousedown事件阻止冒泡 - e.stopPropagation(); + // // 避免在调整列宽等拖拽操作触发外层组件的拖拽逻辑; + // // 如果鼠标位置在表格内（加调整列宽的热区），将pointerdown事件阻止冒泡（如果阻止mousedown需要结合isPointerDownOnTable来判断） + // e.stopPropagation(); + // e.preventDefault(); //为了阻止mousedown事件的触发，后续：不能这样写，会阻止table聚焦 table.eventManager.LastPointerXY = { x: e.x, y: e.y }; if (e.button !== 0) { @@ -750,7 +751,7 @@ function endResizeCol(table: BaseTableAPI) { } table.fireListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN_END, { col: table.stateManager.columnResize.col, - columns + colWidths: columns }); } } diff --git a/packages/vtable/src/layout/pivot-header-layout.ts b/packages/vtable/src/layout/pivot-header-layout.ts index 629d75f5f..133e0b58b 100644 --- a/packages/vtable/src/layout/pivot-header-layout.ts +++ b/packages/vtable/src/layout/pivot-header-layout.ts @@ -1463,7 +1463,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { getRecordStartRowByRecordIndex(index: number): number { return this.columnHeaderLevelCount + index; } - getRecordIndexByCell(col: number, row: number): number { + getRecordShowIndexByCell(col: number, row: number): number { return undefined; } // getCellRangeTranspose(): CellRange { diff --git a/packages/vtable/src/layout/simple-header-layout.ts b/packages/vtable/src/layout/simple-header-layout.ts index 51a8cffc1..17b8a13cd 100644 --- a/packages/vtable/src/layout/simple-header-layout.ts +++ b/packages/vtable/src/layout/simple-header-layout.ts @@ -793,7 +793,7 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI { range1.end.row === range2.end.row ); } - getRecordIndexByCell(col: number, row: number): number { + getRecordShowIndexByCell(col: number, row: number): number { const skipRowCount = this.hasAggregationOnTopCount ? this.headerLevelCount + 1 : this.headerLevelCount; if (this.transpose) { if (col < skipRowCount) { @@ -839,15 +839,17 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI { results[id] = cell; for (let r = row - 1; r >= 0; r--) { - this._headerCellIds[r][col] = roots[r]; + this._headerCellIds[r] && (this._headerCellIds[r][col] = roots[r]); } if (!hideColumnsSubHeader) { rowCells[col] = id; - } else { + } else if (this._headerCellIds[row - 1]) { rowCells[col] = this._headerCellIds[row - 1][col]; } if (hd.columns) { - this._addHeaders(row + 1, hd.columns, [...roots, id], hd.hideColumnsSubHeader).forEach(c => results.push(c)); + this._addHeaders(row + 1, hd.columns, [...roots, id], hd.hideColumnsSubHeader || hideColumnsSubHeader).forEach( + c => results.push(c) + ); } else { const colDef = hd; this._columns.push({ diff --git a/packages/vtable/src/scenegraph/component/custom.ts b/packages/vtable/src/scenegraph/component/custom.ts index f27d3d4cf..c807fd7a5 100644 --- a/packages/vtable/src/scenegraph/component/custom.ts +++ b/packages/vtable/src/scenegraph/component/custom.ts @@ -19,11 +19,6 @@ import type { import { Icon } from '../graphic/icon'; import type { BaseTableAPI } from '../../ts-types/base-table'; import type { percentCalcObj } from '../../render/layout'; -import { ProgressBarStyle } from '../../body-helper/style/ProgressBarStyle'; -import { getQuadProps } from '../utils/padding'; -import { getProp } from '../utils/get-prop'; -import type { Group } from '../graphic/group'; -import { resizeCellGroup } from '../group-creater/column-helper'; export function dealWithCustom( customLayout: ICustomLayout, @@ -467,55 +462,3 @@ function parseToGraphic(g: any, props: any) { // } } } - -export function getCustomCellMergeCustom(col: number, row: number, cellGroup: Group, table: BaseTableAPI) { - if (table.internalProps.customMergeCell) { - const customMerge = table.getCustomMerge(col, row); - if (customMerge) { - const { - range: customMergeRange, - text: customMergeText, - style: customMergeStyle, - customLayout: customMergeLayout, - customRender: customMergeRender - } = customMerge; - - if (customMergeLayout || customMergeRender) { - const customResult = dealWithCustom( - customMergeLayout, - customMergeRender, - customMergeRange.start.col, - customMergeRange.start.row, - table.getColsWidth(customMergeRange.start.col, customMergeRange.end.col), - table.getRowsHeight(customMergeRange.start.row, customMergeRange.end.row), - false, - table.heightMode === 'autoHeight', - [0, 0, 0, 0], - table - ); - - const customElementsGroup = customResult.elementsGroup; - - if (cellGroup.childrenCount > 0 && customElementsGroup) { - cellGroup.insertBefore(customElementsGroup, cellGroup.firstChild); - } else if (customElementsGroup) { - cellGroup.appendChild(customElementsGroup); - } - - const rangeHeight = table.getRowHeight(row); - const rangeWidth = table.getColWidth(col); - - const { width: contentWidth } = cellGroup.attribute; - const { height: contentHeight } = cellGroup.attribute; - cellGroup.contentWidth = contentWidth; - cellGroup.contentHeight = contentHeight; - - resizeCellGroup(cellGroup, rangeWidth, rangeHeight, customMergeRange, table); - - return customResult; - } - } - } - - return undefined; -} diff --git a/packages/vtable/src/scenegraph/component/menu.ts b/packages/vtable/src/scenegraph/component/menu.ts index 9126f93e2..5b6526332 100644 --- a/packages/vtable/src/scenegraph/component/menu.ts +++ b/packages/vtable/src/scenegraph/component/menu.ts @@ -298,7 +298,7 @@ export class MenuHandler { const { field } = this._table.isHeader(col, row) ? this._table.getHeaderDefine(col, row) : this._table.getBodyColumnDefine(col, row); - menuInfo = contextmenu(field, row); + menuInfo = contextmenu(field, row, col); } return { menuInfo, @@ -317,6 +317,7 @@ export class MenuHandler { const resultMenuInfo = this.getEventInfo(target as unknown as Group); const resultTableInfo = this._table.getMenuInfo(this._menuInfo.col, this._menuInfo.row, this._menuInfo.type); const result = Object.assign(resultMenuInfo, resultTableInfo); + result.event = e.nativeEvent; this._table.fireListeners(TABLE_EVENT_TYPE.DROPDOWN_MENU_CLICK, result); // 由DROPDOWNMENU_CLICK事件清空菜单 diff --git a/packages/vtable/src/scenegraph/group-creater/cell-helper.ts b/packages/vtable/src/scenegraph/group-creater/cell-helper.ts index db6fa6b9c..81682890f 100644 --- a/packages/vtable/src/scenegraph/group-creater/cell-helper.ts +++ b/packages/vtable/src/scenegraph/group-creater/cell-helper.ts @@ -7,7 +7,6 @@ import type { CheckboxColumnDefine, ColumnDefine, ColumnTypeOption, - ICustomRender, ImageColumnDefine, MappingRule, ProgressbarColumnDefine, @@ -22,7 +21,6 @@ import { createProgressBarCell } from './cell-type/progress-bar-cell'; import { createSparkLineCellGroup } from './cell-type/spark-line-cell'; import { createCellGroup } from './cell-type/text-cell'; import { createVideoCellGroup } from './cell-type/video-cell'; -import type { ICustomLayoutFuc } from '../../ts-types/customLayout'; import type { BaseTableAPI, PivotTableProtected } from '../../ts-types/base-table'; import { getCellCornerRadius, getStyleTheme } from '../../core/tableHelper'; import { isPromise } from '../../tools/helper'; @@ -31,11 +29,11 @@ import { CartesianAxis } from '../../components/axis/axis'; import { createCheckboxCellGroup } from './cell-type/checkbox-cell'; // import type { PivotLayoutMap } from '../../layout/pivot-layout'; import type { PivotHeaderLayoutMap } from '../../layout/pivot-header-layout'; -import { resizeCellGroup } from './column-helper'; import { getHierarchyOffset } from '../utils/get-hierarchy-offset'; import { getQuadProps } from '../utils/padding'; import { convertInternal } from '../../tools/util'; import { updateCellContentHeight, updateCellContentWidth } from '../utils/text-icon-layout'; +import { isArray } from '@visactor/vutils'; export function createCell( type: ColumnTypeOption, @@ -747,3 +745,110 @@ function dealWithMergeCellSize( } } } + +export function resizeCellGroup( + cellGroup: Group, + rangeWidth: number, + rangeHeight: number, + range: CellRange, + table: BaseTableAPI +) { + const { col, row } = cellGroup; + const dx = -table.getColsWidth(range.start.col, col - 1); + const dy = -table.getRowsHeight(range.start.row, row - 1); + + cellGroup.forEachChildren((child: IGraphic) => { + child.setAttributes({ + dx: (child.attribute.dx ?? 0) + dx, + dy: (child.attribute.dy ?? 0) + dy + }); + }); + + const lineWidth = cellGroup.attribute.lineWidth; + const isLineWidthArray = isArray(lineWidth); + const newLineWidth = [0, 0, 0, 0]; + + if (col === range.start.col) { + newLineWidth[3] = isLineWidthArray ? lineWidth[3] : lineWidth; + } + if (row === range.start.row) { + newLineWidth[0] = isLineWidthArray ? lineWidth[0] : lineWidth; + } + if (col === range.end.col) { + newLineWidth[1] = isLineWidthArray ? lineWidth[1] : lineWidth; + } + if (row === range.end.row) { + newLineWidth[2] = isLineWidthArray ? lineWidth[2] : lineWidth; + } + + const widthChange = rangeWidth !== cellGroup.attribute.width; + const heightChange = rangeHeight !== cellGroup.attribute.height; + + cellGroup.setAttributes({ + width: rangeWidth, + height: rangeHeight, + strokeArrayWidth: newLineWidth + } as any); + + cellGroup.mergeStartCol = range.start.col; + cellGroup.mergeStartRow = range.start.row; + cellGroup.mergeEndCol = range.end.col; + cellGroup.mergeEndRow = range.end.row; + + return { + widthChange, + heightChange + }; +} + +export function getCustomCellMergeCustom(col: number, row: number, cellGroup: Group, table: BaseTableAPI) { + if (table.internalProps.customMergeCell) { + const customMerge = table.getCustomMerge(col, row); + if (customMerge) { + const { + range: customMergeRange, + text: customMergeText, + style: customMergeStyle, + customLayout: customMergeLayout, + customRender: customMergeRender + } = customMerge; + + if (customMergeLayout || customMergeRender) { + const customResult = dealWithCustom( + customMergeLayout, + customMergeRender, + customMergeRange.start.col, + customMergeRange.start.row, + table.getColsWidth(customMergeRange.start.col, customMergeRange.end.col), + table.getRowsHeight(customMergeRange.start.row, customMergeRange.end.row), + false, + table.heightMode === 'autoHeight', + [0, 0, 0, 0], + table + ); + + const customElementsGroup = customResult.elementsGroup; + + if (cellGroup.childrenCount > 0 && customElementsGroup) { + cellGroup.insertBefore(customElementsGroup, cellGroup.firstChild); + } else if (customElementsGroup) { + cellGroup.appendChild(customElementsGroup); + } + + const rangeHeight = table.getRowHeight(row); + const rangeWidth = table.getColWidth(col); + + const { width: contentWidth } = cellGroup.attribute; + const { height: contentHeight } = cellGroup.attribute; + cellGroup.contentWidth = contentWidth; + cellGroup.contentHeight = contentHeight; + + resizeCellGroup(cellGroup, rangeWidth, rangeHeight, customMergeRange, table); + + return customResult; + } + } + } + + return undefined; +} diff --git a/packages/vtable/src/scenegraph/group-creater/column-helper.ts b/packages/vtable/src/scenegraph/group-creater/column-helper.ts index 8ab56f01a..3621f1621 100644 --- a/packages/vtable/src/scenegraph/group-creater/column-helper.ts +++ b/packages/vtable/src/scenegraph/group-creater/column-helper.ts @@ -1,15 +1,14 @@ /* eslint-disable no-undef */ -import type { IGraphic, IThemeSpec } from '@src/vrender'; +import type { IThemeSpec } from '@src/vrender'; import type { CellLocation, CellRange, TextColumnDefine } from '../../ts-types'; import type { Group } from '../graphic/group'; import { getProp, getRawProp } from '../utils/get-prop'; import type { MergeMap } from '../scenegraph'; -import { createCell } from './cell-helper'; +import { createCell, resizeCellGroup } from './cell-helper'; import type { BaseTableAPI } from '../../ts-types/base-table'; import { getCellCornerRadius, getStyleTheme } from '../../core/tableHelper'; import { isPromise } from '../../tools/helper'; import { dealPromiseData } from '../utils/deal-promise-data'; -import { isArray } from '@visactor/vutils'; import { dealWithCustom } from '../component/custom'; /** * 创建复合列 同一列支持创建不同类型单元格 @@ -270,61 +269,6 @@ export function getColumnGroupTheme( return { theme: columnTheme, hasFunctionPros }; } -export function resizeCellGroup( - cellGroup: Group, - rangeWidth: number, - rangeHeight: number, - range: CellRange, - table: BaseTableAPI -) { - const { col, row } = cellGroup; - const dx = -table.getColsWidth(range.start.col, col - 1); - const dy = -table.getRowsHeight(range.start.row, row - 1); - - cellGroup.forEachChildren((child: IGraphic) => { - child.setAttributes({ - dx: (child.attribute.dx ?? 0) + dx, - dy: (child.attribute.dy ?? 0) + dy - }); - }); - - const lineWidth = cellGroup.attribute.lineWidth; - const isLineWidthArray = isArray(lineWidth); - const newLineWidth = [0, 0, 0, 0]; - - if (col === range.start.col) { - newLineWidth[3] = isLineWidthArray ? lineWidth[3] : lineWidth; - } - if (row === range.start.row) { - newLineWidth[0] = isLineWidthArray ? lineWidth[0] : lineWidth; - } - if (col === range.end.col) { - newLineWidth[1] = isLineWidthArray ? lineWidth[1] : lineWidth; - } - if (row === range.end.row) { - newLineWidth[2] = isLineWidthArray ? lineWidth[2] : lineWidth; - } - - const widthChange = rangeWidth !== cellGroup.attribute.width; - const heightChange = rangeHeight !== cellGroup.attribute.height; - - cellGroup.setAttributes({ - width: rangeWidth, - height: rangeHeight, - strokeArrayWidth: newLineWidth - } as any); - - cellGroup.mergeStartCol = range.start.col; - cellGroup.mergeStartRow = range.start.row; - cellGroup.mergeEndCol = range.end.col; - cellGroup.mergeEndRow = range.end.row; - - return { - widthChange, - heightChange - }; -} - function dealMerge(range: CellRange, mergeMap: MergeMap, table: BaseTableAPI, forceUpdate: boolean) { let cellWidth = 0; let cellHeight = 0; diff --git a/packages/vtable/src/scenegraph/layout/compute-col-width.ts b/packages/vtable/src/scenegraph/layout/compute-col-width.ts index ef06f55e8..7117c9821 100644 --- a/packages/vtable/src/scenegraph/layout/compute-col-width.ts +++ b/packages/vtable/src/scenegraph/layout/compute-col-width.ts @@ -624,14 +624,14 @@ function computeTextWidth(col: number, row: number, cellType: ColumnTypeOption, return maxWidth; } -function getCellRect(col: number, row: number, table: BaseTableAPI) { +function getCellRect(col: number, row: number, table: BaseTableAPI): any { return { left: 0, top: 0, right: table.getColWidth(col), bottom: table.getRowHeight(row), - width: 0, - height: 0 + width: null, // vrender 逻辑中通过判断null对flex的元素来自动计算宽高 + height: null }; } diff --git a/packages/vtable/src/scenegraph/layout/update-height.ts b/packages/vtable/src/scenegraph/layout/update-height.ts index 5326ed59a..598c7366a 100644 --- a/packages/vtable/src/scenegraph/layout/update-height.ts +++ b/packages/vtable/src/scenegraph/layout/update-height.ts @@ -8,12 +8,12 @@ import { getProp } from '../utils/get-prop'; import { getQuadProps } from '../utils/padding'; import { updateCellContentHeight } from '../utils/text-icon-layout'; import type { IProgressbarColumnBodyDefine } from '../../ts-types/list-table/define/progressbar-define'; -import { dealWithCustom, getCustomCellMergeCustom } from '../component/custom'; +import { dealWithCustom } from '../component/custom'; import { updateImageCellContentWhileResize } from '../group-creater/cell-type/image-cell'; import { getStyleTheme } from '../../core/tableHelper'; import { isMergeCellGroup } from '../utils/is-merge-cell-group'; import type { BaseTableAPI } from '../../ts-types/base-table'; -import { resizeCellGroup } from '../group-creater/column-helper'; +import { resizeCellGroup, getCustomCellMergeCustom } from '../group-creater/cell-helper'; import type { IGraphic } from '@src/vrender'; import { getCellMergeRange } from '../../tools/merge-range'; diff --git a/packages/vtable/src/scenegraph/layout/update-width.ts b/packages/vtable/src/scenegraph/layout/update-width.ts index c0c34d06b..6b9807d33 100644 --- a/packages/vtable/src/scenegraph/layout/update-width.ts +++ b/packages/vtable/src/scenegraph/layout/update-width.ts @@ -4,20 +4,19 @@ import { CartesianAxis } from '../../components/axis/axis'; import { getStyleTheme } from '../../core/tableHelper'; import type { BaseTableAPI } from '../../ts-types/base-table'; import type { IProgressbarColumnBodyDefine } from '../../ts-types/list-table/define/progressbar-define'; -import { dealWithCustom, getCustomCellMergeCustom } from '../component/custom'; +import { dealWithCustom } from '../component/custom'; import type { Group } from '../graphic/group'; -import type { Icon } from '../graphic/icon'; import { updateImageCellContentWhileResize } from '../group-creater/cell-type/image-cell'; import { createProgressBarCell } from '../group-creater/cell-type/progress-bar-cell'; import { createSparkLineCellGroup } from '../group-creater/cell-type/spark-line-cell'; -import { resizeCellGroup } from '../group-creater/column-helper'; +import { resizeCellGroup, getCustomCellMergeCustom } from '../group-creater/cell-helper'; import type { Scenegraph } from '../scenegraph'; import { getCellMergeInfo } from '../utils/get-cell-merge'; import { getProp } from '../utils/get-prop'; import { isMergeCellGroup } from '../utils/is-merge-cell-group'; import { getQuadProps } from '../utils/padding'; import { updateCellContentWidth } from '../utils/text-icon-layout'; -import { computeRowHeight, computeRowsHeight } from './compute-row-height'; +import { computeRowHeight } from './compute-row-height'; import { updateCellHeightForRow } from './update-height'; import { getHierarchyOffset } from '../utils/get-hierarchy-offset'; import { getCellMergeRange } from '../../tools/merge-range'; diff --git a/packages/vtable/src/scenegraph/scenegraph.ts b/packages/vtable/src/scenegraph/scenegraph.ts index a5fa857f6..a5dd686ef 100644 --- a/packages/vtable/src/scenegraph/scenegraph.ts +++ b/packages/vtable/src/scenegraph/scenegraph.ts @@ -1494,9 +1494,9 @@ export class Scenegraph { this.rowHeaderGroup, this.isPivot ? this.table.theme.rowHeaderStyle.frameStyle - : this.table.internalProps.transpose - ? this.table.theme.headerStyle.frameStyle - : this.table.theme.bodyStyle.frameStyle, + : // : this.table.internalProps.transpose + // ? this.table.theme.headerStyle.frameStyle + this.table.theme.bodyStyle.frameStyle, this.rowHeaderGroup.role, isListTableWithFrozen ? [true, false, true, true] : undefined ); diff --git a/packages/vtable/src/state/sort/index.ts b/packages/vtable/src/state/sort/index.ts index 6fdc7a3f1..149e1f697 100644 --- a/packages/vtable/src/state/sort/index.ts +++ b/packages/vtable/src/state/sort/index.ts @@ -10,7 +10,7 @@ import type { BaseTableAPI } from '../../ts-types/base-table'; * @param {BaseTableAPI} table * @return {*} */ -export function dealSort(col: number, row: number, table: ListTableAPI) { +export function dealSort(col: number, row: number, table: ListTableAPI, event: Event) { //是击中的sort按钮才进行排序 let range1 = null; let tableState: SortState; @@ -53,8 +53,9 @@ export function dealSort(col: number, row: number, table: ListTableAPI) { order: 'normal' }; } + (tableState as SortState & { event: Event }).event = event; // 如果用户监听SORT_CLICK事件的回调函数返回false 则不执行内部排序逻辑 - const sortEventReturns = table.fireListeners(TABLE_EVENT_TYPE.SORT_CLICK, tableState); + const sortEventReturns = table.fireListeners(TABLE_EVENT_TYPE.SORT_CLICK, tableState as SortState & { event: Event }); if (sortEventReturns.includes(false)) { return; } diff --git a/packages/vtable/src/state/state.ts b/packages/vtable/src/state/state.ts index cbbe4a4df..8a8526421 100644 --- a/packages/vtable/src/state/state.ts +++ b/packages/vtable/src/state/state.ts @@ -788,10 +788,11 @@ export class StateManager { } } - triggerDropDownMenu(col: number, row: number, x: number, y: number) { + triggerDropDownMenu(col: number, row: number, x: number, y: number, event: Event) { this.table.fireListeners(TABLE_EVENT_TYPE.DROPDOWN_ICON_CLICK, { col, - row + row, + event }); if (this.menu.isShow) { this.hideMenu(); @@ -935,7 +936,7 @@ export class StateManager { } return false; } - triggerSort(col: number, row: number, iconMark: Icon) { + triggerSort(col: number, row: number, iconMark: Icon, event: Event) { if (this.table.isPivotTable()) { // 透视表不执行sort操作 const order = (this.table as PivotTableAPI).getPivotSortState(col, row); @@ -945,7 +946,8 @@ export class StateManager { row: row, order: order || 'normal', dimensionInfo: (this.table.internalProps.layoutMap as PivotHeaderLayoutMap).getPivotDimensionInfo(col, row), - cellLocation: this.table.getCellLocation(col, row) + cellLocation: this.table.getCellLocation(col, row), + event }); return; } @@ -953,7 +955,7 @@ export class StateManager { const oldSortCol = this.sort.col; const oldSortRow = this.sort.row; // 执行sort - dealSort(col, row, this.table as ListTableAPI); + dealSort(col, row, this.table as ListTableAPI, event); this.sort.col = col; this.sort.row = row; diff --git a/packages/vtable/src/themes/theme.ts b/packages/vtable/src/themes/theme.ts index bec33b2af..fce2ee88c 100644 --- a/packages/vtable/src/themes/theme.ts +++ b/packages/vtable/src/themes/theme.ts @@ -376,7 +376,7 @@ export class TableTheme implements ITableThemeDefine { {}, this.defaultStyle, superTheme.rowHeaderStyle, - obj.rowHeaderStyle // ?? obj.headerStyle + obj.rowHeaderStyle ?? obj.headerStyle ); this._rowHeader = this.getStyle(header); } diff --git a/packages/vtable/src/ts-types/base-table.ts b/packages/vtable/src/ts-types/base-table.ts index 174edc80a..f0db2dadc 100644 --- a/packages/vtable/src/ts-types/base-table.ts +++ b/packages/vtable/src/ts-types/base-table.ts @@ -158,7 +158,7 @@ export interface IBaseTableProtected { /** 内置下拉菜单的全局设置项 目前只针对基本表格有效 会对每个表头单元格开启默认的下拉菜单功能。代替原来的option.dropDownMenu*/ defaultHeaderMenuItems?: MenuListItem[]; /** 右键菜单。代替原来的option.contextmenu */ - contextMenuItems?: MenuListItem[] | ((field: FieldDef, row: number) => MenuListItem[]); + contextMenuItems?: MenuListItem[] | ((field: FieldDef, row: number, col: number) => MenuListItem[]); /** 设置选中状态的菜单。代替原来的option.dropDownMenuHighlight */ dropDownMenuHighlight?: DropDownMenuHighlightInfo[]; }; @@ -301,7 +301,7 @@ export interface BaseTableConstructorOptions { /** 内置下拉菜单的全局设置项 目前只针对基本表格有效 会对每个表头单元格开启默认的下拉菜单功能。代替原来的option.dropDownMenu*/ defaultHeaderMenuItems?: MenuListItem[]; /** 右键菜单。代替原来的option.contextmenu */ - contextMenuItems?: MenuListItem[] | ((field: string, row: number) => MenuListItem[]); + contextMenuItems?: MenuListItem[] | ((field: string, row: number, col: number) => MenuListItem[]); /** 设置选中状态的菜单。代替原来的option.dropDownMenuHighlight */ dropDownMenuHighlight?: DropDownMenuHighlightInfo[]; }; @@ -509,12 +509,12 @@ export interface BaseTableAPI { setMaxColWidth: (col: number, maxwidth: string | number) => void; getMinColWidth: (col: number) => number; setMinColWidth: (col: number, minwidth: string | number) => void; - getCellRect: (col: number, row: number) => RectProps; - getCellRelativeRect: (col: number, row: number) => RectProps; - getCellsRect: (startCol: number, startRow: number, endCol: number, endRow: number) => RectProps; - getCellRangeRect: (cellRange: CellRange | CellAddress) => RectProps; - getCellRangeRelativeRect: (cellRange: CellRange | CellAddress) => RectProps; - getVisibleCellRangeRelativeRect: (cellRange: CellRange | CellAddress) => RectProps; + getCellRect: (col: number, row: number) => Rect; + getCellRelativeRect: (col: number, row: number) => Rect; + getCellsRect: (startCol: number, startRow: number, endCol: number, endRow: number) => Rect; + getCellRangeRect: (cellRange: CellRange | CellAddress) => Rect; + getCellRangeRelativeRect: (cellRange: CellRange | CellAddress) => Rect; + getVisibleCellRangeRelativeRect: (cellRange: CellRange | CellAddress) => Rect; isFrozenCell: (col: number, row: number) => { row: boolean; col: boolean } | null; getRowAt: (absoluteY: number) => { top: number; row: number; bottom: number }; getColAt: (absoluteX: number) => { left: number; col: number; right: number }; diff --git a/packages/vtable/src/ts-types/common.ts b/packages/vtable/src/ts-types/common.ts index b9910d0bb..3647ca810 100644 --- a/packages/vtable/src/ts-types/common.ts +++ b/packages/vtable/src/ts-types/common.ts @@ -1,6 +1,6 @@ import type { ColumnTypeOption } from './column'; -import type { ColumnData } from './list-table/layout-map/api'; import type { CellLocation, FieldData, FieldDef } from './table-engine'; +import type { Rect } from '../tools/Rect'; export type MaybePromise = T | Promise; @@ -49,7 +49,7 @@ export type CellInfo = { /**单元格行列表头paths */ cellHeaderPaths?: ICellHeaderPaths; /**单元格的位置 */ - cellRange?: RectProps; + cellRange?: Rect; /**整条数据-原始数据 */ originData?: any; /**format之后的值 */ diff --git a/packages/vtable/src/ts-types/events.ts b/packages/vtable/src/ts-types/events.ts index 192d83207..b88454bea 100644 --- a/packages/vtable/src/ts-types/events.ts +++ b/packages/vtable/src/ts-types/events.ts @@ -82,11 +82,12 @@ export interface TableEventHandlersEventArgumentMap { scrollRatioY?: number; }; resize_column: { col: number; colWidth: number }; - resize_column_end: { col: number; columns: number[] }; + resize_column_end: { col: number; colWidths: number[] }; change_header_position: { source: CellAddress; target: CellAddress }; sort_click: { field: FieldDef; order: SortOrder; + event: Event; }; freeze_click: { col: number; row: number; fields: FieldDef[]; colCount: number }; dropdown_menu_click: DropDownMenuEventArgs; @@ -97,7 +98,7 @@ export interface TableEventHandlersEventArgumentMap { copy_data: { cellRange: CellRange[]; copyData: string }; drillmenu_click: DrillMenuEventInfo; - dropdown_icon_click: CellAddress; + dropdown_icon_click: CellAddress & { event: Event }; dropdown_menu_clear: CellAddress; show_menu: { @@ -116,6 +117,7 @@ export interface TableEventHandlersEventArgumentMap { y: number; funcType?: IconFuncTypeEnum | string; icon: Icon; + event: Event; }; pivot_sort_click: { @@ -124,6 +126,7 @@ export interface TableEventHandlersEventArgumentMap { order: SortOrder; dimensionInfo: IDimensionInfo[]; cellLocation: CellLocation; + event: Event; }; tree_hierarchy_state_change: { col: number; @@ -164,6 +167,7 @@ export interface DrillMenuEventInfo { drillUp: boolean; col: number; row: number; + event: Event; } export interface TableEventHandlersReturnMap { selected_cell: void; diff --git a/packages/vtable/src/ts-types/list-table/layout-map/api.ts b/packages/vtable/src/ts-types/list-table/layout-map/api.ts index bea767c98..1c9660a66 100644 --- a/packages/vtable/src/ts-types/list-table/layout-map/api.ts +++ b/packages/vtable/src/ts-types/list-table/layout-map/api.ts @@ -237,7 +237,7 @@ interface LayoutMapAPI { // getBodyLayoutRangeById: (id: LayoutObjectId) => CellRange; getHeaderCellAdressById: (id: number) => CellAddress | undefined; getHeaderCellAddressByField: (field: string) => CellAddress | undefined; - getRecordIndexByCell: (col: number, row: number) => number; + getRecordShowIndexByCell: (col: number, row: number) => number; getRecordStartRowByRecordIndex: (index: number) => number; /** 从定义中获取一列配置项width的定义值 */ getColumnWidthDefined: (col: number) => WidthData; diff --git a/packages/vtable/src/ts-types/menu.ts b/packages/vtable/src/ts-types/menu.ts index 62ec392d4..9eb7834fc 100644 --- a/packages/vtable/src/ts-types/menu.ts +++ b/packages/vtable/src/ts-types/menu.ts @@ -89,4 +89,5 @@ export type DropDownMenuEventInfo = { cellHeaderPaths?: ICellHeaderPaths; cellLocation: CellLocation; + event: Event; }; diff --git a/packages/vtable/src/ts-types/table-engine.ts b/packages/vtable/src/ts-types/table-engine.ts index 6e2fe1695..1b0a10093 100644 --- a/packages/vtable/src/ts-types/table-engine.ts +++ b/packages/vtable/src/ts-types/table-engine.ts @@ -104,7 +104,7 @@ export interface DataSourceAPI { updatePagination: (pagination: IPagination) => void; getIndexKey: (index: number) => number | number[]; /** 数据是否为树形结构 且可以展开收起 */ - enableHierarchyState: boolean; + hierarchyExpandLevel: number; } export interface SortState {