#154 フレームの定期処理を実装

index.html

@@ -10,7 +10,35 @@
 <script>
     window.addEventListener("DOMContentLoaded", async () => 
     {
-        next2d.load("develop");
+        // next2d.load("develop");
+
+        const { Sprite, Shape } = next2d.display;
+        const { PointerEvent, Event } = next2d.events;
+
+        const root = await next2d.createRootMovieClip(480, 480);
+
+        const sprite = root.addChild(new Sprite());
+        sprite.buttonMode = true;
+
+        const shape = sprite.addChild(new Shape());
+        shape
+            .graphics
+            .beginFill(0x0000ff)
+            .drawCircle(0, 50, 50);
+
+        sprite.addEventListener(PointerEvent.POINTER_DOWN, () => 
+        {
+            sprite.startDrag();
+        });
+        sprite.addEventListener(PointerEvent.POINTER_UP, () => 
+        {
+            sprite.stopDrag();
+        });
+        sprite.addEventListener(Event.ENTER_FRAME, () => 
+        {
+            sprite.x++;
+            sprite.y++;
+        });
     });
 </script>
 </body>

packages/core/src/Canvas.ts

@@ -1,4 +1,4 @@
-import { $devicePixelRatio } from "./CoreUtil";
+import { $devicePixelRatio, $setCanvas } from "./CoreUtil";
 import { execute as canvasInitializeService } from "./Canvas/service/CanvasInitializeService";
 import { execute as canvasBootOffscreenCanvasService } from "./Canvas/service/CanvasBootOffscreenCanvasService";
 import { execute as canvasRegisterEventUseCase } from "./Canvas/usecase/CanvasRegisterEventUseCase";
@@ -8,6 +8,7 @@ import { execute as canvasRegisterEventUseCase } from "./Canvas/usecase/CanvasRe
  * @public
  */
 export const $canvas: HTMLCanvasElement = document.createElement("canvas");
+$setCanvas($canvas);
 
 // initial invoking function
 canvasInitializeService($canvas, $devicePixelRatio);

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

@@ -41,7 +41,7 @@ export const execute = (event: PointerEvent): void =>
     playerSetCurrentMousePointService(event);
 
     // start position
-    playerHitTestUseCase(event, element);
+    playerHitTestUseCase();
 
     if ($hitObject.hit) {
         event.preventDefault();

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

@@ -24,7 +24,7 @@ export const execute = (event: PointerEvent): void =>
     playerSetCurrentMousePoint(event);
 
     // start position
-    playerHitTestUseCase(event, element);
+    playerHitTestUseCase();
 
     if ($hitObject.hit) {
         event.preventDefault();

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

@@ -27,7 +27,7 @@ export const execute = (event: PointerEvent): void =>
     playerSetCurrentMousePoint(event);
 
     // start position
-    playerHitTestUseCase(event, element);
+    playerHitTestUseCase();
 
     // fixed logic
     // ポインターアップイベントを発火します。

packages/core/src/CoreUtil.ts

@@ -64,6 +64,38 @@ export const $setMainElement = (element: HTMLDivElement): void =>
     $mainElement = element;
 };
 
+/**
+ * @type {HTMLCanvasElement | null}
+ * @private
+ */
+let $canvas: HTMLCanvasElement | null = null;
+
+/**
+ * @description メインのCanvasになるCanvasElementを設定します。
+ *              Set the CanvasElement to be the main canvas.
+ *
+ * @param  {HTMLCanvasElement} element
+ * @method
+ * @protected
+ */
+export const $setCanvas = (element: HTMLCanvasElement): void =>
+{
+    $canvas = element;
+};
+
+/**
+ * @description メインのCanvasになるCanvasElementを取得します。
+ *              Get the CanvasElement to be the main canvas.
+ *
+ * @return {HTMLCanvasElement}
+ * @method
+ * @protected
+ */
+export const $getCanvas = (): HTMLCanvasElement =>
+{
+    return $canvas as NonNullable<HTMLCanvasElement>;
+};
+
 /**
  * @description メインのコンテナになるDivElementを取得します。
  *             Get the DivElement to be the main container.

packages/core/src/Player/service/PlayerAppendElementService.ts

@@ -1,5 +1,4 @@
-import { $getMainElement } from "../../CoreUtil";
-import { $canvas } from "../../Canvas";
+import { $getMainElement, $getCanvas } from "../../CoreUtil";
 import { $textArea } from "@next2d/text";
 
 /**
@@ -16,6 +15,11 @@ export const execute = (): void =>
     if (!element) {
         return ;
     }
-    element.appendChild($canvas);
+    const canvas: HTMLCanvasElement = $getCanvas();
+    if (!canvas) {
+        return ;
+    }
+
+    element.appendChild(canvas);
     element.appendChild($textArea);
 };

packages/core/src/Player/usecase/PlayerHitTestUseCase.ts

@@ -1,11 +1,10 @@
 import { $player } from "../../Player";
 import { stage } from "@next2d/display";
 import {
-    $devicePixelRatio,
     $hitContext,
-    $getMainElement,
     $hitObject,
-    $hitMatrix
+    $hitMatrix,
+    $getCanvas
 } from "../../CoreUtil";
 
 /**
@@ -18,34 +17,18 @@ let $currentCursor: string = "auto";
  * @description Playerの当たり判定
  *              Player hit test
  *
- * @param  {PointerEvent} event
- * @param  {HTMLCanvasElement} canvas
  * @return {void}
  * @method
  * @protected
  */
-export const execute = (event: PointerEvent, canvas: HTMLCanvasElement): void =>
+export const execute = (): void =>
 {
     if ($player.stopFlag) {
         return ;
     }
 
-    let x = window.scrollX;
-    let y = window.scrollY;
-
-    const div = $getMainElement();
-    if (div) {
-        const rect = div.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;
-    $hitObject.x = (event.pageX - x) / scale;
-    $hitObject.y = (event.pageY - y) / scale;
+    $hitObject.x = stage.pointer.x;
+    $hitObject.y = stage.pointer.y;
     $hitObject.pointer = "auto";
     $hitObject.hit = null;
 
@@ -64,6 +47,6 @@ export const execute = (event: PointerEvent, canvas: HTMLCanvasElement): void =>
     if ($player.mouseState === "up"
         && $currentCursor !== $hitObject.pointer
     ) {
-        canvas.style.cursor = $currentCursor = $hitObject.pointer;
+        $getCanvas().style.cursor = $currentCursor = $hitObject.pointer;
     }
 };

packages/core/src/Player/usecase/PlayerTickerUseCase.ts

@@ -1,7 +1,9 @@
 import { $player } from "../../Player";
 import { stage } from "@next2d/display";
+import { Event } from "@next2d/events";
 import { execute as playerRenderingPostMessageService } from "../service/PlayerRenderingPostMessageService";
 import { execute as playerRemoveCachePostMessageService } from "../service/PlayerRemoveCachePostMessageService";
+import { execute as playerHitTestUseCase } from "../usecase/PlayerHitTestUseCase";
 
 /**
  * @description Playerの定期処理
@@ -20,23 +22,29 @@ export const execute = (timestamp: number): void =>
 
     const time = timestamp - $player.startTime;
     if (time > $player.fps) {
+
         $player.startTime = timestamp - time % $player.fps;
 
         // 定期処理
         stage.$ticker();
 
+        // enter frame event
+        if (stage.hasEventListener(Event.ENTER_FRAME)) {
+            stage.dispatchEvent(new Event(Event.ENTER_FRAME));
+        }
+
+        // キャッシュを削除する
         if (stage.$remoceCacheKeys.length) {
             playerRemoveCachePostMessageService();
         }
 
+        // 描画情報をworkerに送る
         if (stage.changed) {
-            // 描画情報をworkerに送る
             playerRenderingPostMessageService();
-
-            // todo sound
         }
 
         // pointer check
+        playerHitTestUseCase();
     }
 
     // next frame

packages/webgl/src/Context/service/ContextRestoreService.ts

@@ -25,6 +25,4 @@ export const execute = (context: Context): void =>
     context.$matrix[7] = matrix[7];
 
     $poolFloat32Array9(matrix);
-
-    // todo mask
 };

packages/webgl/src/Context/service/ContextSaveService.ts

@@ -13,6 +13,4 @@ import { $getFloat32Array9 } from "../../WebGLUtil";
 export const execute = (context: Context): void =>
 {
     context.$stack.push($getFloat32Array9(...context.$matrix));
-
-    // todo mask
 };