aida_front/src/component/Canvas/CanvasEditor/commands/TextCommands.js

import { Command } from "./Command";

/**
 * 文本内容命令
 * 用于更改文本图层的文本内容
 */
export class TextContentCommand extends Command {
  constructor(options) {
    super({
      name: "修改文本内容",
      description: "修改文本图层的文本内容",
    });
    this.canvas = options.canvas;
    this.textObject = options.textObject;
    this.newText = options.newText;
    this.oldText = this.textObject.text;
  }

  execute() {
    this.textObject.set("text", this.newText);
    this.canvas.renderAll();
    return true;
  }

  undo() {
    this.textObject.set("text", this.oldText);
    this.canvas.renderAll();
    return true;
  }
}

/**
 * 文本字体命令
 * 用于更改文本图层的字体
 */
export class TextFontCommand extends Command {
  constructor(options) {
    super({
      name: "修改文本字体",
      description: "修改文本图层的字体",
    });
    this.canvas = options.canvas;
    this.textObject = options.textObject;
    this.newFont = options.newFont;
    this.oldFont = this.textObject.fontFamily;
  }

  execute() {
    this.textObject.set("fontFamily", this.newFont);
    this.canvas.renderAll();
    return true;
  }

  undo() {
    this.textObject.set("fontFamily", this.oldFont);
    this.canvas.renderAll();
    return true;
  }
}

/**
 * 文本尺寸命令
 * 用于更改文本图层的字体大小
 */
export class TextSizeCommand extends Command {
  constructor(options) {
    super({
      name: "修改文本尺寸",
      description: "修改文本图层的字体大小",
    });
    this.canvas = options.canvas;
    this.textObject = options.textObject;
    this.newSize = options.newSize;
    this.oldSize = this.textObject.fontSize;
  }

  execute() {
    this.textObject.set("fontSize", this.newSize);
    this.canvas.renderAll();
    return true;
  }

  undo() {
    this.textObject.set("fontSize", this.oldSize);
    this.canvas.renderAll();
    return true;
  }
}

/**
 * 文本颜色命令
 * 用于更改文本图层的颜色
 */
export class TextColorCommand extends Command {
  constructor(options) {
    super({
      name: "修改文本颜色",
      description: "修改文本图层的颜色",
    });
    this.canvas = options.canvas;
    this.textObject = options.textObject;
    this.newColor = options.newColor;
    this.oldColor = this.textObject.fill;
  }

  execute() {
    this.textObject.set("fill", this.newColor);
    this.canvas.renderAll();
    return true;
  }

  undo() {
    this.textObject.set("fill", this.oldColor);
    this.canvas.renderAll();
    return true;
  }
}

/**
 * 文本对齐方式命令
 * 用于更改文本图层的对齐方式
 */
export class TextAlignCommand extends Command {
  constructor(options) {
    super({
      name: "修改文本对齐",
      description: "修改文本图层的对齐方式",
    });
    this.canvas = options.canvas;
    this.textObject = options.textObject;
    this.newAlign = options.newAlign;
    this.oldAlign = this.textObject.textAlign;
  }

  execute() {
    this.textObject.set("textAlign", this.newAlign);
    this.canvas.renderAll();
    return true;
  }

  undo() {
    this.textObject.set("textAlign", this.oldAlign);
    this.canvas.renderAll();
    return true;
  }
}

/**
 * 文本样式命令
 * 用于更改文本图层的样式(粗体、斜体、下划线等)
 */
export class TextStyleCommand extends Command {
  constructor(options) {
    super({
      name: "修改文本样式",
      description: "修改文本图层的样式",
    });
    this.canvas = options.canvas;
    this.textObject = options.textObject;
    this.property = options.property; // 'fontWeight', 'fontStyle', 'underline', 'linethrough', 'overline'
    this.newValue = options.newValue;
    this.oldValue = this.textObject[this.property];
  }

  execute() {
    this.textObject.set(this.property, this.newValue);
    this.canvas.renderAll();
    return true;
  }

  undo() {
    this.textObject.set(this.property, this.oldValue);
    this.canvas.renderAll();
    return true;
  }
}

/**
 * 文本间距命令
 * 用于更改文本图层的字符间距或行高
 */
export class TextSpacingCommand extends Command {
  constructor(options) {
    super({
      name: "修改文本间距",
      description: "修改文本图层的字符间距或行高",
    });
    this.canvas = options.canvas;
    this.textObject = options.textObject;
    this.property = options.property; // 'charSpacing' 或 'lineHeight'
    this.newValue = options.newValue;
    this.oldValue = this.textObject[this.property];
  }

  execute() {
    this.textObject.set(this.property, this.newValue);
    this.canvas.renderAll();
    return true;
  }

  undo() {
    this.textObject.set(this.property, this.oldValue);
    this.canvas.renderAll();
    return true;
  }
}

/**
 * 文本背景颜色命令
 * 用于更改文本图层的背景颜色
 */
export class TextBackgroundCommand extends Command {
  constructor(options) {
    super({
      name: "修改文本背景",
      description: "修改文本图层的背景颜色",
    });
    this.canvas = options.canvas;
    this.textObject = options.textObject;
    this.newColor = options.newColor;
    this.oldColor = this.textObject.textBackgroundColor;
  }

  execute() {
    this.textObject.set("textBackgroundColor", this.newColor);
    this.canvas.renderAll();
    return true;
  }

  undo() {
    this.textObject.set("textBackgroundColor", this.oldColor);
    this.canvas.renderAll();
    return true;
  }
}

/**
 * 文本透明度命令
 * 用于更改文本图层的透明度
 */
export class TextOpacityCommand extends Command {
  constructor(options) {
    super({
      name: "修改文本透明度",
      description: "修改文本图层的透明度",
    });
    this.canvas = options.canvas;
    this.textObject = options.textObject;
    this.newOpacity = options.newOpacity;
    this.oldOpacity = this.textObject.opacity;
  }

  execute() {
    this.textObject.set("opacity", this.newOpacity);
    this.canvas.renderAll();
    return true;
  }

  undo() {
    this.textObject.set("opacity", this.oldOpacity);
    this.canvas.renderAll();
    return true;
  }
}

/**
 * 组合文本编辑命令
 * 用于一次性应用多个文本属性更改
 */
export class CompositeTextCommand extends Command {
  constructor(options) {
    super({
      name: "组合文本编辑",
      description: "组合多个文本编辑操作",
    });
    this.canvas = options.canvas;
    this.textObject = options.textObject;
    this.changes = options.changes; // {property: newValue} 形式的对象
    this.oldValues = {};

    // 保存所有属性的旧值
    for (const property in this.changes) {
      if (this.textObject[property] !== undefined) {
        this.oldValues[property] = this.textObject[property];
      }
    }
  }

  execute() {
    for (const property in this.changes) {
      this.textObject.set(property, this.changes[property]);
    }
    this.canvas.renderAll();
    return true;
  }

  undo() {
    for (const property in this.oldValues) {
      this.textObject.set(property, this.oldValues[property]);
    }
    this.canvas.renderAll();
    return true;
  }
}