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

import { findObjectById } from "../utils/helper";
import { Command } from "./Command";
import { fabric } from "fabric-with-all";

/**
 * 创建背景图层命令
 */
export class CreateBackgroundLayerCommand extends Command {
  constructor(options) {
    super({
      name: "创建背景图层",
      saveState: true,
    });
    this.canvas = options.canvas;
    this.layers = options.layers;
    this.backgroundLayer = options.backgroundLayer;
    this.canvasManager = options.canvasManager;
    this.historyManager = options.historyManager;

    this.beforeLayers = [...this.layers.value]; // 备份原图层列表
  }

  execute() {
    // 检查是否已经存在背景图层
    const existingBgLayer = this.layers.value.find(
      (layer) => layer.isBackground
    );
    if (existingBgLayer) {
      console.warn("已存在背景层，不重复创建");
      return existingBgLayer.id;
    }

    // 创建背景矩形对象
    const bgObject = this._createBackgroundObject();

    // 将背景对象添加到图层中
    this.backgroundLayer.fabricObject = bgObject.toObject([
      "id",
      "layerId",
      "type",
    ]);

    // 添加图层到最底部
    this.layers.value.push(this.backgroundLayer);

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

    // 渲染画布
    this.canvas.renderAll();

    return this.backgroundLayer.id;
  }

  undo() {
    // 从图层列表中删除背景图层
    const bgLayerIndex = this.layers.value.findIndex(
      (layer) => layer.isBackground
    );
    if (bgLayerIndex !== -1) {
      this.layers.value.splice(bgLayerIndex, 1);
    }

    // 从画布中移除背景对象
    if (this.backgroundLayer.fabricObject) {
      this.canvas.remove(this.backgroundLayer.fabricObject);
    }

    // 渲染画布
    this.canvas.renderAll();
  }

  /**
   * 创建背景矩形对象
   * @returns {Object} fabric.js 矩形对象
   * @private
   */
  _createBackgroundObject() {
    // 计算画布尺寸
    const canvasWidth = this.canvas.width;
    const canvasHeight = this.canvas.height;

    // 确保背景色为白色，如果没有设置或者是透明的话
    const backgroundColor =
      this.backgroundLayer.backgroundColor &&
      this.backgroundLayer.backgroundColor !== "transparent"
        ? this.backgroundLayer.backgroundColor
        : "#ffffff";

    const rect = new fabric.Rect({
      left: canvasWidth / 2,
      top: canvasHeight / 2,
      width: this.backgroundLayer.canvasWidth,
      height: this.backgroundLayer.canvasHeight,
      fill: backgroundColor,
      selectable: false,
      evented: false,
      hoverCursor: "default",
      id: `bg_object_${this.backgroundLayer.id}`,
      layerId: this.backgroundLayer.id,
      layerName: this.backgroundLayer.name,
      originX: "center",
      originY: "center",
      isBackground: true, // 标记为背景对象
    });

    return rect;
  }

  getInfo() {
    return {
      name: this.name,
      layerId: this.backgroundLayer.id,
      layerName: this.backgroundLayer.name,
      width: this.backgroundLayer.canvasWidth,
      height: this.backgroundLayer.canvasHeight,
      backgroundColor: this.backgroundLayer.backgroundColor,
    };
  }
}

/**
 * 更新背景属性命令（如背景颜色）
 */
export class UpdateBackgroundCommand extends Command {
  constructor(options) {
    super({
      name: "更新背景属性",
      saveState: true,
    });
    this.canvas = options.canvas;
    this.layers = options.layers;
    this.backgroundColorValue = options.backgroundColorValue; // 使用.value获取实际值
    this.backgroundColor = options.backgroundColor; //
    this.historyManager = options.historyManager;

    // 查找背景图层
    this.bgLayer = this.layers.value.find((layer) => layer.isBackground);
    this.oldBackgroundColor = this.bgLayer.backgroundColor;
  }

  execute() {
    if (!this.bgLayer) {
      console.error("未找到背景图层");
      return false;
    }

    // 更新背景图层属性
    this.bgLayer.backgroundColor = this.backgroundColor;

    // 更新背景对象属性
    if (this.bgLayer.fabricObject) {
      const { object } = findObjectById(
        this.canvas,
        this.bgLayer.fabricObject.id
      );
      object.set("fill", this.backgroundColor);
      this.canvas.renderAll();
    }
    this.backgroundColorValue.value = this.backgroundColor; // 设置背景颜色
    return true;
  }

  undo() {
    if (!this.bgLayer) {
      return false;
    }

    // 恢复背景图层属性
    this.bgLayer.backgroundColor = this.oldBackgroundColor;

    // 恢复背景对象属性
    if (this.bgLayer.fabricObject) {
      const { object } = findObjectById(
        this.canvas,
        this.bgLayer.fabricObject.id
      );
      object.set("fill", this.oldBackgroundColor);
      this.canvas.renderAll();
    }
    this.backgroundColorValue.value = this.oldBackgroundColor; // 恢复背景颜色
    return true;
  }

  getInfo() {
    return {
      name: this.name,
      layerId: this.bgLayer?.id,
      oldColor: this.oldBackgroundColor,
      newColor: this.backgroundColor,
    };
  }
}

/**
 * 调整画布和背景大小命令
 */
export class BackgroundSizeCommand extends Command {
  constructor(options) {
    super({
      name: "调整背景大小",
      saveState: true,
    });
    this.canvas = options.canvas;
    this.layers = options.layers;
    this.canvasManager = options.canvasManager;
    this.newWidth = options.newWidth;
    this.newHeight = options.newHeight;
    this.historyManager = options.historyManager;
    this.isRedGreenMode = options.isRedGreenMode;

    this.bgLayer = this.layers.value.find((layer) => layer.isBackground);

    // 记录原尺寸
    this.oldWidth = this.bgLayer.fabricObject.width;
    this.oldHeight = this.bgLayer.fabricObject.height;

    // 查找背景图层
    this.bgLayer = this.layers.value.find((layer) => layer.isBackground);
  }

  execute() {
    // 调整画布大小
    this.canvas.setWidth(this.newWidth);
    this.canvas.setHeight(this.newHeight);

    console.log(
      `调整画布大小：${this.oldWidth}x${this.oldHeight} -> ${this.newWidth}x${this.newHeight}`
    );

    // 如果使用 CanvasManager，通知它画布大小变化
    if (
      this.canvasManager &&
      typeof this.canvasManager.updateCanvasSize === "function"
    ) {
      this.canvasManager.updateCanvasSize(this.newWidth, this.newHeight);
    }

    // 调整背景对象大小
    if (this.bgLayer && this.bgLayer.fabricObject) {
      // 保持原有的背景颜色，如果没有设置则使用白色
      const currentFill =
        this.bgLayer.fabricObject.fill ||
        this.bgLayer.backgroundColor ||
        "#ffffff";

      this.bgLayer.fabricObject.set({
        width: this.newWidth,
        height: this.newHeight,
        fill: currentFill, // 保持原有颜色
      });

      // 更新图层记录的尺寸
      this.bgLayer.canvasWidth = this.newWidth;
      this.bgLayer.canvasHeight = this.newHeight;
    }

    // 渲染画布
    this.canvas.renderAll();

    return true;
  }

  undo() {
    // 恢复画布大小
    this.canvas.setWidth(this.oldWidth);
    this.canvas.setHeight(this.oldHeight);

    // 如果使用 CanvasManager，通知它画布大小恢复
    if (
      this.canvasManager &&
      typeof this.canvasManager.updateCanvasSize === "function"
    ) {
      this.canvasManager.updateCanvasSize(this.oldWidth, this.oldHeight);
    }

    // 恢复背景对象大小
    if (this.bgLayer && this.bgLayer.fabricObject) {
      this.bgLayer.fabricObject.set({
        width: this.oldWidth,
        height: this.oldHeight,
      });

      // 恢复图层记录的尺寸
      this.bgLayer.canvasWidth = this.oldWidth;
      this.bgLayer.canvasHeight = this.oldHeight;
    }

    // 渲染画布
    this.canvas.renderAll();

    return true;
  }

  getInfo() {
    return {
      name: this.name,
      oldWidth: this.oldWidth,
      oldHeight: this.oldHeight,
      newWidth: this.newWidth,
      newHeight: this.newHeight,
    };
  }
}

/**
 * 调整背景大小并等比缩放所有其他元素的命令
 */
export class BackgroundSizeWithScaleCommand extends Command {
  constructor(options) {
    super({
      name: "调整背景大小并缩放元素",
      saveState: true,
    });
    this.canvas = options.canvas;
    this.layers = options.layers;
    this.canvasManager = options.canvasManager;
    this.newWidth = options.newWidth;
    this.newHeight = options.newHeight;
    this.historyManager = options.historyManager;

    // 缩放策略：'uniform' | 'fill' | 'fit' | 'stretch'
    this.scaleStrategy = options.scaleStrategy || "uniform";

    // 记录原尺寸
    this.oldWidth = this.canvas.width;
    this.oldHeight = this.canvas.height;

    // 查找背景图层
    this.bgLayer = this.layers.value.find((layer) => layer.isBackground);

    // 计算缩放比例
    const scaleXRatio = this.newWidth / this.oldWidth;
    const scaleYRatio = this.newHeight / this.oldHeight;

    // 根据策略计算缩放比例和偏移
    this._calculateScaleAndOffset(scaleXRatio, scaleYRatio);

    // 存储所有非背景对象的原始状态
    this.objectStates = [];
    this._saveOriginalStates();
  }

  /**
   * 保存所有非背景对象的原始状态
   * @private
   */
  _saveOriginalStates() {
    this.canvas.getObjects().forEach((obj) => {
      if (!obj.isBackground) {
        // 检查对象是否已经有原始状态记录
        if (!obj._originalState) {
          // 第一次记录原始状态
          obj._originalState = {
            left: obj.left,
            top: obj.top,
            scaleX: obj.scaleX || 1,
            scaleY: obj.scaleY || 1,
            width: obj.width,
            height: obj.height,
            // 记录基准画布尺寸
            baseCanvasWidth: this.oldWidth,
            baseCanvasHeight: this.oldHeight,
          };
        }

        this.objectStates.push({
          obj: obj,
          // 使用原始状态而不是当前状态
          left: obj._originalState.left,
          top: obj._originalState.top,
          scaleX: obj._originalState.scaleX,
          scaleY: obj._originalState.scaleY,
          width: obj._originalState.width,
          height: obj._originalState.height,
        });
      }
    });
  }

  /**
   * 根据缩放策略计算缩放比例和偏移量
   * @param {number} scaleXRatio X轴缩放比例
   * @param {number} scaleYRatio Y轴缩放比例
   * @private
   */
  _calculateScaleAndOffset(scaleXRatio, scaleYRatio) {
    switch (this.scaleStrategy) {
      case "uniform":
        // 统一缩放：使用平均值，保持相对比例的同时允许适度的形变
        this.uniformScale = Math.sqrt(scaleXRatio * scaleYRatio);
        this.offsetX = (this.newWidth - this.oldWidth * this.uniformScale) / 2;
        this.offsetY =
          (this.newHeight - this.oldHeight * this.uniformScale) / 2;
        break;

      case "fit":
        // 适应模式：使用较小值，确保所有内容都在画布内，可能有留白
        this.uniformScale = Math.min(scaleXRatio, scaleYRatio);
        this.offsetX = (this.newWidth - this.oldWidth * this.uniformScale) / 2;
        this.offsetY =
          (this.newHeight - this.oldHeight * this.uniformScale) / 2;
        break;

      case "fill":
        // 填充模式：使用较大值，填满画布，可能有部分内容被裁切
        this.uniformScale = Math.max(scaleXRatio, scaleYRatio);
        this.offsetX = (this.newWidth - this.oldWidth * this.uniformScale) / 2;
        this.offsetY =
          (this.newHeight - this.oldHeight * this.uniformScale) / 2;
        break;

      case "stretch":
        // 拉伸模式：不保持宽高比，完全适应新尺寸
        this.scaleX = scaleXRatio;
        this.scaleY = scaleYRatio;
        this.offsetX = 0;
        this.offsetY = 0;
        break;

      default:
        // 默认使用uniform模式
        this.uniformScale = Math.sqrt(scaleXRatio * scaleYRatio);
        this.offsetX = (this.newWidth - this.oldWidth * this.uniformScale) / 2;
        this.offsetY =
          (this.newHeight - this.oldHeight * this.uniformScale) / 2;
    }
  }

  execute() {
    // 调整画布大小
    this.canvas.setWidth(this.newWidth);
    this.canvas.setHeight(this.newHeight);

    // 如果使用 CanvasManager，通知它画布大小变化
    if (
      this.canvasManager &&
      typeof this.canvasManager.updateCanvasSize === "function"
    ) {
      this.canvasManager.updateCanvasSize(this.newWidth, this.newHeight);
    }

    // 调整背景对象大小和位置
    if (this.bgLayer && this.bgLayer.fabricObject) {
      // 保持原有的背景颜色，如果没有设置则使用白色
      const currentFill =
        this.bgLayer.fabricObject.fill ||
        this.bgLayer.backgroundColor ||
        "#ffffff";

      this.bgLayer.fabricObject.set({
        width: this.newWidth,
        height: this.newHeight,
        left: this.newWidth / 2,
        top: this.newHeight / 2,
        fill: currentFill, // 保持原有颜色
      });

      // 更新图层记录的尺寸
      this.bgLayer.canvasWidth = this.newWidth;
      this.bgLayer.canvasHeight = this.newHeight;
    }

    // 计算基于原始画布的缩放比例
    const baseScaleX =
      this.newWidth /
        this.objectStates[0]?.obj._originalState?.baseCanvasWidth ||
      this.newWidth / this.oldWidth;
    const baseScaleY =
      this.newHeight /
        this.objectStates[0]?.obj._originalState?.baseCanvasHeight ||
      this.newHeight / this.oldHeight;

    // 根据策略缩放所有非背景对象
    this.objectStates.forEach((state) => {
      const obj = state.obj;

      if (this.scaleStrategy === "stretch") {
        // 拉伸模式：使用不同的X和Y缩放比例
        obj.set({
          left: state.left * baseScaleX,
          top: state.top * baseScaleY,
          scaleX: state.scaleX * baseScaleX,
          scaleY: state.scaleY * baseScaleY,
        });
      } else {
        // 其他模式：计算基于原始状态的统一缩放比例
        const baseUniformScale = Math.sqrt(baseScaleX * baseScaleY);
        const baseOffsetX =
          (this.newWidth -
            (obj._originalState?.baseCanvasWidth || this.oldWidth) *
              baseUniformScale) /
          2;
        const baseOffsetY =
          (this.newHeight -
            (obj._originalState?.baseCanvasHeight || this.oldHeight) *
              baseUniformScale) /
          2;

        obj.set({
          left: state.left * baseUniformScale + baseOffsetX,
          top: state.top * baseUniformScale + baseOffsetY,
          scaleX: state.scaleX * baseUniformScale,
          scaleY: state.scaleY * baseUniformScale,
        });
      }

      obj.setCoords();
    });

    // 渲染画布
    this.canvas.renderAll();

    return true;
  }

  undo() {
    // 恢复画布大小
    this.canvas.setWidth(this.oldWidth);
    this.canvas.setHeight(this.oldHeight);

    // 如果使用 CanvasManager，通知它画布大小恢复
    if (
      this.canvasManager &&
      typeof this.canvasManager.updateCanvasSize === "function"
    ) {
      this.canvasManager.updateCanvasSize(this.oldWidth, this.oldHeight);
    }

    // 恢复背景对象大小和位置
    if (this.bgLayer && this.bgLayer.fabricObject) {
      this.bgLayer.fabricObject.set({
        width: this.oldWidth,
        height: this.oldHeight,
        left: this.oldWidth / 2,
        top: this.oldHeight / 2,
      });

      // 恢复图层记录的尺寸
      this.bgLayer.canvasWidth = this.oldWidth;
      this.bgLayer.canvasHeight = this.oldHeight;
    }

    // 恢复所有非背景对象的当前状态（而不是原始状态，因为可能有其他操作）
    this.objectStates.forEach((state) => {
      // 计算恢复到之前画布尺寸时的状态
      const obj = state.obj;
      const originalState = obj._originalState;

      if (originalState) {
        const baseScaleX = this.oldWidth / originalState.baseCanvasWidth;
        const baseScaleY = this.oldHeight / originalState.baseCanvasHeight;
        const baseUniformScale = Math.sqrt(baseScaleX * baseScaleY);
        const baseOffsetX =
          (this.oldWidth - originalState.baseCanvasWidth * baseUniformScale) /
          2;
        const baseOffsetY =
          (this.oldHeight - originalState.baseCanvasHeight * baseUniformScale) /
          2;

        obj.set({
          left: originalState.left * baseUniformScale + baseOffsetX,
          top: originalState.top * baseUniformScale + baseOffsetY,
          scaleX: originalState.scaleX * baseUniformScale,
          scaleY: originalState.scaleY * baseUniformScale,
        });
      } else {
        // 降级到原来的逻辑
        obj.set({
          left: state.left,
          top: state.top,
          scaleX: state.scaleX,
          scaleY: state.scaleY,
        });
      }

      obj.setCoords();
    });

    // 渲染画布
    this.canvas.renderAll();

    return true;
  }

  getInfo() {
    const info = {
      name: this.name,
      oldWidth: this.oldWidth,
      oldHeight: this.oldHeight,
      newWidth: this.newWidth,
      newHeight: this.newHeight,
      scaleStrategy: this.scaleStrategy,
      objectCount: this.objectStates.length,
    };

    if (this.scaleStrategy === "stretch") {
      info.scaleX = this.scaleX;
      info.scaleY = this.scaleY;
    } else {
      info.uniformScale = this.uniformScale;
      info.offsetX = this.offsetX;
      info.offsetY = this.offsetY;
    }

    return info;
  }
}