refactor(Stage): 优化图片插入和缩放计算逻辑

将单张图片插入逻辑重构为支持批量插入，并改进缩放计算以适应多元素场景

Author: huanghaiyang

src/modules/stage/StageEvent.ts

@@ -110,25 +110,13 @@ export default class StageEvent extends EventEmitter implements IStageEvent {
    *
    * @param imageDataList
    */
-  private _createImages(imageDataList: ImageData[]): void {
+  private async _createImages(imageDataList: ImageData[]): Promise<void>  {
     if (imageDataList && imageDataList.length) {
-      let taskQueue = new TaskQueue();
-      imageDataList.forEach((imageData, index) => {
-        taskQueue.add(
-          new QueueTask(async () => {
-            await new Promise(resolve => {
-              this.emit("pasteImage", imageData, async () => {
-                await TimeUtils.wait(100);
-                resolve(true);
-              });
-            });
-            if (index === imageDataList.length - 1) {
-              await taskQueue.destroy();
-              taskQueue = null;
-            }
-          }),
-        );
-      });
+      return new Promise((resolve) => {
+        this.emit("pasteImages", imageDataList, async () => {
+          resolve();
+        });
+      })
     }
   }
 
@@ -317,7 +305,7 @@ export default class StageEvent extends EventEmitter implements IStageEvent {
   async onImagesUpload(images: File[]): Promise<void> {
     if (images.length) {
       const imageDataList = await FileUtils.getImageDataFromFiles(images);
-      this._createImages(imageDataList);
+      await this._createImages(imageDataList);
     }
   }
 }

src/modules/stage/StageShield.ts

@@ -1498,7 +1498,7 @@ export default class StageShield extends DrawerBase implements IStageShield, ISt
     this.event.on("scaleIncrease", this._handleScaleIncrease.bind(this));
     this.event.on("scaleAutoFit", this._handleScaleAutoFit.bind(this));
     this.event.on("scale100", this._handleScale100.bind(this));
-    this.event.on("pasteImage", this._handleImagePasted.bind(this));
+    this.event.on("pasteImages", this._handleImagesPasted.bind(this));
     this.event.on("deleteSelects", this._handleSelectsDelete.bind(this));
     this.event.on("selectAll", this.selectAll.bind(this));
     this.event.on("selectCopy", this._handleSelectCopy.bind(this));
@@ -2642,6 +2642,17 @@ export default class StageShield extends DrawerBase implements IStageShield, ISt
    */
   calcScaleAutoFitValueByBox(box: IPoint[]): number {
     const { width, height } = CommonUtils.calcRectangleSize(box);
+    return this.calcScaleAutoFitValueBySize(width, height);
+  }
+
+  /**
+   * 给定尺寸计算自动适应缩放值
+   *
+   * @param width
+   * @param height
+   * @returns
+   */
+  calcScaleAutoFitValueBySize(width: number, height: number): number {
     let scale = MathUtils.precise(CommonUtils.calcScale(this.stageRect, { width, height }, AutoFitPadding * this.stageScale), 2);
     scale = clamp(scale, 0.02, 1);
     return scale;
@@ -2653,18 +2664,18 @@ export default class StageShield extends DrawerBase implements IStageShield, ISt
    * @returns
    */
   calcScaleAutoFitValue(): number {
-    const elementsBox = CommonUtils.getBoxByPoints(this.store.visibleElements.map(element => element.maxOutlineBoxCoords).flat());
-    return this.calcScaleAutoFitValueByBox(elementsBox);
+    return this.calcElementsAutoFitValue(this.store.visibleElements);
   }
 
   /**
-   * 计算某个组件的自动适应缩放值
+   * 计算给定组件的自动适应缩放值
    *
-   * @param element
-   * @returns
+   * @param elements 
+   * @returns 
    */
-  calcElementAutoFitValue(element: IElement): number {
-    return this.calcScaleAutoFitValueByBox(element.maxOutlineBoxCoords);
+  calcElementsAutoFitValue(elements: IElement[]): number {
+    const elementsBox = CommonUtils.getBoxByPoints(elements.map(element => element.maxOutlineBoxCoords).flat());
+    return this.calcScaleAutoFitValueByBox(elementsBox);
   }
 
   /**
@@ -2739,14 +2750,14 @@ export default class StageShield extends DrawerBase implements IStageShield, ISt
    * @param imageData
    * @param callback
    */
-  async _handleImagePasted(imageData: ImageData, callback?: Function): Promise<void> {
+  async _handleImagesPasted(imageDatas: ImageData[], callback?: Function): Promise<void> {
     this._clearSelects();
-    const element = await this.store.insertImageElement(imageData);
-    const nextScale = this.calcElementAutoFitValue(element);
+    const elements = await this.store.insertImageElements(imageDatas);
+    const nextScale = this.calcElementsAutoFitValue(elements);
     if (this.stageScale > nextScale) {
       await this.setScale(nextScale);
     }
-    await this._tryAddAddedCommand([element]);
+    await this._tryAddAddedCommand(elements);
     callback && callback();
   }
 

src/modules/stage/StageStore.ts

@@ -32,6 +32,8 @@ import { observable, reaction } from "mobx";
 import TextElementUtils from "@/modules/elements/utils/TextElementUtils";
 import { ElementActionTypes, ElementsActionParam, ElementActionCallback } from "@/types/ICommand";
 import GlobalConfig from "@/config";
+import { TaskQueue } from "@/modules/render/RenderQueue";
+import { QueueTask } from "../render/RenderTask";
 
 /**
  * 调整组件层级
@@ -2240,21 +2242,49 @@ export default class StageStore implements IStageStore {
   }
 
   /**
-   * 创建并插入图片组件
-   *
-   * @param image
+   * 插入图片
+   * 
+   * @param image 
+   * @returns 
    */
-  async insertImageElement(image: HTMLImageElement | ImageData): Promise<IElement> {
+  async _insertImage(image: HTMLImageElement | ImageData): Promise<IElement> {
     let colorSpace;
     if (image instanceof ImageData) {
       colorSpace = image.colorSpace;
       image = ImageUtils.createImageFromImageData(image);
       await ImageUtils.waitForImageLoad(image);
     }
-    const model = await this.createImageElementModel(image, { colorSpace });
+    const model = await this.createImageElementModel(image, { colorSpace: colorSpace });
     return this.insertAfterElementByModel(model);
   }
 
+  /**
+   * 创建并插入图片组件
+   *
+   * @param images
+   * @returns IElement[] 返回插入的组件列表
+   */
+  async insertImageElements(images: (HTMLImageElement[] | ImageData[])): Promise<IElement[]> {
+    const result: IElement[] = [];
+    await new Promise((resolve) => {
+      let taskQueue = new TaskQueue();
+      images.forEach((imageData, index) => {
+        taskQueue.add(
+          new QueueTask(async () => {
+            const element = await this._insertImage(imageData);
+            result.push(element);
+            if (index === images.length - 1) {
+              resolve(null);
+              await taskQueue.destroy();
+              taskQueue = null;
+            }
+          }),
+        );
+      });
+    });
+    return result;
+  }
+
   /**
    * 创建并插入文本组件
    *

src/types/IStageShield.ts

@@ -89,7 +89,7 @@ export default interface IStageShield extends IStageDrawer, IStageSetter {
   // 计算自动缩放值
   calcScaleAutoFitValue(): number;
   // 计算组件自动缩放值
-  calcElementAutoFitValue(element: IElement): number;
+  calcElementsAutoFitValue(elements: IElement[]): number;
   // 设置缩放
   setScale(value: number): void;
   // 设置缩放100%

src/types/IStageStore.ts

@@ -152,7 +152,7 @@ export default interface IStageStore extends IStageSetter {
   // 创建图片组件的数据模型
   createImageElementModel(image: HTMLImageElement | ImageData, options: Partial<ImageData>): Promise<ElementObject>;
   // 插入图片组件
-  insertImageElement(image: HTMLImageElement | ImageData): Promise<IElement>;
+  insertImageElements(images: (HTMLImageElement[] | ImageData[])): Promise<IElement[]>;
   // 插入文本组件
   insertTextElement(text: string, fontStyle: FontStyle, coords?: IPoint[]): IElement;
   // 删除选中组件