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

antvis · Dec 13, 2024 · 47ca2b4 · 47ca2b4
1 parent f32d977
commit 47ca2b4
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 45 deletions.
diff --git a/packages/s2-core/src/cell/corner-cell.ts b/packages/s2-core/src/cell/corner-cell.ts
@@ -87,28 +87,27 @@ export class CornerCell extends HeaderCell<CornerHeaderConfig> {
       values(collapseFields!).filter(Boolean).length === rootRowNodes.length ||
       rootRowNodes.every((node) => node.isCollapsed);
     const isCollapsed = isAllCollapsed;
-    const { offsetXY, offsetWH } = this.getActionIconOffset(size);
 
     this.treeIcon = renderTreeIcon({
       group: this,
       iconCfg: {
-        x: area.x - offsetXY,
-        y: this.getIconPosition().y - offsetXY,
-        width: size + offsetWH,
-        height: size + offsetWH,
+        x: area.x,
+        y: this.getIconPosition().y,
+        width: size,
+        height: size,
         fill,
       },
       isCollapsed,
       onClick: () => {
         this.onTreeIconClick(isCollapsed);
       },
-      onTouchEnd: () => {
-        /**
-         * 移动端时，绑定展开、收起事件
-         */
-        this.emitCollapseEvent(isCollapsed);
-      },
     });
+    // 移动端, 点击热区为整个单元格
+    if (isMobile()) {
+      this.addEventListener('touchend', () => {
+        this.emitCollapseEvent(isCollapsed);
+      });
+    }
   }
 
   protected isLastRowCornerCell() {

diff --git a/packages/s2-core/src/cell/header-cell.ts b/packages/s2-core/src/cell/header-cell.ts
@@ -43,7 +43,6 @@ import {
 } from '../utils/cell/header-cell';
 import { findFieldCondition } from '../utils/condition/condition';
 import { renderIcon } from '../utils/g-renders';
-import { isMobile } from '../utils/is-mobile';
 import { getSortTypeIcon } from '../utils/sort-action';
 
 export abstract class HeaderCell<
@@ -520,20 +519,4 @@ export abstract class HeaderCell<
   public getActionIcons() {
     return this.actionIcons || [];
   }
-
-  protected getActionIconOffset(iconSize: number) {
-    let offsetXY = 0;
-    let offsetWH = 0;
-
-    // 移动端的时候，将icon变大，从而增加触发交互的面积
-    if (isMobile()) {
-      offsetXY = iconSize / 4;
-      offsetWH = iconSize / 2;
-    }
-
-    return {
-      offsetXY,
-      offsetWH,
-    };
-  }
 }
diff --git a/packages/s2-core/src/cell/row-cell.ts b/packages/s2-core/src/cell/row-cell.ts
@@ -155,28 +155,28 @@ export class RowCell extends HeaderCell<RowHeaderConfig> {
 
     const iconX = x + contentIndent;
     const iconY = this.getIconPosition().y;
-    const { offsetXY, offsetWH } = this.getActionIconOffset(size);
 
     this.treeIcon = renderTreeIcon({
       group: this,
       iconCfg: {
-        x: iconX - offsetXY,
-        y: iconY - offsetXY,
-        width: size + offsetWH,
-        height: size + offsetWH,
+        x: iconX,
+        y: iconY,
+        width: size,
+        height: size,
         fill,
       },
       isCollapsed,
       onClick: () => {
         this.onTreeIconClick();
       },
-      onTouchEnd: () => {
-        /**
-         * 移动端时，绑定展开、收起事件
-         */
-        this.emitCollapseEvent();
-      },
     });
+
+    // 移动端, 点击热区为整个单元格
+    if (isMobile()) {
+      this.addEventListener('touchend', () => {
+        this.emitCollapseEvent();
+      });
+    }
   }
 
   protected drawTreeLeafNodeAlignDot() {

diff --git a/packages/s2-core/src/utils/g-renders.ts b/packages/s2-core/src/utils/g-renders.ts
@@ -130,9 +130,8 @@ export function renderTreeIcon(options: {
   isCollapsed?: boolean | null;
   iconCfg: Omit<GuiIconCfg, 'name'>;
   onClick?: () => void;
-  onTouchEnd?: () => void;
 }) {
-  const { group, iconCfg, isCollapsed, onClick, onTouchEnd } = options;
+  const { group, iconCfg, isCollapsed, onClick } = options;
   const iconShape = renderIcon(group, {
     ...iconCfg,
     name: isCollapsed ? 'Plus' : 'Minus',
@@ -143,9 +142,5 @@ export function renderTreeIcon(options: {
     iconShape.addEventListener('click', onClick);
   }
 
-  if (isFunction(onTouchEnd)) {
-    iconShape.addEventListener('touchend', onTouchEnd);
-  }
-
   return iconShape;
 }