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

import { generateId, optimizeCanvasRendering, getLayerObjectsZIndex } from "../utils/helper";
import { createLayer, LayerType, OperationType } from "../utils/layerHelper";
import { Command } from "./Command";
import i18n from "@/lang/index.ts";
const { t } = i18n.global;

/**
 * 文本内容命令
 * 用于更改文本图层的文本内容
 */
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;
  }
}

/**
 * 创建文本命令
 * 用于创建文本对象和图层的组合操作
 */
export class CreateTextCommand extends Command {
  constructor(options) {
    super({
      name: "创建文本",
    });
    this.canvas = options.canvas;
    this.layerManager = options.layerManager;
    this.x = options.x;
    this.y = options.y;
    this.textOptions = options.textOptions || {};
	this.options = options;
    // 生成唯一ID
    this.textId = options?.textId || generateId("text_");
    this.layerId = options?.layerId || generateId("text_layer_");

    // 生成的对象和图层信息
    this.textObject = null;
    this.oldActiveLayerId = null;

    // 默认文本属性
    this.defaultOptions = {
      text: options.text || t('Canvas.DoubleClickText'),
      fontFamily: "Arial",
      fontSize: 24,
      fontWeight: "normal",
      fontStyle: "normal",
      textAlign: "left",
      fill: "#000000",
      opacity: 1,
      underline: false,
      overline: false,
      linethrough: false,
      textBackgroundColor: "transparent",
      lineHeight: 1.16,
      charSpacing: 0,
    };
  }

  async execute() {
    if (!this.canvas || !this.layerManager) {
      console.error("Canvas或LayerManager不存在");
      return null;
    }
    // 保存当前活动图层
    this.oldActiveLayerId = this.layerManager.activeLayerId?.value;

    // 合并默认选项和用户选项
    const finalOptions = {
      ...this.defaultOptions,
      ...this.textOptions,
      left: this.x,
      top: this.y,
    };

    try {
      await optimizeCanvasRendering(this.canvas, async () => {
        // 创建文本对象
        this.textObject = new fabric.IText(finalOptions.text, {
          ...finalOptions,
          originX: "center",
          originY: "center",
        });

        // 创建文本图层 取15
        const layerName = this.options.text?.substring(0, 25) || t('Canvas.TextLayer');
        const layer = createLayer({
          id: this.layerId,
          name: layerName,
          type: LayerType.TEXT,
        });

        // 设置对象的图层关联
        this.textObject.set({
          id: this.textId,
          layerId: this.layerId,
          layerName: layerName,
        });

        // 智能插入图层到合适位置
        this._insertLayerAtCorrectPosition(layer);

        // 添加到画布
        this.canvas.add(this.textObject);

        // 取消其他对象的选中状态
        this.canvas.discardActiveObject();

        // 设置新创建的文本对象为活动对象
        this.canvas.setActiveObject(this.textObject);

        // 更新图层的对象列表
        if (layer) {
          layer.fabricObjects = layer.fabricObjects || [];
          layer.fabricObjects.push(this.textObject.toObject(["id", "layerId", "layerName"]));
        }

        // 现在可以安全地设置为活动图层
        this.layerManager.setActiveLayer(this.layerId);

		// 重新排序图层对象
		await this.layerManager?.layerSort?.rearrangeObjects();

        // 更新对象交互性
        await this.layerManager?.updateLayersObjectsInteractivity?.(false);

        // 切换到选择工具
        this.layerManager?.toolManager?.setTool?.(OperationType.SELECT);
      });

      console.log(`✅ 文本对象已创建: "${finalOptions.text}"，位置: (${this.x}, ${this.y})`);
      return this.textObject;
    } catch (error) {
      console.error("创建文本对象失败:", error);
      // 如果创建失败，需要清理已创建的资源
      await this.undo();
      throw error;
    }
  }

  /**
   * 智能插入图层到正确位置
   * 根据当前激活图层位置确定新图层插入位置
   * @param {Object} newLayer 要插入的新图层
   * @private
   */
  _insertLayerAtCorrectPosition(newLayer) {
    const layers = this.layerManager.layers.value;
    const currentActiveLayerId = this.layerManager.activeLayerId?.value;

    // 如果没有当前激活图层，插入到顶部（索引0）
    if (!currentActiveLayerId) {
      layers.splice(0, 0, newLayer);
      return;
    }

    // 查找当前激活图层的位置
    const {
      layer: activeLayer,
      parent: parentLayer,
      index: activeIndex,
    } = this._findLayerPosition(currentActiveLayerId);

    if (!activeLayer) {
      // 没找到激活图层，插入到顶部
      layers.splice(0, 0, newLayer);
      return;
    }

    // 确定插入位置
    let insertIndex = 0;

    if (parentLayer) {
      // 当前激活图层是子图层
      // 在同一父图层内，插入到激活子图层之上
      insertIndex = Math.max(0, activeIndex);
      parentLayer.children = parentLayer.children || [];
      parentLayer.children.splice(insertIndex, 0, newLayer);

      console.log(`新图层已插入到子图层位置: ${insertIndex} (父图层: ${parentLayer.name})`);
    } else {
      // 当前激活图层是一级图层
      // 在一级图层中，插入到激活图层之上
      const activeLayerIndex = layers.findIndex((layer) => layer.id === currentActiveLayerId);
      insertIndex = Math.max(0, activeLayerIndex);
      layers.splice(insertIndex, 0, newLayer);

      console.log(`新图层已插入到一级图层位置: ${insertIndex}`);
    }
  }

  /**
   * 查找图层位置信息
   * @param {String} layerId 图层ID
   * @returns {Object} 包含图层、父图层和索引的对象
   * @private
   */
  _findLayerPosition(layerId) {
    const layers = this.layerManager.layers.value;

    // 先在一级图层中查找
    for (let i = 0; i < layers.length; i++) {
      const layer = layers[i];

      if (layer.id === layerId) {
        return {
          layer: layer,
          parent: null,
          index: i,
        };
      }

      // 在子图层中查找
      if (layer.children && Array.isArray(layer.children)) {
        for (let j = 0; j < layer.children.length; j++) {
          const childLayer = layer.children[j];
          if (childLayer.id === layerId) {
            return {
              layer: childLayer,
              parent: layer,
              index: j,
            };
          }
        }
      }
    }

    return {
      layer: null,
      parent: null,
      index: -1,
    };
  }

  getInfo() {
    return {
      name: this.name,
      textId: this.textObject?.id,
      layerId: this.layerId,
      text: this.textOptions.text || this.defaultOptions.text,
      position: { x: this.x, y: this.y },
    };
  }

  async undo() {
    try {
      // 从画布移除文本对象
      if (this.textObject && this.canvas) {
        this.canvas.remove(this.textObject);
      }
	  const layerObjects = getLayerObjectsZIndex(this.canvas, this.layerId);
	  layerObjects.forEach((obj) => {
        if (obj.id === this.textObject?.id) {
          this.canvas.remove(obj.object);
        }
      });

      // 智能移除创建的图层
      if (this.layerId && this.layerManager) {
        this._removeLayerFromCorrectPosition();
      }

      // 恢复原活动图层
      if (this.oldActiveLayerId && this.layerManager) {
        // 检查原活动图层是否还存在
        const originalLayer = this.layerManager.getLayerById(this.oldActiveLayerId);
        if (originalLayer) {
          this.layerManager.setActiveLayer(this.oldActiveLayerId);
        } else {
          // 如果原图层不存在，设置为第一个可用的普通图层
          const availableLayers = this.layerManager.layers.value.filter(
            (layer) => !layer.isBackground && !layer.isFixed && !layer.locked
          );
          if (availableLayers.length > 0) {
            this.layerManager.setActiveLayer(availableLayers[0].id);
          }
        }
      }

      // 更新对象交互性
      await this.layerManager.updateLayersObjectsInteractivity();

      // 重新渲染画布
      if (this.canvas) {
        this.canvas.renderAll();
      }

      console.log(`↩️ 文本创建操作已撤销`);
      return true;
    } catch (error) {
      console.error("撤销文本创建操作失败:", error);
      return false;
    }
  }

  /**
   * 智能移除图层
   * 根据图层位置（一级图层或子图层）进行相应的移除操作
   * @private
   */
  _removeLayerFromCorrectPosition() {
    const layers = this.layerManager.layers.value;

    // 查找图层位置信息
    const positionInfo = this._findLayerPosition(this.layerId);

    if (!positionInfo.layer) {
      console.warn(`要移除的图层不存在: ${this.layerId}`);
      return;
    }

    if (positionInfo.parent) {
      // 从子图层中移除
      if (positionInfo.parent.children && positionInfo.index >= 0) {
        positionInfo.parent.children.splice(positionInfo.index, 1);
        console.log(`已从子图层移除: ${this.layerId} (父图层: ${positionInfo.parent.name})`);
      }
    } else {
      // 从一级图层中移除
      if (positionInfo.index >= 0) {
        layers.splice(positionInfo.index, 1);
        console.log(`已从一级图层移除: ${this.layerId}`);
      }
    }
  }
}