github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 表格支持主动调整高度（#77）

Browse Source
This commit is contained in:
pipipi-pikachu 2022-09-11 19:51:53 +08:00
parent 9135d0a77b
commit 6bc30dc4c3
9 changed files with 34 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/hooks/useCreateElement.ts
View File

@ -164,6 +164,7 @@ export default () => {
colHeader: false,
colFooter: false,
},
cellMinHeight: 36,
})
}

3
src/types/slides.ts
View File

@ -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[][]
}

4
src/views/Editor/Canvas/Operate/TableElementOperate.vue
View File

@ -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>

12
src/views/Editor/Canvas/hooks/useScaleElement.ts
View File

@ -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 }
})
}

2
src/views/Editor/Toolbar/ElementPositionPanel.vue
View File

@ -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;"

1
src/views/components/element/TableElement/BaseTableElement.vue
View File

@ -15,6 +15,7 @@
<StaticTable
:data="elementInfo.data"
:width="elementInfo.width"
:cellMinHeight="elementInfo.cellMinHeight"
:colWidths="elementInfo.colWidths"
:outline="elementInfo.outline"
:theme="elementInfo.theme"

14
src/views/components/element/TableElement/EditableTable.vue
View File

@ -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;

16
src/views/components/element/TableElement/StaticTable.vue
View File

@ -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;
}

1
src/views/components/element/TableElement/index.vue
View File

@ -21,6 +21,7 @@
@mousedown.stop
:data="elementInfo.data"
:width="elementInfo.width"
:cellMinHeight="elementInfo.cellMinHeight"
:colWidths="elementInfo.colWidths"
:outline="elementInfo.outline"
:theme="elementInfo.theme"