Feat/new corner header select mode

packages/vtable/examples/list/list-rowSeriesNumber-cornerHeaderSelectMode.ts

@@ -0,0 +1,111 @@
+import * as VTable from '../../src';
+import { bindDebugTool } from '../../src/scenegraph/debug-tool';
+const CONTAINER_ID = 'vTable';
+const generatePersons = count => {
+  return Array.from(new Array(count)).map((_, i) => ({
+    id: i + 1,
+    email1: `${i + 1}@xxx.com`,
+    name: `小明${i + 1}`,
+    lastName: '王',
+    date1: '2022年9月1日',
+    tel: '000-0000-0000',
+    sex: i % 2 === 0 ? 'boy' : 'girl',
+    work: i % 2 === 0 ? 'back-end engineer' : 'front-end engineer',
+    city: 'beijing'
+  }));
+};
+
+export function createTable() {
+  const records = generatePersons(20);
+  const columns: VTable.ColumnsDefine = [
+    {
+      field: 'id',
+      title: 'ID',
+      width: '1%',
+      minWidth: 200,
+      sort: true
+    },
+    {
+      field: 'email1',
+      title: 'email',
+      width: 200,
+      sort: true
+    },
+    {
+      title: 'full name',
+      columns: [
+        {
+          field: 'name',
+          title: 'First Name',
+          width: 200
+        },
+        {
+          field: 'name',
+          title: 'Last Name',
+          width: 200
+        }
+      ]
+    },
+
+    {
+      field: 'tel',
+      title: 'telephone',
+      width: 150
+    },
+    {
+      field: 'work',
+      title: 'job',
+      width: 200
+    },
+    {
+      field: 'city',
+      title: 'city',
+      width: 150
+    }
+  ];
+  const option: VTable.ListTableConstructorOptions = {
+    container: document.getElementById(CONTAINER_ID),
+    records,
+    columns,
+    tooltip: {
+      isShowOverflowTextTooltip: true
+    },
+    pagination: {
+      perPageCount: 10,
+      currentPage: 0
+    },
+    rowSeriesNumber: {
+      title: '行号',
+      dragOrder: true,
+      headerStyle: {
+        bgColor: '#EEF1F5',
+        borderColor: '#e1e4e8'
+      },
+      style: {
+        borderColor: '#e1e4e8'
+      }
+    },
+    select: {
+      // headerSelectMode: 'body',
+      cornerHeaderSelectMode: 'cell'
+    }
+    // bottomFrozenRowCount: 1
+    // autoWrapText: true,
+    // heightMode: 'autoHeight',
+    // widthMode: 'adaptive'
+  };
+  const tableInstance = new VTable.ListTable(option);
+  window.tableInstance = tableInstance;
+
+  // bindDebugTool(tableInstance.scenegraph.stage, { customGrapicKeys: ['col', 'row'] });
+  // tableInstance.on('sort_click', args => {
+  //   tableInstance.updateSortState(
+  //     {
+  //       field: args.field,
+  //       order: Date.now() % 3 === 0 ? 'desc' : Date.now() % 3 === 1 ? 'asc' : 'normal'
+  //     },
+  //     false
+  //   );
+  //   return false; //return false代表不执行内部排序逻辑
+  // });
+}

packages/vtable/examples/menu.ts

@@ -111,6 +111,10 @@ export const menus = [
         path: 'list',
         name: 'list-rowSeriesNumber'
       },
+      {
+        path: 'list',
+        name: 'list-rowSeriesNumber-cornerHeaderSelectMode'
+      },
       {
         path: 'list',
         name: 'list-transpose-rowSeriesNumber'

packages/vtable/examples/pivot/pivot-grid-tree-select-cornerHeaderSelectMode.ts

@@ -341,7 +341,7 @@ export function createTable() {
         },
         select: {
           headerSelectMode: 'body', // 为 body 时，优先选中body
-          cornerHeaderSelectMode: 'all' // 默认选中整个图表
+          cornerHeaderSelectMode: 'cell' // 默认选中整个图表
         },
         dataConfig: {
           totals: {
@@ -361,6 +361,17 @@ export function createTable() {
             // }
           }
         },
+        rowSeriesNumber: {
+          title: '行号',
+          dragOrder: true,
+          headerStyle: {
+            bgColor: '#EEF1F5',
+            borderColor: '#e1e4e8'
+          },
+          style: {
+            borderColor: '#e1e4e8'
+          }
+        },
         heightMode: 'autoHeight',
         defaultHeaderColWidth: 100,
         autoWrapText: true,

packages/vtable/src/state/select/update-position.ts

@@ -174,6 +174,7 @@ export function updateSelectPosition(
         state.select.ranges = [];
         scenegraph.deleteAllSelectBorder();
       }
+
       if (state.select.headerSelectMode !== 'cell' && table.isColumnHeader(col, row)) {
         // 选中行表头
         const cellRange = table.getCellRange(col, row);
@@ -210,7 +211,8 @@ export function updateSelectPosition(
         // 选中表头行号单元格
         extendSelectRange = false;
 
-        if (state.select.headerSelectMode === 'body') {
+        const { cornerHeaderSelectMode } = state.select;
+        if (cornerHeaderSelectMode === 'body') {
           state.select.ranges.push({
             start: {
               col: table.leftRowSeriesNumberCount,
@@ -219,13 +221,46 @@ export function updateSelectPosition(
             end: { col: table.colCount - 1, row: table.rowCount - 1 },
             skipBodyMerge: true
           });
+        } else if (cornerHeaderSelectMode === 'inline') {
+          // inline 选中行号所在单元格下所有列
+          const cellRange = skipBodyMerge ? { start: { col, row }, end: { col, row } } : table.getCellRange(col, row);
+          state.select.ranges.push({
+            start: { col: cellRange.start.col, row: cellRange.start.row },
+            end: { col: cellRange.end.col, row: table.rowCount - 1 },
+            skipBodyMerge: true
+          });
+        } else if (cornerHeaderSelectMode === 'cell') {
+          // 选中行号单元格
+          const cellRange = skipBodyMerge ? { start: { col, row }, end: { col, row } } : table.getCellRange(col, row);
+          state.select.ranges.push({
+            start: { col: cellRange.start.col, row: cellRange.start.row },
+            end: { col: cellRange.end.col, row: cellRange.end.row },
+            skipBodyMerge: skipBodyMerge || undefined
+          });
         } else {
           state.select.ranges.push({
             start: { col: 0, row: 0 },
             end: { col: table.colCount - 1, row: table.rowCount - 1 },
             skipBodyMerge: true
           });
         }
+        // 旧逻辑
+        // if (state.select.headerSelectMode === 'body') {
+        //   state.select.ranges.push({
+        //     start: {
+        //       col: table.leftRowSeriesNumberCount,
+        //       row: table.columnHeaderLevelCount
+        //     },
+        //     end: { col: table.colCount - 1, row: table.rowCount - 1 },
+        //     skipBodyMerge: true
+        //   });
+        // } else {
+        //   state.select.ranges.push({
+        //     start: { col: 0, row: 0 },
+        //     end: { col: table.colCount - 1, row: table.rowCount - 1 },
+        //     skipBodyMerge: true
+        //   });
+        // }
       } else if ((table.internalProps.layoutMap as SimpleHeaderLayoutMap).isSeriesNumberInBody(col, row)) {
         // 选中内容行号单元格
         extendSelectRange = false;
@@ -249,7 +284,8 @@ export function updateSelectPosition(
         // 选中表头行号单元格
         extendSelectRange = false;
         const { cornerHeaderSelectMode } = state.select;
-        if (state.select.headerSelectMode === 'body' || cornerHeaderSelectMode === 'body') {
+
+        if (cornerHeaderSelectMode === 'body') {
           state.select.ranges.push({
             start: {
               col: table.rowHeaderLevelCount + table.leftRowSeriesNumberCount,
@@ -258,40 +294,41 @@ export function updateSelectPosition(
             end: { col: table.colCount - 1, row: table.rowCount - 1 },
             skipBodyMerge: true
           });
+        } else if (cornerHeaderSelectMode === 'cell') {
+          // 选中普通单元格
+          const cellRange = skipBodyMerge ? { start: { col, row }, end: { col, row } } : table.getCellRange(col, row);
+          state.select.ranges.push({
+            start: { col: cellRange.start.col, row: cellRange.start.row },
+            end: { col: cellRange.end.col, row: cellRange.end.row },
+            skipBodyMerge: skipBodyMerge || undefined
+          });
+        } else if (cornerHeaderSelectMode === 'inline') {
+          // inline
+          const cellRange = skipBodyMerge ? { start: { col, row }, end: { col, row } } : table.getCellRange(col, row);
+          state.select.ranges.push({
+            start: { col: cellRange.start.col, row: cellRange.start.row },
+            end: { col: cellRange.end.col, row: table.rowCount - 1 },
+            skipBodyMerge: true
+          });
+        } else if (cornerHeaderSelectMode === 'all') {
+          // all 或者用户传的其他的什么值 ：'' | 'test'，虽然类型会提示用户不能为其他的值，
+          state.select.ranges.push({
+            start: {
+              col: table.leftRowSeriesNumberCount,
+              row: 0
+            },
+            end: { col: table.colCount - 1, row: table.rowCount - 1 },
+            skipBodyMerge: true
+          });
         } else {
-          if (cornerHeaderSelectMode === 'cell') {
-            // 选中普通单元格
-            const cellRange = skipBodyMerge ? { start: { col, row }, end: { col, row } } : table.getCellRange(col, row);
-            state.select.ranges.push({
-              start: { col: cellRange.start.col, row: cellRange.start.row },
-              end: { col: cellRange.end.col, row: cellRange.end.row },
-              skipBodyMerge: skipBodyMerge || undefined
-            });
-          } else if (cornerHeaderSelectMode === 'inline') {
-            // inline
-            const cellRange = skipBodyMerge ? { start: { col, row }, end: { col, row } } : table.getCellRange(col, row);
-            state.select.ranges.push({
-              start: { col: cellRange.start.col, row: cellRange.start.row },
-              end: { col: cellRange.end.col, row: table.rowCount - 1 },
-              skipBodyMerge: true
-            });
-          } else {
-            // all 或者用户传的其他的什么值 ：'' | 'test'，虽然类型会提示用户不能为其他的值，
-            state.select.ranges.push({
-              start: {
-                col: table.leftRowSeriesNumberCount,
-                row: 0
-              },
-              end: { col: table.colCount - 1, row: table.rowCount - 1 },
-              skipBodyMerge: true
-            });
-          }
-          // 选中全部
-          // state.select.ranges.push({
-          //   start: { col: table.leftRowSeriesNumberCount, row: 0 },
-          //   end: { col: table.colCount - 1, row: table.rowCount - 1 },
-          //   skipBodyMerge: true
-          // });
+          state.select.ranges.push({
+            start: {
+              col: table.leftRowSeriesNumberCount,
+              row: 0
+            },
+            end: { col: table.colCount - 1, row: table.rowCount - 1 },
+            skipBodyMerge: true
+          });
         }
       } else if (col >= 0 && row >= 0) {
         // 选中普通单元格

packages/vtable/src/state/state.ts

@@ -441,7 +441,6 @@ export class StateManager {
       // enableColumnHighlight,
       /** 点击表头单元格时连带body整行或整列选中 或仅选中当前单元格，默认或整行或整列选中*/
       headerSelectMode,
-      cornerHeaderSelectMode,
       disableSelect,
       disableHeaderSelect,
       highlightMode,
@@ -451,7 +450,8 @@ export class StateManager {
       {
         /** 点击表头单元格时连带body整行或整列选中 或仅选中当前单元格，默认或整行或整列选中*/
         headerSelectMode: 'inline',
-        cornerHeaderSelectMode: 'all', // 点击 corner 默认选中整个图表
+        /** 不默认设置该值了，从用户传的 cornerHeaderSelectMode 中获取 */
+        // cornerHeaderSelectMode: '',
         disableSelect: false,
         disableHeaderSelect: false,
         highlightMode: 'cell',
@@ -460,6 +460,13 @@ export class StateManager {
       this.table.options.select
     );
 
+    /** 设置 cornerHeaderSelectMode */
+    const cornerHeaderSelectMode = this.table.options.select?.cornerHeaderSelectMode
+      ? this.table.options.select?.cornerHeaderSelectMode
+      : this.table.options.select?.headerSelectMode === 'body'
+      ? this.table.options.select?.headerSelectMode
+      : 'all';
+
     // if (enableRowHighlight && enableColumnHighlight) {
     //   this.select.highlightScope = HighlightScope.cross;
     // } else if (enableRowHighlight) {