fix: click判定错误 & 位置不正确

src/core/render/event.ts

@@ -72,6 +72,7 @@ export interface IActionEvent {
     /**
      * 当前按下了哪些按键。该值是一个数字，可以通过位运算判断是否按下了某个按键。
      * 例如通过 `buttons & MouseType.Left` 来判断是否按下了左键。
+     * 注意在鼠标抬起或鼠标点击事件中，并不会包含触发的那个按键
      */
     buttons: number;
     /** 触发时是否按下了 alt 键 */

src/core/render/item.ts

@@ -822,6 +822,7 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
             }
             case ActionType.Down: {
                 // 记录标识符，用于判定 click
+                if (!inElement) return false;
                 if (event.touch) {
                     this.touchId.add(event.identifier);
                 } else {
@@ -830,6 +831,7 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
                 break;
             }
             case ActionType.Click: {
+                if (!inElement) return false;
                 if (event.touch) {
                     if (!this.touchId.has(event.identifier)) {
                         return false;
@@ -878,7 +880,9 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
         event: IActionEvent,
         transform: Transform
     ): vec3 {
-        return transform.untransformed(event.offsetX, event.offsetY);
+        const x = event.offsetX + this.anchorX * this.width;
+        const y = event.offsetY + this.anchorY * this.height;
+        return transform.untransformed(x, y);
     }
 
     /**

src/core/render/preset/misc.ts

@@ -236,8 +236,8 @@ export class Icon extends RenderItem<EIconEvent> implements IAnimateFrame {
         const renderable = this.renderable;
         if (!renderable) return;
         const [x, y, w, h] = renderable.render[0];
-        const cw = canvas.width;
+        const cw = this.width;
-        const ch = canvas.height;
+        const ch = this.height;
         const frame = this.animate
             ? RenderItem.animatedFrame % renderable.frame
             : 0;

src/core/render/render.ts

@@ -214,7 +214,9 @@ export class MotaRenderer extends Container implements IRenderTreeRoot {
             case ActionType.Move:
             case ActionType.Enter:
             case ActionType.Leave:
-            case ActionType.Wheel:
+            case ActionType.Wheel: {
+                return this.getActiveMouseIdentifier(mouse);
+            }
             case ActionType.Up:
             case ActionType.Click: {
                 const id = this.getActiveMouseIdentifier(mouse);
@@ -241,14 +243,16 @@ export class MotaRenderer extends Container implements IRenderTreeRoot {
         mouse: MouseType = this.getMouseType(event)
     ): IActionEvent {
         const id = this.getMouseIdentifier(type, mouse);
+        const x = event.offsetX / core.domStyle.scale;
+        const y = event.offsetY / core.domStyle.scale;
         return {
             target: this,
             identifier: id,
             touch: false,
-            offsetX: event.offsetX,
+            offsetX: x,
-            offsetY: event.offsetY,
+            offsetY: y,
-            absoluteX: event.offsetX,
+            absoluteX: x,
-            absoluteY: event.offsetY,
+            absoluteY: y,
             type: mouse,
             buttons: this.getMouseButtons(event),
             altKey: event.altKey,
@@ -309,8 +313,8 @@ export class MotaRenderer extends Container implements IRenderTreeRoot {
         event: TouchEvent,
         rect: DOMRect
     ): IActionEvent {
-        const x = touch.clientX - rect.left;
+        const x = (touch.clientX - rect.left) / core.domStyle.scale;
-        const y = touch.clientY - rect.top;
+        const y = (touch.clientY - rect.top) / core.domStyle.scale;
         return {
             target: this,
             identifier: this.getTouchIdentifier(touch, type),

src/module/render/index.tsx

@@ -66,7 +66,6 @@ export function create() {
 
         return () => (
             <container id="map-draw" {...mapDrawProps}>
-                <icon icon={50} zIndex={100}></icon>
                 <layer-group id="layer-main" ex={layerGroupExtends} ref={map}>
                     <layer layer="bg" zIndex={10}></layer>
                     <layer layer="bg2" zIndex={20}></layer>