#154 hit testを実装(WIP)

Next2D · Nov 14, 2024 · 509f29a · 509f29a
1 parent 8f5ab60
commit 509f29a
Show file tree

Hide file tree

Showing 15 changed files with 88 additions and 41 deletions.
diff --git a/index.html b/index.html
@@ -17,7 +17,7 @@
         const { TextField } = next2d.text;
 
         const sprite = root.addChild(new Sprite());
-        // sprite.buttonMode = true;
+        sprite.buttonMode = true;
         sprite.x = 50;
         sprite.y = 50;
 

diff --git a/packages/core/src/Canvas/usecase/CanvasPointerDownEventUseCase.ts b/packages/core/src/Canvas/usecase/CanvasPointerDownEventUseCase.ts
@@ -14,7 +14,7 @@ import { execute as playerSetCurrentMousePoint } from "../../Player/service/Play
  */
 export const execute = (event: PointerEvent): void =>
 {
-    const element: HTMLElement = event.target as HTMLElement;
+    const element = event.target as HTMLCanvasElement;
     if (!element) {
         return ;
     }
@@ -26,5 +26,5 @@ export const execute = (event: PointerEvent): void =>
     playerSetCurrentMousePoint(event);
 
     // start position
-    playerHitTestUseCase(event);
+    playerHitTestUseCase(event, element);
 };
diff --git a/packages/core/src/Canvas/usecase/CanvasPointerMoveEventUseCase.ts b/packages/core/src/Canvas/usecase/CanvasPointerMoveEventUseCase.ts
@@ -13,9 +13,14 @@ import { execute as playerSetCurrentMousePoint } from "../../Player/service/Play
  */
 export const execute = (event: PointerEvent): void =>
 {
+    const element = event.target as HTMLCanvasElement;
+    if (!element) {
+        return ;
+    }
+
     $setEvent(event);
     playerSetCurrentMousePoint(event);
 
     // start position
-    playerHitTestUseCase(event);
+    playerHitTestUseCase(event, element);
 };
diff --git a/packages/core/src/Canvas/usecase/CanvasPointerUpEventUseCase.ts b/packages/core/src/Canvas/usecase/CanvasPointerUpEventUseCase.ts
@@ -14,7 +14,7 @@ import { execute as playerSetCurrentMousePoint } from "../../Player/service/Play
  */
 export const execute = (event: PointerEvent): void =>
 {
-    const element: HTMLElement = event.target as HTMLElement;
+    const element = event.target as HTMLCanvasElement;
     if (!element) {
         return ;
     }
@@ -26,5 +26,5 @@ export const execute = (event: PointerEvent): void =>
     playerSetCurrentMousePoint(event);
 
     // start position
-    playerHitTestUseCase(event);
+    playerHitTestUseCase(event, element);
 };
diff --git a/packages/core/src/Canvas/usecase/CanvasRegisterEventUseCase.test.ts b/packages/core/src/Canvas/usecase/CanvasRegisterEventUseCase.test.ts
@@ -0,0 +1,24 @@
+import { execute } from "./CanvasRegisterEventUseCase";
+import { PointerEvent } from "@next2d/events";
+import { describe, expect, it, vi } from "vitest";
+
+describe("CanvasRegisterEventUseCase.js test", () =>
+{
+    it("execute test case1", () =>
+    {
+        let results: string[] = [];
+        const MockCanvas = {
+            "addEventListener": vi.fn((event: string) => 
+            {
+                results.push(event);
+            })
+        } as unknown as HTMLCanvasElement;
+
+        execute(MockCanvas);
+        expect(results.length).toBe(4);
+        expect(results[0]).toBe(PointerEvent.POINTER_UP);
+        expect(results[1]).toBe(PointerEvent.POINTER_DOWN);
+        expect(results[2]).toBe(PointerEvent.POINTER_UP);
+        expect(results[3]).toBe(PointerEvent.POINTER_MOVE);
+    });
+});
diff --git a/packages/core/src/Player.ts b/packages/core/src/Player.ts
@@ -39,6 +39,26 @@ export class Player
      */
     public rendererHeight: number;
 
+    /**
+     * @description メインのdiv elementの幅
+     *              Width of the main div element
+     *
+     * @type {number}
+     * @default 0
+     * @public
+     */
+    public screenWidth: number;
+
+    /**
+     * @description メインのdiv elementの高さ
+     *              Height of the main div element
+     *
+     * @type {number}
+     * @default 0
+     * @public
+     */
+    public screenHeight: number;
+
     /**
      * @description devicePixelRatioを含んだcanvasの描画領域の拡大率
      *              The magnification of the drawing area of the canvas including devicePixelRatio
@@ -132,7 +152,7 @@ export class Player
     /**
      * @description マウスの状態
      *             Mouse state
-     * 
+     *
      * @type {"up" | "down"}
      * @default "up"
      * @public
@@ -159,6 +179,8 @@ export class Player
         this.rendererWidth  = 0;
         this.rendererHeight = 0;
         this.rendererScale  = 1;
+        this.screenWidth    = 0;
+        this.screenHeight   = 0;
 
         this.stopFlag   = true;
         this.startTime  = 0;

diff --git a/packages/core/src/Player/service/PlayerKeyDownEventService.ts b/packages/core/src/Player/service/PlayerKeyDownEventService.ts
@@ -4,7 +4,7 @@ import { $stage } from "@next2d/display";
 /**
  * @description キーボードダウンイベントを実行する
  *              Execute the keyboard down event
- * 
+ *
  * @param  {KeyboardEvent} event
  * @return {void}
  * @method

diff --git a/packages/core/src/Player/usecase/PlayerHitTestUseCase.ts b/packages/core/src/Player/usecase/PlayerHitTestUseCase.ts
@@ -2,7 +2,6 @@ import type { IPlayerHitObject } from "../../interface/IPlayerHitObject";
 import { $player } from "../../Player";
 import { $stage } from "@next2d/display";
 import { PointerEvent as Next2D_PointerEvent } from "@next2d/events";
-import { $canvas } from "../../Canvas";
 import {
     $devicePixelRatio,
     $hitContext,
@@ -49,11 +48,12 @@ let $wait: boolean = false;
  *              Player hit test
  *
  * @param  {PointerEvent} event
+ * @param  {HTMLCanvasElement} canvas
  * @return {void}
  * @method
  * @protected
  */
-export const execute = (event: PointerEvent): void =>
+export const execute = (event: PointerEvent, canvas: HTMLCanvasElement): void =>
 {
     if ($player.stopFlag) {
         return ;
@@ -67,12 +67,9 @@ export const execute = (event: PointerEvent): void =>
         const rect = div.getBoundingClientRect();
         x += rect.left;
         y += rect.top;
-    }
 
-    if ($canvas) {
-        const rect = $canvas.getBoundingClientRect();
-        x += rect.left;
-        y += rect.top;
+        x += ($player.screenWidth - $player.rendererWidth / $devicePixelRatio) / 2;
+        y += ($player.screenHeight - $player.rendererHeight / $devicePixelRatio) / 2;
     }
 
     const scale  = $player.rendererScale / $devicePixelRatio;
@@ -99,8 +96,7 @@ export const execute = (event: PointerEvent): void =>
 
     // カーソルの表示を更新
     if ($currentCursor !== $hitObject.pointer) {
-        $currentCursor = $hitObject.pointer;
-        $canvas.style.cursor = $hitObject.pointer
+        canvas.style.cursor = $currentCursor = $hitObject.pointer;
     }
 
     switch (event.type) {
@@ -123,7 +119,6 @@ export const execute = (event: PointerEvent): void =>
                 // ダブルタップを終了
                 $wait = false;
 
-
             }
             break;
 

diff --git a/packages/core/src/Player/usecase/PlayerResizeEventUseCase.ts b/packages/core/src/Player/usecase/PlayerResizeEventUseCase.ts
@@ -29,11 +29,11 @@ export const execute = (): void =>
         return ;
     }
 
-    const screenWidth: number = $player.fullScreen || parent.tagName === "BODY"
+    const screenWidth = $player.fullScreen || parent.tagName === "BODY"
         ? window.innerWidth
         : parent.clientWidth;
 
-    const screenHeight: number = $player.fullScreen || parent.tagName === "BODY"
+    const screenHeight = $player.fullScreen || parent.tagName === "BODY"
         ? window.innerHeight
         : parent.clientHeight;
 
@@ -45,27 +45,29 @@ export const execute = (): void =>
         return ;
     }
 
-    const scale: number = Math.min(
+    const scale = Math.min(
         screenWidth  / $stage.stageWidth,
         screenHeight / $stage.stageHeight
     ) * $devicePixelRatio;
 
-    const width: number = $player.fullScreen
+    const width = $player.fullScreen
         ? window.innerWidth * $devicePixelRatio
         : $stage.stageWidth * scale | 0;
 
-    const height: number = $player.fullScreen
+    const height = $player.fullScreen
         ? window.innerHeight * $devicePixelRatio
         : $stage.stageHeight * scale | 0;
 
     // 同じサイズの場合は、ここれで終了
-    if (width === $player.rendererWidth
-        && height === $player.rendererHeight
+    if (width === $player.screenWidth
+        && height === $player.screenHeight
     ) {
         return ;
     }
 
     // update
+    $player.screenWidth   = screenWidth;
+    $player.screenHeight  = screenHeight;
     $stage.rendererScale  = $player.rendererScale  = scale;
     $stage.rendererWidth  = $player.rendererWidth  = width;
     $stage.rendererHeight = $player.rendererHeight = height;

diff --git a/packages/display/src/DisplayObjectContainer/usecase/DisplayObjectContainerMouseHitUseCase.ts b/packages/display/src/DisplayObjectContainer/usecase/DisplayObjectContainerMouseHitUseCase.ts
@@ -166,20 +166,20 @@ export const execute = <P extends DisplayObjectContainer, D extends DisplayObjec
         const maskInstance = instance.mask as D | null;
         if (maskInstance) {
 
-        //     if (display_object_container === maskInstance.parent) {
+            if (display_object_container === maskInstance.parent) {
 
-        //         if (!maskInstance._$hit(hit_context, tMatrix, hit_object, true)) {
-        //             continue;
-        //         }
+                if (!maskInstance._$hit(hit_context, tMatrix, hit_object, true)) {
+                    continue;
+                }
 
-        //     } else {
+            } else {
 
-        //         const matrix = displayObjectConcatenatedMatrixUseCase(maskInstance);
-        //         if (!maskInstance._$hit(hit_context, matrix.rawData, hit_object, true)) {
-        //             continue;
-        //         }
+                const matrix = displayObjectConcatenatedMatrixUseCase(maskInstance);
+                if (!maskInstance._$hit(hit_context, matrix.rawData, hit_object, true)) {
+                    continue;
+                }
 
-        //     }
+            }
 
         }
 

diff --git a/packages/display/src/Shape/usecase/ShapeGenerateRenderQueueUseCase.ts b/packages/display/src/Shape/usecase/ShapeGenerateRenderQueueUseCase.ts
@@ -154,7 +154,7 @@ export const execute = (
     render_queue.push(+isGridEnabled);
     render_queue.push(+isDrawable);
     render_queue.push(+shape.isBitmap);
-    
+
     if (!shape.uniqueKey) {
         if (shape.characterId && shape.loaderInfo) {
 

diff --git a/packages/events/src/EventUtil.ts b/packages/events/src/EventUtil.ts
@@ -62,7 +62,7 @@ export const $setEvent = (event: IEvent): void =>
 /**
  * @description アクティブなイベントオブジェクを取得
  *              Get the active event object
- * 
+ *
  * @return {IEvent}
  * @method
  * @protected

diff --git a/packages/events/src/FocusEvent.ts b/packages/events/src/FocusEvent.ts
@@ -51,7 +51,7 @@ export class FocusEvent extends Event
 
                     default:
                         return undefined;
-                        
+
                 }
             }
         });

diff --git a/packages/events/src/KeyboardEvent.ts b/packages/events/src/KeyboardEvent.ts
@@ -46,7 +46,7 @@ export class KeyboardEvent extends Event
 
                     default:
                         return undefined;
-                        
+
                 }
             }
         });

diff --git a/packages/events/src/PointerEvent.ts b/packages/events/src/PointerEvent.ts
@@ -52,9 +52,8 @@ export class PointerEvent extends Event
 
                     default:
                         return undefined;
-
-                }
 
+                }
 
             }
         });
-Original file line number
+Diff line change
@@ Expand Up / @@ -51,7 +51,7 @@ export class FocusEvent extends Event @@
                         default:
                             return undefined;
                     }
                 }
             });
@@ Expand Down @@