fix: 元素的根元素

src/core/render/container.ts

@@ -78,6 +78,29 @@ export class Container<E extends EContainerEvent = EContainerEvent>
         this.update(this);
     }
 
+    append(parent: RenderItem): void {
+        super.append(parent);
+        if (this.root) {
+            this.forEachChild(ele => {
+                ele.checkRoot();
+                this.root?.connect(ele);
+            });
+        }
+    }
+
+    /**
+     * 遍历这个元素中的每个子元素，并执行传入的函数
+     * @param fn 对每个元素执行的函数
+     */
+    forEachChild(fn: (ele: RenderItem) => void) {
+        const stack: RenderItem[] = [this];
+        while (stack.length > 0) {
+            const ele = stack.pop()!;
+            stack.push(...ele.children);
+            fn(ele);
+        }
+    }
+
     private sortChildren() {
         this.sortedChildren = [...this.children].sort(
             (a, b) => a.zIndex - b.zIndex

src/core/render/item.ts

@@ -278,15 +278,6 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
         return this._transform;
     }
 
-    private _cursor: string = 'auto';
-    /** 鼠标覆盖在该元素上时的指针样式 */
-    set cursor(v: string) {
-        this.setCursor(v);
-    }
-    get cursor() {
-        return this._cursor;
-    }
-
     //#endregion
 
     //#region 父子关系
@@ -486,19 +477,6 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
         this.update();
     }
 
-    /**
-     * 设置鼠标放在该元素上时的指针样式
-     * @param cursor 要设置成的指针样式
-     */
-    setCursor(cursor: string = 'auto') {
-        const canvas = this._root?.getCanvas();
-        if (!canvas) return;
-        if (this.hovered) {
-            canvas.style.cursor = cursor;
-        }
-        this._cursor = cursor;
-    }
-
     /**
      * 隐藏这个元素
      */
@@ -591,14 +569,19 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
 
     //#region 父子关系
 
-    protected checkRoot() {
+    checkRoot() {
-        if (this._root || this.isRoot) return this._root;
+        if (this._root) return this._root;
+        if (this.isRoot) return this;
         let ele: RenderItem = this;
         while (!ele.isRoot) {
-            if (!ele.parent) {
+            if (ele._root) {
+                this._root = ele._root;
+                return this._root;
+            }
+            if (!ele._parent) {
                 return null;
             } else {
-                ele = ele.parent;
+                ele = ele._parent;
             }
         }
         this._root = ele as RenderItem & IRenderTreeRoot;
@@ -631,10 +614,8 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
         this._parent = parent;
         parent.requestSort();
         this.update();
-        if (this._id !== '') {
+        this.checkRoot();
-            this.checkRoot();
+        this._root?.connect(this);
-            this._root?.connect(this);
-        }
     }
 
     /**
@@ -846,11 +827,6 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
                 }
                 break;
             }
-            case ActionType.Enter: {
-                const canvas = this._root?.getCanvas();
-                if (!canvas) return true;
-                canvas.style.cursor = this._cursor;
-            }
         }
 
         return inElement;

src/core/render/renderer/props.ts

@@ -31,6 +31,7 @@ export interface BaseProps {
     id?: string;
     alpha?: number;
     composite?: GlobalCompositeOperation;
+    cursor?: string;
 }
 
 export interface SpriteProps extends BaseProps {

src/module/render/index.tsx

@@ -1,5 +1,5 @@
 import { FloorItemDetail } from '@/plugin/fx/itemDetail';
-import { FloorDamageExtends, LayerGroup } from '@/core/render';
+import { FloorDamageExtends, LayerGroup, Transform } from '@/core/render';
 import { LayerDoorAnimate } from '@/core/render';
 import { HeroRenderer } from '@/core/render';
 import { MotaRenderer } from '@/core/render';
@@ -64,8 +64,21 @@ export function create() {
             weather.bind(map.value);
         });
 
+        const test = (msg: string) => {
+            return (ev: IActionEvent) => {
+                console.log(msg, ev);
+            };
+        };
+
         return () => (
             <container id="map-draw" {...mapDrawProps}>
+                <icon
+                    icon={50}
+                    zIndex={100}
+                    width={240}
+                    height={240}
+                    cursor="pointer"
+                ></icon>
                 <layer-group id="layer-main" ex={layerGroupExtends} ref={map}>
                     <layer layer="bg" zIndex={10}></layer>
                     <layer layer="bg2" zIndex={20}></layer>