refactor: update tdPadding option format

pr675
Hufe921 3 years ago
parent d8876b1095
commit 752ca43077

@ -42,8 +42,8 @@ interface IEditorOption {
marginIndicatorColor?: string // The margin indicator color. default: #BABABA marginIndicatorColor?: string // The margin indicator color. default: #BABABA
margins?: IMargin // Page margins. default: [100, 120, 100, 120] margins?: IMargin // Page margins. default: [100, 120, 100, 120]
pageMode?: PageMode // Paper mode: Linkage, Pagination. default: Pagination pageMode?: PageMode // Paper mode: Linkage, Pagination. default: Pagination
tdPadding?: number // Cell padding. default: 5 tdPadding?: IPadding // Cell padding. default: [0, 5, 5, 5]
defaultTrMinHeight?: number // Default table row minimum height. default: 40 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 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 defaultHyperlinkColor?: string // Default hyperlink color. default: #0000FF
header?: IHeader // Header information.{top?:number; maxHeightRadio?:MaxHeightRatio;} header?: IHeader // Header information.{top?:number; maxHeightRadio?:MaxHeightRatio;}

@ -42,8 +42,8 @@ interface IEditorOption {
marginIndicatorColor?: string // 页边距指示器颜色。默认:#BABABA marginIndicatorColor?: string // 页边距指示器颜色。默认:#BABABA
margins?: IMargin // 页面边距。默认:[100, 120, 100, 120] margins?: IMargin // 页面边距。默认:[100, 120, 100, 120]
pageMode?: PageMode // 纸张模式:连页、分页。默认:分页 pageMode?: PageMode // 纸张模式:连页、分页。默认:分页
tdPadding?: number // 单元格内边距。默认5 tdPadding?: IPadding // 单元格内边距。默认:[0, 5, 5, 5]
defaultTrMinHeight?: number // 默认表格行最小高度。默认40 defaultTrMinHeight?: number // 默认表格行最小高度。默认42
defaultColMinWidth?: number // 默认表格列最小宽度整体宽度足够时应用否则会按比例缩小。默认40 defaultColMinWidth?: number // 默认表格列最小宽度整体宽度足够时应用否则会按比例缩小。默认40
defaultHyperlinkColor?: string // 默认超链接颜色。默认:#0000FF defaultHyperlinkColor?: string // 默认超链接颜色。默认:#0000FF
header?: IHeader // 页眉信息。{top?:number; maxHeightRadio?:MaxHeightRatio;} header?: IHeader // 页眉信息。{top?:number; maxHeightRadio?:MaxHeightRatio;}

@ -63,7 +63,7 @@ import {
import { Control } from './control/Control' import { Control } from './control/Control'
import { zipElementList } from '../../utils/element' import { zipElementList } from '../../utils/element'
import { CheckboxParticle } from './particle/CheckboxParticle' import { CheckboxParticle } from './particle/CheckboxParticle'
import { DeepRequired } from '../../interface/Common' import { DeepRequired, IPadding } from '../../interface/Common'
import { ControlComponent, ImageDisplay } from '../../dataset/enum/Control' import { ControlComponent, ImageDisplay } from '../../dataset/enum/Control'
import { formatElementList } from '../../utils/element' import { formatElementList } from '../../utils/element'
import { WorkerManager } from '../worker/WorkerManager' import { WorkerManager } from '../worker/WorkerManager'
@ -358,8 +358,9 @@ export class Draw {
return this.options.defaultBasicRowMarginHeight * this.options.scale return this.options.defaultBasicRowMarginHeight * this.options.scale
} }
public getTdPadding(): number { public getTdPadding(): IPadding {
return this.options.tdPadding * this.options.scale const { tdPadding, scale } = this.options
return <IPadding>tdPadding.map(m => m * scale)
} }
public getContainer(): HTMLDivElement { public getContainer(): HTMLDivElement {
@ -1079,7 +1080,8 @@ export class Draw {
} }
metrics.boundingBoxAscent = 0 metrics.boundingBoxAscent = 0
} else if (element.type === ElementType.TABLE) { } 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) this.tableParticle.computeRowColInfo(element)
// 计算表格内元素信息 // 计算表格内元素信息
@ -1089,13 +1091,13 @@ export class Draw {
for (let d = 0; d < tr.tdList.length; d++) { for (let d = 0; d < tr.tdList.length; d++) {
const td = tr.tdList[d] const td = tr.tdList[d]
const rowList = this.computeRowList( const rowList = this.computeRowList(
(td.width! - tdGap) * scale, (td.width! - tdPaddingWidth) * scale,
td.value td.value
) )
const rowHeight = rowList.reduce((pre, cur) => pre + cur.height, 0) const rowHeight = rowList.reduce((pre, cur) => pre + cur.height, 0)
td.rowList = rowList td.rowList = rowList
// 移除缩放导致的行高变化-渲染时会进行缩放调整 // 移除缩放导致的行高变化-渲染时会进行缩放调整
const curTdHeight = (rowHeight + tdGap) / scale const curTdHeight = (rowHeight + tdPaddingHeight) / scale
// 内容高度大于当前单元格高度需增加 // 内容高度大于当前单元格高度需增加
if (td.height! < curTdHeight) { if (td.height! < curTdHeight) {
const extraHeight = curTdHeight - td.height! const extraHeight = curTdHeight - td.height!
@ -1637,7 +1639,7 @@ export class Draw {
index++ index++
// 绘制表格内元素 // 绘制表格内元素
if (element.type === ElementType.TABLE) { if (element.type === ElementType.TABLE) {
const tdGap = tdPadding * 2 const tdPaddingWidth = tdPadding[1] + tdPadding[3]
for (let t = 0; t < element.trList!.length; t++) { for (let t = 0; t < element.trList!.length; t++) {
const tr = element.trList![t] const tr = element.trList![t]
for (let d = 0; d < tr.tdList!.length; d++) { for (let d = 0; d < tr.tdList!.length; d++) {
@ -1648,7 +1650,7 @@ export class Draw {
rowList: td.rowList!, rowList: td.rowList!,
pageNo, pageNo,
startIndex: 0, startIndex: 0,
innerWidth: (td.width! - tdGap) * scale, innerWidth: (td.width! - tdPaddingWidth) * scale,
zone zone
}) })
} }

@ -142,7 +142,8 @@ export class Position {
x += metrics.width x += metrics.width
// 计算表格内元素位置 // 计算表格内元素位置
if (element.type === ElementType.TABLE) { 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++) { for (let t = 0; t < element.trList!.length; t++) {
const tr = element.trList![t] const tr = element.trList![t]
for (let d = 0; d < tr.tdList!.length; d++) { for (let d = 0; d < tr.tdList!.length; d++) {
@ -155,9 +156,9 @@ export class Position {
pageNo, pageNo,
startRowIndex: 0, startRowIndex: 0,
startIndex: 0, startIndex: 0,
startX: (td.x! + tdPadding) * scale + tablePreX, startX: (td.x! + tdPadding[3]) * scale + tablePreX,
startY: td.y! * scale + tablePreY, startY: (td.y! + tdPadding[0]) * scale + tablePreY,
innerWidth: (td.width! - tdGap) * scale innerWidth: (td.width! - tdPaddingWidth) * scale
}) })
// 垂直对齐方式 // 垂直对齐方式
if ( if (
@ -168,7 +169,8 @@ export class Position {
(pre, cur) => pre + cur.height, (pre, cur) => pre + cur.height,
0 0
) )
const blankHeight = (td.height! - tdGap) * scale - rowsHeight const blankHeight =
(td.height! - tdPaddingHeight) * scale - rowsHeight
const offsetHeight = const offsetHeight =
td.verticalAlign === VerticalAlign.MIDDLE td.verticalAlign === VerticalAlign.MIDDLE
? blankHeight / 2 ? blankHeight / 2

@ -154,8 +154,8 @@ export default class Editor {
marginIndicatorColor: '#BABABA', marginIndicatorColor: '#BABABA',
margins: [100, 120, 100, 120], margins: [100, 120, 100, 120],
pageMode: PageMode.PAGING, pageMode: PageMode.PAGING,
tdPadding: 5, tdPadding: [0, 5, 5, 5],
defaultTrMinHeight: 40, defaultTrMinHeight: 42,
defaultColMinWidth: 40, defaultColMinWidth: 40,
defaultHyperlinkColor: '#0000FF', defaultHyperlinkColor: '#0000FF',
paperDirection: PaperDirection.VERTICAL, paperDirection: PaperDirection.VERTICAL,

@ -34,3 +34,10 @@ export type DeepRequired<T> = T extends Error
export type DeepPartial<T> = { export type DeepPartial<T> = {
[P in keyof T]?: DeepPartial<T[P]> [P in keyof T]?: DeepPartial<T[P]>
} }
export type IPadding = [
top: number,
right: number,
bottom: number,
left: number
]

@ -6,6 +6,7 @@ import {
WordBreak WordBreak
} from '../dataset/enum/Editor' } from '../dataset/enum/Editor'
import { ICheckboxOption } from './Checkbox' import { ICheckboxOption } from './Checkbox'
import { IPadding } from './Common'
import { IControlOption } from './Control' import { IControlOption } from './Control'
import { ICursorOption } from './Cursor' import { ICursorOption } from './Cursor'
import { IFooter } from './Footer' import { IFooter } from './Footer'
@ -53,7 +54,7 @@ export interface IEditorOption {
marginIndicatorColor?: string marginIndicatorColor?: string
margins?: IMargin margins?: IMargin
pageMode?: PageMode pageMode?: PageMode
tdPadding?: number tdPadding?: IPadding
defaultTrMinHeight?: number defaultTrMinHeight?: number
defaultColMinWidth?: number defaultColMinWidth?: number
defaultHyperlinkColor?: string defaultHyperlinkColor?: string

Loading…
Cancel
Save