Merge remote-tracking branch 'origin/develop' into 831-bug-setRecords…

…-performance
VisActor · Jan 3, 2024 · d8e6ed9 · d8e6ed9
2 parents 694173e + c0353d4
commit d8e6ed9
Show file tree

Hide file tree

Showing 25 changed files with 360 additions and 73 deletions.
diff --git a/common/changes/@visactor/vtable/819-feature-support-edit-header_2024-01-02-07-47.json b/common/changes/@visactor/vtable/819-feature-support-edit-header_2024-01-02-07-47.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "feat: support edit header title #819\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "[email protected]"
+}
diff --git a/...s/@visactor/vtable/843-feature-add-api-onvchartevent-for-pivottable_2024-01-03-06-06.json b/...s/@visactor/vtable/843-feature-add-api-onvchartevent-for-pivottable_2024-01-03-06-06.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "refactor: add onVChartEvent for BaseTable #843\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "[email protected]"
+}
diff --git a/common/changes/@visactor/vtable/develop_2024-01-02-12-20.json b/common/changes/@visactor/vtable/develop_2024-01-02-12-20.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vtable",
+      "comment": "fix: add group clip in body",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vtable"
+}
diff --git a/docs/assets/guide/en/edit/edit_cell.md b/docs/assets/guide/en/edit/edit_cell.md
@@ -228,4 +228,8 @@ Editing trigger timing support: double-click a cell to enter editing, click a ce
   completeEditCell: () => void;
 ```
 
+## Header Editing
+
+The basic table supports editing the display title in the header. You can enable this by configuring `headerEditor` globally or within a column. The usage is the same as `editor`.
+
 Through the above steps, you can create a table with editing functions, select the appropriate editor type according to business needs, customize the editor, listen to editing events, and obtain edited data. In this way, users can easily edit the data in the table, and you can process the edited data accordingly.
diff --git a/docs/assets/guide/zh/edit/edit_cell.md b/docs/assets/guide/zh/edit/edit_cell.md
@@ -234,5 +234,8 @@ tableInstance.records;
   /** 结束编辑 */
   completeEditCell: () => void;
 ```
+## 表头编辑
+
+基本表格可支持编辑表头显示标题title，在全局或者在column中配置`headerEditor`来开启，具体用法同`editor`。
 
 通过以上步骤，你可以创建一个具有编辑功能的表格，并根据业务需求选择合适的编辑器类型、自定义编辑器、监听编辑事件以及获取编辑后的数据。这样，用户就可以方便地编辑表格中的数据，并且你可以对编辑后的数据进行相应的处理。
diff --git a/docs/assets/option/en/column/base-column-type.md b/docs/assets/option/en/column/base-column-type.md
@@ -209,5 +209,13 @@ editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => s
 ```
 Among them, IEditor is the editor interface defined in @visactor/vtable-editors. For details, please refer to the source code: https://github.com/VisActor/VTable/blob/feat/editCell/packages/vtable-editors/src/types.ts .
 
+
+${prefix} headerEditor (string|Object|Function)
+
+Configure the display title of this column header
+```
+headerEditor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor);
+```
+
 ${prefix} columns (Array)
 Configure arrays with upper columns, nesting structures to describe column grouping relationships.
diff --git a/docs/assets/option/en/table/listTable.md b/docs/assets/option/en/table/listTable.md
@@ -78,6 +78,13 @@ editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => s
 ```
 Among them, IEditor is the editor interface defined in @visactor/vtable-editors. For details, please refer to the source code: https://github.com/VisActor/VTable/blob/feat/editCell/packages/vtable-editors/src/types.ts .
 
+${prefix} headerEditor (string|Object|Function)
+
+Global configuration for the editor of the display title in the table header
+```
+headerEditor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor);
+```
+
 {{ use: common-option-secondary(
     prefix = '#',
     tableType = 'listTable'

diff --git a/docs/assets/option/zh/column/base-column-type.md b/docs/assets/option/zh/column/base-column-type.md
@@ -219,5 +219,12 @@ editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => s
 ```
 其中IEditor是@visactor/vtable-editors中定义的编辑器接口，具体可以参看源码：https://github.com/VisActor/VTable/blob/feat/editCell/packages/vtable-editors/src/types.ts。
 
+${prefix} headerEditor (string|Object|Function)
+
+配置该列表头显示标题title
+```
+headerEditor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor);
+```
+
 ${prefix} columns (Array)
 同上层的列配置数组，嵌套结构来描述列分组关系。
diff --git a/docs/assets/option/zh/table/listTable.md b/docs/assets/option/zh/table/listTable.md
@@ -77,6 +77,13 @@ editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => s
 ```
 其中IEditor是@visactor/vtable-editors中定义的编辑器接口，具体可以参看源码：https://github.com/VisActor/VTable/blob/feat/editCell/packages/vtable-editors/src/types.ts。
 
+${prefix} headerEditor (string|Object|Function)
+
+全局配置表头显示标题title的编辑器
+```
+headerEditor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor);
+```
+
 {{ use: common-option-secondary(
     prefix = '#',
     tableType = 'listTable'

diff --git a/packages/vtable/examples/editor/custom-date-editor.ts b/packages/vtable/examples/editor/custom-date-editor.ts
@@ -223,6 +223,7 @@ export function createTable() {
       title: 'email',
       width: 'auto',
       sort: true,
+      headerEditor: 'input',
       editor: 'input'
     },
     {
@@ -341,11 +342,36 @@ export function createTable() {
     }),
     autoWrapText: true,
     limitMaxAutoWidth: 600,
+    menu: {
+      contextMenuItems: ['向下插入数据', '向下插入空行', '向右插入空列', '修改值', '删除该行']
+    },
+    dragHeaderMode: 'all',
     heightMode: 'autoHeight'
   };
   const tableInstance = new VTable.ListTable(option);
   tableInstance.on('initialized', args => {
     console.log('initialized');
   });
+  tableInstance.on('change_cell_value', arg => {
+    console.log(arg);
+  });
   window.tableInstance = tableInstance;
+  tableInstance.on('dropdown_menu_click', args => {
+    console.log('dropdown_menu_click', args);
+    if (args.menuKey === '向下插入数据') {
+      const recordIndex = tableInstance.getRecordShowIndexByCell(args.col, args.row);
+      tableInstance.addRecords(generatePersons(1), recordIndex + 1);
+    } else if (args.menuKey === '向下插入空行') {
+      const recordIndex = tableInstance.getRecordShowIndexByCell(args.col, args.row);
+      tableInstance.addRecord({}, recordIndex + 1);
+    } else if (args.menuKey === '向右插入空列') {
+      columns.splice(args.col + 1, 0, { field: Date.now().toString(), headerEditor: 'input', editor: 'input' });
+      tableInstance.updateColumns(columns);
+    } else if (args.menuKey === '删除该行') {
+      const recordIndex = tableInstance.getRecordShowIndexByCell(args.col, args.row);
+      tableInstance.deleteRecords([recordIndex]);
+    } else if (args.menuKey === '修改值') {
+      tableInstance.startEditCell(args.col, args.row);
+    }
+  });
 }
diff --git a/packages/vtable/examples/list/list-chart.ts b/packages/vtable/examples/list/list-chart.ts
@@ -606,4 +606,10 @@ export function createTable() {
 
   const tableInstance = new VTable.ListTable(option);
   window.tableInstance = tableInstance;
+  tableInstance.onVChartEvent('click', args => {
+    console.log('onVChartEvent click', args);
+  });
+  tableInstance.onVChartEvent('mouseover', args => {
+    console.log('onVChartEvent mouseover', args);
+  });
 }
diff --git a/packages/vtable/examples/list/list.ts b/packages/vtable/examples/list/list.ts
@@ -317,7 +317,8 @@ export function createTable() {
     rightFrozenColCount: 2,
     overscrollBehavior: 'none',
     autoWrapText: true,
-    heightMode: 'autoHeight'
+    heightMode: 'autoHeight',
+    dragHeaderMode: 'all'
     // widthMode: 'adaptive'
   };
   const tableInstance = new VTable.ListTable(option);

diff --git a/packages/vtable/examples/pivot-chart/pivotChart.ts b/packages/vtable/examples/pivot-chart/pivotChart.ts
@@ -9308,48 +9308,55 @@ export function createTable() {
     },
     headerStyle: {
       borderColor: 'gray',
+      bgColor: 'rgba(220, 210, 200, 0.2)',
       borderLineWidth: [0, 0, 0, 1],
       hover: {
         cellBgColor: '#CCE0FF'
       }
     },
     rowHeaderStyle: {
       borderColor: 'gray',
+      bgColor: 'rgba(220, 210, 200, 0.2)',
       borderLineWidth: [1, 0, 1, 0],
       hover: {
         cellBgColor: ''
       }
     },
     cornerHeaderStyle: {
       borderColor: 'gray',
+      bgColor: 'rgba(220, 210, 200, 0.2)',
       borderLineWidth: [0, 0, 1, 0],
       hover: {
         cellBgColor: ''
       }
     },
     cornerRightTopCellStyle: {
       borderColor: 'gray',
+      bgColor: 'rgba(220, 210, 200, 0.2)',
       borderLineWidth: [0, 0, 1, 1],
       hover: {
         cellBgColor: ''
       }
     },
     cornerLeftBottomCellStyle: {
       borderColor: 'gray',
+      bgColor: 'rgba(220, 210, 200, 0.2)',
       borderLineWidth: [1, 1, 0, 0],
       hover: {
         cellBgColor: ''
       }
     },
     cornerRightBottomCellStyle: {
       borderColor: 'gray',
+      bgColor: 'rgba(220, 210, 200, 0.2)',
       borderLineWidth: [1, 0, 0, 1],
       hover: {
         cellBgColor: ''
       }
     },
     rightFrozenStyle: {
       borderColor: 'gray',
+      bgColor: 'rgba(220, 210, 200, 0.2)',
       borderLineWidth: [1, 0, 1, 1],
       hover: {
         cellBgColor: ''
@@ -9368,7 +9375,8 @@ export function createTable() {
     },
     frameStyle: {
       borderLineWidth: 0
-    }
+    },
+    underlayBackgroundColor: '#ddd'
     // axisStyle: {
     //   defaultAxisStyle: {
     //     title: {

diff --git a/packages/vtable/src/ListTable.ts b/packages/vtable/src/ListTable.ts
@@ -872,7 +872,9 @@ export class ListTable extends BaseTable implements ListTableAPI {
   /** 获取单元格对应的编辑器 */
   getEditor(col: number, row: number) {
     const define = this.getBodyColumnDefine(col, row);
-    let editorDefine = define?.editor ?? this.options.editor;
+    let editorDefine = this.isHeader(col, row)
+      ? define?.headerEditor ?? this.options.headerEditor
+      : define?.editor ?? this.options.editor;
 
     if (typeof editorDefine === 'function') {
       const arg = {
@@ -893,9 +895,19 @@ export class ListTable extends BaseTable implements ListTableAPI {
   changeCellValue(col: number, row: number, value: string | number | null) {
     const recordIndex = this.getRecordShowIndexByCell(col, row);
     const { field } = this.internalProps.layoutMap.getBody(col, row);
-    this.dataSource.changeFieldValue(value, recordIndex, field, col, row, this);
+    const beforeChangeValue = this.getCellRawValue(col, row);
+    if (this.isHeader(col, row)) {
+      this.internalProps.layoutMap.updateColumnTitle(col, row, value as string);
+    } else {
+      this.dataSource.changeFieldValue(value, recordIndex, field, col, row, this);
+    }
     // const cell_value = this.getCellValue(col, row);
-    this.scenegraph.updateCellContent(col, row);
+    const range = this.getCellRange(col, row);
+    for (let sCol = range.start.col; sCol <= range.end.col; sCol++) {
+      for (let sRow = range.start.row; sRow <= range.end.row; sRow++) {
+        this.scenegraph.updateCellContent(sCol, sRow);
+      }
+    }
     if (this.widthMode === 'adaptive' || (this.autoFillWidth && this.getAllColsWidth() <= this.tableNoFrameWidth)) {
       if (this.internalProps._widthResizedColMap.size === 0) {
         //如果没有手动调整过行高列宽 则重新计算一遍并重新分配
@@ -918,7 +930,7 @@ export class ListTable extends BaseTable implements ListTableAPI {
     this.fireListeners(TABLE_EVENT_TYPE.CHANGE_CELL_VALUE, {
       col,
       row,
-      rawValue: this.getCellRawValue(col, row),
+      rawValue: beforeChangeValue,
       changedValue: this.getCellOriginValue(col, row)
     });
     this.scenegraph.updateNextFrame();

diff --git a/packages/vtable/src/PivotChart.ts b/packages/vtable/src/PivotChart.ts
@@ -965,50 +965,6 @@ export class PivotChart extends BaseTable implements PivotChartAPI {
     });
   }
 
-  /**
-   * 监听vchart事件
-   * @param type vchart事件类型
-   * @param listener vchart事件监听器
-   * @returns 事件监听器id
-   */
-  onVChartEvent(type: string, callback: AnyFunction): void;
-  onVChartEvent(type: string, query: any, callback: AnyFunction): void;
-  onVChartEvent(type: string, query?: any, callback?: AnyFunction): void {
-    if (!this._chartEventMap[type]) {
-      this._chartEventMap[type] = [];
-    }
-    if (typeof query === 'function') {
-      this._chartEventMap[type].push({ callback: query });
-    } else {
-      this._chartEventMap[type].push({ callback, query });
-    }
-  }
-
-  offVChartEvent(type: string, callback?: AnyFunction): void {
-    // delete this._chartEventMap[type];
-    if (!this._chartEventMap[type]) {
-      return;
-    }
-    if (callback) {
-      this._chartEventMap[type] = this._chartEventMap[type].filter(e => e.callback !== callback);
-    } else {
-      this._chartEventMap[type] = [];
-    }
-  }
-  /** 给activeChartInstance逐个绑定chart用户监听事件 */
-  _bindChartEvent(activeChartInstance: any) {
-    if (activeChartInstance) {
-      for (const key in this._chartEventMap) {
-        (this._chartEventMap[key] || []).forEach(e => {
-          if (e.query) {
-            activeChartInstance.on(key, e.query, e.callback);
-          } else {
-            activeChartInstance.on(key, e.callback);
-          }
-        });
-      }
-    }
-  }
   /** 更新数据过滤规则，适用场景：点击图例项后 更新过滤规则 来更新图表 */
   updateFilterRules(filterRules: FilterRules) {
     this.internalProps.dataConfig.filterRules = filterRules;