feat: add api getSelectedCellRanges

VisActor · Mar 25, 2024 · 7792654 · 7792654
1 parent 8c3384c
commit 7792654
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 11 deletions.
diff --git a/common/changes/@visactor/vtable/feat-cell-fill-handle_2024-03-24-11-51.json b/common/changes/@visactor/vtable/feat-cell-fill-handle_2024-03-24-11-51.json
@@ -2,7 +2,7 @@
   "changes": [
     {
       "comment": "feat: add excel options to support fill handle\n\n",
-      "type": "none",
+      "type": "minor",
       "packageName": "@visactor/vtable"
     }
   ],

diff --git a/packages/vtable/examples/interactive/fill-handle.ts b/packages/vtable/examples/interactive/fill-handle.ts
@@ -199,11 +199,15 @@ export function createTable() {
   };
   const tableInstance = new VTable.ListTable(option);
   window.tableInstance = tableInstance;
+  let startSelectCellRanges;
   tableInstance.on('mousedown_fill_handle', arg => {
     console.log('mousedown_fill_handle');
+    startSelectCellRanges = tableInstance.getSelectedCellRanges();
   });
   tableInstance.on('drag_fill_handle_end', arg => {
-    console.log('drag_fill_handle_end');
+    console.log('drag_fill_handle_end', arg);
+    const values = [[1], [2], [3]];
+    tableInstance.changeCellValues(startSelectCellRanges[0].end.col, startSelectCellRanges[0].end.row, values);
   });
   tableInstance.on('dblclick_fill_handle', arg => {
     console.log('dblclick_fill_handle');

diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts
@@ -67,7 +67,16 @@ import { HeaderHelper } from '../header-helper/header-helper';
 import type { PivotHeaderLayoutMap } from '../layout/pivot-header-layout';
 import { TooltipHandler } from '../components/tooltip/TooltipHandler';
 import type { CachedDataSource, DataSource } from '../data';
-import { AABBBounds, isNumber, isBoolean, isFunction, type ITextSize, isValid, merge } from '@visactor/vutils';
+import {
+  AABBBounds,
+  isNumber,
+  isBoolean,
+  isFunction,
+  type ITextSize,
+  isValid,
+  merge,
+  cloneDeep
+} from '@visactor/vutils';
 import { textMeasure } from '../scenegraph/utils/text-measure';
 import { getProp } from '../scenegraph/utils/get-prop';
 import type {
@@ -3661,6 +3670,14 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
     }
     return cellInfoArray;
   }
+  getSelectedCellRanges(): CellRange[] {
+    const ranges = this.stateManager.select.ranges;
+    if (!ranges.length) {
+      return [];
+    }
+    return cloneDeep(ranges);
+  }
+
   /** 计算字体的宽度接口 */
   measureText(text: string, font: { fontSize: number; fontWeight: string | number; fontFamily: string }): ITextSize {
     return textMeasure.measureText(text, font);

diff --git a/packages/vtable/src/event/event.ts b/packages/vtable/src/event/event.ts
@@ -272,17 +272,27 @@ export class EventManager {
         let updateCol;
         const currentRange = this.table.stateManager.select.ranges[this.table.stateManager.select.ranges.length - 1];
         if (isSelectMoving) {
-          if (!isValid(this.table.stateManager.fillHandle.direcitonRow)) {
+          if (!isValid(this.table.stateManager.fillHandle.directionRow)) {
             if (
               Math.abs(this.table.stateManager.fillHandle.startY - eventArgsSet.abstractPos.y) >=
               Math.abs(this.table.stateManager.fillHandle.startX - eventArgsSet.abstractPos.x)
             ) {
-              this.table.stateManager.fillHandle.direcitonRow = true;
+              this.table.stateManager.fillHandle.directionRow = true;
+              if (this.table.stateManager.fillHandle.startY - eventArgsSet.abstractPos.y > 0) {
+                this.table.stateManager.fillHandle.direction = 'top';
+              } else {
+                this.table.stateManager.fillHandle.direction = 'bottom';
+              }
             } else {
-              this.table.stateManager.fillHandle.direcitonRow = false;
+              this.table.stateManager.fillHandle.directionRow = false;
+              if (this.table.stateManager.fillHandle.startX - eventArgsSet.abstractPos.x > 0) {
+                this.table.stateManager.fillHandle.direction = 'left';
+              } else {
+                this.table.stateManager.fillHandle.direction = 'right';
+              }
             }
           }
-          if (this.table.stateManager.fillHandle.direcitonRow) {
+          if (this.table.stateManager.fillHandle.directionRow) {
             updateRow = eventArgs.row;
             updateCol = currentRange.end.col;
           } else {

diff --git a/packages/vtable/src/state/state.ts b/packages/vtable/src/state/state.ts
@@ -63,7 +63,8 @@ export class StateManager {
     selecting: boolean;
   };
   fillHandle: {
-    direcitonRow?: boolean;
+    direction?: 'top' | 'bottom' | 'left' | 'right';
+    directionRow?: boolean;
     isFilling: boolean;
     startX: number;
     startY: number;
@@ -603,8 +604,9 @@ export class StateManager {
     this.fillHandle.isFilling = false;
     this.fillHandle.startX = undefined;
     this.fillHandle.startY = undefined;
-    this.table.stateManager.fillHandle.direcitonRow = undefined;
-    this.table.eventManager.isDraging && this.table.fireListeners(TABLE_EVENT_TYPE.DRAG_FILL_HANDLE_END, {});
+    this.table.stateManager.fillHandle.directionRow = undefined;
+    this.table.eventManager.isDraging &&
+      this.table.fireListeners(TABLE_EVENT_TYPE.DRAG_FILL_HANDLE_END, { direction: this.fillHandle.direction });
   }
   updateResizeCol(xInTable: number, yInTable: number) {
     updateResizeColumn(xInTable, yInTable, this);

diff --git a/packages/vtable/src/ts-types/base-table.ts b/packages/vtable/src/ts-types/base-table.ts
@@ -669,6 +669,7 @@ export interface BaseTableAPI {
   getCopyValue: () => string;
 
   getSelectedCellInfos: () => CellInfo[][];
+  getSelectedCellRanges: () => CellRange[];
   getCellInfo: (col: number, row: number) => Omit<MousePointerCellEvent, 'target'>;
 
   showTooltip: (col: number, row: number, tooltipOptions?: TooltipOptions) => void;

diff --git a/packages/vtable/src/ts-types/events.ts b/packages/vtable/src/ts-types/events.ts
@@ -161,7 +161,7 @@ export interface TableEventHandlersEventArgumentMap {
   change_cell_value: { col: number; row: number; rawValue: string | number; changedValue: string | number };
 
   mousedown_fill_handle: {};
-  drag_fill_handle_end: {};
+  drag_fill_handle_end: { direction?: 'top' | 'bottom' | 'left' | 'right' };
   dblclick_fill_handle: {};
 }
 export interface DrillMenuEventInfo {