@next2d/core 1.18.12 → 2.0.0

package/package.json

@@ -1,26 +1,18 @@
 {
   "name": "@next2d/core",
-  "version": "1.18.12",
-  "description": "Next2D Core Packages",
-  "author": "Toshiyuki Ienaga<ienaga@tvon.jp> (https://github.com/ienaga/)",
+  "version": "2.0.0",
+  "description": "Next2D Core Package",
+  "author": "Toshiyuki Ienaga<ienaga@next2d.app> (https://github.com/ienaga/)",
   "license": "MIT",
   "homepage": "https://next2d.app",
   "bugs": "https://github.com/Next2D/Player/issues",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
+  "main": "src/index.js",
+  "types": "src/index.d.ts",
+  "type": "module",
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      }
+      "import": "./src/index.js",
+      "require": "./src/index.js"
     }
   },
   "keywords": [
@@ -31,17 +23,17 @@
     "type": "git",
     "url": "git+https://github.com/Next2D/Player.git"
   },
-  "peerDependencies": {
-    "@next2d/interface": "1.18.12",
-    "@next2d/webgl": "1.18.12",
-    "@next2d/display": "1.18.12",
-    "@next2d/core": "1.18.12",
-    "@next2d/net": "1.18.12",
-    "@next2d/share": "1.18.12",
-    "@next2d/events": "1.18.12",
-    "@next2d/media": "1.18.12",
-    "@next2d/text": "1.18.12",
-    "@next2d/geom": "1.18.12",
-    "@next2d/util": "1.18.12"
+  "dependencies": {
+    "@next2d/core": "2.0.0",
+    "@next2d/display": "2.0.0",
+    "@next2d/events": "2.0.0",
+    "@next2d/filters": "2.0.0",
+    "@next2d/geom": "2.0.0",
+    "@next2d/media": "2.0.0",
+    "@next2d/net": "2.0.0",
+    "@next2d/renderer": "2.0.0",
+    "@next2d/text": "2.0.0",
+    "@next2d/ui": "2.0.0",
+    "@next2d/render-queue": "2.0.0"
   }
 }

package/src/Canvas/service/CanvasBootOffscreenCanvasService.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @description OffscreenCanvasを起動
+ *              Boot offscreen canvas
+ *
+ * @param  {HTMLCanvasElement} canvas
+ * @return {void}
+ * @method
+ * @public
+ */
+export declare const execute: (canvas: HTMLCanvasElement) => void;

package/src/Canvas/service/CanvasBootOffscreenCanvasService.js

@@ -0,0 +1,19 @@
+import { $rendererWorker } from "../../RendererWorker";
+/**
+ * @description OffscreenCanvasを起動
+ *              Boot offscreen canvas
+ *
+ * @param  {HTMLCanvasElement} canvas
+ * @return {void}
+ * @method
+ * @public
+ */
+export const execute = (canvas) => {
+    const offscreenCanvas = canvas.transferControlToOffscreen();
+    // postMessage
+    $rendererWorker.postMessage({
+        "command": "initialize",
+        "canvas": offscreenCanvas,
+        "devicePixelRatio": window.devicePixelRatio
+    }, [offscreenCanvas]);
+};

package/src/Canvas/service/CanvasInitializeService.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @description canvasのスタイルの初期設定
+ *              Initial setting of canvas style
+ *
+ * @param  {HTMLCanvasElement} canvas
+ * @param  {number} [ratio=1]
+ * @return {void}
+ * @method
+ * @public
+ */
+export declare const execute: (canvas: HTMLCanvasElement, ratio?: number) => void;

package/src/Canvas/service/CanvasInitializeService.js

@@ -0,0 +1,23 @@
+/**
+ * @description canvasのスタイルの初期設定
+ *              Initial setting of canvas style
+ *
+ * @param  {HTMLCanvasElement} canvas
+ * @param  {number} [ratio=1]
+ * @return {void}
+ * @method
+ * @public
+ */
+export const execute = (canvas, ratio = 1) => {
+    // Set canvas style
+    let style = "";
+    style += "-webkit-tap-highlight-color: rgba(0,0,0,0);";
+    style += "backface-visibility: hidden;";
+    style += "touch-action: none;";
+    if (ratio > 1) {
+        style += `transform: scale(${1 / ratio});`;
+    }
+    canvas.width = 1;
+    canvas.height = 1;
+    canvas.setAttribute("style", style);
+};

package/src/Canvas/service/CanvasSetPositionService.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @description メインキャンバスの位置を設定します。
+ *              Set the position of the main canvas.
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: () => void;

package/src/Canvas/service/CanvasSetPositionService.js

@@ -0,0 +1,30 @@
+import { $mainCanvasPosition } from "@next2d/text";
+import { stage } from "@next2d/display";
+import { $getMainElement } from "../../CoreUtil";
+/**
+ * @type {number}
+ * @private
+ */
+const $devicePixelRatio = window.devicePixelRatio || 1;
+/**
+ * @description メインキャンバスの位置を設定します。
+ *              Set the position of the main canvas.
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    $mainCanvasPosition.x = 0;
+    $mainCanvasPosition.y = 0;
+    const element = $getMainElement();
+    if (!element) {
+        return;
+    }
+    const canvas = element.children[0];
+    if (!canvas || canvas.localName !== "canvas") {
+        return;
+    }
+    $mainCanvasPosition.x = (element.clientWidth - stage.rendererWidth / $devicePixelRatio) / 2;
+    $mainCanvasPosition.y = (element.clientHeight - stage.rendererHeight / $devicePixelRatio) / 2;
+};

package/src/Canvas/usecase/CanvasPointerDownEventUseCase.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @description プレイヤーのポインターダウンイベントを処理します。
+ *              Processes the player's pointer down event.
+ *
+ * @param  {PointerEvent} event
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (event: PointerEvent) => void;

package/src/Canvas/usecase/CanvasPointerDownEventUseCase.js

@@ -0,0 +1,57 @@
+import { $setEvent } from "@next2d/events";
+import { $player } from "../../Player";
+import { execute as playerHitTestUseCase } from "../../Player/usecase/PlayerHitTestUseCase";
+import { execute as playerSetCurrentMousePointService } from "../../Player/service/PlayerSetCurrentMousePointService";
+import { execute as playerPointerDownEventService } from "../../Player/service/PlayerPointerDownEventService";
+import { execute as playerDoubleClickEventService } from "../../Player/service/PlayerDoubleClickEventService";
+import { $hitObject } from "../../CoreUtil";
+/**
+ * @type {NodeJS.Timeout}
+ * @private
+ */
+let $timerId;
+/**
+ * @type {boolean}
+ * @private
+ */
+let $wait = false;
+/**
+ * @description プレイヤーのポインターダウンイベントを処理します。
+ *              Processes the player's pointer down event.
+ *
+ * @param  {PointerEvent} event
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (event) => {
+    const element = event.target;
+    if (!element) {
+        return;
+    }
+    $player.mouseState = "down";
+    element.setPointerCapture(event.pointerId);
+    $setEvent(event);
+    playerSetCurrentMousePointService(event);
+    // start position
+    playerHitTestUseCase();
+    if ($hitObject.hit) {
+        event.preventDefault();
+    }
+    // fixed logic
+    clearTimeout($timerId);
+    if (!$wait) {
+        // 初回のタップであればダブルタップを待機モードに変更
+        $wait = true;
+        // ダブルタップ有効期限をセット
+        $timerId = setTimeout(() => {
+            $wait = false;
+        }, 300);
+        playerPointerDownEventService();
+    }
+    else {
+        // ダブルタップを終了
+        $wait = false;
+        playerDoubleClickEventService();
+    }
+};

package/src/Canvas/usecase/CanvasPointerLeaveEventUseCase.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @description マウス、タップがDisplayObjectから離れた時に発生します。
+ *              Occurs when the mouse or tap leaves the DisplayObject.
+ *
+ * @param  {PointerEvent} event
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (event: PointerEvent) => void;

package/src/Canvas/usecase/CanvasPointerLeaveEventUseCase.js

@@ -0,0 +1,23 @@
+import { $getRollOverDisplayObject } from "../../CoreUtil";
+import { PointerEvent as Next2D_PointerEvent, $setEvent } from "@next2d/events";
+/**
+ * @description マウス、タップがDisplayObjectから離れた時に発生します。
+ *              Occurs when the mouse or tap leaves the DisplayObject.
+ *
+ * @param  {PointerEvent} event
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (event) => {
+    $setEvent(event);
+    const rollOverDisplayObject = $getRollOverDisplayObject();
+    if (!rollOverDisplayObject) {
+        return;
+    }
+    if (rollOverDisplayObject.willTrigger(Next2D_PointerEvent.POINTER_LEAVE)) {
+        // イベントの伝播を止める
+        event.preventDefault();
+        rollOverDisplayObject.dispatchEvent(new Next2D_PointerEvent(Next2D_PointerEvent.POINTER_LEAVE));
+    }
+};

package/src/Canvas/usecase/CanvasPointerMoveEventUseCase.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @description プレイヤーのポインタームーブイベントを処理します。
+ *              Handles the player's pointer move event.
+ *
+ * @param  {PointerEvent} event
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (event: PointerEvent) => void;

package/src/Canvas/usecase/CanvasPointerMoveEventUseCase.js

@@ -0,0 +1,30 @@
+import { $setEvent } from "@next2d/events";
+import { execute as playerHitTestUseCase } from "../../Player/usecase/PlayerHitTestUseCase";
+import { execute as playerSetCurrentMousePoint } from "../../Player/service/PlayerSetCurrentMousePointService";
+import { execute as playerPointerMoveEventService } from "../../Player/service/PlayerPointerMoveEventService";
+import { $hitObject } from "../../CoreUtil";
+/**
+ * @description プレイヤーのポインタームーブイベントを処理します。
+ *              Handles the player's pointer move event.
+ *
+ * @param  {PointerEvent} event
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (event) => {
+    const element = event.target;
+    if (!element) {
+        return;
+    }
+    $setEvent(event);
+    playerSetCurrentMousePoint(event);
+    // start position
+    playerHitTestUseCase();
+    if ($hitObject.hit) {
+        event.preventDefault();
+    }
+    // fixed logic
+    // ポインタームーブイベントを発火
+    playerPointerMoveEventService();
+};

package/src/Canvas/usecase/CanvasPointerUpEventUseCase.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @description プレイヤーのポインターアップイベントを処理します。
+ *              Processes the player's pointer up event.
+ *
+ * @param  {PointerEvent} event
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (event: PointerEvent) => void;

package/src/Canvas/usecase/CanvasPointerUpEventUseCase.js

@@ -0,0 +1,29 @@
+import { $setEvent } from "@next2d/events";
+import { $player } from "../../Player";
+import { execute as playerHitTestUseCase } from "../../Player/usecase/PlayerHitTestUseCase";
+import { execute as playerSetCurrentMousePoint } from "../../Player/service/PlayerSetCurrentMousePointService";
+import { execute as playerPointerUpEventService } from "../../Player/service/PlayerPointerUpEventService";
+/**
+ * @description プレイヤーのポインターアップイベントを処理します。
+ *              Processes the player's pointer up event.
+ *
+ * @param  {PointerEvent} event
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (event) => {
+    const element = event.target;
+    if (!element) {
+        return;
+    }
+    $player.mouseState = "up";
+    element.releasePointerCapture(event.pointerId);
+    $setEvent(event);
+    playerSetCurrentMousePoint(event);
+    // start position
+    playerHitTestUseCase();
+    // fixed logic
+    // ポインターアップイベントを発火します。
+    playerPointerUpEventService();
+};

package/src/Canvas/usecase/CanvasRegisterEventUseCase.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @description HTMLCanvasElementにイベントを登録します。
+ *              Register events on HTMLCanvasElement.
+ *
+ * @param  {HTMLCanvasElement} canvas
+ * @return {void}
+ * @method
+ * @public
+ */
+export declare const execute: (canvas: HTMLCanvasElement) => void;

package/src/Canvas/usecase/CanvasRegisterEventUseCase.js

@@ -0,0 +1,39 @@
+import { execute as canvasPointerDownEventUseCase } from "./CanvasPointerDownEventUseCase";
+import { execute as canvasPointerUpEventUseCase } from "./CanvasPointerUpEventUseCase";
+import { execute as canvasPointerMoveEventUseCase } from "./CanvasPointerMoveEventUseCase";
+import { execute as canvasPointerLeaveEventUseCase } from "./CanvasPointerLeaveEventUseCase";
+import { execute as canvasWheelEventUseCase } from "./CanvasWheelEventUseCase";
+import { PointerEvent, WheelEvent } from "@next2d/events";
+import { $bootAudioContext, $getMutedVideos } from "@next2d/media";
+/**
+ * @description HTMLCanvasElementにイベントを登録します。
+ *              Register events on HTMLCanvasElement.
+ *
+ * @param  {HTMLCanvasElement} canvas
+ * @return {void}
+ * @method
+ * @public
+ */
+export const execute = (canvas) => {
+    const $loadAudioContext = () => {
+        // audio contextを起動
+        $bootAudioContext();
+        // ミュートになっているビデオの音声をon
+        const mutedVideos = $getMutedVideos();
+        for (let idx = 0; idx < mutedVideos.length; ++idx) {
+            const video = mutedVideos[idx];
+            if (!video) {
+                continue;
+            }
+            video.muted = false;
+        }
+        mutedVideos.length = 0;
+        canvas.removeEventListener(PointerEvent.POINTER_UP, $loadAudioContext);
+    };
+    canvas.addEventListener(PointerEvent.POINTER_UP, $loadAudioContext);
+    canvas.addEventListener(PointerEvent.POINTER_DOWN, canvasPointerDownEventUseCase, { "passive": false });
+    canvas.addEventListener(PointerEvent.POINTER_UP, canvasPointerUpEventUseCase);
+    canvas.addEventListener(PointerEvent.POINTER_MOVE, canvasPointerMoveEventUseCase, { "passive": false });
+    canvas.addEventListener(PointerEvent.POINTER_LEAVE, canvasPointerLeaveEventUseCase);
+    canvas.addEventListener(WheelEvent.WHEEL, canvasWheelEventUseCase);
+};

package/src/Canvas/usecase/CanvasWheelEventUseCase.d.ts

@@ -0,0 +1,11 @@
+import type { DisplayObject } from "@next2d/display";
+/**
+ * @description ホイールイベントを実行します。
+ *              Executes the wheel event.
+ *
+ * @param  {WheelEvent} event
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: <D extends DisplayObject>(event: WheelEvent) => void;

package/src/Canvas/usecase/CanvasWheelEventUseCase.js

@@ -0,0 +1,32 @@
+import { stage } from "@next2d/display";
+import { $hitObject } from "../../CoreUtil";
+import { $setEvent, WheelEvent as Next2D_WheelEvent } from "@next2d/events";
+/**
+ * @description ホイールイベントを実行します。
+ *              Executes the wheel event.
+ *
+ * @param  {WheelEvent} event
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (event) => {
+    $setEvent(event);
+    const displayObject = $hitObject.hit;
+    if (displayObject && displayObject.isText
+        && displayObject.scrollEnabled) {
+        event.preventDefault();
+        if (event.deltaX) {
+            displayObject.scrollX += event.deltaX / (displayObject.textWidth / displayObject.width);
+        }
+        if (event.deltaY) {
+            displayObject.scrollY += event.deltaY / (displayObject.textHeight / displayObject.height);
+        }
+        return;
+    }
+    if (stage.willTrigger(Next2D_WheelEvent.WHEEL)) {
+        // イベントの伝播を止める
+        event.preventDefault();
+        stage.dispatchEvent(new Next2D_WheelEvent(Next2D_WheelEvent.WHEEL));
+    }
+};

package/src/Canvas.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @type {HTMLCanvasElement}
+ * @public
+ */
+export declare const $canvas: HTMLCanvasElement;

package/src/Canvas.js

@@ -0,0 +1,16 @@
+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";
+/**
+ * @type {HTMLCanvasElement}
+ * @public
+ */
+export const $canvas = document.createElement("canvas");
+$setCanvas($canvas);
+// initial invoking function
+canvasInitializeService($canvas, $devicePixelRatio);
+// Register an event
+canvasRegisterEventUseCase($canvas);
+// Boot offscreen canvas
+canvasBootOffscreenCanvasService($canvas);

package/src/CoreUtil.d.ts

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