From ed8473a2a56ed89f50e5290b32dfe4065458a6ff Mon Sep 17 00:00:00 2001 From: gongbei Date: Mon, 2 Dec 2024 14:23:00 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E7=A7=BB=E5=8A=A8?= =?UTF-8?q?=E7=AB=AF=E4=B8=8B=EF=BC=8C=E6=A0=91=E5=BD=A2=E7=BB=93=E6=9E=84?= =?UTF-8?q?=E5=B1=95=E5=BC=80=E3=80=81=E6=94=B6=E8=B5=B7=E4=BA=A4=E4=BA=92?= =?UTF-8?q?=E5=A4=B1=E6=95=88=E7=9A=84=E9=97=AE=E9=A2=98=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/s2-core/src/cell/corner-cell.ts | 38 ++++++++++++++++++------ packages/s2-core/src/cell/row-cell.ts | 38 ++++++++++++++++++------ packages/s2-core/src/utils/g-renders.ts | 7 ++++- 3 files changed, 64 insertions(+), 19 deletions(-) diff --git a/packages/s2-core/src/cell/corner-cell.ts b/packages/s2-core/src/cell/corner-cell.ts index bfc193d61c..52cf6b7bea 100644 --- 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 { @@ -55,6 +56,11 @@ export class CornerCell extends HeaderCell { this.update(); } + private onTreeIconClick(isCollapsed: boolean) { + this.spreadsheet.facet.resetScrollY(); + this.spreadsheet.emit(S2Event.ROW_CELL_ALL_COLLAPSED__PRIVATE, isCollapsed); + } + /** * 绘制折叠展开的 icon */ @@ -73,23 +79,37 @@ export class CornerCell extends HeaderCell { values(collapseFields!).filter(Boolean).length === rootRowNodes.length || rootRowNodes.every((node) => node.isCollapsed); const isCollapsed = isAllCollapsed; + let offsetXY = 0; + let offsetWH = 0; + + // 移动端的时候，将icon变化，从而增加触发交互的面积 + if (isMobile()) { + offsetXY = size / 4; + offsetWH = size / 2!; + } this.treeIcon = renderTreeIcon({ group: this, iconCfg: { - x: area.x, - y: this.getIconPosition().y, - width: size, - height: size, + x: area.x - offsetXY, + y: this.getIconPosition().y - offsetXY, + width: size + offsetWH, + height: size + offsetWH, fill, }, isCollapsed, onClick: () => { - this.spreadsheet.facet.resetScrollY(); - this.spreadsheet.emit( - S2Event.ROW_CELL_ALL_COLLAPSED__PRIVATE, - isCollapsed, - ); + if (isMobile()) { + return; + } + + this.onTreeIconClick(isCollapsed); + }, + onTouchEnd: () => { + /** + * 移动端时，绑定展开、收起事件 + */ + this.onTreeIconClick(isCollapsed); }, }); } diff --git a/packages/s2-core/src/cell/row-cell.ts b/packages/s2-core/src/cell/row-cell.ts index 03840d442b..06ca504593 100644 --- a/packages/s2-core/src/cell/row-cell.ts +++ b/packages/s2-core/src/cell/row-cell.ts @@ -155,28 +155,48 @@ export class RowCell extends HeaderCell { const iconX = x + contentIndent; const iconY = this.getIconPosition().y; + let offsetXY = 0; + let offsetWH = 0; + + // 移动端的时候，将icon变化，从而增加触发交互的面积 + if (isMobile()) { + offsetXY = size / 4; + offsetWH = size / 2!; + } this.treeIcon = renderTreeIcon({ group: this, iconCfg: { - x: iconX, - y: iconY, - width: size!, - height: size!, + x: iconX - offsetXY, + y: iconY - offsetXY, + width: size + offsetWH, + height: size + offsetWH, fill, }, isCollapsed, onClick: () => { this.onTreeIconClick(); }, + onTouchEnd: () => { + /** + * 移动端时，绑定展开、收起事件 + */ + this.emitCollapseEvent(); + }, }); + /** + * 这里不能将整个单元格作为热区 + * 否则会导致emitCollapseEvent回调执行两次， + * 还会影响到绑定到整个单元格的其他事件，比如ToolTop.show + * 树形结构的展开、收起操作，在移动端下失效 + */ // 移动端, 点击热区为整个单元格 - if (isMobile()) { - this.addEventListener('click', () => { - this.emitCollapseEvent(); - }); - } + // if (isMobile()) { + // this.addEventListener('click', () => { + // this.emitCollapseEvent(); + // }); + // } } protected drawTreeLeafNodeAlignDot() { diff --git a/packages/s2-core/src/utils/g-renders.ts b/packages/s2-core/src/utils/g-renders.ts index a97f9b3189..77fb2c9a74 100644 --- a/packages/s2-core/src/utils/g-renders.ts +++ b/packages/s2-core/src/utils/g-renders.ts @@ -130,8 +130,9 @@ export function renderTreeIcon(options: { isCollapsed?: boolean | null; iconCfg: Omit; onClick?: () => void; + onTouchEnd?: () => void; }) { - const { group, iconCfg, isCollapsed, onClick } = options; + const { group, iconCfg, isCollapsed, onClick, onTouchEnd } = options; const iconShape = renderIcon(group, { ...iconCfg, name: isCollapsed ? 'Plus' : 'Minus', @@ -142,5 +143,9 @@ export function renderTreeIcon(options: { iconShape.addEventListener('click', onClick); } + if (isFunction(onTouchEnd)) { + iconShape.addEventListener('touchend', onTouchEnd); + } + return iconShape; } From 207488184b1689bd6a9c513780b8ebd7a5477273 Mon Sep 17 00:00:00 2001 From: gongbei Date: Thu, 12 Dec 2024 16:48:05 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E7=A7=BB=E5=8A=A8?= =?UTF-8?q?=E7=AB=AF=E4=B8=8B=EF=BC=8C=E6=A0=91=E5=BD=A2=E7=BB=93=E6=9E=84?= =?UTF-8?q?=E5=B1=95=E5=BC=80=E3=80=81=E6=94=B6=E8=B5=B7=E4=BA=A4=E4=BA=92?= =?UTF-8?q?=E5=A4=B1=E6=95=88=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/s2-core/src/cell/corner-cell.ts | 23 ++++++++++------------- packages/s2-core/src/cell/header-cell.ts | 17 +++++++++++++++++ packages/s2-core/src/cell/row-cell.ts | 15 +-------------- 3 files changed, 28 insertions(+), 27 deletions(-) diff --git a/packages/s2-core/src/cell/corner-cell.ts b/packages/s2-core/src/cell/corner-cell.ts index 2da506b71d..2da4553ce9 100644 --- a/packages/s2-core/src/cell/corner-cell.ts +++ b/packages/s2-core/src/cell/corner-cell.ts @@ -57,6 +57,14 @@ export class CornerCell extends HeaderCell { } 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); } @@ -79,14 +87,7 @@ export class CornerCell extends HeaderCell { values(collapseFields!).filter(Boolean).length === rootRowNodes.length || rootRowNodes.every((node) => node.isCollapsed); const isCollapsed = isAllCollapsed; - let offsetXY = 0; - let offsetWH = 0; - - // 移动端的时候，将icon变化，从而增加触发交互的面积 - if (isMobile()) { - offsetXY = size / 4; - offsetWH = size / 2!; - } + const { offsetXY, offsetWH } = this.getActionIconOffset(size); this.treeIcon = renderTreeIcon({ group: this, @@ -99,17 +100,13 @@ export class CornerCell extends HeaderCell { }, isCollapsed, onClick: () => { - if (isMobile()) { - return; - } - this.onTreeIconClick(isCollapsed); }, onTouchEnd: () => { /** * 移动端时，绑定展开、收起事件 */ - this.onTreeIconClick(isCollapsed); + this.emitCollapseEvent(isCollapsed); }, }); } diff --git a/packages/s2-core/src/cell/header-cell.ts b/packages/s2-core/src/cell/header-cell.ts index 553d543048..c473627b80 100644 --- a/packages/s2-core/src/cell/header-cell.ts +++ b/packages/s2-core/src/cell/header-cell.ts @@ -43,6 +43,7 @@ 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< @@ -519,4 +520,20 @@ 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 index c173d3e951..1ae59219ef 100644 --- a/packages/s2-core/src/cell/row-cell.ts +++ b/packages/s2-core/src/cell/row-cell.ts @@ -155,14 +155,7 @@ export class RowCell extends HeaderCell { const iconX = x + contentIndent; const iconY = this.getIconPosition().y; - let offsetXY = 0; - let offsetWH = 0; - - // 移动端的时候，将icon变化，从而增加触发交互的面积 - if (isMobile()) { - offsetXY = size / 4; - offsetWH = size / 2!; - } + const { offsetXY, offsetWH } = this.getActionIconOffset(size); this.treeIcon = renderTreeIcon({ group: this, @@ -185,12 +178,6 @@ export class RowCell extends HeaderCell { }, }); - /** - * 这里不能将整个单元格作为热区 - * 否则会导致emitCollapseEvent回调执行两次， - * 还会影响到绑定到整个单元格的其他事件，比如ToolTop.show - * 树形结构的展开、收起操作，在移动端下失效 - */ // 移动端, 点击热区为整个单元格 // if (isMobile()) { // this.addEventListener('click', () => {