@next2d/display 1.16.0 → 1.17.0

package/dist/DisplayObject.d.ts

@@ -546,6 +546,14 @@ export declare class DisplayObject extends EventDispatcher {
      * @private
      */
     _$removeWorkerInstance(): void;
+    /**
+     * @param  {Float32Array} buffer
+     * @param  {number} [index = 0]
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$registerProperty(buffer: Float32Array, index?: number): void;
     /**
      * @return {object}
      * @method

package/dist/DisplayObject.js

@@ -1,6 +1,6 @@
 import { Event as Next2DEvent, EventDispatcher } from "@next2d/events";
 import { Transform, Rectangle, Point } from "@next2d/geom";
-import { $getEvent, $getInstanceId, $currentMousePoint, $poolColorTransform, $rendererWorker, $poolMatrix, $hitContext, $variables } from "@next2d/util";
+import { $getEvent, $getInstanceId, $currentMousePoint, $poolColorTransform, $rendererWorker, $poolMatrix, $hitContext, $variables, $blendToNumber } from "@next2d/util";
 import { $doUpdated, $clamp, $getArray, $boundsMatrix, $Math, $poolBoundsObject, $Infinity, $getBoundsObject, $isNaN, $Deg2Rad, $Number, $Rad2Deg, $SHORT_INT_MIN, $SHORT_INT_MAX, $MATRIX_ARRAY_IDENTITY, $multiplicationMatrix, $poolFloat32Array6, $getMap, $poolMap, $getFloat32Array6, $devicePixelRatio, $poolArray, $cacheStore } from "@next2d/share";
 /**
  * DisplayObject クラスは、表示リストに含めることのできるすべてのオブジェクトに関する基本クラスです。
@@ -1599,6 +1599,86 @@ export class DisplayObject extends EventDispatcher {
             });
         }
     }
+    /**
+     * @param  {Float32Array} buffer
+     * @param  {number} [index = 0]
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$registerProperty(buffer, index = 0) {
+        // visible
+        buffer[index++] = +this._$visible;
+        // depth
+        buffer[index++] = this._$placeId;
+        // clip depth
+        buffer[index++] = this._$clipDepth;
+        // isMask
+        buffer[index++] = +this._$isMask;
+        const mask = this._$mask;
+        buffer[index++] = +(mask !== null);
+        if (mask) {
+            // mask id
+            buffer[index++] = mask._$instanceId;
+            let maskMatrix = $MATRIX_ARRAY_IDENTITY;
+            let parent = mask._$parent;
+            while (parent) {
+                maskMatrix = $multiplicationMatrix(parent._$transform._$rawMatrix(), maskMatrix);
+                parent = parent._$parent;
+            }
+            // mask matrix
+            buffer[index++] = maskMatrix[0];
+            buffer[index++] = maskMatrix[1];
+            buffer[index++] = maskMatrix[2];
+            buffer[index++] = maskMatrix[3];
+            buffer[index++] = maskMatrix[4];
+            buffer[index++] = maskMatrix[5];
+        }
+        else {
+            index += 7;
+        }
+        if (this._$visible) {
+            const transform = this._$transform;
+            // matrix
+            const matrix = transform._$rawMatrix();
+            buffer[index++] = matrix[0];
+            buffer[index++] = matrix[1];
+            buffer[index++] = matrix[2];
+            buffer[index++] = matrix[3];
+            buffer[index++] = matrix[4];
+            buffer[index++] = matrix[5];
+            // colorTransform
+            const colorTransform = transform._$rawColorTransform();
+            buffer[index++] = colorTransform[0];
+            buffer[index++] = colorTransform[1];
+            buffer[index++] = colorTransform[2];
+            buffer[index++] = colorTransform[3];
+            buffer[index++] = colorTransform[4];
+            buffer[index++] = colorTransform[5];
+            buffer[index++] = colorTransform[6];
+            buffer[index++] = colorTransform[7];
+        }
+        else {
+            index += 6; // matrix
+            index += 8; // colorTransform
+        }
+        // blend mode
+        const blendMode = this._$blendMode || this.blendMode;
+        buffer[index++] = $blendToNumber(blendMode);
+        // scale9Grid
+        const scale9Grid = this._$scale9Grid;
+        buffer[index++] = +(scale9Grid !== null);
+        if (scale9Grid) {
+            buffer[index++] = scale9Grid.x;
+            buffer[index++] = scale9Grid.y;
+            buffer[index++] = scale9Grid.width;
+            buffer[index++] = scale9Grid.height;
+        }
+        else {
+            index += 4;
+        }
+        // filter
+    }
     /**
      * @return {object}
      * @method
@@ -1607,6 +1687,7 @@ export class DisplayObject extends EventDispatcher {
     _$createMessage() {
         const message = {
             "command": "setProperty",
+            "buffer": new Float32Array(),
             "instanceId": this._$instanceId,
             "parentId": this._$parent ? this._$parent._$instanceId : -1,
             "visible": this._$visible

package/dist/DisplayObjectContainer.d.ts

@@ -331,7 +331,7 @@ export declare class DisplayObjectContainer extends InteractiveObject {
      */
     _$createWorkerInstance(): void;
     /**
-     * @return {object}
+     * @return {void}
      * @method
      * @private
      */

package/dist/DisplayObjectContainer.js

@@ -1,6 +1,6 @@
 import { InteractiveObject } from "./InteractiveObject";
 import { Event as Next2DEvent } from "@next2d/events";
-import { $createInstance, $currentPlayer, $hitContext, $isTouch, $MATRIX_HIT_ARRAY_IDENTITY, $rendererWorker } from "@next2d/util";
+import { $createInstance, $currentPlayer, $getRenderBufferArray, $getRenderMessageObject, $hitContext, $isTouch, $MATRIX_HIT_ARRAY_IDENTITY, $poolRenderMessageObject, $rendererWorker } from "@next2d/util";
 import { $cacheStore, $doUpdated, $boundsMatrix, $clamp, $getArray, $getBoundsObject, $getFloat32Array6, $getFloat32Array8, $getMap, $getPreObject, $Math, $COLOR_ARRAY_IDENTITY, $MATRIX_ARRAY_IDENTITY, $multiplicationColor, $multiplicationMatrix, $Number, $poolArray, $poolBoundsObject, $poolFloat32Array6, $poolFloat32Array8, $poolMap, $poolPreObject, $devicePixelRatio } from "@next2d/share";
 /**
  * DisplayObjectContainer クラスは、表示リストで表示オブジェクトコンテナとして機能するすべてのオブジェクトの基本クラスです。
@@ -384,14 +384,11 @@ export class DisplayObjectContainer extends InteractiveObject {
                 multiMatrix = $multiplicationMatrix(matrix, rawMatrix);
             }
         }
-        const graphics = "_$graphics" in this
-            ? this._$graphics
-            : null;
         const children = this._$needsChildren
             ? this._$getChildren()
             : this._$children;
         // size zero
-        if (!children.length && !graphics) {
+        if (!children.length) {
             const bounds = $getBoundsObject(multiMatrix[4], -multiMatrix[4], multiMatrix[5], -multiMatrix[5]);
             if (matrix && multiMatrix !== matrix) {
                 $poolFloat32Array6(multiMatrix);
@@ -404,16 +401,6 @@ export class DisplayObjectContainer extends InteractiveObject {
         let xMax = -no;
         let yMin = no;
         let yMax = -no;
-        if (graphics) {
-            const baseBounds = graphics._$getBounds();
-            const bounds = $boundsMatrix(baseBounds, multiMatrix);
-            $poolBoundsObject(baseBounds);
-            xMin = bounds.xMin;
-            xMax = bounds.xMax;
-            yMin = bounds.yMin;
-            yMax = bounds.yMax;
-            $poolBoundsObject(bounds);
-        }
         for (let idx = 0; idx < children.length; ++idx) {
             const bounds = children[idx]._$getBounds(multiMatrix);
             xMin = $Math.min(xMin, bounds.xMin);
@@ -434,14 +421,11 @@ export class DisplayObjectContainer extends InteractiveObject {
      * @private
      */
     _$getLayerBounds(multi_matrix) {
-        const graphics = "_$graphics" in this
-            ? this._$graphics
-            : null;
         const children = this._$needsChildren
             ? this._$getChildren()
             : this._$children;
         // size zero
-        if (!children.length && !graphics) {
+        if (!children.length) {
             return $getBoundsObject(0, 0, 0, 0);
         }
         // data init
@@ -450,16 +434,6 @@ export class DisplayObjectContainer extends InteractiveObject {
         let xMax = -no;
         let yMin = no;
         let yMax = -no;
-        if (graphics) {
-            const baseBounds = graphics._$getBounds();
-            const bounds = $boundsMatrix(baseBounds, multi_matrix);
-            $poolBoundsObject(baseBounds);
-            xMin = +bounds.xMin;
-            xMax = +bounds.xMax;
-            yMin = +bounds.yMin;
-            yMax = +bounds.yMax;
-            $poolBoundsObject(bounds);
-        }
         for (let idx = 0; idx < children.length; ++idx) {
             const instance = children[idx];
             let multiMatrix = multi_matrix;
@@ -592,7 +566,7 @@ export class DisplayObjectContainer extends InteractiveObject {
                     $cacheStore.setRemoveTimer(`${instance._$loaderInfo._$id}@${instance._$characterId}`);
                 }
                 if (instance._$graphics) {
-                    $cacheStore.setRemoveTimer(instance._$graphics._$cacheKey);
+                    $cacheStore.setRemoveTimer(instance._$graphics._$uniqueKey);
                 }
                 // remove event
                 if (instance.willTrigger(Next2DEvent.REMOVED)) {
@@ -695,7 +669,6 @@ export class DisplayObjectContainer extends InteractiveObject {
             }
             if ($rendererWorker) {
                 child._$createWorkerInstance();
-                child._$postProperty();
                 this._$postChildrenIds();
             }
         }
@@ -743,7 +716,6 @@ export class DisplayObjectContainer extends InteractiveObject {
             if (!instance._$addedStage) {
                 if ($rendererWorker) {
                     instance._$createWorkerInstance();
-                    instance._$postProperty();
                 }
                 if (instance.willTrigger(Next2DEvent.ADDED_TO_STAGE)) {
                     instance.dispatchEvent(new Next2DEvent(Next2DEvent.ADDED_TO_STAGE));
@@ -823,7 +795,7 @@ export class DisplayObjectContainer extends InteractiveObject {
                 $cacheStore.setRemoveTimer(`${child._$loaderInfo._$id}@${child._$characterId}`);
             }
             if (child._$graphics) {
-                $cacheStore.setRemoveTimer(child._$graphics._$cacheKey);
+                $cacheStore.setRemoveTimer(child._$graphics._$uniqueKey);
             }
             // reset params
             if (child instanceof DisplayObjectContainer) {
@@ -889,7 +861,7 @@ export class DisplayObjectContainer extends InteractiveObject {
                 $cacheStore.setRemoveTimer(`${instance._$loaderInfo._$id}@${instance._$characterId}`);
             }
             if (instance._$graphics) {
-                $cacheStore.setRemoveTimer(instance._$graphics._$cacheKey);
+                $cacheStore.setRemoveTimer(instance._$graphics._$uniqueKey);
             }
             if (instance instanceof DisplayObjectContainer) {
                 instance._$removeParentAndStage();
@@ -969,12 +941,6 @@ export class DisplayObjectContainer extends InteractiveObject {
             || rawMatrix[4] !== 0 || rawMatrix[5] !== 0) {
             multiMatrix = $multiplicationMatrix(matrix, rawMatrix);
         }
-        const graphics = "_$graphics" in this
-            ? this._$graphics
-            : null;
-        if (graphics && graphics._$canDraw) {
-            graphics._$clip(context, multiMatrix);
-        }
         const children = this._$getChildren();
         for (let idx = 0; idx < children.length; ++idx) {
             const instance = children[idx];
@@ -1224,10 +1190,7 @@ export class DisplayObjectContainer extends InteractiveObject {
         // not draw
         const children = this._$getChildren();
         const length = children.length;
-        const graphics = "_$graphics" in this
-            ? this._$graphics
-            : null;
-        if (!length && (!graphics || !graphics._$canDraw)) {
+        if (!length) {
             return;
         }
         // pre data
@@ -1244,10 +1207,6 @@ export class DisplayObjectContainer extends InteractiveObject {
         const preColorTransform = preObject.isLayer && preObject.color
             ? preObject.color
             : multiColor;
-        // if graphics draw
-        if (graphics && graphics._$canDraw) {
-            graphics._$draw(context, preMatrix, preColorTransform);
-        }
         // init clip params
         let shouldClip = true;
         let clipDepth = 0;
@@ -1486,15 +1445,6 @@ export class DisplayObjectContainer extends InteractiveObject {
         $poolArray(clips);
         $poolArray(targets);
         $poolMap(clipIndexes);
-        // graphics
-        if (!hit) {
-            const graphics = "_$graphics" in this
-                ? this._$graphics
-                : null;
-            if (graphics) {
-                hit = graphics._$hit(context, multiMatrix, options);
-            }
-        }
         if (multiMatrix !== matrix) {
             $poolFloat32Array6(multiMatrix);
         }
@@ -1526,17 +1476,10 @@ export class DisplayObjectContainer extends InteractiveObject {
                 return true;
             }
         }
-        let hit = false;
-        const graphics = "_$graphics" in this
-            ? this._$graphics
-            : null;
-        if (graphics) {
-            hit = graphics._$hit(context, multiMatrix, options);
-        }
         if (multiMatrix !== matrix) {
             $poolFloat32Array6(multiMatrix);
         }
-        return hit;
+        return false;
     }
     /**
      * @param  {number} index
@@ -1595,30 +1538,24 @@ export class DisplayObjectContainer extends InteractiveObject {
             return;
         }
         this._$created = true;
-        const options = $getArray();
-        const message = {
-            "command": "createDisplayObjectContainer",
-            "instanceId": this._$instanceId,
-            "parentId": this._$parent ? this._$parent._$instanceId : -1
-        };
-        const graphics = "_$graphics" in this
-            ? this._$graphics
-            : null;
-        if (graphics) {
-            const recodes = graphics._$getRecodes();
-            options.push(recodes.buffer);
-            message.recodes = recodes;
-            message.maxAlpha = graphics._$maxAlpha;
-            message.canDraw = graphics._$canDraw;
-            message.xMin = graphics._$xMin;
-            message.yMin = graphics._$yMin;
-            message.xMax = graphics._$xMax;
-            message.yMax = graphics._$yMax;
-        }
+        this._$posted = true;
+        this._$updated = false;
+        let index = 0;
+        const buffer = $getRenderBufferArray();
+        buffer[index++] = this._$instanceId;
+        buffer[index++] = this._$parent ? this._$parent._$instanceId : -1;
+        this._$registerProperty(buffer, index);
+        const message = $getRenderMessageObject();
+        message.command = "createDisplayObjectContainer";
+        message.buffer = buffer;
+        const options = $getArray(buffer.buffer);
         $rendererWorker.postMessage(message, options);
+        $poolRenderMessageObject(message);
+        $poolArray(options);
+        this._$postChildrenIds();
     }
     /**
-     * @return {object}
+     * @return {void}
      * @method
      * @private
      */
@@ -1629,21 +1566,6 @@ export class DisplayObjectContainer extends InteractiveObject {
         this._$postChildrenIds();
         const options = $getArray();
         const message = this._$createMessage();
-        const graphics = "_$graphics" in this
-            ? this._$graphics
-            : null;
-        if (graphics && !graphics._$buffer) {
-            message.maxAlpha = graphics._$maxAlpha;
-            message.canDraw = graphics._$canDraw;
-            const recodes = graphics._$getRecodes();
-            message.recodes = recodes;
-            options.push(recodes.buffer);
-            const bounds = this._$getBounds();
-            message.xMin = bounds.xMin;
-            message.yMin = bounds.yMin;
-            message.xMax = bounds.xMax;
-            message.yMax = bounds.yMax;
-        }
         $rendererWorker
             .postMessage(message, options);
         $poolArray(options);
@@ -1657,28 +1579,30 @@ export class DisplayObjectContainer extends InteractiveObject {
      * @private
      */
     _$postChildrenIds(childrenIds = null) {
-        if (!$rendererWorker) {
+        if (!$rendererWorker || !this._$created) {
             return;
         }
+        let poolIds = false;
         if (!childrenIds) {
             const children = this._$getChildren();
             childrenIds = $getArray();
             for (let idx = 0; idx < children.length; ++idx) {
                 childrenIds.push(children[idx]._$instanceId);
             }
-            $rendererWorker.postMessage({
-                "command": "setChildren",
-                "instanceId": this._$instanceId,
-                "children": childrenIds
-            });
-            $poolArray(childrenIds);
+            poolIds = true;
         }
-        else {
-            $rendererWorker.postMessage({
-                "command": "setChildren",
-                "instanceId": this._$instanceId,
-                "children": childrenIds
-            });
+        const buffer = new Int32Array(childrenIds.length + 1);
+        buffer[0] = this._$instanceId;
+        buffer.set(childrenIds, 1);
+        const message = $getRenderMessageObject();
+        message.command = "setChildren";
+        message.buffer = buffer;
+        const options = $getArray(buffer.buffer);
+        $rendererWorker.postMessage(message, options);
+        $poolRenderMessageObject(message);
+        $poolArray(options);
+        if (poolIds) {
+            $poolArray(childrenIds);
         }
     }
 }

package/dist/Graphics.d.ts

@@ -56,6 +56,7 @@ export declare class Graphics {
     private _$cacheParams;
     _$bitmapId: number;
     _$mode: ShapeModeImpl;
+    _$posted: boolean;
     /**
      * @param {DisplayObject} src
      *

package/dist/Graphics.js

@@ -246,6 +246,12 @@ export class Graphics {
          * @private
          */
         this._$mode = "shape";
+        /**
+         * @type {boolean}
+         * @default false
+         * @private
+         */
+        this._$posted = false;
     }
     /**
      * @description 指定されたクラスのストリングを返します。
@@ -568,6 +574,7 @@ export class Graphics {
         this._$canDraw = false;
         this._$bitmapId = 0;
         this._$mode = "shape";
+        this._$posted = false;
         // fill
         this._$fillType = 0;
         this._$fillGradient = null;
@@ -1376,8 +1383,8 @@ export class Graphics {
                     ._$transform
                     .concatenatedMatrix
                     ._$matrix;
-                $poolFloat32Array6(aMatrixBase);
                 const aMatrix = $getFloat32Array6(aMatrixBase[0], aMatrixBase[1], aMatrixBase[2], aMatrixBase[3], aMatrixBase[4] * mScale - xMin, aMatrixBase[5] * mScale - yMin);
+                $poolFloat32Array6(aMatrixBase);
                 const apMatrix = $multiplicationMatrix(aMatrix, pMatrix);
                 const aOffsetX = apMatrix[4] - (matrix[4] - xMin);
                 const aOffsetY = apMatrix[5] - (matrix[5] - yMin);
@@ -1390,7 +1397,14 @@ export class Graphics {
                 const parentWidth = $Math.ceil($Math.abs(parentXMax - parentXMin));
                 const parentHeight = $Math.ceil($Math.abs(parentYMax - parentYMin));
                 $poolBoundsObject(parentBounds);
-                context.grid.enable(parentXMin, parentYMin, parentWidth, parentHeight, baseBounds, displayObject._$scale9Grid, mScale, pMatrix[0], pMatrix[1], pMatrix[2], pMatrix[3], pMatrix[4], pMatrix[5], aMatrix[0], aMatrix[1], aMatrix[2], aMatrix[3], aMatrix[4] - aOffsetX, aMatrix[5] - aOffsetY);
+                const scale9Grid = displayObject._$scale9Grid;
+                const grid = {
+                    "x": scale9Grid.x,
+                    "y": scale9Grid.y,
+                    "w": scale9Grid.width,
+                    "h": scale9Grid.height
+                };
+                context.grid.enable(parentXMin, parentYMin, parentWidth, parentHeight, baseBounds, grid, mScale, pMatrix[0], pMatrix[1], pMatrix[2], pMatrix[3], pMatrix[4], pMatrix[5], aMatrix[0], aMatrix[1], aMatrix[2], aMatrix[3], aMatrix[4] - aOffsetX, aMatrix[5] - aOffsetY);
                 $poolFloat32Array6(pMatrix);
                 $poolFloat32Array6(aMatrix);
             }

package/dist/Loader.d.ts

@@ -1,7 +1,7 @@
 import { DisplayObjectContainer } from "./DisplayObjectContainer";
 import { LoaderInfo } from "./LoaderInfo";
 import { URLRequest } from "@next2d/net";
-import type { NoCodeDataImpl, ParentImpl } from "@next2d/interface";
+import type { NoCodeDataZlibImpl, NoCodeDataImpl, ParentImpl } from "@next2d/interface";
 /**
  * Loader クラスは、JSON ファイルまたはイメージ（JPEG、PNG、または GIF）ファイルを読み込むために使用します。
  * 読み込みを開始するには load() メソッドを使用します。
@@ -92,6 +92,16 @@ export declare class Loader extends DisplayObjectContainer {
      * @public
      */
     load(request: URLRequest): void;
+    /**
+     * @description NoCodeToolのJSONを直接読み込む
+     *              Read JSON directly from NoCodeTool
+     *
+     * @param  {string} json
+     * @return {void}
+     * @method
+     * @public
+     */
+    loadJSON(json: NoCodeDataZlibImpl | NoCodeDataImpl): void;
     /**
      * @param  {ProgressEvent} event
      * @return {void}

package/dist/Loader.js

@@ -139,6 +139,33 @@ export class Loader extends DisplayObjectContainer {
             }
         });
     }
+    /**
+     * @description NoCodeToolのJSONを直接読み込む
+     *              Read JSON directly from NoCodeTool
+     *
+     * @param  {string} json
+     * @return {void}
+     * @method
+     * @public
+     */
+    loadJSON(json) {
+        if (json.type === "zlib") {
+            if ($useUnzipWorker()) {
+                $unzipQueues.push(json);
+                return;
+            }
+            $updateUnzipWorkerStatus(true);
+            const unzipWorker = $getUnzipWorker();
+            const buffer = new Uint8Array(json.buffer);
+            unzipWorker.onmessage = (event) => {
+                this._$unzipHandler(event);
+            };
+            unzipWorker.postMessage(buffer, [buffer.buffer]);
+        }
+        else {
+            this._$build(json);
+        }
+    }
     /**
      * @param  {ProgressEvent} event
      * @return {void}
@@ -165,23 +192,7 @@ export class Loader extends DisplayObjectContainer {
         }
         if (199 < target.status && 400 > target.status) {
             if (loaderInfo.format === "json") {
-                const json = target.response;
-                if (json.type === "zlib") {
-                    if ($useUnzipWorker()) {
-                        $unzipQueues.push(json);
-                        return;
-                    }
-                    $updateUnzipWorkerStatus(true);
-                    const unzipWorker = $getUnzipWorker();
-                    const buffer = new Uint8Array(json.buffer);
-                    unzipWorker.onmessage = (event) => {
-                        this._$unzipHandler(event);
-                    };
-                    unzipWorker.postMessage(buffer, [buffer.buffer]);
-                }
-                else {
-                    this._$build(json);
-                }
+                this.loadJSON(target.response);
             }
             else {
                 if (loaderInfo.willTrigger(IOErrorEvent.IO_ERROR)) {

package/dist/Shape.d.ts

@@ -89,12 +89,6 @@ export declare class Shape extends DisplayObject {
      * @private
      */
     _$buildCharacter(character: Character<ShapeCharacterImpl>, loaderInfo: LoaderInfo): void;
-    /**
-     * @return {void}
-     * @method
-     * @private
-     */
-    _$createWorkerInstance(): void;
     /**
      * @param  {object} character
      * @return {void}
@@ -153,6 +147,12 @@ export declare class Shape extends DisplayObject {
      * @private
      */
     _$hit(context: CanvasRenderingContext2D, matrix: Float32Array, options: PlayerHitObjectImpl, is_clip?: boolean): boolean;
+    /**
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$createWorkerInstance(): void;
     /**
      * @return {void}
      * @method