diff --git a/README.md b/README.md index e63f9d2a..44292b72 100644 --- a/README.md +++ b/README.md @@ -115,7 +115,8 @@ npm run serve - 阴影 - 透明度 - 翻转 -- 编辑文字 +- 形状格式刷 +- 编辑文字(支持富文本,与文字元素的富文本编辑功能近似) #### 线条 - 颜色 - 宽度 diff --git a/src/hooks/useShapeFormatPainter.ts b/src/hooks/useShapeFormatPainter.ts new file mode 100644 index 00000000..6cf50d1f --- /dev/null +++ b/src/hooks/useShapeFormatPainter.ts @@ -0,0 +1,27 @@ +import { storeToRefs } from 'pinia' +import { useMainStore } from '@/store' +import type { PPTShapeElement } from '@/types/slides' + +export default () => { + const mainStore = useMainStore() + const { shapeFormatPainter, handleElement } = storeToRefs(mainStore) + + const toggleShapeFormatPainter = () => { + const _handleElement = handleElement.value as PPTShapeElement + + if (shapeFormatPainter.value) mainStore.setShapeFormatPainter(null) + else { + mainStore.setShapeFormatPainter({ + fill: _handleElement.fill, + gradient: _handleElement.gradient, + outline: _handleElement.outline, + opacity: _handleElement.opacity, + shadow: _handleElement.shadow, + }) + } + } + + return { + toggleShapeFormatPainter, + } +} diff --git a/src/hooks/useTextFormatPainter.ts b/src/hooks/useTextFormatPainter.ts index 641f1102..9e752c56 100644 --- a/src/hooks/useTextFormatPainter.ts +++ b/src/hooks/useTextFormatPainter.ts @@ -5,7 +5,7 @@ export default () => { const mainStore = useMainStore() const { richTextAttrs, textFormatPainter } = storeToRefs(mainStore) - const toggleFormatPainter = () => { + const toggleTextFormatPainter = () => { if (textFormatPainter.value) mainStore.setTextFormatPainter(null) else { mainStore.setTextFormatPainter({ @@ -23,6 +23,6 @@ export default () => { } return { - toggleFormatPainter, + toggleTextFormatPainter, } } diff --git a/src/store/main.ts b/src/store/main.ts index 00394e44..33795e8c 100644 --- a/src/store/main.ts +++ b/src/store/main.ts @@ -1,7 +1,7 @@ import { customAlphabet } from 'nanoid' import { defineStore } from 'pinia' import { ToolbarStates } from '@/types/toolbar' -import type { CreatingElement, TextFormatPainter } from '@/types/edit' +import type { CreatingElement, ShapeFormatPainter, TextFormatPainter } from '@/types/edit' import type { DialogForExportTypes } from '@/types/export' import { type TextAttrs, defaultRichTextAttrs } from '@/utils/prosemirror/utils' import { SYS_FONTS } from '@/configs/font' @@ -34,6 +34,7 @@ export interface MainState { dialogForExport: DialogForExportTypes databaseId: string textFormatPainter: TextFormatPainter | null + shapeFormatPainter: ShapeFormatPainter | null showSelectPanel: boolean showSearchPanel: boolean } @@ -67,6 +68,7 @@ export const useMainStore = defineStore('main', { dialogForExport: '', // 导出面板 databaseId, // 标识当前应用的indexedDB数据库ID textFormatPainter: null, // 文字格式刷 + shapeFormatPainter: null, // 形状格式刷 showSelectPanel: false, // 打开选择面板 showSearchPanel: false, // 打开查找替换面板 }), @@ -183,6 +185,10 @@ export const useMainStore = defineStore('main', { this.textFormatPainter = textFormatPainter }, + setShapeFormatPainter(shapeFormatPainter: ShapeFormatPainter | null) { + this.shapeFormatPainter = shapeFormatPainter + }, + setSelectPanelState(show: boolean) { this.showSelectPanel = show }, diff --git a/src/types/edit.ts b/src/types/edit.ts index d4e12304..cc93fda3 100644 --- a/src/types/edit.ts +++ b/src/types/edit.ts @@ -1,6 +1,6 @@ import type { ShapePoolItem } from '@/configs/shapes' import type { LinePoolItem } from '@/configs/lines' -import type { ImageClipDataRange } from './slides' +import type { ImageClipDataRange, PPTElementOutline, PPTElementShadow, ShapeGradient } from './slides' export enum ElementOrderCommands { UP = 'up', @@ -111,4 +111,12 @@ export interface TextFormatPainter { fontsize?: string fontname?: string align?: 'left' | 'right' | 'center' +} + +export interface ShapeFormatPainter { + fill?: string + gradient?: ShapeGradient + outline?: PPTElementOutline + opacity?: number + shadow?: PPTElementShadow } \ No newline at end of file diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue index b0217f02..b554fc7c 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue +++ b/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue @@ -198,7 +198,7 @@ style="flex: 1;" :checked="!!textFormatPainter" v-tooltip="'格式刷'" - @click="toggleFormatPainter()" + @click="toggleTextFormatPainter()" > @@ -234,6 +234,15 @@ + + +
+ 形状格式刷 +
@@ -247,6 +256,7 @@ import { type ShapePoolItem, SHAPE_LIST, SHAPE_PATH_FORMULAS } from '@/configs/s import emitter, { EmitterEvents } from '@/utils/emitter' import useHistorySnapshot from '@/hooks/useHistorySnapshot' import useTextFormatPainter from '@/hooks/useTextFormatPainter' +import useShapeFormatPainter from '@/hooks/useShapeFormatPainter' import ElementOpacity from '../common/ElementOpacity.vue' import ElementOutline from '../common/ElementOutline.vue' @@ -269,7 +279,7 @@ import Popover from '@/components/Popover.vue' const mainStore = useMainStore() const slidesStore = useSlidesStore() -const { handleElement, handleElementId, richTextAttrs, availableFonts, textFormatPainter } = storeToRefs(mainStore) +const { handleElement, handleElementId, richTextAttrs, availableFonts, textFormatPainter, shapeFormatPainter } = storeToRefs(mainStore) const handleShapeElement = handleElement as Ref @@ -292,7 +302,8 @@ watch(handleElement, () => { }, { deep: true, immediate: true }) const { addHistorySnapshot } = useHistorySnapshot() -const { toggleFormatPainter } = useTextFormatPainter() +const { toggleTextFormatPainter } = useTextFormatPainter() +const { toggleShapeFormatPainter } = useShapeFormatPainter() const updateElement = (props: Partial) => { slidesStore.updateElement({ id: handleElementId.value, props }) diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue index 720cf836..6fe98171 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue +++ b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue @@ -142,7 +142,7 @@ style="flex: 1;" :checked="!!textFormatPainter" v-tooltip="'格式刷'" - @click="toggleFormatPainter()" + @click="toggleTextFormatPainter()" >