jasder
/
PPTist
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

调整表格组件与样式工具栏的数据同步方式

This commit is contained in:
pipipi-pikachu 2021-01-25 23:57:56 +08:00
parent 5145857bb0
commit ac0270090c
3 changed files with 49 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/utils/emitter.ts
View File

@ -3,7 +3,7 @@ import mitt, { Emitter } from 'mitt'
export enum EmitterEvents {
UPDATE_TEXT_STATE = 'UPDATE_TEXT_STATE',
EXEC_TEXT_COMMAND = 'EXEC_TEXT_COMMAND',
UPDATE_TABLE_TEXT_STATE = 'UPDATE_TABLE_TEXT_STATE',
UPDATE_TABLE_SELECTED_CELL = 'UPDATE_TABLE_SELECTED_CELL',
EXEC_TABLE_TEXT_COMMAND = 'EXEC_TABLE_TEXT_COMMAND',
SCALE_ELEMENT_STATE = 'SCALE_ELEMENT_STATE',
}

48
src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
View File

@ -108,6 +108,29 @@
<Divider />
<div class="row">
<Button style="flex: 5;">上方插入行</Button>
<div style="flex: 1;"></div>
<Button style="flex: 5;">下方插入行</Button>
</div>
<div class="row">
<Button style="flex: 5;">左侧插入列</Button>
<div style="flex: 1;"></div>
<Button style="flex: 5;">右侧插入列</Button>
</div>
<div class="row">
<Button style="flex: 5;">删除行</Button>
<div style="flex: 1;"></div>
<Button style="flex: 5;">删除列</Button>
</div>
<div class="row">
<Button style="flex: 5;">合并单元格</Button>
<div style="flex: 1;"></div>
<Button style="flex: 5;">拆分单元格</Button>
</div>
<Divider />
<div class="row theme-switch">
<div style="flex: 2;">启用主题表格：</div>
<div class="switch-wrapper" style="flex: 3;">
@ -202,7 +225,20 @@ export default defineComponent({
hasTheme.value = !!theme.value
}, { deep: true, immediate: true })
const updateTextAttrs = (style?: Partial<TableCellStyle>) => {
const selectedCells = ref<string[]>([])
const updateTextAttrs = () => {
if(!handleElement.value) return
let rowIndex = 0
let colIndex = 0
if(selectedCells.value.length) {
const selectedCell = selectedCells.value[0]
rowIndex = +selectedCell.split('_')[0]
colIndex = +selectedCell.split('_')[1]
}
const style = handleElement.value.data[rowIndex][colIndex].style
if(!style) {
textAttrs.value = {
bold: false,
@ -231,9 +267,14 @@ export default defineComponent({
}
}
emitter.on(EmitterEvents.UPDATE_TABLE_TEXT_STATE, style => updateTextAttrs(style))
const updateSelectedCells = (cells: string[]) => {
selectedCells.value = cells
updateTextAttrs()
}
emitter.on(EmitterEvents.UPDATE_TABLE_SELECTED_CELL, cells => updateSelectedCells(cells))
onUnmounted(() => {
emitter.off(EmitterEvents.UPDATE_TABLE_TEXT_STATE, style => updateTextAttrs(style))
emitter.off(EmitterEvents.UPDATE_TABLE_SELECTED_CELL, cells => updateSelectedCells(cells))
})
const availableFonts = computed(() => store.state.availableFonts)
@ -245,6 +286,7 @@ export default defineComponent({
const emitUpdateTextAttrCommand = (textAttrProp: Partial<TableCellStyle>) => {
emitter.emit(EmitterEvents.EXEC_TABLE_TEXT_COMMAND, textAttrProp)
updateTextAttrs()
}
const updateTheme = (themeProp: Partial<TableTheme>) => {

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

@ -161,17 +161,6 @@ export default defineComponent({
const selectedCells = ref<string[]>([])
const emitUpdateTextAttrsState = () => {
let rowIndex = 0
let colIndex = 0
if(selectedCells.value.length) {
const selectedCell = selectedCells.value[0]
rowIndex = +selectedCell.split('_')[0]
colIndex = +selectedCell.split('_')[1]
}
emitter.emit(EmitterEvents.UPDATE_TABLE_TEXT_STATE, props.elementInfo.data[rowIndex][colIndex].style)
}
const updateTextAttrs = (textAttrProp: Partial<TableCellStyle>) => {
const data: TableCell[][] = JSON.parse(JSON.stringify(props.elementInfo.data))
@ -190,12 +179,13 @@ export default defineComponent({
})
addHistorySnapshot()
nextTick(emitUpdateTextAttrsState)
}
const updateSelectedCells = (cells: string[]) => {
selectedCells.value = cells
nextTick(emitUpdateTextAttrsState)
nextTick(() => {
emitter.emit(EmitterEvents.UPDATE_TABLE_SELECTED_CELL, selectedCells.value)
})
}
emitter.on(EmitterEvents.EXEC_TABLE_TEXT_COMMAND, state => updateTextAttrs(state))