@next2d/core 1.18.12 → 2.0.1

package/src/CoreUtil.js

@@ -0,0 +1,165 @@
+/**
+ * @type {string}
+ * @const
+ */
+export const $PREFIX = "__next2d__";
+/**
+ * @type {number}
+ * @const
+ */
+export const $devicePixelRatio = Math.min(2, window.devicePixelRatio);
+/**
+ * @param  {number} value
+ * @param  {number} min
+ * @param  {number} max
+ * @param  {number} [default_value=null]
+ * @return {number}
+ * @method
+ * @static
+ */
+export const $clamp = (value, min, max, default_value = null) => {
+    const number = +value;
+    return isNaN(number) && default_value !== null
+        ? default_value
+        : Math.min(Math.max(min, isNaN(number) ? 0 : number), max);
+};
+const canvas = document.createElement("canvas");
+canvas.width = canvas.height = 1;
+/**
+ * @type {CanvasRenderingContext2D}
+ * @const
+ */
+export const $hitContext = canvas.getContext("2d");
+/**
+ * @type {HTMLDivElement}
+ * @private
+ */
+let $mainElement = null;
+/**
+ * @description メインのコンテナになるDivElementを設定します。
+ *              Set the DivElement to be the main container.
+ *
+ * @param  {HTMLDivElement} element
+ * @method
+ * @protected
+ */
+export const $setMainElement = (element) => {
+    $mainElement = element;
+};
+/**
+ * @type {HTMLCanvasElement | null}
+ * @private
+ */
+let $canvas = null;
+/**
+ * @description メインのCanvasになるCanvasElementを設定します。
+ *              Set the CanvasElement to be the main canvas.
+ *
+ * @param  {HTMLCanvasElement} element
+ * @method
+ * @protected
+ */
+export const $setCanvas = (element) => {
+    $canvas = element;
+};
+/**
+ * @description メインのCanvasになるCanvasElementを取得します。
+ *              Get the CanvasElement to be the main canvas.
+ *
+ * @return {HTMLCanvasElement}
+ * @method
+ * @protected
+ */
+export const $getCanvas = () => {
+    return $canvas;
+};
+/**
+ * @description メインのコンテナになるDivElementを取得します。
+ *             Get the DivElement to be the main container.
+ *
+ * @return {HTMLDivElement}
+ * @method
+ * @protected
+ */
+export const $getMainElement = () => {
+    return $mainElement;
+};
+/**
+ * @description 描画用のmatrix情報
+ *              Matrix information for drawing
+ *
+ * @type {Float32Array}
+ * @protected
+ */
+export const $renderMatrix = new Float32Array([1, 0, 0, 1, 0, 0]);
+/**
+ * @description マウス、タップ時の画面のmatrix情報
+ *              Screen matrix information when mouse or tap is pressed
+ *
+ * @type {Float32Array}
+ * @protected
+ */
+export const $hitMatrix = new Float32Array([1, 0, 0, 1, 0, 0]);
+/**
+ * @description マウス、タップがヒットしたDisplayObjectを取得します。
+ *              Get the DisplayObject that the mouse or tap hit.
+ *
+ * @type {IPlayerHitObject}
+ * @protected
+ */
+export const $hitObject = {
+    "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 = null;
+/**
+ * @description マウス、タップがヒットしたDisplayObjectを取得します。
+ *              Get the DisplayObject that the mouse or tap hit.
+ *
+ * @param  {IDisplayObject<any>} displayObject
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const $setRollOverDisplayObject = (displayObject) => {
+    $rollOverDisplayObject = displayObject;
+};
+/**
+ * @description マウス、タップがヒットしたDisplayObjectを取得します。
+ *              Get the DisplayObject that the mouse or tap hit.
+ *
+ * @return {IDisplayObject<any>}
+ * @method
+ * @protected
+ */
+export const $getRollOverDisplayObject = () => {
+    return $rollOverDisplayObject;
+};
+/**
+ * @description 指定された値を2の累乗に切り上げます。
+ *              Rounds the specified value up to a power of two.
+ *
+ * @param  {number} v
+ * @return {number}
+ * @method
+ * @protected
+ */
+export const $upperPowerOfTwo = (v) => {
+    v--;
+    v |= v >> 1;
+    v |= v >> 2;
+    v |= v >> 4;
+    v |= v >> 8;
+    v |= v >> 16;
+    v++;
+    return v;
+};

package/src/Display.d.ts

@@ -0,0 +1,3 @@
+import type { IDisplay } from "./interface/IDisplay";
+declare const display: IDisplay;
+export { display };

package/{dist → src}/Display.js

@@ -1,19 +1,17 @@
-import { DisplayObject, InteractiveObject, DisplayObjectContainer, Sprite, MovieClip, BitmapData, BlendMode, FrameLabel, Graphics, Loader, LoaderInfo, Shape, Stage, TextField } from "@next2d/display";
+import { Sprite, MovieClip, BitmapData, BlendMode, DisplayObject, DisplayObjectContainer, FrameLabel, Graphics, InteractiveObject, Loader, Shape, stage } from "@next2d/display";
 const display = {
-    DisplayObject,
-    InteractiveObject,
-    DisplayObjectContainer,
     Sprite,
     MovieClip,
     BitmapData,
     BlendMode,
+    DisplayObject,
+    DisplayObjectContainer,
     FrameLabel,
     Graphics,
+    InteractiveObject,
     Loader,
-    LoaderInfo,
     Shape,
-    Stage,
-    TextField
+    stage
 };
 Object.entries(display).forEach(([key, DisplayClass]) => {
     Object.defineProperty(display, key, {

package/src/Events.d.ts

@@ -0,0 +1,3 @@
+import type { IEvents } from "./interface/IEvents";
+declare const events: IEvents;
+export { events };

package/{dist → src}/Events.js

@@ -1,4 +1,4 @@
-import { Event, EventDispatcher, EventPhase, FocusEvent, HTTPStatusEvent, IOErrorEvent, MouseEvent, ProgressEvent, VideoEvent } from "@next2d/events";
+import { Event, EventDispatcher, EventPhase, FocusEvent, HTTPStatusEvent, IOErrorEvent, PointerEvent, JobEvent, ProgressEvent, VideoEvent } from "@next2d/events";
 const events = {
     Event,
     EventDispatcher,
@@ -6,7 +6,8 @@ const events = {
     FocusEvent,
     HTTPStatusEvent,
     IOErrorEvent,
-    MouseEvent,
+    PointerEvent,
+    JobEvent,
     ProgressEvent,
     VideoEvent
 };

package/src/Filters.d.ts

@@ -0,0 +1,3 @@
+import type { IFilters } from "./interface/IFilters";
+declare const filters: IFilters;
+export { filters };

package/src/Geom.d.ts

@@ -0,0 +1,3 @@
+import type { IGeom } from "./interface/IGeom";
+declare const geom: IGeom;
+export { geom };

package/{dist → src}/Geom.js

@@ -1,10 +1,9 @@
-import { ColorTransform, Matrix, Point, Rectangle, Transform } from "@next2d/geom";
+import { ColorTransform, Matrix, Point, Rectangle } from "@next2d/geom";
 const geom = {
     ColorTransform,
     Matrix,
     Point,
-    Rectangle,
-    Transform
+    Rectangle
 };
 Object.entries(geom).forEach(([key, GeomClass]) => {
     Object.defineProperty(geom, key, {

package/src/Media.d.ts

@@ -0,0 +1,3 @@
+import type { IMedia } from "./interface/IMedia";
+declare const media: IMedia;
+export { media };

package/src/Net.d.ts

@@ -0,0 +1,3 @@
+import type { INet } from "./interface/INet";
+declare const net: INet;
+export { net };

package/{dist → src}/Net.js

@@ -1,7 +1,6 @@
-import { URLRequest, URLRequestHeader } from "@next2d/net";
+import { URLRequest } from "@next2d/net";
 const net = {
-    URLRequest,
-    URLRequestHeader
+    URLRequest
 };
 Object.entries(net).forEach(([key, NetClass]) => {
     Object.defineProperty(net, key, {

package/src/Next2D/service/VideoSyncService.d.ts

@@ -0,0 +1,11 @@
+import type { DisplayObject } from "@next2d/display";
+/**
+ * @description DisplayObject の子要素に Video が含まれている場合、ロードが完了するまで待機します。
+ *              If the child element of DisplayObject contains Video, wait until the loading is complete.
+ *
+ * @param  {DisplayObject} display_object
+ * @return {Promise<void>}
+ * @method
+ * @protected
+ */
+export declare const execute: <D extends DisplayObject>(display_object: D) => Promise<void>;

package/src/Next2D/service/VideoSyncService.js

@@ -0,0 +1,50 @@
+/**
+ * @description DisplayObject の子要素に Video が含まれている場合、ロードが完了するまで待機します。
+ *              If the child element of DisplayObject contains Video, wait until the loading is complete.
+ *
+ * @param  {DisplayObject} display_object
+ * @return {Promise<void>}
+ * @method
+ * @protected
+ */
+export const execute = async (display_object) => {
+    switch (true) {
+        case display_object.isVideo:
+            break;
+        case display_object.isContainerEnabled:
+            {
+                const children = display_object.children;
+                for (let idx = 0; idx < children.length; ++idx) {
+                    const displayObject = children[idx];
+                    if (!displayObject) {
+                        continue;
+                    }
+                    if (displayObject.isVideo) {
+                        const muted = displayObject.muted;
+                        displayObject.muted = true;
+                        await displayObject.play();
+                        displayObject.pause();
+                        displayObject.muted = muted;
+                        await new Promise((resolve) => {
+                            const wait = async () => {
+                                if (displayObject.loaded) {
+                                    displayObject.seek(0);
+                                    resolve();
+                                }
+                                else {
+                                    requestAnimationFrame(wait);
+                                }
+                            };
+                            requestAnimationFrame(wait);
+                        });
+                    }
+                    if (displayObject.isContainerEnabled) {
+                        await execute(displayObject);
+                    }
+                }
+            }
+            break;
+        default:
+            break;
+    }
+};

package/src/Next2D/usecase/CaptureToCanvasUseCase.d.ts

@@ -0,0 +1,12 @@
+import type { DisplayObject } from "@next2d/display";
+import type { ICaptureOptions } from "../../interface/ICaptureOptions";
+/**
+ * @description 指定した DisplayObject を Canvas に描画する
+ *              Draw the specified DisplayObject in Canvas
+ *
+ * @param  {D} display_object
+ * @param  {ICaptureOptions} [opstions=null]
+ * @method
+ * @protected
+ */
+export declare const execute: <D extends DisplayObject>(display_object: D, opstions?: ICaptureOptions | null) => Promise<HTMLCanvasElement>;

package/src/Next2D/usecase/CaptureToCanvasUseCase.js

@@ -0,0 +1,92 @@
+import { stage } from "@next2d/display";
+import { $cacheStore } from "@next2d/cache";
+import { $player } from "../../Player";
+import { $devicePixelRatio } from "../../CoreUtil";
+import { execute as playerResizePostMessageService } from "../../Player/service/PlayerResizePostMessageService";
+import { execute as playerTransferCanvasPostMessageService } from "../../Player/service/PlayerTransferCanvasPostMessageService";
+import { execute as videoSyncService } from "../service/VideoSyncService";
+import { Matrix, ColorTransform } from "@next2d/geom";
+/**
+ * @type {Float32Array}
+ * @private
+ */
+const $MATRIX_ARRAY_IDENTITY = new Float32Array([1, 0, 0, 1, 0, 0]);
+/**
+ * @type {Float32Array}
+ * @private
+ */
+const $COLOR_ARRAY_IDENTITY = new Float32Array([1, 1, 1, 1, 0, 0, 0, 0]);
+/**
+ * @description 指定した DisplayObject を Canvas に描画する
+ *              Draw the specified DisplayObject in Canvas
+ *
+ * @param  {D} display_object
+ * @param  {ICaptureOptions} [opstions=null]
+ * @method
+ * @protected
+ */
+export const execute = async (display_object, opstions = null) => {
+    if (opstions && opstions.videoSync) {
+        await videoSyncService(display_object);
+    }
+    const tColorTransform = opstions && opstions.colorTransform
+        ? opstions.colorTransform.rawData
+        : $COLOR_ARRAY_IDENTITY;
+    const rectangle = display_object.getBounds();
+    const translateMatrix = new Float32Array([
+        1, 0, 0, 1, -rectangle.x, -rectangle.y
+    ]);
+    const tMatrix = opstions && opstions.matrix
+        ? Matrix.multiply(opstions.matrix.rawData, translateMatrix)
+        : Matrix.multiply($MATRIX_ARRAY_IDENTITY, translateMatrix);
+    const transferredCanvas = opstions && opstions.canvas
+        ? opstions.canvas
+        : $cacheStore.getCanvas();
+    const xScale = Math.sqrt(tMatrix[0] * tMatrix[0] + tMatrix[1] * tMatrix[1]);
+    const yScale = Math.sqrt(tMatrix[2] * tMatrix[2] + tMatrix[3] * tMatrix[3]);
+    const width = Math.ceil(display_object.width * xScale);
+    const height = Math.ceil(display_object.height * yScale);
+    if (width <= 0 || height <= 0) {
+        return transferredCanvas;
+    }
+    // resize canvas
+    transferredCanvas.width = width;
+    transferredCanvas.height = height;
+    const stopFlag = $player.stopFlag;
+    if (!stopFlag) {
+        $player.stop();
+    }
+    // resize
+    let isResize = false;
+    const cacheWidth = $player.rendererWidth;
+    const cacheHeight = $player.rendererHeight;
+    const cacheScale = $player.rendererScale;
+    if (width > cacheWidth || height > cacheHeight) {
+        isResize = true;
+        const scale = Math.min(width / stage.stageWidth, height / stage.stageHeight) * $devicePixelRatio;
+        // update
+        stage.rendererScale = $player.rendererScale = scale;
+        stage.rendererWidth = $player.rendererWidth = width;
+        stage.rendererHeight = $player.rendererHeight = height;
+        // workerにリサイズを通知
+        playerResizePostMessageService(false);
+    }
+    // draw
+    await playerTransferCanvasPostMessageService(display_object, tMatrix, tColorTransform, transferredCanvas);
+    // restore
+    if (isResize) {
+        stage.rendererScale = $player.rendererScale = cacheScale;
+        stage.rendererWidth = $player.rendererWidth = cacheWidth;
+        stage.rendererHeight = $player.rendererHeight = cacheHeight;
+        // workerにリサイズを通知
+        playerResizePostMessageService(false);
+    }
+    if (!stopFlag) {
+        $player.play();
+    }
+    Matrix.release(tMatrix);
+    if (opstions && opstions.colorTransform) {
+        ColorTransform.release(tColorTransform);
+    }
+    return transferredCanvas;
+};

package/src/Next2D/usecase/CreateRootMovieClipUseCase.d.ts

@@ -0,0 +1,15 @@
+import type { IPlayerOptions } from "../../interface/IPlayerOptions";
+import { Sprite } from "@next2d/display";
+/**
+ * @description RootのMovieClipを作成します。
+ *              Create a MovieClip for Root.
+ *
+ * @param  {number} [width=240]
+ * @param  {number} [height=240]
+ * @param  {number} [fps=60]
+ * @param  {object} [options=null]
+ * @return {Sprite}
+ * @method
+ * @protected
+ */
+export declare const execute: (width?: number, height?: number, fps?: number, options?: IPlayerOptions | null) => Sprite;

package/src/Next2D/usecase/CreateRootMovieClipUseCase.js

@@ -0,0 +1,46 @@
+import { $clamp } from "../../CoreUtil";
+import { execute as playerRemoveLoadingElementService } from "../../Player/service/PlayerRemoveLoadingElementService";
+import { execute as playerAppendElementService } from "../../Player/service/PlayerAppendElementService";
+import { execute as playerReadyCompleteUseCase } from "../../Player/usecase/PlayerReadyCompleteUseCase";
+import { execute as playerBootUseCase } from "../../Player/usecase/PlayerBootUseCase";
+import { execute as canvasSetPositionService } from "../../Canvas/service/CanvasSetPositionService";
+import { Sprite, stage } from "@next2d/display";
+/**
+ * @type {boolean}
+ * @private
+ */
+let $boot = false;
+/**
+ * @description RootのMovieClipを作成します。
+ *              Create a MovieClip for Root.
+ *
+ * @param  {number} [width=240]
+ * @param  {number} [height=240]
+ * @param  {number} [fps=60]
+ * @param  {object} [options=null]
+ * @return {Sprite}
+ * @method
+ * @protected
+ */
+export const execute = (width = 240, height = 240, fps = 60, options = null) => {
+    if ($boot) {
+        return stage.getChildAt(0);
+    }
+    $boot = true;
+    // setup
+    stage.stageWidth = width | 0;
+    stage.stageHeight = height | 0;
+    stage.frameRate = $clamp(fps, 1, 60, 60);
+    // boot player
+    playerBootUseCase(options);
+    const root = stage.addChild(new Sprite());
+    // ready complete
+    playerReadyCompleteUseCase();
+    // remove loading
+    playerRemoveLoadingElementService();
+    // append canvas
+    playerAppendElementService();
+    // set position
+    canvasSetPositionService();
+    return root;
+};

package/src/Next2D/usecase/LoadUseCase.d.ts

@@ -0,0 +1,12 @@
+import type { IPlayerOptions } from "../../interface/IPlayerOptions";
+/**
+ * @description 指定のURLからJSONファイルを読み込みます。
+ *              Reads a JSON file from the specified URL.
+ *
+ * @param  {string} url
+ * @param  {object} [options=null]
+ * @return {Promise}
+ * @method
+ * @protected
+ */
+export declare const execute: (url: string, options?: IPlayerOptions | null) => Promise<void>;

package/src/Next2D/usecase/LoadUseCase.js

@@ -0,0 +1,66 @@
+import { $clamp } from "../../CoreUtil";
+import { URLRequest } from "@next2d/net";
+import { IOErrorEvent } from "@next2d/events";
+import { execute as playerResizeEventUseCase } from "../../Player/usecase/PlayerResizeEventUseCase";
+import { execute as playerRemoveLoadingElementService } from "../../Player/service/PlayerRemoveLoadingElementService";
+import { execute as playerAppendCanvasElementService } from "../../Player/service/PlayerAppendElementService";
+import { execute as playerReadyCompleteUseCase } from "../../Player/usecase/PlayerReadyCompleteUseCase";
+import { execute as playerBootUseCase } from "../../Player/usecase/PlayerBootUseCase";
+import { execute as canvasSetPositionService } from "../../Canvas/service/CanvasSetPositionService";
+import { Loader, stage } from "@next2d/display";
+/**
+ * @description 指定のURLからJSONファイルを読み込みます。
+ *              Reads a JSON file from the specified URL.
+ *
+ * @param  {string} url
+ * @param  {object} [options=null]
+ * @return {Promise}
+ * @method
+ * @protected
+ */
+export const execute = async (url, options = null) => {
+    if (url === "develop") {
+        const path = location
+            .search
+            .slice(1)
+            .split("&")[0];
+        if (!path) {
+            return;
+        }
+        url = `${location.origin}/${path}`;
+    }
+    if (!url) {
+        return;
+    }
+    if (url.charAt(1) === "/") {
+        url = url.slice(1);
+    }
+    // player
+    playerBootUseCase(options);
+    const loader = new Loader();
+    const loaderInfo = loader.contentLoaderInfo;
+    loaderInfo.addEventListener(IOErrorEvent.IO_ERROR, (event) => {
+        alert("Error: " + event.text);
+    });
+    await loader.load(new URLRequest(url));
+    if (!loaderInfo.data) {
+        return;
+    }
+    // update properties
+    const stageData = loaderInfo.data.stage;
+    stage.stageWidth = stageData.width;
+    stage.stageHeight = stageData.height;
+    stage.frameRate = $clamp(stageData.fps, 1, 60, 60);
+    stage.backgroundColor = options && options.bgColor ? options.bgColor : stageData.bgColor;
+    stage.addChild(loaderInfo.content);
+    // resize
+    playerResizeEventUseCase();
+    // // ready complete
+    playerReadyCompleteUseCase();
+    // // remove loading
+    playerRemoveLoadingElementService();
+    // // append canvas
+    playerAppendCanvasElementService();
+    // // set position
+    canvasSetPositionService();
+};