fix: 画布内存泄漏

docs/api/motajs-render-core/MotaOffscreenCanvas2D.md

@@ -48,10 +48,10 @@ function constructor(
 创建一个新的离屏画布。  
 **参数**
 
--   `alpha`: 是否启用透明度通道（默认为 `true`）。
+- `alpha`: 是否启用透明度通道（默认为 `true`）。
--   `canvas`: 可指定现有画布，未提供时自动创建新画布。  
+- `canvas`: 可指定现有画布，未提供时自动创建新画布。  
-    **注意**
+  **注意**
--   在自定义渲染元素中，建议使用 `RenderItem.requireCanvas` 而非直接调用此构造函数。
+- 在自定义渲染元素中，建议使用 `RenderItem.requireCanvas` 而非直接调用此构造函数。之后如果不使用，再使用 `RenderItem.deleteCanvas` 删除。
 
 ---
 
@@ -67,11 +67,11 @@ function size(width: number, height: number): void;
 设置画布的尺寸。  
 **参数**
 
--   `width`: 逻辑宽度（最小为 1）。
+- `width`: 逻辑宽度（最小为 1）。
--   `height`: 逻辑高度（最小为 1）。  
+- `height`: 逻辑高度（最小为 1）。  
-    **行为**
+  **行为**
--   自动计算缩放比例（考虑 `highResolution` 和 `autoScale`）。
+- 自动计算缩放比例（考虑 `highResolution` 和 `autoScale`）。
--   调整画布物理尺寸和样式尺寸。
+- 调整画布物理尺寸和样式尺寸。
 
 **示例**
 
@@ -92,7 +92,7 @@ function withGameScale(auto: boolean): void;
 设置画布是否跟随 `core.domStyle.scale` 自动缩放。  
 **参数**
 
--   `auto`: 是否启用自动缩放。
+- `auto`: 是否启用自动缩放。
 
 **示例**
 
@@ -112,7 +112,7 @@ function setHD(hd: boolean): void;
 设置是否为高清画布（基于设备像素比例）。  
 **参数**
 
--   `hd`: 是否启用高清模式。
+- `hd`: 是否启用高清模式。
 
 **示例**
 
@@ -132,7 +132,7 @@ function setAntiAliasing(anti: boolean): void;
 设置抗锯齿功能。  
 **参数**
 
--   `anti`: 是否启用抗锯齿。
+- `anti`: 是否启用抗锯齿。
 
 **示例**
 
@@ -152,7 +152,7 @@ function clear(): void;
 清空画布内容。  
 **注意**
 
--   冻结状态下调用此方法会触发警告。
+- 冻结状态下调用此方法会触发警告。
 
 **示例**
 
@@ -242,7 +242,7 @@ function clone(canvas: MotaOffscreenCanvas2D): MotaOffscreenCanvas2D;
 复制一个画布对象，结果画布将被冻结。  
 **返回值**
 
--   复制的画布对象（不可修改属性，但可绘制）。
+- 复制的画布对象（不可修改属性，但可绘制）。
 
 **示例**
 
@@ -262,7 +262,7 @@ function refreshAll(force: boolean = false): void;
 刷新所有已注册画布的尺寸（仅在窗口大小变化时自动调用）。  
 **参数**
 
--   `force`: 是否强制刷新所有画布（默认仅刷新启用 `autoScale` 的画布）。
+- `force`: 是否强制刷新所有画布（默认仅刷新启用 `autoScale` 的画布）。
 
 ---
 

packages-user/client-modules/src/render/elements/block.ts

@@ -1,9 +1,10 @@
 import { EventEmitter } from 'eventemitter3';
 import { logger } from '@motajs/common';
-import { MotaOffscreenCanvas2D } from '@motajs/render-core';
+import { MotaOffscreenCanvas2D, RenderItem } from '@motajs/render-core';
 
 interface BlockCacherEvent {
     split: [];
+    beforeClear: [index: number];
 }
 
 interface BlockData {
@@ -307,9 +308,12 @@ export interface ICanvasCacheItem extends IBlockCacheable {
 
 export class CanvasCacheItem implements ICanvasCacheItem {
     constructor(
-        public canvas: MotaOffscreenCanvas2D,
+        public readonly canvas: MotaOffscreenCanvas2D,
-        public symbol: number
+        public readonly symbol: number,
+        public readonly element: RenderItem
     ) {}
 
-    destroy(): void {}
+    destroy(): void {
+        this.element.deleteCanvas(this.canvas);
+    }
 }

packages-user/client-modules/src/render/elements/damage.ts

@@ -539,7 +539,7 @@ export class Damage extends RenderItem<EDamageEvent> {
             });
 
             ctx.drawImage(temp.canvas, px, py, size, size);
-            block.cache.set(v, new CanvasCacheItem(temp, temp.symbol));
+            block.cache.set(v, new CanvasCacheItem(temp, temp.symbol, this));
         });
         ctx.restore();
         // console.timeEnd('damage');

packages-user/client-modules/src/render/elements/layer.ts

@@ -774,6 +774,7 @@ export class Layer extends Container<ELayerEvent> {
         const num = this.background;
 
         const data = texture.getRenderable(num);
+        this.backImage.forEach(v => this.deleteCanvas(v));
         this.backImage = [];
         if (!data) return;
 
@@ -800,6 +801,7 @@ export class Layer extends Container<ELayerEvent> {
 
             this.backImage.push(canvas);
         }
+        this.deleteCanvas(temp);
 
         for (const ex of this.extend.values()) {
             ex.onBackgroundGenerated?.(this, this.backImage);
@@ -1239,7 +1241,10 @@ export class Layer extends Container<ELayerEvent> {
                 blockSize * cell,
                 blockSize * cell
             );
-            this.block.cache.set(index, new CanvasCacheItem(temp, temp.symbol));
+            this.block.cache.set(
+                index,
+                new CanvasCacheItem(temp, temp.symbol, this)
+            );
         });
     }
 

packages-user/client-modules/src/render/elements/misc.ts

@@ -211,6 +211,7 @@ export class Winskin extends RenderItem<EWinskinEvent> {
             Winskin.patternMap.set(this.imageName, winskinPattern);
         }
         this.patternCache = winskinPattern;
+        this.deleteCanvas(pattern);
         return winskinPattern;
     }
 

packages-user/legacy-plugin-client/src/boss/palaceBossProjectile.ts

@@ -73,6 +73,7 @@ export class SplittableBall extends Projectile<PalaceBoss> {
     private splitted: boolean = false;
 
     static init(colors: Record<string, string[]>) {
+        this.ball.forEach(v => mainRenderer.deleteCanvas(v));
         this.ball.clear();
         for (const [key, color] of Object.entries(colors)) {
             const canvas = mainRenderer.requireCanvas();

packages/render-core/src/canvas2d.ts

@@ -24,7 +24,8 @@ export class MotaOffscreenCanvas2D extends EventEmitter<OffscreenCanvasEvent> {
 
     /**
      * 创建一个新的离屏画布\
-     * **注意**：如果你在自定义渲染元素中使用，请避免使用此构造函数，而应该使用 `RenderItem.requireCanvas`
+     * **注意**：如果你在自定义渲染元素中使用，请避免使用此构造函数，而应该使用 `RenderItem.requireCanvas`，
+     * 之后如果不使用，再使用 `RenderItem.deleteCanvas` 删除。
      * @param alpha 是否启用透明度通道
      * @param canvas 指定画布，不指定时会自动创建一个新画布
      */

packages/render-core/src/item.ts

@@ -348,10 +348,10 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
     /** 这个渲染元素使用到的所有画布 */
     protected readonly canvases: Set<MotaOffscreenCanvas2D> = new Set();
     /** 这个渲染元素每个画布的配置信息 */
-    private readonly canvasMap: Map<
+    private readonly canvasMap: WeakMap<
         MotaOffscreenCanvas2D,
         RenderItemCanvasData
-    > = new Map();
+    > = new WeakMap();
     //#endregion
 
     //#region 交互事件
@@ -1305,6 +1305,14 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
         this.emit('destroy');
         this.removeAllListeners();
         this.canvases.clear();
+        this.cache.clear();
+        this.propagationStoped.clear();
+        this.cachedEvent.clear();
+        this.mouseId.clear();
+        this.touchId.clear();
+        this.children.clear();
+        this._root = void 0;
+        this._parent = void 0;
     }
 }
 

public/project/floors/MT16.js

@@ -89,7 +89,7 @@ main.floors.MT16=
                 "no": [
                     {
                         "type": "function",
-                        "function": "function(){\nMota.require('replay_g').readyClip();\n}"
+                        "function": "function(){\nMota.require('@user/legacy-plugin-data').readyClip();\n}"
                     },
                     {
                         "type": "choices",
@@ -400,7 +400,7 @@ main.floors.MT16=
             },
             {
                 "type": "function",
-                "function": "function(){\nMota.require('chase_r').start(false);\n}"
+                "function": "function(){\nMota.require('legacy-plugin-client').start(false);\n}"
             },
             {
                 "type": "autoSave"

public/project/floors/MT17.js

@@ -56,7 +56,7 @@ main.floors.MT17=
         "12,6": [
             {
                 "type": "function",
-                "function": "function(){\nif (core.status.hero.hp - flags.hphphp >= 150000) {\n\tMota.require('achievement_r').completeAchievement('normal', 1);\n}\ndelete flags.hphphp;\n}"
+                "function": "function(){\nif (core.status.hero.hp - flags.hphphp >= 150000) {\n\t//Mota.require('achievement_r').completeAchievement('normal', 1);\n}\ndelete flags.hphphp;\n}"
             }
         ]
     },

public/project/floors/MT41.js

@@ -70,7 +70,7 @@ main.floors.MT41=
             "那我就送你回到标题界面吧！",
             {
                 "type": "function",
-                "function": "function(){\nMota.require('achievement_r').completeAchievement('explore', 0);\n}"
+                "function": "function(){\n//Mota.require('achievement_r').completeAchievement('explore', 0);\n}"
             },
             {
                 "type": "restart"

public/project/floors/MT6.js

@@ -124,7 +124,7 @@ main.floors.MT6=
         "4,12": [
             {
                 "type": "function",
-                "function": "function(){\nif (core.status.hero.hp === 1) {\n\tMota.require('achievement_r').completeAchievement('normal', 0);\n}\n}"
+                "function": "function(){\nif (core.status.hero.hp === 1) {\n\t//Mota.require('achievement_r').completeAchievement('normal', 0);\n}\n}"
             }
         ]
     },

public/project/floors/tower7.js

@@ -123,7 +123,7 @@ main.floors.tower7=
                 "下面，就让我们开始吧！",
                 {
                     "type": "function",
-                    "function": "function(){\nMota.require('replay_g').readyClip();\n}"
+                    "function": "function(){\nMota.require('@user/legacy-plugin-data').readyClip();\n}"
                 }
             ]
         },