diff --git a/common/changes/@visactor/vtable/1697-feature-tree-mode-icon-position_2024-05-22-07-41.json b/common/changes/@visactor/vtable/1697-feature-tree-mode-icon-position_2024-05-22-07-41.json new file mode 100644 index 000000000..2c2472268 --- /dev/null +++ b/common/changes/@visactor/vtable/1697-feature-tree-mode-icon-position_2024-05-22-07-41.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "feat: tree mode can set icon #1697\n\n", + "type": "none", + "packageName": "@visactor/vtable" + } + ], + "packageName": "@visactor/vtable", + "email": "892739385@qq.com" +} \ No newline at end of file diff --git a/packages/vtable/src/body-helper/body-helper.ts b/packages/vtable/src/body-helper/body-helper.ts index 3c6542929..bebb94b60 100644 --- a/packages/vtable/src/body-helper/body-helper.ts +++ b/packages/vtable/src/body-helper/body-helper.ts @@ -30,6 +30,12 @@ export class BodyHelper { ): ColumnIconOption[] { //加入固定列图标 排序 文本中元素 const iconArr: ColumnIconOption[] = []; + + const hierarchyIcon = this.getHierarchyIcon(col, row); + if (hierarchyIcon) { + iconArr.push(hierarchyIcon); + } + const { icon: iconDefine } = this._table.getBodyColumnDefine(col, row); if (iconDefine) { @@ -66,10 +72,6 @@ export class BodyHelper { addIcon(iconResults); } } - const hierarchyIcon = this.getHierarchyIcon(col, row); - if (hierarchyIcon) { - iconArr.push(hierarchyIcon); - } context && iconArr.forEach((i, index) => { diff --git a/packages/vtable/src/scenegraph/layout/compute-col-width.ts b/packages/vtable/src/scenegraph/layout/compute-col-width.ts index 4b858fcf5..334db9872 100644 --- a/packages/vtable/src/scenegraph/layout/compute-col-width.ts +++ b/packages/vtable/src/scenegraph/layout/compute-col-width.ts @@ -366,6 +366,12 @@ function computeAutoColWidth( if ((hd as HeaderData)?.hierarchyLevel) { cellHierarchyIndent = ((hd as HeaderData).hierarchyLevel ?? 0) * ((layoutMap as PivotHeaderLayoutMap).rowHierarchyIndent ?? 0); + if ( + (layoutMap as PivotHeaderLayoutMap).rowHierarchyTextStartAlignment && + !table.internalProps.headerHelper.getHierarchyIcon(col, row) + ) { + cellHierarchyIndent += table.internalProps.headerHelper.getHierarchyIconWidth(); + } } } else { deltaRow = prepareDeltaRow; @@ -379,6 +385,12 @@ function computeAutoColWidth( Array.isArray(indexArr) && table.getHierarchyState(col, row) !== HierarchyState.none ? (indexArr.length - 1) * ((layoutMap as SimpleHeaderLayoutMap).hierarchyIndent ?? 0) : 0; + if ( + (layoutMap as SimpleHeaderLayoutMap).hierarchyTextStartAlignment && + !table.internalProps.bodyHelper.getHierarchyIcon(col, row) + ) { + cellHierarchyIndent += table.internalProps.headerHelper.getHierarchyIconWidth(); + } } } diff --git a/packages/vtable/src/scenegraph/utils/text-icon-layout.ts b/packages/vtable/src/scenegraph/utils/text-icon-layout.ts index b649ccb34..e451acc0c 100644 --- a/packages/vtable/src/scenegraph/utils/text-icon-layout.ts +++ b/packages/vtable/src/scenegraph/utils/text-icon-layout.ts @@ -225,9 +225,7 @@ export function createCellContent( lineClamp, wordBreak: 'break-word', whiteSpace: text.length === 1 && !autoWrapText ? 'no-wrap' : 'normal', - dx: - (textAlign === 'left' ? (!contentLeftIcons.length && !contentRightIcons.length ? hierarchyOffset : 0) : 0) + - _contentOffset + dx: (textAlign === 'left' ? (!contentLeftIcons.length ? hierarchyOffset : 0) : 0) + _contentOffset }; const wrapText = new Text(cellTheme.text ? (Object.assign({}, cellTheme.text, attribute) as any) : attribute); wrapText.name = 'text'; @@ -287,15 +285,33 @@ export function createCellContent( align: textAlign, baseline: textBaseline }); - + const dealWithIconComputeVar = { + addedHierarchyOffset: 0 + }; //为了只增加一次indent的缩进值,如果有两个icon都dealWithIcon的话 contentLeftIcons.forEach(icon => { - const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table); + const iconMark = dealWithIcon( + icon, + undefined, + cellGroup.col, + cellGroup.row, + range, + table, + dealWithIconComputeVar + ); iconMark.role = 'icon-content-left'; iconMark.name = icon.name; cellContent.addLeftOccupyingIcon(iconMark); }); contentRightIcons.forEach(icon => { - const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table); + const iconMark = dealWithIcon( + icon, + undefined, + cellGroup.col, + cellGroup.row, + range, + table, + dealWithIconComputeVar + ); iconMark.role = 'icon-content-right'; iconMark.name = icon.name; cellContent.addRightOccupyingIcon(iconMark); @@ -377,7 +393,10 @@ export function dealWithIcon( col?: number, row?: number, range?: CellRange, - table?: BaseTableAPI + table?: BaseTableAPI, + dealWithIconComputeVar?: { + addedHierarchyOffset: number; + } ): Icon { // positionType在外部处理 const iconAttribute = {} as any; @@ -403,16 +422,23 @@ export function dealWithIcon( let hierarchyOffset = 0; if ( + (!dealWithIconComputeVar || dealWithIconComputeVar?.addedHierarchyOffset === 0) && isNumber(col) && isNumber(row) && table && - (icon.funcType === IconFuncTypeEnum.collapse || icon.funcType === IconFuncTypeEnum.expand) + (icon.funcType === IconFuncTypeEnum.collapse || + icon.funcType === IconFuncTypeEnum.expand || + icon.positionType === IconPosition.contentLeft || + icon.positionType === IconPosition.contentRight) ) { // compute hierarchy offset // hierarchyOffset = getHierarchyOffset(col, row, table); hierarchyOffset = range ? getHierarchyOffset(range.start.col, range.start.row, table) : getHierarchyOffset(col, row, table); + if (dealWithIconComputeVar) { + dealWithIconComputeVar.addedHierarchyOffset = 1; + } } iconAttribute.marginLeft = (icon.marginLeft ?? 0) + hierarchyOffset;