fix: 解决移动端下，树形结构展开、收起交互失效的问题 (#3039)

* fix: 解决移动端下，树形结构展开、收起交互失效的问题。 * fix: 解决移动端下，树形结构展开、收起交互失效的问题 * fix: 解决移动端下，树形结构展开、收起交互失效的问题 * fix: 解决移动端下，树形结构展开、收起交互失效的问题 --------- Co-authored-by: gongbei <[email protected]> Co-authored-by: Jinke Li <[email protected]>
antvis · Dec 13, 2024 · a97625c · a97625c
1 parent 001573f
commit a97625c
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 8 deletions.
diff --git a/packages/s2-core/src/cell/corner-cell.ts b/packages/s2-core/src/cell/corner-cell.ts
@@ -24,6 +24,7 @@ import {
   getResizeAreaAttrs,
   shouldAddResizeArea,
 } from '../utils/interaction/resize';
+import { isMobile } from '../utils/is-mobile';
 import { HeaderCell } from './header-cell';
 
 export class CornerCell extends HeaderCell<CornerHeaderConfig> {
@@ -55,6 +56,19 @@ export class CornerCell extends HeaderCell<CornerHeaderConfig> {
     this.update();
   }
 
+  private onTreeIconClick(isCollapsed: boolean) {
+    if (isMobile()) {
+      return;
+    }
+
+    this.emitCollapseEvent(isCollapsed);
+  }
+
+  private emitCollapseEvent(isCollapsed: boolean) {
+    this.spreadsheet.facet.resetScrollY();
+    this.spreadsheet.emit(S2Event.ROW_CELL_ALL_COLLAPSED__PRIVATE, isCollapsed);
+  }
+
   /**
    * 绘制折叠展开的 icon
    */
@@ -85,13 +99,15 @@ export class CornerCell extends HeaderCell<CornerHeaderConfig> {
       },
       isCollapsed,
       onClick: () => {
-        this.spreadsheet.facet.resetScrollY();
-        this.spreadsheet.emit(
-          S2Event.ROW_CELL_ALL_COLLAPSED__PRIVATE,
-          isCollapsed,
-        );
+        this.onTreeIconClick(isCollapsed);
       },
     });
+    // 移动端, 点击热区为整个单元格
+    if (isMobile()) {
+      this.addEventListener('touchend', () => {
+        this.emitCollapseEvent(isCollapsed);
+      });
+    }
   }
 
   protected isLastRowCornerCell() {

diff --git a/packages/s2-core/src/cell/row-cell.ts b/packages/s2-core/src/cell/row-cell.ts
@@ -161,8 +161,8 @@ export class RowCell extends HeaderCell<RowHeaderConfig> {
       iconCfg: {
         x: iconX,
         y: iconY,
-        width: size!,
-        height: size!,
+        width: size,
+        height: size,
         fill,
       },
       isCollapsed,
@@ -173,7 +173,7 @@ export class RowCell extends HeaderCell<RowHeaderConfig> {
 
     // 移动端, 点击热区为整个单元格
     if (isMobile()) {
-      this.addEventListener('click', () => {
+      this.addEventListener('touchend', () => {
         this.emitCollapseEvent();
       });
     }