fix: 修复背景图节点的渲染顺序

Author: Littlefean

app/src/core/render/canvas2d/entityRenderer/EntityRenderer.tsx

@@ -81,27 +81,40 @@ export class EntityRenderer {
     }
   }
 
+  /**
+   * 检查实体是否应该被跳过渲染
+   */
+  private shouldSkipEntity(entity: Entity, viewRectangle: Rectangle): boolean {
+    return (
+      entity instanceof Section ||
+      entity instanceof PenStroke ||
+      this.project.renderer.isOverView(viewRectangle, entity)
+    );
+  }
+
+  private isBackgroundImageNode(entity: Entity): boolean {
+    return entity instanceof ImageNode && entity.isBackground;
+  }
+
   /**
    * 统一渲染所有实体
-   * 返回实际渲染的实体数量
    */
   renderAllEntities(viewRectangle: Rectangle) {
-    let renderedNodes = 0;
+    const entities = this.project.stageManager.getEntities();
 
-    // 2 遍历所有非section实体 / 非涂鸦实体
-    for (const entity of this.project.stageManager.getEntities()) {
-      if (entity instanceof Section) {
-        continue;
+    // 先渲染所有背景图片
+    entities.forEach((entity) => {
+      if (this.isBackgroundImageNode(entity) && !this.project.renderer.isOverView(viewRectangle, entity)) {
+        this.renderEntity(entity);
       }
-      if (entity instanceof PenStroke) {
-        continue;
-      }
-      // 视线之外不画
-      if (this.project.renderer.isOverView(viewRectangle, entity)) {
+    });
+
+    // 再渲染所有非背景图片的实体
+    for (const entity of entities) {
+      if (this.isBackgroundImageNode(entity) || this.shouldSkipEntity(entity, viewRectangle)) {
         continue;
       }
       this.renderEntity(entity);
-      renderedNodes++;
     }
     // 3 遍历所有section实体，画顶部大文字
     for (const section of this.project.stageManager.getSections()) {
@@ -123,7 +136,6 @@ export class EntityRenderer {
       }
       this.renderEntity(penStroke);
     }
-    return renderedNodes;
   }
 
   /**

app/src/core/render/canvas2d/renderer.tsx

@@ -27,7 +27,6 @@ export class Renderer {
   w = 0;
   h = 0;
   // let canvasRect: Rectangle;
-  renderedNodes: number = 0;
   renderedEdges: number = 0;
 
   /**
@@ -547,7 +546,7 @@ export class Renderer {
     }
   }
   private renderEntities(viewRectangle: Rectangle) {
-    this.renderedNodes = this.project.entityRenderer.renderAllEntities(viewRectangle);
+    this.project.entityRenderer.renderAllEntities(viewRectangle);
   }
 
   private renderEdges(viewRectangle: Rectangle) {
@@ -632,8 +631,8 @@ export class Renderer {
       `speed: ${this.project.camera.speed.x}, ${this.project.camera.speed.y}`,
       `window: ${this.w}x${this.h}`,
       `effect count: ${this.project.effects.effectsCount}`,
-      `node count: ${this.renderedNodes} , ${this.project.stageManager.getTextNodes().length}`,
-      `edge count: ${this.renderedEdges} , ${this.project.stageManager.getLineEdges().length}`,
+      `node count: ${this.project.stageManager.getTextNodes().length}`,
+      `edge count: ${this.project.stageManager.getLineEdges().length}`,
       `section count: ${this.project.stageManager.getSections().length}`,
       `pressingKeys: ${this.project.controller.pressingKeysString()}`,
       `鼠标按下情况: ${this.project.controller.isMouseDown}`,