From 752ca43077b4092ba15edf4f650b5e35af8bfa8a Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Sat, 2 Sep 2023 16:24:32 +0800 Subject: [PATCH] refactor: update tdPadding option format --- docs/en/guide/option.md | 4 ++-- docs/guide/option.md | 4 ++-- src/editor/core/draw/Draw.ts | 18 ++++++++++-------- src/editor/core/position/Position.ts | 12 +++++++----- src/editor/index.ts | 4 ++-- src/editor/interface/Common.ts | 7 +++++++ src/editor/interface/Editor.ts | 3 ++- 7 files changed, 32 insertions(+), 20 deletions(-) diff --git a/docs/en/guide/option.md b/docs/en/guide/option.md index f9d3c4a..344c38f 100644 --- a/docs/en/guide/option.md +++ b/docs/en/guide/option.md @@ -42,8 +42,8 @@ interface IEditorOption { marginIndicatorColor?: string // The margin indicator color. default: #BABABA margins?: IMargin // Page margins. default: [100, 120, 100, 120] pageMode?: PageMode // Paper mode: Linkage, Pagination. default: Pagination - tdPadding?: number // Cell padding. default: 5 - defaultTrMinHeight?: number // Default table row minimum height. default: 40 + tdPadding?: IPadding // Cell padding. default: [0, 5, 5, 5] + defaultTrMinHeight?: number // Default table row minimum height. default: 42 defaultColMinWidth?: number // Default minimum width for table columns (applied if the overall width is sufficient, otherwise scaled down). default: 40 defaultHyperlinkColor?: string // Default hyperlink color. default: #0000FF header?: IHeader // Header information.{top?:number; maxHeightRadio?:MaxHeightRatio;} diff --git a/docs/guide/option.md b/docs/guide/option.md index b054d88..68de8b4 100644 --- a/docs/guide/option.md +++ b/docs/guide/option.md @@ -42,8 +42,8 @@ interface IEditorOption { marginIndicatorColor?: string // 页边距指示器颜色。默认：#BABABA margins?: IMargin // 页面边距。默认：[100, 120, 100, 120] pageMode?: PageMode // 纸张模式：连页、分页。默认：分页 - tdPadding?: number // 单元格内边距。默认：5 - defaultTrMinHeight?: number // 默认表格行最小高度。默认：40 + tdPadding?: IPadding // 单元格内边距。默认：[0, 5, 5, 5] + defaultTrMinHeight?: number // 默认表格行最小高度。默认：42 defaultColMinWidth?: number // 默认表格列最小宽度（整体宽度足够时应用，否则会按比例缩小）。默认：40 defaultHyperlinkColor?: string // 默认超链接颜色。默认：#0000FF header?: IHeader // 页眉信息。{top?:number; maxHeightRadio?:MaxHeightRatio;} diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index 9ddd693..0a5220c 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -63,7 +63,7 @@ import { import { Control } from './control/Control' import { zipElementList } from '../../utils/element' import { CheckboxParticle } from './particle/CheckboxParticle' -import { DeepRequired } from '../../interface/Common' +import { DeepRequired, IPadding } from '../../interface/Common' import { ControlComponent, ImageDisplay } from '../../dataset/enum/Control' import { formatElementList } from '../../utils/element' import { WorkerManager } from '../worker/WorkerManager' @@ -358,8 +358,9 @@ export class Draw { return this.options.defaultBasicRowMarginHeight * this.options.scale } - public getTdPadding(): number { - return this.options.tdPadding * this.options.scale + public getTdPadding(): IPadding { + const { tdPadding, scale } = this.options + return tdPadding.map(m => m * scale) } public getContainer(): HTMLDivElement { @@ -1079,7 +1080,8 @@ export class Draw { } metrics.boundingBoxAscent = 0 } else if (element.type === ElementType.TABLE) { - const tdGap = tdPadding * 2 + const tdPaddingWidth = tdPadding[1] + tdPadding[3] + const tdPaddingHeight = tdPadding[0] + tdPadding[2] // 计算表格行列 this.tableParticle.computeRowColInfo(element) // 计算表格内元素信息 @@ -1089,13 +1091,13 @@ export class Draw { for (let d = 0; d < tr.tdList.length; d++) { const td = tr.tdList[d] const rowList = this.computeRowList( - (td.width! - tdGap) * scale, + (td.width! - tdPaddingWidth) * scale, td.value ) const rowHeight = rowList.reduce((pre, cur) => pre + cur.height, 0) td.rowList = rowList // 移除缩放导致的行高变化-渲染时会进行缩放调整 - const curTdHeight = (rowHeight + tdGap) / scale + const curTdHeight = (rowHeight + tdPaddingHeight) / scale // 内容高度大于当前单元格高度需增加 if (td.height! < curTdHeight) { const extraHeight = curTdHeight - td.height! @@ -1637,7 +1639,7 @@ export class Draw { index++ // 绘制表格内元素 if (element.type === ElementType.TABLE) { - const tdGap = tdPadding * 2 + const tdPaddingWidth = tdPadding[1] + tdPadding[3] for (let t = 0; t < element.trList!.length; t++) { const tr = element.trList![t] for (let d = 0; d < tr.tdList!.length; d++) { @@ -1648,7 +1650,7 @@ export class Draw { rowList: td.rowList!, pageNo, startIndex: 0, - innerWidth: (td.width! - tdGap) * scale, + innerWidth: (td.width! - tdPaddingWidth) * scale, zone }) } diff --git a/src/editor/core/position/Position.ts b/src/editor/core/position/Position.ts index 39ca6f9..e48ae06 100644 --- a/src/editor/core/position/Position.ts +++ b/src/editor/core/position/Position.ts @@ -142,7 +142,8 @@ export class Position { x += metrics.width // 计算表格内元素位置 if (element.type === ElementType.TABLE) { - const tdGap = tdPadding * 2 + const tdPaddingWidth = tdPadding[1] + tdPadding[3] + const tdPaddingHeight = tdPadding[0] + tdPadding[2] for (let t = 0; t < element.trList!.length; t++) { const tr = element.trList![t] for (let d = 0; d < tr.tdList!.length; d++) { @@ -155,9 +156,9 @@ export class Position { pageNo, startRowIndex: 0, startIndex: 0, - startX: (td.x! + tdPadding) * scale + tablePreX, - startY: td.y! * scale + tablePreY, - innerWidth: (td.width! - tdGap) * scale + startX: (td.x! + tdPadding[3]) * scale + tablePreX, + startY: (td.y! + tdPadding[0]) * scale + tablePreY, + innerWidth: (td.width! - tdPaddingWidth) * scale }) // 垂直对齐方式 if ( @@ -168,7 +169,8 @@ export class Position { (pre, cur) => pre + cur.height, 0 ) - const blankHeight = (td.height! - tdGap) * scale - rowsHeight + const blankHeight = + (td.height! - tdPaddingHeight) * scale - rowsHeight const offsetHeight = td.verticalAlign === VerticalAlign.MIDDLE ? blankHeight / 2 diff --git a/src/editor/index.ts b/src/editor/index.ts index 0e89946..bb0fe19 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -154,8 +154,8 @@ export default class Editor { marginIndicatorColor: '#BABABA', margins: [100, 120, 100, 120], pageMode: PageMode.PAGING, - tdPadding: 5, - defaultTrMinHeight: 40, + tdPadding: [0, 5, 5, 5], + defaultTrMinHeight: 42, defaultColMinWidth: 40, defaultHyperlinkColor: '#0000FF', paperDirection: PaperDirection.VERTICAL, diff --git a/src/editor/interface/Common.ts b/src/editor/interface/Common.ts index 097b771..1914ddb 100644 --- a/src/editor/interface/Common.ts +++ b/src/editor/interface/Common.ts @@ -34,3 +34,10 @@ export type DeepRequired = T extends Error export type DeepPartial = { [P in keyof T]?: DeepPartial } + +export type IPadding = [ + top: number, + right: number, + bottom: number, + left: number +] diff --git a/src/editor/interface/Editor.ts b/src/editor/interface/Editor.ts index e298320..16c082c 100644 --- a/src/editor/interface/Editor.ts +++ b/src/editor/interface/Editor.ts @@ -6,6 +6,7 @@ import { WordBreak } from '../dataset/enum/Editor' import { ICheckboxOption } from './Checkbox' +import { IPadding } from './Common' import { IControlOption } from './Control' import { ICursorOption } from './Cursor' import { IFooter } from './Footer' @@ -53,7 +54,7 @@ export interface IEditorOption { marginIndicatorColor?: string margins?: IMargin pageMode?: PageMode - tdPadding?: number + tdPadding?: IPadding defaultTrMinHeight?: number defaultColMinWidth?: number defaultHyperlinkColor?: string