feat: 渲染元素的id

src/core/render/index.ts

@@ -10,6 +10,7 @@ import { LayerGroupAnimate } from './preset/animate';
 import { LayerGroupPortal } from '@/plugin/fx/portal';
 import { LayerGroupHalo } from '@/plugin/fx/halo';
 import { FloorViewport } from './preset/viewport';
+import { Container } from './container';
 
 let main: MotaRenderer;
 
@@ -23,7 +24,10 @@ Mota.require('var', 'loading').once('loaded', () => {
     render.mount();
     render.hide();
 
+    const mapDraw = new Container();
     const layer = new LayerGroup();
+    mapDraw.id = 'map-draw';
+    layer.id = 'layer-main';
 
     ['bg', 'bg2', 'event', 'fg', 'fg2'].forEach(v => {
         layer.addLayer(v as FloorLayer);
@@ -50,7 +54,8 @@ Mota.require('var', 'loading').once('loaded', () => {
     layer.extends(animate);
     layer.extends(viewport);
 
-    render.appendChild(layer);
+    render.appendChild(mapDraw);
+    mapDraw.appendChild(layer);
     console.log(render);
 });
 

src/core/render/item.ts

@@ -3,6 +3,7 @@ import { EventEmitter } from 'eventemitter3';
 import { MotaOffscreenCanvas2D } from '../fx/canvas2d';
 import { Ticker, TickerFn } from 'mutate-animate';
 import { Transform } from './transform';
+import { logger } from '../common/logger';
 
 export type RenderFunction = (
     canvas: MotaOffscreenCanvas2D,
@@ -104,7 +105,7 @@ interface IRenderTickerSupport {
     /**
      * 移除ticker函数
      * @param id 函数id，也就是{@link IRenderTickerSupport.delegateTicker}的返回值
-     * @param callEnd 是否调用结束函数，即{@link IRenderTickerSupport.delegateTicker}的end参数
+     * @param callEnd 是否调用结束函数，即{@link IRenderTickerSupport.delegateTicker}的end参数，默认调用
      * @returns 是否删除成功，比如对应ticker不存在，就是删除失败
      */
     removeTicker(id: number, callEnd?: boolean): boolean;
@@ -115,6 +116,7 @@ export interface ERenderItemEvent {
     afterUpdate: [item?: RenderItem];
     beforeRender: [transform: Transform];
     afterRender: [transform: Transform];
+    destroy: [];
 }
 
 interface TickerDelegation {
@@ -145,6 +147,23 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
     /** ticker委托id */
     static tickerId: number = 0;
 
+    /** id到渲染元素的映射 */
+    static itemMap: Map<string, RenderItem> = new Map();
+
+    private _id: string = '';
+
+    get id(): string {
+        return this._id;
+    }
+    set id(v: string) {
+        if (RenderItem.itemMap.has(this._id)) {
+            logger.warn(23);
+            RenderItem.itemMap.delete(this._id);
+        }
+        RenderItem.itemMap.set(v, this);
+        this._id = v;
+    }
+
     /** 元素纵深，表示了遮挡关系 */
     zIndex: number = 0;
 
@@ -384,6 +403,8 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
      */
     destroy(): void {
         this.remove();
+        this.emit('destroy');
+        this.removeAllListeners();
     }
 }
 

src/core/render/render.ts

@@ -7,8 +7,6 @@ export class MotaRenderer extends Container {
     static list: Set<MotaRenderer> = new Set();
 
     target: MotaCanvas2D;
-    /** 这个渲染对象的id */
-    id: string;
 
     protected needUpdate: boolean = false;
 
@@ -24,7 +22,7 @@ export class MotaRenderer extends Container {
         this.target.css(`z-index: 100`);
 
         this.setAnchor(0.5, 0.5);
-        this.transform.move(240, 240);
+        this.transform.translate(240, 240);
 
         MotaRenderer.list.add(this);
     }
@@ -47,6 +45,33 @@ export class MotaRenderer extends Container {
         this.emit('afterUpdate', item);
     }
 
+    /**
+     * 根据渲染元素的id获取一个渲染元素
+     * @param id 要获取的渲染元素id
+     * @returns
+     */
+    getElementById(id: string): RenderItem | undefined {
+        const map = RenderItem.itemMap;
+        const item = map.get(id);
+        if (item) return item;
+        else {
+            const item = this.searchElement(this, id);
+            if (item) {
+                map.set(id, item);
+                return item;
+            }
+        }
+    }
+
+    private searchElement(ele: Container, id: string): RenderItem | undefined {
+        for (const child of ele.children) {
+            if (child.id === id) return child;
+            if (child instanceof Container) {
+                return this.searchElement(child, id);
+            }
+        }
+    }
+
     /**
      * 添加至游戏画面
      */