@next2d/core 1.18.12 → 2.0.0

package/src/Next2D.d.ts

@@ -0,0 +1,138 @@
+import type { IDisplay } from "./interface/IDisplay";
+import type { IEvents } from "./interface/IEvents";
+import type { IFilters } from "./interface/IFilters";
+import type { IGeom } from "./interface/IGeom";
+import type { IMedia } from "./interface/IMedia";
+import type { INet } from "./interface/INet";
+import type { IText } from "./interface/IText";
+import type { IUI } from "./interface/IUI";
+import type { ICaptureOptions } from "./interface/ICaptureOptions";
+import type { IPlayerOptions } from "./interface/IPlayerOptions";
+import type { Sprite, DisplayObject } from "@next2d/display";
+/**
+ * @description Next2Dの起動管理クラス
+ *              Boot management class of Next2D
+ *
+ * @class
+ * @public
+ */
+export declare class Next2D {
+    /**
+     * @description Displayパッケージ
+     *              Display package
+     *
+     * @type {IDisplay}
+     * @public
+     */
+    readonly display: IDisplay;
+    /**
+     * @description Eventsパッケージ
+     *              Events package
+     *
+     * @type {IEvents}
+     * @public
+     */
+    readonly events: IEvents;
+    /**
+     * @description Filtersパッケージ
+     *              Filters package
+     *
+     * @type {IFilters}
+     * @public
+     */
+    readonly filters: IFilters;
+    /**
+     * @description Geomパッケージ
+     *              Geom package
+     *
+     * @type {IGeom}
+     * @public
+     */
+    readonly geom: IGeom;
+    /**
+     * @description Mediaパッケージ
+     *              Media package
+     *
+     * @type {IMedia}
+     * @public
+     */
+    readonly media: IMedia;
+    /**
+     * @description Netパッケージ
+     *              Net package
+     *
+     * @type {INet}
+     * @public
+     */
+    readonly net: INet;
+    /**
+     * @description Textパッケージ
+     *              Text package
+     *
+     * @type {IText}
+     * @public
+     */
+    readonly text: IText;
+    /**
+     * @description UIパッケージ
+     *              UI package
+     *
+     * @type {IUI}
+     * @public
+     */
+    readonly ui: IUI;
+    /**
+     * @description 初期起動Promise
+     *              Initial boot Promise
+     *
+     * @type {Promise}
+     * @private
+     */
+    private readonly _$promise;
+    /**
+     * @constructor
+     * @public
+     */
+    constructor();
+    /**
+     * @description 指定したURLのJSONファイルを読み込みます。
+     *              Reads the JSON file at the specified URL.
+     *
+     * @param  {string} url JSONファイルのURL
+     *                      URL of the JSON file
+     *
+     * @param  {object} [options=null] {number} width Stageの幅 | Stage width
+     *                                 {number} height Stageの高さ | Stage height
+     *                                 {string} [tagId=null] canvasを追加対象のDOMのID | ID of the DOM to which the canvas is added
+     *                                 {string} [bgColor=null] 背景色 | background color
+     *
+     * @return {void}
+     * @method
+     * @public
+     */
+    load(url: string, options?: IPlayerOptions | null): Promise<void>;
+    /**
+     * @description 指定したサイズのplayerを設定して、rootのMovieClipを作成
+     *              Create a root MovieClip with the specified size player set
+     *
+     * @param  {number} [width=240]
+     * @param  {number} [height=240]
+     * @param  {number} [fps=60]
+     * @param  {object} [options=null]
+     * @return {Sprite}
+     * @method
+     * @public
+     */
+    createRootMovieClip(width?: number, height?: number, fps?: number, options?: IPlayerOptions | null): Promise<Sprite>;
+    /**
+     * @description 指定のDisplayObjectをcanvasにキャプチャする
+     *              Capture the specified DisplayObject to the canvas
+     *
+     * @param  {D} display_object
+     * @param  {ICaptureOptions} [opstions=null]
+     * @return {void}
+     * @method
+     * @public
+     */
+    captureToCanvas<D extends DisplayObject>(display_object: D, opstions?: ICaptureOptions | null): Promise<HTMLCanvasElement>;
+}

package/src/Next2D.js

@@ -0,0 +1,209 @@
+import { events } from "./Events";
+import { display } from "./Display";
+import { filters } from "./Filters";
+import { geom } from "./Geom";
+import { media } from "./Media";
+import { net } from "./Net";
+import { text } from "./Text";
+import { ui } from "./UI";
+import { execute as loadService } from "./Next2D/usecase/LoadUseCase";
+import { execute as createRootMovieClipUseCase } from "./Next2D/usecase/CreateRootMovieClipUseCase";
+import { execute as captureToCanvasUseCase } from "./Next2D/usecase/CaptureToCanvasUseCase";
+/**
+ * @description Next2Dの起動管理クラス
+ *              Boot management class of Next2D
+ *
+ * @class
+ * @public
+ */
+export class Next2D {
+    /**
+     * @constructor
+     * @public
+     */
+    constructor() {
+        /**
+         * @description Displayパッケージ
+         *              Display package
+         *
+         * @type {IDisplay}
+         * @public
+         */
+        Object.defineProperty(this, "display", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**
+         * @description Eventsパッケージ
+         *              Events package
+         *
+         * @type {IEvents}
+         * @public
+         */
+        Object.defineProperty(this, "events", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**
+         * @description Filtersパッケージ
+         *              Filters package
+         *
+         * @type {IFilters}
+         * @public
+         */
+        Object.defineProperty(this, "filters", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**
+         * @description Geomパッケージ
+         *              Geom package
+         *
+         * @type {IGeom}
+         * @public
+         */
+        Object.defineProperty(this, "geom", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**
+         * @description Mediaパッケージ
+         *              Media package
+         *
+         * @type {IMedia}
+         * @public
+         */
+        Object.defineProperty(this, "media", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**
+         * @description Netパッケージ
+         *              Net package
+         *
+         * @type {INet}
+         * @public
+         */
+        Object.defineProperty(this, "net", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**
+         * @description Textパッケージ
+         *              Text package
+         *
+         * @type {IText}
+         * @public
+         */
+        Object.defineProperty(this, "text", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**
+         * @description UIパッケージ
+         *              UI package
+         *
+         * @type {IUI}
+         * @public
+         */
+        Object.defineProperty(this, "ui", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**
+         * @description 初期起動Promise
+         *              Initial boot Promise
+         *
+         * @type {Promise}
+         * @private
+         */
+        Object.defineProperty(this, "_$promise", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        // packages
+        this.display = display;
+        this.events = events;
+        this.filters = filters;
+        this.geom = geom;
+        this.media = media;
+        this.net = net;
+        this.text = text;
+        this.ui = ui;
+        this._$promise = new Promise((resolve) => {
+            if (document.readyState === "loading") {
+                window.addEventListener("DOMContentLoaded", () => resolve(), { "once": true });
+            }
+            else {
+                resolve();
+            }
+        });
+    }
+    /**
+     * @description 指定したURLのJSONファイルを読み込みます。
+     *              Reads the JSON file at the specified URL.
+     *
+     * @param  {string} url JSONファイルのURL
+     *                      URL of the JSON file
+     *
+     * @param  {object} [options=null] {number} width Stageの幅 | Stage width
+     *                                 {number} height Stageの高さ | Stage height
+     *                                 {string} [tagId=null] canvasを追加対象のDOMのID | ID of the DOM to which the canvas is added
+     *                                 {string} [bgColor=null] 背景色 | background color
+     *
+     * @return {void}
+     * @method
+     * @public
+     */
+    async load(url, options = null) {
+        await Promise.all([this._$promise]);
+        await loadService(url, options);
+    }
+    /**
+     * @description 指定したサイズのplayerを設定して、rootのMovieClipを作成
+     *              Create a root MovieClip with the specified size player set
+     *
+     * @param  {number} [width=240]
+     * @param  {number} [height=240]
+     * @param  {number} [fps=60]
+     * @param  {object} [options=null]
+     * @return {Sprite}
+     * @method
+     * @public
+     */
+    async createRootMovieClip(width = 240, height = 240, fps = 60, options = null) {
+        await Promise.all([this._$promise]);
+        return createRootMovieClipUseCase(width, height, fps, options);
+    }
+    /**
+     * @description 指定のDisplayObjectをcanvasにキャプチャする
+     *              Capture the specified DisplayObject to the canvas
+     *
+     * @param  {D} display_object
+     * @param  {ICaptureOptions} [opstions=null]
+     * @return {void}
+     * @method
+     * @public
+     */
+    async captureToCanvas(display_object, opstions = null) {
+        return captureToCanvasUseCase(display_object, opstions);
+    }
+}

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

@@ -0,0 +1,9 @@
+/**
+ * @description canvas と textarea elementをメインのdivに追加
+ *              Add canvas and textarea element to main div.
+ *
+ * @return {void}
+ * @method
+ * @public
+ */
+export declare const execute: () => void;

package/src/Player/service/PlayerAppendElementService.js

@@ -0,0 +1,22 @@
+import { $getMainElement, $getCanvas } from "../../CoreUtil";
+import { $textArea } from "@next2d/text";
+/**
+ * @description canvas と textarea elementをメインのdivに追加
+ *              Add canvas and textarea element to main div.
+ *
+ * @return {void}
+ * @method
+ * @public
+ */
+export const execute = () => {
+    const element = $getMainElement();
+    if (!element) {
+        return;
+    }
+    const canvas = $getCanvas();
+    if (!canvas) {
+        return;
+    }
+    element.appendChild(canvas);
+    element.appendChild($textArea);
+};

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

@@ -0,0 +1,12 @@
+/**
+ * @description コンテナのelementにベースのスタイルを適用
+ *              Apply base style to container element
+ *
+ * @param  {HTMLDivElement} element
+ * @param  {number} [fixed_width=0]
+ * @param  {number} [fixed_height=0]
+ * @return {void}
+ * @method
+ * @public
+ */
+export declare const execute: (element: HTMLDivElement, fixed_width?: number, fixed_height?: number) => void;

package/src/Player/service/PlayerApplyContainerElementStyleService.js

@@ -0,0 +1,44 @@
+/**
+ * @description コンテナのelementにベースのスタイルを適用
+ *              Apply base style to container element
+ *
+ * @param  {HTMLDivElement} element
+ * @param  {number} [fixed_width=0]
+ * @param  {number} [fixed_height=0]
+ * @return {void}
+ * @method
+ * @public
+ */
+export const execute = (element, fixed_width = 0, fixed_height = 0) => {
+    let style = "";
+    style += "display:flex;";
+    style += "align-items:center;";
+    style += "justify-content:center;";
+    style += "background-color:transparent;";
+    style += "overflow:hidden;";
+    style += "padding:0;";
+    style += "margin:0;";
+    style += "user-select:none;";
+    style += "outline:none;";
+    if (fixed_width && fixed_height) {
+        // fixed size
+        style += `width:${fixed_width}px;`;
+        style += `height:${fixed_height}px;`;
+    }
+    else {
+        const parent = element.parentElement;
+        if (!parent) {
+            throw new Error("parent element is null.");
+        }
+        if (parent.tagName === "BODY") {
+            // If the parent is BODY, adjust to window size.
+            style += `width:${window.innerWidth}px;`;
+            style += `height:${window.innerHeight}px;`;
+        }
+        else {
+            style += `width:${parent.clientWidth}px;`;
+            style += `height:${parent.clientHeight}px;`;
+        }
+    }
+    element.setAttribute("style", style);
+};

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

@@ -0,0 +1,9 @@
+/**
+ * @description コンテナとなるElementを作成して返却
+ *              Create and return an Element that serves as a container
+ *
+ * @return {HTMLDivElement}
+ * @method
+ * @protected
+ */
+export declare const execute: () => HTMLDivElement;

package/src/Player/service/PlayerCreateContainerElementService.js

@@ -0,0 +1,28 @@
+import { $player } from "../../Player";
+import { $PREFIX, $setMainElement } from "../../CoreUtil";
+/**
+ * @description コンテナとなるElementを作成して返却
+ *              Create and return an Element that serves as a container
+ *
+ * @return {HTMLDivElement}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    const div = document.createElement("div");
+    $setMainElement(div);
+    div.id = $PREFIX;
+    div.tabIndex = -1;
+    if (!$player.tagId) {
+        document.body.appendChild(div);
+    }
+    else {
+        const element = document.getElementById($player.tagId);
+        if (!element) {
+            alert(`Element not found with tag ID: ${$player.tagId}`);
+            return div;
+        }
+        element.appendChild(div);
+    }
+    return div;
+};

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

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

package/src/Player/service/PlayerDoubleClickEventService.js

@@ -0,0 +1,24 @@
+import { stage } from "@next2d/display";
+import { PointerEvent } from "@next2d/events";
+import { $hitObject } from "../../CoreUtil";
+/**
+ * @description ポインターのダブルタップイベントを処理します。
+ *              Processes the pointer double tap event.
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    const displayObject = $hitObject.hit;
+    if (displayObject) {
+        if (displayObject.willTrigger(PointerEvent.DOUBLE_CLICK)) {
+            displayObject.dispatchEvent(new PointerEvent(PointerEvent.DOUBLE_CLICK));
+        }
+    }
+    else {
+        if (stage.willTrigger(PointerEvent.DOUBLE_CLICK)) {
+            stage.dispatchEvent(new PointerEvent(PointerEvent.DOUBLE_CLICK));
+        }
+    }
+};

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

@@ -0,0 +1,10 @@
+/**
+ * @description キーボードダウンイベントを実行する
+ *              Execute the keyboard down event
+ *
+ * @param  {KeyboardEvent} event
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (event: KeyboardEvent) => void;

package/src/Player/service/PlayerKeyDownEventService.js

@@ -0,0 +1,24 @@
+import { stage } from "@next2d/display";
+import { $getSelectedTextField } from "@next2d/text";
+import { KeyboardEvent as Event, $setEvent } from "@next2d/events";
+/**
+ * @description キーボードダウンイベントを実行する
+ *              Execute the keyboard down event
+ *
+ * @param  {KeyboardEvent} event
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (event) => {
+    const selectedTextField = $getSelectedTextField();
+    if (selectedTextField) {
+        selectedTextField.keyDown(event);
+        return;
+    }
+    if (!stage.hasEventListener(Event.KEY_DOWN)) {
+        return;
+    }
+    $setEvent(event);
+    stage.dispatchEvent(new Event(Event.KEY_DOWN));
+};

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

@@ -0,0 +1,10 @@
+/**
+ * @description キーボードアップイベントを実行する
+ *              Execute the keyboard up event
+ *
+ * @param  {KeyboardEvent} event
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (event: KeyboardEvent) => void;

package/src/Player/service/PlayerKeyUpEventService.js

@@ -0,0 +1,23 @@
+import { stage } from "@next2d/display";
+import { $getSelectedTextField } from "@next2d/text";
+import { KeyboardEvent as Event, $setEvent } from "@next2d/events";
+/**
+ * @description キーボードアップイベントを実行する
+ *              Execute the keyboard up event
+ *
+ * @param  {KeyboardEvent} event
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (event) => {
+    const selectedTextField = $getSelectedTextField();
+    if (selectedTextField) {
+        return;
+    }
+    if (!stage.hasEventListener(Event.KEY_UP)) {
+        return;
+    }
+    $setEvent(event);
+    stage.dispatchEvent(new Event(Event.KEY_UP));
+};

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

@@ -0,0 +1,10 @@
+/**
+ * @description ローディングアニメーションを登録
+ *              Register loading animation
+ *
+ * @param {HTMLDivElement} element
+ * @return {void}
+ * @method
+ * @public
+ */
+export declare const execute: (element: HTMLDivElement) => void;

package/src/Player/service/PlayerLoadingAnimationService.js

@@ -0,0 +1,33 @@
+import { $PREFIX } from "../../CoreUtil";
+/**
+ * @description ローディングアニメーションを登録
+ *              Register loading animation
+ *
+ * @param {HTMLDivElement} element
+ * @return {void}
+ * @method
+ * @public
+ */
+export const execute = (element) => {
+    const loadingId = `${$PREFIX}_loading`;
+    element.innerHTML = `<style>
+#${loadingId} {
+    width: 50px;
+    height: 50px;
+    border-radius: 50px;
+    border: 8px solid #dcdcdc;
+    border-right-color: transparent;
+    box-sizing: border-box;
+    animation: ${loadingId} 0.8s infinite linear;
+}
+@keyframes ${loadingId} {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+</style>
+<div id="${loadingId}"></div>`;
+};

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

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

package/src/Player/service/PlayerPointerDownEventService.js

@@ -0,0 +1,47 @@
+import { stage } from "@next2d/display";
+import { PointerEvent } from "@next2d/events";
+import { $setSelectedTextField, $getSelectedTextField, $textArea } from "@next2d/text";
+import { $hitObject, $hitMatrix } from "../../CoreUtil";
+/**
+ * @description ポインターダウンイベントを処理します。
+ *              Processes the pointer down event.
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    const displayObject = $hitObject.hit;
+    // 選択中のTextFieldがある場合はフォーカスを解除します。
+    const selectedTextField = $getSelectedTextField();
+    if (selectedTextField) {
+        if (!displayObject || selectedTextField.instanceId !== displayObject.instanceId) {
+            selectedTextField.focus = false;
+            $setSelectedTextField(null);
+        }
+    }
+    if (displayObject) {
+        if (displayObject.isText) {
+            if (!displayObject.focus) {
+                displayObject.focus = true;
+                $setSelectedTextField(displayObject);
+            }
+            else {
+                setTimeout(() => {
+                    $textArea.focus();
+                }, 300);
+            }
+            displayObject.setFocusIndex($hitObject.x - $hitMatrix[4], $hitObject.y - $hitMatrix[5]);
+        }
+        // ヒットしたDisplayObjectポインターダウンイベントを発火します。
+        if (displayObject.willTrigger(PointerEvent.POINTER_DOWN)) {
+            displayObject.dispatchEvent(new PointerEvent(PointerEvent.POINTER_DOWN));
+        }
+    }
+    else {
+        // ステージ全体のポインターダウンイベントを発火します。
+        if (stage.willTrigger(PointerEvent.POINTER_DOWN)) {
+            stage.dispatchEvent(new PointerEvent(PointerEvent.POINTER_DOWN));
+        }
+    }
+};