@next2d/core 1.18.12 → 2.0.0

package/src/Player/usecase/PlayerReadyCompleteUseCase.js

@@ -0,0 +1,16 @@
+import { stage } from "@next2d/display";
+import { $player } from "../../Player";
+import { execute as playerRenderingPostMessageService } from "../service/PlayerRenderingPostMessageService";
+/**
+ * @description Playerの起動準備完了時のユースーケース
+ *              Use case when Player is ready to start
+ */
+export const execute = () => {
+    // stage complete
+    stage.ready = true;
+    // postMessage
+    playerRenderingPostMessageService();
+    stage.changed = false;
+    // run player
+    $player.play();
+};

package/src/Player/usecase/PlayerRegisterEventUseCase.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @description キーボードイベントを登録する
+ *              Register keyboard events
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: () => void;

package/src/Player/usecase/PlayerRegisterEventUseCase.js

@@ -0,0 +1,15 @@
+import { execute as playerKeyDownEventService } from "../service/PlayerKeyDownEventService";
+import { execute as playerKeyUpEventService } from "../service/PlayerKeyUpEventService";
+import { KeyboardEvent } from "@next2d/events";
+/**
+ * @description キーボードイベントを登録する
+ *              Register keyboard events
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    window.addEventListener(KeyboardEvent.KEY_DOWN, playerKeyDownEventService);
+    window.addEventListener(KeyboardEvent.KEY_UP, playerKeyUpEventService);
+};

package/src/Player/usecase/PlayerResizeEventUseCase.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @description 画面リサイズ時にcanvasのリサイズを行う
+ *              Resize the canvas when resizing the screen
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: () => void;

package/src/Player/usecase/PlayerResizeEventUseCase.js

@@ -0,0 +1,78 @@
+import { $player } from "../../Player";
+import { Event as ResizeEvent } from "@next2d/events";
+import { stage } from "@next2d/display";
+import { execute as playerResizePostMessageService } from "../service/PlayerResizePostMessageService";
+import { execute as canvasSetPositionService } from "../../Canvas/service/CanvasSetPositionService";
+import { $cacheStore } from "@next2d/cache";
+import { $PREFIX, $getMainElement, $devicePixelRatio, $renderMatrix } from "../../CoreUtil";
+/**
+ * @description 画面リサイズ時にcanvasのリサイズを行う
+ *              Resize the canvas when resizing the screen
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    const element = $getMainElement();
+    if (!element) {
+        return;
+    }
+    const parent = element.parentElement;
+    if (!parent) {
+        return;
+    }
+    const screenWidth = $player.fullScreen || parent.tagName === "BODY"
+        ? window.innerWidth
+        : parent.clientWidth;
+    const screenHeight = $player.fullScreen || parent.tagName === "BODY"
+        ? window.innerHeight
+        : parent.clientHeight;
+    const style = element.style;
+    style.width = `${screenWidth}px`;
+    style.height = `${screenHeight}px`;
+    if (!stage.stageWidth || !stage.stageHeight) {
+        return;
+    }
+    const scale = Math.min(screenWidth / stage.stageWidth, screenHeight / stage.stageHeight) * $devicePixelRatio;
+    const width = $player.fullScreen
+        ? window.innerWidth * $devicePixelRatio
+        : stage.stageWidth * scale | 0;
+    const height = $player.fullScreen
+        ? window.innerHeight * $devicePixelRatio
+        : stage.stageHeight * scale | 0;
+    // 同じサイズの場合は、ここれで終了
+    if (width === $player.screenWidth
+        && height === $player.screenHeight) {
+        return;
+    }
+    // update
+    $player.screenWidth = screenWidth;
+    $player.screenHeight = screenHeight;
+    stage.changed = true;
+    if (element.children.length > 1) {
+        element.children[1].dispatchEvent(new Event(`${$PREFIX}_blur`));
+    }
+    // set canvas position
+    canvasSetPositionService();
+    if (width === $player.rendererWidth
+        && height === $player.rendererHeight) {
+        return;
+    }
+    // update
+    stage.rendererScale = $player.rendererScale = scale;
+    stage.rendererWidth = $player.rendererWidth = width;
+    stage.rendererHeight = $player.rendererHeight = height;
+    // 描画用の matrix を更新
+    $renderMatrix[0] = $renderMatrix[3] = scale;
+    $renderMatrix[4] = ($player.rendererWidth - stage.stageWidth * scale) / 2;
+    $renderMatrix[5] = ($player.rendererHeight - stage.stageHeight * scale) / 2;
+    // cache clear
+    $cacheStore.reset();
+    // worker postMessage
+    playerResizePostMessageService();
+    // ステージのリサイズイベントを実行
+    if (stage.hasEventListener(ResizeEvent.RESIZE)) {
+        stage.dispatchEvent(new ResizeEvent(ResizeEvent.RESIZE));
+    }
+};

package/src/Player/usecase/PlayerResizeRegisterUseCase.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @description 画面リサイズのイベントを登録
+ *              Register screen resize event
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: () => void;

package/src/Player/usecase/PlayerResizeRegisterUseCase.js

@@ -0,0 +1,20 @@
+import { execute as playerResizeEventUseCase } from "./PlayerResizeEventUseCase";
+/**
+ * @type {number}
+ * @private
+ */
+let timerId = -1;
+/**
+ * @description 画面リサイズのイベントを登録
+ *              Register screen resize event
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    window.addEventListener("resize", () => {
+        cancelAnimationFrame(timerId);
+        timerId = requestAnimationFrame(playerResizeEventUseCase);
+    });
+};

package/src/Player/usecase/PlayerTickerUseCase.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @description Playerの定期処理
+ *              Regular processing of Player
+ *
+ * @param  {number} timestamp
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (timestamp: number) => void;

package/src/Player/usecase/PlayerTickerUseCase.js

@@ -0,0 +1,50 @@
+import { $player } from "../../Player";
+import { stage } from "@next2d/display";
+import { Event } from "@next2d/events";
+import { $cacheStore } from "@next2d/cache";
+import { execute as playerRenderingPostMessageService } from "../service/PlayerRenderingPostMessageService";
+import { execute as playerRemoveCachePostMessageService } from "../service/PlayerRemoveCachePostMessageService";
+/**
+ * @description Playerの定期処理
+ *              Regular processing of Player
+ *
+ * @param  {number} timestamp
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (timestamp) => {
+    if ($player.stopFlag) {
+        return;
+    }
+    // キャッシュ削除
+    if ($cacheStore.$removeIds.length) {
+        playerRemoveCachePostMessageService();
+    }
+    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));
+        }
+        // 描画情報を生成してworkerに送る
+        if (stage.changed) {
+            playerRenderingPostMessageService();
+        }
+        // タイマーにセットされたキャッシュを削除
+        if ($cacheStore.$removeCache) {
+            $cacheStore.removeTimerScheduledCache();
+            // キャッシュ削除
+            if ($cacheStore.$removeIds.length) {
+                playerRemoveCachePostMessageService();
+            }
+        }
+    }
+    // next frame
+    $player.timerId = requestAnimationFrame((timestamp) => {
+        execute(timestamp);
+    });
+};

package/src/Player.d.ts

@@ -0,0 +1,193 @@
+import type { IPlayerOptions } from "./interface/IPlayerOptions";
+/**
+ * @description Next2Dの描画、イベント、設定、コントロールの管理クラスです。
+ *              This class manages Next2D drawings, events, settings, and controls.
+ *
+ * @class
+ * @public
+ */
+declare class Player {
+    /**
+     * @description devicePixelRatioを含んだcanvasの描画領域の幅
+     *              The width of the drawing area of the canvas including devicePixelRatio
+     *
+     * @type {number}
+     * @default 0
+     * @private
+     */
+    rendererWidth: number;
+    /**
+     * @description devicePixelRatioを含んだcanvasの描画領域の高さ
+     *              The height of the drawing area of the canvas including devicePixelRatio
+     *
+     * @type {number}
+     * @default 0
+     * @private
+     */
+    rendererHeight: number;
+    /**
+     * @description メインのdiv elementの幅
+     *              Width of the main div element
+     *
+     * @type {number}
+     * @default 0
+     * @public
+     */
+    screenWidth: number;
+    /**
+     * @description メインのdiv elementの高さ
+     *              Height of the main div element
+     *
+     * @type {number}
+     * @default 0
+     * @public
+     */
+    screenHeight: number;
+    /**
+     * @description devicePixelRatioを含んだcanvasの描画領域の拡大率
+     *              The magnification of the drawing area of the canvas including devicePixelRatio
+     *
+     * @type {number}
+     * @default 1
+     * @private
+     */
+    rendererScale: number;
+    /**
+     * @description optionで指定された描画領域の固定幅、optionで指定されない場合は0
+     *              The fixed width of the drawing area specified by the option, 0 if not specified by the option
+     *
+     * @type {number}
+     * @default 0
+     * @public
+     */
+    fixedWidth: number;
+    /**
+     * @description optionで指定された描画領域の固定高さ、optionで指定されない場合は0
+     *              The fixed height of the drawing area specified by the option, 0 if not specified by the option
+     *
+     * @type {number}
+     * @default 0
+     * @public
+     */
+    fixedHeight: number;
+    /**
+     * @description Playerの停止フラグ
+     *              Player stop flag
+     *
+     * @type {boolean}
+     * @default true
+     * @private
+     */
+    stopFlag: boolean;
+    /**
+     * @description Playerの描画開始時間
+     *              Player drawing start time
+     *
+     * @type {number}
+     * @default 0
+     * @private
+     */
+    startTime: number;
+    /**
+     * @description PlayerのFPS
+     *              Player FPS
+     *
+     * @type {number}
+     * @default 16
+     * @private
+     */
+    fps: number;
+    /**
+     * @description optionで指定されたcanvasのID、optionで指定されない場合は空文字
+     *              The ID of the canvas specified by the option, an empty string if not specified by the option
+     *
+     * @type {string}
+     * @default ""
+     * @private
+     */
+    tagId: string;
+    /**
+     * @description フルスクリーンモードの設定
+     *              Full screen mode setting
+     *
+     * @type {boolean}
+     * @default false
+     * @private
+     */
+    private _$fullScreen;
+    /**
+     * @description Playerの描画処理関数のタイマーID
+     *              Timer ID of the drawing process function of Player
+     *
+     * @type {number}
+     * @default -1
+     * @private
+     */
+    timerId: number;
+    /**
+     * @description マウスの状態
+     *             Mouse state
+     *
+     * @type {"up" | "down"}
+     * @default "up"
+     * @public
+     */
+    mouseState: "up" | "down";
+    /**
+     * @constructor
+     * @public
+     */
+    constructor();
+    /**
+     * @description フルスクリーンモードの設定
+     *              Full screen mode setting
+     *
+     * @member {boolean}
+     * @default false
+     * @public
+     */
+    get fullScreen(): boolean;
+    set fullScreen(full_screen: boolean);
+    /**
+     * @description Playerの描画を開始します。
+     *              Start drawing Player.
+     *
+     * @return {void}
+     * @method
+     * @public
+     */
+    play(): void;
+    /**
+     * @description Playerの描画を停止します。
+     *              Stop drawing Player.
+     *
+     * @return {void}
+     * @method
+     * @public
+     */
+    stop(): void;
+    /**
+     * @description Playerの描画キャッシュを全て初期化
+     *              Initialize all drawing caches of Player
+     *
+     * @return {void}
+     * @method
+     * @public
+     */
+    cacheClear(): void;
+    /**
+     * @description Playerのオプション設定を変更
+     *              Change the Player option settings
+     *
+     * @param  {object} [options=null]
+     * @return {void}
+     * @public
+     */
+    setOptions(options?: IPlayerOptions | null): void;
+}
+/**
+ * @type {Player}
+ * @protected
+ */
+export declare const $player: Player;
+export {};