#154 hit testとcanvasイベントを実装(WIP)

packages/core/src/Canvas/usecase/CanvasPointerLeaveEventUseCase.ts

@@ -0,0 +1,34 @@
+import type { DisplayObject } from "@next2d/display";
+import { $getRollOverDisplayObject } from "../../CoreUtil";
+import {
+    PointerEvent as Next2D_PointerEvent,
+    $setEvent
+} from "@next2d/events";
+
+/**
+ * @description マウス、タップがDisplayObjectから離れた時に発生します。
+ *              Occurs when the mouse or tap leaves the DisplayObject.
+ *
+ * @param  {PointerEvent} event
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (event: PointerEvent): void =>
+{
+    $setEvent(event);
+
+    const rollOverDisplayObject = $getRollOverDisplayObject() as DisplayObject;
+    if (!rollOverDisplayObject) {
+        return ;
+    }
+
+    if (rollOverDisplayObject.willTrigger(Next2D_PointerEvent.POINTER_LEAVE)) {
+        // イベントの伝播を止める
+        event.preventDefault();
+
+        rollOverDisplayObject.dispatchEvent(
+            new Next2D_PointerEvent(Next2D_PointerEvent.POINTER_LEAVE)
+        );
+    }
+};

packages/core/src/Canvas/usecase/CanvasRegisterEventUseCase.test.ts

@@ -1,5 +1,8 @@
 import { execute } from "./CanvasRegisterEventUseCase";
-import { PointerEvent } from "@next2d/events";
+import {
+    PointerEvent,
+    WheelEvent
+} from "@next2d/events";
 import { describe, expect, it, vi } from "vitest";
 
 describe("CanvasRegisterEventUseCase.js test", () =>
@@ -15,10 +18,13 @@ describe("CanvasRegisterEventUseCase.js test", () =>
         } as unknown as HTMLCanvasElement;
 
         execute(MockCanvas);
-        expect(results.length).toBe(4);
+        expect(results.length).toBe(6);
+
         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);
+        expect(results[4]).toBe(PointerEvent.POINTER_LEAVE);
+        expect(results[5]).toBe(WheelEvent.WHEEL);
     });
 });

packages/core/src/Canvas/usecase/CanvasRegisterEventUseCase.ts

@@ -1,7 +1,12 @@
 import { execute as canvasPointerDownEventUseCase } from "./CanvasPointerDownEventUseCase";
 import { execute as canvasPointerUpEventUseCase } from "./CanvasPointerUpEventUseCase";
 import { execute as canvasPointerMoveEventUseCase } from "./CanvasPointerMoveEventUseCase";
-import { PointerEvent } from "@next2d/events";
+import { execute as canvasPointerLeaveEventUseCase } from "./CanvasPointerLeaveEventUseCase";
+import { execute as canvasWheelEventUseCase } from "./CanvasWheelEventUseCase";
+import {
+    PointerEvent,
+    WheelEvent
+} from "@next2d/events";
 import {
     $bootAudioContext,
     $getMutedVideos
@@ -42,4 +47,6 @@ export const execute = (canvas: HTMLCanvasElement): void =>
     canvas.addEventListener(PointerEvent.POINTER_DOWN, canvasPointerDownEventUseCase);
     canvas.addEventListener(PointerEvent.POINTER_UP, canvasPointerUpEventUseCase);
     canvas.addEventListener(PointerEvent.POINTER_MOVE, canvasPointerMoveEventUseCase, { "passive": false });
+    canvas.addEventListener(PointerEvent.POINTER_LEAVE, canvasPointerLeaveEventUseCase);
+    canvas.addEventListener(WheelEvent.WHEEL, canvasWheelEventUseCase);
 };

packages/core/src/Canvas/usecase/CanvasWheelEventUseCase.ts

@@ -0,0 +1,27 @@
+import { $stage } from "@next2d/display";
+import {
+    $setEvent,
+    WheelEvent as Next2D_WheelEvent
+} from "@next2d/events";
+
+/**
+ * @description ホイールイベントを実行します。
+ *              Executes the wheel event.
+ *
+ * @param  {WheelEvent} event
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (event: WheelEvent): void =>
+{
+    $setEvent(event);
+    if ($stage.willTrigger(Next2D_WheelEvent.WHEEL)) {
+        // イベントの伝播を止める
+        event.preventDefault();
+
+        $stage.dispatchEvent(new Next2D_WheelEvent(
+            Next2D_WheelEvent.WHEEL
+        ));
+    }
+};

packages/core/src/CoreUtil.ts

@@ -1,3 +1,6 @@
+import type { IPlayerHitObject } from "./interface/IPlayerHitObject";
+import type { IDisplayObject } from "./interface/IDisplayObject";
+
 /**
  * @type {string}
  * @const
@@ -72,4 +75,54 @@ export const $setMainElement = (element: HTMLDivElement): void =>
 export const $getMainElement = (): HTMLDivElement =>
 {
     return $mainElement as NonNullable<HTMLDivElement>;
+};
+
+/**
+ * @description マウス、タップがヒットしたDisplayObjectを取得します。
+ *              Get the DisplayObject that the mouse or tap hit.
+ *
+ * @type {IPlayerHitObject}
+ * @private
+ */
+export const $hitObject: IPlayerHitObject = {
+    "x": 0,
+    "y": 0,
+    "pointer": "",
+    "hit": null
+};
+
+/**
+ * @description マウス、タップがヒットしたDisplayObjectを取得します。
+ *             Get the DisplayObject that the mouse or tap hit.
+ *
+ * @type {IDisplayObject<any> | null}
+ * @private
+ */
+let $rollOverDisplayObject: IDisplayObject<any> | null = null;
+
+/**
+ * @description マウス、タップがヒットしたDisplayObjectを取得します。
+ *              Get the DisplayObject that the mouse or tap hit.
+ *
+ * @param  {IDisplayObject<any>} displayObject
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const $setRollOverDisplayObject = (displayObject: IDisplayObject<any> | null): void =>
+{
+    $rollOverDisplayObject = displayObject;
+};
+
+/**
+ * @description マウス、タップがヒットしたDisplayObjectを取得します。
+ *              Get the DisplayObject that the mouse or tap hit.
+ *
+ * @return {IDisplayObject<any>}
+ * @method
+ * @protected
+ */
+export const $getRollOverDisplayObject = (): IDisplayObject<any> | null =>
+{
+    return $rollOverDisplayObject;
 };