fix: table cell height adaptation #162

src/editor/core/draw/Draw.ts

@@ -795,8 +795,8 @@ export class Draw {
             td.rowList = rowList
             // 移除缩放导致的行高变化-渲染时会进行缩放调整
             const curTdHeight = (rowHeight + tdGap) / scale
-            if (td.height! < curTdHeight) {
             // 内容高度大于当前单元格高度需增加
+            if (td.height! < curTdHeight) {
               const extraHeight = curTdHeight - td.height!
               const changeTr = trList[t + td.rowspan - 1]
               changeTr.height += extraHeight
@@ -804,6 +804,45 @@ export class Draw {
                 changeTd.height! += extraHeight
               })
             }
+            // 当前单元格最小高度及真实高度（包含跨列）
+            let curTdMinHeight = 0
+            let curTdRealHeight = 0
+            let i = 0
+            while (i < td.rowspan) {
+              const curTr = trList[i + t]
+              curTdMinHeight += curTr.minHeight!
+              curTdRealHeight += curTr.height!
+              i++
+            }
+            td.realMinHeight = curTdMinHeight
+            td.realHeight = curTdRealHeight
+            td.mainHeight = curTdHeight
+          }
+        }
+        // 单元格高度大于实际内容高度需减少
+        const reduceTrList = this.tableParticle.getTrListGroupByCol(trList)
+        for (let t = 0; t < reduceTrList.length; t++) {
+          const tr = reduceTrList[t]
+          let reduceHeight = -1
+          for (let d = 0; d < tr.tdList.length; d++) {
+            const td = tr.tdList[d]
+            const curTdRealHeight = td.realHeight!
+            const curTdHeight = td.mainHeight!
+            const curTdMinHeight = td.realMinHeight!
+            // 获取最大可减少高度
+            const curReduceHeight = curTdHeight < curTdMinHeight
+              ? curTdRealHeight - curTdMinHeight
+              : curTdRealHeight - curTdHeight
+            if (!~reduceHeight || curReduceHeight < reduceHeight) {
+              reduceHeight = curReduceHeight
+            }
+          }
+          if (reduceHeight > 0) {
+            const changeTr = trList[t]
+            changeTr.height -= reduceHeight
+            changeTr.tdList.forEach(changeTd => {
+              changeTd.height! -= reduceHeight
+            })
           }
         }
         // 需要重新计算表格内值

src/editor/core/draw/particle/table/TableParticle.ts

@@ -1,5 +1,7 @@
 import { ElementType, IElement, TableBorder } from '../../../..'
 import { IEditorOption } from '../../../../interface/Editor'
+import { ITr } from '../../../../interface/table/Tr'
+import { deepClone } from '../../../../utils'
 import { RangeManager } from '../../../range/RangeManager'
 import { Draw } from '../../Draw'
 
@@ -22,6 +24,23 @@ export class TableParticle {
     this.options = draw.getOptions()
   }
 
+  public getTrListGroupByCol(payload: ITr[]): ITr[] {
+    const trList = deepClone(payload)
+    for (let t = 0; t < payload.length; t++) {
+      const tr = trList[t]
+      for (let d = tr.tdList.length - 1; d >= 0; d--) {
+        const td = tr.tdList[d]
+        const { rowspan, rowIndex, colIndex } = td
+        const curRowIndex = rowIndex! + rowspan - 1
+        if (curRowIndex !== d) {
+          const changeTd = tr.tdList.splice(d, 1)[0]
+          trList[curRowIndex].tdList.splice(colIndex!, 0, changeTd)
+        }
+      }
+    }
+    return trList
+  }
+
   private _drawBorder(payload: IDrawTableBorderOption) {
     const { ctx, startX, startY, width, height, isDrawFullBorder } = payload
     ctx.beginPath()

src/editor/core/draw/particle/table/TableTool.ts

@@ -243,8 +243,15 @@ export class TableTool {
       let isChangeSize = false
       // 改变尺寸
       if (order === TableOrder.ROW) {
-        element.trList![index].height += dy
+        const tr = element.trList![index]
+        // 最大移动高度-向上移动超出最小高度限定，则减少移动量
+        const { defaultTrMinHeight } = this.options
+        if (dy < 0 && tr.height + dy < defaultTrMinHeight) {
+          dy = defaultTrMinHeight - tr.height
+        }
         if (dy) {
+          tr.height += dy
+          tr.minHeight = tr.height
           isChangeSize = true
         }
       } else {

src/editor/index.ts

@@ -106,7 +106,7 @@ export default class Editor {
       margins: [100, 120, 100, 120],
       pageMode: PageMode.PAGING,
       tdPadding: 5,
-      defaultTdHeight: 40,
+      defaultTrMinHeight: 40,
       defaultHyperlinkColor: '#0000FF',
       paperDirection: PaperDirection.VERTICAL,
       inactiveAlpha: 0.6,

src/editor/interface/Editor.ts

@@ -45,7 +45,7 @@ export interface IEditorOption {
   margins?: IMargin,
   pageMode?: PageMode;
   tdPadding?: number;
-  defaultTdHeight?: number;
+  defaultTrMinHeight?: number;
   defaultHyperlinkColor?: string;
   paperDirection?: PaperDirection;
   inactiveAlpha?: number;

src/editor/interface/table/Td.ts

@@ -19,4 +19,7 @@ export interface ITd {
   rowList?: IRow[];
   positionList?: IElementPosition[];
   verticalAlign?: VerticalAlign;
+  mainHeight?: number; // 内容 + 内边距高度
+  realHeight?: number; // 真实高度（包含跨列）
+  realMinHeight?: number; // 真实最小高度（包含跨列）
 }

src/editor/interface/table/Tr.ts

@@ -4,4 +4,5 @@ export interface ITr {
   id?: string;
   height: number;
   tdList: ITd[];
+  minHeight?: number;
 }

src/editor/utils/element.ts

@@ -34,6 +34,9 @@ export function formatElementList(elementList: IElement[], options: IFormatEleme
           const tr = el.trList[t]
           const trId = getUUID()
           tr.id = trId
+          if (!tr.minHeight || tr.minHeight < editorOptions.defaultTrMinHeight) {
+            tr.minHeight = editorOptions.defaultTrMinHeight
+          }
           for (let d = 0; d < tr.tdList.length; d++) {
             const td = tr.tdList[d]
             const tdId = getUUID()