From 6bc30dc4c3b6be11a865ea58dffa41954a901cb2 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Sun, 11 Sep 2022 19:51:53 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=A8=E6=A0=BC=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E4=B8=BB=E5=8A=A8=E8=B0=83=E6=95=B4=E9=AB=98=E5=BA=A6=EF=BC=88?=
 =?UTF-8?q?#77=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useCreateElement.ts                    |  1 +
 src/types/slides.ts                              |  3 +++
 .../Canvas/Operate/TableElementOperate.vue       |  4 ++--
 src/views/Editor/Canvas/hooks/useScaleElement.ts | 12 ++++++++++++
 .../Editor/Toolbar/ElementPositionPanel.vue      |  2 +-
 .../element/TableElement/BaseTableElement.vue    |  1 +
 .../element/TableElement/EditableTable.vue       | 14 +++++++-------
 .../element/TableElement/StaticTable.vue         | 16 ++++++----------
 .../components/element/TableElement/index.vue    |  1 +
 9 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/src/hooks/useCreateElement.ts b/src/hooks/useCreateElement.ts
index 780f7e4f..2c64ee3e 100644
--- a/src/hooks/useCreateElement.ts
+++ b/src/hooks/useCreateElement.ts
@@ -164,6 +164,7 @@ export default () => {
         colHeader: false,
         colFooter: false,
       },
+      cellMinHeight: 36,
     })
   }
   
diff --git a/src/types/slides.ts b/src/types/slides.ts
index f3e3dcb8..6efe1546 100644
--- a/src/types/slides.ts
+++ b/src/types/slides.ts
@@ -517,6 +517,8 @@ export interface TableTheme {
  * 
  * colWidths: 列宽数组，如[30, 50, 20]表示三列宽度分别为30%, 50%, 20%
  * 
+ * cellMinHeight: 单元格最小高度
+ * 
  * data: 表格数据
  */
 export interface PPTTableElement extends PPTBaseElement {
@@ -524,6 +526,7 @@ export interface PPTTableElement extends PPTBaseElement {
   outline: PPTElementOutline
   theme?: TableTheme
   colWidths: number[]
+  cellMinHeight: number
   data: TableCell[][]
 }
 
diff --git a/src/views/Editor/Canvas/Operate/TableElementOperate.vue b/src/views/Editor/Canvas/Operate/TableElementOperate.vue
index 4a2ca4b0..0487c236 100644
--- a/src/views/Editor/Canvas/Operate/TableElementOperate.vue
+++ b/src/views/Editor/Canvas/Operate/TableElementOperate.vue
@@ -10,7 +10,7 @@
     <template v-if="handlerVisible">
       <ResizeHandler
         class="operate-resize-handler" 
-        v-for="point in textElementResizeHandlers"
+        v-for="point in resizeHandlers"
         :key="point.direction"
         :type="point.direction"
         :rotate="elementInfo.rotate"
@@ -70,5 +70,5 @@ const outlineWidth = computed(() => props.elementInfo.outline.width || 1)
 const scaleWidth = computed(() => (props.elementInfo.width + outlineWidth.value) * canvasScale.value)
 const scaleHeight = computed(() => props.elementInfo.height * canvasScale.value)
 
-const { textElementResizeHandlers, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
+const { resizeHandlers, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
 </script>
\ No newline at end of file
diff --git a/src/views/Editor/Canvas/hooks/useScaleElement.ts b/src/views/Editor/Canvas/hooks/useScaleElement.ts
index 2fb9daaa..25836e74 100644
--- a/src/views/Editor/Canvas/hooks/useScaleElement.ts
+++ b/src/views/Editor/Canvas/hooks/useScaleElement.ts
@@ -118,6 +118,8 @@ export default (
     const elOriginTop = element.top
     const elOriginWidth = element.width
     const elOriginHeight = element.height
+
+    const originTableCellMinHeight = element.type === 'table' ? element.cellMinHeight : 0
     
     const elRotate = ('rotate' in element && element.rotate) ? element.rotate : 0
     const rotateRadian = Math.PI * elRotate / 180
@@ -412,6 +414,16 @@ export default (
             path,
           }
         }
+        if (el.type === 'table') {
+          let cellMinHeight = originTableCellMinHeight + (height - elOriginHeight) / el.data.length
+          cellMinHeight = cellMinHeight < 36 ? 36 : cellMinHeight
+
+          if (cellMinHeight === originTableCellMinHeight) return { ...el, left, width }
+          return {
+            ...el, left, top, width, height,
+            cellMinHeight: cellMinHeight < 36 ? 36 : cellMinHeight,
+          }
+        }
         return { ...el, left, top, width, height }
       })
     }
diff --git a/src/views/Editor/Toolbar/ElementPositionPanel.vue b/src/views/Editor/Toolbar/ElementPositionPanel.vue
index 7a504952..48a69590 100644
--- a/src/views/Editor/Toolbar/ElementPositionPanel.vue
+++ b/src/views/Editor/Toolbar/ElementPositionPanel.vue
@@ -82,7 +82,7 @@
           :min="minSize"
           :max="800"
           :step="5"
-          :disabled="isHorizontalText" 
+          :disabled="isHorizontalText || handleElement!.type === 'table'" 
           :value="height" 
           @change="value => updateHeight(value as number)"
           style="flex: 4;"
diff --git a/src/views/components/element/TableElement/BaseTableElement.vue b/src/views/components/element/TableElement/BaseTableElement.vue
index f798b8ad..165129f5 100644
--- a/src/views/components/element/TableElement/BaseTableElement.vue
+++ b/src/views/components/element/TableElement/BaseTableElement.vue
@@ -15,6 +15,7 @@
         <StaticTable
           :data="elementInfo.data"
           :width="elementInfo.width"
+          :cellMinHeight="elementInfo.cellMinHeight"
           :colWidths="elementInfo.colWidths"
           :outline="elementInfo.outline"
           :theme="elementInfo.theme"
diff --git a/src/views/components/element/TableElement/EditableTable.vue b/src/views/components/element/TableElement/EditableTable.vue
index fc960d2c..4f37e3bf 100644
--- a/src/views/components/element/TableElement/EditableTable.vue
+++ b/src/views/components/element/TableElement/EditableTable.vue
@@ -26,7 +26,7 @@
         <col span="1" v-for="(width, index) in colSizeList" :key="index" :width="width">
       </colgroup>
       <tbody>
-        <tr v-for="(rowCells, rowIndex) in tableCells" :key="rowIndex">
+        <tr v-for="(rowCells, rowIndex) in tableCells" :key="rowIndex" :style="{ height: cellMinHeight + 'px' }">
           <td 
             class="cell"
             :class="{
@@ -53,11 +53,12 @@
               v-if="activedCell === `${rowIndex}_${colIndex}`"
               class="cell-text" 
               :class="{ 'active': activedCell === `${rowIndex}_${colIndex}` }"
+              :style="{ minHeight: (cellMinHeight - 4) + 'px' }"
               :value="cell.text"
               @updateValue="value => handleInput(value, rowIndex, colIndex)"
               @insertExcelData="value => insertExcelData(value, rowIndex, colIndex)"
             />
-            <div v-else class="cell-text" v-html="formatText(cell.text)" />
+            <div v-else class="cell-text" :style="{ minHeight: (cellMinHeight - 4) + 'px' }" v-html="formatText(cell.text)" />
           </td>
         </tr>
       </tbody>
@@ -89,6 +90,10 @@ const props = defineProps({
     type: Number,
     required: true,
   },
+  cellMinHeight: {
+    type: Number,
+    required: true,
+  },
   colWidths: {
     type: Array as PropType<number[]>,
     required: true,
@@ -700,10 +705,6 @@ table {
     }
   }
 
-  tr {
-    height: 36px;
-  }
-
   .cell {
     position: relative;
     white-space: normal;
@@ -724,7 +725,6 @@ table {
   }
 
   .cell-text {
-    min-height: 32px;
     padding: 5px;
     line-height: 1.5;
     user-select: none;
diff --git a/src/views/components/element/TableElement/StaticTable.vue b/src/views/components/element/TableElement/StaticTable.vue
index ef332506..8271f2ee 100644
--- a/src/views/components/element/TableElement/StaticTable.vue
+++ b/src/views/components/element/TableElement/StaticTable.vue
@@ -17,10 +17,7 @@
         <col span="1" v-for="(width, index) in colSizeList" :key="index" :width="width">
       </colgroup>
       <tbody>
-        <tr
-          v-for="(rowCells, rowIndex) in data" 
-          :key="rowIndex"
-        >
+        <tr v-for="(rowCells, rowIndex) in data" :key="rowIndex" :style="{ height: cellMinHeight + 'px' }">
           <td 
             class="cell"
             :style="{
@@ -35,7 +32,7 @@
             :colspan="cell.colspan"
             v-show="!hideCells.includes(`${rowIndex}_${colIndex}`)"
           >
-            <div class="cell-text" v-html="formatText(cell.text)" />
+            <div class="cell-text" :style="{ minHeight: (cellMinHeight - 4) + 'px' }" v-html="formatText(cell.text)" />
           </td>
         </tr>
       </tbody>
@@ -59,6 +56,10 @@ const props = defineProps({
     type: Number,
     required: true,
   },
+  cellMinHeight: {
+    type: Number,
+    required: true,
+  },
   colWidths: {
     type: Array as PropType<number[]>,
     required: true,
@@ -144,10 +145,6 @@ table {
     }
   }
 
-  tr {
-    height: 36px;
-  }
-
   .cell {
     position: relative;
     white-space: normal;
@@ -156,7 +153,6 @@ table {
   }
 
   .cell-text {
-    min-height: 32px;
     padding: 5px;
     line-height: 1.5;
   }
diff --git a/src/views/components/element/TableElement/index.vue b/src/views/components/element/TableElement/index.vue
index f11bcffb..bd17f88b 100644
--- a/src/views/components/element/TableElement/index.vue
+++ b/src/views/components/element/TableElement/index.vue
@@ -21,6 +21,7 @@
           @mousedown.stop
           :data="elementInfo.data"
           :width="elementInfo.width"
+          :cellMinHeight="elementInfo.cellMinHeight"
           :colWidths="elementInfo.colWidths"
           :outline="elementInfo.outline"
           :theme="elementInfo.theme"