From a9ab0b86866a60c3c0850cb48c86008adca68506 Mon Sep 17 00:00:00 2001 From: lijinke666 Date: Tue, 19 Nov 2024 18:04:57 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../cell/__snapshots__/data-cell-spec.ts.snap | 57 ------------------- .../row-column-resize-spec.ts.snap | 2 - packages/s2-core/src/cell/base-cell.ts | 4 +- packages/s2-core/src/cell/col-cell.ts | 2 +- packages/s2-core/src/cell/corner-cell.ts | 2 +- packages/s2-core/src/cell/data-cell.ts | 2 +- packages/s2-core/src/cell/row-cell.ts | 2 +- .../s2-core/src/common/interface/resize.ts | 2 +- .../src/interaction/row-column-resize.ts | 42 +++++++------- 9 files changed, 27 insertions(+), 88 deletions(-) delete mode 100644 packages/s2-core/__tests__/unit/cell/__snapshots__/data-cell-spec.ts.snap diff --git a/packages/s2-core/__tests__/unit/cell/__snapshots__/data-cell-spec.ts.snap b/packages/s2-core/__tests__/unit/cell/__snapshots__/data-cell-spec.ts.snap deleted file mode 100644 index 1c3989532b..0000000000 --- a/packages/s2-core/__tests__/unit/cell/__snapshots__/data-cell-spec.ts.snap +++ /dev/null @@ -1,57 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Data Cell Tests Data Cell Formatter & Method Tests should get empty chart data and default options 1`] = ` -Object { - "autoFit": true, - "height": 83, - "theme": Object { - "type": "light", - }, - "width": 83, - "x": NaN, - "y": NaN, -} -`; - -exports[`Data Cell Tests Data Cell Formatter & Method Tests should get multiple chart data and all options 1`] = ` -Object { - "autoFit": true, - "data": Array [ - Object { - "genre": "Sports", - "sold": 275, - }, - ], - "encode": Object { - "color": "genre", - "x": "genre", - "y": "sold", - }, - "type": "interval", -} -`; - -exports[`Data Cell Tests Data Cell Formatter & Method Tests should get multiple chart data and all options 2`] = ` -Object { - "autoFit": true, - "data": Array [ - Object { - "genre": "Sports", - "sold": 275, - }, - ], - "encode": Object { - "color": "genre", - "x": "genre", - "y": "sold", - }, - "height": 83, - "theme": Object { - "type": "dark", - }, - "type": "interval", - "width": 83, - "x": 8, - "y": 208, -} -`; diff --git a/packages/s2-core/__tests__/unit/interaction/__snapshots__/row-column-resize-spec.ts.snap b/packages/s2-core/__tests__/unit/interaction/__snapshots__/row-column-resize-spec.ts.snap index a8d74ad060..278f845a9e 100644 --- a/packages/s2-core/__tests__/unit/interaction/__snapshots__/row-column-resize-spec.ts.snap +++ b/packages/s2-core/__tests__/unit/interaction/__snapshots__/row-column-resize-spec.ts.snap @@ -133,7 +133,6 @@ Object { "test-b": 1, }, "textOverflow": "ellipsis", - "widthByField": null, "wordWrap": true, } `; @@ -149,7 +148,6 @@ Object { "testField": 1, }, "textOverflow": "ellipsis", - "widthByField": null, "wordWrap": true, } `; diff --git a/packages/s2-core/src/cell/base-cell.ts b/packages/s2-core/src/cell/base-cell.ts index 530a869b98..7749941daf 100644 --- a/packages/s2-core/src/cell/base-cell.ts +++ b/packages/s2-core/src/cell/base-cell.ts @@ -189,7 +189,7 @@ export abstract class BaseCell extends Group { // eslint-disable-next-line @typescript-eslint/no-unused-vars protected handleRestOptions(...options: unknown[]) {} - protected getTextDraggedMaxLines(): number | void {} + protected getResizedTextMaxLines(): number | void {} /* -------------------------------------------------------------------------- */ /* common functions that will be used in subtype */ @@ -486,7 +486,7 @@ export abstract class BaseCell extends Group { // G 遵循浏览器的规范, 空间不足以展示省略号时, 会裁剪文字, 而不是展示省略号: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#ellipsis const maxTextWidth = Math.max(this.getMaxTextWidth(), 0) + EXTRA_PIXEL; const textStyle = this.getTextStyle(); - const maxLines = this.getTextDraggedMaxLines() || textStyle?.maxLines; + const maxLines = this.getResizedTextMaxLines() || textStyle?.maxLines; // 在坐标计算 (getTextPosition) 之前, 预渲染一次, 提前生成 textShape, 获得文字宽度, 用于计算 icon 绘制坐标 this.renderTextShape({ diff --git a/packages/s2-core/src/cell/col-cell.ts b/packages/s2-core/src/cell/col-cell.ts index 0e8a73e828..16e4f09f48 100644 --- a/packages/s2-core/src/cell/col-cell.ts +++ b/packages/s2-core/src/cell/col-cell.ts @@ -583,7 +583,7 @@ export class ColCell extends HeaderCell { return isNextSiblingNodeHidden && isPrevSiblingNodeHidden; } - protected getTextDraggedMaxLines() { + protected getResizedTextMaxLines() { const { colCell } = this.spreadsheet.options.style!; return ( diff --git a/packages/s2-core/src/cell/corner-cell.ts b/packages/s2-core/src/cell/corner-cell.ts index 19e5a168a7..bfc193d61c 100644 --- a/packages/s2-core/src/cell/corner-cell.ts +++ b/packages/s2-core/src/cell/corner-cell.ts @@ -273,7 +273,7 @@ export class CornerCell extends HeaderCell { ); } - protected getTextDraggedMaxLines() { + protected getResizedTextMaxLines() { // 角头和列头高度一致 const { colCell } = this.spreadsheet.options.style!; diff --git a/packages/s2-core/src/cell/data-cell.ts b/packages/s2-core/src/cell/data-cell.ts index c146c26eb6..7db9a1fcae 100644 --- a/packages/s2-core/src/cell/data-cell.ts +++ b/packages/s2-core/src/cell/data-cell.ts @@ -509,7 +509,7 @@ export class DataCell extends BaseCell { updateShapeAttr(this.conditionIconShapes, SHAPE_STYLE_MAP.opacity, opacity); } - protected getTextDraggedMaxLines() { + protected getResizedTextMaxLines() { const { rowCell } = this.spreadsheet.options.style!; // 数值和行高保持一致, 同时兼容明细表 diff --git a/packages/s2-core/src/cell/row-cell.ts b/packages/s2-core/src/cell/row-cell.ts index 65fbeb9981..03840d442b 100644 --- a/packages/s2-core/src/cell/row-cell.ts +++ b/packages/s2-core/src/cell/row-cell.ts @@ -492,7 +492,7 @@ export class RowCell extends HeaderCell { return { x: textX, y: textStart }; } - protected getTextDraggedMaxLines() { + protected getResizedTextMaxLines() { const { rowCell } = this.spreadsheet.options.style!; return ( diff --git a/packages/s2-core/src/common/interface/resize.ts b/packages/s2-core/src/common/interface/resize.ts index f11f67b9cd..a69d4ceb87 100644 --- a/packages/s2-core/src/common/interface/resize.ts +++ b/packages/s2-core/src/common/interface/resize.ts @@ -64,7 +64,7 @@ export interface ResizeInfo { isResizeArea?: boolean; isResizeMask?: boolean; - /** 当前拖拽热区对应的节点信息 */ + /** 当前拖拽热区对应的单元格/节点信息 */ meta: Node | ViewMeta; cell: S2CellType; diff --git a/packages/s2-core/src/interaction/row-column-resize.ts b/packages/s2-core/src/interaction/row-column-resize.ts index 5e7e869a58..86d57d43e8 100644 --- a/packages/s2-core/src/interaction/row-column-resize.ts +++ b/packages/s2-core/src/interaction/row-column-resize.ts @@ -7,6 +7,7 @@ import { } from '@antv/g'; import { clone, isEmpty, throttle } from 'lodash'; import type { + CellTextWordWrapStyle, DefaultCellTheme, ResizeInteractionOptions, ResizeParams, @@ -254,23 +255,6 @@ export class RowColumnResize extends BaseEvent implements BaseEventImplement { const displayWidth = isDisabled ? originalWidth : resizedWidth; const displayHeight = isDisabled ? originalHeight : resizedHeight; - // // 高度调整时, 根据行高计算最大可展示的文本行数, 覆盖原本的 maxLines 配置 - // if (resizeInfo.type === ResizeDirectionType.Vertical) { - // const { cell } = resizeInfo?.cell?.getStyle() as DefaultCellTheme; - // const padding = cell!.padding!.top! + cell!.padding!.bottom!; - // const lineHeight = resizeInfo?.cell?.getTextLineHeight()!; - // const maxLines = !isDisabled - // ? Math.max(1, Math.floor((displayHeight - padding) / lineHeight)) - // : undefined; - - // return { - // displayWidth, - // displayHeight, - // isDisabled, - // maxLines, - // }; - // } - return { displayWidth, displayHeight, @@ -397,6 +381,7 @@ export class RowColumnResize extends BaseEvent implements BaseEventImplement { } private getResizeHeightDetail(): ResizeDetail | null { + const { style } = this.spreadsheet.options; const resizeInfo = this.getResizeInfo(); const { displayHeight } = this.getDisAllowResizeInfo(); @@ -405,8 +390,9 @@ export class RowColumnResize extends BaseEvent implements BaseEventImplement { return { eventType: S2Event.LAYOUT_RESIZE_COL_HEIGHT, style: { - colCell: this.transform( + colCell: this.getResizedCellStyleByField( this.getColCellHeightByField(resizeInfo, displayHeight!), + style?.colCell!, displayHeight, ), }, @@ -417,8 +403,9 @@ export class RowColumnResize extends BaseEvent implements BaseEventImplement { eventType: S2Event.LAYOUT_RESIZE_ROW_HEIGHT, style: { rowCell: { - ...this.transform( + ...this.getResizedCellStyleByField( this.getCellStyleByField(displayHeight), + style?.rowCell!, displayHeight, ), height: !this.isEffectRowOf(ResizeType.ALL) @@ -433,13 +420,24 @@ export class RowColumnResize extends BaseEvent implements BaseEventImplement { } } - private transform( + private getResizedCellStyleByField( heightByField: Record, + cellStyle: CellTextWordWrapStyle, displayHeight: number, ) { + const isEnableHeightAdaptive = + cellStyle?.maxLines! > 1 && cellStyle?.wordWrap; + + if (isEnableHeightAdaptive) { + return { + heightByField, + }; + } + + // 如果开启了换行, 高度拖拽后动态计算 maxLines 的值, 已保证展示合理性. const { cell } = this.getResizeInfo(); - const { cell: cellStyle } = cell?.getStyle() as DefaultCellTheme; - const padding = cellStyle!.padding!.top! + cellStyle!.padding!.bottom!; + const { cell: cellTheme } = cell?.getStyle() as DefaultCellTheme; + const padding = cellTheme!.padding!.top! + cellTheme!.padding!.bottom!; const lineHeight = cell?.getTextLineHeight()!; const maxLines = Math.max(