[WIP]Feat/drag sort row

docs/assets/option/en/common/option-secondary.md

@@ -189,6 +189,10 @@ The switch of dragging the header to move the position. After selecting a cell,
 - 'column' Only the column header can be swapped
 - 'row' Only the row header can be swapped
 
+#${prefix} dragSortRow(boolean) = false
+
+Whether to enable row drag sorting.
+
 #${prefix} hover(Object)
 
 Hover interaction configuration, specific configuration items as follows:

docs/assets/option/zh/common/option-secondary.md

@@ -187,6 +187,11 @@ export interface SelectAllOnCtrlAOption {
 - 'column' 只有换列表头可换位
 - 'row' 只有换行表头可换位
 
+
+#${prefix} dragSortRow(boolean) = false
+
+控制拖拽行移动位置的开关。点击某个单元格后，鼠标拖拽该单元格可触发移动。
+
 #${prefix} hover(Object)
 
 hover 交互配置，具体配置项如下：

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

@@ -207,6 +207,7 @@ export function createTable() {
     //   perPageCount: 20,
     //   currentPage: 1
     // },
+    dragSortRow: true,
     rowSeriesNumber: {
       title: '',
       // field: 'sex',
@@ -228,7 +229,7 @@ export function createTable() {
   };
   const tableInstance = new VTable.ListTable(option);
   tableInstance.on('change_header_position', args => {
-    console.log('change_header_position');
+    console.log('change_header_position', args);
   });
   window.tableInstance = tableInstance;
   bindDebugTool(tableInstance.scenegraph.stage, { customGrapicKeys: ['col', 'row'] });

packages/vtable/src/event/listener/table-group.ts

@@ -474,6 +474,17 @@ export function bindTableGroupListener(eventManager: EventManager) {
         // 如果没有正常退出编辑状态 则不执行下面的逻辑 如选择其他单元格的逻辑
         return;
       }
+      if (table.options.dragSortRow === true) {
+        stateManager.startMoveCol(
+          eventArgsSet.eventArgs.col,
+          eventArgsSet.eventArgs.row,
+          eventArgsSet.abstractPos.x,
+          eventArgsSet.abstractPos.y,
+          eventArgsSet.eventArgs?.event?.nativeEvent
+        );
+        stateManager.updateInteractionState(InteractionState.grabing);
+        return;
+      }
 
       const hitIcon = (eventArgsSet?.eventArgs?.target as any)?.role?.startsWith('icon')
         ? eventArgsSet.eventArgs.target

packages/vtable/src/layout/pivot-header-layout.ts

@@ -2492,14 +2492,22 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
     }
     return undefined;
   }
+
+  /**
+   * 判断表格行是否可拖拽
+   * dragSortRow === true 表格行可拖拽
+   */
+  canDragSortRow(col: number, row: number): boolean {
+    return this._table.options.dragSortRow || this.isSeriesNumberInBody(col, row);
+  }
   /**
    * 判断从source地址是否可以移动到target地址
    * @param source
    * @param target
    * @returns boolean 是否可以移动
    */
   canMoveHeaderPosition(source: CellAddress, target: CellAddress): boolean {
-    if (this.isSeriesNumberInHeader(target.col, target.row) || this.isSeriesNumberInHeader(source.col, source.row)) {
+    if (this.canDragSortRow(target.col, target.row) || this.canDragSortRow(source.col, source.row)) {
       return false;
     }
     if (this.isCornerHeader(target.col, target.row)) {
@@ -2508,7 +2516,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
     if (source.col < 0 || source.row < 0 || target.col < 0 || target.row < 0) {
       return false;
     }
-    if (this.isSeriesNumberInBody(target.col, target.row) && this.isSeriesNumberInBody(source.col, source.row)) {
+    if (this.canDragSortRow(target.col, target.row) && this.canDragSortRow(source.col, source.row)) {
       // 如果是子节点之间相互换位置  则匹配表头最后一级
       // if (
       //   this.getColumnDefine(source.col + this.leftRowSeriesNumberColumnCount, source.row).isChildNode &&

packages/vtable/src/layout/simple-header-layout.ts

@@ -1081,13 +1081,21 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI {
     if (this.isColumnHeader(col, row)) {
       return this.getCellId(col, row - 1);
     } else if (this.isRowHeader(col, row)) {
-      if (this.isSeriesNumberInBody(col - 1, row)) {
+      if (this.canDragSortRow(col - 1, row)) {
         return undefined;
       }
       return this.getCellId(col - 1, row);
     }
     return undefined;
   }
+
+  /**
+   * 判断表格行是否可拖拽
+   * dragSortRow === true 表格行可拖拽
+   */
+  canDragSortRow(col: number, row: number): boolean {
+    return this._table.options.dragSortRow || this.isSeriesNumberInBody(col, row);
+  }
   /**
    * 判断从source地址是否可以移动到target地址
    * @param source
@@ -1099,8 +1107,8 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI {
       return false;
     } else if (
       !this.transpose &&
-      this.isSeriesNumberInBody(target.col, target.row) &&
-      this.isSeriesNumberInBody(source.col, source.row)
+      this.canDragSortRow(target.col, target.row) &&
+      this.canDragSortRow(source.col, source.row)
     ) {
       // return true;
       const sourceIndex = this.getRecordShowIndexByCell(0, source.row);
@@ -1109,8 +1117,8 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI {
       return canMove;
     } else if (
       this.transpose &&
-      this.isSeriesNumberInBody(target.col, target.row) &&
-      this.isSeriesNumberInBody(source.col, source.row)
+      this.canDragSortRow(target.col, target.row) &&
+      this.canDragSortRow(source.col, source.row)
     ) {
       // 如果是子节点之间相互换位置  则匹配表头最后一级
       if (
@@ -1220,9 +1228,9 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI {
         };
       } else if (
         this.isRowHeader(source.col, source.row) ||
-        (this.isSeriesNumberInBody(source.col, source.row) && this.transpose)
+        (this.canDragSortRow(source.col, source.row) && this.transpose)
       ) {
-        if (this.isSeriesNumberInBody(source.col, source.row)) {
+        if (this.canDragSortRow(source.col, source.row)) {
           sourceCellRange = this.getCellRange(source.col + this.leftRowSeriesNumberColumnCount, source.row); // 把拖拽转移到拖拽表头节点
         }
         // source单元格包含的列数
@@ -1268,7 +1276,7 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI {
           targetSize: targetCellRange.end.row - targetCellRange.start.row + 1,
           moveType: 'row'
         };
-      } else if (this.isSeriesNumberInBody(source.col, source.row)) {
+      } else if (this.canDragSortRow(source.col, source.row)) {
         return {
           sourceIndex: source.row,
           targetIndex: target.row,

packages/vtable/src/scenegraph/component/cell-mover.ts

@@ -94,7 +94,7 @@ export class CellMover {
       linePoints.push({ x: 0, y: this.table.tableNoFrameHeight });
     } else if (
       cellLocation === 'rowHeader' ||
-      (this.table.internalProps.layoutMap as SimpleHeaderLayoutMap).isSeriesNumberInBody(col, row)
+      (this.table.internalProps.layoutMap as SimpleHeaderLayoutMap).canDragSortRow(col, row)
     ) {
       rectY = this.table.getRowsHeight(0, row - 1) - this.table.stateManager.scroll.verticalBarPos;
       rectX = this.table.getColsWidth(0, this.table.frozenColCount - 1);

packages/vtable/src/state/cell-move/index.ts

@@ -22,7 +22,7 @@ export function startMoveCol(col: number, row: number, x: number, y: number, sta
     cellLocation === 'columnHeader'
       ? state.columnMove.x
       : cellLocation === 'rowHeader' ||
-        (state.table.internalProps.layoutMap as SimpleHeaderLayoutMap).isSeriesNumberInBody(col, row)
+        (state.table.internalProps.layoutMap as SimpleHeaderLayoutMap).canDragSortRow(col, row)
       ? state.columnMove.y
       : 0;
 
@@ -83,7 +83,7 @@ export function updateMoveCol(col: number, row: number, x: number, y: number, st
       }
     } else if (
       cellLocation === 'rowHeader' ||
-      (state.table.internalProps.layoutMap as SimpleHeaderLayoutMap).isSeriesNumberInBody(col, row)
+      (state.table.internalProps.layoutMap as SimpleHeaderLayoutMap).canDragSortRow(col, row)
     ) {
       backY = state.columnMove.y;
       if (state.table.isFrozenRow(row)) {
@@ -171,7 +171,7 @@ export function endMoveCol(state: StateManager): boolean {
       }
       if (
         !(state.table as ListTable).transpose &&
-        (state.table.internalProps.layoutMap as SimpleHeaderLayoutMap).isSeriesNumberInBody(
+        (state.table.internalProps.layoutMap as SimpleHeaderLayoutMap).canDragSortRow(
           state.columnMove.colSource,
           state.columnMove.rowSource
         )

packages/vtable/src/ts-types/base-table.ts

@@ -136,6 +136,8 @@ export interface IBaseTableProtected {
   rowResizeType?: 'row' | 'indicator' | 'all' | 'indicatorGroup';
   /** 控制拖拽表头移动位置顺序开关 */
   dragHeaderMode?: 'all' | 'none' | 'column' | 'row';
+  /** 拖拽表格行调整顺序*/
+  dragSortRow?: boolean;
   /** 拖拽表头移动位置 针对冻结部分的规则
    * "disabled"（禁止调整冻结列位置）：不允许其他列的表头移入冻结列，也不允许冻结列移出，冻结列保持不变。
    * "adjustFrozenCount"（根据交互结果调整冻结数量）：允许其他列的表头移入冻结列，及冻结列移出，并根据拖拽的动作调整冻结列的数量。当其他列的表头被拖拽进入冻结列位置时，冻结列数量增加；当其他列的表头被拖拽移出冻结列位置时，冻结列数量减少。
@@ -227,6 +229,10 @@ export interface IBaseTableProtected {
   //重新思考逻辑：如果为false，行高按设置的rowHeight；如果设置为true，则按lineHeight及是否自动换行综合计算行高 2021.11.19 by：lff
 
   autoWrapText?: boolean;
+
+  // 支持拖拽排序
+  dragSort?: boolean | 'row' | 'col';
+
   enableLineBreak?: boolean;
 
   menuHandler: MenuHandler;
@@ -328,6 +334,8 @@ export interface BaseTableConstructorOptions {
   rowResizeMode?: 'all' | 'none' | 'header' | 'body';
   /** 控制拖拽表头移动位置顺序开关 */
   dragHeaderMode?: 'all' | 'none' | 'column' | 'row';
+  /** 拖拽表格行调整顺序*/
+  dragSortRow?: boolean;
 
   /**
    * 是否显示固定列图钉 基本表格生效