aida_front/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyRealTimeUpdater.js

/**
 * 液化实时更新器
 * 负责高效地更新液化效果到画布上，避免频繁创建fabric对象导致的性能问题
 */
export class LiquifyRealTimeUpdater {
  constructor(canvas, options = {}) {
    this.canvas = canvas;
    this.targetObject = null;
    this.isUpdating = false;
    this.updateQueue = [];
    this.lastUpdateTime = 0;
    this.currImage = options.currImage || { value: null };

    // 配置选项
    this.config = {
      throttleTime: options.throttleTime || 16, // 60fps
      maxQueueSize: options.maxQueueSize || 5,
      useDirectUpdate: options.useDirectUpdate !== false, // 默认启用直接更新
      imageQuality: options.imageQuality || 1.0, // 图像质量 (0.1-1.0)
      skipRenderDuringDrag: options.skipRenderDuringDrag || false, // 拖拽时跳过渲染
    };

    // 临时canvas用于快速渲染
    this.tempCanvas = document.createElement("canvas");
    this.tempCtx = this.tempCanvas.getContext("2d");

    // 高质量canvas用于最终输出
    this.highQualityCanvas = document.createElement("canvas");
    this.highQualityCtx = this.highQualityCanvas.getContext("2d");

    // 当前缓存的图像数据
    this.cachedDataURL = null;
    this.pendingImageData = null;
    this.renderingScheduled = false;

    // 优化Canvas画布渲染设置
    this.canvas.renderOnAddRemove = false; // 禁用自动渲染
    this.canvas.skipOffscreen = true; // 跳过离屏元素渲染
  }

  /**
   * 设置目标对象
   * @param {Object} fabricObject fabric图像对象
   */
  setTargetObject(fabricObject) {
    this.targetObject = fabricObject;
    if (fabricObject && fabricObject._element) {
      // 设置临时canvas尺寸
      this.tempCanvas.width = fabricObject.width;
      this.tempCanvas.height = fabricObject.height;

      // 设置高质量canvas尺寸
      this.highQualityCanvas.width = fabricObject.width;
      this.highQualityCanvas.height = fabricObject.height;

      // 配置高质量渲染上下文
      this.highQualityCtx.imageSmoothingEnabled = true;
      this.highQualityCtx.imageSmoothingQuality = "high";

      // 配置临时canvas上下文（快速渲染）
      this.tempCtx.imageSmoothingEnabled = false; // 快速模式关闭平滑
    }
  }

  /**
   * 实时更新图像数据到画布
   * @param {ImageData} imageData 新的图像数据
   * @param {Boolean} isDrawing 是否正在绘制（拖拽过程中）
   * @returns {Promise} 更新完成的Promise
   */
  async updateImage(imageData, isDrawing = false) {
    if (!this.targetObject || !imageData) {
      return;
    }

    // 节流控制
    const now = Date.now();
    if (now - this.lastUpdateTime < this.config.throttleTime && isDrawing) {
      // 在绘制过程中进行节流，缓存最新的图像数据
      this.pendingImageData = imageData;
      return;
    }

    this.lastUpdateTime = now;

    if (isDrawing && this.config.useDirectUpdate) {
      // 拖拽过程中使用快速更新（降低质量以提高性能）
      this._fastUpdate(imageData);
    } else {
      // 拖拽结束后使用完整更新（最高质量）
      await this._fullUpdate(imageData);
    }
  }

  /**
   * 智能图像质量更新
   * 根据图像尺寸和设备性能动态调整质量
   * @param {ImageData} imageData 图像数据
   * @param {Boolean} isDrawing 是否正在绘制
   * @private
   */
  _getOptimalQuality(imageData, isDrawing) {
    const pixelCount = imageData.width * imageData.height;

    if (isDrawing) {
      // 拖拽时根据图像大小调整质量
      if (pixelCount > 1000000) {
        // 大于1M像素
        return 0.7;
      } else if (pixelCount > 500000) {
        // 大于500K像素
        return 0.8;
      } else {
        return 0.9;
      }
    } else {
      // 拖拽结束时始终使用最高质量
      return 1.0;
    }
  }

  /**
   * 快速更新 - 直接修改现有对象的图像源
   * @param {ImageData} imageData 图像数据
   * @private
   */
  _fastUpdate(imageData) {
    if (!this.targetObject || !this.targetObject._element) {
      return;
    }

    try {
      // 将ImageData渲染到临时canvas（快速模式）
      this.tempCtx.putImageData(imageData, 0, 0);

      // 获取智能质量设置
      const quality = this._getOptimalQuality(imageData, true);

      // 直接更新fabric对象的图像源（使用PNG格式保持质量）
      const targetElement = this.targetObject._element;

      // 方案1: 直接设置src属性（最高性能）
      const dataURL = this.tempCanvas.toDataURL("image/png", quality);

      if (targetElement.src !== dataURL) {
        targetElement.src = dataURL;

        // 关键优化：直接设置fabric对象为脏状态，但不立即渲染
        // this.targetObject.dirty = false; // 标记为不需要立即渲染
        // this.canvas.renderOnAddRemove = true; // 恢复自动渲染
        // this.renderingScheduled = false; // 重置渲染调度状态
        this?.scheduleRender?.(); // 调度一次渲染
        // 使用requestAnimationFrame进行批量渲染优化
        // if (!this.renderingScheduled && !this.config.skipRenderDuringDrag) {
        //   this.renderingScheduled = true;
        //   requestIdleCallback(() => {
        //     this.canvas.renderAll();
        //     this.renderingScheduled = false;
        //   });
        // }
      } else {
        console.warn("=================快速更新液化效果时，图像数据未变化，跳过更新");
      }
    } catch (error) {
      console.error("快速更新液化效果失败:", error);
    }
  }

  getImageData(imageData) {
    // 使用高质量canvas进行最终渲染
    this.highQualityCtx.putImageData(imageData, 0, 0);

    // 生成高质量DataURL（PNG格式，最大质量）
    const dataURL = this.highQualityCanvas.toDataURL("image/png", 1.0);
    return dataURL;
  }

  /**
   * 完整更新 - 创建新的fabric对象
   * @param {ImageData} imageData 图像数据
   * @private
   */
  async _fullUpdate(imageData) {
    return new Promise((resolve, reject) => {
      // 临时禁用画布自动渲染
      const oldRenderOnAddRemove = this.canvas.renderOnAddRemove;
      try {
        // 使用高质量canvas进行最终渲染
        this.highQualityCtx.putImageData(imageData, 0, 0);

        // 生成高质量DataURL（PNG格式，最大质量）
        const dataURL = this.highQualityCanvas.toDataURL("image/png", 1.0);

        // 如果DataURL没有变化，跳过更新
        if (this.cachedDataURL === dataURL) {
          resolve();
          return;
        }

        this.cachedDataURL = dataURL;

        // 创建新的fabric图像对象，保持最高质量
        fabric.Image.fromURL(
          dataURL,
          (newImg) => {
            try {
              if (!this.targetObject) {
                console.warn("目标对象为空，跳过更新");
                resolve();
                return;
              }

              // 保存原对象信息用于智能查找
              const originalObjId = this.targetObject.id;
              const originalObjLayerId = this.targetObject.layerId;

              // 保留原对象的所有变换属性
              const originalObj = this.targetObject;
              newImg.set({
                left: originalObj.left,
                top: originalObj.top,
                scaleX: originalObj.scaleX,
                scaleY: originalObj.scaleY,
                angle: originalObj.angle,
                flipX: originalObj.flipX,
                flipY: originalObj.flipY,
                opacity: originalObj.opacity,
                originX: originalObj.originX,
                originY: originalObj.originY,
                id: originalObj.id,
                name: originalObj.name,
                layerId: originalObj.layerId,
                selected: false,
                evented: originalObj.evented,
              });
              this.canvas.renderOnAddRemove = false;

              // 智能查找和替换canvas上的对象
              const allObjects = this.canvas.getObjects();
              let targetIndex = allObjects.indexOf(originalObj);

              // 如果直接查找失败，尝试通过ID查找
              if (targetIndex === -1 && originalObjId) {
                targetIndex = allObjects.findIndex((obj) => obj.id === originalObjId);
                if (targetIndex !== -1) {
                  console.log(`通过ID找到目标对象: ${originalObjId}`);
                  // 更新目标对象引用
                  this.targetObject = allObjects[targetIndex];
                }
              }

              // 如果通过ID查找仍然失败，尝试通过图层ID查找
              if (targetIndex === -1 && originalObjLayerId) {
                targetIndex = allObjects.findIndex((obj) => obj.layerId === originalObjLayerId);
                if (targetIndex !== -1) {
                  console.log(`通过图层ID找到目标对象: ${originalObjLayerId}`);
                  // 更新目标对象引用
                  this.targetObject = allObjects[targetIndex];
                }
              }

              if (targetIndex !== -1) {
                // 找到目标对象，执行替换
                this.canvas.remove(this.targetObject);
                this.canvas.insertAt(newImg, targetIndex);

                // 恢复自动渲染设置
                this.canvas.renderOnAddRemove = oldRenderOnAddRemove;

                // 更新目标对象引用
                this.targetObject = newImg;

                // 一次性重新渲染画布
                this.canvas.renderAll();

                console.log(`✅ 液化对象更新成功，位置: ${targetIndex}`);
                resolve(newImg);
              } else {
                // 如果在画布中找不到对象，可能对象已被移除或引用已更新
                console.warn("在画布中找不到目标对象，可能已被其他操作移除或替换");

                // 恢复自动渲染设置
                this.canvas.renderOnAddRemove = oldRenderOnAddRemove;

                // 尝试添加新对象到画布末尾
                this.canvas.add(newImg);
                this.targetObject = newImg;
                this.canvas.renderAll();

                console.log("🔄 已将新对象添加到画布末尾");
                resolve(newImg);
              }
            } catch (error) {
              // 恢复自动渲染设置
              this.canvas.renderOnAddRemove = oldRenderOnAddRemove;
              console.error("更新fabric对象时出错:", error);
              reject(error);
            }
          },
          { crossOrigin: "anonymous" }
        ); // 确保跨域支持
      } catch (error) {
        console.error("完整更新过程出错:", error);
        reject(error);
      }
    });
  }

  /**
   * 处理待处理的图像数据
   * 在拖拽结束后调用，处理可能积压的更新
   */
  async processPendingUpdates() {
    if (this.pendingImageData && !this.isUpdating) {
      this.isUpdating = true;
      try {
        await this._fullUpdate(this.pendingImageData);
        this.pendingImageData = null;
      } catch (error) {
        console.error("处理待处理更新失败:", error);
      } finally {
        this.isUpdating = false;
      }
    }
  }

  /**
   * 获取当前目标对象
   * @returns {Object} 当前的fabric对象
   */
  getTargetObject() {
    return this.targetObject;
  }

  /**
   * 强制进行完整更新
   * @param {ImageData} imageData 图像数据
   */
  async forceFullUpdate(imageData) {
    return this._fullUpdate(imageData);
  }

  /**
   * 启用拖拽模式 - 暂停渲染以提高性能
   */
  enableDragMode() {
    this.config.skipRenderDuringDrag = true;
    this.canvas.renderOnAddRemove = false;
    console.log("🚀 启用拖拽优化模式");
  }

  /**
   * 禁用拖拽模式 - 恢复正常渲染
   */
  disableDragMode() {
    this.config.skipRenderDuringDrag = false;
    this.canvas.renderOnAddRemove = true;

    // 执行一次完整渲染
    this.canvas.renderAll();
    console.log("✅ 恢复正常渲染模式");
  }

  /**
   * 设置图像质量
   * @param {Number} quality 质量值 (0.1-1.0)
   */
  setImageQuality(quality) {
    this.config.imageQuality = Math.max(0.1, Math.min(1.0, quality));
  }

  /**
   * 优化的批量渲染方法
   */
  scheduleRender() {
    if (!this.renderingScheduled) {
      this.renderingScheduled = true;
      requestAnimationFrame(() => {
        this.canvas.renderAll();
        this.renderingScheduled = false;
      });
    }
  }

  // /**
  //  * 清理资源
  //  */
  // dispose() {
  //   this.targetObject = null;
  //   this.cachedDataURL = null;
  //   this.pendingImageData = null;
  //   this.updateQueue.length = 0;

  //   // 清理临时canvas
  //   if (this.tempCanvas) {
  //     this.tempCanvas.width = 0;
  //     this.tempCanvas.height = 0;
  //     this.tempCanvas = null;
  //     this.tempCtx = null;
  //   }
  // }

  /**
   * 清理资源
   */
  dispose() {
    // 恢复canvas设置
    this.canvas.renderOnAddRemove = true;

    // 清理缓存
    this.cachedDataURL = null;
    this.pendingImageData = null;

    // 清理canvas
    if (this.tempCanvas) {
      this.tempCanvas.width = 0;
      this.tempCanvas.height = 0;
    }

    if (this.highQualityCanvas) {
      this.highQualityCanvas.width = 0;
      this.highQualityCanvas.height = 0;
    }

    console.log("🧹 液化实时更新器资源已清理");
  }
}