From d52dcf54bd798f0e5c89f8396d9ea413c054c948 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Mon, 19 Aug 2024 07:57:22 +0000 Subject: [PATCH 01/51] docs: generate changelog of release v1.6.1 --- docs/assets/changelog/en/release.md | 31 +++++++++++++++++++++++++++++ docs/assets/changelog/zh/release.md | 31 +++++++++++++++++++++++++++++ 2 files changed, 62 insertions(+) diff --git a/docs/assets/changelog/en/release.md b/docs/assets/changelog/en/release.md index 25c217cc7..1b88eebea 100644 --- a/docs/assets/changelog/en/release.md +++ b/docs/assets/changelog/en/release.md @@ -1,3 +1,34 @@ +# v1.6.1 + +2024-08-19 + + +**🆕 New feature** + +- **@visactor/vtable**: add option forceShowHeader +- **@visactor/vtable**: frameStyle cornerRadius support array type [#2207](https://github.com/VisActor/VTable/issues/2207) +- **@visactor/vtable**: add table releated components in react-vtable +- **@visactor/vtable**: add enum in textStick config +- **@visactor/vtable**: add frozenRowCount in transpose table [#2182](https://github.com/VisActor/VTable/issues/2182) +- **@visactor/vtable**: add excelJSWorksheetCallback config in vtable-export +- **@visactor/vtable**: add group function + +**🐛 Bug fix** + +- **@visactor/vtable**: corner header display dimension name in some case [#2180](https://github.com/VisActor/VTable/issues/2180) +- **@visactor/vtable**: frameStyle borrerLineWidth set array, table render positon error [#2200](https://github.com/VisActor/VTable/issues/2200) +- **@visactor/vtable**: fix icon margin error in update size [#2206](https://github.com/VisActor/VTable/issues/2206) +- **@visactor/vtable**: fix react custom layout component container height +- **@visactor/vtable**: fix jsx customLayout size compute mode [#2192](https://github.com/VisActor/VTable/issues/2192) +- **@visactor/vtable**: add default color in vtable-export +- **@visactor/vtable**: fix row-series cell type [#2188](https://github.com/VisActor/VTable/issues/2188) + +**🔨 Refactor** + +- **@visactor/vtable**: supplement backgroundColor for editor [#1518](https://github.com/VisActor/VTable/issues/1518) + +[more detail about v1.6.1](https://github.com/VisActor/VTable/releases/tag/v1.6.1) + # v1.5.6 2024-08-08 diff --git a/docs/assets/changelog/zh/release.md b/docs/assets/changelog/zh/release.md index 5ee80c2fe..89a6afb5c 100644 --- a/docs/assets/changelog/zh/release.md +++ b/docs/assets/changelog/zh/release.md @@ -1,3 +1,34 @@ +# v1.6.1 + +2024-08-19 + + +**🆕 新增功能** + +- **@visactor/vtable**: add option forceShowHeader +- **@visactor/vtable**: frameStyle cornerRadius support array type [#2207](https://github.com/VisActor/VTable/issues/2207) +- **@visactor/vtable**: add table releated components in react-vtable +- **@visactor/vtable**: add enum in textStick config +- **@visactor/vtable**: add frozenRowCount in transpose table [#2182](https://github.com/VisActor/VTable/issues/2182) +- **@visactor/vtable**: add excelJSWorksheetCallback config in vtable-export +- **@visactor/vtable**: add group function + +**🐛 功能修复** + +- **@visactor/vtable**: corner header display dimension name in some case [#2180](https://github.com/VisActor/VTable/issues/2180) +- **@visactor/vtable**: frameStyle borrerLineWidth set array, table render positon error [#2200](https://github.com/VisActor/VTable/issues/2200) +- **@visactor/vtable**: fix icon margin error in update size [#2206](https://github.com/VisActor/VTable/issues/2206) +- **@visactor/vtable**: fix react custom layout component container height +- **@visactor/vtable**: fix jsx customLayout size compute mode [#2192](https://github.com/VisActor/VTable/issues/2192) +- **@visactor/vtable**: add default color in vtable-export +- **@visactor/vtable**: fix row-series cell type [#2188](https://github.com/VisActor/VTable/issues/2188) + +**🔨 功能重构** + +- **@visactor/vtable**: supplement backgroundColor for editor [#1518](https://github.com/VisActor/VTable/issues/1518) + +[更多详情请查看 v1.6.1](https://github.com/VisActor/VTable/releases/tag/v1.6.1) + # v1.5.6 2024-08-08 From 54c4e1e9dc3d34dadac8f44ca510144c9ed899b8 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Mon, 19 Aug 2024 17:01:35 +0800 Subject: [PATCH 02/51] docs: translate release notes --- docs/assets/changelog/zh/release.md | 46 ++++++++++++++--------------- packages/vtable/CHANGELOG.json | 14 +-------- packages/vtable/CHANGELOG.md | 7 ----- 3 files changed, 24 insertions(+), 43 deletions(-) diff --git a/docs/assets/changelog/zh/release.md b/docs/assets/changelog/zh/release.md index 89a6afb5c..97bf48b16 100644 --- a/docs/assets/changelog/zh/release.md +++ b/docs/assets/changelog/zh/release.md @@ -4,28 +4,28 @@ **🆕 新增功能** - -- **@visactor/vtable**: add option forceShowHeader -- **@visactor/vtable**: frameStyle cornerRadius support array type [#2207](https://github.com/VisActor/VTable/issues/2207) -- **@visactor/vtable**: add table releated components in react-vtable -- **@visactor/vtable**: add enum in textStick config -- **@visactor/vtable**: add frozenRowCount in transpose table [#2182](https://github.com/VisActor/VTable/issues/2182) -- **@visactor/vtable**: add excelJSWorksheetCallback config in vtable-export -- **@visactor/vtable**: add group function + +- **@visactor/vtable**: 新增分组渲染功能 +- **@visactor/vtable**: react-vtable中增加表格相关组件 +- **@visactor/vtable**: 新增`forceShowHeader`配置 +- **@visactor/vtable**: `frameStyle`中`cornerRadius`支持数组配置 [#2207](https://github.com/VisActor/VTable/issues/2207) +- **@visactor/vtable**: `textStick`配置支持配置方向 +- **@visactor/vtable**: 转置列表支持`frozenRowCount`配置 [#2182](https://github.com/VisActor/VTable/issues/2182) +- **@visactor/vtable**: `vtable-export`增加`excelJSWorksheetCallback`配置 **🐛 功能修复** - -- **@visactor/vtable**: corner header display dimension name in some case [#2180](https://github.com/VisActor/VTable/issues/2180) -- **@visactor/vtable**: frameStyle borrerLineWidth set array, table render positon error [#2200](https://github.com/VisActor/VTable/issues/2200) -- **@visactor/vtable**: fix icon margin error in update size [#2206](https://github.com/VisActor/VTable/issues/2206) -- **@visactor/vtable**: fix react custom layout component container height -- **@visactor/vtable**: fix jsx customLayout size compute mode [#2192](https://github.com/VisActor/VTable/issues/2192) -- **@visactor/vtable**: add default color in vtable-export -- **@visactor/vtable**: fix row-series cell type [#2188](https://github.com/VisActor/VTable/issues/2188) + +- **@visactor/vtable**: 修复角头显示维度名称问题 [#2180](https://github.com/VisActor/VTable/issues/2180) +- **@visactor/vtable**: 修复`frameStyle`中`borrerLineWidth`配置为数组时渲染问题 [#2200](https://github.com/VisActor/VTable/issues/2200) +- **@visactor/vtable**: 修复`icon margin`在尺寸更新时的问题 [#2206](https://github.com/VisActor/VTable/issues/2206) +- **@visactor/vtable**: 修复`react custom layout component`容器高度问题 +- **@visactor/vtable**: 修复`jsx customLayout`尺寸计算问题 [#2192](https://github.com/VisActor/VTable/issues/2192) +- **@visactor/vtable**: `vtable-export`增加默认颜色 +- **@visactor/vtable**: 修复`row-series`单元格类型 [#2188](https://github.com/VisActor/VTable/issues/2188) **🔨 功能重构** - -- **@visactor/vtable**: supplement backgroundColor for editor [#1518](https://github.com/VisActor/VTable/issues/1518) + +- **@visactor/vtable**: 编辑器组件支持`backgroundColor`配置 [#1518](https://github.com/VisActor/VTable/issues/1518) [更多详情请查看 v1.6.1](https://github.com/VisActor/VTable/releases/tag/v1.6.1) @@ -35,13 +35,13 @@ **🆕 新增功能** - -- **@visactor/vtable**: add canvas & viewbox config + +- **@visactor/vtable**: 新增canvas & viewbox配置 **🐛 功能修复** - -- **@visactor/vtable**: fix released async problem [#2145](https://github.com/VisActor/VTable/issues/2145) - + +- **@visactor/vtable**: 修复异步释放问题 [#2145](https://github.com/VisActor/VTable/issues/2145) + [更多详情请查看 v1.5.6](https://github.com/VisActor/VTable/releases/tag/v1.5.6) diff --git a/packages/vtable/CHANGELOG.json b/packages/vtable/CHANGELOG.json index 5b632689a..699ffb9e3 100644 --- a/packages/vtable/CHANGELOG.json +++ b/packages/vtable/CHANGELOG.json @@ -5,18 +5,6 @@ "version": "1.6.1", "tag": "@visactor/vtable_v1.6.1", "date": "Mon, 19 Aug 2024 08:06:44 GMT", - "comments": { - "minor": [ - { - "comment": "chore: release 1.6.1" - } - ] - } - }, - { - "version": "1.6.0", - "tag": "@visactor/vtable_v1.5.7", - "date": "Mon, 19 Aug 2024 07:36:42 GMT", "comments": { "none": [ { @@ -2605,4 +2593,4 @@ } } ] -} +} \ No newline at end of file diff --git a/packages/vtable/CHANGELOG.md b/packages/vtable/CHANGELOG.md index bfcae2cf9..80760fb56 100644 --- a/packages/vtable/CHANGELOG.md +++ b/packages/vtable/CHANGELOG.md @@ -7,13 +7,6 @@ Mon, 19 Aug 2024 08:06:44 GMT ### Minor changes -- chore: release 1.6.1 - -## 1.6.0 -Mon, 19 Aug 2024 07:36:42 GMT - -### Minor changes - - feat: add group function ### Updates From 2e6bab6df062d660aad635819ae540d4d4923e51 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Wed, 21 Aug 2024 15:34:51 +0800 Subject: [PATCH 03/51] refactor: scroll event add argument #2249 --- packages/vtable/src/dataset/dataset-pivot-table.ts | 1 + packages/vtable/src/event/listener/container-dom.ts | 2 +- packages/vtable/src/event/scroll.ts | 4 ++-- packages/vtable/src/state/state.ts | 8 ++++++-- packages/vtable/src/ts-types/events.ts | 1 + packages/vtable/src/ts-types/table-engine.ts | 3 +++ 6 files changed, 14 insertions(+), 5 deletions(-) diff --git a/packages/vtable/src/dataset/dataset-pivot-table.ts b/packages/vtable/src/dataset/dataset-pivot-table.ts index 49945decf..938bc3749 100644 --- a/packages/vtable/src/dataset/dataset-pivot-table.ts +++ b/packages/vtable/src/dataset/dataset-pivot-table.ts @@ -411,6 +411,7 @@ export class DatasetForPivotTable { return agg ? agg : { + key: '', className: '', push() { // do nothing diff --git a/packages/vtable/src/event/listener/container-dom.ts b/packages/vtable/src/event/listener/container-dom.ts index 02979cb27..5d3df53c6 100644 --- a/packages/vtable/src/event/listener/container-dom.ts +++ b/packages/vtable/src/event/listener/container-dom.ts @@ -24,7 +24,7 @@ export function bindContainerDomListener(eventManager: EventManager) { eventManager.dealTableHover(); // eventManager.dealTableSelect(); }); - handler.on(table.getElement(), 'wheel', (e: WheelEvent) => { + handler.on(table.canvas, 'wheel', (e: WheelEvent) => { table.editorManager?.completeEdit(); if (table.eventManager._enableTableScroll) { handleWhell(e, stateManager); diff --git a/packages/vtable/src/event/scroll.ts b/packages/vtable/src/event/scroll.ts index 9078f2aad..c1a18975c 100644 --- a/packages/vtable/src/event/scroll.ts +++ b/packages/vtable/src/event/scroll.ts @@ -22,11 +22,11 @@ export function handleWhell(event: WheelEvent, state: StateManager, isWheelEvent } if (optimizedDeltaX) { - state.setScrollLeft(state.scroll.horizontalBarPos + optimizedDeltaX); + state.setScrollLeft(state.scroll.horizontalBarPos + optimizedDeltaX, event); state.showHorizontalScrollBar(true); } if (optimizedDeltaY) { - state.setScrollTop(state.scroll.verticalBarPos + optimizedDeltaY); + state.setScrollTop(state.scroll.verticalBarPos + optimizedDeltaY, event); state.showVerticalScrollBar(true); } isWheelEvent && state.resetInteractionState(); diff --git a/packages/vtable/src/state/state.ts b/packages/vtable/src/state/state.ts index 38aa3e043..d9e213a6c 100644 --- a/packages/vtable/src/state/state.ts +++ b/packages/vtable/src/state/state.ts @@ -852,6 +852,7 @@ export class StateManager { // this.updateSelectPos(-1, -1); this.table.fireListeners(TABLE_EVENT_TYPE.SCROLL, { + event: undefined, scrollTop: this.scroll.verticalBarPos, scrollLeft: this.scroll.horizontalBarPos, scrollHeight: this.table.theme.scrollStyle?.width, @@ -886,6 +887,7 @@ export class StateManager { this.updateHoverPos(-1, -1); // this.updateSelectPos(-1, -1); this.table.fireListeners(TABLE_EVENT_TYPE.SCROLL, { + event: undefined, scrollTop: this.scroll.verticalBarPos, scrollLeft: this.scroll.horizontalBarPos, scrollHeight: this.table.theme.scrollStyle?.width, @@ -900,7 +902,7 @@ export class StateManager { this.checkHorizontalScrollBarEnd(); } } - setScrollTop(top: number) { + setScrollTop(top: number, event?: WheelEvent) { // 矫正top值范围 const totalHeight = this.table.getAllRowsHeight(); // _disableColumnAndRowSizeRound环境中，可能出现 @@ -929,6 +931,7 @@ export class StateManager { if (oldVerticalBarPos !== top) { this.table.fireListeners(TABLE_EVENT_TYPE.SCROLL, { + event, scrollTop: this.scroll.verticalBarPos, scrollLeft: this.scroll.horizontalBarPos, scrollHeight: this.table.theme.scrollStyle?.width, @@ -942,7 +945,7 @@ export class StateManager { this.checkVerticalScrollBarEnd(); } } - setScrollLeft(left: number) { + setScrollLeft(left: number, wheelEvent?: WheelEvent) { const oldScrollLeft = this.table.scrollLeft; // 矫正left值范围 const totalWidth = this.table.getAllColsWidth(); @@ -976,6 +979,7 @@ export class StateManager { if (oldHorizontalBarPos !== left) { this.table.fireListeners(TABLE_EVENT_TYPE.SCROLL, { + event: wheelEvent, scrollTop: this.scroll.verticalBarPos, scrollLeft: this.scroll.horizontalBarPos, scrollHeight: this.table.theme.scrollStyle?.width, diff --git a/packages/vtable/src/ts-types/events.ts b/packages/vtable/src/ts-types/events.ts index a3a61a8f3..b61f3121e 100644 --- a/packages/vtable/src/ts-types/events.ts +++ b/packages/vtable/src/ts-types/events.ts @@ -75,6 +75,7 @@ export interface TableEventHandlersEventArgumentMap { contextmenu_cell: MousePointerMultiCellEvent; keydown: KeydownEvent; scroll: { + event: WheelEvent; scrollLeft: number; scrollTop: number; scrollWidth: number; diff --git a/packages/vtable/src/ts-types/table-engine.ts b/packages/vtable/src/ts-types/table-engine.ts index 4d6341918..df2934ae0 100644 --- a/packages/vtable/src/ts-types/table-engine.ts +++ b/packages/vtable/src/ts-types/table-engine.ts @@ -388,6 +388,9 @@ export interface PivotTableConstructorOptions extends BaseTableConstructorOption editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor); /** 全局设置表头编辑器 */ headerEditor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor); + + /** 编辑触发时机 双击事件 单击事件 api手动开启编辑 或者 鼠标按下新值即可开启编辑。默认为双击'doubleclick' */ + editCellTrigger?: 'doubleclick' | 'click' | 'api' | 'keydown' | ('doubleclick' | 'click' | 'api' | 'keydown')[]; /** 是否需要补充指标节点到对应的自定义表头中如rowTree或者columnTree. 默认为true */ supplementIndicatorNodes?: boolean; } From 71f7025039f3498aa0dd06d44824e52828132fc2 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Wed, 21 Aug 2024 15:42:53 +0800 Subject: [PATCH 04/51] docs: update changlog of rush --- ...ltiple-cells-edit-first-cell_2024-08-21-07-42.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@visactor/vtable/2248-bug-when-selecting-multiple-cells-edit-first-cell_2024-08-21-07-42.json diff --git a/common/changes/@visactor/vtable/2248-bug-when-selecting-multiple-cells-edit-first-cell_2024-08-21-07-42.json b/common/changes/@visactor/vtable/2248-bug-when-selecting-multiple-cells-edit-first-cell_2024-08-21-07-42.json new file mode 100644 index 000000000..788e40e65 --- /dev/null +++ b/common/changes/@visactor/vtable/2248-bug-when-selecting-multiple-cells-edit-first-cell_2024-08-21-07-42.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "refactor: scroll event add argument #2249\n\n", + "type": "none", + "packageName": "@visactor/vtable" + } + ], + "packageName": "@visactor/vtable", + "email": "892739385@qq.com" +} \ No newline at end of file From 4cb725f01452c9ebc7e1d9e39d25b7d35d3a1c64 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Thu, 22 Aug 2024 12:13:25 +0800 Subject: [PATCH 05/51] docs: supplement export excel docs --- .../en/export/table-export-ignore-icon.md | 129 ++++++++--------- .../zh/export/table-export-ignore-icon.md | 131 +++++++++--------- docs/assets/guide/en/export/excel.md | 31 +++-- docs/assets/guide/zh/export/excel.md | 46 +++--- 4 files changed, 185 insertions(+), 152 deletions(-) diff --git a/docs/assets/demo/en/export/table-export-ignore-icon.md b/docs/assets/demo/en/export/table-export-ignore-icon.md index 2640825e1..3e311af6b 100644 --- a/docs/assets/demo/en/export/table-export-ignore-icon.md +++ b/docs/assets/demo/en/export/table-export-ignore-icon.md @@ -27,47 +27,47 @@ By default, when the cell has an icon, the icon and text will be treated as an i const data = [ { 类别: '办公用品', - 销售额: '129.696', - 数量: '2', - 利润: '-60.704', + 销售额: 129.696, + 数量: 2, + 利润: -60.704, children: [ { 类别: '信封', // 对应原子类别 - 销售额: '125.44', - 数量: '2', - 利润: '42.56', + 销售额: 125.44, + 数量: 2, + 利润: 42.56, children: [ { 类别: '黄色信封', - 销售额: '125.44', - 数量: '2', - 利润: '42.56' + 销售额: 125.44, + 数量: 2, + 利润: 42.56 }, { 类别: '白色信封', - 销售额: '1375.92', - 数量: '3', - 利润: '550.2' + 销售额: 1375.92, + 数量: 3, + 利润: 550.2 } ] }, { 类别: '器具', // 对应原子类别 - 销售额: '1375.92', - 数量: '3', - 利润: '550.2', + 销售额: 1375.92, + 数量: 3, + 利润: 550.2, children: [ { 类别: '订书机', - 销售额: '125.44', - 数量: '2', - 利润: '42.56' + 销售额: 125.44, + 数量: 2, + 利润: 42.56 }, { 类别: '计算器', - 销售额: '1375.92', - 数量: '3', - 利润: '550.2' + 销售额: 1375.92, + 数量: 3, + 利润: 550.2 } ] } @@ -75,79 +75,79 @@ const data = [ }, { 类别: '技术', - 销售额: '229.696', - 数量: '20', - 利润: '90.704', + 销售额: 229.696, + 数量: 20, + 利润: 90.704, children: [ { 类别: '设备', // 对应原子类别 - 销售额: '225.44', - 数量: '5', - 利润: '462.56' + 销售额: 225.44, + 数量: 5, + 利润: 462.56 }, { 类别: '配件', // 对应原子类别 - 销售额: '375.92', - 数量: '8', - 利润: '550.2' + 销售额: 375.92, + 数量: 8, + 利润: 550.2 }, { 类别: '复印机', // 对应原子类别 - 销售额: '425.44', - 数量: '7', - 利润: '342.56' + 销售额: 425.44, + 数量: 7, + 利润: 342.56 }, { 类别: '电话', // 对应原子类别 - 销售额: '175.92', - 数量: '6', - 利润: '750.2' + 销售额: 175.92, + 数量: 6, + 利润: 750.2 } ] }, { 类别: '家具', - 销售额: '129.696', - 数量: '2', - 利润: '-60.704', + 销售额: 129.696, + 数量: 2, + 利润: -60.704, children: [ { 类别: '桌子', // 对应原子类别 - 销售额: '125.44', - 数量: '2', - 利润: '42.56', + 销售额: 125.44, + 数量: 2, + 利润: 42.56, children: [ { 类别: '黄色桌子', - 销售额: '125.44', - 数量: '2', - 利润: '42.56' + 销售额: 125.44, + 数量: 2, + 利润: 42.56 }, { 类别: '白色桌子', - 销售额: '1375.92', - 数量: '3', - 利润: '550.2' + 销售额: 1375.92, + 数量: 3, + 利润: 550.2 } ] }, { 类别: '椅子', // 对应原子类别 - 销售额: '1375.92', - 数量: '3', - 利润: '550.2', + 销售额: 1375.92, + 数量: 3, + 利润: 550.2, children: [ { 类别: '老板椅', - 销售额: '125.44', - 数量: '2', - 利润: '42.56' + 销售额: 125.44, + 数量: 2, + 利润: 42.56 }, { 类别: '沙发椅', - 销售额: '1375.92', - 数量: '3', - 利润: '550.2' + 销售额: 1375.92, + 数量: 3, + 利润: 550.2 } ] } @@ -155,9 +155,9 @@ const data = [ }, { 类别: '生活家电（懒加载）', - 销售额: '229.696', - 数量: '20', - 利润: '90.704' + 销售额: 229.696, + 数量: 20, + 利润: 90.704 } ]; const option = { @@ -233,9 +233,12 @@ function bindExport() { exportExcelButton.addEventListener('click', async () => { if (window.tableInstance) { - downloadExcel(await exportVTableToExcel(window.tableInstance, { - ignoreIcon: true - }), 'export'); + downloadExcel( + await exportVTableToExcel(window.tableInstance, { + ignoreIcon: true + }), + 'export' + ); } }); } diff --git a/docs/assets/demo/zh/export/table-export-ignore-icon.md b/docs/assets/demo/zh/export/table-export-ignore-icon.md index 4f92b790b..1c0577e0c 100644 --- a/docs/assets/demo/zh/export/table-export-ignore-icon.md +++ b/docs/assets/demo/zh/export/table-export-ignore-icon.md @@ -10,7 +10,7 @@ link: '../../guide/export/excel' # 表格导出（忽略图标） -默认情况下，单元格中有图标时，图标和文字会统一当做图片被导出；如果不需要导出图标，可以设置`ignoreIcon`为true，只输出文字。 +默认情况下，单元格中有图标时，图标和文字会统一当做图片被导出；如果不需要导出图标，可以设置`ignoreIcon`为 true，只输出文字。 ## 代码演示 @@ -27,47 +27,47 @@ link: '../../guide/export/excel' const data = [ { 类别: '办公用品', - 销售额: '129.696', - 数量: '2', - 利润: '-60.704', + 销售额: 129.696, + 数量: 2, + 利润: -60.704, children: [ { 类别: '信封', // 对应原子类别 - 销售额: '125.44', - 数量: '2', - 利润: '42.56', + 销售额: 125.44, + 数量: 2, + 利润: 42.56, children: [ { 类别: '黄色信封', - 销售额: '125.44', - 数量: '2', - 利润: '42.56' + 销售额: 125.44, + 数量: 2, + 利润: 42.56 }, { 类别: '白色信封', - 销售额: '1375.92', - 数量: '3', - 利润: '550.2' + 销售额: 1375.92, + 数量: 3, + 利润: 550.2 } ] }, { 类别: '器具', // 对应原子类别 - 销售额: '1375.92', - 数量: '3', - 利润: '550.2', + 销售额: 1375.92, + 数量: 3, + 利润: 550.2, children: [ { 类别: '订书机', - 销售额: '125.44', - 数量: '2', - 利润: '42.56' + 销售额: 125.44, + 数量: 2, + 利润: 42.56 }, { 类别: '计算器', - 销售额: '1375.92', - 数量: '3', - 利润: '550.2' + 销售额: 1375.92, + 数量: 3, + 利润: 550.2 } ] } @@ -75,79 +75,79 @@ const data = [ }, { 类别: '技术', - 销售额: '229.696', - 数量: '20', - 利润: '90.704', + 销售额: 229.696, + 数量: 20, + 利润: 90.704, children: [ { 类别: '设备', // 对应原子类别 - 销售额: '225.44', - 数量: '5', - 利润: '462.56' + 销售额: 225.44, + 数量: 5, + 利润: 462.56 }, { 类别: '配件', // 对应原子类别 - 销售额: '375.92', - 数量: '8', - 利润: '550.2' + 销售额: 375.92, + 数量: 8, + 利润: 550.2 }, { 类别: '复印机', // 对应原子类别 - 销售额: '425.44', - 数量: '7', - 利润: '342.56' + 销售额: 425.44, + 数量: 7, + 利润: 342.56 }, { 类别: '电话', // 对应原子类别 - 销售额: '175.92', - 数量: '6', - 利润: '750.2' + 销售额: 175.92, + 数量: 6, + 利润: 750.2 } ] }, { 类别: '家具', - 销售额: '129.696', - 数量: '2', - 利润: '-60.704', + 销售额: 129.696, + 数量: 2, + 利润: -60.704, children: [ { 类别: '桌子', // 对应原子类别 - 销售额: '125.44', - 数量: '2', - 利润: '42.56', + 销售额: 125.44, + 数量: 2, + 利润: 42.56, children: [ { 类别: '黄色桌子', - 销售额: '125.44', - 数量: '2', - 利润: '42.56' + 销售额: 125.44, + 数量: 2, + 利润: 42.56 }, { 类别: '白色桌子', - 销售额: '1375.92', - 数量: '3', - 利润: '550.2' + 销售额: 1375.92, + 数量: 3, + 利润: 550.2 } ] }, { 类别: '椅子', // 对应原子类别 - 销售额: '1375.92', - 数量: '3', - 利润: '550.2', + 销售额: 1375.92, + 数量: 3, + 利润: 550.2, children: [ { 类别: '老板椅', - 销售额: '125.44', - 数量: '2', - 利润: '42.56' + 销售额: 125.44, + 数量: 2, + 利润: 42.56 }, { 类别: '沙发椅', - 销售额: '1375.92', - 数量: '3', - 利润: '550.2' + 销售额: 1375.92, + 数量: 3, + 利润: 550.2 } ] } @@ -155,9 +155,9 @@ const data = [ }, { 类别: '生活家电（懒加载）', - 销售额: '229.696', - 数量: '20', - 利润: '90.704' + 销售额: 229.696, + 数量: 20, + 利润: 90.704 } ]; const option = { @@ -233,9 +233,12 @@ function bindExport() { exportExcelButton.addEventListener('click', async () => { if (window.tableInstance) { - downloadExcel(await exportVTableToExcel(window.tableInstance, { - ignoreIcon: true - }), 'export'); + downloadExcel( + await exportVTableToExcel(window.tableInstance, { + ignoreIcon: true + }), + 'export' + ); } }); } diff --git a/docs/assets/guide/en/export/excel.md b/docs/assets/guide/en/export/excel.md index 67627e3a4..4f5d8edac 100644 --- a/docs/assets/guide/en/export/excel.md +++ b/docs/assets/guide/en/export/excel.md @@ -20,10 +20,10 @@ const tableInstance = new VTable.ListTable(option); downloadExcel(exportVTableToExcel(tableInstance, optionForExport), 'export-csv'); ``` -* `exportVTableToExcel`: Table output tool, outputs table instances as an ArrayBuffer in Excel format; option is an optional parameter, see below for configuration items -* `downloadExcel`: Download tool to download the ArrayBuffer in Excel format as a file in the browser environment -* If it is a server environment, you can process the Excel format ArrayBuffer converted by `exportVTableToExcel` yourself. -* The excel export function is currently being improved. Currently, it only supports the export of text-type cells, and will support more types such as sparkline in the future. +- `exportVTableToExcel`: Table output tool, outputs table instances as an ArrayBuffer in Excel format; option is an optional parameter, see below for configuration items +- `downloadExcel`: Download tool to download the ArrayBuffer in Excel format as a file in the browser environment +- If it is a server environment, you can process the Excel format ArrayBuffer converted by `exportVTableToExcel` yourself. +- The excel export function is currently being improved. Currently, it only supports the export of text-type cells, and will support more types such as sparkline in the future. Reference[demo](../../demo/export/table-export) @@ -78,10 +78,9 @@ const excelOption = { downloadExcel(await exportVTableToExcel(tableInstance, excelOption)); ``` - ### formatExcelJSCell -If you need to further customize the export style, you can set `formatExcelJSCell` to a function. The function parameters are cell information and ExcelJS cell objects. The function return value is the ExcelJS cell object. If `undefined` is returned, the default export logic is used. You can automatically set ExcelJS cell properties in the function. For details, please refer to https://github.com/exceljs/exceljs?tab=readme-ov-file#styles +If you need to further customize the export style, you can set `formatExcelJSCell` to a function. The function parameters are cell information `cellInfo` and ExcelJS cell objects `cellInExceljs`. The function return value is the ExcelJS cell object. If `undefined` is returned, the default export logic is used. You can automatically set ExcelJS cell properties in the function. For details, please refer to https://github.com/exceljs/exceljs?tab=readme-ov-file#styles ```ts type CellInfo = { @@ -98,13 +97,27 @@ type ExportVTableToExcelOptions = { }; ``` +Here is an example of specifying the number format for the first column as a percentage: + ```js const excelOption = { - formatExcelJSCell: (cellInfo, cell) => { + formatExcelJSCell: (cellInfo, cellInExceljs) => { if (cellInfo.col === 1) { - cell.numFmt = '0.00%'; + cellInExceljs.numFmt = '0.00%'; } - return cell; + return cellInExceljs; + } +}; +downloadExcel(await exportVTableToExcel(tableInstance, excelOption)); +``` + +If you want to export the original record field value instead of the format displayed in the table, you can use the table.getCellOriginValue(col,row) method to get it and assign it to cellInExceljs.value. + +```js +const excelOption = { + formatExcelJSCell: (cellInfo, cellInExceljs) => { + cellInExceljs.value = table.getCellOriginValue(cellInfo.col, cellInfo.row); + return cellInExceljs; } }; downloadExcel(await exportVTableToExcel(tableInstance, excelOption)); diff --git a/docs/assets/guide/zh/export/excel.md b/docs/assets/guide/zh/export/excel.md index 789faa2a9..c7ec49010 100644 --- a/docs/assets/guide/zh/export/excel.md +++ b/docs/assets/guide/zh/export/excel.md @@ -1,6 +1,6 @@ -# Excel导出 +# Excel 导出 -`@visactor/vtable-export`包是为了 VTable 表格导出所封装的工具，它支持CSV和Excel两种格式的导出。 +`@visactor/vtable-export`包是为了 VTable 表格导出所封装的工具，它支持 CSV 和 Excel 两种格式的导出。 ## 使用方式 @@ -20,16 +20,16 @@ const tableInstance = new VTable.ListTable(option); downloadExcel(exportVTableToExcel(tableInstance, optionForExport), 'export-csv'); ``` -* `exportVTableToExcel`：表格输出工具，将表格实例输出为一个Excel格式的ArrayBuffer；option为可选参数，详见下方配置项 -* `downloadExcel`：下载工具，在浏览器环境中将Excel格式的ArrayBuffer下载为文件 -* 如果是服务端环境，可以自行处理`exportVTableToExcel`转换出的Excel格式的ArrayBuffer -* 目前excel导出功能正在完善中，目前只支持文字类型的单元格导出，后续会支持迷你图等更多类型 +- `exportVTableToExcel`：表格输出工具，将表格实例输出为一个 Excel 格式的 ArrayBuffer；option 为可选参数，详见下方配置项 +- `downloadExcel`：下载工具，在浏览器环境中将 Excel 格式的 ArrayBuffer 下载为文件 +- 如果是服务端环境，可以自行处理`exportVTableToExcel`转换出的 Excel 格式的 ArrayBuffer +- 目前 excel 导出功能正在完善中，目前只支持文字类型的单元格导出，后续会支持迷你图等更多类型 参考[demo](../../demo/export/table-export) ### umd -也可以在HTML中直接引入`@visactor/vtable-export`包的umd产物： +也可以在 HTML 中直接引入`@visactor/vtable-export`包的 umd 产物： ```html @@ -46,11 +46,11 @@ const { downloadCsv, exportVTableToCsv } = VTable.export; ### ignoreIcon -默认情况下，单元格中有图标时，图标和文字会统一当做图片被导出；如果不需要导出图标，可以设置`ignoreIcon`为true，只输出文字 +默认情况下，单元格中有图标时，图标和文字会统一当做图片被导出；如果不需要导出图标，可以设置`ignoreIcon`为 true，只输出文字 ### formatExportOutput -默认情况下，表格导出时，会将导出单元格的内文字或图片输出到Excel中，如果需要自定义导出内容，可以设置`formatExportOutput`为一个函数，函数的参数为单元格信息，函数的返回值为导出字符串，如果返回`undefined`，则按照默认导出逻辑处理 +默认情况下，表格导出时，会将导出单元格的内文字或图片输出到 Excel 中，如果需要自定义导出内容，可以设置`formatExportOutput`为一个函数，函数的参数为单元格信息，函数的返回值为导出字符串，如果返回`undefined`，则按照默认导出逻辑处理 ```ts type CellInfo = { @@ -80,7 +80,7 @@ downloadExcel(await exportVTableToExcel(tableInstance, excelOption)); ### formatExcelJSCell -对于导出样式有进一步的定制化需求的话，可以设置`formatExcelJSCell`为一个函数，函数的参数为单元格信息和ExcelJS的单元格对象，函数的返回值为ExcelJS的单元格对象，如果返回`undefined`，则按照默认导出逻辑处理。可以在函数中自动设置ExcelJS的单元格属性，具体可以参考 https://github.com/exceljs/exceljs?tab=readme-ov-file#styles +对于导出样式有进一步的定制化需求的话，可以设置`formatExcelJSCell`为一个函数，函数的参数为单元格信息 cellInfo 和 ExcelJS 的单元格对象 cellInExceljs，函数的返回值为 ExcelJS 的单元格对象，如果返回`undefined`，则按照默认导出逻辑处理。可以在函数中自动设置 ExcelJS 的单元格属性，具体可以参考 https://github.com/exceljs/exceljs?tab=readme-ov-file#styles ```ts type CellInfo = { @@ -97,13 +97,27 @@ type ExportVTableToExcelOptions = { }; ``` +以下为指定第一列的数字格式为百分比的例子： + ```js const excelOption = { - formatExcelJSCell: (cellInfo, cell) => { + formatExcelJSCell: (cellInfo, cellInExceljs) => { if (cellInfo.col === 1) { - cell.numFmt = '0.00%'; + cellInExceljs.numFmt = '0.00%'; } - return cell; + return cellInExceljs; + } +}; +downloadExcel(await exportVTableToExcel(tableInstance, excelOption)); +``` + +如果想要导出原始 record 字段值 而不是表格中显示的 format 之后的，可以借助 table.getCellOriginValue(col,row)方法来获取后，将其赋值到 cellInExceljs.value 中。 + +```js +const excelOption = { + formatExcelJSCell: (cellInfo, cellInExceljs) => { + cellInExceljs.value = table.getCellOriginValue(cellInfo.col, cellInfo.row); + return cellInExceljs; } }; downloadExcel(await exportVTableToExcel(tableInstance, excelOption)); @@ -111,15 +125,15 @@ downloadExcel(await exportVTableToExcel(tableInstance, excelOption)); ### excelJSWorksheetCallback -`@visactor/vtable-export`使用`exceljs`库作为导出Excel文件的工具，如果需要对ExcelJS的Worksheet对象进行进一步的定制化（例如添加页面页脚），可以设置`excelJSWorksheetCallback`为一个函数，函数的参数为ExcelJS的Worksheet对象，可以在函数中操作ExcelJS的Worksheet。`exceljs`的详细使用方法请参考 [exceljs](https://github.com/exceljs/exceljs/blob/master/README.md) +`@visactor/vtable-export`使用`exceljs`库作为导出 Excel 文件的工具，如果需要对 ExcelJS 的 Worksheet 对象进行进一步的定制化（例如添加页面页脚），可以设置`excelJSWorksheetCallback`为一个函数，函数的参数为 ExcelJS 的 Worksheet 对象，可以在函数中操作 ExcelJS 的 Worksheet。`exceljs`的详细使用方法请参考 [exceljs](https://github.com/exceljs/exceljs/blob/master/README.md) ```js const excelOption = { - excelJSWorksheetCallback: (worksheet) => { + excelJSWorksheetCallback: worksheet => { // 添加页面与页脚 worksheet.headerFooter.oddHeader = 'Hello Exceljs'; worksheet.headerFooter.oddFooter = 'Hello World'; } }; downloadExcel(await exportVTableToExcel(tableInstance, excelOption)); -``` \ No newline at end of file +``` From 40686570f48b55c1d47152df54bf292c6b4d5d1a Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Mon, 19 Aug 2024 17:41:28 +0800 Subject: [PATCH 06/51] docs: fix react demo label --- .../en/custom_define/react-custom-component.md | 14 +++++++------- .../zh/custom_define/react-custom-component.md | 14 +++++++------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/docs/assets/guide/en/custom_define/react-custom-component.md b/docs/assets/guide/en/custom_define/react-custom-component.md index 27a9eb4d7..8ef3ba56d 100644 --- a/docs/assets/guide/en/custom_define/react-custom-component.md +++ b/docs/assets/guide/en/custom_define/react-custom-component.md @@ -137,7 +137,7 @@ In order to facilitate users to quickly implement customized cell content, React #### Tag -```js livedemo template=vtable +```javascript livedemo template=vtable-react const { useCallback, useRef, useState } = React; const { ListTable, ListColumn, Group, Tag } = ReactVTable; @@ -232,7 +232,7 @@ API #### Radio -```js livedemo template=vtable +```javascript livedemo template=vtable-react const { useCallback, useRef, useState, useEffect } = React; const { ListTable, ListColumn, Group, Radio } = ReactVTable; @@ -360,7 +360,7 @@ API #### Checkbox -```js livedemo template=vtable +```javascript livedemo template=vtable-react const { useCallback, useRef, useState, useEffect } = React; const { ListTable, ListColumn, Group, Checkbox } = ReactVTable; @@ -443,7 +443,7 @@ API #### Button -```js livedemo template=vtable +```javascript livedemo template=vtable-react const { useCallback, useRef, useState, useEffect } = React; const { ListTable, ListColumn, Group, Button } = ReactVTable; @@ -516,7 +516,7 @@ API #### Link -```js livedemo template=vtable +```javascript livedemo template=vtable-react const { useCallback, useRef, useState, useEffect } = React; const { ListTable, ListColumn, Group, Link } = ReactVTable; @@ -592,7 +592,7 @@ API #### Avatar -```js livedemo template=vtable +```javascript livedemo template=vtable-react const { useCallback, useRef, useState, useEffect } = React; const { ListTable, ListColumn, Group, Avatar, Image } = ReactVTable; @@ -669,7 +669,7 @@ API #### Popover -```js livedemo template=vtable +```javascript livedemo template=vtable-react const { useCallback, useRef, useState, useEffect } = React; const { ListTable, ListColumn, Group, Avatar, Popover } = ReactVTable; diff --git a/docs/assets/guide/zh/custom_define/react-custom-component.md b/docs/assets/guide/zh/custom_define/react-custom-component.md index 9582f7b35..eab0c3af0 100644 --- a/docs/assets/guide/zh/custom_define/react-custom-component.md +++ b/docs/assets/guide/zh/custom_define/react-custom-component.md @@ -139,7 +139,7 @@ const CustomLayoutComponent = (props: CustomLayoutFunctionArg & { text: string } 文字标签 -```js livedemo template=vtable +```javascript livedemo template=vtable-react const { useCallback, useRef, useState } = React; const { ListTable, ListColumn, Group, Tag } = ReactVTable; @@ -236,7 +236,7 @@ API 单选框 -```js livedemo template=vtable +```javascript livedemo template=vtable-react const { useCallback, useRef, useState, useEffect } = React; const { ListTable, ListColumn, Group, Radio } = ReactVTable; @@ -366,7 +366,7 @@ API 复选框 -```js livedemo template=vtable +```javascript livedemo template=vtable-react const { useCallback, useRef, useState, useEffect } = React; const { ListTable, ListColumn, Group, Checkbox } = ReactVTable; @@ -456,7 +456,7 @@ API 按钮 -```js livedemo template=vtable +```javascript livedemo template=vtable-react const { useCallback, useRef, useState, useEffect } = React; const { ListTable, ListColumn, Group, Button } = ReactVTable; @@ -531,7 +531,7 @@ API 链接 -```js livedemo template=vtable +```javascript livedemo template=vtable-react const { useCallback, useRef, useState, useEffect } = React; const { ListTable, ListColumn, Group, Link } = ReactVTable; @@ -609,7 +609,7 @@ API 头像 -```js livedemo template=vtable +```javascript livedemo template=vtable-react const { useCallback, useRef, useState, useEffect } = React; const { ListTable, ListColumn, Group, Avatar, Image } = ReactVTable; @@ -688,7 +688,7 @@ API 气泡卡片 -```js livedemo template=vtable +```javascript livedemo template=vtable-react const { useCallback, useRef, useState, useEffect } = React; const { ListTable, ListColumn, Group, Avatar, Popover } = ReactVTable; From 8dace80ab0135c83c51de262535d7c18d7defc71 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Mon, 19 Aug 2024 19:32:01 +0800 Subject: [PATCH 07/51] feat: remove VRender from vtable index.ts --- packages/vtable/src/index.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/vtable/src/index.ts b/packages/vtable/src/index.ts index 41a609063..b12e66fa9 100644 --- a/packages/vtable/src/index.ts +++ b/packages/vtable/src/index.ts @@ -51,7 +51,7 @@ export * from './render/jsx'; export { getTargetCell } from './event/util'; // export * as VRender from './vrender'; -import * as VRender from './vrender'; +// import * as VRender from './vrender'; export const version = __VERSION__; /** @@ -104,8 +104,8 @@ export { renderChart, graphicUtil, setCustomAlphabetCharSet, - restoreMeasureText, - VRender + restoreMeasureText + // VRender // should use import {xxx} from '@visactor/vtable/es/vrender' }; /** @private */ From 0471d4038245aea7b3cf5f824a4ddf0215f210ae Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Thu, 22 Aug 2024 20:16:08 +0800 Subject: [PATCH 08/51] fix: fix Timeline export problem temply --- packages/vtable/src/vrender.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vtable/src/vrender.ts b/packages/vtable/src/vrender.ts index 37d6b641c..95a118273 100644 --- a/packages/vtable/src/vrender.ts +++ b/packages/vtable/src/vrender.ts @@ -62,7 +62,7 @@ export function registerForVrender() { loadPoptip(); } -export { Direction, Timeline } from '@visactor/vrender-core'; +export type { Direction, Timeline } from '@visactor/vrender-core'; export { GroupFadeIn } from '@visactor/vrender-core'; export { GroupFadeOut } from '@visactor/vrender-core'; From a529cd3c511ff7067526626acb2603b46d950453 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Thu, 22 Aug 2024 14:41:11 +0800 Subject: [PATCH 09/51] fix: fix menu auto hide when page crolled #2241 --- .../fix-menu-bottom-auto-hide_2024-08-22-06-40.json | 10 ++++++++++ packages/vtable/src/event/listener/table-group.ts | 3 ++- 2 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 common/changes/@visactor/vtable/fix-menu-bottom-auto-hide_2024-08-22-06-40.json diff --git a/common/changes/@visactor/vtable/fix-menu-bottom-auto-hide_2024-08-22-06-40.json b/common/changes/@visactor/vtable/fix-menu-bottom-auto-hide_2024-08-22-06-40.json new file mode 100644 index 000000000..c5696aa02 --- /dev/null +++ b/common/changes/@visactor/vtable/fix-menu-bottom-auto-hide_2024-08-22-06-40.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vtable", + "comment": "fix: fix menu auto hide when page crolled #2241", + "type": "none" + } + ], + "packageName": "@visactor/vtable" +} \ No newline at end of file diff --git a/packages/vtable/src/event/listener/table-group.ts b/packages/vtable/src/event/listener/table-group.ts index 0701a4168..d0e74f722 100644 --- a/packages/vtable/src/event/listener/table-group.ts +++ b/packages/vtable/src/event/listener/table-group.ts @@ -293,7 +293,8 @@ export function bindTableGroupListener(eventManager: EventManager) { const eventArgsSet: SceneEvent = getCellEventArgsSet(e); if (stateManager.menu.isShow && (eventArgsSet.eventArgs?.target as any) !== stateManager.residentHoverIcon?.icon) { setTimeout(() => { - if (!table.internalProps.menuHandler.pointInMenuElement(e.page.x, e.page.y)) { + // conside page scroll + if (!table.internalProps.menuHandler.pointInMenuElement(e.client.x, e.client.y)) { stateManager.menu.isShow && stateManager.hideMenu(); } }, 0); From 49853133b600d3761769f98e1b66aefa543397a7 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Thu, 22 Aug 2024 19:51:00 +0800 Subject: [PATCH 10/51] fix: fix frozen column custom component clip --- .../fix-custom-frozen-clip_2024-08-22-11-46.json | 10 ++++++++++ .../demo/src/component/custom-layout-dom-site-1.tsx | 8 +++++--- packages/vtable/src/scenegraph/scenegraph.ts | 11 +++++++++-- 3 files changed, 24 insertions(+), 5 deletions(-) create mode 100644 common/changes/@visactor/vtable/fix-custom-frozen-clip_2024-08-22-11-46.json diff --git a/common/changes/@visactor/vtable/fix-custom-frozen-clip_2024-08-22-11-46.json b/common/changes/@visactor/vtable/fix-custom-frozen-clip_2024-08-22-11-46.json new file mode 100644 index 000000000..fced05279 --- /dev/null +++ b/common/changes/@visactor/vtable/fix-custom-frozen-clip_2024-08-22-11-46.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vtable", + "comment": "fix: fix frozen column custom component clip", + "type": "none" + } + ], + "packageName": "@visactor/vtable" +} \ No newline at end of file diff --git a/packages/react-vtable/demo/src/component/custom-layout-dom-site-1.tsx b/packages/react-vtable/demo/src/component/custom-layout-dom-site-1.tsx index 01c20fbcd..5267f7171 100644 --- a/packages/react-vtable/demo/src/component/custom-layout-dom-site-1.tsx +++ b/packages/react-vtable/demo/src/component/custom-layout-dom-site-1.tsx @@ -163,8 +163,10 @@ function App() { return ( { // eslint-disable-next-line no-undef // (window as any).tableInstance = table; @@ -172,10 +174,10 @@ function App() { ReactDOM={ReactDOM} > - + - + diff --git a/packages/vtable/src/scenegraph/scenegraph.ts b/packages/vtable/src/scenegraph/scenegraph.ts index b2cfb4478..86e78be16 100644 --- a/packages/vtable/src/scenegraph/scenegraph.ts +++ b/packages/vtable/src/scenegraph/scenegraph.ts @@ -2033,14 +2033,21 @@ export class Scenegraph { // } updateDomContainer() { const { headerDomContainer, bodyDomContainer } = this.table.internalProps; + if (this.table.frozenColCount > 0 && (headerDomContainer || bodyDomContainer)) { + const frozenColsWidth = this.table.getFrozenColsWidth(); + headerDomContainer && (headerDomContainer.style.left = `${frozenColsWidth}px`); + bodyDomContainer && (bodyDomContainer.style.left = `${frozenColsWidth}px`); + } if (headerDomContainer) { - headerDomContainer.style.width = `${(headerDomContainer.parentElement?.offsetWidth ?? 1) - 1}px`; + // headerDomContainer.style.width = `${(headerDomContainer.parentElement?.offsetWidth ?? 1) - 1}px`; + headerDomContainer.style.width = `${Math.min(this.table.getAllColsWidth(), this.table.tableNoFrameWidth)}px`; headerDomContainer.style.height = `${this.table.getFrozenRowsHeight()}px`; } if (bodyDomContainer) { const totalFrozenRowsHeight = this.table.getFrozenRowsHeight() + this.table.getBottomFrozenRowsHeight(); - bodyDomContainer.style.width = `${(bodyDomContainer.parentElement?.offsetWidth ?? 1) - 1}px`; + // bodyDomContainer.style.width = `${(bodyDomContainer.parentElement?.offsetWidth ?? 1) - 1}px`; + bodyDomContainer.style.width = `${Math.min(this.table.getAllColsWidth(), this.table.tableNoFrameWidth)}px`; bodyDomContainer.style.height = `${ (bodyDomContainer.parentElement?.offsetHeight ?? 1) - 1 - totalFrozenRowsHeight }px`; From 19bb78f0750bb1334e7f663980cd4eae55c6f083 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Thu, 22 Aug 2024 19:58:16 +0800 Subject: [PATCH 11/51] feat: add formatCopyValue config --- .../vtable/feat-copy-format_2024-08-22-11-58.json | 10 ++++++++++ docs/assets/option/en/common/option-secondary.md | 4 ++++ docs/assets/option/zh/common/option-secondary.md | 4 ++++ packages/vtable/src/core/BaseTable.ts | 4 ++++ packages/vtable/src/ts-types/base-table.ts | 2 ++ 5 files changed, 24 insertions(+) create mode 100644 common/changes/@visactor/vtable/feat-copy-format_2024-08-22-11-58.json diff --git a/common/changes/@visactor/vtable/feat-copy-format_2024-08-22-11-58.json b/common/changes/@visactor/vtable/feat-copy-format_2024-08-22-11-58.json new file mode 100644 index 000000000..4acef9bf5 --- /dev/null +++ b/common/changes/@visactor/vtable/feat-copy-format_2024-08-22-11-58.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vtable", + "comment": "feat: add formatCopyValue config", + "type": "none" + } + ], + "packageName": "@visactor/vtable" +} \ No newline at end of file diff --git a/docs/assets/option/en/common/option-secondary.md b/docs/assets/option/en/common/option-secondary.md index 059cd24d1..afd7b5dd8 100644 --- a/docs/assets/option/en/common/option-secondary.md +++ b/docs/assets/option/en/common/option-secondary.md @@ -522,3 +522,7 @@ You can configure true to enable the default animation, or you can configure the - `direction` The direction of the entry animation, currently supports `row` and `column`, and the default is `row` - `duration` The duration of a single animation, in milliseconds, for `one-by-one`, it is the duration of one animation, and the default is 500 - `delay` The delay of the animation, in milliseconds; for `one-by-one`, it is the time difference between the two animations, for `all`, it is the delay of all animations, and the default is 0 + +#${prefix} formatCopyValue((value: string) => string) + +Format the value when copying. \ No newline at end of file diff --git a/docs/assets/option/zh/common/option-secondary.md b/docs/assets/option/zh/common/option-secondary.md index 49614d27b..2f9a1747e 100644 --- a/docs/assets/option/zh/common/option-secondary.md +++ b/docs/assets/option/zh/common/option-secondary.md @@ -519,3 +519,7 @@ animationAppear?: boolean | { - `direction` 入场动画的方向，目前支持 `row` 和 `column`两种，默认为 `row` - `duration` 单个动画的时长，单位为毫秒，`one-by-one` 时，为一次动画的时长，默认为 500 - `delay` 动画的延迟，单位为毫秒；`one-by-one` 时为两次动画直接的时间差，`all` 时为所有动画的延迟，默认为 0 + +#${prefix} formatCopyValue((value: string) => string) + +设置复制内容格式化函数。 \ No newline at end of file diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts index 0a2e7714b..a0b3019f7 100644 --- a/packages/vtable/src/core/BaseTable.ts +++ b/packages/vtable/src/core/BaseTable.ts @@ -3580,6 +3580,10 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { } } } + + if (this.options?.formatCopyValue) { + copyValue = this.options.formatCopyValue(copyValue); + } return copyValue; } return ''; diff --git a/packages/vtable/src/ts-types/base-table.ts b/packages/vtable/src/ts-types/base-table.ts index 5d9e92872..5a1b7b286 100644 --- a/packages/vtable/src/ts-types/base-table.ts +++ b/packages/vtable/src/ts-types/base-table.ts @@ -484,6 +484,8 @@ export interface BaseTableConstructorOptions { animationAppear?: boolean | IAnimationAppear; renderOption?: any; + + formatCopyValue?: (value: string) => string; } export interface BaseTableAPI { /** 数据总条目数 */ From 102317313cf5dc63234096b94fdb2d27477278dc Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Fri, 23 Aug 2024 17:31:30 +0800 Subject: [PATCH 12/51] refactor: canvas wheel move to stage listener --- packages/vtable/src/event/listener/container-dom.ts | 2 +- packages/vtable/src/state/state.ts | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/vtable/src/event/listener/container-dom.ts b/packages/vtable/src/event/listener/container-dom.ts index 5d3df53c6..f6bb97332 100644 --- a/packages/vtable/src/event/listener/container-dom.ts +++ b/packages/vtable/src/event/listener/container-dom.ts @@ -24,7 +24,7 @@ export function bindContainerDomListener(eventManager: EventManager) { eventManager.dealTableHover(); // eventManager.dealTableSelect(); }); - handler.on(table.canvas, 'wheel', (e: WheelEvent) => { + table.scenegraph.stage.addEventListener('wheel', (e: WheelEvent) => { table.editorManager?.completeEdit(); if (table.eventManager._enableTableScroll) { handleWhell(e, stateManager); diff --git a/packages/vtable/src/state/state.ts b/packages/vtable/src/state/state.ts index d9e213a6c..28c6d9498 100644 --- a/packages/vtable/src/state/state.ts +++ b/packages/vtable/src/state/state.ts @@ -902,7 +902,7 @@ export class StateManager { this.checkHorizontalScrollBarEnd(); } } - setScrollTop(top: number, event?: WheelEvent) { + setScrollTop(top: number, event?: FederatedEvent) { // 矫正top值范围 const totalHeight = this.table.getAllRowsHeight(); // _disableColumnAndRowSizeRound环境中，可能出现 @@ -931,7 +931,7 @@ export class StateManager { if (oldVerticalBarPos !== top) { this.table.fireListeners(TABLE_EVENT_TYPE.SCROLL, { - event, + event: (event as FederatedEvent).nativeEvent, scrollTop: this.scroll.verticalBarPos, scrollLeft: this.scroll.horizontalBarPos, scrollHeight: this.table.theme.scrollStyle?.width, @@ -945,7 +945,7 @@ export class StateManager { this.checkVerticalScrollBarEnd(); } } - setScrollLeft(left: number, wheelEvent?: WheelEvent) { + setScrollLeft(left: number, event?: FederatedEvent) { const oldScrollLeft = this.table.scrollLeft; // 矫正left值范围 const totalWidth = this.table.getAllColsWidth(); @@ -979,7 +979,7 @@ export class StateManager { if (oldHorizontalBarPos !== left) { this.table.fireListeners(TABLE_EVENT_TYPE.SCROLL, { - event: wheelEvent, + event: (event as FederatedEvent).nativeEvent, scrollTop: this.scroll.verticalBarPos, scrollLeft: this.scroll.horizontalBarPos, scrollHeight: this.table.theme.scrollStyle?.width, From b1a0be783e2883bf0a9bf052fc23e240452f28a2 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Fri, 23 Aug 2024 17:45:20 +0800 Subject: [PATCH 13/51] refactor: canvas wheel move to stage listener --- packages/vtable/src/event/event.ts | 8 +------- packages/vtable/src/event/listener/container-dom.ts | 6 ------ packages/vtable/src/event/listener/table-group.ts | 11 +++++++++-- packages/vtable/src/event/scroll.ts | 4 +++- packages/vtable/src/state/state.ts | 12 ++++++------ 5 files changed, 19 insertions(+), 22 deletions(-) diff --git a/packages/vtable/src/event/event.ts b/packages/vtable/src/event/event.ts index 0ff410529..886e1e1d8 100644 --- a/packages/vtable/src/event/event.ts +++ b/packages/vtable/src/event/event.ts @@ -232,13 +232,7 @@ export class EventManager { const { eventArgs } = eventArgsSet; if (eventArgs) { - this.table.stateManager.updateHoverIcon( - eventArgs.col, - eventArgs.row, - eventArgs.target, - eventArgs.targetCell, - eventArgs.event - ); + this.table.stateManager.updateHoverIcon(eventArgs.col, eventArgs.row, eventArgs.target, eventArgs.targetCell); } else { this.table.stateManager.updateHoverIcon(-1, -1, undefined, undefined); } diff --git a/packages/vtable/src/event/listener/container-dom.ts b/packages/vtable/src/event/listener/container-dom.ts index f6bb97332..0d4ff9838 100644 --- a/packages/vtable/src/event/listener/container-dom.ts +++ b/packages/vtable/src/event/listener/container-dom.ts @@ -24,12 +24,6 @@ export function bindContainerDomListener(eventManager: EventManager) { eventManager.dealTableHover(); // eventManager.dealTableSelect(); }); - table.scenegraph.stage.addEventListener('wheel', (e: WheelEvent) => { - table.editorManager?.completeEdit(); - if (table.eventManager._enableTableScroll) { - handleWhell(e, stateManager); - } - }); // 监听键盘事件 handler.on(table.getElement(), 'keydown', (e: KeyboardEvent) => { diff --git a/packages/vtable/src/event/listener/table-group.ts b/packages/vtable/src/event/listener/table-group.ts index 0701a4168..c89edbf19 100644 --- a/packages/vtable/src/event/listener/table-group.ts +++ b/packages/vtable/src/event/listener/table-group.ts @@ -1,5 +1,5 @@ -import type { IEventTarget } from '@src/vrender'; -import { Gesture, type FederatedPointerEvent } from '@src/vrender'; +import type { IEventTarget, FederatedPointerEvent, FederatedWheelEvent } from '@src/vrender'; +import { Gesture } from '@src/vrender'; import type { ListTableAPI, MousePointerCellEvent, @@ -22,6 +22,7 @@ import type { IIconGraphicAttribute } from '../../scenegraph/graphic/icon'; import { getCellMergeInfo } from '../../scenegraph/utils/get-cell-merge'; import type { CheckBox, CheckboxAttributes, Radio } from '@visactor/vrender-components'; import { ResizeColumnHotSpotSize } from '../../tools/global'; +import { handleWhell } from '../scroll'; export function bindTableGroupListener(eventManager: EventManager) { const table = eventManager.table; const stateManager = table.stateManager; @@ -949,6 +950,12 @@ export function bindTableGroupListener(eventManager: EventManager) { table.scenegraph.updateNextFrame(); }); + table.scenegraph.stage.addEventListener('wheel', (e: FederatedWheelEvent) => { + table.editorManager?.completeEdit(); + if (table.eventManager._enableTableScroll) { + handleWhell(e, stateManager); + } + }); } export function bindGesture(eventManager: EventManager) { const table = eventManager.table; diff --git a/packages/vtable/src/event/scroll.ts b/packages/vtable/src/event/scroll.ts index c1a18975c..d6e3cbb05 100644 --- a/packages/vtable/src/event/scroll.ts +++ b/packages/vtable/src/event/scroll.ts @@ -1,12 +1,14 @@ import type { StateManager } from '../state/state'; import { InteractionState } from '../ts-types'; +import type { FederatedWheelEvent } from '@src/vrender'; + /** * * @param event * @param state * @param isWheelEvent 是否是由鼠标或者触摸板原生滚动事件触发进入？ */ -export function handleWhell(event: WheelEvent, state: StateManager, isWheelEvent: boolean = true) { +export function handleWhell(event: FederatedWheelEvent, state: StateManager, isWheelEvent: boolean = true) { let { deltaX, deltaY } = event; // 如果按住了shift 则进行横向滚动 纵向不滚动 if (event.shiftKey && event.deltaY) { diff --git a/packages/vtable/src/state/state.ts b/packages/vtable/src/state/state.ts index 28c6d9498..d625f93fa 100644 --- a/packages/vtable/src/state/state.ts +++ b/packages/vtable/src/state/state.ts @@ -30,7 +30,7 @@ import { Bounds, isObject, isString, isValid } from '@visactor/vutils'; import { updateDrill } from './drill'; import { clearChartHover, updateChartHover } from './spark-line'; import { endMoveCol, startMoveCol, updateMoveCol } from './cell-move'; -import type { FederatedEvent } from '@src/vrender'; +import type { FederatedWheelEvent } from '@src/vrender'; import type { TooltipOptions } from '../ts-types/tooltip'; import { getIconAndPositionFromTarget } from '../scenegraph/utils/icon'; import type { BaseTableAPI, HeaderData } from '../ts-types/base-table'; @@ -530,7 +530,7 @@ export class StateManager { ); } - updateHoverIcon(col: number, row: number, target: any, cellGroup: Group, event?: FederatedEvent) { + updateHoverIcon(col: number, row: number, target: any, cellGroup: Group) { if (this.residentHoverIcon?.icon && target === this.residentHoverIcon?.icon) { return; // 常驻hover icon不更新交互 } @@ -902,7 +902,7 @@ export class StateManager { this.checkHorizontalScrollBarEnd(); } } - setScrollTop(top: number, event?: FederatedEvent) { + setScrollTop(top: number, event?: FederatedWheelEvent) { // 矫正top值范围 const totalHeight = this.table.getAllRowsHeight(); // _disableColumnAndRowSizeRound环境中，可能出现 @@ -931,7 +931,7 @@ export class StateManager { if (oldVerticalBarPos !== top) { this.table.fireListeners(TABLE_EVENT_TYPE.SCROLL, { - event: (event as FederatedEvent).nativeEvent, + event: (event as FederatedWheelEvent).nativeEvent as WheelEvent, scrollTop: this.scroll.verticalBarPos, scrollLeft: this.scroll.horizontalBarPos, scrollHeight: this.table.theme.scrollStyle?.width, @@ -945,7 +945,7 @@ export class StateManager { this.checkVerticalScrollBarEnd(); } } - setScrollLeft(left: number, event?: FederatedEvent) { + setScrollLeft(left: number, event?: FederatedWheelEvent) { const oldScrollLeft = this.table.scrollLeft; // 矫正left值范围 const totalWidth = this.table.getAllColsWidth(); @@ -979,7 +979,7 @@ export class StateManager { if (oldHorizontalBarPos !== left) { this.table.fireListeners(TABLE_EVENT_TYPE.SCROLL, { - event: (event as FederatedEvent).nativeEvent, + event: (event as FederatedWheelEvent).nativeEvent as WheelEvent, scrollTop: this.scroll.verticalBarPos, scrollLeft: this.scroll.horizontalBarPos, scrollHeight: this.table.theme.scrollStyle?.width, From 9ed75cccf3d5af91b0b0cd1058fdb2d353ce0125 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Fri, 23 Aug 2024 17:48:16 +0800 Subject: [PATCH 14/51] refactor: canvas wheel move to stage listener --- packages/vtable/src/state/state.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vtable/src/state/state.ts b/packages/vtable/src/state/state.ts index d625f93fa..fc9421881 100644 --- a/packages/vtable/src/state/state.ts +++ b/packages/vtable/src/state/state.ts @@ -931,7 +931,7 @@ export class StateManager { if (oldVerticalBarPos !== top) { this.table.fireListeners(TABLE_EVENT_TYPE.SCROLL, { - event: (event as FederatedWheelEvent).nativeEvent as WheelEvent, + event: (event as FederatedWheelEvent)?.nativeEvent as WheelEvent, scrollTop: this.scroll.verticalBarPos, scrollLeft: this.scroll.horizontalBarPos, scrollHeight: this.table.theme.scrollStyle?.width, @@ -979,7 +979,7 @@ export class StateManager { if (oldHorizontalBarPos !== left) { this.table.fireListeners(TABLE_EVENT_TYPE.SCROLL, { - event: (event as FederatedWheelEvent).nativeEvent as WheelEvent, + event: (event as FederatedWheelEvent)?.nativeEvent as WheelEvent, scrollTop: this.scroll.verticalBarPos, scrollLeft: this.scroll.horizontalBarPos, scrollHeight: this.table.theme.scrollStyle?.width, From 01885b893dfd522af081fe18872482d4856eddee Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Fri, 23 Aug 2024 19:20:38 +0800 Subject: [PATCH 15/51] docs: modify getting_started tutorial --- docs/assets/guide/en/Getting_Started/Getting_Started.md | 6 ++++-- docs/assets/guide/zh/Getting_Started/Getting_Started.md | 2 ++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/docs/assets/guide/en/Getting_Started/Getting_Started.md b/docs/assets/guide/en/Getting_Started/Getting_Started.md index 7d534621c..f166ee880 100644 --- a/docs/assets/guide/en/Getting_Started/Getting_Started.md +++ b/docs/assets/guide/en/Getting_Started/Getting_Started.md @@ -56,7 +56,9 @@ By adding directly in the HTML file `