@next2d/core 1.18.12 → 2.0.1

package/src/Player/service/PlayerPointerMoveEventService.d.ts

@@ -0,0 +1,10 @@
+import type { DisplayObject } from "@next2d/display";
+/**
+ * @description ポインタームーブイベントを処理します。
+ *              Processes the pointer move event.
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: <D extends DisplayObject>() => void;

package/src/Player/service/PlayerPointerMoveEventService.js

@@ -0,0 +1,86 @@
+import { stage } from "@next2d/display";
+import { $getSelectedTextField } from "@next2d/text";
+import { PointerEvent } from "@next2d/events";
+import { $player } from "../../Player";
+import { $hitObject, $hitMatrix, $setRollOverDisplayObject, $getRollOverDisplayObject, $clamp } from "../../CoreUtil";
+/**
+ * @description ポインタームーブイベントを処理します。
+ *              Processes the pointer move event.
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    const dropTarget = stage.dropTarget;
+    if (dropTarget) {
+        const point = dropTarget.parent
+            ? dropTarget.parent.globalToLocal(stage.pointer)
+            : dropTarget.globalToLocal(stage.pointer);
+        let dragX = 0;
+        let dragY = 0;
+        if (!dropTarget.$lockCenter) {
+            dragX = point.x + dropTarget.$offsetX;
+            dragY = point.y + dropTarget.$offsetY;
+        }
+        else {
+            dragX = point.x - dropTarget.width / 2;
+            dragY = point.y - dropTarget.height / 2;
+        }
+        const bounds = dropTarget.$boundedRect;
+        if (bounds) {
+            dragX = $clamp(dragX, bounds.left, bounds.right);
+            dragY = $clamp(dragY, bounds.top, bounds.bottom);
+        }
+        // set move xy
+        dropTarget.x = dragX;
+        dropTarget.y = dragY;
+    }
+    // text field
+    const selectedTextField = $getSelectedTextField();
+    if (selectedTextField && $player.mouseState === "down") {
+        selectedTextField.setFocusIndex($hitObject.x - $hitMatrix[4], $hitObject.y - $hitMatrix[5], true);
+        return;
+    }
+    const rollOverDisplayObject = $getRollOverDisplayObject();
+    const displayObject = $hitObject.hit;
+    if (displayObject) {
+        // pointerMove
+        if (displayObject.willTrigger(PointerEvent.POINTER_MOVE)) {
+            displayObject.dispatchEvent(new PointerEvent(PointerEvent.POINTER_MOVE));
+        }
+        // rollOut and rollOver
+        if (rollOverDisplayObject) {
+            if (rollOverDisplayObject.instanceId !== displayObject.instanceId) {
+                // rollOut
+                if (rollOverDisplayObject.willTrigger(PointerEvent.POINTER_OUT)) {
+                    rollOverDisplayObject.dispatchEvent(new PointerEvent(PointerEvent.POINTER_OUT));
+                }
+                // rollOver
+                if (displayObject.willTrigger(PointerEvent.POINTER_OVER)) {
+                    displayObject.dispatchEvent(new PointerEvent(PointerEvent.POINTER_OVER));
+                }
+            }
+        }
+        else {
+            // rollOver
+            if (displayObject.willTrigger(PointerEvent.POINTER_OVER)) {
+                displayObject.dispatchEvent(new PointerEvent(PointerEvent.POINTER_OVER));
+            }
+        }
+        // set rollOver DisplayObject
+        $setRollOverDisplayObject(displayObject);
+    }
+    else {
+        // rollOut
+        if (rollOverDisplayObject) {
+            if (rollOverDisplayObject.willTrigger(PointerEvent.POINTER_OUT)) {
+                rollOverDisplayObject.dispatchEvent(new PointerEvent(PointerEvent.POINTER_OUT));
+            }
+            $setRollOverDisplayObject(null);
+        }
+        if (stage.hasEventListener(PointerEvent.POINTER_MOVE)) {
+            stage.dispatchEvent(new PointerEvent(PointerEvent.POINTER_MOVE));
+        }
+    }
+};

package/src/Player/service/PlayerPointerUpEventService.d.ts

@@ -0,0 +1,10 @@
+import type { DisplayObject } from "@next2d/display";
+/**
+ * @description ポインターアップイベントを処理します。
+ *              Processes the pointer up event.
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: <D extends DisplayObject>() => void;

package/src/Player/service/PlayerPointerUpEventService.js

@@ -0,0 +1,35 @@
+import { stage } from "@next2d/display";
+import { PointerEvent } from "@next2d/events";
+import { $hitObject } from "../../CoreUtil";
+/**
+ * @description ポインターアップイベントを処理します。
+ *              Processes the pointer up event.
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    const dropTarget = stage.dropTarget;
+    const displayObject = $hitObject.hit;
+    if (displayObject) {
+        if (displayObject.willTrigger(PointerEvent.POINTER_UP)) {
+            displayObject.dispatchEvent(new PointerEvent(PointerEvent.POINTER_UP));
+        }
+        if (dropTarget
+            && dropTarget.instanceId !== displayObject.instanceId
+            && dropTarget.willTrigger(PointerEvent.POINTER_UP)) {
+            dropTarget.dispatchEvent(new PointerEvent(PointerEvent.POINTER_UP));
+        }
+    }
+    else {
+        if (dropTarget && dropTarget.willTrigger(PointerEvent.POINTER_UP)) {
+            dropTarget.dispatchEvent(new PointerEvent(PointerEvent.POINTER_UP));
+        }
+        else {
+            if (stage.willTrigger(PointerEvent.POINTER_UP)) {
+                stage.dispatchEvent(new PointerEvent(PointerEvent.POINTER_UP));
+            }
+        }
+    }
+};

package/src/Player/service/PlayerRemoveCachePostMessageService.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @description worker側のキャッシュキーを削除する
+ *              Remove the cache key on the worker side
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: () => void;

package/src/Player/service/PlayerRemoveCachePostMessageService.js

@@ -0,0 +1,37 @@
+import { $cacheStore } from "@next2d/cache";
+import { $rendererWorker } from "../../RendererWorker";
+/**
+ * @description リサイズメッセージ
+ *              Resize message
+ *
+ * @type {object}
+ * @private
+ */
+const message = {
+    "command": "removeCache",
+    "buffer": null
+};
+/**
+ * @description Transferableオブジェクト
+ *              Transferable object
+ *
+ * @type {Transferable[]}
+ * @private
+ */
+const options = [];
+/**
+ * @description worker側のキャッシュキーを削除する
+ *              Remove the cache key on the worker side
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    const buffer = new Float32Array($cacheStore.$removeIds);
+    $cacheStore.$removeIds.length = 0;
+    message.buffer = buffer;
+    options[0] = buffer.buffer;
+    // postMessage
+    $rendererWorker.postMessage(message, options);
+};

package/src/Player/service/PlayerRemoveLoadingElementService.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @description ローディングのelementを削除
+ *              Remove the loading element
+ *
+ * @return {void}
+ * @method
+ * @public
+ */
+export declare const execute: () => void;

package/src/Player/service/PlayerRemoveLoadingElementService.js

@@ -0,0 +1,18 @@
+import { $getMainElement } from "../../CoreUtil";
+/**
+ * @description ローディングのelementを削除
+ *              Remove the loading element
+ *
+ * @return {void}
+ * @method
+ * @public
+ */
+export const execute = () => {
+    const element = $getMainElement();
+    if (!element) {
+        return;
+    }
+    while (element.firstChild) {
+        element.removeChild(element.firstChild);
+    }
+};

package/src/Player/service/PlayerRenderingPostMessageService.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @type {Float32Array}
+ * @private
+ */
+export declare const $COLOR_ARRAY_IDENTITY: Float32Array;
+/**
+ * @description レンダリングデータを生成してworkerに送る
+ *              Generate rendering data and send it to the worker
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: () => void;

package/src/Player/service/PlayerRenderingPostMessageService.js

@@ -0,0 +1,74 @@
+import { $rendererWorker } from "../../RendererWorker";
+import { stage } from "@next2d/display";
+import { renderQueue } from "@next2d/render-queue";
+import { $renderMatrix } from "../../CoreUtil";
+/**
+ * @type {Float32Array}
+ * @private
+ */
+export const $COLOR_ARRAY_IDENTITY = new Float32Array([1, 1, 1, 1, 0, 0, 0, 0]);
+/**
+ * @type {ImageBitmap[]}
+ * @private
+ */
+const $imageBitmaps = [];
+/**
+ * @description レンダリングメッセージ
+ *              Rendering message
+ *
+ * @type {object}
+ * @private
+ */
+const $message = {
+    "command": "render",
+    "buffer": null,
+    "length": 0,
+    "imageBitmaps": null
+};
+/**
+ * @description Transferableオブジェクト
+ *              Transferable object
+ *
+ * @type {Transferable[]}
+ * @private
+ */
+const $options = [];
+// 受け取りイベントを登録
+$rendererWorker.addEventListener("message", (event) => {
+    if (event.data.message !== "render") {
+        return;
+    }
+    const buffer = event.data.buffer;
+    if (renderQueue.buffer.length > buffer.length) {
+        return;
+    }
+    renderQueue.buffer = buffer;
+});
+/**
+ * @description レンダリングデータを生成してworkerに送る
+ *              Generate rendering data and send it to the worker
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    renderQueue.offset = 0;
+    $options.length = 0;
+    $imageBitmaps.length = 0;
+    stage.$generateRenderQueue(stage, $imageBitmaps, $renderMatrix, $COLOR_ARRAY_IDENTITY);
+    if (!renderQueue.offset) {
+        return;
+    }
+    // update buffer
+    $message.buffer = renderQueue.buffer;
+    $message.length = renderQueue.offset;
+    $options.push(renderQueue.buffer.buffer);
+    // postMessage
+    $message.imageBitmaps = null;
+    if ($imageBitmaps.length) {
+        $message.imageBitmaps = $imageBitmaps;
+        $options.push(...$imageBitmaps);
+    }
+    $rendererWorker.postMessage($message, $options);
+};

package/src/Player/service/PlayerResizePostMessageService.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @description 画面リサイズ情報をworkerに送る
+ *              Send screen resize information to worker
+ *
+ * @param  {boolean} [cache_clear=true]
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (cache_clear?: boolean) => void;

package/src/Player/service/PlayerResizePostMessageService.js

@@ -0,0 +1,40 @@
+import { $player } from "../../Player";
+import { $rendererWorker } from "../../RendererWorker";
+/**
+ * @description リサイズメッセージ
+ *              Resize message
+ *
+ * @type {object}
+ * @private
+ */
+const message = {
+    "command": "resize",
+    "buffer": null
+};
+/**
+ * @description Transferableオブジェクト
+ *              Transferable object
+ *
+ * @type {Transferable[]}
+ * @private
+ */
+const options = [];
+/**
+ * @description 画面リサイズ情報をworkerに送る
+ *              Send screen resize information to worker
+ *
+ * @param  {boolean} [cache_clear=true]
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (cache_clear = true) => {
+    // postMessage
+    message.buffer = new Float32Array([
+        $player.rendererWidth,
+        $player.rendererHeight,
+        cache_clear ? 1 : 0
+    ]);
+    options[0] = message.buffer.buffer;
+    $rendererWorker.postMessage(message, options);
+};

package/src/Player/service/PlayerSetCurrentMousePointService.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @description 現在のマウスの位置を取得します。
+ *              Get the current mouse position.
+ *
+ * @param  {PointerEvent} event
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (event: PointerEvent) => void;

package/src/Player/service/PlayerSetCurrentMousePointService.js

@@ -0,0 +1,33 @@
+import { $player } from "../../Player";
+import { stage } from "@next2d/display";
+import { $getMainElement, $devicePixelRatio } from "../../CoreUtil";
+/**
+ * @description 現在のマウスの位置を取得します。
+ *              Get the current mouse position.
+ *
+ * @param  {PointerEvent} event
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (event) => {
+    let x = window.scrollX;
+    let y = window.scrollY;
+    const div = $getMainElement();
+    if (div) {
+        const rect = div.getBoundingClientRect();
+        x += rect.left;
+        y += rect.top;
+    }
+    const canvas = event.target;
+    if (canvas) {
+        const rect = canvas.getBoundingClientRect();
+        x += rect.left;
+        y += rect.top;
+    }
+    const tx = ($player.rendererWidth - stage.stageWidth * $player.rendererScale) / 2;
+    const ty = ($player.rendererHeight - stage.stageHeight * $player.rendererScale) / 2;
+    const scale = $player.rendererScale / $devicePixelRatio;
+    stage.pointer.x = (event.pageX - x) / scale - tx / $player.rendererScale;
+    stage.pointer.y = (event.pageY - y) / scale - ty / $player.rendererScale;
+};

package/src/Player/service/PlayerStopService.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @description Playerの定期処理を停止
+ *              Stop the regular processing of the Player
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: () => void;

package/src/Player/service/PlayerStopService.js

@@ -0,0 +1,18 @@
+import { $player } from "../../Player";
+import { SoundMixer } from "@next2d/media";
+/**
+ * @description Playerの定期処理を停止
+ *              Stop the regular processing of the Player
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    if ($player.timerId > -1) {
+        cancelAnimationFrame($player.timerId);
+    }
+    $player.stopFlag = true;
+    $player.timerId = -1;
+    SoundMixer.stopAll();
+};

package/src/Player/service/PlayerTransferCanvasPostMessageService.d.ts

@@ -0,0 +1,13 @@
+import type { DisplayObject } from "@next2d/display";
+/**
+ * @description レンダリングデータを生成してworkerに送る
+ *              Generate rendering data and send it to the worker
+ *
+ * @param  {D} display_object
+ * @param  {Float32Array} matrix
+ * @param  {Float32Array} color_transform
+ * @return {Promise<HTMLCanvasElement>}
+ * @method
+ * @protected
+ */
+export declare const execute: <D extends DisplayObject>(display_object: D, matrix: Float32Array, color_transform: Float32Array, transferred_canvas: HTMLCanvasElement) => Promise<HTMLCanvasElement>;

package/src/Player/service/PlayerTransferCanvasPostMessageService.js

@@ -0,0 +1,80 @@
+import { stage } from "@next2d/display";
+import { renderQueue } from "@next2d/render-queue";
+import { $rendererWorker } from "../../RendererWorker";
+/**
+ * @description キャプチャーメッセージ
+ *              Capture message
+ *
+ * @type {object}
+ * @private
+ */
+const $message = {
+    "command": "capture",
+    "buffer": null,
+    "width": 0,
+    "height": 0,
+    "length": 0,
+    "imageBitmaps": null
+};
+/**
+ * @description Transferableオブジェクト
+ *              Transferable object
+ *
+ * @type {Transferable[]}
+ * @private
+ */
+const $options = [];
+/**
+ * @type {ImageBitmap[]}
+ * @private
+ */
+const $imageBitmaps = [];
+/**
+ * @description レンダリングデータを生成してworkerに送る
+ *              Generate rendering data and send it to the worker
+ *
+ * @param  {D} display_object
+ * @param  {Float32Array} matrix
+ * @param  {Float32Array} color_transform
+ * @return {Promise<HTMLCanvasElement>}
+ * @method
+ * @protected
+ */
+export const execute = async (display_object, matrix, color_transform, transferred_canvas) => {
+    return await new Promise((resolve) => {
+        renderQueue.offset = 0;
+        $options.length = 0;
+        $imageBitmaps.length = 0;
+        stage.$generateRenderQueue(display_object, $imageBitmaps, matrix, color_transform);
+        if (!renderQueue.offset) {
+            return resolve(transferred_canvas);
+        }
+        // update buffer
+        $message.buffer = renderQueue.buffer;
+        $message.width = transferred_canvas.width;
+        $message.height = transferred_canvas.height;
+        $message.length = renderQueue.offset;
+        $options.push(renderQueue.buffer.buffer);
+        // postMessage
+        $message.imageBitmaps = null;
+        if ($imageBitmaps.length) {
+            $message.imageBitmaps = $imageBitmaps;
+            $options.push(...$imageBitmaps);
+        }
+        const drawCanvas = (event) => {
+            if (event.data.message !== "capture") {
+                return;
+            }
+            const buffer = event.data.buffer;
+            if (renderQueue.buffer.length < buffer.length) {
+                renderQueue.buffer = buffer;
+            }
+            const context = transferred_canvas.getContext("2d");
+            context.drawImage(event.data.imageBitmap, 0, 0);
+            $rendererWorker.removeEventListener("message", drawCanvas);
+            return resolve(transferred_canvas);
+        };
+        $rendererWorker.addEventListener("message", drawCanvas);
+        $rendererWorker.postMessage($message, $options);
+    });
+};

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

@@ -0,0 +1,11 @@
+import type { IPlayerOptions } from "../../interface/IPlayerOptions";
+/**
+ * @description Playerの初期起動処理
+ *              Initial startup processing of Player
+ *
+ * @param  {IPlayerOptions} [options=null]
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (options?: IPlayerOptions | null) => void;

package/src/Player/usecase/PlayerBootUseCase.js

@@ -0,0 +1,30 @@
+import { $player } from "../../Player";
+import { execute as playerCreateContainerElementService } from "../service/PlayerCreateContainerElementService";
+import { execute as playerApplyContainerElementStyleService } from "../service/PlayerApplyContainerElementStyleService";
+import { execute as playerLoadingAnimationService } from "../service/PlayerLoadingAnimationService";
+import { execute as playerResizeEventService } from "./PlayerResizeEventUseCase";
+import { execute as playerResizeRegisterService } from "./PlayerResizeRegisterUseCase";
+/**
+ * @description Playerの初期起動処理
+ *              Initial startup processing of Player
+ *
+ * @param  {IPlayerOptions} [options=null]
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (options = null) => {
+    $player.setOptions(options);
+    // create element
+    const element = playerCreateContainerElementService();
+    // apply base style
+    playerApplyContainerElementStyleService(element, $player.fixedWidth, $player.fixedHeight);
+    // start loading
+    playerLoadingAnimationService(element);
+    // register resize event
+    if (!$player.fixedWidth && !$player.fixedHeight) {
+        playerResizeRegisterService();
+    }
+    // initialize resize
+    playerResizeEventService();
+};

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

@@ -0,0 +1,9 @@
+/**
+ * @description Playerの当たり判定
+ *              Player hit test
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: () => void;

package/src/Player/usecase/PlayerHitTestUseCase.js

@@ -0,0 +1,35 @@
+import { $player } from "../../Player";
+import { stage } from "@next2d/display";
+import { $hitContext, $hitObject, $hitMatrix, $getCanvas } from "../../CoreUtil";
+/**
+ * @type {string}
+ * @private
+ */
+let $currentCursor = "auto";
+/**
+ * @description Playerの当たり判定
+ *              Player hit test
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    if ($player.stopFlag) {
+        return;
+    }
+    $hitObject.x = stage.pointer.x;
+    $hitObject.y = stage.pointer.y;
+    $hitObject.pointer = "auto";
+    $hitObject.hit = null;
+    // reset
+    $hitContext.beginPath();
+    $hitContext.setTransform(1, 0, 0, 1, 0, 0);
+    // ヒット判定
+    stage.$mouseHit($hitContext, $hitMatrix, $hitObject);
+    // カーソルの表示を更新
+    if ($player.mouseState === "up"
+        && $currentCursor !== $hitObject.pointer) {
+        $getCanvas().style.cursor = $currentCursor = $hitObject.pointer;
+    }
+};

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

@@ -0,0 +1,9 @@
+/**
+ * @description Playerの再生を開始
+ *              Start playing the Player
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: () => void;

package/src/Player/usecase/PlayerPlayUseCase.js

@@ -0,0 +1,26 @@
+import { $player } from "../../Player";
+import { stage } from "@next2d/display";
+import { execute as playerTickerUseCase } from "./PlayerTickerUseCase";
+/**
+ * @description Playerの再生を開始
+ *              Start playing the Player
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    if (!$player.stopFlag) {
+        return;
+    }
+    $player.stopFlag = false;
+    stage.changed = true;
+    if ($player.timerId > -1) {
+        cancelAnimationFrame($player.timerId);
+    }
+    $player.fps = 1000 / stage.frameRate | 0;
+    $player.startTime = performance.now();
+    $player.timerId = requestAnimationFrame((timestamp) => {
+        playerTickerUseCase(timestamp);
+    });
+};

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

@@ -0,0 +1,5 @@
+/**
+ * @description Playerの起動準備完了時のユースーケース
+ *              Use case when Player is ready to start
+ */
+export declare const execute: () => void;