feat(resize): add resize active options, close #855

packages/s2-core/__tests__/bugs/issue-860-spec.ts

@@ -15,7 +15,7 @@ const s2options: S2Options = {
   frozenRowHeader: false,
 };
 
-describe('Column Formatter Tests', () => {
+describe('Empty String Row Value Tests', () => {
   let s2: SpreadSheet;
 
   beforeEach(() => {

packages/s2-core/__tests__/spreadsheet/spread-sheet-resize-spec.ts

@@ -0,0 +1,107 @@
+import * as mockDataConfig from 'tests/data/simple-data.json';
+import { getContainer } from 'tests/util/helpers';
+import { PivotSheet, SpreadSheet } from '@/sheet-type';
+import {
+  KEY_GROUP_COL_RESIZE_AREA,
+  KEY_GROUP_CORNER_RESIZE_AREA,
+  KEY_GROUP_ROW_RESIZE_AREA,
+  S2Options,
+} from '@/common';
+
+function renderSheet(options: S2Options) {
+  const s2 = new PivotSheet(getContainer(), mockDataConfig, {
+    height: 150,
+    ...options,
+  });
+  s2.setThemeCfg({
+    theme: {
+      resizeArea: {
+        backgroundOpacity: 1,
+      },
+    },
+  });
+  s2.render();
+  return s2;
+}
+
+describe('SpreadSheet Resize Active Tests', () => {
+  test('should all resize area by default', () => {
+    const s2 = renderSheet({} as S2Options);
+
+    const group = s2.facet.foregroundGroup;
+
+    expect(group.findById(KEY_GROUP_ROW_RESIZE_AREA)).toBeDefined();
+    expect(group.findById(KEY_GROUP_CORNER_RESIZE_AREA)).toBeDefined();
+    expect(group.findById(KEY_GROUP_COL_RESIZE_AREA)).toBeDefined();
+  });
+
+  test('should disable row cell resize area', () => {
+    const s2 = renderSheet({
+      interaction: {
+        resizeActive: {
+          enableRowCellVerticalResize: false,
+        },
+      },
+    } as S2Options);
+
+    const group = s2.facet.foregroundGroup;
+    expect(group.findById(KEY_GROUP_ROW_RESIZE_AREA)).toBeNull();
+  });
+
+  test('should disable corner cell resize area', () => {
+    const s2 = renderSheet({
+      interaction: {
+        resizeActive: {
+          enableCornerCellHorizontalResize: false,
+        },
+      },
+    } as S2Options);
+
+    const group = s2.facet.foregroundGroup;
+
+    expect(group.findById(KEY_GROUP_CORNER_RESIZE_AREA)).toBeNull();
+  });
+
+  test('should disable col cell resize area', () => {
+    const s2 = renderSheet({
+      interaction: {
+        resizeActive: {
+          enableColCellHorizontalResize: false,
+          enableColCellVerticalResize: false,
+        },
+      },
+    } as S2Options);
+
+    const group = s2.facet.foregroundGroup;
+
+    expect(group.findById(KEY_GROUP_COL_RESIZE_AREA)).toBeNull();
+  });
+
+  test('should disable col cell vertical direction resize area', () => {
+    const s2 = renderSheet({
+      interaction: {
+        resizeActive: {
+          enableColCellVerticalResize: false,
+        },
+      },
+    } as S2Options);
+
+    const group = s2.facet.foregroundGroup;
+
+    expect(group.findById(KEY_GROUP_COL_RESIZE_AREA)).toBeDefined();
+  });
+
+  test('should disable col cell horizontal direction resize area', () => {
+    const s2 = renderSheet({
+      interaction: {
+        resizeActive: {
+          enableColCellHorizontalResize: false,
+        },
+      },
+    } as S2Options);
+
+    const group = s2.facet.foregroundGroup;
+
+    expect(group.findById(KEY_GROUP_COL_RESIZE_AREA)).toBeDefined();
+  });
+});

packages/s2-core/src/cell/base-cell.ts

@@ -143,6 +143,10 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
     return this.getStyle('resizeArea');
   }
 
+  protected getResizeActiveOptions() {
+    return this.spreadsheet.options?.interaction?.resizeActive;
+  }
+
   protected getCellArea() {
     const { x, y, height, width } = this.meta;
     return { x, y, height, width };

packages/s2-core/src/cell/col-cell.ts

@@ -193,6 +193,10 @@ export class ColCell extends HeaderCell {
   }
 
   protected drawHorizontalResizeArea() {
+    if (!this.getResizeActiveOptions().enableColCellVerticalResize) {
+      return;
+    }
+
     const { cornerWidth, width: headerWidth } = this.headerConfig;
     const { y, height } = this.meta;
     const resizeStyle = this.getResizeAreaStyle();
@@ -232,7 +236,10 @@ export class ColCell extends HeaderCell {
   }
 
   protected drawVerticalResizeArea() {
-    if (!this.meta.isLeaf) {
+    if (
+      !this.meta.isLeaf ||
+      !this.getResizeActiveOptions().enableColCellHorizontalResize
+    ) {
       return;
     }
 

packages/s2-core/src/cell/corner-cell.ts

@@ -227,6 +227,10 @@ export class CornerCell extends HeaderCell {
   }
 
   private drawResizeArea() {
+    if (!this.getResizeActiveOptions().enableCornerCellHorizontalResize) {
+      return;
+    }
+
     const resizeStyle = this.getResizeAreaStyle();
 
     const resizeArea = getOrCreateResizeAreaGroupById(

packages/s2-core/src/cell/row-cell.ts

@@ -195,7 +195,10 @@ export class RowCell extends HeaderCell {
   }
 
   protected drawResizeAreaInLeaf() {
-    if (!this.meta.isLeaf) {
+    if (
+      !this.meta.isLeaf ||
+      !this.getResizeActiveOptions().enableRowCellVerticalResize
+    ) {
       return;
     }
 

packages/s2-core/src/common/constant/options.ts

@@ -57,6 +57,12 @@ export const DEFAULT_OPTIONS: Readonly<S2Options> = {
       vertical: 1,
     },
     autoResetSheetStyle: true,
+    resizeActive: {
+      enableColCellHorizontalResize: true,
+      enableColCellVerticalResize: true,
+      enableCornerCellHorizontalResize: true,
+      enableRowCellVerticalResize: true,
+    },
   },
   showSeriesNumber: false,
   scrollReachNodeField: {},

packages/s2-core/src/common/interface/resize.ts

@@ -53,3 +53,10 @@ export interface ResizeInfo {
   height: number;
   size: number;
 }
+
+export interface ResizeActiveOptions {
+  enableRowCellVerticalResize?: boolean; // 行头垂直方向resize -> 针对行头叶子节点
+  enableCornerCellHorizontalResize?: boolean; // 角头水平方向resize -> 针对角头CornerNodeType为Series和Row
+  enableColCellHorizontalResize?: boolean; // 列头水平方向resize -> 针对列头叶子节点
+  enableColCellVerticalResize?: boolean; // 列头垂直方向resize -> 针对列头各层级节点
+}

packages/s2-core/src/common/interface/s2Options.ts

@@ -1,3 +1,4 @@
+import { ResizeActiveOptions } from './resize';
 import { CustomInteraction } from './interaction';
 import { Conditions } from './condition';
 import {
@@ -46,6 +47,8 @@ export interface InteractionOptions {
   readonly hiddenColumnFields?: string[];
   // the ratio to control scroll speed, default set to 1
   readonly scrollSpeedRatio?: ScrollRatio;
+  // enable resize area, default set to all enable
+  readonly resizeActive?: ResizeActiveOptions;
   /** ***********CUSTOM INTERACTION HOOKS**************** */
   // register custom interactions
   customInteractions?: CustomInteraction[];