#154 canvasのイベント発火を調整(WIP)

Next2D · Nov 18, 2024 · 30684c8 · 30684c8
1 parent f147b4e
commit 30684c8
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 101 deletions.
diff --git a/packages/core/src/Canvas/usecase/CanvasPointerDownEventUseCase.ts b/packages/core/src/Canvas/usecase/CanvasPointerDownEventUseCase.ts
@@ -1,7 +1,21 @@
 import { $setEvent } from "@next2d/events";
 import { $player } from "../../Player";
 import { execute as playerHitTestUseCase } from "../../Player/usecase/PlayerHitTestUseCase";
-import { execute as playerSetCurrentMousePoint } from "../../Player/service/PlayerSetCurrentMousePoint";
+import { execute as playerSetCurrentMousePointService } from "../../Player/service/PlayerSetCurrentMousePointService";
+import { execute as playerPointerDownEventService } from "../../Player/service/PlayerPointerDownEventService";
+import { execute as playerDoubleClickEventService } from "../../Player/service/PlayerDoubleClickEventService";
+
+/**
+ * @type {NodeJS.Timeout}
+ * @private
+ */
+let $timerId: NodeJS.Timeout;
+
+/**
+ * @type {boolean}
+ * @private
+ */
+let $wait: boolean = false;
 
 /**
  * @description プレイヤーのポインターダウンイベントを処理します。
@@ -23,8 +37,36 @@ export const execute = (event: PointerEvent): void =>
     element.setPointerCapture(event.pointerId);
 
     $setEvent(event);
-    playerSetCurrentMousePoint(event);
+    playerSetCurrentMousePointService(event);
 
     // start position
     playerHitTestUseCase(event, element);
+
+    // fixed logic
+    clearTimeout($timerId);
+
+    if (!$wait) {
+
+        // 初回のタップであればダブルタップを待機モードに変更
+        $wait = true;
+
+        // ダブルタップ有効期限をセット
+        $timerId = setTimeout((): void =>
+        {
+            $wait = false;
+        }, 300);
+
+        playerPointerDownEventService(
+            event.pageX,
+            event.pageY
+        );
+
+    } else {
+
+        // ダブルタップを終了
+        $wait = false;
+
+        playerDoubleClickEventService();
+
+    }
 };
diff --git a/packages/core/src/Canvas/usecase/CanvasPointerMoveEventUseCase.ts b/packages/core/src/Canvas/usecase/CanvasPointerMoveEventUseCase.ts
@@ -1,6 +1,7 @@
 import { $setEvent } from "@next2d/events";
 import { execute as playerHitTestUseCase } from "../../Player/usecase/PlayerHitTestUseCase";
-import { execute as playerSetCurrentMousePoint } from "../../Player/service/PlayerSetCurrentMousePoint";
+import { execute as playerSetCurrentMousePoint } from "../../Player/service/PlayerSetCurrentMousePointService";
+import { execute as playerPointerMoveEventService } from "../../Player/service/PlayerPointerMoveEventService";
 
 /**
  * @description プレイヤーのポインタームーブイベントを処理します。
@@ -23,4 +24,8 @@ export const execute = (event: PointerEvent): void =>
 
     // start position
     playerHitTestUseCase(event, element);
+
+    // fixed logic
+    // ポインタームーブイベントを発火
+    playerPointerMoveEventService(event.pageX, event.pageY);
 };
diff --git a/packages/core/src/Canvas/usecase/CanvasPointerUpEventUseCase.ts b/packages/core/src/Canvas/usecase/CanvasPointerUpEventUseCase.ts
@@ -1,7 +1,8 @@
 import { $setEvent } from "@next2d/events";
 import { $player } from "../../Player";
 import { execute as playerHitTestUseCase } from "../../Player/usecase/PlayerHitTestUseCase";
-import { execute as playerSetCurrentMousePoint } from "../../Player/service/PlayerSetCurrentMousePoint";
+import { execute as playerSetCurrentMousePoint } from "../../Player/service/PlayerSetCurrentMousePointService";
+import { execute as playerPointerUpEventService } from "../../Player/service/PlayerPointerUpEventService";
 
 /**
  * @description プレイヤーのポインターアップイベントを処理します。
@@ -27,4 +28,8 @@ export const execute = (event: PointerEvent): void =>
 
     // start position
     playerHitTestUseCase(event, element);
+
+    // fixed logic
+    // ポインターアップイベントを発火します。
+    playerPointerUpEventService();
 };
diff --git a/packages/core/src/Player/service/PlayerDoubleClickEventService.ts b/packages/core/src/Player/service/PlayerDoubleClickEventService.ts
@@ -1,21 +1,22 @@
 import type { DisplayObject } from "@next2d/display";
 import { $stage } from "@next2d/display";
 import { PointerEvent } from "@next2d/events";
+import { $hitObject } from "../../CoreUtil";
 
 /**
  * @description ポインターのダブルタップイベントを処理します。
  *              Processes the pointer double tap event.
  *
- * @param  {D | null} display_object
  * @return {void}
  * @method
  * @protected
  */
-export const execute = <D extends DisplayObject> (display_object: D | null = null): void =>
+export const execute = <D extends DisplayObject> (): void =>
 {
-    if (display_object) {
-        if (display_object.willTrigger(PointerEvent.DOUBLE_CLICK)) {
-            display_object.dispatchEvent(
+    const displayObject = $hitObject.hit as D;
+    if (displayObject) {
+        if (displayObject.willTrigger(PointerEvent.DOUBLE_CLICK)) {
+            displayObject.dispatchEvent(
                 new PointerEvent(PointerEvent.DOUBLE_CLICK)
             );
         }

diff --git a/packages/core/src/Player/service/PlayerPointerDownEventService.ts b/packages/core/src/Player/service/PlayerPointerDownEventService.ts
@@ -16,49 +16,49 @@ import {
  * @description ポインターダウンイベントを処理します。
  *              Processes the pointer down event.
  *
- * @param  {D | null} display_object
+ * @param  {number} page_x
+ * @param  {number} page_y
  * @return {void}
  * @method
  * @protected
  */
 export const execute = <D extends DisplayObject> (
-    display_object: D | null = null,
     page_x: number = 0,
     page_y: number = 0
 ): void => {
 
-    if (display_object) {
+    const displayObject = $hitObject.hit as D;
+    if (displayObject) {
 
-        if (display_object.isText) {
+        if (displayObject.isText) {
 
             // 選択中のTextFieldがある場合はフォーカスを解除します。
             const selectedTextField = $getSelectedTextField();
             if (selectedTextField
-                && selectedTextField.instanceId !== display_object.instanceId
+                && selectedTextField.instanceId !== displayObject.instanceId
             ) {
                 selectedTextField.focus = false;
             }
 
-            if (!(display_object as unknown as TextField).focus) {
-                (display_object as unknown as TextField).focus = true;
-                $setSelectedTextField(display_object as unknown as TextField);
+            if (!(displayObject as unknown as TextField).focus) {
+                (displayObject as unknown as TextField).focus = true;
+                $setSelectedTextField(displayObject as unknown as TextField);
             }
 
-            (display_object as unknown as TextField).setFocusIndex(
+            (displayObject as unknown as TextField).setFocusIndex(
                 $hitObject.x - $hitMatrix[4],
                 $hitObject.y - $hitMatrix[5]
             );
 
             $textArea.style.top  = `${page_x}px`;
             $textArea.style.left = `${page_y}px`;
+        }
 
-        } else {
-            // ヒットしたDisplayObjectポインターダウンイベントを発火します。
-            if (display_object.willTrigger(PointerEvent.POINTER_DOWN)) {
-                display_object.dispatchEvent(
-                    new PointerEvent(PointerEvent.POINTER_DOWN)
-                );
-            }
+        // ヒットしたDisplayObjectポインターダウンイベントを発火します。
+        if (displayObject.willTrigger(PointerEvent.POINTER_DOWN)) {
+            displayObject.dispatchEvent(
+                new PointerEvent(PointerEvent.POINTER_DOWN)
+            );
         }
 
     } else {

diff --git a/packages/core/src/Player/service/PlayerPointerMoveEventService.ts b/packages/core/src/Player/service/PlayerPointerMoveEventService.ts
@@ -1,5 +1,6 @@
 import type { DisplayObject } from "@next2d/display";
 import type { TextField } from "@next2d/text";
+import { PointerEvent } from "@next2d/events";
 import { $player } from "../../Player";
 import {
     $hitObject,
@@ -16,19 +17,25 @@ import {
  * @protected
  */
 export const execute = <D extends DisplayObject> (
-    display_object: D | null = null,
     page_x: number = 0,
     page_y: number = 0
 ): void => {
-
-    console.log(page_x, page_y);
-    if (display_object) {
-        if (display_object.isText && $player.mouseState === "down") {
-            (display_object as unknown as TextField).setFocusIndex(
+    const displayObject = $hitObject.hit as D;
+    if (displayObject) {
+        if (displayObject.isText && $player.mouseState === "down") {
+            (displayObject as unknown as TextField).setFocusIndex(
                 $hitObject.x - $hitMatrix[4],
                 $hitObject.y - $hitMatrix[5],
                 true
             );
         }
+
+        if (displayObject.willTrigger(PointerEvent.POINTER_MOVE)) {
+            displayObject.dispatchEvent(new PointerEvent(
+                PointerEvent.POINTER_MOVE
+            ));
+        }
+    } else {
+        console.log(page_x, page_y);
     }
 };
diff --git a/packages/core/src/Player/service/PlayerPointerUpEventService.ts b/packages/core/src/Player/service/PlayerPointerUpEventService.ts
@@ -1,21 +1,22 @@
 import type { DisplayObject } from "@next2d/display";
 import { $stage } from "@next2d/display";
 import { PointerEvent } from "@next2d/events";
+import { $hitObject } from "../../CoreUtil";
 
 /**
  * @description ポインターアップイベントを処理します。
  *              Processes the pointer up event.
  *
- * @param  {DisplayObject | null} display_object
  * @return {void}
  * @method
  * @protected
  */
-export const execute = <D extends DisplayObject> (display_object: D | null = null): void =>
+export const execute = <D extends DisplayObject> (): void =>
 {
-    if (display_object) {
-        if (display_object.willTrigger(PointerEvent.POINTER_UP)) {
-            display_object.dispatchEvent(
+    const displayObject = $hitObject.hit as D;
+    if (displayObject) {
+        if (displayObject.willTrigger(PointerEvent.POINTER_UP)) {
+            displayObject.dispatchEvent(
                 new PointerEvent(PointerEvent.POINTER_UP)
             );
         }

diff --git a/...yer/service/PlayerSetCurrentMousePoint.ts → ...vice/PlayerSetCurrentMousePointService.ts b/...yer/service/PlayerSetCurrentMousePoint.ts → ...vice/PlayerSetCurrentMousePointService.ts
diff --git a/packages/core/src/Player/usecase/PlayerHitTestUseCase.ts b/packages/core/src/Player/usecase/PlayerHitTestUseCase.ts
@@ -1,11 +1,5 @@
-import type { DisplayObject } from "@next2d/display";
 import { $player } from "../../Player";
 import { $stage } from "@next2d/display";
-import { PointerEvent as Next2D_PointerEvent } from "@next2d/events";
-import { execute as playerPointerDownEventService } from "../service/PlayerPointerDownEventService";
-import { execute as playerDoubleClickEventService } from "../service/PlayerDoubleClickEventService";
-import { execute as playerPointerUpEventService } from "../service/PlayerPointerUpEventService";
-import { execute as playerPointerMoveEventService } from "../service/PlayerPointerMoveEventService";
 import {
     $devicePixelRatio,
     $hitContext,
@@ -20,18 +14,6 @@ import {
  */
 let $currentCursor: string = "auto";
 
-/**
- * @type {NodeJS.Timeout}
- * @private
- */
-let $timerId: NodeJS.Timeout;
-
-/**
- * @type {boolean}
- * @private
- */
-let $wait: boolean = false;
-
 /**
  * @description Playerの当たり判定
  *              Player hit test
@@ -79,58 +61,12 @@ export const execute = (event: PointerEvent, canvas: HTMLCanvasElement): void =>
     $stage.$mouseHit($hitContext, $hitMatrix, $hitObject);
 
     // ヒットしたオブジェクトがある場合
-    if ($hitObject.hit) {
+    if ($hitObject.hit !== null) {
         event.preventDefault();
     }
 
     // カーソルの表示を更新
     if ($currentCursor !== $hitObject.pointer) {
         canvas.style.cursor = $currentCursor = $hitObject.pointer;
     }
-
-    const hitDisplayObject = $hitObject.hit as DisplayObject | null;
-    switch (event.type) {
-
-        case Next2D_PointerEvent.POINTER_MOVE:
-            playerPointerMoveEventService(
-                hitDisplayObject, event.pageX, event.pageY
-            );
-            break;
-
-        case Next2D_PointerEvent.POINTER_DOWN:
-
-            clearTimeout($timerId);
-
-            if (!$wait) {
-
-                // 初回のタップであればダブルタップを待機モードに変更
-                $wait = true;
-
-                // ダブルタップ有効期限をセット
-                $timerId = setTimeout((): void =>
-                {
-                    $wait = false;
-                }, 300);
-
-                playerPointerDownEventService(
-                    hitDisplayObject,
-                    event.pageX,
-                    event.pageY
-                );
-
-            } else {
-
-                // ダブルタップを終了
-                $wait = false;
-
-                playerDoubleClickEventService(hitDisplayObject);
-
-            }
-            break;
-
-        case Next2D_PointerEvent.POINTER_UP:
-            playerPointerUpEventService(hitDisplayObject);
-            break;
-
-    }
 };