docs: 补充代码注释
This commit is contained in:
pipipi-pikachu
parent
d82641503f
commit
16c0f84297
|
|
@ -62,6 +62,7 @@ export default defineComponent({
|
|||
const selectedRange = ref([0, 0])
|
||||
const tempRangeSize = ref({ width: 0, height: 0 })
|
||||
|
||||
// 当前选区的边框线条位置
|
||||
const rangeLines = computed(() => {
|
||||
const width = selectedRange.value[0] * CELL_WIDTH
|
||||
const height = selectedRange.value[1] * CELL_HEIGHT
|
||||
|
|
@ -73,12 +74,14 @@ export default defineComponent({
|
|||
]
|
||||
})
|
||||
|
||||
// 当前选区的缩放点位置
|
||||
const resizablePointStyle = computed(() => {
|
||||
const width = selectedRange.value[0] * CELL_WIDTH
|
||||
const height = selectedRange.value[1] * CELL_HEIGHT
|
||||
return { left: width + 'px', top: height + 'px' }
|
||||
})
|
||||
|
||||
// 初始化图表数据：将数据格式化并填充到DOM
|
||||
const initData = () => {
|
||||
const _data: string[][] = []
|
||||
|
||||
|
|
@ -107,12 +110,14 @@ export default defineComponent({
|
|||
|
||||
onMounted(initData)
|
||||
|
||||
// 获取当前图表DOM中的数据，整理格式化后传递出去
|
||||
const getTableData = () => {
|
||||
const [col, row] = selectedRange.value
|
||||
|
||||
const labels: string[] = []
|
||||
const series: number[][] = []
|
||||
|
||||
// 第一列为系列名，实际数据从第二列开始
|
||||
for (let rowIndex = 0; rowIndex < row; rowIndex++) {
|
||||
let labelsItem = `类别${rowIndex + 1}`
|
||||
const labelInputRef = document.querySelector(`#cell-${rowIndex}-0`) as HTMLInputElement
|
||||
|
|
@ -136,8 +141,10 @@ export default defineComponent({
|
|||
emit('save', data)
|
||||
}
|
||||
|
||||
// 关闭图表数据编辑器
|
||||
const closeEditor = () => emit('close')
|
||||
|
||||
// 鼠标拖拽修改选中的数据范围
|
||||
const changeSelectRange = (e: MouseEvent) => {
|
||||
let isMouseDown = true
|
||||
|
||||
|
|
@ -172,6 +179,7 @@ export default defineComponent({
|
|||
|
||||
if (startPageX === endPageX && startPageY === endPageY) return
|
||||
|
||||
// 拖拽结束时，范围超过格子一半自动扩大到下一格（如拖动到一格半多的位置，会自动扩展到两格，横竖都同理）
|
||||
let width = tempRangeSize.value.width
|
||||
let height = tempRangeSize.value.height
|
||||
if (width % CELL_WIDTH > CELL_WIDTH * 0.5) width = width + (CELL_WIDTH - width % CELL_WIDTH)
|
||||
|
|
|
|||
|
|
@ -159,6 +159,7 @@ export default defineComponent({
|
|||
gridColor.value = handleElement.value.gridColor || 'rgba(0, 0, 0, 0.4)'
|
||||
}, { deep: true, immediate: true })
|
||||
|
||||
// 设置图表数据
|
||||
const updateData = (data: ChartData) => {
|
||||
chartDataEditorVisible.value = false
|
||||
const props = { data }
|
||||
|
|
@ -166,12 +167,14 @@ export default defineComponent({
|
|||
addHistorySnapshot()
|
||||
}
|
||||
|
||||
// 设置填充色
|
||||
const updateFill = (value: string) => {
|
||||
const props = { fill: value }
|
||||
store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
|
||||
addHistorySnapshot()
|
||||
}
|
||||
|
||||
// 设置其他选项：柱状图转条形图、折线图转面积图、折线图转散点图、饼图转环形图、折线图开关平滑曲线
|
||||
const updateOptions = (optionProps: ILineChartOptions & IBarChartOptions & IPieChartOptions) => {
|
||||
const options = handleElement.value.options || {}
|
||||
const newOptions = { ...options, ...optionProps }
|
||||
|
|
@ -180,12 +183,14 @@ export default defineComponent({
|
|||
addHistorySnapshot()
|
||||
}
|
||||
|
||||
// 设置主题色
|
||||
const updateTheme = (themeColor: string) => {
|
||||
const props = { themeColor }
|
||||
store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
|
||||
addHistorySnapshot()
|
||||
}
|
||||
|
||||
// 设置网格颜色
|
||||
const updateGridColor = (gridColor: string) => {
|
||||
const props = { gridColor }
|
||||
store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
|
||||
|
|
|
|||
|
|
@ -171,6 +171,7 @@ export default defineComponent({
|
|||
|
||||
const { addHistorySnapshot } = useHistorySnapshot()
|
||||
|
||||
// 设置滤镜
|
||||
const updateFilter = (filter: FilterOption, value: number) => {
|
||||
const originFilters = handleElement.value.filters || {}
|
||||
const filters = { ...originFilters, [filter.key]: `${value}${filter.unit}` }
|
||||
|
|
@ -179,20 +180,22 @@ export default defineComponent({
|
|||
addHistorySnapshot()
|
||||
}
|
||||
|
||||
// 打开自由裁剪
|
||||
const clipImage = () => {
|
||||
store.commit(MutationTypes.SET_CLIPING_IMAGE_ELEMENT_ID, handleElement.value.id)
|
||||
clipPanelVisible.value = false
|
||||
}
|
||||
|
||||
// 获取原始图片的位置大小
|
||||
const getImageElementDataBeforeClip = () => {
|
||||
// 图片当前宽高位置、裁剪范围
|
||||
|
||||
// 图片当前的位置大小和裁剪范围
|
||||
const imgWidth = handleElement.value.width
|
||||
const imgHeight = handleElement.value.height
|
||||
const imgLeft = handleElement.value.left
|
||||
const imgTop = handleElement.value.top
|
||||
const originClipRange = handleElement.value.clip ? handleElement.value.clip.range : [[0, 0], [100, 100]]
|
||||
|
||||
// 图片原本未裁剪过时的宽高位置
|
||||
const originWidth = imgWidth / ((originClipRange[1][0] - originClipRange[0][0]) / 100)
|
||||
const originHeight = imgHeight / ((originClipRange[1][1] - originClipRange[0][1]) / 100)
|
||||
const originLeft = imgLeft - originWidth * (originClipRange[0][0] / 100)
|
||||
|
|
@ -207,6 +210,7 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
|
||||
// 预设裁剪
|
||||
const presetImageClip = (shape: string, ratio = 0) => {
|
||||
const {
|
||||
originClipRange,
|
||||
|
|
@ -216,7 +220,7 @@ export default defineComponent({
|
|||
originTop,
|
||||
} = getImageElementDataBeforeClip()
|
||||
|
||||
// 设置形状和纵横比
|
||||
// 纵横比裁剪（形状固定为矩形）
|
||||
if (ratio) {
|
||||
const imageRatio = originHeight / originWidth
|
||||
|
||||
|
|
@ -243,7 +247,7 @@ export default defineComponent({
|
|||
},
|
||||
})
|
||||
}
|
||||
// 仅设置形状（维持目前的裁剪范围）
|
||||
// 形状裁剪（保持当前裁剪范围）
|
||||
else {
|
||||
store.commit(MutationTypes.UPDATE_ELEMENT, {
|
||||
id: handleElement.value.id,
|
||||
|
|
@ -256,6 +260,7 @@ export default defineComponent({
|
|||
addHistorySnapshot()
|
||||
}
|
||||
|
||||
// 替换图片（保持当前的样式）
|
||||
const replaceImage = (files: File[]) => {
|
||||
const imageFile = files[0]
|
||||
if (!imageFile) return
|
||||
|
|
@ -266,6 +271,7 @@ export default defineComponent({
|
|||
addHistorySnapshot()
|
||||
}
|
||||
|
||||
// 重置图片：清除全部样式
|
||||
const resetImage = () => {
|
||||
if (handleElement.value.clip) {
|
||||
const {
|
||||
|
|
@ -293,6 +299,7 @@ export default defineComponent({
|
|||
addHistorySnapshot()
|
||||
}
|
||||
|
||||
// 将图片设置为背景
|
||||
const setBackgroundImage = () => {
|
||||
const background = {
|
||||
...currentSlide.value.background,
|
||||
|
|
|
|||
|
|
@ -118,6 +118,7 @@ export default defineComponent({
|
|||
|
||||
const { addHistorySnapshot } = useHistorySnapshot()
|
||||
|
||||
// 设置填充类型：渐变、纯色
|
||||
const updateFillType = (type: 'gradient' | 'fill') => {
|
||||
if (type === 'fill') {
|
||||
store.commit(MutationTypes.REMOVE_ELEMENT_PROPS, {
|
||||
|
|
@ -132,12 +133,14 @@ export default defineComponent({
|
|||
addHistorySnapshot()
|
||||
}
|
||||
|
||||
// 设置渐变填充
|
||||
const updateGradient = (gradientProps: Partial<ShapeGradient>) => {
|
||||
const props = { gradient: { ...gradient.value, ...gradientProps } }
|
||||
store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
|
||||
addHistorySnapshot()
|
||||
}
|
||||
|
||||
// 设置填充色
|
||||
const updateFill = (value: string) => {
|
||||
const props = { fill: value }
|
||||
store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
|
||||
|
|
|
|||
|
|
@ -206,6 +206,11 @@ export default defineComponent({
|
|||
setup() {
|
||||
const store = useStore()
|
||||
const handleElement = computed<PPTTableElement>(() => store.getters.handleElement)
|
||||
|
||||
const availableFonts = computed(() => store.state.availableFonts)
|
||||
const fontSizeOptions = [
|
||||
'12px', '14px', '16px', '18px', '20px', '22px', '24px', '28px', '32px',
|
||||
]
|
||||
|
||||
const textAttrs = ref({
|
||||
bold: false,
|
||||
|
|
@ -239,8 +244,11 @@ export default defineComponent({
|
|||
minColCount.value = handleElement.value.data[0].length
|
||||
}, { deep: true, immediate: true })
|
||||
|
||||
const { addHistorySnapshot } = useHistorySnapshot()
|
||||
|
||||
const selectedCells = ref<string[]>([])
|
||||
|
||||
// 更新当前选中单元格的文本样式状态
|
||||
const updateTextAttrState = () => {
|
||||
if (!handleElement.value) return
|
||||
|
||||
|
|
@ -281,6 +289,7 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
|
||||
// 监听并更新当前选中的单元格
|
||||
const updateSelectedCells = (cells: string[]) => {
|
||||
selectedCells.value = cells
|
||||
updateTextAttrState()
|
||||
|
|
@ -291,13 +300,7 @@ export default defineComponent({
|
|||
emitter.off(EmitterEvents.UPDATE_TABLE_SELECTED_CELL, cells => updateSelectedCells(cells))
|
||||
})
|
||||
|
||||
const availableFonts = computed(() => store.state.availableFonts)
|
||||
const fontSizeOptions = [
|
||||
'12px', '14px', '16px', '18px', '20px', '22px', '24px', '28px', '32px',
|
||||
]
|
||||
|
||||
const { addHistorySnapshot } = useHistorySnapshot()
|
||||
|
||||
// 设置单元格内容文本样式
|
||||
const updateTextAttrs = (textAttrProp: Partial<TableCellStyle>) => {
|
||||
const data: TableCell[][] = JSON.parse(JSON.stringify(handleElement.value.data))
|
||||
|
||||
|
|
@ -316,6 +319,7 @@ export default defineComponent({
|
|||
updateTextAttrState()
|
||||
}
|
||||
|
||||
// 更新表格主题：主题色、标题行、汇总行、第一列、最后一列
|
||||
const updateTheme = (themeProp: Partial<TableTheme>) => {
|
||||
const currentTheme = theme.value || {}
|
||||
const props = { theme: { ...currentTheme, ...themeProp } }
|
||||
|
|
@ -323,6 +327,7 @@ export default defineComponent({
|
|||
addHistorySnapshot()
|
||||
}
|
||||
|
||||
// 开启/关闭表格主题
|
||||
const toggleTheme = (checked: boolean) => {
|
||||
if (checked) {
|
||||
const props = {
|
||||
|
|
@ -342,6 +347,7 @@ export default defineComponent({
|
|||
addHistorySnapshot()
|
||||
}
|
||||
|
||||
// 设置表格行数（只能增加）
|
||||
const setTableRow = (e: KeyboardEvent) => {
|
||||
const value = +(e.target as HTMLInputElement).value
|
||||
const rowCount = handleElement.value.data.length
|
||||
|
|
@ -360,6 +366,8 @@ export default defineComponent({
|
|||
addHistorySnapshot()
|
||||
}
|
||||
|
||||
|
||||
// 设置表格列数（只能增加）
|
||||
const setTableCol = (e: KeyboardEvent) => {
|
||||
const value = +(e.target as HTMLInputElement).value
|
||||
const colCount = handleElement.value.data[0].length
|
||||
|
|
|
|||
|
|
@ -360,6 +360,7 @@ export default defineComponent({
|
|||
const lineHeightOptions = [0.9, 1.0, 1.15, 1.2, 1.4, 1.5, 1.8, 2.0, 2.5, 3.0]
|
||||
const wordSpaceOptions = [0, 1, 2, 3, 4, 5, 6, 8, 10]
|
||||
|
||||
// 接收并更新当前光标所在位置的富文本状态
|
||||
const updateRichTextAttrs = (attr: TextAttrs) => richTextAttrs.value = attr
|
||||
|
||||
emitter.on(EmitterEvents.UPDATE_TEXT_STATE, attr => updateRichTextAttrs(attr))
|
||||
|
|
@ -367,28 +368,33 @@ export default defineComponent({
|
|||
emitter.off(EmitterEvents.UPDATE_TEXT_STATE, attr => updateRichTextAttrs(attr))
|
||||
})
|
||||
|
||||
// 发射富文本设置命令
|
||||
const emitRichTextCommand = (command: string, value?: string) => {
|
||||
emitter.emit(EmitterEvents.EXEC_TEXT_COMMAND, { command, value })
|
||||
}
|
||||
|
||||
// 发射富文本设置命令（批量）
|
||||
const emitBatchRichTextCommand = (payload: CommandPayload[]) => {
|
||||
emitter.emit(EmitterEvents.EXEC_TEXT_COMMAND, payload)
|
||||
}
|
||||
|
||||
const { addHistorySnapshot } = useHistorySnapshot()
|
||||
|
||||
// 设置行高
|
||||
const updateLineHeight = (value: number) => {
|
||||
const props = { lineHeight: value }
|
||||
store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
|
||||
addHistorySnapshot()
|
||||
}
|
||||
|
||||
// 设置字间距
|
||||
const updateWordSpace = (value: number) => {
|
||||
const props = { wordSpace: value }
|
||||
store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
|
||||
addHistorySnapshot()
|
||||
}
|
||||
|
||||
// 设置文本框填充
|
||||
const updateFill = (value: string) => {
|
||||
const props = { fill: value }
|
||||
store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
|
||||
|
|
|
|||
Loading…
Reference in New Issue