@next2d/display 1.18.11 → 2.0.0

package/package.json

@@ -1,26 +1,18 @@
 {
   "name": "@next2d/display",
-  "version": "1.18.11",
-  "description": "Next2D Display Packages",
-  "author": "Toshiyuki Ienaga<ienaga@tvon.jp> (https://github.com/ienaga/)",
+  "version": "2.0.0",
+  "description": "Next2D Display 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,14 @@
     "type": "git",
     "url": "git+https://github.com/Next2D/Player.git"
   },
-  "peerDependencies": {
-    "@next2d/interface": "1.18.11",
-    "@next2d/core": "1.18.11",
-    "@next2d/ui": "1.18.11",
-    "@next2d/text": "1.18.11",
-    "@next2d/geom": "1.18.11",
-    "@next2d/util": "1.18.11",
-    "@next2d/share": "1.18.11",
-    "@next2d/webgl": "1.18.11",
-    "@next2d/media": "1.18.11",
-    "@next2d/net": "1.18.11",
-    "@next2d/events": "1.18.11"
+  "dependencies": {
+    "@next2d/ui": "2.0.0",
+    "@next2d/text": "2.0.0",
+    "@next2d/geom": "2.0.0",
+    "@next2d/media": "2.0.0",
+    "@next2d/net": "2.0.0",
+    "@next2d/events": "2.0.0",
+    "@next2d/filters": "2.0.0",
+    "@next2d/render-queue": "2.0.0"
   }
 }

package/src/BitmapData/service/BitmapDataCanvasToBufferService.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @description 画像をバッファに変換します
+ *              Convert image to buffer
+ *
+ * @param  {HTMLCanvasElement} canvas
+ * @return {Uint8Array}
+ * @method
+ * @protected
+ */
+export declare const execute: (canvas: HTMLCanvasElement) => Uint8Array;

package/src/BitmapData/service/BitmapDataCanvasToBufferService.js

@@ -0,0 +1,22 @@
+import { $cacheStore } from "@next2d/cache";
+/**
+ * @description 画像をバッファに変換します
+ *              Convert image to buffer
+ *
+ * @param  {HTMLCanvasElement} canvas
+ * @return {Uint8Array}
+ * @method
+ * @protected
+ */
+export const execute = (canvas) => {
+    const cloneCanvas = $cacheStore.getCanvas();
+    cloneCanvas.width = canvas.width;
+    cloneCanvas.height = canvas.height;
+    const context = cloneCanvas.getContext("2d");
+    context.setTransform(1, 0, 0, 1, 0, 0);
+    context.drawImage(canvas, 0, 0);
+    const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+    const buffer = new Uint8Array(imageData.data.buffer);
+    $cacheStore.destroy(context);
+    return buffer;
+};

package/src/BitmapData/service/BitmapDataImageToBufferService.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @description 画像をバッファに変換します
+ *              Convert image to buffer
+ *
+ * @param  {HTMLImageElement} image
+ * @return {Uint8Array}
+ * @method
+ * @protected
+ */
+export declare const execute: (image: HTMLImageElement) => Uint8Array;

package/src/BitmapData/service/BitmapDataImageToBufferService.js

@@ -0,0 +1,21 @@
+import { $cacheStore } from "@next2d/cache";
+/**
+ * @description 画像をバッファに変換します
+ *              Convert image to buffer
+ *
+ * @param  {HTMLImageElement} image
+ * @return {Uint8Array}
+ * @method
+ * @protected
+ */
+export const execute = (image) => {
+    const canvas = $cacheStore.getCanvas();
+    canvas.width = image.width;
+    canvas.height = image.height;
+    const context = canvas.getContext("2d", { "willReadFrequently": true });
+    context.drawImage(image, 0, 0);
+    const imageData = context.getImageData(0, 0, image.width, image.height);
+    const buffer = new Uint8Array(imageData.data.buffer);
+    $cacheStore.destroy(context);
+    return buffer;
+};

package/src/BitmapData.d.ts

@@ -0,0 +1,71 @@
+/**
+ * @description BitmapData クラスを使用すると、Bitmap オブジェクトのデータ (ピクセル) を処理できます。
+ *              BitmapData クラスのメソッドを使用して、任意のサイズの透明または不透明のビットマップイメージを作成し
+ *              実行時に様々な方法で操作できます。
+ *
+ *              The BitmapData class lets you work with the data (pixels) of a Bitmap object.
+ *              You can use the methods of the BitmapData class to create arbitrarily sized transparent or
+ *              opaque bitmap images and manipulate them in various ways at runtime.
+ *
+ * @class
+ * @memberOf next2d.display
+ */
+export declare class BitmapData {
+    /**
+     * @description ビットマップイメージの幅（ピクセル単位）です。
+     *              The width of the bitmap image in pixels.
+     *
+     * @return  {number}
+     * @readonly
+     * @public
+     */
+    width: number;
+    /**
+     * @description ビットマップイメージの高さ（ピクセル単位）です。
+     *              The height of the bitmap image in pixels.
+     *
+     * @return  {number}
+     * @readonly
+     * @public
+     */
+    height: number;
+    /**
+     * @type {Uint8Array | null}
+     * @private
+     */
+    buffer: Uint8Array | null;
+    /**
+     * @param {number} [width=0]
+     * @param {number} [height=0]
+     * @constructor
+     * @public
+     */
+    constructor(width?: number, height?: number);
+    /**
+     * @description Imageクラスを利用して BitmapData を生成します。
+     *              Use the Image class to generate BitmapData.
+     *
+     * @writeonly
+     * @public
+     */
+    set image(image: HTMLImageElement | null);
+    /**
+     * @description Canvasクラス利用して BitmapData を生成します。
+     *              Use the Canvas class to generate BitmapData.
+     *
+     * @writeonly
+     * @public
+     */
+    set canvas(canvas: HTMLCanvasElement | null);
+    /**
+     * @description 新しいオブジェクトとして、このクラスのクローンを返します。
+     *              含まれるオブジェクトはまったく同じコピーになります。
+     *              Returns a clone of this class as a new object,
+     *              with an exact copy of the contained object.
+     *
+     * @return {BitmapData}
+     * @method
+     * @public
+     */
+    clone(): BitmapData;
+}

package/src/BitmapData.js

@@ -0,0 +1,133 @@
+import { execute as bitmapDataImageToBufferService } from "./BitmapData/service/BitmapDataImageToBufferService";
+import { execute as bitmapDataCanvasToBufferService } from "./BitmapData/service/BitmapDataCanvasToBufferService";
+/**
+ * @description BitmapData クラスを使用すると、Bitmap オブジェクトのデータ (ピクセル) を処理できます。
+ *              BitmapData クラスのメソッドを使用して、任意のサイズの透明または不透明のビットマップイメージを作成し
+ *              実行時に様々な方法で操作できます。
+ *
+ *              The BitmapData class lets you work with the data (pixels) of a Bitmap object.
+ *              You can use the methods of the BitmapData class to create arbitrarily sized transparent or
+ *              opaque bitmap images and manipulate them in various ways at runtime.
+ *
+ * @class
+ * @memberOf next2d.display
+ */
+export class BitmapData {
+    /**
+     * @param {number} [width=0]
+     * @param {number} [height=0]
+     * @constructor
+     * @public
+     */
+    constructor(width = 0, height = 0) {
+        /**
+         * @description ビットマップイメージの幅（ピクセル単位）です。
+         *              The width of the bitmap image in pixels.
+         *
+         * @return  {number}
+         * @readonly
+         * @public
+         */
+        Object.defineProperty(this, "width", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**
+         * @description ビットマップイメージの高さ（ピクセル単位）です。
+         *              The height of the bitmap image in pixels.
+         *
+         * @return  {number}
+         * @readonly
+         * @public
+         */
+        Object.defineProperty(this, "height", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**
+         * @type {Uint8Array | null}
+         * @private
+         */
+        Object.defineProperty(this, "buffer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**
+         * @type {number}
+         * @default 0
+         * @private
+         */
+        this.width = width | 0;
+        /**
+         * @type {number}
+         * @default 0
+         * @private
+         */
+        this.height = height | 0;
+        /**
+         * @type {Uint8Array}
+         * @default null
+         * @private
+         */
+        this.buffer = null;
+    }
+    /**
+     * @description Imageクラスを利用して BitmapData を生成します。
+     *              Use the Image class to generate BitmapData.
+     *
+     * @writeonly
+     * @public
+     */
+    set image(image) {
+        if (!image) {
+            this.width = 0;
+            this.height = 0;
+            this.buffer = null;
+            return;
+        }
+        this.buffer = bitmapDataImageToBufferService(image);
+        this.width = image.width;
+        this.height = image.height;
+    }
+    /**
+     * @description Canvasクラス利用して BitmapData を生成します。
+     *              Use the Canvas class to generate BitmapData.
+     *
+     * @writeonly
+     * @public
+     */
+    set canvas(canvas) {
+        if (!canvas) {
+            this.width = 0;
+            this.height = 0;
+            this.buffer = null;
+            return;
+        }
+        this.buffer = bitmapDataCanvasToBufferService(canvas);
+        this.width = canvas.width;
+        this.height = canvas.height;
+    }
+    /**
+     * @description 新しいオブジェクトとして、このクラスのクローンを返します。
+     *              含まれるオブジェクトはまったく同じコピーになります。
+     *              Returns a clone of this class as a new object,
+     *              with an exact copy of the contained object.
+     *
+     * @return {BitmapData}
+     * @method
+     * @public
+     */
+    clone() {
+        const bitmapData = new BitmapData(this.width, this.height);
+        if (this.buffer !== null) {
+            bitmapData.buffer = this.buffer.slice();
+        }
+        return bitmapData;
+    }
+}

package/{dist → src}/BlendMode.d.ts

@@ -1,59 +1,13 @@
 /**
- * ブレンドモードの視覚効果のために定数値を提供するクラスです。
- * 全てのDisplayObjectに設定が可能です。
- * A class that provides constant values for visual blend mode effects.
- * It can be set for all DisplayObjects.
- *
- * @example <caption>usage of BlendMode.</caption>
- * // static BlendMode
- * const {BlendMode, MovieClip} = next2d.display;
- * const movieClip = new MovieClip();
- * movieClip.blendMode = BlendMode.ADD;
+ * @description ブレンドモードの視覚効果のために定数値を提供するクラスです。
+ *              全てのDisplayObjectに設定が可能です。
+ *              A class that provides constant values for visual blend mode effects.
+ *              It can be set for all DisplayObjects.
  *
  * @class
  * @memberOf next2d.display
  */
 export declare class BlendMode {
-    /**
-     * @description 指定されたクラスのストリングを返します。
-     *              Returns the string representation of the specified class.
-     *
-     * @return  {string}
-     * @default [class BlendMode]
-     * @method
-     * @static
-     */
-    static toString(): string;
-    /**
-     * @description 指定されたクラスの空間名を返します。
-     *              Returns the space name of the specified class.
-     *
-     * @return  {string}
-     * @default next2d.display.BlendMode
-     * @const
-     * @static
-     */
-    static get namespace(): string;
-    /**
-     * @description 指定されたオブジェクトのストリングを返します。
-     *              Returns the string representation of the specified object.
-     *
-     * @return  {string}
-     * @default [object BlendMode]
-     * @method
-     * @public
-     */
-    toString(): string;
-    /**
-     * @description 指定されたオブジェクトの空間名を返します。
-     *              Returns the space name of the specified object.
-     *
-     * @return  {string}
-     * @default next2d.display.BlendMode
-     * @const
-     * @public
-     */
-    get namespace(): string;
     /**
      * @description 表示オブジェクトの要素カラーの値を背景色に加算し、その際に上限 0xFF を適用します。
      *              Adds the values of the constituent colors of the display object

package/{dist → src}/BlendMode.js

@@ -1,67 +1,13 @@
 /**
- * ブレンドモードの視覚効果のために定数値を提供するクラスです。
- * 全てのDisplayObjectに設定が可能です。
- * A class that provides constant values for visual blend mode effects.
- * It can be set for all DisplayObjects.
- *
- * @example <caption>usage of BlendMode.</caption>
- * // static BlendMode
- * const {BlendMode, MovieClip} = next2d.display;
- * const movieClip = new MovieClip();
- * movieClip.blendMode = BlendMode.ADD;
+ * @description ブレンドモードの視覚効果のために定数値を提供するクラスです。
+ *              全てのDisplayObjectに設定が可能です。
+ *              A class that provides constant values for visual blend mode effects.
+ *              It can be set for all DisplayObjects.
  *
  * @class
  * @memberOf next2d.display
  */
 export class BlendMode {
-    /**
-     * @description 指定されたクラスのストリングを返します。
-     *              Returns the string representation of the specified class.
-     *
-     * @return  {string}
-     * @default [class BlendMode]
-     * @method
-     * @static
-     */
-    static toString() {
-        return "[class BlendMode]";
-    }
-    /**
-     * @description 指定されたクラスの空間名を返します。
-     *              Returns the space name of the specified class.
-     *
-     * @return  {string}
-     * @default next2d.display.BlendMode
-     * @const
-     * @static
-     */
-    static get namespace() {
-        return "next2d.display.BlendMode";
-    }
-    /**
-     * @description 指定されたオブジェクトのストリングを返します。
-     *              Returns the string representation of the specified object.
-     *
-     * @return  {string}
-     * @default [object BlendMode]
-     * @method
-     * @public
-     */
-    toString() {
-        return "[object BlendMode]";
-    }
-    /**
-     * @description 指定されたオブジェクトの空間名を返します。
-     *              Returns the space name of the specified object.
-     *
-     * @return  {string}
-     * @default next2d.display.BlendMode
-     * @const
-     * @public
-     */
-    get namespace() {
-        return "next2d.display.BlendMode";
-    }
     /**
      * @description 表示オブジェクトの要素カラーの値を背景色に加算し、その際に上限 0xFF を適用します。
      *              Adds the values of the constituent colors of the display object

package/src/DisplayObject/service/DisplayObjectApplyChangesService.d.ts

@@ -0,0 +1,11 @@
+import type { DisplayObject } from "../../DisplayObject";
+/**
+ * @description DisplayObjectの更新フラグを立てる
+ *              Set the update flag of DisplayObject
+ *
+ * @param  {DisplayObject} display_object
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: <D extends DisplayObject>(display_object: D) => void;

package/src/DisplayObject/service/DisplayObjectApplyChangesService.js

@@ -0,0 +1,16 @@
+/**
+ * @description DisplayObjectの更新フラグを立てる
+ *              Set the update flag of DisplayObject
+ *
+ * @param  {DisplayObject} display_object
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (display_object) => {
+    display_object.changed = true;
+    const parent = display_object.parent;
+    if (parent && !parent.changed) {
+        execute(parent);
+    }
+};

package/src/DisplayObject/service/DisplayObjectBaseBuildService.d.ts

@@ -0,0 +1,16 @@
+import type { IDictionaryTag } from "../../interface/IDictionaryTag";
+import type { Loader } from "../../Loader";
+import type { MovieClip } from "../../MovieClip";
+import type { DisplayObject } from "../../DisplayObject";
+/**
+ * @description DisplayObjectの基本情報を設定します。
+ *              Sets the basic information of the DisplayObject.
+ *
+ * @param  {DisplayObject} display_object
+ * @param  {object} tag
+ * @param  {MovieClip} parent
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: <D extends DisplayObject>(display_object: D, dictionary_id: number, tag: IDictionaryTag, parent: MovieClip | Loader, placeId?: number) => void;

package/src/DisplayObject/service/DisplayObjectBaseBuildService.js

@@ -0,0 +1,31 @@
+import { $loaderInfoMap, $rootMap } from "../../DisplayObjectUtil";
+/**
+ * @description DisplayObjectの基本情報を設定します。
+ *              Sets the basic information of the DisplayObject.
+ *
+ * @param  {DisplayObject} display_object
+ * @param  {object} tag
+ * @param  {MovieClip} parent
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (display_object, dictionary_id, tag, parent, placeId = -1) => {
+    const loaderInfo = parent.loaderInfo;
+    if (!loaderInfo) {
+        throw new Error("the loaderInfo or data is null.");
+    }
+    // set parent data
+    display_object.parent = parent;
+    $rootMap.set(display_object, parent.root);
+    $loaderInfoMap.set(display_object, loaderInfo);
+    // bind tag data
+    display_object.dictionaryId = dictionary_id;
+    display_object.characterId = tag.characterId;
+    display_object.clipDepth = tag.clipDepth;
+    display_object.startFrame = tag.startFrame;
+    display_object.endFrame = tag.endFrame;
+    display_object.name = tag.name || "";
+    // first frame placeId
+    display_object.placeId = placeId;
+};

package/src/DisplayObject/service/DisplayObjectBlendToNumberService.d.ts

@@ -0,0 +1,11 @@
+import type { IBlendMode } from "../../interface/IBlendMode";
+/**
+ * @description ブレンドモードを数値に変換します。
+ *              Converts the blend mode to a number.
+ *
+ * @param {IBlendMode} blend_mode
+ * @return {number}
+ * @method
+ * @protected
+ */
+export declare const execute: (blend_mode: IBlendMode) => number;

package/src/DisplayObject/service/DisplayObjectBlendToNumberService.js

@@ -0,0 +1,45 @@
+/**
+ * @description ブレンドモードを数値に変換します。
+ *              Converts the blend mode to a number.
+ *
+ * @param {IBlendMode} blend_mode
+ * @return {number}
+ * @method
+ * @protected
+ */
+export const execute = (blend_mode) => {
+    switch (blend_mode) {
+        case "copy":
+            return 0;
+        case "add":
+            return 1;
+        case "alpha":
+            return 2;
+        case "darken":
+            return 3;
+        case "difference":
+            return 4;
+        case "erase":
+            return 5;
+        case "hardlight":
+            return 6;
+        case "invert":
+            return 7;
+        case "layer":
+            return 8;
+        case "lighten":
+            return 9;
+        case "multiply":
+            return 10;
+        case "normal":
+            return 11;
+        case "overlay":
+            return 12;
+        case "screen":
+            return 13;
+        case "subtract":
+            return 14;
+        default:
+            return 11; // normal
+    }
+};

package/src/DisplayObject/service/DisplayObjectBuildFilterService.d.ts

@@ -0,0 +1,12 @@
+import type { IFilterArray } from "../../interface/IFilterArray";
+import type { ISurfaceFilter } from "../../interface/ISurfaceFilter";
+/**
+ * @description PlaceObjectのSurfaceFilterListを元にフィルターを構築
+ *              Build filters based on the SurfaceFilterList of PlaceObject
+ *
+ * @param  {array} surface_filter_list
+ * @return {array}
+ * @method
+ * @protected
+ */
+export declare const execute: (surface_filter_list: ISurfaceFilter[]) => IFilterArray;

package/src/DisplayObject/service/DisplayObjectBuildFilterService.js

@@ -0,0 +1,53 @@
+import { BevelFilter, BlurFilter, ColorMatrixFilter, ConvolutionFilter, DisplacementMapFilter, DropShadowFilter, GlowFilter, GradientBevelFilter, GradientGlowFilter } from "@next2d/filters";
+import { $getArray } from "../../DisplayObjectUtil";
+/**
+ * @description PlaceObjectのSurfaceFilterListを元にフィルターを構築
+ *              Build filters based on the SurfaceFilterList of PlaceObject
+ *
+ * @param  {array} surface_filter_list
+ * @return {array}
+ * @method
+ * @protected
+ */
+export const execute = (surface_filter_list) => {
+    const filters = $getArray();
+    for (let idx = 0; idx < surface_filter_list.length; ++idx) {
+        const surfaceFilter = surface_filter_list[idx];
+        if (!surfaceFilter) {
+            continue;
+        }
+        if (surfaceFilter.params[0] === null) {
+            surfaceFilter.params.shift();
+        }
+        switch (surfaceFilter.class) {
+            case "BevelFilter":
+                filters.push(new BevelFilter(...surfaceFilter.params));
+                break;
+            case "BlurFilter":
+                filters.push(new BlurFilter(...surfaceFilter.params));
+                break;
+            case "ColorMatrixFilter":
+                filters.push(new ColorMatrixFilter(...surfaceFilter.params));
+                break;
+            case "ConvolutionFilter":
+                filters.push(new ConvolutionFilter(...surfaceFilter.params));
+                break;
+            case "DisplacementMapFilter":
+                filters.push(new DisplacementMapFilter(...surfaceFilter.params));
+                break;
+            case "DropShadowFilter":
+                filters.push(new DropShadowFilter(...surfaceFilter.params));
+                break;
+            case "GlowFilter":
+                filters.push(new GlowFilter(...surfaceFilter.params));
+                break;
+            case "GradientBevelFilter":
+                filters.push(new GradientBevelFilter(...surfaceFilter.params));
+                break;
+            case "GradientGlowFilter":
+                filters.push(new GradientGlowFilter(...surfaceFilter.params));
+                break;
+        }
+    }
+    return filters;
+};