文本编辑状态中，也支持文本样式修改的撤销回退操作

Author: huanghaiyang

src/modules/command/ElementsBaseCommand.ts

@@ -4,10 +4,14 @@ import IStageStore from "@/types/IStageStore";
 export default class ElementsBaseCommand<T> implements ICommand<T> {
   payload: T;
   store: IStageStore;
+  id: string;
+  relationId?: string;
 
-  constructor(payload: T, store: IStageStore) {
+  constructor(id: string, payload: T, store: IStageStore, relationId?: string) {
     this.payload = payload;
     this.store = store;
+    this.id = id;
+    this.relationId = relationId;
   }
 
   async undo(): Promise<void> {

src/modules/command/text/TextEditorBaseCommand.ts

@@ -4,10 +4,14 @@ import { IElementText } from "@/types/IElement";
 export default class TextEditorBaseCommand<T> implements ICommand<T> {
   payload: T;
   element: IElementText;
+  id: string;
+  relationId?: string;
 
-  constructor(payload: T, element: IElementText) {
+  constructor(id: string, payload: T, element: IElementText, relationId?: string) {
     this.payload = payload;
     this.element = element;
+    this.id = id;
+    this.relationId = relationId;
   }
 
   async undo(): Promise<void> {

src/modules/elements/Element.ts

@@ -1336,6 +1336,20 @@ export default class Element implements IElement, ILinkedNodeValue {
     }
   }
 
+  /**
+   * 发送撤销事件
+   */
+  protected async emitUndo(): Promise<void> {
+    await this.shield.execUndo();
+  }
+
+  /**
+   * 发送重做事件
+   */
+  protected async emitRedo(): Promise<void> {
+    await this.shield.execRedo();
+  }
+
   /**
    * 将坐标根据描边类型进行转换
    *

src/modules/elements/ElementText.ts

@@ -106,26 +106,26 @@ export default class ElementText extends ElementRect implements IElementText {
   }
 
   get fontLineHeightFactorInputEnable(): boolean {
-    return this.status === ElementStatus.finished;
+    return true;
   }
 
   get fontLetterSpacingInputEnable(): boolean {
     return true;
   }
 
   get paragraphSpacingInputEnable(): boolean {
-    return this.status === ElementStatus.finished;
+    return true;
   }
 
   get textCaseInputEnable(): boolean {
-    return this.status === ElementStatus.finished;
+    return true;
   }
 
   get textAlignInputEnable(): boolean {
-    return this.status === ElementStatus.finished;
+    return true;
   }
   get textVerticalAlignInputEnable(): boolean {
-    return this.status === ElementStatus.finished;
+    return true;
   }
 
   get editingEnable(): boolean {
@@ -543,6 +543,8 @@ export default class ElementText extends ElementRect implements IElementText {
         // 撤销
         const tailUndoCommand = this._undoRedo.tailUndoCommand;
         if (tailUndoCommand) {
+          const { relationId } = tailUndoCommand;
+          if (relationId) await this.emitUndo();
           await this._undoRedo.undo();
           this._editorOperation = TextEditorOperations.UNDO;
           if (![TextEditorOperations.MOVE_CURSOR, TextEditorOperations.MOVE_SELECTION].includes(tailUndoCommand.payload.operation)) {
@@ -553,6 +555,8 @@ export default class ElementText extends ElementRect implements IElementText {
         // 回退
         const tailRedoCommand = this._undoRedo.tailRedoCommand;
         if (tailRedoCommand) {
+          const { relationId } = tailRedoCommand;
+          if (relationId) await this.emitRedo();
           await this._undoRedo.redo();
           this._editorOperation = TextEditorOperations.REDO;
           if (![TextEditorOperations.MOVE_CURSOR, TextEditorOperations.MOVE_SELECTION].includes(tailRedoCommand.payload.operation)) {
@@ -1733,6 +1737,7 @@ export default class ElementText extends ElementRect implements IElementText {
       tailUndoCommand.payload.rData = this._getTextEditorCommandObject();
     } else {
       const command = new TextEditorUpdatedCommand(
+        nanoid(),
         {
           type: TextEeditorCommandTypes.TextUpdated,
           operation: this._editorOperation,
@@ -1771,6 +1776,7 @@ export default class ElementText extends ElementRect implements IElementText {
       tailUndoCommand.payload.rData = this._getTextEditorCommandObject({ dataExclude: true });
     } else {
       const command = new TextEditorUpdatedCommand(
+        nanoid(),
         {
           type: TextEeditorCommandTypes.CursorSelectionUpdated,
           operation: this._editorOperation,
@@ -1902,4 +1908,31 @@ export default class ElementText extends ElementRect implements IElementText {
   isModelPolygonOverlap(coords: IPoint[]): boolean {
     return super.isModelPolygonOverlap(coords) || MathUtils.isPolygonsOverlap(this._getTextRotateRenderCoords(), coords);
   }
+
+  /**
+   * 刷新文本编辑器撤销命令对象（刷新当前状态以便回退）
+   */
+  refreshUndoCommandObject(): void {
+    this._undoCommandObject = this._getTextEditorCommandObject();
+  }
+
+  /**
+   * 关联组件撤销命令
+   *
+   * @param commandId
+   */
+  relationUndoCommand(commandId: string): void {
+    const editCommand = new TextEditorUpdatedCommand(
+      nanoid(),
+      {
+        type: TextEeditorCommandTypes.CursorSelectionUpdated,
+        operation: this._editorOperation,
+        updateId: this._textUpdateId,
+        uData: this._undoCommandObject,
+      },
+      this,
+      commandId,
+    );
+    this._undoRedo.add(editCommand);
+  }
 }

src/modules/elements/utils/TextElementUtils.ts

@@ -2,7 +2,7 @@ import { FontStyle, FontStyleSet, TextFontStyle } from "@/styles/ElementStyles";
 import { Direction, IPoint } from "@/types";
 import { TextCursorWidth } from "@/types/constants";
 import { ElementObject } from "@/types/IElement";
-import ITextData, { ITextCursor, ITextLine, ITextNode, ITextSelection } from "@/types/IText";
+import ITextData, { ITextCursor, ITextLine, ITextNode, ITextSelection, TextFontStyleUpdateTypes } from "@/types/IText";
 import CommonUtils from "@/utils/CommonUtils";
 import LodashUtils from "@/utils/LodashUtils";
 import { pick, every, isString, isNumber } from "lodash";
@@ -1283,4 +1283,32 @@ export default class TextElementUtils {
     const endY = textLines[textLines.length - 1].y + textLines[textLines.length - 1].height;
     return (endY - startY) / scale;
   }
+
+  /**
+   * 判断是否应该为撤销回退命令关联到当前的文本编辑命令
+
+   * @param updateType 更新类型
+   * @returns 是否为关系型命令
+   */
+  static shouldRelationUndoCommand(updateType: TextFontStyleUpdateTypes): boolean {
+    return [
+      TextFontStyleUpdateTypes.FONT_FAMILY,
+      TextFontStyleUpdateTypes.FONT_SIZE,
+      TextFontStyleUpdateTypes.FONT_COLOR,
+      TextFontStyleUpdateTypes.FONT_COLOR_OPACITY,
+      TextFontStyleUpdateTypes.FONT_LETTER_SPACING,
+      TextFontStyleUpdateTypes.FONT_STYLER,
+      TextFontStyleUpdateTypes.FONT_TEXT_CASE,
+      TextFontStyleUpdateTypes.FONT_TEXT_DECORATION,
+      TextFontStyleUpdateTypes.FONT_TEXT_DECORATION_COLOR,
+      TextFontStyleUpdateTypes.FONT_TEXT_DECORATION_OPACITY,
+      TextFontStyleUpdateTypes.FONT_TEXT_DECORATION_THICKNESS,
+      TextFontStyleUpdateTypes.FONT_LINE_HEIGHT,
+      TextFontStyleUpdateTypes.FONT_LINE_HEIGHT_FACTOR,
+      TextFontStyleUpdateTypes.FONT_LINE_HEIGHT_AUTO_FIT,
+      TextFontStyleUpdateTypes.FONT_TEXT_ALIGN,
+      TextFontStyleUpdateTypes.FONT_TEXT_VERTICAL_ALIGN,
+      TextFontStyleUpdateTypes.FONT_PARAGRAPH_SPACING,
+    ].includes(updateType);
+  }
 }