From 16c0f8429760ca499d723c0b58edec3627bb5926 Mon Sep 17 00:00:00 2001 From: pipipi-pikachu Date: Mon, 15 Feb 2021 16:41:50 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E8=A1=A5=E5=85=85=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E6=B3=A8=E9=87=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ChartStylePanel/ChartDataEditor.vue | 8 +++++++ .../ChartStylePanel/index.vue | 5 +++++ .../ElementStylePanel/ImageStylePanel.vue | 15 +++++++++---- .../ElementStylePanel/ShapeStylePanel.vue | 3 +++ .../ElementStylePanel/TableStylePanel.vue | 22 +++++++++++++------ .../ElementStylePanel/TextStylePanel.vue | 6 +++++ 6 files changed, 48 insertions(+), 11 deletions(-) diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue index 9ab9926f..5783d402 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue +++ b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue @@ -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) diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue index 6ce1bafc..94fcf6ad 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue +++ b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue @@ -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 }) diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue index a174cf9a..c64a9e21 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue +++ b/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue @@ -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, diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue index 8c6e2068..5e818ac5 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue +++ b/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue @@ -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) => { 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 }) diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue index d19f2c57..59899dda 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue +++ b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue @@ -206,6 +206,11 @@ export default defineComponent({ setup() { const store = useStore() const handleElement = computed(() => 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([]) + // 更新当前选中单元格的文本样式状态 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) => { const data: TableCell[][] = JSON.parse(JSON.stringify(handleElement.value.data)) @@ -316,6 +319,7 @@ export default defineComponent({ updateTextAttrState() } + // 更新表格主题：主题色、标题行、汇总行、第一列、最后一列 const updateTheme = (themeProp: Partial) => { 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 diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue index ae9042e5..2742a690 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue +++ b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue @@ -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 })