feat: 格式刷支持双击连续使用

src/hooks/useShapeFormatPainter.ts

@@ -6,12 +6,13 @@ export default () => {
   const mainStore = useMainStore()
   const { shapeFormatPainter, handleElement } = storeToRefs(mainStore)
 
-  const toggleShapeFormatPainter = () => {
+  const toggleShapeFormatPainter = (keep = false) => {
     const _handleElement = handleElement.value as PPTShapeElement
 
     if (shapeFormatPainter.value) mainStore.setShapeFormatPainter(null)
     else {
       mainStore.setShapeFormatPainter({
+        keep,
         fill: _handleElement.fill,
         gradient: _handleElement.gradient,
         outline: _handleElement.outline,

src/hooks/useTextFormatPainter.ts

@@ -5,10 +5,11 @@ export default () => {
   const mainStore = useMainStore()
   const { richTextAttrs, textFormatPainter } = storeToRefs(mainStore)
 
-  const toggleTextFormatPainter = () => {
+  const toggleTextFormatPainter = (keep = false) => {
     if (textFormatPainter.value) mainStore.setTextFormatPainter(null)
     else {
       mainStore.setTextFormatPainter({
+        keep,
         bold: richTextAttrs.value.bold,
         em: richTextAttrs.value.em,
         underline: richTextAttrs.value.underline,

src/types/edit.ts

@@ -102,6 +102,7 @@ export type CreatingElement = CreatingTextElement | CreatingShapeElement | Creat
 export type TextFormatPainterKeys = 'bold' | 'em' | 'underline' | 'strikethrough' | 'color' | 'backcolor' | 'fontsize' | 'fontname' | 'align'
 
 export interface TextFormatPainter {
+  keep: boolean
   bold?: boolean
   em?: boolean
   underline?: boolean
@@ -114,6 +115,7 @@ export interface TextFormatPainter {
 }
 
 export interface ShapeFormatPainter {
+  keep: boolean
   fill?: string
   gradient?: ShapeGradient
   outline?: PPTElementOutline

src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue

@@ -198,8 +198,9 @@
         <CheckboxButton
           style="flex: 1;"
           :checked="!!textFormatPainter"
-          v-tooltip="'格式刷'"
+          v-tooltip="'格式刷（双击连续使用）'"
           @click="toggleTextFormatPainter()"
+          @dblclick="toggleTextFormatPainter(true)"
         ><IconFormatBrush /></CheckboxButton>
       </ButtonGroup>
 
@@ -239,9 +240,11 @@
 
     <div class="row">
       <CheckboxButton
+        v-tooltip="'双击连续使用'"
         style="flex: 1;"
         :checked="!!shapeFormatPainter"
         @click="toggleShapeFormatPainter()"
+        @dblclick="toggleShapeFormatPainter(true)"
       ><IconFormatBrush /> 形状格式刷</CheckboxButton>
     </div>
   </div>

src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue

@@ -143,8 +143,9 @@
       <CheckboxButton
         style="flex: 1;"
         :checked="!!textFormatPainter"
-        v-tooltip="'格式刷'"
+        v-tooltip="'格式刷（双击连续使用）'"
         @click="toggleTextFormatPainter()"
+        @dblclick="toggleTextFormatPainter(true)"
       ><IconFormatBrush /></CheckboxButton>
       <Popover placement="bottom-end" trigger="click" v-model:value="linkPopoverVisible" style="width: 33.33%;">
         <template #content>

src/views/components/element/ProsemirrorEditor.vue

@@ -231,16 +231,17 @@ const execCommand = ({ target, action }: RichTextCommand) => {
 // 鼠标抬起时，执行格式刷命令
 const handleMouseup = () => {
   if (!textFormatPainter.value) return
+  const { keep, ...newProps } = textFormatPainter.value
 
   const actions: RichTextAction[] = [{ command: 'clear' }]
-  for (const key of Object.keys(textFormatPainter.value) as TextFormatPainterKeys[]) {
+  for (const key of Object.keys(newProps) as TextFormatPainterKeys[]) {
     const command = key
     const value = textFormatPainter.value[key]
     if (value === true) actions.push({ command })
     else if (value) actions.push({ command, value })
   }
   execCommand({ action: actions })
-  mainStore.setTextFormatPainter(null)
+  if (!keep) mainStore.setTextFormatPainter(null)
 }
 
 // Prosemirror编辑器的初始化和卸载

src/views/components/element/ShapeElement/index.vue

@@ -116,13 +116,15 @@ const handleSelectElement = (e: MouseEvent | TouchEvent, canMove = true) => {
 
 const execFormatPainter = () => {
   if (!shapeFormatPainter.value) return
+  const { keep, ...newProps } = shapeFormatPainter.value
+
   slidesStore.updateElement({
     id: props.elementInfo.id, 
-    props: shapeFormatPainter.value,
+    props: newProps,
   })
   
   addHistorySnapshot()
-  mainStore.setShapeFormatPainter(null)
+  if (!keep) mainStore.setShapeFormatPainter(null)
 }
 
 const outline = computed(() => props.elementInfo.outline)